/**
 * Home — Sección 1: Hero dividido (revisión 2026-07-29, referencia de
 * dirección de arte aprobada). Dos paneles, mismo alto total que el
 * hero original (100svh) — antes era una sola imagen a pantalla
 * completa; se reabrió esta sección puntualmente para elevar la
 * composición, sin tocar el recorrido de usuario (mismo CTA, mismo
 * destino). Panel editorial (texto + CTA superpuestos) a la izquierda,
 * panel de producto a la derecha. En móvil se apilan uno sobre el
 * otro, cada uno a mitad de alto, para conservar el alto total.
 *
 * Nota para cuando llegue fotografía real: el texto del panel
 * editorial usa --mka-color-texto (tono oscuro) porque el placeholder
 * es claro. La foto real debe elegirse (o encuadrarse) para que esa
 * zona sea naturalmente clara — no se añade un scrim oscuro decorativo,
 * no está permitido por los principios visuales.
 */

/**
 * Franja de envío gratis (rediseño 2026-09-30) — solo Home, encima del
 * header (mka_banner_envio_home(), hooks-catalogo.php). Bloque normal,
 * no fijo: se desplaza fuera de vista al hacer scroll y el header
 * (sticky) queda solo arriba del todo, igual que en la referencia
 * editorial aprobada.
 */
.mka-banner-envio {
	display: block;
	background-color: var(--mka-color-burdeos);
	color: var(--mka-color-blanco-calido);
	text-align: center;
	padding: 0.65rem 4%;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.mka-banner-envio:hover,
.mka-banner-envio:focus-visible {
	text-decoration: underline;
}

.mka-hero {
	position: relative;
	height: 88svh;
	min-height: 88svh;
	overflow: hidden;
	display: flex;
	background-color: var(--mka-color-beige-profundo);
}

.mka-hero__panel {
	position: relative;
	flex: 1 1 50%;
	height: 100%;
	overflow: hidden;
}

/**
 * Superposición muy sutil (6%) solo en el panel editorial: mejora la
 * legibilidad del texto sin oscurecer la foto ni leerse como un filtro.
 * z-index explícito porque el contenido (más abajo) también necesita
 * el suyo para quedar por encima de esta capa.
 */
.mka-hero__panel--editorial::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.06);
	z-index: 1;
	pointer-events: none;
}

.mka-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.mka-hero__contenido {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--mka-espaciado-sm);
	padding: var(--mka-espaciado-xl) var(--mka-espaciado-lg);
	margin-top: 3rem;
}

.mka-hero__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mka-color-texto-suave);
}

.mka-hero__titulo {
	margin: 0;
	max-width: 16ch;
	font-family: var(--mka-font-display);
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--mka-color-texto);
}

.mka-hero__cta {
	display: inline-block;
	margin-top: var(--mka-espaciado-sm);
	color: var(--mka-color-texto);
	text-decoration: none;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: var(--mka-espaciado-sm) var(--mka-espaciado-md);
	border: 1px solid var(--mka-color-texto);
	background-color: transparent;
	transition: background-color 200ms ease, color 200ms ease;
}

.mka-hero__cta:hover,
.mka-hero__cta:focus-visible {
	background-color: var(--mka-color-texto);
	color: var(--mka-color-blanco-calido);
}

/**
 * Panel editorial SIN fotografía (composición tipográfica): fondo crema
 * liso, sin la superposición del 6 % (solo existe para dar legibilidad
 * sobre una foto) y un filete burdeos discreto sobre el eyebrow. Cuando
 * exista la fotografía lifestyle definitiva (Personalizador → Imágenes
 * de la Home) este panel vuelve solo a la composición con foto.
 */
.mka-hero__panel--tipografico {
	background-color: var(--mka-color-beige-profundo);
}

.mka-hero__panel--tipografico::before {
	display: none;
}

.mka-hero__panel--tipografico .mka-hero__contenido {
	gap: var(--mka-espaciado-md);
	margin-top: 0;
}

.mka-hero__panel--tipografico .mka-hero__contenido::before {
	content: '';
	display: block;
	width: 40px;
	height: 1px;
	background-color: var(--mka-color-burdeos);
	opacity: 0.4;
}

.mka-hero__panel--tipografico .mka-hero__titulo {
	max-width: 14ch;
	font-size: clamp(2rem, 4.2vw, 3.5rem);
	line-height: 1.15;
}

/* Sin panel de producto: el panel editorial ocupa todo el ancho, centrado. */
.mka-hero--sin-producto .mka-hero__panel--tipografico .mka-hero__contenido {
	align-items: center;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.mka-hero__cta {
		transition: none;
	}
}

/**
 * Móvil: antes cada panel ocupaba el 50 % de un hero de 118svh (≈59svh
 * cada uno) — la joya y el mensaje quedaban en bloques largos que
 * obligaban a recorrer la pantalla para ver ambos. Ahora el alto total
 * es fijo y bajo (72svh): la foto ocupa un poco más de la mitad para
 * que la joya se lea bien, y el bloque de texto es compacto (sin
 * `justify-content: center`, que antes añadía aire arriba/abajo del
 * mensaje) — joya, mensaje y botón caben juntos sin scroll largo.
 */
@media (max-width: 767px) {
	.mka-hero {
		flex-direction: column;
		height: 80svh;
		min-height: 80svh;
	}

	.mka-hero__panel {
		flex: 0 0 auto;
		width: 100%;
		height: 34svh;
	}

	.mka-hero__panel--producto {
		height: 46svh;
	}

	.mka-hero__contenido {
		justify-content: flex-end;
		padding: var(--mka-espaciado-md) var(--mka-espaciado-md) var(--mka-espaciado-md);
		gap: var(--mka-espaciado-xs);
	}

	.mka-hero__titulo {
		max-width: 20ch;
		font-size: clamp(1.375rem, 6vw, 1.75rem);
	}

	.mka-hero__cta {
		margin-top: 0.25rem;
	}
}

/**
 * Home — Sección 2: Categorías principales.
 * 2×2 en escritorio (protagonismo editorial de la fotografía),
 * 2 columnas en tablet, 1 columna en móvil. Imágenes grandes,
 * proporción vertical, sin bordes/sombras/tarjetas. Nombre debajo
 * de la imagen, discreto — no depende del contraste de cada foto.
 */

.mka-categorias {
	padding: 3.5rem var(--mka-espaciado-lg);
}

.mka-categorias__list {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--mka-espaciado-lg);
	row-gap: 1.5rem;
}

.mka-categorias__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.mka-categorias__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mka-categorias__nombre {
	display: block;
	margin-top: var(--mka-espaciado-sm);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mka-color-texto);
	text-align: center;
}

.mka-categorias__link:hover .mka-categorias__nombre,
.mka-categorias__link:focus-visible .mka-categorias__nombre {
	color: var(--mka-color-burdeos);
}

/**
 * Las categorías aparecen solo si tienen piezas públicas, así que el
 * número de tarjetas varía: si queda una sola en la última fila
 * (total no múltiplo de 3), se centra en vez de quedar pegada a la
 * izquierda.
 */
.mka-categorias__item:last-child:nth-child(3n + 1) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc((100% - 2 * var(--mka-espaciado-lg)) / 3);
}

/* Categoría sin fotografía: bloque tipográfico, nunca una imagen de relleno. */
.mka-categorias__link--tipografico {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background-color: var(--mka-color-crema);
}

.mka-categorias__link--tipografico .mka-categorias__nombre {
	margin-top: 0;
}

@media (max-width: 767px) {
	.mka-categorias {
		padding-bottom: 2rem;
	}

	.mka-categorias__list {
		grid-template-columns: 1fr;
	}

	.mka-categorias__item:last-child:nth-child(3n + 1) {
		width: auto;
	}
}

/**
 * Rieles horizontales (Sets, Guía de gemas, Instagram):
 * `cursor: grab` invita a arrastrar con mouse; `rail-drag.js` hace el
 * arrastre real y añade `.is-arrastrando` mientras dura (cursor
 * "grabbing" + sin selección de texto). Táctil/trackpad ya funciona
 * nativo via overflow-x, sin JS de por medio.
 */
[data-mka-rail] {
	cursor: grab;
}

[data-mka-rail].is-arrastrando {
	cursor: grabbing;
	user-select: none;
}

/**
 * Flechas de los rieles — deliberadamente mínimas: sin círculo, sin
 * fondo, solo el trazo en burdeos, superpuestas apenas sobre el borde
 * de la primera/última tarjeta (nunca fuera del contenido en
 * escritorio). `rail-nav.js` las oculta cuando no hay más que
 * recorrer en esa dirección (inicio/fin del riel, o si el riel no
 * desborda). El arrastre y el scroll táctil siguen intactos.
 */
.mka-rail-wrap {
	position: relative;
}

.mka-rail-flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 50%;
	outline: none;
	color: var(--mka-color-burdeos);
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 250ms ease, background-color 250ms ease;
}

/**
 * El trazo (chevron) siempre en burdeos — nunca cambia de color, así
 * mantiene contraste. Lo único que cambia con la interacción es el
 * fondo: beige/champaña de marca en vez del azul por defecto del
 * navegador (:focus-visible trae su propio anillo azul si no se
 * anula). Mismo fondo en hover y focus; active usa el tono más
 * profundo.
 */
.mka-rail-flecha:hover,
.mka-rail-flecha:focus-visible {
	opacity: 1;
	background-color: #d8c7b3;
}

.mka-rail-flecha:focus-visible {
	outline: 1px solid #d8c7b3;
	outline-offset: 3px;
}

.mka-rail-flecha:active {
	opacity: 1;
	background-color: #bfa58b;
}

.mka-rail-flecha[hidden] {
	display: none;
}

.mka-rail-flecha--prev {
	left: 0.25rem;
}

.mka-rail-flecha--next {
	right: 0.25rem;
}

@media (max-width: 767px) {
	.mka-rail-flecha {
		width: 2rem;
		height: 2rem;
	}

	.mka-rail-flecha svg {
		width: 16px;
		height: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mka-rail-flecha {
		transition: none;
	}
}

/**
 * Home — Sección 3: Sets.
 * Bloque editorial con los sets reales: título + enlace "Ver todos los
 * sets" y un riel horizontal de tarjetas de producto (misma tarjeta que la
 * Tienda: foto principal, nombre, precio y estado). Scroll nativo, arrastre
 * con mouse, flechas y deriva continua (rail-drag.js). Sensación de revista.
 */

.mka-sets {
	padding: 3.5rem 0;
}

@media (max-width: 767px) {
	.mka-sets {
		padding-top: 2rem;
	}
}

.mka-sets__intro {
	margin: 0 auto var(--mka-espaciado-lg) auto;
	padding: 0 var(--mka-espaciado-md);
	text-align: center;
}

.mka-sets__titulo {
	margin: 0 0 var(--mka-espaciado-sm) 0;
	font-family: var(--mka-font-display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 400;
	color: var(--mka-color-texto);
}

.mka-sets__enlace {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--mka-color-plata);
	text-underline-offset: 0.3em;
	color: var(--mka-color-texto-suave);
}

.mka-sets__enlace:hover,
.mka-sets__enlace:focus-visible {
	color: var(--mka-color-burdeos);
	text-decoration-color: currentColor;
}

/**
 * Sin scroll-snap-type: con deriva continua (autoplay) y el rebase
 * del loop infinito, cualquier scroll-snap "mandatory" secuestra los
 * scrollBy() precisos (incluso uno de pocos px salta a la tarjeta más
 * cercana) — confirmado que rompe tanto el autoplay como el rebase.
 * La alineación por tarjeta ya la da el propio JS (getStep()).
 */
.mka-sets__rail {
	display: flex;
	gap: var(--mka-espaciado-lg);
	margin: 0;
	padding: 0 var(--mka-espaciado-lg);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.mka-sets__rail::-webkit-scrollbar {
	display: none;
}

.mka-sets__item {
	flex: 0 0 auto;
	width: min(70vw, 440px);
}

/**
 * Escritorio: tres tarjetas completas a la vez (antes ~2.9, la tercera
 * quedaba cortada por el ancho fijo de 440px). El ancho se deriva del
 * propio riel — tres tarjetas y dos espacios — así que las flechas
 * (posicionadas en el padding lateral del riel) nunca vuelven a caer
 * sobre la fotografía. Móvil sin cambios: sigue con `min(70vw, 440px)`,
 * una tarjeta a la vez.
 */
@media (min-width: 768px) {
	.mka-sets__item {
		width: calc((100% - 2 * var(--mka-espaciado-lg)) / 3);
	}
}

.mka-sets__item:first-child {
	scroll-margin-left: var(--mka-espaciado-lg);
}

/**
 * Home — Sección 4: Nuestros favoritos.
 * Selección editorial manual en un riel horizontal FINITO (ver rail-drag.js,
 * `data-mka-rail-finito`): con principio y fin claros, sin autoplay ni loop.
 * Escritorio: ~4 piezas a la vista con la siguiente asomando (invita a
 * continuar), arrastre con mouse y flechas mínimas que aparecen solo si
 * hay más piezas en esa dirección. Móvil: swipe horizontal nativo con la
 * siguiente pieza asomando y sin flechas. La tarjeta es la compartida
 * (`.mka-producto-card`, components.css).
 */

.mka-favoritos {
	padding: 3rem 0 3.5rem;
	/* Ancla estable #nuestros-favoritos (destino de /best-sellers/): que el header fijo no la tape. */
	scroll-margin-top: var(--mka-header-height);
}

.mka-favoritos__intro {
	max-width: 1600px;
	margin: 0 auto var(--mka-espaciado-lg) auto;
	padding: 0 var(--mka-espaciado-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mka-espaciado-sm);
}

.mka-favoritos__titulo {
	margin: 0;
	font-family: var(--mka-font-display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 400;
	color: var(--mka-color-texto);
}

/**
 * Pausa discreta del avance automático: mismo lenguaje visual que las
 * flechas del riel (sin círculo ni fondo propio, solo el trazo), a un
 * lado del título. `rail-drag.js` alterna los dos íconos (pausa/play)
 * y el estado `aria-pressed` según el control lo detiene o lo reanuda.
 */
.mka-favoritos__pausa {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	background: none;
	border: 1px solid var(--mka-color-plata);
	border-radius: 50%;
	color: var(--mka-color-texto-suave);
	cursor: pointer;
	transition: color 200ms ease, border-color 200ms ease;
}

.mka-favoritos__pausa:hover,
.mka-favoritos__pausa:focus-visible {
	color: var(--mka-color-burdeos);
	border-color: var(--mka-color-burdeos);
}

.mka-favoritos__pausa[aria-pressed="true"] .mka-favoritos__pausa-icono--pausa,
.mka-favoritos__pausa[aria-pressed="false"] .mka-favoritos__pausa-icono--play {
	display: none;
}

.mka-favoritos__rail {
	display: flex;
	gap: var(--mka-espaciado-md);
	margin: 0;
	padding: 0 var(--mka-espaciado-lg);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.mka-favoritos__rail::-webkit-scrollbar {
	display: none;
}

.mka-favoritos__item {
	flex: 0 0 auto;
	width: clamp(220px, 21vw, 300px);
}

/* Táctil: swipe natural, con un ajuste suave a la tarjeta más cercana (solo con el dedo). */
@media (hover: none), (max-width: 767px) {
	.mka-favoritos__rail {
		padding: 0 var(--mka-espaciado-md);
		scroll-snap-type: x proximity;
		scroll-padding-left: var(--mka-espaciado-md);
	}

	.mka-favoritos__item {
		width: 62vw;
		max-width: 280px;
		scroll-snap-align: start;
	}

	/* Sin flechas en móvil/táctil: el gesto ya es el control. */
	.mka-favoritos .mka-rail-flecha {
		display: none;
	}
}

/**
 * Home — Sección 5: Nuestra esencia.
 * Rompe deliberadamente el ritmo de grids/carrusel de las secciones
 * 2-4: un único bloque editorial asimétrico (texto + una sola foto),
 * mucho más espacio en blanco. Sin botones ni enlaces — contemplativo.
 * Borgoña profundo (rediseño 2026-09-30, junto con el footer): la única
 * sección de apoyo del Home con fondo oscuro, marca esta pausa
 * contemplativa como un momento aparte del resto de la página.
 */

.mka-esencia {
	padding: 4rem var(--mka-espaciado-lg) 3rem var(--mka-espaciado-lg);
	background-color: var(--mka-color-burdeos);
	color: var(--mka-color-blanco-calido);
}

.mka-esencia__titulo,
.mka-esencia__parrafo {
	color: var(--mka-color-blanco-calido);
}

.mka-esencia__grid {
	max-width: 1600px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 4rem;
	align-items: center;
}

.mka-esencia__texto {
	max-width: 420px;
	padding-left: 2rem;
}

.mka-esencia__titulo {
	font-family: var(--mka-font-display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	margin: 0 0 var(--mka-espaciado-md) 0;
}

.mka-esencia__parrafo {
	font-size: 1rem;
	line-height: 1.8;
	margin: 0;
}

.mka-esencia__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/**
 * Nuestra esencia SIN fotografía: composición editorial de texto —
 * una sola columna centrada, párrafo en la tipografía de marca a mayor
 * tamaño, mucho aire. Cuando exista la fotografía (Personalizador →
 * Imágenes de la Home) vuelve al bloque asimétrico texto + foto.
 */
.mka-esencia--tipografico .mka-esencia__grid {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	gap: 0;
}

.mka-esencia--tipografico .mka-esencia__texto {
	max-width: 36rem;
	padding-left: 0;
}

.mka-esencia--tipografico .mka-esencia__titulo {
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.8;
}

.mka-esencia--tipografico .mka-esencia__parrafo {
	font-family: var(--mka-font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.6;
}

@media (max-width: 900px) {
	.mka-esencia__grid {
		grid-template-columns: 1fr;
		gap: var(--mka-espaciado-md);
	}

	.mka-esencia__texto {
		max-width: none;
		padding: 0;
		order: 1;
	}

	.mka-esencia__media {
		order: 2;
	}
}

/**
 * Home — Sección 6: Guía de gemas (rediseño 2026-09-30: título a la
 * izquierda + rejilla de primeros planos a la derecha). Antes era un
 * riel horizontal con la intro centrada arriba (revisión 2026-08-01);
 * con solo seis gemas fijas — no una lista que crece sin límite como
 * Sets o Instagram — una rejilla fija lee mejor que un riel y deja ver
 * las seis a la vez, sin arrastre ni scroll oculto.
 */

.mka-guia-gemas {
	padding: var(--mka-espaciado-lg) var(--mka-espaciado-lg) 3.5rem var(--mka-espaciado-lg);
}

.mka-guia-gemas__layout {
	max-width: 1600px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(220px, 26%) 1fr;
	gap: var(--mka-espaciado-xl);
	align-items: center;
}

.mka-guia-gemas__titulo {
	font-family: var(--mka-font-display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 400;
	color: var(--mka-color-texto);
	margin: 0 0 var(--mka-espaciado-sm) 0;
}

.mka-guia-gemas__texto {
	font-size: 0.9375rem;
	color: var(--mka-color-texto-suave);
	margin: 0;
}

.mka-guia-gemas__grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mka-espaciado-lg) var(--mka-espaciado-md);
}

.mka-guia-gemas__link {
	display: block;
	text-decoration: none;
	color: inherit;
	text-align: center;
}

.mka-guia-gemas__img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.mka-guia-gemas__nombre {
	display: block;
	margin-top: var(--mka-espaciado-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mka-guia-gemas__descripcion {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--mka-color-texto-suave);
}

@media (max-width: 900px) {
	.mka-guia-gemas__layout {
		grid-template-columns: 1fr;
		gap: var(--mka-espaciado-md);
	}

	.mka-guia-gemas__intro {
		text-align: center;
	}
}

@media (max-width: 600px) {
	.mka-guia-gemas {
		padding-left: var(--mka-espaciado-md);
		padding-right: var(--mka-espaciado-md);
	}

	.mka-guia-gemas__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--mka-espaciado-md) var(--mka-espaciado-sm);
	}
}

/**
 * Home — Sección 7: Instagram (rediseño editorial — revisión 2026-08-01).
 * Mosaico asimétrico en vez del grid uniforme anterior: una pieza
 * grande (2x2) como ancla visual y cinco piezas pequeñas alrededor,
 * con un espacio mínimo entre celdas (antes era 0 — el mosaico
 * asimétrico necesita ese respiro para leerse como composición y no
 * como una sola imagen cortada). `container-type` + `cqw` en vez de
 * `aspect-ratio` fijo: con columnas que cambian de ancho (celda grande
 * vs. celda pequeña) solo así cada celda queda realmente cuadrada.
 */

.mka-instagram {
	padding: 3.5rem var(--mka-espaciado-lg) 2.5rem var(--mka-espaciado-lg);
}

.mka-instagram__intro {
	max-width: 40ch;
	margin: 0 auto;
	padding-bottom: var(--mka-espaciado-lg);
	text-align: center;
}

.mka-instagram__titulo {
	font-family: var(--mka-font-display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 400;
	color: var(--mka-color-texto);
	margin: 0 0 var(--mka-espaciado-sm) 0;
}

.mka-instagram__texto {
	font-size: 0.9375rem;
	color: var(--mka-color-texto-suave);
	margin: 0;
}

.mka-instagram__header {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--mka-espaciado-md);
	margin-top: var(--mka-espaciado-md);
	flex-wrap: wrap;
}

.mka-instagram__handle {
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	color: var(--mka-color-texto);
}

.mka-instagram__seguir {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--mka-color-plata);
	color: var(--mka-color-texto-suave);
}

.mka-instagram__seguir:hover,
.mka-instagram__seguir:focus-visible {
	color: var(--mka-color-burdeos);
	text-decoration-color: currentColor;
}

/**
 * Riel horizontal, no mosaico: 4 piezas grandes con mucho aire entre
 * ellas, mismo patrón que Sets/Guía de gemas — "pocas piezas,
 * mucho espacio" lee más editorial/revista que un grid denso tipo
 * Instagram. Loop infinito con avance automático por bloques (ver
 * rail-drag.js) además de flechas, arrastre y deslizamiento táctil.
 */
.mka-instagram__rail {
	max-width: 1250px;
	margin: 0 auto;
	padding: 0 var(--mka-espaciado-lg);
	list-style: none;
	display: flex;
	gap: 3rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.mka-instagram__rail::-webkit-scrollbar {
	display: none;
}

.mka-instagram__item {
	position: relative;
	flex: 0 0 auto;
	width: min(60vw, 320px);
	overflow: hidden;
	border: 1px solid var(--mka-color-plata);
}

.mka-instagram__item:first-child {
	scroll-margin-left: var(--mka-espaciado-lg);
}

.mka-instagram__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 400ms ease, opacity 400ms ease;
}

.mka-instagram__item:hover .mka-instagram__img,
.mka-instagram__item:focus-within .mka-instagram__img {
	transform: scale(1.04);
	opacity: 0.92;
}