/* ==========================================================================
   Zumer — Landing zumer.es
   Solo la maquetación de esta página. Los componentes y los valores vienen de
   `tokens.css` y `components.css` (copias de marketing/design-system/).
   Reglas heredadas del sistema que este archivo respeta:
   - Ningún valor crudo: todo sale de la capa semántica de tokens.
   - Espaciado en múltiplos de 4; entre secciones, de 48 a 128 (§3).
   - Solo se anima transform y opacity (§5).
   - El rojo de marca solo en formas grandes, nunca en texto suelto.
   - Sin modo oscuro (§8): el panel oscuro es una sección, no un tema.

   Cada sección tiene un formato visual DISTINTO, que es el hallazgo principal
   del diagnóstico de omc.com: su esqueleto de contenido se repite, pero el
   formato no se repite ni una vez. Aquí: mockup / tarjetas / índice / cifras /
   cierre centrado.
   ========================================================================== */

/* --- Scroll suave hacia el CTA final (#contacto) ------------------------- */
html {
  scroll-behavior: smooth;
}

/* --- Tipografías autoalojadas -------------------------------------------- */
/* Chivo (SIL OFL) convertida de .ttf a .woff2: 81KB -> 28KB por peso.
   Solo los 3 pesos que usa el sistema (§2: nunca cargar pesos de más). */
@font-face {
  font-family: 'Chivo';
  src: url('../fonts/chivo-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Chivo';
  src: url('../fonts/chivo-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Chivo';
  src: url('../fonts/chivo-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
/* Cormorant Garamond (SIL OFL, Christian Thalmann). Solo la cursiva: es un
   acento, no una tipografía de texto. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

/* --- Base ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--z-fondo);
  color: var(--z-texto);
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-cuerpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* --- Contenedor y secciones ---------------------------------------------- */
/* Márgenes laterales generosos, como omc.com: su contenido mide 1074px en una
   ventana de 1425px, o sea un 12% de aire a cada lado. */
.contenedor {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--z-esp-6);
  position: relative;
  z-index: 1;
}

.seccion {
  padding: var(--z-esp-24) 0;
  position: relative;
  overflow: hidden; /* recorta las formas de marca que sangran */
}

/* Corregido 09/09/2026: todas las secciones llevaban el mismo padding de 96px,
   así que el ritmo seguía siendo monótono aunque el formato de cada una
   cambiara. Ahora el aire acompaña al peso de cada sección: respiran más las
   dos que abren y cierran la página, y menos las de contenido denso. */
.seccion--gris { padding: var(--z-esp-24) 0; }
.seccion--inversa { padding: var(--z-esp-32) 0; }
#datos { padding: var(--z-esp-24) 0; }
.cierre { padding: var(--z-esp-32) 0; }

/* Cinco fondos distintos, como los cinco de omc.com, pero en la temperatura
   cálida de la paleta de Zumer (§7 regla 2). */
.seccion--superficie { background: var(--z-fondo-elevado); }
.seccion--gris { background: var(--z-fondo-seccion); }
.seccion--tinte { background: var(--z-fondo-acento-suave); }
.seccion--blanca { background: var(--z-fondo-tarjeta); }
.seccion--inversa {
  background: var(--z-fondo-inverso);
  color: var(--z-texto-inverso);
}

/* Sobre el panel oscuro hay que reasignar los colores del sistema: el titular
   y el antetítulo están definidos para fondo claro (§1.4 prohíbe el rojo de
   marca y el gris medio sobre grafito). */
.seccion--inversa .z-seccion-titulo__titular { color: var(--z-texto-inverso); }
.seccion--inversa .z-seccion-titulo__antetitulo { color: var(--z-acento-inverso-pie); } /* --z-acento-inverso daba 3,55:1 a este tamaño, fallo AA (/impeccable audit 15/09/2026) */
.seccion--inversa a:focus-visible {
  outline: 3px solid var(--z-foco-inverso);
  outline-offset: 3px;
}

/* --- Formas de marca ------------------------------------------------------ */
/* El recurso que llena la página en omc.com: arcos enormes del color de marca
   que sangran fuera del viewport y cosen unas secciones con otras. Aquí es
   además la única forma en la que aparece el rojo, aparte del botón. */
.forma {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Corregido 09/09/2026: había DOS anillos (hero y cierre) y los dos entraban
   cortados por el borde de mala manera — se leían como recortes accidentales,
   no como un gesto de marca. Se queda uno solo, el del hero, más grande y con
   el trazo más fino: así lo que entra en pantalla es un arco amplio y suave de
   fondo, no una mancha protagonista. El del cierre se elimina; esa sección
   gana peso con color de fondo, que es más sólido que una curva más. */
/* Corregido 11/09/2026: Mario señaló que el anillo se leía como calcado del
   arco de omc.com — no por la idea (curva grande de marca sangrando fuera del
   viewport, documentada desde el principio), sino por la ejecución: un trazo
   nítido de borde duro es precisamente lo que el suyo NO es — el de omc.com
   es una forma blanda, sin borde definido. Añadido `filter: blur()`: sigue
   siendo un anillo rojo grande, pero ya no un trazo calcado, sino un
   resplandor difuso — ejecución distinta para la misma idea de marca. */
.forma--hero {
  width: 1040px;
  height: 1040px;
  top: -560px;
  right: -520px;
  filter: blur(36px);
}

/* --- 1 · Hero ------------------------------------------------------------- */
/* Antes había una <header> propia con su fondo — Mario la vio como una barra
   de menú separada del hero, aunque el color coincidiera exactamente con el
   del hero (no era un problema de color, era la propia franja). Quitada del
   todo: el logo es ahora el primer elemento del hero, sin fondo propio. */
.hero__marca {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--z-esp-16);
}

.hero__marca img { height: 32px; width: auto; }

.hero__marca:focus-visible {
  outline: 3px solid var(--z-foco);
  outline-offset: 3px;
}


/* Corregido 11/09/2026, dos intentos. El primero puso un padding-top fijo
   (96px) calculado a mano para igualar el aire medido en omc.com (189px
   cabecera→titular) — parcheaba el síntoma sin copiar la causa. Inspeccionado
   su código de verdad (`.hero-text-container`): NO usa padding-top. Es una
   sección de altura completa (`height` igual a `window.innerHeight`, o sea
   100vh) con su contenido centrado por flexbox (`display:flex;
   align-items:center; justify-content:center`) — el "aire de arriba" que se
   medía no es un padding fijo, es la mitad del espacio sobrante entre el
   contenido y el borde de una sección de pantalla completa. Se adapta la
   misma técnica: `.contenedor` es el único hijo en flujo de `.hero` (la forma
   de marca es `position:absolute`, no cuenta), así que centrarlo por
   flexbox centra exactamente el bloque titular+rejilla, igual que ellos
   centran su titular+párrafo. */
.hero {
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: center;
}

/* El titular ocupa el ancho completo y debajo van las dos columnas, como en
   omc.com. Metido en una columna estrecha se rompía en cinco líneas. */
/* Corregido 11/09/2026: a 72px (el token --z-texto-display, pensado para un
   titular corto de 8 palabras como el de omc.com) el nuestro, de 12 palabras,
   rompía en TRES líneas — medido: 226px de bloque, "extremadamente demasiado"
   según Mario. Baja a 64px: mismo peso 700 que exige el manual de marca (no
   se copia el 400 de omc.com, que es su propio sistema tipográfico, no el
   nuestro), pero ya envuelve en dos líneas — comprobado en navegador probando
   72/64/60/56/52/49px, 64 es el primer valor que ya no rompe en tres. No se
   toca el token --z-texto-display compartido (lo usan las cifras grandes de
   la sección 4, que con solo "21×" no tienen este problema): el ajuste es
   solo de esta regla. */
.hero__titulo {
  font-family: var(--z-fuente-titular);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: var(--z-tracking-titular);
  text-wrap: balance;
  margin: 0 0 var(--z-esp-8);
}

.hero__texto {
  display: flex;
  flex-direction: column;
  gap: var(--z-esp-8);
}

/* Entradilla partida: etiqueta corta con filete + párrafo, calcado del
   sub-hero de omc.com. */
/* Corregido 11/09/2026: tenía `margin-bottom` propio Y el padre `.hero__texto`
   ya le da `gap: 32px` a sus hijos — los dos se sumaban a 64px, el doble del
   hueco titular→entradilla (32px). Ritmo vertical inconsistente sin ningún
   motivo, detectado al medir por qué el botón quedaba "mal colocado". Quitado
   el margin-bottom: el gap del padre ya hace el trabajo. */
/* Proporción ajustada 0.8/1.2 → 0.75/1.25 (12/09/2026): a 0.8/1.2 el párrafo
   derecho caía en 3 líneas con "vez." sola en la última — de 0.6/1.4 en
   adelante ya cabía en 2, pero entonces era la etiqueta de la izquierda la
   que pasaba a 3. 0.75/1.25 es el punto donde ambas columnas quedan en 2
   líneas a la vez, a 1440px. */
.entradilla {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--z-esp-8);
  /* Corregido 11/09/2026: con align-items:start (heredado) las dos columnas
     compartían el top de su CAJA, pero no la misma línea óptica de texto —
     16px/1.35 y 20px/1.45 llevan distinto "half-leading", así que la letra de
     una empezaba ~5px más arriba que la otra aunque las cajas coincidieran.
     Medido en navegador probando baseline: alinea por la línea de base real
     del texto, no por el borde de la caja — es la corrección correcta para
     dos tamaños de letra distintos en la misma fila. */
  align-items: baseline;
}

/* align-self: baseline (antes: start). "start" evitaba que la etiqueta se
   estirase a la altura del párrafo vecino (el filete flotaba lejos del
   texto) — baseline consigue lo mismo (tampoco estira) y además alinea la
   línea de base con la columna vecina. */
.entradilla__etiqueta {
  align-self: baseline;
  font-size: var(--z-texto-cuerpo);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  padding-bottom: var(--z-esp-4);
  border-bottom: 1px solid var(--z-texto);
}

.entradilla__texto {
  font-size: var(--z-texto-grande);
  line-height: 1.45;
  margin: 0;
  /* Evita que la última palabra ("vez.") quede sola en una tercera línea —
     el navegador reparte el texto para que ninguna línea se quede huérfana,
     sin tener que forzar un ancho fijo que se rompería en otro tamaño. */
  text-wrap: pretty;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-esp-4);
}

/* --- 2 · Qué hace el sistema ----------------------------------------------- */
/* Sin breakpoint inventado: la rejilla se reordena sola cuando la tarjeta ya
   no cabe en su ancho mínimo (§0: los breakpoints se miden en el contenido). */
.rejilla-tres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--z-esp-4);
  margin-top: var(--z-esp-12);
}

.z-tarjeta .z-icono { margin-bottom: var(--z-esp-6); }

/* CTA de refuerzo a mitad de página, variante oscura del botón secundario
   (esquina cortada) — reservada solo para esta sección, ver components.css. */
.diferencia__accion {
  display: inline-flex;
  margin-top: var(--z-esp-8);
}

/* --- 3 · Índice de argumentos (panel oscuro) ------------------------------ */
.indice {
  margin: var(--z-esp-12) 0 0;
  padding: 0;
  list-style: none;
}

.indice__fila {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--z-esp-8);
  padding: var(--z-esp-8) 0;
  border-top: 1px solid var(--z-texto-suave-inverso);
}

.indice__fila:last-child { border-bottom: 1px solid var(--z-texto-suave-inverso); }

/* Icono + número apilados en la misma columna de 88px. Añadido 11/09/2026:
   era la única sección de la página sin un solo elemento visual — 542 iconos
   descargados en marketing/iconos-animateicons/ y ninguno usado fuera de la
   sección 2. Va PEQUEÑO (28px, no los 44px de las tarjetas): aquí acompaña al
   número, no compite con él — el número sigue siendo el ancla visual de la
   fila, tal como se decidió al cerrar esta sección. */
.indice__marca {
  display: flex;
  flex-direction: column;
  gap: var(--z-esp-2);
}

.indice__icono {
  width: 28px;
  height: 28px;
}

/* El número en cursiva serif: el mismo gesto sans/serif de omc.com, aquí
   puesto donde no compite con ningún texto que haya que leer. */
.indice__numero {
  font-family: var(--z-fuente-cursiva);
  font-style: italic;
  font-size: var(--z-texto-h1);
  line-height: 1;
  color: var(--z-acento-inverso);
}

.indice__titulo {
  font-family: var(--z-fuente-titular);
  font-weight: 700;
  font-size: var(--z-texto-h4);
  color: var(--z-texto-inverso);
  margin: 0 0 var(--z-esp-3);
}

.indice__texto {
  color: var(--z-texto-suave-inverso); /* 4,53:1 sobre panel oscuro */
  max-width: var(--z-medida-linea);
  margin: 0;
}

/* --- 4 · Cifras ----------------------------------------------------------- */
/* Corregido 09/09/2026: incluso limitadas a 760px, las dos cifras dejaban
   media sección vacía a la derecha y se leían como dos datos sueltos. Ahora
   van en dos columnas iguales que ocupan el ancho del contenedor, separadas
   por un filete: se leen como una unidad —las dos caras del mismo coste— y no
   queda hueco muerto. */
.rejilla-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--z-esp-16);
  margin-top: var(--z-esp-16);
}

.rejilla-cifras .z-cifra + .z-cifra {
  padding-left: var(--z-esp-16);
  border-left: 1px solid var(--z-separador);
}

@media (max-width: 720px) {
  .rejilla-cifras .z-cifra + .z-cifra {
    padding-left: 0;
    border-left: none;
    padding-top: var(--z-esp-8);
    border-top: 1px solid var(--z-separador);
  }
}

/* La cifra sube a tamaño display: es el único dato duro de la página y tiene
   que pesar más que un titular de sección. */
.cifra-grande .z-cifra__numero {
  font-size: var(--z-texto-display);
  letter-spacing: var(--z-tracking-titular);
}

.cifra-grande .z-cifra__fuente { margin-top: var(--z-esp-2); }

/* --- 5 · Cierre ----------------------------------------------------------- */
.cierre__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cierre__titulo {
  font-family: var(--z-fuente-titular);
  font-weight: 700;
  font-size: var(--z-texto-h1);
  line-height: 1.1;
  letter-spacing: var(--z-tracking-titular);
  text-wrap: balance;
  margin: 0 0 var(--z-esp-8);
}

.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--z-esp-4);
}

.cierre__confianza {
  max-width: 46ch;
  margin: var(--z-esp-6) 0 0;
}

/* --- 6 · Pie -------------------------------------------------------------- */
.pie {
  background: var(--z-fondo-inverso);
  color: var(--z-texto-inverso);
  padding: var(--z-esp-16) 0;
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-esp-6);
}

.pie__marca { height: 24px; width: auto; }

.pie__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-esp-6);
}

/* Blanco subrayado, no el rojo de marca: sobre grafito el rojo da 2,84:1 y
   está prohibido (§1.4). */
.pie__enlace {
  color: var(--z-texto-inverso);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--z-dur-rapida) var(--z-ease-mueve);
}

/* :hover → .z-hover-activo (17/09/2026), controlada por js/interacciones.js
   — ver la nota larga en marketing/design-system/components.css sobre por
   qué :hover puro corta la animación en seco al salir a medias. */
.pie__enlace.z-hover-activo { text-decoration-thickness: 2px; }

.pie__enlace:focus-visible {
  outline: 3px solid var(--z-foco-inverso);
  outline-offset: 3px;
}

.pie__legal {
  color: var(--z-texto-suave-inverso);
  font-size: var(--z-texto-pie);
  margin: 0;
}

/* --- 7 · Formulario de diagnóstico (modal) --------------------------------- */
/* Añadido 11/09/2026: el CTA dejó de apuntar a un mailto y abre este
   <dialog> nativo — foco atrapado y cierre con Esc gratis, sin JS de más.
   Reutiliza .z-campo/.z-campo__control tal cual (mismo componente de
   formulario del sistema, no uno nuevo) y .z-boton para enviar. */
.z-dialogo {
  border: none;
  border-radius: var(--z-radio-tarjeta);
  padding: var(--z-esp-8);
  background: var(--z-fondo-tarjeta);
  width: calc(100% - var(--z-esp-8));
  max-width: 440px;
  /* Única sombra "flotante" del sistema: un modal está literalmente elevado
     sobre la página, a diferencia de la tarjeta plana en flujo (§7 regla 5,
     que habla de una tarjeta EN la página, no de esto). */
  box-shadow: 0 8px 24px rgba(27, 25, 23, 0.16), 0 24px 64px rgba(27, 25, 23, 0.24);
}

.z-dialogo::backdrop {
  background: rgba(27, 25, 23, 0.55);
}

.z-dialogo__formulario,
.z-dialogo__gracias {
  display: flex;
  flex-direction: column;
  gap: var(--z-esp-4);
  position: relative;
}

/* [hidden] tiene la MISMA especificidad que la clase de arriba (0,1,0 cada
   uno) y, en el mismo archivo, gana el que va después — el display:flex se
   comía el display:none del navegador y "Solicitud enviada" se veía a la
   vez que el formulario. Selector combinado (clase+atributo, 0,2,0): gana
   siempre, sin necesidad de !important. */
.z-dialogo__formulario[hidden],
.z-dialogo__gracias[hidden],
.z-dialogo__error[hidden] {
  display: none;
}

/* Honeypot anti-spam: invisible para personas, pero presente en el DOM para
   que un bot de envío automático lo rellene igual — ver index.html. */
.z-campo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.z-dialogo__cerrar {
  position: absolute;
  /* Separado de la esquina real del modal (antes quedaban 4px, pegado a la
     X) por al menos el mismo aire que el resto del sistema usa entre un
     icono y su borde. */
  top: calc(var(--z-esp-4) * -1);
  right: calc(var(--z-esp-4) * -1);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--z-texto-suave);
  cursor: pointer;
  transition: background var(--z-dur-rapida) var(--z-ease-mueve), color var(--z-dur-rapida) var(--z-ease-mueve);
}

/* :hover → .z-hover-activo (17/09/2026), mismo motivo. */
.z-dialogo__cerrar.z-hover-activo {
  background: var(--z-fondo-seccion);
  color: var(--z-texto);
}

.z-dialogo__cerrar:focus-visible {
  outline: 3px solid var(--z-foco);
  outline-offset: 3px;
}

.z-dialogo__titulo {
  font-family: var(--z-fuente-titular);
  font-weight: 700;
  font-size: var(--z-texto-h3);
  color: var(--z-texto);
  margin: 0;
  padding-right: var(--z-esp-8);
}

.z-dialogo__texto {
  color: var(--z-texto-suave);
  font-size: var(--z-texto-cuerpo);
  margin: 0;
}

.z-dialogo__enviar {
  align-self: flex-start;
  margin-top: var(--z-esp-2);
}

/* Rojo válido para texto pequeño (--z-acento-texto, 4,56:1 — §1.4), no el
   rojo de marca intacto: es texto funcional de estado, no una forma grande. */
.z-dialogo__error {
  margin: 0;
  font-size: var(--z-texto-pie);
  color: var(--z-acento-texto);
}

.z-dialogo__gracias .z-boton-secundario {
  align-self: flex-start;
}

/* --- Tableta -------------------------------------------------------------- */
/* Punto medido, no heredado de ningún framework: por debajo de 960px el
   mockup del chat y el titular de 72px no caben uno al lado del otro. */
@media (max-width: 960px) {
  /* El centrado por flexbox de .hero (100vh) solo funciona con contenido más
     bajo que la pantalla. En una sola columna, titular + entradilla + botón +
     mockup apilados superan de sobra un viewport móvil, y `.seccion` recorta
     lo que sobra (`overflow: hidden`, para las formas de marca) — sin este
     override el principio del titular quedaría cortado. Vuelve al flujo
     normal con aire fijo, como antes de adoptar la técnica de omc.com. */
  .hero {
    min-height: 0;
    display: block;
    padding: var(--z-esp-16) 0;
  }
  .forma--hero { right: -280px; opacity: 0.5; }
}

/* --- Móvil ---------------------------------------------------------------- */
/* 640px es el mismo punto donde tokens.css baja la escala tipográfica: se
   reutiliza en vez de introducir un segundo breakpoint distinto. */
@media (max-width: 640px) {
  .seccion { padding: var(--z-esp-16) 0; }
  /* El titular del hero quedó con un tamaño fijo (64px, ver más arriba) en vez
     del token --z-texto-display, que sí baja solo en móvil (tokens.css). Sin
     este override se quedaría a 64px en una pantalla de 390px — demasiado
     grande. Mismo criterio que el resto del sistema: un escalón por debajo. */
  .hero__titulo { font-size: 44px; }
  .entradilla { grid-template-columns: minmax(0, 1fr); gap: var(--z-esp-6); }
  .indice__fila { grid-template-columns: minmax(0, 1fr); gap: var(--z-esp-3); }
  .pie__fila { justify-content: flex-start; }
  .forma--hero { width: 420px; height: 420px; top: -140px; right: -180px; }
  /* Retirada en móvil, comprobado geométricamente (no a ojo): el contenido del
     cierre está centrado y ocupa todo el ancho, así que el trazo del anillo
     cruzaba el rectángulo de la línea de garantía y la dejaba en gris sobre
     rojo — ilegible, y prohibido por §1.4. No queda banda libre suficiente
     para recolocarla: el gesto de marca ya lo da la curva del hero. */
  .forma--cierre { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pie__enlace { transition: none; }
}