/* Slider de productos — medidas tomadas del diseño carucel.png (3124x1656)
   ------------------------------------------------------------------
   hero          1415/1656 = 85.4% del alto
   contenedor    2432/3124 = 77.85% del ancho (margen 11.08% por lado)
   miniatura     590x144 -> ratio 4.1:1, separación 24/3124 = 0.77%
   barra         6px, #E2BA61
*/

.gd-slider {
    --gd-amarillo: #E2BA61;
    --gd-negro: #000;
    --gd-tira-bg: #0D0D0D;
    --gd-lado: 11.08%;
    --gd-hueco: 0.77%;
    --gd-interval: 6000ms;

    position: relative;
    background: var(--gd-negro);
    overflow: hidden;
    font-family: "Barlow", Sans-serif;
}

/* ---------- escenario ---------- */

.gd-slider__stage {
    position: relative;
    aspect-ratio: 3124 / 1415;
    min-height: 320px;
    background: var(--gd-negro);
}

.gd-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease;
}

.gd-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.gd-slide__img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%  !important;
    object-fit: cover;
    display: block;
}

/* degradado: la foto se funde a negro hacia abajo */
.gd-slide__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,.45) 55%,
        rgba(0,0,0,.88) 78%,
        var(--gd-negro) 94%
    );
}

/* ---------- texto y botón ---------- */

.gd-slide__body {
    position: absolute;
    left: var(--gd-lado);
    right: var(--gd-lado);
    bottom: 4.2%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.gd-slide__text {
    min-width: 0;
}

.gd-slide__eyebrow {
    margin: 0 0 .5em;
    color: rgba(255,255,255,.72);
    font-size: clamp(11px, 1.02vw, 19px);
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.2;
}

.gd-slide__title {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 3.4vw, 66px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.gd-slide__cta {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    flex-shrink: 0;
    padding-bottom: .55em;
    border-bottom: 1px solid rgba(255,255,255,.85);
    color: #fff;
    font-size: clamp(11px, .92vw, 17px);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .25s ease, border-color .25s ease;
}

.gd-slide__cta:hover,
.gd-slide__cta:focus-visible {
    color: var(--gd-amarillo);
    border-color: var(--gd-amarillo);
}

.gd-slide__arrow {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.gd-slide__cta:hover .gd-slide__arrow {
    transform: translate(2px, -2px);
}

/* ---------- tira de miniaturas ---------- */

.gd-slider__thumbs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--gd-cols, 4), 1fr);
    gap: var(--gd-hueco);
    padding: 1.5% var(--gd-lado) 2.9%;
    background: var(--gd-tira-bg);
}

.gd-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 590 / 144;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #1a1a1a;
    cursor: pointer;
    overflow: hidden;
    opacity: .55;
    transition: opacity .3s ease;
    -webkit-appearance: none;
    appearance: none;
}

.gd-thumb:hover,
.gd-thumb:focus-visible {
    opacity: .85;
}

.gd-thumb.is-active {
    opacity: 1;
}

.gd-thumb:focus-visible {
    outline: 2px solid var(--gd-amarillo);
    outline-offset: 2px;
}

.gd-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* carril de la barra: solo visible en la activa */
.gd-thumb__track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: rgba(255,255,255,.14);
    opacity: 0;
    transition: opacity .2s ease;
}

.gd-thumb.is-active .gd-thumb__track {
    opacity: 1;
}

.gd-thumb__bar {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gd-amarillo);
    transform-origin: left center;
}

/* La animación es la que manda: al terminar, el JS pasa al siguiente slide.
   Así, al pausar en hover, se pausan barra y avance a la vez. */
.gd-thumb.is-active .gd-thumb__bar.is-running {
    animation: gd-llenar var(--gd-interval) linear forwards;
}

.gd-slider.is-paused .gd-thumb.is-active .gd-thumb__bar {
    animation-play-state: paused;
}

/* sin autoplay la barra queda llena en la activa */
.gd-slider[data-autoplay="0"] .gd-thumb.is-active .gd-thumb__bar {
    width: 100%;
    animation: none;
}

@keyframes gd-llenar {
    from { width: 0; }
    to   { width: 100%; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .gd-slider {
        --gd-lado: 6%;
        --gd-hueco: 1.4%;
    }

    .gd-slider__stage {
        aspect-ratio: 4 / 3;
    }

    .gd-slide__body {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        bottom: 5.5%;
    }

    .gd-slide__title {
        font-size: clamp(20px, 6.4vw, 40px);
    }

    .gd-slide__eyebrow {
        font-size: clamp(11px, 2.8vw, 15px);
    }

    .gd-slide__cta {
        font-size: clamp(10px, 2.6vw, 13px);
    }

    .gd-slider__thumbs {
        padding: 3% 6% 5%;
        gap: 1.4%;
    }

    .gd-thumb__track {
        height: 4px;
    }
}

@media (max-width: 560px) {
    .gd-slider__stage {
        aspect-ratio: 3 / 4;
    }
}

/* ---------- accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
    .gd-slide {
        transition: none;
    }
    .gd-thumb.is-active .gd-thumb__bar.is-running {
        animation: none;
        width: 100%;
    }
    .gd-slide__arrow {
        transition: none;
    }
}