/* ¿Cuánto es un millón? · estilos compartidos
   Diseño: cielo nocturno. Una sola paleta oscura, deliberada (igual que la experiencia de la portada).
   Tres escalas, tres tonos: millón = ámbar, mil millones = azul, billón = magenta.
   Los componentes globales (cabecera, pie, anuncios, "sigue leyendo") usan nombres propios;
   todo lo de los artículos va dentro de body.pg para no interferir con la portada. */
:root{
  --night:#0C1026;
  --night-2:#141A3B;
  --night-3:#1E2653;
  --paper:#F1EADB;
  --dust:#A7ACCA;
  --faint:rgba(241,234,219,.13);
  --mill:#D27C0C;  --mill-glow:#FFB84D;
  --milm:#2E9FD9;  --milm-glow:#8ED1F7;
  --bill:#DB5093;  --bill-glow:#F79BC8;
  --accent:var(--mill); --accent-glow:var(--mill-glow);
  --f-display:"Big Shoulders Display","Oswald","Arial Narrow",Impact,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:max(16px,4.5vw);
  color-scheme:dark;
}
body.t-milm{--accent:var(--milm);--accent-glow:var(--milm-glow)}
body.t-bill{--accent:var(--bill);--accent-glow:var(--bill-glow)}
html{background:var(--night)}
body{margin:0;background:var(--night);color:var(--paper)}
[hidden]{display:none!important}
img{max-width:100%}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--paper);color:var(--night);font:600 .8rem var(--f-mono);padding:.7em 1em;border-radius:0 0 8px 0;text-decoration:none}
.skip:focus{left:0}

/* ---------- Cabecera del sitio ---------- */
.site-head{position:relative;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:14px var(--gutter);padding-top:calc(14px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--faint);background:var(--night);font-family:var(--f-mono)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper);min-width:0}
.brand svg{width:26px;height:26px;flex:none}
.brand b{font-family:var(--f-display);font-weight:800;font-size:1.25rem;letter-spacing:.01em;text-transform:uppercase;line-height:1;white-space:nowrap}
.site-nav{display:flex;align-items:center}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 2px}
.site-nav a{display:block;padding:.55em .75em;border-radius:999px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);text-decoration:none;transition:color .2s,background .2s}
.site-nav a:hover{color:var(--paper);background:rgba(241,234,219,.06)}
.site-nav a[aria-current="page"]{color:var(--paper);box-shadow:inset 0 0 0 1px var(--faint)}
.nav-toggle{display:none;appearance:none;background:transparent;border:1px solid var(--faint);color:var(--paper);font:600 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:.65em 1em;cursor:pointer;align-items:center;gap:.6em}
.nav-toggle i{display:grid;gap:3px}
.nav-toggle i::before,.nav-toggle i::after{content:"";display:block;width:14px;height:1.5px;background:currentColor}
.site-head :focus-visible,.site-foot :focus-visible,.reads :focus-visible{outline:2px solid var(--accent-glow);outline-offset:3px;border-radius:6px}
@media (max-width:959px){
  .js .nav-toggle{display:inline-flex}
  .js .site-nav{flex-basis:100%;display:none}
  .js .site-head.open .site-nav{display:block}
  .js .site-nav ul{flex-direction:column;gap:0;padding-block:6px 4px}
  .js .site-nav a{padding:.9em .2em;border-radius:0;border-top:1px solid var(--faint);font-size:.78rem}
}
@media (max-width:420px){.brand b{font-size:1.08rem}}

/* ---------- Espacios publicitarios ---------- */
/* Etiqueta "Anuncios": es una de las dos que permiten las políticas de AdSense ("Anuncios" o "Enlaces patrocinados"). */
.ad-slot{display:grid;gap:6px;justify-items:stretch;margin-block:clamp(32px,6vh,64px);padding-inline:var(--gutter);max-width:calc(970px + 2*var(--gutter));margin-inline:auto;width:100%;box-sizing:border-box}
.ad-slot .ad-label{margin:0;font:400 .66rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dust);text-align:center}
.ad-slot .ad-box{min-height:280px;display:grid;align-items:center;border-top:1px solid var(--faint);border-bottom:1px solid var(--faint);padding-block:10px}
.ad-slot ins.adsbygoogle{display:block;width:100%;min-height:250px}
.ad-slot.ad-off,.ads-blocked .ad-slot:not(.ad-preview),.ad-slot:has(ins[data-ad-status="unfilled"]){display:none}
.ad-slot.ad-preview .ad-box{border:1px dashed rgba(241,234,219,.28);border-radius:10px;background:repeating-linear-gradient(135deg,rgba(241,234,219,.025) 0 12px,transparent 12px 24px)}
.ad-slot.ad-preview .ad-box::after{content:"Espacio para un anuncio (vista previa local)";padding:0 12px;font:400 .72rem var(--f-mono);letter-spacing:.08em;color:var(--dust);text-align:center}
.ad-slot.ad-preview ins.adsbygoogle{display:none}
.pg .ad-slot{padding-inline:0;margin-inline:0;max-width:none}

/* ---------- Sigue leyendo ---------- */
.reads{padding:clamp(48px,9vh,96px) var(--gutter) clamp(32px,6vh,64px);display:grid;gap:22px;border-top:1px solid var(--faint)}
.reads h2{margin:0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(2rem,4.4vw,3.4rem);line-height:.95;text-wrap:balance}
.reads-intro{margin:0;color:var(--dust);max-width:56ch}
.reads-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:16px}
.read{--c:var(--mill-glow);display:grid;gap:10px;align-content:start;padding:22px 22px 24px;border-radius:14px;background:var(--night-2);border:1px solid var(--faint);color:var(--paper);text-decoration:none;min-width:0;transition:border-color .2s,transform .2s}
.read:hover{border-color:var(--c);transform:translateY(-2px)}
.read.r-milm{--c:var(--milm-glow)} .read.r-bill{--c:var(--bill-glow)} .read.r-mill{--c:var(--mill-glow)}
.read .rk{font:600 .68rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.read .rt{font-family:var(--f-display);font-weight:800;font-size:1.7rem;line-height:1;text-transform:uppercase;text-wrap:balance}
.read .rd{font-family:var(--f-body);font-size:1rem;line-height:1.45;color:var(--dust)}
.read .rn{font-family:var(--f-display);font-weight:900;font-size:2.6rem;line-height:.9;color:var(--c);font-variant-numeric:tabular-nums}
.read[aria-current="page"]{display:none}

/* ---------- Pie del sitio ---------- */
.site-foot{border-top:1px solid var(--faint);padding:clamp(40px,7vh,72px) var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));display:grid;gap:32px;font-family:var(--f-body);color:var(--dust);background:linear-gradient(180deg,var(--night),#090C1E)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:28px 48px}
.foot-about{display:grid;gap:12px;align-content:start;max-width:40ch}
.foot-about p{margin:0;font-size:.98rem;line-height:1.5}
.site-foot h2{margin:0 0 10px;font:600 .7rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-foot a{color:var(--dust);text-decoration:none;font-size:.98rem;display:inline-block;padding:.28em 0}
.site-foot a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.site-foot .brand{display:inline-flex;color:var(--paper);padding:0}
.site-foot .brand:hover{text-decoration:none}
.foot-base{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;border-top:1px solid var(--faint);padding-top:18px;font:400 .72rem var(--f-mono);letter-spacing:.06em}
.foot-base p{margin:0}
@media (max-width:759px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot-about{grid-column:1 / -1}}

/* ---------- Páginas interiores (body.pg) ---------- */
.pg{margin:0;font-family:var(--f-body);font-size:clamp(17px,1.02rem + .2vw,20px);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.pg *{box-sizing:border-box}
.pg ::selection{background:var(--accent);color:var(--night)}
.pg a{color:var(--paper);text-decoration-color:var(--accent-glow);text-decoration-thickness:1px;text-underline-offset:3px}
.pg a:hover{color:var(--accent-glow)}
.pg :focus-visible{outline:2px solid var(--accent-glow);outline-offset:3px;border-radius:4px}
.pg main{display:block}

.pg-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(48px,9vh,104px) var(--gutter) clamp(32px,6vh,64px);display:grid;gap:18px;border-bottom:1px solid var(--faint)}
.pg-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle at center,var(--accent-glow) 1px,transparent 1.6px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 60% 90% at 88% 30%,#000 0,transparent 70%);mask-image:radial-gradient(ellipse 60% 90% at 88% 30%,#000 0,transparent 70%);opacity:.28}
.kicker{margin:0;font:600 .72rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-glow);display:flex;gap:.9em;flex-wrap:wrap}
.kicker span{color:var(--dust);font-weight:400}
.pg h1{margin:0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.7rem,7.4vw,6.4rem);line-height:.95;letter-spacing:-.005em;max-width:17ch;text-wrap:balance}
.pg h1 em{font-style:normal;color:var(--accent-glow)}
.dek{margin:0;max-width:42ch;font-size:clamp(1.15rem,1rem + .55vw,1.45rem);line-height:1.4}
.byline{margin:0;font:400 .74rem var(--f-mono);letter-spacing:.06em;color:var(--dust);display:flex;flex-wrap:wrap;gap:.4em 1.4em}
.byline b{color:var(--paper);font-weight:600}

.pg-body{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(32px,5vw,80px);padding:clamp(36px,6vh,64px) var(--gutter) clamp(24px,4vh,40px)}
@media (min-width:1100px){.pg-body.has-toc{grid-template-columns:minmax(0,46rem) minmax(0,15rem);justify-content:start}}
.toc{display:none}
@media (min-width:1100px){
  .toc{display:block;grid-column:2;grid-row:1 / span 50;align-self:start;position:sticky;top:28px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;border-left:1px solid var(--faint);padding-left:18px}
  .toc p{margin:0 0 10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
  .toc ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .toc a{color:var(--dust);text-decoration:none;line-height:1.35;display:block}
  .toc a:hover{color:var(--accent-glow)}
}
.prose{grid-column:1;min-width:0;max-width:46rem}
.prose > * + *{margin-top:1.05em}
.prose p,.prose li{text-wrap:pretty}
.prose h2{margin:2.1em 0 0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;text-wrap:balance;scroll-margin-top:24px}
.prose h2 + *{margin-top:.7em}
.prose h3{margin:1.7em 0 0;font-family:var(--f-display);font-weight:800;font-size:1.45rem;line-height:1.05;text-transform:uppercase;color:var(--paper)}
.prose h3 + *{margin-top:.5em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--accent-glow)}
.prose strong,.prose b{font-weight:600;color:var(--paper)}
.prose .lead{font-size:1.14em;line-height:1.5}
.prose blockquote{margin:1.6em 0;padding:0 0 0 1.1em;border-left:2px solid var(--accent);font-style:italic;color:var(--paper)}
.prose blockquote cite{display:block;margin-top:.5em;font:normal 400 .72rem var(--f-mono);letter-spacing:.06em;color:var(--dust)}
.prose code,.num{font-family:var(--f-mono);font-size:.88em;font-variant-numeric:tabular-nums}
.prose sup{font-size:.7em;line-height:0}
.prose .muted{color:var(--dust)}
.prose hr{border:0;border-top:1px solid var(--faint);margin-block:2em}

/* cifras destacadas */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1px;background:var(--faint);border:1px solid var(--faint);border-radius:14px;overflow:hidden;margin-block:1.6em}
.figs > div{background:var(--night);padding:18px 18px 20px;display:grid;gap:6px;align-content:start;min-width:0}
.figs .v{font-family:var(--f-display);font-weight:900;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:.92;color:var(--accent-glow);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.figs .v.c-mill{color:var(--mill-glow)} .figs .v.c-milm{color:var(--milm-glow)} .figs .v.c-bill{color:var(--bill-glow)}
.figs .s{font-size:.92rem;line-height:1.4;color:var(--dust)}

/* tablas */
.table-wrap{overflow-x:auto;margin-block:1.4em;border:1px solid var(--faint);border-radius:12px}
.pg table{border-collapse:collapse;width:100%;min-width:30rem;font-size:.95rem}
.pg th,.pg td{padding:.7em .9em;text-align:left;border-bottom:1px solid var(--faint);vertical-align:top}
.pg thead th{font:600 .68rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dust);background:var(--night-2)}
.pg tbody tr:last-child td{border-bottom:0}
.pg td.n{font-family:var(--f-mono);font-size:.86rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg td.hl{color:var(--accent-glow)}
.read .rn sup{font-size:.55em;vertical-align:super;line-height:0}
@media (max-width:560px){.pg table.stack{min-width:0}.pg table.stack thead{display:none}.pg table.stack,.pg table.stack tbody,.pg table.stack tr,.pg table.stack td{display:block;width:100%}.pg table.stack tr{padding:.5em 0;border-bottom:1px solid var(--faint)}.pg table.stack tr:last-child{border-bottom:0}.pg table.stack td{border:0;padding:.25em .9em;white-space:normal}.pg table.stack td::before{content:attr(data-label);display:block;font:600 .62rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dust);margin-bottom:.1em}.pg table.fit{min-width:0}.pg .sm-hide{display:none}.pg th,.pg td{padding:.6em .65em}}

/* bloques interactivos */
.tool{margin-block:2em;background:var(--night-2);border:1px solid var(--faint);border-radius:16px;padding:clamp(18px,3vw,28px);display:grid;gap:16px;box-shadow:0 30px 80px -50px rgba(0,0,0,.9)}
.tool-h{display:grid;gap:6px}
.tool-h .tag{margin:0;font:600 .68rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-glow)}
.tool-h h3{margin:0;font-family:var(--f-display);font-weight:800;font-size:1.6rem;line-height:1;text-transform:uppercase}
.tool-h p{margin:0;color:var(--dust);font-size:.98rem;line-height:1.45}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.field{display:grid;gap:6px;min-width:0;flex:1 1 10rem}
.field label,.lbl{font:400 .7rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.pg input[type=text],.pg input[type=number],.pg select{appearance:none;-webkit-appearance:none;width:100%;min-width:0;font:600 1.1rem var(--f-mono);color:var(--paper);background:var(--night);border:1px solid var(--faint);border-radius:10px;padding:.6em .8em;transition:border-color .2s}
.pg select{background:var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23A7ACCA'/%3E%3C/svg%3E") no-repeat right .8em center;padding-right:2em;cursor:pointer}
.pg input:hover,.pg select:hover{border-color:rgba(241,234,219,.35)}
.pg input[type=range]{width:100%;accent-color:var(--accent-glow)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;font:400 .76rem var(--f-mono);letter-spacing:.04em;color:var(--paper);background:transparent;border:1px solid var(--faint);border-radius:999px;padding:.5em .9em;cursor:pointer;transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--accent-glow)}
.chip[aria-pressed="true"]{background:var(--accent-glow);border-color:var(--accent-glow);color:var(--night);font-weight:600}
.out{display:grid;gap:1px;background:var(--faint);border:1px solid var(--faint);border-radius:12px;overflow:hidden}
.out > div{background:var(--night);padding:14px 16px;display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:4px 16px;align-items:baseline}
.out dt{font:400 .68rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.out dd{margin:0;font-family:var(--f-mono);font-size:1rem;line-height:1.45;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}
.out dd.big{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.05;color:var(--accent-glow)}
.out dd .warn{display:block;margin-top:4px;font-family:var(--f-body);font-size:.92rem;color:var(--bill-glow)}
@media (max-width:560px){.out > div{grid-template-columns:minmax(0,1fr)}}
.tool .note{margin:0;font-size:.86rem;color:var(--dust);font-style:italic}
.chart{width:100%;height:auto;display:block}

/* fuentes */
.refs{grid-column:1;max-width:46rem;margin-top:3em;padding-top:1.6em;border-top:1px solid var(--faint);font-size:.9rem;color:var(--dust);line-height:1.5}
.refs h2{margin:0 0 .8em;font:600 .72rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.refs ol{margin:0;padding-left:1.4em;display:grid;gap:.45em}
.refs a{color:var(--dust)}
.refs a:hover{color:var(--paper)}
.refs p{margin:.9em 0 0}

/* páginas legales */
.legal .prose h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.legal .prose{font-size:.98em}
.ph{background:rgba(255,184,77,.14);color:var(--mill-glow);font-family:var(--f-mono);font-size:.86em;padding:.05em .35em;border-radius:4px;white-space:normal}
.box-note{background:var(--night-2);border:1px solid var(--faint);border-radius:12px;padding:16px 18px;font-size:.96rem}
.btn-line{display:flex;flex-wrap:wrap;gap:10px}
.pg .btn{appearance:none;font:600 .78rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--night);background:var(--accent-glow);border:0;border-radius:999px;padding:.95em 1.3em;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.6em;transition:transform .15s,filter .2s}
.pg .btn:hover{transform:translateY(-1px);filter:brightness(1.08);color:var(--night)}
.pg .btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--faint)}
.pg .btn.ghost:hover{border-color:var(--paper);color:var(--paper)}
.mail{font-family:var(--f-mono);font-size:clamp(1rem,2.6vw,1.5rem);color:var(--accent-glow);overflow-wrap:anywhere;user-select:all}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--paper);color:var(--night);font:600 .85rem var(--f-mono);padding:.8em 1.2em;border-radius:999px;opacity:0;transition:opacity .2s,transform .2s;z-index:60;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .read,.site-nav a,.pg .btn{transition:none}
  .read:hover{transform:none}
}