* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background-color: white;

}

/*Flecha para ir arriba*/
.contenedor-flecha {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.contenedor-flecha.mostrar {
    opacity: 1;
    pointer-events: auto;
}

.contenedor-flecha.rebote-salida {
    animation: reboteHaciaArriba 0.6s ease forwards;
}

/* Icono flecha */
.ir-arriba {
    font-size: 40px;
    color: #0d5c98;
    cursor: pointer;
    border-radius: 50%;
    /* Círculo perfecto */
    padding: 2px;
    /* Espaciado interior */
    background-color: #13d8ff;
    /* Opcional: fondo semitransparente */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    /* Opcional: brillo leve */
    transition: transform 0.3s, box-shadow 0.3s;
}

.ir-arriba:hover {
    transform: rotate(360deg);
    box-shadow: 0 0 15px white;
}

/* Animación de rebote hacia arriba */
@keyframes reboteHaciaArriba {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    30% {
        transform: translateY(10px);
    }

    60% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* BOTON WHATSAPP */
.container-wsp {
    background-color: #ffffff;
    /* border: 1px solid #fff; */
    position: fixed;
    z-index: 999;
    border-radius: 50%;
    bottom: 100px;
    right: 15px;
    transition: ease 0.3s;
    animation: efecto 1.2s infinite;
    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.container-wsp:hover {
    transform: scale(1.2);
    transition: 0.3s;
}

.btn-wsp {
    padding: auto;
    width: 45px;
    height: 45px;
    transition: ease 1s;

}

@keyframes efecto {
    0% {
        box-shadow: 0 0 0 0 #0d5c98;
        transform: scale(1.2);
        transition: 0.3s;
    }

    100% {
        box-shadow: 0 0 0 10px #a1d2f75b;

    }
}

.tooltip-wsp {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
    background-color: #0d5c98;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.container-wsp:hover .tooltip-wsp {
    opacity: 1;
}

/*/////////////////////////////////////////////////////////////////////*/

.titulo1,
.titulo2 {
    color: #585858;
    margin-bottom: 40px;
    font-size: 45px;
    text-align: center;
}

.titulo2 {
    color: #ffffff;
}

/* iconos */
.fa-facebook,
.fa-square-twitter,
.fa-square-instagram,
.fa-envelope,
.fa-location-dot,
.fa-mobile-screen {
    color: #13d8ff;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 13px;
}

.fa-brands {
    color: #fff;
    font-size: 18px;
}

.fa-brands:hover {
    color: #13d8ff;
    opacity: 0.7;
}

/* barra superior ccon informacion y redes */
.nav0 {
    background: #0d5c98;
    display: flex;
    position: static;
    width: 100%;
    /*padding: 0px 0px;*/
}

.direccion {
    width: 80%;
    color: white;
    height: 30px;
    line-height: 20px;
    font-size: 11px;
    display: flex;
    justify-items: center;
    justify-content: space-around;
}

.direccion a {
    text-decoration: none;
    color: #EEE;
}

.direccion a:hover {
    color: #13d8ff;
}

.redes-sociales {
    text-align: right;
    justify-content: right;
    width: 18%;
    display: flex;
}



.enlace {
    padding: 10px;
}


/* --------------MENU CON BOTONES ----------------------*/
.menu-responsive {
    padding: 5px 35px;
    border-bottom: 2px solid #0d5c98;
    /* Puedes cambiar el color y grosor */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Opcional, para darle un efecto de profundidad */
    z-index: 999;
    position: relative;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 30px;
}

.logo img {
    height: 70px;
    width: 220px;
    filter: saturate(195%);
    display: block;
}

.hamburguesa {
    font-size: 24px;
    background: none;
    border: none;
    color: #0d5c98;
    cursor: pointer;
    display: none;
}

.grupo-botones-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-top: 0;
    /* ← corrige el salto */
}

/* BOTONES */
.btn-menu {
    background-color: #0d5c98;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.4s ease;
}

.btn-menu:hover {
    background-color: #13d8ff;
    color: #003366;
    border: 2px solid;
}

.btn-menu i {
    font-size: 13px;
}

.btn-menu.active {
    background-color: #13d8ff;
    color: #003366;
    border: 2px solid #0d5c98;
}

/* SUBMENÚ */
.dropdown-menu {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    background-color: white;
    top: 100%;
    left: 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    z-index: 1000;
    min-width: auto;
    width: max-content;
    /* ← se adapta al texto */
}

.dropdown-menu:hover .submenu {
    display: block;
}

.btn-submenu {
    display: block;
    color: #0d5c98;
    text-decoration: none;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid #e0e0e0;
    /* Línea gris entre ítems */

}

.btn-submenu i {
    margin-right: 8px;
    font-size: 14px;
}

.btn-submenu:hover {
    background-color: #13d8ff;
    color: white;
    border-radius: 5px;
}

/* Elimina línea en el último */
.submenu .btn-submenu:last-child {
    border-bottom: none;
}

/* Borde superior celeste en el primer ítem */
.submenu .btn-submenu:first-child {
    border-top: 2px solid #13d8ff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


/* <<<<<<<<<<<<<<<<<<<<< SWIPER >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.slider {
    color: #13d8ff;
    position: relative;
    border: 1px solid #ffffff;

}

.swiper {
    float: none;
    width: 100%;
    min-width: 120px;
    margin: auto;
}

.swiper .swiper-slide {
    overflow: hidden;
}

.swiper .swiper-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(1, 8, 17, 0.877), rgba(7, 143, 185, 0.27));
    z-index: 1;
}

.swiper .swiper-slide img {
    height: 570px;
    width: 100%;
    object-fit: cover;
    position: relative;
    z-index: 0;
}

/* ////////////////////// carrusel fotos ////////////////////////// */
.slider-foto {
    display: flex;
    flex-direction: center;
    align-items: center;
    justify-content: center;
    width: 50%;
    min-width: 120px;
    margin: auto;
    padding-top: 80px;

}

.f img {
    height: 350px;
    object-fit: cover;
    width: 100%;
    object-fit: cover;
    filter: saturate(175%);
    justify-content: center;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

.swiper .swiper-button-prev,
.swiper .swiper-button-next {
    --swiper-navigation-size: 30px;
    background-color: #ffffff;
    height: 70px;
    width: 50px;
    margin-top: -35px;
    opacity: 0;
    color: #13d8ff;
}

.swiper .swiper-button-prev {
    border-radius: 0 65px 65px 0;
    left: -10px;
}

.swiper .swiper-button-next {
    border-radius: 65px 0 0 65px;
    right: -10px;
}

.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next {
    opacity: 1;
}


/* Todos los bullets (inactivos) */
.swiper .swiper-pagination-bullet {
    background-color: #ccc !important;
    /* gris claro */
    opacity: 1 !important;
}

/* Solo el bullet activo */
.swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #13d8ff !important;
    /* tu azul institucional */
}

.swiper .swiper-pagination {
    text-align: left !important;
    left: 0 !important;
    right: auto !important;
    width: auto !important;
    padding-left: 20px;
    /* opcional: espacio desde el borde */
}


.encima {
    position: absolute;
    width: 750px;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    color: #ffff;
    /* background:#ffd53b93; */
    border-radius: 10px;
    z-index: 2;
    /* encima de la capa oscura */
}

.encima h2,
.encima h4,
.encima .boton {
    opacity: 0;
}

.encima h2 {
    padding: 10px 20px;
    /*text-transform: uppercase;*/
    text-align: left;
    font-size: 45px;
    font-weight: 900;
    color: #13d8ff;
}

.encima h4 {
    padding: 0px 20px;
    font-size: 16px;
}

.encima .content-boton {
    display: flex;
    padding: 20px;
}

.encima .boton {
    padding: 15px 20px;
    border-radius: 30px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bolder;
    background-color: #0d5c98;
    color: #ffffff;
}

.encima .boton:hover {
    border: 2px solid transparent;
    background-color: #13d8ff;
    transform: scale(1.1);
    color: #fff;
    border: 2px solid;
}

.boton-link {
    text-decoration: none;
}

@keyframes aparecerIzquierda {
    0% {
        opacity: 0;
        transform: translateX(-150px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes aparecerAbajo {
    0% {
        opacity: 0;
        transform: translateY(70px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animaciones activadas solo cuando .encima tiene la clase "animar" */
.encima.animar h2 {
    animation: aparecerIzquierda 1.2s ease forwards;
    animation-delay: 0.3s;
}

.encima.animar h4 {
    animation: aparecerIzquierda 1.4s ease forwards;
    animation-delay: 1.8s;
}

.encima.animar .boton {
    animation: aparecerAbajo 1.6s ease forwards;
    animation-delay: 3.3s;
}

/* -----------------------------------seccion Servicios------------------------------------ */
#servicios {
    width: 100%;
    padding: 50px 100px 10px;
    text-align: center;
    background-color: none;
    margin-top: -150px;
    z-index: 100;
    position: relative;
}

.servicio-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-gap: 1rem;
    z-index: 100;
}

.servicio-info2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    grid-gap: 1rem;
    padding: 0px 140px;
}

.link-serv {
    text-decoration: none;
    color: #000000;
}

.servicio {
    padding: 15px 20px;
    width: 300px;
    height: 200px;
    text-align: center;
    box-shadow: 0 10px 20px 0 rgba(5, 64, 30, 0.1);
    border-radius: 20px;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    transition: all 300ms;
    z-index: 2;
}

.servicio:hover {
    transform: translate(5px, -5px);
    border: 5px solid #ccc;
}

.servicio h3 {
    font-size: 20px;
    color: #333;
    margin-top: 120px;
    position: relative;
    z-index: 1;
    transform: translateY(10px);
}

.servicio:hover h3 {
    margin-top: 85px;
    color: #fff;
}

.servicio p {
    font-size: 15px;
    margin-top: 5px;
    position: relative;
    z-index: 1;
    transform: translateY(100px);
    opacity: 0;
    text-align: justify;
}

.servicio:hover p {
    transform: translateY(10px);
    opacity: 1;
    margin-top: 5px;
    color: #fff;
}

.servicio .efecto-hover {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 250px;
    left: -170px;
    background-color: #13d8ff;
    border-radius: 100%;
    transition: all 300ms;

}

.servicio:hover .efecto-hover {
    width: 720px;
    height: 600px;
    top: -100px;
    left: -100px;

}

.servicio i {
    color: #13d8ff;
    font-size: 100px;
    margin-bottom: 10px;
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
    position: relative;
}

.servicio:hover i {
    transform: scale(1.2);
    font-size: 50px;
    color: #fff;
    margin-top: 15px;
    z-index: 2;
}

/* Imágenes en servicios */
.img-base,
.img-hover {
    object-fit: cover;
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    image-rendering: smooth;
}

/* Imagen base (más grande) */
.img-base {
    width: 120px;
    height: 120px;
    opacity: 1;
}

/* Imagen hover (más pequeña inicialmente oculta) */
.img-hover {
    width: 80px;
    height: 80px;
    opacity: 0;
    z-index: 2;
}

/* Al hacer hover: mostrar imagen pequeña y ocultar la base */
.servicio:hover .img-hover {
    opacity: 1;
}

.servicio:hover .img-base {
    opacity: 0;
}

/*------------------BIENVENIDA-------------*/
.bienvenida {
    padding: 60px 80px;
    background-color: #ffffff;
}

.contenido-bienvenida {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.imagen-bienvenida {
    position: relative;
    display: inline-block;
    border-radius: 100px 100px 0 100px;
}

.imagen-bienvenida img {
    width: 100%;
    max-width: 650px;
    border-radius: 100px 100px 0 100px;
}

.imagen-bienvenida::after {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    background: none;
    border: dashed 2px #20c2f0;
    border-radius: 100px 100px 0 100px;
    z-index: 22;
}

.texto-bienvenida {
    max-width: 600px;
}

.texto-bienvenida h5 {
    color: #13d8ff;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.texto-bienvenida h5::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: #13d8ff;
    margin-top: 8px;
    border-radius: 2px;
}

.texto-bienvenida h2 {
    color: #0d5c98;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
}

.texto-bienvenida p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
    text-align: justify;
}

.btn-conocenos {
    display: inline-block;
    background-color: #0d5c98;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: background-color 0.3s ease;
}

.btn-conocenos:hover {
    background-color: #13d8ff;
    color: #003366;
}

/*SECCION PROGRAMAS DE ESTUDIOS EN INICIO*/
.programas-estudio {
    text-align: center;
    padding: 60px 40px;
    background-color: #dadada4f;
}

.programas-estudio h5 {
    color: #20c2f0;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.programas-estudio h2 {
    font-size: 32px;
    font-weight: bold;
    color: #0d5c98;
    margin-bottom: 40px;
}

.programas-estudio h5::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: #13d8ff;
    margin: 8px auto 0 auto;
    border-radius: 2px;
}

.contenedor-tarjetas {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 70px;
}

.tarjeta-programa {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 350px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding-bottom: 20px;
    overflow: hidden;
}

.tarjeta-programa:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.tarjeta-programa img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.tarjeta-programa h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    padding: 16px 20px 10px;
    text-align: center;

}

.tarjeta-programa p {
    font-size: 15px;
    color: #333;
    padding: 0 20px;
    text-align: justify;
}

.btn-vermas {
    display: inline-block;
    background-color: #0d5c98;
    color: white;
    padding: 10px 20px;
    margin: 12px 24px 0;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    font-size: 13px;
    transition: background-color 0.3s ease;
}

.btn-vermas:hover {
    background-color: #13d8ff;
    color: #003366;
}

/*SECCION PORQUE ELEGIRNOS*/
.eleccion {
    position: relative;
    background-image: url("../img/fondo-eleccion.jpg");
    background-size: cover;
    background-position: center;
    padding: 80px 100px;
    color: white;
    overflow: hidden;
    z-index: 1;
}

/* Capa azul encima */
.eleccion::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 92, 159, 0.85);
    /* azul semitransparente */
    z-index: 0;
}

/* Asegurar que el contenido esté encima de la capa azul */
.eleccion>* {
    position: relative;
    z-index: 1;
}

.contenedor-eleccion {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 30px;
    align-items: stretch;
}

/* Columna izquierda */
.texto-eleccion {
    flex: 1 1 50%;
    max-width: 60%;
}

.texto-eleccion h2 {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: bold;
}

.texto-eleccion h5 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #13d8ff;
}

.texto-eleccion h5::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: #13d8ff;
    margin-top: 8px;
    border-radius: 2px;
}

.texto-eleccion p {
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 1.6;

}

/* Lista de valores */
.valores-eleccion {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    row-gap: 10px;
}

.encabezado-valor {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.valor-eleccion {
    width: calc(50% - 15px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: transparent;
    padding: 10px;
    position: relative;
    min-height: 180px;
}

.valor-eleccion span {
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    border-right: 2px solid rgba(255, 255, 255, 0.4);
    padding-right: 15px;
    margin-bottom: 10px;
}

.valor-eleccion img {
    height: 40px;
    width: auto;
    margin-bottom: 15px;
}

.valor-eleccion p {
    color: #fff;
    font-size: 16px;
    margin: 0;
    line-height: 1.6;
}

/* Botones */
.botones-eleccion {
    margin-top: 20px;
}

.boton-eleccion {
    display: inline-block;
    padding: 10px 20px;
    background: #fff;
    color: #005c9f;
    font-weight: bold;
    text-decoration: none;
    margin-right: 16px;
    border-radius: 20px;
    transition: 0.3s;
    text-transform: uppercase;
    font-size: 13px;
}

.boton-eleccion:hover {
    background: #20c2f0;
    color: #fff;
}

/* Responsive 
@media screen and (max-width: 768px) {
  .valor-eleccion {
    width: 100%;
  }

  .texto-eleccion {
    text-align: center;
  }

  .botones-eleccion {
    text-align: center;
  }
}*/


/* Slider */
.slider-eleccion {
    flex: 1 1 40%;
    max-width: 40%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.swiper1 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    z-index: 0;
    position: relative;
    filter: saturate(140%)
}

.botones-swiper1 {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
}

.swiper-button-prev-eleccion,
.swiper-button-next-eleccion {
    background: rgba(2, 145, 255, 0.552);
    padding: 10px;
    display: inline-block;
    margin: 0 5px;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.swiper1 .swiper-slide img {
    transition: transform 1.5s ease, opacity 1.5s ease;
    opacity: 0.8;
    transform: scale(1);
}

.swiper1 .swiper-slide-active img {
    opacity: 1;
    transform: scale(1.05);
}

/* cards de noticias */

.noticias {
    text-align: center;
    padding: 60px 40px;
    background-color: #dadada15;
    background-image: url('../img/fondo-fb1.png');
    background-repeat: repeat;
    background-size: 60px;

}

.noticias-header h5 {

    color: #20c2f0;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.noticias-header h2 {

    font-size: 32px;
    font-weight: bold;
    color: #0d5c98;
    margin-bottom: 40px;
}

.noticias-header h5::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: #13d8ff;
    margin: 8px auto 0 auto;
    border-radius: 2px;
}

.noticias-card {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.noticia-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 300px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.noticia-card:hover {
    transform: translateY(-5px);
}

.noticia-card img {
    width: 100% !important;
    height: 180px !;
    object-fit: cover;
}

.noticia-card p {
    padding: 15px;
    font-size: 14px;
    color: #333;
    text-align: justify;
    flex-grow: 1;
}


@media (max-width: 992px) {
    .noticia-card {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 600px) {
    .noticia-card {
        flex: 1 1 100%;
    }
}

/*ENLACES DE INTERES*/
.enlaces-interes {
    background-color: #fff;
    padding: 60px 20px;
    text-align: center;
}

.contenedor-enlaces {
    max-width: 1400px;
    margin: 0 auto;
}

.titulo-enlaces {
    font-size: 24px;
    color: #005c9f;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

.titulo-enlaces::after {
    content: '';
    display: block;
    width: 120px;
    height: 3px;
    background-color: #13d8ff;
    margin: 10px auto 0;
    border-radius: 2px;
}

.lista-enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.lista-enlaces a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.333);
    width: 140px;
    height: 100px;
    transition: transform 0.3s ease;
}

.lista-enlaces a:hover {
    transform: scale(1.05);
}

.lista-enlaces img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
}

.tooltip-enlace {
    position: relative;
    display: inline-block;
}

.tooltip-enlace .tooltip-text {
    visibility: hidden;
    background-color: #005c9f;
    color: #fff;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    font-size: 10px;
    white-space: nowrap;
    position: absolute;
    top: 110%;
    /* Muestra arriba */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-enlace:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


/*PIE DE PAGINA*/
.footer {
    background-color: #0d5c98;
    color: white;
    padding: 20px 0px 10px 0px;
    font-size: 13px;
}

.footer-contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo img {
    width: 320px;
    margin-bottom: 10px;
    /*filter: drop-shadow(0 0 20px #ffffff);*/
    filter: saturate(180%)
}

.footer h4 {
    font-size: 14px;
}

.footer h4::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: #13d8ff;
    margin-top: 8px;
    border-radius: 2px;
}


.footer-enlaces ul {
    list-style: none;
    padding: 0;
}

.footer-enlaces ul li {
    margin: 8px 0;
}

.footer-enlaces ul li a {
    color: white;
    text-decoration: none;
}

.footer-enlaces ul li a:hover {
    text-decoration: underline;
    color: #13d8ff;
}

.footer-logo,
.footer-contacto,
.footer-enlaces,
.footer-reclamaciones,
.footer-redes {
    position: relative;
    padding: 10px;
}

.footer-contacto i,
.footer-redes i {
    margin-right: 8px;
    color: #13d8ff;
}

.footer-contacto p {
    font-size: 13px;
}

/* Efecto de borde dibujado */
.footer-contacto.highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid #fff;
    border-radius: 10px;
    pointer-events: none;
    animation: dibujarBorde 1s ease forwards;
    z-index: 1;
}

@keyframes dibujarBorde {
    0% {
        clip-path: inset(0 100% 100% 0);
    }

    25% {
        clip-path: inset(0 0 100% 0);
    }

    50% {
        clip-path: inset(0 0 0 100%);
    }

    75% {
        clip-path: inset(100% 0 0 0);
    }

    100% {
        clip-path: inset(0);
    }
}


.footer-redes a {
    margin-right: 10px;
    font-size: 20px;
    color: white;
    transition: color 0.3s;
}

.footer-redes i:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

.footer-reclamaciones {
    text-align: left;
}

/*.footer-reclamaciones h4 {
  margin-bottom: 10px;
}*/

.footer-reclamaciones img {
    width: 120px;
    transition: transform 0.3s;
    border-radius: 8px;
    margin-top: 30px;
}

.footer-reclamaciones img:hover {
    transform: scale(1.05);
}

.footer-creditos {
    text-align: center;
    margin-top: 10px;
    border-top: 1px solid #ffffff;
    padding-top: 10px;
    font-size: 13px;
}

/* //////////////////// CONTENIDO DE PAGINAS /////////////////////////////////////////////////////////////////////////////// */
.banner-pagina,
.banner-mvv,
.banner-organizacion,
.banner-adm {
    position: relative;
    background: url("../img/banner-nosotros.jpg") center center/cover no-repeat;
    color: white;
    text-align: center;
    padding: 100px 20px;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 30px;
}

.banner-pagina::before,
.banner-mvv::before,
.banner-organizacion::before,
.banner-pe::before,
.banner-adm::before,
.banner-fc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(4, 49, 98, 0.635));
    z-index: 2;
}

.contenedor-banner {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centra horizontalmente todos los hijos */
    justify-content: center;
    /* Centra verticalmente si se desea */
    text-align: center;
}

.contenedor-banner h1 {
    font-size: 40px;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px #000;

}

.contenedor-banner .subtitulo {
    font-size: 14px;
    font-weight: bold;
    color: #13d8ff;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px #000;

}

.contenido-nosotros {
    background-color: #f5f5f5;
    padding: 40px 20px;
}

.contenedor-nosotros {
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.texto-nosotros,
.proyeccion-nosotros p,
.vision-nosotros p,
.valores-nosotros {
    flex: 1 1 500px;
    color: #333;
    text-align: left;
}

.vision-nosotros p {
    flex: 1 1 600px;
}

.texto-nosotros h2,
.proyeccion-nosotros h2,
.vision-nosotros h2,
.valores-nosotros h2 {
    color: #0d5c98;
    margin-bottom: 20px;
    text-align: left;
}

.imagen-nosotros,
.imagen-nosotros1 {
    flex: 1 1 300px;
    text-align: center;
    line-height: 1.5;
    color: #0d5c98;
}


.imagen-nosotros img,
.imagen-nosotros1 img {
    width: 85%;
    max-width: 350px;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    filter: saturate(130%);
}

.compromiso-nosotros,
.proyeccion-nosotros,
.mision-nosotros,
.vision-nosotros,
.valores-nosotros {
    background-color: #0d5c98;
    color: white;
    padding: 60px 20px;
    text-align: center;
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.compromiso-nosotros h2 {
    margin-bottom: 20px;
}

.mision-nosotros h2 {
    margin-bottom: 20px;
    text-align: left;
}

.contenedor-nosotros p {
    max-width: 800px;
    margin: auto;
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 16px;
}

.compromiso-nosotros p {
    text-align: center;
}

.proyeccion-nosotros,
.vision-nosotros,
.valores-nosotros {
    background-color: #f5f5f5;
    margin-bottom: 40px;
}

.vision-nosotros {
    margin-bottom: auto;
}


/*pagina mision-vision*/
.banner-mvv {
    background: url("../img/vision-mision-y-valores.jpeg") center center/cover no-repeat;
}

.contenedor-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    max-width: 1200px;

}

.contenedor-flex p,
.contenedor-flex ul {
    max-width: 1000px;
}

.contenedor-vision,
.contenedor-mision {
    flex: 2 1 900px;
}

.contenedor-valores {
    flex: 2 1 600px;
    /* Ocupa el doble de espacio que la imagen */
}

.contenido-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.imagen-vmv {
    flex: 1 1 100px;
    text-align: center;
}

.imagen-vmv img {
    width: 80%;
    max-width: 200px;
    box-shadow: none;
}

.valores-nosotros .imagen-vmv img {
    width: 50%;

}

.valores-nosotros ul {
    list-style-position: inside;
    margin: 0;
    color: #333;
    text-align: left;
}

.valores-nosotros ul li {
    margin-bottom: 10px;
    line-height: 1.6;
    margin-left: 30px;
    padding-right: 120px;
}

.contenedor-valores ul {
    max-width: 100%;
    padding-left: 0;
}


/*pagina organización*/
.banner-organizacion {
    background: url("../img/banner-organizacion.png") center center/cover no-repeat;
}

.organizacion-nosotros {
    background-color: #f5f5f5;
    color: #333;
    padding: 40px 20px;
    margin-bottom: 40px;

}

.contenedor-organizacion h2 {
    color: #0d5c98;
    margin-bottom: 20px;
    text-align: left;
}

.contenedor-organizacion p,
.contenedor-organizacion ul {
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
    max-width: 1200px;
}

.contenedor-organizacion ul {
    padding-left: 20px;
    margin-top: 10px;
}

.contenedor-organizacion ul li {
    margin-bottom: 10px;
}

.contenedor-organizacion h3 {
    text-transform: uppercase;
    color: #0d5c98;
    margin-bottom: 20px;

}

.contenedor-organizacion img {
    width: 100%;
    max-width: 1000px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    align-items: center;
}

.contenedor-imagen-organigrama {
    text-align: center;
    margin-top: 50px;
}

/* ======= DIRECTORIO INSTITUCIONAL ======= */
/* ======= ESTILO GENERAL DEL DIRECTORIO ======= */

.directorio-nosotros {
    padding: 60px 20px;
    background-color: #f5f5f5;
    text-align: center;
    margin-bottom: 40px;
}

.directorio-nosotros h2 {
    color: #0d5c98;
    margin-bottom: 40px;
    font-size: 28px;
}

/* Contenedor principal */
.contenedor-directorio {
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}

/* ======= GRID DE TARJETAS ======= */
.grid-directorio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columnas */
    gap: 30px;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

/* ======= TARJETAS INDIVIDUALES ======= */
.tarjeta-directivo {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    border: solid 2px #005c9f;
}

.tarjeta-directivo:hover {
    transform: translateY(-5px);
}

.tarjeta-directivo img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #0d5c98;
    margin-bottom: 15px;
}

.tarjeta-directivo h3 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #0d5c98;
}

.tarjeta-directivo .cargo {
    text-transform: uppercase;
    font-size: 13px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0d5c98;
    width: 100%;
}

.tarjeta-directivo p {
    font-size: 14px;
    margin: 3px 0;
    color: #444;
    text-align: center;
}

.tarjeta-directivo a {
    color: #0d5c98;
    text-decoration: none;
}

.tarjeta-directivo a:hover {
    text-decoration: underline;
}

/* ======= BOTÓN DE DESCARGA ======= */
.boton-descarga {
    margin-top: 50px;
}

.btn-descargar {
    background-color: #0d5c98;
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 13px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: bold;
    text-transform: uppercase;
}

.btn-descargar:hover {
    background-color: #13d8ff;
    color: #005c9f;
}

/* ======= ENCABEZADO PARA PDF (OCULTO EN LA WEB) ======= */
#encabezado-pdf {
    display: none;
    /* oculto en web */
}

/* ======= ESTILOS PARA PDF E IMPRESIÓN ======= */
@media print {
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: white !important;
    }

    .directorio-nosotros {
        padding: 20px;
        background-color: white;
    }

    #encabezado-pdf {
        display: block !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        text-align: center;
        margin-bottom: 20px;
        margin-top: 30px;
    }

    #encabezado-pdf img {
        width: 80px;
        margin-bottom: 30px;
    }

    #encabezado-pdf h2 {
        font-size: 22px;
        color: #0d5c98;
        margin-bottom: 5px;
    }

    #encabezado-pdf p {
        font-size: 13px;
        color: #444;
        margin-top: 10px;
    }

    .grid-directorio {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
        page-break-inside: avoid;
    }

    .tarjeta-directivo {
        border: 1px solid #ccc;
        padding: 15px;
        background-color: white;
        page-break-inside: avoid;
    }

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

    .boton-descarga {
        display: none !important;
        /* ocultar botón en PDF */
    }
}

/* ---------------Sección Locales------------------------------ */

.seccion-locales {
    padding: 60px 20px;
    background-color: #f5f5f5;
    margin-bottom: 40px;
}

.contenedor-local {
    max-width: 1200px;
    margin: auto;
}

.seccion-locales h2 {
    color: #0d5c98;
    text-align: center;
    font-size: 30px;
    margin-bottom: 40px;
}

.info-local {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.texto-local {
    flex: 1 1 45%;
    font-size: 16px;
    color: #444;
}

.texto-local p {
    margin-bottom: 1px;
    line-height: 1.6;
}

.texto-local a {
    color: #0d5c98;
    text-decoration: none;
}

.texto-local a:hover {
    text-decoration: underline;
}

.mapa-local {
    flex: 1 1 50%;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
}

.galeria-local h3 {
    margin-top: 30px;
    text-align: center;
}

.contenedor-galeria {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.img-galeria {
    width: 250px;
    height: 160px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.2s ease;
}

.img-galeria:hover {
    transform: scale(1.03);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.lightbox.show {
    display: flex !important;
}

.contenido-lightbox {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
}

.cerrar {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

.anterior,
.siguiente {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: white;
    cursor: pointer;
    padding: 10px;
    user-select: none;
}

.anterior {
    left: 20px;
}

.siguiente {
    right: 20px;
}

/*PAGINAS PROGRAMAS DE ESTUDIOS*/
.banner-pe {
    position: relative;
    background: url("../img/programas-estudios/banner-apsti.png") center center/cover no-repeat;
    color: white;
    text-align: center;
    padding: 100px 20px;
    width: 100%;
    border-radius: 0;
}

.banner-pe.agro {
    background: url("../img/programas-estudios/banner-agro.png") center center/cover no-repeat;

}

.banner-pe.mecanica {
    background: url("../img/programas-estudios/banner-mecanica.png") center center/cover no-repeat;

}


.contenedor-banner {
    max-width: 1200px;
    margin: auto;
}

/* ---------------------- Sección General ---------------------- */
.perfil-infraestructura {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 50px 220px;
    background-color: #ffff;
}

.perfil-columna-izquierda {
    flex: 1 1 55%;
}

.perfil-columna-izquierda h2 {
    font-size: 26px;
    color: #0d5c98;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.perfil-columna-izquierda p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify;
}

.perfil-columna-derecha {
    flex: 1 1 20%;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.179);
    line-height: 1.6;

}

.titulo-profesional {
    font-size: 20px;
    color: #0d5c98;
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 10px;
    margin-bottom: 10px;
}

.perfil-columna-derecha p {
    font-size: 14px;
    font-weight: bold;
    color: #222;
    margin-bottom: 20px;
    text-align: center;

}

.tabla-perfil {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #005c9f;
    text-align: center;

}

.tabla-perfil td {
    padding: 20px 5px;
    font-size: 13px;
    color: #333;
    vertical-align: top;
    /*border-top: 1px solid #e0e0e0;*/
}

.tabla-perfil td i {
    color: #0d5c98;
    margin-right: 8px;
    font-size: 20px;
}

/*icono de inscribete*/
.tabla-perfil td .fa-pen-to-square {
    color: #fff;
}

/* Responsive */
@media (max-width: 1024px) {
    .perfil-infraestructura {
        padding: 40px 40px;
    }
}

@media (max-width: 768px) {
    .perfil-infraestructura {
        flex-direction: column;
        padding: 30px 20px;
    }

    .perfil-columna-izquierda,
    .perfil-columna-derecha {
        flex: 1 1 100%;
    }
}

/*Galeria PE*/
.galeria-pe {
    padding: 60px 200px 80px;
    background: #f5f5f5;
}

.galeria-pe h3 {
    text-align: center;
    font-size: 20px;
    color: #0d5c98;

}

/*CAMPO LABORAL*/
.campo-laboral {
    background-color: #0d5c98;
    padding: 50px 220px;
}

.campo-laboral h2 {
    text-align: center;
    font-size: 32px;
    color: #fff;
    margin-bottom: 20px;
}

.campo-laboral p {
    font-size: 16px;
    color: #fff;
    margin-bottom: 40px;
    line-height: 1.6;
    text-align: justify;
}

.campo-laboral-contenedor {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.campo-lista {
    flex: 1 1 450px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.campo-btn {
    display: flex;
    /* Permite alinear ícono y texto horizontalmente */
    align-items: center;
    /* Centra verticalmente ícono y texto */
    justify-content: flex-start;
    /* Alinea contenido a la izquierda */
    gap: 10px;
    /* Espacio entre ícono y texto */
    background-color: #eaf0f6;
    border: none;
    padding: 10px;
    font-size: 16px;
    color: #0d5c98;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: 600;
}

.campo-btn i {
    margin-right: 10px;
}

.campo-btn:hover,
.campo-btn.activo {
    background-color: #20c2f0;
    color: #fff;
}

/* Descripción desplegable */
.campo-descripcion {
    padding: 0 20px 15px;
    background-color: #ffffff;
    display: none;
    animation: fadeIn 0.3s ease;
}

.campo-descripcion-box {
    flex: 2 1 500px;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-height: 220px;
}

.campo-descripcion.activo {
    display: block;
    animation: fadeIn 0.4s ease-in-out;
}

.campo-descripcion h4 {
    font-size: 16px;
    color: #0d5c98;
    margin-bottom: 10px;
}


.campo-descripcion ul {
    padding-left: 20px;
    margin: 10px 0 0;
}

.campo-descripcion li {
    color: #333;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.5;
}

.campo-descripcion li {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*MALLA CURRICULAR--------------*/
#malla-curricular {
    padding: 60px 20px;
    background-color: #f7f9fc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

.titulo-malla {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
    color: #0d5c98;
}

.titulo-malla span {
    display: block;
    font-weight: bold;
    font-size: 30px;
    color: #13d8ff;
}

.descripcion-malla {
    text-align: center;
    margin-bottom: 30px;
    font-size: 16px;
    color: #555;
}

/* Tabs */
.tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tab {
    padding: 10px 20px;
    background-color: #e1ecf4;
    color: #0d5c98;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.tab:hover {
    background-color: #cce1f0;
}

.tab.activo {
    background-color: #0d5c98;
    color: white;
    font-weight: bold;
}

/* Contenido por Año */
.contenido-malla .anio {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.contenido-malla .anio.activo {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
}

.anio h3 {
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
    color: #0d5c98;
}

.tabla-mod4 {
    justify-self: center;
    text-align: center;
    /*margin: 0px 10px 0 5px;*/
}

.tabla-mod4 td {
    font-size: 13px;
    color: #333;
    vertical-align: top;
    white-space: normal;
    width: 515px;
    /*border-top: 1px solid #e0e0e0;*/
}

.tabla-mod4 td h3 {
    color: #0d5c98;
    font-size: 21px;
    padding: 0px 20px;
}

/* Contenedor que centra los ciclos */
.contenedor-ciclos {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
}

/* Scrollbar visible y estilizado */
.contenedor-ciclos::-webkit-scrollbar {
    height: 8px;
}

.contenedor-ciclos::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

/* Ciclos en fila */
.ciclo {
    display: inline-block;
    vertical-align: top;
    width: 500px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(13, 92, 152, 0.1);
    white-space: normal;
    /* Permite que el contenido interno haga salto de línea */
}

.ciclo h4 {
    color: #0d5c98;
    margin-bottom: 15px;
    font-size: 20px;
    border-left: 5px solid #13d8ff;
    padding-left: 10px;
}

/* Unidades Didácticas */
.ud {
    margin-bottom: 10px;
}

.ud-btn {
    background-color: #f0f4f8;
    border: none;
    color: #0d5c98;
    padding: 12px 15px;
    font-size: 15px;
    font-weight: bold;
    width: 100%;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ud-btn .icono {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.ud-btn.activa .icono {
    transform: rotate(90deg);
    /* Triángulo apunta hacia abajo */
}

.ud-btn:hover,
.ud-btn.activa {
    background-color: #20c2f0;
    color: #fff;
}

.ud-descripcion {
    display: none;
    padding: 10px 15px;
    background-color: #f9fcff;
    border-left: 4px solid #0d5c98;
    border-radius: 0 0 6px 6px;
    font-size: 14px;
    color: #555;
}

/* Animación */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll horizontal (estilo visual del scrollbar) */
.contenido-malla .anio.activo::-webkit-scrollbar {
    height: 8px;
}

.contenido-malla .anio.activo::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .tabs {
        flex-direction: column;
        align-items: center;
    }

    .ud-btn {
        font-size: 14px;
    }

    .ciclo {
        width: 90%;
        margin-right: 10px;
    }
}

/*FIN DE MALLA CURRICULAR*/

/*Itinerario*/
.itinerario-section {
    background-color: #005c9f;
    padding: 70px 20px;
    color: white;
}

.itinerario-container {
    max-width: 1000px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.itinerario-image img {
    max-width: 250px;
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.itinerario-content {
    flex: 1;
    min-width: 200px;
}

.itinerario-content h2 {
    font-size: 32px;
    margin-bottom: 15px;
    font-weight: 700;
}

.itinerario-content p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: justify;
}

.itinerario-content a {
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 700;
}

.btn-descargar-i,
.btn-inscribete {
    background-color: white;
    color: #000000;
    padding: 12px 20px;
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s;
}

.btn-inscribete {
    background-color: #005c9f;
    color: #fff;
}

.btn-descargar-i:hover,
.btn-inscribete:hover {
    background-color: #13d8ff;
    color: #ffffff;
}

.btn-descargar i {
    font-size: 18px;
}

.f {
    color: #fff;
}

/*PAGINAS ADMISION Y BECAS--------------------------*/
.banner-adm.admision {
    background: url("../img/banner-admision.png") center center/cover no-repeat;
}

.banner-adm.matricula {
    background: url("../img/banner-admision.png") center center/cover no-repeat;
    margin-bottom: 0px;
}

#admision {
    background-color: #ffff;
    color: #333;
    padding: 5px 220px 40px;
}

.admision-contenedor {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/*imagen admision*/
.imagen-admision {
    flex: 1 1 350px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen-admision img {
    width: 40%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/*Caja admision*/
.caja-admision {
    background-color: #f0f4f8;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.179);
    line-height: 1.6;
    width: 600px;
    justify-self: center;
}

.examen-admision {
    font-size: 20px;
    color: #0d5c98;
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 15px;
    margin-bottom: 10px;

}

.caja-admision p {
    border-top: 1px solid #005c9f;
}

.caja-admision p,
.caja-admision li {
    font-size: 14px;
    font-weight: bold;
    color: #222;
    text-align: left;
}

.caja-admision li {
    margin-left: 25px;
}

.tabla-admision {
    width: 100%;
    border-top: 1px solid #005c9f;
    text-align: center;
    align-items: center;
    margin-top: 10px;
}

.tabla-admision td {
    padding: 8px 0px;
    font-size: 13px;
    color: #333;
    vertical-align: top;
    justify-self: center;
    width: 25%;

}

.tabla-admision td i {
    color: #0d5c98;
    margin-right: 8px;
    font-size: 20px;
}

/*icono de inscribete*/
.tabla-admision td .fa-pen-to-square {
    color: #fff;
}

.btn-inscribete-adm {
    background-color: #005c9f;
    color: #fff;
    padding: 12px 20px;
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 8px;
    transition: background-color 0.3s;
    margin-top: 0px;
}


/*Informacion General*/
#admision-info,
#matricula-info {
    background-color: #f5f5f5;
    color: #333;
    padding: 10px 220px 60px;
}

.titulo-admision {
    font-size: 28px;
    margin: 40px 0 10px 0;
    color: #0d5c98;
}

.descripcion-admision {
    margin-bottom: 30px;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}


/* Contenido de admision*/
.contenido-admision {
    display: inline-block;
    vertical-align: top;
    min-width: 1100px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(13, 92, 152, 0.1);
    white-space: normal;
    /* Permite que el contenido interno haga salto de línea */
}

.contenido-admision h4 {
    color: #0d5c98;
    margin-bottom: 15px;
    font-size: 20px;
    border-left: 5px solid #13d8ff;
    padding-left: 10px;
}

/* Opciones */
.opc {
    margin-bottom: 10px;
}

.opc-btn {
    background-color: #f0f4f8;
    border: none;
    color: #0d5c98;
    padding: 12px 15px;
    font-size: 15px;
    font-weight: bold;
    width: 100%;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.opc-btn .icono {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.opc-btn.activa .icono {
    transform: rotate(90deg);
    /* Triángulo apunta hacia abajo */
}

.opc-btn:hover,
.opc-btn.activa {
    background-color: #005c9f;
    color: #fff;
}

.opc-descripcion {
    display: none;
    padding: 10px 15px;
    background-color: #f9fcff;
    border-left: 4px solid #0d5c98;
    border-radius: 0 0 6px 6px;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.opc-descripcion p,
.opc-descripcion li,
.contenido-admision p {
    margin-bottom: 5px;
}

.opc-descripcion li,
.contenido-admision li {
    margin-left: 50px;
}

.contenido-admision p,
.contenido-admision li {
    padding: 0 15px;
    line-height: 1.5;
}

/*CRONOGRAMA*/

.tabla-cronograma {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #d0e2f2;
    border-radius: 6px;
    overflow: hidden;
    max-width: 1000px;
    margin: 20px auto;
}

.tabla-cronograma.adm {
    width: 50%;
}

.fila {
    display: contents;
}

.fila div {
    padding: 15px;
    border-bottom: 1px solid #e1ecf7;
    font-size: 15px;
}

.fila.encabezado div {
    background-color: #003366;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-align: center;
}

.fila:last-child div {
    border-bottom: none;
}

.detalle {
    background-color: #ffffff;
}

.fecha {
    background-color: #eaf3fc;
}

/*PAGINAS SERVICIOS--------------------------*/
.banner-adm.topico {
    background: url("../img/topico/topico.jpg") center center/cover no-repeat;
    margin-bottom: 0px;
}

/*Informacion General*/
#topico-info {
    background-color: #f5f5f5;
    color: #333;
    padding: 10px 220px 60px;
}

.titulo-topico {
    font-size: 28px;
    margin: 40px 0 10px 0;
    color: #0d5c98;
}

.descripcion-topico {
    margin-bottom: 30px;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    text-align: justify;

}


/* Contenido de topico*/
.contenido-topico {
    display: inline-block;
    flex: 1 1 550px;
    vertical-align: top;
    min-width: 100px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(13, 92, 152, 0.1);
    white-space: normal;
    /* Permite que el contenido interno haga salto de línea */
}

.contenido-topico h4 {
    color: #0d5c98;
    margin-bottom: 15px;
    font-size: 20px;
    border-left: 5px solid #13d8ff;
    padding-left: 10px;
}

.contenido-topico p {
    margin-bottom: 5px;
    padding: 0 15px;
    line-height: 1.5;
    text-align: justify;
}

.contenido-topico li {
    margin-left: 50px;
    padding: 0 15px;
    line-height: 1.5;
}

.topico-contenedor {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/*imagen admision*/
.imagen-topico {
    flex: 1 1 350px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen-topico img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/*Importancia del Topico*/
.topico-salud {
    padding: 2rem;
    text-align: center;
    background-color: #005c9f;
    padding: 60px 220px;
    color: #fff;
}


.titulo-topico2 {
    color: #fff;
    margin-bottom: 2rem;
}

.contenedor-servicios-salud {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 2rem;
}

.item-salud {
    background-color: #ffffff;
    border: 2px solid #003366;
    padding: 1.5rem;
    border-radius: 10px;
    transition: transform 0.3s ease;
    color: #333;
}

.item-salud:hover {
    transform: scale(1.03);
}

.item-salud h3 {
    color: #005c9f;
}

.icono-salud {
    font-size: 2.5rem;
    color: #003366;
    margin-bottom: 1rem;
}

/*--------------FORMACION CONTINUA------------------------------*/
.banner-fc {
    position: relative;
    background: url("../img/formacion-continua/banner-fc.jpg") center center/cover no-repeat;
    color: white;
    text-align: center;
    padding: 100px 20px;
    width: 100%;
    border-radius: 0;
}

.info-formacion {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 50px 220px;
    background-color: #ffff;
}

.info-formacion-izquierda {
    flex: 1 1 55%;
}

.info-formacion-izquierda h2 {
    font-size: 26px;
    color: #0d5c98;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-formacion-izquierda p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify;
}

.info-formacion-izquierda li {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    text-align: justify;
}

.info-formacion-izquierda ul {
    margin: 0px 0px 15px 50px;

}

.info-formacion-derecha {
    flex: 1 1 20%;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.179);
    line-height: 1.6;

}

.informes-fc {
    font-size: 20px;
    color: #0d5c98;
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 10px;
    margin-bottom: 10px;
}

.info-formacion-derecha p {
    font-size: 14px;
    color: #222;
    margin-bottom: 20px;
    text-align: center;

}

.tabla-contacto-fc {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #005c9f;
    text-align: center;

}

.tabla-contacto-fc td {
    padding: 20px 0px 0px;
    font-size: 14px;
    color: #333;
    vertical-align: top;
}

.tabla-contacto-fc td i {
    color: #0d5c98;
    font-size: 20px;
}

/*icono de inscribete*/
.tabla-contacto-fc td .fa-pen-to-square {
    color: #fff;
}

/*Cursos de formacion continua*/
.cursos-fc {
    padding: 50px 20px;
    background-color: #f4f8fb;
    text-align: center;
}

.titulo-cursos-fc,
.titulo-doc-gestion,
.titulo-estadisticas {
    font-size: 26px;
    color: #0d5c98;
    margin-bottom: 40px;
    text-align: center;
}

.cards-cursos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}

.card-curso {
    width: 300px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: left;
    position: relative;
}

.imagen-curso {
    position: relative;
    height: 170px;
    overflow: hidden;
}

.imagen-curso img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.estado-curso {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #2ca300;
    color: white;
    font-size: 0.9em;
    padding: 4px 10px;
    border-radius: 5px;
    font-weight: bold;
}

.tipo-curso {
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
    display: block;
    margin: 10px 0 5px 0;
}

.contenido-curso {
    padding: 15px;
}

.contenido-curso h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: #004080;
}

.contenido-curso p {
    font-size: 0.9em;
    color: #555;
    margin: 10px 0;

}

.btn-detalle {
    display: block;
    margin-top: 15px;
    background: #f5c518;
    color: #000;
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s;
}

.btn-detalle:hover {
    background: #e0b911;
}


/*Documentos de Gestión*/
.banner-adm.doc-gestion {
    background: url("../img/banner-doc-gestion.png") center center/cover no-repeat;
    margin-bottom: 0px;
}

.repositorio-documentos {
    padding: 50px 220px;
    background-color: #f9f9f9;
    text-align: center;
}

.tarjetas-documentos {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.tarjeta-doc {
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.tarjeta-doc:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.icono-doc {
    font-size: 40px;
    color: #0d5c98;
    margin-bottom: 10px;
}

.btn-ver {
    display: inline-block;
    margin-top: 10px;
    background-color: #0d5c98;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
}

.btn-ver:hover {
    background-color: #13d8ff;
    color: #0d5c98;

}


/*------------------------------ESTADISTICA------------------*/
.banner-adm.estadisticas {
    background: url("../img/banner-doc-gestion.png") center center/cover no-repeat;
    margin-bottom: 0px;
}

.estadisticas-institucionales {
    padding: 50px 220px;
    background-color: #f9f9f9;
}

.estadisticas-institucionales em {
    text-align: left;
    font-size: 13px;
}

.tabla-estadisticas {
    overflow-x: auto;
    margin-top: 30px;
    flex: 1 1 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.tabla-estadisticas table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #ccc;
}

.tabla-estadisticas th,
.tabla-estadisticas td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

.tabla-estadisticas th {
    background-color: #0d5c98;
    color: white;
}



.tabla-estadisticas tr:nth-child(even) {
    background-color: #f9f9f9;
}


.imagen-estadistica {
    flex: 1 1 850px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen-estadistica img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/*----------------------------
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////*/

/*Libro de reclamaciones*/
/* ===== Libro de Reclamaciones ===== */
.banner-adm.libro {
    background: url('../img/banner-reclamaciones.png') center/cover no-repeat;

}

.banner-adm.libro h1 {
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;
}

.contenedor-reclamaciones {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 1rem 2rem;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.titulo-reclamos {
    font-size: 28px;
    margin: 40px 0 10px 0;
    color: #0d5c98;
    text-align: center;
}

.formulario-reclamaciones {
    align-items: center;
    text-align: center;
}

.form-titulo {
    background-color: #0d5c98;
    color: #fff;
    padding: 10px;
    border-radius: 5px 5px 0 0;
    display: flex;
    align-items: center;
}

.form-titulo i {
    margin-right: 10px;
}

.form-body {
    border: 1px solid #0d5c98;
    border-top: none;
    padding: 20px;
    border-radius: 0 0 5px 5px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 15px;
}

.form-grid2 {
    display: grid;
    grid-template-columns: repeat(1, minmax(280px, 1fr));
    gap: 15px;
}

.form-label {
    font-size: 14px;
}

.form-grid3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 15px;
}

.form-align-left {
    text-align: left;
}

.form-f-ad {
    padding-bottom: 10px;
}

.input-form {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
}

.input-form.tipo,
.input-form.asunto {
    width: 45%;
}

.input-form:disabled {
    background-color: #f0f0f0 !important;
    /* Fondo gris claro */
    color: #888888;
    /* Texto gris */
    border-color: #cccccc;
    /* Borde gris */
    cursor: not-allowed;
}

.select-group {
    display: flex;
    gap: 10px;
}

.select-group select,
.select-group input {
    flex: 1;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-form-reclamos {
    background-color: #005c9f;
    color: white;
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;

}

.btn-form-reclamos:hover {
    background-color: #13d8ff;
    color: #005c9f;
}

.nota-reclamos {
    font-size: 0.9rem;
    margin-top: 2rem;
    background-color: #f0f0f0;
    padding: 1rem;
    border-left: 4px solid #003366;
    border-radius: 8px;
    color: #444;
    text-align: justify;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    position: relative;
}

.modal-content i,
.modal-content h2,
.modal-content p {
    line-height: 1.5;
    color: #005c9f
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    cursor: pointer;
}

/*/////////////////////////PAGINA EN CONSTRUCCION///////////////////////////////////////
*/
.pagina-construccion {
    background: url("../img/contruccion-page.jpg") center center/cover no-repeat;
    color: #333;
    align-content: normal;
    padding: 300px 20px;
    width: 100%;
    height: 100%;
    vertical-align: top;
    text-align: center;
}

.pagina-construccion h2 {
    font-size: 40px;
    margin-top: -240px;

}

/*////////////////////////////////////////////////////////////////
//////////////////////
///
//////////////////////
*/
/* ///////////////////////////////////////////////////////////////////////////////////////////// */
/* RESPONSIVE PARA TABLET */
@media (max-width:992px) {

    .nav-menu-link {
        font-size: 13px;
    }
}

@media (max-width: 992px) {
    .grid-directorio {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .grid-directorio {
        grid-template-columns: 1fr;
    }
}


/* =================== RESPONSIVE PARA TABLETS =================== */
@media (max-width: 1024px) {




    .hamburguesa {
        display: block;
    }

    #menuBotones {
        display: none;
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    #menuBotones.show {
        display: flex;
    }

    .grupo-botones-menu .btn-menu {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .dropdown-menu {
        width: 100%;
    }

    .submenu {
        position: static;
        box-shadow: none;
    }


    .servicio-info {
        grid-template-columns: repeat(2, 1fr);
    }

    .slider-foto {
        width: 90%;
    }

    .contenedor-eleccion {
        flex-direction: column;
    }

    .texto-eleccion,
    .slider-eleccion {
        max-width: 100%;
    }

    .eleccion {
        padding: 40px 30px;
    }

    .perfil-infraestructura {
        padding: 40px 30px;
    }

    #admision,
    #admision-info,
    #matricula-info {
        padding: 10px 30px 40px;
    }

    .contenedor-flex {
        flex-direction: column;
    }

    .galeria-pe {
        padding: 40px 30px;
    }

    .campo-laboral {
        padding: 40px 30px;
    }
}

/* =================== RESPONSIVE PARA SMARTPHONES =================== */
@media (max-width: 768px) {
    .direccion .location {
        display: none;
    }

    .direccion {
        font-size: 9px;
    }

    .grupo-botones-menu {
        display: none;
    }

    .hamburguesa {
        display: block;
    }

    .menu-header {
        justify-content: space-around;
    }

    /*SLIDER*/

    .swiper .swiper-button-prev,
    .swiper .swiper-button-next {
        --swiper-navigation-size: 15px;
        height: 40px;
        width: 30px;

    }

    .swiper .swiper-button-prev {
        left: -5px;
    }

    .swiper .swiper-button-next {
        right: -5px;
    }


    .encima .boton {
        padding: 15px 20px;
        border-radius: 30px;
        cursor: pointer;
        border: none;
        background-color: transparent;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: bolder;
        background-color: #0d5c98;
        color: #ffffff;
    }


    .encima h2 {
        font-size: 20px;
    }

    .encima h4 {
        font-size: 10px;
    }

    .encima {
        width: 90%;
        left: 50%;
    }

    /*--------------Servicios -----------------*/
    #servicios {
        padding: 5px 0px 10px;
        margin-top: -50px;
        z-index: 100;
    }


    .servicio {
        width: 90%;
        margin: auto;
        height: 150px;
    }

    .servicio h3 {
        font-size: 16px;
        margin-top: 70px;
    }


    /* Imagen base (más grande) */
    .img-base {
        width: 80px;
        height: 80px;
        margin-top: -8px;
    }

    /* Imagen hover (más pequeña inicialmente oculta) */
    .img-hover {
        width: 40px;
        height: 40px;
        margin-top: -10px;
    }

    .servicio:hover h3 {
        margin-top: 35px;
        color: #fff;
        font-size: 14px;
    }

    .servicio:hover p {
        transform: translateY(10px);
        margin-top: 5px;
        font-size: 9px;
    }


    /*------------------BIENVENIDA-----------------*/
    .bienvenida {
        padding: 40px 20px;
    }

    .contenido-bienvenida {
        flex-direction: column;
    }

    .imagen-bienvenida img {
        max-width: 100%;
    }

    .texto-bienvenida {
        max-width: 100%;
    }

    .programas-estudio {
        padding: 40px 20px;
    }

    .campo-btn {
        font-size: 14px;
    }

    .campo-descripcion {
        padding: 10px;
    }

    .tabs {
        flex-direction: column;
    }

    .contenedor-ciclos {
        flex-direction: column;
        overflow-x: hidden;
    }

    .ciclo {
        width: 100%;
    }

    .galeria-pe {
        padding: 30px 10px;
    }

    .footer-contenedor {
        flex-direction: column;
        text-align: center;
        gap: 2px;
    }

    .footer h4::after {
        justify-self: center;
    }


    .footer-reclamaciones {
        text-align: center;
    }


    .info-local {
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .texto-local,
    .mapa-local {
        width: 100%;
    }

    .mapa-local iframe {
        width: 100% !important;
        height: 300px !important;
    }

    .grid-directorio {
        grid-template-columns: 1fr;
    }

    .slider-foto {
        width: 100%;
        padding-top: 40px;
    }

    .swiper .swiper-slide img {
        height: 300px;
    }


    .perfil-infraestructura {
        padding: 30px 15px;
    }

    .contenido-admision {
        min-width: unset;
        width: 100%;
    }

    .tabla-cronograma {
        grid-template-columns: 1fr;
    }

    .tabla-cronograma.adm {
        width: 100%;
    }

    .fila .detalle {
        font-weight: bold;

    }

    /*------------TOPICO-----------------*/

    #topico-info {
        padding: 20px;
        text-align: center;
    }

    #topico-info .titulo-topico {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    #topico-info .descripcion-topico {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .topico-contenedor {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }

    .contenido-topico,
    .imagen-topico {
        width: 100%;
        max-width: 500px;
    }

    .contenido-topico h4 {
        font-size: 1.2rem;
        margin-top: 15px;
    }

    .imagen-topico img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .topico-salud {
        padding: 20px;
        text-align: center;
    }

    .titulo-topico2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .contenedor-servicios-salud {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .item-salud {
        width: 90%;
        max-width: 400px;
        background-color: #f9f9f9;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
        transition: transform 0.3s ease;
    }

    .item-salud:hover {
        transform: scale(1.02);
    }

    .item-salud h3 {
        font-size: 1.2rem;
        margin-top: 10px;
    }

    .item-salud p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .icono-salud {
        font-size: 2rem;
        color: #0d5c98;
        margin-bottom: 10px;
    }


    /*------------------Formación----------------------*/
    .info-formacion {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 20px;
    }

    .info-formacion-izquierda,
    .info-formacion-derecha {
        width: 100%;
        padding: 10px;
    }

    .info-formacion-izquierda h2,
    .info-formacion-derecha h3 {
        font-size: 1.4rem;
        margin-top: 10px;
    }

    .info-formacion-izquierda p,
    .info-formacion-derecha p,
    .info-formacion-izquierda ul {
        font-size: 1rem;
        line-height: 1.6;
    }

    .tabla-contacto-fc {
        width: 100%;
        font-size: 1rem;
    }

    .tabla-contacto-fc td {
        padding: 12px 10px;
        text-align: center;
    }

    .btn-inscribete {
        display: inline-block;
        padding: 10px 20px;
        font-size: 1rem;
        background-color: #0d5c98;
        color: white;
        border-radius: 5px;
        text-decoration: none;
        margin-top: 10px;
    }

    .btn-inscribete i {
        margin-left: 5px;
    }

    .repositorio-documentos {
        padding: 30px 15px;
        text-align: center;
    }

    .repositorio-documentos .titulo-doc-gestion {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .repositorio-documentos p {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .tarjetas-documentos {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .tarjeta-doc {
        width: 100%;
        max-width: 350px;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }

    .tarjeta-doc h3 {
        font-size: 18px;
        margin: 10px 0 5px;
    }

    .tarjeta-doc p {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .tarjeta-doc .icono-doc {
        font-size: 40px;
        color: #0d5c98;
    }

    .tarjeta-doc .btn-ver {
        font-size: 14px;
        padding: 10px 15px;
        background-color: #FFD43B;
        color: #000;
        text-decoration: none;
        border-radius: 5px;
        display: inline-block;
    }

    .tarjeta-doc .btn-ver:hover {
        background-color: #f0c400;
    }


    /*Estadistica*/
    .estadisticas-institucionales {
    padding: 30px 15px;
  }

  .tabla-estadisticas {
    flex-direction: column;
    align-items: stretch;
  }

  .tabla-estadisticas table {
    font-size: 0.75rem;
    min-width: 100%;
    overflow-x: auto;
  }

  .imagen-estadistica {
    margin-top: 20px;
    flex: unset;
  }

  .imagen-estadistica img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }


  /*Formulario de Reclamaciones*/
  .formulario-reclamaciones {
    padding: 0 15px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid2,
  .form-grid3 {
    grid-template-columns: 1fr;
  }

  .select-group {
    flex-direction: column;
    width: 100%;
  }

  .select-group select,
  .select-group input {
    width: 100%;
  }

  select.input-form {
    font-size: 12px;
    padding: 10px;
  }

  .input-form.tipo,
  .input-form.asunto {
    width: 100%;
  }

  .form-titulo {
    flex-direction: column;
    align-items: flex-start;
    font-size: 16px;
    padding: 15px;
    text-align: left;
  }

  .form-titulo i {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .nota-reclamos {
    font-size: 0.85rem;
    padding: 0.8rem;
  }

  .btn-form-reclamos {
    width: 100%;
    font-size: 1rem;
    padding: 1rem;
  }
}