/* Hover solo en escritorio */
@media (min-width: 769px) {
    .header nav ul li:hover > ul {
        display: flex;
    }
    .header nav ul li.submenu > ul li.submenu:hover > ul {
        display: flex;
    }
}

@media screen and (max-width: 768px) {
    * {
        box-sizing: border-box;
    }

    /* -------------------------------------- */
    /* Estilos del Header para Móviles */
    /* -------------------------------------- */

    .header-content {
        padding: 15px 30px;
    }

    .menu-toggle {
        display: block;
    }

    .header nav {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    }

    .header nav ul {
        flex-direction: column;
        gap: 0;
    }

    .header nav ul li {
        width: 100%;
    }

    .header nav ul li a {
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
    }

    .header nav.active {
        max-height: 600px;
    }

    /* Submenús móviles */
    .header nav ul li ul {
        position: static;
        display: none;
        box-shadow: none;
        background: #f9f9f9;
        padding-left: 20px;
    }

    .header nav ul li ul ul {
        padding-left: 20px;
    }
    
    .header nav ul li.submenu.submenu-open > ul {
        display: block;
    }

    /* -------------------------------------- */
    /* Estilos del Banner */
    /* -------------------------------------- */
    .banner {
        height: auto;
        padding: 50px 20px;
        /* APLICA LA ANIMACIÓN A TODO EL CONTENEDOR EN MÓVIL */
        opacity: 0; /* Empieza invisible */
        animation: slideUpFadeIn 1.2s ease-out forwards; /* Aplica la animación */
    }
    
    /* Nota: Si el banner es el primer elemento visible al cargar la página,
    no es necesario usar Intersection Observer. La animación se activa
    inmediatamente al cargar la página. */

    .banner-content {
        margin-bottom: 30px;
        /* Puedes agregar un pequeño delay a las formas si quieres un efecto escalonado */
        transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .banner-content h2 {
        font-size: 32px;
    }

    .banner-content p {
        font-size: 14px;
        max-width: 100%;
    }

    .banner-shapes {
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
        max-width: none;
        /* Agregamos una animación con delay para que las formas aparezcan después del texto */
        opacity: 0;
        animation: slideUpFadeIn 1.2s ease-out forwards 1.2s; /* 0.5s de retraso */
    }
    
    .shape {
        width: 100%;
        max-width: 250px;
        height: 250px;
        margin: 0 auto;
    }

    /* -------------------------------------- */
    /* Estilos generales de ¿Quiénes somos? */
    /* -------------------------------------- */
    .quienes-somos-image-wrapper {
        display: none;
    }

    .quienes-somos {
        flex-direction: column;
        height: auto;
        padding: 50px 20px;
        gap: 0;
    }

    .quienes-somos-content {
        max-width: 100%;
        text-align: center;
        /* El contenedor debe ser visible, la animación la manejan los hijos */
        opacity: 1 !important; 
        transform: none !important;
        transition: none; 
    }
    
    /* 1. Estado inicial: Ocultar y desplazar individualmente cada elemento */
    .quienes-somos-content h4,
    .quienes-somos-content h2,
    .quienes-somos-content p,
    .quienes-somos-content .link-cta {
        opacity: 0; 
        transform: translateY(30px);
        transition: none; /* Asegura que no interfiera con la animación */
    }
    
    /* 2. Animación secuencial (Solo cuando se añade la clase .visible) */
    .quienes-somos-content.visible h4 {
        animation: slideUpFadeIn 0.5s ease-out forwards 0.2s; /* Título pequeño (inicia) */
    }
    
    .quienes-somos-content.visible h2 {
        animation: slideUpFadeIn 0.5s ease-out forwards 0.4s; /* Título grande (0.2s de retraso) */
    }
    
    .quienes-somos-content.visible p {
        animation: slideUpFadeIn 0.5s ease-out forwards 0.6s; /* Párrafo (0.4s de retraso) */
    }
    
    .quienes-somos-content.visible .link-cta {
        animation: slideUpFadeIn 0.5s ease-out forwards 0.8s; /* Botón CTA (0.6s de retraso) */
    }
    
    /* Ajustes visuales finales */
    .quienes-somos-content h4 {
        font-size: 16px;
    }

    .quienes-somos-content h2 {
        font-size: 32px;
        margin-top: 0;
    }
    
    .quienes-somos-content .link-cta {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
    
    /* El contenedor padre ya no necesita la animación */
    .quienes-somos-content.visible {
        animation: none !important;
    }


    /* -------------------------------------- */
    /* Estilos generales de "Historia + Misión + Visión" */
    /* -------------------------------------- */
    .figura-card {
        display: none;
    }

    .historia-mision-vision {
        height: auto;
        padding: 50px 20px;
    }

    .historia-mision-vision-container {
        flex-direction: column;
        height: auto;
        padding-top: 0;
    }

    .historia-column {
        height: auto;
        margin-bottom: 40px;
    }

    /* 1. ESTADO INICIAL: Ocultar todas las tarjetas en móvil */
    .historia-card,
    .vision-card,
    .mision-card {
        width: 100%;
        height: auto;
        opacity: 0; /* Ocultamos por defecto */
        transform: translateY(30px); /* Movemos hacia abajo por defecto */
        transition: none; /* Deshabilitamos transición para que la animación tome el control */
    }
    
    /* Nota: También necesitas ocultar el contenedor de la figura en móvil si quieres animarlo por separado o eliminarlo del flujo. */
    .figura-card {
        opacity: 0;
        transform: translateY(30px);
    }

    /* 2. CONTENEDOR DE LA VISIBILIDAD: El JS añadirá la clase 'visible' al contenedor padre */
    .historia-mision-vision-container.visible .historia-card {
        animation: slideUpFadeIn 0.6s ease-out forwards 0.2s; /* Historia (inicia 0s) */
    }
    
    .historia-mision-vision-container.visible .figura-card {
        animation: slideUpFadeIn 0.6s ease-out forwards 0.4s; /* Figura (0.2s de retraso) */
    }
    
    .historia-mision-vision-container.visible .vision-card {
        animation: slideUpFadeIn 0.6s ease-out forwards 0.6s; /* Visión (0.4s de retraso) */
    }
    
    .historia-mision-vision-container.visible .mision-card {
        animation: slideUpFadeIn 0.6s ease-out forwards 0.8s; /* Misión (0.6s de retraso) */
    }

    /* Ajustes de estilo que ya tenías */
    .mision-vision-column {
        height: auto;
        gap: 20px;
    }
    
    .historia-card h3,
    .mision-card h3,
    .vision-card h3 {
        font-size: 35px;
        text-align: center;
    }

    .historia-card p,
    .mision-card p,
    .vision-card p {
        font-size: 18px;
        text-align: center;
    }

    /* -------------------------------------- */
    /* Estilos generales de  "Nuestros Valores" */
    /* -------------------------------------- */
    .nuestros-valores {
        padding: 40px 20px;
        margin: 40px auto;
    }

    .valores-header {
        margin-bottom: 30px;
        text-align: center;
    }

    .valores-header h2 {
        font-size: 38px;
    }

    .valores-header p {
        font-size: 15px;
        text-align: center;
        font-family: 'Comfortaa', normal;
    }

    .valor-card p {
        font-family: 'Comfortaa', normal;
    }
    
    /* El contenedor principal se apila */
    .valores-grid {
        flex-direction: column;
        gap: 15px;
    }

    /* 1. Estado por defecto: Gris (Mantiene el gris en móvil) */
    .valor-card {
        max-width: 100%;
        min-height: auto;
        padding: 30px 25px;
        background-color: var(--color-gray-bg) !important;
        color: var(--color-text-dark) !important;
        transition: all 0.3s ease;
    }
    
    /* 2. ESTADO ACTIVO (Activado por JS al estar centrado) */
    .valor-card.active {
        background-color: var(--color-pink-primary) !important;
        color: #fff !important;
    }
    
    /* Línea horizontal en estado ACTIVO (blanca) */
    .valor-card.active .valor-line {
        background-color: #fff;
    }
    
    /* 3. Deshabilitar Hover en móvil para evitar conflictos */
    .valor-card:hover {
        background-color: var(--color-gray-bg) !important;
        color: var(--color-text-dark) !important;
    }
    
    .valor-card:hover .valor-line {
        background-color: var(--color-pink-line) !important;
    }

    /* -------------------------------------- */
    /* Estilos generales de Equipo */
    /* -------------------------------------- */
    .equipo-grid {
        grid-template-columns: 1fr; /* 1 tarjeta por fila */
        gap: 30px; /* menos espacio entre tarjetas */
    }

    .equipo-item {
        width: 100%; /* ocupar ancho del contenedor */
        max-width: 350px; /* límite para que no sea tan grande */
        height: auto; /* que la altura se adapte */
    }

    .equipo-foto {
        position: relative;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        max-height: 250px;
    }

    .equipo-info {
        padding: 15px 10px;
    }

    .equipo-info h3 {
        font-size: 1rem;
    }

    .equipo-info p {
        font-size: 0.85rem;
    }

    /* -------------------------------------- */
    /* Estilos generales de Testimonio del Equipo */
    /* -------------------------------------- */
    .testimonios-section {
        padding: 40px 15px;
    }

    /* Ajuste para el título */
    .testimonios-container h2 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    /* Ajuste para el contenedor del video */
    .video-container {
        padding-top: 56.25%; /* Mantiene la proporción 16:9 */
        border-radius: 10px;
    }

    /* Ajuste para el botón de reproducción (si lo usas) */
    .video-container::after {
        width: 50px;
        height: 50px;
    }

    /* -------------------------------------- */
    /* Estilos del Formulario Contacto*/
    /* -------------------------------------- */
    .team-form-container {
        height: auto;
        width: auto;
        padding: 40px 20px;
    }

    .team-form-wrapper {
        flex-direction: column;
        height: auto;
        padding: 0;
    }

    .team-form-content {
        width: 100%;
        padding: 0;
    }

    .team-form-image-box {
        display: none;
    }

    .team-form-title {
        font-size: 40px;
        margin-bottom: 15px;
    }

    .team-form-subtitle {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .team-form label {
        font-size: 15px;
    }

    .team-form .form-group {
        margin-bottom: 20px;
    }

    .form-divider {
        margin: 30px 0;
    }

    /* -------------------------------------- */
    /* Estilos del footer completo */
    /* -------------------------------------- */
    .main-footer, .footer-top-bg, .footer-bottom-bg {
        padding: 0;
    }
    
    .footer-top {
        flex-direction: column;
        align-items: center;
        height: auto;
        padding: 40px 15px;
    }
    
    .footer-content-wrapper,
    .footer-logo-social,
    .footer-links-container,
    .footer-contact-info {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .footer-links-container {
        flex-direction: column;
        gap: 20px;
        margin: 30px 0;
    }
    
    .footer-logo-social {
        margin-bottom: 20px;
        margin: 50px auto 0;
    }
    
    .social-icons {
        justify-content: center;
        margin: 50px auto 0;
    }

    .footer-contact-info {
        padding: 20px;
        border-radius: 20px;
        width: 100%;
    }

    .footer-bottom {
        flex-direction: center;
        gap: 5px;
    }

    /*----------MODAL-------------*/
    /*----------------------------*/
    /*----------------------------*/
    .modal-content-custom {
        padding: 30px 20px; 
        max-width: 95%;
        margin: 20px; 
    }

    .modal-title-custom {
        font-size: 45px; /* Ligeramente más grande que en el ejemplo anterior, aprovechando el ancho extra hasta 768px */
    }
    
    .modal-check-mark {
        width: 80px;
        height: 80px;
        margin: 15px auto;
    }

    .modal-check-mark::after {
        font-size: 50px; /* Ajusta el tamaño del check */
    }

    .close-button-custom {
        font-size: 26px; 
        top: 10px;
        right: 15px;
    }
}

/* -------------------------------------- */
/* KEYFRAMES para la Animación de Entrada en Móvilv */
/* -------------------------------------- */
@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}