@charset "utf-8";

@font-face {
  font-family: "Queulat";
  src: local("Queulat"), local("Queulat"),
    url("../../fonts/Queulat-Light.otf") format("opentype");
  font-weight: lighter;
  font-style: normal;
  font-display: swap;
}

/* El woff2 va primero y el ttf queda solo como respaldo para navegadores sin soporte woff2
   (en la practica, ninguno actual lo pide). El .ttf pesa 688.600 B y nginx no comprime fuentes,
   asi que se transferia entero: el woff2 son 30.928 B ya comprimidos, un 95% menos, y es el
   recurso mas pesado de la carga despues del fondo de marmol.
   Ambos archivos son la MISMA fuente variable: verificado midiendo el ancho de un texto con
   acentos en los pesos 100/300/400/500/600/700, con diferencias por debajo de 0,3 px sobre
   1.400 px de ancho. Los cinco pesos que usa el proyecto (100, 300, 400, 500 y 600) siguen
   respondiendo. */
@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/montserrat.woff2") format("woff2"),
       url("../../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --space-between-sections: 100px;

  /* Alto real de la cabecera. La clase .stiky va escrita en el HTML
     (header.xsl) y el JS que la ponía al hacer scroll está desactivado, así que
     #header es position: fixed y opaco en TODAS las resoluciones: lo que se
     coloque debajo tiene que reservar este hueco o la cabecera lo tapa.
     El valor lo marcan el logo y sus márgenes, que cambian por breakpoint en
     skeleton.css. Se sobrescribe más abajo en cada tramo. */
  --sticky-header-height: 78px;

  --font-family-1: "Montserrat";
  --font-family-2: "Queulat";

  --font-size-title: 40px;
  --font-size-subtitle: 35px;
  --font-size-text: 16px;

  --desktop-line-height-title: 55px;
  --mobile-line-height-title: 42px;

  --primary-color: #141D28;
  --primary-color-rgb: 26 26 26;

  --secondary-color: #444B53;
  --secondary-color-rgb: 241 241 241;

  --tertiary-color: #E8E9EA;
  --tertiary-color-rgb: 241 241 241;

  --nav-color-rgb: 255 255 255;
  --button-color: #9AB87C;
  --button-color-rgb: 154 184 124;

  --title-color: #141D28;
  --subtitle-color: #444B53;
  --text-color: #444B53;

  --line-height: 30px;

  --icon-filter-primary: brightness(0) saturate(100%) invert(79%) sepia(6%) saturate(1823%) hue-rotate(47deg) brightness(87%) contrast(92%);
  --icon-filter-primary-marker: hue-rotate(260deg) saturate(36%) brightness(1.18) contrast(0.88);
  --icon-filter-white: invert(100%) sepia(0%) saturate(7486%) hue-rotate(223deg)
    brightness(105%) contrast(98%);
}@media (max-width: 992px) {
  :root {
    --space-between-sections: 50px;
    --font-size-title: 28px;
  }}/* Alto de la cabecera fija por tramo (ver --sticky-header-height). Los cortes
   son los de skeleton.css, donde cambian el tamaño del logo y sus márgenes:
   hasta 1450px el logo lleva márgenes de 20px, de 768 a 959px de 15px y por
   debajo de 768px se suma además el padding del .leftNav. */
@media (max-width: 1450px) {
  :root {
    --sticky-header-height: 110px;
  }}@media (max-width: 959px) {
  :root {
    --sticky-header-height: 100px;
  }}@media (max-width: 767px) {
  :root {
    --sticky-header-height: 116px;
  }}

::selection {
  background-color: var(--primary-color);
  color: #fff;
}

body {
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  font-family: var(--font-family-2);
  font-size: 16px;
  color: var(--text-color);
  font-weight: 300;
  line-height: normal;
  overflow-x: hidden;
}
body.no-scroll-1 {
  overflow: hidden;
  height: 100vh;
}

body.no-scroll-2 {
  overflow: hidden;
  height: 100vh;
}

a {
  color: var(--primary-color);
  text-decoration: underline;
}

a:hover {
  color: var(--primary-color);
  text-decoration: none;
}

body h1,
body .h1 {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-1);
  text-transform: uppercase;
  font-size: var(--font-size-title);
  color: var(--title-color);
  font-weight: 300;
  line-height: var(--desktop-line-height-title);
  letter-spacing: 0.7px;
  text-wrap: balance;
}

h2,
h3 {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-1);
  font-size: var(--font-size-subtitle);
  color: var(--subtitle-color);
  font-weight: 300;
  line-height: 40px;
  letter-spacing: 0;
}

.underscore:after {
  content: "";
  display: block;
  width: 130px;
  margin: 30px auto;
  border-top: 1px solid var(--title-color);
}@media (max-width: 767px) {
  h1,
  .h1 {
    font-size: var(--font-size-title) !important;
    line-height: var(--mobile-line-height-title) !important;
  }

  h1 br,
  .h1 br,
  h2 br,
  h3 br {
    display: none;
  }

  h2,
  h3 {
    font-size: 25px;
    line-height: 30px;
  }

  .underscore:after {
    width: 100px;
    margin: 30px auto;
  }}

.background-lazy {
  background-image: none !important;
  background-color: #f1f1fa !important;
}

.button {
  width: auto;
  outline: 0;
  font-size: 12px;
  line-height: 2em;
  letter-spacing: 0.2em;
  font-weight: 500;
  text-transform: uppercase;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  box-sizing: border-box;
  text-decoration: none;
  margin: 0;
  display: inline-block;
  padding: 13px 30px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s;
}

.button:hover {
  color: #fff !important;
  background-color: var(--button-color);
  border-color: var(--button-color);
  transition: all 0.4s ease;
}
.button.button-white {
  color: white;
  border: 1px solid white;
}
.button.button-white:hover {
  border: 1px solid var(--button-color) !important;
  background-color: var(--button-color);
}
.button.button-book {
  background-color: var(--button-color);
  color: #ffffff;
  border-color: var(--button-color);
}
.button.button-book:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.disabled {
  display: none !important;
}
.hidden {
  height: 0px !important;
}
/* La guarda has-js es progressive enhancement. NO vale usar la clase "js" que ya traen los
   layouts: esa la emite el servidor en el <html> y llega igual con JavaScript desactivado.
   has-js la anade un script inline al principio de head.xsl, asi que solo existe si el
   navegador ejecuta JS. Sin la guarda, un fallo de JavaScript dejaba invisible media home de
   forma permanente, porque quien devuelve la visibilidad a los .wow es WOW.js. */
html.has-js .wow {
  visibility: hidden;
}
/* Revelado para bloques por encima del pliegue.
   Sustituye a wow/fadeIn en el contenido above-the-fold: WOW.js mantiene los .wow en
   visibility:hidden y no los revela hasta window.load, asi que un bloque con .wow no puede
   ser el elemento LCP sin arrastrar consigo todo el tiempo de carga de la pagina.
   Aqui no hay visibility:hidden: la animacion parte de opacity 0 con fill-mode both y
   arranca sola, sin JS, asi que el contenido es visible tambien para Googlebot y si el
   JavaScript falla. Duracion corta y sin delay a proposito: cada milisegundo con opacity 0
   es un milisegundo que Chrome no cuenta como pintado. */
.reveal-fade {
  animation: revealFade 0.6s ease-out both;
}
@keyframes revealFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}@media (prefers-reduced-motion: reduce) {
  .reveal-fade { animation: none; }}
.padding-bottom {
  padding-bottom: var(--space-between-sections) !important;
}@media (max-width: 767px) {
  .padding-bottom {
    padding-bottom: var(--space-between-sections) !important;
  }}
img {
  max-width: 100%;
  height: auto;
}
button img {
  vertical-align: unset;
  margin-bottom: 2px;
}
.main-list button img {
  margin-bottom: 0px;
}
#wrap {
  float: left;
  width: 100%;
}
:root {
  --container-width: 1640px;
  --container-padding: calc((100vw - var(--container-width)) / 2);
  /* Ancho fijo de la máscara de reservas en desktop. Es la referencia de alineación
     de los controles del hero (play/pausa del vídeo y flechas/puntos del carrusel),
     así que se define aquí una sola vez. */
  --booking-mask-width: 1150px;
  /* Distancia del borde de la máscara al borde de la pantalla. Se resuelve
     contra la caja del elemento donde se use, que debe abarcar el ancho visible
     (el carrusel del hero: .home-slider o .banner). NO usar unidades de viewport
     aquí: 100vw incluye la barra de scroll y descuadraría con la máscara. */
  --booking-mask-offset: calc(50% - var(--booking-mask-width) / 2);
  /* Corrección fina de las flechas y los puntos del hero: los desplaza a la
     izquierda respecto al borde derecho de la máscara. Ajustar solo este valor
     (0 para dejarlos exactamente en el borde). */
  --booking-mask-nudge: 6px;
}

#header {
  float: left;
  width: 100%;
  background-color: transparent;
  position: absolute;
  z-index: 20;
  transition: all 0.3s ease-in-out;
  /* El markup de la cabecera pesa ~50KB (el menú hamburguesa lleva la navegación
     completa de los diez hoteles) y el logo va después, así que en una visita con
     el CSS ya cacheado el navegador puede pintar la cabecera a medias mientras
     termina de recibir el HTML. Reservando el alto definitivo —el mismo que ya
     descuentan el hero y el resto de bloques— nace con su altura final en vez de
     crecer al acabar el parseo. */
  min-height: var(--sticky-header-height);
}
#header .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#header .container:before,
#header .container:after {
  display: none;
}
#header .logo {
  flex: 1;
  margin-block: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#header .logo a {
  transition: all 0.5s;
  display: inline-block;
  width: 70px;
}
#header.stiky .logo a {
  width: 70px;
}
#header .logo img {
  width: 100%;
  height: auto;
  /* Los dos imagotipos son cuadrados (1181x1181 y 591x591). Sin esta proporción
     el <img> mide 0 de alto hasta que la imagen termina de descargar y la
     cabecera —que es fixed— pasa de 58px a 110px de golpe: es el salto que se
     ve como "parpadeo" al cargar. Va en aspect-ratio y no en atributos
     width/height del HTML porque el ancho de .logo a cambia por breakpoint
     (70px / 90px / 98px en skeleton.css) y así la reserva se adapta sola. */
  aspect-ratio: 1;
}@media (max-width: 767px) {
  #header.stiky .logo a {
    width: 70%;
  }}

#header .leftNav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
}
#header .rightNav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}
#header .languageMenu {
  padding: 0 20px;
}
#header .languageMenu .form-control {
  width: 40px;
  height: auto;
  padding: 0 12px 0 0;
  border: none;
  background-image: url(../../images/select_menu_white_icon.png);
  background-position: right center;
  font-size: 16px;
  color: #ffffff;
  font-weight: 300;
  line-height: 16px;
  text-transform: uppercase;
}
#header .languageMenu .form-control option {
  color: var(--secondary-color);
}
#header .reservarBtn {
  /* Dos accesos apilados (reserva de hotel y de mesa) siempre visibles.
     Se reduce su tamaño respecto al botón único anterior para que quepan ambos
     sin robar espacio a los ítems del menú. */
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
}

#header .reservarBtn a {
  display: block;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 15px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--button-color);
  color: #ffffff;
  border-color: var(--button-color);
  text-decoration: none;
}

#header .reservarBtn a:hover {
  text-decoration: none;
}

#header .reservarBtn button:hover {
  transform: scale(1.05);
}

#header ul.mainMenu {
  display: flex;
  justify-content: center;
  padding: 20px 0 0 0;
  list-style-type: none;
  align-items: center;
}
#header ul.mainMenu > li {
  float: left;
  width: auto;
  padding: 0 10px;
  flex-shrink: 0;
}

#header ul.mainMenu li:first-child {
  padding-left: 0;
}
#header ul.mainMenu li:last-child {
  padding-right: 0;
}
#header ul.mainMenu li a {
  display: block;
  font-size: 15px;
  color: #ffffff;
  line-height: 18px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
/* Solo los enlaces de primer nivel no deben partirse en varias líneas;
   los enlaces anidados (desplegables de hoteles/restaurantes) sí deben poder envolver texto largo */
#header ul.mainMenu > li > a {
  white-space: nowrap;
}
#header ul.mainMenu > li > a:hover,
#header ul.mainMenu > li.current > a {
  color: #ffffff;
  text-decoration: none;
}

#header .hamburger {
  position: relative;
  float: left;
  min-width: 30px;
}
#header .hamburger #nav-btn,
#header .hamburger #nav-btn + label {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  z-index: 99;
  cursor: pointer;
  display: flex;
  align-items: center;
}
#header .hamburger #nav-btn {
  position: relative;
  opacity: 0;
  z-index: 100;
}
#header .hamburger #nav-btn + label span {
  display: block;
  width: 30px;
  height: 2px;
  background-color: #ffffff;
  position: relative;
  cursor: pointer;
  z-index: 99;
  transition: all 0.3s ease-in-out;
}
#header .hamburger #nav-btn + label span::before,
#header .hamburger #nav-btn + label span::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  background-color: #ffffff;
  position: absolute;
  left: 0;
  transition: all 0.3s ease-in-out;
}
/* El input va con opacity 0 por encima del label, así que su foco no se ve por
   sí solo: lo dibujamos sobre el label, que es el que pinta el icono. Los tres
   colores siguen los mismos estados que las barras. */
#header .hamburger #nav-btn:focus-visible + label {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}
#header.stiky .hamburger #nav-btn:focus-visible + label {
  outline-color: var(--text-color);
}
#header .hamburger #nav-btn:checked:focus-visible + label {
  outline-color: var(--primary-color);
}
#header .hamburger #nav-btn + label span::before {
  top: -9px;
}
#header .hamburger #nav-btn + label span::after {
  bottom: -9px;
}@media (min-width: 992px) {
  #header .hamburger #nav-btn:checked,
  #header .hamburger #nav-btn:checked+label {
    top: 22px;
    left: 25%;
  }

  #header .container:has(#nav-btn:checked),
  #header .hamburger:has(#nav-btn:checked) {
    position: unset;
  }

  #header .hamburger #nav-btn:checked {
    position: absolute;
  }}

#header .hamburger #nav-btn:checked + label span {
  background-color: var(--primary-color);
  transform: rotate(135deg);
}
#header .hamburger #nav-btn:checked:hover + label span {
  transform: rotate(225deg);
}
#header .hamburger #nav-btn:checked + label span::before,
#header .hamburger #nav-btn:checked + label span::after {
  width: 30px;
  max-width: 100%;
  background-color: var(--primary-color);
  top: 0;
  transform: rotate(90deg);
}
#header .hamburger #nav-btn:checked + label span::after {
  opacity: 0;
}
#header .hamburger #nav-btn:checked ~ nav {
  visibility: visible;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  overflow: hidden;
}
#header .hamburger nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  padding-top: 100px;
  background: #ffffff;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  opacity: 1;
  z-index: 98;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
  transition: transform 0.5s, visibility 0s 0.5s;
  overflow: hidden;
}
#header .hamburger nav .menu_items::-webkit-scrollbar {
  width: 7px;
}
#header .hamburger nav .menu_items::-webkit-scrollbar-track {
  background: transparent;
}
#header .hamburger nav .menu_items::-webkit-scrollbar-thumb {
  background-color: var(--primary-color); /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 3px solid transparent;
}
#header .hamburger nav .menu_items {
  height: 100%;
  padding: 30px 30px;
  overflow: overlay;
}
#header .hamburger nav .menu_items ul.menu {
  float: left;
  width: 100%;
  padding: 0;
  /* Los botones de reserva van justo debajo en todas las páginas, no solo en las
     de restaurante, así que el hueco inferior se ajusta a esa separación */
  margin: 0 0 15px 0;
  list-style-type: none;
}

#header .hamburger nav .menu_items ul.menu li a {
  display: block;
  padding-block: 8px;
  /* Igualado al menú principal (#header ul.mainMenu li a) */
  font-size: 15px;
  color: var(--primary-color);
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
#header .hamburger nav .menu_items ul.menu > li > a:hover,
#header .hamburger nav .menu_items ul.menu > li.current > a {
  color: var(--primary-color);
  text-decoration: none;
}
#header .hamburger nav .menu_items ul.language-menu {
  float: left;
  width: 100%;
  padding: 0 20px;
  margin: 0 0 30px 0;
  list-style-type: none;
}
#header .hamburger nav .menu_items ul.language-menu li {
  float: left;
  width: auto;
  padding: 0 10px;
  /* Igualado al menú principal (#header ul.mainMenu li a) */
  font-size: 18px;
  color: #dfd5c9;
  font-weight: 400;
  line-height: 20px;
}
#header .hamburger nav .menu_items ul.language-menu li:first-child {
  padding-left: 0;
}
#header .hamburger nav .menu_items ul.language-menu li:last-child {
  padding-right: 0;
}
#header .hamburger nav .menu_items ul.language-menu li img {
  filter: brightness(0);
  vertical-align: top;
  height: 20px;
}
#header .hamburger nav .menu_items ul.language-menu li a {
  display: block;
  color: #dfd5c9;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
#header .hamburger nav .menu_items ul.language-menu > li > a:hover,
#header .hamburger nav .menu_items ul.language-menu > li.current > a {
  color: var(--primary-color);
  text-decoration: none;
}

/*-------------- SLIDER DE INTRODUCCIÓN --------------*/
#slider {
  margin-bottom: var(--space-between-sections);
  position: relative;
  float: left;
  width: 100%;
  overflow: hidden;
  /* Descuenta el hueco que reserva el margin-top para la cabecera fija, de modo
     que hueco + slider sigan midiendo el 100vh de antes. */
  min-height: calc(100vh - var(--sticky-header-height));
}
#slider > .container {
  position: absolute;
  height: 100%;
  right: 0;
  left: 0;
}
#slider .desktop {
  display: block;
}
#slider .tablet {
  display: none;
}
#slider .mobile {
  display: none;
}
#slider,
#slider .home-slider,
#slider .owl-stage-outer,
#slider .owl-stage,
#slider .owl-item {
  /* 100% y no 100vw: 100vw incluye la barra de scroll, así que con 100vw el
     carrusel queda desplazado respecto al contenido de la página y con él todo
     lo que se posiciona dentro (flechas, puntos y botón de play/pausa). */
  width: 100%;
  height: calc(100vh - var(--sticky-header-height));
}
#slider .item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#slider .item:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  opacity: 0.25;
  position: absolute;
  top: 0;
  left: 0;
}

#slider .home-slider.owl-theme .owl-dots,
.owl-theme-banner .owl-dots {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  /* Sin relleno a la derecha: el último punto tiene que quedar a ras del borde
     derecho de la máscara de reservas. */
  padding: 0 0 0 5px;
  z-index: 2;
}
#slider .home-slider.owl-theme .owl-dots span,
.owl-theme-banner .owl-dots .owl-dot span,
.owl-theme-banner .owl-dots .owl-dot:hover span {
  background-color: rgba(255, 255, 255, 0.7);
}
#slider .home-slider.owl-theme .owl-dots button.active span,
.owl-theme-banner .owl-dots .owl-dot.active span,
.owl-theme-banner .owl-dots .owl-dot.active:hover span {
  background-color: rgba(255, 255, 255, 1);
}

#Caption {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
}
#Caption span.subtitle {
  display: block;
  margin: 0;
  font-size: 45px;
  color: #ffffff;
  font-weight: 300;
  line-height: 55px;
  text-transform: none;
  letter-spacing: 2px;
}
#Caption span.title {
  display: inline-block;
  margin: 0;
  padding-bottom: 3px;
  border-bottom: 2px solid;
  font-size: 80px;
  color: #ffffff;
  font-weight: 300;
  line-height: 90px;
  text-transform: none;
  letter-spacing: 3px;
}@media (min-width: 992px) {
  #Caption span.subtitle {
    font-family: var(--font-family-1);
  }
  #Caption span.title {
    font-family: var(--font-family-1);
  }}
#searchForm {
  position: absolute;
  width: 100%;
  bottom: 100px;
  z-index: 2;
}
#searchForm .field {
  float: left;
  width: calc(20% - 1px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1px;
  padding: 18px 15px;
  background-color: rgb(170 175 167 / 70%);
  font-size: 22px;
  height: 70px;
}
#searchForm .field label {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
  color: rgb(255 255 255 / 80%);
  font-weight: 300;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: center;
}
#searchForm .field .form-control {
  height: 30px;
  padding: 0;
  border: none;
  background-color: transparent;
  font-size: var(--font-size-title);
  color: #ffffff;
  text-align: center;
}
#searchForm .field .form-control::placeholder {
  color: #ffffff;
}

#searchForm .neobookings-submit-btn {
  width: 100%;
  padding: 27px 15px;
  border: none;
  background-color: var(--button-color);
  font-size: 39px;
  color: #ffffff;
  font-weight: 400;
  height: 70px;
  text-transform: uppercase;
}
#searchForm .neobookings-submit-btn:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}
#searchFormBtn {
  display: none;
  position: absolute;
  bottom: 100px;
  right: 15px;
  left: 15px;
  z-index: 2;
}
#searchFormBtn button {
  width: 100%;
  padding: 15px 20px;
  border: 1px solid #ffffff;
  color: #ffffff;
}
#searchFormBtn button:hover {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: #ffffff;
}
.searchFormOpen.sticky {
  display: none;
}
/* Mismo umbral que #searchForm y #searchFormBtn (ver skeleton.css): el botón fijo al pie
   acompaña siempre al modo en que la máscara del hero ya no se muestra. */
@media (max-width: 1180px) {
  .searchFormOpen.sticky {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--button-color);
    border: 0px;
    z-index: 100;
    color: #fff;
    -webkit-box-shadow: -1px -4px 26px -2px rgba(0, 0, 0, 0.58);
    box-shadow: -1px -4px 26px -2px rgba(0, 0, 0, 0.58);
  }}
#scrollerBottom {
  position: absolute;
  width: 20px;
  margin: 0 auto;
  bottom: 25px;
  right: 0;
  left: 0;
  z-index: 2;
  text-align: center;
}

/* Por debajo del punto de corte de la máscara, el hero de la home muestra el botón
   "Reservar" al pie y la línea decorativa de scroll queda a 5px de él, pegada. Se
   retira con el mismo criterio con el que ya se retira en el hero de las páginas
   interiores (ver other_pages/neobookings.css): bajo el botón solo mete ruido. */
@media (max-width: 1180px) {
  #slider #scrollerBottom {
    display: none;
  }
}

/*-------------- Sticky Header Start --------------*/
#header.stiky {
  background-color: rgba(var(--nav-color-rgb));
  position: fixed;
  top: 0;
}
#header.stiky ul.mainMenu {
  padding: 10px 0;
  margin: 0;
}
/*-------------- Sticky Header End --------------*/
#slider {
  position: relative;
  float: left;
  width: 100%;
  overflow: inherit;
  /* La cabecera es fija en todas las resoluciones, así que el hero arranca
     justo debajo en lugar de por detrás: si no, la cabecera opaca le recorta la
     franja superior del vídeo. El alto del slider descuenta este mismo hueco
     (más abajo y en video-responsive.css) para que hueco + slider no pasen del
     alto de pantalla que tenía el hero. */
  margin-top: var(--sticky-header-height);
}
#slider > .container {
  position: absolute;
  height: 100%;
  right: 0;
  left: 0;
}
#slider .desktop {
  display: block;
}
#slider .tablet {
  display: none;
}
#slider .mobile {
  display: none;
}
#slider,
#slider .home-slider,
#slider .owl-stage-outer,
#slider .owl-stage,
#slider .owl-item {
  /* 100% y no 100vw: 100vw incluye la barra de scroll, así que con 100vw el
     carrusel queda desplazado respecto al contenido de la página y con él todo
     lo que se posiciona dentro (flechas, puntos y botón de play/pausa). */
  width: 100%;
  height: calc(100vh - var(--sticky-header-height));
}
#slider .home-slider picture {
  height: 100%;
  width: 100%;
}

#slider .home-slider picture img {
  height: 100%;
}

#slider .item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#slider .item:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.home-slider__arrows-dots-container {
  top: auto;
  bottom: 23px;
  right: calc((100vw - var(--container-width)) / 2);
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 250px;
  z-index: 100;
}/* Con la máscara visible (desktop) los controles terminan justo donde termina la
   máscara de reservas, no donde termina el contenedor de la página. */
@media (min-width: 1181px) {
  .home-slider__arrows-dots-container {
    right: calc(var(--booking-mask-offset) + var(--booking-mask-nudge));
  }}@media (max-width: 767px) {
  .home-slider__arrows-dots-container {
    justify-content: flex-end;
    width: 100%;
    padding: 0 15px;
    /* Misma línea de base que el botón de play/pausa del vídeo */
    bottom: 15px;
  }
  /* reviews.css deja un margin-bottom suelto en .owl-dots que levanta los puntos
     del hero; aquí se neutraliza y se les da la altura del botón de pausa para
     que ambos controles compartan eje horizontal. */
  .home-slider__arrows-dots-container .owl-dots {
    height: 2.5rem;
    margin-bottom: 0;
  }}
.banner.owl-theme .owl-nav,
.home-slider.owl-theme .owl-nav {
  margin-top: 0;
  padding-right: 3px;
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: 120px;
  height: 40px;
  margin-right: 15px;
}
#slider .home-slider.owl-theme .owl-nav button.owl-prev {
  margin-right: 10px;
}
#slider .home-slider.owl-theme .owl-nav button.owl-next {
  margin-left: 10px;
}
#Caption {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
}
#Caption span.subtitle {
  display: block;
  margin: 0;
  font-size: 24px;
  color: #ffffff;
  font-weight: 300;
  line-height: 45px;
  text-transform: none;
  letter-spacing: 0;
}
#Caption span.title {
  display: inline-block;
  margin: 0;
  padding-bottom: 3px;
  border: none;
  font-size: 50px;
  color: #ffffff;
  font-weight: 300;
  line-height: 47px;
  letter-spacing: 0;
}
#searchForm {
  position: absolute;
  width: 100%;
  bottom: 100px;
  z-index: 2;
}/* En los heroes la máscara se centra respecto a la ventana y no al contenedor:
   así sus bordes caen siempre en --booking-mask-offset, que es la referencia que
   usan el botón de play/pausa del vídeo y las flechas y puntos del carrusel. */
@media (min-width: 1181px) {
  #slider > .container > #searchForm,
  #innerBanner > .container > #searchForm {
    left: 50%;
    right: auto;
    width: var(--booking-mask-width);
    margin-left: calc(var(--booking-mask-width) / -2);
  }}
#searchForm .field {
  float: left;
  width: calc(20% - 1px);
  margin-right: 1px;
  padding: 18px 5px;
  background-color: rgb(var(--secondary-color-rgb) / 70%);
  /* El retardo de 6s solo se aplica en la vuelta a reposo (ver bloque de :hover). */
  transition: background-color 0.4s ease 6s;
}
#searchForm .field.field--btn {
  width: calc(20% - 0px);
  margin-right: 0;
  padding: 0;
  background-color: transparent;
}
#searchForm .field label {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
  color: rgb(255 255 255 / 80%);
  font-weight: 300;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: center;
}
#searchForm .field .form-control {
  height: 30px;
  padding: 0;
  border: none;
  background-color: transparent;
  font-size: var(--font-size-title);
  color: #ffffff;
  text-align: center;
}
#searchForm .field .form-control::placeholder {
  color: #ffffff;
}
#searchForm .neobookings-submit-btn {
  width: 100%;
  padding: 27px 15px;
  border: none;
  background-color: rgb(var(--button-color-rgb) / 70%);
  font-size: 100%;
  color: #ffffff;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: background-color 0.4s ease 6s;
}
#searchForm .neobookings-submit-btn:hover {
  background-color: var(--button-color);
  color: #ffffff;
}
/* En reposo la máscara deja ver el hero a través de sus fondos (70%). Al pasar
   el ratón por cualquier punto de ella se vuelve totalmente opaca: mismos
   colores, sin transparencia. Se excluye .field--btn porque su fondo es
   transparente a propósito (solo envuelve al botón, que se opaca por su cuenta).

   El delay es asimétrico: al entrar el cursor la opacidad es inmediata
   (transition-delay: 0s), pero al salir se conserva 6s antes de volver a
   translucirse — es el delay del estado base el que gobierna la vuelta. Si el
   usuario regresa a la máscara dentro de esos 6s, la cuenta se cancela sola. */
#searchForm:hover .field:not(.field--btn),
#searchForm:hover .neobookings-submit-btn {
  transition-delay: 0s;
  transition-duration: 0.3s;
}
#searchForm:hover .field:not(.field--btn) {
  background-color: rgb(var(--secondary-color-rgb));
}
#searchForm:hover .neobookings-submit-btn {
  background-color: rgb(var(--button-color-rgb));
}
#searchFormBtn {
  display: none;
  position: absolute;
  bottom: 80px;
  right: 15px;
  left: 15px;
  z-index: 2;
}
#searchFormBtn button {
  width: 100%;
  padding: 15px 20px;
  border: 1px solid #ffffff;
  color: #ffffff;
}
#searchFormBtn button:hover {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: #ffffff;
}
#scrollerBottom {
  position: absolute;
  width: 20px;
  margin: 0 auto;
  bottom: 25px;
  right: 0;
  left: 0;
  z-index: 2;
  text-align: center;
}
#searchFormPopup {
  width: 100vw;
  height: 100vh;
  padding-top: 110px;
  background-color: #ffffff;
  background-position: center center;
  background-size: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
#searchFormPopup:before {
  content: none;
}
#searchFormPopup .logo {
  width: 160px;
  height: 36px;
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
#searchFormPopup .logo img {
  filter: brightness(0);
}
/* El botón de cierre es .btn-close (css/global/modules/close-button.css);
   aquí solo se posiciona. */
#searchFormPopup > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 30px 15px;
  position: relative;
  z-index: 1;
  overflow: overlay;
}
#searchFormPopup .field {
  float: left;
  width: 100%;
  padding: 8px 15px;
  margin-bottom: 15px;
  border: 1px solid #cccccc;
}
#searchFormPopup .field:last-child {
  padding: 0;
  margin-bottom: 0;
  border: none;
}
#searchFormPopup .field label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--primary-color);
  font-weight: 400;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: center;
}
#searchFormPopup .field .form-control {
  height: 30px;
  padding: 0;
  border: none;
  background-color: transparent;
  font-size: 25px;
  color: var(--primary-color);
  text-align: center;
}
#searchFormPopup .field .form-control::placeholder {
  color: var(--text-color);
}
#searchFormPopup button {
  width: 100%;
  padding: 15px 15px;
  border-color: var(--primary-color);
  font-size: 38px;
  color: var(--primary-color);
  font-size: 20px;
}
#searchFormPopup button:hover {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: #ffffff;
}@media (max-width: 991px) {
  #searchFormPopup button {
    border: 1px solid var(--primary-color);
  }
  #searchForm .field.field--btn {
    width: 100%;
  }}
#occupationBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: rgb(var(--primary-color-rgb) / 80%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
}
#occupationBox .logo {
  display: none;
  width: 250px;
  height: 36px;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
}
#occupationBox > div {
  padding: 30px 30px;
  background-color: #ffffff;
  z-index: 1;
}
#occupationBox > div #rooms {
  max-height: 57vh;
  margin-bottom: 30px;
  overflow-y: auto;
}
#occupationBox > div .room {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 635px;
}
#occupationBox > div .room .room-title {
  display: flex;
  align-items: center;
  min-width: 60px;
  margin: 15px;
}
#occupationBox > div .room .icon.adult,
#occupationBox > div .room .icon.child,
#occupationBox > div .room .icon.baby {
  position: relative;
}
#occupationBox > div .room .icon.adult::after,
#occupationBox > div .room .icon.child::after,
#occupationBox > div .room .icon.baby::after {
  content: "";
  width: 17px;
  height: 17px;
  background-image: url("../../images/adult-icon.png");
  background-size: cover;
  position: absolute;
  top: 19px;
  right: 51px;
}
#occupationBox > div .room .icon.child::after {
  background-image: url("../../images/children-icon.png");
}
#occupationBox > div .room .icon.baby::after {
  background-image: url("../../images/baby-icon.png");
}
#occupationBox > div .room select {
  position: relative;
  min-width: 150px;
  padding: 5px 10px;
  margin: 15px;
  outline: 0;
  border: none;
  border-bottom: 1px solid #161616;
  background-color: transparent;
}
#occupationBox > div .room .icon.remove {
  display: flex;
  align-items: center;
  color: #161616;
  text-decoration: none;
  position: absolute;
  top: 20px;
  right: 0;
}
#occupationBox > div .room .ages-inputs {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
#occupationBox > div .room .ages-inputs .ages-label {
  min-width: 60px;
  max-width: 60px;
  margin: 15px;
}
#occupationBox > div .room .ages-inputs .ages-container {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
#occupationBox > div .action-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#occupationBox > div .plus,
#occupationBox > div .accept {
  padding: 10px 20px;
}
#occupationBox > div .accept {
  margin-top: 15px;
}

#middle {
  position: relative;
  float: left;
  width: 100%;
}

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

/* POP UP VIEW MORE */
.hidden {
  display: none !important;
}

/* FIN POP UP VIEW MORE */

body > #section > #hero form > #date_range_picker,
.neobookings-form__param__date {
  cursor: pointer;
  font-size: 16px;
}


.neobookings-form {
  width: var(--booking-mask-width);
  margin: auto;
}

/* La máscara se renderiza dos veces: en el hero (una fila) y dentro del pop-up
   responsive (una columna). Apilar en columna es propio del pop-up, así que la regla
   va scopeada a él. Sin ese scope apilaba también la del hero en cuanto la ventana
   bajaba de 1024px, que es como se veía la máscara rota en escritorio estrecho. */
#searchFormPopup .neobookings-form {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.neobookings-form__param__date {
  max-width: 40%;
  background-color: transparent;
  border: 0px;
  color: var(--primary-color);
  outline: unset;
}
.neobookings-form__param__date::placeholder {
  color: var(--primary-color);
}
.neobookings-form__param__date--start {
  text-align: right;
  margin-right: 5px;
  margin-bottom: 1px;
}
.neobookings-form__param__promocode {
  background-color: transparent;
  color: var(--primary-color);
  border: 0px;
  outline: none;
  width: 100%;
  text-align: center;
}
.neobookings-form__param__promocode::placeholder {
  color: var(--primary-color);
}
.date_range_picker__arrow {
  display: inline-flex;
  margin: 0px 3px;
  color: var(--primary-color);
}
/*----------------- CALENDARIOS (LITEPICKER) -----------------*/

/* Los tokens se declaran sobre .litepicker y NO en :root porque la librería
   inyecta su propio :root en runtime: una declaración en el elemento gana
   siempre a la herencia, independientemente del orden de las hojas de estilo */
div.litepicker {
  --cal-day-size: 40px;
  --cal-month-pad: 14px;
  --cal-line: rgba(20, 29, 40, 0.09);
  --cal-panel-gap: 32px;
  --cal-range-bg: rgb(var(--button-color-rgb) / 0.22);
  --cal-range-bg-hover: rgb(var(--button-color-rgb) / 0.34);
  --cal-locked-color: #b9bec4;

  /* Variables propias de litepicker alineadas con la paleta del proyecto */
  --litepickerDayWidth: var(--cal-day-size);
  --litepickerMonthWidth: calc(var(--cal-day-size) * 7);
  --litepickerDayColor: var(--title-color);
  --litepickerDayColorHover: var(--title-color);
  --litepickerDayIsTodayColor: var(--title-color);
  --litepickerDayIsInRange: var(--cal-range-bg);
  --litepickerDayIsStartBg: var(--button-color);
  --litepickerDayIsEndBg: var(--button-color);
  --litepickerDayIsLockedColor: var(--cal-locked-color);
  --litepickerDayIsBookedColor: var(--cal-locked-color);
  --litepickerMonthHeaderTextColor: var(--title-color);
  --litepickerMonthWeekdayColor: var(--text-color);
  --litepickerMonthButton: var(--text-color);
  --litepickerMonthButtonHover: var(--title-color);

  font-family: var(--font-family-2);
  font-size: 16px;
  animation: calendarPopIn 0.22s ease-out both;
}

/* Relleno transparente arriba y abajo: despega la tarjeta del campo de la
   máscara tanto si litepicker abre el panel hacia abajo como hacia arriba
   (sin esto el panel cortaba por la mitad la barra de la máscara) */
.litepicker .container__main {
  padding: var(--cal-panel-gap) 0;
}

/* Superficie del pop-up: mismo lenguaje que el resto de modales del proyecto */
.litepicker .container__months {
  padding: 26px 12px 18px;
  border: 1px solid var(--cal-line);
  border-radius: 5px;
  box-shadow: 0 24px 48px -20px rgba(20, 29, 40, 0.28),
    0 3px 10px rgba(20, 29, 40, 0.05);
}
.litepicker .container__months.columns-2 {
  width: calc((var(--litepickerMonthWidth) * 2) + (var(--cal-month-pad) * 4));
}
.litepicker .container__months .month-item {
  padding: 0 var(--cal-month-pad);
}
/* Separador entre meses con box-shadow inset: un border alteraría el ancho
   calculado por la librería (los meses son box-sizing: content-box) */
.litepicker .container__months .month-item + .month-item {
  box-shadow: inset 1px 0 0 var(--cal-line);
}

/* Cabecera del mes: una sola tipografía, en mayúsculas y espaciada como los
   titulares del sitio (antes mezclaba Montserrat 700 con Queulat) */
.litepicker .container__months .month-item-header {
  padding: 0 0 14px;
}
.litepicker .container__months .month-item-header .month-item-name,
.litepicker .container__months .month-item-header .month-item-year {
  font-family: var(--font-family-2);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.litepicker .container__months .month-item-header .month-item-name {
  color: var(--title-color);
  font-weight: 500;
}
.litepicker .container__months .month-item-header .month-item-year {
  color: var(--text-color);
  font-weight: 400;
}

/* Flechas de navegación entre meses */
.litepicker .container__months .month-item-header .button-previous-month,
.litepicker .container__months .month-item-header .button-next-month {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* El SVG lo inyecta neobookings.js con viewBox propio, así que estas medidas
   escalan el icono en lugar de recortarlo */
.litepicker .container__months .month-item-header a.button-previous-month > svg,
.litepicker .container__months .month-item-header a.button-next-month > svg {
  width: 6px;
  height: 9px;
  fill: currentColor;
}
.litepicker .container__months .month-item-header .button-previous-month:hover,
.litepicker .container__months .month-item-header .button-next-month:hover {
  background-color: var(--tertiary-color);
}
.litepicker .container__months .month-item-header .button-previous-month:focus-visible,
.litepicker .container__months .month-item-header .button-next-month:focus-visible {
  outline: 2px solid var(--button-color);
  outline-offset: 0;
}

/* Días de la semana: etiqueta discreta separada de la parrilla por una línea */
.litepicker .container__months .month-item-weekdays-row {
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--cal-line);
}
.litepicker .container__months .month-item-weekdays-row > div {
  padding: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Celdas cuadradas, en línea con la geometría recta de la máscara y los botones */
.litepicker .container__days > div,
.litepicker .container__days > a {
  height: var(--cal-day-size);
  padding: 0;
}
.litepicker .container__days .day-item {
  position: relative;
  height: var(--cal-day-size);
  border-radius: 0;
  cursor: pointer;
  font-size: 15px;
  line-height: var(--cal-day-size);
  transition: background-color 0.16s ease, color 0.16s ease;
}
.litepicker .container__days .day-item:hover {
  background-color: var(--tertiary-color);
  box-shadow: none;
}
.litepicker .container__days .day-item:focus-visible {
  outline: 2px solid var(--button-color);
  outline-offset: -2px;
}

/* Hoy: se marca con un punto (forma), no solo con color */
.litepicker .container__days .day-item.is-today {
  font-weight: 500;
}
.litepicker .container__days .day-item.is-today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background-color: var(--button-color);
}

/* Rango: banda continua en verde muy claro y extremos en el verde corporativo
   con el texto en blanco (decisión de diseño del cliente).
   OJO al tocar estos colores: blanco sobre #9AB87C da 2.2:1 y no llega al 4.5:1
   que pide WCAG AA para texto normal. Se compensa en parte con el peso 600.
   Si en algún momento se busca cumplimiento estricto, la vía es oscurecer el
   verde del extremo (no aclarar el texto): #6E8C4E con blanco da 4.6:1 */
.litepicker .container__days .day-item.is-in-range {
  color: var(--title-color);
}
.litepicker .container__days .day-item.is-in-range:hover {
  background-color: var(--cal-range-bg-hover);
}
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date,
.litepicker .container__days .day-item.is-start-date:hover,
.litepicker .container__days .day-item.is-end-date:hover,
.litepicker .container__days .day-item.is-start-date.is-end-date,
.litepicker.end-picker .day-item.is-locked + .day-item:not(.is-locked) {
  border-radius: 0;
  background-color: var(--button-color);
  color: #ffffff;
  font-weight: 600;
}
.litepicker .container__days .day-item.is-start-date.is-today::after,
.litepicker .container__days .day-item.is-end-date.is-today::after {
  background-color: #ffffff;
}

/* Días no seleccionables: sin hover ni cursor de acción */
.litepicker .container__days .day-item.is-locked,
.litepicker .container__days .day-item.is-booked {
  cursor: default;
}
.litepicker .container__days .day-item.is-locked:hover,
.litepicker .container__days .day-item.is-booked:hover {
  background-color: transparent;
}
/* Tooltip de número de noches, fijado en la cabecera de la tarjeta.
   Litepicker lo coloca justo encima del día apuntado y, al ser las celdas
   contiguas, tapaba los números de la fila anterior. Anclado arriba y al centro
   cae sobre el separador entre meses: posición estable y sin ocultar nada.
   !important es necesario: la librería escribe top/left en el style inline */
.litepicker .container__tooltip {
  top: calc(var(--cal-panel-gap) + 4px) !important;
  left: 50% !important;
  margin: 0;
  padding: 4px 9px;
  transform: translateX(-50%);
  border-radius: 2px;
  background-color: var(--title-color);
  box-shadow: 0 8px 18px -8px rgba(20, 29, 40, 0.5);
  color: #ffffff;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* La flecha del tooltip ya no apunta a ningún día */
.litepicker .container__tooltip::before,
.litepicker .container__tooltip::after {
  display: none;
}

@keyframes calendarPopIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* El diálogo móvil se centra con translateY(-50%), así que la animación tiene
   que conservar ese desplazamiento en ambos fotogramas */
@keyframes calendarSheetIn {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 14px));
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}@media (max-width: 991px) {
  body.calendar-open {
    overflow: hidden;
    max-height: 100vh;
  }
  /* Velo: aísla el panel del contenido de la página (litepicker sólo crea su
     propio backdrop con mobileFriendly, y en móvil se inicializa sin él) */
  body.calendar-open::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
    background-color: rgba(20, 29, 40, 0.45);
  }
  /* En móvil el calendario es un diálogo centrado en el viewport.
     !important es necesario: litepicker escribe top/left en el style inline */
  div.litepicker {
    --cal-day-size: 46px;
    --cal-month-pad: 15px;

    position: fixed !important;
    top: 50% !important;
    right: 0;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(-50%);
    animation: calendarSheetIn 0.26s ease-out both;
  }
  /* Tarjeta flotante: separada de los bordes y con las cuatro esquinas
     redondeadas, como el resto de modales del proyecto */
  .litepicker .container__main {
    width: calc(100% - 32px);
    max-width: 520px;
    margin: 0 auto;
    padding: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 24px 56px -18px rgba(20, 29, 40, 0.45);
  }
  /* Cabecera del dialogo: Entrada / Salida + cierre */
  .litepicker .container__main .date-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    height: 56px;
    border-bottom: 1px solid var(--cal-line);
    background-color: #ffffff;
    color: var(--title-color);
    font-family: var(--font-family-2);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  /* El tamaño lo fija .btn-close; centramos con transform para no depender
     de conocer la altura. */
  .litepicker .container__main .date-title__close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
  }
  .litepicker .container__months {
    width: 100% !important;
    max-height: 66vh;
    padding: 8px 0 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: auto;
  }
  /* Un mes por fila y parrilla fluida: así el ancho no depende de vw y no se
     descuadra cuando la barra de scroll del panel ocupa espacio */
  .litepicker .container__months .month-item,
  .litepicker .container__months .month-item + .month-item {
    flex: 0 0 100%;
    width: auto;
    box-sizing: border-box;
    padding: 6px var(--cal-month-pad) 18px;
    box-shadow: none;
  }
  /* En tablet el panel sigue ocupando todo el ancho, pero la parrilla se limita
     y se centra para que las celdas no queden desproporcionadamente anchas.
     El tope va en los hijos y no en .month-item: siendo éste un flex item con
     base 100%, los márgenes automáticos no reparten el espacio del max-width */
  .litepicker .container__months .month-item-header,
  .litepicker .container__months .month-item-weekdays-row,
  .litepicker .container__days {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .litepicker .container__months .month-item-weekdays-row,
  .litepicker .container__days {
    width: 100%;
  }
  .litepicker .container__days > div,
  .litepicker .container__days > a {
    width: calc(100% / 7);
  }
  .litepicker .container__months .month-item-header .month-item-name,
  .litepicker .container__months .month-item-header .month-item-year {
    font-size: 13px;
  }
  /* Área táctil mínima de 44px en las flechas */
  .litepicker .container__months .month-item-header .button-previous-month,
  .litepicker .container__months .month-item-header .button-next-month {
    width: 44px;
    height: 44px;
  }}@media (prefers-reduced-motion: reduce) {
  div.litepicker {
    animation: none;
  }}

/*FIN CALENDARIOS*/

/***************************** HUÉSPEDES *****************************/
body #neobookings-form #guestsFake {
  cursor: pointer;
  height: 100%;
  color: var(--primary-color);
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  height: 1.2em;
  white-space: nowrap;
  text-align: center;
}@media (max-width: 992px) {
  #searchForm .field {
    height: 70px;
    background-color: white;
    position: unset;
  }
  body #neobookings-form #guestsFake {
    display: flex;
    align-items: center;
    justify-content: center;
  }}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/******************* SELECTOR DE IDIOMAS ****************************/

.language-selector {
  list-style: none;
  position: relative;
  height: 100%;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline-start: 0;
}
.language-selector li a {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  line-height: 16px;
  text-transform: uppercase;
  text-decoration: none;
}
.language-selector__other-lang {
  height: 0px;
  overflow: hidden;
  transition: all 0.6s;
  position: absolute;
  top: 33px;
  left: 35px;
  list-style: none;
  background-color: rgb(var(--primary-color-rgb) / 80%);
  padding: 0px;
}
.language-selector > li:hover + .language-selector__other-lang,
.language-selector > li + .language-selector__other-lang:hover {
  height: auto;
}
.language-selector__other-lang li {
  padding: 5px 15px;
  position: relative;
}

.language-selector__other-lang li:hover {
  background-color: rgb(var(--primary-color-rgb) / 95%);
}

.language-selector__other-lang li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0px;
  display: flex;
  background-color: #fff;
  transition: width 0.6s;
}
.language-selector__other-lang li:hover::after {
  width: 100%;
}

.language-selector > li {
  display: flex;
  padding: 10px 15px;
}

/***************** FIN SELECTOR DE IDIOMAS ****************************/

/***************** DESPLEGABLE DE HOTELES ********************/
/* Separación entre el ítem de menú y su desplegable. El mismo valor lo usa el
   puente invisible que mantiene el hover al bajar, así que basta cambiarlo aquí. */
:root {
  --header-drop-offset: 14px;
}

.hotel-menu {
  position: relative;
}

/* Los ítems de menú con desplegable llevan chevron, igual que "Más". */
#header ul.mainMenu .hotel-menu > a::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 5px;
  opacity: 0.65;
  background-color: currentColor;
  -webkit-mask-image: url("../../images/icons/chevron-down.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../../images/icons/chevron-down.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* left: -19px alinea el texto de los ítems (1px de borde + 6px de la tarjeta +
   12px del ítem) con el del disparador: la lista continúa su misma vertical. */
.hotel-menu__drop-down {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  top: calc(100% + var(--header-drop-offset));
  left: -19px;
  z-index: 50;
  list-style: none;
  padding: 8px 6px;
  width: 320px;
  background-color: #ffffff;
  border: 1px solid var(--mask-pop-border);
  border-radius: var(--mask-pop-radius);
  box-shadow: var(--mask-pop-shadow);
}

/* Puente invisible que cubre el hueco entre el ítem de menú y la tarjeta para
   que el hover no se corte al bajar. Va en la tarjeta (no en el <li>) porque
   así hereda su pointer-events: cerrada es inerte y no abre nada sin querer.

   Los -1px son el borde de la tarjeta: al posicionarse contra su caja de
   relleno, el puente arrancaba un píxel por debajo del <li> y dejaba una línea
   muerta que cerraba el desplegable a media bajada. */
.hotel-menu__drop-down::before {
  content: "";
  position: absolute;
  top: calc((var(--header-drop-offset) + 1px) * -1);
  left: -1px;
  right: -1px;
  height: calc(var(--header-drop-offset) + 1px);
}

#header ul.mainMenu .hotel-menu:hover .hotel-menu__drop-down,
#header ul.mainMenu .hotel-menu__drop-down:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}@media (prefers-reduced-motion: reduce) {
  .hotel-menu__drop-down {
    transform: none;
    transition: opacity 0.2s ease;
  }}

/**************** FIN DESPLEGABLE DE HOTELES ********************/

/**************** MÁS - OVERFLOW NAV ********************/

#header ul.mainMenu .more-menu {
  position: relative;
  /* Oculto por defecto: nav-overflow.js lo usa además como destino de los ítems
     que desbordan y en ese caso solo debe aparecer si hace falta. */
  display: none;
}

/* La marca la pone top-nav.xsl cuando el corte fijo ya deja ítems agrupados, es
   decir cuando el botón se va a ver igualmente. Así nace visible en el primer
   pintado en lugar de aparecer con el $(document).ready de nav-overflow.js.
   list-item es el display que le daba jQuery al revelarlo, para no cambiar la
   caja resultante. */
#header ul.mainMenu .more-menu--visible {
  display: list-item;
}

#header ul.mainMenu .more-menu__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: default;
  /* Igualado a los ítems del menú principal (#header ul.mainMenu li a) */
  font-size: 15px;
  line-height: 18px;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
#header ul.mainMenu .more-menu__btn .more-menu__icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('/themes/default/images/icons/chevron-down.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url('/themes/default/images/icons/chevron-down.svg');
  mask-repeat: no-repeat;
  mask-size: contain;
}


/* Misma tarjeta que el desplegable de hoteles, centrada bajo su disparador.
   Anclada por la derecha nacía hasta 130px a la izquierda de "Más", así que para
   alcanzarla el cursor tenía que derivar en lateral y se salía del <li> (que solo
   mide el ancho del texto) antes de bajar al puente: el hover se cortaba solo. */
#header ul.mainMenu .more-menu__dropdown {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  top: calc(100% + var(--header-drop-offset));
  left: 50%;
  list-style: none;
  padding: 8px 6px;
  min-width: 190px;
  z-index: 50;
  background-color: #ffffff;
  border: 1px solid var(--mask-pop-border);
  border-radius: var(--mask-pop-radius);
  box-shadow: var(--mask-pop-shadow);
}

/* Puente invisible del hover (ver .hotel-menu__drop-down::before). */
#header ul.mainMenu .more-menu__dropdown::before {
  content: "";
  position: absolute;
  top: calc((var(--header-drop-offset) + 1px) * -1);
  left: -1px;
  right: -1px;
  height: calc(var(--header-drop-offset) + 1px);
}

#header ul.mainMenu .more-menu:hover .more-menu__dropdown,
#header ul.mainMenu .more-menu__dropdown:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}@media (prefers-reduced-motion: reduce) {
  #header ul.mainMenu .more-menu__dropdown {
    transform: translateX(-50%);
    transition: opacity 0.2s ease;
  }}

#header ul.mainMenu .more-menu__dropdown > li {
  float: none;
  padding: 0;
  width: 100%;
  background-color: transparent;
  border-radius: 8px;
  position: relative;
  transition: background-color 0.25s ease-in-out;
}

#header ul.mainMenu .more-menu__dropdown > li a {
  display: block;
  padding: 9px 12px;
  width: 100%;
  color: var(--text-color);
  /* Igualado al menu principal (#header ul.mainMenu li a) */
  font-size: 15px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease-in-out;
  font-weight: 300;
}

/* Verde de marca al 14% con texto en primary: el mismo estado de hover que la
   lista del selector de hoteles de la máscara (y con contraste AA, que el
   blanco sobre el verde corporativo no alcanza). */
#header ul.mainMenu .more-menu__dropdown > li:hover {
  background-color: var(--mask-pop-hover-bg);
}

#header ul.mainMenu .more-menu__dropdown > li:hover a {
  color: var(--primary-color);
}

/**************** FIN MÁS - OVERFLOW NAV ********************/

/*SELECTOR DE HOTELES*/
:root {
  /* Alto del area scrolleable de la lista: tope maximo y suelo minimo.
     El minimo evita que el panel se desplome al filtrar en el buscador (con un
     solo resultado pasaba de 319px a 183px de golpe).
     Ojo con subir el maximo: el panel abre hacia arriba y en paginas interiores
     el hueco libre sobre el campo es limitado -- de ahi el tope por viewport de
     #innerBanner mas abajo, que evita que la cabecera fija tape las pestanas. */
  --mask-hotels-zones-height: 300px;
  --mask-hotels-zones-min-height: 188px;

  /* Lenguaje visual compartido por los pop-ups de la máscara (hoteles y huéspedes)
     para que ambos se lean como piezas de la misma familia. */
  --mask-pop-radius: 12px;
  --mask-pop-border: rgb(20 29 40 / 8%);
  --mask-pop-shadow: 0 22px 48px -20px rgb(20 29 40 / 42%),
    0 3px 10px rgb(20 29 40 / 6%);
  --mask-pop-soft-bg: rgb(20 29 40 / 5%);
  --mask-pop-hover-bg: rgb(var(--button-color-rgb) / 14%);
}@media (max-width: 992px) {
  :root {
    --mask-hotels-zones-height: 340px;
  }

  .field.guests {
    position: static;
  }}

.field {
  position: relative;
}

/* --- PANEL --- */
/* Se ancla al borde izquierdo de su campo (antes left:18%, que lo dejaba
   flotando sin relación visible con el input que lo abre). */
.select-hotels-zones__container {
  display: none;
  position: absolute;
  /* Justo encima del campo, sin taparlo (antes bottom:47px solapaba 23px del input). */
  bottom: calc(100% + 10px);
  left: 0;
  width: 420px;
  padding: 20px 0 0 0;
  background-color: #ffffff;
  border: 1px solid var(--mask-pop-border);
  border-radius: var(--mask-pop-radius);
  box-shadow: var(--mask-pop-shadow);
  overflow: hidden;
  z-index: 20;
  font-size: 15px;
  text-align: left;
}

.select-hotels-zones__container.expanded {
  display: block;
  animation: maskPopIn 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes maskPopIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}@media (prefers-reduced-motion: reduce) {
  .select-hotels-zones__container.expanded {
    animation: none;
  }}

/* Degradado de corte al pie de la lista: indica que hay más contenido y evita
   que el último ítem visible parezca cortado a media línea. */
.select-hotels-zones__container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), #ffffff);
  pointer-events: none;
}

.select-hotels-zones__container a {
  text-decoration: none;
}

/* --- CERRAR --- */
/* Alineado a la derecha con las superficies de la lista y centrado con el eje
   del control segmentado (top 26 = 20 de padding + 21 de medio control - 15). */
/* El botón de cierre es .btn-close (css/global/modules/close-button.css);
   aquí solo se posiciona. */

/* --- PESTAÑAS: CONTROL SEGMENTADO --- */
/* margin-left 14 (+1 de borde) deja el control segmentado en la misma vertical
   que el buscador y el fondo de los ítems de la lista. */
.select-hotels-zones__container .nav-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 54px 16px 14px;
  padding: 4px;
  border: 0;
  border-radius: 30px;
  background-color: var(--mask-pop-soft-bg);
}

.select-hotels-zones__container .nav-item {
  padding: 0;
  position: relative;
}

.select-hotels-zones__container .nav-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 18px;
  border: 0;
  border-radius: 30px;
  background-color: transparent;
  color: var(--text-color);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}

/* El icono se pinta con mask + currentColor (mismo patrón que .more-menu__icon)
   para que siga el color del texto al activarse la pestaña, sin filtros. */
.select-hotels-zones__container .nav-item a::after {
  content: "";
  order: -1;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.select-hotels-zones__container .nav-item a.icon-location::after {
  -webkit-mask-image: url("../../images/icons/location.svg");
  mask-image: url("../../images/icons/location.svg");
}

.select-hotels-zones__container .nav-item a.icon-hotels::after {
  -webkit-mask-image: url("../../images/icons/hotel-bed.svg");
  mask-image: url("../../images/icons/hotel-bed.svg");
}

.select-hotels-zones__container .nav-item a:hover {
  color: var(--primary-color);
}

/* Verde corporativo con texto blanco (decisión de diseño del cliente). Nota de
   accesibilidad: blanco sobre #9AB87C da 2,2:1 de contraste, por debajo del
   4,5:1 de WCAG AA; oscurecer el verde del pill ~12% lo dejaría conforme.
   El icono acompaña solo, porque se pinta con currentColor. */
.select-hotels-zones__container .nav-item a.active,
.select-hotels-zones__container .nav-item a.active:hover {
  background-color: var(--button-color);
  color: #ffffff;
}

/* --- BUSCADOR --- */
/* Vive dentro del panel scrolleable (asi solo aparece en la pestaña de hoteles),
   por eso se fija con sticky: al recorrer la lista sigue accesible en cabecera. */
.select-hotels-zones__container .select-hotels-container__hotel-search-cont {
  display: block;
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 4px 0 8px 0;
  background-color: #ffffff;
}

.select-hotels-zones__container
  .select-hotels-container__hotel-search-cont::after {
  content: "";
  position: absolute;
  left: 16px;
  /* -2px compensa el padding asimetrico del contenedor sticky (4px arriba /
     8px abajo) para que el icono quede centrado con el input, no con la caja. */
  top: calc(50% - 2px);
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-color: var(--primary-color);
  opacity: 0.45;
  -webkit-mask-image: url("../../images/icons/search.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../../images/icons/search.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  pointer-events: none;
}

/* Los inputs de la máscara van centrados y con cursor de puntero; el buscador
   necesita lo contrario, de ahí la especificidad por #searchForm/#searchFormPopup. */
#searchForm
  .select-hotels-zones__container
  #select-hotels-container__hotel-search,
#searchFormPopup
  .select-hotels-zones__container
  #select-hotels-container__hotel-search {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 11px 16px 11px 40px;
  border: 1px solid rgb(20 29 40 / 16%);
  border-radius: 30px;
  background-color: #ffffff;
  font-size: 14px;
  line-height: 18px;
  color: var(--primary-color);
  text-align: left;
  cursor: text;
  transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

#searchForm
  .select-hotels-zones__container
  #select-hotels-container__hotel-search:focus,
#searchFormPopup
  .select-hotels-zones__container
  #select-hotels-container__hotel-search:focus {
  outline: 0;
  border-color: var(--button-color);
  box-shadow: 0 0 0 3px rgb(var(--button-color-rgb) / 22%);
}

.select-hotels-zones__container
  #select-hotels-container__hotel-search::placeholder {
  /* 65% sobre blanco (~#666C73) mantiene el contraste WCAG AA del placeholder. */
  color: rgb(20 29 40 / 65%);
}

/* --- LISTA (HOTELES / DESTINOS) --- */
.select-hotels-zones__container .tab-pane {
  display: none;
  min-height: var(--mask-hotels-zones-min-height);
  max-height: var(--mask-hotels-zones-height);
  margin: 0;
  /* Sin padding superior para que los ítems desaparezcan por completo bajo el
     buscador sticky. El inferior deja que el degradado de corte caiga sobre
     espacio vacío cuando la lista está scrolleada al final. */
  padding: 0 14px 8px 14px;
  border-bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(20 29 40 / 20%) transparent;
}

/* Tope por viewport SOLO en páginas interiores: su hero mide 85vh (cabecera
   fija incluida) y la máscara se ancla a 100px de su base, así que el hueco
   libre entre la cabecera y el campo es 85vh - 220. Restando el gap, el cromo
   del panel y aire, la lista no puede pasar de 85vh - 385px sin que la cabecera
   tape las pestañas.
   La home no lo necesita: su hero es más alto y usa el tope de la variable. */
#innerBanner .select-hotels-zones__container .tab-pane {
  min-height: min(var(--mask-hotels-zones-min-height), calc(85vh - 385px));
  max-height: min(var(--mask-hotels-zones-height), calc(85vh - 385px));
}

.select-hotels-zones__container .tab-pane.show {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
}

/* La pestaña de destinos no tiene buscador sticky, así que recupera el aire
   superior que la de hoteles cede al buscador. */
.select-hotels-zones__container .select-zones__container {
  padding-top: 6px;
}

.select-hotels-zones__container .tab-pane::-webkit-scrollbar {
  width: 4px;
}

.select-hotels-zones__container .tab-pane::-webkit-scrollbar-track {
  background: transparent;
}

.select-hotels-zones__container .tab-pane::-webkit-scrollbar-thumb {
  background: rgb(20 29 40 / 20%);
  border-radius: 10px;
}

.select-hotels-zones__container .select-hotels-zones__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  color: var(--text-color);
  text-decoration: none;
  text-wrap: balance;
  line-height: 20px;
  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}

/* Chevron que aparece al pasar por encima: sustituye a la línea animada que
   antes crecía bajo el texto (0.6s, casi imperceptible). */
.select-hotels-zones__container .select-hotels-zones__item::after {
  content: "";
  margin-left: auto;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-color: currentColor;
  transform: rotate(-90deg);
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  -webkit-mask-image: url("../../images/icons/chevron-down.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../../images/icons/chevron-down.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.select-hotels-zones__container .select-hotels-zones__item:hover,
.select-hotels-zones__container .select-hotels-zones__item:focus-visible {
  background-color: var(--mask-pop-hover-bg);
  color: var(--primary-color);
  outline: 0;
}

.select-hotels-zones__container .select-hotels-zones__item:hover::after,
.select-hotels-zones__container .select-hotels-zones__item:focus-visible::after {
  opacity: 0.55;
}@media (max-width: 991px) {
  /* En móvil el panel NO se ancla a su campo (#searchForm .field pierde el
     position:relative), sino al contenedor del pop-up de la máscara: se centra
     verticalmente en él como tarjeta flotante, con el mismo retranqueo lateral
     de 15px que los campos del formulario. La altura se deja en auto -- antes
     eran 550px fijos, muy por encima del contenido real, lo que dejaba una
     franja blanca muerta al pie del panel. */
  /* position: fixed y no absolute: el contenedor del pop-up (#searchFormPopup >
     div) tiene overflow, así que al centrarse la tarjeta se le salía por arriba
     y quedaba recortada por el borde de la banda del logo. Fixed la saca de ese
     recorte y además la centra respecto a la pantalla, sin compensaciones.
     Verificado que ningún ancestro tiene transform/filter/contain, que serían
     los que convertirían el fixed en relativo a ellos. */
  .select-hotels-zones__container {
    position: fixed;
    left: 15px;
    right: 15px;
    width: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 10;
    height: auto;
    /* El doble de la banda superior (110px del logo y la X): así, ya centrada,
       la tarjeta nunca llega a invadirla en pantallas bajas. Si el contenido no
       cabe, encoge la lista, que ya tiene su propio scroll. */
    max-height: calc(100vh - 220px);
    /* Velo a pantalla completa con el mismo color que el del calendario en
       móvil (body.calendar-open::after). Va como segunda sombra de la propia
       tarjeta en vez de como pseudoelemento del body: así no hace falta que el
       JS marque ninguna clase, aparece y se va con la tarjeta (una caja con
       visibility:hidden no pinta sombra) y acompaña su fundido de entrada.
       Las sombras no capturan clics, así que pulsar fuera sigue cerrando. */
    box-shadow: var(--mask-pop-shadow), 0 0 0 100vmax rgba(20, 29, 40, 0.45);
  }

  /* La animación de entrada tiene que arrastrar el -50% del centrado: al llevar
     animation-fill-mode: both, su último fotograma pisa el transform de arriba. */
  .select-hotels-zones__container.expanded {
    animation-name: maskSheetIn;
  }

  @keyframes maskSheetIn {
    from {
      opacity: 0;
      transform: translateY(calc(-50% + 8px));
    }
    to {
      opacity: 1;
      transform: translateY(-50%);
    }
  }/* Se repite aquí porque la regla de arriba llega antes en la cascada y este
     animation-name la pisaría. */
@media (prefers-reduced-motion: reduce) {
    .select-hotels-zones__container.expanded {
      animation: none;
    }}

  /* Los cuatro elementos comparten el retranqueo lateral de 10px (+1 de borde)
     para que pestañas, buscador, ítems y X queden en la misma vertical. */
  /* El margen derecho reserva el hueco del botón de cierre: 44px de ancho
     (tamaño táctil de .btn-close) + 10px de retranqueo + holgura. */
  .select-hotels-zones__container .nav-tabs {
    margin: 0 58px 14px 10px;
  }

  .select-hotels-zones__container .nav-item a {
    padding: 8px 14px;
  }

  .select-hotels-zones__container .tab-pane {
    padding: 0 10px 8px 10px;
    /* El suelo de la lista cede en pantallas muy bajas (móvil en horizontal):
       si no, el alto mínimo de la tarjeta superaría su tope y volvería a
       meterse bajo la banda del logo. */
    min-height: min(var(--mask-hotels-zones-min-height), 30vh);
  }

  /* Filas de 44px y X de 40px: área de pulsación mínima recomendada en táctil. */
  .select-hotels-zones__container .select-hotels-zones__item {
    padding: 12px;
  }}/*FIN SELECTOR DE HOTELES*/
/* ESTILOS DE LAYOUT SHIFT*/


#default-list .main-list {
  overflow: hidden;
}

.main-list {
  position: relative;
  overflow: hidden;
  padding-top: 0 !important;
  margin-bottom: var(--space-between-sections);
}
#newsletter h3 {
  margin: 0 0 20px 0;
  font-size: var(--font-size-title);
  line-height: var(--desktop-line-height-title);
}
/* FIN ESTILOS DE LAYOUT SHIFT*/

#header.stiky ul.mainMenu li a,
#header.stiky ul.mainMenu .more-menu__btn {
  color: var(--text-color);
}

#header.stiky .language-selector li a {
  color: var(--text-color);
}

#header.stiky .hamburger #nav-btn + label span {
  background-color: var(--text-color);
}

#header.stiky .hamburger #nav-btn + label span::before,
#header.stiky .hamburger #nav-btn + label span::after {
  background-color: var(--text-color);
}

#header.stiky {
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.4);
}

.room_buttons {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 20px;
  gap: 32px;
}

.pop-up-view-more__description h1,
.pop-up-view-more__description h2,
.pop-up-view-more__description h3,
.pop-up-view-more__description h4,
.pop-up-view-more__description h5,
.pop-up-view-more__description h6 {
  margin-bottom: 20px;
}

#header .logo-sticky {
  display: none;
}

#header .logo-nav {
  display: block;
  position: absolute;
  width: 186px !important;
  /* Misma reserva que los imagotipos: logo.png es 4096x1147 y sin proporción
     el hueco del logo del panel hamburguesa colapsa hasta que descarga. */
  aspect-ratio: 4096 / 1147;
  z-index: 100;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
}@media (max-width: 1024px) {
  #header .logo-nav {
    top: 36px;
  }}@media (max-width: 992px) {
  #header:has(#nav-btn:checked) .hamburger {
      margin-top: 14px;
    }}

#header.stiky .logo-sticky {
  display: block !important;
}

#header.stiky .logo-static {
  display: none !important;
}

.no-scroll .logo-sticky {
  display: block;
}

#date_range_picker {
  width: 120%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#date_range_picker input {
  text-align: center;
  margin: 0px;
}

#neobookings-form .fake-input-hotels-zones,
#neobookings-form .guestsFake,
#neobookings-form input {
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.news-response {
  max-width: 250px;
}

#seo-utils .banner {
  height: 80vh !important;
}

.banner img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* CORRECIONES DE ESPACIOS  */

.main-list__item {
  text-align: center;
  align-items: center;
  margin-top: var(--space-between-sections);
}

.main-list__item:nth-child(odd) {
  display: flex;
  flex-direction: row-reverse;
}
.main-list__item .hotels2-thumb .owl-dots,
.main-list__item .destin-thumb .owl-dots {
  margin-top: 10px;
}

.main-list__item .hotels2-thumb .owl-dots .owl-dot.active span,
.main-list__item .destin-thumb .owl-dots .owl-dot.active span {
  background: var(--button-color);
}

.main-list__item .hotels2-thumb .owl-dots .owl-dot:hover span,
.main-list__item .destin-thumb .owl-dots .owl-dot:hover span {
  background: var(--button-color);
}/* La maquetación de este bloque vive en css/global/modules/neo-text-item.css.
   Aquí sólo quedan los ajustes responsive de las columnas. La regla que había
   (display flex + padding: 0 10%) se movió al módulo: el 10% se resolvía
   contra el ancho de la fila y estrangulaba la columna de texto. */
@media (max-width: 1024px) {
  .intro-text .content-text,
  .intro-text .row div:nth-child(2) {
    flex: 0 100%;
  }

  .intro-text .content-text {
    max-width: 100%;
  }

  .intro-text .row div:nth-child(2) {
    margin-inline: auto;
  }}@media (max-width: 992px) {
  .intro-text .content-text {
    margin-bottom: var(--space-between-sections);
  }}

.intro-text {
  margin-bottom: var(--space-between-sections);
  overflow-x: hidden;
}

.intro-text .image .destin-thumb .owl-dot.active span {
	background-color: var(--button-color);
}@media (max-width: 992px) {
  .main-list__item:nth-child(odd),
  .main-list__item:nth-child(even) {
    gap: 20px;
  }

  #searchFormPopup .logo {
    top: 28px;
  }}

.marble-background {
  background-image: url(../../images/marble-bg.webp) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  padding-block: var(--space-between-sections);
  /* Banda inferior propia del bloque. Va en una variable y no en la declaración
     para que un bloque pueda ajustarla sin romper el cálculo de abajo. */
  padding-bottom: var(--marble-space-bottom, var(--space-between-sections));
  margin-bottom: var(--space-between-sections);
}

/* Dos bloques de mármol consecutivos: el margin-bottom dejaba ver el blanco del
   body entre ambos y partía la textura en gris / blanco / gris. La separación
   pasa a padding para que el fondo sea continuo; el espacio visible entre el
   contenido de una sección y el de la siguiente no cambia.
   Los :is() saltan los nodos sin render que el framework intercala entre
   secciones (el <link> y el <import-postload-section> del postload). */
.marble-background:has(+ .marble-background),
.marble-background:has(+ :is(link, script, import-postload-section) + .marble-background),
.marble-background:has(+ :is(link, script, import-postload-section) + :is(link, script, import-postload-section) + .marble-background) {
  margin-bottom: 0;
  padding-bottom: calc(var(--marble-space-bottom, var(--space-between-sections)) + var(--space-between-sections));
}

/* CARGA DIFERIDA DE LA TEXTURA DE MARMOL
   La textura son 97 KB que se pedian en la carga inicial de casi todas las paginas, aunque
   medido en la home los tres bloques que la usan arrancan a 1.976, 3.073 y 5.635 px: ninguno
   entra en la primera pantalla en ningun breakpoint. Aqui se anula el background y lo repone
   neobookings.js cuando el bloque se acerca al viewport.
   La guarda has-js es progressive enhancement, igual que en la regla de los .wow de arriba:
   esa clase la anade un script inline al principio de head.xsl, asi que solo existe si el
   JavaScript corre. Sin JavaScript no se cumple el selector, no se anula nada y la textura se
   ve desde el primer pintado. Con JavaScript, se difiere.
   El :not() y el !important son para ganarle a la regla base, que ya venia con !important;
   no se anaden !important nuevos, se igualan los que ya habia. */
html.has-js .marble-background:not(.marble-bg-visible) {
  background-image: none !important;
}

#footer.marble-background {
  padding-block: 0;
  margin-bottom: 0;
}

/* Las flechas del carrusel van DEBAJO de las tarjetas (ver
   modules/slider-item-list.css), así que el bloque necesita una banda inferior.
   Se declara como variable para que la regla de mármol continuo pueda sumarle la
   separación entre secciones en lugar de perderla. */
#home #sliderItemList.marble-background {
  --marble-space-bottom: 40px;
}

#sliderItemList .hotels-listing .item img,
#hotel-rooms .main-list__item .owl-carousel .owl-item img.owl-lazy,
.gallery .owl-carousel .owl-item img.owl-lazy {
  transition: all 0.8s;
  cursor: pointer;
}

#hotel-rooms .main-list__item .owl-carousel .owl-item img.owl-lazy:hover,
.gallery .owl-carousel .owl-item img.owl-lazy:hover {
  transform: scale(1.1);
}

#hotel-rooms .main-list__item .owl-carousel .owl-item::before,
.gallery .owl-carousel .owl-item a::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: all 0.25s ease-out;
  pointer-events: none;
}

#hotel-rooms .main-list__item .owl-carousel .owl-item:hover::before,
.gallery .owl-carousel .owl-item a:hover::before {
  opacity: 0.6;
}

.gallery .promotions-listing .item a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background-image: url('../../images/icons/search.svg');
  background-repeat: no-repeat;
  background-size: contain;
  filter: invert(1);
  pointer-events: none;
  opacity: 0;
  transition: all 0.8s;
  z-index: 5;
}

.gallery .owl-carousel .owl-item a:hover::after {
  opacity: 1;
}

.gallery .title span.tagnumber {
  display: block;
  margin: 0 0 76px 0;
  font-size: 20px;
  color: var(--text-color);
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 0.24px;
}
/* Leaflet marker icons: recolor sin perder el centro blanco */
.leaflet-pane.leaflet-marker-pane img.leaflet-marker-icon {
  filter: var(--icon-filter-primary-marker);
}

.leaflet-pane.leaflet-marker-pane img.leaflet-marker-shadow {
  filter: none;
}

div.description {
  margin-top: 30px;
  line-height: var(--line-height);
}

#ourLocation {
  margin-bottom: var(--space-between-sections);
}

strong {
  font-weight: bold;
}