/* ==========================================================================
   CMPI · P6 «Mezcla» — portada fusionada
   Origen de cada sección:
   - Cabecera y pie ............ P5 Bento digital (cabecera clara fija, CTA rojo, pie navy)
   - Nuestro Método ............ P7 (línea de progreso que se llena) con bloques de borde duro de P3
   - Hero ...................... P4 Capítulos (luz azul sobre negro, capas, texto en contorno)
   - Para quién ................ P3 Rojo Impacto (bloques de borde duro y sombra plana)
                                 + visual sticky con capas de P4 (solo desde 900 px)
   - Servicios ................. P3 Rojo Impacto (bloques con iconos grandes, en sistema claro)
   - Casos con cifras .......... P5 Bento digital (tarjetas bento, barras y contadores)
   - Producción audiovisual .... P2 Campaña en cifras (bloque editorial navy + acento Fraunces)
   - Contacto .................. P5 Bento digital (bento con formulario y WhatsApp)
   Base global: color de P5, tipografía de P2 (Montserrat + Fraunces cursiva),
   fotos de P4 (duotono azul/negro con grano), movimiento de P4.
   ========================================================================== */

/* ---------- Tokens (un solo sistema) ---------- */
:root {
  /* Marca (manual de logotipo) */
  --navy: #002D62;
  --red: #E10600;
  --blue: #0077FF;
  --white: #FFFFFF;
  --black: #000000;

  /* Escena */
  --bg: #F7F8FB;                                                        /* base clara de toda la página */
  --night: #05070D;                                                     /* solo hero */
  --navy-deep: color-mix(in oklab, var(--navy) 78%, var(--black));      /* solo bloque de video y pie */
  --blue-ink: color-mix(in srgb, var(--blue) 80%, var(--navy));         /* superficies con texto blanco (AA) */
  --blue-text: color-mix(in srgb, var(--blue) 70%, var(--navy));        /* texto sobre claro (AA) */
  --blue-tint: color-mix(in srgb, var(--blue) 11%, var(--bg));
  --blue-soft: color-mix(in srgb, var(--blue) 55%, var(--white));
  --blue-glow: color-mix(in srgb, var(--blue) 55%, transparent);
  --red-press: color-mix(in srgb, var(--red) 86%, var(--black));
  --ink: var(--navy);
  --muted: color-mix(in srgb, var(--navy) 72%, var(--white));
  --line: color-mix(in srgb, var(--navy) 14%, transparent);
  --hair-dark: color-mix(in oklab, var(--white) 18%, transparent);
  --text-on-dark: color-mix(in oklab, var(--white) 86%, var(--navy));

  /* Tipografía: Montserrat + Fraunces cursiva solo como acento */
  --font-main: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Fraunces", Georgia, "Times New Roman", serif;
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-small: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9rem);
  --text-lede: clamp(1.05rem, 0.97rem + 0.45vw, 1.3rem);
  --text-h1: clamp(1.9rem, 10.4vw, 6.4rem);
  --text-h2: clamp(1.75rem, 1.1rem + 2.6vw, 3.1rem);
  --text-h3: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  --text-fig: clamp(2.4rem, 1.4rem + 4vw, 4.75rem);
  --stroke: clamp(1.2px, 0.2vw, 2.5px);

  /* Espaciado */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --gap: clamp(0.75rem, 0.5rem + 0.9vw, 1.25rem);
  --pad: clamp(1.15rem, 0.8rem + 1.4vw, 2rem);
  --section: clamp(3rem, 2rem + 4vw, 6.5rem);
  --space-gap: clamp(1.5rem, 4vw, 4rem);
  --cut: clamp(1.75rem, 5vw, 4.5rem);
  --max: 80rem;
  --header-h: 68px;

  /* Radios por rol */
  --r-panel: 2.25rem;   /* paneles grandes: hero, tarjeta héroe */
  --r-tile: 1.75rem;    /* tarjetas bento */
  --r-sm: 0.75rem;      /* campos y detalles */
  --r-block: 0.375rem;  /* bloques neo-brutalistas */
  --r-pill: 999px;      /* botones y etiquetas */

  /* Borde duro y sombras planas (bloques P3 en sistema claro) */
  --hard: 3px;
  --hard-lg: 4px;
  --flat-sm: 5px 5px 0;
  --flat-md: 8px 8px 0;
  --flat-lg: 12px 12px 0;

  /* Elevación suave (tarjetas bento claras) */
  --lift: 0 1px 0 color-mix(in srgb, var(--navy) 8%, transparent),
          0 18px 36px -22px color-mix(in srgb, var(--navy) 45%, transparent);

  /* Movimiento */
  --dur-fast: 150ms;
  --dur-normal: 300ms;
  --dur-slow: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Grano sutil (ruido SVG en línea) */
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .75 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 900px) { :root { --header-h: 76px; } }