:root{--bg:#0e2a33;--ink:#0f2630;--ink2:#203a45;--brand:#0d6b78;--accent:#28d0c0;--muted:#5a6b74;--soft:#f3f7f9}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:var(--ink);scroll-behavior:smooth}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
h2{font-size:32px;margin:0 0 6px}h3{margin:0 0 8px}p{margin:0 0 10px;line-height:1.55}
.muted{color:var(--muted)}.lead{color:var(--ink2)}.tiny{font-size:12px}
a{color:var(--brand)}

/* Topbar */
.topbar{position:fixed;top:-80px;left:0;right:0;z-index:90;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-bottom:1px solid #e8eef1;transition:top .35s ease}
.topbar.show{top:0}.topbar-inner{display:flex;justify-content:center;align-items:center;height:64px}
.topbar-logo{height:40px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.06))}

/* Hero */
.hero{position:relative;min-height:70vh;display:grid;place-items:center;background:radial-gradient(1200px 500px at 50% 0%, #e7fbff 0%, #f8feff 35%, #ffffff 70%);overflow:hidden}
#bgCanvas{position:absolute;inset:0;width:100%;height:100%}
.hero-center{position:relative;text-align:center;padding:80px 20px}
.hero-logo{width:min(60vw,540px);max-width:540px;transition:transform .35s ease, opacity .35s ease;filter:drop-shadow(0 12px 25px rgba(0,0,0,.08))}
.hero-tag{margin-top:16px;color:var(--muted);font-weight:700}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:30px auto}
.chip{border:1px solid #dce7eb;background:#fff;border-radius:999px;padding:10px 14px;font-weight:700;cursor:pointer;transition:transform .15s, box-shadow .15s}
.chip:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.06)}

/* Blocks */
.block{padding:56px 0}
.challenges{background:#fbfdff}
.grid-2x3{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
.card{background:#fff;border:1px solid #e7eff2;border-radius:18px;padding:18px 18px 16px;box-shadow:0 10px 24px rgba(0,0,0,.04)}
.card .icon{font-size:22px}

/* Packages */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.pkg{background:#fff;border:1px solid #e7eff2;border-radius:18px;padding:18px 18px 10px;box-shadow:0 10px 24px rgba(0,0,0,.04)}
.list{padding-left:18px}.price{margin-top:10px;background:linear-gradient(180deg,#f9fbfc,#eef7fa);border:1px dashed #cfe1e6;border-radius:12px;padding:10px}
.tabulador{margin-top:28px;background:#f9fafb;border:1px solid #e7eff2;border-radius:16px;padding:16px}
.tabla{margin-top:10px;border-radius:10px;overflow:hidden;border:1px solid #dde8ec}
.row{display:grid;grid-template-columns:2fr 1fr}
.row>div{padding:10px;background:#fff;border-bottom:1px solid #edf2f4}
.row:last-child>div{border-bottom:none}
.head>div{background:#eef7fa;font-weight:800}

/* CTAs */
.cta-row{display:flex;gap:12px;justify-content:center;margin-top:22px}
.btn{display:inline-block;border-radius:999px;padding:12px 18px;font-weight:800;letter-spacing:.2px;box-shadow:0 8px 20px rgba(0,0,0,.06);transition:.15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.btn.primary{background:var(--brand);color:#fff}.btn.ghost{background:#fff;border:1px solid #d9e7ec;color:var(--ink)}

/* Footer */
.footer{background:var(--bg);color:#d7eef4;padding:30px 0;margin-top:26px}
.footer a{color:#d7eef4;text-decoration:underline}

/* WhatsApp */
.wa-float{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;font-size:22px;text-decoration:none;box-shadow:0 8px 18px rgba(0,0,0,.2);z-index:100}

/* Modals */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .2s;z-index:98}
.overlay.show{opacity:1;visibility:visible}
.modal{position:fixed;left:50%;top:55%;transform:translate(-50%,-45%) scale(.96);min-width:min(680px,90vw);background:#fff;border-radius:16px;padding:18px 18px 14px;box-shadow:0 20px 60px rgba(0,0,0,.25);opacity:0;visibility:hidden;transition:all .2s;z-index:99}
.modal.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.close{position:absolute;right:10px;top:8px;border:none;background:#f2f7f9;border-radius:8px;font-size:22px;cursor:pointer;padding:4px 8px}

/* Responsive */
@media (max-width: 960px){
  .cards-3{grid-template-columns:1fr}
  .grid-2x3{grid-template-columns:1fr}
  .hero{min-height:62vh}
  .hero-logo{width:min(70vw,460px)}
  .topbar-inner{height:58px}
}