@media (min-width:992px){
}


@media (max-width: 768px) {
    .hero-video {
        height: 300px;
    }

    .hero-index h1 {
        font-size: 2rem;
        top: 60px;
        right: 20px;
        text-align: center;
    }
}

/*Oferta académica*/
@media (max-width: 600px) {
    .contenido h1 {
        white-space: normal;
        font-size: 1.2rem;
    }

    .oferta {
        font-size: 2rem;
    }
}

/* Estilos del contenido de la sección de "Por qué estudiar con nosotros" */
@media (max-width: 768px) {
    .contenido-estudio {
        flex-direction: column;
        padding: 20px;
    }

    .imagen-estudio img {
        width: 100%;
    }

    .texto-estudio {
        width: 100%;
        padding: 20px 0 0 0;
        text-align: center;
    }

    .texto-estudio h2 {
        font-size: 2rem;
    }

    .texto-estudio h3 {
        font-size: 1rem;
    }

    .texto-estudio ul li {
        font-size: 1rem;
    }
}

/* Estilos testimonios */
@media (max-width: 768px) {
    .carrusel {
        width: 90%;
        padding: 10px;
    }

    .titulo-testimonios {
        font-size: 2rem;
        padding: 20px;
    }

    .decoracion-izquierda,
    .decoracion-derecha {
        display: none; /* Ocultar decoraciones en móviles */
    }
}

@media (max-width: 768px) {
  .imagen-horarios,
  .texto-col {
    margin-left: 0; /* Elimina márgenes negativos */
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .contenedor-horarios {
    flex-direction: column;
    padding: 20px;
  }

  .imagen-horarios img {
    width: 80%;
    margin: auto;
  }

  .texto-col {
    width: 100%;
    margin-left: 0;
    padding: 20px 0;
  }

  .beneficios-container {
    flex-direction: column;
  }

  .separador {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-diplomados h1 {
    font-size: 4rem;
    top: 200px;
    right: 20px;
  }

  .beneficios h2 {
    font-size: 2.5rem;
  }

  .texto-ia p {
    font-size: 1.2rem;
  }

  .descubre {
    font-size: 2rem;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .modulo-ia-contenido,
  .container-especializacion-n,
  .container-especializacion-b {
    flex-direction: column;
  }

  .overlay-text,
  .overlay-text-b {
    font-size: 24px;
    text-align: center;
    padding: 10px;
  }

  .text-especializacion,
  .text-especializacion-b {
    font-size: 1rem;
    padding: 20px;
    text-align: center;
  }
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #564b4b;
}



/* Estilos del header / menú */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    z-index: 1000;
    flex-wrap: wrap;
}

.header .logo img {
    max-height: 80px;
    width: auto;
    padding-left: 25px;
}

/* Botón hamburguesa (oculto por defecto) */
.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: white;
    margin-right: 20px;
}

/* Estilo normal del menú */
#main-menu ul {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}

#main-menu ul li {
    display: inline;
}

#main-menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

#main-menu ul li a.active {
    font-weight: bold;
    color: rgb(115, 162, 228);
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    #main-menu {
        width: 100%;
    }

    #main-menu ul {
        flex-direction: column;
        display: none;
        background-color: rgba(0, 0, 0, 0.9);
        width: 100%;
        padding: 10px 0;
    }

    #main-menu ul.active {
        display: flex;
    }

    #main-menu ul li {
        text-align: center;
        padding: 10px 0;
    }
}



/* Estilos del footer */
.footer {
    background-color: #1a1a1a;
    padding: 20px 40px; /* Reduce el espacio interno */
    text-align: left;
    left: 50px;
}

.footer-left, .footer-right {
    width: 45%; /* En lugar de 50%, reduce su tamaño */
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido */
    text-align: center;
    position: relative; /* Asegura que todo se acomode bien */
}

.footer-left h5 {
    font-size: 50px; /* Reducir tamaño del título */
    color: #9baed6;
    margin-top: 25px;
    margin-bottom: 20px; /* Reduce el espacio debajo del título */
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

.footer-left-container {
    position: relative; /* Permite que la imagen absoluta se posicione dentro */
    top: 25px;
    width: 80%;
    background: #ffffff;
    padding: 15px;
    text-align: center;
}

.mensaje-img {
    position: absolute;
    bottom: -80px; /* Este baja la imagen */
    right: -55px; /* lo mueve más a la derecha */
    width: 170px; /* Modifica según el tamaño deseado */
    max-width: none;
    z-index: 10; /* Asegura que la imagen esté sobre el texto */
}

.logo-ico {
    width: 300px; /* Mantiene el tamaño */
    max-width: 100%; /* Para responsividad */
    margin-top: 35px; /* Ajusta la distancia con el contenido superior */
}

.footer-left-container p {
    font-size: 25px;
    color: #3e5993;
    margin-top: 5px; /* Reduce el espacio encima del párrafo */
}

.footer-right {
    width: 50%;
    background: #1e1e1e;
    padding: 10px;
    border-radius: 10px;
}

.contact-form label {
    display: block;
    font-size: 14px;
    color: white;
    margin-top: 10px;
}

.contact-form input,
.contact-form textarea {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 5px 0;
    background: #ffffff;
    border: 1px solid #555;
    border-radius: 5px;
    color: rgb(0, 0, 0);
    display: block;
}

.contact-form textarea {
    height: 80px;
}

.contact-form button {
    background: #4a90e2;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    border-radius: 5px;
}

.footer-bottom {
    display: flex;
    justify-content: flex-end; /* Alinea todo el contenido a la derecha */
    align-items: center;
    gap: 30px; /* Espacio entre la sección de contacto e iconos */
    margin-top: 10px;
    text-align: right;
    color: #ffffff;
}

.contact-info {
    font-size: 14px;
    text-align: left;
}

.social-icons svg {
    width: 30px; /* Ajusta el tamaño del icono */
    height: 40px;
    fill: white; /* Cambia el color a blanco */
    transition: transform 0.3s ease; /* Agrega un efecto al pasar el mouse */
    display: flex;
    gap: 50px; /* Espaciado entre iconos */
}

.social-icons a:hover svg {
    transform: scale(1.1); /* Efecto de agrandamiento al pasar el cursor */
}

.footer-legal {
    text-align: center;
    padding: 10px;
    border-top: 1px solid #ffffff;
    color: #ffffff;
    margin-top: 20px;
    font-size: 12px;
}


    /* Estilos del contenido del index */
    .hero-video {
    position: relative;
    width: 100%;
    height: 100vh; /* Usa todo el alto de la pantalla */
    overflow: hidden;
}

.video-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-index {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado exacto */
    z-index: 2;
    text-align: center;
    color: white;
    padding: 20px;
    max-width: 90%;
}

.hero-index h1 {
    font-size: 4rem;
    font-weight: bold;
    line-height: 1.2;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6); /* Mejora legibilidad */
}

/* Responsivo */
@media (max-width: 768px) {
    .hero-index h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .hero-index h1 {
        font-size: 3.5rem;
    }
}



    .hero img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Para que la imagen cubra el área sin deformarse */
    }

    .oferta-academica-container {
        background-color: white; /* Fondo blanco para los márgenes */
        padding: 40px 0; /* Espaciado arriba y abajo */
    }

    .oferta-academica {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 10px;
        background-color: #e0e0e0;
        width: 90%;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
        flex-wrap: wrap; /* Importante para dispositivos más pequeños */
    }

    .contenido {
        flex: 1;
        text-align: right;
        font-size: 2rem;
        padding-left: 45px;
    }

    .contenido h1 {
        font-size: 0.5rem; /* Tamaño grande */
        text-align: left; /* Alineación del texto a la izquierda */
        line-height: 1; /* Espaciado entre líneas */
        white-space: nowrap; /* Evita que el texto se divida en dos líneas */
        margin-top: -35px;
    }

    .oferta {
        display: block;
        font-size: 3rem; /* Tamaño más grande para "Oferta" */
        color: #333;
    }


    /* Todo esto que diga opciones es acerca de las opciones de las carreras dentro del index */
    .opciones {
        flex: 2;
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap; /* Para que las imágenes salten a otra fila si no caben */
    }

    .opciones img {
        max-width: 150px;
        height: auto;
        transition: transform 0.3s ease;
    }

    .opciones img:hover {
        transform: scale(1.05);
    }


    .opciones a {
        display: inline-block; /* Asegura que solo la imagen se vea afectada */
        outline: none; /* Elimina el contorno del enlace */
    }

    .opciones a:focus {
        outline: none; /* Evita que aparezca un contorno al hacer clic */
    }

    .opciones a img {
        width: 150px;
        height: auto;
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    .opciones a img:hover {
        transform: scale(1.1);
        filter: brightness(1.2); /* Aumenta el brillo de la imagen */
        /*box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); Esta parte hace que se resalte las imagenes de la oferta academica con un recuadro y no solo la imagen */
    }
        /* movil */
        /* Tablets */
    @media (max-width: 992px) {
        .oferta-academica {
            flex-direction: column;
            text-align: center;
            padding: 20px;
        }

        .contenido {
            text-align: center;
            font-size: 1.8rem;
            padding: 0;
            margin-bottom: 20px;
        }

        .opciones {
            justify-content: center;
        }
    }

    /* Móviles */
    @media (max-width: 600px) {
        .contenido {
            font-size: 1.5rem;
        }

        .opciones {
            gap: 15px;
        }

        .opciones img {
            max-width: 120px;
        }
    }

/* Parael botón que subirá hasta arriba luego de scrollear tanto */
#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border: 2px solid gray; /* Borde gris */
    border-radius: 50%; /* Hace el botón circular */
    background: gray; /* Fondo transparente */
    color: black; /* Color de la flecha */
    font-size: 24px;
    text-align: center;
    line-height: 45px;
    font-weight: bold; /* Hace la flecha más gruesa */
    cursor: pointer;
    transition: all 0.3s ease;
    display: none; /* Oculto por defecto */
}

#scrollTopBtn:hover {
    background: rgba(200, 200, 200, 0.2); /* Un leve fondo al pasar el cursor */
    color: black; /* Hace la flecha más visible al pasar el cursor */
    border-color: black; /* Resalta el borde */
}

/* Estilos de la sección de por qué estudiar con nosotros */
.estudiar-con-nosotros {
    background-color: white;
    padding: 6px 0; /* Marguen superior que divide lo negro y lo de oferta academica (medir espacio en blanco) */
}

.contenido-estudio {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    color: white;
    padding: 80px; /* Tamaño del recuadro negro*/
    max-width: 1250px;
    margin: auto;
    width: 100%;
}

.imagen-estudio img {
    width: 50%;
    height: auto;
}

.texto-estudio {
    width: 50%;
    padding-left: 20px;
}

.texto-estudio h2 {
    font-size: 3rem; /* tamaño del texto de por qué estudiar con nosotros */
    margin-bottom: 20px;
}

.texto-estudio h3 {
    font-size: 20px;
    margin-bottom: -20px;/* Tamaño del recuadro */
    margin-top: 40px; /* Separación del texto con la parte superior */
}

.texto-estudio ul {
    list-style: none;
    padding: 0;
}

.texto-estudio ul li {
    border-bottom: 1px solid rgb(115, 162, 228); /* Color de las lineas que dividen el texto */
    padding: 10px 0;
    font-size: 18px;
}


/* Carrusel de testimonios*/
.testimonios-container {
    background-color: white;
    text-align: center;
    padding: 70px 0;
    position: relative;
}

.titulo-testimonios {
    color: #1f2c91;
    font-size: 3.5rem;
    padding: 50px; /* esto es lo alto del recuadro gris*/
    font-weight: bold;
}

.carrusel {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e0e0e0;
    width: 75%; /* tamaño del carrusel */
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    position: relative;
}

.carrusel-imagenes {
    display: flex;
    overflow: hidden;
    width: 100%;
    position: center;
}

.slide {
    display: none;
    width: 100%;
    transition: opacity 0.5s ease-in-out;
}

.slide.active {
    display: block;
}

.prev, .next {
    background-color: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    pointer-events: auto !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000 !important; /* Asegura que esté por encima */
    padding: 10px; /* Aumenta el área de clic */
}

.prev {
    left: 15px;
}

.next {
    right: 10px;
    margin: auto;
}

.indicadores {
    margin-top: 15px;
    margin: auto;
}

.dot {
    height: 12px;
    width: 12px;
    margin: 0 px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.dot.active {
    background-color: #1f2c91;
}

.decoracion {
    position: absolute;
    width: 100px;
    bottom: -20px;
}

/* Monitos del testimonio */
.decoracion-izquierda {
    left: 30px; /* lo mueve a la izquierda */
    top: 345px;  /* Distancia desde la parte superior */
    width: 200px; /* con este lo hice más grande */
    height: auto; /* Mantiene la proporción sin alterarlo */
}

.decoracion-derecha {
    right: 30px; /* lo mueve a la derecha */
    top: 365px;  /* distancia entre el monito y los testimonios (lo sube) */
    width: 200px; /* con este lo hice más grande */
    height: auto; /* Mantiene la proporción sin alterarlo */
}







/*Contenido de diplomados*/
.hero-diplomados h1{
    position: absolute;
    top: 500px;  /* Distancia desde la parte superior */
    right: 40px; /* Distancia desde la derecha */
    text-align: right;
    color: white;
    font-size: 9rem; /* tamaño de texto */
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra para mejorar legibilidad */
}

.diplomados-container {
    margin: 80px 0;  /* Espacio arriba y abajo para separar del header y footer */
    text-align: center;/* Centrar el contenido dentro de la sección */
}

/* Título principal (primera sección) */
.diplomados-container .primera-seccion h1 {
    font-size: 3rem; /* Cambia el tamaño de la fuente */  
}  

/* Sección de horarios */
.info-horarios {
    background-color: white;
    padding: 50px 0;
}

/* Contenedor general */
.contenedor-horarios {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #000000;
    padding: 40px;
    max-width: 1250px;
    margin: auto;
}

/* Imagen del lado izquierdo */
.imagen-horarios img {
    width: 40%;
    height: auto;
}

.imagen-horarios {
    margin-left: -400px; /* Mueve la imagen hacia la izquierda */
}

/* Contenedor del texto */
.texto-col {
    width: 50%;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: -400px; /* Mueve el texto hacia la derecha */
}

/* Cada bloque de texto con su ícono */
.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    margin-bottom: 30px; /* Espaciado entre los elementos */
}

/* Línea debajo del texto */
.linea {
    width: 100%;
    height: 3px;
    background-color: #9baed6;
    margin: 5px 0 15px 0; /* Espaciado superior e inferior */
}

/* Íconos alineados en el centro */
.item img {
    width: 60px;
    height: 60px;
    margin-top: 0px; /* Hace que los íconos estén más cerca de la línea */
}

/* Íconos alineados en el centro */
.item-web img {
    width: 80px;
    height: 60px;
    margin-top: 0px; /* Hace que los íconos estén más cerca de la línea */
}

/* Último elemento sin margen extra */
.item:last-child {
    margin-bottom: 0;
}

/* Sección de beneficios */
.beneficios {
    margin: -50px auto;
    max-width: 900px;
    padding: 0 20px;
    text-align: center;
}

.beneficios h2 {
    font-size: 4rem;
    margin-bottom: 50px;
}

.beneficios-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 6px #ccc;
}

.beneficio-item {
    flex: 1;
    text-align: center;
    color: #fff;
    padding: 20px;
}

.beneficio-item img {
    width: 90px;
    height: auto;
    margin-bottom: 15px;
}

.beneficio-item h3 {
    font-size: 1.2rem;
}

.separador {
    width: 2px;
    height: 200px;
    background-color: #fff;
}

/* Sección del módulo IA */
.modulo-ia {
    margin: 30px auto;
    max-width: 1200px;
    padding: 75px;
}

.modulo-ia-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: left; /* Para que el texto quede alineado a la izquierda si quieres */
}

.imagen-ia img {
    width: 600px;  /* Ajusta según tu imagen */
    height: auto;
}

.imagen-ia {
    margin-left: 0px; /* Mueve la imagen hacia la izquierda */
}

.texto-ia {
    flex: 1 1 250px;  /* Hace que el elemento sea flexible con un tamaño base de 250px */
    max-width: 300px; /* Limita el ancho máximo del elemento a 300px */
    text-align: center; /* Centra el texto dentro del contenedor */
    background-color: #e4e3e3a0; /* Aplica un color de fondo gris semitransparente */
    padding: 20px; /* Agrega espacio interno de 20px en todos los lados */
    border-radius: 8px; /* Redondea las esquinas del elemento con 8px de radio */
    box-shadow: 0 2px 6px #ffffff; /* Agrega una sombra blanca suave */
}

/*
.texto-ia {
    max-width: 600px;
}
*/

.texto-ia p {
    font-size: 2rem; /* Tamaño de la fuente: 2 veces el tamaño base del navegador (~32px) */
    line-height: 1.5; /* Espaciado entre líneas 1.5 veces el tamaño de la fuente */
    color: #a19f9f; /* Color gris claro para el texto */
}

/*segundo texto*/
.descubre-diplomado-container .segundo-texto h6 {
    font-size: 2rem; /* Cambia el tamaño de la fuente */
    text-align: center;
    color: #979595;
    padding: 40px 0 ;
}  

/*Cuadro gris*/
.descubre-diplomado-container {
    margin-top: -200px;
    background-color: white; 
    padding: 60px 0; 
}

.diplomado-gris {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0; 
    padding: 50px; 
    background-color: #e0e0e0cd; 
    width: 90%; 
    margin: 0 auto; 
    border-radius: 10px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
}

.container {
    flex: 1; 
    text-align: right; 
    font-size: 2rem; 
    padding-left: 45px; 
}

.container h1 {
    font-size: 0.5rem; 
    text-align: left; 
    line-height: 1; 
    white-space: nowrap; 
}

.descubre {
    display: flex;
    font-size: 3rem;
    color: rgb(64, 73, 134);
}

/* Área de especialización */
.especializacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0; /* Eliminar padding extra */
    gap: 0; /* Evitar separación entre los elementos */
}

/* Contenedores de especialización */
.container-especializacion-n {
    display: flex;
    flex-direction: row; /* Imagen y texto lado a lado */
    align-items: center; /* Asegurar que ocupen toda la altura */
    width: 100%; /* Ocupar todo el ancho */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden;
}

/* Alternar colores de fondo */
.container-especializacion-n {
    background: black;
    color: white;
}

/* Imagen de la especialización */
.image-especializacion {
    position: relative;
    flex: 1;
    height: 100%; /* Para que ocupe toda la altura del contenedor */
}

.image-especializacion img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
}

/* Texto sobre la imagen */
.overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(129, 144, 230, 0.527); /* Oscurecer el fondo */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el texto */
    color: white;
    text-decoration: none;
    right: 40px;
    text-align: right;
    font-size: 40px;
    font-weight: bold;
    padding: 20px 0;
}

a .overlay-text:hover {
    color: #222222c6;
}

/* Texto de descripción */
.text-especializacion {
    flex: 1;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.text-especializacion p {
    font-size: 20px;
    line-height: 1.5;
}

/* Contenedor general */
.container-especializacion-b {
    display: flex;
    flex-direction: row; /* Imagen a la derecha, texto a la izquierda */
    align-items: center;
    width: 100%;
    background: white;
    color: black;
    border-radius: 10px;
    overflow: hidden;
}

/* Estilos del contenedor de texto */
.text-especializacion-b {
    flex: 1; /* El texto ocupa el mismo espacio que la imagen */
    padding: 20px;
    text-align: left; /* Alinear el texto a la izquierda */
    font-size: 30px;
    line-height: 1.5;
}

/* Contenedor de imagen */
.image-especializacion-b {
    flex: 1; /* Imagen ocupa el mismo espacio que el texto */
    position: relative;
}

.image-especializacion-b img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Texto superpuesto sobre la imagen */
.overlay-text-b {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(129, 144, 230, 0.527); /* Oscurecer el fondo */
    cursor: pointer;
    color: white;
    text-align: left;
    font-size: 40px;
    font-weight: bold;
    padding: 20px 0;
}

a .overlay-text-b:hover {
    color: #222222c6;
}

/*aquí*/



/* Calendario*/ 
/* Esta parte es del texto en la imagen */
.hero-calendario h1{
    position: absolute;
    top: 130px;  /* Distancia desde la parte superior */
    left: 50px; /* Distancia desde la izquierda en el texto sobre la imagen */
    text-align: left;
    color: white;
    font-size: 5.5rem; /* tamaño de texto */
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra para mejorar legibilidad */
}


.calendario-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    text-align: center;
}

.imagen-fondo {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    margin-top: 35px; /* Aumenta la separación entre la imagen y el texto de arriba*/
    padding: 20px; /* Agrega espacio interno */
}

.contenido {
    margin-top: 35px;
}

h2 {
    font-size: 40px; /* tamaño del texto */
    font-weight: bold; /* hace el textoen negritas */
    margin-bottom: 10px;
    text-align: center;
    margin-top: 3rem;
    color: black;
}

h6 {
    font-size: 16px;
    color: #333;
    text-align: center;
    margin-top: 40px; /* Aumenta la separación entre la imagen y el texto */
    padding: 20px; /* Agrega espacio interno */
}

h3 {
    top: 3rem;
    text-align: center;
}

.btn-descargar {
    display: inline-block;
    padding: 10px 25px;
    background-color: #4B49AC;
    color: white;
    text-decoration: none;
    font-size: 18px;
    border-radius: 15px;
    margin-top: 25px;
    margin-bottom: 40px; 
}

.btn-descargar:hover {
    background-color: #372F85;
}









/*Certificaciones*/
.hero-certificaciones h1{
    position: absolute;
    top: 175px;  /* Distancia desde la parte superior */
    right: 70px; /* Distancia desde la derecha en el texto sobre la imagen */
    text-align: right;
    color: white;
    font-size: 7rem; /* tamaño de texto */
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra para mejorar legibilidad */
}

.titulo-cer h2 {
    font-size: 3rem; /* Cambia el tamaño de la fuente */  
    text-align: center; /* Centra el texto */
    margin-top: 5%;
    margin-bottom: 5%;
}

.container-cer{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e3e1e1;
    padding: 40px;
    max-width: 1250px;
    margin: auto;
    border-radius: 12px;
    margin-bottom: 5%;
}

.iconos-cer a{ 
    text-decoration: none;
}

.iconos img{
    width: 70px;
    height: 70px;
    margin: 0 30px;
    transition: transform 0.3s ease;
    cursor: pointer;
    border-radius: 50px;
}


.iconos img:hover {
    transform: scale(2); 
    box-shadow: 0 0 15px 5px rgb(158, 202, 255); 
}


/*Seccion de ToonBoom*/
.toonboom-section {
    width: 100%;
    padding: 20px;
    transition: all 0.4s ease-in-out;
}

.toonboom-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    background: white;
    color: black;
    transition: all 0.4s ease-in-out;
}

.toonboom-img-container {
    position: relative;
    flex: 1;
    max-width: 1000px; /* más ancho */
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.toonboom-img-container img {
    width: 100%;
    height: auto;
    max-height: 250px; /* tamaño visible inicial */
    object-fit: contain;
    transition: all 0.4s ease-in-out;
}

.container-toonboom {
    flex: 2;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: large;
    transition: all 0.4s ease-in-out;
}

.titulo-toonboom {
    font-size: 3.5rem;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
    transition: font-size 0.3s ease-in-out;
}

.texto-toonboom {
    margin-top: 15px;
    font-size: 1.5rem;
    background: #e0e0e0;
    padding: 40px;
    border-radius: 15px;
    transition: opacity 0.3s ease-in-out;
}

/* Ocultar inicialmente */
.hidden {
    display: none;
}

/* Estilo cuando se expande */
.toonboom-section.expanded .toonboom-img-container {
    max-width: 400px; /* Más grande que antes */
}

.toonboom-section.expanded .titulo-toonboom {
    font-size: 3.5rem;
}



/*Seccion de Adobe*/
.adobe-section {
    background-color: #121212;
    padding: 40px;
    color: white;
    font-family: 'Segoe UI', sans-serif;
}

.adobe-container {
    max-width: 1100px;
    margin: 0 auto;
}

.adobe-header h2 {
    font-size: 3rem;
    cursor: pointer;
    margin: 0;
    text-align: center;
}

.adobe-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.adobe-title-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.adobe-description {
    display: none;
    background-color: #eee;
    color: #333;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.adobe-img-container {
    flex: 1;
    max-width: 600px;
    transition: max-width 0.5s ease;
}

.adobe-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.5s ease, max-width 0.5s ease;
}

.adobe-bottom {
    display: none; /* Oculto por defecto */
    flex-wrap: wrap;
    gap: 20px;
}

.botones-adobe {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-right: 20px;
}

.btn-adobe {
    background-color: #ccc;
    border: none;
    padding: 10px 20px;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 5px;
}

.btn-adobe:hover {
    background-color: #bbb;
}

.btn-adobe.activo {
    background-color: #555;
    color: #fff;
}

.adobe-info {
    flex: 1;
    background-color: #f2f2f2;
    color: #222;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
}  

ul {
    list-style-type: none; /* Quita los puntitos predeterminados */
    padding-left: 0; /* Opcional: quita sangría izquierda */
}







/*Seccion de Cisco*/
.cisco-section {
    width: 100%;
    padding: 20px;
    transition: all 0.4s ease-in-out;
}

.cisco-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    background: white;
    color: black;
    transition: all 0.4s ease-in-out;
}

/* Imagen de Cisco */
.cisco-img-container {
    position: relative;
    flex: 1;
    max-width: 1000px; /* más ancho */
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.cisco-img-container img {
    width: 100%;
    height: auto;
    max-height: 250px; /* tamaño visible inicial */
    object-fit: contain;
    transition: all 0.4s ease-in-out;
}

/* Contenedor derecho: Título + primer texto */
.container-cisco {
    flex: 2;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: large;
    transition: all 0.4s ease-in-out;
}

.titulo-cisco {
    font-size: 3.5rem;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
    transition: font-size 0.3s ease-in-out;
}

.texto-cisco {
    margin-top: 15px;
    font-size: 1.5rem;
    background: #e0e0e0;
    padding: 20px;
    border-radius: 15px;
    transition: opacity 0.3s ease-in-out;
}

.container-cisco.extra {
    margin-top: 20px;
    background: #e0e0e0;
    padding: 20px;
    border-radius: 15px;
}

/* Ocultar inicialmente */
.hidden {
    display: none;
}

/* Estilo cuando se expande */
.cisco-section.expanded .cisco-img-container {
    max-width: 350px; /* Más grande que antes */
}

.cisco-section.expanded .titulo-cisco {
    font-size: 3.5rem;
}





/*Seccion de Windows*/
.window-section {
    background-color: #121212;
    padding: 40px;
    color: white;
    font-family: 'Segoe UI', sans-serif;
}

.window-container {
    max-width: 1100px;
    margin: 0 auto;
}

.window-header h2 {
    font-size: 3rem;
    margin: 0;
    cursor: pointer;
}

.window-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 250px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.window-title-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.window-img-container {
    flex: 1;
    max-width: 600px; /* Igual que en la sección de Adobe */
    transition: max-width 0.5s ease;
}

.window-img-container.shrink img {
    max-width: 380px;
}

.window-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.5s ease, max-width 0.5s ease;
}

.window-description,
.container-window.extra {
    display: none;
    background-color: #eee;
    color: #333;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.hidden {
    display: none;
}







/*Seccion de Office*/
.office-section {
    width: 100%;
    padding: 20px;
    transition: all 0.4s ease-in-out;
}

.office-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    background: white;
    color: black;
    transition: all 0.4s ease-in-out;
}

.office-img-container {
    position: relative;
    flex: 1;
    max-width: 1000px; /* más ancho */
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.office-img-container img {
    width: 100%;
    height: auto;
    max-height: 250px; /* tamaño visible inicial */
    object-fit: contain;
    transition: all 0.4s ease-in-out;
}

.container-office {
    flex: 2;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: large;
    transition: all 0.4s ease-in-out;
}

.titulo-office {
    font-size: 3.5rem;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
    transition: font-size 0.3s ease-in-out;
}

.texto-office {
    margin-top: 15px;
    font-size: 1.5rem;
    background: #e0e0e0;
    padding: 20px;
    border-radius: 15px;
    transition: opacity 0.3s ease-in-out;
}


/* Ocultar inicialmente */
.hidden {
    display: none;
}

/* Estilo cuando se expande */
.office-section.expanded .office-img-container {
    max-width: 350px; /* Más grande que antes */
}

.office-section.expanded .titulo-office {
    font-size: 3.5rem;
}


.office-bottom {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
}

.botones-office {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-right: 20px;
}

.btn-office {
    background-color: #ccc;
    border: none;
    padding: 10px 20px;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 5px;
}

.btn-office:hover {
    background-color: #bbb;
}

.btn-office.activo {
    background-color: #555;
    color: #fff;
}

.office-info {
    flex: 1;
    background-color: #f2f2f2;
    color: #222;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
}  

#officeBottom {
    display: none;
}





/*Seccion de compTIA*/
.comp-section {
    background-color: #121212;
    padding: 40px;
    color: white;
    font-family: 'Segoe UI', sans-serif;
}

.comp-container {
    max-width: 1100px;
    margin: 0 auto;
}

.comp-header h2 {
    font-size: 3rem;
    margin: 0;
    cursor: pointer;
}

.comp-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 250px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.comp-title-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.comp-img-container {
    flex: 1;
    max-width: 600px; /* Igual que en la sección de Adobe */
    transition: max-width 0.5s ease;
}

.comp-img-container.shrink img {
    max-width: 380px;
}

.comp-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.5s ease, max-width 0.5s ease;
}

.comp-description,
.container-comp.extra {
    display: none;
    background-color: #eee;
    color: #333;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.hidden {
    display: none;
}








/*Seccion de Autodesk*/
.autodesk-section {
    width: 100%;
    padding: 20px;
    transition: all 0.4s ease-in-out;
}

.autodesk-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    background: white;
    color: black;
    transition: all 0.4s ease-in-out;
}

.autodesk-img-container {
    position: relative;
    flex: 1;
    max-width: 1000px; /* más ancho */
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.autodesk-img-container img {
    width: 100%;
    height: auto;
    max-height: 250px; /* tamaño visible inicial */
    object-fit: contain;
    transition: all 0.4s ease-in-out;
}

.container-autodesk {
    flex: 2;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: large;
    transition: all 0.4s ease-in-out;
}

.titulo-autodesk {
    font-size: 3.5rem;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
    transition: font-size 0.3s ease-in-out;
}

.texto-autodesk {
    margin-top: 15px;
    font-size: 1.5rem;
    background: #e0e0e0;
    padding: 20px;
    border-radius: 15px;
    transition: opacity 0.3s ease-in-out;
}


/* Ocultar inicialmente */
.hidden {
    display: none;
}

/* Estilo cuando se expande */
.autodesk-section.expanded .autodesk-img-container {
    max-width: 350px; /* Más grande que antes */
}

.autodesk-section.expanded .titulo-autodesk {
    font-size: 3.5rem;
}


.autodesk-bottom {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
}

.botones-autodesk {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-right: 20px;
}

.btn-autodesk {
    background-color: #ccc;
    border: none;
    padding: 10px 20px;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 5px;
}

.btn-autodesk:hover {
    background-color: #bbb;
}

.btn-autodesk.activo {
    background-color: #555;
    color: #fff;
}

.autodesk-info {
    flex: 1;
    background-color: #f2f2f2;
    color: #222;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
}  

#autodeskBottom {
    display: none;
}

@keyframes shine {
    0% { text-shadow: 0 0 10px rgb(102, 203, 250); }
    50% { text-shadow: 0 0 20px rgb(24, 190, 255), 0 0 30px rgb(11, 76, 110); }
    100% { text-shadow: none; }
}

.resaltar {
    animation: shine 1.5s ease-in-out;
}