/* =========================================================================
   Testimonios Mungos — collage calcado del Recurso 4. Todo el escenario usa
   unidades cqw (container query width) para escalar como una unidad, igual que
   el SVG original. En móvil se apila (layout de flujo).
   ========================================================================= */
@font-face {
	font-family: "mungos-custard";
	src: url("../../assets/fonts/custard.woff2") format("woff2");
	font-weight: 400 800;
	font-display: swap;
}

.mu-tst {
	position: relative;
	background: #3B2410;
	padding: clamp(18px, 2.5vw, 36px) clamp(10px, 2vw, 28px);
	overflow: hidden;
	box-sizing: border-box; /* el padding cuenta dentro del ancho (necesario para el modo pantalla completa) */
}
/* Pantalla completa: rompe el contenedor de Elementor y ocupa 100vw (banda borde a borde). */
.mu-tst.is-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.mu-tst__inner { max-width: 100%; margin-inline: auto; } /* llena la sección; el control «Ancho máximo» puede acotarlo */

/* ── Escenario (relación de aspecto del viewBox original) ─────────────── */
.mu-tst__stage {
	position: relative;
	aspect-ratio: 1107.66 / 576.34;
	container-type: inline-size;
	margin: 0 auto;
}

/* ── Cabecera (centrada arriba) ───────────────────────────────────────── */
.mu-tst__head { position: absolute; top: 1.5%; left: 50%; transform: translateX(-50%); width: 92%; text-align: center; z-index: 2; }
.mu-tst__title {
	font-family: "mungos-custard", "Fredoka", system-ui, sans-serif;
	font-weight: 800; font-size: 8.6cqw; line-height: .9; margin: 0; color: #4DACB8;
}
.mu-tst__sub { margin: .2cqw 0 0; font-weight: 700; font-size: 1.72cqw; color: #EFE7D6; }

/* ── Pills (posicionados en su punto exacto) ──────────────────────────── */
.mu-tst__pill {
	position: absolute;
	transform: translate(-50%, -50%) rotate(var(--pt, 0deg));
	background: var(--pc, #4DACB8); color: #2A1A0A;
	font-family: "xanti-typewriter-variable", "Courier New", monospace;
	font-style: italic; font-weight: 700; font-size: 1.16cqw;
	text-transform: uppercase; letter-spacing: .02em;
	padding: .55cqw 1.35cqw; border-radius: 999px; white-space: nowrap;
	/* sombra dura offset = look de sticker/botón 3D (igual que el widget Valores) */
	box-shadow: 0 .32cqw 0 rgba(0, 0, 0, .30); z-index: 4;
}

/* Track de tarjetas: «display:contents» en desktop → las tarjetas siguen
   siendo hijas (absolutas) del stage y el collage queda intacto; en móvil
   el track se vuelve un slider horizontal con scroll-snap (ver @media). */
.mu-tst__track { display: contents; }
.mu-tst__nav, .mu-tst__dots { display: none; } /* nav (flechas) + dots del slider: solo en móvil */

/* ── Tarjetas (collage: absolutas, superpuestas, giradas) ─────────────── */
.mu-tst__card {
	position: absolute;
	width: 19cqw;
	background: #FFFFFF; border-radius: 1.4cqw; padding: .9cqw .9cqw 1.2cqw;
	box-shadow: 0 1.1cqw 2.6cqw rgba(0, 0, 0, .30);
	transform-origin: center; transform: rotate(var(--tilt, 0deg));
	transition: transform .32s cubic-bezier(.34, 1.4, .5, 1), box-shadow .32s ease;
	will-change: transform; z-index: var(--z, 3);
}
.mu-tst__card:hover, .mu-tst__card:focus-within {
	transform: rotate(0deg) translateY(-.8cqw);
	box-shadow: 0 1.9cqw 3.8cqw rgba(0, 0, 0, .42); z-index: 7;
}
.mu-tst__photo {
	border-radius: 1cqw; overflow: hidden; aspect-ratio: 3 / 2;
	background: #5AB6C9; display: block;
}
.mu-tst__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-tst__body { padding: .7cqw .3cqw 0; }
.mu-tst__stars { display: flex; gap: .12cqw; margin-bottom: .45cqw; }
.mu-tst__star { width: 1.45cqw; height: 1.45cqw; fill: #F2B705; }
.mu-tst__star.is-off { opacity: .24; }
.mu-tst__quote { margin: 0 0 .65cqw; font-size: 1.14cqw; line-height: 1.32; color: #2A2A2A; }
.mu-tst__name { margin: 0; font-weight: 800; font-size: 1.42cqw; color: #2A2A2A; }

/* ── Tarjeta SIN foto (solo cita) ─────────────────────────────────────────
   Sin caja de foto: una comilla grande del color de acento y la cita más
   protagonista. Mismo polaroid blanco, para que combine con las de foto. */
.mu-tst__card--text { padding: 1.1cqw 1.2cqw 1.3cqw; }
.mu-tst__quotemark {
	font-family: "mungos-custard", Georgia, "Times New Roman", serif; font-weight: 800;
	color: var(--acc, #4DACB8); font-size: 6.4cqw; line-height: .8;
	height: 3.6cqw; overflow: hidden; margin: 0 0 .2cqw .1cqw;
}
.mu-tst__card--text .mu-tst__body { padding-top: 0; }
.mu-tst__card--text .mu-tst__quote { font-size: 1.5cqw; line-height: 1.42; margin-bottom: .8cqw; color: #2A2A2A; }
.mu-tst__card--text .mu-tst__name { font-size: 1.5cqw; }

/* ── Decoración ───────────────────────────────────────────────────────── */
.mu-tst__deco { position: absolute; pointer-events: none; z-index: 5; transform: translate(-50%, -50%); height: auto; }
.mu-tst__deco--left  { left: 27%; top: 89%; width: 10.5cqw; } /* a la derecha del pill «LOME», no encima */
.mu-tst__deco--right { left: 88%; top: 19%; width: 6cqw; }    /* carita: pequeña, rincón sup. der. (como el original) */

/* ── Entrada (el JS pone el estado inicial; aquí la transición) ───────── */
.mu-tst[data-anim="1"] .mu-tst__card { transition: transform .55s cubic-bezier(.22,.7,.3,1), opacity .5s ease, box-shadow .32s ease; }

/* ── Móvil: apilar (layout de flujo, sin cqw) ─────────────────────────── */
@media (max-width: 720px) {
	.mu-tst__stage { aspect-ratio: auto; container-type: normal; text-align: center; }
	.mu-tst__head  { position: static; transform: none; width: auto; margin: 0 auto 14px; }
	.mu-tst__title { font-size: clamp(38px, 12vw, 60px); }
	.mu-tst__sub   { font-size: 14px; }
	.mu-tst__pill  {
		position: static; display: inline-block; transform: rotate(0);
		font-size: 13px; padding: 7px 16px; margin: 5px;
		letter-spacing: .04em; line-height: 1.1;
		box-shadow: 0 3px 0 rgba(0, 0, 0, .22);   /* sticker limpio */
	}

	/* Slider horizontal deslizable (scroll-snap) en vez de apilar las tarjetas. */
	.mu-tst__track {
		display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; padding: 4px 16px 18px; margin-inline: -16px;
		scrollbar-width: none;
	}
	.mu-tst__track::-webkit-scrollbar { display: none; }
	.mu-tst__card  {
		position: static; flex: 0 0 82%; width: 82%; max-width: 340px; margin: 0; text-align: left;
		scroll-snap-align: center;
		transform: rotate(0) !important; border-radius: 16px; padding: 10px 10px 16px;
		box-shadow: 0 12px 28px rgba(0,0,0,.3);
	}
	/* Barra de navegación del slider:  ‹  • • •  › */
	.mu-tst__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
	.mu-tst__dots { display: flex; justify-content: center; gap: 9px; }
	.mu-tst__dot {
		width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
		background: rgba(255, 255, 255, .32); transition: background .2s ease, transform .2s ease;
	}
	.mu-tst__dot.is-active { background: #4DACB8; transform: scale(1.3); }
	/* Flechas ‹ › — mismo estilo de botón de marca (lima con borde/sombra dura) */
	.mu-tst__arrow {
		flex: 0 0 auto; width: 42px; height: 42px; padding: 0;
		display: grid; place-items: center; cursor: pointer;
		border-radius: 50%; border: 2px solid #00330b;
		background: #C2E535; color: #003732;
		box-shadow: 2px 2px 0 #00330b;
		transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
		-webkit-tap-highlight-color: rgba(0, 130, 75, .20);
	}
	.mu-tst__arrow svg { width: 20px; height: 20px; display: block; }
	.mu-tst__arrow:active { transform: translateY(2px); box-shadow: 0 0 0 #00330b; }
	.mu-tst__arrow:disabled { opacity: .34; box-shadow: none; cursor: default; }

	.mu-tst__photo { border-radius: 12px; }
	.mu-tst__stars { gap: 2px; margin-bottom: 8px; }
	.mu-tst__star  { width: 17px; height: 17px; }
	.mu-tst__quote { font-size: 13.5px; margin-bottom: 12px; }
	.mu-tst__name  { font-size: 15px; }
	.mu-tst__deco  { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mu-tst__card, .mu-tst[data-anim="1"] .mu-tst__card { transition: none !important; }
}

/* ══ Responsive móvil (auditoría responsive) ══════════════════════════ */
@media (max-width: 720px) {
  .mu-tst__body { padding: 8px 4px 0; }
  .mu-tst__title { font-size: clamp(30px, 9vw, 52px); line-height: 1; }
  /* En móvil el stage usa container-type:normal → los cqw valen 0. La tarjeta
     de cita necesita tamaños en px o quedaría invisible. */
  .mu-tst__card--text { padding: 12px 12px 16px; }
  .mu-tst__quotemark { font-size: 40px; height: 26px; line-height: .8; margin: 0 0 4px 2px; }
  .mu-tst__card--text .mu-tst__quote { font-size: 13.5px; line-height: 1.4; }
  .mu-tst__card--text .mu-tst__name { font-size: 15px; }
}