/* mercartas — sistema visual
 *
 * DIRECCIÓN: «el tercer color» (2 ago 2026).
 *
 * Venezuela sin bandera, sin Ávila y sin arepa: la Venezuela que diseñó su
 * propio espacio público entre 1974 y 1983 — el piso de Cruz-Diez en Maiquetía
 * y la señalética del Metro de Caracas. Las dos son obra pública, las dos las
 * ha pisado todo el mundo, y ninguna es un cliché turístico.
 *
 * El motor no es la obra, es su MECANISMO: franjas finas de colores puros
 * separadas por negro, en frecuencias distintas, producen un color que no está
 * en ninguna de las franjas. Cruz-Diez lo instaló en 2.608 m² del pasillo de
 * Maiquetía con mosaicos amarillos, negros, rojos y azules.
 *
 * Ese principio ES el negocio. En un mercado entre particulares el precio no lo
 * tiene el comprador ni el vendedor: aparece donde los dos se solapan. De ahí
 * sale todo lo demás:
 *
 *   - El logotipo son dos cartas APOYADAS una en otra. Ninguna se sostiene
 *     sola, que es exactamente lo que vende esto. La barra ámbar del logotipo
 *     viejo estaba pegada encima y no la producía nada; ahora lo que se ve es
 *     la zona de solape, en verde — y ese verde es el del precio en toda la
 *     interfaz. Cada precio de la web es el cruce de las dos cartas.
 *   - El color policromo vive SÓLO en la franja RAVAN, y siempre en ese orden:
 *     Rojo, Amarillo, Verde, Azul, Negro — la banda de cinco colores que
 *     llevan los trenes del Metro de Caracas y sus planos desde 1983. El color
 *     no es un acento suelto: es una secuencia, y tiene una razón para ir en
 *     ese orden.
 *
 * REFERENCIA DE ESTRUCTURA (no de estética): app.getcollectr.com, medida en
 * vivo. Banda oscura arriba que contiene la barra y la cabecera de página como
 * un solo bloque; migas y título a la izquierda, el número que importa a la
 * derecha; el buscador grande dentro de un panel con su título.
 *
 * TIPOGRAFÍA: Archivo con su eje de ancho (wdth 62-125) para titulares y
 * versalitas, Chivo para el texto de interfaz y Chivo Mono para toda cifra.
 * Las tres de Omnibus-Type (Buenos Aires), SIL OFL, hermanas de esqueleto.
 *
 * Una sola voz en varios anchos porque así funciona la señalética real: el
 * Metro y el aeropuerto no mezclan dos personalidades tipográficas, usan una
 * familia y cambian ancho y peso según el tamaño del cartel. Y el ancho
 * expandido es la elección menos por defecto que existe: todo lo que sale de
 * una plantilla va en ancho neutro.
 *
 * Chivo Mono en las cifras porque aquí el número ES el producto: precio,
 * cantidad, plazo, guía del courier, hash de la transacción. Un hash en
 * proporcional es ilegible y una columna de precios sin cifras tabulares no se
 * compara de un vistazo. Ni TCGplayer ni Cardmarket ni Collectr lo hacen.
 *
 * Se retiró Bricolage Grotesque: no por fea, sino porque su rareza no se
 * relacionaba con nada del concepto — carácter comprado en la tienda de
 * fuentes, que es justo lo que se lee como moodboard de IA.
 *
 * Prohibidas: Inter, Roboto, Open Sans, system-ui, Space Grotesk, Poppins, y
 * Lato, que es la de Collectr.
 */

:root {
  /* El verde del solape, aclarado para leerse sobre la banda oscura: el
     #0C6F43 da 2,1:1 sobre carbón, ilegible. Este da 8,4:1. Medido. */
  --price-osc: #5fd99a;

  /* --- la banda oscura --- */
  /* Carbón con matiz VERDE, deliberadamente no azul marino: el #0b2233 de
     antes era una racionalización de la bandera. En Cruz-Diez el negro no es
     fondo, es el separador que hace aparecer el color que no está. */
  --shell:      #141613;
  --shell-2:    #1e211c;   /* un escalón arriba: pastillas, hover, bordes */
  --shell-line: rgba(236,239,232,.15);
  --shell-txt:  #ECEFE8;
  --shell-dim:  #9aa393;

  /* --- papel y tinta --- */
  /* Terrazo: el blanco frío de la lechada entre los mosaicos de Maiquetía.
     Frío y ligeramente verde, no crema — se evita a propósito la zona #F4F1EA
     que ya se rechazó por genérica. */
  --paper:      #ECEFE8;
  --surface:    #ffffff;
  --surface-2:  #e2e6dd;
  --ink:        #171a15;
  --ink-2:      #3d423a;
  --muted:      #5C6157;   /* grafito: el cemento entre mosaico y mosaico */
  --line:       #d5dacd;
  --line-2:     #bcc2b4;

  /* la funda: el marco oscuro alrededor de toda carta guardada */
  --sleeve:     #101210;
  --sleeve-2:   #22251f;

  /* --- RAVAN: los cinco colores, cada uno con un oficio y sólo uno --- */
  /* Rojo Línea 1, la troncal por la que se mide todo lo demás. SÓLO como
     relleno con texto blanco encima, en los botones que comprometen dinero.
     Nunca como texto: da 4,0:1 sobre terrazo, insuficiente. Lo destructivo NO
     es rojo — es contorno y texto. */
  --accion:     #D33B2A;
  --accion-hot: #b93122;
  /* Amarillo aditivo: apartado activo, anillo de foco, la franja RAVAN.
     Cromo, más ácido y más verde que el dorado #e0a638 que traía el logotipo:
     aquel era ámbar de marca genérica, este es pigmento de mosaico. */
  --gold:       #E9C116;
  --gold-dim:   #c2a00e;
  /* Verde Línea 3: el precio, siempre y en exclusiva. Es el color del solape
     del logotipo. 5,2:1 sobre terrazo, apto para texto pequeño. */
  --price:      #0C6F43;
  /* Azul Línea 2: enlaces e información. Nunca botones — el botón es rojo, y
     mezclar los dos es cómo se pierde la jerarquía. 5,6:1 sobre terrazo. */
  --sea:        #1A5CAB;
  --sea-hot:    #14488a;
  --alarm:      #b93122;

  /* Compatibilidad: los nombres viejos siguen vivos en muchas reglas y apuntan
     a los nuevos en vez de duplicar la paleta. Duplicarla es cómo se
     desincroniza. */
  --foil:       var(--gold);
  --foil-hot:   var(--gold-dim);
  --brass:      var(--gold);
  --brass-hot:  var(--gold-dim);

  --r:          4px;
  --r-lg:       8px;
  --pad:        clamp(.5rem, 2.5vw, 2rem);
  /* Medido en la referencia: contenedor de 1536 con 32 de padding lateral,
     24 por debajo de 1280 y 8 por debajo de 640. Estaba en 1280, que a
     1440 dejaba 160px de aire muerto a cada lado. */
  --maxw:       1536px;
  --shadow:     0 1px 2px rgba(23,26,21,.07), 0 1px 1px rgba(23,26,21,.05);

  /* Archivo a ancho expandido para display, Chivo para leer, Chivo Mono para
     toda cifra que se compare o se copie. */
  --display: "Archivo", "Helvetica Neue", sans-serif;
  --ui:      "Chivo", "Helvetica Neue", sans-serif;
  --mono:    "Chivo Mono", ui-monospace, monospace;
}

/* Toda cifra que se compare de un vistazo o se copie a mano va en monoespaciada
   con cifras tabulares. En este producto el número es el producto. */
.esc-pr, .ph-stat b, .kpi .n, .tb-n, .amt, .price, .pr,
.chip .n, .esc-n, td.num, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;

  /* La hoja de nueve bolsillos de una carpeta. Ortogonal, con la proporción
     real de una carta (63x88 mm), y casi invisible: da textura de superficie
     de trabajo sin convertir la página en un dibujo de una carpeta. Si se
     nota, está mal — la misma regla que tenía la brújula. */
  background-image:
    repeating-linear-gradient(90deg, rgba(22,24,28,.013) 0 1px, transparent 1px 168px),
    repeating-linear-gradient(0deg,  rgba(22,24,28,.010) 0 1px, transparent 1px 235px);
}

a { color: var(--sea); }
a:hover { color: var(--sea-hot); }

/* ---------- la coraza: barra + cabecera de página ---------- */
/* Las dos van del mismo color a propósito: forman UN bloque oscuro que la
   marca ocupa entera. Separarlas (barra oscura, cabecera blanca) devuelve la
   sensación de plantilla, que es justo lo que se está corrigiendo. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.4rem);
  padding: .55rem var(--pad);
  background: color-mix(in srgb, var(--shell) 93%, transparent);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  color: var(--shell-txt);
  border-bottom: 1px solid var(--shell-line);
}

/* --- el bloque de marca ---
   Logotipo + palabra + descriptor debajo, en versalitas muy espaciadas. El
   descriptor es lo que convierte un nombre en una marca: dice de qué va esto
   sin que haya que leer nada más. Y dice VENEZUELA, que es el argumento. */
.brand {
  display: flex; align-items: center; gap: .55rem;
  color: var(--shell-txt); text-decoration: none; white-space: nowrap;
}
.brand img { width: 34px; height: 34px; flex: none; }
.brand .wm {
  display: block;
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 800; font-size: 1.16rem; line-height: 1;
  letter-spacing: -.025em;
}
.brand .wm span { color: var(--price-osc); }
.brand .tag {
  display: block; margin-top: 3px;
  font-size: .53rem; font-weight: 600; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--shell-dim);
  /* La placa de nombre de estación: versalitas ensanchadas y muy espaciadas.
     Es lo que convierte un nombre en una marca. */
  font-family: var(--display);
  font-variation-settings: "wdth" 125;
}
.brand:hover .wm span { color: #fff; }

/* --- navegación --- */
.mainnav { display: flex; align-items: center; gap: .2rem; min-width: 0; }
.mainnav a {
  padding: .45rem .7rem; border-radius: 8px;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  color: var(--shell-txt); white-space: nowrap;
}
.mainnav a:hover { background: var(--shell-2); color: #fff; }
.mainnav a.on { color: var(--gold); }
/* El panel de operación no es un apartado más de la web: es la trastienda. Se
   marca como tal para no confundirlo con la navegación del comprador, y para
   que se note de un vistazo si te quedaste con la sesión de admin abierta. */
.mainnav a.es-admin {
  box-shadow: inset 0 0 0 1px var(--shell-line);
  color: var(--shell-dim);
}
.mainnav a.es-admin::before { content: "· "; color: var(--gold); }
.mainnav a.es-admin:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--gold); }
.mainnav a.es-admin.on { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }

/* --- el buscador de la barra ---
   Compacto y pegado a la derecha, como en la referencia: en las páginas
   interiores buscar es una salida, no la acción principal. La portada
   además tiene el buscador grande en su propio panel. */
.qsearch {
  display: flex; align-items: center; gap: .5rem;
  flex: 1 1 auto; min-width: 0; max-width: 420px; margin-left: auto;
  padding: 0 .5rem 0 .7rem; height: 38px;
  border: 1px solid var(--shell-line); border-radius: 999px;
  background: rgba(255,255,255,.07);
}
.qsearch:focus-within {
  border-color: var(--gold);
  background: rgba(255,255,255,.11);
}
.qsearch svg { flex: none; opacity: .65; }
.qsearch input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; color: var(--shell-txt);
  font: inherit; font-size: .86rem; outline: 0;
}
.qsearch input::placeholder { color: var(--shell-dim); }
.qsearch kbd {
  flex: none; padding: .1rem .35rem; border-radius: 4px;
  border: 1px solid var(--shell-line); background: rgba(255,255,255,.06);
  font: inherit; font-size: .68rem; color: var(--shell-dim);
}

/* --- la pastilla de la derecha --- */
.wallet-chip {
  display: flex; align-items: center; gap: .45rem; flex: none;
  padding: .45rem .9rem;
  border: 1px solid var(--shell-line); border-radius: 999px;
  background: transparent; color: var(--shell-txt);
  font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.wallet-chip:hover { background: var(--shell-2); border-color: var(--gold); color: #fff; }
.wallet-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--shell-dim); }
.wallet-chip.on .dot { background: #35d38a; box-shadow: 0 0 0 3px rgba(53,211,138,.2); }

/* --- la cabecera de la página ---
   Migas, título a la izquierda y el dato que importa a la derecha (el precio
   de la carta, la reputación de la tienda, el saldo de la cuenta). Misma
   composición que la referencia, porque es la que deja el número donde la
   vista ya lo busca. */
.pagehead {
  position: relative; overflow: hidden;
  background: var(--shell); color: var(--shell-txt);
  border-bottom: 1px solid var(--shell-line);
}
/* El logotipo usado como FORMA: grande, girado, sangrando por el borde. Es lo
   único de la página que no podría estar en otra web. Al 6% es textura, no
   dibujo — si se lee como un logo, está demasiado fuerte. */
.pagehead::before {
  content: ""; position: absolute; pointer-events: none;
  right: -6%; top: -45%; width: min(40vw, 380px); aspect-ratio: 1;
  background: url("brand/logomark-white.svg") center/contain no-repeat;
  opacity: .07; transform: rotate(-10deg);
  /* Sin máscara la marca se lee como una forma gris pegada encima, con su
     canto recto y todo. Difuminada hacia abajo es superficie: se nota que la
     página está hecha de algo, sin que nadie se pare a mirarla. */
  -webkit-mask-image: linear-gradient(200deg, #000 15%, transparent 72%);
  mask-image: linear-gradient(200deg, #000 15%, transparent 72%);
}
.pagehead-in {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 1.4rem var(--pad) 1.6rem;
}
.pagehead .crumbs { color: var(--shell-dim); margin-bottom: .6rem; }
.pagehead .crumbs a { color: var(--shell-dim); }
.pagehead .crumbs a:hover { color: var(--gold); }
.pagehead .eyebrow { color: var(--gold); }
.pagehead h1 { color: #fff; margin: 0; }
.pagehead .ph-sub { color: var(--shell-dim); margin: .35rem 0 0; font-size: .92rem; }
.pagehead .ph-sub a { color: var(--shell-txt); text-decoration: underline; text-underline-offset: 3px; }

.pagehead-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.pagehead-row > .ph-tit { min-width: 0; flex: 1 1 20rem; }
/* El logotipo de la colección, sobre PAPEL y no sobre la banda: estos PNG
   vienen recortados de un fondo blanco, así que los oscuros —«Pitch Black»,
   «Perfect Order»— desaparecerían sobre el carbón. El recuadro claro los hace
   legibles a todos sin tener que mirar cuál es de qué color.
   Va después de la regla de `:first-child` a propósito: al preponerse pasa a
   serlo, y sin esto heredaría el `flex: 1 1 20rem` del bloque del título. */
.pagehead-row > .ph-logo {
  flex: none; display: grid; place-items: center;
  width: 6.4rem; height: 4.4rem; padding: .4rem;
  border-radius: 10px; background: var(--paper);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.pagehead-row > .ph-logo img { max-width: 100%; max-height: 100%; display: block; }
.ph-stat { text-align: right; flex: none; }
.ph-stat b {
  display: block; font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800;
  line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.ph-stat span { display: block; margin-top: .3rem; font-size: .82rem; color: var(--shell-dim); }
/* La CIFRA nunca cambia de color: un precio de referencia en rojo porque el
   mercado bajó un 1,6% en un mes se lee como una alarma, y no lo es. El color
   vive en la línea de debajo, que es la que habla de la variación. */
.ph-stat.up span  { color: #6ee7a8; }
.ph-stat.down span { color: #f6a6a6; }

/* En móvil no caben marca + navegación + buscador + pastilla en una fila.
   La marca y la pastilla se quedan arriba; el buscador baja a fila propia
   porque buscar es la acción principal; la navegación va debajo y se
   desplaza en horizontal en vez de partirse.

   Aquí estaba el fallo que dejaba el input de la portada en 50px de ancho:
   el <select> de juego se comía el ancho de la fila. Ahora el buscador tiene
   fila entera y el select va en la suya. */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; row-gap: .5rem; padding-bottom: .5rem; }
  .brand { order: 1; }
  .wallet-chip { order: 2; margin-left: auto; }
  .qsearch { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .mainnav {
    order: 4; flex-basis: 100%;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad);
  }
  .mainnav::-webkit-scrollbar { display: none; }
  .brand .tag { display: none; }
  /* Con la cabecera a varias filas, una barra de filtros pegajosa se comería
     un tercio de una pantalla de 812px. En móvil se queda quieta. */
  .filterbar { position: static; }
}

/* ---------- estructura ---------- */

main { padding: var(--pad); max-width: var(--maxw); margin: 0 auto; }

.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: .7rem; }
.crumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.crumbs a:hover { color: var(--sea); }
.crumbs span { margin: 0 .4rem; opacity: .5; }

.eyebrow {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .3rem;
}

h1 {
  font-family: var(--display);
  /* El ancho expandido es la elección menos por defecto que existe: todo lo
     que sale de una plantilla va en ancho neutro. Y es lo mismo que hace la
     textura del hero — la misma forma a distinta frecuencia. */
  font-variation-settings: "wdth" 118;
  font-weight: 800; letter-spacing: -.02em; line-height: 1.08;
  margin: 0 0 .25rem;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
}
h2 { font-family: var(--display); font-variation-settings: "wdth" 112;
     font-weight: 700; letter-spacing: -.015em; }

.sub { color: var(--muted); margin: 0 0 .2rem; }

/* Sección al estilo TCGplayer: título discreto, contenido en panel. */
.section { margin-top: 2rem; }
.section > h2 { font-size: 1.1rem; margin: 0 0 .7rem; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.panel-pad { padding: 1rem 1.1rem; }

/* Cabecera de panel: marca dorada, título, y sitio a la derecha para el
   control que gobierne ese panel (el selector de tramo del historial, el
   contador de resultados). Es el patrón de la referencia y ordena la página
   sin necesidad de un título suelto flotando encima de cada bloque. */
.panel > .ph {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.panel > .ph > h2, .panel > .ph > h3 {
  margin: 0; font-size: 1.02rem; font-family: var(--display); font-weight: 700;
}
.panel > .ph .tail { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
/* La marca dorada del lado izquierdo: dos trazos del logotipo, no un icono
   comprado. Es la pieza que se repite por toda la interfaz. */
.panel > .ph::before {
  content: ""; flex: none; width: 3px; height: 17px; border-radius: 2px;
  background: var(--gold);
}

/* Control segmentado (tramo del historial, vistas). Relleno sólido en el
   activo en vez de un borde de color: se lee de un vistazo en un teléfono
   con el brillo bajo, que es donde se va a usar. */
.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2);
}
.seg button {
  border: 0; background: transparent; cursor: pointer;
  padding: .28rem .72rem; border-radius: 999px;
  font: inherit; font-size: .78rem; font-weight: 700; color: var(--muted);
  letter-spacing: .02em;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- el escaparate: lo que se está vendiendo ahora ----------

   NO autorrota. Se comprobaron siete sitios en vivo: los cuatro que viven de
   vender producto —TCGplayer, Collectr, Vinted, Whatnot— no autorrotan nada de
   producto; los dos que sí —eBay, Cardmarket— lo reservan para banners de
   publicidad. Autoplay con puntitos y tarjetas iguales redondeadas es la firma
   de la plantilla de Bootstrap, que es exactamente lo que hay que evitar aquí.

   Scroll nativo del navegador con imantado, y JS sólo para los mandos. Sin
   librería: Swiper son ~40 KB comprimidos y cientos de milisegundos de parseo
   en el teléfono de gama media que es el dispositivo mayoritario aquí.

   Va sobre la banda oscura de la marca, no sobre un gris claro. Una carta
   brilla sobre oscuro y se apaga sobre gris —es la mitad del oficio de una
   tienda de cartas— y así la página alterna oscuro/claro/oscuro/claro en vez
   de ser un folio con cajas encima.
*/
.escaparate {
  position: relative; overflow: hidden;
  margin-top: 2.6rem;
  padding: 1.5rem 0 1.9rem;
  background: var(--shell); color: var(--shell-txt);
  border-top: 1px solid var(--shell-line);

  /* La escalera de tarjetas visibles, medida en TCGplayer en vivo:
     1,75 / 2 / 3 / 4 / 5 / 6 a 320 / 360 / 601 / 768 / 1200 / 1300.
     El 1,75 de móvil no es un decimal caprichoso: la media carta asomando es
     la ÚNICA señal de que la tira se arrastra, porque la barra va oculta. */
  --n: 1.75;
  --hueco: 1rem;
}
@media (min-width: 360px)  { .escaparate { --n: 2; } }
@media (min-width: 601px)  { .escaparate { --n: 3; } }
@media (min-width: 768px)  { .escaparate { --n: 4; } }
@media (min-width: 1200px) { .escaparate { --n: 5; } }
@media (min-width: 1300px) { .escaparate { --n: 6; } }

.esc-head {
  position: relative;
  display: flex; align-items: center; gap: .8rem;
  max-width: var(--maxw); margin: 0 auto 1.1rem; padding: 0 var(--pad);
}
.esc-head h2 { margin: 0; font-size: 1.08rem; color: #fff; }
.esc-n { font-size: .82rem; color: var(--shell-dim); font-variant-numeric: tabular-nums; }
.esc-mandos { margin-left: auto; display: flex; gap: .4rem; }

/* Las flechas llevan el corte diagonal del logotipo, el mismo que los botones
   que comprometen dinero. Es lo que las hace de este sitio y no de una
   plantilla — que trae flechas circulares con una sombra suave. */
.esc-flecha {
  --bevel: .42rem;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--shell-line); background: rgba(255,255,255,.06);
  color: var(--shell-txt); font: 400 1.2rem/1 var(--ui); cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel)),
                     calc(100% - var(--bevel)) 100%, 0 100%);
}
.esc-flecha:hover:not(:disabled) { background: var(--gold); color: #2b1f05; border-color: var(--gold); }
/* Deshabilitada de verdad, no escondida: que se vea que llegaste al final es
   información. Una flecha que desaparece deja pensando si la página falló. */
.esc-flecha:disabled { opacity: .3; cursor: default; }

.esc-pista { position: relative; }

/* El margen lateral es el MISMO que el del contenido centrado, no `--pad` a
   secas: si no, la primera carta arranca pegada al borde de la pantalla
   mientras el título de arriba está a 148px, y las dos cosas de la misma
   sección no se alinean. La tira sangra a todo el ancho, pero su contenido
   empieza donde empieza el resto de la página. */
.escaparate {
  --sangria: max(var(--pad), (100vw - var(--maxw)) / 2 + var(--pad));
}
.esc-tira {
  display: flex; gap: var(--hueco);
  margin: 0; padding: 0 var(--sangria); list-style: none;
  overflow-x: auto;
  /* `proximity`, NUNCA `mandatory`: con tarjetas más estrechas que el visor el
     imantado obligatorio pelea contra el arrastre y en iOS atrapa el dedo.
     `mandatory` sólo es correcto cuando la pieza ocupa la pantalla entera. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--sangria);
  /* Evita que arrastrar más allá del final dispare el «atrás» del navegador. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.esc-tira::-webkit-scrollbar { display: none; }
.esc-tira:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.esc-tira > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: calc((100% - (var(--n) - 1) * var(--hueco) - var(--sangria) * 2) / var(--n));
}

/* El desvanecido va SÓLO en el lado por el que continúa el contenido. Las
   clases las pone el JS según dónde esté el scroll: un degradado en un canto
   donde ya no queda nada se lee como un fallo de pintado. */
.esc-tira.mas-der  { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent);
                     mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent); }
.esc-tira.mas-izq  { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem);
                     mask-image: linear-gradient(90deg, transparent, #000 4rem); }
.esc-tira.mas-izq.mas-der {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}

.esc-item {
  display: flex; flex-direction: column; gap: .18rem;
  text-decoration: none; color: var(--shell-txt);
}

/* Caja de proporción fija, reservada ANTES de que llegue la foto. Sin esto,
   cada miniatura que aterriza empuja la fila entera y quien iba a pinchar una
   carta pincha otra — con datos intermitentes eso pasa siempre.

   El anillo claro tampoco es adorno: una carta de fondo oscuro (media Dragon
   Ball) sobre la banda oscura desaparece y se lee como imagen rota. Comprobado
   con dos Son Goku que cargaban perfectamente y parecían un rectángulo negro.
   El canto define dónde acaba la carta y empieza la página, que es lo que hace
   de verdad la funda física. */
.esc-funda {
  display: block; padding: 4px; margin-bottom: .4rem;
  aspect-ratio: 63 / 88;
  border-radius: 5px; background: var(--sleeve);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 12px rgba(0,0,0,.35);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.esc-funda img,
.esc-funda .card-back {
  width: 100%; height: 100%; display: block;
  object-fit: contain; border-radius: 2px;
}
/* La foto del vendedor sale de un móvil: la carta va centrada y con fondo
   alrededor. `cover` la encaja llenando el hueco y se come ese fondo, que es
   lo que hace que una tira de fotos caseras se lea como un escaparate y no
   como un tablón de anuncios.
   La de catálogo se queda en `contain`: ya viene recortada al canto de la
   carta y recortarla otra vez le comería el arte. */
.esc-funda img.foto { object-fit: cover; object-position: center; }
.esc-item:hover .esc-funda,
.esc-item:focus-visible .esc-funda {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px var(--gold), 0 14px 28px rgba(0,0,0,.45);
}
.esc-item:focus-visible { outline: 2px solid var(--foil); outline-offset: 4px; border-radius: 5px; }

.esc-nm {
  font-weight: 700; font-size: .84rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.esc-cond { font-size: .72rem; color: var(--shell-dim); }
/* El verde de precio de TCGplayer da 2,3:1 sobre azul profundo — ilegible.
   Sobre oscuro va un verde claro, que da 8,4:1. Medido, no elegido. */
.esc-pr {
  font-weight: 800; font-size: .92rem; color: var(--price-osc);
  font-variant-numeric: tabular-nums;
}
.esc-store {
  font-size: .7rem; color: var(--shell-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Quien pide que las cosas no se muevan no pierde el escaparate: la tira pasa
   a rejilla envuelta. Congelarla a medio recorrer escondería la mitad. */
@media (prefers-reduced-motion: reduce) {
  .esc-tira {
    flex-wrap: wrap; overflow-x: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .esc-funda, .esc-item:hover .esc-funda { transition: none; transform: none; }
  .esc-mandos { display: none; }
}

/* ---------- el buscador grande de la portada ----------
   En la referencia el buscador vive dentro de un panel con su propio título,
   no flotando sobre el fondo. Eso lo convierte en el objeto principal de la
   pantalla en vez de en un adorno de la cabecera.

   Cada control declara `flex-basis` en `rem`: por debajo de ~26rem la fila se
   parte sola y cada uno se queda con el ancho entero. Ahí estaba el fallo que
   dejaba el input en 50px en un teléfono de 375. */
.findbar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem 1.1rem;
}
.findbar h2 { margin: 0 0 .75rem; font-size: 1.02rem; }
.findbar form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.findbar .fld {
  display: flex; align-items: center; gap: .6rem;
  flex: 1 1 26rem; min-width: 0; height: 46px;
  padding: 0 1rem;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper);
}
.findbar .fld:focus-within {
  border-color: var(--sea); box-shadow: 0 0 0 3px rgba(18,63,79,.1); background: var(--surface);
}
.findbar .fld svg { flex: none; color: var(--muted); }
.findbar .fld input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; color: var(--ink); font: inherit; outline: 0;
}
/* El desplegable del sistema trae su propio marco y su propia flecha, que no
   se parecen a nada más de la página. Se apaga y se dibuja la flecha aquí. */
.findbar select {
  flex: 0 1 13rem; height: 46px; min-width: 0;
  padding: 0 2.2rem 0 .9rem;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--paper); color: var(--ink-2); font: inherit; font-weight: 600;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none' stroke='%2371767e' stroke-width='1.7'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
}
.findbar select:focus { outline: 0; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(18,63,79,.1); }
.findbar .go {
  flex: none; height: 46px; padding: 0 1.6rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font: inherit; font-weight: 700;
}
.findbar .go:hover { background: var(--sea); }
.findbar .go:active { transform: translateY(1px); }
.findbar .clear {
  flex: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--muted); padding: 0 .5rem;
  text-decoration: none;
}
.findbar .clear:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Lo que la gente busca de verdad, debajo del campo: quita el miedo a la
   página en blanco y enseña que el catálogo tiene los tres juegos. */
.findbar .tips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0 0; }
.findbar .tips a {
  padding: .25rem .65rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: .78rem; color: var(--ink-2); text-decoration: none;
}
.findbar .tips a:hover { border-color: var(--gold); color: var(--ink); }

/* ---------- portada ----------
   El hero es la misma banda oscura que la cabecera de las demás páginas, sólo
   que más alta. Así toda la web abre igual y la marca es lo primero que se ve
   en cualquier pantalla en la que se entre. */

.hero-head .pagehead-in { padding-top: 0; padding-bottom: 0; }
/* La textura del logotipo va más grande y más centrada que en las páginas
   interiores: aquí hay sitio y es donde la marca tiene que pesar. */
.hero-head::before {
  right: -5%; top: -20%; width: min(52vw, 520px); opacity: .06; z-index: 1;
}

/* --- la ráfaga: que se sienta del género sin ser de nadie ---

   Líneas de velocidad y trama de puntos. Son los dos recursos más reconocibles
   del manga de acción y son lenguaje gráfico del medio, como el bocadillo de
   diálogo — no obra de ninguna editorial. Un lector de shonen lo reconoce al
   instante, y no hay un solo personaje de nadie en la página.

   Se genera con `python3 brand/scripts/gen-rafaga.py`, con semilla fija para
   que regenerarla no mueva el fondo en cada despliegue.

   El hueco para el arte propio
   ----------------------------
   `--hero-art` está pensada para sustituirse por una ilustración encargada.
   Basta con apuntarla a otro archivo:

       .hero-head { --hero-art: url("brand/hero-art.webp"); --hero-art-op: .22; }

   Requisitos de esa pieza para que no rompa la composición: 1400×900 o mayor,
   fondo transparente, la figura en la MITAD DERECHA (la izquierda es del
   titular, y el abanico de cartas ocupa la derecha a partir de 900px), y con
   margen inferior porque la franja dorada corta abajo. */
/* TONO SOBRE TONO, no blanco al 11%.
   Los dos sitios del sector con más oficio en la textura —Yuyu-tei y Bandai—
   pintan su patrón en el MISMO tono del fondo, con distinta luminosidad, nunca
   en un gris neutro por encima. Blanco translúcido sobre azul da gris, y el
   gris es el color que no eligió nadie: se lee como una capa pegada encima en
   vez de como superficie. */
.hero-head {
  --hero-art: url("brand/rafaga.svg");
  /* Al 50% las líneas se leían como un dibujo pegado encima. La regla de la
     casa: si se reconoce como un dibujo, está demasiado fuerte — tiene que ser
     superficie. Al 30% en tono sobre tono se siente el estallido sin que
     compita con el titular. */
  --hero-art-op: .22;
}
.hero-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--hero-art) no-repeat center right / cover;
  opacity: var(--hero-art-op);
  /* Sin máscara, la ráfaga pasa por debajo del titular y lo ensucia. El texto
     necesita fondo limpio; la textura vive de la mitad hacia la derecha. */
  -webkit-mask-image: linear-gradient(100deg, transparent 26%, #000 68%);
  mask-image: linear-gradient(100deg, transparent 26%, #000 68%);
}
.hero-head .pagehead-in, .hero-head .hero-strip { position: relative; z-index: 2; }

/* Una sola columna por defecto: sin JS, o antes de que lleguen las cartas, el
   texto ocupa el ancho entero en vez de dejar medio hero vacío. La segunda
   columna sólo existe cuando hay cartas de verdad que poner en ella. */
.hero {
  position: relative;
  padding: clamp(2.2rem, 6vw, 4rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 46ch);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.hero.con-cartas { grid-template-columns: minmax(0, 46ch) 1fr; }
.hero-say { min-width: 0; }
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.hero p { color: var(--shell-dim); font-size: 1.02rem; max-width: 44ch; }
.hero-cta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem; }
/* Sobre la banda oscura el azul del botón principal es casi el mismo azul del
   fondo: la acción más importante de la portada era la menos visible. Aquí el
   botón va en el dorado de la marca, que es el único color que puede con este
   fondo — y de paso el color propio aparece donde de verdad se mira. */
.pagehead .cta { background: var(--accion); color: #fff; }
.pagehead .cta:hover { background: #e8523f; color: #fff; }
.pagehead .cta::after { background: var(--gold); }
.pagehead .cta.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.pagehead .cta.ghost:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--gold); color: #fff; }
.pagehead .cta.ghost::after { background: var(--gold); }

/* La franja dorada: la barra del logotipo estirada a lo ancho de la página.
   Cierra la banda oscura y dice de qué va esto en datos, sin adjetivos. */
/* --- la franja RAVAN ---

   RAVAN son las siglas de Rojo, Amarillo, Verde, Azul, Negro: la banda de
   cinco colores que llevan los trenes del Metro de Caracas y sus planos desde
   1983. Es el ÚNICO sitio de la web donde el color va policromo, siempre en
   ese orden y siempre en banda, nunca suelto.

   Eso responde a lo que se rechazó de otras direcciones —«casi-negro con un
   acento solitario»—: aquí el color no es un acento, es una secuencia, y tiene
   una razón para ir en ese orden.

   La banda va ARRIBA de la franja, fina; el texto va debajo sobre el papel. Un
   texto encima de cinco colores no se puede leer, y forzar un color de texto
   por segmento sería meter cinco colores en la misma frase — prohibido. */
.hero-strip {
  position: relative;
  display: flex; flex-wrap: wrap; gap: .35rem 2.2rem;
  margin: 0; padding: 1.05rem var(--pad) .85rem;
  list-style: none;
  background: var(--paper); color: var(--ink);
  font-size: .82rem; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.hero-strip::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: linear-gradient(90deg,
    var(--accion) 0 20%, var(--gold) 20% 40%, var(--price) 40% 60%,
    var(--sea) 60% 80%, var(--shell) 80% 100%);
}
@media (min-width: 1281px) {
  .hero-strip { justify-content: center; }
}

/* ---------- el abanico ----------

   El ángulo no es decorativo: sale del logotipo, dos cartas inclinadas que se
   cruzan. Repetirlo aquí hace que la marca y la página hablen el mismo idioma.

   Son cartas reales a la venta, así que el hueco enseña producto en vez de
   aire. La rotación alterna signo desde el centro para que el grupo se lea
   como una mano abierta y no como una pila torcida.
*/
.hero-deck {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: 1.5rem 0;
}

/* Enfundada, como se guarda de verdad: marco oscuro asomando por los cuatro
   lados, esquina de radio corto, y la sombra pegada que da un plástico rígido
   apoyado sobre una superficie. */
.deck-card {
  position: relative;
  flex: none;
  width: clamp(78px, 8.6vw, 108px);
  aspect-ratio: 63 / 88;
  padding: 3px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sleeve);
  box-shadow: 0 5px 14px rgba(18, 16, 15, .22), 0 1px 2px rgba(18, 16, 15, .18);
  text-decoration: none;
  /* Posición escrita a mano, no calculada: `abs()` en CSS todavía no está en
     todos los navegadores que un comprador venezolano puede estar usando, y
     una carta mal puesta se ve rota. Cinco cartas, cinco reglas. */
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s;
  margin-inline: -14px;
}

.deck-card:nth-child(1) { transform: rotate(-9deg)  translateY(14px); z-index: 1; }
.deck-card:nth-child(2) { transform: rotate(-4.5deg) translateY(5px);  z-index: 2; }
.deck-card:nth-child(3) { transform: rotate(0deg)    translateY(-4px); z-index: 3; }
.deck-card:nth-child(4) { transform: rotate(4.5deg)  translateY(5px);  z-index: 2; }
.deck-card:nth-child(5) { transform: rotate(9deg)   translateY(14px); z-index: 1; }

/* Con tres o cuatro cartas el reparto de arriba deja el abanico inclinado
   entero hacia la izquierda. Cada cantidad tiene su reparto, simétrico. */
.hero-deck.n3 .deck-card:nth-child(1) { transform: rotate(-7deg) translateY(9px); }
.hero-deck.n3 .deck-card:nth-child(2) { transform: rotate(0deg)  translateY(-4px); }
.hero-deck.n3 .deck-card:nth-child(3) { transform: rotate(7deg)  translateY(9px); z-index: 2; }
.hero-deck.n4 .deck-card:nth-child(1) { transform: rotate(-8deg)   translateY(11px); }
.hero-deck.n4 .deck-card:nth-child(2) { transform: rotate(-2.7deg) translateY(0); }
.hero-deck.n4 .deck-card:nth-child(3) { transform: rotate(2.7deg)  translateY(0); }
.hero-deck.n4 .deck-card:nth-child(4) { transform: rotate(8deg)    translateY(11px); z-index: 2; }
.hero-deck.n3 .deck-card:nth-child(3) .deck-tag,
.hero-deck.n4 .deck-card:nth-child(3) .deck-tag,
.hero-deck.n4 .deck-card:nth-child(4) .deck-tag { left: auto; right: 4px; transform: none; }
.hero-deck.n3 .deck-card:nth-child(2) .deck-tag { left: 50%; transform: translateX(-50%); }

/* Al pasar por encima, la carta se endereza y sube: el gesto de sacar una del
   abanico para mirarla. */
.deck-card:hover,
.deck-card:focus-visible,
.deck-card:nth-child(n):hover,
.deck-card:nth-child(n):focus-visible {
  transform: rotate(0deg) translateY(-12px) scale(1.06);
  box-shadow: 0 16px 32px rgba(18, 16, 15, .3);
  z-index: 9;
  outline: none;
}
.deck-card:focus-visible { outline: 2px solid var(--foil); outline-offset: 3px; }

.deck-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 2px;
}

/* El brillo del plástico: una banda diagonal, muy tenue, fija. No se mueve —
   una funda no destella sola, y una animación aquí sería puro adorno. */
.deck-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    114deg,
    transparent 0 38%,
    rgba(255, 255, 255, .17) 44%,
    rgba(255, 255, 255, .05) 52%,
    transparent 58% 100%
  );
  pointer-events: none;
  z-index: 2;
  border-radius: 4px;
}

.deck-none {
  display: grid;
  place-items: center;
  height: 100%;
  padding: .5rem;
  font: 600 .7rem/1.25 var(--ui);
  color: var(--muted);
  text-align: center;
}

/* La cifra vive sobre la carta, en la banda inferior, como el precio escrito a
   lápiz en la funda. */
/* La cifra va sobre la funda, en su borde inferior — donde se escribe el
   precio en la etiqueta pegada al plástico. */
/* La etiqueta iba de lado a lado de la funda, y como las cartas se solapan
   14px, la carta de encima le comía el final: en un teléfono se leían «$15.»,
   «5.00». Medido, no visto. Ahora es una pastilla del ancho de su cifra y
   centrada, así que vive en la parte de la funda que nunca queda tapada. */
.deck-tag {
  position: absolute;
  left: 50%; bottom: 5px;
  transform: translateX(-50%);
  padding: .22rem .42rem;
  background: rgba(12, 11, 10, .92);
  color: #fff;
  font: 700 .72rem/1 var(--ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  z-index: 3;
  border-radius: 999px;
}
/* Centrarla no basta: las cartas se solapan 14px y la de encima le comía el
   final igual. Cada etiqueta se va al lado de su carta que NUNCA queda tapado
   — las dos de la izquierda al borde izquierdo, las dos de la derecha al
   derecho, y la del medio centrada porque está encima de todas. Medido a 375
   con getBoundingClientRect, no mirado. */
.deck-card:nth-child(1) .deck-tag,
.deck-card:nth-child(2) .deck-tag { left: 4px; transform: none; }
.deck-card:nth-child(4) .deck-tag,
.deck-card:nth-child(5) .deck-tag { left: auto; right: 4px; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .deck-card { transition: none; }
}

/* Bajo 900 el abanico compite con el texto por un ancho que no existe. */
@media (max-width: 900px) {
  .hero, .hero.con-cartas { grid-template-columns: 1fr; }
  .hero-deck {
    justify-content: flex-start;
    /* Compensa el solape negativo y la rotación de la primera carta, que si no
       queda cortada contra el borde de la pantalla. */
    padding: .5rem 0 0 1.1rem;
  }
  /* En un teléfono el solape de 14px deja menos funda visible que ancho tiene
     la etiqueta del precio, así que la carta de encima se comía la cifra: se
     leía «$15.» y «5.00». Aquí el abanico se abre — menos solape y cartas algo
     más anchas — en vez de encoger la letra hasta que no se lea. */
  .deck-card { width: clamp(76px, 21vw, 104px); margin-inline: -5px; }
  .deck-tag { font-size: .68rem; padding: .2rem .38rem; }
}

/* ---------- botones ----------

   El logotipo es dos cartas inclinadas cortadas en diagonal, con una barra
   ámbar en el cruce. Ese corte es lo único que distingue esta marca de
   cualquier otra sans sobre fondo claro, así que aparece aquí: la esquina
   inferior derecha va biselada al mismo ángulo.

   La barra ámbar entra al pulsar. No es adorno: en el logo marca el momento
   del intercambio, y aquí marca el momento en que decides.
*/
.cta {
  --bevel: .58rem;
  position: relative;
  display: inline-block;
  padding: .68rem 1.35rem;
  /* Rojo Línea 1, la troncal del Metro: SÓLO relleno, con texto blanco encima,
     y sólo en lo que compromete dinero. Como texto daría 4,0:1 sobre terrazo,
     insuficiente. Lo destructivo NO es rojo aquí — es contorno y texto. */
  background: var(--accion);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - var(--bevel)),
    calc(100% - var(--bevel)) 100%, 0 100%
  );
  transition: background .16s, transform .16s;
}
.cta:hover { background: var(--accion-hot); color: #fff; }
/* Se hunde 1px al pulsar. Un botón que no responde al dedo se siente roto en
   un teléfono lento, que es donde se va a usar esto. */
.cta:active { transform: translateY(1px); }

/* La barra del intercambio, escondida bajo el bisel hasta el hover. */
.cta::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: var(--bevel); height: var(--bevel);
  background: var(--brass);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity .16s;
}
.cta:hover::after { opacity: 1; }

.cta.ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.cta.ghost:hover { box-shadow: inset 0 0 0 1px var(--accion); background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
  .cta, .cta::after { transition: none; }
}

/* Tarjetas de juego de la portada */
/* ---------- los tres juegos ----------

   Antes eran tres rectángulos idénticos con sombra suave y esquina redondeada:
   el patrón que hace que cualquier página parezca la misma plantilla. Ahora la
   fila se lee como un índice — número, nombre, cifra — y la única línea que
   cambia de color es el filo que entra al pasar por encima.
*/
.catalogo { padding-top: .5rem; }

/* Titular a la derecha: rompe la columna izquierda que arrastran el hero y el
   resto de la página. */
.h-right {
  text-align: right;
  margin-bottom: 1rem;
}

.games {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-2);
}

.game {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: .18rem;
  text-decoration: none;
  color: inherit;
  padding: 1.15rem 1.2rem 1.3rem;
  border-bottom: 1px solid var(--line-2);
  border-right: 1px solid var(--line);
  background: transparent;
  overflow: hidden;
}
.game:last-child { border-right: 0; }

/* El filo ámbar, del logo. Entra desde la izquierda al pasar por encima. */
.game::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brass);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1);
}
.game:hover::before { transform: scaleY(1); }
.game:hover { background: var(--surface); color: inherit; }

.game .idx {
  font: 600 .7rem/1 var(--ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--brass);
}
.game .nm { font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.game .ct { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.game .go {
  margin-top: .6rem;
  font: 600 .78rem/1 var(--ui);
  color: var(--sea);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.game:hover .go { opacity: 1; transform: none; }
.game .go::after { content: " →"; }

/* Sin hover no hay "Ver cartas" que descubrir: en táctil se muestra siempre. */
@media (hover: none) {
  .game .go { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .game::before, .game .go { transition: none; }
}

@media (max-width: 700px) {
  .h-right { text-align: left; }
  .game { border-right: 0; }
}

/* ---------- rejilla de resultados ---------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 1rem; }

.card-tile {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
/* Se levanta como quien saca una carta de la fila con el dedo. */
.card-tile:hover {
  border-color: var(--line-2);
  box-shadow: 0 8px 20px rgba(18, 16, 15, .13);
  transform: translateY(-3px);
}
.card-tile:focus-visible { outline: 2px solid var(--foil); outline-offset: 2px; }
/* La imagen se apoya sobre el tono de la funda, no sobre gris neutro: al
   recortarse contra oscuro la carta se lee como objeto, no como recorte. */
.card-tile img {
  width: 100%; aspect-ratio: 5 / 7; object-fit: contain;
  background: var(--sleeve); display: block; padding: .55rem;
}
/* El dorso de la funda. Mismo hueco que ocuparía la carta, con el nombre
   legible: un rectángulo negro y mudo se lee como un error de carga. */
.card-back {
  aspect-ratio: 5 / 7;
  display: grid;
  place-content: center;
  gap: .3rem;
  padding: .9rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.028) 0 6px, transparent 6px 12px),
    var(--sleeve);
  box-shadow: inset 0 0 0 3px var(--sleeve-2);
}
.card-back .cb-nm {
  font: 600 .84rem/1.25 var(--ui);
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.card-back .cb-sub {
  font: 500 .68rem/1 var(--ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

/* En la ficha el hueco ocupa el ancho de la muestra, no el de una miniatura. */
.sample-back { width: 100%; border-radius: var(--r) var(--r) 0 0; }
.sample-back .cb-nm { font-size: 1rem; }

.card-tile .meta { padding: .55rem .65rem .7rem; border-top: 1px solid var(--line); }
.card-tile .nm {
  font-weight: 600; font-size: .88rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-tile .st {
  font-size: .74rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-tile .pr {
  margin-top: .3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--price);
}

/* ---------- barra de filtros sticky (patrón TCGplayer) ---------- */

.filterbar {
  /* Banda a todo el ancho, contenido alineado con main. La barra superior mide
     ~57px, de ahí el offset del sticky. */
  position: sticky; top: 56px; z-index: 20;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.filterbar .inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  max-width: var(--maxw); margin: 0 auto; padding: .65rem var(--pad);
}
.filterbar .tally { margin-left: auto; text-align: right; line-height: 1.3; flex-shrink: 0; }
.filterbar .tally .n {
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.filterbar .tally .from { font-size: .82rem; color: var(--muted); }

.chip {
  padding: .4rem .8rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: .85rem; cursor: pointer;
}
.chip:hover { border-color: var(--ink-2); }
.chip[aria-pressed="true"] {
  border-color: var(--sea); color: var(--sea); background: rgba(20,64,94,.06); font-weight: 600;
}
.chip .n { opacity: .6; font-variant-numeric: tabular-nums; }

/* ---------- ficha de carta ---------- */

.card-head {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.2rem, 3.5vw, 2.6rem);
  align-items: start;
}
@media (max-width: 780px) { .card-head { grid-template-columns: 1fr; } }

/* La muestra tiene tope de ancho SIEMPRE, no solo en la rejilla de dos
   columnas. Sin él, al pasar a una columna se estiraba a todo el ancho — 676px
   de ancho por 930 de alto en una ventana de tablet — y empujaba fuera de la
   vista el precio y los vendedores, que es a lo que se viene.

   Las propias reglas del proyecto la llaman «solo muestra»: lo que vende es la
   foto real del vendedor. Una muestra que ocupa la pantalla entera no es una
   muestra. 300px basta de sobra para reconocer una carta. */
.sample {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--sleeve);
  overflow: hidden;
  max-width: 300px;
}
.sample img { width: 100%; display: block; padding: .7rem; }
.sample figcaption {
  padding: .5rem .7rem; font-size: .72rem; color: var(--muted);
  border-top: 1px solid var(--line); background: var(--surface);
}
/* El dorso de funda ya trae su propio fondo oscuro; el borde sobra. */
.sample .card-back { border-radius: 0; }

/* Product Details */
.attrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .1rem .6rem; }
.attr { display: flex; gap: .45rem; padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.attr dt { color: var(--muted); }
.attr dd { margin: 0; font-weight: 600; }
.rules {
  white-space: pre-line; font-size: .92rem; color: var(--ink-2);
  border-left: 2px solid var(--brass); padding-left: .8rem; margin: 0 0 1rem;
}

/* Price Points */
.points { width: 100%; border-collapse: collapse; font-size: .9rem; }
.points td { padding: .45rem .2rem; border-bottom: 1px solid var(--line); }
.points td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.points tr:last-child td { border-bottom: 0; }

/* Market Price History */
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.2rem; margin-bottom: .6rem; }
/* El precio va en tinta y el color lo lleva sólo el delta. Un número en verde
   junto a una tendencia negativa se contradice a sí mismo. */
.chart-head .now { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.chart-head .delta { font-weight: 700; font-size: .9rem; }
.chart-head .delta.up { color: var(--price); }
.chart-head .delta.down { color: var(--alarm); }
.chart-head .k { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ranges { display: flex; gap: .35rem; margin-left: auto; }
.ranges button {
  padding: .25rem .7rem; border: 1px solid transparent; border-radius: var(--r);
  background: transparent; color: var(--muted); font: 700 .8rem var(--ui); cursor: pointer;
}
.ranges button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis { font-size: 10px; fill: var(--muted); font-family: var(--ui); }

/* ---------- ofertas ---------- */

.offer {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); margin-bottom: .7rem; overflow: hidden;
  box-shadow: var(--shadow);
}
.offer .body { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: .9rem; padding: .85rem 1rem; align-items: start; }
.offer .foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .5rem 1rem; background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-2);
}
@media (max-width: 620px) { .offer .body { grid-template-columns: 54px 1fr; } .offer .buycol { grid-column: 1 / -1; } }

.offer .price {
  font-family: var(--display); font-size: 1.45rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--price); line-height: 1.1;
}
.offer .ship { font-size: .8rem; color: var(--muted); }
.offer .condline { font-weight: 700; margin-top: .15rem; }
.offer .desc { font-size: .85rem; color: var(--ink-2); margin-top: .35rem; }

/* La foto real del vendedor, también enfundada: es literalmente la carta que
   te van a mandar. */
.thumb {
  width: 54px; height: 76px; border-radius: 3px; object-fit: contain;
  background: var(--sleeve); border: 0; padding: 2px; cursor: zoom-in;
  box-shadow: 0 1px 3px rgba(18, 16, 15, .25);
}
.thumb.none {
  display: grid; place-items: center; font-size: .58rem;
  color: var(--muted); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center; cursor: default; line-height: 1.2;
}

.buycol { display: flex; align-items: center; gap: .5rem; }
.qty {
  display: flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.qty select { border: 0; background: var(--surface); color: var(--ink); font: inherit; padding: .4rem .5rem; }
.qty .of { padding: .4rem .6rem; background: var(--surface-2); border-left: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
/* Mismo corte diagonal que .cta: es el gesto del logotipo y aparece en cada
   botón que compromete dinero, para que se reconozcan entre sí. */
.buy {
  --bevel: .5rem;
  position: relative;
  padding: .55rem 1.15rem;
  border: 0;
  border-radius: 3px;
  background: var(--sea);
  color: #fff;
  font: 700 .88rem var(--ui);
  cursor: pointer;
  white-space: nowrap;
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - var(--bevel)),
    calc(100% - var(--bevel)) 100%, 0 100%
  );
  transition: background .16s, transform .16s;
}
.buy:hover { background: var(--sea-hot); }
.buy:active { transform: translateY(1px); }
.buy:disabled {
  background: var(--line-2); color: var(--muted); cursor: not-allowed; transform: none;
}

.cond {
  display: inline-block; padding: .1rem .45rem; border-radius: 3px;
  font-size: .72rem; font-weight: 700; border: 1px solid var(--line-2); color: var(--ink-2);
}
.cond.NM { color: var(--price); border-color: #bfe0cf; background: #f0f8f4; }
.cond.LP { color: #6a7d2a; border-color: #d9e3bd; background: #f6f9ef; }
.cond.MP { color: var(--brass); border-color: #e8d5ac; background: #fdf8ee; }
.cond.HP, .cond.DM { color: var(--alarm); border-color: #eec7bd; background: #fdf2ef; }

.rank {
  display: inline-block; padding: .05rem .4rem; border-radius: 3px;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.rank.outstanding { background: var(--brass); color: #fff; }
.rank.very_good   { background: #d3a94a; color: var(--ink); }
.rank.good        { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.rank.new         { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.rank.bad         { background: var(--alarm); color: #fff; }

.seller-name { font-weight: 700; color: var(--ink); }
.seller-sub, .mini { font-size: .82rem; color: var(--muted); }
.mini b { color: var(--ink); font-weight: 600; }

/* ---------- formularios ---------- */

.form-card {
  max-width: 440px; margin: clamp(1.5rem, 6vw, 4rem) auto; padding: 1.7rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow);
}
.form-card h1 { font-size: 1.6rem; }
.tabs { display: flex; gap: .4rem; margin-bottom: 1.3rem; }
.field { margin-bottom: .85rem; }
.field label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .25rem; }
/* Acotado a formularios: un `select` suelto aquí llegaba a la cabecera y le
   comía el ancho al buscador. */
.field input, .field select, .inline-edit input, .rowcard select, .line select {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: inherit;
}
.inline-edit input { width: 6.5rem; }
.line select { width: auto; }
.field input:focus, .field select:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(20,64,94,.1); }
.field .hint { font-size: .74rem; color: var(--muted); margin-top: .25rem; }
.form-card button[type=submit] {
  width: 100%; margin-top: .5rem; padding: .7rem; border: 0; border-radius: var(--r);
  background: var(--sea); color: #fff; font: 700 1rem var(--ui); cursor: pointer;
}
.form-card button[type=submit]:hover { background: var(--sea-hot); }
.form-card button[type=submit]:disabled { background: var(--line-2); color: var(--muted); }

/* ---------- paneles ---------- */

.panel-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0 1.5rem; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.kpi {
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow);
}
.kpi .n { font-family: var(--display); font-size: 1.65rem; font-weight: 700; line-height: 1.1; }
.kpi .l { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kpi.urgent { border-color: var(--brass); }
.kpi.urgent .n { color: var(--brass); }

.rows { margin-top: 1.1rem; }
.rowcard {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  padding: .9rem 1rem; margin-bottom: .6rem; box-shadow: var(--shadow);
}
.rowcard header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: .45rem; }
.rowcard header .id { color: var(--muted); font-variant-numeric: tabular-nums; }
.rowcard header .amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.state {
  padding: .12rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.state.placed    { background: #fdf3e2; color: #8a5d12; border: 1px solid #ebd6ae; }
.state.shipped   { background: #eaf1f7; color: var(--sea); border: 1px solid #c6d8e6; }
.state.completed { background: #eef8f2; color: var(--price); border: 1px solid #c2e2d1; }
.state.cancelled { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.state.disputed  { background: #fdf0ed; color: var(--alarm); border: 1px solid #efc9be; }
.state.active    { background: #eef8f2; color: var(--price); border: 1px solid #c2e2d1; }
.state.paused    { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.state.sold_out  { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

.addrbox {
  margin-top: .55rem; padding: .55rem .75rem;
  background: var(--surface-2); border-left: 2px solid var(--line-2); border-radius: 0 var(--r) var(--r) 0;
  font-size: .84rem; color: var(--ink-2); white-space: pre-line;
}

.inline-edit { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .55rem; }
.inline-edit input { width: 6.5rem; padding: .32rem .45rem; font-size: .85rem; font-variant-numeric: tabular-nums; }
.inline-edit button {
  padding: .32rem .75rem; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: .82rem; cursor: pointer;
}
.inline-edit button:hover { border-color: var(--sea); color: var(--sea); }
.inline-edit button:active { transform: translateY(1px); }
.inline-edit button.primary {
  background: var(--sea); border-color: var(--sea); color: #fff; font-weight: 700;
  /* El bisel también aquí: aceptar una oferta mueve dinero igual que comprar. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .42rem), calc(100% - .42rem) 100%, 0 100%);
}
.inline-edit button.primary:hover { background: var(--sea-hot); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

.notice {
  padding: .7rem .9rem; border: 1px solid #ebd6ae; border-left-width: 3px; border-left-color: var(--brass);
  border-radius: var(--r); background: #fdf8ef; font-size: .88rem; margin-bottom: 1rem;
}

/* ---------- fotos en el panel del vendedor ---------- */

.photostrip { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.photostrip .ph {
  position: relative; width: 56px; height: 78px;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  background: var(--surface-2);
}
.photostrip .ph img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.photostrip .ph .rm {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 0; border-radius: 50%;
  background: rgba(28,43,51,.75); color: #fff;
  font: 700 12px/18px var(--ui); cursor: pointer;
}
.photostrip .ph .rm:hover { background: var(--alarm); }
.photostrip .add {
  width: 56px; height: 78px;
  border: 1px dashed var(--line-2); border-radius: 4px;
  background: transparent; color: var(--muted);
  font: 600 .68rem var(--ui); cursor: pointer;
  display: grid; place-items: center; text-align: center; line-height: 1.25;
}
.photostrip .add:hover { border-color: var(--sea); color: var(--sea); }
.photostrip .add:disabled { opacity: .5; cursor: wait; }

.rowthumb {
  width: 44px; height: 61px; object-fit: contain; border-radius: 3px;
  background: var(--surface-2); border: 1px solid var(--line); flex-shrink: 0;
}
.rowcard .headline { display: flex; gap: .8rem; align-items: flex-start; }
.rowcard .headline > div { min-width: 0; flex: 1; }

.desc-edit { width: 100%; margin-top: .5rem; }
.desc-edit textarea {
  width: 100%; min-height: 52px; padding: .5rem .65rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem;
  resize: vertical;
}
.desc-edit textarea:focus { outline: none; border-color: var(--sea); }

/* ---------- mass entry ---------- */

.paste {
  width: 100%; min-height: 260px; padding: .8rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical;
}
.paste:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(20,64,94,.1); }

.tallies { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0; }
.tally .n { font-family: var(--display); font-size: 1.45rem; font-weight: 700; }
.tally .l { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tally.ok .n { color: var(--price); }
.tally.warn .n { color: var(--brass); }
.tally.bad .n { color: var(--alarm); }

.line {
  display: grid; grid-template-columns: 2.1rem 1fr auto; gap: .8rem; align-items: center;
  padding: .55rem .7rem; border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--r); margin-bottom: .35rem; background: var(--surface); font-size: .88rem;
}
.line.ready { border-left-color: var(--price); }
.line.ambiguous, .line.needs_price { border-left-color: var(--brass); }
.line.not_found, .line.error { border-left-color: var(--alarm); }
.line .no { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.line .why { font-size: .78rem; color: var(--muted); }
.line select { max-width: 100%; padding: .25rem .4rem; font-size: .8rem; }

@media (max-width: 860px) { #cols { grid-template-columns: 1fr !important; } }

/* ---------- estados ---------- */

.empty, .loading { padding: 3rem 0; color: var(--muted); text-align: center; }
.err {
  padding: .75rem 1rem; border: 1px solid #efc9be; border-left-width: 3px; border-left-color: var(--alarm);
  border-radius: var(--r); background: #fdf2ef; color: #8c3423; margin-bottom: .8rem;
}

dialog.shot {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink); padding: 0; max-width: min(92vw, 620px);
}
dialog.shot::backdrop { background: rgba(28,43,51,.55); }
dialog.shot img { width: 100%; display: block; }
dialog.shot .bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .8rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted);
}
dialog.shot button {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  border-radius: var(--r); padding: .3rem .7rem; cursor: pointer; font: inherit;
}

footer {
  padding: 2.5rem var(--pad); color: var(--muted); font-size: .8rem;
  border-top: 1px solid var(--line); margin-top: 3rem; background: var(--surface);
}

/* ---------- plazos y ofertas ---------- */

/* Un plazo se lee de un vistazo o no sirve. Neutro mientras sobra tiempo,
   ámbar en las últimas 48 h, rojo cuando venció. Sin iconos: el color y la
   cifra bastan. */
.clock {
  font: 500 .78rem/1 var(--ui);
  padding: .3rem .5rem;
  border-radius: var(--r);
  background: rgba(28, 43, 51, .06);
  color: var(--muted);
  white-space: nowrap;
  align-self: center;
}
.clock.urgent { background: rgba(176, 125, 43, .14); color: var(--brass); }
.clock.late { background: rgba(180, 64, 44, .12); color: var(--alarm); }

/* Lo que escribió el comprador, tratado como cita y no como dato nuestro. */
.quote {
  margin-top: .45rem;
  padding-left: .6rem;
  border-left: 2px solid var(--line);
  font-size: .86rem;
  color: var(--muted);
  font-style: italic;
}

.note {
  font-size: .86rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .7rem .85rem;
  margin: 0 0 1rem;
}

/* Botón secundario de oferta: presente pero sin competir con Comprar, que
   sigue siendo el camino rápido cuando hay precio. Comparten línea base — con
   margen superior propio quedaban 3px desalineados. */
.bid {
  font: 600 .82rem/1 var(--ui);
  padding: .5rem .9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  align-self: center;
}
.bid:hover { border-color: var(--sea); color: var(--sea); }

/* Sin precio no se pinta verde: el verde significa "esto cuesta X". */
.album { color: var(--ink-2); font-style: italic; }

/* ---------- buscador instantáneo ----------

   El panel cuelga del formulario, que ya es la referencia posicionada. Cae
   pegado al borde inferior del campo para que se lea como una extensión del
   buscador y no como una ventana suelta.
*/

.search { position: relative; }

.qs {
  position: absolute;
  top: calc(100% + 6px);
  left: -1px;
  right: -1px;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 12px 28px rgba(28, 43, 51, .13), 0 2px 6px rgba(28, 43, 51, .07);
  overflow: hidden;
  max-height: min(70vh, 30rem);
  overflow-y: auto;
}

.qs-head {
  font: 600 .68rem/1 var(--ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .7rem .85rem .45rem;
}

.qs-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .85rem;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
}

/* Un solo estado resaltado, compartido por ratón y teclado: si el teclado
   pinta distinto que el ratón, se ven dos filas activas a la vez. */
.qs-row.on {
  background: var(--surface-2);
  border-left-color: var(--brass);
}

.qs-img {
  width: 30px;
  height: 42px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--sleeve);
  padding: 1px;
  flex: none;
}
.qs-img.none { display: block; }

.qs-txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }

.qs-name {
  font: 600 .9rem/1.2 var(--ui);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qs-meta {
  font: 400 .74rem/1.2 var(--ui);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cifras tabulares: en una lista, los precios tienen que alinearse por la coma
   o el ojo no puede compararlos de un vistazo. */
.qs-price {
  margin-left: auto;
  font: 600 .84rem/1 var(--ui);
  font-variant-numeric: tabular-nums;
  color: var(--price);
  flex: none;
}

/* La pista de la tecla "/" sólo tiene sentido donde hay teclado. */
.search::after {
  content: "/";
  position: absolute;
  right: 8.2rem;
  top: 50%;
  transform: translateY(-50%);
  font: 600 .72rem/1 var(--ui);
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: .18rem .38rem;
  pointer-events: none;
  opacity: .75;
}
.search:focus-within::after { opacity: 0; }

@media (max-width: 860px) {
  .search::after { display: none; }
}

/* ---------- carrito ---------- */

/* El chip sólo existe cuando hay algo dentro: un "0" permanente en la cabecera
   es ruido que nadie mira. */
.cart-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .8rem;
  border-radius: 999px;
  background: var(--sleeve);
  color: #fff;
  text-decoration: none;
  font: 600 .82rem/1 var(--ui);
  white-space: nowrap;
}
.cart-chip:hover { background: var(--sleeve-2); color: #fff; }
.cart-chip[hidden] { display: none; }
.cart-chip .cc-n { font-variant-numeric: tabular-nums; color: var(--foil-hot); }

/* Cada tienda es un bloque cerrado, no una fila más de una lista: dos
   vendedores son dos envíos, y verlo separado antes de pagar evita la
   sorpresa de recibir las cartas en días distintos. */
.cart-group {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: 1rem;
  overflow: hidden;
}
.cart-group > header {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .8rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.cg-store { font-family: var(--display); font-weight: 700; font-size: 1.02rem; text-decoration: none; }
.cg-sub { font-size: .78rem; color: var(--muted); }

.cg-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
}
.cg-lines > .cg-line:last-child { border-bottom: 0; }
.cl-nm { font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.cl-cond { font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.cl-qty select {
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: inherit; padding: .25rem .4rem;
  font-variant-numeric: tabular-nums;
}
.cl-unit { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-tot { font-weight: 700; color: var(--price); font-variant-numeric: tabular-nums; }
.cl-x {
  border: 0; background: transparent; color: var(--muted);
  font-size: 1.2rem; line-height: 1; cursor: pointer; padding: .1rem .3rem;
}
.cl-x:hover { color: var(--alarm); }

.cg-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .7rem 1rem; background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: .9rem;
}
.cg-foot strong { font-variant-numeric: tabular-nums; }

.cart-total {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.2rem; flex-wrap: wrap;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--foil);
  border-radius: var(--r);
  background: var(--surface);
}
.ct-lines > div { display: flex; align-items: baseline; gap: .7rem; }
.ct-lines strong { font-family: var(--display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ct-lines .mini { margin: .35rem 0 0; max-width: 46ch; }
.ct-acts { display: flex; gap: .6rem; flex-wrap: wrap; }

.cart-issues { margin: .45rem 0 0; padding-left: 1.1rem; font-size: .87rem; }
.cart-issues li { margin-bottom: .2rem; }

@media (max-width: 720px) {
  .cg-line { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: .45rem; }
  .cl-unit { grid-column: 1; font-size: .8rem; }
  .cart-total { flex-direction: column; }
}

/* Sin precio no se pinta como cifra: el verde y el peso dicen «esto cuesta X». */
.amt.album { font-style: italic; font-weight: 500; color: var(--ink-2); }

/* El precio propio se pinta como precio (verde, cifras tabulares) porque lo es:
   alguien lo pagó de verdad aquí. La referencia prestada de al lado no. */
.own-med { color: var(--price); font-variant-numeric: tabular-nums; font-size: 1.05rem; }

/* ---------- bloque de confianza de una tienda ----------

   Es lo que trae a alguien a esta página: voy a pagarle por adelantado a un
   desconocido, ¿quién es? Antes eran cuatro datos en una línea gris del mismo
   tamaño que el nivel de vendedor, que no le importa a nadie.

   Las cifras van en tabulares y grandes; la que de verdad decide —el
   porcentaje positivo— es la única que puede encenderse en verde, y solo por
   encima del 95%. Un «100%» con dos ventas no se destaca: así se ve una estafa
   nueva, y destacarlo destruye el valor de la señal para quien sí la ganó.
*/
.trust {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--foil);
  border-radius: var(--r);
  background: var(--surface);
  padding: 1rem 1.1rem 1.05rem;
  margin: 1.1rem 0 1.6rem;
}

.tb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .3rem 1.4rem;
}

.tb-item { padding: .1rem 0; }
.tb-n {
  font: 700 1.45rem/1.15 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tb-item.on .tb-n { color: var(--price); }
.tb-l { font-size: .8rem; color: var(--muted); line-height: 1.3; }

/* La respuesta real a «no lo conozco» es el escrow, así que se dice aquí,
   donde se hace la pregunta, y no escondida en una página de ayuda. */
.tb-escrow {
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .87rem;
  color: var(--ink-2);
}

.store-bio {
  margin: .5rem 0 0;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: .95rem;
}

/* Estado vacío: qué pasa, por qué, y qué hacer. Alineado a la izquierda como
   el resto del contenido — centrar un bloque de texto en una página que no
   centra nada más lo convierte en un cartel de error. */
.vacio {
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  padding: 1.4rem 1.5rem 1.5rem;
  max-width: 52ch;
}
.v-que {
  margin: 0;
  font: 700 1.02rem/1.3 var(--display);
  color: var(--ink);
}
.v-porque {
  margin: .45rem 0 0;
  font-size: .9rem;
  color: var(--muted);
}
.vacio .cta { margin-top: 1rem; }

/* ---------- publicar fotografiando ---------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* La zona de captura tiene la proporción de una carta: dice sin palabras qué
   se espera dentro. */
.scan-drop {
  display: grid;
  place-content: center;
  gap: .4rem;
  justify-items: center;
  width: min(100%, 300px);
  aspect-ratio: 63 / 88;
  border: 2px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  padding: 1rem;
  transition: border-color .16s, background .16s;
}
.scan-drop:hover { border-color: var(--foil); background: var(--surface-2); }
#foto:focus-visible + .scan-drop { outline: 2px solid var(--foil); outline-offset: 3px; }

.scan-icono { font-size: 2.4rem; line-height: 1; color: var(--line-2); }
.scan-t { font: 700 1rem/1.25 var(--display); color: var(--ink); }
.scan-s { font-size: .82rem; color: var(--muted); }

.scan { margin: 1.2rem 0; }
.scan .mini { margin-top: .8rem; max-width: 46ch; }

/* Al llegar la foto, se ve al lado de los candidatos: el vendedor compara el
   número de SU carta con el de la propuesta sin cambiar de pantalla. */
.scan-live {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  margin-top: 1.2rem;
}
@media (max-width: 760px) { .scan-live { grid-template-columns: 1fr; } }

.scan-prev { margin: 0; }
.scan-prev img {
  width: 100%;
  border-radius: var(--r);
  display: block;
  background: var(--sleeve);
  padding: 3px;
}
.scan-prev figcaption {
  font-size: .78rem; color: var(--muted); margin-top: .5rem; line-height: 1.35;
}

.scan-h { font-family: var(--display); font-size: 1.2rem; margin: 0 0 .2rem; }

.cands { display: grid; gap: .5rem; margin-top: .9rem; }

.cand {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.cand:hover { border-color: var(--sea); background: var(--surface-2); color: inherit; }
.cand:focus-visible { outline: 2px solid var(--foil); outline-offset: 2px; }

.cand-img {
  width: 44px; height: 61px; object-fit: cover; flex: none;
  border-radius: 3px; background: var(--sleeve); padding: 2px;
}
.cand-img.none { display: block; }

.cand-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cand-nm { font-weight: 600; }
.cand-meta { font-size: .8rem; color: var(--muted); }
/* Por qué se propone. Sin esto, todos los candidatos parecen igual de buenos. */
.cand-por { font-size: .72rem; color: var(--foil); }

/* ---------- panel del dueño ---------- */

/* La salud va arriba del todo y ocupa el ancho: si esto está mal, ninguna otra
   cifra de la pantalla importa. */
.salud {
  padding: .85rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--price);
  background: var(--surface);
  margin-bottom: 1.6rem;
  font-size: .92rem;
}
.salud.mal { border-left-color: var(--alarm); background: rgba(180, 64, 44, .04); }
.salud ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: var(--ink-2); }
.salud li { margin-bottom: .3rem; }

.ov-h {
  font-family: var(--display);
  font-size: 1.02rem;
  margin: 1.7rem 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line-2);
}

.ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .8rem;
}

.ov-item {
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
/* Lo que hay que mirar. Ámbar y no rojo: es «revisa esto», no «está roto». */
.ov-item.ojo { border-left: 3px solid var(--foil); }

.ov-n {
  font: 700 1.5rem/1.1 var(--display);
  font-variant-numeric: tabular-nums;
}
.ov-l { font-size: .82rem; color: var(--ink-2); margin-top: .1rem; }
.ov-nota { font-size: .74rem; color: var(--muted); margin-top: .25rem; line-height: 1.3; }

.ov-top { margin-top: 1rem; }
.ov-top h3 { font-family: var(--display); font-size: .95rem; margin: 0 0 .4rem; }

/* La tabla de actividad puede ser ancha; que scrollee ella, no la página. */
.actividad td { padding: .45rem .6rem; vertical-align: top; }
.actividad .state { margin-left: .4rem; }

/* ---------- identidad por juego ----------

   Los cuatro juegos eran cuatro líneas de texto gris idénticas. Son marcas con
   personalidad fortísima y el sitio no la reconocía en ninguna parte.

   Lo que NO se puede hacer: usar sus logos. Son marcas registradas de The
   Pokémon Company y Bandai, y es el mismo riesgo del que este proyecto se está
   saliendo con el catálogo. El nombre del producto que vendes sí se puede usar
   —identificar lo que vendes es uso legítimo—, el logotipo no.

   Lo que sí: un color propio por juego, elegido de la paleta del sitio y no
   copiado de la marca. Suficiente para que el ojo distinga las secciones sin
   tocar propiedad de nadie.
*/
:root {
  --g-pokemon:    #c9a227;   /* el amarillo del cartón viejo, no el del logo */
  --g-dbs:        #c2571f;   /* naranja quemado */
  --g-dbfw:       #1f6f8b;   /* azul de tapete */
  --g-onepiece:   #9e2a2a;   /* rojo profundo */
}

.game[href*="pokemon"]                   { --acento: var(--g-pokemon); }
.game[href*="dragon-ball-masters"]       { --acento: var(--g-dbs); }
.game[href*="dragon-ball-fusion-world"]  { --acento: var(--g-dbfw); }
.game[href*="one-piece"]                 { --acento: var(--g-onepiece); }

/* El filo que ya entraba al pasar por encima ahora lleva el color del juego, y
   la cifra del índice también. El resto del bloque no se toca: dos colores de
   texto en el mismo sitio es lo que hace que una página parezca una plantilla. */
.game::before { background: var(--acento, var(--foil)); }
.game .idx { color: var(--acento, var(--foil)); }

/* Una banda de color arriba, fina. Es lo único que distingue un juego de otro
   de un vistazo, y no necesita más. */
.game::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--acento, var(--foil));
  opacity: .85;
}

/* El envío. Va con el resto de acciones de la orden porque rastrear ES la
   acción que quiere hacer quien está esperando su carta. */
.envio {
  font-size: .85rem;
  padding: .3rem .5rem;
  border-radius: var(--r);
  background: var(--surface-2);
  align-self: center;
}
.envio a { font-weight: 600; }

/* ---------- publicar en lote con fotos ----------

   El flujo del sector (CardDealerPro, CardUploader, TCG Automate) empareja las
   fotos por NOMBRE DE ARCHIVO y avisa al usuario de que las ordene antes. Es
   frágil: el navegador ordena «IMG_10» antes que «IMG_9», y nadie renombra cien
   archivos. Aquí se ordena por la fecha de captura, que en un teléfono es el
   orden real en que se dispararon, y aun así el emparejado SE ENSEÑA — con una
   foto de más a la carta veinte, el resto del lote se desplaza entero.
*/
.lote-fila {
  display: flex; gap: 1rem; align-items: flex-start;
}
.lote-fila.hecha { opacity: .55; }
.lote-fotos { display: flex; gap: .35rem; flex: none; }

/* Las dos miniaturas van enfundadas y en proporción de carta, igual que en
   todo el sitio: es el mismo objeto, se dibuja igual. */
.lote-mini, .lote-hueco {
  width: 58px; aspect-ratio: 63 / 88;
  border-radius: 4px; background: var(--sleeve);
  object-fit: cover; display: block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.lote-hueco {
  display: grid; place-items: center; padding: .2rem;
  font: 600 .58rem/1.2 var(--ui); color: var(--muted); text-align: center;
}

.lote-datos { flex: 1; min-width: 0; display: grid; gap: .5rem; }
/* Los cuatro controles caben en una fila en escritorio y se parten solos en el
   teléfono. `minmax(0, …)` es obligatorio: sin él, un nombre de set largo
   estira la rejilla y saca la fila de la pantalla. */
.lote-controles {
  display: grid; gap: .5rem;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .6fr);
}
@media (max-width: 720px) {
  .lote-controles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lote-fila { flex-wrap: wrap; }
}
.lote-datos select, .lote-datos input {
  width: 100%; min-width: 0;
  padding: .45rem .55rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem;
}
.lote-datos label {
  display: block; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .15rem;
}
/* El precio y la cantidad se comparan de un vistazo columna abajo. */
.lote-precio, .lote-cant {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}

/* ---------- buscador de carta con autocompletado ----------

   Para corregir a mano lo que el lector por foto acierta a medias. Medido con
   una carta real de One Piece: el modelo leyó el poder (2000) como número de
   colección y dijo que era de Pokémon. Con un desplegable de seis candidatos
   no hay salida cuando la carta correcta no está entre ellos.
*/
.bc { position: relative; }
.bc-input {
  width: 100%; min-width: 0;
  padding: .45rem .55rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem;
}
.bc-input:focus {
  outline: 0; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(26,92,171,.12);
}

.bc-panel {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 3px);
  max-height: 19rem; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(23,26,21,.16);
}
.bc-op {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .5rem; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.bc-op:last-child { border-bottom: 0; }
.bc-op.on { background: var(--surface-2); }
/* La miniatura enfundada, como en todo el sitio. Y con hueco reservado: sin
   él la lista salta cada vez que llega una imagen y se pulsa la opción de al
   lado. */
.bc-op img, .bc-sin {
  flex: none; width: 30px; aspect-ratio: 63 / 88;
  object-fit: cover; border-radius: 3px; background: var(--sleeve);
}
.bc-txt { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
.bc-txt b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El número y el set en monoespaciada: es lo que distingue un Nami de otro, y
   se compara columna abajo. */
.bc-txt span {
  font-family: var(--mono); font-size: .7rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* El desplegable de candidatos del lector queda como atajo, encima del
   buscador, y más discreto: es una sugerencia, no la respuesta. */
.lote-datos .field > select + .bc { margin-top: .35rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   EL SISTEMA DE COLLECTR, con nuestros tokens
   ═══════════════════════════════════════════════════════════════════════════

   Medido en vivo el 3 de agosto de 2026 sobre app.getcollectr.com, leyendo el
   DOM con getBoundingClientRect y getComputedStyle. Los números de aquí son
   suyos; los colores y la tipografía, nuestros.

   El esqueleto es una REJILLA DE 12 COLUMNAS con gap de 16px sobre 1480px de
   ancho. Todo lo demás se cuelga de ahí:

       ficha de carta   foto  span 3  |  gráfico span 5  |  panel span 4
       rejilla de cartas               span 2 cada una

   Con doce columnas caben 2, 3, 4 y 6 por fila sin decimales, que es la razón
   por la que el sector entero usa doce.
*/

.rej {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
}
/* Los tramos que se usan de verdad. Escritos, no calculados: una clase por
   tramo se lee en el marcado y se puede cambiar en un sitio. */
.c3  { grid-column: span 3; }
.c4  { grid-column: span 4; }
.c5  { grid-column: span 5; }
.c6  { grid-column: span 6; }
.c8  { grid-column: span 8; }
.c9  { grid-column: span 9; }
.c12 { grid-column: span 12; }

/* Por debajo de 900 la rejilla de doce no sirve para nada: todo pasa a una
   columna, y sólo la foto de la ficha conserva su sitio junto al texto. */
@media (max-width: 900px) {
  .rej { gap: .85rem; }
  .c3, .c4, .c5, .c6, .c8, .c9 { grid-column: span 12; }
}

/* --- EL PANEL ---
   Es la pieza que se repite en toda la web: el gráfico, la tienda, los
   filtros, los detalles. Radius 16, borde de 1px, fondo blanco y una sombra
   que casi no se ve. Sustituye al panel anterior de radius 8. */
.caja {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(23,26,21,.05);
  overflow: hidden;
}
.caja-h {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem 1.15rem .85rem;
}
.caja-h h2, .caja-h h3 {
  margin: 0; font-family: var(--display);
  font-variation-settings: "wdth" 108;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
}
.caja-h .tail { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
/* La marca de color a la izquierda del título: la pieza que se repite y hace
   que dos paneles se reconozcan como del mismo sistema. */
.caja-h::before {
  content: ""; flex: none; width: 3px; height: 17px; border-radius: 2px;
  background: var(--gold);
}
.caja-b { padding: 0 1.15rem 1.15rem; }
.caja-b:first-child { padding-top: 1.15rem; }

/* --- LOS BOTONES ---
   Tres, y sólo tres. Cada uno con un oficio:

     .btn        rojo Línea 1 — compromete dinero. Comprar, publicar, ofertar.
     .btn.linea  contorno      — la alternativa que no cuesta nada.
     .btn.plano  sin caja      — la salida discreta.

   El corte diagonal de la esquina inferior derecha es del logotipo: dos cartas
   que se cruzan. Aparece en TODOS, no sólo en el rojo, para que se reconozcan
   entre sí como botones de esta casa y no de una plantilla. La barra dorada
   entra al pasar por encima. */
.btn {
  --bevel: .55rem;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .7rem 1.35rem; min-height: 44px;
  border: 0; border-radius: 3px; cursor: pointer;
  background: var(--accion); color: #fff;
  font: 700 .95rem/1 var(--ui); text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel)),
                     calc(100% - var(--bevel)) 100%, 0 100%);
  transition: background .16s, transform .12s;
}
.btn::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: var(--bevel); height: var(--bevel);
  background: var(--gold);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0; transition: opacity .16s;
}
.btn:hover { background: var(--accion-hot); color: #fff; }
.btn:hover::after { opacity: 1; }
/* Se hunde un píxel: un botón que no responde al dedo se siente roto en el
   teléfono lento donde se va a usar. */
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--line-2); color: var(--muted); cursor: default; }
.btn:disabled::after { opacity: 0; }

.btn.linea {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn.linea:hover { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.linea::after { background: var(--accion); }

.btn.plano {
  background: transparent; color: var(--sea); padding: .6rem .8rem;
  clip-path: none;
}
.btn.plano::after { display: none; }
.btn.plano:hover { background: var(--surface-2); color: var(--sea-hot); }

.btn.ancho { width: 100%; }
.btn.chico { padding: .5rem .9rem; min-height: 38px; font-size: .86rem; --bevel: .42rem; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none; }
}

/* --- LA TARJETA DE CARTA ---
   Una sola, para las tres rejillas: buscar, dentro de un set, y la tienda.
   Tres componentes distintos para lo mismo es como se acaba con tres estilos
   que se parecen pero no encajan.

   La imagen lleva caja de proporción fija reservada. Sin ella, cada foto que
   llega empuja la fila y quien iba a pinchar una carta pincha otra — con
   datos intermitentes eso pasa siempre, no de vez en cuando. */
.cartas {
  display: grid;
  /* 2 / 4 / 5 columnas, gap 16 fijo — medido en la referencia. `auto-fill`
     daba anchos distintos en cada pantalla; la escalera los fija. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px)  { .cartas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1536px) { .cartas { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.carta {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  /* 10px, no 16: un radio grande con borde de 1px sobre una tarjeta pequeña
     engorda la pieza. Los 16 se quedan para los paneles de la ficha. */
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.carta:hover {
  border-color: var(--line-2);
  box-shadow: 0 8px 20px rgba(23,26,21,.10);
  transform: translateY(-2px);
  color: var(--ink);
}
.carta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* La lámina: la carta va enfundada, como en todo el sitio. El fondo es el de
   la funda para que una carta oscura no desaparezca contra el blanco. */
.carta-img {
  position: relative;
  /* 245/342, medido. La proporción va en CSS y no en la imagen: así la
     rejilla no se descuadra cuando una foto no llega — que con el espejado
     incompleto pasa a menudo. */
  aspect-ratio: 245 / 342;
  margin: .75rem .75rem 0;
  border-radius: 10px; overflow: hidden;
  background: var(--surface-2);
  display: grid; place-items: center;
}
.carta-img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(23,26,21,.18));
}
.carta-img .card-back { width: 100%; height: 100%; border-radius: 6px; }

/* `flex:1` y el botón con `margin-top:auto`: sin esto, una tarjeta cuyo set
   ocupa dos líneas empuja su botón más abajo que el de al lado, y una fila de
   botones a alturas distintas es lo primero que se lee como descuidado. */
.carta-b { padding: .7rem .8rem .5rem; display: flex; flex-direction: column; gap: .12rem; flex: 1; }
/* La jerarquía medida: 18 en negrita, 14 atenuado, 16 el precio, 12 el meta.
   Cuatro escalones de TAMAÑO sin un solo cambio de color — el color lo lleva
   sólo el precio, que es el dato que decide. */
.carta-nm {
  font-weight: 700; font-size: 1.06rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* El set va subrayado como en la referencia: se lee como lo que es, un sitio
   al que se puede ir. */
.carta-set {
  font-size: .86rem; color: var(--sea);
  text-decoration: underline; text-underline-offset: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carta-meta { font-size: .78rem; color: var(--muted); font-family: var(--mono); }
.carta-pr {
  margin-top: auto; padding-top: .35rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 1rem; color: var(--price);
}
.carta-pr.vacio { color: var(--muted); font-weight: 400; font-size: .82rem; }

/* El botón de la tarjeta. Yanir lo pidió expresamente: «abajo un botón
   elegante, único, que no sea de IA». Es el mismo corte diagonal del logotipo
   que el resto de botones, en su versión más discreta: contorno, ancho
   completo, y sólo se tiñe al pasar por encima de la tarjeta entera. */
.carta-cta {
  margin: .15rem .8rem .8rem;
  display: block; text-align: center;
  padding: .45rem; min-height: 34px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: 700 .78rem/1.4 var(--ui); color: var(--ink-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .38rem),
                     calc(100% - .38rem) 100%, 0 100%);
  transition: background .15s, color .15s, box-shadow .15s;
}
.carta:hover .carta-cta {
  background: var(--accion); color: #fff; box-shadow: none;
}

/* --- LA COLUMNA DE FILTROS ---
   A la izquierda, pegajosa, con grupos de título + ayuda + opciones. Es lo que
   convierte una rejilla de cartas en un catálogo que se puede recorrer. */
.conf {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}
@media (max-width: 900px) { .conf { grid-template-columns: 1fr; } }

.filtros {
  position: sticky; top: 72px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: .3rem 0;
}
@media (max-width: 900px) { .filtros { position: static; } }
.fgrupo { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.fgrupo:last-child { border-bottom: 0; }
.fgrupo > h3 {
  margin: 0 0 .1rem; font-family: var(--display);
  font-variation-settings: "wdth" 106;
  font-size: .95rem; font-weight: 700;
}
.fgrupo > p { margin: 0 0 .6rem; font-size: .76rem; color: var(--muted); line-height: 1.35; }
.fopt {
  display: flex; align-items: center; gap: .5rem;
  padding: .28rem 0; font-size: .87rem; cursor: pointer;
}
.fopt input { accent-color: var(--accion); width: 15px; height: 15px; }
.fopt .n { margin-left: auto; font-family: var(--mono); font-size: .76rem; color: var(--muted); }

/* --- LAS DOS REJILLAS DE SETS ---
   La de juegos y la de colecciones. Misma pieza, distinta proporción: un juego
   es una marca (ancho, apaisado) y una colección es una caja de cartas. */
.juegos-rej {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 1rem;
}
/* Dos por fila en el teléfono, como las cartas. Con `auto-fill` y 212px de
   mínimo caía a UNA columna: 217 colecciones de Pokémon en una sola tira son
   doscientos deslizamientos para llegar a la de este mes. */
@media (max-width: 560px) {
  .juegos-rej { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
}
.juego-t {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.juego-t:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 24px rgba(23,26,21,.12);
  transform: translateY(-2px); color: var(--ink);
}
/* La portada es una carta real del juego, no un logotipo: no tenemos los
   logos y no se pueden inventar. La carta más cara con imagen espejada
   representa la colección mejor que un rectángulo con el nombre dentro — y
   además es la que la gente asocia con ese set, porque es la que persigue. */
/* Fondo CLARO por defecto, no la banda oscura: la portada de una colección es
   su logotipo, y estos logotipos vienen recortados de fondo blanco y están
   dibujados para leerse sobre claro. Es también lo que hace la referencia.
   Sólo cuando no hay logotipo (`.con-rotulo`) se pasa a oscuro, porque ahí lo
   que manda es el nombre en blanco sobre una carta. */
.juego-img {
  aspect-ratio: 16 / 11; background: var(--surface);
  display: grid; place-items: center; overflow: hidden; position: relative;
}
.juego-img.con-rotulo { background: var(--shell); }
/* --- LA PORTADA CUANDO NO HAY LOGOTIPO ---

   Sólo 57 de 458 colecciones tienen logotipo, así que ESTO es lo que se ve el
   88% de las veces: no es un caso de respaldo, es la portada normal. La carta
   va desenfocada y oscura detrás, y el nombre encima en la tipografía de la
   casa a ancho expandido. Se lee como una portada decidida.

   Los que faltan se sueltan en `brand/sets/<slug>.png` y sustituyen a esto sin
   tocar código; `brand/juegos/LEEME.md` explica el nombre y el formato. */
.juego-img .rotulo {
  position: absolute; inset: 0; z-index: 1;
  display: grid; padding: 1rem; text-align: center;
  /* Dos hijos ahora (el nombre y la barra): `align-content` centra el bloque
     entero, que es lo que `place-items` dejó de hacer al aparecer el segundo. */
  align-content: center; justify-items: center;
}
.juego-img .rotulo span {
  font-family: var(--display);
  font-variation-settings: "wdth" 122;
  font-weight: 800; font-size: clamp(.95rem, 2.4vw, 1.35rem);
  line-height: 1.05; letter-spacing: -.01em;
  color: #fff; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  text-wrap: balance;
  /* «Starter Deck 31: RED Monkey.D.Luffy» no tiene un solo espacio donde
     romper y se salía por los dos lados de la tarjeta. `anywhere` parte
     dentro de la palabra antes que desbordar. */
  max-width: 100%; overflow-wrap: anywhere;
}
/* El nombre COMPLETO va en el pie, justo debajo, así que recortarlo aquí no
   esconde nada: evita que «Adventure on Kami's Island Release Event Cards»
   llene la portada de borde a borde y tape la carta. */
.juego-img .rotulo > span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
/* La barra del logotipo bajo el nombre: la misma pieza que separa la promesa
   de la herramienta en la portada. Ata la tarjeta al resto de la marca.

   Cuelga del contenedor, NO del span del nombre: dentro iría bajo el
   `line-clamp` y un nombre de cuatro líneas se la comería. */
.juego-img .rotulo::after {
  content: ""; width: 2.6rem; height: 3px;
  margin-top: .5rem; border-radius: 2px; background: var(--gold);
}
/* La carta se difumina y se apaga SIEMPRE: es fondo, no contenido — da igual
   que encima vaya el nombre o el logotipo. Estaba atada sólo a `con-rotulo`, y
   con logotipo la carta quedaba a plena nitidez: el borde blanco de una carta
   Pokémon ampliada rodeaba el logotipo de blanco y lo tapaba. */
.juego-img img:not(.logo) {
  filter: blur(3px) saturate(.85) brightness(.52);
  transform: scale(1.08);
}
/* La carta llena el recuadro apaisado y se sale por arriba y por abajo: se ve
   el centro de la ilustración, que es lo que identifica la colección, en vez
   de una carta entera diminuta con dos franjas negras a los lados.

   `position:absolute` y no `min-height` sobre un hijo de grid: ahí la altura
   colapsaba a cero y la portada salía negra aunque la imagen hubiera cargado
   —comprobado, naturalWidth 200 y aun así invisible. */
.juego-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
/* El velo sólo existe para que el nombre se lea encima de la carta. Con
   logotipo no hay carta debajo y oscurecería el fondo claro. */
.juego-img.con-rotulo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,22,19,.15) 0 18%, transparent 45%, rgba(20,22,19,.6));
}
/* El logotipo, que es LA portada: centrado, grande y sin nada encima. Sin
   placa ni sombra — el fondo de la tarjeta ya es claro, que es sobre lo que
   están dibujados. Ancho fijo y no `max-*` para que todos ocupen lo mismo:
   una rejilla donde cada logotipo se escala a su antojo se lee como un
   recorte, no como un catálogo. */
.juego-img img.logo {
  position: absolute; inset: 0; margin: auto;
  width: 84%; height: 68%; object-fit: contain;
}
/* Altura fija del pie: sin ella, «Dragon Ball Fusion World» se parte en dos
   líneas y descoloca toda su fila de la rejilla. */
.juego-b {
  padding: .85rem .95rem 1.05rem; display: grid; gap: .2rem;
  align-content: start; min-height: 4.9rem; text-align: center;
  border-top: 1px solid var(--line);
}
.juego-b b {
  font-family: var(--display); font-variation-settings: "wdth" 108;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  text-wrap: balance;
}
.juego-b span { font-size: .78rem; color: var(--muted); font-family: var(--mono); }
/* La etiqueta de fecha en la esquina, como en la referencia. Dice de un
   vistazo si una colección es de este año o de hace diez.
   Clara sobre la portada clara; sobre carbón se invierte más abajo. */
.juego-fecha {
  /* Por encima del rótulo (z-index 1): con nombres largos el texto le pasaba
     por debajo y la fecha quedaba ilegible sobre las letras. */
  position: absolute; z-index: 2; top: .5rem; right: .5rem;
  padding: .2rem .5rem; border-radius: 999px;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--line);
  font: 600 .68rem/1 var(--ui);
}
.juego-img.con-rotulo .juego-fecha {
  background: rgba(20,22,19,.72); color: var(--shell-txt);
  border-color: transparent; backdrop-filter: blur(4px);
}

/* --- LA FICHA DE CARTA, en tres columnas ---
   Reparto medido en la referencia: foto span 3, historial span 5, dinero
   span 4, y los vendedores a lo ancho. */
.apilado { display: grid; gap: 1rem; align-content: start; }

.ficha-foto { padding: 1rem 1rem 0; }
.ficha-foto img, .ficha-foto .card-back {
  width: 100%; display: block; border-radius: 8px;
}
.ficha-foto img { filter: drop-shadow(0 6px 18px rgba(23,26,21,.2)); }
.ficha-foto figcaption {
  padding: .75rem .1rem .95rem; font-size: .74rem; color: var(--muted); line-height: 1.35;
}

/* El bloque de dinero: la cifra que decide, en grande y en monoespaciada. */
.ficha-desde {
  margin: 0 0 .9rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.ficha-desde span { font-size: .8rem; color: var(--muted); }
.ficha-desde b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.7rem; font-weight: 700; color: var(--price); letter-spacing: -.02em;
}
.ficha-desde small { font-size: .76rem; color: var(--muted); margin-left: auto; }

/* El control de tramo del historial vive en la cabecera del panel, a la
   derecha, como el 1M/3M/6M/1Y de la referencia. */
.caja-h .ranges { display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.caja-h .ranges button {
  border: 0; background: transparent; cursor: pointer;
  padding: .25rem .7rem; border-radius: 999px;
  font: 700 .76rem/1 var(--ui); color: var(--muted);
}
.caja-h .ranges button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* --- LOS FILTROS EN MÓVIL, Y LA FILA DE LO QUE ESTÁ FILTRANDO ---

   Dos cosas medidas en la referencia que faltaban:

   1. Por debajo de 1280 la columna de filtros DESAPARECE y se sustituye por un
      botón. Hoy los filtros ocupaban una pantalla entera de 375 antes de la
      primera carta: quien entra a buscar una carta ve una lista de casillas.
   2. Una fila de pastillas encima de la rejilla con lo que está filtrado ahora
      mismo, y un «Quitar todo». Es la única parte de la pantalla que responde
      a «¿por qué veo tan pocas?».

   El ancho del aside es fluido, como el suyo: 225 a 1280, 255 a 1440, 273 a
   1536 — un 18,5% del contenido. */
@media (min-width: 901px) {
  .conf { grid-template-columns: clamp(225px, 18.5%, 273px) minmax(0, 1fr); }
}

.fbarra {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 .9rem;
}
.fchip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .6rem .35rem .75rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font: 500 .78rem/1 var(--ui); cursor: pointer;
}
.fchip:hover { border-color: var(--accion); }
.fchip .x { font-size: 1rem; line-height: .7; color: var(--muted); }
.fchip:hover .x { color: var(--accion); }
.fbarra .quitar {
  border: 0; background: none; cursor: pointer; padding: 0 .3rem;
  font: 500 .8rem/1 var(--ui); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.fbarra .quitar:hover { color: var(--ink); }

/* El botón que abre los filtros, sólo en pantalla estrecha. */
.fabrir { display: none; }
@media (max-width: 900px) {
  .fabrir { display: inline-flex; }
  /* Los filtros pasan a estar plegados. `hidden` de HTML no basta: el
     contenedor de rejilla les seguiría dando su celda. */
  .filtros[data-plegado="1"] { display: none; }
}

/* --- LAS DOS FOTOS OBLIGATORIAS: FRENTE Y DORSO ---
   Dos huecos del tamaño de una carta, uno al lado del otro. Se enseñan los dos
   desde el principio, vacíos: así se ve de un vistazo que hacen falta dos y
   cuáles, en vez de descubrirlo al pulsar Publicar. */
.fotos2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem;
}
.f2-caja {
  display: grid; gap: .4rem; cursor: pointer;
  padding: .7rem; border-radius: 12px;
  border: 1px dashed var(--line-2); background: var(--surface);
  transition: border-color .15s, background .15s;
}
.f2-caja:hover { border-color: var(--sea); }
.f2-caja b {
  font-family: var(--display); font-variation-settings: "wdth" 108;
  font-size: .95rem;
}
.f2-vista {
  aspect-ratio: 245 / 342; border-radius: 8px; overflow: hidden;
  background: var(--surface-2); display: grid; place-items: center;
}
.f2-vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f2-vista span { font: 600 .78rem var(--ui); color: var(--muted); }
.f2-nota { margin: 0; font-size: .74rem; color: var(--muted); line-height: 1.35; }
/* Verde de precio para «lista»: es el único verde del sistema y aquí significa
   lo mismo — esto ya está resuelto. */
.f2-caja.lista { border-style: solid; border-color: var(--price); }
.f2-caja.lista .f2-nota { color: var(--price); }
.f2-caja.subiendo { opacity: .7; }
@media (max-width: 420px) {
  .fotos2 { gap: .55rem; }
  .f2-caja { padding: .5rem; }
}

/* --- EL MURO DE LOGOTIPOS DEL HERO ---
   Lo que ocupa el hueco de la derecha cuando no hay cartas cargables. En
   producción es el caso normal: las imágenes de catálogo se piden al CDN de
   origen y no llegan, mientras que estos archivos son nuestros.
   Van sobre placa clara porque están recortados de fondo blanco: sobre el
   carbón del hero, los oscuros desaparecen. */
.hero-logos {
  /* `minmax(0, 1fr)` y no `1fr`: un elemento de rejilla tiene `min-width:auto`,
     así que el ancho natural del logotipo estiraba su columna y la cuarta se
     salía de la pantalla — medido, 1531px en un viewport de 1512. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem;
  align-content: center; min-width: 0;
}
.hero-logos .hl {
  display: grid; place-items: center; padding: .55rem;
  aspect-ratio: 16 / 10; border-radius: 10px;
  background: rgba(236,239,232,.94);
  transition: transform .18s ease, background .18s ease;
}
.hero-logos .hl:hover { transform: translateY(-3px); background: #fff; }
.hero-logos img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
@media (max-width: 900px) {
  .hero-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  /* Cuatro bastan en el teléfono: ocho empujan el titular fuera de pantalla, y
     el titular es lo que tiene que leerse primero. */
  .hero-logos .hl:nth-child(n+5) { display: none; }
}

/* --- LOS LOGOTIPOS DENTRO DE CADA JUEGO DEL CATÁLOGO ---
   Las cuatro colecciones más recientes. Un nombre y una cifra no dicen si el
   catálogo está al día; reconocer el set de este mes, sí. */
.game .logos {
  /* Dos por fila, no cuatro: a cuatro salían a 56px y no se leía ninguno, que
     es lo mismo que no ponerlos. */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem;
  margin: .6rem 0 .2rem;
}
.game .logos img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: contain;
  padding: .35rem; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--line);
}

/* --- LOS TRES CAMINOS PARA PUBLICAR ---
   Cada recuadro lleva en el canto superior un color de la banda del Metro de
   Caracas: rojo Línea 1, amarillo, azul Línea 2. Es señalética, no decoración
   — el color identifica el camino igual que identifica una línea, y por eso
   son bandas macizas y no degradados.

   El VERDE no está aquí, y esa ausencia es la regla: es el color del precio en
   toda la interfaz. En cuanto se usa para otra cosa deja de significar eso. */
.caminos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem; margin-top: .4rem;
}
.camino {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.4rem 1.3rem 1.1rem;
  text-decoration: none; color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* La banda va DENTRO del radio, no encima: un borde de color recto sobre una
   caja redondeada deja dos picos en las esquinas. */
.camino::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  border-radius: 14px 14px 0 0; background: var(--cm);
}
.camino.rojo     { --cm: var(--accion); }
.camino.amarillo { --cm: var(--gold); }
.camino.azul     { --cm: var(--sea); }
.camino:hover {
  transform: translateY(-3px);
  border-color: var(--cm);
  box-shadow: 0 10px 26px rgba(20,22,19,.10);
}
.camino:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.cm-n {
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  color: var(--cm); letter-spacing: .08em;
}
.camino h2 {
  font-family: var(--display); font-variation-settings: "wdth" 112;
  font-size: 1.22rem; font-weight: 800; letter-spacing: -.015em;
  margin: .35rem 0 .5rem; line-height: 1.15; text-wrap: balance;
}
.cm-para { margin: 0 0 .55rem; font-weight: 600; font-size: .92rem; }
.cm-como { margin: 0; font-size: .87rem; color: var(--muted); line-height: 1.5; }
/* El aviso va en el cuerpo de la tarjeta, no al final del proceso: enterarse
   de que faltan las fotos después de pegar doscientas líneas es la peor forma
   posible de saberlo. */
.cm-aviso {
  margin: .7rem 0 0; padding: .55rem .7rem; border-radius: 8px;
  background: var(--surface-2); border-left: 3px solid var(--cm);
  font-size: .82rem; color: var(--muted); line-height: 1.45;
}
.camino.parcial { border-style: dashed; }
.cm-pie {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; margin-top: auto; padding-top: 1rem;
}
.cm-pide { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.cm-cta {
  font-family: var(--display); font-variation-settings: "wdth" 108;
  font-weight: 700; font-size: .9rem; color: var(--ink);
}
.camino:hover .cm-cta { color: var(--cm); }

@media (max-width: 900px) {
  .caminos { grid-template-columns: 1fr; gap: .8rem; }
  .camino { padding: 1.15rem 1.1rem 1rem; }
}