/*==================================================
PERSA TRAVELING
Autor: ChatGPT
Bootstrap 5.3
==================================================*/
/* ================================================================
   CONFIGURACION CENTRAL DE DIMENSIONES
   ----------------------------------------------------------------
   Todo el tamaño de la página se controla desde aquí.

   Cómo funcionan las "escalas":
   - *-scale  = 1     -> tamaño de diseño original
   - *-scale  = 0.9   -> 10% más pequeño (todo el bloque)
   - *-text-scale     -> solo el texto de ese bloque, sin tocar cajas

   En la tarjeta "Oferta del día" los números SIN unidad son
   "píxeles de diseño" sobre una tarjeta de 980px de ancho. Se
   convierten automáticamente según --promo-card-width, así que al
   cambiar el ancho toda la tarjeta (imagen, textos, bordes, iconos)
   se escala manteniendo su proporción.
   ================================================================ */
:root {
    /* Generales */
    --size-page-font: 16px;

    /* ==============================
       MENU PRINCIPAL
       ============================== */
    --menu-font-size: 14px;
    --menu-font-size-tablet: 13px;
    --menu-font-size-mobile: 14px;
    --menu-dropdown-font-size: 13px;
    --menu-dropdown-font-size-mobile: 14px;

    /* ==============================
       HERO / BUSCADOR (MOTOR)
       ============================== */
    --hero-min-height: 100vh;
    --navbar-padding-y: 20px;
    --hero-title-padding-top: 90px;
    --hero-title-size: 2.5rem;

    /* Distancia del motor al borde inferior del hero.
       vh = porcentaje del alto de la pantalla (4vh = 4%). */
    --motor-bottom-space: 4vh;
    /* Espacio mínimo entre el título y el motor (pantallas bajas / móvil) */
    --motor-min-gap: 40px;

    --motor-group-width: 32.3%;
    --motor-group-gap-right: 10px;
    --motor-group-margin-bottom: 15px;
    --motor-button-height: 80px;

    /* ==============================
       SECCION AURORA (OFERTA DEL DIA)
       ============================== */
    --promo-bottom-offset: 0; 
    --aurora-min-height: 420px;
    --aurora-padding-y: 60px;

    --aurora-bg-width: 45%;           /* ancho que ocupa la imagen de fondo */
    --aurora-bg-position: center;     /* qué parte de la imagen se prioriza al recortar */
    /* Ancho de la tarjeta: lo único que hay que tocar para agrandar/achicar */
    --promo-card-width: 940px;        /* antes 980px 620px*/
    --promo-text-scale: 1;            /* solo textos de la tarjeta */

        /* Imagen de la persona (independiente del card) - px de diseño */
    --promo-person-height: 490;       /* alto propio de la imagen */
    --promo-person-width: 380;        /* ancho máximo de la imagen */
    --promo-person-left: 186;         /* centro horizontal de la imagen, medido desde la izquierda */
    --promo-person-bottom: 0;         /* subir/bajar la imagen (negativo = baja) */

    /* Medidas internas en px de diseño (sin unidad, base 980) */
    --promo-card-height: 450;
    --promo-card-radius: 14;
    --promo-card-border-width: 4;
    --promo-header-height: 58;
    --promo-header-font: 24;
    --promo-left-width: 38%;
    --promo-right-width: 62%;
    --promo-right-pad-top: 18;
    --promo-right-pad-x: 28;
    --promo-right-pad-bottom: 20;
    --promo-title-size: 48;
    --promo-title-margin: 25;
    --promo-info-width: 72%;
    --promo-info-pad-y: 12;
    --promo-info-pad-x: 18;
    --promo-info-gap: 14;
    --promo-info-font: 15;
    --promo-arrow-size: 34;
    --promo-bottom-margin-top: 28;
    --promo-dates-font: 14;
    --promo-icon-size: 46;
    --promo-icon-font: 26;
    --promo-price-small: 9;
    --promo-price-label: 14;
    --promo-price-size: 52;

    /* ==============================
       SECCION MACHU PICCHU
       ============================== */
    --machu-min-height: 600px;
    --machu-container-gap: 42px;
    --machu-title-width: 250px;
    --machu-title-margin-left: 220px;
    --machu-title-margin-top: 45px;
    --machu-title-margin-right: 40px;
    --machu-subtitle-size: 25px;
    --machu-title-size: 43px;
    --machu-flag-width: 665px;
    --machu-flag-left: -5px;
    --machu-flag-top: -48px;

    /* Tarjeta del slider */
    --tour-card-scale: 1;             /* escala TODO el card (ancho, imagen, texto) */
    --tour-text-scale: 1;             /* solo textos */
    --machu-slider-width: 340px;
    --machu-slider-margin-top: 25px;
    --tour-image-height: 270px;
    --tour-price-size: 36px;

    /* ==============================
       DESTINOS / PROMOCIONES
       ============================== */
       --nd-section-padding: 70px 0 90px;
    --nd-container-max-width: 1240px;   /* ancho total que ocupan las 3 cards */
    --nd-title-size: 24px;
    --nd-title-margin-bottom: 42px;
    --nd-block-margin-bottom: 60px;

    /* Cards "Descubre nuevos destinos" */
    --nd-card-scale: 1;               /* escala alto, textos y espacios internos */
    --nd-text-scale: 1;               /* solo textos */
    --nd-card-image-height: 270px;
    --nd-card-body-height: 223px;     /* alto de la zona de texto + pie azul */
    --nd-title-lines: 2;              /* líneas máximas del nombre */
    --nd-info-lines: 3;               /* líneas máximas de Inicio/Finaliza */
    /* Tamaños de texto de las cards */
    --nd-badge-size: 12px;            /* pestaña verde (duración) */
    --nd-card-title-size: 14px;       /* nombre del tour */
    --nd-logo-size: 30px;             /* la "V" */
    --nd-info-size: 12px;             /* Inicio / Finaliza */
    --nd-date-icon-size: 15px;        /* avión */
    --nd-date-title-size: 11px;       /* FECHAS */
    --nd-date-text-size: 10px;        /* fechas de salida */
    --nd-price-small-size: 9px;       /* letra chica del precio */
    --nd-price-label-size: 10px;      /* "Desde" */
    --nd-price-size: 34px;            /* precio */
    --nd-footer-size: 12px;           /* Ver detalles | Cotizar */
    --nd-cards-gap-x: 20px;           /* separación horizontal entre cards */
    --nd-cards-gap-y: 45px;           /* separación vertical (deja sitio a la pestaña) */    /* center | flex-start */

    /* Promociones */
    --nd-promos-margin-top: 55px;
    --nd-promo-large-height: 220px;
    --nd-promo-small-height: 400px;
    --nd-promo-label-size: 15px;

    /* ==============================
       BANNERS
       ============================== */
    --travel-banner-min-height: 600px;
    --travel-content-max-width: 430px;
    --travel-content-margin-left: 130px;
    --travel-content-margin-right: 120px;
    --travel-title-size: 33px;
    --travel-text-size: 13px;
    --travel-btn-font-size: 10px;
    --travel-btn-height: 28px;

    /* ==============================
       CTA FINAL
       ============================== */
    --ready-min-height: 255px;
    --ready-padding: 45px 0 58px;
    --ready-title-size: 34px;
    --ready-text-size: 13px;
    --ready-btn-font-size: 10px;
    --ready-btn-height: 28px;

    /* ==============================
       FOOTER
       ============================== */
    --footer-min-height: 245px;
    --footer-padding: 58px 0 42px;
    --footer-cut-width: 300px;
    --footer-logo-width: 165px;
    --footer-title-size: 13px;
    --footer-text-size: 11px;
    --footer-copy-size: 11px;
    --footer-copy-min-height: 32px;

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

/* ================================================================
   VALORES POR PANTALLA (tablet / móvil)
   ================================================================ */
@media (max-width: 991px) {
    :root {
        --hero-title-padding-top: 50px;
        --aurora-min-height: 0px;
        --aurora-padding-y: 40px;

        --machu-min-height: auto;
        --machu-container-gap: 40px;
        --machu-slider-margin-top: 0px;

        --nd-section-padding: 60px 0 80px;
        --nd-container-max-width: 720px;
        /*--nd-card-max-width: 280px;*/
        --nd-card-image-height: 170px;
        --nd-promo-large-height: 220px;
        --nd-promo-small-height: 300px;

        --travel-banner-min-height: 330px;
        --footer-padding: 55px 0 45px;
        --footer-cut-width: 220px;
    }
}

/* En móvil la tarjeta de oferta pasa a 1 columna y usa px reales */
@media (max-width: 767px) {
    :root {
        --promo-header-font: 18;
        --promo-title-size: 28;
        --promo-title-margin: 18;
        --promo-info-font: 13;
        --promo-arrow-size: 24;
        --promo-price-size: 36;
    }
}

@media (max-width: 576px) {
    :root {
        --hero-title-size: 1.9rem;
        --motor-min-gap: 30px;

        --machu-subtitle-size: 22px;
        --machu-title-size: 38px;

        --nd-section-padding: 55px 0 70px;
        --nd-title-size: 21px;
        --nd-title-margin-bottom: 36px;
        /* --nd-card-max-width: 300px; */
        --nd-card-image-height: 180px;
        --nd-promo-large-height: 240px;
        --nd-promo-small-height: 240px;
        --nd-promo-label-size: 14px;

        --travel-banner-min-height: 360px;
        --travel-title-size: 27px;
        --travel-text-size: 12px;

        --footer-padding: 45px 0 35px;
        --footer-cut-width: 160px;
        --footer-logo-width: 145px;
    }
}

@media (max-width: 480px) {
    :root {
        --promo-title-size: 22;
        --promo-price-size: 30;
        --promo-icon-size: 38;
        --promo-icon-font: 20;
    }
}

/************************************************
    CHESNAGROTESK - FONT FACE
************************************************/
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-THIN.TTF') format('truetype'); font-weight:100; font-style:normal; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-EXTLTITA.TTF') format('truetype'); font-weight:200; font-style:italic; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-EXTRALIGHT.TTF') format('truetype'); font-weight:200; font-style:normal; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-LIGHT.TTF') format('truetype'); font-weight:300; font-style:normal; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-LIGHTITALIC.TTF') format('truetype'); font-weight:300; font-style:italic; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-BOOK.TTF') format('truetype'); font-weight:350; font-style:normal; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-BOOKITALIC.TTF') format('truetype'); font-weight:350; font-style:italic; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-REGULAR.TTF') format('truetype'); font-weight:400; font-style:normal; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-REGULARITALIC.TTF') format('truetype'); font-weight:400; font-style:italic; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-MEDIUM.TTF') format('truetype'); font-weight:500; font-style:normal; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-MEDIUMITALIC.TTF') format('truetype'); font-weight:500; font-style:italic; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-SEMIBOLD.TTF') format('truetype'); font-weight:600; font-style:normal; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-SEMIBOLDITALIC.TTF') format('truetype'); font-weight:600; font-style:italic; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-BOLD.TTF') format('truetype'); font-weight:700; font-style:normal; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-BOLDITALIC.TTF') format('truetype'); font-weight:700; font-style:italic; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-EXTRABOLD.TTF') format('truetype'); font-weight:800; font-style:normal; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-EXTRABOLDITALIC.TTF') format('truetype'); font-weight:800; font-style:italic; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-BLACK.TTF') format('truetype'); font-weight:900; font-style:normal; }
@font-face{ font-family:'CHESNAGROTESK'; src:url('../fonts/CHESNAGROTESK-BLACKITALIC.TTF') format('truetype'); font-weight:900; font-style:italic; }

/************************************************
    RESET TIPOGRAFICO GLOBAL
************************************************/
html{
    font-size: var(--size-page-font);
    scroll-behavior: smooth;
}

html,
body{
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body{
    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;
}

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; }

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; }

a{
    font-family: 'CHESNAGROTESK', sans-serif;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    transition: all .25s ease;
}
a:hover{ text-decoration: none; }

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

ul, ol{ margin-top: 0; padding-left: 1.2rem; }
li{ font-family: 'CHESNAGROTESK', sans-serif; font-weight: 400; }

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: var(--hero-bg, url("../img/Asset 9@4x (2).webp"));
    /*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 */
  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;
  }
}

/* CARD */
.nd-section{
    width: 100%;
    background: #ffffff;
    padding: var(--nd-section-padding);
    overflow: hidden;
}
.nd-container{ max-width: var(--nd-container-max-width); }

.nd-title{
    margin: 0 0 var(--nd-title-margin-bottom);
    color: #1D2B5B;
    font-size: var(--nd-title-size);
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

.nd-block{ margin-bottom: var(--nd-block-margin-bottom); }

/* Cards más juntas: anula gx-5 / gy-5 del HTML */
.nd-section .nd-cards-row{
    --nk: var(--nd-card-scale);
    --nt: calc(var(--nd-card-scale) * var(--nd-text-scale));
    --bs-gutter-x: var(--nd-cards-gap-x);
    --bs-gutter-y: var(--nd-cards-gap-y);
    align-items: flex-start;
}


.nd-card{
    width: 100%;          /* ocupa toda su columna */
    max-width: none;
    height: calc((var(--nd-card-image-height) + var(--nd-card-body-height)) * var(--nk));
    margin: 0 auto;
    background: #ffffff;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);

    display: flex;
    flex-direction: column;

    margin-bottom: 30px;
}

.nd-badge{
    position: absolute;
    top: calc(-28px * var(--nk));
    left: 0;
    z-index: 5;
    background: #8CC63F;
    color: #ffffff;
    font-size: calc(var(--nd-badge-size) * var(--nt));
    font-weight: 700;
    line-height: 1;
    padding: calc(8px * var(--nk)) calc(15px * var(--nk));
    border-radius: 5px 5px 0 0;
}

.nd-card-img{
    width: 100%;
    height: calc(var(--nd-card-image-height) * var(--nk));
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0 5px 0 0;
}
.nd-card-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.nd-card-body{
    padding: calc(13px * var(--nk)) calc(14px * var(--nk)) calc(9px * var(--nk));
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.nd-card-body h3{
    margin: 0 0 calc(10px * var(--nk));
    color: #1D2B5B;
    font-size: calc(var(--nd-card-title-size) * var(--nt));
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--nd-title-lines);
    overflow: hidden;
    min-height: calc(1.2em * var(--nd-title-lines)); /* reserva siempre el mismo espacio */
}

.nd-info{
    display: flex;
    align-items: flex-start;
    gap: calc(7px * var(--nk));
    margin-bottom: calc(12px * var(--nk));
}
.nd-logo{
    color: #00B8D6;
    font-size: calc(var(--nd-logo-size) * var(--nt));
    font-weight: 900;
    line-height: 1;
}
.nd-info p{
    margin: 0;
    color: #1D2B5B;
    font-size: calc(var(--nd-info-size) * var(--nt));
    font-weight: 600;
    line-height: 1.35;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--nd-info-lines);
    overflow: hidden;
}

.nd-bottom{
    margin-top: auto;               /* fecha y precio siempre abajo */
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(7px * var(--nk));
}
.nd-date{ display: flex; align-items: center; gap: calc(6px * var(--nk)); }
.nd-date-icon{
    width: calc(24px * var(--nk));
    height: calc(24px * var(--nk));
    background: #00B8D6;
    color: #ffffff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--nd-date-icon-size) * var(--nt));
}
.nd-date span{
    display: block;
    color: #1D2B5B;
    font-size: calc(var(--nd-date-title-size) * var(--nt));
    font-weight: 900;
    line-height: 1;
}
.nd-date small{
    display: block;
    color: #1D2B5B;
    font-size: calc(var(--nd-date-text-size) * var(--nt));
    font-weight: 600;
    margin-top: 2px;
}

.nd-price{ text-align: right; }
.nd-price small{
    display: block;
    color: #1D2B5B;
    font-size: calc(var(--nd-price-small-size) * var(--nt));
    font-weight: 600;
    margin-bottom: 1px;
}
.nd-price span{
    color: #1D2B5B;
    font-size: calc(var(--nd-price-label-size) * var(--nt));
    font-weight: 700;
    margin-right: 2px;
}
.nd-price strong{
    color: #1D2B5B;
    font-size: calc(var(--nd-price-size) * var(--nt));
    font-weight: 900;
    line-height: .9;
    letter-spacing: -1px;
}

.nd-price-secondary {
    margin-top: 3px;
    color: #667085;
    font-size: calc(9px * var(--nt));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: right;
    white-space: nowrap;
}

.nd-footer{
    background: #00B8D6;
    color: #ffffff;
    text-align: center;
    font-size: calc(var(--nd-footer-size) * var(--nt));
    font-weight: 700;
    padding: calc(9px * var(--nk)) 8px;
    border-radius: 0 0 5px 5px;
    flex-shrink: 0;
}


@media (max-width: 992px) {
    .nd-cards-row{
        margin-left: 0;
        margin-right: 0;
    }

    .nd-card{
        width: 100%;
        max-width: 90%;/* 260*/
        margin: 0 auto;
    }
}

/*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;
}

/*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;
    }
}