/*
Theme Name: MUT Beneficios 2026
Theme URI: https://beneficios.mut.cl
Author: Portable
Author URI: https://portable.cl
Description: Custom WordPress theme for MUT Beneficios (employee benefits portal). Built from Figma with Bootstrap 5, no jQuery.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mut-beneficios-2026
Tags: bootstrap5, mut, beneficios
*/

/* ============================================================
   FONTS — same type system as mut-2026 (shared MUT brand).
   ============================================================ */

@font-face {
	font-family: 'Necto Mono';
	src: url('assets/fonts/NectoMono-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TRJN DaVinci';
	src: url('assets/fonts/TRJNDaVinci-Regular.woff') format('woff'),
	     url('assets/fonts/TRJNDaVinci-Regular.ttf')  format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TRJN DaVinci';
	src: url('assets/fonts/TRJNDaVinci-Medium.woff') format('woff'),
	     url('assets/fonts/TRJNDaVinci-Medium.ttf')  format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TRJN DaVinci';
	src: url('assets/fonts/TRJNDaVinci-Semibold.woff') format('woff'),
	     url('assets/fonts/TRJNDaVinci-Semibold.ttf')  format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TRJN DaVinci';
	src: url('assets/fonts/TRJNDaVinci-Italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'TRJN DaVinci';
	src: url('assets/fonts/TRJNDaVinci-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'TRJN DaVinci';
	src: url('assets/fonts/TRJNDaVinci-SemiboldItalic.woff') format('woff');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Satoshi';
	src: url('assets/fonts/Satoshi-Regular.woff2') format('woff2'),
	     url('assets/fonts/Satoshi-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Satoshi';
	src: url('assets/fonts/Satoshi-Italic.woff2') format('woff2'),
	     url('assets/fonts/Satoshi-Italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Satoshi';
	src: url('assets/fonts/Satoshi-Medium.woff2') format('woff2'),
	     url('assets/fonts/Satoshi-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Satoshi';
	src: url('assets/fonts/Satoshi-Bold.woff2') format('woff2'),
	     url('assets/fonts/Satoshi-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   DESIGN TOKENS (Figma + BENEFICIOS MUT reference exports)
   ============================================================ */

:root {
	--mutb-black: #0e0e0e;
	--mutb-black-pure: #000000;
	--mutb-gray-dark: #333333;
	--mutb-gray: #acacac;
	--mutb-gray-light: #e6e2df;
	--mutb-off-white: #fbfbfa;
	--mutb-white: #ffffff;
	--mutb-cream: #f9ede6;

	--mutb-purple: #beb5e9;   /* Tiendas */
	--mutb-yellow: #ffd970;   /* Gastronomía */
	--mutb-forest: #0c5347;   /* Page heros / primary CTA */
	--mutb-tan: #e4d9d3;      /* Cómo Funciona teaser / FAQ */

	--font-display: 'TRJN DaVinci', Georgia, serif;
	--font-body: 'Satoshi', system-ui, -apple-system, sans-serif;
	--font-mono: 'Necto Mono', 'Courier New', monospace;

	--container-max: 1280px;
	--topbar-h: 30px;
	--navbar-h: 72px;  /* 44px boxes + 14px above/below */
	--header-h: calc(var(--topbar-h) + var(--navbar-h));
}

/* ============================================================
   RESET / BASE
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--mutb-black);
	background: var(--mutb-cream);
	font-size: 16px;
	line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
p { margin: 0; }
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: 64px; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	margin: 0;
	line-height: 1.15;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	padding: 14px 28px;
	border: 1px solid var(--mutb-black);
	border-radius: 0;
	background: var(--mutb-black);
	color: var(--mutb-off-white);
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover {
	opacity: 0.82;
	transform: translateY(-2px);
	background-color: var(--mutb-black);
	color: var(--mutb-off-white);
	border-color: var(--mutb-black);
}
.btn--outline { background: transparent; color: var(--mutb-black); }
.btn--outline:hover {
	opacity: 1;
	background-color: var(--mutb-black);
	color: var(--mutb-off-white);
	border-color: var(--mutb-black);
}
.btn--forest { background: var(--mutb-forest); border-color: var(--mutb-forest); color: var(--mutb-off-white); }
.btn--forest:hover {
	opacity: 0.85;
	transform: translateY(-2px);
	background-color: var(--mutb-forest);
	color: var(--mutb-off-white);
	border-color: var(--mutb-forest);
}

.badge-discount {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--mutb-black);
	color: var(--mutb-off-white);
	font-family: var(--font-body);
	text-align: center;
	line-height: 1.05;
}
.badge-discount strong { font-size: 14px; font-weight: 700; }
.badge-discount span { font-size: 14px; font-weight: 500; }

/* ============================================================
   TOP BAR — black strip, boxed cells right
   ============================================================ */

.mutb-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
}

/* Sit below the WP admin toolbar for logged-in editors (matches WP core's own breakpoint). */
body.admin-bar .mutb-site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .mutb-site-header { top: 46px; }
}

.mutb-topbar {
	background: var(--mutb-black);
	color: var(--mutb-off-white);
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	height: var(--topbar-h);
	padding-left: 64px;
}
.mutb-topbar__social { display: flex; align-items: center; gap: 14px; }
.mutb-topbar__social a { color: var(--mutb-off-white); display: inline-flex; }
.mutb-topbar__links { display: flex; align-items: stretch; }
.mutb-topbar__cell {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 16px;
	border-left: 1px solid #3a3a3a;
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--mutb-off-white);
}
.mutb-topbar__cell--mobile-only { display: none; }

/* Language switcher (qTranslate-XT) — reused in the desktop topbar and the mobile menu footer. */
.mutb-lang-switch { position: relative; }
.mutb-lang-switch__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}
.mutb-lang-switch__list {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 4px 0 0;
	padding: 6px 0;
	min-width: 130px;
	list-style: none;
	background: var(--mutb-off-white);
	border: 1px solid var(--mutb-black);
	z-index: 70;
	display: none;
}
.mutb-lang-switch.is-open .mutb-lang-switch__list,
.mutb-lang-switch:focus-within .mutb-lang-switch__list { display: block; }
.mutb-lang-switch__list a {
	display: block;
	padding: 8px 16px;
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: uppercase;
	color: var(--mutb-black);
	text-decoration: none;
	white-space: nowrap;
}
.mutb-lang-switch__list a:hover { background: var(--mutb-gray-light); }

/* ============================================================
   NAVBAR — transparent, floating boxed items over hero color
   ============================================================ */

.mutb-navbar {
	position: relative;
	background: transparent;
	height: var(--navbar-h);
	display: flex;
	align-items: center;
}
.mutb-navbar__inner {
	display: flex;
	align-items: stretch;
	width: 100%;
}
.mutb-navbar__logo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--mutb-off-white);
	border: 1px solid var(--mutb-black);
	padding: 0 20px;
	height: 40px;
	white-space: nowrap;
}
.mutb-navbar__logo-img { display: block; height: 19px; width: auto; }
.mutb-navbar__menu { display: flex; align-items: stretch; }
.mutb-navbar__menu > li { list-style: none; display: flex; position: relative; }
.mutb-navbar__menu a {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 12px;
	margin-left: -1px;
	background: var(--mutb-off-white);
	border: 1px solid var(--mutb-black);
	font-family: var(--font-mono);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
	position: relative;
}
.mutb-navbar__menu a:hover,
.mutb-navbar__menu .current-menu-item > a {
	background: var(--mutb-black);
	color: var(--mutb-off-white);
	z-index: 1;
}

/* Dropdown sub-items (desktop): hover/focus reveals a bordered panel below the parent item. */
.mutb-navbar__menu > li.menu-item-has-children > a { position: relative; padding-right: 32px; }
.mutb-navbar__menu > li.menu-item-has-children > a::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-65%) rotate(45deg);
}
.mutb-navbar__menu .sub-menu {
	display: none;
	list-style: none;
	position: absolute;
	top: 100%;
	left: -1px;
	min-width: 220px;
	margin: 0;
	padding: 0;
	background: var(--mutb-off-white);
	border: 1px solid var(--mutb-black);
	z-index: 60;
}
.mutb-navbar__menu > li.menu-item-has-children:hover > .sub-menu,
.mutb-navbar__menu > li.menu-item-has-children:focus-within > .sub-menu { display: block; }
.mutb-navbar__menu .sub-menu li { list-style: none; }
.mutb-navbar__menu .sub-menu a {
	display: block;
	height: auto;
	margin: 0;
	padding: 12px 18px;
	border: none;
	border-bottom: 1px solid var(--mutb-black);
	background: var(--mutb-off-white);
	white-space: nowrap;
}
.mutb-navbar__menu .sub-menu li:last-child a { border-bottom: none; }
.mutb-navbar__menu .sub-menu a:hover,
.mutb-navbar__menu .sub-menu li.current-menu-item > a { background: var(--mutb-black); color: var(--mutb-off-white); }
.mutb-navbar__search {
	height: 40px;
	width: 40px;
	margin-left: -1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mutb-off-white);
	border: 1px solid var(--mutb-black);
	color: var(--mutb-black);
}
.mutb-navbar__burger { display: none; background: none; border: none; color: var(--mutb-black); }

/* The fixed header has no background of its own — each hero's own color shows
   through it, so the header reads as sitting "on" the hero instead of a beige
   gap above it. Each hero needs its own padding-top to clear the header height. */
.mutb-hero-home, .mutb-archive-hero, .mutb-single-hero, .mutb-page-hero {
	padding-top: var(--header-h);
}

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */

.mutb-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--mutb-off-white);
	display: flex;
	flex-direction: column;
	padding: 44px 16px 32px;
}
.mutb-mobile-menu[hidden] { display: none; }
.mutb-mobile-menu__bar {
	display: flex;
	align-items: center;
	border: 1px solid var(--mutb-black);
	background: var(--mutb-off-white);
	padding: 10px 16px;
	gap: 16px;
}
.mutb-mobile-menu__bar .mutb-navbar__logo { border: none; padding: 0; height: auto; flex: 1; }
.mutb-mobile-menu__bar .mutb-navbar__logo-img { height: 26px; }
.mutb-mobile-menu__search, .mutb-mobile-menu__close { background: none; border: none; color: var(--mutb-black); display: inline-flex; }
.mutb-mobile-menu__links { display: flex; flex-direction: column; align-items: flex-end; }
.mutb-mobile-menu__links > li { list-style: none; width: 100%; display: flex; flex-direction: column; align-items: flex-end; }
.mutb-mobile-menu__links a {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mutb-black);
	background: var(--mutb-off-white);
	margin-top: -1px;
	padding: 14px 20px;
	font-family: var(--font-mono);
	font-size: 14px;
	text-transform: uppercase;
}

/* Sub-items (mobile): a row wraps the parent link + toggle button, sub-menu expands as an accordion. */
.mutb-mobile-menu__links > li.menu-item-has-children { width: 100%; }
.mutb-mobile-menu__item-row { display: flex; width: 100%; margin-top: -1px; }
.mutb-mobile-menu__item-row a { flex: 1; margin-top: 0; justify-content: flex-end; }
.mutb-mobile-menu__toggle {
	width: 48px;
	flex-shrink: 0;
	border: 1px solid var(--mutb-black);
	border-left: none;
	background: var(--mutb-off-white);
	color: var(--mutb-black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mutb-mobile-menu__toggle svg { transition: transform 0.2s ease; }
.mutb-mobile-menu__links li.is-open > .mutb-mobile-menu__item-row .mutb-mobile-menu__toggle svg { transform: rotate(180deg); }
.mutb-mobile-menu__links .sub-menu {
	display: none;
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.mutb-mobile-menu__links li.is-open > .sub-menu { display: block; }
.mutb-mobile-menu__links .sub-menu a {
	width: 100%;
	margin-top: -1px;
	background: var(--mutb-gray-light);
	font-size: 13px;
	justify-content: flex-end;
}
.mutb-mobile-menu__footer { margin-top: auto; display: flex; flex-direction: column; gap: 28px; }
.mutb-mobile-menu__lang {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 14px;
	text-transform: uppercase;
}
.mutb-mobile-menu__social { display: flex; gap: 28px; }

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */

.mutb-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: var(--mutb-off-white);
	display: flex;
	flex-direction: column;
	padding: 80px 24px 48px;
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.mutb-search-overlay.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.22s ease;
}
.mutb-search-overlay__close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 48px;
	height: 48px;
	border: 1px solid var(--mutb-black);
	background: var(--mutb-off-white);
	color: var(--mutb-black);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.mutb-search-overlay__inner {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	padding-top: 56px;
}
.mutb-search-overlay__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(2rem, 8vw, 3rem);
	line-height: 1.1;
	text-align: center;
	color: var(--mutb-black);
	margin: 0 0 32px;
}
.mutb-search-overlay__form { position: relative; width: 100%; }
.mutb-search-overlay__form input {
	width: 100%;
	height: 60px;
	padding: 0 56px 0 20px;
	border: 1px solid var(--mutb-black);
	background: var(--mutb-off-white);
	font-family: var(--font-mono);
	font-size: 15px;
	text-transform: uppercase;
	color: var(--mutb-black);
	outline: none;
}
.mutb-search-overlay__form input::placeholder { color: var(--mutb-gray); text-transform: uppercase; }
.mutb-search-overlay__form button {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--mutb-black);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
/* Relevanssi Live Ajax Search computes its own top/left assuming the
   results box's containing block is the document — but .mutb-search-overlay__form
   is position:relative (needed for the button above), which becomes the
   containing block instead, so the plugin's inline coordinates land wrong.
   Force it back to sitting directly under the input. */
#mutb-live-search-overlay .relevanssi-live-search-results {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	width: 100% !important;
	margin-top: 5px;
}

/* ============================================================
   HOME HERO — black, photo left, stamp badge
   ============================================================ */

.mutb-hero-home {
	background: var(--mutb-black-pure);
	display: grid;
	grid-template-columns: 43% 57%;
	align-items: center;
}
.mutb-hero-home__media { position: relative; height: 100%; min-height: 480px; }
.mutb-hero-home__media > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.mutb-hero-home__stamp {
	position: absolute;
	top: 60px;
	right: -58px;
	width: 116px;
	height: 116px;
}
.mutb-hero-home__content { padding: 64px 64px 64px 96px; }
.mutb-hero-home__content h1 {
	font-size: 56px;
	font-weight: 500;
	color: var(--mutb-off-white);
	line-height: 1.08;
}
.mutb-hero-home__content h1 em { font-style: italic; }
.mutb-hero-home__content p {
	font-size: 16px;
	color: var(--mutb-off-white);
	margin-top: 24px;
	max-width: 480px;
}

/* ============================================================
   DESTACADOS — carousel cards
   ============================================================ */

.mutb-destacados { padding: 64px 0 48px; background: var(--mutb-off-white); }
.mutb-destacados h2 { font-size: 56px; margin-bottom: 36px; }
.mutb-destacados h2 em { font-style: italic; font-weight: 500; }
.mutb-destacados__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(300px, 368px);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 8px;
}
.mutb-destacados__track::-webkit-scrollbar { display: none; }
.mutb-destacados__pager {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	margin-top: 24px;
}
.mutb-destacados__pager .eyebrow { margin-right: 24px; }
.mutb-destacados__pager .eyebrow { letter-spacing: 0.1em; }
.mutb-destacados__pager button {
	background: var(--mutb-off-white);
	border: 1px solid var(--mutb-black);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.mutb-destacados__pager button + button { margin-left: -1px; }
.mutb-destacados__cta { text-align: center; margin-top: 32px; }

/* ============================================================
   BENEFIT CARD — accent strip left, floating panel over photo
   ============================================================ */

.mutb-card {
	display: block;
	position: relative;
	scroll-snap-align: start;
	aspect-ratio: 6 / 7;
	overflow: hidden;
}
.mutb-card--purple { border-left: 10px solid var(--mutb-purple); }
.mutb-card--yellow { border-left: 10px solid var(--mutb-yellow); }
.mutb-card__media { position: absolute; inset: 0; }
.mutb-card__media > img { width: 100%; height: 100%; object-fit: cover; }
.mutb-card__media .badge-discount { position: absolute; top: 16px; right: 16px; }
/* Discount circle picks up the card's category color instead of black — otherwise it
   disappears against dark background photos. Card-only; single-page hero badge stays black. */
.mutb-card--purple .badge-discount { background: var(--mutb-purple); color: var(--mutb-black); }
.mutb-card--yellow .badge-discount { background: var(--mutb-yellow); color: var(--mutb-black); }
.mutb-card__body {
	position: absolute;
	left: 48px;
	right: 16px;
	bottom: 16px;
	padding: 16px 16px 16px;
}
.mutb-card--purple .mutb-card__body { background: var(--mutb-purple); }
.mutb-card--yellow .mutb-card__body { background: var(--mutb-yellow); }
.mutb-card__cat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
}
.mutb-card__title { font-size: 22px; margin-top: 8px; }
.mutb-card__meta { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; }

/* ============================================================
   HOME — Comunidad MUT banner + split sections
   ============================================================ */

.mutb-comunidad { background: var(--mutb-black-pure); position: relative; margin-bottom: 20px; }
.mutb-comunidad__slide {
	/* Fixed height (not min-height) so a long bajada never stretches the whole
	   carousel — same reasoning as mut.cl's own postcard slide. */
	height: 640px;
	overflow: hidden;
	background-color: var(--mutb-black);
	background-image: var(--slide-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 80px 0;
}
@media (min-width: 992px) {
	.mutb-comunidad__slide { background-image: var(--slide-bg-desk, var(--slide-bg, none)); }
}
.mutb-comunidad__slide.active,
.mutb-comunidad__slide.carousel-item-next,
.mutb-comunidad__slide.carousel-item-prev { display: flex; align-items: center; }
.mutb-comunidad__slide > .container { display: flex; justify-content: flex-end; }

/* Floating "postal" card — background color set per-slide via inline style. */
.mutb-postcard {
	width: 100%;
	max-width: 420px;
	min-height: 440px;
	padding: 64px 40px;
	text-align: center;
	color: var(--mutb-black);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.mutb-postcard__title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; margin: 0; }
.mutb-postcard__bajada {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	max-width: 340px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mutb-postcard__more { margin-top: 4px; }

.mutb-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 16px;
	color: var(--mutb-black);
	text-decoration: none;
}
.mutb-link-arrow:hover svg { transform: translateX(2px); }
.mutb-link-arrow svg { transition: transform .15s ease; }

.mutb-comunidad__arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	background: rgba(14,14,14,.35);
	border: 1px solid var(--mutb-off-white);
	color: var(--mutb-off-white);
}
.mutb-comunidad__arrow:hover { background: var(--mutb-off-white); color: var(--mutb-black); }
.mutb-comunidad__arrow--prev { left: 24px; }
.mutb-comunidad__arrow--next { right: 24px; }
@media (min-width: 992px) {
	.mutb-comunidad__arrow { display: flex; }
}
.mutb-comunidad__dots {
	position: absolute;
	right: auto;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	margin: 0;
	display: flex;
	gap: 10px;
	z-index: 5;
}
.mutb-comunidad__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--mutb-off-white);
	box-sizing: border-box;
	text-indent: -9999px;
	opacity: 1;
}
.mutb-comunidad__dot:hover { background: rgba(251,251,250,.5); }
.mutb-comunidad__dot.active { background: var(--mutb-off-white); }

@media (max-width: 991.98px) {
	.mutb-comunidad__slide { height: 520px; padding: 60px 0; }
	.mutb-postcard { max-width: 360px; padding: 40px 32px; }
}
@media (max-width: 575.98px) {
	.mutb-comunidad__slide { height: 640px; padding: 40px 0; align-items: flex-end; }
	.mutb-comunidad__slide.active,
	.mutb-comunidad__slide.carousel-item-next,
	.mutb-comunidad__slide.carousel-item-prev { align-items: flex-end; }
	.mutb-comunidad__slide > .container { justify-content: center; }
	.mutb-postcard { max-width: 90%; padding: 24px; min-height: 260px; }
}

.mutb-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.mutb-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mutb-split__content { display: flex; flex-direction: column; justify-content: center; padding: 64px 48px 64px 72px; }
.mutb-split__content h2 { font-size: 40px; }
.mutb-split__content p { font-size: 17px; margin: 16px 0 28px; max-width: 420px; }
.mutb-split--purple .mutb-split__content { background: var(--mutb-purple); }
.mutb-split--yellow .mutb-split__content { background: var(--mutb-yellow); }

/* Desktop only: without a capped height, tall source photos (object-fit:cover
   with no defined parent height) were stretching these rows to ~100vh.
   grid-template-rows: minmax(0, 1fr) is required too — otherwise the implicit
   row still auto-sizes to the image's intrinsic height regardless of the
   container's own height, and the text column (which stretches to match)
   ends up vertically centered inside that oversized row instead of the
   visible box, reading as "cut off with a big gap above". */
@media (min-width: 901px) {
	.mutb-split { height: 65vh; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
	.mutb-split__media { overflow: hidden; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.mutb-footer { background: var(--mutb-black); color: var(--mutb-off-white); padding-top: 56px; }
.mutb-footer__main {
	display: grid;
	grid-template-columns: 1.1fr 1.2fr 1.2fr 1.6fr;
	gap: 32px;
	padding-bottom: 8px;
}
.mutb-footer__logo { width: 84px; height: auto; }
.mutb-footer__links { display: flex; flex-direction: column; gap: 16px; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; }
.mutb-footer__newsletter { border-left: 1px solid #3a3a3a; padding-left: 40px; }
.mutb-footer__newsletter h3 { font-size: 24px; font-weight: 600; margin-bottom: 20px; line-height: 1.35; }
.mutb-footer__newsletter-form { display: flex; gap: 0; }
.mutb-footer__newsletter-form input {
	flex: 1;
	height: 44px;
	padding: 0 16px;
	border: 0;
	background: var(--mutb-off-white);
	color: var(--mutb-black);
	font-family: var(--font-body);
	font-size: 16px;
}
.mutb-footer__newsletter-form input::placeholder { color: var(--mutb-gray); }
.mutb-footer__newsletter-form button {
	width: 44px;
	height: 44px;
	background: var(--mutb-off-white);
	color: var(--mutb-black);
	border: 0;
	border-left: 1px solid rgba(13, 13, 13, 0.1);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.mutb-footer__newsletter-form button svg { width: 16px; height: 16px; }
.mutb-footer__newsletter-msg { margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: #fff; }
.mutb-footer__newsletter-msg.is-ok { color: #6fe3a0; }
.mutb-footer__newsletter-msg.is-error { color: #ff9a8f; }
.mutb-footer__meta { padding-block: 24px 32px; font-size: 13px; color: #ccc; }
.mutb-footer__meta strong { letter-spacing: 0.25em; font-weight: 500; color: var(--mutb-off-white); }
.mutb-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #3a3a3a;
	padding-block: 22px;
	font-size: 12px;
}
.mutb-footer__social { display: flex; gap: 18px; }
.mutb-footer__social a { color: var(--mutb-off-white); display: inline-flex; }
.mutb-footer__legal { display: flex; gap: 24px; color: #ccc; }
.mutb-footer__legal li { list-style: none; display: contents; }

/* ============================================================
   ARCHIVE (Tiendas / Gastronomía)
   ============================================================ */

.mutb-archive-hero { padding-bottom: 48px; text-align: center; }
.mutb-archive-hero--purple { background: var(--mutb-purple); }
.mutb-archive-hero--yellow { background: var(--mutb-yellow); }
.mutb-archive-hero .eyebrow {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}
.mutb-archive-hero h1 { font-size: 104px; font-weight: 500; margin-top: 4px; }
.mutb-archive-hero__illust { margin: 36px auto 0; max-height: 135px; width: auto; }
.mutb-archive-hero--search { background: var(--mutb-tan); }
.mutb-archive-hero--search h1 { font-size: 48px; word-break: break-word; }
.mutb-archive-hero__count { margin-top: 12px; font-family: var(--font-mono); font-size: 14px; text-transform: uppercase; }
.mutb-search-result {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	border: 1px solid var(--mutb-black);
	background: var(--mutb-off-white);
	color: var(--mutb-black);
	text-decoration: none;
}
.mutb-search-result h3 { font-size: 20px; margin: 0; }
.mutb-search-result p { margin: 0; font-size: 14px; color: var(--mutb-gray-dark); }
.mutb-search-result:hover { background: var(--mutb-gray-light); }

.mutb-archive-body { background: var(--mutb-cream); padding: 48px 0 72px; }
.mutb-archive-body__label { font-weight: 700; font-size: 17px; margin-bottom: 20px; }
.mutb-filterbar { display: flex; flex-wrap: wrap; margin-bottom: 32px; }
.mutb-filterbar select, .mutb-filterbar__search {
	background: var(--mutb-off-white);
	border: 1px solid var(--mutb-black);
	padding: 0 16px;
	font-family: var(--font-mono);
	font-size: 14px;
	text-transform: uppercase;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 6L8 10L4 6' stroke='%230E0E0E' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	height: 40px;
}
.mutb-filterbar select { flex: 0 0 30%; margin-left: -1px; }
.mutb-filterbar select:first-child { margin-left: 0; }
.mutb-filterbar__search {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-left: -1px;
	background-image: none;
}
.mutb-filterbar__search input { border: none; background: none; font-family: inherit; font-size: inherit; text-transform: uppercase; width: 100%; outline: none; }
.mutb-filterbar__search button {
	flex-shrink: 0;
	border: none;
	background: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	color: inherit;
	cursor: pointer;
}
.mutb-filterbar__clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 16px;
	font-family: var(--font-mono);
	font-size: 13px;
	text-transform: uppercase;
	color: var(--mutb-black);
	text-decoration: none;
}
.mutb-filterbar__clear:hover { text-decoration: underline; text-underline-offset: 3px; }
.mutb-archive-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -12px 0 24px; }
.mutb-archive-active-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 8px 0 14px;
	background: var(--mutb-black);
	color: var(--mutb-off-white);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity .15s ease;
}
.mutb-archive-active-filter svg { flex-shrink: 0; }
.mutb-archive-active-filter:hover { opacity: .75; color: var(--mutb-off-white); }
.mutb-archive-active-filters .mutb-filterbar__clear { margin-left: 6px; }
.mutb-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }
.mutb-archive-empty { padding: 24px 0; color: var(--mutb-gray-dark); }
.mutb-archive-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 40px; font-family: var(--font-mono); font-size: 14px; }
.mutb-archive-pagination a,
.mutb-archive-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -1px;
	border: 1px solid var(--mutb-black);
	background: var(--mutb-off-white);
	color: var(--mutb-black);
	text-decoration: none;
}
.mutb-archive-pagination a:first-child,
.mutb-archive-pagination span.page-numbers:first-child { margin-left: 0; }
.mutb-archive-pagination a:hover { background: var(--mutb-black); color: var(--mutb-off-white); }
.mutb-archive-pagination span.page-numbers.current { background: var(--mutb-black); color: var(--mutb-off-white); }

/* ============================================================
   SINGLE (store / gastronomy)
   ============================================================ */

.mutb-single-hero { display: grid; grid-template-columns: 1fr 1fr; }
.mutb-single-hero--purple { background: linear-gradient(90deg, var(--mutb-purple) 50%, var(--mutb-off-white) 50%); }
.mutb-single-hero--yellow { background: linear-gradient(90deg, var(--mutb-yellow) 50%, var(--mutb-off-white) 50%); }
.mutb-single-hero--purple .mutb-single-hero__media { background: var(--mutb-purple); }
.mutb-single-hero--yellow .mutb-single-hero__media { background: var(--mutb-yellow); }
.mutb-single-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 96px 64px;
	min-height: 640px;
}
.mutb-single-hero__media > img { width: 62%; max-width: 500px; aspect-ratio: 1 / 1.18; object-fit: cover; }
.mutb-single-hero__tab {
	position: absolute;
	right: 0;
	top: 42%;
	transform: translate(50%, -50%);
	writing-mode: vertical-rl;
	rotate: 180deg;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: inherit;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	padding: 16px 7px;
	white-space: nowrap;
	z-index: 5;
}
.mutb-single-hero--purple .mutb-single-hero__tab { background: var(--mutb-purple); }
.mutb-single-hero--yellow .mutb-single-hero__tab { background: var(--mutb-yellow); }
.mutb-single-hero__content { background: var(--mutb-off-white); padding: 76px 64px 64px; position: relative; }
.mutb-single-hero__badge { position: absolute; top: 76px; right: 64px; }
.mutb-single-hero__logo { max-width: 140px; max-height: 64px; width: auto; height: auto; object-fit: contain; margin-bottom: 20px; }
.mutb-single-hero__content h1 { font-size: 44px; font-weight: 600; max-width: 80%; }
.mutb-single-hero__subtitle { font-size: 17px; line-height: 1.5; margin-top: 12px; max-width: 480px; }
.mutb-single-hero__subtitle--small { font-size: 14px; color: var(--mutb-gray-dark); margin-top: 8px; }
.mutb-single-hero__conditions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 28px;
	font-weight: 700;
	font-size: 15px;
}
.mutb-single-hero__row { border-top: 1px solid var(--mutb-black); padding: 16px 8px; }
.mutb-single-hero__row:last-of-type { border-bottom: 1px solid var(--mutb-black); }
.mutb-single-hero__row h4 { font-family: var(--font-body); font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.mutb-single-hero__row p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mutb-single-hero__desc { margin: 24px 0; max-width: 520px; font-size: 17px; line-height: 1.6; }
.mutb-single-hero__ctas { display: flex; gap: 14px; margin-top: 28px; }

.mutb-single-related { background: var(--mutb-cream); padding: 64px 0 72px; }
.mutb-single-related h2 { font-size: 44px; margin-bottom: 36px; }

/* ============================================================
   MODAL (e.g. "Ver condiciones de descuento")
   ============================================================ */

.mutb-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.mutb-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.2s ease; }
.mutb-modal__overlay { position: absolute; inset: 0; background: rgba(14, 14, 14, 0.6); }
.mutb-modal__box {
	position: relative;
	background: var(--mutb-off-white);
	border: 1px solid var(--mutb-black);
	width: 100%;
	max-width: 560px;
	max-height: 80vh;
	overflow-y: auto;
	padding: 40px;
}
.mutb-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border: 1px solid var(--mutb-black);
	background: var(--mutb-off-white);
	color: var(--mutb-black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.mutb-modal__box h3 { font-size: 24px; margin: 0 0 20px; padding-right: 40px; }
.mutb-modal__content ul { margin: 0; padding-left: 20px; }
.mutb-modal__content li { margin-bottom: 10px; font-size: 15px; line-height: 1.5; }
.mutb-modal__content li:last-child { margin-bottom: 0; }

/* ============================================================
   GENERIC PAGE HERO (Tarjeta Virtual / Contacto / Cómo Funciona)
   ============================================================ */

.mutb-page-hero { padding-bottom: 40px; text-align: center; }
.mutb-page-hero--forest { background: var(--mutb-forest); color: var(--mutb-off-white); }
.mutb-page-hero h1 { font-size: 96px; font-weight: 500; }
.mutb-page-hero h1 em { font-style: italic; }
.mutb-page-hero__illust { margin: 28px auto 0; max-height: 140px; width: auto; }

/* ============================================================
   TARJETA VIRTUAL — result pages (válida / no-válida)
   ============================================================ */

.mutb-card-result { padding-bottom: 64px; }
.mutb-card-result__icon { margin-bottom: 20px; }
.mutb-card-result h1 { font-size: 40px; max-width: 700px; margin-inline: auto; }
.mutb-card-result p { font-size: 18px; margin: 20px auto 0; max-width: 560px; }
.mutb-card-result__preview { display: block; width: 100%; max-width: 420px; height: auto; margin: 32px auto 0; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.mutb-card-result__hint { opacity: 0.8; font-size: 14px !important; margin-top: 12px !important; }
.mutb-card-result__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 36px;
}
.mutb-page-hero .btn--outline { border-color: var(--mutb-off-white); color: var(--mutb-off-white); }
.mutb-page-hero .btn--outline:hover { background: var(--mutb-off-white); color: var(--mutb-forest); }
.mutb-forward-email-form { display: flex; gap: 8px; }
.mutb-forward-email-form input {
	font-family: var(--font-body);
	font-size: 15px;
	padding: 14px 16px;
	border: 1px solid var(--mutb-off-white);
	background: transparent;
	color: var(--mutb-off-white);
}
.mutb-forward-email-form input::placeholder { color: #cdd9d5; }

.mutb-card-benefits { background: var(--mutb-tan); padding: 64px 0; }
.mutb-card-benefits h2 { font-size: 36px; margin-bottom: 24px; }
.mutb-card-benefits__text { font-size: 17px; max-width: 720px; }
.mutb-card-benefits__text ul { margin: 12px 0 0; padding-left: 20px; }
.mutb-card-benefits__text li { margin-bottom: 8px; }
.mutb-card-benefits__accordion { margin-top: 32px; background: var(--mutb-off-white); border: none; padding: 4px 20px; }
.mutb-card-benefits__accordion summary { font-size: 20px; }
.mutb-card-benefits__accordion ul { padding-left: 20px; }
.mutb-card-benefits__accordion li { margin-bottom: 8px; }

.mutb-page-intro { background: var(--mutb-cream); padding: 48px 0; }
.mutb-page-intro__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.mutb-page-intro p {
	font-size: 27px;
	font-family: var(--font-display);
	line-height: 1.35;
	max-width: 680px;
	text-indent: 30px;
}
.mutb-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: none;
	padding: 0;
	font-size: 15px;
}
.mutb-share-btn svg {
	width: 38px;
	height: 38px;
	padding: 10px;
	border: 1px solid var(--mutb-black);
	background: var(--mutb-off-white);
	box-sizing: border-box;
}

/* ============================================================
   PAGE FORM (Tarjeta Virtual / Contacto)
   ============================================================ */

.mutb-page-form { display: grid; grid-template-columns: 1fr 1fr; min-height: 700px; background: var(--mutb-off-white); }
.mutb-page-form__media { overflow: hidden; }
.mutb-page-form__media img { width: 100%; height: 100%; object-fit: cover; }
.mutb-page-form__content { padding: 96px 64px; display: flex; flex-direction: column; justify-content: center; }
.mutb-page-form__content h2 { font-size: 34px; margin-bottom: 28px; }
.mutb-page-form__content form { display: flex; flex-direction: column; gap: 22px; max-width: 510px; align-items: stretch; }
.mutb-page-form__content form .btn { align-self: flex-start; }
.mutb-page-form__content label { display: flex; flex-direction: column; gap: 8px; font-weight: 500; font-size: 16px; }
.mutb-label-text { display: inline; }
.mutb-required { color: #d02c2c; }
.mutb-page-form__content input, .mutb-page-form__content select, .mutb-page-form__content textarea {
	font-family: var(--font-body);
	font-size: 16px;
	padding: 12px 14px;
	border: 1px solid var(--mutb-gray);
	background: var(--mutb-off-white);
	width: 100%;
}
.mutb-page-form__content select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230e0e0e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}
.mutb-input-icon { position: relative; display: block; }
.mutb-input-icon svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8a8a8a; }
.mutb-input-icon input { padding-left: 42px; }
.mutb-page-form__content textarea { min-height: 110px; resize: vertical; }
.mutb-field-note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--mutb-gray-dark);
	margin-top: -14px;
}
.mutb-field-note--right { justify-content: flex-end; margin-top: -16px; }

/* ============================================================
   CÓMO FUNCIONA — body + logos + FAQ
   ============================================================ */

.mutb-como-funciona-body { background: var(--mutb-cream); }
.mutb-como-funciona-body__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-block: 16px 64px; }
.mutb-como-funciona-body__img { width: 100%; height: auto; align-self: start; }
.mutb-como-funciona-body__lead { font-size: 17px; line-height: 1.6; margin-bottom: 36px; }
.mutb-como-funciona-body__steps h2 { font-size: 32px; margin-bottom: 16px; }
.mutb-step { border-bottom: 1px solid var(--mutb-black); padding: 0 0 24px; margin-bottom: 24px; }
.mutb-step:last-child { border-bottom: none; margin-bottom: 0; }
.mutb-step h4 { font-family: var(--font-body); font-weight: 700; font-size: 16px; text-transform: uppercase; margin-bottom: 10px; }
.mutb-step p { font-size: 17px; line-height: 1.55; }
.mutb-step .btn { margin-top: 20px; }

/* Logos reel — infinite marquee, ported 1:1 from mut.cl's Oficinas page
   (.mut-ofic__logos*). Exact loop distance is measured/corrected in JS
   (see main.js) since translateX(-50%) alone drifts by sub-pixel amounts. */
.mutb-logos-reel { background: var(--mutb-tan); padding: 24px 16px; overflow: hidden; }
.mutb-logos-reel__marquee {
	overflow: hidden;
	width: 100%;
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.mutb-logos-reel__track {
	display: flex;
	align-items: center;
	gap: 80px;
	width: max-content;
	animation: mutb-logos-reel-scroll 40s linear infinite;
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}
.mutb-logos-reel:hover .mutb-logos-reel__track { animation-play-state: paused; }
@keyframes mutb-logos-reel-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--mutb-logos-reel-distance, 50%))); }
}
.mutb-logos-reel__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 64px; }
.mutb-logos-reel__item img { max-height: 56px; width: auto; height: auto; display: block; filter: grayscale(1); opacity: .65; transition: filter .2s ease, opacity .2s ease; }
.mutb-logos-reel__item:hover img { filter: grayscale(0); opacity: 1; }
@media (max-width: 575.98px) {
	.mutb-logos-reel__track { gap: 56px; }
	.mutb-logos-reel__item { height: 48px; }
	.mutb-logos-reel__item img { max-height: 42px; }
}

.mutb-comunidad-logos { background: var(--mutb-black); color: var(--mutb-off-white); padding: 64px 0 40px; }
.mutb-comunidad-logos__intro { max-width: 640px; margin-inline: auto; text-align: center; }
.mutb-comunidad-logos__intro h2 { font-size: 48px; margin-bottom: 20px; }
.mutb-comunidad-logos__intro h2 em { font-style: italic; font-weight: 500; }
.mutb-comunidad-logos__intro p { font-size: 17px; line-height: 1.5; color: var(--mutb-gray); }

.mutb-value-cards { background: var(--mutb-forest); color: var(--mutb-off-white); padding: 64px 0; }
.mutb-value-cards h2 { font-size: 40px; text-align: center; margin-bottom: 40px; }
.mutb-value-cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.mutb-value-card { border: 1px solid var(--mutb-off-white); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.mutb-value-card h3 { font-family: var(--font-body); font-size: 18px; font-weight: 700; }
.mutb-value-card p { font-size: 14px; line-height: 1.55; color: var(--mutb-gray-light); }

.mutb-faq { background: var(--mutb-tan); padding: 72px 0; }
.mutb-faq h2 { font-size: 42px; margin-bottom: 36px; }
.mutb-faq__list { border-bottom: 1px solid var(--mutb-black); }
.mutb-faq__item { border-top: 1px solid var(--mutb-black); }
.mutb-faq__item summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 22px 8px 22px 18px;
}
.mutb-faq__item summary::-webkit-details-marker { display: none; }
.mutb-faq__item summary::after {
	content: '';
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 1.6px solid var(--mutb-black);
	border-bottom: 1.6px solid var(--mutb-black);
	transform: rotate(45deg);
	transition: transform 0.2s;
	margin-left: 16px;
}
.mutb-faq__item[open] summary::after { transform: rotate(225deg); }
.mutb-faq__item p { padding: 0 18px 22px; max-width: 900px; }

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {
	.container { padding-inline: 16px; }
	:root { --navbar-h: 84px; }

	/* Topbar: MUT.CL / TARJETA VIRTUAL / CONTACTO, no social */
	.mutb-topbar { padding-left: 0; }
	.mutb-topbar__social { display: none; }
	.mutb-topbar__links { width: 100%; }
	.mutb-topbar__cell { flex: 1; justify-content: center; padding: 0 4px; gap: 5px; font-size: 11px; white-space: nowrap; }
	.mutb-topbar__cell:first-child { border-left: none; }
	.mutb-topbar__cell--mobile-only { display: inline-flex; }
	.mutb-topbar__cell--lang { display: none; }

	/* Navbar: logo + search + burger all inside one white bordered box, same as mut.cl mobile header */
	.mutb-navbar { padding-inline: 16px; }
	.mutb-navbar__inner {
		align-items: center;
		gap: 12px;
		background: var(--mutb-off-white);
		border: 1px solid var(--mutb-black);
		padding: 8px 12px;
	}
	.mutb-navbar__logo { flex: 1; justify-content: flex-start; height: auto; border: none; padding: 0; background: transparent; }
	.mutb-navbar__menu { display: none; }
	.mutb-navbar__search { background: transparent; border: none; color: var(--mutb-black); width: 42px; height: 42px; }
	.mutb-navbar__search svg { width: 20px; height: 20px; }
	.mutb-navbar__burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; }
	.mutb-navbar__burger svg { width: 28px; height: 23px; }

	/* Home hero: photo on top, green text panel below */
	.mutb-hero-home { grid-template-columns: 1fr; background: var(--mutb-black-pure); }
	.mutb-hero-home__media { order: -1; min-height: 360px; margin-top: 0; }
	.mutb-hero-home__media > img:first-child { min-height: 360px; }
	.mutb-hero-home__stamp { top: auto; bottom: 24px; right: 24px; width: 96px; height: 96px; }
	.mutb-hero-home__content { padding: 40px 24px 48px; }
	.mutb-hero-home__content h1 { font-size: 40px; }

	.mutb-destacados h2 { font-size: 38px; }
	.mutb-destacados__track { grid-auto-columns: minmax(280px, 320px); }

	.mutb-split { grid-template-columns: 1fr; }
	.mutb-split__media { order: -1; }
	.mutb-split__content { padding: 40px 24px 48px; }

	.mutb-footer__main { grid-template-columns: 1fr; gap: 40px; }
	.mutb-footer__newsletter { border-left: none; padding-left: 0; }
	.mutb-footer__bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
	.mutb-footer__legal { flex-direction: column; gap: 10px; }

	.mutb-archive-hero h1 { font-size: 56px; }
	.mutb-filterbar select { flex: 1 1 100%; margin-left: 0; margin-top: -1px; }
	.mutb-filterbar__search { flex: 1 1 100%; margin-left: 0; margin-top: -1px; }
	.mutb-filterbar__clear { flex: 1 1 100%; margin-left: 0; margin-top: 12px; }
	.mutb-archive-grid { grid-template-columns: 1fr; }

	.mutb-single-hero { grid-template-columns: 1fr; }
	.mutb-single-hero--purple { background: var(--mutb-purple); }
	.mutb-single-hero--yellow { background: var(--mutb-yellow); }
	.mutb-single-hero__media { min-height: auto; padding: 72px 40px; }
	.mutb-single-hero__media > img { width: 80%; }
	.mutb-single-hero__tab {
		right: auto;
		left: 0;
		top: auto;
		bottom: 0;
		transform: translate(24px, 50%);
		writing-mode: horizontal-tb;
		rotate: none;
	}
	.mutb-single-hero__content { padding: 56px 24px 48px; }
	.mutb-single-hero__badge { top: 40px; right: 24px; }
	.mutb-single-hero__content h1 { font-size: 34px; }
	.mutb-single-hero__ctas { flex-direction: column; align-items: stretch; }

	.mutb-page-hero h1 { font-size: 52px; }
	.mutb-page-intro__inner { flex-direction: column; }
	.mutb-page-intro p { font-size: 22px; }
	.mutb-page-form { grid-template-columns: 1fr; }
	.mutb-page-form__media { max-height: 420px; }
	.mutb-page-form__content { padding: 48px 24px; }

	.mutb-comunidad-logos__intro h2 { font-size: 32px; }
	.mutb-value-cards__grid { grid-template-columns: 1fr; }

	.mutb-como-funciona-body__inner { grid-template-columns: 1fr; }
	.mutb-faq__item summary { font-size: 19px; }
}