/* ============================================================================
   Agendea · sistema de diseño
   Identidad de diseño/LEEME.txt.

   Regla dura de marca: el rojo de marca solo sobre fondos claros, y su versión
   aclarada solo sobre fondos oscuros. Por eso cada paleta redefine los tokens de
   acento enteros en oscuro en vez de tirar de filtros.

   Los eventos sin imagen llevan una portada tipográfica generada del dedupe_hash,
   estable entre visitas, con el color de su categoría. Los que traen imagen de una
   fuente que la cede la muestran, siempre con el crédito a la vista: no se publica
   imagen ajena sin decir de quién es.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */

/* Los colores NO están aquí: viven en paleta-{nombre}.css, que se carga antes
   que esta hoja. Así se puede cambiar la paleta entera —o volver a la anterior—
   sin tocar una sola regla:  php cron/paleta.php papel|telon
   Lo que queda en este archivo es lo que no depende de la paleta. */

:root {
  /* tipografía */
  --display:  "Newsreader", Georgia, "Times New Roman", serif;
  --interfaz: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:     "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* escala fluida */
  --t-xs:  .72rem;
  --t-sm:  .82rem;
  --t-md:  .93rem;
  --t-lg:  1.05rem;
  --t-xl:  clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  --t-2xl: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem);
  --t-3xl: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);

  /* medidas */
  --ancho:      82rem;
  --ancho-texto: 40rem;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  /* Alto real de la cabecera fija: fila de marca + tira de categorías. Se usa
     como desplazamiento de todo lo que se queda pegado debajo. */
  --cabecera-alto: 7.5rem;
  --cabecera-fila: 4.35rem;

  /* Solo claro. La web se ve igual en el movil de quien lleve el sistema en
     oscuro que en el escritorio de al lado: una agenda que cambia de piel
     segun el telefono no parece la misma agenda. */
  color-scheme: light;
}

/* Color derivado de la categoría. --h lo pone el HTML en línea. */
[style*="--h"] {
  --cat-fg:   hsl(var(--h) 70% 30%);
  --cat-bg:   hsl(var(--h) 62% 93%);
  --cat-bor:  hsl(var(--h) 45% 82%);
}

/* ------------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1rem/1.6 var(--interfaz);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* Grano de papel al 4%: no se ve, se nota. Va en un pseudo fijo para que no
   scrollee con el contenido y no cueste un repintado por fotograma. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--acento); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--acento-2); }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Sobre la franja roja, el outline rojo no se vería. */
.cabecera :focus-visible { outline-color: #fff; }

.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.25rem; }
.prosa { max-width: var(--ancho-texto); }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--acento); color: #fff; padding: .75rem 1.1rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.saltar:focus { left: 0; top: 0; color: #fff; }

/* ---------------------------------------------------------------- cabecera */

/* Franja roja de marca. Ocupa solo la fila del logo y el buscador: la tira de
   categorías baja a papel para que el rojo no se coma media pantalla. */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: var(--marca-fondo);
  border-bottom: 1px solid var(--marca-borde);
}

.cabecera__fila {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.35rem;
  transition: min-height .25s ease;
}

.marca {
  display: inline-flex; align-items: center; gap: .55rem; flex: none;
  text-decoration: none;
  --logo-cuerpo: 2.6rem; --logo-tinta: #F1EBDF; --logo-hueco: var(--marca-fondo);
}
.marca__enlace { display: inline-flex; text-decoration: none; }
/* El logotipo se compone aquí, con texto y CSS, y no con un SVG.
   Motivo medido: el SVG escribía «Agende» con <text> en Newsreader, pero un SVG
   dentro de un <img> no puede cargar la tipografía de la web y el navegador lo
   pintaba con Georgia, que es más ancha. El sello iba en una coordenada fija
   calculada para Newsreader —48 px de hueco— y con Georgia el hueco bajaba a
   10: de ahí que la «a» pisara la «e». Compuesto en HTML, el sello va detrás de
   la palabra y el hueco es correcto con cualquier tipografía, tamaño o zoom.
   Los dos SVG del logotipo se quedan en /assets como original de marca. */
.logotipo {
  display: inline-block; white-space: nowrap;
  font: 500 var(--logo-cuerpo, 2.6rem)/1 var(--display);
  color: var(--logo-tinta, currentColor);
  letter-spacing: -.004em;
  transition: font-size .25s ease;
}
/* El sello: círculo lleno con la última letra calada. La «a» va del color del
   fondo sobre el que se apoya —de ahí --logo-hueco— porque un calado de verdad
   pediría mezclas que no aguantan todos los navegadores.
   Los números no son a ojo, salen de las medidas de Newsreader. El sello se
   alinea con la PALABRA, no con la altura de la «x»: las mayúsculas miden
   .68em, así que el círculo mide .70em y se apoya .012em por debajo de la línea
   base. Ese pelo de más por arriba y por abajo es el rebose que pide cualquier
   forma redonda para no parecer más pequeña que las letras rectas de al lado.
   Dentro, la mancha de la «a» sube .46em y baja .01em: su centro está a .225em
   de su línea base, y el interlineado de .475em es justo el que la deja
   centrada en el círculo sin recurrir a un ajuste a ojo.
   El `overflow: hidden` no recorta nada y no es decorativo: sin él, la línea
   base de un `inline-block` es la de SU texto interior, no su borde de abajo, y
   el círculo se descolgaba .125em por debajo de la palabra —que es justo lo que
   se veía—. Con overflow distinto de `visible`, el navegador alinea por el
   borde inferior y el `vertical-align` de aquí significa lo que parece. */
.logotipo__sello {
  display: inline-block; text-align: center; overflow: hidden;
  width: .70em; height: .70em; line-height: .475em;
  margin-inline-start: .13em; vertical-align: -.012em;
  border-radius: 50%; background: var(--logo-tinta, currentColor);
  color: var(--logo-hueco); font-weight: inherit;
}

/* La ciudad no es un adorno del logotipo: es de dónde habla la agenda y, en
   cuanto haya una segunda, el mando para cambiarla. Se separa del logo con una
   línea fina —recurso de cabecera de periódico— en lugar de con la píldora de
   antes, que competía con la propia marca. La chincheta va maciza: a este
   tamaño y sobre rojo, un trazo fino se deshace. */
.ciudad { position: relative; flex: none; }
.ciudad::before {
  content: ""; position: absolute; inset-block: .28rem; inset-inline-start: 0;
  border-inline-start: 1px solid rgba(255,255,255,.3);
}
.ciudad__boton {
  display: inline-flex; align-items: center; gap: .42rem; cursor: pointer;
  margin-inline-start: .1rem; padding: .42rem .58rem .42rem .7rem;
  border-radius: var(--r-sm); list-style: none;
  font: 600 var(--t-lg)/1 var(--interfaz); color: #fff;
  transition: background-color .18s ease;
}
.ciudad__boton::-webkit-details-marker { display: none; }
.ciudad__boton:hover { background: rgba(255,255,255,.14); }
.ciudad__boton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ciudad__pin { width: 1.08rem; height: 1.08rem; flex: none; opacity: .92; }
.ciudad__punta { width: .82rem; height: .82rem; flex: none; opacity: .75;
                 transition: transform .18s ease; }
.ciudad[open] .ciudad__punta { transform: rotate(180deg); }
.ciudad[open] .ciudad__boton { background: rgba(255,255,255,.14); }

/* El desplegable. Sale sobre papel aunque nazca del rojo: es una lista para
   leer, no un trozo más de la franja de marca. */
.ciudad__panel {
  position: absolute; z-index: 60; top: calc(100% + .55rem); inset-inline-start: 0;
  min-width: 15rem; padding: .85rem;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r-md); box-shadow: 0 16px 38px rgba(0,0,0,.22);
}
.ciudad__titulo {
  margin: 0 0 .5rem; font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3);
}
.ciudad__lista { list-style: none; margin: 0; padding: 0; }
.ciudad__lista a {
  display: flex; align-items: baseline; gap: .4rem;
  padding: .5rem .55rem; border-radius: var(--r-sm);
  font: 600 var(--t-md)/1.2 var(--interfaz); color: var(--tinta); text-decoration: none;
}
.ciudad__lista a span { font-weight: 400; font-size: var(--t-sm); color: var(--tinta-3); }
.ciudad__lista a:hover { background: var(--papel-2); }
.ciudad__lista a[aria-current] { color: var(--acento); }
.ciudad__nota {
  margin: .55rem .55rem 0; padding-top: .55rem; border-top: 1px solid var(--linea);
  font: 400 var(--t-sm)/1.4 var(--interfaz); color: var(--tinta-3);
}

/* En el panel no hay ciudad sino sección, y ahí la píldora sí distingue. */
.marca__placa {
  font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px; padding: .24rem .58rem;
  transition: opacity .2s ease;
}

/* Al bajar, la cabecera se encoge. La altura la sostiene el sticky, así que el
   contenido no da tirón. */
.cabecera.es-compacta .cabecera__fila { min-height: 3.25rem; }
.cabecera.es-compacta .marca { --logo-cuerpo: 2.05rem; }
/* La ciudad no se desvanece al bajar como la placa del panel: es un mando,
   y un mando invisible pero pulsable es una trampa. Solo encoge con la fila. */
.cabecera.es-compacta .marca__placa { opacity: 0; }
.cabecera.es-compacta .ciudad__boton { padding-block: .3rem; }

/* buscador */
.buscar { flex: 1 1 auto; max-width: 23rem; margin-inline-start: auto; }
.buscar__caja { position: relative; display: flex; align-items: center; }
.buscar__lupa {
  position: absolute; inset-inline-start: .8rem; width: 1rem; height: 1rem;
  color: var(--tinta-3); pointer-events: none;
}
.buscar input {
  width: 100%; font: 400 var(--t-md)/1 var(--interfaz); color: var(--tinta);
  background: var(--tarjeta); border: 1px solid transparent;
  border-radius: 999px; padding: .7rem 1rem .7rem 2.4rem;
  min-height: 2.75rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.buscar input::placeholder { color: var(--tinta-3); }
/* Sobre el rojo, el halo del foco va en blanco: el --acento-sv no se vería. */
.buscar input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.45); outline: none; }

/* navegación por categorías */
.nav { background: var(--papel-2); border-bottom: 1px solid var(--linea); }
.nav__tira {
  display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none;
  padding-block: .55rem; scroll-snap-type: x proximity;
}
.nav__tira::-webkit-scrollbar { display: none; }
.nav__tira a {
  flex: none; scroll-snap-align: start; position: relative;
  font: 500 var(--t-md)/1 var(--interfaz); color: var(--tinta-2); text-decoration: none;
  padding: .5rem .85rem; border-radius: 999px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav__tira a:hover { background: var(--papel-3); color: var(--tinta); }
.nav__tira a[aria-current="page"] { background: var(--acento); color: #fff; }
/* Un respiro entre los filtros de tiempo (Todo · Hoy · Este finde · Gratis) y
   las categorías: son dos cosas distintas en la misma tira.
   Solo en la web: el panel usa la misma tira y allí ese filete caía en medio de
   un grupo, marcando una separación que no existe. */
.nav:not(.nav--admin) .nav__tira a:nth-child(4) { margin-inline-end: 1.1rem; }
.nav:not(.nav--admin) .nav__tira a:nth-child(4)::after {
  content: ""; position: absolute; right: -.6rem; top: 22%; height: 56%; width: 1px;
  background: var(--linea-2);
}

/* El menú del panel, en dos tiras: los grupos y, debajo, las pantallas del
   grupo abierto. La segunda va más apagada y con la letra algo menor para que
   se lea como lo que es —el interior de un grupo— y no como otro menú. */
.nav--admin .nav__tira a[aria-current="true"] { background: var(--papel-3); color: var(--tinta); }
.nav--sub { background: var(--papel); border-bottom: 1px solid var(--linea); }
.nav--sub .nav__tira { padding-block: .4rem; }
.nav--sub .nav__tira a { font-size: var(--t-sm); padding: .4rem .7rem; }

/* ------------------------------------------------------------------- héroe */

main { padding-block: 2rem 5rem; min-height: 60vh; }
@media (max-width: 46rem) { main { padding-bottom: 6.5rem; } }

.heroe { padding-block: 1rem 1.6rem; margin-bottom: 0; }
.heroe__ojo {
  font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--acento); margin-bottom: .9rem;
}
.heroe__titulo {
  font: 500 var(--t-3xl)/1.02 var(--display);
  letter-spacing: -.03em; margin-bottom: .7rem; max-width: 18ch;
}
.heroe__titulo em { font-style: italic; color: var(--acento); }
.heroe__bajada { font-size: 1.12rem; color: var(--tinta-2); max-width: 46ch; }
/* Direccion de la sala, en la ficha-calendario de cada espacio. */
.heroe__donde {
  font: 500 var(--t-sm)/1.3 var(--interfaz); color: var(--tinta-3);
  margin: -.35rem 0 .8rem; max-width: 46ch;
}

.cifras { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.5rem; }
.cifra { display: flex; align-items: baseline; gap: .4rem; }
.cifra__n { font: 500 1.35rem/1 var(--mono); }
.cifra__t { font-size: var(--t-sm); color: var(--tinta-3); }

/* ----------------------------------------------------------------- títulos */

.titular {
  font: 500 var(--t-2xl)/1.1 var(--display);
  letter-spacing: -.018em; margin-bottom: .4rem;
}
.sumario { color: var(--tinta-3); font-size: var(--t-md); margin-bottom: 1.6rem; }

.seccion { margin-block: 2.75rem; }
.seccion__cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--linea); padding-bottom: .6rem;
}
.seccion__titulo { font: 500 var(--t-xl)/1.2 var(--display); letter-spacing: -.01em; }
.seccion__mas {
  font: 500 var(--t-sm)/1 var(--interfaz); text-decoration: none; white-space: nowrap;
}
.seccion__mas:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- filtros */

.filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2rem; }

/* Las dos tiras van juntas dentro de un panel: sueltas sobre el papel no se
   leían como un mismo control, sino como dos hileras de píldoras seguidas. */
.panel-filtros {
  background: var(--papel-2); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: .9rem 1rem; margin-bottom: 2.5rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.panel-filtros .filtros { margin-bottom: 0; align-items: center; gap: .35rem; }

/* Chips de contorno. Con relleno gris sobre el panel gris no se distinguían. */
.filtro {
  font: 500 var(--t-md)/1 var(--interfaz); text-decoration: none;
  color: var(--tinta-2); background: transparent;
  padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--linea-2);
  min-height: 2.4rem; display: inline-flex; align-items: center;
  transition: background .15s, color .15s, border-color .15s;
}
.filtro:hover { background: var(--papel); border-color: var(--borde); color: var(--tinta); }
.filtro--activo,
.filtro--activo:hover { background: var(--acento-sv); border-color: var(--acento); color: var(--acento-2); }

/* ------------------------------------------------------------------ tarjeta */

.rejilla {
  display: grid; gap: 2.1rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
}

/* En movil los bloques de la portada se quedan en cuatro.
   Sin esto, quitar el carrusel horizontal convertia la portada en una
   pagina de 10.800 px: treinta y seis tarjetas en columna antes del pie.
   Cada bloque es un adelanto, y para verlo entero esta su «Ver todo». */
@media (max-width: 46rem) {
  .seccion .rejilla > .tarjeta:nth-child(n+5) { display: none; }
}


/* Tarjeta de verdad: contenedor con borde, sombra y su propio hover. Antes la
   sombra y el movimiento los hacía la portada, y el resultado era una foto
   flotando sobre un texto suelto. */
.tarjeta {
  position: relative; display: flex; flex-direction: column;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--s1);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tarjeta:hover {
  transform: translateY(-3px); box-shadow: var(--s3); border-color: var(--linea-2);
}

/* La tarjeta entera es clicable, pero el enlace real envuelve solo el título:
   así el lector de pantalla anuncia el nombre del evento y no todo el bloque,
   y el texto sigue siendo seleccionable con el ratón. */
.tarjeta__enlace { color: inherit; text-decoration: none; }
.tarjeta__enlace::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-md);
}
.tarjeta:focus-within { box-shadow: var(--s3); }
.tarjeta__enlace:focus-visible { outline: none; }
.tarjeta:focus-within { outline: 3px solid var(--acento); outline-offset: 5px; border-radius: var(--r-md); }

/* Un solo ratio para todas. Con 16/10 y carteles verticales la rejilla salía
   irregular; 4/5 es el formato en que se imprimen los carteles. Sin sombra ni
   radio propios: la portada va a sangre dentro de la tarjeta, que ya los lleva. */
.portada {
  position: relative; aspect-ratio: 4 / 5; border-radius: 0;
  overflow: hidden; background-color: var(--papel-3);
  display: grid; place-items: center;
  background-image:
    linear-gradient(calc(var(--g, 20) * 1deg),
      hsl(var(--h) 58% 46%) 0%,
      hsl(calc(var(--h) + 26) 52% 34%) 100%);
}
/* El movimiento lo hace la tarjeta entera; aquí solo el zoom de la imagen. */
.portada__img { transition: transform .55s cubic-bezier(.2,.6,.2,1); }
.tarjeta:hover .portada__img { transform: scale(1.05); }

/* Cuatro tramas, elegidas por el hash: dan ritmo sin repetir. */
.portada[data-trama="0"]::before {
  content: ""; position: absolute; inset: -20%;
  background: repeating-linear-gradient(58deg,
    rgba(255,255,255,.13) 0 2px, transparent 2px 13px);
}
.portada[data-trama="1"]::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 22% 78%, rgba(255,255,255,.18) 0 1.5px, transparent 2px);
  background-size: 17px 17px;
}
.portada[data-trama="2"]::before {
  content: ""; position: absolute; inset: -45%;
  background: repeating-radial-gradient(circle at 78% 18%,
    transparent 0 16px, rgba(255,255,255,.12) 16px 18px);
}
.portada[data-trama="3"]::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 26px);
}

/* Con foto de la fuente, la trama y el degradado sobran: la imagen manda. */
.portada--foto::before { display: none; }
.portada__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

.ficha__figura { margin: 0 0 1.5rem; }
.ficha__figura .ficha__portada { margin-bottom: .5rem; }

.ficha__original { color: var(--tinta-3); font-size: var(--t-md); margin: -.6rem 0 .9rem; }
.ficha__original em { color: var(--tinta-2); }
.ficha__tecnica {
  font: 400 var(--t-sm)/1.6 var(--mono);
  color: var(--tinta-2); background: var(--papel-2);
  border-inline-start: 3px solid var(--cat-fg, var(--acento));
  padding: .8rem 1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 1.4rem;
}

.portada__ini {
  position: relative; z-index: 1;
  font: 500 3.6rem/1 var(--display); color: rgba(255,255,255,.94);
  letter-spacing: -.03em; text-shadow: 0 2px 14px rgba(0,0,0,.22);
  user-select: none;
}
/* Píldora de marca, igual con foto y sin ella: antes eran dos tratamientos
   distintos y la rejilla mezclada se veía descosida. */
.portada__cat {
  position: absolute; z-index: 1; inset-block-end: .6rem; inset-inline-start: .75rem;
  background: rgba(185,47,27,.88); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .3rem .65rem;
  font: 500 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
}
.portada__estado {
  position: absolute; z-index: 2; inset-block-start: .6rem; inset-inline-start: .6rem;
  background: #fff; color: #B00; border-radius: 999px; padding: .25rem .6rem;
  font: 600 var(--t-xs)/1 var(--interfaz); text-transform: uppercase; letter-spacing: .06em;
}
/* «Gratis» va en el segundo acento de la paleta, no en el rojo: el rojo ya lo
   lleva la píldora de categoría justo debajo y competían. */
.portada__gratis {
  position: absolute; z-index: 2; inset-block-start: .6rem; inset-inline-end: .6rem;
  background: var(--foco); color: var(--foco-tinta); border-radius: 999px;
  padding: .3rem .65rem; font: 600 var(--t-xs)/1 var(--interfaz);
  text-transform: uppercase; letter-spacing: .06em;
}

.tarjeta__cuerpo {
  padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .28rem; flex: 1;
}
.tarjeta__fecha {
  font: 500 .78rem/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-3);
}
/* La altura mínima de dos líneas no es capricho: sin ella, en una misma fila la
   sala y el precio bailan según el título ocupe una línea o dos. */
.tarjeta__titulo {
  font: 500 1.15rem/1.28 var(--display); letter-spacing: -.012em; color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.56em;
}
.tarjeta:hover .tarjeta__titulo { color: var(--acento-2); }
.tarjeta__lugar {
  font-size: var(--t-md); color: var(--tinta-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta__pie {
  margin-top: auto; padding-top: .65rem; border-top: 1px dashed var(--linea);
  font: 700 var(--t-md)/1 var(--interfaz); color: var(--acento-2);
}

/* ------------------------------------------------------------- destacados */

/* Franja de apertura: un plan grande y dos pequeños. Solo se pinta si hay tres
   candidatos CON cartel propio; con portadas tipográficas la franja pierde la
   gracia y es mejor no tenerla. La decide `Paginas::destacados()`. */
.destacados { margin: 0 0 2.8rem; }
.dest__cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--linea-2); padding-bottom: .7rem; margin-bottom: 1.2rem;
}
.dest__cabeza h2 { font: 500 1.6rem/1.2 var(--display); letter-spacing: -.02em; }
.dest__cabeza span {
  font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--foco-2);
}
/* Las tres variantes cambian la rejilla, no la tarjeta: la tarjeta es la misma
   que en el resto del sitio y solo se le pone un modificador de tamaño. */
.dest__rejilla { display: grid; gap: 1.4rem; }

/* mosaico · uno grande a la izquierda, dos apilados a la derecha */
.destacados--mosaico .dest__rejilla { grid-template-columns: 1.55fr 1fr; height: 25rem; }
.dest__col { display: grid; grid-template-rows: 1fr 1fr; gap: 1.4rem; min-height: 0; }

/* trío · tres iguales en fila, ninguno manda */
.destacados--trio .dest__rejilla { grid-template-columns: repeat(3, 1fr); }

/* panorama · uno a lo ancho y tres debajo */
.destacados--panorama .dest__rejilla { grid-template-columns: 1fr; }
.dest__fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.dest--ancho { display: grid; grid-template-columns: 1.7fr 1fr; min-height: 17rem; }
.dest--ancho .portada { aspect-ratio: auto; height: 100%; }
.dest--ancho .tarjeta__cuerpo { justify-content: center; padding: 1.3rem 1.5rem; gap: .4rem; }
.dest--ancho .tarjeta__titulo { font-size: 1.7rem; line-height: 1.15; min-height: 0; }
.dest--ancho .tarjeta__pie { margin-top: .9rem; }

/* medio · el tamaño de la rejilla normal, con la portada un poco más apaisada
   porque aquí sí hay sitio para que respire */
.dest--medio .portada { aspect-ratio: 4 / 3; }
.dest--medio .tarjeta__titulo { font-size: 1.28rem; min-height: 0; }

.dest--grande { min-height: 0; }
.dest--grande .portada { aspect-ratio: auto; flex: 1; min-height: 0; }
.dest--grande .portada__img { object-position: center 28%; }
.dest--grande .tarjeta__cuerpo { flex: 0 0 auto; padding: 1.1rem 1.3rem 1.3rem; gap: .4rem; }
.dest--grande .tarjeta__titulo { font-size: 1.7rem; line-height: 1.15; min-height: 0; }
.dest--grande .tarjeta__lugar { font-size: var(--t-md); }
.dest--grande .tarjeta__pie { margin-top: .85rem; }

.dest--chico { display: grid; grid-template-columns: 8.5rem 1fr; min-height: 0; }
.dest--chico .portada { aspect-ratio: auto; height: 100%; }
.dest--chico .portada__cat { display: none; }
.dest--chico .tarjeta__cuerpo { justify-content: center; padding: .9rem 1.1rem; }
.dest--chico .tarjeta__titulo { font-size: 1.08rem; min-height: 0; }
.dest--chico .tarjeta__pie { margin-top: .7rem; }

@media (max-width: 56rem) {
  .destacados--mosaico .dest__rejilla,
  .destacados--trio .dest__rejilla,
  .dest__fila { grid-template-columns: 1fr; height: auto; }
  .dest--grande .portada,
  .dest--ancho .portada { aspect-ratio: 4 / 3; }
  .dest--ancho { grid-template-columns: 1fr; min-height: 0; }
}

/* --------------------------------------------------------- lista por días */

/* El rótulo de día vive DENTRO de la rejilla y ocupa toda la fila: así las
   tarjetas fluyen seguidas y no quedan filas huérfanas los días de un solo plan. */
.dia__rotulo {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: .85rem;
  padding-bottom: .6rem; margin-top: 2.2rem;
  border-bottom: 2px solid var(--acento);
  font: 500 1.5rem/1.2 var(--display); letter-spacing: -.015em;
  text-transform: none; color: var(--tinta);
}
.dia__rotulo::before {
  content: ""; flex: 0 0 auto; width: .55rem; height: .55rem; border-radius: 2px;
  background: var(--acento); transform: translateY(-.15rem);
}
.rejilla > .dia__rotulo:first-child { margin-top: 0; }
.dia__rotulo span {
  background: var(--acento-sv); color: var(--acento-2);
  border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent);
  border-radius: 999px; padding: .3rem .6rem;
  font: 500 .76rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}

/* ------------------------------------------------------------------ ficha */

.miga { font: var(--t-sm)/1 var(--interfaz); color: var(--tinta-3); margin-bottom: 1.5rem; }
.miga a { color: var(--tinta-3); text-decoration: none; }
.miga a:hover { color: var(--acento); text-decoration: underline; }
.miga span[aria-hidden] { padding-inline: .4rem; }

.ficha { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) {
  .ficha { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .ficha__lado { position: sticky; top: calc(var(--cabecera-alto) + 1.5rem); }
}

.ficha__portada {
  aspect-ratio: 21 / 9; border-radius: var(--r-lg); margin-bottom: 1.5rem;
  box-shadow: var(--s2);
}
.ficha__portada .portada__ini { font-size: clamp(3rem, 9vw, 5.5rem); }

.etiqueta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--cat-bg); color: var(--cat-fg); border: 1px solid var(--cat-bor);
  border-radius: 999px; padding: .35rem .8rem; text-decoration: none;
  font: 600 var(--t-xs)/1 var(--interfaz); letter-spacing: .08em; text-transform: uppercase;
}
a.etiqueta:hover { filter: brightness(.96); color: var(--cat-fg); }

.ficha__titulo {
  font: 500 var(--t-3xl)/1.05 var(--display);
  letter-spacing: -.024em; margin-block: .8rem 1.25rem;
}

.cuando {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.4rem;
  background: var(--papel-2); border: 1px solid var(--linea);
  border-radius: var(--r-md); padding: 1.15rem 1.3rem; margin-bottom: 1.5rem;
}
.cuando__fecha { font: 500 var(--t-xl)/1.25 var(--display); }
.cuando__hora { font: 500 1.75rem/1 var(--mono); color: var(--acento); }

.datos { display: grid; grid-template-columns: 6.5rem 1fr; gap: .9rem 1.2rem; margin-bottom: 1.75rem; }
.datos dt {
  font: 500 var(--t-xs)/1.5 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3);
}
.datos dd { margin: 0; }
.tenue { color: var(--tinta-3); font-size: var(--t-md); }

.panel {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-md); padding: 1.25rem; box-shadow: var(--s1);
}
.panel + .panel { margin-top: 1rem; }
.panel__titulo {
  font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3); margin-bottom: .8rem;
}
.panel__precio { font: 500 1.5rem/1 var(--mono); margin-bottom: .3rem; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 var(--t-md)/1 var(--interfaz); text-decoration: none;
  padding: .85rem 1.3rem; border-radius: var(--r-sm); min-height: 2.9rem;
  border: 1px solid var(--borde); color: var(--tinta); background: transparent;
  transition: background .15s, border-color .15s, transform .1s;
}
.boton:hover { background: var(--papel-2); color: var(--tinta); }
.boton:active { transform: translateY(1px); }
.boton--fuerte { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton--fuerte:hover { background: var(--acento-2); border-color: var(--acento-2); color: #fff; }
.boton--ancho { width: 100%; }

.aviso {
  padding: .85rem 1.05rem; border-radius: var(--r-sm); margin-bottom: 1.4rem;
  background: var(--papel-2); font-size: var(--t-md); border-left: 3px solid var(--linea-2);
}
.aviso--rojo { border-left-color: var(--acento); background: var(--acento-sv); }

.mapa-enlace { font-size: var(--t-sm); }

/* --------------------------------------------------------- vacíos y estados */

.vacio {
  background: var(--papel-2); border: 1px dashed var(--linea-2);
  border-radius: var(--r-lg); padding: 2.5rem 1.75rem; text-align: center;
}
.vacio__titulo { font: 500 var(--t-xl)/1.3 var(--display); margin-bottom: .6rem; }
.vacio p { color: var(--tinta-2); margin-bottom: 1rem; max-width: 42ch; margin-inline: auto; }
.vacio .boton { margin-top: .4rem; }

.vacio--404 { background: none; border: 0; text-align: start; padding: 3rem 0; }
.vacio--404 .vacio p { margin-inline: 0; }

/* -------------------------------------------------------------- captación */

/* En oscuro, como ancla visual al final de la página. Es el bloque que más
   importa del sitio entero: la lista de suscriptores es el activo. */
.captacion {
  margin-top: 3rem; padding: 2rem 1.75rem;
  background: var(--tinta); border: 1px solid var(--tinta); border-radius: var(--r-lg);
  color: var(--papel);
}
.captacion__titulo {
  font: 500 var(--t-xl)/1.2 var(--display); letter-spacing: -.012em; margin-bottom: .5rem;
  color: var(--papel);
}
.captacion__texto {
  color: color-mix(in srgb, var(--papel) 72%, transparent);
  font-size: var(--t-md); max-width: 48ch;
}
.captacion__form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.captacion__campo {
  flex: 1 1 16rem; min-width: 0; min-height: 2.9rem;
  font: 400 var(--t-md)/1 var(--interfaz); color: var(--tinta);
  background: var(--tarjeta); border: 1px solid transparent;
  border-radius: var(--r-sm); padding: .8rem 1rem;
}
.captacion__campo::placeholder { color: var(--tinta-3); }
.captacion__campo:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-sv); outline: none; }
.captacion__form .boton { flex: 0 0 auto; }
.captacion__letra {
  margin-top: .9rem; font-size: var(--t-xs); max-width: 52ch;
  color: color-mix(in srgb, var(--papel) 62%, transparent);
}
.captacion a { color: var(--papel); text-underline-offset: 3px; }
.captacion .boton--fuerte { background: var(--acento); color: #fff; }
.captacion .boton--fuerte:hover { background: var(--acento-2); }

.captacion--compacta { margin-top: 1rem; padding: 1.25rem; border-radius: var(--r-md); }
.captacion--compacta .captacion__titulo { font-size: var(--t-lg); }
.captacion--compacta .captacion__texto { font-size: var(--t-sm); }
.captacion--compacta .captacion__form { flex-direction: column; }
.captacion--compacta .captacion__form .boton { width: 100%; }
/* En columna, el eje principal es el vertical: sin esto los `16rem` de la base
   flexible del campo se convierten en 16rem de ALTO. */
.captacion--compacta .captacion__campo { flex: 0 0 auto; width: 100%; }

/* Campo cebo: invisible para las personas, irresistible para los bots.
   No se usa display:none porque algunos bots se lo saltan por eso mismo. */
.cebo {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ------------------------------------------------------- mensajes y legal */

.mensaje { max-width: 44rem; padding-block: 1.5rem 2rem; }
.mensaje__rotulo {
  font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--acento); margin-bottom: .8rem;
}
.mensaje--mal .mensaje__rotulo { color: var(--tinta-3); }
.mensaje__titulo {
  font: 500 var(--t-2xl)/1.1 var(--display); letter-spacing: -.02em; margin-bottom: 1rem;
}
.mensaje__cuerpo p { margin-bottom: .9rem; color: var(--tinta-2); }
.mensaje .acciones { margin-top: 1.5rem; }

.legal { padding-block: 1rem 2rem; }
.legal h2 {
  font: 500 var(--t-xl)/1.25 var(--display); letter-spacing: -.012em;
  margin: 2.2rem 0 .7rem; padding-top: 1.2rem; border-top: 1px solid var(--linea);
}
.legal p { margin-bottom: .9rem; }
.legal code {
  font: 500 .88em var(--mono); background: var(--papel-2);
  padding: .1em .35em; border-radius: 4px;
}
.lista-legal { list-style: disc; padding-left: 1.3rem; margin-bottom: 1rem; }
.lista-legal li { margin-bottom: .45rem; }

.tabla-legal {
  width: 100%; border-collapse: collapse; margin-bottom: 1.2rem;
  font-size: var(--t-sm); display: block; overflow-x: auto;
}
.tabla-legal th, .tabla-legal td {
  text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--linea);
  vertical-align: top; min-width: 8rem;
}
.tabla-legal th {
  font: 500 var(--t-xs)/1.4 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-3);
}

/* Marcador de dato pendiente. Tiene que cantar: publicar un aviso legal con
   estos corchetes puestos es peor que no tener aviso legal. */
.pendiente {
  background: #FFE9A8; color: #4A3200; border: 1px dashed #B08900;
  padding: .05em .4em; border-radius: 4px; font-weight: 600; font-size: .92em;
}
/* --------------------------------------------------------------- pie y móvil */

/* El pie es la última impresión y hace tres trabajos: repetir la marca, dar
   los atajos y dejar por escrito lo que este proyecto no hace. Antes lo
   tercero iba en tres frases seguidas separadas por <br>, en gris y en letra
   pequeña: se leía como la letra chica de un contrato justo cuando dice lo
   contrario. Ahora va en tres columnas con rótulo. */
.pie {
  border-top: 3px solid var(--acento); background: var(--papel-2);
  padding-block: 3rem 2rem; font-size: var(--t-md); color: var(--tinta-3);
}
@media (max-width: 46rem) { .pie { padding-bottom: 6rem; } }

/* Las tres listas de enlaces caben de dos en dos hasta en el movil mas
   estrecho, y asi el pie no obliga a hacer scroll durante una pagina entera. */
.pie__rejilla {
  display: grid; gap: 2rem 1.75rem; grid-template-columns: repeat(2, 1fr);
}
.pie__marca { grid-column: 1 / -1; max-width: 34rem; }
@media (min-width: 42rem) {
  .pie__rejilla { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 62rem) {
  .pie__rejilla { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.5rem; }
  .pie__marca { grid-column: auto; max-width: none; }
}

.pie__logo {
  display: inline-block; margin-bottom: .9rem; text-decoration: none;
  --logo-cuerpo: 2.2rem; --logo-tinta: var(--tinta); --logo-hueco: var(--papel-2);
}
.pie__lema { color: var(--tinta-2); font-weight: 500; margin-bottom: .55rem; }
.pie__marca p { margin-bottom: .55rem; max-width: 34rem; }
.pie__marca p:last-child { margin-bottom: 0; }

.pie__titulo {
  font: 500 .78rem/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--acento); margin-bottom: .8rem;
}
.pie__columna ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .45rem; }
.pie a { color: var(--tinta-3); text-decoration: none; }
.pie a:hover { color: var(--acento-2); text-decoration: underline; }

/* Las promesas. Franja propia, sobre papel, para que no parezcan una nota al
   pie de los enlaces sino la parte del pie que hay que leer. */
.pie__promesas {
  list-style: none; margin: 2.5rem 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--linea);
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
  font-size: var(--t-sm); line-height: 1.6;
}
/* `auto-fit` y no tres columnas fijas: aquí hubo tres promesas y ahora hay
   una, y con la rejilla fija esa única quedaba en el primer tercio con dos
   columnas vacías al lado, como si faltara algo. El tope de 26rem evita el
   defecto contrario: una línea de letra pequeña cruzando 1.200 px. */
@media (min-width: 48rem) {
  .pie__promesas {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 26rem));
    gap: 2rem;
  }
}
.pie__promesa {
  margin-bottom: .3rem; color: var(--tinta-2);
  font: 600 var(--t-md)/1.3 var(--interfaz);
}
.pie__promesas a { color: var(--tinta-2); text-decoration: underline;
                   text-underline-offset: 2px; }

.pie__cierre {
  margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--linea);
  font-size: var(--t-sm); color: var(--tinta-3);
}

/* Barra inferior en móvil: el pulgar llega, la cabecera no. */
.movil {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  display: none; justify-content: space-around;
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 46rem) { .movil { display: flex; } }
.movil a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .55rem .25rem .5rem; text-decoration: none; color: var(--tinta-3);
  font: 500 var(--t-xs)/1 var(--interfaz); min-height: 3.1rem;
}
.movil a[aria-current="page"] { color: var(--acento); }
.movil svg { width: 1.25rem; height: 1.25rem; }

@media (max-width: 46rem) {
  .buscar { max-width: none; }
  /* En el movil la fila la mandan el menu y la marca: el buscador entero no
     cabe y deja su sitio al atajo de la lupa, que lleva a la misma pagina de
     busqueda. La ciudad se elige desde el menu lateral, que la pone primera. */
  .buscar { display: none; }
  .ciudad, .marca__placa { display: none; }
  .marca { --logo-cuerpo: 2.05rem; }
  .cabecera.es-compacta .marca { --logo-cuerpo: 1.75rem; }
  .ficha__portada { aspect-ratio: 16 / 9; }
  .datos { grid-template-columns: 1fr; gap: .2rem; }
  .datos dd { margin-bottom: .8rem; }
  .rejilla { gap: 1rem; grid-template-columns: 1fr; }
  .portada__ini { font-size: 2.4rem; }
  /* Tarjeta horizontal: en vertical entraba plan y medio por pantalla; así
     entran cuatro o cinco, que es como se ojea una agenda en el móvil. */
  .tarjeta { display: grid; grid-template-columns: 7.5rem 1fr; align-items: stretch; }
  .tarjeta .portada { aspect-ratio: auto; height: 100%; }
  .tarjeta__titulo { font-size: var(--t-lg); min-height: 0; }
  .dia__rotulo { font-size: 1.25rem; margin-top: 1.6rem; }
  /* En movil las tres destacadas ya son horizontales como el resto: el
     titulo a 1,7rem no cabe y se cortaba a media palabra. */
  .dest--grande .tarjeta__titulo,
  .dest--ancho .tarjeta__titulo,
  .dest--medio .tarjeta__titulo { font-size: var(--t-lg); }
  .dest--grande .tarjeta__cuerpo,
  .dest--ancho .tarjeta__cuerpo { padding: .9rem 1.1rem; }
  .dest--medio .portada { aspect-ratio: auto; }
  .dest__cabeza h2 { font-size: 1.3rem; }
  .panel-filtros { padding: .8rem; }
  .filtros__rotulo { min-width: 100%; margin-bottom: .15rem; }
}

@media print {
  .cabecera, .nav, .movil, .pie, .filtros, .acciones,
  .menu-boton, .cajon { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------------------- panel */

/* Quién está dentro, en la cabecera del panel.
   Va sobre el rojo de marca, así que NO puede usar --tinta-3: ese tono está
   pensado para el papel y sobre el rojo da 1,4:1, que es sencillamente
   ilegible. El crema del logotipo da 5,1:1 y el blanco del enlace 6:1. */
/* La fila del panel lleva logotipo, selector de ciudad, quién eres y Salir, y
   eso no cabe en una línea por debajo de unos 1000px: se salía por la derecha y
   «Salir» dejaba de verse, que es justo el enlace que no puede faltar. Envuelve
   en vez de desbordar. */
.cabecera__fila--admin { flex-wrap: wrap; row-gap: .45rem; padding-block: .5rem; }
.cabecera__fila--admin { min-height: 0; }

.admin__quien {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-inline-start: auto; font-size: var(--t-sm);
  color: #F1EBDF;
}
/* En pantalla estrecha el bloque baja entero a su línea y se pega a la
   izquierda: colgado a la derecha en una segunda fila parecía un descuelgue. */
@media (max-width: 46rem) {
  .admin__quien { width: 100%; margin-inline-start: 0; }
}
.admin__quien span[aria-hidden] { color: #F1EBDF; opacity: .5; }
.admin__quien a {
  color: #fff; text-decoration: underline;
  text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.admin__quien a:hover { text-decoration-thickness: 2px; }

/* El selector de ciudad, también sobre el rojo. Se dibuja a mano porque el
   estilo por defecto del sistema pinta una caja clara con texto oscuro que
   sobre esta cabecera parece un error. */
.admin__ciudad { display: inline-flex; }
.admin__ciudad select {
  font: 500 var(--t-sm)/1 var(--interfaz);
  color: #F1EBDF; background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(241, 235, 223, .35); border-radius: 999px;
  padding: .34rem 1.7rem .34rem .7rem; cursor: pointer;
  appearance: none;
  /* La punta del desplegable, en crema y como data URI: es una flecha, no
     merece una petición al servidor. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EBDF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .5rem center;
  background-size: .8rem;
}
.admin__ciudad select:hover { background-color: rgba(0, 0, 0, .3); }
/* Las opciones las pinta el sistema y heredan el color del <select>: crema
   sobre blanco no se lee. Se les devuelve el color de texto normal. */
.admin__ciudad select option { color: var(--tinta); background: var(--papel); }
.admin__form { max-width: 34rem; }
.admin__campo { margin-bottom: 1.1rem; }
.admin__campo label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: .3rem; }
.admin__campo input[type="text"], .admin__campo input[type="email"],
.admin__campo input[type="password"] {
  width: 100%; min-height: 2.8rem; padding: .7rem .9rem;
  font: 400 var(--t-md)/1 var(--interfaz); color: var(--tinta);
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r-sm);
}
.admin__campo input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-sv); outline: none; }
.admin__campo small { display: block; margin-top: .35rem; font-size: var(--t-xs); color: var(--tinta-3); }
.admin__campo--casilla label { font-weight: 400; display: flex; align-items: center; gap: .5rem; }
.admin__campo--casilla input { width: 1.1rem; height: 1.1rem; }

/* --- panel: formularios anchos, tablas y estados ------------------------- */

.admin__titular {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.admin__form--ancho { max-width: 58rem; }
.admin__fila { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.admin__acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.migas-admin { font-size: var(--t-sm); margin-bottom: .3rem; }

.admin__campo select,
.admin__campo textarea,
.admin__campo input[type="date"], .admin__campo input[type="time"],
.admin__campo input[type="url"],  .admin__campo input[type="search"] {
  width: 100%; min-height: 2.8rem; padding: .7rem .9rem;
  font: 400 var(--t-md)/1.4 var(--interfaz); color: var(--tinta);
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r-sm);
}
.admin__campo textarea { min-height: 8rem; resize: vertical; }
.admin__campo select:focus, .admin__campo textarea:focus,
.admin__campo input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-sv); outline: none; }

/* Filtros de listado: en una fila, y que quepan. */
.filtros-admin {
  display: grid; gap: .8rem; align-items: end; margin-bottom: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); max-width: 52rem;
}
.filtros-admin .admin__campo { margin-bottom: 0; }

/* Un botón que parece un enlace: para acciones dentro de una tabla, donde un
   botón de verdad rompería la fila. */
.en-linea { display: inline; }
.enlace-boton {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 var(--t-sm)/1 var(--interfaz); color: var(--acento);
  text-decoration: underline; text-underline-offset: .18em;
}
.enlace-boton:hover { color: var(--acento-2); }
.boton--peligro { border-color: var(--acento); color: var(--acento-2); }
.boton--peligro:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.acciones-peligro { display: grid; gap: 1.2rem; }
.acciones-peligro form { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

.tabla-eventos .col-fecha { white-space: nowrap; font: 500 var(--t-sm)/1.4 var(--mono); }
.tabla-eventos .col-acciones { white-space: nowrap; text-align: end; }
.tabla-eventos .col-acciones > * { margin-inline-start: .7rem; }
.fila--apagada td { opacity: .5; }
.mal { color: var(--acento-2); }

/* Sello de «esto lo ha tocado una persona». */
.marca-mano {
  display: inline-block; margin-inline-start: .4rem; padding: .1rem .4rem;
  border-radius: 999px; background: var(--acento-sv); color: var(--acento-2);
  border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent);
  font: 500 .68rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em;
}

.previa-img { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.previa-img img { border-radius: var(--r-sm); border: 1px solid var(--linea); }

/* Los números del catálogo. */
.salud { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.salud__dato {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-md);
  padding: .9rem 1rem;
}
.salud__n { display: block; font: 500 1.5rem/1 var(--mono); color: var(--tinta); }
.salud__t { display: block; font-size: var(--t-sm); color: var(--tinta-3); margin-top: .25rem; }

/* De dónde vienen las altas, con la regla del 40% a la vista. */
.canales { display: grid; gap: .7rem; max-width: 40rem; }
.canal__barra { height: .5rem; background: var(--papel-3); border-radius: 999px; overflow: hidden; }
.canal__barra span { display: block; height: 100%; background: var(--acento); }
.canal--pasado .canal__barra span { background: var(--foco); }
.canal--pasado .canal__t strong { color: var(--acento-2); }
.canal__t { font-size: var(--t-sm); color: var(--tinta-3); margin-top: .25rem; }

/* Muestra de dos colores, para elegir paleta. */
.muestra { display: flex; height: 2.6rem; border-radius: var(--r-sm); overflow: hidden; margin-bottom: .5rem; }
.muestra i { flex: 1; display: block; }

/* --- panel: cobertura por fuente y cola de repaso ------------------------ */

/* La matriz de que sirve cada fuente. El color lo dice antes que el numero. */
.tabla-cobertura td.cob { text-align: center; font: 500 var(--t-md)/1 var(--mono); }
.cob--si     { color: var(--acento-2); }
.cob--no     { color: var(--tinta-3); }
.cob--medias { color: var(--foco-2); font-weight: 600; }

/* La cola: una ficha por evento, con la decision a un clic. */
.repaso { display: grid; gap: 1rem; max-width: 62rem; }
.repaso__ficha {
  display: grid; gap: 1rem; grid-template-columns: 1.4fr 1fr; align-items: start;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-md); padding: 1rem 1.15rem;
}
@media (max-width: 52rem) { .repaso__ficha { grid-template-columns: 1fr; } }

.repaso__cuando {
  font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-3); margin-bottom: .35rem;
}
.repaso__titulo { font: 500 var(--t-lg)/1.25 var(--display); margin-bottom: .2rem; }
.repaso__titulo a { color: var(--tinta); text-decoration: none; }
.repaso__titulo a:hover { color: var(--acento-2); }
.repaso__falta {
  margin-top: .5rem; font-size: var(--t-sm); color: var(--tinta-2);
}
.repaso__falta strong { color: var(--acento-2); }
.repaso__enlaces { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .9rem; font-size: var(--t-sm); }

/* Las salidas. Van juntas y del mismo tamaño: son alternativas, no una
   principal y tres notas al pie. */
.repaso__acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.repaso__acciones .boton { font-size: var(--t-sm); padding: .45rem .75rem; min-height: 2.3rem; }
.repaso__precio { display: flex; gap: .35rem; align-items: center; width: 100%; margin-top: .3rem; }
.repaso__precio input {
  width: 5.5rem; min-height: 2.3rem; padding: .4rem .6rem;
  font: 400 var(--t-md)/1 var(--interfaz); color: var(--tinta);
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r-sm);
}
.repaso__precio input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-sv); outline: none; }

/* --- destacados: elegir rejilla y huecos --------------------------------- */

.rejilla-variantes {
  display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  max-width: 54rem;
}
.variante {
  display: grid; gap: .35rem; cursor: pointer; padding: 1rem;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-md);
  transition: border-color .15s, box-shadow .15s;
}
.variante:hover { border-color: var(--borde); }
.variante--puesta { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-sv); }
.variante input { position: absolute; opacity: 0; pointer-events: none; }
.variante__nombre { font: 600 var(--t-md)/1.2 var(--interfaz); }
.variante__detalle { font-size: var(--t-sm); color: var(--tinta-3); }
.variante__huecos { font: 500 var(--t-xs)/1 var(--mono); color: var(--acento-2); }

/* Un dibujito de la rejilla, hecho con la propia rejilla: si cambia el CSS de
   la sección, este esquema no se queda mintiendo. */
.variante__dibujo { display: grid; gap: 3px; height: 3.4rem; margin-bottom: .5rem; }
.variante__dibujo i { background: var(--papel-3); border-radius: 3px; display: block; }
.variante__dibujo--mosaico { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; }
.variante__dibujo--mosaico i:first-child { grid-row: 1 / 3; }
.variante__dibujo--trio { grid-template-columns: repeat(3, 1fr); }
.variante__dibujo--panorama { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1.3fr 1fr; }
.variante__dibujo--panorama i:first-child { grid-column: 1 / 4; }

.huecos { display: grid; gap: .9rem; max-width: 46rem; }
.hueco label {
  display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: .3rem;
}
.hueco select {
  width: 100%; min-height: 2.8rem; padding: .6rem .8rem;
  font: 400 var(--t-md)/1.3 var(--interfaz); color: var(--tinta);
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r-sm);
}
.hueco select:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-sv); outline: none; }
.hueco--sobra { opacity: .55; }
.hueco__nota {
  font: 400 var(--t-xs)/1 var(--interfaz); color: var(--tinta-3);
  text-transform: none; margin-inline-start: .4rem;
}

.previa { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .5rem; max-width: 46rem; }
.previa li { line-height: 1.45; }

/* Asterisco del precio estimado: se ve, pero no grita. */
.tarjeta__aprox { color: var(--tinta-3); margin-inline-start: .15em; }

/* ------------------------------------------------------------- paginación */

.paginacion {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem; margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
}
.paginacion a, .paginacion__actual {
  min-width: 2.6rem; min-height: 2.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .7rem; border-radius: 999px;
  font: 500 var(--t-md)/1 var(--mono); text-decoration: none;
}
.paginacion a {
  color: var(--tinta-2); background: transparent; border: 1px solid var(--linea-2);
  transition: background .15s, border-color .15s;
}
.paginacion a:hover { border-color: var(--borde); color: var(--tinta); background: var(--papel-2); }
.paginacion__actual { background: var(--acento); border: 1px solid var(--acento); color: #fff; }
.paginacion__salto { font-family: var(--interfaz); }
.paginacion__mas { color: var(--tinta-3); padding-inline: .2rem; }
@media (max-width: 34rem) { .paginacion__salto { width: 100%; order: 1; } }

/* Rótulo de cada tira de filtros: sin él, dos filas de píldoras seguidas no
   dicen qué distingue a una de otra. */
.filtros__rotulo {
  font: 500 .76rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3); align-self: center; margin-inline-end: .3rem;
  min-width: 4.6rem;
}
/* ------------------------------------------------------------ selector de sala

   Ocupa lo mismo con seis salas que con sesenta, y cerrado dice cuál está
   puesta. Es <details> nativo: sin JavaScript y con teclado de serie. */
.salas { border-bottom: 1px solid var(--linea); padding-bottom: .55rem; }
.salas[open] { padding-bottom: .8rem; }
.salas__boton {
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  list-style: none; padding: .35rem 0; border-radius: var(--r-sm);
}
.salas__boton::-webkit-details-marker { display: none; }
.salas__valor {
  font: 500 var(--t-md)/1 var(--interfaz); color: var(--tinta);
}
.salas__n {
  font: 500 var(--t-xs)/1 var(--mono); color: var(--tinta-3);
  margin-inline-start: auto;
}
.salas__flecha { width: 1.05rem; height: 1.05rem; color: var(--tinta-3); flex: none; }
.salas[open] .salas__flecha { transform: rotate(180deg); }
.salas__boton:hover .salas__valor { color: var(--acento-2); }

.salas__panel { padding-top: .7rem; }
.salas__grupo { margin-top: .7rem; }
.salas__tipo {
  font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: .4rem;
}
.salas__lista { display: flex; flex-wrap: wrap; gap: .35rem; }
.filtro__n {
  font: 500 .74rem/1 var(--mono); color: var(--tinta-3); margin-inline-start: .4rem;
}
.filtro--activo .filtro__n { color: var(--acento-2); }

/* Atajo de busqueda del movil: mismo destino que la lupa de la barra de abajo.
   En escritorio no se ve porque ahi esta el buscador entero. */
.buscar-atajo {
  display: none; flex: none; margin-inline-start: auto;
  align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%; color: #fff;
  background: rgba(255,255,255,.14);
  transition: background-color .18s ease;
}
.buscar-atajo:hover { background: rgba(255,255,255,.24); color: #fff; }
.buscar-atajo svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 46rem) { .buscar-atajo { display: inline-flex; } }

/* ------------------------------------------------------------ menú lateral */

/* El boton solo existe en el movil: en escritorio estan la tira de categorias
   y el selector de ciudad a la vista, y un menu escondido sobraria. */
.menu-boton {
  display: none; flex: none; cursor: pointer;
  width: 2.5rem; height: 2.5rem; padding: 0;
  align-items: center; justify-content: center;
  margin-inline-start: -.4rem;
  background: none; border: 0; border-radius: var(--r-sm); color: #fff;
  transition: background-color .18s ease;
}
.menu-boton:hover { background: rgba(255,255,255,.14); }
.menu-boton svg { width: 1.5rem; height: 1.5rem; }
@media (max-width: 46rem) { .menu-boton:not([hidden]) { display: inline-flex; } }

/* El cajon. Ocupa el alto real de la ventana —100dvh, no 100vh— porque en el
   movil la barra del navegador aparece y desaparece y con vh el pie del menu
   se queda debajo de ella. */
.cajon {
  position: fixed; inset: 0 auto 0 0; z-index: 100;
  width: min(21rem, 88vw); max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--papel); color: var(--tinta);
  box-shadow: var(--s3);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .22s ease;
}
.cajon.es-abierto { transform: translateX(0); }
.cajon::backdrop { background: rgba(20,16,12,.5); }
/* Con el cajon abierto, la pagina de detras no se mueve. */
body.con-cajon { overflow: hidden; }

.cajon__cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; background: var(--marca-fondo);
  --logo-cuerpo: 1.9rem; --logo-tinta: #F1EBDF; --logo-hueco: var(--marca-fondo);
}
.cajon__cerrar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-sm); color: #fff;
}
.cajon__cerrar:hover { background: rgba(255,255,255,.16); }
.cajon__cerrar svg { width: 1.3rem; height: 1.3rem; }

.cajon__cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1rem 1.5rem; }
.cajon__rotulo {
  margin: 1.25rem 0 .5rem; font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3);
}
.cajon__cuerpo > .cajon__rotulo:first-child { margin-top: 0; }

.cajon__ciudades, .cajon__enlaces, .cajon__legal { list-style: none; margin: 0; padding: 0; }
.cajon__ciudades a, .cajon__enlaces a {
  display: flex; align-items: center; gap: .45rem;
  padding: .6rem .6rem; border-radius: var(--r-sm);
  font: 500 var(--t-md)/1.2 var(--interfaz); color: var(--tinta); text-decoration: none;
}
.cajon__ciudades svg { width: .95rem; height: .95rem; flex: none; color: var(--acento); }
.cajon__ciudades a:hover, .cajon__enlaces a:hover { background: var(--papel-2); }
.cajon__enlaces a[aria-current] { background: var(--acento); color: #fff; }
.cajon__enlaces--dos { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .4rem; }

/* La captacion es el activo del proyecto: en el menu va como bloque, no como
   una linea mas de la lista. */
.cajon__alta {
  display: block; margin-top: 1.5rem; padding: .85rem .9rem;
  border-radius: var(--r-md); background: var(--acento); color: #fff;
  font: 600 var(--t-md)/1.3 var(--interfaz); text-decoration: none;
}
.cajon__alta span {
  display: block; margin-top: .2rem;
  font: 400 var(--t-sm)/1.3 var(--interfaz); color: rgba(255,255,255,.85);
}
.cajon__alta:hover { background: var(--acento-2); color: #fff; }

.cajon__legal {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--linea);
}
.cajon__legal a {
  font: 400 var(--t-sm)/1.4 var(--interfaz); color: var(--tinta-3); text-decoration: none;
}
.cajon__legal a:hover { color: var(--acento); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .cajon { transition: none; } }

/* ------------------------------------------------------ SEO de cada página */

/* El nombre de la sala en la ficha lleva a su programacion. Va como enlace de
   texto y no como boton: es un dato, no una llamada a la accion. */
.datos__sala {
  font-weight: 600; color: var(--tinta);
  text-decoration: underline; text-decoration-color: var(--borde);
  text-underline-offset: .18em;
}
.datos__sala:hover { color: var(--acento); text-decoration-color: currentColor; }

.seo__entradilla {
  margin-top: .9rem; max-width: 46rem;
  font: 400 var(--t-lg)/1.6 var(--interfaz); color: var(--tinta-2);
}

/* El texto largo y las preguntas van al final, despues de los planes: quien
   entra viene a ver que hay esta semana, no a leernos. */
.seo {
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--linea);
  max-width: 46rem;
}
.seo__texto { color: var(--tinta-2); }
.seo__texto h2, .seo__texto h3 {
  font: 600 var(--t-xl)/1.25 var(--display); color: var(--tinta);
  margin: 1.6rem 0 .6rem;
}
.seo__texto h3 { font-size: var(--t-lg); }
.seo__texto p { margin-bottom: .9rem; }
.seo__texto ul, .seo__texto ol { margin: 0 0 .9rem 1.2rem; }
.seo__texto li { margin-bottom: .35rem; }

.seo__faqs { margin-top: 2rem; }
.seo__faqs-titulo { font: 600 var(--t-xl)/1.25 var(--display); margin-bottom: .9rem; }
.faq {
  border-bottom: 1px solid var(--linea);
}
.faq summary {
  cursor: pointer; list-style: none; padding: .85rem 1.8rem .85rem 0; position: relative;
  font: 600 var(--t-md)/1.4 var(--interfaz); color: var(--tinta);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; inset-inline-end: .2rem; top: .7rem;
  font: 400 1.3rem/1 var(--interfaz); color: var(--tinta-3);
}
.faq[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--acento); }
.faq__respuesta {
  padding: 0 1.8rem .95rem 0;
  font: 400 var(--t-md)/1.65 var(--interfaz); color: var(--tinta-2);
}

/* Panel: cada pregunta del formulario de SEO, agrupada. */
.faq-fila {
  border-left: 2px solid var(--linea); padding-left: 1rem; margin-bottom: 1.2rem;
}

/* ============================================================================
   Portada del sitio (la landing de «/»)

   Todo lo de aquí se apoya en las mismas fichas de la paleta que el resto: ni
   un color escrito a mano, así que `php cron/paleta.php` sigue cambiando la web
   entera de una pieza. Y sin bloque `prefers-color-scheme`: esta web se ve
   igual en el móvil de quien lleve el sistema en oscuro (decisión de sep-2026).
   ========================================================================= */

.heroe__acciones {
  display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem;
}

/* Las ciudades. La rejilla se adapta al número que haya: con una ciudad salen
   dos tarjetas —la suya y la de «¿y tu ciudad?»— y con seis salen seis, sin
   tocar nada. Es el mismo motivo por el que la vista no escribe ningún nombre
   a mano.
   `auto-fit` y no `auto-fill`: con dos tarjetas, `auto-fill` deja abierta una
   tercera columna vacía y parece que falta algo; `auto-fit` cierra las que
   sobran y las dos ocupan la fila entera. */
.ciudades-rejilla {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.ciudad-tarjeta {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 1.35rem 1.4rem;
  box-shadow: var(--s1);
}
.ciudad-tarjeta__nombre {
  font: 500 var(--t-2xl)/1.1 var(--display); letter-spacing: -.015em;
}
.ciudad-tarjeta__nombre a { color: var(--tinta); text-decoration: none; }
.ciudad-tarjeta__nombre a:hover { color: var(--acento); }
.ciudad-tarjeta__dato { font-size: var(--t-md); color: var(--tinta-2); }
.ciudad-tarjeta__dato strong { font: 500 1.05em/1 var(--mono); color: var(--tinta); }

.ciudad-tarjeta__cats { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }
.ciudad-tarjeta__cats a {
  display: inline-flex; align-items: baseline; gap: .35rem;
  background: var(--papel-2); border: 1px solid var(--linea);
  border-radius: 999px; padding: .3rem .7rem;
  font-size: var(--t-sm); color: var(--tinta-2); text-decoration: none;
}
.ciudad-tarjeta__cats a:hover { border-color: var(--borde); color: var(--tinta); }
.ciudad-tarjeta__cats span { font: 500 var(--t-xs)/1 var(--mono); color: var(--tinta-3); }

.ciudad-tarjeta__ir {
  margin-top: auto; padding-top: .5rem;
  font: 500 var(--t-md)/1.4 var(--interfaz); color: var(--acento); text-decoration: none;
}
.ciudad-tarjeta__ir:hover { text-decoration: underline; text-underline-offset: 3px; }

/* El hueco de la siguiente ciudad: se distingue con el mismo trazo discontinuo
   que usa `.vacio` para decir «aquí todavía no hay nada». */
.ciudad-tarjeta--proxima {
  background: var(--papel-2); border-style: dashed; border-color: var(--linea-2);
  box-shadow: none;
}
.ciudad-tarjeta--proxima .ciudad-tarjeta__nombre {
  font-size: var(--t-xl); color: var(--tinta-2);
}

/* Bloque de texto suelto con marco, para lo que no es ni lista ni tarjeta. */
.bloque {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 1.5rem 1.6rem;
  max-width: var(--ancho-texto); color: var(--tinta-2);
}
.bloque p + p { margin-top: .8rem; }
.bloque strong { color: var(--tinta); font-weight: 600; }

/* ------------------------------------------------------ índice por categoría */

/* La rejilla de categorías de la portada de ciudad, en lugar de la tira de
   píldoras: diez píldoras seguidas se leen como una lista de filtros, no como
   una invitación a entrar en ninguna.
 *
 * Antes esto llevaba un degradado por categoría y un icono de trazo detrás.
 * Se quitó (decisión del propietario, sep-2026): con diez tonos pastel y
 * monigotes, la portada parecía una aplicación infantil y peleaba con lo que
 * es el sitio —papel crema, Newsreader y un solo rojo—.
 *
 * Lo que hace el trabajo visual aquí es la CIFRA, en la mono que ya distingue
 * a todos los números de la web. Es un índice de revista, no un panel de
 * botones: color solo al pasar por encima, y ahí el de siempre. */
/* Rejilla de fichas iguales, en DOS FILAS DE CINCO (decisión del propietario,
   sep-2026). Las columnas van fijas y no por `auto-fit`: las categorías son
   diez, y diez solo cae redondo en filas de 1, 2, 5 o 10. Dejándolo al ancho
   mínimo salían cuatro y sobraba una fila coja de dos.
   Por eso los saltos son 1 -> 2 -> 5 y no pasan por tres ni por cuatro.
   Se probó también con `flex-grow` para justificar la última fila: en pantalla
   ancha las últimas salían al triple que las demás, y eso ya no es un índice. */
.categorias { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) { .categorias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .categorias { grid-template-columns: repeat(5, 1fr); } }
.categoria {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem;
  min-height: 8rem; padding: 1rem 1.1rem;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-lg); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.categoria:hover {
  border-color: var(--acento); box-shadow: var(--s2); transform: translateY(-2px);
}
.categoria:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* La cifra y el icono comparten la línea de arriba. */
.categoria__alto {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.categoria__n {
  font: 500 clamp(1.9rem, 1.4rem + 1.1vw, 2.5rem)/1 var(--mono);
  color: var(--tinta); letter-spacing: -.02em;
}
.categoria:hover .categoria__n { color: var(--acento); }

.categoria__icono {
  width: 2.9rem; height: 2.9rem; flex: 0 0 auto;
  /* Sólido y de un solo color (decisión del propietario, sep-2026). El icono
     lleva `fill="currentColor"`, así que basta con poner aquí el color. */
  color: var(--acento);
  transition: transform .15s;
}
.categoria:hover .categoria__icono { transform: scale(1.06); }

/* Categoría sin nada esta semana. Se pinta igual —el sitio tiene diez y la
   rejilla se lee mejor entera— pero apagada, para que se note de un vistazo
   que ahí hoy no hay programación. */
.categoria--vacia { background: var(--papel-2); }
.categoria--vacia .categoria__n { color: var(--tinta-3); }
.categoria--vacia .categoria__t { color: var(--tinta-2); }
.categoria--vacia .categoria__icono { opacity: .45; }

/* Filete fino sobre el nombre: es lo que convierte dos líneas sueltas en una
   entrada de índice. */
.categoria__pie {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  border-top: 1px solid var(--linea); padding-top: .6rem;
}
.categoria__t {
  font: 500 var(--t-lg)/1.2 var(--display); color: var(--tinta); letter-spacing: -.01em;
}
.categoria__flecha {
  font: 400 var(--t-md)/1 var(--interfaz); color: var(--tinta-3);
  transition: transform .15s, color .15s;
}
.categoria:hover .categoria__flecha { color: var(--acento); transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .categoria, .categoria__flecha { transition: none; }
  .categoria:hover { transform: none; }
  .categoria:hover .categoria__flecha { transform: none; }
}

/* ------------------------------------------------- panel · muestreo de calidad */

/* Los recortes de la página de origen. En monoespaciada y con el salto de línea
   respetado: son trozos sueltos de una web ajena, no prosa, y leerlos en
   columna es lo que permite comparar de un vistazo con lo que publicamos. */
.muestreo__fuente {
  margin: .6rem 0; padding: .7rem .85rem; max-height: 11rem; overflow: auto;
  background: var(--papel-2); border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  font: 400 var(--t-xs)/1.7 var(--mono); color: var(--tinta-2);
  white-space: pre-wrap; word-break: break-word;
}

/* Cada campo que se juzga: fecha, hora y precio. */
.muestreo__campo {
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  padding: .4rem .7rem .55rem; margin: 0;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.muestreo__campo legend {
  font: 600 var(--t-xs)/1 var(--interfaz); color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .06em; padding: 0 .3rem;
}
.muestreo__campo label {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t-sm); color: var(--tinta-2); cursor: pointer;
}

.muestreo__nota { flex: 1 1 14rem; min-width: 0; }
.muestreo__nota input {
  width: 100%; min-height: 2.4rem; padding: .45rem .7rem;
  font: 400 var(--t-sm)/1.4 var(--interfaz); color: var(--tinta);
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r-sm);
}
.muestreo__nota input:focus {
  border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-sv); outline: none;
}

/* Horario de la sala en la ficha, cuando el evento no tiene hora de inicio.
   Se distingue de `.cuando__hora` a propósito: aquella es una hora de comienzo
   y esta es una franja de apertura, y confundirlas manda a alguien a las ocho
   de la tarde a una exposición que cerró a las ocho. */
.cuando__horario {
  font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.5;
  max-width: 34ch;
}
.cuando__horario span {
  display: block;
  font: 600 var(--t-xs)/1 var(--interfaz); color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem;
}

/* Aviso de plan terminado o cancelado, arriba del todo de la ficha.
   Solo lo ve quien llega por un enlace de fuera: la web no lleva a estas
   paginas. Por eso tiene que decirlo sin que haya que buscarlo. */
.ficha__pasado { margin: .9rem 0 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.ficha__pasado a { white-space: nowrap; }