/* ════════════════════════════════════════════════════════════════════
   LA PIEL DE UNDER LEGENDS.

   Los colores NO se eligieron a ojo: salen de contar los píxeles del
   logo de la marca. Teal #29B298 (27 %), magenta #E41373 (26 %), negro
   #030304 (42 %) y el blanco #F6F6F6 de la píldora. Las dos sombras
   —#0D3A31 y #470C25— son las que la propia portada usa detrás del
   wordmark.

   ⚠️ «FUTURISTA PERO TRADICIONAL» SE RESUELVE CON GEOMETRIA Y LUZ, NO
   CON EFECTOS SOBRE EL CONTENIDO. Lo tradicional es la tipografía:
   negra, mayúscula, maciza, sin degradés dentro de las letras. Lo
   futurista es el corte —los paneles tienen la esquina biselada— y la
   **aurora**, que vive detrás de todo y nunca encima: el glow ilumina
   la página, no tiñe la tarjeta. Sobre las tarjetas no va ningún
   filtro, porque cada una ya trae su propio color de rango.

   ⚠️ NO HAY COLORES DE RANGO NI DE SERVIDOR ACA, y es a propósito. Los
   ocho del rango viven en `comun/rangos.py` y los nueve del servidor en
   `datos/colores_sv_marca.json`; los dos viajan en el payload y se
   aplican en línea. Escribirlos acá sería el sexto lugar donde vive el
   rango — los cinco están contados en `CLAUDE.md` y dos ya se
   desincronizaron.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --ng:#030304; --pan:#0A0A0D;
  --tl:#29B298; --mg:#E41373;
  --tls:#0D3A31; --mgs:#470C25;
  --bl:#F6F6F6; --tx:#EDEDF2; --tx2:#7E8B89; --tx3:#4A5654;
  --bd:#1A2523; --bd2:#121A19;
  --oro:#FFD24A; --pla:#D8DEE8; --bro:#C98A4B;
  --max:1120px;
  --bisel:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:74px}
body{background:var(--ng);color:var(--tx);overflow-x:hidden;
font:16px/1.55 Archivo,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
code{font:600 .88em/1 ui-monospace,SFMono-Regular,Menlo,monospace;
background:#101A18;border:1px solid var(--bd);border-radius:3px;
padding:2px 6px;color:var(--tl)}

/* ── el fondo ───────────────────────────────────────────────────────
   La aurora es un solo elemento con tres radiales enormes y
   desenfocadas. Va DETRAS de la trama y de todo el contenido: es luz de
   sala, no un filtro. */
.aurora{position:fixed;inset:-30vh -20vw;z-index:0;pointer-events:none;
background:
  radial-gradient(38vw 38vw at 18% 12%,rgba(41,178,152,.30),transparent 68%),
  radial-gradient(42vw 42vw at 84% 6%,rgba(228,19,115,.30),transparent 66%),
  radial-gradient(52vw 34vw at 50% 92%,rgba(41,178,152,.14),transparent 70%);
filter:blur(46px);contain:strict}

/* La trama es TEXTO, no una imagen: «UNDER LEGENDS» repetido, una fila
   sólida y la siguiente contorneada, como la portada de la marca. No
   pesa un byte de red y escala con el ancho. */
.trama{position:fixed;inset:-6vh -16vw;z-index:1;pointer-events:none;
display:flex;flex-direction:column;justify-content:space-between;
font:900 clamp(34px,6.6vw,74px)/1.02 Archivo,sans-serif;
letter-spacing:-.025em;white-space:nowrap;user-select:none;contain:strict}
.trama i{display:block;font-style:normal}
.trama i:nth-child(4n+1){color:var(--mg);opacity:.13}
.trama i:nth-child(4n+2){color:transparent;-webkit-text-stroke:1.5px var(--tl);opacity:.24}
.trama i:nth-child(4n+3){color:var(--tl);opacity:.10}
.trama i:nth-child(4n+4){color:transparent;-webkit-text-stroke:1.5px var(--mg);opacity:.20}
.velo{position:fixed;inset:0;z-index:2;pointer-events:none;
background:radial-gradient(140% 58% at 50% 4%,rgba(3,3,4,.20),rgba(3,3,4,.88) 56%,#030304 92%)}

/* ── el armazon del dashboard ───────────────────────────────────────
   🔴 UN SOLO MENU PARA LAS DOS FORMAS. En escritorio es una columna fija
   a la izquierda; en teléfono, la barra de abajo. Es el MISMO elemento
   con otro `display`: dos barras con los mismos enlaces se desincronizan
   la primera vez que se agrega una vista, y ese es exactamente el error
   que este repo documenta cinco veces con el rango.

   ⚠️ Y LAS VISTAS SE MUESTRAN CON `hidden`, no con `display:none` en
   CSS. Así el estado vive en el DOM —`document.querySelector('[hidden]')`
   lo dice— y no en una clase que hay que mantener en dos lugares. */
.app{position:relative;z-index:3;display:grid;
grid-template-columns:232px minmax(0,1fr);max-width:1400px;margin:0 auto}

.menu{position:sticky;top:0;align-self:start;height:100dvh;
display:flex;flex-direction:column;padding:22px 14px 18px;
border-right:1px solid var(--bd2)}
.menu .marca{display:flex;align-items:center;gap:11px;padding:0 8px 20px;
text-decoration:none;color:inherit}
.menu .marca img{border-radius:4px;flex:0 0 auto;
box-shadow:0 0 0 2px var(--ng),0 0 0 3px rgba(41,178,152,.45)}
.menu .marca b{display:block;font:900 .96rem/1.1 Archivo,sans-serif;
letter-spacing:-.02em}
.menu .marca small{display:block;color:var(--tx2);margin-top:2px;
font:600 .58rem/1 'Barlow Condensed',sans-serif;letter-spacing:.18em;
text-transform:uppercase}
.menu nav{display:flex;flex-direction:column;gap:2px}
.menu nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;
text-decoration:none;color:var(--tx2);border-left:2px solid transparent;
font:800 .76rem/1 Archivo,sans-serif;letter-spacing:.06em;
transition:color .14s,background .14s,border-color .14s}
.menu nav a i{font-style:normal;font-size:.9rem;width:1.1em;text-align:center;
opacity:.75}
.menu nav a:hover{color:var(--tx);background:rgba(41,178,152,.06)}
.menu nav a.on{color:var(--tl);border-left-color:var(--tl);
background:rgba(41,178,152,.09)}
.menu .pie{margin-top:auto;padding:14px 12px 0;color:var(--tx3);
font:600 .58rem/1.7 'Barlow Condensed',sans-serif;letter-spacing:.13em;
text-transform:uppercase;border-top:1px solid var(--bd2)}

main{min-width:0;padding:26px 26px 60px}
.vista[hidden]{display:none}
.tit{font:900 clamp(30px,5vw,46px)/.95 Archivo,sans-serif;
letter-spacing:-.035em;text-transform:uppercase;margin-bottom:8px}
.tit em{font-style:normal;color:var(--mg);
text-shadow:3px 3px 0 var(--tls)}

/* ── cabecera ───────────────────────────────────────────────────── */
.hero{position:relative;display:grid;gap:34px;align-items:center;
grid-template-columns:minmax(0,1fr) auto;padding:6px 0 4px}
/* ⚠️ EL LOGO VA CON LA PILDORA, NO SUELTO. En la primera versión de
   esta cabecera la marca desapareció del todo: el título quedó solo y
   la página de Under Legends no mostraba el logo de Under Legends. */
.marca{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ul{width:64px;height:64px;flex:0 0 auto;border-radius:4px;
box-shadow:0 0 0 2px var(--ng),0 0 0 3px rgba(41,178,152,.5),
0 8px 24px rgba(0,0,0,.7)}
.era{display:inline-flex;align-items:center;gap:7px;background:var(--bl);
color:var(--tl);border-radius:999px;padding:4px 14px 4px 11px;
font:800 .66rem/1 Archivo,sans-serif;
letter-spacing:.18em;text-transform:uppercase}
.era b{font-weight:900;font-size:.9rem;letter-spacing:.04em}
h1{font:900 clamp(40px,8.2vw,84px)/.88 Archivo,sans-serif;
letter-spacing:-.04em;text-transform:uppercase}
h1 em{font-style:normal;color:var(--mg);
text-shadow:5px 5px 0 var(--tls),-1px -1px 0 rgba(41,178,152,.8)}
.lema{color:var(--tx2);margin-top:14px;font-size:.98rem;max-width:44ch}
.lema b{color:var(--tl);font-weight:700}

.cifras{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.cifras div{background:linear-gradient(180deg,rgba(14,14,18,.86),rgba(7,7,9,.86));
border:1px solid var(--bd);padding:9px 16px;min-width:94px;
clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
.cifras b{display:block;font:900 1.5rem/1.1 Archivo,sans-serif;
font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cifras span{display:block;color:var(--tx2);margin-top:3px;
font:600 .6rem/1 'Barlow Condensed',sans-serif;letter-spacing:.18em;
text-transform:uppercase}

/* La tarjeta del campeón. El anillo de luz va DETRAS, con `filter:blur`
   sobre un pseudo-elemento: encima teñiría la tarjeta, que ya trae su
   color de rango. */
.hero-carta{position:relative;text-align:center}
.corona{display:block;margin-bottom:11px;color:var(--oro);
font:800 .62rem/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.hc-marco{position:relative;display:block;padding:0;line-height:0}
.hc-marco::before{content:'';position:absolute;inset:-14px;z-index:-1;
background:radial-gradient(60% 50% at 50% 42%,rgba(228,19,115,.55),transparent 72%),
radial-gradient(64% 58% at 50% 62%,rgba(41,178,152,.42),transparent 74%);
filter:blur(26px)}
.hc-marco img{width:268px;height:auto;transition:transform .3s ease}
.hc-marco:hover img{transform:translateY(-6px) scale(1.02)}
.hero-carta b{display:block;margin-top:12px;
font:900 1.18rem/1 Archivo,sans-serif;letter-spacing:-.02em}

/* ── lo que viene ───────────────────────────────────────────────── */
.viene{background:linear-gradient(180deg,rgba(16,10,18,.9),rgba(8,6,9,.9))}
.viene::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--mg),var(--tl))}
.ev{display:flex;justify-content:space-between;gap:16px;align-items:center;
padding:12px 0;border-top:1px solid var(--bd)}
.ev:first-of-type{border-top:0;padding-top:3px}
.ev>div{min-width:0;flex:1 1 auto}
.ev b{display:block;font:800 1.05rem/1.2 Archivo,sans-serif;letter-spacing:-.015em}
.ev small{display:block;color:var(--tx2);margin-top:4px;
font:600 .68rem/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;
text-transform:uppercase}
.reloj{flex:0 0 auto;font:900 1.56rem/1 Archivo,sans-serif;color:var(--tl);
white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.reloj.vivo{color:var(--mg);font-size:.92rem;letter-spacing:.14em;
display:inline-flex;align-items:center;gap:8px}
.reloj.vivo::before{content:'';width:10px;height:10px;border-radius:50%;
background:var(--mg);animation:lat 1.1s ease-in-out infinite}
@keyframes lat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}

/* ── paneles ────────────────────────────────────────────────────── */
.blk{position:relative;margin-top:32px;padding:20px 20px 18px;
background:linear-gradient(180deg,rgba(13,13,17,.88),rgba(7,7,9,.9));
border:1px solid var(--bd);clip-path:var(--bisel);
opacity:0;transform:translateY(18px);
transition:opacity .5s ease,transform .5s ease}
.blk.entro{opacity:1;transform:none}
.blk::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--tl),var(--mg))}
.blk h2,.viene h2{font:900 .76rem/1 Archivo,sans-serif;letter-spacing:.22em;
text-transform:uppercase;color:var(--tx2);margin-bottom:13px}
.blk h2 span,.viene h2 span{color:var(--tl)}
.bajada{color:var(--tx2);font-size:.9rem;margin:-4px 0 18px;max-width:64ch}
.bajada b{color:var(--tx)}
.nota{color:var(--tx3);margin-top:12px;
font:600 .64rem/1.5 'Barlow Condensed',sans-serif;letter-spacing:.14em;
text-transform:uppercase}

/* ── podio ──────────────────────────────────────────────────────── */
.podio{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);align-items:end}
.pd{position:relative;text-align:center;padding:0 4px}
.pd button{display:block;width:100%;line-height:0;position:relative}
.pd img{width:100%;aspect-ratio:300/438;object-fit:contain;transition:transform .25s ease}
.pd button:hover img{transform:translateY(-5px)}
.pd .med{display:block;margin-bottom:9px;font:900 1.9rem/1 Archivo,sans-serif}
.pd b{display:block;margin-top:10px;font:900 1rem/1.2 Archivo,sans-serif;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd small{display:block;color:var(--tx2);margin-top:3px;
font:600 .62rem/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;
text-transform:uppercase}
.pd.p1{order:2}.pd.p2{order:1}.pd.p3{order:3}
.pd.p1 .med{color:var(--oro)}.pd.p2 .med{color:var(--pla)}.pd.p3 .med{color:var(--bro)}
.pd.p2,.pd.p3{padding-bottom:16px}
.pd.p1 button::before{content:'';position:absolute;inset:-10px;z-index:-1;
background:radial-gradient(58% 50% at 50% 50%,rgba(255,210,74,.3),transparent 72%);
filter:blur(20px)}

.records{display:grid;gap:8px;margin-top:22px;
grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
.rec{background:rgba(11,18,17,.8);border:1px solid var(--bd);padding:11px 13px;
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.rec dt{color:var(--tx2);font:600 .58rem/1 'Barlow Condensed',sans-serif;
letter-spacing:.16em;text-transform:uppercase}
.rec dd{margin-top:6px;display:flex;align-items:baseline;gap:8px}
.rec .v{font:900 1.24rem/1 Archivo,sans-serif;color:var(--tl);
font-variant-numeric:tabular-nums}
.rec .q{font:800 .84rem/1.2 Archivo,sans-serif;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}

/* ── filtros y tabla ────────────────────────────────────────────── */
.filtros{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
#buscar,#buscarC{width:100%;background:#0E1614;border:1px solid var(--bd);color:var(--tx);
padding:12px 15px;font:600 .95rem/1 Archivo,sans-serif;border-radius:2px;
outline:none;transition:border-color .15s}
#buscar:focus,#buscarC:focus{border-color:var(--tl)}
#buscar::placeholder,#buscarC::placeholder{color:var(--tx3)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--bd);background:rgba(11,18,17,.8);color:var(--tx2);
padding:5px 11px;border-radius:2px;
font:700 .66rem/1 'Barlow Condensed',sans-serif;letter-spacing:.13em;
text-transform:uppercase;transition:all .15s;white-space:nowrap}
.chip:hover{color:var(--tx);border-color:var(--tx3)}
.chip.on{color:var(--ng);background:var(--tl);border-color:var(--tl)}
.chip .n{opacity:.62;margin-left:5px}

.tabla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th{font:800 .62rem/1 Archivo,sans-serif;letter-spacing:.16em;color:var(--tx2);
text-transform:uppercase;text-align:right;padding:0 9px 10px;white-space:nowrap;
cursor:pointer;user-select:none;transition:color .15s}
th:hover{color:var(--tx)}
th:nth-child(1),th:nth-child(2){text-align:left}
th.asc::after{content:' \2191';color:var(--tl)}
th.desc::after{content:' \2193';color:var(--tl)}
td{padding:10px 9px;border-top:1px solid var(--bd2);text-align:right;
font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
td:nth-child(1){text-align:left;width:48px;color:var(--tx2);
font:900 .92rem/1 Archivo,sans-serif}
td:nth-child(2){text-align:left;font-weight:800;letter-spacing:-.01em;
white-space:normal}
tbody tr{cursor:pointer;transition:background .12s}
tbody tr:hover{background:rgba(41,178,152,.07)}
tbody tr.top1 td{background:rgba(228,19,115,.07)}
tbody tr.top1 td:nth-child(1){color:var(--oro);box-shadow:inset 3px 0 0 var(--mg)}
tbody tr.top2 td:nth-child(1){color:var(--pla);box-shadow:inset 3px 0 0 var(--tl)}
tbody tr.top3 td:nth-child(1){color:var(--bro);box-shadow:inset 3px 0 0 rgba(246,246,246,.5)}
/* ⚠️ LA SIGLA Y EL NOMBRE NO SE SEPARAN. Con `white-space:normal` en la
   celda —que hace falta para que un nombre largo baje de renglón— el
   salto caía JUSTO entre la bandera y el nombre. */
.cc{display:inline;margin-right:8px;font-style:normal;
font:700 .68rem/1 'Barlow Condensed',sans-serif;letter-spacing:.06em;
color:var(--tx2);white-space:nowrap}
.rg{display:inline-block;min-width:34px;padding:2px 8px;border:1px solid var(--bd);
border-radius:2px;background:#0E1614;font:900 .7rem/1.35 Archivo,sans-serif;
text-align:center;color:var(--tx3)}
#tabla.sin-rango .col-rg,#tabla.sin-rango td:nth-child(4){display:none}
.sv{font:700 .7rem/1 'Barlow Condensed',sans-serif;letter-spacing:.12em;color:var(--tx2)}
.ovr{font:900 .98rem/1 Archivo,sans-serif;color:var(--tl)}
.vacio{color:var(--tx2);font-weight:500;text-align:center!important;
padding:26px 9px!important;white-space:normal}

/* La tabla chica del inicio: sin cabecera, sin filtros. Es un resumen
   que lleva al ranking, no un segundo ranking. */
.mini td{padding:11px 9px}
.mini td:nth-child(3){text-align:right;color:var(--tl);
font:900 .96rem/1 Archivo,sans-serif}

/* ── galería ────────────────────────────────────────────────────────
   ⚠️ `loading="lazy"` NO ES UN DETALLE. Cada tarjeta pesa 90–180 KB en
   WebP; cincuenta serían ~6 MB de golpe, y esto se abre desde un
   teléfono con datos. El `aspect-ratio` reserva el hueco para que la
   página no salte cuando cada una llega. */
#buscarC{margin-bottom:16px}
.galeria{display:grid;gap:14px;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.gc{position:relative;background:rgba(10,15,14,.8);border:1px solid var(--bd);
padding:10px 8px 8px;transition:transform .16s,border-color .16s;
clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.gc:hover{transform:translateY(-4px);border-color:var(--tl)}
.gc img{width:100%;aspect-ratio:300/438;object-fit:contain;background:#070A09}
.gc b{display:block;margin-top:8px;font:800 .82rem/1.2 Archivo,sans-serif;
text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc small{display:block;text-align:center;color:var(--tx2);margin-top:2px;
font:600 .6rem/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;
text-transform:uppercase}
.mas{display:block;width:max-content;margin:18px auto 0;
border:1px solid var(--bd);background:rgba(11,18,17,.8);color:var(--tx2);
padding:11px 28px;text-decoration:none;text-align:center;
font:800 .68rem/1 Archivo,sans-serif;letter-spacing:.16em;
text-transform:uppercase;transition:all .15s}
.mas:hover{color:var(--ng);background:var(--tl);border-color:var(--tl)}

/* ── duelos y rachas ────────────────────────────────────────────── */
.duelos{display:grid;gap:7px}
.du{display:grid;grid-template-columns:30px 1fr auto auto;gap:12px;
align-items:center;padding:10px 12px;background:rgba(11,18,17,.72);
border:1px solid var(--bd2);cursor:pointer;transition:border-color .15s}
.du:hover{border-color:var(--tl)}
.du .p{color:var(--tx3);font:900 .9rem/1 Archivo,sans-serif}
.du .nm{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.du .bar{width:84px;height:6px;background:#141E1C;overflow:hidden;border-radius:99px}
.du .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--tl),var(--mg))}
.du .gp{font:900 .9rem/1 Archivo,sans-serif;font-variant-numeric:tabular-nums;
white-space:nowrap}
.du .gp s{text-decoration:none;color:var(--tx3);font-weight:600}
.rachas{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.ra{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
background:rgba(11,18,17,.72);border:1px solid var(--bd2);
font:700 .78rem/1 Archivo,sans-serif}
.ra u{text-decoration:none;color:var(--mg);font-weight:900}

/* ── servidores, países, crews ──────────────────────────────────── */
.svs{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.sv-c{position:relative;padding:15px 15px 13px;background:rgba(10,15,14,.82);
border:1px solid var(--bd);overflow:hidden;
clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.sv-c::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--c,#7E8B89)}
.sv-c::after{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 90% at 0% 0%,var(--c,#7E8B89),transparent 62%);opacity:.18}
.sv-c h3{font:900 1.16rem/1 Archivo,sans-serif;letter-spacing:-.01em;
margin-bottom:10px;position:relative}
.sv-c dl{display:flex;gap:18px;position:relative}
.sv-c dt{color:var(--tx2);font:600 .58rem/1 'Barlow Condensed',sans-serif;
letter-spacing:.16em;text-transform:uppercase}
.sv-c dd{font:900 1rem/1.3 Archivo,sans-serif;font-variant-numeric:tabular-nums}

.paises{display:grid;gap:7px}
.pa{display:grid;grid-template-columns:30px 2.2em 1fr auto auto;gap:12px;
align-items:center;padding:10px 12px;background:rgba(11,18,17,.72);
border:1px solid var(--bd2)}
.pa .p{color:var(--tx3);font:900 .9rem/1 Archivo,sans-serif}
.pa .fl{font-size:1.15rem;line-height:1}
.pa .nm{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa .n{color:var(--tx2);font:600 .66rem/1 'Barlow Condensed',sans-serif;
letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.pa .pt{font:900 .92rem/1 Archivo,sans-serif;font-variant-numeric:tabular-nums;
color:var(--tl)}
.crews{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cw{padding:10px 14px;background:rgba(11,18,17,.72);border:1px solid var(--bd2)}
.cw b{display:block;font:900 .92rem/1 Archivo,sans-serif}
.cw small{display:block;color:var(--tx2);margin-top:4px;
font:600 .6rem/1 'Barlow Condensed',sans-serif;letter-spacing:.13em;
text-transform:uppercase}

/* ── escalera de rangos ─────────────────────────────────────────── */
.escalera{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.rk{position:relative;padding:14px 12px 12px;background:rgba(10,15,14,.82);
border:1px solid var(--bd);text-align:center;
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.rk::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--c)}
.rk::after{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(90% 60% at 50% 0%,var(--c),transparent 68%);opacity:.12}
.rk b{display:block;font:900 1.6rem/1 Archivo,sans-serif;color:var(--c);
letter-spacing:-.02em;position:relative}
.rk small{display:block;color:var(--tx2);margin-top:5px;position:relative;
font:600 .6rem/1.5 'Barlow Condensed',sans-serif;letter-spacing:.14em;
text-transform:uppercase}
.rk u{display:block;text-decoration:none;color:var(--tx3);margin-top:3px;
font:700 .66rem/1 Archivo,sans-serif;font-variant-numeric:tabular-nums;position:relative}

/* ── cómo conseguir tu tarjeta ──────────────────────────────────── */
.como{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.cm{position:relative;padding:15px 15px 14px;background:rgba(10,15,14,.82);
border:1px solid var(--bd);
clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.cm h3{font:900 1.06rem/1 Archivo,sans-serif;margin-bottom:6px}
.cm p{color:var(--tx2);font-size:.83rem;line-height:1.5}
.cm ul{list-style:none;margin-top:11px;display:flex;flex-wrap:wrap;gap:5px}
.cm li{padding:4px 10px;background:#0E1614;border:1px solid var(--bd);
color:var(--tl);font:700 .66rem/1.4 'Barlow Condensed',sans-serif;
letter-spacing:.11em;text-transform:uppercase}
.cm li.nada{color:var(--tx3)}

/* ── visor ──────────────────────────────────────────────────────── */
.visor{position:fixed;inset:0;z-index:70;display:flex;align-items:center;
justify-content:center;padding:18px}
.visor[hidden]{display:none}
.visor-fondo{position:absolute;inset:0;background:rgba(3,3,4,.88);
backdrop-filter:blur(7px)}
.visor-caja{position:relative;z-index:1;width:100%;max-width:440px;
max-height:calc(100dvh - 36px);overflow-y:auto;padding:16px 16px 18px;
background:linear-gradient(180deg,#0D0D12,#070709);border:1px solid var(--bd);
clip-path:var(--bisel);animation:sube .18s ease-out}
@keyframes sube{from{opacity:0;transform:translateY(14px)}}
.cerrar{position:absolute;top:8px;right:12px;z-index:3;font-size:1.8rem;
line-height:1;color:var(--tx2);padding:4px 8px;transition:color .15s}
.cerrar:hover{color:var(--mg)}
.visor-cab{display:flex;align-items:center;gap:12px;margin-bottom:13px;padding-right:30px}
.v-pos{flex:0 0 auto;font:900 1.7rem/1 Archivo,sans-serif;color:var(--tl);
font-variant-numeric:tabular-nums}
.visor-cab h3{font:900 1.26rem/1.1 Archivo,sans-serif;letter-spacing:-.02em}
.visor-cab p{color:var(--tx2);margin-top:3px;
font:600 .64rem/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;
text-transform:uppercase}
.pestanas{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.pest{border:1px solid var(--bd);background:#0B1211;color:var(--tx2);
padding:6px 11px;font:700 .64rem/1 'Barlow Condensed',sans-serif;
letter-spacing:.13em;text-transform:uppercase;transition:all .15s}
.pest.on{color:var(--ng);background:var(--tl);border-color:var(--tl)}
.v-carta{min-height:180px;display:flex;justify-content:center;align-items:center}
.v-carta img{max-height:62dvh;width:auto;max-width:100%}
.v-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px}
.v-stats div{background:#0B1211;border:1px solid var(--bd);padding:9px 4px;text-align:center}
.v-stats b{display:block;font:900 1.06rem/1.1 Archivo,sans-serif;
font-variant-numeric:tabular-nums}
.v-stats span{display:block;color:var(--tx2);margin-top:3px;
font:600 .54rem/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;
text-transform:uppercase}
.sin-carta{color:var(--tx2);font-size:.88rem;text-align:center;padding:30px 10px}

/* ── teléfono ─────────────────────────────────────────────────────
   🔴 EL MENU PASA A LA BARRA DE ABAJO, que es donde el pulgar llega. Una
   columna lateral en un teléfono se come un tercio del ancho para que
   nadie la use. */
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .menu{position:fixed;bottom:0;left:0;right:0;top:auto;z-index:50;
  height:auto;flex-direction:row;align-items:center;padding:0;
  border-right:0;border-top:1px solid var(--bd);
  background:rgba(3,3,4,.94);backdrop-filter:blur(14px)}
  .menu .marca,.menu .pie{display:none}
  .menu nav{flex-direction:row;width:100%;gap:0}
  .menu nav a{flex:1 1 0;flex-direction:column;gap:4px;min-width:0;
  padding:9px 2px calc(9px + env(safe-area-inset-bottom));
  border-left:0;border-top:2px solid transparent;text-align:center;
  font-size:.56rem;letter-spacing:.08em;text-transform:uppercase}
  .menu nav a i{font-size:1.05rem;opacity:.9}
  .menu nav a.on{border-left-color:transparent;border-top-color:var(--tl);
  background:rgba(41,178,152,.08)}
  main{padding:20px 16px calc(84px + env(safe-area-inset-bottom))}
}
@media(max-width:860px){
  /* 🔴 LA TARJETA DEL CAMPEON BAJA, NO SE ACHICA. Al lado del título en
     una pantalla angosta las dos piezas quedan chicas y ninguna manda. */
  .hero{grid-template-columns:1fr;gap:26px;padding:4px 0 2px;
  text-align:center;justify-items:center}
  .marca{justify-content:center}
  .ul{width:54px;height:54px}
  .lema{margin-left:auto;margin-right:auto}
  .cifras{justify-content:center}
  .hc-marco img{width:min(74vw,268px)}
}
@media(max-width:620px){
  h1{font-size:clamp(38px,11vw,60px)}
  .blk{padding:17px 15px 15px;margin-top:22px}
  .cifras div{min-width:0;flex:1 1 calc(50% - 5px);padding:8px 12px}
  .col-sv,td:nth-child(5){display:none}
  .galeria{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .podio{gap:8px}
  .pd .med{font-size:1.4rem}
  .pd b{font-size:.8rem}
  .pd small{font-size:.54rem}
  .reloj{font-size:1.18rem}
  .du{grid-template-columns:26px 1fr auto;gap:9px;padding:9px 10px}
  .du .bar{display:none}
  .pa{grid-template-columns:26px 1.8em 1fr auto;gap:9px;padding:9px 10px}
  .pa .n{display:none}
  .visor{padding:10px}
  .visor-caja{padding:14px 12px 16px}
}
@media(max-width:400px){
  .escalera{grid-template-columns:repeat(4,1fr)}
  .rk b{font-size:1.2rem}
  .rk small,.rk u{font-size:.55rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reloj.vivo::before,.visor-caja{animation:none}
  .blk{opacity:1;transform:none;transition:none}
  .gc:hover,.pd button:hover img,.hc-marco:hover img{transform:none}
}