/* ==========================================================================
   OTRAS HABITACIONES DE LA FICHA - Bloque #otherRoomsSec
   ==========================================================================
   Diseno de referencia: Figma "Room - v5", nodo 855:3466. Tarjeta: 902:2831.

   Se carga condicionalmente desde
   xsl/themes/default/_common/rooms/other-rooms.xsl dentro del <xsl:if> que
   comprueba si la habitacion tiene relacionadas, asi que sin relacionadas
   este CSS no se descarga. NO se registra en etc/theme-config.php.

   Tres tarjetas por fila sobre fondo granate (#800033, el mismo de los
   subtitulos del proyecto).

   CARRUSEL DE BLOQUE, NO GRID (cambio del 18-ago). Hasta esa fecha
   .otherRoomsCont era un grid de 3 columnas fijas y una cuarta relacionada
   bajaba a una segunda fila. Ahora las tarjetas son slides de una swiper
   (.otherRoomsCards) que muestra 1 en movil, 2 en tablet y 3 en desktop, con
   el mismo hueco que tenia el gap de cada tramo -ahora es el spaceBetween de
   other-rooms.js: 40 / 24 / 24 / 48-. Los anchos resultantes son los mismos
   que daba el grid, asi que con 3 relacionadas -el contenido real de las 8
   fichas a dia de hoy- el desktop se ve EXACTAMENTE igual que antes.

   AQUI NO SE DECIDE SI HAY CARRUSEL: lo decide el watchOverflow de Swiper
   (ver other-rooms.js). Este CSS solo describe los dos estados, y el de "no
   hay nada que desplazar" se pinta solo, porque las flechas se ocultan con
   .swiper-button-lock (swiper-bundle-controls.css).

   SI ALGUIEN VUELVE AL GRID, el aviso que costo encontrar sigue vigente:
   habria que poner "grid-template-columns: repeat(3, minmax(0, 1fr))" y NO
   "1fr" a secas. "1fr" equivale a "minmax(auto, 1fr)" y ese minimo auto lo
   fija el contenido: dentro de cada tarjeta hay un Swiper cuyo
   .swiper-wrapper mide el ancho de TODOS sus slides puestos en fila (mas los
   clones del loop), lo que disparaba el primer track a decenas de miles de px
   -medido: 33554432px 0 0- y dejaba las tres tarjetas como una sola a todo el
   ancho. Con la swiper de bloque el problema desaparece: Swiper escribe el
   ancho de cada slide en linea.

   EL DEGRADADO INFERIOR de la imagen va en un ::after del slide y no en el
   <img>: asi cubre todos los slides del carrusel sin depender de cual este
   activo, y no interfiere con el object-fit de la imagen.

   Los dots (.swiper-pagination) van DENTRO del carrusel, sobre la imagen;
   las flechas (.swiperNav) van FUERA y debajo, centradas. Es lo que hace la
   maqueta y por eso el markup los emite en contenedores separados.

   OJO CON EL SCOPE DE .swiperNav EN ESTE ARCHIVO: hay DOS navegaciones
   distintas dentro de #otherRoomsSec -la de cada tarjeta, debajo de la foto y
   centrada, y la de bloque (.otherRoomsNav), a los lados-. Lo que comparten
   (circulo transparente con borde claro y, desde la reduccion al 75%, tambien
   el diametro de 2.5rem) se queda en "#otherRoomsSec .swiperNav"; lo que las
   distingue esta scopeado a ".otherRoomsCard .swiperNav" o a ".otherRoomsNav".
   Un override nuevo sin scope se aplicaria a las dos.

   YA NO SE DISTINGUEN POR TAMANO. Hasta la reduccion al 75% la de tarjeta media
   32px y la de bloque 48; ahora las dos son 2.5rem, el diametro unico de control
   del sitio, y lo unico que las diferencia es donde estan.
   ========================================================================== */

#otherRoomsSec {
	/* Alto de la FOTO de la tarjeta. Es variable porque tiene DOS consumidores que
	   deben cuadrar en los cuatro tramos: el alto del slide del carrusel de fotos y
	   el centrado vertical de las flechas de bloque, que se situan a media foto
	   (top: calc(var(--other-rooms-img-h) / 2)). Con dos valores sueltos, cambiar el
	   alto de la foto en un @media dejaba las flechas descentradas en ese tramo. */
	--other-rooms-img-h: 24.375rem;
	padding: 5rem 4.75rem;
	background-color: #800033;
	/* Las flechas de bloque se salen del contenedor por los lados (left/right
	   negativos) y se apoyan en el padding de la seccion. Este overflow es la red de
	   seguridad para que ni un pixel de ellas provoque scroll horizontal de pagina,
	   igual que #gallerySec, que resuelve sus flechas del mismo modo. */
	overflow: hidden;
}
#otherRoomsSec .container {
	max-width: 109.4375rem;
	margin: 0 auto;
}
#otherRoomsSec .titleBox {
	margin: 0 0 4rem 0;
	text-align: center;
}
#otherRoomsSec .titleBox .title {
	margin: 0;
	font-size: 2.3125rem;
	line-height: 2.625rem;
	color: #FDFBF9;
	letter-spacing: -0.09375rem;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
/* Contenedor POSICIONADO: es la referencia de las flechas de bloque, que van
   absolutas a sus lados. Deliberadamente SIN overflow:hidden -ese lo trae el
   .swiper hijo, que es quien debe recortar las tarjetas-: aqui recortaria las
   propias flechas. */
#otherRoomsSec .otherRoomsCont {
	position: relative;
}

/* --- Carrusel de BLOQUE: desplaza TARJETAS --- */
#otherRoomsSec .otherRoomsCards .swiper-wrapper {
	/* stretch es el valor por defecto de un contenedor flex; se escribe porque de el
	   depende que las tarjetas midan todas lo mismo, que es lo que antes daba el
	   grid y lo que hace funcionar el "flex: 1" del .info de mas abajo. */
	align-items: stretch;
}
#otherRoomsSec .otherRoomsCards > .swiper-wrapper > .swiper-slide {
	/* swiper-bundle.min.css pone "height: 100%" a los slides. Un 100% contra un
	   wrapper cuyo alto lo determina el propio contenido no resuelve a nada util y
	   deja cada tarjeta a la altura de su texto; con auto, el wrapper toma el alto
	   de la mas alta y el stretch de arriba iguala el resto. */
	height: auto;
}
/* WCAG 2.4.11 / 1.3.1: las tarjetas que quedan FUERA de la ventana del carrusel
   salen del orden de tabulacion y del arbol de accesibilidad. Cada una aporta dos
   CTA ("Ver X" y "Reservar X") mas las flechas y los dots de su propio carrusel de
   fotos, asi que con 7 relacionadas hay hasta 4 tarjetas invisibles y tabulables:
   el foco se iria a enlaces que no se ven. Swiper no lo hace por su cuenta -su
   modulo a11y solo toca flechas y bullets, y el bundle 8.4.7 no emite aria-hidden
   en ningun sitio: comprobado-.

   visibility y NO inert, mismo criterio y mismo motivo que experiences.js: los dos
   sacan del Tab y del arbol, pero visibility es aqui un NO-OP VISUAL -la tarjeta ya
   esta recortada por el overflow:hidden del .swiper- y no toca el layout, asi que
   Swiper sigue midiendo igual.

   La clase la pone y la quita other-rooms.js, que es quien sabe cuando el carrusel
   esta en REPOSO. No se usa :not(.swiper-slide-visible) directamente en el CSS
   porque durante el movimiento la tarjeta que SALE pierde esa clase al principio de
   la animacion y desapareceria de golpe en vez de deslizarse. */
#otherRoomsSec .otherRoomsCards > .swiper-wrapper > .swiper-slide.is-offscreen {
	visibility: hidden;
}
#otherRoomsSec .otherRoomsCard {
	display: flex;
	flex-direction: column;
}

/* --- Carrusel de la tarjeta --- */
#otherRoomsSec .otherRoomsSlider {
	position: relative;
	width: 100%;
}
#otherRoomsSec .otherRoomsSlider .swiper-slide {
	position: relative;
	height: var(--other-rooms-img-h);
}
#otherRoomsSec .otherRoomsSlider .swiper-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 75%, rgba(0, 0, 0, 0.63) 100%);
	pointer-events: none;
}
#otherRoomsSec .otherRoomsSlider picture,
#otherRoomsSec .otherRoomsSlider img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Dots CENTRADOS sobre la imagen. En el diseno (nodo 902:2834) el contenedor de
   los dots se ancla en calc(100% - 275.66px) con un translate-x de -50% sobre una
   tarjeta de 552px: 552 - 275.66 = 276.34, que es exactamente el centro. Se llego
   a maquetar alineado a la derecha por leer mal ese anclaje. */
#otherRoomsSec .otherRoomsSlider .swiper-pagination {
	position: absolute;
	right: auto;
	bottom: 1rem;
	left: 0;
	z-index: 2;
	width: 100%;
	text-align: center;
}
/* Forma de "destello" de 4 puntas con lados concavos (no un rombo de lados
   rectos): recorta la caja con un path de curvas Bezier en vez de rotar un
   cuadrado. Path exacto del diseno (x_bullet.svg, viewBox 0 0 16 16),
   autorado en un sistema de 16x16 unidades.

   EL TAMANO SE QUEDA EN 16px Y NO ESCALA CON LA PALANCA, y es a proposito: las
   coordenadas de clip-path: path() son unidades ABSOLUTAS de la caja, no
   escalan con el elemento. Es decir, la caja y el path estan ATADOS: la forma
   solo llena la caja exactamente cuando la caja mide 16px. Con la caja en 1rem
   bajo a 12px mientras el path seguia pidiendo 16, asi que se pintaba solo el
   recorte superior-izquierdo de 12x12 del destello y las cuatro puntas de abajo
   y de la derecha salian cortadas (medido: 4px perdidos por cada lado).

   Reducir el path a 12 unidades habria arreglado el corte, pero un destello de
   12px se queda demasiado pequeno para leerse como tal: se descarta por diseno.

   SI ALGUN DIA HAY QUE CAMBIAR ESTE TAMANO hay dos caminos, y NO vale tocar solo
   el width: o se reescalan todas las coordenadas del path por el mismo factor
   -son 16 numeros, es mecanico-, o se sustituye el path() por un <clipPath> SVG
   con clipPathUnits="objectBoundingBox" y coordenadas normalizadas a 0..1, que
   es la unica forma de que la forma escale sola con la caja y, con ello, con la
   palanca.

   DESDE EL 17-sep-2026 EL DIBUJO VIVE EN UN ::before Y NO EN LA CAJA DEL DOT, por
   dos motivos que van juntos:

     1. WCAG 2.5.8 pide 24x24 de area activa y el dot medía 16x16, con 22px entre
        centros: no llegaba ni por tamano ni por la excepcion de espaciado.
     2. El tamano de la caja NO se podia subir a 24 sin romper el destello, porque
        -como explica el parrafo de arriba- las coordenadas del clip-path son
        absolutas y estan atadas a una caja de 16px exactos.

   Separando las dos cosas se resuelven las dos a la vez: la caja del <button> pasa
   a 24x24 y es la que recibe el puntero, y el ::before conserva sus 16x16 con el
   path intacto. El destello se ve EXACTAMENTE igual que antes; lo que crece es la
   zona que responde.

   El clip-path tiene que estar en el ::before y NO en el boton: recorta tambien a
   los pseudo-elementos, asi que dejarlo en la caja habria recortado con forma de
   destello la propia area de 24x24 que se queria ganar.

   El margen pasa de 0.25rem a 0: con la caja en 24px la separacion entre centros
   queda en 24 exactos -justo el minimo- y el hueco visual entre destellos se
   mantiene practicamente como estaba (antes 22px entre centros, ahora 24). Con el
   margen anterior los dots se habrian separado 30px y la fila habria cambiado de
   aspecto. */
#otherRoomsSec .otherRoomsSlider .swiper-pagination-bullet {
	/* 24px en px y no en rem: es un minimo funcional de WCAG y no debe escalar con
	   la palanca global del 75%. */
	width: 24px;
	height: 24px;
	margin: 0;
	opacity: 1;
	position: relative;
	/* Reset de los estilos de agente de usuario que trae el <button> y que el <span>
	   anterior no tenia. */
	padding: 0;
	border: 0;
	background: none;
}
#otherRoomsSec .otherRoomsSlider .swiper-pagination-bullet::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	background-color: #ffffff;
	clip-path: path("M7.75611 16C8.18941 11.766 11.4392 8.4234 15.5556 8.02228C11.4392 7.5766 8.18941 4.23398 7.75611 0C7.36614 4.23398 4.07304 7.5766 0 7.97772C4.11637 8.4234 7.36614 11.766 7.75611 16Z");
}
#otherRoomsSec .otherRoomsSlider .swiper-pagination-bullet-active::before {
	background-color: #F4C670;
}

/* --- Base COMUN a las dos navegaciones del bloque --- */
/* Los valores de aqui (centrada y con 16px de aire por arriba) son los de la nav
   de TARJETA, que esta en flujo debajo de su carrusel de fotos. La de bloque los
   sobreescribe enteros mas abajo porque va absoluta y a los lados. */
#otherRoomsSec .swiperNav {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
}
/* COMPARTIDO por las dos navegaciones del bloque (tarjeta y bloque): circulo
   transparente con borde claro sobre el granate, y desde la reduccion al 75%
   tambien EL TAMANO. Antes cada una lo ponia por su cuenta -32px la de tarjeta y
   48 la de bloque- porque era lo que las distinguia; ahora las dos son 2.5rem,
   el diametro unico de control del sitio, asi que el valor vive aqui una sola vez
   y lo que las distingue es donde estan: la de tarjeta debajo de la foto y
   centrada, la de bloque a los lados. */
#otherRoomsSec .swiperNav .swiper-button-prev,
#otherRoomsSec .swiperNav .swiper-button-next {
	position: static;
	margin: 0;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid #FDFBF9;
	border-radius: 50%;
	cursor: pointer;
}
/* SIN regla de tamano propia para la nav de TARJETA. Tenia los 32px del diseno
   (nodo 902:2834), scopeados a .otherRoomsCard para no encoger las de bloque;
   con las dos en 2.5rem el override sobra y el tamano lo pone la regla
   compartida de arriba. */
#otherRoomsSec .swiperNav .swiper-button-prev::after,
#otherRoomsSec .swiperNav .swiper-button-next::after {
	content: none;
}
/* NEUTRALIZA EL CONTROL GLOBAL. swiper-bundle-controls.css estiliza
   ".swiperNav [class*='swiper-button-'] span" como un circulo OSCURO de 48px
   (min-width incluido), que es el control estandar del resto de carruseles del
   proyecto. El diseno de este bloque pide otro: circulo de 32px transparente con
   borde blanco sobre el granate. Hay que anular las tres cosas -y el 'min-width'
   explicitamente, porque un width menor no lo vence-, no basta con redefinir el
   ancho. Va scopeado a #otherRoomsSec, asi que el resto de carruseles siguen con
   su control de siempre. */
/* OJO: NADA de justify-content aqui. Este <span> no contiene UNA flecha sino
   DOS: el XSL emite una y swiper-bundle-controls.js la clona en runtime (de ahi
   el nombre .arrowClone). Es el efecto hover canonico del proyecto: las dos van
   en fila dentro de esta ventana con overflow:hidden, el flex-direction decide
   cual queda a la vista (row en .prev, row-reverse en .next) y al pasar el raton
   se deslizan con un translateX. Con justify-content:center se ve MEDIA flecha de
   cada una y parece que el icono esta descentrado. El unico ajuste que necesita
   este bloque es de tamano y fondo; la mecanica se hereda tal cual. */
#otherRoomsSec .swiperNav .arrowClone {
	display: flex;
	align-items: center;
	min-width: 0;
	/* +2px con margin -1px para COMPENSAR EL BORDE del boton, y que el icono mida
	   lo mismo que el circulo.

	   En todo el resto del proyecto el circulo y el icono son el MISMO elemento:
	   .textArrowBtn .arrowClone de los enlaces y el <span> de las flechas del
	   hero, de habitaciones y de ventajas son un circulo RELLENO de 2.5rem SIN
	   borde, asi que icono y circulo miden los dos 30px.

	   Aqui el circulo lo dibuja el borde de 1px del boton y el icono vive en este
	   hijo, y con box-sizing:border-box un hijo al 100% resuelve contra la caja de
	   CONTENIDO, que excluye el borde: sobre un boton de 30px daba 28, y el glifo
	   salia un 7% mas pequeno que en los demas bloques. No era nuevo -con el boton
	   en 48px daba 46-, pero con el circulo mas pequeno esos 2px pasan de ser el
	   4,2% al 6,7% y se notan.

	   Se compensa AQUI y no se toca el borde. Pasar el anillo a un box-shadow
	   inset tambien liberaria la caja de contenido, pero el anillo de foco de
	   accessibility.css usa box-shadow inset sobre este mismo boton: lo pisaria y
	   cambiaria un indicador de foco ya verificado en la pasada WCAG. */
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	margin: -1px;
	background: transparent;
}
/* NO hace falta regla propia para .arrow: swiper-bundle-controls.css ya le pone
   "width: 100%" y "filter: brightness(0) invert(1)" a los <img> de estos
   controles, asi que los SVG (que vienen a 48x48 con el trazo en #1a1a1a) se
   reescalan al boton y salen blancos solos. Se llego a duplicar esa regla aqui y
   se retiro: era redundante y ademas el "height: 100%" que traia deformaba el
   icono al no respetar su proporcion. */
/* Sin rotacion en la flecha prev: el proyecto tiene los dos SVG (swiper-prev.svg
   y swiper-next.svg) y el markup usa cada uno en su sitio, igual que gallery.xsl.
   Rotar uno de ellos seria reinventar un patron que ya existe. */
#otherRoomsSec .swiperNav .swiper-button-disabled {
	opacity: 0.4;
}

/* --- Flechas del carrusel de BLOQUE: a los lados, sobre el alto de la foto --- */
/* Mismo patron que la galeria de esta misma ficha (#gallerySec .gallery-slider
   .swiperNav): absoluta dentro del contenedor posicionado, con
   justify-content:space-between para que cada flecha se vaya a su extremo. Va FUERA
   del .swiper (es hermana, no hija) porque el overflow:hidden que recorta las
   tarjetas recortaria tambien las flechas.

   NO HAY DOTS en este nivel: peticion expresa, solo flechas.

   POR QUE ABSOLUTA Y NO EN FLUJO: asi el carrusel conserva el ancho COMPLETO del
   contenedor y las tarjetas miden exactamente lo que median con el grid. Reservar
   un canal para las flechas habria estrechado las tres tarjetas del caso actual
   -que es el 100% del contenido de hoy- para dejar sitio a unas flechas que en
   desktop, con 3 relacionadas, ni siquiera se muestran.

   EL top ES A MEDIA FOTO, no a media tarjeta: la tarjeta mide foto + texto + dos
   CTA (~800px), y el centro geometrico de todo eso cae sobre la descripcion. El
   ancla visual del bloque es la imagen, que es lo que hace la galeria de arriba. De
   ahi la variable --other-rooms-img-h, compartida con el alto del slide de fotos.

   LOS left/right NEGATIVOS SE APOYAN EN EL PADDING DE LA SECCION, y por eso hay un
   valor por tramo: 76px de padding y flecha de 48px en desktop dejan la flecha
   entera fuera de la tarjeta (-64px, con 16px de aire); en los tramos de 40px, 32px
   y 20px de padding no cabe entera, asi que el valor se iguala al padding
   disponible y la flecha monta unos pocos px sobre la primera/ultima tarjeta. Es lo
   mismo que hace #gallerySec en movil (margin: 0 -27px con 40px de padding). */
#otherRoomsSec .otherRoomsNav {
	position: absolute;
	top: calc(var(--other-rooms-img-h) / 2);
	right: -4rem;
	left: -4rem;
	z-index: 3;
	justify-content: space-between;
	/* margin-top:16px lo pone la regla compartida de arriba y aqui descentraria */
	margin: 0;
	transform: translateY(-50%);
	/* La caja de la nav cruza el bloque de lado a lado por encima de las tarjetas:
	   sin esto se comeria los clicks de los CTA que quedan debajo. Las flechas si
	   deben recibirlos, de ahi el auto en ellas. */
	pointer-events: none;
}
#otherRoomsSec .otherRoomsNav .swiper-button-prev,
#otherRoomsSec .otherRoomsNav .swiper-button-next {
	/* El diametro (2.5rem) lo pone la regla compartida de las dos navegaciones.
	   Aqui solo queda lo propio de la de bloque: recuperar los clicks, porque su
	   contenedor .otherRoomsNav los desactiva con pointer-events:none para no
	   comerse los CTA de las tarjetas que quedan debajo. */
	pointer-events: auto;
}

/* --- Textos y CTA --- */
#otherRoomsSec .otherRoomsCard .info {
	/* flex:1 para empujar el .btnBox al fondo de la tarjeta y que los CTA de las
	   tres queden EN LA MISMA LINEA aunque las descripciones midan distinto (las
	   tarjetas ya son de la misma altura: eran items de un grid con el stretch por
	   defecto y desde el 18-ago son slides del carrusel de bloque, con el mismo
	   stretch y un height:auto explicito -ver .otherRoomsCards arriba-). Mismo patron y mismo motivo que las otras tarjetas de habitacion
	   del proyecto -rooms-home.css y rooms-list.css, ".info .content { flex: 1 }",
	   maqueta del 31-jul-, y misma lectura que el diseno de este bloque, donde las
	   tres tarjetas comparten un footer de 234px con los botones alineados. Sin
	   esto, con el contenido real del CMS los CTA salian escalonados. */
	flex: 1;
	padding: 1.5rem 1rem 0 1rem;
}
#otherRoomsSec .otherRoomsCard .info .title {
	margin: 0 0 1.5rem 0;
	font-size: 1.625rem;
	line-height: 2rem;
	color: #F4C670;
	letter-spacing: -0.09375rem;
	text-transform: uppercase;
}
#otherRoomsSec .otherRoomsCard .info .description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;

	p {
		margin: 0 0 0.5rem 0;
		font-size: 1.125rem;
		line-height: 1.5rem;
		color: #ffffff;
	}
}
#otherRoomsSec .otherRoomsCard .info .description p:last-child {
	margin-bottom: 0;
}
#otherRoomsSec .otherRoomsCard .info .features {
	border-block: 1px solid rgba(255, 255, 255, 0.8);
	font-size: .9375rem;
	line-height: 1.6667;
	margin-block: 3rem 0;
	padding-block: 1rem;
	text-align: center;
	color: #ffffff;

	p {
		margin: 0;
	}
}
/* flex-wrap como red de seguridad: el rotulo del primer CTA se compone con el
   NOMBRE de la habitacion destino ("Ver Grand Suite Plaza"), asi que su ancho lo
   decide el contenido del CMS, no el diseno. Con nombres largos los dos botones
   no caben en la tarjeta y, sin wrap, se desbordan (medido a 900px: 391px de
   botones en una caja de 379). */
#otherRoomsSec .otherRoomsCard .btnBox {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	/* MISMO sangrado de 16px que el .info de arriba (padding: 24px 16px 0). En el
	   diseno (nodo 902:2862) los dos botones arrancan en x=16 igual que el nombre
	   de la habitacion y la descripcion: el .btnBox NO es un bloque a sangre. Sin
	   este padding los botones se pegaban al borde de la tarjeta y quedaban
	   desalineados 16px respecto al texto que tienen encima. Va aqui y no en un
	   padding de la tarjeta porque el carrusel SI es a sangre. */
	padding: 0 1rem;
	margin-top: 3rem;
}
/* Los botones de este bloque miden 58px de alto en el diseno (nodos 902:2863 y
   902:3172: 209x58 y 150x58), no los 63px que sale de la regla global de
   '.button' (padding: 24px). Ese 24px vertical del sistema cuadra en Figma con
   un texto recortado a la altura de mayusculas -10px-, pero en el navegador la
   caja de linea real mide 13px y suma los 2px de borde, asi que el boton se iba
   5px por encima de la maqueta y se veia mas grande de lo que toca dentro de la
   tarjeta. 20px 24px devuelve los 58px EXACTOS y es el mismo valor que ya usan
   los botones solidos validados del proyecto (newsletter del footer y submit del
   formulario de contacto), asi que el bloque no estrena un tamano propio: se
   alinea con el que ya hay. El padding horizontal sigue siendo el global de
   24px, que es el de la maqueta (161px de texto + 48 = 209). */
#otherRoomsSec .otherRoomsCard .btnBox .button {
	padding: 1.25rem 1.5rem;
}

/* --- 961-1365 --- */
@media only screen and (min-width: 961px) and (max-width: 1365px) {
	#otherRoomsSec {
		--other-rooms-img-h: 18.75rem;
		padding: 3.75rem 2.5rem;
	}
	/* El hueco entre tarjetas ya no es un gap: es el spaceBetween de este tramo en
	   other-rooms.js (24). Cambiar uno sin el otro descuadra el bloque. */
	#otherRoomsSec .otherRoomsNav {
		right: -2.5rem;
		left: -2.5rem;
	}
	#otherRoomsSec .titleBox {
		margin-bottom: 3rem;
	}
	#otherRoomsSec .otherRoomsCard .btnBox {
		flex-direction: column;
		margin-top: 2rem;
	}
}

/* --- 768-960: dos columnas --- */
@media only screen and (min-width: 768px) and (max-width: 960px) {
	#otherRoomsSec {
		--other-rooms-img-h: 17.5rem;
		padding: 3rem 2rem;
	}
	/* Las 2 columnas de este tramo ya no son del grid: son el slidesPerView de
	   other-rooms.js (2), con su spaceBetween de 24. */
	#otherRoomsSec .otherRoomsNav {
		right: -2rem;
		left: -2rem;
	}
	/* SIN override de tamano de flecha en este tramo, a proposito. Aqui habia un
	   escalon a 40px cuyo unico motivo era que la flecha de 48px "cabiera en el
	   hueco disponible: con 48px se comeria 8px mas de la primera y la ultima
	   tarjeta". Desde que la flecha base es 2.5rem (30px al 75%) ese motivo ya no
	   existe: el solape que queda en este tramo es el proporcional al del diseno,
	   y un override aqui lo unico que haria es descuadrarlo. */
	#otherRoomsSec .titleBox {
		margin-bottom: 2.5rem;
	}
	#otherRoomsSec .titleBox .title {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
	/* Botones apilados, igual que en 961-1365: con dos columnas la tarjeta baja a
	   ~380px y los dos CTA en fila no caben en cuanto el nombre de la habitacion
	   es largo. Apilados quedan alineados y con el mismo ancho. */
	#otherRoomsSec .otherRoomsCard .btnBox {
		flex-direction: column;
		margin-top: 2rem;
	}
}

/* --- max-767: una columna --- */
@media only screen and (max-width: 767px) {
	#otherRoomsSec {
		--other-rooms-img-h: 16.25rem;
		padding: 2.5rem 1.25rem;
	}
	/* Una tarjeta por vista (slidesPerView 1 en other-rooms.js) con 40 de
	   spaceBetween, el mismo hueco que tenia el grid de una columna. */
	#otherRoomsSec .otherRoomsNav {
		right: -1.25rem;
		left: -1.25rem;
	}
	/* SIN override de tamano de flecha en este tramo, a proposito. Aqui habia un
	   escalon a 40px cuyo unico motivo era que la flecha de 48px "cabiera en el
	   hueco disponible: con 48px se comeria 8px mas de la primera y la ultima
	   tarjeta". Desde que la flecha base es 2.5rem (30px al 75%) ese motivo ya no
	   existe: el solape que queda en este tramo es el proporcional al del diseno,
	   y un override aqui lo unico que haria es descuadrarlo. */
	#otherRoomsSec .titleBox {
		margin-bottom: 2rem;
	}
	#otherRoomsSec .titleBox .title {
		font-size: 1.625rem;
		line-height: 2rem;
	}
	#otherRoomsSec .otherRoomsCard .info .title {
		font-size: 1.375rem;
		line-height: 1.75rem;
	}
	#otherRoomsSec .otherRoomsCard .info .description p {
		font-size: 1rem;
	}
	#otherRoomsSec .otherRoomsCard .btnBox {
		margin-top: 2rem;
	}
}