:root{
  --mar:#0b3a8c; --mar-osc:#072661; --agua:#00b7e8; --agua-claro:#e8f8ff; --cielo:#f3fbff;
  --sol:#ffd21f; --naranja:#ff5a1f; --naranja-osc:#d94310; --verde:#16a34a; --verde-osc:#0f7a37;
  --texto:#0f1d33; --suave:#5b6b80; --borde:#dbe9f5; --blanco:#fff;
  --radio:20px; --sombra:0 10px 30px rgba(7,38,97,.12);
  --titulo:"Baloo 2", system-ui, sans-serif;
  --cuerpo:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanco);color:var(--texto);font:16px/1.55 var(--cuerpo);padding-bottom:86px}
h1,h2{font-family:var(--titulo);line-height:1.05;margin:0 0 .35em;color:var(--mar-osc);letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,9vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,6.5vw,2.2rem);font-weight:800;text-align:center}
p{margin:0 0 .8em}
a{color:var(--mar)}
img{max-width:100%;display:block}
.centro{text-align:center}.pequeno{font-size:.85rem;color:var(--suave)}

/* Aviso de pendientes (solo con ?pendientes en local) */
.aviso-pendientes{background:#fff3c4;border-bottom:2px solid #e8b400;padding:10px 16px;font-size:.85rem}
.aviso-pendientes b{display:block}

/* Franja de anuncios que se mueve */
.anuncio{background:var(--mar-osc);color:#fff;overflow:hidden;white-space:nowrap;font-size:.8rem;font-weight:600}
.anuncio-pista{display:inline-flex;gap:36px;padding:8px 0;animation:corre 22s linear infinite}
.anuncio-pista span{flex:none}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.anuncio-pista{animation:none}}

.cabecera{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--borde)}
.logo{font-family:var(--titulo);font-weight:800;font-size:1.5rem;color:var(--mar);letter-spacing:-.02em}
.btn-mini{border:0;background:var(--naranja);color:#fff;font:700 .9rem var(--cuerpo);padding:8px 16px;border-radius:999px;cursor:pointer}

main{max-width:1080px;margin:0 auto}

/* HERO */
.hero{padding:0 0 8px}
.hero-media{position:relative;background:linear-gradient(165deg,#dff6ff 0%,#bfeeff 55%,#8fdcfb 100%)}
.carrusel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:1/1}
.carrusel::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center}
.slide img,.slide video{width:100%;height:100%;object-fit:cover}
.puntos{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px}
.puntos i{width:7px;height:7px;border-radius:50%;background:rgba(7,38,97,.25);transition:all .2s}
.puntos i.on{width:22px;border-radius:99px;background:var(--mar)}
.sticker{position:absolute;top:14px;right:14px;background:var(--naranja);color:#fff;font:800 1.15rem var(--titulo);
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;transform:rotate(-12deg);
  box-shadow:0 6px 16px rgba(217,67,16,.35)}

.hero-texto{padding:20px 18px 6px}
.eyebrow{display:inline-block;background:#fff4c2;color:#8a5a00;font-weight:700;font-size:.82rem;padding:5px 12px;border-radius:999px;margin-bottom:10px}
.resalta{color:var(--agua);background:linear-gradient(transparent 62%,rgba(255,210,31,.55) 62%)}
.sub{font-size:1.08rem;color:var(--suave);margin-bottom:16px}

.precio-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--cielo);
  border:2px solid var(--borde);border-radius:18px;padding:14px 16px;margin-bottom:10px}
.antes{display:block;color:var(--suave);text-decoration:line-through;font-size:1rem;font-weight:600}
.ahora{display:block;font:800 2.5rem/1 var(--titulo);color:var(--mar)}
.precio-lado{text-align:right}
.por{display:block;font-weight:700;color:var(--mar-osc);margin-bottom:6px}
.ahorro{display:inline-block;background:var(--verde);color:#fff;font-weight:700;font-size:.82rem;padding:4px 10px;border-radius:999px}
.urgencia{color:var(--naranja-osc);font-weight:700;margin:4px 0 14px;text-align:center}

.btn{display:block;width:100%;border:0;border-radius:16px;padding:17px 18px;font:800 1.15rem/1.1 var(--titulo);
  cursor:pointer;text-align:center;text-decoration:none;letter-spacing:.01em}
.btn-principal{background:linear-gradient(180deg,#ff7a3d,var(--naranja));color:#fff;box-shadow:0 5px 0 var(--naranja-osc),0 12px 24px rgba(255,90,31,.25)}
.btn-principal:active{transform:translateY(3px);box-shadow:0 2px 0 var(--naranja-osc)}
.btn-wsp{background:linear-gradient(180deg,#22c55e,var(--verde));box-shadow:0 5px 0 var(--verde-osc),0 12px 24px rgba(22,163,74,.25)}
.btn-wsp:active{box-shadow:0 2px 0 var(--verde-osc)}
.btn-claro{background:#fff;color:var(--mar);box-shadow:0 5px 0 rgba(0,0,0,.15)}
.btn:focus-visible,summary:focus-visible,.pack:focus-within{outline:3px solid var(--sol);outline-offset:2px}

.garantias{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.garantias li{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:.78rem;font-weight:600;color:var(--mar-osc)}
.garantias span{font-size:1.4rem;width:44px;height:44px;border-radius:50%;background:var(--agua-claro);display:flex;align-items:center;justify-content:center}

/* Bloques */
.bloque{padding:40px 18px}
.bloque-claro{background:var(--cielo)}
.bloque>h2+p{margin-top:-4px}

.beneficios{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:620px;margin:18px auto 0}
.beneficios article{background:#fff;border:1px solid var(--borde);border-radius:18px;padding:16px 14px;box-shadow:0 4px 14px rgba(7,38,97,.05)}
.beneficios b{display:block;font:800 1.15rem/1.1 var(--titulo);color:var(--mar-osc);margin:10px 0 4px}
.beneficios p{margin:0;font-size:.88rem;color:var(--suave)}
.ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;font-size:1.5rem}
.ico-1{background:#dff4ff}.ico-2{background:#fff4c2}.ico-3{background:#ffe4f1}.ico-4{background:#dcfce7}

.comparar{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:620px;margin:18px auto 0}
.col{border-radius:18px;padding:16px 14px}
.col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:.92rem;font-weight:600}
.col-titulo{font:800 1.1rem var(--titulo);margin-bottom:10px}
.col-vieja{background:#f2f4f7;color:#6b7280}
.col-nueva{background:linear-gradient(160deg,var(--mar),var(--agua));color:#fff;box-shadow:var(--sombra);transform:scale(1.03)}

.banda-regalo{display:grid;background:linear-gradient(160deg,var(--mar-osc),var(--mar));color:#dfeeff}
.banda-regalo img{width:100%;aspect-ratio:1;object-fit:cover}
.banda-regalo>div{padding:30px 20px 36px}
.banda-regalo h2{color:#fff;text-align:left}
.banda-regalo .btn{margin-top:8px}

.packs{display:grid;gap:14px;max-width:560px;margin:18px auto}
.pack{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--borde);
  border-radius:18px;padding:18px 16px;cursor:pointer;transition:border-color .15s, box-shadow .15s, transform .15s}
.pack input{position:absolute;opacity:0;pointer-events:none}
.pack .radio{flex:0 0 24px;height:24px;border-radius:50%;border:2px solid #b9cde0}
.pack.activo{border-color:var(--mar);box-shadow:0 0 0 4px rgba(11,58,140,.12);transform:translateY(-1px)}
.pack.activo .radio{border:7px solid var(--mar)}
.pack .info{flex:1}
.pack .nombre{display:block;font:800 1.2rem/1.1 var(--titulo);color:var(--mar-osc)}
.pack .detalle{display:block;font-size:.85rem;color:var(--suave);margin-top:2px}
.pack .precio{text-align:right;font:800 1.5rem/1 var(--titulo);color:var(--mar)}
.pack .precio small{display:block;font:700 .75rem var(--cuerpo);color:var(--verde);margin-top:4px}
.pack .badge{position:absolute;top:-12px;left:16px;background:var(--naranja);color:#fff;font-size:.72rem;
  font-weight:800;padding:3px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.pack.destacado{border-color:var(--naranja)}
.pack.destacado.activo{border-color:var(--mar)}
#packs .btn{max-width:560px;margin:0 auto}

.pasos{list-style:none;padding:0;margin:18px auto 0;max-width:560px;display:grid;gap:12px}
.pasos li{display:flex;gap:14px;align-items:flex-start;background:var(--cielo);border-radius:16px;padding:14px}
.pasos li>span{flex:none;width:36px;height:36px;border-radius:50%;background:var(--mar);color:#fff;font:800 1.1rem var(--titulo);display:flex;align-items:center;justify-content:center}
.pasos b{display:block;color:var(--mar-osc)}
.pasos li div{font-size:.92rem;color:var(--suave)}
.nota-seguridad{max-width:560px;margin:16px auto 0;font-size:.8rem;color:var(--suave);text-align:center}

.resenas-pronto{max-width:560px;margin:14px auto 0;display:flex;gap:12px;align-items:center;background:#fff;
  border:1px solid var(--borde);border-radius:16px;padding:16px;color:var(--suave)}
.resenas-pronto span{font-size:1.8rem}.resenas-pronto p{margin:0}

#faq details{max-width:620px;margin:0 auto 10px;background:#fff;border:1px solid var(--borde);border-radius:16px;padding:0 16px}
#faq summary{font-weight:700;padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+";font-size:1.4rem;color:var(--mar);line-height:1}
#faq details[open] summary::after{content:"–"}
#faq details p{margin:0 0 16px;color:var(--suave)}

.cierre{text-align:center;padding:44px 20px 48px;background:linear-gradient(165deg,var(--agua),var(--mar));color:#e8f6ff}
.cierre h2{color:#fff}
.cierre .btn{max-width:420px;margin:16px auto 0}

.pie{background:var(--mar-osc);color:#cfe3f2;text-align:center;padding:26px 16px 32px;font-size:.88rem}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin-bottom:10px}
.pie a{color:#fff}
.pie .pequeno{color:#9fc0d8}

/* Barra fija abajo: solo celular */
.barra-fija{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;
  background:#fff;border-top:1px solid var(--borde);box-shadow:0 -8px 24px rgba(7,38,97,.12);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));transition:transform .2s}
.barra-fija>div{flex:1;line-height:1.2}
.barra-fija b{font:800 1.4rem var(--titulo);color:var(--mar)}
.barra-fija small{display:block;color:var(--suave);font-size:.78rem}
.barra-fija .btn{width:auto;padding:14px 24px;font-size:1.05rem}
.barra-fija.oculta{transform:translateY(110%)}

/* Formulario como hoja inferior */
.hoja{border:0;padding:0;width:100%;max-width:520px;max-height:92vh;margin:auto auto 0;border-radius:22px 22px 0 0;
  background:#fff;color:var(--texto);overflow:auto}
.hoja::backdrop{background:rgba(7,25,55,.6)}
.hoja form,.form-ok{padding:18px 16px calc(20px + env(safe-area-inset-bottom))}
.hoja-cabeza{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.hoja-cabeza h2{text-align:left;margin:0;font-size:1.5rem}
.cerrar{border:0;background:var(--cielo);width:38px;height:38px;border-radius:50%;font-size:1.1rem;cursor:pointer}
.hoja label{display:block;font-weight:600;font-size:.9rem;margin:10px 0 0}
.hoja label small{font-weight:400;color:var(--suave)}
.hoja input,.hoja select{display:block;width:100%;margin-top:4px;padding:13px 12px;font:16px var(--cuerpo);
  border:1.5px solid var(--borde);border-radius:12px;background:#fff;color:var(--texto)}
.hoja input:focus,.hoja select:focus{outline:none;border-color:var(--mar);box-shadow:0 0 0 3px rgba(11,58,140,.15)}
.hoja input.mal,.hoja select.mal{border-color:var(--naranja)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.packs-mini{border:0;padding:0;margin:6px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.packs-mini legend{font-weight:600;font-size:.9rem;margin-bottom:4px}
.packs-mini label{margin:0;border:2px solid var(--borde);border-radius:12px;padding:8px 4px;text-align:center;cursor:pointer;font-size:.82rem;position:relative}
.packs-mini label b{display:block;font-size:.98rem;color:var(--mar-osc)}
.packs-mini input{position:absolute;opacity:0;pointer-events:none}
.packs-mini label.activo{border-color:var(--mar);background:var(--agua-claro)}
.error{background:#ffe9e6;color:#a8291a;border-radius:10px;padding:10px 12px;font-size:.9rem;margin:12px 0 0}
.total{display:flex;justify-content:space-between;align-items:center;margin:16px 0 12px;padding:12px 14px;background:var(--cielo);border-radius:12px}
.total b{font:800 1.5rem var(--titulo);color:var(--mar)}
.form-ok{text-align:center}
.ok-ico{font-size:3rem}
.form-ok h2{text-align:center}

@media (min-width:860px){
  body{padding-bottom:0}
  .barra-fija{display:none}
  .hero{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;padding:36px 24px}
  .hero-media{border-radius:28px;overflow:hidden;box-shadow:var(--sombra)}
  .hero-texto{padding:0}
  .banda-regalo{grid-template-columns:1fr 1fr;align-items:center;border-radius:28px;overflow:hidden;margin:20px 24px}
  .hoja{margin:auto;border-radius:22px}
}

/* Páginas legales */
.legal{max-width:720px;margin:0 auto;padding:24px 16px 48px;background:#fff}
.legal h1{font-size:1.9rem}
.legal h2{text-align:left;font-size:1.25rem;margin-top:1.4em}
.legal .volver{display:inline-block;margin-bottom:12px}

/* Kit Verano */
.kit{max-width:620px;margin:0 auto;padding:40px 18px}
.kit-card{background:linear-gradient(165deg,#fff7d6,#ffe9a8);border:2px solid var(--sol);border-radius:24px;overflow:hidden;box-shadow:var(--sombra)}
.kit-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.kit-texto{padding:20px 18px 22px}
.kit-texto h2{text-align:left;margin-bottom:.2em}
.kit-tag{display:inline-block;background:var(--naranja);color:#fff;font-weight:800;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;padding:4px 12px;border-radius:999px;margin-bottom:10px}
.kit-lista{list-style:none;padding:0;margin:10px 0 14px;display:grid;gap:6px;font-weight:600;color:var(--mar-osc)}
.kit-precio{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.kit-precio .antes{display:inline}
.kit-precio .ahora{display:inline;font-size:2.2rem}