@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

/* Título de sección — misma fuente que la marca (Recurso 7.svg): SansPlomb
   Condensed. Se empaqueta con el widget; Xanti Typewriter llega por Adobe Fonts
   (Typekit) igual que en product-showcase / ufo-slider. */
/* La familia "sans-plomb" se declara una sola vez en shared.css
   (assets/fonts/SansPlomb-CondensedRegular.woff2), del que depende este widget. */

/* =============================================================================
   Mungos Conveyor Belt — conveyor-belt.css  v4
   Pixel-fiel al diseño de referencia, ARMADO CON LOS SVG REALES DE MARCA:
   - Plataforma crema en perspectiva (parte superior cinta.svg)  → .cb-belt__platform
   - Barra marrón oscuro (parte lateral cinta.svg)               → .cb-belt__bar
   - Ruedas blancas con tuerca hexagonal (rueda de la cinta.svg) → .cb-belt__dot
   - Óvalos marrón de los extremos (portal izq/der.svg)          → .cb-portal__oval
   - Garra amarilla cartoon (claw-hand.svg) que sale del óvalo izquierdo
   Los colores son variables CSS → siguen siendo configurables desde Elementor.
   ============================================================================= */

/* ── Section root ─────────────────────────────────────────────────────────── */

.mungos-conveyor-belt {
    --cb-bg:             #4dacb8;
    --cb-platform-color: #ffeed1;
    --cb-belt-color:     #331900;
    --cb-portal-color:   #331900;
    --cb-line-color:     #003732;
    --cb-wheel-color:    #ffffff;
    --cb-claw-color:     #ffc02e;
    --cb-accent:         #c2e535;
    --cb-ink:            #331900;
    --cb-btn-text:       #003732;
    --cb-btn-border:     #00330b;
    --cb-plat-h:         clamp(42px, 6vw, 62px);   /* alto de la plataforma; la barra se ancla a esto */
    --cb-side:           clamp(14px, 3.5vw, 46px);  /* margen lateral del conjunto */

    position:    relative;
    width:       100%;
    overflow:    hidden;
    background:  var(--cb-bg);
    padding:     0 var(--cb-side) 56px;
    box-sizing:  border-box;
    font-family: 'Oswald', 'Segoe UI', Arial, sans-serif;
}

.mungos-conveyor-belt * { box-sizing: border-box; }

/* ── Title ────────────────────────────────────────────────────────────────── */

.cb-title {
    text-align:     center;
    font-size:      clamp(4.37rem, 11.54vw, 8.42rem);
    font-weight:    400;
    color:          var(--cb-ink);
    margin:         0;
    padding:        24px 20px 18px;
    line-height:    1;
    font-family:    "sans-plomb", 'Oswald', 'Arial Narrow', sans-serif;
    position:       relative;
    z-index:        2;
    letter-spacing: 0.005em;
}

/* ── Scene (portals + stage) ─────────────────────────────────────────────── */

.cb-scene {
    position:    relative;
    display:     flex;
    align-items: stretch;
}

/* ── Portal ovals (SVG real, elipse marrón estirada) ──────────────────────── */

.cb-portal {
    position:    relative;
    flex-shrink: 0;
    width:       34px;
    z-index:     6;
    display:     flex;
    align-items: center;
    overflow:    visible;
}

/* El portal DERECHO va DEBAJO de los productos (z3 < área z6): el producto
   emergente se pinta ENCIMA del óvalo oscuro → sale DE DENTRO del hueco.
   El IZQUIERDO no crea contexto propio (z auto): así sus hijos se apilan
   contra la escena por separado → óvalo (z6, antes en DOM) DEBAJO de los
   productos (área z6, después) y la GARRA (z7) POR ENCIMA del producto. */
.cb-portal--right { z-index: 3; }
.cb-portal--left  { z-index: auto; }

.cb-portal__oval {
    position:       absolute;
    top:            50%;
    margin-top:     -160px;  /* subidos 15px */
    width:          46px;
    height:         290px;
    z-index:        6;      /* sobre la cinta: la garra sale POR DETRÁS de él */
    pointer-events: none;
}

/* 40px más ADENTRO: los óvalos pisan los extremos de la cinta (referencia). */
.cb-portal--left  .cb-portal__oval { left:  24px; }
.cb-portal--right .cb-portal__oval { right: 24px; }

.cb-portal__oval svg {
    width:   100%;
    height:  100%;
    display: block;
}

/* ── Claw (mano cartoon amarilla) ─────────────────────────────────────────── */

/* Garra2 (pata con uñas, brazo largo). Vive en un contenedor que RECORTA su
   base a la izquierda; el óvalo del portal (z6) se dibuja encima, así la base
   queda oculta y la garra nunca sale del todo del hueco. */
.cb-garra-clip {
    position:       absolute;
    left:           24px;    /* cubre el óvalo COMPLETO: toda la elipse participa
                                de la máscara (la garra nace dentro de ella) */
    top:            50%;
    margin-top:     -130px;  /* centrada al alto con headroom y subida 15px */
    width:          300px;   /* headroom para la ROTACIÓN del agarre: la garra
                                nunca se corta mientras anima (±32°) */
    height:         230px;
    overflow:       hidden;
    pointer-events: none;
    z-index:        7;       /* SOBRE el óvalo (6): la garra sale por delante del
                                hueco; su máscara ES el portal (clip-path del JS
                                con la forma de la elipse) */
}
.cb-garra-svg {
    position: absolute;
    left:     -85px;         /* brazo oculto: asoma la pata delantera con las uñas
                                (misma posición visual, caja corrida 18px) */
    top:      35px;          /* centrada verticalmente dentro del headroom */
    height:   160px;
    width:    auto;
    display:  block;
    overflow: visible;
}

/* Mano en reposo: oculta; el JS la muestra durante el agarre (con rotación). */
.cb-hand {
    opacity:          0;
    transform-box:    fill-box;
    transform-origin: 20% 60%;
    will-change:      transform, opacity;
}

/* ── Stage (central: products + belt) ────────────────────────────────────── */

.cb-stage {
    flex:      1;
    position:  relative;
    min-width: 0;
}

/* ── Products area ───────────────────────────────────────────────────────── */

.cb-products-area {
    position:      relative;
    z-index:       6;             /* SOBRE ambos óvalos: los productos entran y
                                     salen POR DELANTE de los huecos oscuros
                                     (la garra va aún más arriba, z7) */
    overflow:      hidden;
    /* la máscara del área (clip-path del JS) tiene la FORMA de los DOS
       portales: elipse izquierda (entrada al hueco) + elipse derecha (salida).
       Los márgenes extienden la caja para cubrir ambas elipses completas. */
    margin-left:   -20px;
    margin-right:  -16px;
    margin-bottom: -14px;         /* el JS lo profundiza según el alto de la cinta */
}

.cb-track-wrapper { overflow: visible; }

.cb-track {
    display:     flex;
    list-style:  none;
    margin:      0;
    padding:     0;
    width:       max-content;
    will-change: transform;
    align-items: flex-end;        /* los productos se paran sobre la plataforma */
}

/* ── Product item ─────────────────────────────────────────────────────────── */

.cb-product-item { flex: 0 0 220px; padding: 0 10px; }

.cb-product-link {
    display:         block;
    text-decoration: none;
    color:           inherit;
}

.cb-product-info {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    gap:             3px;
    padding-bottom:  8px;
}

.cb-product-name {
    display:        block;
    font-size:      0.82rem;
    font-weight:    800;
    font-variation-settings: "wght" 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:          var(--cb-ink);
    line-height:    1.2;
    max-width:      190px;
    font-family:    "xanti-typewriter-variable", 'Oswald', 'Arial Narrow', sans-serif;
}

.cb-product-price {
    display:     block;
    font-size:   0.95rem;
    font-weight: 500;
    font-variation-settings: "wght" 500;
    color:       var(--cb-ink);
    font-family: "xanti-typewriter-variable", 'Oswald', 'Arial Narrow', sans-serif;
}
.cb-product-price .woocommerce-Price-amount { font-weight: 500; font-variation-settings: "wght" 500; }
.cb-product-price .amount { color: var(--cb-ink); }

/* AGREGAR — píldora lima SIEMPRE visible con ícono de carrito + texto «AGREGAR»
   (igual al Recurso 7). Conserva el estilo de la card: Xanti ExtraBold itálica,
   texto #003732, borde y sombra #00330b. */
.cb-btn-add {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    padding:         6px 16px;
    font-family:     "xanti-typewriter-variable", 'Oswald', 'Arial Narrow', sans-serif;
    font-weight:     800;
    font-variation-settings: "wght" 800;
    font-style:      italic;
    font-size:       12px;
    letter-spacing:  0.4px;
    text-transform:  uppercase;
    color:           var(--cb-btn-text);
    background:      var(--cb-accent);
    border:          2px solid var(--cb-btn-border);
    border-radius:   999px;
    white-space:     nowrap;
    text-decoration: none;
    cursor:          pointer;
    box-shadow:      2px 2px 0 var(--cb-btn-border);
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
    margin-top:      3px;
}
.cb-btn-add svg { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
.cb-btn-add > span { display: inline; }
.cb-product-item:hover .cb-btn-add,
.cb-btn-add:hover,
.cb-btn-add:focus-visible {
    transform:  translateY(-1px);
    box-shadow: 3px 4px 0 var(--cb-btn-border);
}

/* Imagen del producto — sin caja, con sombra sobre la plataforma */
.cb-product-img {
    margin:          0;
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    height:          200px;
    position:        relative;
}
.cb-product-img::after {
    content:        "";
    position:       absolute;
    bottom:         -8px;
    left:           50%;
    transform:      translateX(-50%);
    width:          150px;
    height:         26px;
    /* Sombra de suelo suave: elipse con degradado a transparente + desenfoque
       (antes era una elipse dura que se veía rara). */
    background:     radial-gradient(ellipse at center, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.14) 45%, rgba(0, 0, 0, 0) 72%);
    border-radius:  50%;
    z-index:        1;
    filter:         blur(7px);
    pointer-events: none;
    transition:     transform 0.25s ease, opacity 0.25s ease;
}
.cb-product-link:hover .cb-product-img::after { transform: translateX(-50%) scale(0.8); opacity: 0.6; }

.cb-product-img img {
    max-width:  190px;
    max-height: 200px;
    width:      auto;
    height:     auto;
    object-fit: contain;
    display:    block;
    transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1);
    position:   relative;
    z-index:    2;
}
.cb-product-link:hover .cb-product-img img { transform: translateY(-8px); }

/* Badge (ej. NUEVO) */
.cb-badge {
    display:        inline-block;
    background:     #FFD500;
    color:          #1A1A1A;
    font-size:      0.58rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding:        3px 8px;
    border-radius:  6px;
    margin-bottom:  4px;
}

/* ── Conveyor belt surface (piezas SVG reales) ────────────────────────────── */

.cb-belt {
    position: relative;
    z-index:  3;
    width:    100%;
}

/* Plataforma crema en perspectiva — el SVG se estira a lo ancho. */
.cb-belt__platform {
    position:  relative;
    z-index:   2;
    height:    var(--cb-plat-h);
    width:     100%;
    /* recorte al trapecio de la plataforma (mismos puntos que el SVG) */
    clip-path: polygon(12.9% 0, 88.8% 0, 99.4% 69.6%, 100% 82.7%, 1.7% 100%, 0 69.8%);
}
.cb-belt__platform svg { width: 100%; height: 100%; display: block; }

/* Líneas divisorias de la superficie (una por slot). Es un elemento real para
   que el JS scrollee su background-position EN SINCRONÍA con la cinta (mismo
   reloj que productos y ruedas). El ancho del tile lo fija el JS = 1 slot. */
.cb-belt__lines {
    position:          absolute;
    inset:             0;
    background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='60'%3E%3Cline x1='35' y1='0' x2='35' y2='60' stroke='%23033642' stroke-width='1.6'/%3E%3C/svg%3E");
    background-size:   110px 100%;
    background-repeat: repeat-x;
    pointer-events:    none;
    z-index:           1;
}

/* Barra marrón oscuro + ruedas centradas.
   La plataforma tiene el borde inferior inclinado (perspectiva), así que deja
   un triángulo transparente abajo. La barra se sube (~20% del alto de la
   plataforma) y se pinta POR ENCIMA para tapar ese hueco y formar una costura
   limpia y horizontal contra la crema — quedan pegadas, no separadas. */
.cb-belt__bar {
    position:  relative;
    z-index:   3;
    height:    clamp(30px, 4.6vw, 44px);
    width:     100%;
    margin-top: calc(var(--cb-plat-h) * -0.45);  /* barra más arriba (más solapada) */
}
.cb-belt__bar > svg {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    display:  block;
}

.cb-belt__wheels {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: space-around;
    padding:         0 clamp(20px, 5vw, 60px);
    z-index:         2;
}

/* Rueda blanca con tuerca hexagonal — FIJA (en los frames de referencia las
   ruedas son decoración del marco y no rotan; lo que se mueve es la superficie
   de la cinta). */
.cb-belt__dot {
    display:     block;
    width:       clamp(20px, 3vw, 30px);
    height:      clamp(20px, 3vw, 30px);
    flex-shrink: 0;
}
.cb-belt__dot svg { width: 100%; height: 100%; display: block; transform-origin: 50% 50%; }

/* ── Footer: flechas + VER TODOS ──────────────────────────────────────────── */

.cb-footer {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         22px 0 0;
    position:        relative;
    z-index:         5;
}

.cb-ver-todos {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      var(--cb-accent);
    color:           var(--cb-btn-text);
    font-size:       0.85rem;
    font-weight:     800;
    font-variation-settings: "wght" 800;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    text-decoration: none;
    padding:         9px 32px;
    border-radius:   30px;
    border:          2px solid var(--cb-btn-border);
    box-shadow:      2px 2px 0 var(--cb-btn-border);
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
    white-space:     nowrap;
    font-family:     "xanti-typewriter-variable", 'Oswald', 'Arial Narrow', sans-serif;
}
.cb-ver-todos:hover { transform: translateY(-1px); box-shadow: 3px 4px 0 var(--cb-btn-border); }

.cb-arrow-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    padding:         0;
    border-radius:   50%;
    background:      var(--cb-accent);
    color:           var(--cb-btn-text);
    text-decoration: none;
    border:          2px solid var(--cb-btn-border);
    box-shadow:      2px 2px 0 var(--cb-btn-border);
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
    /* real <button> now (was an <a>): normalise the native control so it
       matches the pill and never navigates. */
    -webkit-appearance: none;
    appearance:      none;
    font:            inherit;
    cursor:          pointer;
}
/* flecha de marca (misma del slider de Visítanos) */
.cb-arrow-ico { width: 11px; height: auto; display: block; }
.cb-arrow-btn--prev .cb-arrow-ico { transform: scaleX(-1); }
.cb-arrow-btn:hover { transform: translateY(-1px); box-shadow: 3px 4px 0 var(--cb-btn-border); }

/* Blindaje anti-tema (componente de slider unificado): el tema pinta
   button:hover/:focus/:active de FUCSIA. Reafirmamos el look de marca de las
   flechas y del pill VER TODOS en TODOS los estados para que nunca salga rosa. */
.mungos-conveyor-belt .cb-arrow-btn,
.mungos-conveyor-belt .cb-arrow-btn:hover,
.mungos-conveyor-belt .cb-arrow-btn:focus,
.mungos-conveyor-belt .cb-arrow-btn:focus-visible,
.mungos-conveyor-belt .cb-arrow-btn:active,
.mungos-conveyor-belt a.cb-ver-todos,
.mungos-conveyor-belt a.cb-ver-todos:hover,
.mungos-conveyor-belt a.cb-ver-todos:focus,
.mungos-conveyor-belt a.cb-ver-todos:focus-visible,
.mungos-conveyor-belt a.cb-ver-todos:active {
  background: var(--cb-accent) !important;
  color: var(--cb-btn-text) !important;
  border-color: var(--cb-btn-border) !important;
}
.mungos-conveyor-belt .cb-arrow-btn::before,
.mungos-conveyor-belt .cb-arrow-btn::after { content: none !important; }

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cb-garra-svg, .cb-hand { animation: none !important; }
    .cb-product-img img     { transition: none !important; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* Los selectores de la garra usan .cb-garra-* (el DOM real); antes apuntaban a
   .cb-claw/.cb-claw-clip inexistentes → todo el ajuste móvil era no-op. */

/* En móvil se ESCALA todo el conjunto (óvalo + clip + garra) con las MISMAS
   proporciones del desktop, que sí funciona: la garra emerge del hueco
   enmascarada por la elipse del portal (clip-path del JS). Claves:
   · clip.left == oval.left  (así el borde izq del óvalo cae en el borde del clip)
   · óvalo y clip centrados vertical (margin-top = -alto/2)
   · el JS recalcula el clip-path desde el óvalo ya alineado. */
@media (max-width: 900px) {
    .cb-portal__oval { width: 41px !important; height: 261px !important; margin-top: -130px !important; }
    .cb-portal--left  .cb-portal__oval { left:  22px; }
    .cb-portal--right .cb-portal__oval { right: 22px; }
    .cb-garra-clip { left: 22px; width: 270px; height: 207px; margin-top: -103px; }
    .cb-garra-svg  { left: -76px; top: 32px; height: 144px; }
    .cb-product-item { flex: 0 0 175px; }
    .cb-product-img  { height: 160px; }
    .cb-product-img img { max-width: 150px; max-height: 160px; }
}

@media (max-width: 600px) {
    .cb-portal { width: 40px; }
    /* !important: Elementor fija .cb-portal__oval (290px) con más especificidad. */
    .cb-portal__oval { width: 40px !important; height: 247px !important; margin-top: -123px !important; }
    .cb-portal--left  .cb-portal__oval { left:  20px; }
    .cb-portal--right .cb-portal__oval { right: 20px; }
    .cb-garra-clip { left: 20px; width: 255px; height: 196px; margin-top: -98px; }
    .cb-garra-svg  { left: -72px; top: 30px; height: 136px; }
    .cb-product-item { flex: 0 0 clamp(150px, 54vw, 190px); padding: 0 6px; }
    .cb-product-img  { height: clamp(120px, 38vw, 150px); }
    .cb-product-img img { max-width: 92%; max-height: 100%; }
    .cb-title { font-size: clamp(1.6rem, 8vw, 2.4rem); padding: 14px 16px 10px; }
}

@media (max-width: 400px) {
    .cb-portal { width: 22px; }
    .mungos-conveyor-belt { padding-bottom: 26px; }
}

/* ── Cinta completa unida (cinta completa _1.svg del usuario) ─────────────── */

.cb-belt--full { position: relative; width: 100%; }
.cb-belt--full > svg.cb-belt-svg { width: 100%; height: auto; display: block; }

/* ruedas rotables (grupos dentro del SVG unido; las gira el JS con el reloj) */
.cb-wheel { transform-box: fill-box; transform-origin: center; will-change: transform; }

/* capa de líneas de la superficie: el JS dibuja una línea por producto (nacen
   en la base de cada uno, ángulo en abanico de perspectiva). El trapecio es la
   crema EXACTA del SVG interpolada a esta altura, con margen para que las
   líneas terminen ANTES del borde. */
.cb-belt--full .cb-belt__lines {
    position:  absolute;
    left:      0;
    top:       0;
    width:     100%;
    height:    60%;
    clip-path: polygon(13.9% 0%, 88.4% 0%, 97.8% 100%, 2.4% 100%);
    pointer-events: none;
    z-index:   1;
}

/* botón AGREGAR real (add-to-cart WooCommerce). No reseteamos font/border acá:
   .cb-btn-add ya define su tipografía Xanti y su borde (mismo botón que la card). */
button.cb-btn-add,
a.cb-btn-add {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.cb-btn-add.added,
.cb-btn-add.is-added {
    background:   #1a3b3c !important;
    color:        #fff !important;
    border-color: #1a3b3c !important;
}
/* WooCommerce añade un link "Ver carrito" tras el AJAX — no romper la tarjeta */
.cb-product-info .added_to_cart { display: none; }

/* ── Control "Mostrar engranajes": oculta las ruedas del SVG unido ────────── */
.cb-no-wheels .cb-wheel { display: none; }

/* ── Personajes decorativos (repeater) ────────────────────────────────────── */
.cb-char {
    position:       absolute;
    transform:      translate(-50%, -50%);
    pointer-events: none;
}
.cb-char svg, .cb-char img { width: 100%; height: auto; display: block; }
.cb-char--bob    { animation: cb-char-bob    2s   ease-in-out infinite alternate; }
.cb-char--wiggle { animation: cb-char-wiggle 2.4s ease-in-out infinite alternate; }
.cb-char--pulse  { animation: cb-char-pulse  2.2s ease-in-out infinite alternate; }

@keyframes cb-char-bob {
    from { transform: translate(-50%, calc(-50% - 6px)); }
    to   { transform: translate(-50%, calc(-50% + 6px)); }
}
@keyframes cb-char-wiggle {
    from { transform: translate(-50%, -50%) rotate(-4deg); }
    to   { transform: translate(-50%, -50%) rotate(4deg); }
}
@keyframes cb-char-pulse {
    from { transform: translate(-50%, -50%) scale(0.96); }
    to   { transform: translate(-50%, -50%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .cb-char { animation: none !important; }
}

/* Target táctil ≥44px en las flechas (WCAG 2.5.5) — base es 38px */
@media (hover: none), (pointer: coarse) {
  .cb-arrow-btn { width: 44px; height: 44px; }
  /* El destello al TOCAR (tap-highlight) salía FUCSIA en algunos teléfonos
     (usan el color de acento del sistema). Lo forzamos a un verde de marca
     SUTIL en todo lo interactivo de la cinta, para que el "hover"/tap del
     slider no se vea rosa. */
  .cb-track, .cb-track-wrapper, .cb-product-item, .cb-product-item a,
  .cb-product-name, .cb-btn-add, .cb-arrow-btn, .cb-ver-todos {
    -webkit-tap-highlight-color: rgba(0, 130, 75, 0.20);
  }
}