/* =====================================================================
   PICO · base.css — sistema «STADIUM» (variante C aprobada por marco) para TODAS las páginas.
   Tokens + base + componentes comunes. Las páginas añaden lo suyo en /css/pages/<página>.css
   (la portada en /css/home.css). Catálogo de clases: docs/FRONTEND.md.
   Reglas: radio 0, bordes gordos, sombras duras sin difuminar, collage de polígonos, pantalla CRT,
   letra condensada de estadio (Smooch Sans 900 · Barlow Condensed · Inter).
   Las animaciones se paran SOLO con html.sin-movimiento (botón #mov), NUNCA con prefers-reduced-motion.
   ===================================================================== */

:root {
  /* tinta y superficies */
  --ink: #07120C;
  --ink-2: #0C1B13;
  --ink-3: #17301F;
  --ink-4: #23452F;
  --screen: #081710;
  /* «crema» del sistema = menta */
  --mint: #CBF5DD;
  --mint-2: #9DD3B5;
  --mint-3: #74A88B;
  --white: #F1FFF7;
  /* primario y acentos */
  --green: #12E680;
  --green-2: #0CB866;
  --green-deep: #0B4A2B;
  --purple: #5B2DB8;
  --purple-2: #946BFF;
  --purple-deep: #3A1888;
  --purple-ink: #1A0A45;
  --yellow: #F7FF19;
  --red: #FF3340;
  --red-2: #FF5A64;
  --gold: #FFC83D;
  --silver: #D3DEE6;
  --bronze: #E8904F;

  /* letra */
  --ds: 1.153; /* Smooch Sans → altura de Burbank. Si algún día se licencia Burbank: 1 */
  --f-display: 'Burbank Big Condensed', 'Smooch Sans', 'Barlow Condensed', Impact, sans-serif;
  --f-num: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

  /* forma */
  --b-fat: 5px;
  --sh-sm: 3px 3px 0 var(--ink);
  --sh-md: 6px 6px 0 var(--ink);
  --sh-lg: 9px 9px 0 var(--ink);
  --sh-xl: 14px 14px 0 var(--ink);
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --gutter: 24px;
  --hdr-h: 68px; /* nav.js lo pone a la altura real */

  /* movimiento */
  --ease-out: cubic-bezier(.2, .9, .3, 1);
  --ease-pop: cubic-bezier(.2, 1.4, .4, 1);
  --ease-flip: cubic-bezier(.34, .92, .28, 1);

  color-scheme: dark;
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--mint);
  font: 500 16px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
/* grano global al 5 % */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
main:focus { outline: none; }
::selection { background: var(--green); color: var(--ink); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); }
[id] { scroll-margin-top: calc(var(--hdr-h) + 12px); }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: square; }
.up { color: var(--green); }
.dn { color: var(--red-2); }
.eq { color: var(--mint-2); }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums lining-nums; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 500;
  padding: 10px 14px; background: var(--yellow); color: var(--ink);
  font: 800 14px/1 var(--f-num); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 12px; }

/* collage de formas (puerta, hero de la portada, cabeceras de página) */
.collage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sh { position: absolute; display: block; }

/* =====================================================================
   PUERTA «DROP IN» (partial gate.html · lógica en js/core/gate.js)
   ===================================================================== */
.gate { display: none; }
html.con-puerta { overflow: hidden; }
html.con-puerta .gate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--purple-ink);
  overflow: hidden;
}
.gate.sale { animation: irisOut .55s cubic-bezier(.7, 0, .3, 1) both; pointer-events: none; }
@keyframes irisOut {
  from { clip-path: inset(0); opacity: 1; }
  to   { clip-path: inset(50%); opacity: 0; }
}
.collage--gate .g1 { width: 84vh; height: 84vh; border-radius: 50%; left: 36%; top: -12%; background: var(--purple-deep); }
.collage--gate .g2 { left: 0; top: 17%; width: 71%; height: 70%; background: var(--purple); }
.collage--gate .g3 { right: 0; top: 0; width: 26%; height: 100%; background: var(--green); clip-path: polygon(46% 0, 100% 0, 100% 100%, 0 100%); }
.collage--gate .g4 { left: 0; bottom: 0; width: 100%; height: 27%; background: var(--green-deep); clip-path: polygon(0 34%, 64% 0, 71% 100%, 0 100%); }
.collage--gate .g5 { left: -4%; bottom: 3%; width: 74%; height: 120px; background: var(--yellow); clip-path: polygon(0 80%, 100% 0, 100% 9%, 0 91%); }

.gate__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px 16px;
}
.gate__pico { position: relative; width: clamp(160px, 30vh, 290px); aspect-ratio: 640 / 736; margin-bottom: 4px; }
.gate__disc {
  position: absolute; left: 6%; top: 8%; width: 88%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ink) 0 57%, var(--ink-2) 57.5% 100%);
  border: 5px solid var(--mint);
  box-shadow: 9px 9px 0 var(--ink);
}
.gate__pico picture { position: relative; display: block; animation: sway 6s ease-in-out 1s infinite; }
.gate__pico img {
  width: 100%; height: auto;
  filter: drop-shadow(7px 8px 0 rgba(7, 18, 12, .92));
  animation: logoIn .9s cubic-bezier(.2, 1.5, .4, 1) both, floaty 4.6s ease-in-out .9s infinite;
}
@keyframes logoIn { from { scale: .2; rotate: -90deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
@keyframes floaty { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -12px; rotate: 3deg; } }
@keyframes sway { 0%, 100% { transform: perspective(900px) rotateY(-22deg); } 50% { transform: perspective(900px) rotateY(22deg); } }

.gate__title {
  margin: 0;
  font: 900 calc(clamp(52px, 8.6vw, 124px) * var(--ds)) / .84 var(--f-display);
  text-transform: uppercase; letter-spacing: .005em;
  transform: skew(-7deg);
  animation: titleIn .9s var(--ease-out) .25s both;
}
.gate__title span { display: block; text-shadow: 5px 6px 0 var(--ink); }
.gate__title .l1 { color: var(--mint); }
.gate__title .l2 { color: var(--green); }
@keyframes titleIn {
  from { clip-path: inset(-20% 100% -20% -8%); }
  to   { clip-path: inset(-20% -8% -20% -8%); }
}
.gate__kicker {
  margin: 22px 0 30px; padding: 8px 10px 7px 14px;
  font: 700 14px/1.4 var(--f-num); letter-spacing: .32em; text-transform: uppercase;
  color: var(--white); background: var(--ink);
}
.gate:focus { outline: none; }
.gate__btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 40px 14px 46px;
  font: 900 calc(32px * var(--ds)) / 1 var(--f-display); text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink); background: var(--green);
  border: 5px solid var(--ink); box-shadow: var(--sh-lg);
  cursor: pointer;
  transition: translate .12s ease-out, box-shadow .12s ease-out, background-color .12s;
}
.gate__btn .ico { font-size: 30px; stroke-width: 3; }
.gate__btn::before {
  content: ''; position: absolute; inset: -5px; border: 5px solid var(--green); pointer-events: none;
  animation: ghost 1.6s ease-in-out infinite;
}
@keyframes ghost { from { translate: 0 0; opacity: .5; } to { translate: 10px 10px; opacity: 0; } }
.gate__btn:hover { background: var(--white); translate: -3px -3px; box-shadow: var(--sh-xl); }
.gate__btn:active { translate: 4px 4px; box-shadow: var(--sh-sm); }
.gate__btn:focus-visible { outline: 4px solid var(--yellow); outline-offset: 6px; }
.gate__hint {
  margin-top: 20px;
  font: 700 12px/1 var(--f-num); letter-spacing: .32em; text-transform: uppercase; color: var(--mint-2);
}
@media (hover: none) { .gate__hint { display: none; } }

/* =====================================================================
   CABECERA + TAB BAR (partials header.html + tabbar.html · js/core/nav.js)
   ===================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 4px solid var(--green);
}
.hdr__bar { height: 64px; display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; }
.hdr__brand {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 0 46px 0 22px;
  background: var(--green); color: var(--ink); text-decoration: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}
/* el clip-path recorta el contorno de foco: se dibuja por dentro, en tinta */
.hdr__brand:focus-visible { outline: none; }
.hdr__brand:focus-visible::after { content: ''; position: absolute; inset: 5px 30px 5px 6px; border: 3px solid var(--ink); pointer-events: none; }
.hdr__coin {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--mint);
}
.hdr__coin img { width: 30px; height: auto; }
.hdr__word {
  font: 900 calc(36px * var(--ds)) / 1 var(--f-display); letter-spacing: .02em;
  transform: skew(-7deg); padding-top: 4px;
}
.hdr__nav { display: flex; justify-content: center; align-items: stretch; }
.hdr__nav a {
  position: relative; display: flex; align-items: center; padding: 0 18px;
  font: 700 14px/1 var(--f-num); letter-spacing: .22em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  transition: color .15s;
}
.hdr__nav a:hover { color: var(--green); }
.hdr__nav a.is-active { background: var(--green); color: var(--ink); }
.hdr__nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--green); }
.hdr__nav a:focus-visible { outline-offset: -5px; }
.hdr__nav a.is-active:focus-visible { outline-color: var(--ink); }
.hdr__right {
  display: flex; align-items: center; gap: 4px;
  padding: 0 16px 0 42px;
  background: var(--green);
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
}
.soc { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); transition: opacity .15s; }
.soc svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.soc:hover { opacity: .6; }
.hdr .soc:focus-visible, .hdr .mov:focus-visible { outline-color: var(--ink); outline-offset: 1px; }
.mov {
  width: 40px; height: 40px; margin-left: 8px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--green); border: 0; cursor: pointer;
}
.mov svg { width: 18px; height: 18px; }
.mov__pause { fill: none; stroke: currentColor; stroke-width: 4; }
.mov__play { fill: currentColor; display: none !important; }
.mov[aria-pressed="false"] .mov__pause { display: none !important; }
.mov[aria-pressed="false"] .mov__play { display: block !important; }
.tabbar { display: none; }

/* barra de aviso bajo la cabecera: board manual, parado o sin conexión (ui.js) */
.srcbar { position: relative; z-index: 90; border-bottom: 3px solid var(--ink); }
.srcbar__in {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding-top: 10px; padding-bottom: 9px;
  font: 600 14px/1.45 var(--f-body);
}
.srcbar b { font: 800 14px/1.2 var(--f-num); letter-spacing: .2em; text-transform: uppercase; }
.srcbar a { font: 800 13px/1.2 var(--f-num); letter-spacing: .16em; text-transform: uppercase; text-underline-offset: 3px; }
.srcbar--manual { background: var(--yellow); color: var(--ink); }
.srcbar--stale { background: var(--gold); color: var(--ink); }
.srcbar--offline { background: #B3131F; color: var(--white); } /* rojo oscurecido: texto blanco con contraste AA */
.srcbar :focus-visible { outline-color: var(--ink); }

/* =====================================================================
   SECCIONES Y TITULARES
   ===================================================================== */
.sec { padding: 70px 0 64px; }
.sec--tint { background: linear-gradient(180deg, var(--ink) 0, var(--ink-2) 50%, var(--ink) 100%); }
.sec__head { margin-bottom: 30px; }
.sec__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.h1 {
  font: 900 calc(clamp(54px, 7.6vw, 116px) * var(--ds)) / .84 var(--f-display);
  text-transform: uppercase; letter-spacing: .005em;
  color: var(--white);
  text-shadow: 5px 6px 0 var(--ink);
  transform: skew(-7deg); transform-origin: left bottom;
}
.h1 em, .h2 em { font-style: normal; color: var(--green); }
.h2 {
  font: 900 calc(clamp(40px, 5vw, 72px) * var(--ds)) / .86 var(--f-display);
  text-transform: uppercase; letter-spacing: .005em;
  color: var(--mint);
  text-shadow: 4px 5px 0 var(--purple);
  transform: skew(-6deg); transform-origin: left bottom;
}
.h3 {
  font: 900 calc(clamp(28px, 2.6vw, 38px) * var(--ds)) / .9 var(--f-display);
  text-transform: uppercase; letter-spacing: .01em; color: var(--white);
  transform: skew(-6deg); transform-origin: left bottom;
}
.kicker { font: 800 13px/1.3 var(--f-num); letter-spacing: .3em; text-transform: uppercase; color: var(--green); }
.sec__sub { margin-top: 14px; max-width: 760px; font: 500 15px/1.55 var(--f-body); color: var(--mint-2); }
.sec__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; font: 700 13px/1.4 var(--f-num); letter-spacing: .16em; text-transform: uppercase; color: var(--mint-3); }
.sec__more { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.note { font: 500 13px/1.6 var(--f-body); color: var(--mint-3); }
.prose { max-width: 70ch; font: 500 16px/1.7 var(--f-body); color: var(--mint); }
.prose p + p { margin-top: 1em; }
.prose a { color: var(--green); text-underline-offset: 3px; }

/* cabecera de página interior (sobre el collage morado de la portada) */
.phero { position: relative; overflow: hidden; background: var(--purple); padding: 56px 0 60px; border-bottom: 4px solid var(--ink); }
.phero .collage .p1 { width: 520px; height: 520px; border-radius: 50%; left: -180px; top: -260px; background: var(--purple-deep); }
.phero .collage .p2 { right: 0; top: 0; width: 34%; height: 100%; background: var(--green); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.phero .collage .p3 { left: 30%; bottom: 10px; width: 75%; height: 70px; background: var(--yellow); clip-path: polygon(0 82%, 100% 0, 100% 8%, 0 90%); }
.phero .collage .p4 { left: 0; bottom: 0; width: 58%; height: 38%; background: var(--green-deep); clip-path: polygon(0 40%, 100% 0, 90% 100%, 0 100%); }
.phero__in { position: relative; z-index: 1; }
.phero__kicker { display: inline-block; margin-bottom: 18px; padding: 8px 12px 7px; font: 800 14px/1 var(--f-num); letter-spacing: .24em; text-transform: uppercase; color: var(--green); background: var(--ink); }
/* el subtítulo va sobre placa de tinta: se lee aunque el collage pase por detrás */
.phero__sub { display: table; margin-top: 22px; max-width: 640px; padding: 12px 16px 11px; font: 600 17px/1.5 var(--f-body); color: var(--white); background: var(--ink); }
.phero__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font: 800 14px/1 var(--f-num); letter-spacing: .2em; text-transform: uppercase; color: var(--white); text-decoration: none; }
.phero__back:hover { color: var(--yellow); }
.phero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.phero__ctas { margin-top: 28px; }
.phero__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 34px; }

/* =====================================================================
   BOTONES, MEGA-CTA Y CAJA DE CONTRATO (CA)
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 22px 14px;
  font: 800 17px/1 var(--f-num); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 3px solid var(--ink);
  transition: translate .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1), background-color .15s, color .15s, border-color .15s;
}
.btn .ico { font-size: 18px; }
.btn--ink { background: var(--ink); color: var(--green); box-shadow: 6px 6px 0 var(--purple); }
.btn--ink:hover { translate: -3px -3px; box-shadow: 9px 9px 0 var(--purple); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--green); }
.btn--ghost { background: transparent; color: var(--mint); border-color: var(--mint); }
.btn--ghost:hover { color: var(--green); border-color: var(--green); translate: -3px -3px; box-shadow: 6px 6px 0 var(--green); }
.btn--green { background: var(--green); color: var(--ink); box-shadow: var(--sh-md); }
.btn--green:hover { background: var(--white); translate: -3px -3px; box-shadow: var(--sh-lg); }
.btn--yellow { background: var(--yellow); color: var(--ink); box-shadow: 6px 6px 0 var(--green); }
.btn--yellow:hover { translate: -3px -3px; box-shadow: 9px 9px 0 var(--green); }
.btn--sm { padding: 11px 15px 10px; font-size: 14px; }
.btn:active { translate: 3px 3px; box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; translate: none; box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.mega {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  padding: 22px 46px 19px;
  font: 900 calc(clamp(26px, 3.9vw, 50px) * var(--ds)) / 1 var(--f-display);
  text-transform: uppercase; letter-spacing: .025em; text-align: center;
  color: var(--ink); background: var(--yellow); text-decoration: none;
  border: 3px solid var(--ink); box-shadow: 9px 9px 0 var(--green);
  cursor: pointer;
  transition: translate .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
.mega .ico { font-size: .78em; stroke-width: 3.2; }
a.mega:hover { translate: -4px -4px; box-shadow: 13px 13px 0 var(--green); }
a.mega:active { translate: 5px 5px; box-shadow: 3px 3px 0 var(--green); }
.mega:focus-visible { outline: 4px solid var(--mint); outline-offset: 6px; }
.mega.is-demo { cursor: not-allowed; }
.mega--soon, .mega:disabled {
  color: var(--mint-2); background: var(--ink-2);
  border: 3px dashed var(--mint-3); box-shadow: 9px 9px 0 var(--ink-3);
  cursor: not-allowed;
}
.mega--soon b { color: var(--yellow); font-weight: inherit; }

.ca {
  display: flex; align-items: stretch;
  width: min(720px, 100%);
  background: var(--ink-2); border: 3px solid var(--mint); box-shadow: 6px 6px 0 var(--purple);
}
.ca__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 13px 18px 12px; text-align: left; }
.ca__lbl { font: 800 12px/1 var(--f-num); letter-spacing: .3em; text-transform: uppercase; color: var(--green); }
.ca__lbl em { margin-left: 8px; padding: 2px 6px 1px; font-style: normal; letter-spacing: .16em; color: var(--ink); background: var(--yellow); }
.ca__addr { font: 600 15px/1.25 var(--f-mono); color: var(--white); overflow-wrap: anywhere; }
.ca__warn { font: 600 12px/1.4 var(--f-body); color: var(--mint-3); }
.ca__btn {
  flex: none; min-width: 136px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 20px;
  font: 800 15px/1 var(--f-num); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); background: var(--mint); border: 0; cursor: pointer;
  transition: background-color .15s;
}
.ca__btn .ico { font-size: 18px; stroke-width: 2.4; }
.ca__btn:hover, .ca__btn.is-done { background: var(--green); }
.ca__btn:focus-visible { outline-offset: -6px; outline-color: var(--ink); }
.ca__btn:disabled { background: var(--ink-3); color: var(--mint-3); cursor: not-allowed; }
.ca.is-soon { border-style: dashed; border-color: var(--mint-3); box-shadow: 6px 6px 0 var(--ink-3); }
.ca.is-soon .ca__addr { font: 700 15px/1.3 var(--f-num); letter-spacing: .12em; text-transform: uppercase; color: var(--mint-2); }

/* =====================================================================
   TESELAS KPI con esquina doblada
   ===================================================================== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kpi {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px 18px 16px;
  color: var(--white); background: var(--ink-2);
  border: var(--b-fat) solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
}
.kpi--yellow { background: var(--yellow); color: var(--ink); }
.kpi--purple { background: var(--purple); color: var(--white); }
.kpi--green { background: var(--green); color: var(--ink); }
.kpi--ink { background: var(--ink-2); color: var(--white); border-color: var(--mint); box-shadow: 8px 8px 0 var(--purple); }
.kpi__fold { position: absolute; top: -1px; right: -1px; width: 0; height: 0; border-left: 20px solid transparent; border-top: 20px solid var(--ink); }
.kpi--purple .kpi__fold, .kpi--ink .kpi__fold { border-top-color: var(--mint); }
.kpi__lbl { font: 800 13px/1.15 var(--f-num); letter-spacing: .24em; text-transform: uppercase; }
.kpi__val {
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap; min-width: 0;
  font: 900 clamp(40px, 3.9vw, 58px) / .9 var(--f-num);
  font-variant-numeric: tabular-nums lining-nums;
}
.kpi__val small { font-size: .42em; letter-spacing: .1em; }
.kpi__val--soon { font-size: clamp(30px, 2.8vw, 42px); letter-spacing: .08em; text-transform: uppercase; }
.kpi__sub { font: 600 12.5px/1.3 var(--f-body); }
.kpi--yellow .kpi__sub, .kpi--green .kpi__sub { color: #2A3510; }
.kpi--purple .kpi__sub { color: var(--mint); }
.kpi--ink .kpi__sub { color: var(--mint-2); }

/* =====================================================================
   CHIPS, PÍLDORAS, INSIGNIAS
   ===================================================================== */
.pill { display: inline-block; padding: 9px 14px 8px; font: 800 14px/1 var(--f-num); letter-spacing: .14em; text-transform: uppercase; color: var(--green); background: var(--ink); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px 6px;
  font: 800 13px/1 var(--f-num); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: var(--white); background: var(--ink); border: 2px solid var(--ink-4);
}
.chip b { color: var(--green); font-weight: 800; }
.chip--green { color: var(--ink); background: var(--green); border-color: var(--ink); }
.chip--yellow { color: var(--ink); background: var(--yellow); border-color: var(--ink); }
.chip--line { background: transparent; border-color: currentColor; }
.tick, .rar { padding: 5px 8px 4px; font: 800 12px/1 var(--f-num); letter-spacing: .16em; text-transform: uppercase; }
.tick { color: var(--green); background: rgba(7, 18, 12, .8); border: 2px solid var(--green); }
/* [Revisión-legal] contorno de tinta de 1 px: el blanco sobre el centro claro del degradado (Common, Uncommon, Mythic…)
   no llegaba a AA (2,1:1 medido); con el contorno, la letra se lee sobre cualquier punto del degradado */
.rar { color: #fff; background: var(--rbg); border: 2px solid var(--redge);
  text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink), 0 2px 0 var(--ink); }
.rar--mythic { --rbg: radial-gradient(circle at 50% 40%, #FFE36B, #9C6A00); --redge: #FFD84B; }
.rar--legendary { --rbg: radial-gradient(circle at 50% 40%, #EA8D23, #78371D); --redge: #E98D4B; }
.rar--epic { --rbg: radial-gradient(circle at 50% 40%, #C359FF, #4C2483); --redge: #EA5EFF; }
.rar--rare { --rbg: radial-gradient(circle at 50% 40%, #2CC0FF, #143877); --redge: #37D0FF; }
.rar--uncommon { --rbg: radial-gradient(circle at 50% 40%, #6ABB1E, #175117); --redge: #88E339; }
.rar--common { --rbg: radial-gradient(circle at 50% 40%, #BEBEBE, #646464); --redge: #B1B1B1; }

/* medalla hexagonal con el puesto */
.medal {
  width: 40px; height: 44px; flex: none; display: inline-grid; place-items: center;
  clip-path: var(--hex);
  font: 900 24px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink);
}
.medal--1 { background: var(--gold); }
.medal--2 { background: var(--silver); }
.medal--3 { background: var(--bronze); }
.medal--n { background: var(--ink-3); color: var(--mint); }
.prize {
  padding: 5px 8px 4px; border: 2px solid currentColor;
  font: 800 14px/1 var(--f-num); letter-spacing: .1em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.prize--1 { color: var(--gold); }
.prize--2 { color: var(--silver); }
.prize--3 { color: var(--bronze); }

/* insignia de zona: PRIZE ZONE 1-3 · FEE SHARE ZONE 4-10 · IN THE STORM 11+ (ui.zone) */
.zbadge { display: inline-flex; align-items: baseline; gap: 6px; font: 800 11px/1 var(--f-num); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.zbadge b { font-weight: 900; letter-spacing: .08em; }
.zbadge--1 { color: var(--gold); }
.zbadge--2 { color: var(--silver); }
.zbadge--3 { color: var(--bronze); }
.zbadge--fee { color: var(--green); }
.zbadge--storm { color: var(--purple-2); }
.zbadge--box { padding: 6px 9px 5px; border: 2px solid currentColor; font-size: 12px; }

/* flecha de cambio de puesto (ui.move) */
.mv { font: 900 19px/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv--up { color: var(--green); }
/* [Revisión-legal] rojo un punto más claro: «▼1» a 12-17 px sobre las filas tintadas del podio medía 3,6:1 (hace falta 4,5) */
.mv--dn { color: #FF6B74; }
.mv--eq { color: var(--mint-3); }
.lbr--p1 .mv--eq { color: var(--mint-2); }   /* sobre el dorado de la fila del #1, --mint-3 medía 4,3:1 */
.mv--new { padding: 4px 7px 3px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--yellow); }

/* chip de moneda del squad (ui.coinChip): ok / new / nodata / COIN SOON / — */
.coinchip {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 7px 10px 6px;
  font: 800 14px/1 var(--f-num); letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--mint-2); background: var(--ink); border: 2px solid var(--ink-4);
}
.coinchip__t { letter-spacing: .08em; color: var(--white); overflow: hidden; text-overflow: ellipsis; }
.coinchip__mc { color: var(--mint-2); }
.coinchip__ch.up { color: var(--green); }
.coinchip__ch.dn { color: var(--red-2); }
.coinchip__tag { padding: 2px 5px 1px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--yellow); }
.coinchip--soon { color: var(--mint-2); border-style: dashed; border-color: var(--mint-3); letter-spacing: .2em; text-transform: uppercase; font-size: 12.5px; }
.coinchip--none { color: var(--mint-3); border-color: transparent; background: transparent; padding-left: 4px; padding-right: 4px; }
.coinchip--nodata .coinchip__mc { color: var(--mint-3); }

/* PnL total + desglose realizado / no realizado (ui.pnl) */
.pnl { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; }
.pnl__v { font: 900 26px/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pnl__v.up { color: var(--green); }
.pnl__v.dn { color: var(--red-2); }
.pnl__split { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 10px; font: 700 12px/1.1 var(--f-num); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--mint-2); white-space: nowrap; }
.pnl__split i { font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--mint-3); }
.pnl__split .s { display: none; }

/* squad: emblema + nombre (+ zona) (ui.squad) */
.sq { min-width: 0; display: flex; align-items: center; gap: 14px; }
.sq__id { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sq__name { font: 800 24px/1 var(--f-num); letter-spacing: .01em; color: var(--white); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sq__name:hover { color: var(--green); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.members { font: 700 18px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--mint-2); white-space: nowrap; }
.members b { font-weight: 800; color: var(--white); }

/* cadenas */
.chain { display: inline-block; padding: 5px 9px 4px; font: 800 12px/1 var(--f-num); letter-spacing: .2em; text-transform: uppercase; color: var(--mint); background: var(--ink-3); white-space: nowrap; }
.chain--solana { color: #DCCBFF; background: #2B1475; }
.chain--base { color: #D2E2FF; background: #0D2C6B; }
.chain--robinhood-chain, .chain--robinhood { color: #C9FFE2; background: #0B4A2B; }
.chain--bnb, .chain--bsc { color: #FFE58A; background: #4A3A00; }
.chain--ethereum { color: #DADFF7; background: #2C3049; }
.chain--hyperevm { color: #C9FFF4; background: #0B3D3A; }
.bagchip { display: inline-block; padding: 5px 9px 4px; font: 800 14px/1 var(--f-num); letter-spacing: .08em; color: var(--yellow); border: 2px solid var(--yellow); white-space: nowrap; }

/* emblema del squad (PICO.emblem.svg). Sin foto: <svg class="emb"> con sus iniciales. Con foto (.emb--foto): el mismo
   dibujo debajo (se ve mientras la foto carga) y la foto encima, al 72 % y recortada con la forma del emblema
   (clip-path en línea, lo pone emblem.js): alrededor queda el anillo de sus dos colores y el borde de tinta */
.emb { flex: none; width: var(--es, 40px); height: var(--es, 40px); overflow: visible; }
.emb--sm { --es: 30px; }
.emb--md { --es: 40px; }
.emb--lg { --es: 56px; }
.emb--xl { --es: 74px; }
.emb--xxl { --es: 132px; }
.emb--foto { position: relative; display: block; }
.emb__base { width: 100%; height: 100%; overflow: visible; }
.emb__img {
  position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; max-width: none;
  object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none;
}

/* =====================================================================
   FRESCURA, CINTA DEMO/STALE/MANUAL
   ===================================================================== */
.fresh {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 13px/1 var(--f-num); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: var(--mint-2);
}
.fresh:empty { display: none; }
.fresh__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 9px var(--red); animation: pulseDot 1.4s ease-in-out infinite; }
.fresh--live { color: var(--red-2); }
.fresh--recent { color: var(--mint-2); }
.fresh--stale { color: var(--gold); }
.fresh--manual { color: var(--yellow); }
.fresh--demo { color: var(--yellow); }
.fresh--offline { color: var(--red-2); }
.fresh--final { color: var(--gold); }
.fresh--closed { color: var(--purple-2); }
.fresh--loading { color: var(--mint-3); }
@keyframes pulseDot { 50% { scale: .6; opacity: .4; } }

.ribbon {
  position: fixed; left: -50px; bottom: 22px; z-index: 300;
  width: 180px; padding: 6px 0 5px;
  transform: rotate(45deg);
  text-align: center; pointer-events: none;
  font: 900 13px/1 var(--f-num); letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink); background: var(--yellow);
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  box-shadow: 0 5px 0 rgba(7, 18, 12, .55);
}
.ribbon span { padding-left: .3em; }
.ribbon--manual { background: var(--purple-2); }
.ribbon--stale { background: var(--gold); }
html.con-puerta .ribbon { z-index: 250; }

/* =====================================================================
   PANEL CRT (pantalla de estadio: jumbotron, «vault cam»…)
   <div class="crtp"><div class="crtp__bar">…</div><div class="crtp__screen">…<div class="crt"></div></div><div class="crtp__foot">…</div></div>
   ===================================================================== */
.crtp {
  min-width: 0;
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: var(--b-fat) solid var(--ink);
  box-shadow: 11px 11px 0 var(--ink);
}
.crtp__bar, .crtp__foot {
  display: flex; align-items: center; gap: 12px;
  background: var(--ink);
}
.crtp__bar { padding: 16px 22px; border-bottom: 3px solid color-mix(in srgb, var(--green) 38%, var(--ink)); }
.crtp__foot { padding: 10px 14px; border-top: 3px solid color-mix(in srgb, var(--green) 38%, var(--ink)); }
.crtp__brand { font: 700 15px/1 var(--f-num); letter-spacing: .26em; text-transform: uppercase; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crtp__meta { margin-left: auto; font: 800 15px/1 var(--f-num); letter-spacing: .26em; text-transform: uppercase; color: var(--mint); white-space: nowrap; }
.crtp__screen { position: relative; flex: 1; background: var(--screen); overflow: hidden; }
.dot {
  width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 10px var(--red);
  animation: pulseDot 1.4s ease-in-out infinite;
}
.crt {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .24) 3px 4px),
    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0, 0, 0, .72) 100%);
}
.crt::after {
  content: ''; position: absolute; left: 0; right: 0; top: -30%; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(203, 245, 221, .06), transparent);
  animation: scanBar 7s linear infinite;
}
@keyframes scanBar { to { translate: 0 440%; } }
.glow { color: var(--green); text-shadow: 0 0 26px rgba(18, 230, 128, .55), 0 0 3px rgba(18, 230, 128, .9); }

/* =====================================================================
   LEADERBOARD (top 10 de la portada, tabla de 50 de /squads/) — filas con FLIP (PICO.flip.list)
   <div class="lb"><div class="lb__head">…</div><ol class="lb__body"> li.lb__zone / li.lbr … </ol></div>
   ===================================================================== */
.lb { background: var(--ink-2); border: 3px solid var(--mint); box-shadow: 10px 10px 0 var(--purple); }
.lb__head, .lbr {
  display: grid;
  grid-template-columns: 60px 64px minmax(0, 1fr) 88px 236px 290px;
  align-items: center; column-gap: 14px;
  padding: 0 22px 0 26px;
}
.lb__head {
  height: 46px; background: var(--ink); border-bottom: 3px solid var(--mint);
  font: 800 12px/1 var(--f-num); letter-spacing: .28em; text-transform: uppercase; color: var(--mint-2);
}
.lb__head span:first-child { text-align: center; }
.lb__head .r, .r { text-align: right; }
.lb__body { position: relative; list-style: none; margin: 0; padding: 0; }
.lb__zone {
  display: flex; align-items: center; gap: 14px;
  height: 34px; padding: 0 22px 0 26px;
  font: 800 12px/1 var(--f-num); letter-spacing: .3em; text-transform: uppercase; color: var(--ink);
}
.lb__zone em { margin-left: auto; font-style: normal; letter-spacing: .2em; }
.lb__zone--prize { background: var(--gold); }
.lb__zone--fee { background: var(--green); }
.lb__zone--storm { background: var(--purple); color: var(--white); }
.lbr {
  --zc: var(--purple-2);
  position: relative; min-height: 78px;
  background-color: var(--ink-2);
  border-bottom: 1px solid var(--ink-3);
}
.lbr::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--zc); }
.lbr--fee { --zc: var(--green); }
.lbr--p1 { --zc: var(--gold); background-image: linear-gradient(90deg, rgba(255, 200, 61, .2), transparent 60%); }
.lbr--p2 { --zc: var(--silver); background-image: linear-gradient(90deg, rgba(211, 222, 230, .14), transparent 60%); }
.lbr--p3 { --zc: var(--bronze); background-image: linear-gradient(90deg, rgba(232, 144, 79, .16), transparent 60%); }
.lbr:hover { background-color: #10251A; }
.lbr__rank { text-align: center; font: 900 34px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--zc); }
.lbr__pnl { justify-self: end; text-align: right; }
.lbr__coin { justify-self: start; min-width: 0; max-width: 100%; }
.lbr__mv .mv--new { font-size: 12px; }
.lbr.is-old .pnl__v, .lbr.is-old .pnl__split { opacity: .2; filter: blur(4px); }
.lbr .pnl__v, .lbr .pnl__split { transition: opacity .4s, filter .4s; }
.is-ghost { position: absolute !important; left: 0; right: 0; z-index: 0; pointer-events: none; }

/* destellos al cambiar (PICO.flip): fila que sube/baja y cifra que sube/baja */
.lbr.fx-up, .fx-row-up { animation: rowUp 1.2s ease-out .5s both; }
.lbr.fx-dn, .fx-row-dn { animation: rowDn 1.2s ease-out .5s both; }
@keyframes rowUp { from { background-color: rgba(18, 230, 128, .34); } to { background-color: var(--ink-2); } }
@keyframes rowDn { from { background-color: rgba(255, 51, 64, .34); } to { background-color: var(--ink-2); } }
.fx-up:not(.lbr) { animation: valUp 1.3s ease-out both; }
.fx-dn:not(.lbr) { animation: valDn 1.3s ease-out both; }
@keyframes valUp { 0%, 30% { background-color: rgba(18, 230, 128, .4); box-shadow: 0 0 0 4px rgba(18, 230, 128, .4); } 100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; } }
@keyframes valDn { 0%, 30% { background-color: rgba(255, 51, 64, .4); box-shadow: 0 0 0 4px rgba(255, 51, 64, .4); } 100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; } }

/* =====================================================================
   TABLA DE DATOS ORDENABLE
   <div class="tbl-wrap"><table class="tbl"><thead><tr><th aria-sort><button data-k>…</button></th>…
   ===================================================================== */
.tbl-wrap { background: var(--ink-2); border: 3px solid var(--mint); box-shadow: 10px 10px 0 var(--green-deep); overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { padding: 0; text-align: left; background: var(--ink); border-bottom: 3px solid var(--mint); }
.tbl th > button, .tbl th > span {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 15px 18px 14px;
  font: 800 12px/1 var(--f-num); letter-spacing: .28em; text-transform: uppercase; white-space: nowrap;
  color: var(--mint-2); background: none; border: 0;
}
.tbl th > button { cursor: pointer; }
.tbl th.r > button, .tbl th.r > span { justify-content: flex-end; }
.tbl th > button::after { content: '\2195'; font-size: 13px; letter-spacing: 0; opacity: .5; }
.tbl th > button[data-dir="asc"]::after { content: '\25B2'; font-size: 10px; opacity: 1; }
.tbl th > button[data-dir="desc"]::after { content: '\25BC'; font-size: 10px; opacity: 1; }
.tbl th > button:hover, .tbl th > button.is-on { color: var(--green); }
.tbl th > button:focus-visible { outline-offset: -4px; }
.tbl td { padding: 11px 18px; border-bottom: 1px solid var(--ink-3); font: 700 17px/1.2 var(--f-num); color: var(--white); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: rgba(18, 230, 128, .05); }
.tbl .t-rank { width: 70px; font: 900 22px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--green); }
.tbl .t-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .t-pnl { text-align: right; font: 900 21px/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .t-muted { color: var(--mint-3); }
.tbl .sq__name { font-size: 19px; }

/* =====================================================================
   TARJETA DE MONEDA 16:9 con «bandera» generada (PICO.emblem.flag)
   ===================================================================== */
.tcard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 16 / 9;
  padding: 18px 20px 16px;
  color: var(--white); text-decoration: none;
  border: 3px solid var(--mint);
  background:
    linear-gradient(180deg, rgba(7, 18, 12, .05) 0%, rgba(7, 18, 12, .32) 42%, rgba(7, 18, 12, .92) 100%),
    linear-gradient(90deg, rgba(7, 18, 12, .62), rgba(7, 18, 12, .04) 72%),
    radial-gradient(circle at 86% 10%, rgba(255, 255, 255, .22), transparent 34%),
    var(--flag, var(--purple));
  transition: translate .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1), border-color .15s;
}
a.tcard:hover { translate: -4px -4px; border-color: var(--green); box-shadow: 8px 8px 0 var(--green); }
a.tcard:hover .emb { scale: 1.08; }
.tcard .emb { transition: scale .15s; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)); }
.tcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tcard__id { min-width: 0; }
.tcard__name {
  margin: 0 0 10px;
  font: 900 calc(clamp(30px, 2.7vw, 42px) * var(--ds)) / .86 var(--f-display);
  text-transform: uppercase; letter-spacing: .01em;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .75));
  overflow-wrap: anywhere;
}
.tcard__pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* [Revisión-legal] etiquetas diminutas de la tarjeta en --mint (no --mint-2): sobre las banderas claras bajaban de 4,5:1 */
.tcard__bot .lbl { display: block; font: 800 11px/1 var(--f-num); letter-spacing: .3em; text-transform: uppercase; color: var(--mint); }
.tcard__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 5px 0 12px; }
.tcard__price b { font: 900 clamp(36px, 3.4vw, 52px) / 1 var(--f-num); font-variant-numeric: tabular-nums; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .75)); }
.chg { font: 800 22px/1 var(--f-num); font-variant-numeric: tabular-nums; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .8)); }
.chg.up { color: var(--green); }
.chg.dn { color: var(--red-2); }
.tcard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.tcard__stats div:nth-child(2) { text-align: center; }
.tcard__stats div:last-child { text-align: right; }
.tcard__stats dt { font: 800 10.5px/1 var(--f-num); letter-spacing: .26em; text-transform: uppercase; color: var(--mint); }
.tcard__stats dd { margin: 5px 0 0; font: 800 18px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--white); }

/* =====================================================================
   PIE (partial footer.html)
   ===================================================================== */
.ftr { background: var(--ink); border-top: 4px solid var(--green); padding: 42px 0 110px; }
.ftr__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 26px; }
.ftr__word { display: inline-block; font: 900 calc(46px * var(--ds)) / 1 var(--f-display); color: var(--green); transform: skew(-7deg); }
.ftr__tag { display: block; margin-top: 8px; font: 800 12px/1 var(--f-num); letter-spacing: .3em; text-transform: uppercase; color: var(--mint-2); }
.ftr__nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ftr__nav a { font: 800 13px/2 var(--f-num); letter-spacing: .22em; text-transform: uppercase; color: var(--mint); text-decoration: none; }
.ftr__nav a:hover { color: var(--green); }
.ftr__soc { display: flex; gap: 6px; }
.ftr .soc { color: var(--green); }
.ftr__stamp { margin-bottom: 14px; font: 800 13px/1.55 var(--f-num); letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.ftr__disc { max-width: 1000px; font: 500 13.5px/1.7 var(--f-body); color: var(--mint-2); }
.ftr__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; font: 500 13px/1.6 var(--f-body); color: var(--mint-3); }
.ftr__meta button, .ftr__meta a { padding: 0; font: inherit; color: var(--yellow); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* =====================================================================
   PÁGINA EN OBRAS (<main> vacío de las páginas interiores, hasta que su constructor lo rellene)
   ===================================================================== */
.shell { padding: 80px 0 90px; }
.shell__box {
  display: grid; gap: 16px; justify-items: start;
  padding: 34px 32px 30px;
  background: var(--ink-2); border: 3px dashed var(--mint-3); box-shadow: 10px 10px 0 var(--purple);
}
.shell__box .h2 { font-size: calc(clamp(34px, 4vw, 56px) * var(--ds)); }

/* =====================================================================
   SIN MOVIMIENTO (botón #mov). ÚNICA forma de parar las animaciones.
   ===================================================================== */
html.sin-movimiento *, html.sin-movimiento *::before, html.sin-movimiento *::after {
  animation: none !important;
  transition: none !important;
}

/* =====================================================================
   RESPONSIVE (componentes comunes)
   ===================================================================== */
@media (max-width: 1279px) {
  .lb__head, .lbr { grid-template-columns: 54px 58px minmax(0, 1fr) 80px 214px 220px; column-gap: 12px; }
  .lbr .coinchip__mc { display: none; }
}

@media (max-width: 1023px) {
  /* cabecera móvil: barra verde + tab bar de 6 iconos (FEED desde el 29-oct), las dos pegadas arriba */
  .hdr__bar { height: 56px; grid-template-columns: 52px 1fr 42px 42px; padding: 0 6px; background: var(--green); }
  .hdr__brand { grid-column: 2; grid-row: 1; justify-self: center; padding: 0; background: none; clip-path: none; gap: 10px; }
  .hdr__coin { width: 40px; height: 40px; }
  .hdr__coin img { width: 26px; }
  .hdr__word { font-size: calc(30px * var(--ds)); }
  .hdr__nav { display: none; }
  .hdr__right { display: contents; }
  .mov { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; margin-left: 2px; width: 40px; height: 40px; }
  .soc { align-self: center; justify-self: center; }
  .tabbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 58px; background: var(--ink); }
  .tabbar a {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    font: 700 10.5px/1 var(--f-num); letter-spacing: .12em; text-transform: uppercase;
    color: var(--mint); text-decoration: none;
  }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .tabbar a.is-active { background: var(--green); color: var(--ink); }
  .tabbar a.is-active::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 36px; height: 6px; margin-left: -18px; background: var(--ink); }
  .tabbar a:focus-visible { outline-offset: -4px; }
  .tabbar a.is-active:focus-visible { outline-color: var(--ink); }
  .hdr__brand:focus-visible::after { inset: 4px -8px; }

  .lb__head { display: none; }
  .lbr {
    min-height: 0; padding: 12px 14px 12px 20px;
    grid-template-columns: 40px auto minmax(0, 1fr) auto;
    grid-template-areas: "rank squad squad pnl" "rank mem coin mv";
    row-gap: 9px; column-gap: 12px;
  }
  .lbr__rank { grid-area: rank; font-size: 30px; }
  .lbr__squad { grid-area: squad; min-width: 0; }
  .lbr__pnl { grid-area: pnl; }
  .lbr__mem { grid-area: mem; }
  .lbr__mem .members { font-size: 15px; }
  .lbr__coin { grid-area: coin; }
  .lbr__coin .coinchip { font-size: 13px; padding: 5px 8px 4px; gap: 8px; }
  .lbr__mv { grid-area: mv; justify-self: end; }
  .lbr__mv .mv { font-size: 16px; }
  .lbr .pnl__v { font-size: 23px; }
  .lb__zone { padding: 0 14px 0 20px; }

  .phero .collage .p2 { width: 46%; height: 42%; top: auto; bottom: 0; clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
}

@media (max-width: 760px) {
  .phero .collage .p3 { display: none; }
  :root { --gutter: 16px; }
  .collage--gate .g3 { top: auto; bottom: 0; width: 64%; height: 34%; clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%); }
  .collage--gate .g5 { bottom: -5%; width: 96%; }
  .gate__kicker { font-size: 12.5px; letter-spacing: .22em; margin: 20px 0 26px; }
  .sec { padding: 54px 0 50px; }
  .sec__head { margin-bottom: 24px; }
  .h2 { text-shadow: 3px 4px 0 var(--purple); }
  .phero { padding: 40px 0 44px; }
  .phero__sub { font-size: 15.5px; }

  .mega { padding: 18px 18px 16px; gap: 10px; box-shadow: 7px 7px 0 var(--green); }
  .mega--soon, .mega:disabled { box-shadow: 7px 7px 0 var(--ink-3); }
  .ca { flex-direction: column; }
  .ca__txt { padding: 12px 14px 10px; }
  .ca__addr { font-size: 13px; }
  .ca__btn { padding: 13px 16px; border-top: 3px solid var(--mint); }
  .pill { font-size: 12px; letter-spacing: .1em; padding: 8px 10px 7px; }

  .kpi { padding: 14px 12px 12px; gap: 6px; box-shadow: 6px 6px 0 var(--ink); }
  .kpi--ink { box-shadow: 6px 6px 0 var(--purple); }
  .kpi__lbl { font-size: 11px; letter-spacing: .16em; }
  .kpi__val { font-size: 36px; }
  .kpi__val--soon { font-size: 26px; }
  .kpi__sub { font-size: 11.5px; }
  .kpi__fold { border-left-width: 16px; border-top-width: 16px; }

  .crtp { box-shadow: 7px 7px 0 var(--ink); }
  .crtp__bar { padding: 12px 14px; gap: 9px; }
  .crtp__brand, .crtp__meta { font-size: 12px; letter-spacing: .18em; }
  .crtp__foot { padding: 8px 10px; }

  .lb { box-shadow: 7px 7px 0 var(--purple); }
  .lbr { grid-template-columns: 30px auto minmax(0, 1fr) auto; padding: 11px 10px 11px 16px; column-gap: 10px; }
  .lbr__rank { font-size: 26px; }
  .lbr .sq { gap: 10px; }
  .lbr .emb { --es: 34px; }
  .lbr .sq__name { font-size: 20px; }
  .lbr .pnl__v { font-size: 20px; }
  .lbr .pnl__split { font-size: 11px; gap: 2px 7px; }
  .lbr .pnl__split .l { display: none; }
  .lbr .pnl__split .s { display: inline; }
  .lbr .zbadge { font-size: 10px; letter-spacing: .16em; }
  .lb__zone { font-size: 10.5px; letter-spacing: .2em; height: 30px; padding: 0 10px 0 16px; }
  .lb__zone em { letter-spacing: .1em; }

  .tbl-wrap { box-shadow: 7px 7px 0 var(--green-deep); }
  .tbl th > button, .tbl th > span { padding: 13px 10px 12px; letter-spacing: .16em; font-size: 11px; }
  .tbl td { padding: 10px; font-size: 15px; }
  .tbl .t-rank { width: 34px; font-size: 18px; }
  .tbl .t-pnl { font-size: 17px; }
  .tbl .sq__name { font-size: 16px; white-space: normal; overflow-wrap: anywhere; }

  .tcard { aspect-ratio: auto; min-height: 236px; padding: 16px 14px 14px; gap: 16px; }
  .tcard .emb--xl { --es: 58px; }
  .tcard__price b { font-size: 36px; }
  .chg { font-size: 19px; }
  .tcard__stats dd { font-size: 16px; }
  .tcard__stats dt { font-size: 9.5px; letter-spacing: .2em; }

  .ftr { padding: 36px 0 120px; }
  .ftr__word { font-size: calc(38px * var(--ds)); }
  .ribbon { left: -52px; bottom: 20px; width: 170px; font-size: 11.5px; padding: 5px 0 4px; }
  .shell { padding: 50px 0 60px; }
  .shell__box { padding: 24px 18px 22px; box-shadow: 7px 7px 0 var(--purple); }
}

/* tab bar de 6 (29-oct): «TOURNAMENT» no cabía por debajo de ~380 px con el espaciado de siempre */
@media (max-width: 420px) {
  .tabbar a { letter-spacing: .05em; }
}

@media (max-width: 380px) {
  .kpi__val { font-size: 31px; }
  .lbr .sq__name { font-size: 18px; }
}

@media (max-width: 340px) {
  .tabbar a { font-size: 9.5px; letter-spacing: .03em; }
}