/* ==========================================================================
   HERO DE PAGINAS INTERIORES (#innerBanner)
   ==========================================================================
   Modulo del hero de las paginas interiores (landings 'default' y
   'default-list'). Lo carga
   xsl/themes/default/_common/inner-banner/inner-banner.xsl, que solo se
   invoca desde esas plantillas. NO se registra en etc/theme-config.php
   (carga deliberada desde la propia plantilla XSL).

   Antes el <link> vivia dentro de un <xsl:if> que comprobaba si la seccion
   tenia slides o video, y sin ninguno de los dos ni el CSS ni el hero se
   emitian. Desde que existe la rama de imagen por defecto el hero se pinta
   SIEMPRE, asi que el CSS tambien: ya no hay caso en el que sobre. El JS si
   sigue siendo condicional (solo la rama de slider monta swipers).

   Reglas base trasladadas literalmente desde fenix-sevilla-hotel.css
   (lineas 2591-2744) y los overrides responsive desde skeleton.css (lineas
   80, 186-189, 331-337, 493-499, 526-527). Movimiento 1:1, sin cambiar
   valores ni orden. Los breakpoints 1601-2700 y 1501-1600 de la maqueta NO
   tienen ninguna regla #innerBanner*: se omiten a proposito (no se anaden
   bloques @media vacios); en esos dos rangos el componente hereda la regla
   base tal cual.

   Controles del slider como <div> (swiper-button-prev/next), NO <button>:
   es el patron real del proyecto, el mismo que usan los tres sliders ya
   existentes (slider-home.xsl:59-60, rooms-home.xsl:152-153,
   benefits-home.xsl:114-115). El modulo a11y de Swiper viene activado y el
   JS le pasa los textos ya traducidos, asi que Swiper anade en el init
   role="button", tabindex="0" y el aria-label correcto a esos <div>. No
   hace falta ningun reset de <button> (padding/font/appearance/cursor): el
   <div> no matchea la regla global de boton del framework ('.button,
   button, [type=button]...', fenix-sevilla-hotel.css:88), y el
   fondo/borde/radio de los propios controles ya los resuelve
   swiper-bundle-controls.css (.swiperNav [class*=swiper-button-]).
   ========================================================================== */

#innerBanner {
	float: left;
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
/* site.js YA le quitaba .invisible y le ponia .anim desde la maqueta del 29-jul,
   pero la regla que define esa animacion solo llega con la del 31-jul: hasta
   ahora el hero interior aparecia de golpe en vez de entrar con fundido, al
   contrario que su gemelo de la home (#slider.anim,
   fenix-sevilla-hotel.css:958). El keyframe fadeIn lo aporta
   third-party/wow-animate.css. */
#innerBanner.anim {
	animation: fadeIn 0.5s both;
	animation-delay: 0.5s;
}
#innerBanner #caption {
    max-width: 37.5rem;
    height: fit-content;
    margin: auto;
    padding: 4rem 4.75rem;
    background-color: #1A1A1A;
    position: absolute;
    top: 30%;
    bottom: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
}
#innerBanner #caption .title {
    display: block;
    margin: 0;
    font-size: 2.3125rem;
    color: #F4C670;
    font-weight: 400;
    line-height: 2.625rem;
	text-transform: uppercase;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}
#innerBanner,
#innerBanner .inner-slider-video,
#innerBanner .inner-slider,
#innerBanner .inner-slider-default {
	width: 100%;
	height: 100dvh;
	user-select: none;
}
/* Rama de imagen por defecto (inner-banner.xsl): un unico <img> estatico, sin
   Swiper ni miniaturas. Mismo encaje que las otras dos ramas -llena el hero y
   recorta por cover-, asi que no hay valores propios que mantener aparte. */
#innerBanner .inner-slider-default img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
#innerBanner .inner-slider-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}
#innerBanner .inner-slider .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#innerBanner .inner-slider .swiper-slide picture,
#innerBanner .inner-slider .swiper-slide picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#innerBanner .inner-slider .swiper-slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}
#innerBanner .inner-thumb-wrapper {
	width: 9.5rem;
	/* Banda de la flecha = diametro (2.5rem = 30px al 75%) + 8px de holgura, y
	   el alto es la caja de contenido -22.125rem: las 3 miniaturas mas sus 2
	   huecos- mas las dos bandas. Mismo caso y misma cuenta que el wrapper de
	   miniaturas del hero, donde esta la justificacion completa
	   (fenix-sevilla-hotel.css). */
	height: calc(22.125rem + (2.5rem + 8px) * 2);
	margin: 0 auto;
	padding: calc(2.5rem + 8px) 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 4.75rem;
	z-index: 2;
}
#innerBanner .inner-thumb-wrapper:has(.swiperNav .swiper-button-lock) {
	height: 22.125rem;
	padding: 0;
}
#innerBanner .inner-thumb-wrapper .inner-slider-thumb {
	width: 100%;
	height: 100%;
}
#innerBanner .inner-thumb-wrapper .inner-slider-thumb .swiper-slide {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	border-radius: 0.125rem;
	overflow: hidden;
	cursor: pointer;
}
#innerBanner .inner-thumb-wrapper .inner-slider-thumb .swiper-slide.swiper-slide-thumb-active {
	border: 2px solid #FFFFFF;
}
#innerBanner .inner-thumb-wrapper .inner-slider-thumb .swiper-slide picture,
#innerBanner .inner-thumb-wrapper .inner-slider-thumb .swiper-slide picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#innerBanner .inner-thumb-wrapper .inner-slider-thumb .swiper-slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}
#innerBanner .inner-thumb-wrapper .inner-slider-thumb .thumb-progress {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}
#innerBanner .inner-thumb-wrapper .inner-slider-thumb .thumb-progress span {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgb(26 26 26 / 72%);
}
#innerBanner .inner-thumb-wrapper .swiperNav {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	margin-top: 0;
	position: absolute;
	inset: 0;
}
/* 2.5rem = 30px con la palanca al 75%. Scopeado a este bloque: la regla base de
   swiper-bundle-controls.css se queda en sus 48px para el resto del sitio.
   min-width ademas del width porque esa base declara min-width: 48px y si no
   gana ella. Justificacion completa en el wrapper del hero. */
#innerBanner .inner-thumb-wrapper .swiperNav [class*=swiper-button-] span {
	min-width: 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	background: #ffffff;
}
#innerBanner .inner-thumb-wrapper .swiperNav [class*=swiper-button-] span img {
	filter: none;
}

/* #Additional - Large Screens beyond 1366px
================================================== */
@media only screen and (min-width: 1366px) and (max-width: 1500px) {

#innerBanner #caption 								{ max-width: 33.75rem; padding: 2.5rem 3.125rem; }

}

/* #iPad Pro - Large Screens beyond 1024px
================================================== */
@media only screen and (min-width: 961px) and (max-width: 1365px) {

/* Sin 'z-index: inherit' (se quita aqui): resolvia a 'auto' y anulaba el
   contexto de apilamiento de #innerBanner, dejando escapar a
   .js-motion-pause (z-index:20, accessibility.css) a la raiz del documento,
   donde se superponia a la mascara movil y al menu hamburguesa (verificado
   en vivo, ago 2026). #innerBanner ya tiene su propio z-index base (linea 42
   de este mismo archivo) que sigue aplicando sin esta regla. */
#innerBanner, #innerBanner .inner-slider-video, #innerBanner .inner-slider, #innerBanner .inner-slider-default { width: 100%; height: 100dvh; touch-action: inherit; }
#innerBanner #caption 								{ max-width: 30rem; padding: 2.5rem 2rem; }
#innerBanner #caption .title 						{ font-size: 2.1875rem; line-height: 2.5rem; }
#innerBanner .inner-thumb-wrapper 					{ right: 2rem; }

}

/* #Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 960px) {

/* Sin 'z-index: inherit' (se quita aqui): resolvia a 'auto' y anulaba el
   contexto de apilamiento de #innerBanner, dejando escapar a
   .js-motion-pause (z-index:20, accessibility.css) a la raiz del documento,
   donde se superponia a la mascara movil y al menu hamburguesa (verificado
   en vivo, ago 2026). #innerBanner ya tiene su propio z-index base (linea 42
   de este mismo archivo) que sigue aplicando sin esta regla. */
#innerBanner, #innerBanner .inner-slider-video, #innerBanner .inner-slider, #innerBanner .inner-slider-default { width: 100%; height: 100dvh; touch-action: inherit; }
#innerBanner #caption 								{ max-width: 25rem; padding: 1.875rem 1.25rem; }
#innerBanner #caption .title 						{ font-size: 1.875rem; line-height: 2.1875rem; }
#innerBanner .inner-thumb-wrapper 					{ width: 35.625rem; height: 5.625rem; padding: 0 calc(2.5rem + 8px); top: auto; transform: translateY(0%); bottom: 1.875rem; right: 0; left: 0; }
/* Neutraliza la regla de escritorio (linea 115 de este mismo archivo), que
   recupera el hueco VERTICAL de las flechas. En horizontal ese hueco es
   lateral: el alto se queda en 90px. Sin esta regla ganaria la de arriba
   por especificidad (:has() aporta (1,3,0)) pese al media query. */
#innerBanner .inner-thumb-wrapper:has(.swiperNav .swiper-button-lock) { height: 5.625rem; padding: 0 calc(2.5rem + 8px); }
#innerBanner .inner-thumb-wrapper .swiperNav 		{ display: flex; flex-direction: row; }
#innerBanner .inner-thumb-wrapper .swiperNav [class*=swiper-button-] span { transform: rotate(-90deg); }

}

/* #Mobile (Portrait)
================================================== */
@media only screen and (max-width: 767px) {

/* Sin 'z-index: inherit' (se quita aqui): resolvia a 'auto' y anulaba el
   contexto de apilamiento de #innerBanner, dejando escapar a
   .js-motion-pause (z-index:20, accessibility.css) a la raiz del documento,
   donde se superponia a la mascara movil y al menu hamburguesa (verificado
   en vivo, ago 2026). #innerBanner ya tiene su propio z-index base (linea 42
   de este mismo archivo) que sigue aplicando sin esta regla. */
#innerBanner, #innerBanner .inner-slider-video, #innerBanner .inner-slider, #innerBanner .inner-slider-default { width: 100%; height: 100dvh; touch-action: inherit; }
#innerBanner #caption 								{ width: fit-content; max-width: 23.125rem; margin-left: 0; padding: 1.25rem 1.25rem; top: 20%; right: 1.25rem; }
#innerBanner #caption .title 						{ font-size: 1.25rem; line-height: 1.5625rem; }
#innerBanner .inner-thumb-wrapper 					{ width: calc(100% - 2.5rem); max-width: 35.625rem; height: 5.625rem; padding: 0 calc(2.5rem + 8px); top: auto; transform: translateY(0%); bottom: calc(4rem + 1.25rem); right: 0; left: 0; }
/* Mismo motivo que en el tramo 768-960: neutraliza la regla de escritorio de
   la linea 115, que recupera el hueco VERTICAL de las flechas. */
#innerBanner .inner-thumb-wrapper:has(.swiperNav .swiper-button-lock) { height: 5.625rem; padding: 0 calc(2.5rem + 8px); }
#innerBanner .inner-thumb-wrapper .swiperNav 		{ display: flex; flex-direction: row; }
#innerBanner .inner-thumb-wrapper .swiperNav [class*=swiper-button-] span { transform: rotate(-90deg); }

}

/* #Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {

#innerBanner #caption 								{ top: 10%; }
#innerBanner .inner-thumb-wrapper 					{ bottom: 1.25rem; }

}

/* #Hero de la pagina de error (404)
==================================================
   La plantilla seo-utils (el 404 del sitio) llama a inner-banner para que el
   <header> banner ocupe espacio en el flujo: sin hero medía 0 de alto y el
   #header fijo tapaba el subtitulo del mensaje de error por completo.

   Pero el hero por defecto mide 100dvh, y en una pagina de error eso deja el
   mensaje BAJO EL PLIEGUE (medido en /aviso-legal, que usa la misma rama por
   defecto: el <h1> cae en y=894 con un viewport de 844). Se reduce a 40dvh
   SOLO aqui: suficiente para dar identidad visual, y deja "Error 404" y su
   subtitulo visibles sin hacer scroll.

   Va FUERA de las media queries y con el prefijo body.seo-utils a proposito:
   la altura de 100dvh se declara en el selector agrupado de arriba Y se repite
   en tres media queries, asi que hace falta mas especificidad para ganarles a
   todas sin duplicar el override en cada breakpoint. Especificidad (1,2,1)
   frente a (1,1,0) — sin !important.

   dvh y no vh: es la unidad que usa el resto del componente (en iOS la barra
   de URL hace saltar el 100vh). */
body.seo-utils #innerBanner,
body.seo-utils #innerBanner .inner-slider-default {
	height: 40dvh;
}