/* VARIABLES */
:root {
    --fontPrimary: "Poppins", sans-serif;
    --colorBlue:#0073A8;
    --colorBlueDark: #005f8f; 
    --colorPrimary:#3E3D3D;
    --colorWhite:#FFFFFF;
    --colorGrey:#D6D6D6;
    --colorYellow: #EED531;
    --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);
    --hero-gradient-contrast: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%, 
    rgba(0, 0, 0, 0.25) 35%, 
    rgba(0, 0, 0, 0.15) 60%, 
    rgba(0, 0, 0, 0.04) 100%
  );
}

/* ESTILOS GENERICOS */
html{
    overflow-x:hidden;
}

.center{
    text-align: center;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.fontPrimary{
    font-family: var(--fontPrimary);
}
.fontSecondary{
    font-family: var(--fontSecondary);
}
.colorPrimary{
    color:var(--colorPrimary);
}
.colorSecondary{
    color:var(--colorSecondary);
}
.colorYellow {
    color: var(--colorYellow);
}
.colorWhite {
    color: var(--colorWhite);
}
a{
    text-decoration:none;
    color:var(--colorPrimary);
}
a:hover {
    color:var(--colorSecondary);
}
.img-responsive{
    width:100%;
    object-fit: cover;
    height: auto;
    filter: saturate(0.8);
}
/* 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;
}
.mBT20{
    margin-bottom:20px;
}
.mBT30{
    margin-bottom:30px;
}
.mBT40{
    margin-bottom: 40px;
}
.mBT60{
    margin-bottom: 60px;
}
.mBT120{
    margin-bottom: 120px;
}
.mBT240{
    margin-bottom: 240px;
}
.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;
}
.paddBT120{
    padding-bottom: 120px;
}
.paddTop200{
    padding-top:200px;
}
.paddBT200{
    padding-bottom:200px;
}
/* Width */
.w40{
    width:40%;
}
.w50{
    width:50%;
}
.w60{
    width:60%;
}
.w70{
    width:70%;
}
.w80{
    width:80%;
}
.w90{
    width:90%;
}
.w100{
    width:100%;
}
.uppercase{
    text-transform: uppercase;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#buttonShowSearcherScroll{
   top: 10% !important;
}


/* Body & Headings */
body, .data-protection table {
    font-family:var(--fontPrimary);
    font-size:16px;
    font-weight:400;
    position:relative;
    overflow-x:hidden;
    color:var(--colorPrimary);
}

p{
   margin-bottom:0;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    margin-bottom: 20px;
    text-wrap: balance;
}

h1, p.title{
    font-size:42px;
    font-weight:500;
    line-height: 42px;
    font-family: var(--fontPrimary);
    text-wrap: nowrap;
}
h2{
    font-size:30px;
    font-weight:500;
    line-height:normal;
    font-family: var(--fontPrimary);
    text-wrap: nowrap;
}
h3{
    font-size:24px;
    font-weight:500;
    line-height: normal;
    font-family: var(--fontPrimary);
}
.subtitle {
    font-size: 24px;
    font-weight:600;
    line-height: normal;
}

.container, .container-fluid, .row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.editMode .header{
    position:relative;
}
.header.hfixed:not(.editMode .header.hfixed){
    position: fixed;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);
    padding: 10px 30px;
    background: #fff;
}
.header.hfixed .logo-navbar{
    filter:none;
}
.header.hfixed .logo-navbar img{
    transform:scale(.8);
}
.header.hfixed .group-languages-texts .btn-secondary.open-selector-language,
.header.hfixed  .open-selector-language span:after{
    color:var(--colorPrimary);
}
/* INICIO - NAV CUSTOM DESKTOP */
.nav-bar-log .col {
    display: -webkit-box;        
    display: -ms-flexbox;        
    display: flex;   
    align-items: center;
}
.offcanvas-body {
    display: -webkit-box;        
    display: -ms-flexbox;        
    display: flex;   
    align-items: center;
}
.navbar-nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	gap: 10px;
}
.navbar-nav section {
    display: -webkit-box;        
    display: -ms-flexbox;        
    display: flex;   
    flex-direction: column;
    gap: 30px;
}

.navbar-nav .nav-item {
	position: relative;
    display: -webkit-box;        
    display: -ms-flexbox;        
    display: flex;
    -webkit-box-pack: center;   
    -ms-flex-pack: center;      
    justify-content: center; 
    line-height: normal;
}

.navbar-nav .nav-link {
	font-family: 'Poppins', sans-serif;
	font-size: 28px;
	font-weight: bold;
	color: #000;
	position: relative;
	z-index: 2;
	border: none;
	background: none;
	padding: 0;
}

.navbar-nav .nav-link:hover {
	color: #000;
}

.navbar-nav .nav-link span a {
	text-decoration: none;
	color: inherit;
	position: relative;
	display: inline-block;
}

.navbar-nav .nav-link span a::before {
	content: '';
	width: 0%;
	height: 15px;
	background: var(--colorBlue);
	position: absolute;
	top: 32px;
	left: -5px;
	z-index: -1;
	transition: all 600ms cubic-bezier(1, 0, 0, 1);
}

.navbar-nav .nav-link:hover span a::before {
	width: 100%;
}
/* FIN - NAV CUSTOM DESKTOP */
/* INICIO - HEADER */
.header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:transparent;
    z-index:4;
    padding: 15px 20px 0 20px;
}
.header .row {
    align-items: center;
}
/* 1 - Menu Hamburguesa */

.navbar-toggler-icon:not(.hfixed .navbar-toggler-icon){
    filter:brightness(0) invert(1);
}
/* 2 - Selector Idioma */
.group-languages-texts .btn-secondary.open-selector-language {
    background: transparent;
    border: 0;
    color: var(--colorWhite);
    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(--colorWhite);
}
.dropdown.htt-language-selector {
    display: inline;
}
.htt-language-selector .dropdown-item {
    padding:0 !important;
}

/* ===== MENÚ MOBILE ===== */

.menu-mobile{
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}

/* Quitar bullets + reset */
.menu-mobile__list,
.submenu{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Items */
.menu-mobile__item{
  font-size: 18px;
  padding-top: 12px;
}

/* Base para links y botón toggle */
.menu-mobile .menu-item,
.menu-item__toggle{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  font-family: inherit;
  font-size: 18px;
  line-height: 1.3;

  padding: 10px 12px;
  min-height: 44px;

  border-radius: 4px;
  background: transparent;
  border: 0;

  color: inherit;
  text-decoration: none;
  cursor: pointer;

  transition: color .2s ease, background-color .2s ease;
}

/* Indicador flecha */
.menu-item__toggle::after{
  content: "▾";
  margin-left: 12px;
  font-size: 18px;
  transition: transform .2s ease;
}

/* Flecha rota cuando está abierto */
.menu-item__toggle[aria-expanded="true"]::after{
  transform: rotate(180deg);
}

/* Hover */
.menu-mobile .menu-item:hover,
.menu-item__toggle:hover{
  color: var(--colorBlue);
  background-color: rgba(0, 0, 0, 0.06);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Focus visible */
.menu-mobile .menu-item:focus-visible,
.menu-item__toggle:focus-visible{
  outline: 3px solid var(--colorBlue);
  outline-offset: 3px;
  background-color: rgba(0, 0, 0, 0.08);
}

/* Submenú */
.submenu{
  margin-top: 8px;
  padding-left: 16px;
}

.submenu__li{
  padding-top: 8px;
}

.submenu .submenu__item{
  font-size: 16px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .menu-mobile .menu-item,
  .menu-item__toggle{
    transition: none;
  }
}
/* Visualiza en mobiles pequeños */
@media (max-width: 360px), (max-height: 640px) {
  .menu-mobile{
    margin-top: 0;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
}



/* 3 - Logo Hotel */
.logo-navbar {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center; 
    image-rendering: auto;
    filter:brightness(0) invert(1);
}

/* 4 - Loggin user */
.access-right>.row{
    float:right;
}
.access-left>.row{
    float:left;
}
.access-right>.row>div{
    flex: 1;
    min-width: max-content;
}
.header .row > div:nth-child(3) .col {
    justify-content: center;
    display: flex;
    
}
.personLogin-content, .mybooking-content{
    display:flex;
    align-items:center;
}
.personLogin-content .person-login-text,
.mybooking-content .mybooking-content-text{
    color:var(--colorWhite);
    font-size:14px;
}
.personLogin-content:before {
    position: relative;
    top: 2px;
    margin-right: 4px;
}
.mybooking-content:before{
    position: relative;
    top: 2px;
    margin-right: 4px;
}
.personLogin-content, .mybooking-content{
    border: 1px solid white;
    border-radius: 20px;
    padding: 3px 16px;
}
.personLogin-content span, .mybooking-content span{
    font-size:18px;
    color:var(--colorPrimary);
}
span.bi-cart-fill, span.bi.bi-person-fill{
    margin-right:5px;
    filter:brightness(0) invert(1);
}
.header.hfixed .personLogin-content, .header.hfixed  .mybooking-content{
    border:1px solid var(--colorPrimary);
}
.header.hfixed .personLogin-content .person-login-text,
.header.hfixed .mybooking-content .mybooking-content-text{
    color:var(--colorPrimary);
}
.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;
}

/** FIN - HEADER **/

/* INICIO - HERO BANNER CABECERA */
/* Motor */
.cabecera-motor{
  position: relative;
}

.grid-motor{
  position: absolute;
  bottom: -25px;
  width: 100%;
  z-index: 3;
}

/* Hero */
.container-hero{
  position: relative;
  height: 70vh;
  min-height: 70vh;
  width: 100%;
  overflow: hidden;
}

/* Imagen */
.container-hero img.img-responsive{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Overlay REAL */
.hero-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hero-gradient-contrast);
  z-index: 1;
  pointer-events: none;
}

/* Texto */
.containerTxtSlide{
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  z-index: 2;
}

.containerTxtSlide p{
  font-size: 52px;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
}

/* Responsive */
@media (max-width: 768px){
  .containerTxtSlide p{
    font-size: 32px;
  }
}
/** FIN - HERO BANNER CABECERA **/

/* INICIO - HOME CORPORATIVA*/

/*Links & buttons*/

.link-more{
  /* Comportamiento */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;                

  /* Tamaño y forma */
  padding: 10px clamp(18px, 6vw, 64px);
  border-radius: 999px;

  /* Texto */
  white-space: nowrap;              /* NO se parte */
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.4px;

  /* Colores  */
  color: var(--colorWhite);
  background-color: transparent;
  border: 1px solid currentColor;

  /* Interacción */
  cursor: pointer;

  transition:
    background-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

/* Hover */
.link-more:hover{
    color: var(--colorWhite);
    background: var(--colorBlue);
    border: 1px solid var(--colorBlue);
}

/* Focus visible (teclado) */
.link-more:focus-visible{
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* Active (feedback táctil) */
.link-more:active{
  transform: translateY(1px);
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .link-more{
    transition: none;
  }
}

.link-more--inverse{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;                 /* target táctil WCAG */

  padding: 10px clamp(18px, 6vw, 64px);
  border-radius: 999px;

  white-space: nowrap;
  text-align: center;
  text-decoration: none;

  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.4px;

  color: var(--colorPrimary);     
  background-color: transparent;
  border: 1px solid var(--colorPrimary);

  cursor: pointer;

  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

/* Hover */
.link-more--inverse:hover{
  color: var(--colorBlue);          
  border-color: var(--colorBlue);
  background-color: rgba(0,115,168,0.08);
}

/* Focus visible (teclado) */
.link-more--inverse:focus-visible{
  outline: 3px solid var(--colorBlue);
  outline-offset: 3px;

  color: var(--colorBlue);
  border-color: var(--colorBlue);
}

/* Active */
.link-more--inverse:active{
  transform: translateY(1px);
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .link-more--inverse{
    transition: none;
  }
}

/* 1 - Welcome */
.title-between {
    display: -webkit-box; 
    display: -ms-flexbox;  
    display: flex;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.title-center {
    display: -webkit-box; 
    display: -ms-flexbox;  
    display: flex;

    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
}
@media (max-width: 768px) {
    .title-between {
        display: block;
        text-align: left;
    }
    .title-center {
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .title-between > .w70,
    .title-between > .w60,
    .title-between > .w50 {
        width: 100%;
    }
    .title-center .w80,
    .title-center .w70,
    .title-center .w60 {
        width: 100%;
        text-align: left;
    }
}

/*CARDS HOTELS- Home*/
.hotel-card{
  width: 100%;
  max-width: 450px;
}

/* SOLO la zona de imagen */
.hotel-card__media{
  position: relative;
  width: 100%;
  overflow: hidden; /* recorta la imagen si hiciera falta */
}

/* Imagen */
.hotel-card__image{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* solo tiene efecto real si hay alto fijo */
}

/* Contenido (textos) */
.hotel-card__content{
  width: 100%;
}

/* Botón */
.hotel-card__button{
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);

  padding: 10px 28px;
  border-radius: 999px;
  border: 2px solid #ffffff;

  background-color: rgba(0, 0, 0, 0.25);
  color: #ffffff;

  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.hotel-card__button:hover{
  background-color: #ffffff;
  color: #000000;
}

.hotel-card__button:focus-visible{
  outline: 3px solid #ffffff;
  outline-offset: 4px;
  background-color: #ffffff;
  color: #000000;
}

/**END CARDS HOTELS-Home **/

/*CARDS OFFERS-Home */

.promo-card {
  position: relative;
  width: 100%;
  max-width: 734px;
  overflow: hidden;
}

/* Imagen */
.promo-card__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Overlay */
.promo-card__overlay {
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom:32px;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.45)
  );
}

/* Título */
.promo-card__title {
  margin: 0;
  padding: 0 16px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

/** END CARDS OFFERS-Home **/

/*CTA CARDS */

button.btn-book {
    
  background: var(--colorBlue);
  color: var(--colorWhite);

  font-size: 16px;
  letter-spacing: 0.5px;

  border: 1px solid var(--colorBlue);
  border-radius: 50px;

   cursor: pointer;

  transition:
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

/* Hover (ratón) */
button.btn-book:hover {
  background: var(--colorBlueDark);
  border-color: var(--colorBlueDark);
}

/* Focus visible (teclado) */
button.btn-book:focus-visible {
  outline: 3px solid var(--colorBlue);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(0, 120, 200, 0.35);
}

/* Active (click) */
button.btn-book:active {
  background: var(--colorBlueDark);
  transform: translateY(1px);
}

/* Respeto a usuarios con sensibilidad al movimiento */
@media (prefers-reduced-motion: reduce) {
  button.btn-book {
    transition: none;
  }
}

/* Contenedor: permite que si no caben, bajen sin romper */
.cta-group{
  flex-wrap: wrap;
  margin-bottom: 24px
}

/* Base: ambos CTAs con tamaño táctil y sin encogerse raro */

.cta-group .link-more,
.cta-group .btn-book{
  min-height: 44px;
  padding: 8px 64px;
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
}

/* Tablet: que se repartan el espacio y, si hace falta, salten a otra línea */
@media (min-width: 768px) and (max-width: 1024px){
  .cta-group{
    gap: 12px; 
  }

  .cta-group .link-more,
  .cta-group .btn-book{
    flex: 1 1 220px;   
    text-align: center;
  }
}

@media (max-width: 1024px){
  .cta-group .link-more--inverse,
  .cta-group button.btn-book{
    width: 100%;
    max-width: 280px; 
  }
}

/**END CTA CARDS **/

/*CARDS DESTINATION-home */
.card-destination{
  position: relative;
  overflow: hidden;
}

.text-destination{
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;

 background: rgba(0,0,0,0.02); /* contraste garantizado */
  z-index: 3;
}

/**END CARDS DESTINATION-home **/

/* 2 - Hotel Section */
.offer-section .button-hotel,
.hotel-section .button-hotel {
    position: absolute;
    width: 100%;
    bottom: 10%;
    display: -webkit-box;      
    display: -ms-flexbox;      
    display: flex;             
    -webkit-box-pack: center;  
    -ms-flex-pack: center;     
    justify-content: center;
   
}
.offer-section .card-hotel,
.hotel-section .card-hotel {
    position: relative;
    overflow: hidden;
}
.offer-section .card-hotel::after,
.hotel-section .card-hotel::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    pointer-events: none;
    z-index: 1;
}

/*.experience .more-experience a.link-more,
.offer-section a.link-more,
.destination-section a.link-more,
.hotel-section .button-hotel a.link-hotel {
    position: relative; /* Añadido para que z-index funcione
    text-decoration: none;
    font-size: 16px;
    color: var(--colorWhite);
    background: transparent;
    border: 1px solid var(--colorWhite);
    border-radius: 50px;
    padding: 8px 64px;
    letter-spacing: 0.5px;
    transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out;
    z-index: 3;  
}
.offer-section a.link-more:hover,
.experience .more-experience a.link-more:hover,
.destination-section a.link-more:hover,
.hotel-section .button-hotel a.link-hotel:hover {
    color: var(--colorWhite);
    background: var(--colorBlue);
    border: 1px solid var(--colorBlue);
}*/

.hotel-section h3 {
    font-family: var(--fontPrimary);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -1.2px;
}
.hotel-section .fa-star {
    color: var(--colorYellow);
}
/* 3 - Offers Section */
.offer-section a.link-more,
.transfer-section a.link-more {
    text-decoration: none;
    font-size: 16px;
    color: var(--colorPrimary);
    background: transparent;
    border: 1px solid var(--colorPrimary);
    border-radius: 50px;
    padding: 8px 64px;
    letter-spacing: 0.5px;
    transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out;
}
.room-section a.btn-book,
.offer-section a.btn-book {
    background: var(--colorBlue);
    color: var(--colorWhite);
    font-size: 16px;
    border: 1px solid var(--colorBlue);
    border-radius: 50px;
    padding: 8px 64px;
    letter-spacing: 0.5px;
    transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out;
}
.offer-section a.btn-book:hover {
    transform: scale(1.1);
}

/* 5 - Experience Section */
.experience {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    margin-bottom:20px;
}

.experience .img-experience{
  position: relative;
  height: 100%;
  overflow: hidden; 
}

.experience .img-experience img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-in-out;
}

.img-experience__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
  pointer-events: none; /* no bloquea clics */
  transition: opacity 0.4s ease-in-out;
}

.experience:hover .img-experience img{
  transform: scale(1.1);
}


.experience:hover .img-experience::after {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

.experience .text-experience {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: -webkit-box;        
    display: -ms-flexbox;        
    display: flex;               
    background: rgba(0,0,0,0.10);
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    flex-direction: column;      

    -webkit-box-pack: end;       
    -ms-flex-pack: end;          
    justify-content: flex-end;
    padding: 60px;
    transition: .3s all;
}
@media (max-width: 1250px) {
    .experience .text-experience {
        padding: 40px 20px;
    }
}

/* Titular y texto siempre visibles */
.experience .text-experience h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}
.experience .text-experience h2{
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 10px;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

.experience .text-experience p {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 0;
    letter-spacing: 0.3px;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

/* El botón oculto inicialmente */
.experience .more-experience {
    display: none;
    transform: translateY(10px);
    transition: transform 0.3s ease-in-out;
}

/* En hover, el título y el texto suben y aparece el botón */
.experience:hover .text-experience h2,
.experience:hover .text-experience h3,
.experience:hover .text-experience p {
    transform: translateY(-30px);
}

.experience:hover .more-experience {
    display: block;
    transform: translateY(0);
}
.service-section .row .htt-text-image {
    margin-bottom: 20px;
}
/*** FIN - HOME CORPORATIVA ***/

/*ERROR 404*/
/* Navegación página 404 */
.error-nav {
    margin-top: 40px;
}

/* Lista */
.error-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Ítems */
.error-nav__list li{
  margin-bottom: 12px;
}

/* Enlaces: área clicable y legibilidad */
.error-nav__list a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--fontPrimary);
  font-size: 18px;
  line-height: 1.2;

  color: var(--colorSecondary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;

  padding: 10px 14px;
  border-radius: 6px;

  min-height: 44px;           /* target táctil WCAG */
  min-width: 44px;

  transition: color .2s ease, background-color .2s ease, outline-color .2s ease;
}

/* Hover: no depender solo del color */
.error-nav__list a:hover{
  color: var(--colorBlue);
  background-color: rgba(0,0,0,0.06);
}

/* Focus accesible (teclado) */
.error-nav__list a:focus{
  outline: 3px solid transparent; /* fallback si focus-visible no aplica */
  outline-offset: 3px;
}

.error-nav__list a:focus-visible{
  outline: 3px solid var(--colorBlue);
  outline-offset: 3px;
  background-color: rgba(0,0,0,0.08);
}

/* Active (clic/tap) */
.error-nav__list a:active{
  background-color: rgba(0,0,0,0.12);
}

/* Respeta usuarios con menos animación */
@media (prefers-reduced-motion: reduce){
  .error-nav__list a{ transition: none; }
}


/** END error 404 **/

/* INICIO - PAGINA FICHA HOTEL */
/* 1 - Custom menu */
.custom-menu ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    justify-content: space-between;
    border-bottom: 1px solid #dee2e6;
    padding: 15px 30px;
    transition: opacity 0.3s;
}
.custom-menu__item.active {
    color: var(--colorBlue);
}
.custom-menu ul a:hover {
    color: var(--colorBlue);
}
.custom-menu:hover a:not(:hover) {
    opacity: 0.5; /* Los enlaces que no están en hover tendrán opacidad 0.5 */
}
@media (max-width: 1650px) {
    .tab-section .container-fluid.w50 {
        width: 70%;
        transition: width .5s ease;
    }
}
@media (max-width: 1250px) {
    .tab-section .container-fluid.w50 {
        width: 90%;
        transition: width .5s ease;
    }
}
/* Style Dropdown Menu Multi Hotel*/
.swiper-rooms .swiper-wrapper {
    padding-bottom: 50px;
}

.dropdown .dropdown-toggle{
    padding: 12px 20px;
    border-radius: 20px;
    background: var(--colorBlue);
    transition: border-radius 0.3s ease-in-out;
    color:white;
}
.dropdown-menu.show {
    width: max-content;
    padding:40px;
    border-radius: 20px;
    margin-top: 6px;
    text-align: center;
    transition: border-radius 0.3s ease-in-out;
}
.dropdown-menu {
    padding: 20px 0;
}
.dropdown-item.active,
.dropdown-item:active{
  background-color: var(--colorBlue);
  color: #fff;
} 
.navbar-nav .nav-link a{
    color:white;
}
.dropdown-toggle:focus-visible,
.dropdown-item:focus-visible{
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 768px) {
    .custom-menu ul {
        border: none;
    }
    .dropdown-menu.show {
    width: 100%;
    }
}

/* 2 - Room card */
.card-room {
    display: -webkit-box;        
    display: -ms-flexbox;        
    display: flex;
    flex-direction: row;
    align-items: center;  
    gap: 40px;
}
.swiper-rooms .htt-swiper-buttons-wrapper {
    display: none;
}

.img-room {
    flex: 2;
}

.text-room {
    flex: 1;
}
.grid-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    list-style: none;
    padding: 0;
    gap: 4px;
    margin: 10px 0 6px 0;
    width: 100%; /* Hace que la lista ocupe solo 2 de 4 columnas */
}
.grid-list li {
    list-style: none;
    position: relative;
    padding-left: 10px;
}
.grid-list li.custom-icon::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--colorPrimary);
    font-weight: bold;
    transition: background-color 0.3s ease-in-out;
}

.grid-list li.ver-servicios::after {
    content: "▼"; /* Flecha apuntando hacia abajo */
    position: absolute;
    left: 110px;
    top: 4px;
    font-size: 10px; /* Tamaño más pequeño */
    color: var(--colorBlue);
    font-weight: bold;
    transition: transform 0.3s ease-in-out;
}

.grid-list li.ver-servicios:hover::after {
    animation: bounce 0.6s 3 alternate ease-in-out;
}

@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(3px); }
}
@media (max-width: 1200px) {
    .card-room {
        -webkit-flex-direction: column; 
        -ms-flex-direction: column;   
        flex-direction: column; 
    }
}
/* FIN - PAGINA FICHA HOTEL */
/* INICIO - PAGINA EXPERIENCIA */
.room-section .container-fluid.w60 .row,
.room-section .container-fluid.w70 .row,
.room-section .container-fluid.w80 .row,
.experience-section .container-fluid.w60 .row,
.experience-section .container-fluid.w70 .row,
.experience-section .container-fluid.w80 .row {
    align-items: stretch;
}
.experience-section .col-12.col-sm-12.col-md-6.col-lg-6.col-xl-7.col-xxl-7,
.experience-section .col-12.col-sm-12.col-md-6.col-lg-6.col-xl-5.col-xxl-5,
.room-section .col-12.col-sm-12.col-md-6.col-lg-6.col-xl-5.col-xxl-5 {
    display: flex;
}
.experience-section .htt-text-image,
.room-section .htt-text-image {
    flex: 1;
}
.experience-section .info-experience {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
/* 6 - Destination Section */
.destination-section .text-destination {
    position: absolute;
    padding: 60px;
    width: 100%;
    top: 0;
    z-index: 2;
}
.img-destination__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom, 
    rgba(0, 0, 0, 0.6), transparent
    );
  pointer-events: none; /* no bloquea clics */
  transition: opacity 0.4s ease-in-out;
}


.destination-section h3 {
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.no-grow {
    flex: 0 1 auto; /* No permite que el botón crezca ni se reduzca */
    width: fit-content; 
}
@media (max-width: 768px) {
    .destination-section .text-destination {
        padding: 20px;
    }
    .destination-section .card-destination {
        height: 100%;
        margin-bottom:20px;
    }
    .destination-section p.w50 {
        width: 100%;
    }
    .img-ratio {
        aspect-ratio: 4 / 5;
    }
}
/* FIN - PAGINA EXPERIENCIA */

/* INICIO - PAGINA GALERIA */
.nav-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}
.nav-link {
    color: var(--colorBlue);
    transition: width .5s ease;
}
.nav-link:hover {
    color: var(--colorBlue);
    font-weight: 600;
}
.lightbox .image {
    transition: .3s all;
}
/* FIN - PAGINA GALERIA */

/* INICIO - PAGINA HABITACIONES */
.room-section h2 {
    letter-spacing: -1px;
}
.experience-section .row>*, 
.room-section .row>* {
    padding-right: calc(var(--bs-gutter-x)* 1);
    padding-left: calc(var(--bs-gutter-x)* 1);
}
.experience-section.home .row>*, 
.room-section.home .row>* {
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
}
.swiper-img-rooms .swiper-slide{
    height:auto;
}
.swiper-img-rooms .swiper-slide img.img-responsive{
    height:100%;
}
.swiper-img-rooms .swiper-pagination-fraction {
    color: var(--colorBlue);
}
.swiper-img-rooms .swiper-button-prev:after,
.swiper-img-rooms .swiper-button-next:after {
    font-size: 35px !important;
    color: var(--colorBlue);
}
.info-room {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Espaciado entre elementos */
    justify-content: center;
    height: 100%;
}
.price-btn-book {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1rem; /* Espaciado entre elementos */
    transition: gap 0.3s ease-in-out;
}
/* ----> VER MAS HABITACIONES */

@media (max-width: 1500px) {
    .grid-list li {
        display: block;  
    }
    .grid-list li.ver-servicios {
        grid-column: span 2;
        margin-bottom: 5px;
        padding: 0;
        color: var(--colorBlue);
        font-weight: 500;
    }
    .grid-list li:not(:first-child) {
        display: none;
        cursor: pointer;
        margin-bottom: 5px;
    }
    .grid-list li.active {
        display: block;
    }
}
@media (min-width: 1501px) {
    .grid-list li.ver-servicios {
        display: none;
    }
}
/* Cambiar a fila en pantallas más grandes */
@media (max-width: 1300px) {
    .grid-list,
    .info-room {
        gap: 0;
    } 
}
@media (min-width: 768px) {
    .price-btn-book {
        flex-direction: row;
    }
}
/* FIN - PAGINA HABITACIONES */

/* INICIO - FOOTER */
.footer {
    background-color: var(--colorPrimary);
}
/* 1 - Logo footer */
.logo-footer {
    max-width: 300px;
    margin:40px 0;
}

h2.title-footer{
    font-size:18px;
    font-weight:bold;
}

/* 2 - Listado links footer */
.list-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-section ul li:first-child {
    font-weight: 600;
    color: rgba(255, 255, 255,1);
}
.footer-section a,
.footer-section ul li a,
.footer-section ul li {
    color: rgba(255, 255, 255,0.8);
    transition: color 0.3s ease-in-out;
    text-align: center;
    list-style: none;
    line-height: 30px;
}
.footer-section a:hover,
.footer-section ul li a:hover {
    color: var(--colorBlue);
}
.nap {
    color: rgba(255, 255, 255,0.8);
    line-height: 30px;
}
.nap span {
    color: rgba(255, 255, 255,1);
    font-weight: 600;
}
a .fa-envelope,
a .fa-phone {
    margin-right: 8px;
}
a:hover .fa-phone {
    animation: fa-shake 1s infinite;
}

a:hover .fa-envelope {
    animation: fa-bounce 1s infinite;
}
/* 3 - Pie Copyright Hotetec */
.fa-heart {
    color: var(--colorBlue);
}
.social-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .social-links {
    display: flex;
  }
  
.social-links a {
    width: 40px;
    height: 40px;
    text-align: center;
    text-decoration: none;
    color: white;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.05);
    margin: 0 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s;
  }
  
.social-links a .fab {
    font-size: 20px;
    line-height: 40px;
    position: relative;
    z-index: 10;
    transition: color 0.5s;
}
  
.social-links a::after {
    content: '';
    width: 100%;
    height: 100%;
    top: -90px;
    left: 0;
    background: #000;
    background: linear-gradient(-45deg,#FBDE52, #c3a825);
    position: absolute;
    transition: 0.5s;
}
  
.social-links a:hover::after {
    top: 0;
}
  
.social-links a:hover .fab {
    color: #fff;
  }
  
.social-links a:hover {
    transform: translateY(-10px);
}
  
@media (max-width: 768px) {
    .footer-section ul {
        padding: 0;
    }
}
/* FIN - FOOTER */

/* CODIGO ESPECIFICO DE MARIANT - SOL AMARILLO */
.fa-circle,
.fa-star{
    color: var( --colorBlue);
}
.fa-circle {
    margin-top: 14px;
    margin-right: 8px;
}
@media (max-width: 768px) {
    .fa-circle {
        margin-top: 8px;
    }
}
/*SWIPER WELCOME*/

/* 1) Asegura el containing block del absolute */

.swiper-welcome,
.swiper-welcome .swiper-wrapper,
.swiper-welcome .swiper-slide{
  height: auto !important;
}
.swiper.swiper-welcome{
  position: relative;
}

.swiper-welcome .swiper-slide img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Colores */
.swiper-welcome .swiper-pagination-fraction{
  color: var(--colorWhite);
}

.swiper-welcome .swiper-button-prev:after,
.swiper-welcome .swiper-button-next:after{
  font-size: 20px !important;
  color: var(--colorWhite) !important;
}

/* 2) Botonera: anclada a la derecha sin width % */
.swiper-welcome .htt-swiper-buttons-wrapper{
  position: absolute;
  top: auto;
  bottom: var(--swiper-pagination-bottom, 31px);
  right: clamp(12px, 4vw, 10%);
  width: auto;
  z-index: 5;
}

/* 3) Fracción: centrada de forma estable (sin % negativos) */
.swiper-welcome .swiper-pagination-fraction{
  position: absolute;
  top: auto;
  bottom: var(--swiper-pagination-bottom, 20px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  white-space: nowrap;
  z-index: 5;
}

/* Overlay */
.swiper-welcome .swiper-slide::after{
  content: "";
  position: absolute;
  inset: 0;               /* equivalente a top/left/right/bottom:0 */
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
  pointer-events: none;
}


/* Evitar error de contraste en Swiper */
.swiper-pagination.swiper-pagination-fraction{
  background: rgba(0,0,0,.45) !important;
  color: #fff !important;
  padding: .25rem .5rem !important;
  border-radius: 999px !important;
}



.grid-swiper-mobile {
    padding-bottom: 20px !important;
}
.swiper-pagination-bullets {
    bottom: 0 !important;
}
.swiper-scrollbar {
    display: none;
}
/*cms-btn-up-mov*/
.cms-btn-up-mov{
    position: fixed;
    width: 48px;
    height: 48px;
    opacity: 0.8;
    bottom: 100px;
    right: 20px;
    background: var(--colorBlue);
    border-radius: 50% !important;
    border:3px solid #fff;
    text-align: center;
    padding: 10px;
    transition: .5s all;
    display:none;
    z-index:5;
    color:#fff;
}
.cms-btn-up-mov i{
    font-size:21px;
   transition:.5s all;
}
.cms-btn-up-mov:hover i{
    font-size:23px;
}


/* INICIO - AJUSTES WIDTH RESPONSIVE GRIDSYSTEM */
@media(max-width: 1970px) {
    section .container-fluid.w60,
    section .container-fluid.w70 {
        width: 80%;
        transition: width .5s ease;
    }
}

@media(max-width: 1366px) {
    section .container-fluid.w60,
    section .container-fluid.w70,
    section .container-fluid.w80 {
        width: 90%;
        transition: width .5s ease;
    }
}
@media(max-width:1024px){
    .header .row > div:nth-child(3) .col{
        min-width:auto !important;
    }
    .personLogin-content .person-login-text, 
    .mybooking-content .mybooking-content-text{
        display:none;
    }
}
@media (max-width: 768px) {
   .header .row > div:nth-child(3) .col{
         padding-right: calc(var(--bs-gutter-x)* .2);
         padding-left: calc(var(--bs-gutter-x)* .4);
    } 
}

@media (max-width: 768px) {
    
   h1 {
        font-size: 40px;
    }
    h2, h3 {
        font-size: 22px;
    }
    .subtitle {
        font-size: 20px;
    }
    
    .access-right > .row {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    } 
    
    .mBT60 {
        margin-bottom: 30px;
    }
    .mBT240,
    .mBT120 {
        margin-bottom: 60px;
    }
    .mTop120 {
        margin-top: 60px;
    }
    .swiper-welcome .htt-swiper-buttons-wrapper{
    right: 12px; 
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  .swiper-welcome .htt-swiper-buttons-wrapper{
    right: 6%;
  }
}

@media(max-width:767px){
    .header{
        padding:5px 10px;
    }
    
    .personLogin-content, .mybooking-content{
        border:none;
        padding:0;
    }
    
    .header.hfixed .personLogin-content, 
    .header.hfixed .mybooking-content {
        border: none;
    }
   
    .personLogin-content span,
    .mybooking-content span{
    font-size:20px;
    }
    
    .personLogin-content .btn,
    .mybooking-content .btn {
    --bs-btn-padding-x: .15rem !important;
    }
  
    .group-languages-texts .btn-secondary.open-selector-language {
       color: black;
   }
   .open-selector-language span:after{
       color:black;
   }
   .dropdown.htt-language-selector {
        display: block;
        top: 30px;
        right: 60px;
        position: absolute;
    }
   .logo-navbar img{
        width:120px;
        height: auto;
    } 
    
    .container-fluid .mTop120{
      margin-top:60px;
  }
  h1, p.title{
        text-wrap: balance;
  }
   h2{
    
    text-wrap: balance;
   }
}