/* =========================================================================
   SIN CORTES — TEMA 2026, segunda iteración
   =========================================================================
   Revisión tras la primera maqueta: los COLORES y el modo historias se
   quedan como estaban; todo lo demás cambia un punto. Menos flotar y más
   periódico: tipografía con más carácter (Bricolage Grotesque en lo
   grande, Manrope en lo demás), esquinas más firmes, titulares NUMERADOS
   como un ranking, el acento entra por el borde izquierdo al señalar, y
   el globo pasa de halo difuso a instrumento: un anillo orbital fino con
   marcas que gira despacio.

   Sigue siendo una capa: se carga después del estilo original y gana por
   cascada. Ni un id, ni una clase, ni una función tocada. Quitar el
   <link> devuelve la web exactamente a como está hoy.
   ========================================================================= */

/* Las fuentes se cargan desde fuentes.css, servido por nosotros:
   ni una peticion a Google por tipografia. */

/* ------------------------------------------------------------------ base */
:root {
  --fondo: #070a12;
  --panel: rgba(23, 28, 40, .66);
  --panel2: rgba(34, 41, 58, .78);
  --texto: #eef1f8;
  --texto2: #98a2b8;
  --acento: #3d8bff;
  --acento2: #37e6ff;
  --linea: rgba(148, 163, 199, .16);
  --borde: 1px solid rgba(148, 163, 199, .18);
  --sombra: 0 18px 50px rgba(2, 4, 10, .55);
  --brillo: 0 0 0 1px rgba(61, 139, 255, .38),
            0 10px 36px rgba(61, 139, 255, .14);
  --degradado: linear-gradient(120deg, var(--acento), var(--acento2));
  --cristal: rgba(21, 26, 38, .58);
  --radio: 14px;                 /* esquinas mas firmes que en la v1 */
  --f-titulo: "Bricolage Grotesque", system-ui, sans-serif;
  --f-texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  font-family: var(--f-texto);
  background: var(--fondo);
  letter-spacing: .004em;
}
h1, h2, h3, h4, .chip-cat, .ficha-pais, #eslogan,
.pag-btn, #ver-todos, .cabecera-pais h2, .cabecera-cat h2 {
  font-family: var(--f-titulo);
  letter-spacing: .005em;
}
::selection { background: rgba(61, 139, 255, .35); color: #fff; }

a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--acento2);
  outline-offset: 2px;
  border-radius: 6px;
}

* { scrollbar-width: thin; scrollbar-color: rgba(61,139,255,.45) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--acento), var(--acento2));
  border-radius: 999px; border: 2px solid #0a0e18;
}
*::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------- atmósfera del fondo */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 34% at 78% 6%, rgba(61, 139, 255, .16), transparent 62%),
    radial-gradient(38% 30% at 6% 42%, rgba(55, 230, 255, .08), transparent 58%),
    radial-gradient(44% 36% at 52% 104%, rgba(124, 77, 255, .12), transparent 62%);
  animation: aurora-a 64s ease-in-out infinite alternate;
}
/* El grano llevaba mix-blend-mode: overlay a pantalla completa. Una capa
   de mezcla que cubre todo obliga al navegador a componer la pagina entera
   contra ella en cada fotograma, y eso se paga justo al hacer scroll. Se
   consigue casi el mismo efecto con la textura a poca opacidad, sin
   mezcla y sin coste. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  opacity: .5;
}
@keyframes aurora-a {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

/* --------------------------------------------------- hilo de progreso */
#hilo-progreso {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 1200; pointer-events: none;
  background: var(--degradado);
  transform-origin: 0 50%;
  transform: scaleX(var(--leido, 0));
  box-shadow: 0 0 12px rgba(61, 139, 255, .55);
}

/* ------------------------------------------------------------- cabecera */
/* Más fina y más de cabecera de periódico: el logo respira menos, el
   borde inferior es un hilo que se desvanece por los lados. */
header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(7, 10, 18, .78);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent,
                rgba(148, 163, 199, .28), transparent) 1;
  padding-top: 6px; padding-bottom: 2px;
  transition: padding .3s ease;
}
#logo { height: 84px; transition: height .3s ease; }
header.encogida #logo { height: 50px; }
@media (max-width: 640px) {
  header { position: static; }
  #logo { height: 58px; }
}
header select {
  background: rgba(17, 21, 32, .85); border: var(--borde); border-radius: 10px;
  font-family: var(--f-texto); font-weight: 600;
  transition: border-color .2s;
}
header select:hover { border-color: rgba(61, 139, 255, .5); }
#input-buscar {
  background: rgba(13, 17, 27, .82); border-radius: 12px;
  border: 1px solid rgba(148, 163, 199, .22);
  padding: 9px 16px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
#input-buscar:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 4px rgba(61, 139, 255, .16);
  background: rgba(13, 17, 27, .95);
}
#sugerencias {
  border-radius: var(--radio); background: rgba(15, 19, 30, .95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(148, 163, 199, .22);
  box-shadow: var(--sombra); overflow: hidden;
}
.sugerencia { transition: background .15s, color .15s; }
.sugerencia:hover, .sugerencia.marcada {
  background: rgba(61, 139, 255, .14); color: #fff;
}
#contador-online, #contador-total {
  border-radius: 10px; border: 1px solid rgba(148, 163, 199, .2);
  background: rgba(255, 255, 255, .045);
}

/* ------------------------------------------------------- globo y lienzo */
#fondo-wrap {
  background: radial-gradient(1200px 700px at 50% 30%,
              #0a1122 0%, #060a15 55%, #02040a 100%);
}
/* De halo difuso a instrumento: un anillo orbital fino y punteado que
   gira muy despacio alrededor del globo, como la escala de un sextante. */
/* Los dos anillos se cuelgan del CENTRO REAL del globo, que publica
   tema-2026.js en --globo-cy y --globo-d. Antes iban con un desplazamiento
   fijo de -48 px y quedaron descentrados en cuanto el globo se movio para
   dejar sitio al mensaje de La Sala. Su tamaño tambien es relativo al
   diametro del globo (1,10 y 1,21), no a la altura de la ventana: asi
   guardan siempre la misma proporcion. */
#globo-wrap::before,
#globo-wrap::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: var(--globo-cy, 50%);
  border-radius: 50%;
}
#globo-wrap::before {
  width: calc(var(--globo-d, 460px) * 1.10);
  height: calc(var(--globo-d, 460px) * 1.10);
  margin: calc(var(--globo-d, 460px) * -0.55) 0 0
          calc(var(--globo-d, 460px) * -0.55);
  border: 1px dashed rgba(61, 139, 255, .35);
  box-shadow: 0 0 60px rgba(61, 139, 255, .08) inset,
              0 0 90px rgba(61, 139, 255, .06);
  animation: orbita-gira 120s linear infinite;
}
#globo-wrap::after {
  width: calc(var(--globo-d, 460px) * 1.21);
  height: calc(var(--globo-d, 460px) * 1.21);
  margin: calc(var(--globo-d, 460px) * -0.605) 0 0
          calc(var(--globo-d, 460px) * -0.605);
  border: 1px solid rgba(148, 163, 199, .09);
}
/* El giro va con transform puro. Centrar con margin negativo en vez de
   translate(-50%,-50%) es lo que permite que rotate() no pelee con el
   centrado: antes la animacion tenia que repetir el translate en cada
   fotograma y bastaba un descuido para descuadrarlo. */
@keyframes orbita-gira {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@media (max-width: 720px) {
  #globo-wrap::before, #globo-wrap::after { display: none; }
}
#lienzo .pista {
  font-family: var(--f-texto); font-weight: 700;
  font-size: .74rem; letter-spacing: .34em; color: #93a0ba;
}
#ficha-globo {
  border-radius: var(--radio); background: rgba(13, 17, 27, .68);
  border: 1px solid rgba(148, 163, 199, .26);
  box-shadow: 0 24px 60px rgba(2, 4, 10, .65),
              inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* el globo entra floreciendo la primera vez */
@keyframes florece {
  from { opacity: 0; transform: scale(.86); filter: blur(6px) brightness(1.4); }
  to   { opacity: 1; transform: scale(1); filter: none; }
}
/* La entrada floreciendo y el latido escalaban el ELEMENTO. Mientras el
   lienzo tenía el tamaño del globo daba igual; ahora que ocupa todo el
   hueco, escalarlo encogería también las estrellas y el sitio donde uno
   amplía con los dedos. Se deja solo el fundido de entrada, que no toca
   la geometría. */
@keyframes florece-globo {
  from { opacity: 0; filter: blur(6px) brightness(1.4); }
  to   { opacity: 1; filter: none; }
}
/* `both` deja fijada la ultima imagen del fotograma final, y como el
   fotograma habla de `filter`, el lienzo se queda con un filter: blur(0px)
   puesto para siempre. Es invisible, pero obliga al navegador a componer el
   globo en una capa aparte, y ahi lo rasteriza a menos resolucion: el globo
   se veia borroso incluso con el lienzo a su tamaño exacto. Con `backwards`
   el fotograma inicial se aplica antes de empezar -que es lo unico que hacia
   falta para que no parpadee- y al terminar el globo vuelve a su estilo
   normal, sin ningun filtro. */
#globo { animation: florece-globo 1.1s cubic-bezier(.2, .8, .2, 1) backwards; }

/* --------------------------------------------------------------- cinta */
/* Menos pastilla y más ficha de teletipo: fondo casi nulo, y al señalar
   el nombre se subraya con el degradado en vez de inflarse. */
#cinta-wrap {
  background: rgba(8, 11, 19, .55);
  border-top: 1px solid rgba(148, 163, 199, .14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#cinta {
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ficha-pais {
  position: relative;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px; padding: 8px 14px;
  font-weight: 700; font-size: .84rem;
  transition: background .2s, border-color .2s;
}
.ficha-pais::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 999px; background: var(--degradado);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .25s cubic-bezier(.2, .8, .3, 1);
}
.ficha-pais:hover { transform: none; background: rgba(61, 139, 255, .08);
                    border-color: rgba(148, 163, 199, .16); }
.ficha-pais:hover::after { transform: scaleX(1); }
.ficha-pais.elegida {
  border-color: rgba(61, 139, 255, .5);
  background: rgba(61, 139, 255, .12);
}
.ficha-pais.elegida::after { transform: scaleX(1); }
.etiqueta-cinta { letter-spacing: .3em; font-size: .6rem; font-weight: 700; }

/* ------------------------------------------------------------- tarjetas */
/* Menos pecera y más papel de tinta: fondo mas solido, esquina firme, y
   el acento entra como una regla de luz por el borde IZQUIERDO. */
.tarjeta {
  position: relative;
  background: rgba(16, 20, 31, .82);
  border: 1px solid rgba(148, 163, 199, .13);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.tarjeta::before {
  content: ""; position: absolute; top: 10%; bottom: 10%; left: 0; width: 2px;
  background: linear-gradient(180deg, transparent,
              rgba(61, 139, 255, .55), rgba(55, 230, 255, .3), transparent);
  pointer-events: none;
}
/* el foco que sigue al puntero se queda, pero mas discreto */
.tarjeta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(480px 320px at var(--mx, 50%) var(--my, 0%),
              rgba(61, 139, 255, .06), transparent 65%);
}
.tarjeta:hover::after { opacity: 1; }

.brotable { opacity: 0; transform: translateY(22px); }
.brotable.brotado {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1),
              transform .6s cubic-bezier(.2, .7, .2, 1);
}

/* cabeceras de seccion: titular grande con subrayado corto y grueso */
.cabecera-pais h2, .cabecera-cat h2 {
  position: relative; padding-bottom: 8px;
  font-weight: 800; font-size: 1.6rem;
}
.cabecera-pais h2::after, .cabecera-cat h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px;
  width: 40px; border-radius: 999px; background: var(--degradado);
}
/* los h3 interiores pasan a antetitulo de periodico: pequeño, en
   mayusculas, con un hilo que sale hacia la derecha */
.tarjeta h3 {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-texto); font-size: .72rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: #93a0ba;
}
.tarjeta h3::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 199, .25), transparent);
}

/* ------------------------------------------------------ chips categorías */
.chip-cat {
  border: 1px solid rgba(148, 163, 199, .22);
  background: rgba(17, 21, 32, .7);
  font-family: var(--f-texto);
  font-weight: 700; font-size: .74rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 14px;
}
.chip-cat:hover {
  transform: translateY(-2px);
  border-color: rgba(61, 139, 255, .6);
}
.chip-cat.activa {
  background: var(--degradado);
  border-color: transparent; color: #061024;
  box-shadow: 0 8px 30px rgba(61, 139, 255, .4);
}
.chip-cat.activa .cuenta { color: rgba(6, 16, 36, .7); }
.chip-cat .cuenta { text-transform: none; letter-spacing: 0; }
.chip-cat.todas { border-style: dashed; }

/* ------------------------------------------------------------- noticias */
/* Ranking editorial: cada titular lleva su número, en fino, como una
   clasificación. El separador es un hilo que se desvanece y, al señalar,
   el acento entra por la izquierda en vez de flotar la fila entera. */
.tarjeta { counter-reset: titular; }
.noticia {
  counter-increment: titular;
  position: relative;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 40px,
                rgba(148, 163, 199, .18), transparent) 1;
  border-radius: 10px;
  transition: background .2s ease, box-shadow .2s ease;
}
.noticia::before {
  content: counter(titular, decimal-leading-zero);
  flex: 0 0 auto; min-width: 30px;
  font-family: var(--f-titulo); font-weight: 600; font-size: .82rem;
  color: rgba(148, 163, 199, .48);
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}
.noticia:hover {
  background: rgba(61, 139, 255, .06);
  transform: none;
  box-shadow: inset 3px 0 0 var(--acento);
  border-image: none; border-color: transparent;
}
.noticia:hover::before { color: var(--acento); }
.noticia a { font-weight: 700; line-height: 1.42; font-size: .98rem; }
.thumb {
  width: 88px; height: 88px; border-radius: 12px;
  border: 1px solid rgba(148, 163, 199, .18);
  background: rgba(13, 17, 27, .5);
}
.noticia:hover .thumb {
  border-color: rgba(61, 139, 255, .55);
  box-shadow: none;
}
/* el primer titular tras el rotulo es la portada: entra mas grande */
.tarjeta h3 + .noticia a { font-size: 1.18rem; font-weight: 800; }
.tarjeta h3 + .noticia .thumb { width: 112px; height: 112px; }
@media (max-width: 640px) {
  .noticia::before { display: none; }
  .tarjeta h3 + .noticia a { font-size: 1.02rem; }
  .tarjeta h3 + .noticia .thumb { width: 84px; height: 84px; }
}
.fuente {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: #8b96ad;
}
.etiqueta-cat { border: none; font-weight: 800; }
.sello-contraste {
  background: rgba(52, 209, 122, .12) !important;
  border: 1px solid rgba(52, 209, 122, .4) !important;
  color: #5fe39a !important;
  border-radius: 999px; font-weight: 700;
}
/* contraste internacional: azul. Va aquí porque la regla de arriba lleva
   !important y si no, el verde se comería siempre al azul. */
.sello-contraste.sello-mundo {
  background: rgba(64, 150, 255, .13) !important;
  border-color: rgba(64, 150, 255, .4) !important;
  color: #8ec8ff !important;
}
/* la cascada de entrada se queda, algo mas viva */
.noticia { animation-delay: calc(min(var(--i, 0), 10) * 45ms); }

/* ------------------------------------------------------------ slideshow */
.slide .dibujo { border-radius: var(--radio);
                 border: 1px solid rgba(148, 163, 199, .18); }
.slide .texto-slide a {
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.45rem;
  line-height: 1.28; letter-spacing: 0;
}
.flecha-slide {
  border-radius: 12px; border: 1px solid rgba(148, 163, 199, .22);
  background: rgba(17, 21, 32, .8);
  transition: transform .2s, border-color .2s, background .2s;
}
.flecha-slide:hover {
  border-color: var(--acento); background: rgba(61, 139, 255, .14);
}
.flecha-slide:active { transform: scale(.94); }

/* ------------------------------------------------- barra de país / nav */
.nav-pais {
  border-radius: 12px; border: 1px solid rgba(148, 163, 199, .22);
  background: rgba(17, 21, 32, .8);
  transition: transform .18s, border-color .18s, background .18s;
}
.nav-pais:hover {
  border-color: var(--acento); background: rgba(61, 139, 255, .14);
}
.nav-pais:active { transform: scale(.92); }
#ver-todos {
  border-radius: 12px; font-weight: 700;
  border: 1px solid rgba(148, 163, 199, .25);
  background: rgba(17, 21, 32, .8);
  transition: border-color .2s, background .2s;
}
#ver-todos:hover {
  border-color: var(--acento); background: rgba(61, 139, 255, .14);
}

/* ------------------------------------------------------------ paginación */
.pag-btn {
  border-radius: 10px; border: 1px solid rgba(148, 163, 199, .2);
  background: rgba(17, 21, 32, .7); font-weight: 700;
  transition: border-color .15s, background .15s;
}
.pag-btn:hover { border-color: var(--acento); }
.pag-btn.actual {
  background: var(--degradado); border-color: transparent; color: #061024;
  box-shadow: 0 6px 20px rgba(61, 139, 255, .35);
}

/* ---------------------------------------------------------------- lector */
#lector-fondo {
  background: rgba(4, 6, 12, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#lector-caja {
  border-radius: 20px; border: 1px solid rgba(148, 163, 199, .2);
  background: rgba(13, 17, 27, .96);
  box-shadow: 0 40px 120px rgba(2, 4, 10, .8);
}
#lector-titulo { font-family: var(--f-titulo); font-weight: 800; }
#lector-ir {
  background: var(--degradado); border: none; color: #061024;
  font-weight: 800; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(61, 139, 255, .35);
  transition: transform .2s, filter .2s;
}
#lector-ir:hover { transform: translateY(-2px); filter: brightness(1.08); }
#lector-ir:active { transform: scale(.97); }
#lector-cerrar, #lector-prev, #lector-next {
  border-radius: 12px; border: 1px solid rgba(148, 163, 199, .25);
  background: rgba(17, 21, 32, .85);
  transition: transform .18s, border-color .18s;
}
#lector-cerrar:hover, #lector-prev:hover, #lector-next:hover {
  border-color: var(--acento); transform: scale(1.06);
}

/* ---------------------------------------------------------------- boletín */
#boletin {
  position: relative; border-radius: var(--radio);
  background:
    linear-gradient(rgba(13, 17, 27, .94), rgba(13, 17, 27, .94)) padding-box,
    linear-gradient(120deg, rgba(61, 139, 255, .55),
                    rgba(55, 230, 255, .25), rgba(124, 77, 255, .35)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 24px 70px rgba(2, 4, 10, .55);
}
#boletin h2 {
  background: var(--degradado);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 800;
}
#boletin-correo {
  border-radius: 12px; border: 1px solid rgba(148, 163, 199, .28);
  background: rgba(10, 13, 21, .85);
  transition: border-color .25s, box-shadow .25s;
}
#boletin-correo:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 4px rgba(61, 139, 255, .16);
}
#boletin-enviar {
  background: var(--degradado); border: none; color: #061024;
  font-weight: 800; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(61, 139, 255, .35);
  transition: transform .2s, filter .2s;
}
#boletin-enviar:hover { transform: translateY(-2px); filter: brightness(1.08); }
#boletin-enviar:active { transform: scale(.97); }

/* ------------------------------------------------------ sala y reclamos */
#sala-ticker {
  border-radius: var(--radio); border: 1px solid rgba(148, 163, 199, .18);
  background: rgba(13, 17, 27, .88);
}
.st-unete {
  background: var(--degradado); color: #061024 !important;
  border-radius: 12px; font-weight: 800;
  transition: transform .2s, filter .2s;
}
.st-unete:hover { transform: translateY(-2px); filter: brightness(1.08); }
#abrir-sala {
  box-shadow: 0 14px 40px rgba(61, 139, 255, .35);
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
#abrir-sala:hover { transform: scale(1.08); }

/* -------------------------------------------------------- anuncios casa */
.an-casa {
  border-radius: var(--radio);
  background: rgba(15, 19, 30, .85);
  border: 1px solid rgba(148, 163, 199, .16);
}
.an-casa .an-boton.solido {
  background: var(--degradado); color: #061024; border: none;
  font-weight: 800; border-radius: 12px;
}
.an-casa .an-boton.hueco { border-radius: 12px; }

/* ------------------------------------------- consentimiento e instalar */
#consentimiento, #instalar-app {
  border-radius: var(--radio); border: 1px solid rgba(148, 163, 199, .22);
  background: rgba(11, 14, 23, .95);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(2, 4, 10, .7);
}
#btn-aceptar, #inst-boton {
  background: var(--degradado); border: none; color: #061024;
  font-weight: 800; border-radius: 12px;
  transition: transform .2s, filter .2s;
}
#btn-aceptar:hover, #inst-boton:hover {
  transform: translateY(-2px); filter: brightness(1.08);
}

/* ------------------------------------------------------------------ pie */
#pie {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent,
                rgba(148, 163, 199, .3), transparent) 1;
  background: rgba(7, 10, 18, .6);
}
.pie-enlaces a, .pie-temas a { transition: color .2s; }
.pie-enlaces a:hover, .pie-temas a:hover { color: var(--acento2); }

/* ---------------------------------------------- fichas de la cabecera */
.ficha-tema {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 10px; cursor: default;
  border: 1px solid rgba(148, 163, 199, .22);
  background: rgba(255, 255, 255, .05);
  font-size: .76rem; font-weight: 700; color: var(--texto2);
  white-space: nowrap; animation: brota-contador .5s ease both .2s;
}
.ficha-tema b { color: var(--texto); }
.ficha-tema.pulsable { cursor: pointer;
  transition: border-color .2s, background .2s; }
.ficha-tema.pulsable:hover {
  border-color: rgba(61, 139, 255, .6);
  background: rgba(61, 139, 255, .12);
}
.ficha-racha .llama { filter: drop-shadow(0 0 6px rgba(255, 122, 40, .8)); }
@media (max-width: 760px) { .ficha-continuar { display: none; } }

/* ------------------------------------------------- botón volver arriba */
#volver-arriba {
  position: fixed; left: 18px; bottom: 18px; z-index: 890;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(148, 163, 199, .3);
  background: rgba(15, 19, 30, .9); color: var(--texto);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 1.1rem; cursor: pointer;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .3s, transform .3s, border-color .2s;
  box-shadow: 0 12px 30px rgba(2, 4, 10, .5);
}
#volver-arriba.visible { opacity: 1; transform: none; pointer-events: auto; }
#volver-arriba:hover { border-color: var(--acento); }

/* -------------------------------------------------- confeti del boletín */
.confeti {
  position: fixed; z-index: 1190; width: 8px; height: 8px;
  border-radius: 2px; pointer-events: none; top: 0; left: 0;
  animation: confeti-cae 1.2s cubic-bezier(.2, .6, .4, 1) forwards;
}
@keyframes confeti-cae {
  from { opacity: 1; transform: translate(var(--cx), var(--cy)) rotate(0); }
  to   { opacity: 0;
         transform: translate(calc(var(--cx) + var(--dx)),
                              calc(var(--cy) + var(--dy))) rotate(540deg); }
}

/* =========================================================================
   LO ESENCIAL — modo historias. SE QUEDA COMO ESTABA (aprobado): solo
   hereda la tipografía nueva a través de las variables.
   ========================================================================= */
#abrir-esencial {
  position: fixed; left: 18px; bottom: 74px; z-index: 890;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; cursor: pointer;
  border: none; font-family: var(--f-titulo);
  background: var(--degradado); color: #061024;
  font-size: .86rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 14px 40px rgba(61, 139, 255, .4);
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), filter .2s;
  animation: brota-contador .6s ease both .8s;
}
#abrir-esencial:hover { transform: scale(1.06); filter: brightness(1.08); }
#abrir-esencial:active { transform: scale(.95); }
#abrir-esencial .rayo { display: inline-block;
  animation: rayo-late 2.4s ease-in-out infinite; }
@keyframes rayo-late {
  0%, 100% { transform: none; }
  50% { transform: scale(1.25) rotate(-8deg); }
}
@media (max-width: 720px) {
  #abrir-esencial { bottom: 18px; }
  #volver-arriba { display: none; }
}

#esencial {
  position: fixed; inset: 0; z-index: 1150;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 5, 10, .9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  animation: esencial-abre .3s ease both;
}
#esencial[hidden] { display: none; }
@keyframes esencial-abre { from { opacity: 0; } to { opacity: 1; } }
.ese-carta {
  position: relative; width: min(480px, 94vw); height: min(760px, 88vh);
  border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(148, 163, 199, .25);
  background:
    linear-gradient(160deg, rgba(23, 30, 48, .96), rgba(9, 12, 20, .98));
  box-shadow: 0 50px 140px rgba(0, 0, 0, .8);
  display: flex; flex-direction: column;
  animation: ese-entra .45s cubic-bezier(.2, 1.2, .3, 1) both;
}
@keyframes ese-entra {
  from { opacity: 0; transform: translateY(40px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.ese-barras { display: flex; gap: 5px; padding: 14px 16px 0; }
.ese-barras i {
  flex: 1; height: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); overflow: hidden; position: relative;
}
.ese-barras i::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(0);
  transform-origin: 0 50%; background: var(--degradado); border-radius: 999px;
}
.ese-barras i.hecha::after { transform: scaleX(1); }
.ese-barras i.activa::after {
  animation: ese-avanza var(--dura, 6s) linear forwards;
}
#esencial.en-pausa .ese-barras i.activa::after {
  animation-play-state: paused;
}
@keyframes ese-avanza { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ese-cab {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px 0;
  font-weight: 700; font-family: var(--f-titulo);
}
.ese-cab .bandera-txt { font-size: 1.5rem; }
.ese-cab .num { margin-left: auto; font-size: .74rem; color: var(--texto2); }
.ese-cuerpo {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 12px 26px 8px; min-height: 0;
}
.ese-etq {
  align-self: flex-start; padding: 4px 12px; border-radius: 999px;
  font-size: .62rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #061024;
  background: var(--degradado); margin-bottom: 18px;
}
.ese-titular {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem); line-height: 1.32;
  animation: ese-titular-entra .5s cubic-bezier(.2, .9, .3, 1) both .08s;
}
@keyframes ese-titular-entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.ese-fuente { margin-top: 16px; color: var(--texto2); font-size: .78rem;
              text-transform: uppercase; letter-spacing: .08em; }
.ese-pie { display: flex; gap: 10px; padding: 0 18px 18px; }
.ese-leer {
  flex: 1; text-align: center; padding: 13px; border-radius: 999px;
  background: var(--degradado); color: #061024 !important;
  font-weight: 800; text-decoration: none; font-size: .9rem;
  transition: transform .2s, filter .2s;
}
.ese-leer:hover { transform: translateY(-2px); filter: brightness(1.08); }
/* Cerrar: arriba a la derecha y medio transparente, para que se vea que
   está pero no compita con la foto. Al acercarse se vuelve nítido. */
.ese-cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(10, 13, 21, .38); color: #fff;
  font-size: 1rem; line-height: 1; cursor: pointer;
  opacity: .55; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
}
.ese-cerrar:hover, .ese-cerrar:focus-visible {
  opacity: 1; background: rgba(10, 13, 21, .72); transform: scale(1.06);
}

/* Zonas de toque, como en las historias de siempre: media carta a cada
   lado, de arriba abajo. Se quedan por debajo de la ✕ y del botón de leer
   —esos mandan— pero por encima de todo lo demás. */
.ese-zona {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 4;
  background: none; border: none; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ese-zona.izq { left: 0; }
.ese-zona.der { right: 0; }
/* la barra de progreso, la cabecera y el botón de leer siguen siendo
   pulsables: se ponen por encima de las zonas */
.ese-barras, .ese-cab { pointer-events: none; }
.ese-pie { z-index: 5; }

/* ------------------------------------------------ movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  body::before, #globo-wrap::before, #globo { animation: none; }
  .brotable { opacity: 1; transform: none; }
  #hilo-progreso { display: none; }
}

/* =========================================================================
   AJUSTES DE COLOCACIÓN — tras ver la portada publicada
   =========================================================================
   Tres problemas medidos en pantalla, no supuestos:
     · el mensaje de La Sala se comía 56 px del globo;
     · los contadores pisaban 191 px del eslogan a partir de 1100 px;
     · el eslogan no quedaba centrado porque el bloque derecho era ancho.
   Las variables --alto-ticker, --alto-cinta y --hueco-globo las publica
   tema-2026.js midiendo los bloques de verdad, porque su alto cambia con
   la longitud de la pregunta del día y con cuántas categorías haya.
   ========================================================================= */

/* ---------------------------------------- contadores bajo el buscador --- */
header .resto .fila-buscar {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  row-gap: 8px;
}
header .resto .fila-buscar #buscador { order: -1; }
.fila-contadores {
  flex: 0 0 100%;
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}

/* --------------------------------- el eslogan recupera el centro real --- */
/* Con el bloque derecho estrechado ya cabe, pero se le pone un techo
   prudente para que un idioma con palabras largas tampoco lo rompa. */
@media (min-width: 1100px) {
  #eslogan { max-width: min(40vw, 560px); }
}

/* -------------------------------- el globo, en el hueco que de verdad hay */
@media (min-width: 721px) {
  /* El mensaje de La Sala SUMA altura al lienzo en vez de robarsela al
     globo. Antes, en una pantalla de 720 px de alto, entre el mensaje y la
     cinta de categorias dejaban al globo en 225 px: ridiculo para lo que
     es la portada. Ahora la seccion crece lo que ocupa el mensaje y el
     globo conserva su tamaño; se baja un dedo mas de rueda, nada mas. */
  #lienzo { min-height: calc(88vh + var(--alto-ticker, 0px)); }
  #globo-wrap {
    top: var(--alto-ticker, 0px);
    padding-bottom: var(--alto-cinta, 96px);
  }
  /* El lienzo ya NO tiene el tamaño del globo: ocupa todo el hueco, para
     que al acercarse con los dedos la esfera no choque contra un borde
     cuadrado. El tamaño del planeta lo decide ahora diametroBase() en el
     JavaScript, que sigue leyendo --hueco-globo, así que la red de
     seguridad de la medida se conserva; lo que se va es el recorte.

     El -48 compensa el padding-bottom del contenedor: como centra, el
     globo vivía esos píxeles por encima del centro, y subiendo el lienzo
     otro tanto se queda donde estaba. */
  #globo {
    position: absolute; left: 0; top: -48px; right: auto; bottom: auto;
    width: 100%; height: 100%;
    aspect-ratio: auto; max-width: none; max-height: none;
  }
}

/* ------------------------------------------------------------- móvil ---- */
/* En móvil el mensaje de La Sala cae debajo de la cinta (es el último
   elemento del lienzo y ahí todo va en flujo normal), así que no tapa
   nada. Lo que sí hacía falta: que los dos contadores se repartan el
   ancho como antes, ahora que viven en su propia fila. */
@media (max-width: 640px) {
  .fila-contadores { gap: 8px; }
  .fila-contadores #contador-online,
  .fila-contadores #contador-total { flex: 1 1 0; justify-content: center; }
}

/* ------------------------------------------- objetivos táctiles en móvil */
/* Encontrados al auditar la portada en un móvil de 413 px: la equis de
   cerrar el aviso de instalar medía 21 px de alto y los enlaces de países
   destacados 18. Con el dedo eso se falla. No venían del tema —son de
   antes— pero se arreglan aquí porque aquí se vieron. */
@media (max-width: 720px) {
  #inst-cerrar {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
  }
  #destacados-seo li a { display: inline-block; padding: 5px 0; }
  #indice-seo li a { display: inline-block; padding: 4px 0; }
}

/* ================================= FOTOS EN «LO ESENCIAL» =============== */
/* La foto va al fondo de la carta, a sangre, y el texto encima. El velo es
   lo que hace que el titular se lea SIEMPRE: sin él, un titular blanco
   sobre una foto clara es ilegible, y eso pasa una de cada tres. */
.ese-foto {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  animation: ese-zoom 7s ease-out both;
}
@keyframes ese-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.ese-velo {
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(180deg, rgba(6, 9, 16, .80) 0%, rgba(6, 9, 16, .34) 22%,
                    rgba(6, 9, 16, .68) 46%, rgba(6, 9, 16, .86) 72%,
                    rgba(6, 9, 16, .96) 100%);
}
/* sin foto, el velo sobra: el color de la categoría ya da contraste */
#esencial:not(.con-foto) .ese-velo { opacity: .5; }

/* El contenido, por encima de la foto. OJO: aquí NO pueden entrar ni el
   botón de cerrar ni las zonas de toque. Ambos van colocados en absoluto
   sobre la carta, y darles «position: relative» los devolvía a la fila del
   flex: la ✕ acababa abajo a la izquierda y las zonas de toque se
   encogían hasta desaparecer, así que tocar la tarjeta no pasaba de
   historia. Solo necesitan la capa, que ya la tienen en su propia regla. */
.ese-barras, .ese-cab, .ese-cuerpo { position: relative; z-index: 2; }
/* el pie va por encima de las zonas de toque: si no, tocar «Leer la
   noticia completa» pasaba de historia en vez de abrir el enlace */
.ese-pie { position: relative; z-index: 5; }

/* con foto detrás, el texto necesita sombra para despegar */
#esencial.con-foto .ese-titular,
#esencial.con-foto .ese-cab { text-shadow: 0 2px 12px rgba(0, 0, 0, .75); }
#esencial.con-foto .ese-fuente { color: #cfd8e8; }

/* crédito de la foto: pequeño, honesto y sin robar protagonismo.
   Solo aparece cuando la imagen es de archivo — si la publicó el propio
   medio no hace falta advertir de nada. */
.ese-credito {
  margin-top: 10px; font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(207, 216, 232, .62);
}
.ese-credito:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ese-foto { animation: none; }
}


/* ===================== RENDIMIENTO EN MÓVIL Y PANTALLAS TÁCTILES ========
   El desenfoque de fondo es lo más caro que hay en una cabecera pegajosa:
   se recalcula en cada fotograma de scroll. En un ordenador no se nota; en
   un móvil de gama media se come la fluidez. Ahí se cambia por un fondo
   sólido, que es indistinguible en movimiento.
   ======================================================================= */
@media (max-width: 900px) {
  header, #cinta-wrap, #sugerencias, #volver-arriba,
  #consentimiento, #instalar-app, #sala-ticker, #esencial {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  header { background: rgba(7, 10, 18, .94); }
  #cinta-wrap { background: rgba(8, 11, 19, .92); }
  #sugerencias { background: rgba(15, 19, 30, .98); }
  #sala-ticker { background: rgba(13, 17, 27, .96); }
  #esencial { background: rgba(3, 5, 10, .97); }
  /* la aurora del fondo tampoco: en movil se deja quieta */
  body::before { animation: none; }
}

/* Lo que se mueve de verdad —el latido del globo, la cinta de titulares,
   el hilo de lectura y el zoom lento de las fotos de las historias— se
   avisa al navegador para que le dé su propia capa y no repinte lo que
   tiene detrás en cada fotograma. Solo eso: «will-change» de más gasta
   memoria de vídeo y acaba siendo contraproducente, así que el lienzo del
   cielo, que no se transforma nunca, se queda fuera. */
#globo, #hilo-progreso, .ese-foto, #cinta-track { will-change: transform; }

/* =========================================================================
   ORDEN DE LAS CAPAS
   =========================================================================
   Este tema convirtió la cabecera en pegajosa y la puso en la capa 900 para
   que flotara por encima del contenido al bajar. El lector de noticias
   estaba en la 120 de siempre, así que la cabecera —183 px de alto— pasó a
   pintarse ENCIMA del lector: al abrir una noticia, la foto y la parte de
   arriba de la tarjeta salían cortadas detrás del eslogan. Y el aviso de
   cookies, en la 999, tapaba el botón «Seguir leyendo» del anuncio.

   Son dos síntomas del mismo descuido: no había un orden pensado. Aquí
   está, de abajo arriba, y todo lo que sea una capa a pantalla completa
   tiene que ir por encima de la cabecera y del aviso:

       fondo (aurora, grano) ........... -2 / -1
       contenido de la página .......... 0 … 890
       cabecera pegajosa ............... 900
       hilo de lectura ................. 950   (antes 1200: una raya suelta
                                                cruzaba por encima del lector)
       aviso de cookies ................ 999
       lector de noticias .............. 1500
       historias de «Lo esencial» ...... 1520
   ======================================================================= */
#hilo-progreso { z-index: 950; }
#lector { z-index: 1500; }
#esencial { z-index: 1520; }

/* =========================================================================
   LA TIRA DE HISTORIAS — el escaparate de «Lo esencial»
   =========================================================================
   Circulos con anillo de color en la cabecera del listado, el patron que
   todo el mundo tiene aprendido: anillo encendido, historia sin ver;
   anillo gris, ya vista. En movil la fila se desliza en horizontal con
   iman por circulo, que es exactamente el gesto que se espera. */
#tira-esencial {
  margin: 6px 0 18px; padding: 14px 16px 10px;
  background: linear-gradient(160deg, rgba(23, 30, 48, .55), rgba(9, 12, 20, .65));
  border: 1px solid rgba(148, 163, 199, .16);
  border-radius: 18px;
}
.tira-rotulo {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--f-titulo); font-weight: 800; font-size: .92rem;
  margin-bottom: 12px; color: var(--texto);
}
.tira-rotulo .rayo { animation: rayo-late 2.4s ease-in-out infinite; }
.tira-rotulo small {
  font-family: var(--f-texto); font-weight: 400;
  font-size: .72rem; color: var(--texto2);
}
.tira-pista {
  display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tira-hist {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 76px; background: none; border: none; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* El anillo, SIN VER: grueso, el degradado a plena saturación y un halo
   que lo despega del fondo. Antes eran 3 px de degradado contra un gris
   tenue y, entre doscientos círculos, no se distinguía de un vistazo cuál
   quedaba por ver. Ahora la diferencia es de bulto: grosor, color y
   brillo a la vez, no solo color. */
.tira-anillo {
  display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 50%;
  background: conic-gradient(from 210deg,
              #2f7dff, #37e6ff, #7dd3fc, #a78bfa, #2f7dff);
  padding: 4px;
  box-shadow: 0 0 0 1px rgba(61, 139, 255, .40),
              0 0 14px rgba(61, 139, 255, .45);
  transition: transform .18s cubic-bezier(.2, 1.4, .4, 1),
              background .3s, box-shadow .3s, padding .3s;
}
.tira-hist:hover .tira-anillo,
.tira-hist:focus-visible .tira-anillo { transform: scale(1.08); }
.tira-hist:active .tira-anillo { transform: scale(.94); }

/* VISTA: anillo fino y apagado, sin halo, y la foto pierde fuerza. Que se
   note que ya está hecha sin llegar a esconderla: se puede volver. */
.tira-hist.vista .tira-anillo {
  background: rgba(148, 163, 199, .22);
  padding: 2px;
  box-shadow: none;
}
.tira-hist.vista .tira-foto { opacity: .5; filter: saturate(.45); }
.tira-hist.vista .tira-nombre { opacity: .65; }
.tira-foto {
  width: 100%; height: 100%; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2px solid #0b0e14;                   /* el hueco entre foto y anillo */
  position: relative;
}
.tira-bandera {
  position: absolute; right: -3px; bottom: -3px;
  font-size: 1.05rem; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
.tira-nombre {
  max-width: 76px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: .66rem; color: var(--texto2);
}
.tira-hist:not(.vista) .tira-nombre { color: var(--texto); font-weight: 600; }

/* el globito del boton flotante: cuantas historias quedan por ver */
#abrir-esencial { position: fixed; }           /* (ya lo era; por claridad) */
#abrir-esencial .ese-globito {
  position: absolute; top: -7px; right: -7px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px; background: #ff4d6d; color: #fff;
  font-size: .68rem; font-weight: 800;
  box-shadow: 0 2px 10px rgba(255, 77, 109, .55);
}
#abrir-esencial .ese-globito[hidden] { display: none; }

@media (max-width: 720px) {
  #tira-esencial { margin: 2px 0 14px; padding: 12px 12px 6px; border-radius: 14px; }
  .tira-hist { width: 68px; }
  .tira-anillo { width: 60px; height: 60px; }
  /* en movil la barra de scroll sobra: el gesto ya se conoce */
  .tira-pista { scrollbar-width: none; }
  .tira-pista::-webkit-scrollbar { display: none; }
  /* colocada encima del globo: lo primero que se ve al abrir. Sin caja,
     a sangre, como una fila de historias de app y no como un panel mas */
  #tira-esencial.sobre-globo {
    margin: 0; padding: 10px 12px 4px;
    background: none; border: none; border-radius: 0;
  }
  #tira-esencial.sobre-globo .tira-rotulo small { display: none; }

  /* las pastillas de categoría, sacadas del héroe y puestas donde se ven */
  #categorias-wrap.bajo-la-barra {
    margin: 10px 0 4px;
  }
  #categorias-wrap.bajo-la-barra #categorias {
    padding: 2px 0 8px; overflow-x: auto;
    scrollbar-width: none; scroll-snap-type: x proximity;
  }
  #categorias-wrap.bajo-la-barra #categorias::-webkit-scrollbar { display: none; }
  #categorias-wrap.bajo-la-barra .chip-cat { scroll-snap-align: start; }
  /* el rótulo sobra aquí: el botón de al lado ya dice de qué va */
  #categorias-wrap.bajo-la-barra #etiqueta-categorias { display: none; }
}

/* En móvil los dos selectores ocupan la fila entera, uno debajo del otro:
   caben del todo, se leen, y el dedo no tiene que apuntar. */
@media (max-width: 560px) {
  #barra-pais { flex-direction: column; align-items: stretch; }
  #selector-pais, #selector-cat { width: 100%; }
  #sp-boton, #sc-boton { width: 100%; justify-content: space-between; }
  #ver-todos { width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tira-anillo { transition: none; }
}


/* =========================================================================
   SECCIONES PLEGABLES DEL PIE — solo móvil
   =========================================================================
   Los dos índices para buscadores del final. El de países son 201 enlaces:
   medido en un móvil de 895 px de alto ocupaba 6.817 px él solo, el 44 % de
   una página que se iba a 17 pantallas. Cerrados de entrada, con el título
   haciendo de interruptor.

   Se colapsa con «display: none» y no con altura cero a propósito: lo que
   se busca es que el navegador deje de maquetar esos 6.800 px, que es de
   donde sale el largo. Google indexa el contenido de un acordeón cerrado,
   así que los enlaces siguen contando.
   ======================================================================= */
@media (max-width: 720px) {
  .plegable > h2 {
    position: relative; cursor: pointer; user-select: none;
    padding-right: 46px; margin-bottom: 0;
    -webkit-tap-highlight-color: transparent;
  }
  /* el área de toque llega de borde a borde, no solo al texto */
  .plegable > h2::before {
    content: ""; position: absolute; inset: -10px -12px;
  }
  .plegable > h2::after {
    content: "⌄"; position: absolute; right: 14px; top: 50%;
    width: 26px; height: 26px; margin-top: -13px;
    display: grid; place-items: center;
    font-size: 1.1rem; line-height: 1; color: var(--acento);
    border: 1px solid rgba(61, 139, 255, .35); border-radius: 50%;
    background: rgba(61, 139, 255, .1);
    transform: translateY(-2px);
    transition: transform .22s ease;
  }
  .plegable.plegado > h2::after { transform: rotate(-90deg); }
  .plegable > h2:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

  .plegable-cuenta {
    display: inline-block; margin-left: 8px; padding: 1px 8px;
    border-radius: 999px; background: rgba(148, 163, 199, .16);
    color: var(--texto2); font-size: .68rem; font-weight: 700;
    vertical-align: middle;
  }

  /* Con los dos id delante a proposito: el estilo original trae
     «#temas-seo nav { display: flex }», y un id gana a dos clases por
     mucho que esta hoja se cargue despues. Con «.plegable.plegado» solo,
     la seccion se marcaba como plegada pero seguia midiendo 5.303 px. */
  #temas-seo.plegado > h2 + *,
  #indice-seo.plegado > h2 + * { display: none; }
  .plegable > h2 + * { margin-top: 14px; }
}


/* =========================================================================
   ORDEN DE LA CINTA EN MÓVIL — con CSS, no con JavaScript
   =========================================================================
   En móvil las pastillas de categoría van DEBAJO de la cinta de países: las
   dos tiras juntas, país y tema. En escritorio siguen encima, que es el
   orden que trae el HTML.

   Esto lo hacía JavaScript moviendo el elemento en el DOM, y en un iPhone
   abierto desde un acceso directo de Chrome no salían nunca, por mucho que
   funcionara en el navegador de escritorio y por mucho que se le quitaran
   dependencias. Mover cajas con JavaScript para algo que es puramente de
   maquetación obliga a acertar con el momento —que el script haya corrido,
   que hayan llegado los datos, que el evento de tamaño se dispare— y cada
   uno de esos fue un fallo distinto.

   Con «order» no hay momento que acertar: lo aplica el navegador al pintar,
   aunque el JavaScript no se ejecute nunca. El HTML no se toca, así que el
   orden de lectura para buscadores y lectores de pantalla es el de siempre.
   ======================================================================= */
@media (max-width: 720px) {
  #cinta-wrap { display: flex; flex-direction: column; }
  #etiqueta-cinta   { order: 1; }
  #cinta            { order: 2; }
  #categorias-wrap  { order: 3; }
}


/* =========================================================================
   LA CINTA DE PAISES, FUERA DEL MOVIL
   =========================================================================
   Decision del dueno: en un movil la cinta de paises sobra. Para elegir
   pais ya estan el buscador, el selector y el propio globo, que ademas es
   lo primero que se ve. En escritorio se queda como esta.

   Los dos id delante (#cinta-wrap #cinta) no son un adorno: el estilo
   original define #cinta y #etiqueta-cinta con un id, y con un solo id
   aqui la regla no ganaria por cargarse despues. Es el mismo tropiezo que
   dieron los plegables del pie.
   ======================================================================= */
@media (max-width: 720px) {
  #cinta-wrap #etiqueta-cinta,
  #cinta-wrap #cinta { display: none; }

  /* Sin la cinta dentro, la caja no tiene por que seguir pareciendo una
     barra: si las pastillas no llegaran a pintarse quedaria un liston
     vacio con su borde, que es peor que no tener nada. Se queda
     transparente y solo se ve lo que haya dentro. */
  #cinta-wrap {
    background: none; border-top: none; padding: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #categorias-wrap { margin-top: 6px; }
}


/* =========================================================================
   EL HILO DE LECTURA, FUERA DEL MOVIL
   =========================================================================
   La raya azul fija de arriba marca cuanto llevas leido de la pagina. En
   escritorio se apoya en el borde de la cabecera pegajosa y se lee como
   parte de ella. En movil la cabecera no es pegajosa (pasa a position:
   static por debajo de 640 px), asi que la raya se queda flotando suelta
   sobre los titulares, cruzandolos por la mitad. Se quita.

   Solo se oculta, no se desmonta: al girar a horizontal o abrir en una
   tableta vuelve a aparecer sin que haya que rehacer nada.
   ======================================================================= */
@media (max-width: 720px) {
  #hilo-progreso { display: none; }
}


/* =========================================================================
   TOCAR UN PAIS EN EL GLOBO, DESDE EL MOVIL
   =========================================================================
   Tocar un pais en el movil no hacia nada: solo agrandaba el globo. Tres
   causas, las tres aqui o al lado.

   1. La ficha del pais estaba oculta a proposito en movil («#ficha-globo
      { display: none }»), porque flotaba junto al pais y no cabia: el
      globo mide 340 px y la ficha 268. Ahora no flota — va debajo del
      globo, a lo ancho — asi que cabe de sobra y se puede ensenar.

   2. El globo se quedaba agrandado. Es «#globo-wrap:hover», que en una
      pantalla tactil se queda pegado despues de tocar hasta que tocas otra
      cosa. Eso era el «lo amplia y ya» del aviso. Se limita a los punteros
      que de verdad pueden pasar por encima.

   3. El umbral para distinguir un toque de un giro estaba en 7 px, que con
      un dedo se pasa solo con apoyarlo (eso va en el JavaScript).
   ======================================================================= */
@media (max-width: 720px) {
  /* El contenedor es flex EN FILA, asi que la ficha se colocaba al lado
     del globo y salia de 102 px de ancho, aplastada. Esa es la razon de
     fondo por la que estaba oculta. En columna cae debajo, a lo ancho. */
  #globo-wrap { flex-direction: column; }
  #ficha-globo {
    display: block; position: static; align-self: stretch;
    width: auto; margin: 12px 14px 0;
    pointer-events: auto; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #ficha-globo:active { transform: scale(.985); }
  /* el pie deja de ser una nota y pasa a ser la llamada a tocar */
  #ficha-globo .pie-ficha {
    color: var(--acento2); font-weight: 700; text-transform: none;
    letter-spacing: .01em;
  }
}

/* El agrandado al pasar por encima, solo donde hay «encima» de verdad. En
   tactil el :hover se queda puesto tras el toque y dejaba el globo grande
   y su animacion parada. */
@media (hover: none) {
  #globo-wrap:hover #globo {
    transform: none;
    animation-play-state: running;
  }
}

/* ==================================================================
   El selector de tema, centrado como el de país
   ==================================================================
   Los dos botones se estiran al ancho de la pantalla en móvil, pero
   solo el de país tenía la regla que centra su contenido: el de tema
   se quedaba pegado a la izquierda, desalineado con sus vecinos.

   La flecha ▾ sale del flujo y se ancla a la derecha; así el texto se
   centra respecto al botón ENTERO y no respecto al hueco que la
   flecha deja libre, que es lo que lo dejaba un pelín escorado. */
@media (max-width: 560px) {
  #sp-boton, #sc-boton { position: relative; justify-content: center; }
  #pais-info, #cat-info { flex: 1; justify-content: center; text-align: center; }
  #sp-boton .sp-flecha, #sc-boton .sp-flecha {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  }
}

/* ==================================================================
   La diapositiva destacada, siempre del mismo tamaño
   ==================================================================
   En móvil la caja crecía y encogía con la longitud de cada titular:
   al pasar de noticia el contenido de debajo daba un salto. Ahora la
   caja mide siempre lo mismo y es el titular el que se adapta.

   Con alto fijo la diapositiva vuelve a flotar (position:absolute),
   como en escritorio: así la entrante y la saliente se cruzan sin
   empujarse. El titular se recorta a cuatro líneas y, cuando no cabe
   entero, aparece «Leer más…» — al tocarlo se abre el lector con el
   resumen, porque el clic lo recoge el data-nid de la diapositiva. */
@media (max-width: 640px) {
  /* 384 px = 14 de margen + 104 de foto + 10 de hueco + seis lineas de
     titular (29,7 cada una) + 25 de la firma + 38 de margen bajo, que es
     donde se posa la pastilla del contador, y un pellizco de holgura.
     Seis lineas porque, medidos cuarenta titulares seguidos, treinta y
     nueve caben en seis. */
  #escenario { height: 384px; min-height: 0; }
  .slide {
    position: absolute; inset: 0;
    padding: 14px 14px 38px; gap: 10px;
    justify-content: flex-start; overflow: hidden;
  }
  .slide .texto-slide { width: 100%; }
  .slide .texto-slide a { -webkit-line-clamp: 6; }
  /* con coletilla, una linea menos de titular: lo que ocupa ella. Asi la
     caja mide igual lleve «Leer más…» o no. */
  .slide.con-mas .texto-slide a { -webkit-line-clamp: 5; }

  /* La firma (tema · medio · opinar) en una sola linea. Envolvia segun lo
     largo que fuera el nombre del medio y se comia hasta tres lineas de
     la caja: era la razon de fondo de que la caja bailara de tamaño. Si
     el nombre no cabe, se corta con puntos suspensivos. */
  .slide .meta-noticia {
    flex-wrap: nowrap; justify-content: center; align-items: center;
    gap: 8px; width: 100%; min-width: 0;
  }
  .slide .meta-noticia .etiqueta-cat,
  .slide .meta-noticia .origen-pais,
  .slide .meta-noticia .btn-opinar { flex: 0 0 auto; }
  .slide .meta-noticia .fuente {
    min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
}

/* La coletilla solo asoma cuando el titular se ha quedado a medias; la
   marca marcarSlideLargo() midiendo la diapositiva ya pintada. */
.mas-slide { display: none; }
.slide.con-mas .mas-slide {
  display: inline-block; margin-top: 6px;
  font-size: .82rem; font-weight: 700; color: var(--acento);
  letter-spacing: .01em; cursor: pointer;
}
.slide.con-mas .mas-slide:hover { text-decoration: underline; }

/* ==================================================================
   Sin doble toque para ampliar
   ==================================================================
   En el movil y en la app instalada era facil dispararlo por accidente
   al pasar noticias o al tocar dos veces seguidas, y la pagina se
   quedaba ampliada. «manipulation» quita SOLO ese gesto: el
   desplazamiento normal y el pellizco para ampliar a mano siguen
   funcionando, que es lo que hay que conservar para quien necesita
   agrandar el texto.

   Va por CSS y no con user-scalable=no en el viewport porque eso
   ademas impide el pellizco (y en el iPhone, Safari lo ignora).

   Los touch-action que ya habia dentro (el globo con «none», el lector
   con «pan-y») siguen mandando donde estan: el navegador se queda
   siempre con el mas restrictivo de la rama, no con el de arriba. */
html { touch-action: manipulation; }

/* ==================================================================
   Los dos desplegables, iguales
   ==================================================================
   Nacieron por separado y habian ido cada uno por su lado: el de pais
   con letra de 0,78 rem y filas de 4 px de alto, el de tema con 0,95 rem
   y 10 px; uno cortaba la lista a 250 px y el otro a 60 vh. Abiertos a la
   vez cantaba, y ademas las filas del de pais eran incomodas de acertar
   con el dedo.

   Se define aqui lo comun a los dos, de una vez, para que no vuelvan a
   separarse: mismo ancho, mismo tope de alto y misma fila. Se toman las
   medidas del de tema, que son las comodas de tocar. */
#sp-panel, #sc-panel {
  width: min(280px, 84vw);
  max-height: 60vh;
  padding: 6px;
  border-radius: var(--radio);
}
/* El de pais lleva buscador fijo arriba y la lista se desplaza debajo;
   asi los dos acaban midiendo lo mismo por fuera. */
#sp-panel { display: flex; flex-direction: column; overflow: hidden; }
#sp-panel[hidden] { display: none; }
#sp-lista { max-height: none; flex: 1 1 auto; overflow-y: auto; margin-top: 6px; }
#sc-panel { overflow-y: auto; }

.sp-opcion, .sc-opcion {
  gap: 9px; padding: 10px 12px; border-radius: 10px;
  font-size: .95rem; line-height: 1.3;
}
.sp-opcion .sp-num, .sc-opcion .cuenta { font-size: .8rem; }
.sp-opcion .sp-bandera { font-size: 1rem; }
.sp-fav { font-size: 1rem; }
#sp-buscar { padding: 9px 12px; border-radius: 10px; font-size: .9rem; }

/* La carta de historias entra por un lado al saltar de país con el dedo.
   Sin ese aviso el cambio parece un fallo: se renueva todo de golpe. */
@keyframes ese-viene-der {
  from { transform: translateX(26%); opacity: .25; }
  to   { transform: none; opacity: 1; }
}
@keyframes ese-viene-izq {
  from { transform: translateX(-26%); opacity: .25; }
  to   { transform: none; opacity: 1; }
}
.ese-carta.entra-der { animation: ese-viene-der .28s cubic-bezier(.2,.8,.3,1) both; }
.ese-carta.entra-izq { animation: ese-viene-izq .28s cubic-bezier(.2,.8,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  .ese-carta.entra-der, .ese-carta.entra-izq { animation: none; }
}

/* ==================================================================
   Tirar hacia abajo para actualizar
   ==================================================================
   El aro asoma desde detras de la cabecera y baja con el dedo. Cuando
   ya se ha tirado bastante se enciende con el azul de la marca: eso
   dice «suelta y se recarga» sin escribirlo. */
#tirar-recargar {
  position: fixed; top: 6px; left: 50%; z-index: 1400;
  transform: translate(-50%, 0);
  opacity: 0; pointer-events: none;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 16, 26, .92);
  border: 1px solid rgba(148, 163, 199, .22);
  box-shadow: 0 8px 24px rgba(2, 4, 10, .5);
}
#tirar-recargar.tirando { opacity: 1; }
#tirar-recargar .tr-aro {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(148, 163, 199, .45);
  border-top-color: transparent;
  transition: border-color .18s ease, transform .18s ease;
}
#tirar-recargar.lista .tr-aro {
  border-color: var(--acento); border-top-color: transparent;
  transform: rotate(140deg);
}
#tirar-recargar.lista {
  border-color: rgba(61, 139, 255, .55);
  box-shadow: 0 8px 24px rgba(2, 4, 10, .5), 0 0 0 3px rgba(61, 139, 255, .16);
}
#tirar-recargar.cargando .tr-aro {
  border-color: var(--acento); border-top-color: transparent;
  animation: tr-gira .7s linear infinite;
}
@keyframes tr-gira { to { transform: rotate(360deg); } }

/* El rebote propio del navegador se apaga: la senal la da el aro de
   arriba, y con las dos cosas a la vez el gesto se sentia doble. */
html { overscroll-behavior-y: contain; }

@media (prefers-reduced-motion: reduce) {
  #tirar-recargar.cargando .tr-aro { animation: none; }
}

/* Salir de las historias con el dedo: la carta se va por donde la
   empujas. Con la ✕ o con Escape sigue desapareciendo sin más. */
@keyframes ese-va-abajo {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(38%) scale(.94); opacity: 0; }
}
@keyframes ese-va-arriba {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(-38%) scale(.94); opacity: 0; }
}
.ese-carta.sale-abajo  { animation: ese-va-abajo .26s cubic-bezier(.4,0,.7,.3) both; }
.ese-carta.sale-arriba { animation: ese-va-arriba .26s cubic-bezier(.4,0,.7,.3) both; }
/* el fondo se apaga a la vez, para que no quede un telón negro suelto */
#esencial.cerrandose { transition: opacity .26s ease; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ese-carta.sale-abajo, .ese-carta.sale-arriba { animation: none; }
  #esencial.cerrandose { transition: none; }
}

/* ==================================================================
   Confirmar la recarga
   ==================================================================
   El tiron hacia abajo ya no recarga solo: pregunta. Un gesto se puede
   hacer sin querer; un gesto y un toque en un boton, no. El cartel se
   va solo a los seis segundos, asi que un disparo accidental no deja
   nada por medio. */
#confirmar-recarga {
  position: fixed; top: 10px; left: 50%; z-index: 1450;
  transform: translate(-50%, -14px); opacity: 0;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .22s ease;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: rgba(12, 16, 26, .95);
  border: 1px solid rgba(148, 163, 199, .24);
  box-shadow: 0 14px 34px rgba(2, 4, 10, .6);
  max-width: calc(100vw - 24px);
}
#confirmar-recarga.puesto { transform: translate(-50%, 0); opacity: 1; }
#confirmar-recarga[hidden] { display: none; }
#confirmar-recarga .cr-txt {
  font-size: .82rem; color: var(--texto); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
#confirmar-recarga button {
  border: none; cursor: pointer; font-family: inherit; border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
#confirmar-recarga .cr-si {
  background: var(--acento); color: #fff; font-weight: 700;
  font-size: .8rem; padding: 8px 14px; white-space: nowrap;
}
#confirmar-recarga .cr-no {
  background: rgba(148, 163, 199, .16); color: var(--texto2);
  width: 30px; height: 30px; font-size: .9rem; flex: 0 0 auto;
}
#confirmar-recarga button:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
  #confirmar-recarga { transition: none; }
}

/* ==================================================================
   Redes sociales en el pie
   ==================================================================
   Los logos van en SVG y toman el color del texto: apagados de serie y
   encendidos con el azul de la marca al señalarlos, para que se vean
   sin robarle protagonismo a los enlaces del pie. */
.pie-redes {
  display: flex; justify-content: center; gap: 14px;
  margin: 10px 0 4px;
}
.pie-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--texto2); text-decoration: none;
  border: 1px solid rgba(148, 163, 199, .18);
  background: rgba(148, 163, 199, .06);
  transition: color .18s ease, border-color .18s ease,
              background .18s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.pie-redes a:hover, .pie-redes a:focus-visible {
  color: var(--acento); border-color: rgba(61, 139, 255, .5);
  background: rgba(61, 139, 255, .12); transform: translateY(-2px);
}
.pie-redes a:active { transform: scale(.94); }
.pie-redes svg { width: 19px; height: 19px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .pie-redes a { transition: none; }
  .pie-redes a:hover { transform: none; }
}