/*------------------------------------------------------
ESTILOS GENERALES
------------------------------------------------------*/
* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}


body {
    font-family: 'Open Sans', sans-serif;
}



h1,
h2,
h3 {
    font-family: "Dosis", sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    text-align: center;
    letter-spacing: 0.23em;
}

h1 {
    color: white;
    font-size: 1.1rem;
}

h2 {
    margin-bottom: 2.2em;
    /*   la mayoría de h2 tienen un margin grande por abajo */
    font-size: 1.5rem;
}


h3 {
    font-size: 1.2rem;
}

p {
    line-height: 1.5em;
}

li {
    list-style-type: none;
}

a {
    color: black;
    text-decoration: none;
}


.grey-section {
    background-color: rgb(240, 240, 240);
}

.padding-extra { /* cuando quiero aplicar padding en todos los lados */
    padding: 3em 4dvw; 
}

.padding-lateral{ /* cuando solo quiero aplicar padding a los laterales */
    padding-left: 4dvw;
    padding-right: 4dvw;
}


/*------------------------------------------------------
ESTRUCTURA
------------------------------------------------------*/
.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex.center-vertical {
    align-items: center;
}

.ancho-maximo {
    max-width: 1260px;
    margin: 0 auto;
}
 

/*------------------------------------------------------
 BOTONES
------------------------------------------------------*/

.boton {
    display: inline-block;
    padding: 0.8em 2em;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.boton.negro {
    background-color: #303030;
    color: white;
}


.boton.blanco {
    background-color: #bebebe;
    color: black;
}

.boton:hover {
    background-color: #6B9645;
    color: white;
}

/*------------------------------------------------------
BARRA DE NAVEGACIÓN
------------------------------------------------------*/

.menu {
    min-height: 60px;
    background: #325216;
}

.menu .flex{
    gap: 1.4em;
    /* border:5px solid yellow; */
}

#btn-responsive{
    cursor: pointer;
    display: none;
}
 
.menu .logo img {
    height: 30px;
}



.menu ul a {
    letter-spacing: 2px;
    text-transform: uppercase;
    color: white;
    font-size: 0.9rem;
    line-height: 60px; /* para que ocupe lo mismo que el min-height del nav */
}

.menu ul a:hover {
    color: #6B9645;
}
 
 


/*------------------------------------------------------
HERO
------------------------------------------------------*/

.hero {
    padding: 40px;
    min-height: 650px;
    background: #000 url("../img/hero_background.jpg") no-repeat center / cover fixed;
}

.hero.flex {
    flex-direction: column;
    /* la dirección principal sera en vertical ↕ */
    justify-content: center;
    /* ajustamos la dirección principal ↕ */
    align-items: center;
}

.hero img {
    width: 900px;
    margin-top: 50px;
}



/*------------------------------------------------------
SERVICIOS
------------------------------------------------------*/

/* iconos de los servicios */


.iconosServicios li {
    color: rgb(190, 190, 190);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
}

.iconosServicios li img {
    width: 80px;

}


.iconosServicios p {
    color: rgb(190, 190, 190);
    letter-spacing: 4px;
    font-size: 0.9rem;
}

/* explicación de los servicios */

.servicios-lista {
    margin-top: 4em;
    color: rgba(0, 0, 0, 0.5);
}

.servicios-lista.flex > .col {
    flex-basis: 30%;
    /* al poner 30% existe un hueco lateral entre las cajas */
}

.servicios-lista .titulo p {
    font-size: 1.5rem;
    line-height: 1.25em;
}

.enlaceMasInfo {
    margin-top: 2em;
    text-align: right;
}

.enlaceMasInfo a {
    padding: 0.5em 1em; /* para que al hacer hover y tener color de fondo se genere un espacio */
    font-size: 0.9rem;
    text-decoration: underline;
 }

.enlaceMasInfo a:hover {
    background-color: #6B9645;
    color: white;
    text-decoration: none;

}



/*------------------------------------------------------
NEWSLETTER
------------------------------------------------------*/

.newsletter {
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.newsletter small {
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.8rem;
    display: block;
}

 


/*------------------------------------------------------
SOLUCIONES CANCAN
------------------------------------------------------*/

.soluciones {

    /* justify-content: space-around; */

    background: url("../img/cancan-background.jpg") no-repeat fixed center / cover, #000;
    color: white;
}

 
.soluciones .flex > .col {
    flex-basis: 45%;
}

.soluciones h2 {
    letter-spacing: 7px;
    text-align: left;
    margin-bottom: 1em;
}
 
 
.soluciones img {
/*     margin-left: 20%; */
    width: 80%;
}


/*------------------------------------------------------
VALORES
------------------------------------------------------*/

.valores-lista.flex {
    row-gap: 2em;
}

.valores-lista.flex > .col {
    flex-basis: 30%;
}
 

.valores-lista h3 {
    margin: 0.625em 0;
    font-size: 1.1rem;
}



.valores img {
    display: block;
    margin: 0 auto;
    width: 80px;
}

.valores p {
    color: rgb(90, 90, 90);
}



/*------------------------------------------------------
FOOTER
------------------------------------------------------*/

.footer-principal {
    padding: 4em 0;
    text-align: center;
}

.footer-principal p {
    font-size: 1.1rem;
}


.footer-principal img {
    margin-bottom: 50px;
    width: 100px;
}