/**
 * Galería Option 06 — Carrusel 3D flotante con perspectiva (DESKTOP)
 * Todas las clases usan el prefijo g06- (aislado de las opciones 1-5).
 *
 * IMPORTANTE: ninguna de las variables --g06-tx/ty/tz/ry/scale/op/blur/
 * shadow/z lleva `transition` en CSS. Se recalculan y escriben en cada
 * frame desde JS (drag, autoplay, y el "snap" de asentamiento tras soltar)
 * -- si se les agrega una transition acá, cada escritura por frame abre su
 * propia animación que la siguiente escritura (16ms después) cancela antes
 * de que avance, dejando el carrusel congelado (mismo bug de fondo que
 * `scroll-behavior:smooth` documentado en header-option04-desktop.js).
 */
.galeria-option06 {
    position: relative;
    overflow-x: hidden;
    padding-block: clamp(64px, 9vw, 130px);
}

.g06-header { max-width: 640px; margin: 0 auto 48px; text-align: center; padding-inline: 20px; }
.g06-header .text-eyebrow { justify-content: center; }
.g06-header .text-eyebrow::before { display: none; }
.g06-header h2 { margin-top: 12px; }

.g06-stage {
    --g06-item-size: 185px;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: clamp(360px, 38vw, 560px); /* techo alto para que el item central quepa entero a su tamaño máximo (420px) */
    touch-action: pan-y;
    cursor: grab;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
}
.g06-stage.is-dragging { cursor: grabbing; }
.g06-stage:focus-visible { box-shadow: 0 0 0 3px var(--accent-2, #6b5bff) inset; border-radius: 24px; }

.g06-viewport {
    position: absolute;
    inset: 0;
    perspective: 1400px;
    /* SIN transform-style:preserve-3d acá a propósito: los .g06-item son
       hermanos independientes (no anidan transforms 3D entre sí), y con
       preserve-3d en el padre el navegador ordena el pintado/hit-testing
       por profundidad real (translateZ) en vez de respetar z-index -- eso
       hacía que este contenedor plano (sin su propio transform, z=0)
       tapara a los items con click/tap real aunque se vieran bien en
       pantalla (confirmado con Playwright: document.elementFromPoint()
       devolvía el viewport, no el item). Cada item ya recibe perspectiva
       real a través de este `perspective` del padre sin necesitar preserve-3d. */
}

.g06-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--g06-item-size);
    height: var(--g06-item-size);
    margin-top: calc(var(--g06-item-size) * -0.5);
    margin-left: calc(var(--g06-item-size) * -0.5);
    border: 0;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-surface, #1c1c22);
    transform: translate3d(var(--g06-tx, 0px), var(--g06-ty, 0px), var(--g06-tz, 0px)) rotateY(var(--g06-ry, 0deg)) scale(var(--g06-scale, 1));
    opacity: var(--g06-op, 1);
    filter: blur(var(--g06-blur, 0px));
    z-index: var(--g06-z, 1);
    box-shadow: 0 30px 50px -12px rgba(0, 0, 0, var(--g06-shadow, 0.35));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.g06-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.g06-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.g06-item[data-g06-hidden="true"] { pointer-events: none; }
.g06-item:focus-visible { outline: 3px solid var(--accent-2, #6b5bff); outline-offset: 4px; }

.g06-item-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 14px 10px;
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    color: #fff;
    text-align: left;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.g06-item.is-center .g06-item-caption,
.g06-item:hover .g06-item-caption,
.g06-item:focus-visible .g06-item-caption { opacity: 1; }

.g06-controls { display: flex; justify-content: center; gap: 16px; margin-top: 28px; }
.g06-nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle, #ddd);
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #111);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.g06-nav:hover { transform: translateY(-2px); }
.g06-nav:focus-visible { outline: 3px solid var(--accent-2, #6b5bff); outline-offset: 2px; }

/* ---- Lightbox (compartido por desktop/mobile de esta opción) ---- */
.g06-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1050);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.g06-lightbox[hidden] { display: none; }
.g06-lightbox-backdrop {
    position: absolute;
    inset: 0;
    /* z-index BAJO a propósito: es relativo sólo a sus hermanos dentro de
       .g06-lightbox (que ya tiene su propio z-index de modal de página vía
       --z-modal), no a --z-modal-backdrop -- ese token es para apilar el
       overlay completo contra el RESTO de la página, y usarlo acá (1040)
       tapaba los botones de cerrar/nav (z-index 1-2), que quedaban debajo
       y no recibían click aunque se vieran encima (confirmado con
       Playwright: "intercepts pointer events"). */
    z-index: 0;
    background: rgba(8, 8, 12, 0.92);
}
.g06-lightbox-figure {
    position: relative;
    z-index: 1;
    max-width: min(92vw, 1100px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.g06-lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 16px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}
.g06-lightbox-caption { color: #fff; font-size: var(--text-sm, 14px); text-align: center; min-height: 1em; }
.g06-lightbox-close,
.g06-lightbox-nav {
    position: absolute;
    z-index: 2;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.g06-lightbox-close:hover,
.g06-lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); }
.g06-lightbox-close:focus-visible,
.g06-lightbox-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.g06-lightbox-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 26px; }
.g06-lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 28px; }
.g06-lightbox-prev { left: 12px; }
.g06-lightbox-next { right: 12px; }

@media (prefers-reduced-motion: reduce) {
    .g06-item-caption { transition: none; }
    .g06-nav { transition: none; }
}