/* =====================================================================
   MZ EXPERIENCE — Sistema de diseño
   Multiservicios MZ · v1.0.0

   Todo va bajo la clase .mzx para no chocar con estilos de Elementor
   ni del tema. Si algo no se ve, revisa que el shortcode esté dentro
   de un contenedor con esa clase (los shortcodes ya la incluyen).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS DE DISEÑO
   Cambiar un valor aquí cambia el sitio entero.
   ------------------------------------------------------------------- */
:root {
	/* Marca */
	--mz-gold:      #F5A623;
	--mz-gold-2:    #FFD65C;
	--mz-gold-dk:   #C97E0A;

	/* Neutros oscuros */
	--mz-ink:       #0A0E1A;
	--mz-ink-2:     #121828;
	--mz-ink-3:     #1C2438;

	/* Neutros claros */
	--mz-paper:     #FFFFFF;
	--mz-mist:      #ECEFF6;
	--mz-line:      #D9DEE9;

	/* Texto */
	--mz-text:      #131824;
	--mz-text-2:    #5A6274;
	--mz-text-inv:  #FFFFFF;
	--mz-text-inv2: #A8B0C4;

	/* Acentos */
	--mz-teal:      #00D4A0;
	--mz-blue:      #3B82F6;
	--mz-purple:    #8B5CF6;
	--mz-green:     #22C55E;
	--mz-orange:    #FB7185;
	--mz-red:       #EF4444;

	/* Tipografía */
	--mz-font-head: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mz-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Radios */
	--mz-r-sm: 10px;
	--mz-r-md: 16px;
	--mz-r-lg: 24px;
	--mz-r-xl: 32px;

	/* Sombras */
	--mz-sh-sm: 0 2px 8px rgba(10, 14, 26, .06);
	--mz-sh-md: 0 8px 28px rgba(10, 14, 26, .10);
	--mz-sh-lg: 0 24px 60px rgba(10, 14, 26, .16);
	--mz-sh-gold: 0 12px 32px rgba(245, 166, 35, .32);

	/* Espaciado de sección, fluido */
	--mz-sec-y: clamp(56px, 8vw, 104px);

	/* Transiciones */
	--mz-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------- */
.mzx,
.mzx * {
	box-sizing: border-box;
}

.mzx {
	font-family: var(--mz-font-body);
	color: var(--mz-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.mzx-container {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

.mzx-section {
	position: relative;
	padding-block: var(--mz-sec-y);
	background: var(--mz-paper);
}

.mzx-section--mist { background: var(--mz-mist); }

.mzx-section--dark {
	background: var(--mz-ink);
	color: var(--mz-text-inv);
	overflow: hidden;
}

.mzx-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* Tipografía */
.mzx h1, .mzx h2, .mzx h3, .mzx h4 {
	font-family: var(--mz-font-head);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0;
}

.mzx-h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	margin-bottom: .5rem;
}

.mzx-lead {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	color: var(--mz-text-2);
	max-width: 62ch;
	margin: 0;
}

.mzx-section--dark .mzx-lead { color: var(--mz-text-inv2); }

.mzx-grad {
	background: linear-gradient(100deg, var(--mz-gold) 0%, var(--mz-gold-2) 45%, var(--mz-gold) 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: mzx-shine 6s linear infinite;
	display: inline-block;
}

@keyframes mzx-shine {
	to { background-position: 200% center; }
}

/* Cabecera de sección */
.mzx-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(28px, 4vw, 48px);
	flex-wrap: wrap;
}

.mzx-sechead--dark .mzx-h2 { color: var(--mz-text-inv); }

/* ---------------------------------------------------------------------
   3. BOTONES Y ENLACES
   ------------------------------------------------------------------- */
.mzx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	font-family: var(--mz-font-head);
	font-weight: 600;
	font-size: .975rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .25s var(--mz-ease), box-shadow .25s var(--mz-ease), background .25s;
}

.mzx-btn:hover  { transform: translateY(-2px); }
.mzx-btn:active { transform: translateY(0); }

.mzx-btn:focus-visible {
	outline: 3px solid var(--mz-gold-2);
	outline-offset: 3px;
}

.mzx-btn--gold {
	background: linear-gradient(135deg, var(--mz-gold) 0%, var(--mz-gold-2) 100%);
	color: #14100A;
	box-shadow: var(--mz-sh-gold);
}

.mzx-btn--gold:hover  { box-shadow: 0 16px 40px rgba(245, 166, 35, .44); color: #14100A; }

.mzx-btn--dark  { background: var(--mz-ink); color: #fff; }
.mzx-btn--dark:hover { background: var(--mz-ink-2); color: #fff; }

.mzx-btn--ghost {
	background: rgba(255, 255, 255, .07);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .20);
	backdrop-filter: blur(8px);
}

.mzx-btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.mzx-btn--line {
	background: transparent;
	color: var(--mz-text);
	border: 1.5px solid var(--mz-line);
}

.mzx-btn--line:hover { border-color: var(--mz-gold); color: var(--mz-gold-dk); }

.mzx-btn--sm { padding: 10px 18px; font-size: .875rem; }
.mzx-btn--xs { padding: 8px 14px;  font-size: .8125rem; }
.mzx-btn--wide { padding-inline: 34px; }

.mzx-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: .9375rem;
	color: var(--mz-gold-dk);
	text-decoration: none;
	transition: gap .25s var(--mz-ease);
}

.mzx-link:hover { gap: 11px; color: var(--mz-gold-dk); }
.mzx-section--dark .mzx-link { color: var(--mz-gold-2); }

.mzx-icon { flex-shrink: 0; }

/* ---------------------------------------------------------------------
   4. HERO
   ------------------------------------------------------------------- */
.mzx-hero {
	position: relative;
	background: var(--mz-ink);
	color: var(--mz-text-inv);
	padding-block: clamp(72px, 11vw, 132px) clamp(64px, 9vw, 104px);
	overflow: hidden;
	isolation: isolate;
}

.mzx-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

/* Manchas de color en movimiento lento */
.mzx-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .32;
	will-change: transform;
}

.mzx-blob--1 {
	width: 46vw; height: 46vw;
	background: var(--mz-gold);
	top: -14%; left: -8%;
	animation: mzx-float-a 22s ease-in-out infinite;
}

.mzx-blob--2 {
	width: 38vw; height: 38vw;
	background: var(--mz-blue);
	bottom: -18%; right: -6%;
	opacity: .24;
	animation: mzx-float-b 28s ease-in-out infinite;
}

.mzx-blob--3 {
	width: 30vw; height: 30vw;
	background: var(--mz-teal);
	top: 42%; left: 46%;
	opacity: .16;
	animation: mzx-float-a 34s ease-in-out infinite reverse;
}

@keyframes mzx-float-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(7%, 9%) scale(1.12); }
}

@keyframes mzx-float-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-9%, -7%) scale(1.08); }
}

/* Rejilla técnica de fondo */
.mzx-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
}

.mzx-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .55;
}

.mzx-hero__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.mzx-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	backdrop-filter: blur(10px);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--mz-text-inv2);
}

.mzx-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--mz-teal);
	box-shadow: 0 0 0 0 rgba(0, 212, 160, .7);
	animation: mzx-ping 2.4s infinite;
}

@keyframes mzx-ping {
	70%  { box-shadow: 0 0 0 11px rgba(0, 212, 160, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 212, 160, 0); }
}

.mzx-hero__title {
	font-size: clamp(2.1rem, 6vw, 4.25rem);
	max-width: 20ch;
	margin: 0;
	color: #fff;
}

.mzx-hero__title .mzx-grad { display: block; }

.mzx-hero__sub {
	font-size: clamp(1rem, 1.7vw, 1.1875rem);
	color: var(--mz-text-inv2);
	max-width: 60ch;
	margin: 0;
}

.mzx-hero__searchwrap { width: 100%; max-width: 760px; margin-top: 6px; }

.mzx-hero__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 4px;
}

.mzx-hero__fade {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 120px;
	background: linear-gradient(to bottom, transparent, var(--mz-ink));
	z-index: 1;
	pointer-events: none;
}

/* ---------------------------------------------------------------------
   5. BUSCADOR UNIVERSAL
   ------------------------------------------------------------------- */
.mzx-search { position: relative; width: 100%; }

.mzx-search__form {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .96);
	border-radius: 999px;
	padding: 7px 7px 7px 20px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .34);
	border: 1px solid rgba(255, 255, 255, .5);
	transition: box-shadow .3s var(--mz-ease), transform .3s var(--mz-ease);
}

.mzx-search__form:focus-within {
	box-shadow: 0 24px 60px rgba(245, 166, 35, .28), 0 0 0 3px rgba(245, 166, 35, .4);
	transform: translateY(-2px);
}

.mzx-search__icon { display: flex; color: var(--mz-text-2); }

.mzx-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 14px 6px;
	font-family: var(--mz-font-body);
	font-size: 1rem;
	color: var(--mz-text);
	outline: none;
}

.mzx-search__input::placeholder { color: #98A0B3; }
.mzx-search__input::-webkit-search-cancel-button { cursor: pointer; }

.mzx-search__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	border-radius: 999px;
	padding: 14px 24px;
	background: linear-gradient(135deg, var(--mz-gold) 0%, var(--mz-gold-2) 100%);
	color: #14100A;
	font-family: var(--mz-font-head);
	font-weight: 700;
	font-size: .9375rem;
	cursor: pointer;
	transition: filter .2s;
}

.mzx-search__btn:hover { filter: brightness(1.07); }

/* Desplegable de resultados */
.mzx-search__results {
	position: absolute;
	top: calc(100% + 12px);
	inset-inline: 0;
	z-index: 60;
	background: #fff;
	border-radius: var(--mz-r-md);
	box-shadow: var(--mz-sh-lg);
	border: 1px solid var(--mz-line);
	max-height: 460px;
	overflow-y: auto;
	text-align: left;
	animation: mzx-drop .22s var(--mz-ease);
}

@keyframes mzx-drop {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.mzx-sr__group {
	padding: 14px 18px 6px;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #98A0B3;
}

.mzx-sr__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 18px;
	text-decoration: none;
	color: var(--mz-text);
	transition: background .15s;
}

.mzx-sr__item:hover,
.mzx-sr__item.is-active { background: var(--mz-mist); color: var(--mz-text); }

.mzx-sr__thumb {
	width: 50px; height: 50px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--mz-mist);
	flex-shrink: 0;
}

.mzx-sr__body { min-width: 0; flex: 1; }

.mzx-sr__title {
	display: block;
	font-weight: 600;
	font-size: .9375rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mzx-sr__meta {
	display: block;
	font-size: .8125rem;
	color: var(--mz-text-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mzx-sr__price { color: var(--mz-gold-dk); font-weight: 700; }

.mzx-sr__tag {
	font-size: .625rem;
	font-weight: 800;
	letter-spacing: .06em;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(245, 166, 35, .16);
	color: var(--mz-gold-dk);
	flex-shrink: 0;
}

.mzx-sr__empty,
.mzx-sr__loading {
	padding: 26px 18px;
	text-align: center;
	color: var(--mz-text-2);
	font-size: .9375rem;
}

.mzx-sr__all {
	display: block;
	padding: 14px;
	text-align: center;
	font-weight: 700;
	font-size: .875rem;
	color: var(--mz-gold-dk);
	text-decoration: none;
	border-top: 1px solid var(--mz-line);
	background: var(--mz-mist);
}

.mzx-sr__all:hover { background: #EEF0F6; color: var(--mz-gold-dk); }

/* Spinner */
.mzx-spin {
	display: inline-block;
	width: 20px; height: 20px;
	border: 2.5px solid var(--mz-line);
	border-top-color: var(--mz-gold);
	border-radius: 50%;
	animation: mzx-rotate .7s linear infinite;
	vertical-align: middle;
}

@keyframes mzx-rotate { to { transform: rotate(360deg); } }

/* Buscador sobre fondo claro */
.mzx-search--claro .mzx-search__form {
	background: #fff;
	border: 1px solid var(--mz-line);
	box-shadow: var(--mz-sh-sm);
}

/* ---------------------------------------------------------------------
   6. CHIPS
   ------------------------------------------------------------------- */
.mzx-chips {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 800px;
}

.mzx-chips__label {
	font-size: .8125rem;
	color: var(--mz-text-inv2);
	font-weight: 600;
}

.mzx-chip {
	padding: 7px 15px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
	color: #E8EBF2;
	font-family: var(--mz-font-body);
	font-size: .8125rem;
	font-weight: 500;
	cursor: pointer;
	transition: all .22s var(--mz-ease);
	backdrop-filter: blur(8px);
}

.mzx-chip:hover {
	background: var(--mz-gold);
	border-color: var(--mz-gold);
	color: #14100A;
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
   7. BARRA DE CONFIANZA
   ------------------------------------------------------------------- */
.mzx-trust {
	background: var(--mz-ink-2);
	border-top: 1px solid rgba(255, 255, 255, .07);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	padding-block: 22px;
}

.mzx-trust__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}

.mzx-trust__item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #D7DCE8;
	font-size: .9375rem;
	font-weight: 500;
}

.mzx-trust__icon {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 11px;
	background: rgba(245, 166, 35, .14);
	color: var(--mz-gold-2);
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   8. BENTO GRID (PILARES)
   ------------------------------------------------------------------- */
.mzx-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.mzx-bento__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 28px;
	border-radius: var(--mz-r-lg);
	background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FB 100%);
	border: 1px solid #D5DBE7;
	text-decoration: none;
	color: var(--mz-text);
	overflow: hidden;
	isolation: isolate;
	/* Sombra en reposo, no solo al pasar el mouse. Sin ella las
	   tarjetas se leían planas sobre el fondo claro. */
	box-shadow:
		0 1px 2px rgba(10, 14, 26, .05),
		0 8px 20px rgba(10, 14, 26, .07);
	transition: transform .35s var(--mz-ease), box-shadow .35s var(--mz-ease), border-color .35s;
	transform-style: preserve-3d;
}

/* Barra de color arriba, del tono de cada pilar. Se despliega al
   pasar el cursor y ayuda a distinguir una tarjeta de otra. */
.mzx-bento__card::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--mzx-tone-text, var(--mz-gold));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--mz-ease);
	z-index: 3;
}

.mzx-bento__card:hover::after { transform: scaleX(1); }

.mzx-bento__card:hover {
	box-shadow:
		0 2px 4px rgba(10, 14, 26, .06),
		0 24px 48px rgba(10, 14, 26, .15);
	border-color: var(--mzx-tone, rgba(245, 166, 35, .35));
	color: var(--mz-text);
}

/* El icono también gana contraste y reacciona. */
.mzx-bento__card .mzx-bento__icon {
	border: 1px solid var(--mzx-tone, rgba(245, 166, 35, .22));
	transition: transform .35s var(--mz-ease), box-shadow .35s var(--mz-ease);
}

.mzx-bento__card:hover .mzx-bento__icon {
	transform: translateY(-2px) scale(1.04);
}

/* La tarjeta oscura conserva su propio borde. */
.mzx-bento__card.mzx-tone--dark { border-color: transparent; }
.mzx-bento__card.mzx-tone--dark:hover { border-color: rgba(245, 166, 35, .4); }

.mzx-bento__card--lg { grid-column: span 2; grid-row: span 2; }
.mzx-bento__card--md { grid-column: span 2; }
.mzx-bento__card--sm { grid-column: span 1; }

/* Brillo que sigue al cursor */
.mzx-bento__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: radial-gradient(
		420px circle at var(--mzx-mx, 50%) var(--mzx-my, 50%),
		var(--mzx-tone, rgba(245, 166, 35, .18)),
		transparent 62%
	);
	transition: opacity .35s;
}

.mzx-bento__card:hover .mzx-bento__glow { opacity: 1; }

.mzx-bento__icon {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: 15px;
	background: var(--mzx-tone-solid, rgba(245, 166, 35, .14));
	color: var(--mzx-tone-text, var(--mz-gold-dk));
	margin-bottom: 6px;
}

.mzx-bento__kicker {
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mzx-tone-text, var(--mz-gold-dk));
}

.mzx-bento__title { font-size: 1.25rem; }
.mzx-bento__card--lg .mzx-bento__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.mzx-bento__desc {
	color: var(--mz-text-2);
	font-size: .9375rem;
	margin: 0;
	flex: 1;
}

.mzx-bento__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	font-size: .875rem;
	color: var(--mzx-tone-text, var(--mz-gold-dk));
	margin-top: 8px;
	transition: gap .25s var(--mz-ease);
}

.mzx-bento__card:hover .mzx-bento__cta { gap: 12px; }

/* Tarjeta oscura dentro del bento */
.mzx-bento__card.mzx-tone--dark {
	background: linear-gradient(150deg, var(--mz-ink) 0%, var(--mz-ink-3) 100%);
	border-color: transparent;
	color: #fff;
}

.mzx-tone--dark .mzx-bento__title { color: #fff; }
.mzx-tone--dark .mzx-bento__desc  { color: var(--mz-text-inv2); }
.mzx-tone--dark .mzx-bento__icon  { background: rgba(245, 166, 35, .18); color: var(--mz-gold-2); }
.mzx-tone--dark .mzx-bento__kicker,
.mzx-tone--dark .mzx-bento__cta   { color: var(--mz-gold-2); }

/* ---- Foto opcional arriba de la tarjeta ----
   Solo aparece si el shortcode trae el atributo "imagenes". La tarjeta
   ya tiene overflow:hidden y las esquinas redondeadas, así que la foto
   se recorta sola sin necesitar su propio border-radius.
   El margen negativo la estira hasta pegarla a los 3 bordes (los
   28px son el padding de .mzx-bento__card, que se cancelan aquí). */
.mzx-bento__media {
	position: relative;
	display: block;
	margin: -28px -28px 14px;
	/* --mzx-media-h la puede fijar el atributo foto_alto del shortcode.
	   Si no se usó, cae en el tamaño de siempre. */
	height: var(--mzx-media-h, clamp(120px, 13vw, 176px));
	overflow: hidden;
}

.mzx-bento__card--lg .mzx-bento__media { height: var(--mzx-media-h, clamp(160px, 18vw, 240px)); }

/* Envoltorio de las fotos cuando una tarjeta trae varias (ver
   render_card_media() en PHP): llena la caja para que cada <img>
   pueda posicionarse encima de las demás y hacer el fundido. */
.mzx-cardmedia { position: relative; display: block; width: 100%; height: 100%; }

/* ---- Modo mosaico ----
   Se activa por tarjeta poniendo "mosaico:" al principio de su lista
   de fotos (ver render_card_media() en PHP). En vez de pasar una a
   una, se ven todas juntas en una tira, con un margen entre ellas
   para que no se peguen. --mzx-mosaic-n lo calcula PHP según cuántas
   fotos traiga esa tarjeta en concreto. */
.mzx-cardmedia--mosaic {
	display: grid;
	grid-template-columns: repeat(var(--mzx-mosaic-n, 2), 1fr);
	gap: 4px;
}

.mzx-bento__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--mz-ease);
}

.mzx-bento__card:hover .mzx-bento__media img { transform: scale(1.06); }

/* Dentro del mosaico las fotos NO se apilan una sobre otra (eso es lo
   que hace la diapositiva): van en flujo normal de grid, una junto a
   la otra. Estas dos clases juntas (0,2,1 de especificidad) ganan por
   encima de la regla general de arriba (0,1,1), sin importar el orden
   en el archivo. */
.mzx-bento__media .mzx-cardmedia--mosaic img,
.mzx-svc__media .mzx-cardmedia--mosaic img {
	position: static;
	inset: auto;
	width: 100%;
	height: 100%;
}

/* El icono flota a medias sobre la foto, como una insignia. */
.mzx-bento__media + .mzx-bento__icon {
	position: relative;
	z-index: 2;
	margin-top: -33px;
	background: var(--mz-paper) !important;
	border-color: transparent !important;
	box-shadow: 0 8px 18px rgba(10, 14, 26, .28);
}

.mzx-tone--dark .mzx-bento__media + .mzx-bento__icon {
	background: var(--mz-ink-2) !important;
}

/* Paleta por tono */
.mzx-tone--gold   { --mzx-tone: rgba(245,166,35,.20); --mzx-tone-solid: rgba(245,166,35,.14); --mzx-tone-text: #C97E0A; }
.mzx-tone--blue   { --mzx-tone: rgba(59,130,246,.20); --mzx-tone-solid: rgba(59,130,246,.13);  --mzx-tone-text: #1D4ED8; }
.mzx-tone--teal   { --mzx-tone: rgba(0,212,160,.20);  --mzx-tone-solid: rgba(0,212,160,.13);   --mzx-tone-text: #047857; }
.mzx-tone--purple { --mzx-tone: rgba(139,92,246,.20); --mzx-tone-solid: rgba(139,92,246,.13);  --mzx-tone-text: #6D28D9; }
.mzx-tone--green  { --mzx-tone: rgba(34,197,94,.20);  --mzx-tone-solid: rgba(34,197,94,.13);   --mzx-tone-text: #15803D; }
.mzx-tone--orange { --mzx-tone: rgba(251,113,133,.20);--mzx-tone-solid: rgba(251,113,133,.13); --mzx-tone-text: #BE123C; }

/* ---------------------------------------------------------------------
   8b. VITRINA CON SLIDER ALTERNANTE
   Tarjeta fija + carrusel automático infinito al lado. La dirección y
   el lado se alternan entre secciones para crear un zigzag visual.

   Está diseñada COMPACTA a propósito: la idea es que quepan 3 o 4
   vitrinas en una pantalla de escritorio, no una sola gigante.
   ------------------------------------------------------------------- */

/* Medidas centrales de la vitrina. Cambiar estas dos variables
   ajusta el alto de todas las vitrinas del sitio de una vez. */
.mzx-show {
	--mzx-show-y: clamp(16px, 1.8vw, 26px);  /* Aire vertical entre bandas. */
	--mzx-row:    clamp(168px, 14vw, 192px); /* Alto de la fila. */
	--mzx-gap:    8px;                        /* Separación entre tarjetas. */
	--mzx-visible: 3;                         /* Tarjetas a la vista. */
	/* Canal a cada lado. Una sola variable para los dos lados, así la
	   tarjeta y el carrusel quedan siempre igual de separados del
	   borde, sea cual sea el lado en el que caiga cada uno al alternar
	   las vitrinas. */
	--mzx-show-gutter: clamp(16px, 4vw, 32px);

	overflow: hidden;
	padding-block: var(--mzx-show-y);
}

/* Mismo ancho y mismo centrado que .mzx-container, que es lo que usa
   el resto del sitio (hero, servicios, contadores, testimonios…).
   Antes esto no lo tenía: la vitrina se estiraba a todo el ancho de la
   pantalla con un canal fijo de ~22px, mientras las demás secciones
   quedaban centradas a 1240px. En un monitor de 1366px el resto del
   contenido arrancaba a ~95px y la vitrina a ~22px, así que nada se
   alineaba en vertical y la vitrina se leía "corrida a la izquierda".
   Con el mismo contenedor, la tarjeta de la vitrina queda a plomo con
   los títulos y el texto de las demás secciones. */
.mzx-show__inner {
	display: grid;
	/* La tarjeta va ancha a propósito: al quedarle menos espacio al
	   carrusel, caben justo 3 tarjetas sin que se vean estrechas. */
	grid-template-columns: minmax(300px, 430px) 1fr;
	gap: 12px;
	/* stretch, no center: la columna del carrusel toma exactamente
	   la altura de la tarjeta y las dos piezas quedan a ras. */
	align-items: stretch;
	min-height: var(--mzx-row);

	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--mzx-show-gutter);
}

.mzx-show__inner--flip {
	grid-template-columns: 1fr minmax(300px, 430px);
}


/* Con la tarjeta a la derecha se invierte el orden visual sin cambiar
   el orden del HTML (importante para lectores de pantalla). */
.mzx-show__inner--flip .mzx-show__panel { order: 2; }
.mzx-show__inner--flip .mzx-mq { order: 1; }

/* ---- La tarjeta ---- */
.mzx-show__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/* Base de la tarjeta: forma y espaciado, sin color. */
.mzx-show__panel--card {
	padding: 16px 18px;
	border-radius: var(--mz-r-md);
	overflow: hidden;
	isolation: isolate;
	box-shadow: var(--mz-sh-sm);
}

/* Variante oscura */
.mzx-show__panel--dark {
	background: linear-gradient(150deg, var(--mz-ink) 0%, var(--mz-ink-3) 100%);
	color: #fff;
}

/* Variante clara.
   Se alterna con la oscura de una vitrina a la siguiente. Como el fondo
   de la sección se invierte al mismo tiempo, la tarjeta siempre
   contrasta con lo que tiene detrás y nunca se funde con el fondo. */
.mzx-show__panel--light {
	background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FB 100%);
	color: var(--mz-text);
	border: 1px solid #D5DBE7;
}

.mzx-show__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
		380px circle at 12% 0%,
		var(--mzx-tone, rgba(245, 166, 35, .22)),
		transparent 62%
	);
	pointer-events: none;
}


/* La tarjeta clara manda sobre el color de la sección: aunque la banda
   sea oscura, su texto se mantiene en tinta sobre blanco. */
.mzx-section--dark .mzx-show__panel--light .mzx-show__title { color: var(--mz-text); }
.mzx-section--dark .mzx-show__panel--light .mzx-show__desc  { color: var(--mz-text-2); }
.mzx-show__panel--light .mzx-show__kicker { color: var(--mzx-tone-text, var(--mz-gold-dk)); }
.mzx-show__panel--light .mzx-show__icon {
	background: var(--mzx-tone-solid, rgba(245, 166, 35, .14));
	color: var(--mzx-tone-text, var(--mz-gold-dk));
}
.mzx-show__panel--light .mzx-show__glow { opacity: .5; }

/* Cabecera: icono en línea con el texto, ahorra una fila de alto. */
.mzx-show__head {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.mzx-show__icon {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 12px;
	background: var(--mzx-tone-solid, rgba(245, 166, 35, .14));
	color: var(--mzx-tone-text, var(--mz-gold-dk));
	flex-shrink: 0;
}

.mzx-show__panel--dark .mzx-show__icon {
	background: rgba(245, 166, 35, .18);
	color: var(--mz-gold-2);
}

.mzx-show__headtext { min-width: 0; }

.mzx-show__kicker {
	display: block;
	font-size: .625rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mzx-tone-text, var(--mz-gold-dk));
	line-height: 1.4;
}

.mzx-show__panel--dark .mzx-show__kicker { color: var(--mz-gold-2); }

.mzx-show__title {
	font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
	line-height: 1.2;
	margin: 0;
}

.mzx-show__panel--dark .mzx-show__title { color: #fff; }

.mzx-show__desc {
	color: var(--mz-text-2);
	font-size: .8125rem;
	line-height: 1.5;
	margin: 0;
	/* Máximo 2 líneas: mantiene todas las vitrinas a la misma altura
	   aunque unas descripciones sean más largas que otras. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mzx-show__panel--dark .mzx-show__desc { color: var(--mz-text-inv2); }

/* Pie: miniaturas y botón en la misma fila. */
.mzx-show__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
	min-width: 0;
}

.mzx-show__cta { flex-shrink: 0; }

/* Tira de imágenes fijas */
.mzx-show__thumbs {
	display: flex;
	gap: 6px;
	min-width: 0;
}

.mzx-show__thumb {
	display: block;
	width: 38px; height: 38px;
	border-radius: 9px;
	overflow: hidden;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	flex-shrink: 0;
	transition: transform .35s var(--mz-ease);
}

.mzx-show__panel:hover .mzx-show__thumb { transform: translateY(-3px); }
.mzx-show__thumb:nth-child(2) { transition-delay: .05s; }
.mzx-show__thumb:nth-child(3) { transition-delay: .1s; }

.mzx-show__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mzx-show__thumb-ph {
	display: grid;
	place-items: center;
	width: 100%; height: 100%;
	color: rgba(245, 166, 35, .5);
}

.mzx-show__panel:not(.mzx-show__panel--dark) .mzx-show__thumb {
	background: var(--mz-mist);
	border-color: var(--mz-line);
}

.mzx-show__panel:not(.mzx-show__panel--dark) .mzx-show__thumb-ph { color: #A8B0C4; }

/* Botón de pausa: icono suelto en la esquina, no ocupa altura.
   Poder detener lo que se mueve solo es un requisito de accesibilidad. */
.mzx-show__pause {
	position: absolute;
	top: 12px; right: 12px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
	color: var(--mz-text-inv2);
	cursor: pointer;
	opacity: .55;
	transition: all .22s var(--mz-ease);
}

.mzx-show__pause:hover,
.mzx-show__pause:focus-visible {
	opacity: 1;
	border-color: var(--mz-gold);
	color: var(--mz-gold-2);
}

.mzx-show__panel:not(.mzx-show__panel--dark) .mzx-show__pause {
	border-color: var(--mz-line);
	background: #fff;
	color: var(--mz-text-2);
}


/* ---- El carrusel ---- */
.mzx-mq {
	position: relative;
	overflow: hidden;
	min-width: 0;   /* Permite que el grid lo encoja en vez de desbordar. */

	/* Convierte el carrusel en contenedor de consulta. Eso habilita la
	   unidad cqi (su propio ancho), que es lo que permite calcular el
	   ancho exacto de cada tarjeta para que quepan justo N. */
	container-type: inline-size;
}

/* Ojo: la separación va como margen de cada tarjeta, NO como "gap".
   Con gap, el último hueco no se repite y el bucle salta medio hueco
   en cada vuelta. Con margen, el ancho total es exactamente el doble
   de un set y el -50% cae en el sitio justo. */
.mzx-mq__track {
	display: flex;
	align-items: stretch;
	width: max-content;
	height: 100%;
	animation: mzx-mq-left var(--mzx-dur, 46s) linear infinite;
	will-change: transform;
}

/* Corre hacia la izquierda: el contenido entra por la derecha. */
@keyframes mzx-mq-left {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Corre hacia la derecha: la misma animación al revés. */
@keyframes mzx-mq-right {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

.mzx-mq--rtl .mzx-mq__track { animation-name: mzx-mq-right; }

/* Se detiene al pasar el mouse o al enfocar con teclado, para que el
   usuario pueda leer y hacer clic sin perseguir la tarjeta. */
.mzx-mq:hover .mzx-mq__track,
.mzx-mq:focus-within .mzx-mq__track,
.mzx-mq.is-paused .mzx-mq__track {
	animation-play-state: paused;
}

/* Difuminado en los bordes: sugiere que el contenido continúa. */
.mzx-mq__fade {
	position: absolute;
	top: 0; bottom: 0;
	width: 38px;
	pointer-events: none;
	z-index: 2;
}

.mzx-mq__fade--start { left: 0;  background: linear-gradient(to right, var(--mz-paper), transparent); }
.mzx-mq__fade--end   { right: 0; background: linear-gradient(to left,  var(--mz-paper), transparent); }

.mzx-section--mist .mzx-mq__fade--start { background: linear-gradient(to right, var(--mz-mist), transparent); }
.mzx-section--mist .mzx-mq__fade--end   { background: linear-gradient(to left,  var(--mz-mist), transparent); }
.mzx-section--dark .mzx-mq__fade--start { background: linear-gradient(to right, var(--mz-ink), transparent); }
.mzx-section--dark .mzx-mq__fade--end   { background: linear-gradient(to left,  var(--mz-ink), transparent); }

/* El difuminado del lado donde está la tarjeta sobra: ahí no hay corte. */
.mzx-show__inner:not(.mzx-show__inner--flip) .mzx-mq__fade--start { display: none; }
.mzx-show__inner--flip .mzx-mq__fade--end { display: none; }

/* ---- Tarjeta del carrusel ---- */
.mzx-mini {
	display: flex;
	flex-direction: column;
	flex: 0 0 200px;  /* Respaldo si el navegador no soporta cqi. */
	height: 100%;     /* Iguala la altura de la tarjeta del panel. */
	margin-right: var(--mzx-gap, 8px);
	background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FC 100%);
	border: 1px solid #D5DBE7;
	border-radius: var(--mz-r-sm);
	overflow: hidden;
	text-decoration: none;
	color: var(--mz-text);
	transition: transform .3s var(--mz-ease), box-shadow .3s var(--mz-ease), border-color .3s;
}

/* Ancho exacto para que quepan justo N tarjetas: el ancho del
   carrusel menos los huecos, dividido entre N. */
@supports (width: 1cqi) {
	.mzx-mini {
		flex: 0 0 calc(
			(100cqi - (var(--mzx-gap, 8px) * var(--mzx-visible, 4)))
			/ var(--mzx-visible, 4)
		);
	}
}

.mzx-mini:hover {
	transform: translateY(-4px);
	box-shadow: var(--mz-sh-md);
	border-color: transparent;
	color: var(--mz-text);
}

.mzx-section--dark .mzx-mini {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .10);
	color: #fff;
}

.mzx-section--dark .mzx-mini:hover {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(245, 166, 35, .38);
	color: #fff;
}

/* La imagen absorbe todo el alto sobrante. Así, aunque la tarjeta
   crezca para igualar al panel, el texto de abajo mantiene su tamaño
   y lo que se estira es la foto. */
.mzx-mini__media {
	position: relative;
	display: block;
	flex: 1;
	min-height: 80px;
	overflow: hidden;
	background: linear-gradient(135deg, #EEF0F6, #DDE2EC);
}

.mzx-section--dark .mzx-mini__media {
	background: linear-gradient(135deg, var(--mz-ink-2), var(--mz-ink-3));
}

.mzx-mini__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--mz-ease);
}

.mzx-mini:hover .mzx-mini__media img { transform: scale(1.07); }

.mzx-mini__ph {
	display: grid;
	place-items: center;
	width: 100%; height: 100%;
	color: #A8B0C4;
}

.mzx-section--dark .mzx-mini__ph { color: rgba(245, 166, 35, .45); }

.mzx-mini__badge {
	position: absolute;
	top: 8px; left: 8px;
	z-index: 2;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--mz-gold);
	color: #14100A;
	font-size: .5625rem;
	font-weight: 800;
	letter-spacing: .06em;
}

.mzx-mini__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 11px 11px;
	flex: 0 0 auto; /* No crece: el alto extra se lo lleva la imagen. */
}

.mzx-mini__title {
	font-family: var(--mz-font-head);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.3;
	/* Corta a 2 líneas para que todas las tarjetas midan igual. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mzx-mini__meta {
	font-family: var(--mz-font-head);
	font-size: .75rem;
	font-weight: 700;
	color: var(--mz-gold-dk);
}

.mzx-section--dark .mzx-mini__meta { color: var(--mz-gold-2); }

.mzx-mini__meta del { color: var(--mz-text-2); font-weight: 400; font-size: .6875rem; margin-right: 4px; }
.mzx-mini__meta ins { text-decoration: none; }

/* ---- Escalonado por ancho de pantalla ----
   Cuántas tarjetas se ven cambia con el espacio disponible, para que
   nunca queden ni apretadas ni gigantes. */

@media (max-width: 1400px) { .mzx-show { --mzx-visible: 4; } }
@media (max-width: 1180px) { .mzx-show { --mzx-visible: 3; } }

/* ---------------------------------------------------------------------
   9. TARJETAS DE PRODUCTO
   ------------------------------------------------------------------- */
.mzx-cards {
	display: grid;
	grid-template-columns: repeat(var(--mzx-cols, 4), 1fr);
	gap: 20px;
}

.mzx-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 100%);
	border: 1px solid #D5DBE7;
	border-radius: var(--mz-r-md);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(10, 14, 26, .04), 0 6px 16px rgba(10, 14, 26, .06);
	transition: transform .35s var(--mz-ease), box-shadow .35s var(--mz-ease);
}

.mzx-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--mz-sh-lg);
}

.mzx-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--mz-mist);
}

.mzx-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .55s var(--mz-ease);
}

.mzx-card:hover .mzx-card__img { transform: scale(1.07); }

.mzx-badge {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 2;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: .625rem;
	font-weight: 800;
	letter-spacing: .07em;
}

.mzx-badge--sale { background: var(--mz-gold); color: #14100A; }
.mzx-badge--out  { background: var(--mz-ink); color: #fff; left: auto; right: 12px; }

.mzx-card__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 18px 18px;
	flex: 1;
}

.mzx-card__cat {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--mz-text-2);
}

.mzx-card__title {
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 600;
	flex: 1;
}

.mzx-card__title a { color: var(--mz-text); text-decoration: none; }
.mzx-card__title a:hover { color: var(--mz-gold-dk); }

.mzx-card__price {
	font-family: var(--mz-font-head);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--mz-text);
}

.mzx-card__price del { color: var(--mz-text-2); font-weight: 400; font-size: .875rem; margin-right: 6px; }
.mzx-card__price ins { text-decoration: none; color: var(--mz-gold-dk); }

.mzx-card__actions { display: flex; gap: 8px; margin-top: 6px; }
.mzx-card__actions .mzx-btn { flex: 1; }

/* Carrusel */
.mzx-cards--carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 6px;
}

.mzx-cards--carousel::-webkit-scrollbar { display: none; }

.mzx-cards--carousel .mzx-card {
	flex: 0 0 clamp(220px, 25%, 290px);
	scroll-snap-align: start;
}

.mzx-carousel__nav {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 18px;
}

.mzx-carousel__btn {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--mz-line);
	background: #fff;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--mz-text);
	cursor: pointer;
	transition: all .22s;
}

.mzx-carousel__btn:hover {
	background: var(--mz-gold);
	border-color: var(--mz-gold);
	color: #14100A;
}

/* ---------------------------------------------------------------------
   10. SERVICIOS (TILT 3D)
   ------------------------------------------------------------------- */
.mzx-svcgrid {
	display: grid;
	grid-template-columns: repeat(var(--mzx-cols, 3), 1fr);
	gap: 20px;
}

.mzx-svc {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 30px 28px;
	background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FB 100%);
	border: 1px solid #D5DBE7;
	border-radius: var(--mz-r-lg);
	overflow: hidden;
	isolation: isolate;
	transform-style: preserve-3d;
	/* Sombra doble incluso en reposo: una línea fina muy pegada que
	   define el borde, y una difusa que despega la tarjeta del fondo.
	   Sin esto las tarjetas se leían planas sobre el gris claro. */
	box-shadow:
		0 1px 2px rgba(10, 14, 26, .05),
		0 8px 20px rgba(10, 14, 26, .07);
	transition: transform .3s var(--mz-ease), box-shadow .3s var(--mz-ease), border-color .3s;
}

/* Barra dorada superior: aparece al pasar el mouse y marca cuál
   tarjeta está activa. */
.mzx-svc::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mz-gold), var(--mz-gold-2));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--mz-ease);
	z-index: 2;
}

.mzx-svc:hover {
	border-color: rgba(245, 166, 35, .45);
	box-shadow:
		0 2px 4px rgba(10, 14, 26, .06),
		0 22px 44px rgba(10, 14, 26, .14);
}

.mzx-svc:hover::before { transform: scaleX(1); }

.mzx-svc__shine {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: radial-gradient(
		380px circle at var(--mzx-mx, 50%) var(--mzx-my, 50%),
		rgba(245, 166, 35, .16),
		transparent 60%
	);
	transition: opacity .3s;
}

.mzx-svc:hover .mzx-svc__shine { opacity: 1; }

.mzx-svc__icon {
	display: grid;
	place-items: center;
	width: 58px; height: 58px;
	border-radius: 17px;
	/* Más contraste y un borde propio: antes el icono casi se perdía
	   contra el blanco de la tarjeta. */
	background: linear-gradient(135deg, rgba(245, 166, 35, .26), rgba(255, 214, 92, .14));
	border: 1px solid rgba(245, 166, 35, .28);
	color: var(--mz-gold-dk);
	margin-bottom: 4px;
	transition: transform .35s var(--mz-ease), box-shadow .35s var(--mz-ease);
}

.mzx-svc:hover .mzx-svc__icon {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 8px 18px rgba(245, 166, 35, .28);
}

.mzx-svc__title { font-size: 1.1875rem; }

.mzx-svc__desc {
	color: var(--mz-text-2);
	font-size: .9375rem;
	margin: 0;
	flex: 1;
}

.mzx-svc__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--mz-line);
}

/* ---- Foto opcional arriba de la ficha de servicio ----
   Mismo mecanismo que en las tarjetas de "Así resolvemos contigo":
   solo aparece si el shortcode trae imagen en ese elemento, y el
   margen negativo cancela el padding de la tarjeta (30px arriba,
   28px a los lados) para que la foto llegue a los 3 bordes. */
.mzx-svc__media {
	position: relative;
	display: block;
	margin: -30px -28px 14px;
	height: var(--mzx-media-h, clamp(120px, 15vw, 168px));
	overflow: hidden;
}

.mzx-svc__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--mz-ease);
}

.mzx-svc:hover .mzx-svc__media img { transform: scale(1.06); }

.mzx-svc__media + .mzx-svc__icon {
	position: relative;
	z-index: 2;
	margin-top: -37px;
	background: var(--mz-paper) !important;
	border-color: transparent !important;
	box-shadow: 0 8px 18px rgba(10, 14, 26, .22);
}

/* ---------------------------------------------------------------------
   11. CONTADORES
   ------------------------------------------------------------------- */
.mzx-counters { padding-block: clamp(44px, 6vw, 72px); }

.mzx-counters--oscuro {
	background: linear-gradient(135deg, var(--mz-ink) 0%, var(--mz-ink-3) 100%);
	color: #fff;
}

.mzx-counters--claro { background: var(--mz-mist); }

.mzx-counters__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 26px;
	text-align: center;
}

.mzx-counter__num {
	font-family: var(--mz-font-head);
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	background: linear-gradient(135deg, var(--mz-gold) 0%, var(--mz-gold-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-variant-numeric: tabular-nums;
}

.mzx-counter__label {
	margin-top: 8px;
	font-size: .875rem;
	font-weight: 500;
	color: var(--mz-text-inv2);
	letter-spacing: .015em;
}

.mzx-counters--claro .mzx-counter__label { color: var(--mz-text-2); }

/* ---------------------------------------------------------------------
   12. HUB DE MARCAS
   ------------------------------------------------------------------- */
.mzx-brands { position: relative; }

.mzx-brands__aura {
	position: absolute;
	top: -180px; left: 50%;
	transform: translateX(-50%);
	width: 760px; height: 460px;
	background: radial-gradient(ellipse, rgba(245, 166, 35, .17), transparent 68%);
	pointer-events: none;
}

.mzx-brandgrid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
}

.mzx-brand {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 17px;
	padding: 24px;
	border-radius: var(--mz-r-md);
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .09);
	text-decoration: none;
	color: #fff;
	backdrop-filter: blur(10px);
	transform-style: preserve-3d;
	transition: transform .35s var(--mz-ease), background .35s, border-color .35s;
}

.mzx-brand:hover {
	background: rgba(255, 255, 255, .075);
	border-color: rgba(245, 166, 35, .40);
	color: #fff;
}

.mzx-brand__mono {
	display: grid;
	place-items: center;
	width: 54px; height: 54px;
	border-radius: 15px;
	background: var(--mzx-tone-solid, rgba(245, 166, 35, .18));
	color: #fff;
	font-family: var(--mz-font-head);
	font-weight: 800;
	font-size: 1.1875rem;
	flex-shrink: 0;
	border: 1px solid rgba(255, 255, 255, .12);
}

.mzx-brand__text { min-width: 0; flex: 1; }

.mzx-brand__sub {
	display: block;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mz-gold-2);
	margin-bottom: 3px;
}

.mzx-brand__name { font-size: 1.125rem; color: #fff; margin-bottom: 5px; }

.mzx-brand__desc {
	font-size: .875rem;
	color: var(--mz-text-inv2);
	margin: 0;
	line-height: 1.55;
}

.mzx-brand__arrow {
	color: var(--mz-gold-2);
	flex-shrink: 0;
	transition: transform .3s var(--mz-ease);
	margin-top: 4px;
}

.mzx-brand:hover .mzx-brand__arrow { transform: translateX(5px); }

/* ---------------------------------------------------------------------
   13. PROYECTOS
   ------------------------------------------------------------------- */
.mzx-projgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 22px;
}

.mzx-proj {
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FB 100%);
	border: 1px solid #D5DBE7;
	border-radius: var(--mz-r-lg);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(10, 14, 26, .05), 0 8px 20px rgba(10, 14, 26, .07);
	transition: transform .35s var(--mz-ease), box-shadow .35s var(--mz-ease), border-color .35s;
}

.mzx-proj:hover {
	transform: translateY(-4px);
	border-color: var(--mzx-tone, rgba(245, 166, 35, .35));
	box-shadow: 0 2px 4px rgba(10, 14, 26, .06), 0 24px 48px rgba(10, 14, 26, .15);
}

.mzx-proj__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mz-mist); }

.mzx-proj__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s var(--mz-ease);
}

.mzx-proj:hover .mzx-proj__media img { transform: scale(1.06); }

.mzx-proj__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 30px 28px;
	flex: 1;
}

.mzx-proj__icon {
	display: grid;
	place-items: center;
	width: 60px; height: 60px;
	border-radius: 18px;
	background: var(--mzx-tone-solid, rgba(245, 166, 35, .18));
	border: 1px solid var(--mzx-tone, rgba(245, 166, 35, .22));
	color: var(--mzx-tone-text, var(--mz-gold-dk));
	margin-bottom: 6px;
}

/* La etiqueta de línea va como píldora con fondo: antes era un texto
   diminuto pegado al icono y se perdía. */
.mzx-proj__kick {
	display: inline-block;
	align-self: flex-start;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--mzx-tone-solid, rgba(245, 166, 35, .16));
	border: 1px solid var(--mzx-tone, rgba(245, 166, 35, .28));
	font-size: .875rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--mzx-tone-text, var(--mz-gold-dk));
	margin-bottom: 6px;
}

/* Estos titulares son los de mayor valor comercial de la página:
   proyectos de ticket alto. Van casi al tamaño de un título de
   sección para que se lean de un vistazo. */
.mzx-proj__title {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -.03em;
}

.mzx-proj__desc {
	color: var(--mz-text-2);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0;
}

.mzx-proj__list {
	list-style: none;
	padding: 0;
	margin: 6px 0 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
}

.mzx-proj__list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 1rem;
	color: var(--mz-text);
}

.mzx-proj__list .mzx-icon {
	color: var(--mz-teal);
	margin-top: 4px;
	stroke-width: 3;
}

.mzx-proj__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 14px;
}

/* ---------------------------------------------------------------------
   14. TESTIMONIOS
   ------------------------------------------------------------------- */
.mzx-testigrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.mzx-testi {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 30px 28px;
	background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FB 100%);
	border: 1px solid #D5DBE7;
	border-radius: var(--mz-r-lg);
	transition: transform .3s var(--mz-ease), box-shadow .3s var(--mz-ease);
}

.mzx-testi:hover { transform: translateY(-4px); box-shadow: var(--mz-sh-md); }

.mzx-testi__stars { display: flex; gap: 3px; color: var(--mz-gold); }
.mzx-testi__stars .mzx-icon { fill: currentColor; }

.mzx-testi__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--mz-text);
	flex: 1;
}

.mzx-testi__who {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--mz-line);
}

.mzx-testi__avatar {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mz-gold), var(--mz-gold-2));
	color: #14100A;
	font-family: var(--mz-font-head);
	font-weight: 800;
	flex-shrink: 0;
}

.mzx-testi__who strong { display: block; font-size: .9375rem; }
.mzx-testi__who em { font-style: normal; font-size: .8125rem; color: var(--mz-text-2); }

/* ---------------------------------------------------------------------
   15. COTIZADOR MULTI-PASO
   ------------------------------------------------------------------- */
.mzx-quote { position: relative; }

.mzx-quote__aura {
	position: absolute;
	bottom: -220px; right: -120px;
	width: 620px; height: 620px;
	background: radial-gradient(circle, rgba(0, 212, 160, .14), transparent 66%);
	pointer-events: none;
}

.mzx-quote__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 48px;
	align-items: start;
}

.mzx-quote__aside .mzx-h2 { color: #fff; margin-bottom: 12px; }

.mzx-quote__perks {
	list-style: none;
	padding: 0;
	margin: 26px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mzx-quote__perks li {
	display: flex;
	align-items: center;
	gap: 11px;
	color: #D7DCE8;
	font-size: .9375rem;
}

.mzx-quote__perks .mzx-icon { color: var(--mz-teal); stroke-width: 3; }

.mzx-quote__wa {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 22px;
	border-radius: var(--mz-r-md);
	background: rgba(0, 212, 160, .10);
	border: 1px solid rgba(0, 212, 160, .28);
	color: #fff;
	text-decoration: none;
	transition: background .25s;
}

.mzx-quote__wa:hover { background: rgba(0, 212, 160, .17); color: #fff; }
.mzx-quote__wa .mzx-icon { color: var(--mz-teal); }
.mzx-quote__wa strong { display: block; font-size: .9375rem; }
.mzx-quote__wa em { font-style: normal; font-size: .8125rem; color: var(--mz-text-inv2); }

/* Formulario */
.mzx-quote__form {
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: var(--mz-r-lg);
	padding: clamp(24px, 3vw, 36px);
	backdrop-filter: blur(14px);
}

/* Indicador de pasos */
.mzx-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
}

.mzx-steps__item {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	color: var(--mz-text-inv2);
	font-family: var(--mz-font-head);
	font-weight: 700;
	font-size: .875rem;
	flex-shrink: 0;
	transition: all .3s var(--mz-ease);
}

.mzx-steps__item.is-active,
.mzx-steps__item.is-done {
	background: linear-gradient(135deg, var(--mz-gold), var(--mz-gold-2));
	border-color: transparent;
	color: #14100A;
}

.mzx-steps__bar {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .12);
	overflow: hidden;
}

.mzx-steps__bar i {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--mz-gold), var(--mz-gold-2));
	transition: width .45s var(--mz-ease);
}

/* Pasos */
.mzx-step {
	display: none;
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;
}

.mzx-step.is-active {
	display: block;
	animation: mzx-fadein .35s var(--mz-ease);
}

@keyframes mzx-fadein {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: translateX(0); }
}

.mzx-step__legend {
	font-family: var(--mz-font-head);
	font-weight: 700;
	font-size: 1.1875rem;
	color: #fff;
	margin-bottom: 18px;
	padding: 0;
}

.mzx-step__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
}

/* Radios como tarjetas */
.mzx-radios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 9px;
}

.mzx-radio { position: relative; cursor: pointer; }
.mzx-radio input { position: absolute; opacity: 0; pointer-events: none; }

.mzx-radio span {
	display: block;
	padding: 13px 16px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .05);
	border: 1.5px solid rgba(255, 255, 255, .12);
	color: #D7DCE8;
	font-size: .875rem;
	font-weight: 500;
	text-align: center;
	transition: all .22s var(--mz-ease);
}

.mzx-radio:hover span { background: rgba(255, 255, 255, .09); }

.mzx-radio input:checked + span {
	background: rgba(245, 166, 35, .16);
	border-color: var(--mz-gold);
	color: #fff;
	font-weight: 600;
}

.mzx-radio input:focus-visible + span { outline: 2px solid var(--mz-gold-2); outline-offset: 2px; }

/* Campos */
.mzx-field { display: block; margin-bottom: 16px; }

.mzx-field > span {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--mz-text-inv2);
	margin-bottom: 7px;
}

.mzx-field input,
.mzx-field textarea,
.mzx-field select {
	width: 100%;
	padding: 13px 15px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .06);
	border: 1.5px solid rgba(255, 255, 255, .13);
	color: #fff;
	font-family: var(--mz-font-body);
	font-size: .9375rem;
	transition: border-color .22s, background .22s;
}

.mzx-field textarea { resize: vertical; min-height: 96px; }
.mzx-field select option { background: var(--mz-ink-2); color: #fff; }

.mzx-field input::placeholder,
.mzx-field textarea::placeholder { color: #6B7488; }

.mzx-field input:focus,
.mzx-field textarea:focus,
.mzx-field select:focus {
	outline: none;
	border-color: var(--mz-gold);
	background: rgba(255, 255, 255, .09);
}

.mzx-field input.mzx-err,
.mzx-field textarea.mzx-err { border-color: var(--mz-red); }

.mzx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.mzx-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .8125rem;
	color: var(--mz-text-inv2);
	cursor: pointer;
	margin-top: 6px;
}

.mzx-check input { margin-top: 3px; accent-color: var(--mz-gold); flex-shrink: 0; }

/* Honeypot: fuera de pantalla, no display:none (algunos bots lo detectan) */
.mzx-hp {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.mzx-quote__msg {
	margin-top: 20px;
	padding: 16px 20px;
	border-radius: var(--mz-r-sm);
	font-size: .9375rem;
	line-height: 1.6;
}

.mzx-quote__msg.is-ok {
	background: rgba(0, 212, 160, .13);
	border: 1px solid rgba(0, 212, 160, .32);
	color: #A8F5DE;
}

.mzx-quote__msg.is-err {
	background: rgba(239, 68, 68, .13);
	border: 1px solid rgba(239, 68, 68, .32);
	color: #FCA5A5;
}

.mzx-quote__msg a {
	display: inline-block;
	margin-top: 10px;
	color: var(--mz-gold-2);
	font-weight: 700;
}

/* ---------------------------------------------------------------------
   16. BANDA CTA
   ------------------------------------------------------------------- */
.mzx-ctaband {
	background: linear-gradient(120deg, var(--mz-gold) 0%, var(--mz-gold-2) 55%, var(--mz-gold) 100%);
	background-size: 200% auto;
	animation: mzx-shine 9s linear infinite;
	padding-block: clamp(36px, 5vw, 56px);
}

.mzx-ctaband__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
}

.mzx-ctaband__title {
	font-size: clamp(1.375rem, 2.8vw, 2rem);
	color: #14100A;
	margin-bottom: 5px;
}

.mzx-ctaband__text { margin: 0; color: #3D2E10; font-size: 1rem; }

/* ---------------------------------------------------------------------
   17. WHATSAPP FLOTANTE
   ------------------------------------------------------------------- */
.mzx-wa {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 11px;
}

.mzx-wa__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 60px; height: 60px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	box-shadow: 0 8px 26px rgba(37, 211, 102, .45);
	transition: transform .28s var(--mz-ease);
}

.mzx-wa__btn:hover { transform: scale(1.09); color: #fff; }

.mzx-wa__pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid #25D366;
	animation: mzx-wave 2.2s ease-out infinite;
	pointer-events: none;
}

@keyframes mzx-wave {
	0%   { transform: scale(1);   opacity: .75; }
	100% { transform: scale(1.65); opacity: 0; }
}

.mzx-wa__bubble {
	position: relative;
	max-width: 230px;
	padding: 13px 34px 13px 16px;
	border-radius: 15px 15px 4px 15px;
	background: #fff;
	color: var(--mz-text);
	font-size: .875rem;
	line-height: 1.45;
	box-shadow: var(--mz-sh-md);
	animation: mzx-pop .35s var(--mz-ease);
}

@keyframes mzx-pop {
	from { opacity: 0; transform: translateY(10px) scale(.94); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mzx-wa__close {
	position: absolute;
	top: 5px; right: 8px;
	border: 0;
	background: transparent;
	font-size: 1.125rem;
	line-height: 1;
	color: #98A0B3;
	cursor: pointer;
	padding: 3px;
}

/* ---------------------------------------------------------------------
   18. BARRA DE PROGRESO
   ------------------------------------------------------------------- */
.mzx-progress {
	position: fixed;
	top: 0;
	inset-inline: 0;
	height: 3px;
	z-index: 9999;
	background: transparent;
	pointer-events: none;
}

.mzx-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--mz-gold), var(--mz-gold-2), var(--mz-teal));
	transition: width .1s linear;
}

/* ---------------------------------------------------------------------
   19. SCROLL REVEAL
   ------------------------------------------------------------------- */
.mzx-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .65s var(--mz-ease), transform .65s var(--mz-ease);
}

.mzx-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------------
   20. AVISOS DE ADMIN
   ------------------------------------------------------------------- */
.mzx-notice {
	max-width: 1240px;
	margin: 24px auto;
	padding: 16px 20px;
	border-radius: var(--mz-r-sm);
	background: #FFF7E6;
	border: 1px solid #F5A623;
	border-left-width: 4px;
	color: #7A5200;
	font-size: .9375rem;
}

/* ---------------------------------------------------------------------
   21. RESPONSIVE
   ------------------------------------------------------------------- */
/* En pantallas táctiles la animación se apaga y el carrusel pasa a ser
   deslizable con el dedo. Perseguir una tarjeta en movimiento con el
   pulgar es frustrante; deslizar es lo que la gente ya espera. */
@media (hover: none) {
	.mzx-mq {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.mzx-mq::-webkit-scrollbar { display: none; }

	.mzx-mq__track { animation: none !important; width: auto; }

	/* La copia duplicada sobra si no hay bucle automático. */
	.mzx-mq__track .mzx-mini[aria-hidden="true"] { display: none; }

	.mzx-mini { scroll-snap-align: start; }

	.mzx-show__pause { display: none; }
}

/* ---- TABLET (768–1024px) ----
   La vitrina se apila: la tarjeta arriba en horizontal y el carrusel
   debajo, deslizable. Lado a lado no cabe sin apretar el texto. */
@media (max-width: 1024px) {
	.mzx-show {
		--mzx-row: auto;
		--mzx-show-y: clamp(14px, 2.5vw, 22px);
		--mzx-visible: 3;
		/* Mismo valor que .mzx-container en móvil/tablet, para que la
		   vitrina siga alineada con el resto del contenido. */
		--mzx-show-gutter: clamp(16px, 4vw, 32px);
	}

	.mzx-show__inner,
	.mzx-show__inner--flip {
		grid-template-columns: 1fr;
		gap: 14px;
		min-height: 0;
		padding-inline: var(--mzx-show-gutter);
	}

	/* Apilado, la tarjeta siempre va arriba. */
	.mzx-show__inner--flip .mzx-show__panel,
	.mzx-show__inner--flip .mzx-mq { order: 0; }

	/* La tarjeta se vuelve horizontal: texto a la izquierda,
	   miniaturas y botón a la derecha. Ocupa menos alto. */
	.mzx-show__panel--card { padding: 16px 18px; }
	.mzx-show__desc { -webkit-line-clamp: 2; line-clamp: 2; }
	.mzx-show__foot { padding-top: 10px; }

	/* El carrusel sangra a los bordes y se desliza con el dedo. */
	.mzx-show__inner .mzx-mq {
		margin-inline: calc(var(--mzx-show-gutter) * -1);
		padding-inline: var(--mzx-show-gutter);
	}

	.mzx-show__inner .mzx-mq__fade { display: none; }

	/* Apilado ya no hay que igualar alturas: las tarjetas vuelven a
	   ancho fijo y proporción normal, que se lee mejor. */
	.mzx-mq { container-type: normal; }
	.mzx-mq__track { height: auto; }
	.mzx-mini { flex: 0 0 200px !important; height: auto; }
	.mzx-mini__media { flex: 0 0 auto; aspect-ratio: 4 / 3; min-height: 0; }

	.mzx-bento { grid-template-columns: repeat(2, 1fr); }
	.mzx-bento__card--lg { grid-column: span 2; grid-row: span 1; }
	.mzx-bento__card--md { grid-column: span 2; }

	.mzx-cards   { grid-template-columns: repeat(3, 1fr); }
	.mzx-svcgrid { grid-template-columns: repeat(2, 1fr); }

	.mzx-quote__inner { grid-template-columns: 1fr; gap: 34px; }
}

/* ---- MÓVIL (hasta 767px) ---- */
@media (max-width: 767px) {

	/* Tarjeta de la vitrina más compacta y tipografía ajustada. */
	.mzx-show__panel--card { padding: 15px 16px; border-radius: var(--mz-r-sm); }
	.mzx-show__icon { width: 36px; height: 36px; border-radius: 10px; }
	.mzx-show__title { font-size: 1.0625rem; }
	.mzx-show__desc  { font-size: .8125rem; }

	/* El pie se parte en dos líneas: las miniaturas arriba y el botón
	   abajo a lo ancho, que es más fácil de tocar con el pulgar. */
	.mzx-show__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.mzx-show__thumbs { justify-content: flex-start; }
	.mzx-show__thumb  { width: 44px; height: 44px; }
	.mzx-show__cta    { width: 100%; justify-content: center; padding-block: 11px; }

	/* Tarjeta y media a la vista: el corte de la segunda avisa de que
	   hay más y se puede deslizar. */
	.mzx-mini { flex: 0 0 clamp(150px, 46vw, 190px) !important; }

	.mzx-bento,
	.mzx-svcgrid { grid-template-columns: 1fr; }

	.mzx-bento__card--lg,
	.mzx-bento__card--md,
	.mzx-bento__card--sm { grid-column: span 1; }

	.mzx-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }

	.mzx-projgrid,
	.mzx-brandgrid,
	.mzx-testigrid { grid-template-columns: 1fr; }

	.mzx-grid2 { grid-template-columns: 1fr; }

	/* En móvil el buscador se queda en UNA sola fila (icono + campo +
	   botón), como cualquier buscador de celular. Antes el botón
	   "Buscar" se apilaba debajo en su propia fila a lo ancho, y esas
	   dos filas juntas se sentían pesadas en pantallas angostas.
	   Ahora el botón se reduce a un círculo con solo la flecha, pegado
	   al final del mismo campo — el texto "Buscar" se oculta porque
	   ya es evidente por el contexto (está dentro del buscador). */
	.mzx-search__form { padding: 6px 6px 6px 16px; }

	.mzx-search__input { padding: 12px 6px; font-size: .9375rem; }

	.mzx-search__btn {
		flex: 0 0 auto;
		width: 42px;
		height: 42px;
		padding: 0;
		gap: 0;
		justify-content: center;
	}
	.mzx-search__btn-text { display: none; }

	.mzx-hero__actions { width: 100%; flex-direction: column; }
	.mzx-hero__actions .mzx-btn { width: 100%; }

	.mzx-chips { justify-content: flex-start; }

	.mzx-sechead { flex-direction: column; align-items: flex-start; }

	.mzx-svc__foot { flex-direction: column; align-items: stretch; gap: 10px; }
	.mzx-svc__foot .mzx-btn { width: 100%; }

	.mzx-card__actions { flex-direction: column; }

	.mzx-ctaband__inner { flex-direction: column; align-items: flex-start; }
	.mzx-ctaband__inner .mzx-btn { width: 100%; }

	.mzx-radios { grid-template-columns: 1fr 1fr; }

	.mzx-wa { right: 14px; bottom: 14px; }
	.mzx-wa__btn { width: 54px; height: 54px; }
	.mzx-wa__bubble { max-width: 190px; font-size: .8125rem; }

	/* El tilt 3D se desactiva en táctil: no hay cursor que seguir */
	[data-mzx-tilt] { transform: none !important; }
}

@media (max-width: 420px) {
	.mzx-cards  { grid-template-columns: 1fr; }
	.mzx-radios { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   22. ACCESIBILIDAD — MOVIMIENTO REDUCIDO
   Respeta la preferencia del sistema operativo del visitante.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mzx *,
	.mzx *::before,
	.mzx *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.mzx-reveal { opacity: 1; transform: none; }
	.mzx-hero__canvas { display: none; }
	.mzx-blob { animation: none; }

	/* El carrusel deja de moverse solo y pasa a ser deslizable. */
	.mzx-mq { overflow-x: auto; scroll-snap-type: x mandatory; }
	.mzx-mq__track { animation: none !important; width: auto; }
	.mzx-mq__track .mzx-mini[aria-hidden="true"] { display: none; }
	.mzx-mini { scroll-snap-align: start; }
}

/* ---------------------------------------------------------------------
   23a. ELIMINAR EL ESPACIADO DE ELEMENTOR ALREDEDOR DE LOS COMPONENTES

   Cada sección de Elementor trae su propio relleno vertical por
   defecto. Como los componentes ya traen el suyo, quedaban franjas
   en blanco entre una sección y otra.

   En vez de pedirte que pongas 0 a mano en cada una de las quince
   secciones, aquí se detectan automáticamente los contenedores que
   envuelven un componente del diseño y se les quita el espaciado
   vertical. Solo el vertical: el horizontal se respeta.
   ------------------------------------------------------------------- */

/* Widget Shortcode y sus envoltorios directos */
.elementor-widget-shortcode:has(.mzx),
.elementor-widget-shortcode:has(.mzx) > .elementor-widget-container,
.elementor-shortcode:has(> .mzx) {
	margin-block: 0 !important;
	padding-block: 0 !important;
}

/* Secciones clásicas y columnas */
.elementor-section:has(.mzx),
.elementor-section:has(.mzx) > .elementor-container,
.elementor-column:has(.mzx) > .elementor-widget-wrap {
	margin-block: 0 !important;
	padding-block: 0 !important;
}

/* ---- ANCHO COMPLETO GARANTIZADO ----

   HISTORIA DE ESTE BLOQUE (para no repetir el error):

   Durante varias versiones aquí hubo un truco para que las secciones
   se "salieran" del contenedor de Elementor y llegaran al borde de la
   pantalla solas:

       width: 100vw;
       margin-inline: calc(50% - 50vw);

   Ese truco parece universal pero NO lo es: el 50% se mide sobre el
   ancho del PADRE, así que solo da el resultado correcto si el padre
   está perfectamente centrado en la pantalla y mide lo que uno espera.
   En un sitio real las secciones de Elementor vienen con anchos
   distintos según la plantilla y los ajustes de cada página (se
   midieron casos de 871px, 1120px y hasta 1507px en la misma
   instalación, con una ventana de 1359px). Con cada ancho distinto el
   cálculo da un desplazamiento distinto, y de ahí el síntoma: la
   sección se salía por la izquierda y dejaba un hueco blanco a la
   derecha, distinto en cada página.

   Se intentó parchear midiendo el ancho real por JavaScript
   (window.innerWidth y luego document.documentElement.clientWidth) y
   pasándolo como variable --mzx-100vw. No resolvió el problema de
   fondo, porque el error no estaba en el ancho de la ventana sino en
   el 50% del padre, que es un valor que este CSS no puede conocer ni
   controlar desde aquí.

   DECISIÓN: se elimina el truco. El ancho de la sección lo maneja
   Elementor con su ajuste nativo (Diseño → Ancho del contenido →
   Ancho completo), que es para lo que existe, y este CSS solo se
   ocupa de los componentes. Es predecible y no se descuadra.

   Resultado: la sección ocupa el 100% del espacio que le dé
   Elementor. Si se quiere el fondo de borde a borde, se configura la
   sección en Elementor a Ancho completo. */
body:has(.mzx) { overflow-x: clip; }

.mzx-hero,
.mzx-section,
.mzx-show,
.mzx-trust,
.mzx-counters,
.mzx-ctaband {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

/* El contenedor interno vuelve a centrar el contenido, así que el
   texto no se pega a los bordes de la pantalla. */
.mzx-widget-container,
.elementor-widget-shortcode > .elementor-widget-container {
	max-width: 100% !important;
	padding-inline: 0 !important;
}

/* Contenedores flexbox de Elementor 3.6+ y 4.x */
.e-con:has(> .e-con-inner > .elementor-widget-shortcode .mzx),
.e-con:has(.mzx),
.e-con:has(.mzx) > .e-con-inner {
	margin-block: 0 !important;
	padding-block: 0 !important;
	--padding-top: 0;
	--padding-bottom: 0;
}

/* El componente ocupa todo el ancho disponible, sin importar el
   ancho de contenido que tenga configurado la sección. */
.elementor-widget-shortcode > .elementor-widget-container > .mzx,
.elementor-shortcode > .mzx {
	width: 100%;
}

/* ---------------------------------------------------------------------
   23b. BLINDAJE CONTRA LOS ESTILOS GLOBALES DEL SITIO

   Elementor aplica sus colores y tipografías globales con reglas del
   tipo ".elementor-kit-123 h1 { color: ... }". Esa regla pesa más que
   una clase suelta como ".mzx-hero__title", así que se imponía sobre
   el diseño y los títulos salían en azul oscuro sobre fondo oscuro.

   Aquí se repiten las declaraciones de color anteponiendo ".mzx".
   Dos clases pesan más que una clase + una etiqueta, así que estas
   ganan. No se usa !important para que tú puedas seguir ajustando
   cosas puntuales desde Elementor si lo necesitas.
   ------------------------------------------------------------------- */

/* ---- Sobre fondo oscuro: todo el texto va claro ---- */
.mzx .mzx-hero__title,
.mzx.mzx-hero .mzx-hero__title { color: #fff; }

/* El degradado del título necesita color transparente para verse. */
.mzx .mzx-hero__title .mzx-grad,
.mzx .mzx-grad { color: transparent; }

.mzx .mzx-hero__sub      { color: var(--mz-text-inv2); }
.mzx .mzx-hero__eyebrow  { color: var(--mz-text-inv2); }

.mzx-section--dark .mzx-h2,
.mzx-section--dark .mzx-sechead .mzx-h2,
.mzx .mzx-sechead--dark .mzx-h2 { color: #fff; }

.mzx-section--dark .mzx-lead,
.mzx .mzx-sechead--dark .mzx-lead { color: var(--mz-text-inv2); }

/* ---- Chips del hero ---- */
.mzx .mzx-chip        { color: #E8EBF2; }
.mzx .mzx-chip:hover  { color: #14100A; }
.mzx .mzx-chips__label{ color: var(--mz-text-inv2); }

/* ---- Botones ---- */
.mzx .mzx-btn--gold,
.mzx .mzx-btn--gold:hover,
.mzx .mzx-btn--gold:focus  { color: #14100A; }

.mzx .mzx-btn--ghost,
.mzx .mzx-btn--ghost:hover,
.mzx .mzx-btn--ghost:focus { color: #fff; }

.mzx .mzx-btn--dark,
.mzx .mzx-btn--dark:hover  { color: #fff; }

.mzx .mzx-btn--line        { color: var(--mz-text); }
.mzx .mzx-btn--line:hover  { color: var(--mz-gold-dk); }

.mzx .mzx-search__btn      { color: #14100A; }

/* ---- Barra de confianza y contadores ---- */
.mzx .mzx-trust__text    { color: #D7DCE8; }
.mzx .mzx-counter__label { color: var(--mz-text-inv2); }
.mzx .mzx-counters--claro .mzx-counter__label { color: var(--mz-text-2); }

/* ---- Mosaico de pilares ---- */
.mzx .mzx-bento__card       { color: var(--mz-text); }
.mzx .mzx-bento__title      { color: var(--mz-text); }
.mzx .mzx-bento__desc       { color: var(--mz-text-2); }
.mzx .mzx-tone--dark .mzx-bento__title { color: #fff; }
.mzx .mzx-tone--dark .mzx-bento__desc  { color: var(--mz-text-inv2); }

/* ---- Vitrinas ---- */
.mzx .mzx-show__panel--dark .mzx-show__title { color: #fff; }
.mzx .mzx-show__panel--dark .mzx-show__desc  { color: var(--mz-text-inv2); }
.mzx .mzx-show__panel--light .mzx-show__title{ color: var(--mz-text); }
.mzx .mzx-show__panel--light .mzx-show__desc { color: var(--mz-text-2); }
.mzx .mzx-mini             { color: var(--mz-text); }
.mzx .mzx-mini__title      { color: inherit; }
.mzx-section--dark .mzx-mini,
.mzx-section--dark .mzx-mini .mzx-mini__title { color: #fff; }

/* ---- Servicios, marcas, proyectos, testimonios ---- */
.mzx .mzx-svc__title   { color: var(--mz-text); }
.mzx .mzx-svc__desc    { color: var(--mz-text-2); }
.mzx .mzx-brand__name  { color: #fff; }
.mzx .mzx-brand__desc  { color: var(--mz-text-inv2); }
.mzx .mzx-proj__title  { color: var(--mz-text); }
.mzx .mzx-proj__desc   { color: var(--mz-text-2); }
.mzx .mzx-proj__list li{ color: var(--mz-text); }
.mzx .mzx-testi__text  { color: var(--mz-text); }

/* ---- Cotizador ---- */
.mzx .mzx-quote__aside .mzx-h2 { color: #fff; }
.mzx .mzx-step__legend         { color: #fff; }
.mzx .mzx-field > span         { color: var(--mz-text-inv2); }
.mzx .mzx-field input,
.mzx .mzx-field textarea,
.mzx .mzx-field select         { color: #fff; }
.mzx .mzx-radio span           { color: #D7DCE8; }
.mzx .mzx-radio input:checked + span { color: #fff; }
.mzx .mzx-check                { color: var(--mz-text-inv2); }

/* ---- Banda de llamado a la acción ---- */
.mzx .mzx-ctaband__title { color: #14100A; }
.mzx .mzx-ctaband__text  { color: #3D2E10; }

/* ---- Enlaces internos del sistema ---- */
.mzx .mzx-link                     { color: var(--mz-gold-dk); }
.mzx-section--dark .mzx-link,
.mzx .mzx-sechead--dark .mzx-link  { color: var(--mz-gold-2); }

/* ---- Tipografía: que el tema no cambie la familia del diseño ---- */
.mzx .mzx-hero__title,
.mzx .mzx-h2,
.mzx .mzx-show__title,
.mzx .mzx-bento__title,
.mzx .mzx-svc__title,
.mzx .mzx-brand__name,
.mzx .mzx-proj__title,
.mzx .mzx-mini__title,
.mzx .mzx-card__title { font-family: var(--mz-font-head); }

/* Elementor y algunos temas fuerzan MAYÚSCULAS en los títulos.
   Aquí se devuelven a como fueron escritos. */
.mzx .mzx-hero__title,
.mzx .mzx-h2,
.mzx .mzx-show__title,
.mzx .mzx-bento__title,
.mzx .mzx-svc__title,
.mzx .mzx-proj__title { text-transform: none; }

/* ---------------------------------------------------------------------
   23c. BLINDAJE DE FORMA Y FONDO

   El bloque anterior protegía los colores de texto. Faltaba proteger
   la FORMA. Elementor aplica a los botones globales reglas como
   ".elementor-kit-123 button:hover { background-color: … }", que
   pesan más que ".mzx-chip:hover". Por eso los botones salían
   cuadrados y los chips se ponían rosados en vez de dorados.

   Aquí se repiten esas propiedades con tres clases de especificidad,
   que gana sobre las reglas del kit. En el radio de los bordes sí se
   usa !important, porque algunos temas lo aplican en línea y esa es
   la única forma de imponerse.
   ------------------------------------------------------------------- */

/* ---- Botones: forma de píldora, siempre ---- */
.mzx .mzx-btn,
.mzx .mzx-btn:hover,
.mzx .mzx-btn:focus,
.mzx .mzx-btn:active {
	border-radius: 999px !important;
	font-family: var(--mz-font-head);
	text-transform: none;
	text-decoration: none;
	letter-spacing: 0;
}

.mzx .mzx-btn--gold,
.mzx .mzx-btn--gold:hover,
.mzx .mzx-btn--gold:focus {
	background: linear-gradient(135deg, var(--mz-gold) 0%, var(--mz-gold-2) 100%);
	border: 0;
}

.mzx .mzx-btn--ghost,
.mzx .mzx-btn--ghost:focus {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .20);
}

.mzx .mzx-btn--ghost:hover { background: rgba(255, 255, 255, .16); }

.mzx .mzx-btn--dark,
.mzx .mzx-btn--dark:focus { background: var(--mz-ink); border: 0; }
.mzx .mzx-btn--dark:hover { background: var(--mz-ink-2); }

.mzx .mzx-btn--line,
.mzx .mzx-btn--line:focus { background: transparent; border: 1.5px solid var(--mz-line); }
.mzx .mzx-btn--line:hover { background: transparent; border-color: var(--mz-gold); }

/* ---- Chips: dorados al pasar el mouse, nunca rosados ---- */
.mzx .mzx-chip,
.mzx .mzx-chip:focus {
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	font-family: var(--mz-font-body);
	text-transform: none;
	letter-spacing: 0;
}

.mzx .mzx-chip:hover,
.mzx .mzx-chip:focus-visible {
	background: linear-gradient(135deg, var(--mz-gold) 0%, var(--mz-gold-2) 100%) !important;
	border-color: var(--mz-gold);
	color: #14100A !important;
}

/* ---- Buscador ---- */
.mzx .mzx-search__form  { border-radius: 999px !important; }
.mzx .mzx-search__btn,
.mzx .mzx-search__btn:hover,
.mzx .mzx-search__btn:focus {
	border-radius: 999px !important;
	background: linear-gradient(135deg, var(--mz-gold) 0%, var(--mz-gold-2) 100%);
	border: 0;
	font-family: var(--mz-font-head);
	text-transform: none;
}

/* El campo de búsqueda tiene que ser invisible: la píldora blanca que
   lo rodea es la que se ve. El tema le estaba pintando su propio fondo
   y borde, y quedaba una caja dentro de otra. Aquí se anula todo, con
   !important porque los estilos de formulario de los temas suelen ir
   con especificidad muy alta. */
.mzx .mzx-search__input,
.mzx .mzx-search__input:focus,
.mzx .mzx-search__input:hover,
.mzx .mzx-search__input:active,
.mzx input[type="search"].mzx-search__input {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	-webkit-appearance: none;
	appearance: none;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
}

/* Chrome dibuja un fondo amarillo al autocompletar. Se neutraliza
   con una sombra interior del mismo color del contenedor. */
.mzx .mzx-search__input:-webkit-autofill,
.mzx .mzx-search__input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 60px #fff inset !important;
	-webkit-text-fill-color: var(--mz-text) !important;
}

/* ---- Radios y campos del cotizador ---- */
.mzx .mzx-radio span   { border-radius: 11px !important; }
.mzx .mzx-field input,
.mzx .mzx-field textarea,
.mzx .mzx-field select { border-radius: 11px !important; }

/* ---- Tarjetas: que conserven sus esquinas redondeadas ---- */
.mzx .mzx-bento__card  { border-radius: var(--mz-r-lg) !important; }
.mzx .mzx-svc          { border-radius: var(--mz-r-lg) !important; }
.mzx .mzx-card         { border-radius: var(--mz-r-md) !important; }
.mzx .mzx-mini         { border-radius: var(--mz-r-sm) !important; }
.mzx .mzx-proj         { border-radius: var(--mz-r-lg) !important; }
.mzx .mzx-testi        { border-radius: var(--mz-r-lg) !important; }
.mzx .mzx-brand        { border-radius: var(--mz-r-md) !important; }
.mzx .mzx-show__panel--card { border-radius: var(--mz-r-md) !important; }
.mzx .mzx-quote__form  { border-radius: var(--mz-r-lg) !important; }

/* ---- Pausa del carrusel y botón de WhatsApp ---- */
.mzx .mzx-show__pause  { border-radius: 50% !important; }
.mzx .mzx-wa__btn      { border-radius: 50% !important; }

/* ---- Etiquetas e insignias ---- */
.mzx .mzx-badge,
.mzx .mzx-mini__badge,
.mzx .mzx-proj__kick { border-radius: 999px !important; }

/* ---- Cerrar de la burbuja de WhatsApp ----
   Es un <button>, así que Elementor le aplicaba su relleno y su color
   global: salía enorme y rosado al pasar el mouse. Aquí vuelve a ser
   una equis discreta en la esquina de la burbuja. */
.mzx .mzx-wa__close,
.mzx .mzx-wa__close:focus {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 22px !important;
	height: 22px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	place-items: center;
	border: 0 !important;
	border-radius: 50% !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: #98A0B3 !important;
	font-family: var(--mz-font-body);
	font-size: 1.0625rem !important;
	font-weight: 400;
	line-height: 1 !important;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: color .2s, background-color .2s;
}

.mzx .mzx-wa__close:hover {
	background-color: rgba(10, 14, 26, .07) !important;
	color: var(--mz-text) !important;
}

/* ---- Flechas del carrusel de productos ----
   Mismo caso: son <button> y tomaban el estilo global. */
.mzx .mzx-carousel__btn,
.mzx .mzx-carousel__btn:focus {
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid var(--mz-line) !important;
	background: #fff !important;
	background-color: #fff !important;
	box-shadow: none !important;
	color: var(--mz-text) !important;
	font-family: var(--mz-font-body);
	font-size: 1.5rem !important;
	line-height: 1 !important;
	text-transform: none;
}

.mzx .mzx-carousel__btn:hover {
	background: var(--mz-gold) !important;
	background-color: var(--mz-gold) !important;
	border-color: var(--mz-gold) !important;
	color: #14100A !important;
}

/* ---- Bloque de WhatsApp del cotizador ----
   El texto salía apagado sobre el fondo verde y casi no se leía.
   Ahora el título va en blanco pleno y la bajada en verde claro,
   con más contraste contra el fondo. */
.mzx .mzx-quote__wa {
	background: rgba(0, 212, 160, .14);
	border: 1px solid rgba(0, 212, 160, .42);
	border-radius: var(--mz-r-md) !important;
	color: #fff;
}

.mzx .mzx-quote__wa:hover {
	background: rgba(0, 212, 160, .22);
	border-color: var(--mz-teal);
}

.mzx .mzx-quote__wa strong {
	color: #fff;
	font-family: var(--mz-font-head);
	font-weight: 700;
	font-size: 1rem;
}

.mzx .mzx-quote__wa em {
	color: #7FEBCE;
	font-weight: 600;
	font-size: .875rem;
}

.mzx .mzx-quote__wa .mzx-icon { color: var(--mz-teal); }

/* ---- Botón de pausa del carrusel ----
   Elementor lo estaba pintando con su color de botón global y salía
   como un óvalo rosado enorme. Aquí se le devuelve su forma: un
   círculo pequeño y discreto en la esquina. */
.mzx .mzx-show__pause,
.mzx .mzx-show__pause:focus {
	width: 26px !important;
	height: 26px !important;
	min-width: 0;
	min-height: 0;
	padding: 0 !important;
	background: rgba(255, 255, 255, .10) !important;
	border: 1px solid rgba(255, 255, 255, .22) !important;
	box-shadow: none !important;
	color: #fff;
	opacity: .5;
	line-height: 1;
}

.mzx .mzx-show__pause:hover {
	background: rgba(245, 166, 35, .22) !important;
	border-color: var(--mz-gold) !important;
	color: var(--mz-gold-2);
	opacity: 1;
}

.mzx .mzx-show__panel--light .mzx-show__pause,
.mzx .mzx-show__panel--light .mzx-show__pause:focus {
	background: rgba(10, 14, 26, .06) !important;
	border-color: rgba(10, 14, 26, .16) !important;
	color: var(--mz-text-2);
}

/* Los iconos son SVG reales: se muestra uno u otro según el estado.
   Ya no dependen de bordes CSS que el tema pudiera pisar. */
.mzx .mzx-show__ico-pause,
.mzx .mzx-show__ico-play {
	display: block;
	width: 11px;
	height: 12px;
	fill: currentColor;
	pointer-events: none;
}

.mzx .mzx-show__ico-play  { display: none; margin-left: 2px; }
.mzx .mzx-show__pause.is-paused .mzx-show__ico-pause { display: none; }
.mzx .mzx-show__pause.is-paused .mzx-show__ico-play  { display: block; }

/* ---------------------------------------------------------------------
   23. IMPRESIÓN
   ------------------------------------------------------------------- */
@media print {
	.mzx-wa,
	.mzx-progress,
	.mzx-hero__bg { display: none !important; }

	.mzx-section--dark,
	.mzx-hero { background: #fff !important; color: #000 !important; }
}

/* ---------------------------------------------------------------------
   24. ENCABEZADO Y PIE COMO COMPONENTES

   Una sola pieza para los tres tamaños de pantalla. Antes el sitio
   tenía dos plantillas separadas (HeaderPC y HeaderMobile) y había que
   configurar a mano en cuáles dispositivos se ocultaba cada una;
   bastaba olvidar una casilla para quedarse sin encabezado en tablet.
   Aquí no hay nada que ocultar: el mismo bloque se reacomoda solo.
   ------------------------------------------------------------------- */

.mzx-hd {
	position: relative;
	z-index: 100;
	background: var(--mz-ink);
}

/* ---- Barra de contacto (solo escritorio) ---- */
.mzx-hd__top {
	background: var(--mz-ink-2);
	font-size: .8125rem;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.mzx-hd__top-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
}

.mzx-hd__top-info { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Doble clase (.mzx .mzx-hd__…) para ganarle al color de enlace del
   tema, que pintaba el teléfono y el correo de azul oscuro sobre el
   fondo oscuro y los dejaba casi ilegibles. */
.mzx .mzx-hd__top-in a,
.mzx .mzx-hd__top-hr,
.mzx-hd .mzx-hd__top-in a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #C3CAD8 !important;
	text-decoration: none;
	transition: color .2s;
}

.mzx .mzx-hd__top-in a:hover,
.mzx-hd .mzx-hd__top-in a:hover { color: var(--mz-gold-2) !important; }

.mzx .mzx-hd__top-acc,
.mzx-hd .mzx-hd__top-acc { color: #E8EBF2 !important; font-weight: 600; }

/* ---- Franja del logo. Aquí va la imagen de los cubos. ---- */
.mzx-hd__main {
	position: relative;
	background-color: var(--mz-ink);
	background-image: var(--mzx-hd-img, none);
	background-size: cover;
	background-position: center;
}

/* Velo oscuro: la foto de fondo tiene mucho contraste y sin esto el
   logo y el menú se pierden encima de los cubos claros. */
.mzx-hd__main::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(10, 14, 26, var(--mzx-hd-velo, .55)),
		rgba(10, 14, 26, calc(var(--mzx-hd-velo, .55) + .18)));
	pointer-events: none;
}

.mzx-hd__main-in,
.mzx-hd__searchrow { position: relative; z-index: 1; }

.mzx-hd__main-in {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 74px;
}

/* ---- Logo ---- */
.mzx-hd__logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.mzx-hd__logo img { max-height: var(--mzx-hd-logo, 58px); width: auto; display: block; }
.mzx-hd__logo span { color: #fff; font-family: var(--mz-font-head); font-weight: 800; font-size: 1.25rem; }

/* ---- Menú de escritorio ---- */
.mzx-hd__nav { flex: 1; min-width: 0; }

.mzx-hd .mzx-hd__menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.mzx-hd .mzx-hd__menu li { position: relative; }

.mzx-hd .mzx-hd__menu a {
	display: block;
	padding: 9px 12px;
	color: #E8EBF2;
	font-family: var(--mz-font-head);
	font-weight: 600;
	font-size: .875rem;
	text-decoration: none;
	border-radius: 9px;
	transition: color .2s, background-color .2s;
}

.mzx-hd .mzx-hd__menu a:hover,
.mzx-hd .mzx-hd__menu .current-menu-item > a {
	color: var(--mz-gold-2);
	background: rgba(255, 255, 255, .07);
}

/* Submenús */
.mzx-hd .mzx-hd__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 230px;
	list-style: none;
	margin: 0;
	padding: 8px;
	background: var(--mz-ink-2);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--mz-r-md);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .22s, transform .22s, visibility .22s;
}

/* Respaldo SIN JavaScript. Va acotado con :not(.mzx-hover-js) para que
   cuando el temporizador esté activo esta regla ni siquiera exista:
   así hay una sola condición de apertura y no pueden abrirse dos
   submenús a la vez, que fue el fallo de la 1.9.1. */
html:not(.mzx-hover-js) .mzx-hd .mzx-hd__menu li:hover > .sub-menu,
html:not(.mzx-hover-js) .mzx-hd .mzx-hd__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mzx-hd .mzx-hd__menu .sub-menu a { font-weight: 500; font-size: .8125rem; }

/* ---- Cuenta y carrito ---- */
.mzx-hd__acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.mzx-hd .mzx-hd__act {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--mz-gold-2);
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.mzx-hd .mzx-hd__act:hover { background: rgba(255, 255, 255, .09); color: #fff; }

.mzx-hd__badge {
	position: absolute;
	top: 3px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--mz-gold);
	color: #14100A;
	font-family: var(--mz-font-head);
	font-size: .6875rem;
	font-weight: 800;
	line-height: 1;
}

/* ---- Botón de menú: solo aparece cuando el menú no cabe ---- */
.mzx-hd .mzx-hd__burger {
	display: none;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color .2s;
}

.mzx-hd .mzx-hd__burger:hover { background: rgba(255, 255, 255, .09); }

/* ---- Buscador ---- */
.mzx-hd__searchrow { padding-bottom: 14px; }
.mzx-hd__searchrow .mzx-search-standalone { max-width: 100%; }

/* ---------------------------------------------------------------------
   24b. MENÚ LATERAL (móvil y tablet)
   ------------------------------------------------------------------- */

.mzx-drawer { position: fixed; inset: 0; z-index: 9999; }
.mzx-drawer[hidden] { display: none; }

.mzx-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(6, 9, 17, .55);
	opacity: 0;
	transition: opacity .26s var(--mz-ease);
}

.mzx-drawer.is-open .mzx-drawer__scrim { opacity: 1; }

.mzx-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(88vw, 380px);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 0 60px rgba(0, 0, 0, .35);
	transform: translateX(-100%);
	transition: transform .26s var(--mz-ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mzx-drawer.is-open .mzx-drawer__panel { transform: translateX(0); }

.mzx-drawer__head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: var(--mz-ink);
	color: #fff;
}

.mzx-drawer__title { font-family: var(--mz-font-head); font-weight: 700; font-size: 1rem; }

.mzx-drawer .mzx-drawer__close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
}

.mzx-drawer .mzx-drawer__close:hover { background: rgba(255, 255, 255, .2); }

.mzx-drawer__nav { padding: 6px 0; }

.mzx-drawer .mzx-drawer__menu,
.mzx-drawer .mzx-drawer__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mzx-drawer .mzx-drawer__menu a {
	display: block;
	padding: 13px 18px;
	color: var(--mz-text);
	font-family: var(--mz-font-head);
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: none;
	border-bottom: 1px solid var(--mz-line);
}

.mzx-drawer .mzx-drawer__menu a:hover { background: var(--mz-mist); color: var(--mz-gold-dk); }

.mzx-drawer .mzx-drawer__menu .sub-menu a {
	padding-inline-start: 34px;
	font-weight: 500;
	font-size: .875rem;
	color: var(--mz-text-2);
}

/* ---- Bloque de contacto dentro del menú ----
   Estos son los datos que en escritorio van en la barra de arriba. En
   el celular esa barra estorba, y aquí abajo es donde la gente los
   busca cuando ya decidió escribir. */
.mzx-drawer__help {
	margin-top: auto;
	padding: 20px 18px 26px;
	border-top: 8px solid var(--mz-mist);
}

.mzx-drawer__help-t {
	margin: 0 0 6px;
	font-family: var(--mz-font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--mz-text);
}

.mzx-drawer__help-d {
	margin: 0 0 14px;
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--mz-text-2);
}

.mzx-drawer .mzx-drawer__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin-bottom: 9px;
	padding: 12px 14px;
	border: 1px solid var(--mz-line);
	border-radius: var(--mz-r-sm);
	background: #fff;
	color: var(--mz-text);
	font-family: var(--mz-font-body);
	font-weight: 600;
	font-size: .875rem;
	text-decoration: none;
	transition: border-color .2s, background-color .2s;
}

.mzx-drawer .mzx-drawer__btn:hover { border-color: var(--mz-gold); background: #FFFDF7; }

.mzx-drawer .mzx-drawer__btn--wa { border-color: #25D366; color: #0B7A38; }
.mzx-drawer .mzx-drawer__btn--wa:hover { background: #F1FDF5; border-color: #25D366; }

.mzx-drawer__social { display: flex; gap: 16px; margin-top: 16px; }

.mzx-drawer .mzx-drawer__social a {
	color: var(--mz-text-2);
	transition: color .2s;
}

.mzx-drawer .mzx-drawer__social a:hover { color: var(--mz-gold-dk); }

/* ---------------------------------------------------------------------
   24c. PIE DE PÁGINA
   ------------------------------------------------------------------- */

.mzx-ft { background: var(--mz-ink); color: #8A93A8; }

.mzx-ft__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: 30px;
	padding-block: 46px 34px;
}

.mzx-ft__logo { display: inline-flex; margin-bottom: 12px; text-decoration: none; }
.mzx-ft__logo img { max-height: var(--mzx-ft-logo, 62px); width: auto; display: block; }
.mzx-ft__logo span { color: #fff; font-family: var(--mz-font-head); font-weight: 800; }

.mzx-ft .mzx-ft__about {
	margin: 0 0 16px;
	font-size: .875rem;
	line-height: 1.65;
	color: #8A93A8;
	max-width: 40ch;
}

.mzx-ft__social { display: flex; gap: 14px; }

.mzx-ft .mzx-ft__social a { color: var(--mz-gold); transition: color .2s; }
.mzx-ft .mzx-ft__social a:hover { color: var(--mz-gold-2); }

.mzx-ft .mzx-ft__h {
	margin: 0 0 12px;
	color: var(--mz-gold);
	font-family: var(--mz-font-head);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.mzx-ft__col ul { list-style: none; margin: 0; padding: 0; }
.mzx-ft__col li { margin-bottom: 9px; font-size: .875rem; line-height: 1.5; }

.mzx-ft .mzx-ft__col a { color: #8A93A8; text-decoration: none; transition: color .2s; }
.mzx-ft .mzx-ft__col a:hover { color: var(--mz-gold-2); }

.mzx-ft__bottom { background: #060911; border-top: 1px solid rgba(255, 255, 255, .06); }

.mzx-ft__bottom-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-block: 15px;
	font-size: .8125rem;
	color: #6B7387;
}

.mzx-ft__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.mzx-ft .mzx-ft__legal a { color: #8A93A8; text-decoration: none; transition: color .2s; }
.mzx-ft .mzx-ft__legal a:hover { color: var(--mz-gold-2); }

/* ---------------------------------------------------------------------
   24d. RESPONSIVE DEL ENCABEZADO Y EL PIE

   El punto de corte es 1024px, que cubre tablet Y el celular acostado
   (unos 930px). Ese rango era justo el que se quedaba sin encabezado
   con el esquema anterior de dos plantillas.
   ------------------------------------------------------------------- */

@media (max-width: 1024px) {

	/* La barra de contacto desaparece: esos datos están dentro del
	   menú lateral, en el bloque "Servicio al cliente". */
	.mzx-hd__top { display: none; }

	/* El menú de escritorio se guarda y aparece la hamburguesa. */
	.mzx-hd__nav { display: none; }
	.mzx-hd .mzx-hd__burger { display: grid; }

	/* Hamburguesa a la izquierda, logo al centro, acciones a la
	   derecha — la distribución que la gente ya conoce del celular. */
	.mzx-hd__main-in { min-height: 62px; gap: 10px; }
	.mzx-hd__logo { margin-inline: auto; }
	.mzx-hd__logo img { max-height: var(--mzx-hd-logo-mv, 42px); }

	.mzx-hd .mzx-hd__act { width: 38px; height: 38px; }

	.mzx-hd__searchrow { padding-bottom: 12px; }

	.mzx-ft__grid { grid-template-columns: 1fr 1fr; gap: 26px; padding-block: 36px 28px; }
	.mzx-ft__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	.mzx-hd__main-in { min-height: 56px; }
	.mzx-hd__logo img { max-height: var(--mzx-hd-logo-mv, 38px); }
	.mzx-hd__acts { gap: 0; }
	.mzx-hd .mzx-hd__act { width: 36px; height: 36px; }

	.mzx-ft__grid { grid-template-columns: 1fr; gap: 22px; }
	.mzx-ft__bottom-in { flex-direction: column; align-items: flex-start; }
	.mzx-ft__legal { gap: 14px; }
}

/* ---- Variante "centrada": el estilo de las tiendas grandes ----
   Hamburguesa a la izquierda, logo al centro, cuenta y carrito a la
   derecha, también en escritorio. El menú completo vive dentro del
   panel lateral. Se activa con estilo="centrada" en el shortcode.

   Cuándo conviene: cuando el menú tiene muchas categorías y no cabe
   cómodo en una línea. Cuando son pocas, la variante clásica (menú a
   la vista) hace que la gente navegue más, porque no tiene que abrir
   nada para ver a dónde puede ir. */
.mzx-hd--centrada .mzx-hd__nav { display: none; }
.mzx-hd--centrada .mzx-hd__burger { display: grid; }
.mzx-hd--centrada .mzx-hd__logo { margin-inline: auto; }

/* ---- Ancho completo del encabezado y el pie ----

   Aquí SÍ es seguro hacerlo por CSS, a diferencia de las secciones de
   una página normal: en las plantillas de cabecera y pie el componente
   es el único contenido, así que no hay que adivinar el ancho de nada
   ni calcular márgenes negativos (que fue lo que falló antes). Basta
   con quitarle el ancho máximo y el relleno al contenedor de Elementor
   dentro de esas dos ubicaciones concretas.

   Así el encabezado y el pie llegan de borde a borde sin que haya que
   configurar "Estirar la sección" a mano en cada plantilla. */
.elementor-location-header .elementor-container,
.elementor-location-footer .elementor-container,
.elementor-location-header .e-con-inner,
.elementor-location-footer .e-con-inner {
	max-width: 100% !important;
	width: 100% !important;
}

.elementor-location-header .elementor-section,
.elementor-location-footer .elementor-section,
.elementor-location-header .e-con,
.elementor-location-footer .e-con,
.elementor-location-header .elementor-widget-shortcode,
.elementor-location-footer .elementor-widget-shortcode,
.elementor-location-header .elementor-widget-container,
.elementor-location-footer .elementor-widget-container {
	padding-inline: 0 !important;
	margin-inline: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* El contenedor interno del propio componente sigue centrando el
   contenido, así que el texto no se pega a los filos de la pantalla. */
.mzx-hd .mzx-container,
.mzx-ft .mzx-container {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

/* ---- El desplegable del menú va por encima del buscador ----
   La fila del logo y la del buscador son hermanas y las dos estaban en
   el mismo nivel de apilamiento (z-index: 1). Cuando dos elementos
   empatan, gana el que va después en el HTML — y el buscador va
   después, así que tapaba el submenú. Subir la fila del logo lo
   resuelve de raíz. */
.mzx-hd__main-in    { z-index: 5; }
.mzx-hd__searchrow  { z-index: 1; }

/* El <li> abierto también sube, para que su submenú no quede por
   debajo de los <li> que vienen después. */
.mzx-hd .mzx-hd__menu li:hover,
.mzx-hd .mzx-hd__menu li:focus-within { z-index: 10; }

.mzx-hd .mzx-hd__menu .sub-menu { z-index: 40; }

/* Los submenús que caen cerca del filo derecho se alinean por su
   borde derecho para no salirse de la pantalla. */
.mzx-hd .mzx-hd__menu > li:nth-last-child(-n+2) > .sub-menu {
	left: auto;
	right: 0;
}

/* ---------------------------------------------------------------------
   25. MARGEN EXTERIOR UNIFORME

   El encabezado y el pie quedaban con un pequeño margen blanco a los
   lados (herencia del tema), mientras las secciones de la portada
   llegaban al filo de la pantalla. Resultado: los bordes no coincidían
   de arriba a abajo y se notaba desprolijo.

   Una sola variable define ese margen para TODO el sistema, así el
   encabezado, cada sección de la página y el pie comparten exactamente
   la misma línea vertical a izquierda y derecha. Para cambiar el aire
   de todo el sitio basta con tocar este número.

   En pantallas chicas se reduce solo (el clamp baja hasta casi cero),
   porque en un celular cada píxel de ancho cuenta.
   ------------------------------------------------------------------- */

.mzx-hd,
.mzx-ft,
.mzx-hero,
.mzx-section,
.mzx-show,
.mzx-trust,
.mzx-counters,
.mzx-ctaband {
	--mzx-inset: clamp(4px, 1.8vw, 26px);
	margin-inline: var(--mzx-inset) !important;
	width: auto !important;
	max-width: none !important;
}

/* ---------------------------------------------------------------------
   26. AJUSTES FINOS DEL ENCABEZADO

   26a. El parpadeo al pasar entre ítems del menú.

   Eran dos causas sumadas:

   1) La barra de scroll. Al abrirse un submenú la página cambiaba de
      alto, entraba o salía la barra de scroll, el contenido se corría
      unos píxeles, el cursor dejaba de estar sobre el ítem, el submenú
      se cerraba... y vuelta a empezar. Un bucle, no un fallo aislado.
      scrollbar-gutter:stable reserva ese espacio siempre, así el ancho
      no cambia nunca y el bucle no puede arrancar.

   2) Los huecos entre ítems. El menú tenía 4px de separación entre
      enlaces; al pasar el cursor por ese hueco no había ningún ítem
      activo, el submenú se cerraba y se reabría al llegar al siguiente.
      Ahora la separación va como relleno DENTRO de cada enlace, así no
      quedan zonas muertas entre uno y otro.
   ------------------------------------------------------------------- */

html { scrollbar-gutter: stable; }

.mzx-hd .mzx-hd__menu { gap: 0; }
.mzx-hd .mzx-hd__menu > li > a { padding-inline: 14px; }

/* Puente invisible entre el enlace y su submenú: sin él, al bajar el
   cursor hacia el desplegable se cruza un vacío de unos píxeles y el
   menú se cierra en el camino. */
.mzx-hd .mzx-hd__menu > li.menu-item-has-children { padding-bottom: 6px; }
.mzx-hd .mzx-hd__menu > li.menu-item-has-children > .sub-menu { top: calc(100% - 2px); }

/* Un pelo de retardo al cerrar. Perdona el temblor de pulso al cruzar
   de un ítem a otro, que es lo que la gente hace de verdad. */
.mzx-hd .mzx-hd__menu .sub-menu { transition-delay: 0s; }
.mzx-hd .mzx-hd__menu li:not(:hover):not(:focus-within) > .sub-menu { transition-delay: .18s; }

/* ---------------------------------------------------------------------
   26b. Margen exterior: más discreto y, sobre todo, IGUAL en todo.

   El encabezado se veía con más borde que el resto porque, además del
   margen del sistema, arrastraba el relleno propio de la sección de
   Elementor. Aquí se anula ese relleno para que las ocho piezas
   arranquen exactamente en la misma línea.
   ------------------------------------------------------------------- */

.mzx-hd,
.mzx-ft,
.mzx-hero,
.mzx-section,
.mzx-show,
.mzx-trust,
.mzx-counters,
.mzx-ctaband {
	--mzx-inset: clamp(0px, 0.25vw, 4px);
}

.elementor-location-header .elementor-element,
.elementor-location-footer .elementor-element,
.elementor-location-header .elementor-widget-wrap,
.elementor-location-footer .elementor-widget-wrap {
	padding-inline: 0 !important;
	margin-inline: 0 !important;
}

/* ---------------------------------------------------------------------
   27. ESQUINAS SUAVES

   Las franjas oscuras terminaban en ángulo recto contra el margen
   blanco, y ese corte seco es lo que hacía que el borde se leyera como
   un error de alineación en vez de como una decisión. Redondeando las
   esquinas, cada bloque se apoya sobre el blanco en lugar de chocar
   contra él.

   OJO con el encabezado: NO se puede recortar con overflow, porque los
   submenús se despliegan por fuera de su caja y quedarían cortados a la
   mitad. Por eso aquí se redondea cada franja por separado (la barra de
   contacto por arriba, la del logo por abajo) en vez de recortar el
   conjunto. El resultado visual es el mismo y los desplegables siguen
   saliendo enteros.
   ------------------------------------------------------------------- */

.mzx {
	--mzx-corner: clamp(8px, 1vw, 16px);
}

/* ---- Encabezado: sin overflow, redondeando franja por franja ---- */
.mzx-hd__top {
	border-start-start-radius: var(--mzx-corner);
	border-start-end-radius: var(--mzx-corner);
}

/* Si no hay barra de contacto visible (móvil), la franja del logo
   asume también las esquinas de arriba. */
.mzx-hd__main {
	border-end-start-radius: var(--mzx-corner);
	border-end-end-radius: var(--mzx-corner);
	/* SIN overflow:hidden — y esto es importante. Los submenús del menú
	   nacen dentro de esta franja; con overflow quedaban recortados a la
	   altura del borde (el bug que reapareció en 1.8.0). Además el
	   recorte era innecesario: los fondos (la foto de cubos) se recortan
	   solos siguiendo el border-radius, sin necesidad de overflow. */
}

/* El velo y la foto de fondo deben respetar la curva. */
.mzx-hd__main::before { border-radius: inherit; }

/* ---- Secciones de la página ---- */
.mzx-hero,
.mzx-section,
.mzx-show,
.mzx-trust,
.mzx-counters,
.mzx-ctaband {
	border-radius: var(--mzx-corner);
	overflow: hidden;
}

/* ---- Pie: arriba en la zona de columnas, abajo en la barra legal ---- */
.mzx-ft {
	border-start-start-radius: var(--mzx-corner);
	border-start-end-radius: var(--mzx-corner);
	overflow: hidden;
}

.mzx-ft__bottom {
	border-end-start-radius: var(--mzx-corner);
	border-end-end-radius: var(--mzx-corner);
}

@media (max-width: 1024px) {
	/* En móvil la barra de contacto se oculta, así que la franja del
	   logo pasa a llevar las cuatro esquinas. */
	.mzx-hd__main { border-radius: var(--mzx-corner); }
}

/* ---------------------------------------------------------------------
   28. AIRE ENTRE BLOQUES

   Con las esquinas redondeadas, dos bloques pegados uno encima de otro
   se leen como una sola pieza mal cortada: las curvas se tocan y el
   redondeo pierde sentido. Un hilo de blanco entre ellos es lo que hace
   que cada bloque se lea como bloque.

   Va en margin-block (no en padding) a propósito: los márgenes
   verticales de bloques hermanos se funden entre sí, así que entre dos
   secciones queda UNA separación, no la suma de las dos. Si fuera
   padding, el espacio se duplicaría en cada unión.
   ------------------------------------------------------------------- */

.mzx-hd,
.mzx-ft,
.mzx-hero,
.mzx-section,
.mzx-show,
.mzx-trust,
.mzx-counters,
.mzx-ctaband {
	margin-block: var(--mzx-inset);
}

/* ---------------------------------------------------------------------
   29. QUE EL ESPACIO ENTRE ZONAS SEA EL MISMO QUE EL DE LOS LADOS

   El encabezado, el contenido y el pie viven en tres zonas distintas
   del documento, y cada una viene con su propio relleno de fábrica: el
   contenedor de la plantilla de Elementor, el <main> del tema y el
   envoltorio de la página. Sumados daban ese hueco ancho entre el
   encabezado y la portada, muy por encima de los ~3px de los lados.

   Aquí se anulan esos rellenos heredados. El único espacio que queda
   es el margen propio de cada bloque (--mzx-inset), que es el mismo
   número que se usa a izquierda y derecha. Así el aire es idéntico en
   las cuatro direcciones.

   Va acotado con body:has(.mzx) para no alterar el espaciado de sitios
   o páginas que no usen estos componentes.
   ------------------------------------------------------------------- */

.elementor-location-header,
.elementor-location-footer {
	margin-block: 0 !important;
	padding-block: 0 !important;
}

body:has(.mzx) .site-main,
body:has(.mzx) main.site-main,
body:has(.mzx) #content,
body:has(.mzx) .site-content,
body:has(.mzx) .elementor-location-single,
body:has(.mzx) .page-content {
	margin-block: 0 !important;
	padding-block: 0 !important;
}

/* La sección de Elementor que envuelve cada shortcode tampoco debe
   aportar alto propio: el bloque ya trae el suyo. */
body:has(.mzx) .elementor-section:has(> .elementor-container > .elementor-column .mzx),
body:has(.mzx) .e-con:has(> .e-con-inner > .elementor-widget-shortcode .mzx) {
	margin-block: 0 !important;
	padding-block: 0 !important;
}

/* ---------------------------------------------------------------------
   30. DOS CAUSAS QUE QUEDABAN VIVAS

   30a. El hueco entre el encabezado y la portada. La sección 29 anuló
   el relleno de las ZONAS (la plantilla, el main del tema), pero los
   elementos de Elementor DENTRO de la plantilla del encabezado — la
   sección, la columna, el envoltorio del widget — traen cada uno su
   propio relleno vertical de fábrica, y sumados formaban ese hueco.
   Aquí se anulan todos, solo dentro de cabecera y pie.
   ------------------------------------------------------------------- */
.elementor-location-header .elementor-section,
.elementor-location-footer .elementor-section,
.elementor-location-header .e-con,
.elementor-location-footer .e-con,
.elementor-location-header .e-con-inner,
.elementor-location-footer .e-con-inner,
.elementor-location-header .elementor-widget,
.elementor-location-footer .elementor-widget,
.elementor-location-header .elementor-widget-wrap,
.elementor-location-footer .elementor-widget-wrap,
.elementor-location-header .elementor-widget-container,
.elementor-location-footer .elementor-widget-container {
	margin-block: 0 !important;
	padding-block: 0 !important;
}

/* ---------------------------------------------------------------------
   30b. El parpadeo al pasar entre menús. Con el recorte del submenú ya
   resuelto (v1.8.4), la causa que queda es el desenfoque de fondo
   (backdrop-filter) de la clase mz-sticky del tema hijo, aplicada al
   encabezado desde la primera versión del sitio. En Chrome y Brave
   sobre Windows, repintar una capa con desenfoque cada vez que un
   submenú aparece o desaparece provoca exactamente ese titileo de
   pantalla completa — es un problema conocido del navegador, no un
   error del sitio.

   El desenfoque además ya no aporta nada: el encabezado nuevo tiene
   fondo sólido propio (la foto de cubos con su velo), no translúcido.
   Se apaga y el titileo se va con él.
   ------------------------------------------------------------------- */
.mz-sticky,
.elementor-location-header .mz-sticky {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: transparent !important;
}

/* ---------------------------------------------------------------------
   31. EL PARPADEO: QUE EL ENCABEZADO NO PUEDA CAMBIAR DE ALTO

   Diagnóstico (medido fotograma a fotograma sobre un video del fallo):
   el menú tenía tantos ítems que se partía en filas, y quedaba justo en
   el punto de equilibrio entre 2 y 3 filas. Al abrir un submenú algo
   cambiaba el ancho disponible por unos píxeles, el menú saltaba a 3
   filas, el encabezado crecía, TODA la página se desplazaba hacia
   abajo, el cursor dejaba de estar sobre el ítem, el submenú se
   cerraba, el menú volvía a 2 filas... y otra vez. Un bucle infinito
   mientras el cursor se quedara en ese borde.

   La solución de fondo es de contenido: un menú de 5 ó 6 ítems cabe en
   una fila y nada de esto puede pasar. Pero el código no debe depender
   de eso, así que aquí se corta el bucle por tres lados:

   1. Sin barra de scroll horizontal jamás. Si un submenú se asoma por
      el filo, antes aparecía la barra, el ancho útil se reducía y eso
      solo bastaba para reacomodar el menú.
   2. Los submenús no pueden ser más anchos que la pantalla.
   3. El bloque del menú reserva su alto: aunque el número de filas
      cambie, el encabezado conserva la altura. Sin cambio de alto no
      hay desplazamiento de página, y sin desplazamiento no hay bucle.
   ------------------------------------------------------------------- */

html { overflow-x: clip; }

.mzx-hd .mzx-hd__menu .sub-menu {
	max-width: min(280px, calc(100vw - 32px));
}

/* Reserva de alto: el menú ocupa el sitio de sus filas y no lo cede
   aunque el contenido se reacomode. content-visibility y contain
   aíslan además su recálculo del resto de la página. */
.mzx-hd__nav {
	contain: layout;
}

.mzx-hd .mzx-hd__menu {
	align-content: center;
	min-height: 44px;
}

/* ---------------------------------------------------------------------
   32. SUBMENÚS: UNA SOLA CONDICIÓN MANDA

   La versión 1.9.1 falló por reglas contradictorias: había una que
   abría el submenú con :hover, otra que lo cerraba, y una última con
   :focus-within que lo volvía a abrir. Al pesar más y ir al final, esa
   última ganaba siempre y anulaba el temporizador. Resultado visible en
   video: DOS submenús abiertos a la vez, superpuestos y alternando.

   Aquí queda una sola regla de apertura: la clase .is-open, que pone y
   quita el script del encabezado (con temporizador al cerrar, y también
   con el foco del teclado). Sin condiciones que compitan, no hay
   estados intermedios posibles.
   ------------------------------------------------------------------- */

.mzx-hover-js .mzx-hd .mzx-hd__menu li > .sub-menu {
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
}

.mzx-hover-js .mzx-hd .mzx-hd__menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Todos los ítems de primer nivel con la MISMA altura sensible: antes
   solo los que tenían submenú llevaban relleno inferior, y al recorrer
   esa franja en horizontal el menú se encendía y apagaba. */
.mzx-hd .mzx-hd__menu > li { padding-bottom: 6px; }

.mzx-hd__nav { contain: none; }

/* ---------------------------------------------------------------------
   33. ARCHIVO DE PRODUCTOS

   Una sola plantilla sirve para todas las categorías porque estos
   componentes leen solos la categoría que se está viendo. Cuando se
   cree una categoría nueva, ya sale con este diseño sin tocar nada.
   ------------------------------------------------------------------- */

.mzx-arch__inner { padding-block: clamp(22px, 3vw, 40px); }

.mzx-arch__crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: .8125rem;
	color: var(--mz-text-2);
	flex-wrap: wrap;
}

.mzx .mzx-arch__crumbs a { color: var(--mz-text-2); text-decoration: none; }
.mzx .mzx-arch__crumbs a:hover { color: var(--mz-gold-dk); }
.mzx-arch__here { color: var(--mz-text); font-weight: 600; }

.mzx .mzx-arch__title {
	margin: 0 0 10px;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.1;
	color: var(--mz-text);
}

.mzx-section--dark .mzx-arch__title { color: #fff; }

.mzx .mzx-arch__desc {
	max-width: 68ch;
	color: var(--mz-text-2);
	font-size: 1rem;
	line-height: 1.65;
}

.mzx .mzx-arch__desc p:last-child { margin-bottom: 0; }

.mzx-arch__count {
	margin: 12px 0 0;
	font-family: var(--mz-font-head);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mz-gold-dk);
}

/* ---- Accesos entre categorías ---- */
.mzx-catnav {
	border-bottom: 1px solid var(--mz-line);
	background: #fff;
}

.mzx-catnav__inner {
	display: flex;
	gap: 8px;
	padding-block: 12px;
	overflow-x: auto;
	scrollbar-width: none;
}

.mzx-catnav__inner::-webkit-scrollbar { display: none; }

.mzx .mzx-catnav__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 9px 15px;
	border: 1px solid var(--mz-line);
	border-radius: 999px;
	background: #fff;
	color: var(--mz-text);
	font-family: var(--mz-font-head);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .2s, background-color .2s, color .2s;
}

.mzx .mzx-catnav__item:hover {
	border-color: var(--mz-gold);
	background: #FFFDF7;
	color: var(--mz-gold-dk);
}

.mzx .mzx-catnav__item.is-current {
	background: var(--mz-ink);
	border-color: var(--mz-ink);
	color: #fff;
}

.mzx-catnav__n {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--mz-mist);
	color: var(--mz-text-2);
	font-size: .6875rem;
	font-weight: 700;
}

.mzx .mzx-catnav__item.is-current .mzx-catnav__n {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

/* ---------------------------------------------------------------------
   33b. Barra de ordenación y paginación de WooCommerce

   Son piezas que genera WooCommerce, no el plugin, así que se estilan
   por sus clases propias para que no desentonen con el resto.
   ------------------------------------------------------------------- */

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	padding: 10px 14px;
	border: 1px solid var(--mz-line);
	border-radius: var(--mz-r-sm, 12px);
	background: #fff;
	font-family: var(--mz-font-body);
	font-size: .875rem;
	color: var(--mz-text);
	cursor: pointer;
}

.woocommerce .woocommerce-result-count {
	color: var(--mz-text-2);
	font-size: .875rem;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--mz-line);
	border-radius: 999px;
	background: #fff;
	color: var(--mz-text);
	font-family: var(--mz-font-head);
	font-weight: 600;
	font-size: .875rem;
	transition: border-color .2s, background-color .2s, color .2s;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--mz-gold);
	background: #FFFDF7;
	color: var(--mz-gold-dk);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--mz-ink);
	border-color: var(--mz-ink);
	color: #fff;
}

/* Aviso de "no hay productos": que no quede un vacío sin explicación. */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-no-products-found .woocommerce-info {
	border-top-color: var(--mz-gold);
	background: var(--mz-mist);
	border-radius: var(--mz-r-sm, 12px);
	color: var(--mz-text);
}

@media (max-width: 767px) {
	.mzx-catnav__inner { padding-inline: clamp(16px, 4vw, 32px); }
	.mzx .mzx-catnav__item { padding: 8px 13px; font-size: .8125rem; }
}

/* ---------------------------------------------------------------------
   34. FICHAS DEL CATÁLOGO A LA MISMA ALTURA

   El problema: cada ficha crecía lo que midiera su contenido. Un título
   de una línea contra otro de dos, o un precio con descuento (que añade
   el precio tachado), dejaban el botón "Agregar al carrito" a distinta
   altura en cada columna. Se leía como si estuvieran desalineadas.

   La solución no es fijar alturas a mano —eso se rompe con el primer
   título largo—: se convierte cada ficha en una columna que ocupa todo
   el alto de su fila, y el botón recibe un margen superior automático
   que se come el espacio sobrante. Da igual cuánto midan los títulos:
   los botones quedan a la misma línea SIEMPRE.

   Lleva "body" delante para ganarle por especificidad a los estilos de
   catálogo del tema hijo, sin depender de cuál de los dos archivos CSS
   cargue primero.
   ------------------------------------------------------------------- */

body .woocommerce ul.products,
body .elementor-products-grid ul.products {
	align-items: stretch;
}

body .woocommerce ul.products li.product,
body .elementor-products-grid ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* El enlace que envuelve imagen y título también debe estirarse, o el
   margen automático del botón no tiene espacio del que tirar. */
body .woocommerce ul.products li.product > a:not(.button) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* La imagen no se deforma y todas ocupan el mismo alto, con o sin foto. */
body .woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	margin-bottom: 12px;
}

/* Dos líneas de título reservadas: evita que las fichas de la misma
   fila bailen cuando un nombre es más largo que otro. */
body .woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

/* El precio queda pegado al bloque de texto, no flotando. */
body .woocommerce ul.products li.product .price {
	margin-top: auto;
	padding-top: 6px;
	display: block;
}

/* Y el botón, siempre al fondo de la ficha. */
body .woocommerce ul.products li.product .button,
body .woocommerce ul.products li.product a.added_to_cart {
	margin-top: 12px;
	width: 100%;
	text-align: center;
}

/* El texto "Impuestos incluidos" en una línea discreta, no compitiendo
   con el precio. */
body .woocommerce ul.products li.product .woocommerce-price-suffix,
body .woocommerce ul.products li.product small.woocommerce-price-suffix {
	display: block;
	font-size: .75rem;
	font-weight: 400;
	color: var(--mz-text-2);
}