*{
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
}
body{
    font-family: "DM Sans", sans-serif;
    /* font-family: "Fjalla One", sans-serif; */
}
hr{
    margin: 2rem;
}

/* -------------------------------------- Desktop -------------------------------------------- */
/* Header */
header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1rem;
    background-color: white;
}

.logo {
    max-width: 6rem;
}

.nav-list {
    list-style-type: none;
    display: flex;
    gap: 3rem;
}

.nav ul li a {
    text-decoration: none;
    color: black;
    font-weight: 600;
    font-size: 1.2rem;
}

.abrir-menu,
.cerrar-menu {
    display: none;
}
.boton{
    text-decoration: none;
    background-color: rgb(17, 110, 59);
    border-radius: 10px;
    color: white;
    padding: .8rem;
    font-weight: 600;
    font-size: 1.2rem;
}
.boton:hover{
    background-color: rgb(10, 68, 36);
}
.boton_menu{
    display: none;
}

/* Footer */
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(17, 110, 59);
    color: white;
    padding: 1.5rem 0rem;
}
.linkFooter{
    margin-top: 1.5rem;
    text-align: center;
    
}
.linkFooter a{
    color: blue;
}
.footer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}
.logoFooter{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.logoFooter img{
    width: 6rem;
    background-color: white;
    padding: 1rem .9rem;
    border-radius: 100%;
}
.whatsapp {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: .4rem;
}
.whatsappNum{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}
.whatsappNum a{
    color: white;
}
.contactoRedesFooter{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    gap: 1rem;
}
.contactoRedesFooter p a{
    color: white !important;
}
.contactoRedes{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: .4rem;
}
.contactoFooter{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
}
.seguinos a{
    color: white !important;
}

/* Banner */
.banner{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url("assets/img/banner1.jpg");
    background-position: center;
    background-size: cover;
    padding: 5vw 0rem;
}
.banner h2{
    text-align: center;
    color: white;
    font-size: 5vh;
    margin: 0;
    padding: 2rem 0rem 0rem 0rem;
    letter-spacing: 3px;
}
.banner p{
    color: white;
    letter-spacing: 3px;
}


/* Quienes Somos */
.quienesSomos{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}
.quienesSomos img{
    width: 20rem;
}
.textoQuienesSomos{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2rem;
}
.quienesSomosTxt{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
}
.quienesSomosTxt p{
    max-width: 40rem;
}
.botonesMision{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: .5rem;
}
.descargar{
    border: 1px solid rgb(17, 110, 59);
    padding: .5rem;
    border-radius: 30px;
    color: rgb(17, 110, 59);
    text-decoration: none;
    transition: 500ms;
}
.descargar:hover{
    background-color: rgb(17, 110, 59);
    color: white;
}
.asociarseBtn{
    border: 1px solid rgb(17, 110, 59);
    background-color: rgb(17, 110, 59);
    padding: .5rem;
    border-radius: 30px;
    color: rgb(17, 110, 59);
    text-decoration: none;
    transition: 500ms;
    color: white;
}
.asociarseBtn:hover{
    background-color: white;
    border: 1px solid rgb(17, 110, 59);
    color: rgb(17, 110, 59);
}
.comisionBtn{
    border: 1px solid black;
    padding: .5rem;
    border-radius: 30px;
    color: black;
    text-decoration: none;
    margin-top: .5rem;
    transition: 500ms;
}
.comisionBtn:hover{
    background-color: black;
    color: white;
}

/* Ley */
.ley{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    background-color: rgb(17, 110, 59);
    color: white;
    padding: 0rem 1rem;
    gap: 1rem;
    
}
.ley img{
    width: 20rem;
}
.leyTexto{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    width: 40rem;
    gap: 1rem;
}

/* Recomendaciones */
.recomendaciones{
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
}
.derecha{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 1rem;
}
.izquierda{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: rem;
}
.cardRecomendaciones{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.cardRecomendaciones p{
    width: 22rem;
}
.cardRecomendaciones img{
    width: 6rem;
}
.tarjetasRecomendaciones{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1rem;
}

/* Datos utiles */
.telAyuda{
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
    gap: 2rem;
    color: white;
    max-width: 1000px;
    padding: 2rem 0rem;
}
.cardAyuda{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 250px;
    gap: 4px;
}
.cardAyudaP{
    font-size: .8rem;
}
.pCardsAyuda{
    color: white !important;
    text-decoration: none;
    width: 100%;
}
.containerTel{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(17, 110, 59);
    width: 100%;
}





.blackToWhite{
    width: 6rem;
    filter: invert(100%) contrast(100%);
}
.white{
    width: 7rem;
}
.whiteMuni{
    width: 5rem;
}


/* Asociarse */

.AsociarseContainer{
    background-color: rgb(17, 110, 59);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem 0rem;
    gap: 1rem;
    margin-top: 2rem;
}

.AsociarseContainer h2{
    color: white;
}

.CardsAsociarse{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.cardAsociarse{
    background-color: white;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    padding: 1rem;
    border-radius: 10px;
}

.HeadBotonAsociarse{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 2rem;
}

.HeadBotonAsociarse a{
    border: 1px solid rgb(17, 110, 59);
    background-color: rgb(17, 110, 59);
    padding: .5rem;
    border-radius: 30px;
    color: rgb(17, 110, 59);
    text-decoration: none;
    transition: 500ms;
    color: white;
}

.HeadBotonAsociarse a:hover{
    background-color: white;
    border: 1px solid rgb(17, 110, 59);
    color: rgb(17, 110, 59);
}
.cardAsociarse ul li{
    list-style: none;
}






/* Contacto */
.contacto{
    width: 400px;
}
.formulario{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
}
/* .contacto p a{
    color: green;
} */
input{
    border: 1px solid gray;
    border-radius: 3px;
    font-size: 1rem
}
textarea{
    border: 1px solid gray;
    border-radius: 6px;
    font-size: 1rem;
}

.contactoImagen{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3rem;
    margin-bottom: 3rem ;
}
.contactoImagen img{
    width: 34rem;
    border-radius: 10px;
}
.botonContacto{
    margin-top: 1rem;
    width: 5rem;
    background-color: rgb(21, 107, 78);
    color: white;
    padding: .8rem 1rem .8rem 1rem;
    border:0px;
    border-radius: 10px;
}

/* Comision Directiva */
#comision {
    margin: 3rem 0rem;
}
.comision{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.comision h2{
    margin-bottom: 2rem;
}
.comisionTarjetas{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 68rem;
}
.comisionCard{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    padding: 1.5rem;
    border-radius: 10px;
    width: 14rem;
}
.comisionCard p{
    color: rgb(17, 110, 59);
}

/* Asociarse */
.asociarse{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}
.asociarseCard{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 200px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    padding: 0rem 0rem 2rem 0rem;
    border-radius: 10px;
    gap: 1rem;
}
.asociarseCard img{
    width: 100%;
}
.asociarse button{
    border: 1px solid rgb(17, 110, 59);
    background-color: rgb(17, 110, 59);
    padding: .5rem;
    border-radius: 30px;
    text-decoration: none;
    transition: 500ms;
    color: white;
}
.asociarse button a{
    text-decoration: none;
}











/* -------------------------------------- Mobile -------------------------------------------- */

@media screen and (max-width: 1020px){
    /* Header */
    header{
        justify-content: space-between;
        padding: 1rem;
    }
    .logo{
        width: 5rem;
    }
    .abrir-menu,
    .cerrar-menu {
        display: block;
        border: 0;
        font-size: 1.25rem;
        background-color: transparent;
        cursor: pointer;
    }

    .abrir-menu {
        color: #1c1c1c;
    }

    .cerrar-menu {
        color: #ececec;
    }

    .nav {
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 1rem;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: white;
        padding: 2rem;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
    }

    .nav.visible {
        opacity: 1;
        visibility: visible;
    }
    
    .nav-list {
        flex-direction: column;
        align-items: end;
    }

    .nav-list li a {
        color: #ecececec;
    }
    .boton{
        display: none;
    }
    .boton_menu{
        display: flex;
        text-decoration: none;
        background-color: rgb(17, 110, 59);
        border-radius: 10px;
        color: white !important;
        padding: .8rem;
        font-weight: 600;
        font-size: 1.3rem;
    }
    .boton_menu:hover{
        background-color: rgb(10, 68, 36);
    }
    .no-scroll {
        overflow: hidden;
    }


    /* Banner */
    .banner h2{
    font-size: 1.3rem;
    }
    .banner p{
    font-size: .8rem;
    }
    /* Footer */
    footer{
        padding: 2rem;
    }

    /* Quienes Somos */
    .quienesSomos{
        margin: 2rem;
    }

    /* Ley */
    .ley{
        padding: 2rem;
    }

    /* Recomendaciones */
    .recomendaciones{
        margin: 2rem;
    }

    /* Datos utiles */
    .cardAyuda{
        width: 150px;
    }

    

    /* Contacto */
    .contactoImagen{
        margin: 2rem;
    }
    .contactoImagen img{
        width: 100%;
    }

    .socioMembresia{
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 1rem;
        margin: 1rem 0rem;
    }
    .activo{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }


    /* ============================================= */
    
}



.formularioAsociar{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 3rem;
}

.cartel{
    background-color: #4cd159;
    padding: .4rem;
    color: white;
    width: 10.8rem;
}
.formAsociar{
    width: 100%;
}
.formAsociar form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
.formAsociar form input{
    width: 100%;
    margin: .3rem 0rem;
    border: 0px;
    border-bottom: 1px solid rgb(51, 51, 51);
}

.formAsociar form select{
    border: 0px;
    border-bottom: 1px solid rgb(51, 51, 51);
    background-color: white;
    margin: 1rem 0rem;
}

.socioMembresia{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 1rem 0rem;
}
.activo{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}