/*==================================================
PERSA TRAVELING
Autor: ChatGPT
Bootstrap 5.3
==================================================*/

:root{

    --primary:#2D4F82;
    --secondary:#00B8D6;
    --orange:#FDB933;
    --green:#69C64A;
    --purple:#7752A5;
    --white:#FFFFFF;
    --text:#1B1B1B;
    --menu:#274D7E;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* html{

    scroll-behavior:smooth;

}

body{

    font-family:'Montserrat',sans-serif;
    overflow-x:hidden;
    background:#fff;

} */


/* THIN */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-THIN.TTF') format('truetype');
    font-weight: 100;
    font-style: normal;
}

/* EXTRA LIGHT ITALIC */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-EXTLTITA.TTF') format('truetype');
    font-weight: 200;
    font-style: italic;
}

/* EXTRA LIGHT */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-EXTRALIGHT.TTF') format('truetype');
    font-weight: 200;
    font-style: normal;
}

/* LIGHT */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-LIGHT.TTF') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* LIGHT ITALIC */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-LIGHTITALIC.TTF') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* BOOK */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-BOOK.TTF') format('truetype');
    font-weight: 350;
    font-style: normal;
}

/* BOOK ITALIC */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-BOOKITALIC.TTF') format('truetype');
    font-weight: 350;
    font-style: italic;
}

/* REGULAR */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-REGULAR.TTF') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* REGULAR ITALIC */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-REGULARITALIC.TTF') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* MEDIUM */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-MEDIUM.TTF') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* MEDIUM ITALIC */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-MEDIUMITALIC.TTF') format('truetype');
    font-weight: 500;
    font-style: italic;
}

/* SEMIBOLD */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-SEMIBOLD.TTF') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* SEMIBOLD ITALIC */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-SEMIBOLDITALIC.TTF') format('truetype');
    font-weight: 600;
    font-style: italic;
}

/* BOLD */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-BOLD.TTF') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* BOLD ITALIC */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-BOLDITALIC.TTF') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* EXTRA BOLD */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-EXTRABOLD.TTF') format('truetype');
    font-weight: 800;
    font-style: normal;
}

/* EXTRA BOLD ITALIC */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-EXTRABOLDITALIC.TTF') format('truetype');
    font-weight: 800;
    font-style: italic;
}

/* BLACK */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-BLACK.TTF') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/* BLACK ITALIC */
@font-face{
    font-family: 'CHESNAGROTESK';
    src: url('../resource/fonts/CHESNAGROTESK-BLACKITALIC.TTF') format('truetype');
    font-weight: 900;
    font-style: italic;
}


/************************************************
    RESET TIPOGRAFICO GLOBAL
************************************************/

html{
    font-size: 16px;
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;

    font-family: 'CHESNAGROTESK', sans-serif;
    font-weight: 400;
    font-style: normal;

    color: #1D2B5B;
    background: #ffffff;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}

/************************************************
    TITULOS
************************************************/

h1,
h2,
h3,
h4,
h5,
h6{
    margin-top: 0;

    font-family: 'CHESNAGROTESK', sans-serif;
    font-style: normal;

    color: inherit;
    line-height: 1.15;
}

h1{
    font-size: 3rem;
    font-weight: 900;
}

h2{
    font-size: 2.5rem;
    font-weight: 800;
}

h3{
    font-size: 2rem;
    font-weight: 700;
}

h4{
    font-size: 1.5rem;
    font-weight: 700;
}

h5{
    font-size: 1.25rem;
    font-weight: 600;
}

h6{
    font-size: 1rem;
    font-weight: 600;
}

/************************************************
    TEXTO
************************************************/

p{
    margin-top: 0;

    font-family: 'CHESNAGROTESK', sans-serif;
    font-weight: 400;
    font-style: normal;

    line-height: 1.6;
}

strong,
b{
    font-weight: 700;
}

em,
i{
    font-style: italic;
}

/************************************************
    LINKS
************************************************/

a{
    font-family: 'CHESNAGROTESK', sans-serif;
    font-weight: 500;

    color: inherit;
    text-decoration: none;

    transition: all .25s ease;
}

a:hover{
    text-decoration: none;
}

/************************************************
    FORMULARIOS
************************************************/

input,
textarea,
select,
button{
    font-family: 'CHESNAGROTESK', sans-serif;
}

button{
    cursor: pointer;
}

/************************************************
    LISTAS
************************************************/

ul,
ol{
    margin-top: 0;
    padding-left: 1.2rem;
}

li{
    font-family: 'CHESNAGROTESK', sans-serif;
    font-weight: 400;
}

/************************************************
    TABLAS
************************************************/

table{
    width: 100%;
    border-collapse: collapse;
}

th{
    font-family: 'CHESNAGROTESK', sans-serif;
    font-weight: 700;
}

td{
    font-family: 'CHESNAGROTESK', sans-serif;
    font-weight: 400;
}

/************************************************
    UTILIDADES
************************************************/

.font-thin{
    font-weight: 100 !important;
}

.font-light{
    font-weight: 300 !important;
}

.font-regular{
    font-weight: 400 !important;
}

.font-medium{
    font-weight: 500 !important;
}

.font-semibold{
    font-weight: 600 !important;
}

.font-bold{
    font-weight: 700 !important;
}

.font-extrabold{
    font-weight: 800 !important;
}

.font-black{
    font-weight: 900 !important;
}

.font-italic{
    font-style: italic !important;
}

.container-custom{
    max-width:1240px;
    margin:0 auto;
    padding:0 15px;
}
/*==================================================
NAVBAR
==================================================*/

.navbar{

    height:78px;
    z-index:9999;
    background:#fff!important;

}

.logo{

    width:118px;
    transition:.35s;

}

.navbar-nav{

    gap:18px;

}

.nav-link{

    color:var(--menu)!important;
    font-size:13px;
    font-weight:500;
    transition:.30s;
    padding:0!important;

}

.nav-link:hover{

    color:var(--orange)!important;

}

.nav-link.active{
    /*font-weight:700;*/
    background:var(--orange);
    color:#fff !important;
    border-radius:30px;
    padding:10px 16px !important;
    font-size:12px;
    font-weight:700;
    transition:.3s;
}

.btn-ofertas{

    background:var(--orange);
    color:#fff;
    border-radius:30px;
    padding:6px 16px;
    font-size:12px;
    font-weight:700;
    transition:.3s;

}

.btn-ofertas:hover{

    background:#f4a90d;
    color:#fff;

}

/*==================================================
HERO
==================================================*/

.hero{

    position:relative;

    width:100%;

    height:610px;
    /* height:510px; */

    background-image:url("../assets/Asset 9@4x (2).webp");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    overflow:hidden;

}

/* oscurece solamente la parte izquierda */

/* .overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.58) 22%,
        rgba(0,0,0,.28) 40%,
        rgba(0,0,0,0) 70%
    );

    z-index:1;

} */
 .overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.68) 18%,
        rgba(0,0,0,.42) 35%,
        rgba(0,0,0,.10) 55%,
        rgba(0,0,0,0) 72%
    );

}

.hero .container{

    position:relative;
    z-index:2;

}

.hero-content{

    color:#fff;

    /*padding-left:10px;*/
    padding-left:75px;

    margin-top:40px;

}

/*==================================================
BADGE VERDE
==================================================*/

.location{

    display:inline-flex;

    align-items:center;

    margin-bottom:35px;

}

.location img{

    width:60px;

    margin-right:12px;

}

.location span{

    background:var(--green);

    color:#fff;

    /* padding:9px 28px;

    border-radius:40px;

    font-size:15px; */
    padding:8px 24px;

    border-radius:30px;

    font-size:14px;

    font-weight:700;

}

/*==================================================
TITULO
==================================================*/

.hero h1{

    /* font-size:62px;

    font-weight:900;

    line-height:1;

    margin-bottom:25px;

    text-transform:uppercase;

    letter-spacing:-2px; */
    font-size: 48px; /*68px;*/
    font-weight:900;
    line-height:.96;
    letter-spacing:-2px;

}

/*==================================================
INICIO / FINALIZA
==================================================*/

.tour-info{

    display:flex;

    align-items:flex-start;

    margin-bottom:28px;

}

.tour-info img{

    /* width:26px; */
    width:46px; 
    margin-right:14px;

    margin-top:3px;

}

.tour-info div{

    font-size:14px;/*18px;*/

    line-height:1.45;

    font-weight:400;

}

.tour-info strong{

    font-weight:700;

}

/*==================================================
BOTONES
==================================================*/

.hero-buttons{

    display:flex;

    gap:16px;

}

.btn-consultar{

    width:170px;

    border:2px solid #fff;

    border-radius:35px;

    font-size:18px;

    font-weight:600;

    padding:11px;

}

.btn-consultar:hover{

    background:#fff;
    color:#000;

}

.btn-reservar{

    width:255px;

    background:var(--orange);

    color:#fff;

    border-radius:35px;

    padding:12px;

    font-size:18px;

    font-weight:700;

}

.btn-reservar:hover{

    background:#f2a20b;
    color:#fff;

}

/*==================================================
BREADCRUMB
==================================================*/

.breadcrumb-section{

    height:34px;

    background:var(--purple);

    display:flex;

    align-items:center;

}

.breadcrumb-section span{

    color:#F7C13F;

    font-size:12px;

    text-transform:uppercase;

    font-weight:600;

    letter-spacing:.4px;

}

/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:1200px){

.hero h1{

    font-size:52px;

}

}

@media (max-width:992px){

.hero{

    height:620px;

}

.hero-content{

    text-align:center;

    margin-top:0;
    padding-left:15px;
    padding-right:15px;

}

.location{

    justify-content:center;

}

.tour-info{

    justify-content:center;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.hero h1{

    font-size:46px;

}

}

@media(max-width:768px){

.hero{

    height:680px;

}

.hero h1{

    font-size:38px;

}

.location span{

    font-size:13px;

    padding:8px 18px;

}

.location img{

    width:45px;

}

.tour-info div{

    font-size:15px;

}

.btn-consultar,
.btn-reservar{

    width:100%;

}

}

@media(max-width:576px){

.navbar{

    height:auto;

    padding:15px 0;

}

.logo{

    width:90px;

}

.hero{

    height:700px;

}

.hero h1{

    font-size:32px;

}

.location{

    flex-direction:column;

    gap:12px;

}

.location img{

    margin-right:0;

}

.tour-info{

    flex-direction:column;
    align-items:center;
    text-align:center;

}

.tour-info img{

    margin-bottom:10px;
    margin-right:0;

}

}

/*==========================================
Navbar Sticky
==========================================*/

.navbar{

    transition:all .35s ease;

}

.navbar-scroll{

    box-shadow:0 12px 35px rgba(0,0,0,.10)!important;

}

/******seccion 2*********/
/* --- Paleta de colores basada en la imagen --- */
/* ==========================================================================
   1. VARIABLES DE COLOR GENERALES
   ========================================================================== */
:root {
  --color-primary: #1a2b4c;  /* Azul oscuro principal */
  --color-green: #6bc048;    /* Verde de acento */
  --color-orange: #ffb733;   /* Naranja de botones y llamadas a la acción */
  --color-border: #dbe2ef;   /* Gris suave para tarjetas y separadores */
  --color-border-dark: #2D4F82;     /* Azul oscuro para textos y elementos secundarios */
}

/* ==========================================================================
   2. ESTILOS DE CABECERAS Y ELEMENTOS COMUNES
   ========================================================================== */
.section-title {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.75rem;
  margin: 0;
}

.header-icon {
  height: 2.3rem;
  width: auto;
}

.custom-card {
  border: 2px solid var(--color-border-dark);
  border-radius: 1rem;
  background-color: #ffffff;
}


/****** cuerpo formulario *****/
/* ==========================================================================
   6. SECCIÓN FORMULARIO DE CONTACTO (SOLUCIÓN DE CORTE Y VISIBILIDAD)
   ========================================================================== */

.travel-form-section {
  position: relative;
  padding-top: 80px;
  padding-bottom: 140px; /* Espacio crítico para que la loma y los textos respiren - 140px*/
  background-color: #ffffff;
  width: 100%;
  overflow: hidden;
}

.z-index-content {
  z-index: 5;
}

/* Fila principal con margen para no encimar la barra inferior */
.travel-main-row {
  position: relative;
  padding-bottom: 120px;
  /*padding-bottom: 40px;*/
}

/* Tipografías */
.travel-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: #1d2d5b;
  letter-spacing: -0.5px;
}

.travel-description {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #555555;
  text-align: justify;
}

/* Inputs con borde celeste fino */
.travel-input {
  border: 1px solid #4ec3e0 !important;
  border-radius: 6px !important;
  padding: 12px 15px !important;
  font-size: 0.88rem !important;
  color: #333333;
  background-color: #ffffff !important;
}

.travel-input::placeholder {
  color: #9aa7b5;
}

.travel-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(78, 195, 224, 0.2) !important;
  border-color: #00b4d8 !important;
}

/* Botón Ovalado */
.travel-btn-submit {
  background-color: #00b4d8 !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: 30px !important;
  border: none;
  padding-left: 45px !important;
  padding-right: 45px !important;
  transition: background-color 0.2s ease;
}

.travel-btn-submit:hover {
  background-color: #0096b4 !important;
}

/* Solución Paisaje: Ocupa todo el ancho sin recortarse abruptamente */
.travel-bg-landscape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 500px; /* Altura fija para contener la loma correctamente */
  /* height: 280px; */
  object-fit: fill; /* Mantiene la loma extendida de extremo a extremo */
  z-index: 1;
  pointer-events: none;
}

/* Personaje Viajero */
.travel-character-img {
  max-height: 780px;
  /*max-height: 620px;*/
  width: auto;
  position: relative;
  z-index: 2;
  margin-bottom: -265px; /* Hace que baje y pise de forma realista el fondo */
  /*margin-bottom: -145px;*/
}

/* Barra de Contacto Flotante en la zona inferior */
.travel-contact-bar {
  position: absolute;
  bottom: -90px; /* Alineación perfecta dentro de la franja verde */
  left: 15px;
  z-index: 10;
}

.contact-item {
  min-w-180 { min-width: 180px; }
}

/* Renderizado exacto de los WebP entregados */
.contact-asset-icon {
  width: 18px;
  height: auto;
  object-fit: contain;
}

.contact-text-sm {
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  color: #ffffff;
}

/* Control Responsivo de Visualización */
@media (max-width: 991.98px) {
  .travel-character-img {
    max-height: 480px;
    margin-bottom: -145px;
  }
  .travel-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 767.98px) {
  .travel-form-section {
    padding-top: 40px;
    padding-bottom: 260px; /* Espacio extra para móviles */
  }
  .travel-bg-landscape {
    height: 340px;
  }
  .travel-character-img {
    max-height: 380px;
    margin-bottom: -120px;
    margin-top: 20px;
  }
  .travel-contact-bar {
    bottom: -220px;
    left: 15px;
    right: 15px;
    justify-content: center;
    gap: 15px !important;
  }
}

/*menu principal*/
/* Estilos para Hover y Animación en Desktop */
@media (min-width: 992px) {
    /* Desplegar submenú al pasar el cursor */
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Ocultar por defecto con efecto suave */
    .navbar-nav .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        margin-top: 0;
    }
}

/* Diseño moderno del desplegable */
.navbar-nav .dropdown-menu {
    border: none;
    border-radius: 10px;
    padding: 0.5rem 0;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.navbar-nav .dropdown-item {
    padding: 0.6rem 1.25rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #4a5568;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Efecto hover e ítem activo en el submenú */
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
    background-color: #f8fafc;
    color: #0d6efd; /* Cambia por tu color corporativo */
}

.navbar-nav .dropdown-item.active {
    background-color: #e7f1ff;
    color: #0d6efd;
    font-weight: 600;
}

/* Oculta toda la columna del personaje en pantallas pequeñas */
@media (max-width: 991.98px) {
    .travel-character-col {
        display: none !important;
    }
    .travel-main-row {
        padding-bottom: 40px; /* Ajuste para móviles */
    }
}

/*responsive menu fgeneral*/
/* ==========================================
   ESTILOS DE NAVEGACIÓN GENERAL Y ESCRITORIO
   ========================================== */

.navbar {
    height: 78px;
    z-index: 9999;
    background: #fff !important;
}

.logo {
    width: 118px;
    transition: .35s;
}

.navbar-nav {
    gap: 18px;
}

.nav-link {
    color: var(--menu) !important;
    font-size: 13px;
    font-weight: 500;
    transition: .30s;
    padding: 0 !important;
}

.nav-link:hover {
    color: var(--orange) !important;
}

.nav-link.active {
    background: var(--orange);
    color: #fff !important;
    border-radius: 30px;
    padding: 10px 16px !important;
    font-size: 12px;
    font-weight: 700;
    transition: .3s;
}

.btn-ofertas {
    background: var(--orange);
    color: #fff;
    border-radius: 30px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    transition: .3s;
}

.btn-ofertas:hover {
    background: #f4a90d;
    color: #fff;
}

/* --- Submenú Desplegable (Escritorio) --- */
.navbar .dropdown-menu {
    border: none;
    border-radius: 12px;
    padding: 8px 0;
    margin-top: 8px;
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.navbar .dropdown-item {
    color: var(--menu, #333333);
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover, Focus y Activo en Escritorio usando var(--orange) y texto blanco */
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    background-color: var(--orange) !important;
    color: #ffffff !important;
}


/* ==========================================
   ADAPTACIÓN RESPONSIVE (MÓVIL / TABLETA)
   ========================================== */

@media (max-width: 991.98px) {
    /* Libera la altura fija para que el menú colapsado crezca dinámicamente */
    .navbar {
        height: auto !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .navbar-collapse {
        background-color: #ffffff;
        padding: 16px 0 8px 0;
        margin-top: 8px;
    }

    .navbar-nav {
        align-items: flex-start !important;
        gap: 12px;
    }

    .navbar .nav-item {
        width: 100%;
    }

    .navbar .nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 8px 12px !important;
    }

    /* Ajuste de la píldora activa en pantalla pequeña */
    .navbar .nav-link.active {
        border-radius: 8px;
        padding: 8px 12px !important;
    }

    /* Convierte el desplegable en bloque estático fluido */
    .navbar .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 4px;
        margin-bottom: 6px;
        background-color: #f8f9fa; /* Fondo gris muy suave para diferenciar el anidado */
        border-radius: 8px;
        box-shadow: none !important;
        padding: 6px 0;
    }

    /* Sub-items con sangría para mantener la jerarquía visual */
    .navbar .dropdown-item {
        color: var(--menu, #333333);
        padding: 8px 16px 8px 28px;
        font-size: 13px;
    }

    /* Hover en pantalla pequeña manteniendo var(--orange) */
    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus,
    .navbar .dropdown-item.active,
    .navbar .dropdown-item:active {
        background-color: var(--orange) !important;
        color: #ffffff !important;
    }
}