@charset "UTF-8";
/**
 * Carrusel de Productos Mungos — "A tu peludito · también le puede gustar".
 * Container-aware: JS sets each card's width and slides the track. CSS provides
 * the branded look, the grid's AGREGAR button, 44px touch targets, focus rings
 * and reduced-motion support.
 */
.mu-pc {
  --mu-pc-accent: #C2E535;
  --mu-pc-border: #4A2A1A;
  --mu-pc-ink: #2A1A10;
  --mu-pc-red: #FD472E;
  --mu-pc-dot: #cbb89a;
  --mu-pc-dot-active: #6BA53A;
  --mu-pc-gap: 24px;
  position: relative;
  background: #FDECC9;
  padding: clamp(28px, 4vw, 52px) clamp(12px, 3vw, 40px) clamp(24px, 3vw, 44px);
  overflow: hidden;
  font-family: "sans-plomb", "Oswald", "Arial Narrow", sans-serif;
}
.mu-pc * {
  box-sizing: border-box;
}
.mu-pc img {
  max-width: 100%;
  height: auto;
}

/* ── Heading: big red Custard line + typewriter subtitle ─────────── */
.mu-pc__head {
  text-align: center;
  margin: 0 0 clamp(18px, 3vw, 30px);
  position: relative;
  z-index: 2;
}
.mu-pc__head-top {
  font-family: "custard", "sans-plomb", sans-serif;
  font-weight: 800;
  color: var(--mu-pc-red);
  font-size: clamp(38px, 6vw, 82px);
  line-height: 0.92;
  letter-spacing: 0.5px;
  margin: 0;
}
.mu-pc__head-sub {
  font-family: "xanti-typewriter-variable", monospace;
  font-weight: 800;
  font-variation-settings: "wght" 800; /* Xanti Typewriter VF ExtraBold */
  color: var(--mu-pc-ink);
  font-size: clamp(15px, 1.9vw, 26px);
  letter-spacing: 2px;
  margin: 6px 0 0;
}
/* Back-compat: old single-line heading class */
.mu-pc__heading {
  text-align: center;
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: 0.5px;
  margin: 0 0 clamp(16px, 3vw, 32px);
  color: var(--mu-pc-ink);
}

/* ── Stage: [prev] [viewport] [next] (characters are absolute) ──── */
.mu-pc__stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1.5vw, 18px);
  max-width: 1180px;
  margin: 0 auto;
}
.mu-pc__viewport {
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
}
.mu-pc__track {
  display: flex;
  gap: var(--mu-pc-gap);
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Card ────────────────────────────────────────────────────────── */
.mu-pc__card {
  flex: 0 0 auto;
  width: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mu-pc__media {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border: 5px solid var(--mu-pc-border);
  border-radius: 22px;
  overflow: hidden;
  background: var(--mu-pc-card-bg, #fff); /* PNG sin fondo → blanco por defecto */
}
.mu-pc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.mu-pc__media:hover img {
  transform: scale(1.05);
}
.mu-pc__media:focus-visible {
  outline: 3px solid #2563EB;
  outline-offset: 3px;
}
.mu-pc__name {
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 16px 0 4px;
  line-height: 1.2;
}
.mu-pc__name a {
  color: var(--mu-pc-ink) !important;
  text-decoration: none;
}
.mu-pc__name a:hover {
  color: var(--mu-pc-ink) !important;
  text-decoration: underline;
}
.mu-pc__price {
  font-weight: 800;
  font-size: 16px;
  margin: 0 0 12px;
  color: var(--mu-pc-ink);
}
.mu-pc__price del {
  opacity: 0.5;
  font-weight: 600;
  margin-right: 6px;
}
.mu-pc__price ins {
  text-decoration: none;
}

/* ── AGREGAR button — IDENTICAL to the product grid (.mu-ps__cart) ──
   Círculo lima → pill al hover (o siempre visible con .is-open); ícono de
   canasta de la marca; texto Xanti ExtraBold itálica. */
.mu-pc__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 42px;
  width: 42px;
  padding: 0;
  font-family: "xanti-typewriter-variable", sans-serif;
  font-weight: 800;
  font-variation-settings: "wght" 800; /* Xanti Typewriter VF ExtraBold */
  /* No italic: the self-hosted VF only ships the upright style, so requesting
     italic would fall back to a system sans. Keep it upright = real Xanti. */
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--mu-pc-btn-text, #003732) !important;
  background: var(--mu-pc-btn-bg, var(--mu-pc-accent)) !important;
  border: var(--mu-pc-btn-bw, 2px) solid var(--mu-pc-btn-bc, #00330b) !important;
  border-radius: var(--mu-pc-btn-radius, 999px);
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 2px 2px 0 var(--mu-pc-btn-shadow, #00330b);
  transition: width 0.28s ease, padding 0.28s ease, gap 0.28s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.mu-pc__cart-ico {
  width: 17px;
  height: auto;
  max-height: 20px;
  flex: 0 0 auto;
  display: block;
}
.mu-pc__cart > span {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.28s ease, opacity 0.2s ease;
}
.mu-pc__card:hover .mu-pc__cart,
.mu-pc__cart:hover,
.mu-pc__cart:focus-visible,
.mu-pc__cart.is-open {
  width: auto;
  padding: 0 18px;
  gap: 7px;
  transform: translateY(-1px);
  box-shadow: 3px 4px 0 var(--mu-pc-btn-shadow, #00330b);
}
.mu-pc__card:hover .mu-pc__cart > span,
.mu-pc__cart:hover > span,
.mu-pc__cart:focus-visible > span,
.mu-pc__cart.is-open > span {
  max-width: 130px;
  opacity: 1;
}
.mu-pc__cart:focus-visible {
  outline: 3px solid #2563EB;
  outline-offset: 2px;
}
.mu-pc__cart.loading {
  opacity: 0.7;
  pointer-events: none;
}
.mu-pc__cart.added::after {
  content: " ✓"; /* AJAX add-to-cart confirmation (matches the grid) */
}
/* ── Blindaje anti-tema del botón AGREGAR ────────────────────────────
   Es un <a class="button add_to_cart_button">: WooCommerce/el tema lo pinta de
   FUCSIA en :hover/:focus/:active e inyecta su propio icono vía ::before.
   Forzamos el color de marca en TODOS los estados y matamos ese ::before. */
.mu-pc .mu-pc__cart,
.mu-pc .mu-pc__cart:link,
.mu-pc .mu-pc__cart:visited,
.mu-pc .mu-pc__cart:hover,
.mu-pc .mu-pc__cart:focus,
.mu-pc .mu-pc__cart:active,
.mu-pc .mu-pc__cart:focus-visible,
.mu-pc__card:hover .mu-pc__cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mu-pc-btn-bg, var(--mu-pc-accent)) !important;
  color: var(--mu-pc-btn-text, #003732) !important;
  border-color: var(--mu-pc-btn-bc, #00330b) !important;
  line-height: 1 !important;
  filter: none !important;
  text-decoration: none !important;
}
/* The theme also overrides box-shadow AND border-radius on .button, so shield
   both with !important (sin esto el botón sale CUADRADO, no redondo/pill). */
.mu-pc .mu-pc__cart {
  box-shadow: 2px 2px 0 var(--mu-pc-btn-shadow, #00330b) !important;
  border-radius: var(--mu-pc-btn-radius, 999px) !important;
}
.mu-pc .mu-pc__cart:hover,
.mu-pc .mu-pc__cart:focus-visible,
.mu-pc__card:hover .mu-pc__cart {
  box-shadow: 3px 4px 0 var(--mu-pc-btn-shadow, #00330b) !important;
}
.mu-pc__cart::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ── Arrows ──────────────────────────────────────────────────────── */
/* Flecha = componente de slider unificado (lima redondo, borde oscuro, sombra). */
.mu-pc__arrow {
  flex: 0 0 auto;
  /* Align to the top; JS sets margin-top so the arrow centers on the product
     IMAGE, not on the full card height (image + text + button). */
  align-self: flex-start;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 20px; /* sizes the brand arrow icon (height: 1em) */
  border-radius: 50%;
  background-color: var(--mu-pc-accent) !important;
  border: 2px solid #00330b !important;
  box-shadow: 2px 2px 0 #00330b;
  color: #003732 !important;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
/* Blindaje anti-tema: reafirma marca en todos los estados (nada de fucsia). */
.mu-pc__arrow:hover,
.mu-pc__arrow:focus,
.mu-pc__arrow:focus-visible,
.mu-pc__arrow:active {
  background-color: var(--mu-pc-accent) !important;
  color: #003732 !important;
  border-color: #00330b !important;
}
.mu-pc__arrow:hover { transform: translateY(-1px); box-shadow: 3px 4px 0 #00330b; }
.mu-pc__arrow:active { transform: translateY(0); box-shadow: 1px 1px 0 #00330b; }
.mu-pc__arrow::before, .mu-pc__arrow::after { content: none !important; }
/* Flecha «anterior» apunta a la IZQUIERDA (‹ ›), como el conveyor-belt. */
.mu-pc__prev .mu-arrow-ico { transform: scaleX(-1); }
.mu-pc__arrow:focus-visible {
  outline: 3px solid #2563EB;
  outline-offset: 2px;
}
.mu-pc__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ── Decorative characters (absolute — never affect track width) ─── */
.mu-pc__char {
  position: absolute;
  width: 130px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* ENCIMA de las tarjetas: el stage/tarjetas van en z-index 2; los subimos bien
     alto por si un elemento del tema/Elementor los tapaba (son pointer-events:none,
     así que aunque queden encima no bloquean clics). */
  z-index: 6;
}
.mu-pc__char svg,
.mu-pc__char img {
  width: 100%;
  height: auto;
  display: block;
}
.mu-pc__char.is-flipped svg,
.mu-pc__char.is-flipped img {
  transform: scaleX(-1);
}
.mu-pc__char--bob {
  animation: mu-pc-bob 2s ease-in-out infinite alternate;
}
.mu-pc__char--wiggle {
  animation: mu-pc-wiggle 2.4s ease-in-out infinite alternate;
}

/* ── Dots ────────────────────────────────────────────────────────── */
.mu-pc__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-top: clamp(12px, 2vw, 20px);
}
.mu-pc__dot {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.mu-pc__dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mu-pc-dot);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.mu-pc__dot.is-active::before {
  background: var(--mu-pc-dot-active);
  transform: scale(1.25);
}
.mu-pc__dot:focus-visible {
  outline: 3px solid #2563EB;
  outline-offset: -6px;
  border-radius: 50%;
}
/* Blindaje anti-tema: los dots son <button>, el tema los pinta de FUCSIA en
   :hover/:focus. Los mantenemos transparentes (el punto es el ::before). */
.mu-pc .mu-pc__dot,
.mu-pc .mu-pc__dot:hover,
.mu-pc .mu-pc__dot:focus,
.mu-pc .mu-pc__dot:active,
.mu-pc .mu-pc__dot:focus-visible {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.mu-pc__dot::after {
  content: none !important;
  display: none !important;
}

@keyframes mu-pc-bob {
  from {
    transform: translate(-50%, calc(-50% - 5px));
  }
  to {
    transform: translate(-50%, calc(-50% + 5px));
  }
}
@keyframes mu-pc-wiggle {
  from {
    transform: translate(-50%, -50%) rotate(-4deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(4deg);
  }
}
@media (max-width: 700px) {
  .mu-pc__char {
    display: none;
  }
  .mu-pc__head-top {
    font-size: clamp(34px, 12vw, 52px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mu-pc__track {
    transition: none !important;
  }
  .mu-pc__char {
    animation: none !important;
  }
  .mu-pc__media img,
  .mu-pc__cart,
  .mu-pc__cart > span,
  .mu-pc__arrow,
  .mu-pc__dot::before {
    transition: none !important;
  }
}

/* ══ Responsive móvil (auditoría responsive) ══════════════════════════ */
@media (hover: none), (pointer: coarse) {
  .mu-pc__cart { width: auto; padding: 0 18px; gap: 7px; height: 44px; }
  .mu-pc__cart > span { max-width: 130px; opacity: 1; }
}
@media (max-width: 560px) {
  .mu-pc__card { width: 100%; }
  .mu-pc__head-sub { letter-spacing: 1px; }
}