/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.3s ease-out; /* Transición global para suavizar cambios */
}

/* Importación de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* BODY */
body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    color: #2c3e50;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- SECCIÓN PRINCIPAL: Encabezado (main-header) --- */
/* NOTA: Este .main-header parece no usarse en tu HTML actual, pero lo mantengo por si es para otras páginas */

/* --- SECCIÓN BANNER LOGO SUPERIOR (banner-logo) --- */
/* --- Estilos del Banner Contenedor Principal (.banner-logo) --- */
/* -------- HEADER (Contenedor Principal) -------- */
.banner-logo {
    background: linear-gradient(135deg, #4b941e, #e7fb73 100%);
    /* El padding determina la altura del banner */
    padding: 25px 0; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 100;
    
    /* FUNDAMENTAL: Punto de referencia para el posicionamiento absoluto del título */
    position: relative; 
    
    /* Agregamos padding-left para el espacio del logo */
    padding-left: 30px; 
    padding-right: 30px; 
    
    /* Nota: Se asume que el HTML contiene el logo y el texto como hermanos */
    /* Ejemplo HTML: <div class="banner-logo"><img class="logo-banner" ...><div class="banner-titulo">SECCIÓN...</div></div> */
}

/* --- Logo (Se queda en el flujo normal a la izquierda) --- */
.logo-banner {
    width: 150px;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(9, 182, 239, 0.2), 0 6px 15px rgba(0, 0, 0, 0.4);
    
    /* Posicionamiento relativo para que el logo se mantenga sobre el texto si se superponen */
    position: relative; 
    z-index: 2; /* Para que el logo siempre esté por encima del texto (z-index: 1) */
    
    /* Necesitamos un 'display: block' o 'inline-block' si el logo no es una imagen, 
       pero si es una imagen (que es inline por defecto), funciona bien */
    display: inline-block; 
    
    /* Importante: Mueve el logo visualmente arriba si el texto absoluto lo hubiera movido */
    /* Aunque si el texto es absoluto y el logo es el primer elemento, no debería ser necesario */
}


/* --- Título (SECCIÓN 19 SAN LUIS POTOSÍ) --- */
.banner-titulo {
    /* *** SOLUCIÓN CLAVE: Centrado absoluto en el banner *** */
    position: absolute;
    
    /* Centrado horizontal y vertical perfecto */
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    
    /* El z-index: 1 lo pone justo debajo del logo */
    z-index: 1;
    
    /* Estilos del texto */
    font-size: 1.5em; 
    font-weight: bold;
    color: #000;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); 
    
    /* Asegura que el texto se centre dentro de su propio contenedor */
    text-align: center;
    
    /* Limita el ancho para que el texto NO se superponga con el logo al reducir la pantalla. 
       Aproximadamente: 100% - (ancho del logo + padding horizontal) */
    max-width: calc(100% - 200px); 
}

/* Estilos para el H1 dentro del contenedor del título (Si aplica) */
.banner-titulo h1 {
    margin: 0;
    font-size: inherit; /* Hereda el tamaño del contenedor si usas H1 */
    color: inherit;
    /*... otros estilos ...*/
}

.logo-banner:hover {
    transform: scale(1.1);
    cursor: pointer;
}
.page-intro {
    /* Fondo con un degradado sutil y un efecto "cristal" */
    background: linear-gradient(135deg, rgba(15, 255, 91, 0.95) 0%, rgba(240, 240, 240, 0.85) 100%);
    backdrop-filter: blur(10px); /* Efecto de desenfoque de fondo (como cristal esmerilado) */
    -webkit-backdrop-filter: blur(10px); /* Para compatibilidad con Safari */

    border: 2px solid rgba(255, 255, 255, 0.7); /* Borde blanco translúcido, más grueso */
    border-radius: 20px; /* Bordes mucho más redondeados para suavidad */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25), /* Sombra principal más profunda */
                0 0 0 8px rgba(0, 0, 0, 0.05); /* Sombra adicional para un efecto "flotante" */
    
    padding: 50px 60px; /* Espaciado interno generoso para un look premium */
    text-align: center; /* Centra el texto */

    /* ***** CAMBIOS AQUÍ PARA HACERLO MÁS ANCHO ***** */
    width: 100%; /* ¡Ahora ocupa el 95% del ancho de su contenedor! */
    max-width: 5500px; /* Le ponemos un límite máximo para que no sea excesivamente ancho en monitores gigantes */
    /* ********************************************** */

    margin: 20px auto; /* Centra el cuadro horizontalmente y le da más margen superior/inferior */
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    /* Efecto de "levitar" sutil al cargar la página */
    animation: fadeInScaleUp 4.2s ease-out forwards; 
    transition: transform 0.9s ease-out, box-shadow 0.3s ease-out; /* Transición para el hover */
}

/* Efecto al pasar el ratón por encima */
.page-intro:hover {
    transform: translateY(-10px) scale(1.005); /* Se eleva y se agranda muy ligeramente */
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.35),
                0 0 0 12px rgba(0, 0, 0, 0.08); /* Sombra más intensa al interactuar */
}

/* --- Título H2: Moderno y con brillo (sin cambios, ya era perfecto) --- */
.page-intro h2 {
    font-size: 3.5rem; /* ¡Más grande y llamativo! */
    font-family: 'Montserrat', sans-serif; /* Sugerencia de fuente moderna y elegante */
    
    /* Degradado de texto para un efecto moderno */
    background: linear-gradient(45deg, #0e0e0e, #0e0e0e); /* Azul eléctrico a cian */
    -webkit-background-clip: text; /* Clip de fondo al texto */
    -webkit-text-fill-color: transparent; /* Hace que el texto sea transparente para ver el degradado */
    
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px; /* Un poco más de espacio para la legibilidad del tamaño grande */
    font-weight: 500; /* Extra negrita para máxima presencia */

    /* Sombra de texto para un efecto "glow" sutil */
    text-shadow: 0 0 15px #49f48a66, /* Sombra azul para brillo */
                 0 0 25px rgba(9, 255, 9, 0.2); /* Sombra cian más extendida */

    position: relative; /* Necesario para el pseudo-elemento */
    padding-bottom: 15px; /* Espacio para la línea de abajo */
}

/* Línea animada debajo del título */
.page-intro h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px; /* Ancho de la línea */
    height: 5px; /* Grosor de la línea */
    background: linear-gradient(90deg, #28a745, #8cdce8); /* Degradado verde a azul para la línea */
    border-radius: 300px;
    animation: expandLine 1.5s ease-out forwards; /* Animación de aparición */
}

.video-box h3 {
    text-align: center;
    font-size: 2.2rem; /* Un poco más pequeño que el h2 principal, pero aún grande */
    font-family: 'Montserrat', sans-serif; /* Mismo tipo de fuente */
    
    /* Degradado de texto para un efecto moderno (puedes ajustar los colores) */
    
    -webkit-text-fill-color: fuchsia;
    
    margin: 15px 0 10px; /* Mantén el margen original o ajústalo */
    text-transform: uppercase;
    letter-spacing: 1.2px; /* Un poco menos espaciado que el h2 principal */
    font-weight: 700; /* Negrita */

    /* Sombra de texto para un efecto "glow" sutil */
    text-shadow: 0 0 10px rgba(19, 19, 19, 0.3), /* Sombra cian */
                 0 0 20px rgba(19, 19, 19, 0.15); /* Sombra azul */

    position: relative; /* Necesario para la línea ::after */
    padding-bottom: 10px; /* Espacio para la línea */
}

/* Línea animada debajo del título del video */
.video-box h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 40px; /* Línea más corta para un título más pequeño */
    height: 3px; /* Más delgada que la principal */
    background: linear-gradient(90deg, #17a2b8, #28a745); /* Mismo degradado o uno similar */
    border-radius: 2px;
    animation: expandLine 1s ease-out forwards; /* Animación de aparición, quizás un poco más rápida */
}
/* --- Animaciones (mantienen las que ya tenías) --- */
@keyframes fadeInScaleUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes expandLine {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 60px; /* Asegúrate de que coincida con el width en ::after */
        opacity: 1;
    }
}
/* Texto dentro del banner-logo */
.banner-texto {
    position: absolute; /* CLAVE: Saca el texto del flujo normal y lo centra en el padre */
    top: 40%; /* Lo alinea verticalmente al centro del banner */
    left: 50%; /* Lo alinea horizontalmente al centro del banner */
    transform: translate(-50%, -50%); /* Ajusta el 50% para que el centro del texto coincida con el centro del banner */
    width: calc(100% - 250px); /* Ajusta el ancho para que no se superponga con el logo y tenga espacio a la derecha */
    max-width: 900px; /* Ancho máximo para que el texto no sea demasiado largo en pantallas muy grandes */
    text-align: center; /* Centra el contenido del texto dentro de su propio bloque */
    color: #fff;
    z-index: 1; /* Asegura que el texto esté por debajo del logo */
    word-break: break-word;
    hyphens: auto;
}

.banner-texto h1 {
    font-size: 2.2rem;
    margin-bottom: 5px;
    color: #080808;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    font-weight: 500;
    letter-spacing: -0.5px;
}
.banner-texto h2 {
    font-size: 2.2rem;
    margin-bottom: 5px;
    color: #080808;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    font-weight: 500;
    letter-spacing: -0.5px;
}

.banner-texto p {
    font-size: 1rem;
    font-weight: 300;
    color: #f60303;
    opacity: 1.95;
    word-break: break-word;
    hyphens: auto;
}

/* --- NAVEGACIÓN (nav-bar) --- */
.nav-bar {
    display: flex;
    justify-content: center;
    gap: 25px;
    background: linear-gradient(100deg, #fbfbfb, #eac368  100%);
    padding: 18px 0;
    flex-wrap: wrap;
    box-shadow: 0 6px 20px rgba(248, 126, 126, 0.3);
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 90;
    border-radius: 0 0 18px 18px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.nav-bar a {
    color: #020202;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    font-family: 'Poppins', sans-serif;
    padding: 12px 25px;
    border-radius: 30px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

/* Efecto de línea inferior al pasar el ratón o estar activo */
.nav-bar a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #0390ee, #009eed);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(-50%);
}

.nav-bar a:hover::after,
.nav-bar a.active::after {
    width: calc(100% - 15px);
    left: 50%;
}

/* Estilos al pasar el ratón o estar activo */
.nav-bar a:hover,
.nav-bar a.active {
    background-color: rgba(174, 247, 247, 0.2);
    color: #62f362;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(239, 238, 238, 0.4);
    border: 1px solid rgba(52, 152, 219, 0.5);
}

/* --- SECCIÓN CON IMÁGEN DE FONDO (seccion-info) --- */
.seccion-info {
    background-image: url('../img/teatro.jpg');
    background-size: cover;
    background-position: center;
    padding: 380px 20px;
    text-align: center;
    position: relative;
    margin-bottom: 40px;
    overflow: hidden;
    animation: fadeIn 3s ease-out forwards;
}

.seccion-info::before { /* Overlay oscuro principal para resaltar texto y logo */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.seccion-info::after { /* Efecto de brillo/shimmer */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(254, 254, 254, 0.08) 0%, transparent 40%),
                radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
    z-index: 2;
    pointer-events: none;
    animation: shimmer 10s infinite linear;
}

.seccion-info h1,
.seccion-info h2 {
    font-size: 3.2rem;
    position: relative;
    z-index: 3;
    color: #eeebeb;
    text-shadow: 3px 3px 8px rgba(7, 248, 140, 0.9);
    font-weight: 700;
    opacity: 1;
    animation: slideInUp 2s ease-out forwards;
    animation-delay: 0.5s;
}

/* Logo en la esquina inferior izquierda de la sección de fondo */
.logo-seccion-info {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: 130px;
    height: auto;
    z-index: 4;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(235, 233, 233, 0.7), 0 0 0 6px #8cff8c;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease-out;
    opacity: 1;
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 1s;
}

.logo-seccion-info:hover {
    transform: scale(1.12) rotate(5deg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 0 8px #66ff66;
}
/* Estilos para el contenedor del video y los controles */
.video-container {
    position: relative; /* Necesario para posicionar los controles absolutos */
    width: 100%; /* Ajusta según tu diseño */
    padding-bottom: 40.25%; /* Relación de aspecto 16:9 (altura / ancho) */
    height: 0;
    overflow: hidden; /* Asegura que los videos no se desborden */
    background-color: #000; /* Fondo negro mientras carga el video */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para que el video cubra todo el espacio */
}

.video-controls {
    position: absolute;
    bottom: 10px; /* Posiciona los controles en la parte inferior */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(247, 241, 241, 0.6); /* Fondo semitransparente para los controles */
    padding: 10px 15px;
    border-radius: 8px;
    display: flex;
    gap: 10px; /* Espacio entre los botones */
    z-index: 2; /* Asegura que los controles estén por encima del video */
}

.video-control-btn {
    background: none;
    border: none;
    color: rgb(255, 4, 4);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

.video-control-btn:hover {
    color: #007bff; /* Color al pasar el ratón */
}

/* Estilos específicos para iconos de Font Awesome */
 
/* --- CONTENEDOR GENERAL DE SECCIONES (container) --- */
.container {
    width: 98vw;
    max-width: 1900px;
    margin: 30px auto 80px auto;
    padding-top: 30px;
    position: relative;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
    transition: all 0.3s ease-in-out;
}

/* --- SECCIONES DENTRO DE .container (Noticias y Quiénes Somos) --- */
/* Misión y Visión en una fila */
.mision-vision {
    display: flex;
    justify-content: space-between;
    gap: 60px; /* Más espacio entre Misión y Visión */
    width: 95%;
    margin: 50px auto; /* Margen consistente */
    animation: fadeIn 3s ease-out forwards; /* Animación de aparición */
}

.mision, .vision {
    flex: 1 1 48%;
    background-color: #e8f5e9; /* Un verde muy pálido para el fondo */
    padding: 30px; /* Más padding */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Sombra más definida */
    border-left: 10px solid #4CAF50; /* Borde lateral más robusto */
    transition: all 0.4s ease-out; /* Transición para efectos de hover */
}

.mision:hover, .vision:hover {
    transform: translateY(-5px); /* Pequeña elevación al hover */
    box-shadow: 0 100px 100px rgba(0, 0, 0, 0); /* Sombra más pronunciada al hover */
    background-color: #99ffc3; /* Fondo ligeramente más claro al hover */
}

.mision h2, .vision h2 {
    color: #030303;
    font-size: 1.8rem; /* Títulos más grandes */
    margin-bottom: 15px; /* Más espacio bajo el título */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(46, 125, 96, 0.2); /* Línea de separación sutil */
    padding-bottom: 10px;
}

/* --- NUEVA SECCIÓN: Nuestros Valores Banner --- */
.nuestros-valores-banner {
    background-image: url('../img/valores.jpeg'); /* ¡CAMBIA ESTA RUTA A TU IMAGEN! */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 550px; /* Ligeramente más alto para impacto */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: #000000;
    text-align: center;
    margin-top: 50px; /* Margen consistente */
    margin-bottom: 50px; /* Margen consistente */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* Sombra más pronunciada y suave */
    border-radius: 15px; /* Bordes redondeados para el banner */
    overflow: hidden; /* Asegura que la imagen se vea bien dentro del radio */
    border: 2px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
}

.nuestros-valores-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(196, 221, 71, 0.8); /* Verde más oscuro y opaco */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Efecto de degradado suave sobre el overlay para más profundidad */
    background: linear-gradient(180deg, rgba(0, 128, 0, 0.75), rgba(0, 80, 0, 0.9));
}

.nuestros-valores-banner h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 6rem; /* Título mucho más grande e impactante */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 35px; /* Más espacio */
    text-shadow: 30px 30px 80px rgba(0, 0, 0, 0.6); /* Sombra más dramática */
    letter-spacing: -1px; /* Letras un poco más juntas para un look moderno */
    animation: fadeIn 1s ease-out forwards;
}

.valores-list {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Más espacio entre las filas de valores */
}

.valores-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #fffefe;
    font-size: 1.6rem; /* Valores un poco más grandes */
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Sombra sutil en los valores */
}

.valores-list li {
    position: relative;
    padding: 0 20px; /* Más espacio a los lados */
    white-space: nowrap;
    /* Añadir animación de brillo sutil o aparecer */
    animation: slideInUp 0.9s ease-out forwards; /* Cada valor aparecerá */
    opacity: 0; /* Inicialmente oculto para la animación */
}

/* Retraso de animación para cada elemento li */
.valores-list li:nth-child(1) { animation-delay: 0.1s; }
.valores-list li:nth-child(2) { animation-delay: 0.3s; }
.valores-list li:nth-child(3) { animation-delay: 0.5s; }
.valores-list li:nth-child(4) { animation-delay: 0.7s; }
.valores-list li:nth-child(5) { animation-delay: 0.9s; }
.valores-list li:nth-child(6) { animation-delay: 1.0s; }
/* Añadir más si tienes más valores */

/* Separador de punto central */
.valores-list li:not(:last-child)::after {
    content: '•';
    position: absolute;
    right: -7px; /* Ajusta la posición */
    color: rgba(255, 255, 255, 0.7); /* Punto ligeramente transparente */
    font-size: 1.6rem;
}

/* ======================================================= */
/* ESTILOS AVANZADOS PARA EL RECUADRO DE DESCRIPCIÓN (clase 'valores1') */
/* ======================================================= */
.valores1 {
    /* Fondo: Degradado suave para un aspecto moderno */
    background: linear-gradient(135deg, #f8f8f8, #e8f5e9); /* De gris muy claro a verde pálido */
    padding: 45px 60px; /* Más padding para un respiro visual */
    margin: 60px auto; /* Centrado y con más espacio vertical */
    max-width: 95%; /* Se extiende casi todo el ancho de la pantalla */
    border-radius: 15px; /* Bordes ligeramente más redondeados */

    /* Sombra más sofisticada */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra más grande y difusa */

    /* Borde sutil */
    border: 1px solid rgba(0, 0, 0, 0.08); /* Borde muy fino y casi invisible */

    /* Transición general para todos los efectos */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición más suave y con "rebote" */

    text-align: center; /* Centra el contenido del recuadro */

    /* Animación de entrada (opcional, pero da un toque avanzado) */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInSlideUp 0.8s forwards ease-out;
    animation-delay: 0.2s; /* Un pequeño retraso para que aparezca después del contenido principal */
}

/* Efecto al pasar el ratón (hover) - más pronunciado */
.valores1:hover {
    transform: translateY(-8px); /* Elevación más notoria */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Sombra mucho más intensa */
    border-color: #4CAF50; /* Un borde verde primario al pasar el ratón */
    background: linear-gradient(135deg, #f0fff0, #d9ead3); /* Degradado más claro al hover */
}

/* Estilos para el H1 con el texto largo */
.valores1 h1 {
    font-family: 'Roboto', sans-serif; /* Fuente legible */
    font-size: 1.25rem; /* Tamaño de fuente ligeramente más grande para impacto */
    color: #333; /* Color de texto oscuro para alto contraste */
    line-height: 1.8; /* Mayor espacio entre líneas para mejor lectura */
    max-width: 90%; /* Limita el ancho del texto para evitar líneas demasiado largas */
    margin: 0 auto; /* Centra el bloque de texto */
    text-align: center; /* Texto alineado al centro */
    font-weight: 700; /* Negrita más fuerte para destacar */
    letter-spacing: 0.5px; /* Ligeramente más espaciado entre letras */
    text-transform: uppercase; /* Todo en mayúsculas */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05); /* Sombra de texto un poco más visible */
}

/* Animación de entrada */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MEDIA QUERIES PARA RESPONSIVIDAD (ajustadas para el nuevo diseño) */
@media (max-width: 992px) {
    .valores1 {
        padding: 40px 50px;
        margin: 50px auto;
        max-width: 90%; /* Ajuste para que no sea demasiado ancho en tablets */
    }
    .valores1 h1 {
        font-size: 1.15rem;
        line-height: 1.7;
    }
}

@media (max-width: 768px) {
    .valores1 {
        padding: 30px 35px;
        margin: 40px auto;
        border-radius: 10px;
    }
    .valores1 h1 {
        font-size: 1.05rem;
        line-height: 1.6;
        max-width: 95%; /* Permite que el texto ocupe más espacio en móviles */
    }

    /* Ajustes generales para secciones en móviles grandes */
    .mision-vision {
        flex-direction: column; /* Apilar elementos */
        gap: 30px;
        margin: 40px auto;
        padding: 25px;
    }
    .mision, .vision {
        flex: 1 1 100%; /* Ocupar todo el ancho */
        max-width: 100%; /* Asegura que ocupe el ancho completo */
    }

    .nuestros-valores-banner {
        height: auto;
        padding: 50px 0;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .nuestros-valores-overlay {
        justify-content: flex-start;
    }
    .nuestros-valores-banner h2 {
        font-size: 2.5rem;
        margin-bottom: 20px;
        line-height: 1.2;
    }
    .valores-list {
        gap: 12px;
        padding: 0 20px;
    }
    .valores-list ul {
        font-size: 1.1rem;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }
    .valores-list li {
        padding: 0;
        white-space: normal;
        text-align: center;
    }
    .valores-list li:not(:last-child)::after {
        content: none; /* Eliminar el punto en móviles para evitar superposición */
    }
}

/* Ajustes para móviles pequeños */
@media (max-width: 480px) {
    .valores1 {
        padding: 25px 25px;
        margin: 30px auto;
        max-width: 95%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    .valores1:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    }
    .valores1 h1 {
        font-size: 0.95rem;
        line-height: 1.5;
        font-weight: 700;
    }

    .nuestros-valores-banner h2 {
        font-size: 1.8rem;
    }
    .valores-list ul {
        font-size: 0.95rem;
        gap: 5px;
    }
}

/* --- BANNER DE IMÁGENES ROTATIVO (CARRUSEL) (image-carousel-container) --- */
.image-carousel-container {
    width: 100%;
    max-width: none;
    margin: 50px 0;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    background-color: #ffffff;
    padding: 380px 20px;
    animation: fadeIn 1s ease-out forwards;
}

.image-carousel-container::before { /* Overlay oscuro principal */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.image-carousel-container::after { /* Efecto de brillo/shimmer */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
                radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
    z-index: 2;
    pointer-events: none;
    animation: shimmer 10s infinite linear;
}

.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
    display: none;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.carousel-image.active {
    display: block;
    opacity: 1;
}

/* --- NUEVO BANNER SLIDER (my-unique-banner-slider) --- */
.my-unique-banner-slider {
    position: relative;
    width: 95vw;
    max-width: 2020px;
    height: 40vh;
    min-height: 400px;
    margin: 40px auto;
    overflow: hidden;
      border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra del slider más suave */
    background-color: #f0f2f5;
}

.my-unique-banner-track {
    display: flex;
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    width: fit-content;
}

.my-unique-banner-track img {
    width: 100%; /* <-- Esto es lo más importante para corregir el recorte */
    flex-shrink: 0;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Considera quitar el border-radius aquí si el slider ya lo tiene y las imágenes llenan todo */
    /* border-radius: 18px; */
}

.my-unique-banner-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4); /* Opacidad reducida para el fondo del botón */
    color: white;
    border: none;
    padding: 25px 35px;
    cursor: pointer;
    font-size: 3.5rem;
    border-radius: 50%;
    opacity: 0.9;
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra del botón más ligera */
}

.my-unique-banner-button:hover {
    background-color: rgba(0, 0, 0, 0.6); /* Opacidad reducida al pasar el ratón */
    opacity: 1;
    transform: translateY(-50%) scale(1.15);
}

.my-unique-prev-button {
    left: 30px;
}

.my-unique-next-button {
    right: 30px;
}

.my-unique-banner-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 15;
}

.my-unique-banner-dots .dot {
    width: 16px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    border: 2px solid rgba(0, 0, 0, 0.15);
}

.my-unique-banner-dots .dot.active {
    background-color: #2980b9;
    transform: scale(1.4);
    border-color: #2c3e50;
}

/* ================================================================ */
/* ===================== ESTILOS DEL FOOTER PROFESIONAL ============ */
/* ================================================================ */
.footer {
    width: 100%;
    background: linear-gradient(135deg, #4b941e, #e7fb73 );
    color: #121212;
    padding: 60px 0;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.footer-contenido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
}

.footer-seccion {
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.footer-seccion:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.footer h3,
.footer h4 {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 2px solid #5ed2f7;
    padding-bottom: 12px;
    letter-spacing: 0.5px;
}

.footer .sub-logo {
    text-align: left;
}

.footer .sub-logo p {
    font-size: 0.9em;
    line-height: 1.7;
    color: #121212;
    margin-bottom: 20px;
}

.imagen {
    text-align: center;
    padding-top: 10px;
}

.imagen img {
    max-width: 150px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

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

.footer-link,
.footer-social-link {
    display: block;
    text-decoration: none;
    color: #000000;
    margin-bottom: 12px;
    font-size: 0.95em;
    font-weight: 400;
    transition: color 0.3s ease, transform 0.3s ease;
    padding-left: 5px;
}

.footer-link:hover,
.footer-social-link:hover {
    color: #42565c;
    transform: translateX(8px);
}

.preguntas-freq ul,
.datos-gnr ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.preguntas-freq li,
.datos-gnr li {
    margin-bottom: 12px;
}

.info-contact .box p {
    margin: 8px 0;
    color: #19191a;
    font-size: 0.9em;
}

.redes-soc {
    display: flex;
    gap: 18px;
    margin-top: 25px;
    justify-content: flex-start;
}

.redes-soc .footer-social-link {
    font-size: 1.8em;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(240, 240, 240, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.redes-soc .footer-social-link:hover {
    background-color: #ffffff;
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.footer-bottom {
    text-align: center;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.8em;
    color: #000000;
    letter-spacing: 0.3px;
}
/* Asume que tu imagen dentro del banner tiene una clase como 'banner-image' o similar */

/* === MEDIA QUERIES === */

/* Para pantallas grandes (desktops) */
@media (min-width: 1600px) {
    .my-unique-banner-slider {
        height: 80vh;
        max-width: 2500px;
    }
}

/* Para pantallas medianas (portátiles grandes) */
@media (max-width: 1200px) {
    .my-unique-banner-slider {
        height: 60vh;
    }
    .my-unique-banner-button {
        padding: 20px 28px;
        font-size: 2.8rem;
    }
    .my-unique-prev-button { left: 20px; }
    .my-unique-next-button { right: 20px; }
    .my-unique-banner-dots { bottom: 25px; gap: 12px; }
    .my-unique-banner-dots .dot { width: 14px; height: 14px; }

    /* Ajustes para el banner superior */
    .logo-banner {
        width: 120px; /* Reduce el logo un poco más */
        margin-right: 20px;
    }
    .banner-texto {
        font-size: 0.9rem; /* Reduce el tamaño del subtítulo */
        width: calc(100% - 180px); /* Ajusta el ancho para el nuevo tamaño del logo */
    }
    .banner-texto h1 {
        font-size: 2rem; /* Reduce el tamaño del título */
    }
}

/* Para tabletas */
@media (max-width: 992px) {
    .nav-bar {
        gap: 20px;
        padding: 15px 0;
    }
    .nav-bar a {
        font-size: 1rem;
        padding: 10px 20px;
    }
    .footer-contenido {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
    }
    .container {
        flex-direction: column;
        width: 90vw;
        gap: 25px;
    }
    .container section {
        min-width: unset;
        width: 100%;
        padding: 35px 40px;
    }
    .container section h2 {
        font-size: 2rem;
    }
    .container section p {
        font-size: 1.2rem;
    }
    .my-unique-banner-slider {
        width: 98vw;
        height: 50vh;
        min-height: 300px;
        margin: 30px auto;
        border-radius: 12px;
    }
    .my-unique-banner-button {
        padding: 15px 22px;
        font-size: 2.2rem;
    }
    .my-unique-prev-button { left: 15px; }
    .my-unique-next-button { right: 15px; }
    .my-unique-banner-dots { bottom: 20px; gap: 10px; }
    .my-unique-banner-dots .dot { width: 12px; height: 12px; }

    /* Ajustes para el banner superior - CAMBIO IMPORTANTE: stacking en móviles/tabletas */
    .banner-logo {
        flex-direction: column; /* Apila el logo y el texto verticalmente */
        justify-content: center; /* Centra el contenido apilado */
        align-items: center; /* Centra horizontalmente los ítems apilados */
        padding: 20px 0; /* Ajusta el padding para la disposición vertical */
    }
    .logo-banner {
        width: 100px; /* Reduce el logo para tabletas */
        margin-right: 0; /* Elimina el margen a la derecha cuando se apila */
        margin-bottom: 15px; /* Espacio debajo del logo si se apilan */
    }
    .banner-texto {
        position: static; /* Vuelve a la posición normal en el flujo */
        transform: none; /* Elimina la transformación de centrado absoluto */
        width: 100%; /* Ocupa el 100% del ancho disponible */
        max-width: none; /* Elimina el max-width */
        text-align: center; /* Mantiene el texto centrado */
        padding: 0 15px; /* Añade un padding horizontal para que no se pegue a los bordes */
    }
    .banner-texto h1 {
        font-size: 1.8rem; /* Tamaño del título para tabletas */
    }
    .banner-texto p {
        font-size: 0.85rem; /* Tamaño del subtítulo para tabletas */
    }
}

/* Para móviles grandes */
@media (max-width: 768px) {
    .nav-bar {
        flex-direction: column;
        gap: 10px;
        padding: 15px 10px;
        border-radius: 0;
    }
    .nav-bar a {
        width: calc(100% - 20px);
        text-align: center;
        font-size: 1.1rem;
        padding: 12px 0;
    }
    .nav-bar a::after {
        width: 60%;
    }
    .footer-contenido {
        grid-template-columns: 1fr;
        padding: 0 25px;
    }
    .footer-seccion {
        text-align: center;
        padding: 20px;
    }
    .redes-soc {
        justify-content: center;
    }
    .footer h3,
    .footer h4 {
        margin-bottom: 15px;
    }
    .footer-bottom {
        margin-top: 40px;
        padding-top: 20px;
    }
    .my-unique-banner-slider {
        height: 40vh;
        min-height: 250px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }
    .my-unique-banner-button {
        padding: 12px 18px;
        font-size: 1.8rem;
    }

    /* Ajustes para el banner superior */
    .logo-banner {
        width: 90px; /* Un poco más pequeño para móviles */
        margin-bottom: 10px; /* Más pequeño para móviles */
    }
    .banner-texto h1 {
        font-size: 1.6rem; /* Ajusta el tamaño del título */
    }
    .banner-texto p {
        font-size: 0.8rem; /* Ajusta el tamaño del subtítulo */
    }
}

/* Para móviles pequeños */
@media (max-width: 576px) {
    .container {
        flex-direction: column;
        width: 95%;
        gap: 20px;
        margin: 20px auto;
    }
    .container section {
        min-width: unset;
        width: 100%;
        padding: 30px 20px;
    }
    .container section h2 {
        font-size: 1.8rem;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
    .container section h2::after {
        width: 40px;
    }
    .container section p {
        font-size: 1.1rem;
    }
    article h3 {
        font-size: 1.4rem;
    }
    article p {
        font-size: 1rem;
    }
    article p em {
        font-size: 0.9rem;
    }
    .footer {
        padding: 40px 0;
    }
    .footer-contenido {
        padding: 0 15px;
    }
    .footer-seccion {
        padding: 15px;
    }
    .redes-soc .footer-social-link {
        font-size: 1.6em;
        width: 44px;
        height: 44px;
    }
    .my-unique-banner-slider {
        height: 30vh;
        min-height: 180px;
        border-radius: 8px;
    }
    .my-unique-banner-button {
        padding: 10px 15px;
        font-size: 1.5rem;
        left: 8px;
        right: 8px;
    }
    .my-unique-banner-dots { bottom: 15px; gap: 8px;}
    .my-unique-banner-dots .dot { width: 10px; height: 10px; }

    /* Ajustes para el banner superior */
    .banner-logo {
        padding: 15px 0; /* Reduce el padding vertical del banner */
    }
    .logo-banner {
        width: 70px; /* Logo más pequeño aún */
        margin-bottom: 8px; /* Elimina margen si ya están muy juntos */
    }
    .banner-texto h1 {
        font-size: 1.4rem; /* Título más pequeño */
        margin-bottom: 3px;
    }
    .banner-texto p {
        font-size: 0.75rem; /* Subtítulo más pequeño */
    }
}

/* Pantallas grandes (escritorio) */
@media (min-width: 993px) {
    .container {
        width: 95vw;
        max-width: 1900px;
    }
    .container section {
        flex: 1 1 48%;
        min-width: 480px;
    }
}

/* Animaciones */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}
/* ======================================================= */
/* MEDIA QUERIES PARA RESPONSIVIDAD (CORRECCIÓN DE MENÚ MÓVIL) */
/* ======================================================= */
@media (max-width: 768px) {
    /* ... (El resto de tus estilos de secciones se mantienen iguales) ... */

    /*
     * CLAVE 1: CORRECCIÓN DEL NAV-BAR
     * Deshabilitamos el apilamiento de enlaces que estaba tapando la pantalla.
     */
    .nav-bar {
        /* Desactiva el centrado de los enlaces y la columna para que solo se vea el botón de menú */
        display: flex; 
        justify-content: flex-end; /* Mueve el botón de menú a la derecha */
        padding: 15px 20px; /* Ajusta el padding para que solo el botón quepa */
        position: sticky; /* Mantenemos el Fixed/Sticky si es necesario */
        top: 0;
        z-index: 90;
        border-radius: 0;
    }

    /*
     * CLAVE 2: ESTILOS PARA EL MENÚ HAMBURGUESA DESPLEGABLE
     * Ocultamos los enlaces por defecto y les damos un estilo de menú desplegable.
     */
    .nav-links {
        /* OCULTAMOS LOS ENLACES EN MÓVIL POR DEFECTO */
        display: none; 
        
        /* Hacemos que el menú caiga debajo del nav-bar */
        flex-direction: column;
        position: absolute; 
        top: 100%; /* Cae justo debajo del nav-bar */
        left: 0;
        width: 100%;
        
        /* SOLUCIÓN ANTI-OBSTRUCCIÓN: Máxima altura y Scroll interno */
        max-height: 80vh; /* Limita la altura del menú al 80% de la pantalla */
        overflow-y: auto; /* Permite scroll interno, NO tapa el contenido de abajo */
        
        /* Estilos visuales */
        background: #fff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        border-radius: 0 0 10px 10px;
        z-index: 80; /* Por debajo del header y el botón */
    }

    .nav-links.active {
        /* Se activa con JavaScript cuando el usuario presiona el botón */
        display: flex;
    }

    .nav-bar a {
        /* Estilos para los enlaces dentro del menú desplegable */
        width: 100%;
        text-align: left;
        padding: 15px 30px;
        border-radius: 0;
        /* Quitamos efectos de transform y sombra que no se ven bien en menú apilado */
        transform: none; 
        box-shadow: none; 
        border: none;
    }
    
    .nav-bar a:hover,
    .nav-bar a.active {
        transform: none; 
    }
    
    /* Mostrar el botón de hamburguesa */
    .menu-toggle {
        display: block; 
    }
    
    /* ------------------------------------------------------------------- */
    /* --- El resto de tus estilos de secciones (videos, contactos) aquí --- */
    /* ------------------------------------------------------------------- */
    
    /* Ajustes específicos para el banner-logo en móviles */
    .banner-logo {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15px 0;
    }
    .logo-banner {
        width: 90px;
        margin-right: 0;
        margin-bottom: 15px;
    }
    .banner-texto {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 0 15px;
    }
    .banner-texto h2 {
        font-size: 1.8rem;
    }
    .banner-texto p {
        font-size: 0.9rem;
    }
    
    /* ... (Continúa con el resto de tus media queries) ... */
}
banner-logo {
  background: linear-gradient(to right, #4CAF50, #C6E377);
  padding: 15px 20px;
}

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

.logo-banner {
  width: 90px;
  height: auto;
  border-radius: 50%;
}

.banner-texto h1 {
  font-size: 1.8rem;
  color: #000;
  text-align: center;
  margin: 0;
  font-weight: bold;
}

/* -------- NAV -------- */
.nav-bar {
  background: linear-gradient(to right, #fff, #f1c27d);
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-links a {
  color: #000;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: 0.3s;
  padding: 6px 10px;
  border-radius: 6px;
}

.nav-links a:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Botón hamburguesa */
.menu-toggle {
  display: none;
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #000;
  position: absolute;
  right: 15px;
}

/* -------- RESPONSIVO -------- */
@media (max-width: 768px) {
  .banner-contenido {
    flex-direction: column;
    text-align: center;
  }

  .banner-texto h1 {
    font-size: 1.3rem;
    line-height: 1.3;
  }

  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    width: 100%;
    padding: 15px;
    border-top: 2px solid #ccc;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    text-align: center;
    width: 100%;
  }
}