.hero-background{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.hero-img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;
}

.hero-container{
    position:relative;
    z-index:10;
    height:100%;
    display:flex;
    align-items:center;
}

.container-fluid.bg-white{

    background:transparent !important;

    box-shadow:none !important;

}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;

    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.96) 0%,
        rgba(0,0,0,.92) 18%,
        rgba(0,0,0,.82) 35%,
        rgba(0,0,0,.65) 52%,
        rgba(0,0,0,.40) 68%,
        rgba(0,0,0,.18) 84%,
        rgba(0,0,0,0) 100%
    ),

    linear-gradient(
        180deg,
        rgba(0,0,0,.22) 0%,
        rgba(0,0,0,.08) 45%,
        rgba(0,0,0,.30) 100%
    );
}
.hero-overlay::after{

    content:"";

    position:absolute;

    top:-220px;
    right:-220px;

    width:850px;
    height:850px;

    background:
    radial-gradient(
        circle,
        rgba(255,195,85,.18),
        transparent 72%
    );

    mix-blend-mode:screen;

}

.hero-img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        brightness(.72)
        contrast(1.12)
        saturate(1.08);

}

.hero-overlay::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:45%;
    height:100%;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.45),
        transparent
    );

}


/*==========================================
        HEADER HERO TRANSPARENTE
==========================================*/

.hero-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:18px 0;

    background:transparent;

    z-index:1030;

    transition:.35s ease;

}

/* Logo */

.logo-header{

    width:150px;

    height:auto;

    filter:
    drop-shadow(0 6px 18px rgba(0,0,0,.45));

}



/*==========================================
      SOLO PARA EL HERO DEL INDEX
==========================================*/

@media (min-width:993px){

    /* Menú transparente */
    #main-nav{

        background:transparent !important;

        box-shadow:none !important;

        border:none !important;

    }

    /* Links */
    #main-nav > .menu-box > ul > li > a{

        color:#fff !important;

        text-shadow:
        0 2px 10px rgba(0,0,0,.55);

    }

    /* Línea del hover */
    #main-nav > .menu-box > ul > li > a::after{

        background:#fff !important;

    }

    /* Flechas */
    .flecha{

        color:#fff !important;

    }

}

/*==========================================
      HEADER TRANSPARENTE
==========================================*/

.hero-header{

    background:transparent;

    box-shadow:none;

}

.container-fluid.bg-white.fixed-top img{

    filter:
    drop-shadow(0 4px 15px rgba(0,0,0,.45));

}

.travel-hero{
    position: relative;
    height: 110vh;
    overflow: hidden;
}
.hero-index{

    position:absolute;

    top:50%;

    left:7%;

    transform:translateY(-50%);

    width:620px;

    z-index:999;

    color:#fff;

    margin-top:70px;

}

.hero-title,
.hero-subtitle,
.hero-mini,
.hero-tag,
.hero-icons,
.hero-buttons,
.hero-stats{
    position: relative;
    z-index: 999;
}


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

.hero-index{

    position:absolute;

    left:80px;

    top:52%;

    transform:translateY(-50%);

    width:650px;

    z-index:20;

}

/*============================*/

.hero-tag{

display:inline-flex;
align-items:center;
gap:10px;

padding:10px 24px;

border-radius:50px;

border:1px solid rgba(214,176,77,.65);

background:rgba(0,0,0,.18);

backdrop-filter:blur(10px);

color:#d9b04a;

font-size:15px;

font-weight:600;

letter-spacing:2px;

margin-bottom:28px;

}

/*============================*/

.hero-mini{

display:block;

font-size:28px;

font-weight:700;

letter-spacing:14px;

text-transform:uppercase;

color:rgba(255,255,255,.90);

margin-bottom:5px;

}

/*============================*/

.hero-title{

    position:relative;

    display:inline-block;

    font-family:'Poppins',sans-serif;

    font-size:140px !important;

    font-weight:900;

    line-height:.9;

    letter-spacing:-3px;

    text-transform:uppercase;

    color:#ffffff;

    text-shadow:
        0 6px 18px rgba(0,0,0,.35),
        0 18px 40px rgba(0,0,0,.55),
        0 30px 70px rgba(0,0,0,.60);

}

/*============================*/

.hero-line{

width:52px;

height:3px;

background:#d9b04a;

border-radius:30px;

margin:28px 0;

}

/*============================*/

.hero-subtitle{

font-size:21px;

line-height:1.6;

color:#f2f2f2;

max-width:520px;

margin-bottom:40px;

font-weight:300;

}

.hero-subtitle strong{

color:#d9b04a;

font-weight:700;

}

/*============================*/

.hero-icons{

display:flex;

gap:55px;

margin-bottom:42px;

}

.hero-icon{

display:flex;

flex-direction:column;

align-items:center;

color:white;

position:relative;

}

.hero-icon:not(:last-child)::after{

content:"";

position:absolute;

right:-28px;

top:10px;

width:1px;

height:52px;

background:rgba(255,255,255,.18);

}

.hero-icon i{

font-size:40px;

color:#d9b04a;

margin-bottom:10px;

}

.hero-icon span{

font-size:16px;

font-weight:500;

}

/*============================*/

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:38px;

}

.hero-buttons .btn{

padding:17px 34px;

border-radius:60px;

font-size:16px;

font-weight:700;

letter-spacing:.5px;

transition:.35s;

}

.btn-primary{

background:#c59f3e;

border:none;

color:#111;

    position:relative;
    overflow:hidden;

}

.btn-primary:hover{

transform:translateY(-4px);

background:#947320;
  transform:translateY(-4px);

    background:#947320;

    box-shadow:
        0 0 10px rgba(212,175,55,.35),
        0 0 25px rgba(212,175,55,.25),
        0 10px 30px rgba(0,0,0,.25);
}

.btn-outline{

border:2px solid rgba(255,255,255,.70);

background:transparent;

color:white;

}

.btn-outline:hover{

background:white;

color:black;

}

/*============================*/

.hero-stats{

display:flex;

align-items:center;

gap:35px;

padding:22px 30px;

width:640px;

border:1px solid rgba(255,255,255,.12);

border-radius:22px;

background:rgba(0,0,0,.22);

backdrop-filter:blur(12px);

}

.stat{

display:flex;

align-items:center;

gap:15px;

}

.stat i{

font-size:34px;

color:#d9b04a;

}

.stat h3{

margin:0;

font-size:38px;

font-weight:800;

color:white;

line-height:1;

}

.stat p{

margin:3px 0 0;

font-size:13px;

color:#d8d8d8;

text-transform:uppercase;

letter-spacing:1px;

}

/*=====================================
    AJUSTE HERO PREMIUM
=====================================*/

.hero-content{
    width:440px;
    left:100px;
    top:90%;
    transform:translateY(-50%);
}

/* Etiqueta */
.hero-tag{
    font-size:11px;
    padding:7px 15px;
    margin-bottom:15px;
}

/* DESCUBRE */
.hero-mini{
    font-size:26px;
    letter-spacing:7px;
    margin-bottom:2px;
}

/* CORONEO */
.hero-title{
    font-size:130px;
    line-height:.9;
    letter-spacing:-2px;
    margin-top: 30px;
}

/* Línea amarilla */
.hero-line{
    width:38px;
    height:3px;
    margin:15px 0;
}

/* Texto */
.hero-subtitle{
    font-size:20px;
    line-height:1.55;
    max-width:410px;
    margin-bottom:22px;
}

/* Iconos */
.hero-icons{
    gap:24px;
    margin-bottom:22px;
}

.hero-icon i{
    font-size:24px;
}

.hero-icon span{
    font-size:12px;
}

/* Botones */
.hero-buttons{
    gap:12px;
    margin-bottom:22px;
}

.hero-buttons .btn{
  margin-top:20px;
    padding:12px 28px;
    font-size:15px;
}

/* Estadísticas */
.hero-stats{
    margin-top:30px;
    width:540px;
    padding:16px 20px;
    gap:18px;
}

.stat i{
    font-size:25px;
}

.stat h3{
    font-size:25px;
}

.stat p{
    font-size:12px;
}

/*=========================================
        BRILLO PREMIUM REAL
=========================================*/
.hero-title{

    font-size:130px;
    font-weight:900;

    color:#fff;

    text-shadow:
        0 8px 18px rgba(0,0,0,.35),
        0 20px 45px rgba(0,0,0,.55),
        0 35px 80px rgba(0,0,0,.70);

    animation:heroReveal 1.6s ease forwards;

}

@keyframes heroReveal{

    0%{

        opacity:0;

        transform:
            translateY(25px)
            scale(1.08);

        filter:blur(8px);

    }

    70%{

        opacity:1;

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        filter:blur(0);

    }

}


/*====================================
      BRILLO DEL BOTÓN
====================================*/

.btn-primary::after{

    content:"";

    position:absolute;

    top:-50%;

    left:-60%;

    width:40px;

    height:200%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );

    transform:rotate(25deg);

    transition:.6s;

}

.btn-primary:hover::after{

    left:140%;

}

/*==========================
HEADER INICIAL
==========================*/

.hero-header{

    background:transparent;

    transition:.4s ease;

}

/* Cuando hace scroll */

.hero-header.scrolled{

    background:#ffffff;

    box-shadow:0 8px 25px rgba(0,0,0,.12);

}


/*==========================
NAV AL HACER SCROLL
==========================*/

@media (min-width:993px){

#main-nav{
    transition:.4s ease;
}

#main-nav.scrolled{

    background:rgba(0,0,0,.70);

    backdrop-filter:blur(12px);

}

}





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


@media (min-width:993px){

.hero-header.scrolled{

    background:#fff;
    box-shadow:0 8px 25px rgb(0, 0, 0);

}

#main-nav.scrolled{

    background: rgba(0,0,0,.55) !important;

    backdrop-filter:none;

    -webkit-backdrop-filter:none;

    box-shadow:0 6px 18px  rgba(0,0,0,.55);

    transition:.4s ease;

}

}

.hero-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:transparent;

    transition:.4s;

    z-index:1200;

}

.hero-logo{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;
    height:100%;

}

.hero-header.scrolled{

    background:#fff;

    box-shadow:0 3px 12px rgba(0,0,0,.15);

}


/*=========================================
        BUSCADOR PREMIUM HERO
=========================================*/

.contenedor-buscador{

    display:flex;
    align-items:center;
    justify-content:flex-end;

    margin:0;
    padding:0;

}

/* Caja */

.buscador-box{

    position:relative;

    width:220px;

    flex-shrink:0;

}

/* Input */

.buscador-box input{

    width:100%;
    height:42px;

    padding:0 18px 0 46px;

    border:1.8px solid rgba(255,255,255,.85);

    border-radius:50px;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    color:#fff;

    font-size:15px;
    font-weight:500;

    outline:none;

    transition:.35s ease;

}

/* Placeholder */

.buscador-box input::placeholder{

    color:rgba(255,255,255,.80);

    font-weight:400;

}

/* Icono */

.buscador-box i{

    position:absolute;

    top:50%;
    left:16px;

    transform:translateY(-50%);

    color:#fff;

    font-size:18px;

    z-index:10;

    pointer-events:none;

}
/* Hover */

.buscador-box:hover input{

    border-color:#fff;

    background:rgba(255,255,255,.08);

}

/* Focus */

.buscador-box input:focus{

    border-color:#fff;

    background:rgba(255,255,255,.12);

    box-shadow:0 0 18px rgba(255,255,255,.12);

}

/* Icono cuando escribe */

.buscador-box input:focus + i{

    color:#ffffff;

}

.resultados{

position:absolute;

top:60px;

left:0;

width:100%;

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:0 20px 40px rgba(0,0,0,.15);

display:none;

z-index:99999;

}

.resultado-item{

padding:15px 18px;

cursor:pointer;

transition:.3s;

border-bottom:1px solid #eee;

}

.resultado-item:hover{

background:#edf7f8;

}
/*=========================================
        RESPONSIVO
=========================================*/

@media(max-width:992px){

    .contenedor-buscador{

        display:none;

    }

}

/*=====================================
RESPONSIVE HERO INDEX
=====================================*/

@media (max-width:992px){

.travel-hero{

    min-height:100vh;
    height:auto;
    padding:130px 25px 80px;

}

.hero-index{

    position:relative;

    top:auto;
    left:auto;

    transform:none;

    width:100%;

    max-width:100%;

    margin:0 auto;

    text-align:center;

}

.hero-tag{

    margin:auto auto 20px;

    font-size:12px;

}

.hero-mini{

    font-size:22px;

    letter-spacing:6px;

}

.hero-title{

    font-size:80px !important;

    line-height:.95;

    letter-spacing:-1px;

    margin:15px 0;

}

.hero-line{

    margin:18px auto;

}

.hero-subtitle{

    max-width:100%;

    font-size:18px;

    margin:auto;

    margin-bottom:30px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

    gap:15px;

}

.hero-buttons .btn{

    width:100%;

    max-width:330px;

}

.hero-stats{

    width:100%;

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

    margin-top:35px;

    padding:20px;

}

.stat{

    justify-content:center;

}

}

@media (max-width:576px){

.hero-title{

    font-size:58px;

}

.hero-mini{

    font-size:18px;

}

.hero-subtitle{

    font-size:16px;

}

.hero-tag{

    font-size:11px;

}

}


/*==============================
HEADER MÓVIL
==============================*/

@media (max-width:992px){

.hero-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:80px;

    background:transparent;

    box-shadow:none;

    transition:.35s ease;

    z-index:1200;

}

/* Solo cuando haga scroll */

.hero-header.scrolled{

    background:#fff;

    box-shadow:0 5px 20px rgba(0,0,0,.12);

}

}

@media (max-width:992px){

.hero-header.hide-header{

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

}

}

@media(max-width:768px){

    .contenedor-buscador{

        justify-content:center;

        margin:20px 0 40px;

    }

    .buscador-box{

        width:100%;

        max-width:380px;

    }

}



/* ===============================
   ESCALA GLOBAL (COMO 90% ZOOM)
   =============================== */

.hero-index{
  zoom: 0.85;
}

/* En celulares mejor no reducir tanto */
@media (max-width: 768px){
  body{
    zoom: 1;
  }
}