/* Evento en vivo con Miriam Gimal · estilos compartidos (registro + gracias)
   Landing de webinar clásica: blanco y azul marino, un solo acento dorado para
   la acción, fotos reales de la familia y la firma de Miriam como logo.
   El verde de WhatsApp solo en la acción del grupo. Celular primero. */

:root {
  --bg: #ffffff;
  --foto-bg: #fcfafb;           /* el fondo de estudio de la foto principal */
  --soft: #f2f4f9;
  --ink: #0f1b33;
  --ink-2: #36435e;
  --ink-3: #56627c;
  --line: #dde3ee;
  --line-strong: #bfc8da;

  --navy: #0f1b33;
  --navy-2: #182a4f;
  --navy-deep: #091225;
  --on-navy: #ffffff;
  --on-navy-2: #ccd5e8;
  --on-navy-3: #9eabc8;
  --line-navy: rgba(204, 213, 232, 0.16);

  --gold: #f2b632;
  --gold-hover: #f7c654;
  --gold-press: #dfa21c;
  --gold-soft: rgba(242, 182, 50, 0.42);

  --wa: #25d366;
  --wa-hover: #3ddc7a;
  --wa-press: #1fbf5b;
  --wa-ink: #05341c;
  --wa-icon: #128c4a;

  --error: #b42318;
  --error-bg: #fff4f2;

  --focus: var(--ink);

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 18px;

  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 20px;
  --max: 1200px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sombra: 0 1px 2px rgba(9, 18, 37, 0.08), 0 18px 40px -18px rgba(9, 18, 37, 0.35);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--line-strong) var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--ink);
}

::selection { background: var(--gold-soft); color: var(--ink); }

img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
svg.i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
svg.i--fill { fill: currentColor; stroke: none; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 8.9vw, 3.5rem); line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 7.4vw, 2.8rem); line-height: 1.06; }
h3 { font-size: 1.25rem; line-height: 1.2; font-weight: 700; font-stretch: 95%; letter-spacing: -0.005em; }
p { margin: 0; }

/* El remate del título: resaltado dorado sobre blanco, letra dorada sobre azul */
h1 em {
  font-style: normal;
  white-space: nowrap;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 86% / 100% 0.34em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0.06em;
  margin: 0 -0.06em;
}

:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.strip, .hero__accion, .cierre, .pie, .t-hero, .sticky { --focus: var(--gold); }
.form-card { --focus: var(--ink); }

/* La firma real de Miriam, dibujada con el color del texto que la rodea */
.firma__logo {
  display: inline-block; flex: none;
  width: 168px; aspect-ratio: 900 / 258;
  background: currentColor;
  -webkit-mask: url("img/firma.png") no-repeat center / contain;
          mask: url("img/firma.png") no-repeat center / contain;
}

/* ---------- Franja superior ---------- */
.strip {
  background: var(--navy);
  color: var(--on-navy-2);
  font-size: 0.875rem; line-height: 1.25;
  padding: 7px var(--gutter);
  display: flex; gap: 2px 10px; justify-content: center; align-items: center; flex-wrap: wrap;
  text-align: center;
}
.strip b { font-family: var(--f-display); font-weight: 800; font-stretch: 88%; text-transform: uppercase; letter-spacing: 0.06em; color: var(--on-navy); }
.strip__evento { color: var(--on-navy); font-weight: 700; }
.strip .live { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5f; box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.25); }
.strip__cuando { font-variant-numeric: tabular-nums; }

/* Aviso para quien ya se registró y vuelve a la página */
.ya-registrada { background: #e9f8ef; color: var(--ink); border-bottom: 1px solid #c6ead4; }
.ya-registrada .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-top: 12px; padding-bottom: 12px; }
.ya-registrada p { flex: 1 1 240px; font-size: 0.9375rem; line-height: 1.4; }

/* ---------- Portada ---------- */
.hero { background: var(--foto-bg); overflow: hidden; }
.hero__grid { display: grid; }

/* En el celular la foto abre la página y se funde con el fondo */
/* Se muestra del 5 % al 85 % del alto de la foto: las dos caras y el guante de FUERZA */
.hero__foto {
  --fh: clamp(270px, 38svh, 380px);
  margin: 0 calc(var(--gutter) * -1);
  height: var(--fh);
  overflow: hidden;
  display: flex; justify-content: center;
}
.hero__foto img {
  flex: none; width: auto; max-width: none;
  height: calc(var(--fh) * 1.25); margin-top: calc(var(--fh) * -0.0625);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, #000 0, #000 calc(var(--fh) * 0.97), transparent calc(var(--fh) * 1.06));
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, #000 0, #000 calc(var(--fh) * 0.97), transparent calc(var(--fh) * 1.06));
          mask-composite: intersect;
}

.hero__copy { position: relative; margin-top: 6px; padding-bottom: 22px; }

.firma { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 18px; color: var(--ink); }
.firma p { font-size: 0.9375rem; line-height: 1.35; color: var(--ink-2); max-width: 24em; }
/* En el celular la explicación la cubren el formulario y los temas: la cuenta atrás va justo después de la firma */
.lede { display: none; margin-top: 14px; color: var(--ink-2); max-width: 34em; }
.lede strong { color: var(--ink); font-weight: 700; }

/* Banda azul de la portada: cuenta atrás + formulario */
.hero__accion {
  margin: 0 calc(var(--gutter) * -1);
  padding: 20px var(--gutter) 40px;
  background: var(--navy);
  color: var(--on-navy);
}

/* ---------- Cuenta atrás ---------- */
.reloj { color: var(--on-navy); }
.reloj__titulo { font-size: 1.0625rem; line-height: 1.45; color: var(--on-navy-2); max-width: 30em; }
/* La promesa del en vivo, en grande, justo antes de la cuenta atrás */
.reloj__titulo b {
  display: block; margin-bottom: 6px;
  font-family: var(--f-display); font-weight: 800; font-stretch: 88%;
  font-size: clamp(1.4rem, 6.2vw, 1.75rem); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--on-navy); text-wrap: balance;
}
.reloj__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.reloj__cifras > div {
  display: grid; justify-items: center;
  padding: 12px 4px 10px;
  border-radius: 14px;
  background: linear-gradient(to bottom, #1d3260 0%, var(--navy-2) 50%, #142445 50%, #132241 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 10px 22px -12px rgba(0, 0, 0, 0.7);
}
.reloj__cifras b {
  display: block;
  font-family: var(--f-display); font-weight: 800; font-stretch: 78%;
  font-size: clamp(2.6rem, 13vw, 3.5rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.reloj__cifras span { margin-top: 6px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--on-navy-3); }

.reloj .horas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 10px; max-width: none;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-navy);
  font-size: 0.8125rem; text-align: center;
}
/* Cuatro zonas: dos por fila en el celular, las cuatro en fila desde 480px */
@media (min-width: 480px) { .reloj .horas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.reloj .horas > div { display: grid; gap: 1px; align-content: start; }
.reloj .horas dt { color: var(--on-navy-3); line-height: 1.25; }
.reloj .horas dd { margin: 0; color: var(--on-navy); font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
/* La hora local de quien visita, destacada en su propia caja */
.reloj .horas .tuya {
  grid-column: 1 / -1; display: flex; justify-content: center; align-items: baseline; gap: 10px;
  margin: 4px 0 0; padding: 10px 14px;
  border: 1px solid rgba(204, 213, 232, 0.28); border-radius: var(--r-m);
  background: var(--navy-2);
}
.reloj .horas .tuya[hidden] { display: none; }
.reloj .horas .tuya dt { color: var(--on-navy-2); font-size: 0.9375rem; }
.reloj .horas .tuya dd {
  color: var(--on-navy); font-family: var(--f-display); font-weight: 800; font-stretch: 88%;
  font-size: 1.25rem; line-height: 1.1;
}

/* Estados: antes del en vivo, durante y después */
.reloj__envivo, .reloj__terminado { display: none; font-size: 1.0625rem; line-height: 1.4; color: var(--on-navy-2); }
.reloj__envivo b, .reloj__terminado b { color: var(--on-navy); }
.reloj[data-estado="envivo"] .reloj__antes, .reloj[data-estado="terminado"] .reloj__antes { display: none; }
.reloj[data-estado="envivo"] .reloj__envivo, .reloj[data-estado="terminado"] .reloj__terminado { display: block; }

/* Versión pequeña para el cierre */
.reloj--mini .reloj__cifras { margin-top: 0; }
.reloj--mini .reloj__cifras b { font-size: clamp(2.1rem, 10vw, 2.8rem); }

/* ---------- Botones ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 58px;
  padding: 14px 22px;
  border: 0; border-radius: var(--r-m);
  background: var(--gold); color: var(--ink);
  font-family: var(--f-display); font-weight: 800; font-stretch: 92%;
  font-size: 1.1875rem; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 10px 22px -12px rgba(9, 18, 37, 0.5);
  transition: background-color 0.18s ease, transform 0.14s var(--ease-out), box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--gold-hover); }
.btn:active { transform: translateY(1px); background: var(--gold-press); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 4px 10px -6px rgba(9, 18, 37, 0.5); }
.btn[disabled] { opacity: 0.7; cursor: progress; }
.btn svg.i { stroke-width: 2.4; transition: transform 0.2s var(--ease-out); }
.btn:hover svg.i { transform: translateX(3px); }

.btn--wa { background: var(--wa); color: var(--wa-ink); box-shadow: 0 10px 22px -12px rgba(9, 18, 37, 0.5); }
.btn--wa:hover { background: var(--wa-hover); }
.btn--wa:active { background: var(--wa-press); }
.btn--wa svg.i { width: 26px; height: 26px; }
.btn--wa:hover svg.i { transform: none; }
/* Mientras Supabase confirma el registro y entrega el enlace del grupo */
.btn--wa[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.btn--mini { width: auto; min-height: 44px; padding: 10px 16px; font-size: 1rem; }
.btn--mini svg.i { width: 20px; height: 20px; }

.btn-sec {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-m);
  background: var(--bg);
  color: var(--ink); font-weight: 700; font-size: 0.9375rem; text-decoration: none; text-align: center; line-height: 1.2;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.btn-sec:hover { border-color: var(--ink); background: var(--soft); }


.form-card {
  margin-top: 22px;
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--r-l);
  padding: 22px 18px 18px;
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.7);
  scroll-margin-top: 12px;
}
.form-card h2 { font-size: 1.75rem; }
.form-card__sub { margin-top: 4px; font-size: 0.9375rem; color: var(--ink-2); }
.form-card .registrados { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink); font-size: 0.9375rem; }
.form-card .registrados[hidden] { display: none; }
.registrados svg.i { width: 18px; height: 18px; color: var(--ink-3); }

form { display: grid; gap: 16px; margin-top: 18px; }
.field label { display: block; font-weight: 700; font-size: 0.9375rem; margin-bottom: 6px; }
.field input, .field select {
  width: 100%;
  font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-m);
  padding: 13px 14px;
  min-height: 54px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder { color: #7a86a0; }
.field input:hover, .prefijo:hover { border-color: #9aa6bf; }
.field input:focus, .field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--gold-soft); }
.field[data-error] input { border-color: var(--error); background: var(--error-bg); }
.field .error { display: none; color: var(--error); font-size: 0.875rem; margin-top: 6px; }
.field[data-error] .error { display: block; }
.tel { display: grid; grid-template-columns: 98px 1fr; gap: 8px; }
.ayuda { font-size: 0.8125rem; color: var(--ink-3); margin-top: 6px; }

/* El campo muestra solo el prefijo; al abrirlo se ve la lista completa de países */
.prefijo {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 54px; padding: 0 12px 0 14px;
  background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: var(--r-m);
  font-size: 1.0625rem; font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.prefijo::after {
  content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1b33' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.prefijo:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px var(--gold-soft); }
.field .prefijo select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }

.paso2 {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
  background: #ecf9f1; color: var(--ink);
  border-radius: var(--r-m); padding: 12px 14px; font-size: 0.9375rem; line-height: 1.45;
}
.paso2 svg { color: var(--wa-icon); margin-top: 2px; }
.legal { font-size: 0.8125rem; color: var(--ink-3); line-height: 1.5; }
.legal a { color: var(--ink-2); }

/* ---------- Secciones ---------- */
.seccion { padding: 64px 0; }
.cab h2 + .sub { margin-top: 12px; }
.sub { color: var(--ink-2); max-width: 34em; }

/* Temas del evento */
.temas { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 26px; }
.temas li { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-content: start; }
.temas__check {
  grid-row: span 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: var(--on-navy);
}
.temas__check svg.i { width: 18px; height: 18px; stroke-width: 2.8; }
.temas h3 { padding-top: 4px; }
.temas p { margin-top: 8px; color: var(--ink-2); }
.temas p em { font-style: normal; color: var(--ink); font-weight: 700; }
.seccion > .wrap > .btn { margin-top: 34px; }

/* Historia de Miriam y Raquel */
.historia { background: var(--soft); padding-bottom: 0; }
.historia__grid { display: grid; gap: 28px; }
.historia__foto { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 5; max-height: 76svh; background: #c9dcda; }
.historia__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.historia__foto figcaption {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--navy); color: var(--on-navy);
  font-family: var(--f-display); font-weight: 700; font-stretch: 92%; font-size: 0.9375rem; letter-spacing: 0.02em;
  padding: 5px 12px; border-radius: 99px;
}
.historia blockquote {
  margin: 24px 0 0; padding: 18px 0 0 20px;
  border-left: 0; position: relative;
  font-size: 1.3125rem; line-height: 1.42; font-style: italic; color: var(--ink);
}
.historia blockquote::before {
  content: "“"; position: absolute; left: -4px; top: -10px;
  font-family: var(--f-display); font-style: normal; font-weight: 800; font-size: 4.2rem; line-height: 1; color: var(--line-strong);
}
.historia blockquote footer { margin-top: 10px; font-style: normal; font-size: 0.9375rem; color: var(--ink-3); }
.historia .cuerpo { margin-top: 22px; display: grid; gap: 14px; max-width: 36em; color: var(--ink-2); }
.historia .cuerpo b { color: var(--ink); }
.historia .nota { font-size: 0.875rem; color: var(--ink-3); }
.firma__logo--final { width: 190px; margin-top: 22px; color: var(--ink); }


/* Fotos de la familia: tira deslizable en el celular */
.galeria {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: 10px; margin-top: 48px; padding: 0 var(--gutter) 56px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.galeria::-webkit-scrollbar { display: none; }
.galeria figure { margin: 0; scroll-snap-align: start; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); }
.galeria img { width: 100%; height: 100%; object-fit: cover; }

/* Preguntas */
.faq { margin-top: 24px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0;
  font-weight: 700; font-size: 1.125rem; line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ink-2); }
.faq summary svg { transition: transform 0.25s var(--ease-out); color: var(--ink-3); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details > div { padding: 0 0 20px; color: var(--ink-2); display: grid; gap: 10px; }

/* Horas por país (preguntas y gracias) */
.horas { display: grid; gap: 4px; margin: 0; font-size: 1rem; max-width: 22em; }
.horas > div { display: flex; justify-content: space-between; gap: 16px; }
.horas dt { color: var(--ink-3); }
.horas dd { margin: 0; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.horas .tuya[hidden] { display: none; }
.horas .tuya {
  align-items: baseline; margin-top: 6px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--soft);
}
.horas .tuya dt { color: var(--ink); font-weight: 700; }
.horas .tuya dd { font-family: var(--f-display); font-weight: 800; font-stretch: 88%; font-size: 1.125rem; }

/* Cierre */
.cierre { background: var(--navy); color: var(--on-navy); padding: 56px 0 60px; }
.cierre__grid { display: grid; gap: 26px; }
.cierre h2 { font-size: clamp(2.4rem, 11vw, 4rem); }
.cierre p { margin-top: 14px; color: var(--on-navy-2); max-width: 32em; }
.cierre__accion { display: grid; gap: 22px; }

/* Pie */
.pie { background: var(--navy-deep); color: var(--on-navy-3); font-size: 0.8125rem; line-height: 1.55; padding: 34px 0 112px; }
.firma__logo--pie { width: 132px; color: var(--on-navy); margin-bottom: 18px; }
.pie nav { display: flex; gap: 18px; margin-bottom: 12px; }
.pie a { color: var(--on-navy-2); }
.pie p + p { margin-top: 8px; }

/* Barra fija en el celular */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--navy);
  border-top: 1px solid var(--line-navy);
  transform: translateY(calc(100% + 40px));
  opacity: 0; pointer-events: none;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.sticky.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sticky .btn { min-height: 54px; }

/* ---------- Página de gracias ---------- */
.t-hero { background: var(--navy); color: var(--on-navy); padding: 24px 0 40px; }
.pasos { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.8125rem; }
.pasos li { display: grid; gap: 8px; }
.pasos .barra { height: 5px; border-radius: 99px; background: var(--line-navy); overflow: hidden; }
.pasos .barra i { display: block; height: 100%; width: 100%; background: var(--on-navy-2); }
.pasos li.actual .barra i { width: 45%; background: var(--wa); }
.pasos span { display: flex; gap: 6px; align-items: center; color: var(--on-navy-3); }
.pasos li.actual span { color: var(--on-navy); font-weight: 700; }
.pasos svg.i { width: 15px; height: 15px; color: var(--on-navy-2); }

.t-hero h1 { font-size: clamp(2.3rem, 10vw, 3.4rem); }
.t-hero h1 .falta { display: block; color: var(--on-navy-2); }
.t-hero .lede { margin-top: 14px; color: var(--on-navy-2); }
.t-hero .btn--wa { margin-top: 26px; min-height: 62px; font-size: clamp(1.125rem, 5vw, 1.3125rem); }

.solo-anuncios { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; margin-top: 14px; font-size: 0.875rem; line-height: 1.45; color: var(--on-navy-2); }
.solo-anuncios svg.i { width: 18px; height: 18px; margin-top: 1px; color: var(--on-navy-3); }
.aviso {
  margin-top: 22px; padding: 14px 0 0;
  border-top: 1px solid var(--line-navy);
  color: var(--on-navy-2); font-size: 0.9375rem;
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
}
.aviso b { color: var(--on-navy); }
.aviso svg { color: var(--on-navy-2); margin-top: 2px; }
.reintento { margin-top: 10px; font-size: 0.875rem; color: var(--on-navy-2); text-align: center; }

.video { margin-top: 18px; aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: hidden; background: var(--navy); }
.video--vertical { aspect-ratio: 9 / 16; max-width: 360px; }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Pasos siguientes: la secuencia importa, por eso lleva número */
.ruta { list-style: none; margin: 30px 0 0; padding: 0; }
.ruta > li { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding-bottom: 30px; }
.ruta > li:not(:last-child)::before { content: ""; position: absolute; left: 17.5px; top: 42px; bottom: 6px; width: 1px; background: var(--line-strong); }
.ruta > li:last-child { padding-bottom: 0; }
.ruta .n {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: var(--on-navy);
  font-family: var(--f-display); font-weight: 800; font-size: 1.0625rem;
}
.ruta h3 { margin-top: 6px; }
.ruta p { margin-top: 6px; color: var(--ink-2); }
.ruta .horas { margin-top: 10px; }

.cal { display: grid; gap: 8px; margin-top: 14px; }
@media (min-width: 480px) { .cal { grid-template-columns: 1fr 1fr; } }
.check { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; color: var(--ink-2); }
.check li { display: flex; gap: 10px; align-items: center; }
.check svg { color: var(--ink); width: 16px; height: 16px; }

.compartir { border-top: 1px solid var(--line); padding-top: 28px; }
.compartir p { margin-top: 8px; color: var(--ink-2); }
.compartir .btn-sec { margin-top: 16px; }

/* ---------- Escritorio ----------
   Portada: promesa a la izquierda y la foto a la derecha, apoyada sobre la banda
   azul de ancho completo con la cuenta atrás y el formulario. */
@media (min-width: 960px) {
  :root { --gutter: 40px; }

  .hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); }
  .hero__foto { grid-column: 2; grid-row: 1; margin: 0; height: auto; overflow: visible; align-self: end; justify-content: center; }
  .hero__foto img {
    height: min(51svh, 455px); width: auto; max-width: none; margin: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 86%, transparent 100%);
            mask-composite: add;
  }
  .hero__copy { grid-column: 1; grid-row: 1; margin-top: 0; padding: 24px 0 20px; align-self: center; }
  .hero h1 { font-size: clamp(2.5rem, 3.45vw, 3.25rem); }
  .lede { display: block; margin-top: 12px; font-size: 1.1875rem; }

  .hero__accion {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr); column-gap: clamp(36px, 4.5vw, 64px); align-items: center;
    margin: 0 calc(50% - 50vw); padding: 26px calc(50vw - 50%) 34px;
  }
  .hero .reloj__titulo { font-size: 1.125rem; }
  .hero .reloj__titulo b { font-size: 2rem; }
  .hero .reloj__cifras { gap: 12px; margin-top: 14px; }
  .hero .reloj__cifras > div { padding: 18px 4px 14px; }
  .hero .reloj__cifras b { font-size: clamp(3.8rem, 5.4vw, 5.25rem); }
  .hero .reloj .horas { margin-top: 18px; font-size: 0.875rem; }
  .form-card { margin-top: 0; padding: 22px 24px 20px; }
  .form-card h2 { font-size: 1.625rem; }
  form { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 12px; margin-top: 14px; }
  form > * { grid-column: 1 / -1; }
  form > .field:nth-of-type(1) { grid-column: 1; }
  form > .field:nth-of-type(2) { grid-column: 2; }
  form > .field:nth-of-type(3) { grid-column: 1; grid-row: 2; }
  form > .btn { grid-column: 2; grid-row: 2; align-self: start; margin-top: 29px; min-height: 54px; padding: 12px 16px; font-size: 1.125rem; white-space: nowrap; }


  .seccion { padding: 104px 0; }
  .temas { grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 40px; margin-top: 44px; }
  .temas h3 { font-size: 1.375rem; }
  .seccion > .wrap > .btn { width: auto; display: inline-flex; padding: 16px 30px; }

  .historia { padding-bottom: 0; }
  .historia__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .historia__foto { max-height: none; }
  .galeria { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--max); margin: 48px auto 0; padding: 0 var(--gutter) 104px; overflow: visible; }

  .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .split .cab { position: sticky; top: 40px; }
  .split .faq { margin-top: 0; border-top: 0; }
  .split .faq details:first-child summary { padding-top: 0; }

  .cierre { padding: 88px 0; }
  .cierre__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 64px; align-items: center; }

  .sticky { left: auto; right: 28px; bottom: 28px; padding: 0; background: none; border: 0; }
  .sticky .btn { width: auto; padding: 14px 28px; box-shadow: 0 0 0 1px rgba(9, 18, 37, 0.2), 0 16px 32px -12px rgba(9, 18, 37, 0.55); }
  .pie { padding-bottom: 34px; }

  .t-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .t-layout ~ .sticky { display: none; }
  .t-hero { position: sticky; top: 0; align-self: start; min-height: 100vh; max-height: 100vh; overflow-y: auto; display: flex; align-items: center; padding: 48px 0; }
  .t-hero .wrap { max-width: 560px; margin: 0 0 0 auto; padding: 0 clamp(32px, 4vw, 64px); }
  .t-main { padding: 40px 0 24px; }
  .t-main .wrap { max-width: 640px; margin: 0; padding: 0 clamp(32px, 5vw, 80px); }
  .t-main .seccion { padding: 32px 0 48px; }
}

/* ---------- Movimiento ----------
   Todo cuelga de html.anim, que solo existe si el teléfono no pide "reducir movimiento".
   Sin esa clase (o sin JS) cada elemento se ve en su sitio. Solo transform, opacity,
   clip-path y background-size: nada que recalcule el layout. El título y la foto no
   arrancan invisibles, para no retrasar la carga percibida. */

/* Subrayado dorado que se dibuja (frase del en vivo y títulos de sección) */
.subraya {
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 94% / 100% 0.13em;
  padding-bottom: 0.05em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.anim .subraya { background-size: 0% 0.13em; transition: background-size 0.9s var(--ease-out) 0.3s; }
.anim .visto .subraya { background-size: 100% 0.13em; }
.anim .hero .subraya { animation: dibujar 0.9s var(--ease-out) 1.3s forwards; }
@keyframes dibujar { to { background-size: 100% 0.13em; } }

/* Portada al cargar: el resaltado se pinta, la firma se escribe, las fichas entran */
.anim h1 em { animation: resaltar 0.85s var(--ease-out) 0.45s backwards; }
@keyframes resaltar { from { background-size: 0% 0.34em; } }
.anim .hero__foto img { animation: asentar 1.1s var(--ease-out) backwards; }
@keyframes asentar { from { transform: scale(1.035); } }
.anim .hero .firma__logo { animation: firmar 1.3s cubic-bezier(0.45, 0, 0.25, 1) 0.55s backwards; }
@keyframes firmar { from { clip-path: inset(-25% 100% -25% 0); } to { clip-path: inset(-25% 0 -25% 0); } }
.anim .hero .firma p, .anim .hero .lede, .anim .hero .reloj__titulo { animation: subir 0.7s var(--ease-out) 0.2s backwards; }
.anim .hero .reloj__cifras > div { animation: ficha 0.6s var(--ease-out) backwards; }
.anim .hero .reloj__cifras > div:nth-child(1) { animation-delay: 0.45s; }
.anim .hero .reloj__cifras > div:nth-child(2) { animation-delay: 0.53s; }
.anim .hero .reloj__cifras > div:nth-child(3) { animation-delay: 0.61s; }
.anim .hero .reloj__cifras > div:nth-child(4) { animation-delay: 0.69s; }
.anim .hero .form-card { animation: subir 0.8s var(--ease-out) 0.3s backwards; }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }
@keyframes ficha { from { opacity: 0; transform: translateY(14px) scale(0.96); } }

/* El segundero */
.anim .reloj__cifras b.tic { animation: tic 0.5s var(--ease-out); }
@keyframes tic {
  from { transform: translateY(-0.16em); opacity: 0.35; filter: blur(1.5px); }
  to { transform: none; opacity: 1; filter: none; }
}

/* Al hacer scroll: cada bloque sube una vez; los temas y las fotos, uno tras otro */
.anim [data-anim] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.anim [data-anim].visto { opacity: 1; transform: none; }
.anim .temas__check { transform: scale(0.4); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i, 0) * 90ms + 0.2s); }
.anim .temas li.visto .temas__check { transform: none; }

/* Brillo que pasa por el botón de registro cada pocos segundos */
.form-card .btn, .cierre .btn { position: relative; overflow: hidden; isolation: isolate; }
.form-card .btn::after, .cierre .btn::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.anim .form-card .btn::after, .anim .cierre .btn::after { animation: brillo 6s ease-in-out 2.2s infinite; }
@keyframes brillo {
  0% { transform: translateX(-120%) skewX(-18deg); }
  16%, 100% { transform: translateX(560%) skewX(-18deg); }
}

/* Gracias: la barra de progreso se llena y el ícono de WhatsApp toca el botón */
.anim .t-hero h1 { animation: subir 0.7s var(--ease-out) backwards; }
.pasos .barra i { transform-origin: left center; }
.anim .pasos li.hecho .barra i { animation: llenar 0.6s var(--ease-out) 0.2s backwards; }
.anim .pasos li.actual .barra i { animation: llenar 0.8s var(--ease-out) 0.75s backwards; }
@keyframes llenar { from { transform: scaleX(0); } }
.anim .t-hero .btn--wa svg.i { transform-origin: 50% 80%; animation: toque 3.6s ease-in-out 1.6s infinite; }
@keyframes toque {
  0%, 82%, 100% { transform: none; }
  86% { transform: rotate(-14deg) scale(1.12); }
  90% { transform: rotate(10deg) scale(1.12); }
  94% { transform: rotate(-6deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  html { scroll-behavior: auto; }
}