/* ═══════════════════════════════════════════════════════════════════
   PULPA — PIEL "ARCHIVO"  ·  2026-08-08
   ───────────────────────────────────────────────────────────────────
   Se carga ENCIMA de pulpa_sitio.css y pulpa_dpp.css, solo cuando el
   interruptor está en ?estilo=archivo. No reemplaza nada: reviste el
   mismo HTML. Si esta hoja no carga, el sitio vuelve a ser el de
   siempre sin que falte una coma.

   La gramática, sacada de mirar Leica y ATB con lupa:

   1. El marco es oscuro y angosto; el objeto vive en claro. El negro
      que se percibe lo ponen las FOTOS, no la interfaz.
   2. El acento naranja es del tamaño de una moneda. Nunca un bloque
      relleno en el marco. El único bloque de color de la página es la
      acción real (consultar / registrarse).
   3. Nada de cajas: sin bordes, sin sombras, sin esquinas redondeadas.
      La foto ES la tarjeta. Lo que separa es el aire.
   4. Dos fuentes: Archivo 400 EN MAYÚSCULAS con aire entre letras para
      titulares; Funnel Sans 300 para absolutamente todo lo demás. La
      fuerza no la da el peso, la da la caja alta y el tamaño.
   5. Las fotos no se recortan: van completas en 4:5 (el formato de IG)
      y las franjas se pintan con el color de fondo de la propia foto.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ar-ink:    #191919;   /* el marco */
  --ar-ink-2:  #232323;
  --ar-papel:  #FFFFFF;   /* donde vive el objeto */
  --ar-papel-2:#F4F1EB;   /* planos de fondo, cálidos */
  --ar-texto:  #1a1a1a;
  --ar-texto-2:#6f6a63;   /* etiquetas y metadatos */
  /* EL ACENTO ES EL ROJO DEL LOGO, muestreado del PNG de la marca:
     #C13438 es el color exacto de la espiral. Antes era un naranja
     (#E96B21) que no existía en ningún otro lado del sistema, así que
     el sitio y el logo hablaban de dos colores distintos. */
  --ar-naranja:#C13438;   /* el acento oficial de marca */
  --ar-naranja-2:#A02A2E; /* el mismo, más oscuro, para el hover */
  --ar-linea:  #e3ded4;
}

/* ── Tipografía: el par de ATB ──────────────────────────────────── */

body,
body.home-carter,
.sans,
.dpp-body,
input, textarea, select, button {
  font-family: 'Funnel Sans', "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 300;
  letter-spacing: normal;
}

body { background: var(--ar-papel); color: var(--ar-texto); line-height: 1.5; }

/* Titulares: Archivo 400, caja alta, con aire. Siempre. */
h1, h2, h3, h4,
.dpp-info h1, .dpp-titulo,
.home-seccion-titulo, .home-seccion-head h2,
.dpp-seccion-titulo, .dpp-h2, .dpp-sub {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ar-texto);
}
h1, .dpp-info h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.18; }
h2 { font-size: clamp(22px, 2.6vw, 26px); line-height: 1.3; }
h3 { font-size: 18px; line-height: 1.35; }

/* Nada de itálicas serif decorativas heredadas del diseño viejo */
em, i, .dpp-quote, blockquote { font-style: normal; }

a { color: inherit; }
.dpp-body a:not(.dpp-btn-primary):not(.dpp-sim-card):not(.pieza) { color: var(--ar-naranja); }

/* ── EL MARCO: tira superior + header ───────────────────────────── */

.topstrip {
  background: var(--ar-ink) !important;
  border-bottom: 0 !important;
}
.topstrip-inner { padding: 10px 0 !important; }
.topstrip-item, a.topstrip-item {
  font-size: 12px !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: rgba(255,255,255,.62) !important;
}
a.topstrip-item:hover { color: #fff !important; }

.site-header, .sticky-header {
  background: var(--ar-ink) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.site-header .wrap.header-inner,
.header-search-layout { gap: 36px !important; min-height: 96px; align-items: center; }

/* El logo, en blanco sobre el oscuro */
.brand-logo { filter: brightness(0) invert(1); height: 34px; }

/* El buscador: contorno CLARO, esquina viva, 42px — medido en ATB */
.header-search {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  border-radius: 0 !important;
  height: 42px;
  max-width: 460px;
  overflow: visible !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.header-search:focus-within {
  border-color: #fff !important;
  box-shadow: inset 0 0 0 1px #fff;
}
.header-search input {
  background: transparent !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 0 16px !important;
}
.header-search input::placeholder { color: rgba(255,255,255,.66) !important; }
.header-search button {
  background: transparent !important;
  color: #fff !important;
  padding: 0 14px !important;
  border-left: 1px solid rgba(255,255,255,.28) !important;
  height: 100%;
}
.header-search button:hover { background: rgba(255,255,255,.08) !important; }

/* Accesos de la derecha: arena sobre negro, sin bloques de color */
.nav a, .hdr-favs, .hdr-cuenta, button.hdr-cuenta, .catnav-toggle.hdr-cuenta,
.hdr-ingresar, .hdr-favs svg, .hdr-cuenta svg, .nav svg {
  color: rgba(255,255,255,.85) !important;
  font-size: 15px;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.nav a:hover, .hdr-favs:hover, .hdr-cuenta:hover { color: #fff !important; }
.hdr-avatar { border-color: rgba(255,255,255,.4) !important; }

/* "Registrarse" deja de ser un ladrillo naranja arriba: contorno */
.hdr-registro, a.hdr-registro, .sticky-header .hdr-registro {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 0 !important;
  font-weight: 300 !important;
  text-transform: none !important;
  padding: 9px 18px !important;
}
.hdr-registro:hover { background: rgba(255,255,255,.1) !important; }

/* Los desplegables del header, en oscuro */
.catnav-menu, .hdr-cuenta-menu {
  background: var(--ar-ink-2) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.45) !important;
}
.catnav-menu a, .hdr-cuenta-menu a { color: rgba(255,255,255,.82) !important; }
.catnav-menu a:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.catnav-menu a:first-child { color: var(--ar-naranja) !important; }
.hdr-menu-seccion { color: rgba(255,255,255,.4) !important; }

/* ── LA TIRA DE CATEGORÍAS: banda blanca fina ───────────────────── */

.site-header .tira-rapida, .tira-rapida {
  background: var(--ar-papel) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--ar-linea) !important;
}
.site-header .tira-rapida-inner, .tira-rapida-inner {
  height: 46px;
  padding: 0 20px !important;
  gap: 34px !important;
  align-items: center;
  justify-content: center;
}
/* Los íconos grandes no entran en una tira fina: manda el nombre. */
.tr-item {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  position: relative;
}
.tr-item svg { display: none !important; }
.tr-item span {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  /* CENTRADO ÓPTICO: en mayúsculas no hay descendentes, así que la caja
     de línea deja aire muerto abajo y el texto se ve alto. 1px arriba
     clava el centro de la tinta en el centro de la tira. */
  font-size: 15px !important;
  line-height: 1 !important;
  padding-top: 1px;
  letter-spacing: .05em !important;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ar-texto) !important;
}
.tr-item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -14px;
  height: 2px; background: transparent; transition: background .15s ease;
}
.tr-item:hover::after, .tr-item.activa::after { background: var(--ar-naranja); }
.tr-item.activa span { color: var(--ar-texto) !important; }

/* ── LA GRILLA DE PIEZAS: la foto es la tarjeta ─────────────────── */

.dpp-similares, .home-carrusel { gap: 34px !important; }

.dpp-sim-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center;
  overflow: visible !important;
}
.dpp-sim-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* LAS FOTOS: EL TRATO DEL SITIO ORIGINAL, EN CAJA 4:5.
   Lo único que cambia respecto del PULPA de siempre es la proporción de
   la caja, que pasa a ser 4:5 — el formato de Instagram, la regla base.
   El tratamiento es el que ya estaba probado y funcionaba:
     · piezas verticales → llenan la caja;
     · amplis y audio pro (.foto-ancho) → entran completos, sin recortar,
       con el aire pintado del color de fondo de la propia foto.
   Nada de convertir archivos ni de fondos inventados. */
.dpp-sim-foto {
  aspect-ratio: 4 / 5 !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.dpp-sim-foto img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  transform-origin: center bottom;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.dpp-sim-foto.foto-ancho { background: #e9e6e1; }
.dpp-sim-foto.foto-ancho img { object-fit: contain !important; }

.dpp-sim-body { padding: 14px 2px 0 !important; }
.dpp-sim-titulo {
  font: 300 15px/1.45 'Funnel Sans', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ar-texto) !important;
}
.dpp-sim-card:hover .dpp-sim-titulo { color: var(--ar-naranja) !important; }
/* El precio, centrado bajo el título y en gris — no en negro.
   El negro es del nombre de la pieza; el precio acompaña, no compite.
   El código DPP y la flechita quedaban a los costados y desplazaban el
   precio del centro: se ocultan en la grilla (el código sigue estando
   en la ficha, que es donde se usa). */
.dpp-sim-meta {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 0 !important;
  margin-top: 6px !important;
}
.dpp-sim-meta .dpp-sim-codigo,
.dpp-sim-meta .dpp-sim-chevron { display: none !important; }
.dpp-sim-precio-row { display: inline-flex; align-items: center; justify-content: center; }
.dpp-sim-precio {
  color: var(--ar-texto-2) !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  letter-spacing: .01em;
}
.dpp-sim-gate { color: var(--ar-texto-2) !important; font-size: 13px !important; }


/* Las chapitas de estado: rectángulo chico, sólido, arriba a la izquierda */
.dpp-sim-badge, .badge-verificada, .pieza-badge {
  border-radius: 3px !important;
  background: var(--ar-ink) !important;
  color: #fff !important;
  font-size: 9.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  top: 10px !important; left: 10px !important;
}

/* ── BOTONES ────────────────────────────────────────────────────── */

/* El primario es el ÚNICO bloque de color de la página: la acción real. */
.dpp-btn-primary {
  background: var(--ar-naranja) !important;
  border: 1px solid var(--ar-naranja) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  height: 48px;
}
.dpp-btn-primary:hover { background: var(--ar-naranja-2) !important; border-color: var(--ar-naranja-2) !important; }

/* Los secundarios: contorno negro fino, sin rastro del bordó viejo. */
.dpp-btn-sec, a.dpp-btn-sec {
  background: transparent !important;
  border: 1px solid var(--ar-ink) !important;
  border-radius: 0 !important;
  color: var(--ar-ink) !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
  letter-spacing: .1em !important;
  height: 48px;
}
.dpp-btn-sec:hover, a.dpp-btn-sec:hover {
  background: var(--ar-ink) !important;
  color: #fff !important;
}
.dpp-btn-sec svg { color: currentColor !important; }

/* Enlaces "ver más": subrayado naranja corto, como el kicker del hero */
.home-verlink, .dpp-verlink {
  color: var(--ar-texto) !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ar-naranja);
  padding-bottom: 5px;
}

/* ── LA HOME ────────────────────────────────────────────────────── */

/* El hero deja de ser una pantalla entera: es una TIRA, como la de ATB.
   La foto va completa a la derecha y su versión desenfocada llena el
   resto, así la pieza se ve grande sin recortarse. */
.home-banner {
  height: clamp(420px, 38vw, 580px) !important;
  min-height: 0 !important;
  background: var(--ar-ink) !important;
}
.home-banner-bg {
  background-size: cover !important;
  background-position: center !important;
  filter: blur(34px) brightness(.42) saturate(1.1);
  transform: scale(1.12);
}
.home-banner-shade {
  background: linear-gradient(90deg,
    rgba(10,10,10,.9) 0%, rgba(10,10,10,.62) 42%, rgba(10,10,10,0) 74%) !important;
}
/* La pieza nítida, entera, a la derecha de la tira. El desenfoque de
   atrás es la misma foto: así la franja nunca queda vacía y el objeto
   no se recorta jamás. */
.home-banner-foto {
  position: absolute; right: 5%; top: 0; height: 100%; width: auto;
  max-width: 52%; object-fit: contain; z-index: 1;
  transition: opacity .45s ease;
}
.home-banner-shade, .home-banner-content, .home-banner-credito { z-index: 2; }
.home-banner-content { align-items: flex-start !important; text-align: left !important; }
@media (max-width: 900px) { .home-banner-foto { display: none; } }

/* Las chapitas reales de la grilla (NUEVO, VERIFICADA…) y el corazón */
/* ⚠ `[class*="card-chip-"]` Y NO `[class^="card-chip"]`.
   El selector viejo empezaba con «card-chip» y por lo tanto también
   agarraba a `.card-chips` —el CONTENEDOR de las chapitas—, que quedaba
   pintado de tinta con el padding de una chapa. Mientras hay una adentro
   no se ve, porque la tapa; en la tarjeta que no tiene ninguna, el
   contenedor vacío se dibuja igual: un rectángulo negro de 12 por 6
   píxeles arriba a la izquierda de la foto, que parece un error de carga.
   El guion del final es todo el arreglo: `card-chip-nuevo` y
   `card-chip-verif` lo tienen, `card-chips` no. Y va con `*=` en vez de
   `^=` para que siga funcionando si algún día la clase de la chapa no
   es la primera del atributo. */
.card-chip-nuevo, .card-chip, [class*="card-chip-"] {
  background: var(--ar-ink) !important;
  color: #fff !important;
  border-radius: 3px !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 9.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 6px 9px !important;
  box-shadow: none !important;
}
.card-chip-verificada { background: var(--ar-naranja) !important; }
/* EL CORAZÓN DE FAVORITOS.
   Venía como una chapita: disco blanco de 30px con un corazón gordo de
   trazo 2.7 adentro. Sobre una foto de archivo eso es un botón de app,
   no una marca al margen. Queda el trazo solo —blanco con una sombra
   apenas, para que se lea sobre foto clara u oscura—, fino y chico. Al
   marcarlo se rellena de naranja, que es el único color que marca en
   todo el sitio.
   OJO: la clase que pone el PHP es `es-fav`, no `activo` ni `on` —
   antes apuntaba a clases que no existen y el favorito nunca se
   pintaba. */
/* ── EL CORAZON, MAS GRANDE Y SIN CAJA — 06/09/2026 ────────────────────
   Venia siendo un trazo blanco de 17px: en una semana con 403 visitantes
   se guardo UNA pieza. Poner un corazon no cuesta nada —no hay que
   escribirle a nadie ni exponerse— y aun asi no pasaba, o sea que la
   gente no lo estaba viendo.

   SE PROBARON DOS CAJAS Y LAS DOS SE DESCARTARON, mirandolas en vivo
   sobre el sitio real:
     · circulo blanco tipo Reverb — Andres: «hay algo chocante que no se
       mimetiza con la estetica del sitio». Y tiene razon: las tarjetas
       de PULPA son cuadradas y austeras, una burbuja redonda ahi adentro
       es idioma de marketplace, no de archivo.
     · chip cuadrado oscuro como el de «INGRESO RECIENTE» — mimetizaba,
       pero con las dos esquinas ocupadas la tarjeta empieza a parecer un
       aviso.

   Queda el trazo solo, que es lo que estaba, PERO de 26px en vez de 17 y
   con doble sombra: una cerrada que lo despega y otra difusa que le hace
   un halo, para que se lea igual sobre foto clara u oscura. Lo unico que
   cambia es el tamaño, que era el problema real.

   EL MARGEN ES 12 Y NO 8. El chip de «INGRESO RECIENTE» arranca a 10px
   del borde del otro lado; a 12 el corazon queda casi en su misma linea
   —apenas mas adentro, que compensa que el chip tiene caja y el corazon
   no— y la foto se lee ordenada. Se probaron 18, 24, 30 y 36: a partir
   de 18 flota y se nota que no esta apoyado en nada. */
.card-fav {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 34px !important; height: 34px !important;
  top: 12px !important; right: 12px !important;
  color: #fff !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(0,0,0,.4)) !important;
}
.card-fav svg { width: 26px !important; height: 26px !important; fill: none !important; display: block !important; }
.card-fav svg, .card-fav .fav-path { stroke-width: 1.8 !important; }
.card-fav:hover { background: transparent !important; transform: scale(1.08) !important; }

/* ── MARCADO SE LLENA DE BLANCO, NO DE ROJO — decision de Andres ───────
   El naranja de PULPA marca cosas DEL SISTEMA: el chip de «INGRESO
   RECIENTE», «APTO DEAL», la huella del logo. Un corazon rojo compite
   con esos y se lee como una etiqueta mas del sitio. En blanco es la
   misma tinta del corazon vacio, solo que llena: se lee como «lo marque
   yo», que es lo que es. */
.card-fav.es-fav { color: #fff !important; }
.card-fav.es-fav svg .fav-path, .card-fav.es-fav .fav-path { fill: #fff !important; stroke: #fff !important; }

/* ── EL DE LA FICHA: CORAZON SOLO, PERO QUE SE VEA ─────────────────────
   Se probo con la palabra «Guardar» al lado, tipo Reverb, y al lado del
   H1 y del lapiz quedaba pesado. Vuelve al corazon solo —pero de 25px,
   no de 19: al lado de un lapiz de 24px se leia como un adorno.

   ACA SI SE LLENA DE NARANJA Y NO DE BLANCO. No es una incoherencia con
   la tarjeta: la ficha tiene fondo claro y un corazon blanco lleno
   desapareceria. Es la misma regla —llenarse del color que contrasta con
   lo que tiene detras— aplicada a dos fondos distintos. */
.ficha-fav {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #473b31 !important;
  filter: none !important;
  width: 34px !important; height: 34px !important;
  position: static !important;
}
.ficha-fav svg { width: 25px !important; height: 25px !important; }
.ficha-fav svg, .ficha-fav .fav-path { stroke-width: 1.9 !important; }
.ficha-fav:hover { color: var(--ar-naranja) !important; transform: scale(1.1) !important; background: transparent !important; }
.ficha-fav.es-fav { color: var(--ar-naranja) !important; }
.ficha-fav.es-fav svg .fav-path, .ficha-fav.es-fav .fav-path { fill: var(--ar-naranja) !important; stroke: var(--ar-naranja) !important; }

@media (max-width: 700px) {
  .card-fav { width: 32px !important; height: 32px !important; top: 10px !important; right: 10px !important; }
  .card-fav svg { width: 24px !important; height: 24px !important; }
  .ficha-fav { width: 30px !important; height: 30px !important; }
  .ficha-fav svg { width: 22px !important; height: 22px !important; }
  /* La misma cuenta con los números del celular: caja de 32 con ícono de
     24 a 10 del margen → borde visual en 14, centro en 26. La chapa de
     14 de alto arranca entonces en 26 − 7 = 19. */
  .card-chip-nuevo, .card-chip-verif, .card-chip, [class*="card-chip-"], .ar-chapa,
  .card-chips { top: 19px !important; left: 14px !important; }

}

/* Las flechas del carrusel: sin cajita beige */
.home-carrusel-flecha {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid var(--ar-linea) !important;
  border-radius: 50% !important;
  color: var(--ar-ink) !important;
  box-shadow: none !important;
}
.home-carrusel-flecha:hover { background: #fff !important; border-color: var(--ar-ink) !important; }
.home-kicker {
  display: inline-block;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  letter-spacing: .24em !important;
  text-transform: uppercase;
  color: #fff !important;
  border-bottom: 2px solid var(--ar-naranja);
  padding-bottom: 7px;
  margin-bottom: 18px !important;
}
.home-banner h1, .home-hero-copy h1 {
  color: #fff !important;
  font-size: clamp(30px, 4.2vw, 40px) !important;
  line-height: 1.3 !important;
  letter-spacing: .04em !important;
  max-width: 24ch;
}
.home-banner p, .home-hero-copy p { color: rgba(255,255,255,.82) !important; font-size: 14px; }
.home-hero-actions { gap: 14px; }
.home-banner .home-hero-actions .dpp-btn-sec,
.home-banner-btn-sec, a.home-banner-btn-sec {
  border-color: rgba(255,255,255,.6) !important;
  color: #fff !important;
  background: transparent !important;
}
.home-banner .home-hero-actions .dpp-btn-sec:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.home-banner-credito { color: rgba(255,255,255,.6) !important; font-size: 12px !important; }

/* Secciones: aire, títulos centrados, sin fondos de colores raros */
.home-seccion { padding: 92px 0 !important; background: var(--ar-papel) !important; }
.home-seccion-alt { background: var(--ar-papel-2) !important; }
.home-seccion-head { align-items: flex-end; margin-bottom: 44px !important; }
.home-seccion-bajada { color: var(--ar-texto-2) !important; font-size: 15px !important; }

/* Las categorías: sin tarjetas con borde */
.home-cats { gap: 20px !important; }
.home-cat-card {
  background: transparent !important;
  border: 1px solid var(--ar-linea) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease;
}
.home-cat-card:hover { border-color: var(--ar-ink) !important; background: transparent !important; transform: none !important; }
.home-cat-nombre {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 14px !important;
}
.home-cat-n { color: var(--ar-texto-2) !important; font-weight: 300 !important; font-size: 13px !important; }

/* La promo y el newsletter, en el mismo idioma */
.home-promo { border-radius: 0 !important; }
.home-promo-shade { background: linear-gradient(90deg, rgba(10,10,10,.86), rgba(10,10,10,.3)) !important; }
.home-promo-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: 'Archivo', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12.5px !important;
}
.home-promo-btn:hover { background: rgba(255,255,255,.12) !important; }
.home-news { background: var(--ar-ink) !important; }
.home-news h2, .home-news-copy h2 { color: #fff !important; }
.home-news p { color: rgba(255,255,255,.62) !important; }
.home-news-form input {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 0 !important;
  color: #fff !important;
}
.home-news-form input::placeholder { color: rgba(255,255,255,.55) !important; }

/* Cómo funciona: números en naranja, títulos en caja alta */
.home-dpp-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.home-dpp-item h3 { font-size: 16px !important; letter-spacing: .08em; }
.home-dpp-item p { color: var(--ar-texto-2) !important; }

/* ── LA FICHA DPP ───────────────────────────────────────────────── */

.dpp-body { background: var(--ar-papel) !important; }

/* La foto principal deja de vivir en una tarjeta */
.dpp-media-card, .dpp-info-card, .dpp-card, .dpp-bloque {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.dpp-media-card .dpp-photo-main, #dpp-photo-zoomable {
  border-radius: 0 !important;
  background: var(--ar-papel-2) !important;
}
.dpp-media-card .dpp-thumb, .dpp-thumb {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: .5;
  transition: opacity .15s ease, box-shadow .15s ease;
}
.dpp-media-card .dpp-thumb:hover, .dpp-thumb:hover { opacity: .85; }
.dpp-media-card .dpp-thumb.active, .dpp-thumb.active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--ar-naranja) !important;
}

.dpp-breadcrumb, .dpp-info .dpp-meta-line, .dpp-info small {
  color: var(--ar-texto-2) !important;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dpp-price-label {
  font-family: 'Archivo', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
  color: var(--ar-texto-2) !important;
}
.dpp-price, .dpp-price-none {
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  color: var(--ar-texto) !important;
  letter-spacing: 0 !important;
}
/* EL FILETE DE ARRIBA DEL PRECIO ESTABA PEGADO A LAS DOS COSAS.
   Al sacarle la caja a este bloque —era un recuadro con fondo— quedó
   sólo el borde de arriba, pero el relleno que esa caja tenía se fue
   con ella. Resultado: una línea tocando las migas por arriba y el
   rótulo «Precio publicado» por abajo. Una línea sin aire no separa
   dos cosas: las junta y encima les pone una raya en el medio.
   El aire de abajo es mayor que el de arriba a propósito: la línea es
   el techo de lo que sigue, no el piso de lo que vino. */
.dpp-price-area {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ar-linea) !important;
  border-radius: 0 !important;
  margin-top: 20px !important;
  padding-top: 18px !important;
}
.dpp-disclaimer { color: var(--ar-texto-2) !important; font-size: 13px !important; }

/* La ficha técnica: etiqueta chica gris, valor grande negro, sin rayado */
.dpp-ficha-tabla {
  border: 0 !important;
  border-top: 1px solid var(--ar-linea) !important;
  border-radius: 0 !important;
}
.dpp-ficha-fila {
  background: transparent !important;
  border-bottom: 1px solid var(--ar-linea);
  padding: 13px 0 !important;
  grid-template-columns: 210px 1fr !important;
}
.dpp-ficha-fila:nth-child(even) { background: transparent !important; }
.dpp-ficha-key {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 10.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ar-texto-2) !important;
}
.dpp-ficha-val {
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 15.5px !important;
  color: var(--ar-texto) !important;
}

/* La descripción, con aire de lectura */
.dpp-desc-top, .dpp-descripcion { font-size: 16.5px; line-height: 1.75; color: #3f3b36; }

/* El gráfico de mercado */
.mkt { background: transparent !important; border: 0 !important; }
.mkt svg text { fill: var(--ar-texto-2); font-family: 'Funnel Sans', sans-serif; }
/* EL NÚMERO QUE VA ADENTRO DE LA BARRA VA EN BLANCO. La regla de arriba
   pinta de gris todo el texto del gráfico —los años, el "1 pub."— y eso
   está bien mientras el texto esté sobre el papel. Adentro de la barra
   roja, el mismo gris no se lee. Blanco puro, y en Archivo, que es la
   tipografía de todo lo que es un dato. */
.mkt svg text.mkt-val-dentro {
  fill: #fff !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}
.mkt svg text.mkt-val-fuera {
  fill: var(--ar-texto) !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 600 !important;
}
.mkt svg rect[fill="#b98a5e"] { fill: var(--ar-naranja) !important; fill-opacity: .82 !important; }
.mkt-pin { fill: var(--ar-ink) !important; stroke: #fff !important; }
/* El punto de un particular va hueco: mismo lugar en la curva, distinta
   procedencia. Se lee de un vistazo cuánto de esa barra la sostienen
   negocios y cuánto gente vendiendo la suya. */
.mkt-pin-suelto { fill: var(--ar-papel) !important; stroke: var(--ar-ink) !important; }
/* Pieza publicada en PULPA: verde. Vendida: aro dorado (21/09/2026). */
.mkt-pin-pulpa { fill: #3f7d52 !important; stroke: #fff !important; }
.mkt-pin-vendida { stroke: #c8962e !important; stroke-width: 2.2px !important; }

/* La línea de confianza y el custodio */
.dpp-trust, .dpp-custodio, .dpp-timeline {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ar-linea) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.dpp-trust-item { color: var(--ar-texto-2) !important; font-size: 13px; }
.dpp-trust-item svg { color: var(--ar-naranja) !important; }

/* ── TIENDAS Y LA RED ───────────────────────────────────────────── */

.red-card, .tienda-card {
  background: transparent !important;
  border: 1px solid var(--ar-linea) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.red-card:hover, .tienda-card:hover { border-color: var(--ar-ink) !important; transform: none !important; }
.red-logo, .tienda-logo {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.tienda-hero, .red-hero { background: var(--ar-ink) !important; border-radius: 0 !important; }

/* ── EL PIE ─────────────────────────────────────────────────────── */

.site-footer, footer.site-footer {
  background: var(--ar-ink) !important;
  color: rgba(255,255,255,.55) !important;
  border-top: 0 !important;
}
.site-footer a { color: rgba(255,255,255,.7) !important; }
.site-footer a:hover { color: #fff !important; }
.site-footer h3, .site-footer h4 {
  color: #fff !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
}

/* ── EL INTERRUPTOR, siempre a mano mientras dure la prueba ─────── */

.ar-switch {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ar-ink); color: #fff; text-decoration: none;
  font-family: 'Funnel Sans', sans-serif; font-size: 12px; font-weight: 300;
  padding: 9px 14px; border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.ar-switch:hover { background: #000; }
.ar-switch b { font-weight: 400; }
.ar-switch .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--ar-naranja); }
@media (max-width: 700px) { .ar-switch { bottom: 74px; right: 10px; font-size: 11px; } }

/* ── MOVIMIENTO: solo lo que ayuda a entender ───────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .home-seccion, .dpp-desc-top, .dpp-ficha-bajo-foto, .mkt, .dpp-timeline {
    animation: ar-sube .6s cubic-bezier(.2,.7,.3,1) both;
  }
  @keyframes ar-sube {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── MÓVIL ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .header-search { max-width: none; }
  .site-header .tira-rapida-inner, .tira-rapida-inner {
    justify-content: flex-start;
    overflow-x: auto;
    gap: 24px !important;
  }
}
@media (max-width: 700px) {
  .home-banner { height: clamp(340px, 60vw, 420px) !important; }
  .home-banner h1, .home-hero-copy h1 { font-size: 26px !important; }
  .dpp-similares, .home-carrusel { gap: 22px !important; }
  .dpp-ficha-fila { grid-template-columns: 1fr !important; gap: 4px; }
}


/* ═══ AJUSTES DE LA SEGUNDA PASADA (verificado en pantalla) ═══════ */

/* La tira de categorías tiene 13 ítems: sin íconos entran, pero justos.
   Se achican la letra y el aire, y si aun así no entran, se desliza en
   vez de cortar "LA RED" por la mitad. */
.site-header .tira-rapida-inner, .tira-rapida-inner {
  gap: 26px !important;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: safe center;
}
.site-header .tira-rapida-inner::-webkit-scrollbar,
.tira-rapida-inner::-webkit-scrollbar { display: none; }
.tr-item span { font-size: 13.5px !important; letter-spacing: .045em !important; }
@media (max-width: 1280px) { .tr-item span { font-size: 12.5px !important; } }

/* La columna de la pieza no es una tarjeta color crema: es papel. */
.dpp-info, .dpp-ficha-tabla, .dpp-photo-main {
  background: transparent !important;
}
.dpp-photo-main { background: var(--ar-papel-2) !important; }
.dpp-info { padding-left: 0 !important; }

/* Los títulos de sección de la ficha ("Quién la tiene", "Piezas
   similares", "La pieza") venían sin clase, en Roboto serif. */
.dpp-body h2, .dpp-body h3, .dpp-seccion h2, main h2, main h3 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--ar-texto) !important;
}
.dpp-body h2, main h2 { font-size: 20px !important; }
.dpp-body h3, main h3 { font-size: 15px !important; }

/* El breadcrumb en mayúsculas quedaba gritón: es un rastro, no un título. */
.dpp-breadcrumb { text-transform: none !important; font-size: 12.5px; letter-spacing: normal; }

/* El corazón de favoritos de la ficha */
.dpp-fav, .dpp-fav-btn {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ar-texto-2) !important;
  box-shadow: none !important;
}


/* ── LA RED: fichas de casa, en el mismo idioma ─────────────────── */
.red-nombre {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 15px !important;
  color: var(--ar-texto) !important;
}
.red-nivel, .red-nivel.verificador, .red-nivel.aliado {
  border-radius: 3px !important;
  background: var(--ar-ink) !important;
  color: #fff !important;
  border: 0 !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 9.5px !important;
  letter-spacing: .16em !important;
  padding: 5px 8px !important;
}
.red-nivel.verificador { background: var(--ar-naranja) !important; }
.red-meta, .red-info p { color: var(--ar-texto-2) !important; font-size: 13.5px !important; }
.red-piezas { color: var(--ar-texto) !important; font-size: 13.5px !important; }
.red-piezas b { font-weight: 400 !important; }
.red-card { padding: 22px !important; transition: border-color .15s ease; }

/* Los encabezados de listado: título enorme, rastro chico */
.dpp-listado-titulo, .dpp-hero-titulo, .buscar-titulo {
  font-family: 'Archivo', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}


/* ═══ LA PORTADA "ARCHIVO" ════════════════════════════════════════
   Estilos propios de la landing (partials/home_archivo.php). No pisan
   nada del sitio viejo: estas clases solo existen en esta portada. */

.ar-home { background: var(--ar-papel); }

/* ── Hero: una tira, la pieza entera, su propio desenfoque detrás ── */
.ar-hero {
  display: block; position: relative; overflow: hidden;
  /* Un poco más baja: la tira tiene que leerse como franja, no como
     media pantalla. 20px menos arriba y 20 abajo. */
  /* La altura vive en una variable porque la foto acostada la necesita
     como ANCHO: al girar 90° el alto y el ancho se intercambian. */
  /* 30px menos de alto: la franja se lee mejor como tira y deja ver
     antes lo que viene abajo. */
  --ar-hero-h: clamp(325px, 30vw, 485px);
  background: #111; height: var(--ar-hero-h);
}
/* ACOSTADA. Se la dimensiona al revés —ancho = alto de la franja, alto =
   ancho de la pantalla— y recién después se gira sobre su centro. Con
   -90° el clavijero queda a la izquierda: el ojo entra por el mástil y
   termina en el cuerpo, que es como se lee un instrumento. Al revés se
   siente incómodo aunque cueste explicar por qué. */
.ar-hero-fondo.rotada {
  inset: auto; top: 50%; left: 50%;
  width: var(--ar-hero-h); height: 100vw;
  transform: translateX(var(--dxa, 0px)) translate(-50%, -50%) rotate(-90deg);
  object-position: center center;
}
/* COMO LO TRATA ATB: una sola foto a sangre, recortada para llenar la
   tira entera, con el texto encima. Nada de pieza contenida a un costado
   sobre un desenfoque: eso partía la imagen en dos y dejaba ese borde
   vertical que se veía en la portada. */
/* LA FOTO DEL HERO SE APOYA EN LA BASE.
   La tira muestra apenas una quinta parte de una foto vertical: con el
   encuadre en el 42% se veía el aire de arriba y el mástil, que es la
   parte muda del instrumento. Apoyada en la base entra el cuerpo —el
   puente, los controles, el golpeador—, que es lo que hace reconocible
   a una guitarra de un vistazo. Misma regla que la grilla y la ficha:
   la base de la foto coincide con la base de la caja. */
.ar-hero-fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* UN CUARTO POR ENCIMA DE LA BASE.
     Apoyada exactamente en la base (`center bottom`) la foto quedaba
     con la pieza pegada al borde inferior, sin aire debajo, y encima
     el recorte se comía todo por arriba. Con 75% la ventana sube un
     cuarto del sobrante: entra algo más de la parte de arriba de la
     pieza y le queda un respiro abajo.
     El 25% es del SOBRANTE (lo que la foto excede a la caja), no de la
     foto: en una foto muy alta el corrimiento es grande y en una que
     apenas desborda es mínimo, que es justo lo que conviene. */
  object-fit: cover; object-position: center 75%;
  filter: none;
  transform: translateX(var(--dxa, 0px));
}

/* LA SEGUNDA FOTO: LA QUE HACE POSIBLE EL SWIPE. 28/08/2026.
   ══════════════════════════════════════════════════════════════════════
   Sin esto, arrastrar la foto del hero descubre el fondo negro: la
   imagen tapa la caja justo y no hay nada atrás. La ficha no tiene ese
   problema porque sus fotos son vecinas en una pista.
   Acá se agrega una sola vecina: una gemela que durante el gesto lleva
   el slide siguiente —o el anterior, según hacia dónde va el dedo— ya
   cargada y apoyada a un ancho de distancia. Las dos se mueven juntas,
   así que en el hueco que deja una siempre está entrando la otra.
   Vive escondida el resto del tiempo: sólo se muestra mientras dura el
   gesto. Y usa su propia variable, `--dxb`, porque va corrida un ancho
   respecto de la primera. */
.ar-hero-fondo-b { visibility: hidden; transform: translateX(var(--dxb, 0px)); }
.ar-hero-fondo-b.rotada {
  transform: translateX(var(--dxb, 0px)) translate(-50%, -50%) rotate(-90deg);
}
.ar-hero.ar-gesto .ar-hero-fondo-b { visibility: visible; }

/* Con el dedo apoyado la foto va pegada al dedo, sin transición; al
   soltar se anima. Se nombran las DOS transiciones a propósito:
   `transition` es abreviada, y apagar la del transform apagaría también
   la de opacidad, que es de la que depende el fundido de `mostrar()`. */
.ar-hero.ar-sin-trans .ar-hero-fondo,
.ar-hero.ar-sin-trans .ar-hero-velo {
  transition: transform 0s, opacity .26s ease !important;
}
.ar-hero.ar-con-trans .ar-hero-fondo,
.ar-hero.ar-con-trans .ar-hero-velo {
  transition: transform .22s cubic-bezier(.25,.46,.3,1), opacity .26s ease !important;
}
/* EL TEXTO LLEVA SU PROPIO INTERRUPTOR, Y NO ES CAPRICHO.
   En el remate del gesto las dos capas tienen que hacer cosas
   OPUESTAS al mismo tiempo: la foto que entró ya está en su lugar y hay
   que dejarla ahí de un salto —animarla sería verla deslizar de nuevo
   sobre sí misma—, mientras el texto nuevo, que recién existe en ese
   instante, sí tiene que entrar animado desde el costado. Con una sola
   clase para las dos, una de las dos siempre queda mal. */
.ar-hero.ar-txt-sin .ar-hero-txt {
  transition: transform 0s, opacity 0s !important;
}
.ar-hero.ar-txt-con .ar-hero-txt {
  /* EL VIAJE Y EL FUNDIDO NO DURAN LO MISMO. 28/08/2026 — Andrés.
     El desplazamiento sigue al dedo y tiene que ser corto (.22s) o se
     siente elástico. El fundido, en cambio, a .22s no se percibía: el
     texto nuevo aparecía casi de golpe y el ojo lo leía como un salto,
     no como una entrada. Medio segundo es el punto donde se nota que
     enciende sin que se haga esperar. Si se toca este número hay que
     tocar también el setTimeout del remate en home_archivo.php: ahí se
     saca la clase, y si se la saca antes de tiempo el fundido se corta
     a la mitad. */
  transition: transform .22s cubic-bezier(.25,.46,.3,1), opacity .5s ease !important;
}
.ar-hero-foto { display: none !important; }
.ar-hero-velo {
  /* EL VELO ES PARTE DE LA FOTO, NO DEL TEXTO. 28/08/2026 — Andrés.
     ══════════════════════════════════════════════════════════════════
     Empezó siendo un degradado fijo encima de todo: las fotos
     deslizaban por debajo de una sombra clavada y el gesto se sentía
     despegado. El primer arreglo lo colgó de las variables del texto
     (--dxt/--opt) y eso corrigió el viaje pero trajo algo peor: la
     sombra se fundía al entrar, o sea aparecía DESPUÉS que su foto.
     Una sombra que llega tarde se ve como una mancha que crece.
     La sombra pertenece a la imagen que oscurece. Va pegada a la foto
     —misma variable, mismo interruptor de transición, sin opacidad
     propia— y por eso hay DOS, una por foto, igual que las fotos: ver
     .ar-hero-velo-b más abajo. El texto se funde solo; su fondo ya
     estaba ahí cuando llegó. */
  transform: translateX(var(--dxa, 0px));
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg,
    rgba(10,10,10,.88) 0%, rgba(10,10,10,.55) 40%, rgba(10,10,10,0) 72%);
  transition: background .3s ease;
}
/* Sobre foto clara (fondo de estudio blanco) el velo suave no alcanza:
   el título se comía la luz. Acá se densifica lo justo para que el
   blanco del texto siga siendo lo más claro de la imagen. */
/* LA SOMBRA GEMELA. Va con --dxb, la variable de la foto que entra,
   así que llega ya puesta encima de ella en vez de encenderse después.
   Lleva las dos clases (ar-hero-velo ar-hero-velo-b) para heredar sin
   copiar los degradados de hero-claro y hero-derecha. Escondida salvo
   durante el gesto, igual que la foto B. */
.ar-hero-velo-b { visibility: hidden; transform: translateX(var(--dxb, 0px)); }
.ar-hero.ar-gesto .ar-hero-velo-b { visibility: visible; }

/* EL DEGRADADO CUELGA DEL ELEMENTO, NO DEL HERO. 28/08/2026 — Andrés.
   ══════════════════════════════════════════════════════════════════════
   Antes esto era `.ar-hero.hero-claro .ar-hero-velo`: una clase en el
   hero decidía el degradado de TODOS los velos a la vez. Con una sola
   sombra daba igual; con dos, no: durante el gesto la gemela viajaba con
   el degradado del slide que se iba, y al aterrizar cambiaba de golpe al
   del slide que entraba —de lado y de densidad—. Eso era lo que se veía
   como que el degradado entra abrupto y la foto queda un instante sin
   sombra propia.
   Ahora cada velo lleva sus clases (`velo-claro`, `velo-derecha`) y el JS
   se las pone a la gemela apenas sabe qué foto entra, así viaja ya con la
   sombra correcta. `hero-claro` y `hero-derecha` siguen existiendo, pero
   sólo para el TEXTO. */
.ar-hero .ar-hero-velo.velo-claro {
  background: linear-gradient(90deg,
    rgba(8,8,8,.94) 0%, rgba(8,8,8,.78) 38%, rgba(8,8,8,.22) 68%, rgba(8,8,8,0) 86%);
}
/* El texto, centrado en el alto de la tira: la tira es baja y el bloque
   pegado al piso quedaba desbalanceado contra el aire de arriba. */
.ar-hero-txt {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0; z-index: 3;
  /* EL TEXTO VIAJA CON LA FOTO. 28/08/2026 — Andrés.
     La foto deslizaba y el texto se quedaba clavado, así que el nombre
     de una pieza quedaba un rato sobre la foto de otra. Ahora se corre
     con el mismo dedo, con su propia variable porque su recorrido no es
     igual al de la gemela: la foto que entra viene de un ancho de
     distancia, el texto nuevo recién existe cuando el viaje terminó. */
  transform: translateX(var(--dxt, 0px));
  /* Y se desvanece mientras viaja: el texto viejo se va apagando con el
     arrastre y el nuevo entra encendiéndose. Sin esto el reemplazo era
     un corte seco justo cuando el ojo estaba siguiendo el movimiento. */
  opacity: var(--opt, 1);
}
/* El texto va PEGADO A LA IZQUIERDA de la tira, no centrado: se alinea
   con el margen de la página (los mismos 40px que usa todo el sitio) y
   sube al centro en altura. Como en ATB. */
.ar-hero-txt > .wrap {
  flex: 0 0 auto;
  width: auto !important;
  max-width: 60% !important;
  margin: 0 !important;
  padding-left: 14px;
}
@media (max-width: 700px) {
  .ar-hero-txt > .wrap { max-width: 88% !important; padding-left: 12px; }
}
.ar-kicker {
  display: inline-block; font-family: 'Archivo', sans-serif; font-weight: 400;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #fff;
  padding-bottom: 7px; border-bottom: 2px solid var(--ar-naranja); margin-bottom: 16px;
}
.ar-hero h1 {
  margin: 0 0 12px; color: #fff !important;
  font-family: 'Archivo', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px, 4.2vw, 40px); line-height: 1.3; letter-spacing: .04em;
  max-width: 24ch;
}
.ar-hero-specs { color: rgba(255,255,255,.82); font-size: 12.5px; letter-spacing: .05em; }
.ar-hero-rayas {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 15px; z-index: 3;
  display: flex; gap: 10px; align-items: center;
}
/* Las rayitas son la barra de tiempo del carrusel: la del slide en curso
   se llena de naranja mientras corre, las ya pasadas quedan en blanco. */
.ar-hero-rayas i {
  display: block; position: relative; overflow: hidden;
  width: 58px; height: 2px; background: rgba(255,255,255,.3);
  cursor: pointer;
}
.ar-hero-rayas i b {
  position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ar-naranja);
}
.ar-hero-rayas i.pasada { background: rgba(255,255,255,.7); }
.ar-hero-rayas i:hover { background: rgba(255,255,255,.55); }

/* El cruce entre piezas: se apaga y vuelve, nunca salta. */
.ar-hero-fondo, .ar-hero-txt h1, .ar-hero-specs { transition: opacity .26s ease; }
.ar-hero.cambiando .ar-hero-fondo,
.ar-hero.cambiando .ar-hero-txt h1,
.ar-hero.cambiando .ar-hero-specs { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ar-hero-fondo, .ar-hero-txt h1, .ar-hero-specs { transition: none; }
}
@media (max-width: 900px) {
  .ar-hero-foto { display: none; }
  /* EN EL TELÉFONO LA TIRA PASA A SER LA PANTALLA. 28/08/2026 — Andrés.
     ══════════════════════════════════════════════════════════════════
     En escritorio el hero es una FRANJA a propósito: se lee como tira y
     deja ver antes lo que viene abajo. En un teléfono esa misma decisión
     se da vuelta — 280 px de alto sobre una pantalla de 800 es un
     recorte, y la foto de la pieza, que es lo único que hay para mirar,
     entra partida.
     Ahora ocupa exactamente lo que queda libre: la altura de la ventana
     menos la cabecera (171 px: barra superior, logo y menú) y menos la
     barra de abajo (62 px). Medido en la página real a 390×800: el hero
     pasa de 280 a 567 px y su borde inferior cae justo sobre la barra,
     al píxel.
     `svh` y no `vh`: en un teléfono la barra de direcciones aparece y
     desaparece al hacer scroll, y con `vh` el hero saltaría de tamaño en
     cada movimiento. `svh` toma la ventana chica y se queda quieto. La
     línea con `vh` queda arriba como respaldo para navegadores que no lo
     entienden.
     El piso de 320 px es para pantallas muy bajas —un teléfono apaisado—
     donde la cuenta daría negativa. */
  .ar-hero {
    --ar-hero-h: max(320px, calc(100vh - 233px));
    --ar-hero-h: max(320px, calc(100svh - 233px));
    height: var(--ar-hero-h);
  }
}

/* ── Manifiesto: centrado, con aire ─────────────────────────────── */
/* El manifiesto entra pisándole los talones a la foto: 96px de aire
   arriba lo despegaban tanto que parecía otra página. Abajo sí
   conserva el aire, que es lo que separa del bloque de cifras. */
.ar-manifiesto { padding: 44px 0 88px; background: var(--ar-papel); }
.ar-manifiesto .wrap { max-width: 880px; text-align: center; }
.ar-manifiesto h2 {
  margin: 0 0 30px; font-family: 'Archivo', sans-serif; font-weight: 400;
  text-transform: uppercase; font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.35; letter-spacing: .04em;
}
.ar-manifiesto p {
  margin: 0 auto 20px; color: #4a4640; font-size: 16.5px; line-height: 1.75; max-width: 62ch;
}
.ar-mas {
  display: inline-flex; align-items: center; margin-top: 26px;
  font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ar-texto) !important;
  border-bottom: 2px solid var(--ar-naranja); padding-bottom: 5px;
}

/* ── Cifras ─────────────────────────────────────────────────────── */
.ar-cifras { background: var(--ar-papel-2); padding: 64px 0; }
.ar-cifras .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.ar-cifra { font-weight: 300; font-size: clamp(38px, 4.6vw, 62px); line-height: 1; }
.ar-cifra-lbl {
  margin-top: 12px; font-family: 'Archivo', sans-serif; font-weight: 400;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ar-texto-2);
}
@media (max-width: 700px) { .ar-cifras .wrap { grid-template-columns: 1fr; gap: 34px; } }

/* ── La colección: la foto es la tarjeta ────────────────────────── */
.ar-coleccion { padding: 110px 0 0; }
.ar-sec-cab { display: flex; justify-content: center; text-align: center; margin-bottom: 52px; }
.ar-sec-cab h2 {
  margin: 0; font-family: 'Archivo', sans-serif; font-weight: 400;
  text-transform: uppercase; font-size: 26px; letter-spacing: .04em;
}
.ar-grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 34px; }
@media (max-width: 1100px) { .ar-grilla { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }
@media (max-width: 560px)  { .ar-grilla { grid-template-columns: 1fr; } }

.ar-pieza { display: block; text-align: center; }
.ar-pieza-foto {
  position: relative; background: var(--ar-papel-2);
  aspect-ratio: 4 / 5; overflow: hidden;
}
/* Igual que la grilla del sitio: entera, ajustada a la altura, con el
   aire relleno del color de fondo de la propia foto. */
.ar-pieza-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
  transform-origin: center bottom;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.ar-pieza-foto.foto-ancho { background: #e9e6e1; }
.ar-pieza-foto.foto-ancho img { object-fit: contain; }
.ar-pieza:hover .ar-pieza-foto img { transform: scale(1.035); }
.ar-chapa {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--ar-ink); color: #fff; border-radius: 3px;
  font-family: 'Archivo', sans-serif; font-weight: 400;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px;
}
.ar-chapa.verif { background: var(--ar-naranja); }
.ar-pieza-tit {
  margin-top: 16px; font-size: 15px; font-weight: 300; line-height: 1.45;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ar-texto);
}
.ar-pieza:hover .ar-pieza-tit { color: var(--ar-naranja); }
.ar-pieza-pie {
  margin-top: 6px; font-size: 15px; color: var(--ar-texto-2);
  display: flex; gap: 9px; align-items: center; justify-content: center;
}
.ar-pieza-pie .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ar-linea); }
.ar-pieza-pie .tienda { color: var(--ar-texto-2); font-size: 13px; }

.ar-ver-todo { display: flex; justify-content: center; padding: 82px 0 120px; }
.ar-ver-todo a {
  display: inline-flex; align-items: center; border: 1px solid var(--ar-ink);
  padding: 16px 34px; font-family: 'Archivo', sans-serif; font-weight: 400;
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ar-texto) !important;
}
.ar-ver-todo a:hover { background: var(--ar-ink); color: #fff !important; }

/* ── El pasaporte, sobre negro: ahí sí corresponde ──────────────── */
.ar-pasaporte { background: var(--ar-ink); color: #fff; padding: 110px 0; }
.ar-pasaporte .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 66px; }
.ar-num { font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: .2em; color: var(--ar-naranja); margin-bottom: 20px; }
.ar-pasaporte h3 {
  margin: 0 0 14px !important; color: #fff !important;
  font-family: 'Archivo', sans-serif; font-weight: 400;
  text-transform: uppercase; font-size: 16px !important; letter-spacing: .08em !important;
}
.ar-pasaporte p { margin: 0; color: rgba(255,255,255,.62); font-size: 14.5px; line-height: 1.75; }
@media (max-width: 900px) { .ar-pasaporte .wrap { grid-template-columns: 1fr; gap: 44px; } .ar-pasaporte { padding: 70px 0; } }

/* Entrada suave de cada bloque de la portada */
@media (prefers-reduced-motion: no-preference) {
  .ar-manifiesto, .ar-cifras, .ar-coleccion, .ar-pasaporte {
    animation: ar-sube .6s cubic-bezier(.2,.7,.3,1) both;
  }
}


/* ═══ EL HEADER DE LA MAQUETA, TAL CUAL ══════════════════════════
   Medidas tomadas del sitio de ATB con getComputedStyle, no a ojo:
   nav 18px / ls .04em · tira blanca 40px · buscador 42px con borde
   claro y esquina viva · body 16px/24. */

.ar-tira { background: var(--ar-ink); color: rgba(255,255,255,.62); font-size: 12px; }
.ar-tira .wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.ar-tira-der { display: inline-flex; align-items: center; gap: 8px; }

.ar-cab { background: var(--ar-ink); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.ar-cab-inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; height: 104px; gap: 36px;
}

/* Buscador: contorno casi blanco, 42px, esquina viva, con su ámbito */
.ar-buscador {
  justify-self: start; width: 100%; max-width: 430px;
  display: flex; align-items: center; height: 42px;
  border: 1px solid rgba(255,255,255,.75); border-radius: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ar-buscador:focus-within { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.ar-ambito {
  display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px;
  border-right: 1px solid rgba(255,255,255,.75); color: #fff;
  font-size: 14px; white-space: nowrap; cursor: pointer;
}
.ar-buscador input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff;
  font-family: 'Funnel Sans', sans-serif; font-weight: 300; font-size: 14px; padding: 0 16px;
}
.ar-buscador input::placeholder { color: rgba(255,255,255,.66); }
.ar-buscador button {
  background: none; border: 0; color: #fff; cursor: pointer;
  padding: 0 14px; display: flex; align-items: center;
}
.ar-buscador button:hover { background: rgba(255,255,255,.08); }

/* Wordmark centrado, con el punto naranja y el sello debajo */
.ar-marca {
  justify-self: center; display: flex; flex-direction: column;
  align-items: center; gap: 7px; text-decoration: none; color: #fff;
}
.ar-wordmark {
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: 30px; letter-spacing: .22em; line-height: 1; margin-left: .22em;
}
.ar-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ar-naranja); }
.ar-sello {
  font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 10.5px;
  letter-spacing: .5em; margin-left: .5em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* Accesos de la derecha */
.ar-accesos {
  justify-self: end; display: flex; align-items: center; gap: 22px;
  font-size: 15px; color: rgba(255,255,255,.85);
}
.ar-accesos a, .ar-cuenta {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.85) !important; text-decoration: none;
  background: none !important; border: 0 !important; cursor: pointer;
  font-family: 'Funnel Sans', sans-serif !important; font-weight: 300 !important;
  font-size: 15px !important; letter-spacing: normal !important; text-transform: none !important;
  padding: 0 !important;
}
.ar-accesos a:hover, .ar-cuenta:hover { color: #fff !important; }
.ar-icono { position: relative; }
.ar-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.4); }
.ar-cuenta-item { position: relative; }
.ar-cuenta-menu { right: 0; left: auto; }

/* La tira blanca: 40px y CENTRADO ÓPTICO (1px arriba, porque las
   mayúsculas no tienen colas y la caja de línea las empuja hacia
   arriba). El subrayado del hover se ancla al piso de la tira, no al
   enlace: si colgara del enlace, movería el texto. */
/* LA TIRA DE CATEGORÍAS Y EL AIRE DE ABAJO.
   Debajo de la tira empieza papel blanco y no pasaba nada: la línea de
   un pixel corta, pero cortar no es lo mismo que apoyar. Sin nada más,
   la tira parece dibujada sobre la página en vez de estar por encima de
   ella, y todo el bloque de arriba —que es oscuro y pesa— queda flotando
   sobre un vacío.

   Se resuelve con una sombra corta hecha con degradé, no con
   `box-shadow`. La sombra de caja es simétrica y difusa: se derrama a
   los costados y se nota como efecto. Un degradé de doce píxeles cae
   sólo hacia abajo, muere rápido, y lo que se percibe no es una sombra
   sino que la tira tiene un canto. Es lo que hace ATB.

   Va en `::after` y no en el borde para no tocar el `border-bottom` de
   un píxel, que sigue siendo el que define el filo. Y con
   `pointer-events: none` porque cae sobre el contenido de la página. */
.ar-nav {
  position: relative;
  background: var(--ar-papel);
  border-bottom: 1px solid var(--ar-linea);
}
.ar-nav::after {
  content: "";
  position: absolute; top: 100%; left: 0; right: 0; height: 12px;
  pointer-events: none; z-index: 3;
  background: linear-gradient(to bottom,
              rgba(25,23,20,.065) 0%,
              rgba(25,23,20,.022) 45%,
              rgba(25,23,20,0)    100%);
}
.ar-nav-inner {
  display: flex; gap: 38px; justify-content: center; align-items: center; height: 45px;
  font-family: 'Archivo', sans-serif; font-weight: 400;
  font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
  overflow-x: auto; scrollbar-width: none;
}
.ar-nav-inner::-webkit-scrollbar { display: none; }
.ar-nav-inner a {
  position: relative; display: inline-flex; align-items: center;
  /* CENTRADO ÓPTICO, NO MATEMÁTICO.
     El flex centra la CAJA del texto, pero la caja no es la tinta: en
     versalitas no hay descendentes, así que el hueco que la tipografía
     reserva abajo para las colas de la p y la g queda vacío y las
     palabras se ven altas. Medido acá: la tinta quedaba 1,25px por
     encima del centro real de la tira (contando el filete de abajo).
     De ahí este empujón de 1px, que no es un capricho ni un parche
     viejo: es la diferencia entre el centro de la caja y el de la
     tinta. Si cambia el cuerpo de la letra, hay que volver a medirlo. */
  line-height: 1; padding: 0; top: 1px; color: var(--ar-texto) !important;
  text-decoration: none; white-space: nowrap;
}
/* LA LÍNEA QUE CRECE (como en ATB).
   No es una raya que viaja de una palabra a otra: cada categoría tiene
   la suya, que nace del centro con ancho cero y se abre hasta el ancho
   exacto de la palabra. Al salir el mouse se cierra por donde vino.
   Es CSS puro: sin JavaScript no hay nada que se desincronice, y la
   línea mide siempre lo que mide el texto aunque cambie la fuente. */
.ar-nav-inner { position: relative; }
.ar-nav-inner a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 2px;
  background: var(--ar-naranja);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s cubic-bezier(.22,.75,.24,1);
}
.ar-nav-inner a:hover::after,
.ar-nav-inner a:focus-visible::after,
.ar-nav-inner a.activa::after { transform: scaleX(1); }
/* La activa se cierra un poco al pasar por otra: la atención es una sola. */
.ar-nav-inner:hover a.activa:not(:hover)::after { transform: scaleX(.35); opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .ar-nav-inner a::after { transition: none; }
}

@media (max-width: 1700px) { .ar-nav-inner { gap: 28px; font-size: 17.5px; } }
@media (max-width: 1400px) { .ar-nav-inner { gap: 24px; font-size: 16px; } }
@media (max-width: 1100px) { .ar-nav-inner { gap: 20px; font-size: 14px; justify-content: flex-start; } }
@media (max-width: 900px) {
  .ar-cab-inner { grid-template-columns: 1fr auto; height: 78px; gap: 18px; }
  .ar-buscador { display: none; }
  .ar-marca { justify-self: start; }
  .ar-wordmark { font-size: 22px; }
}


/* ═══ EL LISTADO, CON LA ESCALA DE ATB ═══════════════════════════
   En ATB la columna de filtros es angosta (~290px) y la pieza es
   grande: cuatro por fila, foto de ~355px. Nosotros teníamos cinco
   columnas de 256px y un panel de filtros de 340px — el filtro pesaba
   más que la mercadería. Se invierte: menos filtro, más pieza. */

/* En ATB la foto de la pieza mide ~355px. Con nuestro ancho de página
   de 1440 no se llega: cuatro columnas dan 246. El listado (y solo el
   listado) respira hasta 1760, que es lo que hace falta para que la
   pieza tenga el tamaño de la referencia. */
/* EL CONJUNTO, CENTRADO EN LA PÁGINA.
   Antes el bloque se estiraba de borde a borde y el sobrante caía todo
   de un lado. Ahora filtro y cuadrícula forman un bloque de ancho
   definido (290 + 18 + cuatro columnas) que se centra solo, así el aire
   que queda se reparte igual a izquierda y derecha en cualquier
   pantalla. Y el hueco entre el filtro y las piezas baja de 34 a 18. */
.listado-layout {
  grid-template-columns: 290px auto !important;
  justify-content: center !important;
  gap: 18px !important;
}
/* EL LISTADO, ANCHO PERO NO PEGADO AL BORDE. El contenedor del listado
   es .dpp-wrap (no .wrap): se le saca el tope de ancho para que la
   cuadrícula ocupe todo lo que pueda y las piezas se vean grandes de
   verdad. Pero 10px de margen no es un margen: en cuanto el bloque
   —filtro + cuatro columnas— pasa el ancho de la pantalla, el centrado
   deja de tener efecto y el filtro queda comiéndose el borde izquierdo.
   48px a cada lado: la pieza sigue grande y la página tiene orilla.
   En celular manda la regla de 12px de más abajo. */
.dpp-wrap:has(.listado-layout) {
  max-width: none !important;
  width: calc(100% - 96px) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
@media (max-width: 1200px) {
  .dpp-wrap:has(.listado-layout) { width: calc(100% - 48px) !important; }
}
.listado-resultados .dpp-similares,
.listado-resultados .dpp-similares.home-carrusel {
  display: grid !important;
  /* Columnas de ancho acotado: le dan al bloque una medida propia para
     poder centrarse, y evitan que las piezas se estiren sin control en
     pantallas muy anchas. */
  grid-template-columns: repeat(4, minmax(0, 320px)) !important;
  /* Entre fotos, un aire mínimo: la grilla se lee como una lámina y no
     como cuatro tarjetas sueltas. El aire vertical se mantiene, que es
     lo que deja respirar al título y al precio de cada pieza. */
  gap: 40px 14px !important;
}

/* El panel de filtros venía del PULPA viejo: caja crema con esquinas
   redondeadas y sombra. Acá no hay cajas — es una columna con una línea
   fina al costado y esquinas vivas, como todo lo demás. */
.filtros {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 24px 0 0 !important;
}
.filtros label, .filtros .filtros-label, .filtros legend {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 10.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ar-texto-2) !important;
}
.filtros input, .filtros select {
  background: transparent !important;
  border: 1px solid var(--ar-linea) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  height: 44px;
  color: var(--ar-texto) !important;
}
.filtros input:focus, .filtros select:focus {
  border-color: var(--ar-ink) !important;
  outline: 0 !important;
}
.filtros input::placeholder { color: var(--ar-texto-2) !important; }
.filtros .dpp-btn-primary { width: 100%; }
.filtros a, .filtros .limpiar {
  color: var(--ar-texto-2) !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.filtros a:hover { color: var(--ar-naranja) !important; }

/* El encabezado del listado: título grande y el rastro chiquito arriba */
.listado-head h1, .listado-titulo {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
}
.listado-conteo, .listado-head p { color: var(--ar-texto-2) !important; font-size: 14px !important; }

/* EL TÍTULO DE LA SECCIÓN, MÁS CHICO.
   Venía de la hoja anterior en Roboto 700 a 46px, y con la tipografía
   del archivo —versalitas con letterspacing— el mismo cuerpo pesa
   bastante más: "GUITARRAS ACÚSTICAS" medía 56px de caja contra los
   46 de ATB, y quedaba gritando arriba de una grilla de cuatro fotos.
   El título nombra dónde estás; no es la pieza. */
.listado-titulo-xl {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  font-size: clamp(26px, 2.6vw, 38px) !important;
  line-height: 1.12 !important;
  margin: 0 0 10px !important;
}

@media (max-width: 1200px) {
  .listado-layout { grid-template-columns: 250px auto !important; gap: 16px !important; }
  .listado-resultados .dpp-similares { grid-template-columns: repeat(3, minmax(0, 320px)) !important; }
}
@media (max-width: 900px) {
  .listado-layout { grid-template-columns: 1fr !important; }
  .filtros { border-bottom: 1px solid var(--ar-linea) !important; padding: 0 0 24px !important; }
  .listado-layout { justify-content: stretch !important; }
  .listado-resultados .dpp-similares { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 10px !important; }
}


/* ═══ CORRECCIONES DEL LISTADO (segunda pasada) ══════════════════ */

/* 1. LA CUADRÍCULA, CENTRADA EN SU HUECO.
   El bloque quedaba pegado a la derecha porque la columna de resultados
   arranca donde termina el filtro y las cuatro fotos no llenaban el
   ancho exacto: sobraba a un solo lado. Ahora la grilla se centra
   dentro de su columna, así el aire se reparte igual a izquierda y
   derecha. */
.listado-resultados { display: block; }
.listado-resultados .dpp-similares {
  margin-inline: auto !important;
  justify-content: center !important;
  width: 100%;
}

/* 2. EL COMBO DE MARCAS: una caja, no dos.
   Venía del PULPA viejo con caja crema redondeada, y adentro el select
   con SU propio borde — de ahí el efecto de "uno adentro del otro".
   Acá el contorno lo pone el combo y nada más. */
.marca-combo {
  background: transparent !important;
  border: 1px solid var(--ar-linea) !important;
  border-radius: 0 !important;
  padding: 6px 8px !important;
  min-height: 44px !important;
  row-gap: 6px;
}
.marca-combo:focus-within { border-color: var(--ar-ink) !important; }
.filtros .marca-combo select,
.marca-combo-select {
  border: 0 !important;
  background: transparent !important;
  height: auto !important;
  min-width: 110px;
  padding: 4px 2px !important;
  font-family: 'Funnel Sans', sans-serif !important;
  font-size: 14px !important;
  color: var(--ar-texto-2) !important;
}

/* 3. LAS PÍLDORAS DE MARCA: esquina viva, como todo lo demás. */
.marca-pill {
  background: var(--ar-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 12.5px !important;
  letter-spacing: .02em;
  padding: 6px 6px 6px 10px !important;
}
.marca-pill-x {
  background: transparent !important;
  color: rgba(255,255,255,.7) !important;
  border-radius: 0 !important;
  width: 16px !important; height: 16px !important;
  font-size: 12px !important;
}
.marca-pill-x:hover { color: #fff !important; }


/* ═══ LA FICHA: PROPORCIÓN Y ESCALA ══════════════════════════════ */

/* Las miniaturas, en 4:5 como todo lo demás. Eran cuadradas (94×94) y
   deformaban la lectura de la pieza: una guitarra vertical vista en un
   cuadrado no se parece a lo que hay en la foto grande. */
.dpp-media-card .dpp-thumb, .dpp-thumb {
  aspect-ratio: 4 / 5 !important;
  width: 84px !important;
  height: auto !important;
  border-radius: 0 !important;
  overflow: hidden;
}
/* Las miniaturas también apoyan en la base: si hay que recortar, se
   recorta arriba. El pie de la pieza no se pierde en ningún tamaño. */
.dpp-media-card .dpp-thumb img, .dpp-thumb img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center bottom !important;
}

/* LA COLUMNA DE LA PIEZA, SIN HUECOS.
   Al atar la foto al alto de la pantalla, su ancho dejó de ser el de la
   columna y quedaron dos aires muertos: uno a la derecha de la foto y
   otro debajo de las miniaturas. La solución es que el bloque entero
   —miniaturas + foto— mida lo que mide la foto y nada más, y que las
   miniaturas tengan exactamente su alto. */
/* El ANCHO manda y no se mueve: es lo que sostiene la columna. El alto
   sale de la proporción de la foto (4:5 si es de IG, la suya si no), y
   se topa al alto de la pantalla para que la ficha no explote abajo. */
.dpp-media-card .dpp-photo-main, #dpp-photo-zoomable {
  aspect-ratio: 4 / 5;
  width: calc(min(80vh, 820px) * 0.8) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(86vh, 900px);
  margin: 0 !important;
}
.dpp-media-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}
.dpp-media-card .dpp-photo-col {
  width: auto !important;
  flex: 0 0 auto !important;
  display: flex; flex-direction: column;
}
/* La tira de miniaturas termina donde termina la foto, y se desliza si
   hay más de las que entran.
   El alto EXACTO lo pone el JS del pie, midiendo la foto: desde que la
   caja toma la proporción de cada imagen no hay fórmula que acierte.
   Acá sólo queda un tope de seguridad —sin `!important`, porque si no
   le gana al valor medido y la tira vuelve a sobresalir— para el rato
   entre que se dibuja la página y corre el script. */
.dpp-media-card .dpp-thumbs {
  align-self: flex-start;
  max-height: min(86vh, 900px);
  flex: 0 0 auto !important;
  overflow-y: auto;
  scrollbar-width: thin;
}


/* LA COLUMNA DE TEXTO, ANGOSTA Y PEGADA A LA FOTO.
   580px para un título, un precio y tres botones era demasiado: la
   línea se estiraba y el bloque competía con la pieza. Ahora mide 340 y
   —esto es lo importante— arranca justo donde termina la foto, en vez
   de irse al borde derecho de la pantalla. Las dos columnas miden lo
   que miden sus contenidos y el CONJUNTO se centra en la página, así el
   aire sobrante queda repartido a los costados y no en el medio. */
.dpp-layout {
  display: grid !important;
  grid-template-columns: calc(min(80vh, 820px) * 0.8 + 96px) 340px !important;
  justify-content: center !important;
  /* 40px era poco: la columna de texto arrancaba pegada al borde de la
     foto y las dos cosas se leían como un solo bloque. 80 las separa lo
     suficiente para que se lean como dos, sin desarmar el conjunto. */
  gap: 80px !important;
}
@media (max-width: 1100px) {
  .dpp-layout { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* Con la columna angosta, el título y el precio se achican con ella:
   si no, el título rompe en cuatro renglones y el precio se come el
   ancho entero. */
.dpp-info h1, .dpp-info .dpp-titulo {
  font-size: 22px !important;
  line-height: 1.25 !important;
}
.dpp-price, .dpp-price-none { font-size: 27px !important; }
.dpp-info .dpp-btn-primary, .dpp-info .dpp-btn-sec {
  font-size: 11.5px !important;
  letter-spacing: .06em !important;
  height: 44px;
  padding: 0 14px !important;
}
.dpp-disclaimer, .dpp-info .dpp-nota { font-size: 12.5px !important; }

/* OJO: acá me equivoqué antes. `.dpp-media` no contiene solo la foto —
   abajo lleva la descripción y la ficha técnica, con párrafos largos—,
   así que ponerle `max-content` le daba 1529px de ancho y empujaba la
   columna de texto fuera de la pantalla.
   La medida correcta es la de la FOTO, que es calculable: su alto es
   min(80vh, 820px) y su proporción 4:5, así que su ancho es ese alto
   por 0,8. Más la tira de miniaturas (84) y el aire entre ambas (12). */
.dpp-media, .dpp-media-col {
  width: auto !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  min-width: 0;
}


/* Con texto fijo, sólo se cruza la foto: el mensaje no parpadea. */
.ar-hero.cambiando-foto .ar-hero-fondo { opacity: 0; }

/* El kicker aparece y desaparece según el slide: sin bienvenida en la
   primera foto, con "Última incorporación" en las que siguen. */
.ar-kicker[hidden] { display: none !important; }
.ar-hero.cambiando .ar-kicker { opacity: 0; transition: opacity .26s ease; }
.ar-kicker { transition: opacity .26s ease; }

/* La caja toma la proporción REAL de la foto cuando no es de IG, y
   dentro entra entera: nada recortado, ninguna franja, el ancho no se
   mueve. La variable la escribe la ficha midiendo el archivo. */
.piel-archivo .dpp-photo-main[style*="--ficha-ar"],
.piel-archivo #dpp-photo-zoomable[style*="--ficha-ar"] {
  aspect-ratio: var(--ficha-ar) !important;
}
.piel-archivo .dpp-track .dpp-slide-img { object-fit: contain !important; }


/* ── La descripción plegada, cortada en línea entera ────────────── */
/* El alto máximo estaba en 155,2px con renglones de 25,92: daban 5,99
   líneas y la sexta se veía cortada por la mitad. Se ajusta a un número
   exacto de renglones y se agrega un degradado al pie, así el corte se
   lee como "sigue" y no como un error de maquetación. */
/* Con un tope en píxeles nunca cierra: los párrafos suman márgenes y el
   corte cae en cualquier lado. Con line-clamp el navegador corta por
   renglones enteros, que es lo único que se ve limpio. */
.piel-archivo .dpp-desc-top-txt {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  max-height: none !important;
  overflow: hidden;
}
/* Desplegada, ni tope ni degradado. */
.piel-archivo .dpp-desc-top-txt.abierto,
.piel-archivo .dpp-desc-top-txt.abierta {
  display: block !important;
  -webkit-line-clamp: none;
  max-height: none !important;
}

/* El "Ver más" con el mismo idioma que el resto: mayúsculas chicas y
   subrayado naranja, no un link suelto en bordó. */
.piel-archivo .dpp-desc-top-mas {
  background: none; border: 0; padding: 6px 0 0; cursor: pointer;
  font-family: 'Archivo', sans-serif; font-weight: 400;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ar-texto) !important;
}
.piel-archivo .dpp-desc-top-mas:hover { color: var(--ar-naranja) !important; }


/* El cuerpo de la card conservaba las esquinas redondeadas de abajo
   (0 0 8px 8px), heredadas del diseño viejo: al pasar el mouse se veía
   el fondo con las puntas comidas. Todo recto. */
.dpp-sim-card, .dpp-sim-card *,
.dpp-sim-body, .dpp-sim-foto {
  border-radius: 0 !important;
}
.dpp-sim-card:hover .dpp-sim-body,
.dpp-sim-card:hover { background: transparent !important; }


/* ═══ UN SOLO HEADER, IGUAL EN TODAS LAS PANTALLAS ═══════════════
   El header usaba el .wrap de 1180 mientras el contenido del listado
   va casi de borde a borde: quedaba metido para adentro y parecía otro
   header. Ahora la franja, el header y la tira de categorías usan el
   mismo ancho que el resto de la página, en todas las pantallas. */
.piel-archivo .ar-tira .wrap,
.piel-archivo .ar-cab-inner,
.piel-archivo .ar-nav-inner {
  width: calc(100% - 28px) !important;
  max-width: none !important;
  margin-inline: auto !important;
  /* Y EL RELLENO EN CERO, QUE ERA LO QUE FALTABA.
     Se fijaba el ancho pero no el `padding` lateral, y ese lo pone la
     hoja anterior con distinto valor según la página: medido, la
     portada daba 30px y el listado 0. Mismo ancho, distinto relleno =
     el buscador arrancaba 30px más adentro en una que en la otra, y el
     header parecía otro. Con el relleno en cero, el único que decide
     dónde empieza la franja es el ancho de arriba. */
  padding-inline: 0 !important;
}
/* La tira de categorías se sigue leyendo centrada, pero ya no se corta
   contra un borde invisible. */
.piel-archivo .ar-nav-inner { justify-content: center; }

/* Y el contenido de la landing arranca en la misma línea que el header,
   para que la vertical del sitio sea una sola. */
.piel-archivo .ar-hero-txt > .wrap { padding-left: 14px; }


/* Los accesos, todos pegados a la derecha y con el mismo aire entre
   íconos. Sin el enlace de texto "La red", el bloque se compacta. */
.piel-archivo .ar-accesos {
  justify-self: end !important;
  margin-right: 0 !important;
  /* 24 y no 18 desde el 06/09/2026: con tres palabras colgando (Tiendas,
     Fav, Radar) las palabras se tocaban entre si aunque los iconos
     tuvieran aire de sobra. El aire de la fila lo manda el rotulo mas
     ancho, no el icono. */
  gap: 24px !important;
}
.piel-archivo .ar-accesos .ar-icono { padding: 0 !important; }

/* LA RED, CON NOMBRE — 01/09/2026 ────────────────────────────────────
   El icono de tres nodos no se entiende: al lado del corazon y de la
   campana parecia otro control de cuenta. Se le pone la palabra al
   lado. Debajo de 1080px la franja no tiene lugar para una palabra de
   quince letras compitiendo con la marca, asi que vuelve a ser icono
   solo — que es como sigue viviendo en el celular, donde el lugar lo
   ocupa la barra de abajo. */
/* EL RÓTULO CUELGA, NO EMPUJA. La fila se alinea al centro, así que un
   ítem más alto que los demás sube su propio ícono y rompe la línea de
   los otros cuatro. Poniendo la palabra en absoluto, la caja del enlace
   sigue midiendo lo que mide el ícono: los cinco quedan a la misma
   altura y el texto queda colgando abajo, que es donde tiene que estar. */
/* LA MISMA PALABRA PARA EL CORAZON Y EL RADAR — 06/09/2026.
   Se generaliza el rotulo a `.ar-ic-txt`; `.ar-ic-red-txt` queda porque
   es el que usa Tiendas y no hay razon para tocar ese marcado. Las dos
   clases comparten TODO: si esto se cambia, se cambia para los tres. */
.ar-ic-red { position: relative; }
.ar-ic-red-txt, .ar-ic-txt {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  font-family: 'Funnel Sans', sans-serif;
  font-weight: 300;
  font-size: 9.5px;
  letter-spacing: .06em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: .78;
}
.ar-ic-red:hover .ar-ic-red-txt,
.ar-icono:hover .ar-ic-txt { opacity: 1; }
@media (max-width: 900px) {
  .ar-ic-red-txt, .ar-ic-txt { display: none !important; }
}


/* Mientras baja la foto en alta para el zoom, un aviso discreto: el que
   amplía tiene que saber que lo que ve va a mejorar en un segundo. */
.dpp-photo-main.cargando-hd::after {
  content: 'Cargando alta resolución…';
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(25,25,25,.82); color: #fff;
  font-family: 'Archivo', sans-serif; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; padding: 7px 12px; z-index: 5; pointer-events: none;
}


/* ═══ ENTRAR / REGISTRO / CAMBIAR CLAVE ══════════════════════════
   Eran las últimas pantallas con el diseño viejo: tarjeta crema con
   esquinas redondeadas y sombra, botón bordó. Pasan al mismo idioma
   que el resto — sin caja, tipografía del sitio, un solo acento. */

.auth-main { background: var(--ar-papel) !important; padding: 84px 0 110px !important; }

/* La "tarjeta" deja de ser tarjeta: es una columna angosta con aire. */
.auth-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 400px !important;
  padding: 0 !important;
  margin-inline: auto !important;
}

.auth-titulo {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 26px !important;
  color: var(--ar-texto) !important;
  margin: 0 0 8px !important;
}
.auth-sub {
  color: var(--ar-texto-2) !important;
  font-size: 14.5px !important;
  margin: 0 0 34px !important;
}

/* Campos: contorno fino, esquina viva, foco en negro. */
.auth-campo { margin-bottom: 18px !important; }
.auth-campo label {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 10.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ar-texto-2) !important;
  margin-bottom: 7px !important;
}
.auth-campo input, .auth-campo select {
  background: transparent !important;
  border: 1px solid var(--ar-linea) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 48px !important;
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  color: var(--ar-texto) !important;
}
.auth-campo input:focus, .auth-campo select:focus {
  border-color: var(--ar-ink) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.auth-campo input::placeholder { color: var(--ar-texto-2) !important; }
.auth-campo small { color: var(--ar-texto-2) !important; font-size: 12.5px !important; }

/* El botón: el único bloque de color de la pantalla. */
.auth-boton {
  background: var(--ar-naranja) !important;
  border: 1px solid var(--ar-naranja) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  height: 50px !important;
  box-shadow: none !important;
  margin-top: 8px;
}
.auth-boton:hover { background: var(--ar-naranja-2) !important; border-color: var(--ar-naranja-2) !important; }

.auth-divider {
  color: var(--ar-texto-2) !important;
  font-family: 'Archivo', sans-serif !important;
  font-size: 10.5px !important; letter-spacing: .16em !important; text-transform: uppercase !important;
}
.auth-divider:before, .auth-divider:after { background: var(--ar-linea) !important; }

.auth-google {
  background: transparent !important;
  border: 1px solid var(--ar-linea) !important;
  border-radius: 0 !important;
  color: var(--ar-texto) !important;
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 300 !important;
  height: 48px !important;
}
.auth-google:hover:not(:disabled) { border-color: var(--ar-ink) !important; }

/* EL CARTEL DEL CANDADO, EN LA PANTALLA DE ENTRAR.
   Misma forma que el error —barrita al costado, sin caja— porque es el
   mismo tipo de mensaje: algo que hay que leer una vez antes de escribir
   la clave. Pero en la tinta apagada del sitio y no en naranja: no es un
   problema de quien está leyendo, es una explicación. */
.auth-obra {
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid var(--ar-linea, #d8cfc2) !important;
  border-radius: 0 !important;
  color: var(--ar-texto-2, #7d7263) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  padding: 9px 0 9px 14px !important;
  margin-bottom: 18px !important;
}

/* Un error tiene que verse, pero no gritar. */
.auth-error {
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid var(--ar-naranja) !important;
  border-radius: 0 !important;
  color: var(--ar-texto) !important;
  font-size: 14px !important;
  padding: 10px 0 10px 14px !important;
}
.auth-ok {
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid var(--ar-militar, #687057) !important;
  border-radius: 0 !important;
  color: var(--ar-texto) !important;
  padding: 10px 0 10px 14px !important;
}

.auth-pie { color: var(--ar-texto-2) !important; font-size: 13.5px !important; margin-top: 28px !important; }
.auth-pie a { color: var(--ar-texto) !important; border-bottom: 1px solid var(--ar-naranja); }
.auth-pie a:hover { text-decoration: none !important; color: var(--ar-naranja) !important; }

/* El ojito de la contraseña */
.pw-eye { color: var(--ar-texto-2) !important; background: transparent !important; border: 0 !important; }
.pw-eye:hover { color: var(--ar-texto) !important; }

@media (max-width: 700px) {
  .auth-main { padding: 48px 0 70px !important; }
  .auth-card { max-width: none !important; padding: 0 18px !important; }
}


/* Cambiar contraseña usa sus propias clases (clave-*): mismo idioma. */
.clave-caja {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 400px !important;
  margin-inline: auto !important;
  padding: 0 !important;
}
.clave-titulo {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important; text-transform: uppercase !important;
  letter-spacing: .04em !important; font-size: 26px !important;
  color: var(--ar-texto) !important;
}
.clave-bajada { color: var(--ar-texto-2) !important; font-size: 14.5px !important; }
.clave-caja input {
  background: transparent !important;
  border: 1px solid var(--ar-linea) !important;
  border-radius: 0 !important; height: 48px !important;
  font-family: 'Funnel Sans', sans-serif !important; font-weight: 300 !important;
  font-size: 15px !important;
}
.clave-caja input:focus { border-color: var(--ar-ink) !important; outline: 0 !important; }
.clave-caja label {
  font-family: 'Archivo', sans-serif !important; font-weight: 400 !important;
  font-size: 10.5px !important; letter-spacing: .16em !important;
  text-transform: uppercase !important; color: var(--ar-texto-2) !important;
}
.clave-marca .brand-seal { background: var(--ar-naranja) !important; border-radius: 0 !important; }


/* El aviso de "Registrate para ver el precio" es una nota al pie, no un
   título: peso liviano y el mismo gris del resto de los metadatos. En el
   listado heredaba el peso del precio, que sí va marcado. */
.ar-pieza-pie .tienda,
.dpp-sim-gate,
.dpp-sim-meta .dpp-sim-gate {
  font-weight: 300 !important;
  font-style: normal !important;
  color: var(--ar-texto-2) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}


/* Las chapitas sobre la foto (NUEVO, VERIFICADA) son una marca al
   margen, no un titular: achicadas y despegadas apenas del borde, para
   que la primera lectura sea la pieza y no la etiqueta. */
/* Mismo arreglo que arriba: con `^=` esta regla también alcanzaba al
   contenedor `.card-chips` y le daba fondo y padding de chapa. */
.card-chip-nuevo, .card-chip-verif, .card-chip, [class*="card-chip-"],
.ar-chapa {
  font-size: 8px !important;
  letter-spacing: .12em !important;
  padding: 3px 6px !important;
  border-radius: 2px !important;
  line-height: 1 !important;
  /* ── A LA MISMA ALTURA QUE EL CORAZÓN — recalculado 06/09/2026 ──
     Se alinean por el CENTRO y no por el borde, y esto ya estaba
     decidido antes: la chapa mide 14px de alto y el corazón 26, así que
     con el mismo `top` la chapa parece flotar más arriba aunque el
     número sea idéntico.

     Los números salen de medir la página, no de estimar. Con el corazón
     nuevo (caja de 34 con ícono de 26 centrado, a 12 del margen):
       · su borde visual cae a 16px del margen derecho
       · su centro cae a 29px del tope
     La chapa mide 14 de alto, así que para que su centro también caiga
     en 29 tiene que arrancar en 29 − 7 = 22. Y a 16 de la izquierda,
     que es el espejo exacto del corazón.
     Si algún día cambia el tamaño del corazón, esta cuenta hay que
     rehacerla: son dos números atados, no dos gustos sueltos. */
  top: 22px !important;
  left: 16px !important;
}
.card-chips { top: 22px !important; left: 16px !important; gap: 4px !important; }
.card-chips [class*="card-chip-"] { position: static !important; }
/* Y el cinturón: el contenedor no pinta nada, tenga o no chapas adentro.
   Si mañana otra hoja vuelve a alcanzarlo con un selector amplio, esto
   lo ataja. */
.card-chips {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* ═══ LA FICHA EN CELULAR ═════════════════════════════════════════
   En pantalla chica la ficha reventaba: la columna de la foto conserva
   un ancho calculado a partir del ALTO de la ventana —que en un celular
   es enorme comparado con el ancho— y el bloque se iba de la pantalla
   arrastrando la barra de scroll horizontal.
   Acá se desarma la grilla de dos columnas y todo pasa a medir por el
   ANCHO, que es la única medida que importa en un teléfono. */
@media (max-width: 900px) {

  /* Una sola columna: primero la pieza, después los datos. */
  .dpp-layout {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  .dpp-media, .dpp-media-col, .dpp-info {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .dpp-info { margin-top: 22px !important; }

  /* La foto manda por ancho, no por alto. Y las miniaturas pasan a ser
     una tira horizontal debajo, que es como se navega con el pulgar. */
  .dpp-media-card {
    display: flex !important;
    flex-direction: column-reverse !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .dpp-media-card .dpp-photo-main, #dpp-photo-zoomable {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 5;
  }
  .dpp-media-card .dpp-photo-col { width: 100% !important; }
  .dpp-media-card .dpp-thumbs {
    display: flex !important;
    flex-direction: row !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding-bottom: 4px;
  }
  .dpp-media-card .dpp-thumb, .dpp-thumb {
    flex: 0 0 auto !important;
    width: 64px !important;
  }

  /* Nada puede empujar la página a lo ancho. */
  html, body { overflow-x: hidden; }
  .dpp-wrap, .dpp-body > .dpp-wrap { max-width: 100% !important; width: calc(100% - 24px) !important; }

  /* El título y el precio, a escala de teléfono. */
  .dpp-info h1, .dpp-info .dpp-titulo { font-size: 20px !important; }
  .dpp-price, .dpp-price-none { font-size: 26px !important; }
  .dpp-ficha-fila { grid-template-columns: 1fr !important; gap: 2px !important; padding: 11px 0 !important; }

  /* El gráfico de mercado no se sale de la pantalla. */
  .mkt, .mkt svg { max-width: 100% !important; height: auto !important; }
}


/* ═══ EL CELULAR ══════════════════════════════════════════════════
   Todo lo de abajo es la revisión de móvil. La regla que ordena el
   bloque: en un teléfono la única medida que existe es el ANCHO. Todo
   lo que se calculaba con el alto de la ventana, o lo que asumía dos
   columnas, se desarma acá. */

/* La lupa del header sólo existe en pantalla chica. */
.ar-solo-movil { display: none !important; }

/* EL AVATAR NO SE DEFORMA.
   Estaba adentro de un flex sin freno: cuando el renglón se apretaba,
   el navegador le achicaba el ancho pero no el alto, y el círculo salía
   ovalado. `flex: 0 0 26px` le prohíbe encogerse. */
.ar-avatar {
  flex: 0 0 26px !important;
  width: 26px !important; height: 26px !important;
  min-width: 26px; aspect-ratio: 1 / 1;
}
/* Si hay foto, el ícono de persona sobra. */
.ar-avatar + .ar-cuenta-icono { display: none; }

@media (max-width: 900px) {
  /* HEADER: quedan la marca y cuatro íconos. Ni foto de perfil ni
     nombre: en 390px el nombre empuja todo y la foto se deforma. */
  .ar-solo-movil { display: inline-flex !important; }
  .ar-accesos { gap: 15px !important; }
  .ar-avatar { display: none !important; }
  .ar-avatar + .ar-cuenta-icono { display: inline-flex !important; }
  .ar-cuenta-nombre { display: none !important; }
  .ar-cuenta .catnav-caret { display: none !important; }
  .ar-cuenta { gap: 0 !important; }
  .ar-acceso span, .ar-acceso { gap: 6px !important; }

  /* La tira de arriba: una línea, sin cortar palabras a la mitad. */
  .ar-tira .wrap { height: 34px; font-size: 11px; }
  .ar-tira-izq { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* El menú de cuenta se abre pegado al borde derecho, sin salirse. */
  .ar-cuenta-menu { right: -6px !important; max-width: calc(100vw - 24px); }
}

@media (max-width: 560px) {
  /* Debajo de 560 la frase de la tira no entra sin comerse el país. */
  .ar-tira-izq { display: none !important; }
  .ar-tira .wrap { justify-content: flex-end; }
  .ar-wordmark { font-size: 20px !important; letter-spacing: .18em !important; }
  .ar-sello { font-size: 9px !important; letter-spacing: .38em !important; }
  .ar-accesos { gap: 13px !important; }
}

/* EL LISTADO EN EL CELULAR ─────────────────────────────────────────
   1. La cabecera va centrada: con una sola columna, el título alineado
      a la izquierda quedaba desbalanceado contra una cuadrícula que sí
      está centrada.
   2. El filtro pasa a ser un cajón que se abre. Antes ocupaba la
      pantalla entera y había que hacer scroll a ciegas para llegar a
      la primera foto. */
@media (max-width: 900px) {
  .listado-migas, .listado-titulo-xl, .listado-resumen, .listado-resumen-fila {
    text-align: center !important;
  }
  .listado-migas, .listado-resumen-fila { justify-content: center !important; }
  .listado-titulo-xl { font-size: 25px !important; line-height: 1.15 !important; }

  /* El cajón de filtros */
  .filtros-abrir {
    display: flex !important;
    align-items: center; justify-content: space-between;
    width: 100%; height: 46px; padding: 0 14px;
    margin: 0 0 18px;
    background: transparent;
    border: 1px solid var(--ar-linea);
    border-radius: 0;
    font-family: 'Archivo', sans-serif; font-weight: 400;
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ar-texto); cursor: pointer;
  }
  /* La chapita con cuántos filtros hay aplicados. Un cajón cerrado que
     esconde filtros puestos es peor que uno abierto: mirás dos
     resultados y no sabés por qué son dos. 20/09/2026. */
  .filtros-abrir-n {
    margin-left: 8px; margin-right: auto;
    min-width: 19px; height: 19px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ar-naranja); color: #fff;
    font-size: 11px; letter-spacing: 0; line-height: 1;
  }
  .filtros-abrir .fa-flecha { transition: transform .2s ease; }
  .filtros-abrir[aria-expanded="true"] .fa-flecha { transform: rotate(180deg); }
  .listado-layout .filtros[hidden] { display: none !important; }
  .filtros { padding: 0 0 22px !important; margin-bottom: 8px; }
}
.filtros-abrir { display: none; }

/* LA CUADRÍCULA EN EL CELULAR: dos columnas, márgenes de 12px y el pie
   de la pieza en el mismo centro que la foto. */
@media (max-width: 700px) {
  .dpp-similares, .listado-resultados .dpp-similares {
    gap: 26px 10px !important;
  }
  .dpp-sim-titulo { font-size: 13.5px !important; letter-spacing: .03em; }
  .dpp-sim-precio { font-size: 13.5px !important; }
  .dpp-sim-body { padding: 10px 0 0 !important; }
  .dpp-sim-card, .dpp-sim-body, .dpp-sim-titulo, .dpp-sim-meta {
    text-align: center !important;
  }
  .dpp-sim-meta { justify-content: center !important; }
}

/* LOS TÍTULOS DE LA FICHA, DENTRO DE LA PANTALLA.
   Venían con `margin-left: -28px` — el "título colgado" del diseño
   viejo, que en escritorio saca el título al borde de la caja. En un
   teléfono no hay borde que sobre: los 28px se los comía la pantalla y
   "LA PIEZA" aparecía cortada como "A PIEZA". */
@media (max-width: 900px) {
  .dpp-section-title,
  .dpp-ficha-titulo,
  .mkt-tit { margin-left: 0 !important; }
  .dpp-section-title h2 { font-size: 19px !important; }
  .dpp-ficha-titulo { font-size: 16px !important; }
}

/* LA TIRA DE CATEGORÍAS EN EL CELULAR ───────────────────────────────
   Estaba centrada y no entraba: cuando un flex centrado desborda, lo
   que sobra se corta de LOS DOS lados y la parte de la izquierda queda
   inalcanzable — con el scroll al tope igual no se llegaba a
   ELÉCTRICAS, ACÚSTICAS ni BAJOS. Alineada al arranque, la tira se
   recorre entera con el pulgar. */
@media (max-width: 1100px) {
  .piel-archivo .ar-nav-inner,
  .ar-nav-inner { justify-content: flex-start !important; }
}
@media (max-width: 900px) {
  .ar-nav-inner { gap: 22px !important; padding-inline: 12px !important; }
  /* Un degradado al borde derecho avisa que la tira sigue. */
  .ar-nav { position: relative; }
  .ar-nav::after {
    content: ''; position: absolute; top: 0; right: 0; width: 34px; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0), var(--ar-papel));
    pointer-events: none;
  }
  /* LA TIRA DE ARRIBA NO VA EN EL CELULAR.
     La frase de posicionamiento, el país y el link a Instagram son
     contexto de escritorio: en un teléfono se comen el primer renglón
     de una pantalla que ya es corta, y ninguno de los tres es algo que
     alguien vaya a tocar desde el celular. */
  .ar-tira { display: none !important; }
}

/* EL HEADER EN EL CELULAR, EN UN SOLO RENGLÓN ───────────────────────
   Sin la tira de arriba el header quedó de 78px, pero la marca y los
   íconos se peleaban el ancho: el punto naranja se caía al renglón de
   abajo y "EL ARCHIVO" se partía en dos. La marca no se parte nunca, y
   la palabra "Ingresar" se va: el ícono de persona ya lo dice. */
@media (max-width: 900px) {
  .ar-cab-inner { gap: 10px !important; }
  .ar-marca { flex: none; }
  .ar-wordmark { white-space: nowrap; display: inline-flex; align-items: center; }
  .ar-punto { flex: none; margin-left: 3px; }
  .ar-sello { white-space: nowrap; font-size: 8.5px !important; letter-spacing: .34em !important; margin-left: .34em !important; }
  .ar-acceso-txt { display: none !important; }
  .ar-acceso { gap: 0 !important; }
  .ar-accesos { flex: none; }
}
@media (max-width: 900px) {
  /* Un solo margen para todo el sitio en el celular: 12px. El header
     arrancaba en 44 y la tira en 26 — la marca no quedaba a plomo con
     nada de lo que venía abajo. */
  .ar-cab .wrap, .ar-cab-inner { padding-inline: 12px !important; }
}

/* LA COLECCIÓN DE LA PORTADA: UNA PIEZA POR RENGLÓN ─────────────────
   Probé de a dos para que se viera el conjunto, y no: en 390px el
   título se parte en tres renglones y el precio y la tienda se apilan
   uno arriba del otro. La portada no es un listado —para recorrer está
   Explorar—; acá cada pieza se muestra, y para eso necesita el ancho
   entero. El listado sí sigue de a dos, que es donde se compara. */
@media (max-width: 560px) {
  .ar-grilla { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ar-pieza-tit { font-size: 15px !important; line-height: 1.4 !important; }
  .ar-pieza-pie, .ar-pieza-pie * { font-size: 14px !important; }
  .ar-sec-cab h2, .ar-sec-tit { font-size: 22px !important; }
  .ar-manifiesto p, .ar-manifiesto .ar-frase { font-size: 15px !important; }
}

/* EL ORDEN DE LA FICHA EN EL CELULAR ────────────────────────────────
   Apiladas, las dos columnas dejaban un orden absurdo: foto, luego la
   descripción y la ficha técnica ENTERAS, y recién al final el nombre
   de la pieza y el precio. En el teléfono el visitante leía media
   página antes de saber qué estaba mirando.
   Con `display: contents` la columna de la foto deja de ser una caja y
   sus partes pasan a ser hijas directas del layout: ahí sí se pueden
   ordenar una por una. Queda: foto → nombre y precio → descripción →
   ficha técnica → mercado → línea de tiempo. */
@media (max-width: 900px) {
  .dpp-layout { display: flex !important; flex-direction: column !important; }
  .dpp-media { display: contents !important; }
  .dpp-media-card       { order: 1; }
  .dpp-info             { order: 2; margin-top: 18px !important; }
  .dpp-desc-top         { order: 3; }
  .dpp-ficha-bajo-foto  { order: 4; }
  .mkt                  { order: 5; }
  .dpp-timeline         { order: 6; }
  .dpp-desc-top, .dpp-ficha-bajo-foto, .mkt, .dpp-timeline { width: 100% !important; margin-top: 26px !important; }
}

/* El aviso de "solo para registrados" venía del PULPA viejo: caja crema
   con esquinas redondeadas. En el archivo no hay esquinas redondeadas. */
.dpp-gate {
  border-radius: 0 !important;
  background: var(--ar-papel-2) !important;
  border: 0 !important;
  border-left: 2px solid var(--ar-naranja) !important;
  box-shadow: none !important;
}
.dpp-gate .dpp-btn-primary, .dpp-gate .dpp-btn-sec { border-radius: 0 !important; }

/* Los puntitos de la galería quedaron con el dorado del PULPA viejo:
   en el archivo el que marca posición es el naranja, y las rayitas son
   rectas — igual que las del carrusel de la portada. */
.dpp-dots .dpp-dot { border-radius: 0 !important; height: 3px !important; background: rgba(25,25,25,.18) !important; }
.dpp-dots .dpp-dot.activo { background: var(--ar-naranja) !important; }

/* EL HEADER NO REPITE LA BARRA DE ABAJO ────────────────────────────
   Abajo hay una barra fija con Inicio, Explorar, Radar, La red y
   Cuenta. Arriba queda lo que la barra NO tiene: el corazón de
   favoritos y la campana de señales. El radar sí está abajo, así que
   arriba sobra. */
@media (max-width: 900px) {
  .ar-ic-radar { display: none !important; }
}

/* LA RED: las casas también son archivo ─────────────────────────────
   Las tarjetas venían del PULPA viejo: esquinas redondeadas, sombra al
   pasar y el logo dentro de un cuadrado con radio. En el archivo no hay
   nada redondeado ni nada que levite. */
.red-card {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ar-linea) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 20px 0 !important;
}
.red-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-bottom-color: var(--ar-ink) !important;
}
.red-logo { border-radius: 0 !important; box-shadow: none !important; }
.red-nombre {
  font-family: 'Archivo', sans-serif !important; font-weight: 400 !important;
  text-transform: uppercase !important; letter-spacing: .05em !important;
  font-size: 16px !important; color: var(--ar-texto) !important;
}
.red-nivel { border-radius: 0 !important; }
.red-nivel.fundador { background: var(--ar-naranja) !important; color: #fff !important; }
.red-piezas { color: var(--ar-texto) !important; }
.red-piezas b { color: var(--ar-naranja) !important; }
.tienda-logo { border-radius: 0 !important; }

/* EL LOGO DIBUJADO EN EL HEADER ─────────────────────────────────────
   Reemplaza al wordmark tipográfico. Es el mismo archivo que usa el
   pie, así que la marca es una sola en todo el sitio. */
.ar-logo { height: 44px; width: auto; display: block; }
@media (max-width: 900px) {
  .ar-logo { height: 32px; }
  /* La cuenta también está en la barra de abajo: arriba sobra. */
  .ar-cuenta-item, .ar-acceso { display: none !important; }
}

/* La red bajó a la barra de abajo: arriba el header queda con la marca
   sola (y la campana, cuando hay sesión, que es donde se ve el globito
   con el número de señales). */
@media (max-width: 900px) {
  .ar-ic-red { display: none !important; }
}

/* LA BARRA DE ABAJO, EN EL IDIOMA DEL ARCHIVO ───────────────────────
   Venía con el fondo crema y el rojo oscuro del PULPA viejo para marcar
   dónde estás parado. Papel, línea fina arriba y el naranja marcando. */
.mobile-tabbar {
  background: var(--ar-papel) !important;
  border-top: 1px solid var(--ar-linea) !important;
  box-shadow: none !important;
}
.mobile-tabbar .mtab {
  color: var(--ar-texto-2) !important;
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: .01em !important;
}
.mobile-tabbar .mtab span { font-size: 10.5px !important; }
.mobile-tabbar .mtab.activo { color: var(--ar-naranja) !important; }
.mobile-tabbar .mtab-avatar { border-radius: 50% !important; }

/* LA CAMPANA Y SU GLOBITO ───────────────────────────────────────────
   La campanita sigue sonando y el globito latiendo cuando hay señales
   sin leer — eso ya estaba y se respeta. Lo que cambia es el borde del
   globito: era crema de 2px, del header claro de antes. Sobre el header
   negro se veía como un halo. Ahora el borde es del color del propio
   header, así el círculo rojo queda recortado limpio contra el negro.
   El número, en Archivo, que es la tipografía de todo lo que es dato. */
.piel-archivo .hdr-campana-badge {
  background: #d64528 !important;
  border: 2px solid var(--ar-ink) !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 9.5px !important;
  letter-spacing: 0 !important;
  min-width: 15px !important; height: 15px !important;
  top: -5px !important; right: -6px !important;
}
/* En el celular la campana queda sola a la derecha: un toque más de
   aire para que el globito no se coma el borde de la pantalla. */
@media (max-width: 900px) {
  .piel-archivo .hdr-campana-badge { right: -4px !important; }
}

/* ═══ LA FOTO DEL DPP EN EL CELULAR: DE BORDE A BORDE ══════════════
   En un teléfono el marco no aporta: son 12px de cada lado que le
   sacás a lo único que importa. La foto rompe el ancho de la caja y se
   va a los dos bordes de la pantalla.
   El truco: 100vw de ancho y un margen negativo que compensa el
   centrado del contenedor. */
@media (max-width: 900px) {
  /* EL QUE ROMPE EL ANCHO ES LA TARJETA, NO CADA PIEZA.
     Antes le ponía 100vw a la foto y a la tira por separado y quedaban
     descalzadas: la tarjeta seguía midiendo lo que el contenedor y sus
     hijos se le escapaban por un lado. Ahora la tarjeta se estira a
     todo el ancho de la pantalla —con el margen negativo que compensa
     el centrado— y adentro todo es simplemente 100%.
     `max-width: none` es imprescindible: una regla de escritorio le
     pone un tope al ancho y, sin sacarlo, los 100vw no se aplican. */
  /* El margen del contenido en la ficha es exactamente el padding del
     layout: se fija en 12px para que el desborde sea un número, no una
     estimación. Con `100vw` la cuenta falla en cualquier navegador que
     dibuje barra de scroll (100vw la incluye, el contenido no), y la
     foto queda corrida unos píxeles. */
  .dpp-layout { padding-inline: 12px !important; }
  .dpp-media-card {
    width: calc(100% + 24px) !important;
    max-width: none !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 0 !important;
    gap: 12px !important;
    background: transparent !important;
    border: 0 !important;
  }
  .dpp-media-card .dpp-photo-col,
  .dpp-media-card .dpp-photo-main,
  #dpp-photo-zoomable,
  .dpp-media-card .dpp-thumbs {
    width: 100% !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  /* La tira de miniaturas también de punta a punta: arranca pegada al
     borde y se sigue con el pulgar hasta la última. */
  .dpp-media-card .dpp-thumbs { padding: 0 !important; }
  .dpp-dots { padding-inline: 12px !important; }
  /* La pastilla de "click para hacer zoom" no va: acá se pellizca. */
  .dpp-zoom-pill { display: none !important; }
}

/* EL ZOOM, SIN MARCO ────────────────────────────────────────────────
   Antes la foto ampliada seguía recortada por su propia caja: pellizcabas
   y lo que crecía se cortaba en el borde del cuadro, no en el de la
   pantalla. Mientras dura el zoom la caja deja de recortar, se levanta
   por encima de todo y el resto de la página se apaga detrás — como en
   Instagram. Al soltar vuelve sola: no hay estado que limpiar, es la
   misma clase `zoomeada` que ya manejaba el gesto. */
/* Todo esto es SOLO para el celular: en escritorio el zoom sigue
   siendo el de siempre, adentro del cuadro y sin apagar la página. */
@media (max-width: 900px) {
  /* OJO CON LA ESPECIFICIDAD: el recorte lo pone `#dpp-photo-zoomable`,
     un selector de ID. Con dos clases no alcanza aunque lleve !important
     — hay que responder con el mismo ID. */
  #dpp-photo-zoomable.zoomeada {
    overflow: visible !important;
    position: relative;
    z-index: 900;
  }
  #dpp-photo-zoomable.zoomeada::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, .94);
    z-index: -1;
    animation: dpp-fondo-zoom .18s ease-out;
  }
  @keyframes dpp-fondo-zoom { from { opacity: 0 } to { opacity: 1 } }
  #dpp-photo-zoomable.zoomeada img { will-change: transform; }

  /* Al destapar la caja, las fotos vecinas del carrusel —que viven al
     costado, fuera del recorte— quedarían a la vista al lado de la que
     se está ampliando. Durante el zoom sólo se muestra la de turno; la
     marca el JS con `en-zoom`. */
  #dpp-photo-zoomable.zoomeada .dpp-slide { opacity: 0; }
  #dpp-photo-zoomable.zoomeada .dpp-slide.en-zoom { opacity: 1; }

  /* Nada del sitio puede quedar por encima de la foto ampliada. */
  body:has(#dpp-photo-zoomable.zoomeada) .site-header,
  body:has(#dpp-photo-zoomable.zoomeada) .mobile-tabbar { z-index: 1 !important; }

  /* LA CRUZ PARA SALIR. Mientras el zoom está puesto, la foto tapa la
     página entera con un telón negro. Salir se sale tocando afuera —eso
     ya andaba— pero eso hay que saberlo, y si algo del gesto se traba
     no queda ninguna salida a la vista. La cruz está siempre, arriba a
     la derecha, y no depende de la contabilidad de dedos. */
  #dpp-photo-zoomable.zoomeada .dpp-zoom-salir {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px;
    width: 40px; height: 40px; z-index: 5;
    background: rgba(255,255,255,.12); border: 0; color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    cursor: pointer; padding: 9px;
  }
  #dpp-photo-zoomable.zoomeada .dpp-zoom-salir svg { width: 100%; height: 100%; }
}

/* Con alturas distintas por pieza, cada una arranca arriba: si no, el
   navegador estira la más baja para emparejar el renglón. */
.ar-grilla { align-items: start; }

/* ═══ LA TIRA DE ARRIBA Y EL BUSCADOR, MEDIDOS SOBRE ATB ══════════
   Números tomados con getComputedStyle sobre atbguitars.com, no a ojo:
   · tira: 34px de alto, fondo apenas más claro que el header, texto
     blanco al 75%;
   · buscador: 400px, marco blanco de 1px, esquina viva, tipografía de
     16px —no 14, que es lo que teníamos y lo hacía ver más chico—,
     el ámbito con 12px a la izquierda y 32 a la derecha (el aire de
     la flecha), y la lupa contra el borde derecho. */

.ar-tira {
  background: #202020;
  color: rgba(255,255,255,.75);
  font-size: 13px;
}
.ar-tira .wrap { height: 34px; }
.ar-tira-mail {
  color: rgba(255,255,255,.75) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ar-tira-mail:hover { color: #fff !important; border-bottom-color: var(--ar-naranja); }
.ar-tira-der { gap: 14px; }
.ar-tira-der a { color: rgba(255,255,255,.75) !important; display: inline-flex; }
.ar-tira-der a:hover { color: #fff !important; }
.ar-tira-pais {
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* EL BUSCADOR, TAL CUAL */
.ar-buscador {
  max-width: 400px;
  height: 42px;                       /* 40 de contenido + 1px de marco */
  border: 1px solid #fff;
}
.ar-ambito {
  padding: 0 32px 0 12px;
  font-size: 16px;
  border-right: 1px solid #fff;
  position: relative;
}
.ar-ambito svg { position: absolute; right: 12px; top: 50%; margin-top: -5.5px; }
.ar-buscador input { font-size: 16px; padding: 0 12px; }
.ar-buscador input::placeholder { color: rgba(255,255,255,.7); }
.ar-buscador button { padding: 0 12px; }
.ar-buscador button:hover { background: transparent; color: var(--ar-naranja); }

/* ═══ LAS DOS PUERTAS ═════════════════════════════════════════════
   Dos columnas separadas por una línea, sin cajas: el archivo no usa
   tarjetas. El naranja aparece una sola vez por columna —en el filete
   del rótulo— y el resto es tipografía. */
.ar-puertas {
  background: var(--ar-papel);
  border-top: 1px solid var(--ar-linea);
  padding: 96px 0 104px;
}
.ar-puertas .wrap {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 62px;
  align-items: start;
}
/* La línea del medio es un pseudo-elemento y, como tal, es el PRIMER
   hijo de la grilla: si no se le dice a cada bloque en qué columna va,
   el navegador acomoda la primera puerta a la derecha de la línea y
   manda la segunda a un renglón nuevo. Las tres posiciones, dichas. */
.ar-puertas .wrap::before {
  content: '';
  grid-column: 2; grid-row: 1;
  align-self: stretch;
  background: var(--ar-linea);
}
.ar-puerta { max-width: 560px; }
.ar-puerta:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.ar-puerta:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.ar-puerta-kicker {
  font-family: 'Archivo', sans-serif; font-weight: 400;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ar-texto-2);
  padding-top: 14px;
  border-top: 2px solid var(--ar-naranja);
  display: inline-block;
  margin-bottom: 20px;
}
.ar-puerta h3 {
  font-family: 'Archivo', sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: 27px; line-height: 1.2; color: var(--ar-texto);
  margin: 0 0 20px;
}
.ar-puerta p {
  font-family: 'Funnel Sans', sans-serif; font-weight: 300;
  font-size: 16px; line-height: 1.75; color: var(--ar-texto-2);
  margin: 0 0 16px;
}
.ar-puerta .ar-mas { margin-top: 10px; display: inline-block; }

@media (max-width: 900px) {
  .ar-puertas { padding: 62px 0 70px; }
  .ar-puertas .wrap { grid-template-columns: 1fr; gap: 0; }
  .ar-puerta:nth-of-type(1), .ar-puerta:nth-of-type(2) { grid-column: 1; grid-row: auto; }
  /* Sin dos columnas, la línea vertical no separa nada: pasa a ser el
     renglón que divide una puerta de la otra. */
  .ar-puertas .wrap::before { display: none; }
  .ar-puerta + .ar-puerta {
    margin-top: 48px; padding-top: 48px;
    border-top: 1px solid var(--ar-linea);
  }
  .ar-puerta h3 { font-size: 22px; }
  .ar-puerta p { font-size: 15px; }
}

/* La línea de apoyo de los mensajes del hero no son specs: es una
   frase. Ancho de lectura y peso liviano, para que no compita con el
   titular ni se lea como una ficha técnica. */
.ar-hero-frase {
  display: block;
  /* Una sombra apenas: el velo se abre hacia la derecha y la frase, que
     es la de menor peso de las tres, queda sobre la parte iluminada de
     la foto. */
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
  max-width: 520px;
  /* Era 'Funnel Sans' 300. En el hero conviven el rotulo, el titular,
     esta frase y el boton, a diez centimetros uno del otro: con dos
     familias ahi adentro no se lee como variedad, se lee como que nadie
     miro. Una sola familia en todo el carrusel. */
  font-family: 'Archivo', sans-serif;
  font-weight: 400 !important;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255,255,255,.88);
}
.hero-claro .ar-hero-frase { color: rgba(20,20,20,.86); }
@media (max-width: 900px) {
  .ar-hero-frase { font-size: 13.5px; max-width: none; }
}

/* AIRE ENTRE EL RÓTULO SUBRAYADO Y LO QUE SIGUE.
   El rótulo, el titular y la frase venían con 16 y 12px de separación:
   los tres se leían como un solo bloque apretado. Sobre una foto hace
   falta más aire que sobre papel — el fondo tiene textura y la
   tipografía necesita despegarse para leerse. */
.ar-hero-txt .ar-kicker { margin-bottom: 26px !important; }
.ar-hero-txt h1 { margin-bottom: 24px !important; }
@media (max-width: 900px) {
  .ar-hero-txt .ar-kicker { margin-bottom: 18px !important; }
  .ar-hero-txt h1 { margin-bottom: 16px !important; }
}

/* ═══ EL MODAL DE INGRESAR / REGISTRARSE ══════════════════════════
   Quedaba con las esquinas redondeadas y el rojo del PULPA viejo: era
   lo último que seguía hablando el idioma anterior, y aparece justo en
   el momento en que alguien decide entrar. Rectas, tipografía del
   archivo y el naranja como único acento. */
.pulpa-modal {
  border-radius: 0 !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.28) !important;
  border: 0 !important;
}
.pulpa-modal-titulo {
  font-family: 'Archivo', sans-serif !important; font-weight: 400 !important;
  text-transform: uppercase !important; letter-spacing: .05em !important;
  font-size: 21px !important; color: var(--ar-texto) !important;
}
.pulpa-modal-bajada { color: var(--ar-texto-2) !important; font-size: 14.5px !important; }
/* EL :not() NO ES DECORATIVO — 30/08/2026.
   Esta regla le da forma a los campos de texto del modal, y con
   `height: 48px !important` se la daba también a la casilla de términos:
   quedaba de 16 de ancho por 48 de alto, transparente y con borde, o sea
   un rectángulo vacío colgando debajo de la frase. `.pulpa-modal-acepto
   input` pedía 16x16, pero un !important no se gana con especificidad.
   La casilla no es un campo de texto y no tiene que entrar acá. */
.pulpa-modal-form input:not([type=checkbox]),
.pulpa-modal-select {
  border-radius: 0 !important;
  border: 1px solid var(--ar-linea) !important;
  background: transparent !important;
  height: 48px !important;
  font-family: 'Funnel Sans', sans-serif !important; font-weight: 300 !important;
  font-size: 15px !important;
}
.pulpa-modal-form input:not([type=checkbox]):focus,
.pulpa-modal-select:focus { border-color: var(--ar-ink) !important; outline: 0 !important; }
.pulpa-modal .dpp-btn-primary,
.pulpa-modal .dpp-btn-sec { border-radius: 0 !important; }
.pulpa-modal-x { color: var(--ar-texto-2) !important; }
.pulpa-modal-x:hover { color: var(--ar-naranja) !important; }
.pulpa-modal-registro { color: var(--ar-texto-2) !important; }
.pulpa-modal-registro a {
  color: var(--ar-texto) !important; font-weight: 300 !important;
  border-bottom: 1px solid var(--ar-naranja);
}
.pulpa-modal-registro a:hover { color: var(--ar-naranja) !important; text-decoration: none !important; }

/* EL LOGO, EN GRANDE Y SOLO.
   En escritorio el header mide 104px y el logo ocupaba 44: quedaba
   perdido en el medio de una banda vacía. Ahora se planta. Y el sello
   "EL ARCHIVO" se va: el logo ya lo dice, y repetirlo debajo en
   letra chica lo único que hacía era achicar la marca. */
.ar-logo { height: 74px !important; }
.ar-sello { display: none !important; }
@media (max-width: 1100px) { .ar-logo { height: 62px !important; } }
@media (max-width: 900px)  { .ar-logo { height: 38px !important; } }

/* La foto del hero se puede tocar para pasar a la siguiente; el bloque
   de texto sigue siendo el enlace a la pieza. Que el cursor lo diga. */
.ar-hero { cursor: e-resize; }
.ar-hero .ar-hero-txt { cursor: pointer; }

/* LA CAJA DE 4:5 SE LLENA, NO SE RELLENA ───────────────────────────
   Cuando la ficha va en 4:5 —o sea, cuando la foto principal es de
   formato Instagram, cuadrada o vertical— la foto LLENA la caja,
   apoyada en la base, igual que en la grilla. Antes entraba con
   `contain` y una foto cuadrada quedaba con dos franjas grises: la
   caja decía 4:5 y la foto se veía a 1:1 flotando adentro.
   Las apaisadas de la misma pieza siguen entrando enteras: ahí sí el
   recorte se comería media guitarra. */
#dpp-photo-zoomable.ficha-45 .dpp-track .dpp-slide.sl-ig .dpp-slide-img {
  object-fit: cover !important;
  object-position: center bottom !important;
}

/* ═══ EL FILTRO, CON LA GRAMÁTICA DE ATB ══════════════════════════
   Medido sobre su sitio: columna de 260px, título de sección en 16px
   semibold —no versalitas chiquitas—, opciones en 16px liviano con el
   número de piezas al lado, y una línea fina separando bloque de
   bloque. Nada de cajas.
   Lo que NO se copia: allá cada casilla recarga sola. Acá las marcas se
   acumulan en pills y se aplican juntas, que es como lo queremos. */

/* El título de cada bloque: lo que antes era una versalita de 10px
   perdida arriba del campo. Ahora se lee como lo que es, un rótulo. */
.filtros .filtro-label {
  display: block !important;
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ar-texto) !important;
  margin-bottom: 10px !important;
}

/* Una línea fina entre bloques, como allá. El primero no la lleva. */
.filtros .filtro-grupo + .filtro-grupo,
.filtros .filtro-gate {
  border-top: 1px solid var(--ar-linea);
  padding-top: 18px;
  margin-top: 18px;
}

/* La casilla y su texto, en cuerpo de lectura. */
.filtros .filtro-check {
  display: flex !important; align-items: center; gap: 9px;
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ar-texto) !important;
}
.filtros .filtro-check input { width: 15px; height: 15px; accent-color: var(--ar-naranja); }

/* Las pills de marca, rectas y en el idioma del archivo. */
.marca-pill {
  border-radius: 0 !important;
  background: var(--ar-ink) !important;
  color: #fff !important;
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  padding: 5px 8px !important;
}
.marca-pill-x { color: rgba(255,255,255,.7) !important; }
.marca-pill-x:hover { color: var(--ar-naranja) !important; }

/* Las décadas, en el idioma del archivo: rectas, sin redondeo, y la
   elegida en tinta llena como las pills de marca. */
.filtros .filtro-decadas { gap: 5px !important; }
.filtros .filtro-decadas .deca { justify-content: center; }
.filtros .filtro-decadas .deca {
  border-radius: 0 !important;
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  padding: 4px 9px !important;
  border-color: var(--ar-linea) !important;
  color: var(--ar-texto) !important;
  background: transparent !important;
  /* La tira del archivo pone versalitas en todo, y acá dejaba «1960S».
     La ese de una década es minúscula: es el plural, no una sigla. */
  text-transform: none !important;
}
.filtros .filtro-decadas .deca:hover {
  border-color: var(--ar-naranja) !important;
  color: var(--ar-naranja) !important;
}
.filtros .filtro-decadas .deca.activa,
.filtros .filtro-decadas .deca:has(input:checked) {
  background: var(--ar-ink) !important;
  border-color: var(--ar-ink) !important;
  color: #fff !important;
}

/* APLICAR: el naranja es el acento del sitio, no el color de un botón
   de formulario. Acá va en tinta, que es lo que corresponde a una
   acción de trabajo; el naranja queda para lo que vale la pena mirar. */
.filtros .filtro-aplicar {
  width: 100% !important;
  background: var(--ar-ink) !important;
  border: 1px solid var(--ar-ink) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  height: 46px !important;
  margin-top: 22px !important;
}
.filtros .filtro-aplicar:hover { background: var(--ar-naranja) !important; border-color: var(--ar-naranja) !important; }
.filtros .filtro-reset {
  display: block; text-align: center; margin-top: 12px;
  font-family: 'Funnel Sans', sans-serif !important; font-weight: 300 !important;
  font-size: 13.5px !important; color: var(--ar-texto-2) !important;
}
.filtros .filtro-reset:hover { color: var(--ar-naranja) !important; }

/* Qué hace cada zona del hero: la foto pasa a la siguiente, el texto
   lleva a la pieza. Que el cursor lo diga, y que el título se subraye
   al pasarle por encima para que se note que es un enlace — si no, un
   texto sin subrayado sobre una foto no parece clickeable. */
/* Todo el hero pasa a la siguiente foto, y el cursor lo dice. La mano
   aparece SÓLO en los dos mensajes sobreimpresos, que son los únicos
   textos con un destino propio. En los slides de una pieza el titular
   no lleva a la ficha: es un rótulo, no un enlace. */
.ar-hero, .ar-hero .ar-hero-txt { cursor: e-resize; }
.ar-hero.hero-mensaje .ar-kicker,
.ar-hero.hero-mensaje .ar-hero-txt h1,
.ar-hero.hero-mensaje .ar-hero-frase,
.ar-hero.hero-mensaje .ar-hero-specs { cursor: pointer; }
/* OJO CON ESTO. El subrayado que crece tiene que ir sobre un elemento
   EN LÍNEA, porque si no se estira a todo el ancho del bloque y queda
   una raya suelta más larga que el texto. La tentación es ponerle
   `display: inline` al h1 — y ahí se rompe todo: el h1 deja de ser
   bloque, se acomoda al lado del rótulo en el mismo renglón, el
   margin-bottom deja de tener efecto y entre las dos líneas del titular
   aparece un hueco. Pasó.
   La forma correcta: el h1 sigue siendo bloque y el subrayado vive en
   un span adentro. Si algún día el carrusel vuelve a escribir el
   titular con textContent en vez de dentro del span, se rompe de nuevo. */
.ar-hero .ar-hero-txt h1 { display: block; }
.ar-hero .ar-hero-txt h1 > span {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s cubic-bezier(.22,.75,.24,1);
}
.ar-hero.hero-mensaje .ar-hero-txt h1:hover > span { background-size: 100% 1px; }

/* ═══ LOS TÍTULOS DE SECCIÓN DE LA FICHA, UNO SOLO ════════════════
   "LA PIEZA" venía en Roboto 700 —del diseño viejo— y "FICHA TÉCNICA"
   ya estaba en la tipografía del archivo: dos títulos del mismo rango,
   uno debajo del otro, hablando distinto. Se igualan al segundo, que
   es el que está bien: 20px, peso normal, versalitas con aire.
   Vale para todas las secciones de la ficha —la pieza, la ficha
   técnica, el mercado, la línea de tiempo y las piezas similares—,
   así la página baja con un solo tono. */
.dpp-section-title h2,
.dpp-section-title h3,
.dpp-ficha-titulo,
.mkt-tit,
.dpp-timeline-tit {
  font-family: 'Funnel Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--ar-texto) !important;
  margin: 0 0 16px !important;
}
@media (max-width: 900px) {
  .dpp-section-title h2,
  .dpp-section-title h3,
  .dpp-ficha-titulo,
  .mkt-tit,
  .dpp-timeline-tit { font-size: 17px !important; }
}

/* ═══ EL RANGO DE DOS MANIJAS, CON LA GRÁFICA DE ATB ══════════════
   Medido sobre su slider (usan noUiSlider): riel de 2px en el gris del
   texto al 30%, tramo elegido en tinta plena, y manijas REDONDAS
   BLANCAS de 18px con un aro fino oscuro. Mi primera versión eran dos
   cuadrados negros sobre una barra negra: se leía como un tachón, no
   como un control. El peso visual va en el tramo elegido, no en las
   manijas.
   Dos <input type="range"> superpuestos: el riel no recibe el mouse
   (pointer-events: none) y sólo las manijas sí — si no, el de arriba
   le roba el clic al de abajo y una nunca se puede agarrar.
   LA CUENTA DEL CENTRADO: el riel mide 24px de alto, la manija 18. El
   navegador centra la manija en su pista, así que su centro cae en 12;
   la línea va a top 10 con 3px de alto para que su centro caiga en el
   mismo 12. Cualquier margen extra en la manija rompe eso — de ahí que
   la línea saliera despegada de los círculos.
   El tramo pintado no toca los círculos: arranca 11px después del
   centro de cada manija (9 de radio + 2 de aire), así se lee como una
   barra entre dos manijas y no como una manija ensartada en un palo. */
.rango { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }
.rango-nums { order: 1; display: flex; align-items: center; gap: 8px; margin: 0; }
.rango-riel { order: 2; position: relative; height: 24px; }
.rango-pista {
  /* 4px de alto arrancando en 10 → su centro cae en 12, que es donde
     cae el centro de la manija (24 de pista, 18 de manija, centrada).
     Y va de borde a borde: la línea PASA POR los círculos, no muere
     contra ellos. */
  position: absolute; top: 10px; left: 0; right: 0; height: 4px; margin: 0;
  background: rgba(25, 25, 25, .3);
}
.rango-sel { position: absolute; top: 0; bottom: 0; background: var(--ar-ink); transition: background .15s ease; }
/* Con las dos manijas en los extremos no hay nada filtrado, y pintar
   el riel entero de negro se lee como un tachón. El negro aparece
   cuando efectivamente recortaste algo: así el filtro se ve puesto de
   un vistazo, sin leer los números. */
.rango.sin-filtro .rango-sel { background: transparent; }
.rango-r {
  position: absolute; left: 0; right: 0; top: 0;
  width: 100%; height: 24px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: none; pointer-events: none;
}
.rango-r:focus { outline: none; }
.rango-r::-webkit-slider-runnable-track { height: 24px; background: none; }
.rango-r::-moz-range-track { height: 24px; background: none; }
.rango-r::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(25, 25, 25, .6);
  box-shadow: none; cursor: grab; pointer-events: auto; margin-top: 0;
}
.rango-r::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
  background: #fff; border: 1px solid rgba(25, 25, 25, .6);
  box-shadow: none; cursor: grab; pointer-events: auto;
}
.rango-r:active::-webkit-slider-thumb { cursor: grabbing; border-color: var(--ar-naranja); }
.rango-r:active::-moz-range-thumb      { cursor: grabbing; border-color: var(--ar-naranja); }
.rango-r:focus-visible::-webkit-slider-thumb { border-color: var(--ar-naranja); }
.rango-r:focus-visible::-moz-range-thumb      { border-color: var(--ar-naranja); }

.rango-nums .rango-n {
  flex: 1; min-width: 0; width: 100%;
  background: transparent !important;
  border: 1px solid var(--ar-linea) !important;
  border-radius: 0 !important;
  height: 42px !important;
  padding: 0 10px !important;
  font-family: 'Funnel Sans', sans-serif !important; font-weight: 300 !important;
  font-size: 14.5px !important;
  color: var(--ar-texto) !important;
  text-align: center;
}
.rango-nums .rango-n::placeholder { color: var(--ar-texto-2); }
.rango-nums .rango-n:focus { border-color: var(--ar-ink) !important; outline: 0 !important; }
.rango-guion { color: var(--ar-texto-2); font-size: 13px; }
/* Las flechitas del input number ensucian una caja tan chica. */
.rango-n::-webkit-outer-spin-button, .rango-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rango-n { -moz-appearance: textfield; }

/* ═══ EL ORDEN, ARRIBA A LA DERECHA ═══════════════════════════════
   Sale de la columna de filtros —donde estaba escondido abajo de
   todo— y va sobre la cuadrícula, alineado a la derecha, como en ATB:
   el orden no es un filtro, es una forma de mirar lo mismo. */
.listado-orden { display: flex; justify-content: flex-end; align-items: center; margin: 0 0 18px; }
.listado-orden label {
  font-family: 'Funnel Sans', sans-serif; font-weight: 300;
  font-size: 15px; color: var(--ar-texto-2); margin-right: 8px;
}
.listado-orden select {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; border-radius: 0;
  font-family: 'Funnel Sans', sans-serif; font-weight: 400;
  font-size: 15px; color: var(--ar-texto);
  padding: 4px 22px 4px 0; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
}
.listado-orden select:focus { outline: none; color: var(--ar-naranja); }
@media (max-width: 900px) {
  .listado-orden { justify-content: flex-start; margin-bottom: 14px; }
}

/* EL RIEL NO ES UNA CAJA DE TEXTO.
   El panel de filtros le pone borde, fondo y alto a TODO lo que sea
   `input` — y un <input type="range"> también lo es. De ahí el
   rectángulo dibujado alrededor del riel, que parecía una línea
   sobrante del diseño anterior. Se le saca la caja explícitamente,
   con la misma prioridad. */
.filtros .rango-r,
.rango .rango-r {
  border: 0 !important;
  background: none !important;
  height: 24px !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.filtros .rango-riel { border: 0 !important; background: none !important; }

/* ═══ LA LLAVE DE "SOLO VERIFICADAS" ══════════════════════════════
   Una casilla se lee como un dato más del formulario; un interruptor
   se lee como lo que es: prende o apaga una manera de ver el archivo.
   Es el mismo gesto que ATB usa para "in stock only". */
.filtros .filtro-check.llave { cursor: pointer; gap: 11px; }
.filtros .filtro-check.llave input { position: absolute; opacity: 0; width: 0; height: 0; }
.llave-riel {
  position: relative; flex: 0 0 auto;
  width: 36px; height: 20px; border-radius: 999px;
  background: rgba(25, 25, 25, .22);
  transition: background .18s ease;
}
.llave-bola {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .18s cubic-bezier(.22,.75,.24,1);
}
.filtro-check.llave input:checked + .llave-riel { background: var(--ar-naranja); }
.filtro-check.llave input:checked + .llave-riel .llave-bola { transform: translateX(16px); }
.filtro-check.llave input:focus-visible + .llave-riel { box-shadow: 0 0 0 3px rgba(233,107,33,.25); }
.llave-txt { line-height: 1.3; }

/* El link de limpiar, con el ícono de filtros tachado en vez de la
   flechita de recargar: no está volviendo a cargar nada, está sacando
   los filtros puestos. */
.filtros .filtro-reset {
  display: inline-flex; align-items: center; gap: 7px;
  justify-content: center; width: 100%;
}

/* ═══ "VER MÁS", EN LUGAR DE LAS PÁGINAS ══════════════════════════
   Medido sobre ATB: una línea centrada, chica y en gris —"You're
   viewing 48 of 281 products"— y nada más. Ni flechitas, ni números de
   página, ni cajas de colores. Acá se le suma el botón, recto y en
   tinta, porque nosotros no cargamos solo al hacer scroll. */
.listado-mas { text-align: center; margin: 54px 0 10px; }
.listado-mas-cuenta {
  font-family: 'Funnel Sans', sans-serif; font-weight: 300;
  font-size: 14px; color: var(--ar-texto-2); margin: 0 0 18px;
}
.listado-mas-cuenta b { font-weight: 400; color: var(--ar-texto); }
.listado-mas-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 200px; height: 48px; padding: 0 26px;
  border: 1px solid var(--ar-ink); border-radius: 0;
  background: transparent; color: var(--ar-texto) !important;
  font-family: 'Archivo', sans-serif; font-weight: 400;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.listado-mas-btn:hover { background: var(--ar-ink); color: #fff !important; }
.listado-mas-btn.cargando { opacity: .5; pointer-events: none; }
.listado-mas.completo .listado-mas-btn { display: none; }

/* TODOS LOS TÍTULOS DE LA FICHA ARRANCAN EN LA MISMA LÍNEA.
   Quedaban tres arranques distintos en la misma columna: "LA PIEZA"
   colgada 28px a la izquierda (el "título colgado" del diseño viejo),
   "FICHA TÉCNICA" a plomo con el texto, e "HISTÓRICO" corrido por una
   rayita decorativa que le crecía adelante. Ahora los tres —y los que
   vengan— arrancan donde arranca la descripción, que es la línea que
   el ojo ya está siguiendo. */
/* Y TODOS COLGADOS 30px, NO UNO SOLO.
   El título de sección sale al margen para que la columna de texto se
   lea como un bloque limpio y el título quede afuera, marcando dónde
   empieza cada cosa. El error de antes no era colgarlo: era colgar uno
   solo, así que los tres arrancaban en lugares distintos. */
.dpp-section-title,
.dpp-ficha-titulo,
.mkt-tit,
.dpp-timeline-tit { margin-left: -30px !important; padding-left: 0 !important; }
@media (max-width: 900px) {
  /* En el celular no hay margen que sobre: pegados al borde del texto. */
  .dpp-section-title,
  .dpp-ficha-titulo,
  .mkt-tit,
  .dpp-timeline-tit { margin-left: 0 !important; }
}
.dpp-section-title::before,
.dpp-ficha-titulo::before,
.mkt-tit::before,
.dpp-timeline-tit::before { content: none !important; display: none !important; }

/* ═══ EL ZOOM DE LA FICHA, EN DOS ESCALONES (desktop) ══════════════
   Ahora que las fotos están en alta —de 1440 a 2333px— un solo nivel
   desaprovechaba el archivo. El primer clic acerca, el segundo va a
   fondo, el tercero vuelve. El cursor tiene que contar en qué escalón
   estás, si no el segundo clic es un secreto que nadie descubre. */
@media (min-width: 901px) {
  #dpp-photo-zoomable { cursor: zoom-in; }
  #dpp-photo-zoomable.zoomeada { cursor: zoom-in; }
  #dpp-photo-zoomable.zoom-fondo { cursor: zoom-out; }
}


/* El botón de acostar la foto, encendido cuando está activo. */
.admin-foto-ico.activo { color: var(--ar-naranja, #E96B21); }

/* ═══ LA MARCA EN EL HEADER: HUELLA + PALABRA ═════════════════════
   La huella es imagen (el dibujo de Andrés) y la palabra es texto: así
   se le puede dar el espaciado del archivo, teñirla y que se lea nítida
   en cualquier pantalla, sin depender de un PNG. */
/* En fila, no apilado: el bloque de arriba la declara `column` porque
   antes era wordmark + sello uno debajo del otro. */
.ar-marca { display: flex !important; flex-direction: row !important;
            align-items: center !important; gap: 12px !important;
            text-decoration: none; }

/* DESKTOP: el logo entero, tal cual el archivo, ROMPIENDO HACIA ARRIBA.
   Sube 34px —el alto exacto de la tira del mail— y se mete en ella. El
   centro de esa tira está vacío (el mail va a la izquierda, ARGENTINA a
   la derecha), así que no pisa nada y la marca gana casi cuarenta por
   ciento de tamaño sin que el header crezca ni un píxel.
   La franja de la tira y la del header comparten el mismo negro, así que
   la costura no se ve: el logo parece apoyado en el borde de arriba. */
.ar-logo-full   {
  display: block; height: 124px !important; width: auto;
  /* CENTRADO EN TODO EL NEGRO, no sólo en su fila.
     Medido: la fila del header va de 35 a 187 y el logo quedaba clavado
     al medio de eso —14px de aire arriba y 14 abajo, perfecto en el
     papel—. Pero el ojo no ve esa fila: ve una sola franja negra que
     empieza en el borde de la página (la tira del mail comparte el
     mismo negro) y termina en la barra blanca de categorías. Centrado
     ahí, el logo tiene que subir 18px. Se hace con `top` y no con
     `margin` para que no cambie la altura del header. */
  margin: 0; top: -18px;
  position: relative; z-index: 6;
}
.ar-logo-huella { display: none !important; }
.ar-logo-txt    { display: none; }
@media (max-width: 1100px) { .ar-logo-full { height: 104px !important; } }

/* MÓVIL: la huella a la izquierda y la palabra a la derecha. El lockup
   vertical no entra en una franja de 38px sin volverse ilegible. */
@media (max-width: 900px) {
  .ar-logo-full   { display: none !important; }
  .ar-logo-huella { display: block !important; height: 30px !important; width: auto; }
  .ar-logo-txt    { display: block; }
  .ar-marca { gap: 9px !important; }
}
.ar-logo-txt {
  font-family: 'Archivo', sans-serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  /* El letterspacing empuja aire después de la última letra: sin esto
     el conjunto se ve corrido a la izquierda. */
  margin-right: -.26em;
}
@media (max-width: 900px) { .ar-logo-txt { font-size: 19px; letter-spacing: .2em; } }


/* Que el logo pueda sobresalir hacia la tira de arriba. */
.piel-archivo .ar-tira, .piel-archivo .ar-cab { overflow: visible; }
.piel-archivo .ar-cab { position: relative; z-index: 5; }


/* EL HEADER, MÁS ALTO, CON EL LOGO CENTRADO.
   La franja crece lo suficiente para que la marca entre con el mismo
   aire arriba y abajo. El buscador y los iconos siguen centrados en la
   misma franja, así que todo el header comparte una sola línea media. */
.piel-archivo .ar-cab-inner { height: 152px !important; }
.piel-archivo .ar-marca { align-self: center !important; }
@media (max-width: 1100px) { .piel-archivo .ar-cab-inner { height: 132px !important; } }
@media (max-width: 900px)  { .piel-archivo .ar-cab-inner { height: auto !important; } }

/* ═══ EL DESPLEGABLE DE ÁMBITO DEL BUSCADOR ═══════════════════════
   Ahora es un <select> de verdad. Se lo despoja de todo lo que el
   navegador le pone —fondo, borde, flechita del sistema— y se queda con
   el chevron dibujado que ya tenía la caja, para que siga leyéndose
   como parte del buscador y no como un control de formulario ajeno. */
.ar-ambito select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; outline: 0;
  color: #fff; font-family: 'Funnel Sans', sans-serif; font-weight: 300;
  font-size: 16px; line-height: 1; cursor: pointer;
  padding: 0; margin: 0;
  max-width: 190px;
}
/* El menú desplegado lo dibuja el sistema y hereda el fondo del select:
   sin esto, sobre el header oscuro salen letras blancas sobre blanco. */
.ar-ambito select option { background: #1c1c1c; color: #fff; }
.ar-ambito:hover select, .ar-ambito select:focus { color: #fff; }
@media (max-width: 900px) { .ar-ambito select { font-size: 14px; max-width: 120px; } }

/* ═══ LA RED: QUE SE LEA COMO UNA LISTA DE CASAS ══════════════════
   Estaba resuelta como una grilla de fichas sueltas y cada logo entraba
   con su propia forma, su propio fondo y su propia escala: una foto de
   una persona al lado de un cuadrado negro al lado de un rombo rojo. El
   ojo terminaba comparando recortes en vez de comparar casas. */

/* Tres columnas y no cuatro: con seis aliados, cuatro dejan un hueco en
   la segunda fila que se lee como "falta algo". */
.piel-archivo .red-grid {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) !important;
  gap: 0 44px !important;
}

/* El logo, siempre en el mismo cuadro y con el mismo aire alrededor.
   El fondo blanco se queda —hay logos pensados para blanco— pero con un
   filete finito que le da borde a los que son blancos sobre blanco. */
.piel-archivo .red-logo {
  width: 68px !important; height: 68px !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--ar-linea) !important;
  padding: 7px;
}
.piel-archivo .red-logo img { object-fit: contain !important; }

/* La chapa: una sola familia. Antes el verificador salía naranja y
   competía con el número de piezas, que también es naranja y es el dato
   que de verdad importa. El acento se gasta una vez por tarjeta. */
.piel-archivo .red-nivel {
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ar-texto-2) !important;
  box-shadow: inset 0 0 0 1px var(--ar-linea) !important;
  font-family: 'Archivo', sans-serif; font-weight: 400 !important;
  font-size: 10px !important; letter-spacing: .12em !important;
  padding: 4px 8px !important;
}
/* Sólo la fundadora lleva color: es la única distinción que se ganó. */
.piel-archivo .red-nivel.fundador {
  background: var(--ar-ink) !important; color: #fff !important;
  box-shadow: none !important;
}

/* El número de piezas es la información con la que se mide una casa:
   va grande y es lo único naranja de la tarjeta. */
.piel-archivo .red-piezas { font-size: 13px !important; color: var(--ar-texto-2) !important; }
.piel-archivo .red-piezas b {
  font-family: 'Archivo', sans-serif; font-size: 22px !important;
  color: var(--ar-naranja) !important; font-weight: 400 !important;
  margin-right: 3px;
}
.piel-archivo .red-sin-piezas { color: var(--ar-texto-2) !important; font-weight: 400 !important; }

.piel-archivo .red-card { padding: 26px 0 !important; }
.piel-archivo .red-desc { color: var(--ar-texto-2) !important; }
@media (max-width: 900px) {
  .piel-archivo .red-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
}

/* La fila incompleta va centrada, no pegada a la izquierda: con seis
   aliados y tres columnas hoy cierra justo, pero apenas entre o salga
   una casa la última fila queda coja y colgando de un costado. Columnas
   de ancho acotado + grilla centrada: siempre se lee como un bloque. */
.piel-archivo .red-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 430px)) !important;
  justify-content: center !important;
}
@media (max-width: 900px) {
  .piel-archivo .red-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Sin el renglón de piezas, la tarjeta necesita otra señal de que es un
   enlace: el nombre se subraya al pasar por encima. */
.piel-archivo .red-card .red-nombre { transition: color .15s ease; }
.piel-archivo .red-card:hover .red-nombre {
  color: var(--ar-naranja) !important;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.piel-archivo .red-card { padding: 24px 0 !important; }

/* EL LOGO SIN CAJA. Cada marca trae su propio fondo y su propia forma;
   meterlas todas en un cuadrado blanco con filete las convertía en
   calcomanías pegadas sobre algo que no es de ellas. Ahora el logo entra
   solo, con una altura común para que ninguna pise a la otra. */
.piel-archivo .red-logo {
  width: 76px !important; height: 62px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}
.piel-archivo .red-logo img {
  width: auto !important; max-width: 100% !important;
  height: 100% !important; object-fit: contain !important;
}

/* El título de cada grupo, del mismo rango que los de la ficha. */
.red-grupo-tit {
  font-family: 'Archivo', sans-serif; font-weight: 400;
  font-size: 20px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ar-texto); margin: 46px 0 14px;
}

/* LA FILA QUE SOBRA, CENTRADA. Con grilla, los dos que quedan abajo se
   clavan en las dos primeras columnas y el hueco queda todo junto a la
   derecha: se lee como un error de carga. Con flex, la última fila se
   centra sola sea cual sea la cantidad. */
.piel-archivo .red-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 0 44px !important;
}
.piel-archivo .red-card { flex: 0 1 400px; }
@media (max-width: 900px) {
  .piel-archivo .red-card { flex: 1 1 100%; }
}

/* CUATRO ARRIBA Y DOS ABAJO, LAS DOS FILAS CENTRADAS.
   El ancho de la tarjeta está calculado para que entren exactamente
   cuatro y no cinco: 4×330 + 3×44 de aire = 1452, y el contenedor mide
   1472. Con flex-wrap y `justify-content: center`, lo que sobra en la
   última fila se centra solo, sin importar cuántos aliados haya. */
.piel-archivo .red-card { flex: 0 1 330px; }
@media (max-width: 1300px) { .piel-archivo .red-card { flex: 0 1 300px; } }
@media (max-width: 900px)  { .piel-archivo .red-card { flex: 1 1 100%; } }

/* Sin las rayas grises debajo de cada tarjeta: con los logos sueltos y
   sin contador, la lista ya no necesita que nadie le marque los renglones.
   El aire alcanza para separar. */
.piel-archivo .red-card {
  border: 0 !important;
  border-bottom: 0 !important;
  padding: 20px 0 34px !important;
}
.piel-archivo .red-card:hover { border-bottom: 0 !important; }

/* CUATRO POR FILA, SIEMPRE. Fijar el ancho en píxeles hacía que en una
   pantalla más angosta entraran tres y en una más ancha cinco. Con el
   ancho expresado como fracción del contenedor —descontando los tres
   huecos de 44px— son cuatro en cualquier monitor, y lo que sobra en la
   última fila se centra solo. */
.piel-archivo .red-card { flex: 0 1 calc((100% - 132px) / 4) !important; }
@media (max-width: 1100px) { .piel-archivo .red-card { flex: 0 1 calc((100% - 44px) / 2) !important; } }
@media (max-width: 700px)  { .piel-archivo .red-card { flex: 1 1 100% !important; } }

/* Los logos, más grandes: son la cara de cada casa y estaban del tamaño
   de un ícono. */
.piel-archivo .red-card { grid-template-columns: 104px minmax(0, 1fr) !important; gap: 20px !important; }
.piel-archivo .red-logo { width: 104px !important; height: 86px !important; }
@media (max-width: 700px) {
  .piel-archivo .red-card { grid-template-columns: 88px minmax(0, 1fr) !important; }
  .piel-archivo .red-logo { width: 88px !important; height: 74px !important; }
}

/* Sin descripción, la tarjeta es logo + nombre + chapa. Se aprieta el
   alto para que la lista no quede flotando en un vacío. */
.piel-archivo .red-card { padding: 16px 0 26px !important; align-items: center !important; }
.piel-archivo .red-info { justify-content: center; }
.piel-archivo .red-nombre { margin-bottom: 9px !important; }

/* El logo del pie: el mismo archivo que el header, pero entero y con
   aire. Alineado a la derecha, que es donde vive la columna de marca. */
.ar-footer-logo {
  height: 128px; width: auto; display: block;
  margin: 0 0 16px auto;
}
@media (max-width: 900px) {
  .ar-footer-logo { height: 104px; margin: 0 auto 16px; }
}

/* El desvanecido de la tira. La transición va en las dos direcciones:
   se apaga rápido y vuelve un poco más lento, que es como el ojo espera
   que aparezca un texto. */
#ar-tira-rota { transition: opacity .32s ease; will-change: opacity; }
#ar-tira-rota.ar-tira-yendo { opacity: 0; }
#ar-tira-rota[data-plano] { cursor: default; text-decoration: none; }
#ar-tira-rota[data-plano]:hover { color: rgba(255,255,255,.75) !important; }

/* El buscador, 12px adentro. La franja del header va casi a sangre para
   que coincida con el ancho del contenido; el buscador es lo único que
   quedaba pegado al borde, y una caja con contorno tocando el filo se
   lee como si estuviera cortada. */
.piel-archivo .ar-buscador { margin-left: 12px; }
@media (max-width: 900px) { .piel-archivo .ar-buscador { margin-left: 0; } }

/* ═══ LA PÁGINA DE LAS PLACAS ═════════════════════════════════════ */
.pk-bajada { max-width: 720px; }
.pk-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin: 54px 0 64px; }
.pk-num {
  font-family: 'Archivo', sans-serif; font-size: 13px; letter-spacing: .18em;
  color: var(--ar-naranja); display: block; margin-bottom: 12px;
}
.pk-paso h3 {
  font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 19px;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px;
}
.pk-paso p, .pk-porque p, .pk-nota, .pk-card-para {
  font-family: 'Funnel Sans', sans-serif; font-weight: 300; font-size: 15px;
  line-height: 1.65; color: var(--ar-texto-2);
}
.pk-porque, .pk-packs, .pk-pedido { max-width: 760px; margin-bottom: 64px; }
.pk-porque h2, .pk-packs h2, .pk-pedido h2 {
  font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 20px;
  letter-spacing: .05em; text-transform: uppercase; margin: 0 0 16px;
}
.pk-packs { max-width: none; }
.pk-grid { display: flex; flex-wrap: wrap; gap: 0 44px; margin-top: 26px; }
.pk-card { flex: 0 1 calc((100% - 132px) / 4); padding: 22px 0 30px; border-top: 1px solid var(--ar-linea); }
.pk-card-cant {
  font-family: 'Archivo', sans-serif; font-size: 30px; color: var(--ar-naranja);
  line-height: 1; margin-bottom: 8px;
}
.pk-card-nombre {
  font-family: 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: .05em;
  font-size: 15px; margin-bottom: 10px;
}
/* El precio del pack. Va debajo del nombre y arriba del para-qué: el
   que compara packs mira cantidad, precio y recién después la
   descripción. El por-tag al lado, en chico y en gris, porque es la
   cuenta que hace igual el que compara dos — hacérsela nosotros es más
   honesto que dejar que la haga mal. */
.pk-card-precio {
  font-size: 16px; color: var(--ar-texto); margin: -2px 0 10px;
  font-variant-numeric: tabular-nums;
}
.pk-card-unit { color: var(--ar-texto-2); font-size: 13px; }
.pk-card-cta { display: inline-block; margin-top: 12px; color: var(--ar-texto); text-decoration: none; border-bottom: 1px solid var(--ar-naranja); padding-bottom: 3px; }
.pk-card-cta:hover { color: var(--ar-naranja); }

.pk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 22px; max-width: 620px; }
.pk-form label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--ar-texto-2); }
.pk-form-full { grid-column: 1 / -1; }
.pk-form input, .pk-form select, .pk-form textarea {
  border: 1px solid var(--ar-linea); border-radius: 0; background: transparent;
  padding: 11px 12px; font-family: 'Funnel Sans', sans-serif; font-size: 15px; color: var(--ar-texto);
}
.pk-form input:focus, .pk-form select:focus, .pk-form textarea:focus { outline: 0; border-color: var(--ar-ink); }
.pk-form button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 900px) {
  .pk-pasos { grid-template-columns: 1fr; gap: 34px; }
  .pk-card { flex: 1 1 100%; }
  .pk-form { grid-template-columns: 1fr; }
}

/* La pantalla del toque: una sola decisión por pantalla, dedo gordo. */
.tap-wrap { max-width: 560px; }
.tap-codigo { color: var(--ar-texto-2); font-size: 13px; margin: 18px 0 26px; letter-spacing: .04em; }
.tap-sinfirma { color: var(--ar-naranja); }
.tap-form { display: flex; flex-direction: column; gap: 18px; max-width: 420px; }
.tap-form label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--ar-texto-2); }
.tap-form select, .tap-form input {
  border: 1px solid var(--ar-linea); border-radius: 0; background: transparent;
  padding: 13px 12px; font-family: 'Funnel Sans', sans-serif; font-size: 16px; color: var(--ar-texto);
}
.tap-form button { align-self: flex-start; }

/* ═══ LA FRANJA DE LA PLACA EN LA PORTADA ═════════════════════════ */
.ar-placa { background: var(--ar-ink); color: #fff; padding: 84px 0; }
.ar-placa-txt { max-width: 620px; }
/* Con !important porque la regla que unificó los títulos de sección de
   la ficha alcanza a cualquier h2 y lo deja en tinta oscura a 20px: acá
   el fondo es negro y el titular quedaba invisible. Pasó. */
.ar-placa h2 {
  font-family: 'Archivo', sans-serif !important; font-weight: 400 !important;
  text-transform: uppercase !important;
  font-size: clamp(26px, 2.8vw, 38px) !important; letter-spacing: .03em !important;
  line-height: 1.2 !important; margin: 22px 0 18px !important; color: #fff !important;
}
.ar-placa p {
  font-family: 'Funnel Sans', sans-serif; font-weight: 300; font-size: 16px;
  line-height: 1.7; color: rgba(255,255,255,.8); margin: 0 0 26px;
}
.ar-placa-cta {
  font-family: 'Archivo', sans-serif; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; text-decoration: none;
  border-bottom: 1px solid var(--ar-naranja); padding-bottom: 5px;
}
.ar-placa-cta:hover { color: var(--ar-naranja); }
/* EL NOMBRE SE ESCRIBE SIEMPRE ASÍ: PulpaTag. Nunca PULPATAG ni pulpatag.
   Varios contenedores del archivo pasan su texto a mayúsculas, así que el
   nombre va envuelto en .pt para que no le toquen la caja de las letras. */
.pt { text-transform: none !important; }
.pt-tm { font-size: .5em; vertical-align: super; letter-spacing: 0; opacity: .75; }

.ar-placa-in { display: flex; align-items: center; gap: 4px; justify-content: flex-start; }
/* El texto no se estira hasta el otro extremo: el objeto tiene que
   quedar al lado de lo que lo nombra, no a media pantalla de distancia. */
.ar-placa-txt { flex: 0 1 560px; }
/* El objeto. Ancho fijo y no se estira: es una foto de un objeto real y
   deformarla sería mentir sobre su proporción. */
.ar-placa-obj { flex: 0 0 auto; width: min(520px, 46%); margin: 0 0 0 39px; line-height: 0; }
.ar-placa-obj img { width: 100%; height: auto; display: block; }

@media (max-width: 860px) {
  .ar-placa-in { flex-direction: column; align-items: flex-start; gap: 26px; }
  .ar-placa-obj { width: 320px; align-self: center; margin-right: 0; }
}
@media (max-width: 900px) { .ar-placa { padding: 56px 0; } }

/* La espera del gesto: una sola cosa en pantalla y la onda latiendo. */
.tap-espera { text-align: center; }
.tap-espera .listado-resumen { margin-inline: auto; }
.tap-onda { color: var(--ar-naranja); margin: 40px auto 30px; animation: tap-late 1.8s ease-in-out infinite; }
@keyframes tap-late { 0%,100% { opacity: .35; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tap-onda { animation: none; opacity: .8; } }
.tap-nota { color: var(--ar-texto-2); font-size: 13.5px; max-width: 420px; margin: 0 auto 12px; }
.tap-pieza {
  font-family: 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  font-size: 18px; margin: 0 0 6px;
}
.tap-otra { font-size: 13px; color: var(--ar-texto-2); }
.dpp-placa-ok { margin-top: 12px; font-size: 13px; color: var(--ar-texto-2); }


/* ── AIRE A LOS COSTADOS ──────────────────────────────────────────────
   El contenido estaba a 30px del borde y el header a 14px: pegado al
   filo y, encima, desalineado entre sí. Un margen único para todo —el
   header, la tira de categorías, el texto sobre la foto y cada sección
   de la página— para que todo arranque en la misma línea vertical y
   respire. Crece con la pantalla y no se come el ancho en el celular. */
:root { --ar-margen: clamp(20px, 4vw, 72px); }

.piel-archivo .wrap { padding-inline: var(--ar-margen) !important; }

.piel-archivo .ar-tira .wrap,
.piel-archivo .ar-cab-inner,
.piel-archivo .ar-nav-inner {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: var(--ar-margen) !important;
}

/* El texto sobre la foto grande arranca en la misma línea que el resto. */
.piel-archivo .ar-hero-txt > .wrap { padding-left: var(--ar-margen) !important; }


/* ── LA FRANJA TERMINA DONDE TERMINA EL OBJETO ────────────────────────
   Sin relleno abajo: el borde inferior de la franja negra coincide con
   la base de la foto, así el PulpaTag queda apoyado sobre el corte y no
   flotando en un colchón de negro. El texto sigue centrado; el que se
   pega al piso es el objeto. */
.ar-placa { padding-bottom: 0 !important; }
.ar-placa-obj { align-self: flex-end; }
@media (max-width: 860px) {
  .ar-placa-obj { align-self: center; }
  .ar-placa { padding-bottom: 0 !important; }
}


/* ── MÓVIL: EL TEXTO SOBRE LA FOTO ────────────────────────────────────
   El clamp del titular tenía piso 30px, o sea que en el celular no
   bajaba nunca: tres renglones de 30px sobre una foto de 280px de alto
   tapaban la guitarra entera. Acá el piso baja de verdad. */
@media (max-width: 700px) {
  .ar-hero h1 {
    font-size: 22px !important; line-height: 1.25 !important;
    letter-spacing: .03em !important;
  }
  .ar-hero-txt .ar-kicker {
    font-size: 10px; letter-spacing: .2em; margin-bottom: 12px !important;
  }
  .ar-hero-txt h1 { margin-bottom: 12px !important; }
  .ar-hero-specs { font-size: 11.5px; }
}

/* ── MÓVIL: EL HUECO NEGRO DEBAJO DEL TEXTO DEL PulpaTag ──────────────
   `flex: 0 1 560px` en una columna no fija el ancho: fija el ALTO. Al
   apilarse, el bloque de texto se estiraba a 560px y dejaba un vacío
   enorme entre el botón y la foto. */
@media (max-width: 860px) {
  .ar-placa-txt { flex: 0 1 auto; }
}


/* ── EL BOTÓN PRINCIPAL NO OCUPA TODA LA FILA ─────────────────────────
   pulpa_dpp.css le pone `width: 100%` desde el diseño anterior, y como
   en la puerta del pasaporte los botones van en un flex, el naranja se
   comía el ancho entero y empujaba al otro abajo. Acá vuelve a medir lo
   que mide su texto. */
.dpp-btn-primary {
  width: auto !important;
  flex: 0 0 auto;
  padding-inline: 34px !important;
  display: inline-flex !important;
}


/* ── LA TIRA DE ARRIBA VA DE BORDE A BORDE ────────────────────────────
   Es la única franja que no sigue el margen del sitio: la frase pegada a
   la izquierda y el país pegado a la derecha, con apenas un respiro. Al
   ser una tira fina, el margen grande la dejaba flotando en el medio y
   perdía el aire de barra de servicio. */
.piel-archivo .ar-tira .wrap,
.piel-archivo .topstrip-inner {
  padding-inline: 16px !important;
}


/* ── SIN SUBRAYADO SOBRE LA FOTO ──────────────────────────────────────
   El kicker lleva una raya naranja debajo en todo el sitio, pero encima
   de la foto grande compite con la imagen y ensucia. Ahí va limpio. */
.ar-hero-txt .ar-kicker {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ── MÓVIL: LA FRANJA NEGRA DEL HEADER, MÁS ALTA ──────────────────────
   Con el alto en `auto` el logo quedaba apretado contra los bordes y la
   marca perdía presencia justo en la pantalla donde más se la mira. */
@media (max-width: 900px) {
  .piel-archivo .ar-cab-inner {
    height: auto !important;
    min-height: 104px !important;
    padding-block: 14px !important;
  }
}
@media (max-width: 560px) {
  .piel-archivo .ar-cab-inner { min-height: 96px !important; }
}


/* ── MÓVIL: EL MISMO LOGO QUE EN DESKTOP, CENTRADO ────────────────────
   Antes el celular armaba la marca en fila —la huella a la izquierda y
   la palabra escrita con la tipografía del sitio a la derecha—. Pero esa
   palabra no es la del logo: el lockup tiene su propio dibujo de letras,
   y al lado de la versión de escritorio se notaba que eran dos marcas
   distintas. Ahora va el mismo archivo, entero y centrado. */
@media (max-width: 900px) {
  .ar-logo-full   { display: block !important; height: 62px !important; top: 0 !important; }
  .ar-logo-huella { display: none !important; }
  .ar-logo-txt    { display: none !important; }
  .piel-archivo .ar-marca { justify-self: center !important; }
  .piel-archivo .ar-cab-inner { min-height: 118px !important; }
}
@media (max-width: 560px) {
  .ar-logo-full { height: 54px !important; }
  .piel-archivo .ar-cab-inner { min-height: 106px !important; }
}


/* ── MÓVIL: EL LOGO, MÁS GRANDE Y CENTRADO DE VERDAD ──────────────────
   Estaba centrado dentro de su columna de la grilla, no dentro del
   header: como a la derecha hay iconos y a la izquierda no, quedaba
   corrido. Se lo saca del flujo y se lo clava en el medio de la franja;
   los iconos siguen en su lugar. */
@media (max-width: 900px) {
  .piel-archivo .ar-cab-inner { position: relative; min-height: 130px !important; }
  .piel-archivo .ar-marca {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important; justify-self: auto !important;
  }
  .ar-logo-full { height: 90px !important; }
}
@media (max-width: 560px) {
  .piel-archivo .ar-cab-inner { min-height: 124px !important; }
  .ar-logo-full { height: 79px !important; }
}


/* ── EL BUSCADOR DE LA PÁGINA DE BÚSQUEDA ─────────────────────────────
   Cuadrado, sin sombras, con el botón pegado: la misma gramática que el
   del header, pero grande y a la vista. En el celular es el único campo
   de búsqueda que existe. */
.bsc-campo {
  display: flex; align-items: stretch; margin: 22px 0 8px;
  max-width: 560px; border: 1px solid var(--ar-linea, #d8d4cd);
}
.bsc-campo input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: 'Funnel Sans', sans-serif; font-weight: 300;
  font-size: 16px; padding: 0 14px; height: 52px; color: var(--ar-ink, #191919);
}
.bsc-campo input::placeholder { color: #9b968e; }
.bsc-campo button {
  flex: 0 0 auto; width: 54px; border: 0; cursor: pointer;
  background: var(--ar-ink, #191919); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.bsc-campo button:hover { background: var(--ar-naranja); }
@media (max-width: 900px) { .bsc-campo { max-width: none; } }


/* EL LÁPIZ DE LA FICHA, en la gramática del archivo: gris de metadato,
   rojo de marca al tocarlo, del mismo tamaño exacto que el corazón. */
.ficha-editar { color: var(--ar-texto-2) !important; width: 30px !important; height: 30px !important; }
.ficha-editar svg { width: 19px !important; height: 19px !important; }
.ficha-editar:hover { color: var(--ar-naranja) !important; }

/* En el celular el corazón baja a 24px (regla de .card-fav): el lápiz
   tiene que bajar con él, si no quedan dos íconos de distinto tamaño
   uno al lado del otro. */
@media (max-width: 700px) {
  .ficha-editar { width: 24px !important; height: 24px !important; }
  .ficha-editar svg { width: 17px !important; height: 17px !important; }
  .dpp-acciones { gap: 4px; }
}


/* La cruz del zoom no existe fuera del zoom, ni en escritorio —ahí se
   sale con un clic o con Escape, y una cruz flotando sería ruido. */
.dpp-zoom-salir { display: none; }

/* ═══ LA ENTRADA A LA MUESTRA ═══════════════════════════════════════
   Un renglón, no un botón relleno: en la gramática del archivo el único
   bloque de color de la página es la acción real (consultar, comprar).
   Mirar no es una acción real, es una invitación. */
.ms-encabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin: 0 0 14px;
}
.ms-entrar {
  font-family: 'Archivo', sans-serif; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--ar-texto-2, #6f6a63);
  border-bottom: 1px solid var(--ar-linea, #e3ded4); padding-bottom: 3px;
  transition: color .15s, border-color .15s;
}
.ms-entrar:hover { color: var(--ar-naranja, #C13438); border-color: var(--ar-naranja, #C13438); }
@media (max-width: 700px) { .ms-entrar { font-size: 11px; letter-spacing: .1em; } }

/* COMPARTIR. El botón se viste igual que «Ver la muestra» —misma
   tipografía, mismo filete abajo— porque son dos acciones del mismo
   rango: mirar y pasar. Un botón sólido al lado de un link subrayado
   diría que uno importa más que el otro, y no es cierto. */
.ms-acciones { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.ms-compartir {
  font-family: 'Archivo', sans-serif; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; cursor: pointer;
  color: var(--ar-texto-2, #6f6a63); background: none; padding: 0 0 3px;
  border: 0; border-bottom: 1px solid var(--ar-linea, #e3ded4);
  transition: color .15s, border-color .15s;
}
.ms-compartir:hover { color: var(--ar-naranja, #C13438); border-color: var(--ar-naranja, #C13438); }
.ms-compartir[aria-expanded="true"] { color: var(--ar-texto, #1a1a1a); border-color: var(--ar-texto, #1a1a1a); }

.ms-panel { background: #fff; padding: 20px 22px; margin: 0 0 26px; border-left: 3px solid var(--ar-texto, #1a1a1a); }
.ms-panel label {
  display: block; font-family: 'Archivo', sans-serif; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ar-texto-2, #6f6a63); margin: 0 0 8px;
}
.ms-panel-caja { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-panel-caja input {
  flex: 1 1 320px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--ar-linea, #e3ded4); background: #fff; border-radius: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
  color: var(--ar-texto, #1a1a1a);
}
.ms-copiar {
  padding: 10px 18px; cursor: pointer; white-space: nowrap;
  font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ar-texto, #1a1a1a);
  background: none; border: 1px solid var(--ar-texto, #1a1a1a);
}
.ms-copiar:hover { background: var(--ar-texto, #1a1a1a); color: #fff; }
.ms-panel-ay {
  margin: 12px 0 0; font-size: 13px; line-height: 1.6;
  color: var(--ar-texto-2, #6f6a63); display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
}
.ms-wa { color: var(--ar-texto, #1a1a1a); text-decoration: none; border-bottom: 1px solid var(--ar-linea, #e3ded4); white-space: nowrap; }
.ms-wa:hover { border-color: var(--ar-naranja, #C13438); color: var(--ar-naranja, #C13438); }
@media (max-width: 700px) {
  .ms-acciones { gap: 16px; }
  .ms-compartir { font-size: 11px; letter-spacing: .1em; }
}

/* ═══ EL SUBRAYADO DE LA PORTADA ════════════════════════════════════
   Toda la franja de arriba es un enlace —se toca y se entra a la pieza—
   y un enlace, para el navegador, va subrayado. El subrayado no lo
   pusimos nosotros: lo pone el navegador y se propaga a todo lo que
   está adentro, incluido el titular. En escritorio casi no se nota; en
   el celular, con el titular en tres renglones sobre la foto, quedan
   tres rayas cruzando la imagen y hasta una raya sola debajo del punto
   final.
   Sobre una foto, el subrayado no aporta nada: que es tocable ya lo
   dice el bloque entero. */
.piel-archivo .ar-hero,
.piel-archivo .ar-hero h1,
.piel-archivo .ar-hero .ar-kicker,
.piel-archivo .ar-hero .ar-hero-frase,
.piel-archivo .ar-hero .ar-hero-specs,
.piel-archivo .ar-hero * {
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   LA RED — LOGOS EN COLUMNA (11-08-2026)
   ══════════════════════════════════════════════════════════════════════
   Va al final del archivo y con !important porque .red-grid, .red-card y
   .red-logo se redefinen en varios lugares de esta misma hoja, todos con
   !important: entre reglas igual de importantes gana la ultima.

   SOBRE EL CREMA DE SIEMPRE. Se probo la franja negra y no cerro:
   los tres logos de fondo blanco quedaban como recuadros encendidos
   en el medio del negro, que es peor que sobre crema. */

/* CUATRO POR FILA Y LA ULTIMA CENTRADA. Flex y no grid: es lo unico que
   centra una fila incompleta sola. El ancho maximo esta calculado para
   que entren exactamente cuatro (4x190 + 3x40 = 880) y no cinco. */
.piel-archivo .red-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  /* ALINEADOS POR ARRIBA, NO POR LA BASE. Con flex-end las tarjetas se
     emparejaban por el ultimo renglon de texto, y como Cristian tiene un
     renglon mas —la chapa de verificador— su foto subia y quedaba fuera
     de linea con los demas logos. Alineando arriba y dandole al bloque
     del logo una altura fija, todos los logos caen en la misma banda y
     lo que sobra cae para abajo, que es donde no molesta. */
  align-items: flex-start !important;
  /* Y MENOS AIRE. El bloque blanco quedaba mucho mas alto que el
     contenido que tiene adentro: entre el margen, el relleno y la calle
     entre filas se iban casi doscientos pixeles en nada. */
  /* ENTRAN LAS TRES FILAS EN UNA PANTALLA — 15/09/2026.
     Andres: «que se vean sin cortar los de abajo, en una pantalla, pero
     no achiques mas los logos». Con trece aliados son 5+5+3 y la ultima
     fila quedaba abajo del pliegue. No se toco ni un pixel de los logos:
     todo lo que se recorto es aire — la calle entre filas, el aire entre
     el logo y su nombre, y el hueco que dejaban las chapas invisibles
     (ver mas abajo). */
  gap: 8px 30px !important;
  /* EL ANCHO LO CALCULA tiendas.php. 22/08/2026. Estaba clavado en 940px
     —justo para cuatro por fila— y con nueve aliados el noveno caia solo
     y centrado en una tercera fila. Ahora la pagina manda cuantos por
     fila entran segun cuantos haya, en --red-ancho, y ninguno queda
     huerfano. El 940 queda de respaldo por si la variable no llega.
     El min() es para las pantallas angostas: ahi manda el ancho que hay
     y no el que pedimos. */
  max-width: min(var(--red-ancho, 940px), 100%) !important;
  margin: 2px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.piel-archivo .red-card {
  /* 170 y no 190: es lo que hace entrar siete por fila. La caja del
     logo sigue siendo de 150 — lo que se saco fue aire al costado. */
  flex: 0 0 170px !important;
  display: flex !important;
  flex-direction: column !important;
  /* EL CULPABLE DE LOS VEINTE PIXELES — 15/09/2026. Andres lo dijo dos
     veces: «el texto que dice verificador sigue quedando muy separado
     del logo». La primera vez mire los margenes del logo y de la chapa,
     los puse en cero, y siguio separado. No eran los margenes.
     Mas arriba en esta misma hoja hay una regla que dejo la tarjeta en
     `gap: 20px` —de cuando el logo iba al costado del texto, en dos
     columnas— y ese gap sigue vivo aunque ahora la tarjeta sea una
     columna: separa el logo de lo que venga abajo. Cero, y listo.
     La leccion es la de siempre: antes de inventar un numero nuevo,
     medir cual es el que esta poniendo la distancia. */
  gap: 0 !important;
  align-items: center !important;
  text-align: center !important;
  grid-template-columns: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* SIN CAJA ALREDEDOR DEL LOGO. La esquina redonda va en la IMAGEN: lo
   que se ve cuadrado es el logo mismo, que trae su propio fondo. */
/* ══ TODOS EN LA MISMA CAJA — 15/09/2026 ══
   Andres: «el logo de Guitars Tone queda muy grande».
   Y tenia razon, pero el logo no era el problema: la regla lo era. Se
   limitaba el ALTO y nada mas —`width:auto`— asi que un logo cuadrado
   terminaba de 90x90 y uno apaisado, como la chapa de Guitars Tone o el
   ovalo de New Jersey, se estiraba a mas del doble de ancho con el
   mismo alto. A igual altura, el apaisado ocupa el triple de superficie:
   por eso se lee como «mas grande» aunque mida lo mismo de alto.

   Ahora todos entran en la MISMA CAJA de 150x90 y se acomodan adentro
   sin deformarse (`contain`). El cuadrado sigue tocando el alto; el
   apaisado toca el ancho y queda mas bajo, que es exactamente lo que
   empareja el peso visual de la fila.

   No se recorta nada: `contain` y no `cover`. Un logo recortado es un
   logo roto, y estos son marcas ajenas. */
.red-logo, .piel-archivo .red-logo {
  /* MAS GRANDES — 15/09/2026. Sin los nombres abajo sobra altura de
     pantalla, y el logo es lo unico que queda: que mida. Crece el ALTO
     (90 -> 106) y NO el ancho, y eso no es un descuido. De las trece
     casas, doce tocan el alto de la caja y una sola toca el ancho
     (Guitars Tone): si se agrandaran los dos lados, esa unica creceria
     el doble que el resto. Subiendo solo el alto, crecen las doce y la
     chapa apaisada se queda como esta, que es justo lo que empareja. */
  width: 150px !important;
  height: 106px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.red-logo img, .piel-archivo .red-logo img {
  max-height: 100% !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}
/* La foto de una persona no es un logo: va redonda. Se la reconoce por
   la chapa de verificador. Si algun dia entra un verificador que sea una
   marca con logo, esta regla se borra y listo: esta sola para eso. */
.piel-archivo .red-card:has(.red-nivel.verificador) .red-logo img {
  /* 104 y no 90: la caja del logo mide 106 de alto y la foto redonda
     se quedo en 90 cuando los demas crecieron. Esos dieciseis pixeles
     de aire adentro de la caja son los que despegaban la chapa
     VERIFICADOR del logo. */
  width: 104px !important; height: 104px !important;
  object-fit: cover !important; border-radius: 50% !important;
}

/* EL NOMBRE, CHIQUITO. Es un pie de foto y no un titulo: el que manda en
   la fila es el logo. */
.piel-archivo .red-info { align-items: center !important; }
/* LOS NOMBRES, AFUERA — 15/09/2026. Andres: «sacale los textos,
   excepto los verificadores». Y tiene razon: trece renglones de
   mayusculas chiquitas abajo de trece logos son trece veces la misma
   informacion que el logo ya da, y encima le sacaban tamano al logo,
   que es lo unico que ahi se mira.
   No se borra del HTML: se saca de la vista. El texto sigue estando
   para el que navega con lector de pantalla y para Google, que de otro
   modo veria trece enlaces sin una palabra adentro. */
.piel-archivo .red-nombre {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  margin: 0 !important; padding: 0 !important;
}
.piel-archivo .red-nombre--nousar {
  font-size: 10.5px !important;
  letter-spacing: .13em !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  margin-bottom: 0 !important;
  color: #5a4e44 !important;
  text-wrap: balance;
}
.piel-archivo .red-card:hover .red-nombre {
  text-decoration: none !important;
  color: var(--ar-naranja) !important;
}
/* La chapa "ALIADO" la tenian seis de siete: una etiqueta que tienen
   casi todos no informa nada y tapaba la unica que si dice algo. */
/* NEW JERSEY, LA EXCEPCION. Andres: «menos el de New Jersey que esta
   grandote». Su ovalo es el mas ancho de los que tocan el alto: a igual
   altura ocupa el doble de superficie que los cuadrados de al lado y se
   lee como si fuera mas importante. Se le pone un techo propio para que
   pese lo mismo que el resto. Es una correccion de UN logo: si manana
   cambian de imagen, se borra esta regla y listo. */
/* EN EL TELEFONO, AIRE — 15/09/2026. Andres: «en el movil quedaron muy
   pegados los logos verticalmente». Los 8px de calle entre filas se
   calcularon para la computadora, donde hay dos filas y el problema era
   que la tercera no entraba. En el telefono entran dos logos por fila y
   salen seis o siete filas: ahi ese mismo 8 hace que los logos se toquen
   y la lista se lea como una sola mancha. Se separan las filas y se
   juntan un poco las columnas, que es lo que necesita una pantalla
   angosta — al reves que una ancha. */

.piel-archivo .red-card.casa-new-jersey .red-logo img {
  /* 78 fue demasiado techo: quedo chico al lado del resto. +12% = 87. */
  max-height: 87px !important;
}

/* EN EL TELEFONO, UNA SOLA COLUMNA — 15/09/2026.
   Se probaron las tres: dos columnas parejas («muy simetricos»), una
   columna en zigzag («si lo hace zigzag es de a pares») y de a pares
   escalonados («no queda bien»). Gana la mas simple, que ademas es la
   que la pagina tenia desde el principio: uno por renglon, centrado.
   Tiene sentido. Estos logos no son items de un catalogo —son trece
   casas— y cualquier acomodo ingenioso les agrega un ritmo que ellos no
   piden. Uno abajo del otro, cada uno con el ancho entero y su aire, se
   leen como una lista de nombres, que es lo que son.
   Nada de escalones ni de columnas: el unico numero que importa aca es
   el aire entre uno y otro. */
@media (max-width: 760px) {
  .piel-archivo .red-grid { gap: 30px 0 !important; }
  .piel-archivo .red-card { flex: 0 0 100% !important; padding: 0 !important; }
  .red-logo, .piel-archivo .red-logo {
    width: 100% !important; max-width: 190px !important; height: 118px !important;
  }
  .piel-archivo .red-card:has(.red-nivel.verificador) .red-logo img {
    width: 116px !important; height: 116px !important;
  }
  .piel-archivo .red-card.casa-new-jersey .red-logo img { max-height: 97px !important; }
}

/* LA CHAPA, PEGADA AL LOGO — 15/09/2026. Andres: «el texto que dice
   verificador tiene que ir mas pegado al logo». Quedaba flotando a
   cuarenta pixeles, y no era este margen: era el aire que dejaba la foto
   dentro de una caja que habia crecido (ver la regla de la foto redonda,
   mas arriba) mas el margen de abajo del logo. Corregido lo de arriba,
   este margen baja a cero y la chapa se apoya en el logo. */
.piel-archivo .red-meta { justify-content: center !important; margin-top: 0 !important; }
.piel-archivo .red-nivel { display: none !important; }
/* EL HUECO DE LAS CHAPAS QUE NO ESTAN. De trece aliados, dos llevan
   chapa; a los otros once se les escondia el contenido (`.red-nivel`
   en display:none) pero la fila que lo contiene seguia ahi, ocupando su
   margen y su alto. Eran veinte pixeles de nada por tarjeta, y con tres
   filas eso solo ya empujaba la ultima abajo del pliegue.
   Se esconde la fila entera cuando no tiene adentro ninguna de las dos
   chapas que si se muestran. */
.piel-archivo .red-meta:not(:has(.red-nivel.verificador)):not(:has(.red-nivel.fundador)) {
  display: none !important;
}
.piel-archivo .red-nivel.verificador,
.piel-archivo .red-nivel.fundador {
  display: inline-block !important;
}

/* El segundo link de la puerta del coleccionista: mismo peso tipografico
   que el primero pero en la tinta del sitio y no en el naranja, para que
   no compitan. Son dos caminos, no uno principal y uno de descarte. */
/* LOS DOS ENLACES DE LA PUERTA 1 SE PEGABAN.
   «Cómo funciona el radar» y «Mirá el archivo a pantalla completa» son
   los dos inline con el mismo filete naranja, así que cuando entraban en
   el mismo renglón quedaban separados por un espacio de palabra y se
   leían como un solo enlace largo. Los 10px de margen no hacían nada:
   entre elementos en línea el margen superior no separa renglones.

   Con `display:block` el segundo se va a su propia línea siempre.
   `width:fit-content` es lo que impide que el filete se estire de punta a
   punta de la columna — un borde inferior sobre un bloque marca el ancho
   del bloque, no el del texto, y ahí el subrayado naranja se convierte en
   una raya que parece un separador.
   El de arriba queda con más aire que el de abajo a propósito: son dos
   acciones de distinto peso y el orden se lee en la distancia. */
.ar-puerta .ar-mas-ver {
  display: block;
  width: fit-content;
  margin-top: 20px;
  color: var(--ar-texto);
}
.ar-puerta .ar-mas-ver:hover { color: var(--ar-naranja); }

/* ═══ EL ÁMBITO DEL BUSCADOR: UN DESPLEGABLE QUE PODAMOS DIBUJAR ═══
   El <select> nativo no se puede vestir. La lista abierta la dibuja el
   sistema operativo: fondo blanco, resalte azul, tipografía del sistema
   — tres cosas que no son de PULPA, encima de un header negro. En el
   archivo había un intento honesto de arreglarlo con
   `option { background:#1c1c1c }`, y Chrome lo ignora. No es que
   estuviera mal escrito: no se puede.

   Así que el select sigue existiendo —es el que viaja en el form y el
   que anda si no hay JavaScript, tal como decía el comentario de arriba
   y con razón— y encima se dibuja uno nuestro. Si el JavaScript no
   corre, el nativo queda a la vista y el buscador funciona igual: no se
   pierde nada, sólo la pintura.

   Cerrado no cambia nada: mismo texto, misma flechita, mismo borde. Lo
   que cambia es la lista, que ahora es negra como el header, con la
   opción elegida marcada con la raya naranja de la marca. */
.ar-ambito.js-listo select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.ar-ambito .amb-btn {
  appearance: none; background: transparent; border: 0; outline: 0; padding: 0; margin: 0;
  color: #fff; font-family: 'Funnel Sans', sans-serif; font-weight: 300;
  font-size: 16px; line-height: 1; cursor: pointer; text-align: left;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-ambito .amb-btn:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.ar-ambito .amb-lista {
  position: absolute; top: calc(100% + 8px); left: -1px; z-index: 120;
  min-width: 212px; margin: 0; padding: 5px 0; list-style: none;
  background: #141210; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .13s ease, transform .13s ease;
}
.ar-ambito.abierto .amb-lista { opacity: 1; transform: none; pointer-events: auto; }
.ar-ambito .amb-lista li {
  padding: 8px 16px 8px 15px; font-family: 'Funnel Sans', sans-serif; font-weight: 300;
  font-size: 14.5px; color: rgba(255,255,255,.74); cursor: pointer;
  border-left: 1px solid transparent; white-space: nowrap;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.ar-ambito .amb-lista li:hover,
.ar-ambito .amb-lista li.marcada { background: rgba(255,255,255,.06); color: #fff; }
/* La elegida se señala con la raya de la marca, no con un tilde ni con
   un bloque de color: es la misma raya que lleva el rótulo del hero. */
.ar-ambito .amb-lista li[aria-selected="true"] {
  color: #fff; border-left-color: var(--ar-naranja);
}
.ar-ambito .amb-sep { height: 1px; margin: 5px 0; background: rgba(255,255,255,.12); padding: 0; cursor: default; }
.ar-ambito .amb-sep:hover { background: rgba(255,255,255,.12); }
/* La flechita gira: es la unica pista de que la lista esta abierta
   cuando el panel cae fuera del rabillo del ojo. */
.ar-ambito svg { transition: transform .16s ease; }
.ar-ambito.abierto svg { transform: rotate(180deg); }
@media (max-width: 900px) { .ar-ambito .amb-btn { font-size: 14px; max-width: 120px; } }
@media (prefers-reduced-motion: reduce) { .ar-ambito .amb-lista { transition: none; } }

/* ═══ EL HERO, EN LA GRAMÁTICA PROPIA (2026-08-12) ═════════════════
   Venía con serif en versales, el texto flotando a media altura y una
   barra naranja bajo el rótulo. Tres gestos que juntos daban la portada
   de una tienda —y encima de una tienda que es aliada nuestra—.
   Esto lo devuelve a lo que el documento del 8 de agosto ya había
   decidido: un solo sans, contraste por TAMAÑO y no por peso, sin
   mayúsculas con letterspacing, el texto apoyado en el piso de la foto,
   y el naranja del tamaño de una moneda o directamente ausente. */

/* El texto se apoya abajo, no flota en el medio. Este cambio solo ya
   cambia la silueta de la pantalla entera. */
.piel-archivo .ar-hero-txt {
  align-items: flex-end !important;
  padding-bottom: clamp(26px, 3.2vw, 46px) !important;
}

.piel-archivo .ar-hero h1 {
  font-family: 'Archivo', sans-serif !important;
  /* PESO 500, NO 400. La maqueta que se aprobo es 500, y el sitio bajaba
     solo el 400 y el 600: el navegador habria falseado uno de los dos y
     el titular no habria sido el que se eligio. Se agrego el 500 al
     pedido de Google Fonts en partials/header.php. */
  font-weight: 500 !important;
  text-transform: none !important;          /* se escribe como se escribe */
  /* Bajado el 12/08: a 64px en un monitor ancho el titular tapaba la
     pieza en vez de acompañarla. La maqueta se miro a 1440 y ahi daba
     ~55px; en 1920 el mismo clamp se iba a 64. Ahora el techo es 46. */
  font-size: clamp(28px, 3.2vw, 46px) !important;
  line-height: 1.02 !important;
  /* Apretado a propósito: con el espaciado de fábrica un titular grande
     se abre y se lee como un cartel de oferta. Junto, se lee como una
     sola palabra larga. Por debajo de -0.045em las letras se pisan. */
  letter-spacing: -0.030em !important;
  /* EL CONTENEDOR INVISIBLE, contado en CARACTERES y no en píxeles ni en
     porcentaje: así el titular corta en el mismo lugar relativo en el
     monitor y en el teléfono. Sin esto se estira hasta donde llegue la
     caja y el ojo no encuentra dónde empieza el renglón siguiente. */
  /* 16ch. Empezo en 9 y se fue subiendo por dos razones distintas:
     la palabra mas larga del catalogo tiene que entrar entera —
     "Stratocaster" no entraba en 9 y el navegador la partia al medio —
     y ademas el bloque angosto apretaba de mas el titular. */
  max-width: 20ch !important;
  margin-bottom: 22px !important;
  /* ── EL PASO ENTRE LA LETRA Y LA FOTO ──
     Lo que hace que el texto se apoye en la foto en vez de estar pegado
     encima son tres cosas, y ninguna se ve por separado.
     1. Que abajo haya una zona pareja: de eso se encarga el lado que
        elige el JavaScript.
     2. Esta sombra: enorme y casi transparente. No se lee como sombra
        —no hay un borde duro por ningun lado— pero levanta el contraste
        justo alrededor de cada letra. Una sombra chica y marcada seria
        exactamente el efecto contrario: plantilla.
     3. El suavizado de abajo. */
  text-shadow: 0 1px 30px rgba(0,0,0,.42), 0 0 2px rgba(0,0,0,.14) !important;
}
/* Sobre una foto oscura, el texto blanco engorda: el navegador le suma
   pixeles de color en los bordes para disimular el escalonado. En claro
   sobre oscuro eso se nota como un titular mas gordo y mas sucio de lo
   que se dibujo. Esto lo apaga y devuelve el trazo al grosor real. */
.piel-archivo .ar-hero .ar-hero-txt {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.piel-archivo .ar-hero .ar-kicker,
.piel-archivo .ar-hero-ver { text-shadow: 0 1px 22px rgba(0,0,0,.5); }
@media (max-width: 700px) {
  /* En el telefono la misma regla: la palabra mas larga entra entera.
     11ch partia "Stratocaster" igual que en el monitor. */
  .piel-archivo .ar-hero h1 { font-size: 26px !important; max-width: 17ch !important; }
}

/* El rótulo ahora dice el número de pasaporte. Una barra naranja debajo
   de un número queda a mitad de camino entre dato y adorno, así que se
   va: el acento vive en otro lado y del tamaño de una moneda. */
.piel-archivo .ar-hero .ar-kicker {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  font-family: 'Archivo', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.72) !important;
  margin-bottom: 14px !important;
}

/* EL SUBRAYADO QUE CRECÍA AL PASAR EL MOUSE: FUERA.
   Estaba pensado para avisar que el titular era clickeable. Ahora eso
   lo dice el botón, que es lo que un botón hace. Dos señales para la
   misma cosa es una de más. */
.piel-archivo .ar-hero .ar-hero-txt h1 > span,
.piel-archivo .ar-hero.hero-mensaje .ar-hero-txt h1:hover > span {
  background-image: none !important;
  background-size: 0 0 !important;
}

/* La puerta. Rectángulo transparente, no pastilla: la pastilla blanca
   rellena es un bloque de color del tamaño de una mano y acá el color
   lo pone la foto. */
.piel-archivo .ar-hero-ver {
  display: inline-flex; align-items: center; justify-content: center;
  /* Un poco más ancho que el mínimo justo: el botón es la única cosa
     apretable de la portada y sobre una foto grande un rectángulo chico
     se lee como una etiqueta, no como una puerta. El aire lateral es lo
     que le da presencia sin agrandar la letra. */
  height: 42px; min-width: 124px; padding: 0 30px;
  border: 1px solid rgba(255,255,255,.72); color: #fff;
  font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .14em;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
/* EL BOTÓN NO SE RELLENA. ══════════════════════════════════════════
   Acá el hover pintaba el botón de blanco sólido con texto oscuro. El
   detalle que lo hacía peor: EL HOVER NO ES DEL BOTÓN, es del hero
   entero —toda la portada es un <a>—, así que alcanzaba con pasar el
   mouse por cualquier parte de la foto para que apareciera un rectángulo
   blanco macizo encima de la imagen. No era un estado de botón: era una
   mancha que se prendía sola al mover el mouse.
   Un slab blanco sobre la foto va en contra de la regla de la piel:
   el acento es del tamaño de una moneda y el marco no compite con el
   objeto. La respuesta al hover ahora es el borde, que pasa de
   translúcido a blanco pleno, y un velo apenas perceptible. Se nota que
   responde y no tapa la foto. */
.ar-hero:hover .ar-hero-ver {
  background: rgba(255,255,255,.10);
  border-color: #fff;
  color: #fff;
}

/* «Ver el archivo en pantalla completa» son treinta y cuatro caracteres.
   Con .14em de espaciado y 26px de aire a cada lado, en un teléfono se
   iba del ancho de la pantalla. Se afloja el espaciado y el padding en
   vez de achicar la letra, que sobre una foto es lo primero que se
   rompe. El alto queda en 42px: es el mínimo cómodo para un dedo. */
@media (max-width: 700px) {
  .piel-archivo .ar-hero-ver {
    /* Se aflojó el ahogo. Con `min-width:0` y 14px de aire, en una pieza
       el botón decía «Ver» en 52px: una etiqueta, no una puerta. Ojo con
       el `box-sizing: content-box` de este botón — el mínimo es del
       CONTENIDO, así que lo que se ve son 96 + 40 de padding = 136px.
       La etiqueta más larga sigue entrando holgada en 390px. */
    padding: 0 20px; letter-spacing: .06em; font-size: 11.5px; min-width: 96px;
  }
}
.ar-hero.cambiando .ar-hero-ver { opacity: 0; transition: opacity .26s ease; }
.ar-hero-ver { transition: opacity .26s ease; }
/* EN LOS TEXTOS EXPLICATIVOS NO VA EL BOTON.
   El boton "Ver" es para una pieza: es la puerta a su ficha. En los dos
   slides que explican algo —"Documentá tu colección sin publicarla"—
   el que lleva a alguna parte es el texto, y un boton ahi abajo no
   agrega una puerta: agrega una duda sobre cual de las dos usar.

   Estaba resuelto por un rodeo: "si hay frase de apoyo, escondelo".
   Funcionaba de casualidad, porque hoy los mensajes son los unicos que
   traen frase. El dia que una pieza tenga una linea de apoyo, el boton
   desaparece sin que nadie entienda por que. Se hace por el dato, que
   existe: la clase hero-mensaje. */
/* El boton va donde hay a donde ir. En los dos textos explicativos no
   hay nada que abrir que el texto no prometa ya, asi que no va. En la
   bienvenida SI va, y dice "Ver el archivo": es la puerta al archivo
   entero a pantalla completa. */
.piel-archivo .ar-hero.hero-mensaje .ar-hero-ver { display: none !important; }
.piel-archivo .ar-hero-ver[hidden] { display: none !important; }

/* ── EL TEXTO SE VA AL LADO PAREJO DE LA FOTO ──────────────────────
   Lo decide el JavaScript midiendo las dos franjas: gana la más pareja,
   y sólo si empatan desempata la más oscura. Acá vive lo que se ve.
   No alcanza con correr el bloque: hay que ALINEAR el texto al borde de
   afuera. Un bloque a la derecha con el texto alineado a la izquierda
   se lee como un error de maquetación, no como una decisión. */
.piel-archivo .ar-hero.hero-derecha .ar-hero-txt { justify-content: flex-end; }
.piel-archivo .ar-hero.hero-derecha .ar-hero-txt > .wrap {
  padding-left: 0; padding-right: 14px; text-align: right;
}
.piel-archivo .ar-hero.hero-derecha .ar-hero-txt h1 { margin-left: auto; }
/* Idem: por elemento, no por hero. La especificidad está pensada —
   .velo-derecha (4) le gana a .velo-claro (3), y .velo-derecha.velo-claro
   (5) le gana a las dos— así que el orden en el archivo no importa. */
.piel-archivo .ar-hero .ar-hero-velo.velo-derecha {
  background: linear-gradient(270deg,
    rgba(10,10,10,.88) 0%, rgba(10,10,10,.55) 40%, rgba(10,10,10,0) 72%);
}
.piel-archivo .ar-hero .ar-hero-velo.velo-derecha.velo-claro {
  background: linear-gradient(270deg,
    rgba(8,8,8,.94) 0%, rgba(8,8,8,.78) 38%, rgba(8,8,8,.22) 68%, rgba(8,8,8,0) 86%);
}
/* El cambio de lado acompaña al cruce de fotos, que ya se apaga y vuelve.
   Sin esto el titular saltaría de un lado al otro a plena vista. */
.piel-archivo .ar-hero .ar-hero-txt { transition: justify-content 0s linear .26s; }

/* ── CUANDO EL TITULAR ES UNA FRASE Y NO UN NOMBRE ─────────────────
   9ch es la medida justa para "1966 Fender Telecaster Esquire". Para la
   bienvenida —una oracion entera— esa misma medida la parte en siete
   renglones, la frase no entra en la altura del hero y se sale por
   arriba: el titulo aparece cortado al ras del menu. Paso en vivo.
   Los dos textos viven en el mismo lugar, asi que el lugar tiene que
   saber cual de los dos le toca. */
/* SE SUBIÓ EL 18/08. El techo estaba en 32px contra 46 del titular de
   una pieza, y en la misma pantalla —la bienvenida y las piezas se
   alternan en el mismo lugar— esa diferencia se lee como que el texto
   de la portada vale menos. La regla nació para arreglar un desborde
   real y lo arregló de más.
   El cuerpo sube a 40 y el ancho BAJA de 26 a 20 caracteres: lo que
   estaba mal no era solo el tamaño de la letra sino la medida. El piso
   también sube, porque en una ventana angosta el problema era el mismo. */
.piel-archivo .ar-hero.hero-frase-larga h1 {
  /* LA MEDIDA MANDA MÁS QUE EL CUERPO. Con 28 caracteres por renglón el
     titular se estiraba a lo ancho y, aunque la letra creció, seguía
     leyéndose flojo: un titular ancho y de tres renglones es un párrafo
     grande, no un titular. A 20 la frase arma un bloque de cuatro
     renglones cortos, que es la forma que tiene peso.
     Se mide en `ch` y no en píxeles a propósito: la medida se define en
     caracteres por renglón, así que cuando el cuerpo cambia con el
     ancho de la pantalla, el corte se mantiene donde tiene que estar. */
  max-width: 20ch !important;
  font-size: clamp(24px, 2.9vw, 40px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.018em !important;   /* menos apretado: es lectura, no rotulo */
}
@media (max-width: 700px) {
  .piel-archivo .ar-hero.hero-frase-larga h1 {
    font-size: 23px !important; max-width: 17ch !important;
  }
}
/* Cinturon de seguridad: pase lo que pase con el texto, el bloque no
   puede ser mas alto que el hero. Si algun dia entra un titulo mas largo
   que todos los previstos, se achica en vez de desbordar. */
.piel-archivo .ar-hero-txt > .wrap { max-height: 100%; overflow: hidden; }

/* ── LA FRASE DE APOYO: MISMA FAMILIA, OTRO CONTENEDOR ─────────────
   Debajo del titular, en los dos slides de mensaje, va una frase corta.
   Venia con la tipografia del cuerpo del sitio, asi que en el hero
   convivian dos familias a diez centimetros una de otra — y eso, mas
   que variedad, se lee como descuido.

   Va en Archivo, la misma del titular. Lo que cambia no es la familia:
   es el TAMAÑO y, sobre todo, el CONTENEDOR.

   Y aca esta el punto que no es obvio: la frase NO puede usar la medida
   del titular. Nueve caracteres funcionan para un nombre en cuerpo 46
   —son tres o cuatro palabras grandes— pero a cuerpo 16 esa misma
   medida da renglones de dos palabras, una escalerita. La regla real es
   que la medida se elige por CANTIDAD DE CARACTERES POR RENGLON, no por
   ancho de pixeles: un titular quiere 8 a 12, un texto de lectura 45 a
   75, y una frase de apoyo como esta cae en el medio, alrededor de 34.
   Por eso son dos contenedores distintos y no uno solo heredado. */
.piel-archivo .ar-hero .ar-hero-specs,
.piel-archivo .ar-hero .ar-hero-frase {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(14px, 1.15vw, 17px) !important;
  line-height: 1.45 !important;
  letter-spacing: -0.004em !important;   /* casi nada: en cuerpo chico apretar molesta */
  color: rgba(255,255,255,.84) !important;
  text-transform: none !important;
}
.piel-archivo .ar-hero .ar-hero-specs {
  max-width: 34ch !important;
  margin: 0 0 24px !important;
  text-shadow: 0 1px 24px rgba(0,0,0,.5);
}
.piel-archivo .ar-hero .ar-hero-specs:empty { margin: 0 !important; }
/* Del lado derecho el bloque tambien se apoya en el borde de afuera. */
.piel-archivo .ar-hero.hero-derecha .ar-hero-specs { margin-left: auto !important; }

/* ── LOS TRES TIPOS DE TITULAR, QUE NO SON UNO ─────────────────────
   En el mismo renglon del hero caen tres cosas distintas, y tratarlas
   igual es el error que se veia en pantalla:

   1. UN NOMBRE — "1966 Fender Telecaster Esquire". No se lee: se
      reconoce. Aguanta la medida angosta y el cuerpo grande, y que
      corte donde sea, porque el ojo lo toma entero. Es el default.

   2. UN MENSAJE ESCRITO — "Documentala sin publicarla.". Esto SI se
      lee, y con la medida del nombre quedaba "Documentala / sin /
      publicarla.": la palabra "sin" sola en un renglon, colgada. Eso no
      es diseno, es un accidente de ancho.

   3. LA BIENVENIDA, que es una oracion entera y ya tenia lo suyo.

   La primera version de esto contaba caracteres para adivinar cual era
   cual. Adivinar estaba de mas: el carrusel YA marca los mensajes con
   la clase hero-mensaje, porque son los dos unicos slides que llevan a
   una pagina propia. El dato estaba ahi desde el principio. */
.piel-archivo .ar-hero.hero-mensaje h1 {
  max-width: 20ch !important;
  font-size: clamp(28px, 3.4vw, 48px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.022em !important;   /* menos apretado: esto se lee */
}

/* Y ESTO ES LO QUE EVITA LA PALABRA COLGADA, en los tres casos.
   Sin balance, el navegador llena cada renglon hasta donde entra y lo
   que sobra cae solo al ultimo. Con balance reparte el texto en
   renglones parejos y elige el corte con criterio. Es una linea de CSS
   y hace mas por que esto no parezca plantilla que cualquier otra cosa
   de las que tocamos hoy. */
.piel-archivo .ar-hero h1 { text-wrap: balance; }

/* El rotulo de los mensajes vuelve a ser chico, porque ya no es media
   frase: ahora dice "Vendé sin publicar" y el titular se sostiene solo.
   Se lo deja con la misma pinta que el numero de pasaporte de las
   piezas — una etiqueta es una etiqueta en los dos casos. */

/* ── EL CURSOR DEJA DE MENTIR ──────────────────────────────────────
   Todo el hero tenia cursor:e-resize, la flecha de dos puntas, para
   sugerir "arrastra para pasar de foto". Nunca se arrastro nada: el
   click pasa al slide siguiente y listo. Y desde que hay un boton Ver
   adentro, la flecha de dos puntas sobre una foto se lee como un
   control roto — como si algo se pudiera estirar y no se pudiera.
   El puntero de manito queda donde de verdad hay algo que apretar: el
   boton, las rayitas y el texto de los dos mensajes. */
.piel-archivo .ar-hero,
.piel-archivo .ar-hero .ar-hero-txt { cursor: default !important; }
.piel-archivo .ar-hero .ar-hero-ver,
.piel-archivo .ar-hero .ar-hero-rayas i,
.piel-archivo .ar-hero.hero-mensaje .ar-kicker,
.piel-archivo .ar-hero.hero-mensaje .ar-hero-txt h1,
.piel-archivo .ar-hero.hero-mensaje .ar-hero-frase,
.piel-archivo .ar-hero.hero-mensaje .ar-hero-specs { cursor: pointer !important; }

/* Cinturon contra desbordes: el bloque de texto nunca puede ser mas
   ancho que la caja que lo contiene, pase lo que pase con la medida en
   caracteres. Sin esto, una palabra mas larga que la medida se sale por
   el costado en vez de acomodarse. */
.piel-archivo .ar-hero-txt > .wrap { max-width: 100% !important; min-width: 0; }
/* NUNCA PARTIR UNA PALABRA EN UN TITULAR.
   Aca estuvo el error: para evitar un desborde puse break-word, y el
   navegador hizo lo que le pedi — "Stratocaste / r Sunburst". Cortar
   una palabra al medio es peor que cualquier desborde: se lee como un
   error de sistema.
   La solucion no es partir, es que la medida alcance. "Stratocaster"
   son doce letras y la medida eran nueve caracteres: la palabra mas
   larga tiene que entrar entera, esa es la regla. 14ch es lo que cubre
   los nombres largos del catalogo —Stratocaster, Rickenbacker,
   Thunderbird— sin abrir el bloque de mas. */
.piel-archivo .ar-hero h1,
.piel-archivo .ar-hero .ar-hero-specs { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; }

/* ═══ LA RED, CON CARA ═══════════════════════════════════════════════
   Banda fotográfica entre las puertas y la invitación a las tiendas.
   Mismo idioma que el hero: la foto a sangre pone el negro, el marco no
   compite, y el acento naranja aparece del tamaño de una moneda —acá,
   en el filete del CTA y en nada más—.
   El velo va en dos capas y no en una: un negro plano al 55% apaga la
   foto por igual y deja el texto de abajo flotando sobre lo más claro
   de la imagen. Con un degradado que carga abajo, el texto siempre cae
   sobre la zona oscura sin que haya que elegir la foto a mano. */
.ar-red {
  position: relative; overflow: hidden;
  background: var(--ar-ink);
  padding: 96px 0 88px;
  color: #fff;
  /* #casas / ?ir=casas: el header queda pegado arriba y sin esto el
     titulo cae justo debajo, tapado */
  scroll-margin-top: 78px;
}
.ar-red-fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  filter: grayscale(.35);
}
.ar-red-velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(12,11,10,.42) 0%, rgba(12,11,10,.78) 62%, rgba(12,11,10,.92) 100%),
    rgba(12,11,10,.28);
}
.ar-red.sin-foto .ar-red-velo { background: none; }
.ar-red-txt { position: relative; z-index: 2; max-width: 780px; }

.ar-red h2 {
  font-family: 'Archivo', sans-serif !important; font-weight: 400 !important;
  text-transform: uppercase !important;
  font-size: clamp(28px, 3.2vw, 44px) !important; letter-spacing: .03em !important;
  line-height: 1.14 !important; margin: 0 0 20px !important; color: #fff !important;
}
.ar-red-baja {
  font-family: 'Archivo', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 19px); letter-spacing: .04em; line-height: 1.45;
  color: #fff; margin: 0 0 16px; max-width: 26ch;
}
.ar-red-pie {
  font-family: 'Funnel Sans', sans-serif; font-weight: 300; font-size: 16px;
  line-height: 1.7; color: rgba(255,255,255,.74); margin: 0 0 34px; max-width: 52ch;
}

/* LOS LOGOS. Reusan .red-logo de tiendas.php para la caja y el recorte;
   acá sólo se los pone en fila y se los aclara para que sobrevivan al
   fondo oscuro. Los que no tienen logo muestran su inicial, igual que en
   la página de la red: una caja vacía se lee como un error de carga. */
.ar-red-logos {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 34px;
}
.ar-red-logo {
  width: 92px; height: 62px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94);
  transition: transform .2s ease, background .2s ease;
}
.ar-red-logo img { max-width: 76%; max-height: 72%; object-fit: contain; }
.ar-red-logo:hover { transform: translateY(-2px); background: #fff; }

/* LA CHAPA SE FUE, Y ESTA VEZ DE VERDAD. 20/08/2026.
   Anoche le devolvimos a esta franja la chapa blanca que «EL LOGO SIN
   CAJA» le había borrado, porque sin ella tres logos oscuros
   desaparecían sobre el fondo. Era un parche honesto: tapaba el
   problema en vez de resolverlo.
   Hoy los logos son vectores curados, cada uno preparado para los dos
   fondos donde vive, y Cube tiene además su variante clara. Ya no hace
   falta ninguna caja: el archivo trae lo que necesita. Esto es lo que
   Andrés pidió desde el principio —«no quiero caja blanca por CSS como
   solución final»— y recién ahora se puede cumplir.
   Los que todavía no tienen vector siguen entrando por .red-logo y los
   sigue gobernando el CSS de siempre. Por eso esta regla mira
   .es-vector y no toca nada más. */
.piel-archivo .ar-red-logo.es-vector,
.piel-archivo .red-logo.es-vector,
.piel-archivo .tienda-logo.es-vector {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.piel-archivo .ar-red-logo.es-vector img,
.piel-archivo .red-logo.es-vector img,
.piel-archivo .tienda-logo.es-vector img {
  width: auto !important;
  height: 100% !important;
  /* .ar-red-logo img traía max-width:76% / max-height:72%, que servían
     cuando el logo iba adentro de una chapa y no debía tocarle los
     bordes. Sin chapa esos topes sólo achican: el vector tiene que poder
     ocupar la caja entera. */
  max-width: 100% !important; max-height: 100% !important;
  object-fit: contain !important;
}
/* AL DOBLE EN LA PORTADA. 20/08/2026.
   92x62 era el tamaño de cuando el logo era un avatar cuadrado metido en
   una chapa: chico a propósito, para que la caja no dominara. Ahora son
   vectores, no pixelan y no tienen caja, así que pueden ocupar el lugar
   que la franja les da. La medida vale para los ocho —también para el
   que todavía entra por avatar— para que la fila no quede despareja. */
.piel-archivo .ar-red-logo { width: 184px !important; height: 124px !important; }
.piel-archivo .ar-red-logo.es-vector:hover { background: transparent !important; }
/* LA CINTA SIN FIN, DE DERECHA A IZQUIERDA. 20/08/2026.
   La lista viene impresa dos veces desde el PHP. La cinta se desplaza
   exactamente -50%, o sea el ancho de UNA lista, y ahí vuelve a cero:
   como lo que queda a la vista en ese instante es idéntico a lo que
   había al empezar, el corte no se ve y parece infinita.

   POR QUÉ MARGEN Y NO GAP. Con `gap` los 16 logos tienen 15 espacios, no
   16, así que la mitad exacta no cae en un borde limpio y el empalme
   pega un salto de 20px cada vuelta. Con margen a la derecha cada logo
   mide siempre lo mismo —ancho + margen— y la mitad es exacta.

   SE PAUSA AL PASAR EL MOUSE. Una tira que no se detiene obliga a
   perseguir con el ojo el logo que a uno le interesa, y el que le
   interesa es justo el que se está yendo.

   Y RESPETA prefers-reduced-motion. A quien pidió en su sistema que las
   cosas no se muevan, no se le mueven: queda una fila que se arrastra a
   mano. Es la misma información, sin el movimiento. */
.ar-red-logos-viewport {
  overflow: hidden;
  margin: 0 0 34px;
  /* Los extremos se desvanecen: sin esto los logos aparecen y
     desaparecen de golpe contra el borde y se ve el recorte. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.piel-archivo .ar-red-logos.ar-red-logos-cinta {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  gap: 0 !important;
  margin: 0 !important;
  animation: ar-red-cinta calc(var(--cinta-n, 8) * 1.225s) linear infinite;
  /* EL PASO, EN PÍXELES ENTEROS. 03/09/2026.
     Antes la vuelta era `translate3d(-50%)`. Con 13 casas eso da
     -2833,675 px: un valor con decimales. La cinta es una capa
     compositada de 5.667 px de ancho, así que en cada cuadro la GPU la
     dibujaba en una posición fraccionaria y la interpolaba — medio píxel
     de corrimiento en todo, que se ve como desenfoque permanente
     mientras se mueve. No era tironeo ni falta de potencia: era el
     redondeo.
     Ahora el recorrido se calcula con el paso real de un logo (ancho +
     margen), que es entero en los tres tamaños, así que cada cuadro cae
     en un píxel exacto y el empalme sigue siendo perfecto porque la
     cinta son dos mitades iguales de `--cinta-n` logos. */
  --cinta-paso: 218px;   /* 184 de logo + 34 de margen */
}
.piel-archivo .ar-red-logos-cinta .ar-red-logo { margin-right: 34px !important; }
.ar-red-logos-viewport:hover .ar-red-logos-cinta { animation-play-state: paused; }
@keyframes ar-red-cinta {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--cinta-n, 8) * var(--cinta-paso, 218px) * -1), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .piel-archivo .ar-red-logos.ar-red-logos-cinta { animation: none !important; }
  .ar-red-logos-viewport { overflow-x: auto; }
}

/* EN EL CELULAR, MÁS CHICOS. 20/08/2026.
   184px es una medida de escritorio. En un teléfono de 375px de ancho
   entra un logo y medio, y una cinta donde sólo se ve uno no se lee como
   una red: se lee como un banner. Achicando entran tres, y tres ya
   cuentan que hay muchos. La foto de quien no tiene logo sigue el mismo
   tamaño para que el círculo no quede desproporcionado. */
@media (max-width: 900px) {
  /* MÁS RÁPIDA CUANTO MÁS CHICA LA PANTALLA.
     La vuelta completa dura lo mismo en todos lados, pero acá se ven
     tres logos en vez de siete: el que espera a que aparezca el suyo
     espera el doble. Se acorta la vuelta para compensar. */
  .piel-archivo .ar-red-logos.ar-red-logos-cinta {
    animation-duration: calc(var(--cinta-n, 8) * 0.925s);
    --cinta-paso: 164px;   /* 140 + 24 */
  }
  .piel-archivo .ar-red-logo { width: 140px !important; height: 94px !important; }
  .piel-archivo .ar-red-logos-cinta .ar-red-logo { margin-right: 24px !important; }
  .piel-archivo .ar-red-logo:not(.es-vector) img { width: 94px !important; height: 94px !important; }
}
@media (max-width: 560px) {
  .piel-archivo .ar-red-logos.ar-red-logos-cinta {
    animation-duration: calc(var(--cinta-n, 8) * 0.7s);
    --cinta-paso: 124px;   /* 106 + 18 */
  }
  .piel-archivo .ar-red-logo { width: 106px !important; height: 72px !important; }
  .piel-archivo .ar-red-logos-cinta .ar-red-logo { margin-right: 18px !important; }
  .piel-archivo .ar-red-logo:not(.es-vector) img { width: 72px !important; height: 72px !important; }
}

/* LA FOTO DE UNA PERSONA VA REDONDA, TAMBIÉN EN LA PORTADA. 20/08/2026.
   En `tiendas.php` esto ya estaba resuelto —«la foto de una persona no es
   un logo: va redonda»— pero ahí se reconoce por la chapa de verificador,
   que en la franja de la portada no existe. Acá el criterio es otro y más
   simple: si NO es uno de nuestros vectores, es un avatar que subió
   alguien, y un avatar es una foto. El círculo la separa de los logos en
   vez de disfrazarla de logo. */
.piel-archivo .ar-red-logo:not(.es-vector) img {
  width: 124px !important; height: 124px !important;
  max-width: none !important; max-height: none !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
.ar-red-inicial {
  font-family: 'Archivo', sans-serif; font-size: 24px; color: #141210;
}

.ar-red-cta {
  display: inline-flex; align-items: center;
  font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #fff !important;
  border-bottom: 2px solid var(--ar-naranja); padding-bottom: 5px;
}
.ar-red-cta:hover { color: var(--ar-naranja) !important; }

@media (max-width: 700px) {
  .ar-red { padding: 66px 0 60px; }
  .ar-red-baja { max-width: none; }
  .ar-red-logo { width: 74px; height: 52px; }
}

/* ═══ LA RED (tiendas.php) ═══════════════════════════════════════════
   EL PROBLEMA ERA EL BLANCO PLANO. `--ar-papel` es #FFFFFF puro, y sobre
   blanco puro una tarjeta de #fffdf9 no se apoya en nada: la diferencia
   entre los dos es tan chica que el ojo no la lee como dos planos sino
   como cosas flotando. La piel no admite bordes ni sombras para
   separarlas —esa es la regla y está bien—, así que la separación tiene
   que venir del papel.

   El degradé es de arriba hacia abajo y arranca del blanco: la parte de
   arriba, donde está el título, se mantiene limpia, y el papel se va
   entibiando a medida que se baja. Así las tarjetas se apoyan cada vez
   más y ninguna transición se nota. El radial de arriba es medio tono de
   luz detrás del título — lo que hace que la página tenga un arriba y un
   abajo en vez de ser una superficie sola.

   `background-attachment: fixed` NO se usa: en iOS se pelea con el
   scroll y produce saltos. Acá el degradé va sobre el bloque y se
   estira con él, que es lo mismo a la vista y no rompe en el teléfono.
   Todo colgado de `.pagina-red` para no tocar ninguna otra pantalla. */

.pagina-red .dpp-body {
  position: relative;
  isolation: isolate;              /* las curvas quedan detrás de todo */
  overflow: hidden;
  /* DE BLANCO A GRIS, NO A CREMA.
     El primer degradé iba hacia el crema de la marca y quedaba amarillo:
     sobre una pantalla llena de logos —que traen sus propios colores y
     casi todos sobre blanco— un papel cálido los ensucia a todos por
     igual. El gris es neutro y no le discute el color a nada.
     Es un gris TIBIO igual (tiene una gota de tierra, no es #EEE): un
     gris frío al lado del negro cálido del encabezado se ve azul, y ahí
     la página se parte en dos temperaturas.
     Tres paradas y no dos: con dos, el cambio se concentra en el medio y
     se ve la banda. Con la parada del 40% el recorrido es parejo y no
     hay ningún punto donde se note que el color cambió. */
  /* ⚠ VA CON !important Y NO ES CAPRICHO. Arriba, en esta misma hoja,
     hay un `.dpp-body { background: var(--ar-papel) !important }` que le
     gana a cualquier selector por específico que sea: contra
     !important sólo puede otro !important. Sin esto el degradé no se
     dibujaba —el fondo computado daba `none`— y la pantalla seguía
     blanca aunque el archivo estuviera subido. */
  background:
    radial-gradient(140% 52% at 50% -6%, #FFFFFF 0%, rgba(255,255,255,0) 55%),
    linear-gradient(to bottom, #FBFAF8 0%, #F4F3F0 40%, #E7E5E0 100%) !important;
}

/* LAS CURVAS, CORREGIDAS.
   Salían oscuras arriba y desaparecían abajo — al revés de lo buscado —
   y la causa no era la opacidad sino el CONTRASTE CONTRA EL DEGRADÉ.
   El papel arranca en blanco puro y termina en crema; una línea de un
   solo color no puede verse igual en los dos extremos: contra el blanco
   destaca, contra el crema se funde. Por eso, con la máscara de antes,
   lo único que se veía era la parte de arriba, que es justo donde está
   el título.

   Se arregla en dos partes:
   · La máscara empieza a mostrar mucho más abajo —38% en vez de 22%—,
     así el título queda sobre papel limpio.
   · La opacidad baja a .30, que es lo que hace falta contra el blanco.
     Donde el papel se entibia, el trazo se apaga solo; ahí ya no hay
     texto y no importa.

   Y `preserveAspectRatio` pasó de `slice` a `none`. Con `slice` el SVG
   escala para cubrir y RECORTA: en un bloque más ancho que alto entraba
   sólo la franja del medio de las seis curvas, amontonadas. Con `none`
   se estira a la caja y las seis se reparten de arriba abajo, que es la
   composición que se dibujó. El trazo no se deforma porque
   `non-scaling-stroke` lo mantiene en un pelo. */
.pagina-red .red-curvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
  /* EL TONO NO ES `--ar-linea`. Esa variable es para bordes de un pixel
     apoyados sobre papel: a lo largo de una curva de mil quinientos
     píxeles se diluye hasta desaparecer. Acá va un tono propio, más
     tierra, y la intensidad se maneja con la opacidad — que es la que
     sube o baja cuando esto se vea flojo o fuerte. */
  color: #b9b3a8;
  /* LA OPACIDAD SE MUDO AL GRUPO DE LAS LINEAS — 15/09/2026. Estaba en
     el SVG entero y servia mientras adentro solo hubiera trazos; desde
     que hay franjas rellenas, aplicarsela a todo lavaba los tonos y la
     franja calida del medio se perdia. Ahora la traen las lineas, que
     es lo que tenia que atenuarse. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 100%);
}

/* EL AIRE DE ARRIBA. Entre el borde del encabezado y el primer logo
   había casi cuatro pantallas de teléfono de nada, en una página que
   entra entera sin scrollear. El aire es una herramienta cuando separa
   dos cosas; acá no separaba nada, sólo empujaba la grilla fuera de la
   primera mirada. */
.pagina-red .dpp-body { padding-top: 14px !important; }
/* LA BAJADA, EN DOS RENGLONES. Venía en tres y a 16px competía con el
   título: una bajada que ocupa tres renglones deja de ser una bajada y
   pasa a ser un párrafo, y empuja la grilla fuera de la primera mirada.
   El ancho se fija en píxeles y no en `ch` porque lo que hay que
   controlar es la CANTIDAD DE RENGLONES, y eso depende del ancho real
   del texto: con `ch` el corte se mueve solo cuando cambia el cuerpo de
   letra, que es justo lo que se acaba de tocar. */
.pagina-red .listado-resumen {
  font-size: 14px !important;
  line-height: 1.55 !important;
  max-width: 680px;
  margin-bottom: 20px;
}
/* TÍTULO Y BAJADA EN EL MISMO RENGLÓN, Y AL ANCHO DE LA GRILLA.
   12/09/2026. Primera version: titulo a la izquierda y bajada a la
   derecha con space-between, a todo el ancho del wrap. Quedo feo: en
   1920 el titulo estaba a 95px del borde, la bajada a 1800, y las casas
   en un bloque centrado de 1200 que no tocaba ni a uno ni a otro. Tres
   cosas con tres bordes distintos.
   Ahora migas y cabecera miden lo mismo que la grilla (--red-ancho,
   heredado del wrap) y se centran con ella: el titulo cae sobre la
   primera columna y la bajada sigue al titulo, en el mismo renglon,
   apoyada en la misma base (`baseline`), como un pie de titulo y no
   como un texto suelto en la otra punta. A 14px la frase entera entra
   en un renglon al lado del titulo; si no entra, corta en dos y sigue
   pegada al titulo, no al borde.
   En ≤900px vuelve a apilarse centrada, como el resto de los listados. */
.pagina-red .listado-migas,
.pagina-red .red-cabecera {
  max-width: min(var(--red-ancho, 940px), 100%);
  margin-inline: auto;
}
.pagina-red .red-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px 28px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pagina-red .red-cabecera .listado-titulo-xl { margin-bottom: 0 !important; flex: 0 0 auto; }
.pagina-red .red-cabecera .listado-resumen {
  margin-bottom: 0 !important;
  max-width: none;
  flex: 1 1 520px;
  min-width: 0;
  /* Si corta en dos, que corte parejo: sin un «sus manos.» solo abajo. */
  text-wrap: balance;
}
@media (max-width: 900px) {
  .pagina-red .red-cabecera { flex-direction: column; align-items: center; gap: 8px; }
  .pagina-red .red-cabecera .listado-resumen { text-align: center; max-width: 680px; flex-basis: auto; }
}
/* Empiezan dibujadas: si el script no corre, están igual. El script las
   borra y las vuelve a dibujar, que es otra cosa. */
.pagina-red .red-curvas path { stroke-dasharray: none; }

/* La tarjeta ahora sí tiene contra qué apoyarse, así que va un punto más
   clara que el papel en vez de un punto más oscura. */
/* ACÁ HABÍA UNA TARJETA BLANCA CON HOVER QUE SUBÍA. Nunca se vio, y
   está bien que no se haya visto: la piel archivo declara
   `.red-card { background: transparent !important; border: 0 !important;
   box-shadow: none !important; transform: none !important }` a
   propósito — es la regla de «sin cajas» aplicada a esta grilla. Las
   casas se separan por el aire y por el filete de abajo, no por un
   rectángulo.
   Se saca en vez de forzarlo con más !important: ganarle a la piel a
   los codazos deja una pantalla que no se parece a ninguna otra del
   sitio, y el problema que se quería resolver —que flotaran— lo
   arregla el papel, que ahora sí tiene degradé. */
.pagina-red .red-logo { transition: transform .3s cubic-bezier(.22,.61,.36,1); }

/* Sin JavaScript el movimiento no existe, y está bien: la página se lee
   igual. Lo que no puede pasar es que se lea PEOR — por eso nada arranca
   en opacidad cero desde el CSS. */
@media (prefers-reduced-motion: reduce) {
  .pagina-red .red-card,
  .pagina-red .red-logo { transition: none; }
}

/* LA CHAPA DE «VERIFICADOR», SIN LA CAJA.
   ══════════════════════════════════════════════════════════════════════
   Venía como una píldora transparente con un filete de un pixel
   (`box-shadow: inset 0 0 0 1px`). Sobre el papel plano de antes casi no
   se notaba; sobre el degradé quedó a la vista lo que siempre fue: un
   rectángulo vacío flotando debajo del nombre. Es exactamente la caja
   que la piel archivo se propuso sacar de todos lados — las tarjetas de
   esta misma grilla son transparentes y sin borde por esa regla, así que
   la única caja que quedaba en pantalla era ésta.

   Y hay un problema de composición encima: sólo dos de las ocho casas
   tienen chapa. Ocho tarjetas iguales y dos con un recuadro extra no se
   leen como «estas dos además verifican», se leen como una grilla
   despareja.

   Queda la palabra sola, en el gris de los metadatos y con el mismo
   espaciado de letra que el resto de las etiquetas del sitio. Dice lo
   mismo, no dibuja nada, y cuando falta no deja un hueco.
   Sólo en esta pantalla: `tienda.php` usa la misma clase y ahí la chapa
   está sola en la ficha de una casa, que es otro problema. */
.pagina-red .red-nivel,
.pagina-red .red-nivel.verificador,
.pagina-red .red-nivel.fundador {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--ar-texto-2) !important;
  font-size: 9.5px !important;
  letter-spacing: .18em !important;
  line-height: 1.4 !important;
}
/* La fundadora sigue pesando más, pero por tinta y no por recuadro. */
.pagina-red .red-nivel.fundador { color: var(--ar-texto-2) !important; }

/* PEGADA AL NOMBRE, Y MÁS CLARA QUE EL NOMBRE.
   Dos correcciones que van juntas porque atacan lo mismo: la chapa se
   estaba leyendo como un segundo dato de la casa y no como una nota al
   pie del primero.

   · El aire. Había 9px entre el nombre y la chapa, que era la
     separación pensada para cuando la chapa era una píldora y necesitaba
     despegarse. Sin caja, esos 9px la convierten en un renglón
     independiente. A 3px vuelve a ser lo que es: una aclaración del
     nombre que está arriba.
   · El gris. `--ar-texto-2` es el gris de los metadatos y funciona sobre
     papel blanco; sobre el degradé, y con el nombre en un gris medio de
     10,5px, los dos quedaban casi al mismo peso. Este es un punto más
     claro, lo suficiente para que el ojo lea primero el nombre y después,
     si le interesa, la chapa.

   No se achica más la letra: 9,5px ya es el piso legible. Lo que se
   ajusta es el contraste, que es lo que ordena una jerarquía sin hacer
   nada ilegible. */
.pagina-red .red-meta { margin-top: 3px !important; }
.pagina-red .red-nivel,
.pagina-red .red-nivel.verificador,
.pagina-red .red-nivel.fundador { color: #918b81 !important; }

/* ═══ LA ENTRADA ═════════════════════════════════════════════════════
   La portada entra fuera de foco. Un velo negro breve que se abre y,
   detrás, el sitio que termina de enfocarse.

   SIN LOGO. Tuvo la marca en el medio, como la apertura de muestra.php,
   y se sacó: un logo en una apertura le pide a quien llega que espere a
   que termine de decir el nombre, y el sitio ya lo dice solo apenas
   aparece.

   EL NEGRO SE QUEDA, Y ES BREVE. Sin él, el desenfoque arranca sobre el
   sitio ya visible y eso no se lee como una entrada: se lee como una
   pantalla que está fallando. El negro le da al foco de dónde salir.
   Ahora dura la mitad —se abre al 22%— porque ya no tiene que sostener
   un logo: sólo abrir.

   SON DOS CAPAS porque un elemento con opacidad 0 no se dibuja, y lo
   que no se dibuja no desenfoca: si el negro y el desenfoque vivieran
   juntos, el efecto se apagaría justo cuando tiene que empezar.

   Y LO APAGA EL CSS, no un script. Un velo que alguien tiene que apagar
   es una portada tapada el día que ese alguien no corre. */

.pulpa-foco, .pulpa-velo { position: fixed; inset: 0; pointer-events: none; }

.pulpa-foco {
  z-index: 9998;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  animation: pulpa-foco 1.05s cubic-bezier(.33,0,.2,1) forwards;
}
.pulpa-velo {
  z-index: 9999; background: #000;
  animation: pulpa-velo 1.05s cubic-bezier(.37,0,.63,1) forwards;
}

@keyframes pulpa-velo {
  0%   { opacity: 1;   visibility: visible; }
  22%  { opacity: .55; visibility: visible; }
  46%  { opacity: 0;   visibility: visible; }
  99%  { opacity: 0;   visibility: visible; }
  100% { opacity: 0;   visibility: hidden; }
}
/* La opacidad NUNCA se toca acá: sólo el desenfoque, que es lo último
   en resolverse. Que termine después del negro es lo que hace que el
   final se lea como algo que enfocó y no como algo que se apagó. */
@keyframes pulpa-foco {
  0%   { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); visibility: visible; }
  92%  { -webkit-backdrop-filter: blur(0);    backdrop-filter: blur(0);    visibility: visible; }
  99%  { -webkit-backdrop-filter: blur(0);    backdrop-filter: blur(0);    visibility: visible; }
  100% { -webkit-backdrop-filter: blur(0);    backdrop-filter: blur(0);    visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .pulpa-foco, .pulpa-velo { display: none !important; }
}

/* ═══ EL TEXTO QUE SIGUE ═════════════════════════════════════════════
   La descripción se corta a seis renglones y hay un «Ver más» debajo,
   pero el corte era seco: el sexto renglón terminaba en su borde y nada
   decía que abajo había más. El botón lo decía con palabras; el texto
   no lo decía con la forma, que es como se lee de verdad una página.

   Se resuelve con `mask-image`: el navegador usa el degradé como mapa
   de opacidad y el texto se desvanece de verdad. La alternativa de
   siempre —un rectángulo blanco con degradé encima— obliga a saber de
   qué color es el fondo, y acá el fondo cambia de página en página.
   Con máscara no hay que saber nada: se desvanece contra lo que haya.

   El desvanecido empieza al 72% y no antes: si arranca muy arriba se
   comen dos renglones legibles y el que lee siente que le esconden algo
   en vez de que le anticipan. Y no se aplica cuando el texto entra
   entero — ver la nota del `tiene-mas` en pieza.php.

   Al abrirse la máscara se saca, no se estira: mantenerla sobre el
   texto completo dejaría el último párrafo desvanecido para siempre. */
.piel-archivo .dpp-desc-top-txt.tiene-mas:not(.abierto):not(.abierta) {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.piel-archivo .dpp-desc-top-txt.abierto,
.piel-archivo .dpp-desc-top-txt.abierta {
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
/* El «Ver más» deja de ser un botón suelto debajo de un texto cortado y
   pasa a ser el pie de ese desvanecido: pegado, chico y en el gris de
   los metadatos, con el acento sólo al pasar por encima. */
.piel-archivo .dpp-desc-top-mas {
  margin-top: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ar-texto-2) !important;
  font-size: 11.5px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: color .18s ease;
}
.piel-archivo .dpp-desc-top-mas:hover { color: var(--ar-naranja) !important; }

/* La transición que hace posible lo de arriba. Sólo `max-height`: el
   degradé y el recorte se prenden y apagan en los extremos del
   movimiento, no durante, porque ninguno de los dos se puede
   interpolar y forzarlos produce un parpadeo. */
.piel-archivo .dpp-desc-top-txt {
  transition: max-height .42s cubic-bezier(.22,.61,.36,1);
  will-change: max-height;
}
@media (prefers-reduced-motion: reduce) {
  .piel-archivo .dpp-desc-top-txt { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   EL DESPLEGABLE DE LA TIRA — 24/08/2026
   ══════════════════════════════════════════════════════════════════════
   «Pedales» se parte en tipos de efecto. La palabra sigue siendo un link
   y el triangulito es un boton aparte, para que en un telefono —donde no
   hay hover— el dedo pueda ir a cualquiera de los dos.

   CAE HACIA ABAJO, COMO UN MENU. Se probo primero como una franja al
   ancho de la pantalla y estaba mal: una fila de veinte palabras
   centradas no se lee como un menu, se lee como una segunda tira, y el
   ojo no sabe cual de las dos manda. Un menu es una columna que cuelga
   de la palabra que lo abrio.

   EL PANEL ES HERMANO DE LA TIRA, NO HIJO. `.ar-nav-inner` tiene
   `overflow-x: auto` para que en pantallas chicas la tira se desplace, y
   ese overflow recorta cualquier cosa dibujada adentro. Por eso el panel
   cuelga de `.ar-nav` —que ya es `position: relative`— y el JavaScript le
   pone el `left` que corresponde al boton que lo abrio.
   ══════════════════════════════════════════════════════════════════════ */
.ar-nav-con-sub {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
}
.ar-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--ar-texto); cursor: pointer;
  opacity: .45; transition: opacity .18s ease, transform .18s ease;
}
.ar-caret svg { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ar-nav-con-sub:hover .ar-caret { opacity: 1; }
.ar-caret[aria-expanded="true"] { opacity: 1; transform: rotate(180deg); }
.ar-caret:focus-visible { outline: 2px solid var(--ar-naranja); outline-offset: 2px; opacity: 1; }

.ar-sub {
  position: absolute; top: 100%; left: 0; z-index: 20;
  min-width: 230px; max-width: min(300px, 92vw);
  padding: 8px 0;
  background: var(--ar-papel);
  border: 1px solid var(--ar-linea);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(25,23,20,.16);
  /* Un pelo separado del filo de la tira: pegado se lee como parte de
     ella y no como algo que se abrio. */
  margin-top: 6px;
  max-height: min(70vh, 560px); overflow-y: auto;
}
.ar-sub-inner { display: flex; flex-direction: column; }
.ar-sub-inner a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 7px 16px;
  font-family: 'Archivo', sans-serif; font-size: 14.5px; letter-spacing: .01em;
  color: var(--ar-texto) !important; text-decoration: none; white-space: nowrap;
  transition: background-color .14s ease;
}
.ar-sub-inner a:hover,
.ar-sub-inner a:focus-visible { background: rgba(25,23,20,.055); outline: none; }
/* EL NUMERO NO COMPITE CON LA PALABRA. Es un dato de apoyo: dice cuanto
   hay antes de entrar. Si pesa lo mismo que el nombre, la lista se lee
   como una tabla y no como un menu. */
.ar-sub-n {
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--ar-texto); opacity: .40;
}
@media (prefers-reduced-motion: reduce) {
  .ar-caret, .ar-sub-inner a { transition: none; }
}
/* «Todos» no es un tipo mas: es la vuelta al listado entero. La linea lo
   dice sin tener que escribir un rotulo. */
.ar-sub-todos {
  border-bottom: 1px solid var(--ar-linea);
  margin-bottom: 4px; padding-bottom: 9px !important;
  font-weight: 500;
}

/* ── RUBROS DENTRO DEL PANEL — 25/08/2026 ─────────────────────────────
   Solo aparecen donde el panel mezcla dos preguntas distintas: en
   eléctricas conviven «qué clase de guitarra» y «de qué época», y sin el
   rótulo se leen como una lista sola de cosas que no son comparables. En
   pedales no hay ninguno y no tiene que haberlo.
   Pesan menos que los ítems a propósito: ordenan, no compiten. */
.ar-sub-rubro {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ar-texto); opacity: .42;
  padding: 12px 12px 5px; font-weight: 600;
}
.ar-sub-rubro:first-of-type { padding-top: 6px; }

/* ── LAS ERAS, ADENTRO DE VINTAGE — 25/08/2026 ────────────────────────
   No van en la tira: «Fender pre-CBS» no está en el mismo nivel que
   «Vintage», es una marca DENTRO de esa época. Aparecen acá para el que
   ya entró y sabe lo que busca. Chips, no lista: son dos o tres y tienen
   que leerse de un vistazo sin empujar la grilla para abajo. */
.listado-eras {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 10px 0 0;
}
.listado-eras-rotulo {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  opacity: .42; margin-right: 2px;
}
.listado-eras a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border: 1px solid var(--ar-linea); border-radius: 999px;
  font-size: 13px; text-decoration: none; color: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.listado-eras a:hover,
.listado-eras a:focus-visible { background: rgba(25,23,20,.055); outline: none; }
.listado-eras-n { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .40; }
@media (prefers-reduced-motion: reduce) { .listado-eras a { transition: none; } }

/* ── «Cond: nuevo» EN LA TARJETA — 26/08/2026 ─────────────────────────
   Va al lado del precio y no sobre la foto: la condición es lo que cambia
   la lectura del precio, y el ángulo de la imagen ya lo ocupa «ingreso
   reciente». Pesa menos que el precio a propósito — acompaña, no compite.

   ⚠ SE ANCLA A .dpp-sim-body Y CON `right`, NUNCA CON `left: 100%`.
   Se probó colgarla del precio con `left:100%` para pegarla a su derecha
   y ROMPIÓ LA GRILLA: la tarjeta no recorta, así que la pastilla se salía
   de su propia tarjeta y aparecía encima de la de al lado —la de un pedal
   nuevo quedaba al lado del título de uno usado, que es exactamente la
   mentira que este rótulo vino a evitar— y la de la última columna se
   cortaba contra el borde de la pantalla.

   El `bottom` está calculado para caer en la LÍNEA BASE del precio y no
   en el fondo de la caja: el renglón del precio deja abajo el espacio de
   los descendentes, y sin ese ajuste la pastilla se ve unos píxeles más
   abajo que el texto. */
.dpp-sim-body { position: relative; }
.dpp-sim-nuevo {
  position: absolute; right: 2px; bottom: 4px;
  font-size: 9px; letter-spacing: .01em; font-weight: 500; line-height: 1.35;
  padding: 1px 5px;
  border: 1px solid currentColor; opacity: .5; white-space: nowrap;
  pointer-events: none;
}
.dpp-sim-nuevo b { font-weight: 700; }

/* EN EL TELEFONO LA PASTILLA SE CAÍA ENCIMA DEL PRECIO. 28/08/2026.
   ══════════════════════════════════════════════════════════════════════
   La pastilla vive en `position:absolute`, anclada abajo a la derecha de
   `.dpp-sim-body`. En escritorio eso es correcto: el precio va a la
   izquierda y la esquina de abajo a la derecha está libre.

   En una tarjeta de teléfono no: el título pasa a dos renglones y el
   precio se centra, o sea que ocupa justo el ancho donde la pastilla
   está apoyada. Como está fuera del flujo, nadie las separa: se pisan.
   Se veía «USD 1.3[Cond: nuevo]0» y el precio quedaba ilegible, que es
   el peor lugar posible para un choque.

   Acá se la devuelve al flujo. Deja de flotar, se pone al lado del
   precio y, si no entra, baja sola a su propio renglón centrado. Y sube
   de 9 a 11 px: 9 px en un teléfono no se lee, y esto es el dato que
   cambia cómo se lee el precio de al lado. */
@media (max-width: 700px) {
  .dpp-sim-precio-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 7px;
  }
  .dpp-sim-nuevo {
    position: static;
    order: 2;                 /* siempre después del precio, nunca antes */
    font-size: 11px;
    opacity: .6;
    padding: 1px 6px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   COND: NUEVO — SOBRE LA FOTO, ABAJO A LA DERECHA · 30/08/2026
   ══════════════════════════════════════════════════════════════════════
   Antes vivía en la caja de texto, flotando contra la línea base DEL
   PRECIO. Pero el precio sólo se dibuja para quien tiene sesión: sin ella
   la caja se achica y la pastilla se subía encima del título. Se encontró
   la noche de la apertura leyendo la grilla deslogueado — que es, desde
   hoy, como llega todo el mundo.

   Acá no depende de nada: la foto siempre está y siempre mide lo mismo
   (`aspect-ratio: 4/5`). Un solo lugar, el mismo con sesión y sin ella.

   La esquina de abajo a la derecha está libre: arriba a la izquierda vive
   «INGRESO RECIENTE», y son dos rótulos que dicen cosas distintas —uno
   habla de la PUBLICACIÓN y dura catorce días, el otro es una propiedad
   de la PIEZA y no vence—, así que separarlos en esquinas opuestas ayuda
   a no leerlos como lo mismo.

   Fondo propio y no sólo borde: sobre una foto, un borde con opacidad se
   pierde contra cualquier zona clara. Va más transparente que
   «INGRESO RECIENTE» a propósito — acompaña, no compite.

   ⚠ NO SE LLAMA `card-chip-…` A PROPÓSITO. Existe un selector amplio,
   `[class*="card-chip-"]`, que le clava `top: 11px !important` y
   `left: 8px !important` a todo lo que empiece así, para alinear las
   chapas de arriba a la izquierda. Cualquier chapa nueva que se llame
   `card-chip-loquesea` aterriza ahí aunque le pidas `right` y `bottom`:
   top/left ganan por !important y no hay forma de discutirlo sin escribir
   `top: auto !important`. Con otro nombre el problema no existe — esta
   clase define lo suyo y no hereda nada. */
.dpp-sim-foto { position: relative; }
.card-cond-nuevo {
  position: absolute !important;
  right: 8px; bottom: 8px;
  z-index: 2;
  background: rgba(20,14,8,.72) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 3px !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  font-size: 9.5px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 5px 8px !important;
  line-height: 1 !important;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(2px);
}
@media (max-width: 700px) {
  .card-cond-nuevo { right: 6px; bottom: 6px; font-size: 9px !important; padding: 4px 7px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   ARTISTAS ↔ MODELOS  (02/09/2026, rehecho)
   El bloque «Quién usó este modelo» de la ficha, la página del artista y
   la del modelo. Sin fotos de artista: la jerarquía la hace la
   tipografía, no la imagen.

   QUE ESTABA MAL EN LA PRIMERA VERSION. Con una sola card, la grilla la
   dejaba de 240px flotando sola en una fila de 1.400 y parecia un error.
   Y el aviso legal —tres renglones grises arriba de todo— pesaba mas que
   el dato, que es exactamente al reves de lo que tiene que pasar: el
   aviso es una nota al pie, no el encabezado.
   ══════════════════════════════════════════════════════════════════════ */

/* EL BLOQUE ES UN APENDICE, NO UN CAPITULO. Estaba dibujado con el mismo
   peso que «La pieza» o «Quién la tiene», que son el contenido del sitio.
   Este contesta una pregunta lateral —quienes mas usaron esto— y tiene
   que leerse como una nota: titulo mas chico, todo mas junto. */
.ar-quien{ margin-top:6px }
.ar-quien .dpp-section-title h2{
  font-size:14px !important;letter-spacing:.11em !important;
  color:#8d867a !important;margin:0 0 9px !important;
}
.ar-quien .dpp-section-title{ margin-bottom:0 }

/* El aviso: una linea chica pegada al titulo, no un parrafo. */
/* El aviso de la reedicion tambien es texto, no una etiqueta. Hoy no se
   usa —la reedicion se dice en la frase— pero la regla queda por si
   vuelve a hacer falta un renglon de contexto. */
.ar-quien-aviso{
  margin:-2px 0 12px;
  font: 400 12.5px/1.6 Georgia, serif;
  color:#9a938a;
}

.ar-quien-mas{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#b3aa9e;
  margin-left:7px;white-space:nowrap;
}

/* ── El párrafo ─────────────────────────────────────────────────────
   CUATRO INTENTOS: cards, pastillas, links sueltos, y esto. Las cards
   ocupaban media pantalla para decir diez nombres. Las pastillas eran
   veinticuatro objetos con borde, y una lista de personas no es una
   botonera. Los links sueltos separados por puntos medios seguian
   leyendose como un indice.
   Esto es una frase, escrita en la MISMA SERIF con la que esta escrita
   la descripcion de la pieza mas arriba en la misma pagina. El bloque
   dejo de ser un widget y paso a ser un parrafo del archivo.
   ───────────────────────────────────────────────────────────────────── */
/* LA MISMA DECLARACION QUE LA DESCRIPCION DE LA PIEZA, letra por letra.
   Estaba en Georgia igual que ella pero heredaba `font-weight:300` del
   body, asi que el navegador dibujaba una Georgia light sintetica: dos
   parrafos de la misma pagina, la misma tipografia, y se veian
   distintos. El color tambien era otro. Se copia la regla de
   `.dpp-desc-top-txt` —`font: 16px/1.62 Georgia, serif` y `--ink`— y se
   fija el peso en 400, que es lo que faltaba. */
.ar-quien-texto{
  margin:0;
  /* Misma serif y mismo color que la descripcion de la pieza, un punto
     mas chica: aquel es el texto que se lee, este es el que se recorre.
     El interlineado sube un poco para compensar el cuerpo menor. */
  font: 400 14.5px/1.72 Georgia, serif;
  color: var(--ink, #1A1208);
  /* SIN TOPE DE ANCHO. Estaba en 76ch —el limite de lectura comoda para
     un texto largo— y en una pantalla grande dejaba el parrafo mas
     angosto que la grilla de «Piezas similares» que va justo abajo: dos
     bloques de la misma columna con dos anchos distintos. Este parrafo
     no se lee de corrido como un articulo, se recorre buscando nombres,
     asi que el renglon largo no molesta y la columna queda pareja. */
}

.ar-nom{
  white-space:nowrap;                  /* el nombre no se parte al final */
  text-decoration:none;
  transition:color .13s;
}
/* SIN SUBRAYADO EN REPOSO Y SIN COLOR. Veinticuatro nombres en naranja
   eran una pared de color, y en un parrafo el color grita mas todavia.
   Tinta, como el resto del texto. Al pasar por encima aparece el
   subrayado pegado a la letra —`text-underline-offset` chico— y solo
   sobre el nombre, nunca sobre la banda. */
.ar-quien-texto .ar-bd{
  font: 400 12.5px/1.72 Georgia, serif;   /* la misma serif, mas chica */
  color:#8d867a;text-decoration:none;white-space:nowrap;
}

/* Los que llevan a algun lado: peso, no color. 700 contra 400 es una
   negrita de texto normal; contra 300 era un salto de dos escalones y
   parecia otra tipografia. */
.ar-nom.hay{font-weight:700}

.ar-quien-leyenda{
  margin:12px 0 0;font-size:10px;line-height:1.7;color:#b3aa9e;
}

/* EL «VER MAS» ES EL ULTIMO RENGLON DEL PARRAFO, NO UN BOTON.
   Estaba en la sans a 11,5px y peso 300 —tres cosas distintas del texto
   que tiene arriba— y se leia como un elemento suelto. En la misma
   serif, al mismo cuerpo, es la frase que sigue. */
.ar-quien-vermas{
  display:inline-block;margin-top:13px;
  font: 400 14.5px/1.72 Georgia, serif;
  color:#C9531A;text-decoration:none;
  border-bottom:1px solid rgba(233,107,33,.35);
}
.ar-quien-vermas:hover{color:#E96B21;border-bottom-color:#E96B21}

/* Las cards siguen vivas en la pagina del musico y en la del modelo. */
.ar-quien-fila{
  align-self:start;padding:14px 15px 13px;
  background:rgba(140,130,115,.055);
  border:1px solid rgba(140,130,115,.16);border-radius:4px;
  transition:background .15s, border-color .15s;
}
.ar-quien-fila:hover{
  background:rgba(140,130,115,.09);border-color:rgba(140,130,115,.3);
}
.ar-quien-lista{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px;
}
.ar-quien-1 .ar-quien-lista{ max-width:340px }
.ar-quien-2 .ar-quien-lista{ max-width:700px }
.ar-quien-3 .ar-quien-lista{ max-width:1050px }
.ar-quien-sigue{
  border:0;border-top:1px solid rgba(140,130,115,.2);
  background:none;border-radius:0;margin:10px 0 0;padding:10px 0 0;
}
.ar-quien-quien{
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  margin:0 0 7px;padding-bottom:7px;
  border-bottom:1px solid rgba(140,130,115,.14);
}
.ar-quien-nom{
  font-size:14px;font-weight:600;letter-spacing:.005em;line-height:1.25;
  color:inherit;text-decoration:none;
}
.ar-quien-banda{font-size:11px;color:#9a938a;line-height:1.25}
.ar-quien-que{font-size:13.5px;line-height:1.45}
.ar-quien-obra{font-size:12px;color:#9a938a;margin-top:4px;line-height:1.45}
.ar-quien-obra em{font-style:italic;color:inherit}
.ar-art-detalle{font-size:12px;line-height:1.5;color:#9a938a;margin-top:4px}
.ar-art-cita{
  margin:8px 0 0;padding:0 0 0 10px;border-left:2px solid rgba(233,107,33,.4);
  font-size:12px;line-height:1.5;font-style:italic;color:#9a938a;
}
.ar-quien-pie{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:10px;padding-top:9px;
  border-top:1px solid rgba(140,130,115,.14);
}
.ar-niv{
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:2px 6px;border-radius:2px;white-space:nowrap;
}
.ar-niv-artista{color:#4d7a3a;background:rgba(127,176,105,.16)}
.ar-niv-medio{color:#8a837a;background:rgba(140,130,115,.14)}
.ar-niv-disputado{color:#9a6b12;background:rgba(217,164,65,.18)}
.ar-quien-fuente{
  font-size:11.5px;color:#9a938a;text-decoration:none;
  border-bottom:1px solid rgba(140,130,115,.35);
}
.ar-quien-fuente:hover{color:#E96B21;border-bottom-color:#E96B21}

@media (max-width:640px){
  .ar-quien-texto{font-size:14px}
  .ar-quien-texto .ar-bd{font-size:12px}
  .ar-quien-lista{grid-template-columns:1fr}
  .ar-quien-1 .ar-quien-lista,
  .ar-quien-2 .ar-quien-lista,
  .ar-quien-3 .ar-quien-lista{max-width:none}
}

/* ── Páginas de artista y de modelo ─────────────────────────────────── */
.ar-art-main{padding:34px 0 70px}
.ar-art-wrap{max-width:940px;margin:0 auto;padding:0 20px}

.ar-art-volver{margin-bottom:20px}
.ar-art-volver a{font-size:12.5px;color:#8d867a;text-decoration:none}
.ar-art-volver a:hover{color:#E96B21}

.ar-art-cab{margin-bottom:34px}
.ar-art-cab h1{font-size:30px;line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
.ar-art-cab-uno h1{font-size:36px}
.ar-art-banda-gr{margin:0 0 8px;font-size:15px;color:#8d867a}
.ar-art-bajada{margin:8px 0 0;font-size:14px;line-height:1.65;color:#8d867a;max-width:66ch}

.ar-art-buscar{display:flex;gap:8px;margin-top:20px;max-width:440px}
.ar-art-buscar input{
  flex:1;padding:9px 12px;font:inherit;font-size:14px;
  border:1px solid rgba(140,130,115,.4);background:transparent;color:inherit;border-radius:2px;
}
.ar-art-buscar input:focus{outline:0;border-color:#E96B21}
.ar-art-buscar button{
  padding:9px 18px;font:inherit;font-size:13px;letter-spacing:.03em;cursor:pointer;
  border:1px solid #E96B21;background:#E96B21;color:#111;border-radius:2px;
}

/* LA BARRA DE LETRAS DEL ÍNDICE DE ARTISTAS — 18/09/2026.
   Se envuelve sola: en el celular quedan tres o cuatro renglones de
   letras, que es exactamente como se usa un índice en papel. Las letras
   sin nadie van apagadas y sin borde: se ven, no se pueden apretar. */
.ar-art-letras{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;align-items:center;
}
.ar-art-letras a,
.ar-art-letras span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 8px;
  font-size:13px;letter-spacing:.02em;text-decoration:none;border-radius:2px;
  border:1px solid rgba(140,130,115,.32);color:#8d867a;
}
.ar-art-letras a:hover{border-color:#E96B21;color:#E96B21}
.ar-art-letras a.act{border-color:#E96B21;background:#E96B21;color:#111}
.ar-art-letras span{opacity:.32;border-style:dashed}

.ar-art-cuenta{font-size:12.5px;color:#8d867a;margin:0 0 14px}
.ar-art-vacio{font-size:14px;color:#8d867a;padding:26px 0}

.ar-art-indice{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 26px;
}
.ar-art-indice a{
  display:flex;align-items:baseline;gap:8px;padding:8px 0;
  border-bottom:1px solid rgba(140,130,115,.16);text-decoration:none;color:inherit;
}
.ar-art-indice a:hover .ar-art-nom{color:#E96B21}
.ar-art-nom{font-size:14.5px}
.ar-art-banda{font-size:12px;color:#8d867a;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-art-n{font-size:11.5px;color:#8d867a;font-variant-numeric:tabular-nums}

.ar-art-grupo{margin-bottom:40px}
.ar-art-grupo-tit{
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#E96B21;
  margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid rgba(233,107,33,.28);
}
.ar-art-grupo-tit a{color:inherit;text-decoration:none}
.ar-art-grupo-tit a:hover{border-bottom:1px solid currentColor}

.ar-art-piezas{margin-top:22px}
.ar-art-piezas-arriba{margin:0 0 42px}
.ar-art-piezas h3{
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#8d867a;
  font-weight:400;margin:0 0 12px;
}

@media (max-width:640px){
  .ar-art-cab h1,.ar-art-cab-uno h1{font-size:25px}
  .ar-art-indice{grid-template-columns:1fr}
  .ar-art-buscar{max-width:none}
}


/* EL NOMBRE ES TEXTO, NO UN ACENTO. La piel de archivo pinta todos los
   <a> con el rojo de marca, y eso hacia que la lista se leyera como diez
   links en fila en vez de como diez personas. El acento se reserva para
   lo que si es una accion: la fuente y el «ver los N». */
.ar-quien-nom{color:inherit !important}
.ar-quien-nom:hover{color:#E96B21 !important}
/* LAS PASTILLAS SON PERSONAS, NO ENLACES. El rojo del sitio pintaba
   dieciseis nombres como dieciseis links y el bloque se leia como un
   menu en vez de como una lista de musicos. */
.ar-nom,.ar-nom:link,.ar-nom:visited{color:inherit !important;text-decoration:none}
.ar-nom:hover{
  color:#E96B21 !important;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:rgba(233,107,33,.5);
}
.ar-nom:hover .ar-bd{color:#c08050}
.ar-art-indice .ar-art-nom{color:inherit}


/* ESQUINAS SUAVES, SOLO SI LA CASA LO ELIGIÓ. 03/09/2026.
   La regla de la piel archivo dice «sin cajas: nada de bordes, sombras ni
   esquinas redondeadas», y sigue valiendo por defecto: esto no se aplica
   a nadie salvo que en Panel → Logos de la red se elija «entero con
   esquinas suaves». Existe por un caso concreto: un logo en JPG trae su
   propio fondo, y mostrado entero con la esquina viva sobre la franja
   oscura se lee como una calcomanía pegada. El redondeo lo desactiva.
   Es una clase nueva y no pisa ninguna regla anterior. */
.logo-suave img { border-radius: 10px !important; }


/* EL BANNER DE LA CASA. 03/09/2026.
   Alto fijo por tamaño de pantalla y `cover`, en vez de dejar que mande
   la proporción: un 4:1 puro son 97 px de alto en un teléfono, una
   rendija donde no se lee nada. Con alto fijo el banner se ve igual de
   presente en los dos lados, y lo que se paga es recorte — por eso la
   zona segura de 1400 x 340 que se le pide a la casa.
   `line-height: 0` en el contenedor: sin eso el <img> arrastra el
   espacio de una línea de texto y queda una franja debajo. */
.tienda-banner { margin: 0 0 26px; overflow: hidden; line-height: 0; }
.tienda-banner img {
  display: block; width: 100%; height: 300px;
  object-fit: cover; object-position: center;
}
@media (max-width: 900px) { .tienda-banner img { height: 210px; } }
@media (max-width: 560px) { .tienda-banner img { height: 150px; } }


/* LA CABECERA SOBRE EL BANNER. 03/09/2026.
   Sin esto el banner y la cabecera eran dos bloques apilados y la primera
   pieza quedaba abajo del pliegue. Ahora el nombre y el logo van sobre la
   foto, y el bloque hace las dos cosas en el mismo alto.

   EL DEGRADADO NO ES UNA CAJA. La regla de la piel archivo prohibe cajas,
   bordes y sombras; esto es una transicion de la propia foto hacia el
   negro, sin canto ni contorno, y existe por una razon funcional y no
   decorativa: texto blanco sobre una foto de taller —que es de tono medio
   en todos lados— no se lee. Se apoya a la izquierda y suelta antes de la
   mitad, asi la foto sigue siendo lo que se ve.

   EN EL CELULAR NO HAY SUPERPOSICION. Abajo de 761px el texto ocuparia
   casi toda la foto, asi que se vuelve al apilado: la foto arriba, la
   cabecera abajo, con los colores de siempre. No hace falta otro HTML —
   alcanza con no posicionar nada, porque en el orden del documento la
   cabecera ya viene despues de la imagen. */
.tienda-banner { margin: 0 0 26px; }
.tienda-banner > img {
  display: block; width: 100%; height: 180px;
  object-fit: cover; object-position: center;
}
.tienda-banner .tienda-cabecera { margin-top: 18px; }

@media (min-width: 761px) {
  .tienda-banner { position: relative; overflow: hidden; }
  .tienda-banner > img { height: 300px !important; }
  .tienda-banner::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    /* MAS SUAVE QUE LA PRIMERA VERSION. 03/09/2026.
       Arrancaba en .82 y tapaba el tercio izquierdo de la foto: el texto se
       leia comodo pero la foto dejaba de verse justo donde el ojo entra.
       Bajo a .58 y se suelta antes. Lo que compensa la diferencia es la
       sombra del texto de mas abajo: oscurecer tres letras cuesta mucho
       menos que oscurecer media foto. */
    background: linear-gradient(90deg,
      rgba(0,0,0,.58) 0%, rgba(0,0,0,.40) 30%, rgba(0,0,0,.10) 58%, rgba(0,0,0,0) 78%);
  }
  .tienda-banner .tienda-cabecera {
    position: absolute !important; left: 38px; right: 38px; bottom: 30px;
    z-index: 2; margin: 0 !important; align-items: flex-end !important;
  }
  .tienda-banner .tienda-datos,
  .tienda-banner .tienda-datos * { color: rgba(255,255,255,.88) !important; }
  .tienda-banner .tienda-datos h1 { color: #fff !important; }
  .tienda-banner .tienda-datos a  { color: #ffb4a2 !important; }
  /* El logo se acota a mano: la regla del banner es para la foto, no para el. */
  .tienda-banner .tienda-logo img { max-height: 86px !important; width: auto !important; height: auto !important; }
}
@media (max-width: 560px) { .tienda-banner > img { height: 150px; } }


/* EL BANNER, A SANGRE Y PEGADO AL MENU. 03/09/2026.
   Antes arrancaba 90px mas abajo: 34 de padding del cuerpo mas la miga de
   pan con su propio renglon. En una pagina cuyo trabajo es mostrar piezas,
   90px arriba de todo es caro. La miga no se borro — se mudo adentro del
   banner, arriba a la izquierda, sobre el degradado que ya estaba.
   La foto pasa a estar posicionada y el contenido apoya encima: asi el
   alto lo fija el bloque y no la imagen, y arriba y abajo quedan pegados
   a los bordes sin cuentas.
   En el celular no hay superposicion: se ordena miga, foto, cabecera. */
@media (min-width: 761px) {
  .tienda-banner {
    margin-top: -34px;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    height: 320px; padding: 20px 38px 28px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .tienda-banner > img {
    position: absolute; inset: 0; width: 100% !important; height: 100% !important;
    object-fit: cover; z-index: 0;
  }
  .tienda-banner > .listado-migas,
  .tienda-banner > .tienda-cabecera { position: relative; z-index: 2; }
  .tienda-banner > .listado-migas { margin: 0 !important; }
  .tienda-banner > .listado-migas,
  .tienda-banner > .listado-migas span { color: rgba(255,255,255,.72) !important; }
  .tienda-banner > .listado-migas a { color: rgba(255,255,255,.92) !important; }
  .tienda-banner > .tienda-cabecera { position: static !important; left: auto; right: auto; bottom: auto; }
  /* LA LINEA FINA NO VA SOBRE LA FOTO. `.tienda-cabecera` trae
     `border-bottom` porque en su lugar original separa la cabecera de las
     piezas. Encima de una foto no separa nada: es una raya. */
  .tienda-banner > .tienda-cabecera { border-bottom: 0 !important; padding-bottom: 0 !important; }
  /* La sombra hace el trabajo que antes hacia el degradado oscuro. */
  .tienda-banner > .tienda-cabecera,
  .tienda-banner > .listado-migas { text-shadow: 0 1px 14px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.45); }
}
@media (max-width: 760px) {
  .tienda-banner { display: flex; flex-direction: column; }
  .tienda-banner > .listado-migas { order: 1; }
  .tienda-banner > img            { order: 2; }
  .tienda-banner > .tienda-cabecera { order: 3; }
}


/* ── EL RIG AGRUPADO POR SECCION — 04/09/2026 ────────────────────────
   La pagina de un musico era una pila de grupos por marca ordenada por
   volumen: la Les Paul de Page al lado de su Echoplex y de un Neumann.
   Un rig se lee en el orden de la señal —que toca, con que lo amplifica,
   que le mete en el medio, con que lo graba— y ahora se lee asi.
   ───────────────────────────────────────────────────────────────────── */
.ar-art-secnav{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 34px;padding:0 0 18px;
  border-bottom:1px solid rgba(140,130,115,.2);
}
.ar-art-secnav a{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border:1px solid rgba(140,130,115,.24);border-radius:999px;
  color:inherit;text-decoration:none;white-space:nowrap;
  transition:border-color .14s,color .14s;
}
.ar-art-secnav a:hover{border-color:rgba(233,107,33,.5);color:#E96B21}
.ar-art-secnav a span{color:#b3aa9e;font-size:10px;margin-left:3px}

.ar-art-seccion{margin-bottom:52px;scroll-margin-top:90px}
.ar-art-seccion-tit{
  font-family:'Funnel Sans',sans-serif;font-weight:400;
  font-size:22px;letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 22px;padding-bottom:10px;
  border-bottom:2px solid rgba(25,25,25,.85);
}
.ar-art-seccion-tit span{
  font-size:12px;letter-spacing:.08em;color:#a49b90;margin-left:8px;
  vertical-align:middle;
}
/* El titulo de marca+familia baja un escalon: ahora es subtitulo de la
   seccion, no encabezado de la pagina. */
.ar-art-seccion .ar-art-grupo{margin-bottom:30px}
.ar-art-seccion .ar-art-grupo-tit{font-size:12px}
.ar-art-piezas h4{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#8d867a;
  margin:0 0 12px;font-weight:400;
}

@media (max-width:640px){
  .ar-art-seccion-tit{font-size:18px}
  .ar-art-secnav{gap:5px;margin-bottom:26px}
  .ar-art-secnav a{font-size:10px;padding:4px 9px}
}


/* ── LA PÁGINA DEL MÚSICO: UN CATÁLOGO — 04/09/2026 ──────────────────
   Cada afirmacion era una card gris en dos columnas. Como cada una tiene
   distinto largo —una con cita de Christie's de cinco renglones, la de
   al lado con dos palabras— quedaba un damero de alturas desparejas, y
   todo en la misma sans chica: el detalle, la cita y la fuente pesaban
   igual que el modelo.
   Ahora se lee como la entrada de un catalogo: el año colgado a la
   izquierda, el modelo en la serif de lectura del sitio, el detalle mas
   chico, la cita como cita, la fuente al pie en voz baja. Una columna,
   sin cajas.
   ───────────────────────────────────────────────────────────────────── */
.ar-ents{list-style:none;margin:0;padding:0}

.ar-ent{
  display:grid;grid-template-columns:64px 1fr;gap:0 16px;
  padding:14px 0;
  border-top:1px solid rgba(140,130,115,.16);
}
.ar-ent:first-child{border-top:0;padding-top:4px}

/* El año colgado, en cifras de ancho fijo para que la columna alinee. */
.ar-ent-anio{
  font: 400 12px/1.5 'Funnel Sans',sans-serif;
  letter-spacing:.06em;color:#b3aa9e;
  font-variant-numeric:tabular-nums;
  padding-top:3px;
}

/* Lo que es: la misma serif con la que esta escrita la pieza. */
.ar-ent-que{
  margin:0;
  font: 400 15px/1.55 Georgia, serif;
  color: var(--ink, #1A1208);
}
.ar-ent-det{
  margin:5px 0 0;
  font: 400 13px/1.62 Georgia, serif;
  color:#7d766c;
}
.ar-ent-obra{
  margin:5px 0 0;
  font: 400 13px/1.6 Georgia, serif;color:#8d867a;
}
.ar-ent-obra em{font-style:italic}

/* La cita es una cita: sangrada, en bastardilla, con un filo naranja. */
.ar-ent-cita{
  margin:9px 0 0;padding:1px 0 1px 12px;
  border-left:2px solid rgba(233,107,33,.32);
  font: italic 400 13px/1.62 Georgia, serif;
  color:#7d766c;
}

/* El pie es la prueba, y va en voz baja. */
.ar-ent-pie{
  margin:8px 0 0;
  font: 400 10.5px/1.6 'Funnel Sans',sans-serif;
  letter-spacing:.05em;color:#a49b90;
}
.ar-ent-sep{margin:0 5px;color:#cdc5b7}
.ar-ent-niv{text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.ar-ent-niv.n-artista{color:#5c8a46}
.ar-ent-niv.n-disputado{color:#a97c1d}
.ar-ent-curado{font-style:italic;letter-spacing:.03em}
.ar-ent-fuente{color:#a49b90 !important;text-decoration:none;border-bottom:1px solid rgba(140,130,115,.32)}
.ar-ent-fuente:hover{color:#E96B21 !important;border-bottom-color:#E96B21}

/* El titulo de marca + familia: un renglon, no un encabezado. */
.ar-art-seccion .ar-art-grupo-tit{
  font: 400 11.5px/1.5 'Funnel Sans',sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:#E96B21;
  margin:0 0 6px;padding-bottom:6px;
  border-bottom:1px solid rgba(233,107,33,.22);
}

@media (max-width:640px){
  .ar-ent{grid-template-columns:1fr;gap:0}
  .ar-ent-anio{padding:0 0 3px}
  .ar-ent-que{font-size:14.5px}
}

/* Sin paginas de musico, los nombres son texto y no tienen que parecer
   enlaces: ni cursor de mano ni subrayado al pasar. */
span.ar-nom{cursor:default}
span.ar-nom:hover{color:inherit !important;text-decoration:none}

/* ══════════════════════════════════════════════════════════════════════
   PÁGINA DE ARTISTA · JERARQUÍA Y EL BLOQUE DEL ARCHIVO — 05/09/2026
   Van al final a propósito: pisan por orden lo que quedó de las pasadas
   anteriores, sin tener que buscar y editar seis reglas repartidas.
   ══════════════════════════════════════════════════════════════════════ */

/* LA BAJADA SE REPETÍA EN 1.070 PÁGINAS ocupando el mejor lugar de la
   pantalla, con el mismo texto siempre. El dato (cuántas afirmaciones)
   se queda arriba; la aclaración pasa a letra chica, que es lo que es. */
.ar-art-bajada{
  font: 400 13px/1.6 'Funnel Sans',sans-serif;
  color:#8d867a; max-width:52ch; margin-top:10px;
}

/* DOS NIVELES QUE SE LEÍAN COMO UNO. «GUITARRAS» y «GIBSON LES PAUL»
   pesaban casi igual. La sección manda; el grupo de marca es su
   subtítulo y no compite. */
.ar-art-seccion-tit{ font-size:20px; letter-spacing:.05em; }
/* EL !important NO ES CAPRICHO. Hay una regla global
   `.dpp-body h3, main h3{font-size:15px !important}` que pisa a todos los
   h3 del sitio. Por eso el titulo de marca nunca se vio como se lo diseño:
   las pasadas anteriores escribieron 13px, 12px y 11.5px y las tres
   quedaron sin efecto. Se gana con !important aca en vez de tocar la regla
   global, que afecta a todas las pantallas y no se puede probar de noche. */
.ar-art-seccion .ar-art-grupo-tit{
  font-size:11px !important;
  font-family:'Funnel Sans',sans-serif; font-weight:400; line-height:1.5;
  letter-spacing:.14em; text-transform:uppercase; color:#9a9185 !important;
  margin:0 0 4px; padding-bottom:0; border-bottom:0;
}
.ar-art-seccion .ar-art-grupo-tit a{ color:inherit; }
.ar-art-seccion .ar-art-grupo{ margin-bottom:26px; }

/* La columna del año: sin año no va raya, va nada. */
.ar-ent-anio{ color:#b3aa9e; min-height:1px; }

/* ── EL ARCHIVO, AL FINAL ──
   Separado de verdad. Esto ya no cuelga del músico: es otra cosa, y la
   distancia es parte de decirlo. */
.ar-art-archivo{
  margin-top:70px; padding-top:34px;
  border-top:1px solid rgba(25,25,25,.14);
}
.ar-art-archivo-tit{
  font: 400 20px/1.2 'Funnel Sans',sans-serif;
  letter-spacing:.05em; text-transform:uppercase; margin:0 0 8px;
}
.ar-art-archivo-sub{
  font: 400 13px/1.6 'Funnel Sans',sans-serif;
  color:#8d867a; max-width:56ch; margin:0 0 30px;
}
.ar-art-archivo-fam{ margin-bottom:34px; }
.ar-art-archivo-fam h3{
  font-size:11px !important;
  font-family:'Funnel Sans',sans-serif; font-weight:400; line-height:1.5;
  letter-spacing:.14em; text-transform:uppercase; color:#9a9185;
  margin:0 0 12px; padding-bottom:8px;
  border-bottom:1px solid rgba(25,25,25,.10);
}
.ar-art-archivo-fam h3 span{ color:#b8b0a5; margin-left:6px; }

@media (max-width:640px){
  .ar-art-archivo{ margin-top:48px; padding-top:26px; }
  .ar-art-archivo-tit{ font-size:17px; }
}

/* ── modelo.php: mismo idioma que artista.php — 05/09/2026 ──
   Las dos paginas son el mismo eje y hablaban distinto: artista.php ya
   habia abandonado las cards grises («una columna, un renglon por
   afirmacion, sin cajas») y modelo.php se quedo con ellas. Se sacan las
   cajas y queda la reja, que aca SI hace falta: la unidad es el musico y
   son ochenta y nueve, no se leen en una sola columna. */
.ar-quien-fila{
  background:none !important; border:0 !important; border-radius:0 !important;
  padding:0 0 18px; margin-bottom:18px;
  border-bottom:1px solid rgba(140,130,115,.18) !important;
}
.ar-quien-fila:hover{ background:none !important; }
.ar-quien-lista{ gap:0 38px; }
/* El nombre es lo unico que sube de peso: es el ancla de la lista. */
.ar-quien-quien{
  border-bottom:0; padding-bottom:0; margin:0 0 5px;
}
.ar-quien-nom{ font-size:15px; }
.ar-quien-nom:hover{ border-bottom:1px solid currentColor; }
/* El pie sin la rayita de arriba: con las cajas afuera, sobraba una linea. */
.ar-quien-pie{ border-top:0; padding-top:0; margin-top:8px; }

/* El h3 del bloque de piezas tambien lo pisa `main h3{...!important}`. */
.ar-art-piezas-abajo h3{
  font-size:11px !important;
  font-family:'Funnel Sans',sans-serif; font-weight:400; line-height:1.5;
  letter-spacing:.14em; text-transform:uppercase; color:#9a9185;
  margin:0 0 12px; padding-bottom:8px;
  border-bottom:1px solid rgba(25,25,25,.10);
}
.ar-art-piezas-abajo{
  margin-top:60px; padding-top:30px;
  border-top:1px solid rgba(25,25,25,.14);
}

/* La pastilla de nivel: en artista.php es texto al pie y en modelo.php era
   un chip con fondo. Misma informacion, dos formas. Gana la de artista.php,
   que es la que no compite con el dato. */
.ar-niv{
  background:none !important; padding:0 !important; border-radius:0 !important;
  font-size:10px; letter-spacing:.09em;
}
.ar-niv-artista{ color:#5c8a46 !important }
.ar-niv-medio{ color:#a49b90 !important }
.ar-niv-disputado{ color:#a97c1d !important }

/* ══════════════════════════════════════════════════════════════════════
   DENSIDAD · una linea por afirmacion — 05/09/2026
   Medido antes: Clapton, 16 afirmaciones, 12.335px = 15,8 pantallas. Una
   afirmacion por pantalla. Equipboard pone 461 items en ese mismo alto.
   El renglon identifica; el detalle se abre.
   ══════════════════════════════════════════════════════════════════════ */

/* La cabecera ocupaba media pantalla antes del primer dato. */
.ar-art-main{ padding:20px 0 60px !important; }
.ar-art-cab{ margin-bottom:20px !important; }
.ar-art-cab-uno h1{ font-size:27px !important; margin:0 0 2px !important; }
.ar-art-banda-gr{ font-size:13px; margin:0 0 6px; }
.ar-art-bajada{ font-size:12px; margin-top:4px; max-width:58ch; }
.ar-art-seccion-tit{ font-size:15px !important; margin:0 0 10px; padding-bottom:6px; }
.ar-art-seccion{ margin-bottom:22px; }
.ar-art-seccion .ar-art-grupo{ margin-bottom:14px; }

/* ── LA FILA ── */
.ar-ents{ list-style:none; margin:0; padding:0 }
.ar-ent{
  display:block; padding:0;
  border-top:1px solid rgba(140,130,115,.13);
}
.ar-ent:first-child{ border-top:0 }

/* El renglon: año fijo, modelo elastico, nivel a la derecha. */
.ar-ent-linea{
  display:grid; grid-template-columns:44px 1fr auto; gap:0 12px;
  align-items:baseline; padding:7px 0; list-style:none; cursor:default;
}
.ar-ent-hay .ar-ent-linea{ cursor:pointer }
.ar-ent-linea::-webkit-details-marker{ display:none }
.ar-ent-hay .ar-ent-linea:hover .ar-ent-que{ color:#E96B21 }

.ar-ent-anio{
  font: 400 11px/1.6 'Funnel Sans',sans-serif;
  letter-spacing:.05em; color:#b3aa9e; font-variant-numeric:tabular-nums;
  padding-top:0;
}
.ar-ent-que{
  font: 400 14px/1.45 Georgia, serif; color: var(--ink,#1A1208); margin:0;
}
.ar-ent-linea .ar-ent-niv{
  font: 600 9px/1.7 'Funnel Sans',sans-serif;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
/* La flechita sólo donde hay algo que abrir. */
.ar-ent-hay .ar-ent-que::after{
  content:'›'; margin-left:7px; color:#c9c1b5; font-size:15px;
  display:inline-block; transition:transform .15s;
}
.ar-ent-d[open] .ar-ent-que::after{ transform:rotate(90deg) }

/* Lo que se despliega: alineado con el modelo, no con el año. */
.ar-ent-mas{ padding:0 0 10px 56px; max-width:78ch }
.ar-ent-det{ margin:0; font: 400 12.5px/1.55 Georgia,serif; color:#7d766c }
.ar-ent-obra{ margin:4px 0 0; font: 400 12.5px/1.5 Georgia,serif; color:#8d867a }
.ar-ent-cita{
  margin:7px 0 0; padding:0 0 0 10px;
  border-left:2px solid rgba(233,107,33,.3);
  font: italic 400 12.5px/1.55 Georgia,serif; color:#7d766c;
}
.ar-ent-pie{
  margin:7px 0 0; font: 400 10px/1.6 'Funnel Sans',sans-serif;
  letter-spacing:.05em; color:#a49b90;
}
.ar-ent-pie-solo{ margin:-3px 0 7px 56px }

@media (max-width:640px){
  .ar-ent-linea{ grid-template-columns:36px 1fr; row-gap:1px }
  .ar-ent-linea .ar-ent-niv{ grid-column:2 }
  .ar-ent-mas,.ar-ent-pie-solo{ padding-left:48px; margin-left:0 }
}

/* Las tarjetas del bloque de archivo, a escala de muestra. En la pagina
   del modelo van grandes; aca son una referencia al pie. */
.ar-art-archivo .dpp-similares,
.ar-art-piezas-abajo .dpp-similares{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:14px;
}
.ar-art-archivo-fam{ margin-bottom:22px }
.ar-art-archivo{ margin-top:44px !important; padding-top:24px !important }

/* ── modelo.php compacto: un renglon por afirmacion ── 05/09/2026 */
.ar-quien-fila{ padding:0 0 12px !important; margin-bottom:12px }
.ar-quien-quien{ margin:0 0 3px !important }
.ar-quien-nom{ font-size:14px !important }
.ar-quien-banda{ font-size:10.5px }
.ar-quien-item{ margin:0 }
.ar-quien-sigue{ border-top:0 !important; margin:0 !important; padding:0 !important }
.ar-quien-linea{
  display:flex; align-items:baseline; gap:8px; justify-content:space-between;
  padding:3px 0; list-style:none; cursor:default;
}
.ar-quien-d .ar-quien-linea{ cursor:pointer }
.ar-quien-linea::-webkit-details-marker{ display:none }
.ar-quien-d .ar-quien-linea:hover .ar-quien-que{ color:#E96B21 }
.ar-quien-que{ font-size:12.5px !important; line-height:1.4 !important }
.ar-quien-d .ar-quien-que::after{
  content:'›'; margin-left:6px; color:#c9c1b5; font-size:13px;
  display:inline-block; transition:transform .15s;
}
.ar-quien-d[open] .ar-quien-que::after{ transform:rotate(90deg) }
.ar-quien-linea .ar-niv{ font-size:8.5px !important; white-space:nowrap; flex:none }
.ar-quien-abre{ padding:2px 0 8px 0 }
.ar-quien-abre .ar-art-detalle{ font-size:11.5px; margin-top:2px }
.ar-quien-obra{ font-size:11.5px !important; margin-top:3px !important }
.ar-quien-abre .ar-art-cita{ font-size:11.5px; margin-top:5px }
.ar-quien-pie{ margin-top:4px !important; border-top:0 !important; padding-top:0 !important }
.ar-quien-fuente{ font-size:10.5px !important }

/* El nivel como letra en circulo (modelo.php). Mismo recurso que el bloque
   de la ficha: en columnas angostas el chip de texto no entra. */
.ar-niv-let{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; flex:none;
  font: 600 9px/1 'Funnel Sans',sans-serif; letter-spacing:0;
  cursor:help; user-select:none; margin-left:2px;
}
.ar-niv-let.ar-niv-artista  { color:#4d7a3a; background:rgba(127,176,105,.20) }
.ar-niv-let.ar-niv-medio    { color:#8a837a; background:rgba(140,130,115,.16) }
.ar-niv-let.ar-niv-disputado{ color:#9a6b12; background:rgba(217,164,65,.22) }
.ar-quien-leyenda{
  margin:22px 0 0; padding-top:12px;
  border-top:1px solid rgba(140,130,115,.16);
  font: 400 11px/1.9 'Funnel Sans',sans-serif; color:#9a938a;
}
.ar-quien-leyenda .ar-niv-let{ margin:0 2px 0 6px; vertical-align:middle }

/* ── La marca+modelo como COLUMNA, no como encabezado — 05/09/2026 ──
   Diez encabezados por seccion eran diez renglones que repetian lo que la
   fila ya decia. Ahora la lista es plana y la etiqueta es una columna que
   se lee de arriba abajo. */
.ar-ent-linea{
  grid-template-columns:150px 40px 1fr auto !important;
  gap:0 14px !important;
}
.ar-ent-marca{
  font: 400 9.5px/1.7 'Funnel Sans',sans-serif;
  letter-spacing:.11em; text-transform:uppercase; color:#a9a196;
  overflow-wrap:anywhere;
}
.ar-ent-marca a{ color:inherit; text-decoration:none }
.ar-ent-marca a:hover{ color:#E96B21; border-bottom:1px solid currentColor }
/* Lo desplegado arranca donde arranca el texto, no donde la marca. */
.ar-ent-mas{ padding-left:218px !important }
.ar-ent-pie-solo{ margin-left:218px !important }

@media (max-width:820px){
  .ar-ent-linea{ grid-template-columns:40px 1fr auto !important }
  .ar-ent-marca{ grid-column:1 / -1; margin-bottom:1px }
  .ar-ent-mas,.ar-ent-pie-solo{ padding-left:54px !important; margin-left:0 !important }
}

/* ── Una sola tipografia en la fila, y sin columna de año — 05/09/2026 ──
   La marca estaba en la sans en versalitas y el dato en la serif: dos voces
   para una misma linea. Ahora la fila entera es la serif de lectura del
   sitio; la marca se distingue por color, no por fuente. */
.ar-ent-linea{
  grid-template-columns:158px 1fr auto !important;
  gap:0 16px !important;
}
.ar-ent-marca{
  font: 400 13px/1.45 Georgia, serif !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:#a9a196;
}
.ar-ent-mas{ padding-left:174px !important }
.ar-ent-pie-solo{ margin-left:174px !important }

@media (max-width:820px){
  .ar-ent-linea{ grid-template-columns:1fr auto !important }
  .ar-ent-marca{ grid-column:1 / -1; margin-bottom:1px; font-size:12px !important }
  .ar-ent-mas,.ar-ent-pie-solo{ padding-left:0 !important; margin-left:0 !important }
}

/* ── TODO EN UNA LINEA CORRIDA — 05/09/2026 ──
   La columna de marca dejaba una franja fija de 158px que en las filas
   cortas quedaba vacia y en las largas apretaba el dato. Ahora la marca es
   el comienzo de la frase, en gris, y el texto sigue de corrido usando todo
   el ancho. El nivel se va a la derecha para que la columna siga
   escaneandose de arriba abajo. */
.ar-ent-linea{
  display:block !important; padding:6px 0 !important;
}
.ar-ent-marca{
  display:inline !important; margin-right:5px;
  font: 400 13.5px/1.5 Georgia, serif !important; color:#b0a89c !important;
}
.ar-ent-que{
  display:inline !important;
  font-size:13.5px !important; line-height:1.5 !important;
}
.ar-ent-linea .ar-ent-niv{
  float:right; margin-left:16px;
  font: 600 9px/1.9 'Funnel Sans',sans-serif !important;
  letter-spacing:.1em; text-transform:uppercase;
}
.ar-ent-mas{ padding-left:0 !important; max-width:82ch }
.ar-ent-pie-solo{ margin-left:0 !important }

@media (max-width:820px){
  .ar-ent-marca{ font-size:12.5px !important }
  .ar-ent-que{ font-size:12.5px !important }
}

/* ══════════════════════════════════════════════════════════════════════
   EL ARCHIVO EN OSCURO — 05/09/2026
   Decision de Andres despues de verlo probado: las fotos de instrumentos
   sobre negro ganan mucho, la lista densa se lee como catalogo, y la
   cabecera del sitio YA es oscura, asi que desaparece el corte duro que
   habia entre el header negro y el cuerpo blanco.

   TODO va colgado de las clases del <body> —pagina-artista, pagina-modelo,
   pagina-artistas— que ya existian. Ni una regla global: el resto del sitio
   sigue claro, y `card_pieza.php` se repinta SOLO acá adentro, sin tocar su
   CSS, porque esa tarjeta se usa en media docena de pantallas mas.
   ══════════════════════════════════════════════════════════════════════ */

body.pagina-artista, body.pagina-modelo, body.pagina-artistas{
  --arc-fondo:#141210; --arc-tinta:#E4DFD6; --arc-medio:#948C81;
  --arc-tenue:#6f675d;  --arc-linea:rgba(232,228,220,.11);
  --arc-linea-fuerte:rgba(232,228,220,.30);
  background:var(--arc-fondo);
}
body.pagina-artista .ar-art-main,
body.pagina-modelo  .ar-art-main,
body.pagina-artistas .ar-art-main{ background:var(--arc-fondo); color:var(--arc-tinta) }

/* La cabecera de la pagina */
body.pagina-artista .ar-art-cab h1, body.pagina-modelo .ar-art-cab h1,
body.pagina-artistas .ar-art-cab h1{ color:#F2EEE6 }
body.pagina-artista .ar-art-banda-gr, body.pagina-modelo .ar-art-banda-gr{ color:var(--arc-medio) }
body.pagina-artista .ar-art-bajada, body.pagina-modelo .ar-art-bajada,
body.pagina-artistas .ar-art-bajada{ color:var(--arc-medio) }
body.pagina-artista .ar-art-volver a, body.pagina-modelo .ar-art-volver a{ color:var(--arc-medio) }
body.pagina-artista .ar-art-volver a:hover, body.pagina-modelo .ar-art-volver a:hover{ color:#E96B21 }

/* El indice de secciones de arriba */
body.pagina-artista .ar-art-indice a{
  color:var(--arc-medio); border-color:var(--arc-linea);
}
body.pagina-artista .ar-art-indice a:hover{ color:#E96B21; border-color:rgba(233,107,33,.5) }

/* Titulo de seccion y filas */
body.pagina-artista .ar-art-seccion-tit, body.pagina-modelo .ar-art-seccion-tit{
  color:var(--arc-tinta); border-bottom-color:var(--arc-linea-fuerte);
}
body.pagina-artista .ar-art-seccion-tit span{ color:var(--arc-tenue) }
body.pagina-artista .ar-ent{ border-top-color:var(--arc-linea) }
body.pagina-artista .ar-ent-marca{ color:var(--arc-tenue) !important }
body.pagina-artista .ar-ent-que{ color:var(--arc-tinta) !important }
body.pagina-artista .ar-ent-hay .ar-ent-que::after{ color:#5d564d }
body.pagina-artista .ar-ent-det, body.pagina-artista .ar-ent-obra{ color:var(--arc-medio) }
body.pagina-artista .ar-ent-cita{ color:var(--arc-medio); border-left-color:rgba(233,107,33,.42) }
body.pagina-artista .ar-ent-pie{ color:var(--arc-tenue) }
body.pagina-artista .ar-ent-fuente{ color:var(--arc-tenue) !important; border-bottom-color:rgba(148,140,129,.4) }
body.pagina-artista .ar-ent-niv.n-medio{ color:#8b837a }
body.pagina-artista .ar-ent-niv.n-artista{ color:#7fa864 }
body.pagina-artista .ar-ent-niv.n-disputado{ color:#c39a3e }

/* modelo.php: la reja de musicos */
body.pagina-modelo .ar-quien-fila{ border-bottom-color:var(--arc-linea) !important }
body.pagina-modelo .ar-quien-nom{ color:var(--arc-tinta) }
body.pagina-modelo .ar-quien-banda{ color:var(--arc-tenue) }
body.pagina-modelo .ar-quien-que{ color:#CFC9BE }
body.pagina-modelo .ar-quien-d .ar-quien-que::after{ color:#5d564d }
body.pagina-modelo .ar-art-detalle, body.pagina-modelo .ar-quien-obra{ color:var(--arc-medio) }
body.pagina-modelo .ar-art-cita{ color:var(--arc-medio); border-left-color:rgba(233,107,33,.42) }
body.pagina-modelo .ar-quien-fuente{ color:var(--arc-tenue) !important; border-bottom-color:rgba(148,140,129,.4) }
body.pagina-modelo .ar-quien-leyenda{ color:var(--arc-medio); border-top-color:var(--arc-linea) }
body.pagina-modelo .ar-niv-let.ar-niv-artista  { color:#8ebb6f; background:rgba(127,176,105,.16) }
body.pagina-modelo .ar-niv-let.ar-niv-medio    { color:#9a9188; background:rgba(232,228,220,.10) }
body.pagina-modelo .ar-niv-let.ar-niv-disputado{ color:#d4a94e; background:rgba(217,164,65,.16) }

/* El bloque del archivo al pie */
body.pagina-artista .ar-art-archivo{ border-top-color:var(--arc-linea-fuerte) }
body.pagina-artista .ar-art-archivo-tit{ color:var(--arc-tinta) }
body.pagina-artista .ar-art-archivo-sub{ color:var(--arc-medio) }
body.pagina-artista .ar-art-archivo-fam h3,
body.pagina-modelo .ar-art-piezas-abajo h3{
  color:var(--arc-medio); border-bottom-color:var(--arc-linea);
}
body.pagina-modelo .ar-art-piezas-abajo{ border-top-color:var(--arc-linea-fuerte) }

/* ── LA TARJETA DE PIEZA, repintada SOLO aca ──
   Es el motivo por el que esto no se podia hacer con un filtro: la tarjeta
   tiene sus propios colores y en oscuro el titulo quedaba gris sobre negro,
   ilegible. No se toca su CSS: se sobrescribe dentro de estas paginas. */
body.pagina-artista .dpp-sim-card, body.pagina-modelo .dpp-sim-card{
  background:#1c1916; border-color:var(--arc-linea);
}
body.pagina-artista .dpp-sim-card:hover, body.pagina-modelo .dpp-sim-card:hover{
  border-color:rgba(233,107,33,.45);
}
body.pagina-artista .dpp-sim-body, body.pagina-modelo .dpp-sim-body{ background:transparent }
body.pagina-artista .dpp-sim-titulo, body.pagina-modelo .dpp-sim-titulo{ color:#E4DFD6 }
body.pagina-artista .dpp-sim-meta, body.pagina-modelo .dpp-sim-meta,
body.pagina-artista .dpp-sim-codigo, body.pagina-modelo .dpp-sim-codigo{ color:var(--arc-tenue) }
body.pagina-artista .dpp-sim-precio, body.pagina-modelo .dpp-sim-precio{ color:#E4DFD6 }
body.pagina-artista .dpp-sim-chevron, body.pagina-modelo .dpp-sim-chevron{ color:var(--arc-medio) }
body.pagina-artista .card-chips .card-chip-nuevo, body.pagina-modelo .card-chips .card-chip-nuevo,
body.pagina-artista .card-cond-nuevo, body.pagina-modelo .card-cond-nuevo{
  background:rgba(232,228,220,.12); color:#C8C2B7;
}

/* La marca no se distingue por color: la fila es una sola voz. */
.ar-ent-marca{ color:inherit !important }
body.pagina-artista .ar-ent-marca{ color:var(--arc-tinta) !important }

/* «Fuente: Guitar World» en vez de «REPORTADO POR UN MEDIO»: mismo lugar,
   mismo alto, y dice cual. El nivel queda en el color. */
.ar-ent-linea .ar-ent-niv{
  font: 400 10.5px/1.9 'Funnel Sans',sans-serif !important;
  letter-spacing:.02em !important; text-transform:none !important;
  text-decoration:none; white-space:nowrap;
}
.ar-ent-fu{ color:#bdb5a9 }
a.ar-ent-niv:hover{ color:#E96B21 !important }
a.ar-ent-niv:hover .ar-ent-fu{ color:#E96B21 }
body.pagina-artista .ar-ent-fu{ color:#5d564d }

/* Los titulos del tema oscuro necesitan !important por lo mismo de siempre:
   hay reglas globales de color sobre h1/h2/h3 que ganan por especificidad.
   Medido con ratio de contraste: sin esto quedaban en 1.1 —invisibles—. */
body.pagina-artista .ar-art-seccion-tit,
body.pagina-modelo  .ar-art-seccion-tit,
body.pagina-artista .ar-art-archivo-tit{ color:#E4DFD6 !important }
body.pagina-artista .ar-art-archivo-fam h3,
body.pagina-modelo  .ar-art-piezas-abajo h3{ color:#948C81 !important }
body.pagina-artista .dpp-sim-titulo,
body.pagina-modelo  .dpp-sim-titulo{ color:#E4DFD6 !important }
body.pagina-artista .dpp-sim-meta, body.pagina-modelo .dpp-sim-meta,
body.pagina-artista .dpp-sim-codigo, body.pagina-modelo .dpp-sim-codigo{ color:#9a9188 !important }
body.pagina-artista .ar-ent-fu{ color:#847c72 !important }

/* ── Tres cosas que el oscuro se comio — 05/09/2026 ──
   Reportado por Andres mirando la pagina: no se veian los chevrones, las
   pastillas del indice quedaban fantasma, y al sacarle el color propio a la
   marca dejo de parecer un link (que lo es: lleva a la pagina del modelo). */

/* 1 · Las pastillas del indice. La regla oscura apuntaba a `.ar-art-indice`,
   que es otra cosa; las de la pagina de artista son `.ar-art-secnav`. */
body.pagina-artista .ar-art-secnav{ border-bottom-color:var(--arc-linea) }
body.pagina-artista .ar-art-secnav a{
  color:#CFC9BE; border-color:rgba(232,228,220,.24);
  background:rgba(232,228,220,.035);
}
body.pagina-artista .ar-art-secnav a:hover{
  color:#E96B21; border-color:rgba(233,107,33,.55); background:rgba(233,107,33,.07);
}
body.pagina-artista .ar-art-secnav a span{ color:#8b8378 }

/* 2 · El chevron. Sobre negro, el gris que servia en claro desaparece. */
.ar-ent-hay .ar-ent-que::after,
.ar-quien-d .ar-quien-que::after{ color:#b3aa9e }
body.pagina-artista .ar-ent-hay .ar-ent-que::after,
body.pagina-modelo  .ar-quien-d .ar-quien-que::after{ color:#9a9188 !important }
.ar-ent-hay .ar-ent-linea:hover .ar-ent-que::after,
.ar-quien-d .ar-quien-linea:hover .ar-quien-que::after{ color:#E96B21 !important }

/* 3 · La marca ES un link y tiene que verse. Sin devolverle un color propio
   —eso ya se descarto— se marca con un subrayado tenue que se enciende al
   pasar. El texto sigue del mismo color que el resto de la fila. */
.ar-ent-marca a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(140,130,115,.45);
  padding-bottom:1px;
}
.ar-ent-marca a:hover{ color:#E96B21 !important; border-bottom-color:#E96B21 }
body.pagina-artista .ar-ent-marca a{ border-bottom-color:rgba(232,228,220,.30) }
body.pagina-artista .ar-ent-marca a:hover{ border-bottom-color:#E96B21 }

/* Y el nombre del musico en modelo.php, por lo mismo. */
body.pagina-modelo .ar-quien-nom{
  border-bottom:1px solid rgba(232,228,220,.26); padding-bottom:1px;
}
body.pagina-modelo .ar-quien-nom:hover{ color:#E96B21; border-bottom-color:#E96B21 }

/* ── Las fichas del archivo: todas seguidas y chicas — 05/09/2026 ──
   Estaban agrupadas por familia con un subtitulo cada una: cuatro
   encabezados para ocho fotos. El nombre de la pieza ya dice de que modelo
   es. Una sola tira, escala de miniatura: son una referencia al pie, no el
   catalogo —el catalogo esta en la pagina del modelo—. */
.ar-art-tira,
.ar-art-piezas-abajo .dpp-similares{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr)) !important;
  gap:12px !important;
}
.ar-art-tira .dpp-sim-titulo,
.ar-art-piezas-abajo .dpp-sim-titulo{
  font-size:10px !important; line-height:1.35 !important; letter-spacing:.02em;
}
.ar-art-tira .dpp-sim-meta, .ar-art-tira .dpp-sim-codigo,
.ar-art-piezas-abajo .dpp-sim-meta, .ar-art-piezas-abajo .dpp-sim-codigo{
  font-size:9px !important;
}
.ar-art-tira .dpp-sim-body,
.ar-art-piezas-abajo .dpp-sim-body{ padding:8px 8px 10px !important }
.ar-art-tira .card-chips, .ar-art-piezas-abajo .card-chips{ display:none }

@media (max-width:520px){
  .ar-art-tira, .ar-art-piezas-abajo .dpp-similares{
    grid-template-columns:repeat(auto-fill,minmax(100px,1fr)) !important;
  }
}

/* El titulo del bloque sin bajada: la separacion la da el aire, no un texto. */
.ar-art-archivo-tit{ margin-bottom:20px }

/* Los titulos de las miniaturas se cortaban a dos lineas y dos piezas
   distintas terminaban mostrando el mismo texto —«FENDER STRATOCASTER…»
   dos veces— y parecian repetidas. Con tres lineas entran enteros; los
   IDs ya estaban deduplicados, el problema era de lectura. */
.ar-art-tira .dpp-sim-titulo,
.ar-art-piezas-abajo .dpp-sim-titulo{
  -webkit-line-clamp:3 !important; line-clamp:3;
}

/* ── Los titulos de seccion tienen que cortar la lista — 05/09/2026 ──
   Con las filas ya compactas y todo en la misma serif, «GUITARRAS» pesaba
   casi lo mismo que una fila y la lista se leia como un bloque continuo.
   El titulo recupera cuerpo, aire arriba y una linea mas firme; el contador
   toma el naranja de la marca, que es el unico color de la pagina. */
.ar-art-seccion{ margin-bottom:30px }
.ar-art-seccion + .ar-art-seccion{ margin-top:8px }
.ar-art-seccion-tit{
  font-size:12px !important; font-weight:400;
  letter-spacing:.20em !important; text-transform:uppercase;
  margin:34px 0 2px !important; padding:0 0 9px !important;
  border-bottom:1px solid rgba(140,130,115,.5) !important;
}
.ar-art-seccion:first-child .ar-art-seccion-tit{ margin-top:6px !important }
.ar-art-seccion-tit span{
  color:#E96B21 !important; margin-left:9px; font-size:11px; letter-spacing:.04em;
}
body.pagina-artista .ar-art-seccion-tit{
  color:#F2EEE6 !important; border-bottom-color:rgba(232,228,220,.42) !important;
}
/* La primera fila no se pega al titulo. */
.ar-ents{ margin-top:6px !important }

/* ── El pill de BETA ── 05/09/2026
   Como se pone el ™: chico y elevado sobre la linea de base, pegado al
   titulo. Azul porque es el unico color que no usa PULPA en ningun lado
   —el naranja es la marca, el verde es «lo dijo el artista»—, asi que no
   se confunde con nada que ya signifique algo. */
.ar-beta{
  display:inline-block; vertical-align:super;
  margin-left:6px; padding:2px 6px 1px; border-radius:3px;
  background:#2f6fd0; color:#fff;
  font: 600 8.5px/1.35 'Funnel Sans',system-ui,sans-serif;
  letter-spacing:.11em; text-transform:uppercase;
  cursor:help; user-select:none; white-space:nowrap;
  position:relative; top:-.15em;
}

/* ══════════════════════════════════════════════════════════════════════
   EL RIG — 05/09/2026
   La cadena de señal leída como se lee: de las manos al parlante.
   Cada músico es una fila; los tres eslabones van en columnas con una
   flecha entre medio, y en cada uno las marcas mas repetidas de ese
   eslabón. En pantalla chica la flecha se cae y los eslabones se apilan:
   una cadena en vertical sigue siendo una cadena.
   ══════════════════════════════════════════════════════════════════════ */
.rig-lista{ list-style:none; margin:22px 0 0; padding:0 }
.rig-uno{
  padding:15px 0 16px;
  border-top:1px solid rgba(140,130,115,.16);
}
.rig-uno:first-child{ border-top:0 }

.rig-quien{
  display:flex; align-items:baseline; gap:9px;
  text-decoration:none; color:inherit; margin-bottom:9px;
}
.rig-nom{
  font: 600 15px/1.3 Georgia, serif;
  border-bottom:1px solid rgba(140,130,115,.4); padding-bottom:1px;
}
.rig-quien:hover .rig-nom{ color:#E96B21; border-bottom-color:#E96B21 }
.rig-banda{ font: 400 11px/1.4 'Funnel Sans',sans-serif; color:#9a938a }
.rig-total{
  margin-left:auto; flex:none;
  font: 400 10px/1.6 'Funnel Sans',sans-serif; letter-spacing:.08em; color:#b3aa9e;
}
.rig-total::after{ content:' piezas' }

.rig-cadena{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap }
.rig-esl{ flex:1 1 0; min-width:150px }
.rig-esl-tit{
  display:block;
  font: 400 9px/1.8 'Funnel Sans',sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:#a9a196;
}
.rig-esl-qué{ display:block; font: 400 13px/1.45 Georgia, serif }
.rig-mas{ color:#a9a196 }
.rig-flecha{
  flex:none; align-self:center; color:#c9c1b5; font-size:14px; padding-top:12px;
}
.rig-pie{
  margin:34px 0 0; padding-top:16px;
  border-top:1px solid rgba(140,130,115,.16);
  font: 400 12px/1.7 'Funnel Sans',sans-serif; color:#9a938a; max-width:62ch;
}
.ar-art-secnav a.es-hoy{
  border-color:rgba(233,107,33,.55); color:#E96B21;
}

/* En oscuro, que es como se ve el archivo. */
body.pagina-rig .rig-uno{ border-top-color:var(--arc-linea) }
body.pagina-rig .rig-nom{ color:var(--arc-tinta); border-bottom-color:rgba(232,228,220,.28) }
body.pagina-rig .rig-banda,
body.pagina-rig .rig-total{ color:var(--arc-tenue) }
body.pagina-rig .rig-esl-tit{ color:var(--arc-tenue) }
body.pagina-rig .rig-esl-qué{ color:#CFC9BE }
body.pagina-rig .rig-mas,
body.pagina-rig .rig-flecha{ color:#5d564d }
body.pagina-rig .rig-pie{ color:var(--arc-medio); border-top-color:var(--arc-linea) }

@media (max-width:700px){
  .rig-cadena{ display:block }
  .rig-esl{ margin-bottom:7px }
  .rig-flecha{ display:none }
}

/* La puerta a El Rig, en el indice de musicos. */
.ar-art-puerta-rig{
  margin:14px 0 4px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  font: 400 12px/1.6 'Funnel Sans',sans-serif;
}
.ar-art-puerta-rig a{
  font-size:13px; font-weight:600; letter-spacing:.03em;
  color:#E96B21; text-decoration:none; white-space:nowrap;
  border-bottom:1px solid rgba(233,107,33,.4); padding-bottom:1px;
}
.ar-art-puerta-rig a:hover{ border-bottom-color:#E96B21 }
.ar-art-puerta-rig span{ color:#9a938a }
body.pagina-artistas .ar-art-puerta-rig span{ color:var(--arc-medio) }

/* Los numeros del archivo, al pie de la lista: cierran en vez de presentar. */
.ar-art-cuantos{
  margin:30px 0 0; padding-top:15px;
  border-top:1px solid rgba(140,130,115,.16);
  font: 400 11.5px/1.7 'Funnel Sans',sans-serif; color:#9a938a;
}
body.pagina-artistas .ar-art-cuantos{ color:var(--arc-tenue); border-top-color:var(--arc-linea) }

/* Los numeros del archivo, al pie: cierran en vez de presentar. */
.ar-art-cuantos, .ar-quien-cuantos{
  margin:28px 0 0; padding-top:14px;
  border-top:1px solid rgba(140,130,115,.16);
  font: 400 11.5px/1.7 'Funnel Sans',sans-serif; color:#9a938a; max-width:64ch;
}
.ar-quien-cuantos + .ar-quien-leyenda{ margin-top:10px; padding-top:0; border-top:0 }
body.pagina-artistas .ar-art-cuantos,
body.pagina-modelo .ar-quien-cuantos{ color:var(--arc-tenue); border-top-color:var(--arc-linea) }

/* La marca repetida: comilla de repeticion, como en una tabla. El nombre
   sigue en el HTML para el buscador y para quien use lector de pantalla. */
.ar-ent-marca-idem{ color:#c9c1b5 }
body.pagina-artista .ar-ent-marca-idem{ color:#4f4841 !important }
.ar-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ── LA ACLARACION DEL BLOQUE DE MUSICOS ───────────────────────────────
   05/09/2026. Va al pie, en voz baja: no es una advertencia legal
   gritada, es la nota al pie que ordena la lectura. Mismo tamano y
   tinta que los numeros al pie del archivo, sin linea arriba porque el
   «Ver musicos documentados» ya separa. */
.ar-quien-nota{
  margin:14px 0 0;
  font: 400 11.5px/1.6 'Funnel Sans',sans-serif;
  color:#9a938a; max-width:60ch;
}
body.piel-archivo .ar-quien-nota{ color:var(--arc-tenue) }


/* POR QUE `not all and (min-width: 761px)` Y NO `max-width: 760px`.
   05/09/2026. Medido: en una ventana de 760,5px de ancho —cualquier
   ancho fraccionario entre los dos numeros, y los hay: zoom del
   navegador, barras de scroll, algunos telefonos— NO entraba ninguno
   de los dos. Ni el bloque de escritorio (min-width: 761) ni el de
   celular (max-width: 760). La pagina caia a las reglas base: foto de
   180px y la cabecera debajo, sobre el crema, con el logo claro que el
   PHP ya mando. O sea el mismo logo invisible, escondido en una franja
   de un pixel. Escrito como negacion exacta del bloque de escritorio,
   esa rendija no existe: o entra uno o entra el otro. */
/* ── LA CABECERA DE LA TIENDA, TAMBIEN ADENTRO DEL BANNER EN EL CELULAR
      05/09/2026 ───────────────────────────────────────────────────────
   El 03/09 la cabecera se metio adentro del banner y se dejo el celular
   apilado a proposito: "abajo de 761px el texto ocuparia casi toda la
   foto". En la practica el apilado trajo tres problemas y ninguno es de
   gusto:

   1. EL LOGO DESAPARECIA. Cual de las dos variantes se sirve lo decide
      el PHP con `pulpa_logo_org($org, $org_banner !== '')`, y el
      servidor no sabe el ancho de la pantalla: manda la clara —correcta
      sobre el cuero— y en el telefono esa cabecera cae sobre el crema.
      Lestard, que solo tiene la clara, quedaba blanco sobre blanco:
      invisible. Con la cabecera de nuevo sobre la foto, la variante que
      ya se sirve es la correcta en las dos pantallas. No hay que tocar
      PHP y no queda una eleccion de color colgada de un `if`.

   2. LA MIGA SALIA CORTADA AL MEDIO. `.tienda-banner` lleva
      `line-height: 0` para que el <img> no arrastre el renglon fantasma,
      y la miga —que vive adentro del banner desde el 03/09— heredaba ese
      cero: el div medido daba 351x0 y el texto se desbordaba para arriba
      y para abajo, con la foto tapandole la mitad. Se le devuelve
      renglon a ella sola.

   3. TRES BLOQUES SUELTOS. Foto, logo flotando a la izquierda y nombre
      centrado se leian como tres cosas sin relacion. Es la misma razon
      por la que el 03/09 se junto todo en escritorio.

   El alto sube de 150 a 230px: 150 alcanzaba para una franja decorativa,
   no para apoyarle texto encima. Y de paso achica el recorte — un 4:1 en
   351px de ancho entra en 88, asi que 150 era zoom 1,7x y se comia el
   40% del ancho del arte; 230 sigue recortando pero menos.
   ───────────────────────────────────────────────────────────────────── */
@media not all and (min-width: 761px) {
  .tienda-banner {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    margin: 0 0 22px;
  }
  /* La miga recupera su renglon (ver 2). Va arriba, en el flujo y con su
     color de siempre: no esta sobre la foto, asi que no se aclara. */
  .tienda-banner > .listado-migas {
    order: 1; line-height: 1.5; margin: 0 0 10px;
  }
  .tienda-banner > img { order: 2; height: 230px; }

  /* EL DEGRADADO SOLO SOBRE LA FOTO, NO SOBRE LA MIGA. Por eso se ancla
     abajo con el mismo alto de la imagen en vez de `inset: 0`. Sube desde
     el pie porque ahi va el texto, y suelta antes de la mitad para que la
     foto siga siendo lo que se ve. */
  .tienda-banner::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 230px; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.14) 38%, rgba(0,0,0,.52) 72%, rgba(0,0,0,.86) 100%);
  }

  .tienda-banner > .tienda-cabecera {
    order: 3;
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    margin: 0 !important; padding: 0 14px 13px;
    border-bottom: 0 !important;
    flex-direction: row !important; align-items: flex-end !important;
    gap: 12px !important;
    text-shadow: 0 1px 14px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.45);
  }
  .tienda-banner > .tienda-cabecera .tienda-datos,
  .tienda-banner > .tienda-cabecera .tienda-datos * { color: rgba(255,255,255,.9) !important; }
  .tienda-banner > .tienda-cabecera .tienda-datos h1 {
    color: #fff !important; font-size: 21px !important; line-height: 1.1;
  }
  .tienda-banner > .tienda-cabecera .tienda-datos a { color: #ffb4a2 !important; }
  /* La descripcion, a dos renglones. Entera se come la foto; sacarla del
     todo le saca al celular algo que el escritorio si dice. */
  .tienda-banner > .tienda-cabecera .tienda-desc {
    font-size: 12.5px !important; line-height: 1.35 !important;
    margin: 4px 0 5px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tienda-banner > .tienda-cabecera .tienda-links { font-size: 12px !important; }

  /* EL LOGO NO ES LA FOTO. Igual que en escritorio: se acota por alto y
     el ancho lo pone el dibujo, asi un logotipo largo no se estruja
     dentro de un cuadrado. Solo para los vectoriales — un avatar JPG
     necesita su caja cuadrada para no deformarse. */
  .tienda-banner > .tienda-cabecera .tienda-logo.es-vector {
    width: auto !important; height: auto !important;
    max-width: 132px; align-self: flex-end;
  }
  .tienda-banner > .tienda-cabecera .tienda-logo.es-vector img {
    max-height: 54px !important; max-width: 132px !important;
    width: auto !important; height: auto !important;
  }
  .tienda-banner > .tienda-cabecera .tienda-logo:not(.es-vector) {
    width: 58px !important; height: 58px !important;
  }
}

/* EL BANNER A SANGRE TAMBIEN EN EL CELULAR. 05/09/2026.
   Con el margen de 12px del cuerpo la foto quedaba como un recuadro
   flotando en el medio de la pantalla, y una cabecera de casa no es una
   tarjeta: es la portada de la pagina. En escritorio ya iba a sangre
   desde el 03/09 por la misma razon. La miga se queda con el margen —
   es texto de navegacion, no parte de la foto. */
@media not all and (min-width: 761px) {
  .tienda-banner {
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    margin-top: -14px;
  }
  .tienda-banner > .listado-migas   { padding: 0 12px; }
  .tienda-banner > .tienda-cabecera { padding: 0 12px 13px; }
}

/* ── LA PUERTA PARA SUMAR ──────────────────────────────────────────────
   05/09/2026. Va al pie y en voz baja: el que llego hasta abajo buscando
   algo que no estaba es el que tiene el dato. Arriba seria un pedido; al
   pie es una respuesta. */
.ar-art-sumar{
  margin:26px 0 0; padding-top:15px;
  border-top:1px solid rgba(140,130,115,.16);
  font: 400 12.5px/1.7 'Funnel Sans',sans-serif; color:#9a938a; max-width:64ch;
}
.ar-art-sumar a{ color:inherit; border-bottom:1px solid rgba(233,107,33,.5) }
.ar-art-sumar a:hover{ color:#E96B21; border-bottom-color:#E96B21 }
body.piel-archivo .ar-art-sumar{ color:var(--arc-tenue); border-top-color:var(--arc-linea) }

/* El «corregilo» de cada fila: adentro del desplegable, al lado de la
   fuente, del mismo tamano que ella y sin robarle el ojo. */
.ar-ent-corr{
  margin-left:12px; font-size:11px; color:#9a938a;
  border-bottom:1px dashed rgba(140,130,115,.45);
}
.ar-ent-corr:hover{ color:#E96B21; border-bottom-color:#E96B21 }

/* Mismo problema medido en las dos piezas que sume hoy: --arc-tenue da
   3,36 sobre el fondo oscuro y estos dos textos son chicos. 6,15. */
body.piel-archivo .ar-art-sumar{ color:#9a938a }
body.piel-archivo .ar-quien-nota{ color:#9a938a }

/* ══════════════════════════════════════════════════════════════════════
   EL PRECIO BLOQUEADO — 06/09/2026
   ══════════════════════════════════════════════════════════════════════
   La zona del precio existe siempre. Al que no tiene cuenta se le muestra
   el rótulo, la moneda de verdad y una CIFRA FICTICIA desenfocada, y el
   bloque entero es la puerta.

   SÍ HAY `blur()` ACÁ, Y NO CONTRADICE LA REGLA DE SEGURIDAD. La regla
   es «el desenfoque va sobre un placeholder, nunca sobre el precio
   verdadero», y eso es exactamente lo que pasa: lo que está abajo del
   blur es `8.888`, el mismo para todas las piezas. Sacarle el filtro con
   el inspector no revela nada. El importe real no llegó al navegador.

   Antes de esto se probaron cuatro puntos («USD ••••») y una barra
   rayada. Las dos se leían como una tapa —contraseña la primera, cinta
   aisladora la segunda— y una tapa dice «te escondo algo». Una cifra
   borrosa conserva la forma de un precio, y eso es lo que da curiosidad.

   Y NO LLEVA LÍNEA ROJA AL COSTADO. La tenía, heredada del muro viejo, y
   el rojo en esta hoja es acento de marca pero al lado de un bloque
   cerrado se lee como advertencia. El aire alcanza para separar.
   ══════════════════════════════════════════════════════════════════════ */

.dpp-price-lock {
  display: block;
  text-decoration: none;
  color: inherit;
}

.dpp-price-mask {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ar-texto);
  user-select: none;
}
/* LA MONEDA NO LLEVA TIPOGRAFÍA PROPIA, Y ES EL PUNTO ENTERO — 06/09/2026.
   Acá decía `font-family: Georgia`, copiado de `.dpp-price` de
   pulpa_dpp.css… que en el archivo está pisado unas 6.000 líneas más
   arriba: el precio de verdad se dibuja en Funnel Sans 300, clamp(28-38px).
   O sea que el bloqueado salía en serif y el real en sans, y quien
   entraba veía cambiar la tipografía y el tamaño abajo de sus ojos.
   El placeholder tiene que tener EXACTAMENTE la forma de lo que va a
   aparecer: mismo tipo, mismo peso, mismo cuerpo. Se hereda de
   `.dpp-price` y no se toca nada. */
.dpp-price-moneda { font: inherit; }

/* La cifra ficticia. `pointer-events:none` y `user-select:none` para que
   no se pueda seleccionar ni copiar un número que no significa nada.
   CUATRO PÍXELES, medido contra 5, 6 y 7. Con 7 se convierte en una
   mancha y vuelve a leerse como una tapa —que es justo lo que se quería
   evitar—; con 4 los dígitos siguen sin poder leerse pero se ve que hay
   un número, con su cantidad de cifras y su separador de miles. Esa
   silueta es todo el efecto: conserva la forma de un precio. */
.dpp-price-falso {
  font-style: normal;
  filter: blur(4px);
  opacity: .62;
  user-select: none;
  pointer-events: none;
}

.dpp-price-lock-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ar-naranja);
}
.dpp-price-lock-icono { font-size: 13px; filter: grayscale(1); }
.dpp-price-lock:hover .dpp-price-lock-cta { color: var(--ar-naranja-2); }
.dpp-price-lock:hover .dpp-price-lock-cta { text-decoration: underline; text-underline-offset: 4px; }

.dpp-price-lock-micro {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ar-texto-2);
  letter-spacing: .01em;
}

/* Para quien lee con lector de pantalla: la cifra es mentira y va con
   aria-hidden, así que esta línea es la que cuenta lo que pasa. No se usa
   `display:none` —los lectores tampoco la leerían—. */
.dpp-solo-lector {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── LA CIFRA BORROSA TAMBIÉN EN LA GRILLA ───────────────────────────
   Estuvo unas horas como un «Ver precio» en texto y quedaba mal: en una
   grilla de fotos, un renglón de texto donde las otras tarjetas tienen un
   número se lee como un botón suelto, no como un precio.
   Estas dos clases NO declaran tipografía ni tamaño: heredan del precio
   de verdad de cada pantalla (`.dpp-sim-precio` en las tarjetas del
   buscador y la tienda, el span del pie en la portada). Al entrar, lo
   único que cambia es que la cifra se enfoca.
   MENOS BLUR QUE EN LA FICHA —2 px contra 4—: el desenfoque tiene que ser
   proporcional al cuerpo de la letra, y acá el precio mide 15 px contra
   los 27-38 de la ficha. Medido en pantalla: con 3 px queda una nube y se
   pierde la forma de número; con 2 px no se lee un solo dígito pero se ve
   que hay cinco glifos y un separador.
   QUE NO SE LEA NO ES UN CAPRICHO ACÁ TAMPOCO. La cifra es la misma en
   todas las tarjetas: si se llegara a leer, la grilla entera diría 8.888 y
   parecería un error del sitio, no un precio reservado. */
.ar-pieza-vp { color: inherit; }
.dpp-sim-precio .dpp-price-falso,
.ar-pieza-vp .dpp-price-falso { filter: blur(2px); opacity: .6; }

/* ── LA VUELTA: SE ENCIENDE UN SEGUNDO Y SE APAGA ─────────────────────
   El que entró para ver el precio vuelve a una ficha de dos pantallas.
   El scroll lo deja parado en el lugar; esto le dice cuál era. Se apaga
   solo: un resaltado permanente deja de señalar y pasa a decorar.
   Con `prefers-reduced-motion` no parpadea nada. */
@keyframes ar-recien-abierto {
  0%   { background: rgba(193, 52, 56, .13); }
  100% { background: transparent; }
}
[data-recien-abierto="1"] {
  animation: ar-recien-abierto 2.4s ease-out 1;
  box-shadow: 0 0 0 10px transparent;
}
@media (prefers-reduced-motion: reduce) {
  [data-recien-abierto="1"] { animation: none; }
}

/* El bloque es un <a>, y la regla general de esta hoja pinta de naranja
   todo link de la ficha (`.dpp-body a:not(…)`, especificidad 0-4-1). Sin
   esta línea el rótulo y la cifra salían naranjas y el candado parecía un
   botón. Se repiten las mismas exclusiones para empatarle y ganar por el
   `a.dpp-price-lock`. */
.dpp-body a.dpp-price-lock:not(.dpp-btn-primary):not(.dpp-sim-card):not(.pieza) {
  color: inherit;
  text-decoration: none;
}
/* Adentro del link los renglones son <span>: sin esto se apilarían en una
   sola línea y el margen del rótulo no haría nada. */
.dpp-price-lock .dpp-price-label { display: block; }

/* ══════════════════════════════════════════════════════════════════
   EMPEZÁ POR UN ARTISTA — bloque de la portada · 06/09/2026
   BORRADOR. Andrés lo mira antes de que suba.
   Sin fotos: la foto de un músico es del fotógrafo, y esta pantalla
   funciona sin una sola — lo mismo que artista.php explica arriba.
   ══════════════════════════════════════════════════════════════════ */
.ar-artistas-home {
  background: #14110f;
  color: #f4efe9;
  padding: 54px 0 58px;
  /* el header queda pegado arriba: sin esto, #artistas deja el titulo
     debajo del header y se lee el monton de fotos sin la explicacion */
  scroll-margin-top: 78px;
}
.ar-ah-in { display: block; }
.ar-ah-kicker {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #c98a3f;
  margin-bottom: 10px;
}
/* EL TITULO SIGUE LA REGLA DE LA CASA, NO LA MIA.
   `main h2` del sitio fija 20px, mayusculas y color con !important para que
   todos los titulos de seccion de la portada midan y pesen igual — "LAS
   ELEGIDAS DEL ARCHIVO", "LA RED"... Pelearle con un titular de 40px hacia
   que este bloque se leyera como pegado de otro sitio. Lo unico que se le
   discute es el color, porque el de la casa es oscuro y este fondo tambien:
   sin esto el titulo desaparecia. */
.ar-artistas-home .ar-ah-tit {
  margin: 0 0 12px;
  color: #ffffff !important;
}
.ar-ah-baj {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.55;
  color: #b9aea3;
}
.ar-ah-chips {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ar-ah-chips li { display: flex; }   /* para que todas las pastillas midan igual
                                        de alto: la de un artista sin banda tenia
                                        una linea menos y quedaba mas baja */
.ar-ah-chips a {
  display: flex;
  flex: 1;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border: 1px solid #3a322c;
  border-radius: 3px;
  text-decoration: none;
  background: #1c1815;
  transition: border-color .15s, background .15s;
}
.ar-ah-chips a:hover { border-color: #c98a3f; background: #221d19; }
.ar-ah-nom { font-size: 15px; color: #f4efe9; line-height: 1.2; }
.ar-ah-banda {
  font-size: 11px;
  letter-spacing: .04em;
  color: #8d8177;
  text-transform: uppercase;
}
/* ── CARAS — 12/09/2026 ──
   Catorce retratos redondos encimados, sin nombre, sorteados en cada
   carga entre los más citados que tienen foto. El nombre va en aria-label
   del enlace (lo lee el lector de pantalla, no la pantalla). Al pasar el
   mouse la cara sube y se separa un poco de las vecinas. */
.ar-ah-caras {
  list-style: none; margin: 0 0 28px; padding: 0 0 0 10px;
  display: flex; flex-wrap: wrap; align-items: center;
}
.ar-ah-caras li { margin-left: -16px; }
.ar-ah-caras li:first-child { margin-left: 0; }
.ar-ah-caras a { display: block; border-radius: 50%; }
.ar-ah-caras img {
  width: 72px !important; height: 72px !important; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid #14110f; background: #1c1815; box-shadow: 0 2px 8px rgba(0,0,0,.45);
  transition: transform .18s, border-color .18s;
}
.ar-ah-caras a:hover img, .ar-ah-caras a:focus img { transform: translateY(-6px) scale(1.08); border-color: #c98a3f; position: relative; z-index: 2; }
/* EN EL CELULAR, UNA SOLA TIRA — 12/09/2026. Con 14 caras en tres renglones
   quedaba una sola colgada abajo (Andrés: «medio feo esa foto que está
   como demás»). Ahora es una tira horizontal que se desliza con el dedo,
   como las historias: no se corta y no sobra ninguna. */
@media (max-width: 700px) {
  .ar-ah-caras { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 6px 12px 10px 6px; margin-left: -6px; margin-right: -16px; scrollbar-width: none; }
  .ar-ah-caras::-webkit-scrollbar { display: none; }
  .ar-ah-caras li { margin-left: -12px; flex: 0 0 auto; }
  .ar-ah-caras img { width: 56px !important; height: 56px !important; border-width: 2px; }
  .ar-ah-caras a:hover img { transform: none; }
}

.ar-ah-todos {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #c98a3f;
  text-decoration: none;
  border-bottom: 1px solid #6a4a24;
  padding-bottom: 3px;
}
.ar-ah-todos:hover { color: #e0a75c; border-bottom-color: #c98a3f; }

@media (max-width: 700px) {
  .ar-artistas-home { padding: 40px 0 44px; }
  .ar-ah-chips { gap: 8px; }
  .ar-ah-chips a { padding: 9px 13px; }
  .ar-ah-nom { font-size: 14px; }
}

/* ── PULPA CONEXIONES: el nombre del bloque ────────────────────────────
   06/09/2026. Arriba del título, en el naranja de la casa. Es lo único
   del bloque que no es gris: nombra la función y la separa del resto de
   las secciones de la ficha, que son datos de la pieza. */
/* `.dpp-section-title` del sitio es un flex en fila —pensado para
   «titulo + accion a la derecha»— y ponia el nombre y el titulo uno al
   lado del otro. Para este bloque son dos renglones. */
.ar-quien .dpp-section-title {
  display: block;
}
.ar-quien .ar-conex-nombre {
  display: block;
  font: 400 10.5px/1 'Funnel Sans', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #E96B21;
  margin: 0 0 7px;
}
body.piel-archivo .ar-quien .ar-conex-nombre { color: #c98a3f; }

/* ── QUIÉN LA TIENE, BLOQUEADO — 06/09/2026 ───────────────────────────
   Mismo idioma que el precio: el bloque existe, se ve que hay alguien
   atrás, y el nombre está borroso. Abajo del blur hay un texto fijo
   («Nombre reservado»), nunca el nombre real — y el avatar de la casa no
   se dibuja: su logo la identifica sin necesidad de leer una letra.
   2,2 px de blur porque el nombre mide 16, entre los 15 de la tarjeta y
   los 27 del precio de la ficha. */
.dpp-nombre-falso {
  font-style: normal;
  filter: blur(2.2px);
  opacity: .6;
  user-select: none;
  pointer-events: none;
}
.dpp-quien-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ar-naranja);
  text-decoration: none;
}
.dpp-quien-cta:hover { color: var(--ar-naranja-2); text-decoration: underline; text-underline-offset: 4px; }

/* ── EL CORAZÓN, PROPORCIONAL A LA TARJETA — 06/09/2026, Andrés ───────
   «En esta vista los corazones están muy grandes.» Y tenía razón: el
   corazón mide 26 px fijos, medidos contra la tarjeta grande del
   buscador. En artista y modelo la tarjeta es casi la mitad, así que el
   mismo corazón pasa a ocupar un cuarto de la foto y se come la
   guitarra. El tamaño de un adorno se elige contra lo que tiene al
   lado, no en abstracto.
   No se cambia el de las otras pantallas: ahí está bien. */
body.pagina-artista .card-fav,
body.pagina-modelo  .card-fav {
  width: 24px !important; height: 24px !important;
  top: 6px !important; right: 6px !important;
}
body.pagina-artista .card-fav svg,
body.pagina-modelo  .card-fav svg { width: 17px !important; height: 17px !important; }
body.pagina-artista .card-fav svg, body.pagina-artista .card-fav .fav-path,
body.pagina-modelo  .card-fav svg, body.pagina-modelo  .card-fav .fav-path { stroke-width: 2 !important; }


/* ══════════════════════════════════════════════════════════════════════
   ARTISTA → GEAR · FICHAS DOCUMENTALES — 09/09/2026
   La informacion, las consultas y el orden de señal no cambian. Cambia
   solamente la unidad visual: dos fichas compactas por fila, evidencia
   desplegable y una zona de imagen que nunca depende de hotlinks.
   ══════════════════════════════════════════════════════════════════════ */
body.pagina-artista .ar-gear-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:start;
  margin-top:14px !important;
}

body.pagina-artista .ar-gear-card{
  --gear-acento:#E96B21;
  display:block;
  align-self:start;
  min-width:0;
  padding:0;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(232,228,220,.15) !important;
  border-radius:10px;
  background:#1b1815;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
  transition:border-color .16s ease,transform .16s ease,background .16s ease;
}
body.pagina-artista .ar-gear-card:first-child{ padding-top:0 }
body.pagina-artista .ar-gear-card:hover{
  border-color:rgba(233,107,33,.48) !important;
  background:#1e1a17;
  transform:translateY(-1px);
}

/* ── EL CUADRO DE LA FOTO TOMA LA FORMA DE LA FOTO — 19/09/2026 ──
   Andres, tercera vuelta: «¿si hacemos que el contenedor de las fotos sea
   adaptativo?». Si, y resuelve las dos quejas de una sola vez.

   La columna era de 168 px FIJOS y alta como la tarjeta, o sea un cuadro
   vertical que no es la forma de ninguna foto. Con `cover` se comia el
   25% de cada una; con `contain` entraban enteras pero entre dos franjas
   desenfocadas que se leen como vacio.

   La foto manda su proporcion en `--gear-ar` (la mide artista.php y la
   acota entre 0.62 y 1.55) y el cuadro la toma. La foto lo llena entero:
   cero recorte y cero franjas.

   EL ANCHO ES FIJO Y EL ALTO SALE DE LA PROPORCION, no al reves. La
   primera version hacia lo contrario —columna `auto`, alto de la fila,
   ancho = alto x proporcion— y en el celular reventaba: el alto lo pone
   el TEXTO, un titulo de cuatro renglones hacia la fila alta, y una foto
   apaisada pedia un ancho enorme que se comia la columna del texto y le
   pasaba por encima. Andres lo vio: «en el movil a veces rompe».
   Es una dependencia circular —el ancho depende del alto, el alto del
   texto, y el texto del ancho que le queda— y la grilla la resuelve
   creciendo. Con el ancho fijo no hay circulo: 168 px, alto = 168 /
   proporcion, y la tarjeta no se puede romper. */
body.pagina-artista .ar-gear-head{
  display:grid !important;
  /* 88 -> 140 px (12/09/2026): con fotos reales, 88 era una estampilla. */
  grid-template-columns:168px minmax(0,1fr) !important;
  gap:0 !important;
  min-height:150px;
  padding:0 !important;
  margin:0;
  align-items:stretch !important;
  overflow:hidden;
  list-style:none;
}
body.pagina-artista summary.ar-gear-head{ cursor:pointer }
body.pagina-artista .ar-gear-head::-webkit-details-marker{ display:none }
body.pagina-artista .ar-gear-head::marker{ content:'' }

body.pagina-artista .ar-gear-visual{
  /* El ancho lo pone la COLUMNA de la grilla —168 en escritorio, 128 en
     el celular—, no un numero repetido acá. Estaba clavado en 168 y en el
     celular se salia de una columna de 128: medido en el banco de prueba,
     169 px de cuadro dentro de 128 de columna. */
  width:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  padding:10px;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 18%,rgba(255,255,255,.12),transparent 35%),
    linear-gradient(145deg,#3b2a20,#241d18 62%,#191613);
  border-right:1px solid rgba(232,228,220,.10);
}
body.pagina-artista .ar-gear-cat-amplificador .ar-gear-visual{
  background:radial-gradient(circle at 75% 18%,rgba(233,107,33,.22),transparent 38%),linear-gradient(145deg,#40251a,#211a16 68%);
}
body.pagina-artista .ar-gear-cat-pedal .ar-gear-visual,
body.pagina-artista .ar-gear-cat-efecto_estudio .ar-gear-visual{
  background:radial-gradient(circle at 76% 18%,rgba(119,137,181,.24),transparent 38%),linear-gradient(145deg,#292d3b,#191a20 68%);
}
body.pagina-artista .ar-gear-cat-teclado .ar-gear-visual,
body.pagina-artista .ar-gear-cat-consola .ar-gear-visual{
  background:radial-gradient(circle at 76% 18%,rgba(112,155,140,.22),transparent 38%),linear-gradient(145deg,#24342f,#181d1b 68%);
}
body.pagina-artista .ar-gear-cat-microfono .ar-gear-visual,
body.pagina-artista .ar-gear-cat-grabador .ar-gear-visual{
  background:radial-gradient(circle at 76% 18%,rgba(198,172,115,.20),transparent 38%),linear-gradient(145deg,#383126,#1e1b17 68%);
}
/* SIN RECORTES — 12/09/2026. Andrés: «mostrarlas sin recortes». Un ampli
   recortado por arriba y por abajo no se reconoce. La foto entra entera
   (contain) con un poco de aire, sobre el mismo fondo oscuro del cuadro. */
body.pagina-artista .ar-gear-visual.tiene-imagen{ padding:0;background:#15120f }
/* Con foto y dentro del tope: el ancho lo decide la proporcion. `height:100%`
   viene del `stretch` de la grilla, asi que el ancho es alto x proporcion.
   Los topes evitan que una foto casi cuadrada empuje al texto contra la
   pared y que una muy vertical quede como un fosforo. */
/* El ancho manda, el alto obedece. `align-self:start` es lo que saca al
   cuadro del `stretch` de la fila: sin eso la grilla le impone el alto
   del texto y la proporcion se pierde otra vez. Debajo de la foto queda
   el fondo de la tarjeta, que es del mismo color. */
body.pagina-artista .ar-gear-visual.tiene-imagen[style*="--gear-ar"]{
  align-self:start;
  width:100%;
  height:auto;
  aspect-ratio:var(--gear-ar);
  /* Sin el filete de la derecha: ahora el cuadro no llega abajo de todo y
     una raya vertical a media altura se ve como algo que quedo cortado.
     El borde de la foto ya separa. */
  border-right:0;
  overflow:hidden;      /* el acercamiento del hover se recorta acá */
}
/* Y como el cuadro ya tiene la forma de la foto, `cover` no recorta nada:
   se queda por si la proporcion redondeada deja medio pixel. */
body.pagina-artista .ar-gear-visual.tiene-imagen[style*="--gear-ar"] img.ar-gear-fondo{ display:none }
/* LLENA EL CUADRO — 12/09/2026, segunda vuelta. Andrés vio la versión
   «entera con fondo desenfocado» y prefirió que la foto ocupe todo el
   lugar: recorte centrado, como una foto de catálogo. El fondo
   desenfocado queda apagado (el <img> sigue en el HTML por si vuelve). */
body.pagina-artista .ar-gear-visual img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:1;
}
body.pagina-artista .ar-gear-visual img.ar-gear-fondo{ display:none }
body.pagina-artista .ar-gear-sigla{
  display:block;
  color:rgba(242,238,230,.90);
  font:700 25px/.92 'Funnel Sans',system-ui,sans-serif;
  letter-spacing:-.055em;
}
body.pagina-artista .ar-gear-clase{
  display:block;
  margin-top:5px;
  color:rgba(242,238,230,.50);
  font:500 8px/1.25 'Funnel Sans',system-ui,sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
}

body.pagina-artista .ar-gear-info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:13px 14px 10px;
}
body.pagina-artista .ar-gear-card .ar-ent-marca{
  display:block !important;
  margin:0 0 5px !important;
  color:#A9A196 !important;
  font:500 10px/1.35 'Funnel Sans',system-ui,sans-serif !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
}
body.pagina-artista .ar-gear-card .ar-ent-que{
  display:block !important;
  color:#F2EEE6 !important;
  font:600 15px/1.26 Georgia,serif !important;
}
body.pagina-artista .ar-gear-card .ar-ent-que::after{ content:none !important }

body.pagina-artista .ar-gear-nivel{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:9px;
  color:#8E867B;
  font:500 9px/1.35 'Funnel Sans',system-ui,sans-serif;
  letter-spacing:.04em;
}
body.pagina-artista .ar-gear-nivel::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:#70685E;
  box-shadow:0 0 0 2px rgba(112,104,94,.13);
}
body.pagina-artista .ar-gear-nivel.n-artista{ color:#91B67A }
body.pagina-artista .ar-gear-nivel.n-artista::before{ background:#78A65F;box-shadow:0 0 0 2px rgba(120,166,95,.15) }
body.pagina-artista .ar-gear-nivel.n-disputado{ color:#C9A04A }
body.pagina-artista .ar-gear-nivel.n-disputado::before{ background:#C39A3E;box-shadow:0 0 0 2px rgba(195,154,62,.14) }

body.pagina-artista .ar-gear-abrir{
  margin-top:auto;
  padding-top:9px;
  color:#C98A3F;
  font:600 9px/1.2 'Funnel Sans',system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
/* SÓLO UN CHEVRON — 13/09/2026. Andrés: «lo que dice evidencia ponele
   solo un chevron para expandir/contraer». Sin palabra: una punta hacia
   abajo cerrada, hacia arriba abierta. */
/* triangulito lleno, no chevron de línea (Andrés, 13/09: «finito y feo») */
body.pagina-artista .ar-gear-abrir::after{
  content:'';display:inline-block;width:0;height:0;margin-left:2px;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;
  transition:transform .15s ease;
}
body.pagina-artista .ar-gear-details[open] .ar-gear-abrir::after{ transform:rotate(180deg) }

body.pagina-artista .ar-gear-card .ar-ent-mas{
  max-width:none;
  padding:14px !important;
  border-top:1px solid rgba(232,228,220,.10);
  background:rgba(0,0,0,.10);
}
body.pagina-artista .ar-gear-card .ar-ent-det,
body.pagina-artista .ar-gear-card .ar-ent-obra{
  color:#B7AFA4;
  font-size:12.5px;
}
body.pagina-artista .ar-gear-card .ar-ent-cita{ color:#A9A196 }

body.pagina-artista .ar-gear-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:35px;
  padding:8px 12px;
  border-top:1px solid rgba(232,228,220,.10);
  background:rgba(0,0,0,.12);
}
body.pagina-artista .ar-gear-foot .ar-ent-niv,
body.pagina-artista .ar-gear-modelo{
  overflow:hidden;
  color:#8E867B;
  font:500 9.5px/1.35 'Funnel Sans',system-ui,sans-serif !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.pagina-artista .ar-gear-foot .ar-ent-niv{ min-width:0 }
body.pagina-artista .ar-gear-foot .ar-ent-fu{ color:#6F675D !important }
body.pagina-artista .ar-gear-modelo{ flex:none;color:#C98A3F }
body.pagina-artista .ar-gear-foot a:hover,
body.pagina-artista .ar-gear-foot a:hover .ar-ent-fu{ color:#E96B21 !important }

@media (max-width:760px){
  body.pagina-artista .ar-gear-grid{ grid-template-columns:1fr;gap:11px }
  /* En el celular la columna es mas angosta y el alto sigue saliendo de
     la proporcion. El titulo puede ocupar cuatro renglones sin que la
     foto se mueva un pixel. */
  body.pagina-artista .ar-gear-head{ grid-template-columns:128px minmax(0,1fr) !important;min-height:0 }
  body.pagina-artista .ar-gear-card .ar-ent-que{ font-size:14.5px !important }
  body.pagina-artista .ar-gear-info{ padding:12px 13px 9px }
}

@media (prefers-reduced-motion:reduce){
  body.pagina-artista .ar-gear-card,
  body.pagina-artista .ar-gear-abrir::after{ transition:none }
  body.pagina-artista .ar-gear-card:hover{ transform:none }
  /* Quien pidio menos movimiento no quiere que la foto se le mueva. */
  body.pagina-artista .ar-gear-visual.tiene-imagen img:not(.ar-gear-fondo){ transition:none }
  body.pagina-artista .ar-gear-visual-abre:hover img:not(.ar-gear-fondo),
  body.pagina-artista .ar-gear-visual-abre:focus-visible img:not(.ar-gear-fondo){ transform:none }
  .ar-lupa-marco,.ar-lupa-velo,.ar-lupa-pie{ transition:none }
}


/* ── EL LOGO DE LA CASA: 40% MAS GRANDE Y APOYADO EN EL RENGLON
      11/09/2026 ──────────────────────────────────────────────────────
   Dos cosas, y las dos son del mismo bloque: la cabecera de la pagina
   de tienda (`tienda.php`), con banner y sin banner.

   1 · EL TAMAÑO. El logo vectorial de la casa es, adentro de su propia
       pagina, la firma de quien te esta recibiendo — y venia del tamaño
       que tenia cuando todavia vivia adentro de una chapa blanca. Sin
       chapa (regla del 20/08) esa medida quedo chica: el dibujo no toca
       ningun borde y el aire de alrededor lo achica mas. Sube un 40% en
       las cuatro situaciones, con la misma proporcion en todas para que
       una casa no se vea distinta segun la pantalla:
         sin banner  escritorio  110 → 154
         sin banner  celular      84 → 118
         con banner  escritorio   86 → 120  (alto del dibujo)
         con banner  celular      54 → 76   (alto)  ·  132 → 185 (ancho)
       SOLO LOS VECTORIALES. El avatar JPG sigue en su caja cuadrada: un
       logo dibujado crece sin romperse, una foto de 110px estirada a
       154 se ve el doble de sucia. Por eso todo cuelga de `.es-vector`.

   2 · LA ALINEACION. El logo y el texto eran dos bloques sueltos: sin
       banner la cabecera alineaba arriba (`flex-start`) y el logo
       colgaba por debajo del renglon; con banner alineaba por el borde
       de abajo (`flex-end`), que no es el renglon sino el borde inferior
       de la caja de texto — o sea unos pixeles MAS ABAJO de la ultima
       linea, por el descuelgue de las letras y el medio interlineado.
       `last baseline` apoya el logo exactamente sobre la linea base de
       la ultima linea de texto. Es la misma linea sobre la que se apoyan
       las letras, asi que logo y texto dejan de ser dos cosas y pasan a
       ser un renglon.
       No hay numero magico que mantener: lo calcula el navegador y
       sigue siendo correcto si cambia el cuerpo o el interlineado.
       En un navegador que no entienda `last baseline` la declaracion se
       descarta sola y queda la que va arriba (`flex-end`), que es la que
       habia. Por eso van las dos, en ese orden.

   DONDE NO SE TOCA: abajo de 700px y sin banner la cabecera se apila
   (`flex-direction: column`, regla vieja de pulpa_dpp.css). Ahi el eje
   cruzado es el horizontal y una alineacion por linea base no significa
   nada, asi que ese caso queda como estaba. Por eso el bloque de abajo
   arranca en 701px.
   ───────────────────────────────────────────────────────────────────── */

/* — SIN BANNER — */
@media (min-width: 701px) {
  /* POR EL PIE, NO POR LA LINEA BASE — 11/09/2026, segunda vuelta.
     `last baseline` es correcto y esta medido: deja el pie del logo justo
     sobre la linea base del ultimo renglon, o sea 5,3px por encima del
     borde de la caja de texto. Pero el ojo no compara lineas base: compara
     el borde de abajo del dibujo con el borde de abajo del texto, y con
     esos 5,3 sumados al aire que cada logo trae adentro de su propio
     lienzo, el logo se ve flotando. Se alinean los pies. */
  .tienda-cabecera { align-items: flex-end; }
  .tienda-cabecera > .tienda-logo.es-vector {
    width: 154px !important; height: 154px !important;
  }
}
@media (max-width: 700px) {
  /* Apilada: no se toca la alineacion, solo el tamaño. */
  .tienda-cabecera > .tienda-logo.es-vector {
    width: 118px !important; height: 118px !important;
  }
}

/* — CON BANNER, ESCRITORIO — */
@media (min-width: 761px) {
  .tienda-banner > .tienda-cabecera { align-items: flex-end !important; }
  /* La caja se ajusta al dibujo. Sin esto la del bloque de mas arriba
     (154 cuadrados, la medida de la pagina SIN banner) le queda grande al
     logo de 120, y esos 34px muertos debajo estiran la cabecera y le
     roban alto a la foto. Igual que en el celular desde el 05/09. */
  .tienda-banner > .tienda-cabecera .tienda-logo.es-vector {
    width: auto !important; height: auto !important; max-width: 300px !important;
  }
  .tienda-banner .tienda-logo.es-vector img {
    max-height: 120px !important;
  }
}

/* — CON BANNER, CELULAR — negacion exacta, para que no quede la rendija
     de un pixel del 05/09. */
@media not all and (min-width: 761px) {
  .tienda-banner > .tienda-cabecera { align-items: flex-end !important; }
  .tienda-banner > .tienda-cabecera .tienda-logo.es-vector {
    max-width: 185px !important;
    /* El bloque del 05/09 le clavaba `align-self: flex-end` al logo, y
       `align-self` en el hijo le gana a `align-items` del padre: sin
       esto la linea base de arriba no llegaba a aplicarse nunca. */
    align-self: auto !important;
  }
  .tienda-banner > .tienda-cabecera .tienda-logo.es-vector img {
    max-height: 76px !important; max-width: 185px !important;
  }
}


/* ── LA CASA SE PRESENTA UNA VEZ SOLA — 11/09/2026 ─────────────────────
   El banner ES la identidad grafica de la casa: lo arma ella, ocupa el
   ancho de la pantalla y es lo primero que se ve. Al lado, la chapita del
   logo repetia lo mismo. En Lestard era literal —el wordmark gigante en
   el arte y el mismo wordmark en miniatura encima— y en el celular ademas
   COSTABA TEXTO: el logo se llevaba 185 de los 366px de ancho y a la
   descripcion le quedaban 169, asi que el recorte a dos renglones se
   comia la mitad de lo que la casa escribio.

   La misma pieza, un lugar por pantalla:
     · ESCRITORIO — manda el banner. El logo no se dibuja y el nombre
       vuelve como texto sobre la foto (el <h1> que hasta hoy salia
       oculto cuando el logo ya lo decia). Una sola marca: el arte.
     · CELULAR — manda el logo. Va centrado sobre la foto, solo, y el
       texto BAJA abajo del banner, sobre el crema y entero: ahi tiene
       los 366px para el, no hay que recortar nada y el @ y la ciudad
       dejan de pelear por el renglon.
   Es la misma decision del 05/09 con el nombre —«una vez sola»— aplicada
   ahora a la marca.
   ───────────────────────────────────────────────────────────────────── */

/* El renglon perdido. `.tienda-banner` lleva `line-height: 0` para que el
   <img> no arrastre el renglon fantasma, y TODO lo de adentro lo hereda.
   La miga se arreglo el 05/09; `.tienda-links` no, y venia midiendo 0 de
   alto con el texto desbordandole la caja. No se veia porque el texto se
   dibuja igual, pero ese renglon no le sumaba alto a la cabecera. */
.tienda-banner > .tienda-cabecera { line-height: normal; }

@media (min-width: 761px) {
  .tienda-banner > .tienda-marca { display: none; }
}

@media not all and (min-width: 761px) {
  /* LA MARCA, ENCIMA DE LA FOTO SIN COORDENADAS. En vez de posicionarla
     absoluta —lo que pediria saber cuanto mide la miga de arriba— se la
     deja en la columna y se la sube 230px, que es exactamente lo que mide
     la foto. Si un dia cambia ese alto, cambia en los dos lados juntos. */
  .tienda-banner > img      { order: 2; }
  .tienda-banner > .tienda-marca {
    order: 3; position: relative; z-index: 2;
    margin-top: -230px; height: 230px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 34px;
    /* El velo va PAREJO. El degradado de abajo existia porque el texto se
       apoyaba en el pie; con la marca en el centro, un degradado que
       arranca transparente arriba la deja sin fondo justo donde esta. */
    background: rgba(0, 0, 0, .38);
  }
  .tienda-banner::after { display: none !important; }

  .tienda-banner > .tienda-marca .tienda-logo {
    width: auto !important; height: auto !important;
    max-width: 100% !important; background: none !important;
  }
  .tienda-banner > .tienda-marca .tienda-logo img {
    width: auto !important; height: auto !important;
    max-height: 110px !important; max-width: 100% !important;
    object-fit: contain;
  }
  .tienda-banner > .tienda-marca .red-logo-inicial {
    font-size: 64px; color: #fff; font-family: 'Playfair Display', serif;
  }

  /* EL TEXTO BAJA. Deja de estar encima de la foto: vuelve al flujo, al
     crema y a sus colores de siempre. Con eso se cae solo todo lo que
     existia para que se leyera sobre una imagen —la sombra, el blanco, el
     recorte a dos renglones— y la casa recupera su descripcion entera. */
  .tienda-banner > .tienda-cabecera {
    order: 4;
    position: static !important;
    left: auto; right: auto; bottom: auto;
    margin: 0 !important; padding: 15px 12px 0 !important;
    flex-direction: column !important; align-items: flex-start !important;
    gap: 0 !important;
    text-shadow: none !important;
    border-bottom: 0 !important;
  }
  .tienda-banner > .tienda-cabecera .tienda-datos,
  .tienda-banner > .tienda-cabecera .tienda-datos * { color: var(--ar-texto) !important; }
  .tienda-banner > .tienda-cabecera .tienda-datos h1 {
    color: var(--ar-ink) !important; font-size: 23px !important; line-height: 1.15;
  }
  .tienda-banner > .tienda-cabecera .tienda-datos a { color: var(--ar-naranja) !important; }
  .tienda-banner > .tienda-cabecera .tienda-desc {
    display: block !important; -webkit-line-clamp: none !important;
    overflow: visible !important;
    font-size: 14px !important; line-height: 1.55 !important;
    margin: 4px 0 8px !important;
  }
  .tienda-banner > .tienda-cabecera .tienda-links { font-size: 13px !important; }

  /* EL CHIP DEL LOGO NO VA EN EL CELULAR. Es el mismo logo que arriba
     esta centrado sobre la foto (`.tienda-marca`): se dibujan los dos
     porque el servidor no sabe el ancho de la pantalla —leccion del
     05/09— y cada pantalla muestra el suyo. Aca manda el centrado.
     El <h1> no hace falta tocarlo: si el logo dice el nombre, el PHP ya
     lo mando con `ar-oculto`, y eso vale para las dos pantallas. */
  .tienda-banner > .tienda-cabecera .tienda-logo { display: none !important; }
}


/* ── EL TEXTO NO PASA DE LA ALTURA DEL LOGO — 11/09/2026 ───────────────
   Escritorio, pagina SIN banner: ahi el logo sigue siendo la unica marca
   y mide 154. La cabecera, en cambio, venia midiendo 197: el interlineado
   de 1,6 de la descripcion, los 24 de relleno al pie y el aire que suma
   la alineacion por linea base cuando el texto es corto. O sea 43px de
   nada debajo de un bloque que ya se leia, empujando la primera pieza.
   El logo pasa a ser la medida del bloque: el texto vive adentro de su
   alto y no lo pasa. Si algun dia una casa escribe una descripcion muy
   larga, se recorta ahi y no estira la cabecera — la descripcion entera
   igual esta en la pagina de la casa y en el HTML.
   Interlineado de la descripcion: 1,6 → 1,4. Con el logo mas grande al
   lado, 1,6 lo hacia ver desparramado.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 701px) {
  /* EL TOPE VA EN LA DESCRIPCION, NO EN EL BLOQUE. Poniendole
     `overflow: hidden` a `.tienda-datos` el bloque deja de exportar linea
     base —una caja con recorte sintetiza la suya desde el borde— y la
     alineacion de mas arriba se caia sola: el texto quedaba 13px por
     debajo del logo. Acotando la descripcion se consigue lo mismo (el
     bloque no pasa del alto del logo) sin romper nada. */
  .tienda-cabecera > .tienda-datos { max-height: 154px; }
  .tienda-cabecera .tienda-desc {
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tienda-cabecera .tienda-rol { margin-bottom: 8px !important; }
  /* El ultimo renglon no arrastra margen. Cuando la descripcion es lo
     ultimo —casa sin ciudad ni @— esos 8px la empujaban por debajo del
     logo y el bloque parecia colgado. */
  .tienda-cabecera .tienda-datos > :last-child { margin-bottom: 0 !important; }
  /* El relleno al pie era para separar la cabecera de las piezas; con el
     bloque acotado, 24 es el doble de lo que hace falta. */
  .tienda-cabecera { padding-bottom: 14px; }

  /* CON BANNER NO APLICA: ahi no hay logo, asi que no hay medida que
     respetar y el texto se apoya sobre la foto con su propio aire. */
  .tienda-banner > .tienda-cabecera > .tienda-datos {
    max-height: none; overflow: visible;
  }
  .tienda-banner > .tienda-cabecera { padding-bottom: 0; }
}


/* ── EL BANNER QUE YA TRAE LA MARCA — 11/09/2026 ───────────────────────
   La casa lo tilda en Panel → Logos de la red. Tildado, `tienda.php` no
   dibuja el logo (ni en el celular ni en escritorio) y marca el banner
   con `tid-banner-trae`. Lo unico que queda para el CSS es el NOMBRE EN
   TEXTO, y ahi las dos pantallas no se portan igual:
     · ESCRITORIO se ve el banner entero, asi que si el arte dice el
       nombre, el <h1> encima sobra: se esconde.
     · CELULAR NO. La foto se recorta a 4:1 en 230px de alto y el wordmark
       de Lestard, pegado al borde derecho, se lo lleva el recorte — ya
       anotado el 05/09. Un dato que el visitante no puede leer no es un
       dato, asi que ahi el nombre se muestra igual.
   El <h1> nunca se borra: es el unico de la pagina. */
@media (min-width: 761px) {
  .tienda-banner.tid-banner-trae > .tienda-cabecera .tienda-datos h1 {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ── EN EL CELULAR LA MARCA VA AL MEDIO, HAYA BANNER O NO — 11/09/2026 ──
   Con banner ya iba centrada sobre la foto. Sin banner la cabecera se
   apila desde siempre (`flex-direction: column`, pulpa_dpp.css) pero
   arrancaba pegada a la izquierda, con el nombre centrado abajo: el logo
   tiraba para un lado y el texto para el otro. En una columna angosta el
   eje del medio es el unico que se lee como eje. */
@media (max-width: 700px) {
  .tienda-cabecera {
    align-items: center !important;
    text-align: center;
  }
  .tienda-cabecera .tienda-links,
  .tienda-cabecera .red-meta { justify-content: center; }
}

/* ── LA FOTO DEL MÚSICO — 12/09/2026 ──────────────────────────────────
   Chica, redonda, con el crédito a Instagram debajo del nombre. En la
   cabecera de la persona va a la izquierda del título; en el índice es
   un círculo de 28 px antes del nombre, sólo en los que la tienen. */
.ar-art-cab-uno.con-foto{display:flex;gap:18px;align-items:flex-start}
.ar-art-cab-uno .ar-art-cab-txt{min-width:0;flex:1}
.ar-art-foto{flex:0 0 auto;display:block;width:72px;height:72px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(140,130,115,.3);background:rgba(140,130,115,.08)}
.ar-art-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ar-art-foto-cred{margin:0 0 6px;font-size:11px;color:#a49b90;letter-spacing:.02em}
.ar-art-foto-cred a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(140,130,115,.35)}
.ar-art-foto-cred a:hover{color:#E96B21}
.ar-art-indice a.con-foto{align-items:center;padding-top:5px;padding-bottom:5px}
/* 36 px: 28 era diminuta y 52 rompía el ritmo de la lista. !important por el img{max-width} del sitio. */
.ar-art-mini{width:36px !important;height:36px !important;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid rgba(140,130,115,.25);background:rgba(140,130,115,.08)}
@media (max-width:600px){
  .ar-art-foto{width:56px;height:56px}
}

/* ── LA IMAGEN DEL EQUIPO ES UN LINK — 12/09/2026 ──
   Lleva a modelo.php: todos los músicos que usaron ese modelo. Al pasar
   el mouse aparece la pista «quién más ↗» al pie de la imagen. */
.ar-gear-visual-link{position:relative;text-decoration:none;color:inherit;cursor:pointer;overflow:hidden}
.ar-gear-visual-link:hover,.ar-gear-visual-link:focus{outline:none;box-shadow:0 0 0 2px #E96B21}
.ar-gear-visual-hint{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:3px 0;text-align:center;
  font:500 9.5px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(233,107,33,.92);transform:translateY(100%);transition:transform .15s}
.ar-gear-visual-link:hover .ar-gear-visual-hint,.ar-gear-visual-link:focus .ar-gear-visual-hint,
.ar-gear-visual-abre:hover .ar-gear-visual-hint,.ar-gear-visual-abre:focus-visible .ar-gear-visual-hint{transform:none}

/* ── ZOOM AL PASAR EL MOUSE — 19/09/2026 ────────────────────────────
   Pedido de Andres, y es el mismo gesto que eligio para la mesa de
   figuritas el 14/09: «nada de aro dorado al pasar el mouse, solo zoom».

   Ahora que el cuadro tiene la forma de la foto, la foto lo llena justo:
   al agrandarla un poco, lo que sobra se va por los cuatro lados parejo y
   no aparece ningun borde. Con el cuadro cuadrado de antes esto no se
   podia hacer sin que se viera el fondo asomando.

   4% alcanza. Mas que eso, en una foto de 143 px de ancho, se nota como
   un salto y no como un acercamiento. El `transform-origin` es el centro
   porque el recorte, cuando hay, es centrado. */
/* SIN `will-change`: son hasta 64 fotos en la pagina de un artista y
   promoverlas todas a capa propia se paga en el scroll del celular, que
   es justo lo que se estuvo limpiando esta semana. La transicion sola
   alcanza. */
/* ── EL CUADRO ES UN BOTON QUE ABRE LA FOTO — 19/09/2026 ───────────
   Se probo una lupa que seguia al mouse y Andres le encontro la falla:
   con el punto de crecimiento pegado al cursor, una esquina nunca se
   puede llevar al centro. No es cuestion de ajustar el zoom, es como
   funciona: para centrar la esquina el cursor tendria que salirse del
   cuadro. Se cambio por un modal, que ademas anda en el celular. */
body.pagina-artista .ar-gear-visual-abre{
  appearance:none;border:0;font:inherit;color:inherit;text-align:inherit;
  cursor:zoom-in;
}
/* El unico movimiento que queda en la tarjeta: un acercamiento corto que
   dice «esto se abre», sin tapar nada ni mover la grilla. */
body.pagina-artista .ar-gear-visual.tiene-imagen img:not(.ar-gear-fondo){
  transform-origin:50% 50%;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
body.pagina-artista .ar-gear-visual-abre:hover img:not(.ar-gear-fondo),
body.pagina-artista .ar-gear-visual-abre:focus-visible img:not(.ar-gear-fondo){
  transform:scale(1.06);
}
body.pagina-artista .ar-gear-visual-abre:focus-visible{
  outline:2px solid #E96B21;outline-offset:-2px;
}

/* ── LA FOTO CRECE DONDE ESTA ───────────────────────────────────────
   Andres: «el modal no en otra pantalla sino sobre la misma foto, en la
   misma pantalla». La primera version era una pantalla aparte —fondo
   negro, la foto al medio— y eso es irse de la pagina. Esto crece desde
   el lugar exacto de la foto chica y se queda ahi.
   El JS escribe left/top/width/height; el CSS solo anima entre esos dos
   valores. Animar medidas y no `transform` es a proposito: con
   `transform` la foto se deforma mientras crece, y con medidas reales
   mantiene su proporcion en todo el camino. */
.ar-lupa-velo{
  position:fixed;inset:0;z-index:8990;
  background:rgba(12,10,9,0);
  transition:background .26s ease;
}
.ar-lupa-velo[hidden]{ display:none }
/* Apenas un velo: oscurece lo justo para que la foto grande se despegue,
   sin que parezca que te fuiste a otro lado. */
.ar-lupa-velo.abierto{ background:rgba(12,10,9,.62) }

.ar-lupa-marco{
  position:fixed;z-index:9000;
  border-radius:4px;
  overflow:visible;
  cursor:zoom-out;
  transition:left .28s cubic-bezier(.22,.61,.36,1),
             top .28s cubic-bezier(.22,.61,.36,1),
             width .28s cubic-bezier(.22,.61,.36,1),
             height .28s cubic-bezier(.22,.61,.36,1),
             box-shadow .28s ease,
             border-radius .28s ease;
}
.ar-lupa-marco[hidden]{ display:none }
.ar-lupa-marco.abierta{
  border-radius:8px;
  box-shadow:0 26px 64px rgba(0,0,0,.62);
}
.ar-lupa-marco img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  border-radius:inherit;
  background:#15120f;
}
/* Al terminar de crecer la foto entra entera; mientras crece sigue
   llenando el cuadro, que es lo que hace que la transicion no salte. */
.ar-lupa-marco.abierta img{ object-fit:contain }

.ar-lupa-pie{
  position:absolute;left:0;right:0;top:100%;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:9px 2px 0;
  opacity:0;transition:opacity .2s ease .12s;
  pointer-events:none;
}
.ar-lupa-marco.abierta .ar-lupa-pie{ opacity:1;pointer-events:auto }
.ar-lupa-tit{ font:600 14px/1.35 Georgia,serif;color:#F2EEE6 }
.ar-lupa-link{
  font:500 11.5px/1.35 'Funnel Sans',system-ui,sans-serif;letter-spacing:.04em;
  color:#E96B21;text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(233,107,33,.45);
}
.ar-lupa-link:hover{ border-bottom-color:#E96B21 }
.ar-lupa-link[hidden]{ display:none }

/* Mientras la grande esta abierta, el hueco de la chica queda marcado:
   asi se ve de donde salio y adonde va a volver. */
body.pagina-artista .ar-gear-visual.ar-lupa-origen img{ opacity:.18 }

/* ── CARAS EN «MÚSICOS CON …» (modelo.php) — 12/09/2026 ── */
.ar-quien-quien.con-foto{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ar-quien-foto{flex:0 0 auto;display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(140,130,115,.3);background:rgba(140,130,115,.08)}
.ar-quien-foto img{width:100% !important;height:100% !important;object-fit:cover;display:block}

/* ── MODO EDICIÓN (admin) en la página del músico — 12/09/2026 ──
   Bajo el mouse, un borde punteado naranja dice «acá podés pegar». */
.ar-art-foto-vacia{display:block;width:72px;height:72px;border-radius:50%;border:1px dashed rgba(233,107,33,.6);background:rgba(233,107,33,.06)}
[data-edita-gear].ar-edita-sobre .ar-gear-visual,[data-edita-slug].ar-edita-sobre .ar-cara{outline:2px dashed rgba(233,107,33,.75);outline-offset:2px}
.ar-edita-aviso{position:absolute;left:8px;top:8px;z-index:3;font:500 10.5px/1 system-ui,sans-serif;letter-spacing:.04em;
  padding:4px 7px;border-radius:3px;background:#E96B21;color:#fff}
.ar-edita-aviso.mal{background:#a33}
[data-edita-gear]{position:relative}
[data-edita-slug]{position:relative}

/* ── LA FOTO DEL MODELO en «Músicos con …» — 12/09/2026 ── */
/* Acá la foto LLENA el cuadro (Andrés, 12/09): es la foto del modelo en
   grande, no una miniatura en una ficha; cuadro cuadrado y recorte
   centrado, sin el fondo desenfocado. */
.ar-mod-foto{flex:0 0 auto;position:relative;display:block;width:160px;height:160px;border-radius:6px;overflow:hidden;
  background:#15120f;border:1px solid rgba(140,130,115,.25)}
.ar-mod-foto img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover;object-position:center;z-index:1}
.ar-mod-foto img.ar-gear-fondo{display:none}
.ar-mod-foto-vacia{border:1px dashed rgba(233,107,33,.6);background:rgba(233,107,33,.06)}
.ar-art-cab-uno.con-foto .ar-mod-foto{margin-right:2px}
@media (max-width:600px){ .ar-mod-foto{width:96px;height:96px} }

/* ── MENÚ DE BOTÓN DERECHO Y EDICIÓN EN LA FICHA (admin) — 12/09/2026 ── */
.ar-menu{position:fixed;z-index:9000;min-width:220px;padding:6px;border-radius:6px;background:#1c1815;border:1px solid rgba(233,107,33,.45);
  box-shadow:0 10px 30px rgba(0,0,0,.5);display:flex;flex-direction:column}
.ar-menu[hidden]{display:none}
.ar-menu button{text-align:left;font:500 13px/1.2 system-ui,sans-serif;padding:9px 12px;border:0;border-radius:4px;background:transparent;color:#f4efe9;cursor:pointer}
.ar-menu button:hover{background:rgba(233,107,33,.18);color:#fff}
.ar-menu button.malo{color:#e08a7a;border-top:1px solid rgba(255,255,255,.08);margin-top:4px;border-radius:0 0 4px 4px}
.ar-menu button.malo:hover{background:rgba(180,50,40,.25)}
body.pagina-artista .ar-gear-card.ar-sacada{opacity:.35;filter:grayscale(1)}
.ar-edit-form{grid-column:1/-1;padding:12px 14px 12px;border-top:1px dashed rgba(233,107,33,.5);background:rgba(233,107,33,.05);
  display:flex;flex-direction:column;gap:8px;font:400 13px/1.4 system-ui,sans-serif}
.ar-edit-form label{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ar-edit-form label>span{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#a49b90}
.ar-edit-form input,.ar-edit-form textarea,.ar-edit-form select{font:inherit;padding:6px 8px;border:1px solid rgba(140,130,115,.35);border-radius:3px;
  background:#15120f;color:#f4efe9;width:100%}
.ar-edit-form input:focus,.ar-edit-form textarea:focus,.ar-edit-form select:focus{outline:none;border-color:#E96B21}
.ar-edit-form textarea{min-height:52px;resize:vertical}
.ar-edit-fila{display:flex;gap:8px;flex-wrap:wrap}
.ar-edit-fila label{flex:1 1 90px}
.ar-edit-check{flex-direction:row !important;align-items:center;gap:8px !important}
.ar-edit-check input{width:auto !important;accent-color:#E96B21}
.ar-edit-pie{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.ar-edit-fuente{font-size:11px;color:#a49b90;flex:1}
.ar-edit-btn{font:600 11px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border:1px solid rgba(140,130,115,.4);border-radius:3px;background:transparent;color:#f4efe9;cursor:pointer}
.ar-edit-btn.primario{background:#E96B21;border-color:#E96B21;color:#fff}

/* ══ LA CARA UNIFICADA — 12/09/2026 ══
   Un solo dibujo para la persona en todo el eje artista↔gear: círculo,
   borde fino, fondo oscuro, foto con recorte centrado o iniciales.
   Tamaños: 56 en listas, 96 en la cabecera del músico. */
.ar-cara{flex:0 0 auto;position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;
  background:#1c1815;border:1px solid rgba(140,130,115,.3);text-decoration:none;color:inherit;vertical-align:middle}
.ar-cara img{width:100% !important;height:100% !important;object-fit:cover;object-position:center;display:block}
.ar-cara-56{width:56px;height:56px}
.ar-cara-96{width:96px;height:96px}
.ar-cara-ini{font:600 18px/1 'Funnel Sans',system-ui,sans-serif;letter-spacing:.04em;color:#a49b90}
.ar-cara-96 .ar-cara-ini{font-size:30px}
a.ar-cara:hover{border-color:#E96B21}
body.pagina-artista [data-edita-slug] .ar-cara-sin{border:1px dashed rgba(233,107,33,.6);background:rgba(233,107,33,.06)}
/* la cabecera del músico: cara de 96 y texto a la derecha */
.ar-art-cab-uno.con-foto{gap:20px}
/* «Músicos con…»: cara + nombre en la misma línea */
.ar-quien-quien.con-foto{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── ALTA DE EQUIPO desde el menú (admin) — 12/09/2026 ── */
.ar-menu button.ar-menu-agregar{color:#E96B21;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px;border-radius:4px 4px 0 0}
/* BORRAR A LA PERSONA — 19/09/2026. Es el unico del menu que no habla de
   la ficha de abajo del mouse sino de toda la pagina, asi que se separa
   del resto y se apaga hasta que uno lo busca. */
.ar-menu button.ar-menu-persona{color:#c9726a;border-top:1px solid rgba(255,255,255,.14);margin-top:6px;padding-top:11px;opacity:.72}
.ar-menu button.ar-menu-persona:hover{opacity:1;background:rgba(180,50,40,.3);color:#f0b6ac}
.ar-alta-form{margin:0 0 22px;border:1px dashed rgba(233,107,33,.5);border-radius:6px}
.ar-alta-tit{font:600 12px/1 'Funnel Sans',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#E96B21;margin-bottom:4px}

/* ── CARAS EN EL BLOQUE DE LA FICHA (pieza.php) — 12/09/2026 ──
   Fila de círculos encimados arriba del párrafo. Fondo claro de la ficha:
   borde del color del papel para que se separen. */
.ar-quien-caras{list-style:none;margin:2px 0 14px;padding:0 0 0 6px;display:flex;flex-wrap:wrap;align-items:center}
.ar-quien-caras li{margin-left:-12px}
.ar-quien-caras li:first-child{margin-left:0}
.ar-quien-caras a{display:block;border-radius:50%}
.ar-quien-caras img{width:56px !important;height:56px !important;border-radius:50%;object-fit:cover;display:block;
  border:3px solid #fff;background:#eee;box-shadow:0 1px 5px rgba(0,0,0,.25);transition:transform .18s,border-color .18s}
.piel-archivo .ar-quien-caras img{border-color:#1a1614;background:#2a2420}
.ar-quien-caras a:hover img{transform:translateY(-5px) scale(1.08);border-color:#E96B21;position:relative;z-index:2}
@media (max-width:600px){ .ar-quien-caras img{width:44px !important;height:44px !important;border-width:2px} .ar-quien-caras li{margin-left:-10px} }

/* «Músicos con…»: el título apoyado en la base de la foto (Andrés, 12/09) */
.ar-mod-cab.con-foto{align-items:flex-end}
.ar-mod-cab.con-foto .ar-art-cab-txt h1{margin-bottom:6px !important}

/* «Reportar un error», en voz baja (Andrés, 13/09): más chico y más gris. */
body.pagina-artista .ar-ent-corr{font-size:9.5px !important;letter-spacing:.04em;color:#7c756c !important;border-bottom-color:rgba(140,130,115,.3)}
body.pagina-artista .ar-ent-corr:hover{color:#E96B21 !important}

/* ── FOTOS MUY ALTAS O MUY ANCHAS: ENTERAS — 13/09/2026 ──
   .entera la pone artista.php midiendo el archivo. La foto entra completa
   con aire, y detrás la misma foto desenfocada llena el cuadro. */
body.pagina-artista .ar-gear-visual.entera img{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain}
body.pagina-artista .ar-gear-visual.entera img.ar-gear-fondo{display:block;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);object-fit:cover;filter:blur(14px) brightness(.45) saturate(.8);z-index:0}

/* FOTO DE REFERENCIA REPETIDA — 13/09/2026. La misma foto de modelo en
   varias fichas de un artista: la primera limpia, las demás atenuadas y
   rotuladas. Al pegar la foto real sobre la ficha, la clase desaparece. */
body.pagina-artista .ar-gear-visual.repetida img:not(.ar-gear-fondo){ opacity:.42;filter:grayscale(.55) }
body.pagina-artista .ar-gear-visual.repetida .ar-gear-fondo{ opacity:.25 }
body.pagina-artista .ar-gear-visual.repetida:hover img:not(.ar-gear-fondo){ opacity:.7;filter:grayscale(.2) }
body.pagina-artista .ar-gear-ref{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  font:500 10px/1.25 "Inter",system-ui,sans-serif;letter-spacing:.04em;
  color:rgba(232,228,220,.78);text-align:center;
  padding:4px 6px;border-radius:6px;
  background:rgba(21,18,15,.72);backdrop-filter:blur(3px);
  pointer-events:none;
}
body.pagina-artista .ar-gear-visual-link.repetida:hover .ar-gear-ref{ opacity:0 }

/* MARCO DEL COLOR DE LA FOTO — 13/09/2026. Cuando el JS ya pintó el
   cuadro con el color de los bordes de la foto, el desenfoque de atrás
   se apaga y la foto entra entera sin aire: el marco ES la foto. */
body.pagina-artista .ar-gear-visual.entera.con-color img.ar-gear-fondo{ display:none }
body.pagina-artista .ar-gear-visual.entera.con-color img:not(.ar-gear-fondo){ inset:0;width:100%;height:100%;object-fit:contain }

/* UN SOLO TÍTULO EN LA FICHA — 13/09/2026. Andrés: «unir marca y modelo
   con la misma tipo, todo un solo bloque». La marca deja de ser el
   rotulito gris de arriba: marca, familia y modelo corren en la misma
   serif, como se nombra el equipo al hablar. Lo que sigue a la marca va
   separado por un punto medio. */
body.pagina-artista .ar-gear-card .ar-gear-titulo{
  display:block;color:#F2EEE6;
  font:600 15px/1.28 Georgia,serif;
}
body.pagina-artista .ar-gear-card .ar-gear-titulo .ar-ent-marca,
body.pagina-artista .ar-gear-card .ar-gear-titulo .ar-ent-que{
  display:inline !important;margin:0 !important;
  font:inherit !important;letter-spacing:0 !important;text-transform:none !important;
  color:inherit !important;
}
/* el punto sólo cuando hay familia («Marshall JCM800 · 1986»); sin familia
   el modelo sigue a la marca a secas («Gibson GA-5»). */
body.pagina-artista .ar-gear-card .ar-gear-titulo .ar-ent-que.con-punto::before{ content:'· ';color:#8E867B }
@media (max-width:820px){
  body.pagina-artista .ar-gear-card .ar-gear-titulo{ font-size:14.5px }
}

/* ══ LA TIRA DE LA PORTADA — 13/09/2026 ═══════════════════
   Reemplaza la mesa de fotos del 13/09 a la mañana. Eran dos listas —los
   circulitos de los músicos a la izquierda y las polaroids posicionadas en
   absoluto a la derecha— y en el teléfono las dos se cortaban contra el
   borde: el envoltorio flex le puso `flex:0 0 auto` a las caras, así que
   medían lo que mide su contenido y el `overflow-x:auto` se quedó sin nada
   que scrollear.

   Ahora es UNA cinta, la misma en el celular y en la compu: cara → su
   gear → cara → su gear, encimados y con las copias inclinadas. Camina
   sola. Nada de scroll horizontal adentro del vertical — eso ya se
   descartó una vez acá, en el panel de filtros de buscar.php: dos scrolls
   peleando por el mismo gesto. */
.ar-ah-mesa3{margin:22px 0 18px;padding:46px 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ar-ah-mesa3::-webkit-scrollbar{display:none}
.ar-ah-lonja{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  width:max-content;height:143px}
/* alturas distintas y pisadas: si las tres midieran igual y estuvieran
   separadas, el montón se vuelve a leer como tres renglones */
.ar-ah-l2{height:153px;margin-top:-34px}
.ar-ah-l3{height:139px;margin-top:-30px}
.ar-ah-mesa3.lista .ar-ah-lonja{animation:ar-ah-rodar 120s linear infinite}
.ar-ah-l2{padding-left:46px}
.ar-ah-mesa3.lista .ar-ah-l2{animation:ar-ah-rodar-alreves 120s linear infinite}
.ar-ah-l3{padding-left:22px}
/* la duración real la calcula el JS: px por segundo, no segundos */
.ar-ah-mesa3:hover .ar-ah-lonja,.ar-ah-mesa3.quieta .ar-ah-lonja{animation-play-state:paused}
@keyframes ar-ah-rodar{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes ar-ah-rodar-alreves{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){.ar-ah-mesa3.lista .ar-ah-lonja{animation:none}}
/* cada figurita: su inclinación, su altura sobre la mesa, su tamaño y a
   quién tapa. Todo sale del md5 de la foto, en el PHP. */
.ar-ah-it{flex:0 0 auto;position:relative;margin-left:var(--dx,-14px);z-index:var(--z,1);
  transform:translateY(var(--y,0px)) rotate(var(--r,0deg)) scale(calc(var(--s,100) / 100))}
.ar-ah-it a{display:block;transition:transform .18s}
.ar-ah-it:hover,.ar-ah-it:focus-within{z-index:20}
.ar-ah-cara img{display:block;width:114px !important;height:114px !important;border-radius:50%;object-fit:cover;
  border:3px solid #14110f;background:#1c1815;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.ar-ah-cara a:hover,.ar-ah-cara a:focus{transform:scale(1.14)}
/* sin aro dorado al pasar por encima (Andrés, 14/09): la figurita ya se
   agranda, el aro encima era ruido */
.ar-ah-gear a{padding:4px 4px var(--pb,6px);background:#f4efe9;border-radius:2px;
  box-shadow:0 6px 16px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4)}
.ar-ah-gear img{display:block;width:118px !important;height:118px !important;object-fit:cover;border-radius:1px;background:#1c1815}
.ar-ah-gear a:hover,.ar-ah-gear a:focus{transform:scale(1.14)}
.ar-ah-crece{margin:2px 0 0;max-width:640px;font-size:14px;line-height:1.55;color:#b7aea3}
.ar-ah-crece a{color:#e8a463;text-decoration:none;border-bottom:1px solid rgba(232,164,99,.4)}
.ar-ah-crece a:hover{color:#f4efe9;border-bottom-color:currentColor}
@media (max-width:700px){
  .ar-ah-mesa3{margin:16px 0 14px;padding:26px 0}
  .ar-ah-lonja{height:70px}
  .ar-ah-l2{height:76px;margin-top:-16px}
  .ar-ah-l3{height:68px;margin-top:-14px}
  .ar-ah-l2{padding-left:34px}
  .ar-ah-l3{padding-left:16px}
  .ar-ah-it{margin-left:-11px}
  .ar-ah-cara img{width:50px !important;height:50px !important;border-width:2px}
  .ar-ah-gear img{width:55px !important;height:55px !important}
  .ar-ah-cara a:hover,.ar-ah-gear a:hover{transform:none}
}

/* LLAVE DE MAS AL FINAL — encontrada el 15/09/2026 contando llaves
   antes de subir. El archivo cerraba con DOS `}`: la del @media y una
   suelta. El navegador la ignora —CSS se recupera de eso— asi que no
   rompia nada, pero deja el archivo desbalanceado y el dia que alguien
   agregue reglas al final se come el bloque sin darse cuenta. */


/* ══════════════════════════════════════════════════════════════════════
   LA CHAPA DE «INGRESO RECIENTE» EN EL CELULAR — 15/09/2026
   ══════════════════════════════════════════════════════════════════════
   VA AL FINAL DEL ARCHIVO, Y ÉSA ES LA MITAD DEL ARREGLO.
   La primera versión de esto vivía dentro del @media de arriba, al lado
   del `top`/`left` de la chapa, que es donde uno lo buscaría. No hacía
   NADA, y el motivo es de manual: más abajo —donde se achican las
   chapitas para todo el sitio— hay un `font-size: 8px !important` sobre
   los mismos selectores. Un @media NO suma especificidad. Entre dos
   reglas igual de específicas y las dos con !important, gana la que está
   más abajo en el archivo, esté o no adentro de una consulta de medios.
   El `top`/`left` de arriba sí funciona porque nadie los vuelve a tocar
   después; el tamaño de letra sí. Por eso esto va último.

   EL NÚMERO QUE LO EXPLICA. Medido, no estimado: con 8px y .12em la
   chapa mide 107px de ancho, la misma en todas las pantallas. En el
   escritorio la foto tiene ~280 y eso es el 38%: una marca al margen,
   que es lo que se buscaba. En un teléfono la tarjeta mide ~170 y esos
   mismos 107 son el 63% — deja de ser una marca y pasa a ser un titular
   arriba de la pieza.

   Y ADEMÁS CHOCABA. El corazón del celular es una caja de 32 a 10 del
   margen, o sea que su borde izquierdo cae a 42 del borde derecho de la
   tarjeta: en 390 eso son 128, y la chapa terminaba en 14 + 107 = 121.
   Siete píxeles. En un teléfono de 360 la tarjeta mide ~164 y el corazón
   arranca en 122: se tocan.

   A 7px con .08em la chapa mide 89: el 52% de la tarjeta y 25px de aire
   antes del corazón (19 en el teléfono más angosto).

   SE ACHICA LA CHAPA, NO EL TEXTO. Abreviar a «NUEVO» era la salida
   fácil y está descartada desde que se escribió el chip: en el sitio
   «nuevo» significa sin estrenar, y una guitarra del 62 subida anteayer
   no es nueva.

   `.card-chips` —el contenedor— queda AFUERA del selector a propósito:
   darle padding es el bug de la chapita negra vacía que ya se arregló
   una vez. `[class*="card-chip-"]`, con el guion final, no lo alcanza.

   EL `top` NO SE TOCA. El alto pasa de 14 a 13, así que el centro se
   corre medio píxel contra el del corazón: no se ve, y mover el número
   obliga a recalcular la cuenta que ya está escrita arriba. */
@media (max-width: 700px) {
  .card-chip-nuevo, .card-chip-verif, .card-chip, [class*="card-chip-"], .ar-chapa {
    font-size: 7px !important;
    letter-spacing: .08em !important;
    padding: 3px 5px !important;

    /* ── DOS RENGLONES, Y SIN TOCAR EL PHP ─────────────────────────────
       `width: min-content` deja la caja del ancho de la palabra más
       larga —RECIENTE— y el renglón se parte solo en el espacio. No hay
       que meter un <br> ni una clase nueva en `card_pieza.php`: el texto
       sigue siendo un solo string, se lee entero en el buscador y en un
       lector de pantalla, y el día que la etiqueta cambie de palabras se
       vuelve a partir sola donde corresponda.
       El `white-space: normal` está por las dudas: si alguna regla de
       arriba le pone `nowrap`, el min-content no alcanza y la caja queda
       angosta con el texto desbordando. */
    width: min-content !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }

  /* EL CENTRO SE RECALCULA, PORQUE LA CHAPA CRECIÓ A LO ALTO.
     El corazón del celular es una caja de 32 a 10 del margen: su centro
     cae a 26 del tope. La chapa de un renglón medía 14 y por eso el top
     era 19 (26 − 7). Con dos renglones de 7px a 1.3 más 6 de padding
     mide ~25, así que el top baja a 26 − 12,5 ≈ 14 para que los dos
     centros sigan coincidiendo, que es lo que pidió Andrés. */
  .card-chip-nuevo, .card-chip-verif, .card-chip, [class*="card-chip-"], .ar-chapa,
  .card-chips { top: 14px !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   EL SELLO GIRATORIO — 16/09/2026
   ══════════════════════════════════════════════════════════════════════
   VA AL FINAL DEL ARCHIVO por la misma razón que la chapa de «Ingreso
   reciente»: un @media no suma especificidad y acá abajo no lo pisa
   nadie. La lección ya costó un intento.

   LA HUELLA GIRA AL REVÉS Y MÁS LENTO QUE EL TEXTO — 48s contra 22.
   Las dos cosas importan: para el mismo lado se lee como un solo disco
   flojo, y al mismo ritmo parece un error. En contra y a menos de la
   mitad, cada una se lee aparte y el conjunto parece un mecanismo.
   Es una animación infinita sobre una foto, así que respeta
   prefers-reduced-motion: quien pidió que nada se mueva ve el sello
   quieto, que se lee igual. */
.pulpa-sello { position: relative; display: inline-block; width: 120px; height: 120px; }
.pulpa-sello svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pulpa-sello-aro { transform-origin: 50% 50%; animation: pulpa-sello-gira 22s linear infinite; }
.pulpa-sello-aro text {
  font: 600 8px 'Helvetica Neue', Arial, sans-serif;
  text-transform: uppercase;
  fill: #f2ede4;
}
.pulpa-sello-huella {
  position: absolute; inset: 0; margin: auto; width: 45%; height: 45%;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  animation: pulpa-sello-gira-inv 48s linear infinite;
}
@keyframes pulpa-sello-gira     { to { transform: rotate(360deg); } }
@keyframes pulpa-sello-gira-inv { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pulpa-sello-aro, .pulpa-sello-huella { animation: none; }
}

/* EN EL BANNER DE LA CASA.
   La sombra no es decoración: el banner lo elige la casa y puede ser una
   foto clara —el taller de GT con la pared blanca— o una casi negra. Un
   texto crema sin sombra desaparece en la primera. */
.tienda-banner { position: relative; }
.pulpa-sello.sello-en-banner {
  position: absolute; right: 18px; bottom: 16px; z-index: 2;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
/* EN EL CELULAR NO VA. El banner ya lleva el logo de la casa centrado
   encima: dos marcas sobre la misma foto es lo que se sacó el 11/09. */
@media (max-width: 900px) { .pulpa-sello.sello-en-banner { display: none; } }


/* ── LA SECCIÓN DE COMPRADORES: JERARQUÍA DADA VUELTA — 16/09/2026 ──
   `.ar-puerta h3` pide 27px, pero la regla global de la ficha
   `.dpp-body h3, main h3 { font-size:15px !important }` la pisa: en
   producción «Contactá con quien lo tiene» medía 15px y el párrafo 16px.
   Se corrige SÓLO este bloque, con una clase propia y sin tocar la
   global (afecta a todas las pantallas). */
.ar-puertas .ar-puerta h3.ar-puerta-tit-busca {
  font-size: 30px !important; line-height: 1.15 !important; letter-spacing: .03em !important;
  text-transform: none !important;
}
@media (max-width: 900px) {
  .ar-puertas .ar-puerta h3.ar-puerta-tit-busca { font-size: 25px !important; }
}

/* ── LA PLACA EDITORIAL DEL CARRUSEL — 16/09/2026 ──────────────────────
   Primer slide. Sin kicker. Título en dos renglones del MISMO cuerpo y
   peso (el salto viene en el texto: white-space pre-line), sin
   mayúsculas, 44–48px en escritorio y 30–34 en el celular; la frase de
   apoyo claramente más chica. El botón «Explorar piezas» sí se muestra
   (los otros mensajes lo esconden). Las reglas de hero-mensaje siguen
   mandando en lo demás. */
.piel-archivo .ar-hero.hero-editorial .ar-hero-txt h1 {
  white-space: pre-line;
  text-transform: none !important;
  /* 16/09 (4) — Andrés: «el contenedor del titulo estrechalo, es muy
     largo». Baja el cuerpo (46 → 40) y la medida: el bloque mide unos
     720px en vez de 830, sigue en dos renglones. */
  font-size: clamp(28px, 2.9vw, 40px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  /* Andrés (16/09): el contenedor del titulo, angosto como el del texto
     de abajo. Cada oracion se parte en dos renglones parejos (balance) y
     el salto del punto sigue siendo el unico deliberado. */
  /* 24ch, medido en produccion: «En PULPA, encontrar la pieza» entra
     entero en el primer renglon y «es solo el comienzo.» en el segundo.
     Sin balance: repartia las palabras y rompia ese corte. */
  max-width: 24ch !important;
  text-wrap: initial !important;
}
.piel-archivo .ar-hero.hero-editorial .ar-hero-frase { font-size: 16px; max-width: 560px; }
/* La oración final va en su propio renglón, balanceada: pegada al
   párrafo dejaba «compras.» solo en la última línea (16/09, Andrés:
   «quedó mal el espaciado»). */
.piel-archivo .ar-hero.hero-editorial .ar-hero-frase { text-wrap: balance; }
.piel-archivo .ar-hero.hero-editorial .ar-hero-frase-fin { font-weight: 500; color: #fff; display: block; margin-top: 8px; text-wrap: balance; }
/* NO hay variante hero-claro: la frase de apoyo va siempre blanca (la
   regla de arriba lo fuerza con !important), así que la oración final en
   oscuro sobre foto clara quedaba invisible — era el «fantasma» que
   Andrés vio el 16/09. */
/* Y desde el 16/09 TODOS los mensajes pueden llevar boton (el cta de su
   puerta); la regla vieja `.hero-mensaje .ar-hero-ver{display:none}` se
   gana aca. Sin texto, el JS le pone [hidden]. */
.piel-archivo .ar-hero.hero-mensaje .ar-hero-ver { display: inline-flex !important; }
.piel-archivo .ar-hero.hero-mensaje .ar-hero-ver[hidden] { display: none !important; }
@media (max-width: 700px) {
  .piel-archivo .ar-hero.hero-editorial .ar-hero-txt h1 { font-size: 32px !important; line-height: 1.12 !important; }
  .piel-archivo .ar-hero.hero-editorial .ar-hero-frase { font-size: 14px; }
}

/* ── LA PLACA DE COLECCIONES NO ENTRABA CON EL BOTÓN — 16/09/2026 ────
   Desde que los mensajes llevan botón, Colecciones (título de tres
   renglones a 48px + siete renglones de apoyo a 34ch + botón) se pasaba
   del alto del hero y el botón salía cortado. El texto no se toca: el
   título baja de cuerpo y el apoyo se ensancha para que caiga en cuatro
   o cinco renglones. Sólo para los mensajes que no son la editorial. */
.piel-archivo .ar-hero.hero-mensaje:not(.hero-editorial) .ar-hero-txt h1 {
  font-size: clamp(24px, 2.3vw, 36px) !important;
  line-height: 1.1 !important;
  max-width: 24ch !important;
  margin-bottom: 14px !important;
}
.piel-archivo .ar-hero.hero-mensaje:not(.hero-editorial) .ar-hero-specs { max-width: 50ch !important; margin-bottom: 18px !important; }
.piel-archivo .ar-hero.hero-mensaje:not(.hero-editorial) .ar-hero-frase { max-width: 50ch; font-size: 15px !important; line-height: 1.5 !important; }
@media (max-width: 700px) {
  .piel-archivo .ar-hero.hero-mensaje:not(.hero-editorial) .ar-hero-txt h1 { font-size: 24px !important; }
  .piel-archivo .ar-hero.hero-mensaje:not(.hero-editorial) .ar-hero-frase { font-size: 13.5px !important; }
}

/* ── LA BIENVENIDA, EN DOS RENGLONES — 16/09/2026 ─────────────────────
   «Cada pieza tiene una historia. / PULPA hace que no se pierda.» Igual
   que la editorial: el salto viene en el texto (pre-line) y la medida
   deja entrar cada oracion entera (medido en produccion, 26ch). */
.piel-archivo .ar-hero.hero-bienvenida .ar-hero-txt h1 {
  white-space: pre-line;
  max-width: 28ch !important;
  text-wrap: initial !important;
}


/* ══════════════════════════════════════════════════════════════════════
   EL CHIP DE ESTADO DE LA TARJETA — 23/09/2026
   Reservada · Vendida · Colección personal / No está en venta / Backline.
   Mismo lugar, tamaño y letra que «Ingreso reciente» (lo hereda de la
   regla [class*="card-chip-"]); sólo cambia el color.
   ══════════════════════════════════════════════════════════════════════ */
.card-chip-estado.card-faja-vendida   { background: #c4503c !important; color: #fff !important; }
.card-chip-estado.card-faja-reservada { background: var(--ar-ink) !important; color: #fff !important; }
.card-chip-estado.card-faja-archivo   { background: #f7f3ed !important; color: #1a1208 !important; }
/* En la ficha: el renglón de reservada, arriba del precio. */
.dpp-reservada { margin: 0 0 12px; }
.dpp-reservada b {
  display: inline-block;
  padding: 5px 10px;
  background: #1a1208;
  color: #f7f3ed;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 2px;
}
.dpp-reservada span { display: block; margin-top: 6px; font-size: 11.5px; color: #6b5d4f; }

/* ── UNA SOLA PUERTA — 25/09/2026 ─────────────────────────────────────
   Con las etiquetas arriba, de las dos puertas queda sólo «Colecciones
   privadas». Sin la segunda, la grilla de dos columnas con la línea en el
   medio la dejaba arrinconada a la izquierda: va sola y centrada. */
.ar-puertas.ar-puertas-una .wrap { display: block; }
.ar-puertas.ar-puertas-una .wrap::before { display: none; }
.ar-puertas.ar-puertas-una .ar-puerta { max-width: 640px; margin: 0 auto; text-align: center; }