* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 /* Estilos para el header */
 
 header {
     background: linear-gradient(rgba(236, 5, 225, 0.5), rgba(247, 3, 255, 0.5)), #d6d292;
     color: #fff;
     padding: 10px;
     /* Ajusta el relleno */
     text-align: center;
     font-size: 30px;
     /* Tamaño de fuente reducido */
     overflow: hidden;
     /* Para evitar el desbordamiento del contenido */
     font-family: 'Times New Roman', Times, serif;
 }
 
 header:hover {
     transform: scale(1);
 }
 /* Estilos para la contenedor de navegación */
 
 .nav-container {
     max-width: 100%;
 }
 /* Estilos para la navegación */
 
 nav {
     background: linear-gradient(rgba(174, 51, 245, 0.5), rgba(165, 119, 218, 0.5)), #d6d292;
     text-align: center;
     padding: 5px;
     /* Ajusta el relleno */
 }
 
 nav ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
 
 nav li {
     display: block;
     /* Cambia a bloques en lugar de línea en móviles */
     margin-bottom: 10px;
     /* Espacio entre elementos de navegación */
     font-size: 18px;
     /* Tamaño de fuente reducido */
 }
 
 nav li a {
     text-decoration: none;
     color: #fff;
     padding: 5px 10px;
     /* Ajusta el relleno */
     border: 2px solid #e0a8a8;
     border-radius: 5px;
     transition: background-color 0.3s;
     font-family: 'Times New Roman', Times, serif;
 }
 
 nav li a:hover {
     background-color: rgb(135, 150, 219);
 }
 /* Estilos para cada módulo */
 
 .modulo1 {
     background-color: #FFC0CB;
     /* Rosa claro */
     color: #333;
     /* Texto oscuro */
     font-size: 28px;
     /* Tamaño de fuente reducido */
     padding: 10px;
     /* Ajusta el relleno */
     border-radius: 3px;
     /* Borde redondeado */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     font-family: 'Times New Roman', Times, serif;
 }
 
 .modulo2 {
     background-color: #87CEEB;
     /* Azul cielo */
     color: #333;
     /* Texto oscuro */
     font-size: 28px;
     /* Tamaño de fuente reducido */
     padding: 10px;
     /* Ajusta el relleno */
     border-radius: 10px;
     /* Borde redondeado */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     font-family: 'Times New Roman', Times, serif;
 }
 
 .modulo3 {
     background-color: #FFFF99;
     /* Amarillo claro */
     color: #333;
     /* Texto oscuro */
     font-size: 28px;
     /* Tamaño de fuente reducido */
     padding: 5px;
     /* Ajusta el relleno */
     border-radius: 10px;
     /* Borde redondeado */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     font-family: 'Times New Roman', Times, serif;
 }
 
 .modulo4 {
     background-color: #FFD700;
     /* Amarillo dorado */
     color: #333;
     /* Texto oscuro */
     font-size: 28px;
     /* Tamaño de fuente reducido */
     padding: 10px;
     /* Ajusta el relleno */
     border-radius: 10px;
     /* Borde redondeado */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     font-family: 'Times New Roman', Times, serif;
 }
 
 .modulo5 {
     background-color: #98FB98;
     /* Verde claro */
     color: #333;
     /* Texto oscuro */
     font-size: 28px;
     /* Tamaño de fuente reducido */
     padding: 10px;
     /* Ajusta el relleno */
     border-radius: 10px;
     /* Borde redondeado */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     font-family: 'Times New Roman', Times, serif;
 }
 
 .modulo6 {
     background-color: #FFA07A;
     /* Salmón claro */
     color: #333;
     /* Texto oscuro */
     font-size: 28px;
     /* Tamaño de fuente reducido */
     padding: 10px;
     /* Ajusta el relleno */
     border-radius: 10px;
     /* Borde redondeado */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     font-family: 'Times New Roman', Times, serif;
 }
 
 .modulo7 {
     background-color: #FF69B4;
     /* Rosa intenso */
     color: #333;
     /* Texto oscuro */
     font-size: 28px;
     /* Tamaño de fuente reducido */
     padding: 10px;
     /* Ajusta el relleno */
     border-radius: 10px;
     /* Borde redondeado */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     font-family: 'Times New Roman', Times, serif;
 }
 
 .modulo8 {
     background-color: #F0E68C;
     /* Amarillo verde claro */
     color: #333;
     /* Texto oscuro */
     font-size: 28px;
     /* Tamaño de fuente reducido */
     padding: 10px;
     /* Ajusta el relleno */
     border-radius: 10px;
     /* Borde redondeado */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     font-family: 'Times New Roman', Times, serif;
 }
 
 .modulo9 {
     background-color: #FFD700;
     /* Amarillo dorado */
     color: #333;
     /* Texto oscuro */
     font-size: 28px;
     /* Tamaño de fuente reducido */
     padding: 10px;
     /* Ajusta el relleno */
     border-radius: 10px;
     /* Borde redondeado */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     font-family: 'Times New Roman', Times, serif;
 }
 
 .modulo10 {
     background-color: #20B2AA;
     /* Azul intenso */
     color: #333;
     /* Texto oscuro */
     font-size: 28px;
     /* Tamaño de fuente reducido */
     padding: 10px;
     /* Ajusta el relleno */
     border-radius: 10px;
     /* Borde redondeado */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     font-family: 'Times New Roman', Times, serif;
 }
 
 .carrer-list li:hover {
     background-color: #c6dbe7;
     /* Cambia a rosa intenso al pasar el mouse */
     transform: scale(1.05);
     /* Hace que el elemento se agrande al pasar el mouse */
 }
 /* Estilos específicos para pantallas pequeñas */
 
 @media screen and (max-width: 100px) and (max-height: 653px) {
     .modulo1,
     .modulo2,
     .modulo3,
     .modulo4,
     .modulo5,
     .modulo6,
     .modulo7,
     .modulo8,
     .modulo9,
     .modulo10 {
         font-size: 14px;
         /* Tamaño de fuente reducido aún más */
         padding: 5px;
         /* Ajusta el relleno */
         border-radius: 3px;
         /* Borde redondeado */
     }
 }
 /* Estilos específicos para pantallas medianas (hasta 360x812) */
 
 @media screen and (max-width: 654px) and (max-height: 800px) {
     .modulo1,
     .modulo2,
     .modulo3,
     .modulo4,
     .modulo5,
     .modulo6,
     .modulo7,
     .modulo8,
     .modulo9,
     .modulo10 {
         font-size: 14px;
         /* Tamaño de fuente reducido aún más */
         padding: 5px;
         /* Ajusta el relleno */
         border-radius: 3px;
         /* Borde redondeado */
     }
 }
 /* Estilos específicos para pantallas más grandes (hasta 375x812) */
 
 @media screen and (max-width: 800px) and (max-height: 950px) {
     .modulo1,
     .modulo2,
     .modulo3,
     .modulo4,
     .modulo5,
     .modulo6,
     .modulo7,
     .modulo8,
     .modulo9,
     .modulo10 {
         font-size: 14px;
         /* Tamaño de fuente reducido aún más */
         padding: 5px;
         /* Ajusta el relleno */
         border-radius: 3px;
         /* Borde redondeado */
     }
 }
 /* Estilo común para todos los módulos */
 
 .tarjeta {
     text-align: center;
     transition: transform 0.2s ease-in-out, background-color 0.2s;
     cursor: pointer;
     margin: 10px;
     width: calc(45% - 20px);
     line-height: 1.4;
 }
 /* Estilos para la lista de carreras */
 
 .carrer-list {
     list-style: none;
     padding: 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
 }
 /* Estilos para el contenedor principal */
 
 .container {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     border-radius: 5px;
     border: 1px solid #333;
     /* Borde más delgado */
     padding: 5px;
     background-color: white;
     /* Añadir un relleno interno para separar el contenido del borde */
 }
 /* Estilos para las cartas (secciones) */
 
 .carta {
     border: 1px solid #333;
     /* Borde más delgado */
     border-radius: 10px;
     margin: 10px 0;
     /* Espacio entre cartas */
     padding: 5px;
     /* Añadir un relleno interno para separar el contenido del borde */
 }
 /* Estilos para los títulos de sección */
 
 .carta h3 {
     font-size: 28px;
     color: #333;
     margin-bottom: 10px;
     font-family: cursive;
 }
 /* Estilos para la lista de características */
 
 ul.carrer-lis {
     list-style-type: none;
     padding-left: 20px;
     text-align: left;
     font-family: cursive;
 }
 /* Estilos para los elementos de la lista de características */
 
 ul.carrer-lis li {
     font-size: 16px;
     margin-bottom: 10px;
     color: #555;
 }
 /* Estilos generales para el footer */
 
 .containe {
     /* Estilos para el contenedor principal */
     width: 100%;
     /* Ancho completo del contenedor */
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
     border-radius: 5px;
     border: 1px solid #333;
 }
 
 .galeria {
     width: 70%;
     margin: 0;
     list-style: none;
     padding: 30px;
     box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     /* background-image: url(imagenes/comida.jpg);
/* Ajustes para que el fondo ocupe todo el contenedor y se vea más grande */
     background-image: url(imagenes/esti5.jpg);
     background-position: center;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     opacity: 0.9;
 }
 
 .galeria img {
     margin: 5px;
     width: 300px;
     height: 300px;
     object-fit: cover;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease-in-out;
 }
 
 .galeria-row {
     display: flex;
     justify-content: space-around;
     margin-bottom: 20px;
 }
 
 .galeria-row li {
     flex: 1;
     margin: 0;
 }
 
 img:hover {
     transform: scale(1.05);
     /* Aumenta el tamaño al pasar el cursor */
 }
 
 @media screen and (max-width: 768px) {
     .galeria img {
         width: 200px;
         height: 200px;
         border-radius: 8px;
         /* Bordes redondeados */
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         /* Sombra suave */
         transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
         margin: 0 auto;
         /* Centrar horizontalmente */
         display: block;
         /* Convertir en bloque para aplicar margen automáticamente */
     }
     .galeria img:hover {
         transform: scale(1.05);
         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
         background-color: #f0f0f0;
         /* Fondo más claro al pasar el mouse */
     }
 }
 /* Media query para 576px */
 
 @media screen and (max-width: 576px) {
     .galeria img {
         width: 150px;
         height: 150px;
         border-radius: 6px;
         /* Bordes redondeados */
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
         /* Sombra suave */
         transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
         margin: 0 auto;
         /* Centrar horizontalmente */
         display: block;
         padding: 15px;
         /* Convertir en bloque para aplicar margen automáticamente */
     }
     .galeria img:hover {
         transform: scale(1.05);
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
         background-color: #f0f0f0;
         /* Fondo más claro al pasar el mouse */
     }
 }
 
 .footer {
     background-color: #0a0a0a;
     color: #fff;
     padding: 20px 0;
     text-align: center;
 }
 
 .footer-container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     /* Permite que los elementos se envuelvan en pantallas pequeñas */
 }
 /* Estilos para el logo y la dirección */
 
 .footer__logo {
     font-size: 40px;
     margin: 0;
     font-weight: bold;
     color: #a89c88;
 }
 
 .footer__addr {
     font-size: 40px;
     margin-right: 20px;
 }
 
 .footer__title {
     font-size: 35px;
     margin: 15px 0;
     font-weight: bold;
     color: #ff9900;
     text-align: center;
 }
 
 .whatsapp-icon {
     font-size: 35px;
     /* Tamaño del ícono */
     color: #25D366;
     /* Color del ícono de WhatsApp */
 }
 
 .facebook-icon {
     font-size: 35px;
     /* Tamaño del ícono */
     color: #3b5998;
     /* Color del ícono de Facebook */
 }
 
 .footer__social a:hover {
     background-color: #b15a45;
     cursor: pointer;
 }
 
 .button-link {
     color: #ec954e;
     text-decoration: none;
     font-size: 50px;
     border: 2px solid #ec954e;
     padding: 10px 20px;
     border-radius: 5px;
     display: inline-block;
     transition: background-color 0.3s ease;
 }
 
 .button-link:hover {
     background-color: #ec954e;
     color: #fff;
     cursor: pointer;
 }
 
 .footer {
     background-color: #0a0a0a;
     color: #fff;
     padding: 20px 0;
     text-align: center;
 }
 
 .footer-container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     /* Permite que los elementos se envuelvan en pantallas pequeñas */
 }
 /* Estilos para el logo y la dirección */
 
 .footer__logo {
     font-size: 40px;
     margin: 0;
     font-weight: bold;
     color: #a89c88;
 }
 
 .footer__addr {
     font-size: 40px;
     margin-right: 20px;
 }
 
 .footer__title {
     font-size: 35px;
     margin: 15px 0;
     font-weight: bold;
     color: #ff9900;
     text-align: center;
 }
 
 .footer__addr a {
     color: #ec954e;
     text-decoration: none;
     font-size: 30px;
 }
 /* Estilos para redes sociales */
 
 .footer__social {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-top: 20px;
 }
 /* Establece el espacio horizontal entre los enlaces a cero para que estén lado a lado */
 
 .footer__social a {
     color: #fff;
     text-decoration: none;
     font-size: 20px;
     font-weight: bold;
     background-color: rgb(14, 14, 15);
     color: rgb(229, 231, 225);
     padding: 10px 20px;
     text-align: center;
     cursor: pointer;
     transition: background-color 0.3s ease;
     margin: 0 5px;
 }
 
 .footer__social a:hover {
     background-color: #b15a45;
     cursor: pointer;
 }
 
 .button-link {
     color: #ec954e;
     text-decoration: none;
     font-size: 50px;
     border: 2px solid #ec954e;
     padding: 10px 20px;
     border-radius: 5px;
     display: inline-block;
     transition: background-color 0.3s ease;
 }
 
 .button-link:hover {
     background-color: #ec954e;
     color: #fff;
     cursor: pointer;
 }
 
 @media screen and (max-width: 720px) {
     .footer__logo,
     .footer__addr,
     .footer__title,
     .footer__addr a {
         font-size: 18px;
     }
     .footer-container {
         flex-direction: column;
         justify-content: center;
     }
     .footer__social a {
         padding: 10px 15px;
         flex-direction: column;
     }
     .footer__logo h1 {
         font-size: 25px;
     }
     .footer__title {
         font-size: 19px;
     }
     .footer__addr {
         font-size: 14px;
         margin-right: 0;
     }
 }
 /* Consulta de medios para 320px */
 
 @media screen and (max-width: 320px) {
     .footer__logo h1,
     .footer__addr,
     .footer__title,
     .button-link,
     .footer__social a {
         font-size: 14px;
         text-align: center;
         margin-top: 5px;
     }
     .footer__social a {
         background-color: #333;
         color: #fff;
         padding: 5px 10px;
         border-radius: 5px;
     }
 }