/* ============================================================
   index-responsive.css
   Overrides responsivos para index2.php
   Crece el layout hasta 1440px y adapta la grilla de eventos
   Carga DESPUÉS de css/index.css
   ============================================================ */

/* Contenedor principal: crece hasta 1440px */
#contenedor {
	width: 100%;
	max-width: 1440px;
	box-sizing: border-box;
}

/* ============================================================
   Header responsive
   - Logo se mantiene a 320px (ancho fijo)
   - Nav crece para llenar el espacio restante (hasta ~1110px @1440)
   - Banner superior del nav (slider de promociones) crece a 100%
   - Items del menú se distribuyen proporcionalmente según su
     ancho original, conservando la jerarquía visual
   ============================================================ */
header {
	width: 100%;
	max-width: 100%;
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}

header .header-top {
	flex: 0 0 320px;
	width: 320px;
	overflow: hidden;
	min-height: 100px;
}

/* Sólo el nav original (no el .mobile-nav). El mobile-nav tiene
   sus propias reglas en el media query y no debe heredar estas. */
header>nav:not(.mobile-nav) {
	flex: 1 1 auto;
	width: auto !important;
	margin-left: 10px !important;
	min-width: 0;
	height: 100px;
	box-sizing: border-box;
	float: none;
}

/* Banner slider promocional dentro del nav (no es el banner principal) */
header>nav:not(.mobile-nav)>section.banner {
	width: 100% !important;
	height: 49px !important;
	margin: 0 !important;
	display: block;
	position: relative;
	aspect-ratio: auto;
}

header>nav:not(.mobile-nav)>section.banner>#sliderIzq {
	width: 100% !important;
	height: 49px !important;
}

header>nav:not(.mobile-nav)>section.banner>#controllerIzq {
	margin-left: 0 !important;
	position: absolute;
	right: 10px;
	top: 0;
	z-index: 5;
}

/* Buscador conserva su ancho fijo */
header>nav:not(.mobile-nav)>form {
	float: left;
	width: 179px;
	margin: 1px 0 0 0;
}

/* Primer UL (Restricciones, Boletín, FAQ): crece para llenar la fila */
header>nav:not(.mobile-nav)>ul:nth-of-type(1) {
	width: calc(100% - 180px) !important;
	height: 25px;
	margin-top: 1px;
	margin-left: 1px !important;
	padding: 0;
	float: left;
	display: flex;
	box-sizing: border-box;
}

header>nav:not(.mobile-nav)>ul:nth-of-type(1)>li {
	flex: 1 1 0;
	width: auto !important;
	height: 20px;
	padding-top: 5px;
	margin-left: 1px;
}

header>nav:not(.mobile-nav)>ul:nth-of-type(1)>li:first-child {
	margin-left: 0;
}

/* Segundo UL (menú principal): crece a 100% del nav, items proporcionales */
header>nav:not(.mobile-nav)>ul:nth-of-type(2) {
	width: 100% !important;
	height: 25px;
	display: flex;
	float: left;
	clear: both;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

header>nav:not(.mobile-nav)>ul:nth-of-type(2)>li {
	width: auto !important;
	height: 20px;
	padding-top: 5px;
	margin: 0;
}

header>nav:not(.mobile-nav)>ul:nth-of-type(2)>li+li {
	margin-left: 1px;
}

/* Proporciones originales del menú principal:
   se usan como flex-grow para que los items mantengan
   sus tamaños relativos al expandirse */
header>nav:not(.mobile-nav) .auditorio {
	flex: 87 0 0;
}

header>nav:not(.mobile-nav) .programacion {
	flex: 106 0 0;
}

header>nav:not(.mobile-nav) .localidades {
	flex: 94 0 0;
}

header>nav:not(.mobile-nav) .patrocinadores {
	flex: 111 0 0;
}

header>nav:not(.mobile-nav) .como {
	flex: 96 0 0;
}

header>nav:not(.mobile-nav) .enlaces {
	flex: 70 0 0;
}

/* ============================================================
   Dropdowns del menú desktop: posicionados absolutos para que
   floten SOBRE el banner cuando aparecen al hover.
   z-index alto para superar #contenedor > .banner (z-index: 1).
   ============================================================ */
header>nav:not(.mobile-nav) li .primero,
header>nav:not(.mobile-nav) li .segundo,
header>nav:not(.mobile-nav) li .tercero,
header>nav:not(.mobile-nav) li .cuarto {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
}

/* Asegurar que el li padre tenga position relative y stacking context */
header>nav:not(.mobile-nav) .auditorio,
header>nav:not(.mobile-nav) .localidades,
header>nav:not(.mobile-nav) .como,
header>nav:not(.mobile-nav) .patrocinadores {
	position: relative;
	z-index: 50;
}

header>nav:not(.mobile-nav) .contacto {
	flex: 80 0 0;
}

/* ============================================================
   Banner superior: izquierda (info/contacto) + derecha (slider)
   Layout flex que crece proporcionalmente.
   Selector scopeado a > #contenedor > .banner para no afectar
   al <section class="banner"> que vive dentro del <nav> del header.
   ============================================================ */
#contenedor>.banner {
	width: 100%;
	height: auto;
	display: flex;
	gap: 10px;
	align-items: stretch;
	clear: both;
	position: relative;
	z-index: 1;
}

/* .bannerIzq se ajusta a la altura de su contenido (info/contacto/redes)
   y "manda" la altura del banner: define la altura de la fila completa */
#contenedor>.banner .bannerIzq {
	flex: 320 0 0;
	width: auto;
	height: auto;
	min-width: 0;
}

/* .bannerDer iguala la altura del .bannerIzq (no usa aspect-ratio).
   El slider y sus imágenes se ajustan vía object-fit. */
#contenedor>.banner .bannerDer {
	flex: 650 0 0;
	width: auto !important;
	height: auto !important;
	margin-left: 0;
	min-width: 0;
	align-self: stretch;
}

/* Override del slider Skitter (que tiene width/height inline) */
#sliderDer {
	width: 100% !important;
	height: 100% !important;
}

#sliderDer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
   Sección de noticias (ticker)
   - El título "NOTICIAS" derecho se muestra en desktop y se oculta
     en mobile (ver media query <900px más abajo)
   - Hace que el ticker (.tickercontainer) ocupe el ancho restante
   ============================================================ */
.noticias {
	width: 100%;
	display: flex;
	align-items: stretch;
}

.noticias .tituloNoticias {
	flex: 0 0 auto;
}

.noticias .tickercontainer {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

/* La .mask (wrapper que crea el plugin webticker) debe ocupar todo el ancho
   para que el área visible del ticker llene la barra. NO se fuerza el ancho
   del <ul id="webticker"> porque el plugin lo calcula dinámicamente para
   poder animar el desplazamiento horizontal del texto. */
.noticias .tickercontainer .mask {
	width: 100% !important;
	max-width: 100%;
	overflow: hidden;
	position: relative;
}

/* ============================================================
   Grilla de eventos: 4 / 3 / 2 columnas responsivas
   ============================================================ */
article.events-list {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}

/* El aside con el iframe (videofull) está dentro del article;
   debe ocupar el ancho completo de la grilla para no romper las columnas */
article.events-list>aside {
	grid-column: 1 / -1;
	width: 100%;
}

article.events-list>aside iframe {
	width: 100% !important;
	max-width: 100%;
	height: auto;
	aspect-ratio: 980 / 410;
}

/* Reset del selector legacy nth-child(3n+1) */
article.events-list a:nth-child(3n+1) div {
	margin-left: 0 !important;
}

article.events-list>a {
	display: block;
	width: 100%;
}

.cuadro {
	width: 100%;
	height: auto;
	aspect-ratio: 320 / 310;
	margin-left: 0 !important;
	margin-bottom: 0;
	float: none;
	position: relative;
	overflow: hidden;
}

.cuadro img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.infoEvento {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.fondo {
	width: 100%;
	height: 100%;
}

.infoTit,
.infoTxt {
	width: 100%;
	box-sizing: border-box;
}

/* Cintillo negro inferior con el título/fecha del evento:
   ocupa el 100% del ancho de la tarjeta tanto en desktop como en mobile */
.cuadro .newFechaBottom {
	width: 100%;
	left: 0;
	right: 0;
	box-sizing: border-box;
}

aside {
	width: 100%;
	height: auto;
	clear: both;
}

/* ============================================================
   Footer: aplica el mismo principio responsive (crece hasta
   1440px y centra el bloque de logos institucionales)
   ============================================================ */
footer {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	float: none;
	clear: both;
}

footer .bloqueImg {
	margin-left: auto;
	margin-right: auto;
	float: none;
}

/* ============================================================
   PÁGINAS INTERNAS (no events-list)
   Skeleton común: article > section.info + main sections + aside
   En desktop: crecen proporcionalmente para llenar el contenedor
   En mobile: se apilan verticalmente al 100%
   ============================================================ */

/* Article principal de páginas internas */
#contenedor>article:not(.events-list) {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	box-sizing: border-box;
	background-size: cover;
	background-position: center top;
	overflow: visible;
}

/* Sidebar izquierdo (.info) — típicamente 320px (32.6% del 980 original) */
#contenedor>article:not(.events-list)>section.info,
#contenedor>article:not(.events-list)>.info {
	width: calc(33% - 5px) !important;
	max-width: 100%;
	height: auto !important;
	min-height: 0 !important;
	box-sizing: border-box;
}

/* Aside (sidebar derecho) — típicamente 320px también */
#contenedor>article:not(.events-list)>aside {
	width: calc(33% - 5px) !important;
	max-width: 100%;
	height: auto !important;
	box-sizing: border-box;
}

/* Sections de contenido principal — typically 650px (66%) */
#contenedor>article:not(.events-list)>section:not(.info):not(.titRecomendaciones):not(.infoDatos):not(.caracteristicas):not(.fotos):not(.contenedorRec):not(.fotoGde):not(.galeria):not(.logotipos),
#contenedor>article:not(.events-list)>form {
	width: calc(67% - 5px) !important;
	max-width: 100%;
	height: auto !important;
	min-height: 0 !important;
	box-sizing: border-box;
	margin-left: 10px !important;
}

/* ============================================================
   Caso especial: patrocinadores.php — el article se vuelve grid
   con .info izquierda + .logotipos derecha + aside abajo.
   .logotipos tiene un collage con divs posicionados manualmente
   con margin-top negativos diseñados para 650px exactos.
   Mantenemos ese ancho y lo centramos en la columna derecha.
   ============================================================ */
#contenedor > article:not(.events-list):has(> section.logotipos) {
	display: grid !important;
	grid-template-columns: calc(33% - 5px) 1fr !important;
	grid-template-areas:
		"info logotipos"
		"redes video";
	gap: 10px !important;
	align-items: stretch !important;
}

#contenedor > article:not(.events-list):has(> section.logotipos) > section.info {
	grid-area: info !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	min-height: 100% !important;
	float: none !important;
}

#contenedor > article:not(.events-list):has(> section.logotipos) > section.logotipos {
	grid-area: logotipos !important;
	width: 650px !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 800px;
	margin: 0 auto !important;
	float: none !important;
	box-sizing: border-box;
	background-color: #ffffff;
	overflow: visible;
	justify-self: center;
}

/* Aside con grid contents para que redesIzq + redesDer queden en row 2 */
#contenedor > article:not(.events-list):has(> section.logotipos) > aside {
	display: contents !important;
}

#contenedor > article:not(.events-list):has(> section.logotipos) > aside > .redesIzq {
	grid-area: redes !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

#contenedor > article:not(.events-list):has(> section.logotipos) > aside > .redesDer {
	grid-area: video !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

#contenedor > article:not(.events-list):has(> section.logotipos) > aside > .redesDer iframe {
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	aspect-ratio: 650 / 310;
	border: none;
	display: block;
}

/* Caso especial: section.infoDatos.
   - En faq.php contiene .info + aside (es el sidebar izq, 33%)
   - En butacas.php contiene .moduloTicket + .moduloTaquillas (contenido, 67%)
   Diferenciamos con :has() */
#contenedor>article:not(.events-list)>section.infoDatos:has(> .info) {
	width: calc(33% - 5px) !important;
	max-width: 100%;
	height: auto !important;
	min-height: 0 !important;
	box-sizing: border-box;
	margin-left: 0 !important;
}

#contenedor>article:not(.events-list)>section.infoDatos:not(:has(> .info)) {
	width: calc(67% - 5px) !important;
	max-width: 100%;
	height: auto !important;
	min-height: 0 !important;
	box-sizing: border-box;
	margin-left: 10px !important;
}

/* .info dentro de .infoDatos (faq.php) ocupa el 100% de su padre */
#contenedor>article:not(.events-list)>section.infoDatos>.info {
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	float: none !important;
	box-sizing: border-box;
	padding-bottom: 20px;
}

/* ============================================================
   Caso especial: restricciones.php (article con imagen en
   .txtRecomendaciones). En desktop, usamos CSS Grid para que el
   aside (sidebar izquierdo con titRec + redes) tenga la misma
   altura que la imagen de la derecha. Dentro del aside usamos
   flex column con justify-content: space-between para empujar
   .redesIzq al fondo del lado izquierdo.
   ============================================================ */
#contenedor>article:not(.events-list):has(> section.txtRecomendaciones > img) {
	display: grid !important;
	grid-template-columns: calc(33% - 5px) 1fr !important;
	gap: 10px !important;
}

#contenedor>article:not(.events-list):has(> section.txtRecomendaciones > img)>aside {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	min-height: 100%;
	float: none !important;
}

#contenedor>article:not(.events-list):has(> section.txtRecomendaciones > img)>section.txtRecomendaciones {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

/* En restricciones.php, el .titRecomendaciones (rojo) toma el 100% del
   ancho del aside Y crece verticalmente para llenar el espacio hasta el
   bloque de redes abajo (flex: 1 grow). */
#contenedor>article:not(.events-list):has(> section.txtRecomendaciones > img)>aside>.titRecomendaciones {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 auto !important;
	height: auto !important;
	min-height: 0;
	float: none !important;
	margin: 0 !important;
	box-sizing: border-box;
}

/* El .redesIzq mantiene su altura natural al fondo (no crece) */
#contenedor>article:not(.events-list):has(> section.txtRecomendaciones > img)>aside>.redesIzq {
	flex: 0 0 auto !important;
	height: auto !important;
}

/* ============================================================
   Caso especial: historia.php — el article tiene .info + .fotos
   + .caracteristicas + aside. Usamos CSS Grid para que .info y
   .fotos tengan la misma altura (top row), y .caracteristicas y
   .aside spannean ambas columnas (rows debajo).
   ============================================================ */
#contenedor>article:not(.events-list):has(> section.fotos) {
	display: grid !important;
	grid-template-columns: calc(33% - 5px) 1fr !important;
	gap: 10px !important;
	align-items: stretch !important;
}

#contenedor>article:not(.events-list):has(> section.fotos)>section.info,
#contenedor>article:not(.events-list):has(> section.fotos)>section.fotos {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	height: auto !important;
	min-height: 100% !important;
}

#contenedor>article:not(.events-list):has(> section.fotos)>section.caracteristicas {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	margin: 0 !important;
}

/* ============================================================
   Caso especial: páginas con section.fotoGde (servicios, lounge,
   suites, hoteles, auditorio).
   Layout: 2 columnas. Col izquierda = .info (spannea fotoGde + galeria).
   Col derecha = .fotoGde arriba + .galeria debajo.
   .caracteristicas y aside spannean ambas columnas al final.
   ============================================================ */
#contenedor>article:not(.events-list):has(> section.fotoGde) {
	display: grid !important;
	grid-template-columns: calc(33% - 5px) 1fr !important;
	grid-template-areas:
		"info fotoGde"
		"info galeria"
		"caracteristicas caracteristicas"
		"aside aside" !important;
	gap: 10px !important;
	align-items: stretch !important;
}

#contenedor>article:not(.events-list):has(> section.fotoGde)>section.info {
	grid-area: info !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	height: auto !important;
	min-height: 100% !important;
	float: none !important;
}

#contenedor>article:not(.events-list):has(> section.fotoGde)>section.fotoGde {
	grid-area: fotoGde !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	height: auto !important;
	float: none !important;
}

#contenedor>article:not(.events-list):has(> section.fotoGde)>section.galeria {
	grid-area: galeria !important;
	width: 96% !important;
	max-width: 100% !important;
	margin: 0 !important;
	height: auto !important;
	float: none !important;
}

#contenedor>article:not(.events-list):has(> section.fotoGde)>section.caracteristicas {
	grid-area: caracteristicas !important;
	width: 100% !important;
	margin: 0 !important;
}

#contenedor>article:not(.events-list):has(> section.fotoGde)>aside {
	grid-area: aside !important;
	width: 100% !important;
	margin: 0 !important;
}

/* La imagen dentro de fotoGde llena la sección */
#contenedor>article:not(.events-list)>section.fotoGde {
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

#contenedor>article:not(.events-list)>section.fotoGde img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	object-fit: cover;
	display: block;
}

/* Aside como grid 2 columnas (.redesIzq + .redesDer) — aplica a páginas
   con esa estructura: historia, recorrido, servicios, etc. (cualquier
   aside que contenga un .redesDer hermano del .redesIzq). */
#contenedor>article:not(.events-list)>aside:has(> .redesDer) {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	margin: 0 !important;
	display: grid !important;
	grid-template-columns: calc(33% - 5px) 1fr !important;
	gap: 10px !important;
	align-items: stretch !important;
}

/* Dentro del aside: .redesIzq a la izquierda, .redesDer (imagen) a la derecha */
#contenedor>article:not(.events-list)>aside:has(> .redesDer)>.redesIzq {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	float: none !important;
	box-sizing: border-box;
}

#contenedor>article:not(.events-list)>aside:has(> .redesDer)>.redesDer {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	float: none !important;
	box-sizing: border-box;
}

/* La imagen dentro de .redesDer responsive */
#contenedor>article:not(.events-list)>aside:has(> .redesDer)>.redesDer img {
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	display: block;
}

/* Iframe dentro de .redesDer (caso video.php / video_chico.php) */
#contenedor>article:not(.events-list)>aside:has(> .redesDer)>.redesDer iframe {
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	aspect-ratio: 650 / 310;
	border: none;
	display: block;
}

/* La galería interna .fotos sigue siendo grid 2x2 */
#contenedor>article:not(.events-list)>section.fotos {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 10px !important;
	height: auto !important;
}

/* ============================================================
   Caso especial: butacas.php — layout grid 3 filas:
   Row 1: .info (33%) | .infoDatos (67%, contiene 2 módulos)
   Row 2: titRec (33%) | txtRec (67%, mismo ancho que el video)
   Row 3: redes (33%) | video (67%)
   El aside usa display: contents para que sus hijos (titRec + redesIzq)
   se vuelvan items directos del grid del article.
   ============================================================ */
#contenedor > article:not(.events-list):has(> section.infoDatos > .moduloTicket) {
	display: grid !important;
	grid-template-columns: calc(33% - 5px) 1fr !important;
	grid-template-areas:
		"info infoDatos"
		"titRec txtRec"
		"redes video";
	gap: 10px !important;
	align-items: stretch !important;
}

#contenedor > article:not(.events-list):has(> section.infoDatos > .moduloTicket) > aside {
	display: contents !important;
}

/* Items que estaban dentro del aside ahora son grid items directos */
#contenedor > article:not(.events-list):has(> section.infoDatos > .moduloTicket) > aside > section.titRecomendaciones {
	grid-area: titRec !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	height: auto !important;
	min-height: 100% !important;
	float: none !important;
}

#contenedor > article:not(.events-list):has(> section.infoDatos > .moduloTicket) > aside > .redesIzq {
	grid-area: redes !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

/* El video (.redesDer del video.php incluido al final) va a la derecha de redes */
#contenedor > article:not(.events-list):has(> section.infoDatos > .moduloTicket) > .redesDer {
	grid-area: video !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	height: auto !important;
	float: none !important;
}

#contenedor > article:not(.events-list):has(> section.infoDatos > .moduloTicket) > .redesDer iframe {
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	aspect-ratio: 650 / 310;
	border: none;
	display: block;
}

#contenedor > article:not(.events-list):has(> section.infoDatos > .moduloTicket) > section.info {
	grid-area: info !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	height: auto !important;
	min-height: 100% !important;
	float: none !important;
}

#contenedor > article:not(.events-list):has(> section.infoDatos > .moduloTicket) > section.infoDatos {
	grid-area: infoDatos !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	height: auto !important;
	min-height: 100% !important;
	float: none !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 10px !important;
}

#contenedor > article:not(.events-list):has(> section.infoDatos > .moduloTicket) > section.infoDatos > .moduloTicket,
#contenedor > article:not(.events-list):has(> section.infoDatos > .moduloTicket) > section.infoDatos > .moduloTaquillas {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	float: none !important;
	box-sizing: border-box;
}

#contenedor > article:not(.events-list):has(> section.infoDatos > .moduloTicket) > section.txtRecomendaciones {
	grid-area: txtRec !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	overflow-y: visible !important;
	overflow-x: visible !important;
	float: none !important;
}

/* ============================================================
   Caso especial: programacion.php — catálogo de eventos en .logos
   La sección .logos crece al ancho del contenedor, .baja igual,
   y los 3 módulos internos (.moduloImgLogos, .moduloTxtLogos,
   .moduloLinks) se distribuyen proporcionalmente.
   ============================================================ */
#contenedor > article:not(.events-list) > section.logos {
	width: calc(67% - 5px) !important;
	max-width: 100% !important;
	height: auto !important;
	margin-left: 10px !important;
	box-sizing: border-box;
	padding: 10px !important;
}

#contenedor > article:not(.events-list) > section.logos > .baja {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 590px;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
}

/* Los 3 módulos internos: imágenes (25%), títulos (37%), links (38%) */
#contenedor > article:not(.events-list) > section.logos > .baja > .moduloImgLogos {
	width: 25% !important;
	max-width: 200px;
	float: left;
}

#contenedor > article:not(.events-list) > section.logos > .baja > .moduloTxtLogos {
	width: 37% !important;
	max-width: none;
	float: left;
}

#contenedor > article:not(.events-list) > section.logos > .baja > .moduloLinks {
	width: 38% !important;
	max-width: none;
	float: left;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* Ajustar el ancho de los items internos para que llenen su módulo */
#contenedor > article:not(.events-list) > section.logos > .baja .imgLogo {
	width: 100% !important;
	max-width: 145px;
	height: auto !important;
}

#contenedor > article:not(.events-list) > section.logos > .baja .imgLogo img {
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
}

#contenedor > article:not(.events-list) > section.logos > .baja .txtLogo {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	padding-right: 10px;
}

/* ============================================================
   Caso especial: recorrido.php — el article tiene .info +
   .contenedorRec + .caracteristicas + aside. Usamos CSS Grid
   para que .info y .contenedorRec tengan la misma altura.
   ============================================================ */
#contenedor>article:not(.events-list):has(> section.contenedorRec) {
	display: grid !important;
	grid-template-columns: calc(33% - 5px) 1fr !important;
	gap: 10px !important;
	align-items: stretch !important;
}

#contenedor>article:not(.events-list):has(> section.contenedorRec)>section.info,
#contenedor>article:not(.events-list):has(> section.contenedorRec)>section.contenedorRec {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	height: auto !important;
	min-height: 100% !important;
	float: none !important;
}

#contenedor>article:not(.events-list):has(> section.contenedorRec)>section.caracteristicas,
#contenedor>article:not(.events-list):has(> section.contenedorRec)>aside {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	margin: 0 !important;
}

/* La sección contenedora del iframe (recorrido virtual) — sin width
   fijo porque el grid del article ya la posiciona */
#contenedor>article:not(.events-list)>section.contenedorRec {
	max-width: 100% !important;
	height: auto !important;
	box-sizing: border-box;
	padding: 20px !important;
}

#contenedor>article:not(.events-list)>section.contenedorRec>.recorrido {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	aspect-ratio: 646 / 448;
	box-sizing: border-box;
}

#contenedor>article:not(.events-list)>section.contenedorRec>.recorrido>iframe {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	border: none;
	display: block;
}

/* ============================================================
   Caso especial: historia.php — .caracteristicas (azul)
   Ocupa el 100% del ancho del article (clear: both para limpiar
   floats anteriores). Distribuye sus 3 bloques internos en grid
   3 columnas con 33.33% cada una.
   ============================================================ */
#contenedor>article:not(.events-list)>section.caracteristicas {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 10px !important;
	float: left;
	clear: both !important;
	display: grid !important;
	grid-template-columns: repeat(3, 33.33%) !important;
	gap: 0 !important;
	box-sizing: border-box;
	padding: 25px 20px !important;
}

#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque1,
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque2,
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque3 {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 15px !important;
	float: none !important;
	box-sizing: border-box;
}

/* Liberar el .titCar de su float y width fijo (305px) para que no
   compita por espacio horizontal con los UL dentro de la columna. */
#contenedor>article:not(.events-list)>section.caracteristicas .titCar {
	float: none !important;
	width: 100% !important;
	max-width: 100%;
	margin-left: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 12px !important;
	padding: 0 !important;
	display: block;
}

/* Ocultar el primer UL de cada carBloque (los <li> vacíos que servían
   como marcadores visuales en el layout original con float). */
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque1>ul:first-of-type,
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque2>ul:first-of-type,
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque3>ul:first-of-type {
	display: none !important;
}

/* El UL con contenido real: liberar width fijo, mostrar bullets blancos */
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque1>ul:nth-of-type(2),
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque2>ul:nth-of-type(2),
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque3>ul:nth-of-type(2) {
	width: auto !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: 18px !important;
	margin-top: 14px !important;
	padding: 0 !important;
	list-style: disc !important;
	color: #ffffff;
}

/* LI con contenido: liberar height fijo del inline style + estilos de bullet */
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque1>ul:nth-of-type(2) li,
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque2>ul:nth-of-type(2) li,
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque3>ul:nth-of-type(2) li {
	height: auto !important;
	min-height: 0 !important;
	margin-bottom: 6px !important;
	padding: 0 !important;
	list-style: disc !important;
	font-size: 13px;
	line-height: 1.4;
}

/* "currentLi" son sub-headers (Sala y escenario, Camerinos, Promotores)
   embebidos dentro del UL de contenido. Los estilizamos como títulos.
   Usamos selector altamente específico para vencer al li genérico. */
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque1>ul:nth-of-type(2)>li.currentLi,
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque2>ul:nth-of-type(2)>li.currentLi,
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque3>ul:nth-of-type(2)>li.currentLi {
	list-style: none !important;
	list-style-type: none !important;
	font-weight: bold !important;
	margin-left: -18px !important;
	margin-top: 12px !important;
	margin-bottom: 8px !important;
	font-size: 14px !important;
}

#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque1>ul:nth-of-type(2)>li.currentLi:first-child,
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque2>ul:nth-of-type(2)>li.currentLi:first-child,
#contenedor>article:not(.events-list)>section.caracteristicas>.carBloque3>ul:nth-of-type(2)>li.currentLi:first-child {
	margin-top: 0 !important;
}

#contenedor>article:not(.events-list)>section.fotos>.foto1,
#contenedor>article:not(.events-list)>section.fotos>.foto2,
#contenedor>article:not(.events-list)>section.fotos>.foto3,
#contenedor>article:not(.events-list)>section.fotos>.foto4 {
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	float: none !important;
	box-sizing: border-box;
	aspect-ratio: 320 / 310;
	overflow: hidden;
}

#contenedor>article:not(.events-list)>section.fotos>p>img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* iframes (mapas, videos) responsivos */
#contenedor>article:not(.events-list) iframe {
	max-width: 100% !important;
	height: auto;
}

/* Imágenes responsivas */
#contenedor>article:not(.events-list) img {
	max-width: 100%;
	height: auto;
}

/* .txtRec (párrafo principal dentro de .txtRecomendaciones) ocupa
   el 100% del ancho de su contenedor en faq.php, butacas.php,
   auditorio.php, asiento.php, asiento2.php, aviso.php, etc. */
#contenedor>article:not(.events-list) .txtRecomendaciones .txtRec {
	width: auto !important;
	max-width: 100%;
	float: none !important;
	box-sizing: border-box;
	margin-left: 14px !important;
	margin-right: 14px !important;
}

/* .redesIzq al 100% del padre con iconos sociales centrados.
   Se aplica en todas las páginas (desktop + mobile). */
#contenedor>article:not(.events-list) .redesIzq {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	float: none !important;
	box-sizing: border-box;
	text-align: center;
	padding: 20px 15px !important;
}

/* Pleca "REDES" centrada */
#contenedor>article:not(.events-list) .redesIzq .plecaRed {
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
	display: block;
	text-align: center;
}

/* Filas de iconos como flex centrado */
#contenedor>article:not(.events-list) .redesIzq .iconosRedesTop,
#contenedor>article:not(.events-list) .redesIzq .iconosRedesBot {
	width: auto !important;
	height: auto !important;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 12px !important;
	float: none !important;
}

/* Cada icono individual sin float ni margin para que el flex centre bien */
#contenedor>article:not(.events-list) .redesIzq .iconosRedesTop>a,
#contenedor>article:not(.events-list) .redesIzq .iconosRedesBot>a,
#contenedor>article:not(.events-list) .redesIzq .imgRedes {
	float: none !important;
	margin-left: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* Pantallas grandes (laptop): 4 columnas */
@media (min-width: 1280px) {
	article.events-list {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* Pantallas medianas (default 900-1279px): 3 columnas — ya definido arriba */

/* Pantallas pequeñas: 2 columnas + banner apilado + ocultar 2do "NOTICIAS" */
@media (max-width: 899px) {
	article.events-list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.noticias .tituloNoticias:last-child {
		display: none;
	}

	/* ============================================================
	   PÁGINAS INTERNAS en mobile: apilar todo verticalmente al 100%
	   ============================================================ */
	#contenedor>article:not(.events-list) {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 0;
	}

	#contenedor>article:not(.events-list)>section,
	#contenedor>article:not(.events-list)>section.info,
	#contenedor>article:not(.events-list)>.info,
	#contenedor>article:not(.events-list)>aside,
	#contenedor>article:not(.events-list)>form,
	#contenedor>article:not(.events-list)>div {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
		box-sizing: border-box;
		padding: 15px !important;
	}

	/* Internos comunes en .info y .forma: liberar floats y anchos fijos */
	#contenedor>article:not(.events-list) section>*,
	#contenedor>article:not(.events-list) aside>*,
	#contenedor>article:not(.events-list) form>* {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Inputs y textareas full width */
	#contenedor>article:not(.events-list) input[type="text"],
	#contenedor>article:not(.events-list) input[type="email"],
	#contenedor>article:not(.events-list) input[type="tel"],
	#contenedor>article:not(.events-list) textarea,
	#contenedor>article:not(.events-list) select {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		float: none !important;
		margin-left: 0 !important;
	}

	/* iframes (mapas, videos) full width */
	#contenedor>article:not(.events-list) iframe {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* ============================================================
	   ASIDE/wrappers en mobile: usar display: contents en cualquier
	   wrapper que contenga .redesIzq, para que .redesIzq se vuelva
	   flex item directo del article y pueda reordenarse con `order`.
	   Cubre casos: aside directo (mayoría), section.infoDatos > aside
	   (faq.php), o cualquier otro anidamiento.
	   ============================================================ */
	#contenedor>article:not(.events-list) aside,
	#contenedor>article:not(.events-list)>section:has(.redesIzq) {
		display: contents !important;
	}

	/* Hijos directos del aside (que ahora son flex items del article)
	   reciben tratamiento full width */
	#contenedor>article:not(.events-list) aside>section,
	#contenedor>article:not(.events-list) aside>div,
	#contenedor>article:not(.events-list) aside>* {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
		box-sizing: border-box;
		padding: 15px !important;
	}

	/* Recomendaciones (título) explícitamente 100% / auto */
	#contenedor>article:not(.events-list) .titRecomendaciones {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		overflow-y: visible !important;
		overflow-x: visible !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* .txtRecomendaciones en mobile: full bleed del ancho de la pantalla.
	   Usamos calc(100% + 20px) y margenes negativos -10px para "salirse"
	   del padding de 10px del #contenedor. Más confiable que 100vw. */
	#contenedor>article:not(.events-list) .txtRecomendaciones {
		width: calc(100% + 20px) !important;
		max-width: calc(100% + 20px) !important;
		height: auto !important;
		min-height: 0 !important;
		overflow-y: visible !important;
		overflow-x: visible !important;
		float: none !important;
		margin-left: -10px !important;
		margin-right: -10px !important;
		box-sizing: border-box;
		padding: 20px 15px !important;
	}

	/* Mover el bloque de redes sociales (.redesIzq) al final del article,
	   justo arriba del footer */
	#contenedor>article:not(.events-list) .redesIzq {
		order: 99;
	}

	/* En restricciones.php, el .txtRecomendaciones contiene la imagen
	   (assets/prohibicion-AT-13.jpg). En mobile la subimos arriba del
	   título de Recomendaciones. Usamos :has(img) para detectarla
	   sólo en pages donde el .txtRecomendaciones contiene imagen. */
	#contenedor>article:not(.events-list) section.txtRecomendaciones:has(> img) {
		order: -1;
	}

	/* En mobile, reducir el texto del evento al 50% del original
	   para que el título y la fecha quepan bien en la tarjeta */
	.cuadro .infoTit {
		font-size: 12px;
	}

	.cuadro .infoTxt {
		font-size: 10px;
	}

	/* En mobile, invertir el orden visual: el slider (.bannerDer)
	   queda arriba y el bloque de info (.bannerIzq) abajo */
	#contenedor>.banner {
		flex-direction: column-reverse;
		aspect-ratio: auto;
		height: auto;
	}

	#contenedor>.banner .bannerIzq,
	#contenedor>.banner .bannerDer {
		flex: 1 1 auto;
		width: 100%;
		height: auto;
	}

	#contenedor>.banner .bannerIzq {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 20px 15px;
		box-sizing: border-box;
	}

	/* Bloques de texto del bannerIzq (Horario, Contáctanos): centrados */
	#contenedor>.banner .bannerIzq .bannerIzqTxt2 {
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: auto !important;
		max-width: 100%;
		text-align: center;
	}

	/* Iconos de redes sociales: centrados horizontalmente con flex */
	#contenedor>.banner .bannerIzq .iconosRedesTop {
		float: none !important;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 12px;
		width: auto !important;
		height: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	#contenedor>.banner .bannerIzq .imgRedes {
		float: none !important;
		margin-left: 0 !important;
	}

	/* CTA de suscripción al canal de WhatsApp centrado */
	#contenedor>.banner .bannerIzq .ctaSuscribete,
	#contenedor>.banner .bannerIzq form,
	#contenedor>.banner .bannerIzq a[href*="whatsapp"] {
		float: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	#contenedor>.banner .bannerDer {
		aspect-ratio: 650 / 310;
	}

	/* En mobile, el header se conserva con su layout de desktop (logo +
	   nav original con menús en su tamaño original). El usuario podría
	   tener scroll horizontal en pantallas muy estrechas. */
}