/* ==========================================================================
   Tokens de diseño — SMP
   Derivados de figma/tokens/tokens.json. Al cambiar un valor aquí cambia
   todo el sitio: es la capa que se re-viste en cada proyecto nuevo.
   ========================================================================== */

:root {
  /* --- Color ---------------------------------------------------------- */

  /* El archivo de Figma tenía tres verdes oscuros indistinguibles a ojo
     (#1F3E1F 13 usos, #223711 8, #204019 1) y dos olivas (#889408 15,
     #717C1B 1). Se conservan los dos verdes oscuros porque sí difieren en
     matiz — el de la barra tira a oliva — y se unifican los dos olivas. */
  --verde-barra: #223711;      /* cabecera y pie */
  --verde-oscuro: #1f3e1f;     /* texto sobre fondo claro, botones */
  --verde-oliva: #889408;      /* botón primario */
  --verde-lima: #dbe149;       /* acento, borde e iconos */

  --gris-texto: #333333;
  --gris-suave: #898f93;       /* logos de clientes, texto secundario */
  --gris-linea: #e6e6e6;
  --gris-borde: #999999;
  --fondo: #f2f2f2;
  --blanco: #ffffff;

  /* Velos sobre fotografía. En el diseño varían entre el 24 % y el 72 %
     sin criterio aparente; aquí se reducen a tres niveles. */
  --velo-suave: rgb(0 0 0 / 0.24);
  --velo-medio: rgb(0 0 0 / 0.45);
  --velo-fuerte: rgb(0 0 0 / 0.72);

  --oliva-tenue: rgb(136 148 8 / 0.23);   /* fondo de Empaques Flexibles */
  --lima-tenue: rgb(219 225 73 / 0.14);   /* relleno del botón fantasma */

  /* --- Tipografía ------------------------------------------------------ */

  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida. El valor máximo de cada clamp es el tamaño exacto del
     diseño a 1920; por debajo escala con el viewport hasta un mínimo
     legible en móvil. */
  --t-hero: clamp(1.75rem, 2.5vw, 3rem);         /* 28 → 48 */
  --t-h2: clamp(1.625rem, 1.875vw, 2.25rem);     /* 26 → 36 */
  --t-h3: clamp(1.375rem, 1.458vw, 1.75rem);     /* 22 → 28 */
  --t-h4: clamp(1.25rem, 1.25vw, 1.5rem);        /* 20 → 24 */
  --t-tarjeta: clamp(1.125rem, 1.146vw, 1.375rem); /* 18 → 22 */
  --t-lg: 1.25rem;                                /* 20 */
  --t-cuerpo: clamp(1rem, 0.885vw, 1.0625rem);   /* 16 → 17 */
  --t-base: 1rem;                                 /* 16 */
  --t-sm: 0.875rem;                               /* 14 */
  --t-xs: 0.75rem;                                /* 12 */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;

  /* 1.21 es el interlineado automático de Inter, que es lo que usa todo el
     archivo de Figma: ninguno está definido a mano. Se reproduce tal cual
     para que la maqueta cuadre con el diseño.
     Si algún día se prioriza legibilidad sobre fidelidad, subir --lh-texto
     a 1.5 es el único cambio necesario. */
  --lh-titulo: 1.21;
  --lh-texto: 1.21;

  /* --- Medidas --------------------------------------------------------- */

  /* En el diseño los márgenes izquierdos bailan entre 52 y 186 px según la
     sección. Se normalizan a dos niveles:

       · gutter de 60 px para las rejillas (en Figma, 52), que deja el ancho
         de contenido en 1800 y hace que las cuatro tarjetas midan
         exactamente los 426 px del original con huecos de 32;
       · un segundo nivel de 60 px más para cabecera y hero, que en Figma
         están metidos a 136 y 111 respectivamente.

     Es la única lectura que reproduce las dos sangrías del diseño sin
     heredar su descuadre. */
  --contenedor: 1920px;
  --margen: clamp(1.25rem, 3.125vw, 3.75rem);
  --margen-interior: clamp(0rem, 3.125vw, 3.75rem);

  --gap-rejilla: 2rem;         /* 32 px, el hueco entre tarjetas */
  --gap-seccion: clamp(3.5rem, 6vw, 6.5rem);
  --gap-titulo: clamp(2rem, 2.5vw, 3rem);

  --radio-tarjeta: 24px;
  --radio-boton: 30px;
  --radio-pildora: 51px;

  --alto-cabecera: 97px;

  --transicion: 180ms ease;
}