@charset "UTF-8";
/**
 * Mobility Toggle — "Mungos MOBILITY" before/after (faithful to the brand PDF).
 *
 * Clean two-column banner exactly like the mockup: left = seal + wordmark →
 * description → running dog (with its soft ground shadow) → CON/SIN switch →
 * dark stats panel; right = the product bottle on a plain dark disc. Plain teal
 * background, no extra decoration. Sized off one viewport-locked base unit
 *   font-size: min(1.12vw, 1.4svh)
 * so it fills the screen and fits the viewport height without scrolling; stacks
 * on mobile. The running dog + red pain lines live inside the Lottie assets;
 * the photo + seal come from the product meta. Themeable via the --mob-* vars.
 */

.mu-mob {
  --mob-bg: #00AEBA;
  --mob-ink: #0C2E31;
  --mob-desc: #0C2E31;
  --mob-panel: #0C2E31;
  --mob-track: #0E4A50;
  --mob-dot: #FFC61A;
  --mob-on: #033642;        /* dark end of the ON gradient */
  --mob-on-2: #49BA2D;      /* bright green end of the ON gradient */
  --mob-off: #033642;       /* SIN pill (dark) */
  --mob-knob: #FFFFFF;      /* knob when ON */
  --mob-knob-off: #E8502A;  /* knob when SIN (red) */
  --mob-disc: #0C2E31;

  --side: 4vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  /* Full-bleed: break out of Elementor's boxed content width so the teal fills
     the viewport (no white sides). Harmless when the section is already full. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 100svh;
  background: var(--mob-bg);
  overflow: hidden;
  color: var(--mob-ink);
  font-family: "Fredoka", system-ui, sans-serif;
}
.mu-mob, .mu-mob * { box-sizing: border-box; }
.mu-mob--full { --side: 1.6vw; }

/* Inner wrapper — sets the scale relative to its OWN width (container query),
   holds the two columns, and gives the boxed layout its side spaces via
   max-width. Full-width removes the max-width. */
.mu-mob__inner {
  container-type: inline-size;
  width: 100%;
  max-width: 1560px;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 3svh var(--side);
}
.mu-mob--full .mu-mob__inner { max-width: none; }
.mu-mob__col-left, .mu-mob__col-right { font-size: min(1.32cqw, 1.18svh); }

/* ── Left column ────────────────────────────────────────── */
.mu-mob__col-left {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9em;
}

/* Brand head. Each size below is multiplied by a per-element scale var (default
   1) that the Elementor "Tamaños" sliders drive — so everything stays responsive
   AND individually resizable. */
.mu-mob__head { display: flex; align-items: center; gap: 1.4em; }
.mu-mob__logo { width: calc(7.5em * var(--mob-icon-scale, 1)); flex: 0 0 auto; }
.mu-mob__logo img { display: block; width: 100%; height: auto; }
.mu-mob__wordmark { line-height: 0.9; }
.mu-mob__brandname {
  display: block;
  font-family: "custard", system-ui, sans-serif;
  font-weight: 700; font-size: calc(3.7em * var(--mob-brand-scale, 1)); line-height: 0.95;
  color: var(--mob-ink);
}
/* Uploaded "Mungos" SVG logo (replaces the text) */
.mu-mob__brand-logo {
  display: block; width: calc(15em * var(--mob-brand-scale, 1));
  max-width: 100%; height: auto;
}
.mu-mob__product {
  display: block;
  font-family: "xanti-typewriter-variable", "Arial Black", sans-serif;
  font-weight: 800; font-size: calc(5.3em * var(--mob-product-scale, 1)); line-height: 0.9;
  letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap;
  color: var(--mob-ink);
}

/* Description */
.mu-mob__desc {
  max-width: 34em;
  font-weight: 400; font-size: calc(1.9em * var(--mob-desc-scale, 1)); line-height: 1.42;
  color: var(--mob-desc);
}
.mu-mob__desc p { margin: 0 0 0.8em; }
.mu-mob__desc p:last-child { margin-bottom: 0; }

/* Dog stage — in the left column between the description and the switch, exactly
   like the mockup (with its ground shadow). */
/* The running-dog Lottie has big transparent padding above/below the dog, which
   otherwise adds dead vertical space. Negative margins pull the description and
   switch into that empty padding so the dog stays big but the column is compact
   (and the whole hero fits with no scroll). */
.mu-mob__stage-wrap { position: relative; align-self: flex-start; width: calc(59em * var(--mob-dog-scale, 1)); margin: -7.5em 0 -6.5em 0.5em; }
.mu-mob__stage { position: relative; width: 100%; aspect-ratio: 357 / 263; }
.mu-mob__lottie { position: absolute; inset: 0; transition: opacity 0.3s ease; }
.mu-mob__lottie svg { display: block; width: 100% !important; height: 100% !important; }
.mu-mob__lottie--off { transform: scale(0.72); transform-origin: center; }
.mu-mob[data-state="on"]  .mu-mob__lottie--off { opacity: 0; }
.mu-mob[data-state="off"] .mu-mob__lottie--on  { opacity: 0; }
.mu-mob__shadow {
  position: absolute; left: 50%; bottom: 4%;
  width: 62%; height: 6%; transform: translateX(-46%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(4,32,34,0.30), rgba(4,32,34,0) 70%);
  z-index: -1;
}

/* Toggle (whole component scales via font-size × --mob-toggle-scale) */
.mu-mob__toggle-row { display: flex; align-items: center; gap: 1.8em; font-size: calc(1em * var(--mob-toggle-scale, 1)); }
.mu-mob__toggle-label {
  font-family: "xanti-typewriter-variable", ui-monospace, monospace;
  font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  font-size: 2.5em; color: var(--mob-ink); white-space: nowrap;
}
.mu-mob__switch {
  --w: 10em; --h: calc(var(--w) * 0.44); --k: calc(var(--h) * 0.74);
  position: relative; width: var(--w); height: var(--h);
  border: none; border-radius: 999px; padding: 0; cursor: pointer;
  background: var(--mob-off); transition: background 0.3s ease; flex: 0 0 auto;
}
.mu-mob[data-state="on"] .mu-mob__switch {
  background: linear-gradient(90deg, var(--mob-on) 0%, var(--mob-on-2) 100%);
}
.mu-mob__knob {
  position: absolute; top: 50%; left: calc((var(--h) - var(--k)) / 2);
  width: var(--k); height: var(--k); border-radius: 50%;
  background: var(--mob-knob-off);   /* SIN = red knob (left) */
  transform: translateY(-50%);
  box-shadow: 0 0.15em 0.35em rgba(0,0,0,.28);
  transition: left 0.3s cubic-bezier(.4,1.4,.6,1), background 0.3s ease;
}
.mu-mob[data-state="on"] .mu-mob__knob { background: var(--mob-knob); }   /* CON = white knob (right) */
.mu-mob[data-state="on"] .mu-mob__knob { left: calc(var(--w) - var(--k) - (var(--h) - var(--k)) / 2); }
.mu-mob__switch:focus-visible { outline: 0.3em solid #fff; outline-offset: 0.3em; }

/* ── Blindaje anti-tema ────────────────────────────────────────────────────
   Muchos temas pintan button:hover/:focus/:active de fucsia/magenta y le meten
   ::before/::after; eso teñía el switch. Forzamos el color de marca en TODOS los
   estados y matamos los pseudo-overlays del tema (sin tocar el outline de foco). */
.mu-mob .mu-mob__switch,
.mu-mob .mu-mob__switch:hover,
.mu-mob .mu-mob__switch:focus,
.mu-mob .mu-mob__switch:active,
.mu-mob .mu-mob__switch:focus-visible {
  background: var(--mob-off) !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--mob-ink) !important;
  filter: none !important;
}
.mu-mob[data-state="on"] .mu-mob__switch,
.mu-mob[data-state="on"] .mu-mob__switch:hover,
.mu-mob[data-state="on"] .mu-mob__switch:focus,
.mu-mob[data-state="on"] .mu-mob__switch:active,
.mu-mob[data-state="on"] .mu-mob__switch:focus-visible {
  background: linear-gradient(90deg, var(--mob-on) 0%, var(--mob-on-2) 100%) !important;
}
.mu-mob__switch::before,
.mu-mob__switch::after {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* Stat bars (plain rounded panel; whole panel scales via font-size × --mob-stats-scale) */
.mu-mob__stats {
  font-size: calc(1em * var(--mob-stats-scale, 1));
  width: 36em; max-width: 100%;
  background: var(--mob-panel);
  border-radius: 1.4em;
  padding: 1em 1.6em;
  display: grid; gap: 0.55em;
}
.mu-mob__stat { display: grid; grid-template-columns: 10em 1fr; align-items: center; gap: 1.3em; }
.mu-mob__stat-label { font-weight: 400; color: #EAF7F6; font-size: 1.6em; line-height: 1.05; }
.mu-mob__track { position: relative; height: 0.6em; border-radius: 999px; background: var(--mob-track); }
.mu-mob__dot {
  position: absolute; top: 50%; left: 50%;
  width: 2em; height: 2em; border-radius: 50%; background: var(--mob-dot);
  transform: translate(-50%, -50%);
  box-shadow: 0 0.2em 0.45em rgba(0,0,0,.35);
  transition: left 0.6s cubic-bezier(.4,1.2,.5,1);
}

/* ── Right column: bottle on a plain dark disc ──────────── */
.mu-mob__col-right {
  flex: 1 1 45%;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mu-mob__disc {
  width: calc(48em * var(--mob-disc-scale, 1)); max-width: 100%; aspect-ratio: 1;
  background: var(--mob-disc); border-radius: 50%;
  flex: 0 0 auto;
}
.mu-mob__bottle {
  position: absolute;
  left: 50%; top: 48%;
  height: calc(50em * var(--mob-bottle-scale, 1)); width: auto; max-width: 96%;
  transform: translate(-50%, -50%) rotate(6deg);
  filter: drop-shadow(0 1em 1.4em rgba(0,0,0,.28));
}

/* ── Responsive: stack + scroll on mobile ───────────────── */
@media (max-width: 820px) {
  .mu-mob { min-height: 0; align-items: stretch; }
  .mu-mob__inner {
    flex-direction: column; align-items: center;
    max-width: none; gap: 0; padding: 30px 18px 36px;
  }
  .mu-mob__col-left, .mu-mob__col-right { font-size: 16px; }
  .mu-mob__col-left {
    flex: 1 1 auto; width: 100%; max-width: 100%;
    gap: 16px; align-items: center; text-align: center;
  }
  .mu-mob__head { flex-direction: column; align-items: center; gap: 8px; }
  .mu-mob__logo { width: 78px; }
  .mu-mob__wordmark { text-align: center; }
  .mu-mob__brandname { font-size: 28px; }
  .mu-mob__product { font-size: 48px; }
  .mu-mob__desc { max-width: 44ch; width: 100%; font-size: 16px; }
  .mu-mob__stage-wrap { position: relative; left: auto; bottom: auto; width: min(320px, 82vw); align-self: center; margin: 4px auto; }
  .mu-mob__toggle-row { gap: 12px; }
  .mu-mob__toggle-label { font-size: 22px; }
  .mu-mob__switch { --w: 80px; }
  .mu-mob__stats { width: 100%; max-width: 460px; border-radius: 18px; padding: 18px 22px; gap: 12px; }
  .mu-mob__stat { grid-template-columns: 92px 1fr; gap: 14px; }
  .mu-mob__stat-label { font-size: 14px; }
  .mu-mob__track { height: 7px; }
  .mu-mob__dot { width: 20px; height: 20px; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
  .mu-mob__col-right { flex: 1 1 auto; width: 100%; margin-top: 22px; }
  .mu-mob__disc { width: min(320px, 82vw); }
  .mu-mob__bottle { height: 86%; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-mob__dot, .mu-mob__knob, .mu-mob__lottie { transition: none; }
}

/* ══ Responsive móvil (auditoría responsive) ══════════════════════════ */
@media (max-width: 820px) {
  .mu-mob__product { white-space: normal; font-size: clamp(30px, 11vw, 48px); }
  .mu-mob { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
}