/* 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;
}
.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;
}
.mo-listado__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem 1.5rem;
	margin-block: 0.75rem;
}
.mo-listado__conteo {
	margin: 0;
	color: color-mix(in srgb, var(--color-ink, #111827) 80%, var(--color-surface-1, #fff));
	text-transform: uppercase;
}
.mo-listado__controles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.mo-listado__campo {
	display: grid;
	min-inline-size: 0;
}
.mo-listado__campo select {
	min-block-size: 2.25rem;
	padding-inline: 0.25rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-transform: uppercase;
	cursor: pointer;
}
.mo-listado__aplicar {
	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;
}
.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;
}
.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;
	}
	/* Shopify no muestra el conteo en celular: la barra queda en una línea. */
	.mo-listado__conteo {
		display: none;
	}
}

/* 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;
}
.mo-ficha .galeria .pista img {
	aspect-ratio: 4 / 5;
}
.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): la foto 4:5 de borde a borde, en celular arriba y desde la tableta en la mitad
   izquierda, pegada al borde 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 4rem;
	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 3.5rem;
	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;
}
.mo-ficha--lateral .mo-ficha__gustar {
	padding-block-start: 1.5rem;
}

@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;
	}
	.mo-listado__barra {
		margin-block: 1.5rem 1rem;
	}
	.mo-listado__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2.5rem 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 ventana, sin margen; las miniaturas, en columna a su izquierda. */
	.mo-ficha--lateral {
		gap: 0;
		padding-block: 0 4rem;
	}
	.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: calc(25rem + 2 * var(--gl-margen));
		margin-inline: auto;
	}
	.mo-ficha--lateral > .mo-ficha__confianza,
	.mo-ficha--lateral > .mo-ficha__detalles,
	.mo-ficha--lateral > .mo-ficha__gustar {
		margin-block-start: 3.25rem;
	}
	.mo-ficha--lateral .mo-ficha__gustar {
		padding-block-start: 0;
	}
}
@media (min-width: 64rem) {
	.mo-listado__lista--c5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 2.5rem 1rem;
	}
}

/* EL ENCABEZADO SOBRE LA FOTO DE LA FICHA (E2): transparente arriba y del color del fondo apenas se baja, como el de
   Shopify (`enable_transparent_header_product`), sin JavaScript: el cambio lo hace una animación ligada al
   desplazamiento. Donde el navegador no la tiene, el encabezado queda sólido y la foto empieza bajo él. */
@supports (animation-timeline: scroll()) {
	.tema:has(.mo-ficha--lateral) .mo-encabezado {
		animation: gl-encabezado-solido linear both;
		animation-timeline: scroll(root);
		animation-range: 0 4rem;
	}
	.mo-ficha--lateral {
		margin-block-start: calc(-1 * var(--alto-encabezado));
	}
	@media (min-width: 48rem) {
		.mo-ficha--lateral .mo-ficha__datos {
			inset-block-start: 0;
			padding-block-start: calc(3.125rem + var(--alto-encabezado));
		}
	}
}
@keyframes gl-encabezado-solido {
	from {
		background-color: transparent;
	}
	to {
		background-color: var(--color-surface-1, #fff);
	}
}

/* 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;
	}
}