:root {
  --bg: #0d0d12;
  --bg-alt: #16161f;
  --card: #1c1c28;
  --text: #eaeaf0;
  --text-muted: #9a9aab;
  --accent: #ff3d7f;
  --accent-2: #33e0ff;
  --border: #2a2a38;
  --confirmado: #33d17a;
  --rumor: #ffb02e;
  --maxw: 1160px;
}

* { box-sizing: border-box; }

html {
  /* Reserva siempre el hueco de la barra de desplazamiento. Sin esto las
     paginas cortas (sin barra) y las largas (con barra) tienen distinto ancho
     util, y el menu y el contenido saltan unos pixeles al navegar entre ellas.
     Tambien evita el salto al abrir el buscador o el visor, que bloquean el
     desplazamiento del body. */
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  /* Los bloques a pantalla completa usan 100vw, que incluye el ancho de la
     barra de desplazamiento y provocaria scroll horizontal. Se recorta aqui.
     Se usa "clip" y no "hidden" porque hidden romperia la cabecera pegajosa. */
  overflow-x: clip;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

header.site-header {
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header.scrolled {
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  border-bottom-color: rgba(255,61,127,0.28);
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.header-actions { display: flex; align-items: center; gap: 10px; order: 2; }

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.search-trigger:hover { border-color: var(--accent); color: var(--text); }
.search-trigger svg { width: 15px; height: 15px; flex: none; }
.search-trigger kbd {
  font: inherit;
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav-toggle span {
  display: block;
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.15s ease;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle.activo span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.activo span:nth-child(2) { opacity: 0; }
.nav-toggle.activo span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.logo {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.5px;
  color: var(--text);
}
.logo span { color: var(--accent); }

nav.main-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.95rem;
}

nav.main-nav a {
  color: var(--text-muted);
  font-weight: 600;
}
nav.main-nav a:hover, nav.main-nav a.active {
  color: var(--text);
  text-decoration: none;
}

.nav-dropdown {
  position: relative;
}
.nav-drop-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0;
  line-height: inherit;
}
.nav-drop-btn:hover, .nav-drop-btn.active {
  color: var(--text);
}
.nav-drop-btn .caret { display: inline-block; transition: transform 0.2s ease; font-size: 0.7em; }
.nav-dropdown.abierto .nav-drop-btn .caret { transform: rotate(180deg); }

.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: rgba(24,24,34,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 0;
  min-width: 200px;
  z-index: 20;
  box-shadow: 0 14px 34px rgba(0,0,0,0.6);
}
.nav-dropdown:hover .nav-drop-menu,
.nav-dropdown:focus-within .nav-drop-menu,
.nav-dropdown.abierto .nav-drop-menu {
  display: flex;
  flex-direction: column;
  animation: drop-in 0.18s ease both;
}
@keyframes drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.nav-drop-menu a {
  padding: 8px 18px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav-drop-menu a:hover, .nav-drop-menu a.active {
  color: var(--text);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
}

main { min-height: 60vh; padding: 32px 0 60px; }

/* ===========================================================
   Animacion de entrada de la portada (ver assets_src/intro.js)
   =========================================================== */

/* ===========================================================
   Animacion de entrada
   -----------------------------------------------------------
   Regla unica de esta seccion: SOLO se animan "transform" y
   "opacity". Son las dos unicas propiedades que el navegador
   resuelve en la GPU sin rehacer el layout ni repintar.

   Lo que se evita a proposito, y por que:
     - filter: blur()  -> repinta todo el fotograma; con un texto
       enorme y background-clip encima, se atraganta.
     - letter-spacing  -> recalcula el layout en cada fotograma.
     - width / left    -> lo mismo, layout en cada fotograma.
   Cada uno de esos efectos esta reproducido aqui con transform.
   =========================================================== */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #05040a;
  cursor: pointer;
  opacity: 0;
  /* Aisla la intro del resto de la pagina: el navegador no vuelve a
     medir nada de fuera mientras esto se mueve. */
  contain: strict;
  transition: opacity 0.28s ease;
}
.intro-overlay.intro-dentro { opacity: 1; }
.intro-overlay.intro-fuera {
  animation: intro-salida 0.62s cubic-bezier(.65, 0, .35, 1) forwards;
  pointer-events: none;
}
@keyframes intro-salida {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.12); }
}

/* La escena se sacude en el impacto. Va en su propia capa para no pisar
   la animacion de entrada/salida del overlay, que antes se anulaban entre
   ellas y dejaban el arranque a medias. */
.intro-escena {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.intro-escena.impacto { animation: intro-sacudida 0.32s cubic-bezier(.36, .07, .19, .97); }
@keyframes intro-sacudida {
  0%   { transform: translate3d(0, 0, 0); }
  15%  { transform: translate3d(-8px, 4px, 0); }
  30%  { transform: translate3d(7px, -5px, 0); }
  45%  { transform: translate3d(-5px, -2px, 0); }
  60%  { transform: translate3d(4px, 3px, 0); }
  80%  { transform: translate3d(-2px, 1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --- Capa 1: captura del juego, acercandose --- */
/* El desenfoque de entrada ya no se anima: la imagen entra mas grande y
   se asienta. El efecto de "enfoque" lo da la escala, que es gratis. */
.intro-fondo {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center 45%;
  opacity: 0;
  transform: scale(1.18) translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: intro-entra-fondo 3s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes intro-entra-fondo {
  0%   { opacity: 0;    transform: scale(1.18) translate3d(0, 0, 0); }
  40%  { opacity: 0.85; transform: scale(1.07) translate3d(0, 0, 0); }
  100% { opacity: 0.85; transform: scale(1)    translate3d(0, 0, 0); }
}
/* El oscurecido progresivo se hace con una capa negra encima en vez de
   con brightness(), que obligaria a repintar la foto entera. */
.intro-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #05040a;
  opacity: 0.7;
  animation: intro-oscurece 3s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes intro-oscurece {
  0%   { opacity: 0.7; }
  40%  { opacity: 0.3; }
  100% { opacity: 0.38; }
}

/* --- Capa 2: velo para que el texto se lea --- */
.intro-velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(5,4,10,0.18) 0%, rgba(5,4,10,0.86) 72%),
    linear-gradient(180deg, rgba(20,8,34,0.62), rgba(5,4,10,0.9));
}

/* --- Capa 3: rejilla retro en perspectiva --- */
/* La perspectiva va en el contenedor y el desplazamiento en el hijo, asi el
   bucle es un translate y no un background-position (que repinta). */
.intro-rejilla {
  position: absolute;
  inset: -20%;
  overflow: hidden;
  opacity: 0;
  transform: perspective(420px) rotateX(64deg) translateY(26%);
  animation: intro-aparece 1.2s ease 0.5s forwards;
}
.intro-rejilla i {
  position: absolute;
  left: 0;
  right: 0;
  top: -62px;
  bottom: -62px;
  background-image:
    linear-gradient(rgba(51,224,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,224,255,0.10) 1px, transparent 1px);
  background-size: 62px 62px;
  will-change: transform;
  animation: intro-rejilla-corre 2.6s linear infinite;
}
@keyframes intro-rejilla-corre {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 62px, 0); }
}
@keyframes intro-aparece {
  to { opacity: 1; }
}

.intro-inner {
  position: relative;
  width: 100%;
  text-align: center;
  z-index: 3;
  padding: 0 20px;
}

/* --- "Grand Theft Auto": las letras se juntan --- */
/* Antes se animaba letter-spacing, que recalcula el ancho del texto en cada
   fotograma. Ahora cada letra es un span que se desliza a su sitio: mismo
   efecto, resuelto entero en la GPU. */
.intro-marca {
  font-size: clamp(0.85rem, 2.6vw, 1.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}
.intro-marca span {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
  animation: intro-letra 0.72s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes intro-letra {
  from { opacity: 0; transform: translate3d(0, -14px, 0) scale(1.4); }
  to   { opacity: 0.92; transform: translate3d(0, 0, 0) scale(1); }
}

/* --- "VI": cae y aterriza --- */
/* La sensacion de enfoque la da la escala, no un blur animado. */
.intro-vi {
  position: relative;
  display: inline-block;
  font-size: clamp(6rem, 26vw, 17rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.045em;
  margin-top: 6px;
  background: linear-gradient(168deg, #fff6cf 4%, #ffd36a 24%, var(--accent) 58%, #a63bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 46px rgba(255, 61, 127, 0.7));
  animation: intro-vi-cae 0.78s cubic-bezier(.2, 1.3, .35, 1) 0.62s both;
}
@keyframes intro-vi-cae {
  0%   { opacity: 0; transform: scale(2.6) translate3d(0, 0, 0); }
  45%  { opacity: 1; }
  72%  { transform: scale(0.95) translate3d(0, 0, 0); }
  100% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); }
}

/* Aberracion cromatica en el impacto: dos copias desplazadas.
   Se separan del gradiente del padre para poder llevar color plano. */
.intro-vi b {
  position: absolute;
  inset: 0;
  -webkit-text-fill-color: initial;
  background: none;
  font-weight: inherit;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.intro-vi .glitch-a {
  color: #33e0ff;
  animation: intro-glitch-a 0.46s ease-out 0.92s;
}
.intro-vi .glitch-b {
  color: #ff3d7f;
  animation: intro-glitch-b 0.46s ease-out 0.92s;
}
@keyframes intro-glitch-a {
  0%, 100% { opacity: 0;    transform: translate3d(0, 0, 0); }
  22%      { opacity: 0.5;  transform: translate3d(-11px, 4px, 0); }
  55%      { opacity: 0.26; transform: translate3d(6px, -3px, 0); }
  78%      { opacity: 0.12; transform: translate3d(-3px, 2px, 0); }
}
@keyframes intro-glitch-b {
  0%, 100% { opacity: 0;    transform: translate3d(0, 0, 0); }
  22%      { opacity: 0.5;  transform: translate3d(11px, -4px, 0); }
  55%      { opacity: 0.26; transform: translate3d(-6px, 3px, 0); }
  78%      { opacity: 0.12; transform: translate3d(3px, -2px, 0); }
}

/* Parpadeo de neon: va en una capa aparte para no cortar la animacion
   de caida del "VI" (dos animaciones no pueden tocar la misma propiedad). */
.intro-vi-neon {
  position: absolute;
  inset: 0;
  background: #05040a;
  opacity: 0;
  pointer-events: none;
  animation: intro-neon 1.5s ease-in-out 1.55s;
}
@keyframes intro-neon {
  0%, 40%, 52%, 62%, 100% { opacity: 0; }
  46% { opacity: 0.62; }
  58% { opacity: 0.45; }
}

/* --- Linea y subtitulo --- */
/* scaleX en vez de animar el ancho. */
.intro-line {
  height: 2px;
  margin: 22px auto 0;
  width: 100%;
  max-width: 360px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  transform: scaleX(0);
  will-change: transform, opacity;
  animation: intro-linea 0.85s cubic-bezier(.16, 1, .3, 1) 1.15s both;
}
@keyframes intro-linea {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

.intro-sub {
  margin-top: 16px;
  font-size: clamp(0.7rem, 2.2vw, 0.95rem);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--accent-2);
  opacity: 0;
  will-change: transform, opacity;
  animation: intro-sube 0.68s cubic-bezier(.16, 1, .3, 1) 1.4s both;
}
@keyframes intro-sube {
  from { opacity: 0;   transform: translate3d(0, 14px, 0); }
  to   { opacity: 0.9; transform: translate3d(0, 0, 0); }
}

/* --- Destello blanco en el impacto --- */
.intro-destello {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  animation: intro-flash 0.4s ease-out 0.9s;
}
@keyframes intro-flash {
  0%  { opacity: 0; }
  12% { opacity: 0.46; }
  100% { opacity: 0; }
}

/* --- Barrido de luz: translate, no "left" --- */
.intro-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
  will-change: transform;
  animation: intro-barrido 1.25s ease-in-out 1.35s both;
  z-index: 5;
  pointer-events: none;
}
@keyframes intro-barrido {
  from { transform: translate3d(-120%, 0, 0) skewX(-14deg); }
  to   { transform: translate3d(330%, 0, 0) skewX(-14deg); }
}

/* --- Barra de progreso: scaleX, no width --- */
.intro-barra {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.10);
  z-index: 6;
}
.intro-barra i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  will-change: transform;
  animation: intro-progreso 3s linear both;
}
@keyframes intro-progreso {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.intro-skip {
  position: absolute;
  bottom: 26px;
  right: 26px;
  z-index: 7;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #d8d8e6;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  animation: intro-sube 0.5s ease 1.2s both;
}
.intro-skip:hover { color: #fff; border-color: var(--accent); background: rgba(255, 61, 127, 0.2); }

body.intro-activa { overflow: hidden; }

/* Entrada escalonada del contenido de la portada al terminar la intro.
   Sin JS estos elementos no llevan clase y se ven con normalidad.
   Se usa fill-mode "backwards" y no "both" a proposito: al acabar, cada
   elemento vuelve a su estilo normal (visible). Asi es imposible que el
   contenido se quede invisible si la animacion no llega a ejecutarse, por
   ejemplo al abrir la portada en una pestaña en segundo plano. */
body.intro-lista .hero h1,
body.intro-lista .hero > p,
body.intro-lista .hero .countdown,
body.intro-lista .hero p:last-of-type,
body.intro-lista .hero-grande h1,
body.intro-lista .hero-grande .hero-lema,
body.intro-lista .hero-grande .countdown,
body.intro-lista .hero-grande .hero-cta {
  animation: intro-contenido 0.6s cubic-bezier(.16, 1, .3, 1) backwards;
}
body.intro-lista .hero h1,
body.intro-lista .hero-grande h1 { animation-delay: 0.05s; }
body.intro-lista .hero > p,
body.intro-lista .hero-grande .hero-lema { animation-delay: 0.13s; }
body.intro-lista .hero .countdown,
body.intro-lista .hero-grande .countdown { animation-delay: 0.21s; }
body.intro-lista .hero p:last-of-type,
body.intro-lista .hero-grande .hero-cta { animation-delay: 0.29s; }
@keyframes intro-contenido {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay, .intro-overlay * { animation: none !important; transition: none !important; }
  body.intro-lista .hero h1,
  body.intro-lista .hero > p,
  body.intro-lista .hero .countdown,
  body.intro-lista .hero p:last-of-type,
  body.intro-lista .hero-grande h1,
  body.intro-lista .hero-grande .hero-lema,
  body.intro-lista .hero-grande .countdown,
  body.intro-lista .hero-grande .hero-cta { animation: none !important; }
}

@media (max-width: 620px) {
  .intro-skip { bottom: 18px; right: 18px; padding: 8px 15px; }
  .intro-line { max-width: 240px; }
  /* En movil la rejilla en perspectiva es lo que mas cuesta y casi no se
     aprecia: se deja quieta. */
  .intro-rejilla i { animation: none; }
}

.hero {
  padding: 90px 20px 40px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(13,13,18,0.35) 0%, rgba(13,13,18,0.55) 55%, var(--bg) 100%),
    url("/assets/img/hero-bg.svg");
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.hero h1 {
  font-size: 2.4rem;
  margin: 0 0 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}
.hero p { color: var(--text-muted); max-width: 680px; margin: 0 auto; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.hero .section-title, .hero .video-grid { position: relative; z-index: 1; }

.countdown {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 28px auto 6px;
  flex-wrap: wrap;
}
.countdown-unit { text-align: center; min-width: 64px; }
.countdown-unit .value {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown-unit .unit-label {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.countdown-done .value { color: var(--confirmado); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.video-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-restricted { display: block; overflow: hidden; }
.video-restricted img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-restricted .video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(13,13,18,0.75);
  border: 2px solid var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  padding-left: 4px;
}
.video-restricted:hover .video-play { background: var(--accent); }
.video-restricted .video-restricted-note {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(13,13,18,0.85);
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 6px 10px;
  text-align: center;
}

.video-card .video-body { padding: 12px 16px 16px; }
.video-card h3 { margin: 6px 0 4px; font-size: 1.05rem; }
.video-card .video-date { color: var(--text-muted); font-size: 0.8rem; }
.video-card p.excerpt { margin: 6px 0 8px; }
.video-card .yt-link { font-size: 0.82rem; }

.thumb-icon {
  position: relative;
  z-index: 1;
  width: 40%;
  max-width: 72px;
  color: #fff;
  opacity: 0.75;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.detail-thumb .thumb-icon { width: 34%; max-width: 96px; }
.card:hover .thumb-icon { opacity: 1; transform: scale(1.06); }

.gen-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.thumb-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.badge.confirmado { color: var(--confirmado); border-color: var(--confirmado); }
.badge.rumor { color: var(--rumor); border-color: var(--rumor); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card a.card-link { color: var(--text); display: block; }
.card .card-body { padding: 14px 16px; }
.card .card-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #22223a, #16161f);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.card h3 { margin: 8px 0 4px; font-size: 1.05rem; }
.card p.excerpt { color: var(--text-muted); font-size: 0.88rem; margin: 4px 0 0; }

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.section-title h2 { margin: 0; }
.section-title a { font-size: 0.85rem; }

.detail-header { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 24px; }
.detail-thumb {
  position: relative;
  overflow: hidden;
  flex: 0 0 280px;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #22223a, #16161f);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.85rem;
  border: 1px solid var(--border);
}
.detail-meta { flex: 1; min-width: 260px; }
.detail-meta h1 { margin: 4px 0 8px; }
.detail-meta .resumen { color: var(--text-muted); }
.meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; font-size: 0.85rem; color: var(--text-muted); }
.meta-row strong { color: var(--text); }

.breadcrumbs { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 18px; }
.breadcrumbs a { color: var(--text-muted); }

.disclaimer-box {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 24px 0;
}

footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}
footer.site-footer a { color: var(--text-muted); }
footer.site-footer .foot-links { margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; }

.map-placeholder {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-alt);
}

.map-wrapper {
  position: relative;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,61,127,0.5), rgba(51,224,255,0.35) 55%, rgba(42,42,56,0.6));
}

.map-viewport {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 40%, #14141f 0%, #08080c 100%);
  cursor: grab;
  touch-action: none;          /* el pellizco lo gestiona el JS, no el navegador */
  outline: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.map-viewport.map-ready { opacity: 1; }
.map-viewport.dragging { cursor: grabbing; }
.map-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-2); }

/* viñeteado suave en los bordes para que el mapa se funda con la pagina */
.map-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 13px;
  box-shadow: inset 0 0 90px 20px rgba(6,6,10,0.75);
  z-index: 2;
}

.map-wrapper:fullscreen { padding: 0; border-radius: 0; background: #08080c; }
.map-wrapper:fullscreen .map-viewport { height: 100vh; border-radius: 0; }
.map-wrapper:fullscreen .map-viewport::after { border-radius: 0; }

.map-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  user-select: none;
  width: auto;
  height: auto;
  will-change: transform;
}
.map-canvas img {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Puntos --- */
.map-pin {
  position: absolute;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  border: 2px solid rgba(8,8,12,0.9);
  cursor: pointer;
  z-index: 3;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease;
}
.map-pin.confirmado { background: var(--confirmado); box-shadow: 0 0 10px 1px rgba(51,209,122,0.55); }
.map-pin.rumor { background: var(--rumor); box-shadow: 0 0 10px 1px rgba(255,176,46,0.55); }
.map-pin:hover { transform: scale(1.5); }
.map-pin.selected { transform: scale(1.7); z-index: 4; }

/* halo que late en el punto seleccionado */
.map-pin.selected::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: #fff;
  animation: pin-pulse 1.4s ease-out infinite;
}
@keyframes pin-pulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(2.1); opacity: 0; }
}
.map-pin.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .map-pin, .map-pin.selected::before { transition: none; animation: none; }
}

/* --- Controles --- */
.map-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 5;
}
.map-controls button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(20,20,30,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.map-controls button:hover {
  border-color: var(--accent);
  background: rgba(255,61,127,0.18);
}
.map-controls button:active { transform: scale(0.93); }

.map-zoom-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20,20,30,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.map-hint {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 5;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: rgba(20,20,30,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
}

/* --- Ficha emergente --- */
.map-popup {
  position: absolute;
  bottom: 14px;
  left: 14px;
  width: min(320px, calc(100% - 28px));
  background: rgba(24,24,36,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 14px 16px;
  z-index: 6;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  display: none;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.map-popup.open { display: block; opacity: 1; transform: translateY(0); }
.map-popup h3 { margin: 8px 0 6px; font-size: 1.05rem; }
.map-popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.map-popup-close:hover { color: var(--text); background: rgba(255,255,255,0.08); }

/* --- Leyenda filtrable --- */
.map-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.legend-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.legend-btn:hover { border-color: var(--accent); color: var(--text); }
.legend-btn.off { opacity: 0.4; text-decoration: line-through; }
.legend-btn i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-btn i.confirmado { background: var(--confirmado); }
.legend-btn i.rumor { background: var(--rumor); }
.legend-tip { font-size: 0.76rem; opacity: 0.7; }

@media (max-width: 640px) {
  .map-viewport { height: 68vh; min-height: 380px; }
  .map-hint { display: none; }
  .map-controls button { width: 44px; height: 44px; }
  .map-popup { left: 12px; bottom: 12px; }
}

.tracker-list { margin-top: 18px; }
.tracker-group { margin-bottom: 28px; }
.tracker-group h2 { margin-bottom: 6px; }
.tracker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 6px;
  background: var(--card);
}
.tracker-item label { flex: 1; cursor: pointer; }
.tracker-item input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.tracker-item.done label { color: var(--text-muted); text-decoration: line-through; }

.progress-bar-outer {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  margin: 6px 0 2px;
}
.progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width: 0%;
  transition: width 0.2s ease;
}
.progress-label { font-size: 0.8rem; color: var(--text-muted); }

.reset-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}
.reset-btn:hover { border-color: var(--accent); color: var(--text); }

/* ===========================================================
   Buscador global
   =========================================================== */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6,6,10,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.search-modal.abierto { opacity: 1; }
.search-modal[hidden] { display: none; }
body.modal-abierto { overflow: hidden; }

.search-box {
  width: 100%;
  max-width: 640px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65);
  transform: translateY(-12px) scale(0.98);
  transition: transform 0.2s cubic-bezier(.16,1,.3,1);
}
.search-modal.abierto .search-box { transform: none; }

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.search-field svg { width: 19px; height: 19px; color: var(--text-muted); flex: none; }
.search-field input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}
.search-field input::placeholder { color: var(--text-muted); }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 6px;
}
.search-close:hover { color: var(--text); }

.search-results { max-height: 56vh; overflow-y: auto; }
.search-empty { padding: 26px 20px; color: var(--text-muted); text-align: center; margin: 0; font-size: 0.9rem; }

.search-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "cat badge" "nombre badge" "res res";
  gap: 2px 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover, .search-item.sel { background: rgba(255,61,127,0.10); text-decoration: none; }
.search-item.sel { box-shadow: inset 3px 0 0 var(--accent); }
.search-cat {
  grid-area: cat;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent-2);
  font-weight: 700;
}
.search-nombre { grid-area: nombre; font-weight: 700; font-size: 0.98rem; }
.search-res {
  grid-area: res;
  color: var(--text-muted);
  font-size: 0.83rem;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search-item .badge { grid-area: badge; align-self: center; }

/* ===========================================================
   Filtros de los listados
   =========================================================== */
.filtros {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 20px 0 4px;
}
.filtro-buscar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 220px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.filtro-buscar:focus-within { border-color: var(--accent); }
.filtro-buscar svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.filtro-buscar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  min-width: 0;
}
.filtro-buscar input::-webkit-search-cancel-button { display: none; }

.filtro-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.activa { border-color: var(--accent); color: var(--text); background: rgba(255,61,127,0.14); }
.chip span {
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.filtro-vacio {
  margin: 30px 0;
  text-align: center;
  color: var(--text-muted);
  padding: 30px;
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.count-pill {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 999px;
}

/* ===========================================================
   Navegacion entre fichas
   =========================================================== */
.ficha-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 36px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.ficha-nav a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ficha-nav a:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.ficha-nav a span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.ficha-nav a strong { font-size: 0.95rem; }
.ficha-nav-next { text-align: right; }

/* ===========================================================
   Pie de pagina
   =========================================================== */
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
}
.foot-brand p { margin: 10px 0 0; max-width: 320px; line-height: 1.6; }
.foot-brand .logo { font-size: 1.15rem; }
.foot-col h4 {
  margin: 0 0 12px;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text);
}
.foot-col a { display: block; padding: 4px 0; }
.foot-col a:hover { color: var(--text); }

/* ===========================================================
   Volver arriba
   =========================================================== */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(24,24,36,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 1.15rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.to-top.visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ===========================================================
   Pulido visual general
   =========================================================== */
::selection { background: var(--accent); color: #fff; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

* { scrollbar-width: thin; scrollbar-color: #33334a var(--bg); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2e2e42; border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3d3d58; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { letter-spacing: -0.015em; }

/* barra de acento a la izquierda de cada titulo de seccion */
.section-title {
  margin-top: 44px;
  gap: 14px;
}
.section-title h2 {
  position: relative;
  padding-left: 14px;
  font-size: 1.45rem;
}
.section-title h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

/* tarjetas con mas profundidad */
.card {
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
}
.card:hover {
  box-shadow: 0 14px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,61,127,0.28);
  transform: translateY(-4px);
}
.card .card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13,13,18,0.55));
  z-index: 1;
  pointer-events: none;
}
.card h3 { transition: color 0.15s ease; }
.card:hover h3 { color: var(--accent); }

.detail-meta h1 { font-size: 2.1rem; }

.disclaimer-box { line-height: 1.65; }

/* ===========================================================
   Movil
   =========================================================== */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .search-trigger-text, .search-trigger kbd { display: none; }
  .search-trigger { padding: 0; width: 42px; height: 42px; justify-content: center; }

  /* La barra debe poder envolver: el menu ocupa toda una segunda linea.
     Con nowrap se quedaba en la misma fila y se salia de la pantalla. */
  .site-header .bar { flex-wrap: wrap; }
  nav.main-nav {
    order: 3;
    display: none;
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 14px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
  }
  nav.main-nav.abierto { display: flex; animation: drop-in 0.2s ease both; }
  nav.main-nav > a { padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,0.04); }

  .nav-dropdown { width: 100%; }
  .nav-drop-btn { width: 100%; text-align: left; padding: 12px 4px; display: flex; justify-content: space-between; }
  .nav-drop-menu {
    position: static;
    display: none;
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 4px 0;
    margin-bottom: 8px;
  }
  .nav-dropdown:hover .nav-drop-menu { display: none; }
  .nav-dropdown.abierto .nav-drop-menu { display: flex; }
  .nav-drop-menu a { padding: 10px 16px; }

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .hero { padding: 56px 16px 30px; }
  .hero h1 { font-size: 1.7rem; }
  .detail-meta h1 { font-size: 1.5rem; }
  .section-title h2 { font-size: 1.2rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 13px; }
  .ficha-nav { grid-template-columns: 1fr; }
  .ficha-nav-next { text-align: left; }
  .detail-thumb { flex: 1 1 100%; }
  .search-modal { padding: 6vh 12px 12px; }
  .search-results { max-height: 64vh; }
  .foot-grid { grid-template-columns: 1fr; }
  .to-top { right: 14px; bottom: 14px; }
  .countdown { gap: 14px; }
  .countdown-unit .value { font-size: 1.9rem; }
}
/* ===========================================================
   Pagina de lanzamiento
   =========================================================== */
.lanz-hero {
  position: relative;
  margin: 8px 0 30px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(13,13,18,0.30) 0%, rgba(13,13,18,0.62) 62%, var(--bg) 100%),
    url("/assets/img/lanzamiento-bg.svg");
  background-size: cover;
  background-position: center 38%;
}
.lanz-hero-inner {
  position: relative;
  z-index: 1;
  padding: 60px 26px 46px;
  text-align: center;
}
.lanz-hero h1 {
  font-size: clamp(1.9rem, 5.2vw, 3.2rem);
  line-height: 1.12;
  margin: 16px 0 12px;
  text-shadow: 0 3px 18px rgba(0,0,0,0.75);
}
.lanz-fecha {
  background: linear-gradient(92deg, #ffd36a, var(--accent) 55%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.lanz-hero > .lanz-hero-inner > p {
  color: #d6d6e4;
  max-width: 560px;
  margin: 0 auto;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.lanz-hero .countdown { margin-top: 30px; }
.lanz-hero .countdown-unit .value {
  color: #fff;
  text-shadow: 0 0 26px rgba(255,61,127,0.75);
}

.lanz-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
.btn-primario, .btn-secundario {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primario {
  background: linear-gradient(92deg, var(--accent), #ff6a5c);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255,61,127,0.35);
}
.btn-primario:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 12px 30px rgba(255,61,127,0.5); }
.btn-secundario {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-secundario:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); text-decoration: none; }

/* --- Tira de datos rapidos --- */
.datos-rapidos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}
.dato {
  background: var(--card);
  padding: 18px 16px;
  text-align: center;
}
.dato-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.dato strong { font-size: 1rem; }

/* --- Plataformas --- */
.plat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.plat-card {
  display: flex;
  gap: 16px;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(150deg, var(--card), var(--bg-alt));
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.plat-card:hover { transform: translateY(-3px); }
.plat-card.confirmado { border-left: 3px solid var(--confirmado); }
.plat-card.rumor { border-left: 3px solid var(--rumor); }
.plat-card.confirmado:hover { border-color: var(--confirmado); border-left-color: var(--confirmado); }
.plat-card.rumor:hover { border-color: var(--rumor); border-left-color: var(--rumor); }
.plat-icon {
  flex: none;
  width: 52px;
  color: var(--text-muted);
  opacity: 0.85;
}
.plat-card:hover .plat-icon { color: var(--accent); }
.plat-icon svg { width: 100%; height: auto; }
.plat-body h3 { margin: 8px 0 2px; font-size: 1.1rem; }
.plat-nota { margin: 0 0 8px; font-size: 0.82rem; font-weight: 600; color: var(--text); }

/* --- Ediciones --- */
.ediciones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.edicion-card {
  position: relative;
  padding: 26px 24px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.edicion-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.edicion-card.destacada {
  border-color: var(--accent);
  background: linear-gradient(165deg, rgba(255,61,127,0.11), var(--card) 62%);
  box-shadow: 0 12px 34px rgba(255,61,127,0.16);
}
.edicion-flag {
  position: absolute;
  top: -11px;
  left: 24px;
  background: linear-gradient(92deg, var(--accent), #ff6a5c);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 5px 14px;
  border-radius: 999px;
}
.edicion-card h3 { margin: 4px 0 4px; font-size: 1.2rem; }
.edicion-precio {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 14px 0 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.edicion-precio .moneda { font-size: 1.2rem; vertical-align: super; color: var(--text-muted); margin-right: 3px; }
.edicion-lista { list-style: none; margin: 0; padding: 0; }
.edicion-lista li {
  position: relative;
  padding: 7px 0 7px 28px;
  font-size: 0.89rem;
  border-top: 1px solid var(--border);
}
.edicion-lista li:first-child { border-top: none; }
.edicion-lista li::before {
  position: absolute;
  left: 2px;
  top: 7px;
  font-weight: 800;
}
.edicion-lista li.si::before { content: "\2713"; color: var(--confirmado); }
.edicion-lista li.no { color: var(--text-muted); }
.edicion-lista li.no::before { content: "\2717"; color: #6a6a7d; }

/* --- Cronologia --- */
.cronologia {
  list-style: none;
  margin: 22px 0 0;
  padding: 0 0 0 6px;
  position: relative;
}
.cronologia::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 22px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: 0.35;
}
.crono-item { position: relative; padding: 0 0 26px 42px; }
.crono-punto {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent-2);
}
.crono-item.destino .crono-punto {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(255,61,127,0.20);
}
.crono-fecha {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent-2);
}
.crono-item.destino .crono-fecha { color: var(--accent); }
.crono-cuerpo h3 { margin: 4px 0 4px; font-size: 1.05rem; }
.crono-cuerpo p { margin: 0; }

/* --- Preguntas frecuentes --- */
.faq { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.faq-item:hover { border-color: #3a3a50; }
.faq-item[open] { border-color: var(--accent); }
.faq-item summary {
  padding: 16px 46px 16px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.97rem;
  position: relative;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s ease;
  line-height: 1;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-cuerpo { padding: 0 20px 18px; color: var(--text-muted); }
.faq-cuerpo p { margin: 0; line-height: 1.65; }

@media (max-width: 620px) {
  .lanz-hero-inner { padding: 40px 16px 34px; }
  .lanz-cta { flex-direction: column; }
  .btn-primario, .btn-secundario { width: 100%; text-align: center; }
  .plat-card { flex-direction: column; gap: 12px; }
  .plat-icon { width: 44px; }
  .edicion-precio { font-size: 2.1rem; }
  .datos-rapidos { grid-template-columns: 1fr 1fr; }
}
/* ===========================================================
   Portada: bloques informativos
   =========================================================== */
.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
  position: relative;
  z-index: 1;
}

/* --- Cifras destacadas --- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin: 26px 0 8px;
}
.stat {
  background: linear-gradient(160deg, var(--card), var(--bg-alt));
  padding: 20px 14px;
  text-align: center;
}
.stat strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1.1;
  background: linear-gradient(92deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.stat span {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* --- Tarjetas de informacion --- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.info-card {
  padding: 24px 22px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--card), var(--bg-alt));
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.info-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.info-icon {
  width: 40px;
  height: 40px;
  color: var(--accent-2);
  opacity: 0.9;
  margin-bottom: 12px;
}
.info-icon svg { width: 100%; height: 100%; }
.info-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.info-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; }

/* --- Anticipo del mapa --- */
.mapa-teaser {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  margin-top: 20px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.mapa-teaser:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  text-decoration: none;
  box-shadow: 0 16px 38px rgba(0,0,0,0.45);
}
.mapa-teaser img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  object-position: center;
}
.mapa-teaser-cuerpo {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.mapa-teaser-cuerpo h3 { margin: 0; font-size: 1.35rem; }
.mapa-teaser-cuerpo p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.mapa-teaser-btn {
  margin-top: 8px;
  font-weight: 700;
  color: var(--accent);
  font-size: 0.9rem;
}

/* --- Mosaico de categorias --- */
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 22px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.cat-tile:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  background: linear-gradient(160deg, rgba(255,61,127,0.10), var(--card));
  text-decoration: none;
}
.cat-tile-icon { width: 34px; height: 34px; color: var(--text-muted); }
.cat-tile:hover .cat-tile-icon { color: var(--accent); }
.cat-tile-icon svg { width: 100%; height: 100%; }
.cat-tile-nombre { font-weight: 700; font-size: 0.92rem; }
.cat-tile-num { font-size: 0.74rem; color: var(--text-muted); }

/* --- Llamada al tracker --- */
.tracker-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding: 26px 28px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(115deg, rgba(255,61,127,0.13), rgba(51,224,255,0.09) 70%, var(--card));
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tracker-cta:hover { border-color: var(--accent); transform: translateY(-3px); text-decoration: none; }
.tracker-cta-icon { flex: none; width: 46px; height: 46px; color: var(--accent); }
.tracker-cta-icon svg { width: 100%; height: 100%; }
.tracker-cta h3 { margin: 0 0 4px; font-size: 1.15rem; }
.tracker-cta p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.tracker-cta > div:nth-child(2) { flex: 1; min-width: 220px; }
.tracker-cta-btn {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  font-size: 0.92rem;
}

@media (max-width: 720px) {
  .mapa-teaser { grid-template-columns: 1fr; }
  .mapa-teaser img { min-height: 180px; max-height: 220px; }
  .mapa-teaser-cuerpo { padding: 22px 20px; }
}
@media (max-width: 620px) {
  .hero-cta { flex-direction: column; }
  .hero-cta .btn-primario, .hero-cta .btn-secundario { width: 100%; text-align: center; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .cat-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tracker-cta { padding: 20px; }
  .tracker-cta-btn { width: 100%; }
}

/* ===========================================================
   Paginas de guia (PC, trucos, comparativa)
   =========================================================== */
.aviso-clave {
  margin: 22px 0 30px;
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid rgba(51,224,255,0.30);
  border-left: 4px solid var(--accent-2);
  background: linear-gradient(110deg, rgba(51,224,255,0.10), rgba(28,28,40,0.6));
  line-height: 1.65;
}
.aviso-clave strong { color: var(--accent-2); }

.tabla-scroll {
  overflow-x: auto;
  margin: 22px 0;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.tabla-comp {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  font-size: 0.91rem;
}
.tabla-comp th, .tabla-comp td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.tabla-comp thead th {
  background: var(--bg-alt);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  position: sticky;
  top: 0;
}
.tabla-comp thead th:last-child { color: var(--accent); }
.tabla-comp tbody tr:last-child td { border-bottom: none; }
.tabla-comp tbody tr:nth-child(odd) { background: rgba(255,255,255,0.02); }
.tabla-comp tbody tr:hover { background: rgba(255,61,127,0.07); }
.tabla-comp td:first-child { font-weight: 700; color: var(--text); }
.tabla-comp td:last-child { color: var(--text); }

.enlaces-relacionados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.enlaces-relacionados a {
  display: block;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.enlaces-relacionados a::after { content: " \2192"; color: var(--accent); }
.enlaces-relacionados a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ===========================================================
   Pulido visual: tipografia y entradas al hacer scroll
   =========================================================== */
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.16; }
main h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin-top: 38px; }
main p { max-width: 74ch; }
main ul, main ol { max-width: 74ch; line-height: 1.7; }

.resumen { font-size: 0.86rem; color: var(--text-muted); }

/* Aparicion progresiva de las secciones al bajar por la pagina.
   La clase la pone el JS; sin JS todo se ve normal desde el principio. */
.js-revelar .revelar {
  opacity: 0;
  transform: translateY(22px);
}
.js-revelar .revelar.visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .js-revelar .revelar { opacity: 1; transform: none; }
}

/* ===========================================================
   Fotografias de libre uso (ver /creditos/)
   =========================================================== */

/* Cabecera grande con foto en los listados de categoria */
.cab-foto {
  position: relative;
  margin: 4px 0 26px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.cab-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cab-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(13,13,18,0.30) 0%,
    rgba(13,13,18,0.72) 55%,
    rgba(13,13,18,0.95) 100%
  );
}
.cab-foto-texto { padding: 34px 30px 44px; position: relative; }
.cab-foto-texto h1 {
  margin: 0 0 8px;
  text-shadow: 0 3px 16px rgba(0,0,0,0.8);
}
.cab-foto-texto p {
  margin: 0;
  color: #d3d3e0;
  max-width: 62ch;
  text-shadow: 0 2px 10px rgba(0,0,0,0.75);
  font-size: 0.94rem;
}
.cab-foto-pie {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.55);
  background: rgba(8,8,12,0.55);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cab-foto-pie a { color: rgba(255,255,255,0.8); }

/* Galeria de la portada */
.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 12px;
  margin-top: 20px;
}
.galeria-item {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.galeria-item.grande { grid-column: span 2; grid-row: span 2; }
.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.galeria-item:hover { border-color: var(--accent); transform: translateY(-3px); }
.galeria-item:hover img { transform: scale(1.06); }
.galeria-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  font-size: 0.78rem;
  color: #e7e7f0;
  background: linear-gradient(180deg, transparent, rgba(8,8,12,0.9));
  line-height: 1.4;
}
.galeria-item.grande figcaption { font-size: 0.88rem; padding: 34px 18px 16px; }
.galeria-nota {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
  border-left: 3px solid var(--accent-2);
  padding-left: 14px;
}

/* Pagina de creditos */
.creditos-lista { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.credito {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
}
.credito img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
}
.credito-datos h3 { margin: 2px 0 10px; font-size: 1.02rem; }
.credito-datos p { margin: 3px 0; font-size: 0.86rem; color: var(--text-muted); }
.credito-datos strong { color: var(--text); }

@media (max-width: 760px) {
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 128px; }
  .galeria-item.grande { grid-column: span 2; grid-row: span 2; }
  .credito { grid-template-columns: 1fr; }
  .credito img { height: 170px; }
  .cab-foto { min-height: 210px; }
  .cab-foto-texto { padding: 24px 20px 40px; }
}

/* ===========================================================
   Aviso de cookies
   =========================================================== */
.banner-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 300;
  max-width: 760px;
  margin: 0 auto;
  background: rgba(24,24,36,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.16,1,.3,1);
}
.banner-cookies.visible { opacity: 1; transform: none; }
.banner-cookies[hidden] { display: none; }
.banner-interior {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  flex-wrap: wrap;
}
.banner-interior p {
  flex: 1;
  min-width: 240px;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.banner-acciones { display: flex; gap: 10px; flex-shrink: 0; }
.btn-aceptar, .btn-rechazar {
  padding: 10px 22px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-aceptar {
  background: linear-gradient(92deg, var(--accent), #ff6a5c);
  border-color: transparent;
  color: #fff;
}
.btn-rechazar { background: transparent; color: var(--text-muted); }
.btn-rechazar:hover { color: var(--text); border-color: var(--text-muted); }
.btn-aceptar:active, .btn-rechazar:active { transform: scale(0.96); }

@media (max-width: 620px) {
  .banner-interior { padding: 16px; }
  .banner-acciones { width: 100%; }
  .btn-aceptar, .btn-rechazar { flex: 1; text-align: center; }
}

/* ===========================================================
   Barra de progreso de lectura
   =========================================================== */
.progreso-lectura {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 400;
  pointer-events: none;
  background: transparent;
}
.progreso-lectura span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.08s linear;
}

/* ===========================================================
   Pagina 404
   =========================================================== */
.error-404 { text-align: center; padding: 60px 20px 30px; }
.error-codigo {
  display: block;
  font-size: clamp(4rem, 16vw, 8rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(92deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.error-404 h1 { margin: 10px 0 12px; }
.error-404 p { margin: 0 auto; max-width: 46ch; color: var(--text-muted); }
.error-404 .lanz-cta { margin-top: 26px; }

/* ===========================================================
   Pagina de resultados de busqueda
   =========================================================== */
.buscar-resultados { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.buscar-cuenta { margin: 0 0 6px; color: var(--text-muted); font-size: 0.88rem; }
.buscar-vacio {
  padding: 36px 20px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.buscar-item {
  position: relative;
  display: block;
  padding: 16px 110px 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.buscar-item:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.buscar-item h3 { margin: 4px 0 4px; font-size: 1.05rem; }
.buscar-item p { margin: 0; color: var(--text-muted); font-size: 0.87rem; }
.buscar-item .badge { position: absolute; top: 18px; right: 18px; }

@media (max-width: 560px) {
  .buscar-item { padding: 16px 18px 16px; }
  .buscar-item .badge { position: static; display: inline-block; margin-top: 10px; }
}

/* ===========================================================
   Aviso de seccion en construccion
   =========================================================== */
.en-proceso {
  margin: 22px 0 34px;
  padding: 26px 28px;
  border-radius: 16px;
  border: 1px solid rgba(255,176,46,0.32);
  border-left: 4px solid var(--rumor);
  background: linear-gradient(115deg, rgba(255,176,46,0.10), rgba(28,28,40,0.55) 62%);
}
.en-proceso-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--rumor);
  border: 1px solid rgba(255,176,46,0.45);
  border-radius: 999px;
  padding: 6px 14px;
}
.en-proceso h2 {
  margin: 16px 0 12px;
  font-size: 1.3rem;
}
.en-proceso p { margin: 0 0 12px; line-height: 1.68; }
.en-proceso ul { margin: 0 0 14px; padding-left: 22px; }
.en-proceso li { margin-bottom: 7px; line-height: 1.6; }
.en-proceso-nota {
  padding: 13px 16px;
  border-radius: 10px;
  background: rgba(51,209,122,0.10);
  border: 1px solid rgba(51,209,122,0.28);
  font-size: 0.9rem;
}
.en-proceso-nota strong { color: var(--confirmado); }
.en-proceso-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* punto que late, para que se lea como "esto sigue vivo" */
.punto-vivo {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rumor);
  flex: none;
}
.punto-vivo::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--rumor);
  animation: latido 1.8s ease-out infinite;
}
@keyframes latido {
  0%   { transform: scale(0.6); opacity: 0.85; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .punto-vivo::after { animation: none; opacity: 0.4; }
}

/* Etiqueta pequena en la llamada del tracker de la portada */
.etiqueta-proceso {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rumor);
  border: 1px solid rgba(255,176,46,0.4);
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 8px;
}

@media (max-width: 620px) {
  .en-proceso { padding: 20px 18px; }
  .en-proceso-cta { flex-direction: column; }
  .en-proceso-cta .btn-primario, .en-proceso-cta .btn-secundario {
    width: 100%; text-align: center;
  }
}

/* ===========================================================
   Fotogramas de los trailers oficiales (servidos por YouTube)
   =========================================================== */
.frames-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}
/* La primera ocupa cuatro huecos, como portada del mosaico. */
.frame-item.grande { grid-column: span 2; grid-row: span 2; }
.frame-item.grande .frame-pie { padding: 42px 18px 16px; }
.frame-item.grande .frame-pie strong { font-size: 1.05rem; }
.frame-item.grande .frame-play { width: 74px; height: 74px; font-size: 1.5rem; }

.frame-item {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  color: var(--text);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.frame-item:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}
.frame-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, filter 0.25s ease;
}
.frame-item:hover img { transform: scale(1.06); filter: brightness(1.08); }

.frame-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(13,13,18,0.72);
  border: 2px solid rgba(255,255,255,0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  padding-left: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.frame-item:hover .frame-play {
  background: var(--accent);
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.1);
}

.frame-pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(8,8,12,0.94));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.frame-pie strong { font-size: 0.88rem; line-height: 1.3; }
.frame-pie em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Fotograma dentro de una noticia */
.noticia-frame { margin: 26px 0; }
.noticia-frame a {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.noticia-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.noticia-frame a:hover img { transform: scale(1.04); }
.noticia-frame a:hover .frame-play { background: var(--accent); border-color: var(--accent); }
.noticia-frame figcaption {
  margin-top: 9px;
  font-size: 0.79rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .frames-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .frames-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .frame-item.grande { grid-column: span 2; grid-row: span 1; }
  .frame-play { width: 40px; height: 40px; font-size: 0.85rem; }
  .frame-item.grande .frame-play { width: 56px; height: 56px; font-size: 1.15rem; }
  .frame-pie { padding: 22px 10px 9px; }
  .frame-pie strong { font-size: 0.74rem; }
  .frame-pie em { font-size: 0.64rem; }
  .frame-item.grande .frame-pie { padding: 30px 14px 12px; }
  .frame-item.grande .frame-pie strong { font-size: 0.9rem; }
}

/* ===========================================================
   Formulario de contacto
   =========================================================== */
.form-contacto {
  margin: 24px 0 30px;
  padding: 28px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--card), var(--bg-alt));
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Trampa antispam: los robots la rellenan, las personas no la ven. */
.campo-trampa { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.campo { display: flex; flex-direction: column; gap: 7px; position: relative; }
.campo label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}
.obligatorio { color: var(--accent); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.93rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.campo input::placeholder,
.campo textarea::placeholder { color: #6d6d80; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,61,127,0.16);
}
/* Solo se marca en rojo despues de intentar enviar, no mientras se escribe. */
.form-contacto.enviado :invalid { border-color: #ff5a5a; }

.campo select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239a9aab' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.campo select option { background: var(--card); color: var(--text); }

.contador-caracteres {
  align-self: flex-end;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.contador-caracteres.cerca-del-limite { color: var(--rumor); font-weight: 700; }

.campo-consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 17px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}
.campo-consentimiento input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.campo-consentimiento:hover { border-color: #3a3a50; }

.form-acciones {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.form-acciones button { border: none; cursor: pointer; font: inherit; }
.form-nota { font-size: 0.78rem; color: var(--text-muted); }

/* Pagina de confirmacion */
.icono-exito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  font-size: 2.6rem;
  color: var(--confirmado);
  border: 3px solid var(--confirmado);
  background: rgba(51,209,122,0.10);
  margin-bottom: 14px;
}

@media (max-width: 620px) {
  .form-contacto { padding: 20px 18px; }
  .form-fila { grid-template-columns: 1fr; gap: 16px; }
  .form-acciones { flex-direction: column; align-items: stretch; }
  .form-acciones .btn-primario { width: 100%; text-align: center; }
  .form-nota { text-align: center; }
}

/* ===========================================================
   Radio y banda sonora
   =========================================================== */
.canciones-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}
.cancion {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 20px;
  align-items: start;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(150deg, var(--card), var(--bg-alt));
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cancion:hover { border-color: var(--accent); transform: translateY(-2px); }
.cancion-icono {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, rgba(255,61,127,0.22), rgba(51,224,255,0.14));
  border: 1px solid rgba(255,61,127,0.32);
  color: var(--accent);
}
.cancion-icono svg { width: 28px; height: 28px; }
.cancion-datos h3 { margin: 8px 0 2px; font-size: 1.12rem; }
.cancion-artista {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--accent-2);
  font-size: 0.9rem;
}
.cancion-donde {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.cancion-donde strong { color: var(--text); }

.emisora .card-body { padding: 18px 20px; }
.emisora-genero {
  margin: 2px 0 8px;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent-2);
  font-weight: 700;
}
.emisora-dj { margin: 10px 0 0; font-size: 0.83rem; color: var(--text-muted); }

@media (max-width: 560px) {
  .cancion { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .cancion-icono { width: 50px; height: 50px; }
  .cancion-icono svg { width: 22px; height: 22px; }
}

/* ===========================================================
   Mapa: distribucion con panel lateral
   =========================================================== */
.mapa-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
  margin-top: 20px;
}
.mapa-layout .map-wrapper { margin: 0; }

.mapa-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--card), var(--bg-alt));
  max-height: 620px;
}

.panel-buscar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  flex: none;
}
.panel-buscar:focus-within { border-color: var(--accent); }
.panel-buscar svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.panel-buscar input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}
.panel-buscar input::-webkit-search-cancel-button { display: none; }

.panel-lista {
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  padding-right: 4px;
}

.punto-fila {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.punto-fila:hover { border-color: var(--accent); transform: translateX(2px); }
.punto-fila.activa {
  border-color: var(--accent);
  background: rgba(255,61,127,0.12);
  box-shadow: inset 3px 0 0 var(--accent);
}
.punto-fila[hidden] { display: none; }

.punto-fila-icono {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pin-color) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--pin-color) 45%, transparent);
  color: var(--pin-color);
}
.punto-fila-icono svg { width: 19px; height: 19px; }
.punto-fila-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.punto-fila-texto strong {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.punto-fila-texto em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.punto-fila .badge { font-size: 0.6rem; padding: 2px 7px; }

.panel-vacio {
  margin: 0;
  padding: 22px 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ===========================================================
   Marcadores con forma de gota e icono
   =========================================================== */
.map-pin {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -30px 0 0 -15px;      /* la punta queda en la coordenada exacta */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
  transform-origin: 50% 100%;
  box-shadow: none;
  border-radius: 0;
}
.map-pin-cuerpo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--pin-color, var(--accent));
  border: 2px solid rgba(8,8,12,0.85);
  box-shadow: 0 3px 10px rgba(0,0,0,0.55);
}
.map-pin-cuerpo svg {
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  color: #0b0710;
}
.map-pin:hover { transform: scale(1.22) translateY(-3px); }
.map-pin.selected { transform: scale(1.32) translateY(-4px); z-index: 5; }
.map-pin:focus-visible { outline: none; }
.map-pin:focus-visible .map-pin-cuerpo {
  box-shadow: 0 0 0 3px var(--accent-2), 0 3px 10px rgba(0,0,0,0.55);
}

/* halo que late bajo el marcador seleccionado */
.map-pin.selected::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--pin-color, var(--accent));
  animation: pin-onda 1.6s ease-out infinite;
}
@keyframes pin-onda {
  0%   { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-pin { transition: none; }
  .map-pin.selected::after { animation: none; opacity: 0.35; }
}
.map-pin.hidden { display: none; }

/* Ficha emergente ampliada */
.map-popup p {
  margin: 6px 0 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.popup-enlace { font-weight: 700; font-size: 0.88rem; }
.popup-sin-ficha { font-size: 0.83rem; color: var(--text-muted); }

/* Leyenda de tipos */
.leyenda-tipos {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.leyenda-tipo { display: inline-flex; align-items: center; gap: 7px; }
.leyenda-tipo i {
  width: 11px;
  height: 11px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: inline-block;
}

@media (max-width: 980px) {
  .mapa-layout { grid-template-columns: 1fr; }
  .mapa-panel { max-height: none; }
  .panel-lista { max-height: 300px; }
}

/* ===========================================================
   Cabecera de seccion con ilustracion propia
   =========================================================== */
.cab-arte {
  position: relative;
  margin: 4px 0 26px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 250px;
  display: flex;
  align-items: flex-end;
  background-image:
    linear-gradient(
      180deg,
      rgba(13,13,18,0.10) 0%,
      rgba(13,13,18,0.55) 58%,
      rgba(13,13,18,0.93) 100%
    ),
    var(--arte);
  background-size: cover, cover;
  background-position: center 32%, center 32%;
  background-repeat: no-repeat, no-repeat;
}

.cab-arte-texto {
  position: relative;
  padding: 36px 32px 40px;
  width: 100%;
}
.cab-arte-texto h1 {
  margin: 0 0 10px;
  text-shadow: 0 3px 18px rgba(0,0,0,0.85);
}
.cab-arte-texto p {
  margin: 0;
  max-width: 64ch;
  color: #d6d6e4;
  font-size: 0.95rem;
  line-height: 1.6;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

/* Botones o enlaces que se pasan como extra a la cabecera */
.cab-arte-texto .reset-btn {
  margin-top: 16px;
  background: rgba(13,13,18,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,0.22);
}
.cab-arte-texto .reset-btn:hover { border-color: var(--accent); color: #fff; }

.cab-arte-rss {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.24);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.cab-arte-rss:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  text-decoration: none;
}

@media (max-width: 700px) {
  .cab-arte { min-height: 200px; }
  .cab-arte-texto { padding: 26px 20px 28px; }
  .cab-arte-texto p { font-size: 0.88rem; }
}

/* ===========================================================
   Buscador global: rediseno
   =========================================================== */
.search-box {
  max-width: 680px;
  border-radius: 18px;
  border-color: rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  max-height: min(76vh, 660px);
}

.search-field { padding: 18px 20px; gap: 14px; flex: none; }
.search-field svg { width: 20px; height: 20px; color: var(--accent); }
.search-field input { font-size: 1.1rem; }

.search-results {
  max-height: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0;
}

/* --- Estado inicial: sugerencias y recientes --- */
.search-bloque { padding: 12px 20px 6px; }
.search-bloque-titulo {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.search-chip {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.search-chip:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(255,61,127,0.12);
}
.search-bloque.es-reciente .search-chip::before {
  content: "\21BA";
  margin-right: 7px;
  opacity: 0.55;
}

/* --- Contador y resultados --- */
.search-cuenta {
  padding: 10px 20px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.search-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  grid-template-areas: none;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: none;
  margin: 0 8px 2px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
}
.search-item:last-of-type { margin-bottom: 6px; }
.search-item:hover, .search-item.sel {
  background: rgba(255,61,127,0.11);
  border-color: rgba(255,61,127,0.32);
  text-decoration: none;
  box-shadow: none;
}

.search-icono {
  grid-area: auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--accent-2);
  flex: none;
}
.search-item.sel .search-icono,
.search-item:hover .search-icono { border-color: rgba(255,61,127,0.4); color: var(--accent); }
.search-icono svg { width: 21px; height: 21px; }

.search-cuerpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.search-cat {
  grid-area: auto;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  font-weight: 800;
}
.search-nombre {
  grid-area: auto;
  font-weight: 700;
  font-size: 0.97rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-res {
  grid-area: auto;
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-item .badge { grid-area: auto; align-self: center; flex: none; }

/* coincidencias resaltadas */
.search-results mark {
  background: rgba(255,61,127,0.26);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
  font-weight: inherit;
}

.search-ver-todo {
  display: block;
  margin: 6px 8px 8px;
  padding: 12px;
  text-align: center;
  border-radius: 12px;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
}
.search-ver-todo:hover {
  border-color: var(--accent);
  color: var(--text);
  text-decoration: none;
}

/* --- Sin resultados --- */
.search-sin-resultados { padding: 26px 20px 6px; text-align: center; }
.search-sin-resultados p { margin: 0 0 6px; }
.search-pista { font-size: 0.83rem; color: var(--text-muted); }

/* --- Pie con atajos de teclado --- */
.search-pie {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 11px 20px;
  border-top: 1px solid var(--border);
  background: rgba(13,13,18,0.5);
  font-size: 0.72rem;
  color: var(--text-muted);
  flex: none;
}
.search-pie span { display: inline-flex; align-items: center; gap: 5px; }
.search-pie kbd {
  font: inherit;
  font-size: 0.68rem;
  min-width: 19px;
  text-align: center;
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
.search-pie-marca {
  margin-left: auto;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.55;
}

@media (max-width: 620px) {
  .search-box { max-height: 88vh; }
  .search-field { padding: 14px 16px; }
  .search-field input { font-size: 1rem; }
  .search-item { grid-template-columns: 36px 1fr; padding: 11px 14px; margin: 0 6px 2px; }
  .search-icono { width: 36px; height: 36px; }
  .search-icono svg { width: 18px; height: 18px; }
  .search-item .badge { display: none; }
  .search-pie span:nth-child(2) { display: none; }
  .search-pie-marca { display: none; }
  .search-bloque { padding: 10px 14px 4px; }
}

/* ===========================================================
   Cuentas oficiales de Rockstar Games
   =========================================================== */
.redes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.red-card {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(150deg, var(--card), var(--bg-alt));
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.red-card:hover {
  border-color: var(--red-color, var(--accent));
  transform: translateY(-3px);
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0,0,0,0.42);
}

.red-icono {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--red-color) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--red-color) 40%, transparent);
  color: var(--red-color);
  flex: none;
  transition: background 0.15s ease;
}
.red-card:hover .red-icono {
  background: color-mix(in srgb, var(--red-color) 26%, transparent);
}
.red-icono svg { width: 24px; height: 24px; }

.red-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.red-texto strong { font-size: 1rem; }
.red-texto em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--red-color);
  font-weight: 700;
}
.red-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.45;
}

.red-flecha {
  font-size: 1.2rem;
  color: var(--text-muted);
  flex: none;
  transition: transform 0.15s ease, color 0.15s ease;
}
.red-card:hover .red-flecha {
  color: var(--red-color);
  transform: translateX(4px);
}

@media (max-width: 620px) {
  .red-card { grid-template-columns: 42px 1fr; padding: 16px; gap: 13px; }
  .red-icono { width: 42px; height: 42px; }
  .red-icono svg { width: 20px; height: 20px; }
  .red-flecha { display: none; }
}

/* Credito de la imagen en las fichas con foto real */
.credito-imagen {
  margin: 10px 0 0;
  font-size: 0.74rem;
  color: var(--text-muted);
  opacity: 0.85;
}
.credito-imagen a { color: var(--text-muted); text-decoration: underline; }
.credito-imagen a:hover { color: var(--accent-2); }
/* Galeria de imagenes dentro de una ficha */
.ficha-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.ficha-foto {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ficha-foto:hover { border-color: var(--accent); transform: translateY(-3px); }
.ficha-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.ficha-foto:hover img { transform: scale(1.05); }
.ficha-foto-lupa {
  position: absolute;
  right: 9px; bottom: 9px;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,13,18,0.72);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ficha-foto:hover .ficha-foto-lupa { opacity: 1; }

@media (min-width: 760px) {
  .detail-thumb { flex: 0 0 380px; }
}

@media (max-width: 620px) {
  .ficha-galeria { grid-template-columns: 1fr 1fr; gap: 9px; }
}
/* --- Menu reorganizado: secciones y doble columna --- */
.drop-titulo {
  display: block;
  padding: 10px 18px 5px;
  font-size: 0.63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-muted);
  opacity: 0.65;
}
.drop-titulo:first-child { padding-top: 4px; }
.drop-titulo + a { margin-top: 0; }
/* separador entre secciones */
.nav-drop-menu a + .drop-titulo {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* La base de datos tiene nueve entradas: a dos columnas ocupa menos alto */
.nav-drop-menu.ancho-doble {
  display: none;
  min-width: 380px;
  grid-template-columns: 1fr 1fr;
  gap: 0 4px;
  padding: 10px;
}
.nav-dropdown:hover .nav-drop-menu.ancho-doble,
.nav-dropdown:focus-within .nav-drop-menu.ancho-doble,
.nav-dropdown.abierto .nav-drop-menu.ancho-doble {
  display: grid;
}
.nav-drop-menu.ancho-doble a {
  padding: 9px 12px;
  border-radius: 8px;
}
.nav-drop-menu.ancho-doble a:hover,
.nav-drop-menu.ancho-doble a.active {
  background: rgba(255,61,127,0.14);
}

@media (max-width: 900px) {
  /* En movil el desplegable ocupa el ancho completo, a una sola columna */
  .nav-drop-menu.ancho-doble { min-width: 0; }
  .nav-dropdown.abierto .nav-drop-menu.ancho-doble {
    grid-template-columns: 1fr 1fr;
  }
  .drop-titulo { padding-left: 16px; }
}
@media (max-width: 420px) {
  .nav-dropdown.abierto .nav-drop-menu.ancho-doble { grid-template-columns: 1fr; }
}
/* ===========================================================
   Portada: cabecera a pantalla completa
   =========================================================== */
.hero-grande {
  position: relative;
  /* Rompe el ancho del contenedor para ocupar toda la pantalla */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: -32px;              /* anula el padding superior de <main> */
  margin-bottom: 34px;
  min-height: min(82vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* Imagen de fondo con un zoom muy lento, para que no parezca una foto fija */
.hero-fondo {
  position: absolute;
  inset: -3%;
  z-index: -3;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 42%;
  animation: hero-zoom 26s ease-in-out infinite alternate;
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fondo { animation: none; }
}

/* Velo en dos capas: oscurece para leer y tiñe con el color de la marca */
.hero-velo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(13,13,18,0.20) 0%, rgba(13,13,18,0.80) 70%),
    linear-gradient(180deg, rgba(10,6,20,0.72) 0%, rgba(40,10,45,0.42) 45%, rgba(13,13,18,0.92) 100%);
}
.hero-degradado-inferior {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}

.hero-contenido {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 90px 24px 70px;
  max-width: 940px;
}

.hero-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(13,13,18,0.55);
  border: 1px solid rgba(255,61,127,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.hero-etiqueta .punto-vivo { background: var(--accent); }
.hero-etiqueta .punto-vivo::after { border-color: var(--accent); }

/* Titular grande, con el "VI" como pieza central */
.hero-grande h1 {
  margin: 22px 0 14px;
  line-height: 0.92;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hero-linea-1 {
  font-size: clamp(1.5rem, 5.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 4px 26px rgba(0,0,0,0.85);
}
.hero-vi {
  font-size: clamp(5rem, 20vw, 12rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.86;
  background: linear-gradient(168deg, #fff2c0 4%, #ffd36a 22%, var(--accent) 58%, #a63bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 40px rgba(255,61,127,0.55));
}

.hero-lema {
  margin: 8px auto 0;
  max-width: 620px;
  font-size: clamp(0.95rem, 1.9vw, 1.12rem);
  color: #dcdce8;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
}

/* Contador destacado sobre la imagen */
.hero-grande .countdown { margin-top: 34px; gap: 26px; }
.hero-grande .countdown-unit {
  min-width: 88px;
  padding: 14px 8px 10px;
  border-radius: 14px;
  background: rgba(10,8,16,0.52);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-grande .countdown-unit .value {
  font-size: clamp(2rem, 5vw, 3rem);
  color: #fff;
  text-shadow: 0 0 30px rgba(255,61,127,0.9), 0 0 60px rgba(255,61,127,0.4);
}
.hero-grande .countdown-unit .unit-label { color: #b9b9cc; }

.hero-grande .hero-cta { margin-top: 34px; }
.hero-grande .btn-primario {
  padding: 15px 34px;
  font-size: 1rem;
  box-shadow: 0 10px 34px rgba(255,61,127,0.5);
}

/* ===========================================================
   Protagonistas
   =========================================================== */
.protas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.prota {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  color: var(--text);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.prota:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  text-decoration: none;
  box-shadow: 0 20px 46px rgba(0,0,0,0.55);
}
.prota img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
.prota:hover img { transform: scale(1.06); }
.prota-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 60px 26px 24px;
  background: linear-gradient(180deg, transparent, rgba(8,6,14,0.94) 62%);
}
.prota-rol {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--accent-2);
  margin-bottom: 6px;
}
.prota-info h3 {
  margin: 0 0 6px;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
}
.prota-info p {
  margin: 0;
  font-size: 0.88rem;
  color: #c9c9d8;
  max-width: 46ch;
}
.prota-mas {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.prota:hover .prota-mas { opacity: 1; transform: none; }

/* ===========================================================
   Mosaico de lugares
   =========================================================== */
.lugares-mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 168px;
  gap: 12px;
  margin-top: 20px;
}
.lugar {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  color: var(--text);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.lugar.destacado { grid-column: span 2; grid-row: span 2; }
.lugar:hover { border-color: var(--accent); transform: translateY(-3px); text-decoration: none; }
.lugar img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.55s cubic-bezier(.16,1,.3,1);
}
.lugar:hover img { transform: scale(1.07); }
.lugar-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(8,6,14,0.92));
}
.lugar-tipo {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-2);
  margin-bottom: 3px;
}
.lugar-info h3 {
  margin: 0;
  font-size: 1rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.lugar.destacado .lugar-info { padding: 56px 22px 20px; }
.lugar.destacado .lugar-info h3 { font-size: 1.5rem; }

@media (max-width: 900px) {
  .lugares-mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .lugar.destacado { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 700px) {
  .hero-grande { min-height: auto; margin-top: -32px; }
  .hero-contenido { padding: 60px 18px 48px; }
  .hero-grande .countdown { gap: 10px; }
  .hero-grande .countdown-unit { min-width: 68px; padding: 10px 4px 8px; }
  .protas-grid { grid-template-columns: 1fr; }
  .prota { aspect-ratio: 16/10; }
  .prota-info { padding: 46px 18px 18px; }
}

/* ===========================================================
   Reproductor de musica flotante
   =========================================================== */
.musica {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0;
}
.musica[hidden] { display: none; }

.musica-btn {
  position: relative;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(24,24,36,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.musica-btn:hover { border-color: var(--accent); }
.musica-btn:active { transform: scale(0.94); }
.musica.sonando .musica-btn {
  border-color: var(--accent);
  background: linear-gradient(140deg, rgba(255,61,127,0.9), rgba(166,59,255,0.85));
  color: #fff;
}

.musica-icono-play { font-size: 0.85rem; padding-left: 3px; }
.musica.sonando .musica-icono-play { display: none; }

/* Barras que se mueven mientras suena */
.musica-ondas { display: none; align-items: flex-end; gap: 3px; height: 17px; }
.musica.sonando .musica-ondas { display: flex; }
.musica-ondas i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: #fff;
  animation: onda 0.9s ease-in-out infinite;
}
.musica-ondas i:nth-child(1) { height: 7px;  animation-delay: 0s; }
.musica-ondas i:nth-child(2) { height: 15px; animation-delay: 0.18s; }
.musica-ondas i:nth-child(3) { height: 10px; animation-delay: 0.36s; }
.musica-ondas i:nth-child(4) { height: 13px; animation-delay: 0.54s; }
@keyframes onda {
  0%, 100% { transform: scaleY(0.42); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .musica-ondas i { animation: none; transform: scaleY(0.7); }
}

/* Panel que sale al pasar el raton */
.musica-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  padding: 9px 0;
  margin-left: -23px;
  border-radius: 0 999px 999px 0;
  background: rgba(24,24,36,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-left: none;
  white-space: nowrap;
  transition: max-width 0.28s cubic-bezier(.16,1,.3,1), opacity 0.2s ease, padding 0.28s ease;
}
.musica:hover .musica-panel,
.musica:focus-within .musica-panel {
  max-width: 340px;
  opacity: 1;
  padding: 9px 18px 9px 32px;
}

.musica-titulo {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.musica-panel input[type="range"] {
  width: 78px;
  height: 4px;
  accent-color: var(--accent);
  cursor: pointer;
}
.musica-creditos { font-size: 0.7rem; color: var(--text-muted); }
.musica-creditos:hover { color: var(--accent-2); }

.credito-audio { grid-template-columns: 1fr; }

@media (max-width: 620px) {
  .musica { left: 14px; bottom: 14px; }
  .musica-btn { width: 42px; height: 42px; }
  /* En movil no hay hover: el panel se abre al enfocar el boton */
  .musica:focus-within .musica-panel { max-width: calc(100vw - 90px); }
  .musica-titulo { max-width: 110px; }
  .musica-panel input[type="range"] { width: 64px; }
}

/* ===========================================================
   Pagina de galeria
   =========================================================== */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin: 22px 0 8px;
}
.promo-item { margin: 0; }
.promo-item a {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.promo-item a:hover { border-color: var(--accent); transform: translateY(-3px); }
.promo-item img { width: 100%; height: auto; display: block; }
.promo-item figcaption {
  margin-top: 10px;
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.promo-item figcaption strong { color: var(--text); display: block; margin-bottom: 2px; }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.gal-item {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.gal-item:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.gal-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.gal-item:hover img { transform: scale(1.07); }
.gal-pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 9px 7px;
  font-size: 0.72rem;
  font-weight: 600;
  background: linear-gradient(180deg, transparent, rgba(8,6,14,0.9));
  opacity: 0;
  transition: opacity 0.15s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gal-item:hover .gal-pie { opacity: 1; }

@media (max-width: 620px) {
  .gal-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gal-pie { opacity: 1; font-size: 0.66rem; }
}
/* ===========================================================
   Visor de imagenes a pantalla completa
   =========================================================== */
.visor {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(5,4,10,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
  cursor: zoom-out;
}
.visor.abierto { opacity: 1; }
.visor[hidden] { display: none; }

.visor-marco {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 76px 84px;
}
.visor-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7);
  cursor: default;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(.16,1,.3,1);
}
.visor.cargando .visor-img { opacity: 0; transform: scale(0.97); }

.visor-cargando {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: var(--accent);
  opacity: 0;
  animation: girar 0.8s linear infinite;
}
.visor.cargando .visor-cargando { opacity: 1; }
@keyframes girar { to { transform: rotate(360deg); } }

.visor-cerrar,
.visor-nav {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(20,18,28,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.visor-cerrar {
  top: 18px; right: 18px;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
}
.visor-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 76px;
  border-radius: 12px;
  font-size: 1.3rem;
}
.visor-prev { left: 16px; }
.visor-next { right: 16px; }
.visor-cerrar:hover, .visor-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.visor-nav:active { transform: translateY(-50%) scale(0.94); }
.visor.solo-una .visor-nav { display: none; }

.visor-barra {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 24px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(180deg, transparent, rgba(5,4,10,0.85));
  pointer-events: none;
}
.visor-pie {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.visor-contador {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20,18,28,0.7);
  border: 1px solid rgba(255,255,255,0.14);
  flex: none;
}

@media (max-width: 700px) {
  .visor-marco { padding: 54px 12px 76px; }
  .visor-nav { width: 42px; height: 62px; }
  .visor-prev { left: 8px; }
  .visor-next { right: 8px; }
  .visor-cerrar { width: 40px; height: 40px; top: 12px; right: 12px; }
  .visor-pie { font-size: 0.82rem; }
}

/* ===========================================================
   Miniatura de ficha ampliable
   =========================================================== */
.thumb-ampliar {
  position: absolute;
  inset: 0;
  display: block;
  cursor: zoom-in;
}
.thumb-lupa {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,13,18,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.thumb-ampliar:hover .thumb-lupa { opacity: 1; transform: none; }

/* ===========================================================
   Tarjetas que pasan imagenes al posar el raton
   =========================================================== */
.thumb-multi { position: absolute; inset: 0; }
.thumb-multi .thumb-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.thumb-multi .thumb-extra { opacity: 0; }

.thumb-puntos {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.card:hover .thumb-puntos { opacity: 1; }
.thumb-puntos i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transition: background 0.2s ease, transform 0.2s ease;
}
.thumb-multi[data-activa="0"] .thumb-puntos i:nth-child(1),
.thumb-multi[data-activa="1"] .thumb-puntos i:nth-child(2),
.thumb-multi[data-activa="2"] .thumb-puntos i:nth-child(3),
.thumb-multi[data-activa="3"] .thumb-puntos i:nth-child(4) {
  background: var(--accent);
  transform: scale(1.4);
}

/* Aviso de que hay mas fotos dentro */
.thumb-multi::after {
  content: attr(data-n) " \01F5BC";
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(13,13,18,0.72);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.card:hover .thumb-multi::after { opacity: 1; }

/* ===========================================================
   Cabecera de portada: varias capturas que se alternan
   =========================================================== */
.hero-fondo { background-image: none; animation: none; }
.hero-capa {
  position: absolute;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 42%;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-capa.activa {
  opacity: 1;
  animation: hero-zoom 12s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .hero-capa.activa { animation: none; }
  .hero-capa { transition: none; }
}

/* ===========================================================
   Galeria: enlace a la ficha desde cada imagen
   =========================================================== */
.gal-item { cursor: zoom-in; }
.gal-ficha {
  position: absolute;
  top: 7px; right: 7px;
  z-index: 3;
  font-size: 0.63rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,61,127,0.9);
  color: #fff;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.gal-item:hover .gal-ficha { opacity: 1; transform: none; }

/* ===========================================================
   Bloque de avisos de novedades
   =========================================================== */
.avisos {
  margin: 44px 0 8px;
  padding: 30px 32px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255,61,127,0.14), transparent 58%),
    linear-gradient(150deg, var(--card), var(--bg-alt));
}
.avisos.compacto { margin: 34px 0 0; padding: 22px 24px; }

.avisos-cabecera h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  padding-left: 0;
}
.avisos-cabecera h2::before { display: none; }
.avisos-cabecera p { margin: 0 0 20px; color: var(--text-muted); font-size: 0.9rem; }
.avisos.compacto .avisos-cabecera h2 { font-size: 1.1rem; }

/* --- Formulario de correo --- */
.aviso-email {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid rgba(255,61,127,0.28);
  background: rgba(13,13,18,0.4);
  margin-bottom: 18px;
}
.aviso-email-icono {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,61,127,0.16);
  border: 1px solid rgba(255,61,127,0.36);
  color: var(--accent);
}
.aviso-email-icono svg { width: 22px; height: 22px; }
.aviso-email h3 { margin: 4px 0 4px; font-size: 1.05rem; }
.aviso-email > div > p { margin: 0 0 14px; font-size: 0.86rem; color: var(--text-muted); }

.form-aviso-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.form-aviso input[type="email"] {
  flex: 1;
  min-width: 190px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}
.form-aviso input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,61,127,0.16);
}
.form-aviso button { border: none; cursor: pointer; font: inherit; flex: none; }

.form-aviso-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}
.form-aviso-consent input {
  width: 16px; height: 16px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

/* --- Canales --- */
.canales-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.canal {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.canal:hover { transform: translateY(-2px); text-decoration: none; }
.canal-icono {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.canal-icono svg { width: 20px; height: 20px; }
.canal-texto { display: flex; flex-direction: column; min-width: 0; }
.canal-texto strong { font-size: 0.92rem; }
.canal-texto em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canal-telegram .canal-icono { background: rgba(42,171,238,0.16); border: 1px solid rgba(42,171,238,0.4); color: #2aabee; }
.canal-telegram:hover { border-color: #2aabee; background: rgba(42,171,238,0.08); }
.canal-whatsapp .canal-icono { background: rgba(37,211,102,0.16); border: 1px solid rgba(37,211,102,0.4); color: #25d366; }
.canal-whatsapp:hover { border-color: #25d366; background: rgba(37,211,102,0.08); }
.canal-rss .canal-icono { background: rgba(255,176,46,0.16); border: 1px solid rgba(255,176,46,0.4); color: var(--rumor); }
.canal-rss:hover { border-color: var(--rumor); background: rgba(255,176,46,0.08); }

@media (max-width: 620px) {
  .avisos { padding: 22px 18px; }
  .aviso-email { flex-direction: column; gap: 12px; padding: 18px; }
  .form-aviso-fila { flex-direction: column; }
  .form-aviso button { width: 100%; }
}

/* Imagen de contexto en las noticias sin video */
.noticia-portada { margin: 22px 0 26px; }
.noticia-portada img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.noticia-portada figcaption {
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--text-muted);
}
/* Imagenes dentro de los articulos */
.art-foto { margin: 26px 0; }
.art-foto a {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  cursor: zoom-in;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.art-foto a:hover { border-color: var(--accent); transform: translateY(-2px); }
.art-foto img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.art-foto a:hover img { transform: scale(1.03); }
.art-foto figcaption {
  margin-top: 9px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ===========================================================
   Usabilidad tactil en movil
   =========================================================== */

/* Los marcadores del mapa se encogen con el zoom del propio mapa: a la escala
   inicial en movil quedan en unos 11 px, imposibles de acertar con el dedo.
   Se les anade un area de pulsacion invisible mucho mas grande, que no cambia
   su aspecto pero si la zona sensible.
   El area se divide entre la escala del mapa (--map-escala, que publica
   mapa.js) para que mida siempre lo mismo en pantalla, este el mapa alejado
   o ampliado. */
.map-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  --zona: 40px;
  width: calc(var(--zona) / var(--map-escala, 1));
  height: calc(var(--zona) / var(--map-escala, 1));
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
@media (pointer: coarse) {
  .map-pin::before { --zona: 48px; }
}

@media (max-width: 760px) {
  /* Las casillas de verificacion por defecto miden 16-18 px: pequenas para
     el dedo. Se agrandan solo en movil. */
  .campo-consentimiento input,
  .form-aviso-consent input,
  .tracker-item input {
    width: 24px;
    height: 24px;
  }

  /* Texto secundario: 13,7 px se lee mal en pantallas pequenas */
  .resumen { font-size: 0.95rem; }
  .excerpt,
  .card p.excerpt { font-size: 0.92rem; }
  main > p,
  main li { font-size: 1rem; }

  /* Enlaces dentro de parrafos: algo mas de zona sensible en vertical */
  main p a,
  main li a { padding-block: 2px; }

  /* Filas del tracker: mas altas para acertarlas sin precision */
  .tracker-item { padding: 12px 12px; }
}

/* ===========================================================
   Mapa: barra de filtros y lugares sin ubicar
   =========================================================== */
.map-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 18px 0 8px;
  padding: 14px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.filtro-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.filtro-etiqueta {
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.chip-tipo,
.map-filtros .legend-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  min-height: 38px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}
.chip-tipo:hover,
.map-filtros .legend-btn:hover { background: rgba(255, 255, 255, 0.1); }
.chip-tipo i,
.map-filtros .legend-btn i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.map-filtros .legend-btn i.confirmado { background: var(--confirmado); }
.map-filtros .legend-btn i.rumor { background: var(--rumor); }
.chip-cuenta {
  font-size: 0.74rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 7px;
  border-radius: 999px;
}
/* Apagado: sigue legible, pero se ve que esta descartado. */
.chip-tipo.off,
.map-filtros .legend-btn.off {
  opacity: 0.4;
  border-color: transparent;
  text-decoration: line-through;
}
.filtro-limpiar {
  margin-left: auto;
  padding: 7px 14px;
  min-height: 38px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.filtro-limpiar:hover { filter: brightness(1.1); }

.panel-seccion {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.panel-seccion-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 0.75rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-seccion-titulo span {
  font-size: 0.72rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0;
}
.panel-seccion-nota {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}
.punto-fila-suelto { text-decoration: none; }
.punto-fila-suelto:hover { text-decoration: none; }
.punto-fila-icono.sin-coordenadas {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed var(--border);
}

@media (max-width: 760px) {
  .map-filtros { padding: 12px; gap: 8px 12px; }
  .filtro-limpiar { margin-left: 0; width: 100%; justify-content: center; }
  .filtro-grupo { width: 100%; }
}

/* Corrige el panel del mapa: antes .panel-lista era el unico scroll y, al
   anadir la seccion de lugares sin ubicar, se aplastaba a 0px de alto y las
   filas desaparecian. Ahora scrollea el panel entero y el buscador se queda
   fijo arriba. */
.mapa-panel { overflow-y: auto; }
.panel-lista {
  flex: none;
  overflow: visible;
  padding-right: 0;
}
.panel-buscar {
  position: sticky;
  top: 0;
  z-index: 2;
}
.panel-seccion { flex: none; }
@media (max-width: 980px) {
  .panel-lista { max-height: none; }
}

/* ===========================================================
   Tarjetas de plataforma: ahora llevan foto del aparato en vez
   del icono SVG, asi que necesitan mas sitio y alineacion propia.
   =========================================================== */
.plat-icon {
  width: 96px;
  align-self: center;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plat-icon img {
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  /* Sombra suave para que el aparato no flote sobre el fondo oscuro. */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
  transition: transform 0.2s ease;
}
.plat-card:hover .plat-icon img { transform: translateY(-3px) scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .plat-card:hover .plat-icon img { transform: none; }
}
@media (max-width: 520px) {
  .plat-icon { width: 130px; }
  .plat-icon img { max-height: 170px; }
}