/* =========================================================================
   Mungos Banner — Recurso 12 (all-vector) as an Elementor widget.
   Native art box: 1037.31 × 422.95. The teal background is CSS; the SVG holds
   the scattered shapes + face-icons, each wrapped as a .mu-unit that drifts with
   the cursor by its own data-depth (faces move most) for a lively parallax.
   ========================================================================= */
.mungos-banner {
	position: relative;
	width: 100%;
	max-width: var(--bnr-max, 100%);   /* full-width by default */
	margin-inline: auto;
	aspect-ratio: 1080.13 / 444.92;
	line-height: 0;
}
.mungos-banner .mungos-banner-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
/* The teal background (with the diagonal cut) lives in the SVG; editable colour. */
.mungos-banner .mungos-banner-svg .bnr-21 { fill: var(--bnr-bg, #4dacb8); }

/* Parallax units — JS sets the transform each frame (pivot at each unit centre). */
.mungos-banner .mu-unit {
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.mungos-banner .mu-unit { transform: none !important; }
}

/* ══ Responsive móvil ═════════════════════════════════════════════════
   El banner es horizontal (2.43:1). A su ratio natural es una FRANJA DELGADA
   (~154px) → "se ve mal". En móvil lo mostramos como banda ALTA.

   El reto: subir ALTURA sin AGRANDAR el "mungos" (con cover puro, más alta =
   wordmark más grande, y se pidió lo contrario). Solución = COVER SÓLO EN
   HORIZONTAL + relleno teal en vertical:
     · width: --bnr-art (162% del ancho) → el SVG desborda a los lados y se
       recorta (cover horizontal). Esto FIJA el tamaño del "mungos" (~288px),
       independiente de la altura de la banda.
     · height: auto → el SVG queda a su alto natural para ese ancho (~250px).
     · la banda (aspect-ratio) puede ser MÁS ALTA que eso; el aire de arriba/
       abajo lo rellena el mismo teal (#4dacb8) sin costura, porque el fondo del
       propio SVG (.bnr-21) ya se desborda del viewBox en teal.
   Así: "más alta en general" (subir el ratio) SIN tocar el tamaño del mungos
   (subir --bnr-art lo agranda; bajarlo lo achica). */
@media (max-width: 767px) {
  .mungos-banner {
    aspect-ratio: 6 / 5 !important; height: auto !important; min-height: 0 !important; /* banda más alta */
    overflow: hidden;
    background: var(--bnr-bg, #4dacb8);          /* rellena el aire vertical, sin costura */
    display: grid; place-items: center;
  }
  .mungos-banner .mungos-banner-svg {
    position: static; inset: auto; top: auto; left: auto;
    width: var(--bnr-art, 162%); height: auto;   /* cover horizontal: fija el tamaño del "mungos" */
    transform: none;
  }
}