/*---- Estilos generales*/

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

h1, h2, h3 {

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

}

h1 {

    color: beige
    
}


h2 {

    color: black ; 
  
}

h3 {

    color: rgb(32, 32, 32) ;  

}

h4 {

    color: grey ;    

}

ul {

    display: flex;
    gap: 50px
}

li {

    list-style: none;
    text-align: left;

}

a {
    color: whitesmoke;
    text-decoration: none;

}

/*---Fondo body---*/

body  {

    background-color: beige;
}

/*---Fondo header-footer---*/

header {
    
    background-color: black;
    gap: 30vh;
    text-align: center;
    height: 15vh;
    
}

 header .inicio , footer {

    background-color: black;
    border-top: 0.5px solid #383333;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

 }

 /*---Alineacion footer---*/

 footer {

    color: white;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
 }


/*---Estilos class---*/

.activo 

{
    color: rgb(219, 106, 54);
    text-shadow: rgb(223, 167, 56);
    
}

nav ul li a:hover {

    color: rgb(0, 0, 0);
    text-shadow: rgb(223, 221, 217);
    border-radius: 3px;
    background-color: white;
    padding: 6px
    
}

.inicio {
    
    background-color: rgb(235, 215, 179);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 0.5px solid #333;
    height: 8vh;

 
}


/*---Secciones---*/

.seccion1 {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 0.5px solid #333;
    height: 400px;
    background-size: cover;       
    background-position: center;  
    background-attachment: fixed; 
 }

.seccion2 {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 3vh 3vh;

}


.seccion3 {

    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    padding: 20px;
    border-bottom:  0.5px solid #383333;rgb(219, 106, 54);
    border-top: 0.5px solid #383333;rgb(219, 106, 54);
    
}
.seccion3 h2 {

    grid-column: 1 / 3; 
    text-align: center;

}

.card1 , .card2 {


    border: 1px solid rgb(235, 215, 179);
    text-align: center;
    justify-content: center;
    
}

.seccion4 {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3vh 3vh;

}

.seccion5 {

    background-color: rgb(219, 106, 54);
    color: beige;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 0.5px solid #383333;rgb(219, 106, 54);
    
}

/*-- detalles footer--*/ 

legend  {

    text-align: center;

}

.registro {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.5vh;
    margin-bottom: 2vh;
}

.enviar {

    padding: 3px;
    border-radius: 5px;
    margin-top: 0.5vh;

}

.enviar:active {

    background-color: black;
    color: whitesmoke;
}


.contactos {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 3vh 3vh;
    border-bottom: 0.5px solid #383333;
}

.contactosbody  {

    background-color: black;
}

.copyright {

    display: flex;
    flex-direction: column;
    align-items: center;
 

}


/*---FRECUENTES---*/

.frecuentes {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    margin: 5vh;

    
}

.formasdepago {

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vh;
    margin-top: 3vh;

}

.formasdepago::after{

    content: "💵 💳 📱 ";
    font-size: 2rem;
}
.devoluciones {

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vh;
    margin-top: 3vh;
}

.devoluciones::after {

    content: "📦  📤  📮";
     font-size: 2rem;

}

.giftcard {

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vh;
    margin-top: 3vh;
    margin-bottom: 3vh;

}

.giftcard::after {

      content: "🎁 🧧 🎂 ";
     font-size: 2rem;

}



/*---PRODUCTOS---*/

.productos {

    display: flex;
    flex-direction: column;
   
}

.portadaproductos {

   display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 0.5px solid #333;
    height: 600px;
    background-size: cover;       
    background-position: center;  
    background-attachment: fixed; 

}

::selection {

    background-color: rgb(219, 106, 54);
    color: beige;
}