/* Radar Telco — base.css · mobile-first, sem dependências externas */

:root{
  --c-bg:#0b1020; --c-surface:#131c33; --c-surface-2:#1b2745;
  --c-text:#eaf0fb; --c-muted:#9fb0d0; --c-border:#26355a;
  --c-primary:#3ea6ff; --c-primary-ink:#0b1020; --c-accent:#22d3a6;
  --c-map:#2a3a63; --c-map-hover:#3ea6ff; --c-map-stroke:#0b1020;
  --font: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1080px; --radius:12px; --shadow:0 6px 24px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light){
  :root{
    --c-bg:#f5f7fc; --c-surface:#ffffff; --c-surface-2:#eef2fb;
    --c-text:#0f1a33; --c-muted:#51617f; --c-border:#dde5f4;
    --c-primary:#0a6ed1; --c-primary-ink:#ffffff; --c-accent:#0a9d78;
    --c-map:#cdd9f0; --c-map-hover:#0a6ed1; --c-map-stroke:#ffffff;
    --shadow:0 6px 24px rgba(20,40,90,.10);
  }
}
:root[data-theme="dark"]{ color-scheme:dark; }
:root[data-theme="light"]{ color-scheme:light; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); background:var(--c-bg); color:var(--c-text);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:1.25rem}
a{color:var(--c-primary); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2; margin:.2em 0 .5em}
.muted{color:var(--c-muted)}
.center{text-align:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--c-primary);color:var(--c-primary-ink);padding:.5rem 1rem;z-index:100}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px;border-radius:4px}

/* Header / nav */
.site-header{border-bottom:1px solid var(--c-border);background:var(--c-surface);position:sticky;top:0;z-index:20}
.header-inner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:.7rem}
.brand{display:inline-flex;align-items:center;gap:.5rem;color:var(--c-text);font-weight:800;letter-spacing:.2px}
.brand:hover{text-decoration:none}
.brand-mark{color:var(--c-primary);font-size:1.35rem}
.main-nav{display:flex;gap:1rem;margin-inline-start:auto;flex-wrap:wrap}
.main-nav a{color:var(--c-muted);font-weight:600;font-size:.95rem}
.main-nav a.is-active,.main-nav a:hover{color:var(--c-text);text-decoration:none}
.lang-select{display:flex;gap:.25rem;border:1px solid var(--c-border);border-radius:999px;padding:.15rem;background:var(--c-surface-2)}
.lang-select a{font-size:.8rem;font-weight:700;color:var(--c-muted);padding:.15rem .5rem;border-radius:999px}
.lang-select a.is-active{background:var(--c-primary);color:var(--c-primary-ink)}
.lang-select a:hover{text-decoration:none;color:var(--c-text)}
.hub-link{margin-inline-start:auto;color:var(--c-muted);font-size:.9rem}

.site-main{flex:1;padding-block:1.5rem 3rem}

/* Hero */
.hero{padding-block:1.5rem}
.hero h1{font-size:clamp(1.6rem,4.5vw,2.5rem);max-width:20ch}
.lead{color:var(--c-muted);font-size:1.1rem;max-width:60ch;margin:0}

/* Map */
.map-section{margin-top:1rem}
.map-layout{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}
.map-holder{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.sa-map{width:100%;height:auto;max-height:72vh;display:block}
.country{fill:var(--c-map);stroke:var(--c-map-stroke);stroke-width:.6;transition:fill .15s ease}
.country-link:hover .country,.country-link:focus .country,.country.is-active{fill:var(--c-map-hover)}
.country-link:focus{outline:none}
.country-link:focus-visible .country{stroke:var(--c-primary);stroke-width:1.5}
.map-tip{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.map-tip .tip-name{font-weight:800;font-size:1.15rem;margin:0 0 .5rem}
.map-tip dl{display:grid;grid-template-columns:1fr auto;gap:.2rem .75rem;margin:0}
.map-tip dt{color:var(--c-muted)} .map-tip dd{margin:0;font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.map-hint{color:var(--c-muted);margin:0}
@media (min-width:720px){
  .map-layout{grid-template-columns:1.4fr .9fr}
  .map-tip{position:sticky;top:5rem}
}

/* Tables */
.ranking{margin-top:2.5rem}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-border);border-radius:var(--radius);margin-top:1rem}
.data-table{border-collapse:collapse;width:100%;min-width:520px;background:var(--c-surface)}
.data-table th,.data-table td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--c-border)}
.data-table thead th{background:var(--c-surface-2);font-size:.85rem;color:var(--c-muted);position:sticky;top:0}
.data-table tbody tr:last-child td,.data-table tbody tr:last-child th{border-bottom:0}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.data-table tbody tr:hover{background:var(--c-surface-2)}
.empty-state{margin-top:1rem;padding:1.25rem;border:1px dashed var(--c-border);border-radius:var(--radius);color:var(--c-muted);background:var(--c-surface)}

/* Prose / pages */
.prose{max-width:70ch}
.prose h1{font-size:clamp(1.5rem,4vw,2.1rem)}
.prose p{margin:0 0 1rem}
.btn{display:inline-block;background:var(--c-primary);color:var(--c-primary-ink);padding:.6rem 1.1rem;border-radius:999px;font-weight:700}
.btn:hover{text-decoration:none;opacity:.92}

/* Construction / country */
.construction{padding-block:3rem}
.badge{display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--c-accent);border:1px solid var(--c-border);border-radius:999px;padding:.25rem .75rem;margin-bottom:1rem}
.construction h1{font-size:clamp(1.6rem,4vw,2.4rem)}
.reg{color:var(--c-muted)}

/* Footer */
.site-footer{border-top:1px solid var(--c-border);background:var(--c-surface);padding-block:1.5rem;color:var(--c-muted);font-size:.9rem}
.site-footer p{margin:.25rem 0}

/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-top:1rem}
.kpi-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.kpi-label{margin:0 0 .35rem;color:var(--c-muted);font-size:.85rem;font-weight:600;line-height:1.3}
.kpi-value{margin:0;font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi-meta{margin:.35rem 0 0;color:var(--c-muted);font-size:.78rem}

/* Charts */
.chart-block{margin-top:2.5rem}
.chart-holder{position:relative;height:340px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:1rem;margin-top:1rem;box-shadow:var(--shadow)}
.chart-holder canvas{width:100%!important}

/* Family cards */
.fam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.fam-card{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:1.1rem 1.2rem;font-weight:700;color:var(--c-text);box-shadow:var(--shadow)}
.fam-card:hover{text-decoration:none;border-color:var(--c-primary)}
.fam-go{color:var(--c-primary);font-size:1.2rem}

/* Indicator page */
.prose-wide{max-width:900px}
.crumbs{color:var(--c-muted);font-size:.9rem;margin-bottom:.5rem}
.table-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2.5rem}
.table-head h2{margin:0}
.btn-sm{padding:.4rem .8rem;font-size:.85rem}
.source-note{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--c-border);color:var(--c-muted);font-size:.9rem}
.source-list{line-height:1.9;padding-left:1.1rem}
.share{display:flex;align-items:center;gap:.5rem;min-width:160px}
.share-bar{display:inline-block;height:8px;border-radius:999px;background:var(--c-primary);min-width:2px}
.share-pct{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--c-muted);white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}