@font-face {
    font-family:  Majo ;
    src: url(fuentes/Majoris.ttf);
}

@font-face {
    font-family:  Mada ;
    src: url(fuentes/Star.ttf);
}  

@font-face {
    font-family:  Gobol ;
    src: url(fuentes/Gobold\ Bold.otf);
}  

.contenido{
    background-image: url(../imagenes/comunes/leer22.png);
    background-repeat: repeat;
}

.legado{
    display:block;
  
 /*     background-color: rgb(255, 255, 255); */
      color: rgb(28, 28, 28);
      width: 85%;
      border-radius: 5px;
     /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
}

.legado2{
    display:block;
      background-color: rgb(255, 255, 255);
      color: rgb(28, 28, 28);
      width: 100%;
      border-radius: 5px;
     /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
}

.titulo{
    font-family: Gobol;
    font-size: 2.5em;
    width: 100%;
    height: 40px;
    font-weight: 400;
    padding: 40px 40px;
    color: rgb(15, 61, 118);
    text-align: left;
}


.linea{
    font-family: 'Roboto', sans-serif;
    font-size: 1.4em;
    text-align: justify;
    font-weight: 200;
    padding: 20px 40px;
    color:rgba(79, 78, 78, 0.902)
    }


.texto{
    font-family: 'Roboto', sans-serif;
    font-size: 1.4em;
    text-align: justify;
    font-weight: 200;
    padding: 20px 40px;
    color:rgba(79, 78, 78, 0.902)
}

.texto2{
    font-family: 'Roboto', sans-serif;
    font-size: 1.em;
    text-align: justify;
    font-weight: 200;
    padding: 10px 10px;
    color:rgba(217, 214, 214, 0.902)
}

.texto3{
    font-family: 'Roboto', sans-serif;
    font-size: 1.em;
    text-align: justify;
    font-weight: 300;
    padding: 10px 10px;
    color:rgba(6, 6, 6, 0.998)
}

.interna{
    width: 100%;
}

.union{
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.izquierdo{
    width: 55%;
}

.derecho{
    width: 40%;
    margin-right: 20px;
}


.btn_basico{
    background-color: rgb(15, 61, 118);
    color: white;
    cursor: pointer;
    font-family: var(--fuente);
    border-radius: 10px;
    font-size: var(--fuente);
    font-weight: 900;
    padding: 10px 20px;
    margin: 0 auto;
    z-index: 1;
}

.btn_basico:hover{
    color: rgb(253, 190, 25);
}

.btn_basico2{
    background-color:  rgba(253, 188, 25, 0.929);
    color: white;
    cursor: pointer;
    font-family: var(--fuente);
    border-radius: 10px;
    font-size: var(--fuente);
    font-weight: 900;
    padding: 10px 20px;
    margin: 0 auto;
    z-index: 1;
}

.btn_basico2.derecho{
    color: rgba(23, 23, 23, 0.755);
}

.news{
    width: 100%;
    font-family: var(--fuente);
    font-size: 40px;
    font-weight: 900;
    color: rgb(184, 183, 183);
}


/* CSS FOOTER  */
.contenedor{
    background-color: rgba(58, 57, 57, 0.755);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 10px;

}

.lado_a{
    width: 40%;
    background-color: rgba(0, 255, 255, 0);
    padding: 10px;

}

.lado_b{
    position: relative;
    width: 30%;
    background-color: rgba(0, 255, 255, 0);
   padding-left: 5%;
}

.lado_c{
    width: 30%;
    background-color: rgba(72, 46, 125, 0);
    padding: 10px;
}

.logo{
    width: 35%;
}

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

.ubicacion{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:left;
    align-items: center;
    align-content: center;
   
}

.telefono{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-items: center;
    align-content: center;
}

.correo{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-items: center;
    align-content: center;
}

.chat{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-items: center;
    align-content: center;
}

.redes{
    background-color: rgba(0, 0, 255, 0);
    width: 35%;
}

.newsemail{
    width: 100%;
}

.amilogo{
    border-radius: 5px;
}

.parrafo{
    margin-top: 6px;
}


/*
.cajaponentes{
    width: 50%;
    background-color: rgba(178, 244, 246, 0);
    display: grid;
    gap: 10px;
    grid-template: 
    "ponente1 ponente2 ponente3"
    " ponente4 ponente5 ponente6" 
    " ponente7 ponente8 ponente9";
}
*/

.cajaponentes{
    width: 100%;
    background-color: rgba(178, 244, 246, 0);
    display: grid;
    gap: 20px;
    grid-template: 
    "ponente1"
    "ponente2"
    "ponente3"
    "ponente4"
    "ponente5"
    "ponente6"
    "ponente7"
    "ponente8"
    "ponente9";
}


.ponente1{
    padding: 5px;
    background-color: rgba(137, 43, 226, 0);
    transition: all 0.7s ease 0s;
}
.ponente1:hover{
    transform: scale(1.1);
}

.texto2{
    width: 100%;
    display:block;
}

.imgnom{
    padding: 10px 20px;
    margin-top: 5px;
}

.perfil{
    display: inline-flex;
    flex-direction: row;
    justify-content:stretch;   
}


.ponente2{
    padding: 5px;
    background-color: rgba(137, 43, 226, 0);
    transition: all 0.7s ease 0s;
}
.ponente2:hover{
    transform: scale(1.1);
}

.ponente3{
    padding: 5px;
    background-color: rgba(137, 43, 226, 0);
    transition: all 0.7s ease 0s;
}

.ponente3:hover{
    transform: scale(1.1);
}

.ponente4{
    padding: 5px;
    background-color: rgba(137, 43, 226, 0);
    transition: all 0.7s ease 0s;
}
.ponente4:hover{
    transform: scale(1.1);
}

.ponente5{
    padding: 5px;
    background-color: rgba(137, 43, 226, 0);
    transition: all 0.7s ease 0s;
}
.ponente5:hover{
    transform: scale(1.1);
}

.ponente6{
    padding: 5px;
    background-color: rgba(137, 43, 226, 0);
    transition: all 0.7s ease 0s;
}
.ponente6:hover{
    transform: scale(1.1);
}

.ponente7{
    padding: 5px;
    background-color: rgba(137, 43, 226, 0);
    transition: all 0.7s ease 0s;
}
.ponente7:hover{
    transform: scale(1.1);
}

.ponente8{
    padding: 5px;
    background-color: rgba(137, 43, 226, 0);
    transition: all 0.7s ease 0s;
}
.ponente8:hover{
    transform: scale(1.1);
}

.ponente9{
    padding: 5px;
    background-color: rgba(137, 43, 226, 0);
    transition: all 0.7s ease 0s;
}
.ponente9:hover{
    transform: scale(1.1);
}

.ponente10{
    padding: 5px;
    background-color: rgba(137, 43, 226, 0);
    transition: all 0.7s ease 0s;
}
.ponente10:hover{
    transform: scale(1.1);
}


.foto{
    border-radius: 10px;
    box-shadow:5px 5px 10px rgb(17, 82, 50); /* SOMBRA */  ; 
}


.nombre{
    margin-top: 10px;
}

.precio{
    transition: all 0.7s ease 0s;
}
.precio:hover{
    transform: scale(1.1);
    margin-right: 20%;
    font-weight: 900;
}


.relojint{
    position:relative;
    width: 25%;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.672);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius: 10px;
    box-shadow:5px 5px 10px rgb(17, 82, 50); /* SOMBRA */  ; 
    margin-top: -50%;
    margin-left: 35%;
    padding: 10px;
    text-align: center;
}

    
/* ACOORDEON */


.acordeon{
    width: 100%;
    background-color: rgba(18, 159, 159, 0);
    padding: 1em;
}

.acordeon .bloque{
    width: 100%;
    background-color: rgba(163, 162, 162, 0);
    margin: 0 0 1em;
    padding: 0.5em;
}

.acordeon .h2{
    background-color: var(--color-barra);
    font-size: 1.5em;
    font-weight: 600;
    color: #ffffff;
    padding: 0;
    margin: 0 0  0.5em;
    cursor: pointer;
    text-align: left;

   
}

.acordeon .contenido{
    font-family: var(--fuente);
    margin-left: 0px;
    height: 0px;
    padding: 0px;
    overflow: hidden;
    transition: all 1s ease;
}

.acordeon .bloque.activo .contenido{
    height: 1000px;
}

.desplegar{
    width: 30px;
}

.desplegar2{
  width: 100%;
}

.programa{
    height: 100px;
}
.desplegar3{
    height: 1000px;
 }




/* PANTALLA MOVIL */
@media (max-width: 768px){
    .relojint{
        width: 90%; 
        height: 80px;
        margin-left: 5%;
        margin-top: 6%;
    }
    
   

    .legado{
          width: 100%;
        /*  box-shadow: 0 0 10px rgba(0, 0, 0, 0);*/
    }

    .legado2{
        width: 100%;
      /*  box-shadow: 0 0 10px rgba(0, 0, 0, 0);*/
  }
    .titulo{
        font-size: 1.3em;
    }

    .texto{
        font-size: 1.1em;
        font-weight: 250;
    }

    .linea{
        font-size: 1.1em;
        font-weight: 250;
        }


        
.union{
    width: 95%;
    height: 100%;
    display: block;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:center;
    align-items: center;
    align-content: center;
}


.izquierdo{
    width: 100%;
}




.derecho{
    margin-top: 5px;
    width: 90%;
    margin-right: 0px;
}


/* CSS FOOTER  */
.contenedor{
    background-color: rgba(58, 57, 57, 0.755);
    width: 100%;
    height: 100%;
    display: block;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 10px;

}

.lado_a{
    width: 100%;
    background-color: rgba(0, 255, 255, 0);
    padding: 10px;

}

.lado_b{
    width: 100%;
    background-color: rgba(62, 65, 65, 0);
    padding-left: 5%;
}

.lado_c{
    width: 100%;
    background-color: rgba(72, 46, 125, 0);
    padding: 10px;
}

.logo{
    width: 60%;
}


.cajaponentes{
    width: 80%;
    background-color: rgba(178, 244, 246, 0);
    display: grid;
    gap: 20px;
    grid-template: 
    "ponente1"
    "ponente2"
    "ponente3"
    " ponente4"
    "ponente5"
    "ponente6"
    "ponente7"
    "ponente8"
    "ponente9";
}

.texto2{
    width: 100%;
    display:block;
    
}

.texto3{
    width: 100%;
    color:rgba(6, 6, 6, 0.991);
    display:block;
    font-weight: 300;
}

.perfil{
    display:block;
    flex-direction: row;
    justify-content:stretch;
}

#unotexto{
    display:none;
}

#dostexto{
    display:none;
}

#trestexto{
    display:none;
}

#cuatrotexto{
    display:none;
}

#cincotexto{
    display:none;
}

#seistexto{
    display:none;
}

#sietetexto{
    display:none;
}

#ochotexto{
    display:none;
}

#nuevetexto{
    display:none;
}

.desplegar2{
width: 100%;
 }


 .acordeon{
    width: 100%;
    background-color: rgba(18, 159, 159, 0);
    padding: 1em;
    left: 0;
    text-align: left;
}

.acordeon .bloque{
    width: 100%;
}

.acordeon .bloque.activo .contenido{
    height: 300px;
}

.desplegar2{
    width: 95%;
    left: 0;
 }

.desplegar3{
   width: 80%;
   height: 300px;
    left: 0;
 }






}