:root{
  --brand:#0b74de;--brand-dark:#0859ad;--navy:#0b1a2b;--ink:#17293d;
  --muted:#5b6f84;--bg:#f6f9fd;--card:#fff;--line:#e2edf9;
  --wa:#22c55e;--wa-dark:#15803d;--amber:#f59e0b;--red:#dc2626;
  --radius:16px;--shadow:0 10px 30px rgba(11,26,43,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
img{max-width:100%}
a{color:var(--brand)}
h1,h2,h3,h4{line-height:1.25;color:var(--navy)}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.container.narrow{max-width:820px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:14px}
.lead{font-size:19px;color:#33475f;max-width:720px}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;flex-wrap:wrap}
.brand{font-weight:800;font-size:20px;color:var(--navy);text-decoration:none}
.nav{display:flex;align-items:center;gap:6px}
.nav-link{background:none;border:0;font:inherit;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:8px;cursor:pointer}
.nav-link:hover{background:#eef5fd;color:var(--brand)}
.nav-drop{position:relative}
.drop{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;min-width:260px;z-index:60}
.drop a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15px}
.drop a:hover{background:#eef5fd;color:var(--brand)}
.nav-drop:hover .drop,.nav-drop:focus-within .drop{display:block}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;font-size:20px;padding:6px 12px;cursor:pointer}

.btn{display:inline-block;background:var(--brand);color:#fff;padding:12px 22px;border-radius:12px;text-decoration:none;font-weight:700;border:0;font-size:16px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn-wa{background:var(--wa)}
.btn-wa:hover{background:var(--wa-dark)}
.btn-ghost{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.btn-ghost:hover{background:#eef5fd}
.btn-sm{padding:8px 14px;font-size:14px;border-radius:10px}
.btn-block{display:block;text-align:center;width:100%}

.hero{background:linear-gradient(160deg,#0b74de 0%,#0a4f9e 55%,#0b1a2b 100%);color:#fff;padding:72px 0 60px}
.hero h1{color:#fff;font-size:clamp(30px,5vw,48px);margin:0 0 16px;max-width:820px}
.hero .lead{color:#dbeafe}
.micro-hero{padding:48px 0 44px}
.micro-hero h1{font-size:clamp(26px,4vw,40px)}
.crumbs{font-size:14px;margin-bottom:18px}
.crumbs a{color:#bfdbfe;text-decoration:none}
.hero-badge{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:999px;font-weight:600;margin-bottom:16px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:44px}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats strong{font-size:26px}
.hero-stats span{color:#bfdbfe;font-size:14px}

.section{padding:56px 0}
.section.alt{background:#fff}
.sec-title{font-size:clamp(24px,3vw,32px);text-align:center;margin:0 0 10px}
.sec-title + p{margin-top:0}

.grid{display:grid;gap:20px;margin-top:28px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card h4{margin:0 0 8px;font-size:17px}
.card p{margin:6px 0;color:#3c5169}
.card.warn{border-top:4px solid var(--red)}
.card.good{border-top:4px solid var(--wa)}
.link-card{display:block;text-decoration:none;color:inherit;transition:.15s}
.link-card:hover{transform:translateY(-4px);border-color:var(--brand)}
.card-icon{font-size:34px;margin-bottom:10px}
.card-cta{color:var(--brand);font-weight:700;font-size:14px}

.check{list-style:none;padding:0;margin:12px 0 0}
.check li{padding:6px 0 6px 30px;position:relative;color:#3c5169}
.check li::before{content:"✓";position:absolute;left:0;top:5px;width:22px;height:22px;border-radius:50%;background:#dcfce7;color:var(--wa-dark);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.check.star li::before{content:"★";background:#fef3c7;color:var(--amber)}

.plan{position:relative;display:flex;flex-direction:column}
.plan ul{list-style:none;padding:0;margin:14px 0 18px;flex:1}
.plan ul li{padding:5px 0 5px 24px;position:relative;font-size:15px;color:#3c5169}
.plan ul li::before{content:"✓";position:absolute;left:0;color:var(--wa-dark);font-weight:800}
.plan.destacado{border:2px solid var(--brand);box-shadow:0 14px 40px rgba(11,116,222,.18)}
.plan-desc{color:var(--muted);font-size:14px;margin:2px 0 0}
.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:12px;font-weight:700;padding:4px 14px;border-radius:999px;white-space:nowrap}

.testi p{font-size:16px;font-style:italic}
.testi-autor{margin-top:12px;font-size:14px}
.caso .resultado{color:var(--wa-dark);font-weight:600}
.comp-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0}
.comp h3{margin-top:0}
.comp h4{color:var(--brand)}
.reco{background:#eef5fd;border-radius:10px;padding:12px 16px}
.tag{display:inline-block;background:#eef5fd;color:var(--brand);font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:8px}

.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:4px 20px;box-shadow:var(--shadow)}
.faq-item summary{cursor:pointer;font-weight:700;padding:12px 0;color:var(--navy)}
.faq-item p{margin:0 0 14px;color:#3c5169}

.lead-magnet{background:linear-gradient(140deg,#0b74de,#0a4f9e);color:#fff}
.lead-magnet h3{color:#fff;font-size:24px;margin:0 0 8px}
.lead-magnet p{color:#dbeafe;margin:0 0 18px}

.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:36px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow)}
.contact-info h2{margin-top:0}
.contact-data{margin-top:22px;font-size:15px}
.contact-data p{margin:6px 0}
.contact-form{display:flex;flex-direction:column;gap:12px}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--navy)}
.contact-form input,.contact-form textarea{padding:12px;border-radius:10px;border:1px solid #cfe0f2;background:#f8fbff;font:inherit}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--brand);border-color:var(--brand)}

.site-footer{background:var(--navy);color:#cbd8e6;padding:48px 0 24px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.foot-col h4{color:#fff;margin:0 0 12px;font-size:15px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col a{color:#cbd8e6;text-decoration:none;font-size:14px;display:block;padding:3px 0}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #24344a;margin-top:36px;padding-top:20px;font-size:14px}
.site-footer strong{color:#fff}

.wa-float{position:fixed;bottom:22px;right:22px;width:58px;height:58px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(34,197,94,.45);z-index:80;transition:.15s}
.wa-float:hover{transform:scale(1.08)}

.paso{text-align:center}
.paso-num{width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}

#tool{padding:20px 0}
.quiz-card,.calc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);max-width:860px;margin:0 auto}
.quiz-q{margin-bottom:22px}
.quiz-q p{font-weight:700;color:var(--navy);margin:0 0 8px}
.quiz-opts{display:flex;gap:10px;flex-wrap:wrap}
.quiz-opts label{border:1px solid var(--line);border-radius:10px;padding:10px 16px;cursor:pointer;background:#f8fbff;font-size:15px}
.quiz-opts input{display:none}
.quiz-opts label.sel{border-color:var(--brand);background:#eef5fd;color:var(--brand);font-weight:700}
.result-box{background:#eef5fd;border:2px solid var(--brand);border-radius:14px;padding:24px;margin-top:20px}
.calc-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.calc-row label{font-weight:600;color:var(--navy)}
.calc-row select,.calc-row input[type=range]{accent-color:var(--brand)}
.calc-total{font-size:30px;font-weight:800;color:var(--brand)}
.calc-check{display:flex;align-items:center;gap:8px}

@media(max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .contact-card{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .nav-toggle{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:12px}
  .nav.open{display:flex}
  .nav-drop .drop{position:static;display:block;box-shadow:none;border:0;padding-left:14px}
  .nav .btn{margin-top:8px;text-align:center}
  .two-col,.grid-2,.grid-3,.grid-4,.comp-cols{grid-template-columns:1fr}
  .hero{padding:52px 0 44px}
  .hero-stats{gap:22px}
}