/* ============================================================================
   PORTADA — Mis Amigos Los Animalitos
   La portada de la tienda: hero, franja de destacado, productos destacados,
   el espacio rotativo de marcas y categorías, los más vendidos y todas las
   marcas.

   DE DÓNDE SALE
   -------------
   De `propuesta/home-tienda.html`, la propuesta APROBADA por el cliente. Los
   titulares, el orden de los bloques y la jerarquía visual son los del preview.
   Lo que cambia es la materia prima: donde el preview tenía marcadores de
   posición, aquí hay datos reales del catálogo.

   DE QUÉ DEPENDE
   --------------
   · base.css ... tokens `--ma-*`, botones `.ma-boton`, contenedores, iconos.
   La barra de confianza, la cabecera, la navegación y el pie son del tema:
   esta hoja no los toca.

   POR QUÉ TRAE LA REJILLA Y LA TARJETA COPIADAS
   ---------------------------------------------
   `inc/assets.php` encola esta hoja en `is_front_page()` con `base.css` como
   única dependencia. `tienda.css` NO llega a la portada (va con
   `ma_is_store()`, y la portada no es una superficie de WooCommerce:
   comprobado, el `<body>` es `home blog … woocommerce-no-js`).

   Consecuencia: sin esto, la rejilla saldría apilada y la tarjeta sin estilos.
   Así que aquí viven la rejilla `.ma-rejilla-productos*`, la celda
   `.ma-rejilla-productos__item` y la tarjeta `.ma-tarjeta-producto*`,
   COPIADAS de tienda.css y acotadas a `.ma-portada`.

   Es una duplicación deliberada y hay que tratarla como tal: si cambia el
   aspecto de la tarjeta en tienda.css, hay que cambiarlo también aquí.

   NINGÚN CARRIL TERMINA CON UNA TARJETA HUÉRFANA
   ----------------------------------------------
   Era el fallo de maquetación de la versión anterior: en una rejilla de 5
   columnas se pintaban 6 productos y el sexto quedaba solo, colgando en una
   segunda fila. Aquí se resuelve de raíz, sin cambiar el diseño:

   · `--ma-rejilla-columnas` fija cuántas columnas REALES caben en el ancho
     disponible (4 en el ancho máximo, 3, 2, 1 al estrecharse).
   · `grid-auto-flow: column` reparte las tarjetas en UNA sola fila.
   · `grid-auto-columns: minmax(10.5rem, 1fr)` hace que las columnas se
     estrechen hasta ese mínimo; a partir de ahí el contenedor se desliza en
     horizontal (`overflow-x`) en vez de dejar una fila coja.

   Resultado: a cualquier anchura, la última fila siempre está completa y no
   se pinta ni una tarjeta de más. Para la rejilla de "Productos destacados",
   que sí es una rejilla fija de 4 columnas, la consulta pide exactamente 4
   productos (una fila completa).

   ESPECIFICIDAD FRENTE A WOOCOMMERCE
   ----------------------------------
   El contrato (CONTRATO-TIENDA.md) es explícito: cualquier regla que fije el
   tamaño de una imagen o el ancho de una celda dentro de una superficie de
   WooCommerce necesita al menos (0,2,0), y para ganar a las reglas por
   columnas, (0,3,3). Se cumplen las dos:
   · la celda se ancla a `.ma-portada ul.products[class*="columns-"] > li.product`
     — (0,4,2) — y no a una sola clase;
   · la imagen se ancla a `.ma-portada .ma-tarjeta-producto__media img`, que
     llega a (0,3,2) y gana al `.woocommerce-page img` (0,1,1) de
     woocommerce-layout.css.

   LO QUE ESTE ARCHIVO NO HACE
   ---------------------------
   · NO usa `!important`, ni estilos en línea, ni colores escritos a mano
     (todo sale de tokens `--ma-*`), ni `linear` / `ease-in-out` (las curvas de
     animación son `var(--ma-ease)`), ni emojis como iconos.
   · NO pone fondo ni borde de color detrás de las fotos de producto: vienen
     sobre blanco y cualquier tinte detrás las ensucia.
   · NO usa `data-ma-revelar` en nada crítico: sin JavaScript se ve todo.
   · NO enciende radios reales (solo el borde) y no hay ningún popup.
   ========================================================================== */

/* ============================================================================
   1. ESTRUCTURA GENERAL
   ========================================================================== */

/*
 * ORDEN DE LOS BLOQUES DE LA PORTADA.
 *
 * En el marcado, la franja del antiparasitario se imprime justo detrás del
 * hero. En el diseno aprobado va MUCHO mas abajo: entre el bloque de categorias
 * y «Los mas vendidos». Medido antes de arreglarlo: la franja estaba en y=721,
 * pegada al hero, cuando le toca ir despues del rotativo.
 *
 * Se corrige con `order` y no moviendo el bloque de PHP porque son 93 lineas
 * reindentadas frente a siete reglas, y el resultado es identico. El contenedor
 * pasa a ser una columna flex: sus hijos ya se apilaban como bloques, asi que
 * el orden visual no cambia salvo por el `order` que se declara aqui.
 *
 * Orden aprobado: hero -> productos destacados -> categorias -> franja ->
 * los mas vendidos -> todas las marcas.
 */
.ma-portada {
	display: flex;
	flex-direction: column;
	/*
	 * SIN HUECO ENTRE EL MENÚ Y EL HERO.
	 *
	 * Al `<main>` le llegaba un `padding-top` de 28 px desde otra hoja, así que
	 * el hero empezaba 28 px por debajo de la navegación y se veía una franja
	 * del fondo de la página entre los dos. El cliente lo señaló: el hero tiene
	 * que nacer pegado al menú.
	 *
	 * Se anula aquí, en la hoja que manda sobre la portada, en vez de perseguir
	 * el origen: así queda escrito que en la portada el hero va a sangre por
	 * arriba. El aire que necesita lo lleva ahora el propio hero.
	 */
	padding-top: 0;
}

.ma-portada__hero { order: 1; }

.ma-portada__seccion[aria-labelledby="ma-portada-destacados-titulo"] { order: 2; }

/*
 * 6. EL BLOQUE DE MARCA, ENTRE "DESTACADOS" Y "LOS MÁS VENDIDOS".
 *
 * Aquí ha estado en tres sitios distintos, así que queda escrito el porqué del
 * actual para no volver a moverlo a ciegas:
 *
 *   1º — tercero, justo tras destacados.
 *   2º — entre "Los más vendidos" y "Todas las marcas", porque el cliente lo
 *        pidió bajar.
 *   3º — AQUÍ. El cliente mandó una captura de "Los más vendidos" diciendo que
 *        la marca tenía que ir por encima. Son instrucciones opuestas y se le
 *        preguntó antes de tocar nada; eligió esta.
 *
 * El efecto: la marca aparece antes que el carril de ventas, así que la página
 * presenta la marca fuerte del catálogo antes de hablar de lo más vendido.
 */
.ma-portada__seccion[aria-labelledby="ma-portada-rotativo-titulo"] { order: 3; }

.ma-portada__seccion[aria-labelledby="ma-portada-vendidos-titulo"] { order: 4; }

.ma-portada__seccion[aria-labelledby="ma-portada-marcas-titulo"] { order: 5; }

.ma-portada:focus { outline: none; }

/*
 * Los avisos de WooCommerce no tienen nada que hacer en la portada: aquí no se
 * añade nada al carrito desde una superficie de WooCommerce. Se ocultan sin
 * `!important` y solo dentro de la portada.
 */
.ma-portada .woocommerce-message,
.ma-portada .woocommerce-info,
.ma-portada .woocommerce-error,
.ma-portada .woocommerce-notice {
	display: none;
}

/* ============================================================================
   2. HERO
   Titular aprobado, buscador, slider de banners y puertas de especie.
   ========================================================================== */

.ma-portada__hero {
	position: relative;
	background-color: var(--ma-paper);
	border-bottom: var(--ma-line);
	/*
	 * El aire del hero lo lleva el propio hero, ahora que va pegado al menú.
	 *
	 * Antes esto lo aportaba el `padding-top` del `<main>`, que era justo lo que
	 * dejaba la franja de fondo entre la navegación y el hero. Al quitarlo, el
	 * relleno se trae aquí: así el fondo del hero —y su lavado de color— sube
	 * hasta tocar el menú, pero el contenido no queda pegado al borde.
	 */
	padding-block: clamp(1.5rem, 3vw, 2.4rem);
	overflow: hidden;
}

.ma-portada__hero-lavado {
	position: absolute;
	inset: 0;
	background-image: var(--ma-wash);
	background-repeat: no-repeat;
	pointer-events: none;
}

.ma-portada__hero-interior {
	position: relative;
	display: grid;
	gap: clamp(0.6rem, 1.2vw, 0.9rem);
	align-content: start;
	padding-block: clamp(1rem, 2.4vw, 1.8rem) clamp(1.1rem, 2.6vw, 2rem);
}

.ma-portada__h1 {
	font-size: clamp(1.55rem, 3.1vw, 2.5rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.025em;
	max-width: 26ch;
	margin: 0;
}

.ma-portada__h1 em {
	font-style: normal;
	color: var(--ma-teal-600);
}

.ma-portada__entradilla {
	font-size: clamp(0.88rem, 1.15vw, 1rem);
	line-height: 1.5;
	color: var(--ma-ink-500);
	max-width: 56ch;
	margin-top: 0.5rem;
}

/* El buscador de la portada: el mismo del tema, más ancho. */
.ma-portada .ma-portada__buscador {
	max-width: 44rem;
	width: 100%;
}

.ma-portada .ma-portada__buscador .ma-busqueda__campo {
	min-height: 2.9rem;
}

/* --- 2.1 La retícula del hero: slider + puertas -------------------------- */

.ma-portada__hero-rejilla {
	display: grid;
	gap: clamp(0.8rem, 1.6vw, 1.1rem);
	margin-top: clamp(0.4rem, 1vw, 0.7rem);
}

@media (min-width: 60rem) {
	.ma-portada__hero-rejilla {
		grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
		align-items: stretch;
	}
}

/* --- 2.2 Slider de banners (sin JavaScript) ------------------------------
   `overflow-x` nativo con `scroll-snap`: se desliza con el dedo, con la rueda
   y con el teclado. Las flechas del preview eran botones que necesitaban JS;
   aquí son enlaces de ancla a cada diapositiva, que funcionan siempre.
   ------------------------------------------------------------------------ */

.ma-portada__slider {
	position: relative;
	display: flex;
	flex-direction: column;
	/*
	 * ALTURA FIJA, como el diseño aprobado: `clamp(330px, 32vw, 410px)`.
	 *
	 * Aquí estaba el fallo de fondo del hero. Sin altura declarada, el slider
	 * crecía con su contenido y cada diapositiva medía una cosa distinta según
	 * el texto que llevara. Eso rompía la proporción con la columna de puertas
	 * —que sí tienen altura propia— y hacía que el hero se viera descompensado.
	 *
	 * Con la altura fija, las dos columnas se estiran igual y la composición
	 * queda como la del preview en cualquier ancho.
	 */
	height: clamp(330px, 32vw, 410px);
	background: var(--ma-mist);
	border: var(--ma-line);
	border-radius: var(--ma-r);
	overflow: hidden;
}

.ma-portada__slides {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	/*
	 * Las diapositivas tienen que medir EXACTAMENTE lo que mide el slider.
	 *
	 * Sin esto cada diapositiva crecía con su contenido, y como el texto va
	 * centrado dentro de ella, la parte de arriba quedaba fuera de la ventana
	 * visible de 410 px: el titular salía cortado por la mitad ("Las mejores
	 * marcas," desaparecía) y sobraba un bloque blanco enorme debajo.
	 *
	 * `min-height: 0` es necesario para que un hijo de flex pueda encogerse por
	 * debajo de su contenido; sin él, la altura mínima automática lo impide.
	 */
	height: 100%;
	min-height: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ma-portada__slides::-webkit-scrollbar { display: none; }

.ma-portada__slide {
	position: relative;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	gap: 0.55rem;
	height: 100%;
	overflow: hidden;
	padding: clamp(1.1rem, 2.4vw, 1.9rem);
	/*
	 * SIN `padding-right: 40%`.
	 *
	 * Ese relleno reservaba el lado derecho para la foto, que se posaba AL LADO
	 * del texto. El diseño aprobado no hace eso: la foto LLENA la diapositiva y
	 * el texto va ENCIMA, sobre un degradado blanco. Con el relleno lateral se
	 * veía un borde recto donde acababa la foto, que es justo lo que afeaba el
	 * hero.
	 */
	background: var(--ma-paper);
	overflow: hidden;
}

/*
 * EL TEXTO VA ENCIMA DE LA FOTO, sobre el degradado.
 *
 * Es la pieza que hacía que el hero se viera distinto: en el preview el
 * overlay ocupa toda la diapositiva con un degradado de blanco casi opaco a
 * transparente hacia la derecha, de modo que el texto se lee sin tapar al
 * animal, que queda despejado en el tercio derecho.
 */
.ma-portada__slide-texto {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0.6rem;
	padding: clamp(1.1rem, 2.4vw, 1.9rem);
	padding-bottom: clamp(2.4rem, 4vw, 3rem);
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.97) 0%,
		rgba(255, 255, 255, 0.9) 34%,
		rgba(255, 255, 255, 0.45) 58%,
		rgba(255, 255, 255, 0) 78%
	);
}

.ma-portada__slide-etiqueta {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--ma-teal-200);
	border-radius: var(--ma-pill);
	background: var(--ma-paper);
	font-family: var(--ma-font-ui);
	font-size: 0.63rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ma-teal-700);
}

.ma-portada__slide-titulo {
	font-family: var(--ma-font-display);
	font-size: clamp(1.2rem, 2.2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	max-width: 22ch;
	margin: 0;
}

.ma-portada__slide-bajada {
	font-size: var(--ma-fs-sm);
	line-height: 1.5;
	color: var(--ma-ink-500);
	max-width: 38ch;
}

.ma-portada__slide-texto .ma-boton {
	justify-self: start;
	margin-top: 0.3rem;
}

/*
 * La figura de la diapositiva: el banner LLENO, por debajo del texto.
 *
 * Antes era una caja al 36 % de ancho con la foto `contain`, así que se veía
 * recuadrada y con un borde recto. Ahora ocupa toda la diapositiva y la foto
 * la cubre, como el `object-fit: cover` del diseño aprobado.
 */
.ma-portada__slide-figura {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ma-portada__slide-foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- 2.3 Controles del slider -------------------------------------------- */

.ma-portada__slide-controles {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem clamp(1.1rem, 2.4vw, 1.9rem);
	background: var(--ma-paper);
	border-top: var(--ma-line);
}

.ma-portada__slide-punto {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--ma-pill);
	background: var(--ma-ink-200);
	transition:
		width var(--ma-t-base) var(--ma-ease),
		background-color var(--ma-t-base) var(--ma-ease);
}

.ma-portada__slide-punto:hover,
.ma-portada__slide-punto:focus-visible {
	width: 1.4rem;
	background: var(--ma-teal-500);
}

/*
 * PUNTO ACTIVO.
 *
 * Hasta ahora no había ninguno: los puntos no decían en qué diapositiva estabas.
 * Con el carrusel quieto se podía pasar, pero con giro automático no saber dónde
 * estás desorienta. `aria-current` lo pone el JS a la vez, para quien use lector
 * de pantalla.
 */
.ma-portada__slide-punto.is-activo {
	width: 1.4rem;
	background: var(--ma-teal-600);
}

/*
 * BARRA DE PROGRESO DEL GIRO AUTOMÁTICO.
 *
 * Va con el autoplay, no aparte: es lo que avisa de que la diapositiva va a
 * cambiar. Sin ella el banner se mueve solo sin explicación.
 *
 * La duración vive en la variable `--ma-dur`, que el JS pone al mismo valor que
 * usa para el temporizador. Si se cambia una y no la otra, la barra mentiría:
 * por eso la duración NO se escribe aquí a mano.
 */
.ma-portada__slide-progreso {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	z-index: 5;
	background: rgba(6, 34, 46, 0.07);
}

.ma-portada__slide-progreso i {
	display: block;
	height: 100%;
	background: var(--ma-teal-600);
	transform: scaleX(0);
	transform-origin: left;
}

.ma-portada__slide-progreso.is-corriendo i {
	animation: ma-progreso var(--ma-dur, 6500ms) linear forwards;
}

/*
 * Se para mientras alguien lee.
 *
 * Es de la misma familia que el resto: si el puntero está encima o el foco está
 * dentro, no le cambiamos la diapositiva debajo. Lo hacía el diseño aprobado y
 * tiene todo el sentido.
 */
.ma-portada__slider:hover .ma-portada__slide-progreso.is-corriendo i,
.ma-portada__slider:focus-within .ma-portada__slide-progreso.is-corriendo i {
	animation-play-state: paused;
}

@keyframes ma-progreso {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* --- 2.4 Puertas de especie --------------------------------------------- */

/*
 * Las puertas NO se estiran a la altura del slider: serían dos cajas enormes
 * con la foto perdida en medio. Miden lo que mide su contenido.
 */
/*
 * Las dos puertas van UNA DEBAJO DE OTRA, no en fila.
 *
 * Estaba con `repeat(auto-fit, minmax(13rem, 1fr))`, que en cuanto había ancho
 * las ponía en dos columnas. En el diseño aprobado van apiladas en vertical, en
 * la columna derecha del hero: perro arriba, gato debajo.
 *
 * Una sola columna, siempre, en cualquier anchura.
 */
.ma-portada__puertas {
	display: grid;
	gap: clamp(0.8rem, 1.6vw, 1.1rem);
	grid-template-columns: 1fr;
	/*
	 * Las dos puertas SE REPARTEN LA ALTURA del hero, igual que en el diseño
	 * aprobado (`grid-template-rows: 1fr 1fr`). Antes cada una medía lo que
	 * pedía su contenido (138 px) y quedaban pequeñas al lado del carrusel, que
	 * mide 410. Ahora las dos juntas igualan al carrusel.
	 */
	grid-template-rows: 1fr 1fr;
	align-content: stretch;
}

.ma-portada__puerta {
	position: relative;
	display: grid;
	/*
	 * La foto ocupa el 38 % del ancho, como el `38% 1fr auto` del aprobado.
	 * Antes era una caja fija de 6.5rem, que a poco que creciera la tarjeta se
	 * quedaba pequeña y dejaba al animal diminuto en una esquina.
	 */
	grid-template-columns: 38% minmax(0, 1fr) 2.2rem;
	align-items: center;
	gap: 1rem;
	/* Sin altura mínima: la fija la fila, que se reparte la del hero. */
	min-height: 0;
	padding-right: 1rem;
	background: var(--ma-paper);
	border: var(--ma-line);
	border-radius: var(--ma-r);
	overflow: hidden;
	text-decoration: none;
	transition:
		transform var(--ma-t-base) var(--ma-ease),
		box-shadow var(--ma-t-base) var(--ma-ease),
		border-color var(--ma-t-base) var(--ma-ease);
}

.ma-portada__puerta:hover {
	transform: translateY(-3px);
	border-color: var(--ma-teal-200);
	box-shadow: var(--ma-sh-lift);
}

/*
 * La foto CUBRE su lado entero, de borde a borde y de arriba abajo.
 *
 * Antes esto era una caja con 8 px de relleno, `place-items: center` y un borde
 * a la derecha: la foto quedaba flotando con aire alrededor y el animal se veía
 * pequeño. El diseño aprobado no lleva relleno ni borde en esa columna: la
 * imagen es la columna, recortada con `object-fit: cover`.
 */
.ma-portada__puerta-media {
	position: relative;
	align-self: stretch;
	overflow: hidden;
	background: var(--ma-mist);
}

.ma-portada__puerta-media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ma-portada__puerta-foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * ESTA REGLA ESTABA DUPLICADA Y GANABA LA DE ABAJO.
 *
 * Había dos bloques `.ma-portada__puerta-foto`: el de arriba con
 * `object-fit: cover` y éste con `contain` y `max-height: 5.6rem`. Al ir
 * después, éste mandaba: la foto quedaba contenida dentro de su columna, con
 * aire alrededor, en lugar de cubrirla. Era justo lo que hacía que los animales
 * se vieran pequeños y las tarjetas desangeladas.
 *
 * Se deja una sola regla, la de arriba, y ésta se retira.
 */

.ma-portada__puerta-texto {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.ma-portada__puerta-nombre {
	font-family: var(--ma-font-display);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ma-ink-900);
}

.ma-portada__puerta-cuenta {
	font-size: 0.78rem;
	color: var(--ma-ink-500);
}

.ma-portada__puerta-flecha {
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--ma-teal-600);
	color: var(--ma-paper);
	transition: transform var(--ma-t-base) var(--ma-ease);
}

.ma-portada__puerta:hover .ma-portada__puerta-flecha {
	transform: translateX(3px);
}

.ma-portada__puerta-flecha .ma-icon { stroke: var(--ma-paper); }

@media (max-width: 47.99rem) {
	.ma-portada__puerta {
		grid-template-columns: 4.8rem minmax(0, 1fr) 2rem;
		min-height: 6.4rem;
		gap: 0.7rem;
	}

	.ma-portada__puerta-nombre { font-size: 1.2rem; }

	.ma-portada__puerta-foto { max-height: 4rem; }
}

@media (min-width: 62rem) {
}

@media (min-width: 40rem) {
}

/* ============================================================================
   4. REJILLA DE PRODUCTOS Y CELDA
   Ver el bloque "NINGÚN CARRIL TERMINA CON UNA TARJETA HUÉRFANA" de arriba.
   ========================================================================== */

/*
 * REJILLA QUE ENVUELVE. NO es un carril.
 *
 * FALLO QUE ESTO ARREGLA (medido por la auditoría del home)
 * --------------------------------------------------------
 * Aquí había `grid-auto-flow: column` + `grid-auto-columns: minmax(13rem,1fr)`.
 * El problema es que `tienda.css` ya define para `--portada` una plantilla
 * explícita de 2 columnas (`repeat(2, minmax(0,1fr))`), y las dos reglas se
 * peleaban: con `grid-auto-flow: column` la rejilla creaba 12 pistas —2
 * explícitas y 10 implícitas—, y como las 10 implícitas pedían 13rem cada una,
 * las 2 explícitas se quedaban SIN ESPACIO y se resolvían a 0 px.
 *
 * Medido a 390 px de ancho: `grid-template-columns` = `0px 0px 208px …`,
 * las dos primeras tarjetas con 0 px de ancho y su contenido derramándose
 * encima de la tercera. En la captura se veía el `$19.000` de la primera
 * tarjeta flotando sobre la tercera.
 *
 * El diseño aprobado no tiene carril aquí: `.feat` es
 * `repeat(4, minmax(0,1fr))` y baja a 3 y a 2 por media query. Es una rejilla
 * que envuelve, y lo dice el propio archivo: "Más vendidos: rejilla, sin
 * desplazamiento horizontal".
 *
 * Así que la base deja de forzar el carril y solo maqueta. Las COLUMNAS las
 * decide `tienda.css`, que es donde ya estaban escritas (2 / 3 / 4). Una sola
 * fuente para el número de columnas, no dos peleándose.
 *
 * El carril de verdad vive en la variante `--carril`, más abajo.
 */
.ma-portada ul.products,
.ma-portada .ma-rejilla-productos {
	--ma-rail-min: 13rem;
	display: grid;
	gap: clamp(0.6rem, 1.3vw, 1rem);
	align-items: stretch;
	justify-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ma-portada ul.products::-webkit-scrollbar,
.ma-portada .ma-rejilla-productos::-webkit-scrollbar {
	display: none;
}

/*
 * A partir de 56rem había aquí una regla que forzaba CUATRO columnas a todo.
 *
 * Se quitó porque peleaba con `tienda.css`, que para `--portada` pide 3 en el
 * tramo medio y 4 solo a partir de 75rem. El resultado medido era 4 columnas a
 * 1024 px, donde el diseño aprobado pide 3 (`@media(max-width:82rem)`).
 *
 * Ahora el número de columnas lo decide UN solo sitio: `tienda.css`.
 */

/*
 * CARRILES: SIEMPRE en una fila y con desplazamiento horizontal cuando no
 * caben. Así no hay forma humana de que quede una tarjeta sola colgando.
 *
 * El selector repite el `ul.products` del bloque de arriba a propósito: la
 * regla de 4 columnas de `@media (min-width: 56rem)` tiene la misma
 * especificidad, así que estas declaraciones van DESPUÉS y ganan por orden.
 */
.ma-portada ul.products.ma-rejilla-productos--carril,
.ma-portada ul.products.ma-rejilla-productos--linea,
.ma-portada .ma-rejilla-productos.ma-rejilla-productos--carril,
.ma-portada .ma-rejilla-productos.ma-rejilla-productos--linea {
	grid-auto-flow: column;
	grid-auto-columns: minmax(var(--ma-rail-min), 1fr);
	grid-template-columns: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 0.4rem;
}

.ma-portada .ma-rejilla-productos--carril::-webkit-scrollbar,
.ma-portada .ma-rejilla-productos--linea::-webkit-scrollbar {
	display: none;
}

/*
 * ESCRITORIO, carril de "los más vendidos": sigue siendo UN CARRIL de una sola
 * fila, solo que a partir de 56rem caben las seis tarjetas a la vez y ya no
 * hace falta deslizar. Seis columnas con seis productos: la fila está completa
 * siempre, en cualquier anchura.
 *
 * NO se convierte en una rejilla de 4 columnas a propósito: con seis productos
 * eso dejaría una segunda fila de DOS tarjetas, que es justo el fallo de
 * maquetación que hay que evitar.
 */
@media (min-width: 56rem) {
	.ma-portada ul.products.ma-rejilla-productos--carril,
	.ma-portada .ma-rejilla-productos.ma-rejilla-productos--carril {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		grid-template-columns: none;
	}
}

/*
 * ESCRITORIO, línea de la marca: tres tarjetas en una fila de tres. Nunca
 * queda una sola colgando.
 */
@media (min-width: 56rem) {
	.ma-portada ul.products.ma-rejilla-productos--linea,
	.ma-portada .ma-rejilla-productos.ma-rejilla-productos--linea {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow-x: visible;
		overflow-y: visible;
		scroll-snap-type: none;
		padding-bottom: 0;
	}
}

.ma-portada .ma-rejilla-productos--carril > li,
.ma-portada .ma-rejilla-productos--linea > li {
	scroll-snap-align: start;
}

/* Carril ancho: tarjetas de tamaño cómodo para deslizar. */
.ma-portada ul.products.ma-rejilla-productos--carril {
	--ma-rail-min: 13.5rem;
}

/* Línea de la marca: vive en una columna estrecha, así que la tarjeta es menor. */
.ma-portada ul.products.ma-rejilla-productos--linea {
	--ma-rail-min: 11rem;
}

/*
 * Los pseudo-elementos del clearfix de WooCommerce son hijos de rejilla en
 * cuanto el contenedor pasa a `grid`, y se comen la primera celda. Aquí no hay
 * hojas de WooCommerce, pero el `<ul>` lleva sus clases y el respaldo de
 * `content-product.php` puede emitir los mismos `<li>`: se neutralizan por si
 * acaso. `content: none` es lo que de verdad los quita.
 */
.ma-portada ul.products::before,
.ma-portada ul.products::after,
.ma-portada .ma-rejilla-productos::before,
.ma-portada .ma-rejilla-productos::after {
	content: none;
	display: none;
}

/*
 * La celda deja de ser una caja flotante del tema clásico y mide el 100 % de
 * su área de rejilla. Cuatro clases y un elemento (0,4,2): por encima del
 * (0,3,2) de `.woocommerce-page ul.products[class*="columns-"] li.product`.
 */
.ma-portada ul.products[class*="columns-"] > li.product,
.ma-portada ul.products.ma-rejilla-productos > li.product,
.ma-portada .ma-rejilla-productos > li.ma-rejilla-productos__item {
	float: none;
	clear: none;
	display: flex;
	align-self: stretch;
	width: 100%;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* La tarjeta ocupa toda la celda: así todas las filas miden igual. */
.ma-portada .ma-rejilla-productos__item > .ma-tarjeta-producto,
.ma-portada .ma-tarjeta-producto-celda > .ma-tarjeta-producto {
	width: 100%;
}

/* Sin productos no se deja el hueco: la rejilla entera desaparece. */
.ma-portada ul.products:empty { display: none; }

/* ============================================================================
   5. LA TARJETA DE PRODUCTO
   El aspecto lo manda `template-parts/tarjeta.php`, que es la MISMA tarjeta de
   la tienda. Aquí se reproduce lo que necesita para no salir desnuda.
   ========================================================================== */



/* --- 5.1 La foto ---------------------------------------------------------
   Superficie blanca, sin fondo ni borde de color, y la imagen contenida y
   centrada: el producto se ve entero y nunca recortado.
   ------------------------------------------------------------------------ */



/*
 * ATENCIÓN: ESTA REGLA ES UNA COPIA DE LA DE tienda.css.
 *
 * `tienda.css` NO se carga en la portada, porque `ma_is_store()` es falso aquí
 * (el body de la portada no lleva las clases de WooCommerce). Por eso el agente
 * que construyó esta hoja copió la tarjeta y la rejilla dentro de `portada.css`,
 * acotadas a `.ma-portada`. Es una duplicación deliberada y documentada.
 *
 * Consecuencia práctica: TODO lo que se cambie en la tarjeta de `tienda.css`
 * hay que cambiarlo también aquí. Ya ha pasado: aquí seguía el 74 % de la
 * imagen cuando en la tienda ya estaba en otro valor, y el `mix-blend-mode` no
 * se aplicaba porque solo se había puesto en la otra hoja. Las dos tarjetas se
 * veían distintas sin que nadie supiera por qué.
 *
 * Los valores son los del diseño aprobado (`.pcard .shot img`): 78 % y
 * `mix-blend-mode: multiply` para que el blanco de la foto se funda con el de
 * la tarjeta y no se vea el recuadro.
 *
 * DEUDA ANOTADA: lo correcto a medio plazo es encolar `tienda.css` también en
 * la portada y borrar esta copia. Mientras no se haga, hay que tocar las dos.
 */


/* Foto de respaldo de WooCommerce cuando no hay miniatura. */
.ma-portada .ma-tarjeta-producto__media .woocommerce-placeholder {
	width: 60%;
	height: 60%;
	margin: auto;
	opacity: 0.5;
}

/* --- 5.2 Insignias y corazón -------------------------------------------- */


.ma-portada .ma-insignia {
	display: inline-flex;
	align-items: center;
	padding: 0.22rem 0.55rem;
	border-radius: var(--ma-pill);
	font-family: var(--ma-font-ui);
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 1.3;
	white-space: nowrap;
	background: var(--ma-ink-900);
	color: var(--ma-paper);
}

.ma-portada .ma-insignia--oferta { background: var(--ma-warm-500); color: var(--ma-ink-900); }
.ma-portada .ma-insignia--agotado { background: var(--ma-ink-900); color: var(--ma-paper); }
.ma-portada .ma-insignia--nuevo { background: var(--ma-teal-700); color: var(--ma-paper); }

.ma-portada .ma-insignia--pocas {
	background: var(--ma-warm-50);
	color: var(--ma-ink-900);
	box-shadow: inset 0 0 0 1px var(--ma-warm-500);
}

.ma-portada .ma-insignia--envio { background: var(--ma-teal-50); color: var(--ma-teal-700); }






/* --- 5.3 El cuerpo de texto ---------------------------------------------- */


/*
 * COPIA de la regla de tienda.css. Ver la nota de arriba sobre la duplicación:
 * todo lo que se cambie en la tarjeta hay que cambiarlo en los dos archivos.
 *
 * Caja normal y peso 600, como `.pcard .pcat` del diseño aprobado. Estaba en
 * MAYÚSCULAS con letter-spacing 0.1em, que es lo que abarataba la tarjeta.
 */


/*
 * El título, como mucho en dos líneas. Es lo que impide que un nombre
 * larguísimo estire la fila entera y descoloque la rejilla.
 */



/* --- 5.4 El precio -------------------------------------------------------
   Verde de precio del proyecto, tipografía de titulares y cifras tabulares:
   así todos los precios de la rejilla alinean sus dígitos.
   ------------------------------------------------------------------------ */




.ma-portada .ma-tarjeta-producto__precio ins { text-decoration: none; }


/* --- 5.5 La línea de entrega: texto, no icono ---------------------------- */



.ma-portada .ma-tarjeta-producto__entrega.is-ultimas::before { background: var(--ma-warm-500); }
/* Mismo arreglo de contraste que en tienda.css: 3,12:1 no es legible. */
.ma-portada .ma-tarjeta-producto__entrega.is-agotado { color: var(--ma-ink-500); }
.ma-portada .ma-tarjeta-producto__entrega.is-agotado::before { background: var(--ma-ink-500); }

/* --- 5.6 Las dos acciones: la jerarquía tonal invertida ------------------
   "Comprar ahora" es la acción dominante —turquesa sólido con su sombra— y
   "Añadir al carrito" la secundaria —relleno suave, sin borde ni sombra—.
   Una sola acción dominante por tarjeta.
   ------------------------------------------------------------------------ */





.ma-portada .ma-tarjeta-producto__anadir .ma-boton__ico { background: var(--ma-teal-100); }



.ma-portada .ma-tarjeta-producto__anadir .ma-boton__ico,
.ma-portada .ma-tarjeta-producto__comprar .ma-boton__ico { order: 2; }


/*
 * Los botones que imprime WooCommerce cuando la plantilla de la tarjeta usa su
 * función en vez de escribir el suyo.
 */


/*
 * El spinner de WooCommerce es un GIF alojado en el plugin: una petición más
 * por clic. Aquí no se usa; el estado de carga es un anillo de CSS.
 */
.ma-portada .ma-tarjeta-producto__acciones a.loading::after,
.ma-portada .ma-tarjeta-producto__acciones a.added::after,
.ma-portada .ma-tarjeta-producto__acciones a.button::after { display: none; }




.ma-portada .ma-tarjeta-producto__anadir.is-cargando .ma-boton__ico,
.ma-portada .ma-tarjeta-producto__comprar.is-cargando .ma-boton__ico,
.ma-portada .ma-tarjeta-producto__acciones a.loading .ma-boton__ico { visibility: hidden; }

@keyframes ma-portada-giro {
	to { transform: rotate(360deg); }
}

/* ============================================================================
   6. SECCIONES Y CABECERA DE SECCIÓN
   ========================================================================== */

.ma-portada__seccion {
	padding-block: clamp(1.6rem, 3.4vw, 2.9rem);
	border-bottom: var(--ma-line);
}

.ma-portada__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.35rem 1.5rem;
	margin-bottom: clamp(0.9rem, 2vw, 1.4rem);
}

.ma-portada__cabecera-texto { min-width: 0; }

.ma-portada__etiqueta {
	font-family: var(--ma-font-ui);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ma-teal-700);
	margin-bottom: 0.35rem;
}

.ma-portada__titulo {
	font-size: clamp(1.3rem, 2.4vw, 1.85rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.ma-portada__bajada {
	font-size: var(--ma-fs-sm);
	color: var(--ma-ink-500);
	margin-top: 0.35rem;
	max-width: 68ch;
}

.ma-portada__ver-todos {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: var(--ma-fs-sm);
	font-weight: 700;
	color: var(--ma-teal-700);
	white-space: nowrap;
	text-decoration: none;
}

.ma-portada__ver-todos:hover { color: var(--ma-teal-800); text-decoration: underline; }

.ma-portada__ver-todos .ma-icon { stroke-width: 2.3; }

/* ============================================================================
   7. EL BLOQUE DE MARCA
   «Las mejores marcas, siempre disponibles»: la marca con más referencias.

   AQUÍ HABÍA DOS PESTAÑAS, Y YA NO.
   El bloque tenía un conmutador de radios ocultos —"Compra por categoría"
   contra "Marca destacada"— con dos paneles superpuestos que se mostraban por
   `:checked`. El cliente pidió dejar solo la marca, y tiene sentido: la rejilla
   de categorías ya está en la navegación y en las puertas del hero, así que
   repetirla aquí era decir lo mismo por tercera vez en la misma página.

   Con un único panel desaparece la pestaña y todo su mecanismo, así que el CSS
   del conmutador se fue con ella.

   OJO CON LO QUE PONÍA AQUÍ ANTES, QUE ERA FALSO
   Decía que el diseño aprobado giraba estas pestañas cada 8 segundos y que aquí
   no se giraba "porque un carrusel que se mueve mientras alguien lee molesta".
   Eso era mi criterio presentado como si fuera una decisión de diseño. El
   diseño aprobado SÍ giraba, y cuando el diseño de referencia y mi criterio
   chocan, manda el diseño. El carrusel del hero gira ahora (ver `portada.js`);
   este bloque ya no, porque no queda nada que alternar.
   ========================================================================== */

.ma-portada__rothead {
	margin-bottom: clamp(0.9rem, 2vw, 1.4rem);
}

/* --- 7.1 Tarjetas de categoría, con foto --------------------------------- */

.ma-portada__catcards {
	display: grid;
	gap: clamp(0.7rem, 1.6vw, 1rem);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.ma-portada__catcard {
	display: flex;
	flex-direction: column;
	background: var(--ma-paper);
	border: var(--ma-line);
	border-radius: var(--ma-r);
	overflow: hidden;
	box-shadow: var(--ma-sh-soft);
	text-decoration: none;
	transition:
		transform var(--ma-t-base) var(--ma-ease),
		box-shadow var(--ma-t-base) var(--ma-ease),
		border-color var(--ma-t-base) var(--ma-ease);
}

.ma-portada__catcard:hover {
	transform: translateY(-4px);
	border-color: var(--ma-teal-200);
	box-shadow: var(--ma-sh-lift);
}

.ma-portada__catcard-media {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	padding: 0.9rem;
	background: var(--ma-paper);
	border-bottom: var(--ma-line-soft);
	overflow: hidden;
}

.ma-portada__catcard-foto {
	width: 70%;
	height: 70%;
	object-fit: contain;
	transition: transform var(--ma-t-slow) var(--ma-ease);
}

.ma-portada__catcard:hover .ma-portada__catcard-foto {
	transform: scale(1.06);
}

.ma-portada__catcard-caja {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.95rem 1.05rem 1.1rem;
}

.ma-portada__catcard-texto {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ma-portada__catcard-nombre {
	font-family: var(--ma-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ma-ink-900);
}

.ma-portada__catcard-cuenta {
	font-size: 0.72rem;
	color: var(--ma-ink-400);
	margin-top: 0.15rem;
}

.ma-portada__catcard-flecha {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--ma-teal-50);
	color: var(--ma-teal-600);
	transition:
		transform var(--ma-t-base) var(--ma-ease),
		background-color var(--ma-t-base) var(--ma-ease);
}

.ma-portada__catcard-flecha .ma-icon { stroke: var(--ma-teal-600); }

.ma-portada__catcard:hover .ma-portada__catcard-flecha {
	transform: translateX(3px);
	background: var(--ma-teal-600);
}

.ma-portada__catcard:hover .ma-portada__catcard-flecha .ma-icon { stroke: var(--ma-paper); }

/* --- 7.2 Pastillas de las categorías restantes --------------------------- */

.ma-portada__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.1rem;
	padding: 0;
	list-style: none;
}

.ma-portada__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--ma-ink-200);
	border-radius: var(--ma-pill);
	background: var(--ma-paper);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ma-ink-700);
	text-decoration: none;
	transition:
		border-color var(--ma-t-fast) var(--ma-ease),
		background-color var(--ma-t-fast) var(--ma-ease),
		color var(--ma-t-fast) var(--ma-ease);
}

.ma-portada__pill:hover {
	border-color: var(--ma-teal-300);
	background: var(--ma-teal-50);
	color: var(--ma-teal-700);
}

.ma-portada__pill b {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--ma-ink-400);
}

/* --- 7.3 Panel de marca ---------------------------------------------------
   El preview usaba el rojo de una marca anunciante con el comentario "color
   marcador, sustituir por el oficial". Ese color no existe en el catálogo, así
   que aquí NO se pinta un color de marca inventado: manda el turquesa del
   tema, que es lo que el proyecto tiene tokenizado.
   ------------------------------------------------------------------------ */

.ma-portada__marca-caja {
	border: var(--ma-line);
	border-radius: var(--ma-r);
	overflow: hidden;
	background: var(--ma-paper);
	box-shadow: var(--ma-sh-soft);
}

.ma-portada__marca-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.8rem 1.35rem;
	background: var(--ma-teal-50);
	border-bottom: var(--ma-line);
}

.ma-portada__pill--marca {
	background: var(--ma-paper);
	border-color: var(--ma-teal-200);
	color: var(--ma-teal-700);
}

.ma-portada__marca-cuenta {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ma-teal-800);
}

.ma-portada__marca-cuerpo {
	display: grid;
	gap: 1.5rem;
	padding: clamp(1.25rem, 3vw, 2.1rem);
}

@media (min-width: 62rem) {
	.ma-portada__marca-cuerpo {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: center;
		gap: 2.25rem;
	}
}

.ma-portada__marca-nombre {
	font-family: var(--ma-font-display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--ma-teal-700);
}

/*
 * EL LOGO DE LA MARCA, CUANDO EXISTE.
 *
 * Ninguna de las 136 marcas tiene logo todavía, así que en la práctica este
 * bloque no se imprime y se ve el nombre como logotipo tipográfico (la regla de
 * arriba). Aparece en cuanto se suba uno desde Productos → Marcas.
 *
 * Se limita la ALTURA, no la anchura: los logos de marca son horizontales casi
 * siempre, y fijar el ancho los deformaría o los dejaría diminutos según la
 * proporción de cada uno. Con `object-fit: contain` y un máximo de ancho, cada
 * logo entra sin recortarse ni estirarse.
 */
.ma-portada__marca-logo-caja {
	display: flex;
	align-items: center;
	min-height: 4rem;
	max-width: 16rem;
}

.ma-portada__marca-logo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 4rem;
	object-fit: contain;
	/*
	 * Sin `mix-blend-mode` a propósito, al revés que las fotos de producto.
	 * Aquí se espera un PNG con transparencia; multiplicar sobre el fondo
	 * oscurecería los colores del logo.
	 */
}

.ma-portada__marca-claim {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 700;
	line-height: 1.12;
	max-width: 26ch;
	margin-top: 0.85rem;
}

.ma-portada__marca-descripcion {
	font-size: 0.89rem;
	color: var(--ma-ink-500);
	margin-top: 0.75rem;
	max-width: 44ch;
}

.ma-portada__marca-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.35rem;
}

/* ============================================================================
   8. TODAS LAS MARCAS
   ========================================================================== */

.ma-portada__marcas {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 34rem) {
	.ma-portada__marcas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 56rem) {
	.ma-portada__marcas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.ma-portada__marca {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	min-height: 5rem;
	height: 100%;
	padding: 0.75rem;
	background: var(--ma-paper);
	border: 1px solid var(--ma-ink-100);
	border-radius: var(--ma-r-sm);
	text-align: center;
	text-decoration: none;
	transition:
		border-color var(--ma-t-fast) var(--ma-ease),
		transform var(--ma-t-base) var(--ma-ease),
		box-shadow var(--ma-t-base) var(--ma-ease);
}

.ma-portada__marca:hover {
	border-color: var(--ma-teal-200);
	transform: translateY(-3px);
	box-shadow: var(--ma-sh-soft);
}

.ma-portada__marca-nombre-marca {
	font-family: var(--ma-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--ma-ink-700);
}

.ma-portada__marca:hover .ma-portada__marca-nombre-marca { color: var(--ma-teal-700); }

/*
 * CONTRASTE: aquí iba `--ma-ink-400` (#7C96A2), que sobre blanco da 3,12:1.
 * El mínimo para texto normal es 4,5:1 y esto mide 10,88 px, así que no aplica
 * la excepción de texto grande. Se pasa a `--ma-ink-500` (5,71:1).
 *
 * El diseño aprobado usa `--ink-400` solo para placeholders e iconos; para texto
 * apagado usa `--ink-500`. La desviación era nuestra, no del token.
 */
.ma-portada__marca-referencias {
	font-size: 0.68rem;
	color: var(--ma-ink-500);
	font-variant-numeric: tabular-nums;
}

/* ============================================================================
   9. MÓVIL
   La portada tiene que enseñar producto cuanto antes. En móvil se aprieta el
   aire, pero NO se cambia ningún titular ni se reordena ningún bloque: el
   diseño es el aprobado.
   ========================================================================== */

@media (max-width: 47.99rem) {
	.ma-portada__hero-interior {
		padding-block: 0.85rem 1.1rem;
	}

	.ma-portada__h1 { font-size: 1.45rem; }

	.ma-portada__slide {
		min-height: 15rem;
		padding-right: clamp(1.1rem, 2.4vw, 1.9rem);
	}

	.ma-portada__seccion { padding-block: 1.3rem; }

}

/* ============================================================================
   10. MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ma-portada .ma-tarjeta-producto:hover,
	.ma-portada__puerta:hover,
	.ma-portada__catcard:hover,
	.ma-portada__marca:hover,
	.ma-portada ul.products li.product a.button:hover {
		transform: none;
	}

	.ma-portada .ma-tarjeta-producto:hover .ma-tarjeta-producto__media img,
	.ma-portada .ma-tarjeta-producto:hover .ma-tarjeta-producto__imagen,
	.ma-portada__catcard:hover .ma-portada__catcard-foto {
		transform: none;
	}

	.ma-portada__slides { scroll-behavior: auto; }

	.ma-portada .ma-tarjeta-producto__anadir.is-cargando::after,
	.ma-portada .ma-tarjeta-producto__comprar.is-cargando::after,
	.ma-portada .ma-tarjeta-producto__acciones a.loading::before {
		animation: none;
	}
}