:root{
  color-scheme: light;
  --bg:#f6f5f2; --card:#fcfcfb; --line:#e3e1db;
  --ink:#0b0b0b; --ink2:#52514e; --muted:#7a7873;
  --accent:#2a78d6; --accent-ink:#1d5fae; --accent-soft:#e7f0fb;
  --s1:#2a78d6; --s2:#eb6834; --good:#0f7a3d; --warn-bg:#fff6e0; --warn-ink:#6b4a00;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:#121211; --card:#1a1a19; --line:#2e2d2a;
    --ink:#f0efec; --ink2:#c3c2b7; --muted:#9a998f;
    --accent:#3987e5; --accent-ink:#8fbcf3; --accent-soft:#1b2a3d;
    --s1:#3987e5; --s2:#d95926; --good:#4cc27e; --warn-bg:#2d2610; --warn-ink:#f1d38a;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--accent-ink)}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px 56px}
header.site{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.logo{font-weight:750;letter-spacing:-.01em;text-decoration:none;color:var(--ink);font-size:18px}
.logo span{color:var(--accent)}
nav.top a{font-size:14px;color:var(--ink2);text-decoration:none;margin-left:14px}
nav.top a:hover{color:var(--ink)}
@media (max-width:440px){nav.top a{margin-left:10px;font-size:13px}.logo{font-size:16px}}
h1{font-size:clamp(26px,5vw,36px);line-height:1.15;letter-spacing:-.02em;margin:6px 0 10px}
.lead{color:var(--ink2);font-size:17px;margin:0 0 22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
input[type=number],input[type=text],select{width:100%;font:inherit;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:11px 12px;min-height:46px}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
.money{position:relative}
.money input{padding-right:34px}
.money::after{content:attr(data-unit);position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{flex:1;font:inherit;font-size:15px;padding:10px;border:0;background:var(--bg);color:var(--ink2);cursor:pointer;min-height:46px}
.seg button[aria-pressed=true]{background:var(--accent);color:#fff;font-weight:600}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent)}
.result-hero{text-align:left}
.result-hero .kicker{font-size:14px;color:var(--ink2);margin:0}
.result-hero .big{font-size:clamp(34px,8vw,48px);font-weight:750;letter-spacing:-.02em;line-height:1.1;margin:4px 0}
.result-hero .sub{color:var(--ink2);margin:0}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.total td{font-weight:700;border-bottom:0;border-top:2px solid var(--ink)}
tr.hl td{background:var(--accent-soft)}
.muted{color:var(--muted)}
.note{background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:12px 14px;font-size:14px;margin-top:14px}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink)}
h2{font-size:21px;letter-spacing:-.01em;margin:0 0 10px}
h3{font-size:17px;margin:18px 0 6px}
.faq p{color:var(--ink2);margin:0 0 8px}
.cta{display:block;text-decoration:none;border:1px dashed var(--line);border-radius:12px;padding:14px;color:var(--ink2);font-size:14px}
footer{color:var(--muted);font-size:13px;margin-top:30px;border-top:1px solid var(--line);padding-top:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px}
.tile{background:var(--bg);border-radius:12px;padding:12px}
.tile .k{font-size:13px;color:var(--ink2)}
.tile .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}
.hub a.card{display:block;text-decoration:none;color:inherit;transition:border-color .15s}
.hub a.card:hover{border-color:var(--accent)}
.hub a.card p{color:var(--ink2);margin:4px 0 0}

/* ---------- Componentes v2 ---------- */
:root{--good-bg:#e5f4ea;--good-ink:#11652f;--bad-bg:#fdecea;--bad-ink:#9a2b23;--neu-bg:#eeede9;--neu-ink:#52514e;--shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05)}
@media (prefers-color-scheme: dark){:root{--good-bg:#14301f;--good-ink:#8fe0ac;--bad-bg:#3a1a17;--bad-ink:#f2a49c;--neu-bg:#262624;--neu-ink:#c3c2b7;--shadow:none}}
.card{box-shadow:var(--shadow)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 6px}
.hero-res{background:linear-gradient(135deg,var(--accent) 0%,#1d5fae 100%);color:#fff;border:0}
.hero-res .kicker,.hero-res .sub{color:rgba(255,255,255,.85)}
.hero-res .big{color:#fff}
.hero-res .tile{background:rgba(255,255,255,.14)}
.hero-res .tile .k{color:rgba(255,255,255,.85)}
.hero-res .tile .v{color:#fff}
.stack{display:flex;height:10px;border-radius:99px;overflow:hidden;margin:14px 0 6px;background:rgba(255,255,255,.18);gap:2px}
.stack span{display:block;height:100%}
.stack-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.9)}
.stack-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
details.more{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
details.more>summary,details.acc>summary{cursor:pointer;list-style:none;font-weight:600;color:var(--accent-ink);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;min-height:40px}
details.more>summary::-webkit-details-marker,details.acc>summary::-webkit-details-marker{display:none}
details.more>summary::after,details.acc>summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-right:4px;flex:none}
details[open].more>summary::after,details[open].acc>summary::after{transform:rotate(-135deg)}
details.acc{border-bottom:1px solid var(--line)}
details.acc>summary{color:var(--ink);font-size:16px;padding:12px 0}
details.acc>div{padding:0 0 14px;color:var(--ink2)}
details.acc:last-of-type{border-bottom:0}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.metric{background:var(--bg);border-radius:12px;padding:14px}
.metric .top{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2);font-weight:600}
.metric .top svg{width:18px;height:18px;flex:none;color:var(--accent-ink)}
.metric .val{font-size:24px;font-weight:750;letter-spacing:-.01em;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.metric .ctx{font-size:13px;color:var(--muted);margin:0 0 10px}
.track{position:relative;height:6px;border-radius:99px;background:var(--line);margin:4px 0 8px}
.track b{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--card);transform:translate(-50%,-50%)}
.track-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.chip{display:inline-block;white-space:nowrap;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px}
.chip.good{background:var(--good-bg);color:var(--good-ink)}
.chip.bad{background:var(--bad-bg);color:var(--bad-ink)}
.chip.neu{background:var(--neu-bg);color:var(--neu-ink)}
.source{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}
.summary-line{font-size:16px;color:var(--ink2);margin:0 0 14px}
.links-ccaa{display:flex;flex-wrap:wrap;gap:8px}
.links-ccaa a,.links-ccaa strong{font-size:14px;padding:6px 12px;border-radius:99px;background:var(--bg);text-decoration:none;color:var(--ink2);border:1px solid var(--line)}
.links-ccaa strong{background:var(--accent);color:#fff;border-color:var(--accent)}

.seg button small{display:block;font-size:12px;font-weight:500;opacity:.8;line-height:1.2}
.seg button[aria-pressed=true] small{opacity:1;color:#fff}
.logo{white-space:nowrap}
@media (max-width:520px){header.site{flex-direction:column;align-items:flex-start;gap:4px}nav.top a{margin-left:0;margin-right:14px}}