/* ============================================================================
   Age Reset — Simposio científico · Gencell Biotechnology

   Paleta tomada de la propia marca: el rojo del logotipo y el azul marino
   #141c3c de gencellbiotechnology.com. El cuerpo abre en blanco; el marino se
   guarda para las franjas y los ponentes, donde los retratos en blanco y negro
   lucen. Sora para los títulos (la del sitio corporativo) e IBM Plex Sans para
   la interfaz y el formulario, que es lo que la gente tiene que leer y llenar.
   ========================================================================== */

:root {
  --blanco:   #ffffff;
  --nieve:    #f7f8fb;
  --nieve-2:  #eef0f6;
  --marino:   #141c3c;
  --marino-2: #0d1230;
  --marino-3: #232c52;
  --tinta:    #141c3c;
  --tinta-2:  #4d5470;
  --tinta-3:  #8189a3;
  --claro:    #e9ebf3;
  --claro-2:  #a7aec6;
  --regla:    #e4e7f0;
  --regla-oscura: rgba(255, 255, 255, .14);
  --rojo:      #ec1c24;
  --rojo-hondo:#c0141b;
  --rojo-tenue:#fdeced;

  --display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto:   'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho:  1240px;
  --radio:  10px;
  --radio-s: 8px;
  --sombra: 0 1px 2px rgba(20, 28, 60, .04), 0 24px 60px -24px rgba(20, 28, 60, .28);

  /* Las dos medidas de las que depende el encaje del hero en escritorio.
     Viven aquí, juntas, porque la una se calcula de la otra: el banner tiene
     que ser al menos tan alto como la tarjeta más su respiro. Si la tarjeta
     cambia de alto, se toca ESTE número y nada más. */
  /* El alto de la tarjeta en su paso MÁS ALTO (el 4, con institución, ciudad
     y la casilla de términos). De aquí sale el alto del banner: declarar menos
     dejaría ese paso asomando por debajo de la imagen.
     ⚠️ Ya NO se usa para centrar —eso lo hace `translateY(-50%)` con el alto
     real—, así que un desfase pequeño aquí no descoloca nada; solo reserva. */
  --alto-tarjeta: 715px;
  --respiro-tarjeta: 26px;
  --alto-banner: calc(var(--alto-tarjeta) + var(--respiro-tarjeta) * 2);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta-2);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.sin-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rojo); outline-offset: 3px;
}

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.envoltura--estrecha { max-width: 800px; }

.salta {
  position: absolute; left: -9999px; top: 0;
  background: var(--rojo); color: #fff; padding: 12px 18px; z-index: 200;
  font-size: .9rem; text-decoration: none;
}
.salta:focus { left: 12px; top: 12px; }

/* ── Tipografía ──────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--display); color: var(--tinta);
  margin: 0; text-wrap: balance; letter-spacing: -.03em;
}
h1 { font-size: clamp(2.3rem, 1.25rem + 3.9vw, 4.05rem); font-weight: 800; line-height: 1.03; }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.25rem); font-weight: 700; line-height: 1.15; }
h3 { font-size: 1.06rem; font-weight: 600; line-height: 1.4; letter-spacing: -.015em; }
p  { margin: 0; }

.prosa { font-size: 1.02rem; line-height: 1.7; color: var(--tinta-2); max-width: 66ch; }
.prosa + .prosa { margin-top: 14px; }

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--rojo); margin: 0 0 20px;
}
.kicker--claro { color: #fff; }
.kicker--sutil { color: var(--claro-2); margin-bottom: 10px; }

@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(236, 28, 36, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(236, 28, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(236, 28, 36, 0); }
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.cabecera {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--regla);
  position: sticky; top: 0; z-index: 50;
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 76px;
}
.marca img { width: 150px; height: auto; }
.cabecera__derecha { display: flex; align-items: center; gap: 20px; }
.cabecera__fecha {
  display: none;
  font-size: .78rem; font-weight: 600; color: var(--tinta-2);
}
@media (min-width: 720px) { .cabecera__fecha { display: inline; } }
@media (max-width: 560px) {
  .cabecera__fila { min-height: 64px; }
  .marca img { width: 118px; }
  .cabecera .boton--pequeno { padding: 10px 15px; font-size: .8rem; }
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rojo); color: #fff;
  font-family: var(--texto); font-size: .97rem; font-weight: 600;
  padding: 15px 30px; border: 0; border-radius: var(--radio-s);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(192, 20, 27, .3), 0 10px 24px -12px rgba(236, 28, 36, .6);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.boton:hover { background: var(--rojo-hondo); transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(236, 28, 36, .75); }
.boton:active { transform: translateY(0); }
.boton[disabled] { background: var(--tinta-3); box-shadow: none; cursor: progress; transform: none; }
.boton--pequeno { padding: 11px 20px; font-size: .87rem; }
.boton--grande  { padding: 17px 38px; font-size: 1.02rem; }
.boton--ancho   { width: 100%; margin-top: 4px; padding-block: 17px; }

/* ── Hero (blanco) ───────────────────────────────────────────────────────── */

.heroe { position: relative; background: var(--blanco); overflow: hidden; }

/* ── Banner del diseñador ────────────────────────────────────────────────────
   Tres cortes reales (móvil 800×1000, tablet 1280×720, escritorio 1920×640),
   no uno recortado por CSS: el titular y el botón están DIBUJADOS dentro, así
   que un recorte los partiría. `aspect-ratio` por tramo reserva el sitio antes
   de que la imagen cargue — sin eso la página da un salto al pintarse.        */
.banner {
  display: block; position: relative; z-index: 1;
  background: #05060a;
  aspect-ratio: 800 / 1000;
}
@media (min-width: 620px)  { .banner { aspect-ratio: 1280 / 720; } }
@media (min-width: 1024px) { .banner { aspect-ratio: 1920 / 640; } }
.banner img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Los tres pases (Swiper) ─────────────────────────────────────────────────
   El slider NO cambia la caja del banner: hereda la misma proporción por tramo
   y el mismo `min-height` de escritorio. Por eso las reglas de arriba siguen
   valiendo tal cual y la tarjeta del formulario se sigue centrando sobre él.

   🪤 `.swiper-slide` no viene posicionado, y en escritorio la imagen se coloca
   en absoluto (`inset: 0`). Sin este `position: relative` la imagen se
   posicionaría contra el hero entero y se saldría del banner. */
.banner.swiper { overflow: hidden; }
/* Si Swiper no llegó a cargar, se ve el primer pase y ya — nunca los tres
   apilados. El JS pone esta clase cuando no encuentra la librería. */
.banner--sin-carrusel .banner__pase:not(:first-child) { display: none; }
.banner--sin-carrusel .banner__puntos { display: none; }
.banner .swiper-wrapper { height: 100%; }
.banner__pase { position: relative; display: block; height: 100%; }

/* El fundido superpone las diapositivas: sin alto propio, la que no está
   activa colapsa y arrastra la altura del conjunto. */
.swiper-fade .banner__pase { height: 100%; }

/* Puntos: abajo a la izquierda, sobre la zona dibujada del banner y lejos de
   donde se posa la tarjeta en escritorio. */
.banner__puntos.swiper-pagination {
  position: absolute; z-index: 3;
  left: 0; right: auto; bottom: 14px;
  width: auto; padding-inline: 20px;
  display: flex; gap: 8px; justify-content: flex-start;
}
.banner__puntos .swiper-pagination-bullet {
  width: 8px; height: 8px; margin: 0 !important;
  background: #fff; opacity: .38; transition: opacity .25s, width .25s;
}
.banner__puntos .swiper-pagination-bullet-active {
  opacity: 1; width: 22px; border-radius: 4px; background: var(--rojo);
}
@media (min-width: 620px)  { .banner__puntos.swiper-pagination { bottom: 18px; padding-inline: 32px; } }
@media (min-width: 1024px) { .banner__puntos.swiper-pagination { bottom: 24px; padding-inline: max(40px, calc((100vw - 1560px) / 2)); } }

/* Quien pide menos movimiento no ve el carrusel girar: se queda en el primer
   pase. El autoplay se apaga en el JS; esto es solo el cinturón visual. */
@media (prefers-reduced-motion: reduce) {
  .banner .swiper-wrapper { transition: none !important; }
}

/* En escritorio el banner deja de medir solo lo que le toca por proporción y
   crece hasta lo que necesita la tarjeta.

   💣 Antes había un salto: por encima de 1900 px la tarjeta iba dentro del
   banner y un pixel por debajo se caía al blanco de golpe. La causa es que el
   alto del banner depende del ancho de la ventana (es 1920×640, o sea un
   tercio del ancho) mientras que la tarjeta mide lo mismo siempre: llegaba un
   punto en que la imagen se quedaba más baja que la tarjeta.

   Ahora el banner tiene un alto MÍNIMO —la tarjeta más su respiro— y la imagen
   lo rellena recortando por la DERECHA (`object-position: left`). Se recorta
   por ahí a propósito: a la izquierda está el titular y el botón dibujados, y
   a la derecha está la tarjeta tapando esa zona de todas formas. Resultado: la
   tarjeta va dentro del banner en cualquier escritorio, sin saltos. */
@media (min-width: 1024px) {
  .banner { aspect-ratio: auto; min-height: var(--alto-banner); }
  /* En absoluto, no con `height: 100%`: el alto del banner lo fija un
     `min-height`, y contra un mínimo el porcentaje no resuelve — la imagen se
     quedaba a su alto natural y debajo aparecía una franja negra vacía. */
  .banner .swiper-wrapper { position: absolute; inset: 0; height: auto; }
  .banner__pase { height: auto; }
  .banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: left center; }
}
/* El botón va dibujado en la imagen: el foco tiene que verse igual. */
.banner:focus-visible { outline: 3px solid var(--rojo); outline-offset: -3px; }

/* Velo en el lado derecho, solo donde se posa la tarjeta.
   Sin él, a anchos de ~1400–1500 px el borde de la tarjeta parte el logotipo
   del banner por la mitad y asoma un trozo — parece un error de montaje. El
   velo lo apaga y la tarjeta queda sobre un fondo decidido, no sobre la
   imagen a medias. Debajo de 1024 px no existe: ahí la tarjeta va debajo. */
@media (min-width: 1600px) {
  .banner::after {
    content: ''; position: absolute; inset: 0 0 0 auto; width: 52%;
    background: linear-gradient(90deg, rgba(5, 6, 10, 0), rgba(5, 6, 10, .55) 42%, rgba(5, 6, 10, .92) 78%);
    pointer-events: none;
  }
}

/* Solo para lectores de pantalla y buscadores: el titular que en pantalla lo
   pone la imagen. No se usa `display:none` — eso lo esconde también de ellos. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.heroe__lavado {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 52% at 96% -6%, rgba(236, 28, 36, .07), transparent 70%),
    radial-gradient(52% 46% at -6% 8%, rgba(20, 28, 60, .06), transparent 70%);
}

.heroe__rejilla {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 42px;
  align-items: start;
  padding-top: clamp(30px, 3vw, 48px);
  padding-bottom: clamp(48px, 5vw, 80px);
}
/* Dos columnas en escritorio: a la izquierda lo que el banner NO dice —la
   cuenta atrás y quién imparte—, a la derecha la tarjeta de registro. */
@media (min-width: 1024px) {
  .heroe__rejilla {
    /* Aquí la tarjeta va DEBAJO del banner, junto a la cuenta atrás, así que las
       dos columnas crecen a la par.
       🪤 Antes esta columna llevaba la fórmula del ancho pensada para cuando la
       tarjeta se SUBE al banner —esquivar el titular dibujado—. Debajo no hay
       titular que esquivar, y esa fórmula dejaba la tarjeta clavada en su
       mínimo mientras todo el ancho que se ganaba se lo llevaba el reloj. */
    grid-template-columns: minmax(0, 1.04fr) minmax(400px, 0.96fr);
    grid-template-areas:
      "reloj form"
      "extra form";
    gap: 24px 56px;
    align-items: start;
  }
  .heroe__reloj      { grid-area: reloj; padding-top: 4px; }
  .heroe__extra      { grid-area: extra; }
  .heroe__formulario { grid-area: form; }
}

/* A partir de 1400 px la tarjeta va DENTRO del banner, centrada.

   El corte sale de una medida, no de una preferencia. Al crecer el banner, la
   imagen se agranda para rellenar y su titular —que va DIBUJADO— se agranda
   con ella. El titular ocupa el 41 % del ancho de la imagen, y la tarjeta
   empieza a 508 px del borde derecho. Para que no se pisen hace falta que
   1,23 × alto_banner ≤ ancho_ventana − 508. Con la tarjeta en 651 px el banner
   necesita 703, y esa cuenta se cumple a partir de ~1373 px. Se deja en 1400
   con margen.

   Por debajo, la tarjeta va bajo el banner. Es la única salida honesta: para
   meterla dentro habría que estirar tanto la imagen que su propio titular
   acabaría debajo de la tarjeta. Medido a 1024 px: el titular llegaba hasta la
   mitad de la tarjeta. */
@media (min-width: 1600px) {
  /* El hero usa un contenedor MÁS ANCHO que el resto de la página.
     Al crecer el banner su titular se agranda, y con la columna estrecha de
     1240 px el borde de la tarjeta le rozaba la última palabra («CLÍNICA»).
     Ensanchando, la tarjeta se va hacia el borde —que es donde debe estar una
     tarjeta flotando sobre una imagen a sangre— y quedan ~80 px de aire. */
  .heroe__rejilla { max-width: min(1560px, calc(100% - 80px)); }

  /* La tarjeta sube y queda CENTRADA dentro del banner.
     Sube medio banner más media tarjeta, y descuenta el relleno superior de la
     rejilla porque la tarjeta empieza después de él. Va con margen y no con
     posición absoluta para que siga en el flujo: así su alto empuja lo que
     viene debajo en vez de comérselo. */
  /* Al subir la tarjeta, su columna se queda VACÍA: el reloj y los ponentes se
     quedaban encogidos a la izquierda con media pantalla en blanco al lado.
     Aquí la fila de abajo pasa a ocupar el ancho entero y sus dos piezas se
     reparten a la mitad. La tarjeta sigue en la columna derecha de la MISMA
     fila, pero como el margen negativo la sube dentro del banner, no se pisan. */
  /* Al subir la tarjeta, su columna se quedaría vacía. La fila de abajo pasa a
     ocupar el ancho entero; como ya solo lleva la cuenta atrás (los ponentes se
     mudaron dentro del formulario), se le pone un ancho cómodo y se centra. */
  /* Aquí el formulario está DENTRO del banner y ya lo dice todo. Debajo se deja
     solo el contador: el resumen del programa y las condiciones de acceso
     estorban —el contenido está más abajo en su propia sección y los avisos en
     «Cumplimiento»—. Vuelven a aparecer por debajo de 1600 px, donde el
     formulario baja y esa columna sí necesita llenarse. */
  .heroe__rejilla { grid-template-areas: "reloj"; }
  .heroe__reloj .reloj { max-width: 780px; margin-inline: auto; }
  .heroe__extra { display: none; }

  /* La tarjeta se centra DE VERDAD dentro del banner: se ancla a la mitad de
     su alto y se sube su propia mitad con `translateY(-50%)`.

     💣 Antes se calculaba con un número declarado (`--alto-tarjeta`). En cuanto
     el alto real dejaba de coincidir —y dejó de coincidir en cuanto la tarjeta
     cambió de contenido— la diferencia caía TODA abajo: medido, 5 px arriba y
     125 abajo. `translateY(-50%)` no puede desincronizarse: usa el alto que la
     tarjeta tenga en ese momento, y por eso vale aunque cambie de un paso a
     otro.

     Sale del flujo a propósito: aquí vive DENTRO del banner, así que no tiene
     que empujar nada. Lo que viene debajo —la cuenta atrás— fluye normal. */
  .heroe__formulario {
    position: absolute;
    top: calc(var(--alto-banner) / 2);
    transform: translateY(-50%);
    right: max(40px, calc((100vw - 1560px) / 2));
    width: clamp(400px, 100vw - 1041px, 560px);
    z-index: 2;
  }

  /* Su columna ya no existe: la fila de abajo es una sola, con la cuenta atrás.
     Y la rejilla deja de ser el ancla de la tarjeta: `position: static` hace que
     el `top` de arriba se mida desde `.heroe`, que empieza justo en el borde
     superior del banner. Con la rejilla como ancla, el 50 % se contaba desde
     DEBAJO del banner y la tarjeta caía 875 px más abajo. */
  .heroe__rejilla { grid-template-columns: minmax(0, 1fr); position: static; }
  .heroe__reloj { position: relative; z-index: 1; }
}



/* ── Cuenta atrás ─────────────────────────────────────────────────────────
   Panel con identidad propia, no una etiqueta suelta: es lo único de la página
   que mete prisa, y antes se leía como un pie de foto. Filo rojo a la
   izquierda, un punto que late, las cifras en cajas marinas y el dato del cupo
   debajo. */
.reloj {
  position: relative;
  margin-top: 0; padding: 20px 22px 18px 24px;
  background: var(--nieve);
  border: 1px solid var(--regla);
  border-radius: var(--radio);
  overflow: hidden;
}
.reloj::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--rojo);
}

.reloj__eti {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--rojo);
}
/* El punto late para que se note que el número de al lado está corriendo. */
.reloj__punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rojo); flex: 0 0 auto;
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) { .reloj__punto { animation: none; } }

.reloj__cifras { display: flex; gap: 8px; }
.reloj__celda {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1 1 0;
  background: var(--marino); color: #fff;
  padding: 11px 4px 9px; border-radius: var(--radio-s);
  /* Ancho fijo: los segundos cambian cada tic y la fila no puede bailar. */
  min-width: 58px;
}
.reloj__celda b {
  font-family: var(--display); font-size: 1.6rem; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.reloj__celda i {
  font-style: normal; font-size: .62rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--claro-2);
}
/* Los segundos son el latido: en rojo para que se vea que corre. */
.reloj__celda:last-child b { color: #ff8a8f; }

.reloj__pie {
  margin: 12px 0 0;
  font-size: .78rem; line-height: 1.5; color: var(--tinta-3);
}
.reloj__aviso {
  margin: 12px 0 0; font-size: .84rem; font-weight: 700; color: var(--rojo);
}
.reloj[data-terminado] .reloj__celda { opacity: .5; }
.reloj[data-terminado] .reloj__punto { animation: none; opacity: .4; }

/* Ponentes en miniatura */
.ponentes-mini {
  display: flex; align-items: center; gap: 16px;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--regla);
}
.ponentes-mini__caras { display: flex; flex: 0 0 auto; }
.ponentes-mini__caras img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 18%;
  border: 3px solid #fff; box-shadow: 0 4px 14px rgba(20, 28, 60, .22);
}
.ponentes-mini__caras img + img { margin-left: -18px; }
.ponentes-mini p { font-size: .87rem; line-height: 1.5; color: var(--tinta-2); }
.ponentes-mini strong { color: var(--tinta); font-weight: 600; }

/* Dentro de la tarjeta: más compacta, y arriba una regla que la separa de los
   campos. Ocupa el hueco que deja el alto reservado para el paso más largo. */
.ponentes-mini--tarjeta {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--regla);
  gap: 13px;
}
.ponentes-mini--tarjeta .ponentes-mini__caras img {
  width: 46px; height: 46px; border-width: 2px;
}
.ponentes-mini--tarjeta .ponentes-mini__caras img + img { margin-left: -13px; }
.ponentes-mini--tarjeta p { font-size: .8rem; line-height: 1.45; }

/* ── Lo que vas a ver ────────────────────────────────────────────────────── */

.avance { margin-top: 26px; }
.avance__eti {
  margin: 0 0 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinta-3);
}
.avance__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.avance__lista li {
  position: relative; padding-left: 26px;
  font-size: .94rem; line-height: 1.5; color: var(--tinta-2);
}
/* Palomita dibujada con dos líneas: sin imagen y sin fuente de iconos. */
.avance__lista li::before {
  content: ''; position: absolute; left: 3px; top: .38em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--rojo); border-bottom: 2px solid var(--rojo);
  transform: rotate(-45deg);
}
.avance__enlace {
  display: inline-block; margin-top: 16px;
  font-size: .87rem; font-weight: 600; color: var(--rojo); text-decoration: none;
}
.avance__enlace:hover { text-decoration: underline; }

/* ── Tarjeta de registro ─────────────────────────────────────────────────── */

.tarjeta-registro {
  background: var(--blanco);
  border: 1px solid var(--regla);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  scroll-margin-top: 100px;
}
.tarjeta-registro__cuerpo { padding: clamp(22px, 2.2vw, 28px); }

/* Cada paso reserva el alto del paso MÁS ALTO (el 4: institución, ciudad y la
   casilla de términos). Sin esto la tarjeta medía 585 px en el paso 2 y 715 en
   el 4: crecía y encogía mientras alguien la rellenaba, y el botón «Continuar»
   se movía de sitio bajo el dedo.

   🪤 Y rompía el centrado sobre el banner, que se calcula con `--alto-tarjeta`:
   ese número dejaba de coincidir con el alto real y la diferencia caía toda
   abajo (medido: 5 px arriba, 125 abajo).

   El hueco que deja la reserva en el paso 1 NO queda vacío: lo ocupan los
   ponentes, que viven dentro de la tarjeta justo encima del botón. */
/* Sin reserva de alto: dejaba un blanco visible en los pasos cortos. La
   tarjeta crece y encoge según el paso, y el centrado de abajo lo absorbe
   porque NO depende de un número declarado. */

/* El aviso de datos, ya fuera de la tarjeta */
.microcopy--fuera {
  margin: 14px 2px 0;
  font-size: .78rem; line-height: 1.55; color: var(--tinta-3);
}

.tarjeta-registro__titulo { font-size: 1.32rem; margin-bottom: 9px; }
.tarjeta-registro__subtexto {
  font-size: .93rem; line-height: 1.6; color: var(--tinta-2); margin-bottom: 24px;
}

.campo { margin-bottom: 15px; }
.campo label {
  display: block; font-size: .8rem; font-weight: 600; color: var(--tinta);
  margin-bottom: 7px;
}
.campo abbr { color: var(--rojo); text-decoration: none; border: 0; }

/* Campos */
.campo input[type="text"], .campo input[type="email"],
.campo input[type="tel"], .campo select {
  width: 100%;
  font-family: var(--texto); font-size: .96rem; color: var(--tinta);
  background: var(--nieve);
  padding: 13px 14px;
  border: 1px solid var(--regla); border-radius: var(--radio-s);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.campo input::placeholder { color: var(--tinta-3); }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234d5470' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.campo input:hover, .campo select:hover { border-color: var(--tinta-3); }
.campo input:focus, .campo select:focus {
  background: var(--blanco);
  border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-tenue); outline: none;
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--rojo); }

.campo__error { font-size: .78rem; color: var(--rojo); margin-top: 6px; font-weight: 500; }
.campo__error--general {
  margin-top: 14px; padding: 11px 13px;
  background: var(--rojo-tenue); border-radius: var(--radio-s);
}

.campo--consentimiento {
  margin: 4px 0 0; padding: 14px 15px;
  background: var(--nieve); border-radius: var(--radio-s);
}
.casilla { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.casilla input {
  margin: 1px 0 0; flex: 0 0 auto;
  width: 18px; height: 18px; accent-color: var(--rojo); cursor: pointer;
}
.casilla span { font-size: .85rem; font-weight: 400; line-height: 1.55; color: var(--tinta-2); }
.casilla a { color: var(--tinta); font-weight: 500; text-underline-offset: 2px; }

/* Teléfono con código de país */
.tel { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; }
.tel select { background-position: right 10px center; padding-right: 28px; }

.campo__ayuda { font-size: .78rem; color: var(--tinta-3); margin-top: 7px; }
.campo__opcional { font-weight: 400; color: var(--tinta-3); font-size: .78rem; }

/* ── Pasos ───────────────────────────────────────────────────────────────── */

.pasos {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.pasos__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
/* La línea que une los puntos va DETRÁS de los números */
.pasos__item::before {
  content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px;
  background: var(--regla); z-index: 0;
}
.pasos__item:first-child::before { display: none; }
.pasos__item[data-hecho="si"]::before { background: var(--rojo); }

.pasos__num {
  position: relative; z-index: 1;
  width: 31px; height: 31px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanco); border: 2px solid var(--regla);
  font-size: .82rem; font-weight: 600; color: var(--tinta-3);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pasos__eti {
  font-size: .6rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-3); text-align: center; line-height: 1.2;
}
.pasos__item[data-hecho="si"] .pasos__num {
  background: var(--rojo); border-color: var(--rojo); color: #fff;
}
.pasos__item[data-actual="si"] .pasos__num {
  background: var(--rojo); border-color: var(--rojo); color: #fff;
  box-shadow: 0 0 0 4px var(--rojo-tenue);
}
.pasos__item[data-actual="si"] .pasos__eti { color: var(--tinta); }

.paso { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.paso__cuenta {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rojo); margin-bottom: 5px;
}
.paso__titulo { font-size: 1.32rem; margin-bottom: 5px; }
.paso__nota { font-size: .9rem; color: var(--tinta-2); margin-bottom: 20px; }

.paso__pie {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--regla);
}
.paso__pie .boton { margin-left: auto; }
.enlace-atras {
  background: 0; border: 0; padding: 8px 2px; cursor: pointer;
  font-family: var(--texto); font-size: .88rem; font-weight: 500; color: var(--tinta-2);
}
.enlace-atras:hover { color: var(--tinta); }

.boton--pildora { border-radius: 999px; padding: 14px 30px; gap: 7px; }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.microcopy { margin-top: 14px; font-size: .76rem; line-height: 1.5; color: var(--tinta-3); }

.tarjeta-registro__exito { text-align: center; padding-block: clamp(46px, 5vw, 66px); }
.exito__marca {
  width: 50px; height: 50px; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: var(--rojo); color: #fff; border-radius: 50%; font-size: 1.45rem; line-height: 1;
}
.exito__nota { margin-top: 16px; font-size: .82rem; color: var(--tinta-3); }

/* ── Franja de aviso ─────────────────────────────────────────────────────── */

/* ── Condiciones de acceso ───────────────────────────────────────────────────
   Vivían en una franja propia entre el hero y los ponentes: sola, con medio
   ancho vacío y un párrafo de tres líneas que nadie lee. Ahora cierran la
   columna del hero, junto al formulario, que es donde importan. El texto legal
   completo sigue en «Avisos y cumplimiento».                                   */
.acceso {
  list-style: none; margin: 26px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--regla);
  display: grid; gap: 12px;
}
.acceso li {
  font-size: .86rem; line-height: 1.45; color: var(--tinta-2);
}
.acceso__eti {
  display: inline-block; margin-right: 6px;
  font-size: .67rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rojo);
}

/* ── Secciones ───────────────────────────────────────────────────────────── */

.seccion { padding: clamp(56px, 6.5vw, 94px) 0; }
.seccion--alterna { background: var(--nieve); }
.seccion--oscura { background: var(--marino); color: var(--claro-2); }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }

.seccion__cabeza { margin-bottom: 34px; max-width: 62ch; }
.seccion__titulo::after {
  content: ""; display: block;
  width: 44px; height: 3px; background: var(--rojo); margin-top: 16px;
}

/* ── Ficha de datos ──────────────────────────────────────────────────────── */

.ficha { margin: 0 0 32px; border-top: 1px solid var(--regla); }
.ficha__fila {
  display: grid; grid-template-columns: 1fr; gap: 3px;
  padding: 17px 0; border-bottom: 1px solid var(--regla);
}
@media (min-width: 700px) {
  .ficha__fila { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: baseline; }
}
.ficha dt {
  font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-3);
}
.ficha dd { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--tinta); }
.prosa--apoyo { margin-bottom: 30px; }

/* ── Programa ────────────────────────────────────────────────────────────── */

.programa {
  list-style: none; margin: 0; padding: 0; counter-reset: bloque;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 760px) { .programa { grid-template-columns: 1fr 1fr; gap: 14px; } }

.programa li {
  counter-increment: bloque;
  display: grid; grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px; row-gap: 3px; align-items: start;
  padding: 20px 22px;
  background: var(--nieve); border: 1px solid var(--regla); border-radius: var(--radio);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.programa li:hover {
  border-color: rgba(236, 28, 36, .35);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(20, 28, 60, .4);
}
.programa li::before {
  content: counter(bloque, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--display); font-size: .82rem; font-weight: 700;
  color: var(--rojo); padding-top: 2px;
}
/* Título y descripción comparten la segunda columna: sin esto el párrafo cae
   en la columna del número y se parte palabra por palabra. */
.programa h3 { grid-column: 2; margin-bottom: 2px; }
.programa p  { grid-column: 2; font-size: .93rem; line-height: 1.55; color: var(--tinta-2); }

.cierre-programa {
  margin-top: 20px; padding: 22px 26px;
  background: var(--marino); color: var(--claro-2);
  border-radius: var(--radio);
}
.cierre-programa h3 { color: #fff; margin-bottom: 4px; }
.cierre-programa p { font-size: .95rem; }

/* ── Ponentes (marino) ───────────────────────────────────────────────────── */

.seccion__entrada {
  max-width: 62ch; margin-top: 14px;
  font-size: 1.02rem; line-height: 1.65; color: var(--tinta-2);
}
.seccion--oscura .seccion__entrada { color: var(--claro-2); }
.seccion--oscura .seccion__entrada strong { color: #fff; font-weight: 600; }

.ponente {
  display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center;
  padding: 38px 0; border-bottom: 1px solid var(--regla-oscura);
}
.ponente:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 820px) {
  .ponente { grid-template-columns: 360px minmax(0, 1fr); gap: 56px; }
  /* En el invertido se cambia la PLANTILLA, no el orden: con `order` el texto
     caía en la columna estrecha de la foto y se estrechaba. */
  .ponente--invertido { grid-template-columns: minmax(0, 1fr) 360px; }
  .ponente--invertido .ponente__foto  { grid-column: 2; grid-row: 1; }
  .ponente--invertido .ponente__texto { grid-column: 1; grid-row: 1; }
}

.ponente__foto {
  position: relative;
  background: var(--marino-2); border-radius: var(--radio); overflow: hidden;
  max-width: 360px; border: 1px solid var(--regla-oscura);
  box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .7);
}
/* Filo rojo de la marca: firma la foto sin taparla. */
.ponente__foto::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--rojo);
}
.ponente__foto img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .5s ease;
}
.ponente:hover .ponente__foto img { transform: scale(1.03); }

.ponente__texto h3 { font-size: 1.95rem; letter-spacing: -.03em; margin-bottom: 8px; }
.ponente__cargo {
  font-size: .95rem; font-weight: 600; color: #ff6b70; margin-bottom: 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--regla-oscura);
}
.ponente__texto .prosa { color: var(--claro-2); }
.ponente__rotulo {
  margin: 18px 0 10px;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--claro-2);
}
.ponente__texto .prosa + .ponente__rotulo { margin-top: 22px; }

.credenciales {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.credenciales li {
  font-size: .84rem; font-weight: 500; color: #fff;
  padding: 6px 13px; border-radius: 999px;
  background: var(--marino-3); border: 1px solid var(--regla-oscura);
}

/* ── Avisos legales ──────────────────────────────────────────────────────── */

.aviso { padding: 22px 0; border-top: 1px solid var(--regla); }
.aviso:first-of-type { border-top: 0; padding-top: 0; }
.aviso h3 { margin-bottom: 8px; }
.aviso p { font-size: .92rem; line-height: 1.7; color: var(--tinta-2); }

/* ── Modal ───────────────────────────────────────────────────────────────── */

.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.modal__fondo {
  position: absolute; inset: 0;
  background: rgba(13, 18, 48, .72); backdrop-filter: blur(4px);
  animation: aparece .25s ease;
}
.modal__caja {
  position: relative; z-index: 1;
  width: 100%; max-width: 500px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--blanco); border-radius: var(--radio);
  box-shadow: 0 40px 90px -30px rgba(13, 18, 48, .7);
  animation: sube .3s cubic-bezier(.2, .8, .3, 1);
}
@keyframes aparece { from { opacity: 0; } }
@keyframes sube { from { opacity: 0; transform: translateY(18px); } }
/* La caja recibe el foco al abrirse solo para que el teclado entre en ella;
   el anillo lo llevan los controles, no el contenedor. */
.modal__caja:focus { outline: none; }

.modal__cerrar {
  position: absolute; top: 9px; right: 11px; z-index: 2;
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, .2); border: 0; border-radius: 50%;
  font-size: 1.7rem; line-height: 1; color: #fff; cursor: pointer;
  transition: background .15s ease;
}
.modal__cerrar:hover { background: rgba(255, 255, 255, .35); }

.modal__kicker {
  margin: 0; padding: 16px 24px;
  background: var(--rojo); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
}
.modal .tarjeta-registro { border: 0; box-shadow: none; border-radius: 0; }
.modal .tarjeta-registro__cuerpo { padding: 24px; }

/* ── Barra móvil ─────────────────────────────────────────────────────────── */

.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: var(--marino); border-top: 1px solid var(--regla-oscura);
}
@media (max-width: 999px) { .barra-movil { display: flex; } body { padding-bottom: 72px; } }
.barra-movil__fecha { display: block; font-size: .85rem; font-weight: 600; color: #fff; }
.barra-movil__nota  { display: block; font-size: .73rem; color: var(--claro-2); }

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

.pie {
  background: var(--marino-2); color: var(--claro-2);
  padding: clamp(48px, 5vw, 68px) 0 44px; text-align: center;
}
.pie__logo { width: 158px; margin: 0 auto 24px; }
/* El logotipo es negro y rojo: sobre fondo marino va en su propia placa blanca,
   que respeta la marca sin recolorearla. */
.pie__logo--placa {
  box-sizing: content-box; background: #fff; padding: 11px 15px; border-radius: var(--radio-s);
}
.pie__lema { color: var(--claro); font-size: .95rem; line-height: 1.6; margin-bottom: 22px; }

.pie__enlaces {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 12px; font-size: .86rem; margin-bottom: 26px;
}
.pie__enlaces a { color: var(--claro); text-decoration: none; border-bottom: 1px solid transparent; }
.pie__enlaces a:hover { border-bottom-color: var(--rojo); }
.pie__enlaces span { color: #3a4266; }

.pie__legal { font-size: .82rem; line-height: 1.65; max-width: 74ch; margin: 0 auto 22px; }
.pie__copyright { font-size: .77rem; color: #6e769b; }