/* ------------------------------------------------------------------
   GymProFit — hoja de la beta (/beta y /beta/dentro), GP-201
   Quien llega aquí viene de un vídeo de TikTok o Instagram, así que la
   paleta es la de los vídeos (src/lib/marca.ts del repositorio de
   marketing), no la de la app: naranja #E8710A, dorado #CBA135 y texto
   #F5F1EA sobre #0B0C0E. Es una página de llegada, no una pantalla de
   la app; lo que tiene que reconocer es el vídeo del que viene.
   Sin JavaScript: todo el movimiento es CSS, y solo entra con
   prefers-reduced-motion: no-preference. Sin esa preferencia la página
   se pinta quieta y completa, porque el estado final es el de partida.
   Desde GP-205 vive en el mismo mundo que la portada (web/DISENO.md): la
   tela de fondo, el formulario como dorsal (el único panel claro), los
   pasos como tira troquelada y las mismas curvas, sin rebotes ni nada que
   se mueva sin parar. La paleta sigue siendo la de los vídeos.
   ------------------------------------------------------------------ */

/* Los mismos ficheros que estilo.css, servidos desde el dominio (ver README). */
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fuentes/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fuentes/barlow-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fuentes/barlow-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --fondo:     #0B0C0E;
  --panel:     #15161A;
  --linea:     #2C2D33;
  --borde-campo: #6E6A62; /* el borde de un campo: 3,6:1 sobre el fondo (WCAG 1.4.11) */
  --naranja:   #E8710A;
  --dorado:    #CBA135;
  --texto:     #F5F1EA;
  --texto-2:   #ABA59B;   /* 8,0:1 sobre el fondo */
  --enlace:    #F08A2E;   /* el naranja como texto: 7,8:1 sobre el fondo */
  --sobre-naranja: #0B0C0E; /* 6,3:1 sobre el naranja */
  --luz:       rgba(232, 113, 10, 0.2);   /* tenue, como la de la portada: luz, no foco */
  --tela:      var(--fondo); /* el color que se ve por las muescas del troquel */
  --punto:     0.07;         /* cuánto se ve el punto de la tela */

  /* El dorsal: el formulario es el único panel claro, en el crema de los vídeos */
  --dorsal:      #F5F1EA;
  --dorsal-campo:#FFFFFF;
  --tinta:       #0B0C0E;   /* 17:1 sobre el crema */
  --tinta-2:     #57524A;   /* 6,9:1 sobre el crema */
  --tinta-enlace:#A44700;   /* 5,4:1 sobre el crema */
  --tinta-borde: #8A8378;   /* el borde de un campo: 3,3:1 sobre el crema */
  --sombra:      rgba(0, 0, 0, 0.55);

  --sans: "Barlow", sans-serif;
  --cond: "Barlow Condensed", var(--sans);

  /* Las curvas de la portada (DISENO.md): entrar deprisa y posarse, sin rebote */
  --frenada: cubic-bezier(0.23, 1, 0.32, 1);
  --tela-curva: cubic-bezier(0.32, 0.72, 0, 1);

  --margen: 20px;
  /* Ancho que llena el titular: el de la pantalla en móvil */
  --ancho-titular: calc(100vw - 2 * var(--margen));
}

/* En claro, el texto de los vídeos pasa a ser el fondo. El naranja de marca
   no se lee como texto sobre crema (2,7:1), así que los enlaces usan uno más
   oscuro; el botón sigue siendo el naranja de siempre con letra oscura. */
@media (prefers-color-scheme: light) {
  :root {
    --fondo:   #F5F1EA;
    --panel:   #FFFFFF;
    --linea:   #DDD6CA;
    --borde-campo: #8A8378; /* 3,3:1 sobre el fondo */
    --texto:   #0B0C0E;
    --texto-2: #57524A;   /* 6,9:1 sobre el fondo */
    --enlace:  #A44700;   /* 5,4:1 sobre el fondo */
    --dorado:  #9C7A1F;
    --luz:     rgba(232, 113, 10, 0.14);
    --punto:   0.10;
    /* En claro el dorsal es blanco sobre el crema, y se separa por una sombra cálida */
    --dorsal:      #FFFFFF;
    --dorsal-campo:#F5F1EA;
    --tinta-borde: #7E776C;   /* 3,6:1 sobre el blanco y 3,2:1 sobre el crema */
    --sombra:      rgba(70, 45, 20, 0.34);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* La tela, como en la portada: el punto de una camiseta técnica en una capa
   fija y sin puntero, que no se repinta al desplazar */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before { background: url("/img/tela.webp") 0 0 / 96px 96px; }
body::after { background: var(--fondo); opacity: calc(1 - var(--punto)); }
@media (prefers-color-scheme: light) {
  body::before { filter: invert(1); }
}

a { color: var(--enlace); text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 3px solid var(--texto);
  outline-offset: 4px;
  border-radius: 4px;
}

.marco {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--margen);
}

/* La franja de 4 px de la web y los correos (DEC-026), aquí en el naranja de los vídeos */
.franja { height: 4px; background: var(--naranja); }

/* ── Primer pantallazo ───────────────────────────────────────────── */

.portada {
  position: relative;
  padding: 16px 0 0;
}

.firma {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  text-decoration: none;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
}
.firma img { position: relative; width: 36px; height: 36px; display: block; }

/* La luz detrás del logo: un degradado radial, sin imagen, quieto. Desborda
   hacia el titular a propósito: es la única luz de la página, alta y a la izquierda. */
.luz {
  position: absolute;
  left: -90px;
  top: -100px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--luz), transparent);
  pointer-events: none;
}

.titular {
  position: relative;
  margin: 14px 0 0;
  container-type: inline-size;
  font-family: var(--cond);
  font-weight: 700;
  line-height: 0.83;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* Cada línea llena el ancho por su cuenta: --k es el ancho de esa línea en
   em, medido en el navegador. Las tres miden lo mismo y tienen tamaños distintos.
   El tamaño sale del ancho real de la columna (cqi), con un 4 % de holgura para el
   trazo de las letras, y acotado; el primer font-size es el respaldo sin cqi. */
.titular span {
  display: block;
  font-size: clamp(26px, calc(var(--ancho-titular) * 0.96 / var(--k)), 280px);
  font-size: clamp(26px, calc(96cqi / var(--k)), 280px);
  white-space: nowrap;
}

/* El tajo del logo, debajo de la última línea */
.tajo {
  display: block;
  width: 38%;
  height: 6px;
  margin: 8px 0 0 4px;
  background: var(--naranja);
  transform: skewX(-32deg);
  transform-origin: left center;
}

.entrada {
  max-width: 34em;
  margin: 22px 0 0;
  font-size: 19px;
  color: var(--texto-2);
}
.entrada strong { color: var(--texto); font-weight: 600; }

/* La línea de debajo del titular en /beta: qué es y para quién, en una frase */
.linea {
  max-width: 30em;
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--texto-2);
}

.boton {
  position: relative;
  border: 0;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  min-width: 220px;
  padding: 0 34px;
  border-radius: 999px;
  background: var(--naranja);
  color: var(--sobre-naranja);
  font-family: var(--cond);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 140ms var(--frenada), background-color 160ms var(--frenada);
}
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: #F58220; }
}
.boton:active { transform: scale(0.97); }
.boton:focus-visible { outline-color: var(--texto); }


/* ── El formulario ───────────────────────────────────────────────── */
/* Nuestro, enviado por POST normal a Brevo (DEC-050). La validación es la del
   navegador: el correo con type="email" y la casilla con required. */

/* El dorsal: el formulario es el único panel claro de la página, con la banda
   naranja, los ojales y el troquel de la portada. No se anima ni se gira: se
   ve recto desde el primer fotograma. No puede crecer: a 375 × 667 tiene que
   caber entero en el primer pantallazo, así que la banda ocupa el relleno de
   arriba y el troquel va en el hueco que ya había sobre el botón.
   Dentro, los colores del texto son los de la tinta del dorsal. */
.alta {
  --texto:   var(--tinta);
  --texto-2: var(--tinta-2);
  --enlace:  var(--tinta-enlace);
  --borde-campo: var(--tinta-borde);
  --fondo:   var(--dorsal-campo);
  position: relative;
  display: grid;
  gap: 14px;
  max-width: 30rem;
  margin-top: 16px;
  padding: 0 16px 16px;
  border-radius: 14px;
  background: var(--dorsal);
  color: var(--texto);
  box-shadow: 0 1px 1px var(--sombra), 0 22px 44px -22px var(--sombra);
  scroll-margin-top: 16px;
}
/* La banda de arriba: naranja, como la de la portada, sin texto que leer */
.alta::before {
  content: "";
  height: 14px;
  margin: 0 -16px -10px;
  border-radius: 14px 14px 0 0;
  background: var(--naranja);
}
/* Los cuatro ojales de los imperdibles: los de arriba, en la banda */
.alta::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  --ojal: radial-gradient(circle, var(--tela) 3.5px, #B7BBC2 4px, #B7BBC2 5.5px, transparent 6px);
  background:
    var(--ojal) 0 0 / 12px 12px no-repeat,
    var(--ojal) 100% 0 / 12px 12px no-repeat,
    var(--ojal) 0 100% / 12px 12px no-repeat,
    var(--ojal) 100% 100% / 12px 12px no-repeat;
}

/* Etiqueta flotante sin JavaScript: dentro del campo mientras está vacío y sin
   foco, arriba en cuanto se toca o se escribe (:placeholder-shown, con un
   placeholder de un espacio). Sigue siendo un <label for>, visible siempre. */
.campo { position: relative; }
.campo label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
  font-size: 18px;
  color: var(--texto-2);
  pointer-events: none;
  transition: transform 160ms var(--frenada), color 160ms var(--frenada);
}
.correo:focus + label,
.correo:not(:placeholder-shown) + label {
  transform: translateY(calc(-50% - 14px)) scale(0.72);
}
.correo:focus + label { color: var(--enlace); }

.correo {
  width: 100%;
  min-height: 56px;
  padding: 20px 18px 4px;
  border: 2px solid var(--borde-campo);
  border-radius: 16px;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 18px;
  transition: border-color 160ms var(--frenada), box-shadow 160ms var(--frenada);
}
/* El foco es naranja y se ve sin depender del contorno del sistema */
.correo:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 4px rgba(232, 113, 10, 0.3);
}

.consentimiento {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto-2);
  cursor: pointer;
}
/* La casilla es la nativa con otra cara: sigue siendo un checkbox para el teclado,
   el lector de pantalla y la validación del formulario. */
.consentimiento input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 2px solid var(--borde-campo);
  border-radius: 8px;
  background: var(--fondo);
  cursor: pointer;
  transition: background-color 160ms var(--frenada), border-color 160ms var(--frenada);
}
/* La marca: una L girada, del color de la letra del botón */
.consentimiento input::before {
  content: "";
  width: 13px;
  height: 7px;
  border-left: 3px solid var(--sobre-naranja);
  border-bottom: 3px solid var(--sobre-naranja);
  transform: translateY(-2px) rotate(-45deg) scale(0);
}
.consentimiento input:checked { background: var(--naranja); border-color: var(--naranja); }
.consentimiento input:checked::before { transform: translateY(-2px) rotate(-45deg) scale(1); }
.consentimiento input:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }

/* Con colores forzados (alto contraste de Windows) las sombras desaparecen: el
   foco del campo vuelve al contorno del sistema y la marca, al color del texto. */
@media (forced-colors: active) {
  .correo:focus { outline: 3px solid Highlight; }
  .consentimiento input::before { border-color: CanvasText; }
}

/* La trampa para bots: fuera de la pantalla, fuera del tabulador y, con el
   aria-hidden del HTML, fuera del lector de pantalla. Se envía vacía. */
.trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alta .boton { width: 100%; }
/* El troquel: una línea de puntos de borde a borde y una muesca a cada lado,
   en el hueco de encima del botón */
.alta .boton::before {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  top: -14px;
  height: 14px;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 50%, var(--tela) 7px, transparent 7.5px),
    radial-gradient(circle at 100% 50%, var(--tela) 7px, transparent 7.5px),
    radial-gradient(circle, rgba(11, 12, 14, 0.32) 1.4px, transparent 1.9px) 0 50% / 9px 4px repeat-x;
}

/* El iPhone, una sola vez y en voz baja, debajo del formulario */
.iphone {
  max-width: 34em;
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--texto-2);
}

.nota {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--texto-2);
}

/* ── Las tres razones ────────────────────────────────────────────── */

.razones {
  display: grid;
  gap: 18px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.razon {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 22px;
}
/* El tajo del logo en la esquina; dorado en la que habla de ti */
.razon::before {
  content: "";
  position: absolute;
  top: -14px;
  right: 26px;
  width: 16px;
  height: 64px;
  background: var(--naranja);
  transform: skewX(-32deg);
}
.razon.tuya::before { background: var(--dorado); }
/* La primera es la que vende la app: naranja macizo, y el tajo en el color del fondo */
.razon.maciza { background: var(--naranja); border-color: var(--naranja); color: var(--sobre-naranja); }
.razon.maciza::before { background: var(--sobre-naranja); }
.razon.maciza p { color: #2B1503; } /* 5,6:1 sobre el naranja */

.razon h2 {
  margin: 0 40px 10px 0;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 30px;
  line-height: 0.95;
  text-transform: uppercase;
}
.razon p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--texto-2); }

/* ── Pie ─────────────────────────────────────────────────────────── */

.pie {
  margin-top: 56px;
  border-top: 1px solid var(--linea);
  padding: 26px 0 48px;
  font-size: 15px;
  color: var(--texto-2);
}
.pie p { margin: 0 0 12px; max-width: 44em; }
.pie nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 18px; }
/* Enlaces del pie con zona de toque de 48 px aunque la letra sea pequeña */
.pie nav a { display: inline-flex; align-items: center; min-height: 48px; }

/* ── /beta/dentro ────────────────────────────────────────────────── */

.dentro .titular { margin-top: 22px; }
.dentro .entrada + .entrada { margin-top: 10px; }

/* El sello: un círculo y una marca que se trazan solos */
.sello {
  position: relative;
  width: 84px;
  height: 84px;
  margin-top: 34px;
}
.sello svg { position: relative; display: block; width: 100%; height: 100%; }
.sello circle { fill: none; stroke: var(--naranja); stroke-width: 5; }
.sello path {
  fill: none;
  stroke: var(--texto);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* /beta/revisa: un sobre dentro del mismo círculo, más fino que la marca */
.sello.sobre path { --largo: 130; stroke-dasharray: 130; stroke-width: 4; }

/* Las esquirlas: tajos como el del logo que salen del sello una vez */
.esquirlas { position: absolute; inset: 0; pointer-events: none; }
.esquirlas i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 22px;
  margin: -11px 0 0 -3.5px;
  background: var(--naranja);
  opacity: 0;
  transform: rotate(var(--a)) translateY(-70px) skewX(-20deg);
}
.esquirlas i:nth-child(even) { background: var(--dorado); height: 14px; }
/* Diez esquirlas repartidas en círculo, un poco giradas para que no salgan en cruz */
.esquirlas i:nth-child(1) { --a: 8deg; }
.esquirlas i:nth-child(2) { --a: 44deg; }
.esquirlas i:nth-child(3) { --a: 80deg; }
.esquirlas i:nth-child(4) { --a: 116deg; }
.esquirlas i:nth-child(5) { --a: 152deg; }
.esquirlas i:nth-child(6) { --a: 188deg; }
.esquirlas i:nth-child(7) { --a: 224deg; }
.esquirlas i:nth-child(8) { --a: 260deg; }
.esquirlas i:nth-child(9) { --a: 296deg; }
.esquirlas i:nth-child(10) { --a: 332deg; }

.redes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.boton.hueco {
  min-width: 0;
  background: transparent;
  color: var(--texto);
  box-shadow: inset 0 0 0 2px var(--naranja);
  font-size: 21px;
  padding: 0 26px;
}
@media (hover: hover) and (pointer: fine) {
  .boton.hueco:hover { background: rgba(232, 113, 10, 0.14); }
}

/* ── El grupo de probadores (GP-202, DEC-052) ───────────────────── */

/* /beta/dentro: el paso que hay que dar ya, en su tarjeta */
.destacado {
  max-width: 36rem;
  margin-top: 28px;
  padding: 22px;
  border: 2px solid var(--naranja);
  border-radius: 14px;
  background: var(--panel);
}
.destacado h2, .paso h2 {
  margin: 0 0 8px;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
}
.destacado p, .paso p { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--texto-2); }
.destacado p strong { color: var(--texto); font-weight: 600; }
.destacado + .entrada { margin-top: 26px; }

/* /beta/entrar: los tres pasos, numerados porque son una secuencia, como una
   tira troquelada en tres partes (la misma de la portada) */
.pasos {
  display: grid;
  max-width: 36rem;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--linea);
}
.paso {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 20px;
}
/* El troquel entre parte y parte, con una muesca en cada borde */
.paso + .paso {
  background:
    radial-gradient(circle at 0 0, var(--tela) 7px, transparent 7.5px),
    radial-gradient(circle at 100% 0, var(--tela) 7px, transparent 7.5px),
    radial-gradient(circle, var(--linea) 1.4px, transparent 1.9px) 0 0 / 9px 4px repeat-x;
}
.paso::before {
  content: counter(paso);
  font-family: var(--cond);
  font-weight: 700;
  font-size: 48px;
  line-height: 0.85;
  color: var(--naranja);
}
.paso p:last-child { margin-bottom: 0; }
/* En los móviles más estrechos el número va encima, para que el botón quepa entero */
@media (max-width: 359px) {
  .paso { grid-template-columns: 1fr; gap: 8px; }
}
.paso .boton { min-width: 0; font-size: 20px; padding: 0 26px; }

/* El paso que aún no se puede dar: se ve, pero apagado y sin enlace */
.paso.apagado::before { color: var(--texto-2); }
.paso.apagado h2 { color: var(--texto-2); }
.boton.apagado {
  background: transparent;
  color: var(--texto-2);
  box-shadow: inset 0 0 0 2px var(--linea);
  cursor: default;
}
/* En el móvil más estrecho el aviso no cabe en una línea: entonces se parte centrado */
.paso .boton.apagado { min-height: 48px; padding: 8px 20px; font-size: 17px; line-height: 1.15; text-align: center; }

/* ── Escritorio ──────────────────────────────────────────────────── */

@media (min-width: 900px) {
  :root { --margen: 40px; --ancho-titular: min(44vw, 560px); }
  .portada { padding: 30px 0 0; }
  .firma img { width: 56px; height: 56px; }
  .luz { left: -170px; top: -180px; width: 440px; height: 440px; }
  /* Dos columnas: el titular y la llamada, que se apoya en su base para que el
     botón quede a la vista también en una pantalla de portátil. En /beta la
     llamada es el formulario, la acción principal: pesa tanto como el titular
     (GP-205), así que su columna nunca baja de 400 px y llega al borde derecho,
     el mismo en el que acaban las tres tarjetas de debajo. */
  .portada {
    display: grid;
    grid-template-columns: var(--ancho-titular) minmax(400px, 1fr);
    column-gap: 56px;
    align-items: end;
  }
  .firma { grid-column: 1 / -1; justify-self: start; }
  .titular { margin-top: 40px; }
  .llamada { padding-bottom: 6px; }
  .entrada { margin-top: 0; }
  .entrada { font-size: 21px; }
  .linea { font-size: 19px; }
  .alta { max-width: none; margin-top: 0; padding: 0 32px 32px; gap: 18px; }
  .alta::before { height: 22px; margin: 0 -32px -2px; }
  .alta .boton::before { left: -32px; right: -32px; top: -18px; height: 18px; }
  .alta::after { inset: 8px; }
  .correo { min-height: 64px; font-size: 20px; padding-inline: 20px; }
  .campo label { font-size: 19px; }
  .consentimiento { font-size: 16px; }
  .alta .boton { min-height: 64px; font-size: 26px; }
  .razones { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
  .razon { padding: 28px; }
  .razon h2 { font-size: 36px; }
}

/* ── Movimiento ──────────────────────────────────────────────────── */
/* Todo lo de aquí es lo único que se mueve. Fuera de este bloque la página
   está ya en su estado final: con movimiento reducido no hay nada que esperar. */

@media (prefers-reduced-motion: no-preference) {

  /* Entradas: cortas (400 ms como mucho), escalonadas en 600 ms como mucho, y
     ninguna parte de opacidad 0: si el navegador tarda en arrancarlas, el
     contenido ya está a la vista. El formulario no se anima. */

  /* Las líneas del titular suben y se posan, una tras otra, sin rebote */
  .titular span { animation: linea 380ms var(--frenada) both; }
  .titular span:nth-child(2) { animation-delay: 60ms; }
  .titular span:nth-child(3) { animation-delay: 120ms; }

  .tajo  { animation: tajo 240ms var(--frenada) 280ms both; }
  .linea { animation: subir 300ms var(--frenada) 200ms both; }

  .razon { animation: subir 300ms var(--frenada) both; }
  .razon:nth-child(1) { animation-delay: 160ms; }
  .razon:nth-child(2) { animation-delay: 230ms; }
  .razon:nth-child(3) { animation-delay: 300ms; }

  /* /beta/revisa, /beta/dentro y /beta/entrar */
  .entrada, .redes, .nota, .destacado, .pasos { animation: subir 300ms var(--frenada) 200ms both; }
  .sello { animation: sello 360ms var(--tela-curva) 100ms both; }
  .sello circle { stroke-dasharray: 230; animation: trazo 360ms var(--frenada) 120ms both; }
  .sello path   { --largo: 60; stroke-dasharray: 60; animation: trazo 240ms var(--frenada) 340ms both; }

  /* La marca de la casilla entra al marcarla */
  .consentimiento input::before { transition: transform 200ms var(--frenada); }

  /* Lo que celebra va después, con todo ya quieto, y una sola vez */
  .esquirlas i  { animation: esquirla 800ms var(--frenada) 600ms both; }
  .esquirlas i:nth-child(3n) { animation-delay: 660ms; }
}

@keyframes linea {
  from { opacity: 0.35; transform: translateY(28%); }
}

@keyframes tajo {
  from { transform: skewX(-32deg) scaleX(0); }
  to   { transform: skewX(-32deg) scaleX(1); }
}

@keyframes subir {
  from { opacity: 0.35; transform: translateY(14px); }
}

@keyframes sello {
  from { transform: scale(0.8) rotate(-10deg); }
}

@keyframes trazo {
  from { stroke-dashoffset: var(--largo, 230); }
  to   { stroke-dashoffset: 0; }
}

@keyframes esquirla {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(-30px) skewX(-20deg) scale(0.6); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-96px) skewX(-20deg) scale(1); }
}