
:root{--azul:#1E9BFF;--noche:#0B1530;--texto:#1d2433;--suave:#5b6478;--borde:#d9e1ee;--fondo:#f4f7fb;--error:#c62828}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--texto);background:var(--fondo);line-height:1.45}
.cabecera{background:#fff;border-bottom:3px solid var(--azul);text-align:center;padding:14px 16px}
.cabecera img{max-width:220px;height:auto}
.contenedor{max-width:640px;margin:0 auto;padding:16px}
h1{font-size:1.45rem;margin:.4rem 0;color:var(--noche)}
.descripcion{margin:.2rem 0 .6rem}
.nota{color:var(--suave);font-size:.9rem;margin:0 0 1rem}
.pregunta{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:16px;margin:0 0 14px;min-width:0;max-width:100%}
.opcion span,legend strong{overflow-wrap:anywhere}
legend{padding:0;width:100%;float:left}
legend + *{clear:both}
legend strong{display:block;font-size:1.05rem;margin:.35rem 0 .2rem;color:var(--noche)}
legend small{color:var(--suave)}
.numero{font-size:.8rem;font-weight:700;color:var(--azul);text-transform:uppercase;letter-spacing:.04em}
.obligatoria{display:inline-block;font-size:.7rem;font-weight:700;color:#fff;background:var(--noche);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.opciones{display:grid;gap:8px;margin-top:10px}
.opcion{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--borde);border-radius:12px;padding:12px;cursor:pointer;background:#fff}
.opcion input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--azul);flex:none}
.opcion:has(input:checked){border-color:var(--azul);background:#eef7ff}
.campo{display:block;font-weight:600;margin-top:12px}
.campo input{display:block;width:100%;margin-top:6px;font:inherit;padding:12px;border:1.5px solid var(--borde);border-radius:10px;background:#fff}
.campo input:focus,.opcion:focus-within{outline:2px solid var(--azul);outline-offset:1px}
.error{color:var(--error);font-size:.88rem;margin:.4rem 0 0;min-height:0}
.error:empty{display:none}
.invalida{border-color:var(--error)}
.consentimiento .opcion{border:none;padding:0}
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
button{width:100%;font:inherit;font-weight:700;font-size:1.05rem;color:#fff;background:var(--azul);border:0;border-radius:12px;padding:15px;margin:6px 0 24px;cursor:pointer}
button[disabled]{opacity:.6;cursor:progress}
.mensaje{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:22px;margin-top:10px}
.exito{position:relative;overflow:hidden;text-align:center;color:#e8f1ff;border-radius:20px;padding:28px 20px 24px;margin-top:10px;
  background:radial-gradient(120% 80% at 50% 0%,#1d4fb8 0%,#0f2a6b 45%,var(--noche) 100%);box-shadow:0 12px 32px rgba(11,21,48,.35);animation:aparecer .5s ease-out both}
.exito h1{color:#fff;font-size:1.5rem;margin:18px 0 10px}
.exito p{margin:0 auto 12px;max-width:34em}
.exito .destacado{color:#fff;font-weight:600}
.bonnie{position:relative;width:min(220px,62vw);aspect-ratio:1;margin:0 auto}
.bonnie video{width:100%;height:100%;object-fit:cover;border-radius:50%;background:#0f2a6b;
  box-shadow:0 0 0 4px rgba(30,155,255,.85),0 0 28px 6px rgba(30,155,255,.45);animation:saludo 3.2s ease-in-out .6s infinite}
.check{position:absolute;right:2%;bottom:4%;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:800;color:#fff;
  background:#19c37d;box-shadow:0 0 0 4px var(--noche),0 0 18px rgba(25,195,125,.8);animation:check .45s cubic-bezier(.2,1.6,.4,1) .35s both}
.puntos{display:flex;justify-content:center;gap:8px;margin-top:6px}
.puntos span{width:9px;height:9px;border-radius:50%;background:#5fd0ff;animation:punto 1.2s ease-in-out infinite}
.puntos span:nth-child(2){animation-delay:.2s}.puntos span:nth-child(3){animation-delay:.4s}
@keyframes aparecer{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes check{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes saludo{0%,100%{transform:rotate(0)}20%{transform:rotate(-3deg)}40%{transform:rotate(2deg)}60%{transform:rotate(0)}}
@keyframes punto{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.presentacion{text-align:center}
.presentacion h2{color:var(--noche);font-size:1.15rem;margin:22px 0 8px}
.video-presentacion{display:block;width:min(100%,340px);height:auto;aspect-ratio:9/16;margin:16px auto;border-radius:18px;background:var(--noche);box-shadow:0 10px 28px rgba(11,21,48,.25)}
.servicios{list-style:none;padding:0;margin:0 auto;max-width:460px;text-align:left}
.servicios li{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:10px 12px 10px 38px;margin:0 0 8px;position:relative}
.servicios li::before{content:"✓";position:absolute;left:13px;color:var(--azul);font-weight:800}
.boton-wa{display:inline-block;margin:10px 0 26px;padding:14px 22px;border-radius:12px;background:#19c37d;color:#fff;font-weight:700;text-decoration:none}
@media (prefers-reduced-motion:reduce){.exito,.bonnie video,.check,.puntos span{animation:none}}
.pie{text-align:center;color:var(--suave);font-size:.8rem;padding:12px 16px 28px}
