/* Nations in Data — shared styles for the home and text pages.
   Tokens match the chart pages (see :root in /economic-freedom/). */
*{box-sizing:border-box;margin:0}
:root{
  --tinta:#eef1f8; --tinta2:#aeb6c9; --tinta3:#7a839a;
  --fondo:#05070c;
  --vidrio:rgba(13,17,27,.62); --borde:rgba(255,255,255,.10);
  --oro:#e6b34c; --azul:#4f8ff7; --granate:#d2455b; --pizarra:#7f8da4; --neutro:#d5d9e2;
  --serif:"Didot","Bodoni 72","Playfair Display","Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html{background:var(--fondo);color-scheme:dark;-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--tinta);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 520px at 78% -8%,rgba(79,143,247,.13),transparent 62%),
    radial-gradient(760px 480px at 8% 4%,rgba(230,179,76,.10),transparent 60%),
    radial-gradient(900px 700px at 50% 118%,rgba(210,69,91,.07),transparent 60%),
    var(--fondo)}
a{color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.ancho{width:100%;max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}

/* Top bar */
.barra{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:26px;padding-bottom:10px}
.marca{font:400 21px/1 var(--serif);letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.marca b{font-weight:400;color:var(--oro)}
.nav{display:flex;gap:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav a{color:var(--tinta2);text-decoration:none;padding:6px 0}
.nav a:hover,.nav a[aria-current]{color:var(--tinta)}

/* Hero */
.heroe{padding-top:clamp(44px,9vw,104px);padding-bottom:clamp(36px,6vw,68px)}
.ceja{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
h1{font:400 clamp(42px,8.2vw,88px)/1.0 var(--serif);letter-spacing:.005em;margin-top:18px;text-wrap:balance}
h1 em{font-style:italic;color:var(--oro)}
.entrada{margin-top:24px;max-width:62ch;font-size:clamp(16px,1.9vw,19px);line-height:1.6;color:var(--tinta2);text-wrap:pretty}
.filete{height:1px;border:0;background:linear-gradient(90deg,rgba(230,179,76,.55),rgba(255,255,255,.08) 38%,transparent)}

/* Frosted glass */
.vidrio{background:var(--vidrio);border:1px solid var(--borde);border-radius:18px;
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)}

/* Chart grid */
.t{font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta3)}
.seccion{padding-top:34px;padding-bottom:72px}
.rejilla{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:18px}
.tarjeta{position:relative;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;grid-column:span 2}
.tarjeta h2,.tarjeta h3{font:400 23px/1.15 var(--serif);letter-spacing:.01em}
.tarjeta p{font-size:14px;line-height:1.55;color:var(--tinta2);margin-top:9px}
.t-cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.chip{align-self:flex-start;font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:999px;margin-bottom:13px}
.chip.vivo{color:#14100a;background:var(--oro)}
.chip.pronto{color:var(--tinta3);border:1px dashed rgba(255,255,255,.22)}

.tarjeta.principal{grid-column:1 / -1;flex-direction:row;min-height:340px;transition:border-color .25s,transform .25s}
.tarjeta.principal:hover{border-color:rgba(230,179,76,.5);transform:translateY(-2px)}
.tarjeta.principal .t-img{flex:1.35;min-width:0;position:relative;background:#070a11}
.tarjeta.principal .t-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tarjeta.principal .t-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 62%,rgba(9,12,20,.82))}
.tarjeta.principal .t-cuerpo{flex:1;padding:30px 30px 28px;justify-content:center}
.tarjeta.principal h2{font-size:clamp(27px,3.2vw,36px);line-height:1.08}
.tarjeta.principal p{font-size:15px}
.datos{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:16px;padding:0;list-style:none}
.datos li{font-size:11.5px;color:var(--tinta2);padding:4px 10px;border-radius:999px;border:1px solid var(--borde);background:rgba(255,255,255,.04)}
.ir{margin-top:22px;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--oro)}
.ir span{display:inline-block;transition:transform .25s}
.tarjeta.principal:hover .ir span{transform:translateX(5px)}

.tarjeta.pronto-t{grid-column:span 2;opacity:.86}
.tarjeta.pronto-t svg{display:block;width:100%;height:96px;border-bottom:1px solid var(--borde);background:rgba(255,255,255,.02)}
.tarjeta.pronto-t h3{font-size:21px}

/* Text pages */
.texto{padding-top:clamp(36px,7vw,72px);padding-bottom:72px;max-width:820px}
.texto h1{font-size:clamp(38px,6.4vw,62px)}
.texto .entrada{margin-bottom:34px}
.bloque{padding:26px 28px;margin-top:18px}
.bloque h2{font:400 25px/1.15 var(--serif);margin-bottom:12px}
.bloque p,.bloque li{font-size:15px;line-height:1.65;color:var(--tinta2)}
.bloque p + p{margin-top:12px}
.bloque ul{padding-left:20px;margin-top:10px}
.bloque li{margin-top:7px}
.bloque b,.bloque strong{color:var(--tinta);font-weight:600}
.bloque a{color:var(--tinta);text-decoration-color:rgba(230,179,76,.7);text-underline-offset:3px}
.bloque a:hover{color:var(--oro)}
.fuentes-dl{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:14px 22px;margin-top:6px}
.fuentes-dl dt{font:600 10.5px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--oro);padding-top:3px}
.fuentes-dl dd{font-size:15px;line-height:1.6;color:var(--tinta2)}

/* Footer */
.pie{margin-top:auto;border-top:1px solid var(--borde);padding-top:22px;padding-bottom:30px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:12px;color:var(--tinta3)}
.pie a{color:var(--tinta2)}

@media (max-width:900px){
  .tarjeta.principal{flex-direction:column;min-height:0}
  .tarjeta.principal .t-img{flex:none;aspect-ratio:16/10}
  .tarjeta.principal .t-img::after{background:linear-gradient(180deg,transparent 60%,rgba(9,12,20,.8))}
  .tarjeta.principal .t-cuerpo{padding:22px}
  .tarjeta.pronto-t{grid-column:span 3}
}
@media (max-width:560px){
  .ancho{padding-left:16px;padding-right:16px}
  .barra{padding-top:18px}
  .marca{font-size:19px}
  .nav{gap:16px;font-size:10.5px}
  .rejilla{gap:14px}
  .tarjeta.pronto-t{grid-column:1 / -1}
  .bloque{padding:20px 18px}
  .fuentes-dl{grid-template-columns:1fr;gap:4px}
  .fuentes-dl dd{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}