*{
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        margin: 0%;
        }
        
    :root{
            --color-textos: #575757;
            --color-fondo: #f2f2f2;
            --color-1: #59AD77;
            --color-2: #FE5D26;
            --color-3: #FAE4AA;
            --color-5: #A8DB8E;
            --color-6: #9283be;
            --textos-cuerpo: serif;
            --textos-titulos: sans-serif;
    }
    img {
            max-width: 100%;
    }
    .acumar{
            margin-inline: auto; 
            display: flex;
            flex-direction: column;
            margin-block: .5em;
            padding: 1em;
    }
    a {
            text-decoration: none;
            font-family: var(--tipo-titulos);
            font-weight: bold;
    }
    ul,
    ol {
            list-style: none;
            padding: 0px;
    }
span{
        color: var(--color-1);
}
.sobrenosotros button{
        display: block;
        background-color: var(--color-2);
        border: solid var(--color-2) .5em;
        border-radius: 2em;
        align-items: center;
        text-align: center;
        margin: auto;
}
.sobrenosotros button a{
        color: var(--color-fondo);
        margin: 0px;
}
.sobrenosotros2 button{
        background-color: var(--color-2);
        border: solid var(--color-2) .5em;
        border-radius: 2em;
        align-items: center;
        text-align: start;
        display: block;
        margin: auto;
}
.sobrenosotros2 button a{
        color: var(--color-fondo);
        text-align: start;
}
.sobrenosotros h3, .sobrenosotros2 h3 {
        font-size:x-large;
}
.grid-container{
        display: grid;
        grid-template-columns: auto;
        gap: 2em;
}

    .grid-container button{
        margin-block-start: 1em;
        background-color: var(--color-2);
        border: solid var(--color-2) .5em;
        border-radius: 2em;
        align-items: center;
        text-align: start;
    }
    .grid-container .change{
        margin-block-start: 4em;

    }
    .grid-container button a{
        color: var(--color-fondo);
        text-align: start;
}
.grid-container div{
        background-color: var(--color-3);
        text-align: center;
        color: var(--color-textos);
        border: 0.5em solid var(--color-5);
        height: 33em;
}

.grid-container div h3{
        text-align: center;
        margin-block-end: 1em;
        color: var(--color-1);
        margin-block-start: 0.2em;
}
.grid-container div h3 p{
        text-align: center;
}
.galeria-imagenes{
        display: grid;
        grid-template-columns: auto;
        gap: 4em;
        margin-block-start: 4em;
}
    .h1{
            color: var(--color-fondo);
    }
    header .contenedora{
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1em;
    }
    header img{
            width: 20%;
            height: auto;
            margin: 1em;
    }
    header, footer {
            background-color: var(--color-1);
            margin-inline: 0%;
    }
    header .nav{
            background-color: var(--color-1);
    }
    header nav a {
            color: var(--color-textos);
            background-color: var(--color-4);
            display: block;
            width: max-content;
            margin: .125rem;
            padding-block: .25em;
            padding-inline: 1em;
            border-radius: 0.25em;
    }
    header nav ul {
            margin-block: 0;
    }
    
    header nav a:hover {
            background-color: var(--color-1);
            color: var(--color-textos);
            border-radius: 2em;
    }
    /* boton*/
    .menu .btn-inicio,
    .btn-calendrio,
    .btn-cultivos, .btn-noticias, .btn-faq, .btn-perfil {
    background-color: var(--color-5);
    color: var(--color-textos);
    border-radius: 2em;
    }
    body {
            width: min( 100rem, 100%);
            min-height: 100vh;
            margin-inline: auto;
            background-color: var(--color-fondo);
    }
    p {
            margin-block-end: 0%;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;;
            color: var(--color-textos);
    }
    .noticia p{
        margin-inline-start: 1em;
        margin-inline-end: 1em;
    }
    h1{
            font-family: var(--textos-titulos);
            color: var(--color-fondo);
            text-align: center;
    }
    .acumar h3{
        margin-block-start: 0%;
            text-align: center;
            color: var(--color-1);
    }
    .acumar p{
            text-align: start;
    }
    .divider{
            display: flex;
            align-items:center;
            text-align: center;
    }
    .divider img{
            width: 30%;
            margin: 1em;
            text-align: center;
    }
    h2{
            width: 100%;
            padding-inline-start: 1em;
            text-align: center;
            font-size: x-large;
            font-family: var(--textos-titulos);
            color: var(--color-6)
    }
    
    .acumar{
            margin-inline: auto; 
            display: flex;
            flex-direction: column;
            margin-block: .5em;
            padding: 1em;
    }
    
    .preguntas{
            margin-inline: auto; 
            display: flex;
            flex-direction: column;
            margin-block: .5em;
            padding: 1em;
    }
    
    .sesion{
            margin-inline: auto; 
            display: flex;
            flex-direction: column;
            margin-block: .5em;
            padding: 3em; 
    }
    
    .acumar .btn-faq p h3{
            display: inline;
    }
    
    
    .comitente{
            margin-inline: auto; 
            display: block;
            flex-direction: column;
            margin-block: .5em;
            padding: 1em;
            background-color: var(--color-fondo);
            border-radius: .25em;
            flex-wrap: wrap;
    }
    header .lista{
            display: flex;
            justify-content: space-between;
            align-items: center;
    }
    .header nav,
    .header nav ul {
            display: contents;
            background-color: var(--color-1);
    }
    .menu .inicio, .plan, .webapp {
        background-color: var(--color-fondos);
        color: var(--color-4);
    }
    main{
            min-height: calc( 100vh - 150px );
    }
    
    .contenedora ul {
    
        /* ancho máximo 1200px */
        width: min( 75rem, 100% );
        /* centrado horizontal (si sobra espacio,
          lo distribuye a izquierda y derecha) */
        margin-inline: auto;
        /* espacio entre el borde del elemento y su contenido */
        padding: 1rem;
    }
    
    @media screen and (min-width:768px) {
    
    body {
            background-color: var(--color-fondo);
    }
    .menu-btn {
            display: none;
    }
    /*
      se muestra el menu, PERO
      se quiere que las etiquetas "li"
      sean "como hijos directos" 
      de la caja flexible "header .contenedora"
      para poder colocarlos en la misma línea...
      Por ello, "nav" y "ul" deben "esfumarse"
      y mostrar sólo lo que contienen
      */
    
      header nav,
      header nav ul {
       display: contents;
     }
     
    
    header nav ul li:nth-of-type(-n + 3) {
        /* al estar en una "caja flexible",
        puede cambiarse su orden
        (de forma predeterminada, orden "cero") */
        order: -1;
    }
    
    header nav ul li:last-of-type {
        margin-inline-end: auto;
    }
    
    header nav ul li:first-of-type {
        margin-inline-start: auto;
    }
    
      /* separamos los elementos de la caja flexible */
    header .contenedora {
        gap: .5em;
    }
    
    #logo img {
        width: 10em;
        margin-inline-end: 1em;
    }
    header nav,
    header nav ul {
     display: contents;
    }
    .acumar h3{
            text-align: start;
    }
    
    .cal{
        display: flex;
        flex-direction: row;
    }
    .imgcal {
            margin: .5em;
            max-width: 50%;
            height: auto;
            justify-content: flex-start;
            align-content: flex-start;
    }

    .infocal div {
        margin-inline-start: 0%;
        margin-inline-end: 0%;
        margin: 1em;
        display: flex;
        flex-direction: column;
        
    }

    .herramientas_contenedora {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        padding: 1em;
        text-align: center;
    }

    .herramientas {
        display: flex;
        flex-direction: row;
        margin-block: .5em;
        padding: 1em;
    }

    .herramientas article {
        width: 50%;
        background-color: #A8DB8E;
        margin: 3em;
        margin-block: .5em;
        padding: 1em;
        border-radius: .25em;
    }

    .herramientas-textos{
        display: flex;
        padding: 1em;
        margin: 1em;
        background-color: var(--color-fondo);
    }

    .herramientas img {
        width: 5cm;

    }

    .cuidado {
        padding: 1em;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cuidado li{
        list-style-position: inside;
        list-style-type: disc;
    }
    
    .acumar .huerta{
            width: 20%;
            margin-inline: auto;
    }
    .sobrenosotrosfoto{
            margin-inline-end: 1em;
            width: 50%;
            float: left;
    }
    .sobrenosotrosfoto2{
            margin-inline-start: 1em;
            width: 50%;
            float: right;
    }
    .acumar .sobrenosotros p{
            display: inline;
            float: inline-end;
            margin-inline-end: 10em;
    }
    .acumar .sobrenosotros2 p{
            display: inline;
            float: inline-start;
            margin-inline-end: 10em;
    }
    .acumar .sobrenosotros p h3{
            display: inline;
            margin-block-end: 1em;
    }
    .acumar .sobrenosotros2 p h3{
            display: inline;
            float: inline-start;
    }
    .grid-container button{
        margin-block-start: 2em;
        background-color: var(--color-2);
        border: solid var(--color-2) .5em;
        border-radius: 2em;
        justify-self: end;

    }
    .grid-container button a{
        color: var(--color-fondo);
        text-align: start;
}
    .fotosnoticia{
        width: 50%;
        margin-block-start: 2em;
    }
    .sobrenosotros button {
        background-color: var(--color-2);
        border: solid var(--color-2) .5em;
        border-radius: 2em;
        display: block;
        margin: auto;
}
.sobrenosotros2 button{
        background-color: var(--color-2);
        border: solid var(--color-2) .5em;
        border-radius: 2em;
        display: block;
        margin: auto;
}
.galeria-imagenes{
        display: grid;
        grid-template-columns: auto auto;
        gap: 4em;
        margin-block-start: 4em;
}
    .divider{
            display: flex;
            justify-content: center;
            text-align: center;
    }
    .divider img{
            width: 10%;
            margin: 1em;
            text-align: center;
    }
    
    /* cultivos */

    .semillas_contenedora{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        padding: 1em;
        text-align: center;
        
    }

    .semillas article{ 
            width: 20%;
            background-color: var(--color-5);
            margin-block: .5em;
            padding: 1em;
            border-radius: .25em;
            flex-wrap: wrap;
    }
    
    .semillas{
            margin-inline: auto; 
            display: flex;
            flex-direction: column;
            margin-block: .5em;
            padding: 1em;
            
    }

    .semillas img {
        max-height: 6em;
        display: block;
        margin-left: auto;
        margin-right: auto;
        
    }
    
    .semillas-textos{
            display: flex;
            padding: 1em;
            margin: 1em;
            background-color: var(--color-fondo);
    }
    .semillas_textos a {
            display: flex;
            background-color: var(--color-1);
            border-radius: .25rem;
            color: var(--color-3);
            padding-block: .25em;
            padding-inline: 1em;
    }
    .semillas_textos a:hover {
            display: flex;
            color: var(--color-fondos);
            background-color: var(--color-3);
    }
    .plantar_contenedora {
        text-align: center;
    }
    .plantar {
        padding: 1em;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .grid-container{
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 2em;
}
.grid-container div{
        background-color: var(--color-3);
        text-align: center;
        color: var(--color-textos);
        border: 0.5em solid var(--color-5);
        height: 28em;
        padding: 0em 1em 0em 1em;
}
.grid-container div h3{
        text-align: center;
        color: var(--color-1);
        margin-block-end: 1em;
}
.grid-container div h3 p{
        text-align: center;
}
    

/* mi perfil */

.iniciosesion {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .iniciosesion img{
                width: 8%;
                height: auto;
                margin: -1em;
                margin-left: auto;
                margin-right: auto;

    }

    .inicia{
        margin-left: auto;
        margin-right: auto;
    }

    .acceso{
        margin: 2em;
        margin-left: auto;
        margin-right: auto;
        text-align: center;

    }
}
    
    @media screen and (min-width:738px) {
            .semillas_contenedora{
                    width: auto;
                    display: flex;
                    flex-wrap: wrap;
            
            }
    
            .semillas article{
                margin-inline: .5em;
                background-color: #A8DB8E;
            }
            
            .semillas{
                    width: auto;
                    flex-direction: row;
            }

            .semillas img {
                display: flex;
                height: 6em;
                padding: 0%;
            }
            
            body {
                    background-color: var(--color-fondo);
    
            }
        }