/* reset */
*{
    margin: 0;
    padding: 0;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* header */

header{
    height: 100px;
    /*background: #f5f5f5;*/
    padding: 0 50px;
    color: #5f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.logo{
    text-transform: uppercase;
    color: #5c5d5e;
    font-weight: 200;
}

.menu a{
    color:#5c5d5e;
    text-transform: capitalize;
    text-decoration: none;
    padding: 0 10px;
    transition: 0.4s;
}

.mostrar-menu,
.esconder-menu{
    font-size: 30px;
    cursor: pointer;
    display: none;
    transition: 0.4s;
}

.mostrar-menu{
    order:1;
}

.menu a:hover,
.mostrar-menu:hover,
.esconder-menu:hover{
    color: rgb(240, 197, 6);
}

#check{
    display: none;
}
/*banner
#banner{
    padding: 0 50px;
    background-image: url(../img/banner/bannerrrss.jpg);
    height: 45vh;  
    background-size: cover;
    background-position: center;
    margin-bottom: 30px;
}
#banner::before{
    content: "";
    background: rgba(77, 77, 92, 0.6);
    position: absolute;
    width: 100%;
    height: 45vh;
    left: 0;
}
.contenido-banner{
    position: relative;
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contenido-banner h3{
    font-size: 30px;
    font-weight: 400;
    padding: 10px 0px;
}
.contenido-banner h3 span{
    font-weight: 150;
}
.boton-ir{
    text-decoration: none;
    color: tomato;
    border: 1px solid rgb(255, 99, 71);
    padding: 20px 40px;
    align-self: baseline;
    border-radius: 20px;
    transition: all 0.4s;
    margin-top: 20px;
}
.boton-ir:hover{
    background: rgba(255, 99, 71, 0.2);
    color: #fff;
} 

/*slider*/

.slider{
    width: 75%;
    margin: auto;
    height: 75%;
    overflow: hidden;
    object-fit: cover;
    border-radius: 30px;
}
.slider ul{
    padding: 0;
    display: flex;
    width: 400%;

    animation: slider 20s infinite alternate;
    animation-timing-function: linear;
    
}
.slider li{
    width: 100%;
    list-style: none; /*hace deaparecer los puntos de las listas*/
}
.slider li img{
    width: 100%;
}

@keyframes slider{ /*animacion slider*/
    0% {margin-left: 0;}
    20% {margin-left: 0;}

    25% {margin-left: -100%;}
    45% {margin-left: -100%;}

    50% {margin-left: -200%;}
    70% {margin-left: -200%;}

    75% {margin-left: -300%;}
    100% {margin-left: -300%;}
}
/*/slider*/

.texto-encabezado {
    text-align: center;
    padding: 30px;
}
h1{
    font-weight: 400;
    color: #4c4d4e;
}
h2{
    font-weight: 200;
    color: #5c5d5e;
}
h3{
    color:#5c5d5e;
    font-size: 20px;
    margin: 15px 0px;
    font-weight: 400;
}
p{
    color: #000;
    font-size: 18px;
}
/*#text-comentario div h4{
    color:#5c5d5e;
    font-size: 20px;
    margin: 15px 0px;
}*/

/*items foto y texto */

#text-comentario{
    padding: 20px 60px;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    flex-wrap: wrap; /* hace que vayan enrollandose los items de acuerdo al tamaño del contenedor*/
    flex: 1 /*mantiene un minimo de proporciones*/
}
#text-comentario img{
    display:inline-flex;
    border-radius: 20%;
    
}
#text-comentario div{
    padding: 30px 40px;
    width: 300px;
}

#text-comentario div p{
    color: #4d4d5c87;
    font-size: 18px;
}

.boton-ver{
    display: inline-block;
    text-decoration: none;
    color: rgb(240, 197, 6);
    padding: 10px 30px;
    border: 1px solid rgb(240, 197, 6);
    border-radius: 30px;
    margin-top: 15px;
    transition: all 0.4s;
}
.boton-ver:hover{
    background: rgb(240, 197, 6, 0.8);
    color:#fff;
}
/*receta*/
#receta{
    padding: 0 70px;
    margin-bottom: 30px;
}

/*instafeed*/
.instafeed{
   display: flex;
   justify-content: space-around; 
   flex-wrap: wrap;
   padding-bottom: 30px;
}
.instafeed img{
    display: inline-flex;
    width: 200px;
    transition: 0.4s;
    object-fit: cover;
    padding: 5px;
}
.instafeed-texto{
    flex-wrap: wrap;
    text-align: center;
    font-size: 22px;
    padding-bottom: 20px;
    color: #5c5d5e;

}
.instafeed img:hover{
    transform: scale(1.2);
}

/*publicidad*/
.publicidad{
    display: flex;
}
.sidebar-publicidad{
    display: flex;
}

/* footer*/

.pie-pagina{
    background-color: rgb(240, 197, 6);
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
}
.social{
    display: inline-block;
    padding: 4rem;
    
}
.social:first-child{
    margin-right: auto;
}
.pie-pagina p{
    color:azure;
    font-weight: 200;
    font-size: 20px;
}

.pie-pagina img{
    transition: transform 1s;
}
.pie-pagina img:hover{
    transform: rotate(360deg);
}










/*responsive*/
@media(max-width: 768px){
    /*header */
    .mostrar-menu,
    .esconder-menu{
        display: block;
    }

    .menu{
        position: fixed;
        width: 40%;
        height: 100vh;
        background: #f5f5f5;
        right: -100%;
        top: 0;
        text-align: center;
        padding: 100px 0px;
        z-index: 100;
        transition: 0.08s;
    }
    .menu a{
        display:block;
        padding: 20px;
    }
    .esconder-menu{
        position: absolute;
        top: 40px;
        right: 40px;
    }
    #check:checked ~ .menu{
        right:0;
    }
    /* caja de texto */
    #text-comentario{
        flex-direction: column;
        align-items: center;
        padding: 20px 20px 20px 30px;
    }
    /*#datos-form{
        flex-direction: column; formulario de contacto para que se muestre en linea vertical 
    }*/

    .instafeed-texto{
        flex-direction: column;
    }

    /*footer*/
    .pie-pagina{
        flex-direction: column;
    }
    .social{
        justify-content: center;
    }
    .social:first-child{
        margin-inline: initial;
    }
    
}