/* ccmg-hojas-juntas: ccmg-nav-slider.css */
/**
 * ccmg-nav-slider.css
 *
 * Comportamiento visual:
 *   - Scroll horizontal con CSS scroll-snap nativo.
 *   - Mobile:  6.5 items visibles. Desktop: 10.5 items visibles.
 *   - Gap default: 6px mobile / 24px desktop (sobreescribible via Elementor).
 *   - Botones prev/next: visibles en hover, solo hacia donde hay contenido.
 */

/* =========================================================
   CONTENEDOR
   ========================================================= */

.ccmg-nav-slider {
	--ccmg-ns-gap: 6px;
	--ccmg-ns-end-space: 44px;
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* =========================================================
   TRACK
   ========================================================= */

.ccmg-nav-slider__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--ccmg-ns-gap);
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-end: var(--ccmg-ns-end-space);
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	touch-action: pan-x pinch-zoom;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ccmg-nav-slider__track::after {
	content: '';
	flex: 0 0 var(--ccmg-ns-end-space);
}

.ccmg-nav-slider__track::-webkit-scrollbar {
	display: none;
}

/* =========================================================
   ITEM
   ========================================================= */

.ccmg-nav-slider__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: calc((100% - 6 * var(--ccmg-ns-gap)) / 6.5);
	min-height: 72px;
	padding: 4px 2px 6px;
	box-sizing: border-box;
	border-radius: 10px;
	-webkit-tap-highlight-color: rgba(18, 18, 18, 0.08);
}

/* =========================================================
   IMAGEN
   ========================================================= */

.ccmg-nav-slider__img {
	width: 40px;
	height: 40px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background: #fff;
	border-radius: 8px;
	display: block;
	flex-shrink: 0;
	transition: transform 0.22s ease, opacity 0.22s ease;
}

/* =========================================================
   LABEL
   ========================================================= */

.ccmg-nav-slider__label {
	width: 100%;
	max-width: 100%;
	font-family: 'Founder Grotesk CCM', sans-serif;
	font-size: 8px;
	line-height: 9px;
	font-weight: 500;
	text-align: center;
	color: inherit;
	transition: color 0.2s ease;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
	overflow: hidden;
}

/* =========================================================
   BOTONES NAV (prev / next)
   ========================================================= */

.ccmg-ns-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid rgba(18, 18, 18, 0.1);
	box-shadow: 0 4px 12px rgba(18, 18, 18, 0.12), 0 1px 4px rgba(18, 18, 18, 0.08);
	color: #121212;
	cursor: pointer;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ccmg-ns-btn--prev { left: 6px; }
.ccmg-ns-btn--next { right: 6px; }

/* Aparece en hover del contenedor solo si JS añade .is-visible */
.ccmg-nav-slider:hover .ccmg-ns-btn.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.ccmg-ns-btn.is-visible:hover {
	box-shadow: 0 8px 20px rgba(18, 18, 18, 0.18), 0 3px 8px rgba(18, 18, 18, 0.1);
	transform: translateY(calc(-50% - 1px));
}

/* =========================================================
   RESPONSIVE — Desktop
   ========================================================= */

@media (min-width: 768px) {
	.ccmg-nav-slider {
		--ccmg-ns-gap: 24px;
		--ccmg-ns-end-space: 64px;
	}

	.ccmg-nav-slider__item {
		width: calc((100% - 10 * var(--ccmg-ns-gap)) / 10.5);
	}

	.ccmg-nav-slider__img {
		width: 90px;
		height: 90px;
	}

	.ccmg-nav-slider__label {
		font-size: 11px;
		line-height: 12px;
		text-transform: uppercase;
	}

	.ccmg-ns-btn {
		width: 36px;
		height: 36px;
	}

	.ccmg-ns-btn--prev { left: 10px; }
	.ccmg-ns-btn--next { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.ccmg-nav-slider__track {
		scroll-behavior: auto;
	}

	.ccmg-nav-slider__img,
	.ccmg-nav-slider__label,
	.ccmg-ns-btn {
		transition: none;
	}
}

/* =========================================================
   ESTADOS
   ========================================================= */

.ccmg-nav-slider__item:focus-visible .ccmg-nav-slider__img {
	transform: scale(1.08);
	opacity: 0.9;
}

.ccmg-nav-slider__item:focus-visible .ccmg-nav-slider__label {
	color: #555;
}

@media (hover: hover) and (pointer: fine) {
	.ccmg-nav-slider__item:hover .ccmg-nav-slider__img {
		transform: scale(1.08);
		opacity: 0.9;
	}

	.ccmg-nav-slider__item:hover .ccmg-nav-slider__label {
		color: #555;
	}
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

.ccmg-nav-slider__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 8px;
}

.ccmg-ns-btn:focus-visible {
	outline: 2px solid #121212;
	outline-offset: 2px;
	opacity: 1;
	pointer-events: auto;
}
/* ccmg-hojas-juntas: ccmg-product-card.css */
/* ============================================================
   CCM Product Card  — .ccmg-card
   Diseño: CCM web design 2026 · Figma node 669-5286
   ============================================================ */

/* ---- Variables ---- */

.ccmg-card {
    --ccmg-card-radius:       24px;
    --ccmg-card-img-radius:   16px;
    --ccmg-card-bg:           #ffffff;
    --ccmg-card-accent:       #e60000;
    --ccmg-card-accent-hot:   #ff3b00;     /* badge "MÁS VENDIDOS" */
    --ccmg-card-installments: #00a650;     /* renglón de cuotas (verde ML) */
    --ccmg-card-disc-bg:      var(--ccmg-card-accent);   /* badge % OFF (rojo CCM) */
    --ccmg-card-sold-out-bg:  #191919;
    --ccmg-card-border:       rgba(25, 24, 24, 0.3);
    --ccmg-card-border-w:     1.5px;
    --ccmg-card-font:         "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* ATC flotante */
    --ccmg-card-atc-bg:       rgba(25, 24, 24, 0.9);
    --ccmg-card-atc-size:     32px;
    --ccmg-card-atc-icon-size: 13px;
    --ccmg-card-atc-expand-max-width: 220px;
    --ccmg-card-atc-expand-gap: 8px;
    --ccmg-card-atc-expand-padding: 8px 12px 8px 8px;
    --ccmg-card-atc-label-size: 14px;
    --ccmg-card-atc-label-line-height: 14px;
    --ccmg-card-atc-label-max-width: 200px;
    --ccmg-card-atc-pulse-shrink: 0.88;
    --ccmg-card-atc-pulse-grow: 1.08;

    /* Colores de texto */
    --ccmg-card-title-color:  #000000;
    --ccmg-card-price-color:  #191919;
    --ccmg-card-del-color:    #707070;
    --ccmg-card-ship-bg:      rgb(225, 241, 227);
    --ccmg-card-ship-color:   rgb(0, 148, 19);

    display:          flex;
    flex-direction:   column;
    gap:              16px;
    background:       var(--ccmg-card-bg);
    font-family:      var(--ccmg-card-font);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Container queries: responde al ancho de la propia tarjeta */
    container-type:   inline-size;
    container-name:   card;
}

/* ============================================================
   Zona de imagen (.ccmg-card__media)
   Contiene: imagen, badge de categoría, botón ATC flotante
   ============================================================ */

.ccmg-card__media {
    position:      relative;
    border-radius: var(--ccmg-card-radius);
    overflow:      hidden;
    aspect-ratio:  var(--ccmg-card-nav-anchor-aspect-ratio);
    background:    #ffffff;
}

/* ---- Link de imagen (aria-hidden, no tab) ---- */

.ccmg-card__img-link {
    display:         block;
    width:           100%;
    height:          100%;
    text-decoration: none;
    outline:         none;
    -webkit-tap-highlight-color: transparent;
}

/* ---- Wrapper interno con padding 10px (Figma) ---- */
/* El radio 16px aplica al inner frame del diseño         */

.ccmg-card__image-wrap {
    position:      relative;
    width:         100%;
    height:        100%;
    padding:       10px;
    box-sizing:    border-box;
    overflow:      hidden;
    border-radius: var(--ccmg-card-img-radius);
}

/*
 * Geometría de las dos imágenes: !important acotado a width/height/object-fit.
 *
 * Por qué. La tarjeta se pinta dentro de `ul.products li.product` en tres de
 * sus cuatro contextos (categoría de WooCommerce, rejilla propia y la lista de
 * favoritos), y allí llega `woocommerce.css` con
 *
 *     .woocommerce ul.products li.product a img { width: 100%; height: auto }
 *
 * cuya especificidad está muy por encima de la de estas dos reglas (0,1,0). Sin
 * refuerzo gana WooCommerce: el `calc(100% - 20px)` del hover no se aplica, la
 * segunda imagen se pinta con el ancho del padding box (218,3 px frente a los
 * 198,3 de la principal, medido en producción) y con la altura automática, así
 * que se sale del recuadro.
 *
 * Por qué !important y no más especificidad. Para ganar habría que anclar cada
 * regla a la cadena de ancestros de CADA contexto (carrusel, .ccmg-product-grid,
 * ul.products y ul.products.ccma-favoritos), repetirlas cuatro veces y volver a
 * perder ante cualquier regla del tema con un id. Es el mismo motivo por el que
 * `.ccmg-card__atc` ya usa !important contra los estilos .button de
 * WooCommerce (ver la nota en esa regla, más abajo). Se acota a las TRES
 * propiedades de la caja: opacidad, transición, radio y color siguen siendo
 * sobreescribibles con normalidad.
 */

.ccmg-card__img {
    display:       block;
    /* 100% del área de contenido del envoltorio (está en el flujo, tras el padding) */
    width:         100% !important;
    height:        100% !important;
    object-fit:    contain !important;    /* Figma: scaleMode = FIT */
    border-radius: var(--ccmg-card-img-radius);
    transition:    opacity 0.3s ease;
}

.ccmg-card__img--placeholder {
    opacity: 0.35;
}

/* ---- Imagen hover (segunda imagen de galería) ---- */

/*
 * Misma caja EXACTA que la principal. Al ser absoluta, sus porcentajes se
 * resuelven contra el padding box del envoltorio, así que hay que despegarla
 * los 10px del padding por los cuatro lados y descontarlos dos veces del ancho
 * y del alto. Si cambia el padding de .ccmg-card__image-wrap, estos tres
 * valores cambian con él (el verificador de tests/css lo comprueba).
 * El !important, por lo mismo que arriba.
 */

.ccmg-card__img--hover {
    position:      absolute;
    inset:         10px;          /* respeta el padding del wrapper */
    width:         calc(100% - 20px) !important;
    height:        calc(100% - 20px) !important;
    object-fit:    contain !important;
    border-radius: var(--ccmg-card-img-radius);
    opacity:       0;
    transition:    opacity 0.35s ease;
}

/* ---- Overlay permanente (Figma: Background + Overlay layers) ---- */

.ccmg-card__overlay {
    position:       absolute;
    inset:          0;
    background:     rgba(0, 0, 0, 0.04);
    pointer-events: none;
    z-index:        1;
}

/* ---- Badge de categoría en imagen ---- */
/* Badge default: top=9px left=6px · pill bg=#191919 · 12px/500/white lh=18 */

.ccmg-card__cat-badge {
    position:        absolute;
    top:             9px;
    left:            6px;
    z-index:         2;
    display:         inline-flex;
    align-items:     center;
    padding:         3px 12px 0;
    border-radius:   100px;
    background:      var(--ccmg-card-sold-out-bg);
    color:           #ffffff;
    font-family:     var(--ccmg-card-font);
    font-size:       12px;
    font-weight:     500;
    line-height:     18px;
    white-space:     nowrap;
    pointer-events:  none;
    text-transform:  uppercase;
    letter-spacing:  0.02em;
}

.ccmg-card__cat-badge--sold-out {
    background: var(--ccmg-card-accent-hot);
}

/* ============================================================
   Botón ATC flotante
   Figma: bottom=12px right=10px · 32×32 circle · bg=rgba(25,24,24,0.9)
   Hover: expande a pill mostrando "Añadir al carrito" (14px/500)
   ============================================================ */

.ccmg-card__atc {
    all:             unset;
    position:        absolute !important;  /* WooCommerce .button aplica position:relative */
    bottom:          12px;
    right:           10px;
    z-index:         3;

    display:         inline-flex !important;
    align-items:     center;
    justify-content: center;
    gap:             0;

    height:          var(--ccmg-card-atc-size) !important;
    min-width:       var(--ccmg-card-atc-size) !important;  /* fuerza ancho = alto → círculo */
    max-width:       var(--ccmg-card-atc-size);
    padding:         8px !important;

    /* !important para ganar a los estilos .button de WooCommerce/tema */
    border-radius:   100px !important;
    background:      var(--ccmg-card-atc-bg) !important;
    color:           #ffffff !important;
    cursor:          pointer !important;

    overflow:        hidden !important;  /* WooCommerce .button fuerza overflow:visible */
    white-space:     nowrap;
    box-sizing:      border-box !important;
    line-height:     1;
    text-decoration: none;

    transition:
        max-width  0.38s cubic-bezier(0.4, 0, 0.2, 1),
        gap        0.38s cubic-bezier(0.4, 0, 0.2, 1),
        padding    0.38s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.15s ease;

    -webkit-tap-highlight-color: transparent;
}

/*
 * Expansión hover solo en dispositivos con puntero fino (ratón/trackpad).
 * En touch, :hover queda "pegado" al primer tap y provoca el estado
 * expandido de forma permanente hasta el siguiente tap.
 * (hover:hover) + (pointer:fine) = ratón real, nunca pantalla táctil.
 */
@media (hover: hover) and (pointer: fine) {
    /*
     * El intercambio solo cuando la segunda imagen ESTÁ descargada.
     *
     * La imagen de hover es `loading="lazy"`: hasta que el navegador la trae no
     * hay nada que enseñar, y desvanecer la principal en ese momento deja ver
     * el fondo blanco del envoltorio (el «hover vacío» del reporte). La clase
     * `--hover-listo` la pone ccmg-card-atc.js cuando la imagen ya está
     * `complete` con píxeles. Sin JS, o con el JS caído, la clase no aparece
     * nunca: no hay efecto de hover, pero tampoco hueco en blanco.
     */
    .ccmg-card__image-wrap--has-hover.ccmg-card__image-wrap--hover-listo:hover .ccmg-card__img--primary {
        opacity: 0;
    }

    .ccmg-card__image-wrap--has-hover.ccmg-card__image-wrap--hover-listo:hover .ccmg-card__img--hover {
        opacity: 1;
    }

    /* Card hover → expande el botón */
    .ccmg-card:hover .ccmg-card__atc:not([disabled]):not([aria-disabled="true"]) {
        max-width: var(--ccmg-card-atc-expand-max-width);
        gap:       var(--ccmg-card-atc-expand-gap);
        padding:   var(--ccmg-card-atc-expand-padding);
    }

    /* Hover directo sobre el botón */
    .ccmg-card__atc:hover:not([disabled]) {
        background: rgba(25, 24, 24, 1);
    }
}

.ccmg-card__atc:focus-visible {
    outline:        2px solid #ffffff;
    outline-offset: 2px;
}

.ccmg-card__atc[disabled],
.ccmg-card__atc[aria-disabled="true"] {
    opacity: 0.45;
    cursor:  not-allowed;
}

/* Estados gestionados por WooCommerce + estado local explícito */
.ccmg-card__atc.loading:not([disabled]),
.ccmg-card__atc.added:not([disabled]),
.ccmg-card__atc[data-ccmg-atc-state="pending"]:not([disabled]),
.ccmg-card__atc[data-ccmg-atc-state="success"]:not([disabled]),
.ccmg-card__atc[data-ccmg-atc-state="error"]:not([disabled]) {
    max-width: var(--ccmg-card-atc-expand-max-width);
    gap:       var(--ccmg-card-atc-expand-gap);
    padding:   var(--ccmg-card-atc-expand-padding);
}

.ccmg-card__atc.loading .ccmg-card__atc-label,
.ccmg-card__atc.added .ccmg-card__atc-label,
.ccmg-card__atc[data-ccmg-atc-state="pending"] .ccmg-card__atc-label,
.ccmg-card__atc[data-ccmg-atc-state="success"] .ccmg-card__atc-label,
.ccmg-card__atc[data-ccmg-atc-state="error"] .ccmg-card__atc-label {
    max-width: var(--ccmg-card-atc-label-max-width);
    opacity:   1;
}

.ccmg-card__atc[data-ccmg-atc-state="pending"] {
    background: rgba(25, 24, 24, 1) !important;
    opacity:    1;
    cursor:     progress !important;
}

.ccmg-card__atc[data-ccmg-atc-state="pending"][aria-disabled="true"],
.ccmg-card__atc[data-ccmg-atc-state="success"][aria-disabled="true"] {
    opacity: 1;
}

.ccmg-card__atc[data-ccmg-atc-state="success"] {
    animation:  ccmg-atc-pulse 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    background: rgba(25, 24, 24, 1) !important;
}

.ccmg-card__atc[data-ccmg-atc-state="error"] {
    background: rgba(164, 24, 24, 0.96) !important;
    opacity:    1;
}

/* Ícono del carrito */
.ccmg-card__atc-icon {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--ccmg-card-atc-icon-size);
    height:          var(--ccmg-card-atc-icon-size);
    flex-shrink:     0;
}

.ccmg-card__atc-icon svg {
    display: block;
    width:   var(--ccmg-card-atc-icon-size);
    height:  var(--ccmg-card-atc-icon-size);
}

/* Íconos intercambiables: carrito ↔ check */
.ccmg-card__atc-icon-cart,
.ccmg-card__atc-icon-check {
    position:   absolute;
    inset:      0;
    display:    flex;
    align-items:     center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.ccmg-card__atc-icon-check { opacity: 0; }

/* Pending / error mantienen el carrito visible */
.ccmg-card__atc[data-ccmg-atc-state="pending"] .ccmg-card__atc-icon-cart,
.ccmg-card__atc[data-ccmg-atc-state="error"] .ccmg-card__atc-icon-cart {
    opacity: 1;
}

.ccmg-card__atc[data-ccmg-atc-state="pending"] .ccmg-card__atc-icon-check,
.ccmg-card__atc[data-ccmg-atc-state="error"] .ccmg-card__atc-icon-check {
    opacity: 0;
}

/* Estado added (WooCommerce confirma) */
.ccmg-card__atc[data-ccmg-atc-state="success"] .ccmg-card__atc-icon-cart,
.ccmg-card__atc.added .ccmg-card__atc-icon-cart { opacity: 0; }

.ccmg-card__atc[data-ccmg-atc-state="success"] .ccmg-card__atc-icon-check,
.ccmg-card__atc.added .ccmg-card__atc-icon-check { opacity: 1; }

/* ============================================================
   Animación de éxito
   Se activa cuando WooCommerce confirma el add-to-cart.
   ============================================================ */

@keyframes ccmg-atc-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(var(--ccmg-card-atc-pulse-shrink)); }
    65%  { transform: scale(var(--ccmg-card-atc-pulse-grow)); }
    100% { transform: scale(1); }
}

.ccmg-card__media > .added_to_cart,
.ccmg-card__media > .added_to_cart.wc-forward {
    display: none !important;
}

/* Texto del botón */
.ccmg-card__atc-label {
    font-family:  var(--ccmg-card-font);
    font-size:    var(--ccmg-card-atc-label-size);
    font-weight:  500;
    line-height:  var(--ccmg-card-atc-label-line-height);
    color:        #ffffff;
    white-space:  nowrap;
    overflow:     hidden;
    max-width:    0;
    opacity:      0;
    transition:
        max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        opacity   0.2s  ease 0.1s;
}

@media (hover: hover) and (pointer: fine) {
    .ccmg-card:hover .ccmg-card__atc:not([disabled]) .ccmg-card__atc-label {
        max-width: var(--ccmg-card-atc-label-max-width);
        opacity:   1;
    }
}

/* Variante producto variable (enlace) */
.ccmg-card__atc--variable {
    background: rgba(25, 24, 24, 0.9);
    text-decoration: none;
}

/* ============================================================
   Cuerpo (.ccmg-card__body-link + .ccmg-card__body)
   ============================================================ */

.ccmg-card__body-link {
    display:         block;
    min-width:       0;        /* evita overflow horizontal en flex */
    text-decoration: none;
    color:           inherit;
    outline:         none;
    -webkit-tap-highlight-color: transparent;
}

.ccmg-card__body-link:focus-visible .ccmg-card__body {
    outline:        2px solid var(--ccmg-card-accent);
    outline-offset: 4px;
    border-radius:  4px;
}

.ccmg-card__body {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding:        0 6px;
    min-width:      0;         /* evita que el contenido desborde el slide */
    overflow:       hidden;    /* recorta badges/precios que excedan el ancho */
}

/* ---- Bloque info: título + precio + envío ---- */

.ccmg-card__info {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

/* ---- Título ---- */
/* Figma: 14px / 500 / lh=14 / #000 */

.ccmg-card__title {
    all:                unset;
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow:           hidden;
    font-family:        var(--ccmg-card-font);
    font-size:          14px;
    font-weight:        500;
    color:              var(--ccmg-card-title-color);
    line-height:        14px;
    max-height:         28px;
}

/* ---- Precio ---- */
/* Figma: current=18px/500/lh=18/#191919 | del=14px/400/lh=12/#707070 */
/* Orden: precio tachado arriba, luego (precio actual + badge % OFF)     */

.ccmg-card__price {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            0;
    padding-top:    4px;
}

.ccmg-card__price-row {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}

.ccmg-card__price-current {
    all:         unset;
    font-family: var(--ccmg-card-font);
    font-size:   18px;
    font-weight: 500;
    line-height: 18px;
    color:       var(--ccmg-card-price-color);
}

.ccmg-card__price-regular {
    all:                   unset;
    font-family:           var(--ccmg-card-font);
    font-size:             14px;
    font-weight:           400;
    line-height:           12px;
    color:                 var(--ccmg-card-del-color);
    text-decoration:       line-through;
    text-decoration-thickness: 1px;
}

/* ---- Badge % OFF (Mercado Libre: pill verde relleno) ---- */

/*
 * El texto se veía pegado arriba del recuadro (29-sep). No era un margen: en
 * Founder Grotesk las mayúsculas llenan todo el ascendente (63 % del cuerpo) y
 * debajo queda un 37 % de descendente que «25% OFF» no usa. `text-box` recorta
 * la caja a las mayúsculas y así el relleno, igual arriba y abajo, las centra.
 *
 * `inline-block` y no `inline-flex`: `text-box` solo se aplica a contenedores
 * de bloque, y en una caja flex se ignora sin avisar.
 *
 * El margen inferior sube la etiqueta hasta el centro de las mayúsculas del
 * precio, que queda 0,37 × el cuerpo del precio por encima del centro de su
 * caja. En `em` de la etiqueta acierta en todos los tamaños de la tarjeta
 * (precio/etiqueta ≈ 1,4–1,6); con los 9 px de antes, en móvil la etiqueta
 * quedaba por encima del precio.
 *
 * Lo vigila tests/css/disc-label-css.test.js.
 */
.ccmg-card__disc-label {
    display:       inline-block;
    align-self:    center;
    background:    var(--ccmg-card-disc-bg);
    color:         #ffffff;
    font-family:   var(--ccmg-card-font);
    font-size:     11px;
    font-weight:   500;
    line-height:   1;
    text-box:      trim-both cap alphabetic;
    padding:       3px 4px;
    margin:        0 0 .55em 0;
    border-radius: 3px;
    white-space:   nowrap;
}

/* Sin `text-box` (Safari anterior a 18.2): se rellena arriba el mismo 37 % que
   la fuente deja abajo. Con un borde transparente y no con `padding`, para no
   pelear con los rellenos de los tamaños de más abajo; el fondo rojo se pinta
   también bajo el borde. */
@supports not (text-box: trim-both cap alphabetic) {
    .ccmg-card__disc-label {
        border-top: .37em solid transparent;
    }
}

/* WooCommerce inyecta .woocommerce-Price-amount y bdi */
.ccmg-card__price-current .woocommerce-Price-amount,
.ccmg-card__price-current bdi,
.ccmg-card__price-regular .woocommerce-Price-amount,
.ccmg-card__price-regular bdi {
    color:   inherit;
    font:    inherit;
    display: inline;
}

/* ---- Renglón de cuotas (Mercado Pago) ---- */

.ccmg-card__installments {
    margin:      0;
    color:       var(--ccmg-card-installments);
    font-family: var(--ccmg-card-font);
    font-size:   13px;
    line-height: 15px;
    font-weight: 500;
}

/* wc_price envuelve el monto en <span class="woocommerce-Price-amount amount"> */
.ccmg-card__installments .woocommerce-Price-amount,
.ccmg-card__installments .amount,
.ccmg-card__installments bdi {
    color:       inherit;
    font:        inherit;
    font-weight: 500;
    white-space: nowrap;
    display:     inline;
}

/* ---- Etiqueta de envío ---- */
/* Figma: pill bg=rgb(225,241,227) · r=100 · pad=2px 8px 0 · 12px/500/rgb(0,148,19)/lh=14 */

.ccmg-card__shipping {
    display:         inline-flex;
    align-items:     center;
    align-self:      flex-start;
    padding:         2px 8px 0;
    border-radius:   100px;
    background:      var(--ccmg-card-ship-bg);
    color:           var(--ccmg-card-ship-color);
    font-family:     var(--ccmg-card-font);
    font-size:       12px;
    font-weight:     500;
    line-height:     14px;
    white-space:     nowrap;
    pointer-events:  none;
}

/* ============================================================
   Accesibilidad
   ============================================================ */

.ccmg-card .screen-reader-text {
    position:    absolute !important;
    width:       1px !important;
    height:      1px !important;
    padding:     0 !important;
    margin:      -1px !important;
    overflow:    hidden !important;
    clip:        rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border:      0 !important;
}

/* ============================================================
   Responsive — Container Queries (tendencia 2026)
   + Media Queries como fallback
   ============================================================ */

/* --- Tarjetas muy pequeñas < 130px (4+ columnas en móvil) --- */
@container card (max-width: 130px) {
    .ccmg-card            { gap: 10px; }
    .ccmg-card__body      { gap: 8px; padding: 0 4px; }
    .ccmg-card__info      { gap: 0; }
    .ccmg-card__cat-badge { font-size: 10px; padding: 2px 8px 0; top: 6px; left: 4px; }
    .ccmg-card__title     { font-size: 11px; line-height: 12px; max-height: 24px; }
    .ccmg-card__price-current { font-size: 13px; line-height: 13px; }
    .ccmg-card__price-regular { font-size: 11px; }
    .ccmg-card__installments { font-size: 10px; line-height: 12px; }
    .ccmg-card__disc-label   { font-size: 9px; padding: 2px 4px; }
    .ccmg-card__shipping  { font-size: 10px; padding: 2px 6px 0; }
    .ccmg-card__atc       {
        --ccmg-card-atc-size: 26px;
        --ccmg-card-atc-icon-size: 11px;
        --ccmg-card-atc-expand-max-width: 126px;
        --ccmg-card-atc-expand-gap: 5px;
        --ccmg-card-atc-expand-padding: 5px 8px 5px 5px;
        --ccmg-card-atc-label-size: 10px;
        --ccmg-card-atc-label-line-height: 10px;
        --ccmg-card-atc-label-max-width: 88px;
        --ccmg-card-atc-pulse-shrink: 0.95;
        --ccmg-card-atc-pulse-grow: 1.02;
        bottom: 8px;
        right: 6px;
    }
}

/* --- Tarjetas pequeñas 131–180px (3 columnas tablet/móvil) --- */
@container card (min-width: 131px) and (max-width: 180px) {
    .ccmg-card            { gap: 12px; }
    .ccmg-card__title     { font-size: 12px; line-height: 13px; max-height: 26px; }
    .ccmg-card__price-current { font-size: 15px; line-height: 15px; }
    .ccmg-card__atc       {
        --ccmg-card-atc-size: 28px;
        --ccmg-card-atc-icon-size: 12px;
        --ccmg-card-atc-expand-max-width: 144px;
        --ccmg-card-atc-expand-gap: 6px;
        --ccmg-card-atc-expand-padding: 6px 10px 6px 6px;
        --ccmg-card-atc-label-size: 11px;
        --ccmg-card-atc-label-line-height: 11px;
        --ccmg-card-atc-label-max-width: 104px;
        --ccmg-card-atc-pulse-shrink: 0.94;
        --ccmg-card-atc-pulse-grow: 1.03;
    }
}

/* --- Estándar 180–280px — aplica el diseño base --- */

/* --- Tarjetas grandes > 280px --- */
@container card (min-width: 280px) {
    .ccmg-card__title         { font-size: 14px; }
    .ccmg-card__price-current { font-size: 18px; }
}

@media (max-width: 599px) {
    .ccmg-card {
        --ccmg-card-radius: 16px;
    }
}

/* ---- Viewport mobile ---- */

@media (max-width: 479px) {
    /* Gap reducido entre imagen y body */
    .ccmg-card {
        gap: 8px;
    }

    .ccmg-card__body {
        padding: 0 4px;
        gap:     8px;
    }

    .ccmg-card__title {
        font-size:  13px;
        line-height: 14px;
        max-height:  26px;  /* 2 líneas × 13px */
    }

    .ccmg-card__cat-badge {
        font-size: 11px;
        line-height: 11px;
        padding:   4px 10px 0;
    }

    .ccmg-card__price-current {
        font-size:  clamp(12px, 3.4vw, 16px);
        line-height: clamp(12px, 3.4vw, 16px);
    }

    .ccmg-card__price-regular {
        font-size:  clamp(10px, 2.8vw, 13px);
        line-height: 11px;
    }

    .ccmg-card__installments {
        font-size:  clamp(11px, 2.8vw, 13px);
        line-height: 12px;
    }

    .ccmg-card__disc-label {
        font-size: clamp(9px, 2.4vw, 11px);
        padding:   2px 4px;
    }

    .ccmg-card__info {
        gap: 0;
    }
}

/* ---- Preferencia de movimiento reducido ---- */

@media (prefers-reduced-motion: reduce) {
    .ccmg-card__img,
    .ccmg-card__img--hover,
    .ccmg-card__atc,
    .ccmg-card__atc-label {
        transition: none;
    }
}
/* ccmg-hojas-juntas: ccmg-carousel.css */
/* ============================================================
   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;
}

/*
 * En movil las secciones de Elementor llevan --flex-wrap-mobile:wrap. En un
 * flex en columna con wrap, Chrome mide el widget con un ancho provisional y
 * la caja quedaba mas baja que el carrusel (208 vs 290 px); crecia al poner
 * el JS su min-height y empujaba lo de abajo (CLS, 6-oct-2026). Con el ancho
 * explicito se mide con el real. Un ancho personalizado de Elementor
 * (.elementor-element-<id>) sigue ganando por especificidad.
 */
.elementor-widget-ccmg_product_carousel {
    width: 100%;
}

.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;
    }
}
/* ccmg-hojas-juntas: ccmg-brands-strip.css */
/**
 * CCMG Brands Strip
 *
 * Estilo de la tira horizontal de marcas (pills/chips).
 * Scroll nativo CSS: no requiere JavaScript.
 *
 * Custom properties controlables desde Elementor:
 *   --ccmg-bs-gap          Gap entre pills (default: 10px)
 *   --ccmg-bs-bg           Fondo de cada pill (default: #1a1a1a)
 *   --ccmg-bs-bg-hover     Fondo al hover (default: #333333)
 *   --ccmg-bs-color        Color de texto (default: #ffffff)
 *   --ccmg-bs-radius       Border-radius (default: 9999px = cápsula completa)
 *   --ccmg-bs-padding-v    Padding vertical (default: 0.45em)
 *   --ccmg-bs-padding-h    Padding horizontal (default: 1.1em)
 *   --ccmg-bs-font-size    Tamaño de fuente (default: 0.875rem)
 */

/* ── Contenedor raíz ────────────────────────────────────────────── */
.ccmg-brands-strip {
	--ccmg-bs-gap:        10px;
	--ccmg-bs-bg:         #1a1a1a;
	--ccmg-bs-bg-hover:   #333333;
	--ccmg-bs-color:      #ffffff;
	--ccmg-bs-radius:     9999px;
	--ccmg-bs-padding-v:  0.45em;
	--ccmg-bs-padding-h:  1.1em;
	--ccmg-bs-font-size:  0.875rem;

	position: relative;
}

/* ── Track de scroll horizontal ─────────────────────────────────── */
.ccmg-brands-strip__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var( --ccmg-bs-gap );

	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	/* Scroll suave */
	scroll-behavior: smooth;

	/* Snap suave: cada pill se ancla al inicio del track */
	scroll-snap-type: x mandatory;

	/* Padding derecho para efecto "peek" del siguiente item */
	padding-right: 2.5rem;
	/* Padding inferior para evitar que la scrollbar tape contenido en sistemas que la muestran */
	padding-bottom: 2px;

	/* Ocultar scrollbar visualmente (el scroll sigue funcionando) */
	scrollbar-width: none; /* Firefox */
}

.ccmg-brands-strip__track::-webkit-scrollbar {
	display: none; /* Chrome, Safari */
}

/* ── Pill individual ────────────────────────────────────────────── */
.ccmg-brands-strip__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;

	flex: 0 0 auto; /* no crecer, no encoger, tamaño según contenido */

	padding: var( --ccmg-bs-padding-v ) var( --ccmg-bs-padding-h );
	background: var( --ccmg-bs-bg );
	color: var( --ccmg-bs-color );
	border-radius: var( --ccmg-bs-radius );

	text-decoration: none;
	white-space: nowrap;
	font-size: var( --ccmg-bs-font-size );
	font-weight: 500;
	line-height: 1.4;

	/* Snap al inicio del pill cuando el usuario hace scroll */
	scroll-snap-align: start;

	transition: background-color 0.18s ease, color 0.18s ease;
	cursor: pointer;
}

.ccmg-brands-strip__pill:hover {
	background: var( --ccmg-bs-bg-hover );
	color: var( --ccmg-bs-color );
	text-decoration: none;
}

.ccmg-brands-strip__pill:focus-visible {
	outline: 2px solid var( --ccmg-bs-bg-hover );
	outline-offset: 3px;
}

/* ── Nombre del término ─────────────────────────────────────────── */
.ccmg-brands-strip__name {
	/* Hereda fuente y color del pill. */
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {
	.ccmg-brands-strip__pill {
		/* Reparto vertical pedido por el dueño: más aire arriba que abajo.
		   El texto de las marcas va en mayúsculas y sin descendentes, así que
		   ópticamente se asienta mejor descentrado hacia arriba. */
		padding: 5px 6px 1px 6px;
		font-size: 9px;
	}
}

/* ── Logo de la marca (opcional, activable desde el widget) ─────── */
.ccmg-brands-strip__logo {
	display: block;
	width: auto;
	height: 1.2em;      /* relativo al font-size del pill */
	max-width: 60px;
	object-fit: contain;
	filter: brightness( 0 ) invert( 1 ); /* invertir a blanco sobre fondo oscuro */
	flex-shrink: 0;
}