/* ==========================================================================
   PERFUMASTE — PIEZA "PORTADA"
   El lenguaje ACTO aplicado a las tres vistas de navegacion: portada,
   categorias y directorio de marcas. Carga despues de principal.css.

   ⚠️ ESTE ARCHIVO NO USA `@layer`, IGUAL QUE legales.css.

   `principal.css` mete casi todo en `@layer components` y `@layer views`, y una
   regla SIN capa le gana a cualquier regla CON capa por poca especificidad que
   tenga. Es justo lo que hace falta aqui: refinar `.card`, `.sec__cab` o
   `.cat__t` sin subir la especificidad a base de `!important` ni de cadenas de
   selectores que despues nadie sabe por que estan.

   La contrapartida es que el orden de carga manda, y lo garantiza
   `inc/assets.php`: `pfp-portada` declara `pfp-principal` como dependencia.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LA PALETA
   --------------------------------------------------------------------------
   ⚠️ SOLO SE ANADEN LOS TOKENS QUE NO EXISTIAN.

   ACTO define siete colores y dos de ellos —`--tinta` y `--humo`— YA existen en
   critico.css con otro valor: #1C1714 frente a #241F1B, y #6F6862 frente a
   #867E73. Redefinirlos en `:root` desde este archivo recolorearia la tienda
   ENTERA (cabecera, pie, ficha, carrito, checkout) desde una hoja que solo
   deberia mandar en portada, categorias y marcas.

   La diferencia es de un par de puntos de luminancia y los del tema son un poco
   mas oscuros, o sea mas legibles, asi que aqui manda el tema. Si algun dia la
   paleta ACTO pasa a ser la del sitio, ese cambio va en critico.css —que es de
   otro frente— y estos cinco tokens se quedan como estan.

   Los cinco que se anaden son nombres nuevos: no pueden pisar nada. */
:root {
  --hueso:  #F2EFE9;   /* fondo de las superficies ACTO */
  --piedra: #E7E2D8;   /* fondo de cabecera de tabla */
  --placa:  #FBFAF7;   /* la plancha: lo que se levanta del papel */
  --linea:  #DDD6C9;   /* el filete de 1px, mas calido que --hilo */
  --plata:  #B9B6B0;   /* el trazo hueco de los numerales */
}

/* --------------------------------------------------------------------------
   2. PRIMITIVAS
   -------------------------------------------------------------------------- */

/* La etiqueta de dato. Es la voz que separa ACTO de cualquier otra tienda: los
   datos NO hablan en la tipografia del texto, hablan en Martian a 9,5 px con
   `.2em` de tracking. El tracking es lo que hace legible una mayuscula pequena;
   sin el, esto se lee como una errata. */
.nv-k {
  display: block;
  font-family: var(--dato);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--humo);
}

/* El titular XXL.

   ⚠️ EL AIRE DE REVISTA SALE DEL TRACKING, NO DE OTRA TIPOGRAFIA. Schibsted a
   cuerpo grande con `letter-spacing:-.04em` da el registro editorial aprobado.
   El 2026-08-08 se probo Fraunces (opsz 144) en todos los titulares y el dueno
   lo rechazo: "volvamos al modo revista que teniamos". Este es el aprobado. */
.nv-t {
  font-family: var(--texto);
  /* ⚠️ Hay que apagar los ejes de Fraunces a mano: `.sec__t` y `.cat__t` los
     traen puestos desde principal.css y, si se hereda `'SOFT' 40, 'WONK' 1`
     sobre Schibsted, el navegador intenta aplicar ejes que esta fuente no
     tiene y sintetiza formas raras. */
  font-variation-settings: normal;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .95;
  text-wrap: balance;   /* sin esto, la ultima linea se queda con una palabra */
}

/* El ancla de un bloque al que se salta desde otro sitio.
   ⚠️ `--cabecera` es la altura REAL de la cabecera pegajosa (principal.css). Sin
   esto, al saltar el titulo queda tapado por la cabecera. */
.ancla { scroll-margin-top: calc(var(--cabecera) + var(--s5)); }

/* --------------------------------------------------------------------------
   3. LA OBERTURA DE LA PORTADA
   -------------------------------------------------------------------------- */

.ober { padding-block: clamp(28px, 5vw, 68px) clamp(24px, 4vw, 44px); }

.ober__in { display: grid; gap: clamp(15px, 2.2vw, 21px); }

.ober__t { font-size: clamp(2.5rem, 7.6vw, 5.6rem); }

/* La medida obliga a dos lineas en escritorio, y eso es deliberado: un titular
   de una sola linea larguisima se lee como un eslogan de banner; partido en dos
   se lee como la apertura de un articulo. */
@media (min-width: 900px) { .ober__t { max-width: 15ch; } }

/* La bajada vive DENTRO del `h1` para que el ancla y el lector de pantalla
   reciban la promesa completa, no solo el gancho. */
.ober__t em {
  display: block;
  margin-top: .55em;
  max-width: 54ch;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(.95rem, 1.5vw, 1.06rem);
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--humo);
  text-wrap: pretty;
}

.ober__val {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: .9rem; color: var(--humo);
}
/* Cifras monoespaciadas: una nota media es un dato, y los datos van en Martian. */
.ober__val b { font-family: var(--dato); font-weight: 600; color: var(--tinta); }

.ober__cta { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.ober__mas {
  font-size: .9rem; color: var(--humo); text-decoration: none;
  border-bottom: 1px solid var(--linea); padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.ober__mas:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

/* Los apoyos, separados por filetes verticales — el recurso de la revista, no
   tres tarjetas con icono. */
.ober__ap {
  list-style: none; display: flex; flex-wrap: wrap;
  margin-top: var(--s3); padding-top: var(--s4);
  border-top: 1px solid var(--linea);
}
.ober__ap li {
  padding: 2px 16px;
  font-family: var(--dato); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--humo);
}
.ober__ap li:first-child { padding-left: 0; }
.ober__ap li + li { border-left: 1px solid var(--linea); }

/* ⚠️ EN MOVIL LOS FILETES SE QUITAN, NO SE ENCOGEN. Tres etiquetas mono con
   `.16em` de tracking no caben en una fila de 390 px: se partian por dentro y
   el filete quedaba a media palabra. */
@media (max-width: 559px) {
  .ober__ap { flex-direction: column; gap: 7px; }
  .ober__ap li { padding: 0; }
  .ober__ap li + li { border-left: 0; }
}

/* --------------------------------------------------------------------------
   4. LAS SECCIONES DE LA PORTADA
   --------------------------------------------------------------------------
   ⚠️ AQUI HUBO NUMERALES ROMANOS (I, II, III) EN TRAZO HUECO Y EL DUENO LOS
   QUITO (2026-08-08): "esos numerales en numeros romanos no me gustan". Los
   pintaba un contador CSS (`counter(acto, upper-roman)`) en un `::before` de
   esta cabecera. No volver a numerarlas sin que lo pida. */
body.home .sec__cab {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--s2) clamp(14px, 2.6vw, 26px);
  padding-bottom: var(--s4);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--linea);
}

body.home .sec__t {
  flex: 1 1 14ch;
  font-family: var(--texto);
  font-variation-settings: normal;
  font-weight: 700;
  font-size: clamp(1.45rem, 3.4vw, 2.4rem);
  letter-spacing: -.04em;
  line-height: 1.02;
  text-wrap: balance;
}

body.home .sec__v { margin-left: auto; border-bottom-color: var(--linea); }

/* --------------------------------------------------------------------------
   5. LA CABECERA EDITORIAL (categorias y directorio de marcas)
   --------------------------------------------------------------------------
   ⚠️ TODO CUELGA DEL MODIFICADOR `--acto`, NUNCA DE `.cat__cab` PELADO.

   `.cat__cab` y `.cat__t` los usan ademas el carrito, el carrito vacio, Mi
   Cuenta, el formulario de acceso, los legales, /novedades/ y
   /perfumes-arabes/, que no son mias. Restilar el nombre pelado convertiria
   "Tu carrito está vacío" en un titular XXL de portada. */
.cat__cab--acto {
  display: block;
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--s6);
}
.cat__cab--acto .nv-k { margin-bottom: var(--s3); }

.cat__t--acto {
  font-family: var(--texto);
  font-variation-settings: normal;
  font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 4.1rem);
  letter-spacing: -.04em;
  line-height: .96;
  max-width: 17ch;
  text-wrap: balance;
  /* ⚠️ Los nombres de marca largos y sin espacios ("Maison Alhambra" pasa, pero
     hay categorias con una sola palabra de 20 letras) desbordaban a 390 px con
     el cuerpo XXL. */
  overflow-wrap: break-word;
}

.cat__ent { margin-top: var(--s4); max-width: 54ch; color: var(--humo); }

/* El conteo real, debajo y sobre su propio filete: es el dato que sostiene el
   titular, no un subtitulo. */
.cat__cab--acto .cat__n {
  display: block;
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--linea);
  font-size: 9.5px;
  letter-spacing: .2em;
}

/* Las facetas y el orden ya vienen de inc/catalogo.php; aqui solo se cambia el
   color del filete para que toda la pagina use el mismo. */
.cat--acto .cat__facetas,
.cat--acto .cat__orden { border-bottom-color: var(--linea); }

/* --------------------------------------------------------------------------
   6. EL DIRECTORIO DE MARCAS
   --------------------------------------------------------------------------
   ⚠️ Este bloque de principal.css (`.abc`, `.marcas`, `.casa`) va SIN capa, asi
   que aqui no basta con cargar despues: hace falta ganar por especificidad. De
   ahi que todo lleve delante `.marcas--acto`, que ademas lo mantiene fuera de
   la banda de casas de la portada, que usa `.casa` para otra cosa. */
.marcas--acto .abc { border-bottom-color: var(--linea); }
.marcas--acto .abc a {
  border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  letter-spacing: .2em; font-size: 10px; padding: 4px 7px;
}
.marcas--acto .abc a:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

/* La inicial, con el mismo trazo hueco que los numerales de acto: el indice
   rima con la portada en vez de parecer otra pagina. */
.marcas--acto .abc__t {
  display: flex; align-items: baseline; gap: var(--s3);
  font-family: var(--texto); font-variation-settings: normal;
  font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  letter-spacing: -.04em; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--plata);
  border-bottom-color: var(--linea);
}
/* ⚠️ El trazo y el color transparente SE HEREDAN. Sin apagarlos aqui, el conteo
   salia tambien hueco y a 9 px eso no se lee: era una mancha gris. */
.marcas--acto .abc__t i {
  font-family: var(--dato); font-style: normal;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--humo);
  -webkit-text-stroke: 0;
}

/* ⚠️ EL DIRECTORIO ES UN ARCHIVO INTERACTIVO (tercera iteracion del dueno,
   2026-08-08: primero rechazo las celdas, luego el flujo suelto — "algo mas
   organizado y moderno y tambien interactivo"). La forma final:

     · filas de indice de libro — nombre, linea de puntos, conteo — en dos
       columnas: el ORDEN que pedia;
     · un buscador que filtra en vivo (guion en page-marcas.php);
     · un panel pegajoso donde al pasar el cursor por una casa aparece su
       frasco mas resenado — los recortes de `_pfp_frasco` trabajando aqui
       tambien. En tactil el panel no existe y las filas mandan solas. */
.archivo__busca { margin-top: var(--s5); }
.archivo__busca input {
  width: min(100%, 30em);
  height: 46px;
  padding: 0 var(--s4);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  font-size: .95rem;
}
.archivo__busca input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.archivo { display: grid; grid-template-columns: 1fr; gap: var(--s7); align-items: start; }
@media (min-width: 1000px) { .archivo { grid-template-columns: 1fr 320px; } }

/* Las filas: indice de libro. La linea de puntos une nombre y conteo — es la
   que convierte una lista en una tabla sin dibujar una tabla. */
.marcas--acto .marcas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--s7);
  padding-block: var(--s2) var(--s4);
}
@media (min-width: 700px) { .marcas--acto .marcas { grid-template-columns: 1fr 1fr; } }

.marcas--acto .marcas .casa {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 9px 0;
  text-decoration: none;
}
.marcas--acto .marcas .casa::after {
  content: "";
  flex: 1;
  order: 1;
  border-bottom: 1px dotted var(--plata);
  transform: translateY(-4px);
}

.marcas--acto .casa__n {
  font-weight: 600;
  font-size: clamp(15.5px, 1.6vw, 18px);
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--tinta);
  transition: color .15s ease;
}
.marcas--acto .casa__c {
  order: 2;
  font-family: var(--dato);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--humo);
  font-variant-numeric: tabular-nums;
}
.marcas--acto .marcas .casa:hover .casa__n { color: var(--laca); }

/* El panel de vista: la placa del sistema, pegajosa bajo la cabecera. */
.archivo__vista { display: none; }
@media (min-width: 1000px) and (hover: hover) {
  .archivo__vista { display: block; position: sticky; top: calc(var(--cabecera, 92px) + var(--s5)); }
}
.archivo__placa {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: var(--s6) var(--s5);
  display: grid;
  justify-items: center;
  gap: var(--s4);
  text-align: center;
}
.archivo__frasco {
  height: 300px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: opacity .25s ease;
  filter: drop-shadow(0 22px 20px rgba(43, 38, 34, .2));
}
.archivo__frasco[src=""] { visibility: hidden; }
.archivo__quien { display: grid; gap: 4px; }
.archivo__quien b { font-weight: 700; letter-spacing: -.02em; font-size: 1.05rem; }
.archivo__quien span {
  font-family: var(--dato); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--humo);
}

/* --------------------------------------------------------------------------
   7. LA TARJETA DE PRODUCTO
   --------------------------------------------------------------------------
   ⚠️ CAMBIO CONSERVADOR, Y EL MODIFICADOR ES LA RED DE SEGURIDAD.

   Esta tarjeta la pintan siete vistas (portada, categorias, /novedades/,
   /perfumes-arabes/, relacionados de la ficha, carrito vacio y cruzados del
   carrito). El modificador `card--acto` lo pone `content-product.php`, que es
   la unica plantilla del tema que la emite: si un plugin escribe un `.card`
   propio, nada de esto le llega.

   No se toca ni la estructura ni el tamano: solo la piel. La rejilla, el
   `aspect-ratio` de la foto y el orden de la informacion se quedan como
   estaban, que es lo unico que podria romper siete vistas a la vez. */

/* ⚠️ LA PLANCHA DE LA FOTO ES BLANCO PURO, POR ORDEN DEL DUENO (2026-08-08).
   Antes iba en `--placa` (hueso calido) con la teoria de que el blanco puro se
   leia "como un recorte pegado" sobre el papel. En la practica paso lo
   contrario: las fotos del catalogo traen fondo BLANCO PURO, y sobre la placa
   hueso cada foto se veia como un rectangulo cortado dentro de la tarjeta
   ("el fondo de los productos se ve cortado"). La plancha iguala el fondo de
   la foto: blanco con blanco, sin costura. */
.card--acto .card__media { background: var(--blanco); border-color: var(--linea); }
.card--acto:hover .card__media { border-color: var(--plata); }

/* ⚠️ EL TEXTO DE LA TARJETA CASI NO USA LA MONO, POR ORDEN DEL DUENO
   (2026-08-08): "lo veo muy robotico... no se entiende bien el concepto del
   producto". Antes marca, ficha, precio y ahorro iban TODOS en Martian
   versalitas: cuatro voces de dato y ninguna de producto, la tarjeta se leia
   como un recibo. La mono es la voz de las ETIQUETAS del sitio, no la de la
   venta: aqui se queda solo en la linea de ficha, diminuta y en gris.

   La jerarquia nueva, en orden de lectura:
     1. la marca, breve y firme (sans, no mono);
     2. el NOMBRE, que es el concepto del producto — sube de peso;
     3. la ficha tecnica, que acompana sin competir (lo unico mono que queda);
     4. el PRECIO en la voz del texto, grande — es la segunda decision;
     5. el ahorro como frase en granate, no como sello en mayusculas. */
.card--acto .card__marca {
  font-family: var(--texto); font-weight: 700;
  font-size: 10px; letter-spacing: .17em;
}

.card--acto .card__nom { font-weight: 700; letter-spacing: -.022em; font-size: 1.06rem; }

.card--acto .card__ml {
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--humo) 78%, var(--papel));
}

/* El precio se separa con el filete y habla en Schibsted: los digitos ya no se
   alinean en columna como en la mono, pero se ENTIENDEN a la primera, que es lo
   que pidio el dueno. */
.card--acto .card__precio {
  padding-top: var(--s3);
  border-top: 1px solid var(--linea);
}
.card--acto .card__ahora {
  font-family: var(--texto); font-weight: 700;
  font-size: 1.18rem; letter-spacing: -.025em;
}
.card--acto .card__antes { font-size: .78rem; }
.card--acto .card__ahorro {
  font-family: var(--texto); font-weight: 600;
  font-size: .8rem; letter-spacing: 0; text-transform: none;
}

/* ==========================================================================
   LA CUBIERTA — la primera pantalla de la portada

   Un perfume, su nombre y el frasco delante de las letras. El dueno la pidio
   de vuelta expresamente (2026-08-08): "dejame la portada de revista en la
   home". Todo lo demas esta callado a proposito: la unica licencia es el
   solape, y una licencia repetida deja de serlo.

   ⚠️ EN SCHIBSTED, NO EN SERIF. La variante Fraunces se probo y se rechazo el
   mismo dia; el nombre va en la grotesca del tema con tracking apretado.

   ⚠️ EL SOLAPE SE MIDE EN `em` DEL PROPIO TITULAR, no en pixeles: el nombre va
   con `clamp()`, y un desplazamiento fijo tapaba de mas en el movil y de menos
   en escritorio. Con `--fs-cub` compartido, el frasco muerde siempre la misma
   proporcion de la letra.
   ========================================================================== */

.cub {
  --fs-cub: clamp(52px, 12.4vw, 172px);
  padding: clamp(14px, 2vw, 26px) 0 clamp(30px, 5vw, 56px);
}
.cub__in { display: flex; flex-direction: column; }

/* el filete de cabecera: a la izquierda la edicion, a la derecha la prueba */
.cub__flag {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--dato); font-size: var(--fs-dato);
  letter-spacing: .24em; text-transform: uppercase; color: var(--humo);
  padding-bottom: 11px; border-bottom: 1px solid var(--hilo);
}

/* la escena */
.cub__esc { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }

.cub__marca {
  font-family: var(--dato); font-size: var(--fs-dato);
  letter-spacing: .3em; text-transform: uppercase; color: var(--humo);
  margin: clamp(22px, 4vw, 44px) 0 clamp(8px, 1.4vw, 14px);
}

.cub__nom {
  font-size: var(--fs-cub); font-weight: 700;
  letter-spacing: -.055em; line-height: .84;
  text-wrap: balance; max-width: 14ch;
}

/* ⚠️ EL FRASCO MUERDE EL PIE DE LAS LETRAS, NO SU CENTRO: la mitad de arriba
   de una palabra es la que deja reconocerla. Se ata por ALTURA y no por ancho:
   un frasco esbelto atado por ancho crecia hasta 477 px y empujaba el boton
   224 px bajo el pliegue (medido). */
.cub__f {
  position: relative; z-index: 1;
  height: min(42svh, 520px); width: auto; max-width: 62vw;
  margin-top: calc(var(--fs-cub) * -.3);
  filter: drop-shadow(0 40px 38px rgba(43, 38, 34, .28));
}
.cub__suelo {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: min(40vw, 280px); height: 22px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 38, 34, .22), transparent 72%);
  filter: blur(8px);
}

/* el pie */
.cub__pie { text-align: center; margin-top: clamp(22px, 3.4vw, 38px); }

.cub__k {
  font-family: var(--dato); font-size: var(--fs-dato);
  letter-spacing: .22em; text-transform: uppercase; color: var(--fam, var(--humo));
}
.cub__baj {
  font-size: clamp(17px, 2.5vw, 26px); line-height: 1.35; color: var(--tinta);
  max-width: 24ch; margin: 10px auto 0; text-wrap: balance;
}

.cub__cta {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(14px, 2.4vw, 28px); flex-wrap: wrap;
  margin-top: clamp(20px, 3vw, 30px);
}
.cub__mas { color: var(--humo); text-underline-offset: 5px; }
.cub__mas:hover { color: var(--tinta); }

/* la promesa, reducida a tres hechos */
.cub__ap {
  display: flex; justify-content: center; flex-wrap: wrap;
  font-family: var(--dato); font-size: var(--fs-dato);
  letter-spacing: .13em; text-transform: uppercase; color: var(--humo);
  margin-top: clamp(22px, 3.4vw, 34px);
}
.cub__ap > * { padding: 3px 15px; }
.cub__ap > * + * { border-left: 1px solid var(--hilo); }
.cub__ap a { color: var(--fam, var(--laca)); text-underline-offset: 4px; }

@media (max-width: 559px) {
  .cub__ap { flex-direction: column; gap: 7px; }
  .cub__ap > * + * { border-left: 0; }
}

/* ⚠️ EN PANTALLAS BAJAS EL FRASCO Y EL TITULAR CEDEN, NO EL BOTON. Encima de
   la cubierta hay 290 px fijos de cabeceras; en un portatil de 820 o un movil
   corto, el conjunto a tamano completo empujaba «Ver este perfume» bajo el
   pliegue (medido: 90 px). Se mide por ALTURA de ventana: el problema es de
   alto, no de ancho. */
@media (max-height: 900px) {
  .cub { --fs-cub: clamp(48px, 10.5vw, 148px); }
  .cub__f { height: min(32svh, 380px); }
  .cub__marca { margin-top: clamp(12px, 2vw, 26px); }
  .cub__pie { margin-top: clamp(16px, 2.4vw, 26px); }
}

/* --------------------------------------------------------------------------
   8. EL DESFILE DE CASAS

   Los nombres de las marcas desfilando en cuerpo XXL — la marquesina
   tipografica que en 2026 usan los sitios de referencia para su "logo cloud",
   hecha con letras porque logotipos no hay (y dibujarlos seria falsificarlos).
   Todo es CSS: cero JavaScript, cero imagenes.

   ⚠️ EL -50% DEL BUCLE EXIGE DOS COSAS EXACTAS: el contenido duplicado (lo
   pone PHP) y el hueco UNIFORME. Por eso `--paso` es un valor fijo y no un
   clamp(): con hueco fluido, la mitad de la pista no mide exactamente la
   mitad y el empalme salta. El desfase de medio hueco se compensa en el
   propio keyframe.
   -------------------------------------------------------------------------- */
.desfile {
  --paso: 56px;
  overflow: hidden;
  padding-block: clamp(6px, 1vw, 14px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.desfile__pista {
  display: flex;
  align-items: baseline;
  gap: var(--paso);
  width: max-content;
  animation: pfp-desfile 48s linear infinite;
}
@keyframes pfp-desfile {
  to { transform: translateX(calc(-50% - var(--paso) / 2)); }
}

/* La pausa: al cursor y al foco del teclado. Un enlace que se mueve mientras
   intentas leerlo o pulsarlo no es un enlace, es una diana. */
.desfile:hover .desfile__pista,
.desfile:focus-within .desfile__pista { animation-play-state: paused; }

.desfile__casa {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -.04em;
  font-size: clamp(26px, 3.6vw, 44px);
  color: var(--tinta);
  transition: color .2s ease;
}
.desfile__casa:hover { color: var(--laca); }

/* El conteo como voladita de dato: dice cuanto hay sin gritar "PERFUMES"
   diez veces — esa palabra repetida era la mitad del ruido de las cajitas. */
.desfile__casa sup {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--humo);
  transform: translateY(-.9em);
  transition: color .2s ease;
}
.desfile__casa:hover sup { color: var(--laca); }

/* Con movimiento reducido no hay desfile: indice quieto, centrado y sin la
   copia (que solo existe para el empalme del bucle). */
@media (prefers-reduced-motion: reduce) {
  .desfile { -webkit-mask-image: none; mask-image: none; }
  .desfile__pista {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s3) var(--s6);
  }
  .desfile__casa--copia { display: none; }
}