/* ==========================================================================
   Templa — Landing page
   Design tokens extraídos de Figma (Templa Landing Page / página "Latest")
   Mobile-first. El breakpoint de escritorio es 900px.
   ========================================================================== */

:root {
  /* Color */
  --cream: #f5f2ed;
  --ink: #2b2b2b;
  --sage: #b9be9e;
  --sage-hover: #aab08c;
  /* Solo para rellenos y bordes: sobre el crema da 2.8:1, insuficiente para texto */
  --sage-dark: #8f956f;
  /* El mismo verde oscurecido hasta 4.6:1 sobre el crema. Es el que va en todo
     lo que se lee: eyebrows, "en línea", el "+" de la FAQ, el foco. */
  --sage-texto: #6b7050;
  --white: #ffffff;

  --line: rgba(43, 43, 43, 0.1);
  --line-strong: rgba(43, 43, 43, 0.16);
  --line-soft: rgba(43, 43, 43, 0.08);
  --line-media: rgba(43, 43, 43, 0.14);

  --ink-72: rgba(43, 43, 43, 0.72);
  /* El gris más claro que aún llega a 4.5:1 sobre el crema (da 4.8:1). Por
     debajo de este el texto deja de cumplir AA, así que cualquier cosa que se
     lea usa este o --ink-72, nunca menos. */
  --ink-68: rgba(43, 43, 43, 0.68);
  /* Los dos de abajo no llegan a AA: solo para adornos sin texto */
  --ink-40: rgba(43, 43, 43, 0.4);
  --ink-35: rgba(43, 43, 43, 0.35);
  --ink-05: rgba(43, 43, 43, 0.05);

  --cream-72: rgba(245, 242, 237, 0.72);
  --cream-40: rgba(245, 242, 237, 0.4);
  --cream-16: rgba(245, 242, 237, 0.16);

  /* Tipografía */
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace;

  /* Maquetación */
  /* Alto de la barra de chat de móvil. Manda este token, no el contenido: el
     hero le resta este valor a la pantalla para ocuparla entera. */
  --alto-barra-chat: 52px;

  /* Movimiento */
  --ease-entrada: cubic-bezier(0.22, 1, 0.36, 1);

  /* Deja animar hasta `auto`: lo necesita el despliegue del acordeón de la FAQ */
  interpolate-size: allow-keywords;

  /* Marcadores de imagen (se reemplazan por fotos reales) */
  --ph-light: repeating-linear-gradient(135deg, #ece7dd 0 11px, #f1ece3 11px 22px);
  --ph-dark: repeating-linear-gradient(135deg, #333333 0 11px, #2f2f2f 11px 22px);
}

/* --------------------------------------------------------------------------
   Tipografías
   Los mismos woff2 que servía Google Fonts, pero desde nuestro dominio.
   Pedírselos a fonts.googleapis.com costaba 750 ms de pintado bloqueado: era
   una hoja de estilos de OTRO origen (resolver DNS, TLS, descargar) y hasta que
   no llegaba, el navegador ni sabía qué woff2 pedir. Declarados aquí, en la
   hoja que ya bloquea, las fuentes arrancan en cuanto se lee este archivo.

   Solo el subconjunto latino: es el que cubre el español. Si algún día entra
   texto en cirílico o griego habrá que bajar esos subconjuntos aparte.

   Manrope es una fuente variable: un único archivo cubre de 200 a 800, así que
   los pesos 400/500/600/700 que usa la página salen todos de aquí.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

/* Las fotos van envueltas en <picture> para poder ofrecer AVIF con respaldo en
   JPEG/PNG. `display: contents` hace que la envoltura no genere caja: la que
   sigue colocándose en la retícula (o en el flex) es la propia <img>, que es
   donde viven las clases de maquetación. Sin esto habría que mover cada clase
   al <picture> y duplicar reglas por breakpoint. */
picture {
  display: contents;
}

/* Y esto es imprescindible con la regla de arriba. <source> no lleva
   `display: none` de fábrica: no se ve porque dentro de un <picture> normal
   (que es inline) genera una caja vacía de tamaño cero. Al volver el <picture>
   transparente, sus <source> pasan a ser hijos directos de la retícula o del
   flex, se convierten en bloques vacíos y ocupan celda y hueco: el hero se
   partía en dos filas y las demás secciones crecían un gap de más. */
picture > source {
  display: none;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--sage-texto);
  outline-offset: 3px;
}

/* El atributo hidden manda sobre cualquier display declarado más abajo */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Utilidades de breakpoint */
.only-desktop {
  display: none;
}

.only-mobile {
  display: initial;
}

/* --------------------------------------------------------------------------
   Animaciones de entrada
   Cada elemento aparece al entrar en pantalla: opacidad, un desplazamiento
   corto hacia arriba y un desenfoque que se disuelve. js/main.js es quien
   añade .is-visible, y solo una vez por elemento.

   El estado oculto cuelga de la clase .anima-lista, que main.js pone en <html>
   al arrancar: si el JavaScript no corre, no se esconde nada.
   -------------------------------------------------------------------------- */

/* El estado oculto depende de la clase que main.js pone en <html> al arrancar.
   Antes dependía de @media (scripting: enabled), que solo dice "hay JavaScript"
   —no que ESTE archivo se haya ejecutado—. Con una copia vieja de main.js en
   caché o una descarga fallida, nadie añadía .is-visible y la página entera se
   quedaba invisible. Atado a la clase, si el JS no corre no se esconde nada. */
.anima-lista .anima {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
}

/* Imágenes: recorrido y desenfoque mayores */
.anima-lista .anima--media {
  transform: translateY(24px);
  filter: blur(10px);
}

/* Detalles pequeños (pills, notas al pie): apenas se mueven */
.anima-lista .anima--sutil {
  transform: translateY(6px);
  filter: blur(4px);
}

/* .anima--cta no pinta nada aquí: solo marca el botón (o el formulario) de cada
   sección para que js/main.js retrase su entrada hasta después del texto. */

/* La transición cuelga del estado final, no del elemento: así solo se anima la
   ENTRADA. Cuando estaba en .anima, esconder también se animaba — y si
   .anima-lista llegaba tarde, con la página ya pintada, el contenido se
   desvanecía hacia fuera justo cuando main.js lo mandaba entrar: las dos
   transiciones se comían entre sí y no se veía nada. Atada a .is-visible,
   esconder es instantáneo y entrar es lo único que se anima. */
.anima.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 0.65s var(--ease-entrada),
    transform 0.65s var(--ease-entrada),
    filter 0.65s var(--ease-entrada);
}

/* Después del atajo de arriba, que si no le reimpondría los 0.65s */
.anima--media.is-visible {
  transition-duration: 0.85s;
}

/* Va al final para ganarle a los estados de arriba. El selector lleva
   .anima-lista para empatar en especificidad con ellos y quedar por encima. */
@media (prefers-reduced-motion: reduce) {
  .anima-lista .anima,
  .anima {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Salto a la lista de espera
   Todos los botones apuntan a #acceso. Quien conduce el desplazamiento es
   js/main.js; lo de aquí es el respaldo si no corre, el aire que deja el ancla
   por arriba y el destello del campo al llegar.
   -------------------------------------------------------------------------- */

html {
  /* Respaldo sin JavaScript: el salto del navegador también va suave */
  scroll-behavior: smooth;
}

.lanzamiento {
  /* Sin esto la cápsula queda pegada al borde superior de la ventana */
  scroll-margin-top: 20px;
}

/* Un anillo salvia que crece y se apaga: señala dónde escribir sin mover nada
   de sitio. La clase la pone y la quita main.js en cada clic. */
.lanzamiento__form.destella .signup__field {
  animation: destello-campo 1.1s var(--ease-entrada);
}

@keyframes destello-campo {
  0% {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 0 rgba(143, 149, 111, 0);
  }
  28% {
    /* Aquí sí el salvia claro: el borde acompaña al halo, que es del mismo tono */
    border-color: var(--sage-dark);
    box-shadow: 0 0 0 7px rgba(143, 149, 111, 0.22);
  }
  100% {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 0 rgba(143, 149, 111, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .lanzamiento__form.destella .signup__field {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* El hero gestiona su propio margen lateral en móvil (18px, no 24px) */
.wrap--flush {
  padding-inline: 0;
}

/* En tablets no dejamos que el layout móvil se estire de más */
@media (min-width: 620px) and (max-width: 899px) {
  .wrap {
    max-width: 620px;
  }
}

/* --------------------------------------------------------------------------
   Cabeceras
   -------------------------------------------------------------------------- */

/* Cabecera de escritorio: logo + CTA */
.site-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-block: 26px;
}

.site-header__logo img {
  width: 70.38px;
  height: 24px;
}

.site-header__back {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.52px;
  text-decoration: none;
}

.site-header__back:hover {
  color: var(--sage-texto);
}

/* Cabecera móvil: barra de chat.
   Deliberadamente compacta: en móvil cada píxel de aquí empuja el campo de
   correo hacia abajo, y el objetivo es que quepa en la primera pantalla. */
.chat-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--alto-barra-chat);
  padding: 9px 18px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--cream);
}

.chat-topbar__more {
  font-size: 20px;
  line-height: 1;
  color: var(--ink-35);
}

/* Identidad del chat (compartida entre la barra móvil y el panel de escritorio) */
.chat-id {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
  min-width: 0;
}

.chat-id__avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sage);
  overflow: hidden;
}

.chat-id__avatar img {
  width: 20px;
  height: 6.82px;
}

.chat-id__name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 17px;
}

.chat-id__status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1.5px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--sage-texto);
}

.chat-id__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage-texto);
}

/* Variante de escritorio: vive dentro del panel del hero */
.chat-id--panel {
  display: none;
  gap: 14px;
  max-width: 540px;
  padding-bottom: 23px;
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Burbujas de chat
   -------------------------------------------------------------------------- */

.chat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 18px 12px;
}

.msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* Mensajes de seguimiento: se alinean bajo la burbuja anterior */
.msg--cont {
  padding-left: 34px;
}

.msg--out {
  justify-content: flex-end;
}

.msg__avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sage);
  overflow: hidden;
}

.msg__avatar img {
  width: 16px;
  height: 5.45px;
}

.msg__avatar-letter {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
}

.bubble {
  max-width: 275px;
  padding: 11.5px 16px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 5px;
  background: var(--white);
  font-size: 14.5px;
  line-height: 21px;
}

.bubble--dark {
  padding: 11px 15px;
  border-color: transparent;
  background: var(--ink);
  color: var(--cream);
  font-weight: 500;
}

.bubble--out {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border-color: transparent;
  border-radius: 18px 18px 5px 18px;
  background: var(--sage);
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
}

.bubble--out .bubble__check {
  opacity: 0.6;
}

/* Burbuja que contiene una imagen */
.bubble--media {
  width: 178px;
  padding: 5px;
  overflow: hidden;
}

.bubble--media-wide {
  width: 202px;
}

.bubble--media .ph {
  border: 0;
  border-radius: 14px;
}

/* --------------------------------------------------------------------------
   Imágenes
   La clase .ph define proporción y radio por breakpoint, y sirve tanto para un
   <img> real como para el marcador rayado que lo sustituye mientras no hay foto.
   -------------------------------------------------------------------------- */

.ph {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ph-ratio, 4 / 5);
  border: 1px solid var(--line-media);
  border-radius: 16px;
  background: var(--ph-light);
}

/* Foto real: llena el marco recortando por el centro, sin deformarse. El
   encuadre fino de cada una se ajusta con --ph-foco (ver más abajo).
   Ojo: aquí no se declara `display`. Este selector pesa más que las clases de
   una sola palabra, y declararlo desactivaría los `display: none` que ocultan
   imágenes por breakpoint (.hero__media, .only-mobile). */
img.ph {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center var(--ph-foco, 50%);
}

.ph__label {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 1.54px;
  color: var(--ink-40);
  text-align: center;
}

.ph--dark {
  border-color: var(--cream-16);
  background: var(--ph-dark);
}

.ph--dark .ph__label {
  color: var(--cream-40);
}

/* Proporciones por sección. Cada una sigue la orientación de su foto: el
   producto es horizontal (3:2 exactos, no se recorta) y los dos perros son
   verticales. --ph-foco mueve el recorte para no cortar lo que importa. */

.ph--hero {
  --ph-ratio: 3 / 2;
}

.ph--problema {
  --ph-ratio: 4 / 5;
  /* Alto en el encuadre: conserva la cara del perro sobre el peluche roto */
  --ph-foco: 34%;
}

/* Detalle del collar: es horizontal y ya viene encuadrada, así que usamos su
   proporción exacta para no recortarle el logo grabado. */
.ph--solucion {
  /* Su proporción exacta, en los dos breakpoints. En móvil se recortaba a 16/9
     para agrandar el logo, pero ese recorte le comía las esquinas a la tira, y
     sin marco que las tapara se notaba. La foto ya viene encuadrada en banda,
     así que no hace falta recortarla otra vez. */
  --ph-ratio: 1400 / 606;

  /* Sin fondo: nada de marco ni de fondo rayado, que el collar flote. */
  border: 0;
  border-radius: 0;
  background: none;
}

.ph--pasos {
  --ph-ratio: 4 / 5;
  /* El collar está a media altura: subimos el foco para que salga con la cara */
  --ph-foco: 42%;
}

.ph--cta {
  --ph-ratio: 340 / 212.5;
}

.ph--gracias {
  --ph-ratio: 4 / 5;
  --ph-foco: 42%;
}

/* --------------------------------------------------------------------------
   Botones y campos
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border: 0;
  border-radius: 100px;
  background: var(--sage);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s var(--ease-entrada);
}

.btn:hover {
  background: var(--sage-hover);
}

/* La subida solo donde hay puntero: en táctil el :hover se queda pegado */
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
  }
}

/* Se hunde al pulsar: el clic se siente de inmediato, antes de que arranque el
   desplazamiento. Va después del :hover para ganarle — empatan en peso. */
.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.09s;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: background 0.2s ease;
  }

  .btn:hover,
  .btn:active {
    transform: none;
  }
}

.btn--sm {
  padding: 12px 22px;
  font-size: 13px;
  letter-spacing: 0.52px;
}

.btn--block {
  width: 100%;
}

/* Campo con botón circular incrustado (hero) */
.field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 7px 7px 19px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 8px 24px -14px rgba(43, 43, 43, 0.4);
}

.field__code {
  flex-shrink: 0;
  padding-right: 8px;
  border-right: 1px solid var(--line-strong);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-72);
}

.field__input {
  flex: 1 0 0;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 500;
}

.field__input::placeholder {
  color: var(--ink-40);
  opacity: 1;
}

.field__input:focus {
  outline: 0;
}

.field__send {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sage);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.field__send:hover {
  background: var(--sage-hover);
}

/* Campo suelto + botón aparte (sección de acceso anticipado) */
.signup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Envoltorio con la pill que antes tenía el input solo: ahora contiene el
   código de país y el número, como dos campos dentro de un mismo borde. */
.signup__field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 21px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--white);
}

.signup__code {
  flex-shrink: 0;
  padding: 16px 8px 16px 0;
  border: 0;
  border-right: 1px solid var(--line-strong);
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-72);
}

.signup__input {
  flex: 1 0 0;
  min-width: 0;
  padding: 16px 0;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 500;
}

.signup__input::placeholder {
  color: var(--ink-40);
  opacity: 1;
}

.form-note {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--ink-68);
}

/* --------------------------------------------------------------------------
   Tipografía de secciones
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 3.3px;
  text-transform: uppercase;
  color: var(--sage-texto);
}

.eyebrow--on-dark {
  color: var(--sage);
}

/* Eyebrow dentro de una cápsula. Se combina con .eyebrow, de donde hereda el
   tamaño y el interletrado. La usan las secciones centradas. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--white);
}

.pill__punto {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage-texto);
  /* Late despacio, como el "en línea" de un chat: solo sube y baja la
     intensidad del verde, sin cambiar de tamaño ni desplazar el texto. */
  animation: pill-latido 2.4s ease-in-out infinite;
}

/* Sin fotogramas en 0% y 100%: el navegador usa la opacidad real del punto,
   así que el ciclo va de opaco a apagado y vuelve, sin saltos. */
@keyframes pill-latido {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill__punto {
    animation: none;
  }
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 36.48px;
  letter-spacing: -0.02em;
}

/* Titular grande en serif y mayúsculas, centrado. Cada sección le pone su
   tamaño; aquí vive todo lo demás. */
.titulo-display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* inline-block mantiene cada frase en cursiva como una unidad al saltar de
   línea, que es como se corta el titular en Figma */
.section-title em {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.125em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.section-title em.is-sage {
  color: var(--sage-texto);
}

.lede {
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-72);
}

.lede--on-dark {
  color: var(--cream-72);
}

.statement {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 26.6px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* En móvil el hero ocupa la pantalla completa: el alto de la ventana menos la
   barra de chat, que va justo encima. `svh` es el alto con las barras del
   navegador desplegadas, así que el formulario nunca queda debajo de ellas.
   En escritorio el alto lo marca el contenido (ver el bloque de 900px). */
.hero__grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--alto-barra-chat));
  min-height: calc(100svh - var(--alto-barra-chat));
}

.hero__media {
  display: none;
}

.hero__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 18px 20px;
}

.hero__form .form-note {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Redes
   Banda corta bajo el hero: un eyebrow y las cuentas en cápsulas blancas.
   -------------------------------------------------------------------------- */

.redes {
  padding-block: 18px 44px;
}

.redes__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.redes__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.red {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--white);
  box-shadow: 0 8px 24px -18px rgba(43, 43, 43, 0.4);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  /* Solo el borde: el desplazamiento y el desenfoque los gobierna .anima, que
     vive en el <li> para no pisarse con esta transición. */
  transition: border-color 0.2s ease;
}

.red:hover {
  border-color: var(--sage-texto);
}

.red__icono {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  color: var(--sage-texto);
}

/* --------------------------------------------------------------------------
   Sección "El problema" (fondo oscuro)
   -------------------------------------------------------------------------- */

.problema {
  background: var(--ink);
  color: var(--cream);
}

.problema__grid,
.solucion__intro,
.cta__grid {
  display: flex;
  flex-direction: column;
}

.problema__grid {
  gap: 18px;
  padding-block: 56px;
}

.problema__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.problema .btn {
  align-self: center;
}

/* --------------------------------------------------------------------------
   Sección "La solución"
   -------------------------------------------------------------------------- */

.solucion {
  padding-block: 56px;
}

.solucion__grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.solucion__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 12px;
}

.feature + .feature {
  padding-top: 19px;
  border-top: 1px solid var(--line-strong);
}

.feature__title {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 23.4px;
}

.feature__text {
  font-size: 14.5px;
  line-height: 23.2px;
  color: var(--ink-72);
}

.solucion .btn {
  align-self: center;
}

/* --------------------------------------------------------------------------
   Pasos 01 / 02 / 03
   -------------------------------------------------------------------------- */

.pasos {
  padding-bottom: 56px;
}

.pasos__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 18px;
}

.step + .step {
  padding-top: 19px;
  border-top: 1px solid var(--line-strong);
}

.step__num {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  /* El salvia claro sobre el crema se queda en 1.7:1 y el número deja de leerse.
     Aquí no vale ni --sage-dark: a 30px hace falta 3:1 como mínimo. */
  color: var(--sage-texto);
}

.step__title {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 22.1px;
}

.step__text {
  margin-top: 5.4px;
  font-size: 14px;
  line-height: 21.7px;
  color: var(--ink-68);
}

.pasos .btn {
  align-self: center;
}

/* --------------------------------------------------------------------------
   Acceso anticipado (CTA final)
   -------------------------------------------------------------------------- */

.cta__grid {
  gap: 12px;
  padding-block: 56px 36px;
}

.cta__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
}

.cta__title {
  font-size: 36px;
  line-height: 40.32px;
}

.cta__form {
  padding-top: 10px;
}

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   Acordeón con <details>/<summary>: abre y cierra sin JavaScript. El signo de
   la derecha es un + que gira 45° hasta volverse ×.

   Solo una abierta a la vez: lo hace el atributo name="faq" del HTML, que
   agrupa los <details> y deja que el navegador cierre el anterior.
   -------------------------------------------------------------------------- */

.faq__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-bottom: 56px;
  text-align: center;
}

.faq__titulo {
  font-size: 34px;
}

.faq__lista {
  width: 100%;
  max-width: 720px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition: color 0.2s ease;
  /* Quita el triángulo del navegador: el nuestro va en ::after */
  list-style: none;
}

.faq__pregunta::-webkit-details-marker {
  display: none;
}

.faq__pregunta::after {
  content: "+";
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--sage-texto);
  transition: transform 0.25s var(--ease-entrada);
}

@media (hover: hover) {
  .faq__pregunta:hover {
    color: var(--sage-texto);
  }
}

.faq__item[open] .faq__pregunta {
  color: var(--sage-texto);
}

.faq__item[open] .faq__pregunta::after {
  transform: rotate(45deg);
}

/* La apertura se despliega en vez de aparecer de golpe. `interpolate-size`
   (en :root) es lo que permite animar hasta `auto`, y `allow-discrete` mantiene
   el contenido visible mientras se repliega. Donde no haya soporte para
   ::details-content, el acordeón abre de golpe: se pierde el movimiento, nunca
   el contenido. */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.34s var(--ease-entrada),
    content-visibility 0.34s allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
}

.faq__respuesta {
  max-width: 62ch;
  padding-bottom: 19px;
  font-size: 14.5px;
  line-height: 23.2px;
  color: var(--ink-72);
}

/* El texto entra un poco después que la altura, para que no se lea a medio
   desplegar */
.faq__item[open] .faq__respuesta {
  animation: faq-abrir 0.3s var(--ease-entrada) 0.06s backwards;
}

@keyframes faq-abrir {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}

.faq__btn {
  margin-top: 30px;
}

@media (prefers-reduced-motion: reduce) {
  .faq__pregunta::after,
  .faq__item::details-content {
    transition: none;
  }

  .faq__item[open] .faq__respuesta {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Lanzamiento (lista de espera)
   Sustituye a la sección de acceso anticipado: un único bloque centrado —
   pill, titular, contador, formulario y beneficios — sin imagen que compita
   con el campo de correo.
   -------------------------------------------------------------------------- */

/* Cierra la página con aire: al menos el 80% de la pantalla en los dos anchos,
   con el bloque centrado si sobra sitio. */
.lanzamiento__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 80vh;
  min-height: 80svh;
  max-width: 600px;
  padding-block: 56px 44px;
  text-align: center;
}

.lanzamiento__titulo {
  font-size: 41px;
}

.lanzamiento__lede {
  max-width: 34ch;
  text-wrap: balance;
}

.progreso {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 500px;
  padding-top: 6px;
}

.progreso__cifras {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--ink-68);
}

.progreso__cifras strong {
  display: inline-block;
  font-weight: 700;
  color: var(--ink);
}

/* Pulso breve que main.js dispara en cada incremento del contador. */
.progreso__cifras strong.progreso__cifra--sube {
  animation: progreso-sube 0.45s ease;
}

@keyframes progreso-sube {
  35% {
    transform: scale(1.22);
    color: var(--sage-texto);
  }
}

@media (prefers-reduced-motion: reduce) {
  .progreso__cifras strong.progreso__cifra--sube {
    animation: none;
  }
}

.progreso__barra {
  overflow: hidden;
  height: 8px;
  border-radius: 100px;
  background: var(--line);
}

/* El ancho llega desde --progreso, declarado en el HTML junto al dato. La
   transición es lo que hace visible cada incremento que main.js va aplicando
   mientras la persona sigue en la página. */
.progreso__relleno {
  display: block;
  width: var(--progreso, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--sage-texto);
  transition: width 0.6s ease;
}

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

.beneficios {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 2px 0 0;
  list-style: none;
}

.beneficios__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--ink-68);
}

.beneficios__item::before {
  content: "✓";
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--sage-texto);
}

/* --------------------------------------------------------------------------
   Página de agradecimiento
   -------------------------------------------------------------------------- */

/* Es una página corta: el pie se ancla abajo en pantallas altas */
.gracias {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.gracias main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.gracias__media {
  display: none;
}

.gracias__chat .chat {
  padding-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 29px 28px;
}

.site-footer__logo img {
  width: 58.64px;
  height: 20px;
}

.site-footer__tagline {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-68);
}

.site-footer__copy {
  padding-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-68);
}

/* ==========================================================================
   Escritorio — a partir de 900px
   ========================================================================== */

@media (min-width: 900px) {
  .only-desktop {
    display: initial;
  }

  .only-mobile {
    display: none;
  }

  .wrap,
  .wrap--flush {
    padding-inline: 56px;
  }

  /* --- Cabeceras --- */

  .chat-topbar {
    display: none;
  }

  .site-header {
    display: flex;
  }

  .chat-id--panel {
    display: flex;
  }

  .chat-id--panel .chat-id__avatar {
    width: 52px;
    height: 52px;
  }

  .chat-id--panel .chat-id__avatar img {
    width: 32px;
    height: 10.91px;
  }

  .chat-id--panel .chat-id__name {
    font-size: 20px;
    line-height: 24px;
  }

  .chat-id--panel .chat-id__status {
    margin-top: 4px;
    font-size: 13px;
  }

  .chat-id--panel .chat-id__dot {
    width: 8px;
    height: 8px;
  }

  /* --- Chat --- */

  .chat {
    gap: 12px;
    max-width: 540px;
    padding: 12px 0 8px;
  }

  .msg--media {
    display: none;
  }

  .msg {
    gap: 10px;
  }

  .msg--cont {
    padding-left: 44px;
  }

  .msg__avatar {
    width: 34px;
    height: 34px;
  }

  .bubble {
    max-width: 420px;
    padding: 14px 19px;
    border-radius: 20px 20px 20px 6px;
    font-size: 15px;
    line-height: 22.5px;
  }

  .bubble--compact {
    font-size: 14.5px;
    line-height: 21px;
  }

  .bubble--dark {
    padding: 13px 18px;
  }

  .bubble--out {
    gap: 8px;
    padding: 11px 18px;
    border-radius: 20px 20px 6px 20px;
    font-size: 15px;
    line-height: 21px;
  }

  /* --- Imágenes --- */

  .ph {
    border-radius: 20px;
  }

  .ph__label {
    font-size: 12px;
    letter-spacing: 1.68px;
  }

  .ph--problema {
    --ph-ratio: 4 / 5;
  }

  .ph--solucion {
    /* La proporción ya viene de la regla base. Aquí solo hace falta deshacer el
       radio de 20px que .ph pone unas líneas más arriba. */
    border-radius: 0;
  }

  .ph--pasos {
    /* Columna derecha, a lo alto: la dejamos más estirada que en móvil para que
       acompañe la altura de los tres pasos. */
    --ph-ratio: 3 / 4;
  }

  .ph--cta {
    --ph-ratio: 1 / 1;
  }

  .ph--gracias {
    --ph-ratio: 557.65 / 659.06;
  }

  /* --- Botones y campos --- */

  .btn {
    padding: 16px 26px;
    letter-spacing: 0.28px;
  }

  .btn--sm {
    padding: 12px 22px;
    letter-spacing: 0.52px;
  }

  .field {
    max-width: 540px;
    padding: 9px 9px 9px 23px;
    gap: 10px;
  }

  .field__send {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }

  .signup {
    flex-direction: row;
    gap: 10px;
    max-width: 500px;
  }

  .signup__field {
    flex: 1 0 0;
    min-width: 0;
    padding: 0 23px;
  }

  .signup__code {
    padding: 17px 8px 17px 0;
  }

  .signup__input {
    padding: 17px 0;
  }

  .signup .btn {
    padding: 20.25px 26px;
  }

  .form-note {
    font-size: 13px;
    line-height: 19.5px;
  }

  /* --- Tipografía --- */

  .eyebrow {
    font-size: 12px;
    letter-spacing: 3.84px;
  }

  .section-title {
    font-size: 52px;
    line-height: 57.2px;
  }

  .section-title em {
    font-size: 1.096em;
  }

  .lede {
    max-width: 540px;
  }

  .statement {
    font-size: 22px;
    line-height: 30.8px;
  }

  /* --- Hero --- */

  .hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: 56px;
    align-items: center;
    /* Aquí el alto lo pone el contenido: la pantalla completa es cosa de móvil */
    min-height: 0;
    padding-block: 56px 84px;
  }

  .hero__panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    grid-column: 1;
  }

  .hero__form {
    gap: 14px;
    padding: 0;
  }

  .hero__form .form-note {
    text-align: left;
  }

  .hero__media {
    display: grid;
    grid-column: 2;
  }

  /* --- Redes --- */

  .redes {
    /* El hero ya deja 84px por debajo: aquí solo hace falta el aire de salida */
    padding-block: 0 84px;
  }

  .redes__lista {
    gap: 14px;
  }

  .red {
    padding: 14px 24px;
    font-size: 15px;
  }

  .red__icono {
    width: 20px;
    height: 20px;
  }

  /* --- El problema --- */

  .problema__grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    column-gap: 56px;
    align-items: center;
    padding-block: 96px;
  }

  .problema__body {
    grid-column: 1;
    grid-row: 1;
    gap: 26px;
  }

  .problema__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .problema .btn {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    margin-top: 26px;
  }

  /* --- La solución --- */

  .solucion {
    padding-block: 96px;
  }

  .solucion__grid {
    gap: 44px;
  }

  .solucion__body {
    gap: 26px;
    max-width: 820px;
  }

  .features {
    flex-direction: row;
    gap: 40px;
    padding-top: 12px;
  }

  .feature {
    flex: 1 0 0;
    min-width: 0;
    padding-top: 27px;
    border-top: 1px solid var(--line-strong);
  }

  .feature + .feature {
    padding-top: 27px;
  }

  .feature__title {
    margin-bottom: 12px;
    font-size: 22px;
    line-height: 28.6px;
  }

  .feature__text {
    font-size: 17px;
    line-height: 28px;
  }

  /* --- Pasos --- */

  .pasos {
    padding-bottom: 96px;
  }

  /* Dos columnas: los pasos apilados a la izquierda y la foto, vertical, a la
     derecha. El botón queda debajo de los pasos, no debajo de la foto. */
  .pasos__grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    column-gap: 56px;
    row-gap: 32px;
    align-items: center;
  }

  .steps {
    grid-column: 1;
    grid-row: 1;
    gap: 26px;
    padding-top: 0;
  }

  .step {
    padding-top: 25px;
    border-top: 1px solid var(--line-strong);
  }

  .step + .step {
    padding-top: 25px;
  }

  .pasos__media {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .step__num {
    font-size: 34px;
  }

  .step__title {
    margin-top: 16px;
    font-size: 19px;
    line-height: 24.7px;
  }

  .step__text {
    margin-top: 8px;
    font-size: 15px;
    line-height: 24px;
  }

  .pasos .statement {
    grid-column: 1;
    grid-row: 2;
    padding-top: 12px;
    font-size: 24px;
    line-height: 33.6px;
  }

  .pasos .btn {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
  }

  /* --- Acceso anticipado --- */

  .cta__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    column-gap: 56px;
    align-items: center;
    padding-block: 96px 40px;
  }

  .cta__body {
    grid-column: 1;
    grid-row: 1;
    gap: 14px;
    max-width: 620px;
    padding-top: 0;
  }

  .cta__media {
    grid-column: 2;
    grid-row: 1;
  }

  .cta__title {
    font-size: 56px;
    line-height: 60.48px;
  }

  .cta__body .lede {
    max-width: none;
    padding-top: 8px;
    font-size: 18px;
    line-height: 28.8px;
  }

  .cta__form {
    padding-top: 20px;
  }

  /* --- Preguntas frecuentes --- */

  .faq__grid {
    gap: 18px;
    padding-bottom: 96px;
  }

  .faq__titulo {
    font-size: 56px;
  }

  .faq__lista {
    margin-top: 22px;
  }

  .faq__pregunta {
    padding: 22px 0;
    font-size: 18px;
  }

  .faq__pregunta::after {
    font-size: 26px;
  }

  .faq__respuesta {
    padding-bottom: 24px;
    font-size: 16px;
    line-height: 26px;
  }

  .faq__btn {
    margin-top: 40px;
  }

  /* --- Lanzamiento --- */

  .lanzamiento__grid {
    gap: 20px;
    max-width: 720px;
    padding-block: 96px 80px;
  }

  .lanzamiento__titulo {
    font-size: 68px;
    line-height: 1.04;
  }

  .lanzamiento__lede {
    max-width: none;
    font-size: 18px;
    line-height: 28.8px;
  }

  .progreso {
    gap: 10px;
    padding-top: 10px;
  }

  .progreso__cifras {
    font-size: 14px;
  }

  .beneficios {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    padding-top: 6px;
  }

  .beneficios__item {
    font-size: 14px;
  }

  /* --- Página de agradecimiento --- */

  .gracias__grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    column-gap: 56px;
    align-items: center;
    padding-block: 12px;
  }

  /* El cuerpo de agradecimiento usa un margen lateral menor que el resto */
  .gracias__wrap {
    padding-inline: 24px;
  }

  /* Centrado vertical en el espacio libre entre cabecera y pie. Con margin
     auto (y no justify-content) el contenido nunca queda cortado por arriba
     cuando la ventana es más baja que el propio contenido. */
  .gracias__grid {
    margin-block: auto;
  }

  .gracias__media {
    display: grid;
    grid-column: 1;
  }

  .gracias__chat {
    grid-column: 2;
  }

  .gracias__chat .chat {
    padding-top: 26px;
  }

  /* --- Pie --- */

  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 33px 32px;
  }

  .site-footer__brand {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .site-footer__logo img {
    width: 64.51px;
    height: 22px;
  }

  .site-footer__copy {
    padding-top: 0;
    font-size: 13px;
  }
}