/* Estilo global */
main {
    margin-top: 100px; /* Espacio para el header */
    font-family: var(--font-family-primary);
    min-height: 100vh; /* Asegura que tenga al menos la altura de la ventana */
    justify-content: center;
    align-items: center;
}
/* ---------------------------------------------------------- */

/* Contenedor de la imagen */
.image-container {
    position: relative;
    width: 100%;
    height: auto; /* Ajusta la altura según necesites */
    overflow: hidden;
}

/* Imagen de fondo */
#background-image {
    width: 100%;
    height: 700px;
    object-fit: cover; /* Ajusta la imagen sin distorsionarla */
}

/* Contenedor del video */
.video-container {
    position: relative;
    width: 100%;
    height: auto; /* Altura automática según el contenido */
    overflow: hidden; /* Evita desbordamientos */
}

/* Video de fondo */
#background-video {
    width: 100%;
    height: 700px;
    object-fit: cover; /* Ajusta el video al contenedor sin distorsionar */
}

/* Contenido centrado con fondo oscuro */
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.4); /* Fondo semitransparente negro */
    padding: 15px;
    border-radius: 1px;
    width: 70%;
    max-width: 900px; /* Máximo ancho */
    height: auto;
    max-height: 600px; /* Máximo alto */
    margin-top: 0px;
}

/* Marco amarillo interno */
.inner-border {
    padding: 10px;
    border: 4px solid #bd6cb6; /* Borde amarillo */
    display: inline-block;
    text-align: left;
}

/* Estilos de texto */
.inner-border h1 {
    color: white;
    font-size: 24px;
    margin-bottom: 0px;
}

.inner-border p {
    color: white;
    font-size: 18px;
}

/* Texto animado */
#animated-text {
    font-size: 24px;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden;
    border-right: 2px solid white; /* Simula el cursor de escritura */
    width: 0;
    animation: typing 4s steps(40, end) forwards, blink 0.8s infinite;
}

/* Efecto de máquina de escribir */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Parpadeo del cursor */
@keyframes blink {
    50% {
        border-color: transparent;
    }
}

/* ----------------------------------------------------------------- */
/* Animación inicial: ocultar elementos */
.animate-on-scroll {
    opacity: 0; /* Elementos son invisibles inicialmente */
    transform: translateY(50px); /* Se desplazan hacia abajo */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Animación suave */
}

/* Clase activa para mostrar elementos */
.animate-on-scroll.active {
    opacity: 1; /* Elementos visibles */
    transform: translateY(0); /* Vuelven a su posición original */
}

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


.docente {
    margin-bottom: 100px; /*Separa la parte inferior entre secciones*/
    margin-left: 300px;
    margin-right: 250px;
    align-items: center;
    height: 100%;
    margin-top: 100px;
}

.speaker {
    margin-bottom: 0px; /*Separa la parte inferior entre secciones*/
    margin-left: 300px;
    margin-right: 250px;
    align-items: center;
    height: 100%;
    margin-top: 100px;
}

.educacion {
    margin-bottom: 100px; /*Separa la parte inferior entre secciones*/
    margin-left: 300px;
    margin-right: 250px;
    align-items: center;
    height: 100%;
    margin-top: 150px;
}

.sub-h2 h2{
    margin-left: 20px;
    font-size: 20px;
    font-family: var(--font-family-primary);
    color: #ffff;
}

.sub-h2-educacion h2{
    margin-left: 0;
    font-size: 18px;
    font-family: var(--font-family-primary-light);
    color: #1d1d1d;
    padding: 5px 0;
}


.section-title h1 {
    font-size: 20px; /* Tamaño del texto del título */
     /* Establece el peso de la fuente como negrita */
    list-style-type: none; /* Elimina cualquier marcador o viñeta de lista */
    position: relative; /* Necesario para posicionar el nuevo marcador */
    margin-bottom: 12px; /* Mantén el margen que ya tienes */
    margin-left: 25px; /* Elimina el margen izquierdo */
}




/* Eliminar la viñeta predeterminada de <h2> */
.sub-title h2 {
    margin: 0; /* Elimina márgenes del <h2> dentro de sub-title */
    padding: 0; /* Elimina relleno del <h2> dentro de sub-title */
    list-style-type: none; /* Elimina cualquier marcador o viñeta de lista */
    position: relative; /* Necesario para posicionar el nuevo marcador */
    margin-bottom: 0px; /* Mantén el margen que ya tienes */
    margin-left: 0px; /* Elimina el margen izquierdo */
    font-size: 18px;
    font-family:var(--font-family-primary);
}

/* Agregar un nuevo marcador antes del h2 */
.sub-title h2::before {
    content: "■"; /* Marcador cuadrado personalizado */
    color: #c5c3c3; /* Cambiar color del marcador */
    font-size: 0.6em; /*Tamaño del marcador */
    position: absolute; /* Posicionamos el marcador de forma absoluta */
    left: -1.2rem; /* Coloca el marcador más cerca del texto */
    top: 10%; /* Alinea el marcador al inicio del h3 */

}

.content-list h3 {
    margin: 0; /* Elimina márgenes del <h2> dentro de sub-title */
    padding: 0; /* Elimina relleno del <h2> dentro de sub-title */
    list-style-type: none; /* Elimina cualquier marcador o viñeta de lista */
    position: relative; /* Necesario para posicionar el nuevo marcador */
    margin-bottom: 0px; /* Mantén el margen que ya tienes */
    margin-left: 0px; /* Elimina el margen izquierdo */
    font-size: 18px;
    font-style: normal;

}

    /* .fade-in {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s ease-out, transform 1s ease-out;
    }

    /* Cuando la clase active se añade, se muestra el contenido
    .fade-in.active {
        opacity: 1;
        transform: translateY(0);
    } */


/* Agregar un nuevo marcador antes del h2 */
.content-list h3::before {
    content: "■"; /* Marcador cuadrado personalizado */
    color: #303030; /* Cambiar color del marcador */
    font-size: 0.6em; /*Tamaño del marcador */
    position: absolute; /* Posicionamos el marcador de forma absoluta */
    left: -1.2rem; /* Coloca el marcador más cerca del texto */
    top: 10%; /* Alinea el marcador al inicio del h3 */
}

p{
    font-size: 18px;
    font-family:var(--font-family-primary-light);
    margin-bottom: 0; /* Quitar margen inferior */
    padding-bottom: 0; /* Quitar padding inferior */
    margin-top: 0; /* Quitar margen superior */
    padding-top: 0; /* Quitar padding superior */
}

.sub-title, .parrafo-edu {
    display: flex;
    align-items: center;
}



.sub-right{
    margin-left: 0px;
    margin-right: 200px;
    margin-left: 40px;
    margin-bottom: 130px;
}
/* ---------------------------------------------------- */
.content-list li{
    list-style-type: none;
}

.content-list ul li {
    margin-left: 15px;
}

ul {

    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 20px;
    unicode-bidi: isolate;
}

/* ---------------------------------------------------- */
.sub-title img {
    margin-left: 10px;
    width: 20px;
    height: 20px;
    margin-bottom: 3px;
}


.sub-title{
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0; /* Quitar margen inferior */
    padding-bottom: 0; /* Quitar padding inferior */
    line-height: 1; /* Ajusta la altura de línea para que no genere espacio extra */
}

.recuadros-edu{
    margin-bottom: 35px;
}

.recuadros-edu-ul-li-ul-li {
    margin-bottom: 20px;
}

.espacioh2{
    margin-bottom: 15px;
}



/* Laptops (1024px a 1920px) */
@media (min-width: 1367px) and (max-width: 1919px) {

    main {
        margin-top: 90px; /* Reducir espacio superior */
        min-height: 90vh; /* Asegura que tenga al menos la altura de la ventana */
    }
/* --------------------------------------- */

    /* Imagen de fondo */
    #background-image {
        width: 100%;
        height: 600px;
        object-fit: cover; /* Ajusta la imagen sin distorsionarla */
    }

    /* Video de fondo */
    #background-video {
        width: 100%;
        height: 600px;
        object-fit: cover; /* Ajusta el video al contenedor sin distorsionar */
    }

    /* Contenido centrado con fondo oscuro */
    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        background: rgba(0, 0, 0, 0.4); /* Fondo semitransparente negro */
        padding: 20px;
        border-radius: 1px;
        width: auto;
        height: auto; /*alto */
        margin-top: 0px;
    }
    /* Marco amarillo interno */
    .inner-border {
        padding: 0px;
        display: inline-block;
        text-align: left;
    }
/* -------------------------------------------------- */
    .docente {
        margin-bottom: 90px; /*Separa la parte inferior entre secciones*/
        margin-left: 250px;
        margin-right: 40px;
        margin-top: 50px;
    }
    
    
    .speaker {
        margin-bottom: 90px; /*Separa la parte inferior entre secciones*/
        margin-left: 250px;
        margin-right: 40px;
        margin-top: 50px;
    }

    .educacion {
        margin-bottom: 100px; /*Separa la parte inferior entre secciones*/
        margin-left: 300px;
        margin-right: 250px;
        align-items: center;
        height: 100%;
        margin-top: 140px;
    }

    .section-title h1 {
        font-size: 22px; /* Tamaño del texto del título */
        margin-bottom: 12px;
         /* Establece el peso de la fuente como negrita */
    }

    .content-list{
        margin-right: 0px;
    }

    .sub-h2{
        margin-top: 0;
    }

    .sub-h2 h2{
        margin-left: 25px;
        font-size: 20px;
    }

    .sub-h2-educacion h2{
        margin-left: 0;
        font-size: 16px;
    }

    .espacioh2{
        margin-bottom: 10px;
    }

    h2 {
        display: block;
        font-size: 1.5em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight:lighter;
        unicode-bidi: isolate;
    }

    .sub-title h2{
        font-size: 16px;
        font-weight:bold;
    }

    .content-list h3 {
        font-size: 16px;
    }

    .sub-right{
        margin-bottom: 100px;

    }
    p{
        font-size: 16px;
        margin-bottom: 0; /* Quitar margen inferior */
        padding-bottom: 0; /* Quitar padding inferior */
        margin-top: 0; /* Quitar margen superior */
        padding-top: 0; /* Quitar padding superior */
    }

    .fixed-image {

        position: fixed;
        top: 55%; /* Centra la imagen verticalmente */
        right: 80px; /* Espaciado desde el borde derecho */
        transform: translateY(-50%); /* Ajuste para centrar verticalmente */
        z-index: 100; /* Asegura que la imagen esté encima del contenido */
    }

    .fixed-image img {
        width: 400px; /* Ajusta el tamaño de la imagen según sea necesario */
        height: 500px;
        border-radius: 0px; /* Opcional: para bordes redondeados */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Opcional: agrega sombra */
    }

    .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-70%);
    }

    /* Responsive de galeria */
    .arrow i {
        font-size: 30px;
    }

    .arrow i:hover {
        color: #bd6cb6;
    }
}

@media screen and (max-width: 1366px) and (min-width: 1279px) {

    main {
        margin-top: 100px; /* Reducir espacio superior */
        min-height: 90vh; /* Asegura que tenga al menos la altura de la ventana */
    }

    .docente {
        margin-bottom: 90px; /*Separa la parte inferior entre secciones*/
        margin-left: 200px;
        margin-right: 30px;
        margin-top: 50px;
    }
    
    
    .speaker {
        margin-bottom: 90px; /*Separa la parte inferior entre secciones*/
        margin-left: 200px;
        margin-right: 30px;
        margin-top: 50px;
    }

    .educacion {
        margin-bottom: 100px; /*Separa la parte inferior entre secciones*/
        margin-left: 300px;
        margin-right: 250px;
        align-items: center;
        height: 100%;
        margin-top: 140px;
    }

    .section-title h1 {
        font-size: 18px; /* Tamaño del texto del título */
        margin-bottom: 12px;
         /* Establece el peso de la fuente como negrita */
    }

    .content-list{
        margin-right: 0px;
    }


    .sub-h2 h2{
        padding-left: 20px;
        font-size: 16px;
    }

    .sub-h2-educacion h2{
        margin-left: 0;
        font-size: 1.5em;
    }

    .espacioh2{
        margin-bottom: 10px;
    }

    h2 {
        display: block;
        font-size: 1.5em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight:lighter;
        unicode-bidi: isolate;
    }

    .sub-title h2{
        font-size: 16px;
        font-weight:bold;
    }

    .content-list h3 {
        font-size: 16px;
    }

    .sub-right{
        margin-bottom: 100px;

    }
    p{
        font-size: 16px;
        margin-bottom: 0; /* Quitar margen inferior */
        padding-bottom: 0; /* Quitar padding inferior */
        margin-top: 0; /* Quitar margen superior */
        padding-top: 0; /* Quitar padding superior */
    }

    .fixed-image {

        position: fixed;
        top: 55%; /* Centra la imagen verticalmente */
        right: 80px; /* Espaciado desde el borde derecho */
        transform: translateY(-50%); /* Ajuste para centrar verticalmente */
        z-index: 100; /* Asegura que la imagen esté encima del contenido */
    }

    .fixed-image img {
        width: 400px; /* Ajusta el tamaño de la imagen según sea necesario */
        height: 500px;
        border-radius: 0px; /* Opcional: para bordes redondeados */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Opcional: agrega sombra */
    }

    /* Responsive de galeria */
    .arrow i {
        font-size: 30px;
    }

    .arrow i:hover {
        color: #ffed00;
    }
}

/* Tablets (768px a 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    main {
        margin-top: 120px; /* Reducir espacio superior */
    }


    section {
        margin-bottom: 90px; /*Separa la parte inferior entre secciones*/
        margin-left: 40px;
        margin-right: 40px;
    }

    .sub-right{
        margin-left: 20px;
        margin-right: 20px;

    }

    .fixed-image {
        position: static; /* Imagen deja de ser fija */
        margin: 10px auto; /* Centrar imagen */
        text-align: center; /* Imagen centrada */
        margin-top: 230px;
        margin-bottom: -180px;
    }



    .fixed-image img {
        width: 90%; /* Imagen ocupa casi todo el ancho */
        height: auto; /* Ajustar altura automáticamente */
    }

}

/* Móviles (menor a 768px) */
@media screen and (max-width: 767px) {

    main {
        margin-top: 50px; /* Reducir espacio superior */
    }
    /* ---------------------------------------------------------- */

    /* Contenedor de la imagen */
    .image-container {
        position: relative;
        width: 100%;
        height: 600px; /* Ajusta la altura según necesites */
        overflow: hidden;
    }

    /* Imagen de fondo */
    #background-image {
        width: 100%;
        height: 600px;
        object-fit: cover; /* Ajusta la imagen sin distorsionarla */
    }

    /* Contenedor del video */
    .video-container {
        position: relative;
        width: 100%;
        height: auto; /* Altura automática según el contenido */
        overflow: hidden; /* Evita desbordamientos */
    }

    /* Video de fondo */
    #background-video {
        width: 100%;
        height: 600px;
        object-fit: cover; /* Ajusta el video al contenedor sin distorsionar */
    }

    /* Contenido centrado con fondo oscuro */
    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        background: rgba(0, 0, 0, 0.4); /* Fondo semitransparente negro */
        padding: 20px;
        border-radius: 1px;
        width: 70%;
        max-width: 900px; /* Máximo ancho */
        height: auto;
        max-height: 600px; /* Máximo alto */
        margin-top: 100px;
    }

    /* Marco amarillo interno */
    .inner-border {
        padding: 15px;
        display: inline-block;
        text-align: left;
    }

    /* Estilos de texto */
    .inner-border h1 {
        color: white;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .inner-border p {
        color: white;
        font-size: 14px;
    }

    /* ------------------------------------------------------------------------------------------ */
    /* Responsive para móviles */
    /* Ajusta el contenedor del carrusel */
    .carousel-container {
        width: 100%; /* Ocupa el 100% del ancho del dispositivo */
    }

    .carousel-track {
        gap: 10px; /* Espaciado entre las imágenes */
    }

    /* Cada imagen ocupa 33.33% (1/3) del ancho visible */
    .carousel-item {
        flex: 0 0 33.33%; /* Cada imagen ocupa 1/3 del carrusel */
    }

    /* Ajusta las imágenes dentro del carrusel */
    .carousel-item img {
        width: 100%; /* Ocupa todo el ancho del contenedor */
        height: auto; /* Mantiene la relación de aspecto */
        border-radius: 1px; /* Bordes redondeados */
    }

    /* Flechas de navegación */
    .arrow i{
        font-size: 30px; /* Reduce el tamaño de las flechas */
    }

    .arrow.left {
        left: 5px; /* Ajusta la posición para dispositivos pequeños */
    }

    .arrow.right {
        right: 5px; /* Ajusta la posición para dispositivos pequeños */
    }
    /* -------------------------------------------------------- */

    .docente {
        margin-top: 50px;
        margin-bottom: 30px; /*Separa la parte inferior entre secciones*/
        margin-left: 30px;
        margin-right: 30px;
    }

    .speaker {
        margin-top: 50px;
        margin-bottom: 30px; /*Separa la parte inferior entre secciones*/
        margin-left: 30px;
        margin-right: 30px;
    }

    .educacion{
        margin-top: 150px;
        margin-bottom: 30px; /*Separa la parte inferior entre secciones*/
        margin-left: 30px;
        margin-right: 30px;
    }

    .sub-right{
        margin-left: 20px;
        margin-right: 20px;
    }

    .fixed-image {
        position: static; /* Imagen deja de ser fija */
        margin: 10px auto; /* Centrar imagen */
        text-align: center; /* Imagen centrada */
        margin-top: 150px;
        margin-bottom: -100px;
    }



    .fixed-image img {
        width: 90%; /* Imagen ocupa casi todo el ancho */
        height: auto; /* Ajustar altura automáticamente */
    }
    .sub-title h2{
        font-size: 16px;
    }
    .sub-h2 h2{
        font-size: 14px;
    }
    .sub-h2-educacion h2{
        margin-left: 0;
        font-size: 14px;
    }

    .section-title h1 {
        font-size: 16px; /* Tamaño del texto del título */
        margin-left: 0;
        margin-bottom: 8px; /* Mantén el margen que ya tienes */

    }

    .content-list h3 {
        font-size: 14px;
    }
    p{
        font-size: 14px;
    }
}

/* ======= Botón flotante ======= */
.floating-button{
  position:fixed;bottom:20px;right:20px;z-index:1000;background:#bd6cb6;color:#e5e3e3;border-radius:50%;
  width:60px;height:60px;display:flex;justify-content:center;align-items:center;font-size:20px;
  box-shadow:0 4px 6px rgba(0,0,0,.2);cursor:pointer;transition:background-color .3s ease;
}
.floating-button:hover{background:#b2b2b2}