@charset "utf-8";

/*----------------- Inner Pages -----------------*/
/* Hero de las páginas interiores. La cabecera es fija y opaca en TODAS las
   resoluciones (clase .stiky escrita en header.xsl), así que el hero arranca
   justo debajo con un margin-top en lugar de por detrás, y descuenta ese mismo
   hueco de su alto: hueco + banner miden siempre 85vh, en cualquier resolución.
   El alto del hueco vive en --sticky-header-height (global/neobookings.css).
   NO añadir overflow: hidden aquí: el panel del selector de hoteles se ancla a
   su campo dentro de #innerBanner y abre hacia arriba, así que un recorte lo
   dejaría cortado (en móvil ese panel va con position: fixed y no le afecta). */
#innerBanner {
  position: relative;
  width: 100%;
  margin-top: var(--sticky-header-height);
  min-height: calc(85vh - var(--sticky-header-height));
  height: calc(85vh - var(--sticky-header-height));
  overflow: inherit;
  margin-bottom: var(--space-between-sections);
}
body:has(.breadcrumbs) #innerBanner {
    margin-bottom: 24px;
}
#innerBanner > .container {
  position: absolute;
  height: 100%;
  right: 0;
  left: 0;
  z-index: 5;
}

#innerBanner .desktop {
  display: block;
}
#innerBanner .tablet {
  display: none;
}
#innerBanner .mobile {
  display: none;
}

#innerBanner .banner .owl-item:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  opacity: 0.25;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#innerBanner .banner > img {
  width: 100%;
  max-width: 100%;
}

/* El carrusel y sus imágenes llenan la caja del hero en todas las resoluciones.
   Antes solo se hacía por debajo de 1181px y en desktop el alto de la imagen lo
   marcaba su proporción: coincidía con la caja de milagro a 768px de alto, y en
   cualquier otro alto de ventana quedaba una franja blanca al pie con la
   máscara de reservas flotando sobre ella. */
#innerBanner .banner,
#innerBanner .owl-stage-outer,
#innerBanner .owl-stage,
#innerBanner .owl-item,
#innerBanner .owl-item .item {
  height: 100%;
}
#innerBanner .owl-item .item picture {
  display: block;
  width: 100%;
  height: 100%;
}
#innerBanner .owl-item .item picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FIN TEXTO DE INTRODUCCIÓN */
#introHotels {
  padding-top: var(--space-between-sections);
  padding-bottom: var(--space-between-sections);
  overflow: hidden;
}
#introHotels .content {
  padding: 0 15px 0 125px;
}
/* El alto del hero ya no cambia por tramo: la regla base lo deja en 85vh
   (hueco de la cabecera incluido) en todas las resoluciones. Aquí solo queda el
   recorte, que en estos tramos sí es seguro porque la máscara de desktop no se
   renderiza y su panel no puede quedar cortado. */
@media (min-width: 993px) and (max-width: 1180px) {
  #innerBanner {
    overflow: hidden;
  }
}

@media (max-width: 992px) {
  #innerBanner {
    overflow: hidden;
  }
  #introHotels .content {
    padding: 0 15px 0 15px;
  }
}

/* Por debajo del punto de corte de la máscara (1181px) el hero sustituye la máscara
   por el botón "Reservar" (#searchFormBtn). Ese botón se
   anclaba al pie del hero mientras el título del hotel se centraba por su
   cuenta con top: 50%: como el hero mide 85vh, en ventanas bajas o con títulos
   de tres líneas ambos acababan pisándose.
   Aquí el contenido del hero pasa a repartirse en dos filas: una elástica que
   se queda con todo el espacio sobrante y centra el título entre la cabecera y
   el botón, y otra al pie con el botón. Así la separación entre ambos está
   garantizada por el row-gap y no depende del alto de la ventana ni de las
   líneas que ocupe el título. El botón lleva su fila escrita a mano para que
   siga anclado abajo también en las páginas que no muestran título.
   El :has() ya no discrimina por dispositivo: desde que el botón se emite en todos
   los user-agents, quien acota este layout es el propio media query, que coincide
   con el punto de corte de la máscara. Por encima de él en el hero manda la máscara
   completa, que es absoluta y no debe convivir con un título pegado al pie.
   La línea decorativa de scroll (#scrollerBottom) se retira en este tramo: en
   pantallas táctiles no invita a nada y solo mete ruido bajo el botón. Al
   quitarla, el botón baja hasta la misma distancia del pie del hero que la que
   guarda de sus laterales el doble de sus 15px de margen lateral. */
@media (max-width: 1180px) {
  #innerBanner > .container:has(#searchFormBtn) {
    display: grid;
    grid-template-rows: 1fr auto;
    padding-bottom: 30px;
  }
  /* El .container arrastra el clearfix de Bootstrap (::before y ::after con
     display: table). Al volverse grid el contenedor, esos pseudoelementos pasan
     a ser items de alto 0 que ocupan fila y descuadran el reparto. Aquí no
     limpian ningún float, así que se retiran. */
  #innerBanner > .container:has(#searchFormBtn)::before,
  #innerBanner > .container:has(#searchFormBtn)::after {
    display: none;
  }
  #innerBanner > .container:has(#searchFormBtn) #Caption,
  #innerBanner > .container:has(#searchFormBtn) #searchFormBtn {
    position: static;
    transform: none;
  }
  /* El título se centra en la franja libre, que llega justo hasta el botón: así
     queda exactamente a media altura entre la cabecera y él. La separación
     mínima con el botón la da su margen vertical, y va también arriba para que
     el centrado no se descompense (arriba sobra espacio de todos modos).
     El margen horizontal auto lo centra a lo ancho, porque es más estrecho que
     el contenedor: skeleton.css le da calc(100% - 30px) y ya no puede apoyarse
     en el centrado por transform. */
  #innerBanner > .container:has(#searchFormBtn) #Caption {
    grid-row: 1;
    align-self: center;
    margin: 30px auto;
  }
  #innerBanner > .container:has(#searchFormBtn) #searchFormBtn {
    grid-row: 2;
  }
  #innerBanner > .container:has(#searchFormBtn) #scrollerBottom {
    display: none;
  }
}
#introHotels .content span.tagnumber {
  display: block;
  margin: 0 0 50px 0;
  font-size: 20px;
  color: var(--text-color);
  font-weight: 500;
  line-height: 25px;
  text-transform: uppercase;
  letter-spacing: 0.24px;
}
#introHotels .content span.tagnumber strong {
  font-weight: 300;
}
#introHotels .content span.tagnumber strong:after {
  content: "";
  display: inline-block;
  width: 70px;
  margin: 0 20px;
  margin-top: -10px !important;
  border-top: 1px solid;
  vertical-align: middle;
}
#introHotels .content .description {
  position: relative;
}
#introHotels .content .description:before {
  content: "";
  width: 180px;
  border-top: 1px solid var(--secondary-color);
  position: absolute;
  top: 12px;
  left: 0;
  transform: translateX(-70%);
}
#introHotels .content p {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: var(--text-color);
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 0.7px;
}
#introHotels .content p:last-child {
  margin-bottom: 0;
}

#introHotels .content .btn-view-more,
#ourRestaurant .content .btn-view-more {
  margin-right: 15px;
}

#introHotels .image {
  padding: 0 125px;
}
#introHotels .image .introhotels-thumb {
  padding-bottom: 100px;
}
#introHotels .image .introhotels-thumb .item a:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--secondary-color);
  opacity: 0.25;
  position: absolute;
  top: 0;
  left: 0;
}
#introHotels .image .introhotels-thumb.owl-theme .owl-nav {
  top: auto;
  bottom: 0;
  right: auto;
  left: 0;
  margin-top: 0;
}
#introHotels .image .introhotels-thumb.owl-theme .owl-nav.active {
  right: 0;
  left: 0;
}
#introHotels .image .introhotels-thumb.owl-theme .owl-nav [class*="owl-"] {
  position: static;
  width: 70px;
  height: 70px;
  border: 1px solid transparent;
  border-radius: 100%;
}
#introHotels
  .image
  .introhotels-thumb.owl-theme
  .owl-nav
  [class*="owl-"]:hover {
  border-color: var(--primary-color);
}
#introHotels .image .introhotels-thumb.owl-theme .owl-nav button.owl-prev {
  margin-right: 10px;
}
#introHotels .image .introhotels-thumb.owl-theme .owl-nav button.owl-next {
  margin-left: 10px;
}
#introHotels .image .introhotels-thumb.owl-theme .owl-dots {
  position: absolute;
  bottom: 0;
  right: 0;
  left: auto;
}
#introHotels .image .introhotels-thumb.owl-theme .owl-dots.active {
  right: 0;
  left: 0;
}
#introHotels .image .introhotels-thumb.owl-theme .owl-dots .owl-dot {
  height: 70px;
}
#introHotels .view-destinations-container a {
  margin-right: 30px;
}
@media (max-width: 992px) {
  #introHotels.introHotels--invert {
    padding-top: 0;
  }
  #introHotels.introHotels--invert .row--invert {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
  }
}

/* BOTON VOLVER AL GRUPO */

#header ul.mainMenu .go-back {
  position: relative;
  display: flex;
  padding-right: 0;
  column-gap: 15px;
  align-items: center;
}
#header ul.mainMenu .go-back:after {
  content: "";
  width: 1px;
  height: 35px;
  background-color: white;
  position: relative;
  transform: rotate3d(1, 1, 1, 45deg);
}
#header ul.mainMenu .go-back a {
  display: flex;
  column-gap: 0.625rem;
  text-transform: none;
  font-weight: 600;
  font-size: 0.875rem;
  align-items: center;
}
#header ul.mainMenu .go-back svg {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 24px;
  border: 1px solid white;
  transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
}
#header ul.mainMenu .go-back svg path {
  fill: white;
  transition: fill 0.3s ease-in-out;
}
#header ul.mainMenu .go-back:hover a svg {
  background-color: white;
}
#header ul.mainMenu .go-back:hover a svg path {
  fill: black;
}

#header.stiky ul.mainMenu .go-back svg {
  border-color: var(--black);
}

#header.stiky ul.mainMenu .go-back svg path {
  fill: var(--black);
}

/*FIN BOTON VOLVER AL GRUPO */

/* BREADCRUMBS */
.breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center; /* centrado perfecto */
  padding: 15px 15px var(--space-between-sections);
  background-color: #fff;
  flex-wrap: wrap; /* permite varias líneas si hace falta */
  gap: 10px; /* separa de forma uniforme los items */
}

.breadcrumbs__menu,
.breadcrumbs__menu:hover {
  color: var(--text-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-weight: 400;
}

.breadcrumbs__bar {
  width: 20px;
  height: 1px;
  background-color: var(--text-color);
  opacity: 0.5;
}

/* Último elemento más suave */
.breadcrumbs__menu[aria-current="page"] {
  opacity: 0.7;
  pointer-events: none;
}

/* En móvil/tablet la ruta puede ser muy larga (nombre del hotel + población) y
   con flex se partía mal: la primera línea acababa en un guión colgando y la
   última miga saltaba entera abajo alineada a la izquierda. Aquí se pasa a
   flujo de texto en línea, así la ruta se lee como un texto centrado que parte
   por palabras y los guiones nunca quedan al final de línea (el XSL no deja
   espacio entre la barra y su enlace, así que van pegados a la miga siguiente). */
@media (max-width: 992px) {
  .breadcrumbs {
    display: block;
    /* Abajo, el mismo hueco de sección que en desktop para separar la ruta del
       título. Arriba basta con 6px: #innerBanner ya deja 24px justo encima. */
    padding: 6px 24px var(--space-between-sections);
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
    text-wrap: balance; /* reparte las líneas para que no quede una palabra sola */
  }
  .breadcrumbs > span,
  .breadcrumbs__menu,
  .breadcrumbs__menu:hover {
    display: inline;
  }
  /* Selector con el padre: si no, la regla de arriba (más específica) le
     impondría display: inline y el guión perdería su ancho y su alto. */
  .breadcrumbs > .breadcrumbs__bar {
    display: inline-block;
    width: 14px;
    margin: 0 7px;
    vertical-align: middle;
  }
}

/* FIN BREADCRUMBS */

/* ESTILOS PARA EL LAYOUT SHIFT */
#ourHotels3 {
  padding-top: var(--space-between-sections);
  padding-bottom: var(--space-between-sections);
}
.hotel-home-hotel-logo {
  margin-top: -50px;
}
@media (max-width: 767px) {
  .hotel-home-hotel-logo {
    margin-bottom: 35px;
    margin-top: -35px;
  }
}
/* FIN ESTILOS PARA EL LAYOUT SHIFT */