*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Open Sans', sans-serif;
    font-weight: 400;
}

/*tipografías*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
    --fondos-principales: rgb(255, 255, 255);
    --fondos-secundarios: rgb(109, 206, 144);
    --textos-primario: rgb(81, 81, 81);
    --texto-secundario: hsl(0 0 0);
    --textos-adicionales: rgb(255, 255, 255);
    --color-ecozona: rgb(02, 153, 02);

    --padding-gnral: 2rem 3rem 1rem 3rem,

    --escala-titulos: 3rem;
    --escala-destacados: 2.5rem;
    --escala-subtitulos:2rem;
    --escala-texto:1.25rem;

    --vidrios:  rgb(117, 207, 96);
    --plastik: rgb(233, 199, 59);
    --botellas-de-love: rgb(251, 142, 0);
    --papel-carton:  rgb(73, 108, 250);
    --metal:  rgb(143, 143, 143);
    --baterias:  rgb(218, 0, 0);
}



/*generalidades*/

a{ 
    text-decoration: none;
    display: block;
    margin: 1rem 0rem 1rem 0rem  ;
    /* padding: 1rem; */
    border-radius: 3em;
    margin-bottom: 0.5em;
    

}
button, .boton-activo {
    /*background-color: var(--fondos-secundarios);*/
    border: none;
    padding: 1vh;
    height: 3rem;
    min-width: fit-content;
    /*font-size: 2vh;*/

    border-radius:3em;

    display: flex;
    justify-content: center;
    align-items: center;
}
ul li{
    list-style: none;
}
/*header------------------------------------------------*/
header {
    background-color: var(--fondos-secundarios);
}

header .contenedora{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 70%;
}
/*logo responsive,*/

header .contenedora .logo {
    width: 10vh;
    height: 100%;
    
}

header .contenedora .logo img {

    justify-content: center;
    align-items: center;
}

/*links del menu, falta la opción hamburguesa que funcione :(*/
nav ul{
    display: flex;
    flex-direction: row;
}
nav ul li a {
    display: block;
    background-color: var(--secondary-color);
    border: solid 2px var(--main-color-suave);
    border-radius: 2rem;
    text-align: center;
    color: var(--color-ecozona);
    font-weight: 700;
    margin: 0.5em;
    padding: 0.25em 1em;    
}
nav ul li a:hover {
    color: beige;
    font-style: oblique;
}

h3, h4, p {
    margin: 0.5em 0;
    color: var(--texto-secundario);
}

/*Textos---------------------------*/

h1 {
    color: var(--color-ecozona);
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    text-align: end;
    letter-spacing: -0.1em;

}

.onboarding {
    margin: 5vh 0 5vh 0;
    color: var(--color-ecozona);
    font-size: var(--escala-destacados);
}

.onboarding h2 {
    font-weight: 800;
}

.onboarding p {
    font-weight: 600;
}

.instrucciones {
    color: var(--color-ecozona);
    margin: 5vh 2.5vw 5vh 2.5vw;
}

 .instrucciones p {
    font-weight: 400;
    font-size: 2.5vw;
    text-align: center;
 }

/*filtros materiales*/
.materiales {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}

.materiales a {
    font-size: 1em;
}
.boton {
    color: var(--fondos-principales);
    font-weight: 400;
    margin: 0.5em;
    padding: 0.25em 1em;
    text-align: center;
}

.boton-activo {
    opacity: 70%;
    color: var(--fondos-principales);
    font-weight: 700;
    text-align: center;
    padding: 0.25em 1em;
}

.boton:hover {
    font-style: oblique;
}

/* color de fondo botones de materiales----------------------------*/
#plasticos {
    background-color:var(--plastik);

}

#vidrios {
    background-color: var(--vidrios);
}

#botellas-de-amor{
    background-color:var(--botellas-de-love);
}

#papel-carton {
    background-color: var(--papel-carton);
}

#metales {
    background-color: var(--metal);
}

#baterias {
    background-color: var(--baterias);
}

#otromaterial {
    background-color: black;
}

/*apartado info específicos-------------------------------------------- */
.papel-y-carton {
    color: var(--papel-carton);
}

.papel-y-carton-border-bottom {
    border-bottom: 0.4em solid var(--papel-carton);
}

.papel-y-carton-border-right {
    border-right:0.4em solid var(--papel-carton) ;
}

.plastico {
    color: var(--plastik);
}

.plastico-border-bottom {
    border-bottom: 0.4em solid var(--plastik);
}
.plastik-border-right {
    border-right: 0.4em solid var(--plastik);

}

.vidrioo {
    color:var(--vidrios);
}

.vidrioo-border-bottom {
    border-bottom: 0.4em solid var(--vidrios);
}

.vidrioo-border-right {
    border-right:0.4em solid var(--vidrios);
}

.metal {
    color:var(--metal);
}

.metal-border-bottom {
    border-bottom: 0.4em solid var(--metal);
}

.metal-border-right {
    border-right:0.4em solid var(--metal);
}

.botella {
    color:var(--botellas-de-love);
}

.botella-border-bottom {
    border-bottom: 0.4em solid var(--botellas-de-love);
}

.botella-border-right {
    border-right:0.4em solid var(--botellas-de-love);
}

.bateria {
    color: var(--baterias);
}

.bateria-border-bottom {
    border-bottom: 0.4em solid var(--baterias);
}

.bateria-border-right {
    border-right:0.4em solid var(--baterias);
}

/*apartado info materiales general------------------------------------*/

.material-filtrado-info {
    display: grid;
    grid-template-columns: 30% 70%;

    justify-content: center;
    align-items: center;

    margin-top: 2em;
}

.material-ilustracion-refe {
    text-align: center;
}

.material-ilustracion-refe img {
    height: 20vh;
    justify-content: center;
    align-content: stretch;

}


.material-informacion div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.material-informacion div h4 {
    display: flex;
    flex-direction: column;
    font-weight: 600;
}

.material-informacion p {
    padding: 0;
    margin: 0;
}

.material-info-destacado {
    font-weight: 700;
    font-size: 2.5em;
    /*color:rgb(233, 199, 59);*/

}

.favear img{
    width:3rem;
    margin:0.5rem;
}

.que-si-que-no {
    display: flex;
    flex-direction: row;

}

.que-si-que-no div {
    padding: 0 2em 0 2em;
    width: 50%;
}

.que-si-que-no div ul li{
    list-style: disc;
}
.que-si-que-no h4 {
    font-weight: 700;
}


.material-info-parrafo h4{
    font-weight: 700;
    text-decoration: underline;
    /*color: rgb(233, 199, 59);*/

}

.material-info-parrafo span{
    font-weight: 700;
}

.material-info-parrafo li {
    list-style: disc;
    padding: 0.5em 0 0.5em 0;
}

#material-info-tabla ul li{
    list-style: disc;
}

/*titulos coloreados---------------------------------------------*/

.plasticos {
    color: var(--plastik);

    font-family: var(--titulos-importantes);
    font-weight: 700;
    font-size: 3em;

    margin: 0;
}

.vidrios {
    color: var(--vidrios);

    font-family: var(--titulos-importantes);
    font-weight: 700;
    font-size: 3em;

}

.botellas-de-amor{
    color: var(--botellas-de-love);

    font-family: var(--titulos-importantes);
    font-weight: 700;
    font-size: 3em;
}

.papeles-carton {
    color: var(--papel-carton);

    font-family: var(--titulos-importantes);
    font-weight: 700;
    font-size: 3rem;
}

.metales {
    color: var(--metal);

    font-family: var(--titulos-importantes);
    font-weight: 700;
    font-size: 3em;
}

.baterias {
    color: var(--baterias);

    font-family: var(--titulos-importantes);
    font-weight: 700;
    font-size: 3em;
}

.vidrios, .plasticos, .botellas-de-amor, .papeles-carton, .metales, .baterias {
    font-size: var(--escala-subtitulos);
    text-decoration: underline;
}

/*---------------------------------------------------------------*/
.titulos {
    display: block;
    margin: 1rem 0rem 1rem 0rem  ;
    padding: 1rem;
    background-color: var(--focus-color);
    border-radius: 3em;
    margin-bottom: 0.5em;
    color: var(--main-color-suave);

}

main {
    display: block;
    width: 70%;
    margin-inline: auto ;
}

footer {
    margin-top: 5rem;
    padding: 1rem;
    background-color: var(--fondos-secundarios);
    text-align: center;
    
    
}
.logofooter img {
    height: 1.5rem;
    width:auto;
    align-items: center;
}


nav.mobile{
    display:none;
}


/*favoritos-----------------------------------------------------*/

.titulo h3 {
    font-weight: 800;

    color: var(--color-ecozona);
}

.favorito {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 2rem 0 2rem 0;
}

.favorito img {
    width: 6rem;
    height: 6rem;
    margin-right: 1em;

}

.favorito h3 {
    display: flex;
    color: var(--color-ecozona);
    font-family: var(--titulos-importantes);
    font-weight: 700;
    font-size: 3em; 
}

.puntos {
    display: grid;
    grid-template-columns: 50%  50%;
    column-gap: 5rem;
    
}

.punto-fav {
   display: flex;
   flex-direction: row;

   margin: 2rem;
}

.punto-fav-icono img {
    width: 7rem;
    height: 7rem;
    margin-right: 1em;
}

.punto-fav-texto {
    font-size: 1rem;
    font-weight: 100;
    text-align: left; 
} 

.punto-fav-texto :first-child {
    color: var(--color-ecozona);
    text-decoration: underline;
    font-weight: 600 !important;
    font-size: 1.25rem;
}

.punto-fav-texto :last-child {
    font-style: oblique;
    font-weight: 500;
}

/*perfil---------------------------------------------*/
.perfildividido{
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    border: 4px solid var(--fondos-secundarios);
    box-shadow: 1em;
    border-radius: 3em;
    margin-top: 2em;
    
}

.perfildividido {
    padding: 1em;
}
.miperfilfoto {
    border-right: 4px solid var(--fondos-secundarios)
}
.miperfilfoto img {
    border-radius: 50em;
}
.miperfil {
    padding: 2rem;
}
#mi-perfil-titulo {
    font-size: var(--escala-subtitulos);
}
.miperfil h3 {
    font-weight: 700;
    color: var(--color-ecozona);
}

.miperfil p {
    font-style: italic;
}

.lineaperfil{
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    align-items: center;
   
}


footer {
    height: 3rem;
    margin-top: 2.5rem;
    padding: 1rem;
    background-color: var(--fondos-secundarios);

    font-size: 0.875rem;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    
    
}

footer p {
    margin: 0;
}
.logofooter img {
    height: auto;
    width:5rem;
    align-items: center;
}

/*media query---------------------------------------*/
@media (max-width: 400px){
    header .contenedora {
        width: 90%;
    }
    header .contenedora .logo {
        width: 10vh;
        height: 100%;
        margin: 1rem 0 0 0 ;
    }

    /*hamburguesa, no tocar*/
    nav.desktop {
        display:none;
    }

    nav.mobile {
        display:flex;
        justify-content: flex-end;
    }

    #menu-item {
        display:none;
    }

    /*fin de hamburguesa*/

    .onboarding h2{
        font-size: var(--escala-destacados);
        text-align: center;
    }

    .onboarding p {
        font-size: 1.5rem;
        text-align: center;
    }

    .instrucciones p {
        font-size: var(--escala-texto);
        text-align:left;
    }

    button, .boton-activo {
        height: 1rem;
        width: fit-content;
        font-size: 0.5rem;
    }
    .materiales div {
        margin: 1rem 0 1rem 0 ;
    }

    .materiales a {
        padding: 0;
        margin: 0;
    }


    /**mapas filtrados info***/

    .vidrios, .plasticos, .botellas-de-amor, .papeles-carton, .metales, .baterias {
        font-size: var(--escala-subtitulos);
        text-decoration: underline;
    }

    .material-info-destacado {
        font-size: 1.25rem;
    }
    .material-informacion div h4 {
        font-size: 0.875rem;
        font-weight: 400;
    }
    .material-informacion h4 {
        font-weight: 600;
    }
    .material-informacion div {
        flex-direction: column;
        align-items: flex-start;
    }

    .que-si-que-no{
        display: flex;
        flex-direction: column;
    }
    .que-si-que-no div {
        width: 100%;
    }
    .vidrioo-border-right, .metal-border-right, .bateria-border-right, .papel-y-carton-border-right, .plastik-border-right, .botella-border-right {
        border-right: 0 solid var(--fondos-principales);

    }
    .material-ilustracion-refe img {
        width: 5rem;
        height: auto;
    }
    #vidrio-vector {
        width:3rem;
        height: max-content;
    }
    #botella-vector, #bateria-vector {
        height: 15rem;
        width: 4rem;
    } 
    #papel-vector {
        height: 14rem;
        width: 7rem;
        
        margin-left:-2rem;
    }
    #metal-vector {
        width: 4rem;
        height: 10rem;

        margin-left:-1rem;
    }
    .baterias {
        font-weight: 700 !important;
    }


    /*fav*/
    .favorito {
        display: flex;
        flex-direction: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0.5rem 0 0.5rem 0;
    }
    
    .favorito img {
        width: 2rem;
        height: 2rem;
        margin-right: 0.2em;
    
    }
    
    .favorito h3 {
        font-size: 1.5rem; 
    }
    
    
    .puntos {
        display: grid;
        grid-template-columns: 50% 50%;
        column-gap: 0.5rem;
        
    }
    .punto-fav {
        display: flex;
        flex-direction: column;

        margin: 0.5rem;
    }

    .punto-fav-icono img {
        width: 2rem;
        height: auto;
        margin-right: 0.5em;
    }
    
    .punto-fav-texto {
        font-size: 0.875rem;
        font-weight: 100;
        text-align: left; 
    }

    /*perfil---------------------------------------------*/
.perfildividido{
    display: grid;
    grid-template-columns: 100%;
    align-items: center;
    border: 4px solid var(--fondos-secundarios);
    box-shadow: 1em;
    border-radius: 3em;
    margin-top: 2em;
    
}

.perfildividido {
    padding: 1em;
}
.miperfilfoto {
    border-right: 4px solid var(--fondos-principales)
}
.miperfilfoto img {
    width: 12rem;
    height: auto;
    border-radius: 50em;
}
.miperfil {
    padding: 0.875rem;
}
#mi-perfil-titulo {
    font-size: var(--escala-subtitulos);
    text-align: center;
}

.lineaperfil{
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
}
    footer {
        opacity: 0%;
    }

}

/*tablets*/
@media (max-width: 800px) 
{
    /* generalidades */ 
    a {
    display: block;
    border-radius: 3em;
    margin: 0;
    }
    button, .boton-activo {
    font-size: 1em;
    }

    /*menu*/
    nav.desktop {
        display:none;
    }

    nav.mobile {
        display:flex;
        justify-content: flex-end;
    }

    #menu-item {
        display:none;
    }
    .materiales  {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;


        font-weight: 400;
    }
    .instrucciones {
        color: var(--color-ecozona);
        margin: 2.5vh 1.5vw 2.5vh 1.5vw;
    }



    .material-info-destacado {
        font-size: 1.5rem;
    }
    .instrucciones p {
        font-weight: 400;
        font-size: 1.5rem;
        text-align:left;
    }
    .que-si-que-no{
        display: flex;
        flex-direction: column;
    }
    .que-si-que-no div {
        width: 100%;
    }
    .vidrioo-border-right, .metal-border-right, .bateria-border-right, .papel-y-carton-border-right, .plastik-border-right, .botella-border-right {
        border-right: 0 solid var(--fondos-principales);

    }

    .perfildividido {
        display: flex;
        flex-direction: column;
    }


    .miperfilfoto{
        border-right: 4px solid var(--fondos-principales);
    }
    .miperfilfoto img {
        width:15rem;
    }

        /*fav*/
        .favorito {
            display: flex;
            flex-direction: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 0.5rem 0 0.5rem 0;
        }
        
        .favorito img {
            width: 2rem;
            height: 2rem;
            margin-right: 0.2em;
        
        }
        
        .favorito h3 {
            font-size: 1.5rem; 
        }
        
        
        .puntos {
            display: grid;
            grid-template-columns: 50% 50%;
            column-gap: 0.5rem;
            
        }
        .punto-fav {
            display: flex;
            flex-direction: column;
    
            margin: 0.5rem;
        }
    
        .punto-fav-icono img {
            width: 2rem;
            height: auto;
            margin-right: 0.5em;
        }
        
        .punto-fav-texto {
            font-size: 0.875rem;
            font-weight: 100;
            text-align: left; 
        }
}