html,
body{
    margin:0;
    padding:0;
    font-family:Segoe UI,sans-serif;
    scroll-behavior:smooth;
}

/*==========================
        NAVBAR
===========================*/

.navbar{
    background:rgba(0,0,0,.25);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:.35s;
    z-index:9999;
}

.navbar.scrolled{
    background:rgba(255,255,255,.96);
    box-shadow:0 4px 20px rgba(0,0,0,.12);
}

.navbar.scrolled .nav-link,
.navbar.scrolled .navbar-brand,
.navbar.scrolled .dropdown-toggle{
    color:#333 !important;
}

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

#hero{
    position:relative;
    width:100%;
    height:100vh;

    background-image:url("../imagenes/fondo.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    overflow:hidden;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.48);
}

.hero-content{
    position:relative;
    z-index:2;
    height:100%;
}

.hero-content h1{
    text-shadow:0 3px 10px rgba(0,0,0,.4);
}

.hero-content p{
    text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/*==========================
    PROMOCIÓN HERO
===========================*/

.promo-hero{

    width:400px;
    max-width:100%;

    padding:25px;

    border-radius:25px;

    background:rgba(20,20,25,.70);

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

    border:1px solid rgba(212,175,55,.35);

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

    color:#fff;

    animation:flotar 4s ease-in-out infinite;

}

.promo-hero:hover{

    transform:translateY(-8px);

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

}

.promo-hero img{

    width:100%;
    height:220px;

    object-fit:cover;

    border-radius:15px;

    margin-bottom:15px;

}

.promo-hero h3{

    color:#fff;
    font-weight:700;

}

.promo-hero h4{

    color:#D4AF37;
    font-size:2rem;
    font-weight:700;

}

.promo-hero small{

    color:#bbb !important;

}

.promo-hero ul{

    list-style:none;
    padding:0;
    margin:20px 0;

}

.promo-hero li{

    color:#f5f5f5;
    margin-bottom:10px;

}

.promo-hero .badge{

    background:#E63946 !important;

    padding:10px 18px;

    border-radius:30px;

    font-size:.9rem;

    letter-spacing:1px;

}

.promo-btn{

    background:#D4AF37;
    color:#222;
    border:none;

    font-weight:600;

}

.promo-btn:hover{

    background:#E6C55A;
    color:#111;

    transform:translateY(-2px);

}

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

.contenido{

    background:#fff;
    position:relative;
    z-index:10;

}

/*==========================
        CARDS
===========================*/

.card{

    border:none;
    border-radius:20px;
    overflow:hidden;

    transition:.35s;

}

.card img{

    height:250px;
    object-fit:cover;

}

.card:hover{

    transform:translateY(-10px);

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

}

/*==========================
          CTA
===========================*/

.cta{

    background:#f8f4f5;
    padding:100px 0;

}

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

.btn{

    border-radius:40px;
    padding:12px 30px;
    transition:.3s;

}

.btn-success{

    background:#25D366;
    border:none;

}

.btn-success:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(37,211,102,.35);

}

/*==========================
       ANIMACIONES
===========================*/

@keyframes flotar{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:991px){

    #hero{

        height:auto;
        min-height:100vh;
        padding:130px 0 70px;

    }

    .promo-hero{

        margin-top:50px;

    }

}

@media(max-width:768px){

    #hero{

        background-attachment:scroll;

    }

    .hero-content{

        text-align:center;

    }

    .hero-content h1{

        font-size:2.5rem;

    }

    .promo-hero{

        width:100%;

    }

}