:root {

            --primary-color: #0066c5; /* Azul institucional oscuro */

            --secondary-color: #0c6614;  

            --accent-color: #ffcc00;

            --text-dark: #333333;

        }



        html {

            scroll-behavior: smooth;

        }



        body {

            font-family: 'Montserrat', sans-serif; /* Cambio a Montserrat global o específico */

            color: var(--text-dark);

            background-color: #fdfdfd;

            background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.25'%3E%3C!-- Birrete --%3E%3Cpath d='M40 60 L90 40 L140 60 L90 80 Z M140 60 V90' /%3E%3C!-- Libro --%3E%3Cpath d='M200 50 L200 100 Q225 110 250 100 L250 50 Q225 60 200 50 Z M225 50 V105' /%3E%3C!-- Lapiz --%3E%3Cpath d='M320 40 L350 70 L340 80 L310 50 Z M310 50 L300 80 L340 80' /%3E%3C!-- Atomo --%3E%3Ccircle cx='80' cy='200' r='25' /%3E%3Cellipse cx='80' cy='200' rx='40' ry='10' transform='rotate(45 80 200)' /%3E%3C!-- Regla --%3E%3Crect x='180' y='180' width='120' height='35' /%3E%3Cpath d='M190 180 V200 M210 180 V200 M230 180 V200 M250 180 V200 M270 180 V200 M290 180 V200' /%3E%3C!-- Mundo --%3E%3Ccircle cx='350' cy='200' r='30' /%3E%3Cpath d='M320 200 H380 M350 170 V230' /%3E%3C!-- Matraz --%3E%3Cpath d='M60 350 L40 380 H80 L60 350 V320 H70' /%3E%3C!-- Musica --%3E%3Cpath d='M150 350 L150 310 L180 300 V340' /%3E%3Ccircle cx='140' cy='350' r='10' /%3E%3Ccircle cx='170' cy='340' r='10' /%3E%3C!-- Calculadora --%3E%3Crect x='250' y='300' width='40' height='60' rx='5' /%3E%3Cpath d='M260 310 H280 M260 325 H265 M275 325 H280' /%3E%3C!-- Balon --%3E%3Ccircle cx='350' cy='330' r='20' /%3E%3Cpath d='M335 330 Q350 330 365 330' /%3E%3C!-- Manzana --%3E%3Cpath d='M100 100 C 80 80 60 100 60 120 C 60 150 100 170 100 170 C 100 170 140 150 140 120 C 140 100 120 80 100 100' /%3E%3Cpath d='M100 100 Q 110 80 120 70' /%3E%3C!-- Bombillo --%3E%3Cpath d='M300 280 C 280 260 280 230 300 210 C 320 190 350 190 370 210 C 390 230 390 260 370 280 L 350 300 H 320 Z' /%3E%3C!-- ADN --%3E%3Cpath d='M20 250 Q 40 270 60 250 T 100 250' /%3E%3Cpath d='M20 270 Q 40 250 60 270 T 100 270' /%3E%3C/g%3E%3C/svg%3E");

            background-size: 300px 300px; /* Hace el patrón más pequeño y denso */

            background-attachment: fixed;

            overflow-x: hidden; /* Previene el scroll horizontal globalmente */

        }



        /* Ajuste para anclas con navbar fijo para que no queden ocultas */

        section[id] {

            scroll-margin-top: var(--header-height, 80px); /* Altura calculada por JS, con fallback */

        }



        h1, h2, h3, h4, h5 {

            font-family: 'Roboto Slab', serif;

        }



        .navbar {

            /* Estilo inicial transparente */

            background: linear-gradient(90deg, var(--primary-color) 0%, #0c6614d5 100%);

            padding: 1rem 0;

            transition: background-color 0.4s ease, padding 0.4s ease;

        }



        .navbar.navbar-scrolled {

            /* Estilo al hacer scroll */

            background: linear-gradient(90deg, var(--primary-color) 0%, #0c6614d5 100%);

            padding: 0.5rem 0;

            box-shadow: 0 4px 12px rgba(0,0,0,0.08);

        }



        .navbar-brand img {

            height: 65px; /* Logo más grande al inicio */

            width: auto;

            transition: height 0.4s ease;

        }

        



        .navbar-brand {

            display: flex;

            align-items: center;

            gap: 15px;

        }





        .btn-educa {

            background-color: var(--primary-color);

            color: white;

            border-radius: 50px;

            padding: 0.5rem 1.5rem;

            transition: all 0.3s ease;

            font-weight: 500;

            text-decoration: none;

            display: inline-flex;

            align-items: center;

            gap: 8px;

            position: relative;

            z-index: 2; /* Mayor que el personaje para cubrirlo */

        }



        .btn-educa span {

            position: relative;

            display: inline-block;

        }



        /* Estilos para el texto del logo */

        .navbar-brand span {

            font-weight: bold;

            color: white;

            display: inline-block;

            opacity: 0; /* Start hidden for animation */

            animation: slideInFromLeft 1.2s ease-out 0.5s forwards;

            white-space: nowrap;

        }



        .navbar.navbar-scrolled .navbar-brand span {

            color: white; /* Texto blanco sobre la parte azul del degradado */

        }



        .btn-educa:hover {

            background-color: var(--secondary-color);

            color: white;

            transform: translateY(-2px);

            box-shadow: 0 4px 10px rgba(0,0,0,0.2);

        }



@keyframes gentleShake {

    0%, 100% { transform: rotate(0); }

    2% { transform: rotate(3deg); }

    4% { transform: rotate(-3deg); }

    6% { transform: rotate(2deg); }

    8% { transform: rotate(-2deg); }

    10% { transform: rotate(0); }

}



/* Aplicar animación solo en escritorio */

@media (min-width: 768px) {

    .btn-educa {

        animation: gentleShake 6s ease-in-out infinite;

    }

}



        /* Hero Section */

        .hero-section {

            position: relative;

            height: 90vh;

            min-height: 500px;

            background: linear-gradient(rgba(0, 0, 0, 0.26), rgb(0, 31, 61)); /* El background-image se establecerá dinámicamente */

            background-size: cover;

            background-position: center;

            display: flex;

            flex-direction: column;

            justify-content: center;

            text-align: center;

            color: white;

            padding-top: 100px; /* Espacio para el navbar fijo */

            padding-bottom: 8rem; /* Más espacio para la ola */

        }



        .hero-content h1 {

            font-size: 3.5rem;

            font-weight: 700;

            margin-bottom: 1rem;

            text-shadow: 0 2px 4px rgba(0,0,0,0.3);

    position: relative;

    display: inline-block;

    padding-bottom: 15px;

    font-family: 'Roboto Slab', serif; /* Acorde a tu estilo */

        }

        .hero-content h1 { overflow: hidden; } /* Evita que el rayo de luz salga del contenedor */



/* La Línea que se estira desde la izquierda */

.hero-content h1::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: #ffe602; 

    border-radius: 2px;

    transform: scaleX(0);

    transform-origin: left;

    animation: stretchLine 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;

    animation-delay: 0.8s;

}



/* El Rayo de luz (Destello) que recorre la línea */

.hero-content h1::before {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 60px;

    height: 4px;

    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);

    z-index: 2;

    opacity: 0;

    filter: blur(2px);

    /* Se activa después de estirarse y se repite */

    animation: lightRay 3s ease-in-out infinite;

    animation-delay: 2.3s; 

}



@keyframes stretchLine {

    to { transform: scaleX(1); }

}



@keyframes lightRay {

    0% { left: 0; opacity: 0; }

    50% { opacity: 1; }

    100% { left: 100%; opacity: 0; }

}



        .hero-content h4 {

            font-weight: 300;

            font-size: 1.5rem;

            opacity: 0.9;

        }



        /* Ajuste para fondo de bienvenida en móviles */

        @media (max-width: 767.98px) {

            .hero-section {

                /* Esta propiedad se inyectará dinámicamente desde el PHP con la nueva variable hero_bg_mobile */

            }

        }



        @media (max-width: 767.98px) {

            .navbar-brand span {

                display: inline-block;

                font-size: 0.95rem; /* Tamaño ajustado para móviles */

        white-space: normal; /* Permite que el texto se divida en varias líneas */

        line-height: 1.2;

        animation: none !important; /* Elimina la animación de entrada del texto en móviles */

            }

            .hero-content h1 {

                font-size: 2.8rem; /* Título más pequeño en móviles */

            }

            section.container[style*="margin-top"] {

                margin-top: -90px !important; /* Reducir solapamiento */

            }



            /* Ajustes para un header más compacto en móviles */

            .navbar {

                padding: 0.75rem 0;

            }

            .navbar.navbar-scrolled {

                padding: 0.25rem 0;

            }

            .navbar-brand img {

                height: 50px; /* Altura inicial del logo en móvil */

            }

            .navbar.navbar-scrolled .navbar-brand img {

                height: 40px; /* Altura del logo al hacer scroll */

            }

            .btn-educa {

                padding: 0.4rem 0.8rem; /* Botón más compacto */

                font-size: 0.9rem; /* Texto ligeramente más pequeño */

                max-width: 90%; /* Evita que se salga si la pantalla es muy estrecha */

                justify-content: center; /* Centra el contenido */

                animation: none !important; /* Detiene cualquier animación forzosamente */

                transform: none !important; /* Elimina el "empujón" o rotación residual */

            }

            .contenedor-flechas-animadas {

                display: none; /* Ocultar flechas en móvil para evitar desbordamiento */

            }

            

            /* Optimización de elementos grandes para móvil */

            #panorama, .map-container iframe {

                height: 300px !important; /* Reducir altura de mapas y 360 en móvil */

            }

            

            .hero-section {

                height: auto; /* Altura automática en vez de fija */

                min-height: 100vh; /* Al menos toda la pantalla */

                padding-top: 120px; /* Espacio para que no lo tape el navbar */

            }

        }



        @media (max-width: 575.98px) {

    .navbar-brand span {

        display: none; /* Oculta el texto en pantallas muy pequeñas, dejando solo el logo */

    }

            .navbar .container {

                flex-direction: column;

                align-items: center;

                gap: 1rem;

            }

            .navbar .ms-auto {

                margin: 0 !important; /* Reset margin for stacked layout */

                width: 100%;

                justify-content: center;

            }

            .hero-content h1 {

                font-size: 2.2rem;

            }

        }



        /* Efecto de Ola (Wave) Animada */

        .custom-shape-divider-bottom {

            position: absolute;

            bottom: 0;

            left: 0;

            width: 100%;

            overflow: hidden;

            line-height: 0;

            transform: none; /* Eliminamos rotación para el nuevo SVG */

        }



        .waves {

            position: relative;

            width: 100%;

            height: 100px;

            margin-bottom: -1px; /* Previene líneas finas en algunos navegadores */

            min-height: 100px;

            max-height: 150px;

        }



        /* Animación Parallax */

        .parallax > use {

            animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;

        }

        .parallax > use:nth-child(1) {

            animation-delay: -2s;

            animation-duration: 7s;

        }

        .parallax > use:nth-child(2) {

            animation-delay: -3s;

            animation-duration: 10s;

        }

        .parallax > use:nth-child(3) {

            animation-delay: -4s;

            animation-duration: 13s;

        }

        .parallax > use:nth-child(4) {

            animation-delay: -5s;

            animation-duration: 20s;

        }



        @keyframes move-forever {

            0% {

                transform: translate3d(-90px,0,0);

            }

            100% { 

                transform: translate3d(85px,0,0);

            }

        }



        /* Ajuste responsivo para móviles */

        @media (max-width: 768px) {

            .waves {

                height: 60px;

                min-height: 60px;

            }

        }



        /* Cards de Información */

        .info-card {

    background: transparent; /* Quitamos el fondo del padre para manejar capas */

            border: 1px solid rgba(255, 0, 0, 0.08); /* Borde sutil para definición */

            border-radius: 16px;

            box-shadow: 0 20px 50px rgba(0, 83, 160, 0.466); /* Sombra refinada */

            height: 100%; /* Asegura que todas las tarjetas en una fila tengan la misma altura */

            overflow: visible; /* ¡IMPORTANTE! Para que el capibara pueda salir del borde */

            font-size: 0.95rem; /* Aumentar tamaño para legibilidad */

            color: #000;

            position: relative; 

            opacity: 0; 

            transform: translateX(-150px); 

            transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);

        }



/* Creamos una capa específica para el fondo que tapará al capibara cuando esté detrás */

.info-card::after {

    content: '';

    position: absolute;

    inset: 0; /* Ocupa todo el espacio de la tarjeta */

    background: #ffffffe8;

    border-radius: 16px;

    z-index: -1; /* Se sitúa detrás del contenido, pero TAPARÁ al capibara (que es ::before) */

}



        .info-card.reveal { opacity: 1; transform: translateX(0); }



        .info-card:hover {

            transform: translateY(-5px) scale(1.02); /* Añade un efecto de "pop" al pasar el cursor */

            box-shadow: 0 20px 50px rgba(0, 145, 120, 0.637); /* Sombra con tono azulado al flotar */

            border-color: var(--primary-color); /* El borde cambia al color principal */

            z-index: 10; /* Asegura que la tarjeta activa esté por encima de las demás */

            transition: box-shadow 0.3s ease-out;

        }



        .card-header-custom {

            background-color: var(--primary-color);

            color: white;

            padding: 1.5rem 1rem;

            text-align: center;

            min-height: 150px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            border-radius: 15px 15px 0 0;

            position: relative;

        }



        .hover-icon {

            height: 50px !important;

            width: auto !important;

            max-width: 120px;

            object-fit: contain;

            margin: 0 auto 10px;

            opacity: 1 !important; /* Siempre visible al 100% */

            display: block;

            position: relative;

            z-index: 5;

            transform: none !important; /* Sin movimientos ni cambios de tamaño */

            transition: none !important; /* Sin animaciones de transición */

        }



        /* Asegurar visibilidad del icono de birrete (SVG) */

        .school-icon {

            stroke: white;

        }



        .card-header-custom i {

            font-size: 1.5rem; /* Icono más pequeño */

        }



        .card-header-custom h5 {

            font-size: 1.1rem; /* Título un poco más visible */

            margin-bottom: 0;

        }



        .card-body {

            padding: 1rem; /* Reducir padding del cuerpo */

        }



        .contact-list {

            list-style: none;

            padding: 0;

            margin: 0;

        }



        .contact-list li {

            margin-bottom: 0.5rem;

            display: flex;

            align-items: center;

            gap: 10px;

            font-weight: 500; /* Texto más grueso para que se vea mejor */

        }



        .contact-link {

            color: var(--text-dark);

            text-decoration: none;

            transition: color 0.2s;

        }



        .contact-link:hover {

            color: var(--primary-color);

        }



        .social-icons a {

            display: inline-flex;

            justify-content: center;

            align-items: center;

            width: 30px; /* Iconos sociales más pequeños */

            height: 30px;

            background-color: #f1f1f1;

            border-radius: 50%;

            color: var(--primary-color);

            margin: 0 5px;

            transition: all 0.3s;

            text-decoration: none;

        }



        .social-icons a:hover {

            background-color: var(--primary-color);

            color: white;

        }



        /* Sección Ubicación */

        .location-section {

            background-color: transparent;

            padding: 4rem 0;

            margin-top: 0;

        }



        .section-title {

            text-align: center;

            margin-bottom: 3rem;

            position: relative;

            display: inline-block;

            width: 100%;

        }

        

        .section-title h3 {

            font-weight: 700;

            color: var(--primary-color);

        }



        .map-container {

            border-radius: 12px;

            overflow: hidden;

            box-shadow: 0 5px 15px rgba(0,0,0,0.1);

        }



        /* Footer */

        footer {

            background-color: #1a1a1a;

            color: #aaa;

            padding: 2rem 0;

            text-align: center;

            font-size: 0.9rem;

        }



        footer a {

            color: white;

            text-decoration: none;

        }



        /* Animación de cursor */

        .blink-cursor {

            animation: blink 1s infinite;

        }

        @keyframes blink {

            0% { opacity: 1; }

            50% { opacity: 0; }

            100% { opacity: 1; }

        }



        /* Keyframes para la animación del texto del navbar */

        @keyframes slideInFromLeft {

            0% {

                opacity: 0;

                transform: translateX(-30px);

            }

            100% {

                opacity: 1;

                transform: translateX(0);

            }

        }



/* --- Estilos Misión y Visión (Vivos) --- */

/* --- Estilos Misión, Visión y Valores (Animados) --- */

.mv-card {

    background: transparent; /* El fondo lo maneja el pseudo-elemento ::after */

    border-radius: 15px;

    padding: 25px;

    margin-bottom: 20px;

    border: none;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    display: flex;

    align-items: flex-start;

    gap: 20px;

    position: relative;

    overflow: hidden;

    z-index: 1;

    flex-grow: 1;

}

/* --- Estilos Misión, Visión y Valores (Animados) --- */

.mv-card {

    background: transparent; /* El fondo lo maneja el pseudo-elemento ::after */

    border-radius: 15px;

    padding: 25px;

    margin-bottom: 20px;

    border: none; /* Eliminamos bordes estáticos */

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    display: flex;

    align-items: flex-start;

    gap: 20px;

    position: relative; /* Necesario para los pseudo-elementos */

    overflow: hidden; /* Para que el borde animado se mantenga en las esquinas */

    z-index: 1;

    flex-grow: 1; /* Asegura que la tarjeta crezca para igualar la altura */

}



/* Pseudo-elemento para el fondo giratorio que crea el borde */

.mv-card::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 200%;

    height: 200%;

    z-index: -2; /* Detrás de todo */

    animation: rotateBorder 8s linear infinite;

    background: conic-gradient(

        from 0deg,

        #aed8ff, 

        var(--secondary-color), 

        var(--primary-color), 

        #aed8ff

    );

}



/* Pseudo-elemento para el fondo blanco que recorta el borde */

.mv-card::after {

    content: '';

    position: absolute;

    inset: 3px; /* Grosor del borde */

    background: white;

    border-radius: 13px; /* Un poco menos que el padre para que se vea el borde */

    z-index: -1;

}



.mv-card:hover {

    animation-play-state: paused; /* Pausa la animación de respiración */

}



.mv-card:hover::before {

    animation-play-state: paused; /* Pausa la rotación del borde */

}



.mv-card .icon-box {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    width: 60px; height: 60px;

    border-radius: 50%;

    display: flex; align-items: center; justify-content: center;

    font-size: 1.5rem;

    flex-shrink: 0;

}

.mv-card .icon-box i {

    font-size: 2.5rem;

    color: #ffcc00; /* Amarillo Institucional */

    transition: all 0.5s ease;

    animation: iconGlow 4s infinite ease-in-out;

}





/* --- Estilos del Organigrama (Versión Dashboard) --- */

.organigrama {

    position: relative;

    overflow-x: auto;

    padding: 30px 16px 40px;

    text-align: center;

    -webkit-overflow-scrolling: touch;

}



.organigrama ul {

    padding-top: 20px;

    position: relative;

    display: inline-flex;

    justify-content: center;

    transition: all 0.5s;

    margin: 0;

    padding-left: 0;

}



.organigrama li {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    list-style-type: none;

    position: relative;

    padding: 20px 5px 0 5px;

    transition: all 0.5s;

}



/* Líneas Conectoras (Visibles por defecto en admin) */

.organigrama li::before, .organigrama li::after {

    content: '';

    position: absolute;

    top: 0;

    right: 50%;

    border-top: 2px solid #aed8ff;

    width: 50%;

    height: 20px;

    opacity: 1;

    z-index: 1;

}



.organigrama li::after {

    right: auto;

    left: 50%;

    border-left: 2px solid #aed8ff;

    border-radius: 10px 0 0 0;

}



.organigrama li:only-child::after, .organigrama li:only-child::before {

    display: none;

}



.organigrama li:only-child {

    padding-top: 0;

}



.organigrama li:first-child::before, .organigrama li:last-child::after {

    border: 0 none;

}



.organigrama li:last-child::before {

    border-right: 2px solid #aed8ff;

    border-radius: 0 10px 0 0;

}



.organigrama li:first-child::after {

    border-radius: 10px 0 0 0;

}



.organigrama ul ul::before {

    content: '';

    position: absolute;

    top: 0;

    left: 50%;

    border-left: 2px solid #aed8ff;

    width: 0;

    height: 20px;

    opacity: 1;

    z-index: 1;

}



.nodo {

    padding: 10px 5px;

    border-radius: 20px;

    display: inline-block;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);

    transition: all 0.3s ease;

    width: 130px;

    z-index: 2;

    position: relative;

    font-family: 'Montserrat', sans-serif;

    color: white;

    text-align: center;

    border-bottom: 3px solid #ffcc00;

    cursor: grab;

    opacity: 1;

    background-color: #333;

}



.nodo:active {

    cursor: grabbing;

    transform: scale(0.98);

}



.nodo i {

    display: block;

    font-size: 1.2rem;

    margin-bottom: 5px;

    color: #ffcc00;

}



.nodo strong {

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

    display: block;

    margin-bottom: 2px;

    text-transform: uppercase;

    font-size: 0.7rem;

    letter-spacing: 0.5px;

}



.nodo span {

    font-size: 0.65em;

    color: rgba(255, 255, 255, 0.9);

    display: block;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.nodo:hover {

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25), 0 0 15px #ffcc00;

    z-index: 100;

}





.nodo {

    padding: 14px 12px;

    border-radius: 22px;

    display: inline-block;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    width: 135px;

    z-index: 2;

    position: relative;

    font-family: 'Montserrat', sans-serif;

    color: white;

    text-align: center;

    border-bottom: 4px solid #ffcc00;

    background: linear-gradient(135deg, rgba(0, 76, 153, 0.96), rgba(0, 118, 212, 0.98));

}



.nodo[onclick] {

    cursor: pointer;

}



.nodo i {

    display: block;

    font-size: 1.2rem;

    margin-bottom: 5px;

    color: #ffcc00;

}



.nodo strong {

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

    display: block;

    margin-bottom: 2px;

    text-transform: uppercase;

    font-size: 0.7rem;

    letter-spacing: 0.5px;

}



.nodo span {

    font-size: 0.65em;

    color: rgba(255, 255, 255, 0.9);

    font-weight: 400;

}



.nodo:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25), 0 0 15px #ffcc00;

}



/* --- Variantes de Color del Organigrama --- */

.nodo-dark {

    background: linear-gradient(135deg, #003366 0%, #001f3f 100%);

}



.nodo-electric {

    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);

}



.nodo-green {

    background: linear-gradient(135deg, #0c6614 0%, #084d0f 100%);

}



.nodo-blue {

    background: linear-gradient(135deg, #00a8e8 0%, #0077b6 100%);

}



.nodo-yellow {

    background: linear-gradient(135deg, #ffcc00 0%, #ffdb4d 100%) !important;

    color: #000 !important;

    border-bottom: 3px solid #ccaa00 !important;

}



.nodo-yellow i, .nodo-yellow strong, .nodo-yellow span {

    color: #000 !important;

}



/* --- Adaptación Móvil Básica --- */

@media (max-width: 992px) {

    .organigrama {

        text-align: left;

    }



    .organigrama ul {

        display: flex;

        flex-direction: column;

        padding-top: 0;

        padding-left: 0;

        gap: 15px;

    }



    .organigrama li {

        display: block;

        padding: 0;

        width: 100%;

        text-align: left;

    }

}





/* Keyframes para la animación del borde giratorio */

@keyframes rotateBorder {

    0% {

        transform: translate(-50%, -50%) rotate(0deg);

    }

    100% {

        transform: translate(-50%, -50%) rotate(360deg);

    }

}



/* Keyframes para la animación de 'respiración' */

@keyframes breathe {

    0%, 100% {

        transform: scale(1);

        box-shadow: 0 8px 20px rgba(0, 83, 160, 0.07);

    }

    50% {

        transform: scale(1.01);

        box-shadow: 0 12px 30px rgba(0, 83, 160, 0.12);

    }

}



/* Keyframes para el brillo de los iconos */

@keyframes iconGlow {

    0%, 100% { 

        filter: drop-shadow(0 0 5px #ffcc00); 

        transform: scale(1); 

    }

    50% { 

        filter: drop-shadow(0 0 15px #ffcc00); 

        transform: scale(1.1); 

    }

}



/* --- Animación Mapa Ubicación --- */

.location-title {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px; /* Espacio entre texto e icono */

}



.jumping-map-container {

    display: inline-block;

    font-size: 1.8rem;

    color: #007bff; /* Amarillo del Colegio */

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));

    animation: jumpAndScale 2.5s ease-in-out infinite;

}



@keyframes jumpAndScale {

    0%, 100% { transform: translateY(0) scale(1); }

    50% { 

        transform: translateY(-15px) scale(1.25) rotate(8deg);

        filter: drop-shadow(0 15px 10px rgba(0,0,0,0.1));

    }

}



/* --- Animación de Texto Reveal --- */

.reveal-text {

    opacity: 0;

    transform: translateY(30px);

    transition: all 1s ease-out;

}



.reveal-text.active {

    opacity: 1;

    transform: translateY(0);

}



/* --- Imagen Reseña con Overlay (Estilo Banner) --- */

.reseña-bg {

    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat;
    height: 600px; /* Altura fija forzada para ignorar dimensiones de la imagen */
    min-height: 600px;
    padding: 0;
    display: flex;
    align-items: center;
}



/* Contenedor del SVG para un acabado limpio */

.card-svg-container {

    width: 60px;

    height: 60px;

    padding: 10px;

    background: #fff;

    border-radius: 50%;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    flex-shrink: 0; /* Se ajusta para el layout flex de .mv-card */

}



/* --- BORDE ANIMADO CONSTANTE CON AMARILLO --- */

.value-card {

    /* Esta animación anula la de .mv-card para la tarjeta de Valores */

    animation: pulseGlow 5s infinite ease-in-out;

}



.value-card::before {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    z-index: -1;

    border-radius: 12px; /* Mismo radio que la tarjeta */

    /* Gradiente para el borde: Amarillo Institucional, Azul Eléctrico, Azul Marino */

    background: linear-gradient(90deg, #ffcc00, #00a8e8, #001f3f, #ffcc00);

    background-size: 200% 100%;

    animation: borderFlow 6s linear infinite;

    opacity: 0.8;

}



/* Efecto de borde que fluye continuamente */

@keyframes borderFlow {

    0% {

        background-position: 0% 50%;

    }

    100% {

        background-position: 200% 50%;

    }

}



/* Efecto de resplandor constante */

@keyframes pulseGlow {

    0%,

    100% {

        box-shadow: 0 0 10px rgba(255, 204, 0, 0.4);

    }

    50% {

        box-shadow: 0 0 25px rgba(255, 204, 0, 0.7);

    }

}



/* --- Vista de Perfil Overlay --- */

.perfil-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  /* Fondo Aurora: Azul, Verde, Amarillo */

  background: linear-gradient(-45deg, rgba(0, 51, 102, 0.95), rgba(0, 119, 83, 0.9), rgba(255, 204, 0, 0.7), rgba(0, 51, 102, 0.95));

  background-size: 400% 400%;

  z-index: 9999;

  display: none; /* Hidden by default */

  align-items: center;

  justify-content: center;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  animation: fadeIn 0.5s ease, aurora 15s ease infinite;

  cursor: pointer;

}



.card-perfil {

  background: #fff;

  padding: 30px;

  border-radius: 15px;

  box-shadow: 0 20px 40px rgba(0,0,0,0.1);

  display: flex;

  align-items: center;

  max-width: 90vw;

  cursor: default;

  text-align: center;

}



.header-perfil {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.foto-perfil {

  width: 120px;

  height: 120px;

  border-radius: 50%;

  object-fit: cover;

  border: 4px solid var(--primary-color); /* Using institutional color */

  animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.recuadro-info {

  width: 0;

  overflow: hidden;

  background: transparent; /* Fondo transparente para eliminar el recuadro gris visible */

  border-left: 5px solid var(--primary-color); /* Using institutional color */

  margin-left: 20px;

  white-space: nowrap;

  height: 120px; /* Match photo height */

  display: flex;

  align-items: center;

  padding: 0;

  transition: all 0.8s cubic-bezier(0.65, 0, 0.35, 1);

}



.recuadro-info.active {

  width: 400px;

  padding: 0 25px;

}



.recuadro-info.error {

  border-left-color: #d9534f; /* Rojo de error, como un "subrayado" vertical */

  background: #fdf2f2; /* Fondo rosa muy pálido para destacar el error */

}



.recuadro-info.error .texto-dinamico strong {

    color: #a94442; /* Texto fuerte del error en un rojo más oscuro */

}



.texto-dinamico {

  opacity: 0;

  clip-path: inset(0 100% 0 0);

  transition: all 1s ease-out 0.8s;

  font-family: 'Montserrat', sans-serif;

  white-space: normal;

  text-align: left;

}



.texto-dinamico.reveal {

  opacity: 1;

  clip-path: inset(0 0 0 0);

}



.texto-dinamico p { margin: 0; }



.texto-dinamico strong { color: var(--primary-color); }



.perfil-overlay .close-btn {

    position: absolute;

    top: 20px;

    right: 30px;

    font-size: 3rem;

    color: var(--text-dark);

    cursor: pointer;

    background: none;

    border: none;

    line-height: 1;

}



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

@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }

@keyframes aurora {

    0% { background-position: 0% 50%; }

    50% { background-position: 100% 50%; }

    100% { background-position: 0% 50%; }

}



@media (max-width: 768px) {

    .card-perfil {

        flex-direction: column;

        padding: 15px; /* Padding reducido para dar más espacio al texto */

        width: 95%; /* Ancho aumentado para móviles */

        margin: auto; /* Asegura el centrado en el contenedor flex */

    }

    .recuadro-info {

        margin-left: 0;

        margin-top: 20px;

        border-left: none;

        border-top: 5px solid var(--primary-color);

        white-space: normal;

        overflow-wrap: break-word; /* Evita que el texto estire la tarjeta */

        box-sizing: border-box; /* Asegura que el padding no aumente el ancho total */

        

        /* Configuración para animación de despliegue vertical */

        width: 100%;

        height: auto;

        max-height: 0; /* Inicia cerrado */

        padding: 0 20px; /* Padding vertical 0 al inicio */

        overflow: hidden;

        opacity: 0;

        transform: none; /* Eliminamos desplazamiento para mayor estabilidad */

        transition: max-height 0.6s ease-out, opacity 0.6s ease-out, padding 0.6s ease;

    }

    .recuadro-info.active {

        opacity: 1;

        max-height: 2000px; /* Altura muy grande para permitir que la tarjeta crezca con el texto */

        padding: 15px; /* Padding ajustado */

        width: 100%; /* Asegura que el ancho se ajuste al contenedor padre en móviles */

    }



    /* Ajustes para la galería "Conoce más" en móviles */

    .galeria-interactiva {

        padding: 20px;

    }

    .foto-card {

        height: 220px; /* Tarjetas más compactas para móviles */

    }



    /* Ocultar mascotas que se desbordan en móvil para prevenir overflow */

    .mascota-asomada, .info-card::before {

        display: none !important;

    }



    /* Se asegura de ocultar específicamente la mascota de la tarjeta "Misión" en móviles */

    .mv-card .lado-izquierdo {

        display: none !important;

    }

}



/* --- Modal de Galería (Pantalla Dividida) --- */

.card-galeria {

    background: #fff;

    border-radius: 20px;

    box-shadow: 0 30px 60px rgba(0,0,0,0.3);

    display: flex;

    overflow: hidden;

    width: 95%;

    max-width: 1100px; /* Mucho más ancho que el perfil */

    height: 70vh;      /* Altura considerable */

    min-height: 500px;

    animation: zoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    position: relative;

}



/* Botón de cierre específico para la galería */

/* Usamos un selector más específico para evitar conflictos con Bootstrap en móviles */

#galleryOverlay .close-btn-galeria {

    position: absolute;

    top: 15px;

    right: 15px;

    background: #fff;

    border: none;

    -webkit-appearance: none; /* Reseteo para iOS */

    appearance: none; /* Reseteo de estilos nativos */

    border-radius: 50%;

    width: 40px;

    height: 40px;

    font-size: 2rem;

    line-height: 1;

    color: var(--primary-color);

    cursor: pointer;

    z-index: 20;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

}



#galleryOverlay .close-btn-galeria:hover {

    background: var(--primary-color);

    color: #fff;

    transform: rotate(90deg);

}



.card-galeria .img-container {

    width: 60%; /* La imagen domina */

    height: 100%;

    position: relative;

    overflow: hidden;

}



.card-galeria .img-container img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 4s ease;

}



.card-galeria:hover .img-container img {

    transform: scale(1.05);

}



.card-galeria .info-container {

    width: 40%;

    padding: 50px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: left;

    background: #fff;

    position: relative;

}



@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }



@media (max-width: 992px) {

    .card-galeria {

        flex-direction: column;

        height: auto;

        max-height: 90vh;

        overflow-y: auto;

    }

    .card-galeria .img-container, .card-galeria .info-container {

        width: 100%;

        height: 300px; /* Altura fija para imagen en móvil */

    }

    .card-galeria .info-container {

        height: auto;

        padding: 30px;

    }

}



/* --- Módulo de Contenido Ocultable (para el 360) --- */

#galleryModule {

    display: none; /* Oculto por defecto */

    opacity: 0;

    transition: opacity 0.5s ease;

}



#galleryModule.show {

    display: block;

    animation: fadeIn 0.8s forwards;

}



/* --- Animaciones SVG Específicas --- */



.ojo-contenedor {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}



.ojo-contenedor > svg {

    width: 100%;

    height: 100%;

    position: relative;

    z-index: 1;

}



.parpado {

    position: absolute; top: 0; left: 0; width: 100%; height: 0%;

    background-color: #fff; /* Color del fondo del contenedor */

    z-index: 2;

    animation: parpadear 3s infinite;

    border-radius: 50% 50% 0 0;

}



@keyframes parpadear {

    0%, 90%, 100% { height: 0%; }

    95% { height: 100%; } /* Cierre rápido */

}



.estrella-valores {

    animation: rotarEstrella 5s linear infinite;

    display: inline-block;

    transform-origin: center;

    transform-box: fill-box;

}



@keyframes rotarEstrella {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



/* --- AJUSTES PARA MASCOTA EN TARJETAS M/V/V --- */

.mv-card.has-mascota {

    overflow: visible; /* Permitir que la mascota se salga */

    border: 3px solid var(--primary-color); /* Borde estático de reemplazo */

}



/* Ocultar el borde animado en las tarjetas con mascota para evitar conflictos */

.mv-card.has-mascota::before,

.mv-card.has-mascota::after {

    display: none;

}



/* El hover ahora es sobre la tarjeta misma para mostrar la mascota */

.mv-card.has-mascota:hover .mascota-asomada {

    opacity: 1;

    transform: translateY(-50%) rotate(0deg);

}





/* Contenedor del Botón o Tarjeta (necesario para el posicionamiento) */

.contenedor-con-mascota {

    position: relative;

    display: inline-block; /* O block, dependiendo del elemento */

}



/* Base de la Mascota (común para ambos lados) */

.mascota-asomada {

    position: absolute;

    width: 100px; /* Tamaño del capibara */

    height: 100px;

    background-size: contain;

    background-repeat: no-repeat;

    opacity: 0; /* Oculta por defecto */

    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    z-index: 10; /* Por encima de la tarjeta, pero detrás de su contenido si es hover */

}



/* --- ESTILO IZQUIERDO (Original) --- */

.contenedor-con-mascota .lado-izquierdo {

    left: 315px;

    top: -10%;

    transform: translateY(-50%) rotate(-10deg);

    background-image: url('image/capibara-encima.png');

}



/* --- ESTILO DERECHO (Efecto Espejo) --- */

.contenedor-con-mascota .lado-derecho {

    top: 270px;

    left: 5%;

    transform: translateX(-50%) rotate(5deg);

    background-image: url('image/capibara-debajo.png');

}





.info-card::before {

    content: '';

    position: absolute;

    width: 80px;

    height: 80px;

    background-size: contain;

    background-repeat: no-repeat;

    z-index: -1; /* Detrás de la card para el efecto de aparición */

    opacity: 0; /* Inicia invisible */

    pointer-events: none; /* Para que no interfiera con el hover de la tarjeta */

    /* Se elimina la transición general para usar animaciones específicas */

    transform: translateX(-50%) scale(1); /* Se mantiene la base del transform */

}



/* --- CLASES DE ESTADO (Se activan con JS) --- */



/* 1. Asomado por la Izquierda */

.info-card.capibara-izquierda::before {

    background-image: url('image/capibara-izquierda.png');

    top: 50%;

    left: -40px; /* Mitad del ancho para que se asome */

    opacity: 1;

    transform: translateY(-50%) scale(1);

}



/* 2. Asomado por la Derecha */

.info-card.capibara-derecha::before {

    background-image: url('image/capibara-derecha.png');

    top: 50%;

    right: -40px;

    opacity: 1;

    transform: translateY(-50%) scale(1);

}



/* 3. Asomado por Encima */

.info-card.capibara-encima::before {

    background-image: url('image/capibara-encima.png');

    top: var(--capi-top, -40px);

    left: var(--capi-left, 50%);

    right: var(--capi-right, auto);

    bottom: auto;

    /* Aplicar la animación de aparición */

    animation: aparecer-encima 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}



/* 4. Asomado por Debajo */

.info-card.capibara-debajo::before {

    background-image: url('image/capibara-debajo.png');

    top: auto;

    bottom: var(--capi-bottom, -40px);

    left: var(--capi-left, 50%);

    right: var(--capi-right, auto);

    /* Aplicar la animación de aparición */

    animation: aparecer-debajo 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}

ones SVG Específicas --- */



.ojo-contenedor {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}



.ojo-contenedor > svg {

    width: 100%;

    height: 100%;

    position: relative;

    z-index: 1;

}



.parpado {

    position: absolute; top: 0; left: 0; width: 100%; height: 0%;

    background-color: #fff; /* Color del fondo del contenedor */

    z-index: 2;

    animation: parpadear 3s infinite;

    border-radius: 50% 50% 0 0;

}



@keyframes parpadear {

    0%, 90%, 100% { height: 0%; }

    95% { height: 100%; } /* Cierre rápido */

}



.estrella-valores {

    animation: rotarEstrella 5s linear infinite;

    display: inline-block;

    transform-origin: center;

    transform-box: fill-box;

}



@keyframes rotarEstrella {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



/* --- AJUSTES PARA MASCOTA EN TARJETAS M/V/V --- */

.mv-card.has-mascota {

    overflow: visible; /* Permitir que la mascota se salga */

    border: 3px solid var(--primary-color); /* Borde estático de reemplazo */

}



/* Ocultar el borde animado en las tarjetas con mascota para evitar conflictos */

.mv-card.has-mascota::before,

.mv-card.has-mascota::after {

    display: none;

}



/* El hover ahora es sobre la tarjeta misma para mostrar la mascota */

.mv-card.has-mascota:hover .mascota-asomada {

    opacity: 1;

    transform: translateY(-50%) rotate(0deg);

}





/* Contenedor del Botón o Tarjeta (necesario para el posicionamiento) */

.contenedor-con-mascota {

    position: relative;

    display: inline-block; /* O block, dependiendo del elemento */

}



/* Base de la Mascota (común para ambos lados) */

.mascota-asomada {

    position: absolute;

    width: 100px; /* Tamaño del capibara */

    height: 100px;

    background-size: contain;

    background-repeat: no-repeat;

    opacity: 0; /* Oculta por defecto */

    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    z-index: 10; /* Por encima de la tarjeta, pero detrás de su contenido si es hover */

}



/* --- ESTILO IZQUIERDO (Original) --- */

.contenedor-con-mascota .lado-izquierdo {

    left: 315px;

    top: -10%;

    transform: translateY(-50%) rotate(-10deg);

    background-image: url('image/capibara-encima.png');

}



/* --- ESTILO DERECHO (Efecto Espejo) --- */

.contenedor-con-mascota .lado-derecho {

    top: 270px;

    left: 5%;

    transform: translateX(-50%) rotate(5deg);

    background-image: url('image/capibara-debajo.png');

}





.info-card::before {

    content: '';

    position: absolute;

    width: 80px;

    height: 80px;

    background-size: contain;

    background-repeat: no-repeat;

    z-index: -1; /* Detrás de la card para el efecto de aparición */

    opacity: 0; /* Inicia invisible */

    pointer-events: none; /* Para que no interfiera con el hover de la tarjeta */

    /* Se elimina la transición general para usar animaciones específicas */

    transform: translateX(-50%) scale(1); /* Se mantiene la base del transform */

}



/* --- CLASES DE ESTADO (Se activan con JS) --- */



/* 1. Asomado por la Izquierda */

.info-card.capibara-izquierda::before {

    background-image: url('image/capibara-izquierda.png');

    top: 50%;

    left: -40px; /* Mitad del ancho para que se asome */

    opacity: 1;

    transform: translateY(-50%) scale(1);

}



/* 2. Asomado por la Derecha */

.info-card.capibara-derecha::before {

    background-image: url('image/capibara-derecha.png');

    top: 50%;

    right: -40px;

    opacity: 1;

    transform: translateY(-50%) scale(1);

}



/* 3. Asomado por Encima */

.info-card.capibara-encima::before {

    background-image: url('image/capibara-encima.png');

    top: var(--capi-top, -40px);

    left: var(--capi-left, 50%);

    right: var(--capi-right, auto);

    bottom: auto;

    /* Aplicar la animación de aparición */

    animation: aparecer-encima 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}



/* 4. Asomado por Debajo */

.info-card.capibara-debajo::before {

    background-image: url('image/capibara-debajo.png');

    top: auto;

    bottom: var(--capi-bottom, -40px);

    left: var(--capi-left, 50%);

    right: var(--capi-right, auto);

    /* Aplicar la animación de aparición */

    animation: aparecer-debajo 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}



/* 5. Ocultándose por Encima */

.info-card.capibara-ocultando-encima::before {

    background-image: url('image/capibara-encima.png');

    top: var(--capi-top, -40px);

    left: var(--capi-left, 50%);

    opacity: 1; /* Inicia visible para poder desvanecerse */

    z-index: -1; /* Se va por detrás */

    animation: ocultar-encima 1.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;

}



/* 6. Ocultándose por Debajo */

.info-card.capibara-ocultando-debajo::before {

    background-image: url('image/capibara-debajo.png');

    bottom: var(--capi-bottom, -40px);

    left: var(--capi-left, 50%);

    opacity: 1; /* Inicia visible para poder desvanecerse */

    z-index: -1; /* Se va por detrás */

    animation: ocultar-debajo 1.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;

}



/* Nueva clase para poner el capibara al frente (se usará con JS) */

.info-card.capibara-al-frente::before {

    z-index: 10;

}



/* Keyframes para las animaciones */

@keyframes aparecer-encima {

    0% {

        opacity: 0;

        transform: translateX(-50%) translateY(40px) scale(0.8);

    }

    20% {

        opacity: 1;

        transform: translateX(-50%) translateY(30px) scale(0.9);

    }

    50% {

        transform: translateX(-50%) translateY(-15px) scale(1.1); /* Rebote arriba (Overshoot) */

    }

    75% {

        transform: translateX(-50%) translateY(5px) scale(0.95); /* Rebote abajo */

    }

    100% {

        opacity: 1;

        transform: translateX(-50%) translateY(0) scale(1); /* Posición final */

    }

}



@keyframes ocultar-encima {

    from {

        opacity: 1;

        transform: translateX(-50%) translateY(0);

    }

    to {

        opacity: 0;

        transform: translateX(-50%) translateY(40px); /* Se esconde hacia abajo */

    }

}



@keyframes ocultar-debajo {

    from {

        opacity: 1;

        transform: translateX(-50%) translateY(0);

    }

    to {

        opacity: 0;

        transform: translateX(-50%) translateY(-40px); /* Se esconde hacia arriba */

    }

}



@keyframes aparecer-debajo {

    0% {

        opacity: 0;

        transform: translateX(-50%) translateY(-40px); /* Empieza más arriba, invisible */

    }

    20% {

        opacity: 1;

        transform: translateX(-50%) translateY(-30px); /* Asoma un poco, ya visible */

    }

    100% {

        opacity: 1;

        transform: translateX(-50%) translateY(0); /* Termina de deslizarse al frente */

    }

}



/* --- RESPONSIVE (Móviles) --- */

@media (max-width: 768px) {

    .info-card::before {

        width: 60px; /* Capibara más pequeño en móvil */

        height: 60px;

        top: -30px;

        left: -30px;

    }



    /* --- Capibaras de M/V/V en Móvil --- */

    /* Configuración general del capibara */

.capibara {

  position: absolute;

  font-size: 2rem;

}

} /* Cierre correcto del media query max-width: 768px */

/* --- MÓVIL (Pantallas menores a 768px) --- */

@media (max-width: 767px) {

  /* 1. Ocultar en la card del medio */

  .hide-on-mobile {

    display: none;

  }



  /* 2. Posicionar colgado abajo en la última card */

  .card-bottom {

    position: relative; /* Contenedor padre */

  }



  .capibara-bottom {

    bottom: -50px; /* "Colgado" hacia afuera por abajo */

    left: 50%;

    transform: translateX(-50%);

  }

}



/* --- PC (Pantallas de 768px en adelante) --- */

@media (min-width: 768px) {

  .capibara-middle {

    display: block; /* Aparece en PC */

  }

  

  /* Posición normal en PC para la card de abajo */

  .capibara-bottom {

    top: 10px; 

    right: 10px;

  }

}



/* --- Estilos para la Galería de Imágenes (Reemplazo del 360) --- */

.gallery-item {

    position: relative;

    border-radius: 15px;

    overflow: hidden;

    cursor: pointer;

    height: 250px;

    box-shadow: 0 10px 20px rgba(0,0,0,0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.gallery-item:hover {

    transform: translateY(-5px) scale(1.02);

    box-shadow: 0 15px 30px rgba(0, 102, 197, 0.2);

}



.gallery-item:hover img {

    transform: scale(1.1);

}



.gallery-overlay-hover {

    position: absolute;

    inset: 0;

    background: rgba(0, 102, 197, 0.8); /* Azul institucional con transparencia */

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.3s ease;

    color: white;

}



.gallery-item:hover .gallery-overlay-hover {

    opacity: 1;

}



.gallery-overlay-hover i {

    font-size: 2rem;

    margin-bottom: 10px;

    color: #ffcc00;

}



.gallery-overlay-hover span {

    font-weight: 600;

    font-family: 'Montserrat', sans-serif;

    text-transform: uppercase;

    letter-spacing: 1px;

    text-align: center;

    padding: 0 10px;

}



/* --- Estilos para Múltiples Tours 360 --- */

.panorama-card {

    background: #fff;

    border-radius: 20px;

    padding: 12px; /* Marco blanco tipo polaroid moderno */

    box-shadow: 0 15px 35px rgba(0, 51, 102, 0.1);

    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;

    border: 1px solid rgba(0,0,0,0.05);

    position: relative;

    height: 100%;

}



.panorama-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 50px rgba(0, 51, 102, 0.25);

}



.panorama-badge {

    position: absolute;

    top: 25px;

    left: 25px;

    background: rgba(255, 255, 255, 0.95);

    color: var(--primary-color);

    padding: 6px 14px;

    border-radius: 30px;

    font-size: 0.8rem;

    font-weight: 700;

    z-index: 10;

    box-shadow: 0 4px 15px rgba(0,0,0,0.15);

    pointer-events: none;

    display: flex;

    align-items: center;

    gap: 6px;

    border: 1px solid rgba(0,0,0,0.05);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.panorama-wrapper {

    position: relative;

    border-radius: 15px;

    overflow: hidden;

    height: 400px;

    background-color: #f0f0f0;

}



.panorama-container {

    width: 100%;

    height: 400px; /* Altura estándar para los contenedores de panorama */

}



@media (max-width: 768px) {

    .panorama-container {

        height: 300px; /* Menos altura en móviles */

    }

}



.panorama-footer {

    padding: 15px 5px 5px 5px;

    text-align: center;

}



.panorama-title {

    font-family: 'Roboto Slab', serif;

    font-weight: 700;

    font-size: 1.25rem;

    color: var(--text-dark);

    margin-bottom: 5px;

}



.panorama-subtitle {

    font-size: 0.9rem;

    color: #666;

    display: block;

    font-weight: 500;

}



/* --- Estilos Cartelera Virtual --- */

.cartelera-section {

    position: relative;

    background: linear-gradient(180deg, #fdfdfd 0%, #eef7ff 100%); /* De blanco a un azul muy claro */

    padding: 4rem 0;

}



.news-wrapper {

    position: relative;

    padding: 0 20px;

}



.news-scroller {

    display: flex;

    overflow-x: auto;

    scroll-behavior: smooth;

    gap: 25px;

    padding: 20px 5px;

    scrollbar-width: none; /* Firefox */

}



.news-scroller::-webkit-scrollbar {

    display: none; /* Chrome/Safari */

}



/* --- Botón Especial: Conoce a Nuestro Equipo --- */

.btn-ver-equipo {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    padding: 12px 30px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 700;

    font-family: 'Montserrat', sans-serif;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.2);

    transition: all 0.3s ease;

    border: 2px solid rgba(255,255,255,0.3);

    margin-top: 15px;

}



.btn-ver-equipo:hover {

    transform: translateY(-3px) scale(1.05);

    box-shadow: 0 10px 25px rgba(0, 102, 197, 0.4);

    color: white;

}



/* --- Botón Flotante Fijo para "Nuestro Equipo" --- */

.btn-flotante-personal {

    position: fixed;

    bottom: 30px;

    left: 30px; /* A la izquierda para no tapar chats o scrollbars */

    z-index: 9999; /* Siempre encima de todo */

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    padding: 15px 25px;

    border-radius: 50px;

    text-decoration: none;

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

    box-shadow: 0 5px 20px rgba(0,0,0,0.3);

    border: 3px solid white;

    display: flex;

    align-items: center;

    gap: 12px;

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    animation: float-attention 3s ease-in-out infinite;

}



/* --- Aviso Preinscripciones Emergente --- */

.preinscripcion-popup {

    position: fixed;

    bottom: 30px; /* Misma posición que el botón de equipo */

    right: 30px; /* Misma posición que el botón de equipo */

    background: #fff3cd; /* Color amarillo pastel */

    color: #856404; /* Texto marrón oscuro para contraste */

    padding: 15px 25px; /* Mismo padding */

    border-radius: 50px; /* Mismo redondeado */

    box-shadow: 0 5px 20px rgba(0,0,0,0.3); /* Misma sombra */

    z-index: 10000; /* Asegura que esté por encima de todo */

    display: none; /* Se activa por JS */

    animation: float-attention 3s ease-in-out infinite; /* Misma animación */

    border: 3px solid #ffeaa7; /* Borde amarillo claro */

    align-items: center;

    gap: 12px;

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.preinscripcion-popup a {

    color: #856404; /* Color marrón oscuro para el enlace */

    text-decoration: none;

    font-weight: 700;

    font-size: 1rem; /* Ajustado para que se vea bien */

    display: flex;

    align-items: center;

    line-height: 1.2;

}



.btn-close-popup {

    position: absolute;

    top: 8px;

    right: 8px;

    background: #d9534f; /* Fondo rojo más visible */

    border: 2px solid #ffffff;

    font-size: 1.4rem; /* Tamaño de la 'x' */

    cursor: pointer;

    color: #ffffff; /* Blanco para buen contraste */

    border-radius: 50%;

    width: 36px; height: 36px;

    display: flex; align-items: center; justify-content: center;

    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);

}



@keyframes slideUpPopup {

    from { transform: translateY(100px); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }

}



.btn-flotante-personal:hover {

    transform: scale(1.1) translateY(-5px);

    box-shadow: 0 15px 30px rgba(0, 102, 197, 0.5);

    color: white;

    animation-play-state: paused; /* Pausa el movimiento al pasar el mouse */

}



.btn-close-popup:hover {

    background: #c9302c;

    transform: scale(1.08);

}



@media (max-width: 768px) { /* Ocultar botón flotante en móviles */

    .btn-flotante-personal { display: block !important; } /* Cambiado a block para mostrar en móviles */

    .preinscripcion-popup {

        bottom: auto;

        top: 135px; /* Ajustado para no tapar la cabecera */

        left: 20px;

        right: 20px;

        padding: 8px 12px;

        font-size: 0.8rem;

        border-radius: 25px;

    }

}



/* Animación de flotación suave para llamar la atención */

@keyframes float-attention {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-12px); }

}

.news-card {

    flex: 0 0 320px; /* Ancho fijo de tarjeta */

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 25px rgba(0, 51, 102, 0.08); /* Sombra azulada sutil */

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    cursor: pointer;

    display: flex;

    flex-direction: column;

    border: 1px solid #e9ecef; /* Borde muy sutil */

    position: relative; /* Para el pseudo-elemento del borde inferior */

}



/* Borde inferior con gradiente */

.news-card::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 5px; /* Grosor del borde */

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), #ffcc00);

    transition: height 0.3s ease;

}



.news-card:hover {

    transform: translateY(-12px) scale(1.02);

    box-shadow: 0 20px 40px rgba(0, 102, 197, 0.25); /* Sombra más pronunciada y azul */

}



.news-card:hover::after {

    height: 8px; /* El borde se hace más grueso al pasar el mouse */

}



.news-img-wrapper {

    height: 200px;

    position: relative;

    overflow: hidden;

}



.news-img-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.news-card:hover .news-img-wrapper img {

    transform: scale(1.1);

}



.news-cat-badge {

    position: absolute;

    top: 15px;

    left: 15px; /* Cambiado a la izquierda */

    right: auto;

    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); /* Gradiente de colores institucionales */

    color: white;

    padding: 6px 15px; /* Un poco más de padding */

    border-radius: 30px;

    font-size: 0.8rem; /* Ligeramente más grande */

    font-weight: 700;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    border: 2px solid white; /* Borde blanco para resaltar */

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



/* Colores dinámicos por categoría en Cartelera */

.news-cat-badge.cat-Deportes { background: linear-gradient(45deg, #ff4b2b, #ff416c); }

.news-cat-badge.cat-Cultura { background: linear-gradient(45deg, #8e2de2, #4a00e0); }

.news-cat-badge.cat-Noticia { background: linear-gradient(45deg, #0066c5, #00c6ff); }

.news-cat-badge.cat-Aviso { 

    background: #ffcc00; 

    color: #000; 

    animation: avisoShake 1.5s infinite;

}



.news-cat-badge.cat-Académico { background: linear-gradient(45deg, #11998e, #38ef7d); }



/* --- NUEVO ESTILO SORPRESA: Tarjetas de Profesores --- */



    .news-cat-badge-aviso {

        background: #fffb00; /* Amarillo institucional */

        color: var(--text-dark);

        animation: avisoShake 1.5s linear infinite;

        border-color: var(--text-dark) !important; /* Borde oscuro para mejor contraste */

    }



.news-cat-badge-aviso:hover {

    animation-play-state: paused; /* Pausa la animación al pasar el mouse para facilitar la lectura */

}



@keyframes avisoShake {

    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { transform: rotate(4deg); }

    10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { transform: rotate(-4deg); }

}



.news-content {

    padding: 25px;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.news-date {

    font-size: 0.85rem;

    color: #999;

    margin-bottom: 8px;

    display: block;

}



.news-content h5 {

    font-weight: 700;

    margin-bottom: 12px;

    color: var(--primary-color); /* Título con color primario */

    line-height: 1.4;

    font-size: 1.2rem; /* Título más grande */

}



.news-content p {

    font-size: 0.95rem;

    color: #666;

    flex-grow: 1;

    margin-bottom: 20px;

    line-height: 1.6;

    

    /* Nuevo estilo: Altura fija con degradado */

    height: 4.8em; /* Muestra aprox 3 líneas */

    overflow: hidden;

    position: relative;

    display: block;

}



/* Efecto de desvanecimiento al final del texto */

.news-content p::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 2em;

    background: linear-gradient(transparent, #fff);

}



.read-more {

    color: var(--primary-color);

    font-weight: 700;

    font-size: 0.85rem;

    margin-top: auto;

    transition: all 0.3s ease;

    background: rgba(0, 102, 197, 0.08);

    padding: 10px 20px;

    border-radius: 50px;

    width: fit-content;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.news-card:hover .read-more {

    background: var(--primary-color);

    color: white;

    box-shadow: 0 5px 15px rgba(0, 102, 197, 0.4); /* Sombra más fuerte */

    transform: translateX(5px) scale(1.05); /* Efecto de empuje y crecimiento */

}



.scroll-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 50px; /* Más grandes */

    height: 50px; /* Más grandes */

    border-radius: 50%;

    background: white;

    border: 1px solid #ddd;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    color: var(--primary-color);

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s;

}



.scroll-btn:hover {

    background: var(--primary-color);

    color: white;

    transform: translateY(-50%) scale(1.1);

    border-color: var(--primary-color);

}



.scroll-btn.left { left: -15px; } /* Ligeramente más afuera */

.scroll-btn.right { right: -15px; } /* Ligeramente más afuera */



@media (max-width: 768px) {

    .scroll-btn { display: none; } /* En móvil se usa el dedo para deslizar */

    .news-wrapper { padding: 0; }

    .news-scroller { padding: 20px 10px; }

}



/* --- Botón Pegajoso para Ocultar Galería --- */

.btn-collapse-gallery-sticky {

    position: fixed;

    /* Se posiciona 15px por debajo de donde termina el header */

    top: calc(var(--header-height, 80px) + 15px);

    left: 50%;

    z-index: 1050; /* Por encima de la mayoría de elementos, pero debajo de modales */



    /* Reutilizamos estilos para consistencia */

    background-color: var(--secondary-color);

    color: white;

    border-radius: 50px;

    padding: 0.6rem 1.2rem;

    font-weight: 600;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    border: 2px solid white;

    box-shadow: 0 8px 20px rgba(0,0,0,0.25);

    cursor: pointer;



    /* Lógica de aparición/desaparición */

    opacity: 0;

    transform: translate(-50%, -30px); /* Inicia arriba y oculto */

    pointer-events: none;

    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.btn-collapse-gallery-sticky.visible {

    opacity: 1;

    transform: translate(-50%, 0);

    pointer-events: auto;

}



.btn-collapse-gallery-sticky:hover {

    background-color: var(--primary-color);

    /* La animación de 'visible' ya incluye un transform, así que lo combinamos */

    transform: translate(-50%, -2px) scale(1.05);

}



/* --- Badge Llamativo de Interacción para Galería --- */

.gallery-hint-wrapper {

    display: flex;

    justify-content: center;

}



.gallery-hint-badge {

    background: linear-gradient(135deg, #ffcc00 0%, #ffdb4d 100%); /* Amarillo Institucional Brillante */

    color: var(--primary-color); /* Azul institucional para el texto */

    padding: 0.8rem 2rem;

    border-radius: 50px;

    font-weight: 800; /* Texto bien grueso */

    font-family: 'Montserrat', sans-serif;

    box-shadow: 0 10px 20px rgba(255, 204, 0, 0.4); /* Sombra resplandeciente */

    border: 2px solid white;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    animation: pulse-attention 2s infinite; /* Animación de latido */

    cursor: default;

    z-index: 5;

}



.gallery-hint-badge i {

    font-size: 1.3rem;

}



/* --- Keyframes para el efecto de llamada de atención --- */

@keyframes pulse-attention {

    0% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7);

    }

    70% {

        transform: scale(1.05);

        box-shadow: 0 0 0 15px rgba(255, 204, 0, 0); /* Efecto de onda expandiéndose */

    }

    100% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(255, 204, 0, 0);

    }

}



/* --- NUEVO ESTILO: Overlay y Tarjetas de Equipo Docente --- */



/* El fondo oscuro inmersivo */

.team-overlay {

    position: fixed;

    top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(0, 15, 30, 0.95); /* Azul muy oscuro casi negro */

    backdrop-filter: blur(15px);

    z-index: 10000;

    display: none; /* Oculto por defecto */

    overflow-y: auto;

    padding: 60px 20px;

    animation: fadeIn 0.5s ease;

}



.team-container {

    max-width: 1200px;

    margin: 0 auto;

}



.team-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 40px;

    padding-bottom: 50px;

}



/* Estilo Sorpresa: Tarjeta Glassmorphism Deslizante */

.prof-card {

    position: relative;

    height: 400px;

    background: #000;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 20px 50px rgba(0,0,0,0.5);

    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease;

    cursor: default;

    border: 1px solid rgba(255,255,255,0.1);

    border-top: 4px solid var(--accent-color); /* Línea superior amarilla sutil */

}



.prof-card:hover {

    transform: translateY(-10px) scale(1.02);

    box-shadow: 0 30px 60px rgba(0, 102, 197, 0.3); /* Resplandor azul al flotar */

    border-color: rgba(255, 255, 255, 0.3);

}



.prof-img-box {

    width: 100%;

    height: 100%;

}



.prof-img-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.8s ease;

    filter: grayscale(20%); /* Un poco gris al inicio para elegancia */

}



.prof-card:hover .prof-img-box img {

    transform: scale(1.15);

    filter: grayscale(0%); /* Color completo al hover */

}



/* Panel de información deslizante */

.prof-content {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    background: linear-gradient(to top, var(--primary-color) 0%, rgba(0, 51, 102, 0.8) 100%);

    padding: 25px;

    color: white;

    transform: translateY(calc(100% - 90px)); /* Solo muestra el nombre al principio */

    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);

    backdrop-filter: blur(5px);

    border-top: 1px solid rgba(255,255,255,0.2);

}



.prof-card:hover .prof-content {

    transform: translateY(0); /* Se desliza hacia arriba */

}



.prof-name {

    font-family: 'Roboto Slab', serif;

    font-size: 1.4rem;

    margin-bottom: 5px;

    color: white;

    text-shadow: 0 2px 4px rgba(0,0,0,0.5);

}



.prof-role {

    color: var(--accent-color); /* Amarillo */

    font-weight: 600;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 15px;

    display: block;

}



.prof-desc {

    font-size: 0.9rem;

    line-height: 1.6;

    color: rgba(255,255,255,0.9);

    margin-bottom: 20px;

    opacity: 0; /* Oculto inicialmente */

    transition: opacity 0.4s ease 0.1s;

}



.prof-card:hover .prof-desc {

    opacity: 1;

}



.prof-email {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 0.85rem;

    color: #aed8ff;

    padding-top: 15px;

    border-top: 1px solid rgba(255,204,0,0.3); /* Separador con un toque de amarillo */

    opacity: 0;

    transition: opacity 0.4s ease 0.2s;

}



.prof-email i {

    color: var(--accent-color); /* Icono de sobre en amarillo para resaltar */

    font-size: 1rem;

}



.prof-card:hover .prof-email {

    opacity: 1;

}



/* Botón cerrar overlay */

.close-team-btn {

    position: fixed;

    top: 30px;

    right: 30px;

    width: 60px; height: 60px;

    background: white;

    border-radius: 50%;

    border: none;

    color: var(--primary-color);

    font-size: 2rem;

    display: flex; align-items: center; justify-content: center;

    cursor: pointer;

    box-shadow: 0 0 20px rgba(255,255,255,0.2);

    z-index: 10001;

    transition: all 0.3s ease;

}



.close-team-btn:hover {

    transform: rotate(90deg) scale(1.1);

    background: var(--accent-color);

    color: var(--primary-color);

}



/* Estilo de Categoría en Admin / Formulario */

.category-dot {

    height: 10px;

    width: 10px;

    border-radius: 50%;

    display: inline-block;

    margin-right: 5px;

}