/* Estilos personalizados */
body {
    background-color: #050505;
    color: #e5e5e5;
    overflow-x: hidden;
}

.glass-panel {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 242, 254, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.neon-text {
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.7), 0 0 20px rgba(0, 242, 254, 0.5);
}

.neon-border {
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2), inset 0 0 10px rgba(0, 242, 254, 0.1);
    transition: all 0.3s ease;
}

.neon-border:hover {
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.6), inset 0 0 15px rgba(0, 242, 254, 0.3);
    border-color: #00f2fe;
}

.cyber-bg {
    background-size: 50px 50px;
    background-position: center;
}

/* Animaciones al hacer scroll */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos del carrusel Hero */
.slide {
    transition: opacity 1.2s ease-in-out;
}
.slide.active {
    opacity: 1;
    z-index: 5;
}
.slide:not(.active) {
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}
.slide.active .slide-zoom {
    transform: scale(1.05);
    transition: transform 7s ease-out;
}
.slide:not(.active) .slide-zoom {
    transform: scale(1);
    transition: none;
}
.slide-content {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-out;
    transition-delay: 0.4s;
    opacity: 0;
    transform: translateY(30px);
}
.slide.active .slide-content {
    opacity: 1;
    transform: translateY(0);
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #050505;
}
::-webkit-scrollbar-thumb {
    background: #00f2fe;
    border-radius: 4px;
}

/* Utilidades para Lightbox */
.hide-scroll {
    overflow: hidden !important;
}

/* ================= EXPANDING ACCORDION GALLERY STYLES ================= */
.gallery-panel {
    flex: 1;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-width: 24px;
    min-height: 24px;
}
.gallery-panel.active {
    flex: 12; /* Expansión masiva para destacar la activa frente a las 13 comprimidas */
}

.gallery-panel > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-panel:hover > img {
    transform: scale(1.05);
}

/* Contenido del Overlay (Píldora expandida) */
.gallery-panel .overlay-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease-in-out;
    min-width: 200px; /* Evita que el texto se rompa al comprimirse */
    pointer-events: none;
}
.gallery-panel.active .overlay-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
    pointer-events: auto;
}

/* Icono comprimido (Se oculta al expandir) */
.gallery-panel .compressed-icon {
    opacity: 1;
    transition: opacity 0.3s ease;
}
.gallery-panel.active .compressed-icon {
    opacity: 0;
    pointer-events: none;
}