/* ==========================================================================
   Zumer — Componentes base
   Dependen de `tokens.css`. Ningún valor crudo: todo sale de la capa semántica.
   Reglas que gobiernan este archivo (`sistema_diseno_web.md`):
   - Foco: anillo de 3px, outline-offset 3px. NO NEGOCIABLE (§6).
   - Nunca opacity para atenuar. Se usa --z-desactivado sólido (§1.2).
   - Solo se anima transform y opacity. Nunca transition: all (§5).
   - Zona de clic mínima: 24px escritorio, 44px móvil (§6).
   ========================================================================== */

/* --- Foco compartido por todo lo interactivo -------------------------------- */
.z-boton:focus-visible,
.z-boton-secundario:focus-visible,
.z-enlace:focus-visible {
  outline: 3px solid var(--z-foco);
  outline-offset: 3px;
}
/* El campo de formulario tiene su propio tratamiento de foco — ver nota
   junto a .z-campo__control:focus-visible más abajo. Sigue siendo un
   indicador de foco claramente visible (borde de contraste alto), solo que
   el mecanismo no es el anillo rojo compartido. */

/* ==========================================================================
   1. Botón principal
   Corregido 08/09/2026: UNA sola forma continua (antes eran dos píldoras
   separadas por un hueco — no es lo que hace Omnicom). El círculo del icono
   vive DENTRO de la misma píldora, como una insignia incrustada cerca del
   borde derecho, nunca como una segunda forma pegada a la primera.
   El texto va en Chivo 700 a 19px — la ÚNICA negrita permitida en un botón de
   todo el sistema, forzada por el contraste (blanco sobre el rojo de marca da
   3,69:1, que solo cumple como "texto grande": ≥18,7px en negrita). Si algún
   día baja de 19px o pierde la negrita, hay que revisar el color (§1.4).
   ========================================================================== */
.z-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--z-esp-3);
  background: var(--z-accion-fondo);
  color: var(--z-accion-texto);
  border: none;
  border-radius: var(--z-radio-boton);
  padding: var(--z-esp-2) var(--z-esp-2) var(--z-esp-2) var(--z-esp-6);
  font-family: var(--z-fuente-texto);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--z-dur-rapida) var(--z-ease-mueve),
    transform var(--z-dur-rapida) var(--z-ease-mueve);
}

.z-boton__etiqueta {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

/* Auditoría móvil 17/09/2026: con una etiqueta larga ("Solicitar diagnóstico
   gratuito") el nowrap de arriba fuerza el botón a un ancho mayor que el
   contenedor con padding en pantallas de 360-390px — el botón se centra y
   desborda el margen de seguridad de 24px por ambos lados (comprobado: en
   360px el borde quedaba a 2px del viewport en vez de a 24px). En escritorio
   y tablet la etiqueta larga ya cabe de sobra, así que el nowrap se queda
   intacto ahí; en móvil se permite el salto de línea y el botón se limita al
   ancho de su contenedor — nunca desborda el padding de la página. */
@media (max-width: 640px) {
  .z-boton__etiqueta {
    white-space: normal;
  }
  .z-boton {
    max-width: 100%;
  }
}

.z-boton__circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--z-blanco);
  color: var(--z-tinta);
  flex-shrink: 0;
}

/* Corregido 08/09/2026, dos veces: primero se probó una traslación diagonal
   (se descentraba) y luego una escala uniforme (Mario no la quería — "que no
   se mueva ni se agrande", solo que se estire). La flecha final son DOS
   piezas independientes de un SVG: el eje (la línea) y la punta (la cabeza).
   El eje se estira con scaleX desde su propio centro — así crece hacia atrás
   y hacia delante a la vez, sin moverse de sitio. La punta se desplaza la
   misma distancia hacia fuera para quedarse pegada a la punta del eje, sin
   deformarse (trasladar, nunca escalar una punta de flecha). */
.z-boton__flecha-eje,
.z-boton__flecha-punta {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--z-dur-rapida) var(--z-ease-mueve);
}

/* Corregido 17/09/2026: pasa de :hover a .z-hover-activo, una clase que pone
   `js/interacciones.js`. Motivo — ver la nota larga junto a @keyframes
   z-boton-rebote más abajo: con :hover puro, salir del botón a media
   animación corta el efecto en seco. La clase la controla JS con un
   candado (no se quita hasta que el ciclo ha terminado de verdad), así el
   :hover del navegador deja de ser quien manda aquí. */
.z-boton.z-hover-activo {
  background: var(--z-accion-fondo-hover); /* 4,36:1 verificado */
}

.z-boton.z-hover-activo .z-boton__flecha-eje {
  transform: scaleX(1.6);
}

.z-boton.z-hover-activo .z-boton__flecha-punta {
  transform: translateX(3px);
}

/* Añadido 11/09/2026, a petición directa: el botón "baja" al pulsarlo, no
   solo cambia de color. translateY, no scale — un botón que encoge se lee
   como que se rompe; uno que baja se lee como una tecla física, que es el
   efecto pedido. Sale del estado activo con la misma transición de entrada
   (mismo --z-dur-rapida/--z-ease-mueve que ya regía el color), así que no
   hace falta ninguna regla nueva de salida. */
.z-boton:active {
  background: var(--z-accion-fondo-activo); /* 5,15:1 verificado */
  transform: translateY(2px);
}

.z-boton[disabled],
.z-boton[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--z-desactivado); /* sólido, nunca opacity */
}

.z-boton[disabled] .z-boton__circulo,
.z-boton[aria-disabled="true"] .z-boton__circulo {
  background: var(--z-fondo);
  color: var(--z-desactivado);
}

/* --- Variante: rebote elástico (solo hero) --------------------------------
   Probada junto a otras 4 disruptivas en preview.html (12/09/2026, Ronda 3).
   Las demás quedaron descartadas: una (el círculo que "devora" el botón)
   costó tres rondas de arreglos y aun así no quedaba fluida ni limpia —
   señal de abandonarla en vez de seguir parcheando. Esta es la más simple
   de las cinco (una traslación con rebote, nada de escalar o cruzar
   colores a la vez), así que no arrastra ese riesgo. Modificador aparte
   porque el resto de usos de z-boton (CTA final, sección oscura) mantienen
   el hover normal — solo el hero necesita la versión llamativa. */
/* Corregido 17/09/2026: era `.z-boton--rebote:hover .z-boton__circulo` — un
   @keyframes disparado por :hover se cancela en seco en cuanto el cursor
   sale del botón (la regla deja de aplicar a media animación, así que el
   círculo salta de vuelta a su sitio de golpe en vez de terminar el rebote).
   Es justo el "corte brusco" que reportó Mario. Con `.z-hover-activo`
   controlada por JS (`interacciones.js`), la clase no se quita hasta que el
   ciclo ha terminado — el rebote SIEMPRE se ve entero, pase el cursor rápido
   o no. */
.z-boton--rebote.z-hover-activo .z-boton__circulo {
  animation: z-boton-rebote 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes z-boton-rebote {
  0% { transform: translateX(0); }
  40% { transform: translateX(14px); }
  100% { transform: translateX(0); }
}

/* ==========================================================================
   2. Botón secundario
   Rehecho 11/09/2026, sustituyendo el borde-luz (resplandor rojo). A Mario
   no le convencía — "queda como el culo". Se probaron 10 alternativas en
   `preview.html` (Ronda 1 + Ronda 2) y se eligieron 3, cada una con un rol
   fijo — no son intercambiables al azar, esa es la parte que sí mantiene
   consistencia de marca (mismo principio que Material Design: cada nivel
   de énfasis tiene un uso fijo, no es libre elección estética):
   - Base (esta clase): el punto rojo del logotipo, junto a un CTA principal.
   - `--oscuro`: esquina cortada, solo sobre panel oscuro.
   - `.z-enlace-corchetes`: enlace de menor peso dentro de contenido.
   ========================================================================== */
.z-boton-secundario {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--z-esp-3) var(--z-esp-6) var(--z-esp-3) var(--z-esp-12);
  border-radius: var(--z-radio-boton);
  border: 1.5px solid var(--z-gris-oscuro);
  color: var(--z-texto);
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-cuerpo);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--z-dur-media) var(--z-ease-mueve),
    color var(--z-dur-media) var(--z-ease-mueve),
    transform var(--z-dur-rapida) var(--z-ease-mueve);
}

/* El punto: mismo rojo de marca, mismo punto que el logotipo "zumer.". En
   reposo es solo un punto; al pasar el cursor se estira hasta ser la
   píldora entera. Importante: el `left` de aquí y el `left:0` del `:hover`
   de abajo son la MISMA propiedad — cualquier regla que fije `left` con
   más especificidad (o !important) fuera de `:hover` rompe el relleno al
   pasar el cursor (se queda encogido y descentrado en vez de cubrir el
   botón entero). Pasó una vez en pruebas, documentado para no repetirlo. */
.z-boton-secundario::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--z-acento);
  transform: translateY(-50%);
  transition: all var(--z-dur-media) var(--z-ease-mueve);
  z-index: -1;
}

/* Corregido 17/09/2026: :hover → .z-hover-activo (ver nota junto a
   .z-boton.z-hover-activo, arriba). Aquí importa todavía más: el punto que
   se estira es justo el efecto que Mario pidió proteger de cortes — sin el
   candado de JS, salir del botón a medio estirado dejaba el punto encogido
   y descentrado en vez de completar la píldora o volver a ser un punto. */
.z-boton-secundario.z-hover-activo {
  border-color: transparent;
  color: var(--z-blanco);
}

.z-boton-secundario.z-hover-activo::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--z-radio-boton);
  transform: none;
}

/* Mismo criterio que el botón principal (ver ahí el porqué de translateY
   sobre scale): el CTA secundario también "baja" al pulsarlo. */
.z-boton-secundario:active {
  transform: translateY(2px);
}

/* --- Variante: sobre panel oscuro ------------------------------------------
   Esquina cortada en vez de píldora, a propósito: rompe el lenguaje del
   resto del sistema porque es la única variante que vive solo dentro de la
   sección oscura ("Por qué no es un bot más") — nunca convive con la
   variante base en la misma pantalla, así que no hay ambigüedad de cuál
   es cuál. El corte cambia de esquina al pasar el cursor: hay movimiento
   real en la forma, no solo un cambio de color. */
.z-boton-secundario--oscuro {
  min-height: 44px;
  padding: var(--z-esp-3) var(--z-esp-6);
  background: var(--z-accion-fondo-hover); /* #E4350D, 4,36:1 con texto blanco — verificado. --z-acento (#F24720) daba solo 3,7:1: a 16px/600 no cuenta como "texto grande" de WCAG, así que incumplía AA (fallo /impeccable audit 15/09/2026). */
  color: var(--z-blanco);
  border: none;
  border-radius: 0;
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-cuerpo);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: clip-path var(--z-dur-media) var(--z-ease-mueve),
    background var(--z-dur-rapida) var(--z-ease-mueve),
    transform var(--z-dur-rapida) var(--z-ease-mueve);
}

/* :hover → .z-hover-activo, mismo motivo que el resto de este archivo
   (17/09/2026). El corte de esquina animado por clip-path es otro caso que
   se veía "roto" al interrumpirlo a medias. */
.z-boton-secundario--oscuro.z-hover-activo {
  background: var(--z-accion-fondo-activo); /* #CF300C, 5,15:1 con texto blanco — verificado. --z-rojo-claro (#F56C4D) daba 2,9:1, el peor fallo de contraste de la página (fallo /impeccable audit 15/09/2026). */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.z-boton-secundario--oscuro:active {
  transform: translateY(2px);
}

/* --- Enlace de corchetes: enlace de menor peso dentro de contenido --------
   Sin forma de botón: los corchetes SON el borde, y se separan al pasar el
   cursor en vez de rellenarse nada. Para notas, tarjetas, pies de página —
   sitios donde hoy se usaría `.z-enlace`, no un botón de área grande. */
.z-enlace-corchetes {
  display: inline-flex;
  align-items: center;
  gap: var(--z-esp-2);
  color: var(--z-texto);
  font-family: var(--z-fuente-texto);
  font-weight: 600;
  text-decoration: none;
}

.z-enlace-corchetes__corchete {
  color: var(--z-acento-texto);
  font-weight: 700;
  display: inline-block;
  transition: transform var(--z-dur-rapida) var(--z-ease-mueve);
}

/* :hover → .z-hover-activo (17/09/2026), mismo motivo. */
.z-enlace-corchetes.z-hover-activo .z-enlace-corchetes__corchete--izq { transform: translateX(-4px); }
.z-enlace-corchetes.z-hover-activo .z-enlace-corchetes__corchete--der { transform: translateX(4px); }

/* ==========================================================================
   3. Campo de formulario (etiqueta + control)
   Corregido 08/09/2026: ahora es full pill como el botón y el chip
   (--z-radio-boton), no la caja de esquina suave que tenían el resto de
   cajas. El borde en reposo usa --z-borde (3,03:1, WCAG 1.4.11 exige 3:1 en
   controles — la línea decorativa --z-separador da 1,21:1 y no vale aquí).

   FOCO — tratamiento distinto al resto del sistema, documentado a propósito:
   en vez del anillo rojo de 3px (--z-foco), el borde pasa a --z-gris-oscuro
   (oscuro pero no negro puro, y más fino: 1px) y alrededor aparece un
   resplandor en el rojo de marca en capas de blur puro, sin ningún escalón
   duro — corregido 08/09/2026 para que la luz caiga de forma realista y con
   más alcance, no como un anillo con borde recortado. Sigue siendo un
   indicador de foco muy visible (el borde oscuro por sí solo ya tiene
   contraste alto contra el blanco) — no se ha sacrificado accesibilidad,
   solo se ha cambiado el mecanismo respecto al resto de controles.
   ========================================================================== */
.z-campo {
  display: flex;
  flex-direction: column;
  gap: var(--z-esp-2);
}

.z-campo__etiqueta {
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-pie);
  font-weight: 500;
  color: var(--z-texto-suave); /* 5,03:1 sobre papel */
}

.z-campo__control {
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-cuerpo);
  color: var(--z-texto);
  background: var(--z-fondo-elevado);
  border: 1px solid var(--z-borde);
  border-radius: var(--z-radio-boton);
  padding: var(--z-esp-3) var(--z-esp-6);
  min-height: 48px;
  width: 100%;
  transition: border-color var(--z-dur-rapida) var(--z-ease-mueve), box-shadow var(--z-dur-rapida) var(--z-ease-mueve);
}

.z-campo__control::placeholder {
  color: var(--z-texto-suave);
}

.z-campo__control:focus-visible {
  outline: none;
  border-color: var(--z-gris-oscuro);
  box-shadow: var(--z-resplandor-foco);
}

.z-campo__control:disabled {
  color: var(--z-desactivado);
  border-color: var(--z-desactivado);
}

/* select nativo: se quita la flecha del navegador (pegada al borde, sin
   relación con el resto del sistema) y se pinta una propia, con el mismo
   trazo que la flecha del botón principal, separada del borde como un icono
   más — nunca a ras del borde. */
select.z-campo__control {
  appearance: none;
  padding-right: calc(var(--z-esp-6) * 2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6963' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--z-esp-6) center;
  background-size: 16px;
}

.z-campo__ayuda {
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-pie);
  color: var(--z-texto-suave);
}

/* ==========================================================================
   4. Tarjeta
   Corregido 08/09/2026, dos veces el mismo día: la primera versión le puso
   sombra a la tarjeta para que "pareciera premium" — Mario la rechazó
   explícitamente al ver la referencia real de Omnicom, que es plana, sin
   sombra, y se distingue del fondo solo por el color (§7 regla 5, que ya
   decía esto desde el principio: "menos bordes, distinguir por fondo antes
   que por línea" — la sombra era la desviación, no la corrección).
   La insignia de flecha (variante `.z-tarjeta--enlace`) reutiliza la misma
   idea que el círculo del botón principal, pero oscura sobre tarjeta clara
   en vez de clara sobre botón rojo — el color del círculo siempre contrasta
   con lo que tiene detrás, nunca es un valor fijo.
   ========================================================================== */
/* Corregido 09/09/2026, tercera vez: el fondo pasa de --z-fondo-elevado a
   blanco puro. Sobre papel, la superficie daba 1,044:1 — invisible, medido
   al construir la landing. La tarjeta de omc.com es blanco puro sobre un gris
   de sección (1,497:1). La regla 5 (§7) sigue cumpliéndose: se distingue por
   fondo y no por línea, pero ahora el fondo distingue de verdad. Va con
   --z-fondo-seccion debajo; sobre papel o superficie vuelve a desaparecer. */
.z-tarjeta {
  position: relative;
  background: var(--z-fondo-tarjeta);
  border-radius: var(--z-radio-tarjeta);
  padding: var(--z-esp-8);
}

.z-tarjeta--enlace {
  padding-bottom: calc(var(--z-esp-8) + 40px + var(--z-esp-4));
}

.z-tarjeta__insignia {
  position: absolute;
  right: var(--z-esp-6);
  bottom: var(--z-esp-6);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--z-tinta);
  color: var(--z-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.z-tarjeta__texto {
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-cuerpo);
  color: var(--z-texto);
  max-width: var(--z-medida-linea);
  margin: 0;
}

/* ==========================================================================
   5. Chip / etiqueta pequeña
   Cuarta vuelta (08/09/2026): de grafito sólido con grano a vidrio esmerilado
   — gradiente lineal + textura calcados de valores exactos de Figma (efecto
   "Vidrio" + relleno lineal), más backdrop-filter y un resplandor interior
   que aproximan el vidrio. Sigue con base sólida (background-color) debajo
   del gradiente para que el texto blanco nunca pierda contraste, ni en el
   extremo del gradiente donde casi llega a blanco (detalle en tokens.css).
   Deliberadamente NO se replica el "desenfoque de capa progresivo" de Figma
   (1→30, más fuerte a la derecha): CSS no puede variar el blur espacialmente
   sin recurrir a capas superpuestas con máscara, lo que arriesga que el
   texto quede desenfocado o descentrado. Ganancia visual marginal para el
   riesgo — se deja fuera hasta que haya una razón real de negocio para
   asumir esa complejidad.
   Chivo 500 a 14px: a ese tamaño el 500 ayuda a leer, no pesa (§2).
   ========================================================================== */
.z-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--z-esp-2);
  padding: var(--z-esp-2) var(--z-esp-4);
  border-radius: var(--z-radio-boton);
  background-color: var(--z-gris-oscuro);
  background-image: var(--z-chip-vidrio);
  background-blend-mode: normal, overlay;
  background-size: cover;
  box-shadow: var(--z-sombra-chip), var(--z-chip-resplandor-vidrio);
  backdrop-filter: var(--z-chip-vidrio-filtro);
  -webkit-backdrop-filter: var(--z-chip-vidrio-filtro);
  font-family: var(--z-fuente-texto);
  font-size: 14px;
  font-weight: 500;
  color: var(--z-texto-inverso);
}

.z-chip__punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--z-texto-inverso);
  flex-shrink: 0;
}

.z-chip--acento {
  background-color: var(--z-rojo-oscuro);
  background-image: var(--z-chip-vidrio-acento);
}

.z-chip--acento .z-chip__punto {
  background: var(--z-acento-inverso); /* 3,55:1 — el rojo se distingue del grafito base */
}

/* ==========================================================================
   6. Encabezado de sección (antetítulo + titular)
   El antetítulo va sutil, no grande: apoya el contenido, no compite con él
   (§7 regla 4).
   ========================================================================== */
.z-seccion-titulo {
  display: flex;
  flex-direction: column;
  gap: var(--z-esp-2);
}

.z-seccion-titulo__antetitulo {
  /* Corregido 08/09/2026: sin mayúsculas forzadas — es uno de los patrones
     que más delatan una página hecha por IA. La distinción viene del color
     de marca y el tamaño, no de gritar en mayúsculas. */
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-pie);
  font-weight: 500;
  color: var(--z-acento-texto-pie); /* no --z-acento-texto: a este tamaño daba 3,27:1, fallo AA (/impeccable audit 15/09/2026) */
}

.z-seccion-titulo__titular {
  font-family: var(--z-fuente-titular);
  font-weight: 700; /* baja de 800 el 09/09/2026: el tamaño ya jerarquiza */
  font-size: var(--z-texto-h2);
  line-height: 1.1;
  letter-spacing: var(--z-tracking-titular);
  color: var(--z-texto);
  text-wrap: balance;
  margin: 0;
}

/* ==========================================================================
   7. Enlace de texto
   --z-acento-texto (#D4320C) da 4,56:1 sobre papel: es el rojo válido para
   texto pequeño. El rojo de marca a 3,41:1 NO vale aquí (§1.4).
   ========================================================================== */
.z-enlace {
  color: var(--z-acento-texto);
  font-family: var(--z-fuente-texto);
  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), mismo motivo. */
.z-enlace.z-hover-activo {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   8. Cifra con fuente
   Nuevo 08/09/2026, a petición de contenido real, no de estética: CLAUDE.md
   prohíbe publicar un dato sin decir de dónde sale. Este componente OBLIGA
   estructuralmente a que cada cifra lleve su fuente al lado — no es opcional
   en el marcado, aunque el CSS no pueda forzarlo.
   ========================================================================== */
.z-cifra {
  display: flex;
  flex-direction: column;
  gap: var(--z-esp-1);
}

.z-cifra__numero {
  font-family: var(--z-fuente-titular);
  font-weight: 800;
  font-size: var(--z-texto-h1);
  line-height: 1;
  color: var(--z-texto);
}

.z-cifra__etiqueta {
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-cuerpo);
  color: var(--z-texto);
  max-width: var(--z-medida-linea);
}

.z-cifra__fuente {
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-pie);
  color: var(--z-texto-suave);
}

/* ==========================================================================
   9. Párrafo de apoyo en cursiva serif
   Nuevo 09/09/2026, del diagnóstico de omc.com: el párrafo que acompaña a
   cada titular va en cursiva serif, y ese contraste sans/serif es lo que da
   carácter a toda su página. Ellos lo usan a 23,2px en Cormorant Garamond.
   Aquí va a 20px (nuestro paso "cuerpo grande"): su tamaño mayor compensa la
   altura-x pequeña de la serif, igual que hacen ellos subiendo la cursiva del
   titular un 27%.
   REGLA: solo para párrafos de apoyo y etiquetas de cifra. En cuerpo normal,
   nunca — una cursiva serif a 16px en párrafos largos se lee peor.
   ========================================================================== */
.z-cursiva {
  font-family: var(--z-fuente-cursiva);
  font-style: italic;
  font-weight: 500;
  font-size: var(--z-texto-grande);
  line-height: 1.4;
  color: var(--z-texto);
  max-width: var(--z-medida-linea);
  margin: 0;
}

/* ==========================================================================
   10. Icono en círculo
   Nuevo 09/09/2026. Calcado del patrón de omc.com (icono de línea dentro de
   un círculo punteado) y cerrando de paso la regla que §8 del sistema dejaba
   pendiente: "cuando se use el set de AnimateIcons, se fija rejilla de 24px y
   un solo grosor de trazo". Rejilla 24, trazo 2, el mismo del botón.
   ========================================================================== */
/* Corregido 09/09/2026: la primera versión era un icono de 24px dentro de un
   círculo punteado de 56px — todo anillo vacío con un dibujito diminuto en el
   centro, y el punteado remataba el efecto de "sin acabar". Mario lo señaló y
   tenía razón. Ahora el icono va suelto y grande (44px), sin contenedor: a ese
   tamaño el trazo de 2px se lee, y en una tarjeta de ~300px la proporción es la
   correcta. Omnicom los usa a 154px dentro de tarjetas más grandes.
   El trazo sube a 1.75 en el marcado para que a 44px no se vea alambrado. */
.z-icono {
  display: block;
  width: 44px;
  height: 44px;
  color: var(--z-acento-texto);
  flex-shrink: 0;
}

.z-icono svg {
  width: 100%;
  height: 100%;
  display: block;
}

.z-icono--inverso {
  color: var(--z-acento-inverso);
}

/* ==========================================================================
   11. Mockup de hilo de WhatsApp
   Nuevo 09/09/2026. Es la pieza que faltaba: la landing no enseñaba el
   producto en ningún sitio. Usa --z-radio-chat, la excepción de §4 que estaba
   documentada desde el principio para esto exactamente.
   Los colores NO imitan el verde de WhatsApp: la burbuja del sistema va en
   grafito de marca. Imitar la app entera sería hacer pasar un mockup por una
   captura real.
   ========================================================================== */
.z-chat {
  display: flex;
  flex-direction: column;
  gap: var(--z-esp-3);
  background: var(--z-fondo-tarjeta);
  border-radius: var(--z-radio-tarjeta);
  padding: var(--z-esp-6);
  max-width: 420px;
}

.z-chat__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--z-esp-3);
  padding-bottom: var(--z-esp-3);
  border-bottom: 1px solid var(--z-separador);
}

.z-chat__quien {
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-cuerpo);
  font-weight: 500;
  color: var(--z-texto);
}

.z-chat__hora {
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-pie);
  color: var(--z-texto-suave);
}

.z-chat__burbuja {
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-cuerpo);
  line-height: 1.45;
  padding: var(--z-esp-3) var(--z-esp-4);
  max-width: 85%;
}

/* La hora dentro de cada burbuja no es decoración: es la prueba del argumento
   de venta. Ver 23:47 en la pregunta y 23:47 en la respuesta demuestra lo que
   el texto de la sección 2 promete ("responde en menos de dos minutos, a
   cualquier hora") mejor que la frase misma. Añadido 09/09/2026. */
.z-chat__hora-burbuja {
  display: block;
  font-size: var(--z-texto-pie);
  line-height: 1;
  margin-top: var(--z-esp-2);
  opacity: 1; /* nunca opacity para atenuar: color explícito abajo */
}

.z-chat__burbuja--paciente .z-chat__hora-burbuja { color: var(--z-texto-suave); }
.z-chat__burbuja--sistema .z-chat__hora-burbuja { color: var(--z-texto-suave-inverso); }

/* Entrante: la paciente. Gris de sección, alineada a la izquierda. */
.z-chat__burbuja--paciente {
  background: var(--z-fondo-seccion);
  color: var(--z-texto);
  border-radius: var(--z-radio-chat);
  align-self: flex-start;
}

/* Saliente: el sistema. Grafito de marca, alineada a la derecha, con la
   esquina recta en el lado del emisor (de ahí el radio invertido). */
.z-chat__burbuja--sistema {
  background: var(--z-fondo-inverso);
  color: var(--z-texto-inverso);
  border-radius: 20px 20px 20px 4px;
  align-self: flex-end;
}

.z-chat__pie {
  font-family: var(--z-fuente-texto);
  font-size: var(--z-texto-pie);
  color: var(--z-texto-suave);
  margin: var(--z-esp-2) 0 0;
}

/* --- Movimiento: siempre respetado (§5) ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .z-boton,
  .z-boton__flecha-eje,
  .z-boton__flecha-punta,
  .z-boton-secundario,
  .z-campo__control,
  .z-enlace {
    transition: none;
  }
}