/* ===============================================================
 * Tile de carta — cabecera limpia con badges, arte SIN superposiciones,
 * body con nombre/set/precio, footer con enlace Cardmarket.
 * =============================================================== */

/* Filas de igual altura: todas las tarjetas de un MISMO grid comparten la altura
   de la fila más alta → quedan perfectamente alineadas aunque el cuerpo varíe
   (línea de liquidez/tendencia presente o no, motivo de ganga…). El :has acota
   el efecto a los grids que contienen tarjetas, sin tocar otros .grid del sitio. */
.grid:has(> .card-tile) { grid-auto-rows: 1fr; }

.card-tile {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid), box-shadow var(--t-mid);
}
.card-tile:hover {
  transform: translateY(-4px);              /* fallback sin tilt (táctil/reduced) */
  border-color: var(--border-h);
  box-shadow: var(--shadow-3);
}
.card-tile.is-tilting {
  z-index: 5;
  border-color: var(--poke-gold);
  box-shadow: 0 24px 50px rgba(0,0,0,.5);
}
.card-tile__cover {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  cursor: pointer;
  color: inherit;
}

/* Cabecera con badges (lang · rarity · #num) */
.card-tile__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  min-height: 32px;
}
/* nowrap + min-width:0: la cabecera (lang · rareza) vive SIEMPRE en una línea.
   Si una rareza inesperada fuese larga, el badge se recorta con elipsis en vez de
   envolver y descuadrar la altura de la tarjeta (red de seguridad sobre shortRarity). */
.card-tile__head-l { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.card-tile__head-l .rarity { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-tile__head-r { flex-shrink: 0; }
.card-tile__lang {
  padding: 2px 7px;
  background: var(--poke-ink);
  color: var(--text);
  border-radius: var(--r-xs);
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
}
:root[data-theme="light"] .card-tile__lang { background: #1A1A1C; color: #fff; }
.card-tile__num {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--text-3);
}
/* En grids de 2 columnas (móvil) el head no cabe entero y la rareza acababa
   en elipsis ("UL…"): el nº de carta es lo más prescindible (está en la ficha). */
@media (max-width: 480px) {
  .card-tile__head-r .card-tile__num { display: none; }
}

/* Arte de la carta SIN overlays */
.card-tile__art {
  position: relative;
  aspect-ratio: 3/4.2;
  background: var(--bg-deep);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: var(--space-2);
}
/* El foil debe calzar la SILUETA REAL de la carta, no el cuadro entero del
   tile. .card-tile__art incluye el "paspartú" (padding sobre --bg-deep); las
   capas holo (inset:0) vivían sobre ESE cuadro completo y por tanto también
   pintaban el padding/fondo. Este envoltorio ocupa exactamente el content-box
   (imagen incluida, paspartú excluido) y es el ancestro posicionado de las
   capas holo en el tile → se ciñen a la carta. Menor reordenamiento posible:
   mismos hijos (img/placeholder + holo__shine/sparkle/glare), un solo div más. */
.card-tile__art-frame {
  position: relative;
  width: 100%; height: 100%;
}
.card-tile__art img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
  transition: transform var(--t-slow) var(--ease);
}
.card-tile:hover .card-tile__art img { transform: scale(1.04); }
.card-tile__art--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mute);
  width: 100%; height: 100%;
}
.card-tile__art--empty .pokeball-img { opacity: .35; }
.card-tile__ghost { opacity: .5; }

/* Body */
.card-tile__body {
  padding: var(--space-3) var(--space-4) var(--space-3);
  display: flex; flex-direction: column; gap: 5px;
}
.card-tile__name {
  font-weight: 700; font-size: 14px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-tile__set {
  font-size: 11px; color: var(--text-3);
  display: flex; gap: 6px; align-items: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-tile__variants {
  font-size: 10px;
  background: rgba(255,203,5,.18);
  color: var(--poke-gold-d);
  border: 1px solid rgba(255,203,5,.35);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-weight: 700;
  flex-shrink: 0;
}
:root[data-theme="dark"] .card-tile__variants { color: var(--poke-gold); }

.card-tile__price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.card-tile__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.card-tile__price--null { color: var(--text-mute); font-size: 13px; }
.card-tile__src { font-size: 10px; color: var(--text-mute); margin-top: 3px; letter-spacing: .03em; text-transform: uppercase; font-weight: 600; }
.card-tile__liq { text-transform: none; letter-spacing: 0; }
.card-tile__liq.is-ok  { color: var(--up, #46d39a); }
.card-tile__liq.is-low { color: var(--text-mute); }
/* Liquidez ESTIMADA (proxy de la gemela EN, p.ej. ES/JP): sutilmente atenuada en
   cursiva para distinguirla del dato nativo sin gritar. La honestidad va en el "· est." */
.card-tile__liq.is-est { font-style: italic; opacity: .82; }
/* Motivo de ganga: por qué esta carta es oportunidad (lenguaje claro, sin jerga) */
.card-tile__deal {
  margin-top: 6px; font-size: 11px; font-weight: 700; line-height: 1.25;
  color: var(--poke-gold);
  display: flex; align-items: flex-start; gap: 5px;
}
.card-tile__deal .ico { margin-top: 1px; flex-shrink: 0; fill: var(--poke-gold); stroke: none; }

/* Footer fijo con Cardmarket link */
.card-tile__footer {
  padding: 0 var(--space-3) var(--space-3);
  margin-top: auto;
}
/* Enlace de afiliado: latón en reposo (coherente con la paleta), se llena de rojo
   "comprar" al pasar el ratón → afordancia clara sin ruido rojo constante. */
.card-tile__cm-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  color: var(--brass-l);
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.card-tile__cm-link:hover { background: var(--poke-red); color: #fff; border-color: var(--poke-red-d); transform: translateY(-1px); }
.card-tile__cm-link svg { stroke: currentColor; }
.card-tile__cm-link--disabled {
  background: var(--bg-elev); color: var(--text-mute);
  border-color: var(--border); cursor: not-allowed;
}

/* Cinta inferior de color del tipo dominante / rareza */
.card-tile::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--ribbon, var(--border));
  transition: height var(--t-fast);
  pointer-events: none;
}
.card-tile:hover::after { height: 5px; }
.card-tile[data-ribbon="up"]    { --ribbon: var(--up); }
.card-tile[data-ribbon="down"]  { --ribbon: var(--down); }
.card-tile[data-ribbon="warn"]  { --ribbon: var(--warn); }
.card-tile[data-ribbon="gold"]  { --ribbon: var(--poke-gold); }
.card-tile[data-ribbon="red"]   { --ribbon: var(--poke-red); }

/* ===============================================================
 * Holo effect — específico por rareza, aplicado SOLO a la imagen
 * del modal de detalle (no del tile en grid).
 * =============================================================== */
.holo {
  position: relative;
  width: 100%; max-width: 360px;
  aspect-ratio: 245/342;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.6);
  transform-style: preserve-3d;
  transition: transform .4s var(--ease);
  /* isolate = las capas (color-dodge/overlay) componen SOLO contra la imagen de
     la carta, no contra el fondo oscuro de detrás (que las ennegrecía). */
  isolation: isolate;
}
.holo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* ── Efecto holográfico estilo simeydotme ──────────────────────────────
   Tres capas que SIGUEN el puntero (--mx/--my las fija tilt.js):
     · __shine   = foil de color que se desplaza al inclinar
     · __sparkle = purpurina/glitter que destella
     · __glare   = foco de luz especular bajo el puntero
   En reposo: calmado (opacidad 0). Al inclinar: vívido pero no cegador. */
/* Variables base (paleta sunpillar + textura de purpurina propia). Compartidas
   por el holo del modal Y los tiles del grid → el foil por rareza se ve también
   al navegar (sobre la imagen, activado en hover por tilt.js). */
.holo, .card-tile {
  --glitter: url("/lustre-demo/static-frontend/assets/glitter.png?v=1");
  --grain: url("/lustre-demo/static-frontend/assets/grain-fine.webp");
  --glittersize: 26%;
  --card-opacity: 0;            /* lo anima tilt.js (muelle 0→1) */
  --pointer-from-center: 0;
  /* DOS paletas, como el foil real (técnica simeydotme, reimplementada):
     - sun*: pilares CLAROS para los efectos que las mezclan en hue/exclusion
       (V/ultra, oro) — ahí el brillo lo doma el filter, no la paleta.
     - rb*: arcoíris OSCURO (~37% luz) para los efectos en color-dodge/luminosity
       (rainbow/SIR, holo de barras) — tiñe sin quemar. */
  --sun1: hsl(2,100%,73%);  --sun2: hsl(53,100%,69%); --sun3: hsl(93,100%,69%);
  --sun4: hsl(176,100%,76%); --sun5: hsl(228,100%,74%); --sun6: hsl(283,100%,73%);
  --rb1: hsl(0,57%,37%);   --rb2: hsl(40,53%,39%);  --rb3: hsl(90,60%,35%);
  --rb4: hsl(180,60%,35%); --rb5: hsl(210,57%,39%); --rb6: hsl(280,55%,31%);
  /* Compat: rarezas con receta simple (ex/ACE SPEC/IR) siguen el patrón antiguo */
  --sp1: hsl(2,62%,50%);   --sp2: hsl(40,60%,50%);  --sp3: hsl(90,62%,46%);
  --sp4: hsl(176,64%,46%); --sp5: hsl(210,64%,52%); --sp6: hsl(280,58%,44%);
  /* Rayado fino de papel foil — el "grano" del laminado real. .holo__shine ya
     lo referenciaba (var(--foil-scan, none)) pero nunca se definía: las
     rarezas con receta simple (illus/double/acespec/shiny) quedaban sin este
     microrrelieve. Líneas de 1px al 115° (ligeramente diagonal, como el papel
     real) con alfa muy bajo: SUTIL — solo aporta textura cuando el color-dodge
     del shine ya está activo, nunca brilla por sí solo. */
  --foil-scan: repeating-linear-gradient(115deg,
    hsla(0,0%,100%,.15) 0%, hsla(0,0%,100%,.15) .4%,
    transparent .4%, transparent 1.2%);
  --scan-size: 200% 200%;
}
/* En tiles el foil es algo más contenido (la imagen es pequeña) */
.card-tile .holo__shine, .card-tile .holo__sparkle { --glittersize: 20%; }
.holo__shine, .holo__sparkle, .holo__glare {
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
  opacity: 0;
  will-change: opacity, background-position, filter;
}

/* GLARE — foco especular que sigue el puntero y se oscurece en los bordes
   (radial a negro + overlay = el destello característico al inclinar). */
.holo__glare {
  mix-blend-mode: overlay;
  opacity: calc(var(--card-opacity) * .75);
  /* Foco especular que sigue el puntero. El extremo es un negro MUY tenue (.22):
     con .65 + overlay ennegrecía toda la carta (bug). Ahora solo realza/atenúa. */
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x,50%) var(--pointer-y,50%),
    hsla(0,0%,100%,.7) 6%, hsla(0,0%,100%,.18) 24%, hsla(0,0%,0%,.22) 90%);
  filter: brightness(1) contrast(1.2);
}

/* SPARKLE — purpurina REAL (glitter.png) que destella; dos capas a distinta
   escala que se mueven con el puntero. color-dodge = motas que brillan. */
.holo__sparkle {
  mix-blend-mode: color-dodge;
  opacity: calc(var(--card-opacity) * .85);
  background-image: var(--glitter), var(--glitter);
  background-size: var(--glittersize) var(--glittersize),
                   calc(var(--glittersize) * 1.7) calc(var(--glittersize) * 1.7);
  background-position: var(--pointer-x,50%) var(--pointer-y,50%),
                       calc(var(--pointer-x,50%) * -0.6) calc(var(--pointer-y,50%) * -0.6);
  background-blend-mode: color-dodge;
  /* Brillo bajo + contraste alto = solo destellan las motas, no se lava la carta */
  filter: brightness(calc(var(--pointer-from-center) * .3 + .35)) contrast(2.6) saturate(1);
}

/* SHINE — foil de color (por rareza) texturizado con purpurina, desplazado por
   --background-x/y (de tilt.js) → barrido del arcoíris al inclinar.
   TRES capas en un solo elemento (purpurina · patrón fino · foil de color):
   el patrón fino (--foil-scan) es lo que da el "papel" real — barras verticales
   del holo vintage, rayado cruzado de las Radiant… — y cada rareza lo define. */
.holo__shine {
  mix-blend-mode: color-dodge;
  /* tope al 80%: el foil tiñe con claridad pero la ILUSTRACIÓN manda siempre */
  opacity: calc(var(--card-opacity) * .8);
  background-image: var(--glitter), var(--foil-scan, none), var(--foil-grad, none);
  background-size: var(--glittersize) var(--glittersize),
                   var(--scan-size, 200% 200%),
                   var(--foil-size, 400% 400%);
  background-position: center center,
                       var(--background-x,50%) var(--background-y,50%),
                       var(--background-x,50%) var(--background-y,50%);
  background-blend-mode: soft-light;
  /* sheen de color SOBRE la carta (VISIBLE): brillo medio que crece al alejarse
     del centro con techo ~0,94 (en ángulos extremos el color no debe tragarse
     el arte). El blanco quemado lo evita además la paleta a media luz. */
  filter: brightness(calc(var(--pointer-from-center) * .22 + .72)) contrast(1.8) saturate(1.05);
}
/* Pseudo-capas de los efectos premium: cada receta define las suyas (content).
   Heredan la opacidad del padre (.holo__shine ya respira con --card-opacity). */
.holo__shine::before, .holo__shine::after {
  position: absolute; inset: 0;
  border-radius: inherit;
  background-position: center;
  background-size: cover;
}

/* Rarezas mate (común/uncommon/rare SIN holo): solo glare tenue, como el papel */
.holo--common .holo__shine, .holo--common .holo__sparkle,
.holo--uncommon .holo__shine, .holo--uncommon .holo__sparkle,
.holo--rare .holo__shine, .holo--rare .holo__sparkle { display: none; }
.holo--common .holo__glare, .holo--uncommon .holo__glare,
.holo--rare .holo__glare { opacity: calc(var(--card-opacity) * .5); }

/* ═══════ Rare HOLO (vintage/WOTC y holo moderno) — técnica del papel real
   (regular-holo de simeydotme, reimplementada): arcoíris diagonal + scanlines
   en color-dodge, DOBLE juego de barras verticales en hard-light con parallax
   cruzado (se desplazan en sentidos opuestos al inclinar) y un foco radial en
   luminosity que apaga el foil lejos de la luz. En el cartón WOTC el holo vive
   SOLO en la ilustración → máscara de franja (nuestra mejora de fidelidad). */
.holo--holo .holo__shine {
  background-image:
    repeating-linear-gradient(110deg,
      var(--sun6), var(--sun5), var(--sun3), var(--sun2), var(--sun1),
      var(--sun6), var(--sun5), var(--sun3), var(--sun2), var(--sun1), var(--sun6)),
    repeating-linear-gradient(90deg, #000 0 2px, #555 2px 4px);
  background-size: 400% 400%, cover;
  background-position:
    calc(((50% - var(--background-x,50%)) * 2.6) + 50%)
    calc(((50% - var(--background-y,50%)) * 3.5) + 50%),
    center center;
  background-blend-mode: overlay;
  mix-blend-mode: color-dodge;
  filter: brightness(.78) contrast(1.4) saturate(1.2);
  opacity: calc(var(--card-opacity) * .9);
}
.holo--holo .holo__shine::after {
  content: "";
  background-image: radial-gradient(farthest-corner circle
    at var(--pointer-x,50%) var(--pointer-y,50%),
    hsla(0,0%,90%,.8) 0%, hsla(0,0%,78%,.1) 25%, hsl(0,0%,0%) 90%);
  mix-blend-mode: luminosity;
  filter: brightness(.6) contrast(4);
}
/* Las BARRAS van en el div HERMANO (sparkle): hard-light directo contra la
   carta — dentro del shine, la opacidad del padre las aísla y el color-dodge
   las diluye (verificado: desaparecían). */
.holo--holo .holo__sparkle {
  background-image:
    repeating-linear-gradient(90deg,
      #000 0% 6%, hsla(0,0%,70%,1) 9%, #000 10.5% 12%,
      hsla(0,0%,70%,1) 13.5%, #000 15% 42%),
    repeating-linear-gradient(90deg,
      #000 0% 6%, hsla(0,0%,70%,1) 9%, #000 10.5% 12%,
      hsla(0,0%,70%,1) 13.5%, #000 15% 30%);
  background-size: 200% 200%, 200% 200%;
  background-position:
    calc((((50% - var(--background-x,50%)) * 1.65) + 50%) + (var(--background-y,50%) * 0.5)) var(--background-x,50%),
    calc((((50% - var(--background-x,50%)) * -0.9) + 50%) - (var(--background-y,50%) * 0.75)) var(--background-y,50%);
  background-blend-mode: screen;
  mix-blend-mode: hard-light;
  filter: brightness(1.12) contrast(1.1);
  opacity: calc(var(--card-opacity) * .55);
}
.holo--holo .holo__shine, .holo--holo .holo__sparkle {
  -webkit-mask-image: linear-gradient(180deg,
    transparent 7%, #000 14%, #000 53%, transparent 60%);
  mask-image: linear-gradient(180deg,
    transparent 7%, #000 14%, #000 53%, transparent 60%);
}

/* ═══════ SIR / Rainbow — el prismático real: gradiente en LUMINOSITY +
   purpurina, con una segunda pasada arcoíris a otro ángulo en color-dodge
   (dos planos de color que se cruzan al inclinar). Paleta oscura: tiñe rico
   sin quemar. */
.holo--sir .holo__sparkle { display: none; }
.holo--sir .holo__shine {
  background-image:
    linear-gradient(-45deg, var(--rb1), var(--rb5)),
    var(--glitter),
    linear-gradient(-30deg,
      var(--rb1), var(--rb2), var(--rb3), var(--rb4), var(--rb5), var(--rb6),
      var(--rb1), var(--rb2), var(--rb3), var(--rb4), var(--rb5), var(--rb6),
      var(--rb1), var(--rb2), var(--rb3), var(--rb4), var(--rb5), var(--rb6),
      var(--rb1));
  background-blend-mode: luminosity, soft-light;
  background-size: 200% 200%, var(--glittersize) var(--glittersize), 400% 400%;
  background-position:
    calc(25% + (50% * var(--pointer-from-left,.5)))
    calc(25% + (50% * var(--pointer-from-top,.5))),
    center center,
    calc(25% + (var(--pointer-x,50%) / 2)) calc(25% + (var(--pointer-y,50%) / 2));
  mix-blend-mode: color-dodge;
  filter: brightness(calc((var(--pointer-from-center) * .25) + .6)) contrast(2.2) saturate(.75);
  opacity: var(--card-opacity);
}
.holo--sir .holo__shine::after {
  content: "";
  background-image:
    var(--glitter),
    linear-gradient(-60deg,
      var(--rb1), var(--rb2), var(--rb3), var(--rb4), var(--rb5), var(--rb6),
      var(--rb1), var(--rb2), var(--rb3), var(--rb4), var(--rb5), var(--rb6),
      var(--rb1), var(--rb2), var(--rb3), var(--rb4), var(--rb5), var(--rb6),
      var(--rb1));
  background-blend-mode: soft-light;
  background-size: var(--glittersize) var(--glittersize), 400% 400%;
  background-position: center center, var(--pointer-x,50%) var(--pointer-y,50%);
  mix-blend-mode: color-dodge;
  filter: brightness(calc((var(--pointer-from-center) * .3) + .55)) contrast(2) saturate(1);
}

/* ═══════ Hyper/Secret (ORO etched) — purpurina doble + remolino cónico
   acotado por un radial NEGRO (sin él, el dodge lava a rosa sobre zonas
   claras), más la capa DORADA real en lighten (oro líquido) y un velo de
   purpurina con micro-desplazamiento en overlay. */
.holo--hyper .holo__sparkle { display: none; }
.holo--hyper .holo__shine {
  background-image:
    var(--glitter),
    var(--glitter),
    conic-gradient(var(--sun4), var(--sun5), var(--sun6), var(--sun1), var(--sun4)),
    radial-gradient(farthest-corner circle at var(--pointer-x,50%) var(--pointer-y,50%),
      hsla(150,0%,0%,.98) 10%, hsla(0,0%,95%,.15) 90%);
  background-size: var(--glittersize) var(--glittersize),
                   var(--glittersize) var(--glittersize), cover, cover;
  background-position: 45% 45%, 55% 55%, center center, center center;
  background-blend-mode: soft-light, hard-light, overlay;
  mix-blend-mode: color-dodge;
  filter: brightness(calc(.4 + (var(--pointer-from-center) * .2))) contrast(1) saturate(2.7);
  opacity: var(--card-opacity);
}
.holo--hyper .holo__shine::before {
  content: "";
  background-image:
    repeating-conic-gradient(from 0deg,
      hsla(0,0%,100%,.07) 0deg 30deg, transparent 30deg 60deg),
    linear-gradient(45deg, hsl(46,95%,50%), hsl(52,100%,69%)),
    radial-gradient(farthest-corner circle at var(--pointer-x,50%) var(--pointer-y,50%),
      hsla(10,20%,90%,.95) 10%, hsl(0,0%,0%) 70%);
  background-size: 9% 9%, cover, cover;
  background-blend-mode: hard-light, multiply;
  mix-blend-mode: lighten;
  filter: brightness(1.25) contrast(1.25) saturate(.35);
  opacity: .8;
}
.holo--hyper .holo__shine::after {
  content: "";
  background-image: var(--glitter);
  background-size: var(--glittersize) var(--glittersize);
  background-position:
    calc(50% - (2px * var(--pointer-from-left,.5)) + 1px)
    calc(50% - (2px * var(--pointer-from-top,.5)) + 1px);
  mix-blend-mode: overlay;
  filter: brightness(calc((var(--pointer-from-center) * .6) + .6)) contrast(1.5);
}

/* ═══════ Ultra (V / full art) — el metálico real: grano fino en EXCLUSION,
   pilares verticales fundidos en HUE y vetas diagonales en HARD-LIGHT, con una
   segunda pasada a posiciones INVERSAS en exclusion (la interferencia que da
   profundidad de lámina). El foco blanco va aparte en overlay (sparkle). */
.holo--ultra .holo__shine {
  --space: 5%;
  background-image:
    var(--grain),
    repeating-linear-gradient(0deg,
      var(--sun1) calc(var(--space) * 1), var(--sun2) calc(var(--space) * 2),
      var(--sun3) calc(var(--space) * 3), var(--sun4) calc(var(--space) * 4),
      var(--sun5) calc(var(--space) * 5), var(--sun6) calc(var(--space) * 6),
      var(--sun1) calc(var(--space) * 7)),
    repeating-linear-gradient(133deg,
      #0e152e 0%, hsl(180,10%,60%) 3.8%, hsl(180,29%,66%) 4.5%,
      hsl(180,10%,60%) 5.2%, #0e152e 10%, #0e152e 12%),
    radial-gradient(farthest-corner circle at var(--pointer-x,50%) var(--pointer-y,50%),
      hsla(0,0%,0%,.1) 12%, hsla(0,0%,0%,.15) 20%, hsla(0,0%,0%,.25) 120%);
  background-position:
    center center,
    0% var(--background-y,50%),
    calc(var(--background-x,50%) + (var(--background-y,50%) * .2)) var(--background-y,50%),
    var(--background-x,50%) var(--background-y,50%);
  background-size: 33%, 200% 700%, 300% 100%, 200% 100%;
  background-blend-mode: exclusion, hue, hard-light;
  mix-blend-mode: color-dodge;
  filter: brightness(calc((var(--pointer-from-center) * .3) + .42)) contrast(2) saturate(1.5);
  opacity: var(--card-opacity);
}
.holo--ultra .holo__shine::after {
  content: "";
  background-image:
    var(--grain),
    repeating-linear-gradient(0deg,
      var(--sun1) calc(var(--space) * 1), var(--sun2) calc(var(--space) * 2),
      var(--sun3) calc(var(--space) * 3), var(--sun4) calc(var(--space) * 4),
      var(--sun5) calc(var(--space) * 5), var(--sun6) calc(var(--space) * 6),
      var(--sun1) calc(var(--space) * 7)),
    repeating-linear-gradient(133deg,
      #0e152e 0%, hsl(180,10%,60%) 3.8%, hsl(180,29%,66%) 4.5%,
      hsl(180,10%,60%) 5.2%, #0e152e 10%, #0e152e 12%),
    radial-gradient(farthest-corner circle at var(--pointer-x,50%) var(--pointer-y,50%),
      hsla(0,0%,0%,.1) 12%, hsla(0,0%,0%,.15) 20%, hsla(0,0%,0%,.25) 120%);
  background-position:
    center center,
    0% var(--background-y,50%),
    calc((var(--background-x,50%) + (var(--background-y,50%) * .2)) * -1) calc(var(--background-y,50%) * -1),
    var(--background-x,50%) var(--background-y,50%);
  background-size: 33%, 200% 400%, 195% 100%, 200% 100%;
  background-blend-mode: exclusion, hue, hard-light;
  mix-blend-mode: exclusion;
  filter: brightness(calc((var(--pointer-from-center) * .5) + .8)) contrast(1.6) saturate(1.4);
}
.holo--ultra .holo__sparkle {
  background-image: radial-gradient(farthest-corner circle
    at var(--pointer-x,50%) var(--pointer-y,50%),
    hsl(0,0%,100%) 0%, hsla(0,0%,0%,0) 40%);
  background-size: cover;
  background-position: center;
  background-blend-mode: normal;
  mix-blend-mode: overlay;
  filter: none;
  opacity: calc(var(--card-opacity) * .75);
}

/* ═══════ Radiant — el rayado en X real: DOS escaleras de grises (45°/−45°)
   en darken+color-dodge bajo un radial que sigue a la luz; encima, pasteles
   anchos a 55° en pasada inversa y un velo de purpurina fina en overlay. */
.holo--radiant .holo__shine {
  --barwidth: 1.2%;
  background-image:
    radial-gradient(farthest-corner ellipse
      at calc((var(--pointer-x,50%) * .5) + 25%) calc((var(--pointer-y,50%) * .5) + 25%),
      hsl(0,0%,95%) 20%, hsl(175,100%,90%) 130%),
    repeating-linear-gradient(45deg,
      hsl(0,0%,10%) 0% var(--barwidth),
      hsl(0,0%,20%) var(--barwidth) calc(var(--barwidth) * 2),
      hsl(0,0%,35%) calc(var(--barwidth) * 2) calc(var(--barwidth) * 3),
      hsl(0,0%,50%) calc(var(--barwidth) * 3) calc(var(--barwidth) * 4),
      hsl(0,0%,35%) calc(var(--barwidth) * 4) calc(var(--barwidth) * 5),
      hsl(0,0%,20%) calc(var(--barwidth) * 5) calc(var(--barwidth) * 6),
      hsl(0,0%,0%) calc(var(--barwidth) * 6) calc(var(--barwidth) * 7)),
    repeating-linear-gradient(-45deg,
      hsl(0,0%,10%) 0% var(--barwidth),
      hsl(0,0%,20%) var(--barwidth) calc(var(--barwidth) * 2),
      hsl(0,0%,35%) calc(var(--barwidth) * 2) calc(var(--barwidth) * 3),
      hsl(0,0%,50%) calc(var(--barwidth) * 3) calc(var(--barwidth) * 4),
      hsl(0,0%,35%) calc(var(--barwidth) * 4) calc(var(--barwidth) * 5),
      hsl(0,0%,20%) calc(var(--barwidth) * 5) calc(var(--barwidth) * 6),
      hsl(0,0%,0%) calc(var(--barwidth) * 6) calc(var(--barwidth) * 7));
  background-size: cover, 210% 210%, 210% 210%;
  background-position:
    center,
    calc(((var(--background-x,50%) - 50%) * 1.5) + 50%) calc(((var(--background-y,50%) - 50%) * 1.5) + 50%),
    calc(((var(--background-x,50%) - 50%) * 1.5) + 50%) calc(((var(--background-y,50%) - 50%) * 1.5) + 50%);
  background-blend-mode: exclusion, darken, color-dodge;
  mix-blend-mode: color-dodge;
  /* brightness .5 EXACTO: por encima, el dodge sobre cartas claras quema a
     blanco (verificado: .66 lavaba la carta entera). La X es sutil en mano. */
  filter: brightness(.5) contrast(2) saturate(1.75);
  opacity: var(--card-opacity);
}
.holo--radiant .holo__shine::after {
  content: "";
  background-image:
    var(--grain),
    repeating-linear-gradient(55deg,
      hsl(3,95%,85%) 0%, hsl(207,100%,84%) 18%, hsl(29,100%,85%) 36%,
      hsl(160,100%,86%) 54%, hsl(309,94%,87%) 72%, hsl(188,95%,85%) 90%,
      hsl(3,95%,85%) 108%);
  background-size: 30%, 400% 100%;
  background-position:
    center,
    calc(((var(--background-x,50%) - 50%) * -2.5) + 50%) calc(((var(--background-y,50%) - 50%) * -2.5) + 50%);
  background-blend-mode: hard-light;
  mix-blend-mode: color-dodge;
  filter: brightness(.6) contrast(3) saturate(2);
}
.holo--radiant .holo__sparkle {
  background-image:
    var(--glitter),
    radial-gradient(farthest-corner ellipse
      at calc((var(--pointer-x,50%) * .5) + 25%) calc((var(--pointer-y,50%) * .5) + 25%),
      hsla(0,0%,58%,.8) 10%, hsla(0,0%,20%,.9) 20%, hsla(0,0%,20%,.5) 50%);
  background-size: 15% 15%, 350% 350%;
  background-position: center;
  background-blend-mode: color-dodge;
  mix-blend-mode: overlay;
  filter: brightness(.66) contrast(2) saturate(.5);
  opacity: var(--card-opacity);
}

/* ── Rarezas con receta simple (patrón genérico glitter+foil) ───────────── */

/* Illustration Rare (iridiscencia suave, sin barras: el arte respira) */
.holo--illus { --foil-grad: linear-gradient(-32deg,
  hsl(300,55%,42%), hsl(190,55%,40%), hsl(50,60%,42%), hsl(140,50%,38%),
  hsl(300,55%,42%), hsl(190,55%,40%), hsl(50,60%,42%), hsl(140,50%,38%),
  hsl(300,55%,42%), hsl(190,55%,40%), hsl(50,60%,42%), hsl(300,55%,42%)); }

/* Double Rare (ex) — sheen cristalino plateado */
.holo--double { --glittersize: 22%; --foil-grad: linear-gradient(-32deg,
  hsl(200,30%,45%), hsl(0,0%,62%), hsl(160,28%,46%), hsl(210,35%,42%),
  hsl(200,30%,45%), hsl(0,0%,62%), hsl(160,28%,46%), hsl(200,30%,45%)); }

/* ACE SPEC — magenta/teal */
.holo--acespec { --foil-grad: linear-gradient(-32deg,
  hsl(172,50%,38%), hsl(330,55%,42%), hsl(190,55%,40%), hsl(310,55%,40%),
  hsl(172,50%,38%), hsl(330,55%,42%), hsl(190,55%,40%), hsl(172,50%,38%)); }

/* Shiny (baby shiny / shiny vault) — purpurina DENSA y fría sobre plateado */
.holo--shiny {
  --glittersize: 13%;
  --foil-size: 280% 280%;
  --foil-grad: linear-gradient(-28deg,
    hsl(220,25%,40%), hsl(0,0%,55%), hsl(200,30%,44%), hsl(0,0%,50%),
    hsl(220,25%,40%), hsl(0,0%,55%), hsl(200,30%,44%), hsl(220,25%,40%));
}

/* ── Glares específicos (la luz especular de cada acabado) ──────────────── */
.holo--holo .holo__glare {
  mix-blend-mode: overlay;
  filter: brightness(.8) contrast(1.5);
  opacity: calc(var(--card-opacity) * .8);
}
.holo--sir .holo__glare {
  background-image: radial-gradient(farthest-corner circle
    at var(--pointer-x,50%) var(--pointer-y,50%),
    hsl(0,0%,80%), hsla(187,10%,85%,.25) 30%, hsl(197,6%,25%) 120%);
  mix-blend-mode: hard-light;
  filter: brightness(.9) contrast(1.75);
  opacity: calc(var(--card-opacity) * var(--pointer-from-center) * .9);
}
.holo--hyper .holo__glare {
  background-image: radial-gradient(farthest-corner circle
    at var(--pointer-x,50%) var(--pointer-y,50%),
    hsla(45,8%,80%,.3) 0%, hsl(22,15%,12%) 180%);
  mix-blend-mode: hard-light;
  filter: brightness(1.3) contrast(1.5);
  opacity: calc(var(--card-opacity) * .8);
}
.holo--ultra .holo__glare {
  background-image: radial-gradient(farthest-corner circle
    at var(--pointer-x,50%) var(--pointer-y,50%),
    hsl(0,0%,75%) 5%, hsl(200,5%,35%) 60%, hsl(320,40%,10%) 150%);
  background-size: 120% 150%;
  background-position: center center;
  mix-blend-mode: hard-light;
  filter: brightness(1) contrast(1.2) saturate(1);
  opacity: calc(var(--card-opacity) * .75);
}
.holo--radiant .holo__glare {
  background-image: radial-gradient(farthest-corner circle
    at var(--pointer-x,50%) var(--pointer-y,50%),
    hsla(0,0%,100%,.33) 0%, hsl(0,0%,25%) 110%);
  mix-blend-mode: hard-light;
  filter: brightness(1) contrast(1.5);
  opacity: calc(var(--card-opacity) * .8);
}
/* La inclinación del holo la controla tilt.js (spring physics).
   Fallback sutil para táctil / reduced-motion donde el tilt está desactivado: */
@media (hover: hover) and (pointer: fine) {
  .holo:not(.is-tilting):hover { transform: perspective(1000px) rotateY(-3deg) rotateX(2deg); }
}

/* Afordancia del modo GIROSCOPIO (tilt.js, solo iOS 13+): botón discreto y
   único, fijo sobre el contenido, para conceder el permiso de orientación con
   un gesto explícito del usuario — vive fuera de las cartas para no competir
   con la navegación del tile (que es un <a>). Desaparece tras usarse. */
.tilt-gyro-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: var(--bg-elev);
  color: var(--brass-l);
  border: 1px solid color-mix(in srgb, var(--brass) 50%, transparent);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: var(--shadow-3);
  cursor: pointer;
}
.tilt-gyro-prompt:active { transform: translateX(-50%) scale(.97); }

/* ===============================================================
 * VEREDICTO — la síntesis de TODAS las señales en una acción legible
 * (frontend/js/components/verdict.js). Es lo PRIMERO que debe leerse al
 * abrir una carta: la ACCIÓN manda (tipografía display), la convicción y
 * el porqué (headline + drivers) la sostienen, y los caveats van al final,
 * atenuados a propósito — la honestidad no compite visualmente con la
 * decisión, pero sigue ahí.
 * tone: up (compra clara) · warn (cautela) · down (vender/evitar)
 *     · neutral (sin dirección clara) · none (sin dato suficiente).
 * Reutilizado en 3 sitios: bloque completo en la ficha (carta.js), y
 * compacto en los tiles de grid (card-tile.js) y filas de cartera (cartera.js).
 * =============================================================== */
.verdict {
  --v-accent: var(--text-mute);
  --v-bg: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--v-accent);
  border-radius: var(--r-lg);
  background: var(--v-bg);
  padding: 18px 20px;
  margin: 4px 0 18px;
}
.verdict--up      { --v-accent: var(--up);    --v-bg: var(--up-bg); }
.verdict--warn     { --v-accent: var(--warn);  --v-bg: var(--warn-bg); }
.verdict--down     { --v-accent: var(--down);  --v-bg: var(--down-bg); }
/* neutral = latón contenido (firma de marca), no arcoíris ni gris IA */
.verdict--neutral  { --v-accent: var(--brass); --v-bg: var(--bg-elev); }
.verdict--none     { --v-accent: var(--text-mute); --v-bg: var(--bg-elev); }

.verdict__head { display: flex; align-items: center; gap: 10px; }
.verdict__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--v-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--v-accent) 18%, transparent);
  flex-shrink: 0;
}
.verdict__action {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  line-height: 1.05;
}
.verdict__conviction {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 6px 0 0 22px;   /* alinea bajo la acción, no bajo el punto */
}
.verdict__headline {
  margin: 10px 0 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-2);
}
.verdict__drivers {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.verdict__drivers li {
  font-size: var(--fs-note); color: var(--text-2); line-height: 1.5;
  padding-left: 16px; position: relative;
}
.verdict__drivers li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--v-accent);
}
/* Caveats — nota honesta: atenuados, más pequeños, separados por un filete
   discontinuo. La honestidad no grita, pero está siempre visible. */
.verdict__caveats {
  list-style: none; margin: 12px 0 0; padding: 10px 0 0;
  border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 5px;
}
.verdict__caveats li {
  font-size: var(--fs-caption); color: var(--text-mute); line-height: 1.5;
  padding-left: 14px; position: relative; font-style: italic;
}
.verdict__caveats li::before { content: "–"; position: absolute; left: 0; }

/* Compacto — tiles de grid (card-tile.js) y filas de cartera (cartera.js):
   solo punto de color + acción + convicción, sin marco ni fondo propio. */
.verdict--compact {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 0; margin: 0; border-radius: 0;
}
.verdict--compact .verdict__dot { width: 8px; height: 8px; box-shadow: none; }
.verdict--compact .verdict__action {
  font-family: var(--font-body);
  font-weight: 800; font-size: 12.5px; letter-spacing: 0;
  color: var(--v-accent);
}
.verdict--compact .verdict__conviction {
  margin: 0; font-size: 10px; color: var(--text-mute);
}
/* Envoltura del veredicto compacto dentro del tile de carta */
.card-tile__verdict { margin-top: 5px; }