/**
 * 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.
 */

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

.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-crema);
}

.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;
	}
}

@media (max-width: 767px) {
	.mka-hero {
		flex-direction: column;
	}

	.mka-hero__panel {
		flex: 1 1 50%;
		width: 100%;
	}

	.mka-hero__contenido {
		padding: var(--mka-espaciado-lg) var(--mka-espaciado-md);
	}

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

/**
 * 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: 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(2, 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
 * (3 categorías), se centra en vez de quedar pegada a la izquierda.
 */
.mka-categorias__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc(50% - var(--mka-espaciado-lg) / 2);
}

/* 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__list {
		grid-template-columns: 1fr;
	}

	.mka-categorias__item:last-child:nth-child(odd) {
		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: 5rem 0;
}

.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);
}

.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: 4rem 0 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 {
	margin: 0 auto var(--mka-espaciado-lg) auto;
	padding: 0 var(--mka-espaciado-md);
	text-align: center;
}

.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);
}

.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.
 */

.mka-esencia {
	padding: 6rem var(--mka-espaciado-lg) 3rem var(--mka-espaciado-lg);
}

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

.mka-esencia__texto {
	max-width: 34ch;
	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;
	color: var(--mka-color-texto);
	margin: 0 0 var(--mka-espaciado-md) 0;
}

.mka-esencia__parrafo {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--mka-color-texto-suave);
	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;
	color: var(--mka-color-texto-suave);
}

.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;
	color: var(--mka-color-texto);
}

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

	.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-08-01: carrusel).
 * Antes era una fila estática (flex-wrap) a propósito distinta de la
 * Sección 3; ahora usa el mismo patrón de riel con scroll-snap que
 * `.mka-sets__rail` — permite agregar más gemas sin tocar el
 * diseño y resuelve el desborde en móvil sin envolver filas. Deslizable
 * (rueda/trackpad/gesto), sin autoplay, sin flechas ni puntos.
 */

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

.mka-guia-gemas__intro {
	max-width: 40ch;
	margin: 0 auto var(--mka-espaciado-xl) auto;
	text-align: 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__fila {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 var(--mka-espaciado-lg);
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 3.5rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.mka-guia-gemas__fila::-webkit-scrollbar {
	display: none;
}

.mka-guia-gemas__item {
	flex: 0 0 auto;
	width: 175px;
}

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

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

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

.mka-guia-gemas__acento {
	display: block;
	width: 2rem;
	height: 2px;
	margin-top: 0.5rem;
	background-color: var(--mka-acento-gema);
}

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

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

.mka-guia-gemas__link:hover .mka-guia-gemas__nombre,
.mka-guia-gemas__link:focus-visible .mka-guia-gemas__nombre {
	color: var(--mka-color-burdeos);
}

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

	.mka-guia-gemas__fila {
		padding: 0 var(--mka-espaciado-md);
		gap: 1.5rem;
	}

	.mka-guia-gemas__item {
		width: 130px;
	}

	.mka-guia-gemas__item:first-child {
		scroll-margin-left: var(--mka-espaciado-md);
	}
}

/**
 * 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: 5rem var(--mka-espaciado-lg) 3rem 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;
}