/* ============================================================
   Galería de fases para la ficha de producto.
   3 imágenes + 3 botones. Avance automático cada 5 s: la imagen
   que sale se amplía y se desvanece dejando ver la siguiente. Los
   botones hacen de barra de progreso (relleno rojo de izquierda a
   derecha) y al pasar el ratón por encima muestran su imagen.

   Los tiempos se declaran UNA sola vez aquí: galeria.js los lee
   con getComputedStyle, así que no hay que sincronizar números
   a mano entre CSS y JS.
   ============================================================ */

.galeria-wrap {
    /* ---- Panel de mandos ----------------------------------------
       Todo lo configurable vive aquí. El widget de Elementor
       sobreescribe estas variables sobre .galeria-wrap, así que no
       hace falta reescribir ninguna regla desde PHP.
       El ritmo lo lee además el JS, para no duplicar los números. */
    --galeria-interval: 3000ms;
    /* tiempo visible de cada imagen */
    --galeria-exit: 600ms;
    /* salida de la imagen anterior (zoom + fundido) */
    --galeria-exit-scale: 1.1;
    /* cuánto amplía la imagen al salir */
    --galeria-ratio: 16 / 9;
    --galeria-ratio-movil: 4 / 3;
    --galeria-tab-bg: var(--c-acero-claro, #F3F4F5);
    --galeria-tab-bg-hover: var(--c-acero-medio, #D6D9DB);
    --galeria-tab-color: var(--c-acero-oscuro, #3F3E41);
    --galeria-ease: cubic-bezier(.33, 1, .68, 1);
    .galeria-box {
        max-width: var(--container, 1280px);
        margin: 0 auto;
    }

    /* ---------- Escenario ---------- */

    .galeria__frame {
        position: relative;
        overflow: hidden;
        aspect-ratio: var(--galeria-ratio);
        background: var(--graphite-2, #2A292B);
        border-radius: var(--radius-sm, 2px);
    }

    .galeria__stage {
        position: absolute;
        inset: 0;
    }

    .galeria__slide {
        position: absolute;
        inset: 0;
        margin: 0;
        /* Las inactivas siguen apiladas en el mismo hueco, pero ocultas:
           así no capturan el ratón ni se leen en voz alta. */
        opacity: 0;
        visibility: hidden;

        &.is-active {
            opacity: 1;
            visibility: visible;
            z-index: 1;
        }

        /* La que se va queda POR ENCIMA de la nueva y se retira sola:
           amplía a 1.1 y baja de opacidad 1 a 0. Así la siguiente imagen
           aparece por debajo sin necesidad de animarla. */
        &.is-leaving {
            opacity: 0;
            visibility: visible;
            z-index: 2;
            transform: scale(var(--galeria-exit-scale));
            transition: opacity var(--galeria-exit) var(--galeria-ease),
                        transform var(--galeria-exit) var(--galeria-ease);
        }
    }

    .galeria__img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

        /* Deriva lenta tipo Ken Burns: la imagen entra un poco ampliada y se
           asienta mientras está visible, así el plano nunca queda congelado.
           La transición solo existe en la activa: al salir vuelve al 1.06 de
           golpe (ya oculta) y la siguiente vez arranca desde el principio. */
        transform: scale(1.06);
    }

    /* La saliente conserva la misma regla: si perdiera la transición al
       dejar de ser activa, volvería al 1.06 de golpe y se vería un salto
       justo al empezar el fundido. */
    .galeria__slide.is-active .galeria__img,
    .galeria__slide.is-leaving .galeria__img {
        transform: scale(1);
        transition: transform calc(var(--galeria-interval) + var(--galeria-exit)) linear;
    }

    /* ---------- Botones ---------- */

    .galeria__tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
        margin-top: 2px;
    }

    .galeria__tab {
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
        margin: 0;
        padding: 18px var(--space-md, 24px);
        border: 0;
        border-radius: var(--radius-sm, 2px);
        background: var(--galeria-tab-bg);
        color: var(--galeria-tab-color);
        font-family: var(--font, 'Barlow', sans-serif);
        text-align: left;
        cursor: pointer;
        transition: background var(--duration, 200ms) var(--ease, ease);

        &:hover {
            background: var(--galeria-tab-bg-hover);
        }

        /* Foco visible: con teclado, el botón enfocado activa su imagen
           igual que el hover del ratón. */
        &:focus-visible {
            outline: 2px solid var(--c-rojo);
            outline-offset: -2px;
        }
    }

    .galeria__tab-inner {
        display: flex;
        align-items: baseline;
        gap: 10px;
        min-width: 0;
    }

    .galeria__tab-num {
        flex: none;
        font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
        font-weight: 700;
        font-size: 15px;
        letter-spacing: .06em;
        color: var(--steel-dark, #5B6268);
        transition: color var(--duration, 200ms) var(--ease, ease);
        font-family: var(--tipo-titulos);
    }

    .galeria__tab-txt {
        font-weight: 500;
        font-size: 17px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: var(--tipo-general);
    }

    /* Solo la etiqueta de abajo: el número de la capa de progreso va en
       blanco, y sin el hijo directo esta regla lo pintaría de rojo sobre
       rojo, invisible justo cuando pasa el relleno. */
    .galeria__tab.is-active > .galeria__tab-inner .galeria__tab-num {
        color: var(--c-rojo);
    }

    /* Capa de progreso: la crea galeria.js clonando la etiqueta del botón.
       Es una copia exacta sobre fondo rojo, recortada por la derecha con
       clip-path (lo mueve el JS en cada fotograma). Al recortar en vez de
       escalar, el texto no se deforma y se invierte a blanco justo por
       donde va pasando el relleno. */
    .galeria__tab-progress {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        padding: inherit;
        background: var(--c-rojo);
        color: var(--white, #FFFFFF);
        clip-path: inset(0 100% 0 0);
        pointer-events: none;

        .galeria__tab-num {
            color: var(--white, #FFFFFF);
            opacity: .75;
        }
    }

    /* ---------- Responsive ---------- */

    @media screen and (max-width: 767px) {
        .galeria__frame {
            aspect-ratio: var(--galeria-ratio-movil);
        }

        .galeria__tab {
            padding: 14px var(--space-sm, 16px);
        }

        .galeria__tab-inner {
            gap: 6px;
        }

        .galeria__tab-txt {
            font-size: 15px;
        }
    }

    @media screen and (max-width: 479px) {
        .galeria__tab {
            padding: 12px 10px;
        }

        .galeria__tab-num,
        .galeria__tab-txt {
            font-size: 13px;
        }
    }

    /* ---------- Movimiento reducido ----------
       Sin zoom ni deriva: solo un fundido corto entre imágenes. El relleno
       de los botones se mantiene, porque informa del tiempo restante. */
    @media (prefers-reduced-motion: reduce) {
        .galeria__slide.is-leaving {
            transform: none;
            transition: opacity 250ms linear;
        }

        .galeria__img,
        .galeria__slide.is-active .galeria__img,
        .galeria__slide.is-leaving .galeria__img {
            transform: none;
            transition: none;
        }
    }
}