@charset "utf-8";

/* font-family: 'Fira Sans Extra Condensed', sans-serif;
font-family: 'Ubuntu Condensed', sans-serif; */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


@font-face {
    font-family: handy;
    src: url("fuentes/HandyCasualCondensed-Regular.otf");
}


body {
    background-size: cover;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

.imgsesion{
    width: 1.2em;
    height: auto;
    
}

main{
    padding: 0.5rem;
}

html {
    height: -webkit-fill-available;
}

img {
    width: 100%;
    height: auto;
}


footer {
    margin-top: auto;
    text-align: center;
}

header,
footer {
    padding: 1.5em;
    flex-grow: 0;
}

header .contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


header nav ul a {
    margin: 0.3em;
    text-decoration: none;
}


.tipo1 {
    font-family: handy, sans-serif;
    color: rgb(0, 68, 62);
}

h2,
h3,
h4,
h5 {
    font-family: handy, sans-serif;
    color: rgb(0, 68, 62);
}

h1{
    font-family: handy, sans-serif;
    color: rgb(0, 68, 62);
    font-size: 2.8em;
}

p {
    font-family: 'Poppins', sans-serif;
    padding-top: 0.4rem;
    padding-bottom: 1.6rem;
    font-size: 0.9em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

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

---------------- encabezado ----------------
/* *** menu *** */

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

header nav a:hover {
    background-color: transparent;
}

/* boton que llama al menu */
#llamamenu {

    cursor: pointer;
    height: 2.5em;
    width: 2.5em;
    /* caja flexible */
    display: flex;
    position: relative;
    z-index: 9999;
}

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


/* el menú propiamente dicho */
header nav ul {
    display: flexbox;
    
    margin: 0.125rem;
    list-style: none;
    gap: 2.5em;
    /* 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;
}


---------------- encabezado ---------------- main {
    padding: 1em;
}

.boton a {
    text-decoration: none;
}

a:hover {
    color: orange;
}

.rellena:hover {
    background-color: orange;
}

.contenedora_main {
    display: flex;
    flex-direction: column;

}

footer {
    font-size: 0.8em;
}

/* .contenedora_main {
   
    display:grid;
    grid-template-columns: 60% auto;
    width: 80%;
    margin:auto;
    align-items:center ;
    padding: 0rem;
  }*/

.talleres_main {

    margin: auto;
    gap: 1em;

}

.talleres_main section {

    background: linear-gradient(#b3f39a, #e1bfab);
    padding: 1em;
    border-radius: 1.25em;
    border: none;
    width: 16em;
    height: auto;
    margin-block: 0.5em;
    flex-direction: column;
}

video {
    width: 100vh;
    aspect-ratio: 16/9;
}

section {
    padding: 0.5em;
}

figure {
    text-align: center;
}

img.imgforo {
    text-align: center;
    border-radius: 30%;
    width: 10em;
    aspect-ratio: 1;
    max-width: 100%;

}




.main_foro section {
    background: linear-gradient(#b3f39a, #e1bfab);
    padding: 1em;
    border-radius: 1.25em;
    border: none;
    height: auto;
    margin-block: 0.5em;
}


.logo {
    width: 7em;
    max-width: 100%;
}

header {
    background: linear-gradient(#aff394, #ffffff);
    height: 100%;
}

footer {
    height: 7em;
    background: linear-gradient(#ffffff, #c5d0de);
}


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

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



.acumar h1,
.bibliotecas h1 {
    margin: 0em 0em 0.3em;
    border-bottom: solid 3px #abf595;
}

.agenda {
    display: grid;
    gap: 1em;

}

.agenda section {
    padding: 0.5em;
    background: linear-gradient(#b3f39a, #e1bfab);
    border-radius: 0.5em;
}

.agenda h1 {
    font-size: 2em;
}

.agenda p {
    margin: 0em 0em 0.3em;
}

.agenda img {
    border-radius: 0.5em;
}

.h1subrayado {
    color: rgb(0 68 62);
    border-bottom: solid 3px rgb(0 68 62);
}


.redes ul {
    list-style: none;
    display: flex;
}

.redes ul li {
    list-style: none;
    display: flex;
    padding-left: 0.7em;
    padding-top: 0.7em;
}


.logoredes {
    max-width: 3em;
    max-height: 3em;
}

.barras {
    background-color: #c4d0df;
    font-family: 'Poppins', sans-serif;
    border-radius: 1em;
    border-color: transparent;

}

.rellena {
    background-color: #abf595;
    cursor: pointer;
    border-color: transparent;
    border-radius: 1em;
    text-align: center;
    justify-content: space-around;
    padding: 0.5em;
    text-decoration: none;
    margin-top: 3em;
    margin-bottom: 1em;

}




li {
    list-style: none;
}

a {
    font-family: 'Fira Sans Extra Condensed', sans-serif;
    text-decoration: none;

}

.externos {
    color: rgb(59, 57, 57);
}

.categorias_cajas {
    cursor: pointer;
    text-decoration: underline;
    border-radius: 1em;
    text-align: center;
    justify-content: space-around;
    padding: 0.5em;
    text-decoration: none;
    margin-top: 3em;
    background: linear-gradient(#b3f39a, #e1bfab);
}


/*prueba de hamburguesa*/


header nav {
    
    color: rgb(0, 68, 62);
}

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

header nav a:hover {
    background-color: none;
    color: orange;
}
.iconos {
    display: flex;
    flex-direction: row;
    box-sizing: 20%;
    height: 20%;
    justify-content: center;
    gap: 2em;
    margin-inline: 7em;
    padding-block-start: 1em;
    flex-wrap: nowrap;
    align-items: center;
}

.fotoaccion {
    
    padding-top: 1em;
    border-radius: 1.5em;
}

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

#llamamenu:hover {
    background-color: orange;
}

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


/* el menú propiamente dicho */
header nav ul {
        background-color: rgba(121, 230, 121, 0.5);
        /* 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: 6.5em;
        transition: all .5s ease;
}

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

/*fin prueba de hamburguesa*/




/* MEDIA QUERIS*/

/*pantalla celular*/

@media screen and (min-width: 37em) {

    #llamamenu {
        display: none;
    }

    /* se muestran el menu horizontal */
    header nav ul {
        display: flex;
        flex-wrap: wrap;

        /* para que el menú vuelva al "fondo" */
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        width: 100%;
        padding-top: 0;

    }

    header nav ul.visible {
        left: auto;
    }
    section.tallerescajas{
        
        display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            align-items: stretch;
            gap: 0.5em;
    }
}


    /*pantalla tablet*/

    @media (min-width: 40em) {


        .contenedor ul {
            display: flex;
            margin: 0;
            padding-left: 2em;
        }

        .contenedora_main {
            display: grid;
            grid-template-columns: 45% 55%;
            align-items: center;
        }

        .intro {
            display: grid;
            grid-template-columns: 45% 55%;
            align-items: center;
        }

        .dias>.agosto {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1em;
        }

        .dias>.septiembre {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1em;
        }

        .talleres_descripcion{
            width: 40em;

        }


        div.talleres_main {
            display: flex;
            width: min(50rem, 100%);
        }
        
        .talleres_main {
            margin: auto;
            gap: 1em;
        }


        section.categorias {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            align-items: stretch;
            gap: 0.5em;
        }

        .comentariosforo {
            /* color de fondo */
            background-color: var(--color-3-alfa);
            /* distancia vertical entre los integrantes */
            margin-block: .5em;
            /* "relleno" (distancia entre contenido y borde) */
            padding: 1em;
            /* borde redondeado */
            border-radius: .25em;

            /* caja flexible para que la imagen quede a la izquierda y los textos a la derecha */
            display: flex;
            /* separa sus elementos con una "calle" */
            gap: 1em;
            /* al convertir el artículo en "caja flexible", la imagen se estira... hay que corregirlo */
            align-items: flex-start;
        }

        .mainsesion {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        header nav ul {
            background-color: transparent;
            /* el menu sale del flujo de informaciones
            y se oculta a la derecha */
           
          }


         /*escriturainicial*/


         .inicial_conte{
            display: flex;
            flex-wrap: wrap;
            gap: 1em;    
            height: 100%;  
          }
          

         .inicial_conte img{
            width: 15em;
            height: auto;       
          }

         .inicial_descripcion{
            width: 15em;
            height: auto;       
          }
         
         

    }





    /*pantalla escritorio*/

    @media (min-width: 75em) {

        /*sesion*/
        /*main {
        display: flex;
    }*/

        .mainsesion {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .imagensesion {
            justify-content: center;
            align-content: center;
        }

        .formulario {
            justify-content: row;
        }


        /*foro*/
        .main_foro {
            display: flex;
            flex-direction: column;
        }

        section.main_foro {

            padding: 1em;
            border-radius: 1.25em;
            height: auto;
            margin-block: 0.5em;

        }


        /*categorias*/
        section.categorias {
            display: grid;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
            align-content: stretch;
            gap: 0.5em;
        }


        div.talleres_main {
            display: flex;
            width: min(50rem, 100%);
        }

        div.dias {
            display: flex;
            justify-content: space-between;
            gap: 0.9em;
        }



        .acumar article {
            display: grid;
            grid-template-columns: 45% 55%;
            align-items: center;

        }

        .bibliotecas article {
            display: grid;
            grid-template-columns: 45% 55%;
            align-items: center;
        }

        .comentariosforo {
            /* color de fondo */
            background-color: var(--color-3-alfa);
            /* distancia vertical entre los integrantes */
            margin-block: .5em;
            /* "relleno" (distancia entre contenido y borde) */
            padding: 1em;
            /* borde redondeado */
            border-radius: .25em;

            /* caja flexible para que la imagen quede a la izquierda y los textos a la derecha */
            display: flex;
            /* separa sus elementos con una "calle" */
            gap: 1em;
            /* al convertir el artículo en "caja flexible", la imagen se estira... hay que corregirlo */
            align-items: flex-start;
        }
header nav ul {
        background-color: transparent;
        /* el menu sale del flujo de informaciones
        y se oculta a la derecha */
       
      }


      /*escriturainicial*/


      .inicial_conte{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;    
      }

      .inicial_conte img {
        width: 100%;
        height: auto;
       }

       .inicial_descripcion {
        width: 100%;
        padding: 0.5rem;
        padding-right: 3em;
        height: auto;
        align-self: center;
    }

    .inicial_maps{
        width: 100%;
        padding: 0.5rem;
        height: auto;
        align-self: center;
    }

    .dias section{
        width: 20em;
        padding: 0.5rem;
        height: auto;
    }

    .categorias {
display: flex;
justify-content: space-around;
flex-wrap: wrap;

    }
    section.tallerescajas{
        display: flex;
        
    }

    }