/* ===== SOLUCIONES PARA CONFLICTOS DE SCROLL ===== */
        
        /* Asegurar que el body permita scroll */
        body {
            overflow-x: hidden !important; /* evitar scroll horizontal inesperado */
            overflow-y: auto !important; /* scroll vertical cuando sea necesario */
            height: auto !important; /* altura dinámica */
            min-height: 100vh; /* asegura cubrir toda la altura de la ventana */
        }
        
        /* Asegurar que html permita scroll */
        html {
            overflow-x: hidden !important; /* evitar desbordes horizontales globales */
            overflow-y: auto !important; /* scroll vertical habilitado */
            height: auto !important; /* altura automática */
        }
        
        /* Reset específico para la galería */
        #galeria-section {
            overflow: visible !important; /* evita ocultar contenido dentro de la sección */
        }
        
        /* Asegurar que el contenedor principal permita scroll */
        .galeria-wrapper {
            overflow: visible !important; /* asegura que no se recorte el contenido */
        }
        
        /* Asegurar que el header fijo no interfiera con el scroll */
        .u-header.scrolled {
            z-index: 999 !important; /* header por encima de la galería */
        }
        
        /* Asegurar que el footer no bloquee el scroll */
        .footer {
            position: relative !important; /* posicionamiento estándar del footer */
            overflow: visible !important; /* no recortar efectos/elementos flotantes */
        }
        
        /* ===== VARIABLES CSS ===== */
        :root {
            --civil-color: #3498db; /* azul para obras civiles */
            --network-color: #2ecc71; /* verde para redes */
            --infrastructure-color: #e74c3c; /* rojo para infraestructura */
        }
        
        #galeria-section {
            background-color: #0f0f10; /* fondo neutro oscuro */
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            min-height: 100vh;
            align-items: stretch;
            gap: 0; /* sin huecos entre columnas */
        }

        /* Columna izquierda contenedora de la sidebar */
        .galeria-wrapper {
            flex: 0 0 40%;
            max-width: 40%;
            display: flex;
        }

        .sidebar {
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
            display: flex;
            flex-direction: column;
            height: 100vh;
            position: relative;
            overflow: hidden;
            width: 100%; /* ocupa toda su columna */
            max-width: 100%;
        }

        .sidebar-header {
            padding: 20px; /* espaciado interno */
            background-color: #2c3e50; /* fondo oscuro */
            color: white; /* texto claro */
            text-align: center; /* centrado */
            flex-shrink: 0; /* evita que se encoja */
        }

        .sidebar-title {
            margin: 0; /* sin margen */
            font-size: 1.6rem; /* tamaño de título */
        }

        .category-tabs {
            display: flex; /* pestañas en fila */
            background-color: #34495e; /* fondo intermedio */
            flex-shrink: 0; /* evita encogimiento */
        }

        .category-tab {
            flex: 1; /* cada pestaña ocupa mismo ancho */
            padding: 12px; /* área clickeable */
            text-align: center; /* texto centrado */
            color: white; /* texto blanco */
            cursor: pointer; /* cursor de mano */
            transition: background-color 0.3s; /* animación de hover */
            font-size: 1.15rem; /* texto más grande */
            font-weight: 600; /* mayor peso para legibilidad */
        }

        .category-tab.active {
            background-color: var(--category-color); /* color según categoría activa */
        }

        .category-tab.all {
            --category-color: #9b59b6;
        }
        .category-tab.civil {
            --category-color: var(--civil-color);
        }
        .category-tab.network {
            --category-color: var(--network-color);
        }
        .category-tab.infrastructure {
            --category-color: var(--infrastructure-color);
        }

        .projects-container {
            flex: 1; /* ocupa el espacio disponible */
            padding: 16px; /* espaciado más compacto */
            overflow-y: auto !important; /* fuerza scroll vertical */
            overflow-x: hidden; /* evita scroll horizontal */
            height: calc(100vh - 140px); /* altura restante tras header y tabs */
            scrollbar-width: thin; /* para Firefox */
            scrollbar-color: #9b59b6 #f8f9fa; /* colores del scroll en Firefox */
            position: relative; /* posicionamiento correcto */
        }

        /* Custom scrollbar for Webkit browsers */
        .projects-container::-webkit-scrollbar {
            width: 8px; /* grosor del scrollbar */
        }

        .projects-container::-webkit-scrollbar-track {
            background: #f8f9fa; /* color de pista */
            border-radius: 4px; /* bordes redondeados */
        }

        .projects-container::-webkit-scrollbar-thumb {
            background: #9b59b6; /* color del pulgar */
            border-radius: 4px; /* bordes redondeados */
        }

        .projects-container::-webkit-scrollbar-thumb:hover {
            background: #8e44ad; /* color al pasar el mouse */
        }

        .project-card {
            margin-bottom: 14px; /* separación más ajustada */
            padding: 15px; /* espaciado interno */
            background-color: white; /* fondo blanco */
            border-radius: 3px; /* esquinas redondeadas */
            box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* sombra ligera */
            cursor: pointer; /* indica interactividad */
            transition: transform 0.2s, box-shadow 0.2s; /* animaciones de hover */
            display: flex; /* alinea imagen y texto */
            gap: 15px; /* separación entre elementos internos */
            min-height: 180px; /* acomoda miniatura más grande */
        }

        /* MINIATURAS más grande y consistente */
        .project-thumb-wrapper {
            flex: 0 0 400px; /* ancho visible de la miniatura en desktop - AUMENTADO */
            min-width: 0; /* permitir que encoja en pantallas pequeñas */
        }

        .project-thumb {
            width: 100%;
            height: 250px; /* alto proporcional, sin deformar tarjeta - AUMENTADO */
            object-fit: cover;
            border-radius: 6px;
        }

        .project-info {
            flex: 1;
            min-width: 0; /* permite clamping correcto */
        }

        .project-card:hover {
            transform: translateY(-2px); /* sutil elevación */
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* sombra aumentada */
        }

        .project-civil {
            border-left: 4px solid var(--civil-color); /* código de color por categoría */
        }

        .project-network {
            border-left: 4px solid var(--network-color); /* borde verde */
        }

        .project-infrastructure {
            border-left: 4px solid var(--infrastructure-color); /* borde rojo */
        }

        .project-title {
            margin: 0 0 5px 0; /* separación inferior */
            font-weight: 600; /* mayor peso tipográfico */
        }

        .project-location {
            margin: 0; /* sin márgenes */
            color: #6c757d; /* gris medio */
            font-size: 0.9rem; /* tamaño reducido */
        }

        .project-description {
            margin: 10px 0 0 0; /* margen superior */
            font-size: 1.1rem; /* tamaño moderado */
            color: #495057; /* gris oscuro */
            display: -webkit-box;
            -webkit-line-clamp: 3; /* mostrar 3 líneas máx */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* ===== Popup card (Uiverse) ===== */
        /* Eliminado efecto translúcido en hover de imágenes de obras */

        .map-container {
            flex: 0 0 60%;
            max-width: 60%;
            position: relative; /* posiciona el mapa interno */
            height: 100vh; /* altura fija para emparejar la sidebar */
            min-height: 320px; /* evita colapsar en pantallas pequeñas */
        }

        #map {
            position: absolute; /* ocupa todo el contenedor */
            top: 0; left: 0; /* anclado al origen */
            width: 100%; /* ancho completo */
            height: 100%; /* alto completo */
        }

        .custom-popup {
            width: 250px; /* ancho estándar del popup */
        }

        .popup-title {
            margin: 0 0 5px 0; /* espacio inferior */
            font-size: 1.1rem; /* tamaño de título */
            color: #2c3e50; /* azul oscuro */
        }

        .popup-category {
            display: inline-block; /* etiqueta en línea con caja */
            padding: 2px 8px; /* relleno interno */
            border-radius: 10px; /* esquina redondeada tipo pill */
            font-size: 0.8rem; /* tamaño pequeño */
            color: white; /* texto blanco */
            margin-bottom: 8px; /* separación respecto al contenido */
        }

        .popup-civil {
            background-color: var(--civil-color); /* fondo azul */
        }

        .popup-network {
            background-color: var(--network-color); /* fondo verde */
        }

        .popup-infrastructure {
            background-color: var(--infrastructure-color); /* fondo rojo */
        }

        .popup-description {
            margin: 0; /* sin márgenes */
            font-size: 0.9rem; /* tamaño moderado */
            color: #495057; /* gris oscuro */
        }

.number-icon {
            background: var(--category-color);
            width: 28px;
            height: 28px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            font-size: 13px;
            font-weight: 700;
            border: 2px solid white;
            box-shadow: 0 0 0 3px var(--category-shadow);
        }

        .number-icon.civil {
            --category-color: var(--civil-color);
            --category-shadow: rgba(52, 152, 219, 0.4);
        }

        .number-icon.network {
            --category-color: var(--network-color);
            --category-shadow: rgba(46, 204, 113, 0.4);
        }

        .number-icon.infrastructure {
            --category-color: var(--infrastructure-color);
            --category-shadow: rgba(231, 76, 60, 0.4);
        }

        /* Responsive adjustments */
        @media (min-width: 993px) { /* escritorios grandes */
            #galeria-section {
                flex-direction: row; /* disposición lado a lado */
            }
            .galeria-wrapper { flex: 0 0 40%; max-width: 40%; }
            .map-container { flex: 0 0 60%; max-width: 60%; }
        }

        @media (max-width: 992px) { /* tablets/portátiles */
            #galeria-section {
                flex-direction: column;
                align-items: stretch;
            }
            .galeria-wrapper {
                flex: 0 0 auto;
                width: 100%;
                max-width: 100%;
            }
            .sidebar {
                width: 100%;
                height: auto;
                max-width: 100%;
                border-right: none;
                border-bottom: 1px solid #dee2e6;
                order: 1;
            }
            .sidebar-header {
                text-align: center;
            }
            .category-tabs {
                flex-wrap: wrap;
                justify-content: center;
            }
            .projects-container {
                order: 2;
                display: flex;
                flex-direction: row;
                gap: 16px;
                padding: 20px;
                height: auto;
                overflow-x: auto;
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
            }
            .projects-container::-webkit-scrollbar {
                height: 6px;
            }
            .projects-container::-webkit-scrollbar-thumb {
                background: rgba(0,0,0,0.3);
                border-radius: 999px;
            }
            .project-card {
                flex-direction: column;
                gap: 12px;
                flex: 0 0 80vw;
                min-width: 75vw;
                scroll-snap-align: center;
                margin-bottom: 0;
                min-height: auto;
            }
            .project-thumb-wrapper {
                flex: none;
                width: 100%;
            }
            .project-thumb {
                height: 220px;
            }
            .project-info {
                width: 100%;
            }
            .map-container {
                order: 3;
                flex: 0 0 auto;
                width: 100%;
                max-width: 100%;
                height: 50vh;
                min-height: 320px;
                margin-top: 24px;
                position: relative;
            }
            #map {
                position: absolute;
                inset: 0;
            }
        }

        @media (max-width: 576px) { /* móviles */
            .sidebar-header {
                padding: 15px; /* menor padding */
            }
            .sidebar-title {
                font-size: 1.3rem; /* título más pequeño */
            }
            .category-tab {
                padding: 8px; /* menor altura de pestañas */
                font-size: 0.9rem; /* texto más pequeño */
            }
            .projects-container {
                padding: 10px; /* padding reducido */
            }
            .project-card {
                padding: 10px; /* padding reducido en tarjeta */
            }
        }





        /* ===== Scrollbar dorado solo en modo claro ===== */
        @media (prefers-color-scheme: light) {
            .projects-container {
                /* Para Firefox: pulgar dorado, pista clara */
                scrollbar-color: #d4af37 #f8f9fa;
            }
            .projects-container::-webkit-scrollbar-thumb {
                background: #d4af37; /* dorado */
            }
            .projects-container::-webkit-scrollbar-thumb:hover {
                background: #b8860b; /* dorado más oscuro al hover */
            }
        }

        /* Forzado cuando el tema se controla por atributo de datos */
        [data-theme="light"] .projects-container {
            scrollbar-color: #d4af37 #f8f9fa; /* Firefox */
        }
        [data-theme="light"] .projects-container::-webkit-scrollbar-thumb {
            background: #d4af37; /* WebKit */
        }
        [data-theme="light"] .projects-container::-webkit-scrollbar-thumb:hover {
            background: #b8860b; /* Hover WebKit */
        }