/* Sin Relato — hoja de estilo única.
   Sin fuentes externas: cero requests a terceros y mejor Core Web Vitals.

   Una decisión que atraviesa todo el archivo: el sitio no usa rojo ni celeste
   como color de marca, y las dos tarjetas del bloque de posturas son
   idénticas. En un diario político el color es un mensaje, y no queremos
   mandar ninguno antes de que el lector lea. */

:root {
  --bg: #ffffff;
  --bg-2: #f5f7f8;
  --bg-3: #e8edef;
  --ink: #12161a;
  --ink-2: #4a555e;
  --ink-3: #78838c;
  --line: #dde3e6;
  --accent: #0f6b62;        /* verde petróleo: no es el color de nadie */
  --accent-2: #0b524b;
  --alert: #b3261e;         /* sólo para "último momento" y errores */
  --amber: #9a6b12;
  --violet: #5b4bc4;
  --radius: 6px;
  --wrap: 1180px;
  --narrow: 720px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --head: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1115; --bg-2: #161b21; --bg-3: #1f262e;
    --ink: #e9eef2; --ink-2: #aab4bd; --ink-3: #7c8790;
    --line: #262e37; --accent: #4ec9b8; --accent-2: #7adfd0;
    --alert: #ff6a5c; --amber: #d9a441; --violet: #9a8cf0;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .4em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.wrap-narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--bg); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- header */

.site-header { border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 40; background: var(--bg); }
.header-top { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--head); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.brand:hover { color: inherit; }

/* Dos barras del mismo ancho: la marca es el criterio del diario. */
.brand-mark { display: inline-flex; gap: 3px; align-items: center; }
.brand-mark i { display: block; width: 5px; height: 22px; background: var(--ink); border-radius: 1px; }
.brand-mark i:last-child { background: var(--accent); }
.brand-claim { margin: 0; font-size: 13px; color: var(--ink-3); border-left: 1px solid var(--line); padding-left: 16px; }

.search-mini { margin-left: auto; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); }
.search-mini input { border: 0; background: none; padding: 7px 12px; font: inherit; font-size: 14px; color: inherit; width: 150px; outline: none; }
.search-mini button { border: 0; background: none; padding: 7px 12px 7px 2px; cursor: pointer; color: var(--ink-3); }
.search-mini:focus-within { border-color: var(--accent); }

.site-nav { border-top: 1px solid var(--line); background: var(--bg); }
.nav-inner { display: flex; gap: 20px; overflow-x: auto; padding: 9px 18px; font-size: 14px; font-weight: 600; scrollbar-width: none; }
.nav-inner::-webkit-scrollbar { display: none; }
.nav-inner a { color: var(--ink-2); white-space: nowrap; }
.nav-inner a:hover, .nav-inner a[aria-current="page"] { color: var(--accent); }
.nav-data { color: var(--accent) !important; }
.nav-method { margin-left: auto; color: var(--ink-3) !important; text-decoration: underline; text-underline-offset: 3px; }
.nav-method:hover { color: var(--accent) !important; }

/* ---------------------------------------------------------------- barra de datos */

.databar { background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 13px; }
.databar-inner { display: flex; align-items: center; gap: 18px; min-height: 38px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.databar-inner::-webkit-scrollbar { display: none; }
.db-item, .db-rate { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink-2); }
.db-date { font-weight: 600; }
.db-time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.db-weather { border-left: 1px solid var(--line); padding-left: 18px; }
.db-ico { font-size: 15px; }
.db-temp { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.db-city { color: var(--ink-3); }
.db-rates { display: flex; gap: 14px; margin-left: auto; padding-left: 18px; }
.db-rate, .db-risk { font-variant-numeric: tabular-nums; }
.db-rate b, .db-risk b { font-weight: 700; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.db-risk { border-left: 1px solid var(--line); padding-left: 14px; }
.db-risk-v { font-weight: 700; color: var(--ink); }
/* Reservamos el alto desde el principio para que la barra no empuje la página
   cuando llegan los datos (evita el salto que Google mide como CLS). */
.databar-inner > * { min-height: 20px; }

/* ---------------------------------------------------------------- último momento */

.urgent-strip { background: var(--alert); color: #fff; font-size: 14px; }
.urgent-strip .wrap { display: flex; align-items: center; gap: 12px; padding-top: 9px; padding-bottom: 9px; overflow-x: auto; }
.urgent-strip a { color: #fff; font-weight: 600; white-space: nowrap; }
.urgent-strip a:hover { color: #fff; text-decoration: underline; }
.urgent-tag { background: rgba(0,0,0,.22); padding: 3px 9px; border-radius: 3px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.urgent-strip .sep { opacity: .5; }

/* ---------------------------------------------------------------- el sello */

.sello {
  display: inline-block; font-family: var(--sans); font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px;
  margin-right: 8px; border: 1px solid currentColor; white-space: nowrap;
}
.sello-hecho { color: var(--ink-2); }
.sello-verificacion { color: var(--accent); }
.sello-analisis { color: var(--amber); }
.sello-entrevista { color: var(--ink-2); }
.sello-opinion { color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, transparent); }
.sello-lg { font-size: 12px; padding: 5px 11px; }

.story-flag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.story-flag-blurb { font-size: 13px; color: var(--ink-3); }

/* ---------------------------------------------------------------- portada */

.frontpage { display: grid; grid-template-columns: 1.7fr 1fr; gap: 30px; margin: 26px 0 34px; }
.front-side { display: grid; gap: 24px; align-content: start; }
@media (max-width: 860px) { .frontpage { grid-template-columns: 1fr; gap: 26px; } }

.cols { display: grid; grid-template-columns: 1fr 320px; gap: 38px; align-items: start; }
@media (max-width: 960px) { .cols { grid-template-columns: 1fr; } }

.section { margin: 34px 0; }
.section-title {
  font-family: var(--sans); font-size: 13px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800;
  color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 20px;
}
.section-note { margin: -12px 0 20px; font-size: 13px; color: var(--ink-3); max-width: 70ch; }
.section-opinion { border-top: 1px solid var(--line); padding-top: 20px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px 24px; }

.card { display: flex; flex-direction: column; gap: 9px; }
.card-media { display: block; overflow: hidden; border-radius: var(--radius); background: var(--bg-3); aspect-ratio: 16 / 9; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.025); }
/* Nota sin foto: se muestra como titular, que es como se ve en cualquier
   diario de papel. En política es además lo más común: no siempre hay foto. */
.card-nomedia { border-top: 3px solid var(--ink); padding-top: 12px; }
.card-nomedia.card-lg { border-top-width: 5px; }

.card-title { font-size: 21px; margin: 0; }
.card-lg .card-title { font-size: clamp(26px, 3.6vw, 40px); }
.card-sm .card-title { font-size: 17px; }
.card-dek { margin: 0; color: var(--ink-2); font-size: 15px; }
.card-lg .card-dek { font-size: 17px; }
.card-meta { display: flex; gap: 10px; margin: 0; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
/* Una nota de último momento ya está anunciada en la franja roja de arriba.
   Pintarle además el título de rojo convierte la portada en una alarma
   permanente, que es justo el tono que este diario no quiere. Alcanza con una
   marca chica al costado. */
.card.is-urgent .card-title { position: relative; }
.card.is-urgent .card-title::before {
  content: ""; position: absolute; left: -14px; top: .35em; width: 5px; height: .8em;
  background: var(--alert); border-radius: 2px;
}
@media (max-width: 520px) { .card.is-urgent .card-title::before { display: none; } }
.card-verdict { margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.kicker a { color: var(--ink-2); }
.kicker a:hover { color: var(--accent); }
.kicker-text { color: var(--ink-3); }

.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; background: var(--bg-2); }
.chips a:hover { border-color: var(--accent); }
.chips span { font-size: 11px; color: var(--ink-3); }

.btn { display: inline-block; background: var(--ink); color: var(--bg); padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; border: 0; cursor: pointer; }
.btn:hover { background: var(--accent); color: #fff; }
.btn.ghost { background: none; color: var(--ink-2); border: 1px solid var(--line); }
.btn.ghost:hover { color: var(--accent); border-color: var(--accent); background: none; }
.more { margin-top: 22px; font-weight: 700; font-size: 14px; }

/* ---------------------------------------------------------------- widgets */

.widget { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 14px; margin-bottom: 22px; background: var(--bg-2); }
.widget-title { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--ink-3); margin-bottom: 12px; }

.num-list { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.num-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 11px; background: var(--bg); }
.num-list dt { font-size: 13px; color: var(--ink-2); }
.num-list dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.widget-election { text-align: left; }
.elec-count { margin: 0; font-family: var(--head); font-size: 15px; color: var(--ink-2); }
.elec-count strong { font-size: 40px; color: var(--ink); display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.elec-name { margin: 8px 0 2px; font-weight: 700; font-size: 15px; }
.elec-date { margin: 0; font-size: 13px; color: var(--ink-3); }
.elec-est { color: var(--amber); }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.check-list li:last-child { border-bottom: 0; }
.check-list a { display: block; font-weight: 600; margin-bottom: 4px; }
.check-verdict { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

/* Los veredictos son los únicos lugares del sitio donde el color dice algo,
   y dice algo sobre un dato verificable, no sobre una posición política. */
.veredicto-verdadero { color: var(--accent); }
.veredicto-verdadero-a-medias { color: var(--amber); }
.veredicto-impreciso { color: var(--amber); }
.veredicto-enganoso { color: var(--alert); }
.veredicto-falso { color: var(--alert); }
.veredicto-sin-datos { color: var(--ink-3); }

/* ---------------------------------------------------------------- nota */

.crumbs { margin: 16px 0; font-size: 12px; color: var(--ink-3); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: 7px; color: var(--line); }

.page-head { margin: 6px 0 28px; }
.page-head h1 { font-size: clamp(28px, 4.6vw, 42px); }
.page-sub { color: var(--ink-2); font-size: 17px; max-width: 62ch; margin: 0; }
.author-role { color: var(--accent); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.author-interests { font-size: 13px; color: var(--ink-2); background: var(--bg-2); border-left: 3px solid var(--line); padding: 9px 13px; border-radius: 0 4px 4px 0; margin: 12px 0 0; }
.empty { color: var(--ink-3); padding: 36px 0; font-size: 17px; }

.story-head { padding-top: 6px; padding-bottom: 22px; }
.story-head h1 { font-size: clamp(30px, 5vw, 46px); margin: 10px 0 14px; }
.dek { font-size: clamp(17px, 2.1vw, 20px); color: var(--ink-2); line-height: 1.45; margin: 0 0 20px; }
.byline { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 11px 0; }
.byline a { font-weight: 700; color: var(--ink-2); }
.byline .role { color: var(--ink-3); font-weight: 400; }
.byline-corr { color: var(--amber); font-weight: 700; }

.story-hero { margin: 26px auto; max-width: 1100px; padding: 0 18px; }
.story-hero img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; }
.story-hero figcaption { font-size: 12px; color: var(--ink-3); margin-top: 8px; }

.prose { font-size: 18px; line-height: 1.72; }
.prose p { margin: 0 0 1.25em; }
.prose h2 { font-size: clamp(22px, 2.8vw, 28px); margin: 1.8em 0 .45em; }
.prose h3 { font-size: clamp(18px, 2.2vw, 21px); margin: 1.5em 0 .35em; }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 1.25em; }
.prose li { margin-bottom: .4em; }
.prose blockquote { margin: 1.6em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--accent); font-size: 1.08em; color: var(--ink-2); }
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose code { background: var(--bg-2); padding: 2px 6px; border-radius: 4px; font-family: var(--mono); font-size: .88em; }

.block-title { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.block-note { font-size: 13px; color: var(--ink-3); margin: 0 0 16px; max-width: 68ch; }

/* -------- los datos duros, arriba del texto */

.facts { margin: 28px 0; padding: 18px 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.facts-grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.fact dt { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.fact-value { margin: 3px 0 4px; font-family: var(--head); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fact-unit { font-size: 15px; color: var(--ink-2); margin-left: 3px; }
.fact-src { margin: 0; font-size: 11px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 5px; }
.fact-src a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.fact-note { margin: 4px 0 0; font-size: 11px; color: var(--ink-3); font-style: italic; }

/* -------- las dos posturas: dos tarjetas deliberadamente idénticas */

.positions { margin: 36px 0; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; }
.pos {
  border: 1px solid var(--line); border-top: 3px solid var(--ink-2);
  border-radius: var(--radius); padding: 16px 18px; background: var(--bg-2);
  display: flex; flex-direction: column; gap: 8px;
}
.pos-silent { border-top-color: var(--line); background: none; border-style: dashed; }
.pos-actor { font-size: 17px; margin: 0; }
.pos-role { margin: -6px 0 0; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.pos-quote { margin: 4px 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.pos-quote p { margin: 0; font-family: var(--head); font-size: 17px; line-height: 1.4; }
.pos-summary { margin: 0; font-size: 15px; color: var(--ink-2); }
.pos-flag { margin: 0; font-size: 13px; color: var(--amber); font-style: italic; }
.pos-src { margin: auto 0 0; font-size: 12px; }
.pos-src a { color: var(--accent); }

/* -------- verificación */

.claim { margin: 26px 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.claim-said { padding: 18px 20px; background: var(--bg-2); }
.claim-said blockquote { margin: 8px 0; padding: 0; }
.claim-said blockquote p { margin: 0; font-family: var(--head); font-size: 21px; line-height: 1.35; }
.claim-who { margin: 0; font-size: 13px; color: var(--ink-3); }
.claim-who a { color: var(--accent); text-decoration: underline; }
.claim-verdict { padding: 16px 20px; border-top: 3px solid currentColor; }
.claim-label { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; color: var(--ink-3); }
.claim-value { margin: 2px 0 4px; font-family: var(--head); font-size: 30px; font-weight: 700; color: currentColor; }
.claim-blurb { margin: 0; font-size: 14px; color: var(--ink-2); }

/* -------- opinión: la postura declarada */

.stance { margin: 24px 0; padding: 14px 18px; border-left: 4px solid var(--violet); background: color-mix(in srgb, var(--violet) 7%, transparent); border-radius: 0 var(--radius) var(--radius) 0; }
.stance-label { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; color: var(--violet); }
.stance-text { margin: 5px 0 0; font-size: 15px; color: var(--ink-2); }

/* -------- fuentes y correcciones */

.sources { margin: 40px 0 26px; padding-top: 22px; border-top: 2px solid var(--ink); }
.source-list { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.source-list li { font-size: 15px; }
.source-list a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.source-meta { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.corrections { margin: 26px 0; padding: 14px 18px; border: 1px dashed var(--amber); border-radius: var(--radius); }
.corrections ul { margin: 8px 0 0; padding-left: 1.2em; }
.corrections li { font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.corr-date { font-weight: 700; color: var(--ink); }

.fix-cta { font-size: 14px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 26px; }
.fix-cta a { color: var(--accent); text-decoration: underline; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.tags a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; background: var(--bg-2); }
.tags a:hover { border-color: var(--accent); }

.gallery { margin: 36px 0; }
.gallery h2 { font-size: 20px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery figure { margin: 0; }
.gallery img { border-radius: 5px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.gallery figcaption { font-size: 11px; color: var(--ink-3); margin-top: 5px; }

.faq { margin: 36px 0; }
.faq h2 { font-size: 20px; }
.faq details { border-bottom: 1px solid var(--line); padding: 13px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq summary::marker { color: var(--accent); }
.faq p { margin: 9px 0 0; color: var(--ink-2); }

.author-box { background: var(--bg-2); border-radius: var(--radius); padding: 18px 20px; margin: 34px 0; }
.author-box h2 { font-size: 18px; margin-bottom: 4px; }
.author-box p { margin: 0 0 8px; color: var(--ink-2); font-size: 15px; }

/* ---------------------------------------------------------------- los números */

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.metric { border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; background: var(--bg-2); }
.metric-label { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; }
.metric-value { margin: 5px 0 3px; font-family: var(--head); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.metric-sub, .metric-date { margin: 0; font-size: 12px; color: var(--ink-3); }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.data-table tbody tr:hover { background: var(--bg-2); }
.dt-name span { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; margin-top: 2px; max-width: 46ch; }
.dt-value { font-family: var(--head); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-src { font-size: 12px; color: var(--ink-3); }
.data-note { font-size: 12px; color: var(--ink-3); margin: 12px 0 0; max-width: 80ch; }

.chart { margin: 22px 0 6px; }
.chart-svg { width: 100%; height: 110px; display: block; }
.chart-svg rect { fill: var(--accent); }
.chart-labels { list-style: none; display: flex; padding: 0; margin: 4px 0 0; }
.chart-labels li { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.cl-v { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-m { font-size: 10px; color: var(--ink-3); text-transform: uppercase; }

.calendar { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cal-item { display: grid; grid-template-columns: 160px 1fr auto; gap: 4px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); align-items: baseline; }
.cal-past { opacity: .5; }
.cal-date { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-name { font-family: var(--head); font-size: 18px; font-weight: 700; }
.cal-est { display: inline-block; margin-left: 8px; font-family: var(--sans); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); border: 1px solid currentColor; border-radius: 3px; padding: 2px 6px; }
.cal-detail { grid-column: 2; font-size: 13px; color: var(--ink-3); max-width: 70ch; }
.cal-days { grid-row: 1; grid-column: 3; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 700px) { .cal-item { grid-template-columns: 1fr; } .cal-detail, .cal-days { grid-column: 1; grid-row: auto; } }

.poll-avg { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px; background: var(--bg-2); }
.poll-avg h3 { font-size: 17px; margin-bottom: 14px; }
.poll-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.poll-bars li { display: grid; grid-template-columns: 150px 1fr 62px; gap: 4px 12px; align-items: center; }
.pb-name { font-weight: 600; font-size: 14px; }
.pb-track { height: 12px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.pb-fill { display: block; height: 100%; background: var(--accent); }
.pb-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; font-size: 14px; }
.pb-range { grid-column: 2 / -1; font-size: 11px; color: var(--ink-3); }
@media (max-width: 620px) { .poll-bars li { grid-template-columns: 1fr 62px; } .pb-track { grid-column: 1 / -1; } .pb-range { grid-column: 1 / -1; } }

.polls .poll-results { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.polls .poll-results b { font-variant-numeric: tabular-nums; }
.poll-sponsor, .poll-scope, .poll-margin { display: block; font-size: 11px; color: var(--ink-3); }

/* ---------------------------------------------------------------- actores */

.actor-head { display: flex; align-items: center; gap: 18px; padding: 0 0 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.actor-photo { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; flex: none; }
.actor-photo-empty { display: grid; place-items: center; background: var(--bg-3); font-family: var(--head); font-size: 34px; font-weight: 700; color: var(--ink-3); }
.actor-kind { margin: 0 0 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--accent); }
.actor-meta { margin: 0 0 4px; font-size: 15px; color: var(--ink-2); }
.actor-count { margin: 0; font-size: 12px; color: var(--ink-3); }
.actor-link { margin: 6px 0 0; font-size: 13px; }
.actor-link a { color: var(--accent); text-decoration: underline; }

.hub-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.hub-list a { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.hub-list a:hover { border-color: var(--accent); }
.hub-photo { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; flex: none; }
.hub-photo-empty { display: grid; place-items: center; background: var(--bg-3); font-weight: 700; color: var(--ink-3); font-size: 15px; }
.hub-name { display: flex; flex-direction: column; gap: 2px; font-weight: 700; min-width: 0; }
.hub-sub { font-size: 11px; font-weight: 400; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-count { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 44px 0; font-size: 14px; font-weight: 700; }
.page-count { color: var(--ink-3); font-weight: 400; }

.search-big { display: flex; gap: 9px; margin: 18px 0 6px; max-width: 540px; }
.search-big input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; font: inherit; background: var(--bg-2); color: inherit; }
.search-big input:focus { outline: none; border-color: var(--accent); }
.search-big button { border: 0; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 11px 22px; font: inherit; font-weight: 700; cursor: pointer; }
.search-big button:hover { background: var(--accent); color: #fff; }

.error-page { text-align: center; padding: 80px 18px; }
.error-page h1 { font-size: 84px; color: var(--accent); margin: 0; }
.error-page h2 { font-size: 24px; margin: 10px 0; }
.error-page .search-big { margin: 26px auto 0; }

/* ---------------------------------------------------------------- publicidad */

.ad { display: block; margin: 30px auto; text-align: center; overflow: hidden; }
.ad::before { content: "Publicidad"; display: block; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.ad-leaderboard { min-height: 100px; }
.ad-inline { min-height: 280px; }
.ad-box { min-height: 250px; margin-top: 0; }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 2px solid var(--ink); margin-top: 60px; padding: 38px 0 22px; background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.footer-grid h2 { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-3); margin-bottom: 10px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: 14px; }
.footer-grid a { color: var(--ink-2); }
.footer-tagline { font-family: var(--head); font-weight: 700; font-size: 18px; margin: 10px 0 12px; max-width: 30ch; }
.disclosure { font-size: 12px; color: var(--ink-3); line-height: 1.5; max-width: 46ch; }
.footer-method { margin: 12px 0 0; font-size: 14px; font-weight: 700; }
.footer-method a { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.footer-bottom p { margin: 0; }
.credits { font-size: 11px; max-width: 60ch; text-align: right; }

@media (max-width: 900px) {
  .brand-claim { display: none; }
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .credits { text-align: left; }
  .db-rates { padding-left: 12px; gap: 10px; }
  .search-mini { display: none; }
  .prose { font-size: 17px; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .db-weather { border-left: 0; padding-left: 0; }
}

/* En el teléfono la barra de datos no entra en una sola línea y las
   cotizaciones quedaban fuera de la pantalla. Van a un segundo renglón. */
@media (max-width: 680px) {
  .databar-inner { flex-wrap: wrap; overflow: visible; gap: 4px 14px; padding-top: 7px; padding-bottom: 7px; }
  .db-weather { border-left: 0; padding-left: 0; margin-left: auto; }
  .db-rates { width: 100%; margin-left: 0; padding-left: 0; justify-content: space-between; gap: 6px; }
  .db-rate { font-size: 12px; }
  .db-risk { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------- consentimiento */

.consent { position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--bg); border-top: 2px solid var(--ink); box-shadow: 0 -8px 30px rgba(0,0,0,.12); }
.consent-inner { max-width: var(--wrap); margin: 0 auto; padding: 16px 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.consent p { margin: 0; font-size: 13px; color: var(--ink-2); flex: 1; min-width: 250px; }
.consent a { color: var(--accent); text-decoration: underline; }
.consent-actions { display: flex; gap: 9px; }
.consent .btn { padding: 8px 16px; font-size: 13px; }

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