/**
 * MERO FEST — estilos de la landing pública.
 *
 * Todas las reglas viven bajo `.mf-app` para no tocar el tema. El objetivo es
 * que la landing se vea igual en Twenty Twenty-Four, Astra o Elementor: por
 * eso no se heredan tipografías ni colores del tema y los componentes se
 * declaran completos.
 *
 * Contraste: blanco sobre --mf-primary (#D70006) da 5,4:1 y negro sobre
 * --mf-accent (#FFC928) da 12,9:1, ambos por encima de AA. El amarillo nunca
 * se usa como color de texto sobre blanco (1,5:1).
 */

/* Modo lienzo ----------------------------------------------------------- */

/*
 * Cuando la página se sirve con el documento propio del plugin
 * (`Frontend\Canvas`), no hay tema que ponga márgenes ni fondo. Estas reglas
 * cubren solo el documento vacío; todo lo demás lo siguen poniendo `.mf-app`
 * y sus componentes.
 */

.mf-canvas-body {
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: #24242a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.mf-canvas-body.mf-canvas-body {
	/* Neutraliza el padding que algunos temas aplican al body. */
	padding-right: 0;
	padding-left: 0;
}

.mf-canvas {
	display: block;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	/* Sin `overflow-x: hidden`: rompería `position: sticky` dentro del hero. */
}

.mf-canvas > .mf-app {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Enlace de salto: invisible hasta que recibe el foco por teclado. */
.mf-skip {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 9999;
	padding: 12px 20px;
	border-radius: 0 0 8px 0;
	background: #090909;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.mf-skip:focus,
.mf-skip:focus-visible {
	left: 0;
	color: #ffffff;
	outline: 2px solid #ffc928;
	outline-offset: 2px;
}

/* Con la barra de administración visible, WP desplaza el `html`; el hero no
 * necesita nada extra, pero el enlace de salto sí debe quedar debajo. */
.admin-bar .mf-skip:focus {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .mf-skip:focus {
		top: 46px;
	}
}

/* Base ------------------------------------------------------------------ */

.mf-app,
.mf-app *,
.mf-app *::before,
.mf-app *::after {
	box-sizing: border-box;
}

.mf-app {
	position: relative;
	margin: 0;
	color: var(--mf-gray-800);
	background: var(--mf-white);
	font-family: var(--mf-font-sans);
	font-size: var(--mf-text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.mf-app p {
	margin: 0 0 var(--mf-space-3);
}

.mf-app h1,
.mf-app h2,
.mf-app h3 {
	margin: 0;
	font-family: var(--mf-font-display);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: inherit;
}

.mf-app a {
	color: var(--mf-primary);
	text-decoration: none;
	transition: color var(--mf-transition);
}

.mf-app a:hover,
.mf-app a:focus {
	color: var(--mf-gray-800);
}

.mf-app img {
	max-width: 100%;
	height: auto;
	display: block;
}

.mf-app :focus-visible {
	outline: 3px solid var(--mf-accent);
	outline-offset: 2px;
}

/* Secciones ------------------------------------------------------------- */

.mf-section {
	width: 100%;
	max-width: var(--mf-container);
	margin: 0 auto;
	padding: var(--mf-space-7) var(--mf-space-5);
}

.mf-section--narrow {
	max-width: var(--mf-container-narrow);
	padding-top: var(--mf-space-8);
	padding-bottom: var(--mf-space-8);
}

.mf-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mf-space-3);
	margin-bottom: var(--mf-space-5);
}

.mf-section__title {
	font-size: var(--mf-text-2xl);
	color: var(--mf-dark);
	display: flex;
	align-items: center;
	gap: var(--mf-space-3);
}

.mf-section__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 2px 10px;
	border-radius: var(--mf-radius-pill);
	background: var(--mf-gray-100);
	color: var(--mf-gray-600);
	font-family: var(--mf-font-sans);
	font-size: var(--mf-text-sm);
	font-weight: 700;
}

/* Hero ------------------------------------------------------------------ */

.mf-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 120% at 12% 0%, rgba(215, 0, 6, 0.92) 0%, rgba(9, 9, 9, 0.96) 58%, #090909 100%);
	color: var(--mf-on-dark);
	isolation: isolate;
}

.mf-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.mf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(9, 9, 9, 0.55) 0%, rgba(9, 9, 9, 0.82) 100%);
}

.mf-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--mf-container);
	margin: 0 auto;
	padding: var(--mf-space-8) var(--mf-space-5);
}

.mf-hero--home .mf-hero__inner,
.mf-hero--compact .mf-hero__inner {
	padding-top: var(--mf-space-7);
	padding-bottom: var(--mf-space-7);
}

.mf-hero--event .mf-hero__inner {
	padding-top: var(--mf-space-7);
	padding-bottom: var(--mf-space-7);
	max-width: 880px;
}

.mf-hero__logo {
	width: 120px;
	height: 120px;
	object-fit: contain;
	border-radius: var(--mf-radius);
	background: rgba(255, 255, 255, 0.08);
	margin-bottom: var(--mf-space-4);
}

.mf-hero__title {
	font-size: var(--mf-text-3xl);
	color: var(--mf-on-dark);
	margin-bottom: var(--mf-space-3);
	text-wrap: balance;
}

.mf-hero__subtitle {
	font-size: var(--mf-text-lg);
	font-weight: 600;
	color: var(--mf-accent);
	margin-bottom: var(--mf-space-2);
}

.mf-hero__lead {
	font-size: var(--mf-text-lg);
	color: var(--mf-on-dark-muted);
	max-width: 62ch;
}

.mf-hero__meta {
	color: var(--mf-on-dark-muted);
	font-size: var(--mf-text-sm);
}

.mf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mf-space-3);
	margin-top: var(--mf-space-5);
}

.mf-kicker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mf-space-2);
	margin: 0 0 var(--mf-space-3);
	font-size: var(--mf-text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mf-accent);
}

.mf-kicker__sep {
	opacity: 0.6;
}

/* Insignias ------------------------------------------------------------- */

.mf-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--mf-radius-pill);
	background: var(--mf-accent);
	color: var(--mf-dark);
	font-family: var(--mf-font-sans);
	font-size: var(--mf-text-xs);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mf-badge--votes {
	background: var(--mf-gray-100);
	color: var(--mf-gray-800);
	letter-spacing: 0;
	text-transform: none;
}

/* Botones --------------------------------------------------------------- */

.mf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mf-space-2);
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: var(--mf-radius-pill);
	font-family: var(--mf-font-sans);
	font-size: var(--mf-text-sm);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	transition: transform var(--mf-transition), background-color var(--mf-transition), color var(--mf-transition);
}

.mf-button:hover,
.mf-button:focus {
	transform: translateY(-1px);
}

/*
 * Los botones son enlaces, así que `.mf-app a` (0,1,1) les ganaba el color y
 * el texto quedaba rojo sobre fondo rojo. Se sube la especificidad a `.mf-app
 * .mf-button--*` (0,2,0) para que el color de cada variante mande.
 */

.mf-app .mf-button {
	color: var(--mf-dark);
}

.mf-app .mf-button--primary {
	background: var(--mf-primary);
	color: var(--mf-white);
}

.mf-app .mf-button--primary:hover,
.mf-app .mf-button--primary:focus {
	background: var(--mf-dark);
	color: var(--mf-white);
}

.mf-app .mf-button--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--mf-on-dark);
}

.mf-app .mf-button--ghost:hover,
.mf-app .mf-button--ghost:focus {
	background: rgba(255, 255, 255, 0.12);
	color: var(--mf-on-dark);
}

.mf-app .mf-button--whatsapp {
	background: #e8f9ef;
	border-color: #25d366;
	color: #0b6b36;
}

.mf-app .mf-button--whatsapp:hover,
.mf-app .mf-button--whatsapp:focus {
	background: #25d366;
	border-color: #25d366;
	color: #062b16;
}

.mf-link {
	display: inline-block;
	margin-left: var(--mf-space-2);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Cuenta atrás ---------------------------------------------------------- */

.mf-countdown {
	margin: var(--mf-space-5) 0 0;
	padding: var(--mf-space-4) var(--mf-space-5);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--mf-radius);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(2px);
	display: inline-block;
}

.mf-countdown__label {
	margin: 0 0 var(--mf-space-2);
	font-size: var(--mf-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mf-accent);
}

.mf-countdown__units {
	display: flex;
	gap: var(--mf-space-4);
}

.mf-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 58px;
}

.mf-countdown__value {
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-2xl);
	font-weight: 800;
	line-height: 1;
	color: var(--mf-on-dark);
	font-variant-numeric: tabular-nums;
}

.mf-countdown__caption {
	margin-top: 4px;
	font-size: var(--mf-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mf-on-dark-muted);
}

.mf-countdown__finished {
	margin: 0;
	font-weight: 700;
	color: var(--mf-accent);
}

/* Rejillas y tarjetas --------------------------------------------------- */

.mf-grid {
	display: grid;
	gap: var(--mf-space-5);
}

.mf-grid--events {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mf-grid--cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mf-event-card {
	position: relative;
	border-radius: var(--mf-radius-lg);
	overflow: hidden;
	background: var(--mf-white);
	border: 1px solid var(--mf-gray-200);
	box-shadow: var(--mf-shadow-sm);
	transition: transform var(--mf-transition-slow), box-shadow var(--mf-transition-slow);
}

.mf-event-card:hover,
.mf-event-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--mf-shadow-lg);
}

.mf-event-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mf-event-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--mf-gray-100);
	overflow: hidden;
}

.mf-event-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mf-event-card__media--empty {
	background: linear-gradient(135deg, var(--mf-primary) 0%, var(--mf-dark) 100%);
}

.mf-event-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mf-space-2);
	padding: var(--mf-space-4) var(--mf-space-5) var(--mf-space-5);
}

.mf-event-card__badge {
	align-self: flex-start;
	padding: 2px 8px;
	border-radius: var(--mf-radius-pill);
	background: var(--mf-gray-100);
	color: var(--mf-gray-600);
	font-size: var(--mf-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mf-event-card__title {
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-xl);
	font-weight: 800;
	line-height: 1.15;
	color: var(--mf-dark);
}

.mf-event-card__subtitle,
.mf-event-card__meta {
	font-size: var(--mf-text-sm);
	color: var(--mf-gray-600);
}

.mf-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--mf-radius-lg);
	border: 1px solid var(--mf-gray-200);
	background: var(--mf-white);
	box-shadow: var(--mf-shadow-sm);
	overflow: hidden;
	transition: transform var(--mf-transition-slow), box-shadow var(--mf-transition-slow);
}

.mf-card:hover,
.mf-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--mf-shadow);
}

.mf-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 118px;
	background: var(--mf-gray-50);
	border-bottom: 1px solid var(--mf-gray-100);
}

.mf-card__logo {
	width: 88px;
	height: 88px;
	object-fit: contain;
	border-radius: var(--mf-radius);
	background: var(--mf-white);
}

.mf-card__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--mf-primary);
	color: var(--mf-white);
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-2xl);
	font-weight: 800;
	text-transform: uppercase;
}

.mf-card__body {
	flex: 1 1 auto;
	padding: var(--mf-space-4) var(--mf-space-4) var(--mf-space-3);
}

.mf-card__eyebrow {
	margin: 0 0 var(--mf-space-1);
	font-size: var(--mf-text-xs);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mf-primary);
}

.mf-card__title {
	font-size: var(--mf-text-lg);
	color: var(--mf-dark);
	margin-bottom: var(--mf-space-2);
}

.mf-card__text {
	margin: 0 0 var(--mf-space-2);
	font-size: var(--mf-text-sm);
	color: var(--mf-gray-600);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mf-card__meta {
	margin: 0;
	font-size: var(--mf-text-xs);
	color: var(--mf-gray-400);
}

.mf-card__footer {
	padding: 0 var(--mf-space-4) var(--mf-space-4);
}

.mf-card__footer .mf-button {
	width: 100%;
}

/* Filtros --------------------------------------------------------------- */

.mf-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mf-space-2);
	margin-bottom: var(--mf-space-5);
}

.mf-chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--mf-radius-pill);
	border: 1px solid var(--mf-gray-200);
	background: var(--mf-white);
	color: var(--mf-gray-600);
	font-size: var(--mf-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--mf-transition), color var(--mf-transition), border-color var(--mf-transition);
}

.mf-chip:hover,
.mf-chip:focus {
	border-color: var(--mf-primary);
	color: var(--mf-primary);
}

.mf-chip.is-current {
	background: var(--mf-dark);
	border-color: var(--mf-dark);
	color: var(--mf-white);
}

/* Datos del evento ------------------------------------------------------ */

.mf-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mf-space-4);
	margin: 0 0 var(--mf-space-5);
	padding: 0;
}

.mf-facts__item {
	padding: var(--mf-space-4);
	border-radius: var(--mf-radius);
	background: var(--mf-gray-50);
	border-left: 4px solid var(--mf-accent);
}

.mf-facts dt {
	font-size: var(--mf-text-xs);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mf-gray-400);
	margin-bottom: var(--mf-space-1);
}

.mf-facts dd {
	margin: 0;
	font-size: var(--mf-text-base);
	font-weight: 600;
	color: var(--mf-gray-800);
}

.mf-facts__note {
	display: block;
	margin-top: var(--mf-space-1);
	font-size: var(--mf-text-xs);
	font-weight: 700;
	color: var(--mf-primary);
}

/* Prosa ----------------------------------------------------------------- */

.mf-prose {
	max-width: 72ch;
	color: var(--mf-gray-600);
}

.mf-prose h2,
.mf-prose h3 {
	color: var(--mf-dark);
	margin: var(--mf-space-5) 0 var(--mf-space-2);
}

.mf-prose ul,
.mf-prose ol {
	margin: 0 0 var(--mf-space-4);
	padding-left: var(--mf-space-5);
}

.mf-prose li {
	margin-bottom: var(--mf-space-2);
}

.mf-prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Ranking --------------------------------------------------------------- */

.mf-ranking {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
	display: flex;
	flex-direction: column;
	gap: var(--mf-space-2);
}

.mf-ranking__item {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	align-items: center;
	gap: var(--mf-space-4);
	padding: var(--mf-space-3) var(--mf-space-4);
	border-radius: var(--mf-radius);
	background: var(--mf-white);
	border: 1px solid var(--mf-gray-200);
}

.mf-ranking__pos {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mf-dark);
	color: var(--mf-white);
	font-family: var(--mf-font-display);
	font-weight: 800;
	font-size: var(--mf-text-base);
}

.mf-ranking__item:first-child .mf-ranking__pos {
	background: var(--mf-accent);
	color: var(--mf-dark);
}

.mf-ranking__name {
	font-weight: 700;
	color: var(--mf-dark);
	display: flex;
	flex-direction: column;
}

.mf-ranking__city {
	font-size: var(--mf-text-xs);
	font-weight: 500;
	color: var(--mf-gray-400);
}

.mf-ranking__votes {
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-xl);
	font-weight: 800;
	color: var(--mf-primary);
	font-variant-numeric: tabular-nums;
}

.mf-ranking__votes small {
	display: block;
	font-family: var(--mf-font-sans);
	font-size: var(--mf-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mf-gray-400);
}

.mf-ranking--compact .mf-ranking__item {
	grid-template-columns: 44px 1fr auto;
	padding: var(--mf-space-2) var(--mf-space-3);
}

.mf-ranking--compact .mf-ranking__pos {
	width: 32px;
	height: 32px;
	font-size: var(--mf-text-sm);
}

.mf-ranking--compact .mf-ranking__votes {
	font-size: var(--mf-text-lg);
}

/* Galería --------------------------------------------------------------- */

.mf-gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mf-space-3);
}

.mf-gallery__item {
	border-radius: var(--mf-radius);
	overflow: hidden;
	background: var(--mf-gray-100);
	aspect-ratio: 4 / 3;
}

.mf-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mf-transition-slow);
}

.mf-gallery__item a:hover img,
.mf-gallery__item a:focus img {
	transform: scale(1.04);
}

/* Avisos ---------------------------------------------------------------- */

.mf-notice {
	margin: 0 0 var(--mf-space-4);
	padding: var(--mf-space-4) var(--mf-space-5);
	border-radius: var(--mf-radius);
	border-left: 4px solid var(--mf-gray-300);
	background: var(--mf-gray-50);
}

.mf-notice--info {
	border-left-color: var(--mf-primary);
	background: #fff6f6;
}

.mf-notice--warning {
	border-left-color: var(--mf-accent);
	background: #fffbef;
}

.mf-notice__title {
	margin: 0 0 var(--mf-space-1);
	font-weight: 800;
	color: var(--mf-dark);
}

.mf-notice__text {
	margin: 0;
	color: var(--mf-gray-600);
}

/* Paginación ------------------------------------------------------------ */

.mf-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mf-space-2);
	margin-top: var(--mf-space-6);
}

.mf-pagination__page,
.mf-pagination__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--mf-space-3);
	border-radius: var(--mf-radius-sm);
	border: 1px solid var(--mf-gray-200);
	background: var(--mf-white);
	color: var(--mf-gray-600);
	font-size: var(--mf-text-sm);
	font-weight: 700;
	text-decoration: none;
}

.mf-pagination__page:hover,
.mf-pagination__step:hover,
.mf-pagination__page:focus,
.mf-pagination__step:focus {
	border-color: var(--mf-primary);
	color: var(--mf-primary);
}

.mf-pagination__page.is-current {
	background: var(--mf-dark);
	border-color: var(--mf-dark);
	color: var(--mf-white);
}

/* Panel de cuenta ------------------------------------------------------- */

.mf-panel {
	padding: var(--mf-space-6);
	border-radius: var(--mf-radius-lg);
	border: 1px solid var(--mf-gray-200);
	background: var(--mf-white);
	box-shadow: var(--mf-shadow);
}

.mf-panel__title {
	font-size: var(--mf-text-2xl);
	color: var(--mf-dark);
	margin-bottom: var(--mf-space-3);
}

.mf-panel__text {
	margin: 0 0 var(--mf-space-3);
	color: var(--mf-gray-600);
}

.mf-panel__text--muted {
	font-size: var(--mf-text-sm);
	color: var(--mf-gray-400);
}

/* Menú del sitio -------------------------------------------------------- */

/*
 * Barra pegajosa, no fija: sigue en el flujo del documento, así que el hero
 * empieza debajo y no hay que compensar con `padding-top`. Los colores de los
 * enlaces van con `.mf-app` delante porque `.mf-app a` (0,1,1) gana a una
 * clase suelta (0,1,0) y teñiría el menú de rojo.
 */

.mf-site-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(9, 9, 9, 0.9);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--mf-on-dark);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(160%) blur(12px);
}

.admin-bar .mf-site-nav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .mf-site-nav {
		top: 46px;
	}
}

.mf-site-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mf-space-4);
	width: 100%;
	max-width: var(--mf-container);
	margin: 0 auto;
	padding: var(--mf-space-3) var(--mf-space-5);
}

.mf-app .mf-site-nav__brand {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--mf-font-display);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.mf-app .mf-site-nav__mark {
	color: var(--mf-white);
}

.mf-app .mf-site-nav__mark--accent {
	color: var(--mf-accent);
}

.mf-site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mf-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mf-app .mf-site-nav__link {
	display: inline-block;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	color: var(--mf-on-dark-muted);
	font-size: var(--mf-text-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--mf-transition), border-color var(--mf-transition);
}

.mf-app .mf-site-nav__link:hover,
.mf-app .mf-site-nav__link:focus {
	border-bottom-color: rgba(255, 255, 255, 0.45);
	color: var(--mf-white);
}

.mf-app .mf-site-nav__link.is-current {
	border-bottom-color: var(--mf-accent);
	color: var(--mf-white);
}

/* Pie del sitio --------------------------------------------------------- */

.mf-site-footer {
	background: var(--mf-dark);
	color: var(--mf-on-dark);
	padding: var(--mf-space-7) var(--mf-space-5) var(--mf-space-5);
}

.mf-site-footer__cta {
	max-width: var(--mf-container);
	margin: 0 auto var(--mf-space-6);
	padding-bottom: var(--mf-space-6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	text-align: center;
}

.mf-site-footer__cta-text {
	margin: 0 0 var(--mf-space-4);
	color: var(--mf-on-dark-muted);
}

.mf-site-footer__cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mf-space-3);
}

.mf-site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mf-space-5);
	max-width: var(--mf-container);
	margin: 0 auto;
}

.mf-site-footer__logo {
	margin: 0 0 var(--mf-space-2);
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-xl);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mf-app .mf-site-footer__mark {
	color: var(--mf-white);
}

.mf-app .mf-site-footer__mark--accent {
	color: var(--mf-accent);
}

.mf-site-footer__tagline {
	max-width: 36ch;
	margin: 0;
	color: var(--mf-on-dark-muted);
	font-size: var(--mf-text-sm);
}

.mf-site-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mf-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mf-app .mf-site-footer__link {
	color: var(--mf-on-dark-muted);
	font-size: var(--mf-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.mf-app .mf-site-footer__link:hover,
.mf-app .mf-site-footer__link:focus {
	color: var(--mf-accent);
}

.mf-site-footer__legal {
	max-width: var(--mf-container);
	margin: var(--mf-space-6) auto 0;
	padding-top: var(--mf-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--mf-text-xs);
	text-align: center;
}

/* Responsive ------------------------------------------------------------ */

@media (min-width: 1025px) {
	/*
	 * La portada tiene el hero más ancho (1180 px) y un título de 44 px se
	 * queda pequeño en pantalla grande. La landing del evento mantiene 44 px
	 * porque su hero está acotado a 880 px.
	 */
	.mf-hero--home .mf-hero__title {
		font-size: var(--mf-text-4xl);
	}
}

@media (max-width: 1024px) {
	.mf-grid--events,
	.mf-grid--cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mf-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.mf-section {
		padding: var(--mf-space-6) var(--mf-space-4);
	}

	.mf-hero__inner {
		padding: var(--mf-space-7) var(--mf-space-4);
	}

	.mf-hero--event .mf-hero__inner {
		padding-top: var(--mf-space-6);
	}

	.mf-hero__title {
		font-size: var(--mf-text-2xl);
	}

	.mf-hero__lead {
		font-size: var(--mf-text-base);
	}

	.mf-facts {
		grid-template-columns: 1fr;
	}

	.mf-countdown__units {
		gap: var(--mf-space-3);
	}

	.mf-countdown__unit {
		min-width: 44px;
	}

	.mf-countdown__value {
		font-size: var(--mf-text-xl);
	}

	.mf-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mf-ranking__item {
		grid-template-columns: 44px 1fr auto;
		gap: var(--mf-space-3);
	}

	.mf-site-nav__inner {
		padding: var(--mf-space-3) var(--mf-space-4);
	}

	.mf-site-nav__list {
		gap: var(--mf-space-4);
	}

	.mf-site-footer {
		padding: var(--mf-space-6) var(--mf-space-4) var(--mf-space-5);
	}

	.mf-site-footer__inner {
		flex-direction: column;
	}
}

@media (max-width: 560px) {
	.mf-grid--events,
	.mf-grid--cards {
		grid-template-columns: 1fr;
	}

	.mf-hero__actions .mf-button,
	.mf-site-footer__cta-actions .mf-button {
		width: 100%;
	}

	.mf-section__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.mf-site-nav__inner {
		flex-wrap: wrap;
		row-gap: var(--mf-space-2);
	}

	.mf-site-nav__list {
		gap: var(--mf-space-4);
	}

	.mf-site-nav__link {
		font-size: var(--mf-text-xs);
	}
}