/* Navegación externa del slider — medidas de navegacion.png (326x88)
   ------------------------------------------------------------------
   contador   "01 / 10", blanco, ~30px, alineado a la izquierda
   prev       88x88, fondo transparente, borde 1px rgba(255,255,255,.18)
   next       88x88, fondo blanco, chevron #0d0d0d
   hueco      32px entre botones
*/

.gd-slider-nav {
    --gd-nav-lado: 88px;
    --gd-nav-hueco: 32px;
    --gd-amarillo: #E2BA61;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gd-nav-hueco);
    font-family: "Barlow", Sans-serif;
}

.gd-slider-nav__counter {
    color: #fff;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gd-slider-nav__botones {
    display: flex;
    gap: var(--gd-nav-hueco);
}

.gd-slider-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gd-nav-lado);
    height: var(--gd-nav-lado);
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.gd-slider-nav__btn svg {
    width: 30%;
    height: 30%;
    display: block;
}

.gd-slider-nav__btn--prev {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
}

.gd-slider-nav__btn--prev:hover,
.gd-slider-nav__btn--prev:focus-visible {
    border-color: rgba(255, 255, 255, .55);
}

.gd-slider-nav__btn--next {
    background: #fff;
    color: #0d0d0d;
}

.gd-slider-nav__btn--next:hover,
.gd-slider-nav__btn--next:focus-visible {
    background: var(--gd-amarillo);
}

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

@media (max-width: 900px) {
    .gd-slider-nav {
        --gd-nav-lado: 56px;
        --gd-nav-hueco: 16px;
    }

    .gd-slider-nav__counter {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gd-slider-nav__btn {
        transition: none;
    }
}