/* ============================================================
   Footer Mungos
   A full brand footer: content columns on top, brand figures
   raining in at the bottom. Colours are driven by CSS vars set
   from Elementor controls (--foot-*, --fig-*).
   ============================================================ */

.mu-foot {
	--foot-bg:       #331900;
	--foot-text:     #ffeed1;   /* cream: titles, body, news title, subtitle, policies, nav hover */
	--foot-nav:      #4dacb8;   /* teal-med: nav links (normal) */
	--foot-arrow:    #fd472e;   /* red hover/active arrow */
	--foot-logo:     #ffeed1;
	--foot-input:    #4dacb8;   /* solid teal input pill */
	--foot-btn-bg:   #c2e535;   /* lime button */
	--foot-btn-text: #003732;   /* dark green: button + input text */
	--foot-dur:      1.7s;

	--foot-display: "custard", "Fredoka", system-ui, sans-serif;
	--foot-mono:    "xanti-typewriter-variable", ui-monospace, "Courier New", monospace;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	container-type: inline-size;
	background: var(--foot-bg);
	color: var(--foot-text);
	font-family: var(--foot-mono);
	width: 100%;
}

/* ── Fix del "bloque rojo / espacio fantasma" del footer en móvil ──────────
   Causa REAL (no el color): la SECCIÓN de Elementor que envuelve el footer es
   flex-column, y eso —combinado con el `container-type: inline-size` del
   .mu-foot (que usa unidades cqw)— dispara un bug de container-query + flexbox:
   el navegador renderiza el widget ~760px MÁS ALTO que su contenido SOLO en
   móvil, dejando un hueco. Ese hueco mostraba el fondo rojo (#EE1C1C) que quedó
   como placeholder en el editor. Forzar la sección a display:block elimina el
   hueco (con un solo hijo, block y flex-column se ven idénticos). Además dejamos
   el fondo oscuro del footer por si el editor conserva el rojo.
   IMPORTANTE: el PADRE directo del widget footer es `.e-con-inner` (contenedor
   interno de Elementor), que NO lleva la clase `.elementor-element` → el selector
   viejo (solo .elementor-element) NO matcheaba y el hueco volvía. Cubrimos AMBOS
   (e-con-inner actual + elementor-element por compatibilidad). Verificado en vivo:
   colapsa el wrapper de 2110px→1341px (el alto real del contenido). */
.elementor-element:has(> .elementor-widget-mungos-footer),
.e-con-inner:has(> .elementor-widget-mungos-footer) {
	display: block !important;
	background-color: #331900 !important;
}
/* Per Recurso 5: nav, newsletter (title/subtitle/policies) and the form are
   italic; the middle info column (Contacto/Planta/Puntos) is upright, and the
   logo + watermark are upright. */
.mu-foot__nav a,
.mu-foot__news-title,
.mu-foot__news-sub,
.mu-foot__policies a,
.mu-foot__basic input,
.mu-foot__basic button { font-style: italic; }

/* ── Watermark ─────────────────────────────────────────────── */
.mu-foot__wm {
	position: absolute;
	left: 56%;
	top: 46%;
	transform: translate(-50%, -50%);
	z-index: 0;
	margin: 0;
	font-family: var(--foot-display);
	font-style: normal;   /* watermark upright */
	font-weight: 900;
	font-size: clamp(8rem, 30cqw, 26rem);
	line-height: .8;
	letter-spacing: -.02em;
	color: var(--foot-text);
	opacity: .07;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.mu-foot__wm--img { line-height: 0; }
.mu-foot__wm img { display: block; width: 72cqw; height: auto; max-width: none; }

/* ── Layout ────────────────────────────────────────────────── */
.mu-foot__inner {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	margin: 0 auto;
	/* bottom clears the full-width figure composition (height ≈ width / 4.42) */
	padding: 72px clamp(20px, 6vw, 90px) calc(22.6cqw + 34px);
	display: grid;
	grid-template-columns: minmax(150px, .85fr) 1.15fr 1.35fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

.mu-foot__col { min-width: 0; }

/* ── Column 1: brand + nav ─────────────────────────────────── */
.mu-foot__logo {
	display: inline-block;
	text-decoration: none;
	line-height: 1;
}
.mu-foot__logo img {
	display: block;
	max-width: 200px;
	height: auto;
}
.mu-foot__wordmark {
	font-family: var(--foot-display);
	font-style: normal;   /* logo wordmark stays upright */
	font-weight: 900;
	font-size: clamp(2rem, 3vw, 2.9rem);
	color: var(--foot-logo);
	letter-spacing: -.01em;
}

.mu-foot__nav ul {
	list-style: none;
	margin: 1.6em 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .35em;
}
.mu-foot__nav a {
	font-family: var(--foot-mono);
	font-weight: 600;
	font-size: clamp(1.15rem, 1.5vw, 1.55rem);
	color: var(--foot-nav);
	text-decoration: none;
	transition: color .16s ease;
}
.mu-foot__nav a:hover,
.mu-foot__nav li.is-active a { color: var(--foot-text); }
/* red arrow appears only on hover / active item (and pushes the text right) */
.mu-foot__nav a:hover::before,
.mu-foot__nav li.is-active a::before {
	content: "\25BA";
	color: var(--foot-arrow);
	font-size: .7em;
	margin-right: .4em;
	vertical-align: middle;
}

/* ── Column 2: info blocks ─────────────────────────────────── */
.mu-foot__info { display: flex; flex-direction: column; gap: 1.4em; }
.mu-foot__block-title {
	margin: 0 0 .35em;
	font-family: var(--foot-mono);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: .01em;
	color: var(--foot-text);
}
.mu-foot__note {
	display: inline-block;
	font-weight: 400;
	font-size: .82em;
	opacity: .82;
}
.mu-foot__block-body {
	font-weight: 500;
	font-size: .92rem;
	line-height: 1.7;
	opacity: .92;
}
.mu-foot__block-body a { color: var(--foot-text); text-decoration: none; }
.mu-foot__block-body a:hover { text-decoration: underline; }

/* ── Column 3: newsletter ──────────────────────────────────── */
.mu-foot__news-title {
	margin: 0 0 .3em;
	font-family: var(--foot-mono);
	font-weight: 600;   /* Xanti DemiBold */
	font-size: clamp(1.7rem, 2.3vw, 2.3rem);
	line-height: 1.02;
	color: var(--foot-text);
}
.mu-foot__news-sub {
	margin: 0 0 1.1em;
	max-width: 30em;
	font-weight: 500;   /* Xanti Medium */
	font-size: .92rem;
	line-height: 1.6;
	opacity: .92;
}

/* Fallback / basic form + a shared look for Elementor forms inside */
.mu-foot__basic {
	display: flex;
	align-items: center;
	max-width: 30em;
	background: var(--foot-input);
	border: 0;
	border-radius: 999px;
	padding: 3px 3px 3px 4px;
}
.mu-foot__basic input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--foot-btn-text);
	font-family: var(--foot-mono);
	font-weight: 400;   /* Xanti Book (light) */
	font-size: .9rem;
	padding: .5em .9em;
}
.mu-foot__basic input::placeholder { color: var(--foot-btn-text); opacity: .7; }
.mu-foot__basic button {
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	background: var(--foot-btn-bg);
	color: var(--foot-btn-text);
	font-family: var(--foot-mono);
	font-weight: 800;   /* Xanti ExtraBold */
	font-size: .8rem;
	letter-spacing: .01em;
	padding: .65em 1.3em;
	cursor: pointer;
	transition: filter .18s ease;
}
.mu-foot__basic button:hover { filter: brightness(1.08); }
.mu-foot__hint {
	margin: .6em 0 0;
	font-size: .78rem;
	opacity: .7;
	font-style: italic;
}

/* Policy links */
.mu-foot__policies {
	list-style: none;
	margin: 1.4em 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .25em;
}
.mu-foot__policies a {
	font-weight: 500;   /* Xanti Medium */
	font-size: .9rem;
	color: var(--foot-text);
	text-decoration: none;
	transition: color .18s ease;
}
.mu-foot__policies a::before {
	content: "\2022";
	color: var(--foot-text);
	margin-right: .5em;
	font-weight: 700;
}
.mu-foot__policies a:hover { color: var(--foot-nav); }

/* ── Figures layer (spans the whole footer so they fall from the top,
   across the text, and settle into the composition at the bottom) ──── */
.mu-foot__figs {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: visible;
	pointer-events: none;
	line-height: 0;
}
.mu-foot__figsvg {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	display: block;
	overflow: visible; /* let figures render above the viewBox while falling */
}
.mu-foot__figsvg > g > * {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

/* Armed by JS = held above the footer until it scrolls into view.
   --drop (set per-footer by JS, viewBox units) makes the on-screen travel
   equal the footer height, so the figures enter from above the top edge,
   fall with a gravity-like ease-in through the text, and land. */
.mu-foot__figs.is-armed .mu-foot__figsvg > g > * { opacity: 0; }
.mu-foot__figs.is-falling .mu-foot__figsvg > g > * {
	/* per-keyframe easing does the work → keep the shorthand linear */
	animation: mu-foot-drop var(--foot-dur, 1.7s) linear both;
}
.mu-foot--bounce .mu-foot__figs.is-falling .mu-foot__figsvg > g > * {
	animation-name: mu-foot-drop-bounce;
}

/* Gravity-like accelerating fall, soft landing (no bounce) */
@keyframes mu-foot-drop {
	0%   { opacity: 0; transform: translateY(calc(var(--drop, 760) * -1px)); animation-timing-function: cubic-bezier(.38, 0, .5, 1); }
	12%  { opacity: 1; }
	100% { opacity: 1; transform: translateY(0); }
}
/* Accelerating fall → decelerating settle with a soft double bounce */
@keyframes mu-foot-drop-bounce {
	0%   { opacity: 0; transform: translateY(calc(var(--drop, 760) * -1px)); animation-timing-function: cubic-bezier(.5, 0, .72, .45); }
	12%  { opacity: 1; }
	62%  { transform: translateY(0);    animation-timing-function: cubic-bezier(.33, 0, .35, 1); }
	74%  { transform: translateY(-11%); animation-timing-function: ease-in; }   /* rebound up */
	85%  { opacity: 1; transform: translateY(0);    animation-timing-function: cubic-bezier(.33, 0, .35, 1); }
	93%  { transform: translateY(-4%);  animation-timing-function: ease-in; }   /* smaller second bounce */
	100% { opacity: 1; transform: translateY(0); }
}

/* ── Accessibility: visible keyboard focus ─────────────────── */
.mu-foot a:focus-visible,
.mu-foot__basic input:focus-visible,
.mu-foot__basic button:focus-visible {
	outline: 2px solid var(--foot-nav);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Responsive ────────────────────────────────────────────── */
/* Touch devices (tablet + phone): 44px targets, no iOS input zoom */
@media (max-width: 900px) {
	.mu-foot__inner {
		grid-template-columns: 1fr 1fr;
		gap: 32px 28px;
	}
	.mu-foot__news { grid-column: 1 / -1; }

	.mu-foot__nav ul { gap: 4px; }
	.mu-foot__nav a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;      /* touch target */
	}
	.mu-foot__policies { gap: 4px; }
	.mu-foot__policies a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.mu-foot__basic { padding: 5px 5px 5px 8px; }
	.mu-foot__basic input {
		font-size: 16px;        /* ≥16px stops iOS auto-zoom on focus */
		padding: .7em .9em;
	}
	.mu-foot__basic button {
		min-height: 44px;
		padding: .8em 1.35em;
	}
}
/* Phones: single column + readable body text (≥16px) + centred watermark */
@media (max-width: 600px) {
	.mu-foot__inner { grid-template-columns: 1fr; }
	.mu-foot__block-body,
	.mu-foot__news-sub,
	.mu-foot__policies a { font-size: 1rem; line-height: 1.65; }
	.mu-foot__block-title { font-size: 1.05rem; }
	.mu-foot__wm { left: 50%; font-size: clamp(3.5rem, 34cqw, 9rem); }
}

/* ── Accessibility: reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.mu-foot__figs.is-armed .mu-foot__figsvg > g > * { opacity: 1; }
	.mu-foot__figs.is-falling .mu-foot__figsvg > g > * { animation: none; }
}

/* ══ Responsive móvil (auditoría responsive) ══════════════════════════ */
@media (max-width: 600px) {
  .mu-foot__figsvg { min-height: 110px; height: auto; }
  .mu-foot__wm { white-space: normal; text-align: center; max-width: 92%; }
}