@charset "utf-8";
/* Table of Contents
==================================================
	#Utilidades accesibilidad
	#Desktop (1600)
	#Desktop (1366)
	#Desktop (1024)
	#Tablet (Portrait)
	#Mobile (Portrait)
	#Mobile (Landscape)

/* #Utilidades accesibilidad
================================================== */
/* Texto solo para lectores de pantalla: se saca del flujo visual pero sigue
   siendo accesible. Se usa, por ejemplo, en los enlaces con target="_blank"
   para avisar de que abren una ventana nueva (WCAG 3.2.2). */
.sr-only {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	padding: 0;
	margin: -0.0625rem;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

:root												{ --container-width: 90.9375rem; }
.container											{ max-width: 90.9375rem; }

}



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

:root												{ --container-width: 90.9375rem; }
.container											{ max-width: 90.9375rem; }

/*----------------- Inner Pages -----------------*/


}



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

:root												{ --container-width: 81.25rem; }
.container											{ max-width: 81.25rem; }

#header 											{ padding: 1.25rem 2rem; }

#searchForm 										{ bottom: 2.375rem; }

#slider .caption-wrapper 							{ max-width: 46.25rem; padding: 2.5rem 3.125rem; }

#footer .footerTop .infoBox 						{ padding: 2.5rem 1.875rem; }
#footer .footerTop .discoverBox 					{ padding: 2.5rem 1.875rem; }
#footer .footerTop .menuBox 						{ padding: 2.5rem 1.875rem; }

/*----------------- Inner Pages -----------------*/


}



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

:root												{ --container-width: 60rem; }
.container											{ max-width: 60rem; }

#header												{ padding: 0.75rem 2rem 0.5rem; }
#header .menuNav									{ display: none; }
nav.hamburgerNav .menuLeft 							{ width: 60%; }
nav.hamburgerNav .menuRight 						{ width: 40%; }
nav.hamburgerNav .menuRight ul.menu > li 			{ margin: 0 0 1.5rem 0; font-size: 1.5rem; }
nav.hamburgerNav .menuRight ul.menu > li.current > a::before { top: -0.625rem; text-indent: -25px; }

#searchForm 										{ bottom: 2.375rem; }

/* Sin 'z-index: inherit' (se quita aqui): resolvia a 'auto' y anulaba el
   contexto de apilamiento de #slider, dejando escapar a .js-motion-pause
   (z-index:20, accessibility.css) a la raiz del documento, donde se
   superponia a la mascara movil, el menu hamburguesa y la barra de reservas
   (verificado en vivo, ago 2026). #slider ya tiene su propio z-index base
   (fenix-sevilla-hotel.css) que sigue aplicando sin esta regla. */
#slider, #slider .home-slider-video, #slider .home-slider { width: 100%; height: 100dvh; touch-action: inherit; }
#slider .caption-wrapper 							{ max-width: 37.5rem; padding: 2.5rem 2rem; }
#slider .caption-wrapper .home-slider-caption 		{ touch-action: inherit; }
#slider .caption-wrapper .home-slider-caption .title { margin: 0 0 1.875rem 0; font-size: 2.8125rem; line-height: 3.125rem; }
#slider .caption-wrapper .home-slider-caption p		{ font-size: 1.25rem; line-height: 1.5625rem; }
#slider .home-thumb-wrapper 						{ right: 2rem; }

#welcomeSec 										{ padding-top: 4.375rem; padding-bottom: 4.375rem; }
#welcomeSec .welcomeText .subtitle 					{ font-size: 1rem; line-height: 1.25rem; }
#welcomeSec .welcomeText .title 					{ margin: 0 0 3.125rem 0; font-size: 2.5rem; line-height: 2.8125rem; }
#welcomeSec .welcomeText p 							{ margin-bottom: 1.875rem; font-size: 1.125rem; line-height: 1.5rem; }
#welcomeSec .welcomeText .buttonBox 				{ gap: 2.5rem; margin-top: 3.125rem; }

#footer .footerNewsletter 							{ padding-top: 3.125rem; padding-bottom: 3.125rem; }
#footer .footerNewsletter .content .title			{ font-size: 1.875rem; line-height: 2.25rem; }
#footer .footerTop 									{ flex-wrap: wrap; }
#footer .footerTop .infoBox 						{ max-width: 50%; padding: 3.125rem 2rem; border-bottom: 1px solid #CFCFD2; }
#footer .footerTop .infoBox .info .item 			{ width: 100%; }
#footer .footerTop .discoverBox 					{ max-width: 50%; padding: 3.125rem 2rem; border-right: none; border-bottom: 1px solid #CFCFD2; }
#footer .footerTop .discoverBox .title 				{ font-size: 1.4375rem; line-height: 1.5625rem; }
#footer .footerTop .menuBox 						{ max-width: 50%; padding: 3.125rem 2rem; }
#footer .footerMiddle								{ padding: 1.25rem 1.25rem; }
#footer .footerBottom 								{ gap: 0.9375rem; padding: 1.25rem 1.25rem; }

/*----------------- Inner Pages -----------------*/


}



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

:root												{ --container-width: 100%; }
.container											{ max-width: 100%; padding: 0 1.25rem; }

/* Regla de .swiperNav movida a swiper-bundle-controls.css (es compartida
   por todos los sliders del proyecto, no propia de este archivo). */

#header 											{ padding: 0.75rem 1.25rem 0.5rem; }
#header .logo 										{ animation: none; }
#header.navOpen .logo 								{ animation: none; }
#header .menuNav 									{ display: none; }
nav.hamburgerNav .menuLeft 							{ display: none; }
nav.hamburgerNav .menuRight 						{ width: 100%; }
nav.hamburgerNav .menuRight ul.menu > li 			{ margin: 0 0 1.5rem 0; font-size: 1.5rem; }
nav.hamburgerNav .menuRight ul.menu > li.current > a::before { top: -0.625rem; text-indent: -25px; }

#searchForm 										{ width: calc(100% - 2.5rem); }
#searchForm .fieldBox 								{ gap: 1.5625rem; }
#searchForm .field 									{ padding: 0.5rem; padding-bottom: 0.25rem; }
#searchForm .field:after 							{ left: -0.75rem; }
/* 188: el maximo que cabe en este tramo SIN desbordar la tarjeta.
   A 768 la .fieldBox mide 697 y los tres huecos de 25px dejan 622 para los cuatro
   campos; huespedes (155) + promo (148) + boton (131) ya se comen 434, asi que las
   fechas no pueden pasar de 188. Con los 232 que necesita la fecha COMPLETA
   ("DD/MM/AAAA → DD/MM/AAAA" mide 210 + 16 de padding) los campos sumaban 741 y
   sobresalian 22px del recuadro blanco.
   Consecuencia asumida: entre 768 y 960 la fecha de salida se recorta, igual que en
   la maqueta original. Para verla entera en este tramo habria que tomar una decision
   de diseno: bajar el hueco de 25px a 12, o mostrar el ano con dos digitos. */
/* FASE 15 WCAG (1.4.4): mismos valores en rem (188 = 11.75, 155 = 9.6875,
   148 = 9.25 con la fuente por defecto), por lo mismo que en el tramo ancho:
   el suelo del campo tiene que escalar con el texto o el contenido se recorta. */
#searchForm .field.dateinout 						{ min-width: 11.75rem; }
#searchForm .field.adultschildren					{ min-width: 9.6875rem; }
#searchForm .field.procode 							{ min-width: 9.25rem; }

/* Sin 'z-index: inherit' (se quita aqui): resolvia a 'auto' y anulaba el
   contexto de apilamiento de #slider, dejando escapar a .js-motion-pause
   (z-index:20, accessibility.css) a la raiz del documento, donde se
   superponia a la mascara movil, el menu hamburguesa y la barra de reservas
   (verificado en vivo, ago 2026). #slider ya tiene su propio z-index base
   (fenix-sevilla-hotel.css) que sigue aplicando sin esta regla. */
#slider, #slider .home-slider-video, #slider .home-slider { width: 100%; height: 100dvh; touch-action: inherit; }
#slider .caption-wrapper 							{ max-width: 32.5rem; padding: 1.875rem 1.25rem; }
#slider .caption-wrapper .home-slider-caption 		{ touch-action: inherit; }
#slider .caption-wrapper .home-slider-caption .title { margin: 0 0 1.875rem 0; font-size: 2.5rem; line-height: 2.8125rem; text-box-trim: none; text-box-edge: auto; }
#slider .caption-wrapper .home-slider-caption p		{ font-size: 1rem; line-height: 1.375rem; }
#slider .home-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; }
/* En horizontal el hueco de las flechas es LATERAL (padding: 0 55px), no
   vertical, asi que al ocultarlas no se recupera alto: el wrapper mantiene
   sus 90px. Esta regla existe solo para NEUTRALIZAR la de escritorio
   (fenix-sevilla-hotel.css), que reserva el hueco en vertical y se cuela
   aqui: su :has() tiene especificidad (1,3,0) contra (1,1,0) de la regla
   plana de arriba, y las media queries no aportan especificidad. Misma
   especificidad y posterior en cascada = gana sin !important. */
#slider .home-thumb-wrapper:has(.swiperNav .swiper-button-lock) { height: 5.625rem; padding: 0 calc(2.5rem + 8px); }
#slider .home-thumb-wrapper .swiperNav 				{ display: flex; flex-direction: row; }
#slider .home-thumb-wrapper .swiperNav [class*=swiper-button-] span { transform: rotate(-90deg); }

#welcomeSec 										{ padding-top: 4.375rem; padding-bottom: 4.375rem; }
#welcomeSec .welcomeText .subtitle 					{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#welcomeSec .welcomeText .title 					{ margin: 0 0 1.875rem 0; font-size: 2rem; line-height: 2.3125rem; }
#welcomeSec .welcomeText p 							{ margin-bottom: 1.5625rem; font-size: 1rem; line-height: 1.375rem; }
#welcomeSec .welcomeText .buttonBox 				{ gap: 1.875rem; margin-top: 1.875rem; }

#footer .footerNewsletter 							{ padding-top: 3.125rem; padding-bottom: 3.125rem; }
#footer .footerNewsletter .content .title			{ font-size: 1.875rem; line-height:2.25rem; }
#footer .footerTop 									{ flex-wrap: wrap; }
#footer .footerTop .infoBox 						{ max-width: 50%; padding: 1.875rem 1.25rem; border-bottom: 1px solid #CFCFD2; }
#footer .footerTop .infoBox .info .item 			{ width: 100%; }
#footer .footerTop .discoverBox 					{ max-width: 50%; padding: 1.875rem 1.25rem; border-right: none; border-bottom: 1px solid #CFCFD2; }
#footer .footerTop .discoverBox .title 				{ font-size: 1.4375rem; line-height: 1.5625rem; }
#footer .footerTop .menuBox 						{ max-width: 50%; padding: 1.875rem 1.25rem; }
#footer .footerMiddle								{ padding: 1.25rem 1.25rem; }
#footer .footerBottom 								{ gap: 0.9375rem; padding: 1.25rem 1.25rem; }

/*----------------- Inner Pages -----------------*/


}



/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {

:root												{ --container-width: 100%; }
.container											{ max-width: 100%; padding: 0 1.25rem; }

/* Regla de .swiperNav movida a swiper-bundle-controls.css (es compartida
   por todos los sliders del proyecto, no propia de este archivo). */

#header 											{ padding: 0.625rem 1.25rem; }
#header .topbar										{ display: none; }
/* El gap de 1.5rem esta pensado para el selector de idioma + hamburguesa. En
   telefono entra ademas el icono de WhatsApp (.wpBtnMobile) y el header es
   estrecho: se aprieta la separacion para que los tres quepan sin comerse el logo. */
#header .rightNav 									{ gap: 0.75rem; }
#header .logo 										{ width: 11.25rem; }
#header.navOpen .logo 								{ display: none; }
#header .menuNav 									{ display: none; }
#header .languageMenu 								{ display: none; animation: fadeOut 0.5s both; animation-delay: 0.5s; }
#header .languageMenu ul 							{ padding: 0.625rem 0.625rem; }
#header.navOpen .languageMenu 						{ display: block; animation: fadeIn 0.5s both; animation-delay: 0s; }
nav.hamburgerNav .menuLeft 							{ display: none; }
nav.hamburgerNav .menuRight 						{ width: 100%; padding: 4.25rem 1.25rem 5.25rem; }
nav.hamburgerNav .menuRight ul.menu > li 			{ margin: 0 0 1.5rem 0; font-size: 1.5rem; }
nav.hamburgerNav .menuRight ul.menu > li.current > a::before { top: -0.625rem; text-indent: -25px; }

/* Sin 'z-index: inherit' (se quita aqui): resolvia a 'auto' y anulaba el
   contexto de apilamiento de #slider, dejando escapar a .js-motion-pause
   (z-index:20, accessibility.css) a la raiz del documento, donde se
   superponia a la mascara movil, el menu hamburguesa y la barra de reservas
   (verificado en vivo, ago 2026). #slider ya tiene su propio z-index base
   (fenix-sevilla-hotel.css) que sigue aplicando sin esta regla. */
#slider, #slider .home-slider-video, #slider .home-slider { width: 100%; height: 100dvh; touch-action: inherit; }
#slider .caption-wrapper 							{ width: fit-content; max-width: 23.125rem; margin-left: 0; padding: 1.25rem 1.25rem; right: 1.25rem; }
#slider .caption-wrapper .home-slider-caption 		{ touch-action: inherit; }
#slider .caption-wrapper .home-slider-caption .title { margin: 0; font-size: 1.875rem; line-height: 2.1875rem; text-box-trim: none; text-box-edge: auto; }
#slider .caption-wrapper .home-slider-caption p		{ display: none; }
#slider .home-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
   fenix-sevilla-hotel.css, que recupera el hueco VERTICAL de las flechas. En
   horizontal ese hueco es lateral, asi que el alto se queda en 90px. */
#slider .home-thumb-wrapper:has(.swiperNav .swiper-button-lock) { height: 5.625rem; padding: 0 calc(2.5rem + 8px); }
#slider .home-thumb-wrapper .swiperNav 				{ display: flex; flex-direction: row; }
#slider .home-thumb-wrapper .swiperNav [class*=swiper-button-] span { transform: rotate(-90deg); }

#searchForm 										{ display: none; padding: 3.5rem 1.5rem; background-color: #ffffff; border-radius: 0px; box-shadow: none; position: fixed; inset: 0; z-index: 6; overflow-y: auto; }
#searchForm .fieldBox 								{ flex-direction: column; gap: 1.875rem; max-width: 23.125rem; height: 100%; }
#searchForm .searchFormClose 						{ display: flex; }
#searchForm .field 									{ min-width: 100% !important; }
#searchForm .field:after							{ top: -0.9375rem; transform: translateY(0%); left: 0; width: 100%; height: 0.0625rem; }
#searchForm .field.bookBtn 							{ flex: none; }

#welcomeSec 										{ padding-top: 3.125rem; padding-bottom: 3.125rem; }
#welcomeSec .welcomeText .subtitle 					{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#welcomeSec .welcomeText .title 					{ margin: 0 0 1.875rem 0; font-size: 2rem; line-height: 2.3125rem; }
#welcomeSec .welcomeText p 							{ margin-bottom: 1.5625rem; font-size: 1rem; line-height: 1.375rem; }
#welcomeSec .welcomeText .buttonBox 				{ gap: 1.875rem; margin-top: 1.875rem; }

#footer 											{ padding-bottom: 3.5rem; }
#footer .footerNewsletter .newsletter 				{ flex-direction: column; }
#footer .footerNewsletter .newsform .form-group 	{ flex-direction: column; }
/* flex:0 0 auto devuelve el control del alto al height de aqui al lado. En el
   tramo ancho el campo lleva flex:1 1 0 para compartir fila con el boton
   (fenix-sevilla-hotel.css), pero aqui el grupo es COLUMNA: la base pasa a ser
   el alto y un 0 colapsaria el campo. */
#footer .footerNewsletter .newsform .form-group .form-control { flex: 0 0 auto; height: 3.25rem; }
#footer .footerNewsletter .content .title			{ font-size: 1.875rem; line-height: 2.5rem; }
#footer .footerTop 									{ flex-wrap: wrap; }
#footer .footerTop .infoBox 						{ max-width: 100%; padding: 1.875rem 1.25rem; border-right: none; border-bottom: 1px solid #CFCFD2; }
#footer .footerTop .infoBox .info .item 			{ padding: 0px 0px; border-top: 0; }
#footer .footerTop .discoverBox 					{ max-width: 100%; padding: 1.875rem 1.25rem; border-right: none; border-bottom: 1px solid #CFCFD2; }
#footer .footerTop .menuBox 						{ max-width: 100%; padding: 1.875rem 1.25rem; border-right: none; border-bottom: 1px solid #CFCFD2; }
#footer .footerTop .menuBox:last-child 				{ border-bottom: none; }
#footer .footerMiddle 								{ padding: 1.875rem 1.25rem; }
#footer .footerBottom 								{ flex-direction: column; gap: 0.625rem; padding: 1.875rem 1.25rem; }
#footer .footerBottom .rightText 					{ align-items: flex-start; text-align: left; }
#footer .bookBtnBox 								{ display: flex; }
#footer .bookBtnBox .button 						{ border-radius: 0.25rem; padding: 1rem 1.5625rem; width: 50%; }

/*----------------- Inner Page -----------------*/


}



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

:root												{ --container-width: 100%; }
.container											{ /*width: 540px;*/ max-width: 100%; padding: 0 0.9375rem; }

#slider .home-thumb-wrapper 						{ bottom: 1.25rem; }

/*----------------- Inner Pages -----------------*/


}