/* Noticias San José: perfil `diario`. Contrato de plantillas: templates/README.md
   Design read: diario local de BCS con lenguaje de revista de viajes; lienzo blanco, un solo acento verde profundo,
   fotografía a sangre como protagonista, tarjetas altas con chip de sección y "Lo último" con "Más cubiertas" al lado.
   HTML estático + CSS nativo + JS propio mínimo, sin dependencias. Sin vidrio esmerilado, sin orbe, sin azul.
   Dials: DESIGN_VARIANCE 4 · MOTION_INTENSITY 4 · VISUAL_DENSITY 6
   Radios: media y tarjetas 14 · miniaturas 12 · paneles 16 · todo control es pastilla o círculo.
   Un acento (verde #17624F / #4FB596). El arte CSS de respaldo (.paisaje) usa su propia paleta de mar y desierto,
   siempre dentro de verdes, teal y arena apagada; nunca rojo ni azul.
   Motion: solo transform, opacity y clip-path; nada se mueve con prefers-reduced-motion; sin listeners de scroll.
   Capas (z-index): contenido 0-3 dentro de cada tarjeta · cabecera 20 · menús y buscador 30 · "Ir al contenido" 40. */

@font-face { font-family: "Titillium Web"; src: url("../fonts/TitilliumWeb-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("../fonts/TitilliumWeb-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("../fonts/TitilliumWeb-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("../fonts/TitilliumWeb-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* Respaldo métrico: Arial ajustada al ancho y a las métricas verticales de Titillium (menos salto al cargar). */
@font-face { font-family: "Titillium Respaldo"; src: local("Arial"), local("Helvetica"); font-weight: 400; size-adjust: 91.6%; ascent-override: 123.7%; descent-override: 42.4%; line-gap-override: 0%; }
@font-face { font-family: "Titillium Respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 600 700; size-adjust: 87.3%; ascent-override: 129.8%; descent-override: 44.4%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  --bg: #FFFFFF;
  --surface: #F5F7F6;
  --raised: #FFFFFF;
  --ink: #121614;
  --ink-2: #4A524E;
  --muted: #626B66;          /* 5.5:1 en --bg, 5.1:1 en --surface */
  --accent: #17624F;         /* 7.3:1 en --bg; texto blanco encima 7.3:1 */
  --accent-hover: #0F4E3F;
  --accent-soft: #E3F1EC;    /* chips: acento encima 6.2:1 */
  --on-accent: #FFFFFF;
  --rango: #828C87;          /* números grandes de "Más cubiertas": 3.2:1 en --surface (texto grande) */
  --line: rgba(18, 22, 20, .08);
  --line-2: rgba(18, 22, 20, .16);
  --pie: #141816;
  --pie-ink: #E6ECE9;
  --pie-muted: #9AA49F;      /* 7.0:1 en --pie */
  --pie-acento: #6CC8AA;
  --pie-line: rgba(230, 236, 233, .12);
  --sombra: 0 1px 2px rgba(16, 40, 32, .06), 0 14px 32px -18px rgba(16, 40, 32, .28);
  /* sobre foto: siempre los mismos, en claro y oscuro */
  --velo: 8, 12, 10;
  --foto-ink: #FFFFFF;
  --foto-acento: #8FD9C0;
  --marca: #17624F;

  --sans: "Titillium Web", "Titillium Respaldo", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);

  --ancho: 1312px;
  --pad: 24px;
  --cab-h: 76px;
  --r-media: 14px;
  --r-mini: 12px;
  --r-panel: 16px;
  --banda-h: 104px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1311;
    --surface: #161D1A;
    --raised: #1B2420;
    --ink: #EDF2EF;
    --ink-2: #B3BDB8;
    --muted: #8E9893;        /* 6.3:1 en --bg, 5.8:1 en --surface */
    --accent: #4FB596;       /* 7.5:1 en --bg; texto encima: --on-accent oscuro (7.5:1) */
    --accent-hover: #6CC8AA;
    --accent-soft: #1C2E28;  /* chips: acento encima 5.7:1 */
    --on-accent: #0E1311;    /* ajuste: el blanco sobre #4FB596 da 2.5:1 */
    --rango: #66726C;        /* 3.4:1 en --surface (texto grande) */
    --line: rgba(237, 242, 239, .08);
    --line-2: rgba(237, 242, 239, .16);
    --pie: #080B0A;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 32px -18px rgba(0, 0, 0, .6);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.55 var(--sans); font-kerning: normal; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
main { display: block; outline: none; }
::selection { background: var(--accent); color: var(--on-accent); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.saltar {
  position: fixed; left: 16px; top: 12px; z-index: 40; padding: 10px 18px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; transform: translateY(-160%);
}
.saltar:focus { transform: none; }
.staging { margin: 0; padding: 8px 16px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 600; text-align: center; }

main > .nota { max-width: none; padding-inline: 0; }
main > *, .pie-in, .cab-in { width: 100%; max-width: calc(var(--ancho) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- cabecera ---------- */
.cab { position: relative; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.cab-in { display: flex; align-items: center; gap: 32px; min-height: var(--cab-h); }
.marca { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--accent); }
.marca-nombre { font-size: 18px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.sello { flex: none; }
.sello-disco { fill: var(--marca); }
.sello-sol { fill: #FFFFFF; }
.sello-ola { fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sello-ola--2 { opacity: .7; }

.secciones { flex: 1; min-width: 0; position: relative; }
.secciones-lista { display: flex; align-items: center; gap: 26px; white-space: nowrap; }
.sec-link, .mas-btn {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 10px 0;
  font-size: 16px; font-weight: 600; color: var(--ink-2); background: none; border: 0; cursor: pointer;
  transition: color .2s;
}
.sec-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.sec-link:hover, .mas-btn:hover, .mas-btn[aria-expanded="true"] { color: var(--ink); }
.sec-link:hover::after { transform: scaleX(.35); }
.sec-link[aria-current], .sec-link.actual { color: var(--accent); }
.sec-link[aria-current]::after, .sec-link.actual::after { transform: scaleX(1); }
.mas { position: relative; }
.mas-btn svg { transition: transform .25s var(--ease); }
.mas-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mas-menu {
  position: absolute; top: calc(100% + 8px); left: -12px; z-index: 30; min-width: 200px; padding: 8px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-mini); box-shadow: var(--sombra);
}
.mas-menu .sec-link { display: flex; padding: 9px 12px; border-radius: 8px; }
.mas-menu .sec-link::after { display: none; }
.mas-menu .sec-link:hover { background: var(--surface); }

.buscar { position: relative; flex: none; display: flex; align-items: center; }
.buscar-campo {
  width: 240px; height: 44px; padding: 0 46px 0 18px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
  transition: border-color .2s, width .35s var(--ease);
}
.buscar-campo::placeholder { color: var(--muted); }
.buscar-campo::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscar-campo:focus { border-color: var(--accent); }
.buscar-campo:focus-visible { outline-offset: 2px; border-radius: 999px; }
.buscar-btn, .buscar-abrir {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.buscar-btn { position: absolute; right: 2px; }
.buscar-btn:hover, .buscar-abrir:hover { color: var(--accent); }
.buscar-abrir { display: none; }
.buscar-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: min(440px, calc(100vw - 2 * var(--pad)));
  max-height: min(70vh, 520px); overflow: auto; padding: 8px; background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--sombra);
}
.buscar-opcion { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.buscar-opcion .t { font-weight: 600; line-height: 1.3; }
.buscar-opcion .m { font-size: 13px; color: var(--muted); }
.buscar-opcion mark { background: none; color: var(--accent); font-weight: 700; }
.buscar-opcion:hover, .buscar-opcion[aria-selected="true"] { background: var(--accent-soft); }
.buscar-vacio { padding: 12px; color: var(--muted); font-size: 15px; }

/* ---------- piezas comunes ---------- */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.chip:empty { display: none; }
.chip--marca { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.chip--marca[data-badge="nota"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.chip--mun { display: none; }
:is(.diapo, .tarjeta, .alta, .fila)[data-seccion="bcs"] .chip--mun:not(:empty),
body[data-seccion="bcs"] :is(.hist-cab, .nota-cab) .chip--mun:not(:empty) { display: inline-flex; }

.datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.datos > :empty, [data-kind="note"] .d-fuentes, [data-kind="story"] .d-lect { display: none; }
.datos > :is(.d-lect, .d-fuentes):not(:empty)::before { content: "·"; margin-right: 8px; }
.datos time { white-space: nowrap; }
/* en tarjetas angostas, las fuentes van en su propio renglón (sin "·" al inicio de línea) */
:is(.seccion-resto, .rel-rejilla, .rango) .datos > .d-fuentes { flex-basis: 100%; }
:is(.seccion-resto, .rel-rejilla, .rango) .datos > .d-fuentes:not(:empty)::before { content: none; }

/* enlace que cubre toda la tarjeta */
.cubre::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.cubre:focus-visible { outline: none; }
.cubre:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-media); }

/* bloques con filete vertical en el título */
.bloque { margin-top: 72px; }
.bloque-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.bloque-tit { position: relative; padding-left: 16px; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.005em; }
.bloque-tit::before { content: ""; position: absolute; left: 0; top: .14em; bottom: .14em; width: 4px; border-radius: 2px; background: var(--accent); }
.bloque-tit a { transition: color .2s; }
.bloque-tit a:hover { color: var(--accent); }

/* "Ver todo": enlace a la página de la sección, con flecha en círculo (sin página de sección, no se pinta) */
.ver-todo { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--accent); }
.ver-todo[data-texto=""] { display: none; }
.ver-todo:focus-visible { border-radius: 999px; }
.ver-todo-circ {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .35s var(--ease), background-color .2s, color .2s, box-shadow .2s;
}
.ver-todo-circ svg { width: 16px; height: 16px; }
.ver-todo:hover .ver-todo-circ { background: var(--accent); color: var(--on-accent); box-shadow: none; transform: translateX(3px); }

/* chip de sección = enlace a su página; queda por encima del enlace que cubre la tarjeta */
a.chip { position: relative; z-index: 4; transition: background-color .2s, color .2s; }
a.chip:hover { background: var(--accent); color: var(--on-accent); }
a.chip:focus-visible { outline-offset: 2px; border-radius: 999px; }
:is(.diapo, .alta) a.chip--sec:hover { background: #FFFFFF; color: var(--marca); box-shadow: inset 0 0 0 1.5px var(--marca); }

/* ---------- imagen: arte propio, foto con derechos o paisaje CSS (el arte va sin etiqueta: decisión 2026-10-10) ---------- */
.foto { position: relative; overflow: hidden; background: var(--surface); isolation: isolate; }
.foto > img, .foto > .paisaje { position: absolute; inset: 0; width: 100%; height: 100%; }
.foto > img { object-fit: cover; z-index: 1; }
[data-image-kind="none"] .foto > img, .foto > img:not([src]), .foto > img[src=""] { display: none; }
[data-image-kind="art"] .foto > .paisaje, [data-image-kind="photo"] .foto > .paisaje { visibility: hidden; }

/* Paisaje abstracto de mar y desierto (sin personas): cielo, sol, sierra lejana, forma cercana y mar.
   Variables por municipio (data-lugar) y, si no hay municipio, por sección (data-seccion). */
.paisaje {
  --cielo-a: #E2EEE8; --cielo-b: #C3DED3; --hor: 60%;
  --mar-a: #3A9483; --mar-b: #155446; --brillo: rgba(255, 246, 222, .38); --lineas: rgba(255, 255, 255, .13);
  --sol: #F6EED8; --sol-x: 70%; --sol-y: 30%; --sol-d: 13%;
  --lejos: #79A898; --lejos-h: 16%; --lejos-forma: polygon(0 100%, 0 70%, 12% 55%, 25% 62%, 40% 38%, 55% 52%, 70% 34%, 85% 50%, 100% 42%, 100% 100%);
  --cerca: #2C5A4D; --cerca-h: 0%; --cerca-baja: 0%; --cerca-forma: none;
  display: block; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--cielo-a) 0%, var(--cielo-b) var(--hor));
}
.paisaje::before { /* sol */
  content: ""; position: absolute; left: var(--sol-x); top: var(--sol-y); width: var(--sol-d); aspect-ratio: 1;
  border-radius: 50%; background: var(--sol); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1.4em color-mix(in srgb, var(--sol) 22%, transparent);
}
.paisaje::after { /* mar (o llano), con reflejo del sol y líneas de oleaje */
  content: ""; position: absolute; left: 0; right: 0; top: var(--hor); bottom: 0; z-index: 1;
  background:
    radial-gradient(ellipse 7% 55% at var(--sol-x) 0%, var(--brillo), transparent 72%),
    repeating-linear-gradient(180deg, var(--lineas) 0 1px, transparent 1px 9%),
    linear-gradient(180deg, var(--mar-a), var(--mar-b));
}
.paisaje > i { position: absolute; left: 0; right: 0; display: block; }
.paisaje > .p-lejos { bottom: calc(100% - var(--hor)); height: var(--lejos-h); background: var(--lejos); clip-path: var(--lejos-forma); }
.paisaje > .p-cerca { z-index: 2; bottom: calc(100% - var(--hor) - var(--cerca-baja)); height: var(--cerca-h); background: var(--cerca); clip-path: var(--cerca-forma); }

.paisaje[data-seccion="nacional"] { /* sierras encadenadas, sin mar */
  --cielo-a: #E7F0EB; --cielo-b: #CFE2D8; --hor: 70%; --mar-a: #6E9A86; --mar-b: #3D6C5A; --brillo: transparent; --lineas: rgba(255, 255, 255, .06);
  --sol-x: 26%; --sol-y: 34%; --sol-d: 11%;
  --lejos: #94B6A8; --lejos-h: 30%; --lejos-forma: polygon(0 100%, 0 62%, 8% 48%, 15% 58%, 24% 30%, 33% 52%, 41% 40%, 50% 66%, 58% 44%, 67% 20%, 76% 46%, 84% 36%, 92% 58%, 100% 44%, 100% 100%);
  --cerca: #4A7A68; --cerca-h: 22%; --cerca-forma: polygon(0 100%, 0 40%, 14% 62%, 30% 30%, 46% 58%, 60% 46%, 78% 70%, 90% 50%, 100% 64%, 100% 100%);
}
.paisaje[data-seccion="internacional"] { /* mar abierto y sol grande */
  --cielo-a: #E4EFEA; --cielo-b: #CDE3DA; --hor: 56%; --mar-a: #2B806F; --mar-b: #0E3D32;
  --sol-x: 50%; --sol-y: 40%; --sol-d: 22%; --lejos-h: 0%;
}
.paisaje[data-seccion="deportes"] { /* playa larga */
  --cielo-a: #E6F1EC; --cielo-b: #C9E2D8; --hor: 50%; --mar-a: #3E9C88; --mar-b: #1E6A5A;
  --sol-x: 80%; --sol-y: 24%; --sol-d: 12%; --lejos-h: 0%;
  --cerca: #D8CCAE; --cerca-h: 28%; --cerca-baja: -50%; --cerca-forma: polygon(0 100%, 0 52%, 30% 40%, 60% 50%, 100% 30%, 100% 100%);
}
.paisaje[data-seccion="bcs"] {
  --cielo-a: #E0EDE7; --cielo-b: #BFDBCF; --hor: 64%; --mar-a: #2E8574; --mar-b: #11493D;
  --sol-x: 30%; --sol-y: 28%; --sol-d: 11%;
  --lejos: #6F9C8C; --lejos-h: 26%; --lejos-forma: polygon(0 100%, 0 70%, 10% 50%, 18% 58%, 30% 22%, 40% 46%, 52% 30%, 62% 52%, 74% 26%, 86% 50%, 100% 40%, 100% 100%);
}
.paisaje[data-seccion="agenda"] { /* atardecer sobre la costa */
  --cielo-a: #DCEAE4; --cielo-b: #EFE4C9; --hor: 62%; --mar-a: #24786A; --mar-b: #0C3A30; --brillo: rgba(255, 236, 196, .5);
  --sol: #F6E5BE; --sol-x: 50%; --sol-y: 60%; --sol-d: 16%; --lejos: #6E9C8C; --lejos-h: 8%;
}
.paisaje[data-lugar="los-cabos"] { /* arco de roca en el mar al atardecer */
  --cielo-a: #D6E8E1; --cielo-b: #F0E6CE; --hor: 62%; --mar-a: #1F7A66; --mar-b: #0E3F33; --brillo: rgba(255, 236, 196, .45);
  --sol: #F6E7C1; --sol-x: 30%; --sol-y: 54%; --sol-d: 14%;
  --lejos: #7FAF9F; --lejos-h: 7%;
  --cerca: #24453C; --cerca-h: 50%; --cerca-baja: 12%;
  --cerca-forma: polygon(0 100%, 5% 42%, 20% 14%, 40% 0, 60% 10%, 80% 34%, 95% 70%, 100% 100%, 80% 100%, 75% 74%, 65% 54%, 52% 50%, 40% 58%, 32% 80%, 30% 100%);
}
/* el arco conserva su proporción en cualquier formato (miniatura cuadrada, tarjeta alta, hero ancho) */
.paisaje[data-lugar="los-cabos"] { container-type: size; }
.paisaje[data-lugar="los-cabos"] > .p-cerca { left: auto; right: 7%; height: min(50cqh, 46cqw); width: auto; aspect-ratio: 1 / 1.15; }
.paisaje[data-lugar="la-paz"] { /* bahía en calma e isla baja */
  --cielo-a: #E4F1EC; --cielo-b: #CFE6DD; --hor: 58%; --mar-a: #3C9C88; --mar-b: #1B6656;
  --sol-x: 22%; --sol-y: 22%; --sol-d: 11%;
  --lejos: #6E9F8F; --lejos-h: 9%; --lejos-forma: polygon(34% 100%, 40% 50%, 52% 20%, 66% 30%, 78% 62%, 84% 100%);
  --cerca: #2C5A4D; --cerca-h: 30%; --cerca-baja: 6%; --cerca-forma: polygon(0 100%, 0 40%, 10% 28%, 22% 56%, 30% 100%);
}
.paisaje[data-lugar="comondu"] { /* valle de desierto con mesa */
  --cielo-a: #EEF1E6; --cielo-b: #DCE4D2; --hor: 64%; --mar-a: #CDBF9E; --mar-b: #A8976F; --brillo: transparent; --lineas: rgba(255, 255, 255, .08);
  --sol-x: 78%; --sol-y: 28%; --sol-d: 12%;
  --lejos: #8BA597; --lejos-h: 20%;
  --cerca: #5E7B6B; --cerca-h: 30%; --cerca-forma: polygon(0 100%, 0 52%, 6% 38%, 30% 36%, 36% 54%, 44% 100%);
}
.paisaje[data-lugar="loreto"] { /* Sierra de la Giganta e isla */
  --cielo-a: #DCEBE5; --cielo-b: #B6D6CB; --hor: 66%; --mar-a: #2A8371; --mar-b: #10473B;
  --sol-x: 18%; --sol-y: 24%; --sol-d: 10%;
  --lejos: #4F7E70; --lejos-h: 40%; --lejos-forma: polygon(0 100%, 0 58%, 7% 30%, 13% 44%, 20% 12%, 27% 38%, 34% 26%, 42% 54%, 50% 20%, 57% 40%, 64% 8%, 72% 34%, 80% 22%, 88% 50%, 100% 30%, 100% 100%);
  --cerca: #23463C; --cerca-h: 22%; --cerca-baja: 8%; --cerca-forma: polygon(62% 100%, 66% 56%, 74% 40%, 84% 48%, 92% 68%, 95% 100%);
}
.paisaje[data-lugar="mulege"] { /* oasis de río entre cerros */
  --cielo-a: #E2EEE7; --cielo-b: #C7E0D4; --hor: 60%; --mar-a: #3A8F7C; --mar-b: #1C5E4F;
  --sol-x: 64%; --sol-y: 26%; --sol-d: 11%;
  --lejos: #7EA493; --lejos-h: 20%;
  --cerca: #2E6B53; --cerca-h: 40%; --cerca-baja: 4%; --cerca-forma: polygon(0 100%, 0 30%, 5% 10%, 9% 35%, 14% 5%, 19% 30%, 24% 12%, 29% 40%, 34% 18%, 40% 100%);
}
/* variación por posición: piezas vecinas del mismo lugar no repiten el mismo cuadro */
:is(.alta, .fila, .seccion-resto > .tarjeta, .rel-rejilla > .tarjeta):nth-child(even) .paisaje > i { transform: scaleX(-1); }
:is(.alta, .fila, .seccion-resto > .tarjeta, .rel-rejilla > .tarjeta):nth-child(even) .paisaje::before { left: calc(100% - var(--sol-x)); }
:is(.alta, .fila, .seccion-resto > .tarjeta, .rel-rejilla > .tarjeta):nth-child(even) .paisaje::after { background-position: calc(100% - var(--sol-x)) 0, 0 0, 0 0; }
:is(.alta, .fila, .seccion-resto > .tarjeta, .rel-rejilla > .tarjeta):nth-child(even) .paisaje[data-lugar="los-cabos"] > .p-cerca { right: auto; left: 7%; }
:is(.alta, .fila, .seccion-resto > .tarjeta, .rel-rejilla > .tarjeta):nth-child(3n) .paisaje::before { top: calc(var(--sol-y) + 12%); }
:is(.alta, .fila, .seccion-resto > .tarjeta, .rel-rejilla > .tarjeta):nth-child(3n) .paisaje { --cielo-a: #EDE6D2; }
:is(.alta, .fila, .seccion-resto > .tarjeta, .rel-rejilla > .tarjeta):nth-child(3n+2) .paisaje[data-lugar="los-cabos"] > .p-cerca { height: min(36cqh, 33cqw); }
:is(.alta, .fila, .seccion-resto > .tarjeta, .rel-rejilla > .tarjeta):nth-child(4n+3) .paisaje > .p-lejos { height: calc(var(--lejos-h) * 1.5); }
@media (prefers-color-scheme: dark) { .paisaje { filter: brightness(.8) saturate(.92); } }

/* hover: zoom 1.04 de la imagen dentro de su máscara; el titular cambia */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .foto > img, .foto > .paisaje { transition: transform .8s var(--ease); }
  :is(.alta-in, .fila, .tarjeta, .mosaico-link, .evento):hover .foto > :is(img, .paisaje) { transform: scale(1.04); }
}
:is(.fila, .tarjeta, .rango):hover :is(.fila-tit, .tarjeta-tit, .rango-tit) a { color: var(--accent); }
.fila-tit a, .tarjeta-tit a, .rango-tit a { transition: color .2s; }

/* ---------- portada: hero rotativo ---------- */
.portada { position: relative; margin-top: 16px; }
.portada-marco { position: relative; height: clamp(560px, calc(100svh - var(--cab-h) - 40px), 720px); border-radius: var(--r-media); overflow: hidden; background: #1A2420; isolation: isolate; }
.diapos { position: absolute; inset: 0; }
.diapo { position: absolute; inset: 0; color: var(--foto-ink); }
.diapo:not(:first-child) { display: none; }                   /* sin JS: solo la nota 1 */
.portada.vivo .diapo { display: block; opacity: 0; visibility: hidden; }
.portada.vivo .diapo.activa { opacity: 1; visibility: visible; }
.diapo-foto { position: absolute; inset: 0; background: #1A2420; }
.diapo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--velo), .18) 0%, rgba(var(--velo), 0) 22%, rgba(var(--velo), 0) 34%, rgba(var(--velo), .55) 60%, rgba(var(--velo), .9) 100%),
    linear-gradient(90deg, rgba(var(--velo), .5) 0%, rgba(var(--velo), 0) 62%);
}
.diapo-copy { position: absolute; left: 48px; right: 48px; bottom: calc(var(--banda-h) + 36px); z-index: 2; display: grid; gap: 18px; justify-items: start; }
.diapo .chip--sec { background: rgba(255, 255, 255, .94); color: #121614; }
.diapo .chip--mun { background: rgba(255, 255, 255, .94); color: #121614; }
.diapo .chip--marca, .alta .chip--marca { background: rgba(var(--velo), .45); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.diapo .chip--marca[data-badge="nota"], .alta .chip--marca[data-badge="nota"] { background: var(--marca); color: #FFFFFF; box-shadow: none; }
.diapo-titulo {
  --t: 46px; font-size: var(--ajuste, var(--t)); font-weight: 600; line-height: 1.07; letter-spacing: -.012em;
  max-width: min(15.5em, 100%); text-wrap: balance; text-shadow: 0 1px 24px rgba(var(--velo), .35);
}
.diapo-titulo[data-len="s"] { --t: 64px; }
.diapo-titulo[data-len="m"] { --t: 56px; }
.diapo-titulo[data-len="l"] { --t: 46px; max-width: min(17em, 100%); }
.diapo-titulo[data-len="xl"] { --t: 40px; max-width: min(19em, 100%); }
.diapo-titulo a { text-decoration: underline 2px transparent; text-underline-offset: .14em; transition: text-decoration-color .25s; }
.diapo-titulo a:hover { text-decoration-color: var(--foto-acento); }
.diapo-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.leer { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; color: #FFFFFF; }
.leer-circ {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: #FFFFFF; color: var(--marca); transition: transform .35s var(--ease);
}
.leer:hover .leer-circ { transform: translateX(3px); }
.diapo .datos { color: rgba(255, 255, 255, .86); font-size: 15px; }
.portada :focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 5px rgba(var(--velo), .55); }

/* banda de pastillas numeradas (escritorio: sobre la foto) */
.pastillas { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; z-index: 3; min-height: var(--banda-h);
  display: flex; align-items: stretch; border-radius: 0 0 var(--r-media) var(--r-media); background: rgba(var(--velo), .62);
  border-top: 1px solid rgba(255, 255, 255, .12); }
.pastillas-lista { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: pastilla; padding-right: 72px; }
.pastilla { counter-increment: pastilla; position: relative; display: flex; }
.pastilla + .pastilla::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: rgba(255, 255, 255, .14); }
.pastilla-btn {
  position: relative; flex: 1; display: flex; align-items: center; gap: 12px; padding: 18px 20px; min-width: 0;
  color: rgba(255, 255, 255, .78); text-align: left; background: none; border: 0; cursor: pointer; transition: color .2s;
}
.pastilla-btn:hover, .pastilla.activa .pastilla-btn { color: #FFFFFF; }
.pastilla-n {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); font-size: 15px; font-weight: 700; line-height: 1;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.pastilla-n::before { content: counter(pastilla); }
.pastilla.activa .pastilla-n, .no-js .pastilla:first-child .pastilla-n { background: #FFFFFF; color: var(--marca); box-shadow: none; }
.pastilla-t { font-size: 15px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pastilla-barra { position: absolute; left: 20px; right: 20px; top: 0; height: 2px; overflow: hidden; }
.pastilla-barra-in { display: block; height: 100%; background: #FFFFFF; transform: scaleX(0); transform-origin: left; }
.pastilla.activa .pastilla-barra-in { transform: scaleX(1); }
.pausa {
  position: absolute; right: 20px; top: 50%; margin-top: -20px; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #FFFFFF; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); transition: background-color .2s;
}
.pausa:hover { background: rgba(255, 255, 255, .26); }
.pausa svg { fill: currentColor; }
.pausa .i-play, .pausa.en-pausa .i-pausa { display: none; }
.pausa.en-pausa .i-play { display: block; }

/* ---------- destacadas: carrusel de tarjetas altas ---------- */
.carril-ctl { display: flex; align-items: center; gap: 10px; }
.puntos { display: flex; align-items: center; gap: 6px; margin-right: 8px; }
.punto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: width .35s var(--ease), background-color .25s; }
.punto.actual { width: 24px; background: var(--accent); }
.flecha {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--line-2); transition: background-color .2s, color .2s, opacity .2s;
}
.flecha--atras svg { transform: scaleX(-1); }
.flecha--llena { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.flecha:hover { border-color: var(--accent); color: var(--accent); }
.flecha--llena:hover { background: var(--accent-hover); color: var(--on-accent); }
.flecha[aria-disabled="true"] { opacity: .4; cursor: default; }
.flecha:active { transform: scale(.97); }

.carril {
  --alta-w: calc((100% - 4 * 16px) / 5);
  position: relative; display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding: 2px var(--pad) 6px; scroll-padding-inline: var(--pad);
}
.carril::-webkit-scrollbar { display: none; }
.alta { flex: 0 0 var(--alta-w); min-width: 0; scroll-snap-align: start; }
.alta-in { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-media); overflow: hidden; isolation: isolate; color: var(--foto-ink); background: #1A2420; }
.alta-foto { position: absolute; inset: 0; z-index: 0; }
.alta-in::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--velo), .3) 0%, rgba(var(--velo), 0) 24%, rgba(var(--velo), 0) 38%, rgba(var(--velo), .62) 64%, rgba(var(--velo), .9) 100%); }
.alta-chips { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; }
.alta .chip--sec { background: rgba(255, 255, 255, .94); color: #121614; }
.alta-cuerpo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 8px; padding: 18px; }
.alta-tit { font-size: 19px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.alta-tit a { text-decoration: underline 2px transparent; text-underline-offset: .14em; transition: text-decoration-color .25s; }
.alta-in:hover .alta-tit a { text-decoration-color: var(--foto-acento); }
.alta .datos { color: rgba(255, 255, 255, .86); font-size: 13px; }
.alta .cubre:focus-visible::after { outline-color: var(--accent); outline-offset: 3px; }

/* ---------- lo último + más cubiertas ---------- */
.ultimo { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 56px; align-items: start; margin-top: 72px; }
.ultimo > .bloque { width: auto; max-width: none; margin: 0; padding-inline: 0; }
.ultimo > .lateral { width: auto; max-width: none; margin-inline: 0; }
.lista-ultimo { display: grid; gap: 28px; }
.fila { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 20px; align-items: start; }
.fila-mini { aspect-ratio: 1; border-radius: var(--r-mini); }
.fila-cuerpo { display: grid; gap: 8px; min-width: 0; }
.fila-tit { font-size: 20px; font-weight: 600; line-height: 1.25; }
.fila-ext, .tarjeta-ext { font-size: 15px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ext-fuente { font-weight: 600; color: var(--ink); }
.ext-fuente:not(:empty)::after { content: ":"; }
.fila-ext:has(.ext-txt:empty), .tarjeta-ext:has(.ext-txt:empty) { display: none; }
.cargar-pie { display: flex; justify-content: center; margin-top: 36px; }
.cargar {
  height: 48px; padding: 0 28px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg);
  color: var(--ink); font-size: 16px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s;
}
.cargar:hover { border-color: var(--accent); color: var(--accent); }
.cargar:active { transform: translateY(1px); }
.cargar[aria-busy="true"] { opacity: .6; cursor: progress; }

.lateral { position: sticky; top: 24px; padding: 28px 26px 30px; border-radius: var(--r-panel); background: var(--surface); }
.lateral .bloque-cab { margin-bottom: 18px; }
.lateral .bloque-tit { font-size: 24px; }
.lista-rango { display: grid; gap: 22px; }
.rango { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: start; }
.rango-n { font-size: 34px; font-weight: 700; line-height: .95; color: var(--rango); letter-spacing: -.02em; }
.rango-cuerpo { display: grid; gap: 6px; }
.rango-tit { font-size: 17px; font-weight: 600; line-height: 1.3; }
.rango .datos { font-size: 13px; }

/* ---------- municipios ---------- */
.mosaico { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.mosaico-link { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; border-radius: var(--r-media); overflow: hidden; isolation: isolate; color: var(--foto-ink); }
.mosaico-foto { position: absolute; inset: 0; z-index: 0; }
.mosaico-link::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(var(--velo), .5), rgba(var(--velo), .28)); transition: opacity .3s; }
.mosaico-link:hover::after { opacity: .85; }
.mosaico-nombre { position: relative; z-index: 2; padding: 0 12px; font-size: 22px; font-weight: 700; line-height: 1.1; text-align: center; text-shadow: 0 1px 16px rgba(var(--velo), .5); }

/* ---------- bloques por sección (A y B alternan) ---------- */
.seccion-rejilla { display: grid; gap: 40px; align-items: start; }
.seccion--a .seccion-rejilla { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
.seccion--b .seccion-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr); }
.seccion--b .seccion-guia { order: 2; }
.seccion-rejilla:has(.seccion-resto:empty) { grid-template-columns: minmax(0, 1fr); }
.seccion-resto:empty { display: none; }
.seccion .chip--sec { display: none; }

.tarjeta { position: relative; display: grid; gap: 14px; align-content: start; }
.tarjeta-foto { aspect-ratio: 16 / 10; border-radius: var(--r-media); }
.tarjeta-cuerpo { display: grid; gap: 8px; min-width: 0; }
.tarjeta-tit { font-size: 18px; font-weight: 600; line-height: 1.28; }
.tarjeta-ext { display: none; }
.tarjeta .chips:not(:has(> :not(:empty))) { display: none; }

.seccion-guia .tarjeta { gap: 18px; }
.seccion-guia .tarjeta-tit { font-size: 30px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.seccion-guia .tarjeta-ext { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; font-size: 16px; }
.seccion--a .seccion-resto { display: grid; gap: 22px; }
.seccion--a .seccion-resto .tarjeta { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
.seccion--a .seccion-resto .tarjeta-foto { aspect-ratio: 4 / 3; border-radius: var(--r-mini); }
.seccion--b .seccion-resto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.seccion--b .seccion-resto .tarjeta-tit { font-size: 17px; }

/* ---------- agenda ---------- */
.agenda:has(.agenda-destacado:empty) { display: none; }
.agenda-rejilla { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.agenda-rejilla:has(.agenda-lista:empty) { grid-template-columns: minmax(0, 1fr); }
.agenda-lista:empty { display: none; }
.evento { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.evento-foto { aspect-ratio: 4 / 3; border-radius: var(--r-media); }
.evento-cuerpo { display: grid; gap: 12px; justify-items: start; }
.evento-fecha { font-size: 16px; font-weight: 700; color: var(--accent); }
.evento-tit { font-size: 32px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.evento-lugar { color: var(--ink-2); }
.evento-lugar:empty { display: none; }
.cuenta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cuenta-seg { display: grid; justify-items: center; min-width: 82px; padding: 10px 14px 9px; border-radius: var(--r-mini); background: var(--surface); }
.cuenta-n { font-size: 32px; font-weight: 700; line-height: 1.05; color: var(--accent); }
.cuenta-u { font-size: 13px; color: var(--muted); }
.evento-ir { margin-top: 8px; background: var(--accent); color: var(--on-accent); }
.evento:hover .evento-ir { transform: translateX(3px); }
.agenda-lista { display: grid; gap: 12px; }
.agenda-link { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-mini); background: var(--surface); transition: background-color .2s; }
.agenda-link:hover { background: var(--accent-soft); }
.agenda-fecha { font-size: 14px; font-weight: 700; color: var(--accent); }
.agenda-tit { font-size: 17px; font-weight: 600; line-height: 1.3; }
.agenda-lugar { font-size: 14px; color: var(--muted); }
.agenda-lugar:empty { display: none; }

/* ---------- pie ---------- */
.pie { margin-top: 96px; padding: 56px 0 28px; background: var(--pie); color: var(--pie-ink); }
.pie-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; }
.pie-marca { display: grid; gap: 22px; align-content: start; }
.marca--pie { color: var(--pie-acento); }
.pie-secciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; align-content: start; }
.pie-legal { display: grid; gap: 10px; align-content: start; }
.pie .sec-link, .pie-legal a { padding: 0; font-size: 15px; font-weight: 400; color: var(--pie-ink); }
.pie .sec-link::after { display: none; }
.pie .sec-link:hover, .pie-legal a:hover { color: var(--pie-acento); }
.pie :focus-visible { outline-color: var(--pie-acento); }
.pie-copy { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--pie-line); font-size: 14px; color: var(--pie-muted); }
.redes { display: flex; flex-wrap: wrap; gap: 10px; }
.redes:empty { display: none; }
.red { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(230, 236, 233, .08); color: var(--pie-ink); transition: background-color .2s, color .2s; }
.red:hover { background: var(--pie-acento); color: var(--pie); }
.red-ico { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.red[data-red="youtube"] { --ico: url("../img/redes/youtube.svg"); }
.red[data-red="x"] { --ico: url("../img/redes/x.svg"); }
.red[data-red="facebook"] { --ico: url("../img/redes/facebook.svg"); }
.red[data-red="instagram"] { --ico: url("../img/redes/instagram.svg"); }
.red[data-red="tiktok"] { --ico: url("../img/redes/tiktok.svg"); }

/* ---------- página de historia ---------- */
.ruta ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); }
.ruta li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.ruta a:hover { color: var(--accent); }
.hist-cab { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-top: 36px; }
.hist-cab:not(:has(.figura-ia)) { grid-template-columns: minmax(0, 1fr); }
.hist-cab-txt { display: grid; gap: 16px; align-content: end; }
.hist-tit { font-size: clamp(32px, 3.6vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; max-width: 24ch; text-wrap: balance; }
.hist-datos { font-size: 15px; }
.figura-ia { display: grid; gap: 10px; }
.figura-ia-marco { border-radius: var(--r-media); overflow: hidden; background: var(--surface); }
.figura-ia-marco img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.credito { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.credito:has(span:empty) { display: none; }

.hist-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; margin-top: 48px; }
.hist-principal { display: grid; gap: 48px; min-width: 0; }
.que-paso { display: grid; gap: 18px; padding: 30px 32px 28px; border-radius: var(--r-panel); background: var(--surface); }
.que-paso-tit { position: relative; padding-left: 16px; font-size: 24px; font-weight: 700; line-height: 1.15; }
.que-paso-tit::before { content: ""; position: absolute; left: 0; top: .14em; bottom: .14em; width: 4px; border-radius: 2px; background: var(--accent); }
.respuesta { font-size: 22px; line-height: 1.45; color: var(--ink); }
.relato { display: grid; gap: 14px; font-size: 18px; line-height: 1.65; color: var(--ink); max-width: 68ch; }
.relato:empty { display: none; }
:is(.cite, .cita) {
  display: inline-block; margin-left: 2px; padding: 0 5px; border-radius: 6px; vertical-align: .35em;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; line-height: 1.6; text-decoration: none;
}
:is(.cite, .cita):hover { background: var(--accent); color: var(--on-accent); }
.transparencia { font-size: 14px; color: var(--muted); }
.transparencia:has(> span:empty) { display: none; }
.ir-fuentes { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent); }
.ir-fuentes:hover { text-decoration: underline; text-underline-offset: .2em; }
.preguntas:has(.preguntas-lista:empty) { display: none; }
.preguntas .bloque-cab { margin-bottom: 18px; }
.preguntas-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
:is(.faq-item, .pregunta) { display: grid; gap: 8px; align-content: start; padding: 20px 22px; border-radius: var(--r-media); background: var(--surface); }
:is(.faq-item, .pregunta) h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
:is(.faq-item, .pregunta) p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

.fuentes .bloque-cab { margin-bottom: 8px; }
.fuentes-n { display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 15px; vertical-align: .15em; }
.fuente { position: relative; isolation: isolate; display: grid; gap: 8px; padding: 22px 0; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.fuente:first-child { border-top: 0; }
.fuente::before { content: ""; position: absolute; inset: 6px -16px; z-index: -1; border-radius: var(--r-media); background: var(--accent-soft); opacity: 0; }
.fuente:target::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .fuente:target::before { animation: resalta 2.6s var(--ease) forwards; } }
@keyframes resalta { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.fuente-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; color: var(--muted); }
.fuente-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
.fuente-medio { font-weight: 700; color: var(--ink); }
.fuente-cab time { margin-left: auto; }
.fuente-tit { font-size: 20px; font-weight: 600; line-height: 1.3; }
.fuente-tit a { text-decoration: underline 1px transparent; text-underline-offset: .18em; transition: color .2s, text-decoration-color .2s; }
.fuente-tit a:hover { color: var(--accent); text-decoration-color: currentColor; }
.fuente-tit svg { display: inline-block; margin-left: 6px; vertical-align: -.05em; color: var(--accent); }
.fuente-ext { padding-left: 14px; border-left: 3px solid var(--accent-soft); color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.fuente-ext:has(p:empty), .fuente-autores:empty { display: none; }
.fuente-autores { font-size: 14px; color: var(--muted); }

.cronologia { position: sticky; top: 24px; padding: 26px 24px; border-radius: var(--r-panel); background: var(--surface); }
.cronologia:has(.crono-lista:empty) { display: none; }
.lateral-tit { position: relative; padding-left: 16px; margin-bottom: 20px; font-size: 22px; font-weight: 700; line-height: 1.15; }
.lateral-tit::before { content: ""; position: absolute; left: 0; top: .14em; bottom: .14em; width: 4px; border-radius: 2px; background: var(--accent); }
.crono-lista { display: grid; }
.crono-item { position: relative; display: grid; gap: 2px; padding: 0 0 20px 22px; border-left: 2px solid var(--line-2); margin-left: 5px; }
.crono-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.crono-item::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2.5px var(--accent); }
.crono-item time { font-size: 13px; font-weight: 600; color: var(--accent); }
.crono-medio { font-size: 14px; font-weight: 700; }
.crono-tit { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.crono-tit:hover { color: var(--accent); }

.relacionadas:has(.rel-rejilla:empty) { display: none; }
.rel-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }

/* ---------- página de sección (/<sección>/): principal + 4 (composición A), luego "Lo último" y "Más cubiertas" ---------- */
.secc-cab { display: grid; gap: 14px; padding-top: 36px; }
.ruta [aria-current] { color: var(--ink-2); }
.secc-tit { position: relative; padding-left: 22px; font-size: clamp(36px, 4.6vw, 60px); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.secc-tit::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .1em; width: 6px; border-radius: 3px; background: var(--accent); }
.secc-abre { margin-top: 36px; }
.secc .chip--sec { display: none; }
.secc-mas .lo-ultimo:has(.lista-ultimo:empty), .secc-mas .lateral:has(.lista-rango:empty) { display: none; }
.secc-mas:has(.lista-ultimo:empty), .secc-mas:has(.lista-rango:empty) { grid-template-columns: minmax(0, 1fr); }
.secc-mas:has(.lista-ultimo:empty) .lateral { max-width: 760px; }
/* sin "Más cubiertas", "Lo último" ocupa el ancho en dos columnas (renglones de lectura cómodos) */
.secc-mas:has(.lista-rango:empty) .lista-ultimo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.secc-mas:has(.lista-ultimo:empty):has(.lista-rango:empty) { display: none; }

/* ---------- tema (/tema/<slug>/): una serie de notas; módulo "Tema" discreto en portada y en su sección ---------- */
.temas { display: grid; gap: 10px; margin-top: 40px; }
.temas:empty { display: none; }
.secc-cab + .temas { margin-top: 28px; }
.tema-link {
  display: grid; grid-template-columns: auto minmax(0, auto) auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  padding: 14px 0; border-block: 1px solid var(--line-2);
}
.tema-et { font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.tema-tit { font-size: 20px; font-weight: 600; line-height: 1.25; transition: color .2s; }
.tema-n { font-size: 14px; color: var(--muted); }
.tema-link .ver-todo-circ { grid-column: 5; }
.tema-link:hover .tema-tit { color: var(--accent); }
.tema-link:hover .ver-todo-circ { background: var(--accent); color: var(--on-accent); box-shadow: none; transform: translateX(3px); }
.tema-link:focus-visible { border-radius: 4px; }
.tema .secc-cab .tema-et { margin-bottom: -4px; }
.tema-intro { max-width: 62ch; font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.tema-intro:empty { display: none; }
.tema-mas { grid-template-columns: minmax(0, 1fr); }
.tema-mas:has(.lista-ultimo:empty) { display: none; }
.chip--tema { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--line-2); }
a.chip--tema:hover { box-shadow: none; }

/* ---------- página fija (aviso de privacidad, términos): el lenguaje de la nota, a la medida de la prosa ---------- */
.pagina .nota-cab { max-width: calc(720px + 2 * var(--pad)); }
.pagina .nota-tit { font-size: clamp(32px, 3.4vw, 46px); }
.pagina .nota-bajada { font-size: 20px; }
.pagina-fecha { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.pagina .prosa { margin-top: 28px; }
.pagina .prosa h2 { font-size: 24px; }

/* ---------- nota propia ---------- */
.nota-cab { display: grid; gap: 16px; max-width: 860px; margin: 36px auto 0; padding-inline: var(--pad); }
.nota-tit { font-size: clamp(34px, 4vw, 52px); font-weight: 700; line-height: 1.07; letter-spacing: -.015em; text-wrap: balance; }
.nota-bajada { font-size: 22px; line-height: 1.45; color: var(--ink-2); }
.nota-bajada:empty { display: none; }
.firma { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.firma .sello { width: 42px; height: 42px; }
.firma-txt { display: grid; gap: 2px; }
.firma-autor { font-weight: 700; }
.nota-fig { display: grid; gap: 10px; max-width: calc(1100px + 2 * var(--pad)); margin: 40px auto 0; padding-inline: var(--pad); }
.nota-fig.no-image { display: none; }
.nota-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-media); background: var(--surface); }
.prosa { max-width: calc(720px + 2 * var(--pad)); margin: 40px auto 0; padding-inline: var(--pad); font-size: 19px; line-height: 1.7; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 1.8em; font-size: 28px; line-height: 1.2; font-weight: 700; }
.prosa h3 { margin-top: 1.5em; font-size: 22px; line-height: 1.25; font-weight: 600; }
.prosa a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.prosa a:hover { text-decoration-thickness: 2px; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li + li { margin-top: .4em; }
.prosa blockquote { padding-left: 18px; border-left: 3px solid var(--accent); color: var(--ink-2); }
.prosa table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prosa th, .prosa td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.prosa mark.pendiente { background: var(--accent-soft); color: var(--accent); padding: 0 .2em; }

/* ---------- motion (todo apagado con reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .portada.vivo .diapo { transition: opacity .8s var(--ease-io), visibility 0s linear .8s; }
  .portada.vivo .diapo.activa { transition: opacity .8s var(--ease-io), visibility 0s; }
  .portada.vivo .diapo.activa .diapo-foto > :is(img, .paisaje) { animation: acerca 8.6s linear both; }
  .pastilla.corre .pastilla-barra-in { animation: llena var(--ms, 8000ms) linear forwards; }
  .portada.pausada .diapo.activa .diapo-foto > :is(img, .paisaje), .portada.pausada .pastilla.corre .pastilla-barra-in { animation-play-state: paused; }
  .linea { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
  .linea-in { display: block; transform: translateY(112%); transition: transform .4s var(--ease-in); }
  .diapo.activa .linea-in { transform: none; transition: transform .9s var(--ease) calc(.2s + var(--i, 0) * 90ms); }
  .portada.vivo .diapo .diapo-anima { opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
  .portada.vivo .diapo.activa .diapo-anima { opacity: 1; transform: none; transition: opacity .7s var(--ease) .1s, transform .9s var(--ease) .1s; }
  .portada.vivo .diapo.activa .diapo-pie { transition-delay: .45s; }
  .js .rv { opacity: 0; transform: translateY(18px); }
  .js .rv.dentro { opacity: 1; transform: none; transition: opacity .6s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms); }
}
@keyframes acerca { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .secciones-lista { gap: 20px; }
  .buscar-campo { width: 200px; }
  .diapo-titulo[data-len="s"] { --t: 56px; }
  .diapo-titulo[data-len="m"] { --t: 50px; }
  .diapo-titulo[data-len="l"] { --t: 44px; }
  .diapo-titulo[data-len="xl"] { --t: 38px; }
}
@media (max-width: 1100px) {
  .ultimo { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 52px; }
  .lateral { position: static; margin-top: 56px; }
  .carril { --alta-w: calc((100% - 2 * var(--pad) - 3 * 16px) / 3.4); }
  .mosaico { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mosaico-item { grid-column: span 2; }
  .mosaico-item:nth-child(-n + 2) { grid-column: span 3; }
  .mosaico-item:nth-child(-n + 2) .mosaico-link { aspect-ratio: 16 / 9; }
  .hist-rejilla { grid-template-columns: minmax(0, 1fr); }
  .secc-mas:has(.lista-rango:empty) .lista-ultimo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cronologia { position: static; }
  .rel-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pastilla-btn { padding: 16px 14px; gap: 10px; }
  .pastilla-t { font-size: 14px; }
}
@media (max-width: 899px) {
  :root { --pad: 16px; --cab-h: 60px; }
  body { font-size: 16px; }
  .cab-in { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-top: 10px; }
  .marca { flex: 1; min-height: 44px; }
  .marca-nombre { font-size: 16px; }
  .sello { width: 28px; height: 28px; }
  .js .buscar-abrir { display: grid; }
  .secciones { order: 3; flex: 0 0 100%; margin-inline: calc(-1 * var(--pad)); width: calc(100% + 2 * var(--pad)); }
  .secciones-lista { gap: 22px; overflow-x: auto; scrollbar-width: none; padding: 2px var(--pad) 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .secciones-lista::-webkit-scrollbar { display: none; }
  .mas { display: none !important; }
  .buscar { order: 2; flex: 0 0 100%; padding-bottom: 10px; }
  .buscar-campo { width: 100%; }
  .js .buscar { display: none; }
  .js .cab.buscando .buscar { display: flex; }
  .buscar-panel { left: 0; right: 0; width: auto; }

  .portada { margin-top: 0; }
  .portada { padding-inline: 0; }
  .portada-marco { height: clamp(460px, 76svh, 600px); border-radius: 0; }
  .diapo::after { background: linear-gradient(180deg, rgba(var(--velo), .2) 0%, rgba(var(--velo), 0) 20%, rgba(var(--velo), 0) 34%, rgba(var(--velo), .6) 58%, rgba(var(--velo), .92) 100%); }
  .diapo-copy { left: var(--pad); right: var(--pad); bottom: 24px; gap: 14px; }
  .diapo-titulo { --t: 30px; }
  .diapo-titulo[data-len="s"] { --t: 36px; }
  .diapo-titulo[data-len="m"] { --t: 32px; }
  .diapo-titulo[data-len="l"] { --t: 29px; }
  .diapo-titulo[data-len="xl"] { --t: 26px; }
  .leer-circ { width: 42px; height: 42px; }
  .pastillas { position: static; display: block; min-height: 0; padding: 8px var(--pad) 0; border-radius: 0; background: none; border: 0; }
  .pastillas-lista { display: grid; grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .pastilla + .pastilla::before { display: none; }
  .pastilla-btn { padding: 14px 0; gap: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
  .pastilla:last-child .pastilla-btn { border-bottom: 0; }
  .pastilla-btn:hover, .pastilla.activa .pastilla-btn { color: var(--ink); }
  .pastilla-n { width: 30px; height: 30px; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-2); }
  .pastilla.activa .pastilla-n, .no-js .pastilla:first-child .pastilla-n { background: var(--accent); color: var(--on-accent); }
  .pastilla-t { font-size: 16px; }
  .pastilla-barra { left: 44px; right: 0; top: auto; bottom: -1px; }
  .pastilla-barra-in { background: var(--accent); }
  .pausa { top: 12px; right: 12px; margin-top: 0; background: rgba(var(--velo), .5); }
  .portada :focus-visible { outline-color: var(--accent); box-shadow: none; }
  .portada-marco :focus-visible, .pausa:focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 5px rgba(var(--velo), .55); }

  .bloque { margin-top: 52px; }
  .bloque-cab { margin-bottom: 18px; }
  .bloque-tit { font-size: 24px; }
  .puntos { display: none; }
  .flecha { width: 40px; height: 40px; }
  .carril { --alta-w: 74%; }
  .fila { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
  .fila-tit { font-size: 18px; }
  .fila-ext { font-size: 14px; }
  .fila .datos > .d-fuentes { flex-basis: 100%; }
  .fila .datos > .d-fuentes:not(:empty)::before { content: none; }
  .lateral { padding: 22px 18px 24px; }
  .rango { grid-template-columns: 48px minmax(0, 1fr); }
  .rango-n { font-size: 30px; }
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mosaico-item, .mosaico-item:nth-child(-n + 2) { grid-column: span 1; }
  .mosaico-item:first-child { grid-column: 1 / -1; }
  .mosaico-item:nth-child(n + 2) .mosaico-link { aspect-ratio: 4 / 3; }
  .mosaico-item:first-child .mosaico-link { aspect-ratio: 16 / 9; }
  .mosaico-nombre { font-size: 19px; }
  .seccion--a .seccion-rejilla, .seccion--b .seccion-rejilla { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .seccion--b .seccion-guia { order: 0; }
  .seccion-guia .tarjeta-tit { font-size: 24px; }
  .seccion--a .seccion-resto .tarjeta, .seccion--b .seccion-resto .tarjeta { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .seccion--b .seccion-resto { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .seccion-resto .tarjeta-foto { aspect-ratio: 4 / 3; border-radius: var(--r-mini); }
  .agenda-rejilla, .evento { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .evento-tit { font-size: 26px; }
  .cuenta-seg { min-width: 72px; }
  .cuenta-n { font-size: 26px; }
  .pie { margin-top: 72px; padding-top: 44px; }
  .pie-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hist-cab { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
  .hist-cab .figura-ia { order: -1; margin-inline: calc(-1 * var(--pad)); }
  .hist-cab .figura-ia-marco { border-radius: 0; }
  .hist-cab .credito { padding-inline: var(--pad); }
  .que-paso { padding: 22px 18px; }
  .respuesta { font-size: 19px; }
  .relato { font-size: 17px; }
  .preguntas-lista { grid-template-columns: minmax(0, 1fr); }
  .rel-rejilla { grid-template-columns: minmax(0, 1fr); }
  .relacionadas .tarjeta { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .relacionadas .tarjeta-foto { aspect-ratio: 4 / 3; border-radius: var(--r-mini); }
  .secc-cab { padding-top: 24px; gap: 10px; }
  .secc-tit { padding-left: 18px; }
  .secc-tit::before { width: 5px; }
  .secc-abre { margin-top: 24px; }
  .temas { margin-top: 32px; }
  .tema-link { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "et circ" "tit circ" "n circ"; gap: 6px 14px; }
  .tema-link .tema-et { grid-area: et; }
  .tema-link .tema-tit { grid-area: tit; font-size: 18px; }
  .tema-link .tema-n { grid-area: n; font-size: 13px; }
  .tema-link .ver-todo-circ { grid-area: circ; grid-column: auto; }
  .tema-intro { font-size: 18px; }
  .pagina .nota-bajada { font-size: 18px; }
  .pagina .prosa h2 { font-size: 22px; }
  .ver-todo { gap: 8px; font-size: 14px; }
  .ver-todo-circ { width: 32px; height: 32px; }
  .nota-bajada { font-size: 19px; }
  .nota-fig { padding-inline: 0; }
  .nota-fig img { border-radius: 0; }
  .nota-fig .credito { padding-inline: var(--pad); }
  .prosa { font-size: 18px; }
}

@media print {
  .cab .secciones, .buscar, .buscar-abrir, .pastillas, .pausa, .carril-ctl, .cargar-pie, .saltar, .staging, .redes { display: none !important; }
  .portada-marco, .alta-in, .mosaico-link { break-inside: avoid; }
  .pie { background: none; color: #000; }
}

.foto-credito { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; color: #fff; background: rgb(0 0 0 / .55); }
.foto-credito:empty { display: none; }