/* Infos Valencia — clon: identidad visual basada en los colores corporativos del logo
   (rojo "INFOS" + dorado "VALENCIA"), aplicados como acentos reales (sombras, bordes,
   hover) en vez de quedarse en gris neutro plano. */

:root {
  --color-brand: #c0392b;
  --color-brand-dark: #8f2b20;
  --color-brand-gold: #d69e1f;
  --color-brand-gold-dark: #a87a16;
  --color-text: #1c1c1c;
  --color-text-muted: #5a5a5a;
  --color-bg: #ffffff;
  --color-bg-alt: #f6f5f3;
  --color-border: #e4e2de;
  --shadow-brand: 0 10px 24px -8px rgba(192, 57, 43, 0.35);
  --shadow-brand-soft: 0 6px 16px -6px rgba(192, 57, 43, 0.22);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --max-width: 1200px;
  --header-h: 64px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
}

/* Tacto (auditoría 29/09/2026, antes de migrar): el sitio es 78% móvil (ver
   Search Console) y no tenía nada de esto.
   - touch-action:manipulation quita el retardo de ~300ms antes de un toque en
     enlaces/botones (el navegador esperaba a ver si era un doble-toque para
     hacer zoom).
   - tap-highlight-color a transparente: el parpadeo gris por defecto al tocar
     no pega con los estados hover/focus ya diseñados a propósito. */
a, button, [role="button"], input, select, textarea, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Movimiento reducido: red de seguridad general. El sitio tiene transiciones
   sueltas en muchos componentes (tarjetas, menú, compartir, cookies...); en
   vez de anotar "prefers-reduced-motion" en cada una, se anulan todas aquí de
   golpe cuando el sistema lo pide, y ya está cubierto pase lo que pase. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Disuade el arrastre/guardado rápido de imágenes (no es protección real, ver
   comentario en main.js sobre el bloqueo del menú contextual). */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

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

/* Algunos posts antiguos incrustan mapas/widgets de terceros (Wikiloc, etc.)
   con width/height fijos en el propio HTML que, a diferencia de las imágenes,
   no se adaptan solos y desbordaban la página en móvil. */
iframe { max-width: 100%; }

/* NOTA: aquí había un "body { overflow-x: clip }" como cerrojo contra desbordes
   horizontales. Se ha RETIRADO por dos motivos:
   1) Ya no hace falta: los desbordes reales se arreglaron en su origen (los
      iframes de terceros con ancho fijo y las galerías). Comprobado midiendo
      cinco páginas a 375px y a 1350px sin el cerrojo: nada se sale.
   2) "clip" sobre el body convierte la raíz de la página en un contexto de
      recorte, y eso puede alterar cómo el navegador decide qué elemento es
      "visible" al medir el rendimiento (sospecha del NO_LCP en escritorio).
   Si algún día vuelve a desbordar algo, arreglarlo en ESE elemento, no aquí. */

/* Cursor personalizado por idioma (detalle visual solo en escritorio; en
   móvil no hay cursor de ratón, así que no afecta ahí). */
@media (hover: hover) and (pointer: fine) {
  /* El murciélago va en rojo corporativo, no en negro: el original era un
     cursor monocromo de 1 bit y sobre el fondo oscuro del visor de galerías
     desaparecía por completo. En rojo se ve sobre claro y sobre oscuro. */
  html[lang="es-ES"] { cursor: url('/assets/cursors/cursor-es-rojo.cur'), auto; }
  html[lang="de-CH"] { cursor: url('/assets/cursors/cursor-de.cur'), auto; }
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.75em 1.25em;
  z-index: 1000;
}
.skip-link:focus {
  left: 0.5em;
  top: 0.5em;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Header — fijo/sticky en escritorio y móvil */
.site-header {
  position: sticky;
  top: 0;
  z-index: 300;
  border-bottom: 3px solid var(--color-brand);
  background: var(--color-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.site-header-top {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.6em 1em;
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
}
/* Logo de la cabecera: 58px de alto (un 10% más que los 53px que tenía antes).
   Se le da un alto fijo y ancho automático para que el vector mantenga su
   proporción. */
.site-header .site-logo img { height: 58px; width: auto; }

/* Solo en ESCRITORIO (donde hay ratón de verdad) el logo crece al pasarle por
   encima. En móvil no se aplica: ahí no hay "hover" y un cambio de tamaño al
   tocar resultaría molesto y podría descolocar la cabecera. */
@media (hover: hover) and (pointer: fine) {
  .site-header .site-logo img {
    transition: transform 0.25s ease;
    transform-origin: left center;   /* crece hacia dentro, no empuja el buscador */
    will-change: transform;
  }
  .site-header .site-logo:hover img,
  .site-header .site-logo:focus-visible img {
    transform: scale(1.12);
  }
}

/* En el pie el mismo logo, algo más discreto y sin efecto al pasar el ratón. */
.site-footer .site-logo img { height: 44px; width: auto; }

.site-search { flex: 1; max-width: 320px; display: flex; margin-left: auto; }
.site-search input[type="search"] {
  flex: 1;
  padding: 0.4em 0.7em;
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 0.9em;
  min-width: 0;
}
.site-search button {
  border: 1px solid var(--color-border);
  border-left: none;
  background: var(--color-bg-alt);
  border-radius: 0 4px 4px 0;
  padding: 0 0.7em;
  cursor: pointer;
  color: var(--color-text);
}
.site-search button:hover { color: var(--color-brand); }

.lang-switch a {
  display: inline-block;
  padding: 0.2em 0.6em;
  margin-left: 0.3em;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--color-text);
}
.lang-switch a[aria-current="page"] {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

/* El panel lateral y sus mandos solo existen en móvil: en escritorio el menú
   es horizontal y estos elementos no deben verse (están en el HTML igualmente
   para no tener que duplicar plantillas). */
.nav-close,
.nav-backdrop { display: none; }

.nav-toggle {
  display: none;
  border: 1px solid var(--color-border);
  background: none;
  border-radius: 4px;
  padding: 0.3em;
  color: var(--color-text);
  cursor: pointer;
}

.main-nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1em;
}
.main-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
}
.main-nav > ul > li {
  position: relative;
}
.main-nav > ul > li > a,
.main-nav > ul > li > span {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.6em 0.7em;
  font-weight: 600;
  font-size: 0.92em;
  color: var(--color-text);
}
.main-nav > ul > li > span { color: var(--color-text-muted); cursor: default; }
.main-nav > ul > li > a:hover { color: var(--color-brand); text-decoration: none; }
.main-nav .chevron { font-size: 0.7em; transition: transform 0.2s ease; }

/* El título de una categoría con submenú es un enlace normal (lleva a la
   categoría); la flechita vive en un botón APARTE, a su lado, y es lo único
   que despliega/repliega el submenú (pedido 29/09/2026). El <li> se hace flex
   para que el enlace y el botón queden en la misma fila y el submenú, que le
   sigue, caiga siempre en su propia línea debajo. Los ítems sin submenú no
   llevan esta clase y no cambian. */
.main-nav > ul > li.has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.main-nav > ul > li.has-children > a { flex: 1 1 auto; min-width: 0; }
.main-nav > ul > li.has-children > .submenu { flex-basis: 100%; }
.nav-chevron-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.8em;
  min-width: 2.6em;
  color: var(--color-text-muted);
}
.nav-chevron-btn:hover { color: var(--color-brand); }
.nav-chevron-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; border-radius: 4px; }

.main-nav .submenu {
  list-style: none;
  margin: 0;
  padding: 0 0;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-brand);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.1);
  z-index: 50;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transform: translateY(-6px);
  transition: max-height 0.3s ease, opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.3s;
}
.main-nav li.has-children:hover > .submenu,
.main-nav li.has-children:focus-within > .submenu {
  max-height: 600px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  padding: 0.4em 0;
  transition: max-height 0.3s ease, opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s, visibility 0s;
}
.main-nav .submenu a {
  display: block;
  padding: 0.5em 1em;
  font-size: 0.9em;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}
.main-nav .submenu a:hover { background: var(--color-bg-alt); color: var(--color-brand); text-decoration: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .site-search { order: 3; max-width: 100%; flex-basis: 100%; }
  /* Panel lateral: entra deslizándose desde el borde DERECHO de la pantalla.
     Antes era un acordeón que empujaba el contenido hacia abajo; así el menú se
     superpone y la página no se mueve. En escritorio no cambia nada: todo esto
     vive dentro de la media query. */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    width: min(84vw, 340px);
    background: var(--color-bg);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
    padding: 3.2rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Al llegar arriba/abajo del panel, que el gesto de scroll NO se lo coma
       la página de detrás (el típico "se me cierra el menú y sigue bajando"). */
    overscroll-behavior: contain;
    /* 100dvh tiene en cuenta la barra del navegador móvil, que aparece y
       desaparece al hacer scroll; con 100vh el panel se corta por abajo. */
    height: 100dvh;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.3s;
  }
  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
  }

  .nav-backdrop {
    /* Imprescindible: la regla base lo oculta en escritorio y sin esto seguía
       oculto también en móvil, así que el fondo oscuro no aparecía nunca. */
    display: block;
    /* Y sin efectos secundarios: aunque esté oculto no debe poder tocarse. */
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  /* CRÍTICO: la regla de arriba (.nav-backdrop, especificidad 0-1-0) le gana al
     [hidden] del navegador (0-0-1), así que el fondo seguía PINTADO aunque el
     atributo estuviera puesto: transparente, a pantalla completa y tragándose
     TODOS los clics de la página, incluido el de la propia hamburguesa. Se veía
     como «el menú no hace nada». Hay que devolverle la prioridad al atributo. */
  .nav-backdrop[hidden] { display: none; }

  .nav-close {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
  }
  .nav-close:hover { color: var(--color-brand); }
  .nav-close:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

  /* Con el panel abierto, la página de detrás no debe poder desplazarse. */
  body.nav-abierto { overflow: hidden; }

  @media (prefers-reduced-motion: reduce) {
    .main-nav, .nav-backdrop { transition: none; }
  }

  .main-nav > ul { flex-direction: column; }
  .main-nav > ul > li > a, .main-nav > ul > li > span { padding: 0.75em 0.3em; border-bottom: 1px solid var(--color-border); }
  /* El botón de la flecha se dibuja al lado del enlace: lleva el mismo borde
     inferior para que, juntos, sigan formando una sola línea continua. */
  .nav-chevron-btn { border-bottom: 1px solid var(--color-border); min-width: 3em; }
  .main-nav .chevron { margin-left: auto; }

  /* En móvil los submenús empiezan ocultos: se despliegan al tocar el padre (acordeón) */
  .main-nav .submenu {
    position: static;
    box-shadow: none;
    border: none;
    border-top: none;
    border-radius: 0;
    padding-left: 1em;
    transform: none;
    max-height: 0;
    opacity: 1;
    visibility: hidden;
    transition: max-height 0.28s ease, visibility 0s linear 0.28s;
  }
  .main-nav li.has-children:hover > .submenu,
  .main-nav li.has-children:focus-within > .submenu {
    max-height: 0; visibility: hidden; transform: none; padding: 0 0 0 1em;
  } /* sin hover en touch: solo manda la clase is-expanded */
  .main-nav li.has-children.is-expanded > .submenu {
    max-height: 600px;
    visibility: visible;
    padding: 0.2em 0 0.2em 1em;
    transition: max-height 0.3s ease, visibility 0s;
  }
  .main-nav li.has-children.is-expanded > .nav-chevron-btn .chevron,
  .main-nav li.has-children.is-expanded > span .chevron { transform: rotate(180deg); }
}

/* Layout */
main#contenido {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5em 1em 3em;
}

.breadcrumbs { margin: 0 0 1em; }
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  margin: 0;
  padding: 0;
  font-size: 0.85em;
  color: var(--color-text-muted);
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.3em; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--color-border); margin-left: 0.3em; }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-brand); }
.breadcrumbs span[aria-current="page"] { color: var(--color-text); font-weight: 600; }

h1 {
  font-family: var(--font-serif);
  font-size: 1.9em;
  line-height: 1.2;
  margin: 0 0 0.7em;
}
.section-title {
  font-size: 1.3em;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0.3em;
  margin: 1.6em 0 1em;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.section-title::before {
  content: "";
  width: 4px;
  height: 1.1em;
  background: var(--color-brand-gold);
  border-radius: 2px;
}

.post-cat, .post-cat-list .post-cat {
  display: inline-block;
  background: var(--color-brand);
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25em 0.65em;
  border-radius: 3px;
  margin-bottom: 0.5em;
  box-shadow: 0 3px 8px -2px rgba(192, 57, 43, 0.5);
}
.post-cat-list { margin: 0 0 0.8em; }
.post-cat-list .post-cat { margin-right: 0.4em; }
a.post-cat:hover { text-decoration: none; opacity: 0.85; }

/* Píldoras de filtro geográfico (Valencia/Berna) en páginas de categoría. */
.filtro-geo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0 0 1.6em;
}
.geo-pill {
  display: inline-block;
  padding: 0.4em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.88em;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.geo-pill:hover { border-color: var(--color-brand); color: var(--color-brand); text-decoration: none; }
.geo-pill.is-active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

time {
  color: var(--color-text-muted);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

/* (El bloque ".post-hero" se retiró: el destacado de móvil ya no es un elemento
   aparte, es la primera tarjeta del carrusel presentada en grande — ver más
   abajo la regla de "max-width: 760px".) */

/* Grid de tarjetas */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5em;
}
.post-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  box-shadow: 0 4px 12px -6px rgba(28, 28, 28, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-brand);
  border-color: var(--color-brand);
}
.post-card-img { overflow: hidden; }
.post-card-img img { aspect-ratio: 16/10; object-fit: cover; width: 100%; transition: transform 0.4s ease; }
.post-card:hover .post-card-img img { transform: scale(1.06); }
.post-card-body { padding: 0.9em 1em 1.1em; flex: 1; display: flex; flex-direction: column; }
.post-card-body h2, .post-card-body h3 { font-size: 1.05em; line-height: 1.3; margin: 0.1em 0 0.4em; }
.post-card-body h2 a, .post-card-body h3 a { color: var(--color-text); }
.post-card-body p { color: var(--color-text-muted); font-size: 0.92em; margin: 0 0 0.6em; flex: 1; }

/* Destacado de portada: una sola tarjeta grande con el artículo más reciente.
   Sustituye al carrusel horizontal que había antes (ver comentario en index.php).
   En escritorio va imagen a la izquierda y texto a la derecha; en móvil se
   apila. Una sola imagen, visible completa desde el principio. */
.post-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.6em;
  align-items: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.5em;
  box-shadow: var(--shadow-brand-soft);
}
.post-hero-img { display: block; }
.post-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/10;
}
.post-hero-body { padding: 1.2em 1.6em 1.2em 0; }
.post-hero-body h2 {
  font-family: var(--font-serif);
  font-size: 1.6em;
  line-height: 1.25;
  margin: 0.25em 0 0.5em;
}
.post-hero-body h2 a { color: var(--color-text); }
.post-hero-body p { color: var(--color-text-muted); margin: 0 0 0.7em; }

@media (max-width: 760px) {
  .post-hero { grid-template-columns: 1fr; gap: 0; margin-bottom: 1.2em; }
  .post-hero-body { padding: 0.9em 1.1em 1.2em; }
  .post-hero-body h2 { font-size: 1.35em; }
}
@media (min-width: 961px) {
  .post-hero-body h2 { font-size: 1.85em; }
}
/* Artículo individual */
.single-post h1 {
  font-size: 2em;
}
.post-meta {
  color: var(--color-text-muted);
  font-size: 0.9em;
  margin: 0 0 1.2em;
}
.post-featured-img { margin: 0 0 1.2em; }
.post-featured-img img { border-radius: 10px; width: 100%; aspect-ratio: 16/9; object-fit: cover; box-shadow: var(--shadow-brand-soft); }
.post-content { font-size: 1.05em; }
.post-content h2 { font-size: 1.4em; margin-top: 1.4em; }
.post-content h3 { font-size: 1.15em; margin-top: 1.2em; }
.post-content p { margin: 0 0 1em; }
/* Imágenes del cuerpo del artículo: SIEMPRE centradas.
   Muchas fotos antiguas son más estrechas que la columna de texto (640px dentro
   de 828px, por ejemplo). Como la regla global pone las imágenes en modo bloque,
   se quedaban pegadas a la izquierda dejando un hueco blanco a la derecha, y el
   artículo se veía descuadrado. Con los márgenes laterales en "auto" el hueco
   se reparte y todas quedan igual, sin tocar el contenido de la base de datos.
   (Ojo: "text-align: center" NO sirve aquí — no afecta a elementos de bloque.) */
.post-content img {
  border-radius: 6px;
  margin: 0.5em auto;
}
/* Las de galería son celdas de una fila desplazable: ahí manda el contenedor y
   centrarlas una a una descolocaría la fila. */
.content-gallery-grid img { margin-left: 0; margin-right: 0; }
/* Un <figure> o un <a> que solo envuelve a una imagen también se centra, para
   que el pie de foto quede debajo y alineado con ella. */
.post-content figure:not(.content-gallery-grid figure) {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  max-width: 100%;
}
.post-content figure figcaption { text-align: center; }

.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; margin: 1em 0; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }

/* Miniatura de YouTube: no carga el iframe (ni sus cookies) hasta que se hace clic */
.video-embed-placeholder {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.video-embed-placeholder img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.video-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 48px;
  transition: transform 0.2s ease;
}
.video-embed-placeholder:hover .video-play-icon { transform: translate(-50%, -50%) scale(1.1); }

/* Galerías antiguas de Elementor (imágenes con lightbox sueltas en el contenido).
   Ojo: en muchos posts estas fotos NO están dentro de ningún contenedor común de
   galería (ni wp-block-gallery ni nada con display:flex propio) — son <figure
   class="gallery-item"> sueltos uno detrás de otro, que por defecto son bloques y
   se apilan verticalmente. Poniendo el propio <figure> en inline-block se resuelve
   sin necesitar un contenedor: fluyen en fila y saltan de línea solos. */
.post-content figure.gallery-item,
.post-content a[data-elementor-open-lightbox] {
  display: inline-block;
  vertical-align: top;
  margin: 0.25em;
  cursor: zoom-in;
}
.post-content figure.gallery-item { margin: 0.35em; }
.post-content a[data-elementor-open-lightbox] figure { margin: 0; display: block; }
.post-content a[data-elementor-open-lightbox] img,
.post-content figure.gallery-item img {
  width: 150px; height: 150px; object-fit: cover; margin: 0;
  border-radius: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.post-content a[data-elementor-open-lightbox]:hover img {
  transform: scale(1.05);
  box-shadow: var(--shadow-brand);
}

/* Widget de pestañas de la portada (Recientes / Populares / Agenda).
   Los tres paneles llegan montados del servidor; el JS solo cambia cuál se ve.
   Sin JS se muestra el primero, que es lo razonable como respaldo. */
.home-widget {
  margin: 2em 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-bg);
}
.hw-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.hw-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 0.6em;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.92em;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.hw-tab:hover { color: var(--color-brand); }
.hw-tab.is-active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
  background: var(--color-bg);
}
.hw-panel { display: none; padding: 0.5em 1em; }
.hw-panel.is-active { display: block; }

.hw-item {
  display: flex;
  gap: 0.9em;
  align-items: center;
  padding: 0.85em 0;
  border-bottom: 1px solid var(--color-border);
}
.hw-item:last-child { border-bottom: 0; }
.hw-item-img { flex: 0 0 auto; }
.hw-item-img img {
  width: 110px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}
.hw-item-body { min-width: 0; }
.hw-item-cats { margin: 0 0 0.35em; display: flex; flex-wrap: wrap; gap: 0.3em; }
.hw-item h3 {
  font-size: 1em;
  line-height: 1.3;
  margin: 0 0 0.3em;
}
.hw-item h3 a { color: var(--color-text); }
.hw-item h3 a:hover { color: var(--color-brand); }

/* Con cuatro pestañas ("Recomendados" es la etiqueta más larga) el texto deja
   de caber antes que con tres: el corte sube de 480px a 700px. Por debajo se
   queda solo el icono, que sigue teniendo su nombre accesible en aria-label. */
@media (max-width: 700px) {
  .hw-tab span { display: none; }
  .hw-tab { padding: 0.9em 0.4em; }
}
@media (max-width: 480px) {
  .hw-item-img img { width: 84px; height: 64px; }
}

/* Carruseles antiguos de Elementor sin marcado propio (ver main.js: se agrupan las
   <figure><img></figure> sueltas y se meten aquí). Es siempre una única fila
   que se desplaza en horizontal (móvil con el dedo, escritorio arrastrando con
   el ratón — ver main.js) en vez de apilarse en varias filas: así el número de
   fotos nunca deja una última fila descuadrada, sea cual sea la cantidad. */
.content-gallery-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6em;
  margin: 1em -1em;
  padding: 0 1em 0.5em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  cursor: grab;
}
.content-gallery-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.content-gallery-grid::-webkit-scrollbar { display: none; }
/* Ojo: el hijo directo NO siempre es un <figure>. Según cómo se guardara la
   galería puede ser <figure> o un <a> que envuelve al <figure>. Si la regla
   apunta solo a figure, los <a> conservan el flex-shrink por defecto y las
   fotos salen aplastadas (encogidas a lo ancho, con el alto intacto). Por eso
   se aplica al hijo directo, sea cual sea. */
.content-gallery-grid > * {
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: start;
  border-radius: 6px;
  overflow: hidden;
}
.content-gallery-grid figure { margin: 0; }
/* Pie de foto dentro de la galería: se limita al ancho de la miniatura para que
   un texto largo no ensanche la tarjeta y descuadre la fila. */
.content-gallery-grid figcaption {
  width: 150px;
  margin-top: 0.35em;
  font-size: 0.75em;
  line-height: 1.3;
  color: var(--color-text-muted);
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.content-gallery-grid img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  -webkit-user-drag: none;
}
.content-gallery-grid img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-brand);
}
/* Si de verdad caben todas las fotos sin desbordar, que queden centradas en
   vez de pegadas a la izquierda (solo aplica cuando no hace falta desplazar). */
@media (min-width: 761px) {
  .content-gallery-grid:not(.is-overflowing) { justify-content: center; }
}

/* Lightbox genérico para cualquier galería/imagen con enlace directo en el contenido */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 8, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  overscroll-behavior: contain;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s;
}
.lightbox-figure {
  margin: 0;
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
.lightbox-overlay.is-open .lightbox-figure { transform: scale(1); }
.lightbox-figure img {
  max-width: 90vw;
  max-height: 78vh;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.lightbox-figure figcaption {
  color: #f2f2f2;
  font-size: 0.9em;
  margin-top: 0.8em;
  text-align: center;
  max-width: 70vw;
}
.lightbox-close, .lightbox-nav {
  position: absolute;
  z-index: 5;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: var(--color-brand); }
.lightbox-close {
  top: 1.2em; right: 1.2em;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.6em;
  line-height: 1;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 1.2em;
}
.lightbox-prev { left: 1.2em; }
.lightbox-next { right: 1.2em; }
@media (max-width: 640px) {
  .lightbox-nav { width: 38px; height: 38px; font-size: 1em; }
  .lightbox-close { width: 38px; height: 38px; top: 0.6em; right: 0.6em; }
}

/* RED DE SEGURIDAD para SVG sueltos del contenido antiguo.
   Un <svg> sin width/height no tiene tamaño intrínseco: sin el CSS del
   constructor que lo dimensionaba, se estira hasta llenar el ancho disponible.
   Han aparecido así flechas de carrusel e iconos de acordeón de 800x900px en
   mitad del artículo. Se limitan a tamaño de icono. No afecta a los SVG que
   sí traen width (los que insertamos nosotros: reproducir vídeo, compartir...). */
.post-content svg:not([width]) {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  flex: 0 0 auto;
}

/* Acordeones de Elementor Pro reconstruidos como <details>/<summary> nativos
   (sin JS ni CSS propios, accesibles con teclado/lector de pantalla de serie). */
.post-content details {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin: 0 0 0.6em;
  padding: 0.2em 1em;
}
.post-content details[open] { padding-bottom: 0.8em; }
.post-content summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.7em 0;
  list-style: none;
}
.post-content summary::-webkit-details-marker { display: none; }
.post-content summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  color: var(--color-brand);
  font-weight: 800;
}
.post-content details[open] summary::before { content: "−"; }

/* Cita (<blockquote>) del editor clásico: sin esta regla se veía como texto
   plano indistinguible del resto, aunque el autor la hubiera marcado como cita
   (71 artículos la usan, 29/09/2026). Usa las variables de marca, así que sale
   bien tanto con el tema visual v2 activo como si se desactiva (rollback). */
.post-content blockquote {
  position: relative;
  margin: 1.6em 0;
  padding: 1.2em 1.3em 1.2em 2.3em;
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-brand);
  border-radius: 4px 12px 12px 4px;
  color: var(--color-text);
}
.post-content blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0.3em;
  top: -0.08em;
  font: 700 2.4em/1 var(--font-serif);
  color: var(--color-brand);
  opacity: .5;
}
.post-content blockquote p { margin: 0 0 0.5em; }
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content blockquote cite { display: block; margin-top: 0.6em; font-style: normal; font-weight: 700; font-size: 0.85em; color: var(--color-text-muted); }
.post-content blockquote cite::before { content: "— "; }

.post-share {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top: 1px solid var(--color-border);
}
.post-share-label { font-size: 0.9em; color: var(--color-text-muted); font-weight: 600; }

/* Escritorio: la fila de redes empieza colapsada (ancho 0) y se despliega en
   horizontal al pasar el ratón o al llegar con el teclado (:focus-within),
   sin tocar el móvil (ahí no existe ":hover" de verdad y se queda con el
   único botón que abre el share nativo del sistema). */
.post-share-icons { display: none; }
@media (hover: hover) and (pointer: fine) {
  .post-share-icons {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-shrink: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.35s ease, opacity 0.25s ease 0.05s;
  }
  .post-share:hover .post-share-icons,
  .post-share:focus-within .post-share-icons {
    max-width: 20em;
    opacity: 1;
  }
}
.post-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.post-share-icon:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.post-share-icon.is-copied { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

/* Aviso "Enlace copiado": sin una señal visible, copiar al portapapeles no se
   nota y parece que el botón no hace nada. */
.share-toast {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.share-toast.is-visible { opacity: 1; transform: translateY(0); }

.post-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.post-share-btn:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.post-share-btn.is-copied { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

.back-link { margin-top: 2em; display: inline-block; }
.back-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1.1em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.back-link a:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}
.back-link-arrow { display: inline-block; transition: transform 0.25s ease; }
.back-link a:hover .back-link-arrow { transform: translateX(-4px); }

/* Layout con barra lateral (solo en artículo individual) */
.post-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5em;
}
/* Por defecto una celda de grid no encoge por debajo del ancho de su contenido
   más ancho (min-width:auto); con contenido incrustado de terceros eso podía
   forzar toda la columna (y las píldoras de categoría) a desbordar en móvil. */
.post-layout > * { min-width: 0; }
@media (min-width: 960px) {
  .post-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  /* La barra lateral es mucho más corta que un artículo largo: sin sticky se queda
     arriba y, al bajar a leer, el hueco de su columna ya está vacío (parecía que
     "desaparecía"). Con sticky te sigue mientras el artículo tenga más recorrido. */
  .post-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 56px + 1em);
    max-height: calc(100vh - var(--header-h) - 56px - 2em);
    overflow-y: auto;
  }
}

.sidebar-widget {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1em;
  margin-bottom: 1.5em;
}
.sidebar-widget h2 {
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-brand);
  margin: 0 0 0.8em;
  border-bottom: 2px solid var(--color-brand-gold);
  padding-bottom: 0.4em;
}
.weather-widget-body { display: flex; align-items: center; gap: 1em; }
.weather-temp { font-size: 2.2em; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-brand); }
.weather-desc { color: var(--color-text-muted); font-size: 0.9em; }
.weather-icon { font-size: 2.4em; line-height: 1; }
.sidebar-banner-link { display: block; margin-bottom: 1em; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 10px -4px rgba(0,0,0,0.2); }
.sidebar-banner-link img { width: 100%; }

/* Categoría / búsqueda */
.search-count { color: var(--color-text-muted); font-size: 0.9em; margin: 0 0 1em; }
/* Artículos relacionados al final del artículo.
   Va DENTRO de la columna del texto (no a todo el ancho), porque a su derecha
   sigue estando la barra lateral: por eso las tarjetas se apilan pronto. */
.post-related { margin-top: 2.5em; }
.post-related .section-title { margin-bottom: 0.8em; }
.post-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2em;
}
/* Con la barra lateral al lado, tres columnas solo caben en pantallas anchas. */
@media (max-width: 1100px) {
  .post-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .post-related-grid { grid-template-columns: 1fr; }
}

/* Botón "Cargar más" — el mismo en portada, categorías y buscador.
   Sustituye a la antigua paginación numerada: con un solo botón centrado no
   hay filas de números que se descuadren en pantallas estrechas. */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 2.5em 0;
}
.btn-load-more {
  display: inline-block;
  padding: 0.85em 2.2em;
  border: 1px solid var(--color-brand);
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-size: 0.95em;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn-load-more:hover {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-brand-soft);
}
.btn-load-more.is-loading { opacity: 0.65; pointer-events: none; }
@media (max-width: 480px) {
  /* En móvil ocupa casi todo el ancho: objetivo de toque cómodo y centrado. */
  .load-more-wrap { margin: 2em 0; }
  .btn-load-more { width: 100%; max-width: 320px; padding: 0.95em 1em; }
}
/* (La paginación numerada se retiró: ahora todas las vistas usan el mismo
   botón "Cargar más" de arriba, que además es un enlace real rastreable.) */

/* Página estática */
.single-page h1 { margin-bottom: 0.8em; }

/* Footer — fondo BLANCO, igual que el resto de la página.
   Antes era gris claro y el logo se recortaba contra él como una caja: el SVG
   original traía un fondo blanco incrustado. Ese fondo ya se ha eliminado del
   propio archivo, pero el pie se deja en blanco igualmente porque queda más
   limpio y evita que vuelva a notarse con cualquier otro logo o banner. */
.site-footer {
  border-top: 3px solid var(--color-brand-gold);
  margin-top: 2em;
  background: var(--color-bg);
  font-size: 0.9em;
}
.site-footer-widgets {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2em 1em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2em;
}
.footer-col h2 {
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-brand);
  margin: 0 0 0.8em;
}
.footer-col p { color: var(--color-text-muted); line-height: 1.6; margin: 0; }
.footer-legal-menu { list-style: none; margin: 0; padding: 0; }
.footer-legal-menu li { margin-bottom: 0.5em; }
.footer-legal-menu a { color: var(--color-text); }
.footer-legal-menu a:hover { color: var(--color-brand); }
.footer-col-partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
.footer-category-finder {
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.footer-category-finder label {
  font-size: 0.85em;
  color: var(--color-text-muted);
  text-align: center;
}
.footer-category-finder-row {
  display: flex;
  gap: 0.5em;
}
.footer-category-finder-row select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.5em 0.6em;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.9em;
}
.footer-category-finder-btn {
  flex: 0 0 auto;
  padding: 0.5em 0.9em;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-brand);
  color: #fff;
  cursor: pointer;
}

/* Fila inferior: logo, copyright y redes sociales alineados en la misma fila */
.site-footer-bottom {
  border-top: 1px solid var(--color-border);
  padding: 1.2em 1em;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1em;
}
.site-footer-bottom .site-logo img { height: 34px; width: auto; opacity: 0.9; }
.site-footer-copyright-inline { text-align: center; color: var(--color-text-muted); font-size: 0.85em; white-space: nowrap; }
.social-links { list-style: none; display: flex; gap: 0.6em; margin: 0; padding: 0; justify-self: end; }
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.social-links a:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff; text-decoration: none; }

/* Crédito del pie ("Hecho con ♥ por..."): fila propia a todo el ancho, debajo
   del logo/copyright/redes. Clase genérica de plantilla, reutilizable si algún
   día se añade otro crédito (no queda atada a esta frase en concreto). */
.site-footer-credit {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin: 0.6em 0 0;
  font-size: 0.82em;
  color: var(--color-text-muted);
}
.site-footer-credit a { color: inherit; font-weight: 700; }
.site-footer-credit a:hover { color: var(--color-brand); }
.footer-credit-heart { flex: none; color: var(--color-brand); }

/* Botón volver arriba */
.back-to-top {
  position: fixed;
  right: 1.2em;
  bottom: calc(1.2em + env(safe-area-inset-bottom));
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--color-brand);
  color: #fff;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(192, 57, 43, 0.55);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  z-index: 400;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--color-brand-dark); }
/* Se oculta cerca del pie para no tapar el logo/redes sociales del footer */
.back-to-top.is-near-footer { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* Aviso de cookies (RGPD/UE + LPD suiza) */
.cookie-banner {
  position: fixed;
  left: 1em; right: 1em; bottom: calc(1em + env(safe-area-inset-bottom));
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-brand);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  padding: 1.2em 1.4em;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.cookie-banner.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
.cookie-banner p { margin: 0 0 1em; font-size: 0.92em; color: var(--color-text); line-height: 1.5; }
.cookie-banner p a { color: var(--color-brand); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 0.8em; flex-wrap: wrap; justify-content: flex-end; }
.btn-cookie {
  padding: 0.6em 1.2em;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border);
}
.btn-cookie-secondary { background: var(--color-bg); color: var(--color-text); }
.btn-cookie-secondary:hover { border-color: var(--color-brand); }
.btn-cookie-primary { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.btn-cookie-primary:hover { background: var(--color-brand-dark); }

.footer-link-button {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--color-text); font-size: inherit; font-family: inherit;
  cursor: pointer; text-align: left;
}
.footer-link-button:hover { color: var(--color-brand); }

@media (max-width: 480px) {
  .cookie-banner { left: 0.5em; right: 0.5em; bottom: calc(0.5em + env(safe-area-inset-bottom)); padding: 1em; }
  .cookie-banner-actions { justify-content: stretch; }
  .btn-cookie { flex: 1; text-align: center; }
}

/* Responsive */
@media (max-width: 760px) {
  h1 { font-size: 1.5em; }
  .site-footer-bottom { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .social-links { justify-self: center; }
}

/* Modo noche. Se activa por elección manual (data-theme="dark", del botón del
   header) o por preferencia del sistema cuando el usuario no ha elegido a mano
   (de ahí el :not([data-theme="light"]) en el media query: si eligió claro,
   manda su elección aunque el SO esté en oscuro). Todo consume las variables
   vía var(), así que cambiar estas cinco tiñe la web entera.
   color-scheme:dark (auditoría 29/09/2026): sin esto, elementos NATIVOS del
   navegador que no pintamos nosotros —la barra de scroll, el desplegable
   nativo del buscador— seguían con su aspecto claro de fábrica encima de una
   página oscura. El <select> del pie ya llevaba su propio fondo/color, pero
   esto cubre también lo que no tocamos a mano. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-text: #eaeaea;
  --color-text-muted: #a8a8a8;
  --color-bg: #14141a;
  --color-bg-alt: #1c1c24;
  --color-border: #33333c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-text: #eaeaea;
    --color-text-muted: #a8a8a8;
    --color-bg: #14141a;
    --color-bg-alt: #1c1c24;
    --color-border: #33333c;
  }
}
:root[data-theme="dark"] .site-header { background: var(--color-bg); }
/* body:not(.iv2): con el tema v2 activo, .lang-switch a ya tiene su propio
   color en modo noche (theme-v2.css) — más tenue para el idioma NO activo, a
   propósito. Esta regla base tiene más especificidad (:root[..] + clase) y le
   ganaba SIEMPRE a la de iv2, así que el idioma inactivo salía tan brillante
   como el activo (confirmado con getComputedStyle, 29/09/2026). Se deja para
   cuando el tema v2 esté desactivado (rollback), que es donde hace falta. */
:root[data-theme="dark"] body:not(.iv2) .lang-switch a { color: var(--color-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header { background: var(--color-bg); }
  :root:not([data-theme="light"]) body:not(.iv2) .lang-switch a { color: var(--color-text); }
}

/* Texto oscuro «de fábrica» (p.ej. color:#333) que algunos artículos traen
   pegado desde fuera, sin fondo propio: en modo claro no se notaba, en modo
   noche quedaba casi invisible contra el fondo oscuro de la página. Se marca
   en el servidor (ver marcar_texto_oscuro_para_modo_noche en functions.php,
   que ya comprueba que el elemento no tenga su propia tarjeta con fondo
   claro) y aquí solo se neutraliza, y solo en modo noche. */
:root[data-theme="dark"] .post-content [data-ivdark] { color: var(--color-text) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .post-content [data-ivdark] { color: var(--color-text) !important; }
}

/* Cita (blockquote) en modo noche: en vez de la misma caja gris apenas un
   punto más clara que el fondo (poco contraste, no destaca), se invierte a
   rojo de marca sólido con texto blanco — el mismo tratamiento que ya usan
   las píldoras de categoría, así que sigue siendo coherente con el resto. */
:root[data-theme="dark"] .post-content blockquote {
  background: var(--color-brand);
  border-left-color: var(--color-brand-gold);
  color: #fff;
}
:root[data-theme="dark"] .post-content blockquote::before { color: rgba(255, 255, 255, 0.7); }
:root[data-theme="dark"] .post-content blockquote cite { color: rgba(255, 255, 255, 0.8); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .post-content blockquote {
    background: var(--color-brand);
    border-left-color: var(--color-brand-gold);
    color: #fff;
  }
  :root:not([data-theme="light"]) .post-content blockquote::before { color: rgba(255, 255, 255, 0.7); }
  :root:not([data-theme="light"]) .post-content blockquote cite { color: rgba(255, 255, 255, 0.8); }
}

/* Botón día/noche: mismo aire que el selector de idioma. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  margin-left: 0.4rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--color-brand); color: var(--color-brand); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
/* Por defecto (claro) se ve la luna; en oscuro, el sol. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline-flex; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* Logo en modo noche: se muestra una variante con las LETRAS oscuras pasadas a
   blanco (la mascota y los colores de marca quedan intactos). Se togglea la
   visibilidad de las dos imágenes; ninguna cambia el tamaño de la caja, así que
   no hay desplazamiento de la cabecera al cambiar de modo. */
.site-logo .logo-dark { display: none; }
:root[data-theme="dark"] .site-logo .logo-light { display: none; }
:root[data-theme="dark"] .site-logo .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-logo .logo-light { display: none; }
  :root:not([data-theme="light"]) .site-logo .logo-dark { display: block; }
}

/* ---------------------------------------------------------------------------
   Cabecera en MÓVIL (solo teléfonos, <=640px): el logo va CENTRADO y más grande
   en su propia fila; debajo, una fila con idioma + día/noche + menú
   hamburguesa; y debajo el buscador a todo el ancho. En tablet y escritorio se
   deja exactamente como estaba. Va después del resto de reglas de cabecera para
   ganar en la cascada (misma especificidad, fuente posterior).
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .site-header-top {
    justify-content: center;
    row-gap: 0.55em;
    column-gap: 0.5em;
  }
  .site-logo {
    order: 1;
    flex-basis: 100%;
    display: flex;
    justify-content: center;
  }
  .site-header .site-logo img { height: 82px; }   /* más grande que los 58px de escritorio */
  .lang-switch  { order: 2; margin: 0; }
  .theme-toggle { order: 3; margin-left: 0; }
  .nav-toggle   { order: 4; }
  .site-search  { order: 5; flex-basis: 100%; max-width: 100%; margin-left: 0; }
}

/* Recuento de artículos en las páginas de archivo de etiqueta (/tag/{slug}/).
   Va justo debajo del H1 y sirve para que se vea que la página es un listado
   y no un artículo. */
.archivo-resumen {
  margin: -0.4rem 0 1.4rem;
  color: var(--color-text-muted, #5a5a5a);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

/* Programas de festival plegados por día (ver agrupar_programa_por_dias).
   Cuatro días de actos seguidos son casi 10.000 caracteres de scroll; así se
   ve la estructura de un vistazo y se abre solo el día que interesa. */
.post-content .dia-programa {
  border: 1px solid var(--color-border, #e2ddda);
  border-radius: 4px;
  margin: 0.6rem 0;
  background: var(--color-bg-alt, #faf8f7);
}
.post-content .dia-programa > summary {
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  font-weight: 700;
  /* sin capitalize: escribiría «18 De Junio» */
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.post-content .dia-programa > summary::-webkit-details-marker { display: none; }
.post-content .dia-programa > summary::before {
  content: "▸";
  color: var(--color-primary, #c0392b);
  /* inline-block es imprescindible: sin él transform no se aplica al ::before
     y la flecha del día abierto se ve cortada. */
  display: inline-block;
  transition: transform 0.15s ease;
}
.post-content .dia-programa[open] > summary::before { transform: rotate(90deg); }
.post-content .dia-programa > summary:hover { color: var(--color-primary, #c0392b); }
.post-content .dia-programa > summary:focus-visible { outline: 2px solid var(--color-primary, #c0392b); outline-offset: 2px; }
.post-content .dia-cuerpo { padding: 0 0.9rem 0.5rem; }
.post-content .dia-cuerpo > p:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .post-content .dia-programa > summary::before { transition: none; }
}
/* Destino alternativo de ancla: no debe ocupar ni verse. */
.ancla-alt { display: block; height: 0; overflow: hidden; }