/* ============================================================
   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),
#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: 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;
}

/* 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;
	}

	/* ============================================================
	   Header en mobile:
	   - .header-top a 100% (logo arriba)
	   - nav apilado debajo
	   - Items del menú en cuadrícula 2 por fila
	   ============================================================ */
	header {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		flex-wrap: nowrap !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
	}

	header .header-top {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 100px !important;
		text-align: center;
		overflow: hidden;
	}

	header .header-top .logo {
		display: inline-block;
		float: none;
		max-width: 100%;
		height: auto;
	}

	/* En mobile, ocultar el nav original (con su slider, buscador y
	   menús desplegables) y usar el nav dedicado .mobile-nav */
	header>nav:not(.mobile-nav) {
		display: none !important;
	}

	/* Mostrar el nav dedicado para mobile como grid de 2 columnas.
	   display: block !important porque nav.css tiene
	   `nav.mobile-nav { display: none !important }` para ocultarlo
	   en otras páginas que no cargan este responsive CSS. */
	header>nav.mobile-nav {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 0 4px 0;
		padding: 0;
		background-color: #578db0;
		float: none !important;
		box-sizing: border-box;
		position: relative;
		z-index: 2;
		clear: both;
		overflow: visible;
	}

	/* Buscador del .mobile-nav: full width, arriba del menú */
	header>nav.mobile-nav form {
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 8px !important;
		box-sizing: border-box;
		float: none !important;
		display: block !important;
	}

	header>nav.mobile-nav .buscar-mobile {
		width: 100% !important;
		height: 36px !important;
		padding: 0 14px;
		font-size: 14px;
		border: none;
		box-sizing: border-box;
		-webkit-appearance: none;
		-moz-appearance: none;
		border-radius: 0;
		float: none !important;
	}

	/* UL principal del mobile-nav: flex-wrap de 2 columnas.
	   El .submenu-row es un hermano que toma flex-basis 100% y por
	   flex-wrap fuerza un line-break, dejando al padre en su posición. */
	header>nav.mobile-nav>ul {
		width: 100% !important;
		height: auto !important;
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 1px;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
		float: none !important;
	}

	/* Items principales: 50% del ancho cada uno (2 por fila) */
	header>nav.mobile-nav>ul>li {
		flex: 0 0 calc(50% - 0.5px) !important;
		max-width: calc(50% - 0.5px);
		min-height: 44px;
		background-color: #293f91;
		text-align: center;
		list-style: none;
		margin: 0 !important;
		float: none !important;
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		box-sizing: border-box;
		position: static !important;
		overflow: hidden;
	}

	/* Indicador visual cuando un item con submenú está abierto */
	header>nav.mobile-nav>ul>li.has-submenu.is-open {
		background-color: #1a5f89;
	}

	/* Submenu-row: hermano del padre, ocupa el 100% del ancho cuando
	   está abierto. flex-wrap fuerza el line-break automáticamente. */
	header>nav.mobile-nav>ul>li.submenu-row {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		display: none !important;
		min-height: 0 !important;
		background-color: #1a5f89 !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: visible !important;
		float: none !important;
	}

	header>nav.mobile-nav>ul>li.submenu-row.is-open {
		display: block !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Link directo en items sin submenú */
	header>nav.mobile-nav>ul>li>a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 44px;
		padding: 12px 8px;
		color: #ffffff !important;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 12px;
		font-weight: 500;
		text-align: center;
		box-sizing: border-box;
	}

	header>nav.mobile-nav>ul>li:hover:not(.has-submenu) {
		background-color: #ff0000;
	}

	/* Botón toggle del item padre con submenú */
	header>nav.mobile-nav .submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 100%;
		min-height: 44px;
		padding: 12px 8px;
		background: none;
		border: none;
		color: #ffffff;
		text-transform: uppercase;
		font-size: 12px;
		font-weight: 500;
		font-family: inherit;
		text-align: center;
		cursor: pointer;
		box-sizing: border-box;
	}

	/* Chevron indicador de dropdown (triángulo CSS) */
	header>nav.mobile-nav .chevron {
		display: inline-block;
		width: 0;
		height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid #ffffff;
		transition: transform 0.2s ease;
	}

	header>nav.mobile-nav .has-submenu.is-open .chevron {
		transform: rotate(180deg);
	}

	/* UL del submenú dentro de .submenu-row.
	   IMPORTANTE: height: auto !important para anular el `height: 25px`
	   que viene de nav.css (regla `nav ul`) y que recortaba el submenú
	   a una sola fila. */
	header>nav.mobile-nav .submenu-row .submenu {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		display: block !important;
		list-style: none;
		margin: 0 !important;
		padding: 0 !important;
		background-color: #1a5f89;
		float: none !important;
		overflow: visible !important;
	}

	/* Items del submenú (Historia, Recorrido, etc.) */
	header>nav.mobile-nav .submenu-row .submenu li {
		width: 100% !important;
		min-height: 40px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		background-color: transparent !important;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
	}

	header>nav.mobile-nav .submenu-row .submenu li a {
		display: block;
		width: 100%;
		padding: 10px 16px;
		color: #ffffff !important;
		text-decoration: none;
		font-size: 13px;
		text-align: center;
		text-transform: none;
	}

	header>nav.mobile-nav .submenu-row .submenu li:hover {
		background-color: #ff0000 !important;
	}
}