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

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

.header-dilo{

    background:linear-gradient(
        135deg,
        var(--color-principal),
        #2d1607
    );

    position:sticky;
    top:0;
    z-index:999;

    box-shadow:var(--sombra-media);

}

/* =========================
   NAV CONTENEDOR
========================= */

.nav-contenedor{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 30px;

}

/* =========================
   LOGO
========================= */

.logo-dilo{

  
    display:flex;
    flex-direction:column;

    text-decoration:none;

    line-height:1.2;

    transition:var(--transicion);

}
.logo-dilo:hover{
    transform:translateY(-2px);
}


/* NOMBRE EMPRESA (LOGO) */
.logo-dilo{
    font-size:22px;
    font-weight:700;
    color:var(--color-dorado);
}

/* ESLOGAN */
.logo-dilo p{

    margin:0;

    font-size:12px;
    font-weight:400;

    color:var(--color-crema);

    letter-spacing:0.5px;

    opacity:0.9;
}

/* =========================
   MENU
========================= */

.menu-dilo{

    display:flex;
    gap:25px;

}

.menu-dilo a{

    color:var(--color-crema);

    font-weight:500;

    position:relative;

    transition:0.3s;

}

.menu-dilo a:hover{

    color:var(--color-dorado);

}

/* LINEA */

.menu-dilo a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-5px;

    width:0;
    height:2px;

    background:var(--color-dorado);

    transition:0.3s;

}

.menu-dilo a:hover::after{

    width:100%;

}

/* =========================
   BOTON MENU
========================= */

.btn-menu{

    display:none;

    background:none;
    border:none;

    color:white;

    font-size:32px;

    cursor:pointer;

}

/* =========================
   SLIDER
========================= */

.slider-dilo{

    width:100%;

    margin-bottom:40px;

}

/* =========================
   BANNER
========================= */

.banner-img{

    height:500px;

    object-fit:cover;

    filter:brightness(0.65);

}

/* =========================
   TEXTO BANNER
========================= */

.carousel-caption{

    bottom:20%;

}

.carousel-caption h2{

    font-size:48px;
    font-weight:700;

    color:var(--color-dorado);

    text-shadow:0 4px 10px rgba(0,0,0,0.4);

}

.carousel-caption p{

    font-size:20px;

    color:var(--color-crema);

}

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

@media(max-width:992px){

    .btn-menu{
        display:block;
    }

    .menu-dilo{

        position:fixed;

        top:0;
        right:-100%;

        width:280px;
        height:100vh;

        background:var(--color-principal);

        flex-direction:column;

        padding:100px 30px;

        transition:0.4s;

        z-index:999;

    }

    .menu-dilo.active{

        right:0;

    }

    .menu-dilo a{

        font-size:18px;

    }

    .banner-img{

        height:350px;

    }

    .carousel-caption h2{

        font-size:32px;

    }

    .carousel-caption p{

        font-size:16px;

    }

}

@media(max-width:600px){

    .banner-img{

        height:260px;

    }

    .carousel-caption{

        bottom:10%;

    }

    .carousel-caption h2{

        font-size:24px;

    }

}