/* ==========================================================================
   ALMMA 59:59 — componentes de marca
   Lo que no cubre theme.json: texturas, etiquetas, sellos y la ficha de sala.
   ========================================================================== */

:root {
	--almma-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
	/* Alto aproximado del header (logo 48 + padding + borde). Se usa para subir
	   el hero por detrás de la barra translúcida. Ligeramente holgado para que
	   nunca quede una franja entre el header y el hero. */
	--almma-header-h: 82px;
}

/* Grano de papel sobre el fondo: sutil, pero quita el plano digital.
   pointer-events none para que no bloquee clics. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	background-image: var(--almma-grano);
	opacity: 0.035;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 9999;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* --------------------------------------------------------------------------
   Etiqueta de cinta — el "TU VUELO ESTÁ A PUNTO DE DESAPARECER" de los carteles
   Uso: <p class="almma-cinta">…</p>  o clase en un párrafo desde el editor.
   -------------------------------------------------------------------------- */
.almma-cinta {
	display: inline-block;
	background: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--abismo);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 2.5vw, 1.5rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.2;
	padding: 0.45em 1em;
	transform: rotate(-1.4deg);
	box-shadow: 3px 3px 0 rgba(10, 20, 32, 0.35);
}

.almma-cinta--agua {
	background: var(--wp--preset--color--agua);
	transform: rotate(0.8deg);
}

.almma-cinta--alarma {
	background: var(--wp--preset--color--alarma);
	color: var(--wp--preset--color--crema);
}

/* --------------------------------------------------------------------------
   Nota mecanografiada — las etiquetas de humor colgadas de la maleta
   -------------------------------------------------------------------------- */
.almma-nota {
	position: relative;
	background: var(--wp--preset--color--papel);
	color: #2A2418;
	font-family: var(--wp--preset--font-family--nota);
	font-size: 1.05rem;
	line-height: 1.45;
	padding: 1.6rem 1.5rem 1.4rem;
	max-width: min(22rem, 100%);
	transform: rotate(-1.2deg);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

/* Centrada (portada): que no se salga por la rotación en móvil. */
.has-text-align-center > .almma-nota,
.almma-nota.has-text-align-center {
	margin-inline: auto;
}

/* El clip de la nota */
.almma-nota::before {
	content: "";
	position: absolute;
	top: -0.55rem;
	left: 50%;
	width: 3.2rem;
	height: 1.1rem;
	transform: translateX(-50%) rotate(2deg);
	background: rgba(240, 228, 206, 0.55);
	border: 1px solid rgba(10, 20, 32, 0.25);
}

.almma-nota strong { color: var(--wp--preset--color--alarma); }

/* --------------------------------------------------------------------------
   Sello de goma — el "A.L.M.M.A." estampado
   -------------------------------------------------------------------------- */
.almma-sello {
	display: inline-block;
	border: 3px solid var(--wp--preset--color--agua);
	border-radius: 4px;
	color: var(--wp--preset--color--agua);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.85rem;
	line-height: 1.5;
	padding: 0.9rem 1.4rem;
	transform: rotate(-3deg);
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Ficha de sala — la tarjeta del listado de juegos
   -------------------------------------------------------------------------- */
/* En móvil las columnas de WordPress se apilan solas; aquí solo evitamos que
   se queden demasiado estrechas en tablet. */
@media (min-width: 782px) and (max-width: 1100px) {
	.almma-salas.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.almma-salas .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--30)) !important;
	}
}

/* Ficha de sala: es un bloque de portada, así el cliente puede cambiar
   el cartel y el texto desde el editor. */
.almma-sala.wp-block-cover {
	overflow: hidden;
	border: 1px solid rgba(127, 182, 181, 0.22);
	transition: transform 0.35s ease, border-color 0.35s ease;
}

.almma-sala.wp-block-cover:hover,
.almma-sala.wp-block-cover:focus-within {
	transform: translateY(-6px);
	border-color: var(--wp--preset--color--ambar);
}

.almma-sala .wp-block-cover__image-background {
	filter: saturate(0.9) contrast(1.05);
	transition: transform 0.6s ease, filter 0.35s ease;
}

.almma-sala:hover .wp-block-cover__image-background {
	transform: scale(1.04);
	filter: saturate(1.05) contrast(1.08);
}

/* El enlace ocupa toda la ficha, para que se pueda clicar en cualquier punto */
.almma-sala h3 a {
	color: inherit;
	text-decoration: none;
}

.almma-sala h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.almma-sala h3 a:hover {
	color: var(--wp--preset--color--ambar);
}

/* --------------------------------------------------------------------------
   Página de sala — ficha de datos y entradilla
   -------------------------------------------------------------------------- */
/* Párrafo de entrada de la sinopsis: un punto más grande que el cuerpo. */
.almma-lead {
	font-size: clamp(1.15rem, 2.5vw, 1.4rem);
	line-height: 1.5;
	color: var(--wp--preset--color--crema);
}

/* Ficha: Dificultad · Jugadores · Duración, en fila con separadores. */
.almma-ficha {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 6vw, 4rem);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 1.25rem 0;
	border-top: 1px solid var(--wp--preset--color--niebla);
	border-bottom: 1px solid var(--wp--preset--color--niebla);
}

.almma-ficha .almma-dato {
	margin: 0;
}

.almma-ficha dt {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua);
	margin-bottom: 0.3rem;
}

.almma-ficha dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--crema);
}

/* --------------------------------------------------------------------------
   Calendario de reservas (widget EscapeUp)
   El widget trae su propio estilo; aquí solo le damos marco y aire.
   -------------------------------------------------------------------------- */
/* El widget ya trae sus propios colores adaptados al sitio, así que lo
   dejamos respirar directamente sobre el fondo, sin caja ni relleno. */
.almma-calendario {
	margin-top: var(--wp--preset--spacing--30);
}

.almma-calendario escapeup-calendar {
	display: block;
}

.almma-aviso {
	border-left: 4px solid var(--wp--preset--color--alarma);
	background: rgba(199, 56, 46, 0.12);
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Cabecera — barra slim, fija y traslúcida
   -------------------------------------------------------------------------- */
.almma-header.has-abismo-background-color {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Scrim translúcido: más oscuro arriba (donde va el logo/menú) y se desvanece
	   hacia abajo. Sobre el hero deja ver la imagen; en scroll, el desenfoque lo
	   mantiene legible. Look moderno "flotante".
	   El backgroundColor del bloque lo pinta WordPress como
	   `.has-abismo-background-color { background-color: … !important }`, así que
	   hay que anularlo con !important o el scrim queda sobre un fondo opaco. */
	background-color: transparent !important;
	background-image: linear-gradient(180deg, rgba(7, 15, 24, 0.78) 0%, rgba(7, 15, 24, 0.42) 55%, rgba(7, 15, 24, 0) 100%);
	-webkit-backdrop-filter: blur(9px) saturate(1.1);
	backdrop-filter: blur(9px) saturate(1.1);
}

/* El hero de las salas sube por detrás del header translúcido para que la
   imagen ocupe también esa franja. El contenido del hero va abajo, así que no
   queda tapado por la barra. (El de la portada hace lo mismo, más abajo, en
   .home .almma-hero-slider.) */
.almma-sala-hero.wp-block-cover {
	margin-top: calc(-1 * var(--almma-header-h));
}

/* Sticky footer: la columna ocupa como mínimo el alto de la ventana y el footer
   se empuja al fondo con un margen automático. Así el footer queda abajo cuando
   el contenido es corto y fluye con normalidad (sin recortarse) cuando es largo.
   El <main> conserva su tamaño natural: no lo forzamos a crecer/encoger. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > footer {
	margin-block-start: auto;
	flex-shrink: 0;
}

/* El contenido va pegado a la cabecera: WordPress inserta el blockGap raíz
   (margin-block-start) al <main> por ser el segundo hijo de .wp-site-blocks,
   y eso dejaba una banda visible bajo el header sticky. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

.almma-header .wp-block-site-logo img {
	display: block;
	border-radius: 4px;
}

/* Una sola fila: emblema a la izquierda, menú + Reservar empujados a la
   derecha con margin-auto sobre el logo. Estructura plana = robusta. */
.almma-header__bar {
	gap: clamp(1rem, 3vw, 1.75rem);
}

.almma-header__bar > .wp-block-site-logo {
	margin-right: auto;
}

/* Reservar en la cabecera: más discreto que el botón por defecto. */
.almma-btn-reservar .wp-block-button__link {
	padding: 0.62rem 1.35rem;
	font-size: 0.74rem;
}

/* Icono del menú móvil en color crema para que resalte sobre la barra. */
.almma-header .wp-block-navigation__responsive-container-open,
.almma-header .wp-block-navigation .wp-block-navigation__responsive-container-open svg {
	color: var(--wp--preset--color--crema);
	fill: currentColor;
}

/* En móvil, compactar todo para que quepa emblema + Reservar + menú.
   El botón Reservar se coloca ANTES del icono de menú (order:-1) para que
   no lo empuje fuera de pantalla. */
@media (max-width: 600px) {
	/* Header más bajo en móvil (logo 40px): ajustamos la subida del hero. */
	:root { --almma-header-h: 66px; }
	.almma-header .wp-block-site-logo,
	.almma-header .wp-block-site-logo img { width: 40px; }
	.almma-header__bar { gap: 0.7rem; }
	/* En móvil, la barra solo lleva emblema + menú. Reservar vive dentro
	   del overlay (así no desborda y sigue siendo accesible). */
	.almma-header .almma-btn-reservar { display: none; }

	/* Forzamos el patrón hamburguesa (el bloque de navegación de WP es
	   inconsistente al colapsar solo). Cerrado: solo el icono. */
	.almma-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.almma-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* ----- Overlay del menú móvil: panel oscuro a pantalla completa ----- */
/* Con el menú abierto, WordPress marca <html> con .has-modal-open. En ese
   momento quitamos el backdrop-filter de la cabecera: un backdrop-filter (igual
   que transform o filter) convierte a la cabecera en el bloque contenedor de
   los elementos position:fixed que tiene dentro, y eso encerraba el overlay del
   menú dentro de la barra (~54px) en lugar de la pantalla completa. Sin él, el
   overlay vuelve a anclarse al viewport. La barra queda tapada por el overlay,
   así que no se pierde el desenfoque de forma visible. */
html.has-modal-open .almma-header.has-abismo-background-color {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Panel a pantalla completa, con un tenue halo aqua para que no quede plano. */
.almma-header .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background-color: var(--wp--preset--color--abismo) !important;
	background-image: radial-gradient(130% 90% at 100% 0%, rgba(127, 182, 181, 0.07), transparent 55%);
	padding: 0 clamp(1.25rem, 5vw, 3rem) max(1.75rem, env(safe-area-inset-bottom));
	overflow-x: clip;
}

.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	height: 100%;
}

/* La lista es el tablero de puertas: columna a sangre completa, de arriba abajo. */
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
}
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-flow: row wrap;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: flex-end !important;
	text-align: left;
	gap: 0 1.5rem;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

/* WP alinea los items a la derecha (por el justifyContent del desktop) y, al ser
   flex, no bajan de su ancho de contenido (min-width:auto) — de ahí el desborde.
   Forzamos min-width:0 + ancho total e izquierda en TODOS los li (directos y del
   submenú) y en el submenú, para usar toda la pantalla sin scroll. */
.almma-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item,
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-self: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
}

/* Eyebrow y pie mecanografiados: enmarcan el panel como el tablero de salidas. */
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container::before {
	content: "Puertas de embarque — Gates";
	order: 0;
	flex: 0 0 100%;
	font-family: var(--wp--preset--font-family--nota);
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua);
	padding: clamp(2.25rem, 8vw, 3rem) 0 1.2rem;
}

.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container::after {
	content: "Terminal 59:59 · Madrid";
	order: 10;
	flex: 0 0 100%;
	font-family: var(--wp--preset--font-family--nota);
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--niebla);
	text-align: center;
	padding-top: 1.6rem;
}

/* Quitamos el rótulo "Salas" y su chevron: las puertas se listan directamente
   bajo el eyebrow, como el tablero de salidas. */
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > a.wp-block-navigation-item__content,
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* Orden y anchos de fila: puertas (fila completa), pase (fila completa) y, en
   una sola fila alineada a la derecha, los secundarios FAQ / Contacto. */
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu { order: 1; flex: 0 0 100%; }
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.almma-nav-cta { order: 2; flex: 0 0 100%; }
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item:not(.wp-block-navigation-submenu):not(.almma-nav-cta) {
	order: 3;
	flex: 0 0 auto;
	width: auto !important;
	align-self: flex-start !important;
}

/* Cada sala es una PUERTA del tablero: destino en display y, debajo, su estado
   en mono (split-flap). Separadas por hairlines discontinuos. */
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	display: flex !important;
	flex-direction: column;
	align-items: stretch !important;
	text-align: left !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li {
	border-top: 1px dashed rgba(127, 182, 181, 0.18);
}
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:first-of-type {
	border-top: 0;
}
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content {
	position: relative;
	display: block;
	width: 100%;
	text-align: left !important;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.2rem, 5.2vw, 1.6rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var(--wp--preset--color--crema);
	padding: clamp(0.65rem, 2.6vw, 0.9rem) 0 clamp(1.5rem, 4.6vw, 1.85rem);
}
/* Estado de la puerta (dato del tablero de salidas). */
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content::after {
	position: absolute;
	left: 0;
	bottom: clamp(0.5rem, 2vw, 0.75rem);
	font-family: var(--wp--preset--font-family--nota);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:nth-of-type(1) > .wp-block-navigation-item__content::after { content: "Última llamada"; color: #FF6A5E; }
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:nth-of-type(2) > .wp-block-navigation-item__content::after { content: "A la deriva"; color: var(--wp--preset--color--ambar); }
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:nth-of-type(3) > .wp-block-navigation-item__content::after { content: "Retraso 30 años"; color: var(--wp--preset--color--ambar); }
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:nth-of-type(4) > .wp-block-navigation-item__content::after { content: "Sin traducir"; color: var(--wp--preset--color--agua); }

.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li > a.wp-block-navigation-item__content:hover,
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ambar);
}

/* FAQ y Contacto: secundarios, mono discreto, en una sola fila a la derecha
   bajo el pase de embarque (van juntos por el row-wrap + justify-content:end). */
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item:not(.wp-block-navigation-submenu):not(.almma-nav-cta) {
	margin-top: clamp(1.25rem, 4vw, 1.75rem);
}
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item:not(.wp-block-navigation-submenu):not(.almma-nav-cta) > .wp-block-navigation-item__content {
	display: inline-block;
	text-align: left !important;
	font-family: var(--wp--preset--font-family--nota);
	font-size: 0.9rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua);
	padding: 0.4rem 0;
}
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.wp-block-navigation-item:not(.wp-block-navigation-submenu):not(.almma-nav-cta) > a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--crema);
}

/* Reservar: pase de embarque ámbar (con talón troquelado), de ancho contenido
   y centrado bajo las puertas. */
.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.almma-nav-cta {
	padding-top: clamp(1.75rem, 6vw, 2.75rem);
}
.almma-header .wp-block-navigation__responsive-container.is-menu-open .almma-nav-cta > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--abismo) !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 4.6vw, 1.4rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0.7rem 1.05rem;
	border-radius: 4px;
	box-shadow: 4px 4px 0 rgba(6, 12, 20, 0.5);
	transition: background-color 0.18s ease, transform 0.18s ease;
}
/* Talón troquelado del pase: un avión despegando (en abismo sobre el ámbar). */
.almma-header .wp-block-navigation__responsive-container.is-menu-open .almma-nav-cta > .wp-block-navigation-item__content::after {
	content: "";
	flex: none;
	align-self: stretch;
	width: 2.5rem;
	padding-left: 0.85rem;
	border-left: 2px dashed rgba(10, 20, 32, 0.45);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A1420'%3E%3Cpath d='M2.5 19h19v2h-19v-2zm19.57-9.36c-.21-.8-1.04-1.28-1.84-1.06L14.92 10l-6.9-6.43-1.93.51 4.14 7.17-4.97 1.33-1.97-1.54-1.45.39 2.59 4.49L21 11.49c.81-.23 1.28-1.05 1.07-1.85z'/%3E%3C/svg%3E") no-repeat center;
	background-size: 1.5rem auto;
}
.almma-header .wp-block-navigation__responsive-container.is-menu-open .almma-nav-cta > a.wp-block-navigation-item__content:hover,
.almma-header .wp-block-navigation__responsive-container.is-menu-open .almma-nav-cta > a.wp-block-navigation-item__content:active {
	background: var(--wp--preset--color--crema);
	transform: translateY(-1px);
}

/* "Reservar" del menú: oculto en desktop (ahí está el botón de la barra). */
@media (min-width: 601px) {
	.almma-header .almma-nav-cta { display: none; }
}

/* Botón de abrir/cerrar: objetivo táctil amplio y circular. */
.almma-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--crema);
}
/* Solo la X (sin círculo), a la misma altura y borde que el burger de la barra
   (mismo padding, sin safe-area, para que coincidan al alternar). */
.almma-header .wp-block-navigation__responsive-container-close {
	top: 0.75rem;
	right: 0;
	width: 2.4rem;
	height: 2.4rem;
	padding-right: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--crema);
	transition: color 0.18s ease, transform 0.18s ease;
}
.almma-header .wp-block-navigation__responsive-container-close svg { margin-right: 0; }
.almma-header .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--ambar);
	transform: rotate(90deg);
}
.almma-header .wp-block-navigation__responsive-container-close svg {
	width: 1.6rem;
	height: 1.6rem;
}

/* Foco: solo recuadro ámbar con teclado; al abrir/tocar no aparece la caja. */
.almma-header .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content:focus:not(:focus-visible) {
	outline: none;
}
.almma-header .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--ambar);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Entrada escalonada: primero las puertas (salas), luego secundarios y el pase. */
@media (prefers-reduced-motion: no-preference) {
	.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li,
	.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:not(.wp-block-navigation-submenu) {
		animation: almma-nav-in 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:nth-of-type(1) { animation-delay: 0.05s; }
	.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:nth-of-type(2) { animation-delay: 0.1s; }
	.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:nth-of-type(3) { animation-delay: 0.15s; }
	.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:nth-of-type(4) { animation-delay: 0.2s; }
	/* Reservar (4º en el DOM) entra antes; FAQ (2º) y Contacto (3º) después. */
	.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-of-type(4) { animation-delay: 0.26s; }
	.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-of-type(2) { animation-delay: 0.32s; }
	.almma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-of-type(3) { animation-delay: 0.36s; }
}

@keyframes almma-nav-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* ----- Desplegable "Salas" en el menú de escritorio ----- */
.almma-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--abismo);
	border: 1px solid var(--wp--preset--color--niebla);
	border-radius: 8px;
	padding: 0.4rem 0;
	min-width: 16rem;
	box-shadow: 0 16px 34px rgba(6, 12, 20, 0.55);
}

.almma-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.2rem;
	color: var(--wp--preset--color--crema);
	font-size: 0.95rem;
}

.almma-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.almma-header .wp-block-navigation__submenu-container .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ambar);
}


/* --------------------------------------------------------------------------
   Legibilidad del texto sobre imágenes (héroes)
   Las ilustraciones son muy recargadas; el velo del bloque de portada no
   siempre basta. Anclamos el texto abajo (donde el degradado es casi opaco)
   y añadimos una sombra de protección y un refuerzo de scrim inferior.
   -------------------------------------------------------------------------- */
.wp-block-cover .wp-block-post-title,
.wp-block-cover > .wp-block-cover__inner-container h1,
.wp-block-cover > .wp-block-cover__inner-container h2,
.wp-block-cover > .wp-block-cover__inner-container p:not(.almma-cinta):not(.almma-nota) {
	text-shadow: 0 2px 22px rgba(6, 12, 20, 0.75), 0 1px 4px rgba(6, 12, 20, 0.6);
}

/* Refuerzo del velo inferior en los héroes grandes, para que el texto
   apoyado abajo siempre caiga sobre fondo oscuro. */
.wp-block-cover.alignfull::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(180deg, rgba(10, 20, 32, 0) 0%, rgba(10, 20, 32, 0.55) 55%, rgba(10, 20, 32, 0.9) 100%);
}

/* El contenido debe ir SIEMPRE por encima del scrim ::after (z-index:1).
   WordPress core, cuando el cover usa imagen destacada, intercala un <img>
   entre el fondo y el inner-container; entonces una regla suya con `:has()`
   (especificidad altísima, imposible de superar por selector) fija el
   inner-container a z-index:1, empatando con el scrim, que al pintarse después
   tapaba texto y botones. Forzamos el contenido por encima. */
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2 !important;
}

/* --------------------------------------------------------------------------
   Panel de Salidas — las salas como tablero de aeropuerto
   Custom HTML (no lo cubre theme.json). El humor negro vive en la columna ESTADO.
   -------------------------------------------------------------------------- */
.almma-panel__eyebrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--nota);
	color: var(--wp--preset--color--agua);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: clamp(0.7rem, 2vw, 0.82rem);
	border-bottom: 1px solid var(--wp--preset--color--niebla);
	padding-bottom: 0.85rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.almma-panel__eyebrow .plane { color: var(--wp--preset--color--ambar); }

.almma-panel__reloj {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ambar);
	font-size: clamp(1.1rem, 4vw, 1.6rem);
	white-space: nowrap;
}

.almma-panel__reloj i { font-style: normal; }

@media (prefers-reduced-motion: no-preference) {
	.almma-panel__reloj i { animation: almma-blink 1.1s steps(1, end) infinite; }
}

@keyframes almma-blink { 50% { opacity: 0.08; } }

.almma-board {
	background: linear-gradient(180deg, #0B1622, #070F18);
	border: 1px solid var(--wp--preset--color--niebla);
	border-radius: 8px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(127, 182, 181, 0.08);
	overflow: hidden;
	margin-top: var(--wp--preset--spacing--40);
}

.almma-board__head,
.almma-board__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 16rem 1.4rem;
	gap: clamp(0.6rem, 2vw, 1.5rem);
	align-items: center;
}

.almma-board__head {
	padding: 0.85rem clamp(1rem, 3vw, 1.8rem);
	font-family: var(--wp--preset--font-family--nota);
	color: var(--wp--preset--color--agua);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.68rem;
	background: rgba(127, 182, 181, 0.04);
	border-bottom: 1px solid var(--wp--preset--color--niebla);
}

.almma-board__head span:nth-child(2),
.almma-board__head span:nth-child(3) { text-align: center; }

.almma-board__row {
	padding: clamp(0.9rem, 2.6vw, 1.35rem) clamp(1rem, 3vw, 1.8rem);
	text-decoration: none;
	color: inherit;
	position: relative;
	border-top: 1px dashed rgba(127, 182, 181, 0.14);
	transition: background 0.25s ease;
}

.almma-board__row:first-of-type { border-top: 0; }
.almma-board__row:hover,
.almma-board__row:focus-visible { background: rgba(127, 182, 181, 0.06); outline: none; }
.almma-board__row:hover .almma-board__dest { color: var(--wp--preset--color--ambar); }
.almma-board__row:hover .almma-board__go { transform: translateX(4px); color: var(--wp--preset--color--ambar); }

.almma-board__dest {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	letter-spacing: 0.015em;
	font-size: clamp(1.15rem, 3.6vw, 1.7rem);
	line-height: 1;
	color: var(--wp--preset--color--crema);
}

.almma-board__meta {
	text-align: center;
	font-family: var(--wp--preset--font-family--nota);
	line-height: 1;
}

.almma-board__meta b { display: block; color: var(--wp--preset--color--crema); font-size: 1.05rem; font-weight: 400; }
.almma-board__meta i { font-style: normal; color: var(--wp--preset--color--agua); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.18em; }

.almma-board__go {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--niebla);
	transition: transform 0.25s ease, color 0.25s ease;
	text-align: right;
	font-size: 1.3rem;
}

/* Chips split-flap del estado */
.almma-flaps { display: inline-flex; flex-wrap: wrap; gap: 2px; }

.almma-flap {
	--tono: var(--wp--preset--color--ambar);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.05em;
	padding: 0.28em 0.12em;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--nota);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	color: var(--tono);
	background: #060D16;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	background-image: linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(0, 0, 0, 0.55) 50%, transparent calc(50% + 0.5px));
}

.almma-flap--alarma { --tono: #FF6A5E; }
.almma-flap--ambar { --tono: var(--wp--preset--color--ambar); }
.almma-flap--agua { --tono: var(--wp--preset--color--agua); }

@media (prefers-reduced-motion: no-preference) {
	.almma-flap { animation: almma-flip 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	.almma-board__row:nth-of-type(2) .almma-flap { animation-delay: 0.05s; }
	.almma-board__row:nth-of-type(3) .almma-flap { animation-delay: 0.1s; }
	.almma-board__row:nth-of-type(4) .almma-flap { animation-delay: 0.15s; }
	@keyframes almma-flip {
		from { transform: rotateX(-90deg); opacity: 0; }
		to { transform: rotateX(0); opacity: 1; }
	}
}

.almma-board__foot {
	padding: 0.9rem clamp(1rem, 3vw, 1.8rem);
	border-top: 1px solid var(--wp--preset--color--niebla);
	font-family: var(--wp--preset--font-family--nota);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.almma-board__foot b { color: var(--wp--preset--color--ambar); font-weight: 400; }

/* Móvil: el tablero se apila en fichas legibles */
@media (max-width: 680px) {
	.almma-board__head { display: none; }
	.almma-board__row {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 1.2rem;
		row-gap: 0.15rem;
		padding: 1.1rem 1.15rem;
	}
	.almma-board__dest { flex: 1 1 100%; font-size: 1.5rem; margin-bottom: 0.35rem; }
	.almma-board__meta { text-align: left; display: inline-flex; gap: 0.35em; align-items: baseline; }
	.almma-board__meta b { display: inline; font-size: 1rem; }
	.almma-board__estado { flex: 1 1 100%; margin-top: 0.5rem; }
	.almma-board__go { display: none; }
}

/* --------------------------------------------------------------------------
   Móvil — que los titulares de cartel no se corten
   El tipo Anton es muy ancho; en pantallas estrechas dejamos que parta
   palabra antes que desbordar el viewport.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	h1, h2, .has-cartel-font-size {
		overflow-wrap: break-word;
		word-break: break-word;
		hyphens: auto;
	}
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--ambar);
	outline-offset: 3px;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 10000;
	background: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--abismo);
	padding: 0.75rem 1.25rem;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   FAQ — acordeón "mostrador de información" de la terminal
   Cada pregunta es un <details> con línea de aire (niebla) y una marca en
   ámbar que gira de "+" a "×" al abrirse. Titulares en Anton, respuestas en
   Barlow. Sobrio a propósito: el panel de salidas ya es el elemento vistoso.
   -------------------------------------------------------------------------- */
.almma-faq__item {
	border-top: 1px solid var(--wp--preset--color--niebla);
	margin: 0;
}

.almma-faq__item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--niebla);
}

.almma-faq__item > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.25rem;
	list-style: none;
	cursor: pointer;
	padding: clamp(1rem, 3vw, 1.4rem) 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.05rem, 2.6vw, 1.4rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--crema);
	transition: color 0.18s ease;
}

.almma-faq__item > summary::-webkit-details-marker { display: none; }

/* Marca +/× en ámbar, alineada a la derecha del titular. */
.almma-faq__item > summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 400;
	font-size: 1.6em;
	line-height: 0.7;
	color: var(--wp--preset--color--ambar);
	transform: rotate(0deg);
	transform-origin: center;
	transition: transform 0.22s ease;
}

.almma-faq__item[open] > summary::after { transform: rotate(45deg); }

.almma-faq__item > summary:hover,
.almma-faq__item[open] > summary { color: var(--wp--preset--color--ambar); }

.almma-faq__item > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--ambar);
	outline-offset: 2px;
}

/* Respuesta: cuerpo cómodo de leer, con aire por debajo. */
.almma-faq__item > *:not(summary) {
	max-width: 62ch;
	margin-top: 0;
	color: var(--wp--preset--color--papel);
	line-height: 1.6;
}

.almma-faq__item > *:not(summary):last-child {
	margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.almma-faq__item a {
	color: var(--wp--preset--color--ambar);
	text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
	.almma-faq__item > summary,
	.almma-faq__item > summary::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Condiciones de la reserva — listas legibles con viñeta en ámbar
   -------------------------------------------------------------------------- */
.almma-condiciones {
	max-width: 68ch;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-left: 1.25rem;
	list-style: none;
	color: var(--wp--preset--color--papel);
	line-height: 1.6;
}

.almma-condiciones li {
	position: relative;
	margin: 0 0 0.85rem;
}

.almma-condiciones li::before {
	content: "›";
	position: absolute;
	left: -1.25rem;
	color: var(--wp--preset--color--ambar);
	font-weight: 700;
}

.almma-condiciones strong { color: var(--wp--preset--color--crema); }

/* --------------------------------------------------------------------------
   Contacto — información con iconos + formulario (Contact Form 7)
   -------------------------------------------------------------------------- */
/* Más separación entre las dos columnas y respiro por arriba. */
.almma-contacto {
	column-gap: clamp(2rem, 4vw, 3.5rem);
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

/* La página de contacto necesita más ancho que el contentSize del tema (780px):
   con dos columnas + formulario a 780px queda todo apretado. La llevamos a un
   ancho cómodo (~1080px), centrada. Solo afecta a Contacto (.page-id-10). */
.page-id-10 .wp-block-columns.almma-contacto {
	width: min(92vw, 1080px);
	max-width: min(92vw, 1080px) !important;
	margin-inline: auto !important;
}

/* Salas y Reservar: el contenido (lead + tarjetas) ya vive a contentSize (780px)
   centrado, pero la cinta de subtítulo (inline-block) se pegaba al borde del
   bloque "wide" del contenedor. Ceñimos el grupo a ese mismo contentSize para
   que la cinta caiga alineada con el resto. En FAQ, que no tiene grupo
   envolvente, hacemos lo propio con el post-content. */
.page-id-12 .wp-block-group.almma-salas,
.page-id-7 .wp-block-group.almma-reserva-wrap,
.page-id-11 .wp-block-post-content,
.page-id-50 .wp-block-post-content,
.error404 main.wp-block-group {
	max-width: var(--wp--style--global--content-size) !important;
	margin-inline: auto !important;
}

/* Titulares de sección contenidos: en Anton, a tamaño grande, agobian.
   Los bajamos, les damos interlineado y bastante aire por debajo. */
.almma-contacto > .wp-block-column > .wp-block-heading {
	font-size: clamp(1.35rem, 0.9rem + 1.6vw, 1.85rem);
	line-height: 1.18;
	letter-spacing: 0.01em;
	margin: 0 0 clamp(2.25rem, 5vw, 3.5rem);
}

.almma-contacto__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(1.75rem, 4vw, 2.75rem);
}

.almma-contacto__item {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
}

.almma-contacto__icono {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--wp--preset--color--crema);
	margin-top: 0.1em;
}

.almma-contacto__texto {
	color: var(--wp--preset--color--papel);
	line-height: 1.5;
}

.almma-contacto__texto em {
	color: var(--wp--preset--color--agua);
	font-style: italic;
	white-space: nowrap;
}

.almma-contacto__texto a {
	color: var(--wp--preset--color--crema);
	text-decoration: none;
}

.almma-contacto__texto a:hover { color: var(--wp--preset--color--ambar); }

/* ----- Formulario CF7 ----- */
.almma-form .wpcf7-form p { margin: 0; }

.almma-form .almma-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.25rem, 4vw, 2.5rem);
	margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}

.almma-form .almma-field--full { margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }

.almma-form .wpcf7-form-control-wrap { display: block; }

.almma-form input[type="text"],
.almma-form input[type="email"],
.almma-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--niebla);
	border-radius: 0;
	padding: 0.65rem 0;
	color: var(--wp--preset--color--crema);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.05rem;
	transition: border-color 0.18s ease;
}

.almma-form textarea {
	min-height: clamp(11rem, 26vh, 15rem);
	resize: vertical;
	line-height: 1.5;
}

.almma-form input::placeholder,
.almma-form textarea::placeholder {
	color: rgba(240, 228, 206, 0.45);
}

.almma-form input[type="text"]:focus,
.almma-form input[type="email"]:focus,
.almma-form textarea:focus {
	border-bottom-color: var(--wp--preset--color--agua);
}

/* Botón enviar: píldora en verde agua, texto oscuro. */
.almma-form .almma-submit { margin-top: clamp(1.75rem, 5vw, 2.75rem); }

.almma-form .wpcf7-submit {
	width: 100%;
	display: block;
	border: 0;
	border-radius: 9999px;
	padding: 1.1rem 2rem;
	background: var(--wp--preset--color--agua);
	color: var(--wp--preset--color--abismo);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: filter 0.18s ease, transform 0.18s ease;
}

.almma-form .wpcf7-submit:hover { filter: brightness(1.08); }
.almma-form .wpcf7-submit:active { transform: translateY(1px); }

/* Validación y avisos de CF7 en el tono del tema. */
.almma-form .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--alarma);
	font-size: 0.85rem;
	margin-top: 0.4rem;
}

.almma-form input.wpcf7-not-valid,
.almma-form textarea.wpcf7-not-valid { border-bottom-color: var(--wp--preset--color--alarma); }

.almma-form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--niebla);
	border-radius: 6px;
	color: var(--wp--preset--color--crema);
	font-size: 0.95rem;
}

.almma-form .wpcf7-spinner { background-color: var(--wp--preset--color--agua); }

@media (max-width: 782px) {
	.almma-form .almma-form__row { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.25rem); }
}

/* --------------------------------------------------------------------------
   Reservar — un bloque por sala: póster + resumen + calendario
   -------------------------------------------------------------------------- */
.almma-reserva-sala {
	margin-top: clamp(3rem, 7vw, 5rem);
	padding-top: clamp(2.5rem, 6vw, 4rem);
	border-top: 1px solid var(--wp--preset--color--niebla);
}

.almma-reserva__cab {
	gap: clamp(1.5rem, 4vw, 2.75rem);
	align-items: flex-start;
}

/* Póster de la sala: con marco fino y sombra, ligeramente inclinado como un
   cartel pegado en la pared. */
/* El póster va DEBAJO del resumen, en tamaño moderado y alineado a la izquierda,
   con marco fino e inclinación de cartel pegado. */
.almma-reserva__poster {
	margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
	max-width: 300px;
}

.almma-reserva__poster img {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid var(--wp--preset--color--crema);
	box-shadow: 6px 8px 0 rgba(6, 12, 20, 0.4);
	transform: rotate(-1.2deg);
}

.almma-reserva__tagline {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 3vw, 1.6rem);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.15;
	color: var(--wp--preset--color--agua);
	margin: 0.35rem 0 1.1rem;
}

/* El calendario ocupa la columna derecha, alineado arriba con el resumen. */
.almma-reserva__cal .almma-calendario { margin-top: 0; }

/* En la columna estrecha del resumen, la ficha va más compacta para no partirse. */
.almma-reserva__info .almma-ficha { gap: clamp(1rem, 3vw, 1.75rem); }

/* Cartel de cierre: humor de agencia, centrado y con marco. */
.almma-reserva__cartel {
	margin-left: auto;
	margin-right: auto;
	max-width: 620px;
}

.almma-reserva__cartel img {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid var(--wp--preset--color--crema);
	box-shadow: 6px 8px 0 rgba(6, 12, 20, 0.4);
}

@media (max-width: 782px) {
	.almma-reserva__poster { max-width: 300px; margin-inline: auto; }
	.almma-reserva__tagline { margin-top: 0.75rem; }
}

/* --------------------------------------------------------------------------
   Hero rotativo de la home — cada sala por turnos (crossfade)
   -------------------------------------------------------------------------- */
.almma-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Salas — las cuatro salas como tarjetas de embarque (billetes troquelados).
   El cartel del juego manda; el resto es "cromo" de billete: reglas finas,
   datos mecanografiados y el ESTADO en split-flap. La audacia está en el
   troquel y los flaps; lo demás, en silencio.
   -------------------------------------------------------------------------- */
.almma-salas { margin-top: clamp(2rem, 5vw, 3.5rem); }

.almma-boarding {
	list-style: none;
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 5vw, 3.25rem);
}

.almma-pass {
	--tono: var(--wp--preset--color--ambar);
	position: relative;
	background: linear-gradient(180deg, #0F1D2E, #0A1420);
	border: 1px solid var(--wp--preset--color--niebla);
	border-radius: 10px;
}

.almma-pass--alarma { --tono: #FF6A5E; }
.almma-pass--ambar  { --tono: var(--wp--preset--color--ambar); }
.almma-pass--agua   { --tono: var(--wp--preset--color--agua); }

.almma-pass__link {
	display: flex;
	align-items: stretch;
	gap: 0;
	text-decoration: none;
	color: inherit;
	border-radius: inherit;
}

/* Cartel del juego: ocupa el lado izquierdo del billete. */
.almma-pass__art {
	flex: 0 0 38%;
	margin: 0;
	overflow: hidden;
	border-radius: 10px 0 0 10px;
	background: #060D16;
}

.almma-pass__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Cuerpo = el billete. Borde izquierdo troquelado (dashed) + dos muescas
   redondas del color del fondo en los extremos de la costura. */
.almma-pass__body {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: clamp(1.4rem, 3.5vw, 2.1rem) clamp(1.4rem, 3.5vw, 2.2rem);
	border-left: 2px dashed var(--wp--preset--color--niebla);
}

.almma-pass__body::before,
.almma-pass__body::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--abismo);
	transform: translateX(-50%);
}
.almma-pass__body::before { top: 0; transform: translate(-50%, -50%); }
.almma-pass__body::after { bottom: 0; transform: translate(-50%, 50%); }

.almma-pass__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--nota);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua);
}

.almma-pass__vuelo { color: var(--tono); white-space: nowrap; }

.almma-pass__eyebrow {
	display: block;
	margin-top: clamp(1rem, 3vw, 1.6rem);
	font-family: var(--wp--preset--font-family--nota);
	font-size: 0.68rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua);
}

.almma-pass__dest {
	margin: 0.15rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem);
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--wp--preset--color--crema);
}

.almma-pass__tag {
	margin: 0.55rem 0 0;
	max-width: 34ch;
	color: var(--wp--preset--color--papel);
	font-size: 1rem;
	font-style: italic;
}

/* Rejilla de datos del billete, en tipografía mecanografiada. */
.almma-pass__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.1rem, 4vw, 2.4rem);
	margin: clamp(1.2rem, 3vw, 1.7rem) 0 0;
	padding: clamp(1rem, 2.5vw, 1.25rem) 0 0;
	border-top: 1px solid var(--wp--preset--color--niebla);
}

.almma-pass__grid div { display: flex; flex-direction: column; gap: 0.2rem; }

.almma-pass__grid dt {
	font-family: var(--wp--preset--font-family--nota);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua);
}

.almma-pass__grid dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--nota);
	font-size: 1.05rem;
	color: var(--wp--preset--color--crema);
}

.almma-pass__estado {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: clamp(1.1rem, 3vw, 1.5rem);
}

.almma-pass__estado-label {
	font-family: var(--wp--preset--font-family--nota);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--agua);
}

.almma-pass__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: clamp(1.3rem, 3vw, 1.8rem);
}

.almma-pass__barcode {
	width: clamp(90px, 20vw, 140px);
	height: 38px;
	opacity: 0.9;
	background-image: repeating-linear-gradient(90deg,
		var(--wp--preset--color--crema) 0 1px, transparent 1px 3px,
		var(--wp--preset--color--crema) 3px 5px, transparent 5px 6px,
		var(--wp--preset--color--crema) 6px 9px, transparent 9px 12px);
}

.almma-pass__go {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ambar);
}

.almma-pass__arrow { transition: transform 0.18s ease; }

/* Interacción: el billete se levanta y el troquel/borde se enciende en su tono. */
.almma-pass { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }

.almma-pass:hover,
.almma-pass:focus-within {
	border-color: var(--tono);
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(6, 12, 20, 0.5);
}

.almma-pass:hover .almma-pass__arrow,
.almma-pass:focus-within .almma-pass__arrow { transform: translateX(4px); }

.almma-pass__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--ambar);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.almma-pass,
	.almma-pass__arrow { transition: none; }
	.almma-pass:hover,
	.almma-pass:focus-within { transform: none; }
}

/* Móvil: el billete se pliega — cartel arriba, datos abajo, troquel horizontal. */
@media (max-width: 720px) {
	.almma-pass__link { flex-direction: column; }
	.almma-pass__art {
		flex-basis: auto;
		border-radius: 10px 10px 0 0;
		max-height: 320px;
	}
	.almma-pass__art img { object-position: center top; }
	.almma-pass__body {
		border-left: 0;
		border-top: 2px dashed var(--wp--preset--color--niebla);
	}
	.almma-pass__body::before { top: 0; left: 0; transform: translate(-50%, -50%); }
	.almma-pass__body::after { top: 0; bottom: auto; left: auto; right: 0; transform: translate(50%, -50%); }
}

/* Variante apilada del billete (cartel arriba, datos abajo) a cualquier ancho.
   Se usa en la página de reservar, en la columna junto al calendario. */
.almma-pass--stacked .almma-pass__link { flex-direction: column; }
.almma-pass--stacked .almma-pass__art {
	flex-basis: auto;
	border-radius: 10px 10px 0 0;
	max-height: 300px;
}
.almma-pass--stacked .almma-pass__art img { object-position: center top; }
.almma-pass--stacked .almma-pass__body {
	border-left: 0;
	border-top: 2px dashed var(--wp--preset--color--niebla);
}
.almma-pass--stacked .almma-pass__body::before { top: 0; left: 0; transform: translate(-50%, -50%); }
.almma-pass--stacked .almma-pass__body::after { top: 0; bottom: auto; left: auto; right: 0; transform: translate(50%, -50%); }

/* La tarjeta apilada es informativa (al lado está el calendario), sin hover-lift. */
.almma-pass--stacked { transition: none; }
.almma-pass--stacked:hover,
.almma-pass--stacked:focus-within { transform: none; box-shadow: none; border-color: var(--wp--preset--color--niebla); }

/* Junto al calendario la tarjeta iba muy alta: póster más bajo, ritmo vertical
   más apretado, ficha en rejilla 2×2 y el ESTADO con las fichas a lo ancho. */
.almma-pass--stacked .almma-pass__art { max-height: 200px; }
.almma-pass--stacked .almma-pass__body { padding: clamp(1.1rem, 2.5vw, 1.5rem); }
.almma-pass--stacked .almma-pass__eyebrow { margin-top: 0.8rem; }
.almma-pass--stacked .almma-pass__dest { font-size: clamp(1.35rem, 1rem + 1.5vw, 1.8rem); }
.almma-pass--stacked .almma-pass__tag { margin-top: 0.4rem; }
.almma-pass--stacked .almma-pass__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1rem;
	margin-top: 0.9rem;
	padding-top: 0.9rem;
}
.almma-pass--stacked .almma-pass__estado {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	margin-top: 0.9rem;
}
.almma-pass--stacked .almma-pass__foot { padding-top: 1rem; }

/* Variante sin cabecera (reservar): el cartel ya dice el nombre y la tagline,
   así que el billete se queda con la ficha y el cartel gana ese alto. */
.almma-pass--minimal .almma-pass__art { max-height: 340px; }
.almma-pass--minimal .almma-pass__grid { margin-top: 0; padding-top: 0; border-top: 0; }
.almma-pass--minimal .almma-pass__barcode { width: 100%; }

/* --------------------------------------------------------------------------
   Carousel Slider Block — el héroe y los carteles
   ..........................................................................
   El cliente monta estos dos carruseles desde el editor con Carousel Slider
   Block. El plugin aporta la estructura y el arrastre; el aspecto y el efecto
   los pone el tema, para que sigan siendo los del diseño original.
   El movimiento lo configura assets/js/carousel-fx.js.
   -------------------------------------------------------------------------- */

/* Héroe ------------------------------------------------------------------- */

.almma-hero-slider {
	/* Mismo alto que tenía el héroe a mano: más alto en pantallas grandes
	   (27") para que la imagen respire, sumando el header porque el héroe sube
	   por detrás de él. */
	--hero-h: calc(clamp(540px, 86vh, 1000px) + var(--almma-header-h));

	/* El plugin se tematiza con estas variables, que es su forma soportada de
	   hacerlo: sus propias reglas son más específicas que las nuestras, así que
	   pelearlas a golpe de selector se rompería en la próxima actualización.
	   Los puntos van sobre la imagen, como en el diseño original. */
	--wp--custom--carousel-block--pagination-bottom: clamp(1rem, 3vw, 1.75rem);
	--wp--custom--carousel-block--navigation-sides-offset: clamp(0.75rem, 2vw, 1.5rem);
	/* El plugin reserva hueco bajo el carrusel para los puntos con
	   margin-bottom: calc(bullet-size * 4). Aquí los puntos van encima de la
	   imagen, así que no queremos ese hueco: sin él no aparece la franja
	   oscura entre el héroe y el panel de salidas. El tamaño real de los puntos
	   lo fijamos más abajo. */
	--wp--custom--carousel-block--pagination-bullet-size: 0px;

	position: relative;
	min-height: var(--hero-h);
	background: var(--wp--preset--color--abismo);
}

.home .almma-hero-slider { margin-top: calc(-1 * var(--almma-header-h)); }

/* El Cover de cada diapositiva se guarda con min-height:100% en línea, y un
   porcentaje contra un contenedor sin altura definida se resuelve como "auto":
   el héroe se quedaría del alto del texto. Así que la altura se fija aquí y el
   100% del Cover ya tiene contra qué medirse. */
.almma-hero-slider .swiper,
.almma-hero-slider .swiper-wrapper,
.almma-hero-slider .swiper-slide { height: var(--hero-h); }

/* El bloque Cover de cada diapositiva es el héroe de esa sala. */
.almma-hero-slider .wp-block-cover {
	height: 100%;
	align-items: flex-end;
	padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 8vw, 5.5rem);
}

/* El velo que oscurece la imagen para que el titular se lea. Lo pone el tema y
   no el bloque porque son dos degradados superpuestos (uno lateral y otro de
   abajo arriba) y Cover solo admite uno: así el cliente elige la imagen y no
   tiene que tocar degradados para que el texto siga legible. */
.almma-hero-slider .wp-block-cover::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(78deg, rgba(10, 20, 32, 0.88) 0%, rgba(10, 20, 32, 0.45) 48%, rgba(10, 20, 32, 0.12) 100%),
		linear-gradient(0deg, rgba(10, 20, 32, 0.9) 0%, rgba(10, 20, 32, 0.25) 45%, transparent 70%);
}

/* Por encima del velo, y con el mismo ancho de columna que el resto del sitio. */
.almma-hero-slider .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

/* Titular y tagline: los mismos que pintaba almma-hero__name / __tag. */
.almma-hero-slider .wp-block-cover h2 {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--cartel);
	line-height: 0.98;
	text-transform: uppercase;
	color: var(--wp--preset--color--crema);
	text-shadow: 0 2px 24px rgba(6, 12, 20, 0.8), 0 1px 4px rgba(6, 12, 20, 0.7);
}

.almma-hero-slider .almma-hero__tag {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 32ch;
	font-size: clamp(1.15rem, 2.5vw, 1.5rem);
	font-weight: 600;
	text-shadow: 0 1px 14px rgba(6, 12, 20, 0.7);
}

.almma-hero-slider .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }

/* Carteles ---------------------------------------------------------------- */

.almma-carteles-slider {
	--cardw: clamp(190px, 24vw, 288px);
	--dot: 10px;
	--dot-gap: clamp(1rem, 3vw, 1.75rem);

	/* Aquí los puntos sí van debajo del carrusel, como en el diseño original
	   (eran una fila con margin-top, no superpuestos). Anulamos el hueco que
	   reserva el plugin y lo ponemos nosotros con padding, que es lo que nos
	   deja clavar la separación original. */
	--wp--custom--carousel-block--pagination-bullet-size: 0px;
	--wp--custom--carousel-block--pagination-bottom: 0px;

	position: relative;
	margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
	padding: 0 clamp(1rem, 3vw, 2rem) calc(var(--dot) + var(--dot-gap));
}

.almma-carteles-slider .swiper { overflow: hidden; }

.almma-carteles-slider .swiper-slide {
	width: var(--cardw);
	height: calc(var(--cardw) * 1.5);
	cursor: pointer;
}

/* El marco crema, y ámbar cuando la tarjeta está en el centro. */
.almma-carteles-slider .wp-block-image {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--noche);
	border: 3px solid var(--wp--preset--color--crema);
	border-radius: 3px;
	box-shadow: 0 14px 34px rgba(6, 12, 20, 0.55);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.almma-carteles-slider .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.almma-carteles-slider .swiper-slide-active .wp-block-image {
	border-color: var(--wp--preset--color--ambar);
	box-shadow: 0 22px 52px rgba(6, 12, 20, 0.7);
}

/* Flechas y puntos, comunes a los dos ------------------------------------- */

/* Swiper trae flechas y puntos propios; los apagamos y los vestimos como los
   del diseño (redondas translúcidas, y barritas en vez de bolitas). */
.almma-hero-slider .swiper-button-prev,
.almma-hero-slider .swiper-button-next,
.almma-carteles-slider .swiper-button-prev,
.almma-carteles-slider .swiper-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: clamp(2.6rem, 5vw, 3.2rem);
	height: clamp(2.6rem, 5vw, 3.2rem);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(240, 228, 206, 0.35);
	border-radius: 50%;
	background: rgba(10, 20, 32, 0.45);
	color: var(--wp--preset--color--crema);
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.almma-hero-slider .swiper-button-prev:hover,
.almma-hero-slider .swiper-button-next:hover,
.almma-carteles-slider .swiper-button-prev:hover,
.almma-carteles-slider .swiper-button-next:hover {
	background: rgba(10, 20, 32, 0.8);
	border-color: var(--wp--preset--color--ambar);
}

/* Swiper dibuja la flecha con una fuente de iconos propia; la sustituimos por
   el mismo carácter que usaba el tema. */
.almma-hero-slider .swiper-button-prev::after,
.almma-hero-slider .swiper-button-next::after,
.almma-carteles-slider .swiper-button-prev::after,
.almma-carteles-slider .swiper-button-next::after {
	font-family: inherit;
	font-size: 1.5rem;
	line-height: 1;
}

.almma-hero-slider .swiper-button-prev::after,
.almma-carteles-slider .swiper-button-prev::after { content: '‹'; }
.almma-hero-slider .swiper-button-next::after,
.almma-carteles-slider .swiper-button-next::after { content: '›'; }

.almma-hero-slider .swiper-button-prev { left: clamp(0.75rem, 2vw, 1.5rem); }
.almma-hero-slider .swiper-button-next { right: clamp(0.75rem, 2vw, 1.5rem); }
.almma-carteles-slider .swiper-button-prev { left: clamp(0.25rem, 2vw, 1rem); }
.almma-carteles-slider .swiper-button-next { right: clamp(0.25rem, 2vw, 1rem); }

.almma-hero-slider .swiper-pagination,
.almma-carteles-slider .swiper-pagination {
	position: absolute;
	z-index: 3;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	display: flex;
	gap: 0.6rem;
}

.almma-carteles-slider .swiper-pagination { gap: 0.55rem; }

/* Héroe: barritas que se alargan al estar activas. */
.almma-hero-slider .swiper-pagination-bullet {
	width: 34px;
	height: 6px;
	margin: 0;
	border-radius: 3px;
	background: rgba(240, 228, 206, 0.35);
	opacity: 1;
	transition: background-color 0.2s ease, width 0.2s ease;
}

.almma-hero-slider .swiper-pagination-bullet-active {
	background: var(--wp--preset--color--ambar);
	width: 52px;
}

/* Carteles: puntos redondos que crecen. */
.almma-carteles-slider .swiper-pagination-bullet {
	width: var(--dot);
	height: var(--dot);
	margin: 0;
	border-radius: 50%;
	background: rgba(240, 228, 206, 0.35);
	opacity: 1;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.almma-carteles-slider .swiper-pagination-bullet-active {
	background: var(--wp--preset--color--ambar);
	transform: scale(1.35);
}

.almma-hero-slider :focus-visible,
.almma-carteles-slider :focus-visible {
	outline: 3px solid var(--wp--preset--color--ambar);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.almma-hero-slider .swiper-button-prev,
	.almma-hero-slider .swiper-button-next { display: none; }
}