/* ==========================================================================
   Navegación del carrusel de productos  (.carrucel-home)
   Loop Carousel de Elementor. Se ocultan sus flechas y bullets y se sustituyen
   por la barra de progreso + los dos botones del diseño.

   Medidas del SVG (canvas 1366):
     barra    x 200 -> 1176   (976 x 5, radio 2.5)   pista #D9D9D9
     pulgar   3px de alto, radio 1.5, #9F9F9F, 1px de margen interior
     botones  39x39 con borde de 1px -> 40x40, radio 10, borde #EBEDF0
     hueco entre botones 11px | entre barra y botones 20px
     la fila arranca en el borde izquierdo de las tarjetas y termina en el
     borde derecho del contenedor del sitio (de ahí el margen derecho que
     calcula el JS).
   ========================================================================== */

/* Controles propios de Elementor */
.carrucel-home .elementor-swiper-button,
.carrucel-home .swiper-pagination {
    display: none !important;
}

.gd-cnav {
    --gd-cnav-naranja: #EE8105;

    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    box-sizing: border-box;
}

.gd-cnav *,
.gd-cnav *::before,
.gd-cnav *::after {
    box-sizing: border-box;
}

/* --- Barra de progreso --------------------------------------------------- */

.gd-cnav .gd-cnav__barra {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 5px;
    border-radius: 2.5px;
    background: #D9D9D9 !important;
}

.gd-cnav .gd-cnav__pulgar {
    position: absolute;
    top: 1px;
    left: 1px;
    height: 3px;
    width: 30%;
    border-radius: 1.5px;
    background: #9F9F9F !important;
    /* Sólo se anima transform: el ancho lo fija el JS según el número de
       productos y transicionarlo deja el valor a medias si el carrusel aún
       no se ha pintado. */
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

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

.gd-cnav .gd-cnav__botones {
    display: flex;
    flex: 0 0 auto;
    gap: 11px;
}

.gd-cnav .gd-cnav__btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 1px solid #EBEDF0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #191919 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease;
}

.gd-cnav .gd-cnav__btn:hover,
.gd-cnav .gd-cnav__btn:focus-visible {
    border-color: var(--gd-cnav-naranja) !important;
    color: var(--gd-cnav-naranja) !important;
}

.gd-cnav .gd-cnav__btn[disabled] {
    opacity: .4;
    cursor: default;
}

.gd-cnav .gd-cnav__btn--ant .gd-chevron {
    transform: rotate(180deg);
}

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

@media (max-width: 1023px) {
    .gd-cnav {
        margin-top: 32px;
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .gd-cnav {
        margin-top: 24px;
        gap: 14px;
    }

    .gd-cnav .gd-cnav__btn {
        width: 34px !important;
        height: 34px !important;
    }
}

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