/* VARIABLES */
:root {
    --fontPrimary: "optima-lt-pro", sans-serif;
    --fontSecondary: 'Quiverleaf', Arial, sans-serif;
    --fontScript: 'filmotype','Meow Script', sans-serif;
    --fontScript-2: "Amandine", cursive;
    --colorPrimary:#607995;
    --colorWhite:#FFFFFF;
    --colorYellow: #FDF4E9;
    --colorBrown: #a57a68;
    --colorSand: #fbf4ea;
    --colorFoam: #f2e4bf;
    --gradient:linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    --gradient-2:linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
    --borderRadius: 8px;
    --fs-h1: 3rem;
    --fs-h1-rot: 4rem;
    --fs-h1-rot-script: 6rem;
    --fs-h2: 2.5rem;
    --fs-h2-rot: 4rem;
    --fs-h3: 2rem;
    --fs-pretitle: 2.5rem;
}
@media (max-width: 768px) {
  :root {
    --fs-h3: 1.5rem; /* nuevo valor para móvil */
  }
}
/* FONTS */
@font-face {
  font-family: 'Quiverleaf';
  src: url('/dam/multiHotel-Roc-Hotels/home/fonts/quiverleaf-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Amandine';
  src: url('/dam/multiHotel-Roc-Hotels/home/fonts/amandine-light.otf') format('opentype');
  font-weight: 300;
  font-style: light;
  font-display: swap;
}
@font-face {
  font-family: 'filmotype';
  src: url('/dam/multiHotel-Roc-Hotels/home/fonts/filmotype-la-crosse.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optima';
  src: url('/dam/multiHotel-Roc-Hotels/home/fonts/optima.ttf') format('truetype'),
       url('/dam/multiHotel-Roc-Hotels/home/fonts/optima.woff') format('woff');
  font-weight: 300; /* Light */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Optima';
  src: url('/dam/multiHotel-Roc-Hotels/home/fonts/optima-bold.woff2') format('woff2'),
       url('/dam/multiHotel-Roc-Hotels/home/fonts/optima-bold.woff') format('woff'),
       url('/dam/multiHotel-Roc-Hotels/home/fonts/optima-bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
  font-style: normal;
  font-display: swap;
}

/* ESTILOS GENERICOS */
html{
    overflow-x:hidden;
    scroll-padding-top: 200px;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  padding-top: env(safe-area-inset-top);
}
img {
    border-radius: var(--borderRadius);
}
.swiper-wrapper{ margin-bottom: 30px;}
.center{ text-align: center; }
.left{ text-align: left; }
.right{ text-align: right; }
.no-render:not(.editMode .no-render){ display: none; }

.fontPrimary{ font-family: var(--fontPrimary); text-transform: uppercase; }
.fontSecondary{ font-family: var(--fontSecondary); }
.fontScript { font-family: var(--fontScript); }
.fontScript-2 { font-family: var(--fontScript-2); }

.colorPrimary{ color:var(--colorPrimary); }
.colorSecondary{ color:var(--colorSecondary); }
.colorBlue { color:var(--colorBlue); }
.colorYellow { color: var(--colorYellow); }
.colorWhite { color: var(--colorWhite); }
.colorGreen { color: var(--colorGreen); }

.bg-sand-50, .bg-sand{ background-color: var(--colorSand); }
.bg-color-primary { background-color: var(--colorPrimary); }
.bg-stripes{
    background: repeating-linear-gradient(
        90deg,
        #d2d8dc,
        #d2d8dc 5%,
        var(--colorSand) 5%,
        var(--colorSand) 10%
    );
}
.bg-contact {
    background-image: url('/dam/multiHotel-Roc-Hotels/contacto/mar-tumbonas-hotel-roc-illetas-spa.webp');
    background-size: cover;        /* la imagen cubre toda la sección */
    background-position: center;   /* centrada en ambos ejes */
    background-repeat: no-repeat;  /* sin repetición */
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;  
}
.img-responsive{ width:100%; object-fit: cover; height: 100%; filter: saturate(0.9); }
.img-responsive-contain{ width:100%; object-fit: contain; height: 100%; }

/* MARGINS & PADDINGS */
.m0Auto{ margin:0 auto; }
.mTop10{ margin-top: 10px; }
.mTop20{ margin-top: 20px; }
.mTop40{ margin-top: 40px; }
.mTop60{ margin-top: 60px; }
.mTop120{ margin-top: 120px; }
.mTop220{ margin-top: 220px; }
.mBT20{ margin-bottom: 20px; }
.mBT30{ margin-bottom: 30px; }
.mBT40{ margin-bottom: 40px; }
.mBT60{ margin-bottom: 60px; }
.mBT120{ margin-bottom: 120px; }
.mBT220{ margin-bottom: 220px; }
.paddTop20{ padding-top: 20px; }
.paddBT20{ padding-bottom: 20px; }
.paddTop40{ padding-top: 40px; }
.paddBT40{ padding-bottom: 40px; }
.paddTop60{ padding-top: 60px; }
.paddBT60{ padding-bottom: 60px; }
.paddTop120{ padding-top: 120px; }
.paddTop220{ padding-top: 220px; }
.paddBT120{ padding-bottom: 120px; }
.paddTop200{ padding-top: 200px; }
.paddBT200{ padding-bottom: 200px; }

.z-5 {z-index: 5;}
.ls-5 {letter-spacing: 5px;}
.ls-10 {letter-spacing: 10px;}
.align-content-center {align-content: center;}
.align-content-start {align-content: flex-start;}
.h-100 {height: 100%;}
.w-100 {width: 100%;}
.font-1{ font-size: 1rem !important; }
.font-1-5{ font-size: 1.5rem !important; }
.font-2{ font-size: 2rem !important; }
.font-3{ font-size: 3rem !important; }
.font-4{ font-size: 4rem !important; }
.font-5{ font-size: 5rem !important; }
.font-6{ font-size: 6rem !important; line-height: 3rem; }
@media (max-width: 768px) {
    .font-5{ font-size: 3.5rem; }
    .font-4{ font-size: 2rem !important; }
}
/* WIDTHS */
.w40{ width:40%; }
.w50{ width:50%; }
.w55{ width:55%; }
.w60{ width:60%; }
.w70{ width:70%; }
.w80{ width:80%; }
.w90{ width:90%; }
.uppercase{
    text-transform: uppercase;
}
.title-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
/* Body & Headings */
body, .data-protection table {
    text-align: center;
    font-family: var(--fontSecondary);
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    overflow: visible;
    color:var(--colorPrimary);
    position: relative;
}
strong {
    font-family: var(--fontPrimary);
    font-weight: 700;
}
p{
    font-family: var(--fontPrimary);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 300;
    margin-bottom:0;
    letter-spacing: 0.3px;
    line-height: 1.5rem;
    text-wrap: balance;
}
/* INICIO - Button Search */
#buttonShowSearcherScroll,
#buttonShowSearcherMobile {
    /* Fondo con efecto cristal borroso */
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Color inicial del texto y borde */
    color: var(--colorPrimary) !important;
    border: 2px solid  var(--colorPrimary) !important;
    border-radius: 50px !important;
    transition: color 0.4s ease;
    border-radius: 30px !important;
    letter-spacing: 1px;
    padding: 16px 32px !important;
}
div#buttonShowSearcherScroll {
    font-size: 1.5em !important;
    right: 1% !important;
    top: 7% !important;
    padding: 16px 32px !important;
    font-family: var(--fontSecondary);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1;
    
    /* Fondo con efecto cristal borroso */
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Color inicial del texto y borde */
    color: var(--colorPrimary) !important;
    border: 2px solid  var(--colorPrimary) !important;
    border-radius: 50px !important;
    transition: color 0.4s ease;
}

/* Botón RESERVAR – clase: btn-book */
.grid-book {
    position: absolute;
    bottom: 15%;
}
.btn-book {
  display: inline-block;
  padding: 16px 32px;
  font-family: var(--fontPrimary);
  font-weight: 300;
  font-size: 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1;
  
  /* Fondo con efecto cristal borroso */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* Color inicial del texto y borde */
  color: var(--colorFoam);
  border: 2px solid var(--colorFoam);
  border-radius: 50px;
  transition: color 0.4s ease;
  
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Hover → se rellena del color del borde y texto blanco */
.btn-book:hover {
    color:var(--colorFoam);
    border: 2px solid var(--colorPrimary);
}

/* Capa que crea el efecto de relleno */
.btn-book::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--colorPrimary);          /* mismo color que el borde */
  transition: width 0.4s ease;
  z-index: -1;
  border-radius: 50px;
}

.btn-book:hover::before {
  width: 100%;
}
/* INICIO - HEADER */
.header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:transparent;
    z-index: 100;
    padding: 15px 60px 0 60px;
}
.header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
    pointer-events: none;
    z-index: -1; 
}

.containerTxtSlide p{
    font-family: var(--fontSecondary);
    font-size: 3rem !important;
    font-weight: 300;
    color:#F1E4BF;
    line-height: 0.8; 
    text-transform: uppercase;
    letter-spacing: 7px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}
.containerTxtSlide p span {
    font-family: var(--fontScript);
    text-transform: none;
    letter-spacing: 0;
    font-size: 5rem;
}
.containerTxtSlide {
    position: absolute;
    top: 40%; 
    width:100%;
}
.editMode .header{
    position:relative;
}
/* Header Fijo */
.header.hfixed:not(.editMode .header.hfixed){
    position: fixed;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);
    padding: 10px 30px;
    background: #fff;
}
.header .row:not(.editMode .header .row) {
    align-items: center;
}
a.nav-link {
  display: inline-block;
  position: relative;
  text-decoration: none;
}
a.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  border-radius: 5px;
  height: 0.05em;
  bottom: 0;
  left: 0;
  background: currentcolor;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
a.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.offcanvas a.nav-link:not(.sub-menu):hover::before {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  bottom: 0.3em;
  left: -1.2em;
  background-image: url('/dam/multiHotel-Roc-Hotels/home/logos/palm-tree-star-roc-hotels.webp'); /* tu imagen */
  background-size: cover;
  background-repeat: no-repeat;
}
/* ---- El submenu ---- */
.submenu {
    position: absolute;
    top: 100%;               /* justo debajo del enlace "Hoteles" */
    left: 8%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    min-width: 280px;        /* ancho cómodo para los nombres largos */
    padding: 12px 0;
    margin: 0;
    list-style: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 999;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    text-align: center;
}

.submenu li {
    margin: 0;
}

.submenu li a {
    display: block;
    font-size: 1rem;
    padding: 14px 20px;
    color: var(--colorFoam) !important;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease;
}

.submenu li a:hover {
    background: var(--colorPrimary);
    border-radius: 4px;
}

/* ==== MOSTRAR EL SUBMENU AL HACER HOVER ==== */
.navbar-menu > li:hover > .submenu {
    visibility: visible;
    opacity: 1;
}

.header.hfixed .group-languages-texts .btn-secondary.open-selector-language,
.header.hfixed  .open-selector-language span:after{
    color:var(--colorPrimary);
}
@media (max-width: 768px) {
    .header {
        padding: 10px 10px 0 10px;
    }
    .header > section > .container-fluid > .row > [class*="col"],
    .header > section > .container-fluid > .row > [class*="col"] > .container-fluid > .row > [class*="col"] {
        padding: 0;
    }
    [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
        background-color: transparent !important;
    }
    .person-login-text,.mybooking-content-text {
        display: none;
    }
    .containerTxtSlide p {
        font-family:var(--fontPrimary);
        font-size: 2rem !important;
        text-align: center;
        margin: auto;
        width: 100%;
    }
    .title-center {
        gap: 10px;
    }
    .header a.logo-navbar img {
        scale: 0.7;
    }
    .containerTxtSlide p span {
        font-size: 4rem;
        line-height: 4rem;
    }
}
/* 1 - Menu Hamburguesa */
.navbar-toggler-icon:not(.hfixed .navbar-toggler-icon) {
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23eee5bb' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    filter: none; /* quitar el filter anterior */
}
/* 2 - Links Menu */
.navbar-menu:not(.editMode .navbar-menu) {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 0;
}
.navbar-menu li a {
    color: var(--colorFoam);
    font-family: var(--fontPrimary);
    list-style: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    transition: font-size 0.3s ease;
}
.navbar-menu li a:hover {
    color: var(--colorFoam);
}

.navbar-menu li {
    list-style: none;
}
@media (max-width: 1400px) {
    .navbar-menu li a {
        font-size: 0.8rem;
    }
}
@media (max-width: 1250px) {
    .navbar-menu:not(.editMode .navbar-menu):not(.offcanvas-md.show .navbar-menu) {
        display: none;
    }
}
@media (max-width: 768px) {
    .group-languages-texts .btn-secondary.open-selector-language {
        color: var(--colorPrimary) !important;
        background: transparent !important;
    }
    .offcanvas-md {
        background-color: rgba(253, 244, 233, 0.7); /* color con 50% transparencia */
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
    }
    .navbar-menu {
        flex-direction: column !important;
        align-items: flex-start;
    }
    .navbar-menu li a {
        color: var(--colorPrimary);
        text-transform: none;
        font-size: 1.3rem;
    }
    .navbar-menu ul li a {
        font-size: 1rem;
    }
    .navbar-menu li {   
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .offcanvas-body ul {
        padding-left: 0 !important;
    }
    .navbar-menu ul {
        padding-left: 0.5rem !important;
    }
    .navbar-menu li a:hover {
        color: var(--colorPrimary);
    }
}
/* 3 - Selector Idioma */
.group-languages-texts .btn-secondary.open-selector-language {
    background: transparent;
    border: 0;
    color: var(--colorFoam);
    font-family:var(--fontPrimary);
    font-size:16px;
    font-weight:300;
    width: auto;
}
.open-selector-language span:after{
    position: absolute;
    top: 6px;
    right: 0;
    font-size: 8px;
    content: "\f078";
    font-family: 'FontAwesome';
    color:var(--colorFoam);
}
.dropdown.htt-language-selector {
    display: inline;
}
/* 4 - Loggin user */
.access-right>.row{
    float:right;
}
.access-left>.row{
    float:left;
}
.header .row > div:nth-child(3) .col {
    justify-content: center;
    display: flex;
    min-width:150px;
}
/* Contenedores flex con alineación centrada */
button.btn.personLogin-button-popover, 
button.btn.mybooking-button-popover {
    display: flex;
    align-items: center;
}

/* Textos principales */
.personLogin-content .person-login-text,
.mybooking-content .mybooking-content-text {
    color: var(--colorFoam);
    font-size: 16px;
    font-family: var(--fontPrimary);
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Pseudo-elementos antes de cada contenedor */
.personLogin-content:before,
.mybooking-content:before {
    position: relative;
    top: 2px;
    margin-right: 4px;
}

/* Textos pequeños dentro de los contenedores */
.personLogin-content span, 
.mybooking-content span {
    font-size: 12px;
    color: var(--colorYellow);
}

/* Íconos dentro de spans */
span.bi-cart-fill,
span.bi.bi-person-fill {
    margin-right: 5px;
    color: var(--colorFoam);
}
.header.hfixed .personLogin-content .person-login-text,
.header.hfixed .mybooking-content .mybooking-content-text{
    color:var(--colorYellow);
}
.header.hfixed span.bi-cart-fill,.header.hfixed span.bi.bi-person-fill{
    filter:none;
}
.accesos-header>.row{
    flex-wrap:nowrap;
}
.navbar-toggler{
    border:none;
    padding-left:0;
}
.hab-menu span {
    font-size: 15px;
    letter-spacing: 0.5px;
}

.top-menu>.row{
    display:flex;
    align-items:center;
}
.offcanvas {
    background-color: rgba(253, 244, 233, 0.7) !important; /* color con 50% transparencia */
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
}
.offcanvas .offcanvas-body {
    display: flex;
    align-items: center;
    justify-content: center;
}
.offcanvas .offcanvas-body ul.navbar-nav {
    flex-grow: 0 !important;
    padding-right: 0 !important;
}
.offcanvas .offcanvas-body::before{
    content: "";
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 63px;
    background-image: url("/dam/multiHotel-Roc-Hotels/home/logos/logo-corporativo-azul-roc-hotels.png");
    background-size: cover;      /* cubre la mitad sin deformar */
    background-position: center; /* centra la imagen */
    background-repeat: no-repeat;
}
.offcanvas-body .nav-item:not(:last-child):not(:has(> .sub-menu)) {
    margin-bottom: 10px;
}
.offcanvas-body .nav-item {
    text-align: left;
}
.offcanvas-body .nav-item a {
    font-size: 1.5rem;
    font-family: var(--fontPrimary);
    color: var(--colorPrimary) !important;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
}
.offcanvas-body .nav-item a.sub-menu {
    font-size: 0.8rem;
    font-family: var(--fontPrimary);
    color: var(--colorPrimary) !important;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin-left: 10px;
    padding: 0;
}
.offcanvas-body .navbar-nav {
    gap: 10px;
}
.offcanvas-header {
    position: absolute;
    top: 3%;
    right: 1%;
}
.cabecera-motor .swiper-button-next {
    padding-right: 20px;
    color: var(--colorFoam) !important;
}
.cabecera-motor .swiper-button-prev {
    padding-left: 20px;
    color: var(--colorFoam) !important;
}
.swiper-button-prev:after, .swiper-button-next:after {
    font-size: 32px;
}

.btn-ir-arriba {
  position: fixed;
  bottom: 60px;
  right: 60px;
  background-color: var(--colorPrimary);
  color: var(--colorSand);
  padding: 14px 17px;
  border-radius: 50%;
  text-decoration: none;
  font-size: 18px;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: flex;
}

.btn-ir-arriba:hover {
  background-color: var(--colorPrimary);
  transform: scale(1.1);
}
.btn-ir-arriba:hover i {
  color: var(--colorWhite);
}

@media (max-width: 767px) {
    .btn-ir-arriba {
    bottom: 20px;
    right: 20px;
    }
}
/* FIN - HEADER */
/* INICIO - VENTAJAS + BREADCRUMB */
/* Inicio Breadcrumb */
.breadcrumb {
    width: 97%;
    margin: auto;
}
a.link-ventajas {
    color: var(--colorBrown);
}
/* Ventajas  movil */
.ventajas-scroll-snap {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 1rem;
    justify-content: center;
}

.ventaja-slide {
    border: 1px solid rgba(165, 122, 104, 0.2);
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}
.ventaja-slide i,
.ventaja-slide p {
    color: var(--colorBrown);
}
.ventajas-title {
    color: var(--colorBrown);
}
.ventaja-slide i {
    margin-right: 0.5rem;
    margin-top: 0.2rem;
}
.ventajas-scroll-snap::-webkit-scrollbar {
    height: 4px; /* grosor horizontal */
}
.ventajas-wrapper {
    position: relative;
    margin-top: 20px;
    overflow: hidden;
}

.ventajas-wrapper * {
    position: relative;
    z-index: 1;
}
.ventajas-title {
    color: var(--colorBrown);
}
.ventajas-wrapper {
    background-color: var(--colorSand);
}
.grid-motor > .row > .col {
    padding: 0;
}
@media (max-width: 767px) {
    .ventajas-scroll-snap {
        margin-bottom: 40px;
    }
    .ventaja-slide {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }
    .ventaja-slide {
        background: var(--colorWhite);
    }
    .grid-motor {
        position: static;
    }
}
/* FIN - VENTAJAS */
/* START - HOME CORPORATIVA */
/* Welcome Section */
.h100 {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container-hero{
    height: 100dvh;
    overflow: hidden;
}
.container-hero video{
    width: 100%;
    object-fit: cover;
}
section.palm-tree,
section.palm-tree-left,
section.palm-tree-shadow {
    position: relative;
    z-index: 0;
}
section.palm-tree-left::before {
    content: "";
    position: absolute;
    width: 20%;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/dam/multiHotel-Roc-Hotels/home/logos/palm-tree-arena-roc-hotels.webp');
    background-size: contain;
    background-position: left top;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: -1;
}
section.palm-tree-shadow::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/dam/multiHotel-Roc-Hotels/home/palm-tree-shadow-roc-hotels.webp');
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: -1;
}
section.palm-tree::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    background-image: url("/dam/multiHotel-Roc-Hotels/destinos/palm-tree.2025-09-29-14-26-21.webp");
    background-size: contain;
    background-position: right top;
    background-repeat: no-repeat;
    z-index: -1;
    min-height: 300px;
    min-width: 300px;
}
.palm-tree-symbol {
    width: 150px;
}
@media (max-width: 768px) {
    section.palm-tree::before {
        content: "";
        position: absolute;
        bottom: 0; right: 0;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: -1;
        min-height: 150px;
        min-width: 150px;
        transform: scaleY(-1);
    }
}
/* INICIO - Flecha Arrow Down Hero Banner*/
.arrow-wrap {
    position: absolute;
    z-index: 2;
    color: var(--colorFoam);
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.text {
  display: block;
  font-family: var(--fontPrimary);
  font-size: 12px;
  color: var(--colorFoam);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
  letter-spacing: 1px;
}
@keyframes pulse {
  to {
    opacity: 1;
  }
}
/* FIN - Flecha Arrow Down Hero Banner*/
/* START - Rotated title 90 degrees effect + Blob images */
.rotated-title{
    text-transform: uppercase;
    position: absolute;
    top: 5%;
    left: 5%;
}
/* variantes "rotated" */
p.rotated-title {
    font-family: var(--fontSecondary);
    display: flex;
    align-items: flex-start;
    gap: 0.1em;
    font-size: var(--fs-h1-rot);
    line-height: 0.9;
}

/* spans verticales */
p.rotated-title span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.blob{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}
.blob > a > img,
.blob > img {
/*    width: clamp(100px, min(40dvh, 40dvw), 500px);
    aspect-ratio: 4/3;
    border-radius: 100% 30% 60% 70% / 50% 40% 70% 70%;
    object-fit: cover;*/
  height: auto;
  object-fit: cover;
    aspect-ratio: 4/3;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024"><path fill="white" d="M280.57,125.04L108.79,285.52c-153.7,135.62-88.18,384.96-86.26,440.67c0.21,6.15,1,12.27,2.29,18.29c25.65,119.13,64.2,182.5,192.46,210.09c9.55,2.05,59.86,4.62,69.59,5.51l310.14,28.39c107.76,16.51,280.83-51.18,370.69-108.49l119.8-79.11c171.78-131.1,226.03-226.03,151.44-452.06l-51.99-113.02C1134.06,130.86,1036.34,53.63,911.2,45.93L529.2,34.63C434.44,28.8,348.65,63.94,280.57,125.04z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;

  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024"><path fill="white" d="M280.57,125.04L108.79,285.52c-153.7,135.62-88.18,384.96-86.26,440.67c0.21,6.15,1,12.27,2.29,18.29c25.65,119.13,64.2,182.5,192.46,210.09c9.55,2.05,59.86,4.62,69.59,5.51l310.14,28.39c107.76,16.51,280.83-51.18,370.69-108.49l119.8-79.11c171.78-131.1,226.03-226.03,151.44-452.06l-51.99-113.02C1134.06,130.86,1036.34,53.63,911.2,45.93L529.2,34.63C434.44,28.8,348.65,63.94,280.57,125.04z"/></svg>');
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
}
/* END - Rotated title 90 degrees effect + Blob images */
/* Swipper Hoteles Home corporativa */
.hotels-section .swiper-button-prev,
.hotels-section .swiper-button-next {
    color: var(--colorSand);
}
.hotel-title {
    display: block;
    text-transform: uppercase;
}
.swiper-logos-hotels .swiper-swiper-pagination-bullet-active {
    background: var(--colorSand) !important;
}
.swiper-logos-hotels .swiper-scrollbar {
    display: none;
}
img.palm-tree-star-size {
    width: 30px;
}
/* Bullet activo */
#custom-pagination .bullet.active {
    background-color: #039158;
}
/* INICIO: Nuevo mapa */
.hotels-map-section {
    overflow: hidden;
    position: relative;

}
body:not(.editMode) .hotels-map-section > .position-absolute-map {
    position: absolute;
    padding: 0;
}
.bullets--wrapper {
  position: relative;
  margin: auto;
  max-width: 100%;
  font-family: 'Maven Pro', sans-srif;
  font-weight: 500;
}

.bullets--figure {
  width: 100%;
}

.bullet {
  position: absolute;
  display: block;
}

.bullet {
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--colorPrimary);
  transition: all cubic-bezier(.8,0,.2,1) .4s;
}

.bullet::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  z-index: 2;
  transition: opacity .6s;
  animation: pulse 1.5s cubic-bezier(.8,0,.2,1) 0s infinite;
}

.bullet:hover .bullet {
  transform: scale(.6);
}

.bullet:hover .bullet::after {
  opacity: 0;
}

@keyframes pulse {
  0% {transform: scale(0.4);}
  33% {transform: scale(1);}
  66% {transform: scale(0.4);}
  100% {transform: scale(0.4);}
}

.bullet-01 {
  top: 72%;
  right: 32%;
}

.bullet-02 {
  top: 77%;
  right: 26%;
}

.bullet-03 {
  top: 70%;
  right: 20%;
}
@media screen and (max-width: 991px) {
    .position-absolute-map{
        position: relative !important;
    }
    .h100.hotels-map-section {
        min-height: auto;
    }
}
@media screen and (max-width: 640px) {
    .bullet {
        width: 20px;
        height: 20px;
    }
    .hotels-map-section > .container-fluid.position-absolute {
        padding: 0;
        bottom: 0;
    }
}

@media screen and (max-width: 420px) {
  .bullet {
    width: 30px;
    height: 30px;
  }
}

@media screen and (max-width: 320px) {
  .bullet {
    width: 20px;
    height: 20px;
  }
  .bullet::after {
    width: 5px;
    height: 5px;
  }
}
/* Opcional: si quieres que el contenido dentro de la columna también llene el alto */
.hotels-section > .container-fluid .row > .col-12 > .swiper,
.hotels-section > .container-fluid .row > .col-12 > .htt-text-image {
  flex: 1 1 auto;
  height: 100%;
}
.swiper-hotels {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.swiper-hoteles .swiper-wrapper {
    margin-bottom: 0;
}
.swiper-hotels-title {
    position: absolute;
    display: flex;
    flex-direction: column;
}
.swiper-hotels-stars {
    display: flex;
    justify-content: center;
    gap: 20px;
    pointer-events: none;
}
.swiper-hotels-link {
    color: white;
    text-decoration: none;
}
.swiper-hotels-link img {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.swiper-hotels-link:hover img {
  transform: scale(1.05);
  opacity: 0.8;
}
a.hotel-link {
      display: inline-block;
    color: var(--colorSand);
    text-underline-offset: 4px;
    transition: transform 0.3s ease;
}
a.hotel-link > img.img-location {
    width: 21px !important;
    height: 21px !important;
    margin-right: 6px;
}
a.hotel-link:hover {
  transform: scale(1.03);
}
a.hotel-link img {
  transition: transform 0.3s ease;
}
a.hotel-link:hover img {
  transform: scale(1.03);
}
@media (max-width: 768px) {
    a.hotel-link img {
      width: 70%;
    }
    #custom-pagination {
        background-position: center;
    }
    #custom-pagination .bullet-01 {
        top: 61%;
    }
    #custom-pagination .bullet-02 {
        top: 63%;
    }
    #custom-pagination .bullet-03 {
        top: 61%;
    }
}
/* END - HOME CORPORATIVA */
/* START - EXPERIENCIAS + DESTINO CORPORATIVA */
h1, h2, h3 {
  font-family: var(--fontPrimary);
  line-height: 1;
  font-weight: 100;
  text-wrap: balance;
}
h1.fontScript {
    font-size: 6rem;
    line-height: 3rem;
}
h2.fontScript {
    font-size: 4rem;
    line-height: 3rem;
}
.pretitle {
  font-family: var(--fontScript);
  line-height: 1;
  font-weight: 100;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.pretitle { font-size: var(--fs-pretitle); }
/* Reset padding */
.service-section > .container-fluid,
.destination-section > .container-fluid,
.experience-section > .container-fluid {
    padding: 0;
}
section .container-fluid .row .col .tab-content .container-fluid .row .col .container-fluid .row .col-12:not(footer .col-12),
section > .container-fluid > .row > .col-12:not(footer .col-12) {
    align-content: center;
}

/* Imagenes con Border radius */
.service-section > .container-fluid > .row > .col-12:first-child > .htt-text-image > img,
.destination-section > .container-fluid > .row > .col-12:first-child > .htt-text-image > img,
.experience-section .tab-content .container-fluid .row .col-12:first-of-type .htt-text-image img {
    border-top-right-radius: 300px;
    border-bottom-right-radius: 300px;
    margin-top: 40px;
    margin-right: 40px;
}
.service-section > .container-fluid > .row > .col-12:last-child > .htt-text-image > img,
.destination-section > .container-fluid > .row > .col-12:last-child > .htt-text-image > img,
.experience-section .tab-content .container-fluid .row .col-12:last-child .htt-text-image img {
    border-top-left-radius: 300px;
    border-bottom-left-radius: 300px;
    margin-top: 40px;
    margin-left: 40px;
}
.li-services {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas iguales */
    gap: 10px 30px; /* separación filas / columnas */
    list-style: disc inside; /* mantiene los puntos */
    padding: 0;
    margin: 0;
}
.services-flex {
    display: flex;
    flex-direction: column; /* móvil por defecto */
    width: 80%;
    gap: 4px;
}
.services-flex ul {
    padding: 0;
}
.services-flex li {
    text-align: left;
    list-style-position: inside; /* el bullet se coloca dentro del contenido */
    padding-left: 0;             /* quita padding a la izquierda del ul */
    margin-left: 0;
}
.swiper-mobile .col.swiper-slide.swiper-slide-prev {
    margin: 0 !important;
}
@media (min-width: 992px) {
    .services-flex {
        flex-direction: row; /* escritorio: dos columnas */
    }

    .services-box {
        width: 50%;
    }
}
@media (max-width: 1024px) {
    .service-section > .container-fluid > .row > .col-12:first-child > .htt-text-image > img,
    .destination-section > .container-fluid > .row > .col-12:first-child > .htt-text-image > img,
    .experience-section .tab-content .container-fluid .row .col-12:first-of-type .htt-text-image img {
        margin-top: 40px;
        width: 90%;
    }
    .service-section > .container-fluid > .row > .col-12:last-child > .htt-text-image > img,
    .destination-section > .container-fluid > .row > .col-12:last-child > .htt-text-image > img,
    .experience-section .tab-content .container-fluid .row .col-12:last-child .htt-text-image img {
        margin-top: 40px;
        width: 90%;
    }
}
@media (max-width: 767px) {
    h1.fontScript {
        font-size: 4rem;
        line-height: 3rem;
        text-wrap: balance;
    }
    h2 {
        text-wrap: balance;
    }
    h2.fontScript {
        font-size: 3rem !important;
    }
    .rotated-text {
        width: 70%;
    }
    .rotated-title {
        top: 2%;
        left: 2%;
    }
    p.rotated-title {
        color: var(--colorBrown);
        font-size: 2.5rem;
        line-height: 0.9;
        opacity: 0.3;
        gap: 0.1em;
    }
    section.h100.position-relative.destination-section h2,
    section.h100.position-relative.room-section p.fontScript.pretitle.center,
    section.h100.position-relative.offer-section p.fontScript.pretitle.center,
    section.h100.position-relative.welcome-section p.fontScript.pretitle.center,
    section.h100.position-relative.service-section h2 {
        margin-top: 60px;
    }
    .service-section,
    .destination-section,
    .experience-section {
        gap: 40px;
    }
    .blob > img {
        width: clamp(100px, min(70dvh, 70dvw), 500px) !important;
    }
    section.h100.position-relative.welcome-section h1, section.h100.position-relative.service-section h2 {
        font-size: 2rem;
    }
    .destinantion-list > .row {
        display: flex;
        gap: 40px;
        margin-bottom: 40px;
    } 
}
/* Contenedor de experiencias */
.swiper-slide .experience-card {
    position: relative;
    border-radius: 10px;
    cursor: pointer;
    min-height: 200px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.experience-card img {
    min-height: 200px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.experience-card a:not(h3 a)::after  {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
    z-index: 1;
    border-radius: var(--borderRadius);
}
.experience-card:hover img {
  transform: scale(1.1);
  border-radius: var(--borderRadius);
}
.experience-card h3 {
    position: absolute;
    width: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.experience-card a {
    text-transform: uppercase;
    font-size: 1.5rem !important;
    margin: 0;
    color: white;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    border-radius: var(--borderRadius);
}
.contact-card {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--borderRadius);
}
.contact-card h3 {
    font-size: 1.5rem;
}

.contact-card img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* Oscurecer y hacer zoom al hover */
.contact-card:hover img {
    filter: brightness(60%);
    transform: scale(1.1);
}

.contact-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-size: 18px;
    color: white;
    text-align: center;
    width: 90%;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* h3 centrado con transición suave */
.contact-content h3 {
    margin: 0;
    transition: transform 0.3s ease;
}

/* p invisible al inicio, pero con espacio reservado */
.contact-content p {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin: 0;
    height: 0;
    overflow: hidden;
}

/* Hover: mostrar p y mover suavemente el h3 */
.contact-card:hover .contact-content p {
    opacity: 1;
    transform: translateY(0);
    height: auto;
}

.contact-card:hover .contact-content h3 {
    transform: translateY(-5px);
}
  /* Móvil: Swiper */
  @media (max-width: 768px) {
    .swiper.experiences .swiper-slide {
      width: 70% !important;
      margin: 0 auto 20px;
      aspect-ratio: 1/1;
    }
    .experiences > .swiper-wrapper {
        display: flex !important; /* Swiper necesita esto */
        width: 100%;
        gap: 0;
        margin-left: 15vw;
    }
    .no-padding,
    .no-padding > .row > .col {
        padding: 0;
    }
  }
/* END - EXPERIENCIAS CORPORATIVA */
/* START - FICHA HOTEL */
a.button-outline-brown[onclick] {
    text-transform: uppercase;
    letter-spacing: 1px;
}
.link-fancy i {
    font-size: 1rem;
}
/* 1: Nav Tabs */
.menu-hotel:not(.editMode .menu-hotel) {
    position: sticky;
    top: 0;
    z-index: 10;
}
section.menu-hotel  > .container-fluid {
    padding: 0;
}
.nav-hotel-menu__list,
.nav-tabs {
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
    padding: 0;
    padding-top: 20px;
    border-bottom: 1px solid var(--colorSand);
    background-color: white;
}
.sticky nav {
    position: sticky;
    top: 0;
}
.nav-hotel-menu__list{
    padding-bottom: 14px;
}
.nav-tabs{
    margin-bottom: 20px;
}
.nav-hotel-menu__list li a,
.nav-tabs .nav-link {
    color: var(--colorBrown);
    font-family: var(--fontPrimary);
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    text-decoration: none;
    transition: font-size 0.3s ease;
}
.nav-hotel-menu__list li {
    list-style: none;
}
.nav-hotel-menu__list li a.active,
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--colorBrown);
    border: none;
    border-bottom: 2px solid var(--colorBrown);
    padding: 16px 0;
}
/* 2: Galeria */
.fontScript.subtitle {
    font-size: var(--fs-h1-rot-script);
    line-height: 4rem;
}
.lightbox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* separación de 20px entre imágenes */
}
.square-lightbox-4 .image {
    flex: 1 1 calc(25% - 15px) !important;
    aspect-ratio: 1/1;
}
.square-lightbox-4 .image:nth-child(n+5) {
    display: none;
}
/* Cada bloque de imagen dentro de la galería */
.lightbox .image {
    flex: 1 1 calc(25% - 15px); /* ancho adaptado considerando el gap */
    box-sizing: border-box;
}
/* Imágenes dentro de cada bloque */
.lightbox .image img {
    width: 100%;
    display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.container-reveal {
    font-family: var(--fontScript-2);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 30px;
    font-size: 8rem;
    line-height: 1;
}
.reveal {
  margin: 0 20px;
  overflow: hidden;
}
.reveal__content {
    transform: translateY(100%);
    animation: reveal 2s cubic-bezier(1, 0, 0.3, 0.9) forwards;
}
.reveal:nth-child(2) .reveal__content {
    animation-delay: 1s;
}
.reveal:nth-child(3) .reveal__content {
    animation-delay: 2s;
}
/* Start - Habitaciones hotel */
.rooms-section .title-center{
    gap: 10px;
}
.room-card {
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
}
.room-card a {
    color: var(--colorPrimary);
    text-decoration: none;
    position: relative;
}
.room-card .room-card-text h3 a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  border-radius: 5px;
  height: 0.05em;
  bottom: 0;
  left: 0;
  background: currentColor;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.room-card .room-card-text h3 a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.rooms-section .price_from_container {
    position: absolute;
    bottom: 30px;
    left: 30px;
}
.rooms-section .price_from_container a {
    color: var(--colorPrimary);
}
.price_from_container {
    text-transform: uppercase;
}

.room-card-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.exp-grid-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 70%;
    margin: 0 auto;
}
.exp-grid-info-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 70%;
    margin: 0 auto;
}

.exp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: sans-serif;
    font-size: 14px;
}

.exp-item i {
    font-size: 20px;
    color: var(--colorPrimary);
}
.swiper-pagination-bullet-active{
    background: var(--colorPrimary) !important;
}
.swiper-button-prev,
.swiper-button-next {
    color: var(--colorPrimary) !important;
}
.swiper-button-prev {
    left: 0 !important;
}
.swiper-button-next {
    right: 0 !important;
}
.pop-room.fancybox__content{
    padding: 64px;
}

.custom-container-services::before {
    content: "services"; /* texto normal */
    font-family: var(--fontSecondary);
    font-size: 2rem;
    color: var(--colorPrimary);
    text-transform: uppercase;
    position: absolute;
    top: 4%;
    left: 10%;       
}

.custom-container-services::after {
    content: "room &"; /* palabra vertical */
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--fontSecondary);
    font-size: 2rem;
    color: var(--colorPrimary);
    text-transform: uppercase;
    position: absolute;
    top: 3%;
    left: 4%;       
}
@media (max-width: 1300px) {
    .nav-hotel-menu__list li a {
        font-size: 0.9rem !important;
    }
}
@media (max-width: 933px) {
    section .container-fluid.w100, section .container-fluid.w55, section .container-fluid.w50, section .container-fluid.w60, section .container-fluid.w70, section .container-fluid.w80 {
        width: 90%;
        transition: width .5s 
ease;
    }
}
@media (max-width: 768px) {
    .lightbox .image {
        flex: 1 1 calc(50% - 15px); /* ancho adaptado considerando el gap */
        box-sizing: border-box;
    }
    .lightbox .image:nth-child(n+3) {
        display: none;
    }
    .swiper-hotels-stars i {
        font-size: 1rem;
    }
    #custom-pagination {
        min-height: 300px;
        height: 100%;
    }
    p {
        font-size: 1rem;
    }
    .fontScript.subtitle {
        font-size: var(--fs-h1);
        line-height: 2rem;
    }
    .container-reveal {
        font-size: 6rem;
        flex-direction: column;
        padding: 0 !important;
    }
    .room-card {
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
    }
    .price_from_container {
        text-align: center;
        margin-top: 20px;
    }
}
.custom-grid-services {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.custom-col {
    display: grid;
    grid-template-columns: 1fr 9fr;
    align-items: center;
    text-align: left;
    width: 100%;
    gap: 10px;
}
.custom-col i {
    text-align: center;
}
/* END - FICHA HOTEL */
/* START - CONTACTO */
.contact-section.bg-contact label {
    color: var(--colorWhite);
}
.contact-section.bg-contact p:not(label > p),
.contact-section.bg-contact h2 {
    color: var(--colorFoam);
}
.contact-section.bg-contact input[type="submit"] {
    color: var(--colorWhite);
    border-color: var(--colorWhite);
}
.contact-section.bg-contact input[type="submit"]:hover {
    border-color: var(--colorPrimary);
}
.contact-section.bg-contact input[type="text"],
.contact-section.bg-contact textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid white;
    border-radius: 0;
}
.contact-section .row > [class*="col-"] > .htt-text-image,
.contact-section .row > [class*="col-"] > .container-fluid {
    height: 100%;
    align-content: center;
}

/* Estructura del formulario */
fieldset {
    border: none;
    padding: 0;
}
.swiper-10-50 {
    padding: 10px 50px 50px 50px !important;
}
.swiper-50 {
    padding: 50px !important;
}
.swiper-50 .swiper-wrapper {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    align-items: flex-start;
}
label span {
    font-size: 0.8rem;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}
dfn[title="required"] {
    font-style: normal;
    color: red;
}
/* Campos de entrada */
.contact-section input[type="text"],
.contact-section textarea {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: none;
    transition: border 0.3s;
}
.contact-section input[type="text"]:focus,
.contact-section textarea:focus {
    border-color:var(--colorBlue);
    outline: none;
}
/* Textarea específico */
.contact-section textarea {
    resize: vertical;
    min-height: 100px;
}
/* Checkbox */
.contact-section .form-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}
.contact-section .form-item input[type="checkbox"] {
    width: auto;
    margin: 0;
}
/* Botón de envío */
.button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}
.contact-section input[type="submit"] {
    background-color: transparent;
    color: var(--colorPrimary);
    font-weight: 400;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px;
    cursor: pointer;
    opacity: 1;
    border-width: 1px;
    border-style: solid;
    border-color: var(--colorPrimary);
    border-image: initial;
    padding: 0.6em 1.2em;
    border-radius: 50px;
    transition: 0.3s;
}
.contact-section input[type="submit"]:hover {
    color: white;
    padding-left: 96px;
    padding-right: 96px;
    background-color: var(--colorPrimary);
}
.contact-wrapper {
  position: relative;
  z-index: 1;
  padding: 60px;
}

.contact-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* Safari */
  z-index: -1; /* coloca el blur detrás del contenido del formulario */
}
.contact-logo {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 210px;
}
.contact-logo {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 210px;
}
/* END - CONTACTO */
/* START - FAQ */
.accordion-item,
.accordion-button {
    background-color: transparent !important;
}
.accordion-button:focus {
    border-color: var(--colorPrimary) !important;
    color: var(--colorPrimary) !important;
    box-shadow: 0 0 0 0.25rem rgba(96, 121, 149, 0.4) !important;
}
/* END - FAQ */
@keyframes reveal {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
@media (max-width: 767px) {
    h2 {
        font-size: 1.5rem;
    }
    .rooms-section h2 {
        font-size: 2rem;
    }
    .h100 {
        height: 100%;
    }
    .contact-wrapper {
        padding: 20px;
    }
    .contact-section .position-relative.h-100 {
        height: 400px !important;
        margin-bottom: 20px;
    }
    .contact-logo {
        width: 200px;
        height: 110px;
    }
    .personLogin-content, .mybooking-content {
        padding: 5px;
    }
    .swiper-hotels-stars i {
        font-size: 1rem;
    }
    #custom-pagination {
        min-height: 300px;
        height: 100%;
    }
    p {
        font-size: 1rem;
    }
    .gallery-section h2, .service-section h2, .experience-section h3 {
        font-size: 1.5rem;
        line-height: 2.3rem;
    }
    p.w80, p.w70, p.w60, p.w50 {
        width: 95% !important;
    }

    /* Ajustes padd + margins + width movil */
    .title-center.paddTop60,
    .title-center.paddTop120,
    .container-fluid.paddTop60,
    .container-fluid.paddTop120,
    .container-fluid.paddTop220 {
        padding-top: 30px;
    }
    .title-center.mTop60,
    .title-center.mTop120,
    .container-fluid.mTop60,
    .container-fluid.mTop120,
    .container-fluid.mTop220 {
        margin-top: 30px;
    }
    .title-center.mBT60,
    .title-center.mBT120,
    .container-fluid.mBT60,
    .container-fluid.mBT120,
    .container-fluid.mBT220 {
        margin-bottom: 30px;
    }
    .htt-text-image .w80,
    .htt-text-image .w70, 
    .htt-text-image .w60 {
        width: 95%;
    }
    img.img-responsive.logo {
        width: 40%;
        border-radius: 0 !important;
    }
    a.hotel-link img {
        width: 75% !important;
    }
}