@charset "UTF-8";
/**
 * Valores Mungos — "Lo que NOS MUEVE"
 * Sección hero full-bleed: SVG de figuras de marca (quietas, sin solaparse),
 * título condensado + círculo mint, y píldoras de valores con LATIDO.
 * Todo escala con el ancho de la sección (unidades cqw). Todo configurable
 * por variables CSS que Elementor setea en .mu-vw.
 */

/* ══ FIX colapso en DESKTOP (la sección salía VACÍA, solo figuras) ══════════
   .mu-vw usa `container-type: inline-size` (para las unidades cqw de las pills).
   Su contenedor de Elementor es flex-column con `align-items: center` (no stretch),
   y ahí un elemento container-query NO aporta ancho intrínseco → el flex COLAPSA el
   widget a 0 de ancho → el stage queda 0×0 → el IntersectionObserver nunca lo ve
   "visible" → la animación de entrada NO dispara → las pastillas se quedan en
   opacity:0 (por eso NO cargaban en producción desktop). Forzar el ancho del widget
   a 100% evita el colapso: el stage se dimensiona, la entrada dispara y las pills
   aparecen POSICIONADAS. (En móvil el widget ya es full-width, así que es inocuo.) */
.elementor-widget-mungos-values-wall { width: 100%; }

.mu-vw {
  /* --- variables configurables (defaults del diseño aprobado) --- */
  --vw-bg: #00AEBA;
  --vw-ink: #331900;
  --vw-aspect: 2.093;
  --vw-shapes-op: 1;
  --vw-shapes-op-mobile: 0.16;
  --vw-condense: 0.78;

  --vw-big-fs: 8.4cqw;
  --vw-small-fs: 1.95cqw;

  --vw-circle: #00F0D8;
  --vw-circle-x: 61.5%;
  --vw-circle-y: 46.8%;
  --vw-circle-size: 8.3cqw;

  --vw-pill-fs: 1.22cqw;
  --vw-pill-bw: 0.11cqw;
  --vw-pill-shadow: 0.3cqw;
  --vw-pill-padx: 0.8cqw;
  --vw-pill-pady: 0.52cqw;

  /* colores de las figuras del SVG (recoloreables) */
  --vw-f1: #053F39;   /* verde oscuro */
  --vw-f2: #6BEDD9;   /* menta */
  --vw-f3: #FFEED1;   /* crema */
  --vw-f4: #331900;   /* marrón */
  --vw-f6: #F4E187;   /* carita amarilla */

  position: relative;
  width: 100%;
  aspect-ratio: var(--vw-aspect);
  margin: 0;
  background: var(--vw-bg);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
}

/* figuras */
.mu-vw__shapes { position: absolute; inset: 0; z-index: 1; opacity: var(--vw-shapes-op); }
.mu-vw__shapes > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mu-vw .figw { transform-box: fill-box; transform-origin: center; will-change: transform, opacity; }
.mu-vw .fig  { will-change: transform, opacity; transform-box: fill-box; transform-origin: center; }

/* fills de las figuras (por clase del SVG -> variable) */
.mu-vw__shapes .cls-1 { fill: var(--vw-f1); }
.mu-vw__shapes .cls-2 { fill: var(--vw-f2); }
.mu-vw__shapes .cls-3 { fill: var(--vw-f3); }
.mu-vw__shapes .cls-4 { fill: var(--vw-f4); }
.mu-vw__shapes .cls-5 { fill: none; }
.mu-vw__shapes .cls-6 { fill: var(--vw-f6); }

/* título */
.mu-vw__title { position: absolute; left: 50%; top: 47.5%; transform: translate(-50%, -50%); z-index: 3; text-align: left; pointer-events: none; }
.mu-vw__small { display: block; font-family: "Fredoka", system-ui, sans-serif; font-weight: 500; font-size: var(--vw-small-fs); color: var(--vw-ink); margin: 0 0 0.55cqw 7%; }
.mu-vw__bigwrap { position: relative; display: inline-block; font-family: "Anton", "Arial Narrow", sans-serif; font-weight: 400; font-size: var(--vw-big-fs); line-height: 0.86; }
.mu-vw__big { display: block; font-size: 1em; letter-spacing: 0.01em; text-transform: uppercase; color: var(--vw-ink); white-space: nowrap; transform: scaleX(var(--vw-condense)); transform-origin: 50% 50%; will-change: transform, opacity; }

/* círculo detrás del título */
.mu-vw__circle { position: absolute; left: var(--vw-circle-x); top: var(--vw-circle-y); width: var(--vw-circle-size); height: var(--vw-circle-size); border-radius: 50%; background: var(--vw-circle); z-index: 2; will-change: transform; pointer-events: none; }

/* píldoras */
.mu-vw__pills { position: absolute; inset: 0; z-index: 4; }
.mu-vw__pill { position: absolute; transform: translate(-50%, -50%); text-decoration: none; }
.mu-vw__pill-rot { display: block; will-change: transform; }
.mu-vw__pill-in {
  display: inline-block;
  padding: var(--vw-pill-pady) var(--vw-pill-padx);
  border: var(--vw-pill-bw) solid var(--vw-pc);
  border-radius: 999px;
  background: var(--vw-pb);
  color: var(--vw-pc);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 900;
  font-size: var(--vw-pill-fs);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  line-height: 1.05;
  text-align: center;
  box-shadow: 0 var(--vw-pill-shadow) 0 var(--vw-pc);
  will-change: transform, filter, box-shadow;
  transition: box-shadow 0.25s ease, filter 0.25s ease;
  cursor: default;
}
a.mu-vw__pill, a.mu-vw__pill .mu-vw__pill-in { cursor: pointer; }
.mu-vw__pill:focus-visible .mu-vw__pill-in { outline: 3px solid #fff; outline-offset: 3px; }

/* estado inicial (oculto hasta que el JS anima la entrada) */
.mu-vw--pre .fig,
.mu-vw--pre .mu-vw__pill,
.mu-vw--pre .mu-vw__small,
.mu-vw--pre .mu-vw__big,
.mu-vw--pre .mu-vw__circle { opacity: 0; }

/* ── MÓVIL: título arriba + pastillas en lista envuelta + figuras como textura de fondo ── */
@media (max-width: 720px) {
  .mu-vw {
    aspect-ratio: auto;
    height: auto;
    min-height: auto;   /* antes 82vh → dejaba un vacío teal enorme arriba/abajo
                           (contenido centrado en un alto fijo). Ahora la sección
                           abraza su contenido. */
    margin-top: 52px;   /* separa NOS MUEVE del timeline: sin esto el título choca
                           con la barra de años "2012…2026" (la sección viene con
                           margen negativo que en móvil las encima). */
    padding: 44px 16px 50px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .mu-vw__shapes { opacity: var(--vw-shapes-op-mobile); }
  /* left/top:auto = RESET obligatorio: la regla desktop pone left:50% top:47.5%
     (para el centrado absoluto); al pasar a position:relative en móvil esos
     valores SEGUÍAN aplicando y corrían el título 50% a la derecha (se salía) y
     47.5% hacia abajo (caía encima de las pastillas). Con auto, el título fluye
     normal: centrado y ARRIBA de las pastillas. */
  .mu-vw__title { position: relative; left: auto; top: auto; transform: none; text-align: center; margin: 0 auto 26px; z-index: 3; }
  /* Círculo detrás del título como HALO centrado (antes en left:62%/top:56% se
     encimaba y "chocaba" con las letras). Queda detrás (z-index:-1). */
  .mu-vw__title::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: min(62vw, 210px); aspect-ratio: 1;
    border-radius: 50%; background: var(--vw-circle);
    transform: translate(-50%, -50%); z-index: -1;
  }
  .mu-vw__small { font-size: clamp(15px, 4.6vw, 21px); margin: 0 0 2px 0; }
  .mu-vw__bigwrap { font-size: clamp(44px, 14vw, 64px); }
  .mu-vw__big { white-space: normal; }
  .mu-vw__circle { display: none; }
  .mu-vw__pills {
    position: static; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 12px 10px; max-width: 330px; margin: 0 auto; padding: 0 4px; z-index: 4;
  }
  .mu-vw__pill {
    position: static; transform: none; min-height: 44px; max-width: 100%;
    display: flex; align-items: center;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  /* max-width + wrap: ninguna pastilla se sale del borde; los COLORES vienen del
     widget (--vw-pb/--vw-pc por pastilla), no se tocan. */
  .mu-vw__pill-in { max-width: 100%; white-space: normal; padding: 10px 15px; border-width: 2px; font-size: clamp(11px, 3.4vw, 12.5px); box-shadow: 0 3px 0 var(--vw-pc); }
}
@media (max-width: 400px) {
  .mu-vw__pills { gap: 11px 9px; }
  .mu-vw__pill-in { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mu-vw__pill-in { transition: none; }
}

/* ══ Responsive móvil (auditoría responsive) ══════════════════════════ */
@media (max-width: 720px) {
  .mu-vw__shapes > svg { height: auto; }
}