/* Café Conexión · tokens de marca
   Cambiar la marca = editar este archivo. styles.css solo usa estos nombres.
   Paleta: decisión del 28-sep-2026 (README.md → Decisiones).
   Fuentes: Fraunces (titulares y nombres de platos) + Figtree (texto, botones y precios). */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT@9..144,400..700,0..100&display=swap');

:root {
  /* ---------- Paleta ---------- */
  --crema: #FCF6F0;
  --piedra: #E6E6DD;
  --arena: #E4DBCD;
  --tarjeta: #FCFAF6;
  --musgo: #424A3D;
  --musgo-hondo: #353C31;
  --pizarra: #45556B;
  --tinta: #2A2829;
  --gris: #5E5C59;
  --filete: #DDD6CE;

  /* Canales RGB para transparencias: rgb(var(--tinta-rgb) / .15) */
  --tinta-rgb: 42 40 41;
  --musgo-rgb: 66 74 61;
  --crema-rgb: 252 246 240;

  /* ---------- Papel de cada color en la web ---------- */
  --fondo: var(--crema);               /* fondo base */
  --fondo-alterno: var(--piedra);      /* secciones alternas: Menú, Reseñas */
  --superficie: var(--arena);          /* bloques grandes: intro, Lo que hay, cierre, menú del celular */
  --tarjeta-fondo: var(--tarjeta);
  --texto: var(--tinta);
  --texto-2: var(--gris);              /* descripciones y notas */
  --primario: var(--musgo);            /* titulares y botón principal */
  --primario-hover: var(--musgo-hondo);
  --primario-texto: var(--crema);      /* texto sobre el primario */
  --enlace: var(--musgo);              /* enlaces, íconos y anillo de foco */
  --acento: var(--pizarra);            /* sobretítulos, etiqueta «Favorito», detalles: 5 % o menos */
  --borde: var(--filete);
  --linea: rgb(var(--tinta-rgb) / .13);     /* filetes entre platos y filas */
  --hover: rgb(var(--musgo-rgb) / .08);     /* fondo suave al pasar el mouse */
  --placeholder: var(--piedra);        /* recuadros de foto pendiente */
  --hero-fondo: var(--musgo);          /* se ve mientras no haya foto en el inicio */
  --pie-fondo: var(--musgo);
  --pie-texto: var(--crema);
  --marca-pendiente: #97502F;          /* solo vista previa: marco y etiqueta PENDIENTE */
  --barra-fondo: rgb(var(--crema-rgb) / .96);   /* barra inferior del celular */
  --pie-luz-calida: 151 80 47;         /* luces suaves del footer (canales RGB) */
  --pie-luz-fria: 157 182 160;

  /* ---------- Tipografía ---------- */
  --fuente-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fuente-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display-ajustes: 'SOFT' 100, 'WONK' 0;

  --h1: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  --h1-alto: 1.02;
  --h1-tracking: -0.02em;
  --h1-peso: 560;
  --h2: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --h2-alto: 1.08;
  --h2-tracking: -0.015em;
  --h2-peso: 540;
  --h3: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  --h3-alto: 1.2;
  --h3-peso: 520;
  --sobre: 0.78rem;
  --sobre-peso: 600;
  --sobre-tracking: 0.16em;
  --cuerpo: 1.0625rem;
  --cuerpo-alto: 1.65;
  --pequeno: 0.875rem;
  --pequeno-alto: 1.5;
  --boton: 0.95rem;
  --boton-peso: 600;
  --boton-tracking: 0.01em;
  --precio-peso: 600;

  /* ---------- Formas y sombras ---------- */
  --radio-sm: 10px;
  --radio-md: 18px;
  --radio-lg: 28px;
  --pildora: 999px;
  --sombra-suave: 0 1px 2px rgb(var(--tinta-rgb) / .06);
  --sombra-hover: 0 18px 40px -24px rgb(var(--musgo-rgb) / .35);

  /* ---------- Layout ---------- */
  --contenedor: 1200px;
  --margen: 20px;                      /* 32px en tablet y 48px en escritorio, abajo */
  --pad-seccion: clamp(72px, 9vw, 128px);
  --alto-cabecera: 64px;
  --alto-barra-movil: 70px;

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-micro: 160ms;
  --t-ui: 320ms;
  --t-reveal: 640ms;
  --t-zoom: 16s;
  --escalon: 70ms;                     /* retraso entre elementos que entran juntos */
  --subida: 16px;                      /* recorrido del fundido hacia arriba */
}

/* ---------- Tema de la página del café (cafe.html: <html data-tema="cafe">) ----------
   Tostado oscuro, crema de leche y caramelo. Solo cambia los papeles: el resto del sitio
   sigue con la paleta de arriba. */
[data-tema="cafe"] {
  --espresso: #15100D;
  --tostado: #1E1612;
  --grano: #2A1F19;
  --tarjeta-cafe: #221913;
  --crema-leche: #F2E6D8;
  --cafe-con-leche: #C4B19E;
  --caramelo: #E3A55A;
  --caramelo-claro: #F0BE7E;
  --cobre: #DE8052;
  --cafe-rgb: 21 16 13;
  --caramelo-rgb: 227 165 90;
  --leche-rgb: 242 230 216;

  --fondo: var(--espresso);
  --fondo-alterno: var(--tostado);
  --superficie: var(--grano);
  --tarjeta-fondo: var(--tarjeta-cafe);
  --texto: var(--crema-leche);
  --texto-2: var(--cafe-con-leche);
  --primario: var(--caramelo);
  --primario-hover: var(--caramelo-claro);
  --primario-texto: var(--espresso);
  --enlace: var(--caramelo);
  --acento: var(--cobre);
  --borde: rgb(var(--leche-rgb) / .12);
  --linea: rgb(var(--leche-rgb) / .12);
  --hover: rgb(var(--caramelo-rgb) / .12);
  --placeholder: var(--grano);
  --hero-fondo: #0E0A08;
  --pie-fondo: #0E0A08;
  --pie-texto: var(--crema-leche);
  --barra-fondo: rgb(var(--cafe-rgb) / .96);
  --pie-luz-calida: 227 165 90;
  --pie-luz-fria: 222 128 82;

  /* Capas de las tazas dibujadas */
  --capa-espresso: #4A2B1C;
  --capa-agua: #7A5540;
  --capa-leche: #D8C0A2;
  --capa-espuma: #F4E9DA;
  --capa-chocolate: #2E1810;
  --capa-almendras: #E6D5BC;

  color-scheme: dark;
}

/* ---------- Tema de la página Fit (fit.html: <html data-tema="fit">) ----------
   Claro y fresco, como el volante de la línea: menta, verde azulado y lila, con la salvia de
   la dueña en los detalles. */
[data-tema="fit"] {
  --menta: #F3F8F5;
  --menta-2: #E6F1EC;
  --menta-3: #DDEDE5;
  --verde-azulado: #2E7268;
  --verde-azulado-hondo: #235A52;
  --lila: #7A5BA6;
  --lila-claro: #EDE6F6;
  --salvia: #9DB6A0;
  --tinta-fit: #1E2B28;
  --gris-fit: #55625E;
  --fit-rgb: 46 114 104;
  --tinta-fit-rgb: 30 43 40;

  --fondo: var(--menta);
  --fondo-alterno: var(--menta-2);
  --superficie: var(--menta-3);
  --tarjeta-fondo: #FFFFFF;
  --texto: var(--tinta-fit);
  --texto-2: var(--gris-fit);
  --primario: var(--verde-azulado);
  --primario-hover: var(--verde-azulado-hondo);
  --primario-texto: #FFFFFF;
  --enlace: var(--verde-azulado);
  --acento: var(--lila);
  --borde: #D3E4DB;
  --linea: rgb(var(--tinta-fit-rgb) / .12);
  --hover: rgb(var(--fit-rgb) / .08);
  --placeholder: var(--menta-2);
  --hero-fondo: var(--verde-azulado);
  --pie-fondo: #1F4F48;
  --pie-texto: var(--menta);
  --barra-fondo: rgb(243 248 245 / .96);
  --pie-luz-calida: 122 91 166;
  --pie-luz-fria: 157 182 160;
  --sombra-hover: 0 18px 40px -24px rgb(var(--fit-rgb) / .45);
}

/* ---------- Tema del inicio (index.html: <html data-tema="inicio">) ----------
   Los colores de la marca, los de los afiches del colibrí, en su versión más suave: lino, arena,
   oliva y malva, con la salvia de la dueña en las ramitas. La portada no cambia. */
[data-tema="inicio"] {
  --lino-suave: #F8F3EC;
  --arena-suave: #F0E8DC;
  --arena-media: #E9DFCF;
  --oliva-suave: #58643F;
  --oliva-suave-honda: #465032;
  --malva-suave: #7E525C;
  --cacao-suave: #3A302A;
  --cacao-suave-2: #6B5D53;
  --oliva-suave-rgb: 88 100 63;
  --cacao-suave-rgb: 58 48 42;

  --fondo: var(--lino-suave);
  --fondo-alterno: var(--arena-suave);
  --superficie: var(--arena-media);
  --tarjeta-fondo: #FFFCF7;
  --texto: var(--cacao-suave);
  --texto-2: var(--cacao-suave-2);
  --primario: var(--oliva-suave);
  --primario-hover: var(--oliva-suave-honda);
  --primario-texto: #FFFCF7;
  --enlace: var(--oliva-suave);
  --acento: var(--malva-suave);
  --borde: #E4D8C6;
  --linea: rgb(var(--cacao-suave-rgb) / .12);
  --hover: rgb(var(--oliva-suave-rgb) / .08);
  --placeholder: var(--arena-suave);
  --hero-fondo: #4F5A3A;
  --pie-fondo: #3F4630;
  --pie-texto: var(--lino-suave);
  --barra-fondo: rgb(248 243 236 / .96);
  --sombra-hover: 0 18px 40px -24px rgb(var(--oliva-suave-rgb) / .4);
  --pie-luz-calida: 138 92 102;
  --pie-luz-fria: 157 182 160;
}

/* ---------- Tema de la página de talleres (talleres.html: <html data-tema="talleres">) ----------
   Lino, oliva y malva, como los afiches de los talleres del café. */
[data-tema="talleres"] {
  --lino: #F6EFE6;
  --lino-2: #EEE3D4;
  --lino-3: #E6D8C4;
  --oliva: #5B6638;
  --oliva-honda: #47502B;
  --malva: #8E5A67;
  --cacao: #3B2E28;
  --cacao-2: #6A5A50;
  --oliva-rgb: 91 102 56;
  --cacao-rgb: 59 46 40;

  --fondo: var(--lino);
  --fondo-alterno: var(--lino-2);
  --superficie: var(--lino-3);
  --tarjeta-fondo: #FFFBF6;
  --texto: var(--cacao);
  --texto-2: var(--cacao-2);
  --primario: var(--oliva);
  --primario-hover: var(--oliva-honda);
  --primario-texto: #FFFBF6;
  --enlace: var(--oliva);
  --acento: var(--malva);
  --borde: #E2D3C0;
  --linea: rgb(var(--cacao-rgb) / .13);
  --hover: rgb(var(--oliva-rgb) / .08);
  --placeholder: var(--lino-2);
  --hero-fondo: var(--oliva);
  --pie-fondo: #3F4728;
  --pie-texto: var(--lino);
  --barra-fondo: rgb(246 239 230 / .96);
  --pie-luz-calida: 142 90 103;
  --pie-luz-fria: 201 186 140;
  --sombra-hover: 0 18px 40px -24px rgb(var(--oliva-rgb) / .45);
}

/* Breakpoints: 640px (sm), 1024px (md), 1280px (lg). */
@media (min-width: 640px) {
  :root { --margen: 32px; }
}
@media (min-width: 1024px) {
  :root { --margen: 48px; --alto-cabecera: 76px; --alto-barra-movil: 0px; }
}

/* ---------- Paletas alternativas ----------
   Para cambiar de paleta entera se reemplaza el bloque «Papel de cada color» por uno de estos.

   Paleta del JSON (marca_provisional):
     --fondo: #F4EEE4; --fondo-alterno: #E9DFCF; --superficie: #9DB6A0; --tarjeta-fondo: #FFFDF9;
     --texto: #23211E; --texto-2: #6B665E; --primario: #2F4436; --primario-hover: #243529;
     --primario-texto: #F4EEE4; --enlace: #4A6653; --acento: #97502F; --borde: rgb(35 33 30 / .12);
     --placeholder: #E3ECE4; --hero-fondo: #2F4436; --pie-fondo: #2F4436; --pie-texto: #F4EEE4;

   Paleta del manual de marca (brand-CafeConexion.json):
     --fondo: #FAF7F1; --fondo-alterno: #E7DCC9; --superficie: #9DB6A0; --tarjeta-fondo: #FAF7F1;
     --texto: #2E332C; --texto-2: rgb(46 51 44 / .7); --primario: #4E6353; --primario-hover: #3E5043;
     --primario-texto: #FAF7F1; --enlace: #4E6353; --acento: #B0552F; --borde: #E7DCC9;
     --placeholder: #E7DCC9; --hero-fondo: #4E6353; --pie-fondo: #4E6353; --pie-texto: #FAF7F1;
     (con el manual, las fuentes son Lora + Nunito Sans) */