/* =========================================================
   BODEGA PRIME - GALERÍA 3D COVERFLOW
   Ruta: src/css/gallery-3d.css

   Objetivo:
   - Imagen principal fija.
   - Carrusel secundario tipo CoverFlow 3D.
   - Se ven imágenes laterales y de fondo.
   - Rotación visible y más lenta.
   - Lightbox propio con Prev / Next.
========================================================= */

/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */

.gallery-prime-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
    gap: 28px;
    align-items: stretch;
    width: 100%;
}

.gallery-prime-layout-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 980px;
    margin: 0 auto;
}

/* =========================================================
   IMAGEN PRINCIPAL FIJA
========================================================= */

.gallery-prime-main {
    position: relative;
    display: block;
    width: 100%;
    height: 560px;
    overflow: hidden;
    border-radius: 28px;
    background: #e8eef6;
    box-shadow: 0 20px 55px rgba(13, 27, 42, .13);
    text-decoration: none;
    cursor: zoom-in;
}

.gallery-prime-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .28s ease, filter .28s ease;
}

.gallery-prime-main:hover img {
    transform: scale(1.018);
    filter: saturate(1.03);
}

.gallery-placeholder {
    cursor: default;
}

.gallery-prime-main.gallery-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 23, .06), rgba(2, 6, 23, .20));
    pointer-events: none;
}

/* =========================================================
   CARRUSEL 3D COVERFLOW
========================================================= */

.gallery-3d-stage {
    position: relative;
    width: 100%;
    height: 560px;
    min-height: 560px;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 45%, rgba(37, 99, 235, .08), transparent 45%),
        linear-gradient(135deg, #f8fbff 0%, #eaf1f9 100%);
    box-shadow: 0 20px 55px rgba(13, 27, 42, .10);
    perspective: 1250px;
    isolation: isolate;
}

/* Marco visual muy sutil */
.gallery-3d-stage::before {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, .08);
    pointer-events: none;
    z-index: 0;
}

/* Sombra inferior */
.gallery-3d-stage::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 94px;
    width: 56%;
    height: 42px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(15, 23, 42, .15);
    filter: blur(22px);
    pointer-events: none;
    z-index: 0;
}

.gallery-3d-scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

/*
   Contenedor de tarjetas.
   Aquí no rotamos todo el cilindro; movemos cada tarjeta por clases.
   Esto da el efecto CoverFlow tipo ejemplo que compartiste.
*/
.gallery-3d-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* =========================================================
   TARJETAS BASE
========================================================= */

.gallery-3d-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 270px;
    margin-left: -180px;
    margin-top: -135px;
    overflow: hidden;
    border-radius: 22px;
    background: #dfe8f3;
    box-shadow: 0 20px 44px rgba(2, 6, 23, .24);
    text-decoration: none;
    cursor: zoom-in;
    transform-style: preserve-3d;
    backface-visibility: visible;
    opacity: 0;
    pointer-events: none;
    filter: brightness(.65) saturate(.85);
    transform:
        translate3d(0, 0, -420px)
        rotateY(80deg)
        scale(.58);
    transition:
        transform 1.65s cubic-bezier(.16, .76, .22, 1),
        opacity 1.65s ease,
        filter 1.65s ease,
        box-shadow 1.65s ease;
    will-change: transform, opacity, filter;
}

.gallery-3d-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    backface-visibility: visible;
}

.gallery-3d-item:hover img {
    filter: brightness(1.04);
}

/* =========================================================
   POSICIONES COVERFLOW
   Estas clases las asigna gallery-3d.js
========================================================= */

/* Imagen central */
.gallery-3d-item.is-active {
    z-index: 10;
    opacity: 1;
    pointer-events: auto;
    filter: brightness(1) saturate(1.04);
    transform:
        translate3d(0, 0, 145px)
        rotateY(0deg)
        scale(1.08);
    box-shadow: 0 30px 72px rgba(2, 6, 23, .34);
}

/* Imagen inmediata izquierda */
.gallery-3d-item.is-prev-1 {
    z-index: 8;
    opacity: .82;
    pointer-events: auto;
    filter: brightness(.80) saturate(.92);
    transform:
        translate3d(-245px, 0, 15px)
        rotateY(62deg)
        scale(.88);
}

/* Imagen inmediata derecha */
.gallery-3d-item.is-next-1 {
    z-index: 8;
    opacity: .82;
    pointer-events: auto;
    filter: brightness(.80) saturate(.92);
    transform:
        translate3d(245px, 0, 15px)
        rotateY(-62deg)
        scale(.88);
}

/* Segunda imagen izquierda, simulando fondo */
.gallery-3d-item.is-prev-2 {
    z-index: 5;
    opacity: .48;
    pointer-events: auto;
    filter: brightness(.70) saturate(.84);
    transform:
        translate3d(-385px, 0, -145px)
        rotateY(75deg)
        scale(.70);
}

/* Segunda imagen derecha, simulando fondo */
.gallery-3d-item.is-next-2 {
    z-index: 5;
    opacity: .48;
    pointer-events: auto;
    filter: brightness(.70) saturate(.84);
    transform:
        translate3d(385px, 0, -145px)
        rotateY(-75deg)
        scale(.70);
}

/* Tercera imagen izquierda, apenas visible atrás */
.gallery-3d-item.is-prev-3 {
    z-index: 3;
    opacity: .24;
    pointer-events: none;
    filter: brightness(.60) saturate(.72);
    transform:
        translate3d(-480px, 0, -310px)
        rotateY(86deg)
        scale(.55);
}

/* Tercera imagen derecha, apenas visible atrás */
.gallery-3d-item.is-next-3 {
    z-index: 3;
    opacity: .24;
    pointer-events: none;
    filter: brightness(.60) saturate(.72);
    transform:
        translate3d(480px, 0, -310px)
        rotateY(-86deg)
        scale(.55);
}

/* Resto ocultas */
.gallery-3d-item.is-hidden {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    filter: brightness(.45);
    transform:
        translate3d(0, 0, -460px)
        rotateY(90deg)
        scale(.48);
}

/* Durante rotación: transición ligeramente más lenta y visible */
.gallery-3d-carousel.is-rotating .gallery-3d-item {
    transition:
        transform 1.85s cubic-bezier(.16, .76, .22, 1),
        opacity 1.85s ease,
        filter 1.85s ease,
        box-shadow 1.85s ease;
}

/* =========================================================
   CONTROLES DEL CARRUSEL
========================================================= */

.gallery-3d-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 27, 51, .92);
    color: #fff;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
    z-index: 30;
    box-shadow: 0 12px 28px rgba(2, 6, 23, .22);
    transition: transform .18s ease, background .18s ease, opacity .18s ease;
}

.gallery-3d-control:hover {
    background: #2563eb;
    transform: translateY(-50%) scale(1.06);
}

.gallery-3d-control:active {
    transform: translateY(-50%) scale(.96);
}

.gallery-3d-control-prev {
    left: 18px;
}

.gallery-3d-control-next {
    right: 18px;
}

/* =========================================================
   INDICADOR INFERIOR
========================================================= */

.gallery-3d-hint {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(15, 27, 51, .86);
    color: rgba(255, 255, 255, .86);
    font-size: .82rem;
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.gallery-3d-hint strong {
    color: #fff;
}

/* =========================================================
   LIGHTBOX CON PREV / NEXT
========================================================= */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 34px;
    background: rgba(2, 6, 23, .88);
    backdrop-filter: blur(8px);
}

.gallery-lightbox.is-open {
    display: flex;
}

.gallery-lightbox-content {
    position: relative;
    width: min(1180px, 94vw);
    height: min(760px, 86vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
    background: #0f172a;
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    z-index: 1000000;
    border: 0;
    outline: none;
    border-radius: 999px;
    background: rgba(15, 27, 51, .94);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .32);
    transition: transform .18s ease, background .18s ease;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
    background: #2563eb;
}

.gallery-lightbox-close {
    top: 18px;
    right: 22px;
    width: 48px;
    height: 48px;
    font-size: 32px;
    line-height: 1;
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
    top: 50%;
    width: 62px;
    height: 62px;
    font-size: 46px;
    line-height: 1;
    transform: translateY(-50%);
}

.gallery-lightbox-prev {
    left: 28px;
}

.gallery-lightbox-next {
    right: 28px;
}

.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
    transform: translateY(-50%) scale(1.06);
}

.gallery-lightbox-close:hover {
    transform: scale(1.06);
}

.gallery-lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 1000000;
    transform: translateX(-50%);
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(15, 27, 51, .94);
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    white-space: nowrap;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1399.98px) {
    .gallery-3d-item {
        width: 335px;
        height: 252px;
        margin-left: -167.5px;
        margin-top: -126px;
    }

    .gallery-3d-item.is-active {
        transform: translate3d(0, 0, 135px) rotateY(0deg) scale(1.06);
    }

    .gallery-3d-item.is-prev-1 {
        transform: translate3d(-215px, 0, 10px) rotateY(62deg) scale(.86);
    }

    .gallery-3d-item.is-next-1 {
        transform: translate3d(215px, 0, 10px) rotateY(-62deg) scale(.86);
    }

    .gallery-3d-item.is-prev-2 {
        transform: translate3d(-335px, 0, -140px) rotateY(75deg) scale(.68);
    }

    .gallery-3d-item.is-next-2 {
        transform: translate3d(335px, 0, -140px) rotateY(-75deg) scale(.68);
    }

    .gallery-3d-item.is-prev-3 {
        transform: translate3d(-420px, 0, -290px) rotateY(86deg) scale(.52);
    }

    .gallery-3d-item.is-next-3 {
        transform: translate3d(420px, 0, -290px) rotateY(-86deg) scale(.52);
    }
}

@media (max-width: 1199.98px) {
    .gallery-prime-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .gallery-prime-main,
    .gallery-3d-stage {
        height: 500px;
        min-height: 500px;
    }

    .gallery-3d-item {
        width: 330px;
        height: 245px;
        margin-left: -165px;
        margin-top: -122.5px;
    }

    .gallery-3d-item.is-prev-1 {
        transform: translate3d(-230px, 0, 10px) rotateY(62deg) scale(.88);
    }

    .gallery-3d-item.is-next-1 {
        transform: translate3d(230px, 0, 10px) rotateY(-62deg) scale(.88);
    }

    .gallery-3d-item.is-prev-2 {
        transform: translate3d(-380px, 0, -145px) rotateY(75deg) scale(.70);
    }

    .gallery-3d-item.is-next-2 {
        transform: translate3d(380px, 0, -145px) rotateY(-75deg) scale(.70);
    }
}

@media (max-width: 767.98px) {
    .gallery-prime-layout {
        gap: 20px;
    }

    .gallery-prime-main,
    .gallery-3d-stage {
        height: 340px;
        min-height: 340px;
        border-radius: 22px;
    }

    .gallery-3d-item {
        width: 235px;
        height: 176px;
        margin-left: -117.5px;
        margin-top: -88px;
        border-radius: 18px;
    }

    .gallery-3d-item.is-active {
        transform: translate3d(0, 0, 95px) rotateY(0deg) scale(1);
    }

    .gallery-3d-item.is-prev-1 {
        transform: translate3d(-150px, 0, 0) rotateY(62deg) scale(.80);
    }

    .gallery-3d-item.is-next-1 {
        transform: translate3d(150px, 0, 0) rotateY(-62deg) scale(.80);
    }

    .gallery-3d-item.is-prev-2 {
        transform: translate3d(-230px, 0, -120px) rotateY(75deg) scale(.58);
    }

    .gallery-3d-item.is-next-2 {
        transform: translate3d(230px, 0, -120px) rotateY(-75deg) scale(.58);
    }

    .gallery-3d-item.is-prev-3,
    .gallery-3d-item.is-next-3 {
        opacity: 0;
        pointer-events: none;
    }

    .gallery-3d-control {
        width: 40px;
        height: 40px;
        font-size: 30px;
    }

    .gallery-3d-control-prev {
        left: 12px;
    }

    .gallery-3d-control-next {
        right: 12px;
    }

    .gallery-3d-hint {
        bottom: 12px;
        font-size: .74rem;
        padding: 8px 11px;
    }

    .gallery-3d-hint span {
        display: none;
    }

    .gallery-lightbox {
        padding: 18px;
    }

    .gallery-lightbox-content {
        width: 96vw;
        height: 80vh;
    }

    .gallery-lightbox-prev,
    .gallery-lightbox-next {
        width: 46px;
        height: 46px;
        font-size: 34px;
    }

    .gallery-lightbox-prev {
        left: 8px;
    }

    .gallery-lightbox-next {
        right: 8px;
    }

    .gallery-lightbox-close {
        width: 42px;
        height: 42px;
        font-size: 28px;
        top: 12px;
        right: 12px;
    }

    .gallery-lightbox-counter {
        bottom: 12px;
        font-size: .78rem;
    }
}

@media (max-width: 420px) {
    .gallery-prime-main,
    .gallery-3d-stage {
        height: 300px;
        min-height: 300px;
    }

    .gallery-3d-item {
        width: 210px;
        height: 160px;
        margin-left: -105px;
        margin-top: -80px;
    }

    .gallery-3d-item.is-prev-1 {
        transform: translate3d(-130px, 0, 0) rotateY(62deg) scale(.78);
    }

    .gallery-3d-item.is-next-1 {
        transform: translate3d(130px, 0, 0) rotateY(-62deg) scale(.78);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-prime-main img,
    .gallery-3d-item,
    .gallery-3d-control,
    .gallery-lightbox-close,
    .gallery-lightbox-prev,
    .gallery-lightbox-next {
        transition: none !important;
    }
}