@charset "utf-8";
/* ==========================================================================
   ROOMS HOME - Bloque de habitaciones de la home
   ==========================================================================
   Maqueta de DOS COLUMNAS: texto a la izquierda y carrusel de fotos a la
   derecha, con la altura gobernada por un suelo en rem que puede crecer con el
   contenido. Se carga condicionalmente desde
   xsl/themes/default/_common/rooms/rooms-home.xsl dentro del <xsl:if> que
   comprueba si el bloque "custom-home-rooms" existe en el CMS, asi que si el
   editor no crea esa seccion este CSS no se descarga. NO se registra en
   etc/theme-config.php (carga deliberada desde la propia plantilla XSL).

   DE DONDE SALEN LOS VALORES (ago-2026). El bloque paso de ser un indice de 8
   pestanas -cabecera centrada, menu lateral y un panel por habitacion con su
   carrusel arriba y su texto abajo- a esta maqueta de dos columnas. Las fuentes
   son dos, y ninguna es nueva:

     - LA COLUMNA DE TEXTO copia la geometria y la escala tipografica del bloque
       de experiencias (experiences.css), que es la maqueta que el cliente pidio
       replicar, con las columnas INVERTIDAS. Alli el texto es la columna derecha
       y su padding reserva el borde de pagina a la derecha; aqui es la izquierda,
       asi que el padding esta espejado: --container-padding pasa al lado
       izquierdo (borde de pagina) y el hueco de separacion con la foto al
       derecho. Los tamanos de subtitulo, titulo y parrafo son los mismos valores
       en los mismos breakpoints.

     - EL CARRUSEL conserva intacta la geometria de miniaturas que ya tenia este
       bloque (.rooms-thumb-wrapper de 128x420 en columna, franja horizontal de
       90px por debajo de 961px, flechas, barra de progreso). Lo unico que cambia
       es la caja del slider grande: de 690px de alto y ancho de contenedor
       centrado, a llenar su mitad de pantalla entera.

   QUE DESAPARECIO, para que nadie lo busque: el .titleBox de cabecera centrada,
   el .roomsMenu del indice de pestanas, el .roomsCont que envolvia los paneles,
   el .info .content con su flex:1 y el .btnBox de dos botones. El bloque tiene
   ahora un unico CTA, dentro de la columna de texto.
   Lo que SI se conserva es el nodo .items, con .show fija: dejo de alternar -hay
   un solo panel y siempre se ve- pero sigue siendo el ancla que busca el motor de
   la barra de progreso de las miniaturas. Ver el comentario junto a su regla.

   Y CON ELLOS, DOS CALCULOS QUE YA NO HACEN FALTA:
     - el "max-width: min(1040px, calc(100vw - 728px))" del .roomsBox, que
       reservaba a AMBOS lados el hueco del indice de pestanas porque el bloque
       iba centrado y el menu era position:absolute anclado al borde de pagina.
       Ya no hay indice y el bloque es full-bleed: sobra.
     - la reserva del hueco del indice en el padding del texto, que en
       experiences.css es un "max(var(--container-padding), 328px)". Aqui el
       indice de fotos vive DENTRO de la foto (.rooms-thumb-wrapper es absolute
       respecto a .roomsSlider), no en el hueco del texto, asi que el padding del
       texto es el borde de pagina limpio.

   ALTO (ago-2026, segunda vuelta). Este bloque NACIO copiando el 100dvh de
   experiences.css, pero alli ese valor ES el mecanismo del apilado sticky y aqui
   no hay pila: esto es una seccion mas del scroll vertical. El dvh se quedo
   huerfano y se ha retirado. Ahora la altura sale de un suelo en rem con dos
   valores por tramo, que el contenido puede superar si el copy del CMS crece. El
   razonamiento completo -por que rem y no dvh/svh, por que min-height y no
   height, y por que dos valores- esta junto a la regla de .items.

   Consecuencias de haber soltado el viewport, todas buscadas:
     - el padding vertical de .info deja de ser reserva del cromo fijo (#header +
       mascara de reservas) y pasa a ser padding de lectura: 5rem simetricos, y
       SOLO de 1366px hacia arriba;
     - desaparece la media query por ALTURA (min-width:961px y max-height:800px)
       que comprimia el titular a 2rem. Existia para meter el texto en la banda de
       100dvh; desatada la caja del viewport no tenia nada que hacer, y de hecho
       solo conseguia bajar el bloque en portatiles;
     - la columna de la galeria necesita contain:size para no realimentar el alto
       (ver su regla: sin eso el layout desborda a 2^25 px).

   Lo que NO cambia: este archivo sigue sin tener nada equivalente al .is-covered
   de experiences.css (WCAG 2.4.11), porque no hay paneles enterrados que sacar
   del orden de tabulacion.
   ========================================================================== */

#roomsSec {
	padding-top: 0;
	padding-bottom: 0;
	background-color: #FFFFFF;
	overflow: hidden;
}
/* LA CAJA FLEX ES .items, NO .roomsBox. El nodo intermedio existe porque el motor
   de la barra de progreso de las miniaturas -compartido con el listado de
   /habitaciones- hace closest(".items") en cinco sitios; el razonamiento completo
   esta junto al nodo, en rooms-home.xsl. .roomsBox se queda como envoltorio de la
   animacion wow, sin geometria propia, igual que .experiencesBox en el bloque que
   este replica. */
/* ALTURA: SUELO EN rem, NUNCA ALTURA CERRADA NI UNIDADES DE VIEWPORT.
   Hasta ago-2026 esto era `height: 100dvh`, heredado de cuando el bloque era un
   panel a pantalla completa. Ese comportamiento esta ANULADO -no hay sticky ni
   apilamiento- asi que el viewport dejo de ser mecanismo y el dvh se quedo como
   numero huerfano. Se retira por tres motivos:

     1) "65dvh" no es una altura, son varias: 499px en un portatil de 768, 585 en
        uno de 900 y 702 en un monitor de 1080, para un contenido que mide entre
        447 y 522px. Atar la caja a la ventana hacia que el aire sobre y bajo el
        texto cambiara casi al doble segun el monitor, sin intencion de diseno.
     2) La palanca de escala del proyecto es UNICA: html{font-size:75%}. Un suelo
        en dvh/svh seria lo unico del bloque que no la sigue, asi que el dia que
        se mueva del 75% el titular, el parrafo, el padding y la franja de
        miniaturas creceran dentro de una caja que no se mueve. Un suelo en rem
        escala con lo que protege.
     3) Coste: cada cambio de la barra de URL en movil reevalua el dvh DURANTE la
        animacion, lo que invalida esta caja, hace reflow de todo lo que va debajo
        (rooftop, experiences, destination, benefits, faqs) y ademas dispara el
        ResizeObserver de Swiper -dos update() por fotograma con lectura forzada
        de geometria de los 4 slides-. No sube el CLS (Chromium no puntua los
        desplazamientos por cambio de viewport y Safari no implementa Layout
        Instability), pero cuesta CPU y fluidez de scroll. Si algun dia hubiera
        que volver a una unidad de pantalla, seria `svh`, nunca `dvh`.

   min-height Y NO height: #roomsSec es overflow:hidden, asi que con altura dura
   los 403 caracteres de la descripcion del CMS se recortarian en silencio si el
   editor los alarga. Con suelo, el bloque crece.

   DOS VALORES: 50rem de 1366px hacia arriba y 40rem por debajo.

   El de 1366+ (50rem = 600px reales) lo fijo el cliente. Conviene saber que ahi
   el SUELO GANA SIEMPRE: la altura natural del contenido en escritorio es de
   447 a 509px, siempre por debajo de los 600. O sea que en la practica el bloque
   mide 600px fijos en todo el escritorio y el crecimiento queda como reserva:
   solo entra si el editor alarga la descripcion (hoy 403 caracteres) lo bastante
   para pasar de 600. Sigue siendo min-height y no height a proposito, para que
   ese caso crezca en vez de recortarse contra el overflow:hidden de #roomsSec.

   El de 961-1365 y 768-960 se queda en 40rem porque ahi los viewports son mas
   bajos y 600px se comerian la pantalla; en <=767 se anula del todo.

   Dato que conviene no perder, porque es contraintuitivo: la altura natural se
   mueve al REVES de lo que uno espera -509px a 1366 y solo 447px a 1920- porque
   a partir de 1601 la columna de texto pasa de 25rem a 30.1875rem y el parrafo
   ocupa menos lineas. En la pantalla grande el contenido se encoge. Es la razon
   de que no exista un suelo unico que cuadre en todo el rango.

   Con el suelo mandando, el alto del hueco de la galeria es CONSTANTE y su
   proporcion la marca solo el ancho de pantalla: de 1,14:1 a 1366 hasta 1,60:1 a
   1920. Esa banda es la que fija el recorte room-home-desktop, que se corta en su
   media geometrica (ver etc/image-filters-config.php). Ojo si algun dia se
   atiende el parque de 2560: alli el hueco se va a 2,13:1.

   OJO: al declararse en la regla base, el suelo CASCADEA hacia abajo. Cada tramo
   inferior lo re-declara a proposito; sin eso, un viewport de 1024x600 heredaria
   los 696px. El tramo <=767 lo anula del todo. */
#roomsSec .roomsBox .items {
	display: flex;
	flex-direction: row;
	min-height: 50rem;
	background-color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   COLUMNA DE TEXTO
   -------------------------------------------------------------------------- */
/* Padding ESPEJADO respecto a experiences.css (ver cabecera): el borde de pagina
   -var(--container-padding)- va a la IZQUIERDA porque esta es la columna de la
   izquierda, y la separacion con la foto al lado derecho.

   VERTICAL: 5rem arriba y abajo, y son padding de LECTURA, no una reserva de
   cromo. Antes eran 7.75rem/6.1875rem y ese numero no era estetico: reservaba el
   alto del #header fijo y de la mascara de reservas, porque el bloque medía un
   viewport entero y el cromo tapaba sus franjas. Con el bloque a ~500-700px eso
   ya no aplica, asi que el valor pasa a ser simetrico y elegido por diseno.

   SOLO DE 1366px HACIA ARRIBA. Los tramos 961-1365, 768-960 y <=767 conservan
   sus valores actuales por decision del cliente, asi que este 5rem se repite en
   los overrides de 1501-1600 y 1366-1500 (donde solo cambia el lado derecho) y
   NO se propaga mas abajo. Cuidado al tocarlo: el padding de bloque de .info
   esta sobreescrito en cinco media queries, asi que cambiarlo aqui solo afecta
   a >=1601. */
#roomsSec .roomsBox .items .info {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 50%;
	padding: 5rem 8rem 5rem var(--container-padding);
}
/* Los margenes auto son la red de seguridad cuando el contenido NO cabe en la
   banda visible: se resuelven a 0 y el bloque se apoya ARRIBA en vez de
   desbordar por los dos lados a la vez, que es lo que hace align-items:center
   con espacio negativo. Asi el titular nunca queda debajo del header: lo que se
   sacrifica primero es el final del texto.
   Es una precaucion real en este bloque, no copiada por inercia: la descripcion
   que trae el CMS mide 403 caracteres, frente a los 240-278 de los items de
   experiencias, o sea ~50% mas texto en la misma caja.
   Se prefiere a 'overflow-y:auto' porque Chromium hace focusable de oficio
   cualquier contenedor con scroll real y apareceria como parada de tabulacion
   sin nombre accesible (mismo motivo documentado en more-info-dialog.xsl). */
#roomsSec .roomsBox .items .info .inner {
	width: 100%;
	max-width: 30.1875rem;
	margin-block: auto;
}
#roomsSec .roomsBox .items .info .subtitle {
	display: block;
	margin: 0 0 2rem 0;
	font-size: 1.125rem;
	color: #800033;
	font-weight: 600;
	line-height: 1.4375rem;
	letter-spacing: 0.09375rem;
	text-transform: uppercase;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#roomsSec .roomsBox .items .info .title {
	display: block;
	margin: 0 0 4rem 0;
	font-size: 2.8125rem;
	color: #1A1A1A;
	font-weight: 400;
	line-height: 3.25rem;
	letter-spacing: -0.09375rem;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#roomsSec .roomsBox .items .info .title:last-child {
	margin-bottom: 0;
}
#roomsSec .roomsBox .items .info .title br {
	display: block;
}
#roomsSec .roomsBox .items .info p {
	margin: 0 0 1.5rem 0;
	font-size: 1.125rem;
	color: #1A1A1A;
	font-weight: 400;
	line-height: 1.5rem;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#roomsSec .roomsBox .items .info p:last-child {
	margin-bottom: 0;
}
#roomsSec .roomsBox .items .info p strong {
	font-weight: 600;
}
#roomsSec .roomsBox .items .info .btnBox {
	display: flex;
	justify-content: flex-start;
	gap: 0.9375rem;
	margin-top: 2.5rem;
}
/* Aire sobre el CTA cuando hay descripcion. Hermano general (~) y no adyacente
   (+): puede haber varios <p> delante. Mismo valor y mismo alcance por
   breakpoint que en experiences.css, incluidos los overrides a 30px de 768-960 y
   max-767: sin ellos, la mayor especificidad de esta regla (incluye el elemento
   p) ganaria siempre y el valor compacto del breakpoint no se aplicaria nunca. */
#roomsSec .roomsBox .items .info p ~ .btnBox {
	margin-top: 3rem;
}
#roomsSec .roomsBox .items .info .btnBox .button {
	margin: 0;
}

/* --------------------------------------------------------------------------
   COLUMNA DEL CARRUSEL
   -------------------------------------------------------------------------- */
/* z-index:0 (no solo position:relative) para que este contenedor cree su propio
   contexto de apilamiento: sin el, .js-motion-pause (z-index:20,
   accessibility.css) escapa a la raiz del documento y se superpone al #header
   fijo en cuanto el bloque pasa por debajo al hacer scroll (verificado en vivo,
   ago 2026: en cualquier breakpoint, no solo movil).
   Es ademas el ancestro posicionado de .rooms-thumb-wrapper, que es absolute:
   por eso su "right" se mide desde el borde de la FOTO. Como la foto llega hasta
   el borde derecho de la pagina, los 76px de siempre siguen midiendo lo mismo
   que antes respecto a la ventana. */
/* contain:size Y display:flex SON LA PIEZA QUE HACE POSIBLE LA ALTURA VARIABLE.
   No son adornos y no se pueden quitar por separado. Al soltar la altura cerrada
   de .items aparece una dependencia circular que TERMINA EN DESBORDE: sin esto,
   medido en Chrome, el bloque pasa a medir 33.554.432 px -que es 2^25, el techo
   de saturacion de LayoutUnit en Blink-, con la galeria y el slide arrastrados.

   El bucle no es solo de CSS, lo cierra Swiper:
     1) updateSize() lee el clientHeight de .rooms-slider;
     2) updateSlides() escribe ese alto INLINE en cada slide (porque
        slidesPerView es 1 numerico);
     3) el wrapper vertical es flex-direction:column -> su contenido pasa a medir
        N x alto;
     4) .rooms-slider se dimensionaba por contenido -> crece;
     5) el ResizeObserver de Swiper (activo por defecto) lo detecta -> update()
        -> vuelta al 1.
   Progresion geometrica de razon N = numero de fotos. TRAMPA DE TEST: con UNA
   sola foto la razon es 1 y NO diverge -se queda con un alto obsoleto, que
   parece "casi bien"-, asi que este fallo hay que probarlo con la galeria llena.

   Se corta en los DOS eslabones:
     - contain:size significa "dimensionate como si no tuvieras contenido", asi
       que la contribucion de alto de esta columna es 0 y el alto del bloque lo
       decide solo la columna de texto (con el suelo de min-height). Eso mata el
       paso 4.
     - display:flex hace que .rooms-slider rellene por ESTIRADO en el eje
       transversal en vez de por porcentaje, asi que es inmune a lo que Swiper
       escriba dentro. Eso mata la dependencia del paso 1.

   Descartado position:absolute (prohibido por el cliente) y descartado
   aspect-ratio: medido, con una razon 4/3 la RAZON gana al texto (507px a 1366 y
   534 a 1440, ~715 proyectado a 1920), o sea la foto manda el alto y el bloque
   SUBE en vez de bajar. Y no es un candado: la razon solo fija el tamano
   hipotetico, el usado lo pone el estirado, asi que en cuanto el texto es mas
   alto la proporcion se rompe igual.

   TRES FORMAS DE ROMPER ESTO, todas de "todo o nada" -la foto desaparece, no se
   descoloca-, asi que atencion:
     1) devolver `height: 100%` a .rooms-slider (ver la regla siguiente);
     2) poner en .items cualquier align-items distinto de stretch (tentador para
        centrar el texto): esta columna se quedaria con alto 0;
     3) quitar el aspect-ratio:1/1 del tramo <=767, que es lo UNICO que le da
        caja a esta columna en movil (ahi no hay estirado que la sostenga).

   z-index:0 (no solo position:relative) para que cree su propio contexto de
   apilamiento: sin el, .js-motion-pause (z-index:20, accessibility.css) escapa a
   la raiz del documento y se superpone al #header fijo en cuanto el bloque pasa
   por debajo al hacer scroll (verificado en vivo, ago 2026).
   Es ademas el ancestro posicionado de .rooms-thumb-wrapper, que es absolute:
   por eso su "right" se mide desde el borde de la FOTO. */
#roomsSec .roomsBox .items .roomsSlider {
	position: relative;
	z-index: 0;
	width: 100%;
	max-width: 50%;
	display: flex;
	contain: size;
}
/* SIN height: rellena por ESTIRADO, no por porcentaje. Ver la regla de arriba.
   Antes era "height: 100%" y no se puede devolver: contra un padre de altura
   indefinida vuelve a resolver como auto y la galeria se desborda de su columna.
   No se pierde nada funcional: con slidesPerView numerico Swiper escribe el alto
   inline en cada slide y un inline gana a cualquier porcentaje de la hoja, asi
   que el 100% solo era decoracion. Lo unico que queda sin respaldo es el
   instante previo al init y el caso sin JS, y ahi el overflow:hidden que trae
   .swiper lo recorta. */
#roomsSec .roomsBox .items .rooms-slider {
	width: 100%;
	user-select: none;
}
#roomsSec .roomsBox .items .rooms-slider .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#roomsSec .roomsBox .items .rooms-slider .swiper-slide picture,
#roomsSec .roomsBox .items .rooms-slider .swiper-slide picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* MINIATURAS. Geometria conservada tal cual del bloque anterior: 128x420 en
   columna, centradas en vertical y a 76px del borde derecho. */
#roomsSec .roomsBox .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;
}
/* Cuando TODAS las miniaturas caben, applyThumbNavLock() marca las flechas con
   .swiper-button-lock y el wrapper recupera el hueco vertical que les reservaba
   el padding. */
#roomsSec .roomsBox .items .rooms-thumb-wrapper:has(.swiperNav .swiper-button-lock) {
	height: 19rem;
	padding: 0;
}
#roomsSec .roomsBox .items .rooms-thumb-wrapper .rooms-slider-thumb {
	width: 100%;
	height: 100%;
}
#roomsSec .roomsBox .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;
}
#roomsSec .roomsBox .items .rooms-thumb-wrapper .rooms-slider-thumb .swiper-slide.swiper-slide-thumb-active {
	border: 2px solid #FFFFFF;
}
#roomsSec .roomsBox .items .rooms-thumb-wrapper .rooms-slider-thumb .swiper-slide picture,
#roomsSec .roomsBox .items .rooms-thumb-wrapper .rooms-slider-thumb .swiper-slide picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#roomsSec .roomsBox .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;
}
#roomsSec .roomsBox .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%);
}
#roomsSec .roomsBox .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. */
#roomsSec .roomsBox .items .rooms-thumb-wrapper .swiperNav [class*=swiper-button-] span {
	min-width: 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	background: #ffffff;
}
#roomsSec .roomsBox .items .rooms-thumb-wrapper .swiperNav [class*=swiper-button-] span img {
	filter: none;
}

/* --------------------------------------------------------------------------
   ETIQUETA DE HABITACION
   -------------------------------------------------------------------------- */
/* Rotulo con el nombre de la tipologia de la foto visible. UNO solo por
   carrusel: no vive dentro del .swiper-slide -ahi viajaria con la foto en el
   desplazamiento vertical de 1000ms y se veria cruzando la imagen a media
   transicion (comprobado en vivo)-, sino como hermano del boton de pausa,
   quieto en su esquina. Lo posiciona .roomsSlider, que ya es position:relative
   con z-index:0.

   GEOMETRIA ATADA AL BOTON DE PAUSA, no elegida: comparten linea inferior y
   alto para que se lean como un par.
     bottom 1rem  -> el mismo del boton (regla base de .js-motion-pause en
                     accessibility.css).
     right        -> 1rem (retranqueo del boton) + 44px (SU ancho, en px y no en
                     rem porque asi esta declarado alli) + 0.5rem de aire. Si
                     alguien cambia el tamaño del boton hay que cambiar este
                     calc: no hay variable compartida entre los dos archivos.
     height 44px  -> el mismo del boton, para que las bases coincidan en vez de
                     quedar escalonadas.
   No hay solape con las miniaturas: .rooms-thumb-wrapper esta centrado en
   vertical y termina unos 90px mas arriba (medido en vivo a 1600x900).

   z-index 2 y no 20: por encima de la foto y a la par de las miniaturas, pero
   POR DEBAJO del boton de pausa (z-index:20), que es el unico elemento
   interactivo de esta esquina y nunca debe quedar tapado.

   pointer-events:none porque es un rotulo, no un control: el carrusel se
   arrastra con el dedo (allowTouchMove:true) y la etiqueta no debe interceptar
   ese gesto.

   Tono NO nuevo: el 26/26/26 al 72% es el que ya usa el proyecto para texto
   sobre foto (.js-motion-pause y .thumb-progress), escrito literal como en
   ellos porque no hay variable para el.

   border-radius en px y no en rem: el alto tambien esta en px, y con la palanca
   de raiz al 75% un 1.375rem daria 16.5px y dejaria de ser una pildora. */
#roomsSec .roomsBox .items .roomsSlider .rooms-slide-label {
	position: absolute;
	z-index: 2;
	bottom: 1rem;
	right: calc(1rem + 44px + 0.5rem);
	display: flex;
	align-items: center;
	height: 44px;
	max-width: calc(100% - 6rem);
	padding: 0 1.25rem;
	/* TIPOGRAFIA COPIADA DEL .subtitle DE ESTE MISMO BLOQUE (1.125rem/600/
	   0.09375rem/uppercase, unas 20 reglas mas arriba), que es el registro del
	   proyecto para "etiqueta corta en mayusculas". No se inventa un tamaño: con
	   la palanca de raiz al 75% un 0.875rem -que es lo que parece razonable leido
	   en el CSS- se queda en 10,5px reales, mas pequeño que CUALQUIER texto del
	   bloque y flojo de leer encima de una foto.
	   Y no se toma el registro del CTA (.btnBox .button, 0.9375rem/700): ese es el
	   de un elemento CLICABLE, y esta etiqueta no lo es -pointer-events:none-, asi
	   que vestirla de boton invitaria a pulsarla. El peso 600 frente al 700 del CTA
	   remata esa distincion. */
	font-size: 1.125rem;
	color: #ffffff;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.09375rem;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: rgb(26 26 26 / 72%);
	border-radius: 22px;
	pointer-events: none;
}
/* SIN TEXTO NO HAY CAJA. Es la unica guarda por foto que existe: la plantilla
   emite el <span> si ALGUNA foto tiene descripcion, y el JS lo vacia en los
   slides que no la tienen. Sin esto se veria una pildora vacia flotando.
   No es un fallback: la etiqueta ausente es justo la señal de que falta
   rellenar la descripcion de esa foto en el CMS. */
#roomsSec .roomsBox .items .roomsSlider .rooms-slide-label:empty {
	display: none;
}
/* Fundido de entrada del relevo: la clase la pone swiper-bundle-controls.js al
   cambiar de slide, junto con el texto nuevo, y la retira al acabar la animacion.

   ANIMATION Y NO TRANSITION, Y ESTO NO ES ESTILO: es lo que impide que la
   etiqueta pueda quedarse invisible para siempre.
   La primera version usaba una transicion con un estado intermedio ".is-changing
   { opacity: 0 }" que se ponia al empezar el movimiento del carrusel y se
   quitaba al terminarlo. Con eso el estado por defecto de la etiqueta pasaba a
   ser INVISIBLE y su vuelta dependia de que llegase el slideChangeTransitionEnd
   de Swiper. Se observo en vivo (ago 2026, redimensionando la ventana mientras
   el carrusel avanzaba) que ese evento puede no llegar: la clase se quedaba
   pegada y la etiqueta desaparecia del bloque de forma permanente, sin error de
   consola y sin volver hasta recargar.
   Con una animacion SIN animation-fill-mode el peor caso es inofensivo: cuando
   acaba, el elemento vuelve a su opacidad base (1) aunque la clase siga puesta,
   asi que como maximo se pierde un fundido. NO poner "forwards" aqui: eso
   reintroduciria exactamente el fallo anterior. */
@keyframes roomsLabelIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
#roomsSec .roomsBox .items .roomsSlider .rooms-slide-label.is-swapping {
	animation: roomsLabelIn 300ms ease;
}
/* Quien pide menos movimiento no ve el fundido: el texto cambia de golpe. Misma
   politica que el resto del proyecto -cada modulo declara su excepcion; no hay
   una regla global que anule las animaciones-. */
@media (prefers-reduced-motion: reduce) {
	#roomsSec .roomsBox .items .roomsSlider .rooms-slide-label.is-swapping {
		animation: none;
	}
}



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

#roomsSec .roomsBox .items .info 							{ padding: 5rem 4.375rem 5rem var(--container-padding); }
#roomsSec .roomsBox .items .info .inner 					{ max-width: 25rem; }
#roomsSec .roomsBox .items .info .title 					{ font-size: 2.5rem; line-height: 2.8125rem; }

}



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

#roomsSec .roomsBox .items .info 							{ padding: 5rem 3.125rem 5rem var(--container-padding); }
#roomsSec .roomsBox .items .info .inner 					{ max-width: 25rem; }
#roomsSec .roomsBox .items .info .title 					{ font-size: 2.5rem; line-height: 2.8125rem; }
/* El indice de fotos se acerca al borde en este tramo, igual que hacia antes */
#roomsSec .roomsBox .items .rooms-thumb-wrapper 			{ right: 2rem; }

}



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

/* Los laterales se quedan en los 32px del diseno. Solo cambia el cromo vertical:
   104 de header y 117 = 79 de mascara + 38 de separacion (la mascara despega mas
   del borde por debajo de 1366px). */
#roomsSec .roomsBox .items 								{ min-height: 40rem; }
#roomsSec .roomsBox .items .info 							{ max-width: 50%; padding: 6.5rem 2rem 7.3125rem 2rem; }
#roomsSec .roomsBox .items .info .subtitle 				{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#roomsSec .roomsBox .items .info .title 					{ margin: 0 0 3.125rem 0; font-size: 2.5rem; line-height: 2.8125rem; }
#roomsSec .roomsBox .items .info p 						{ font-size: 1.125rem; line-height: 1.5rem; }
#roomsSec .roomsBox .items .roomsSlider 					{ max-width: 50%; }
#roomsSec .roomsBox .items .rooms-thumb-wrapper 			{ right: 2rem; }

}



/* #Tablet (Portrait)
==================================================
   Aqui las miniaturas pasan a FRANJA HORIZONTAL: el cambio lo decide
   THUMB_BREAKPOINTS en swiper-bundle-controls.js, que a partir de <=960px pone
   la swiper de miniaturas en direction:horizontal. Estas reglas son las mismas
   que ya tenia el bloque para ese tramo, solo re-escopeadas al nuevo DOM. */
@media only screen and (min-width: 768px) and (max-width: 960px) {

#roomsSec .roomsBox .items 								{ min-height: 40rem; }
#roomsSec .roomsBox .items .info 							{ max-width: 50%; padding: 6.5rem 1.25rem 6.1875rem 1.25rem; }
#roomsSec .roomsBox .items .info .subtitle 				{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#roomsSec .roomsBox .items .info .title 					{ margin: 0 0 1.875rem 0; font-size: 2rem; line-height: 2.3125rem; }
#roomsSec .roomsBox .items .info .title br 				{ display: none; }
#roomsSec .roomsBox .items .info p 						{ font-size: 1rem; line-height: 1.375rem; }
#roomsSec .roomsBox .items .info .btnBox 					{ margin-top: 1.875rem; }
/* Ver el comentario de la regla base: sin esta linea la especificidad de
   ".info p ~ .btnBox" (48px) seguiria ganando dentro de este media query. */
#roomsSec .roomsBox .items .info p ~ .btnBox 				{ margin-top: 1.875rem; }
#roomsSec .roomsBox .items .roomsSlider 					{ max-width: 50%; }
#roomsSec .roomsBox .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; }
/* Neutraliza la regla :has() de escritorio, 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. */
#roomsSec .roomsBox .items .rooms-thumb-wrapper:has(.swiperNav .swiper-button-lock) { height: 5.625rem; padding: 0 calc(2.5rem + 8px); }
#roomsSec .roomsBox .items .rooms-thumb-wrapper .swiperNav { display: flex; flex-direction: row; }
#roomsSec .roomsBox .items .rooms-thumb-wrapper .swiperNav [class*=swiper-button-] span { transform: rotate(-90deg); }

}



/* #Mobile (Portrait)
==================================================
   AQUI SE ABANDONA EL ALTO DE VIEWPORT A PROPOSITO, y es la unica desviacion
   real respecto a experiences.css.

   Aquel bloque mantiene 100dvh en movil porque sus paneles son position:sticky y
   se apilan: el alto de viewport ES el mecanismo del apilado, no una decision
   estetica. Este bloque no se apila con nada, asi que pinarlo a la altura de la
   pantalla solo traeria los problemas y ninguna de las ventajas: en una columna
   de movil hay que meter subtitulo, titular, 403 caracteres de descripcion, el
   CTA y un carrusel con su franja de miniaturas. experiences.css necesito TRES
   media queries extra por altura para cuadrar eso con textos un 50% mas cortos.

   Se usa el patron del otro bloque de dos columnas del proyecto que tampoco es
   sticky, #destinationSec (destination-home.css): en movil pasa a columna, se
   suelta el alto y el contenido manda. La foto conserva una caja determinista
   con aspect-ratio 1/1, que es exactamente la proporcion del recorte
   room-home-mobile (1150x1150), asi que el object-fit:cover no recorta de mas.

   ORDEN EN MOVIL: texto arriba y foto debajo, que es el orden del DOM. Los dos
   bloques vecinos (#experiencesSec y #destinationSec) ponen la foto arriba, asi
   que esto se sale de esa pauta, y es deliberado. Invertirlo aqui exigiria
   flex-direction:column-reverse, y entonces el orden de foco iria contra el
   orden visual: el CTA del texto -que se veria abajo- se tabularia ANTES que los
   controles del carrusel -que se verian arriba-, o sea WCAG 2.4.3. La otra
   salida seria emitir el carrusel primero en el DOM, pero eso rompe lo mismo en
   escritorio. Se prefiere el orden coherente en los dos ejes a la simetria con
   los vecinos, sobre todo porque asi el titular es lo primero que se lee. */
@media only screen and (max-width: 767px) {

/* Se ANULA el suelo: aqui manda el contenido y nada mas. En la practica no
   ataria casi nunca -foto cuadrada a ancho completo mas el texto ya pasan de
   40rem-, pero si el editor recorta el copy el espacio libre de un flex en
   columna se va AL FINAL y quedaria fondo blanco bajo la foto. */
#roomsSec .roomsBox .items 						{ flex-direction: column; min-height: 0; height: auto; }
/* RESERVA SUPERIOR DE 98px Y NO LOS 50px DEL DISENO, y es consecuencia directa de
   poner el texto arriba en movil (ver cabecera de este bloque). El #header es
   fixed y mide 68px en su estado desplazado: con 50px de padding el SUBTITULO
   entero quedaba detras de la cabecera -medido a 500x844: subtitulo en y 50-61,
   cabecera hasta y 68- justo cuando la seccion queda encuadrada al principio del
   viewport. No es contenido perdido para siempre, porque este bloque no es sticky
   y basta seguir bajando, pero el encuadre natural de la seccion enseñaba el
   titular sin su antetitulo.
   98 = 68 de la cabecera + 30 de margen de lectura, que es el valor compacto que
   el propio diseno usa en movil para los margenes de este bloque.
   Los bloques vecinos no necesitan esto porque en movil ponen la FOTO arriba: la
   cabecera les tapa imagen, no texto. El padding inferior se queda en los 50px
   del diseno. */
#roomsSec .roomsBox .items .info 							{ max-width: 100%; padding: 6.125rem 1.25rem 3.125rem 1.25rem; }
/* El alto lo pone el contenido, asi que los margenes auto de la red de
   seguridad ya no tienen nada que repartir: se anulan para que el padding del
   diseno sea el que se ve. */
#roomsSec .roomsBox .items .info .inner 					{ max-width: 100%; margin-block: 0; }
#roomsSec .roomsBox .items .info .subtitle 				{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#roomsSec .roomsBox .items .info .title 					{ margin: 0 0 1.875rem 0; font-size: 2rem; line-height: 2.3125rem; }
#roomsSec .roomsBox .items .info .title br 				{ display: none; }
#roomsSec .roomsBox .items .info p 						{ font-size: 1rem; line-height: 1.375rem; }
#roomsSec .roomsBox .items .info .btnBox 					{ margin-top: 1.875rem; }
#roomsSec .roomsBox .items .info p ~ .btnBox 				{ margin-top: 1.875rem; }
/* ESTE aspect-ratio ES ESTRUCTURAL EN MOVIL, NO SOLO ESTETICO: NO LO QUITES.
   Es lo UNICO que le da caja a la columna de la galeria en este tramo. En
   escritorio la sostiene el estirado del flex en fila, pero aqui .items es una
   COLUMNA, asi que no hay estirado en el eje vertical; y como .roomsSlider lleva
   contain:size (ver su regla), su contenido no aporta alto. Sin esta razon, la
   columna se queda con alto 0 y la foto DESAPARECE, no se descoloca.
   El valor 1/1, ademas, es la proporcion del recorte room-home-mobile
   (1150x1150), asi que el object-fit:cover no recorta de mas. */
#roomsSec .roomsBox .items .roomsSlider 					{ max-width: 100%; aspect-ratio: 1 / 1; }
#roomsSec .roomsBox .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; }
/* Mismo motivo que en el tramo 768-960 */
#roomsSec .roomsBox .items .rooms-thumb-wrapper:has(.swiperNav .swiper-button-lock) { height: 5.625rem; padding: 0 calc(2.5rem + 8px); }
#roomsSec .roomsBox .items .rooms-thumb-wrapper .swiperNav { display: flex; flex-direction: row; }
#roomsSec .roomsBox .items .rooms-thumb-wrapper .swiperNav [class*=swiper-button-] span { transform: rotate(-90deg); }

}



/* #Etiqueta de habitacion en movil/tablet
==================================================
   Bloque APARTE de los dos tramos de arriba (768-960 y max-767) porque su corte
   es 960 A SECAS: es el unico elemento de este archivo que cambia en el mismo
   punto en los DOS tramos, y repetir la regla en cada uno la duplicaria.

   En este rango el .rooms-thumb-wrapper deja de ser franja VERTICAL a la derecha
   y pasa a franja HORIZONTAL pegada abajo, ocupando casi todo el ancho (medido a
   485px de ancho: de x=28 a x=456 de 485). La esquina inferior derecha deja de
   estar libre y la etiqueta pisaba las miniaturas y la flecha "siguiente"
   (solape real verificado en vivo).

   Se sube a ARRIBA-IZQUIERDA porque es la unica esquina libre: el boton de pausa
   se va a arriba-DERECHA en este mismo tramo (accessibility.css, bloque
   "Habitaciones en mobile/tablet"). Etiqueta y boton siguen compartiendo linea,
   ahora la superior, uno en cada extremo.

   El corte es 960 y no el 991 general del proyecto para ir al mismo compas que
   esas dos reglas: con 991 habria 31px en los que la etiqueta ya estaria arriba
   y las miniaturas seguirian en el lateral.

   max-width con 5rem y no 6rem de margen porque aqui no hay que reservar hueco
   para el boton -esta en el otro extremo-, solo el retranqueo de ambos lados. */
@media only screen and (max-width: 960px) {

#roomsSec .roomsBox .items .roomsSlider .rooms-slide-label 	{ top: 1rem; bottom: auto; left: 1rem; right: auto; max-width: calc(100% - 5rem); }

}