@charset "utf-8";

/* Mobile first */ 

/* generales */

body{
    background-color: #80D261;
    font-family: "Roboto", sans-serif;
    text-align: center;
    color: #fff;
}

.blanco{
    background-color: #fff;
}

*{
    box-sizing: border-box;
}

p{
    font-size: .9em;
    font-weight: 400;
    margin-left: 2em;
    margin-right: 2em;
}

.negro{
    color: #000;
    font-weight: 400;
    font-size: 1.2em;
}

img{
    width: 100%;
}

.efecto2 figcaption{
    color: #fff;
}

.efecto1 img{
    width: 6em;
    margin-top: 1em;
    justify-content: center;
}

.efecto2{
    width: 7em;
    margin: 1em;
}

.efecto3{
    background-color: #fff;
    border-radius: 5em;
}

figcaption{
    color: #000;
    margin-top: 1em;
}

.videoresponsive{
    position: relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 56.25%;
}

.videoresponsive iframe{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

.listaproductos{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

h1{
    font-weight: 900;
}

h2{
    font-size: 2em;
    font-weight: 900;
}

h3{
    font-size: 1.2em;
    font-weight: 400;
}

h4{
    font-size: 1.5em;
    font-weight: 400;
    color: #000;
}

h5{
    font-size: 2em;
    font-weight: 900;
    color: #ff7f09;
}

.botones{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}

.botonnaranja{
    background-color: #FF7F09;
    padding: 1em;
    border-radius: 2em;
    margin: 1em;
    justify-content: center;
    width: 20em;
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    text-decoration: none;
}

.botonnaranja:hover{
    background-color: #108A23;
    color: #fff;
}




.botonblanco{
    background-color: #ffff;
    padding: 1em;
    border-radius: 2em;
    margin: 1em;
    justify-content: center;
    width: 20em;
    display: flex;
    flex-wrap: wrap;
    color: #000;
    text-decoration: none;
}

.botonblanco:hover{
    background-color: #108A23;
    color: #fff;
}



.botonchico{
    background-color: #80D261;
    padding: .5em;
    border-radius: 1.5em;
    margin: 1em;
    justify-content: center;
    width: 10em;
    display: flex;
    flex-wrap: wrap;
    color: #000;
    text-decoration: none;
}

.botonchico:hover{
    background-color: #108A23;
    color: #fff;
}




.campos{
    justify-content: center;
    margin: 1em;
}

.elementos1{
    display: flex;
    justify-content: center;
}

.elementos2{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.divisor{
    padding: 1em;
    margin: 4em 0 4em 0;
    background-color: #f5f5f5;
}

li{
    list-style: none;
}

a{
    color: #ff7f09;
    text-decoration: none;
}

a:hover{
    color: #108a23;
}

/* header */

header .contenedor{
    max-width: 50rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header{
    background-color: #000;
    padding: 1rem;
}

#logo{
    background-color: none;
    border-radius: .35em;
    padding: .35em;
    width: 10em;
    color: #fff;
}


/*algo*/

.banner { height: 400px; width: 100%; 
padding-top: 2em }



/*seccion intro*/


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

.secintro {
    background-color: #97d4a1;
    padding: 3em 1.5em 3em 1.5em;
    display: flex;
    flex-direction: column; 
}

.secintro p {
    display: flex;
    color: #fff;
}

.secintro h2 {
    display: flex;
    margin-bottom: 1.2em;
    font-weight: 700;
    color: #0a0a0a;
}

@media (min-width: 768px) {
    .secintro {
        background-color: #97d4a1;
        padding: 4em 5em 4em 5em;
    }
}

@media (min-width: 1024px){
    .secintro {
        background-color: #97d4a1;
        padding: 5em 5em 5em 5em;
        align-items: center;
    }
    .secintro p {
        width: 60vw;
        color: #ffffff;
        justify-content: center;
        text-align: center; 
    }
    .secintro h2 {
        width: 40vw;
        color: #ffffff;
        text-align: center;
        font-size: 2.3em;
    }
}




/*seccion productos*/


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

.secproductos {
    background-color: #e2d4d4;
    padding: 3em 1.5em 3em 1.5em;
    display: flex;
    flex-direction: column; 
}

.secproductos p {
    display: flex;
    color: #000;
}

.secproductos h2 {
    display: flex;
    margin-bottom: 1.2em;
    font-weight: 700;
    color: #0a0a0a;
}

@media (min-width: 768px) {
    .secproductos {
        background-color: #e2d4d4;
        padding: 4em 5em 4em 5em;
    }
}

@media (min-width: 1024px){
    .secproductos {
        background-color: #e2d4d4;
        padding: 5em 5em 5em 5em;
        align-items: center;
    }
    .secproductos p {
        width: 60vw;
        color: #000;
        justify-content: center;
        text-align: center; 
    }
    .secproductos h2 {
        width: 40vw;
        color: #ffffff;
        text-align: center;
        font-size: 2.3em;
    }
}


/*seccion nosotros*/


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

.secnosotros {
    background-color: #FF7F09;
    padding: 3em 1.5em 3em 1.5em;
    display: flex;
    flex-direction: column; 
}

.secnosotros p {
    display: flex;
    color: #fff;
}

.secnosotros h2 {
    display: flex;
    margin-bottom: 1.2em;
    font-weight: 700;
    color: #fff;
}

@media (min-width: 768px) {
    .secnosotros {
        background-color: #FF7F09;
        padding: 4em 5em 4em 5em;
    }
}

@media (min-width: 1024px){
    .secnosotros {
        background-color: #FF7F09;
        padding: 5em 5em 5em 5em;
        align-items: center;
    }
    .secnosotros p {
        width: 60vw;
        color: #000;
        justify-content: center;
        text-align: center; 
    }
    .secnosotros h2 {
        width: 40vw;
        color: #ffffff;
        text-align: center;
        font-size: 2.3em;
    }
}













/* Menu desplegable */

header nav {
    color: white;
}

header nav a {
    color: #fff;
    padding: .5em 1em;
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

header nav a:hover {
    background-color: rgba(0,0,0,0.5);
    color: white;
}

/* boton que llama al menu */
#llamamenu {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    height: 2.5em;
    width: 2.5em;
    /* caja flexible */
    display: flex;
    position: relative;
    z-index: 9999;
}

#llamamenu:hover {
    background-color: rgba(0, 0, 0, 0.75);
}

#llamamenu i { 
    padding: 0;
    /* centrado en la horizontal y en la vertical */
    margin: auto;
}


/* el menú propiamente dicho */
header nav ul {
    background-color: #000;
    /* el menu sale del flujo de informaciones
    y se oculta a la derecha */
    position: fixed;
    left: 100%;
    top: 0;
    height: 100vh;
    width: 50%;
    z-index: 9990;
    padding-top: 5em;
    transition: all .5s ease;
}

.visible {
    /* el menú se muestra
    corriéndose a la izquierda */
    left: 50%;
    transition: all .25s ease;
}


/*footer*/

footer p{
    background-color: #000;
    font-size: .7em;
    color: #fff;
    padding: 5em;
    margin: 0;
}

/* Tablet */

@media screen and (min-width: 600px){
    
    .listaproductos{
        margin: 0 5em 0 5em;
    }
    
    #logo{
        width: 15em;
    }
    
    .efecto1 img{
    width: 10em;
    margin-top: 1em;
    justify-content: center;
}

/* Escritorio */

@media screen and (min-width: 992px){
    
    .listaproductos{
        margin: 0 10em 0 10em;
    }
    
    #logo{
        width: 17em;
    }
 
    .efecto1 img{
    width: 10em;
    margin-top: 1em;
    justify-content: center;
}