/* ═══════════════════════════════════════════════════════════════════
   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{
  /* ── 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                      */
  --tinta-3:#8A8279;      /* 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);

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

  /* ── 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 } }