DESIGN_SYSTEM.md — KAI CLUB

Dirección: editorial atlántico-mediterránea, cálida, fotográfica. La web debe sentirse como una revista de verano bien impresa, no como un SaaS. La fotografía/vídeo real es la protagonista; el sistema tipográfico y cromático enmarca, no compite.

1. Fundamento: lo que la marca YA es (observado, no inventado)

Naming hawaiano: Kai (mar), Kanaloa, Keola, Kamala, Kaikane, Aloha, Makai. Posicionamiento: «Beach Club Gastronómico · Frente al mar» y «el mejor atardecer de la isla».
Sus cartas impresas usan duotonos por categoría: tarifas = crema + terracota · bebidas = menta + verde botella · comida = amarillo sol + azul marino. Este es un rasgo de identidad REAL y distintivo → lo elevamos a sistema.
Tipografías actuales: Antonio (display condensada), Lexend y Manrope (Google Fonts).

2. Color — «Kai Dayparts» (del mediodía al atardecer)

Base neutra + 4 duotonos de sección. Nada de gradientes decorativos ni glassmorphism.

:root {
  /* Base */
  --arena:      #F4EEE3;  /* fondo cálido por defecto (papel) */
  --arena-alt:  #EDE4D3;
  --tinta:      #1F2937 → ajustar a #26251F; /* casi-negro cálido, texto */
  --blanco:     #FFFDF8;

  /* Duotonos de sección (herencia de sus cartas impresas) */
  --terracota:  #D95B2E;  /* sol/tarifas/reserva — ACENTO PRINCIPAL Y CTA */
  --terracota-deep: #B84722;
  --menta:      #D8E8DC;  /* bebidas/piscina */
  --botella:    #1F5A44;
  --sol:        #F2C94C;  /* comida */
  --marino:     #16324A;
  --oceano:     #0E4C63;  /* mar/localización */
  --atardecer:  #E8A26D;  /* sunset, solo en franjas KAI TODAY/sunset */
}

Reglas: 1 duotono por sección, texto siempre del par (contraste AA verificado: terracota sobre arena solo ≥24 px/bold; cuerpo siempre en tinta). CTA primario SIEMPRE terracota → reconocible en toda la web. Texto sobre foto: siempre con scrim (gradiente negro 0→45%) — nunca texto directo sobre imagen (lección medida: Lighthouse no detecta ilegibilidad sobre foto).

3. Tipografía

Display: Antonio (600/700) — es su fuente de marca; condensada, mayúsculas, tracking +2%. Titulares grandes tipo cartel: clamp(2.5rem, 8vw, 7rem).
Cuerpo y UI: Manrope (400/500/700) — se elimina Lexend (3 familias → 2; menos peso, misma voz).
Self-hosted con next/font (subset latin, font-display: swap, preload solo los 2 pesos above-the-fold). Cero requests a Google Fonts (privacidad + performance + CSP estricta).
Escala: 12 / 14 / 16 (base) / 18 / 22 / 28 / 36 / 48 / 64 / 96. Interlineado 1.5 cuerpo, 0.95 display. Números tabulares en precios.

4. Espaciado, retícula, forma

Retícula 12 col, gutter 24 px (16 en móvil), contenedor máx 1280 px; secciones full-bleed para foto/vídeo.
Espaciado en escala 4: 4/8/12/16/24/32/48/64/96/128. Secciones respiran: py-24 móvil, py-40 desktop.
Radios: 0 en imágenes editoriales full-bleed; 12 px en tarjetas funcionales (booking); pill solo en CTA y chips. Sin sombras decorativas (solo elevación funcional en modales/barra móvil).
Bordes: 1 px tinta/15%. Evitar «tarjeta-itis»: las secciones editoriales usan tipografía+espacio, no cajas.

5. Motion (sutil, 60 fps, GPU-only)

Permitido: fade+rise 12 px al entrar en viewport (once), image reveal con clip-path, parallax suave ≤8% solo en heroes, transición de página fade 200 ms, hover scale 1.02 en cards.
Duraciones 200–400 ms, easing cubic-bezier(0.22,1,0.36,1). Solo transform/opacity (nunca layout).
prefers-reduced-motion: reduce → todo estático (media query global, no opcional).
Prohibido: scroll-jacking, cursores custom, animaciones en loop decorativas, contadores animados.

6. Componentes núcleo (inventario v1)

Componente	Notas
`Header`	Transparente sobre hero → sólido arena al hacer scroll. Logo + 4 enlaces + selector idioma + CTA «Reservar» terracota. Móvil: sheet a pantalla completa, enlaces XXL.
`BookBar` (móvil)	Decisión navegación móvil: NO bottom-nav de 5 iconos (duplica el header y roba 64 px permanentes). En su lugar, barra inferior contextual con 2 acciones: «Reservar» + WhatsApp contextual. Aparece tras pasar el hero, se oculta al hacer scroll down en la carta (lectura), reaparece al subir.
`Hero`	Vídeo real (poster inmediato, `preload=none→auto` en idle, playsinline muted loop) o foto AVIF. Overlay mínimo: claim + 2 CTAs. Altura 100svh.
`KaiTodayStrip`	Franja atardecer bajo el hero: clima · sunset · mensaje del día · DJ · nota de disponibilidad. Cada dato se oculta si no existe.
`SectionEditorial`	Título Antonio + párrafo corto + foto full-bleed; variante duotono.
`ExperienceCard`	Foto, nombre, qué incluye (3 bullets), precio desglosado claro, CTA.
`PriceLine`	«20 € acceso + 40 € consumo mínimo/adulto» — siempre el desglose completo, nunca precio-gancho.
`MenuList`	Carta HTML pura: categoría → items (nombre, descripción, precio, iconos alérgenos/veg). Sticky category nav horizontal. CERO imágenes obligatorias → carga instantánea. PDF como enlace secundario.
`DrinkEditorial`	Bebidas con jerarquía editorial: signature cocktails destacados a página completa, resto en lista.
`EventPoster`	Cartel + fecha grande + CTA según booking_mode.
`LeadWizard`	«¿Qué celebras?» → tipo → invitados → fecha → servicios (chips) → datos. 1 pregunta por pantalla en móvil.
`GalleryMasonry`	Categorías filtrables, lazy, AVIF/WebP, lightbox swipe.
`ReviewsRow`	Citas curadas con fuente y enlace.
`LocationBlock`	Mapa estático clicable (imagen → link a GMaps, sin iframe pesado), «Cómo llegar», horario, WhatsApp.
`WhatsAppCta`	Contextual: mensaje precargado distinto en reservas/eventos/grupos/contacto. Nunca burbuja flotante global.
`Footer`	Contacto completo, horario, RRSS, legal, aviso subvención EU (obligatorio), Cornisa/Brasserie como «familia Kai».

7. Accesibilidad (no negociable)

Contraste AA real (medido, incl. texto sobre foto con scrim), focus visible custom (anillo terracota 2 px), targets táctiles ≥44 px, lang correcto por locale, un h1 por página con jerarquía lógica, alt descriptivo en toda imagen de contenido, formularios con label+error accesible, carruseles: NO usar (sustituidos por secciones apiladas/scroll-snap con controles accesibles).

8. Voz y copy

Corto, sensorial, bilingüe elegante. Mayúsculas Antonio para claims; frases de 3–6 palabras. Ejemplos de dirección (a validar con cliente, no definitivos): ES «El día empieza en el agua» / «Quédate al atardecer» · EN «Meet you by the pool» / «Stay for sunset» · DE «Dein Tag am Wasser». Prohibido: «Bienvenidos a nuestra página web», exclamaciones dobles, adjetivos vacíos («increíble», «único») sin imagen que los respalde.