/* Secciones "de escaparate": portada, banda del dashboard y percentil del
   informe. Usan los mismos tokens de color de app.css (claro/oscuro
   automático) — no son una paleta aparte. */

.hero-light{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:56px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; box-shadow:var(--shadow-card); margin-bottom:10px;}
.hero-light h1{font-weight:700; font-size:clamp(28px,4vw,40px); letter-spacing:-.025em; line-height:1.1; margin:0 0 16px; text-wrap:balance;}
.hero-light p.sub{font-size:15.5px; line-height:1.65; color:var(--ink-600); max-width:46ch; margin:0 0 26px;}
.hero-light .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px;}
.hero-light .stat-row{display:flex; gap:30px; flex-wrap:wrap;}
.hero-light .stat-row div{display:flex; flex-direction:column; gap:2px;}
.hero-light .stat-row b{font-family:var(--font-mono); font-size:19px; font-weight:600;}
.hero-light .stat-row span{font-size:11px; color:var(--ink-400); text-transform:uppercase; letter-spacing:.04em;}

.curve-card{background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:26px; text-align:center;}
.curve-card .k{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-400); margin-bottom:4px; display:block;}
.curve-card .v{font-family:var(--font-mono); font-size:28px; font-weight:600; color:var(--ink-900);}

.dash-band{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px 28px; display:flex; justify-content:space-between; align-items:center; box-shadow:var(--shadow-card); gap:16px; flex-wrap:wrap; margin-bottom:26px;}
.dash-band h2{font-size:19px; margin:0; letter-spacing:-.01em;}
.dash-band p{font-size:13px; color:var(--ink-600); margin:4px 0 0;}
.flame-chip{display:inline-flex; align-items:center; gap:6px; color:#B5601F; font-weight:700; font-size:13px; background:var(--accent-soft); padding:8px 14px; border-radius:999px; white-space:nowrap;}
.flame-chip svg{width:14px; height:14px; fill:currentColor; stroke:none;}

.percentile-card{text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px;}
.percentile-card .k{font-size:11.5px; color:var(--ink-400); text-transform:uppercase; letter-spacing:.05em;}
.percentile-card svg{display:block; margin:4px 0 2px;}
.percentile-card .p{font-family:var(--font-mono); font-size:32px; font-weight:700; color:var(--accent);}

@media (max-width:760px){
  .hero-light{grid-template-columns:1fr; padding:32px 24px;}
}