/* css/tokens.css?v=ed94a354 — variables de diseño de la tienda PHN F.VIT FIBRA.
   Mismos valores que el DESIGN.md canónico de PHN (distribuidor-en-caja). El porqué está en DESIGN.md. */
/* Arial ajustada a las medidas de Lato: mientras llega la fuente el texto ocupa lo mismo y la página
   no salta al cambiar (Lighthouse medía CLS 0.19 por ese cambio) */
@font-face {
  font-family: 'Lato Fallback';
  src: local('Arial');
  size-adjust: 97.69%;
  ascent-override: 101.18%;
  descent-override: 21.83%;
  line-gap-override: 0%;
}
:root {
  /* Color */
  --verde: #74AF28;          /* el verde del logo. Superficie y acento, nunca texto sobre papel */
  --verde-hover: #679C22;
  --sobre-verde: #FFFFFF;    /* texto sobre el verde: blanco con sombra (decisión de Aron, 2026-09-29) */
  --sombra-texto: 0 1px 2px rgb(0 0 0 / 38%);
  --verde-tinte: #EEF5E2;    /* fondo de bloques de marca, casi blanco */
  --oro: #C9A227;            /* ahorro, anillo de foco. No es color de texto */
  --oro-tinte: #FBF3DC;
  --tinta: #1A1A1A;          /* texto principal (16.7:1) */
  --tinta-suave: #575757;    /* texto secundario (6.9:1) */
  --papel-tenue: #C7C7C2;    /* texto secundario sobre fondo oscuro */
  --papel: #FBFAF6;          /* fondo de página */
  --papel-suave: #F4F4F2;    /* sección alterna */
  --tarjeta: #FFFDF9;        /* superficie elevada, no #fff */
  --gris-pie: #2B2B2B;       /* pie, como proher-natura.com */
  --linea: rgb(0 0 0 / 12%);
  --linea-clara: rgb(255 255 255 / 16%);
  --whatsapp: #25D366;       /* color del canal, no de la marca */
  --error: #B42318;

  /* Tipografía: una sola familia, la jerarquía la dan peso y tamaño */
  --fuente: 'Lato', 'Lato Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --peso-encabezado: 900;
  --peso-rotulo: 700;
  --peso-cuerpo: 400;
  --txt-xs: 0.8125rem;
  --txt-sm: 0.9375rem;
  --txt-base: 1.0625rem;
  --txt-lg: 1.1875rem;
  --txt-xl: clamp(1.25rem, 2.2vw, 1.5rem);
  --txt-2xl: clamp(1.5rem, 3vw, 2rem);
  --txt-3xl: clamp(1.85rem, 4.2vw, 2.7rem);
  --txt-4xl: clamp(2.3rem, 6vw, 3.6rem);

  /* Espacio */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.25rem;
  --e-6: 1.5rem; --e-8: 2rem; --e-10: 2.5rem; --e-12: 3rem; --e-16: 4rem;
  --seccion: clamp(2.5rem, 6vw, 4.5rem);  /* compacto: menos aire muerto entre secciones */
  --ancho: 70rem;
  --canal: clamp(1.25rem, 5vw, 2.5rem);

  /* Forma */
  --radio: 12px;
  --radio-sm: 8px;
  --radio-pill: 999px;
  --sombra: 0 1px 2px rgb(0 0 0 / 4%), 0 12px 32px -16px rgb(0 0 0 / 22%);
  --sombra-alta: 0 2px 4px rgb(0 0 0 / 5%), 0 24px 48px -20px rgb(0 0 0 / 28%);
  --transicion: 200ms cubic-bezier(.4, 0, .2, 1);

  /* Capas */
  --z-header: 50;
  --z-flotante: 60;
  --z-drawer: 80;
  --z-modal: 90;
}