/* ============================================= */
/* --- MÓDULO 1: SECCIÓN GALERÍA Y CARRUSEL 3D --- */
/* ============================================= */

#galeria {
    position: relative;
    background-image: url('../media/images/backgrounds/background_galeria.png'); /* Reemplaza con tu ruta */
    padding: 100px 0;
    overflow: hidden;
}

.galeria-title {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    z-index: 10; display: flex; justify-content: center;
}

.galeria-title-img { height: 70px; width: auto; }

.galeria-content {
    display: flex; justify-content: center; align-items: center;
    width: 100%; max-width: 1400px; margin: 0 auto; padding-top: 50px;
}

.carrusel-3d-wrapper {
    position: relative; width: 100%; height: 400px;
    display: flex; justify-content: center; align-items: center; perspective: 1200px;
}

.carrusel-3d-list {
    position: relative; width: 100%; height: 100%; list-style: none;
    display: flex; justify-content: center; align-items: center; transform-style: preserve-3d;
}

.carrusel-3d-list li {
    position: absolute; width: 300px; height: 380px;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0; opacity: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 2px solid transparent;
}

.carrusel-3d-list li img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

/* Estados del Carrusel 3D */
.carrusel-3d-list li.active { transform: translate3d(0, 0, 100px) scale(1.1) rotateY(0deg); opacity: 1; z-index: 5; border-color: rgba(255,255,255,0.2); }
.carrusel-3d-list li.lateral-izq-1, .carrusel-3d-list li.lateral-der-1 { width: 260px; height: 330px; opacity: 0.9; z-index: 3; }
.carrusel-3d-list li.lateral-izq-2, .carrusel-3d-list li.lateral-der-2 { width: 220px; height: 280px; opacity: 0.7; z-index: 1; }
.carrusel-3d-list li.lateral-izq-1 { transform: translate3d(-250px, 0, -50px) rotateY(35deg); }
.carrusel-3d-list li.lateral-der-1 { transform: translate3d(250px, 0, -50px) rotateY(-35deg); }
.carrusel-3d-list li.lateral-izq-2 { transform: translate3d(-450px, 0, -150px) rotateY(50deg); }
.carrusel-3d-list li.lateral-der-2 { transform: translate3d(450px, 0, -150px) rotateY(-50deg); }
.carrusel-3d-list li.hidden-izq { transform: translate3d(-500px, 0, -300px) rotateY(70deg); opacity: 0; }
.carrusel-3d-list li.hidden-der { transform: translate3d(500px, 0, -300px) rotateY(-70deg); opacity: 0; }

/* Efecto Vidrio Carrusel */
.carrusel-3d-list li.active::after {
    content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
    transform: skewX(-20deg); transition: left 0.8s ease-in-out; z-index: 2; pointer-events: none;
}
.carrusel-3d-list li.active:hover::after { left: 150%; }

/* Flechas Carrusel */
.carrusel-3d-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; cursor: pointer;
    width: 45px; height: 70px; background-color: var(--primary-orange, #FF4500);
    display: flex; justify-content: center; align-items: center;
    transition: filter 0.3s ease, transform 0.3s ease;
}
.carrusel-3d-nav:hover { filter: brightness(1.2); transform: translateY(-50%) scale(1.05); }
.carrusel-3d-nav::after {
    content: ''; display: block; width: 14px; height: 14px;
    border-top: 3px solid var(--white, #ffffff); border-right: 3px solid var(--white, #ffffff);
}
.carrusel-nav-prev { left: 20px; }
.carrusel-nav-prev::after { transform: rotate(-135deg); margin-left: 6px; }
.carrusel-nav-next { right: 20px; }
.carrusel-nav-next::after { transform: rotate(45deg); margin-right: 6px; }

/* Footer Link */
.galeria-footer { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; padding-top: 100px; z-index: 5; }
.galeria-footer-link {
    font-family: var(--font-family, 'Poppins', sans-serif); font-size: 18px; font-weight: 800; color: var(--white, #ffffff);
    text-decoration: none; position: relative; padding-bottom: 10px; letter-spacing: 1px; transition: color 0.3s ease;
}
.galeria-footer-link::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; height: 3px; background-color: var(--primary-orange, #FF4500); transition: width 0.3s ease;
}

.galeria-footer-link:hover::after { width: 60%; }


/* ============================================= */
/* --- MÓDULO 2: CONSOLA VIRTUAL STARK --- */
/* ============================================= */

.stark-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    z-index: 9999; display: flex; flex-direction: column; opacity: 0; visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.stark-overlay.active { opacity: 1; visibility: visible; }

/* Cabecera Stark */
.stark-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 50px; border-bottom: 1px solid rgba(0, 255, 255, 0.3); /* Cambiado a cian para la temática Stark */
}
.stark-stats { color: #FFffff; font-family: var(--font-family, 'Poppins', sans-serif); font-size: 14px; letter-spacing: 2px; text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }
.stark-btn-close {
    background: var(--primary-orange); border: 1px solid var(--primary-orange); color: var(--white);
    padding: 10px 20px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.3s ease;
}
.stark-btn-close:hover { background: var(--primary-orange); color: var(--white); box-shadow: 0 0 15px rgba(255, 69, 0, 0.6); }

/* Área principal (Scrollable) */
.stark-viewport { 
    flex: 1; position: relative; overflow-y: auto; padding: 40px; display: block; 
}

/* Scrollbar futurista */
.stark-viewport::-webkit-scrollbar { width: 8px; }
.stark-viewport::-webkit-scrollbar-track { background: rgba(0, 255, 255, 0.05); }
.stark-viewport::-webkit-scrollbar-thumb { background: rgba(0, 255, 255, 0.5); border-radius: 4px; }

/* Layout Masonry CSS */
.stark-grid-container {
    column-count: 4; column-gap: 20px;
    width: 100%; max-width: 1400px; margin: 0 auto;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}


/* ============================================= */
/* --- EFECTO HOLOGRAMA STARK AVANZADO --- */
/* ============================================= */

.stark-thumb-wrap {
    display: inline-block; /* Crucial para el efecto Masonry */
    width: 100%; margin-bottom: 20px; break-inside: avoid;
    position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); cursor: pointer;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* Fondo oscuro, borde eléctrico y resplandor interno */
    background: rgba(0, 15, 30, 0.9); 
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.stark-thumb-wrap:hover { border-color: var(--white); box-shadow: 0 0 30px rgba(255, 255, 255, 0.6); z-index: 10; }

/* Tratamiento B/N y Luz de la imagen */
.stark-thumb-wrap.hologram img {
    width: 100%; height: 100%; display: block;
    filter: grayscale(100%) contrast(150%) brightness(1.2);
    opacity: 0.6; mix-blend-mode: screen; 
    transition: all 0.4s ease;
}

/* Tinte Cian Puro Matemático */
.stark-thumb-wrap.hologram::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /*background: rgba(0, 255, 255, 0.45); mix-blend-mode: color; z-index: 2; pointer-events: none;*/
	background: rgba(255, 30, 0, 0.45); mix-blend-mode: color; z-index: 2; pointer-events: none;
}

/* Scanlines y Láser de Escaneo */
.stark-scanline {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /*background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);*/
	background: repeating-linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0.65) 1px, transparent 1px, transparent 2px);
    pointer-events: none; z-index: 3;
}
.stark-scanline::after {
    content: ''; position: absolute; top: -10%; left: 0; width: 100%; height: 3px;
    /*background: rgba(0, 255, 255, 0.9);
	box-shadow: 0 0 15px rgba(0, 255, 255, 1), 0 0 30px rgba(0, 255, 255, 0.8);
	*/
	background: rgba(255, 30, 0, 0.5);
    box-shadow: 0 0 15px rgba(255, 30, 0, 1), 0 0 30px rgba(255, 30, 0, 0.8);
    animation: starkSweep 4s ease-in-out infinite alternate;
}

@keyframes starkSweep {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}

/* Animación Flotación Suave + Micro Fallos Eléctricos (Glitch) */
.stark-thumb-wrap.floating { animation: starkFloatSutil 6s ease-in-out infinite alternate, starkFlicker 5s infinite; }

@keyframes starkFloatSutil {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-5px) rotate(0.3deg); }
}
@keyframes starkFlicker {
    0%, 100% { opacity: 1; filter: brightness(1); }
    91% { opacity: 1; filter: brightness(1); }
    92% { opacity: 0.6; filter: brightness(1.5); }
    94% { opacity: 0.9; filter: brightness(0.8); }
    96% { opacity: 1; filter: brightness(1); }
    98% { opacity: 0.7; filter: brightness(1.2); }
    99% { opacity: 1; filter: brightness(1); }
}


/* --- Paginación Stark --- */
.stark-pagination { display: flex; justify-content: center; align-items: center; gap: 40px; padding: 20px; }
.stark-page-indicator { color: /*#00ffff*/#FF1400; font-family: monospace; font-size: 16px; letter-spacing: 3px; }
.stark-nav {
    width: 40px; height: 40px; /*border: 1px solid rgba(0, 255, 255, 0.3)*/border: 1px solid rgba(255, 30, 0, 0.3); border-radius: 50%;
    display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease;
}
.stark-nav:hover { border-color: /*#00ffff*/#FF1400; background: rgba(0, 255, 255, 0.1); /*box-shadow: 0 0 15px rgba(0, 255, 255, 0.4)*/box-shadow: 0 0 15px rgba(255, 30, 0, 0.4); }
.stark-nav::after { content: ''; display: block; width: 10px; height: 10px; border-top: 2px solid /*#00ffff*/#FF1400; border-right: 2px solid /*#00ffff*/#FF1400; }
.stark-nav-prev::after { transform: rotate(-135deg); margin-left: 4px; }
.stark-nav-next::after { transform: rotate(45deg); margin-right: 4px; }
.stark-nav.disabled { opacity: 0.3; pointer-events: none; }


/* ============================================= */
/* --- EXPANSIÓN DE FOTO (FLIP ANIMATION) --- */
/* ============================================= */

/* Bloqueo total (Fondo Negro) */
#stark-lightbox-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.4s ease;
}
#stark-lightbox-backdrop.active { opacity: 1; visibility: visible; }

/* Clon Animado - Se quita todo rastro del holograma */
.stark-clone {
    position: fixed; z-index: 10001; 
    border: 2px solid var(--white); /*border-radius: 8px;*/
    /*box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);*/ object-fit: cover;
    filter: none !important; mix-blend-mode: normal !important; 
    transition: top 0.4s ease, left 0.4s ease, width 0.4s ease 0.4s, height 0.4s ease 0.4s;
}


/* Botón X de Cierre de Foto */
.stark-lightbox-close {
    position: fixed; top: 30px; right: 40px; width: 50px; height: 50px;
    background: rgba(0,0,0,0.5); border: 1px solid var(--primary-orange); border-radius: 50%;
    cursor: pointer; z-index: 10002; display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
}
.stark-lightbox-close.active { opacity: 1; visibility: visible; }
.stark-lightbox-close:hover { background: var(--primary-orange); box-shadow: 0 0 20px rgba(255,69,0,0.6); }
.stark-lightbox-close::before, .stark-lightbox-close::after { content: ''; position: absolute; width: 20px; height: 2px; background: var(--white); }
.stark-lightbox-close::before { transform: rotate(45deg); }
.stark-lightbox-close::after { transform: rotate(-45deg); }


/* ============================================= */
/* --- RESPONSIVE ADJUSTMENTS --- */
/* ============================================= */

@media (max-width: 1024px) {
    .stark-grid-container { column-count: 3; } /* 3 Columnas en Tablets */
}

@media (max-width: 768px) {
    /* Carrusel Responsive */
    #galeria { padding: 80px 0; }
    .carrusel-3d-wrapper { height: 250px; perspective: 600px; }
    .carrusel-3d-list li { width: 180px; height: 230px; }
    .carrusel-3d-list li.active { transform: translate3d(0, 0, 50px) scale(1.1) rotateY(0deg); }
    .carrusel-3d-list li.lateral-izq-1 { transform: translate3d(-100px, 0, -30px) rotateY(-25deg); width: 150px; height: 190px; }
    .carrusel-3d-list li.lateral-der-1 { transform: translate3d(100px, 0, -30px) rotateY(25deg); width: 150px; height: 190px; }
    .carrusel-3d-list li.lateral-izq-2 { transform: translate3d(-200px, 0, -100px) rotateY(-40deg); opacity: 0; }
    .carrusel-3d-list li.lateral-der-2 { transform: translate3d(200px, 0, -100px) rotateY(40deg); opacity: 0; }
    
    /* Consola Stark Responsive */
    .stark-header { padding: 20px; flex-direction: column; gap: 15px; }
    .stark-viewport { padding: 10px; }
    .stark-grid-container { column-count: 2; column-gap: 15px; } /* 2 Columnas en Móvil */
    .stark-thumb-wrap { margin-bottom: 15px; }
    
}

@media (max-width: 480px) {
    .stark-grid-container { column-count: 1; } /* 1 Columna en pantallas pequeñas */
}