:root{
  --cian:#2ee6d6;
  --cian-osc:#00b8a7;
  --cian-suave:rgba(46, 230, 214, 0.15);
  --verde:#25D366;
  --verde-osc:#1eb85a;
  --gris:#10141a;
  --gris-card:#1c232c;
  --plata:#f4f6f8;
  --borde:#e3e7ec;
  --texto:#3a4048;
  --muted:#6b7480;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--texto);background:#fff;line-height:1.65}
.contenedor{max-width:1024px;margin:0 auto;padding:0 20px}
section{padding:56px 0}
h1,h2,h3{line-height:1.25;font-weight:800;color:var(--gris)}
h2{font-size:clamp(1.55rem,4.2vw,2.2rem)}
.h2{text-align:center;margin-bottom:12px}
.sub-h2{text-align:center;color:var(--muted);max-width:680px;margin:0 auto 36px}
a{color:var(--cian-osc)}

/* ===== CTA VERDE WHATSAPP ===== */
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--verde);color:#fff!important;font-weight:700;
     font-size:1.05rem;padding:16px 30px;border-radius:50px;text-decoration:none;border:none;cursor:pointer;
     box-shadow:0 6px 20px rgba(37,211,102,.35);transition:transform .15s,background .2s}
.cta:hover{background:var(--verde-osc);transform:translateY(-2px)}
.cta-grande{font-size:1.15rem;padding:19px 36px}
.cta svg{width:22px;height:22px;flex-shrink:0}
.cta-centro{text-align:center}

/* ===== BARRA SUPERIOR ===== */
.barra-top{background:#0b1320;color:#fff;text-align:center;
     font-size:.9rem;padding:10px 14px;position:sticky;top:0;z-index:60;font-weight:600;border-bottom:1px solid var(--cian)}
.barra-top strong{color:var(--cian)}

/* ===== HERO ===== */
.hero{background:
  radial-gradient(circle at 15% 20%,var(--cian-suave),transparent 40%),
  radial-gradient(circle at 85% 80%,rgba(0,184,167,.1),transparent 40%),
  var(--plata);text-align:center;padding-top:64px}
.hero .etiqueta{display:inline-block;background:#fff;color:var(--cian-osc);font-weight:700;font-size:.85rem;
  padding:7px 18px;border-radius:999px;margin-bottom:20px;border:1px solid rgba(46,230,214,.4);box-shadow:0 2px 10px rgba(0,184,167,.1)}
.hero h1{font-size:clamp(1.9rem,5.5vw,3rem);max-width:840px;margin:0 auto 16px}
.hero h1 .acento{background:linear-gradient(90deg,var(--cian-osc),var(--cian));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:clamp(1rem,2.6vw,1.2rem);color:#555b63;max-width:740px;margin:0 auto 22px}
.lote-insignia{background:#fff;border:1.5px solid var(--cian);color:var(--gris);font-weight:700;
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;margin-bottom:28px;
  box-shadow:0 3px 14px rgba(46,230,214,.25);font-size:.95rem}
.lote-insignia::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--cian);
  box-shadow:0 0 0 4px var(--cian-suave),0 0 12px var(--cian)}
.video-caja{max-width:600px;margin:0 auto 30px;aspect-ratio:9/16;background:linear-gradient(160deg,#10141a,#1c232c);
  border-radius:20px;display:flex;align-items:center;justify-content:center;color:#8b95a1;
  border:1px solid #2b3540;position:relative;overflow:hidden}
.video-caja::after{content:"";position:absolute;inset:-2px;border-radius:20px;padding:2px;
  background:conic-gradient(from var(--ang,0deg),transparent 10%,var(--cian) 25%,transparent 40%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:led 4s linear infinite;pointer-events:none}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes led{to{--ang:360deg}}
.video-caja span{padding:0 40px;text-align:center;font-size:.95rem}
.micropruebas{margin-top:16px;font-size:.85rem;color:var(--muted)}

/* ===== PROBLEMA ===== */
.problema{background:var(--gris);color:#dde1e6}
.problema h2{color:#fff}
.relato{max-width:740px;margin:0 auto 28px;font-size:1.1rem;color:#c9ced6;text-align:center}
.contraste{background:#1c232c;border-left:4px solid var(--cian);border-radius:10px;
  padding:20px 24px;max-width:740px;margin:0 auto 32px;color:#c0c6ce}
.contraste strong{color:var(--cian)}
.problema .cta-centro{text-align:center}

/* ===== PASOS ===== */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:36px}
.paso{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:32px 24px 26px;position:relative;
  box-shadow:0 2px 10px rgba(0,0,0,.04)}
.paso .numero{position:absolute;top:-17px;left:20px;background:linear-gradient(135deg,var(--cian-osc),var(--cian));
  color:#fff;font-weight:800;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.paso h3{margin:6px 0 10px;font-size:1.12rem}
.tranquilidad{background:#f0fdfb;border:1px solid rgba(46,230,214,.4);border-radius:14px;padding:22px 26px;
  max-width:780px;margin:0 auto;display:flex;gap:16px;align-items:flex-start;box-shadow:0 2px 12px rgba(46,230,214,.1)}
.tranquilidad .icono{font-size:1.7rem}

/* ===== VENTAJAS ===== */
.ventajas{background:var(--plata)}
.cuadricula{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:36px}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:28px 22px;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.04);border-top:3px solid var(--cian)}
.tarjeta .emoji{font-size:2rem;display:block;margin-bottom:12px}
.tarjeta h3{font-size:1.03rem;margin-bottom:8px}
.tarjeta p{font-size:.92rem;color:var(--muted)}

/* ===== FAQ ===== */
details{background:#fff;border:1px solid var(--borde);border-radius:12px;margin:0 auto 12px;max-width:780px}
summary{padding:18px 22px;font-weight:700;cursor:pointer;list-style:none;position:relative;color:var(--gris)}
summary::after{content:"+";position:absolute;right:20px;font-size:1.3rem;color:var(--cian-osc);font-weight:400}
details[open] summary::after{content:"–"}
details p{padding:0 22px 18px;color:#555b63;font-size:.95rem}

/* ===== OFERTA ===== */
.oferta{background:linear-gradient(160deg,#0b1320,#161f2c);color:#fff}
.caja-oferta{max-width:620px;margin:0 auto 32px;background:#fff;color:var(--texto);border-radius:20px;
  padding:38px 30px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45);position:relative;overflow:hidden}
.caja-oferta::before{content:"PREVENTA";position:absolute;top:18px;right:-42px;background:linear-gradient(90deg,var(--cian-osc),var(--cian));
  color:#fff;font-weight:800;font-size:.72rem;letter-spacing:1px;padding:6px 48px;transform:rotate(38deg)}
.precio-regular{font-size:1.1rem;color:#9aa0a8;text-decoration:line-through}
.precio-preventa{font-size:clamp(2.2rem,7vw,3.1rem);font-weight:800;color:var(--cian-osc);line-height:1.1}
.ahorro{background:#e6fbf9;color:#008b7d;font-weight:700;display:inline-block;padding:4px 14px;border-radius:999px;font-size:.9rem;margin:8px 0 18px}
.incluye{text-align:left;max-width:400px;margin:0 auto 20px}
.incluye li{list-style:none;padding:7px 0;border-bottom:1px dashed var(--borde);font-size:.95rem}
.incluye li::before{content:"✓ ";color:var(--verde);font-weight:800}
.lote-nota{margin-top:6px;font-size:.9rem;color:var(--muted)}

/* ===== BLOG ===== */
.blog-cab{background:var(--plata);padding:52px 0 40px}
.migas{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.migas a{color:var(--cian-osc);text-decoration:none}
.blog-cab h1{font-size:clamp(1.7rem,5vw,2.6rem);max-width:820px}
.blog-meta{font-size:.88rem;color:var(--muted);margin-top:12px}
.blog-contenido{max-width:760px;margin:0 auto;padding:48px 20px}
.blog-contenido h2{font-size:1.45rem;margin:38px 0 14px;padding-left:16px;border-left:4px solid var(--cian)}
.blog-contenido p{margin-bottom:16px}
.blog-contenido ul{margin:0 0 16px 22px}
.blog-contenido li{margin-bottom:8px}
.banner-cta{background:linear-gradient(135deg,#0a1a24,#102a3a);color:#fff;border-radius:18px;padding:36px 30px;
  text-align:center;margin-top:48px;box-shadow:0 12px 40px rgba(46,230,214,.15)}
.banner-cta h3{color:#fff;font-size:1.35rem;margin-bottom:10px}
.banner-cta p{color:#bcd6e8;max-width:520px;margin:0 auto 22px}
.banner-cta .lote-insignia{background:rgba(255,255,255,.08);border-color:var(--cian);color:#d9f3ff;
  box-shadow:none;margin:0 0 22px;font-size:.85rem}
.relacionados{margin-top:48px;padding-top:32px;border-top:1px solid var(--borde)}
.relacionados h2{font-size:1.25rem;margin-bottom:16px}
.relacionados a{display:block;padding:14px 0;border-bottom:1px dashed var(--borde);text-decoration:none;color:var(--gris);font-weight:600}
.relacionados a:hover{color:var(--cian-osc)}

/* ===== FOOTER ===== */
footer{background:#10141a;color:#9aa0a8;padding:44px 0;text-align:center;font-size:.88rem}
footer .logo{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:4px}
footer .marca{margin-bottom:16px}
footer a{color:#9aa0a8}
footer .legal{max-width:660px;margin:16px auto 0;font-size:.78rem;line-height:1.55}
.wa-flotante{position:fixed;bottom:22px;right:22px;background:var(--verde);color:#fff;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.3);z-index:70;transition:transform .15s}
.wa-flotante:hover{transform:scale(1.1)}
.wa-flotante svg{width:30px;height:30px}

@media (max-width:560px){
  section{padding:44px 0}
  .caja-oferta{padding:28px 20px}
  .cta{width:100%;justify-content:center}
}