/* =========================================================================
   Ládralo! contact widget — Mungos Animations
   Pixel-faithful poster (inline SVG art) + HTML form overlay positioned by %.
   Native art box: 1107.66 × 538.82  (aspect 2.0558).  All % below derive from
   the SVG coords: x% = X/1107.66·100, y% = Y/538.82·100.
   ========================================================================= */

/* La familia "sans-plomb" se declara una sola vez en shared.css
   (assets/fonts/SansPlomb-CondensedRegular.woff2), del que depende este widget. */
/* Self-hosted Xanti so tags/subtitle/button render correctly even if the Adobe
   Typekit kit is blocked (domain-locked) or absent. The kit family name is
   "xanti-typewriter-variable"; the SVG art asks for "Xanti-TypewriterVF-*",
   which matches neither — the class overrides below re-point it here. */
@font-face {
	font-family: "xanti-typewriter-variable";
	src: url("assets/fonts/xanti-typewriter.woff2") format("woff2");
	font-weight: 400 800;
	font-display: swap;
}

/* ---- Wrapper: fixed aspect + container-query unit for fluid text ---------- */
.mungos-ladralo {
	position: relative;
	width: 100%;
	max-width: var(--ldr-max, 100%);   /* fill the column by default; cap via --ldr-max */
	margin-inline: auto;
	aspect-ratio: 1107.66 / 538.82;
	container-type: inline-size;
	/* brand defaults (overridable from Elementor > Estilo) */
	--ldr-bg: #331900;
	--ldr-bubble: #ffeed1;
	--ldr-title: #fd472e;
	--ldr-field: #edc68e;
	--ldr-label: #331900;
	--ldr-subtitle: #331900;
	--ldr-terms: #753c03;
	--ldr-btn: #c2e535;
	--ldr-btn-text: #003732;
	--ldr-btn-stroke: #00330b;
}

/* ---- Layer 1: decorative art (inline SVG) -------------------------------- */
.ladralo-art {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.ladralo-art svg {
	width: 100%;
	height: 100%;
	display: block;
}
/* Wire the editable brand colors to the baked SVG classes (higher specificity
   than the SVG's own <style>, so the Elementor color controls win). */
.mungos-ladralo .ladralo-art .cls-10 { fill: var(--ldr-bg); }
.mungos-ladralo .ladralo-art .cls-21 { fill: var(--ldr-bubble); }
.mungos-ladralo .ladralo-art .cls-19 {
	fill: var(--ldr-title);
	font-family: "sans-plomb", "SansPlomb-CondensedRegular", "Oswald", "Arial Narrow", sans-serif;
}
/* Re-point the 6 tag labels (baked as Xanti-TypewriterVF-ExtraBold) to the real
   loaded family, ExtraBold + upright (no italic). */
.mungos-ladralo .ladralo-art .cls-1,
.mungos-ladralo .ladralo-art .cls-4,
.mungos-ladralo .ladralo-art .cls-5,
.mungos-ladralo .ladralo-art .cls-6,
.mungos-ladralo .ladralo-art .cls-7 {
	font-family: "xanti-typewriter-variable", "Arial Narrow", sans-serif;
	font-weight: 800;
	font-style: normal;
	font-variation-settings: 'wght' 800;
}

/* ---- Tags: wiggle on HOVER (peak angles copied from ladra.json) ----------- */
.ladralo-art { pointer-events: none; }        /* let the cursor reach the dog/parallax… */
.ladralo-art .mu-tag {
	transform-box: fill-box;
	transform-origin: center;
	pointer-events: auto;                       /* …but the tags are hoverable */
	cursor: pointer;
}
.ladralo-art .mu-tag:hover { animation: mu-tag-pop 0.55s ease-in-out; }
@keyframes mu-tag-pop {
	0%   { transform: rotate(0deg); }
	35%  { transform: rotate(var(--peak, 12deg)); }
	65%  { transform: rotate(calc(var(--peak, 12deg) * -0.35)); }
	85%  { transform: rotate(calc(var(--peak, 12deg) * 0.14)); }
	100% { transform: rotate(0deg); }
}
.ladralo-art .mu-tag--saludito    { --peak: -20deg; }
.ladralo-art .mu-tag--dudas       { --peak: 12deg; }
.ladralo-art .mu-tag--chismecitos { --peak: 13.7deg; }
.ladralo-art .mu-tag--alianzas    { --peak: 9.6deg; }
.ladralo-art .mu-tag--negocios    { --peak: -31.5deg; }
.ladralo-art .mu-tag--sugerencias { --peak: 17.1deg; }

/* ---- White squiggles ("pelos blancos"): parallax with the cursor (JS) ----- */
.ladralo-art .mu-squiggle {
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.ladralo-art .mu-tag:hover { animation: none; }
	.ladralo-art .mu-squiggle { transform: none !important; }
}

/* ---- Layer 2: Lottie dog — its OWN animation (nose + every fur strand + head
   inclination) is tied to the cursor by scrubbing the playhead in JS. The band
   is the original clipRect (661×218.73); the 474×293 doggy canvas is placed at
   scale 1.0 with the measured offset (+135, −61) so the dog lands exactly where
   the design's clipRect dog sits. overflow:hidden crops the dark canvas top. */
.ladralo-dog {
	position: absolute;
	left: 16.847%;    /* 186.6 / 1107.66 */
	top: 59.381%;     /* 319.96 / 538.82 */
	width: 59.677%;   /* 661.01 / 1107.66 */
	height: 40.594%;  /* 218.73 / 538.82 */
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}
.ladralo-dog__inner {
	position: absolute;
	left: 20.48%;     /* +135.4 / 661.01 */
	top: -27.98%;     /* −61.2 / 218.73 */
	width: 71.71%;    /* 474 / 661.01 */
	height: 133.96%;  /* 293 / 218.73 */
}
.ladralo-dog__inner svg { width: 100%; height: 100%; display: block; }

/* ---- Layer 3: real form overlay ------------------------------------------ */
.ladralo-form {
	position: absolute;
	inset: 0;
	z-index: 3;
	margin: 0;
	pointer-events: none;   /* let mousemove reach the wrapper; children re-enable */
}
.ladralo-form > * { pointer-events: auto; }

/* Subtitle (Xanti Regular italic) */
.ladralo-subtitle {
	position: absolute;
	left: 31.944%;    /* 353.83 */
	top: 24.0%;       /* baseline 140.98 */
	width: 40%;
	margin: 0;
	color: var(--ldr-subtitle);
	font-family: "xanti-typewriter-variable", monospace;
	font-weight: 400;
	font-style: italic;
	font-size: 0.9027cqw;  /* 10px */
	line-height: 1.2;
}

/* Fields — absolute boxes matching the trigo rects */
.ladralo-field {
	position: absolute;
	display: block;
	margin: 0;
}
.ladralo-field input,
.ladralo-field textarea {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: var(--ldr-field);
	border: 0;
	color: var(--ldr-label);
	font-family: "Fredoka", system-ui, sans-serif;
	font-weight: 400;
	font-size: 1.0554cqw;  /* 11.69px */
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}
.ladralo-field input { padding: 0 1.255cqw; }          /* 13.9px left inset */
.ladralo-field textarea {
	padding: 1.4cqw 1.255cqw;
	resize: none;
	line-height: 1.25;
}
.ladralo-field input::placeholder,
.ladralo-field textarea::placeholder {
	color: var(--ldr-label);
	opacity: .55;
}
.ladralo-field input:focus-visible,
.ladralo-field textarea:focus-visible {
	box-shadow: 0 0 0 0.2cqw color-mix(in srgb, var(--ldr-btn-stroke) 55%, transparent);
}

.ladralo-field--name  { left: 26.876%; top: 33.091%; width: 22.351%; height: 4.680%; }
.ladralo-field--name  input { border-radius: 0.705cqw; }   /* rx 7.81 */
.ladralo-field--email { left: 50.0%;   top: 33.169%; width: 22.231%; height: 4.680%; }
.ladralo-field--email input { border-radius: 0.702cqw; }   /* rx 7.78 */
.ladralo-field--msg   { left: 26.876%; top: 39.483%; width: 45.356%; height: 20.402%; }
.ladralo-field--msg   textarea { border-radius: 0.914cqw; } /* rx 10.13 */

/* Terms line (Fredoka, under the message box) */
.ladralo-terms {
	position: absolute;
	left: 54.13%;     /* 599.52 */
	top: 57.2%;       /* baseline 313.89 */
	width: 20%;
	margin: 0;
	color: var(--ldr-terms);
	font-family: "Fredoka", system-ui, sans-serif;
	font-weight: 400;
	font-size: 0.5534cqw;  /* 6.13px */
	line-height: 1.15;
}
.ladralo-terms a { color: inherit; text-decoration: underline; }

/* Submit button "HABLEMOS!" — Xanti ExtraBold, upright (no italic) */
.ladralo-submit {
	position: absolute;
	left: 46.187%;    /* 511.6 */
	top: 61.339%;     /* 330.5 */
	width: 6.733%;    /* 74.58 */
	height: 3.786%;   /* 20.4 */
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: var(--ldr-btn);
	border: 0.06cqw solid var(--ldr-btn-stroke);  /* .66px */
	border-radius: 9999px;
	color: var(--ldr-btn-text);
	font-family: "xanti-typewriter-variable", monospace;
	font-weight: 800;
	font-style: normal;
	font-size: 0.9027cqw;  /* 10px */
	letter-spacing: .01em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0.151cqw 0.151cqw 0 var(--ldr-btn-stroke);  /* 1.67px hard shadow */
	transition: transform .12s ease, box-shadow .12s ease;
}
.ladralo-submit:hover {
	transform: translate(-0.05cqw, -0.05cqw);
	box-shadow: 0.22cqw 0.22cqw 0 var(--ldr-btn-stroke);
}
.ladralo-submit:active {
	transform: translate(0.08cqw, 0.08cqw);
	box-shadow: 0.05cqw 0.05cqw 0 var(--ldr-btn-stroke);
}
.ladralo-submit[disabled] { opacity: .6; cursor: default; }

/* ── Blindaje anti-tema ─────────────────────────────────────────────────────
   Algunos temas / WooCommerce pintan un :hover/:focus FUCSIA en botones e inputs.
   Forzamos los colores de marca por encima (mayor especificidad + !important) SIN
   tocar la micro-animación (transform/box-shadow siguen en .ladralo-submit:hover). */
.mungos-ladralo .ladralo-submit,
.mungos-ladralo .ladralo-submit:hover,
.mungos-ladralo .ladralo-submit:focus,
.mungos-ladralo .ladralo-submit:focus-visible,
.mungos-ladralo .ladralo-submit:active {
	background: var(--ldr-btn) !important;
	color: var(--ldr-btn-text) !important;
	border-color: var(--ldr-btn-stroke) !important;
}
.mungos-ladralo .ladralo-field input,
.mungos-ladralo .ladralo-field textarea,
.mungos-ladralo .ladralo-field input:hover,
.mungos-ladralo .ladralo-field textarea:hover,
.mungos-ladralo .ladralo-field input:focus,
.mungos-ladralo .ladralo-field textarea:focus,
.mungos-ladralo .ladralo-field input:focus-visible,
.mungos-ladralo .ladralo-field textarea:focus-visible {
	background: var(--ldr-field) !important;
	color: var(--ldr-label) !important;
	border-color: transparent !important;
	outline: none !important;   /* el anillo de foco lo da el box-shadow de marca */
}

/* Status line (below the button). Prefijado con .mungos-ladralo (0,2,0) para que
   un CSS combinado viejo de LiteSpeed no lo tire al pie por orden a igual
   especificidad — ver nota de "CSS rancio pisa producción". */
.mungos-ladralo .ladralo-status {
	position: absolute;
	left: 26.876%;
	top: 66.5%;
	width: 45.356%;
	margin: 0;
	font-family: "Fredoka", system-ui, sans-serif;
	font-weight: 500;
	font-size: 0.85cqw;
	line-height: 1.2;
	text-align: left;
}
.mungos-ladralo .ladralo-status.is-ok  { color: var(--ldr-btn-stroke); }
.mungos-ladralo .ladralo-status.is-err { color: var(--ldr-title); }

/* Honeypot — visually and semantically hidden */
.ladralo-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* SR-only labels */
.mungos-ladralo .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* =========================================================================
   Mobile "stack" mode — the pixel-perfect absolute overlay is unusable on
   narrow screens, so below 640px the form flows vertically on the brand bg.
   ========================================================================= */
@media (max-width: 640px) {
	.mungos-ladralo {
		aspect-ratio: auto;
		background: var(--ldr-bg);
		border-radius: 4vw;
		padding: 6vw 5vw 0;      /* sin padding abajo: el perro pega al borde inferior café */
		container-type: normal;
		display: flex; flex-direction: column;   /* columna: permite ordenar perro/formulario */
	}
	.ladralo-art { display: none; }   /* la escena decorativa (burbuja/tags) se oculta en móvil */

	/* El perro Lottie SÍ va en móvil, DEBAJO del formulario y centrado. Se anima
	   SOLO (sin seguir el cursor) por la rama noHover del JS de ladralo-form.js.
	   Reencuadre al canvas COMPLETO del perro (474×293), sin el "band" que lo
	   recorta en desktop → se ve el perrito asomándose entero. */
	.mungos-ladralo .ladralo-dog {
		display: block; position: relative; left: auto; top: auto;
		width: 80%; height: auto; aspect-ratio: 474 / 293;
		margin: 5vw auto 0; overflow: visible; order: 2;
	}
	.mungos-ladralo .ladralo-dog__inner {
		position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	}

	.ladralo-form {
		position: static;
		inset: auto;
		display: flex;
		flex-direction: column;
		gap: 3.5vw;
		pointer-events: auto;
		order: 1;                 /* formulario primero; el perro va debajo (order 2) */
	}
	.ladralo-form::before {
		content: "Ládralo!";
		font-family: "sans-plomb", "Oswald", sans-serif;
		font-weight: 400;
		font-size: 13vw;
		line-height: 1;
		color: var(--ldr-title);
	}

	.mungos-ladralo .ladralo-subtitle,
	.mungos-ladralo .ladralo-field,
	.mungos-ladralo .ladralo-terms,
	.mungos-ladralo .ladralo-submit,
	.mungos-ladralo .ladralo-status {
		position: static;
		left: auto; top: auto;
		width: 100%;
		height: auto;
	}
	.ladralo-subtitle {
		color: var(--ldr-bubble);
		font-size: 4vw;
		line-height: 1.3;
	}
	.ladralo-field input  { height: 12vw; padding: 0 4vw; border-radius: 3vw; font-size: 16px; }
	.ladralo-field textarea { height: 34vw; padding: 3.5vw 4vw; border-radius: 3vw; font-size: 16px; }
	.ladralo-terms { color: var(--ldr-bubble); opacity: .8; font-size: 3.2vw; }
	.ladralo-submit {
		align-self: flex-start;
		width: auto;
		min-width: 40vw;
		height: auto;
		padding: 3.5vw 8vw;
		border-width: 1.5px;
		font-size: 4.6vw;
		box-shadow: 4px 4px 0 var(--ldr-btn-stroke);
	}
	.mungos-ladralo .ladralo-status { font-size: 4vw; text-align: left; }
}

/* Respect reduced-motion for the button micro-interaction */
@media (prefers-reduced-motion: reduce) {
	.ladralo-submit { transition: none; }
}

/* ══ Responsive móvil (auditoría responsive) ══════════════════════════ */
@media (max-width: 640px) {
  .ladralo-field textarea { height: auto; min-height: 120px; }
}