:root{
  --bg:#F8FBFF;
  --card:#ffffff;
  --ink:#0f1a2a;
  --muted:#8b97ad;
  --cli:#3399FF;
  --cli-2:#6BD5FF;
  --cli-deep:#1F3A5F;
  --ring:#e7eef7;
  --shadow:0 10px 30px rgba(31,58,95,.15);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, #e7f3ff 0%, #f7fbff 40%, #ffffff 100%);
  color:var(--ink);
}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid #f0f4fa;
}
.logo{display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.2px}
.logo-c{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--cli),var(--cli-2)); color:#fff; font-size:20px}
.logo-text{font-size:20px}
.logo-badge{margin-left:6px; font-size:11px; padding:2px 6px; border-radius:999px; color:#fff; background:var(--cli)}
.nav__right{display:flex; gap:16px; align-items:center}
.nav__right a{color:#26344d; text-decoration:none; font-weight:600}
.nav__right a:hover{color:var(--cli)}

/* BUTTONS */
.btn{display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:700; transition:transform .1s ease, box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn--primary{color:#fff; background:linear-gradient(90deg,var(--cli),var(--cli-2)); box-shadow:0 8px 20px rgba(51,153,255,.35)}
.btn--ghost{color:var(--cli-deep); background:#eef5ff; border:1px solid #d9e8ff}

/* HERO */
.hero{position:relative; padding:72px 20px 40px}
.bg-gradient{
  position:absolute; inset:-10% -10% auto -10%; height:420px; z-index:-1;
  background:radial-gradient(600px 300px at 20% 20%, #dff1ff 10%, transparent 60%),
             radial-gradient(800px 380px at 80% 10%, #e6fbff 10%, transparent 60%),
             linear-gradient(180deg, #f6fbff, transparent 40%);
}
.hero__grid{max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
@media (max-width:980px){ .hero__grid{grid-template-columns:1fr} }

.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow)}
.glass{background:linear-gradient( to bottom right, rgba(255,255,255,.7), rgba(255,255,255,.6)); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.6)}

.hero__copy{padding:28px}
.hero__copy h1{font-size:38px; line-height:1.15; margin:0 0 12px}
.txt-gradient{background:linear-gradient(90deg,var(--cli),var(--cli-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__copy p{margin:0 0 18px; color:var(--muted); font-weight:500}
.hero__cta{display:flex; gap:12px; margin:8px 0 12px; flex-wrap:wrap}
.hero__badges{display:flex; gap:10px; flex-wrap:wrap; color:#496282; font-weight:600}
.hero__badges span{background:#f0f6ff; border:1px solid #e1efff; padding:6px 10px; border-radius:999px}

/* Preview mini-dashboard */
.hero__preview{padding:0; overflow:hidden}
.preview__header{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#0f1a2a; color:#cfe5ff}
.preview__header .dots i{display:inline-block; width:6px; height:6px; border-radius:50%; background:#6aaaff; margin-left:4px}
.preview__content{padding:16px; background:linear-gradient(180deg,#0f1a2a 0%, #162840 100%); color:#eaf5ff}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.kpi{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px}
.kpi__title{font-size:12px; color:#a9c7ff}
.kpi__num{font-size:22px; font-weight:800}
.chart{height:110px; margin:14px 0; border-radius:12px; background:
  linear-gradient(180deg, rgba(51,153,255,.25), rgba(51,153,255,.05)),
  linear-gradient( to right, rgba(255,255,255,.06) 1px, transparent 1px),
  linear-gradient( to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:100% 100%, 24px 1px, 1px 18px;
  position:relative;
}
.chart::after{
  content:""; position:absolute; inset:auto 10px 14px 10px; height:48px; border-radius:10px;
  background:linear-gradient(90deg, rgba(107,213,255,.3), rgba(51,153,255,.6));
  box-shadow:0 10px 24px rgba(51,153,255,.35);
}
.bars .bar{display:flex; align-items:center; gap:8px; margin:10px 0}
.bars .bar span{flex:0 0 90px; font-size:12px; color:#bcd6ff}
.bars .bar i{display:block; height:10px; flex:1; border-radius:999px; background:rgba(255,255,255,.1); position:relative; overflow:hidden}
.bars .bar i::before{content:""; position:absolute; inset:0; width:var(--w); background:linear-gradient(90deg,#6BD5FF,#3399FF)}

/* SECTIONS */
.section{max-width:1140px; margin:48px auto; padding:0 20px}
.section__title{font-size:28px; margin:0 0 18px}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:980px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .cards{grid-template-columns:1fr} }
.cards .card{padding:18px; border:1px solid #eaf0f8}
.cards .card h3{margin:0 0 8px}
.cards .card p{margin:0; color:#556782}

/* MÉTRICAS */
.metrics__grid{display:grid; grid-template-columns:1.2fr .8fr; gap:16px}
@media (max-width:980px){ .metrics__grid{grid-template-columns:1fr} }
.donut{display:grid; place-items:center; padding:24px}
.donut__svg{width:220px; height:220px}
.ring{fill:none; stroke:var(--ring); stroke-width:3.5}
.seg{fill:none; stroke-width:3.5; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%}
.seg--a{stroke:#31d0aa}
.seg--b{stroke:#ffb020}
.seg--c{stroke:#ff6b6b}
.donut__legend{margin-top:10px; display:flex; gap:12px; align-items:center; color:#47556a; font-weight:600; flex-wrap:wrap}
.pill{display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px}
.pill--a{background:#31d0aa}
.pill--b{background:#ffb020}
.pill--c{background:#ff6b6b}
.list{padding:18px}
.list h3{margin:0 0 10px}
.list ul{margin:0; padding:0; list-style:none}
.list li{padding:10px 0; border-bottom:1px dashed #e7eef7}
.list li:last-child{border-bottom:0}

/* CTA */
.cta{padding:30px 20px 70px}
.cta__box{max-width:900px; margin:0 auto; text-align:center; padding:28px}
.cta__box h2{margin:0 0 8px; font-size:28px}
.cta__box p{margin:0 0 16px; color:#4c5f7a}
.cta__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* FOOTER */
.footer{padding:20px; text-align:center; color:#6b7b93; border-top:1px solid #edf2fa; background:#fbfdff}