/* ═══════════════════════════════════════════════════════════════════
   TOKENS · adaptación Verde Oliva sobre el lenguaje de Skinome

   Paleta híbrida, decidida con el cliente el 18/08/2026: el chasis
   neutro de Skinome (beige, bordes tostados) con el verde de Verde
   Oliva como acento. Ningún otro archivo declara un color literal.

   Los valores marcados "brand/04" están verificados por contraste y
   son innegociables:
     · Oro  #B08D3F  jamás es texto. Sólo filetes, bordes y hover.
     · Hoja #6B7B3C  jamás es texto de cuerpo.
     · El CTA es siempre fondo Oliva Profundo con texto Crema.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;

  /* ── Chasis neutro, de Skinome ──────────────────────────── */
  --fondo:#F6F3F0;        /* el beige de toda la página            */
  --fondo-2:#EFEAE4;      /* sección alterna, campos hundidos      */
  --superficie:#FCFAF7;   /* tarjeta elevada sobre el beige        */
  --borde:#D5D0C9;        /* el borde de 1px de Skinome            */
  --borde-fuerte:#B4AB9E; /* borde en hover y en foco              */

  /* ── Tinta ──────────────────────────────────────────────── */
  --tinta:#1C1917;        /* brand/04 · texto de cuerpo            */
  --tinta-2:#5A544C;      /* texto secundario                      */
  /* #8A8279 daba 3,42:1 sobre --fondo y no llegaba a AA. Este llega
     a 4,97:1 y se ve casi igual. Afecta .kicker, .card__f y .solapa,
     que están en todas las páginas. */
  --tinta-3:#6F6860;      /* ayudas, formatos, metadatos           */

  /* ── Verde de marca, el acento ──────────────────────────── */
  --oliva:#3A4433;        /* brand/04 · Oliva Profundo · el CTA    */
  --oliva-h:#2C3427;      /* el CTA en hover                       */
  --oliva-cl:#4A5741;     /* bordes de foco sobre fondo claro      */
  --hoja-t:#616F36;       /* brand/04 · el único verde que es texto*/
  --salvia:#DDE2CE;       /* relleno suave, halo de foco           */

  /* ── Oro · filetes, nunca texto ─────────────────────────── */
  --oro:#B08D3F;          /* brand/04 · subrayados, filetes 1px    */
  --oro-t:#7E6129;        /* el único oro que puede ser texto      */

  /* ── Sobre fondo oscuro ─────────────────────────────────── */
  --crema:#F7F4EC;        /* brand/04 · texto sobre oliva          */
  --crema-2:rgba(247,244,236,.72);

  /* ── El CTA ─────────────────────────────────────────────────
     En claro es exactamente la regla de brand/04: fondo Oliva
     Profundo, texto Crema. Existe como token propio para que el
     tema oscuro pueda invertirlo sin tocar qué significan --oliva
     y --crema en todo el resto del sitio. */
  --cta-bg:var(--oliva);
  --cta-fg:var(--crema);
  --cta-bg-h:var(--oliva-h);

  /* ── Superficies de interacción ─────────────────────────── */
  --crema-h:#FFFFFF;                 /* el blanco del hover claro   */
  --hover-suave:rgba(0,0,0,.06);     /* ícono en hover, fondo claro */
  --hover-sobre-foto:rgba(255,255,255,.14);

  /* ── Estados ────────────────────────────────────────────── */
  --ok:#4A6741;  --err:#A3402F;  --aviso:#8A6A1F;

  /* El brillo que recorre el hueco de una foto que todavía no llegó. */
  --brillo:rgba(255,255,255,.55);

  /* El velo detrás de un diálogo. Corteza con alfa, no negro puro:
     el negro sobre una paleta cálida se lee azulado. */
  --velo-tinta:rgba(28,25,23,.55);

  /* La sombra de lo que flota sobre la página (volver arriba, barra de
     compra). En oscuro se refuerza: una sombra suave contra Corteza no
     se ve, y sin ella el elemento flotante se funde con el fondo. */
  --sombra-flota:rgba(28,25,23,.09);
  --sombra-flota-fuerte:rgba(28,25,23,.14);

  /* El borde de los paneles que flotan sobre el velo. En claro es el
     borde de siempre; en oscuro se refuerza (ver el bloque del tema
     oscuro y el porqué). */
  --borde-panel:var(--borde);

  /* El error sobre fondo oscuro (el footer es Oliva Profundo). El
     --err de arriba es un rojo oscuro pensado para fondo crema:
     sobre #3A4433 da 1.2:1, ilegible. Este terracota claro da 4.8:1
     contra el olivo, medido, no estimado. */
  --err-cl:#E9A08C;

  /* ── Botón de contacto flotante ─────────────────────────────
     El FamilyButton (ver css/componentes.css) es un widget con su
     propio chasis oscuro que no depende del tema de la página: es
     una pastilla que flota SOBRE el contenido, y en Skinome ese
     control se lee siempre igual esté el fondo claro u oscuro.
     Por eso sus colores viven acá como tokens propios y no se
     redefinen en el tema oscuro.

     --wsp es el verde oficial de WhatsApp. Es color de un tercero,
     no de la marca: se usa exclusivamente para que el ícono se
     reconozca, nunca como color de Verde Oliva. */
  --oliva-hondo:#1C2118;              /* cierre del gradiente       */
  --wsp:#25D366;
  --fam-borde-osc:rgba(0,0,0,.1);     /* los bordes anidados        */
  --fam-borde-cl:rgba(255,255,255,.5);
  --fam-borde-in:rgba(10,10,10,.2);
  --fam-vidrio:rgba(255,255,255,.1);  /* relleno de las filas       */
  --fam-vidrio-h:rgba(255,255,255,.15);
  --fam-tinta-3:rgba(255,255,255,.5); /* el rótulo "Contacto"       */
  --fam-tinta-2:rgba(255,255,255,.7); /* la × en reposo             */
  --fam-sombra:rgba(0,0,0,.22);

  /* ── Tipografía ─────────────────────────────────────────────
     Space Grotesk para todo lo que estructura (títulos, nav,
     botones, etiquetas); Archivo para leer y para los precios.
     brand/04 prohíbe precios en serif: la ambigüedad de sus
     numerales es un problema real cuando el número es plata. */
  --fs:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --fb:'Archivo','Helvetica Neue',Arial,sans-serif;

  /* Escala fluida. El paso entre niveles es ~1.25 en móvil y se
     abre a ~1.33 en desktop, para que el título respire más ahí
     donde hay ancho. */
  --t-xs:.6875rem;                              /* 11px · etiquetas */
  --t-sm:.8125rem;                              /* 13px · metadatos */
  --t-base:clamp(.9375rem,.9rem + .16vw,1rem);
  --t-lead:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  --t-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --t-h2:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);
  --t-h1:clamp(2.25rem,1.6rem + 3.2vw,4.5rem);

  --tr-tight:-.02em;   /* títulos grandes: Space Grotesk abre solo */
  --tr-caps:.14em;     /* versalitas: sin esto no se leen          */

  /* ── Ritmo ──────────────────────────────────────────────── */
  --gutter:20px;
  --ancho:1440px;
  --sect:clamp(56px,7vw,112px);   /* aire vertical de sección      */
  --cinta-h:38px;                /* alto de la cinta de anuncios  */
  --radio:2px;                    /* Skinome casi no redondea nada */

  /* ── Movimiento ─────────────────────────────────────────────
     Las curvas salen del análisis de la grabación (§3 del PLAN). */
  --e-expo:cubic-bezier(.19,1,.22,1);      /* carruseles           */
  --e-drawer:cubic-bezier(.25,1,.5,1);     /* entra rápido, frena  */
  --e-escala:cubic-bezier(.19,.61,.15,.82);/* hover-scale de fotos */
  --aos-dur:.5s;
  --aos-paso:150ms;    /* el escalonado entre hermanos             */
  --desplazo:24px;     /* cuánto sube un fade-up                   */
}

@media(min-width:768px){ :root{ --gutter:40px } }