/* GLAM — el tema propio de Glam Supply: una copia de Moderna ajustada para que la tienda se vea como su Shopify. Los
   códigos entre paréntesis (M4, CAT1, E5…) son las filas de los informes de comparación A y B del 2026-10-13, que miden
   cada diferencia. Conserva el esquema de ajustes de Moderna —las mismas claves en tema.json y en cada sección—, así la
   configuración que la tienda ya tiene sigue sirviendo. Los colores, el radio y la letra salen de esos ajustes, que la
   plataforma baja a tokens en `.tema`; los tonos de la paleta de Glam que Moderna no ofrece como ajuste van como
   variables `--gl-*`. */

/* LA CAJA DE LA PÁGINA (M4, CAT1, E5): la de Shopify es la ventana menos 40 px por lado y no se queda en 80rem; en
   celular, 16 px. `--ancho-contenido` lo miden el carro y el checkout de la plataforma (#1866, F17): 88rem = la caja de
   90rem menos su relleno (2 × 2,5rem) más el de esas páginas (2 × 1,5rem). `--alto-encabezado` es el del encabezado
   fijo: el aviso de lo agregado se apoya bajo él. */
.tema {
	--ancho-contenido: 88rem;
	--alto-encabezado: 3.75rem;
	--gl-caja: 90rem;
	--gl-margen: 1rem;
	--gl-secundario: #5b6472;
	--gl-acento: #c4a08a;
	--gl-linea-clara: #fff;
	--gl-borde-paso: #e3ded6;
	--gl-banda-contacto: #e7dad2;
	background: var(--color-surface-1, #fff);
	color: var(--color-ink, #111827);
	font-family: var(--plantilla-fuente-cuerpo, system-ui, sans-serif);
}
@media (min-width: 48rem) {
	.tema {
		--alto-encabezado: 4.125rem;
		--gl-margen: 2.5rem;
	}
}

/* El texto que solo leen los lectores de pantalla (la lupa, el orden del listado). */
.mo-oculto {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* La barra superior: los mensajes corren en un bucle sin salto (la tanda se repite). */
.mo-anuncio {
	overflow: hidden;
	background: var(--color-brand, #0b6bff);
	color: var(--color-brand-ink, #fff);
	font-size: 0.8125rem;
	font-weight: 600;
}
.mo-anuncio__pista {
	display: flex;
	inline-size: max-content;
	animation: mo-correr 28s linear infinite;
}
.mo-anuncio__tanda {
	display: flex;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mo-anuncio__tanda li {
	padding: 0.5rem 3rem;
	white-space: nowrap;
}
.mo-anuncio:hover .mo-anuncio__pista {
	animation-play-state: paused;
}
/* El modo «fundido» de la tienda es la barra fija: los mensajes quietos, centrados, y los que no caben bajan de línea. */
.mo-anuncio--fijo .mo-anuncio__pista {
	inline-size: auto;
	animation: none;
}
.mo-anuncio--fijo .mo-anuncio__tanda {
	flex: 1;
	flex-wrap: wrap;
	justify-content: center;
}
@keyframes mo-correr {
	to {
		transform: translateX(-50%);
	}
}
/* Sin movimiento la copia del bucle sobra: se vería el texto dos veces. Con la pista quieta, los
   mensajes que no caben bajan de línea en vez de quedar cortados. */
@media (prefers-reduced-motion: reduce) {
	.mo-anuncio__pista {
		inline-size: auto;
		animation: none;
	}
	.mo-anuncio__tanda {
		flex: 1;
		flex-wrap: wrap;
		justify-content: center;
	}
	.mo-anuncio__tanda[aria-hidden='true'] {
		display: none;
	}
}

/* EL ENCABEZADO, fijo al bajar y sin línea, como el de Shopify (`enable_sticky_header: always`, `border_width: 0`;
   M7, M8). En celular cabe en una fila de 60 px: menú y lupa a la izquierda, la marca al centro y el carro a la derecha
   (M1); la quinta columna vacía equilibra las dos de la izquierda para que la marca quede al centro de la ventana. */
.mo-encabezado {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	background: var(--color-surface-1, #fff);
}
.mo-encabezado__fila {
	display: grid;
	grid-template-columns: 2.75rem 2.75rem minmax(0, 1fr) 2.75rem 2.75rem;
	grid-template-areas: 'menu lupa marca . carro';
	align-items: center;
	min-block-size: 3.75rem;
	max-inline-size: var(--gl-caja);
	margin-inline: auto;
	padding-inline: var(--gl-margen);
}
.mo-menu {
	grid-area: menu;
}
.mo-marca {
	grid-area: marca;
	justify-self: start;
	color: inherit;
	text-decoration: none;
}
.mo-encabezado--centro .mo-marca {
	justify-self: center;
}
/* El logo de Shopify mide 26 px de ancho en celular y 34 desde la tableta (M16, E10). */
.mo-marca__logo {
	display: block;
	block-size: 1.75rem;
	inline-size: auto;
}
.mo-marca__nombre {
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.mo-acciones {
	display: contents;
}
.mo-lupa {
	grid-area: lupa;
}
.mo-carro {
	grid-area: carro;
	justify-self: end;
}

/* La lupa abre el buscador de la plataforma en una franja bajo el encabezado (M1, M2). Es un `<details>`: abre y cierra
   sin JavaScript, y la isla del buscador queda adentro tal como la monta la plataforma. */
.mo-lupa__boton {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	color: var(--color-ink, #111827);
	cursor: pointer;
	list-style: none;
}
.mo-lupa__boton::-webkit-details-marker {
	display: none;
}
.mo-lupa__boton .mo-icono {
	display: block;
	inline-size: 1.125rem;
	block-size: 1.125rem;
}
.mo-lupa__cerrar,
.mo-lupa[open] .mo-lupa__abrir {
	display: none;
}
.mo-lupa[open] .mo-lupa__cerrar {
	display: block;
}
.mo-lupa__panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	padding: 1rem var(--gl-margen) 1.25rem;
	border-block-end: 1px solid var(--color-line, #e5e7eb);
	background: var(--color-surface-1, #fff);
}
.mo-lupa__panel .mo-buscador {
	max-inline-size: 42rem;
	margin-inline: auto;
}
.mo-encabezado .mo-buscador form {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--color-line, #e5e7eb);
	border-radius: var(--radius-md, 8px);
	background: #fff;
	padding-inline: 0.75rem 0.25rem;
}
.mo-encabezado .mo-buscador input[type='search'] {
	flex: 1;
	min-inline-size: 0;
	min-block-size: 3rem;
	border: 0;
	outline: 0;
	background: transparent;
	padding-inline: 0;
	font: inherit;
}

/* EL MENÚ DE LA ISLA (M9, E6, E7, E11): 14 px con 24 px entre entradas, la actual en tinta plena y las demás apagadas,
   sin negrita ni subrayado. La isla carga su hoja después de la del tema, así que cada regla lleva un selector más
   específico que el suyo. En celular, el botón dibuja dos rayas finas de 13 px, como el de Shopify, en vez del ícono
   de la isla. */
.mo-encabezado .mo-menu .barra > ul {
	gap: 0.25rem 1.5rem;
}
.mo-encabezado .mo-menu a {
	color: color-mix(in srgb, var(--color-ink, #111827) 80%, var(--color-surface-1, #fff));
	font-size: 0.875rem;
}
.mo-encabezado .mo-menu a:hover,
.mo-encabezado .mo-menu a[aria-current='page'] {
	color: var(--color-ink, #111827);
	font-weight: inherit;
	text-decoration: none;
}
.mo-encabezado .mo-menu .abrir svg {
	display: none;
}
.mo-encabezado .mo-menu .abrir::before {
	content: '';
	box-sizing: border-box;
	inline-size: 0.8125rem;
	block-size: 0.5rem;
	border-block: 1px solid currentColor;
}

/* Desde 48 rem: el menú a la izquierda, la marca al centro y la lupa y el carro a la derecha, en 66 px. La columna
   del menú es la que cede: la barra de la plataforma plega sus entradas (`flex-wrap`), así que un menú largo crece
   hacia abajo en vez de empujar la lupa y el carro fuera de la ventana (issue #1877, R5). */
@media (min-width: 48rem) {
	.mo-encabezado__fila {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: 'marca menu acciones';
		gap: 1.5rem;
		min-block-size: 4.125rem;
	}
	.mo-menu {
		min-inline-size: 0;
	}
	.mo-marca__logo {
		block-size: 2.25rem;
	}
	.mo-acciones {
		display: flex;
		grid-area: acciones;
		align-items: center;
		justify-content: flex-end;
	}
	.mo-encabezado--centro .mo-encabezado__fila {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas: 'menu marca acciones';
	}
}

/* EL PIE (M5, M10–M12, M15, P1–P13): marca, la primera columna de enlaces y contacto, en tres columnas iguales de una
   caja de 1200 px y en una sola columna con 36 px de margen en celular. Las demás columnas de enlaces (la de
   políticas) bajan a la fila legal, donde Shopify pone «Términos y políticas». */
.mo-pie {
	background: var(--tema-fondo-pie, #18181b);
	color: var(--color-surface-1, #f4f4f5);
	font-size: 0.875rem;
}
.mo-pie a {
	color: inherit;
	text-decoration: none;
}
.mo-pie a:hover {
	text-decoration: underline;
}
.mo-pie ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mo-pie h2 {
	margin: 0 0 0.5625rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
}
.mo-pie__cuerpo {
	display: grid;
	/* `minmax(0, 1fr)` y no la pista automática: un correo largo, que no tiene dónde partirse, no ensancha la columna (issue #1877, F14). */
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
	max-inline-size: 80rem;
	margin-inline: auto;
	padding: 2.0625rem 2.25rem 2rem;
}
.mo-pie__cuerpo > * {
	min-inline-size: 0;
}
.mo-pie__nombre {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
}
.mo-pie__logo {
	display: block;
	block-size: 2.25rem;
	inline-size: auto;
	margin-block-end: 0.75rem;
}
.mo-pie__descripcion p {
	margin: 0;
	line-height: 1.65;
}
.mo-pie__descripcion p + p {
	margin-block-start: 0.375rem;
}
.mo-pie li {
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.mo-pie li + li {
	margin-block-start: 0.6875rem;
}
.mo-pie__legal {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-inline-size: 80rem;
	margin-inline: auto;
	padding: 0 2.25rem 1.5rem;
	font-size: 0.8125rem;
}
.mo-pie__legal::before {
	content: '';
	block-size: 1px;
	margin-block-end: 0.4375rem;
	background: rgb(255 255 255 / 0.43);
}
.mo-pie__legal p {
	margin: 0;
}
.mo-pie__politicas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	font-size: 0.75rem;
}
.mo-pie__politicas li + li {
	margin: 0;
}

@media (min-width: 48rem) {
	.mo-pie h2 {
		margin-block-end: 0.875rem;
	}
	.mo-pie__cuerpo {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 3rem;
		padding: 3rem var(--gl-margen) 2.75rem;
	}
	.mo-pie__legal {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 0 var(--gl-margen) 1.5rem;
	}
	.mo-pie__legal::before {
		flex: 0 0 100%;
	}
}
@media (min-width: 80rem) {
	.mo-pie__cuerpo,
	.mo-pie__legal {
		max-inline-size: 75rem;
		padding-inline: 0;
	}
}

/* LOS BOTONES (P19, 404-6): 54 px de alto, texto regular y esquinas del ajuste «Esquinas». */
.mo-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 3.375rem;
	padding-inline: 1.75rem;
	border: 1px solid var(--color-brand, #0b6bff);
	border-radius: var(--radius-md, 8px);
	font-weight: 400;
	text-decoration: none;
}
.mo-boton--relleno {
	background: var(--color-brand, #0b6bff);
	color: var(--color-brand-ink, #fff);
}
.mo-boton--contorno {
	border-color: currentColor;
	background: transparent;
	color: inherit;
}
/* El antetítulo es del color de acento de Glam (P20). El del hero es el mismo: solo cambia dónde se apoya. */
.mo-antetitulo,
.mo-hero__antetitulo {
	margin: 0;
	color: var(--gl-acento);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* EL HERO (P3, P6, P13, P14, P19, P27): las medidas son las de la sección a medida de Shopify. La foto, el carrusel o
   el video llenan la caja; el velo o el degradado va entre el medio y el texto. */
.mo-hero {
	position: relative;
	display: grid;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	min-block-size: 26rem;
	color: #fff;
}
.mo-hero--medio {
	min-block-size: 22rem;
}
.mo-hero--alto {
	min-block-size: 30rem;
}
/* «Toda la pantalla» es el 76 % del alto de la ventana, entre 570 y 780 px (684 px en una de 900). */
.mo-hero--pantalla {
	min-block-size: clamp(35.625rem, 76vh, 48.75rem);
}
.mo-hero--claro {
	color: var(--color-ink, #111827);
}
.mo-hero__medio {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-ink, #111827);
}
.mo-hero--claro .mo-hero__medio {
	background: color-mix(in srgb, var(--color-brand, #0b6bff) 12%, var(--color-surface-1, #fff));
}
.mo-hero__medio picture,
.mo-hero__medio img,
.mo-hero__medio [data-isla],
.mo-hero__medio .carrusel,
.mo-hero__medio .pista,
.mo-hero__diapositiva {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}
.mo-hero__medio img {
	object-fit: cover;
}
/* El punto de interés de la foto (issue #1878): el de escritorio manda siempre; a 640 px, donde el <source>
   sirve la foto de celular, manda el de esa foto, y sin uno propio cae al de escritorio. */
picture > img {
	object-position: var(--mo-foco, 50% 50%);
}
@media (max-width: 640px) {
	picture > img {
		object-position: var(--mo-foco-celular, var(--mo-foco, 50% 50%));
	}
}
/* La isla del video trae su propia proporción 16:9: en el hero manda la caja. */
.mo-hero__medio [data-isla='video'] .decorativo {
	aspect-ratio: auto;
	block-size: 100%;
}
.mo-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgb(0 0 0 / 0.45);
	pointer-events: none;
}
/* El velo de Shopify es mucho más leve: el video se ve, y el blanco solo apoya la lectura del texto (P3). */
.mo-hero--claro::after {
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--color-surface-1, #fff) 72%, transparent) 0%,
		color-mix(in srgb, var(--color-surface-1, #fff) 52%, transparent) 23%,
		color-mix(in srgb, var(--color-surface-1, #fff) 23%, transparent) 43%,
		color-mix(in srgb, var(--color-surface-1, #fff) 5%, transparent) 62%,
		transparent 76%
	);
}
.mo-hero--claro.mo-hero--centro::after {
	background: color-mix(in srgb, var(--color-surface-1, #fff) 60%, transparent);
}
/* El cuerpo deja pasar el toque a los botones del carrusel y del video que quedan debajo. */
.mo-hero__cuerpo {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: var(--gl-caja);
	margin-inline: auto;
	padding: 3rem var(--gl-margen);
	pointer-events: none;
}
.mo-hero__cuerpo > * {
	margin: 0;
	animation: mo-entrar 0.6s ease-out both;
}
.mo-hero__cuerpo > :nth-child(2) {
	animation-delay: 0.08s;
}
.mo-hero__cuerpo > :nth-child(3) {
	animation-delay: 0.16s;
}
.mo-hero__cuerpo > :nth-child(4) {
	animation-delay: 0.24s;
}
.mo-hero__cuerpo > :nth-child(5) {
	animation-delay: 0.32s;
}
.mo-hero__cuerpo a {
	pointer-events: auto;
}
.mo-hero__antetitulo {
	margin-block-end: 1rem;
}
.mo-hero__titulo {
	max-inline-size: 40rem;
	margin-block-end: 1.5rem;
	font-size: clamp(3.25rem, 4.6vw, 4.75rem);
	font-weight: 500;
	line-height: 0.99;
	letter-spacing: -0.04em;
	white-space: pre-line;
}
.mo-hero__bajada {
	max-inline-size: 28.4375rem;
	margin-block-end: 1.75rem;
	font-size: 1rem;
	line-height: 1.55;
}
.mo-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.mo-hero__acciones:empty {
	display: none;
}
.mo-hero__nota {
	margin-block-start: 1.25rem;
	font-size: 0.8125rem;
	line-height: 1.4;
}
.mo-hero--claro .mo-hero__bajada,
.mo-hero--claro .mo-hero__nota {
	color: var(--gl-secundario);
}
.mo-hero--centro .mo-hero__cuerpo {
	text-align: center;
}
.mo-hero--centro .mo-hero__cuerpo > * {
	margin-inline: auto;
}
.mo-hero--centro .mo-hero__acciones {
	justify-content: center;
}
@keyframes mo-entrar {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}
@media (prefers-reduced-motion: reduce) {
	.mo-hero__cuerpo > * {
		animation: none;
	}
}
/* En celular el texto se apoya abajo, con 24 px de margen, y el degradado claro sube desde ahí para dejar libre la
   cara de la foto. «Toda la pantalla» es el 84 % del alto, como en Shopify. */
@media (max-width: 40rem) {
	.mo-hero--claro {
		align-items: end;
	}
	.mo-hero--claro::after,
	.mo-hero--claro.mo-hero--centro::after {
		background: linear-gradient(
			0deg,
			color-mix(in srgb, var(--color-surface-1, #fff) 88%, transparent) 0%,
			color-mix(in srgb, var(--color-surface-1, #fff) 65%, transparent) 30%,
			color-mix(in srgb, var(--color-surface-1, #fff) 22%, transparent) 56%,
			color-mix(in srgb, var(--color-surface-1, #fff) 2%, transparent) 78%
		);
	}
	.mo-hero--medio {
		min-block-size: 20rem;
	}
	.mo-hero--alto {
		min-block-size: 28rem;
	}
	.mo-hero--pantalla {
		min-block-size: max(38.125rem, 84svh);
	}
	.mo-hero__cuerpo {
		padding: 3rem 1.5rem 3.625rem;
	}
	.mo-hero__titulo {
		max-inline-size: 22.5rem;
		margin-block-end: 1.25rem;
		font-size: clamp(2.625rem, 12vw, 3.625rem);
		line-height: 1;
	}
	.mo-hero__bajada {
		max-inline-size: 21.25rem;
		margin-block-end: 1.5rem;
		font-size: 0.9375rem;
	}
	.mo-hero__nota {
		max-inline-size: 20rem;
		margin-block-start: 1.0625rem;
		font-size: 0.75rem;
	}
	/* La isla del video no lee el punto focal (P21): el de Shopify encuadra el video de Glam al 60 %, con la cara al
	   centro de la pantalla del teléfono. */
	.mo-hero__medio [data-isla='video'] .medio {
		object-position: 60% 50%;
	}
}

/* DESTACADOS Y CATEGORÍAS comparten la cabecera. */
.mo-destacados,
.mo-categorias {
	max-inline-size: var(--gl-caja);
	margin-inline: auto;
}
.mo-destacados {
	padding: 3.625rem 1.25rem 3.5rem;
}
.mo-destacados__cabecera,
.mo-categorias__cabecera {
	display: grid;
	gap: 1.125rem;
	margin-block-end: 2rem;
}
.mo-destacados__cabecera {
	margin-block-end: 5rem;
}
.mo-destacados__cabecera > *,
.mo-categorias__cabecera > * {
	margin: 0;
}
.mo-destacados__titulo,
.mo-categorias__titulo {
	font-size: clamp(2rem, 2.92vw, 2.625rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.mo-categorias__titulo {
	font-size: clamp(2rem, 2.8vw, 2.5rem);
	line-height: 1.1;
}
.mo-destacados__bajada,
.mo-categorias__bajada {
	max-inline-size: 36rem;
	color: var(--gl-secundario);
	font-size: 0.875rem;
	line-height: 1.55;
}
.mo-destacados__ver-todos {
	justify-self: start;
	color: inherit;
}

/* LA TARJETA DE PRODUCTO (CAT9, P22): la foto, el nombre de 18 px en peso regular y el precio pleno. */
.mo-destacados__lista,
.mo-categorias__lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mo-destacados__lista {
	gap: 2.5rem;
}
.mo-categorias__lista {
	gap: 2rem;
}
.mo-tarjeta__enlace {
	display: block;
	color: inherit;
	text-decoration: none;
}
.mo-tarjeta__foto {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-md, 8px);
	background: color-mix(in srgb, var(--color-ink, #111827) 8%, var(--color-surface-1, #fff));
	aspect-ratio: 1;
}
.mo-tarjeta__foto--vertical {
	aspect-ratio: 4 / 5;
}
.mo-tarjeta__foto picture,
.mo-tarjeta__foto img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
/* La placa «Agotado» de Shopify: oscura, de esquinas suaves y en peso regular (CAT11). */
.mo-tarjeta__agotado {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	padding: 0.375rem 0.625rem;
	border-radius: 6px;
	background: var(--color-ink, #111827);
	color: var(--color-surface-1, #fff);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.2;
}
.mo-tarjeta__nombre,
.mo-tarjeta__precio {
	display: block;
	font-size: 1.125rem;
	line-height: 1.2;
}
/* El nombre corta antes del borde y en líneas parejas, como en Shopify: «Lumeezy / Body 60 cc» (CAT10). En celular le
   deja 40 px libres a la derecha; desde la tableta ocupa el 60 % de la tarjeta. */
.mo-tarjeta__nombre {
	margin-block-start: 0.75rem;
	padding-inline-end: 2.5rem;
	text-wrap: balance;
}
/* «Ver producto» es parte del enlace de la tarjeta y no un control aparte: solo se dibuja en los destacados (P12). */
.mo-tarjeta__boton {
	inline-size: 100%;
	min-block-size: 2.25rem;
	margin-block-start: 0.8125rem;
	font-size: 0.875rem;
}

/* LAS ZONAS (P4, P7, P26): fotos 2:1 de esquinas suaves, el nombre de 14 px y una flecha de texto; una columna en
   celular y 36 px de margen. En escritorio la caja de las zonas de Shopify es más angosta que la de la página (72 px). */
.mo-categorias {
	padding: 2.5rem 2.25rem 1.5rem;
}
.mo-categoria {
	display: grid;
	color: inherit;
	text-decoration: none;
}
.mo-categoria__foto {
	position: relative;
	grid-area: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-md, 8px);
	background: color-mix(in srgb, var(--color-ink, #111827) 12%, var(--color-surface-1, #fff));
	aspect-ratio: 2 / 1;
}
.mo-categoria__foto picture,
.mo-categoria__foto img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.mo-categoria__texto {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
.mo-categoria__nombre {
	font-size: 1rem;
}
.mo-categorias--velo .mo-categoria__foto::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.1) 70%);
}
.mo-categorias--velo .mo-categoria__texto {
	position: relative;
	z-index: 1;
	grid-area: 1 / 1;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0.125rem;
	padding: 1rem;
	color: #fff;
}
.mo-categorias--velo .mo-categoria__nombre {
	font-size: 1rem;
	font-weight: 500;
}
.mo-categoria__cantidad {
	font-size: 0.8125rem;
	opacity: 0.85;
}
.mo-categorias--redonda .mo-categoria {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.875rem;
}
.mo-categorias--redonda .mo-categoria__foto {
	grid-area: auto;
}

/* LOS DESTACADOS (P2, P5, P17): una columna en celular. Con la proporción «cuadrada», la foto es la de Shopify: 4:3 en
   celular y cuadrada desde la tableta (317×317 a 1440: las capturas avanzan 800 px por pantalla, no 900); «vertical»
   la deja en 4:5. En la disposición «lateral», el texto ocupa una columna de 310 px y las tarjetas el resto, con 24 px
   entre ellas. Sus tarjetas son las de la portada de Shopify: nombre de 14 px y precio en negrita (P22). */
.mo-destacados .mo-tarjeta__foto--cuadrada {
	aspect-ratio: 4 / 3;
}
.mo-destacados .mo-tarjeta__nombre,
.mo-destacados .mo-tarjeta__precio {
	font-size: 0.875rem;
	line-height: 1.5;
}
.mo-destacados .mo-tarjeta__nombre {
	margin-block-start: 1rem;
	padding-inline-end: 0;
}
.mo-destacados .mo-tarjeta__precio {
	margin-block-start: 0.25rem;
	font-weight: 700;
}

@media (min-width: 48rem) {
	.mo-destacados {
		padding: 7.1875rem var(--gl-margen) 6.25rem;
	}
	.mo-categorias {
		padding: 2.25rem calc(var(--gl-margen) + 2rem) 2.5rem;
	}
	.mo-destacados__lista,
	.mo-categorias__lista {
		gap: 1.5rem;
	}
	.mo-destacados__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.mo-categorias__lista {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}
	.mo-destacados .mo-tarjeta__foto--cuadrada {
		aspect-ratio: 1;
	}
	.mo-destacados__cabecera {
		margin-block-end: 2rem;
	}
	.mo-destacados--grilla .mo-destacados__cabecera {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.mo-destacados--grilla .mo-destacados__cabecera > :not(.mo-destacados__ver-todos) {
		grid-column: 1;
	}
	.mo-destacados--grilla .mo-destacados__ver-todos {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: end;
	}
	.mo-destacados--lateral {
		display: grid;
		grid-template-columns: minmax(0, 0.93fr) minmax(0, 3fr);
		gap: 3rem;
		align-items: start;
	}
	.mo-destacados--lateral .mo-destacados__cabecera {
		margin-block-end: 0;
	}
	/* En Shopify el antetítulo queda 14 px sobre el borde de las fotos, y el título y la bajada cortan antes que la
	   columna: el título en cuatro líneas y la bajada en tres. */
	.mo-destacados--lateral .mo-destacados__lista {
		margin-block-start: 1.125rem;
	}
	.mo-destacados--lateral .mo-destacados__titulo {
		max-inline-size: 18rem;
	}
	.mo-destacados--lateral .mo-destacados__bajada {
		max-inline-size: 17.5rem;
	}
	.mo-destacados--lateral .mo-destacados__ver-todos {
		display: none;
	}
}
@media (min-width: 64rem) {
	.mo-destacados--grilla .mo-destacados__lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* LAS SIETE SECCIONES OPCIONALES DE LA PORTADA. Comparten la cabecera (`mo-seccion__*`) y la caja. */
.mo-confianza,
.mo-historia,
.mo-testimonios,
.mo-preguntas,
.mo-contacto,
.mo-pasos__banda {
	max-inline-size: var(--gl-caja);
	margin-inline: auto;
	padding: 3rem var(--gl-margen);
}
.mo-seccion__cabecera {
	display: grid;
	gap: 0.75rem;
	margin-block-end: 2rem;
}
.mo-seccion__cabecera > *,
.mo-seccion__titulo,
.mo-seccion__bajada {
	margin: 0;
}
.mo-seccion__titulo {
	font-size: clamp(1.9375rem, 3.2vw, 2.875rem);
	font-weight: 500;
	line-height: 1.13;
	letter-spacing: -0.02em;
}
.mo-seccion__bajada {
	color: var(--gl-secundario);
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* CONFIANZA (P11, P15, P24, P25): el título «Compra con confianza» de 24 px, el ícono de 32 px en el color de acento a
   la izquierda y el texto de 14 px en el tono secundario; en celular, 56 px entre ítems. */
.mo-confianza {
	padding-block: 3rem 3.5rem;
}
.mo-confianza__encabezado {
	margin: 0 0 2rem;
	font-size: clamp(1.3125rem, 1.6vw, 1.5rem);
	font-weight: 500;
	line-height: 1.2;
}
.mo-confianza__lista {
	display: grid;
	gap: 3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mo-confianza__item {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
}
.mo-confianza__icono {
	display: inline-flex;
	flex: none;
	color: var(--gl-acento);
}
.mo-confianza__icono .mo-icono {
	inline-size: 2rem;
	block-size: 2rem;
	stroke-width: 1.2;
}
.mo-confianza--caja .mo-confianza__item {
	flex-direction: column;
}
.mo-confianza--caja .mo-confianza__icono {
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	border: 1px solid var(--color-line, #e5e7eb);
	border-radius: var(--radius-md, 8px);
}
.mo-confianza__titulo {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}
.mo-confianza__texto p {
	margin: 0;
	color: var(--gl-secundario);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Preguntas: <details> nativos, la primera abierta por el Liquid. */
.mo-preguntas__lista {
	display: grid;
	max-inline-size: 48rem;
	margin-inline: auto;
	border-block-start: 1px solid var(--color-line, #e5e7eb);
}
.mo-preguntas__item {
	border-block-end: 1px solid var(--color-line, #e5e7eb);
}
.mo-preguntas__item summary {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 1rem;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.mo-preguntas__item summary::-webkit-details-marker {
	display: none;
}
.mo-preguntas__item summary::after {
	content: '+';
	flex: none;
	font-size: 1.5rem;
	line-height: 1;
}
.mo-preguntas__item[open] summary::after {
	content: '−';
}
.mo-preguntas__item p {
	margin: 0 0 1rem;
	color: var(--gl-secundario);
}
.mo-preguntas .mo-seccion__cabecera {
	max-inline-size: 48rem;
	margin-inline: auto;
}

/* Historia: foto y texto; en celular la foto va arriba. */
.mo-historia {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
}
.mo-historia__foto {
	overflow: hidden;
	border-radius: var(--radius-lg, 12px);
	aspect-ratio: 4 / 3;
	background: var(--color-line, #e5e7eb);
}
.mo-historia__foto img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.mo-historia__cuerpo {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
}
.mo-historia__cuerpo > * {
	margin: 0;
}
.mo-historia__texto {
	white-space: pre-line;
	color: var(--gl-secundario);
}

/* TESTIMONIOS (P1): la tarjeta de las reseñas de Shopify, blanca, con la fuente arriba a la izquierda, las estrellas
   a la derecha, el texto y el nombre en negrita abajo. La cabecera va al centro. */
.mo-testimonios .mo-seccion__cabecera {
	justify-items: center;
	text-align: center;
}
.mo-testimonios__lista {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mo-testimonio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: 'fuente estrellas' 'texto texto' 'nombre nombre';
	gap: 1.5rem 1rem;
	align-content: start;
	padding: 1.5rem;
	border: 1px solid var(--color-line, #e5e7eb);
	border-radius: var(--radius-lg, 12px);
	background: #fff;
}
.mo-testimonio > * {
	margin: 0;
}
.mo-testimonio__estrellas {
	display: flex;
	grid-area: estrellas;
	gap: 0.125rem;
	color: #5b4a3e;
}
.mo-testimonio__estrellas .mo-icono {
	inline-size: 1rem;
	block-size: 1rem;
}
.mo-testimonio__estrella--vacia {
	opacity: 0.25;
}
.mo-testimonio__texto {
	grid-area: texto;
	margin: 0;
	line-height: 1.6;
}
/* El autor se reparte en dos lugares: la fuente arriba y el nombre abajo. */
.mo-testimonio__autor {
	display: contents;
}
.mo-testimonio__autor strong {
	grid-area: nombre;
}
.mo-testimonio__autor span {
	grid-area: fuente;
	color: #705a4c;
	font-size: 0.8125rem;
	font-weight: 600;
}
.mo-testimonio__autor time {
	display: none;
}
.mo-testimonios__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-block-start: 1.5rem;
}
.mo-testimonios__acciones:empty {
	display: none;
}

/* PASOS (P8–P10, P16): la banda llena el ancho; adentro, la cabecera al centro y tarjetas blancas de borde fino y
   esquinas rectas, con el ícono arriba en el tono secundario y el número dentro del título. La caja de las tarjetas
   mide 1240 px, como en Shopify, y la banda tiene 90 px de relleno arriba y abajo. */
.mo-pasos {
	background: var(--color-surface-2, #f3f4f6);
}
.mo-pasos__banda {
	max-inline-size: calc(77.5rem + 2 * var(--gl-margen));
	padding-block: 5.625rem;
}
.mo-pasos .mo-seccion__cabecera {
	justify-items: center;
	margin-block-end: 2.0625rem;
	text-align: center;
}
/* En celular el título de Shopify corta en dos líneas («Comprar en Glam / Supply»). */
.mo-pasos .mo-seccion__titulo {
	max-inline-size: 20rem;
}
.mo-pasos__lista {
	display: grid;
	gap: 0.9375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mo-pasos__tarjeta {
	display: grid;
	align-content: start;
	justify-items: start;
	padding: 1.5rem;
	border: 1px solid var(--gl-borde-paso);
	background: #fff;
}
.mo-pasos__tarjeta > * {
	margin: 0;
}
.mo-pasos__icono {
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	margin-block-end: 1.1875rem;
	color: var(--gl-secundario);
}
.mo-pasos__icono .mo-icono {
	inline-size: 1.75rem;
	block-size: 1.75rem;
	stroke-width: 1.4;
}
.mo-pasos__titulo {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
}
.mo-pasos__tarjeta p {
	margin-block-start: 0.75rem;
	color: var(--gl-secundario);
	font-size: 0.875rem;
	line-height: 1.65;
}

/* Boletín: la banda con el degradado de la marca; la pieza de la plataforma dibuja el título y el formulario
   con tinta oscura, así que acá se le cede el texto claro. El campo y su desafío conservan su fondo. */
.mo-boletin {
	padding-block: 3rem;
	background: linear-gradient(
		135deg,
		var(--color-brand, #0b6bff),
		color-mix(in srgb, var(--color-brand, #0b6bff) 55%, #000)
	);
}
.mo-boletin .boletin h2,
.mo-boletin .boletin .bajada {
	color: var(--color-brand-ink, #fff);
}
.mo-contacto {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}
.mo-contacto__cuerpo {
	display: grid;
	gap: 0.5rem;
}
.mo-contacto__cuerpo > * {
	margin: 0;
}
.mo-contacto__datos {
	display: grid;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}
.mo-contacto__datos li {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
	.mo-historia,
	.mo-testimonios,
	.mo-preguntas,
	.mo-contacto {
		padding-block: 4rem;
	}
	.mo-confianza {
		padding-block: 3.5rem 4rem;
	}
	.mo-confianza__lista {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: 3rem;
	}
	.mo-historia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem;
	}
	.mo-historia--derecha .mo-historia__foto {
		order: 2;
	}
	.mo-testimonios__lista {
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
		gap: 1.5rem;
	}
	.mo-pasos__lista {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: 1.25rem;
	}
	.mo-pasos .mo-seccion__cabecera {
		margin-block-end: 3rem;
	}
	.mo-pasos .mo-seccion__titulo {
		max-inline-size: none;
	}
	/* En escritorio la tarjeta de Shopify es más holgada que en celular: 218 px de alto contra 197. */
	.mo-pasos__tarjeta {
		padding: 1.8125rem 1.375rem 2rem;
	}
	.mo-pasos__icono {
		margin-block-end: 1.8125rem;
	}
	.mo-pasos__tarjeta p {
		margin-block-start: 0.5625rem;
	}
	.mo-contacto {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 4rem;
		align-items: center;
	}
}

/* LA TARJETA SEGÚN EL AJUSTE `tarjeta_estilo`. «Limpia» (la de Glam): sin caja, con la foto de esquinas rectas en los
   listados y suaves en los destacados de la portada (P23). «Caja»: borde, sombra, radio 16, la foto entera con
   margen, el nombre en versalitas, el precio en el color de la marca y la cantidad abajo. */
.mo-tarjeta--limpia .mo-tarjeta__foto {
	border-radius: 0;
}
.mo-destacados .mo-tarjeta--limpia .mo-tarjeta__foto {
	border-radius: var(--radius-md, 8px);
}
.mo-tarjeta--caja {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	padding: 0.75rem;
	border: 1px solid var(--color-line, #e5e7eb);
	border-radius: 16px;
	background: var(--color-surface-1, #fff);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--color-ink, #111827) 10%, transparent);
}
.mo-tarjeta--caja .mo-tarjeta__foto {
	border-radius: 8px;
	background: transparent;
}
.mo-tarjeta--caja .mo-tarjeta__foto img {
	object-fit: contain;
}
.mo-tarjeta--caja .mo-tarjeta__nombre {
	font-size: 0.8125rem;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.06em;
}
.mo-tarjeta--caja .mo-tarjeta__precio {
	font-weight: 700;
	color: var(--color-brand, #0b6bff);
}
.mo-tarjeta__compra {
	margin-block-start: auto;
	padding-block-start: 0.75rem;
}

/* EL LISTADO Y LAS COLECCIONES (CAT1–CAT9). La caja es la de la página y, en celular, la grilla va de borde a borde
   con el texto de las tarjetas a 8 px. La cabecera lleva el título de 40 px en peso medio y una línea blanca debajo;
   la barra, el conteo «N artículos» y el orden a la derecha. Los controles siguen siendo un formulario GET. */
.mo-listado {
	max-inline-size: var(--gl-caja);
	margin-inline: auto;
	padding: 0 var(--gl-margen) 4rem;
}
.mo-listado__cabecera {
	padding-block: 1.5rem 3.6875rem;
	border-block-end: 1px solid var(--gl-linea-clara);
}
.mo-listado__titulo {
	margin: 0;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.mo-listado__descripcion {
	max-inline-size: 40rem;
	margin: 0.75rem 0 0;
	color: var(--gl-secundario);
}
/* La búsqueda (BUS1): sin título a la vista, un campo grande al centro con la lupa y un botón para borrarla. */
.mo-listado__cabecera--busqueda {
	padding-block: 2.5rem 3rem;
	border: 0;
}
/* Y a la altura de la de Shopify (glam@3): el campo a 126 px del borde de arriba y la barra 60 px más abajo; en celular,
   a 109 y a 50. */
.mo-listado__cabecera.mo-listado__cabecera--busqueda {
	padding-block: 3.075rem 2.5rem;
}
@media (min-width: 48rem) {
	.mo-listado__cabecera.mo-listado__cabecera--busqueda {
		padding-block: 3.775rem 2.575rem;
	}
}
.mo-busqueda {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-inline-size: 42.1875rem;
	min-block-size: 3.75rem;
	margin-inline: auto;
	padding-inline: 1rem 0.5rem;
	border: 1px solid var(--gl-linea-clara);
	border-radius: var(--radius-md, 8px);
}
.mo-busqueda__campo {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.75rem;
	min-inline-size: 0;
}
.mo-busqueda__campo .mo-icono {
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
}
.mo-busqueda input {
	flex: 1;
	min-inline-size: 0;
	min-block-size: 2.75rem;
	border: 0;
	outline: 0;
	background: transparent;
	color: inherit;
	font: inherit;
}
.mo-busqueda__borrar {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	color: inherit;
}
.mo-busqueda__borrar .mo-icono {
	inline-size: 1rem;
	block-size: 1rem;
}
/* LA BARRA DEL CATÁLOGO (glam@3, 2026-10-19), medida contra la de Shopify: en celular «Filtro» a la izquierda y la
   vista a la derecha, en 44 px y 12 px bajo la línea; desde 48 rem, «Disponibilidad» y «Precio» a la izquierda y
   «N artículos», «Ordenar» y la vista a la derecha, en versalitas de 16 px. Los desplegables son `<details>` y su panel
   flota bajo el rótulo con la sombra y las esquinas de 8 px de Shopify. Sin JavaScript: enlaces, un formulario GET para
   el precio y radios con `:has()` para la vista. */
.gl-barra {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0 1.25rem;
	min-block-size: 2.75rem;
	margin-block: 0.75rem 0.5rem;
}
.gl-barra__filtros,
.gl-barra__derecha {
	display: flex;
	align-items: center;
}
.gl-barra__filtros {
	gap: 1rem;
}
.gl-barra__derecha {
	gap: 1.25rem;
	margin-inline-start: auto;
}
.gl-barra__filtros,
.gl-barra__derecha .gl-desplegable,
.mo-listado__conteo {
	display: none;
}
.mo-listado__conteo {
	margin: 0;
	color: color-mix(in srgb, var(--color-ink, #111827) 80%, transparent);
	text-transform: uppercase;
	white-space: nowrap;
}

/* El rótulo del desplegable y su flecha fina, que mira arriba con el panel abierto. */
.gl-desplegable {
	position: relative;
}
.gl-desplegable__resumen {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	min-block-size: 2.75rem;
	color: var(--color-ink, #111827);
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}
.gl-desplegable__resumen::-webkit-details-marker,
.gl-filtro__boton::-webkit-details-marker,
.gl-filtro__resumen::-webkit-details-marker {
	display: none;
}
.gl-desplegable__resumen::after,
.gl-filtro__resumen::after {
	content: '';
	flex: none;
	inline-size: 0.35rem;
	block-size: 0.35rem;
	border-inline-end: 1px solid color-mix(in srgb, var(--color-ink, #111827) 50%, transparent);
	border-block-end: 1px solid color-mix(in srgb, var(--color-ink, #111827) 50%, transparent);
	transform: translateY(-0.15rem) rotate(45deg);
}
/* La flecha de Shopify ocupa una caja de 13,6 px. */
.gl-desplegable__resumen::after {
	margin-inline: 0.25rem;
}
.gl-desplegable[open] > .gl-desplegable__resumen::after,
.gl-filtro__grupo[open] > .gl-filtro__resumen::after {
	transform: translateY(0.1rem) rotate(-135deg);
}
.gl-desplegable__resumen:focus-visible,
.gl-filtro__boton:focus-visible,
.gl-filtro__resumen:focus-visible,
.gl-opcion:focus-visible {
	outline: 2px solid var(--color-ink, #111827);
	outline-offset: 2px;
}
.gl-desplegable__panel {
	position: absolute;
	z-index: 15;
	inset-block-start: calc(100% - 0.25rem);
	inset-inline-start: 0;
	padding: 0.8125rem;
	border-radius: 8px;
	background: var(--color-surface-1, #fff);
	box-shadow: 0 4px 20px color-mix(in srgb, var(--color-ink, #111827) 15%, transparent);
}
.gl-desplegable--orden .gl-desplegable__panel {
	inset-inline: auto 0;
	padding: 0.5625rem;
}

/* Las opciones: casillas para la disponibilidad y el tilde del orden activo, en el gris de Shopify (la tinta al 80 %). */
.gl-opciones {
	display: grid;
	gap: 0.6875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gl-opcion {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: color-mix(in srgb, var(--color-ink, #111827) 80%, transparent);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
.gl-opcion__casilla {
	position: relative;
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	border: 1px solid color-mix(in srgb, var(--color-ink, #111827) 35%, transparent);
	border-radius: 5px;
	background: var(--color-surface-1, #fff);
}
.gl-opcion[aria-current='true'] {
	color: var(--color-ink, #111827);
}
.gl-opcion[aria-current='true'] .gl-opcion__casilla {
	border-color: var(--color-ink, #111827);
	background: var(--color-ink, #111827);
}
.gl-opcion[aria-current='true'] .gl-opcion__casilla::after,
.gl-opcion--tilde[aria-current='true']::before {
	content: '';
	position: absolute;
	inline-size: 0.25rem;
	block-size: 0.5rem;
	border-inline-end: 1.5px solid var(--color-surface-1, #fff);
	border-block-end: 1.5px solid var(--color-surface-1, #fff);
	transform: rotate(45deg);
}
.gl-opcion[aria-current='true'] .gl-opcion__casilla::after {
	inset-block-start: 0.125rem;
	inset-inline-start: 0.3125rem;
}
.gl-opcion--vacia {
	opacity: 0.45;
}
.gl-opciones--orden {
	gap: 0;
}
.gl-opcion--tilde {
	position: relative;
	min-block-size: 2.1rem;
	padding: 0.25rem 0.5rem 0.25rem 1.8125rem;
	color: var(--color-ink, #111827);
	line-height: 1.6;
}
.gl-opcion--tilde[aria-current='true'] {
	font-weight: 500;
}
.gl-opcion--tilde[aria-current='true']::before {
	inset-block-start: 0.625rem;
	inset-inline-start: 0.6875rem;
	border-color: currentColor;
	border-inline-end-width: 1px;
	border-block-end-width: 1px;
}

/* El precio: «Desde» y «Hasta» con el signo adentro, en los campos de Shopify (54 px, del fondo de la página y con borde
   blanco), y «Aplicar», que sin JavaScript es la única forma de mandar el rango. */
.gl-precio {
	display: grid;
	gap: 0.75rem;
}
.gl-precio__campos {
	display: flex;
	align-items: center;
	gap: 0.8125rem;
}
.gl-precio__campo {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-inline-size: 0;
}
.gl-precio__signo {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	inline-size: 2.2rem;
	color: color-mix(in srgb, var(--color-ink, #111827) 60%, transparent);
	pointer-events: none;
}
.gl-precio__campo input {
	inline-size: 100%;
	min-block-size: 3.2rem;
	padding: 0.8rem 0.8rem 0.8rem 2rem;
	border: 0;
	border-radius: 6px;
	background: var(--color-surface-1, #fff);
	box-shadow: 0 0 0 1px var(--gl-linea-clara);
	color: inherit;
	font: inherit;
	text-align: end;
}
.gl-precio__campo input::placeholder {
	color: color-mix(in srgb, var(--color-ink, #111827) 45%, transparent);
}
.gl-precio__campo input:focus-visible {
	outline: 2px solid var(--color-ink, #111827);
	outline-offset: 1px;
}
.gl-precio__separador {
	flex: none;
}
.gl-precio__aplicar {
	justify-self: end;
	min-block-size: 2.25rem;
	padding-inline: 0.875rem;
	border: 1px solid currentColor;
	border-radius: var(--radius-md, 8px);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
}
.gl-desplegable__panel--precio {
	inline-size: 22.5rem;
	padding: 0.875rem;
}

/* La vista: dos íconos de 28 px, el elegido con un fondo apenas gris, como los de Shopify. En celular, una o dos columnas;
   desde 48 rem, la normal o la alejada. El radio no se ve pero se enfoca con el teclado. */
.gl-vista {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-inline-size: 0;
	margin: 0 -0.1875rem 0 0;
	padding: 0;
	border: 0;
}
.gl-vista__opcion {
	position: relative;
	display: block;
	cursor: pointer;
}
/* El radio cubre su ícono: es el que se toca y el que se enfoca. Sin los 44 px táctiles de la plataforma, que lo sacaban
   de la pantalla y la ensanchaban. */
.gl-vista .gl-vista__opcion input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	min-inline-size: 0;
	min-block-size: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.gl-vista__opcion--alejada {
	display: none;
}
.gl-vista__icono {
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 3.2px;
	color: color-mix(in srgb, var(--color-ink, #111827) 50%, transparent);
}
.gl-vista__icono .mo-icono {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}
.gl-vista__opcion input:checked + .gl-vista__icono {
	background: color-mix(in srgb, var(--color-ink, #111827) 5%, transparent);
	color: var(--color-ink, #111827);
}
.gl-vista__opcion input:focus-visible + .gl-vista__icono {
	outline: 2px solid var(--color-ink, #111827);
	outline-offset: 2px;
}

/* «Filtro» en celular: el botón de Shopify (ícono de tres rayas y la palabra) y su panel a pantalla completa, con el
   título, la disponibilidad y el precio abiertos, el orden plegado y «Ver N artículos» abajo. Abierto, el mismo `summary`
   pasa a ser la «×» de la esquina, que lo cierra; la página de atrás no se desplaza. */
.gl-filtro__boton {
	display: flex;
	align-items: center;
	min-block-size: 2.75rem;
	color: var(--color-ink, #111827);
	cursor: pointer;
	list-style: none;
}
.gl-filtro__abrir {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-inline-start: -0.1875rem;
}
.gl-filtro__abrir .mo-icono,
.gl-filtro__cerrar .mo-icono {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}
.gl-filtro__cerrar {
	display: none;
}
.gl-filtro__panel {
	display: none;
}
@media (max-width: 47.99rem) {
	.gl-filtro__panel {
		position: fixed;
		z-index: 40;
		inset: 0;
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 1.5rem 1.3125rem 6.5rem;
		background: var(--color-surface-1, #fff);
	}
	html:has(.gl-filtro[open]) {
		overflow: hidden;
	}
	/* Abierto, el `summary` es la «×» de Shopify: un círculo de 34 px en un blanco táctil de 44. */
	.gl-filtro[open] > .gl-filtro__boton {
		position: fixed;
		z-index: 41;
		inset-block-start: 0.9375rem;
		inset-inline-end: 0.9375rem;
		justify-content: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		min-block-size: 0;
	}
	.gl-filtro[open] .gl-filtro__abrir {
		display: none;
	}
	.gl-filtro[open] .gl-filtro__cerrar {
		display: inline-grid;
		place-items: center;
		inline-size: 2.125rem;
		block-size: 2.125rem;
		border: 1px solid rgb(0 0 0 / 0.06);
		border-radius: 50%;
		background: var(--color-surface-1, #fff);
	}
	.gl-filtro[open] .gl-filtro__cerrar .mo-icono {
		inline-size: 0.875rem;
		block-size: 0.875rem;
	}
}
.gl-filtro__titulo {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.1;
}
.gl-filtro__puestos {
	display: inline-grid;
	place-items: center;
	min-inline-size: 1.25rem;
	block-size: 1.25rem;
	padding-inline: 0.375rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-ink, #111827) 10%, transparent);
	font-size: 0.75rem;
	font-weight: 400;
}
.gl-filtro__grupo {
	border-block-start: 1px solid var(--gl-linea-clara);
}
.gl-filtro__grupo:last-of-type {
	border-block-end: 1px solid var(--gl-linea-clara);
}
.gl-filtro__resumen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-block-size: 3.1875rem;
	color: color-mix(in srgb, var(--color-ink, #111827) 80%, transparent);
	font-size: 1.125rem;
	cursor: pointer;
	list-style: none;
}
.gl-filtro__grupo .gl-opciones {
	gap: 1.375rem;
	padding-block: 0.5rem 1.25rem;
}
.gl-filtro__grupo .gl-opcion {
	gap: 0.5rem;
	font-size: 1rem;
}
.gl-filtro__grupo .gl-opcion__casilla {
	inline-size: 1.375rem;
	block-size: 1.375rem;
}
.gl-filtro__grupo .gl-opcion[aria-current='true'] .gl-opcion__casilla::after {
	inset-block-start: 0.1875rem;
	inset-inline-start: 0.4375rem;
	inline-size: 0.3125rem;
	block-size: 0.625rem;
}
.gl-filtro__grupo .gl-precio {
	padding-block: 0.625rem 1.25rem;
}
.gl-filtro__grupo .gl-opciones--orden {
	gap: 0;
	padding-block: 0 0.75rem;
}
.gl-filtro__rotulo {
	margin-inline-end: auto;
	color: var(--color-ink, #111827);
	font-size: 1.5rem;
}
.gl-filtro__valor {
	font-size: 1rem;
}
.gl-filtro__ver {
	position: fixed;
	z-index: 41;
	inset-inline: 1.0625rem;
	inset-block-end: 0.75rem;
	min-block-size: 3.625rem;
	border: 0;
	border-radius: 6px;
	background: var(--color-ink, #111827);
	color: var(--color-surface-1, #fff);
	font: inherit;
	cursor: pointer;
}

.mo-listado__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mo-listado__lista > li {
	min-inline-size: 0;
}
/* La grilla del catálogo de Shopify (glam@3): el nombre a 10 px de la foto y 24 px entre filas en celular, 16 desde la
   tableta. Solo la del listado: la misma lista sirve a los recomendados de la ficha, la 404 y el carro vacío. */
.mo-listado > .mo-listado__lista {
	row-gap: 1.5rem;
}
.mo-listado > .mo-listado__lista .mo-tarjeta__nombre {
	margin-block-start: 0.625rem;
}
.mo-listado__vacio {
	display: grid;
	gap: 1rem;
	justify-items: start;
	padding-block: 2rem;
}
.mo-listado--busqueda .mo-listado__vacio {
	justify-items: center;
	text-align: center;
}
.mo-listado__paginador {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	margin-block-start: 2.5rem;
}
@media (max-width: 47.99rem) {
	.mo-listado > .mo-listado__lista {
		margin-inline: calc(-1 * var(--gl-margen));
	}
	.mo-listado > .mo-listado__lista .mo-tarjeta__nombre {
		padding-inline: 0.5rem 3rem;
	}
	.mo-listado > .mo-listado__lista .mo-tarjeta__precio {
		padding-inline: 0.5rem;
	}
	/* La vista de una columna: la foto a todo el ancho, como la de Shopify (390 × 488 en un teléfono de 390). */
	.mo-listado:has(.gl-vista input[value='una']:checked) > .mo-listado__lista {
		grid-template-columns: minmax(0, 1fr);
	}
	/* En la tarjeta de Shopify el nombre y el precio están a 10 px de la foto y en dos líneas justas (CAT10). */
	.mo-listado:has(.gl-vista input[value='una']:checked) > .mo-listado__lista .mo-tarjeta__nombre {
		padding-inline-end: 0.5rem;
	}
}

/* LA FICHA (E1, E4–E6, E10, E11, E13). Galería y bloque de compra son islas de la plataforma: la hoja del tema solo
   dispone sus cajas (`.galeria`, `.pista`, `.miniaturas`, `.compra`) y, como la isla carga después, con un selector
   más específico que el suyo. */
.mo-ficha {
	display: grid;
	gap: 2rem;
	max-inline-size: var(--gl-caja);
	margin-inline: auto;
	padding: 2rem var(--gl-margen) 4rem;
}
.mo-ficha__galeria,
.mo-ficha__datos {
	min-inline-size: 0;
}
.mo-ficha__fotos {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* LA FOTO DE LA FICHA (glam@3, la ficha de Shopify del 18-10): entera (`contain`) y con la proporción de la foto, como
   «adapt»; desde 48 rem su alto no pasa el de la pantalla. La misma regla vale para el respaldo y para la isla, que lo
   reemplaza al hidratar: la foto no salta. */
.mo-ficha__fotos img,
.mo-ficha .galeria .pista img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: auto;
	object-fit: contain;
}
.mo-ficha__nombre {
	margin: 0 0 0.5rem;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.mo-ficha__precio {
	margin: 0;
	font-size: 1.125rem;
}
.mo-ficha .mo-ficha__compra .compra .precio {
	color: inherit;
	font-size: 1.125rem;
	font-weight: 400;
}
/* La descripción, las especificaciones y las filas de «Detalles de la ficha» son filas de un acordeón cerrado,
   separadas por líneas blancas, como «Description», «Care» y «Design» en Shopify (E4, E9). */
.mo-ficha__acordeon {
	margin-block-start: 2.5rem;
	border-block-start: 1px solid var(--gl-linea-clara);
	text-align: start;
}
.mo-ficha__fila {
	border-block-end: 1px solid var(--gl-linea-clara);
}
.mo-ficha__fila summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.875rem;
	font-size: 0.875rem;
	cursor: pointer;
	list-style: none;
}
.mo-ficha__fila summary::-webkit-details-marker {
	display: none;
}
.mo-ficha__fila summary::after {
	content: '';
	flex: none;
	inline-size: 0.375rem;
	block-size: 0.375rem;
	margin-inline-end: 0.25rem;
	border-block-end: 1px solid currentColor;
	border-inline-end: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.mo-ficha__fila[open] summary::after {
	transform: translateY(2px) rotate(-135deg);
}
.mo-ficha__fila-cuerpo {
	margin: 0;
	padding-block: 0.25rem 1.25rem;
	font-size: 1.125rem;
	line-height: 1.5;
}
.mo-ficha__fila-cuerpo p {
	margin: 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
}
.mo-ficha__filas {
	display: grid;
	gap: 0.5rem;
}
.mo-ficha__filas > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}
.mo-ficha__filas dt {
	font-weight: 600;
}
.mo-ficha__filas dd {
	margin: 0;
}
.mo-ficha__subtitulo {
	margin: 0 0 1.75rem;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}
.mo-ficha__confianza {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 1.25rem 0;
	border-block: 1px solid var(--color-line, #e5e7eb);
	list-style: none;
}
.mo-ficha__confianza .mo-confianza__item {
	align-items: center;
}
.mo-ficha__confianza .mo-confianza__titulo {
	margin: 0;
	font-size: 0.9375rem;
}
.mo-ficha__gustar,
.mo-ficha__confianza,
.mo-ficha__detalles {
	min-inline-size: 0;
}
.mo-ficha__detalles-medio img,
.mo-ficha__detalles-medio video {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--radius-md, 8px);
}

/* «Fotos al costado» (la de Glam): en celular la foto de borde a borde, arriba; desde la tableta, la mitad izquierda de
   la caja de la página, con su margen (la ficha de Shopify del 18-10; antes era la mitad de la ventana, E1). El título y
   el precio van centrados en los dos anchos (E5, E6), en una columna de 400 px. La isla de compra trae
   `align-items: start` y carga después: de ahí el selector largo. */
.mo-ficha--lateral {
	max-inline-size: none;
	padding: 0 0 2.125rem;
	row-gap: 0;
}
.mo-ficha--lateral > :not(.mo-ficha__galeria) {
	inline-size: 100%;
	max-inline-size: var(--gl-caja);
	margin-inline: auto;
	padding-inline: var(--gl-margen);
}
.mo-ficha--lateral .mo-ficha__datos {
	max-inline-size: calc(25rem + 2 * var(--gl-margen));
	padding-block: 3.125rem 2.125rem;
	text-align: center;
}
.mo-ficha--lateral .mo-ficha__compra .compra {
	align-items: center;
}
.mo-ficha--lateral .mo-ficha__compra .compra .valores,
.mo-ficha--lateral .mo-ficha__compra .compra .paso {
	justify-content: center;
}

@media (min-width: 48rem) {
	.mo-ficha {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem;
		align-items: start;
		padding-block: 3rem 4rem;
	}
	.mo-ficha__confianza,
	.mo-ficha__detalles,
	.mo-ficha__gustar {
		grid-column: 1 / -1;
	}
	.mo-ficha__confianza {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
	.mo-listado__cabecera {
		padding-block: 2.25rem 5.25rem;
	}
	.mo-tarjeta__nombre {
		max-inline-size: 60%;
		padding-inline-end: 0;
	}
	.mo-destacados .mo-tarjeta__nombre {
		max-inline-size: none;
	}
	/* La barra de Shopify a 1440: 19 px bajo la línea, 44 px de alto y las tarjetas 16 px más abajo. */
	.gl-barra {
		margin-block: 1.2rem 1rem;
	}
	.gl-filtro {
		display: none;
	}
	.gl-barra__filtros,
	.gl-barra__derecha .gl-desplegable {
		display: flex;
	}
	.mo-listado__conteo {
		display: block;
	}
	.gl-vista {
		gap: 0.3rem;
	}
	.gl-vista__opcion--una {
		display: none;
	}
	.gl-vista__opcion--alejada {
		display: block;
	}
	/* La vista alejada: las tarjetas de 110 px de Shopify (11 por fila a 1440), con el nombre de 13 px y sin precio ni
	   «Agotado». */
	.mo-listado:has(.gl-vista input[value='alejada']:checked) > .mo-listado__lista {
		grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
		gap: 1rem;
	}
	.mo-listado:has(.gl-vista input[value='alejada']:checked) > .mo-listado__lista .mo-tarjeta__nombre {
		max-inline-size: none;
		margin-block-start: 0.5rem;
		padding-inline-end: 0;
		font-size: 0.8125rem;
		line-height: 1.3;
		text-wrap: wrap;
	}
	.mo-listado:has(.gl-vista input[value='alejada']:checked) > .mo-listado__lista :is(.mo-tarjeta__precio, .mo-tarjeta__agotado) {
		display: none;
	}
	.mo-listado__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2.5rem 1rem;
	}
	.mo-listado > .mo-listado__lista {
		row-gap: 1rem;
	}
	.mo-ficha__relacionados {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* «grilla»: las miniaturas en una grilla bajo la foto. */
	.mo-ficha--grilla .galeria .miniaturas {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
	}
	.mo-ficha--grilla .galeria .miniaturas img {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 1;
	}

	/* «lateral»: la galería es la mitad izquierda de la caja de la página (40 a 720 px a 1440, como Shopify); las
	   miniaturas, en columna a su izquierda. La foto no pasa el alto de la pantalla. */
	.mo-ficha--lateral {
		max-inline-size: var(--gl-caja);
		gap: 0;
		padding: 0 var(--gl-margen) 3rem;
	}
	.mo-ficha--lateral > :not(.mo-ficha__galeria) {
		padding-inline: 0;
	}
	.mo-ficha__fotos img,
	.mo-ficha .galeria .pista img {
		max-block-size: 100vh;
	}
	.mo-ficha--lateral .mo-ficha__galeria .galeria {
		flex-direction: row-reverse;
		align-items: start;
	}
	.mo-ficha--lateral .galeria .pista {
		flex: 1 1 0;
		min-inline-size: 0;
	}
	.mo-ficha--lateral .galeria .miniaturas {
		flex: none;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.mo-ficha--lateral .mo-ficha__datos {
		position: sticky;
		inset-block-start: var(--alto-encabezado);
		max-inline-size: 25rem;
		margin-inline: auto;
	}
	.mo-ficha--lateral > .mo-ficha__confianza,
	.mo-ficha--lateral > .mo-ficha__detalles,
	.mo-ficha--lateral > .mo-ficha__gustar {
		margin-block-start: 3rem;
	}
}
@media (min-width: 64rem) {
	.mo-listado__lista--c5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 2.5rem 1rem;
	}
}

/* LAS PÁGINAS DE CONTENIDO (`/paginas/<id>`). La portada cambia con el ajuste `pagina_portada` (foto 21:9 arriba, o
   texto y foto en dos columnas) y el cuerpo con la página: las legales van en una tarjeta con listas y la privacidad
   en una columna angosta. Títulos en peso medio y texto en tinta plena (Q7, K7, PRI1). */
.mo-pagina,
.mo-contacto-pagina,
.mo-negativa,
.mo-carro-vacio {
	max-inline-size: var(--gl-caja);
	margin-inline: auto;
	padding: 2rem var(--gl-margen) 3rem;
}
.mo-pagina > *,
.mo-contacto-pagina > *,
.mo-negativa > * {
	min-inline-size: 0;
}
.mo-pagina__titulo {
	margin: 0;
	font-size: clamp(2.3rem, 3.9vw, 3.5rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.mo-pagina__bajada {
	max-inline-size: 40rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.8;
	white-space: pre-line;
}
.mo-pagina__portada {
	display: grid;
	gap: 1.5rem;
}
.mo-pagina__medio {
	overflow: hidden;
	border-radius: var(--radius-lg, 12px);
	aspect-ratio: 21 / 9;
	background: var(--color-line, #e5e7eb);
}
.mo-pagina__medio--video {
	aspect-ratio: 16 / 9;
}
.mo-pagina__medio img,
.mo-pagina__medio video,
.mo-pagina__medio picture {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.mo-pagina__titular {
	display: grid;
	gap: 1rem;
	justify-items: start;
	align-content: center;
}
.mo-pagina__titular > * {
	margin: 0;
}
.mo-pagina__titulo + .mo-pagina__bajada {
	margin-block-start: 0.5rem;
}
.mo-pagina--portada-banner .mo-pagina__titular {
	justify-items: center;
	text-align: center;
}
.mo-pagina--portada-banner .mo-pagina__bajada {
	margin-inline: auto;
}
/* Quiénes somos y las demás páginas generales: 36 px de margen en celular, como en Shopify. */
.mo-pagina--general {
	padding: 3rem 2.25rem;
}
/* En celular, con texto y foto, la foto va después del texto y casi cuadrada (Q8). */
.mo-pagina--portada-dos-columnas.mo-pagina--con-medio .mo-pagina__medio {
	order: 2;
	margin-block-start: 0.5rem;
	aspect-ratio: 1;
}
.mo-pagina--con-medio .mo-pagina__cuerpo {
	margin-block-start: 1.875rem;
}
.mo-pagina--portada-dos-columnas .mo-pagina__medio--video {
	aspect-ratio: 16 / 9;
}
.mo-pagina__cuerpo {
	display: grid;
	gap: 1.25rem;
	margin-block: 2.5rem;
}
.mo-pagina__cuerpo:empty {
	display: none;
}
.mo-pagina__cuerpo > * {
	min-inline-size: 0;
	margin: 0;
}
.mo-pagina__subtitulo {
	margin-block-start: 0.75rem;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.mo-pagina__parrafo,
.mo-pagina__lista {
	line-height: 1.8;
}
.mo-pagina__lista {
	display: grid;
	gap: 0.5rem;
	padding-inline-start: 1.25rem;
}
.mo-pagina__subtitulo,
.mo-pagina__parrafo,
.mo-pagina__lista,
.mo-pagina__preguntas {
	max-inline-size: 48rem;
	inline-size: 100%;
	margin-inline: auto;
}
.mo-pagina__imagen {
	overflow: hidden;
	border-radius: var(--radius-lg, 12px);
}
.mo-pagina__imagen img,
.mo-pagina__tarjeta-foto img,
.mo-pagina__franja-medio img,
.mo-pagina__sello img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Tarjetas de texto con borde, con o sin foto. Los destacados llevan el borde en el color de acento, esquinas
   rectas y el texto como título de 20 px y apoyo de 14 px (Q3b). */
.mo-pagina__tarjeta {
	border: 1px solid var(--color-line, #e5e7eb);
	border-radius: var(--radius-lg, 12px);
}
.mo-pagina__tarjeta {
	display: grid;
	overflow: hidden;
}
.mo-pagina__tarjeta-texto {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
	align-content: center;
	padding: 1.5rem;
}
.mo-pagina__tarjeta-texto > * {
	margin: 0;
}
.mo-pagina__destacados {
	display: grid;
	gap: 0.875rem;
	padding: 0;
	list-style: none;
}
.mo-pagina__destacado {
	display: grid;
	gap: 1.125rem;
	align-content: start;
	min-inline-size: 0;
	padding: 1.625rem 1.5rem 1.5rem;
	border: 1px solid var(--gl-acento);
}
.mo-pagina__destacado strong {
	font-size: 1.3125rem;
	font-weight: 500;
	line-height: 1.2;
}
.mo-pagina__destacado span {
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* La banda de foto y texto: el fondo y el tono de cada línea salen de lo que la tienda eligió. */
.mo-pagina__franja {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: var(--radius-lg, 12px);
	background: var(--color-surface-1, #fff);
	border: 1px solid var(--color-line, #e5e7eb);
}
.mo-pagina__franja--gris-suave {
	background: #f4f4f5;
}
.mo-pagina__franja--marca {
	border-color: transparent;
	background: var(--color-brand, #0b6bff);
	color: var(--color-brand-ink, #fff);
}
.mo-pagina__franja--oscuro {
	border-color: transparent;
	background: #18181b;
	color: #fff;
}
.mo-pagina__franja-medio {
	min-inline-size: 0;
	overflow: hidden;
}
.mo-pagina__franja-texto {
	display: grid;
	gap: 0.5rem;
	padding: 2rem 1.5rem;
	text-align: center;
	justify-items: center;
}
.mo-pagina__franja--izquierda .mo-pagina__franja-texto {
	text-align: start;
	justify-items: start;
}
.mo-pagina__franja--derecha .mo-pagina__franja-texto {
	text-align: end;
	justify-items: end;
}
.mo-pagina__franja-texto > * {
	margin: 0;
}
.mo-pagina__linea {
	font-size: 1.125rem;
	line-height: 1.5;
}
.mo-pagina__franja--gigante .mo-pagina__linea,
.mo-pagina__franja--rotulo .mo-pagina__linea {
	font-size: clamp(1.75rem, 5vw, 3rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.mo-pagina__franja--rotulo .mo-pagina__linea {
	text-transform: uppercase;
}
.mo-pagina__franja--cursiva .mo-pagina__linea {
	font-style: italic;
}
.mo-pagina__linea--marca {
	color: var(--color-brand, #0b6bff);
}
.mo-pagina__franja--marca .mo-pagina__linea--marca,
.mo-pagina__franja--oscuro .mo-pagina__linea--marca {
	color: inherit;
}
.mo-pagina__linea--apagado {
	opacity: 0.65;
}
.mo-pagina__linea--claro {
	color: #fff;
}
.mo-pagina__franja--claro .mo-pagina__linea--claro,
.mo-pagina__franja--gris-suave .mo-pagina__linea--claro {
	color: inherit;
}
.mo-pagina__apoyo {
	font-size: 0.875rem;
	color: var(--gl-secundario);
}
.mo-pagina__sello {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: center;
}
.mo-pagina__sello img {
	inline-size: 5rem;
}
.mo-pagina__sello figcaption {
	flex: 1 1 14rem;
	max-inline-size: 32rem;
	line-height: 1.5;
}
.mo-pagina__preguntas {
	display: grid;
	border-block-start: 1px solid var(--color-line, #e5e7eb);
}
.mo-pagina__preguntas details {
	padding-block: 1rem;
	border-block-end: 1px solid var(--color-line, #e5e7eb);
}
.mo-pagina__preguntas summary {
	font-weight: 500;
	cursor: pointer;
}
.mo-pagina__preguntas details p {
	margin: 0.75rem 0 0;
	line-height: 1.6;
	color: var(--gl-secundario);
}

/* Despachos, devoluciones y términos: todo el contenido en una tarjeta con listas. */
.mo-pagina--tarjeta .mo-pagina__cuerpo {
	max-inline-size: 52rem;
	margin-inline: auto;
	padding: 1.5rem;
	border: 1px solid var(--color-line, #e5e7eb);
	border-radius: var(--radius-lg, 12px);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.mo-pagina--tarjeta .mo-pagina__lista {
	padding: 1rem 1rem 1rem 2.25rem;
	border-radius: var(--radius-md, 8px);
	background: #f4f4f5;
}

/* LA PRIVACIDAD (PRI1, PRI4, PRI6–PRI10): una columna de 720 px, el título al centro y pegado al texto, subtítulos de
   40 px, interlínea 1,6 y listas sin aire entre ítems. */
.mo-pagina--angosta {
	max-inline-size: calc(45rem + 2 * var(--gl-margen));
	padding-block-start: 1rem;
	padding-inline: 1.25rem;
}
.mo-pagina--angosta .mo-pagina__titular {
	justify-items: center;
	text-align: center;
}
.mo-pagina--angosta .mo-pagina__titulo {
	font-size: clamp(2.875rem, 3.9vw, 3.5rem);
}
.mo-pagina--angosta .mo-pagina__cuerpo {
	gap: 1rem;
	margin-block: 0.5rem 2.5rem;
}
.mo-pagina--angosta .mo-pagina__parrafo,
.mo-pagina--angosta .mo-pagina__lista {
	line-height: 1.6;
}
.mo-pagina--angosta .mo-pagina__lista {
	gap: 0;
	padding-inline-start: 1.5rem;
}
.mo-pagina--angosta .mo-pagina__subtitulo {
	margin-block-start: 1.5rem;
	font-size: 2.5rem;
	line-height: 1.15;
}

/* EL CIERRE (Q5): la frase de 32 px en peso medio, sin línea encima. */
.mo-pagina__cierre {
	display: grid;
	gap: 1rem;
	justify-items: center;
	padding-block: 0.5rem 1rem;
	text-align: center;
}
.mo-pagina__cierre > * {
	margin: 0;
}
.mo-pagina__cierre-titulo {
	max-inline-size: 50rem;
	font-size: clamp(1.5625rem, 2.6vw, 2.3125rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
}
.mo-pagina__cierre-bajada {
	max-inline-size: 36rem;
	color: var(--gl-secundario);
}
.mo-pagina__cierre-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* EL CONTACTO (K1–K8): la banda `#E7DAD2` de borde a borde; adentro, el título, la bajada y el correo a la izquierda y
   el formulario a la derecha, sin caja, en una caja de 1120 px. Los campos son los de Shopify: 54 px, del fondo de la
   página con borde blanco, el mensaje en blanco y el botón a todo el ancho. La isla carga después: selectores largos. */
.mo-contacto-pagina {
	max-inline-size: none;
	padding: 3.5rem 0 3.25rem;
	background: var(--gl-banda-contacto);
}
.mo-contacto-pagina__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3.4375rem;
	max-inline-size: calc(70rem + 2 * var(--gl-margen));
	margin-inline: auto;
	padding-inline: 1.375rem;
}
.mo-contacto-pagina__datos {
	display: grid;
	min-inline-size: 0;
	gap: 1.875rem;
	align-content: start;
}
.mo-contacto-pagina__cabecera {
	display: grid;
	gap: 0.75rem;
}
.mo-contacto-pagina__cabecera > * {
	margin: 0;
}
.mo-contacto-pagina .mo-pagina__titulo {
	font-size: clamp(2.5625rem, 4.45vw, 4rem);
}
.mo-contacto-pagina .mo-pagina__bajada {
	max-inline-size: 23rem;
	line-height: 1.7;
}
.mo-contacto-pagina__foto {
	overflow: hidden;
	border-radius: var(--radius-lg, 12px);
	aspect-ratio: 4 / 3;
	background: var(--color-line, #e5e7eb);
}
.mo-contacto-pagina__foto img,
.mo-contacto-pagina__foto picture {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.mo-contacto-pagina__lista {
	display: grid;
	gap: 1.25rem;
	margin: 0;
}
.mo-contacto-pagina__lista dt {
	margin-block-end: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mo-contacto-pagina__lista dd {
	margin: 0;
	overflow-wrap: anywhere;
}
.mo-contacto-pagina__lista a {
	color: inherit;
	text-decoration: none;
}
.mo-contacto-pagina__mapa {
	display: flex;
	gap: 0.75rem;
	align-items: start;
}
.mo-contacto-pagina__mapa .mo-icono {
	flex: none;
}
.mo-contacto-pagina__direccion {
	margin: 0 0 0.25rem;
	overflow-wrap: anywhere;
}
.mo-contacto-pagina__formulario {
	min-inline-size: 0;
}
.mo-contacto-pagina__formulario form.isla-contacto {
	gap: 0.8125rem;
}
.mo-contacto-pagina__formulario .isla-contacto .campo {
	gap: 0.5rem;
}
.mo-contacto-pagina__formulario .isla-contacto label {
	font-size: 0.9375rem;
	font-weight: 600;
}
.mo-contacto-pagina__formulario .isla-contacto input,
.mo-contacto-pagina__formulario .isla-contacto select {
	min-block-size: 3.375rem;
}
.mo-contacto-pagina__formulario .isla-contacto input,
.mo-contacto-pagina__formulario .isla-contacto select,
.mo-contacto-pagina__formulario .isla-contacto textarea {
	padding-inline: 1rem;
	border: 1px solid var(--gl-linea-clara);
	border-radius: 6px;
	background: var(--color-surface-1, #fff);
}
.mo-contacto-pagina__formulario .isla-contacto textarea {
	block-size: 8.5rem;
	border-color: color-mix(in srgb, var(--tema-fondo-pie, #6b5147) 50%, #fff);
	background: #fff;
}
.mo-contacto-pagina__formulario .isla-contacto button[type='submit'] {
	align-self: stretch;
	min-block-size: 3.375rem;
	border-radius: 6px;
	font-weight: 600;
}
.mo-contacto-pagina__sin-js {
	margin: 0;
	line-height: 1.5;
}

/* LA NEGATIVA (404-3, 404-4, 404-7–404-12) Y EL CARRO VACÍO. El aviso sin antetítulo, con 100 px de aire, el título de
   32 px y, debajo, los destacados sin línea, con «Ver todo» a la derecha. */
.mo-negativa__aviso,
.mo-carro-vacio {
	display: grid;
	gap: 1rem;
	justify-items: center;
	padding-block: 3rem;
	text-align: center;
}
.mo-negativa__aviso {
	gap: 2.5rem;
	padding-block: 2.5rem 4.5rem;
}
.mo-negativa__aviso > *,
.mo-carro-vacio > * {
	margin: 0;
}
.mo-negativa__titulo {
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
}
.mo-carro-vacio__icono {
	display: grid;
	place-items: center;
	inline-size: 4.5rem;
	block-size: 4.5rem;
	border-radius: 999px;
	background: #f4f4f5;
}
.mo-carro-vacio__icono .mo-icono {
	inline-size: 2rem;
	block-size: 2rem;
}
.mo-negativa__gustar {
	display: grid;
	gap: 1.25rem;
}
.mo-negativa__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}
.mo-negativa__cabecera .mo-ficha__subtitulo {
	margin: 0;
	text-align: start;
}
.mo-negativa__ver-todo {
	color: inherit;
	font-size: 0.875rem;
	text-decoration: none;
}

@media (min-width: 48rem) {
	.mo-pagina,
	.mo-carro-vacio {
		padding-block: 3rem 4rem;
	}
	.mo-pagina--general {
		padding-inline: var(--gl-margen);
		padding-block-end: 3.5rem;
	}
	.mo-pagina__cierre {
		padding-block-start: 2.5rem;
	}
	.mo-negativa {
		padding-block: 0 4rem;
	}
	.mo-negativa__aviso {
		padding-block: 7.5rem 9.5rem;
	}
	.mo-pagina--portada-dos-columnas.mo-pagina--con-medio {
		max-inline-size: calc(75rem + 2 * var(--gl-margen));
		padding-block-start: 4.5rem;
	}
	.mo-pagina--portada-dos-columnas.mo-pagina--con-medio .mo-pagina__portada {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6rem;
		align-items: center;
	}
	.mo-pagina--con-medio .mo-pagina__titular .mo-pagina__bajada {
		max-inline-size: 33rem;
	}
	.mo-pagina--portada-dos-columnas.mo-pagina--con-medio .mo-pagina__medio {
		margin-block-start: 0;
		aspect-ratio: 7 / 5;
	}
	.mo-pagina--con-medio .mo-pagina__cuerpo {
		margin-block-start: 4.75rem;
	}
	.mo-pagina__destacado {
		min-block-size: 11.125rem;
	}
	.mo-pagina--portada-dos-columnas .mo-pagina__medio--video {
		aspect-ratio: 16 / 9;
	}
	.mo-pagina__tarjeta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mo-pagina__destacados {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: 1.3rem;
	}
	.mo-pagina__franja--con-foto {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}
	.mo-pagina__franja--con-foto .mo-pagina__franja-texto {
		align-content: center;
		padding: 3rem;
	}
	.mo-pagina--tarjeta .mo-pagina__cuerpo {
		padding: 2.5rem;
	}
	.mo-pagina--angosta {
		padding-block-start: 1rem;
		padding-inline: var(--gl-margen);
	}
	.mo-contacto-pagina {
		padding-block: 4.8125rem 5rem;
	}
	.mo-contacto-pagina__cuerpo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
		align-items: start;
		padding-inline: var(--gl-margen);
	}
	.mo-contacto-pagina__datos {
		gap: 2.875rem;
		padding-block-start: 0.625rem;
	}
	.mo-contacto-pagina__formulario form.isla-contacto {
		gap: 1rem;
	}
	.mo-negativa__lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 1.625rem;
	}
}

/* IGUAL A SHOPIFY (2026-10-17). Medido en la vitrina de Shopify de Glam, tema «Copia de Tienda Glam Supply», a 1440
   y a 390. */

/* Las políticas, con la plantilla de políticas de Shopify: columna de 780 px con 20 px de aire, el título al centro y,
   en el cuerpo, el título del documento al mismo tamaño; subtítulos de 32 px y texto de 16 px. */
.mo-pagina.mo-pagina--politica {
	max-inline-size: 780px;
	padding: 20px 20px 3rem;
}
.mo-pagina--politica .mo-pagina__portada {
	display: block;
}
.mo-pagina--politica .mo-pagina__titular {
	display: block;
	text-align: center;
}
.mo-pagina--politica .mo-pagina__titulo {
	margin: 0 0 14px;
	font-size: 56px;
	line-height: 1;
	letter-spacing: normal;
}
.mo-pagina--politica .mo-pagina__cuerpo {
	display: block;
	margin: 0;
}
.mo-pagina--politica .mo-pagina__cuerpo > .mo-pagina__subtitulo {
	max-inline-size: none;
	margin: 40px 0 8px;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: normal;
}
.mo-pagina--politica .mo-pagina__cuerpo > .mo-pagina__subtitulo:first-child {
	margin: 0 0 14px;
	font-size: 56px;
	line-height: 1;
}
.mo-pagina--politica .mo-pagina__cuerpo > .mo-pagina__parrafo {
	max-inline-size: none;
	margin: 16px 0;
	font-size: 16px;
	line-height: 1.6;
}
.mo-pagina--politica .mo-pagina__cuerpo > .mo-pagina__lista {
	display: block;
	max-inline-size: none;
	margin: 0 0 16px;
	padding: 0 0 0 24px;
	list-style: disc;
	font-size: 16px;
	line-height: 1.6;
	background: none;
}
.mo-pagina--politica .mo-pagina__lista li {
	margin: 0;
}
.mo-pagina--politica strong {
	font-weight: 700;
}
.mo-pagina a[href^='mailto:'] {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Quiénes somos: las tres tarjetas con borde del bloque de Shopify. */
/* El cuerpo de una página con foto ya separa 76 px del texto de la portada: la grilla no suma margen. */
.mo-pagina__tarjetas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.mo-pagina__pilar {
	padding: 28px 26px;
	border: 1px solid #c4a08a;
}
.mo-pagina__pilar h2 {
	margin: 0 0 14px;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.3;
}
.mo-pagina__pilar p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
}

/* La frase de cierre, como la del bloque de Shopify: 36 px en 840 px. */
.mo-pagina__cierre-titulo {
	max-inline-size: 840px;
	font-size: 36px;
	line-height: 1.45;
}

/* La ficha: «Impuestos incluidos…» bajo el precio. La descripción con su lista. */
.mo-ficha .mo-ficha__compra .compra .precio::after {
	content: 'Impuestos incluidos. Envío calculado en el pago.';
	display: block;
	margin: 3.825px 0;
	font-size: 15.3px;
	font-weight: 400;
	line-height: 1.2;
	color: rgb(14 26 43 / 0.8);
}
.mo-ficha__descripcion-texto p {
	margin: 0 0 12px;
}
.mo-ficha__descripcion-texto ul {
	margin: 0 0 12px;
	padding-inline-start: 24px;
	list-style: disc;
}

/* Destacados de la portada: la marca sobre el nombre. */
.mo-tarjeta__marca {
	display: block;
	margin-block: 1rem 5px;
	font-size: 10px;
	line-height: 16px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgb(122 128 137);
}
.mo-destacados .mo-tarjeta__marca + .mo-tarjeta__nombre {
	margin-block-start: 0;
}

/* El carrito vacío: la frase de 24 px y «Seguir comprando». */
.mo-carro-vacio__titulo {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.1;
}
.mo-carro-vacio .mo-carro-vacio__boton {
	margin-block-start: 0.8rem;
	padding: 16px 32px;
	border-radius: 6px;
	font-size: 16px;
}
.mo-carro-vacio__gustar {
	max-inline-size: var(--gl-caja);
	margin-inline: auto;
	padding-inline: var(--gl-margen);
}

@media (max-width: 749px) {
	.mo-pagina--politica .mo-pagina__titulo,
	.mo-pagina--politica .mo-pagina__cuerpo > .mo-pagina__subtitulo:first-child {
		margin-block-end: 11px;
		font-size: 44px;
	}
	.mo-pagina__tarjetas {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.mo-pagina__pilar {
		padding: 24px;
	}
	.mo-pagina__cierre-titulo {
		font-size: 24px;
	}
}

/* LA COMPRA DE LA FICHA NUEVA DE SHOPIFY (18-10, glam@3): bajo el precio, la línea blanca del divisor; debajo, en una
   fila, la cantidad (126 × 52, borde de la tinta y esquinas rectas) y el botón (52 de alto, esquinas de 6 px y el resto
   del ancho, con 11 px entre los dos; 6 px en celular), y el acordeón 36 px más abajo (32 en celular). Sin pago
   acelerado: Joaquín lo sacó. La isla carga su hoja después: selectores largos. */
.mo-ficha .mo-ficha__compra .compra {
	flex-flow: row wrap;
	gap: 0 0.7rem;
}
.mo-ficha .mo-ficha__compra .compra > * {
	flex: 1 1 100%;
}
.mo-ficha .mo-ficha__compra .compra .precio {
	padding-block-end: 74px;
	border-block-end: 1px solid var(--gl-linea-clara);
	line-height: 1.6rem;
}
.mo-ficha .mo-ficha__compra .compra > .cantidad {
	flex: none;
	align-self: flex-start;
	margin-block-start: 24px;
}
.mo-ficha .mo-ficha__compra .compra .cantidad .etiqueta {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.mo-ficha .mo-ficha__compra .compra .paso {
	flex-wrap: nowrap;
	gap: 0;
	align-items: center;
	justify-content: center;
	inline-size: 126px;
	block-size: 52px;
	border: 1px solid var(--color-ink, #111827);
	background: var(--color-surface-1, #fff);
}
.mo-ficha .mo-ficha__compra .compra .paso button {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	min-block-size: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-ink, #111827);
}
.mo-ficha .mo-ficha__compra .compra .paso button:disabled {
	color: color-mix(in srgb, var(--color-ink, #111827) 40%, transparent);
	text-decoration: none;
	cursor: default;
}
.mo-ficha .mo-ficha__compra .compra .paso input {
	inline-size: 36px;
	block-size: 28px;
	min-inline-size: 0;
	min-block-size: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: 16px;
	appearance: textfield;
}
.mo-ficha .mo-ficha__compra .compra .paso input::-webkit-outer-spin-button,
.mo-ficha .mo-ficha__compra .compra .paso input::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}
.mo-ficha .mo-ficha__compra .compra > .agregar {
	flex: 1 1 0;
	min-inline-size: 0;
	margin-block-start: 24px;
	text-align: start;
}
.mo-ficha .mo-ficha__compra .compra .agregar button {
	inline-size: 100%;
	min-block-size: 52px;
	padding: 15px 24px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
}
.mo-ficha--lateral .mo-ficha__acordeon {
	margin-block-start: 36px;
}
/* El título 32 px de interlínea 1,1, las filas del acordeón de 44 px y «Quizás también te guste» a 28 px de sus tarjetas
   (24 en celular), como la ficha de Shopify. */
.mo-ficha .mo-ficha__nombre {
	line-height: 1.1;
}
.mo-ficha .mo-ficha__fila summary {
	padding-block: 0.7rem;
	line-height: 1.35rem;
}
.mo-ficha__gustar .mo-ficha__subtitulo {
	line-height: 1.1;
}
.mo-ficha__relacionados .mo-tarjeta__nombre {
	margin-block-start: 1rem;
}
@media (max-width: 749px) {
	.mo-ficha__gustar .mo-ficha__subtitulo {
		margin-block-end: 1.5rem;
	}
	.mo-ficha .mo-ficha__compra .compra {
		column-gap: 0.35rem;
	}
	.mo-ficha .mo-ficha__compra .compra .precio {
		padding-block-end: 59px;
	}
	.mo-ficha--lateral .mo-ficha__acordeon {
		margin-block-start: 32px;
	}
}

/* Producto agotado: un solo botón «Agotado» a lo ancho de la columna, sin la etiqueta suelta encima (el texto de la
   plataforma, «Sin stock», se cambia solo a la vista: el nombre accesible sigue siendo el suyo). Shopify pone además la
   cantidad, que la isla no dibuja sin stock. La etiqueta se esconde solo cuando el botón deshabilitado ya dice el estado:
   en una preventa con cupo el botón dice «Reservar» y la etiqueta «Preventa» queda a la vista (#2056). */
.mo-ficha .mo-ficha__compra .compra:has(.agregar button:disabled) .senal {
	display: none;
}
.mo-ficha .mo-ficha__compra .compra .agregar button:disabled {
	font-size: 0;
	opacity: 0.5;
}
.mo-ficha .mo-ficha__compra .compra .agregar button:disabled::after {
	content: 'Agotado';
	font-size: 16px;
}
/* «Por llegar» (#2056): el mismo botón deshabilitado, con el texto de la plataforma, «Próximamente», en vez de «Agotado».
   La isla rotula esa señal con la variante `warning` de su etiqueta (`VARIANTE_SENAL`). */
.mo-ficha .mo-ficha__compra .compra:has(.senal .warning) .agregar button:disabled {
	font-size: 16px;
}
.mo-ficha .mo-ficha__compra .compra:has(.senal .warning) .agregar button:disabled::after {
	content: none;
}
/* La etiqueta que queda a la vista («Preventa») lleva la placa de las tarjetas de Glam y no la píldora de la
   plataforma (#2056). */
.mo-ficha .mo-ficha__compra .compra .senal .badge {
	padding: 0.375rem 0.625rem;
	border: 0;
	border-radius: 6px;
	background: var(--color-ink, #111827);
	color: var(--color-surface-1, #fff);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.2;
}

/* El carrito vacío con los espacios del de Shopify: la frase a 178 px del borde, el botón a 278 px (Shopify pone
   entre medio la invitación a iniciar sesión, que Hub no tiene) y los productos a 522 px. */
.mo-carro-vacio {
	padding-block: 112px 48px;
}
.mo-carro-vacio .mo-carro-vacio__boton {
	margin-block-start: 58px;
}
.mo-carro-vacio__gustar {
	margin-block-start: 87px;
}
/* Y su final, con la sección «divisor» del carrito de Shopify (glam@3; antes las tarjetas tocaban el pie): una línea de
   la tinta 132 px bajo las tarjetas y el pie 16 px más abajo; en celular, 95 y 12. El hueco de la grilla suma 20. */
.mo-carro-vacio__gustar {
	padding-block-end: 1rem;
}
.mo-carro-vacio__gustar::after {
	content: '';
	block-size: 1px;
	margin-block-start: 7rem;
	background: var(--color-ink, #111827);
}
@media (max-width: 749px) {
	.mo-carro-vacio {
		padding-block-start: 102px;
	}
	.mo-carro-vacio .mo-carro-vacio__boton {
		margin-block-start: 84px;
	}
	.mo-carro-vacio__gustar {
		margin-block-start: 69px;
		padding-block-end: 0.75rem;
	}
	.mo-carro-vacio__gustar::after {
		margin-block-start: 4.675rem;
	}
}

/* El nombre en los destacados de la portada, como en Shopify: peso medio e interlínea justa. */
.mo-destacados .mo-tarjeta__nombre {
	margin-block-end: 4px;
	font-weight: 500;
	line-height: 1.3;
}