/* ==========================================================================
   Landing de campaña — clase gratuita "S.O.S. Cerebro +40"
   --------------------------------------------------------------------------
   Solo lo PROPIO de la landing. Todo lo que ya existe en el home se reusa tal
   cual desde style.css: .hero__* (hero), .pillar (cards de síntomas), .pill
   (datos de la clase), .section-head / .section-title / .section-eyebrow,
   .authority__* (bloque de las fundadoras), .test-card (card del cierre),
   .btn y los tokens de :root.

   Se encola solo en esta página (ver nua_is_landing_clase() en functions.php).
   ========================================================================== */

/* El hero arranca pegado al header, sin el aire que llevan las páginas
   internas. Mismo peso de selector que la regla que anula (style.css:
   `body:not(.home) .site-main`), y como este archivo carga después, gana. */
body:not(.home) .site-main--landing {
  margin-top: 0;
}

/* Los anchors (#reservar) no quedan tapados por la barra superior fija. */
.site-main--landing > section[id] {
  scroll-margin-top: 5.5rem;
}

/* ==========================================================================
   Barra superior — chip "en vivo" · cuenta regresiva · CTA.
   Verde profundo, sticky, sin menú ni logo: la landing es página cerrada.
   ========================================================================== */
.landing-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--verde-seco);
  color: var(--crema);
}

.landing-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 0.7rem;
}

/* Chip sobre el verde seco: fondo con un tinte oscuro (el verde es medio-claro,
   así que un poco de oscuridad detrás sube el contraste del texto crema) y
   contorno claro. */
.landing-bar__chip {
  flex: none;
  background: rgba(52, 65, 60, 0.22);
  border: var(--border-width) solid rgba(244, 238, 228, 0.32);
  color: var(--crema);
}

/* El punto que late, en verde salvia para que se vea sobre el fondo oscuro. */
.landing-bar__chip .pill__dot {
  background: var(--verde-salvia);
}

/* ---- Cuenta regresiva ---- */
.landing-countdown {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0; /* deja que se comprima antes de empujar el layout */
}

.landing-countdown__label {
  font-size: var(--fs-small);
  color: rgba(251, 250, 247, 0.9);
}

.landing-countdown__units {
  display: flex;
  gap: 0.4rem;
}

/* Cada unidad: caja redondeada con el número y la letra chica. El tinte oscuro
   le da al número claro un fondo propio para destacar sobre el verde seco. */
.landing-countdown__unit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-lg);
  background: rgba(52, 65, 60, 0.24);
}

.landing-countdown__unit b {
  font-weight: 500; /* destacado = Medium, nunca 700 (regla de marca) */
  font-size: 1.05rem;
  line-height: 1;
  font-variant-numeric: tabular-nums; /* ancho fijo: el segundero no salta */
  color: var(--crema);
}

.landing-countdown__unit i {
  font-style: normal;
  font-size: 0.72rem;
  color: rgba(251, 250, 247, 0.82);
}

/* ---- Botón: crema sobre el verde, para resaltar en la barra oscura ---- */
.landing-bar__cta {
  flex: none;
  min-height: 2.6rem;
  padding: 0 1.3rem;
  background: var(--crema);
  color: var(--verde-profundo);
}
.landing-bar__cta:hover {
  background: #fff;
}

/* ---- Barra en mobile ----
   No entran las tres zonas: se esconde el chip y el rótulo, y quedan la cuenta
   regresiva compacta y el botón. */
@media (max-width: 720px) {
  .landing-bar__chip,
  .landing-countdown__label {
    display: none;
  }
  .landing-bar__inner {
    justify-content: space-between;
    gap: var(--space-sm);
  }
  .landing-countdown__unit {
    padding: 0.3rem 0.5rem;
  }
}

/* En pantallas angostas los 4 casilleros + el botón no entran juntos: se
   acorta el botón a "Reservar" (sin "mi lugar") y se compactan las cajas, así
   el segundero entra y se entiende qué mide cada número. */
@media (max-width: 520px) {
  .landing-bar__cta-extra {
    display: none; /* "Reservar mi lugar" -> "Reservar" */
  }
  .landing-countdown__units {
    gap: 0.3rem;
  }
  .landing-countdown__unit {
    padding: 0.3rem 0.45rem;
  }
  .landing-bar__cta {
    padding: 0 0.9rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.landing-hero {
  position: relative; /* ancla la foto de fondo */
  overflow: hidden;
  background: var(--crema);
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
}

/* ---- Foto de fondo ----
   Entra por la derecha a sangre y se funde con el crema del bloque por el
   borde izquierdo, con la misma técnica que la foto del podcast del home
   (mask-image en degradé). Arranca donde termina la columna de texto, así el
   copy nunca queda sobre la imagen. */
.landing-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  pointer-events: none;
}

.landing-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%; /* las caras están arriba: encuadre alto para que asomen sobre la card */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 60%);
  mask-image: linear-gradient(to right, transparent 0%, #000 60%);
}

/* La grilla va por encima de la foto. */
.landing-hero .hero__grid {
  position: relative;
  z-index: 1;
}

/* Los dos renglones del nombre de la clase usan .hero__title-hook del home:
   misma tipografía, mismo cuerpo, misma interlínea. Único ajuste: el tope baja
   de 4.75rem a 4.3rem. Medido — con el tope del home "S.O.S. Cerebro+40" pide
   574px y la columna del hero tiene 546, así que el nombre se partía; a 4.3rem
   entra completo (521px) y el título queda en dos renglones parejos. */
.landing-hero .hero__title-hook {
  font-size: clamp(3rem, 1.9rem + 3vw, 4.3rem);
}

/* Promesa: itálica Lora, en el color de lectura (no en curry: es una frase
   larga, mismo criterio que .validacion__lead y el título del libro; el curry a
   este tamaño sobre crema no llega al contraste). font-size-adjust iguala la
   altura-x de Lora con el resto. */
.landing-hero__promise {
  max-width: 28ch;
  margin-top: var(--space-md);
  font-family: var(--font-italic);
  font-style: italic;
  font-size-adjust: 0.53;
  font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2rem);
  line-height: 1.3;
  color: var(--color-title);
  text-wrap: balance;
}

/* ---- Datos de la clase (fecha, horario, grabación) ----
   Ícono + texto, como las specs del programa, pero en columna. */
.landing-specs {
  display: grid;
  gap: 0.6rem;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.landing-specs .spec {
  font-size: var(--fs-body);
  font-weight: 500; /* son datos, no prosa: Medium los separa del párrafo */
  line-height: 1.35; /* si la fecha cae en dos renglones, no quedan tan separados */
  color: var(--color-title);
}

/* Caja de ícono cuadrada y fija: la cámara es más ancha que el reloj y el
   calendario, y con `width: auto` los tres textos arrancaban en x distintas. */
.landing-specs .spec__icon {
  width: 1.6em;
}

/* El corte forzado de la fecha (después de "agosto") solo en mobile; en desktop
   entra en un renglón. */
.spec__wrap {
  display: none;
}
@media (max-width: 560px) {
  .spec__wrap {
    display: inline;
  }
  /* Con la fecha en dos renglones, el ícono se alinea arriba (con "Sábado..."),
     no centrado entre las dos líneas. */
  .landing-specs .spec {
    align-items: flex-start;
  }
}

/* ---- Columna derecha: card del formulario flotando sobre la foto ---- */
.landing-hero__aside {
  align-self: center;
}

/* La card se despega de la foto con sombra y un fondo traslúcido: deja entrever
   apenas la foto, y el blur de atrás mantiene el texto legible sobre cualquier
   zona de la imagen. */
.landing-form-card {
  position: relative; /* ancla la ruedita giratoria de la esquina */
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  background: rgba(251, 250, 247, 0.82); /* ghost traslúcido: la foto se insinúa detrás */
  backdrop-filter: blur(8px); /* un poco más de blur para sostener la lectura con menos opacidad */
  border: var(--border-width) solid rgba(52, 65, 60, 0.12);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}

/* Ruedita giratoria en la esquina sup-der del form: mismo sello que el hero del
   home (texto sobre un círculo, girando, sin disco), reusa @keyframes
   hero-stamp-spin de style.css. Cuelga de la esquina. */
.landing-form-stamp {
  position: absolute;
  top: -58px; /* la mitad de la rueda queda sobre el bloque, la otra mitad afuera */
  right: 14px; /* corrida a la izquierda respecto de la esquina */
  z-index: 2;
  width: clamp(92px, 9vw, 116px);
  aspect-ratio: 1;
  pointer-events: none;
}
.landing-form-stamp text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px; /* en unidades del viewBox (120) */
  letter-spacing: 1.25px; /* natural ~248 de 251: casi lleno sin cortarse aun si el navegador ignora textLength; con textLength llena exacto */
  text-transform: uppercase;
  fill: var(--verde-profundo);
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: hero-stamp-spin 22s linear infinite;
}
/* En mobile: misma idea (media rueda sobre el bloque), corrida adentro para no
   rozar el borde en pantallas angostas. */
@media (max-width: 560px) {
  .landing-form-stamp {
    right: 12px;
    top: -46px;
    width: clamp(84px, 24vw, 100px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-form-stamp text {
    animation: none;
  }
}

/* Título de la card: qué es este formulario. */
.landing-form-card__title {
  margin-bottom: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--verde-profundo);
}

/* Línea que introduce el formulario. */
.landing-form__intro {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-text);
}

/* ---- Formulario Contact Form 7 dentro de la card ----
   CF7 arma los campos en <span.wpcf7-form-control-wrap> separados por <br>
   dentro de un <p>; los apilamos y les damos el look de la card (campos ghost
   redondeados + botón curry, como el markup a mano que había antes). */
.landing-form-card .wpcf7 {
  margin: 0;
}
.landing-form-card .wpcf7-form > p {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
}
.landing-form-card .wpcf7-form br {
  display: none; /* el salto lo maneja el gap del flex */
}
.landing-form-card .wpcf7-form-control-wrap {
  display: block;
}

/* Campos. */
.landing-form-card .wpcf7-form input[type="text"],
.landing-form-card .wpcf7-form input[type="email"],
.landing-form-card .wpcf7-form input[type="tel"],
.landing-form-card .wpcf7-form select {
  width: 100%;
  padding: 0.8rem 1rem;
  border: var(--border-width) solid rgba(52, 65, 60, 0.18);
  border-radius: var(--radius-lg);
  background: var(--ghost);
  font: inherit;
  color: var(--color-text);
}
.landing-form-card .wpcf7-form input::placeholder {
  color: var(--color-muted);
}
.landing-form-card .wpcf7-form input:focus,
.landing-form-card .wpcf7-form select:focus {
  outline: none;
  border-color: var(--verde-medio);
  box-shadow: 0 0 0 4px var(--color-focus-ring);
}

/* Botón: el look de .btn.btn-primary, a todo el ancho. */
.landing-form-card .wpcf7-form input[type="submit"] {
  width: 100%;
  min-height: 3rem;
  margin-top: var(--space-xs);
  padding: 0 1.6rem;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  background: var(--curry);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition);
}
.landing-form-card .wpcf7-form input[type="submit"]:hover {
  background: var(--curry-dark);
}

/* Mensajes de validación/respuesta de CF7. */
.landing-form-card .wpcf7-response-output {
  margin: var(--space-sm) 0 0;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  font-size: var(--fs-small);
}
.landing-form-card .wpcf7-not-valid-tip {
  margin-top: 0.25rem;
  font-size: var(--fs-small);
}

.landing-form__trust {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--color-muted);
  text-align: center;
}

/* ---- Entrada del hero ----
   El home anima eyebrow/título/lead/foto (keyframes hero-in, en style.css).
   Acá se suman los elementos propios de la landing con sus delays, para que
   entren en la misma secuencia y no aparezcan de golpe. */
.landing-hero .landing-hero__promise,
.landing-hero .landing-specs,
.landing-hero__aside {
  animation: hero-in 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-hero .landing-hero__promise {
  animation-delay: 0.32s;
}
.landing-hero .landing-specs {
  animation-delay: 0.38s; /* entra entre la promesa (0.32) y el párrafo (0.4), su nuevo orden */
}
.landing-hero__aside {
  animation-delay: 0.25s; /* entra junto con la foto, como la media del home */
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero .landing-hero__promise,
  .landing-hero .landing-specs,
  .landing-hero__aside {
    animation: none;
  }
}

/* ---- Hero en mobile ----
   La grilla del home colapsa a una columna en 900px. En vez de poner la foto
   como banda arriba (ocupaba mucho sin comunicar), la mandamos al fondo del
   bloque, detrás del formulario: queda de fondo de la card, como en desktop.
   Se apoya abajo a todo el ancho y se apaga hacia arriba sobre el crema del
   copy. */
@media (max-width: 900px) {
  .landing-hero__photo {
    top: auto; /* se despega de arriba y se ancla abajo */
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: clamp(420px, 52vw + 190px, 560px); /* respalda la card sin treparse a los specs */
  }
  .landing-hero__photo img {
    object-position: center 32%;
    /* fundido largo hacia arriba: si el borde toca los specs, ahí ya está casi
       transparente y el texto se lee limpio. */
    -webkit-mask-image: linear-gradient(to top, #000 48%, transparent 96%);
    mask-image: linear-gradient(to top, #000 48%, transparent 96%);
  }
  /* Poco aire entre el texto y el form: el gap del grid del hero (space-lg,
     heredado del home) es lo que abría el hueco grande en mobile. Lo achico y
     el aside no suma margen propio. */
  .landing-hero .hero__grid {
    gap: var(--space-md);
  }
  /* El formulario queda encima de la foto, como en desktop. */
  .landing-hero__aside {
    position: relative;
    z-index: 1;
    margin-top: 0;
  }
}

/* ==========================================================================
   Síntomas — "¿Te pasa esto?"
   El hero cierra con un borde recto (sin duna): la curva rozaba mal contra la
   foto de fondo. El cambio de crema a ghost ya hace de divisor.
   ========================================================================== */

/* Destacado de la bajada: Medium (500), nunca 700 (regla de marca), en verde profundo. */
.landing-sintomas .section-lead strong {
  font-weight: 500;
  color: var(--verde-profundo);
}

/* Cards con la estructura de Método (foto arriba + cuerpo). El texto arranca
   arriba: como todas las fotos comparten proporción, el número y el texto
   empiezan a la misma altura en las cuatro cards (nunca alineado abajo). */
.landing-sintomas .pillar p {
  margin-top: var(--space-xs);
  font-size: var(--fs-body);
  line-height: 1.42;
  color: var(--color-title);
}

/* ==========================================================================
   La clase — "En 90 minutos vas a entender"
   ========================================================================== */
/* Los 5 puntos, uno debajo del otro. */
.landing-learn {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  max-width: 60rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.landing-learn__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  background: rgba(251, 250, 247, 0.65); /* ghost translúcido, como .pillar */
  border: var(--border-width) solid rgba(52, 65, 60, 0.16);
  border-radius: var(--radius-card);
}

.landing-learn__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(200, 150, 45, 0.22); /* curry translúcido */
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--verde-profundo);
}

.landing-learn__item p {
  color: var(--color-text);
}
/* Frases destacadas: Medium (500), nunca 700 (regla de marca), en verde profundo. */
.landing-learn__item strong {
  font-weight: 500;
  color: var(--verde-profundo);
}

/* ---- Regalo ---- fondo beige; ícono grande + título en la fila de arriba y el
   texto a todo el ancho del bloque debajo. */
.landing-gift {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  row-gap: var(--space-xs); /* poco: el texto justo abajo del título */
  align-items: center;
  max-width: 60rem; /* mismo ancho que la lista de puntos, centrado */
  margin: var(--space-lg) auto 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.2rem);
  background: var(--crema); /* crema */
  border: var(--border-width) solid var(--arena);
  border-radius: var(--radius-card);
}

/* El ícono abarca las dos filas (título + texto) y se centra al lado: así el
   texto queda pegado abajo del título, no flotando por el alto del ícono. */
.landing-gift__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: auto;
  height: clamp(3rem, 2rem + 3vw, 4.5rem); /* grande */
  color: var(--curry);
}

.landing-gift__title {
  grid-column: 2;
  grid-row: 1;
}

/* Texto alineado con el título (a la derecha del ícono), grande. Entra en un
   renglón con aire a la derecha (medido ~29px a 1280). */
.landing-gift p {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  font-size: var(--fs-body);
  color: var(--color-text);
}

/* En mobile la columna del título es angosta: ahí el texto va a todo el ancho
   para no quedar apretado contra el ícono. El ícono vuelve a una sola fila para
   no solaparse con el texto full-width. */
@media (max-width: 560px) {
  .landing-gift__icon {
    grid-row: 1;
  }
  .landing-gift p {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Método
   ========================================================================== */
.landing-metodo__grid {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: var(--space-md);
  align-items: stretch;
}

@media (max-width: 820px) {
  .landing-metodo__grid {
    grid-template-columns: 1fr;
  }
}

.landing-metodo__card {
  padding: clamp(2rem, 1rem + 3vw, 3.2rem);
  background: var(--ghost);
  border: var(--border-width) solid rgba(52, 65, 60, 0.12);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
}

.landing-metodo__card p {
  max-width: 52ch;
  margin-top: var(--space-md);
  color: var(--color-text);
}

/* Destacado del cuerpo: Medium (500), nunca 700 (regla de marca). */
.landing-metodo__card strong {
  font-weight: 500;
}

.landing-metodo__panel {
  display: grid;
  align-content: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.2rem);
  background: var(--verde-salvia);
  border-radius: var(--radius-panel);
}

/* Lo que integra el método: una debajo de otra, no en fila. */
.landing-metodo__list {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0;
}

.landing-metodo__list li {
  padding: 0.5rem 1rem;
  background: var(--ghost);
  font-size: var(--fs-small);
}

/* ==========================================================================
   Fundadoras — números y cierre de bio
   ========================================================================== */
.landing-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 520px) {
  .landing-stats {
    grid-template-columns: 1fr;
  }
}

.landing-stat {
  padding: var(--space-md);
  background: var(--crema);
  border-radius: var(--radius-card);
}

.landing-stat strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-heading);
  font-weight: 400; /* la serif tiene un solo peso: nunca el bold del browser */
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.1rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--verde-profundo);
}

/* Solo la bajada (hijo directo del li), no el número de arriba. */
.landing-stat > span {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--color-muted);
}

.landing-bio {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.landing-bio p {
  color: var(--color-text);
}

.landing-bio strong {
  font-weight: 500;
}

/* ==========================================================================
   Cierre — "Reservá tu lugar"
   ========================================================================== */
/* La card del test del home, pero en ghost: sobre el degradé claro del bloque
   el crema no se despegaba del fondo. */
.landing-cierre__card {
  align-items: center;
  background: var(--ghost);
}

/* Adentro de una card ghost, el formulario vuelve a crema para separarse. */
.landing-cierre .landing-form-card {
  margin-top: 0;
  background: var(--crema);
  box-shadow: none;
}

.landing-cierre .landing-specs {
  margin-top: var(--space-lg);
}

@media (max-width: 820px) {
  .landing-cierre .landing-specs {
    margin-top: var(--space-md);
  }
}

/* ==========================================================================
   Footer — solo la línea legal
   ========================================================================== */
.landing-footer {
  padding-block: var(--space-lg);
  background: var(--verde-profundo);
  color: rgba(244, 238, 228, 0.72);
  font-size: var(--fs-small);
  text-align: center;
}

.landing-footer__inner {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

/* Wordmark NÜA recoloreado a crema por máscara (mismo recurso y técnica que el
   footer del sitio); centrado y con aire antes del tagline. */
.landing-footer__logo {
  width: 116px;
  aspect-ratio: 123.1 / 74;
  margin-bottom: var(--space-sm);
  background: var(--crema);
  -webkit-mask: url("assets/img/nua-01.svg") no-repeat center / contain;
  mask: url("assets/img/nua-01.svg") no-repeat center / contain;
}

.landing-footer__tagline {
  color: var(--crema);
}

/* ==========================================================================
   Página de gracias (S.O.S. Cerebro) — confirmación de inscripción.
   Reusa el sistema de la landing (specs, lista de pasos, section-head, footer).
   ========================================================================== */
body:not(.home) .site-main--gracias {
  margin-top: 0; /* sin header: el hero abre pegado al borde superior */
}

/* ---- Hero de confirmación ---- */
.gracias-hero {
  background: var(--crema);
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
}
.gracias-hero__inner {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.gracias-hero__chip {
  margin-bottom: var(--space-md);
}
.gracias-hero__title {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  line-height: 1.05;
  color: var(--verde-profundo);
}
.gracias-hero__lead {
  max-width: 38ch;
  margin: var(--space-md) auto 0;
  font-size: var(--fs-lead); /* más grande que el cuerpo */
  line-height: 1.5;
  color: var(--color-text);
}
.gracias-hero__lead strong {
  font-weight: 500;
}
.gracias-hero__cta {
  margin-top: var(--space-lg);
}
.gracias-hero__note {
  max-width: 42ch;
  margin: var(--space-md) auto 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* ---- Botón de WhatsApp: verde de marca + ícono, grande ---- */
.gracias-wa {
  gap: 0.6em;
  min-height: 3.4rem;
  padding: 0 1.8rem;
  background: var(--verde-medio);
  color: #fff;
  font-size: 0.8rem;
}
.gracias-wa:hover {
  background: var(--verde-profundo);
}
.gracias-wa__icon {
  flex: none;
  width: auto;
  height: 1.5em;
}

/* ---- Pasos: la lista numerada de la landing + el CTA de WhatsApp debajo ---- */
.gracias-pasos__cta {
  margin-top: var(--space-lg);
}