:root {
  --marino: #0b0640;
  --marino-2: #15095f;
  --cian: #00c9e1;
  --cian-claro: #5ee6f5;
  --cian-oscuro: #007c8c; /* cian para texto sobre blanco: contraste 5:1 */
  --cian-suave: #e3f9fc;
  --texto: #1e2433;
  --texto-suave: #4a5468;
  --fondo: #ffffff;
  --fondo-suave: #f4f6fb;
  --borde: #e2e6ef;
  --error: #c62828;
  --radio: 14px;
  --titulos: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--cian-oscuro); }
[hidden] { display: none !important; }

.contenedor { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.contenedor--angosto { max-width: 720px; }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--cian); color: var(--marino); padding: 10px 16px; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 12px; }

/* ── Movimiento ────────────────────────────────────────────────────────────
   Entrada de la portada al cargar y aparición de bloques al hacer scroll.
   Sin JavaScript (clase no-js) todo se ve quieto y completo. */
/* La animación de entrada usa relleno "backwards": aplica el estado inicial mientras espera,
   pero al terminar suelta el elemento, así los efectos de hover siguen funcionando. */
@keyframes entrar { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .entra { animation: entrar 0.8s var(--suave) backwards; animation-delay: calc(var(--d, 0) * 90ms + 80ms); }

.js [data-revelar] { opacity: 0; }
.js [data-revelar].visible { opacity: 1; animation: entrar 0.75s var(--suave) backwards; animation-delay: calc(var(--i, 0) * 110ms); }

/* Botones */
.boton {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cian); color: var(--marino);
  font-family: var(--titulos); font-weight: 700; font-size: 1rem; text-align: center;
  padding: 14px 22px; border: 0; border-radius: 12px; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 201, 225, 0.35);
  transition: background-color 0.2s ease, transform 0.2s var(--suave), box-shadow 0.2s ease;
}
.boton::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.7s var(--suave);
}
@media (hover: hover) {
  .boton:hover:not([disabled]) { background: #2bd8ec; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 201, 225, 0.45); }
  .boton:hover:not([disabled])::after { transform: translateX(120%); }
}
.boton:active { transform: translateY(0); }
.boton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.formulario .boton:focus-visible { outline-color: var(--marino); }
.boton[disabled] { opacity: 0.7; cursor: progress; transform: none; }
.boton--grande { font-size: 1.05rem; padding: 17px 26px; }
.boton--chico { font-size: 0.875rem; padding: 9px 14px; box-shadow: none; }
.boton--bloque { width: 100%; }

/* Barra superior */
.barra { background: var(--marino); position: relative; z-index: 2; }
.barra__fila { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 6px; }
.barra__logo img { width: 92px; height: auto; }
.barra__cta { display: none; }
@media (min-width: 760px) { .barra__cta { display: inline-flex; } }

/* ── Portada ─────────────────────────────────────────────────────────────── */
.portada {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--marino) 0%, var(--marino-2) 100%);
  color: #fff; padding: 18px 0 60px;
}
/* Retícula que se desvanece hacia abajo y un halo que respira detrás del video.
   La máscara va en el contenedor (quieto) y la retícula se desplaza con transform,
   que lo resuelve la tarjeta de video sin redibujar la página. */
.portada__fondo {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(85% 65% at 50% 25%, #000 35%, transparent 80%);
          mask-image: radial-gradient(85% 65% at 50% 25%, #000 35%, transparent 80%);
}
.portada__fondo::before {
  content: ""; position: absolute; left: 0; right: 0; top: -44px; bottom: 0;
  background-image:
    linear-gradient(rgba(94, 230, 245, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 230, 245, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: reticula 5s linear 1;
}
.portada__fondo::after {
  content: ""; position: absolute; left: 50%; top: 38%; width: min(900px, 120vw); aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 201, 225, 0.28), transparent 70%);
  animation: respirar 5s ease-in-out 1;
}
@keyframes reticula { to { transform: translateY(44px); } }
@keyframes respirar { 50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.08); } }

.portada__contenido { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--cian); background: rgba(0, 201, 225, 0.1); border: 1px solid rgba(0, 201, 225, 0.35);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
}
.etiqueta__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 0 0 rgba(0, 201, 225, 0.6); animation: latido 2s ease-out 2; }
@keyframes latido { 70% { box-shadow: 0 0 0 8px rgba(0, 201, 225, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 201, 225, 0); } }
.portada h1 { font-size: clamp(1.65rem, 6vw, 2.75rem); font-weight: 800; max-width: 820px; }
.portada__bajada { color: rgba(255, 255, 255, 0.82); font-size: clamp(1rem, 2.6vw, 1.15rem); max-width: 680px; margin-top: 16px; }

.video {
  position: relative; width: 100%; max-width: 820px; aspect-ratio: 16 / 9;
  margin: 28px 0 26px; border-radius: 16px; overflow: hidden;
  background: #000; box-shadow: 0 0 0 1px rgba(94, 230, 245, 0.25), 0 18px 50px rgba(0, 0, 0, 0.45);
}
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video video { background: #000; object-fit: contain; }
.video__portada { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--marino); font: inherit; text-decoration: none; display: block; }
.video__miniatura { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--suave); }
@media (hover: hover) { .video__portada:hover .video__miniatura { transform: scale(1.03); } }
.video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; background: var(--cian);
  display: grid; place-items: center; padding-left: 4px;
  transition: transform 0.25s var(--suave);
}
.video__play::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 201, 225, 0.55); animation: onda 2.2s ease-out 2;
}
@keyframes onda { 0% { box-shadow: 0 0 0 0 rgba(0, 201, 225, 0.55); } 100% { box-shadow: 0 0 0 22px rgba(0, 201, 225, 0); } }
@media (hover: hover) { .video__portada:hover .video__play { transform: translate(-50%, -50%) scale(1.08); } }
.video__portada:focus-visible { outline: 3px solid var(--cian); outline-offset: -3px; }
.video__rotulo {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(11, 6, 64, 0.82); color: #fff; font-size: 0.82rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}

.portada__datos {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  font-size: 0.9rem; color: rgba(255, 255, 255, 0.82);
}
.portada__datos li { display: inline-flex; align-items: center; gap: 8px; }
.portada__datos li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cian); }

/* ── Secciones ───────────────────────────────────────────────────────────── */
.seccion { padding: 72px 0; }
.seccion--suave { background: var(--fondo-suave); }
.seccion h2 { font-size: clamp(1.45rem, 4.4vw, 2.15rem); font-weight: 800; color: var(--marino); max-width: 760px; }
.seccion__bajada { color: var(--texto-suave); font-size: 1.05rem; margin-top: 12px; max-width: 680px; }
.antetitulo {
  font-family: var(--titulos); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cian-oscuro); margin-bottom: 10px;
}
.antetitulo--claro { color: var(--cian); }

/* ── Riesgos: escáner vertical ───────────────────────────────────────────── */
.riesgos { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .riesgos { grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
  .riesgos__intro { position: sticky; top: 32px; }
}
.riesgos__pista {
  margin-top: 18px; font-size: 0.85rem; font-weight: 600; color: var(--cian-oscuro);
  display: inline-flex; align-items: center; gap: 8px;
}
.riesgos__pista::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.pista--tactil { display: none; }
@media (hover: none) { .pista--puntero { display: none; } .pista--tactil { display: inline; } }
.no-js .riesgos__pista { display: none; }
.no-js .paso-form[hidden] { display: block !important; }
.no-js [data-siguiente], .no-js [data-anterior], .no-js .etapas, .no-js .campo__ayuda { display: none; }

.escaner { list-style: none; margin: 0; padding: 0; position: relative; --avance: 0px; }
/* Riel: línea base, tramo recorrido y un pulso que baja como un escáner */
.escaner::before {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px;
  background: var(--borde); border-radius: 2px;
}
.escaner::after {
  content: ""; position: absolute; left: 27px; top: 28px; width: 2px; height: var(--avance);
  background: linear-gradient(180deg, var(--cian), var(--cian-oscuro)); border-radius: 2px;
  box-shadow: 0 0 12px rgba(0, 201, 225, 0.6); transition: height 0.5s var(--suave);
}
.escaner__item { position: relative; }
.escaner__item + .escaner__item { margin-top: 10px; }
.escaner__boton {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  background: none; border: 1px solid transparent; border-radius: var(--radio);
  padding: 8px 14px 8px 0; cursor: pointer; font: inherit; color: inherit;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.escaner__boton:focus-visible { outline: 3px solid var(--cian-oscuro); outline-offset: 2px; }
.escaner__nodo {
  position: relative; z-index: 1; flex: none; width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; background: #fff; color: var(--texto-suave);
  border: 2px solid var(--borde);
  transition: transform 0.35s var(--suave), background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.escaner__nodo svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.escaner__texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.escaner__codigo {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); transition: color 0.3s ease;
}
.escaner__titulo { font-family: var(--titulos); font-weight: 700; font-size: 1.08rem; color: var(--marino); transition: transform 0.35s var(--suave); }
.escaner__flecha {
  flex: none; width: 10px; height: 10px; border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave);
  transform: rotate(45deg); margin-right: 6px; transition: transform 0.35s var(--suave), border-color 0.3s ease;
}
.escaner__detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--suave); }
.escaner__detalle > div { overflow: hidden; visibility: hidden; transition: visibility 0s 0.45s; }
.escaner__detalle p {
  margin: 4px 0 6px 72px; padding: 14px 16px; border-radius: 12px;
  background: #fff; border: 1px solid var(--borde); border-left: 3px solid var(--cian);
  color: var(--texto-suave); box-shadow: 0 8px 22px rgba(11, 6, 64, 0.07);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.35s ease, transform 0.45s var(--suave);
}
/* Punto activo. Con mouse: acordeón (solo el activo se abre). */
.escaner__item[data-activo] .escaner__detalle { grid-template-rows: 1fr; }
.escaner__item[data-activo] .escaner__detalle > div { visibility: visible; transition-delay: 0s; }
.escaner__item[data-activo] .escaner__detalle p { opacity: 1; transform: none; transition-delay: 0.08s; }
/* En pantallas táctiles todo queda abierto (nada salta al hacer scroll) y el activo se ilumina */
@media (hover: none) {
  .escaner__detalle { grid-template-rows: 1fr; }
  .escaner__detalle > div { visibility: visible; }
  .escaner__detalle p { opacity: 1; transform: none; border-left-color: var(--borde); box-shadow: none; background: var(--fondo-suave); }
  .escaner__item[data-activo] .escaner__detalle p { color: var(--texto); background: #fff; border-left-color: var(--cian); box-shadow: 0 8px 22px rgba(11, 6, 64, 0.07); }
  .escaner__flecha { display: none; }
}
.escaner__item[data-activo] .escaner__nodo {
  background: var(--marino); color: var(--cian); border-color: var(--cian); transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(0, 201, 225, 0.14), 0 10px 24px rgba(11, 6, 64, 0.25);
}
.escaner__item[data-activo] .escaner__codigo { color: var(--cian-oscuro); }
.escaner__item[data-activo] .escaner__titulo { transform: translateX(4px); }
.escaner__item[data-activo] .escaner__flecha { transform: rotate(225deg); border-color: var(--cian-oscuro); }
@media (hover: hover) { .escaner__boton:hover .escaner__nodo { border-color: var(--cian); } }
/* Sin JavaScript todo queda abierto */
.no-js .escaner__detalle { grid-template-rows: 1fr; }
.no-js .escaner__detalle > div { visibility: visible; }
.no-js .escaner__detalle p { opacity: 1; transform: none; }
.no-js .escaner__flecha { display: none; }

/* ── Cómo funciona ───────────────────────────────────────────────────────── */
.pasos { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; counter-reset: paso; }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.paso {
  position: relative; overflow: hidden; background: #fff; border-radius: var(--radio); padding: 26px 24px 24px;
  border: 1px solid var(--borde);
  transition: transform 0.45s var(--suave), box-shadow 0.45s var(--suave), border-color 0.3s ease;
}
/* Barra superior que se llena */
.paso::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--cian), var(--marino-2));
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--suave);
}
.paso__numero {
  display: inline-block; font-family: var(--titulos); font-weight: 800; font-size: 2.2rem; line-height: 1;
  background: linear-gradient(100deg, var(--cian-oscuro) 0%, var(--cian-oscuro) 40%, var(--cian) 50%, var(--cian-oscuro) 60%, var(--cian-oscuro) 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 0.9s var(--suave), transform 0.45s var(--suave);
}
.paso h3 { font-size: 1.1rem; color: var(--marino); margin: 12px 0 8px; }
.paso p { color: var(--texto-suave); font-size: 0.95rem; }
@media (hover: hover) {
  .paso:hover { transform: translateY(-8px); box-shadow: 0 22px 40px rgba(11, 6, 64, 0.13); border-color: transparent; }
  .paso:hover::before { transform: scaleX(1); }
  .paso:hover .paso__numero { background-position: 0 0; transform: translateY(-3px) scale(1.06); }
}
/* En celular (sin hover) la barra se llena y el número brilla al aparecer */
@media (hover: none) {
  .js .paso.visible::before { transform: scaleX(1); transition-delay: calc(var(--i, 0) * 110ms + 0.3s); }
  .js .paso.visible .paso__numero { background-position: 0 0; transition-delay: calc(var(--i, 0) * 110ms + 0.2s); }
}

.garantia {
  position: relative; overflow: hidden;
  margin-top: 22px; display: flex; gap: 16px; align-items: flex-start;
  background: var(--marino); color: #fff; border-radius: 18px; padding: 24px;
}
/* Destello que cruza la tarjeta al aparecer */
.garantia::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(94, 230, 245, 0.18) 50%, transparent 65%);
  transform: translateX(-100%);
}
.js .garantia.visible::after { animation: destello 1.6s var(--suave) 0.4s forwards; }
@keyframes destello { to { transform: translateX(100%); } }
.garantia__icono {
  flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(0, 201, 225, 0.15); color: var(--cian);
}
.garantia__icono svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.garantia__check { stroke-dasharray: 12; stroke-dashoffset: 0; }
.js .garantia .garantia__check { stroke-dashoffset: 12; transition: stroke-dashoffset 0.6s var(--suave) 0.5s; }
.js .garantia.visible .garantia__check { stroke-dashoffset: 0; }
.garantia h3 { font-size: 1.1rem; margin-bottom: 8px; }
.garantia p { color: rgba(255, 255, 255, 0.85); }
.garantia__nota { font-size: 0.85rem; margin-top: 8px; color: rgba(255, 255, 255, 0.65) !important; }

/* ── Para quién es ───────────────────────────────────────────────────────── */
.encaje { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 760px) { .encaje { grid-template-columns: 1fr 1fr; } }
.encaje__col { border-radius: var(--radio); padding: 24px; border: 1px solid var(--borde); }
.encaje__col--si { background: var(--cian-suave); border-color: transparent; }
.encaje__col h3 { font-size: 1.05rem; color: var(--marino); margin-bottom: 12px; }
.encaje__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.encaje__col li { position: relative; padding-left: 30px; }
.encaje__col li::before {
  position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
  transition: transform 0.4s var(--suave);
}
.encaje__col--si li::before { content: "✓"; background: var(--cian); color: var(--marino); }
.encaje__col--no li::before { content: "✕"; background: #e8eaf0; color: var(--texto-suave); }
.js .encaje__col li::before { transform: scale(0); }
.js .encaje__col.visible li::before { transform: scale(1); }
.js .encaje__col.visible li:nth-child(1)::before { transition-delay: 0.25s; }
.js .encaje__col.visible li:nth-child(2)::before { transition-delay: 0.35s; }
.js .encaje__col.visible li:nth-child(3)::before { transition-delay: 0.45s; }
.js .encaje__col.visible li:nth-child(4)::before { transition-delay: 0.55s; }

/* ── Respaldo ────────────────────────────────────────────────────────────── */
.respaldo { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) { .respaldo { grid-template-columns: 1.3fr 1fr; gap: 56px; } }
.respaldo__texto > p:not(.antetitulo) { color: var(--texto-suave); font-size: 1.05rem; margin-top: 14px; }
.sellos { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.sellos li {
  display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--borde);
  border-radius: 12px; padding: 12px 16px; font-family: var(--titulos); font-weight: 700; color: var(--marino);
}
.sellos span {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.75rem; font-weight: 600;
  color: var(--cian-oscuro); background: var(--cian-suave); border-radius: 6px; padding: 3px 7px;
}
/* Tarjeta del logo con borde de luz que gira */
.respaldo__marca {
  position: relative; border-radius: 20px; padding: 2px; overflow: hidden; justify-self: center; width: 100%; max-width: 380px;
  background: var(--borde);
}
.respaldo__marca::before {
  content: ""; position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, transparent 0 70%, var(--cian) 80%, transparent 90%);
}
.js .respaldo__marca.visible::before { animation: girar 5s linear 1; }
.respaldo__marca img { position: relative; background: #fff; border-radius: 18px; padding: 44px 36px; width: 100%; }
@keyframes girar { to { transform: rotate(1turn); } }
.sellos li { transition: transform 0.35s var(--suave), box-shadow 0.35s var(--suave), border-color 0.3s ease; }
.sellos span { transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s var(--suave); }
.respaldo__marca { transition: transform 0.45s var(--suave), box-shadow 0.45s var(--suave); }
@media (hover: hover) {
  .sellos li:hover { transform: translateX(6px); border-color: var(--cian); box-shadow: 0 12px 28px rgba(11, 6, 64, 0.1); }
  .sellos li:hover span { background: var(--marino); color: var(--cian); transform: scale(1.08); }
  .respaldo__marca:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(11, 6, 64, 0.13); }
}

/* ── Agenda y formulario ─────────────────────────────────────────────────── */
.seccion--agenda {
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(0, 201, 225, 0.14), transparent 60%),
    linear-gradient(180deg, var(--marino) 0%, var(--marino-2) 100%);
  color: #fff;
}
.seccion--agenda h2 { color: #fff; }
.seccion--agenda .seccion__bajada { color: rgba(255, 255, 255, 0.8); }

.etapas { list-style: none; padding: 0; margin: 26px 0 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); }
.etapas__item { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; transition: color 0.3s ease; }
.etapas__item span {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.35); font-size: 0.8rem;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.35s var(--suave);
}
.etapas__item--activa { color: #fff; }
.etapas__item--activa span { background: var(--cian); border-color: var(--cian); color: var(--marino); transform: scale(1.1); }
.etapas__item--hecha span { background: rgba(0, 201, 225, 0.25); border-color: var(--cian); color: #fff; }

.formulario, .calendario {
  background: #fff; color: var(--texto); border-radius: 18px; padding: 24px 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}
@media (min-width: 560px) { .formulario { padding: 30px; } }
.paso-form { border: 0; margin: 0; padding: 0; min-width: 0; }
@keyframes pasoEntra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.js .paso-form.entrando { animation: pasoEntra 0.45s var(--suave); }
.paso-form__titulo { font-family: var(--titulos); font-weight: 800; font-size: 1.15rem; color: var(--marino); padding: 0; margin-bottom: 18px; outline: none; }

.campo { margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.campo label, .campo__pregunta { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; color: var(--marino); }
.opcional { font-weight: 400; color: var(--texto-suave); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"] {
  width: 100%; height: 50px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--texto);
  background: #fff; border: 1.5px solid #8a94a6; border-radius: 10px; appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo input[type="text"]:focus, .campo input[type="email"]:focus, .campo input[type="tel"]:focus { outline: none; border-color: var(--cian-oscuro); box-shadow: 0 0 0 3px rgba(0, 201, 225, 0.25); }
.confirmacion input:focus-visible { outline: 3px solid var(--cian-oscuro); outline-offset: 2px; }
.campo__ayuda { font-size: 0.85rem; color: var(--texto-suave); margin: -10px 0 16px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.aviso-prueba { background: #fff4e5; color: #8a4b00; border: 1px solid #f0c27a; border-radius: 10px; padding: 10px 12px; font-size: 0.85rem; margin-bottom: 12px; }
.telefono { display: flex; }
.telefono__prefijo {
  display: grid; place-items: center; padding: 0 12px; background: var(--fondo-suave);
  border: 1.5px solid #8a94a6; border-right: 0; border-radius: 10px 0 0 10px; font-weight: 600; color: var(--texto-suave);
}
.telefono input { border-radius: 0 10px 10px 0 !important; }

/* Fichas: opciones de un toque */
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha { position: relative; margin: 0 !important; cursor: pointer; }
.ficha input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ficha span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  border: 1.5px solid #8a94a6; background: #fff; color: var(--texto); font-weight: 500; font-size: 0.95rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--suave);
}
@media (hover: hover) { .ficha:hover span { border-color: var(--cian-oscuro); transform: translateY(-1px); } }
.ficha input:checked + span { background: var(--marino); border-color: var(--marino); color: #fff; }
.ficha input:checked + span::before { content: "✓"; color: var(--cian); margin-right: 8px; font-weight: 700; }
.ficha input:focus + span { outline: 3px solid var(--cian-oscuro); outline-offset: 2px; }
.ficha input:focus:not(:focus-visible) + span { outline: none; }

.confirmacion { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--texto-suave); margin: 4px 0 12px; cursor: pointer; font-weight: 400 !important; }
.confirmacion input { accent-color: var(--cian-oscuro); width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.campo--casilla { margin-bottom: 8px; }
/* Código de referido: un enlace que abre la casilla, para no alargar el formulario */
.campo--codigo { margin-bottom: 12px; }
.enlace-codigo {
  background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; font-size: 0.9rem;
  font-weight: 600; color: var(--cian-oscuro); text-decoration: underline; text-underline-offset: 3px;
}
.enlace-codigo:focus-visible { outline: 3px solid var(--cian-oscuro); outline-offset: 2px; }
.campo__codigo-caja input { text-transform: uppercase; letter-spacing: 0.04em; }
.no-js .campo__codigo-caja[hidden] { display: block !important; }
.no-js .enlace-codigo { display: none; }
.campo .confirmacion { display: flex; margin-bottom: 4px; color: var(--texto-suave); font-size: 0.92rem; }
.campo__error { display: none; color: var(--error); font-size: 0.85rem; margin-top: 6px; }
.campo--error .campo__error { display: block; }
.campo.campo--error input[type="text"], .campo.campo--error input[type="email"], .campo.campo--error input[type="tel"],
.campo.campo--error .telefono__prefijo, .campo.campo--error .ficha span { border-color: var(--error); }
@keyframes sacudir { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.js .campo--error { animation: sacudir 0.35s ease; }

.formulario .boton { margin-top: 8px; }
.volver {
  display: block; margin: 12px auto 0; background: none; border: 0; padding: 6px 10px; cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--texto-suave); text-decoration: underline;
}
.formulario__nota { font-size: 0.82rem; color: var(--texto-suave); text-align: center; margin-top: 10px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.calendario { padding: 18px 12px; }
.calendario__saludo { font-family: var(--titulos); font-weight: 700; color: var(--marino); text-align: center; padding: 6px 8px 14px; outline: none; }
.calendario__marco iframe { width: 100%; height: 1050px; border: 0; display: block; }
@media (min-width: 760px) { .calendario__marco iframe { height: 760px; } }

/* ── Preguntas ───────────────────────────────────────────────────────────── */
.preguntas { margin-top: 26px; border-top: 1px solid var(--borde); }
.preguntas details { border-bottom: 1px solid var(--borde); }
.preguntas summary {
  list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative;
  font-family: var(--titulos); font-weight: 700; color: var(--marino); transition: color 0.2s ease;
}
@media (hover: hover) { .preguntas summary:hover { color: var(--cian-oscuro); } }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--cian-oscuro); border-bottom: 2px solid var(--cian-oscuro);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.35s var(--suave);
}
.preguntas details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.preguntas details p { color: var(--texto-suave); padding: 0 0 18px; }
.js .preguntas details[open] p { animation: entrar 0.45s var(--suave); }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie { background: var(--marino); color: rgba(255, 255, 255, 0.7); padding: 32px 0 110px; font-size: 0.88rem; }
@media (min-width: 860px) { .pie { padding-bottom: 32px; } }
.pie--simple { padding-bottom: 32px; }
.pie__fila { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
@media (min-width: 760px) { .pie__fila { flex-direction: row; justify-content: space-between; text-align: left; } }
.pie img { width: 82px; }
.pie a { color: rgba(255, 255, 255, 0.85); }

/* Botón fijo en celular */
.cta-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(11, 6, 64, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  animation: subir 0.35s var(--suave);
}
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 860px) { .cta-fija { display: none !important; } }
@media (max-width: 859px) { html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

/* ── Landing express ─────────────────────────────────────────────────────── */
.portada--express { padding-bottom: 40px; }
.claves { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; width: 100%; max-width: 820px; text-align: left; }
@media (min-width: 760px) { .claves { grid-template-columns: repeat(3, 1fr); } }
.claves__nota { max-width: 820px; margin-top: 14px; font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.claves li {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(94, 230, 245, 0.2); color: rgba(255, 255, 255, 0.88); font-size: 0.92rem;
}
.claves strong { display: block; color: #fff; font-family: var(--titulos); font-size: 0.98rem; margin-bottom: 2px; }
.claves .clave__icono { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(0, 201, 225, 0.15); color: var(--cian); }
.claves svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seccion--express { padding-top: 8px; }

/* ── Gracias ─────────────────────────────────────────────────────────────── */
.gracias { padding-top: 48px; padding-bottom: 72px; text-align: center; }
.gracias__check {
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cian); color: var(--marino); box-shadow: 0 0 0 10px rgba(0, 201, 225, 0.18);
}
.gracias__check svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gracias h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; }
.gracias .portada__bajada { margin-left: auto; margin-right: auto; }

/* ── Movimiento reducido: todo quieto y visible ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .entra, .js [data-revelar] { opacity: 1 !important; transform: none !important; }
  .portada__fondo::before, .portada__fondo::after, .respaldo__marca::before { animation: none !important; }
}