/* Electonomics · web de análisis. Tokens del libro de marca (tema Marfil y tema Tinta). */
/* Fuentes servidas desde la propia web (SIL Open Font License; ver fuentes/LICENCIA.txt). */
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fuentes/albert-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fuentes/albert-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fuentes/ibm-plex-mono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fuentes/ibm-plex-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --tinta: #111418; --marfil: #F5F1E8; --oro: #C8A44D;
  --surface: #F5F1E8; --surface-raised: #FBF9F4; --surface-sunken: #ECE6D9;
  --text: #111418; --text-muted: #5E5A52; --oro-texto: #7A5D17; --oro-dato: #9E7C24;
  --dato-1: #111418; --dato-2: #7A766D; --sube: #1F5F74; --baja: #A3402A; --hairline: #D9D1C1;
  --simbolo-barra: #111418;
  /* Colores de partido ajustados para dar 3:1 sobre marfil y sobre tinta. */
  --p-pp: #1D84CE; --p-psoe: #E30613; --p-vox: #4E9A1E; --p-sumar: #CF2A7A; --p-podemos: #8E4C9E;
  --p-erc: #B57600; --p-junts: #1A9488; --p-bildu: #73900F; --p-pnv: #2F8A3E; --p-bng: #4F86B8;
  --p-dem: #2F6DB5; --p-rep: #C2412F;
  --p-cc: #9E8200; --p-upn: #3D65CF; --p-salf: #86643F; --p-otros: #7A766D;
  --sans: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ancho-texto: 680px; --ancho-ancho: 880px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #111418; --surface-raised: #1A1F26; --surface-sunken: #232931;
    --text: #F5F1E8; --text-muted: #A8A397; --oro-texto: #D8B860; --oro-dato: #C8A44D;
    --dato-1: #F5F1E8; --dato-2: #8E8A80; --sube: #6FB3CC; --baja: #E58A6F; --hairline: #343B44;
    --simbolo-barra: #F5F1E8; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #111418; --surface-raised: #1A1F26; --surface-sunken: #232931;
  --text: #F5F1E8; --text-muted: #A8A397; --oro-texto: #D8B860; --oro-dato: #C8A44D;
  --dato-1: #F5F1E8; --dato-2: #8E8A80; --sube: #6FB3CC; --baja: #E58A6F; --hairline: #343B44;
  --simbolo-barra: #F5F1E8; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--sans); font-size: 18px; line-height: 1.6; font-feature-settings: "kern"; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: var(--oro-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--oro-dato); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
.sin-corte { white-space: nowrap; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Cabecera ---------- */
.saltar { position: absolute; left: 8px; top: -64px; z-index: 30; padding: 10px 14px; background: var(--text); color: var(--surface); font-size: 15px; font-weight: 600; text-decoration: none; }
.saltar:focus { top: 8px; }
.cabecera { border-bottom: 1px solid var(--hairline); background: var(--surface); }
.cabecera__dentro { max-width: 1120px; margin: 0 auto; padding: 16px 16px 8px; display: flex; align-items: center; gap: 14px; }
.firma { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 21px; letter-spacing: -0.01em; }
.firma svg { height: 21px; width: auto; flex: none; }
.simbolo .b { fill: var(--simbolo-barra); } .simbolo .o { fill: var(--oro); }
.lema { font-size: 13px; letter-spacing: 0.02em; color: var(--text-muted); }
.cabecera .lema { padding-left: 14px; border-left: 1px solid var(--hairline); line-height: 16px; }
.cabecera__x { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.cabecera__x .icono { width: 15px; height: 15px; fill: currentColor; flex: none; }
.cabecera__x:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.menu { max-width: 1120px; margin: 0 auto; }
.menu__lista { list-style: none; margin: 0; padding: 0 16px; display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.menu__lista::-webkit-scrollbar { display: none; }
.menu a { display: block; padding: 8px 0 11px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; box-shadow: inset 0 -3px 0 transparent; }
.menu a:hover { color: var(--text); }
.menu a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--oro); }
.menu__directo::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--oro); margin-right: 7px; vertical-align: 2px; }
/* Cabecera centrada y grande: la usan las portadas «portada» y «sobria». */
.cabecera--grande .cabecera__dentro { position: relative; flex-direction: column; gap: 10px; padding: 30px 16px 16px; text-align: center; }
.cabecera--grande .firma { font-size: clamp(34px, 7vw, 60px); gap: .3em; letter-spacing: -0.015em; }
.cabecera--grande .firma svg { height: .76em; }
.cabecera--grande .lema { padding-left: 0; border-left: 0; }
.cabecera--grande .cabecera__x { position: absolute; top: 16px; right: 16px; margin: 0; }
.cabecera--grande .menu { border-top: 1px solid var(--hairline); }
@media (min-width: 760px) { .cabecera--grande .menu__lista { justify-content: center; } }
@media (max-width: 640px) {
  .cabecera__dentro { padding: 12px 16px 4px; }
  .cabecera:not(.cabecera--grande) .lema { display: none; }
  .cabecera__x { padding: 8px; margin-right: -8px; }
  .cabecera__x span { display: none; }
  .cabecera--grande .cabecera__x { top: 6px; right: 14px; }
  .cabecera--grande .cabecera__dentro { padding: 26px 16px 12px; }
  /* El menú se desliza de lado; el degradado avisa de que hay más. */
  .menu__lista { gap: 22px; padding-right: 32px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
}
.progreso { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--oro); z-index: 20; }

/* ---------- Pie ---------- */
.pie-web { border-top: 1px solid var(--hairline); margin-top: 72px; }
.pie-web__dentro { max-width: 1120px; margin: 0 auto; padding: 40px 16px 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.pie-web__marca { grid-column: 1 / -1; display: grid; gap: 10px; align-content: start; }
.pie-web__marca p { margin: 0; max-width: 34em; }
.pie-web .firma { font-size: 18px; } .pie-web .firma svg { height: 18px; }
.pie-web__redes a, .pie-web__col a { color: var(--text); text-decoration: none; }
.pie-web__redes a:hover, .pie-web__col a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pie-web__col h2 { margin: 0 0 10px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.pie-web__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie-web__base { width: calc(100% - 32px); max-width: 1088px; margin: 0 auto; padding: 16px 0 40px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
@media (min-width: 760px) {
  .pie-web__dentro { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .pie-web__marca { grid-column: auto; }
}

/* ---------- Portada sin piezas ---------- */
.inicio { max-width: 1120px; margin: 0 auto; padding: 48px 16px 0; }
.inicio__dentro { max-width: 760px; }
.inicio .barra-oro, .listado__cabecera .barra-oro { width: 72px; height: 6px; background: var(--oro); margin-bottom: 20px; }
.inicio h1 { font-size: clamp(36px, 6.4vw, 64px); line-height: 1.02; letter-spacing: -0.022em; margin: 12px 0 16px; text-wrap: balance; }
.inicio__entradilla { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; margin: 0 0 24px; font-weight: 500; }
.inicio__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.boton { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--text); color: var(--surface); font-size: 15px; font-weight: 600; text-decoration: none; }
.boton:hover { text-decoration: underline; text-underline-offset: 3px; }
.boton--sec { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.inicio__temas { margin-top: 56px; }
.inicio__titulo { margin: 0; padding-top: 10px; border-top: 1px solid var(--text); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.inicio__temas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 28px; }
.inicio__temas li { padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.inicio__temas p { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--text-muted); }
.inicio__directo { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 18px 20px; background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.inicio__directo strong { font-size: 20px; line-height: 1.25; letter-spacing: -0.005em; }
.inicio__ir { grid-column: 2; grid-row: 1 / span 2; font-size: 24px; }
.inicio__directo:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.portada__mas { max-width: 1120px; margin: 32px auto 0; padding: 0 16px; font-size: 15px; font-weight: 600; }
.portada__mas a::after { content: " →"; }

/* ---------- Secciones y archivo ---------- */
.listado { max-width: 1120px; margin: 0 auto; padding: 40px 16px 0; }
.listado__cabecera { max-width: 760px; margin-bottom: 28px; }
.listado__cabecera h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.05; letter-spacing: -0.018em; margin: 10px 0; text-wrap: balance; }
.listado__cabecera p:not(.etiqueta) { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-muted); }
.filas, .secciones { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--text); }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--hairline); color: var(--text); text-decoration: none; }
.fila img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-sunken); }
.fila h2 { margin: 6px 0; font-size: 19px; line-height: 1.25; letter-spacing: -0.005em; text-wrap: pretty; }
.fila__entradilla { display: none; margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--text-muted); }
.fila__meta { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fila:hover h2, .secciones a:hover .secciones__nombre, .archivo__mes a:hover .archivo__titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 359px) { .fila { grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; } }
@media (min-width: 720px) {
  .fila { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; padding: 24px 0; }
  .fila h2 { font-size: 24px; line-height: 1.2; }
  .fila__entradilla { display: block; }
}
.secciones a { display: grid; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--hairline); color: var(--text); text-decoration: none; }
.secciones__nombre { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.secciones__texto { font-size: 16px; line-height: 1.45; color: var(--text-muted); }
.secciones__n { font-family: var(--mono); font-size: 13px; color: var(--text-muted); }
@media (min-width: 720px) { .secciones a { grid-template-columns: 220px minmax(0, 1fr) auto; align-items: baseline; } }
.archivo__mes { margin-top: 32px; }
.archivo__mes h2 { display: flex; justify-content: space-between; margin: 0; padding-top: 10px; border-top: 1px solid var(--text); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.archivo__mes h2 span { font-family: var(--mono); font-weight: 400; letter-spacing: 0; color: var(--text-muted); }
.archivo__mes ol { list-style: none; margin: 0; padding: 0; }
.archivo__mes a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); color: var(--text); text-decoration: none; }
.archivo__mes time { grid-row: 1 / span 2; font-size: 20px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.archivo__mes .etiqueta { font-size: 12px; }
.archivo__titulo { font-size: 17px; line-height: 1.3; }
@media (min-width: 720px) { .archivo__mes a { grid-template-columns: 48px 160px minmax(0, 1fr); align-items: baseline; } .archivo__mes time { grid-row: auto; } }
.vacio { color: var(--text-muted); padding: 32px 0; margin: 0; border-top: 1px solid var(--hairline); }

/* Fotos -ND en portadas y listados: enteras dentro de su hueco, sin recorte. */
img.foto--intacta { object-fit: contain !important; background: var(--surface-sunken); }

/* ---------- Páginas fijas ---------- */
.fija .pieza__cabecera { padding-bottom: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 28px; }

/* ---------- Artículo ---------- */
.etiqueta { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oro-texto); }
.etiqueta a { color: inherit; text-decoration: none; }
.etiqueta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.correcciones { margin-top: 32px !important; padding: 16px 18px; background: var(--surface-sunken); border-left: 4px solid var(--oro); font-size: 16px; line-height: 1.5; }
.correcciones h2 { margin: 0 0 6px; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oro-texto); }
.correcciones p { margin: 0 0 6px; }
.correcciones__politica { font-size: 14px; }
.pieza { padding: 0 16px; }
.pieza > * { max-width: var(--ancho-texto); margin-left: auto; margin-right: auto; }
.pieza__cabecera { padding-top: 48px; }
.pieza__cabecera .barra-oro { width: 72px; height: 6px; background: var(--oro); margin-bottom: 20px; }
.pieza h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.06; letter-spacing: -0.015em; margin: 14px 0 18px; text-wrap: balance; }
.entradilla { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.45; color: var(--text); margin: 0 0 20px; font-weight: 500; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--text-muted); padding-bottom: 20px; border-bottom: 1px solid var(--hairline); }
.meta .compartir { margin-left: auto; color: var(--oro-texto); font-weight: 600; text-decoration: none; }
.portada-foto { max-width: var(--ancho-ancho); margin: 28px auto 8px; }
.portada-foto__marco { background: var(--surface-sunken); display: flex; justify-content: center; }
.portada-foto img { width: auto; max-width: 100%; max-height: 72vh; }
.portada-foto figcaption { font-size: 14px; line-height: 1.45; color: var(--text-muted); padding: 10px 0 0; }
.portada-foto .credito { font-family: var(--mono); font-size: 12px; display: block; margin-top: 4px; }
.cuerpo { font-size: 19px; line-height: 1.65; }
.pieza > .cuerpo { max-width: none; }
.cuerpo > * { max-width: var(--ancho-texto); margin-left: auto; margin-right: auto; }
.cuerpo p { margin: 0 auto 1.1em; }
.cuerpo h2 { font-size: clamp(24px, 3vw, 29px); line-height: 1.2; letter-spacing: -0.01em; margin: 1.8em auto 0.6em; text-wrap: balance; }
.cuerpo ul { padding-left: 1.2em; margin: 0 auto 1.2em; }
.cuerpo li { margin-bottom: 0.45em; }
.cuerpo li::marker { color: var(--oro-dato); }
sup.ref { font-size: 0.62em; line-height: 0; margin-left: 1px; font-feature-settings: "tnum"; }
sup.ref a { text-decoration: none; color: var(--oro-texto); font-weight: 600; padding: 0 1px; }
.claves { background: var(--surface-raised); border-top: 3px solid var(--oro); padding: 20px 22px 8px; margin: 32px auto; }
.claves h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oro-texto); margin: 0 0 10px; }
.claves ul { list-style: none; padding: 0; margin: 0; }
.claves li { position: relative; padding-left: 26px; margin-bottom: 12px; font-size: 18px; line-height: 1.5; }
.claves li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 14px; height: 4px; background: var(--simbolo-barra); }
.claves li:nth-child(2)::before { background: var(--oro); width: 9px; }
.claves li:nth-child(3)::before { width: 12px; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin: 32px auto; }
.cifra { background: var(--surface); padding: 18px 18px 16px; }
.cifra__valor { font-size: clamp(30px, 4vw, 40px); line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: inline-block; white-space: nowrap; }
.cifra__texto { font-size: 15px; line-height: 1.35; color: var(--text-muted); margin-top: 8px; }
.cifra__var { font-size: 14px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
.cifra__var.sube { color: var(--sube); } .cifra__var.baja { color: var(--baja); }
.cita { margin: 36px auto; padding-left: 22px; border-left: 4px solid var(--oro); }
.cita p { font-size: 23px; line-height: 1.38; font-weight: 500; margin: 0 0 10px; }
.cita footer { font-size: 15px; color: var(--text-muted); }
.nota { background: var(--surface-sunken); padding: 18px 20px; margin: 32px auto; font-size: 16px; line-height: 1.55; }
.nota h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; color: var(--text-muted); }
.nota p { margin: 0; }
/* Desplegables: «Cómo lo hemos calculado» y «Ver los datos» comparten diseño. */
.metodo { margin: 28px auto; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.metodo summary, .grafico__datos summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.metodo summary::-webkit-details-marker, .grafico__datos summary::-webkit-details-marker { display: none; }
.metodo summary { padding: 14px 2px; }
.metodo__marca svg { height: 13px; width: auto; display: block; }
.metodo__titulo { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.metodo__accion, .grafico__datos summary span { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--oro-texto); display: inline-flex; align-items: center; gap: 6px; }
.grafico__datos summary span { margin-left: 0; font-size: 13px; letter-spacing: 0.04em; }
.metodo__accion::after, .grafico__datos summary span::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.metodo[open] .metodo__accion::after, .grafico__datos[open] summary span::after { transform: translateY(2px) rotate(-135deg); }
.metodo[open] .metodo__accion { font-size: 0; } .metodo[open] .metodo__accion::before { content: "Ocultar"; font-size: 14px; }
.metodo__cuerpo { padding: 2px 0 18px 23px; border-left: 3px solid var(--oro); margin: 0 0 4px 4px; }
.metodo__cuerpo p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) and (min-width: 641px) { .metodo[open] .metodo__cuerpo, .grafico__datos[open] .tabla-envoltorio { animation: subir .45s var(--ease) both; } }
/* Fotos dentro del texto: enteras, sin recorte. */
.imagen { max-width: 780px !important; margin: 36px auto; }
.imagen img { width: auto; max-width: 100%; max-height: 70vh; margin: 0 auto; background: var(--surface-sunken); }
.imagen figcaption { font-size: 14px; line-height: 1.45; color: var(--text-muted); padding-top: 10px; }
.imagen .credito { font-family: var(--mono); font-size: 12px; display: block; margin-top: 4px; }
.fuentes { margin-top: 56px; border-top: 1px solid var(--hairline); padding-top: 20px; }
.fuentes summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; }
.fuentes summary::-webkit-details-marker { display: none; }
.fuentes summary h2 { margin: 0; }
.fuentes summary span { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--oro-texto); display: inline-flex; align-items: center; gap: 6px; }
.fuentes summary span::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.fuentes[open] summary span::after { transform: translateY(2px) rotate(-135deg); }
.fuentes h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.fuentes ol { margin: 0; padding-left: 1.6em; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.fuentes li { margin-bottom: 8px; scroll-margin-top: 80px; }
.fuentes li:target { color: var(--text); background: var(--surface-raised); }
.fuentes a { word-break: break-word; }
.creditos { font-size: 14px; color: var(--text-muted); margin-top: 20px; }

/* ---------- Gráficos ---------- */
.grafico { max-width: var(--ancho-ancho) !important; margin: 44px auto; padding: 22px 0 0; border-top: 1px solid var(--text); }
.grafico__etiqueta { margin: 0 0 8px; }
.grafico__titulo { font-size: clamp(21px, 2.6vw, 27px); line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 6px; text-wrap: balance; }
.grafico__subtitulo { font-size: 16px; line-height: 1.4; color: var(--text-muted); margin: 0 0 18px; font-weight: 500; }
.grafico__lienzo { position: relative; min-height: 40px; }
.grafico__lienzo svg { display: block; width: 100%; height: auto; overflow: visible; font-variant-numeric: tabular-nums; }
.grafico__lienzo:not(.js-listo) noscript { display: block; }
.grafico__pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--hairline); margin-top: 14px; padding-top: 10px; }
.grafico__fuente { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--text-muted); }
.grafico__firma { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.grafico__firma svg { height: 13px; width: auto; }
.grafico__nota { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin: 8px 0 0; }
.grafico__datos { margin-top: 10px; font-size: 14px; }
.grafico__datos summary { cursor: pointer; color: var(--oro-texto); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; width: max-content; }
.grafico__datos .tabla-envoltorio { margin-top: 10px; }
.grafico__leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; margin: 0 0 12px; color: var(--text); }
.grafico__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico__leyenda i { width: 12px; height: 12px; display: inline-block; }
.grafico__leyenda i.muestra-umbral { width: 18px; height: 0; border-top: 2px dashed var(--oro-dato); background: none; }
.grafico__leyenda--escanos { justify-content: center; margin-top: 14px; }
.grafico__leyenda--escanos b { font-variant-numeric: tabular-nums; }
.grafico__tip { position: absolute; top: 0; pointer-events: none; background: var(--surface-raised); border: 1px solid var(--hairline); padding: 8px 10px; font-size: 13px; line-height: 1.45; display: grid; gap: 2px; box-shadow: 0 6px 20px rgba(17, 20, 24, .08); z-index: 2; white-space: nowrap; }
.grafico__tip[hidden] { display: none; }
.grafico__tip i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; }
.hemiciclo-marco { display: flex; justify-content: center; }
.hemiciclo-marco svg { max-width: 640px; }

.grafico svg text { fill: var(--text); font-size: 14px; }
.grafico svg .eje { fill: var(--text-muted); font-size: 12px; }
.grafico svg .eje-fuerte { fill: var(--text); font-weight: 600; }
.grafico svg .nombre { font-size: 14px; font-weight: 500; }
.grafico svg .nombre-fuerte { font-weight: 600; }
.grafico svg .valor { font-size: 14px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.grafico svg .umbral-txt, .grafico svg .fin, .grafico svg .marca-txt { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.grafico svg .valor-p { font-size: 13px; }
.grafico svg .valor-oro, .grafico svg .umbral-txt { fill: var(--oro-texto); }
.grafico svg .umbral-txt { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.grafico svg .marca-txt { fill: var(--text-muted); font-size: 12px; }
.grafico svg .fin { font-size: 13px; } .grafico svg .fin-nombre { font-weight: 500; } .grafico svg .fin-valor { font-weight: 600; }
.grafico svg .dentro { fill: #fff; font-size: 13px; font-weight: 600; paint-order: stroke; stroke: rgba(0, 0, 0, .18); stroke-width: 2px; }
.grafico svg .dentro--oscuro { fill: #111418; stroke: rgba(255, 255, 255, .25); }
.grafico svg .rejilla line, .grafico svg .rejilla-v { stroke: var(--hairline); stroke-width: 1; }
.grafico svg .base { stroke: var(--text); stroke-width: 1; }
.grafico svg .linea { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico svg .linea.protagonista { stroke-width: 3.5; }
.grafico svg .relleno { opacity: .12; }
.grafico svg .umbral { stroke: var(--oro-dato); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.grafico svg .umbral-fuerte { stroke-width: 2; stroke-dasharray: none; }
.grafico svg .marca { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.grafico svg .hueco { fill: var(--surface-sunken); }
.grafico svg .rango-barra { stroke-width: 10; stroke-linecap: butt; opacity: .35; fill: none; }
.grafico svg .rango-punto { stroke: var(--surface); stroke-width: 2; }
.grafico svg .guia { stroke: var(--text-muted); stroke-width: 1; }
.grafico svg .guia-punto { stroke: var(--surface); stroke-width: 2; }
.grafico svg .hemi-total { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
/* Marca de agua: visible en una captura, casi invisible al leer. */
.grafico svg .marca-agua { pointer-events: none; opacity: .085; }
.grafico svg .marca-agua .b { fill: var(--text); } .grafico svg .marca-agua .o { fill: var(--oro); }
.grafico svg .marca-agua__txt { fill: var(--text); font-weight: 600; letter-spacing: -0.01em; }
:root[data-theme="dark"] .grafico svg .marca-agua { opacity: .11; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grafico svg .marca-agua { opacity: .11; } }
.grafico__lienzo svg.marca-agua-html { position: absolute; right: 4px; bottom: 4px; width: 150px; height: 28px; pointer-events: none; }

/* Animaciones de entrada (solo con JavaScript y sin «reducir movimiento»). */
.grafico svg .a-barra { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1.05s var(--ease) var(--d, 0ms); }
.grafico svg .a-col { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(0); transition: transform 1.05s var(--ease) var(--d, 0ms); }
.grafico svg .a-col.neg { transform-origin: center top; }
.grafico svg .a-trazo { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease) var(--d, 0ms); }
.grafico svg .umbral.a-trazo { stroke-dasharray: 1; }
.grafico svg .a-fade { opacity: 0; transition: opacity .7s ease var(--d, 0ms); }
.grafico svg .relleno.a-fade { opacity: 0; }
.grafico svg .a-punto { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0ms); }
.grafico .a-subir { opacity: 0; transform: translateY(10px); transition: opacity .6s ease var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.en svg .a-barra, .en svg .a-col, .en svg .a-punto { transform: none; }
.en svg .a-trazo { stroke-dashoffset: 0; }
.en svg .umbral.a-trazo { stroke-dasharray: 5 4; transition: stroke-dashoffset 1.5s var(--ease) var(--d, 0ms), stroke-dasharray 0s 1.6s; }
.en svg .umbral-fuerte.a-trazo { stroke-dasharray: none; }
.en svg .a-fade { opacity: 1; } .en svg .relleno.a-fade { opacity: .12; }
.en .a-subir { opacity: 1; transform: none; }
.sin-anim *, .sin-anim *::before { transition: none !important; }
.sin-anim svg .umbral.a-trazo { stroke-dasharray: 5 4; stroke-dashoffset: 0; }
.sin-anim svg .umbral-fuerte.a-trazo { stroke-dasharray: none; }
.cifras .cifra { transition: opacity .6s ease, transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .grafico *, .grafico svg * { transition: none !important; }
  .grafico svg .a-barra, .grafico svg .a-col, .grafico svg .a-punto, .grafico .a-subir { transform: none !important; opacity: 1 !important; }
  .grafico svg .a-trazo { stroke-dashoffset: 0 !important; }
  .grafico svg .umbral.a-trazo { stroke-dasharray: 5 4 !important; }
  .grafico svg .a-fade { opacity: 1 !important; }
  .progreso { display: none; }
}

/* Cronología y tabla */
.crono { list-style: none; margin: 0; padding: 4px 0 4px 26px; position: relative; }
.crono::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--hairline); }
.crono li { position: relative; padding: 0 0 18px; }
.crono li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 14px; height: 14px; background: var(--surface); border: 3px solid var(--text); }
.crono li:last-child::before { border-color: var(--oro-dato); background: var(--oro); }
.crono time { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
.crono b { display: block; font-size: 17px; line-height: 1.3; margin: 2px 0; }
.crono p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-muted); }
.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.tabla th { text-align: left; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--text); white-space: nowrap; }
.tabla td { padding: 9px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.tabla .der { text-align: right; }
.tabla .dest { font-weight: 600; color: var(--text); }
.tabla th.dest { color: var(--oro-texto); }
.tabla tbody tr:hover td { background: var(--surface-raised); }

/* Entrada suave de la cabecera del artículo */
@media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
  .pieza__cabecera > * { animation: subir .8s var(--ease) both; }
  .pieza__cabecera > :nth-child(2) { animation-delay: .05s; } .pieza__cabecera > :nth-child(3) { animation-delay: .1s; }
  .pieza__cabecera > :nth-child(4) { animation-delay: .15s; } .pieza__cabecera > :nth-child(5) { animation-delay: .2s; }
  .portada-foto { animation: aparecer 1s ease .25s both; }
  .pieza__cabecera .barra-oro { animation: crecer .9s var(--ease) both; transform-origin: left; }
}
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes crecer { from { transform: scaleX(0); } }

/* Aviso de borrador en la vista previa del panel */
.aviso-borrador { background: var(--oro); color: var(--tinta); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-align: center; padding: 8px 16px; }
@media print { .cabecera, .progreso, .meta .compartir { display: none; } .grafico { break-inside: avoid; } }
@media (max-width: 640px) {
  .cuerpo { font-size: 18px; line-height: 1.6; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifra { padding: 14px 12px; }
  .cifra__valor { font-size: 28px; }
  .claves li { font-size: 17px; }
  .cita p { font-size: 20px; }
  .grafico { margin: 36px auto; }
}

/* Mapa de EE UU en mosaico */
.mapa-marco { position: relative; display: flex; justify-content: center; }
.mapa-marco svg { max-width: 760px; }
.mapa-eeuu .teja { stroke: none; }
.mapa-eeuu .teja-txt { font-weight: 600; pointer-events: none; }
.mapa-eeuu .estado { cursor: default; outline: none; }
.mapa-eeuu .estado:focus .teja, .mapa-eeuu .estado:hover .teja { stroke: var(--text); stroke-width: 2; }
.estado--dem-segura .teja, i.estado--dem-segura { fill: #1F4E8C; background: #1F4E8C; }
.estado--dem-probable .teja, i.estado--dem-probable { fill: #4A80C4; background: #4A80C4; }
.estado--dem-inclinada .teja, i.estado--dem-inclinada { fill: #9DBCE3; background: #9DBCE3; }
.estado--igualada .teja, i.estado--igualada { fill: var(--oro); background: var(--oro); }
.estado--rep-inclinada .teja, i.estado--rep-inclinada { fill: #EBA79B; background: #EBA79B; }
.estado--rep-probable .teja, i.estado--rep-probable { fill: #D4604C; background: #D4604C; }
.estado--rep-segura .teja, i.estado--rep-segura { fill: #9C2F21; background: #9C2F21; }
.estado--sin-eleccion .teja, i.estado--sin-eleccion { fill: var(--surface-sunken); background: var(--surface-sunken); }
.grafico svg .estado--dem-segura .teja-txt, .grafico svg .estado--dem-probable .teja-txt, .grafico svg .estado--rep-segura .teja-txt, .grafico svg .estado--rep-probable .teja-txt { fill: #fff; }
.grafico svg .estado--dem-inclinada .teja-txt, .grafico svg .estado--rep-inclinada .teja-txt, .grafico svg .estado--igualada .teja-txt { fill: #111418; }
.grafico svg .estado--sin-eleccion .teja-txt { fill: var(--text-muted); }
.grafico__leyenda--mapa { justify-content: center; margin-top: 12px; }
.grafico__leyenda--mapa b { font-variant-numeric: tabular-nums; margin-left: 2px; }
/* Dispersión */
.grafico svg .tendencia { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 6 4; fill: none; }
.en svg .tendencia.a-trazo { stroke-dasharray: 6 4; }
.grafico svg .etiqueta-disp { font-size: 12px; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.grafico svg .punto-disp { stroke: var(--surface); stroke-width: 1.5; }
.sin-anim svg .tendencia.a-trazo { stroke-dasharray: 6 4; stroke-dashoffset: 0; }

/* Índice de capítulos (piezas largas) */
.indice { max-width: var(--ancho-texto); margin: 24px auto 0; }
.indice__plegable { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.indice__plegable summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.indice__plegable summary::-webkit-details-marker { display: none; }
.indice__n { margin-left: auto; color: var(--oro-texto); letter-spacing: 0.02em; text-transform: none; font-size: 14px; }
.indice ol { margin: 0; padding: 4px 0 14px 1.4em; font-size: 15px; line-height: 1.4; }
.indice li { margin: 6px 0; }
.indice li::marker { color: var(--oro-dato); font-variant-numeric: tabular-nums; }
.indice a { color: var(--text); text-decoration: none; }
.indice a:hover, .indice a.actual { color: var(--oro-texto); }
.indice a.actual { font-weight: 600; }
.cuerpo h2 { scroll-margin-top: 80px; }
@media (min-width: 1480px) {
  .pieza--larga .cuerpo { position: relative; }
  .pieza--larga .cuerpo > .indice { position: absolute; top: 0; bottom: 0; left: calc(50% - 440px - 270px); width: 240px; max-width: none; margin: 0; }
  .pieza--larga .indice__plegable { position: sticky; top: 90px; border: none; }
  .pieza--larga .indice__plegable summary { pointer-events: none; padding-top: 0; }
  .pieza--larga .indice__n { display: none; }
  .pieza--larga .indice ol { font-size: 14px; padding-left: 1.3em; }
}

.tabla th { white-space: normal; }
.tabla--densa { font-size: 14px; }
.tabla--densa th, .tabla--densa td { padding: 8px 7px; }
.tabla--densa th { font-size: 11px; }
@media (max-width: 640px) { .tabla { font-size: 14px; } .tabla--densa { font-size: 13px; } }

/* En el móvil, la nota de los gráficos va dentro del desplegable para no alargar la lectura. */
.grafico__nota--plegada { display: none; }
@media (max-width: 640px) {
  .grafico--lineas > .grafico__nota, .grafico--barras > .grafico__nota, .grafico--barras_h > .grafico__nota, .grafico--barras_agrupadas > .grafico__nota, .grafico--bloques > .grafico__nota, .grafico--hemiciclo > .grafico__nota, .grafico--rango > .grafico__nota, .grafico--mapa_eeuu > .grafico__nota, .grafico--dispersion > .grafico__nota { display: none; }
  .grafico__nota--plegada { display: block; margin: 0 0 10px; }
}