/* Portada Vitrina (spec §6.4). Solo se carga en la portada. */

/* Slider de promociones: banners con el texto dentro de la imagen (21:9 en escritorio, 1:1 en móvil). */
.nm-hero-slider {
	padding-top: 18px;
}

.nm-hero-frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--nm-radius-banner);
	background: var(--nm-soft);
}

/* Sin JS es una fila deslizable; el JS agrega is-ready y oculta la barra de desplazamiento. */
.nm-hero-track {
	display: flex;
	aspect-ratio: 21 / 9;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

.nm-hero-frame.is-ready .nm-hero-track {
	scrollbar-width: none;
}

.nm-hero-frame.is-ready .nm-hero-track::-webkit-scrollbar {
	display: none;
}

.nm-hero-slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.nm-hero-link,
.nm-hero-link picture,
.nm-hero-link img {
	display: block;
	width: 100%;
	height: 100%;
}

.nm-hero-link img {
	object-fit: cover;
}

.nm-hero-link:focus-visible {
	outline: 3px solid var(--nm-yellow);
	outline-offset: -3px;
}

.nm-hero-btn {
	position: absolute;
	bottom: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0 0 3px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: rgba(20, 22, 90, 0.62);
	color: var(--nm-white);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

/* En escritorio el texto de la imagen va a la izquierda: las flechas se juntan en la esquina inferior derecha. */
.nm-hero-btn--prev { right: 54px; }
.nm-hero-btn--next { right: 10px; }

.nm-hero-btn:hover,
.nm-hero-toggle:hover {
	background: var(--nm-navy-dark);
}

.nm-hero-btn:focus-visible,
.nm-hero-toggle:focus-visible,
.nm-hero-dot:focus-visible {
	outline: 3px solid var(--nm-yellow);
	outline-offset: 2px;
}

/* Barra inferior centrada: pausa + puntos. Los textos de las imágenes van a la izquierda (escritorio) o arriba (móvil). */
.nm-hero-bar {
	position: absolute;
	bottom: 10px;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px 8px 2px 2px;
	border-radius: var(--nm-radius-pill);
	background: rgba(20, 22, 90, 0.62);
	transform: translateX(-50%);
}

.nm-hero-btn[hidden],
.nm-hero-bar[hidden] {
	display: none;
}

.nm-hero-dots {
	display: flex;
}

/* Área táctil de 24 px (WCAG 2.5.8) con un punto visible de 10 px. */
.nm-hero-dot,
.nm-hero-toggle {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.nm-hero-dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border: 1px solid var(--nm-white);
	border-radius: 50%;
	background: transparent;
}

.nm-hero-dot[aria-current="true"]::before {
	background: var(--nm-yellow);
	border-color: var(--nm-yellow);
}

.nm-hero-toggle {
	width: 28px;
	height: 28px;
	color: var(--nm-white);
}

/* Pausa (dos barras) cuando corre; triángulo de reproducir cuando está en pausa. */
.nm-hero-toggle-icon {
	width: 10px;
	height: 12px;
	border-right: 3px solid currentColor;
	border-left: 3px solid currentColor;
}

.nm-hero-toggle[data-paused] .nm-hero-toggle-icon {
	width: 0;
	height: 0;
	border-width: 6px 0 6px 10px;
	border-style: solid;
	border-color: transparent transparent transparent currentColor;
}

@media (max-width: 820px) {
	/* 1:1 para que las baldosas entren en la primera pantalla. Los banners 4:5 que queden se
	   anclan arriba: el texto va en el tercio superior y solo se recorta la base de los productos. */
	.nm-hero-track {
		aspect-ratio: 1 / 1;
	}

	.nm-hero-link img {
		object-position: center top;
	}

	/* En móvil el texto va arriba: las flechas (44 px) quedan a los lados, a media altura, sobre los productos. */
	.nm-hero-btn {
		top: 58%;
		bottom: auto;
		width: 44px;
		height: 44px;
		transform: translateY(-50%);
	}

	.nm-hero-btn--prev { right: auto; left: 6px; }
	.nm-hero-btn--next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.nm-hero-track {
		scroll-behavior: auto;
	}
}

/* Secciones */
.nm-home-section {
	padding-top: 40px;
}

.nm-home-title {
	margin: 0 0 18px;
	font-size: var(--nm-fs-24);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-align: left;
	text-transform: uppercase;
}

/* Lo más buscado: bento. Disney ocupa 2 filas a la izquierda, Sanrio arriba a la derecha,
   Fútbol y Escolar abajo. Cada tarjeta es un enlace con la foto de estudio de fondo (su
   rincón superior izquierdo está vacío a propósito) y el texto encima. */
.nm-tiles {
	--nm-bento-row: clamp(220px, 23.4vw, 262px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, 0.5fr);
	grid-template-rows: repeat(2, var(--nm-bento-row));
	grid-template-areas:
		"big wide wide"
		"big a b";
	gap: var(--nm-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-tile-item--big { grid-area: big; }
.nm-tile-item--wide { grid-area: wide; }
.nm-tile-item--a { grid-area: a; }
.nm-tile-item--b { grid-area: b; }

.nm-tile-item {
	min-width: 0;
}

.nm-tile {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: var(--nm-radius-banner);
	color: var(--nm-white);
	text-decoration: none;
}

/* Fondo de respaldo (mientras carga la foto) = el color plano que rodea el texto. */
.nm-tile--disney { background: var(--nm-tile-disney); }
.nm-tile--sanrio {
	background: var(--nm-tile-sanrio);
}

/* El rosa de la foto, bajo el texto, mide ~4:1 con blanco: un velo oscuro en la esquina
   (sobre la foto, bajo el texto) lo sube a ~6:1 sin ensuciar los productos. */
.nm-tile--sanrio::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, rgb(60 0 35 / 0.46), rgb(60 0 35 / 0) 64%);
	pointer-events: none;
}

.nm-tile--sanrio .nm-tile-text {
	z-index: 2;
}
.nm-tile--futbol { background: var(--nm-tile-futbol); }
.nm-tile--escolar {
	background: var(--nm-tile-escolar);
	/* Blanco sobre ámbar da 2:1; el azul marino da 7:1. */
	color: var(--nm-navy);
}

.nm-tile img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* Los productos están abajo en las fotos: si la celda es más angosta que la foto, el recorte
	   es parejo a los lados y nunca por abajo (Sanrio, abajo, se ancla a la derecha). */
	object-position: 50% 100%;
	transition: transform 300ms ease;
}

.nm-tile-item--wide .nm-tile img { object-position: 100% 50%; }

.nm-tile:hover img,
.nm-tile:focus-visible img {
	transform: scale(1.04);
}

.nm-tile-text {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	max-width: 46%;
	padding: 20px 0 0 22px;
}

.nm-tile-name {
	font: 800 var(--nm-fs-24) / 0.98 var(--nm-font-display);
	text-transform: uppercase;
}

.nm-tile-item--big .nm-tile-name {
	font-size: 44px;
}

.nm-tile-item--wide .nm-tile-name {
	font-size: 34px;
}

.nm-tile-caption {
	font-size: var(--nm-fs-12);
	font-weight: 700;
	line-height: 1.3;
}

.nm-tile-item--a .nm-tile-text,
.nm-tile-item--b .nm-tile-text {
	max-width: 80%;
	padding: 14px 0 0 16px;
}

/* En las celdas chicas el texto compite con los productos: sin leyenda, solo nombre y pastilla. */
.nm-tile-item--a .nm-tile-name,
.nm-tile-item--b .nm-tile-name {
	font-size: 19px;
	white-space: nowrap;
}

.nm-tile-item--a .nm-tile-caption,
.nm-tile-item--b .nm-tile-caption {
	display: none;
}

.nm-tile-item--big .nm-tile-caption,
.nm-tile-item--wide .nm-tile-caption {
	font-size: var(--nm-fs-14);
}

.nm-tile-cta {
	margin-top: 6px;
	padding: 5px 14px;
	border-radius: var(--nm-radius-pill);
	background: var(--nm-white);
	color: var(--nm-ink);
	font: 700 11px / 1.2 var(--nm-font-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nm-tile:hover .nm-tile-cta {
	background: var(--nm-yellow);
	color: var(--nm-ink);
}

.nm-tile:focus-visible {
	outline: 3px solid var(--nm-navy);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.nm-tile img { transition: none; }

	.nm-tile:hover img,
	.nm-tile:focus-visible img { transform: none; }
}

/* Franja mayorista */
.nm-home-strip {
	padding-top: 32px;
}

.nm-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 28px;
	margin: 0;
	padding: 18px 28px;
	border-radius: var(--nm-radius-banner);
	background: var(--nm-navy);
	color: var(--nm-white);
	text-align: center;
}

.nm-strip strong {
	color: var(--nm-yellow);
	font: 800 var(--nm-fs-24) / 1 var(--nm-font-display);
	text-transform: uppercase;
}

.nm-strip span {
	font: 600 var(--nm-fs-18) / 1.3 var(--nm-font-display);
}

/* Marcas: texto y logos provisorios en un solo color (spec §13.9) */
.nm-brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: 14px 26px;
	margin: 0 auto;
	padding-block: 26px 4px;
	list-style: none;
	color: var(--nm-navy);
	font: 700 var(--nm-fs-18) / 1.2 var(--nm-font-display);
}

/* Los ítems de texto (Colo-Colo, Keep) usan el mismo filtro que los logos
   (escala de grises + opacidad reducida) para leerse igual de "apagados"
   en reposo, en vez de resaltar en azul marino junto a logos grises. */
.nm-brand-text {
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.nm-brand-text:hover,
.nm-brand-text:focus-within {
	filter: none;
	opacity: 1;
}

/* Tamaño óptico por marca (spec §13.9): a la misma altura de caja, un wordmark
   ancho (Disney/Sanrio/Bluey), un bloque compacto y sólido (Marvel) y un escudo
   casi cuadrado (U. de Chile) no pesan igual visualmente, así que cada uno
   recibe su propia altura en vez de una única altura común. La clase base
   sirve de resguardo para un logo nuevo sin modificador todavía. */
.nm-brand-logo {
	display: block;
	height: 32px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.nm-brand-logo--disney,
.nm-brand-logo--sanrio,
.nm-brand-logo--bluey {
	height: 32px;
}

.nm-brand-logo--marvel,
.nm-brand-logo--keep {
	height: 28px;
}

.nm-brand-logo--colo-colo,
.nm-brand-logo--u-de-chile {
	height: 44px;
}

.nm-brands li:hover .nm-brand-logo,
.nm-brands li:focus-within .nm-brand-logo {
	filter: none;
	opacity: 1;
}

/* Carrusel de favoritos */
.nm-home-products {
	margin-top: 40px;
	padding-block: 30px 34px;
	background: var(--nm-soft);
}

/* Recién llegados va justo después de Favoritos: sin banda de color para que no parezcan
   el mismo carrusel repetido (solo cambia el fondo; encabezado y tarjetas son los mismos). */
.nm-home-products--recent {
	margin-top: 0;
	background: transparent;
}

.nm-home-products--recent .nm-card {
	box-shadow: 0 0 0 1px var(--nm-line);
}

.nm-home-products .nm-home-title {
	margin: 0;
}

/* Ofertas de la campaña: banda negra justo después del slider; tarjetas blancas encima. */
.nm-home-products--offers {
	background: var(--nm-campaign);
	color: var(--nm-white);
}

.nm-home-products--offers .nm-home-title {
	color: var(--nm-campaign-accent);
}

.nm-home-products--offers .nm-card {
	color: var(--nm-ink);
}

/* Halloween: telaraña en la esquina de la banda. */
.nm-campaign-halloween .nm-home-products--offers {
	position: relative;
	background: radial-gradient(ellipse at 85% 0%, #3d1766 0%, var(--nm-campaign) 60%);
}

.nm-campaign-halloween .nm-home-products--offers::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(90px, 14vw, 180px);
	aspect-ratio: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23ffffff' stroke-opacity='.28' stroke-width='2'%3E%3Cpath d='M200 0L0 60M200 0L50 150M200 0L140 200M200 0L0 0M200 0L200 200'/%3E%3Cpath d='M200 40Q180 25 160 12L160 0M200 40Q170 40 170 30Q155 25 160 12M200 90Q150 80 130 70Q110 50 110 27L110 0M200 90Q188 70 178 55M200 150Q130 140 90 110Q60 80 50 45L50 0'/%3E%3C/svg%3E") no-repeat top right / contain;
	pointer-events: none;
}

/* Navidad: luces de colores en el borde superior de la banda. */
.nm-campaign-navidad .nm-home-products--offers {
	position: relative;
	background: radial-gradient(ellipse at 80% 0%, #17603f 0%, var(--nm-campaign) 60%);
}

.nm-campaign-navidad .nm-home-products--offers::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 14px;
	background: radial-gradient(circle at 12px 4px, #ff4d4d 4px, transparent 5px) 0 0 / 96px 14px repeat-x,
		radial-gradient(circle at 36px 4px, #F4D27A 4px, transparent 5px) 0 0 / 96px 14px repeat-x,
		radial-gradient(circle at 60px 4px, #49e08a 4px, transparent 5px) 0 0 / 96px 14px repeat-x,
		radial-gradient(circle at 84px 4px, #5cb8ff 4px, transparent 5px) 0 0 / 96px 14px repeat-x;
	pointer-events: none;
}

.nm-home-more {
	margin: 20px 0 0;
	text-align: center;
}

.nm-home-products--offers .nm-home-more-link {
	background: var(--nm-campaign-accent);
	color: var(--nm-campaign);
}

.nm-home-products--offers .nm-home-more-link:hover {
	background: var(--nm-white);
}

/* Reseñas: el widget externo no debe provocar scroll horizontal */
.nm-reviews {
	overflow: hidden;
}

/* Widget de Trustindex con la tipografía y las tarjetas del theme. Sus reglas van con
   selectores de id/atributo, por eso el !important. */
.nm-reviews .ti-widget,
.nm-reviews .ti-widget * {
	font-family: var(--nm-font-body) !important;
}

.nm-reviews .ti-widget .ti-rating-large {
	font-family: var(--nm-font-display) !important;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nm-navy);
}

.nm-reviews .ti-widget.ti-goog .ti-review-item > .ti-inner {
	border-color: var(--nm-soft) !important;
	border-radius: var(--nm-radius-banner) !important;
	background-color: var(--nm-soft);
}

@media (max-width: 820px) {
	.nm-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-template-areas:
			"big big"
			"wide wide"
			"a b";
		gap: 12px;
	}

	.nm-tile-item--big { aspect-ratio: 1 / 1; }
	.nm-tile-item--wide { aspect-ratio: 2 / 1; }
	.nm-tile-item--a,
	.nm-tile-item--b { aspect-ratio: 1 / 1; }

	.nm-tile-text {
		gap: 4px;
		max-width: 52%;
		padding: 14px 0 0 14px;
	}

	.nm-tile-item--big .nm-tile-name { font-size: 34px; }
	.nm-tile-item--wide .nm-tile-name { font-size: 26px; }
	.nm-tile-item--a .nm-tile-text,
	.nm-tile-item--b .nm-tile-text {
		max-width: 90%;
		padding: 12px 0 0 12px;
	}

	/* 163 px de ancho: solo el nombre (la tarjeta entera es el enlace). */
	.nm-tile-item--a .nm-tile-name,
	.nm-tile-item--b .nm-tile-name {
		font-size: 17px;
		white-space: normal;
	}

	.nm-tile-item--a .nm-tile-cta,
	.nm-tile-item--b .nm-tile-cta {
		display: none;
	}

	.nm-strip strong {
		font-size: var(--nm-fs-18);
	}

	.nm-strip span {
		font-size: var(--nm-fs-14);
	}

	.nm-brand-logo {
		height: 24px;
	}

	.nm-brand-logo--disney,
	.nm-brand-logo--sanrio,
	.nm-brand-logo--bluey {
		height: 24px;
	}

	.nm-brand-logo--marvel,
	.nm-brand-logo--keep {
		height: 21px;
	}

	.nm-brand-logo--colo-colo,
	.nm-brand-logo--u-de-chile {
		height: 32px;
	}
}