/* =========================================================================
 * fm-tienda.css
 * Fernando Mier — página /tienda/
 *
 * Carga solo en is_shop(). Depende de fm-woo-base.css, que a su vez depende
 * de fm-custom.css.
 *
 * Namespaces por sección, para que nada choque con el resto del sitio:
 *   fm-tdhero  → S1  Hero
 *   fm-tdcat   → S2  Catálogo (grid, filtros, VER MÁS)
 *   fm-tdconf  → S3  Banda dorada
 *   fm-tdlanz  → S4  Lanzamientos (carrusel automático)
 *
 * Namespace de ids de clipPath para los SVG de esta página: 'td'.
 *
 * -------------------------------------------------------------------------
 * REVISIÓN 2026-09
 *   1. COLOR · El azul claro retirado del sistema desaparece de esta hoja.
 *      Eran cuatro apariciones: el token de título, la superficie, el borde
 *      de la tarjeta del catálogo y el color de los iconos. Todas pasan a
 *      #ADB3BC o a su rgba().
 *
 *      CONSECUENCIA A REVISAR: --fm-td-titulo y --fm-td-cuerpo son ahora el
 *      MISMO color. Donde el diseño distinguía título y cuerpo por tono ya
 *      no hay diferencia; la jerarquía la llevan el cuerpo tipográfico y el
 *      peso. Los dos tokens se dejan separados a propósito por si Alejandro
 *      quiere volver a diferenciarlos con otra cosa.
 *
 *   2. BOTÓN · VER MÁS deja de declarar medida propia: consume los tokens
 *      --fm-btn-* de custom.css.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * 1. Variables de página
 * ---------------------------------------------------------------------- */

.fm-tienda {
	--fm-td-fondo:       #01060C;
	--fm-td-titulo:      #ADB3BC;
	--fm-td-cuerpo:      #ADB3BC;
	--fm-td-oro:         #9B8659;

	--fm-td-linea:       rgba(155, 134, 89, 0.28);
	--fm-td-superficie:  rgba(173, 179, 188, 0.03);

	/* Ancho útil. El lienzo de Figma es de 1440 con márgenes laterales. */
	--fm-td-ancho:       min(100% - 2 * var(--fm-td-margen), 1200px);
	--fm-td-margen:      clamp(1.25rem, 5vw, 4rem);

	/* Aire vertical entre secciones. Un solo valor, derivado con calc()
	   donde alguna sección necesite más o menos. */
	--fm-td-aire:        clamp(3.5rem, 9vw, 7.5rem);

	/* Costura entre S2 y S3: en el mock la banda dorada va pegada al
	   catálogo, no separada por dos aires completos. Se declara una vez y
	   se reparte entre el padding inferior de S2 y el superior de S3, para
	   que sumen esto y no el doble. */
	--fm-td-costura:     clamp(1.75rem, 4vw, 3rem);

	--fm-td-transicion:  220ms ease;

	/* --- Tipografías -----------------------------------------------------
	 *
	 * Dos familias, un solo sitio donde cambiarlas.
	 *
	 * NORD para títulos y nombres de producto: se compone en versales y es
	 * la voz del sitio. OJO: el nombre entre comillas tiene que coincidir
	 * exactamente con el font-family del @font-face de fm-custom.css. Si
	 * ahí se declaró 'Nord' o 'NORD Regular', hay que corregirlo AQUÍ y en
	 * ningún otro sitio.
	 *
	 * Red Hat Display para todo lo que va en caja baja: párrafos, bajadas
	 * y precios.
	 * ------------------------------------------------------------------ */
	--fm-td-fuente-titulo: 'NORD', sans-serif;
	--fm-td-fuente-cuerpo: 'Red Hat Display', sans-serif;

	/* El precio es Red Hat en semibold. Va en variables propias porque es
	   el único sitio del sitio donde se usa ese peso. */
	--fm-td-fuente-precio: 'Red Hat Display', sans-serif;
	--fm-td-peso-precio:   600;

	/* Tamaño de los iconos de tarjeta (flecha y carrito). Los SVG de Figma
	   miden 30 × 30 en el lienzo de 1440, o sea 1.875rem. */
	--fm-td-icono:       clamp(1.4rem, 2.1vw, 1.875rem);
}

/* -------------------------------------------------------------------------
 * 2. Contenedor raíz
 *
 * <main class="fm-tienda"> lo imprime woocommerce/archive-product.php.
 * ---------------------------------------------------------------------- */

.fm-tienda {
	background: var(--fm-td-fondo);
	color: var(--fm-td-cuerpo);
	overflow-x: clip; /* clip y no hidden: hidden rompería position: sticky. */
}

/* -------------------------------------------------------------------------
 * 3. Gutter global de Elementor
 *
 * Elementor aplica 128px de padding lateral a todo contenedor .e-con.e-flex,
 * con especificidad (0,2,0). Una regla de una sola clase pierde. El patrón
 * establecido del proyecto es encadenar desde .elementor para llegar a
 * (0,2,0) y ganar por orden de cascada.
 *
 * Hay que poner las tres declaraciones: las dos variables personalizadas
 * porque son las que Elementor lee, y padding-inline porque es la que
 * aplica cuando el contenedor no está en modo flex.
 * ---------------------------------------------------------------------- */

.elementor .fm-tdhero-con,
.elementor .fm-tdcat-con,
.elementor .fm-tdconf-con,
.elementor .fm-tdlanz-con {
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--padding-block-start: 0;
	--padding-block-end: 0;
	padding-inline: 0;
	padding-block: 0;
	max-width: 100%;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * 4. Utilidades de sección
 *
 * Contenedor interno reutilizable: centra el contenido y aplica los
 * márgenes laterales. Cada sección lo usa en su propio <div>.
 * ---------------------------------------------------------------------- */

.fm-td-ancho {
	width: var(--fm-td-ancho);
	margin-inline: auto;
}

/* Rótulo pequeño en oro con tracking, recurrente en todo el sitio. */
.fm-td-rotulo {
	display: block;
	color: var(--fm-td-oro);
	font-size: clamp(0.68rem, 1.3vw, 0.78rem);
	font-weight: 400;
	letter-spacing: 0.22em;
	line-height: 1;
	text-transform: uppercase;
}

/* Oculto a la vista pero legible por lectores de pantalla. Se usa en el
   conteo del catálogo, que el diseño no quiere ver pero que sigue siendo
   la única forma de anunciar el resultado de un filtro a quien no ve la
   retícula cambiar. */
.fm-td-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * 5. Avisos dentro de la tienda
 *
 * fm-woo-base.css ya los estiliza. Aquí solo se les da el aire superior que
 * necesitan para no pegarse al header.
 * ---------------------------------------------------------------------- */

.fm-tienda > .fm-woo-avisos:not(:empty) {
	padding-top: clamp(1.5rem, 5vw, 3rem);
}

/* =========================================================================
 * S1 — Hero
 *
 * Full-bleed. Foto de merch a sangre como fondo, velo doble encima y bloque
 * de texto alineado a la izquierda sobre la retícula de 1200.
 *
 * Cambio respecto al mock, ya acordado: el mock trae fondo claro y texto
 * oscuro, lo que rompe la paleta del sitio. Se invierte a fondo #01060C con
 * el texto en el gris del sistema. La foto sigue siendo la misma; lo que
 * cambia es el velo.
 *
 * El velo son dos gradientes superpuestos:
 *   - vertical, para que el header se lea sobre la foto
 *   - horizontal, para garantizar contraste en la mitad izquierda, que es
 *     donde vive el texto, dejando respirar la derecha de la imagen
 *
 * Sin JS y sin GSAP. Si la foto no carga, el hero se sostiene solo con
 * --fm-td-fondo: el <img> lleva alt="" y no deja icono de rota.
 * ====================================================================== */

.fm-tdhero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(30rem, 46vw, 44rem);
	padding-block: clamp(7rem, 13vw, 10rem) clamp(3.5rem, 8vw, 6rem);
	background: var(--fm-td-fondo);
	isolation: isolate; /* encierra los z-index negativos de los hijos */
	overflow: clip;
}

/* --- Imagen de fondo --------------------------------------------------- */

.fm-tdhero__medio {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.fm-tdhero__medio picture {
	display: block;
	width: 100%;
	height: 100%;
}

.fm-tdhero__medio img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* La foto de merch tiene el peso visual a la derecha; el texto vive a la
	   izquierda. Se ancla el encuadre para que no se coman el producto. */
	object-position: 72% center;
}

/* --- Velo -------------------------------------------------------------- */

.fm-tdhero__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			to bottom,
			rgba(1, 6, 12, 0.88) 0%,
			rgba(1, 6, 12, 0.30) 34%,
			rgba(1, 6, 12, 0.00) 58%,
			rgba(1, 6, 12, 0.45) 100%
		),
		linear-gradient(
			to right,
			rgba(1, 6, 12, 0.94) 0%,
			rgba(1, 6, 12, 0.80) 40%,
			rgba(1, 6, 12, 0.38) 74%,
			rgba(1, 6, 12, 0.20) 100%
		);
}

/* --- Contenido --------------------------------------------------------- */

.fm-tdhero__contenido {
	position: relative;
	z-index: 1;
}

.fm-tdhero__titulo {
	margin: 0;
	color: var(--fm-td-titulo);
	font-size: clamp(2.05rem, 5.4vw, 4.8rem);
	font-weight: 300;
	font-family: 'Kratch Revotch';
	letter-spacing: 0.24em;
	line-height: 1.32;
	text-transform: uppercase;
	text-wrap: balance;
}

/* El corte de línea del mock es intencional: "LLEVA EL ASOMBRO" arriba y
   "CONTIGO" abajo. Se resuelve con dos bloques y no con <br>, para que cada
   línea siga pudiendo reflowear sola en pantallas estrechas. */
.fm-tdhero__linea {
	font-family: 'Kratch Revotch';
	display: block;
}

.fm-tdhero__texto {
	margin: clamp(1.6rem, 3.4vw, 2.6rem) 0 0;
	max-width: min(100%, 34em);
	color: var(--fm-td-cuerpo);
	font-family: var(--fm-td-fuente-cuerpo);
	font-size: clamp(0.95rem, 1.35vw, 1.16rem);
	font-weight: 300;
	line-height: 1.75;
	text-align: left; /* nunca justificado: abre ríos con este ancho */
	text-transform: none;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1199px) {

	.fm-tdhero {
		min-height: clamp(28rem, 52vw, 38rem);
	}

	.fm-tdhero__titulo {
		letter-spacing: 0.20em;
	}

	.fm-tdhero__texto {
		max-width: min(100%, 30em);
	}
}

@media (max-width: 991px) {

	.fm-tdhero {
		padding-block: clamp(6rem, 15vw, 8rem) clamp(3rem, 9vw, 5rem);
	}

	.fm-tdhero__medio img {
		object-position: 64% center;
	}

	/* Con menos ancho ya no hay "derecha" que respetar: el velo pasa a ser
	   sobre todo vertical para no oscurecer la foto de un solo costado. */
	.fm-tdhero__velo {
		background:
			linear-gradient(
				to bottom,
				rgba(1, 6, 12, 0.90) 0%,
				rgba(1, 6, 12, 0.45) 40%,
				rgba(1, 6, 12, 0.30) 62%,
				rgba(1, 6, 12, 0.70) 100%
			),
			linear-gradient(
				to right,
				rgba(1, 6, 12, 0.80) 0%,
				rgba(1, 6, 12, 0.55) 60%,
				rgba(1, 6, 12, 0.40) 100%
			);
	}
}

@media (max-width: 767px) {

	.fm-tdhero {
		min-height: clamp(26rem, 92vw, 34rem);
		padding-block: clamp(5.5rem, 22vw, 7rem) clamp(2.75rem, 12vw, 4rem);
	}

	.fm-tdhero__medio img {
		object-position: center center;
	}

	.fm-tdhero__titulo {
		font-size: clamp(1.7rem, 8.2vw, 2.6rem);
		letter-spacing: 0.16em;
		line-height: 1.38;
	}

	.fm-tdhero__texto {
		margin-top: 1.4rem;
		max-width: 100%;
		font-size: 0.95rem;
		line-height: 1.7;
	}
}

@media (max-width: 400px) {

	.fm-tdhero__titulo {
		font-size: 1.5rem;
		letter-spacing: 0.12em;
	}

	.fm-tdhero__texto {
		font-size: 0.9rem;
	}
}

/* =========================================================================
 * S2 — Catálogo
 *
 * Medidas leídas del mock, escaladas al lienzo de 1440:
 *   retícula útil   1184px  → se resuelve con --fm-td-ancho (1200 máx.)
 *   tarjeta         574 × 574 → cuadrada, aspect-ratio 1/1
 *   separación       34px    → 2rem
 *   fila de filtros  5 huecos iguales de ~174px repartidos con space-between
 *                            FILTRAR es el quinto hueco, sin borde
 *   iconos           30 × 30 → --fm-td-icono
 *
 * Sin JS el catálogo sale completo: es fm-tienda-catalogo.js quien recorta
 * y quien descubre el botón VER MÁS.
 * ====================================================================== */

.fm-tdcat {
	--fm-tdcat-gap:        clamp(0.75rem, 2.4vw, 2rem);
	--fm-tdcat-aire-card:  clamp(1.15rem, 2.4vw, 2.15rem);
	--fm-tdcat-columnas:   2;

	/* Aire completo arriba, costura abajo: la banda dorada de S3 viene
	   pegada. Ver --fm-td-costura. */
	padding-block: var(--fm-td-aire) var(--fm-td-costura);
	background: var(--fm-td-fondo);
}

/* El atributo hidden lo pone y lo quita el JS. Una declaración de display
   en una clase gana a la regla [hidden] de la hoja del navegador, así que
   hay que reafirmarla desde aquí con especificidad suficiente. */
.fm-tdcat [hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * S2.1 — Fila de filtros
 *
 * Cinco elementos con flex: 1 1 0 y una separación fija reproducen
 * exactamente el reparto del mock, y siguen funcionando con tres
 * categorías o con siete. Hoy son tres (TODO + las dos reales).
 *
 * ⚠ LAS PÍLDORAS DE CATEGORÍA NO ENTRAN EN LA HOMOLOGACIÓN DE BOTONES.
 * No son botones de acción, son un control de filtrado en fila: con 250px
 * cada una la fila se rompe en cualquier ancho. Si Alejandro las quiere
 * dentro del sistema, necesitan una escala propia derivada de los tokens.
 * ---------------------------------------------------------------------- */

.fm-tdcat__filtros {
	display: flex;
	align-items: stretch;
	gap: clamp(0.5rem, 5.5vw, 5rem);
	margin-block-end: clamp(2.5rem, 8vw, 7rem);
}

.fm-tdcat__filtros > * {
	flex: 1 1 0;
	min-width: 0;
}

/* --- Píldoras de categoría --------------------------------------------- */

.fm-tdcat__cat {
	appearance: none;
	display: block;
	width: 100%;
	padding: clamp(0.62rem, 1.1vw, 0.82rem) 0.6rem;
	border: 1px solid var(--fm-td-linea);
	border-radius: 0;
	background: transparent;
	color: var(--fm-td-cuerpo);
	font-size: clamp(0.58rem, 0.85vw, 0.72rem);
	font-weight: 400;
	letter-spacing: 0.2em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--fm-td-transicion),
		border-color     var(--fm-td-transicion),
		color            var(--fm-td-transicion);
}

/* Estado activo del mock: fondo oro macizo y texto del color del fondo. */
.fm-tdcat__cat.is-activa {
	border-color: var(--fm-td-oro);
	background: var(--fm-td-oro);
	color: var(--fm-td-fondo);
}

.fm-tdcat__cat:focus-visible {
	outline: 2px solid var(--fm-td-oro);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * S2.2 — FILTRAR y su panel
 * ---------------------------------------------------------------------- */

.fm-tdcat__disp {
	position: relative;
}

.fm-tdcat__filtrar {
	appearance: none;
	display: block;
	width: 100%;
	height: 100%;
	padding: clamp(0.62rem, 1.1vw, 0.82rem) 0.6rem;
	border: 1px solid transparent; /* mismo alto que las píldoras, sin trazo */
	border-radius: 0;
	background: transparent;
	color: var(--fm-td-cuerpo);
	font-size: clamp(0.58rem, 0.85vw, 0.72rem);
	font-weight: 400;
	letter-spacing: 0.2em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--fm-td-transicion);
}

.fm-tdcat__filtrar.is-abierto,
.fm-tdcat__filtrar.is-activo {
	color: var(--fm-td-oro);
}

.fm-tdcat__filtrar:focus-visible {
	outline: 2px solid var(--fm-td-oro);
	outline-offset: 3px;
}

.fm-tdcat__panel {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc(100% + 0.5rem);
	z-index: 5;
	min-width: max(100%, 13rem);
	padding: 1rem 1.15rem;
	border: 1px solid var(--fm-td-linea);
	background: #060C14;
	box-shadow: 0 18px 40px rgba(1, 6, 12, 0.55);
}

.fm-tdcat__opcion {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	cursor: pointer;
}

/* La casilla nativa se mantiene en el DOM y accesible: solo se le quita la
   pintura y se dibuja .fm-tdcat__marca en su lugar. */
.fm-tdcat__casilla {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fm-tdcat__marca {
	position: relative;
	flex: 0 0 auto;
	width: 0.95rem;
	height: 0.95rem;
	border: 1px solid var(--fm-td-linea);
	transition:
		background-color var(--fm-td-transicion),
		border-color     var(--fm-td-transicion);
}

.fm-tdcat__marca::after {
	content: '';
	position: absolute;
	inset-block-start: 0.12rem;
	inset-inline-start: 0.3rem;
	width: 0.3rem;
	height: 0.55rem;
	border: solid var(--fm-td-fondo);
	border-width: 0 1.5px 1.5px 0;
	opacity: 0;
	transform: rotate(45deg);
	transition: opacity var(--fm-td-transicion);
}

.fm-tdcat__casilla:checked + .fm-tdcat__marca {
	border-color: var(--fm-td-oro);
	background: var(--fm-td-oro);
}

.fm-tdcat__casilla:checked + .fm-tdcat__marca::after {
	opacity: 1;
}

.fm-tdcat__casilla:focus-visible + .fm-tdcat__marca {
	outline: 2px solid var(--fm-td-oro);
	outline-offset: 2px;
}

.fm-tdcat__etiqueta {
	color: var(--fm-td-cuerpo);
	font-size: clamp(0.6rem, 0.85vw, 0.72rem);
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * S2.3 — Retícula
 * ---------------------------------------------------------------------- */

.fm-tdcat__grid {
	display: grid;
	grid-template-columns: repeat(var(--fm-tdcat-columnas), minmax(0, 1fr));
	gap: var(--fm-tdcat-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-tdcat__item {
	display: block;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * S2.4 — Tarjeta
 *
 * Cuadrada, con la foto a sangre y todo el texto encima sobre un velo.
 *
 * Un solo elemento interactivo: el enlace del nombre, estirado con ::after
 * a inset:0. La flecha y el carrito son decorativos y llevan al mismo
 * destino, así que duplicarlos en el orden de tabulación solo estorbaría.
 * ---------------------------------------------------------------------- */

.fm-tdcat-card {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid rgba(173, 179, 188, 0.06);
	background: var(--fm-td-superficie);
	isolation: isolate;
}

/* --- Foto -------------------------------------------------------------- */

.fm-tdcat-card__medio {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.fm-tdcat-card__medio img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Velo -------------------------------------------------------------- */

.fm-tdcat-card__velo {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(1, 6, 12, 0.74) 0%,
		rgba(1, 6, 12, 0.22) 26%,
		rgba(1, 6, 12, 0.14) 52%,
		rgba(1, 6, 12, 0.80) 100%
	);
	transition: opacity var(--fm-td-transicion);
}

/* --- Capa de contenido -------------------------------------------------- */

.fm-tdcat-card__capa {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	padding: var(--fm-tdcat-aire-card);
}

.fm-tdcat-card__fila {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
}

.fm-tdcat-card__fila--pie {
	align-items: flex-end;
}

/* --- Nombre ------------------------------------------------------------- */

.fm-tdcat-card__nombre {
	margin: 0;
	max-width: 82%;
	color: var(--fm-td-titulo);
	font-family: var(--fm-td-fuente-titulo);
	font-size: clamp(0.68rem, 1.05vw, 0.9rem);
	font-weight: 300;
	letter-spacing: 0.18em;
	line-height: 1.7;
	text-transform: uppercase;
}

.fm-tdcat-card__enlace {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

/* El ::after cubre la tarjeta entera, por encima de los iconos: cualquier
   clic dentro del cuadrado lleva a la ficha. */
.fm-tdcat-card__enlace::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

.fm-tdcat-card__enlace:focus-visible::after {
	outline: 2px solid var(--fm-td-oro);
	outline-offset: -6px;
}

/* --- Iconos -------------------------------------------------------------
 * SVG de Figma, 30 × 30, trazo redondeado. Van inline en el PHP porque
 * currentColor no llega a través de <img src>.
 * ---------------------------------------------------------------------- */

.fm-tdcat-card__flecha,
.fm-tdcat-card__carrito {
	flex: 0 0 auto;
	display: block;
	color: rgba(173, 179, 188, 0.78);
	pointer-events: none;
	transition:
		color     var(--fm-td-transicion),
		transform var(--fm-td-transicion);
}

.fm-tdcat-card__icono {
	display: block;
	width: var(--fm-td-icono);
	height: var(--fm-td-icono);
}

/* --- Precio -------------------------------------------------------------
 * Red Hat Display semibold. El nombre del producto va en NORD y el precio
 * en Red Hat: son las dos voces de la tarjeta.
 * ---------------------------------------------------------------------- */

.fm-tdcat-card__precio {
	margin: 0;
	color: var(--fm-td-titulo);
	font-family: var(--fm-td-fuente-precio);
	font-size: clamp(0.88rem, 1.3vw, 1.18rem);
	font-weight: var(--fm-td-peso-precio);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: none;
}

/* get_price_html() envuelve el importe en spans de Woo. En la shop el CSS
   de Woo está retirado, así que se neutralizan aquí. */
.fm-tdcat-card__precio .amount,
.fm-tdcat-card__precio bdi,
.fm-tdcat-card__precio ins {
	color: inherit;
	font: inherit;
	text-decoration: none;
	background: none;
}

/* Precio anterior en producto rebajado. */
.fm-tdcat-card__precio del {
	margin-inline-end: 0.5em;
	color: var(--fm-td-cuerpo);
	font-size: 0.8em;
	opacity: 0.75;
}

/* --- Agotado ------------------------------------------------------------
 * No existe en el mock. Hace falta porque los productos sin stock siguen en
 * el DOM a propósito: el filtro de disponibilidad los necesita. Es lo más
 * discreto posible; queda pendiente que Alejandro lo valide.
 * ---------------------------------------------------------------------- */

.fm-tdcat-card__agotado {
	flex: 0 0 auto;
	color: var(--fm-td-oro);
	font-size: clamp(0.55rem, 0.8vw, 0.66rem);
	letter-spacing: 0.2em;
	line-height: 1.2;
	text-transform: uppercase;
}

.fm-tdcat__item[data-fm-disponible='0'] .fm-tdcat-card__medio img {
	filter: grayscale(1);
	opacity: 0.45;
}

/* --- Interacción -------------------------------------------------------- */

@media (hover: hover) {

	.fm-tdcat__cat:hover,
	.fm-tdcat__cat:focus {
		border-color: var(--fm-td-oro);
		background: transparent;
		color: var(--fm-td-titulo);
	}

	.fm-tdcat__cat.is-activa:hover,
	.fm-tdcat__cat.is-activa:focus {
		background: var(--fm-td-oro);
		color: var(--fm-td-fondo);
	}

	.fm-tdcat__filtrar:hover,
	.fm-tdcat__filtrar:focus {
		background: transparent;
		color: var(--fm-td-oro);
	}

	.fm-tdcat-card:hover .fm-tdcat-card__medio img {
		transform: scale(1.045);
	}

	.fm-tdcat-card:hover .fm-tdcat-card__velo {
		opacity: 0.88;
	}

	.fm-tdcat-card:hover .fm-tdcat-card__flecha {
		color: var(--fm-td-oro);
		transform: translate(2px, -2px);
	}

	.fm-tdcat-card:hover .fm-tdcat-card__carrito {
		color: var(--fm-td-oro);
	}
}

/* -------------------------------------------------------------------------
 * S2.5 — Conteo, vacío y VER MÁS
 *
 * El conteo ("2 PIEZAS") sale del diseño: no se pinta. No se borra del DOM
 * porque es lo único que anuncia el resultado de un filtro a quien navega
 * con lector de pantalla — queda en .fm-td-oculto, con su aria-live.
 * ---------------------------------------------------------------------- */

.fm-tdcat__conteo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fm-tdcat__vacio {
	margin: clamp(2rem, 6vw, 4rem) 0;
	color: var(--fm-td-cuerpo);
	font-family: var(--fm-td-fuente-cuerpo);
	font-size: clamp(0.9rem, 1.2vw, 1.05rem);
	font-weight: 300;
	line-height: 1.7;
	text-align: center;
	text-transform: none;
}

.fm-tdcat__mas {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(2.25rem, 6.5vw, 5.5rem);
}

/* Con pocos productos el botón sale con `hidden` y nunca se descubre, pero
   su contenedor seguía reservando el margen superior entero. Ese era el
   hueco grande entre el catálogo y la banda dorada. */
.fm-tdcat__mas:has(.fm-tdcat__boton[hidden]) {
	display: none;
}

/* MEDIDA DEL SISTEMA (tokens --fm-btn-* de custom.css).
 *
 * Cambia además el borde: estaba en --fm-td-linea, que es un DORADO al 28%,
 * mientras que el resto de los botones del sitio llevan borde gris. Ahora
 * son todos iguales y el dorado se reserva para el hover.
 *
 * La familia se declara: antes heredaba la global y salía en otra fuente
 * que el resto de los botones. */
.fm-tdcat__boton {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--fm-btn-ancho);
	min-height: var(--fm-btn-alto);
	padding-block: 0;
	padding-inline: var(--fm-btn-pad-x);
	border: 1px solid var(--fm-btn-borde);
	border-radius: 0;
	background: transparent;
	color: var(--fm-btn-tinta);
	font-family: 'NORD', sans-serif;
	font-size: var(--fm-btn-tam);
	font-weight: var(--fm-btn-peso);
	line-height: 1.2;
	letter-spacing: var(--fm-btn-track);
	text-indent: var(--fm-btn-track);
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		border-color var(--fm-td-transicion),
		color        var(--fm-td-transicion);
}

/* Hover: borde a dorado, peso 300 → 400, texto SIEMPRE en #ADB3BC.
   El selector va encadenado desde .fm-tienda para llegar a (0,2,0) y
   ganarle al `button:hover { background-color: #C36 }` de reset.css. */
.fm-tienda .fm-tdcat__boton:hover,
.fm-tienda .fm-tdcat__boton:focus {
	background: transparent;
	border-color: var(--fm-btn-oro);
	color: var(--fm-btn-tinta);
	font-weight: var(--fm-btn-peso-on);
}

.fm-tdcat__boton:focus-visible {
	outline: 2px solid var(--fm-btn-oro);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * S2.6 — Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1199px) {

	.fm-tdcat__filtros {
		gap: clamp(0.5rem, 3.5vw, 2.5rem);
		margin-block-end: clamp(2.25rem, 7vw, 4.5rem);
	}

	.fm-tdcat__cat,
	.fm-tdcat__filtrar {
		letter-spacing: 0.16em;
	}
}

@media (max-width: 991px) {

	/* Con menos ancho, cinco huecos iguales dejan las píldoras en dos
	   palabras por línea. Pasan a ancho de contenido, envolviendo, y
	   FILTRAR se va al extremo. */
	.fm-tdcat__filtros {
		flex-wrap: wrap;
		gap: 0.6rem;
	}

	.fm-tdcat__filtros > * {
		flex: 0 1 auto;
	}

	.fm-tdcat__cat {
		padding-inline: clamp(0.9rem, 2.6vw, 1.6rem);
	}

	.fm-tdcat__disp {
		margin-inline-start: auto;
	}

	.fm-tdcat__filtrar {
		padding-inline: clamp(0.6rem, 2vw, 1.2rem);
	}

	.fm-tdcat-card__nombre {
		max-width: 78%;
		font-size: clamp(0.66rem, 1.5vw, 0.8rem);
		letter-spacing: 0.15em;
	}
}

@media (max-width: 767px) {

	.fm-tdcat {
		--fm-tdcat-gap: 0.75rem;
		--fm-tdcat-aire-card: clamp(0.9rem, 3.2vw, 1.25rem);
	}

	.fm-tdcat__filtros {
		margin-block-end: clamp(2rem, 9vw, 3rem);
	}

	.fm-tdcat-card__nombre {
		max-width: 74%;
		line-height: 1.55;
	}

	.fm-tdcat__mas {
		margin-block-start: clamp(2rem, 10vw, 3.25rem);
	}
}

@media (max-width: 560px) {

	/* Una columna. A dos, la tarjeta baja de 240px y el nombre a 24
	   caracteres con tracking se parte en cuatro líneas. */
	.fm-tdcat {
		--fm-tdcat-columnas: 1;
		--fm-tdcat-gap: 1rem;
		--fm-tdcat-aire-card: 1.25rem;
	}

	.fm-tdcat__filtros {
		gap: 0.5rem;
	}

	.fm-tdcat__cat {
		padding-block: 0.7rem;
		padding-inline: 1rem;
		font-size: 0.6rem;
	}

	.fm-tdcat__disp {
		margin-inline-start: 0;
	}

	.fm-tdcat__panel {
		inset-inline-end: auto;
		inset-inline-start: 0;
	}

	.fm-tdcat-card__nombre {
		max-width: 76%;
		font-size: 0.72rem;
	}

	.fm-tdcat-card__precio {
		font-size: 1rem;
	}

	/* Ya no va a ancho completo: el token trae min(100%, 250px) y el botón
	   se centra dentro de su contenedor flex. */
	.fm-tdcat__boton {
		width: var(--fm-btn-ancho);
	}
}

@media (max-width: 400px) {

	.fm-tdcat {
		--fm-tdcat-aire-card: 1rem;
	}

	.fm-tdcat__cat,
	.fm-tdcat__filtrar {
		font-size: 0.55rem;
		letter-spacing: 0.14em;
	}

	.fm-tdcat-card__nombre {
		font-size: 0.68rem;
		letter-spacing: 0.12em;
	}
}

/* -------------------------------------------------------------------------
 * S2.7 — Movimiento reducido
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.fm-tdcat-card__medio img,
	.fm-tdcat-card__velo,
	.fm-tdcat-card__flecha,
	.fm-tdcat-card__carrito,
	.fm-tdcat__cat,
	.fm-tdcat__filtrar,
	.fm-tdcat__boton,
	.fm-tdcat__marca,
	.fm-tdcat__marca::after {
		transition: none;
	}

	.fm-tdcat-card:hover .fm-tdcat-card__medio img {
		transform: none;
	}

	.fm-tdcat-card:hover .fm-tdcat-card__flecha {
		transform: none;
	}
}

/* =========================================================================
 * S3 — Banda de confianza
 *
 * Medidas leídas del mock, escaladas al lienzo de 1440:
 *   retícula útil   1200px  → --fm-td-ancho, tres columnas iguales
 *   tarjeta         378 × 155  → 1fr con min-height, no alto fijo
 *   separación       32px    → el mismo gap del catálogo
 *   icono            57px de alto, ancho variable
 *   cuerpo           justificado
 *
 * Los tres SVG de Figma miden 66×57, 68×57 y 89×57: misma altura, anchos
 * distintos. Por eso se dimensionan por ALTURA y no por ancho — si se
 * forzaran a una columna de ancho fijo, el de cambios y devoluciones se
 * vería un tercio más pequeño que los otros dos. La consecuencia es que
 * el texto de la tercera tarjeta arranca unos 20px más a la derecha, que
 * es exactamente lo que hace el mock.
 *
 * Tipografía: el título en NORD (versales, la voz del sitio), el cuerpo en
 * Red Hat Display, que es la familia de todo lo que va en caja baja.
 *
 * Color: la tarjeta del mock es #8C7950, que es exactamente el oro del
 * sitio al 90% sobre el fondo #01060C. Se declara así para que siga
 * derivando del token y no quede un hex suelto.
 *
 * NOTA DE CONTRASTE — pendiente de Alejandro.
 * El cuerpo va en gris sobre oro, tal como está diseñado, y no llega al
 * mínimo legible. Los colores están aislados en --fm-tdconf-titulo,
 * --fm-tdconf-cuerpo y --fm-tdconf-icono: cuando se resuelva, se cambian
 * ahí y nada más. La versión accesible es ponerlos en #01060C.
 * ====================================================================== */

.fm-tdconf {
	--fm-tdconf-gap:         clamp(0.75rem, 2.2vw, 2rem);
	--fm-tdconf-tarjeta:     #8C7950;   /* #9B8659 al 90% = #8C7950 */
	--fm-tdconf-titulo:      #ADB3BC;
	--fm-tdconf-cuerpo:      #ADB3BC;
	--fm-tdconf-icono:       #ADB3BC;
	--fm-tdconf-trazo:       0.9;
	--fm-tdconf-alto:        clamp(8rem, 10.8vw, 9.7rem);
	--fm-tdconf-aire:        clamp(1rem, 1.7vw, 1.4rem);
	--fm-tdconf-icono-alto:  clamp(2.4rem, 4.2vw, 3.75rem);
	--fm-tdconf-sep:         clamp(0.9rem, 2vw, 1.75rem);

	/* Costura arriba, aire completo abajo: la banda va pegada al catálogo
	   y separada de los lanzamientos. */
	padding-block: var(--fm-td-costura) var(--fm-td-aire);
	background: var(--fm-td-fondo, #01060C);
}

/* -------------------------------------------------------------------------
 * S3.1 — Retícula de tres columnas
 * ---------------------------------------------------------------------- */

.fm-tdconf__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fm-tdconf-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-tdconf__item {
	display: flex;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * S3.2 — Tarjeta
 * ---------------------------------------------------------------------- */

.fm-tdconf-card {
	display: flex;
	align-items: center;
	gap: var(--fm-tdconf-sep);
	width: 100%;
	min-height: var(--fm-tdconf-alto);
	padding: var(--fm-tdconf-aire);
	background: var(--fm-tdconf-tarjeta);
}

.fm-tdconf-card__icono {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--fm-tdconf-icono);
}

/* Altura fija, ancho por relación de aspecto. Los tres SVG comparten los
   57 de alto del lienzo de Figma, así que salen del mismo tamaño óptico.
   overflow: visible porque varios paths tocan el borde del viewBox y con
   el trazo centrado se recortaría la mitad de la línea. */
.fm-tdconf-card__icono svg {
	display: block;
	width: auto;
	height: var(--fm-tdconf-icono-alto);
	overflow: visible;
}

/* El grosor se declara aquí una sola vez, no en cada path.
   vector-effect: non-scaling-stroke deja el trazo en px de pantalla en vez
   de escalarlo con el SVG: sin esto, el hairline de Figma (0.6 unidades)
   cae por debajo de medio pixel en móvil y los iconos se desvanecen. */
.fm-tdconf-card__icono svg path {
	stroke-width: var(--fm-tdconf-trazo);
	vector-effect: non-scaling-stroke;
}

.fm-tdconf-card__texto {
	flex: 1 1 auto;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * S3.3 — Tipografía
 * ---------------------------------------------------------------------- */

.fm-tdconf-card__titulo {
	margin: 0 0 clamp(0.5rem, 1vw, 0.8rem);
	color: var(--fm-tdconf-titulo);
	font-family: var(--fm-td-fuente-titulo);
	font-size: clamp(0.8rem, 1.15vw, 1rem);
	font-weight: 400;
	letter-spacing: 0.18em;
	line-height: 1.35;
	text-transform: uppercase;
}

.fm-tdconf-card__cuerpo {
	margin: 0;
	color: var(--fm-tdconf-cuerpo);
	font-family: var(--fm-td-fuente-cuerpo);
	font-size: clamp(0.64rem, 0.85vw, 0.75rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.8;
	text-align: justify;
	text-transform: none;
	hyphens: none;
}

/* -------------------------------------------------------------------------
 * S3.4 — Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1199px) {

	.fm-tdconf {
		--fm-tdconf-aire: clamp(0.9rem, 1.9vw, 1.25rem);
		--fm-tdconf-sep: clamp(0.8rem, 1.8vw, 1.25rem);
	}

	.fm-tdconf-card__titulo {
		letter-spacing: 0.15em;
	}
}

@media (max-width: 991px) {

	.fm-tdconf {
		--fm-tdconf-gap: 1rem;
		--fm-tdconf-alto: auto;
		--fm-tdconf-aire: clamp(1.1rem, 3vw, 1.6rem);
		--fm-tdconf-icono-alto: clamp(2.6rem, 6vw, 3.5rem);
		--fm-tdconf-sep: clamp(1.1rem, 3.5vw, 1.75rem);
	}

	.fm-tdconf__lista {
		grid-template-columns: 1fr;
	}

	.fm-tdconf-card__titulo {
		font-size: clamp(0.82rem, 2vw, 0.95rem);
		letter-spacing: 0.18em;
	}

	.fm-tdconf-card__cuerpo {
		font-size: clamp(0.7rem, 1.6vw, 0.8rem);
		max-width: 46em;
	}
}

@media (max-width: 767px) {

	.fm-tdconf {
		--fm-tdconf-gap: 0.75rem;
		--fm-tdconf-aire: clamp(1rem, 4vw, 1.35rem);
	}

	.fm-tdconf-card__cuerpo {
		text-align: start;
		line-height: 1.75;
	}
}

@media (max-width: 560px) {

	.fm-tdconf {
		--fm-tdconf-icono-alto: 2.4rem;
	}

	/* Icono arriba. En línea, a este ancho, el cuerpo se queda en unos
	   180px y se parte en columnas de tres palabras. */
	.fm-tdconf-card {
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(0.85rem, 3.5vw, 1.1rem);
	}

	.fm-tdconf-card__titulo {
		font-size: 0.82rem;
	}

	.fm-tdconf-card__cuerpo {
		font-size: 0.74rem;
	}
}

@media (max-width: 400px) {

	.fm-tdconf {
		--fm-tdconf-icono-alto: 2.2rem;
	}

	.fm-tdconf-card__titulo {
		font-size: 0.76rem;
		letter-spacing: 0.14em;
	}

	.fm-tdconf-card__cuerpo {
		font-size: 0.7rem;
	}
}

/* =========================================================================
 * S4 — Últimos lanzamientos
 *
 * Medidas leídas del mock, escaladas al lienzo de 1440:
 *   tarjeta central   1017 × 684  → 70% del ancho de ventana, razón 3:2
 *   separación          ~70px     → 4.9vw
 *   asomo lateral      142px      → consecuencia del centrado, no un valor
 *   aire interior       ~34px     → el mismo de la tarjeta de S2
 *   encabezado         centrado, título + bajada de dos líneas
 *
 * El carril es un contenedor con overflow-x y scroll-snap, no un carrusel
 * de transform. Con eso el dedo, el trackpad y las teclas de flecha
 * funcionan sin JS, y el JS solo añade controles y avance automático.
 *
 * El centrado de la primera y la última tarjeta se resuelve con
 * padding-inline en el carril: sin ese relleno no hay recorrido para
 * llevarlas al centro. Se declara con --fm-vw y no con 100vw porque 100vw
 * incluye la barra de scroll (~21px en Windows) y ahí se nota: el asomo
 * de la derecha saldría un pelo distinto al de la izquierda.
 * ====================================================================== */

.fm-tdlanz {
	/* Ancho real de la ventana, publicado por el motor del sitio. */
	--fm-tdlanz-vista:   var(--fm-vw, 100vw);

	/* Fracción de la ventana que ocupa la tarjeta. Es la única variable
	   que tocan los breakpoints para reencuadrar el carrusel. */
	--fm-tdlanz-fr:      0.70;
	--fm-tdlanz-tope:    1017px;
	--fm-tdlanz-card:    min(calc(var(--fm-tdlanz-vista) * var(--fm-tdlanz-fr)), var(--fm-tdlanz-tope));

	--fm-tdlanz-razon:   3 / 2;
	--fm-tdlanz-gap:     clamp(1rem, 4.9vw, 4.375rem);
	--fm-tdlanz-aire:    clamp(1.15rem, 2.4vw, 2.15rem);

	/* Fondo desenfocado de la tarjeta. Ver el bloque S4.3. */
	--fm-tdlanz-borron:  clamp(18px, 2.4vw, 34px);
	--fm-tdlanz-sombra:  0.45;

	--fm-tdlanz-titulo:  var(--fm-td-titulo);
	--fm-tdlanz-cuerpo:  var(--fm-td-cuerpo);

	padding-block: var(--fm-td-aire);
	background: var(--fm-td-fondo);
}

/* El atributo hidden lo quita el JS cuando el carril desborda. */
.fm-tdlanz [hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * S4.1 — Encabezado
 * ---------------------------------------------------------------------- */

.fm-tdlanz__cabeza {
	margin-block-end: clamp(2rem, 5vw, 3.75rem);
	text-align: center;
}

.fm-tdlanz__titulo {
	margin: 0;
	color: var(--fm-tdlanz-titulo);
	font-family: var(--fm-td-fuente-titulo);
	font-size: clamp(1.25rem, 2.4vw, 2.1rem);
	font-weight: 300;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-transform: uppercase;

	/* El tracking añade un hueco después de la última letra que el centrado
	   sí cuenta: sin compensarlo, el título queda medio hueco a la
	   izquierda del eje. La mitad del tracking lo devuelve al sitio. */
	text-indent: 0.09em;
}

.fm-tdlanz__bajada {
	max-width: 42em;
	margin: clamp(1.1rem, 2.6vw, 1.85rem) auto 0;
	color: var(--fm-tdlanz-cuerpo);
	font-family: var(--fm-td-fuente-cuerpo);
	font-size: clamp(0.78rem, 1.5vw, 1rem);
	font-weight: 300;
	letter-spacing: 0.01em;
	line-height: 1.85;
	text-transform: none;
}

/* -------------------------------------------------------------------------
 * S4.2 — Carril
 * ---------------------------------------------------------------------- */

.fm-tdlanz__rail {
	box-sizing: border-box;
	width: var(--fm-tdlanz-vista);
	margin-block: 0;
	margin-inline: calc(50% - var(--fm-tdlanz-vista) / 2);

	display: flex;
	gap: var(--fm-tdlanz-gap);
	list-style: none;

	/* Relleno lateral = lo que sobra a cada lado de la tarjeta centrada.
	   Es lo que permite que la primera y la última lleguen al centro. */
	padding-block: 0;
	padding-inline: max(
		var(--fm-td-margen),
		calc((var(--fm-tdlanz-vista) - var(--fm-tdlanz-card)) / 2)
	);

	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;

	/* La barra se esconde: el asomo de las tarjetas ya cuenta que hay más,
	   y los controles dan el resto de la información. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.fm-tdlanz__rail::-webkit-scrollbar {
	display: none;
}

.fm-tdlanz__rail:focus-visible {
	outline: 2px solid var(--fm-td-oro);
	outline-offset: -3px;
}

.fm-tdlanz__item {
	flex: 0 0 var(--fm-tdlanz-card);
	max-width: var(--fm-tdlanz-card);
	scroll-snap-align: center;
}

/* -------------------------------------------------------------------------
 * S4.3 — Tarjeta
 *
 * EL ENCAJE DE LA FOTO
 * La tarjeta es apaisada (3:2) y las fotos de producto son cuadradas:
 * a `cover` se pierde un tercio de la imagen, arriba y abajo. Por eso la
 * foto va completa (`contain`) y los laterales que sobran los rellena una
 * copia de la misma foto, ampliada, desenfocada y oscurecida — así el
 * relleno siempre pertenece a la imagen y nunca hay que inventar un color
 * que funcione con todos los productos.
 *
 * La URL sale del PHP como --fm-tdlanz-fondo, la única cosa que no puede
 * vivir en esta hoja porque cambia con cada producto.
 * ---------------------------------------------------------------------- */

.fm-tdlanz-card {
	position: relative;
	aspect-ratio: var(--fm-tdlanz-razon);
	overflow: hidden;
	background: var(--fm-td-superficie);
}

.fm-tdlanz-card__medio {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Relleno de los laterales. inset negativo + escala porque el desenfoque
   deja los bordes translúcidos: si la capa midiera justo la tarjeta se
   vería una orla clara en los cuatro cantos. */
.fm-tdlanz-card__medio::before {
	content: '';
	position: absolute;
	inset: -10%;
	background-image: var(--fm-tdlanz-fondo, none);
	background-size: cover;
	background-position: center;
	filter: blur(var(--fm-tdlanz-borron)) saturate(0.85) brightness(calc(1 - var(--fm-tdlanz-sombra)));
	transform: scale(1.08);
}

.fm-tdlanz-card__img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            filter var(--fm-td-transicion),
	            opacity var(--fm-td-transicion);
}

/* Variante de recorte, para fotos apaisadas. */
.fm-tdlanz--llenar .fm-tdlanz-card__img {
	object-fit: cover;
}

.fm-tdlanz--llenar .fm-tdlanz-card__medio::before {
	display: none;
}

/* Velo. Dos degradados en una sola capa: el de arriba sostiene la flecha,
   el de abajo el pie. En medio queda transparente para no ensuciar la
   foto. Sin él, sobre una imagen clara no se lee nada. */
.fm-tdlanz-card__velo {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgb(1 6 12 / 0.55) 0%,
		rgb(1 6 12 / 0) 26%,
		rgb(1 6 12 / 0) 52%,
		rgb(1 6 12 / 0.82) 100%
	);
	transition: opacity var(--fm-td-transicion);
}

.fm-tdlanz-card__capa {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--fm-tdlanz-aire);
}

.fm-tdlanz-card__fila {
	display: flex;
	align-items: flex-end;
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

.fm-tdlanz-card__fila--cabeza {
	justify-content: flex-end;
}

.fm-tdlanz-card__fila--pie {
	justify-content: space-between;
}

/* --- Iconos ------------------------------------------------------------ */

.fm-tdlanz-card__icono {
	display: block;
	width: var(--fm-td-icono);
	height: var(--fm-td-icono);
}

.fm-tdlanz-card__flecha {
	display: block;
	color: var(--fm-tdlanz-cuerpo);
	pointer-events: none;
	transition: color var(--fm-td-transicion), transform var(--fm-td-transicion);
}

/* --- Nombre ------------------------------------------------------------- */

.fm-tdlanz-card__nombre {
	max-width: 60%;
	margin: 0;
	color: var(--fm-tdlanz-cuerpo);
	font-family: var(--fm-td-fuente-titulo);
	font-size: clamp(0.7rem, 1.15vw, 0.85rem);
	font-weight: 300;
	letter-spacing: 0.18em;
	line-height: 1.6;
	text-transform: uppercase;
}

.fm-tdlanz-card__enlace {
	color: inherit;
	font: inherit;
	text-decoration: none;
	transition: color var(--fm-td-transicion);
}

/* Toda la tarjeta es el enlace. */
.fm-tdlanz-card__enlace::after {
	content: '';
	position: absolute;
	inset: 0;
}

.fm-tdlanz-card__enlace:focus-visible::after {
	outline: 2px solid var(--fm-td-oro);
	outline-offset: -4px;
}

/* --- Carrito + precio --------------------------------------------------- */

.fm-tdlanz-card__compra {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.2vw, 0.85rem);
	margin: 0;
	white-space: nowrap;
}

.fm-tdlanz-card__carrito {
	display: block;
	color: var(--fm-tdlanz-cuerpo);
	pointer-events: none;
	transition: color var(--fm-td-transicion);
}

.fm-tdlanz-card__precio {
	color: var(--fm-tdlanz-titulo);
	font-family: var(--fm-td-fuente-precio);
	font-size: clamp(0.95rem, 1.8vw, 1.25rem);
	font-weight: var(--fm-td-peso-precio);
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: none;
	transition: color var(--fm-td-transicion);
}

/* Los spans de Woo, neutralizados igual que en S2. */
.fm-tdlanz-card__precio .amount,
.fm-tdlanz-card__precio bdi,
.fm-tdlanz-card__precio ins {
	color: inherit;
	font: inherit;
	text-decoration: none;
	background: none;
}

/* En el mock "MXN" se compone más pequeño que la cifra. Woo no lo envuelve
   en nada, así que el span lo pone fm_tdlanz_precio(). */
.fm-tdlanz-card__moneda {
	font-size: 0.62em;
	font-weight: 400;
	letter-spacing: 0.1em;
}

.fm-tdlanz-card__precio del {
	margin-inline-end: 0.4em;
	opacity: 0.55;
	text-decoration: line-through;
}

/* Agotado. No está en el mock, pero hace falta: los productos sin stock
   siguen en el DOM a propósito. Mismo tratamiento que en S2. */
.fm-tdlanz-card__agotado {
	color: var(--fm-td-oro);
	font-size: clamp(0.62rem, 1.2vw, 0.75rem);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.fm-tdlanz-card--agotado .fm-tdlanz-card__img {
	filter: grayscale(1);
	opacity: 0.45;
}

/* -------------------------------------------------------------------------
 * S4.4 — Hover
 * ---------------------------------------------------------------------- */

@media (hover: hover) {

	.fm-tdlanz-card:hover .fm-tdlanz-card__img {
		transform: scale(1.04);
	}

	.fm-tdlanz-card:hover .fm-tdlanz-card__velo {
		opacity: 0.85;
	}

	.fm-tdlanz-card:hover .fm-tdlanz-card__flecha {
		color: var(--fm-td-oro);
		transform: translate(0.15em, -0.15em);
	}

	.fm-tdlanz-card:hover .fm-tdlanz-card__precio,
	.fm-tdlanz-card:hover .fm-tdlanz-card__carrito {
		color: var(--fm-td-oro);
	}
}

/* -------------------------------------------------------------------------
 * S4.5 — Controles
 *
 * No están en el mock. Los pongo porque un carril con la barra oculta no
 * da ninguna pista de posición ni forma de avanzar con el ratón.
 *
 * NO entran en la homologación de botones: son controles circulares de
 * navegación, no llamadas a la acción.
 *
 * Los :hover llevan el prefijo .fm-tdlanz para llegar a (0,2,1) y ganarle
 * al `button:hover { background-color: #C36 }` del reset de Hello
 * Elementor, que está en (0,1,1).
 * ---------------------------------------------------------------------- */

.fm-tdlanz__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	margin-block-start: clamp(1.5rem, 4vw, 2.75rem);
}

.fm-tdlanz__nav {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--fm-td-linea);
	border-radius: 50%;
	background: transparent;
	color: var(--fm-tdlanz-cuerpo);
	cursor: pointer;
	transition: color var(--fm-td-transicion),
	            border-color var(--fm-td-transicion),
	            opacity var(--fm-td-transicion);
}

.fm-tdlanz .fm-tdlanz__nav:hover,
.fm-tdlanz .fm-tdlanz__nav:focus {
	background: transparent;
	border-color: var(--fm-td-oro);
	color: var(--fm-td-oro);
}

.fm-tdlanz .fm-tdlanz__nav:focus-visible {
	outline: 2px solid var(--fm-td-oro);
	outline-offset: 3px;
}

.fm-tdlanz .fm-tdlanz__nav[disabled] {
	border-color: var(--fm-td-linea);
	color: var(--fm-tdlanz-cuerpo);
	cursor: default;
	opacity: 0.3;
}

.fm-tdlanz__chevron {
	display: block;
	width: 0.9rem;
	height: 0.9rem;
	overflow: visible;
}

.fm-tdlanz__puntos {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* El botón mide 1.75rem para dar superficie al dedo; el punto visible es
   el ::before. */
.fm-tdlanz__punto {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.fm-tdlanz__punto::before {
	content: '';
	display: block;
	width: 0.45rem;
	height: 0.45rem;
	border: 1px solid var(--fm-td-linea);
	border-radius: 50%;
	background: transparent;
	transition: background-color var(--fm-td-transicion),
	            border-color var(--fm-td-transicion),
	            transform var(--fm-td-transicion);
}

.fm-tdlanz .fm-tdlanz__punto:hover,
.fm-tdlanz .fm-tdlanz__punto:focus {
	background: transparent;
}

.fm-tdlanz .fm-tdlanz__punto:hover::before {
	border-color: var(--fm-td-oro);
}

.fm-tdlanz .fm-tdlanz__punto.is-activo::before {
	border-color: var(--fm-td-oro);
	background: var(--fm-td-oro);
	transform: scale(1.15);
}

.fm-tdlanz .fm-tdlanz__punto:focus-visible {
	outline: 2px solid var(--fm-td-oro);
	outline-offset: 0;
}

/* Un solo producto: no hay carrusel. Lo marca el JS. */
.fm-tdlanz--unico .fm-tdlanz__rail {
	overflow-x: hidden;
}

/* -------------------------------------------------------------------------
 * S4.6 — Responsive
 *
 * Solo se mueve --fm-tdlanz-fr (cuánto de la ventana ocupa la tarjeta) y
 * la razón de aspecto. Todo lo demás se recalcula solo.
 * ---------------------------------------------------------------------- */

@media (max-width: 1199px) {

	.fm-tdlanz {
		--fm-tdlanz-fr: 0.74;
		--fm-tdlanz-gap: clamp(1rem, 4vw, 3rem);
	}

	.fm-tdlanz-card__nombre {
		max-width: 55%;
		font-size: clamp(0.68rem, 1.5vw, 0.8rem);
		letter-spacing: 0.15em;
	}
}

@media (max-width: 991px) {

	.fm-tdlanz {
		--fm-tdlanz-fr: 0.78;
		--fm-tdlanz-gap: clamp(0.9rem, 3.2vw, 2rem);
		--fm-tdlanz-aire: clamp(1.05rem, 3vw, 1.6rem);
	}

	.fm-tdlanz__titulo {
		font-size: clamp(1.15rem, 2.8vw, 1.5rem);
	}

	.fm-tdlanz__bajada {
		max-width: 38em;
		font-size: clamp(0.76rem, 1.9vw, 0.9rem);
	}
}

@media (max-width: 767px) {

	.fm-tdlanz {
		--fm-tdlanz-fr: 0.84;
		--fm-tdlanz-razon: 4 / 3;
		--fm-tdlanz-gap: 0.9rem;
		--fm-tdlanz-aire: clamp(1rem, 4vw, 1.35rem);
	}

	.fm-tdlanz__cabeza {
		margin-block-end: clamp(1.75rem, 7vw, 2.5rem);
	}

	.fm-tdlanz-card__nombre {
		max-width: 52%;
		line-height: 1.5;
	}
}

@media (max-width: 560px) {

	.fm-tdlanz {
		--fm-tdlanz-fr: 0.88;
		--fm-tdlanz-razon: 1 / 1;
		--fm-tdlanz-gap: 0.75rem;
		--fm-tdlanz-aire: 1.15rem;
	}

	/* Nombre en línea propia: a este ancho, con 0.18em de tracking, junto
	   al precio se parte en tres líneas. */
	.fm-tdlanz-card__fila--pie {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.65rem;
	}

	.fm-tdlanz-card__nombre {
		max-width: 100%;
		font-size: 0.72rem;
		letter-spacing: 0.14em;
	}

	.fm-tdlanz-card__precio {
		font-size: 1.05rem;
	}

	.fm-tdlanz__nav {
		width: 2.5rem;
		height: 2.5rem;
	}
}

@media (max-width: 400px) {

	.fm-tdlanz {
		--fm-tdlanz-fr: 0.90;
		--fm-tdlanz-aire: 1rem;
	}

	.fm-tdlanz__titulo {
		font-size: 1rem;
		letter-spacing: 0.14em;
	}

	.fm-tdlanz__bajada {
		font-size: 0.72rem;
		line-height: 1.75;
	}

	.fm-tdlanz-card__nombre {
		font-size: 0.68rem;
		letter-spacing: 0.12em;
	}

	.fm-tdlanz-card__precio {
		font-size: 0.95rem;
	}
}

/* -------------------------------------------------------------------------
 * S4.7 — Movimiento reducido
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.fm-tdlanz-card__img,
	.fm-tdlanz-card__velo,
	.fm-tdlanz-card__flecha,
	.fm-tdlanz-card__nombre,
	.fm-tdlanz-card__carrito,
	.fm-tdlanz-card__precio,
	.fm-tdlanz__nav,
	.fm-tdlanz__punto::before {
		transition: none;
	}

	.fm-tdlanz-card:hover .fm-tdlanz-card__img,
	.fm-tdlanz-card:hover .fm-tdlanz-card__flecha {
		transform: none;
	}

	.fm-tdlanz__rail {
		scroll-behavior: auto;
	}
}