/* =========================================================
   CromoMarket — hoja de estilos
   Identidad: tinta/medianoche, verde césped, dorado foil.
   ========================================================= */

:root {
  /* =========================================================
     IDENTIDAD VISUAL (24/09/2026)
     ---------------------------------------------------------
     Azul noche y grafito de fondo, azul eléctrico de marca, cian
     para brillos y foco, dorado foil para rarezas y precios
     destacados, plata/cromo para texto y filos. El verde, el rojo
     y el naranja se quedan SOLO como colores semánticos (subida,
     bajada, aviso): ya no son color de marca.

     Los nombres antiguos (--claro, --blanco, --cesped…) se
     mantienen como alias sobre los nuevos: así el cambio se hace
     en los tokens y no componente a componente. Lo que antes era
     «claro» ahora es la superficie de la página, que es oscura.
     ========================================================= */

  /* --- Marca --- */
  --fondo:        #060A12;   /* azul noche, no negro plano */
  --superficie:   #0D1424;   /* tarjetas y bloques          */
  --superficie-2: #121C31;   /* superficie elevada          */
  --borde-cromo:  #24324B;   /* filos                       */
  --azul:         #1267FF;   /* principal                   */
  --azul-hundido: #0B47B8;   /* pulsado                     */
  --cian:         #31B8FF;   /* brillos y foco              */
  --plata:        #E7EDF6;   /* texto principal             */
  --dorado:       #F4C84C;   /* rarezas y precio destacado  */
  --dorado-claro: #FFE08A;
  --texto-2:      #96A4BA;   /* texto secundario            */

  /* --- Alias heredados: los componentes ya los usan --- */
  --tinta:   var(--fondo);
  --tinta-2: var(--superficie);
  --tinta-3: var(--superficie-2);
  --claro:   var(--fondo);        /* fondo de página */
  --blanco:  var(--superficie);   /* «papel» de las tarjetas */

  /* El acento de marca era verde; ahora es el azul eléctrico. El
     verde sigue existiendo, pero solo como «sube» (ver abajo). */
  --cesped:        var(--azul);
  --cesped-claro:  var(--cian);
  /* Enlaces y texto de acento sobre fondo oscuro: el azul de marca
     se queda en 3,1:1 sobre #060A12, así que para TEXTO se usa el
     cian, que llega a 8,4:1. */
  --cesped-texto:  var(--cian);
  --enlace:        var(--cian);

  --foil:        var(--dorado);
  --foil-claro:  var(--dorado-claro);

  --texto:                var(--plata);
  --texto-suave:          var(--texto-2);
  --texto-inverso:        var(--plata);
  --texto-inverso-suave:  var(--texto-2);

  /* --- Semánticos: solo estado, nunca marca --- */
  --sube: #29C07A;
  --baja: #FF6B6B;
  --aviso: #F0A93B;
  /* Sobre fondo oscuro los de marca ya contrastan de sobra; estas
     variantes se conservan porque las usan chips con tinte propio. */
  --sube-texto: #4FD79A;
  --baja-texto: #FF8E8E;

  /* --- Colores por rareza (sobre oscuro) --- */
  --r-comun:    #9FB0C6;
  --r-brillo:   #4FA6FF;
  --r-fichaje:  #A182FF;
  --r-estrella: #FF9152;
  --r-limitada: var(--dorado);
  --r-leyenda:  #FF5A55;

  /* --- Geometría / sombras --- */
  --radio: 14px;
  --radio-s: 9px;
  /* En oscuro la sombra sola no separa: se acompaña de un filo de luz. */
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
  --sombra-alta: 0 14px 44px rgba(0, 0, 0, .6);
  --brillo-foco: 0 0 0 3px rgba(49, 184, 255, .45);

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho: 1240px;
}


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

/* NOTA: la regla que hace que [hidden] oculte de verdad está al FINAL
   de este archivo, no aquí. El motivo está explicado allí. */

body {
  margin: 0;
  font-family: var(--cuerpo);
  background: var(--claro);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Todos los números tabulares: precios y estadísticas alineados */
.stat__valor, .precio, .carta__precio, .tabla-fuentes, .estados,
.rango, .tendencia, .ficha-datos { font-variant-numeric: tabular-nums; }

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

/* Foco de teclado visible y consistente en toda la app */
:focus-visible {
  outline: 3px solid var(--cian);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   CABECERA TIPO MARCADOR
   ========================================================= */
.marcador {
  background: var(--tinta);
  color: var(--texto-inverso);
  border-bottom: 3px solid var(--cesped);
  position: relative;
  overflow: hidden;
}
/* Franjas diagonales sutiles, guiño a la equipación */
.marcador::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg,
    rgba(255,255,255,.028) 0 2px, transparent 2px 22px);
  pointer-events: none;
}

.marcador__inner {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
}

.marca { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.marca__logo { display: flex; flex: 0 0 auto; }
.logo { display: block; width: 42px; height: 42px; }
/* La esquina dorada capta un destello al pasar por la cabecera. */
.marca:hover .logo { transform: translateY(-1px) rotate(-2deg); }
.logo { transition: transform .25s ease; }

/* El wordmark va PLANO: a este tamaño un degradado cromado y un
   contorno oscuro solo emborronan las letras. Plata sólida y cian,
   peso 800, una sola línea. */
.marca__nombre {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.62rem;
  letter-spacing: .055em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: #E7EDF6;
}
.marca__nombre span { color: var(--cian); }


/* Panel de stats: cajas de marcador */
.stats { display: flex; gap: 10px; }
.stat {
  background: var(--tinta-2);
  border: 1px solid var(--tinta-3);
  border-radius: var(--radio-s);
  padding: 8px 18px;
  min-width: 92px;
  text-align: center;
}
.stat__label {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--texto-inverso-suave);
  font-weight: 600;
}
.stat__valor {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--foil);
  margin-left: 0;
}
/* Las colecciones en preparación se cuentan aparte: no son catálogo,
   pero tampoco se ocultan. */
.stat__nota { margin: 2px 0 0; font-size: .7rem; color: var(--texto-inverso-suave); }
.stat__nota a { color: inherit; text-decoration: underline; }


/* =========================================================
   CONTENIDO
   ========================================================= */
.contenido {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 28px 20px 64px;
}

/* --------------------- Buscador --------------------- */
.panel-busqueda {
  background: var(--blanco);
  border: 1px solid var(--borde-cromo);
  border-radius: var(--radio);
  padding: 18px;
  box-shadow: var(--sombra);
  margin-bottom: 26px;
}

.buscador { position: relative; display: flex; align-items: center; }
.buscador__lupa {
  position: absolute; left: 14px; color: var(--texto-suave); pointer-events: none;
}
.buscador__input {
  width: 100%;
  padding: 13px 44px 13px 44px;
  border: 2px solid var(--borde-cromo);
  border-radius: 10px;
  background: var(--superficie-2);
  color: var(--plata);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.buscador__input::placeholder { color: var(--texto-2); }
.buscador__input:hover { border-color: #33456A; }
/* Chrome pinta su propia "x" en los input[type=search]. Como tenemos un
   botón de limpiar propio (accesible y con su aria-label), se quita la
   nativa: si no, aparecen dos aspas juntas. */
.buscador__input::-webkit-search-cancel-button,
.buscador__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.buscador__input:focus {
  outline: none;
  border-color: var(--cian);
  background: var(--superficie-2);
  box-shadow: var(--brillo-foco);
}
.buscador__input:focus-visible { outline: none; }
.buscador__limpiar {
  position: absolute; right: 8px;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--superficie-2); color: var(--texto-suave);
  font-size: 1.3rem; line-height: 1; display: grid; place-items: center;
}
.buscador__limpiar:hover { background: #D3DCE6; color: var(--texto); }

/* --------------------- Filtros --------------------- */
.filtros {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin-top: 14px;
}
.filtro { display: flex; flex-direction: column; gap: 4px; flex: 1 1 165px; min-width: 145px; }
.filtro label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--texto-suave);
}
.filtro select {
  padding: 9px 10px;
  border: 1px solid var(--borde-cromo);
  border-radius: 8px;
  background: var(--blanco);
  cursor: pointer;
}
.filtro select:focus { outline: none; border-color: var(--cesped); box-shadow: 0 0 0 3px rgba(21,160,91,.13); }
.filtro select:focus-visible { outline: none; }

.btn-reset {
  padding: 9px 16px;
  border: 1px solid var(--borde-cromo);
  border-radius: 8px;
  background: var(--claro);
  font-weight: 600; font-size: .85rem;
  color: var(--texto-suave);
}
.btn-reset:hover { background: var(--superficie-2); color: var(--texto); }

.resultado-contador {
  margin-top: 14px;
  font-size: .82rem;
  color: var(--texto-suave);
}
.resultado-contador strong { color: var(--texto); }

/* =========================================================
   REJILLA DE CARTAS
   ========================================================= */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
}

.carta {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde-cromo);
  border-radius: var(--radio);
  overflow: hidden;
  text-align: left;
  padding: 0;
  display: flex; flex-direction: column;
  box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.carta:hover, .carta:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
  border-color: #33456A;
}

/* --- Miniatura: iniciales del jugador sobre fondo del club --- */
.carta__mini {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, var(--club-a, #223) 0%, var(--club-b, #112) 100%);
  display: grid; place-items: center;
  overflow: hidden;
}
.carta__mini::after {   /* brillo estático de fondo */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.20), transparent 58%);
  pointer-events: none;
}

/* --- Imagen real descargada ---
   Va SOBRE el respaldo generado (z-index 1 frente a 0) y aparece con
   una transición al cargar. El contenedor tiene aspect-ratio fijo, así
   que el layout nunca salta. Si la imagen falla, el JS la elimina y
   queda a la vista el respaldo que ya estaba debajo. */
.carta__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;   /* encuadra la cara, no el pecho */
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease;
}
.carta__img--lista { opacity: 1; }
/* Velo inferior: da contraste al nombre y al dorsal sobre la foto. */
.carta__velo {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top,
    rgba(11,21,36,.72) 0%, rgba(11,21,36,.15) 38%, transparent 62%);
  pointer-events: none;
}

/* --- Respaldo generado: siempre debajo, hace de skeleton y de red --- */
.carta__respaldo { position: absolute; inset: 0; z-index: 0; }
/* El escudo esquemático y el nombre suelto los sustituye la carta de
   referencia (ver «SISTEMA VISUAL DE IMÁGENES», al final del fichero):
   un escudo genérico sobre azul parecía un error de carga. */
/* Si la imagen falla al cargar, el JS marca esto y se ve el degradado. */
.carta__mini--sin-img .carta__velo { display: none; }

.carta__dorsal {
  position: absolute; bottom: 8px; right: 10px;
  font-family: var(--display); font-weight: 700;
  font-size: 1.15rem; color: rgba(255,255,255,.85);
  letter-spacing: .04em; z-index: 1;
}
.carta__equipo-tag {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(11,21,36,.62);
  backdrop-filter: blur(4px);
  color: #fff; font-size: .64rem; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  /* Reserva sitio para la etiqueta de rareza, que va arriba a la
     derecha: sin esto, los nombres largos pasaban por debajo de ella. */
  max-width: calc(100% - 96px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carta__escudo {
  width: 11px; height: 13px; flex: 0 0 auto; border-radius: 2px;
  background: var(--club-a, #999);
  box-shadow: inset 0 -4px 0 var(--club-b, #666);
}

/* --- Etiqueta de rareza --- */
.rareza {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 9px; border-radius: 999px;
  color: #fff; background: var(--r-comun);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.rareza--comun    { background: var(--r-comun); }
.rareza--brillo   { background: var(--r-brillo); }
.rareza--fichaje  { background: var(--r-fichaje); }
.rareza--estrella { background: var(--r-estrella); }
.rareza--limitada { background: var(--r-limitada); color: #4A3708; }
.rareza--leyenda  { background: var(--r-leyenda); }

/* ---------------------------------------------------------
   ELEMENTO FIRMA: barrido foil
   ---------------------------------------------------------
   Se aplica SOLO a las series que llevan acabado metalizado de
   verdad (Extra Gold, Kromix, MGK Élite, Iconos, Edición Limitada…),
   según el campo `foil` de collections.json. No es decoración por
   rareza: es una propiedad física del cromo.

   Va con z-index 2, por encima de la imagen real y del velo, para que
   el brillo recorra la foto y no quede escondido debajo.
   --------------------------------------------------------- */
.carta--foil .carta__mini::before {
  content: '';
  position: absolute;
  top: -60%; left: -80%;
  width: 55%; height: 220%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.62) 50%,
    rgba(230,185,77,.55) 62%,
    transparent 100%);
  transform: rotate(16deg);
  z-index: 2;
  animation: barrido-foil 4.2s ease-in-out infinite;
}
.carta--leyenda .carta__mini::before { animation-duration: 3.2s; }

@keyframes barrido-foil {
  0%   { left: -80%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* Marco dorado/rojo en las rarezas altas */
.carta--limitada { border-color: rgba(230,185,77,.75); }
.carta--limitada:hover { box-shadow: var(--sombra-alta), 0 0 0 3px rgba(230,185,77,.28); }
.carta--leyenda  { border-color: rgba(196,52,47,.6); }
.carta--leyenda:hover { box-shadow: var(--sombra-alta), 0 0 0 3px rgba(196,52,47,.22); }

/* --- Cuerpo de la tarjeta --- */
.carta__cuerpo { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.carta__nombre {
  font-family: var(--display);
  font-size: 1.32rem; font-weight: 600; line-height: 1.12;
  letter-spacing: .01em;
}
.carta__meta {
  font-size: .71rem; color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carta__pie {
  margin-top: auto; padding-top: 10px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.carta__precio {
  font-family: var(--display);
  font-size: 1.7rem; font-weight: 700; line-height: 1;
  color: var(--plata);
}
.carta__precio small { font-size: .95rem; font-weight: 600; margin-left: 1px; }

.tendencia {
  font-size: .78rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 6px;
}
.tendencia--sube { color: var(--sube-texto); background: rgba(18,160,91,.11); }
.tendencia--baja { color: var(--baja-texto); background: rgba(214,69,69,.11); }
.tendencia__flecha { font-size: .7rem; line-height: 1; }

/* =========================================================
   CARGA PROGRESIVA
   ========================================================= */
.cargar-mas {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 0 10px;
}
.cargar-mas__info {
  font-size: .8rem; color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   SKELETONS — mientras cargan imágenes y precios
   ========================================================= */
@keyframes latido-skeleton {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}
.skeleton {
  background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie-2) 50%, var(--superficie-2) 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: latido-skeleton 1.4s ease-in-out infinite;
}
/* La imagen reserva su hueco: el layout no salta al cargar. */
.carta__mini { background-color: var(--club-a, #223); }

/* =========================================================
   GRÁFICO DE EVOLUCIÓN
   ========================================================= */
.grafico { margin: 0; }
.grafico__svg {
  width: 100%; height: auto;
  display: block;
  background: var(--claro);
  border: 1px solid var(--borde-cromo);
  border-radius: 10px;
}
.grafico__pie {
  margin-top: 8px;
  font-size: .76rem; color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.grafico-vacio {
  font-size: .84rem; color: var(--texto-suave);
  background: var(--claro);
  border: 1px dashed #D5DEE7;
  border-radius: 10px;
  padding: 18px 16px;
  line-height: 1.5;
}
.grafico-vacio strong { color: var(--texto); }
/* Hueco del gráfico mientras se consulta D1: misma altura que el SVG,
   así la ficha no da un salto cuando llegan los datos. */
.grafico-skeleton { width: 100%; aspect-ratio: 640 / 180; border-radius: 10px; }

/* =========================================================
   ESTADO VACÍO
   ========================================================= */
.vacio {
  text-align: center;
  padding: 72px 20px;
  color: var(--texto-suave);
}
.vacio__icono { color: #C3CEDB; margin-bottom: 8px; }
.vacio h2 { font-family: var(--display); font-size: 1.9rem; color: var(--texto); letter-spacing: .01em; }
.vacio p { margin: 6px 0 18px; }

/* El verde de marca con texto blanco se queda en 3,4:1. El boton usa
   un tono apenas mas oscuro para pasar de 4,5:1 sin dejar de ser el
   mismo verde; los fondos y filos siguen con --cesped. */
.btn-primario {
  background: var(--azul-hundido); color: #fff;
  border: 0; border-radius: 9px;
  padding: 11px 22px; font-weight: 600;
  box-shadow: 0 3px 10px rgba(21,160,91,.3);
}
.btn-primario:hover { background: #0B6E3B; }

/* =========================================================
   MODAL — FICHA DE CARTA
   ========================================================= */
.modal-fondo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11, 21, 36, .72);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 20px;
  overflow-y: auto;
  animation: aparecer .16s ease;
  /* Solo intercepta clics cuando está realmente abierto. Junto con la
     regla [hidden] de arriba, hacen falta las dos cosas para que el
     overlay no bloquee la página cerrada. */
  pointer-events: auto;
}
/* Estado cerrado explícito: ni se ve ni se puede pulsar a través de él. */
.modal-fondo[hidden] {
  display: none !important;
  pointer-events: none !important;
}
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }

.modal {
  position: relative;
  background: var(--blanco);
  border-radius: 18px;
  width: min(880px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  animation: subir .2s ease;
}
@keyframes subir { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }

.modal__cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 1.6rem; line-height: 1; display: grid; place-items: center;
  transition: background .15s;
}
.modal__cerrar:hover { background: rgba(255,255,255,.3); }

/* --- Cabecera de la ficha --- */
.ficha-cab {
  background: var(--tinta);
  color: var(--texto-inverso);
  padding: 26px 28px 22px;
  border-radius: 18px 18px 0 0;
  position: relative; overflow: hidden;
}
.ficha-cab::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px);
}
/* --- Imagen grande de la carta en la ficha --- */
.ficha-img {
  position: absolute; top: 22px; right: 26px; z-index: 3;
  width: 132px; margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--club-a, #223), var(--club-b, #112));
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
}
.ficha-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }
/* El mismo barrido foil que en la rejilla, sobre la imagen grande. */
.ficha-img--foil::after {
  content: ''; position: absolute; top: -60%; left: -80%;
  width: 55%; height: 220%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.55) 50%, rgba(230,185,77,.5) 62%, transparent 100%);
  transform: rotate(16deg);
  animation: barrido-foil 4.2s ease-in-out infinite;
}
/* Con la imagen a la derecha, el texto de la cabecera se estrecha. */
.ficha-cab:has(.ficha-img) h2,
.ficha-cab:has(.ficha-img) .ficha-cab__sub,
.ficha-cab:has(.ficha-img) .ficha-cab__top { padding-right: 150px; }

.ficha-cab__top { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; position: relative; }
.ficha-cab__top .rareza { position: static; box-shadow: none; }
.ficha-cab__club {
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-inverso-suave);
}
.ficha-cab h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.05;
  letter-spacing: .02em; color: #fff; position: relative;
}
.ficha-cab__sub { font-size: .86rem; color: var(--texto-inverso-suave); position: relative; }

/* --- Bloque de precio principal --- */
.precio-bloque {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px;
  margin-top: 18px; position: relative;
}
.precio-principal { display: flex; flex-direction: column; }
.precio-principal__label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--texto-inverso-suave); font-weight: 600;
}
.precio {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.8rem, 9vw, 4rem); line-height: 1;
  color: var(--foil);
}
.precio small { font-size: .5em; }

.rango {
  display: flex; gap: 16px; padding-bottom: 6px;
}
.rango div { display: flex; flex-direction: column; }
.rango dt, .rango .rango__label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-inverso-suave); font-weight: 600;
}
.rango .rango__valor {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 1.1;
}

.badge-fuente {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: var(--texto-inverso-suave);
  margin-top: 12px; position: relative;
}
.badge-fuente--vivo { background: rgba(21,160,91,.22); color: #7FE3AF; }
.badge-fuente--error { background: rgba(214,69,69,.2); color: #FFAFAF; }
/* Aviso informativo: falta configurar algo, pero NO es un fallo.
   Se distingue del rojo a propósito: un estado esperado no debe
   parecer una avería. */
.badge-fuente--aviso { background: rgba(230,185,77,.2); color: var(--foil-claro); }
.badge-fuente code {
  background: rgba(0,0,0,.28); padding: 1px 5px; border-radius: 4px;
  font-size: .92em;
}
.badge-fuente strong { color: #fff; }
/* Dato leído de la base: no se ha llamado a ninguna fuente. */
.badge-fuente--guardado { background: rgba(230,185,77,.18); color: var(--foil-claro); }

/* ---------------------------------------------------------
   Precio real vs estimación de partida
   Se distingue de un vistazo: el dato medido va en dorado sólido,
   la estimación en un tono apagado y con una tilde "~" delante.
   --------------------------------------------------------- */
.sello {
  display: inline-block;
  font-size: .58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 999px;
  margin-left: 6px; vertical-align: middle;
}
.sello--real     { background: rgba(21,160,91,.26);  color: #7FE3AF; }
.sello--estimado { background: rgba(255,255,255,.12); color: var(--texto-inverso-suave); }

.precio--estimado { color: var(--texto-inverso-suave); }

.precio-actualizado {
  font-size: .72rem;
  color: var(--texto-inverso-suave);
  margin-top: 4px;
}
.precio-actualizado strong { color: var(--texto-inverso); font-weight: 600; }

/* En la rejilla: la estimación va más apagada y con tilde delante */
.carta__precio--estimado { color: var(--texto-suave); }
.marca-est {
  font-style: normal; font-size: .8rem; font-weight: 600;
  color: var(--texto-suave); margin-left: 2px; opacity: .8;
}

.dato-vacio { color: var(--texto-suave); font-style: italic; font-weight: 500; }

/* Aviso de producto premium: sus precios se buscan distinto. */
.nota-legal--premium {
  border-left-color: #7B241C;
  background: rgba(255,107,107,.12);
}

/* Precio sostenido sobre muy pocos anuncios: se atenúa a propósito
   para que no se lea como un dato firme. */
.nota-legal--dudoso { border-left-color: #E67E22; background: rgba(240,169,59,.14); }
.sello--dudoso { background: rgba(230,126,34,.28); color: #F5B041; }
.precio--dudoso { opacity: .82; }

/* Línea de trazabilidad del filtrado, bajo el desglose. */
.nota-filtrado {
  font-size: .75rem;
  color: var(--texto-suave);
  padding: 8px 0 0;
  font-variant-numeric: tabular-nums;
}
.nota-filtrado strong { color: var(--texto); }

/* Tirada de una variante: cuanto más baja, más cotizada. Va bajo la
   etiqueta de serie, en la esquina de la miniatura. */
.tirada {
  position: absolute; top: 30px; right: 8px; z-index: 2;
  font-size: .56rem; font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(11,21,36,.72);
  color: #fff;
  backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
}

/* Fila con la insignia de estado y el botón de refresco */
.ficha-estado {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; position: relative;
}
.ficha-estado .badge-fuente { margin-top: 0; }

.btn-refrescar {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1);
  color: var(--texto-inverso);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .74rem; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.btn-refrescar:hover:not(:disabled) {
  background: var(--cesped); border-color: var(--cesped); color: #fff;
}
/* Deshabilitado MIENTRAS consulta: el cursor de espera es correcto. */
.btn-refrescar:disabled { opacity: .6; cursor: progress; }
/* Deshabilitado por FALTA DE CONFIGURACIÓN: no hay nada en curso, así
   que "progress" mentiría. Aquí la acción es imposible, no lenta. */
.btn-refrescar--bloqueado:disabled { cursor: not-allowed; }

/* Marca "est." en una tendencia todavía estimada, no calculada */
.rango__est {
  font-size: .85em; opacity: .7; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.punto {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.badge-fuente--vivo .punto { animation: latir 1.6s ease-in-out infinite; }
@keyframes latir { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* --- Cuerpo de la ficha --- */
.ficha-cuerpo { padding: 24px 28px 30px; display: grid; gap: 26px; }
/* Los hijos de un grid arrancan con min-width:auto, que equivale a su
   ancho MINIMO de contenido: por eso una tabla ancha empujaba a toda la
   seccion fuera del recorte de la ficha en moviles estrechos, en vez de
   encogerla. Con min-width:0 la seccion si encoge, y quien se desplaza
   es la tabla dentro de su envoltorio. */
.ficha-cuerpo > * { min-width: 0; }

.seccion h3 {
  font-family: var(--display);
  font-size: 1.28rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--plata);
  padding-bottom: 7px; margin-bottom: 12px;
  border-bottom: 2px solid var(--borde-cromo);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.seccion h3 .nota {
  font-family: var(--cuerpo); font-size: .68rem; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--texto-suave);
}

/* Tabla de fuentes */
/* Una tabla no encoge por debajo de su ancho minimo. En movil, dentro
   de la ficha (que recorta lo que se sale), la columna del precio se
   quedaba fuera y no habia forma de llegar a ella. Con el envoltorio,
   la tabla se desplaza sola y la pagina no. */
.tabla-desplazable { overflow-x: auto; }
.tabla-fuentes { width: 100%; min-width: 300px; border-collapse: collapse; font-size: .86rem; }
.tabla-fuentes th {
  text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-suave); font-weight: 700; padding: 0 10px 8px 0;
}
.tabla-fuentes th:not(:first-child), .tabla-fuentes td:not(:first-child) { text-align: right; }
.tabla-fuentes td { padding: 9px 10px 9px 0; border-top: 1px solid var(--borde-cromo); }
.tabla-fuentes tr:first-child td { border-top: 0; }
.fuente-nombre { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.fuente-punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.fuente-precio { font-weight: 700; font-family: var(--display); font-size: 1.15rem; }
.fuente-tag {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 4px; background: var(--borde-cromo); color: var(--texto-suave);
}
.fuente-tag--vivo { background: rgba(41,192,122,.16); color: var(--sube-texto); }

/* ---------------------------------------------------------
   FRESCURA DEL DATO, FUENTE POR FUENTE
   ---------------------------------------------------------
   Desde que la recogida está repartida entre el servidor y un equipo
   doméstico que solo corre cuando está encendido, dos precios de la
   misma ficha pueden tener días de diferencia. La columna "Dato de" lo
   dice, y una fuente atrasada se atenúa con un aviso ámbar en vez de
   pintarse como el resto: no es un error —el precio sigue siendo el
   último que se midió— pero tampoco es información de hoy.
   --------------------------------------------------------- */
.fuente-fecha {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .78rem; color: var(--texto-suave); white-space: nowrap;
}
/* En móvil la columna es estrecha: textos como «Pendiente de
   verificación · última comprobación …» se cortaban a media palabra. */
@media (max-width: 560px) {
  .fuente-fecha { white-space: normal; overflow-wrap: anywhere; }
}
.fuente-fecha--vacia { opacity: .45; }
.fuente-fecha--vieja { color: #F0A93B; }
.fuente-tag--viejo { background: rgba(240,169,59,.18); color: #F0A93B; }
/* El origen va en pequeño: es contexto, no el dato. */
.fuente-origen { font-size: .68rem; opacity: .7; }
/* Enlace al anuncio concreto que sostiene el precio: sin él, el dato no
   se puede comprobar. Va discreto, pero siempre visible. */
.fuente-origen-enlace {
  font-size: .68rem; font-weight: 600; white-space: nowrap;
  color: var(--enlace, #1B5E8C); text-decoration: underline;
}
.fuente-origen-enlace:hover { text-decoration: none; }
.fila-vieja { background: rgba(224,155,58,.05); }

.aviso-frescura {
  display: inline-block; margin-left: 8px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(224,155,58,.18); color: #F0A93B;
  cursor: help; white-space: nowrap;
}

/* Precio por estado de conservación */
.estados { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.estado {
  background: var(--claro);
  border: 1px solid var(--borde-cromo);
  border-radius: 10px;
  padding: 11px 12px;
  text-align: center;
}
.estado--destacado { border-color: var(--cesped); background: rgba(21,160,91,.07); }
.estado__nombre {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-suave);
}
.estado__precio {
  font-family: var(--display); font-size: 1.55rem; font-weight: 700; line-height: 1.15; color: var(--plata);
}
.estado__mult { font-size: .64rem; color: var(--texto-suave); }

/* Ficha de datos */
.ficha-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--borde-cromo); border: 1px solid var(--borde-cromo); border-radius: 10px; overflow: hidden;
}
.ficha-datos div { background: var(--blanco); padding: 11px 13px; }
.ficha-datos dt {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-suave); font-weight: 700;
}
.ficha-datos dd { margin: 2px 0 0; font-weight: 600; font-size: .92rem; }

/* Anuncios de muestra de eBay */
.anuncios { display: flex; flex-direction: column; gap: 8px; }
.anuncio {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--borde-cromo); border-radius: 9px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.anuncio:hover { border-color: var(--cesped); background: rgba(21,160,91,.05); }
.anuncio__titulo { font-size: .84rem; line-height: 1.35; }
.anuncio__cond { font-size: .68rem; color: var(--texto-suave); }
.anuncio__precio {
  font-family: var(--display); font-size: 1.25rem; font-weight: 700;
  white-space: nowrap; color: var(--plata);
}

/* Cargando */
.cargando { display: inline-flex; align-items: center; gap: 8px; }
.spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  animation: girar .7s linear infinite;
  display: inline-block;
}
.spinner--oscuro { border-color: rgba(255,255,255,.35); border-top-color: var(--foil); }
@keyframes girar { to { transform: rotate(360deg) } }

.nota-legal {
  font-size: .76rem; color: var(--texto-suave);
  background: var(--claro); border-left: 3px solid var(--foil);
  padding: 11px 14px; border-radius: 0 8px 8px 0;
}

/* =========================================================
   PIE
   ========================================================= */
.pie {
  background: var(--tinta);
  color: var(--texto-inverso-suave);
  border-top: 3px solid var(--cesped);
  padding: 30px 20px 40px;
}
.pie__inner { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 10px; }
.pie__marca {
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #fff;
}
.pie__marca span { color: var(--cesped-claro); }
.pie__legal { font-size: .78rem; max-width: 78ch; }
.pie__legal strong { color: var(--texto-inverso); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 720px) {
  .marcador__inner { padding: 16px; }
  .stats { width: 100%; }
  .stat { flex: 1; min-width: 0; padding: 6px 8px; }
  .stat__valor { font-size: 1.6rem; }
  .contenido { padding: 20px 14px 48px; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .carta__precio { font-size: 1.45rem; }

  /* En tarjetas estrechas no caben equipo y rareza en la misma línea:
     la rareza baja al pie izquierdo, junto al dorsal, y el nombre del
     equipo recupera todo el ancho de arriba. */
  .carta__equipo-tag { max-width: calc(100% - 16px); }
  .carta .rareza {
    top: auto; right: auto;
    bottom: 8px; left: 8px;
    font-size: .55rem; padding: 3px 7px;
  }
  .modal-fondo { padding: 0; }
  .modal { border-radius: 0; max-height: 100vh; height: 100vh; }
  .ficha-cab { border-radius: 0; padding: 22px 18px 18px; }
  .ficha-cuerpo { padding: 20px 18px 34px; }
  .filtro { flex: 1 1 47%; }
  .btn-reset { flex: 1 1 100%; }
}

/* =========================================================
   ACCESIBILIDAD: movimiento reducido
   Se desactiva el barrido foil y las animaciones de entrada.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* El foil pasa a ser un degradado fijo en lugar de un barrido */
  .carta--foil .carta__mini::before {
    left: 40%; opacity: .5;
  }
  .carta:hover { transform: none; }
}

/* =========================================================
   =========================================================
   ARQUITECTURA DE TRES NIVELES
   ---------------------------------------------------------
   Todo lo que sigue es reorganización, no rediseño: se reutilizan
   los mismos tokens de arriba (tinta, césped, foil, Barlow + Inter)
   para las piezas nuevas — cabecera fija, migas, portada, página de
   colección y ficha como página.

   Ninguna regla de identidad se toca: la tarjeta, el barrido foil,
   las rarezas y el bloque de precio siguen siendo los de siempre.
   =========================================================
   ========================================================= */

/* ---------------------------------------------------------
   Escala de espaciado y jerarquía tipográfica
   ---------------------------------------------------------
   Antes cada bloque llevaba su propio margen a ojo. Con tres páginas
   eso se nota: los mismos huecos tienen que medir lo mismo en la
   portada, en la colección y en la ficha.
   --------------------------------------------------------- */
:root {
  --e1: 6px;    /* dentro de un componente          */
  --e2: 12px;   /* entre elementos hermanos          */
  --e3: 20px;   /* entre grupos                      */
  --e4: 32px;   /* entre bloques                     */
  --e5: 52px;   /* entre secciones de una página     */
  --e6: 76px;   /* respiro grande de la portada      */

  /* Escala de títulos: una sola, compartida por las tres páginas. */
  --t-xxl: clamp(2.4rem, 6vw, 3.9rem);   /* h1 de la portada        */
  --t-xl:  clamp(2rem, 4.6vw, 2.9rem);   /* h1 de colección y ficha */
  --t-l:   clamp(1.55rem, 2.6vw, 2rem);  /* h2 de sección           */
  --t-m:   1.22rem;                      /* h3                      */

  --alto-cabecera: 66px;
}

/* ---------------------------------------------------------
   Foco de teclado en los buscadores
   ---------------------------------------------------------
   Los input de busqueda se quitan el contorno a proposito para que el
   halo verde no salga cortado por el borde redondeado. Ese halo es de
   un verde al 13-22 % de opacidad: vale como realce de raton, pero
   como UNICA senal de foco de teclado no se ve. Con :focus-visible se
   pone el mismo anillo dorado que lleva el resto de la interfaz.
   Va aqui, despues de la definicion original, para ganarle en cascada.
   --------------------------------------------------------- */
.buscador__input:focus-visible {
  outline: none;
  border-color: var(--cesped);
  box-shadow: 0 0 0 3px var(--foil);
}
.marcador .buscador__input:focus-visible {
  border-color: var(--cian);
  box-shadow: var(--brillo-foco);
}

/* Enlace de salto: primer tabulador de la página. */
.saltar-contenido {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--foil); color: var(--tinta);
  font-weight: 700; padding: 10px 18px; border-radius: 0 0 10px 10px;
  transition: transform .15s ease;
}
.saltar-contenido:focus { transform: translate(-50%, 0); }

/* Los enlaces del sitio no llevan subrayado por defecto: la mayoría
   son tarjetas y chips, no texto corrido. Los que sí son texto lo
   piden ellos (.enlace-mas, .pie__nav a…). */
a { color: inherit; text-decoration: none; }

/* =========================================================
   CABECERA FIJA
   ---------------------------------------------------------
   Es la misma cabecera-marcador de siempre —tinta, franjas
   diagonales, filo verde— pero compacta y pegada arriba, porque
   ahora tiene que acompañar en las tres páginas.
   ========================================================= */
.marcador {
  position: sticky; top: 0; z-index: 90;
  background: var(--tinta);
  color: var(--texto-inverso);
  border-bottom: 3px solid var(--cesped);
  overflow: visible;              /* el menú desplegable sale fuera */
}
/* Las franjas siguen ahí, pero recortadas a la barra. */
.marcador::before {
  content: '';
  position: absolute; inset: 0; overflow: hidden;
  background: repeating-linear-gradient(115deg,
    rgba(255,255,255,.028) 0 2px, transparent 2px 22px);
  pointer-events: none;
}

.marcador__inner {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 20px;
  min-height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  gap: var(--e3);
  position: relative;
  flex-wrap: nowrap;
}

/* Esta regla va DESPUÉS de la de arriba y es la que manda. Aquí
   estaba el fallo que se veía en la cabecera: el nombre se pintaba con
   --blanco, que en el tema oscuro ya no es blanco sino la superficie,
   así que la marca salía fina y apagada. */
.marca { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.marca__nombre {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.62rem;
  letter-spacing: .055em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: #E7EDF6;
  display: block;
}
.marca__nombre span { color: var(--cian); margin-left: .12em; }

/* --------------------- Buscador global --------------------- */
.busca-global { position: relative; flex: 1 1 auto; max-width: 460px; }

/* El buscador de la cabecera va sobre tinta: mismo componente, piel
   oscura. El de la portada y el de la colección siguen siendo claros. */
.marcador .buscador__input {
  background: rgba(255,255,255,.07);
  border-color: var(--tinta-3);
  color: var(--texto-inverso);
  padding: 9px 42px 9px 40px;
  border-width: 1px;
}
.marcador .buscador__input::placeholder { color: var(--texto-inverso-suave); }
.marcador .buscador__input:focus {
  background: rgba(255,255,255,.12);
  border-color: var(--cesped-claro);
  box-shadow: 0 0 0 3px rgba(31,196,113,.22);
}
.marcador .buscador__lupa { color: var(--texto-inverso-suave); left: 12px; }

.buscador__atajo {
  position: absolute; right: 10px;
  font-family: var(--cuerpo); font-size: .72rem; font-weight: 600;
  color: var(--texto-inverso-suave);
  border: 1px solid var(--tinta-3); border-radius: 5px;
  padding: 1px 7px; pointer-events: none;
  background: rgba(0,0,0,.25);
}
.buscador__input:focus ~ .buscador__atajo { opacity: 0; }

/* --------------------- Panel de resultados en vivo --------------------- */
.busca-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  z-index: 95;
  background: var(--blanco);
  border: 1px solid var(--borde-cromo);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: var(--e1);
  max-height: min(70vh, 460px);
  overflow-y: auto;
}
.busca-panel__grupo {
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--texto-suave);
  padding: 10px 10px 5px;
}
.busca-panel__vacio { padding: 18px 14px; font-size: .86rem; color: var(--texto-suave); }
.busca-panel__vacio strong { color: var(--texto); }

.busca-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radio-s);
  color: var(--texto);
}
.busca-item:hover, .busca-item.es-marcada { background: var(--claro); }
.busca-item.es-marcada { box-shadow: inset 3px 0 0 var(--cesped); }
.busca-item__escudo { flex: 0 0 auto; display: flex; }
.busca-item__marca {
  flex: 0 0 auto; width: 6px; height: 30px; border-radius: 3px;
  background: var(--col-color, var(--cesped));
}
.busca-item__texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.busca-item__titulo {
  font-family: var(--display); font-size: 1.08rem; font-weight: 600;
  line-height: 1.15; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busca-item__sub {
  font-size: .72rem; color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busca-item__precio {
  font-family: var(--display); font-size: 1.1rem; font-weight: 700;
  color: var(--plata); flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.busca-panel__todos {
  display: block; text-align: center;
  padding: 11px; margin-top: var(--e1);
  border-top: 1px solid var(--borde-cromo);
  font-size: .82rem; font-weight: 600; color: var(--cesped-texto);
}
.busca-panel__todos:hover { background: var(--claro); }

/* --------------------- Menú --------------------- */
.nav__menu { display: flex; align-items: center; gap: var(--e2); flex: 0 0 auto; }
.nav__enlace {
  font-size: .82rem; font-weight: 600;
  color: var(--texto-inverso-suave);
  padding: 7px 10px; border-radius: 8px;
}
.nav__enlace:hover { color: #fff; background: rgba(255,255,255,.07); }

.menu-col { position: relative; }
.menu-col__boton {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600;
  color: var(--texto-inverso);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--tinta-3);
  border-radius: 8px;
  padding: 8px 13px;
}
.menu-col__boton:hover { background: rgba(255,255,255,.13); }
.menu-col__boton svg { transition: transform .18s ease; }
.menu-col__boton[aria-expanded="true"] svg { transform: rotate(180deg); }

.menu-col__panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  z-index: 95;
  width: min(660px, calc(100vw - 32px));
  background: var(--blanco);
  border: 1px solid var(--borde-cromo);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: var(--e3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--e3);
  max-height: min(74vh, 560px);
  overflow-y: auto;
}
.menu-col__grupo-titulo {
  font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-suave);
  padding-bottom: 7px; margin-bottom: 7px;
  border-bottom: 2px solid var(--linea-color, var(--cesped));
}
.menu-col__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-col__lista a {
  display: flex; align-items: baseline; gap: 7px;
  padding: 6px 8px; border-radius: 7px;
  font-size: .84rem; color: var(--texto);
}
.menu-col__lista a:hover { background: var(--claro); }
.menu-col__lista a.es-activa {
  background: rgba(21,160,91,.1);
  box-shadow: inset 3px 0 0 var(--cesped);
}
.menu-col__nombre { font-weight: 600; }
.menu-col__temp { color: var(--texto-suave); font-size: .78rem; font-variant-numeric: tabular-nums; }
.menu-col__n {
  margin-left: auto; font-size: .7rem; font-weight: 700;
  color: var(--texto-suave); font-variant-numeric: tabular-nums;
}
.menu-col__vacio { color: var(--texto-suave); font-size: .85rem; }

/* --------------------- Hamburguesa --------------------- */
.nav__hamburguesa {
  display: none;
  width: 40px; height: 38px;
  flex: 0 0 auto;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--tinta-3);
  border-radius: 8px;
  padding: 10px 9px;
  flex-direction: column; justify-content: space-between;
}
.nav__hamburguesa span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--texto-inverso);
  transition: transform .2s ease, opacity .2s ease;
}
.nav__hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   MIGAS DE PAN
   ========================================================= */
.migas {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde-cromo);
}
.migas__lista {
  max-width: var(--ancho); margin: 0 auto; padding: 10px 20px;
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: .78rem;
}
.migas__item { display: flex; align-items: center; gap: 7px; color: var(--texto-suave); }
.migas__item + .migas__item::before {
  content: '›'; color: #B9C5D2; font-size: .95rem; line-height: 1;
}
.migas__item a { color: var(--texto-suave); }
.migas__item a:hover { color: var(--cesped-texto); text-decoration: underline; }
.migas__item [aria-current] { color: var(--texto); font-weight: 600; }

/* =========================================================
   PORTADA — HERO
   ---------------------------------------------------------
   Continúa la cabecera en tinta: la portada empieza donde acaba el
   marcador, y el catálogo claro arranca justo debajo.
   ========================================================= */
.contenido { padding-top: 0; }

.hero {
  background: var(--tinta);
  color: var(--texto-inverso);
  position: relative; overflow: hidden;
  /* Se sale del ancho del <main> para ocupar toda la franja. */
  margin: 0 calc(50% - var(--medio-viewport, 50vw)) var(--e5);
  padding: var(--e5) max(20px, calc(var(--medio-viewport, 50vw) - var(--ancho) / 2)) var(--e4);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg,
    rgba(255,255,255,.028) 0 2px, transparent 2px 22px);
}
/* Destello azul eléctrico, el color de la marca. */
.hero::after {
  content: ''; position: absolute; right: -10%; bottom: -55%;
  width: 52%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(18,103,255,.34), rgba(49,184,255,.10) 45%, transparent 70%);
  pointer-events: none;
}
.hero__texto { position: relative; max-width: 640px; flex: 1 1 420px; }
.hero__ojo {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--cesped-claro);
  margin-bottom: var(--e1);
}
.hero__titulo {
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-xxl); line-height: 1; letter-spacing: .01em;
  text-transform: uppercase; color: #fff;
}
.hero__titulo span { color: var(--foil); }
.hero__sub {
  margin-top: var(--e2);
  font-size: .96rem; color: var(--texto-inverso-suave);
  max-width: 52ch;
}
.hero__busca { position: relative; margin-top: var(--e3); max-width: 560px; }
.buscador--grande .buscador__input {
  padding: 16px 18px 16px 50px;
  font-size: 1.02rem;
  border-radius: 12px;
  border-color: var(--borde-cromo);
  background: var(--superficie);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.buscador--grande .buscador__lupa { left: 17px; }

.hero .stats { position: relative; flex: 0 0 auto; }

/* =========================================================
   PORTADA — SECCIONES
   ========================================================= */
.seccion-portada { margin-bottom: var(--e6); scroll-margin-top: calc(var(--alto-cabecera) + 16px); }
.seccion-portada__cab { margin-bottom: var(--e3); }
.seccion-portada__cab h2 {
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-l); line-height: 1.1; letter-spacing: .01em;
  text-transform: uppercase;
}
.seccion-portada__cab p { color: var(--texto-suave); font-size: .9rem; margin-top: 3px; }
.enlace-mas { color: var(--cesped-texto); font-weight: 600; }
.enlace-mas:hover { text-decoration: underline; }

/* --------------------- Línea de producto --------------------- */
.linea { margin-bottom: var(--e4); }
.linea__cab {
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
  padding-bottom: var(--e1); margin-bottom: var(--e3);
  border-bottom: 2px solid var(--linea-color, var(--cesped));
}
.linea__nombre {
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-m); text-transform: uppercase; letter-spacing: .05em;
}
.linea__claim { font-size: .82rem; color: var(--texto-suave); flex: 1 1 auto; }
.linea__cuenta {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  /* El color de la linea se usa a pelo en filos y fondos, pero como
     TEXTO sobre blanco no siempre llega al minimo de contraste: el
     dorado de la linea premium se queda en 1,8:1. Se rebaja hacia el
     color de tinta, que sube cualquier tono por encima de 4,5:1. */
  color: var(--texto-suave);
  color: color-mix(in srgb, var(--linea-color, var(--cesped)) 45%, var(--texto));
}

/* --------------------- Tarjeta de colección --------------------- */
.colecciones-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: var(--e3);
}

.col-tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde-cromo);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.col-tarjeta:hover, .col-tarjeta:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
  border-color: var(--col-color, #CBD5E1);
}
/* Arte de portada: la carta más valiosa de la colección, desenfocada
   y teñida con su color. No es la carta, es el ambiente de la caja. */
.col-tarjeta__arte {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg,
    var(--col-color, var(--cesped)) 0%, var(--tinta) 92%);
  overflow: hidden;
}
.col-tarjeta__arte img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  opacity: .5;
  filter: saturate(1.1);
}
.col-tarjeta__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(11,21,36,.9) 0%, rgba(11,21,36,.25) 55%, transparent 100%);
}
/* Un filo del color de la colección: es lo que las distingue de un
   vistazo cuando hay dieciséis en pantalla. */
.col-tarjeta__cuerpo {
  padding: var(--e2) 14px 14px;
  border-top: 3px solid var(--col-color, var(--cesped));
  display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.col-tarjeta__nombre {
  font-family: var(--display); font-weight: 600;
  font-size: 1.3rem; line-height: 1.12; letter-spacing: .01em;
}
.col-tarjeta__temporada {
  font-size: .76rem; color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.col-tarjeta__pie {
  margin-top: auto; padding-top: var(--e2);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.col-tarjeta__cuenta {
  font-family: var(--display); font-size: 1.18rem; font-weight: 700;
  color: var(--plata); font-variant-numeric: tabular-nums;
}
.col-tarjeta__editorial {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--texto-suave);
}
.cinta-premium {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--foil); color: #4A3708;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.col-tarjeta--fantasma { aspect-ratio: 4 / 3; border: 0; box-shadow: none; }

/* --------------------- Carrusel de destacadas --------------------- */
.carrusel { position: relative; }
.carrusel__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(212px, 1fr);
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--e2);
  padding-bottom: var(--e2);
  /* La barra nativa se deja: en táctil es la señal de que hay más. */
  scrollbar-width: thin;
}
.carrusel__pista > .carta { scroll-snap-align: start; }
.carrusel__flecha {
  position: absolute; top: 38%; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--borde-cromo);
  background: var(--blanco); color: var(--plata);
  font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center;
  box-shadow: var(--sombra-alta);
}
.carrusel__flecha:hover { background: var(--claro); }
.carrusel__flecha--izq { left: -14px; }
.carrusel__flecha--der { right: -14px; }

.rejilla--corta { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }

/* --------------------- Movimientos recientes --------------------- */
.movs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--e3);
}
.movs__col {
  background: var(--blanco);
  border: 1px solid var(--borde-cromo);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e3);
}
.movs__titulo {
  font-family: var(--display); font-size: var(--t-m); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding-bottom: var(--e1); margin-bottom: var(--e2);
  border-bottom: 2px solid currentColor;
}
.movs__titulo--sube { color: var(--sube); }
.movs__titulo--baja { color: var(--baja); }
.movs__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.mov {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center; gap: var(--e2);
  padding: 8px 6px; border-radius: var(--radio-s);
}
.mov:hover { background: var(--claro); }
.mov__puesto {
  font-family: var(--display); font-size: 1.05rem; font-weight: 700;
  color: var(--texto-suave); text-align: center;
}
.mov__carta { display: flex; flex-direction: column; min-width: 0; }
.mov__jugador {
  font-family: var(--display); font-size: 1.12rem; font-weight: 600; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mov__meta {
  font-size: .71rem; color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mov__precio {
  font-family: var(--display); font-size: 1.12rem; font-weight: 700;
  color: var(--plata); font-variant-numeric: tabular-nums;
}

/* --------------------- Franja de propuesta de valor --------------------- */
.franja-valor {
  background: var(--tinta);
  color: var(--texto-inverso);
  margin: 0 calc(50% - var(--medio-viewport, 50vw));
  padding: var(--e5) max(20px, calc(var(--medio-viewport, 50vw) - var(--ancho) / 2));
  position: relative; overflow: hidden;
  border-top: 3px solid var(--cesped);
}
.franja-valor::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg,
    rgba(255,255,255,.028) 0 2px, transparent 2px 22px);
}
.franja-valor__titulo {
  position: relative;
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-l); text-transform: uppercase; letter-spacing: .04em;
  color: #fff; margin-bottom: var(--e3);
}
.franja-valor__items {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e4);
}
.valor__num {
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  color: var(--foil); letter-spacing: .06em;
}
.valor h3 {
  font-family: var(--display); font-size: var(--t-m); font-weight: 600;
  color: #fff; margin-top: 2px; letter-spacing: .01em;
}
.valor p { font-size: .87rem; color: var(--texto-inverso-suave); margin-top: 4px; }

/* =========================================================
   PÁGINA DE COLECCIÓN
   ========================================================= */
.cab-coleccion {
  margin: 0 calc(50% - var(--medio-viewport, 50vw)) var(--e4);
  padding: var(--e4) max(20px, calc(var(--medio-viewport, 50vw) - var(--ancho) / 2)) var(--e3);
  background: var(--blanco);
  border-bottom: 1px solid var(--borde-cromo);
  position: relative;
}
/* El filo superior lleva el color de la colección: el mismo que la
   identifica en su tarjeta de la portada. */
.cab-coleccion::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--col-color, var(--cesped)), transparent 78%);
}
.cab-coleccion__linea {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  /* Mismo criterio que .linea__cuenta: el color identifica, pero el
     que se lee es la version rebajada hacia tinta. */
  color: var(--texto-suave);
  color: color-mix(in srgb, var(--col-color, var(--cesped)) 45%, var(--texto));
}
.cab-coleccion__titulo {
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-xl); line-height: 1.05; letter-spacing: .01em;
  text-transform: uppercase; margin-top: 2px;
}
.cab-coleccion__titulo span { color: var(--texto-suave); }
.cab-coleccion__datos {
  display: flex; flex-wrap: wrap; gap: var(--e4);
  margin-top: var(--e3);
}
.cab-coleccion__datos div { display: flex; flex-direction: column; }
.cab-coleccion__datos dt {
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-suave);
}
.cab-coleccion__datos dd {
  font-family: var(--display); font-size: 1.42rem; font-weight: 600;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
/* El aviso de producto de caja. Los dos dorados oscuros que tenía
   (#6B5316 y #4A3708) venían del tema claro: sobre papel blanco se
   leían, pero sobre el fondo translúcido dorado al 12 % encima del azul
   noche quedaban en ~1,9:1 — por debajo de AA y prácticamente
   invisibles. Se pasan a la gama dorada de la paleta, que conserva la
   identidad y sube a 10:1 y 12,5:1. */
.distintivo-premium {
  margin-top: var(--e3);
  font-size: .8rem; color: var(--dorado);
  background: rgba(244,200,76,.12); border-left: 3px solid var(--foil);
  padding: 10px 14px; border-radius: 0 8px 8px 0;
  max-width: 76ch;
}
.distintivo-premium strong { color: var(--dorado-claro); }

/* --------------------- Navegación por tipo de carta --------------------- */
.tipos {
  display: flex; flex-wrap: wrap; gap: var(--e1);
  margin-bottom: var(--e3);
}
.chip-tipo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--borde-cromo); border-radius: 999px;
  background: var(--blanco);
  font-size: .82rem; font-weight: 600; color: var(--texto);
  transition: border-color .15s, background .15s, color .15s;
}
.chip-tipo:hover { border-color: var(--chip-color, var(--cesped)); }
/* El chip activo se pinta con el color de su serie. El par
   fondo/texto exacto lo calcula estiloInsignia() en JS (--chip-activo):
   hay series doradas donde el blanco no se lee, granates donde no se
   lee el texto oscuro, y tonos medios donde hay que oscurecer un poco
   el fondo para que cualquiera de los dos funcione. */
.chip-tipo.es-activo {
  background: var(--chip-fondo, var(--cesped));
  border-color: var(--chip-fondo, var(--cesped));
  color: var(--chip-texto, #fff);
}
.chip-tipo__n {
  font-size: .7rem; font-weight: 700;
  color: var(--texto-suave);
  background: var(--claro);
  padding: 1px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
/* En el chip activo la pastilla del recuento se queda sin fondo: un
   velo negro encima del color de la serie bajaba el contraste de la
   cifra por debajo del minimo. Sin fondo hereda el mismo par
   fondo/texto que ya se ha calculado para el chip. */
.chip-tipo.es-activo .chip-tipo__n {
  background: transparent; color: inherit; padding-inline: 0;
}

/* Cabecera sencilla (búsqueda) */
.cab-simple { margin-bottom: var(--e3); }
.cab-simple h1 {
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-xl); line-height: 1.05;
  text-transform: uppercase; letter-spacing: .01em;
}
.cab-simple h1 span { color: var(--cesped); }
.cab-simple__sub { color: var(--texto-suave); font-size: .85rem; margin-top: 4px; }

/* =========================================================
   FICHA COMO PÁGINA
   ---------------------------------------------------------
   El mismo contenido que el modal, dentro de una tarjeta. Se reutiliza
   .ficha-cab y .ficha-cuerpo tal cual: la ficha es una sola, cambia el
   envoltorio.
   ========================================================= */
.ficha-pagina {
  background: var(--blanco);
  border: 1px solid var(--borde-cromo);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sombra);
  margin-bottom: var(--e6);
}
/* Como página hay más sitio: la imagen de la carta crece. */
.ficha-pagina .ficha-img { width: 168px; top: 26px; right: 30px; }
.ficha-pagina:has(.ficha-img) .ficha-cab h2,
.ficha-pagina:has(.ficha-img) .ficha-cab__sub,
.ficha-pagina:has(.ficha-img) .ficha-cab__top { padding-right: 190px; }

/* =========================================================
   ESQUELETOS DE CARGA
   ---------------------------------------------------------
   Ocupan exactamente el hueco del contenido real: al llegar los datos
   no se mueve nada de sitio (nada de saltos de layout).
   ========================================================= */
.skeleton--linea { display: block; height: .86em; border-radius: 5px; }
.skeleton--titulo { height: 1.25rem; width: 74%; margin-bottom: 5px; }
.skeleton--meta { height: .74rem; width: 52%; }
.skeleton--precio { display: inline-block; width: 78px; height: 1.7rem; border-radius: 6px; }
.skeleton--tendencia { display: inline-block; width: 52px; height: 1.1rem; border-radius: 6px; }

.carta--fantasma {
  pointer-events: none;
  box-shadow: none;
  border-color: var(--borde-cromo);
}
.carta--fantasma .carta__mini { aspect-ratio: 3 / 4; }
.cargando-portada > .colecciones-rejilla { margin-bottom: var(--e5); }

/* =========================================================
   ESTADOS VACÍOS Y DE ERROR
   ========================================================= */
.vacio--404, .vacio--error { padding: var(--e6) 20px; }
.vacio__codigo {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(4.5rem, 16vw, 8rem); line-height: 1;
  color: #DCE3EB; letter-spacing: .04em;
}
.vacio h1 {
  font-family: var(--display); font-size: var(--t-xl);
  color: var(--texto); letter-spacing: .01em; text-transform: uppercase;
}
.vacio p { margin: var(--e1) auto var(--e3); max-width: 58ch; }
.vacio code {
  background: var(--claro); border: 1px solid var(--borde-cromo);
  padding: 1px 6px; border-radius: 5px; font-size: .92em;
}
.vacio__icono--error { color: var(--baja); }
/* El botón primario también se usa como enlace en los estados vacíos. */
a.btn-primario { display: inline-block; }

/* =========================================================
   PIE
   ========================================================= */
.pie { margin-top: 0; }
.pie__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--tinta-3);
  margin-bottom: var(--e2);
}
.pie__nav { display: flex; gap: var(--e3); flex-wrap: wrap; }
.pie__nav a { font-size: .82rem; font-weight: 600; color: var(--texto-inverso-suave); }
.pie__nav a:hover { color: var(--cesped-claro); }

.pie__estado {
  font-size: .8rem;
  border-left: 3px solid var(--cesped);
  background: rgba(255,255,255,.04);
  padding: 10px 14px; border-radius: 0 8px 8px 0;
  max-width: 82ch;
}
.pie__estado strong { color: var(--texto-inverso); }
.pie__estado--sin-datos { border-left-color: var(--foil); }
.pie__estado--vivo { border-left-color: var(--cesped-claro); }
.pie__estado time { font-variant-numeric: tabular-nums; }

/* =========================================================
   RESPONSIVE DE LA NUEVA ARQUITECTURA
   ========================================================= */

/* A partir de aquí el menú se pliega, pero el BUSCADOR NO: en móvil
   tiene que seguir accesible sin scroll y sin abrir nada. */
@media (max-width: 900px) {
  .marcador__inner { flex-wrap: wrap; padding: 10px 14px; gap: var(--e2); }
  .marca { order: 1; }
  .nav__hamburguesa { display: flex; order: 2; margin-left: auto; }
  .busca-global { order: 3; flex: 1 1 100%; max-width: none; }

  .nav__menu {
    order: 4;
    display: none;
    flex: 1 1 100%;
    flex-direction: column; align-items: stretch;
    gap: var(--e1);
    padding-bottom: var(--e2);
  }
  .nav__menu.es-abierto { display: flex; }
  .menu-col__boton { width: 100%; justify-content: space-between; }
  .menu-col__panel {
    position: static; width: auto;
    grid-template-columns: 1fr;
    max-height: 52vh;
    margin-top: var(--e1);
  }
  .nav__enlace { padding: 10px; }
}

@media (max-width: 720px) {
  .hero { padding-top: var(--e4); padding-bottom: var(--e3); margin-bottom: var(--e4); }
  .hero .stats { width: 100%; }
  .hero__sub { font-size: .88rem; }
  .buscador--grande .buscador__input { padding: 13px 16px 13px 44px; font-size: .95rem; }

  .seccion-portada { margin-bottom: var(--e5); }
  .colecciones-rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e2); }
  .col-tarjeta__nombre { font-size: 1.12rem; }

  .carrusel__flecha { display: none; }      /* en táctil se desliza */
  .carrusel__pista { grid-auto-columns: minmax(158px, 1fr); }
  .rejilla--corta { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .cab-coleccion__datos { gap: var(--e3); }
  .cab-coleccion__datos dd { font-size: 1.2rem; }
  .tipos { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .chip-tipo { flex: 0 0 auto; }

  .mov { grid-template-columns: 18px 1fr auto; row-gap: 2px; }
  .mov .tendencia { grid-column: 3; }
  .mov__precio { grid-column: 2 / 3; justify-self: end; }

  .ficha-pagina { border-radius: 14px; }

  /* Por debajo de ~400 px las rejillas de la ficha ya no caben a dos
     columnas: el minmax las mantenia anchas y el contenido se salia
     del recorte de .ficha-pagina. */
  .estados { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .ficha-datos { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .ficha-pagina .ficha-img { width: 108px; top: 18px; right: 16px; }
  .ficha-pagina:has(.ficha-img) .ficha-cab h2,
  .ficha-pagina:has(.ficha-img) .ficha-cab__sub,
  .ficha-pagina:has(.ficha-img) .ficha-cab__top { padding-right: 124px; }
}

/* Movimiento reducido: además de lo que ya había, el carrusel y las
   migas dejan de deslizarse. */
@media (prefers-reduced-motion: reduce) {
  .carrusel__pista { scroll-behavior: auto; }
  .col-tarjeta:hover { transform: none; }
  .saltar-contenido { transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   PRECIO DE TIENDA
   ---------------------------------------------------------
   Bloque separado del desglose de particulares. Va visualmente
   apartado A PROPOSITO: son dos mercados distintos y el usuario
   tiene que ver de un golpe que no se suman.
   ========================================================= */
.bloque-tienda {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px dashed #D8DEE6;
}
.bloque-tienda__titulo {
  font-family: var(--display); font-size: var(--t-m); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  margin: 0 0 2px; display: flex; align-items: center; gap: 6px;
}
.bloque-tienda__ayuda {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--tinta-3); color: var(--blanco);
  font-family: var(--cuerpo); font-size: .68rem; font-weight: 700;
  cursor: help;
}
.bloque-tienda__nota {
  margin: 0 0 var(--e2);
  font-size: .82rem; color: var(--texto-suave);
}

/* =========================================================
   AVISO DE DATOS CAIDOS / DESFASADOS
   Franja en la portada cuando el refresco no entra. Va arriba del
   todo y en color de alerta A PROPOSITO: es peor ensenar precios
   viejos como actuales que no ensenar ninguno.
   ========================================================= */
.aviso-datos {
  margin: 0 auto var(--e3);
  max-width: var(--ancho);
  padding: var(--e2) var(--e3);
  border-radius: var(--radio-s);
  border: 1px solid #E7C77A;
  background: rgba(240,169,59,.12);
  color: #6B4E12;
  font-size: .9rem; line-height: 1.5;
}
.aviso-datos--grave {
  border-color: #E3A9A9;
  background: rgba(255,107,107,.12);
  color: #8A2A2A;
}
.aviso-datos strong { font-weight: 700; }



/* Fichas legibles en pantallas estrechas y foco visible al navegar con teclado. */
/* Las franjas decorativas de ancho viewport no deben crear scroll por el ancho de la barra vertical. */
.ficha-pagina, .modal__cuerpo, .precio-bloque > *, .rango > div { min-width: 0; }
.rango__valor { overflow-wrap: anywhere; }
.tabla-fuentes th { white-space: nowrap; }
.fuente-aviso { display:block; flex-basis:100%; color:#a23c25; font-size:.75rem; font-weight:500; }
.carta__datos { display:grid; gap:.25rem; padding-top:.5rem; font-size:.65rem; line-height:1.4; color:#586779; }
.tabla-desplazable { overscroll-behavior-x: contain; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #d7a52f;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .rango__valor { font-size: .9rem; }
  .ficha-estado { gap: .75rem; flex-wrap: wrap; }
  .btn-refrescar { min-height: 44px; }
  .fuente-nombre { min-width: 8rem; }
  .tabla-fuentes { min-width: 0; }
  .tabla-fuentes thead { display: none; }
  .tabla-fuentes tbody { display: block; }
  .tabla-fuentes tr { display: grid; grid-template-columns: .7fr .85fr 1.4fr; gap: .5rem; padding: .8rem 0; border-bottom: 1px solid var(--borde, var(--borde-cromo)); }
  .tabla-fuentes td { border: 0; padding: .2rem 0; text-align: left; min-width: 0; }
  .tabla-fuentes td:first-child { grid-column: 1 / -1; }
  .tabla-fuentes td:not(:first-child)::before { display: block; font-size: .62rem; font-weight: 600; color: #68778a; margin-bottom: .4rem; }
  .tabla-fuentes td:nth-child(2)::before { content: 'ANUNCIOS'; }
  .tabla-fuentes td:nth-child(3)::before { content: 'PRECIO'; }
  .tabla-fuentes td:nth-child(4)::before { content: 'ACTUALIZADO'; }
  .fuente-nombre { flex-wrap: wrap; }
}


/* =========================================================
   ESTADOS DE PRECIO (18/09/2026)
   ---------------------------------------------------------
   Sin precio, precio antiguo, precio de tienda y fuente caída.
   Mismos tokens de color que el resto: dorado = dato, ámbar =
   desactualizado, rojo apagado = fallo, gris = sin dato.
   ========================================================= */
.carta__precio--vacio {
  font-family: var(--cuerpo, inherit); font-size: .82rem; font-weight: 600;
  color: var(--texto-suave); line-height: 1.2;
}
.carta__precio--tienda { font-size: 1.35rem; }
/* El mercado va SOBRE la cifra, en su propia línea: es parte del dato,
   no un adorno. Sin él, «12,00 €» parecería un precio de mercado único
   y no lo es (anuncios de particulares ≠ venta en tienda). */
.carta__mercado {
  display: block;
  font-family: var(--cuerpo, inherit); font-size: .6rem !important; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave);
  margin-bottom: 2px;
}
.carta__precio--viejo { color: #F0A93B; }
.carta__datos .dato-viejo { color: #F0A93B; font-weight: 600; }

.precio--vacio {
  font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2rem);
  color: var(--texto-inverso-suave);
}
.precio--viejo { color: #E0A94A; }
.sello--viejo { background: rgba(224,155,58,.28); color: #F5C77A; margin-left: 0; }
.precio-actualizado--viejo strong { color: #F5C77A; }

.precio-tienda {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 18px; border-left: 1px dashed rgba(255,255,255,.22);
}
.precio-tienda__valor {
  font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1.05; color: #fff;
}
.precio-tienda__valor.precio--vacio { font-size: 1.15rem; color: var(--texto-inverso-suave); }
@media (max-width: 560px) {
  .precio-tienda { padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.22); width: 100%; }
}

/* Aviso de divergencia entre fuentes (ficha, sobre fondo oscuro).
   NO se promedia nada: se dice que los precios no se parecen y se
   dejan los dos a la vista, cada uno con su mercado. */
.aviso-divergencia {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 4px solid #E09B3A;
  background: rgba(224,155,58,.16);
  color: #fff;
  font-size: .82rem; line-height: 1.45;
}
.aviso-divergencia strong { font-weight: 700; }
.aviso-divergencia__detalle {
  display: block; margin-top: 4px;
  font-size: .76rem; font-variant-numeric: tabular-nums;
  color: var(--texto-inverso-suave);
}

/* Mercado junto al precio corto de buscador y listas de portada. */
.precio-mercado {
  display: block;
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave);
}

.rango__valor--sube { color: #7FE3AF !important; }
.rango__valor--baja { color: #FFAFAF !important; }
.rango__valor--vacio { font-size: .95rem !important; color: var(--texto-inverso-suave) !important; }

.fuente-tag--caida { background: rgba(255,107,107,.16); color: var(--baja-texto); }
.grafico-vacio--error { color: var(--baja-texto); }
.ficha-datos__id { font-size: .76rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.ficha-estado { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Series con checklist pendiente de verificar (página de colección). */
.pendientes {
  margin: 0 0 var(--e3, 24px);
  padding: 16px 18px;
  border-radius: var(--radio-s);
  border: 1px dashed var(--borde-cromo);
  background: var(--superficie);
}
.pendientes__titulo {
  font-family: var(--display); font-size: 1.25rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px;
}
.pendientes__nota { margin: 0 0 10px; font-size: .86rem; color: var(--texto-suave); }
.pendientes__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.pendientes__lista li { font-size: .86rem; line-height: 1.35; }
.pendientes__n { color: var(--texto-suave); font-size: .8rem; }
.pendientes__motivo { display: block; color: var(--texto-suave); font-size: .74rem; }
/* Colecciones enteras sin ninguna carta verificada (listado general).
   No son catálogo: si se mezclaran con las demás aparecerían como
   «0 cartas», que parece un error o un catálogo vacío. Van aparte,
   con borde punteado, para que se vea que son una promesa y no un
   estante vacío. */
.linea--pendiente .linea__cab { border-bottom-style: dashed; border-bottom-width: 1px; border-bottom-color: var(--borde-cromo); }
.pendientes-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.pendiente-item {
  padding: 12px 14px;
  border: 1px dashed var(--borde-cromo); border-radius: var(--radio-s);
  background: var(--superficie);
}
.pendiente-item__nombre { display: block; font-weight: 700; font-size: .92rem; line-height: 1.3; }
.pendiente-item__meta { display: block; margin-top: 3px; font-size: .76rem; color: var(--texto-suave); }

.cab-coleccion__fuente { font-size: .78rem; margin-top: 8px; opacity: .9; overflow-wrap: anywhere; }
.cab-coleccion__fuente a { color: inherit; text-decoration: underline; }

.cab-coleccion__nota { font-size: .86rem; margin-top: 10px; max-width: 70ch; opacity: .92; }

/* Aviso bajo el gráfico: hay puntos reales, pero no evidencia para
   publicar un porcentaje. El dato se enseña; la conclusión, no. */
.nota-tendencia {
  margin: 10px 0 0; font-size: .82rem; line-height: 1.45;
  color: var(--texto-suave);
}

/* =========================================================
   SISTEMA VISUAL DE IMÁGENES
   ---------------------------------------------------------
   Ninguna imagen del catálogo es el cromo: son fotos del jugador
   (Wikipedia). El escaneado del cromo es obra de Panini o Topps y no
   hay fuente pública emparejable (AUDITORIA.md §12). Así que aquí se
   diseña lo que sí podemos afirmar, y cada imagen dice qué es.
   ========================================================= */

/* --- Sello de estado: qué estamos enseñando ---------------------- */
.sello-img {
  position: absolute; left: 8px; bottom: 8px; z-index: 4;
  padding: 2px 7px; border-radius: 999px;
  font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(11,21,36,.72); color: #E8EEF6;
  border: 1px solid rgba(255,255,255,.22);
  white-space: nowrap; pointer-events: none;
}
.sello-img--oficial    { background: rgba(18,160,91,.88);  border-color: rgba(255,255,255,.3); }
.sello-img--producto   { background: rgba(27,94,140,.88);  border-color: rgba(255,255,255,.3); }
.sello-img--retrato    { background: rgba(120,72,20,.85);  border-color: rgba(255,255,255,.26); }
.sello-img--referencia { background: rgba(48,60,80,.85); }
.sello-img--pendiente  { background: rgba(70,70,70,.85); }

/* --- Carta de referencia: nuestro diseño cuando no hay cromo ------ */
.ref {
  position: absolute; inset: 0; z-index: 0;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 9px 9px 8px;
  color: var(--ref-tinta, #EAF1FA);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(155deg, var(--ref-a, #17233A) 0%, var(--ref-b, #2C4670) 100%);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
/* Trama de seguridad (guilloché sencillo): da empaque sin dibujar nada
   que pertenezca a nadie. */
.ref__trama {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.055) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-115deg, rgba(255,255,255,.04) 0 1px, transparent 1px 11px);
}
/* Las dos franjas del club. NO es un escudo: es el color de su
   camiseta, que sí podemos usar sin apropiarnos de una marca. */
.ref__club {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 46%; transform: translateX(-50%);
  background: linear-gradient(90deg,
    var(--club-a, #3B4A61) 0 46%, var(--club-b, #22303F) 54% 100%);
  opacity: .3;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
}
.ref__pie { position: relative; z-index: 2; display: grid; gap: 1px; }
/* Flex, no grid: con grid las dos columnas se encogían por debajo de su
   contenido en la ficha (132 px) y «Panini» salía como «P…». */
.ref__cab {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  opacity: .92;
}
.ref__fabricante { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ref__temporada { white-space: nowrap; flex: none; }
.ref__centro {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ref__numero {
  font-family: var(--display); font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; opacity: .9;
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  margin-bottom: 5px;
  max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ref__iniciales {
  font-family: var(--display); font-weight: 700; line-height: .9;
  font-size: clamp(1.8rem, 4.6vw, 2.9rem);
  letter-spacing: .01em;
  text-shadow: 0 4px 18px rgba(0,0,0,.45);
}
.ref__pie { text-align: center; }
.ref__jugador {
  font-size: .72rem; font-weight: 700; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ref__equipo, .ref__coleccion {
  font-size: .56rem; opacity: .75; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ref__acabado {
  position: absolute; top: 9px; right: 9px; z-index: 3;
  display: none;   /* solo en los acabados que cambian el precio */
  max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 6px; border-radius: 4px;
  font-size: .5rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

/* Acabados: lo que de verdad distingue una carta de otra. */
.ref--insert .ref__acabado,
.ref--paralela .ref__acabado,
.ref--numerada .ref__acabado,
.ref--relic .ref__acabado,
.ref--autografo .ref__acabado { display: block; }

.ref--insert    .ref__acabado { background: rgba(255,255,255,.18); color: #fff; }
.ref--paralela  .ref__acabado { background: linear-gradient(90deg,#C9A227,#F3DF8A); color: #2A2003; }
.ref--numerada  .ref__acabado { background: linear-gradient(90deg,#8E7BEF,#C7BDFB); color: #1A1140; }
.ref--relic     .ref__acabado { background: linear-gradient(90deg,#B4572C,#E8A06A); color: #2A1205; }
.ref--autografo .ref__acabado { background: linear-gradient(90deg,#0E7C5A,#5ED6A8); color: #052018; }

/* Paralela y autógrafo: barrido metálico contenido, sin animación. */
.ref--paralela::after,
.ref--autografo::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.2) 48%, transparent 62%);
  pointer-events: none;
}
.ref--autografo .ref__iniciales {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: rgba(94,214,168,.6);
  text-underline-offset: 6px;
}
.ref--relic .ref__centro::after {
  content: ''; width: 34%; height: 10px; margin-top: 8px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 3px, transparent 3px 6px);
}
.ref--numerada .ref__numero { border-color: rgba(199,189,251,.75); }

/* Versión grande (ficha): más aire y tipografías mayores. */
.ref--grande { padding: 14px 13px 12px; }
.ref--grande .ref__iniciales { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.ref--grande .ref__jugador { font-size: .8rem; white-space: normal; }
.ref--grande .ref__cab { font-size: .58rem; }

/* --- La ficha, con imagen o con diseño de referencia ------------- */
.ficha-img figcaption { position: absolute; inset: auto 0 0 0; z-index: 4; }
.ficha-img figcaption .sello-img {
  position: static; display: block; text-align: center;
  border-radius: 0; border-width: 1px 0 0 0;
}
.ficha-img--ref { background: none; }

/* --- Portada de referencia de una colección ---------------------- */
.portada-ref {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 14px 16px;
  color: var(--ref-tinta, #EAF1FA);
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(140deg, var(--ref-a, #17233A) 0%, var(--ref-b, #2C4670) 100%);
  overflow: hidden;
}
.portada-ref__trama {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px);
}
.portada-ref > span { position: relative; z-index: 2; }
.portada-ref__fabricante {
  font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .85;
}
.portada-ref__nombre {
  font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: 1.1;
  letter-spacing: .01em;
}
.portada-ref__temporada {
  font-family: var(--display); font-size: .95rem; font-weight: 700; opacity: .82;
  font-variant-numeric: tabular-nums;
}
.portada-ref__formato {
  align-self: flex-start; margin-top: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.3);
}
.portada-ref--premium .portada-ref__formato {
  background: linear-gradient(90deg,#C9A227,#F3DF8A); color: #2A2003; border-color: transparent;
}

/* En la portada de colección el sello se va a la derecha: abajo a la
   izquierda ya está la etiqueta de formato (Caja hobby / Quiosco). */
.col-tarjeta__arte .sello-img { left: auto; right: 8px; }

/* --- Portada en la página de colección --------------------------- */
.cab-coleccion__arte {
  position: relative; margin: 0 0 var(--e3, 20px);
  width: min(320px, 100%); aspect-ratio: 16 / 9;
  border-radius: var(--radio-s); overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.cab-coleccion__arte img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block;
}
.cab-coleccion__arte figcaption { position: absolute; inset: auto 0 0 0; }
.cab-coleccion__arte figcaption .sello-img {
  position: static; display: block; text-align: center;
  border-radius: 0; border-width: 1px 0 0 0;
}

@media (max-width: 560px) {
  .sello-img { font-size: .52rem; left: 6px; bottom: 6px; padding: 2px 6px; }
  .ref { padding: 7px; }
  .ref__jugador { font-size: .64rem; }
  .ref__equipo, .ref__coleccion { font-size: .5rem; }
  .cab-coleccion__arte { width: 100%; }
}

/* La carta de referencia dentro de la ficha es pequeña (132 px): ahí
   la tipografía de la rejilla se sale y el sello tapa la colección.
   Se ajusta al contenedor en vez de al ancho de la pantalla. */
.ficha-img .ref { padding: 7px 7px 20px; grid-template-rows: auto 1fr auto; }
.ficha-img .ref__cab { font-size: .46rem; letter-spacing: .06em; gap: 4px; }
.ficha-img .ref__numero { font-size: .62rem; padding: 0 6px; margin-bottom: 3px; }
.ficha-img .ref__iniciales { font-size: 1.9rem; }
.ficha-img .ref__jugador { font-size: .6rem; }
.ficha-img .ref__equipo, .ficha-img .ref__coleccion { font-size: .46rem; }
.ficha-img .ref__acabado { font-size: .42rem; top: 6px; right: 6px; padding: 1px 4px; }
.ficha-pagina .ficha-img .ref { padding: 9px 9px 22px; }
.ficha-pagina .ficha-img .ref__iniciales { font-size: 2.3rem; }
.ficha-pagina .ficha-img .ref__jugador { font-size: .68rem; }

/* El sello dentro de la ficha vive en 108–168 px: se ajusta al ancho
   en vez de cortarse a media palabra. */
.ficha-img figcaption .sello-img {
  white-space: normal; line-height: 1.15; font-size: .5rem; letter-spacing: .04em; padding: 3px 4px;
}

/* --- La carta de referencia dentro de la REJILLA ------------------
   La tarjeta ya lleva sus propias etiquetas encima (club arriba a la
   izquierda, serie arriba a la derecha, número abajo a la derecha), así
   que la cabecera del diseño sobraba: quedaba tapada. Y el pie tenía
   que subir para que el sello no se comiera el equipo y la colección. */
.carta__mini .ref__cab { display: none; }
/* Sin la cabecera quedan dos filas, no tres: si no se dice, el pie se
   queda con el 1fr y sus tres líneas se separan por toda la carta. */
.carta__mini .ref { grid-template-rows: 1fr auto; padding-bottom: 30px; }
.carta__mini .ref__pie { align-content: end; text-align: left; padding-right: 34px; }
.carta__mini .ref__jugador { font-size: .66rem; }
.carta__mini .ref__equipo, .carta__mini .ref__coleccion { font-size: .5rem; }
.carta__mini .sello-img { left: 6px; bottom: 6px; }


/* --- Atribución de las fotos --------------------------------------
   Las licencias Creative Commons obligan a citar al autor DONDE se usa
   la foto, no solo en una página aparte. Va pegada a la imagen. */
.atribucion {
  display: block; padding: 3px 5px;
  font-size: .5rem; line-height: 1.25; text-align: center;
  color: var(--texto-inverso-suave, #cfd8e3);
  background: rgba(11,21,36,.78);
  overflow-wrap: anywhere;
}
.atribucion a { color: inherit; text-decoration: underline; }

/* --- Página de créditos ------------------------------------------- */
.creditos__aviso {
  margin: 0 0 var(--e3, 20px);
  padding: 12px 14px;
  border-left: 4px solid var(--cesped, #12A05B);
  background: var(--superficie);
  font-size: .88rem; line-height: 1.5;
}
.creditos__aviso--pie { border-left-color: var(--borde-cromo); margin: var(--e3, 20px) 0 0; font-size: .82rem; }
.creditos__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.credito {
  display: flex; gap: 10px; align-items: center;
  padding: 8px; border: 1px solid var(--borde-cromo); border-radius: var(--radio-s);
  background: var(--superficie-2);
}
.credito__img {
  width: 56px; height: 56px; flex: none;
  object-fit: cover; object-position: center 15%;
  border-radius: 8px; background: var(--borde-cromo);
}
.credito__texto { min-width: 0; }
.credito__jugador { margin: 0; font-weight: 700; font-size: .9rem; line-height: 1.2; }
.credito__meta { margin: 2px 0 0; font-size: .78rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.credito__origen { margin: 2px 0 0; font-size: .72rem; color: var(--texto-suave); }
.credito a { color: inherit; }

/* =========================================================
   UTILIDADES FINALES — DEBEN IR LAS ÚLTIMAS
   =========================================================
   [hidden] SIEMPRE oculta. No es opcional.
   ---------------------------------------------------------
   El atributo `hidden` se apoya en el `display:none` de la hoja de
   estilos del NAVEGADOR, que es la de menor prioridad de toda la
   cascada. Cualquier regla de autor con `display` —por ejemplo
   `.modal-fondo { display:grid }`— la pisa, y el elemento se queda
   visible aunque lleve el atributo. Eso dejaba el overlay del modal
   abierto nada más cargar la página, difuminando y bloqueando toda la
   interfaz. Afectaba igual a .rejilla y a .buscador__limpiar.

   Va al FINAL del archivo a propósito: así gana por DOS motivos
   independientes, `!important` y orden en el documento. Según el
   estándar bastaría con uno, pero los dos juntos evitan depender de la
   fidelidad del motor de cascada.

   Mientras el JS use `elemento.hidden = true`, el elemento desaparece
   de verdad y deja de capturar clics.
   ========================================================= */
[hidden] {
  display: none !important;
  /* Aunque alguien reintroduzca un display, un elemento marcado como
     oculto nunca debe interceptar el ratón. */
  pointer-events: none !important;
}

/* --- El logo completo, solo en la portada -------------------------
   Es la pieza grande: cuatro cartas, el escudo y el wordmark. A
   tamaño pequeño se convierte en una mancha, así que en cabecera va
   la marca simple. Nunca se repite de fondo ni entra en las fichas. */
.hero__logo {
  display: block; width: min(420px, 78%); height: auto;
  margin: 0 0 var(--e3);
  /* Sin `filter`: crearía un contexto de composición propio y anularía
     el mix-blend-mode que hace desaparecer el fondo negro del PNG. */
}
@media (max-width: 720px) { .hero__logo { width: min(320px, 86%); margin-bottom: var(--e2); } }

/* El logo viene sobre negro, no recortado. Con `screen` el negro
   desaparece contra el azul noche y solo queda el cromo y el brillo:
   nada de recuadro negro flotando en la portada. */
.hero__logo { mix-blend-mode: screen; }

/* Claim de la portada: lo que antes se apretaba en la cabecera. */
.hero__claim {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--plata);
  margin: calc(var(--e3) * -1) 0 var(--e3);
}

/* --- Bloque de marca de la cabecera -------------------------------
   El icono manda el tamaño y el nombre no se parte nunca: en móvil se
   pliega la navegación, jamás la marca. El buscador ocupa su propia
   fila, así que no empuja ni recorta el logo. */
@media (max-width: 720px) {
  .logo { width: 34px; height: 34px; }
  .marca { gap: 8px; }
  .marca__nombre { font-size: 1.32rem; letter-spacing: .045em; }
}
@media (max-width: 380px) {
  .logo { width: 32px; height: 32px; }
  .marca__nombre { font-size: 1.18rem; }
}

/* --- Catálogo frente a mercado ------------------------------------
   El catálogo son 7.018 fichas; el mercado medible, mucho menos. La
   auditoría del 28/09/2026 dejó claro que el 92 % del catálogo es
   producto de caja que las tres fuentes españolas no venden. La web no
   esconde esas colecciones —siguen enteras, con sus cartas— pero
   tampoco puede dar a entender que todas tienen precio.

   Son avisos DISCRETOS: informan sin gritar y sin prometer plazos. La
   cola puede tardar días, así que aquí nunca se escribe «en breve». */
.resumen-mercado {
  margin: var(--e1) 0 0;
  font-size: .92rem;
  color: var(--texto-2);
  line-height: 1.5;
}
.resumen-mercado strong { color: var(--plata); font-weight: 700; }

.sello-mercado {
  display: block;
  margin-top: 6px;
  font-size: .74rem;
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--texto-2);
}
.sello-mercado--activo { color: var(--sube); }
.sello-mercado--activo::before { content: '● '; }
.sello-mercado--midiendo::before,
.sello-mercado--pendiente::before,
.sello-mercado--sin::before { content: '○ '; }

.aviso-mercado {
  grid-column: 1 / -1;
  margin: var(--e2) 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--borde-cromo);
  border-left: 3px solid var(--aviso);
  background: var(--superficie-2);
  color: var(--texto-2);
  font-size: .9rem;
  line-height: 1.55;
}
.aviso-mercado strong { color: var(--plata); }
.aviso-mercado--sin_cobertura_suficiente { border-left-color: var(--texto-2); }
/* Cobertura pendiente: ni se ha preguntado. Se marca con el azul de la
   marca, no con el naranja de aviso: no hay nada que revisar. */
.aviso-mercado--cobertura_pendiente { border-left-color: var(--cian); }