/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

.logoIcem {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.headerIcem {
    margin-top: 30px;
    margin-bottom: 30px;
    color: #6f4f1f; 
    font-style: bold;
    text-align: center; 
    padding: 20px 0; 
    font-size: 36px;
}
/* Estilo de la imagen */
.logoIcem img {
    max-width: 38%; 
    max-height: 38%; 
    object-fit: contain; 
   
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FF5733; /* Rojo anaranjado */
    color: white;
    padding: 1rem;
    position: sticky; /* Hace que el header se quede fijo al hacer scroll */
    top: 0; /* Asegura que el header se quede en la parte superior */
    z-index: 1000; /* Asegura que el header esté por encima de otros elementos */
    width: 100%; /* Asegura que el header ocupe todo el ancho */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Opcional, agrega una sombra para hacerlo destacar */
}

@media (max-width: 768px) {
    .header {
        flex-direction: column; /* Cambiar a columna para apilar el contenido */
        align-items: center; /* Centrar los elementos del header */
        padding: 0.5rem; /* Ajustar el padding para pantallas pequeñas */
    }

    .logo {
        margin-bottom: 10px; /* Separación entre logo y otros elementos */
    }

    .logo img {
        height: 40px; /* Reducir el tamaño del logo */
    }

    /* Si hay algún texto o botón en el header, también puede necesitar ajustes */
    .header .button {
        margin-top: 10px; /* Asegura que el botón no esté demasiado pegado al logo */
        font-size: 1rem; /* Tamaño de texto más pequeño en dispositivos móviles */
        padding: 10px 20px; /* Ajusta el tamaño del botón */
    }
}


.logo {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre imágenes del logo */
}

.logo img {
    height: 60px;
}

/* Sección Intro */
.intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    background: #fff;
    color: #333;
    text-align: left; /* Alinea el texto a la izquierda */
}

.intro h1 {
    font-size: 4rem; /* Tamaño grande para todo el texto */
    color: midnightblue; /* Azul marino */
    margin-bottom: 1rem;
    line-height: 1.2; /* Control de separación entre líneas */
    text-align: center;
    word-break: break-word; /* Asegura que las palabras largas se ajusten */
}

.intro p {
    font-size: 1.5rem; /* Fuente más grande para el texto secundario */
    color: #004aad; /* Color azul */
    margin-bottom: 1rem;
    text-align: center; /* Centra el texto */
    width: 80%; /* Ajusta el ancho para que no esté demasiado cerca de los bordes */
    margin-left: auto; /* Centra el bloque horizontalmente */
    margin-right: auto; /* Centra el bloque horizontalmente */
}

.intro .graduado-img img {
    width: 550px; /* Imagen más grande */
    max-width: 100%; /* Responsiva */
    border-radius: 8px; /* Bordes redondeados opcional */
    margin-left: 1rem; /* Espaciado reducido entre texto e imagen */
}

@media (max-width: 768px) {
    .intro {
        flex-direction: column; /* Apila el texto e imagen en columnas */
        text-align: center; /* Centra el texto para móviles */
    }

    .graduado-img img {
        margin-top: 1rem; /* Espacio entre texto e imagen */
    }
}

/* Licenciaturas */
.licenciaturas {
    background: #fff;
    padding: 2rem;
    text-align: center;
}

.licenciaturas h2 {
    margin-bottom: 3rem; /* Aumenta el espacio debajo del título */
    color: #002F6C; /* Tono de azul más fuerte */
    font-size: 3rem; /* Aumenta el tamaño de la fuente */
    font-weight: bold; /* Pone el texto en negritas */
    letter-spacing: 2px; /* Espacio entre letras */
    text-transform: uppercase; /* Hace el texto en mayúsculas */
}

/* Contenedor de las licenciaturas */
.licenciaturas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas, 6 items a la izquierda y 6 a la derecha */
    gap: 1.5rem;
}

/* Estilo para cada item de licenciatura */
.lic-item {
    background: linear-gradient(45deg, #00BFFF, #00CED1, #4682B4, #5F9EA0); /* Degradado de colores azules */
    color: white;
    padding: 1rem 3rem; /* Mayor espacio a los lados para hacer las píldoras más largas */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 50px; /* Bordes totalmente redondeados */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    max-width: 500px; /* Aumenta el tamaño máximo para hacerlo más largo */
    margin: 0 auto; /* Centra los items */
    overflow: hidden; /* Asegura que el texto largo no se desborde */
    transition: transform 0.3s ease-in-out; /* Suaviza la animación */
}

/* Información de la licenciatura (nombre) */
.lic-info {
    flex: 1;
    text-align: center;
    word-wrap: break-word; /* Permite que el texto haga un salto de línea si es necesario */
    white-space: normal; /* Asegura que el texto no se quede en una sola línea */
}

.lic-info p {
    font-size: 1.0rem; /* Hacemos la letra más pequeña */
    font-weight: bold;
    white-space: normal; /* Permite saltos de línea */
}

/* Imagen de la licenciatura */
.lic-img {
    display: flex;
    justify-content: center; /* Centra la imagen dentro de su contenedor */
    align-items: right;
}

/* Estilo para la imagen dentro de cada licenciatura */
.lic-img img {
    width: 80px; /* Ajusta la imagen para que tenga el mismo tamaño que el círculo */
    height: 80px; /* La misma altura que el ancho para crear un círculo perfecto */
    object-fit: cover; /* Asegura que la imagen mantenga su proporción sin deformarse */
    border-radius: 50%; /* Bordes redondeados para crear un círculo */
    border: 3px solid #fff; /* Añadir un borde blanco si deseas resaltar el círculo */
}

/* Efecto hover para (contenedor) */
.lic-item:hover {
    transform: scale(1.1); /* Aumenta el tamaño de la píldora al 110% */
}

@media (max-width: 768px) {
    /* Contenedor principal de licenciaturas */
    .licenciaturas {
        padding: 2rem 1rem; /* Ajuste en el padding para móviles */
        text-align: center; /* Asegura que el texto se vea centrado */
    }

    /* Título de licenciaturas */
    .licenciaturas h2 {
        margin-bottom: 1.5rem; /* Menos espacio debajo del título en móviles */
        font-size: 2rem; /* Ajusta el tamaño de fuente */
        color: #002F6C; /* Mantiene el color azul */
        font-weight: bold; /* Texto en negrita */
        text-transform: uppercase; /* Texto en mayúsculas */
    }

    /* Contenedor de las licenciaturas */
    .licenciaturas-grid {
        display: grid;
        grid-template-columns: 1fr; /* Una columna en lugar de dos para móviles */
        gap: 1.5rem; /* Mantiene el espacio entre los items */
        width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
    }

    /* Estilo para cada item de licenciatura */
    .lic-item {
        background: linear-gradient(45deg, #00BFFF, #00CED1, #4682B4, #5F9EA0); /* Degradado azul */
        color: white;
        padding: 1rem; /* Ajusta el padding */
        display: flex;
        flex-direction: column; /* Asegura que el texto y la imagen estén apilados verticalmente */
        align-items: center; /* Centra el contenido */
        justify-content: center; /* Alinea el contenido en el centro */
        border-radius: 50px; /* Bordes redondeados */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        width: 100%; /* Asegura que ocupe todo el ancho */
        margin: 0 auto; /* Centra los items */
        transition: transform 0.3s ease-in-out; /* Efecto de animación */
    }

    /* Información de la licenciatura (nombre) */
    .lic-info {
        text-align: center; /* Centra el texto dentro del contenedor */
        margin-bottom: 1rem; /* Añade un margen inferior */
        font-size: 1rem; /* Ajusta el tamaño de fuente */
    }

    /* Imagen de la licenciatura */
    .lic-img img {
        width: 60px; /* Ajusta el tamaño de la imagen */
        height: 60px; /* La misma altura */
        object-fit: cover; /* Mantiene la proporción de la imagen */
        border-radius: 50%; /* Bordes redondeados */
        border: 3px solid #fff; /* Añadir borde blanco para resaltar */
        margin-bottom: 1rem; /* Espacio debajo de la imagen */
    }

    /* Efecto hover para los items */
    .lic-item:hover {
        transform: scale(1.05); /* Reduce el efecto de hover en pantallas pequeñas */
    }
}

@media (max-width: 768px) {
    .licenciaturas-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajuste para móviles */
    }

    .lic-item {
        max-width: 100%; /* Permite que los items se adapten al 100% en pantallas pequeñas */
    }
}


/* Estilos generales para la sección de los planes */
.planes {
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

/* Contenedor de los planes */
.planes-container {
    display: flex;
    gap: 50px; /* Aumentamos el espacio entre los planes */
}

/* Estilo para cada plan */
.plan {
    background-color: #004085; /* Azul fuerte */
    color: white;
    padding: 30px;
    width: 400px; /* Aumentamos el tamaño del contenedor */
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    position: relative; /* Para manejar la posición del mes */
}

/* Efecto al pasar el cursor sobre el plan */
.plan:hover {
    transform: translateY(-10px);
}

/* Estilo para los meses fuera del contenedor (sin fondo) */
.meses {
    color: #FF5733; /* Rojo anaranjado */
    font-size: 2em; /* Aumentamos el tamaño de la fuente */
    text-align: center;
    position: absolute;
    top: -50px; /* Aumentamos el valor para que suba más */
    left: 50%;
    transform: translateX(-50%);
}

/* Estilo para los títulos de los planes con fondo azul más oscuro */
.plan h4 {
    font-size: 1.5em; /* Aumentamos el tamaño del título */
    margin-bottom: 15px;
    text-align: center;
    background-color: #023567; /* Azul más oscuro para el fondo del título */
    padding: 10px;
    border-radius: 5px;
    color: white; /* El texto sigue siendo blanco */
}

/* Estilo para el precio */
.plan p {
    font-size: 3em; /* Aumentamos el tamaño del precio */
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

/* Estilo para la lista de características */
.plan ul {
    font-size: 1em;
    list-style-type: none;
    padding: 0;
    text-align: left;
}

/* Estilo para los ítems de la lista */
.plan ul li {
    margin-bottom: 15px;
    font-size: 1.2em; /* Aumentamos el tamaño de la lista */
}

@media (max-width: 768px) {
    /* Estilos generales para la sección de los planes */
    .planes {
        display: flex;
        flex-direction: column; /* Asegura que los planes se apilen uno debajo del otro */
        justify-content: center;
        align-items: center; /* Centra los planes */
        margin: 50px 0;
        padding: 1rem; /* Ajuste del padding */
    }

    /* Contenedor de los planes */
    .planes-container {
        display: flex;
        flex-direction: column; /* Los planes se apilan verticalmente */
        gap: 100px; /* Aumentamos el espacio entre los planes */
        width: 100%; /* Ocupa el 100% del ancho */
    }

    /* Estilo para cada plan */
    .plan {
        background-color: #004085; /* Azul fuerte */
        color: white;
        padding: 20px; /* Ajuste en el padding */
        width: 90%; /* El ancho se ajusta al 90% para móviles */
        max-width: 400px; /* Maximo ancho para evitar que se estire demasiado */
        border-radius: 10px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        position: relative; /* Para manejar la posición del mes */
        margin: 0 auto; /* Centra los planes */
    }

    /* Efecto al pasar el cursor sobre el plan */
    .plan:hover {
        transform: translateY(-5px); /* Ajuste en el hover para móviles */
    }

    /* Estilo para los meses fuera del contenedor (sin fondo) */
    .meses {
        color: #FF5733; /* Rojo anaranjado */
        font-size: 1.8em; /* Ajuste en el tamaño de la fuente */
        text-align: center;
        position: absolute;
        top: -100px; /* Aumentamos más el valor para que suba aún más */
        left: 50%;
        transform: translateX(-50%);
    }

    /* Estilo para los títulos de los planes con fondo azul más oscuro */
    .plan h4 {
        font-size: 1.3em; /* Ajuste en el tamaño del título */
        margin-bottom: 12px;
        text-align: center;
        background-color: #023567; /* Azul más oscuro para el fondo del título */
        padding: 8px;
        border-radius: 5px;
        color: white; /* El texto sigue siendo blanco */
    }

    /* Estilo para el precio */
    .plan p {
        font-size: 2.5em; /* Ajuste en el tamaño del precio */
        font-weight: bold;
        margin-bottom: 15px;
        text-align: center;
    }

    /* Estilo para la lista de características */
    .plan ul {
        font-size: 1.1em; /* Ajuste en el tamaño de la lista */
        list-style-type: none;
        padding: 0;
        text-align: left;
    }

    /* Estilo para los ítems de la lista */
    .plan ul li {
        margin-bottom: 12px; /* Ajuste en el espacio entre los items */
        font-size: 1.2em; /* Ajuste en el tamaño de los ítems de la lista */
    }
}





/* Estilo para la sección de registro */
.registro {
    background-color: #FF5733; /* Rojo anaranjado */
    padding: 20px;
    text-align: center; /* Centra el texto */
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Agrega sombra para un efecto sutil */
}

/* Estilo para el texto dentro del contenedor */
.registro h2 {
    color: white; /* Color de texto blanco */
    font-size: 3em; /* Aumenta el tamaño de la fuente */
    font-weight: bold; /* Pone el texto en negrita */
    margin: 0; /* Elimina márgenes alrededor del texto */
}

@media (max-width: 768px) {
    .registro {
        padding: 10px; /* Ajusta el padding para pantallas pequeñas */
        margin: 0 10px; /* Añade margen para evitar que el contenedor toque los bordes de la pantalla */
    }
}

/* Contacto */
.contacto {
    padding: 2rem;
    background: #f9f9f9;
}

.contacto h2 {
    margin-bottom: 1rem;
    color: #004aad;
}

/* Estilo para el enlace en el header */
.form-link {
    color: white;
    background-color: #00BFFF; /* Azul del enlace */
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin-left: 20px; /* Espacio al lado del logo */
}

.form-link:hover {
    background-color: #002F6C; /* Cambia el color al pasar el mouse */
}

/* Estilo para el formulario */
.form-container {
    max-width: 600px;
    margin: 50px auto;
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

form label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

form input,
form select,
form button {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

form button {
    background-color: #FF5733;
    color: white;
    cursor: pointer;
}

form button:hover {
    background-color: #da4d2d; /* Color al pasar el mouse */
}

/* Estilo para el body de la página del formulario */
.form-page {
    background-image: url('/img/fond.jpg'); /* Ruta de la imagen de fondo */
    background-size: cover; /* La imagen cubre toda la página */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    min-height: 100vh; /* Asegura que el fondo cubra toda la ventana */
    padding: 0; /* Elimina cualquier padding adicional */
}

/* Estilos para el contenedor del formulario */
.form-container {
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco con opacidad */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px; /* Limitar el ancho del formulario */
    width: 100%;
}



/* Pie de página azul celeste */
/* Contenedor Footer */
footer {
    position: relative;  /* Establece un contenedor con posición relativa para el uso de posicionamiento absoluto */
    background-color: #00BFFF; /* Azul celeste */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 1rem;
    color: white;
}

/* Texto dentro del footer, alineado a la parte superior derecha */
.footer-text p {
    position: absolute;  /* Hace que el texto se posicione de forma absoluta dentro del footer */
    top: 0;              /* Mueve el texto hacia la parte superior */
    left: 50%;           /* Coloca el texto en la mitad del contenedor */
    transform: translateX(0%);  /* Ajusta el texto para que quede centrado */
    font-size: 3rem;     /* Tamaño de la fuente */
    font-weight: bold;   /* Hace el texto en negrita */
    margin: 0;           /* Elimina márgenes */
    text-align: center;  /* Centra el texto dentro del contenedor */
}

.footer-text2 p {
    font-size: 1.5rem;
    position: absolute;  /* Hace que el texto se posicione de forma absoluta dentro del footer */
    left: 70%;
    transform: translateX(0%);  /* Ajusta el texto para que quede centrado */
    font-weight: bold;   /* Hace el texto en negrita */
    margin: 0;
    text-align: center;  /* Centra el texto dentro del contenedor */
}



.footer-img img {
    width: 550px; /* Ajusta el tamaño de la imagen */
    height: auto;
}


/* Estilos para dispositivos móviles (300px en adelante) */
@media (max-width: 768px) {
    footer {
        display: flex;
        flex-direction: column;  /* Asegura que los elementos estén apilados verticalmente */
        align-items: center;  /* Centra los elementos horizontalmente */
        padding: 2rem 1rem;  /* Aumenta el padding para dar más espacio alrededor */
        min-height: 800px;  /* Aumenta la altura del footer para dispositivos pequeños */
        justify-content: flex-start; /* Alinea los elementos desde arriba */
        text-align: center;  /* Alinea el texto al centro */
    }

    /* Estilo de la imagen */
    .footer-img img {
        width: 100%;  /* La imagen ocupará todo el ancho disponible */
        max-width: 600px;  /* Limita el tamaño máximo de la imagen */
        height: auto;  /* Mantiene la relación de aspecto de la imagen */
        margin-bottom: 2rem;  /* Añade un espacio más grande debajo de la imagen */
    }

    /* Estilo para el primer texto en .footer-text */
    .footer-text p {
        font-size: 1.2rem;  /* Reduce el tamaño de fuente para dispositivos móviles */
        margin: 1rem 0;  /* Ajusta el margen superior e inferior para un buen espaciado */
        width: 100%;  /* Asegura que el texto ocupe todo el ancho */
        max-width: 90%;  /* Limita el ancho para evitar que el texto se salga del contenedor */
        word-wrap: break-word;  /* Asegura que las palabras largas se rompan correctamente */
        line-height: 1.8;  /* Aumenta el espacio entre líneas para mayor legibilidad */
        margin-left: -120px;  /* Mueve el texto 60px hacia la izquierda */
    }

    /* Estilo para el segundo texto en .footer-text2 */
    .footer-text2 p {
        font-size: 1.2rem;  /* Reduce el tamaño de fuente para dispositivos móviles */
        margin: 10rem 0;  /* Ajusta el margen superior e inferior */
        width: 100%;  /* Asegura que el texto ocupe todo el ancho */
        max-width: 90%;  /* Limita el ancho para evitar que el texto se salga del contenedor */
        word-wrap: break-word;  /* Asegura que las palabras largas se rompan correctamente */
        line-height: 1.8;  /* Aumenta el espacio entre líneas para mayor legibilidad */
        margin-left: -180px;  /* Mueve el texto 60px hacia la izquierda */
    }

    /* Asegura que los textos estén alineados correctamente debajo de la imagen */
    .footer-text, .footer-text2 {
        position: relative;
        z-index: 1;  /* Mantiene los textos encima de otros elementos si es necesario */
        width: 100%;  /* Asegura que los textos ocupen todo el ancho del contenedor */
    }
}

/* Para pantallas de 400px a 700px */
@media (min-width: 400px) {
    .footer-text p {
        margin-left: -180px; /* Mueve el texto 110px hacia la izquierda */
    }
    .footer-text2 p{
        margin-left: -250px;
    }
}

@media (min-width: 500px) {
    .footer-text p {
        margin-left: -200px; /* Mueve el texto 110px hacia la izquierda */
    }
    .footer-text2 p{
        margin-left: -300px;
    }
}

@media (min-width: 600px) {
    .footer-text p {
        margin-left: -260px; /* Mueve el texto 110px hacia la izquierda */
    }
    .footer-text2 p{
        margin-left: -350px;
    }
}

@media (min-width: 768px) {
    .footer-text p {
        margin-left: -320px; /* Mueve el texto 110px hacia la izquierda */
    }

    .footer-text2 p{
        margin-left: -450px;
    }
}


/* Pie de página rojo anaranjado con requisitos */
.footer-requisitos {
    background-color: #FF5733; /* Rojo anaranjado */
    color: white;
    padding: 2rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
}

/* Contenedor de los requisitos */
.requisitos-content {
    display: flex;
    justify-content: space-between; /* Esto alinea los dos elementos en los extremos */
    align-items: flex-start;
    width: 100%;
}

/* Título "REQUISITOS" centrado y bajado más */
.requisitos-text h2 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: white;
    text-align: center; /* Centra el título */
    width: 100%; /* Asegura que ocupe el 100% del ancho disponible */
    margin-top: 4rem; /* Lo baja más */
}

/* Lista de requisitos con puntos */
.requisitos-lista ul {
    list-style-type: disc; /* Añade los puntos */
    padding-left: 2rem; /* Espacio a la izquierda para los puntos */
}

.requisitos-lista ul li {
    font-size: 1.2rem;
    margin: 0.5rem 0;
    color: white;
}


@media (max-width: 768px) {
    /* Estilos para el footer de requisitos */
    .footer-requisitos {
        background-color: #FF5733; /* Rojo anaranjado */
        color: white;
        padding: 2rem 1rem;
        display: flex;
        flex-direction: column;  /* Cambia la dirección a columna para que los elementos se apilen */
        align-items: center;  /* Centra los elementos horizontalmente */
        text-align: left;  /* Alinea el texto a la izquierda */
        justify-content: flex-start;
    }

    /* Contenedor de los requisitos */
    .requisitos-content {
        display: flex;
        flex-direction: column;  /* Alinea los elementos en una columna */
        align-items: center;  /* Centra los elementos horizontalmente */
        width: 50%;  /* Asegura que ocupe el 100% del ancho disponible */
        margin-top: 2rem;  /* Añade un pequeño margen superior entre el título y la lista */
    }

    /* Título "REQUISITOS" centrado y bajado más */
    .requisitos-text h2 {
        font-size: 2rem;  /* Tamaño de fuente ajustado para dispositivos pequeños */
        font-weight: bold;
        margin-bottom: 2rem;  /* Espacio entre el título y la lista */
        color: white;
        text-align: center;  /* Centra el título */
        width: 100%;  /* Asegura que ocupe el 100% del ancho disponible */
        margin-top: 1rem;  /* Baja un poco más el título */
    }

    /* Lista de requisitos con puntos */
    .requisitos-lista ul {
        list-style-type: disc;  /* Añade los puntos */
        padding-left: 1.5rem;  /* Espacio a la izquierda para los puntos */
        margin-top: 1rem;  /* Añade espacio entre el título y la lista */
    }

    .requisitos-lista ul li {
        font-size: 1rem;  /* Tamaño de la fuente reducido para pantallas pequeñas */
        margin: 0.5rem 0;  /* Ajusta el margen entre los elementos */
        color: white;  /* Mantiene el texto blanco */
    }
}




/**/
/* Estilo general de la sección */
.informacion {
    padding: 4rem 2rem;
    background-color:#f9f9f9; 
}

/* Estilo de cada item dentro de la sección */
.info-item {
    margin-bottom: 2rem;
}

/* Contenedor común para cada item con texto e imagen */
.info-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #097092; /* Azul celeste */
    padding: 1rem;
    border-radius: 8px; /* Bordes redondeados para todo el contenedor */
}

/* Área de texto - Lado izquierdo con fondo azul */
.info-text {
    color: white;
    flex: 1;
    padding: 1rem;
    font-size: 1.4rem; /* Aumentar el tamaño de la fuente */
    line-height: 1.6; /* Mejorar la legibilidad */
}

/* Área de la imagen - Lado derecho con fondo blanco */
.info-img {
    flex: 1;
    background-color: white;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px; /* Redondear las esquinas para el bloque de imágenes */
}

/* Estilo para las imágenes */
.info-img img {
    max-width: 80px; /* Tamaño máximo de las imágenes */
    height: auto;
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 768px) {
    .info-contenedor {
        flex-direction: column;
        text-align: center;
    }

    .info-img {
        margin-top: 1rem;
    }
}

/* Estilos generales para el pie de página */
#institucion-footer {
    background-color:#f4f4f4;
    color: white;
    padding: 40px 20px;
    text-align: center;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas más pequeñas */
    max-width: 1200px;
    margin: 0 auto;
}

.info {
    flex: 1;
    margin-right: 30px;
}

.info h3 {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: #333;
}

.info p {
    font-size: 1.1em;
    line-height: 1.6;
    margin: 5px 0;
    color: #333;
}

.imagenes {
    flex: 1;
    text-align: center;
}

.imagenes img {
    width: 180px;
    height: auto;
    margin: 20px;
}

.social-media {
    flex: 1;
    text-align: center;
}

.social-media a {
    margin: 0 10px;
}

.social-media img {
    width: 40px;
    height: 40px;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .info, .imagenes, .social-media {
        margin-bottom: 20px;
    }
}

 
  /* Contenedor para la búsqueda */
.search-container {
    text-align: center;
    margin: 20px 0;
  }
  
  /* Estilo del input de búsqueda */
  #searchInput {
    padding: 10px;
    width: 80%;
    max-width: 500px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  /* Estilo de la tabla */
  table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    border: 1px solid #ddd;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Estilo de las celdas */
  th, td {
    padding: 12px;
    text-align: center;
    border: 1px solid #ddd;
  }
  
  /* Estilo de los encabezados de la tabla */
  th {
    background-color: #FF5733;  /* Azul celeste */
    color: white;
  }
  
  /* Estilo para las filas alternas */
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  
  /* Estilo al pasar el mouse sobre las filas */
  tr:hover {
    background-color: #ddd;
  }
  
  /* Contenedor principal */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* Estilo para el título h1 con la clase h1register */
.h1register {
    text-align: center;
    font-size: 2.5em;
    color: #333;
  }
  
  .register1 {
    background-image: url('/img/fond.jpg'); /* Cambia esta ruta por la ubicación de tu imagen */
    background-size: cover; /* Ajusta la imagen al tamaño de la pantalla */
    background-position: center; /* Centra la imagen en la pantalla */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
  }
  
  /* Estilos para pantallas de 300px en adelante */
/* Estilos para pantallas de 300px en adelante */
@media (max-width: 768px) {
    /* Ajustes del contenedor de búsqueda */
    .search-container {
        width: 100%;
    }

    /* Estilo del input de búsqueda */
    #searchInput {
        width: 95%;  /* Aumenta el ancho del input */
        font-size: 14px;  /* Ajusta el tamaño de la fuente */
        padding: 8px;  /* Ajusta el padding */
    }

    /* Estilo de la tabla */
    table {
        width: 100%;  /* La tabla ocupa todo el ancho disponible */
        font-size: 14px;  /* Reduce el tamaño de fuente */
        display: block;  /* Hace que la tabla se apile */
    }

    th, td {
        display: block;  /* Hace que cada celda se apile verticalmente */
        width: 100%;  /* Asegura que las celdas ocupen todo el ancho disponible */
        padding: 8px;  /* Ajusta el padding de las celdas */
    }

    /* Ajustes de la imagen */
    .register1 {
        background-size: contain; /* Asegura que la imagen se ajuste bien al tamaño */
    }

    .h1register {
        font-size: 1.6em;  /* Reduce el tamaño de la fuente para dispositivos pequeños */
    }
}

/* contenedor centrado */
.wtc{
  display:flex;
  justify-content:center;
  margin:24px 0;
}

/* imagen responsiva y con límite de ancho */
.wtc img{
  width:100%;
  max-width:960px;   /* iguala al ancho visual que quieras */
  height:auto;
}