/**
 * Sistema visual "premium" de Multicines Tenerife.
 * =================================================
 *
 * Capa de diseño reutilizable. Se carga DESPUÉS de style.css y
 * estilo-mejoras.css, así que redefine los tokens y reestiliza los
 * componentes globales sin reescribir la hoja base: es reversible y no
 * rompe nada de lo que ya funciona.
 *
 * Orden de la cascada:
 *   style.css  ->  estilo-mejoras.css  ->  sistema.css  [ ->  estilo-apple.css ]
 *
 * En el estilo "Clásico" esta hoja es la última y manda. En el estilo
 * "Claro" (apple) la piel clara se carga después y sigue mandando sobre
 * el color, como hasta ahora.
 *
 * Mobile-first: la base es móvil y las media queries (min-width) añaden.
 * Todo el contenido sigue viniendo del plugin; aquí no hay ni un dato.
 */

/* ===================================================================
   1. TOKENS
   =================================================================== */

:root {
	/* --- Colores de marca (los que el admin puede sobrescribir en
	   Cine > Ajustes; aquí solo se afinan los valores por defecto). --- */
	--cine-navy: #131d33;        /* superficie elevada / cabecera */
	--cine-navy-deep: #0a0f1c;   /* fondo de página */
	--cine-cyan: #3d8bfd;        /* AZUL ELÉCTRICO: selección, formatos, enlaces */
	--cine-red: #e63329;         /* rojo: solo CTA de compra / acciones */
	--cine-white: #ffffff;

	/* --- Roles semánticos (lo que usan los componentes). --- */
	--cine-bg: var( --cine-navy-deep );
	--cine-bg-elevada: #131d33;
	--cine-bg-elevada-2: #1b2842; /* tarjeta sobre superficie elevada */
	--cine-fg: #ffffff;
	--cine-fg-tenue: #93a1ba;      /* gris azulado: info secundaria */
	--cine-acento: var( --cine-cyan );
	--cine-cta: var( --cine-red );
	--cine-borde: rgba( 255, 255, 255, 0.08 );
	--cine-borde-fuerte: rgba( 255, 255, 255, 0.14 );

	/* Azul eléctrico en versiones translúcidas, para fondos de chip y
	   estados hover sin tener que declarar rgba sueltos por todas partes. */
	--cine-acento-suave: rgba( 61, 139, 253, 0.14 );
	--cine-acento-borde: rgba( 61, 139, 253, 0.45 );

	/* --- Radios --- */
	--cine-radio: 12px;          /* tarjetas */
	--cine-radio-sm: 8px;        /* chips, botones pequeños */
	--cine-radio-lg: 16px;       /* superficies grandes / hero */
	--cine-radio-pill: 999px;

	/* --- Escala de espaciado (rem, crece con el tamaño de letra) --- */
	--cine-sp-1: 0.25rem;
	--cine-sp-2: 0.5rem;
	--cine-sp-3: 0.75rem;
	--cine-sp-4: 1rem;
	--cine-sp-5: 1.5rem;
	--cine-sp-6: 2rem;
	--cine-sp-7: 3rem;
	--cine-sp-8: 4rem;

	/* Ritmo entre secciones: generoso, responsive. */
	--cine-espaciado: clamp( 2rem, 5vw, 4rem );

	/* --- Sombras (muy discretas) --- */
	--cine-sombra: 0 1px 2px rgba( 0, 0, 0, 0.30 ), 0 10px 30px rgba( 0, 0, 0, 0.28 );
	--cine-sombra-suave: 0 1px 2px rgba( 0, 0, 0, 0.25 ), 0 6px 18px rgba( 0, 0, 0, 0.20 );

	/* --- Anchos --- */
	--cine-ancho-contenido: 1320px;
	--cine-ancho-lateral: 320px;

	/* --- Tipografía --- */
	--cine-fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ===================================================================
   2. BASE
   =================================================================== */

body {
	background: var( --cine-bg );
	color: var( --cine-fg );
	font-family: var( --cine-fuente );
	line-height: 1.55;
	letter-spacing: -0.006em;
}

/* Jerarquía: peso + tamaño + interlineado a la vez, no negrita para todo. */
h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
h2 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
h4 { font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }

a { color: var( --cine-acento ); }

.cine-contenedor {
	max-width: var( --cine-ancho-contenido );
	padding-left: clamp( 1rem, 4vw, 2.5rem );
	padding-right: clamp( 1rem, 4vw, 2.5rem );
}

/*
 * Ritmo vertical entre secciones, más compacto. La base del tema pone
 * padding: var(--cine-espaciado) arriba Y abajo en cada .cine-seccion, y con
 * el token grande de este sistema dos secciones seguidas sumaban hasta 8rem
 * de hueco. Aquí se aprieta bastante para que las secciones de la portada
 * queden pegadas, como una web comercial y no un folleto con aire de sobra.
 */
.cine-seccion { padding: clamp( 0.75rem, 2.2vw, 1.5rem ) 0; }

/* Título de sección con enlace "Ver todas" a la derecha, como los
   mockups. La plantilla puede envolver el h2 y el enlace en esta clase;
   si no lo hace, el h2 se ve igual de bien suelto. */
.cine-seccion-cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --cine-sp-4 );
	margin-bottom: var( --cine-sp-5 );
}

.cine-seccion-cabecera h2 { margin: 0; }

.cine-seccion h2 {
	font-size: clamp( 1.5rem, 3vw, 2.25rem );
	margin-bottom: var( --cine-sp-5 );
}

.cine-seccion-enlace {
	flex: 0 0 auto;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	color: var( --cine-acento );
}

.cine-seccion-enlace:hover { text-decoration: underline; }

/* ===================================================================
   3. CABECERA (escritorio + móvil), BUSCADOR y CAJÓN MÓVIL (offcanvas)
   =================================================================== */

.cine-header {
	background: rgba( 10, 15, 28, 0.85 );
	backdrop-filter: saturate( 160% ) blur( 14px );
	-webkit-backdrop-filter: saturate( 160% ) blur( 14px );
	border-bottom: 1px solid var( --cine-borde );
}

.cine-header-interior {
	min-height: 68px;
	gap: var( --cine-sp-5 );
	justify-content: flex-start;   /* logo, nav, y acciones a la derecha */
}

.cine-logo img { max-height: 40px; }

.cine-logo-texto {
	color: var( --cine-white );
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* --- Navegación de escritorio --------------------------------------- */

.cine-nav-desktop {
	display: flex;
	margin-left: var( --cine-sp-5 );
	margin-right: auto;   /* empuja las acciones al borde derecho */
}

.cine-nav-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp( 0.85rem, 1.8vw, 1.9rem );
}

.cine-nav-desktop a {
	display: inline-block;
	color: var( --cine-fg );
	text-decoration: none;
	font-weight: 500;
	font-size: 0.98rem;
	padding: 0.35rem 0;
	position: relative;
	white-space: nowrap;
	transition: color 160ms ease;
}

.cine-nav-desktop a:hover { color: var( --cine-acento ); }

/* Página actual: subrayado azul eléctrico. */
.cine-nav-desktop .cine-nav-item-actual > a { color: var( --cine-fg ); }

.cine-nav-desktop .cine-nav-item-actual > a::after,
.cine-nav-desktop .current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35rem;
	height: 2px;
	border-radius: 2px;
	background: var( --cine-acento );
}

/* Submenús de escritorio: desplegable bajo el elemento padre. Se abre al
   pasar el ratón y al enfocar con teclado (focus-within), sin JS. */
.cine-nav-desktop .cine-nav-lista > li { position: relative; }

.cine-nav-desktop .sub-menu {
	list-style: none;
	margin: 0;
	padding: var( --cine-sp-2 );
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12rem;
	display: none;
	flex-direction: column;
	gap: 0.1rem;
	background: var( --cine-bg-elevada );
	border: 1px solid var( --cine-borde );
	border-radius: var( --cine-radio-sm );
	box-shadow: var( --cine-sombra );
	z-index: 70;
}

.cine-nav-desktop .cine-nav-lista > li:hover > .sub-menu,
.cine-nav-desktop .cine-nav-lista > li:focus-within > .sub-menu {
	display: flex;
}

.cine-nav-desktop .sub-menu a {
	display: block;
	white-space: nowrap;
	padding: 0.5rem 0.6rem;
	border-radius: var( --cine-radio-sm );
	font-weight: 500;
}

.cine-nav-desktop .sub-menu a:hover { background: var( --cine-acento-suave ); }
.cine-nav-desktop .sub-menu .cine-nav-item-actual > a { color: var( --cine-acento ); }
.cine-nav-desktop .sub-menu .cine-nav-item-actual > a::after { content: none; }

/* --- Botones de la cabecera (buscar / menú) ------------------------- */

.cine-header-acciones {
	display: flex;
	align-items: center;
	gap: var( --cine-sp-2 );
	flex: 0 0 auto;
}

.cine-buscar-boton,
.cine-menu-boton {
	display: none;   /* se activan según viewport y disponibilidad de JS */
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var( --cine-borde-fuerte );
	border-radius: var( --cine-radio-sm );
	background: transparent;
	color: var( --cine-fg );
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease;
}

.cine-buscar-boton:hover,
.cine-menu-boton:hover {
	border-color: var( --cine-acento-borde );
	background: var( --cine-acento-suave );
}

.cine-buscar-boton .cine-icono,
.cine-menu-boton .cine-icono { width: 22px; height: 22px; }

/* El buscador es un extra: solo con JS que lo pueda plegar. */
.js .cine-buscar-boton { display: inline-flex; }

/* --- Buscador desplegable ------------------------------------------- */

.cine-buscador {
	border-top: 1px solid var( --cine-borde );
	background: var( --cine-bg-elevada );
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 240ms ease, opacity 200ms ease;
}

.cine-buscador.cine-buscador-abierto {
	max-height: 6rem;
	opacity: 1;
}

.cine-buscador-form {
	max-width: var( --cine-ancho-contenido );
	margin: 0 auto;
	padding: var( --cine-sp-3 ) clamp( 1rem, 4vw, 2.5rem );
	display: flex;
	align-items: center;
	gap: var( --cine-sp-2 );
}

.cine-buscador-icono {
	display: inline-flex;
	color: var( --cine-fg-tenue );
	flex: 0 0 auto;
}

.cine-buscador input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	background: var( --cine-bg );
	border: 1px solid var( --cine-borde-fuerte );
	border-radius: var( --cine-radio-sm );
	color: var( --cine-fg );
	padding: 0.6rem 0.85rem;
	font-size: 1rem;
}

.cine-buscador input[type="search"]:focus {
	outline: none;
	border-color: var( --cine-acento-borde );
	box-shadow: 0 0 0 3px var( --cine-acento-suave );
}

/* Azul de acento, no el rojo: el rojo se reserva para comprar entradas. */
.cine-buscador-enviar {
	flex: 0 0 auto;
	background: var( --cine-acento );
	color: var( --cine-white );
	border: none;
	border-radius: var( --cine-radio-sm );
	padding: 0.6rem 1.1rem;
	font-weight: 600;
	cursor: pointer;
}

.cine-buscador-enviar:hover { filter: brightness( 1.08 ); }

/* --- Cajón lateral del móvil (offcanvas) ---------------------------- */

.cine-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.cine-offcanvas-fondo {
	position: absolute;
	inset: 0;
	border: 0;
	padding: 0;
	background: rgba( 5, 8, 16, 0.62 );
	opacity: 0;
	cursor: pointer;
	transition: opacity 260ms ease;
	-webkit-backdrop-filter: blur( 2px );
	backdrop-filter: blur( 2px );
}

.cine-offcanvas-abierto .cine-offcanvas-fondo { opacity: 1; }

.cine-offcanvas-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min( 88vw, 380px );
	background: var( --cine-bg-elevada );
	border-left: 1px solid var( --cine-borde );
	box-shadow: -20px 0 50px rgba( 0, 0, 0, 0.4 );
	display: flex;
	flex-direction: column;
	transform: translateX( 100% );
	transition: transform 280ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
	overscroll-behavior: contain;
}

.cine-offcanvas-abierto .cine-offcanvas-panel { transform: translateX( 0 ); }

.cine-offcanvas-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var( --cine-sp-4 ) var( --cine-sp-5 );
	border-bottom: 1px solid var( --cine-borde );
	flex: 0 0 auto;
}

.cine-offcanvas-titulo {
	color: var( --cine-fg );
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}

.cine-offcanvas-cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var( --cine-borde-fuerte );
	border-radius: var( --cine-radio-sm );
	background: transparent;
	color: var( --cine-fg );
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease;
}

.cine-offcanvas-cerrar:hover {
	border-color: var( --cine-acento-borde );
	background: var( --cine-acento-suave );
}

.cine-offcanvas-nav {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var( --cine-sp-3 ) var( --cine-sp-4 );
}

.cine-offcanvas-nav .cine-nav-lista {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.cine-offcanvas-nav a {
	display: flex;
	align-items: center;
	gap: var( --cine-sp-3 );
	padding: 0.95rem 0.75rem;
	color: var( --cine-fg );
	text-decoration: none;
	font-weight: 500;
	font-size: 1.02rem;
	border-radius: var( --cine-radio-sm );
	transition: background 160ms ease, color 160ms ease;
}

.cine-offcanvas-nav a:hover { background: var( --cine-acento-suave ); }

.cine-offcanvas-nav .cine-nav-item-actual > a {
	color: var( --cine-fg );
	background: var( --cine-acento-suave );
}

.cine-offcanvas-nav .cine-nav-icono {
	display: inline-flex;
	flex: 0 0 auto;
	color: var( --cine-acento );
}

.cine-offcanvas-nav .cine-nav-item-actual > a .cine-nav-icono { color: var( --cine-acento ); }

/* Submenús en el cajón: lista anidada, sangrada bajo su elemento padre y
   siempre visible (sin desplegable que estorbe en pantalla táctil). */
.cine-offcanvas-nav .sub-menu {
	list-style: none;
	margin: 0 0 var( --cine-sp-1 );
	padding: 0 0 0 calc( 22px + var( --cine-sp-3 ) );  /* alineado bajo el texto del padre */
	display: flex;
	flex-direction: column;
}

.cine-offcanvas-nav .sub-menu a {
	padding: 0.7rem 0.75rem;
	font-size: 0.96rem;
	font-weight: 400;
	color: var( --cine-fg-tenue );
}

.cine-offcanvas-nav .sub-menu a:hover { color: var( --cine-fg ); }
.cine-offcanvas-nav .sub-menu .cine-nav-item-actual > a { color: var( --cine-fg ); }

/* Separación entre el grupo principal y el secundario (fallback sin menú). */
.cine-offcanvas-secundaria {
	margin-top: var( --cine-sp-3 );
	padding-top: var( --cine-sp-3 );
	border-top: 1px solid var( --cine-borde );
}

.cine-offcanvas-secundaria a { font-weight: 400; color: var( --cine-fg-tenue ); }
.cine-offcanvas-secundaria a:hover { color: var( --cine-fg ); }
.cine-offcanvas-secundaria .cine-nav-icono { color: var( --cine-fg-tenue ); }

.cine-offcanvas-pie {
	flex: 0 0 auto;
	padding: var( --cine-sp-4 ) var( --cine-sp-5 ) var( --cine-sp-5 );
	border-top: 1px solid var( --cine-borde );
	display: flex;
	flex-direction: column;
	gap: var( --cine-sp-4 );
}

.cine-offcanvas-redes {
	display: flex;
	gap: var( --cine-sp-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.cine-offcanvas-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem var( --cine-sp-4 );
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.cine-offcanvas-legal a { color: var( --cine-fg-tenue ); text-decoration: none; }
.cine-offcanvas-legal a:hover { color: var( --cine-fg ); text-decoration: underline; }

/* Bloqueo del scroll del cuerpo mientras el cajón está abierto. */
.cine-menu-bloqueado,
.cine-menu-bloqueado body { overflow: hidden; }

/* Visibilidad de la barra vs. el cajón según viewport. */
@media ( max-width: 900px ) {
	.js .cine-nav-desktop { display: none; }          /* con JS manda el cajón */
	.js .cine-menu-boton { display: inline-flex; }

	/* Sin JS: la barra se apila debajo del logo y sigue siendo usable. */
	html:not( .js ) .cine-nav-desktop {
		order: 3;
		flex-basis: 100%;
		margin: var( --cine-sp-2 ) 0 0;
	}

	html:not( .js ) .cine-nav-lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	html:not( .js ) .cine-nav-desktop a {
		display: block;
		padding: 0.8rem 0.25rem;
		border-bottom: 1px solid var( --cine-borde );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cine-offcanvas-panel,
	.cine-offcanvas-fondo,
	.cine-buscador { transition: none; }
}

/* ===================================================================
   4. PIE (escritorio + móvil)
   =================================================================== */

.cine-footer {
	background: var( --cine-bg-elevada );
	border-top: 1px solid var( --cine-borde );
	margin-top: var( --cine-espaciado );
	padding: var( --cine-sp-6 ) 0 var( --cine-sp-5 );
	color: var( --cine-fg-tenue );
	font-size: 0.92rem;
}

.cine-footer a { color: var( --cine-fg-tenue ); text-decoration: none; transition: color 160ms ease; }
.cine-footer a:hover { color: var( --cine-white ); }

/* --- Tira de confianza (afirmaciones reales del servicio) ----------- */

.cine-footer-ventajas {
	list-style: none;
	margin: 0 0 var( --cine-sp-6 );
	padding: 0 0 var( --cine-sp-6 );
	border-bottom: 1px solid var( --cine-borde );
	display: flex;
	flex-wrap: wrap;
	gap: var( --cine-sp-4 ) var( --cine-sp-6 );
	justify-content: center;
}

.cine-footer-ventajas li {
	display: flex;
	align-items: center;
	gap: var( --cine-sp-2 );
	color: var( --cine-fg );
	font-weight: 500;
}

.cine-footer-ventajas .cine-icono { color: var( --cine-acento ); flex: 0 0 auto; }

/* --- Rejilla de columnas ------------------------------------------- */

.cine-footer-rejilla {
	display: flex;
	flex-wrap: wrap;
	gap: var( --cine-sp-6 ) var( --cine-sp-7 );
	padding-bottom: var( --cine-sp-6 );
	border-bottom: 1px solid var( --cine-borde );
}

.cine-footer-marca {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var( --cine-sp-3 );
}

.cine-footer-logo { display: inline-flex; align-items: center; text-decoration: none; }
.cine-footer-logo img { max-height: 40px; width: auto; }

.cine-footer-desc {
	margin: 0;
	max-width: 34ch;
	line-height: 1.55;
	color: var( --cine-fg-tenue );
}

.cine-footer-redes {
	display: flex;
	gap: var( --cine-sp-2 );
	margin: var( --cine-sp-1 ) 0 0;
	padding: 0;
	list-style: none;
}

/* Columnas de enlaces: <details> para poder plegarlas en móvil. */
.cine-footer-col {
	flex: 1 1 150px;
	min-width: 0;
}

.cine-footer-col > summary {
	color: var( --cine-fg );
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: var( --cine-sp-3 );
	list-style: none;
	cursor: pointer;
}

.cine-footer-col > summary::-webkit-details-marker { display: none; }
.cine-footer-col > summary::marker { content: ""; }

.cine-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --cine-sp-3 );
}

.cine-footer-col-contacto a {
	display: flex;
	align-items: flex-start;
	gap: var( --cine-sp-2 );
}

.cine-footer-col-contacto .cine-icono { flex: 0 0 auto; margin-top: 1px; color: var( --cine-fg-tenue ); }

/* --- Barra inferior: copyright, legal, volver arriba ---------------- */

.cine-footer-inferior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --cine-sp-3 ) var( --cine-sp-5 );
	padding-top: var( --cine-sp-5 );
}

.cine-footer-copyright { margin: 0; }

.cine-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem var( --cine-sp-4 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.cine-footer-legal a { text-decoration: none; }
.cine-footer-legal a:hover { text-decoration: underline; }

.cine-volver-arriba {
	display: inline-flex;
	align-items: center;
	gap: var( --cine-sp-2 );
	padding: 0.5rem 0.9rem;
	border: 1px solid var( --cine-borde-fuerte );
	border-radius: var( --cine-radio-pill );
	color: var( --cine-fg );
	font-weight: 500;
	transition: border-color 160ms ease, background 160ms ease;
}

.cine-volver-arriba:hover {
	border-color: var( --cine-acento-borde );
	background: var( --cine-acento-suave );
}

.cine-volver-arriba .cine-icono { width: 18px; height: 18px; }

/* En escritorio las columnas van siempre abiertas (<details open>): se
   neutraliza el desplegable y se oculta cualquier flecha. El plegado en
   móvil lo hace el JS (un <details> cerrado por CSS no es fiable en los
   navegadores nuevos). */
@media ( min-width: 721px ) {
	.cine-footer-col > summary { pointer-events: none; }
}

/* En móvil el pie es compacto: las columnas se pliegan (acordeón) para no
   crecer hasta una altura absurda. */
@media ( max-width: 720px ) {
	.cine-footer-col {
		flex-basis: 100%;
		border-top: 1px solid var( --cine-borde );
		padding-top: var( --cine-sp-3 );
	}

	.cine-footer-col > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0;
		padding: 0.35rem 0;
	}

	.cine-footer-col > summary::after {
		content: "";
		width: 0.6rem;
		height: 0.6rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate( 45deg );
		transition: transform 180ms ease;
		opacity: 0.7;
	}

	.cine-footer-col[open] > summary::after { transform: rotate( -135deg ); }

	.cine-footer-col[open] > ul { padding-top: var( --cine-sp-3 ); }

	.cine-footer-inferior { justify-content: center; text-align: center; }
}

/* ===================================================================
   5. SELECTOR DE FECHAS (tarjetas apiladas SÁB / 29 / AGO)
   =================================================================== */

.cine-selector-dia {
	gap: var( --cine-sp-2 );
	background: transparent;
	padding-bottom: var( --cine-sp-3 );
	margin-bottom: var( --cine-sp-6 );
	scrollbar-width: none;
}

.cine-selector-dia::-webkit-scrollbar { display: none; }

.cine-selector-dia a {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	min-width: 4.6rem;
	padding: 0.65rem 0.5rem;
	background: var( --cine-bg-elevada );
	border: 1px solid var( --cine-borde );
	border-radius: var( --cine-radio );
	color: var( --cine-fg );
	text-transform: none;
	text-decoration: none;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.cine-selector-dia a:hover {
	border-color: var( --cine-acento-borde );
	transform: translateY( -1px );
}

.cine-fecha-semana {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var( --cine-fg-tenue );
}

.cine-fecha-numero {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.cine-fecha-mes {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var( --cine-fg-tenue );
}

/* Día activo: relleno azul eléctrico, todo el texto en blanco. */
.cine-selector-dia a.cine-selector-dia-activo {
	background: var( --cine-acento );
	border-color: var( --cine-acento );
	color: var( --cine-white );
	box-shadow: 0 6px 18px rgba( 61, 139, 253, 0.35 );
}

.cine-selector-dia a.cine-selector-dia-activo .cine-fecha-semana,
.cine-selector-dia a.cine-selector-dia-activo .cine-fecha-mes {
	color: rgba( 255, 255, 255, 0.85 );
}

/* ===================================================================
   6. BADGES: formatos (VOSE, 3D, 2D) y clasificación por edad
   =================================================================== */

/* Formatos: chip OUTLINE azul eléctrico (como en los mockups de la
   cartelera), no relleno. Se pinta con .cine-distintivo del plugin. */
.cine-distintivo {
	background: transparent;
	color: var( --cine-acento );
	border: 1px solid var( --cine-acento-borde );
	border-radius: var( --cine-radio-sm );
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.2em 0.55em;
}

/* Un evento (ópera, concierto...) mantiene su color ámbar diferenciado. */
.cine-distintivo-evento {
	background: transparent;
	color: #f2b705;
	border-color: rgba( 242, 183, 5, 0.5 );
}

.cine-distintivo-publicidad {
	color: var( --cine-fg-tenue );
	border-color: var( --cine-borde-fuerte );
}

/* Estreno: sigue siendo un chip sólido rojo, es una llamada de atención. */
.cine-etiqueta-estreno {
	background: var( --cine-cta );
	color: #fff;
	border-radius: var( --cine-radio-sm );
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	padding: 0.2em 0.6em;
}

/* Clasificación por edad: pastilla neutra con borde. El color por edad
   (verde/ámbar/rojo) se puede mapear en una iteración posterior con la
   tabla de términos; de momento, legible y consistente en los dos estilos. */
.cine-dia-cartelera-ficha-calificacion {
	display: inline-block;
	font-weight: 700;
	color: var( --cine-fg );
	background: var( --cine-bg-elevada-2 );
	border: 1px solid var( --cine-borde-fuerte );
	border-radius: 6px;
	padding: 0.05em 0.4em;
}

/* ===================================================================
   7. TARJETA DE PELÍCULA (MovieCard)
   =================================================================== */

.cine-cartelera {
	gap: clamp( 1rem, 2.5vw, 1.75rem );
}

.cine-tarjeta-pelicula a {
	display: block;
	border-radius: var( --cine-radio );
}

/*
 * El cartel manda la altura: proporción fija 2/3 recortando la imagen, para
 * que TODAS las tarjetas midan lo mismo. Estas tres propiedades (ancho,
 * proporción y recorte) vivían solo en blocks-frontend.css del plugin, que
 * NO se carga en la portada (sus tarjetas no vienen de un bloque): sin ellas
 * los carteles salían a su tamaño natural y las tarjetas subían y bajaban.
 */
.cine-tarjeta-pelicula img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var( --cine-radio );
	box-shadow: var( --cine-sombra-suave );
	transition: transform 300ms cubic-bezier( 0.23, 1, 0.32, 1 ), box-shadow 300ms ease;
}

.cine-tarjeta-pelicula a:hover img,
.cine-tarjeta-pelicula a:focus-visible img {
	transform: translateY( -4px );
	box-shadow: var( --cine-sombra );
}

/* Igualar altura de tarjeta: cartel arriba, luego características (edad,
   distintivos) y título, con el mismo hueco pase lo que pase. */
.cine-carrusel,
.cine-cartelera { align-items: stretch; }

.cine-carrusel > * { flex: 0 0 clamp( 150px, 42vw, 190px ); }

/* La tarjeta es un flex en columna que llena la altura que le da el
   "stretch" del carrusel; el enlace y los datos crecen para igualar todas.
   (Nada de height:100%: eso anula el stretch y las tarjetas volverían a
   descuadrarse.) */
.cine-tarjeta-pelicula {
	display: flex;
	flex-direction: column;
}

.cine-tarjeta-pelicula > a {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.cine-tarjeta-poster { display: block; }

.cine-tarjeta-poster-vacio {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: var( --cine-radio );
	background: linear-gradient( 135deg, var( --cine-bg-elevada ), var( --cine-bg-elevada-2 ) );
	border: 1px solid var( --cine-borde );
}

.cine-tarjeta-datos {
	display: flex;
	flex-direction: column;
	gap: var( --cine-sp-2 );
	padding-top: var( --cine-sp-3 );
	flex: 1 1 auto;
}

/* Las características (edad, estreno, versión) van justo debajo del título:
   cuando lo único que hay es el chip de edad, se pega al título y no queda
   colgando al pie con un hueco vacío en medio. Las tarjetas siguen igualadas
   de alto por el `align-items: stretch` del carrusel/cartelera. */
.cine-tarjeta-datos .cine-distintivos { margin-top: 0; }

/* Chip de edad legible en los dos estilos: borde y texto con tokens que la
   piel clara sí redefine (nada de fondo/borde "fuertes", que son blancos
   translúcidos pensados solo para el fondo oscuro). */
.cine-tarjeta-cal {
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.22em 0.5em;
	border-radius: var( --cine-radio-sm );
	background: transparent;
	color: var( --cine-fg-tenue );
	border: 1px solid var( --cine-borde );
}

/* Título a dos líneas como máximo: un título largo no empuja la tarjeta. */
.cine-tarjeta-datos h4 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ===================================================================
   8. SHOWTIME (hora clicable, con chevron; sin botón "Comprar")
   =================================================================== */

.cine-sesiones-horas {
	display: flex;
	flex-wrap: wrap;
	gap: var( --cine-sp-2 );
	list-style: none;
	margin: 0;
	padding: 0;
}

.cine-sesion-hora {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6em 0.9em;
	background: var( --cine-bg-elevada );
	border: 1px solid var( --cine-borde-fuerte );
	border-radius: var( --cine-radio-sm );
	color: var( --cine-fg );
	text-decoration: none;
	font-weight: 600;
	line-height: 1.1;
	transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.cine-sesion-hora small {
	display: block;
	font-size: 0.7rem;
	font-weight: 500;
	color: var( --cine-fg-tenue );
}

/* Chevron ">" que indica que la hora lleva directamente a la compra.
   Solo en las horas que son un enlace de verdad (<a>), no en las
   inertes (<span>, cuando no hay URL de compra). */
a.cine-sesion-hora::after {
	content: "";
	width: 0.42em;
	height: 0.42em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate( 45deg );
	opacity: 0.6;
	transition: opacity 160ms ease, transform 160ms ease;
}

a.cine-sesion-hora:hover,
a.cine-sesion-hora:focus-visible {
	background: var( --cine-cta );
	border-color: var( --cine-cta );
	color: #fff;
}

a.cine-sesion-hora:hover small,
a.cine-sesion-hora:focus-visible small {
	color: rgba( 255, 255, 255, 0.85 );
}

a.cine-sesion-hora:hover::after,
a.cine-sesion-hora:focus-visible::after {
	opacity: 1;
	transform: rotate( 45deg ) translate( 1px, -1px );
}

/* La versión (VOSE/3D) encima de sus horas; sin el botón de compra
   debajo (cada hora ya es clicable). */
.cine-dia-cartelera-sesiones .cine-sesiones-version {
	gap: var( --cine-sp-3 );
}

.cine-sesiones-version-etiqueta,
.cine-sesiones-version-titulo {
	color: var( --cine-fg-tenue );
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ===================================================================
   9. FILA DE PELÍCULA EN LA CARTELERA POR DÍAS
   =================================================================== */

.cine-dia-cartelera {
	border-top: 1px solid var( --cine-borde );
	padding: var( --cine-sp-6 ) 0;
}

/* Especificidad a la par de la regla base (.cine-dia-cartelera
   .cine-dia-cartelera-titulo) para ganarle el color de acento: el
   encabezado del día va en blanco y en minúscula natural, como el mockup. */
.cine-dia-cartelera .cine-dia-cartelera-titulo {
	color: var( --cine-fg );
	text-transform: none;
	font-size: 1.15rem;
	font-weight: 700;
}

.cine-dia-cartelera-pelicula {
	gap: var( --cine-sp-5 );
	padding: 0;
	background: transparent;
	border: 0;
}

.cine-dia-cartelera-enlace img {
	border-radius: var( --cine-radio );
	box-shadow: var( --cine-sombra-suave );
}

.cine-dia-cartelera-pelicula-titulo {
	font-size: 1.15rem;
	font-weight: 700;
}

.cine-dia-cartelera-ficha {
	background: transparent;
	border: 0;
	padding: 0;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	color: var( --cine-fg-tenue );
}

/* En la página completa de cartelera (rejilla de tarjetas) la película
   sí es una tarjeta con superficie; se mantiene el patrón del tema pero
   con el nuevo lenguaje. */
.cine-dias-cartelera--completa .cine-dia-cartelera-pelicula {
	background: var( --cine-bg-elevada );
	border: 1px solid var( --cine-borde );
	border-radius: var( --cine-radio );
	padding: var( --cine-sp-4 );
	box-shadow: var( --cine-sombra-suave );
}

/* ===================================================================
   10. HERO SLIDER
   =================================================================== */

.cine-slider-item img {
	aspect-ratio: 16 / 8;
	border-radius: var( --cine-radio-lg );
}

@media ( max-width: 600px ) {
	.cine-slider-item img { aspect-ratio: 3 / 4; }  /* cartel vertical en móvil */
}

.cine-slider-item h3 {
	left: var( --cine-sp-5 );
	right: var( --cine-sp-5 );
	bottom: var( --cine-sp-5 );
	font-size: clamp( 1.5rem, 4vw, 2.75rem );
	font-weight: 800;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 20px rgba( 0, 0, 0, 0.8 );
}

/* Velo inferior para que el título se lea sobre cualquier imagen. */
.cine-slider-item > a::after,
.cine-slider-item > div::after {
	content: "";
	position: absolute;
	inset: 40% 0 0 0;
	background: linear-gradient( to bottom, transparent, rgba( 10, 15, 28, 0.85 ) );
	border-radius: 0 0 var( --cine-radio-lg ) var( --cine-radio-lg );
	pointer-events: none;
}

.cine-slider-item .cine-etiqueta-estreno,
.cine-slider-item .cine-distintivos {
	top: var( --cine-sp-5 );
	left: var( --cine-sp-5 );
	z-index: 1;
}

/* ===================================================================
   11. CARRUSEL: flechas
   =================================================================== */

.cine-carrusel-flecha {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var( --cine-borde-fuerte );
	background: var( --cine-bg-elevada );
	color: var( --cine-fg );
	box-shadow: var( --cine-sombra-suave );
	transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.cine-carrusel-flecha:hover,
.cine-carrusel-flecha:focus-visible {
	border-color: var( --cine-acento-borde );
	color: var( --cine-acento );
}

/* ===================================================================
   12. TARJETAS DE PROMOCIÓN / BANNER / LATERAL
   =================================================================== */

.cine-banner,
.cine-lateral-promo,
.cine-tarjeta-precios,
.cine-sala {
	background: var( --cine-bg-elevada );
	border: 1px solid var( --cine-borde );
	border-radius: var( --cine-radio );
	box-shadow: var( --cine-sombra-suave );
	overflow: hidden;
}

/* ===================================================================
   14. HOME · HERO (contenido, subtítulo, badges, CTA, indicadores)
   =================================================================== */

.cine-seccion-slider { padding-top: var( --cine-sp-5 ); }

/* Caja de contenido sobre el hero, abajo a la izquierda. Sustituye al
   h3 suelto que la base posicionaba en absoluto. */
.cine-slider-contenido {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --cine-sp-3 );
	padding: clamp( 1.25rem, 4vw, 3rem );
}

/* El h3 ya no va en absoluto: vive dentro de .cine-slider-contenido. */
.cine-slider-item .cine-slider-contenido h3 {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	margin: 0;
	max-width: 18ch;
	font-size: clamp( 1.75rem, 5vw, 3.5rem );
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var( --cine-white );
	text-shadow: 0 2px 24px rgba( 0, 0, 0, 0.75 );
}

.cine-slider-subtitulo {
	margin: 0;
	font-size: clamp( 0.95rem, 1.6vw, 1.15rem );
	font-weight: 500;
	color: rgba( 255, 255, 255, 0.9 );
	text-shadow: 0 1px 10px rgba( 0, 0, 0, 0.7 );
}

/* Las badges del hero van en línea con el contenido, no en absoluto. */
.cine-slider-item .cine-slider-badges {
	position: static;
	top: auto;
	left: auto;
	margin: 0;
}

/* En el hero las badges se leen sobre imagen: chip relleno translúcido. */
.cine-slider-badges .cine-distintivo {
	background: rgba( 10, 15, 28, 0.55 );
	border-color: rgba( 255, 255, 255, 0.4 );
	color: #fff;
	backdrop-filter: blur( 4px );
}

/* CTA contextual: rojo, la acción principal. */
.cine-slider-cta {
	display: inline-block;
	margin-top: var( --cine-sp-1 );
	padding: 0.7em 1.4em;
	background: var( --cine-cta );
	color: #fff;
	border-radius: var( --cine-radio-sm );
	font-weight: 700;
	font-size: 0.98rem;
	box-shadow: 0 8px 24px rgba( 230, 51, 41, 0.35 );
	transition: filter 160ms ease, transform 160ms ease;
}

.cine-slider-item a:hover .cine-slider-cta {
	filter: brightness( 1.08 );
	transform: translateY( -1px );
}

/* Indicadores (puntos) del hero, generados por carrusel.js. */
.cine-carrusel-puntos {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var( --cine-sp-4 );
}

.cine-carrusel-punto {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --cine-borde-fuerte );
	cursor: pointer;
	transition: background 160ms ease, width 160ms ease;
}

.cine-carrusel-punto[aria-current="true"] {
	background: var( --cine-acento );
	width: 22px;
	border-radius: var( --cine-radio-pill );
}

/* ===================================================================
   14b. HOME · PROMOCIÓN DESTACADA (banner ancho arriba, rota si varias)
   =================================================================== */

.cine-seccion-promo-destacada { padding-top: var( --cine-sp-5 ); }

/* Banner: solo la imagen que sube el cine, a lo ancho del contenedor. Sin
   título ni botón; la pieza gráfica ya lo lleva todo. */
.cine-promo-destacada-banner {
	display: block;
	border-radius: var( --cine-radio-lg );
	overflow: hidden;
	box-shadow: var( --cine-sombra-suave );
}

.cine-promo-destacada-banner img {
	width: 100%;
	height: auto;
	/* Tope de altura para un banner: una imagen muy alta se recorta en vez
	   de ocupar media pantalla. Una imagen apaisada normal no llega al tope. */
	max-height: 180px;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Cuando rotan (varias): cada banner ocupa un slide completo del marco del
   slider (flechas, swipe, autoplay y puntos). Se quita el velo oscuro del
   hero, que aquí no toca, y se deja la imagen entera. */
.cine-promo-destacada-lista .cine-slider-item { align-self: stretch; }
.cine-promo-destacada-lista .cine-slider-item > .cine-promo-destacada-banner { height: 100%; }

.cine-promo-destacada-lista .cine-slider-item > a::after,
.cine-promo-destacada-lista .cine-slider-item > span::after,
.cine-promo-destacada-lista .cine-slider-item > div::after {
	content: none;
}

/* Flechas sobre el banner, como en el hero (el marco de la promo no lleva
   la clase .cine-slider-marco, así que se recrea aquí la superposición). */
.cine-promo-destacada-marco .cine-carrusel-controles {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0 0.75rem;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

.cine-promo-destacada-marco .cine-carrusel-flecha {
	pointer-events: auto;
	background: rgba( 15, 24, 56, 0.6 );
	border-color: rgba( 255, 255, 255, 0.35 );
	color: var( --cine-white );
	backdrop-filter: blur( 2px );
}

/* ===================================================================
   15. HOME · HOY EN EL CINE (rejilla de tarjetas compactas)
   =================================================================== */

.cine-hoy-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 1rem, 2vw, 1.5rem );
}

@media ( min-width: 720px ) {
	.cine-hoy-grid { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( min-width: 1200px ) {
	.cine-hoy-grid { grid-template-columns: repeat( 3, 1fr ); }
}

/* Tarjeta horizontal: póster a la izquierda, información a la derecha.
   Compacta a propósito: caben muchas películas sin tarjetas gigantes. */
.cine-hoy-card {
	display: grid;
	grid-template-columns: clamp( 84px, 22%, 116px ) minmax( 0, 1fr );
	gap: var( --cine-sp-4 );
	padding: var( --cine-sp-4 );
	background: var( --cine-bg-elevada );
	border: 1px solid var( --cine-borde );
	border-radius: var( --cine-radio );
	box-shadow: var( --cine-sombra-suave );
}

.cine-hoy-poster { display: block; }

.cine-hoy-poster img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var( --cine-radio-sm );
	display: block;
}

.cine-hoy-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var( --cine-sp-2 );
}

.cine-hoy-titulo {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
}

.cine-hoy-titulo a { color: var( --cine-fg ); text-decoration: none; }
.cine-hoy-titulo a:hover { color: var( --cine-acento ); }

.cine-hoy-meta {
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var( --cine-fg-tenue );
}

.cine-hoy-cal {
	font-weight: 700;
	color: var( --cine-fg );
	background: var( --cine-bg-elevada-2 );
	border: 1px solid var( --cine-borde-fuerte );
	border-radius: 6px;
	padding: 0.02em 0.4em;
	font-size: 0.78rem;
}

.cine-hoy-badges { margin: 0.1rem 0; gap: 0.35rem; }

.cine-hoy-sesiones {
	display: flex;
	flex-direction: column;
	gap: var( --cine-sp-2 );
	margin-top: var( --cine-sp-1 );
}

/* Horas un poco más apretadas aquí que en la ficha, para que quepan
   muchas en una tarjeta compacta. */
.cine-hoy-sesiones .cine-sesion-hora { padding: 0.45em 0.7em; }

/* ===================================================================
   16. HOME · TARJETA DE FIDELIZACIÓN
   =================================================================== */

.cine-fidelizacion {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --cine-sp-4 );
	align-items: center;
	padding: var( --cine-sp-5 );
	background: linear-gradient( 120deg, rgba( 61, 139, 253, 0.14 ), var( --cine-bg-elevada ) 60% );
	border: 1px solid var( --cine-acento-borde );
	border-radius: var( --cine-radio-lg );
	text-decoration: none;
	color: var( --cine-fg );
}

@media ( min-width: 720px ) {
	.cine-fidelizacion { grid-template-columns: 160px minmax( 0, 1fr ); }
}

.cine-fidelizacion-imagen img {
	width: 100%;
	border-radius: var( --cine-radio );
	display: block;
}

.cine-fidelizacion-texto { display: flex; flex-direction: column; gap: var( --cine-sp-2 ); }

.cine-fidelizacion-titulo { font-size: 1.3rem; font-weight: 700; }
.cine-fidelizacion-resumen { color: var( --cine-fg-tenue ); }
.cine-fidelizacion-cta { color: var( --cine-acento ); font-weight: 600; }

/* Eventos y sesiones especiales: rejilla de tarjetas visuales (usa las
   clases .cine-banners/.cine-banner de la base, ya reestilizadas). */
.cine-seccion-sesiones-especiales .cine-banner h3 {
	margin: var( --cine-sp-3 ) var( --cine-sp-4 ) var( --cine-sp-4 );
	font-size: 1.05rem;
}

/* ===================================================================
   18. PÁGINA CARTELERA (día → película → sesión → compra)
   =================================================================== */

.cine-cartelera-encabezado { margin-bottom: var( --cine-sp-5 ); }

.cine-cartelera-encabezado h1 {
	margin: 0;
	font-size: clamp( 2rem, 5vw, 3rem );
}

.cine-pagina-subtitulo {
	margin: var( --cine-sp-2 ) 0 0;
	color: var( --cine-fg-tenue );
	font-size: 1.05rem;
}

/* El "HOY" encima del día, en el selector. */
.cine-fecha-hoy {
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var( --cine-acento );
}

.cine-selector-dia a.cine-selector-dia-activo .cine-fecha-hoy {
	color: rgba( 255, 255, 255, 0.9 );
}

/* --- Selector de día pegajoso en móvil ------------------------------
   Solo en móvil, y con fondo sólido para que no se transparente el
   contenido al hacer scroll. En escritorio no se pega (cabe todo). */
@media ( max-width: 900px ) {
	.cine-cartelera-page .cine-selector-dia {
		position: sticky;
		top: 0;
		z-index: 30;
		background: var( --cine-bg );
		margin-left: calc( -1 * clamp( 1rem, 4vw, 2.5rem ) );
		margin-right: calc( -1 * clamp( 1rem, 4vw, 2.5rem ) );
		padding-left: clamp( 1rem, 4vw, 2.5rem );
		padding-right: clamp( 1rem, 4vw, 2.5rem );
		padding-top: var( --cine-sp-2 );
		border-bottom: 1px solid var( --cine-borde );
	}
}

/* --- Filtros (mejora progresiva: sin JS no se pintan) --------------- */
html:not( .js ) .cine-cartelera-filtros { display: none; }

.cine-cartelera-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: var( --cine-sp-3 );
	margin-bottom: var( --cine-sp-6 );
}

.cine-filtro select {
	appearance: none;
	-webkit-appearance: none;
	background: var( --cine-bg-elevada );
	color: var( --cine-fg );
	border: 1px solid var( --cine-borde-fuerte );
	border-radius: var( --cine-radio-sm );
	padding: 0.6em 2.2em 0.6em 0.9em;
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	/* Flecha del select dibujada en CSS (chevron abajo). */
	background-image:
		linear-gradient( 45deg, transparent 50%, currentColor 50% ),
		linear-gradient( 135deg, currentColor 50%, transparent 50% );
	background-position:
		calc( 100% - 1.05em ) 55%,
		calc( 100% - 0.75em ) 55%;
	background-size: 0.36em 0.36em, 0.36em 0.36em;
	background-repeat: no-repeat;
}

.cine-filtro select:focus-visible { outline: 2px solid var( --cine-acento ); outline-offset: 2px; }

.cine-filtro-orden { margin-left: auto; }

/* En móvil, más simple: se deja formato y género, se oculta el orden. */
@media ( max-width: 600px ) {
	.cine-filtro-orden { display: none; }
}

/* --- Lista de películas: filas horizontales ------------------------ */
.cine-cartelera-lista { display: flex; flex-direction: column; }

.cine-cartelera-fila {
	display: grid;
	grid-template-columns: 92px minmax( 0, 1fr );
	grid-template-areas:
		"poster info"
		"sesiones sesiones";
	gap: var( --cine-sp-4 );
	padding: var( --cine-sp-5 ) 0;
	border-top: 1px solid var( --cine-borde );
}

.cine-cartelera-lista .cine-cartelera-fila:first-child { border-top: 0; padding-top: var( --cine-sp-3 ); }

.cine-cartelera-poster { grid-area: poster; display: block; }

.cine-cartelera-poster img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var( --cine-radio );
	box-shadow: var( --cine-sombra-suave );
	display: block;
}

.cine-cartelera-info {
	grid-area: info;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var( --cine-sp-2 );
}

.cine-cartelera-titulo { margin: 0; font-size: 1.2rem; font-weight: 700; }
.cine-cartelera-titulo a { color: var( --cine-fg ); text-decoration: none; }
.cine-cartelera-titulo a:hover { color: var( --cine-acento ); }

.cine-cartelera-meta {
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: var( --cine-fg-tenue );
}

.cine-cartelera-badges { gap: 0.35rem; }

/* Sinopsis y "Más información": solo en escritorio, para que el móvil
   quede compacto y quepan varias películas con poco scroll. */
.cine-cartelera-sinopsis {
	display: none;
	margin: 0;
	color: var( --cine-fg-tenue );
	max-width: 62ch;
	line-height: 1.55;
}

.cine-cartelera-mas {
	display: none;
	align-self: flex-start;
	font-size: 0.9rem;
	font-weight: 600;
	color: var( --cine-acento );
	text-decoration: none;
}

.cine-cartelera-mas:hover { text-decoration: underline; }

.cine-cartelera-sesiones {
	grid-area: sesiones;
	display: flex;
	flex-direction: column;
	gap: var( --cine-sp-3 );
}

/* Escritorio: fila de verdad — póster · info · horarios a la derecha,
   con la sinopsis y "Más información" a la vista. */
@media ( min-width: 900px ) {
	.cine-cartelera-fila {
		grid-template-columns: 150px minmax( 0, 1fr ) minmax( 0, 360px );
		grid-template-areas: "poster info sesiones";
		gap: var( --cine-sp-5 );
		align-items: start;
	}

	.cine-cartelera-sinopsis,
	.cine-cartelera-mas { display: block; }

	.cine-cartelera-sesiones { align-content: flex-start; }
}

/* Sesión próxima a empezar (marcada por cartelera-filtros.js). */
.cine-sesion-hora--pronto {
	border-color: var( --cine-acento );
	box-shadow: 0 0 0 1px var( --cine-acento ) inset;
}

.cine-sesion-hora-pronto-aviso {
	display: block;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --cine-acento );
}

a.cine-sesion-hora--pronto:hover .cine-sesion-hora-pronto-aviso { color: #fff; }

/* Sesión sin enlace de compra (no vendible): se ve, pero apagada. */
.cine-sesion-hora--inerte { opacity: 0.55; cursor: default; }
.cine-sesion-hora--inerte::after { display: none; }

/* Estados vacíos. */
.cine-cartelera-vacio,
.cine-cartelera-sin-resultados {
	color: var( --cine-fg-tenue );
	background: var( --cine-bg-elevada );
	border: 1px dashed var( --cine-borde-fuerte );
	border-radius: var( --cine-radio );
	padding: var( --cine-sp-5 );
	text-align: center;
}

/* ===================================================================
   20. LISTADOS (encabezado común + botones)
   =================================================================== */

.cine-listado-encabezado { margin-bottom: var( --cine-sp-6 ); }
.cine-listado-encabezado h1 { margin: 0; font-size: clamp( 2rem, 5vw, 3rem ); }

.cine-btn {
	display: inline-block;
	padding: 0.65em 1.3em;
	border-radius: var( --cine-radio-sm );
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	text-align: center;
}

.cine-btn-compra { background: var( --cine-cta ); color: #fff; }
.cine-btn-compra:hover { filter: brightness( 1.08 ); }
.cine-btn-secundario {
	background: transparent;
	color: var( --cine-acento );
	border: 1px solid var( --cine-acento-borde );
}
.cine-btn-secundario:hover { background: var( --cine-acento-suave ); }

/* --- PRÓXIMAMENTE: rejilla de 2 (móvil) a 6 (escritorio) ------------ */
.cine-grid-proximamente {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: clamp( 0.75rem, 2vw, 1.5rem );
}

@media ( min-width: 620px )  { .cine-grid-proximamente { grid-template-columns: repeat( 3, 1fr ); } }
@media ( min-width: 900px )  { .cine-grid-proximamente { grid-template-columns: repeat( 4, 1fr ); } }
@media ( min-width: 1200px ) { .cine-grid-proximamente { grid-template-columns: repeat( 5, 1fr ); } }
@media ( min-width: 1440px ) { .cine-grid-proximamente { grid-template-columns: repeat( 6, 1fr ); } }

.cine-proxima-poster {
	position: relative;
	display: block;
	border-radius: var( --cine-radio );
	overflow: hidden;
}

.cine-proxima-poster img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	display: block;
	box-shadow: var( --cine-sombra-suave );
	transition: transform 300ms cubic-bezier( 0.23, 1, 0.32, 1 );
}

.cine-proxima:hover .cine-proxima-poster img { transform: scale( 1.04 ); }

/* Fecha de estreno muy visible: pastilla azul sobre el póster. */
.cine-proxima-fecha {
	position: absolute;
	left: 0.6rem;
	bottom: 0.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	padding: 0.4rem 0.55rem;
	background: var( --cine-acento );
	color: #fff;
	border-radius: var( --cine-radio-sm );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.4 );
}

.cine-proxima-fecha-dia { font-size: 1.15rem; font-weight: 800; }
.cine-proxima-fecha-mes { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; }

.cine-proxima-cuerpo { margin-top: var( --cine-sp-3 ); display: flex; flex-direction: column; gap: var( --cine-sp-2 ); align-items: flex-start; }
.cine-proxima-titulo { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.cine-proxima-titulo a { color: var( --cine-fg ); text-decoration: none; }
.cine-proxima-titulo a:hover { color: var( --cine-acento ); }
.cine-proxima-mas { font-size: 0.88rem; font-weight: 600; color: var( --cine-acento ); text-decoration: none; }
.cine-proxima-mas:hover { text-decoration: underline; }

/* --- VENTA ANTICIPADA: tarjetas premium, 1 (móvil) a 3 (escritorio) - */
.cine-grid-anticipada {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 1rem, 2vw, 1.5rem );
}

@media ( min-width: 640px )  { .cine-grid-anticipada { grid-template-columns: repeat( 2, 1fr ); } }
@media ( min-width: 1100px ) { .cine-grid-anticipada { grid-template-columns: repeat( 3, 1fr ); } }

.cine-anticipada {
	display: grid;
	grid-template-columns: 110px minmax( 0, 1fr );
	gap: var( --cine-sp-4 );
	padding: var( --cine-sp-4 );
	background: linear-gradient( 130deg, rgba( 61, 139, 253, 0.10 ), var( --cine-bg-elevada ) 55% );
	border: 1px solid var( --cine-borde-fuerte );
	border-radius: var( --cine-radio-lg );
	box-shadow: var( --cine-sombra-suave );
}

.cine-anticipada-poster { display: block; }
.cine-anticipada-poster img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var( --cine-radio );
	display: block;
}

.cine-anticipada-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: var( --cine-sp-2 ); align-items: flex-start; }
.cine-anticipada-kicker {
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
	text-transform: uppercase; color: var( --cine-acento );
}
.cine-anticipada-titulo { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.cine-anticipada-titulo a { color: var( --cine-fg ); text-decoration: none; }
.cine-anticipada-titulo a:hover { color: var( --cine-acento ); }
.cine-anticipada-fecha { margin: 0; font-size: 0.9rem; color: var( --cine-fg-tenue ); }
.cine-anticipada-fecha strong { color: var( --cine-fg ); }
.cine-anticipada-horas { margin: var( --cine-sp-1 ) 0; }
.cine-anticipada-horas .cine-sesion-hora { padding: 0.4em 0.65em; }
.cine-anticipada .cine-btn { margin-top: var( --cine-sp-1 ); }

/* --- EVENTOS Y SESIONES ESPECIALES: tarjetas por categoría ---------- */
.cine-grid-eventos {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 1rem, 2.5vw, 1.75rem );
}

@media ( min-width: 640px )  { .cine-grid-eventos { grid-template-columns: repeat( 2, 1fr ); } }
@media ( min-width: 1100px ) { .cine-grid-eventos { grid-template-columns: repeat( 3, 1fr ); } }

.cine-evento {
	display: flex;
	flex-direction: column;
	background: var( --cine-bg-elevada );
	border: 1px solid var( --cine-borde );
	border-radius: var( --cine-radio-lg );
	overflow: hidden;
	box-shadow: var( --cine-sombra-suave );
	/* Color de acento por categoría (se sobrescribe abajo por tipo). */
	--cine-evento-color: var( --cine-acento );
	border-top: 3px solid var( --cine-evento-color );
	transition: transform 300ms cubic-bezier( 0.23, 1, 0.32, 1 ), box-shadow 300ms ease;
}

.cine-evento:hover { transform: translateY( -3px ); box-shadow: var( --cine-sombra ); }

.cine-evento-imagen { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.cine-evento-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cine-evento-categoria {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.25em 0.7em;
	background: var( --cine-evento-color );
	color: #fff;
	border-radius: var( --cine-radio-pill );
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.35 );
}

.cine-evento-cuerpo { padding: var( --cine-sp-4 ); display: flex; flex-direction: column; gap: var( --cine-sp-2 ); flex: 1 1 auto; }
.cine-evento-titulo { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.cine-evento-titulo a { color: var( --cine-fg ); text-decoration: none; }
.cine-evento-titulo a:hover { color: var( --cine-evento-color ); }
.cine-evento-fecha { margin: 0; font-size: 0.85rem; font-weight: 600; color: var( --cine-evento-color ); text-transform: capitalize; }
.cine-evento-descripcion { margin: 0; color: var( --cine-fg-tenue ); line-height: 1.55; }
.cine-evento-cta {
	margin-top: auto;
	align-self: flex-start;
	padding-top: var( --cine-sp-2 );
	font-weight: 700;
	color: var( --cine-evento-color );
	text-decoration: none;
}
.cine-evento-cta::after { content: " ›"; }
.cine-evento-cta:hover { text-decoration: underline; }

/* Un color por categoría, tomando los tokens del sistema. */
.cine-evento--concierto,
.cine-evento--festival { --cine-evento-color: #b06bff; }   /* violeta: música/festival */
.cine-evento--opera    { --cine-evento-color: #f2b705; }   /* ámbar: ópera */
.cine-evento--preestreno { --cine-evento-color: var( --cine-cta ); } /* rojo: preestreno */
.cine-evento--evento   { --cine-evento-color: #22c1a6; }   /* verde azulado: evento */
.cine-evento--ciclo    { --cine-evento-color: var( --cine-acento ); } /* azul: ciclo */

/* ===================================================================
   21. ACCESIBILIDAD / MOVIMIENTO
   =================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.cine-tarjeta-pelicula a:hover img,
	.cine-selector-dia a:hover,
	a.cine-sesion-hora:hover::after {
		transform: none;
	}
}