/* RESET PREVIEW */
.swiper-slide{
    filter: brightness(100%) !important;
}
.swiper-button-next {
    display: none !important;
}
.swiper-button-prev{
    display: none !important;
}
.swiper-scrollbar{
    display: none !important;
}

section > .container-fluid:first-of-type > .row:first-of-type > .col {
  padding: 0;
}
/* WIDE GAP COL */
.wide-gap .row>*,
.wide-gap-between .row>*,
.wide-gap-middle .row>* {
    padding-right: 0;
    padding-left: 0;
}
.wide-gap .row,
.wide-gap-between .row,
.wide-gap-middle .row {
    display: flex;
    gap: 100px;
}
.col-lg-4.col-xl-4.col-xxl-4 {
    width: calc((100% - 200px) / 3)
}

.wide-gap-between .row > [class^="col"]:nth-of-type(1),
.wide-gap-between .row > [class^="col"]:nth-of-type(3) {
    padding-top: 100px;
}
.wide-gap-middle .row > [class^="col"]:nth-of-type(2) {
    padding-top: 100px;
}
/* RESET COL PADDING */
.experience-section .row > div:first-of-type:not(.order-lg-2) {
  padding-left: 0;
}
.experience-section .row > div:last-of-type:not(.order-lg-1) {
  padding-right: 0;
}
.experience-section .row > div.order-lg-2 {
  padding-right: 0;
}
.experience-section .row > div.order-lg-1 {
  padding-left: 0;
}
/* GENERAL */
h1, h2 {
    font-family: var(--fontSecondary) !important;
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8rem;
    letter-spacing: 3.3px;
    text-transform: uppercase;
    text-wrap: balance;
}
h3{
    text-wrap: balance;
}
h1 em, h2 em {
  font-style: italic;
}
h3.main-title,
h2.main-title {
    font-family: var(--fontPrimary) !important;
    font-size: 2.9rem !important;
    line-height: 3rem !important;
    font-weight: 400 !important;
    transition: font-size 0.4s ease, line-height 0.4s ease;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h2.sub-title,
h3.sub-title {
    font-family: var(--fontPrimary) !important;
    font-size: 2.1rem !important;
    line-height: 2rem !important;
    font-weight: 400 !important;
    transition: font-size 0.4s ease, line-height 0.4s ease;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}
/* BUTTONS */
.btn-checkin {
    background: var(--colorFooter);
    color: var(--colorBrown);
    border-radius: 32px;
    padding: 4px 8px !important;
    margin-top: 20px !important;
    font-size: 1rem !important;
    white-space: nowrap;
}
.button-more {
    position: relative;
    padding: 16px 16px;
    background: none;
    border: none;
    border-top: 0.75px solid var(--colorPrimary);
    border-bottom: 0.75px solid var(--colorPrimary);
    color: var(--colorPrimary);
    cursor: pointer;
    z-index: 1;
        transition: 
        padding 0.3s ease, 
        border-color 0.3s ease 0.3s, 
        color 0.3s ease 0.3s;
}
.button-more:hover {
    padding-left: 32px;
    padding-right: 32px;
    border-top-color: var(--colorSecondary);
    border-bottom-color: var(--colorSecondary);
    color: var(--colorSecondary);
}
.button-more.colorWhite {
    border-top: 0.75px solid var(--colorWhite);
    border-bottom: 0.75px solid var(--colorWhite);
    color: var(--colorWhite); 
}
.button-more.colorWhite:hover {
    border-top-color: var(--colorWhite);
    border-bottom-color: var(--colorWhite);
    color: var(--colorWhite);
}

.button-book {
    --color: #fff;
    --hover: #7D9DDC; /* Puedes ajustar este color si lo deseas */
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3.3px;
    color: var(--color);
    transition: background 0.25s, color 0.25s, border-color 0.25s;
    background: none;
    border: 1px solid var(--color);
    font: inherit;
    line-height: 1;
    padding: 1rem 2rem;
    position: relative;
    overflow: hidden;
}

.button-book::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(198 198 198 / 20%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Compatibilidad con Safari */
    border-radius: inherit;
}

.button-book:hover {
    background:  var(--colorBlue);
    color: #fff;
    border-color:  var(--colorBlue);
}

/* Versión blue con fondo ya aplicado */
.button-book.blue {
    background:  var(--colorBlue);
    color: #fff;
    border-color: var(--colorBlue);
        transition: 
        padding 0.3s ease, 
        border-color 0.3s ease 0.3s, 
        color 0.3s ease 0.3s;
}

/* Hover para .blue: aclarar un poco más el fondo o aplicar un efecto */
.button-book.blue:hover {
    background: var(--colorBlue); /* un tono ligeramente más oscuro o claro que --hover */
    border-color: var(--colorBlue);
    padding-left: 3rem;
    padding-right: 3rem;
}

.button-book:hover,
.button-book:focus {
      box-shadow: inset 0 0 0 2em  var(--colorBlue);
      border-color:  var(--colorBlue);
      color: #fff;
}
/* PRICE FROM */
.price_from_container.loaded {
    display: flex;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    line-height: 1rem;
    font-size: 0.9rem;
}
.price_from {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1rem;
    transition: color 0.3s ease 0.3s;
}
.price_from:hover {
    color: var(--colorBlue) !important;
}
/* HOME HOTEL */
    /* WELCOME - SECTION */
    .welcome-text{
        text-align: center;
        font-family: var(--fontSecondary);
        font-size: 1.2rem;
        font-style: normal;
        font-weight: 300;
        letter-spacing: 0.3px;
        line-height: 1.5rem;
        text-wrap: balance;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;


    }
    .p-text{
        text-align: center;
        font-family: var(--fontPrimary);
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.3px;
        line-height: 1.8rem;
        text-wrap: balance;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .welcome-title {
        font-size: 1.5rem;
    }

    /* ROOMS - PREVIEW - SECTION */
    .htt-preview-app-content p {
        cursor: pointer;
    }
    .preview-rooms .swiper-horizontal:first-child {
        height: 100vh !important;
    }
    div[class*="htt_preview_app_extern_"] h3 {
            text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
    div.htt-contentExtra h4 > a {
        color: var(--colorWhite) !important;
    }
    div.htt-contentExtra h4 > a:hover {
        color: var(--colorBlue) !important;
    }
    div[class*="htt_preview_app_extern_"] {
        position: relative;
        z-index: 1;
    }
    div[class*="htt_preview_app_extern_"] .swiper-slide {
        background-position: center;
    }
    div[class*="htt_preview_app_extern_"]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 20%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0));
        z-index: 2;
        pointer-events: none; /* para no bloquear interacciones */
    }
    div[class*="htt_preview_app_intern_"] .swiper-wrapper {
        width: max-content;
        margin-left: auto;
        margin-right: auto;
    }
    div[class*="htt_preview_app_intern_"] .swiper-wrapper .swiper-slide {
        width: auto !important;
    }
    div[class*="htt_preview_app_intern_"] .swiper-slide{
        height: auto !important;
    }
    div[class*="htt_preview_app_intern_"] .swiper-slide {
        border: none !important;
    }
    div[class*="htt_preview_app_intern_"] .swiper-pagination-bullet {
        display: none;
    }
    div[class*="htt_preview_app_intern_"] .swiper-slide-thumb-active {
        border-top: 0.75px solid white !important;
        border-bottom: 0.75px solid white !important;
        padding: 8px 0;
        background:  none !important;
        border-radius: 0 !important;
    }
    div[class^="htt_preview_app"] .htt-contentExtra {
        bottom: 40% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100%;
    }
    div[class*="htt_preview_app_intern_"] .swiper-slide:hover{
        background: none !important;
        color: red;
        transition: 0.4s ease, line-height 0.4s ease;
    }

    .preview-rooms .htt-contentExtra {
        z-index: 2 !important;
    }
    .preview-rooms h3 {
        font-size: 0.9rem;
        padding: 8px 8px;
        line-height: 2.7rem;
        font-weight: 400;
        letter-spacing: 1.1px;
        margin: 0;
    }
    .htt-contentExtraElement h4 {
        font-family: var(--fontPrimary);
        font-size: 5.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.1;
        color: var(--colorWhite);
        text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        transition: font-size 0.4s ease, line-height 0.4s ease;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    div[class*="htt_preview_app_extern_"] > .swiper-wrapper > .swiper-slide {
        position: relative;
        overflow: hidden;
    }

    div[class*="htt_preview_app_extern_"] > .swiper-wrapper > .swiper-slide::before {
        content: "";
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0 */
        background-color: rgba(0, 0, 0, 0.1); /* capa negra con 40% de opacidad */
        pointer-events: none; /* para que no bloquee clicks */
        z-index: 1; /* sobre la imagen, pero debajo del contenido */
    }
    div[class*="htt_preview_app_extern_"] > .swiper-wrapper > .swiper-slide .htt-contentExtra {
        z-index: 2;
    }
    .htt-contentExtraElement .price_from_container a {
        color: var(--colorWhite);
    }
    /* SERVICES - SECTION */
    .bgSand{
        background-color: var(--colorYellow);
    }
    .bgSand-50 {
        background: linear-gradient(
            to bottom,
            var(--colorYellow) 0%,
            var(--colorYellow) 50%,
            transparent 50%,
            transparent 100%
          );
    }
    .bgSand-75 {
        background: linear-gradient(
            to bottom,
            var(--colorYellow) 0%,
            var(--colorYellow) 65%,
            transparent 65%,
            transparent 100%
          );
    }
    .swiper-100 {
        width: 60%;
        overflow: visible !important;
    }
    .service-section H3,
    .eco-home h4,
    .experiences-home h4,
    .services-home h4 {
        font-family: var(--fontPrimary) !important;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.7rem;
        letter-spacing: 0.5px;
        margin-top: 10px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .text-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-family: var(--fontPrimary);
        font-size: 4rem;
        font-weight: 400;
        padding: 10px 20px;
        border-radius: 8px;
        text-align: center;
        z-index: 5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .text-overlay:hover {
        color: white !important;
    }
    .text-overlay-eco::before {
        content: "\f06c"; /* Unicode del ícono fa-leaf */
        font-family: "Font Awesome 6 Free";
        font-weight: 900; /* 900 para 'solid' */
        margin-right: 0.2rem;
        color: white;
    }
    .text-overlay-eco {
        position: absolute;
        bottom: 3%;
        right: 3%;
        color: white;
        font-family: var(--fontSecondary);
        font-size: 1.1rem;
        font-weight: 500;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .text-overlay-100.d-flex {
        gap: 10px;
    }
    .text-overlay-100 {
        position: absolute;
        bottom: 3%;
        right: 3%;
        z-index: 5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .text-overlay-100 p {
        color: white;
        font-family: var(--fontSecondary);
        font-size: 1rem;
        font-weight: 400 !important;
    }
    .rooms-eco i,
    .text-overlay-100 i {
        color: lightgreen;
    }
    .rooms-eco {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
.button-wrapper {
    display: flex;
    flex-direction: row;
    gap: 40px;

}@media (max-width: 1500px) {
    .text-overlay-100.d-flex {
        flex-direction: column !important;
        justify-content: center;
        margin-top: 10px;
        gap: 0;
    }
    .text-overlay-100 {
        position: relative;
        text-shadow: none;
    }
    .text-overlay-100 p {
        color: var(--colorPrimary);
        font-size: 0.9rem;
        font-weight: 300 !important;
    }
    .text-overlay {
        font-size: 3rem;
    }
}
/* FIN - HOME HOTEL */

/* OCIO Y ENTRETENIMIENTO - LANDING */
    .gallery-section h2,
    .service-section h2,
    .experience-section h3 {
        font-family: var(--fontPrimary) !important;
        font-size: 2.8rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2.7rem;
        text-transform: none !important;
        letter-spacing: 0.5px;
         
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .gallery-section h2{
        font-size: 3.4rem;

    }   
    .know-section .row > [class*="col-"] > .htt-text-image,
    .leisure-section .row > [class*="col-"] > .htt-text-image,
    .service-section > .container-fluid.w100 > .row > [class*="col-"] > .htt-text-image,
    .experience-section .row > [class*="col-"] > .htt-text-image {
        height: 100%;
        align-content: center;
    }
/* GALERIA - LANDING */
.tab-content .container {
    max-width: 100% !important;
}
.gallery-section nav {
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
}
.gallery-section .nav-tabs {
    display: flex;
    justify-content: space-between;
    border: none;
    width: 60%;
    margin: auto;
}
.gallery-section .nav-tabs .nav-link {
    margin-bottom: none;
    color: var(--colorPrimary);
}
.gallery-section .nav-tabs .nav-link.active {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--colorPrimary)!important;
    border-top: 1px solid var(--colorPrimary) !important;
    color: var(--colorPrimary);
}
.gallery-section .nav-tabs .nav-link:hover {
    border: none;
}

.lightbox {
    gap: 10px;
}
.lightbox .image {
    width: calc(33.333% - 10px) !important;
}

 /* SERVICES - SECTION */
    .bgOlive{
        background-color: var(--colorOlive);
    }
    .bgOlive-50 {
        background: linear-gradient(
            to bottom,
            var(--colorOlive) 0%,
            var(--colorOlive) 50%,
            transparent 50%,
            transparent 100%
          );
    }
.sub-exp-section .lightbox .image:nth-child(n+4) {
    display: none;
}
.img-wrapper {
    position: relative;
}
.zoom-wrapper {
  overflow: hidden;
  position: relative;
  display: block;
}

.zoom-img {
  transition: transform 0.3s ease;
  display: block;
  width: 100%;
  height: 100%;
}

.zoom-wrapper:hover .zoom-img {
  transform: scale(1.05);
}

/* Capa negra semitransparente sobre la imagen */
.img-wrapper::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background-color: rgba(0, 0, 0, 0.15); /* Negro 50% opaco */
  pointer-events: none; /* Que no bloquee clicks */
  z-index: 1;
}
/* HABITACIONES - LANDING */
.header .container-fluid.submenu > .row {
    flex-direction: column !important;
}
/* CONTACTO - LANDING */
  .contador-galeria {
    position: absolute;
    top: 24px;
    left: 24px;
    font-size: 24px;
    font-family: var(--fontSecondary);
    font-weight: 400;
    margin-bottom: 10px;
    color: white;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  }
  .contador-galeria * {
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}
.contador-galeria > .fa-solid {
    font-size: 24px;
}
.contador-3 > .lightbox,
.contador > .lightbox {
    position: relative;
}
.contador-3 > .lightbox .image,
.contador > .lightbox .image {
    width: 100% !important;
}
.contador > .lightbox > div.image:nth-of-type(n+3) {
    display: none !important;
}
.contador-3 > .lightbox > div.image:nth-of-type(n+5) {
    display: none !important;
}
/* OCIO - LANDING */
.leisure-section ul {
    text-align: left;
    list-style: none;
    padding-left: 0;
}

.leisure-section ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.25rem;
}
.leisure-section ul li:first-child {
    margin-top: 0.5rem;
}

.leisure-section ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 0.2em;
    height: 0.2em;
    background-color: var(--colorPrimary);
    transform: rotate(45deg);
    display: inline-block;
}
@media (max-width: 1890px) {
    .mybooking-content-text,
    .person-login-text {
        display: none;
    }
}
@media (max-width: 1700px) {
    .header:not(.editMode .header) {
        padding: 10px;
    }
}
@media (max-width: 1500px) {
    .htt-contentExtraElement h4 {
        font-size: 3rem;
    }
    p.main-title {
        font-size: 2rem !important;
        font-weight: 300 !important;
        line-height: 90% !important;
    }
}
@media (max-width: 1024px) {
    .gallery-section .nav-tabs {
        width: 90%;
    }
    .gallery-section .btn.btn-secondary.dropdown-toggle {
        width: 100%;
        color: var(--colorWhite);
        background: var(--colorBlue);
        margin-bottom: 20px;
        border: none;
    }
    .dropdown-item.active {
        background-color: var(--colorBlue);
    }
    .dropdown-menu.show {
        width: 100%;
    }
}
@media (max-width: 933px) {
    .container-fluid.w100 > .row {
        gap: 20px;
    }
}
@media (max-width: 768px) {
    .gallery-section h2, .service-section h2, .experience-section h3 {
        font-size: 2rem;
        line-height: 2.3rem;
    }
    .bgOlive-60,
    .bgSand-50 {
        padding-top:40px;
    }
    p.w80, p.w70, p.w60, p.w50 {
        width: 95% !important;
    }
    .container-fluid.paddTop120,
    .container-fluid.paddTop220 {
        padding-top: 60px;
    }
    .container-fluid.mTop120,
    .container-fluid.mTop220 {
        margin-top: 60px;
    }
    .container-fluid.mBT120,
    .container-fluid.mBT220 {
        margin-bottom: 60px;
    }
    h3.main-title, h2.main-title {
        font-size: 2.2rem !important;
    }
    .swiper-100 {
        width: 95% !important;
    }
    .button-wrapper {
        flex-direction: column;
        gap: 10px;
    }
    .preview-rooms .swiper-horizontal:first-child {
        height: 60vh !important;
    }
    .htt-text-image .w80,
    .htt-text-image .w70, 
    .htt-text-image .w60 {
        width: 100%;
    }
    .button-book {
        width: 100%;
    }
    .left {
        text-align: center;
    }
    .service-section .row > div,
    .experience-section .row > div{
        padding: 0;
    }
    .experience-section .title-center {
        margin-top: 20px;
    }
    .service-section :not(.container-fluid)>.swiper.w60{
        width: 100%;
        margin-bottom: 40px;
    }
    h3.main-title,
    h2.main-title {
        text-align: center !important;
    }
    .col-lg-4.col-xl-4.col-xxl-4 {
    width: 100%;
    }
    .swiper-100 {
        overflow: hidden !important;
    }
    .htt-contentExtraElement h4 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
    div[class*="htt_preview_app_intern_"] {
        display: none;
    }
    .leisure-section h2 {
        margin-bottom: 20px;
    }
}