/* =========================================================================
   BO, PASALA — IDENTIDAD VISUAL 2026 ("Noche de cancha")
   Azul profundo + amarillo del logo, vidrio oscuro, tipografía grande y
   animaciones de entrada suaves. Se aplica sobre todas las pantallas (.m).
   ========================================================================= */
.m { --ink: #020a22; --navy: #062062; --royal: #0d47c9; --gold: #ffd21f; --gold2: #ffb800; --glass: rgba(6, 18, 52, .62); --glass2: rgba(255, 255, 255, .06); --edge: rgba(255, 255, 255, .1);
  --panel: var(--glass); background: var(--ink); }
.m-art { filter: saturate(1.05) brightness(.62); transform: scale(1.04); animation: bpArt 22s ease-in-out infinite alternate; }
@keyframes bpArt { to { transform: scale(1.1) translate(-1%, -1%); } }
.m-shade { background:
    linear-gradient(180deg, rgba(2, 10, 34, .82) 0%, rgba(2, 10, 34, .35) 22%, rgba(2, 10, 34, .3) 62%, rgba(2, 10, 34, .9) 100%),
    radial-gradient(90% 70% at 18% 0%, rgba(13, 71, 201, .35), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 2px, transparent 2px 22px); }
html.desk .m { border-radius: calc(1.6 * var(--u)); box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 210, 31, .08); }
html.desk .screen.mob { background: radial-gradient(80% 90% at 50% 35%, #0b2a7a, #010616 70%); }

/* ---------- encabezado ---------- */
.m-top { animation: bpTop .45s cubic-bezier(.2, .8, .2, 1) both; }
.m-top::after { height: 1px; background: linear-gradient(90deg, var(--gold) 0, rgba(255, 210, 31, .5) 18%, rgba(255, 255, 255, .12) 40%, transparent 100%); opacity: 1; }
.m-back { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; clip-path: none; background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge); font-size: calc(5 * var(--u)); transition: background .18s, transform .18s; }
.m-back:hover { background: var(--gold); color: var(--ink); transform: translateX(calc(-.3 * var(--u))); }
.m-badge { height: calc(9.4 * var(--u)); width: calc(9.4 * var(--u)); border-radius: calc(2 * var(--u)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 calc(.8 * var(--u)) calc(2.4 * var(--u)) rgba(0, 0, 0, .45); background: #fff; }
.m-ttl small { color: rgba(255, 255, 255, .62); font-weight: 700; letter-spacing: .2em; font-size: calc(2.1 * var(--u)); }
.m-ttl small::before { content: ""; display: inline-block; width: calc(1 * var(--u)); height: calc(1 * var(--u)); border-radius: 50%; background: var(--a1, var(--gold)); margin-right: calc(.8 * var(--u)); vertical-align: middle; box-shadow: 0 0 calc(1 * var(--u)) var(--a1, var(--gold)); }
.m-ttl h1 { font-size: calc(6.8 * var(--u)); letter-spacing: .03em; text-shadow: 0 calc(.4 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .5); }
@keyframes bpTop { from { opacity: 0; transform: translateY(calc(-1.4 * var(--u))); } }

/* ---------- entrada de contenido ---------- */
.m-body > * { animation: bpIn .42s cubic-bezier(.2, .8, .2, 1) both; }
.m-body > *:nth-child(2) { animation-delay: .05s; } .m-body > *:nth-child(3) { animation-delay: .1s; }
.m-foot { animation: bpIn .42s .08s cubic-bezier(.2, .8, .2, 1) both; border-top: 1px solid var(--edge); }
@keyframes bpIn { from { opacity: 0; transform: translateY(calc(1.6 * var(--u))); } }

/* ---------- botones ---------- */
.mb { clip-path: none; border-radius: 999px; height: calc(7 * var(--u)); padding: 0 calc(3 * var(--u)); background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge); font-weight: 700; letter-spacing: .08em; transition: transform .15s, background .18s, box-shadow .18s; }
.mb:hover:not(:disabled) { background: rgba(255, 255, 255, .12); filter: none !important; }
.mb.red { background: var(--a1, var(--gold)); color: var(--on1, var(--ink)); box-shadow: 0 calc(.6 * var(--u)) calc(2.4 * var(--u)) color-mix(in srgb, var(--a1, var(--gold)) 45%, transparent); }
.mb.red:hover:not(:disabled) { background: color-mix(in srgb, var(--a1, var(--gold)) 85%, #fff); transform: translateY(calc(-.2 * var(--u))); }
.mb.blue { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a1, var(--gold)) 70%, transparent); }
.mb.big { height: calc(8.2 * var(--u)); padding: 0 calc(4.4 * var(--u)); }
.mb.sm { height: calc(5.6 * var(--u)); }
.mb.warn { background: rgba(200, 30, 50, .25); box-shadow: inset 0 0 0 1px rgba(255, 80, 100, .6); }

/* ---------- tarjetas y paneles: vidrio oscuro con borde fino ---------- */
.wcard, .mt2, .mc2, .vs-col, .set-c, .hb-card, .hb-side, .pk-col, .pk-side, .pk-card, .pc-me, .pc-next, .pc-tile, .pc-news, .pc-side, .pc-roster, .pc-wbody, .pc-prev, .fb-c, .fb-n, .pc-offer, .pc-life > section, .pc-cal2 > section, .lc-col, .pc-pre-mid {
  border-radius: calc(1.8 * var(--u)) !important; background-color: var(--glass) !important; box-shadow: inset 0 0 0 1px var(--edge), 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .28) !important; backdrop-filter: blur(6px); }
.wcard, .mt2, .mc2, .pc-tile, .fb-c, .fb-n, .pc-club, .st-team, .eq-p { transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.wcard:hover, .mt2:hover, .mc2:hover, .pc-tile:hover, .fb-c:hover, .fb-n:hover { transform: translateY(calc(-.5 * var(--u))); box-shadow: inset 0 0 0 1px var(--a1, var(--gold)), 0 calc(1.6 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .4) !important; }
.mt2-go { background: var(--gold); color: var(--ink); }
.mnav button { border-radius: calc(1.4 * var(--u)); }
.m-lbl { color: var(--gold); letter-spacing: .18em; }
.m-sel { color: rgba(255, 255, 255, .78); }
.pk-scroll::-webkit-scrollbar, .st-panel::-webkit-scrollbar { width: calc(.8 * var(--u)); }
.pk-scroll::-webkit-scrollbar-thumb, .st-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 99px; }
.modal { backdrop-filter: blur(4px); }

/* =========================================================================
   MENÚ PRINCIPAL
   ========================================================================= */
.m.m-home2 { background: radial-gradient(120% 90% at 75% 40%, #0c3aa8 0%, #05205f 38%, #020a22 75%); }
.m-home2 .m-art { opacity: .18; filter: saturate(.6) brightness(.5); }
.m-home2 .m-body { padding: 0; }
.hx { position: relative; height: 100%; display: grid; grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr); grid-template-rows: calc(14 * var(--u)) minmax(0, 1fr) calc(10 * var(--u)); column-gap: calc(3 * var(--u)); animation: none !important; }
.hx-glow { position: absolute; inset: -10%; z-index: -1; pointer-events: none; background: radial-gradient(30% 40% at 72% 45%, rgba(255, 210, 31, .14), transparent 70%), radial-gradient(35% 45% at 20% 70%, rgba(13, 71, 201, .4), transparent 70%); animation: hxGlow 14s ease-in-out infinite alternate; }
@keyframes hxGlow { to { transform: translate(-3%, 2%) scale(1.06); } }
.hx-lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: radial-gradient(circle at 78% 112%, transparent 0 calc(30 * var(--u)), rgba(255, 255, 255, .06) calc(30 * var(--u)) calc(30.3 * var(--u)), transparent calc(30.3 * var(--u))), linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .04) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.hx-top { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(2 * var(--u)); animation: bpTop .5s cubic-bezier(.2, .8, .2, 1) both; }
.hx-mark { width: calc(10.5 * var(--u)); height: calc(10.5 * var(--u)); border-radius: calc(2.4 * var(--u)); box-shadow: 0 0 0 calc(.3 * var(--u)) var(--gold), 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .5); object-fit: cover; }
.hx-word { display: flex; flex-direction: column; }
.hx-word b { font-family: var(--disp); font-weight: 400; font-size: calc(6.6 * var(--u)); line-height: .9; letter-spacing: .02em; }
.hx-word em { font-style: normal; color: var(--gold); }
.hx-word small { font-size: calc(2 * var(--u)); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .55); font-weight: 700; }
.hx-icons { margin-left: auto; display: flex; gap: calc(1.2 * var(--u)); }
.hx-ic { position: relative; display: flex; align-items: center; gap: calc(.8 * var(--u)); height: calc(6.4 * var(--u)); padding: 0 calc(2 * var(--u)); border: 0; border-radius: 999px; background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge); color: #fff; font-weight: 700; font-size: calc(2.2 * var(--u)); letter-spacing: .06em; text-transform: uppercase; transition: background .18s, color .18s; }
.hx-ic svg { width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); }
.hx-ic:hover { background: var(--gold); color: var(--ink); }
.hx-menu { grid-row: 2; display: flex; flex-direction: column; justify-content: center; gap: calc(1 * var(--u)); }
.hx-it { position: relative; display: flex; align-items: center; gap: calc(2 * var(--u)); text-align: left; border: 0; background: transparent; color: rgba(255, 255, 255, .6); padding: calc(1.4 * var(--u)) calc(2 * var(--u)); border-radius: calc(1.6 * var(--u)); transition: all .28s cubic-bezier(.2, .8, .2, 1); animation: hxItem .5s cubic-bezier(.2, .8, .2, 1) both; }
.hx-it:nth-child(2) { animation-delay: .06s; } .hx-it:nth-child(3) { animation-delay: .12s; } .hx-it:nth-child(4) { animation-delay: .18s; }
@keyframes hxItem { from { opacity: 0; transform: translateX(calc(-3 * var(--u))); } }
.hx-it em { font-style: normal; font-family: var(--disp); font-size: calc(3.4 * var(--u)); color: rgba(255, 210, 31, .45); width: calc(4.4 * var(--u)); }
.hx-it span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hx-it b { font-family: var(--disp); font-weight: 400; font-size: calc(5.4 * var(--u)); line-height: 1; letter-spacing: .03em; transition: font-size .28s, color .28s; }
.hx-it small { font-size: calc(2.1 * var(--u)); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: 0; max-height: 0; transition: opacity .28s, max-height .28s; }
.hx-arr { opacity: 0; width: calc(4.6 * var(--u)); height: calc(4.6 * var(--u)); border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; transition: opacity .2s, transform .28s; transform: translateX(calc(-1 * var(--u))); }
.hx-arr svg { width: 45%; height: 45%; margin-left: 8%; }
.hx-it.on { color: #fff; background: linear-gradient(90deg, rgba(255, 210, 31, .16), rgba(255, 210, 31, .02) 80%); transform: translateX(calc(1.2 * var(--u))); }
.hx-it.on::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: calc(.6 * var(--u)); border-radius: 99px; background: var(--gold); box-shadow: 0 0 calc(1.6 * var(--u)) var(--gold); }
.hx-it.on em { color: var(--gold); }
.hx-it.on b { font-size: calc(7 * var(--u)); }
.hx-it.on small { opacity: .8; max-height: calc(3 * var(--u)); color: var(--gold); }
.hx-it.on .hx-arr { opacity: 1; transform: none; }
.hx-stage { grid-row: 2; position: relative; min-height: 0; }
.hx-card { position: absolute; inset: calc(1 * var(--u)) 0 calc(1 * var(--u)) 0; border-radius: calc(3 * var(--u)); overflow: hidden; display: grid; grid-template-columns: calc(36 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(3.4 * var(--u)); padding: calc(4 * var(--u));
  background: linear-gradient(135deg, rgba(8, 30, 90, .9), rgba(3, 12, 40, .92)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .5);
  opacity: 0; transform: translateX(calc(4 * var(--u))) scale(.97); pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.hx-card.on { opacity: 1; transform: none; pointer-events: auto; }
.hx-cart { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .35; filter: saturate(1.1); mask-image: linear-gradient(90deg, #000 20%, transparent 85%); }
.hx-card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 80% at 22% 50%, color-mix(in srgb, var(--a1) 30%, transparent), transparent 70%); pointer-events: none; }
.hx-logo, .hx-info { position: relative; z-index: 1; }
.hx-logo { width: 100%; aspect-ratio: 1; border-radius: calc(3 * var(--u)); overflow: hidden; box-shadow: 0 0 0 calc(.35 * var(--u)) rgba(255, 255, 255, .9), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .55), 0 0 calc(8 * var(--u)) color-mix(in srgb, var(--a1) 40%, transparent); transform: rotate(-3deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); display: grid; place-items: center; background: #0a2a7a; }
.hx-card.on .hx-logo { animation: hxFloat 4.5s ease-in-out infinite; }
@keyframes hxFloat { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(calc(-1.2 * var(--u))); } }
.hx-logo img { width: 100%; height: 100%; object-fit: cover; }
.hx-bolt { width: 70%; height: 70%; color: var(--gold); filter: drop-shadow(0 0 calc(3 * var(--u)) rgba(255, 210, 31, .6)); display: grid; place-items: center; }
.hx-bolt svg { width: 100%; height: 100%; }
.hx-tag { margin: 0; font-size: calc(2.2 * var(--u)); letter-spacing: .24em; text-transform: uppercase; font-weight: 800; color: var(--gold); }
.hx-info h2 { margin: calc(.4 * var(--u)) 0 calc(1.2 * var(--u)); font-family: var(--disp); font-weight: 400; font-size: calc(10 * var(--u)); line-height: .9; letter-spacing: .02em; }
.hx-d { margin: 0; font-size: calc(2.7 * var(--u)); line-height: 1.3; color: rgba(255, 255, 255, .82); max-width: 95%; }
.hx-chips { display: flex; flex-wrap: wrap; gap: calc(.8 * var(--u)); margin: calc(2 * var(--u)) 0 calc(3 * var(--u)); }
.hx-chips span { font-size: calc(1.9 * var(--u)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: calc(.5 * var(--u)) calc(1.4 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hx-go { display: inline-flex; align-items: center; gap: calc(1.2 * var(--u)); height: calc(8 * var(--u)); padding: 0 calc(4.4 * var(--u)); border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); font-family: var(--disp); font-size: calc(4 * var(--u)); letter-spacing: .06em; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(255, 210, 31, .35); transition: transform .18s, box-shadow .18s; }
.hx-go svg { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); }
.hx-go:hover { transform: translateY(calc(-.3 * var(--u))) scale(1.03); box-shadow: 0 calc(1.4 * var(--u)) calc(4 * var(--u)) rgba(255, 210, 31, .5); }
.hx-foot { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: calc(1.4 * var(--u)); border-top: 1px solid var(--edge); }
.hx-cont { display: flex; align-items: center; gap: calc(1.2 * var(--u)); height: calc(6.6 * var(--u)); padding: 0 calc(2 * var(--u)) 0 calc(1 * var(--u)); border: 0; border-radius: 999px; background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge); color: #fff; text-align: left; transition: background .18s; }
.hx-cont:hover { background: rgba(255, 210, 31, .14); }
.hx-cont span { display: flex; flex-direction: column; line-height: 1.05; }
.hx-cont small { font-size: calc(1.6 * var(--u)); letter-spacing: .2em; color: var(--gold); font-weight: 800; }
.hx-cont b { font-size: calc(2.4 * var(--u)); }
.hx-cont em { font-style: normal; font-size: calc(1.9 * var(--u)); color: rgba(255, 255, 255, .55); margin-left: calc(1 * var(--u)); }
.hx-more { border: 0; background: transparent; color: rgba(255, 255, 255, .7); font-weight: 700; font-size: calc(2.1 * var(--u)); text-decoration: underline; text-underline-offset: 3px; }
.hx-hint { color: rgba(255, 255, 255, .5); font-size: calc(2.2 * var(--u)); }
.hx-keys { margin-left: auto; font-size: calc(1.9 * var(--u)); color: rgba(255, 255, 255, .45); letter-spacing: .06em; }
.hx-keys kbd { font-family: var(--ui); display: inline-grid; place-items: center; min-width: calc(3 * var(--u)); padding: 0 calc(.6 * var(--u)); border-radius: calc(.6 * var(--u)); background: rgba(255, 255, 255, .1); color: #fff; margin: 0 calc(.2 * var(--u)); }
.hx-modal { display: flex; align-items: center; justify-content: center; }
.hx-sheet { width: min(640px, 90vw); max-height: 80vh; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 18px; background: #061a52; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 60px rgba(0, 0, 0, .6); color: #fff; font-family: 'Barlow Condensed', sans-serif; }
.hx-sheet header { display: flex; justify-content: space-between; align-items: center; font-size: 24px; }
.hx-sheet header button { border: 0; background: rgba(255, 255, 255, .1); color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.hx-slist { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.hx-slist .hx-cont { height: 56px; font-size: 16px; cursor: pointer; } .hx-slist .hx-cont b { font-size: 18px; } .hx-slist .hx-cont small { font-size: 12px; } .hx-slist .hx-cont em { font-size: 14px; margin-left: auto; }

/* =========================================================================
   CONFIGURACIÓN + EQUIPOS
   ========================================================================= */
.st { display: grid; grid-template-columns: calc(38 * var(--u)) minmax(0, 1fr); gap: calc(2.4 * var(--u)); height: 100%; min-height: 0; }
.st-nav { display: flex; flex-direction: column; gap: calc(.8 * var(--u)); }
.st-nav button { display: flex; align-items: center; gap: calc(1.4 * var(--u)); height: calc(8 * var(--u)); padding: 0 calc(2 * var(--u)); border: 0; border-radius: calc(1.6 * var(--u)); background: transparent; color: rgba(255, 255, 255, .65); font-size: calc(2.8 * var(--u)); font-weight: 700; text-align: left; transition: all .2s; }
.st-nav button svg { width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); }
.st-nav button:hover { background: var(--glass2); color: #fff; }
.st-nav button.on { background: linear-gradient(90deg, rgba(255, 210, 31, .18), rgba(255, 210, 31, .03)); color: #fff; box-shadow: inset calc(.5 * var(--u)) 0 0 var(--gold); }
.st-panel { background: var(--glass); border-radius: calc(2 * var(--u)); box-shadow: inset 0 0 0 1px var(--edge); padding: calc(2.4 * var(--u)) calc(3 * var(--u)); overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--u)); padding: calc(1.4 * var(--u)) calc(2 * var(--u)); border: 0; border-radius: calc(1.4 * var(--u)); background: var(--glass2); color: #fff; text-align: left; }
.st-row span { display: flex; flex-direction: column; } .st-row b { font-size: calc(2.8 * var(--u)); } .st-row small { font-size: calc(2 * var(--u)); color: rgba(255, 255, 255, .55); }
.st-row select, .st-row input[type=range] { font-size: calc(2.4 * var(--u)); accent-color: var(--gold); }
.st-row select { background: #0a2668; color: #fff; border: 0; border-radius: calc(.8 * var(--u)); padding: calc(.6 * var(--u)) calc(1.2 * var(--u)); }
.st-links { display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)); }
.st-saves { display: flex; flex-direction: column; gap: calc(.8 * var(--u)); }
.st-saves .hx-cont em { margin-left: auto; color: var(--gold); }
.st-lgs { display: flex; flex-wrap: wrap; gap: calc(.8 * var(--u)); }
.st-lgs button { border: 0; border-radius: 999px; padding: calc(.8 * var(--u)) calc(2 * var(--u)); background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge); color: #fff; font-size: calc(2.3 * var(--u)); font-weight: 700; }
.st-lgs button.on { background: var(--gold); color: var(--ink); }
.st-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(18 * var(--u)), 1fr)); gap: calc(1.2 * var(--u)); overflow-y: auto; min-height: 0; flex: 1; align-content: start; padding: calc(.4 * var(--u)); }
.st-team { display: flex; flex-direction: column; align-items: center; gap: calc(.5 * var(--u)); padding: calc(1.6 * var(--u)) calc(1 * var(--u)); border: 0; border-radius: calc(1.6 * var(--u)); color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 30%, transparent), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px var(--edge); }
.st-team:hover { transform: translateY(calc(-.4 * var(--u))); box-shadow: inset 0 0 0 1px var(--gold); }
.st-team b { font-size: calc(2.3 * var(--u)); text-align: center; line-height: 1.05; } .st-team small { font-size: calc(1.7 * var(--u)); color: rgba(255, 255, 255, .55); }
.eq-nav { display: flex; align-items: center; gap: calc(1 * var(--u)); font-size: calc(2.2 * var(--u)); color: rgba(255, 255, 255, .7); }
.eq-tabs { display: flex; gap: calc(.8 * var(--u)); }
.eq-tabs button { border: 0; border-radius: 999px; padding: calc(1 * var(--u)) calc(3 * var(--u)); background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge); color: #fff; font-size: calc(2.6 * var(--u)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.eq-tabs button.on { background: var(--gold); color: var(--ink); }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(24 * var(--u)), 1fr)); gap: calc(1.2 * var(--u)); overflow-y: auto; min-height: 0; flex: 1; align-content: start; padding: calc(.4 * var(--u)); }
.eq-p { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(.3 * var(--u)); padding: calc(1.4 * var(--u)) calc(1 * var(--u)) calc(1.2 * var(--u)); border: 0; border-radius: calc(1.8 * var(--u)); color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 26%, rgba(6, 18, 52, .7)), rgba(6, 18, 52, .75)); box-shadow: inset 0 0 0 1px var(--edge); overflow: hidden; }
.eq-p img { width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .25), rgba(0, 0, 0, .3)); }
.eq-p b { font-size: calc(2.4 * var(--u)); line-height: 1.05; } .eq-p small { font-size: calc(1.8 * var(--u)); color: rgba(255, 255, 255, .62); display: flex; align-items: center; gap: calc(.4 * var(--u)); justify-content: center; }
.eq-p em { position: absolute; inset: auto 0 0 0; font-style: normal; font-size: calc(1.7 * var(--u)); font-weight: 800; letter-spacing: .14em; background: var(--gold); color: var(--ink); padding: calc(.4 * var(--u)) 0; transform: translateY(100%); transition: transform .2s; }
.eq-p:hover { transform: translateY(calc(-.4 * var(--u))); box-shadow: inset 0 0 0 1px var(--gold); } .eq-p:hover em { transform: none; }
.eq-p.out { opacity: .55; }
.eq-st { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(2 * var(--u)); min-height: 0; flex: 1; }
.eq-st-main, .eq-st-side { background: var(--glass); border-radius: calc(2 * var(--u)); box-shadow: inset 0 0 0 1px var(--edge); padding: calc(2 * var(--u)); min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(.8 * var(--u)); }
.eq-st-img { width: 100%; border-radius: calc(1.4 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .5); }
.eq-st h3 { margin: calc(.6 * var(--u)) 0 0; font-family: var(--disp); font-weight: 400; font-size: calc(4.6 * var(--u)); }
.eq-st .news { margin: 0; padding-left: calc(2.4 * var(--u)); font-size: calc(2 * var(--u)); color: rgba(255, 255, 255, .75); }
.eq-cands { display: flex; flex-direction: column; gap: calc(.8 * var(--u)); overflow-y: auto; min-height: 0; flex: 1; }
.eq-cand { display: grid; grid-template-columns: calc(16 * var(--u)) 1fr; grid-template-rows: auto auto; column-gap: calc(1.2 * var(--u)); align-items: center; text-align: left; border: 0; border-radius: calc(1.2 * var(--u)); padding: calc(.8 * var(--u)); background: var(--glass2); color: #fff; box-shadow: inset 0 0 0 1px var(--edge); }
.eq-cand img { grid-row: 1 / 3; width: 100%; border-radius: calc(.8 * var(--u)); }
.eq-cand b { font-size: calc(2.2 * var(--u)); line-height: 1.1; } .eq-cand small { font-size: calc(1.7 * var(--u)); color: rgba(255, 255, 255, .55); }
.eq-cand.on { box-shadow: inset 0 0 0 calc(.35 * var(--u)) var(--gold); background: rgba(255, 210, 31, .1); }
.m-eq .m-body { gap: calc(1.4 * var(--u)); }

/* editor de caras con más categorías */
.m-fe .fx-tabs { flex-wrap: wrap; gap: calc(.4 * var(--u)); }
.m-fe .fx-tab { flex: 0 0 auto; height: calc(5.4 * var(--u)); padding: 0 calc(1.2 * var(--u)); border-radius: 999px; }
.m-fe .fx-tab svg { width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); }
.fx-tl { font-size: calc(1.9 * var(--u)); font-weight: 700; white-space: nowrap; }
.m-fe .fx-tab.on { background: var(--gold); color: var(--ink); }
.msw.on { background: var(--gold) !important; }
.vs-o.on, .mseg button.on { background: var(--gold) !important; color: var(--ink) !important; }
.wcards .wcard.big:only-child { max-height: calc(48 * var(--u)); align-self: center; }

/* Ligas y Carrera: grilla de países (11 países: 6 + 5) */
.wcards.wflags { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: calc(1.6 * var(--u)); }
.wcards.wflags .wcard.wflag { gap: calc(1.2 * var(--u)); padding: calc(1.6 * var(--u)); }
.wcards.wflags svg.flag.fl-card { width: calc(18 * var(--u)); height: calc(12 * var(--u)); }
.wcards.wflags .wc-top b { font-size: calc(3.2 * var(--u)); }
.wcards.wflags .wc-top small { font-size: calc(2 * var(--u)); }
.wcards.wflags .wsaved, .wcards.wflags .wnew { font-size: calc(1.8 * var(--u)); }

/* Modo Carrera: sólo carrera de jugador (seguir / nueva) */
.pc-start { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); max-width: calc(170 * var(--u)); margin: 0 auto; width: 100%; }
.hx-modal .hx-cont { display: flex; align-items: center; gap: calc(1.4 * var(--u)); }
.hx-modal .hx-cont > span { flex: 1; }
.hx-modal .hx-cont [data-del] { margin-left: auto; font-size: calc(1.8 * var(--u)); padding: calc(.8 * var(--u)) calc(2.2 * var(--u)); }
.pc-lg > .vs-opts.row { flex-wrap: wrap; gap: calc(.8 * var(--u)); }
.pc-lg > .vs-opts.row .vs-o { padding: calc(.7 * var(--u)) calc(1.4 * var(--u)); font-size: calc(1.9 * var(--u)); }
.gval{display:inline-flex;align-items:center;gap:.35em}.gval em{font-style:normal;font-family:var(--disp,inherit);font-size:.95em;color:#ffd21f;letter-spacing:.03em}
/* Partida rápida · elección de estadio */
.m-qstad .qs{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:calc(1.6*var(--u));height:100%;min-height:0}
.m-qstad .qs-l{display:flex;flex-direction:column;min-height:0;gap:calc(1*var(--u))}
.m-qstad .qs-g{display:flex;flex-wrap:wrap;gap:calc(.6*var(--u))}
.m-qstad .qs-g button{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#dfe8ff;border-radius:999px;padding:calc(.5*var(--u)) calc(1.2*var(--u));font:600 calc(1.9*var(--u)) var(--ui)}
.m-qstad .qs-g button.on{background:var(--gold,#ffd21f);color:#0b1330;border-color:transparent}
.m-qstad .qs-g em{font-style:normal;opacity:.6;margin-left:.3em}
.m-qstad .qs-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(.5*var(--u))}
.m-qstad .qs-it{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid rgba(255,255,255,.1);background:rgba(6,9,18,.5);border-radius:calc(1*var(--u));padding:calc(.8*var(--u)) calc(1.2*var(--u));color:#fff}
.m-qstad .qs-it b{font:400 calc(2.6*var(--u)) var(--disp);letter-spacing:.02em;line-height:1.05;overflow-wrap:anywhere}
.m-qstad .qs-it small{opacity:.65;font-size:calc(1.6*var(--u))}
.m-qstad .qs-it.on{border-color:var(--gold,#ffd21f);background:rgba(255,210,31,.12)}
.m-qstad .qs-r{display:flex;flex-direction:column;min-height:0;gap:calc(.8*var(--u))}
.m-qstad .qs-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:calc(1.2*var(--u));box-shadow:0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.5);border:2px solid rgba(255,210,31,.5)}
.m-qstad .qs-r h3{margin:0;font:400 calc(4*var(--u)) var(--disp);letter-spacing:.02em;line-height:1}
.m-qstad .qs-vs{display:flex;align-items:center;gap:calc(1*var(--u));font:400 calc(3*var(--u)) var(--disp)}
.m-qstad .qs-vs i{font-style:normal;color:var(--gold,#ffd21f)}
/* Carrera · selección por rendimiento */
.pc-nat-tier{margin:0 0 calc(.6*var(--u));font:400 calc(4.2*var(--u)) var(--disp);letter-spacing:.02em;line-height:1}
.pc-nat-tier.t-out{color:#ff8a8a}.pc-nat-tier.t-watch{color:#ffd28a}.pc-nat-tier.t-occ{color:#8fd3ff}.pc-nat-tier.t-fixed{color:#7df0a8}.pc-nat-tier.t-key{color:#ffd21f}
.pc-nat-bar{position:relative;height:calc(1.4*var(--u));border-radius:999px;background:rgba(255,255,255,.1);overflow:visible;margin:calc(.4*var(--u)) 0}
.pc-nat-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#4fb3e8,#ffd21f)}
.pc-nat-bar b{position:absolute;top:-3px;bottom:-3px;width:2px;background:rgba(255,255,255,.6)}
.pc-nat-parts td.pos{color:#7df0a8;text-align:right}.pc-nat-parts td.neg{color:#ff8a8a;text-align:right}
/* Carrera · vida y dinero + vida personal */
.m-pclife2 .m-body,.m-pcsocial .m-body{display:flex;flex-direction:column;min-height:0}
.lf-tabs{display:flex;flex-wrap:wrap;gap:calc(.5*var(--u));margin-bottom:calc(1*var(--u))}
.lf-tabs button{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#dfe8ff;border-radius:999px;padding:calc(.45*var(--u)) calc(1.2*var(--u));font:600 calc(1.8*var(--u)) var(--ui)}
.lf-tabs button.on{background:var(--gold,#ffd21f);color:#0b1330;border-color:transparent}
.lf-body{flex:1;min-height:0;overflow:auto}
.lf-2{display:grid;grid-template-columns:1fr 1fr;gap:calc(1.6*var(--u));min-height:0}
.lf-bar{display:grid;grid-template-columns:minmax(0,40%) 1fr calc(4*var(--u));align-items:center;gap:calc(.8*var(--u));margin:calc(.5*var(--u)) 0;font:600 calc(1.8*var(--u)) var(--ui)}
.lf-bar i{height:calc(1.2*var(--u));border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}.lf-bar b{display:block;height:100%;border-radius:999px}
.lf-bar em{font-style:normal;text-align:right;opacity:.8}
.lf-soc{display:grid;grid-template-columns:minmax(0,34%) 1fr;gap:calc(1.6*var(--u));flex:1;min-height:0}
.lf-people,.lf-detail{min-height:0;overflow:auto}
.lf-np{display:flex;align-items:center;gap:calc(1*var(--u));width:100%;text-align:left;border:1px solid rgba(255,255,255,.1);background:rgba(6,9,18,.5);border-radius:calc(1*var(--u));padding:calc(.6*var(--u)) calc(1*var(--u));margin-bottom:calc(.5*var(--u));color:#fff;position:relative;overflow:hidden}
.lf-np.on{border-color:var(--gold,#ffd21f)}.lf-np span{display:flex;flex-direction:column;min-width:0}.lf-np b{font:400 calc(2.4*var(--u)) var(--disp);letter-spacing:.02em}.lf-np small{opacity:.65;font-size:calc(1.5*var(--u))}
.lf-np em{position:absolute;left:0;bottom:0;height:3px;width:var(--a);background:linear-gradient(90deg,#e86a92,#ffd21f)}
.lf-av{flex:none;display:grid;place-items:center;width:calc(4.6*var(--u));height:calc(4.6*var(--u));border-radius:50%;font:400 calc(2.6*var(--u)) var(--disp);color:#0b1330;font-style:normal}
.lf-who{display:flex;align-items:center;gap:calc(1.2*var(--u))}.lf-who .lf-av{width:calc(7*var(--u));height:calc(7*var(--u));font-size:calc(4*var(--u))}.lf-who h3{margin:0;font:400 calc(4*var(--u)) var(--disp)}
.lf-acts{display:flex;flex-wrap:wrap;gap:calc(.5*var(--u))}
.lf-places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(.6*var(--u))}
.lf-pl{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:calc(1*var(--u));padding:calc(.8*var(--u)) calc(1.1*var(--u));color:#fff}
.lf-pl b{font:400 calc(2.3*var(--u)) var(--disp);letter-spacing:.02em}.lf-pl small{opacity:.65;font-size:calc(1.5*var(--u))}.lf-pl:disabled{opacity:.4}
.lf-msg{background:rgba(255,210,31,.12);border-left:3px solid var(--gold,#ffd21f);padding:calc(.7*var(--u)) calc(1*var(--u));margin:calc(.8*var(--u)) 0;font:600 calc(1.9*var(--u)) var(--ui)}
.lf-know{list-style:none;margin:0 0 calc(.6*var(--u));padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(.4*var(--u)) calc(1*var(--u))}
.lf-know li{font:600 calc(1.8*var(--u)) var(--ui);color:#fff;background:rgba(255,255,255,.05);border-radius:calc(.6*var(--u));padding:calc(.4*var(--u)) calc(.8*var(--u))}
.lf-know li span{display:block;font-size:calc(1.3*var(--u));letter-spacing:.12em;text-transform:uppercase;color:#7df0a8}
.lf-know li.no span{color:#ff8a8a}
/* Partida online */
.vs-net{border-color:rgba(46,230,166,.5)!important}
.m-net .nm{display:grid;grid-template-columns:1fr 1fr;gap:calc(2*var(--u));margin-bottom:calc(1.4*var(--u))}
.m-net .nm-c{border:1px solid rgba(255,255,255,.12);background:rgba(6,9,18,.55);border-radius:calc(1.6*var(--u));padding:calc(2*var(--u));display:flex;flex-direction:column;gap:calc(1*var(--u));align-items:flex-start}
.m-net .nm-c h3{margin:0;font:400 calc(4.4*var(--u)) var(--disp);letter-spacing:.02em}
.m-net .nm-c p{margin:0;font:600 calc(2*var(--u)) var(--ui);color:#cfd9ee}
.m-net #net-code{font:400 calc(6*var(--u)) var(--disp);letter-spacing:.3em;text-transform:uppercase;width:100%;box-sizing:border-box;background:#020818;border:2px solid rgba(255,210,31,.5);border-radius:calc(1*var(--u));color:#ffd21f;padding:calc(.6*var(--u)) calc(1.2*var(--u));text-align:center}
.m-net #net-err{color:#ff8a8a;min-height:1em}
.m-net .nl{display:flex;flex-direction:column;align-items:center;gap:calc(1.6*var(--u));padding-top:calc(1*var(--u))}
.m-net .nl-code{display:flex;flex-direction:column;align-items:center;gap:calc(.3*var(--u))}
.m-net .nl-code small{font:800 calc(1.6*var(--u)) var(--ui);letter-spacing:.3em;color:#9fb3d6}
.m-net .nl-code b{font:400 calc(10*var(--u)) var(--disp);letter-spacing:.18em;color:#ffd21f;line-height:1}
.m-net .nl-code span{font:600 calc(2.1*var(--u)) var(--ui)}.m-net .nl-code em{font-style:normal;color:#2ee6a6;font:600 calc(1.6*var(--u)) var(--ui)}
.m-net .nl-vs{display:flex;align-items:center;gap:calc(4*var(--u))}
.m-net .nl-vs>i{font:400 calc(7*var(--u)) var(--disp);color:#ff6a1a;font-style:normal}
.m-net .nl-vs>i.nl-sc{color:#fff;font-size:calc(9*var(--u))}
.m-net .nl-team{display:flex;flex-direction:column;align-items:center;gap:calc(.4*var(--u));width:calc(26*var(--u))}
.m-net .nl-team img{width:calc(12*var(--u));height:calc(12*var(--u));object-fit:contain}
.m-net .nl-team b{font:400 calc(3.4*var(--u)) var(--disp);text-align:center;line-height:1}.m-net .nl-team small{opacity:.7;font:600 calc(1.6*var(--u)) var(--ui);text-align:center}
.m-net .nl-st{font:600 calc(2.2*var(--u)) var(--ui);margin:0}.m-net .nl-err{color:#ff8a8a;font:600 calc(2.6*var(--u)) var(--ui)}
#netview{position:fixed;inset:0;z-index:50;background:#000;display:none;align-items:center;justify-content:center}
#netview video{width:100vw;height:100vh;object-fit:contain;background:#000}
#netview .nv-wait{position:absolute;color:#fff;font:600 22px 'Barlow Condensed',sans-serif}
#netview .nv-hud{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.55);border-radius:999px;padding:6px 8px 6px 14px;color:#fff;font:600 13px 'Barlow Condensed',sans-serif}
#netview .nv-hud b{color:#2ee6a6;letter-spacing:.08em}#netview .nv-hud small{opacity:.7}
#netview .nv-hud button{border:0;border-radius:999px;background:#ffd21f;color:#0b1330;font:700 13px 'Barlow Condensed',sans-serif;padding:5px 12px;cursor:pointer}
.hx-globe{color:#2ee6a6;filter:drop-shadow(0 0 calc(3 * var(--u)) rgba(46,230,166,.55))}
.m-net .nm-diag{display:flex;flex-direction:column;align-items:center;gap:calc(.6*var(--u));margin:0 0 calc(1*var(--u))} .m-net #net-diag .m-note{text-align:center}
#net-wait{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;z-index:6}
#net-wait span{background:rgba(0,0,0,.7);color:#fff;font:700 18px 'Barlow Condensed',sans-serif;padding:8px 18px;border-radius:999px;letter-spacing:.04em}
#net-tag{position:absolute;top:10px;right:12px;display:none;align-items:center;gap:10px;background:rgba(0,0,0,.55);border-radius:999px;padding:6px 14px;color:#fff;font:600 13px 'Barlow Condensed',sans-serif;z-index:6;pointer-events:none}
#net-tag b{color:#2ee6a6;letter-spacing:.08em}#net-tag small{opacity:.75}