/**
 * MODULO: rooms-list.css
 * BLOQUE: #roomsMainSec (listado de habitaciones, plantilla 'rooms')
 *
 * Se carga con <link> desde rooms-list.xsl, solo si la seccion tiene hijas. NO
 * se registra en etc/theme-config.php.
 *
 * Extraido del monolito de la maqueta del 31-jul (css/fenix-sevilla-hotel.css,
 * bloque "Rooms Page") mas las reglas de #roomsMainSec de los 7 breakpoints de
 * su css/skeleton.css, que aqui viven al final del archivo en vez de en el
 * skeleton global: el modulo es autocontenido, igual que rooms-home.css.
 *
 * Comparte geometria con rooms-home.css (mismo alto de carrusel y de
 * miniaturas) pero NO comparte selectores: los dos bloques estan scopeados por
 * su id y nunca coexisten en la misma pagina, asi que duplicar la geometria es
 * mas barato que un selector compuesto que acople las dos plantillas.
 */

#roomsMainSec {
	position: relative;
	padding-top: 5rem;
	padding-bottom: 5rem;
	background-color: #800033;
	overflow: hidden;
}
/* MISMO PATRON QUE #roomsSec EN rooms-home.css (el razonamiento completo esta
   en el comentario de rooms-home.css:57): el menu es position:absolute y no
   tiene ningun ancestro posicionado, asi que su "left" se mide desde el borde de
   la PAGINA y se queda clavado ahi. El contenido, en cambio, es un bloque
   centrado de ancho fijo: al estrechar la ventana avanza hacia la izquierda
   hasta meterse debajo del menu. Nada reservaba ese hueco, asi que los nombres
   largos quedaban tapados por la foto -medido en vivo, "Suite Fenix Terrace"
   perdia 21px de texto a 1501px de ancho y 3px a 1536px-.

   728 = 2 x (76 left + 256 ancho del menu + 32 de separacion)

   Se reserva DOS veces porque el bloque esta centrado: el hueco hace falta a
   ambos lados para que siga cuadrado en el eje. Por encima de 1768px gana el
   1040px de siempre, asi que el escritorio grande queda EXACTAMENTE igual que
   antes; por debajo el contenido se reduce de forma continua y conserva siempre
   32px de aire respecto al menu. Cada breakpoint repite el calculo con su propio
   ancho de menu. */
#roomsMainSec .roomsBox {
	display: flex;
	flex-direction: row;
	justify-content: center;
	max-width: min(65rem, calc(100vw - 45.5rem));
	margin: 0 auto;
}
#roomsMainSec .roomsBox .roomsMenu {
	width: 16rem;
	position: absolute;
	top: 50vh;
    left: 4.75rem;
    transform: translateY(-50%);
    z-index: 1;
}
#roomsMainSec .roomsBox .roomsMenu ul {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
#roomsMainSec .roomsBox .roomsMenu ul > li {
	font-size: 1.375rem;
	color: #666666;
	font-weight: 400;
	line-height: 1.6875rem;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#roomsMainSec .roomsBox .roomsMenu ul > li > a {
	position: relative;
	display: block;
	padding: 0 0 0 2.5rem;
	color: #FFFFFF;
	/* FASE 08 (E-31): entre reposo y .active solo cambian color y peso; la abreviatura
	   sin propiedad (= all) animaba tambien el anillo de foco. */
	transition: color .25s cubic-bezier(0.645, 0.045, 0.355, 1),
	            font-weight .25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#roomsMainSec .roomsBox .roomsMenu ul > li > a.active {
	color: #F4C670;
	font-weight: 600;
	text-decoration: none;
}
#roomsMainSec .roomsBox .roomsMenu ul > li > a:before {
	content: "";
	width: 2rem;
	height: 0.0625rem;
	background-color: #F4C670;
	position: absolute;
	top: 0.8125rem;
	left: 0;
	opacity: 0;
	transition: .15s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#roomsMainSec .roomsBox .roomsMenu ul > li > a.active:before {
	opacity: 1;
	transition: .50s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#roomsMainSec .roomsBox .roomsCont {
	width: 100%;
}
#roomsMainSec .roomsBox .roomsCont .items {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	gap: 2.5rem;
	margin-bottom: 4rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid #EAEAEA;
}
#roomsMainSec .roomsBox .roomsCont .items:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
/* z-index:0 (no solo position:relative): crea contexto de apilamiento propio
   para confinar a .js-motion-pause (z-index:20, accessibility.css), que si
   no escapa a la raiz del documento y se superpone al #header fijo al
   hacer scroll (verificado en vivo, ago 2026). */
#roomsMainSec .roomsBox .roomsCont .items .roomsSlider {
	position: relative;
	z-index: 0;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-slider {
	width: 100%;
	height: 43.125rem;
	user-select: none;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-slider .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-slider .swiper-slide picture,
#roomsMainSec .roomsBox .roomsCont .items .rooms-slider .swiper-slide picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-slider .swiper-slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper {
	width: 8rem;
	/* Banda de la flecha = diametro (2.5rem = 30px al 75%) + 8px de holgura, y
	   el alto es la caja de contenido -19rem: 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(19rem + (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;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper:has(.swiperNav .swiper-button-lock) {
	height: 19rem;
	padding: 0;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .rooms-slider-thumb {
	width: 100%;
	height: 100%;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .rooms-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;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .rooms-slider-thumb .swiper-slide.swiper-slide-thumb-active {
	border: 2px solid #FFFFFF;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .rooms-slider-thumb .swiper-slide picture,
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .rooms-slider-thumb .swiper-slide picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .rooms-slider-thumb .swiper-slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .rooms-slider-thumb .thumb-progress {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .rooms-slider-thumb .thumb-progress span {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgb(26 26 26 / 72%);
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-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. */
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .swiperNav [class*=swiper-button-] span {
	min-width: 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	background: #ffffff;
}
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .swiperNav [class*=swiper-button-] span img {
	filter: none;
}
#roomsMainSec .roomsBox .roomsCont .items .info {
	display: flex;
	justify-content: space-between;
	gap: 1.25rem;
	width: 100%;
	padding: 0 0.9375rem;
}
#roomsMainSec .roomsBox .roomsCont .items .info .content {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 37.75rem;
}
#roomsMainSec .roomsBox .roomsCont .items .info .title {
	display: block;
	margin: 0 0 0.5rem 0;
	font-size: 2.3125rem;
	color: #F4C670;
	font-weight: 400;
	line-height: 2.625rem;
	letter-spacing: -0.09375rem;
}
#roomsMainSec .roomsBox .roomsCont .items .info p {
	margin: 0 0 0.9375rem 0;
	font-size: 1.125rem;
	color: #FFFFFF;
	font-weight: 400;
	line-height: 1.5rem;
}
#roomsMainSec .roomsBox .roomsCont .items .info p:last-child {
	margin-bottom: 0;
}
#roomsMainSec .roomsBox .roomsCont .items .info p strong {
	font-weight: 600;
}
#roomsMainSec .roomsBox .roomsCont .items .info .btnBox {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
#roomsMainSec .roomsBox .roomsCont .items .info .btnBox .button {
	margin: 0;
}

/* Los breakpoints 1601-2700 y 480-767 no traen ninguna regla propia de
   #roomsMainSec en el skeleton.css de la maqueta (mismo caso que #roomsSec en
   rooms-home.css): se omiten aqui para no dejar un bloque @media vacio. Los 5
   breakpoints restantes se listan en el mismo orden que la maqueta. */

@media only screen and (min-width: 1501px) and (max-width: 1600px) {

/* 690 = 2 x (76 left heredado del base + 237 ancho del menu + 32 de separacion).
   Este tramo no redefine "left", asi que sigue valiendo el 76 del base. */
#roomsMainSec .roomsBox 							{ max-width: min(58.75rem, calc(100vw - 43.125rem)); }
#roomsMainSec .roomsBox .roomsMenu 					{ width: 14.8125rem; }
#roomsMainSec .roomsBox .roomsCont .items .rooms-slider { height: 38.75rem; }

}

@media only screen and (min-width: 1366px) and (max-width: 1500px) {

/* 528 = 2 x (32 left + 200 ancho del menu + 32 de separacion) */
#roomsMainSec .roomsBox 							{ max-width: min(53.75rem, calc(100vw - 33rem)); }
#roomsMainSec .roomsBox .roomsMenu 					{ width: 12.5rem; left: 2rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li 			{ font-size: 1.125rem; line-height: 1.4375rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li > a 		{ padding: 0 0 0 1.875rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li > a:before { width: 1.375rem; top: 0.625rem; }
#roomsMainSec .roomsBox .roomsCont .items .rooms-slider { height: 35.625rem; }
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper { right: 2rem; }

}

@media only screen and (min-width: 961px) and (max-width: 1365px) {

#roomsMainSec										{ padding-top: 4.375rem; padding-bottom: 4.375rem; }
#roomsMainSec .roomsBox 							{ justify-content: flex-end; max-width: 100%; }
#roomsMainSec .roomsBox .roomsMenu 					{ width: 12.5rem; left: 2rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li 			{ font-size: 1.125rem; line-height: 1.4375rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li > a 		{ padding: 0 0 0 1.875rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li > a:before { width: 1.375rem; top: 0.625rem; }
/* Aqui el bloque no va centrado sino pegado a la derecha (flex-end), asi que solo
   hay que reservar el hueco del menu UNA vez, mas los 20px que el .container deja
   al borde derecho.
   284 = 32 left + 200 ancho del menu + 32 de separacion + 20 del container */
#roomsMainSec .roomsBox .roomsCont 					{ max-width: min(46.25rem, calc(100vw - 17.75rem)); }
#roomsMainSec .roomsBox .roomsCont .items 			{ gap: 1.875rem; margin-bottom: 3.125rem; padding-bottom: 3.125rem; }
#roomsMainSec .roomsBox .roomsCont .items .rooms-slider { height: 30.625rem; }
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper { right: 2rem; }
#roomsMainSec .roomsBox .roomsCont .items .info .title { font-size: 2.1875rem; line-height: 2.5rem; }
#roomsMainSec .roomsBox .roomsCont .items .info p 	{ font-size: 1.125rem; line-height: 1.5rem; }

}

@media only screen and (min-width: 768px) and (max-width: 960px) {

#roomsMainSec 											{ padding-top: 4.375rem; padding-bottom: 4.375rem; }
#roomsMainSec .roomsBox 								{ justify-content: flex-end; max-width: 100%; }
#roomsMainSec .roomsBox .roomsMenu 						{ width: 11.25rem; left: 1.25rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li 				{ font-size: 1.125rem; line-height: 1.4375rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li > a 			{ padding: 0 0 0 1.875rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li > a:before 	{ width: 1.375rem; top: 0.625rem; }
#roomsMainSec .roomsBox .roomsCont 						{ max-width: calc(100% - 11.25rem - 1.25rem); }
#roomsMainSec .roomsBox .roomsCont .items 				{ gap: 1.875rem; margin-bottom: 1.875rem; padding-bottom: 1.875rem; }
#roomsMainSec .roomsBox .roomsCont .items .rooms-slider { height: 23.125rem; }
/* La maqueta ponia aqui height/padding con !important (prohibido en este
   proyecto) para ganarle a la regla base :has(.swiperNav .swiper-button-lock)
   de mas arriba en este archivo, que aporta mas especificidad y si no
   ganaria pese al media query. Se resuelve igualando especificidad: se
   repite el mismo selector :has() dentro de este breakpoint (regla
   siguiente), que gana por orden de aparicion. Mismo patron ya usado en
   rooms-home.css para #roomsSec. */
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper { width: calc(100% - 1.25rem); max-width: 35.625rem; height: 5.625rem; padding: 0 calc(2.5rem + 8px); top: auto; transform: translateY(0%); bottom: 1.25rem; right: 0; left: 0; }
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper:has(.swiperNav .swiper-button-lock) { height: 5.625rem; padding: 0 calc(2.5rem + 8px); }
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .swiperNav { display: flex; flex-direction: row; }
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .swiperNav [class*=swiper-button-] span { transform: rotate(-90deg); }
#roomsMainSec .roomsBox .roomsCont .items .info 		{ flex-direction: column; padding: 0; }
#roomsMainSec .roomsBox .roomsCont .items .info .title 	{ font-size: 1.6875rem; line-height: 2rem; }
#roomsMainSec .roomsBox .roomsCont .items .info p 		{ font-size: 1rem; line-height: 1.375rem; }
#roomsMainSec .roomsBox .roomsCont .items .info .btnBox { flex-direction: row; }
#roomsMainSec .roomsBox .roomsCont .items .info .btnBox .button { width: 100%; padding: 1.25rem 1.25rem; }

}

@media only screen and (max-width: 767px) {

#roomsMainSec 											{ padding-top: 3.125rem; padding-bottom: 3.125rem; }
/* max-width: 100% NO es decorativo, es OBLIGATORIO aqui. La regla base topa el
   ancho con min(1040px, calc(100vw - 728px)) para reservar el hueco del indice
   (ver su comentario), y por debajo de 728px de viewport esa resta se vuelve
   NEGATIVA: a 500px calcula -228px, el navegador clampa el max-width a 0 y
   .roomsBox colapsa a ancho cero, con lo que el listado entero se rompe (medido:
   items de 0px de ancho y hasta 1.920px de alto, seccion de 13.379px).
   Los tramos 961-1365 y 768-960 ya hacen este mismo reset; a este se le paso.
   #roomsSec en rooms-home.css:431 lo trae correcto, de ahi que la home no lo
   sufriera. */
#roomsMainSec .roomsBox 								{ flex-direction: column; gap: 1.25rem; max-width: 100%; }
#roomsMainSec .roomsBox .roomsMenu 						{ display: none; width: 100%; margin-top: 0; padding-bottom: 0.625rem; position: static; transform: translateY(0%); overflow-x: auto; }
#roomsMainSec .roomsBox .roomsMenu ul 					{ flex-direction: row; flex-wrap: wrap; gap: 1.25rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li 				{ font-size: 1.125rem; line-height: 1.4375rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li > a			{ white-space: nowrap; padding: 0; }
#roomsMainSec .roomsBox .roomsMenu ul > li > a.active 	{ padding-left: 1.875rem; }
#roomsMainSec .roomsBox .roomsMenu ul > li > a:before 	{ width: 1.375rem; top: 0.625rem; }
#roomsMainSec .roomsBox .roomsCont .items 				{ gap: 1.875rem; margin-bottom: 1.875rem; padding-bottom: 1.875rem; }
#roomsMainSec .roomsBox .roomsCont .items .rooms-slider { height: 23.125rem; }
/* Mismo motivo que en el tramo 768-960: neutraliza la regla base :has() con
   el mismo selector en vez de !important. */
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper { width: calc(100% - 1.25rem); max-width: 35.625rem; height: 5.625rem; padding: 0 calc(2.5rem + 8px); top: auto; transform: translateY(0%); bottom: 1.25rem; right: 0; left: 0; }
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper:has(.swiperNav .swiper-button-lock) { height: 5.625rem; padding: 0 calc(2.5rem + 8px); }
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .swiperNav { display: flex; flex-direction: row; }
#roomsMainSec .roomsBox .roomsCont .items .rooms-thumb-wrapper .swiperNav [class*=swiper-button-] span { transform: rotate(-90deg); }
#roomsMainSec .roomsBox .roomsCont .items .info 		{ flex-direction: column; padding: 0; }
#roomsMainSec .roomsBox .roomsCont .items .info .content { max-width: 100%; }
#roomsMainSec .roomsBox .roomsCont .items .info .title 	{ font-size: 1.6875rem; line-height: 2rem; }
#roomsMainSec .roomsBox .roomsCont .items .info p 		{ font-size: 1rem; line-height: 1.375rem; }
#roomsMainSec .roomsBox .roomsCont .items .info .btnBox .button { width: 100%; padding: 1.25rem 1.25rem; }

}