/* Estilos generales para el cuerpo */
*{
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
}



/* Estilos de la cabecera */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky; /* Hace que se quede pegado */
    top: 0; /* Se queda pegado en la parte superior */
    z-index: 1000; /* Asegura que el menú esté por encima de otros elementos */
}

/* Los logos estarán en fila (de izquierda a derecha) en pantallas grandes */
.logos {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
    padding: 0 20px; /* Añadido padding en los lados */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}

/* Asegurarse de que las imágenes dentro de los logos no se peguen */
.logos img {
    margin: 0 10px; /* Espaciado entre los logos */
}

/* Menú de navegación */
#menu {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

#menu li {
    margin: 0 15px;
}

#menu a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
}

#menu a:hover{
    color: #3a2294;
    transition: all 0.3s;
    }


/* Menú desplegable - esconde el menú por defecto en pantallas pequeñas */
.menu-toggle {
    display: none;
}

/* Estilos de la hamburguesa */
.checkbtn {
    display: none;
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
}



/* segunda sección*/

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

.logog{
    padding: 5%;
    
}

main{
    padding-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(Images/1643818546952\ resplandor-u22961-fr.jpg);
    height: 900px;
    background-size: cover;
}

main form{
    display: flex;
    justify-content: center;
}

main form button{
    margin: 0.5rem;
    width: 10rem;
    height: 3.5rem;
    font-size: 25px;
    font-family: roboto;
    color: #fff;
    font-size: 25px;
    transition: all 0.4s;
}

main form button:hover{
    border-color:#3a2294;
}

.primary{
    text-decoration: none;
    color: #fff; 
    background-color: #BCCF02;
    padding: 15px 30px;
    border-radius: 15px;
    font-size: 25px;
    border-style: none;
    transition: all 0.4s;
}

.primary:hover{
    color: #3a2294;

}

/* Estilo noticias */
.noticias{
    color: #303030;
    font-size: 45px;
    font-weight: lighter;
    text-align: center;
}

.container{
    display: flex;
    align-items: center;
    justify-items: center;
    padding-bottom: 6%;
}
.noti{
    color: #303030;
    font-size: 30px;
}

.card { 
    width: 50%;
    margin: 45px 50px 45px 35px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
    cursor: default;
    transition:all 400ms ease;
    align-items: center;
    justify-items: center;
    /*Cambiar tamaño de cartas*/
    min-height: 900px;
}
.card:hover{
    box-shadow: 5px 5px 20px rgba(0,0,0,0.4) ;
    transform: translateY(-1%);
}

.card img{
    width: 100%;
    height: 100%;
}

.card .contenido{
    padding: 15px;
    text-align: center;

}

.card .contenido p{
    line-height: 1.5;
    color: black;
    margin-bottom: 8px;
}

.card .contenido h3{
    font-weight:40px;
    margin-bottom:15px;
}

.card .contenido a{
   text-decoration: none;
   display: inline-block;
   padding:10px ;
   margin-top: 10px ;
   border: 1px solid;
   border-radius: 4px;
   transition: all 400ms ease;
   background-color: #ffa155;
   color: #fff ;
}

.card .contenido a:hover{
    background: #BCCF02;
    color: #fff;
}

/*Quienes somos?*/

.texto1{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    justify-items: center;
    align-items: flex-start;
    margin-top: 65px;
    padding-top: 60px;
}


.p1{
    width: 50%;
    display: flex;
    text-align: left;
    padding-right: 40%;
 }
 
 .p2{
    display: flex;
    flex-wrap: nowrap;
    width: 50%;
 }

 /* Estilo animaciones */

@keyframes show {
    from { 
        opacity: 12;
        scale: 5555%;
    }
    
    to { 
        opacity: 100;
        scale: 777%;
    }
}

.animate__animated { 
    view-timeline-name: --image;
    view-timeline-axis: block;
    animation-timeline: --image;
    animation-name: show;
    animation-range: entry cover 75%;
    animation-fill-mode: both;
    width:100%;
    justify-items: left;
}   

/* Primera Sección*/

.todo{
    display: flex;
}

.imag{
    margin-top: 0%;
    width: 30%;
    align-content: center;
    align-self: center;
    padding:5% 0% 1% 0%;
}

.animate__animated{
    margin-top: 8%;
}

.prueba{
    display: flex;
    flex-direction: column;
    align-items:flex-end;
    width: 70%;
    padding-bottom: 1%;
}

.pru1{
    width: 40%;
    margin-right: 45%;
    padding: 3%;
    margin-bottom: 3%;
    font-size: 30px;
    margin-top: 1%;
    
}

.pru2{ 
    width: 45%;
    padding: 1%;
    margin-right: 12%;
    font-size: 20px;
    line-height: 1.9rem;
}

/* Segunada Sección*/ 

.seccion2{
    display: flex;
    margin: 1% 0% 1% 0%;
    padding-bottom: 8%;
}

.ante{
    width: 70%;
}

.antece{
    font-size: 30px;
    margin-bottom: 9%;
}

.text2{
    width: 53%;
    margin-left: 12%;
    margin-top: 5%;
    font-size: 20px;
    line-height: 1.9rem;
    padding: 1%;
}

.imag2{
    width: 25%;
    align-content: center;
    align-self: center;
    padding:1% 2%
}

/* Estilo animaciones */

@keyframes show {
    from { 
        opacity: 12;
        scale: 0%;
    }
    
    to { 
        opacity: 100;
        scale: 0%;
    }
}

.animate__fadeInUp { 
    view-timeline-name: --image;
    view-timeline-axis: block;
    animation-timeline: --image;
    animation-name: show;
    animation-range: entry cover 100%;
    animation-fill-mode: both;
    width:100%;
    justify-items: left;
}   

/* Tercera Sección*/

.seccion3{
    display: flex;
    padding: 1%;
    margin-bottom: 1%;
    padding-bottom: 7%;
}

/* Estilo animaciones */

@keyframes show {
    from { 
        opacity: 12;
        scale: 5555%;
    }
    
    to { 
        opacity: 100;
        scale: 777%;
    }
}

.animate__fadeIn { 
    view-timeline-name: --image;
    view-timeline-axis: block;
    animation-timeline: --image;
    animation-name: show;
    animation-range: entry cover 70%;
    animation-fill-mode: both;
    justify-items: left;
    width: 43%;
    padding-bottom: 4%;
    padding-top: 1%;
}

h2{
    padding:1%;
    color: #211452;
}

.mision{
    display: flex;
    flex-direction: column;
    align-items:center;
    width: 100%;
    padding-bottom: 1%;
    margin-bottom: 1%;
    text-align: center;
    font-size: 20px;
}

.pmision{
    padding: 0% 16%;
    line-height: 1.9rem;
}

.barra{
    padding: 0.5%;
    margin-top: -2%;
    background-color: #BCCF02;
    margin: -2% 2% -2% 2%;
}

.vision{
    display: flex;
    flex-direction: column;
    align-items:center;
    width: 100%;
    padding-bottom: 1%;
    margin-bottom: 1%;
    text-align: center;
    font-size: 20px;
}

.pvision{
    padding: 0% 16%; 
    line-height: 1.9rem; 
}

.areasimg{
    width: 70%;
}

/* Quinta sección*/

.seccion5{
    display: flex;
    padding-top: 1%;
    margin-bottom: 1%;
    justify-content: center;
    padding-bottom: 1%;
}

h2{
    padding: 1%;
    color: #211452;
}

.ubi{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 5%;
    margin-bottom: 5%;
    text-align: center;
    justify-content: center;
    font-size: 30px;
}

.des{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: 2%;
    margin-top: 5%;
    margin-bottom: 5%;
    text-align: center;
    font-size: 20px;
    line-height: 2;
}

.mapa{
    text-align: center;
    margin-bottom: 1%;
    padding: 1%;
    max-width: 100%; /* Limitar el ancho máximo de la sección */
}

/* Limitar el tamaño máximo de la imagen en pantallas grandes */
.mapaimg{
    max-width: 100%;  /* Ajusta la imagen al 100% del contenedor */
    width: 100%;      /* Asegura que la imagen se ajuste al tamaño del contenedor */
    height: auto;     /* Mantiene la proporción de la imagen */
}

 /* Apartado de contactos*/

.contactos{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 90px;
    background-color: #BE1E2D;
}

.deps { 
    width: 45%;
    color: #fff;
    text-align: center;
    margin-top: 25px;
    list-style: none;  /* Eliminar viñetas */
}

h3{ 
   padding-bottom: 20px;
   color: #fff;
}

.deps ul {
    list-style: none;  /* Eliminar viñetas */
    padding-left: 0;   /* Asegurar que no haya margen extra */
}

.deps ul li a{ 
    color: #ffffff; 
    list-style: none;  /* Eliminar viñetas */
    font-size: 13px;
    text-decoration: none;
    line-height: 2.5em;  
}

aside{
    width: 55%;
    margin-top: 25px;
}
.h33{
    padding-left: 55px;
}

.assi{
    color: #fff;
    padding-top:0px;
    padding-left: 55px;
    padding-right: 25px;
    font-size: 13px;
    line-height: 2.5rem;
}

.assi a{
    color: #fff;
    text-decoration: none;
    font-size:13px;
}



/* Pie de página*/

.foter { 
    background-color:#636161 ;
    font-size: 14px;
}
.final{ 
    align-content: center;
    text-align: center;
    color: #fff;
    font-weight: 12px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 5px;
}



/* Estilos para pantallas pequeñas (tabletas y celulares) */
@media screen and (max-width: 768px) {
    /* Mover los logos a la parte superior y centrarlos */
    .logos {
        width: 100%;
        justify-content: center; /* Centrado de los logos */
        margin-bottom: 1px;
        padding: 0 10px; /* Mantener el padding en los lados */
    }

    /* Establecer tamaños fijos para los logos */
    .logouam {
        width: 78px; /* Tamaño fijo para el logo de la izquierda */
    }

    .logocyad {
        width: 80px; /* Tamaño fijo para el logo de la derecha */
    }

    .logoamb {
        width: 100px; /* Tamaño fijo para el logo central */
    }

    #menu {
        flex-direction: column;
        width: 100%;
        display: none;
        text-align: center;
        background-color: #fff;
        padding: 8px 0;
        box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
        max-height: 0; /* Ocultar el menú inicialmente */
        overflow: hidden;
        transition: max-height 0.5s ease-out; /* Transición suave */
    }

    #menu li {
        margin: 8px 0;
    }

    #menu a {
        font-size: 16px; /* Reducir el tamaño de la fuente */
        padding: 5px 0; /* Reducir el padding de los enlaces */
    }

    #menu.show {
        display: block;
        max-height: 250px; /* Aumentar el max-height para mostrar el menú */
    }

    /* Estilos para el botón de menú */
    .checkbtn {
        display: block;
    }

    /* Cuando el menú está abierto, debe mostrarse */
    #check:checked + .checkbtn + #menu {
        display: block;
        max-height: 250px; /* Mostrar el menú cuando el checkbox esté marcado */
    }


/* Agregar un efecto de transición suave al menú desplegable */
#menu.show {
    transition: max-height 0.5s ease-out; /* Transición más rápida y fluida */
}

/*Noticias*/

.container {
    display: block;
    margin: 0 auto; /* Ajustamos el margen para centrar el carrusel */
    width: 90%; /* Ajustamos el ancho para que el carrusel sea más estrecho */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap; /* Mantenemos esta propiedad para el carrusel */
}

.card {
    display: inline-block;
    width: 65vw; /* Ancho relativo para dispositivos móviles */
    max-width: 300px; /* Ancho máximo para cartas */
    margin: 20px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
    cursor: default;
    transition: all 0.4s ease;
    vertical-align: top; /* Alineamos las cartas en la parte superior */
    white-space: normal;
}

.card img {
    width: 100%;
    height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.card .contenido {
    padding: 15px;
    text-align: center;
}

.card .contenido p {
    line-height: 1.5;
    color: black;
    margin-bottom: 8px;
}



/* Primera Sección*/

.todo{
    display: flex;
    margin-top: 15%;
}

.imag{
    display: none;
    margin-top: 0%;
    width: 30%;
    align-content: center;
    align-self: center;
    padding:5% 0% 1% 0%;
}

.animate__animated{
    margin-top: 8%;
    display: none;
}

.prueba{
    display: flex;
    flex-direction: column;
    align-items:flex-end;
    width: 100%;
    padding-bottom: 1%;
}

.pru1{
    width: 90%;
    padding: 3%;
    margin-bottom: 3%;
    font-size: 20px;
    color: #000000;
    text-align:center;
    margin: auto;
    
}

.pru2{ 
    width: 80%;
    padding: 3%;
    padding-top: 8%;
    font-size: 15px;
    line-height: 1.4rem;
    text-align: center;
    margin: auto;
}

/*Seccion 2 Antecedentes*/

.seccion2{
    width: 100%;
}

.ante{
    width: 90%;
    text-align: center;
    margin: auto;
}

.text2{
    width: 90%;
    margin: auto;
    font-size: 15px;
    line-height: 1.5rem;
}

.antece{
    margin-top: 15%;
}

.imag2{
    display: none;
}

/* Tercera seccion Misión - Visión*/

.seccion3{
    display: block;
}

.animate__animated.animate__fadeIn{
    display: none;
}

.pmision{
    font-size: 15px;
    line-height: 1.5rem;
    margin-top: 8%;
    margin-bottom: 8%;
}

.barra{
    
    display: none;
}

.pvision{
    font-size: 15px;
    line-height: 1.5rem;
    margin-top: 8%;
}


/* Quinta sección - Ubicación*/ 

.seccion5{
    display: block;
    margin-top: 10%;
}

.des{
    margin: auto;
    font-size: 15px;
    text-align: center;
    margin-top: 10%;
}

.des p {
    text-align: center;
    margin: auto;
    line-height: 1.5rem;
}

.mapa{
    max-width: 100%;
    margin-top: 8%;
}

.mapaimg{
    max-width: 100%;
    width: 98%;

}

/*Contactos*/ 

.contactos{
    display: block;
    width: 100%;
    padding-bottom: 5%;
}

.deps{
    font-size: 15px;
    line-height: 1.3rem;
    width: 100%;
    padding-top: 10%;

}


/* Centramos los encabezados */
.h33 {
    width: 100%;
    text-align: center;
    padding-left: 0;
}

/* Centramos el aside y ajustamos el ancho */
aside {
    width: 100%; /* Hacemos que ocupe el 100% del contenedor */
    margin: 40px auto 0;
    text-align: center;
}

/* Centramos el contenido dentro de .assi */
.assi {
    width: 90%; /* Ajustamos un 90% de ancho */
    margin: 0 auto; /* Centrado automático */
    font-size: 15px;
    line-height: 2rem;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}

/* Centramos el enlace de Google Maps */
.maps {
    width: 100%;
    text-align: center;
    display: block; /* Para que sea un bloque y ocupe el 100% */
    margin: 0 auto;
}

/* Centramos el correo */
.correo {
    text-align: center;
    display: block;
    margin: 10px 0;
}

/* Centramos el enlace de Facebook */
.fb {
    text-align: center;
    display: block;
    margin: 10px 0;
}

/* Estilo adicional para los párrafos */
p {
    text-align: center;
    margin: 10px 0;
}



/* Footer*/

.foter{
    font-size: 12px;
}
}