/*
 * eventos.css — el diseño cme-* del sistema de eventos.
 *
 * Portado de colormusic.cl el 29-ago-2026. Conserva el prefijo `cme-` a propósito:
 * son 43 KB de diseño probado y reescribirlo a `cf-` no aportaría nada. Lo NUEVO
 * de este tema va con `cf-`, en main.css.
 *
 * Qué se limpió al portar, y por qué se podía:
 *   · Los 42 `!important` eliminados. Existían para ganarle al reset global de Woodmart.
 *     Aquí no hay tema padre.
 *   · Los selectores `.cme-filtros .cme-buscador X` colapsados a `.cme-buscador X`.
 *   · El bloque `.cme-filtros .cme-buscador .cme-boton` eliminado: era idéntico a la
 *     base `.cme-boton` salvo 1px de gap. Solo existía por especificidad.
 *
 * Se encola CONDICIONALMENTE desde inc/assets.php: solo en las vistas de evento y
 * de recinto. Nunca en la portada.
 */

/* ============================================================================
   Eventos — hoja nueva, independiente del tema. Prefijo `cme-`.
   No reutiliza ninguna clase existente: el CSS actual queda como legacy.

   Calcado del aspecto de hoy: naranja var(--cf-brasa), día 25px/800,
   mes 12px mayúsculas, título 13px/800, detalle 11px, imagen 80%.
   ========================================================================= */

/*
 * 🔴 LOS TOKENS VAN EN `:root`, NO EN `.cme` — corregido el 06-sep-2026, y es la segunda vez
 * en el mismo día que se paga lo contrario.
 *
 * Se declaraban en `.cme`, así que **cualquier marcado `cme-` fuera de ese contenedor perdía
 * sus siete variables de golpe**: CSS descarta la declaración que usa una variable inexistente
 * y sigue, sin error. Los dos casos, los dos medidos en producción:
 *
 *   · `/personalidades/` — su barra de filtros usaba `.cme-filtros` sin `.cme` desde el
 *     03-sep: campos sin fondo ni borde y el botón «Filtrar» con el icono en `rgb(13,13,15)`
 *     sobre fondo negro, o sea **invisible**, durante tres días.
 *   · la portada — al pasar su cartelera a `cf_evt_card_html()` el mismo 06-sep quedaron
 *     **134 elementos `cme-` sin un solo `.cme` por encima**, y las tarjetas salieron sin
 *     fondo y sin borde. Lo vio Mario en el inspector: «--cme-linea is not defined».
 *
 * 📌 Ponerlos en `:root` no tiene contrapartida: son alias de los tokens `--cf-`, y solo los
 *    leen las reglas `cme-`, que viven en esta hoja y esta hoja se encola condicionalmente.
 *    Lo que se gana es que **el fallo deja de ser posible**: no hay contenedor que olvidar.
 * ⚠️ `.cme` se queda con lo que sí es suyo —la tipografía, el color y el reset de enlaces—,
 *    que es maquetación del bloque y no tokens.
 */
:root {
  /* Los tokens `cme-` se conservan porque los usan 43 KB de reglas ya probadas,
     pero ya NO llevan color propio: consumen los del tema, y así la hoja
     entera responde al interruptor de modo oscuro/claro sin tocar una regla. */
  --cme-naranja: var(--cf-brasa);
  --cme-texto:   var(--cf-texto);
  --cme-suave:   var(--cf-texto-suave);
  --cme-linea:   var(--cf-borde);
  --cme-fondo:   var(--cf-superficie);
  --cme-gris:    var(--cf-superficie-2);
  --cme-radio:   3px;
}

.cme {
  font-family: inherit;
  color: var(--cme-texto);
}
.cme *, .cme *::before, .cme *::after { box-sizing: border-box; }
/* Dentro del bloque nada va subrayado por defecto: las tarjetas, los botones y
   los relacionados son superficies, no enlaces de texto. El subrayado se
   devuelve al pasar por encima allí donde sí se lee como enlace. */
.cme a { text-decoration:none; }
.cme-migas a:hover,
.cme-hero__datos a:hover { text-decoration:underline; }

/* ── Encabezado ──────────────────────────────────────────────────────── */
.cme-encabezado { display:flex; align-items:center; gap:14px; margin:0 0 16px; }
.cme-encabezado::before,
.cme-encabezado::after { content:""; flex:1; height:1px; background:var(--cme-linea); }
.cme-titulo {
  margin:0; font-size:19px; font-weight:800; text-transform:uppercase;
  letter-spacing:.4px; text-align:center;
}
.cme-titulo .cme-conteo { color:var(--cme-suave); font-weight:600; }

/* ── Filtros ─────────────────────────────────────────────────────────── */
/* margin-top: separa del bloque que venga antes en la página (en
   /centro-de-eventos/ puede ser una barra del tema, pegada sin aire si no
   se le da espacio explícito aquí). */
.cme-filtros { margin:24px 0 18px; }

.cme-tabs {
  /* Una sola línea con scroll fino: `nowrap` a propósito, para que las pestañas
     no se apilen en dos filas cuando hay muchas. */
  display:flex; flex-wrap:nowrap; gap:4px; padding:0; list-style:none;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin; scrollbar-color:var(--cf-borde-fuerte) transparent;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  padding-bottom:4px; margin:0 0 8px;
}
.cme-tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; background:var(--cme-gris); color:var(--cme-texto);
  text-decoration:none; font-size:12.5px; font-weight:600;
  border-radius:var(--cme-radio); border:1px solid transparent; line-height:1.2;
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
.cme-tab:hover { background:var(--cf-superficie-2); color:var(--cme-texto); }
.cme-tab:focus-visible { outline:2px solid var(--cme-naranja); outline-offset:2px; }
.cme-tab[aria-current="true"] { background:var(--cme-naranja); color:var(--cf-sobre-brasa); }
.cme-tab[aria-current="true"]:hover { background:var(--cf-brasa-hover); }
.cme-tab .cme-n {
  font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:9px;
  background:var(--cf-superficie-2); line-height:1.5;
}
.cme-tab[aria-current="true"] .cme-n { background:var(--cf-claro-30); }

/* Barra de búsqueda compacta: una sola línea en escritorio.
   En colormusic.cl estas reglas llevaban y un selector de tres
   clases para ganarle al reset de <input>/<select>/<button> de Woodmart.
   Aquí no hay tema padre contra el que pelear: una clase basta. */
.cme-buscador {
  display:flex; gap:6px; align-items:stretch; flex-wrap:wrap;
  background:var(--cme-gris); padding:6px; border-radius:var(--cme-radio);
}
.cme-buscador input,
.cme-buscador select {
  height:34px; min-height:34px;
  padding:0 10px; font-size:12.5px; font-family:inherit;
  border:1px solid var(--cme-linea); border-radius:var(--cme-radio);
  background:var(--cme-fondo); color:var(--cme-texto);
  flex:1 1 130px; min-width:100px; cursor:pointer;
  box-sizing:border-box;
}
.cme-buscador input::placeholder { color:var(--cf-texto-tenue); }
.cme-buscador input:focus,
.cme-buscador select:focus {
  outline:2px solid var(--cme-naranja); outline-offset:-1px;
  border-color:transparent;
}
.cme-buscador .cme-q { flex:1 1 160px; min-width:120px; }

/* Botón. Una sola definición para todos los contextos: barra de filtros,
   .cme-hero__acciones y los sueltos de la ficha de evento ("Comprar
   entradas", "Abrir en Google Maps").
   En colormusic.cl esto estaba DUPLICADO: una versión acotada a
   `.cme-buscador .cme-boton` y esta base, idénticas salvo 1px
   de gap. La duplicación existía solo por especificidad frente a Woodmart. */
.cme-boton {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; min-height:34px; padding:0 16px;
  font-size:12.5px; font-weight:700; font-family:inherit;
  border:0; border-radius:var(--cme-radio); cursor:pointer; white-space:nowrap;
  background-color:var(--cme-naranja); color:var(--cf-sobre-brasa);
  transition:background-color .15s ease;
}
.cme-boton:hover { background-color:var(--cf-brasa-hover); color:var(--cf-sobre-brasa); }
.cme-boton:active { background-color:var(--cf-brasa-activo); }
.cme-boton svg { width:15px; height:15px; fill:currentColor; flex:0 0 auto; }
.cme-boton:focus-visible { outline:2px solid var(--cf-texto); outline-offset:2px; }
.cme-buscador .cme-boton--fantasma {
  background-color:transparent; color:var(--cme-suave); padding:0 10px;
  display:inline-flex; align-items:center;
}
.cme-buscador .cme-boton--fantasma:hover { background-color:var(--cf-sombra-tenue); color:var(--cme-texto); }
/* Solo ícono (Filtrar/Limpiar en la barra compacta) — cuadrado, sin texto,
   con title/aria-label para que siga siendo accesible. */
.cme-buscador .cme-boton--icono {
  width:34px; padding:0; flex:0 0 auto;
}
.cme-buscador .cme-boton--icono svg { width:14px; height:14px; fill:currentColor; }

.cme-activos { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; align-items:center; }
.cme-activos .cme-etiqueta { font-size:11.5px; color:var(--cme-suave); }
.cme-chip {
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  background:var(--cme-gris); padding:4px 9px; border-radius:13px;
  text-decoration:none; color:var(--cme-texto); line-height:1.4;
  transition:background .15s ease;
}
.cme-chip:hover { background:var(--cf-superficie-2); }
.cme-chip b { font-weight:700; }
.cme-chip .cme-x { color:var(--cme-suave); font-weight:700; font-size:13px; line-height:1; }
.cme-chip:hover .cme-x { color:var(--cf-error); }

/* ── Retícula ────────────────────────────────────────────────────────── */
/*
 * 🔴 CUATRO COLUMNAS Y SIN BARRA LATERAL, decisión de Mario: «al haber tanta
 * cartelera el sidebar estorba y quita espacio para que se muestren más
 * eventos». En una página cuyo contenido ES la lista, la columna de apoyo
 * compite con lo que se viene a ver.
 */
.cme-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

/* ── Tarjeta ─────────────────────────────────────────────────────────── */
.cme-card {
  display:flex; flex-direction:column; min-width:0;
  background:var(--cme-fondo); border:1px solid var(--cme-linea);
  border-radius:var(--cme-radio); overflow:hidden; position:relative;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.cme-card:hover { border-color:var(--cf-borde-fuerte); box-shadow:0 2px 10px var(--cf-sombra-tenue); }

.cme-card__img {
  display:block; position:relative; padding-top:80%;
  background:var(--cme-gris); overflow:hidden;
}
.cme-card__img img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .3s ease;
}
.cme-card:hover .cme-card__img img { transform:scale(1.03); }

/* Imagen de respaldo: gradiente + icono centrado. Al ser un SVG centrado con
   tamaño relativo, funciona igual en la tarjeta horizontal de escritorio que en
   la casi cuadrada de móvil. */
.cme-card__img--fallback {
  background:linear-gradient(135deg,var(--cf-marcador-1) 0%,var(--cf-marcador-2) 100%);
  display:flex; align-items:center; justify-content:center;
}
.cme-card__img--fallback svg {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:32%; max-width:56px; min-width:26px; height:auto;
  fill:var(--cf-claro-30);
}

.cme-card__cuerpo { display:flex; gap:10px; padding:10px 10px; flex:1; align-items:center; }

.cme-fecha { width:32px; flex:0 0 32px; text-align:center; color:var(--cme-naranja); padding-top:1px; }
.cme-fecha em { display:block; font-style:normal; }
.cme-fecha__dia { font-size:11px; text-transform:uppercase; line-height:1.1; font-weight:600; }
.cme-fecha__num { font-size:25px; font-weight:800; line-height:1.05; }
.cme-fecha__mes { font-size:11px; text-transform:uppercase; line-height:1.1; font-weight:600; }
/* El año, solo en los eventos que no son de este. Discreto pero legible: es un
   aviso, no un dato de primer orden. */
.cme-fecha__anio {
  display:block; font-size:10px; font-weight:700; font-style:normal;
  color:var(--cme-naranja); letter-spacing:.04em; margin-top:1px;
}

.cme-info { min-width:0; flex:1; }
.cme-card__titulo { font-size:1rem; font-weight:800; line-height:1.15; margin:0 0 7px; color:inherit; text-wrap:auto; }
.cme-card__titulo a { color:inherit; text-decoration:none; }
.cme-card__titulo a:hover { color:var(--cme-naranja); }

/*
 * Los datos, en rejilla de 2 columnas.
 *
 * ⚠️ EL ICONO YA NO SE BAJA 3 px PARA ALINEARSE CON LA PRIMERA LÍNEA (Mario, 06-sep-2026):
 *    `margin-top: 0`. Y su color pasa del naranja de eventos (`--cme-naranja`, que es
 *    `--cf-brasa`) al acento de la interfaz.
 */
.cme-datos { display:grid; grid-template-columns:14px 1fr; gap:3px 7px; align-items:start; color:var(--cme-suave); }
.cme-datos svg { width:12px; height:12px; fill:currentColor; color:var(--cf-acento); margin-top:0; }
.cme-datos span { font-size:11.5px; line-height:1.45; min-width:0; overflow-wrap:anywhere; }
.cme-datos a { color:inherit; text-decoration:none; border-bottom:1px solid var(--cf-borde); }
.cme-datos a:hover { color:var(--cme-naranja); border-bottom-color:currentColor; }


/* ── Vacío y paginación ──────────────────────────────────────────────── */
.cme-vacio {
  padding:38px 20px; text-align:center; background:var(--cme-gris);
  border-radius:var(--cme-radio); color:var(--cme-suave); font-size:13.5px;
}
.cme-vacio strong { display:block; font-size:15.5px; color:var(--cme-texto); margin-bottom:5px; }
.cme-vacio a { color:var(--cme-naranja); }

/*
 * ⏹️ AQUÍ VIVÍA `.cme-paginacion` — retirada el 06-sep-2026. La paginación es ahora una sola en
 *    todo el sitio (`.cf-paginacion`, en `main.css`), porque esta hoja no se encola en los
 *    listados ni en la búsqueda y una pieza compartida no puede depender de una hoja parcial.
 */

/* ── Móvil: layout compacto para no eternizar el scroll ──────────────── */
@media (max-width:768px) {
  .cme-grid { grid-template-columns:1fr; gap:7px; }

  .cme-card { flex-direction:row; align-items:stretch; }
  .cme-card__img { padding-top:0; width:auto; flex:0 0 70px; min-height:inherit; }
  .cme-card__img--fallback::after { font-size:26px; }
  .cme-card__cuerpo { padding:.5rem 1rem; gap:1em; align-items:center; }

  .cme-fecha { width:26px; flex:0 0 26px; }
  .cme-fecha__num { font-size:20px; }
  .cme-fecha__dia, .cme-fecha__mes { font-size:9.5px; }

  .cme-card__titulo { font-size:.9rem; margin-bottom:5px; text-wrap:auto; }
  .cme-datos { gap:2px 6px; }
  .cme-datos span { font-size:11px; line-height:1.35; }
  /* En móvil se ocultan los datos secundarios: la tarjeta cabe en un vistazo */
  .cme-datos .cme-secundario, .cme-datos .cme-secundario + span { display:none; }

  .cme-titulo { font-size:15.5px; }
  /*
   * 🔴 COMPACTO EN MÓVIL: LOS DESPLEGABLES VAN DE DOS EN DOS — Mario, 06-sep-2026.
   *
   * Cada `select` pedía `flex:1 1 100%`, o sea **una fila entera para cada uno**: con el
   * buscador, tres desplegables y los botones, la barra de la cartelera ocupaba cinco filas
   * antes del primer evento. A la mitad de ancho caben dos por fila y la barra baja a tres.
   *
   * ⚠️ El campo de búsqueda SÍ se queda a lo ancho: es donde se escribe, y a medio ancho no
   *    cabe ni «Movistar». Y los botones son cuadrados de 34 px desde que las tres vistas
   *    usan los de icono, así que caben al lado del último desplegable en vez de pedir su
   *    propia fila — por eso `flex:0 0 auto` y no `1 1 100%`.
   */
  /*
   * 🔴 LOS BOTONES COMPARTEN FILA CON EL BUSCADOR — Mario, 06-sep-2026: «los botones de buscar
   * y limpiar, que no pasen a otra fila; que estén en una misma junto a otro campo».
   *
   * Van los últimos en el marcado, así que para subirlos a la primera fila se reordena con
   * `order`: buscador, mandos y después los desplegables. Quedan dos filas en vez de tres, y
   * la lupa cae justo al lado del campo donde se escribe, que es donde se busca.
   *
   * ⚠️ `min-width:0` en el buscador: sin él no puede encogerse por debajo de su contenido y
   *    empuja los botones de vuelta a la fila siguiente — que es justo lo que se quita.
   */
  .cme-buscador { gap:5px; padding:5px; }
  .cme-buscador .cme-q { order:1; flex:1 1 auto; min-width:0; }
  .cme-acciones { order:2; display:flex; gap:5px; flex:0 0 auto; align-items:stretch; }
  .cme-buscador select { order:3; flex:1 1 calc(50% - 2.5px); min-width:0; }
  .cme-acciones .cme-boton { flex:0 0 auto; }

  .cme-tabs { gap:5px; margin-bottom:7px; }
  .cme-tab { padding:6px 11px; font-size:12px; }
}

/*
 * ⏹️ AQUÍ HABÍA `.cme-card__img { width:80px; flex:0 0 80px; min-height:80px }` bajo 380 px.
 *
 * 🔴 EXISTÍA PARA ACHICAR LA FOTO, y desde el 06-sep-2026 hacía lo contrario. El valor móvil
 * era 96 px y esta regla lo bajaba a 80 en las pantallas más estrechas; al pasar Mario el
 * valor móvil a **70**, esta subía la foto a 80 justo donde menos sitio hay — y anulaba su
 * ajuste en el móvil más común (375 px). Medido ese día: 70 px a 768 y 80 px a 375, con el
 * mismo componente.
 *
 * Se retira en vez de actualizarla: sin ella, 70 rige en todo el tramo móvil. Si algún día
 * hace falta un valor propio por debajo de 380, tiene que ser MENOR que el de 768, o vuelve
 * a ser una regla que contradice su propio motivo.
 */


/*
 * ── Bloques Acerca de / Fotos ─────────────────────────────────────────
 * 🔴 CON DIVISOR — pedido de Mario el 30-ago-2026: «títulos de bloque y
 * divisores siguiendo la línea del home», la misma línea que separa el
 * rótulo del contenido en `.cf-seccion__titulo` (main.css). Antes esta
 * ficha no llevaba ninguna.
 */
.cme-bloque { margin:0 0 20px; }
.cme-bloque__titulo {
  font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  margin:0 0 12px; padding-bottom:10px; color:var(--cme-texto);
  border-bottom:2px solid var(--cf-borde);
}


/* ── Tabs: el scroll fino ────────────────────────────────────────────── */
.cme-tabs::-webkit-scrollbar { height:4px; }
.cme-tabs::-webkit-scrollbar-track { background:transparent; }
.cme-tabs::-webkit-scrollbar-thumb { background:var(--cf-borde-fuerte); border-radius:2px; }
.cme-tabs::-webkit-scrollbar-thumb:hover { background:var(--cf-texto-tenue); }
.cme-tabs li { flex:0 0 auto; scroll-snap-align:start; }

/* La tarjeta entera es el enlace: sin enlaces anidados dentro */
.cme-card__enlace { position:absolute; inset:0; z-index:1; text-indent:-9999px; overflow:hidden; }

/* Respaldo fuera de la tarjeta (ficha de recinto y galería): mismo gradiente,
   sin icono, para que el hueco no quede en blanco. Lo aplica eventos.js. */
.cme-sinimg {
  background:linear-gradient(135deg,var(--cf-marcador-1) 0%,var(--cf-marcador-2) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DE RECINTO  (taxonomías lugar · productora · ticketera)
   Sin tabs ni filtros: la taxonomía ya es el filtro.
   ═══════════════════════════════════════════════════════════════════════════ */

.cme-migas { font-size:12px; color:var(--cme-suave); margin:0 0 14px; }
.cme-migas a { color:inherit; }
.cme-migas b { color:var(--cme-texto); font-weight:600; }

/* ── Bloques ─────────────────────────────────────────────────────────────── */
/*
 * 🔴 ACOTADOS A `.cme--recinto`, y no es cosmético.
 *
 * Estas dos reglas redefinen `.cme-bloque` y `.cme-bloque__titulo` para la ficha
 * de recinto —28 px de margen y titular de 16 px, frente a los 20 px y 13 px de
 * la vista de evento—. Estaban **en la raíz, sin acotar**, y como las tres vistas
 * abren con el mismo `.cme`, la última definición ganaba en TODAS: la cartelera
 * recibía los valores pensados para el recinto sin que nadie lo hubiera pedido.
 *
 * No daba error ni se veía roto: solo estaba mal y nadie podía saberlo leyendo la
 * hoja. Es exactamente el descontrol que este proyecto existe para evitar.
 */
.cme--recinto .cme-bloque { margin-bottom:28px; }
/* ⚠️ Sin divisor aquí, a propósito: Mario pidió la línea para la ficha de
   EVENTO, no tocó la de recinto — se conserva su aspecto de siempre. */
.cme--recinto .cme-bloque__titulo {
  margin:0 0 11px; font-size:16px; font-weight:800;
  text-transform:uppercase; letter-spacing:.03em;
  border-bottom:0; padding-bottom:0;
}
.cme-bloque__titulo .cme-conteo { font-weight:600; color:var(--cme-suave); }

/*
 * 🔴 «SOBRE EL EVENTO», CON MÁS AIRE — pedido de Mario el 30-ago-2026: el
 * texto iba pegado al título y al borde, sin caja. Se le da el mismo
 * tratamiento en cajita que el resto de bloques de la ficha (`.cme-dato`,
 * `.cme-mapa__pie`…), en vez de texto suelto sobre el fondo.
 */
.cme-bloque--sobre {
	background:var(--cme-fondo); border:1px solid var(--cme-linea);
	border-radius:var(--cme-radio); padding:24px 26px;
}
.cme-bloque--sobre .cme-bloque__titulo { border-bottom:0; padding-bottom:0; margin-bottom:14px; }

/* ── Acerca de: recorte a 5 líneas con «Ver más» ──────────────────────────
   El texto va COMPLETO en el HTML; solo se limita la altura. Nada se oculta
   con display:none, para no restarle peso de cara al buscador. */
.cme-acerca { position:relative; }
.cme-acerca__texto { font-size:15px; line-height:1.8; }
/* ⚠️ `color` en `var(--cme-suave)`, no en el `#ccc` literal que probó Mario:
   mismo tono, pero respeta el interruptor de tema (los tokens fuera de la
   raíz están prohibidos en este proyecto). */
.cme-acerca__texto p { margin:5px 0 15px; font-size:14px; line-height:1.4; color:var(--cme-suave); text-align:justify; }
.cme-acerca__texto p:last-child { margin-bottom:0; }
.cme-acerca[data-recortado="si"] .cme-acerca__texto {
  max-height:275px; overflow:hidden;
  /* Se desvanece con máscara, no con un gradiente de color: así no hay que
     acertar con el fondo de la página, que en el tema no siempre es blanco.
     Donde no haya soporte, el texto se corta sin degradado y se ve igual. */
  mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
}
.cme-vermas {
  display:inline-flex; align-items:center; gap:5px; margin-top:8px;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:700; color:var(--cme-naranja);
}
.cme-vermas svg {
  width:12px; height:12px; fill:currentColor; transition:transform .2s ease;
}
.cme-vermas[aria-expanded="true"] svg { transform:rotate(180deg); }
.cme-vermas:hover { text-decoration:underline; }
/* El display explícito de arriba pisa el [hidden] de la hoja del navegador,
   así que hay que repetirlo: si no, el botón se ve aunque el texto no desborde. */
.cme-vermas[hidden] { display:none; }

.cme-card--mini { flex-direction:row; align-items:stretch; opacity:.82; }
.cme-card--mini:hover { opacity:1; }
/*
 * 🔴 Reemplaza el truco `padding-top` de la tarjeta base (pensado para el ancho
 * variable de una rejilla) por `aspect-ratio:3/2` — aquí el ancho es fijo
 * (74px) y lo que hacía falta era una ALTURA definida para que el `<img>`
 * absoluto (`inset:0`) cubra la caja completa. 31-ago-2026.
 */
.cme-card--mini .cme-card__img {
  padding-top:0; width:74px; flex:0 0 74px; aspect-ratio:3/2; min-height:0;
}
.cme-card--mini .cme-card__cuerpo { padding:8px 10px; gap:8px; }
.cme-card--mini .cme-fecha { min-width:30px; }
.cme-card--mini .cme-fecha__num { font-size:17px; }
.cme-card--mini .cme-fecha__dia,
.cme-card--mini .cme-fecha__mes { font-size:8.5px; }
.cme-card--mini .cme-card__titulo {
  font-size:12.5px; line-height:1.35; -webkit-line-clamp:2;
}
.cme-card--mini .cme-datos span { font-size:11px; }
.cme-hero__acciones .cme-boton { gap:7px; }
.cme-hero__acciones .cme-boton svg { width:15px; height:15px; fill:currentColor; }
/* Un botón no va subrayado, ni siquiera cuando es un <a>. */
.cme-boton, .cme-boton:hover { text-decoration:none; }

@media (max-width:900px) {
}

@media (max-width:768px) {
  .cme-hero { flex-direction:column; gap:13px; padding:13px; }
  .cme-hero__titulo { font-size:22px; }
  .cme-hero__acciones { margin-top:4px; }
  .cme-hero__acciones .cme-boton { flex:1 1 auto; justify-content:center; }
  .cme-bloque { margin-bottom:22px; }
  .cme-bloque__titulo { font-size:14px; }
  .cme-card--mini .cme-card__img { width:62px; flex:0 0 62px; min-height:62px; }
}

/* ── Cabecera: ficha de directorio ────────────────────────────────────────
   Foto a la mitad y datos a la derecha en dos columnas. Cada dato es un campo
   ACF distinto — dirección, ciudad y país van separados, porque de lo
   contrario no hay forma de filtrar por país. */
/*
 * ⚠️ USABA `var(--cme-borde)`, UNA VARIABLE QUE NO EXISTE.
 *
 * Los tokens de esta hoja son `--cme-linea`, `--cme-fondo`, `--cme-gris`,
 * `--cme-naranja`, `--cme-suave`, `--cme-texto` y `--cme-radio`. No hay
 * `--cme-borde`, así que el borde del hero **no se pintaba**: CSS no da error con
 * una variable inexistente, simplemente descarta la declaración y sigue.
 *
 * Por eso el hero se veía sin el marco que sí tienen las demás cajas de la ficha.
 * Detectado el 30-ago-2026 comparando con el diseño.
 */
/*
 * 🔴 `border-radius:18px` PROPIO, no `--cme-radio` (3px) — 31-ago-2026.
 * `.event-hero` (`06-single-evento-edo-caroe.html`) y `.place-hero`
 * (`07-single-lugar-movistar-arena.html`) coinciden en `border-radius:18px`
 * los dos, verificado extrayendo el CSS real de ambos con Python — no un
 * caso aislado. `--cme-radio` sirve a otros 25 usos (tabs, inputs,
 * chips…) sin auditar hoy: se deja intacto, y esta cabecera lleva su
 * propio valor.
 */
.cme-hero {
  display:grid; grid-template-columns:50% 1fr; gap:0;
  background:var(--cme-fondo); border:1px solid var(--cme-linea);
  border-radius:18px; overflow:hidden; margin-bottom:26px;
}
/* Foto y crédito son UNA columna de la rejilla del hero: un hermano suelto caería
   a una fila implícita y partiría la cabecera en dos. */
.cme-hero__media { display:flex; flex-direction:column; min-width:0; }
.cme-hero__img {
  position:relative; margin:0; padding:0; border:0; cursor:zoom-in;
  background:var(--cme-gris); min-height:290px; display:block; width:100%; flex:1 1 auto;
}
/* El crédito de la foto. No es cortesía: es lo que baja el riesgo de una reclamación
   a «añade la firma», y la política de imágenes del proyecto se apoya en que se vea. */
.cme-hero__credito {
  margin:0; padding:6px 12px; font-size:.68rem; line-height:1.3;
  color:var(--cme-texto); opacity:.66;
  background:var(--cme-fondo); border-top:1px solid var(--cme-linea);
}
.cme-hero__img img { width:100%; height:100%; object-fit:cover; display:block; }
.cme-hero__lupa {
  position:absolute; right:10px; bottom:10px; width:30px; height:30px;
  border-radius:50%; background:var(--cf-velo); display:flex;
  align-items:center; justify-content:center; opacity:0; transition:opacity .18s ease;
}
.cme-hero__lupa svg { width:13px; height:13px; fill:var(--cf-sobre-oscuro); }
.cme-hero__img:hover .cme-hero__lupa, .cme-hero__img:focus-visible .cme-hero__lupa { opacity:1; }
.cme-hero__img--fallback {
  background:linear-gradient(135deg,var(--cf-marcador-1) 0%,var(--cf-marcador-2) 100%);
  display:flex; align-items:center; justify-content:center; cursor:default;
}
.cme-hero__img--fallback svg { width:22%; max-width:64px; height:auto; fill:var(--cf-claro-30); }

/*
 * 🔴 31-ago-2026 — CORREGIDO tras "no se parece": la estructura ya calzaba
 * con el mockup, pero el CSS REUTILIZADO de `.cme-hero*` traía valores
 * viejos, previos a esta pasada, y nunca se cotejaron contra el mockup real.
 * Valores exactos de `.event-info`/`.place-info` (ambos mockups coinciden
 * en ~28-30px de padding y ~42-43px de h1 — un solo valor compartido, ya
 * que las dos fichas usan esta misma clase base).
 */
.cme-hero__cuerpo { padding:28px 30px; display:flex; flex-direction:column; min-width:0; }
.cme-hero__tipo {
  margin:0 0 5px; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cme-naranja);
}
.cme-hero__titulo { margin:0 0 8px; font-size:42px; font-weight:800; line-height:1.05; }
.cme-hero__extracto {
  margin:0 0 20px; font-size:15px; line-height:1.55; color:var(--cf-texto-suave); max-width:560px;
}
/* Los datos van sueltos, sin columnas envolventes: el flujo por filas del grid
   los reparte solo. Con 5 campos quedan 3 y 2, no 4 y 1 — que es lo que pasaba
   al meterlos en dos contenedores fijos. */
.cme-hero__datos {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 22px;
  padding-top:20px; margin-top:4px; border-top:1px solid var(--cme-linea);
}
.cme-dato { display:flex; gap:8px; align-items:flex-start; min-width:0; }
.cme-dato svg {
  width:12px; height:12px; fill:currentColor; color:var(--cme-naranja);
  flex:0 0 12px; margin-top:3px;
}
.cme-dato__cuerpo { min-width:0; }
.cme-dato em {
  display:block; font-style:normal; font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--cme-suave);
}
.cme-dato span { display:block; font-size:13px; line-height:1.4; word-break:break-word; }
.cme-dato a { color:inherit; }
.cme-hero__acciones { display:flex; gap:1rem; flex-wrap:wrap; margin-top:auto; padding-top:16px; }

/* ── Galería: aguanta 1 foto o 30 ─────────────────────────────────────────
   Cada miniatura crece solo hasta un tope, así que con dos fotos no se estiran
   a media pantalla ni se deforman: la proporción la fija aspect-ratio. */
.cme-galeria { display:flex; flex-wrap:wrap; gap:8px; }
.cme-galeria__item {
  position:relative; flex:1 1 150px; max-width:210px; aspect-ratio:4/3;
  margin:0; padding:0; border:0; border-radius:5px; overflow:hidden;
  background:var(--cme-gris); cursor:zoom-in;
}
.cme-galeria__item img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.cme-galeria__item:hover img { transform:scale(1.05); }
.cme-galeria__mas {
  position:absolute; inset:0; background:var(--cf-velo); color:var(--cf-sobre-oscuro);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:800;
}

/* ── Carrusel de relacionados ─────────────────────────────────────────────
   Sin número de eventos: la base está incompleta y el dato engañaría. Tipo y
   ubicación identifican mejor el recinto. */
.cme-bloque__cabecera {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:11px; padding-bottom:10px; border-bottom:2px solid var(--cf-borde);
}
/* El divisor va en la CABECERA entera (título + «ver todos» + flechas), no
   en el título solo — si no, la línea mediría lo que mide el texto, no la
   fila completa, y se vería descolgada del resto. */
.cme-bloque__cabecera .cme-bloque__titulo { margin:0 auto 0 0; padding-bottom:0; border-bottom:0; }
.cme-carrusel__mandos { display:flex; gap:5px; flex:0 0 auto; }
.cme-flecha {
  width:28px; height:28px; border-radius:50%; border:1px solid var(--cme-linea);
  background:var(--cme-fondo); cursor:pointer; display:flex;
  align-items:center; justify-content:center; padding:0;
  transition:border-color .18s ease, background .18s ease;
}
.cme-flecha svg { width:10px; height:10px; fill:var(--cme-texto); }
.cme-flecha:hover:not(:disabled) { border-color:var(--cme-naranja); }
.cme-flecha:disabled { opacity:.35; cursor:default; }
.cme-carrusel {
  /* Cuántas tarjetas se ven a la vez; el ancho de cada una sale de aquí. */
  --cme-visibles:4; --cme-hueco:10px;
  display:flex; gap:var(--cme-hueco); overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  /* La barra se oculta —para eso están las flechas— pero el overflow sigue en
     auto: con `hidden` se perdería el arrastre con trackpad y el gesto táctil,
     que es como mucha gente recorre un carrusel. */
  scrollbar-width:none; -ms-overflow-style:none;
}
.cme-carrusel::-webkit-scrollbar { display:none; }
/* Carruseles con pocos elementos (recintos/productoras «relacionados»): sin
   flex-basis fijo ya no rellenan la fila, así que se centran en vez de
   quedar pegados a la izquierda con hueco vacío al lado — 31-ago-2026. */
.cme-carrusel--centrado { justify-content:center; }
/*
 * 🔴 SIN `flex:0 0 232px` NI FONDO PROPIO — corregido el 31-ago-2026 a
 * pedido de Mario: el ancho fijo estiraba la fila aunque hubiera pocos
 * elementos, y el fondo de la tarjeta se sumaba al de `.cme-rel__img`
 * formando una caja dentro de otra. Ahora se ajusta a su contenido y solo
 * `.cme-rel__img` (el retrato/ícono) lleva relleno.
 */
.cme-rel {
  flex:0 0 auto; scroll-snap-align:start;
  display:flex; gap:10px; align-items:center; padding:9px;
  border-radius:var(--cme-radio); color:inherit;
  transition:transform .18s ease;
}
.cme-rel:hover { transform:translateY(-1px); }
.cme-rel__img {
  flex:0 0 54px; width:54px; height:54px; border-radius:5px; overflow:hidden;
  background:linear-gradient(135deg,var(--cf-marcador-1) 0%,var(--cf-marcador-2) 100%);
  display:flex; align-items:center; justify-content:center;
}
.cme-rel__img img { width:100%; height:100%; object-fit:cover; }
.cme-rel__img svg { width:19px; height:19px; fill:var(--cf-claro-30); }
.cme-rel__cuerpo { min-width:0; }
.cme-rel__cuerpo b {
  display:block; font-size:13px; font-weight:700; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cme-rel__cuerpo em, .cme-rel__cuerpo i {
  display:block; font-style:normal; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cme-rel__cuerpo em { font-size:11px; color:var(--cme-naranja); font-weight:600; }
.cme-rel__cuerpo i { font-size:11px; color:var(--cme-suave); }

/* ── Modal de fotos ───────────────────────────────────────────────────────
   <dialog> nativo: cierra con Esc y atrapa el foco sin librerías. */
.cme-modal {
  border:0; padding:0; background:transparent; max-width:96vw; max-height:96vh;
  overflow:visible; color:var(--cf-sobre-oscuro);
}
.cme-modal::backdrop { background:var(--cf-velo-fuerte); }
.cme-modal__img {
  display:block; max-width:96vw; max-height:82vh; width:auto; height:auto;
  border-radius:4px; background:var(--cf-modal-fondo);
}
.cme-modal__cerrar, .cme-modal__nav {
  position:absolute; border:0; background:var(--cf-velo-suave); color:var(--cf-sobre-oscuro);
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease;
}
.cme-modal__cerrar:hover, .cme-modal__nav:hover { background:var(--cf-claro-30); }
.cme-modal__cerrar svg, .cme-modal__nav svg { width:14px; height:14px; fill:var(--cf-sobre-oscuro); }
.cme-modal__cerrar { top:-52px; right:0; }
.cme-modal__nav { top:50%; transform:translateY(-50%); }
.cme-modal__nav--prev { left:-52px; }
.cme-modal__nav--next { right:-52px; }
.cme-modal__nav[hidden] { display:none; }
.cme-modal__pie {
  margin:10px 0 0; font-size:12.5px; text-align:center; color:var(--cf-claro-80);
}
.cme-modal__pie em { font-style:normal; color:var(--cf-claro-50); margin-left:6px; }

@media (max-width:1000px) {
  .cme-hero { grid-template-columns:1fr; }
  .cme-hero__img { min-height:0; height:230px; }
}

@media (max-width:768px) {
  .cme-hero__img { height:190px; }
  .cme-hero__cuerpo { padding:15px 14px; }
  .cme-hero__titulo { font-size:22px; }
  .cme-hero__extracto { font-size:13px; margin-bottom:13px; }
  /*
   * ⚠️ DOS COLUMNAS TAMBIÉN EN MÓVIL. A una sola, los siete datos del recinto
   *    —dirección, ciudad, teléfono, email, web, Instagram y aforo— ocupaban más
   *    de una pantalla entera y empujaban la cartelera fuera de la vista. Son
   *    pares cortos de etiqueta y valor: caben de dos en dos. Es la distribución
   *    que pidió Mario el 30-ago-2026 en su propuesta para móvil.
   */
  .cme-hero__datos { grid-template-columns:repeat(2, minmax(0,1fr)); gap:11px 14px; }
  .cme-hero__acciones .cme-boton { flex:1 1 auto; justify-content:center; }
  .cme-galeria { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory;
                 scrollbar-width:thin; }
  .cme-galeria__item { flex:0 0 132px; max-width:none; scroll-snap-align:start; }
  .cme-carrusel__mandos { display:none; }
  .cme-modal__cerrar { top:-46px; right:0; width:36px; height:36px; }
  .cme-modal__nav { top:auto; bottom:-46px; transform:none; width:36px; height:36px; }
  .cme-modal__nav--prev { left:calc(50% - 46px); }
  .cme-modal__nav--next { right:calc(50% - 46px); }
  .cme-modal__pie { margin-top:52px; }
}

/* ── Carrusel: mismo componente para eventos y para recintos ──────────────
   En móvil deja de ser carrusel y pasa a lista, cortada en 6: en una pantalla
   estrecha, arrastrar una tira horizontal se lleva peor que recorrer una lista
   corta, y así el bloque nunca se vuelve infinito. */
.cme-carrusel .cme-card--mini { flex:0 0 250px; scroll-snap-align:start; }
.cme-carrusel .cme-card--mini .cme-card__img { width:78px; flex:0 0 78px; min-height:78px; }

/*
 * ⚠️ `.cme-mas` SE USA SOBRE DOS ETIQUETAS DISTINTAS, y esa es la causa de que unos
 *    enlaces salieran en una línea y otros en dos.
 *
 * En los carruseles es un `<p class="cme-mas">` con el `<a>` dentro, y la regla que
 * pone el enlace en `inline-flex` cuelga de `.cme-mas a`. En los encabezados que se
 * añadieron después, `.cme-mas` es **el propio `<a>`**: ahí esa regla no aplica, el
 * enlace se quedaba en `display:block` y el SVG caía bajo el texto — 32 px de alto en
 * vez de 21.
 *
 * Se cubren las dos formas en lugar de unificar el marcado, porque el `<p>` tiene
 * sentido donde el enlace va solo bajo el carrusel y el `<a>` donde va junto al
 * título.
 */
.cme-mas { margin:11px 0 0; font-size:13px; }
a.cme-mas {
  display:inline-flex; align-items:center; gap:5px; flex-wrap:nowrap;
  margin:0; color:var(--cme-naranja); font-weight:700; text-decoration:none;
}
a.cme-mas:hover { text-decoration:underline; }
a.cme-mas svg { width:11px; height:11px; flex:0 0 11px; fill:currentColor; }
.cme-mas a {
  display:inline-flex; align-items:center; gap:5px;
  color:var(--cme-naranja); font-weight:700;
}
.cme-mas a svg { width:9px; height:9px; fill:currentColor; }
.cme-mas a:hover { text-decoration:underline; }

/* El enlace al histórico cuando el carrusel no llega a mostrarse. */
.cme-mas--suelto {
  margin:0 0 26px; padding:11px 14px; background:var(--cme-gris);
  border-radius:var(--cme-radio); font-size:12.5px;
}

/*
 * 🔴 767, NO 768 — 06-sep-2026. Este corte estaba UN PÍXEL desalineado del de `main.css`, que
 * convierte `.cf-news-card` en fila con `max-width: 767px`. A 768 exacto no había ninguno de
 * los dos: el carrusel ya desactivado y la tarjeta todavía sin su fila. Medido ese día en
 * «Últimas noticias» de la ficha: piezas de **721×721** y 4.361 px de alto, contra los 111 px
 * por pieza de 375.
 *
 * ⚠️ 767/768 es la frontera que usa toda la maqueta móvil de `main.css`; los carruseles se
 *    alinean a ella, no al revés.
 */
@media (max-width:767px) {
  .cme-carrusel {
    display:grid; grid-template-columns:1fr; gap:7px;
    overflow:visible; scroll-snap-type:none; padding-bottom:0;
  }
  .cme-carrusel > * { flex:none; width:auto; }
  /*
   * Como mucho 6: lo demás está a un clic en el enlace del pie.
   *
   * 🔴 SALVO SI LA PISTA SE PAGINA, y no es un matiz: con `display:none` en los hijos 7 y 8, la
   *    segunda página de un carrusel de 8 habría salido con dos huecos —el `[hidden]` los
   *    enseñaría y esta regla los seguiría escondiendo—. Donde hay flechas no hace falta
   *    ningún tope: lo que no cabe está a un clic, que es justo lo que este recorte imitaba.
   */
  .cme-carrusel:not(.cf-cartelera-pag__pista) > *:nth-child(n+7) { display:none; }
  /* Y el archivo, 3: en una pantalla estrecha, lo que ya pasó no debe ocupar
     el mismo espacio que lo que todavía se puede ver. */
  .cme-carrusel--archivo:not(.cf-cartelera-pag__pista) > *:nth-child(n+4) { display:none; }
}

/* ── Ficha de evento ──────────────────────────────────────────────────────
   Reaprovecha la cabecera del recinto: el afiche es vertical, así que la
   columna de imagen se estrecha y no deja bandas laterales. */
.cme-hero--evento { grid-template-columns:38% 1fr; }
/*
 * 🔴 520px, NO 340px — 31-ago-2026. `.event-poster` en
 * `06-single-evento-edo-caroe.html` es `min-height:520px` (verificado con
 * Python, no al ojo). Con 340px el afiche quedaba visiblemente más achatado
 * que en el mockup.
 */
/* ⚠️ Ya no reserva 520 px de alto: se limita por arriba con `60vh` y se deja que el alto lo
   ponga la columna (`height:100%`). Mario, 06-sep-2026. */
.cme-hero--evento .cme-hero__img { min-height:0; max-height:60vh; height:100%; }

/* El estado manda: decide si la página sirve para algo ahora mismo. */
.cme-estado {
  /* align-self porque el cuerpo de la cabecera es flex column: sin esto el
     chip se estira a todo lo ancho en vez de ceñirse a su texto. */
  display:inline-flex; align-self:flex-start; align-items:center; gap:6px; margin:0 0 14px;
  padding:4px 11px; border-radius:20px;
  font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
}
.cme-estado::before {
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor;
}
.cme-estado--ok    { background:var(--cf-ok-fondo); color:var(--cf-ok); }
.cme-estado--aviso { background:var(--cf-aviso-fondo); color:var(--cf-aviso-texto); }
.cme-estado--no    { background:var(--cf-error-fondo); color:var(--cf-error); }
.cme-estado--fin   { background:var(--cme-gris); color:var(--cme-suave); }

/*
 * ⚠️ `border-radius:10px` y COLOR ROJO (`--cf-acento`) PROPIOS, no los de
 * `.cme-boton` base (`--cme-radio` 3px, `--cme-naranja`). Solo la usa el
 * botón "Comprar entradas" del hero de evento. Verificado en
 * `06-single-evento-edo-caroe.html`: `.btn.primary{background:var(--accent)}`
 * — rojo, no naranja. El mockup reserva `--accent2` (naranja, `--cf-brasa`
 * aquí) SOLO para eyebrows/fechas; todo botón/CTA (`.btn`, `.btn.primary`,
 * `.btn.ghost` — incluido "Abrir en Google Maps") usa `--accent` (rojo,
 * `--cf-acento`). `.cme-boton` base sigue en naranja a propósito: la usan
 * ~30 sitios (filtros, tabs, `.cme-boton--principal`…) sin auditar hoy —
 * cambiarla habría arreglado esto rompiendo lo otro sin comprobarlo.
 */
.cme-boton--grande {
  height:42px; padding:0 22px; font-size:14px; border-radius:10px;
  background-color:var(--cf-acento); color:var(--cf-acento-texto);
}
.cme-boton--grande:hover { background-color:var(--cf-acento-vivo); color:var(--cf-acento-texto); }
.cme-boton--grande:active { background-color:var(--cf-acento-vivo); }
.cme-precio {
  display:inline-flex; align-items:center; font-size:13px;
  font-weight:700; color:var(--cme-suave);
}
.cme-avisopasado {
  margin:0; padding:11px 14px; background:var(--cme-gris);
  border-radius:var(--cme-radio); font-size:12.5px; color:var(--cme-suave);
}
.cme-avisopasado a { color:var(--cme-naranja); font-weight:700; }

/* 🔴 UNA SOLA COLUMNA — Mario, 06-sep-2026. Antes eran dos (1.35fr para el mapa y 1
   para la ficha del recinto) «porque a partes iguales el mapa quedaba tan estrecho que
   no se distinguía ni la manzana». Apiladas, el mapa recupera el ancho entero y ese
   problema desaparece por otra vía: no hay nada que estrangule.
   ⚠️ Con esto sobra el `grid-template-columns:1fr` que el bloque de 768 repetía: ya no
      queda nada que anular ahí, y una regla que repite la base es una pista falsa. */
.cme-comollegar {
  display:grid; grid-template-columns:1fr; gap:14px; align-items:stretch;
  height:100%;
}
/* La ventana del mapa dentro de «Cómo llegar»: el iframe absoluto necesita SIEMPRE
   su contenedor recortador, o se despliega sobre la página entera. */
/* ⚠️ Más bajo que antes (230→190px) — pedido de Mario el 30-ago-2026: «el mapa
   no es necesario que sea tan alto». Sigue creciendo con `height:100%` si la
   ficha del recinto de al lado necesita más espacio. */
.cme-comollegar .cme-mapa__ventana { height:100%; min-height:190px; border-radius:var(--cme-radio); }
@media (max-width:768px) { .cme-comollegar .cme-mapa__ventana { min-height:170px; } }
/*
 * ── La tarjeta de «Cómo llegar»: UNA sola pieza ───────────────────────────
 * Rehecho el 31-ago-2026 contra las capturas de Mario: foto + nombre +
 * dirección completa en una fila, y el botón a todo el ancho debajo. Antes
 * eran tres piezas sueltas (la tarjeta de relacionados con su línea de
 * TIPO, un bloque «Dirección» aparte, y el botón) y «no quedaba bien».
 */
.cme-comollegar__datos {
  display:flex; flex-direction:column; gap:16px; align-items:stretch;
  justify-content:center;
  padding:16px; background:transparent; border-radius:var(--cme-radio);
  /* Sin fondo, la tarjeta necesita un borde que la delimite. Va con
     `--cf-borde-fuerte` porque `--cme-linea` casi no se ve sobre el fondo de la página. */
  border:1px solid var(--cf-borde-fuerte);
}
.cme-comollegar__tarjeta { display:flex; gap:13px; align-items:center; min-width:0; }
.cme-comollegar__foto {
  flex:0 0 64px; width:64px; height:64px; border-radius:var(--cme-radio);
  overflow:hidden; background:var(--cme-fondo);
}
.cme-comollegar__foto img { width:100%; height:100%; object-fit:cover; display:block; }
.cme-comollegar__foto--vacia { display:grid; place-items:center; }
.cme-comollegar__foto--vacia svg { width:22px; height:22px; fill:var(--cf-claro-30); }
.cme-comollegar__info { display:flex; flex-direction:column; gap:4px; min-width:0; }
.cme-comollegar__info strong { font-size:15.5px; font-weight:800; color:var(--cme-texto); line-height:1.2; }
.cme-comollegar__info span { font-size:12.5px; color:var(--cme-suave); line-height:1.4; }
.cme-comollegar__boton { width:100%; justify-content:center; }

@media (max-width:768px) {
  .cme-hero--evento { grid-template-columns:1fr; }
  .cme-hero--evento .cme-hero__img { min-height:0; height:auto; }
  .cme-hero--evento .cme-hero__img img { object-fit:contain; background:var(--cf-marcador-2); }
  .cme-hero__acciones .cme-boton--grande { flex:1 1 100%; }
  /* ⏹️ Aquí estaba `.cme-comollegar { grid-template-columns:1fr }`. Se retiró el
     06-sep-2026: la base ya va a una columna en todas las anchuras. */
}

/* Muestra de estados: solo para la maqueta, no va al tema. */
.cme-estados-muestra { display:flex; gap:8px; flex-wrap:wrap; }
.cme-estados-muestra .cme-estado { margin:0; }
.cme-nota-estados { margin:0 0 11px; font-size:12.5px; color:var(--cme-suave); }

/* ── Respaldo de imagen por tipo de recinto ───────────────────────────────
   Con la mayoría de fichas sin foto propia, el respaldo tiene que decir de
   un vistazo si es un estadio o un bar. Un mismo icono para todo no lo dice. */
.cme-sinfoto--estadio::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M256%200c-52%200-99%204-133%2011-17%203-33%208-45%2016-13%208-26%2021-26%2040%200%2018%2013%2032%2026%2040%2012%208%2028%2013%2045%2016%2034%207%2081%2011%20133%2011s99-4%20133-11c17-3%2033-8%2045-16%2013-8%2026-22%2026-40%200-19-13-32-26-40-12-8-28-13-45-16-34-7-81-11-133-11zM52%20149v51c0%2018%2013%2032%2026%2040%2012%208%2028%2013%2045%2016%2034%207%2081%2011%20133%2011s99-4%20133-11c17-3%2033-8%2045-16%2013-8%2026-22%2026-40v-51c-14%208-30%2014-48%2018-38%208-88%2012-156%2012s-118-4-156-12c-18-4-34-10-48-18zm0%20128v51c0%2018%2013%2032%2026%2040%2012%208%2028%2013%2045%2016%2034%207%2081%2011%20133%2011s99-4%20133-11c17-3%2033-8%2045-16%2013-8%2026-22%2026-40v-51c-14%208-30%2014-48%2018-38%208-88%2012-156%2012s-118-4-156-12c-18-4-34-10-48-18z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--teatro::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H320c35.3%200%2064%2028.7%2064%2064V208c0%2079.5-64.5%20144-144%20144H144C64.5%20352%200%20287.5%200%20208V96zm112%2048a24%2024%200%201%200%200%2048%2024%2024%200%201%200%200-48zm136%2024a24%2024%200%201%200%2048%200%2024%2024%200%201%200-48%200zM128%20248c0%2013%2022%2032%2064%2032s64-19%2064-32c0-9-10-13-22-9-13%204-27%206-42%206s-29-2-42-6c-12-4-22%200-22%209zM480%20128c17.7%200%2032%2014.3%2032%2032v96c0%2079.5-64.5%20144-144%20144-6%200-12-.4-18-1.1%2030-25%2051-59.9%2058-99.4%208-2%2015-6%2021-11%2012-9%2019-22%2019-37V160c0-17.7%2014.3-32%2032-32z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--club::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M256%200a256%20256%200%201%201%200%20512%20256%20256%200%201%201%200-512zM134%20134c-46%2046-58%20112-37%20168l205-205c-56-21-122-9-168%2037zm244%20244c46-46%2058-112%2037-168L210%20415c56%2021%20122%209%20168-37z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--discoteca::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M256%200a256%20256%200%201%201%200%20512%20256%20256%200%201%201%200-512zM134%20134c-46%2046-58%20112-37%20168l205-205c-56-21-122-9-168%2037zm244%20244c46-46%2058-112%2037-168L210%20415c56%2021%20122%209%20168-37z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--bar::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M32%200C19%200%208%208%203%2020s-2%2025%207%2034L224%20273V448H160c-18%200-32%2014-32%2032s14%2032%2032%2032h64%2064%2064c18%200%2032-14%2032-32s-14-32-32-32H288V273L502%2054c9-9%2012-22%207-34S493%200%20480%200H32zM145%2096L109%2064h294l-36%2032H145z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--restaurante::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M416%200c-17%200-30%2012-32%2028l-24%20214c-3%2025%2017%2046%2042%2046h30V480c0%2018%2014%2032%2032%2032s32-14%2032-32V0H416zM64%2016C64%207%2057%200%2048%200S32%207%2032%2016V128H16c-9%200-16%207-16%2016s7%2016%2016%2016h16%2096%2016c9%200%2016-7%2016-16s-7-16-16-16H144V16c0-9-7-16-16-16s-16%207-16%2016V128H96V16zM80%20320H48c-26%200-48-22-48-48V192H176v80c0%2026-22%2048-48%2048H96v160c0%2018-14%2032-32%2032s-32-14-32-32V320z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--casino::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M311%2034c22-22%2057-22%2079%200l88%2088c22%2022%2022%2057%200%2079L344%20335c-22%2022-57%2022-79%200l-88-88c-22-22-22-57%200-79L311%2034zM64%20192H175l17%2017c35%2035%2091%2035%20126%200l17-17H448c35%200%2064%2029%2064%2064V448c0%2035-29%2064-64%2064H64c-35%200-64-29-64-64V256c0-35%2029-64%2064-64z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--centro-cultural::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M243%202c8-3%2017-3%2025%200L492%2082c17%206%2027%2024%2024%2042s-19%2030-37%2030H33C15%20154%202%20141%200%20124S6%2088%2023%2082L243%202zM64%20192h64V384h40V192h64V384h48V192h64V384h40V192h64V386c0%201%200%201%200%202%200%200%200%200%200%200l16%2012c10%208%2015%2022%2011%2034s-15%2022-28%2022H32c-13%200-25-8-30-22s1-26%2011-34l16-12c0%200%200%200%200%200%200-1%200-1%200-2V192z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--aire-libre::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M210%2012c8-15%2030-15%2038%200L406%20292c8%2015-2%2033-19%2033H241V464c0%2018-14%2032-32%2032s-32-14-32-32V325H41c-17%200-27-18-19-33L210%2012z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--centro-comercial::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M160%20112c0-35%2029-64%2064-64s64%2029%2064%2064v48H160V112zm-48%2048H48c-27%200-48%2021-48%2048V416c0%2053%2043%2096%2096%2096H352c53%200%2096-43%2096-96V208c0-27-21-48-48-48H336V112C336%2050%20286%200%20224%200S112%2050%20112%20112v48zm24%2096a24%2024%200%201%201%200%2048%2024%2024%200%201%201%200-48zm152%2024a24%2024%200%201%201%2048%200%2024%2024%200%201%201-48%200z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--sala-de-conciertos::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M256%200a256%20256%200%201%201%200%20512%20256%20256%200%201%201%200-512zM134%20134c-46%2046-58%20112-37%20168l205-205c-56-21-122-9-168%2037zm244%20244c46-46%2058-112%2037-168L210%20415c56%2021%20122%209%20168-37z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--sala-de-eventos::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M243%202c8-3%2017-3%2025%200L492%2082c17%206%2027%2024%2024%2042s-19%2030-37%2030H33C15%20154%202%20141%200%20124S6%2088%2023%2082L243%202zM64%20192h64V384h40V192h64V384h48V192h64V384h40V192h64V386c0%201%200%201%200%202%200%200%200%200%200%200l16%2012c10%208%2015%2022%2011%2034s-15%2022-28%2022H32c-13%200-25-8-30-22s1-26%2011-34l16-12c0%200%200%200%200%200%200-1%200-1%200-2V192z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--anfiteatro::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H320c35.3%200%2064%2028.7%2064%2064V208c0%2079.5-64.5%20144-144%20144H144C64.5%20352%200%20287.5%200%20208V96zm112%2048a24%2024%200%201%200%200%2048%2024%2024%200%201%200%200-48zm136%2024a24%2024%200%201%200%2048%200%2024%2024%200%201%200-48%200zM128%20248c0%2013%2022%2032%2064%2032s64-19%2064-32c0-9-10-13-22-9-13%204-27%206-42%206s-29-2-42-6c-12-4-22%200-22%209zM480%20128c17.7%200%2032%2014.3%2032%2032v96c0%2079.5-64.5%20144-144%20144-6%200-12-.4-18-1.1%2030-25%2051-59.9%2058-99.4%208-2%2015-6%2021-11%2012-9%2019-22%2019-37V160c0-17.7%2014.3-32%2032-32z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--recinto-deportivo::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M256%200c-52%200-99%204-133%2011-17%203-33%208-45%2016-13%208-26%2021-26%2040%200%2018%2013%2032%2026%2040%2012%208%2028%2013%2045%2016%2034%207%2081%2011%20133%2011s99-4%20133-11c17-3%2033-8%2045-16%2013-8%2026-22%2026-40%200-19-13-32-26-40-12-8-28-13-45-16-34-7-81-11-133-11zM52%20149v51c0%2018%2013%2032%2026%2040%2012%208%2028%2013%2045%2016%2034%207%2081%2011%20133%2011s99-4%20133-11c17-3%2033-8%2045-16%2013-8%2026-22%2026-40v-51c-14%208-30%2014-48%2018-38%208-88%2012-156%2012s-118-4-156-12c-18-4-34-10-48-18zm0%20128v51c0%2018%2013%2032%2026%2040%2012%208%2028%2013%2045%2016%2034%207%2081%2011%20133%2011s99-4%20133-11c17-3%2033-8%2045-16%2013-8%2026-22%2026-40v-51c-14%208-30%2014-48%2018-38%208-88%2012-156%2012s-118-4-156-12c-18-4-34-10-48-18z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--universidad::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M243%202c8-3%2017-3%2025%200L492%2082c17%206%2027%2024%2024%2042s-19%2030-37%2030H33C15%20154%202%20141%200%20124S6%2088%2023%2082L243%202zM64%20192h64V384h40V192h64V384h48V192h64V384h40V192h64V386c0%201%200%201%200%202%200%200%200%200%200%200l16%2012c10%208%2015%2022%2011%2034s-15%2022-28%2022H32c-13%200-25-8-30-22s1-26%2011-34l16-12c0%200%200%200%200%200%200-1%200-1%200-2V192z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--hotel::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M160%20112c0-35%2029-64%2064-64s64%2029%2064%2064v48H160V112zm-48%2048H48c-27%200-48%2021-48%2048V416c0%2053%2043%2096%2096%2096H352c53%200%2096-43%2096-96V208c0-27-21-48-48-48H336V112C336%2050%20286%200%20224%200S112%2050%20112%20112v48zm24%2096a24%2024%200%201%201%200%2048%2024%2024%200%201%201%200-48zm152%2024a24%2024%200%201%201%2048%200%2024%2024%200%201%201-48%200z%22/%3E%3C/svg%3E"); }
.cme-sinfoto--multiuso::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%3E%3Cpath%20d%3D%22M243%202c8-3%2017-3%2025%200L492%2082c17%206%2027%2024%2024%2042s-19%2030-37%2030H33C15%20154%202%20141%200%20124S6%2088%2023%2082L243%202zM64%20192h64V384h40V192h64V384h48V192h64V384h40V192h64V386c0%201%200%201%200%202%200%200%200%200%200%200l16%2012c10%208%2015%2022%2011%2034s-15%2022-28%2022H32c-13%200-25-8-30-22s1-26%2011-34l16-12c0%200%200%200%200%200%200-1%200-1%200-2V192z%22/%3E%3C/svg%3E"); }

.cme-sinfoto {
  background:linear-gradient(135deg,var(--cf-marcador-1) 0%,var(--cf-marcador-2) 100%);
  position:relative;
}
.cme-sinfoto::after {
  content:''; position:absolute; inset:0;
  background-repeat:no-repeat; background-position:center;
  background-size:min(34%,58px);
}

/* La rejilla de cartelera baja de columnas por pasos, no de cuatro a una. */
@media (max-width: 1200px) { .cme-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px)  { .cme-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
/*
 * 🔴 UNA SOLA COLUMNA POR DEBAJO DE 700 px.
 *
 * La tarjeta ya es horizontal —afiche, fecha y texto en fila—, así que a dos
 * columnas en un móvil cada una se queda en unos 200 px y el título se parte en
 * cinco líneas de dos palabras. Mario lo llamó «ahorcados» el 30-ago-2026, y
 * apuntó que colormusic.cl lo resuelve con una sola columna: a lo ancho, la misma
 * tarjeta se lee de un vistazo.
 */
@media (max-width: 700px)  { .cme-grid { grid-template-columns:1fr; } }

/* ── Directorio de taxonomía (productoras · ticketeras) ──────────────────────
   Una rejilla de nombres con su número de eventos. Sin imagen: estas taxonomías
   no la tienen, y un hueco gris repetido noventa veces no informa de nada. */
.cme-directorio {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px;
}
.cme-directorio__enlace {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:12px 14px; background:var(--cme-fondo);
  border:1px solid var(--cme-linea); border-radius:var(--cme-radio);
  text-decoration:none; color:var(--cme-texto);
  transition:border-color .15s ease, background .15s ease;
}
.cme-directorio__enlace:hover { border-color:var(--cme-naranja); background:var(--cme-gris); }
.cme-directorio__nombre { font-weight:700; font-size:14px; line-height:1.25; min-width:0; }
.cme-directorio__conteo { font-size:11.5px; color:var(--cme-suave); white-space:nowrap; }

/* ── (retirado: el historial pasó a círculos, ver .cme-quienes) ──────────────
   Historial del recinto: quién ha tocado ahí ─────────────────────────────────
   Texto, no tarjetas: es contexto y contenido citable, no cartelera. En columnas
   para que sesenta nombres no se conviertan en sesenta renglones. */
.cme-historial__lista {
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:26px;
}
.cme-historial__lista li {
  break-inside:avoid; padding:5px 0; font-size:13.5px; line-height:1.4;
  border-bottom:1px solid var(--cme-linea);
}
.cme-historial__lista a { color:var(--cme-texto); text-decoration:none; font-weight:600; }
.cme-historial__lista a:hover { color:var(--cme-naranja); text-decoration:underline; }
.cme-historial__cuando { color:var(--cme-suave); font-weight:400; white-space:nowrap; }
@media (max-width:700px) { .cme-historial__lista { columns:1; } }

/* ── Dos columnas dentro de la ficha ─────────────────────────────────────────
   «Acerca de» con el mapa, y la cartelera con las noticias. La segunda columna es
   más estrecha porque es contexto, no el asunto de la página. */
/*
 * ⚠️ `stretch`, NO `start`. Las dos columnas son cajas y deben medir lo mismo.
 *
 * Con `start`, la caja de «Acerca de» se quedaba en la altura de su texto —dos
 * líneas en los recintos sin descripción escrita, que son 207 de 213— mientras el
 * mapa medía 320 px al lado. El resultado era un **hueco de unos 265 px** con la
 * columna izquierda vacía. Igualadas, se leen como dos piezas del mismo bloque, que
 * es como están en el diseño.
 */
.cme-dosc { display:grid; grid-template-columns:minmax(0,2.05fr) minmax(0,1fr); gap:22px; align-items:stretch; margin-bottom:22px; }
.cme-dosc--solo { grid-template-columns:1fr; }
/* Las dos columnas se estiran a la misma altura y reparten su contenido, para que los
   pies de los dos bloques queden a la misma línea en vez de flotar a media caja. */
.cme-dosc > .cme-bloque {
  margin-bottom:0; display:flex; flex-direction:column;
  height:100%; justify-content:space-between;
}
@media (max-width:900px) { .cme-dosc { grid-template-columns:1fr; } }

/* ── «Acerca de» como caja ───────────────────────────────────────────────────
   Fondo y borde, igual que el mapa de al lado: en el diseño las dos columnas de
   esta fila son cajas, no texto suelto sobre el fondo de la página. */
#acerca {
  padding:16px 18px; background:var(--cme-fondo);
  border:1px solid var(--cme-linea); border-radius:var(--cme-radio);
}
#acerca .cme-acerca { flex:1; }

/* ── El mapa ─────────────────────────────────────────────────────────────────
   OpenStreetMap y no Google: sin cookies de rastreo, sin clave de API y sin cuota
   que se agote. El iframe va con carga diferida: está a media página. */
/*
 * 🔴 MAPA EN OSCURO CON UN FILTRO, no cambiando de proveedor.
 *
 * OSM sirve sus teselas en claro y no tiene tema oscuro en el embed. Las
 * alternativas eran cargar otro proveedor de teselas —más dependencias, y algunas
 * piden clave— o invertir la imagen aquí.
 *
 * `invert(1) hue-rotate(180deg)` es el truco de siempre: invierte la luminosidad
 * pero devuelve los tonos a su sitio, así que el mapa queda oscuro y el agua sigue
 * siendo azul. Con el contraste bajado, las calles dejan de brillar y el marcador
 * naranja se lee encima.
 *
 * ⚠️ Solo en modo oscuro. En claro el mapa va tal cual, o saldría en negativo.
 */
/* ── El mapa: una ventana que recorta el iframe ──────────────────────────────
 *
 * OSM incrusta controles de zoom y dos líneas de atribución que no se pueden quitar
 * por parámetro y se comían un tercio del alto. El iframe se agranda 46 px por lado
 * y se desplaza: lo suyo queda fuera del recorte y el marcador sigue centrado.
 */
.cme-mapa { display:flex; flex-direction:column; }
.cme-mapa__ventana {
  position:relative; overflow:hidden; flex:1; min-height:200px;
  border-radius:var(--cme-radio) var(--cme-radio) 0 0;
  background:var(--cme-gris);
}
.cme-mapa__marco {
  position:absolute; inset:-46px; width:calc(100% + 92px); height:calc(100% + 92px);
  border:0; display:block;
  filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.75);
}
:root[data-theme="light"] .cme-mapa__marco { filter:none; }

/* El nombre bajo el marcador, centrado: el pin del mapa señala y el rótulo dice qué. */
.cme-mapa__rotulo {
  position:absolute; left:50%; top:calc(50% + 20px); transform:translateX(-50%);
  z-index:2; pointer-events:none; white-space:nowrap;
  font-size:13px; font-weight:700; color:var(--cme-texto);
  text-shadow:0 1px 3px var(--cf-sombra), 0 0 8px var(--cf-sombra);
}

/*
 * ── Mapa GENÉRICO — sin coordenadas, respaldo del 30-ago-2026 ────────────
 * No apunta a ningún punto real: el mapa de fondo va OPACO (no es
 * información, es ambientación) y el pin es decorativo, amarillo —
 * distinto del naranja de marca, para que no se confunda con un marcador
 * real cuando SÍ hay coordenadas.
 */
.cme-mapa__ventana--generico .cme-mapa__marco { opacity:.4; }
.cme-mapa__ventana--generico::after {
  /*
   * ⚠️ SIN VELO DESDE EL 06-sep-2026, PERO LA CAPA SE QUEDA — y no es un descuido.
   *
   * Llevaba `var(--cf-velo)` para subir el contraste del pin sobre el mapa apagado;
   * Mario lo quitó. La capa sigue haciendo falta transparente: cubre el `<iframe>` del
   * mapa e impide que se lleve el desplazamiento y el arrastre de la página. Borrar la
   * regla devolvería ese gesto al iframe.
   */
  content:""; position:absolute; inset:0; z-index:1;
  background:transparent;
}
.cme-mapa__pin-generico {
  position:absolute; left:50%; top:calc(50% - 14px); transform:translate(-50%, -100%);
  z-index:2; pointer-events:none;
}
.cme-mapa__pin-generico svg { width:30px; height:30px; fill:var(--cf-amarillo-pin); filter:drop-shadow(0 2px 4px var(--cf-sombra-tenue)); }
.cme-mapa__rotulo--generico { top:calc(50% + 6px); font-size:14px; }

/* La fila de abajo, dentro de la misma caja que el mapa. */
.cme-mapa__pie {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0; padding:12px 14px;
  background:var(--cme-fondo);
  border:1px solid var(--cme-linea); border-top:0;
  border-radius:0 0 var(--cme-radio) var(--cme-radio);
}
.cme-mapa__donde { display:flex; align-items:center; gap:9px; min-width:0; }
.cme-mapa__donde > svg { width:15px; height:15px; flex:0 0 15px; fill:currentColor; color:var(--cme-naranja); }
.cme-mapa__donde em {
  display:block; font-style:normal; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--cme-suave); margin-bottom:1px;
}
.cme-mapa__donde > span { min-width:0; font-size:13.5px; font-weight:650; line-height:1.2; }
.cme-mapa__pie .cme-boton { flex:0 0 auto; }
@media (max-width:520px) {
  .cme-mapa__pie { flex-wrap:wrap; }
  .cme-mapa__pie .cme-boton { flex:1 0 100%; justify-content:center; }
}

/* ── El aviso de publicar evento ─────────────────────────────────────────────
   Quien programa en este recinto es justamente quien está leyendo esta página. */
.cme-aviso {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:20px 0; padding:18px 20px;
  background:var(--cme-gris); border:1px solid var(--cme-linea); border-radius:var(--cme-radio);
}
.cme-aviso__icono {
  display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px;
  border-radius:var(--cme-radio); background:var(--cme-naranja); color:var(--cf-sobre-brasa);
}
.cme-aviso__icono svg { width:22px; height:22px; }
.cme-aviso__cuerpo { flex:1 1 240px; min-width:0; }
.cme-aviso__cuerpo strong { display:block; font-size:15px; }
/*
 * ── El aviso en móvil ────────────────────────────────────────────────────────
 * En fila, el titular se parte en cuatro líneas de dos palabras junto a un icono
 * de 44 px y el botón queda descolgado. Apilado: icono y texto arriba, botón
 * centrado debajo a su ancho.
 */
.cme-aviso__cuerpo span { font-size:13px; color:var(--cme-suave); }

@media (max-width:640px) {
  .cme-aviso { align-items:flex-start; gap:14px; padding:18px; }
  .cme-aviso__icono { flex:0 0 52px; width:52px; height:52px; }
  .cme-aviso__icono svg { width:26px; height:26px; }
  .cme-aviso__cuerpo { flex:1 1 160px; }
  .cme-aviso__cuerpo strong { font-size:21px; line-height:1.15; }
  .cme-aviso__cuerpo span { font-size:14px; line-height:1.3; }
  .cme-aviso .cme-boton { flex:1 0 100%; justify-content:center; margin-top:4px; }
}

/* ── La distribución de la ficha: filas de dos columnas ──────────────────────
 *
 * 🔴 La columna derecha NO es una barra lateral: cambia en cada fila. El mapa va
 * junto a «Acerca de», las noticias junto a la cartelera y los tipos junto a los
 * recintos similares. Cada bloque responde a lo que tiene al lado, que es lo que
 * distingue esta distribución de una barra genérica repetida.
 */
/*
 * ⚠️ `stretch`, NO `start` — por lo mismo que en `.cme-dosc`.
 *
 * En un recinto sin eventos anunciados la columna izquierda se queda en el aviso de
 * «no hay eventos» —127 px— mientras las cinco noticias de al lado miden 545. Medido
 * el 30-ago-2026 en Teatro Azares: **418 px de agujero**. Igualadas, la caja del
 * aviso crece con su fondo y la fila se lee como un bloque, no como un descuido.
 */
.cme-fila {
  display:grid; grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);
  gap:22px; align-items:stretch; margin-bottom:22px;
}
.cme-fila > .cme-bloque { display:flex; flex-direction:column; }
/* El aviso de «sin eventos» llena la caja en vez de dejar el hueco arriba. */
.cme-fila .cme-vacio { flex:1; display:flex; flex-direction:column; justify-content:center; }
.cme-fila > .cme-bloque, .cme-fila > div > .cme-bloque { margin-bottom:0; }

/*
 * 🔴 TRES COLUMNAS DENTRO DE LA FILA, no las cuatro del archivo.
 *
 * La rejilla base es de cuatro porque en la cartelera dispone de la pantalla entera.
 * Aquí vive en la columna izquierda de la ficha —716 px de 1088— y esas cuatro
 * columnas quedaban en **168 px cada una**: el afiche se pixela y el título se parte
 * en cinco líneas.
 *
 * Y con tres cuadra el reparto: la ficha pinta 6 eventos, que son **dos filas
 * exactas**. Con cuatro quedaba una fila de cuatro y otra de dos, coja.
 */
.cme-fila .cme-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:1100px) { .cme-fila .cme-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:700px)  { .cme-fila .cme-grid { grid-template-columns:1fr; } }
@media (max-width:900px) { .cme-fila { grid-template-columns:1fr; gap:18px; } }

/* ── Los bloques de la columna derecha ──────────────────────────────────── */
.cme-lado { display:grid; gap:22px; align-content:start; }
.cme-lado > .cme-bloque { margin-bottom:0; }

.cme-lado__cab {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:10px; padding-bottom:7px; border-bottom:2px solid var(--cme-linea);
}
.cme-lado__cab .cme-bloque__titulo { margin:0; }
.cme-lado__mas { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; font-size:12px; color:var(--cme-naranja); text-decoration:none; white-space:nowrap; }
.cme-lado__mas:hover { text-decoration:underline; }

.cme-notas { list-style:none; margin:0; padding:0; }
.cme-notas__item + .cme-notas__item { border-top:1px solid var(--cme-linea); }
.cme-notas__enlace {
  display:grid; grid-template-columns:70px minmax(0,1fr); gap:11px; align-items:center;
  padding:10px 0; text-decoration:none; color:var(--cme-texto);
}
.cme-notas__foto { display:block; border-radius:var(--cme-radio); overflow:hidden; aspect-ratio:1/1; background:var(--cme-gris); }
.cme-notas__foto img { width:100%; height:100%; object-fit:cover; display:block; }
.cme-notas__seccion {
  display:block; font-style:normal; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--cme-naranja); margin-bottom:3px;
}
/* ⚠️ 1.2 y no 1.32: son titulares de tres o cuatro líneas en una columna
   estrecha, y con más interlineado el bloque se estira sin ganar legibilidad. */
/* ⚠️ `display:block` explícito: es un <span> dentro de un enlace en grid, y como
   elemento en línea el `line-height` no le aplicaba — las líneas del titular
   seguían separadas pese a bajarlo a 1.16. */
.cme-notas__titulo { display:block; font-size:13px; font-weight:650; line-height:1.16; }
.cme-notas__enlace:hover .cme-notas__titulo { color:var(--cme-naranja); }

/*
 * 🔴 `.cme-listado` / `.cme-linea*` SE MUDARON A `assets/css/main.css` el
 * 30-ago-2026: la Cartelera de la PORTADA también los necesita (mockup de
 * Mario: lista en vez de carrusel en móvil) y la portada no carga esta hoja
 * a propósito —43 KB en la página más visitada del sitio—. Un componente que
 * cruza esa frontera pertenece a la hoja base, no a las dos.
 */


/*
 * ── Mapa y «cómo llegar» en móvil ───────────────────────────────────────────
 */
@media (max-width:640px) {
  /*
   * 🔴 SE ACORTA LA VENTANA, NO EL IFRAME — corregido el 30-ago-2026.
   *
   * Llevaba `.cme-mapa__marco { height:170px }`, un alto FIJO sobre un
   * elemento que además tiene `position:absolute; inset:-46px` (el truco
   * que agranda el iframe 46px por lado para que el recorte del padre
   * esconda los controles de zoom y la atribución de OSM, documentado más
   * arriba). Un `height` explícito gana sobre el alto implícito de
   * `top`+`bottom` del `inset`: el iframe dejaba de ser más grande que su
   * ventana, el recorte perdía sentido, y la atribución de OSM aparecía
   * desbordando el recuadro. Se acorta la VENTANA (`.cme-mapa__ventana`) y
   * el marco —que sigue siendo `calc(100% + 92px)`— se reduce con ella,
   * conservando el margen de recorte en la misma proporción.
   */
  .cme-mapa__ventana { min-height:170px; }

  /*
   * El botón a todo el ancho bajo un mapa de 250 px ocupaba media pantalla
   * para una sola acción. En móvil el bloque se compacta: dirección arriba,
   * botón abajo, a todo el ancho — como lo pidió Mario.
   */
  .cme-mapa__pie { display:block; margin:7px 0 0; }
  .cme-mapa__pie .cme-boton { width:100%; justify-content:center; margin-top:8px; }
}

/* Tipos de recinto: rejilla a ancho completo, con icono. */
.cme-tipos {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px;
}
@media (max-width:900px) { .cme-tipos { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px) { .cme-tipos { grid-template-columns:1fr; } }
.cme-tipos a {
  display:flex; align-items:center; gap:10px;
  padding:13px 15px; text-decoration:none; font-size:13.5px; font-weight:650;
  color:var(--cme-texto); background:var(--cme-fondo);
  border:1px solid var(--cme-linea); border-radius:var(--cme-radio);
  transition:border-color .15s ease, color .15s ease;
}
.cme-tipos a:hover { border-color:var(--cme-naranja); color:var(--cme-naranja); }
/* El icono en un recuadro naranja tenue: marca la fila sin que el color del texto
   compita con él. */
.cme-tipos svg {
  width:16px; height:16px; flex:0 0 30px; box-sizing:content-box;
  padding:7px; border-radius:var(--cme-radio);
  color:var(--cme-naranja); fill:currentColor;
  background:color-mix(in srgb, var(--cme-naranja) 14%, transparent);
}

/* El aviso de «ver todos los eventos» del recinto: un botón, no un enlace suelto.
   Cierra la rejilla de seis y lleva a los que faltan.
   ⚠️ `.cme-mas--suelto` ya existía más arriba con su margen: aquí solo se le da
   forma de botón, sin volver a declarar lo que ya tiene. */
.cme-mas--suelto a {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:var(--cme-radio);
  background:var(--cme-gris); border:1px solid var(--cme-linea);
  color:var(--cme-texto); text-decoration:none; font-size:13.5px; font-weight:650;
  transition:border-color .15s ease, color .15s ease;
}
.cme-mas--suelto a:hover { border-color:var(--cme-naranja); color:var(--cme-naranja); }
.cme-mas--suelto svg { width:15px; height:15px; }

/* ── Encabezado de sección alineado a la izquierda ───────────────────────────
   El de la cartelera va centrado entre dos líneas porque abre la página; dentro de
   una ficha, con «Ver todos» al lado, va a la izquierda como los demás bloques. */
.cme-encabezado--izq { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
/* ⚠️ La flecha hereda el tamaño del SVG del encabezado si no se acota: salía a
   pantalla completa entre el título y la lista. */
.cme-encabezado--izq .cme-mas { flex:0 0 auto; margin:0; }
/*
 * 🔴 ACOTADO PARA CUALQUIER ENCABEZADO, no solo el de la izquierda.
 *
 * El SVG sin medidas se estira a lo que le dé el contenedor: dentro de
 * `.cme-encabezado`, que es flex con `flex:1` en sus pseudoelementos, salía **a
 * pantalla completa** entre el título y la lista. Pasó dos veces el mismo día —en
 * «Próximos eventos» y en «Tipos de recinto»— porque la primera vez solo se acotó
 * la variante `--izq`.
 */
.cme-encabezado .cme-mas svg,
.cme-encabezado--izq .cme-mas svg { width:11px; height:11px; flex:0 0 11px; fill:currentColor; }
.cme-encabezado .cme-mas { flex:0 0 auto; margin:0; white-space:nowrap; }
/* ⚠️ `flex-wrap:nowrap` en el ENLACE, no solo `white-space` en el párrafo: el `<a>`
   es `inline-flex`, así que su texto y su flecha son dos hijos flex y envolvían a un
   segundo renglón por mucho que el texto no se partiera. */
.cme-encabezado .cme-mas a { flex-wrap:nowrap; white-space:nowrap; }
/* ⚠️ `nowrap`: el enlace es lo último de la fila y, sin esto, la flecha caía a un
   segundo renglón bajo el texto en cuanto el título ocupaba lo suyo. */
.cme-encabezado--izq .cme-mas, .cme-encabezado--izq .cme-mas a { white-space:nowrap; }
.cme-encabezado--izq::before, .cme-encabezado--izq::after { content:none; }
.cme-encabezado--izq .cme-titulo { text-align:left; }

/* ── «Se han presentado en…»: círculos con foto y año ────────────────────────
 *
 * El círculo se reconoce de un vistazo y no compite con la cartelera de arriba,
 * porque no se parece a ella. Caben ocho en el alto de dos tarjetas.
 */
/*
 * ⚠️ COLUMNAS DE ANCHO ACOTADO, no ocho fracciones fijas.
 *
 * Con `repeat(8, 1fr)` y un solo artista —que es lo que hay en casi todos los
 * recintos: 1 evento ya pasado— el círculo se estiraba a un octavo del ancho y el
 * bloque quedaba con siete huecos y un retrato enorme y solitario.
 *
 * Con `auto-fill` y un máximo por columna, un artista ocupa lo que le toca y los
 * demás huecos no existen; con ocho, se reparten como en el diseño.
 */
/*
 * 🔴 REHECHO 31-ago-2026 — `.cme-quienes` (círculos con foto) reemplazada por
 * `.cme-artistas`/`.cme-artista`, calcada de `.past-artists`/`.artist-pill`
 * en `07-single-lugar-movistar-arena.html`: fila con scroll horizontal de
 * píldoras de SOLO TEXTO (año arriba, nombre abajo), sin foto. La versión en
 * círculos fue decisión de una sesión anterior (30-ago) que no correspondía
 * al mockup real.
 */
.cme-artistas { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }

/*
 * ⚠️ COMO PISTA PAGINADA, LA TIRA DE ARTISTAS DEJA DE DESPLAZARSE: pasa a rejilla y el
 *    paginado enseña un grupo cada vez. Con `overflow-x: auto` habría DOS formas de recorrer
 *    lo mismo —arrastrar y las flechas— y ninguna sabría de la otra.
 * 📌 Y hace falta que sea `grid` para que el JavaScript pueda leer sus columnas; en flex no
 *    hay ninguna que contar y la página caería al respaldo de 4.
 */
.cme-artistas.cf-cartelera-pag__pista {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); overflow:visible;
}
@media (max-width:900px) { .cme-artistas.cf-cartelera-pag__pista { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px) { .cme-artistas.cf-cartelera-pag__pista { grid-template-columns:1fr; } }
.cme-artista {
  flex:0 0 190px; min-width:190px; padding:11px;
  border:1px solid var(--cme-linea); border-radius:11px;
  background:var(--cme-fondo); text-decoration:none; color:var(--cme-texto);
  transition:border-color .15s ease;
}
.cme-artista:hover { border-color:var(--cme-naranja); }
.cme-artista__anio { display:block; margin-bottom:2px; font-size:12px; font-weight:900; color:var(--cme-naranja); }
.cme-artista b { display:block; font-size:14px; font-weight:700; line-height:1.25; }

@media (max-width:560px) { .cme-artista { flex-basis:160px; min-width:160px; } }

/*
 * 🔴 «Otros centros de eventos» — calcada de `.full-rows`/`.venue-row`:
 * rejilla de 4 columnas, filas compactas (foto circular + nombre + ciudad +
 * flecha), no el carrusel de tarjetas grandes que usaba antes.
 */
.cme-recintos-fila-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.cme-recinto-fila {
  display:grid; grid-template-columns:58px 1fr auto; gap:10px; align-items:center;
  padding:11px; border:1px solid var(--cme-linea); border-radius:11px;
  background:var(--cme-fondo); text-decoration:none; color:var(--cme-texto);
  transition:border-color .15s ease;
}
.cme-recinto-fila:hover { border-color:var(--cme-naranja); }
.cme-recinto-fila__foto {
  display:block; width:58px; height:58px; border-radius:50%; overflow:hidden;
  background:var(--cme-gris); flex:0 0 58px;
}
.cme-recinto-fila__foto img { width:100%; height:100%; object-fit:cover; display:block; }
.cme-recinto-fila__foto svg { width:40%; height:40%; margin:30%; fill:var(--cme-suave); }
.cme-recinto-fila__cuerpo { min-width:0; }
.cme-recinto-fila__cuerpo b { display:block; font-size:14px; font-weight:700; line-height:1.25; }
.cme-recinto-fila__ciudad { display:block; margin-top:2px; font-size:12px; color:var(--cme-suave); }
.cme-recinto-fila__flecha { display:flex; flex:0 0 auto; color:var(--cme-suave); }
.cme-recinto-fila__flecha svg { width:12px; height:12px; fill:currentColor; }

@media (max-width:900px) { .cme-recintos-fila-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:460px) { .cme-recintos-fila-grid { grid-template-columns:1fr; } }

/* ── «Otros eventos»: la miniatura, apaisada ─────────────────────────────────
 *
 * ⚠️ La tarjeta `--mini` nace de la del archivo, donde la miniatura es casi cuadrada
 *    porque el afiche manda. Aquí son cuatro tarjetas anchas y el recorte cuadrado
 *    dejaba una franja vertical de 78×124 al lado del texto: ni se veía el afiche ni
 *    aprovechaba el ancho. En 16/10 la imagen se lee y la tarjeta cierra.
 *
 * Va acotado al carrusel de esta ficha para no tocar el archivo, que sigue con su
 * proporción.
 */
.cme-fila ~ .cme-bloque .cme-carrusel .cme-card--mini .cme-card__img,
.cme--recinto .cme-carrusel .cme-card--mini .cme-card__img {
  flex:0 0 118px; width:118px; min-height:0; aspect-ratio:16/10; align-self:center;
}

/* ── Cabecera de carrusel: como los demás encabezados de la ficha ────────────
   `.cme-bloque__cabecera` reparte título y mandos; el título va en el mismo cuerpo
   y tamaño que el resto de rótulos de sección, para que los ocho bloques de la
   ficha se lean como una sola serie y no como piezas de plantillas distintas. */
/* El enlace pegado al rótulo; los mandos quedan al final. El `margin-right:auto`
   del título está arriba, en su única declaración. */
.cme-bloque__cabecera .cme-mas { margin:0; }

/* ── El carrusel calcula el ancho de sus tarjetas ────────────────────────────
 *
 * 🔴 ANTES ERA UN ANCHO FIJO (232 px) y por eso se veía mal: en un contenedor de
 * 1088 px caben 4,4 tarjetas, así que la quinta asomaba cortada por el borde y el
 * conjunto parecía descuadrado a cualquier anchura que no fuera múltiplo de 232.
 *
 * Con `calc((100% - gaps) / N)` el ancho sale de la caja, no al revés: entran
 * exactamente N y ninguna queda partida. Lo pidió Mario el 30-ago-2026.
 *
 * ⚠️ La cuenta descuenta los huecos: con N tarjetas hay N-1 huecos de 10 px.
 */
.cme-carrusel > * {
  flex:0 0 calc((100% - (var(--cme-visibles) - 1) * var(--cme-hueco)) / var(--cme-visibles));
  scroll-snap-align:start;
}
/* Con menos sitio, menos tarjetas: apretarlas más las volvería ilegibles. */
@media (max-width:1100px) { .cme-carrusel { --cme-visibles:3; } }
@media (max-width:820px)  { .cme-carrusel { --cme-visibles:2; } }
@media (max-width:560px)  { .cme-carrusel { --cme-visibles:1; } }

/* ════════════════════════════════════════════════════════════════════════════
   RÓTULOS DE BLOQUE Y «VER TODOS» — una sola definición para todos
   ════════════════════════════════════════════════════════════════════════════

   🔴 Había TRES estilos distintos de rótulo y DOS de enlace, según de qué plantilla
   viniera cada bloque: `.cme-titulo` en unos, `.cme-bloque__titulo` en otros, y el
   «Ver todos» unas veces junto al título y otras bajo el bloque. En una misma página
   con ocho secciones eso se lee como ocho plantillas pegadas.

   Regla, y no admite excepciones: **el rótulo siempre igual, y el «Ver todos»
   siempre a la derecha del rótulo**. Nunca las dos cosas a la vez.
*/
.cme-encabezado--izq .cme-titulo,
.cme--recinto .cme-bloque__cabecera .cme-bloque__titulo,
.cme--recinto .cme-lado__cab .cme-bloque__titulo {
  margin:0; font-size:16px; font-weight:800; line-height:1.2;
  text-transform:uppercase; letter-spacing:.04em; text-align:left;
  min-width:0;
}
.cme--recinto a.cme-mas,
.cme--recinto .cme-mas a,
.cme--recinto .cme-lado__mas {
  flex:0 0 auto; font-size:12.5px; font-weight:700;
  color:var(--cme-naranja); text-decoration:none; white-space:nowrap;
}

/*
 * ── En móvil, el rótulo puede ocupar dos líneas y el enlace se queda en flecha ──
 *
 * «Próximos eventos en Movistar Arena» no cabe en 375 px junto a un «Ver todos».
 * Antes se partía en dos líneas empujando al enlace fuera de sitio. Ahora el rótulo
 * envuelve libremente y el enlace se reduce a su flecha, más grande para que siga
 * siendo un objetivo táctil decente.
 */
@media (max-width:640px) {
  .cme-encabezado--izq,
  .cme--recinto .cme-bloque__cabecera { align-items:flex-start; gap:10px; }

  .cme-encabezado--izq .cme-titulo,
  .cme--recinto .cme-bloque__cabecera .cme-bloque__titulo { font-size:14.5px; }

  .cme--recinto a.cme-mas span,
  .cme--recinto .cme-lado__mas span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .cme--recinto a.cme-mas,
  .cme--recinto .cme-lado__mas {
    display:grid; place-items:center; flex:0 0 34px;
    width:34px; height:34px; margin-top:-4px;
    border:1px solid var(--cme-linea); border-radius:var(--cme-radio);
  }
  .cme--recinto a.cme-mas svg,
  .cme--recinto .cme-lado__mas svg { width:14px; height:14px; flex:0 0 14px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   🔴 TODO ICONO DE «VER TODOS» ACOTADO, VENGA DE DONDE VENGA
   ════════════════════════════════════════════════════════════════════════════

   Es la CUARTA vez que una flecha sale a pantalla completa, siempre por lo mismo:
   un SVG sin `width`/`height` dentro de un contenedor flex o grid se estira a lo que
   le den. Cada vez se acotó solo la clase donde había aparecido —`.cme-mas`, luego
   `.cme-encabezado--izq .cme-mas`— y a la siguiente reaparecía en otra.

   Esta regla cubre las tres clases de enlace de la ficha de una vez. Si aparece una
   cuarta clase, se añade AQUÍ, no en su propio bloque.
*/
/*
 * ─── Etiquetas al final + CTA fija móvil + nav anterior/siguiente — 31-ago-2026 ───
 * Extraído real de `colorfans_redesign_v4/06-single-evento-edo-caroe.html`
 * (`.event-tags`/`.chip-row`/`.sticky-ticket`/`.event-nav`), renombrado con
 * prefijo `cme-` porque este archivo ya vive en el dominio de eventos.
 * Los chips reutilizan `.cme-chip`, ya existente — no una clase nueva para lo mismo.
 */
.cme-etiquetas { margin-top:22px; padding-top:16px; border-top:1px solid var(--cme-linea); }
.cme-etiquetas__eyebrow { font-size:12px; font-weight:850; letter-spacing:.12em; color:var(--cme-naranja); text-transform:uppercase; margin-bottom:10px; }
.cme-etiquetas__fila { display:flex; gap:8px; flex-wrap:wrap; }
/*
 * 🔴 CHIPS DE ESTA FILA MÁS GRANDES Y CON BORDE — 31-ago-2026, calcado de
 * `.chip`/`.chip.active` en `06-single-evento-edo-caroe.html`. `.cme-chip`
 * base (11.5px, sin borde) sirve a los filtros («activos», con una `x» para
 * quitar) y aquí se veía plano frente al mockup, que trae una píldora más
 * grande CON borde. Se acota a `.cme-etiquetas__fila` para no tocar los
 * chips de filtro. El primer chip (el dato más específico — artista o tipo)
 * lleva el tratamiento «activo» del mockup: borde y fondo con el acento.
 */
.cme-etiquetas__fila .cme-chip {
  padding:7px 11px; font-size:12px; font-weight:650; line-height:1.3;
  border:1px solid var(--cme-linea); background:var(--cme-fondo);
}
.cme-etiquetas__fila .cme-chip:first-child {
  color:var(--cf-acento-texto); border-color:var(--cf-acento); background:var(--cf-acento);
}

/* ⏹️ SIN CONSUMIDOR desde el 06-sep-2026: el marcado de la navegación entre eventos se
   retiró de `single-evento.php` a petición de Mario. El CSS se queda para que devolverlo
   sea una sola línea de plantilla, igual que con la franja de suscripción del pie. */
.cme-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:32px; }
.cme-nav a { padding:15px; border:1px solid var(--cme-linea); border-radius:12px; background:var(--cme-fondo); text-decoration:none; color:inherit; }
.cme-nav small { display:block; color:var(--cme-suave); margin-bottom:4px; }
.cme-nav b { font-size:14px; }
.cme-nav--siguiente { text-align:right; }

/* Base: oculta en escritorio, la activa la media query móvil al pie. */
.cme-cta-fija { display:none; }
.cme-cta-fija .cme-etiqueta {
  font-size:11px; color:var(--cme-suave); display:block; line-height:1.1em;
}
/* El botón manda en la barra: sin ancho mínimo, para que la etiqueta de al lado
   se quede con el sitio que sobra en vez de partirse en tres renglones.
   ⚠️ El color va en tokens, no literal: `white` sobre este rojo da 3,3:1 —por
   debajo del 4,5:1 que este proyecto mide en los dos modos— y `--cf-acento-texto`
   existe justo para esto: es #ffffff en claro y casi negro en oscuro. */
.cme-cta-fija .cme-boton {
  min-width:auto; padding:10px; letter-spacing:0;
  background:var(--cf-acento); color:var(--cf-acento-texto);
}

/*
 * ─── "Mismo recinto" / "También te puede interesar" — 31-ago-2026 ──────────
 * Aislada a propósito de `.cme-grid` (esa la usa `archive-evento.php` con su
 * propio criterio de 4 columnas fijas) — ver el porqué en single-evento.php.
 */
.cf-evt-rejilla { display:grid; gap:14px; margin-top: var(--cf-espacio-2, 1.2rem); }
.cf-evt-rejilla--3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.cf-evt-rejilla--4 { grid-template-columns:repeat(4, minmax(0,1fr)); }

/*
 * ─── "Próximos eventos" de la ficha de recinto — 31-ago-2026 ────────────────
 * Aislada de `.cme-grid`/`.cf-evt-rejilla` a propósito: son tres vistas
 * distintas (listado de eventos, relacionados de single-evento, y esta) que
 * hoy comparten 3 columnas, pero cambiar el criterio de una no debe afectar
 * a las otras dos.
 */
/* ⏹️ `.cf-lugar-eventos` (rejilla propia de 3) se retiró el 05-sep-2026: «Próximos eventos»
   pasó a `.cme-grid`, la del archivo de eventos, que ya trae sus cuatro tramos y la tarjeta en
   fila bajo 768 px. Y desde el 06-sep `.cf-lugar-otros` es solo un envoltorio: su rejilla
   también la pinta `cf_evt_cartelera_html()`. */

/*
 * LA AGENDA DE LA FICHA, A 4 COLUMNAS por encima de 1200 px — decisión de Mario del
 * 06-sep-2026, revirtiendo el 3 que se había puesto el día anterior.
 *
 * ⚠️ CON EL TOPE ACTUAL DE 6 LA SEGUNDA FILA SALE CON 2 (`$cf_tope_ficha` en
 *    `taxonomy-lugar.php`). Se avisó y se aplicó igual: es su decisión. Lo que cierra exacto a
 *    4 columnas es un tope de 8, y a 3 columnas era el 6 de ahora.
 * 📌 Solo actúa por encima de 1200 px: de ahí abajo `.cme-grid` ya baja a 3, luego a 2 y luego
 *    a 1, y esos tramos cierran bien con 6.
 */
@media (min-width: 1201px) {
  /*
   * ⚠️ `.cf-lugar-agenda` ES EL ENVOLTORIO, NO LA REJILLA — desde el 06-sep-2026 la rejilla la
   *    pinta `cf_evt_cartelera_html()` dentro. Sin el `.cme-grid` de la derecha esta regla
   *    caería sobre un `div` sin columnas y no haría nada.
   */
  .cf-lugar-agenda .cme-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
}
/* ── Cartelera paginada («cartelera-carrusel») ──────────────────────────────
 *
 * Por dentro es `.cme-grid`: hereda sus columnas y su tarjeta en fila bajo 768 px. Lo único
 * propio son los puntos: las flechas son las de la cabecera, `.cme-carrusel__mandos`.
 *
 * 🔴 NO HAY FLECHAS PROPIAS, Y ES UNA CORRECCIÓN — Mario, 06-sep-2026: «los pusiste sueltos y
 *    en absolute en todos los otros, en vez de usarlos como `cme-carrusel__mandos` dentro de
 *    la cabecera». Unas flechas en `position:absolute` sobre la cabecera **se disputaban el
 *    hueco con el «Ver todos»**, y encima duplicaban un componente ya medido. Se borraron: lo
 *    que había aquí era un segundo juego de botones con el mismo trabajo.
 */

/*
 * 🔴 EN UN BLOQUE PAGINADO LOS MANDOS SE QUEDAN EN MÓVIL. `.cme-carrusel__mandos` se esconde
 *    bajo 768 px porque allí `.cme-carrusel` deja de ser carrusel y pasa a lista con barra de
 *    desplazamiento — ahí las flechas no harían nada. Un bloque paginado sí sigue paginando en
 *    móvil: es literalmente lo que pidió Mario («que muestre 4 y avance a los siguientes 4»).
 * ⚠️ Y gana por ir DESPUÉS en la hoja, no por especificidad: las dos clases miden 0-1-0.
 */
.cme-carrusel__mandos--pag { display:flex; }


/*
 * 📌 SIN PUNTOS DE PÁGINA — Mario los quitó de todos los carruseles el 06-sep-2026. Con el
 *    bucle infinito tampoco tenían mucho que decir: no hay un principio ni un final que marcar.
 */

/*
 * ⚠️ `.cf-lugar-otros` ES EL ENVOLTORIO, NO LA REJILLA — 06-sep-2026. La rejilla la pinta
 *    `cf_evt_cartelera_html()` dentro, con la maqueta que diga el panel. Antes declaraba aquí
 *    sus 4 columnas y sus tramos, así que **elegir la maqueta no lo movía**: es lo que Mario
 *    vio al decir que «usa otras clases aunque seleccione el mismo layout».
 * 📌 **Y ya no declara NADA**: su `margin-top` lo quitó Mario el 06-sep-2026. La separación la
 *    pone la cabecera del bloque, como en los demás; el envoltorio solo existe para que el
 *    marcado tenga dónde colgar la maqueta elegida. Sin reglas, la clase no se borra del PHP
 *    —es el punto de enganche— pero aquí no hay regla muerta que mantener.
 */

/*
 * ─── Tarjeta vertical de evento en la ficha de recinto — 31-ago-2026 ────────
 * Calcada de `.event-place` (`07-single-lugar-movistar-arena.html`): foto
 * arriba, fecha en TEXTO PLANO (no insignia), título, "recinto · hora",
 * chip de precio. Aislada de `.cme-card` a propósito — ese componente pone
 * la fecha en una caja al lado del título, un layout genuinamente distinto
 * pensado para listas, no para esta rejilla.
 */
.cf-lugar-tarjeta { border:1px solid var(--cme-linea); border-radius:13px; background:var(--cme-fondo); overflow:hidden; }
.cf-lugar-tarjeta a { display:block; color:inherit; text-decoration:none; }
/*
 * 🔴 EL MOCKUP USA `background-image` (siempre cubre el `min-height`, sea cual
 * sea la proporción real de la foto) — aquí es un `<img>` de verdad, con
 * `alt`, así que `height:100%` sin una `height` fija en el padre se estira a
 * su proporción real (2,6:1 en los banners de evento) y deja una banda gris
 * debajo. Encapsulada con `aspect-ratio:3/2` — a diferencia de `min-height`,
 * fija una altura DEFINIDA a partir del ancho, así el `<img>` con
 * `object-fit:cover` cubre siempre la caja entera, sin importar la
 * proporción real de la foto. 31-ago-2026.
 */
.cf-lugar-tarjeta__foto { display:block; aspect-ratio:3/2; background:var(--cme-gris); }
.cf-lugar-tarjeta__foto img { width:100%; height:100%; object-fit:cover; display:block; }
.cf-lugar-tarjeta__foto--vacia { display:flex; align-items:center; justify-content:center; }
.cf-lugar-tarjeta__cuerpo { padding:14px; }
.cf-lugar-tarjeta__fecha { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--cme-suave); margin-bottom:5px; }
.cf-lugar-tarjeta__titulo { font-size:15px; font-weight:800; line-height:1.2; margin:0 0 5px; }
.cf-lugar-tarjeta__deck { font-size:12.5px; color:var(--cme-suave); margin:0 0 8px; }
.cf-lugar-tarjeta__precio { display:inline-flex; padding:5px 10px; border:1px solid var(--cme-linea); border-radius:999px; font-size:11.5px; font-weight:650; }

/*
 * ─── Tarjeta simple de "Mismo recinto" / "También te puede interesar" ──────
 * Calcada de `.card`/`.media`/`.card-body`/`.label`/`.story-title`/`.date`
 * (`06-single-evento-edo-caroe.html`, extraído con Python — valores reales,
 * no al ojo). Deliberadamente más simple que `.cme-card`: solo foto,
 * etiqueta "EVENTO", título y fecha corta (día+mes, sin hora ni recinto).
 * 31-ago-2026.
 */
.cf-evt-tarjeta-simple { border:1px solid var(--cme-linea); border-radius:14px; background:var(--cme-fondo); overflow:hidden; }
.cf-evt-tarjeta-simple a { display:block; color:inherit; text-decoration:none; }
/* Mismo motivo que `.cf-lugar-tarjeta__foto`: `aspect-ratio` fija una altura
   definida a partir del ancho, así el `<img>` cubre la caja entera sin dejar
   una banda gris debajo. */
.cf-evt-tarjeta-simple__foto { display:block; aspect-ratio:3/2; background:var(--cme-gris); }
.cf-evt-tarjeta-simple__foto img { width:100%; height:100%; object-fit:cover; display:block; }
.cf-evt-tarjeta-simple__foto--vacia { display:flex; align-items:center; justify-content:center; }
.cf-evt-tarjeta-simple__cuerpo { padding:16px; }
.cf-evt-tarjeta-simple__etiqueta { font-size:10px; font-weight:900; letter-spacing:.105em; text-transform:uppercase; color:var(--cme-naranja); }
.cf-evt-tarjeta-simple__titulo { font-size:18px; font-weight:800; line-height:1.18; letter-spacing:-.015em; margin:6px 0 8px; }
.cf-evt-tarjeta-simple__fecha { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cme-suave); }
/* El recinto solo aparece donde hace falta (fichas de perfil): ver el parámetro
   `$con_lugar` de `cf_evt_tarjeta_simple_html()`. Va bajo la fecha, en el mismo
   tono pero sin versalitas — es un nombre propio, no una etiqueta. */
.cf-evt-tarjeta-simple__lugar { margin-top:3px; font-size:12px; color:var(--cme-suave); line-height:1.3; }

/*
 * ─── "Últimas noticias" de la ficha de recinto, dentro del carrusel ─────────
 * `.cf-news-card` (main.css) está pensada para una rejilla CSS Grid en el
 * home ("Sigue leyendo"); aquí vive dentro de `.cme-carrusel`, que es flex
 * con scroll. Ancho fijo SOLO bajo este modificador — no toca el uso en el
 * home.
 */
/*
 * 🔴 ESTAS TRES SON DEL CARRUSEL, Y SE APLICABAN TAMBIÉN EN MÓVIL. Mario, 06-sep-2026: «últimas
 * noticias está roto en móvil, clases pisadas». Y era exacto, medido a 375 px:
 *
 *   · `.cf-news-card a` valía `display: block` (0,3,0) y **pisaba el `display: grid`** que
 *     `main.css` le da bajo 767 px (0,2,0) para convertir la tarjeta en fila. Las columnas
 *     `104px 1fr` estaban declaradas y no se aplicaban: había rejilla escrita y no había rejilla.
 *   · con `aspect-ratio: 5/5` cada pieza salía de **343×343**, y su foto absoluta llenaba los
 *     343×342: ocho cuadrados apilados, **2.093 px de alto** en total.
 *
 * ⚠️ EL CORTE ES 768 Y COINCIDE CON EL DEL CARRUSEL Y CON EL DE `main.css`. Los tres tienen
 *    que caer en el mismo píxel: `.cme-carrusel` se desactiva en `max-width: 767` y la fila de
 *    `.cf-news-card` empieza ahí también. Con un solo píxel de desfase, esa anchura se queda
 *    sin carrusel y sin fila — medido a 768: piezas de 721×721 y 4.361 px de alto.
 *
 * Por debajo, la tarjeta recupera la fila de `main.css` — la misma que usa la portada.
 */
@media (min-width: 768px) {
  .cf-carrusel-noticias.cme-carrusel { --cme-visibles: 4; }
  .cf-carrusel-noticias .cf-news-card {
    flex: 0 0 calc((100% - 3 * var(--cme-hueco)) / 4);
    scroll-snap-align: start; aspect-ratio: 5 / 5; position: relative;
  }
  .cf-carrusel-noticias .cf-news-card a { display: block; height: 100%; position: relative; }
  .cf-carrusel-noticias .cf-news-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

.cme-mas svg,
a.cme-mas svg,
.cme-lado__mas svg {
  width:11px; height:11px; flex:0 0 11px; fill:currentColor;
}

@media (max-width:959px) {
  /* Igual que el mockup: de 3/4 columnas a 2 antes de apilar del todo. */
  .cf-evt-rejilla--3,
  .cf-evt-rejilla--4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px) {
  .cme-cta-fija {
    display:flex; position:fixed; z-index:45; bottom:0; left:0; right:0;
    padding:10px 20px; background:color-mix(in srgb, var(--cme-fondo) 94%, transparent);
    border-top:1px solid var(--cme-linea); backdrop-filter:blur(16px);
    justify-content:space-between; align-items:center; gap:10px;
  }
  .cme-nav { grid-template-columns:1fr; }
  .cme-nav--siguiente { text-align:left; }

  /* Espacio para que la CTA fija no tape el pie de página — degrada bien:
     sin soporte de :has() el body no gana el margen y la barra se superpone
     un poco al pie, nada que rompa la lectura. */
  body:has(.cme-cta-fija) { padding-bottom: 64px; }
}

@media (max-width:560px) {
  .cf-evt-rejilla--3,
  .cf-evt-rejilla--4 { grid-template-columns:1fr; }
}

@media (max-width:959px) {
  .cf-carrusel-noticias .cf-news-card { flex-basis: calc((100% - var(--cme-hueco)) / 2); }
}

@media (max-width:560px) {
  .cf-carrusel-noticias .cf-news-card { flex-basis: 82%; }
}

/* ── Aviso de recinto renombrado ──────────────────────────────────────────────
 *
 * Dos fichas del mismo edificio: la vieja guarda el archivo y la nueva la cartelera.
 * El aviso es lo que impide que el lector crea que se equivocó de página.
 *
 * ⚠️ Va con los tokens `--cme-*`, que desde el 06-sep-2026 viven en `:root`: este bloque
 *    no cuelga de ningún contenedor y con ellos declarados en `.cme` se habría quedado sin
 *    fondo ni borde, que es el fallo que costó tres días en /personalidades/.
 */
.cme-renombre {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--cme-espacio, 1rem); flex-wrap: wrap;
	margin: 0 0 var(--cme-espacio, 1rem);
	padding: 1rem 1.2rem;
	border: 1px solid var(--cme-linea);
	border-radius: var(--cme-radio);
	background: var(--cme-fondo);
}
.cme-renombre__texto { margin: 0; color: var(--cme-texto); font-size: .95rem; line-height: 1.45; min-width: 0; }
.cme-renombre__texto b { color: var(--cme-texto); }
.cme-renombre__boton { flex: 0 0 auto; }
.cme-renombre__boton svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* La de la ficha nueva es una nota al margen, no un aviso: ni borde ni fondo. */
.cme-renombre--nuevo {
	padding: 0; border: 0; background: none;
	margin-bottom: var(--cme-espacio, 1rem);
}
.cme-renombre--nuevo .cme-renombre__texto { color: var(--cme-gris); font-size: .88rem; }

/* 🔴 El aviso manda en la ficha vieja, así que se marca con el acento. */
.cme-renombre--viejo { border-left: 3px solid var(--cme-naranja); }

@media (max-width: 620px) {
	.cme-renombre { flex-direction: column; align-items: flex-start; }
	.cme-renombre__boton { width: 100%; justify-content: center; }
}