@font-face {
    font-family: "San Francisco";
    src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
  }


*{
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}
body {
    font-family: "San Francisco";
    margin: 0rem;
}


ul{
    list-style-type: none;
    padding-inline-start: 0rem;
}

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

nav ul li a{
    text-decoration: none;
    color: white;
}

.menu li a{
    color: #3e925e;
    text-decoration: none;
}

#logo{
    margin: 1.5rem;
    display: flex;
}

#logo img{
    width: 8rem;
    display: block;
    margin: 0rem;
}

#logo h1{
    font-size: 1rem;
    color: #66bda9;
    margin: 0rem;
    padding-left: 0.5rem;
}

#logo div{
    width: 100%;
}


#portada{
    background-image: url(../imagenes/portada.jpg);
    padding: 2rem;
}

#portada article{
    align-items: center;
    justify-content: center;
    place-content: center;
    place-items: center;
    width: 100%;


}

#biblioteca p{
    padding: 1em;
    max-width: 50vh;
    display: flex;
    border: #66bda9 1px solid;
    border-radius: 3rem;
    font-style: italic;
    text-align: center;
}

#biblioteca h1, #talleres h1{
    font-size: 28px;
    color: #3e925e;
    text-align: center;
}

#biblioteca h2{
    font-size: 24px;
    color: #3e925e;
}


#biblioteca h3 {
    padding-inline-start: 1em;
}

#biblioteca img{
    max-width: 17vh;
    height: auto;
}

#biblioteca #libros h3{
    font-size: 20px;
    width: 70%;
}

#biblioteca #libros h3{
    font-size: 20px;
    width: 70%;
}

#biblioteca #libros .titulo_libro{
    font-size: 16px;
    color: #000000;
}

#biblioteca .bloqueado{
    opacity: 30%;
    display: flex;
    justify-items: center;
    align-items: baseline;
    gap: 2vh;
    padding-inline-start: 3vh;
}
.libros{
    display: flex;
    justify-items: center;
    align-items: baseline;
    gap: 2vh;
    padding-inline-start: 3vh;
}

article.libro {
    max-width: 20vh;
}

main nav ul li a{
    font-size: 16px;
    color: #66bda9;
    border: 0.2rem solid;
    padding-block: 0.3rem;
    padding-inline: 0.5rem;
    border-radius: 2rem;
}

.botones{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
}

.botones .botoninscripcion{
    font-size: 16px;
    background-color: #66bda9;
    color: #FFFFFF;
    border-color: #66bda9;
    padding: 0.5rem;
    border-radius: 2rem;
    border-style: none;
}

.titulosportada, .infoportada{
    grid-column-start: 1;
    grid-column-end: 3;
}

.titulosportada h1, .titulosportada h2{
    margin: 2em 0 !important;
}

.titulosportada h1{
    color: #FFFFFF;
    font-size: 18px;
    font-style: bold;
    margin: 0rem;
    text-align: center;
}
.titulosportada h2{
    color: #6be0b3;
    font-size: 24px;
    font-style: bold;
    margin: 0rem;
    text-align: center;

}

.titulosportada p{
    font-size: 16px;
    border: #66bda9 1px solid;
    border-radius: 3rem;
    color: #FFFFFF;
    font-style: italic;
    text-align: center;
    padding-block: 0.5rem;
    margin: 1rem;
    width: 50%;
    height: 5em;
    display: flex;
    align-items: center;
    margin: 2em auto;
    justify-content: center;
}

.infoportada{
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    padding-inline: 0rem;
    margin-inline: 1rem;
}
.cualidadescurso{
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 100px;
}
.cualidadescurso p{
    color: #FFFFFF;
    margin: 0rem;
}

.cursosdeinteres{
    margin-inline: 1rem;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1rem;
   
}

.cursosdeinteres::-webkit-scrollbar {
    display: none;
}


.botones{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-direction: row;
    justify-content: space-evenly;
}


h2, #talleres h2{
    color: #3e925e;
    font-size: 18px;
    font-style: bold;
    padding-left: 1rem;

}

.curso, .actualmente {
    width: 80%;
    background-color: #FFFFFF;
    border-radius: 1rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    justify-content: space-around;
    margin-bottom: 1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.curso img, .actualmente img{
    width: 13rem;
    height: 9rem;
    object-fit: cover;
    margin-top: 1rem;
    border-radius: 1rem;
}

.curso h1{
    margin-top: 1rem;
    margin-bottom: 0rem;
    font-size: 19px;
    margin-inline: 3rem;
    text-align: center;
}

.curso_foto {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.curso_info, .curso_taller{
    font-size: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 2vh;
}

footer{
    margin-top: 4em;
    background-color: #66bda9;
    padding: 1rem;
}

footer h3{
    color: white;
}

.nosotros_numeros{
    color: #FFFFFF;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.numeros{
    font-weight: 900;
    font-size: 30px;
    margin: 0rem;
    text-align: center;
}

.info_numeros{
    font-size: 16px;
    text-align: center;
    margin: 0rem;
}

.destacado{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-items: center;
    align-items: center;
    justify-content: center;
    margin: 2em 0;
}

.barra{
    background-color: white;
    width: 0.15em;
    height: 5em;
    margin: 4vh;
}

.contacto h3{
    font-size: 16px;
}

.contacto {
    color: #FFFFFF;
}


.contacto_sedes{
    margin-block: 1rem;
}

.contacto_sedes p{
    font-size: 15px;
    
    margin: 0rem;
}

.sede{
    text-transform: uppercase;
}

.nosotros_logo{
    max-width: 10%;
    margin-left: auto;
    display: block;
}

/*-----TALLERES-----*/

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 900,
    'GRAD' 0,
    'opsz' 48
}

.iconmenu{
    font-size: 28px;
    display: flex;
    align-items: center;
}

.icon, .iconmenu{
    color: #66bda9; 
}

#calendario{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 3em;
    margin: 3em auto;
    gap: 1em;
}

.mes, .dias, .numero{
    grid-column-start: 1;
    grid-column-end: 8;
}

.mes{
    grid-row-start: 1;
    grid-row-end: 1;
    display: flex;
    align-items: center;
}

.dias, .numero{
    grid-template-columns: 120px 120px 120px 120px 120px 120px 120px;
    grid-auto-rows: 60px;
    display: grid;
    justify-content: center;
    justify-items: center;
}

.dias{
    grid-row-start: 2;
    grid-row-end: 2;
}

.dias h2{
    font-size: 18px;
}

.uno, .dos, .tres, .cuatro, .cinco, .seis, .siete{
    color: #3e925e;
    font-size: 16px;
}

.especiales{
    color: #66bda9 !important;
}

.uno{
    grid-column-start: 1;
    grid-column-end: 1;
}

.dos{
    grid-column-start: 2;
    grid-column-end: 2;
}

.tres{
    grid-column-start: 3;
    grid-column-end: 3;
}

.cuatro{
    grid-column-start: 4;
    grid-column-end: 4;
}

.cinco{
    grid-column-start: 5;
    grid-column-end: 5;
}

.seis{
    grid-column-start: 6;
    grid-column-end: 6;
}

.siete{
    grid-column-start: 7;
    grid-column-end: 7;
}

#evento{
    text-decoration: none;
}


.modal_contenedor a{
    color: #078B53;
    text-decoration: none;
    display: block;
}

.modal_contenedor input{
    padding: 0.2em;
    width: 70%;
    border-radius: 0.5em;
    border: 2px solid #66bda9;
    color: #66bda9;

}

.modal{
    background: #3e925e;
    padding: 1em 0.5em;
    display: flex;
    color: white;
    align-items: center;
    margin: 1em 0.5em;
}

.modals, .modalss, .modalsss{
    position: fixed;
    background-color: #333;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;

    --opacity: 0;
    --pointer: none;

    opacity: var(--opacity);
    pointer-events: var(--pointer);
    transition: opacity .5s;
}

.modals:target, .modalss:target, .modalsss:target{
    --opacity: 1;
    --pointer: unset;
}

.modal_contenedor{
    margin: auto;
    background-color: white;
    width: 90%;
    max-width: 600px;
    max-height: 90%;
    overflow: hidden;
    text-align: center;
    padding: 2.5em 1.5em;
    border-radius: 1em;
}
.resumen p{
    text-align: left;
}

.modals:target .modal_contenedor, .modals:target .modal_contenedor{
    animation: show 1s .5s backwards;
}





@keyframes show{
    0%{
        transform: translateY(-150vh);
    }
}

.modal_titulo{
    font-size: 2.5rem;
    font-weight: 500;
}

.modal_p{
    margin: 1em auto;
    line-height: 1.5;
}

.modal_close{
    display: inline-block;
}

.inscribirme{
    background-color: #3e925e;
    color: white !important;
    border: none !important;
}

.mes h2{
    padding: 0 3em !important;
}

.cursosdetaller{
    display: flex;
    overflow-x: auto;
    margin: 2em auto;
    justify-items: center;
    align-items: center;
    gap: 2vh;
    padding-inline-start: 3vh;
}

.cursosdetaller:nth-child(2n){
    margin-top: 1.5em;
}

#buttons, .button1, .button2, .fecha, .informacion div{
    display: flex;
}

#buttons, .button1, .button2, .informacion div, #calendario, .mes, .dias, .numero{
    justify-content: center;
}

.button2, .fecha p, .informacion a{
    color: #66bda9;
}

.button1, .button2{
    width: 8em;
    height: 2em;
    align-items: center;
}

.button1{
    border: none;
    background-color: #66bda9;
    color: white;
    border-radius: 2em 0em 0em 2em;
}

.button2{
    border: 2px solid #66bda9;
    background-color: transparent;
    border-radius: 0em 2em 2em 0em;
}

#titulocursando{
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: left !important;
    width: 93%;
}

#talleres h2{
    padding: 0;
    text-align: center;
}

.actualmente{
    width: 30vh;
}

.actualmente2{
   height: 25em;
   flex-direction: column;
   align-items: center;
}

.actualmente img{
    margin: 1em auto 0;
    grid-row-start: 1;
    grid-row-end: 3;
    width: 17rem;
    height: 11rem;
}

.informacion, .bibliografia, .curso_taller, #talleres h3, .actualmente img{
    grid-column-start: 1;
    grid-column-end: 3;
}

#talleres h3{
    color: #3e925e;
    text-align: center;
    font-size: 20px;
    margin: auto;
    width: 80%;
}

.titulofuera{
    width: 73%;
    margin: 0 auto;
}

.fecha{
    align-items: center;
}

.fecha p{
    margin-left: 0.5em;
    font-weight: 600;
}

.bibliografia{
    font-weight: 600;
    color: #252525;
    text-align: center;
}

.informacion div{
    margin: 1em auto;
}

.informacion a{
    border: 2px solid #66bda9;
    padding: 0.8em ;
    border-radius: 2rem;
    text-decoration: none;
    
}

/*-----FOTOGRAFIA-----*/

#fotografia article, #radio article, #produccion article{
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
}


.image3{
    width: 100%;
    display: flex;
    justify-content: center;
}

.image img, .image2 img, .image3 img{
    border-radius: 3em;
    width: 80vw;
    aspect-ratio: 1.1;
    object-fit: cover;
    align-items: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image2 img{
    height: 100%;
}

.fotografia_info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
}

.fotografia_info h2, .fotografia_info h3, .fotografia_info h4, .fotografia_info p{
    grid-column-start: 1;
    grid-column-end: 3;
}

.fotografia_info h2{
    text-align: center;
    font-weight: 900;
    color: #000000;
    font-size: 1.5em;
}

.fotografia_info h4, .fotografia_info h4 a, .fotografia_info h3{
    color: #3e925e;
}

.fotografia_info p{
    color: #000000;
}

.fotografia_info h4 a{
    text-decoration: none;
}

.fechastaller{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 0rem 4rem;
}


.inputsregistro{
    padding: 1em;
    width: 70%;
    margin: 1em auto;
    border-radius: 0.5em;
    border: 2px solid #66bda9;
    color: #66bda9;
}

.inputsregistro:focus-visible{
    color: #3e925e;
}

#libroespecial{
    text-decoration: none; 
    color: black;
}

/*-----mi perfil-----*/

  body ul{
    list-style-type: none;
    padding: 0rem;
  }
  
  #perfil{
    display:flex;
    flex-direction: column;
    text-align: left;
    padding: 2rem;
    
  }
  
  .info_1{
    display: flex;
    flex-direction: column;
    align-items: center;
  
  }
  .info_1 img{
    border-radius: 50%;
    max-width: 70%;
    width: 100%;
    aspect-ratio: 1;
    border-color: #66bda9;
    border-width: 4px;
    border-style: solid;
  }
  
  .info_1 h1{
    margin-block: 1rem;
    color: #66bda9;
  }
  
  .info_1 p{
    margin: 0;
    color: #66bda9;
  }
  .info_2 h2{
    font-size: 16px;
    color: #66bda9;
    font-weight: 900;
  }
  
  .info_2 p{
    font-size: 16px;
    color: #000000;
  }
  
  .info_2 ul li{
    font-size: 16px;
    color: #000000;
  }
  
  .info_3 h3{
    font-size: 18px;
    color: #66bda9;
    text-align: center;
  }
  
  .info_4{
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    color: #FFFFFF;
    margin-top: 1rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  
  .info_4 .numero_info{
    color: #66bda9;
    font-weight: 900;
    font-size: 30px;
    margin: 0rem;
    text-align: center;
  }
  
  .info_4 .info_numero_info{
    color: #66bda9;
    font-size: 16px;
    text-align: center;
    margin: 0rem;
  }


/*-----SOBRE NOSOTROS-----*/

.acumar_image{
    max-width: 100%;
    font-size: 28px;
    color: #3e925e;
    text-align: center;
}

.acumar_info{
    color: #66bda9;
    font-size: 19px;
}

iframe{
    width: 100%;
    aspect-ratio: 16/9;
}

#acumar{
    padding: 2rem;
}



@media(max-width: 860px )and (min-width: 480px){ /* TABLET */

    
/*#menu{
    display: flex;
    justify-content: flex-end;
}*/

.navmenu{
    background-color: white;
}

.nav_contenedor{
    display: flex;
    height: 100%;
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}

#menu{
    display: none;
    
}

#biblioteca{
    width: 90%;
    margin: 0 auto;
}

.menu{
    position: absolute;
    padding: 2em;
    top: 0rem;
    height: 100%;
    bottom: 0;
    background-color: #3e925e;
    max-width: 30vh;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: left;
    clip-path: circle(0 at left);
    transition: all 500ms ease-in-out
}

.nav_input:checked + .menu{
    clip-path: circle(100% at center);
}

.nav_item{
    color: #FFFFFF;
    text-decoration: none;
}

.nav_label{
    cursor: pointer;
}

.boton_menu{
    border-radius: 50%;
    padding: 0.75rem;
    width: 3rem;
    aspect-ratio: 1;
    top: 1em;
    right: 1em;
    position: fixed;
    cursor: pointer;

}

.boton_menu .boton_lineas{
    width: 25px;
    height: 3px;
    margin: 4px 0 4px 0;
    background: #66bda9;
}
    

    #fotografia article, #radio article, #produccion article{
        flex-direction: row;
        flex-wrap: wrap;
    }

    #fotografia img{
        aspect-ratio: 16/9;
    }

    .fotografia_info{
        width: 50%;
        align-items: center;

    }

    .fotografia_info h2{
        text-align: left;
    }

    .fechastaller{
        gap: 0rem 10vh;
    }


    #calendario, .dias, .numero{
        grid-template-columns: (7, 1fr);
    }


    .actualmente{
        grid-template-columns: (2, 1Fr);
    }


    ::-webkit-scrollbar {
        display: none;
    }

    section:nth-child(7n){
        grid-template-columns: 350px;
    }

    .titulofuera{
        margin-top: 5em;
    }

    .info_1{
        flex-direction: column;
        align-items:flex-start;
    }
      
    #perfil{
        flex-direction: row;
    }
}

@media(max-width: 480px){ /* MOBILE */

       
/*#menu{
    display: flex;
    justify-content: flex-end;
}*/

.navmenu{
    background-color: white;
}

.nav_contenedor{
    display: flex;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}

#menu{
    display: none;
}

.menu{
    position: absolute;
    padding: 2em;
    top: 0rem;
    height: 100%;
    bottom: 0;
    background-color: #3e925e;
    max-width: 30vh;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    clip-path: circle(0 at left);
    transition: all 500ms ease-in-out
}


.nav_input:checked + .menu{
    clip-path: circle(100% at center);
}

.nav_item{
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
}

.nav_label{
    cursor: pointer;
}

.boton_menu{
    border-radius: 50%;
    padding: 0.75rem;
    width: 3rem;
    aspect-ratio: 1;
    top: 1em;
    right: 1em;
    position: fixed;
    cursor: pointer;

}

.boton_menu .boton_lineas{
    width: 25px;
    height: 3px;
    margin: 4px 0 4px 0;
    background: #66bda9;
}

    #acumar{
        padding: 1rem;
    }
    
    #acumar p{
        display: inline;
    }


    .acumar_image{
        max-width: 100%;
        font-size: 28px;
        color: #3e925e;
    }
    
    
    #logo h1{
        max-width: 100%;
        font-size: 12px;
    }


    ::-webkit-scrollbar {
        display: none;
    }


    .numeros{
        font-size: 24px;
    }
    
    .info_numeros{
        font-size: 12px;
    }

    #calendario, .mes, .dias, .numero{
        grid-template-columns: 50px 50px 50px 50px 50px 50px 50px;
        grid-auto-rows: 50px;
    }

    .nosotros_logo{
        max-width: 30%;
    }

    .actualmente h3, #talleres h3{
        font-size: 16px;
    }

    .fecha span, .icon{
        font-size: 18px;
    }

    .fecha p{
        font-size: 14px;
    }

    .bibliografia, .informacion div a{
        font-size: 12px;
    }

    .libros{
        grid-template-columns: 200px 200px;
    }

    .titulosportada p{
        padding-block: 4.5rem;
    }
}

@media(min-width: 860px){ /* DESKTOP */

    #perfil{
        display: flex;
        flex-direction: row;
        text-align: left;
        padding: 2rem;
        column-gap: 10vh;
    }


    .info_1 img {
        width: 30vh;

    }


    #biblioteca{
        width: 90%;
    margin: 0 auto;
    }

    .cursosdetaller{
        display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    }
    /*MENU*/

        .iconmenu{
        color: #FFFFFF;
    }

    input[type="checkbox" i] {
         appearance: none;
    }

    .nav_contenedor{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
    }
    
    .menu{
        display: flex;
        flex-direction: row;
    }
    .nav_item{
        display: flex;
        flex-direction: row;
        text-decoration: none;
        color: #078B53;
        display: block;
        width: max-content;
        margin: .25em;
        padding-block: .25em;
        padding-inline: 1em;
    }

    #fotografia article, #radio article, #produccion article{
        flex-direction: row;
        flex-wrap: wrap;
    }

    #fotografia img{
        aspect-ratio: 16/9;
    }

    .fotografia_info{
        width: 50%;
        align-items: center;
        padding-inline: 15vh;
    }

    .fotografia_info h2{
        text-align: left;
    }

    .fechastaller{
        gap: 0rem 10vh;
    }

}