/* =============================================================================
 * La etiqueta «New Arrivals» de la tarjeta (22-sep-2026)
 *
 * Se carga en todo el sitio desde el 23-sep: la etiqueta sigue al producto y
 * sale en cualquier rejilla o carrusel — ver `novedades-vitrina.php`.
 *
 * 🔴 **NADA DE MAYÚSCULAS NI DE ESPACIADO POSITIVO.** Es la regla 1 de
 * `tokens.css`. Una etiqueta pequeña es justo donde más tienta saltársela, y por
 * eso queda dicho aquí.
 *
 * Todos los valores salen de tokens. `--fs-2xs` no es una elección de gusto: su
 * propio comentario en `tokens.css` dice «micro: etiqueta de descuento,
 * contadores», que es exactamente este trabajo.
 * ========================================================================== */

/* ⚠️ **LA FILA DEL ENCABEZADO YA NO ESTÁ AQUÍ.** Vivió en este archivo mientras
   la marca con logotipo era una prueba; el 23-sep se aprobó para toda la tienda
   y se mudó a `themes/excellent-child/assets/css/producto-grid.css`, que es
   donde vive la tarjeta de TODAS las pantallas. Aquí solo queda la etiqueta. */

/* ==== La etiqueta ====
   🔑 **NEGRA Y MACIZA, NO ROJA.** Sebas pidió que destaque —«son productos
   nuevos, debe destacar ese cuadro»— y el salto de un filete gris a un bloque
   sólido es todo lo que hace falta: en una rejilla clara, lo único oscuro es lo
   primero que ve el ojo.

   ⚠️ **El rojo estaba descartado de antemano**: en esta tienda ya significa
   rebaja —`--c-sale` pinta el precio de oferta en esta misma tarjeta—, y una
   novedad no es una rebaja. Dos cosas distintas del mismo color se leen como la
   misma.

   Contraste: #ffffff sobre #141414 son 16,9:1. */
.product-card__novedad {
	display: inline-block;
	flex: 0 0 auto; /* no se encoge: se encoge la marca */

	/*
	 * 🔴 **EL RELLENO ES ASIMÉTRICO A PROPÓSITO. NO LO «ARREGLES».**
	 *
	 * Con `0.2em` arriba y abajo —simétrico— el texto NO queda centrado: medido
	 * en producción daba **3,00px de hueco arriba y 4,01 abajo**. Sebas lo vio
	 * antes de que nadie lo midiera.
	 *
	 * La culpa no es del relleno, es de la fuente: reserva sitio bajo la línea
	 * base para las colas de la g, la p y la y, y «New Arrivals» no tiene
	 * ninguna. Ese hueco queda vacío abajo y empuja la palabra hacia arriba.
	 * Es óptico, no aritmético, y por eso un relleno igual por los dos lados da
	 * un resultado desigual.
	 *
	 * Se compensa medio píxel: un pelo más arriba, un pelo menos abajo. Va en
	 * `em` para que la corrección escale con la letra si algún día cambia.
	 */
	padding: 0.245em 0.45em 0.155em;

	border-radius: 2px;
	background: var(--c-ink);

	font-family: var(--font-body);

	/* 🔑 **11px, DERIVADO DEL TOKEN Y NO ESCRITO A MANO.** Sebas lo pidió más
	   pequeño que el peldaño más bajo de la escala (`--fs-2xs`, 13px), que es el
	   que usa la etiqueta de descuento. Se saca de él con un `calc` para que siga
	   a la escala si algún día cambia: un 11 suelto se quedaría quieto mientras
	   todo lo demás se mueve, y nadie sabría de dónde salió.

	   Va en 600 a propósito: al encoger el texto, el peso es lo que evita que el
	   bloque negro se lea como una mancha en vez de como una palabra. */
	font-size: calc(var(--fs-2xs) * 0.85); /* ~11px */
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--c-ink-inv);

	white-space: nowrap;
}

/* ==== Sin destello (25-sep-2026) ====
   🔴 **LA ETIQUETA YA NO LLEVA BRILLO.** Del 22 al 24-sep un reflejo blanco la
   cruzaba cada 4 s (un `::after` animado con `transform`). Sebas pidió quitarlo:
   «tiene como un sombreado o resplandor que resalta ese cuadro». No se
   sustituye por nada: la etiqueta negra ya destaca sola en una rejilla clara,
   que es lo que se razona arriba. Si algún día se quiere de vuelta, está en el
   historial del repo antes del 25-sep. */

/* ⚠️ El enlace que cubre la tarjeta entera (`.product-card__link`) va por encima
   de todo. La etiqueta no es pulsable ni quiere serlo: esto solo evita que el
   cursor cambie a mano sobre ella y prometa un clic que no hace nada. */
.product-card__novedad { pointer-events: none; }

/* 🔴 En alto contraste el sistema reescribe los colores y un fondo se pierde:
   la etiqueta quedaría como texto suelto al lado de la marca, sin nada que la
   separe. El borde se pinta siempre y ahí es lo único que la delimita. */
.product-card__novedad { border: var(--hairline) solid var(--c-ink); }

@media ( forced-colors: active ) {
	.product-card__novedad {
		border-color: currentColor;
	}
}