/*
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; }
body { padding-top: var(--header-h); }
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.1;
}

.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: 56px;
	height: 56px;
	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: 44px;
	font-family: var(--font-display);
	font-size: 19px;
	white-space: nowrap;
}
.mutb-navbar__logo em { font-style: italic; font-weight: 500; }
.mutb-navbar__logo-svg { display: inline-block; vertical-align: -2px; }
.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: 44px;
	padding: 0 18px;
	margin-left: -1px;
	background: var(--mutb-off-white);
	border: 1px solid var(--mutb-black);
	font-family: var(--font-mono);
	font-size: 13px;
	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 { background: var(--mutb-black); color: var(--mutb-off-white); }
.mutb-navbar__search {
	height: 44px;
	width: 44px;
	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); }

/* Fixed header sits on top of these; no extra flow offset needed beyond body's padding-top. */
.mutb-hero-home, .mutb-archive-hero, .mutb-single-hero, .mutb-page-hero {
	padding-top: 24px;
}

/* ============================================================
   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; font-size: 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;
	padding-top: 0;
}
.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; }

/* ============================================================
   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; }
.mutb-card__body {
	position: absolute;
	left: 18px;
	right: 16px;
	bottom: 16px;
	padding: 16px 20px 18px;
}
.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: 24px; margin-top: 5px; }
.mutb-card__meta { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; }

/* ============================================================
   HOME — teaser + split sections
   ============================================================ */

.mutb-como-funciona-teaser { background: var(--mutb-tan); padding: 72px 0; }
.mutb-como-funciona-teaser__inner { display: grid; grid-template-columns: 0.9fr 1fr; align-items: center; gap: 64px; }
.mutb-como-funciona-teaser h2 { font-size: 40px; }
.mutb-como-funciona-teaser p { font-size: 17px; margin: 16px 0 28px; max-width: 460px; }

.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); }
.mutb-split--white .mutb-split__content { background: var(--mutb-off-white); }

/* 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: 13px 18px;
	font-family: var(--font-mono);
	font-size: 13px;
	text-transform: uppercase;
	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-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-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; }

.mutb-logos-strip { background: var(--mutb-off-white); padding: 28px 0; }
.mutb-logos-strip img { width: 100%; max-width: var(--container-max); margin-inline: auto; height: auto; }

.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; font-size: 22px; 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); padding-top: 0; }
	.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-como-funciona-teaser__inner, .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; }
}