/* COPIA GENERADA — la fuente de verdad es marketing/design-system/tokens.css
   No editar aqui. Se copia con:  cp marketing/design-system/tokens.css landing/css/tokens.css  */

/* ==========================================================================
   Zumer — Tokens de diseño
   Traducción literal de `marketing/sistema_diseno_web.md` a CSS.
   Regla: los componentes usan SOLO la capa semántica (§1.3). Nunca un valor crudo.
   ========================================================================== */

:root {
  /* --- Capa 1 — primitivas (los 8 del manual de marca, intocables) §1.1 --- */
  --z-papel: #F6F6F6;
  --z-superficie: #FBFBFA;
  --z-rojo: #F24720;
  --z-gris-oscuro: #423F3C;
  --z-blanco: #FFFFFF;
  --z-tinta: #1B1917;
  --z-gris-medio: #6E6963;
  --z-linea: #E3E1DE;

  /* --- Capa 1b — derivados de pantalla (calculados, no elegidos a ojo) §1.2 --- */
  --z-rojo-oscuro: #D4320C;        /* el rojo de marca da 3,41:1 sobre papel: no vale para texto pequeño */
  --z-rojo-claro: #F56C4D;         /* el rojo de marca sobre panel oscuro da 2,84:1 */
  --z-texto-suave-oscuro: #AEAAA5; /* el gris medio sobre panel oscuro da 1,92:1 */
  --z-borde-control: #958D82;      /* WCAG 1.4.11 exige 3:1 en bordes de campo */
  --z-desactivado: #746F69;        /* estado disabled sólido. NUNCA opacity: 0.5 */

  /* --- Capa 1c — fondos que de verdad separan (añadido 09/09/2026) ---
     Diagnóstico de omc.com: su tarjeta es BLANCO PURO sobre un gris de
     sección, y eso da 1,497:1. La nuestra era superficie sobre papel:
     1,044:1 medido, invisible. Se había copiado la regla "separar por fondo"
     sin tener los colores que la sostienen.
     El gris está calculado, no elegido a ojo: mismo contraste que el suyo
     (1,505:1 sobre blanco) pero cálido, como el resto de la paleta (§7 regla 2).
     El tinte sustituye al azul claro de Omnicom, que es SU color secundario de
     marca y Zumer no tiene azul: es el rojo de marca al 12% sobre blanco. */
  --z-gris-seccion: #D5D2CF;   /* 1,505:1 sobre blanco · texto tinta encima 11,64:1 */
  --z-tinte-acento: #FDE9E4;   /* 1,170:1 sobre blanco · texto tinta encima 14,98:1 */

  /* --- Capa 2 — semánticos (lo que se usa al maquetar) §1.3 --- */
  --z-fondo: var(--z-papel);
  --z-fondo-elevado: var(--z-superficie);
  --z-fondo-tarjeta: var(--z-blanco);      /* blanco puro: la tarjeta es el objeto más claro de la página */
  --z-fondo-seccion: var(--z-gris-seccion);
  --z-fondo-acento-suave: var(--z-tinte-acento);
  --z-fondo-inverso: var(--z-gris-oscuro);
  --z-texto: var(--z-tinta);
  --z-texto-suave: var(--z-gris-medio);
  --z-texto-inverso: var(--z-blanco);
  --z-texto-suave-inverso: var(--z-texto-suave-oscuro);
  --z-acento: var(--z-rojo);
  --z-acento-texto: var(--z-rojo-oscuro);
  --z-accion-fondo: var(--z-rojo);
  --z-accion-texto: var(--z-blanco);
  --z-accion-fondo-hover: #E4350D;
  --z-accion-fondo-activo: #CF300C;
  --z-acento-inverso: var(--z-rojo-claro);
  /* Rojo de marca a texto muy pequeño (antetítulo, --z-texto-pie): ni
     --z-acento-texto (3,27:1 sobre gris) ni --z-acento-inverso (3,55:1
     sobre oscuro) llegan a 4,5:1 a ese tamaño — verificado y corregido
     tras /impeccable audit 15/09/2026. Mismo tono de marca, más oscuro/
     claro hasta que pasa AA; no se usan fuera de esta etiqueta. */
  --z-acento-texto-pie: #9A2409;      /* 5,30:1 sobre gris, 7,98:1 sobre blanco */
  --z-acento-inverso-pie: #F79078;    /* 4,59:1 sobre el gris oscuro de seccion--inversa */
  --z-separador: var(--z-linea);
  --z-borde: var(--z-borde-control);
  --z-foco: var(--z-rojo-oscuro);
  --z-foco-inverso: var(--z-blanco);

  /* --- Tipografía §2 — escala base 16px, ratio 1.25 --- */
  --z-fuente-titular: 'Switzer', system-ui, -apple-system, sans-serif;
  --z-fuente-texto: 'Chivo', system-ui, -apple-system, sans-serif;
  /* Tercera familia, añadida 09/09/2026. Switzer y Chivo son dos sans
     geométricas: juntas no crean tensión, y ese contraste de estilo es el
     gesto que da carácter a omc.com (sans + cursiva serif, repetido en toda
     su página). Cormorant Garamond, de Christian Thalmann, licencia SIL OFL
     y cursiva verdadera de tradición renacentista, no una inclinación
     mecánica. Se usa SOLO en los párrafos de apoyo y en las etiquetas de
     cifra: si aparece en más sitios, deja de ser un acento. */
  --z-fuente-cursiva: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* 72px, calcado del titular de omc.com (medido). El peso baja de 800 a 700:
     el tamaño ya jerarquiza, y a 800 el titular grita. 400 —lo que usan
     ellos— habría contradicho el manual de marca, que fija 700/800. */
  --z-texto-display: 72px;  /* Switzer 700 — titular del hero */
  --z-texto-h1: 49px;       /* Switzer 800 */
  --z-texto-h2: 39px;       /* Switzer 800 — titular de sección */
  --z-texto-h3: 31px;       /* Switzer 700 — subsección */
  --z-texto-h4: 25px;       /* Switzer 700 — destacados */
  --z-texto-grande: 20px;   /* Chivo 400 — entradilla */
  --z-texto-cuerpo: 16px;   /* Chivo 400 — texto normal */
  --z-texto-pie: 13px;      /* Chivo 400 — notas, fuentes */

  --z-medida-linea: 65ch;   /* máximo 65-70 caracteres */

  /* Tracking negativo en titulares grandes: omc.com usa -1,32px a 72px, que
     son -0,018em. A tamaño display las letras necesitan apretarse; a tamaño
     de cuerpo, nunca. */
  --z-tracking-titular: -0.018em;

  /* --- Espaciado §3 — múltiplos de 4 --- */
  --z-esp-1: 4px;
  --z-esp-2: 8px;
  --z-esp-3: 12px;
  --z-esp-4: 16px;
  --z-esp-6: 24px;
  --z-esp-8: 32px;
  --z-esp-12: 48px;   /* de aquí en adelante: entre secciones */
  --z-esp-16: 64px;
  --z-esp-24: 96px;
  --z-esp-32: 128px;

  /* --- Radios §4 --- */
  --z-radio: 12px;         /* cajas */
  --z-radio-tarjeta: 24px; /* corregido 08/09/2026 (era 20px): curvado algo más marcado, a petición directa */
  --z-radio-boton: 999px;  /* píldora completa, cualquier alto — botones, chips y ahora también campos */
  /* La excepción documentada de §4, que estaba en el documento pero no en el
     código porque nunca se había construido el mockup: imita la burbuja real
     de WhatsApp (esquina inferior del lado del emisor casi recta). */
  --z-radio-chat: 20px 20px 4px;

  /* --- Sombras §1.5 (añadido 08/09/2026, revisado el mismo día) ---
     Las tarjetas NO llevan sombra — se distinguen por fondo, no por
     profundidad (§7 regla 5, y así es la referencia de Omnicom). La sombra
     solo sobrevive donde de verdad hace falta separar del fondo: el chip. */
  --z-sombra-chip: 0 2px 6px rgba(66, 63, 60, 0.05), 0 16px 32px rgba(66, 63, 60, 0.08), 0 32px 64px rgba(0, 0, 0, 0.10);

  /* --- Textura de grafito (corregida 08/09/2026, tercera vez) — un
     radial-gradient es matemáticamente liso, nunca puede parecer un pase de
     pincel. La textura real viene de un filtro SVG (feTurbulence: ruido
     fractal de verdad, no color suavizado) codificado como imagen — grano
     genuino, no una mancha de color con los bordes difuminados. Colores fijos
     en hexadecimal porque un data-URI no puede leer variables CSS; están
     calcados a mano de --z-gris-oscuro / --z-gris-medio. */
  --z-chip-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='4' seed='11' stitchTiles='stitch' result='r'/%3E%3CfeColorMatrix in='r' type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.40  0 0 0 0 0.38  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Cuarta vuelta (08/09/2026): reabre a propósito el gradiente direccional
     que se había revertido — esta vez calcado con los valores EXACTOS leídos
     del panel de Figma (efecto "Vidrio" + relleno lineal), no aproximados a
     ojo como el "transparent 60%" anterior. Los tres stops y el 40% de
     opacidad son los que Figma reporta tal cual.
     El grano sigue siendo el mismo --z-chip-textura (feTurbulence real):
     Figma generó el suyo con su efecto nativo "Textura" (tamaño 0.4, radio
     30), pero esos parámetros no tienen conversión exacta a SVG, así que se
     mantiene el ruido ya afinado en vez de inventar una traducción falsa.
     El fondo sólido (gris-oscuro / rojo-oscuro) se mantiene DEBAJO del
     gradiente vía background-blend-mode: overlay — igual que antes — para
     que el texto blanco del chip nunca pierda contraste, ni siquiera en el
     extremo derecho donde el gradiente casi llega a blanco. Ir 100% vidrio
     translúcido (sin base sólida) rompería la legibilidad del texto ahí. */
  --z-chip-vidrio:
    linear-gradient(90deg, rgba(62, 62, 62, 0.4) 0%, rgba(182, 181, 181, 0.4) 43%, rgba(245, 245, 245, 0.4) 100%),
    var(--z-chip-textura);
  --z-chip-vidrio-acento:
    linear-gradient(90deg, rgba(212, 50, 12, 0.4) 0%, rgba(182, 181, 181, 0.4) 43%, rgba(245, 245, 245, 0.4) 100%),
    var(--z-chip-textura);

  /* Aproximación del efecto "Vidrio" de Figma (luz a -53°, brillo 80%,
     escarcha 4). Refracción/dispersión (dobla lo que hay detrás) no tiene
     equivalente en CSS plano — se aproxima con un desenfoque de fondo suave
     + un resplandor interior de luz, sin pretender ser una réplica exacta. */
  --z-chip-vidrio-filtro: blur(4px) saturate(135%);
  --z-chip-resplandor-vidrio:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);

  /* --- Foco de campos de formulario (corregido 08/09/2026, tercera vez):
     el token tenía "0 0 0 1px" DUPLICADO con el border real del campo — los
     dos anillos oscuros se sumaban visualmente y se veía más grueso de lo
     que el CSS decía, y en pantallas estrechas el resplandor de 64px llegaba
     a "tocar" el campo de al lado, pareciendo que se solapaban. Quitado el
     anillo duplicado (el borde real ya lo hace) y reducido el alcance
     máximo — sigue siendo blur puro, sin escalones, pero ya no invade al
     vecino. */
  --z-resplandor-foco:
    0 0 12px 1px rgba(242, 71, 32, 0.20),
    0 0 28px 6px rgba(242, 71, 32, 0.13),
    0 0 44px 10px rgba(242, 71, 32, 0.07);

  /* --- Borde del botón secundario (corregido 08/09/2026, tercera vez):
     ya no es un resplandor de luz roja — Mario lo pidió más como el grafito
     del chip, "que parezca una sombra pero no lo sea". Mismos dos lados
     (inset + hacia fuera) pero en tonos grafito, no rojos, y algo más
     opacos que el resplandor rojo que sustituye. */
  --z-resplandor-boton-secundario:
    inset 0 0 0 1px rgba(66, 63, 60, 0.18),
    inset 0 0 14px 2px rgba(66, 63, 60, 0.16),
    0 0 14px 3px rgba(66, 63, 60, 0.22),
    0 0 28px 7px rgba(66, 63, 60, 0.14);
  --z-resplandor-boton-secundario-hover:
    inset 0 0 0 1px rgba(66, 63, 60, 0.26),
    inset 0 0 18px 3px rgba(66, 63, 60, 0.22),
    0 0 18px 4px rgba(66, 63, 60, 0.30),
    0 0 36px 10px rgba(66, 63, 60, 0.18);

  /* --- Movimiento §5 — Material Design, mitad de duración que en móvil --- */
  --z-dur-rapida: 150ms;
  --z-dur-media: 200ms;
  --z-ease-entra: cubic-bezier(0, 0, 0.2, 1);
  --z-ease-sale: cubic-bezier(0.4, 0, 1, 1);
  --z-ease-mueve: cubic-bezier(0.4, 0, 0.2, 1);
}

/* En móvil la escala baja un paso (§2). Escalones discretos, no clamp() inventado. */
@media (max-width: 640px) {
  :root {
    --z-texto-display: 44px;
    --z-texto-h1: 31px;
    --z-texto-h2: 31px;
    --z-texto-h3: 25px;
    --z-texto-h4: 20px;
  }
}