:root{
    --colorPrimario: #02d002;
    --colorSecundario: #ffffff;
    --colorTres: #f75002;
    --colorCuatro:#f29e02;
    --colorCinco: #374059;
    --colornegro: #000000;
    --colorhover: #666666;
    --colorExtra: #333;
    --volorRgba: rgba(255,255,255,0.66);


    --FuentePrincipal: 'Poppins', sans-serif;
    --FuenteSecundaria:font-family: 'Lato', sans-serif;
}

.contenedor{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
h1,h2,h3,p{
    font-family: var(--FuentePrincipal);
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}

html {
    box-sizing: border-box;
    font-size: 62.5%; /*1REM = 10PX*/
 }
*, *:before, *:after {
    box-sizing: inherit;
}
body{

    font-size: 1.6rem;  
    line-height: 2;
}
img{
    width: 100%;
}

/*header */
.header{
    background-image: linear-gradient(
        90deg,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%),url(../img/hero.jpg);
        background-color: rgba(255,255,255,0);
    height: 90vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

}
.header__logotipo{
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--colornegro);
}
.header__fijo{
    position: fixed;
    width: 100%;
    z-index: 10000;
    box-shadow: 3px 6px 40px 5px #c1c1c1;
   



}
.header__contenedor{
   
    background-color: var(--colorSecundario);
    display: flex;   
    justify-content: space-between;
    align-items: center;
    padding: 0 4rem;
    
  
   
}
.header__nav{
    display: flex;
    justify-content: space-between;
}
.header__opcion{
    font-family: var(--FuentePrincipal);
    padding-right: 2rem;
    font-weight: bold;
    color: var(--colornegro);
}
.header__link{
    font-weight: 400;
    transition-property: color;
    transition: all .2s ease-in-out;

}
.header__link:hover{
    color: var(--colorhover);
}
.header__intro{
    position: relative;
}
.header__informacion{
    position: absolute;
    top: 16rem;
    padding: 10rem;
    width: 70%;
}
.header__titular{
    font-size: 5rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-family: var(--FuenteSecundaria);
    color: var(--colorSecundario);
    line-height: 1.3;
}
.header__texto{
    color: var(--colorSecundario);
    font-weight: 400;
    font-size: 1.8rem;
}
.header__botones{
    display: flex;
    align-items: center;
}
.header__boton{
    display: flex;
    justify-content: space-between;
    margin: 1rem;
}
.header__boton--uno{
    
    background-color: var(--colorPrimario);
    padding: 1rem 2rem;
    color: var(--colorSecundario);
    font-size: 2rem;
    border-radius: .2rem;
    text-align: center;
    align-items: center;
    
}
.header__boton--dos{
    border-radius: .2rem;
    background-color: var(--colorSecundario);
    color: var(--colorCinco);
    padding: 1rem 2rem;
    font-size: 2rem;
}
/*seccion uno */
.uno{
    margin-top: 9rem
}
.uno__contenido{
display: grid;
grid-template-columns: 1fr 3fr;
}
.uno__titular{
    font-size: 4rem;
    font-weight: 400;
    color: var(--colorhover);
    font-family: var(--FuenteSecundaria);
}
.uno__txt{
    color: var(--colorCinco);
    padding: 2rem;
    padding-bottom: 0;

}
.uno__cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3rem;
    margin-top: 5rem;
}
.uno__subtitle{
    font-size: 2rem;
    color: var(--colorExtra);
    padding: 0;
    margin: 0;
    font-weight: 600;
}
.uno__fecha{
    padding: 0;
    margin: 0;
}
.uno__info{
    color: var(--colorhover);
}
.uno__boton{
  
   font-size: 2rem;
   font-weight: bold;
   color: var(--colorPrimario);
}
/*seccion tres - galeria uno */
.tres{
    margin-top: 9rem;
}
.tres__contenedor{
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    column-gap: 1rem;
}
.tres__dos--dos{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
}

.cinco{
    margin-top: 9rem;
}
.cinco__contenido{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4rem;
    align-items: center;
}
.cinco__img{
    padding: 6rem;
    z-index: -222;
}

.cinco__texto--title{
    font-weight: 400;
    color: var(--colorCinco);
    font-size: 3rem;
    width: 50%;
}
.cinco__texto--txt{
    width: 60%;
    color: var(--colorhover);
}
.cinco__texto--boton{
    color: var(--colorPrimario);
    font-size: 2rem;
    font-weight: bold;
}
/*seis */

.seis__contenido{
    
    display: grid;
    background-color: var(--colorCinco);

    grid-template-columns: repeat(2, 2fr);
    height: 50rem;
    margin-top: -10rem;
}
.seis__texto{
    padding: 5rem;
    z-index: 1000;
}
.seis__img{
    
    position: relative;
    
}
.seis__img img{
    height: 70rem;
    width: 64rem;
   
    
    position: absolute;
    top: -5rem;
    padding: 4rem;
}
.seis__title{
    color: var(--colorSecundario);
    font-weight: 400
}
.seis__txt{
  color: var(--volorRgba);
  font-size: 2rem;
}
.seis__boton{
    color: var(--colorPrimario);
    font-size: 2rem;
}
/*siete */

.siete{
    margin-top: 20rem;
}
.siete__informacion{
    display: grid;
    grid-template-columns: repeat(3,2fr);
    text-align: center;
}
.siete__numero{
    font-size: 8rem;
    padding: 0;
    margin: 0;
    font-weight: bold;
    line-height: 1.7;

}
.siete__numero--rojo{
   color: var(--colorTres);
}
.siete__numero--amarillo{
color: var(--colorCuatro);
}
.siete__numero--azulO{
  color: var(--colorCinco);
    }
.siete__txt{
    padding: 0;
    margin: 0;
    line-height: 0;
    font-size: 2rem;
}
/*carrusel */
.carrusel{
    margin-top: 9rem;
}
.carrusel img{
    height: 30rem;
}
.carrusel__img{
    background-image: url(../img/slider.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 80rem;
}
.carrusel__texto{
    padding-top: 15rem;
    width: 70%;
    margin: 0 auto;
    color: var(--colorSecundario);
    font-size: 4rem;
    font-weight: 500;
}
.carrusel__autor{
    width: 70%;
    margin: 0 auto;
    color: var(--colorSecundario);
    font-size: 2rem;
    font-weight: bold;

}
/*eventos */
.general{
    background-color: #f7f7f7;
    padding-bottom:20rem;
}
.evento{
    padding-top: 9rem;
   

}
.contenedor__eventos{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.evento__uno{
    display: grid;
    grid-template-columns: repeat(2,2fr);
    gap: 2rem;
}
.evento h2{
    font-weight: 400;
    font-size: 3rem;
    padding-bottom: 2rem

}
.evento__fecha{
    color: var(--colorhover);
    font-weight: bold;
}
.evento__titulo{
    font-size: 2rem;
    color: var(--colorExtra);
}
.evento__texto{
    color: var(--colorhover);
}
.evento__boton a{
    color: var(--colorPrimario);
    font-size: 2rem;
}
/* blog */
.blog{
    margin-top: 9rem;
}
.blog__primera{
   padding:5rem 0;
    display: flex;
    padding-bottom: 4rem;
    
}
.blog__primera h2{
    font-size: 3rem;
    font-weight: 400
  
}
.blog__primera p{
    width: 60%;
    margin: 0 auto;
    color: var(--colorhover);
}
.blog__segunda{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
   
}
.segunda__card{
background-color: var(--colorSecundario);
}

.card__texto{
    padding: 2rem;
}
.card__titulo{
    font-weight: 300;
}
.card__subtitulo{
    color: #c1c1c1;
}
.card__txt{
    font-size: 1.7rem;
    color: var(--colorhover);
}
.formulario__contenedor{
    padding-top: 15rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
    align-items: center;
}
.formulario__texto h2{
    font-size: 4rem;
    font-weight: 500;


}
.formulario__texto p{
    color: var(--colorhover);
}
.formulario__contacto input{
    width: 100%;
    padding: 2rem;

    margin-bottom: 2rem;
    border: none;
    border: #c1c1c1;
   
}
.formulario__contacto input::placeholder{
    font-size: 2rem;
}
.formulario__boton {
    background-color: var(--colorPrimario);
    color: var(--colorSecundario);
    font-size: 2.5rem;
    font-weight: bold;
    
}
/*socios */
.socios{
    margin-top: 9rem;
    text-align: center;
    background-color: var(--colorSecundario);
}
.socios h2{
    font-size: 5rem;
    color: var(--colorExtra);
    font-weight: 500;
}
.contenedor__socios{
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
/*ultima */
.ultima{
    margin-top: 9rem;
    background-image: linear-gradient( 
        90deg,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%),url(../img/dos.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 50rem;
}
.ultima__texto{
    padding-top: 6rem;
}
.ultima__texto h2{
    font-size: 6rem;
    color: var(--colorSecundario);
    font-weight: 500;
    width: 80%;
    letter-spacing: 1px;
    line-height: 80px;
}
.ultima__boton--verde{
    background-color: var(--colorPrimario);
    padding: 3rem;
    font-size: 2rem;
    color: var(--colorSecundario);
    font-weight: bold;
    margin-right: 2rem;
}
.ultima__boton--blanco{

    background-color: var(--colorSecundario);
    padding: 3rem;
    font-size: 2rem;
    color: var(--colornegro);
    font-weight: bold;

}
/*footer */
footer{
    background-color: var(--colornegro);
    padding: 1rem;
    color: var(--colorSecundario);
}
footer {
    display: flex;
    align-items: center;
   justify-content: space-around;
    
}
.footer__redes i{
margin-right: 5rem;
font-size: 2rem;
    
}
/*menu */
.menu-icon{
    display: none;
}
@media (max-width:768px){
  
     p{
         font-size: 1.5rem !important;
     }
    /*navegacion */
    .menu-icon{

        display: block;
        margin-left: 2rem;
        font-size: 3rem;
    }
    .header__contenedor{
        display: block;
    }
    .header__logo{
        display: flex;
        align-items: center;
    }
    .header__logotipo{
        font-size: 2rem;
       padding-right: -2rem;
      text-align: center;
    }
    .header__nav{
        display: block;
    }
    .header__opcion{
        padding-right: 0;
        color: var(--colornegro);
    }
    .header__link{
        color: var(--colornegro);
        font-size: 1rem;
        
    }
    /*header intro */
    .header__informacion{
        padding: 1rem;
        top: 5rem;
        width: auto;
    }
    .header__titular{
        font-size: 2rem;
  
    }
    .header__texto{
        font-size: 1.5rem;
      
    }
    .header__botones{
        display: block;
    }
    .header__boton--uno,.header__boton--dos{
     font-size: 1rem;
    }
    /*seccion uno */
    .uno__contenido{
        display: block;
        grid-template-columns: none;
    }
    .uno__titular{
        font-size: 2rem;
    }
    .uno__txt{
        
        margin-left: -2rem;
    }
    .uno__texto{
        font-size: 1rem;
    }
    .uno__cards{
        display: block;
      

    }
    .uno__card{
        padding-bottom: 2rem;
        margin-bottom: 4rem;
        border-bottom: 2px solid var(--colorTres);
    }
    /*tres */
    .tres__contenedor{
        display: block;
    }
    .tres__dos--dos{
        display: block !important;
    }
    .tres__img{
        display: none;
    }
    /*cinco */
    .cinco__contenido{
        display: block;
    }
    .cinco__texto--title{
        width: 100%;
    }
    .cinco__texto--txt{
        width: 100%;
    }
    .cinco__img{
        padding: 0;
    }
    /*seis */
    .seis{
        margin-top: 15rem;
    }
    .seis__contenido{
        display: block;
        height: auto;
    }
    .seis__texto{
        padding: 1rem;
    }
    .seis__txt{
        font-size: 2rem;
    }
    .seis__img img{
        width: 100%;
        height: auto;
        padding: 0;
        top: 2rem;
        margin-bottom: 20rem;
    }
    /*sisete */
    .siete{
        margin-top: 50rem;
    }
    .siete__informacion{
        display: block;
    }
    /*carruesel */
    .carrusel__texto{
        font-size: 2rem;
        padding-top: 10rem;
        width: 100%;
        padding: 1rem;
    }
    .carrusel__autor{
        font-size: 2rem;
    }
    .general{
        padding-bottom: 0;
    }
    /*evento */
    .evento h2{
        font-size: 2rem;
    }
    .contenedor__eventos{
        display: block;
    }
    .evento__uno{
        display: block;
    }
    .evento__titulo{
        font-size: 1rem;
    }
    .evento__texto{
        font-size: 1.5rem;
    }
    /*blog
     */
     .blog{
         margin-top: 1.5rem;
     }
     .blog__primera{
         display: block;
     }
     .blog__primera p{
         width: 100%;
         font-size: 1rem;
     }
     .blog__segunda{
         display: block;
     }
     .formulario__contenedor{
         display: block;
     }
     /*socios */
     .socios h2{
         font-size: 2rem;
     }
     .contenedor__socios{
         display: block;
     }
     /*ultima */
     .ultima{
         text-align: center;
         padding-bottom: 20rem;
         height: auto;
     }
     .ultima__texto h2{
         width: 100%;
         font-size: 2rem;
     }
     /*footer */
     footer{
         display: block;
         text-align: center;
     }

}