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

body { font-family: 'Lora', serif;
    background-color: black;
    color: white;
}


/**-------------------PAGINA INDEX-------------------**/

/**NAVBAR INDEX**/
.navbar{
text-transform: uppercase;
font-weight: bold;
letter-spacing: .1rem;
background: rgba(0, 0, 0, .6) !important;
}

.collapse .nav-item:hover{
background-color: white;
transition: all 0.40s;
}

.collapse .nav-link:hover{
color: black !important;
}

/**HERO INDEX**/
.banner{
position: relative;
width: 100%;
height: 100vh;
background-image: url(/imagenes/galeria4.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

.container-hero{
width: 100%;
height: 100%;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.container-hero a{
text-decoration: none;
color: #fff;
padding: 9px 20px;
border: 1px solid #fff;
transition: all .3s ease-in-out;
}

.container-hero a:hover{
background-color: #fff;
color: #333;
}

/**ELEGINOS INDEX**/

.eleginos{
    background-color:rgba(1,1,1,255) ;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 2rem; 
    margin-top: 2rem;
}

.eleginos h2{
    padding: 4rem;
}

.eleginos ul{
    padding: 2rem;
    list-style: none;
}

/**FORMULARIO INDEX**/

.formulario{
    width: min(60rem, 100%);
    margin: 0 auto;
    padding: 1.5rem;
}

.formulario fieldset{
    border: none;
    text-align: center;
}

.formulario legend{
    text-align: center;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 2rem;
}

.campo{
    margin-bottom: 1rem;
}

.campo label{
    font-weight: bold;
    margin-top: .5rem;
    display: block;
}

.input-text{
    width: 100%;
    border: none;
    padding: 1.5rem;
    border-radius: .5rem;
}

.header__icono{
display: none;
}

/**FOOTER**/
/**ESTILOS GENERALES**/
.container-footer{
background-color: rgb(1,1,1);
}


.container-footer .py-3 .nav .nav-item .style:hover{
color: white
}

.container-footer .py-3 .nav .nav-item{
font-size: 30px;
transition: all .3s ease;
}

.container-footer .py-3 .nav .nav-item:hover{
transform: translateY(-10px);
}

p{font-size: 1.2rem;} 


a{ color: white;
padding: 0 1rem;
text-decoration: none;
}

.btn{
    text-decoration: none;
    color: #fff;
    padding: 9px 20px;
    border: 1px solid #fff;
    transition: all .3s ease-in-out;
}

.btn:hover{
background-color: #fff;
color: #333;
}


/**MEDIA QUERIS**/

@media  screen and (max-width: 768px) {

.eleginos{
    display: block
}

.eleginos .lista{
text-align: center;
}

}

@media  screen and (max-width: 600px) {
.eleginos img, nav{
    display: none;
}


.container .productos img{
width: 250px;
height: 370px;
object-fit:none;
}


.container-cartas{
border-radius: none;
border: none;
box-shadow: none
}

.container-cartas{
display:block;
}

.carta{
padding: 7rem;
}

.eleginos{
margin-top: 3rem;
}

}



/**-------------------PAGINA PRODUCTOS-------------------**/

.titulo-productos{
    text-align: center;
    font-size: rem;
    font-weight: 700;  
    margin-bottom: 1rem;
}

.container{
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
}

.container .productos{
 border-radius: 8px;
 box-shadow: 0 2px 2px rgb(47, 12, 80);
 overflow: hidden;
 margin: 20px;
 text-align: center;
 transition: all 0.25s;
 padding: 1rem;
}

.container .productos:hover{
transform: translateY(-15px);
box-shadow: 0 12px 16px rgb(47, 12, 80);
}



/**-------------------PAGINA CATEGORIA-------------------**/

.gallery-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 150px;
    padding: 20px;
    gap: 10px;
    grid-template-areas:
    "ele4 ele1 ele2"
    "ele4 ele1 ele2"
    "ele4 ele3 ele3"
    "ele4 ele3 ele3";
}

.gallery__item{
position: relative;
transition: all 400ms ease;
}

.gallery__item:hover{
    transform: translateY(-50px);
    box-shadow: 5px 5px 20px rgb(47, 12, 80);
}

.gallery__item a{
padding: 0;
}

.gallery__item1{
    grid-area: ele1;
}

.gallery__item2{
    grid-area: ele2
}

.gallery__item3{
    grid-area: ele3
}

.gallery__item4{
    grid-area: ele4
}

.gallery__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} 

.gallery__tittle{
    position: absolute;
    bottom: 0;
    background: rgba(255, 255, 255,0.5);
    margin: 0;
    color: black;
    padding: 0;
}

h2{ 
    text-align: center;
    padding-top: 2rem;
}

@media (max-width:500px){

.gallery-container{
display: inline-block;
}

.gallery__item{
margin-bottom: 2rem;
}

}



/**----------------PAGINA CONTACTO----------------**/

.derecha{
height: 100vh;
width: 50%;
}

.izquierda{
background: url(/imagenes/hero.jpeg);
background-size: cover;
background-position: center;
width: 50%;
height: 100vh;
margin-left: 20px;
}

.splitscreen{
display: flex;
}

.splitscreen .derecha h1{
font-size: 4rem;
font-weight: bold;
margin-bottom: 2rem;
}

.derecha .titulo-form{
text-align:center;
}


@media (max-width:800px) {
.container-footer{
padding-top: 80px;
}   


.campo textarea{
margin-right: 50px;
}
}


@media (max-width:700px){
.izquierda{
    display: none;
}

.splitscreen{
display: inline-block;
}

.derecha{
width: auto;
}

.titulo-form {
text-align: center;
}

.container-footer{
 margin-top: 80px;
}

}