/* Asegúrate de que la imagen de fondo no ocupe más que su contenedor */
 .hly-hero-viajes__image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* Asegura que la imagen cubra el contenedor sin perder proporciones */
   object-position: center;
   /* Asegura que el enfoque sea la parte central de la imagen */
   z-index: 1;
 }



 .hly-hero-viaje {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   /* Asegura que el contenido esté en la parte inferior */
   height: calc(var(--vh, 1vh) * 85);
   /* Fix para iOS */
   /* height: 85vh; /* Ajusta según el espacio necesario */
   width: 100%;
   box-sizing: border-box;
 }

 /* Contenedor principal que cubre toda la altura disponible */
 @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 1024px) {
   .hly-hero-viaje {
     height: 100vh;
     /* Ajusta según el espacio necesario */
   }
 }

 /* Configuración de la página en columnas */
 .page-container {
   width: 100%;
   /* max-width: var(--wrapper-width); /* Ajusta según sea necesario */
   margin: 0 auto;
   /* Centra el contenedor horizontalmente */

   padding-bottom: 20px;
   /* Ajusta según sea necesario */
   box-sizing: border-box;
   z-index: 20;



 }


 .page-container__left,
 .page-container__right {
   width: 100%;
   /* Una columna en pantallas pequeñas */
   float: none;
   /* Desactiva el flotado */

 }


 /* Estilo para la sección izquierda */
 .page-container__left {
   float: left;

   background-color: rgba(255, 0, 0, 0.0);
   padding: 0px 30px 0 30px;
   box-sizing: border-box;

   /* Añade flexbox para alinear el contenido */
   display: flex;
   flex-direction: column;
   /* Alinea los elementos en columna */
   justify-content: flex-end;
   /* Alinea el contenido al final del contenedor */
   height: calc(var(--vh, 1vh) * 70);
   ;
   margin-top: 25px;


 }

 /* Estilo para la sección derecha */
 .page-container__right {
   overflow-x: hidden;
   /* Para evitar desbordamientos horizontales */
   float: left;
   background-color: rgba(0, 255, 0, 0.0);
   padding: 20px;
   box-sizing: border-box;
   margin-top: 75px;

 }



 /* Configuración para pantallas más pequeñas */
 @media (min-width: 768px) {
   .page-container__left {
     width: 50%;
     height: 100%;
     padding-bottom: 50px;
     margin-top: 0px;
     padding-right: 5%;
   }

   .page-container__right {
     width: 50%;
     /* Ocupa el 50% del contenedor */
   }
 }

 /* Limpiar floats */
 .page-container::after {
   content: "";
   display: table;
   clear: both;
 }




 .hly-hero-viajes__subtitle {
   font-family: "DM Sans";
   font-size: 14px;
   font-weight: 500;
   line-height: 16px;
   letter-spacing: 0.02em;
   text-transform: uppercase;
   color: #f8f1e7;
 }

 .hly-hero-viajes__title {
   font-size: 36px;
   line-height: 48px;
   font-family: "Martel";
   color: #f8f1e7;
 }

 .hly-hero-viajes__description {
   font-family: "DM Sans";
   font-size: 14px;
   line-height: 20px;
   color: #f8f1e7;
 }


 @media (min-width: 768px) {

   .hly-hero-viajes__subtitle {
     font-weight: 700;
     font-size: 12px;
     line-height: 18px;
   }

   .hly-hero-viajes__title {
     font-size: 48px;
     line-height: 64px
   }




 }


 .hly-section-text {
   padding-bottom: 50px;
 }


 .hly-section-viajes {
   display: flex;
   flex-direction: column;
   gap: 20px;
   /* Espacio entre filas */
   margin: 0 auto;
   max-width: var(--wrapper-width);
   /* Ajusta según sea necesario */
   padding: 40px 20px;
   /* Espaciado interno */
 }

 .hly-section-viajes--basic {
   /* Puedes añadir aquí estilos específicos para la plantilla básica si es necesario */
 }

 .hly-section-viajes__row {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }

 .hly-section-viajes__col {
   flex: 1;
 }

 .hly-section-viajes__image {
   width: 100%;
   height: auto;
   object-fit: cover;
 }

 /* Estilos para Desktop */
 @media (min-width: 768px) {
   .hly-section-viajes__row {
     flex-direction: row;
     justify-content: space-between;
     gap: 40px;
   }

   /* Alinea la imagen a la izquierda o derecha según corresponda */
   .hly-section-viajes__col--image {
     order: 2;
   }

   .hly-section-viajes__row:nth-child(2n) .hly-section-viajes__col--image {
     order: 1;
   }

   .hly-section-text {
     padding-bottom: 0px;
   }


 }

 .hly-section-viajes__title {
   font-family: "Martel", serif;
   font-size: 24px;
   color: #333;
 }

 .hly-section-viajes__description {
   font-family: "DM Sans", sans-serif;
   font-size: 16px;
   color: #666;
 }


 .hly-section__background--basic {
   background-color: #f8f1e7;
   /* Color naranja */
 }

 .hly-section__background--cream {
   background-color: #f8f1e7;
   /* Color naranja */
 }

 .hly-section__background--wild {
   background-color: #212121;
   /* Color naranja */
   color: #f8f1e790;
 }

 .hly-section__background--orange .breadcrumb__item a,
 .hly-section__background--beach .breadcrumb__item a,
 .hly-section__background--basic .breadcrumb__item a {
   color: #4a4a4a !important;
 }

 .hly-section__background--orange .breadcrumb__item a:hover,
 .hly-section__background--beach .breadcrumb__item a:hover,
 .hly-section__background--basic .breadcrumb__item a:hover {
   text-decoration: underline;
 }

 .hly-section__background--wild .hly-card__list--highlights li {
   color: #f8f1e790
 }


 .hly-section__background--wild .breadcrumb {

   color: #f8f1e7;
 }

 .hly-card__title {
   margin-bottom: 15px;
   text-align: left;
 }

 .hly-section__background--wild .hly-card__title {
   color: #f8f1e7;
 }

 .hly-section__background--wild .hly-card__content {
   color: #f8f1e790;
 }

 .hly-section__background--beach {
   background-color: #e2f2ef;
   /* Color naranja */
   color: #40986b
 }



 /*
.hly-section__background--beach p, ul li{
    color: #40986b !important
}
*/

 .hly-section__background--orange {
   background-color: #f1b39c;
   /* Color naranja */
 }


 .hly-section--special-margin {

   padding-top: 250px;
 }

 /* Mobile First */

 .hly-cuando-viajar {
   padding: 2rem 1rem;
   background-color: #f8f1e7;
   color: #212121;
 }

 .hly-cuando-viajar__container {
   max-width: 1200px;
   margin: 0 auto;
 }

 .hly-cuando-viajar__title {
   font-family: 'Martel', sans-serif;
   font-weight: 400;
   font-size: 28px;
   line-height: 36px;
   color: #212121;
   text-align: left;
   text-align: center;
   margin-bottom: 50px;

 }

 .hly-cuando-viajar__timeline {
   margin-top: 50px;
   position: relative;
   max-width: calc(var(--wrapper-width) - 20%);
   margin: 20px auto;
 }

 .hly-cuando-viajar__bar::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: repeating-linear-gradient(to right,
       transparent,
       transparent calc(100% / 12 - 1px),
       black calc(100% / 12),
       transparent calc(100% / 12 + 1px));
   z-index: 1;
 }

 .hly-cuando-viajar__months {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
 }

 .hly-cuando-viajar__month {
   font-size: 14px;
   color: #333;
 }

 .hly-cuando-viajar__bar {
   width: 100%;
   height: 10px;
   background-color: #ddd;
   /* Fondo de la barra */
   position: relative;
   border-radius: 5px;
 }

 .hly-cuando-viajar__progress {
   position: relative;
   height: 100%;
   width: 100%;
   border-radius: 5px;
   /* Aquí aplicaremos el gradiente dinámico generado por PHP */
 }

 .hly-cuando-viajar__box {
   max-width: calc(var(--wrapper-width) - 10%);
   margin: 0 auto;
   background: #fcf8f3;
   height: 100%;
   padding: 25px;
 }

 .hly-cuando-viajar__tabs {
   display: block;
   margin-bottom: 2rem;
 }

 .hly-cuando-viajar__tab {
   background-color: transparent;
   border: none;
   font-size: 14px;
   font-family: 'DM Sans', sans-serif;
   padding: 10px;
   cursor: pointer;

   color: #212121;
   opacity: 0.35;
   transition: opacity 0.25s ease-in-out;
 }

 .hly-cuando-viajar__tab:hover {
   opacity: 1;
 }

 .hly-cuando-viajar__tab.active {
   font-weight: bold;
   color: #5b9c71;
   opacity: 1;
 }

 .hly-cuando-viajar__tab--1,
 .hly-cuando-viajar__tab--2,
 .hly-cuando-viajar__tab--3 {
   position: relative;
   /* Establece la posición relativa para contener el cuadrado */
   padding-left: 20px;
 }

 .hly-cuando-viajar__tab--1::before,
 .hly-cuando-viajar__tab--2::before,
 .hly-cuando-viajar__tab--3::before {
   content: "";
   display: block;
   width: 15px;
   height: 15px;
   margin-top: 8px;
   position: absolute;
   top: 0;
   left: 0;
 }

 .hly-cuando-viajar__tab--1::before {
   background-color: #40986b;
 }

 .hly-cuando-viajar__tab--2::before {
   background-color: #a3c4ae;
 }

 .hly-cuando-viajar__tab--3::before {
   background-color: #f1b39c;
 }

 .hly-cuando-viajar__content {
   display: none;
 }

 .hly-cuando-viajar__content.active {
   display: block;
 }



 .hly-cuando-viajar__item-title {
   font-family: 'DM Sans', sans-serif;
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 1rem;
 }

 .hly-cuando-viajar__item-content {
   font-family: 'DM Sans', sans-serif;
   font-size: 14px;
   line-height: 1.6;
   color: #666;

 }

 .hly-cuando-viajar__item {}




 .hly-cuando-viajar__temp,
 .hly-cuando-viajar__rainfall {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
 }

 .hly-cuando-viajar__temp-bar,
 .hly-cuando-viajar__rainfall-bar {
   position: relative;
   width: 100%;
   height: 1px;
   background-color: #40986b;
   border-radius: 2px;
   margin-left: 25px;
 }

 .hly-cuando-viajar__temp-bar::before,
 .hly-cuando-viajar__rainfall-bar::before {
   content: attr(data-value);
   position: absolute;
   font-family: 'DM Sans', sans-serif;
   font-size: 14px;
   font-weight: bold;
   background-color: #40986b;
   color: #fff;
   padding: 6px;
   border-radius: 0px;
   transform: translateX(-50%);
   /* Centra el texto en el indicador */
   left: var(--position);
   margin-top: -12px;
 }




 /* Desktop styles (min-width: 768px) */
 @media (min-width: 768px) {
   .hly-cuando-viajar__tabs {
     display: flex;
     justify-content: start;
     margin-bottom: 2rem;
   }

   .hly-cuando-viajar__item {
     display: flex;
     flex-direction: row;
     /* Organiza horizontalmente */
     justify-content: space-between;
     /* Espacio entre las columnas */
     align-items: flex-start;
     /* Alinea los elementos al inicio de la columna */
   }

   .hly-cuando-viajar__item-info,
   .hly-cuando-viajar__item-stats {
     flex: 1;
     /* Ambos toman el mismo espacio */
     margin-right: 20px;
     /* Asegúrate de que haya algo de espacio entre las columnas */
   }

   .hly-cuando-viajar__item-stats {
     margin-right: 0;
     /* Elimina el margen derecho en el último elemento */
   }

   .hly-section--special-margin {

     padding-top: 150px;
   }


   .hly-cuando-viajar__title {
     text-align: center;
     line-height: 48px;
     font-size: 34px;
     margin-bottom: 10px;
   }
 }


 .hly-cuando-viajar__bar {
   position: relative;
   width: 100%;
   height: 10px;
   background-color: #ddd;
   /* Fondo de la barra */
   border-radius: 0px;
   margin-top: 10px;
 }

 .hly-cuando-viajar__months {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
 }

 .hly-cuando-viajar__month {
   position: relative;
   font-size: 14px;
   color: #333;
   width: calc(100% / 12);
   /* Cada mes ocupa 1/12 del ancho */
   text-align: center;
 }

 .hly-cuando-viajar__progress {
   height: 100%;
   border-radius: 0px;
   position: relative;
   z-index: 0;
   /* Colocamos las rayitas por encima */
 }

 .hly-cuando-viajar__bar div {
   position: absolute;
   top: 0;
   z-index: 1;
 }




 .hly-places-to-visit {
   background-color: var(--wp--preset--color--neutral-10);
   display: flex;
   flex-direction: column;
   /* Mobile first: los elementos se apilan en columnas */
   padding: 20px;
 }

 .hly-places-to-visit__container {
   max-width: var(--wrapper-width);
   /* El contenedor ocupa el 100% del ancho */
   margin: 0 auto;
   /* Centramos el contenedor */
   display: flex;
   flex-direction: column;
   /* Mobile first: el contenido del contenedor se apila en móvil */
 }

 .hly-places-to-visit__title {
   margin-bottom: 0.5rem;
   font-size: 34px;
   line-height: 48px;
   font-family: "Martel", sans-serif;
   font-weight: 400;
   font-size: 28px;
   line-height: 36px;
   color: #212121;
   margin-bottom: 0.75rem;
 }

 /* Los textos ocuparán el 100% en móvil */
 .hly-places-to-visits__text {
   width: 100%;
   /* El texto ocupa el ancho completo */
   margin-bottom: 20px;
   /* Añadimos un margen inferior */
 }

 .hly-places-to-visit__slider {
   width: 100%;
   /* El slider ocupa el ancho completo en móviles */
   overflow-x: hidden;
   /* Para evitar desbordamientos horizontales */
 }


 /* Ajuste para pantallas de escritorio */
 @media (min-width: 768px) {
   .hly-places-to-visit {
     flex-direction: row;
     /* En escritorio, los elementos se colocan en una fila */
   }

   .hly-places-to-visit__container {
     display: flex;
     flex-direction: row;
     /* Los elementos dentro del contenedor también se distribuyen en fila */
     align-items: flex-start;
     /* Alineamos al inicio del eje vertical */
   }

   .hly-places-to-visits__text {
     width: 33.33%;
     /* El texto ocupa 1/3 del ancho total en pantallas grandes */
     margin-bottom: 0;
     /* Eliminamos el margen inferior en escritorio */
   }

   .hly-places-to-visit__slider {
     width: 66.66%;
     /* El slider ocupa 2/3 del ancho en pantallas grandes */
   }
 }

 .breadcrumb {
   margin-top: 50px;
 }

 .hly-card--highlights {
   padding-top: 50px
 }

 .hly-recommended__slider {
   padding-bottom: 80px
 }

 .hly-section {
   padding-left: 25px;
   padding-right: 25px;
 }

 @media (min-width: 768px) {

   .page-container__right {
     margin-top: calc(100vh - 350px);

   }

   /* aqui posem les diferencies de disseny de desktop */
   .breadcrumb {
     margin-top: 100px;
   }

   .hly-card--highlights,
   .hly-activities__text {
     padding-top: 90px
   }

   .hly-activities__container {
     padding-left: 25px;
     padding-right: 25px;
   }


   .hly-activities {
     margin-top: -50px;
     padding-top: 150px;
   }

 }



 .hly-inspiration-slide {
   min-height: 355px;
   border-radius: 16px;
   background-image: linear-gradient(0deg, #222222 -11.82%, rgba(34, 34, 34, 0) 50%));
   -webkit-background-position: center;
   background-position: center;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   background-size: cover;
   background-attachment: fixed;
   /* Hace que el fondo no se mueva */

   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 }

 .first-slide {
   /* Estilos que quieres aplicar al slide que está primero */
   box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
   min-height: 400px;
   margin-top: -15px;
   transition: all 0.5s ease;

 }

 .first-slide .hly-inspiration-slider__info {
   margin-top: 35px;
 }


 .hly-inspiration-slider__badge {
   display: flex;
   -moz-box-pack: start;
   justify-content: start;
   -moz-box-align: center;
   align-items: center;
   padding: 6px 20px 6px 10px;
   max-width: 170px;
   width: fit-content;
   min-height: 50px;
   background: rgba(0, 0, 0, .08);
   backdrop-filter: blur(30px);
   border-radius: 45px;
   margin-top: 20px;
   margin-left: 20px;

 }

 .hly-inspiration-slider__badge span {
   padding-left: 10px;
   color: #fff;
   font-family: "DM Sans", sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 12px;
   line-height: 16px;
   letter-spacing: .02em;
   text-transform: uppercase;
 }

 .hly-inspiration-slider__info {
   display: flex;

   align-items: flex-end;
   /* Elementos alineados al fondo */
   padding: 6px 20px 6px 10px;
   margin-top: 20px;
   margin-left: 20px;
   min-height: 250px;
   /* Asegura que ocupe todo el espacio disponible en su contenedor */
 }

 .hly-inspiration-slider__title {
   font-family: "Martel", sans-serif;
   font-weight: 400;
   font-size: 32px;
   line-height: 44px;
   color: #f8f1e7;
   padding: 0;
   margin: 0;
 }


 h3.hly-inspiration-slider__title {
   font-size: 25px;
   line-height: 1.2;
   padding-top: 100px;
 }

 .hly-inspiration-slider__info {
   flex-direction: column;
 }

 h3.hly-inspiration-slider__title {
   font-weight: bolder;
 }

 .page-container {
  height: calc(var(--vh, 1vh) * 100);;
  background: rgba(0, 0, 0, 0.2);
  
}