/*====================================
    ESTILOS GENERALES
=====================================*/

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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f7fa;
    color:#333;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    overflow-x:hidden;
}

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

header{
    background:#2b1a12;
    border-bottom:3px solid #b8956a;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    padding:20px 40px;
    position:relative;
}

.logo-img{
    width:190px;
    height:10px;
    object-fit:cover;
}

.header-text{
    text-align:center;
}

header h1{
    color:#e8c39e;
    font-size:32px;
    letter-spacing:3px;
    font-weight:normal;
}

.slogan{
    color:#b8956a;
    margin-top:5px;
    font-style:italic;
    font-size:15px;
}

/*====================================
      BOTON HAMBURGUESA
=====================================*/

.menu-toggle{

    display:none;

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:#e8c39e;

    font-size:34px;

    cursor:pointer;

}

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

nav{
    background:#3D1D11;
}

nav ul{
    list-style:none;
    display:flex;
    justify-content:center;
}

nav ul li a{
    display:block;
    color:#d9c9b8;
    text-decoration:none;
    padding:18px 35px;
    transition:.3s;
}

nav ul li a:hover{
    background:#4d2919;
    color:#e8c39e;
}

/*====================================
            CARRUSEL
=====================================*/

#carouselExampleAutoplaying{
    width:100%;
}

#carouselExampleAutoplaying img{
    width:100%;
    height:70vh;
    object-fit:cover;
}

/*====================================
             FOOTER
=====================================*/

footer{
    background:#2b1a12;
    border-top:3px solid #b8956a;
    padding:25px;
    margin-top:auto;
}

.footer-grid{

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

.col h3{

    color:#b8956a;

    margin-bottom:10px;

    border-bottom:1px solid #4a3020;

    padding-bottom:8px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:15px;

}

.col p{

    color:#d9c9b8;

    line-height:1.7;

    font-size:14px;

}

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

@media(max-width:992px){

.logo-img{

width:100px;
height:100px;

}

header h1{

font-size:28px;

}

#carouselExampleAutoplaying img{

height:50vh;

}

}

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

@media(max-width:768px){

/* Header */

header{

flex-direction:column;

padding:20px;

gap:15px;

}

/* Logo */

.logo-img{

width:90px;

height:90px;

}

/* Botón hamburguesa */

.menu-toggle{

display:block;

}

/* Ocultar menú */

nav{

display:none;

}

nav.activo{

display:block;

}

/* Menú vertical */

nav ul{

flex-direction:column;

}

nav ul li{

width:100%;

}

nav ul li a{

padding:16px;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

}

/* Carrusel */

#carouselExampleAutoplaying img{

height:35vh;

}

/* Footer */

.footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:20px;

}

}

/*====================================
      CELULARES PEQUEÑOS
=====================================*/

@media(max-width:480px){

header h1{

font-size:22px;

}

.slogan{

font-size:13px;

}

.logo-img{

width:75px;

height:75px;

}

#carouselExampleAutoplaying img{

height:28vh;

}

.col h3{

font-size:14px;

}

.col p{

font-size:13px;

}

}