/* Variables de Colores */
:root {
    --munet-green: #8DC63F; /* Basado en el verde del logo */
    --munet-gray: #808080;   /* Basado en el gris del texto del logo */
    --light-gray-bg: #f8f8f8;
    --dark-gray-text: #333; /* Usado como color de fondo para tarjetas oscuras */
    --white: #ffffff;
    --black: #000000;

    /* Nuevos colores para las tarjetas (más vibrantes y tecnológicos) */
    --card-red: #666666; /* Rojo brillante */
    --card-blue-custom: #666666; /* Azul eléctrico */
    --card-green-custom: #666666; /* Verde vivo */
    --card-orange: #666666; /* Naranja intenso */
}

/* Reset Básico y Estilos Generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: var(--dark-gray-text);
    background-color: var(--light-gray-bg);
    overflow-x: hidden; /* Evita el scroll horizontal al abrir el menú lateral */
}

a {
    color: var(--munet-green);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
}

/* Encabezado Principal */
.main-header {
    background-color: var(--white);
    padding: 1rem 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
    z-index: 20;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-container img {
    height: 50px; /* Reducimos el tamaño del logo para que coincida */
    margin-right: 10px; /* Reducimos el margen */
}

.logo-container .tagline {
    font-size: 0.6em; /* === TAMAÑO DE FUENTE MÁS PEQUEÑO === */
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.logo-container .tagline-gray {
    color: var(--munet-gray);
}

.logo-container .tagline-green {
    color: var(--munet-green);
}

/* Estilos del Menú Principal (Escritorio) */
.main-nav {
    flex-grow: 1;
    text-align: center;
}

.main-nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-nav ul li {
    margin: 0 8px; /* Reducimos el espacio entre los ítems del menú */
}

.main-nav ul li a {
    color: var(--munet-green);
    font-weight: 700;
    padding: 8px 12px; /* Reducimos el padding */
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 5px;
    display: block;
    font-size: 0.9em; /* === TAMAÑO DE FUENTE MÁS PEQUEÑO === */
}

.main-nav ul li a:hover,
.main-nav ul li a.active {
    background-color: var(--munet-green);
    color: var(--white);
    text-decoration: none;
}

/* --- ESTILOS DEL MENÚ RESPONSIVO (OCULTO EN ESCRITORIO) --- */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    z-index: 21;
}

.hamburger {
    display: block;
    width: 20px;
    height: 2px; /* Hamburguesa más pequeña */
    background-color: var(--munet-green);
    margin: 4px 0;
    transition: all 0.3s ease;
}

.menu-toggle.active .hamburger:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active .hamburger:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.menu-toggle.active .hamburger:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}
/* Sidebar Overlay (fondo oscuro) */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 998; /* Debajo del menú lateral, sobre el contenido */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Sidebar Menu (el menú que se desliza) */
.sidebar-menu {
    position: fixed;
    top: 0;
    right: -300px; /* Oculto fuera de la pantalla */
    width: 280px; /* Ancho del menú lateral */
    height: 100%;
    background-color: var(--dark-gray-text); /* Fondo oscuro del menú */
    color: var(--white);
    z-index: 999; /* Sobre todo lo demás */
    box-shadow: -3px 0 10px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    padding: 20px;
    overflow-y: auto; /* Para scroll si el contenido es largo */
}

.sidebar-menu.active {
    right: 0; /* Visible en pantalla */
}

.sidebar-menu nav ul {
    display: flex;
    flex-direction: column;
    padding-top: 50px; /* Espacio para el botón de cerrar */
}

.sidebar-menu nav ul li {
    margin-bottom: 15px;
}

.sidebar-menu nav ul li a {
    color: var(--white);
    font-size: 1.2em;
    padding: 10px 0;
    display: block;
    transition: color 0.3s ease;
}

.sidebar-menu nav ul li a:hover {
    color: var(--munet-green);
}

.close-menu {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2em;
    color: var(--white);
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 5px;
}

.close-menu:hover {
    color: var(--munet-green);
}
/* ------------------------------------------------ */

/* Sección Hero (Inicio) - con la imagen y efectos */
.hero-section {
    position: relative;
    width: 100%;
    height: 70vh;
    background-image: url('../images/tech_background.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    overflow: hidden;
}

/* Capa de Superposición para Efectos - CON 1C.JPG */
.hero-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/2c.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.4); /* Añade un color de fondo negro semi-transparente */
    background-blend-mode: multiply; /* Multiplica la imagen con el color de fondo para oscurecer */
    z-index: 1;
    opacity: 0.8; /* Aumenta un poco la opacidad general para que la imagen sea más sólida */
}

/* Contenedor para Partículas */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
}

/* Efecto de Glitch o Líneas de Escaneo */
.hero-image-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        transparent,
        transparent 1px,
        rgba(141, 198, 63, 0.1) 1.5px,
        transparent 2px
    );
    animation: scanline 8s linear infinite;
    opacity: 0.15;
    pointer-events: none;
    z-index: 2;
}

@keyframes scanline {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

/* Contenido del Hero - Slogan y Logo */
.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 20px;
}

.logo-animation-container {
    /* Estilos para el contenedor del logo y el eslogan */
}

.animated-logo {
    height: 120px;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 30px var(--munet-green));
    transition: filter 0.5s ease-in-out;
}

.slogan {
    font-size: 2.5em;
    font-weight: 700;
    margin-top: 20px;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(141, 198, 63, 0.5);
    text-transform: uppercase;
    color: var(--white);
}

.slogan-line {
    display: block;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: none;
}

.slogan-line.is-animating {
    animation: slide-up-slogan-js 1s forwards var(--delay);
}

.slogan-line.is-animating::before {
    animation: reveal-text 1.5s forwards var(--delay);
}

@keyframes slide-up-slogan-js {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reveal-text {
    0% { width: 0; }
    100% { width: 100%; }
}

/* Estilos específicos para la sección Quiénes Somos */
.content-section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--white); /* Fondo blanco para la sección general */
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden; /* Asegura que la rejilla no se desborde */
}

/* Fondo de rejilla/circuito para la sección de contenido */
.content-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, var(--light-gray-bg) 0, var(--light-gray-bg) 1px, transparent 1px, transparent 30px),
        repeating-linear-gradient(90deg, var(--light-gray-bg) 0, var(--light-gray-bg) 1px, transparent 1px, transparent 30px);
    background-size: 30px 30px;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}


.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px;
    margin-top: 40px;
    position: relative;
    z-index: 1; /* Asegura que la cuadrícula esté sobre el fondo de rejilla de la sección */
}

.tech-card {
    color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    text-align: center;
    position: relative;
    overflow: hidden; /* Muy importante para el efecto de borde */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tech-card:hover {
    transform: translateY(-8px); /* Pequeño levantamiento al pasar el ratón */
    /* Mantiene el brillo verde del MUNET para coherencia, o ajusta si quieres que brille con el color de la tarjeta */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 30px var(--munet-green);
}

/* Efecto de borde que se ilumina / circuito */
.card-glow-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 0 0 transparent; /* Sombra inicial transparente */
    transition: box-shadow 0.5s ease-out;
    pointer-events: none; /* No interfiere con el clic */
    z-index: 0; /* Detrás del contenido real de la tarjeta */
}

/* Ajusta el brillo del borde para que sea del color principal de la tarjeta al pasar el ratón */
.tech-card-red:hover .card-glow-border {
    box-shadow: 0 0 20px var(--card-red), 0 0 40px var(--card-red), 0 0 60px var(--card-red) inset;
}
.tech-card-blue-custom:hover .card-glow-border {
    box-shadow: 0 0 20px var(--card-blue-custom), 0 0 40px var(--card-blue-custom), 0 0 60px var(--card-blue-custom) inset;
}
.tech-card-green-custom:hover .card-glow-border {
    box-shadow: 0 0 20px var(--card-green-custom), 0 0 40px var(--card-green-custom), 0 0 60px var(--card-green-custom) inset;
}
.tech-card-orange:hover .card-glow-border {
    box-shadow: 0 0 20px var(--card-orange), 0 0 40px var(--card-orange), 0 0 60px var(--card-orange) inset;
}


/* Efecto de líneas de escaneo sobre la tarjeta (sutil) */
.tech-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        transparent,
        rgba(141, 198, 63, 0.05) 1px,
        transparent 2px
    );
    background-size: 100% 50px; /* Tamaño de las líneas */
    animation: scan-lines-card 5s linear infinite;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1; /* Entre el borde y el contenido */
}

.tech-card:hover::after {
    opacity: 1; /* Visible al pasar el ratón */
}

@keyframes scan-lines-card {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}


/* Iconos dentro de las tarjetas */
.card-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(141, 198, 63, 0.7); /* Mantiene el brillo verde principal */
    position: relative;
    z-index: 2;
}

.card-icon img {
    width: 40px;
    height: 40px;
    filter: invert(100%);
}

.tech-card h3 {
    cursor: pointer; /* Indicar que el título es clicable */
    position: relative;
    padding-right: 30px; /* Espacio para el icono de expandir/colapsar */
    font-size: 1.8em;
    margin-bottom: 15px;
    text-transform: uppercase;
    z-index: 2;
    display: flex; /* Para alinear el texto y el icono */
    align-items: center;
    justify-content: center; /* Centrar el texto en h3 */
    width: 100%; /* Asegura que ocupe el ancho para el padding-right */
    transition: color 0.3s ease; /* Transición para el color del título al pasar el ratón */
}
/* Cambia el color del título a verde MUNET al pasar el ratón sobre la tarjeta */
.tech-card:hover h3 {
    color: var(--munet-green);
}


/* Flecha para indicar expansión */
.tech-card h3::after {
    content: '\25BC'; /* Unicode para una flecha hacia abajo */
    position: absolute;
    right: 0; /* Ajusta la posición de la flecha */
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease, color 0.3s ease; /* Añadida transición para el color */
    font-size: 0.7em; /* Tamaño de la flecha */
    color: var(--munet-green); /* Color de la flecha */
    font-weight: normal; /* Asegura que la flecha no sea negrita */
}

.tech-card.is-open h3::after {
    transform: translateY(-50%) rotate(180deg); /* La flecha gira hacia arriba cuando se expande */
    color: var(--munet-green); /* Asegura que siga verde al abrirse */
}

/* ESTILOS PARA LA EXPANSIÓN DEL CONTENIDO */
.tech-card .card-content {
    /* Mantiene las transiciones y color */
    transition: max-height 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), opacity 0.8s ease-in-out, padding-top 0.8s ease-in-out;
    padding-top: 0;
    text-align: left;
    color: var(--white);
    
    /* === PROPIEDADES DE OCULTAMIENTO PREDETERMINADO === */
    max-height: 0 !important; /* Fuerza a 0px */
    opacity: 0 !important;    /* Fuerza a 0 */
    overflow: hidden !important; /* Fuerza el ocultamiento del contenido desbordado */
    visibility: hidden !important; /* Fuerza la invisibilidad total y no interactiva */
    display: block !important; /* Asegura que el elemento se comporte como un bloque para max-height */
    /* ================================================= */
}

.tech-card.is-open .card-content {
    max-height: 1000px !important; /* Un valor lo suficientemente grande para el contenido */
    opacity: 1 !important;        /* Fuerza la opacidad a 1 */
    padding-top: 20px !important; /* Fuerza el padding */
    visibility: visible !important; /* Fuerza la visibilidad */
}

/* Efecto de texto que se revela/glitch para el contenido que aparece */
.tech-card.is-open .card-content p,
.tech-card.is-open .card-content ol li {
    opacity: 0; /* Oculto inicialmente para la animación individual */
    transform: translateY(10px); /* Ligeramente desplazado */
    animation: text-reveal-glitch 1.5s forwards; /* Animación de revelado con glitch */
    /* El animation-delay se manejará en JavaScript para un efecto escalonado */
}

@keyframes text-reveal-glitch {
    0% { opacity: 0; transform: translateY(10px); filter: blur(5px) brightness(0.5); }
    50% { opacity: 1; transform: translateY(0); filter: blur(0px) brightness(1); }
    52% { filter: contrast(150%) brightness(1.2); } /* Un breve "glitch" visual */
    54% { filter: contrast(100%) brightness(1); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0px) brightness(1); }
}

/* === ESTILOS DE COLOR PARA CADA TIPO DE TARJETA (adaptados con variables) === */

.tech-card-red {
    background-color: var(--card-red);
    border-color: var(--card-red);
}
.tech-card-red .card-icon {
    background-color: var(--card-red);
    box-shadow: 0 0 20px rgba(229, 57, 53, 0.7); /* Sombra luminosa roja */
}
.tech-card-red h3 {
    color: var(--white);
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.tech-card-blue-custom {
    background-color: var(--card-blue-custom);
    border-color: var(--card-blue-custom);
}
.tech-card-blue-custom .card-icon {
    background-color: var(--card-blue-custom);
    box-shadow: 0 0 20px rgba(30, 136, 229, 0.7); /* Sombra luminosa azul */
}
.tech-card-blue-custom h3 {
    color: var(--white);
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.tech-card-green-custom {
    background-color: var(--card-green-custom);
    border-color: var(--card-green-custom);
}
.tech-card-green-custom .card-icon {
    background-color: var(--card-green-custom);
    box-shadow: 0 0 20px rgba(67, 160, 71, 0.7); /* Sombra luminosa verde */
}
.tech-card-green-custom h3 {
    color: var(--white);
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.tech-card-orange {
    background-color: var(--card-orange);
    border-color: var(--card-orange);
}
.tech-card-orange .card-icon {
    background-color: var(--card-orange);
    box-shadow: 0 0 20px rgba(251, 140, 0, 0.7); /* Sombra luminosa naranja */
}
.tech-card-orange h3 {
    color: var(--white);
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
    .main-header {
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem 1.5rem;
    }

    .logo-container {
        margin-bottom: 0;
    }

    .main-nav {
        display: none; /* Ocultar el menú principal en móviles */
    }

    .menu-toggle {
        display: block; /* Mostrar el botón de hamburguesa en móviles */
    }

    body.menu-open {
        overflow: hidden;
    }

    .hero-section {
        height: 50vh;
    }

    .slogan {
        font-size: 1.8em;
    }

    .content-section {
        padding: 20px 15px;
    }

    .tech-grid {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 20px;
    }
    .tech-card {
        padding: 20px;
    }
    .tech-card h3 {
        font-size: 1.5em;
    }
}

@media (max-width: 480px) {
    .logo-container img {
        height: 45px;
    }

    .logo-container .tagline {
        font-size: 0.7em;
    }

    .slogan {
        font-size: 1.5em;
        letter-spacing: 1px;
    }

    .sidebar-menu {
        width: 100%;
        right: -100%;
    }
    .sidebar-menu.active {
        right: 0;
    }
}

/* === FOOTER STYLES === */
.main-footer {
    background-color: var(--dark-gray-text);
    color: var(--white);
    text-align: center;
    padding: 2rem;
    margin-top: 40px;
}

.footer-nav ul {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    /* Ajustar si no hay elementos o solo uno */
    margin-top: 0;
    padding: 0;
}

.footer-nav ul li {
    margin: 0 15px;
}

.footer-nav ul li a {
    color: var(--white);
    transition: color 0.3s ease;
}

.footer-nav ul li a:hover {
    color: var(--munet-green);
    text-decoration: none;
}
/* === END FOOTER STYLES === */
/* ... (código CSS anterior hasta la sección Quiénes Somos) ... */

/* ESTILOS ESPECÍFICOS PARA LA SECCIÓN QUIÉNES SOMOS */
.content-section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--white);
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

.content-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, var(--light-gray-bg) 0, var(--light-gray-bg) 1px, transparent 1px, transparent 30px),
        repeating-linear-gradient(90deg, var(--light-gray-bg) 0, var(--light-gray-bg) 1px, transparent 1px, transparent 30px);
    background-size: 30px 30px;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

.tech-card {
    color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer; /* Indicar que la tarjeta es clicable */
}

.tech-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 30px var(--munet-green);
}

.card-glow-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow 0.5s ease-out;
    pointer-events: none;
    z-index: 0;
}

/* Brillo del borde al pasar el ratón (se adapta al color de la tarjeta) */
.tech-card-red:hover .card-glow-border { box-shadow: 0 0 20px var(--card-red), 0 0 40px var(--card-red), 0 0 60px var(--card-red) inset; }
.tech-card-blue-custom:hover .card-glow-border { box-shadow: 0 0 20px var(--card-blue-custom), 0 0 40px var(--card-blue-custom), 0 0 60px var(--card-blue-custom) inset; }
.tech-card-green-custom:hover .card-glow-border { box-shadow: 0 0 20px var(--card-green-custom), 0 0 40px var(--card-green-custom), 0 0 60px var(--card-green-custom) inset; }
.tech-card-orange:hover .card-glow-border { box-shadow: 0 0 20px var(--card-orange), 0 0 40px var(--card-orange), 0 0 60px var(--card-orange) inset; }

/* Efecto de líneas de escaneo sobre la tarjeta */
.tech-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( transparent, rgba(141, 198, 63, 0.05) 1px, transparent 2px );
    background-size: 100% 50px;
    animation: scan-lines-card 5s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
.tech-card:hover::after { opacity: 1; }
@keyframes scan-lines-card {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

.card-icon {
    width: 70px; height: 70px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(141, 198, 63, 0.7);
    position: relative; z-index: 2;
}
.card-icon img { width: 40px; height: 40px; filter: invert(100%); }

.tech-card h3 {
    font-size: 1.8em; margin-bottom: 15px; text-transform: uppercase;
    position: relative; z-index: 2;
    /* Quitamos cursor:pointer y padding-right/::after si el botón "Ver más" es el activador principal */
    cursor: default; /* Ya no es el activador principal */
    padding-right: 0;
}
.tech-card h3::after { content: none; } /* Elimina la flecha */


.tech-card .card-summary {
    text-align: left;
    font-size: 0.95em;
    color: var(--white);
    line-height: 1.7;
    margin-bottom: 20px;
    z-index: 2;
}

.open-modal-btn {
    background-color: var(--munet-green);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(141, 198, 63, 0.5); /* Brillo sutil */
    z-index: 2;
}

.open-modal-btn:hover {
    background-color: #7BBF35; /* Un verde ligeramente más claro */
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.8);
}


/* === NUEVOS ESTILOS PARA EL MODAL === */
.tech-modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Posición fija en la pantalla */
    z-index: 1000; /* Siempre encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll si el contenido es muy largo */
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
    backdrop-filter: blur(5px); /* Efecto de desenfoque en el fondo (moderno) */
    animation: fadeIn 0.3s ease-out; /* Animación de aparición */
}

.tech-modal-content {
    background-color: var(--dark-gray-text); /* Fondo oscuro para el contenido del modal */
    margin: 5% auto; /* Centrar el modal, ajusta según necesidad */
    padding: 30px;
    border: 2px solid var(--munet-green); /* Borde verde brillante */
    border-radius: 10px;
    width: 80%; /* Ancho del modal */
    max-width: 800px; /* Ancho máximo */
    box-shadow: 0 0 30px rgba(141, 198, 63, 0.8); /* Sombra luminosa */
    position: relative;
    color: var(--white);
    animation: zoomIn 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Animación de zoom */
    display: flex;
    flex-direction: column;
}

.tech-modal-content #modalTitle {
    color: var(--munet-green);
    font-size: 2.2em;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px dashed rgba(141, 198, 63, 0.5); /* Línea punteada tecnológica */
    padding-bottom: 10px;
}

.tech-modal-content .modal-body {
    font-size: 1em;
    line-height: 1.8;
    max-height: 70vh; /* Altura máxima del cuerpo del modal antes del scroll */
    overflow-y: auto; /* Scroll para el contenido largo del modal */
    padding-right: 10px; /* Espacio para la barra de scroll */
}

/* Estilos de la barra de scroll para el modal (personalizado, solo Webkit) */
.modal-body::-webkit-scrollbar {
    width: 8px;
}
.modal-body::-webkit-scrollbar-track {
    background: #555;
    border-radius: 10px;
}
.modal-body::-webkit-scrollbar-thumb {
    background: var(--munet-green);
    border-radius: 10px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
    background: #7BBF35;
}


.close-button {
    color: var(--white);
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 2.5em;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--card-red); /* Rojo al pasar el ratón para cerrar */
    text-decoration: none;
    outline: none;
}

/* Animaciones para el modal */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Animación de cierre del modal (clase añadida/quitada por JS) */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

.tech-modal.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}
.tech-modal.fade-out .tech-modal-content {
    animation: zoomOut 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

/* Fin de estilos de modal */

/* ... (resto de estilos de tarjeta y Media Queries, ya que solo afectan la visualización general) ... */
/* La parte de .tech-card .card-content con max-height:0 y !important ya no es necesaria con modales */
/* Pero la dejo para referencia si decides volver a la implementación anterior */

/* ESTILOS PARA LA EXPANSIÓN DEL CONTENIDO (YA NO SE USAN CON MODALES, PERO SE MANTIENEN EN EL CSS) */
/*
.tech-card .card-content {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), opacity 0.8s ease-in-out, padding-top 0.8s ease-in-out;
    padding-top: 0 !important;
    text-align: left;
    visibility: hidden !important;
    color: var(--white);
    display: block !important;
}

.tech-card.is-open .card-content {
    max-height: 1000px !important;
    opacity: 1 !important;
    padding-top: 20px !important;
    visibility: visible !important;
}
.tech-card.is-open .card-content p,
.tech-card.is-open .card-content ol li {
    opacity: 0;
    transform: translateY(10px);
    animation: text-reveal-glitch 1.5s forwards;
}
@keyframes text-reveal-glitch {
    0% { opacity: 0; transform: translateY(10px); filter: blur(5px) brightness(0.5); }
    50% { opacity: 1; transform: translateY(0); filter: blur(0px) brightness(1); }
    52% { filter: contrast(150%) brightness(1.2); }
    54% { filter: contrast(100%) brightness(1); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0px) brightness(1); }
}
*/
/* FIN DE ESTILOS DE EXPANSIÓN (COMENTADOS/IGNORADOS SI SE USAN MODALES) */


/* === COLORES DE LAS TARJETAS === */
.tech-card-red { background-color: var(--card-red); border-color: var(--card-red); }
.tech-card-red .card-icon { background-color: var(--card-red); box-shadow: 0 0 20px rgba(102, 102, 102, 0.7); }
.tech-card-red h3 { color: var(--white); text-shadow: 0 0 10px rgba(255,255,255,0.5); }

.tech-card-blue-custom { background-color: var(--card-blue-custom); border-color: var(--card-blue-custom); }
.tech-card-blue-custom .card-icon { background-color: var(--card-blue-custom); box-shadow: 0 0 20px rgba(102, 102, 102, 0.7); }
.tech-card-blue-custom h3 { color: var(--white); text-shadow: 0 0 10px rgba(255,255,255,0.5); }

.tech-card-green-custom { background-color: var(--card-green-custom); border-color: var(--card-green-custom); }
.tech-card-green-custom .card-icon { background-color: var(--card-green-custom); box-shadow: 0 0 20px rgba(102, 102, 102, 0.7); }
.tech-card-green-custom h3 { color: var(--white); text-shadow: 0 0 10px rgba(255,255,255,0.5); }

.tech-card-orange { background-color: var(--card-orange); border-color: var(--card-orange); }
.tech-card-orange .card-icon { background-color: var(--card-orange); box-shadow: 0 0 20px rgba(102, 102, 102, 0.7); }
.tech-card-orange h3 { color: var(--white); text-shadow: 0 0 10px rgba(255,255,255,0.5); }

/* MEDIA QUERIES (se mantienen igual, solo afectan el layout general y el menú responsivo) */
@media (max-width: 768px) {
    .main-header { flex-direction: row; justify-content: space-between; padding: 1rem 1.5rem; }
    .logo-container { margin-bottom: 0; }
    .main-nav { display: none; }
    .menu-toggle { display: block; }
    body.menu-open { overflow: hidden; }
    .hero-section { height: 50vh; }
    .slogan { font-size: 1.8em; }
    .content-section { padding: 20px 15px; }
    .tech-grid { grid-template-columns: 1fr; padding: 15px; gap: 20px; }
    .tech-card { padding: 20px; }
    .tech-card h3 { font-size: 1.5em; }

    .tech-modal-content {
        margin: 10% auto; /* Centrar más en pantallas pequeñas */
        width: 95%; /* Más ancho en móviles */
    }
}

@media (max-width: 480px) {
    .logo-container img { height: 45px; }
    .logo-container .tagline { font-size: 0.7em; }
    .slogan { font-size: 1.5em; letter-spacing: 1px; }
    .sidebar-menu { width: 100%; right: -100%; }
    .sidebar-menu.active { right: 0; }
}

/* === FOOTER STYLES (COMPLETO) === */
.main-footer {
    background-color: var(--dark-gray-text);
    color: var(--white);
    text-align: center;
    padding: 2rem;
    margin-top: 40px;
}

.footer-nav ul {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    margin-top: 0;
    padding: 0;
}

.footer-nav ul li {
    margin: 0 15px;
}

.footer-nav ul li a {
    color: var(--white);
    transition: color 0.3s ease;
}

.footer-nav ul li a:hover {
    color: var(--munet-green);
    text-decoration: none;
}
/* === END FOOTER STYLES === */
/* ... (código CSS anterior hasta la sección Quiénes Somos) ... */

/* Estilos específicos para la sección Quiénes Somos */
.content-section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--white);
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

/* Fondo de rejilla/circuito para la sección de contenido (si no se usan partículas) */
/* Comentado porque ahora usaremos particles-quienes-somos */
/*
.content-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, var(--light-gray-bg) 0, var(--light-gray-bg) 1px, transparent 1px, transparent 30px),
        repeating-linear-gradient(90deg, var(--light-gray-bg) 0, var(--light-gray-bg) 1px, transparent 1px, transparent 30px);
    background-size: 30px 30px;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}
*/

.tech-grid {
    display: grid;
    /* === CAMBIO CLAVE AQUÍ: Asegurar 2x2 y tamaño mínimo === */
    grid-template-columns: repeat(auto-fit, minmax(calc(50% - 40px), 1fr)); /* 2 columnas que se ajustan al 50% menos el gap */
    /* Para forzar 2x2 de manera más estricta si minmax no funciona bien con gap: */
    /* grid-template-columns: repeat(2, minmax(350px, 1fr)); */
    gap: 40px; /* Espacio entre las tarjetas */
    padding: 20px;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

.tech-card {
    color: var(--white); /* El texto de la tarjeta es blanco */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 30px; /* Aumenta el padding para dar espacio */
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    min-height: 250px; /* Aumenta la altura mínima de la tarjeta */
    cursor: pointer;
    z-index: 2;
}

.tech-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 30px var(--munet-green);
}

/* Efecto de borde que se ilumina / circuito */
.card-glow-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow 0.5s ease-out;
    pointer-events: none;
    z-index: 0;
}

/* Brillo del borde al pasar el ratón (se adapta al color de la tarjeta) */
.tech-card-red:hover .card-glow-border { box-shadow: 0 0 20px var(--card-red), 0 0 40px var(--card-red), 0 0 60px var(--card-red) inset; }
.tech-card-blue-custom:hover .card-glow-border { box-shadow: 0 0 20px var(--card-blue-custom), 0 0 40px var(--card-blue-custom), 0 0 60px var(--card-blue-custom) inset; }
.tech-card-green-custom:hover .card-glow-border { box-shadow: 0 0 20px var(--card-green-custom), 0 0 40px var(--card-green-custom), 0 0 60px var(--card-green-custom) inset; }
.tech-card-orange:hover .card-glow-border { box-shadow: 0 0 20px var(--card-orange), 0 0 40px var(--card-orange), 0 0 60px var(--card-orange) inset; }


/* Efecto de líneas de escaneo sobre la tarjeta (sutil) */
.tech-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( transparent, rgba(141, 198, 63, 0.05) 1px, transparent 2px );
    background-size: 100% 50px;
    animation: scan-lines-card 5s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.tech-card:hover::after { opacity: 1; }
@keyframes scan-lines-card {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}


/* Iconos dentro de las tarjetas */
.card-icon {
    width: 70px;
    height: 70px;
    background-color: var(--munet-green); /* Asegura que el círculo sea verde MUNET */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(141, 198, 63, 0.7);
    position: relative;
    z-index: 2;
}

.card-icon img {
    width: 40px;
    height: 40px;
    filter: invert(100%); /* Si tus iconos PNG son negros, esto los hará blancos */
    /* Si tus iconos ya son blancos o de color, quita este filtro */
}

.tech-card h3 {
    cursor: default;
    padding-right: 0;
    font-size: 1.8em;
    margin-bottom: 10px; /* Reduce un poco el margen inferior */
    text-transform: uppercase;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: color 0.3s ease;
    /* Asegura que el color del título sea blanco si no lo sobrescribe el hover */
    color: var(--white);
}

.tech-card h3::after { content: none; } /* Elimina la flecha si sigue ahí */

.tech-card:hover h3 {
    color: var(--munet-green);
}


.tech-card .card-summary {
    text-align: center; /* Centra el resumen */
    font-size: 0.9em; /* Haz la fuente un poco más pequeña */
    color: var(--white); /* Texto visible en la tarjeta de resumen */
    line-height: 1.5; /* Ajusta el interlineado */
    margin-bottom: 20px;
    z-index: 2;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limita a 3 líneas para el resumen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.open-modal-btn {
    background-color: var(--munet-green);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(141, 198, 63, 0.5);
    z-index: 2;
    margin-top: auto; /* Empuja el botón hacia abajo en la columna flex */
}

.open-modal-btn:hover {
    background-color: #7BBF35;
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.8);
}


/* === NUEVOS ESTILOS PARA EL MODAL (y partículas) === */
.tech-modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease-out;
    justify-content: center;
    align-items: center;
}

/* Contenedor de partículas para el modal */
#particles-modal { /* Aseguramos su posición y que sea visible si está activa */
    z-index: -1; /* Detrás del contenido del modal */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
}

/* ... (resto de estilos del modal y sus animaciones) ... */

/* MEDIA QUERIES (se mantienen las existentes para responsividad) */
@media (max-width: 768px) {
    /* ... (resto de reglas responsivas) ... */
    .tech-grid {
        grid-template-columns: 1fr; /* Una columna en móviles */
        padding: 15px;
        gap: 20px;
    }
    .tech-card {
        min-height: 200px; /* Ajusta la altura mínima en móviles */
        padding: 20px;
    }
    .tech-card h3 {
        font-size: 1.5em;
    }
    .tech-card .card-summary {
        -webkit-line-clamp: 4; /* Más líneas de resumen en móvil */
    }
}
/* ... (estilos existentes) ... */

/* Contenedor general para las partículas de fondo */
.particles-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* z-index ajustado por ID específico para cada contenedor */
    /* background-color: transparent; // Ya debería ser transparente por defecto */
}

/* Contenedor de partículas para la sección Quiénes Somos */
#particles-quienes-somos {
    z-index: 0; /* Asegura que esté en el fondo de la sección content-section */    /* El content-section debe tener position: relative; */
}

/* Contenedor de partículas para el modal */
#particles-modal {
    z-index: -1; /* Detrás del contenido del modal para que las partículas no interfieran con el texto */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* ... (resto de estilos) ... */

}
/* ... (código CSS anterior hasta gallery-grid) ... */

/* === ESTILOS PARA LA GALERÍA DE IMÁGENES === */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 3-4 columnas adaptables */
    gap: 20px; /* Espacio entre imágenes */
    padding: 20px;
    margin-top: 20px;
    perspective: 1000px; /* Habilita transformaciones 3D en los hijos */
    position: relative; /* Para posicionar el fondo de rejilla */
    z-index: 1; /* Para que la cuadrícula esté sobre el fondo de la sección */
}

/* NUEVO: Fondo de red/circuito animado para la sección de Fotogalería */
.gallery-background-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="%238DC63F" stroke-width="0.5"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)" /></svg>');
    background-size: 80px 80px; /* Tamaño de los módulos de la red */
    opacity: 0.15; /* Sutil pero visible */
    z-index: 0; /* Detrás de las tarjetas */
    pointer-events: none;
    animation: grid-flow 20s linear infinite; /* Animación de movimiento */
}
/* Reutilizamos @keyframes grid-flow de Quiénes Somos */


.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
  
}

/* Animación de rotación continua */
@keyframes galleryItemRotate {
    0% { transform: rotateY(0deg) rotateX(0deg); }
    50% { transform: rotateY(5deg) rotateX(2deg); } /* Ligeros giros */
    100% { transform: rotateY(0deg) rotateX(0deg); }
}

/* Animación inversa para elementos pares */
.gallery-item:nth-child(even) {
    animation-name: galleryItemRotateReverse;
}
@keyframes galleryItemRotateReverse {
    0% { transform: rotateY(0deg) rotateX(0deg); }
    50% { transform: rotateY(-5deg) rotateX(-2deg); }
    100% { transform: rotateY(0deg) rotateX(0deg); }
}


.gallery-item:hover {
    transform: translateY(-5px) scale(1.05); /* Zoom al pasar el ratón */
    box-shadow: 0 6px 15px rgba(0,0,0,0.2), 0 0 15px var(--munet-green); /* Sombra y brillo verde */
    animation-play-state: paused; /* Pausa la rotación continua al pasar el ratón */
    filter: grayscale(0%); /* Elimina la desaturación al pasar el ratón */
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: brightness(0.9);
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(141, 198, 63, 0.7);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* NUEVO EFECTO: Borde de brillo animado en la miniatura */
.gallery-border-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow 0.5s ease-out;
    pointer-events: none;
    z-index: 1;
}

.gallery-item:hover .gallery-border-glow {
    box-shadow: 0 0 15px var(--munet-green), 0 0 30px var(--munet-green) inset;
}

/* NUEVO EFECTO: Efecto de "Glitch/Destello" al pasar el ratón */
.gallery-hover-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
    animation: scan-line-flash 1s linear infinite; /* Animación de escaneo */
    opacity: 0;
    pointer-events: none;
    z-index: 2; /* Sobre la imagen y el brillo */
}

.gallery-item:hover .gallery-hover-effect {
    opacity: 1; /* Visible al pasar el ratón */
}

@keyframes scan-line-flash {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}


/* === ESTILOS DEL LIGHTBOX DE GALERÍA (se mantienen) === */
.gallery-lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeIn 0.3s ease-out;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    border: 3px solid var(--munet-green);
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(141, 198, 63, 0.8);
    object-fit: contain;
    /* Animación de carga para la imagen principal del lightbox */
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.9);
    transition: opacity 0.5s ease-out, filter 0.5s ease-out, transform 0.5s ease-out;
}

.gallery-lightbox.is-loading img {
    opacity: 0;
}

.gallery-lightbox:not(.is-loading) img {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
    animation: zoomIn 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}


.lightbox-caption {
    color: var(--white);
    font-size: 1.1em;
    margin-top: 15px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 8px 15px;
    border-radius: 5px;
}

.lightbox-close {
    color: var(--white);
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 3em;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    text-shadow: 0 0 5px black;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-close:hover {
    color: var(--card-red);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(141, 198, 63, 0.7);
    color: var(--white);
    border: none;
    padding: 10px 15px;
    font-size: 1.8em;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(141, 198, 63, 0.5);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-nav:hover {
    background-color: var(--munet-green);
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.8);
}

.lightbox-nav.prev-img {
    left: 15px;
}

.lightbox-nav.next-img {
    right: 15px;
}

/* Animaciones (reutilizadas del modal principal) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: 1; opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes zoomOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.8); opacity: 0; } }

.gallery-lightbox.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}
.gallery-lightbox.fade-out .lightbox-content img {
    animation: zoomOut 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

/* ... (resto de estilos de tech-grid, tech-card, colores de tarjetas, media queries y footer) ... */

@media (max-width: 768px) {
    /* ... (otros estilos responsivos) ... */
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
    .gallery-item img {
        height: 150px;
    }
    .lightbox-close, .lightbox-nav {
        font-size: 2em;
        width: 40px;
        height: 40px;
    }
    .lightbox-nav.prev-img { left: 5px; }
    .lightbox-nav.next-img { right: 5px; }
}
/* ... (código CSS anterior hasta .visit-details) ... */

/* Estilos específicos para la sección Planifica tu Visita */
.visit-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
    padding: 0 20px;
}

.detail-block {
    background-color: var(--dark-gray-text); /* Fondo oscuro */
    color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative; /* CRUCIAL para los pseudo-elementos y efectos */
    overflow: hidden; /* Importante para los efectos de scanline */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* === ANIMACIÓN DE ENTRADA (al cargar la página) === */
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    animation: slideInUpScale 0.8s ease-out forwards;
    /* El animation-delay se manejará en JS para un efecto escalonado */
}

/* Keyframes para la animación de entrada de los módulos */
@keyframes slideInUpScale {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


.detail-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3), 0 0 25px var(--munet-green); /* Brillo más intenso */
}

/* NUEVO: Efecto de borde brillante (como en las tarjetas de Quiénes Somos) */
.detail-glow-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow 0.5s ease-out;
    pointer-events: none;
    z-index: 0; /* Detrás del contenido */
}

.detail-block:hover .detail-glow-border {
    box-shadow: 0 0 20px var(--munet-green), 0 0 40px var(--munet-green), 0 0 60px var(--munet-green) inset; /* Brillo verde */
}

/* NUEVO: Efecto de "Scanline" o "Glitch" al pasar el ratón */
.detail-scan-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        transparent,
        rgba(141, 198, 63, 0.1) 1px, /* Líneas verdes muy sutiles */
        transparent 2px
    );
    background-size: 100% 50px; /* Tamaño de las líneas */
    animation: scan-lines-detail 5s linear infinite;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1; /* Sobre el contenido, debajo del texto */
}

.detail-block:hover .detail-scan-overlay {
    opacity: 0.5; /* Visible al pasar el ratón, con opacidad */
}

@keyframes scan-lines-detail {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}


.detail-block h3 {
    color: var(--munet-green);
    font-size: 1.8em;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 2px solid var(--munet-green);
    padding-bottom: 10px;
    display: inline-block;
    width: auto;
    align-self: center;
}

.detail-block p {
    font-size: 1em;
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: left;
}

.detail-block ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 15px;
}

.detail-block ul li {
    font-size: 0.95em;
    margin-bottom: 8px;
    text-align: left;
    position: relative;
    padding-left: 20px;
}

.detail-block ul li::before {
    content: '\2022';
    color: var(--munet-green);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}

.map-container {
    margin-top: 20px;
    border: 2px solid var(--munet-green);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.5);
}

.map-container iframe {
    border: none;
}

.map-container p small {
    display: block;
    text-align: center;
    color: var(--munet-gray);
    margin-top: 10px;
    font-size: 0.8em;
}

/* Media Queries para Planifica tu Visita */
@media (max-width: 768px) {
    .visit-details {
        grid-template-columns: 1fr;
        padding: 0 15px;
        gap: 20px;
    }
    .detail-block {
        padding: 25px;
    }
    .detail-block h3 {
        font-size: 1.5em;
    }
}
/* ... (código CSS anterior hasta .visit-details) ... */

/* Estilos específicos para la sección Planifica tu Visita */
.visit-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2-3 columnas que se adaptan */
    gap: 30px;
    margin-top: 40px;
    padding: 0 20px;
}

/* Reutilizamos el estilo del bloque de detalle para Planifica tu Visita y Actividades */
.detail-block, .activity-block { /* Ambos comparten el mismo estilo base */
    background-color: var(--dark-gray-text); /* Fondo oscuro */
    color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Animación de entrada (al cargar la página) - Compartida con Planifica tu Visita */
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    animation: slideInUpScale 0.8s ease-out forwards;
}

/* El efecto de hover para Planifica tu Visita y Actividades */
.detail-block:hover, .activity-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3), 0 0 25px var(--munet-green);
}

/* Borde brillante (para Planifica tu Visita y Actividades) */
.detail-glow-border {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow 0.5s ease-out;
    pointer-events: none; z-index: 0;
}

.detail-block:hover .detail-glow-border, .activity-block:hover .detail-glow-border {
    box-shadow: 0 0 20px var(--munet-green), 0 0 40px var(--munet-green), 0 0 60px var(--munet-green) inset;
}

/* Efecto de Scanline/Glitch (para Planifica tu Visita y Actividades) */
.detail-scan-overlay {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient( transparent, rgba(141, 198, 63, 0.1) 1px, transparent 2px );
    background-size: 100% 50px;
    animation: scan-lines-detail 5s linear infinite;
    opacity: 0; transition: opacity 0.3s ease;
    pointer-events: none; z-index: 1;
}

.detail-block:hover .detail-scan-overlay, .activity-block:hover .detail-scan-overlay {
    opacity: 0.5;
}

@keyframes slideInUpScale { /* Se mantiene la animación para los bloques */
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes scan-lines-detail { /* Se mantiene la animación para los scanlines */
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}


/* Estilos para el título dentro de los bloques de detalle */
.detail-block h3, .activity-block h3 {
    color: var(--munet-green);
    font-size: 1.8em;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 2px solid var(--munet-green);
    padding-bottom: 10px;
    display: inline-block;
    width: auto;
    align-self: center;
}

/* Estilos para párrafos dentro de los bloques de detalle */
.detail-block p, .activity-block p {
    font-size: 1em;
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: left;
}

/* Estilos para listas dentro de los bloques de detalle */
.detail-block ul, .activity-block ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 15px;
}

.detail-block ul li, .activity-block ul li {
    font-size: 0.95em;
    margin-bottom: 8px;
    text-align: left;
    position: relative;
    padding-left: 20px;
}

.detail-block ul li::before, .activity-block ul li::before {
    content: '\2022';
    color: var(--munet-green);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}

/* NUEVOS ESTILOS PARA LA CUADRÍCULA DE ACTIVIDADES */
.activity-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2-3 columnas que se adaptan */
    gap: 30px;
    margin-top: 40px;
    padding: 0 20px;
}

/* Botón de información para actividades */
.activity-info-btn {
    background-color: var(--munet-green);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(141, 198, 63, 0.5);
    margin-top: auto; /* Empuja el botón hacia abajo en la columna flex */
}

.activity-info-btn:hover {
    background-color: #7BBF35;
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.8);
}


/* ... (resto del CSS incluyendo .map-container y Media Queries) ... */

/* Media Queries para Planifica tu Visita y Actividades */
@media (max-width: 768px) {
    .visit-details, .activity-details { /* Ambos se ajustan en móviles */
        grid-template-columns: 1fr;
        padding: 0 15px;
        gap: 20px;
    }
    .detail-block, .activity-block { /* Ambos se ajustan en móviles */
        padding: 25px;
    }
    .detail-block h3, .activity-block h3 { /* Ambos se ajustan en móviles */
        font-size: 1.5em;
    }
}
/* ... (código CSS anterior) ... */

/* Estilos específicos para la sección Renta de Espacios */
.section-description {
    text-align: center;
    max-width: 800px;
    margin: 20px auto 40px auto;
    font-size: 1.1em;
    color: var(--dark-gray-text);
    line-height: 1.8;
}

.spaces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 2-3 columnas que se adaptan */
    gap: 30px;
    padding: 0 20px;
    margin-top: 40px;
}

.space-card {
    background-color: var(--dark-gray-text);
    color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Animación de entrada (al cargar la página) */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInSlideUp 0.8s ease-out forwards; /* Reutilizamos la animación de Servicios */
}

.space-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3), 0 0 30px var(--munet-green);
}

/* Efecto de brillo de la tarjeta */
.space-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow 0.5s ease-out;
    pointer-events: none;
    z-index: 0; /* Detrás del contenido */
}

.space-card:hover .space-card-glow {
    box-shadow: 0 0 20px var(--munet-green), 0 0 40px var(--munet-green), 0 0 60px var(--munet-green) inset;
}

.space-icon-wrapper {
    width: 90px;
    height: 90px;
    background-color: var(--munet-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px auto;
    box-shadow: 0 0 20px rgba(141, 198, 63, 0.7);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.space-card:hover .space-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(141, 198, 63, 1);
}

.space-icon-wrapper img {
    width: 60px;
    height: 60px;
    filter: invert(100%); /* Para iconos blancos */
}

.space-card h3 {
    color: var(--munet-green);
    font-size: 2.2em; /* Título más grande */
    margin-bottom: 15px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 2px solid rgba(141, 198, 63, 0.5); /* Línea divisoria */
    padding-bottom: 10px;
    width: 90%; /* Ancho de la línea */
    align-self: center;
    transition: color 0.3s ease;
}

.space-card:hover h3 {
    color: var(--white); /* Título blanco al pasar el ratón */
}

.space-capacity {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--white);
    margin-bottom: 15px;
    text-align: center;
    background-color: rgba(0,0,0,0.3); /* Pequeño fondo para destacar */
    padding: 5px 10px;
    border-radius: 5px;
}

.space-features {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
    flex-grow: 1; /* Para que la lista ocupe el espacio disponible */
}

.space-features li {
    font-size: 0.95em;
    margin-bottom: 8px;
    text-align: left;
    position: relative;
    padding-left: 25px;
    color: var(--white);
    transition: color 0.2s ease;
}

.space-features li::before {
    content: '\2713'; /* Tick Unicode */
    color: var(--munet-green);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}

.space-card:hover .space-features li {
    color: var(--light-gray-bg); /* Opcional: Atenuar texto de la lista al hover */
}
.space-card:hover .space-features li::before {
    color: var(--white); /* Opcional: Tick blanco al hover */
}


.space-request-btn {
    background-color: var(--munet-green);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(141, 198, 63, 0.5);
    margin-top: auto; /* Empuja el botón hacia abajo en la columna flex */
}

.space-request-btn:hover {
    background-color: #7BBF35;
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.8);
}


/* Media Queries para Renta de Espacios */
@media (max-width: 768px) {
    .spaces-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
        gap: 20px;
    }
    .space-card {
        padding: 25px;
    }
    .space-card h3 {
        font-size: 1.8em;
    }
}
/* ... (código CSS anterior) ... */

/* Estilos específicos para la sección Involúcrate */
.section-description { /* Reutiliza el estilo de descripción de Renta de Espacios */
    text-align: center;
    max-width: 800px;
    margin: 20px auto 40px auto;
    font-size: 1.1em;
    color: var(--dark-gray-text);
    line-height: 1.8;
}

.form-container {
    max-width: 600px; /* Ancho máximo para el formulario */
    margin: 0 auto;
    background-color: var(--dark-gray-text); /* Fondo oscuro */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    padding: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Animación de entrada para el formulario */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInSlideUp 0.8s ease-out forwards; /* Reutilizamos la animación */
}

.tech-form .form-group {
    margin-bottom: 20px;
    position: relative;
}

.tech-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--munet-green); /* Etiquetas en verde */
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
}

.tech-form input[type="text"],
.tech-form input[type="email"],
.tech-form input[type="tel"],
.tech-form input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(141, 198, 63, 0.5); /* Borde verde claro */
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente oscuro */
    color: var(--white); /* Texto del campo blanco */
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none; /* Elimina el contorno al enfocar */
}

.tech-form input::placeholder {
    color: rgba(255, 255, 255, 0.6); /* Color del placeholder */
}

.tech-form input:focus {
    border-color: var(--munet-green); /* Borde verde más fuerte al enfocar */
    box-shadow: 0 0 10px rgba(141, 198, 63, 0.7); /* Brillo al enfocar */
}

/* Estilo específico para input[type="file"] */
.tech-form input[type="file"] {
    /* Ocultar el input original y estilizar un botón personalizado */
    /* Esto requiere un poco más de JS si quieres un diseño muy avanzado,
       pero podemos estilizar el botón predeterminado o un label */
    background-color: rgba(141, 198, 63, 0.2); /* Fondo sutil para el campo de archivo */
    cursor: pointer;
}

.tech-form .file-info {
    font-size: 0.85em;
    color: var(--munet-gray);
    margin-top: 5px;
}

.form-group-submit {
    text-align: center;
    margin-top: 30px;
}

.submit-btn {
    background-color: var(--munet-green);
    color: var(--white);
    border: none;
    padding: 15px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.5); /* Brillo sutil */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.submit-btn:hover {
    background-color: #7BBF35; /* Verde ligeramente más claro */
    box-shadow: 0 0 20px rgba(141, 198, 63, 0.8); /* Brillo más intenso */
}

.form-message {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
}

.form-message.success {
    background-color: rgba(67, 160, 71, 0.2); /* Fondo verde claro */
    color: var(--card-green-custom); /* Texto verde */
    border: 1px solid var(--card-green-custom);
}

.form-message.error {
    background-color: rgba(229, 57, 53, 0.2); /* Fondo rojo claro */
    color: var(--card-red); /* Texto rojo */
    border: 1px solid var(--card-red);
}

/* Media Queries para Involúcrate */
@media (max-width: 768px) {
    .form-container {
        padding: 30px 20px;
        margin: 0 15px;
    }
    .tech-form label {
        font-size: 1em;
    }
    .submit-btn {
        padding: 12px 25px;
        font-size: 1em;
    }
}
/* ... (código CSS anterior) ... */

/* Estilos específicos para la sección Involúcrate */
.section-description { /* Reutiliza el estilo de descripción de Renta de Espacios */
    text-align: center;
    max-width: 800px;
    margin: 20px auto 40px auto;
    font-size: 1.1em;
    color: var(--dark-gray-text);
    line-height: 1.8;
}

.form-container {
    max-width: 600px; /* Ancho máximo para el formulario */
    margin: 0 auto;
    background-color: var(--dark-gray-text); /* Fondo oscuro */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    padding: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Animación de entrada para el formulario */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInSlideUp 0.8s ease-out forwards; /* Reutilizamos la animación */
}

.tech-form .form-group {
    margin-bottom: 20px;
    position: relative;
}

.tech-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--munet-green); /* Etiquetas en verde */
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
}

.tech-form input[type="text"],
.tech-form input[type="email"],
.tech-form input[type="tel"],
.tech-form input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(141, 198, 63, 0.5); /* Borde verde claro */
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente oscuro */
    color: var(--white); /* Texto del campo blanco */
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none; /* Elimina el contorno al enfocar */
}

.tech-form input::placeholder {
    color: rgba(255, 255, 255, 0.6); /* Color del placeholder */
}

.tech-form input:focus {
    border-color: var(--munet-green); /* Borde verde más fuerte al enfocar */
    box-shadow: 0 0 10px rgba(141, 198, 63, 0.7); /* Brillo al enfocar */
}

/* Estilo específico para input[type="file"] */
.tech-form input[type="file"] {
    /* Ocultar el input original y estilizar un botón personalizado */
    /* Esto requiere un poco más de JS si quieres un diseño muy avanzado,
       pero podemos estilizar el botón predeterminado o un label */
    background-color: rgba(141, 198, 63, 0.2); /* Fondo sutil para el campo de archivo */
    cursor: pointer;
}

.tech-form .file-info {
    font-size: 0.85em;
    color: var(--munet-gray);
    margin-top: 5px;
}

.form-group-submit {
    text-align: center;
    margin-top: 30px;
}

.submit-btn {
    background-color: var(--munet-green);
    color: var(--white);
    border: none;
    padding: 15px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.5); /* Brillo sutil */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.submit-btn:hover {
    background-color: #7BBF35; /* Verde ligeramente más claro */
    box-shadow: 0 0 20px rgba(141, 198, 63, 0.8); /* Brillo más intenso */
}

.form-message {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
}

.form-message.success {
    background-color: rgba(67, 160, 71, 0.2); /* Fondo verde claro */
    color: var(--card-green-custom); /* Texto verde */
    border: 1px solid var(--card-green-custom);
}

.form-message.error {
    background-color: rgba(229, 57, 53, 0.2); /* Fondo rojo claro */
    color: var(--card-red); /* Texto rojo */
    border: 1px solid var(--card-red);
}

/* Media Queries para Involúcrate */
@media (max-width: 768px) {
    .form-container {
        padding: 30px 20px;
        margin: 0 15px;
    }
    .tech-form label {
        font-size: 1em;
    }
    .submit-btn {
        padding: 12px 25px;
        font-size: 1em;
    }
}
/* ... (código CSS anterior) ... */

/* Estilos específicos para la sección Renta de Espacios */
.section-description {
    text-align: center;
    max-width: 800px;
    margin: 20px auto 40px auto;
    font-size: 1.1em;
    color: var(--dark-gray-text);
    line-height: 1.8;
}

.spaces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 2-3 columnas que se adaptan */
    gap: 30px;
    padding: 0 20px;
    margin-top: 40px;
}

.space-card {
    background-color: var(--dark-gray-text);
    color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Animación de entrada (al cargar la página) */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInSlideUp 0.8s ease-out forwards; /* Reutilizamos la animación de Servicios */
}

.space-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3), 0 0 30px var(--munet-green);
}

/* Efecto de brillo de la tarjeta */
.space-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow 0.5s ease-out;
    pointer-events: none;
    z-index: 0; /* Detrás del contenido */
}

.space-card:hover .space-card-glow {
    box-shadow: 0 0 20px var(--munet-green), 0 0 40px var(--munet-green), 0 0 60px var(--munet-green) inset;
}

.space-icon-wrapper {
    width: 90px;
    height: 90px;
    background-color: var(--munet-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px auto;
    box-shadow: 0 0 20px rgba(141, 198, 63, 0.7);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.space-card:hover .space-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(141, 198, 63, 1);
}

.space-icon-wrapper img {
    width: 60px;
    height: 60px;
    filter: invert(100%); /* Para iconos blancos */
}

.space-card h3 {
    color: var(--munet-green);
    font-size: 2.2em; /* Título más grande */
    margin-bottom: 15px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 2px solid rgba(141, 198, 63, 0.5); /* Línea divisoria */
    padding-bottom: 10px;
    width: 90%; /* Ancho de la línea */
    align-self: center;
    transition: color 0.3s ease;
}

.space-card:hover h3 {
    color: var(--white); /* Título blanco al pasar el ratón */
}

.space-capacity {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--white);
    margin-bottom: 15px;
    text-align: center;
    background-color: rgba(0,0,0,0.3); /* Pequeño fondo para destacar */
    padding: 5px 10px;
    border-radius: 5px;
}

.space-features {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
    flex-grow: 1; /* Para que la lista ocupe el espacio disponible */
}

.space-features li {
    font-size: 0.95em;
    margin-bottom: 8px;
    text-align: left;
    position: relative;
    padding-left: 25px;
    color: var(--white);
    transition: color 0.2s ease;
}

.space-features li::before {
    content: '\2713'; /* Tick Unicode */
    color: var(--munet-green);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}

.space-card:hover .space-features li {
    color: var(--light-gray-bg); /* Opcional: Atenuar texto de la lista al hover */
}
.space-card:hover .space-features li::before {
    color: var(--white); /* Opcional: Tick blanco al hover */
}


.space-request-btn {
    background-color: var(--munet-green);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(141, 198, 63, 0.5);
    margin-top: auto; /* Empuja el botón hacia abajo en la columna flex */
}

.space-request-btn:hover {
    background-color: #7BBF35;
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.8);
}


/* Media Queries para Renta de Espacios */
@media (max-width: 768px) {
    .spaces-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
        gap: 20px;
    }
    .space-card {
        padding: 25px;
    }
    .space-card h3 {
        font-size: 1.8em;
    }
}
/* ... (código CSS anterior hasta .content-section) ... */

/* Estilos específicos para la sección Servicios */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2-3 columnas adaptables */
    gap: 30px;
    margin-top: 40px;
    padding: 0 20px;
}

.service-panel {
    background-color: var(--dark-gray-text); /* Fondo oscuro */
    color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 20px; /* Padding inicial */
    position: relative;
    overflow: hidden; /* CRUCIAL para el efecto de deslizamiento */
    cursor: default; /* No es clicable el panel completo */
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Animación de entrada (al cargar la página) */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInSlideUp 0.8s ease-out forwards;
}

/* Keyframes para la animación de entrada */
@keyframes fadeInSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-panel:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.3), 0 0 25px var(--munet-green); /* Brillo al pasar el ratón */
}

.panel-icon {
    width: 80px; /* Tamaño del icono */
    height: 80px;
    margin: 0 auto 20px auto; /* Centrar icono y margen */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--munet-green); /* Fondo verde */
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.7);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-panel:hover .panel-icon {
    transform: scale(1.1); /* Ligeramente más grande al hover */
    box-shadow: 0 0 25px rgba(141, 198, 63, 1); /* Brillo más fuerte */
}

.panel-icon img {
    width: 50px; /* Tamaño de la imagen del icono */
    height: 50px;
    filter: invert(100%); /* Hace el icono blanco si es negro */
}

.service-panel h3 {
    color: var(--munet-green);
    font-size: 2em; /* Título más grande */
    margin-bottom: 10px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 2px dashed rgba(141, 198, 63, 0.5); /* Línea punteada */
    padding-bottom: 10px;
    width: 80%; /* Ancho de la línea */
    align-self: center; /* Centra el título */
    transition: color 0.3s ease;
}

.service-panel:hover h3 {
    color: var(--white); /* Título blanco al pasar el ratón */
}

.panel-info {
    position: absolute; /* Posicionado absolutamente */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cubre todo el panel */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo más oscuro para la info */
    color: var(--white);
    padding: 20px;
    box-sizing: border-box;
    transform: translateY(100%); /* Inicialmente oculto abajo */
    transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); /* Deslizamiento suave */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    font-size: 0.95em;
}

.service-panel:hover .panel-info {
    transform: translateY(0); /* Se desliza hacia arriba al pasar el ratón */
}

.panel-info p {
    margin-bottom: 10px;
}

.panel-info ul {
    list-style: none;
    padding-left: 0;
}
.panel-info ul li {
    margin-bottom: 5px;
    position: relative;
    padding-left: 20px;
}
.panel-info ul li::before {
    content: '\2022';
    color: var(--munet-green);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}


/* Media Queries para Servicios */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
        gap: 20px;
    }
    .service-panel {
        padding: 25px;
    }
    .service-panel h3 {
        font-size: 1.8em;
    }
}
/* ... (código CSS anterior hasta .content-section) ... */

/* Estilos específicos para la sección Exposiciones */
.interactive-map-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Mapa a la izquierda, lista a la derecha */
    gap: 30px;
    margin-top: 40px;
    padding: 0 20px;
    position: relative;
    z-index: 1; /* Sobre el fondo si lo hay */
}

.map-placeholder {
    background-color: var(--dark-gray-text); /* Fondo oscuro para el mapa */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--munet-gray); /* Texto de carga gris */
    font-size: 1.2em;
    min-height: 400px; /* Altura mínima para el contenedor del mapa */
    position: relative;
    overflow: hidden; /* Para el efecto de scanline */
    border: 1px solid var(--munet-green); /* Borde verde */
}

/* Efecto de Scanline animado en el fondo del mapa */
.map-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(141, 198, 63, 0.05) 0,
        rgba(141, 198, 63, 0.1) 1px,
        transparent 1px,
        transparent 30px
    ),
    repeating-linear-gradient(
        90deg,
        rgba(141, 198, 63, 0.05) 0,
        rgba(141, 198, 63, 0.1) 1px,
        transparent 1px,
        transparent 30px
    );
    background-size: 30px 30px;
    opacity: 0.8; /* Más visible que en otros lugares */
    animation: grid-flow 20s linear infinite; /* Reutilizamos animación */
    pointer-events: none;
    z-index: 0;
}

.map-placeholder iframe {
    position: relative; /* Para estar sobre el efecto de fondo */
    z-index: 1;
    border-radius: 8px; /* Bordes redondeados del mapa */
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.7); /* Brillo del mapa */
    margin-top: 20px; /* Espacio debajo del texto de carga */
}

.exhibition-list {
    background-color: var(--dark-gray-text); /* Fondo oscuro para la lista */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    padding: 30px;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.exhibition-list h3 {
    color: var(--munet-green);
    font-size: 1.8em;
    margin-bottom: 25px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 2px dashed rgba(141, 198, 63, 0.5);
    padding-bottom: 10px;
}

.exhibition-list ul {
    list-style: none;
    padding-left: 0;
}

.exhibition-list ul li {
    background-color: rgba(0,0,0,0.3); /* Fondo sutil para cada ítem */
    border: 1px solid rgba(141, 198, 63, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exhibition-list ul li:hover {
    transform: translateX(5px); /* Deslizamiento al pasar el ratón */
    box-shadow: 0 0 10px var(--munet-green); /* Brillo */
}

.exhibition-list ul li h4 {
    color: var(--white);
    font-size: 1.4em;
    margin-bottom: 5px;
    text-align: left;
}

.exhibition-list ul li p {
    font-size: 0.9em;
    color: var(--munet-gray);
    margin-bottom: 15px;
    text-align: left;
}

.view-exhibition-details-btn {
    background-color: var(--munet-green);
    color: var(--white);
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 8px rgba(141, 198, 63, 0.5);
    display: block; /* Para que ocupe todo el ancho del li */
    width: 100%;
}

.view-exhibition-details-btn:hover {
    background-color: #7BBF35;
    box-shadow: 0 0 12px rgba(141, 198, 63, 0.8);
}

/* Modal para detalles de exposición (reutiliza tech-modal de Quiénes Somos) */
/* No necesita estilos extra aquí, ya que el .tech-modal y .tech-modal-content son genéricos */


/* Media Queries para Exposiciones */
@media (max-width: 768px) {
    .interactive-map-container {
        grid-template-columns: 1fr; /* Una columna en móviles */
        padding: 0 15px;
        gap: 20px;
    }
    .map-placeholder {
        min-height: 300px; /* Menor altura en móvil */
        padding: 15px;
    }
    .exhibition-list {
        padding: 20px;
    }
}
/* ... (código CSS anterior) ... */

/* --- NUEVOS ESTILOS PARA REDES SOCIALES --- */
.social-media-container {
    text-align: center;
    margin-bottom: 20px; /* Espacio debajo del contenedor */
}

.social-title {
    color: var(--white);
    font-size: 1.5em;
    margin-bottom: 15px;
    font-weight: 300;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Espacio entre los iconos */
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background-color: var(--dark-gray-text); /* Fondo oscuro */
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    font-size: 1.2em;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    background-color: var(--munet-green); /* Fondo verde al pasar el ratón */
    color: var(--white); /* El color del icono sigue siendo blanco */
    box-shadow: 0 0 10px rgba(141, 198, 63, 0.7); /* Brillo verde */
    transform: translateY(-3px); /* Levantar un poco el icono */
}

/* Estilos para los iconos de Font Awesome */
.social-icon i {
    transition: transform 0.3s ease;
}

.social-icon:hover i {
    transform: scale(1.2); /* Icono un poco más grande al pasar el ratón */
}

/* Media Query para móvil */
@media (max-width: 480px) {
    .social-icons {
        gap: 10px;
    }
    .social-icon {
        width: 40px;
        height: 40px;
    }
    .social-title {
        font-size: 1.2em;
    }
}
/* ... (código CSS anterior hasta .social-icon) ... */

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px; /* === TAMAÑO DEL CONTENEDOR === */
    height: 45px;
    background-color: var(--dark-gray-text); /* Fondo oscuro */
    border: 1px solid var(--dark-gray-text);
    border-radius: 5px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    background-color: var(--munet-green);
    box-shadow: 0 0 10px rgba(141, 198, 63, 0.7);
    transform: translateY(-3px);
}

/* Estilos para las imágenes de los iconos (Ajustado) */
.social-icon img {
    width: 30px; /* === TAMAÑO DE LA IMAGEN DENTRO DEL CONTENEDOR === */
    height: 30px;
    transition: transform 0.3s ease;
    filter: brightness(1) invert(0);
}

.social-icon:hover img {
    transform: scale(1.2);
    filter: brightness(1.2);
}

/* Media Query para móvil */
@media (max-width: 480px) {
    .social-icons {
        gap: 10px;
    }
    .social-icon {
        width: 40px; /* === TAMAÑO DEL CONTENEDOR EN MÓVILES === */
        height: 40px;
    }
    .social-title {
        font-size: 1.2em;
    }
    .social-icon img {
        width: 25px; /* === TAMAÑO DE LA IMAGEN EN MÓVILES === */
        height: 25px;
    }
}
/* === FOOTER STYLES === */
.main-footer {
    background-color: var(--dark-gray-text);
    color: var(--white);
    text-align: center;
    padding: 2rem;
    margin-top: 40px;
}

.footer-nav ul {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    margin-top: 0;
    padding: 0;
}

.footer-nav ul li {
    margin: 0 15px;
}

.footer-nav ul li a {
    color: var(--white);
    transition: color 0.3s ease;
}

.footer-nav ul li a:hover {
    color: var(--munet-green);
    text-decoration: none;
}
/* === END FOOTER STYLES === */
/* ... (código CSS anterior hasta .map-container) ... */

/* Estilo para el botón de "Comprar Boletos" */
.buy-tickets-btn {
    background-color: var(--munet-green);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none; /* Asegura que no tenga subrayado */
    display: inline-block; /* Para que funcione como un botón */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(141, 198, 63, 0.5);
    margin-top: auto; /* Para empujarlo hacia abajo en el flex container */
    align-self: center; /* Centrarlo horizontalmente */
}

.buy-tickets-btn:hover {
    background-color: #7BBF35;
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.8);
}


/* ... (resto del CSS se mantiene igual) ... */

/* ... (código CSS anterior) ... */

/* Estilos para el banner de video */
.video-banner {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
}

/* Estilos para el mapa y el panel de información lado a lado */
.interactive-map-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Mapa a la izquierda, panel a la derecha */
    gap: 30px;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.map-wrapper {
    position: relative;
    width: 100%;
    /* Efecto de zoom y pan se aplicará aquí con JS */
    transition: transform 0.8s ease-in-out;
    border: 2px solid var(--munet-gray); /* Borde gris para el mapa */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    background-color: var(--dark-gray-text);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#interactive-map {
    width: 100%;
    height: auto;
    display: block;
    cursor: grab;
}

.exhibition-area {
    fill: var(--munet-green);
    opacity: 0.1; /* Transparente por defecto */
    transition: opacity 0.3s ease;
    cursor: pointer;
}
.exhibition-area:hover {
    opacity: 0.3; /* Resalta al pasar el ratón */
}

.exhibition-info-panel {
    background-color: var(--dark-gray-text);
    color: var(--white);
    padding: 20px;
    border-radius: 10px;
    border: 2px solid var(--munet-green); /* Borde verde para destacar el panel */
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.5);
    display: flex;
    flex-direction: column;
}

#panel-title {
    color: var(--munet-green);
    font-size: 1.8em;
    margin-bottom: 20px;
    border-bottom: 2px dashed rgba(141, 198, 63, 0.5);
    padding-bottom: 10px;
}

#panel-details {
    /* Estilos para el área de contenido */
    line-height: 1.6;
}

/* Media Queries para la página de Exposiciones */
@media (max-width: 768px) {
    .interactive-map-layout {
        grid-template-columns: 1fr; /* Una columna en móviles */
        padding: 0 15px;
        gap: 20px;
    }
    .map-wrapper {
        border-radius: 0;
        border: none;
        box-shadow: none;
        padding: 0;
    }
}
/* ... (código CSS anterior) ... */

/* Estilos para el banner de video */
.video-banner {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilos para el mapa y el panel de información lado a lado */
.interactive-map-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.map-wrapper {
    position: relative;
    width: 100%;
    border: 2px solid var(--munet-gray);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    background-color: var(--dark-gray-text);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#interactive-map {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer; /* Usamos pointer para indicar que es clicable */
}

/* ... (resto del CSS se mantiene igual) ... */
/* ... (otros estilos) ... */

/* Estilos para el panel de información del mapa */
.exhibition-info-panel {
    /* ... (tus estilos existentes para el panel) ... */
    padding: 20px;
    border-radius: 10px;
    background-color: #222;
    color: #eee;
    transition: background-color 0.3s ease;
}

.exhibition-info-panel h3 {
    margin-top: 0;
    font-size: 1.5em;
    color: #8DC63F;
}

/* Nueva clase para reducir el tamaño de la letra del contenido */
.small-text-content p,
.small-text-content li {
    font-size: 0.9em; /* Reduce el tamaño de la fuente */
    line-height: 1.6; /* Mejora la legibilidad */
}