/*
// Tamaño de Media Queries 
$telefono: 480px;
$tablet: 768px;
%desktop: 1024px;*/

:root{
    --primario: #e8505b;
    --secundario: #455a64;
    --negro: #000;
    --blanco: #FFFF;
    --grisClaro: #eceeef;

    --fuenteprincipal: 'Roboto', sans-serif;

    --separacion: 5rem;
}
h2{
    color: gray;
}
/*globales*/
html {
    font-size: 62.5%;
    box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}

body{
    font-family: var(--fuenteprincipal);
    font-size: 1.6rem;
}
p {
    color: var(--negro);
    font-size: 2rem;
}
.contenedor {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
    display: block;
}
header{
    display: flex;
    flex-direction: column;
    padding: var(--separacion);
    align-items: center;
}

@media (min-width: 768px) {
    .header{
        flex-direction: row;
        justify-content: space-between;
    }
    .header_logo{
        width: 15%;
        margin-bottom: 5rem;
    }
}

@media (min-width: 768px) {
    .header_logo{
        margin-bottom: 0;
    }
}
.navegacion{
    display:flex;
    flex-direction: column;
    padding: var(--separacion);
    align-items: center;
    gap: 2rem;
    width: 100%;
}
@media (min-width: 768px) {
    .navegacion{
        width: auto;
        flex-direction: row;
    }
}
.navegacion_link{
    font-size: 2rem;
    font-weight: 700;
    color: var(--negro);
}

.navegacion_link_registrar{
    background-color: var(--primario);
    font-size: 2rem;
    border-radius: 1rem;
    font-weight: 700;
    width: 100%;
    color: var(--negro);
    border: none;
    color: var(--blanco);
    padding: 2rem 11rem;
    box-sizing: unset;
    text-align: center;
}
@media (min-width: 769px) {
    .navegacion_link_registrar{
        width: auto;
        padding: 2rem 2rem;
    }
}
.seccion0-1{
    background-color: var(--primario);
    padding: var(--separacion);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.seccion0-1 h3{
    color: var(--blanco);
    font-size: 35px;
    text-align: center;
}
@media (min-width: 769px) {
    .seccion0{
        display: flex;

    }
}
.formulario_campo{
margin-bottom: 2rem;
}
.formulario_label{
    display: block;
    text-transform: uppercase;
    color: var(--blanco);
    font-weight: 700;
}
.formulario_input{
    width: 100%;
    text-transform: uppercase;
    color: var(--blanco);
    border: none;
    padding: 2rem;
}
.formulario_submit{
    background-color: rgb(75, 75, 75);
    border: none;
    color: var(--blanco);
    width: 100%;
    border-radius: 10px;
    padding: 1rem;
    font-weight: 700;
}
@media (min-width: 769px) {
    .inicio{
        height: 200px;
    }
    .seccion2{
        width: 1200px;
        padding-top: 9rem;
    }
}
/*https://getwaves.io*/
.ola{
    background-color: var(--primario);
    padding: 0;
}
.olaimg{
    padding: 0;
}
.seccion1 {
    background-color: var(--primario);
    height: 1200px;
}
.textstrong{
    font-size: 39px;
    margin: 0 5rem;
    text-align: center;

}
@media (min-width: 769px) {
    .textstrong{
        text-align: center;
        width: 100%;
    }
}
.testimoniales{
    text-align: center;
}
.textspan{
    color: var(--blanco);
}
.textperfil{
    display: inline-block;
    width: auto ;
    margin: 0;
}
.textseccion1{
    color: var(--blanco);
    text-align: center;

}
.pasos-contenedor{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.paso1{
    background-color: var(--grisClaro);
    padding: var(--separacion);
    border-radius: 8%;
    height: 313.3px;
    margin: 15px 0;
}
.paso2{
    background-color: var(--grisClaro);
    height: 313.3px;
    padding: var(--separacion);
    border-radius: 8%;
    margin: 15px 0;
}
.paso3{
    background-color: var(--grisClaro);
    padding: var(--separacion);
    border-radius: 8%;
    height: 313.3px;
    margin: 15px 0;
}



/* Perfiles*/
@media (min-width: 769px) {
    .todas-pers, .todas-pers2{
        margin: 0;
        width: 100%;
        display: flex;
    }
    .pers{
        width: 600px ;
        height: 200px ;
        margin-right: 2% ;
        display: inline-block;

    }
    .pers-2{
        width: 280px ;
        height: 200px ;
        margin-right: 2% ;
        display: inline-block;
    }
    .pers-3{
        width: 210px;
        height: 600px;
        display: inline-block;
        margin-right: 2% ;
    }
    .pers-4{
        width: 450px;
        margin-right: 2% ;
        display: inline-block;
    }
    .pers-5{
        width: 450px;
        margin-right: 2% ;
        display: inline-block;
    }
}
.perfil, .perfil-2, .perfil-3, .perfil-4, .perfil-5{
    padding: 2%;
    border-radius: 80%;
    height: 80px;

}
.pers, .pers-2, .pers-3, .pers-4, .pers-5 {
    background-color: var(--secundario);
    border-radius: 5%;
    padding: 10px;
    margin-bottom: 12px;
}
.flex-per, .flex-per-2,.flex-per-3, .flex-per-4 , .flex-per-5 {
 display: flex;
 width: 100%;
}
.flex2-per, .flex2-per-2, .flex2-per-3, .flex2-per-4, .flex2-per-5 {
    width: 100%;
}
.textperfil, .textperfil-2, .textperfil-3, .textperfil-4, .textperfil-5 {
    color: var(--blanco);
    width: 100%;
}
.texto-pers, .texto-pers-2, .texto-pers-3, .texto-pers-4, .texto-pers-5 {
    padding-left: 25px;
    color: var(--blanco);
    padding-bottom: 5px;
}
/* RESTARURANTES FAV */
@media (min-width: 768px) {
    .restaurantes-fav{
        width: 100%;
        display: flex;
        text-align:justify ;      
        margin-right: 20px;  
    }
    .seccion3-1{
        margin-right: 45px;


    }
    .ensalada{
        height: 100%;
        width: 35%;
        padding-top: 50%;
        display: inline-block;
        float: left;
        
    }
    .estrellas{
        width: 40% !important;
        margin-left: 0 !important;
        display: inline-block !important;
    }

}
.seccion3{
    max-width: 1200px;
    margin: 0 auto;

}
.seccion3 h2 {
    text-align:center;
    font-size: 35px;
}
.seccion3-1{
 background-color: #ffffff;
 box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
 flex-direction: column;
 text-align: center;
 margin-bottom: 25px;
 padding: var(--separacion);
}
.seccion3-2{
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    flex-direction: column;
    text-align: center;
    margin-bottom: 25px;
    padding: var(--separacion);
   }
.estrellas{
    width: 50%;
    margin-left: 25%;
}
.rojo{
    color: red;
}
.comentario{
    padding: 2rem 5rem;
}
/* Flex final */
.seccion-final h2{
    font-size: 30px;
    color:grey;
    text-align: center;
}
.boton{
    background-color: var(--primario);
    color: var(--blanco);
    padding: 10px;
    border-radius: 10%;
    border: none;
    margin-bottom: 10px;
}
@media (min-width: 768px) {
    .flex-final{
        display: flex;
    }
    .hijo-final{
        width: 100%;
    }
    .seccion-final{
        margin-bottom: 15px;
    }
    .footer-padre{
        display: flex;
        gap: 2rem;
        justify-content: space-between;
    
    }
    .hijo{
        display: flex;
        flex-direction: column;
    }
    .hijo h3{
        text-align: left !important;
    
    }
    .sin-azul{
        color: var(--blanco);
        padding-bottom: 15%;
    }
    .especial{
        margin-bottom: 40px;
    }

}
/*Footer*/
.footer{
    background-color: var(--secundario);
    color: var(--blanco);
    padding: 10px;

}
.footer h3{
    text-align: center;
}
.footer p{
    color: var(--blanco);
}
.sin-azul{
    color: var(--blanco);
    padding-left: 8%;
}