/* ============================================================
   CCM Carousel  — .ccmg-carousel
   Scroll-snap nativo con gutters persistentes y peek intencional.
   El número de columnas se controla via --ccmg-slides (set en JS).
   ============================================================ */

/* ---- Variables + sección/container ---- */

.ccmg-carousel {
    --ccmg-slides:              4; /* JS sobreescribe según breakpoint */
    --ccmg-shell-max-width:     1520px;
    --ccmg-viewport-padding:    0px;
    --ccmg-track-padding-top:   4px;
    --ccmg-track-content-padding-bottom: 8px;
    --ccmg-scrollbar-size:      7px;
    --ccmg-scrollbar-gap:       6px;
    --ccmg-scrollbar-radius:    999px;
    --ccmg-scrollbar-track:     rgba(18,18,18,0.08);
    --ccmg-scrollbar-thumb:     rgba(18,18,18,0.22);
    --ccmg-scrollbar-thumb-hover: rgba(18,18,18,0.32);
    --ccmg-track-padding-bottom: calc(var(--ccmg-track-content-padding-bottom) + var(--ccmg-scrollbar-gap));
    --ccmg-track-edge-padding:  clamp(12px, calc(4.2857vw - 13.714px), 48px);
    --ccmg-gap:                 clamp(14px, 1.2vw, 18px);
    --ccmg-peek-desktop:        120px;
    --ccmg-peek-tablet:         84px;
    --ccmg-peek-mobile:         56px;
    --ccmg-peek:                clamp(calc(var(--ccmg-peek-desktop) * 0.7), 8vw, var(--ccmg-peek-desktop));
    --ccmg-active-peek:         0px;
    --ccmg-gap-count:           calc(var(--ccmg-slides) - 1);
    --ccmg-slide-size:          calc(
                                    (100% - var(--ccmg-active-peek) - (var(--ccmg-gap) * var(--ccmg-gap-count)))
                                    / var(--ccmg-slides)
                                );
    --ccmg-arrow-size:          40px;
    --ccmg-arrow-bg:            #ffffff;
    --ccmg-arrow-color:         #121212;
    --ccmg-arrow-border:        1px solid rgba(18,18,18,0.08);
    --ccmg-arrow-shadow:        0 8px 20px rgba(18,18,18,0.12), 0 2px 6px rgba(18,18,18,0.08);
    --ccmg-arrow-shadow-hover:  0 12px 28px rgba(18,18,18,0.16), 0 4px 10px rgba(18,18,18,0.10);
    --ccmg-nav-track-inset:     max(0px, calc(var(--ccmg-track-edge-padding) - (var(--ccmg-arrow-size) / 2)));
    --ccmg-nav-anchor-block-size: max(0px, calc(var(--ccmg-slide-size) * var(--ccmg-card-nav-anchor-height-factor)));
    --ccmg-dot-size:            8px;
    --ccmg-dot-color:           rgba(0,0,0,0.18);
    --ccmg-dot-active:          rgba(0,0,0,0.72);
    --ccmg-title-size:          clamp(20px, 1.45vw, 24px);
    --ccmg-title-weight:        500;
    --ccmg-title-color:         rgba(0,0,0,0.92);
    --ccmg-header-cta-size:     clamp(14px, 1.05vw, 16px);
    --ccmg-header-cta-gap:      6px;
    --ccmg-header-cta-color:    #e60000;
    --ccmg-font:                "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

    box-sizing:       border-box;
    display:          flex;
    flex-direction:   column;
    gap:              10px;
    width:            100%;
    max-width:        var(--ccmg-shell-max-width);
    margin-inline:    auto;
    position:         relative;
    font-family:      var(--ccmg-font);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ccmg-carousel[data-has-overflow="true"] {
    --ccmg-active-peek: var(--ccmg-peek);
    --ccmg-gap-count:   var(--ccmg-slides);
}

/*
 * Elementor puede medir el alto del widget antes de que iOS/WebKit termine
 * de resolver bien el contenido flexible del track. Mantener el wrapper sin
 * clipping evita que el widget corte tarjetas altas en mobile.
 */
.elementor-widget-ccmg_product_carousel,
.elementor-widget-ccmg_product_carousel .elementor-widget-container {
    display: block;
    height: auto !important;
    min-height: max-content;
    contain: none;
    overflow: visible;
}

.elementor-widget-ccmg_product_carousel .ccmg-carousel-host {
    display: block;
    height: auto;
    min-height: max-content;
    overflow: visible;
}

.elementor-widget-ccmg_product_carousel .ccmg-carousel,
.elementor-widget-ccmg_product_carousel .ccmg-carousel__track-wrap,
.elementor-widget-ccmg_product_carousel .ccmg-carousel__track {
    height: auto;
    min-height: max-content;
}

/* ---- Header ---- */

.ccmg-carousel__header {
    box-sizing:      border-box;
    display:         flex;
    align-items:     flex-end;
    flex-wrap:       wrap;
    gap:             12px;
    padding-inline:  var(--ccmg-track-edge-padding);
    width:           100%;
}

.ccmg-carousel__header--space-between,
.ccmg-carousel__header--inline {
    align-items: center;
}

.ccmg-carousel__header--space-between {
    justify-content: space-between;
}

.ccmg-carousel__header--inline {
    justify-content: flex-start;
}

.ccmg-carousel__title {
    all:         unset;
    display:     block;
    font-family: var(--ccmg-font);
    font-size:   var(--ccmg-title-size);
    font-weight: var(--ccmg-title-weight);
    color:       var(--ccmg-title-color);
    line-height: 1.2;
}

.ccmg-carousel__header--space-between .ccmg-carousel__title {
    flex:      1 1 auto;
    min-width: 0;
}

.ccmg-carousel__header-cta {
    display:                 inline-flex;
    align-items:             center;
    gap:                     var(--ccmg-header-cta-gap);
    padding-block:           4px;
    color:                   var(--ccmg-header-cta-color);
    font-family:             var(--ccmg-font);
    font-size:               var(--ccmg-header-cta-size);
    font-weight:             500;
    line-height:             1;
    text-decoration:         underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset:   0.08em;
    white-space:             nowrap;
    transition:              color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.ccmg-carousel__header-cta:hover {
    color: #b90000;
}

.ccmg-carousel__header-cta:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 2px;
    border-radius:  2px;
}

.ccmg-carousel__header-cta-label {
    display:    block;
    line-height: 1;
}

.ccmg-carousel__header-cta-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           6px;
    height:          12px;
    flex-shrink:     0;
    transition:      transform 0.18s ease;
}

.ccmg-carousel__header-cta-icon svg {
    display: block;
    width:   100%;
    height:  100%;
}

.ccmg-carousel__header-cta:hover .ccmg-carousel__header-cta-icon,
.ccmg-carousel__header-cta:focus-visible .ccmg-carousel__header-cta-icon {
    transform: translateX(1px);
}

/* ---- Viewport + nav ---- */

.ccmg-carousel__controls {
    position:         absolute;
    inset-inline:     var(--ccmg-nav-track-inset);
    top:              var(--ccmg-track-padding-top);
    height:           var(--ccmg-nav-anchor-block-size);
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    pointer-events:   none;
    z-index:          2;
}

.ccmg-carousel__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--ccmg-arrow-size);
    height:          var(--ccmg-arrow-size);
    border:          var(--ccmg-arrow-border);
    border-radius:   50%;
    background:      var(--ccmg-arrow-bg);
    box-shadow:      var(--ccmg-arrow-shadow);
    color:           var(--ccmg-arrow-color);
    pointer-events:  auto;
    cursor:          pointer;
    transition:      transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.ccmg-carousel__btn--prev {
    margin-inline-start: 0;
}

.ccmg-carousel__btn--next {
    margin-inline-end: 0;
}

.ccmg-carousel__btn:hover:not([disabled]) {
    background: var(--ccmg-arrow-bg);
    box-shadow: var(--ccmg-arrow-shadow-hover);
    transform:  translateY(-1px);
}

.ccmg-carousel__btn:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 2px;
}

.ccmg-carousel__btn[disabled],
.ccmg-carousel__btn[aria-disabled="true"] {
    opacity: 0.3;
    cursor:  default;
    pointer-events: none;
}

.ccmg-carousel[data-has-overflow="false"] .ccmg-carousel__controls {
    display: none;
}

.ccmg-carousel[data-has-overflow="false"] .ccmg-carousel__dots {
    display: none;
}

/* ---- Track wrapper ---- */

.ccmg-carousel__track-wrap {
    position:         relative;
    width:            100%;
    min-height:       var(--ccmg-track-height, auto);
    padding-inline:   var(--ccmg-viewport-padding);
    isolation:        isolate;
    /* overflow-x:clip recorta el lateral sin crear scroll container,
       y sin coaccionar overflow-y — evita que el body de las tarjetas
       quede cortado verticalmente en mobile.                          */
    overflow-x:       clip;
    overflow-y:       visible;
}

/* ---- Track (scroll container) ---- */

/*
 * Usamos flexbox en lugar de grid con grid-auto-flow:column porque
 * grid-auto-columns con % no se resuelve correctamente dentro de un
 * contenedor con overflow-x:scroll (dependencia circular de tamaño).
 * Con flex, flex-basis:% se resuelve contra el ancho del flex container,
 * que está correctamente limitado por el padre.
 */
.ccmg-carousel__track {
    display:               flex;
    flex-wrap:             nowrap;
    align-items:           flex-start;
    gap:                   var(--ccmg-gap);
    list-style:            none;
    margin:                0;
    width:                 100%;
    padding:               var(--ccmg-track-padding-top) var(--ccmg-track-edge-padding) var(--ccmg-track-padding-bottom); /* gutters internos reales + aire para sombras */
    min-height:            var(--ccmg-track-height, auto);
    overflow-x:            auto;
    overflow-y:            visible;
    scroll-snap-type:      x mandatory;
    scroll-padding-inline: var(--ccmg-track-edge-padding);
    scroll-behavior:       smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter:      stable;
    scrollbar-width:       thin;
    scrollbar-color:       var(--ccmg-scrollbar-thumb) var(--ccmg-scrollbar-track);
}

.ccmg-carousel__track::-webkit-scrollbar {
    height: var(--ccmg-scrollbar-size);
}

.ccmg-carousel__track::-webkit-scrollbar-track {
    background:    var(--ccmg-scrollbar-track);
    border-radius: var(--ccmg-scrollbar-radius);
}

.ccmg-carousel__track::-webkit-scrollbar-thumb {
    background:       var(--ccmg-scrollbar-thumb);
    border:           1px solid transparent;
    border-radius:    var(--ccmg-scrollbar-radius);
    background-clip:  padding-box;
}

.ccmg-carousel__track::-webkit-scrollbar-thumb:hover {
    background: var(--ccmg-scrollbar-thumb-hover);
}

.ccmg-carousel__track::-webkit-scrollbar-thumb:active {
    background: rgba(18,18,18,0.38);
}

.ccmg-carousel__track::-webkit-scrollbar-corner {
    background: transparent;
}

/* ---- Slide ---- */

.ccmg-carousel__slide {
    display:           block;
    flex:              0 0 var(--ccmg-slide-size);
    height:            auto;
    min-width:         0;
    scroll-snap-align: start;
    scroll-snap-stop:  always;
}

/* ---- Dots ---- */

.ccmg-carousel__dots {
    display:         flex;
    justify-content: center;
    gap:             6px;
    flex-wrap:       wrap;
    min-height:      var(--ccmg-dot-size);
}

.ccmg-carousel__dot {
    display:          block;
    width:            var(--ccmg-dot-size);
    height:           var(--ccmg-dot-size);
    border:           none;
    border-radius:    50%;
    padding:          0;
    background:       var(--ccmg-dot-color);
    cursor:           pointer;
    transition:       background 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.ccmg-carousel__dot:hover {
    background: var(--ccmg-dot-active);
    transform:  scale(1.25);
}

.ccmg-carousel__dot.is-active {
    background: var(--ccmg-dot-active);
    transform:  scale(1.3);
}

.ccmg-carousel__dot:focus-visible {
    outline:        2px solid var(--ccmg-dot-active);
    outline-offset: 2px;
}

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

@media (max-width: 1023px) {
    .ccmg-carousel {
        --ccmg-viewport-padding: 0px;
        --ccmg-gap:              14px;
        --ccmg-peek:             clamp(calc(var(--ccmg-peek-tablet) * 0.6429), 10vw, var(--ccmg-peek-tablet));
        --ccmg-arrow-size:       38px;
        --ccmg-header-cta-size:  15px;
        --ccmg-title-size:       18px;
    }
}

@media (max-width: 599px) {
    .ccmg-carousel {
        --ccmg-viewport-padding: 0px;
        --ccmg-gap:              8px;
        --ccmg-peek:             clamp(calc(var(--ccmg-peek-mobile) * 0.6786), 16vw, var(--ccmg-peek-mobile));
        --ccmg-arrow-size:       36px;
        --ccmg-header-cta-size:  14px;
        --ccmg-title-size:       16px;
        --ccmg-scrollbar-size:   5px;
        --ccmg-scrollbar-gap:    4px;
        gap:                     10px;
    }

    .ccmg-carousel__track {
        scroll-snap-type: x proximity;
    }

    .ccmg-carousel__slide {
        scroll-snap-stop: normal;
    }

    .ccmg-carousel__controls {
        display: none;
    }

    .ccmg-carousel__dots {
        gap: 8px;
    }
}

/* ---- Skeleton loading — solo recently_viewed con fallback activo ---- */

@keyframes ccmg-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Durante la carga: bloquear interacción, ocultar flechas/dots (fallback ya no es válido) */
.ccmg-carousel.is-loading-history {
    pointer-events: none;
}

.ccmg-carousel.is-loading-history .ccmg-carousel__btn,
.ccmg-carousel.is-loading-history .ccmg-carousel__dots {
    visibility: hidden;
}

/* Tarjeta skeleton: misma estructura visual que .ccmg-card */
.ccmg-card-skeleton {
    --ccmg-sk-base:   #ebebeb;
    --ccmg-sk-shine:  #f7f7f7;

    display:          flex;
    flex-direction:   column;
    width:            100%;
    border-radius:    var(--ccmg-card-radius, 8px);
    overflow:         hidden;
    border:           1px solid rgba(0,0,0,0.06);
}

/* Zona imagen: reutiliza el mismo contrato de layout de la card real */
.ccmg-card-skeleton__img {
    width:            100%;
    aspect-ratio:     var(--ccmg-card-nav-anchor-aspect-ratio);
    background:       linear-gradient(
                          90deg,
                          var(--ccmg-sk-base)  0%,
                          var(--ccmg-sk-shine) 50%,
                          var(--ccmg-sk-base)  100%
                      );
    background-size:  200% 100%;
    animation:        ccmg-shimmer 1.4s ease-in-out infinite;
}

/* Cuerpo skeleton */
.ccmg-card-skeleton__body {
    display:          flex;
    flex-direction:   column;
    gap:              8px;
    padding:          12px;
    background:       var(--ccmg-sk-base);
}

/* Líneas de texto placeholder */
.ccmg-card-skeleton__line {
    border-radius:    4px;
    height:           13px;
    background:       linear-gradient(
                          90deg,
                          var(--ccmg-sk-base)  0%,
                          var(--ccmg-sk-shine) 50%,
                          var(--ccmg-sk-base)  100%
                      );
    background-size:  200% 100%;
    animation:        ccmg-shimmer 1.4s ease-in-out infinite;
}

.ccmg-card-skeleton__line--title {
    width:            82%;
}

.ccmg-card-skeleton__line--subtitle {
    width:            55%;
    animation-delay:  0.15s;
}

/* ---- Accesibilidad: prefiere movimiento reducido ---- */

@media (prefers-reduced-motion: reduce) {
    .ccmg-carousel__track {
        scroll-behavior:  auto;
        scroll-snap-type: none;
    }

    .ccmg-carousel__btn,
    .ccmg-carousel__dot {
        transition: none;
    }

    /* Sin shimmer: placeholder estático */
    .ccmg-card-skeleton__img,
    .ccmg-card-skeleton__line {
        animation: none;
    }
}