/* Home revamp — dynamic hero, richer color, gradient accents.
   Uses only DS tokens; color comes from cyan accent + rating ramp + position hues. */

/* ---------- Hero ---------- */
.hhero{position:relative;overflow:hidden;padding:0;border-bottom:1px solid var(--border-strong)}
.hhero .bg{position:absolute;inset:0;background:
  radial-gradient(90% 130% at 8% 0%, color-mix(in oklab,var(--accent) 30%,transparent), transparent 55%),
  radial-gradient(80% 120% at 100% 8%, color-mix(in oklab,var(--pos-att) 26%,transparent), transparent 52%),
  radial-gradient(70% 120% at 62% 108%, color-mix(in oklab,var(--r5t) 24%,transparent), transparent 55%),
  linear-gradient(160deg, color-mix(in oklab,var(--chrome-dim) 90%,var(--surface)), var(--bg) 70%)}
.hhero .grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:44px 44px;opacity:.15;mask-image:radial-gradient(120% 90% at 40% 0%,#000,transparent 75%)}
.hhero .in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 468px;gap:44px;padding:52px 56px 44px;align-items:center}
.htag{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-hi);background:var(--accent-dim);border:1px solid color-mix(in oklab,var(--accent) 45%,transparent);border-radius:99px;padding:6px 13px}
.htag .dot{width:7px;height:7px;border-radius:99px;background:var(--up);box-shadow:0 0 0 3px rgba(64,192,87,.2)}
.hh1{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:18px 0 0;text-wrap:balance}
.hh1 .g{background:linear-gradient(100deg,var(--accent-hi),var(--pos-att) 55%,var(--r5t));-webkit-background-clip:text;background-clip:text;color:transparent}
.hsub{font-size:17px;color:var(--text-2);line-height:1.6;margin:16px 0 24px;max-width:52ch}
.hsearch{display:flex;gap:10px;max-width:640px}
.hsearch .field{flex:1;height:56px;background:color-mix(in oklab,var(--surface) 82%,transparent);backdrop-filter:blur(6px);border-color:var(--border-strong);box-shadow:var(--shadow-2)}
.hsearch .field:focus-within{border-color:var(--accent)}
.hsearch .go{height:56px;padding:0 22px;border-radius:var(--r-sm);background:var(--accent);border:1px solid var(--accent);color:#04222a;font-weight:800;font-size:15px;cursor:pointer;white-space:nowrap;box-shadow:0 6px 18px -6px var(--accent)}
.hquick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hquick a{font-size:13px;font-weight:600;color:var(--text-2);background:color-mix(in oklab,var(--surface-2) 70%,transparent);border:1px solid var(--border);border-radius:99px;padding:7px 13px}
.hquick a:hover{border-color:var(--accent);color:var(--accent-hi)}
.hquick a b{color:var(--text-3);font-weight:700;margin-left:5px}

/* live stat ticker under hero copy */
.ticker{display:flex;gap:26px;margin-top:26px;padding-top:22px;border-top:1px solid var(--border)}
.ticker .k{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.ticker .v{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:4px}
.ticker .v em{font-style:normal;font-size:14px;font-weight:700;color:var(--up);margin-left:6px}

/* featured spotlight card */
.spot{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(155deg, color-mix(in oklab,var(--r5) 22%,var(--surface)), var(--surface) 62%);border:1px solid var(--border-strong);box-shadow:var(--shadow-2)}
.spot .lite{position:absolute;right:-30px;top:-30px;width:180px;height:180px;border-radius:99px;background:radial-gradient(circle,color-mix(in oklab,var(--r5t) 55%,transparent),transparent 70%);opacity:.5}
.spot .hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);position:relative}
.spot .hd .mo{margin:0;color:var(--r5t)}
.spot .hd .mo::before{background:var(--r5t)}
.spot .bd{position:relative;padding:20px 18px}
.spot .name{display:flex;align-items:center;gap:9px;font-size:24px;font-weight:800;letter-spacing:-.02em}
.spot .meta{display:flex;align-items:center;gap:7px;margin-top:6px}
/* foto del jugador: emerge del glow, arriba a la derecha; el texto reserva sitio a su izquierda */
.spot .jphoto{position:absolute;top:6px;right:8px;width:128px;height:136px;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));pointer-events:none;z-index:1}
.spot .name,.spot .meta{padding-right:122px}
.spot .meta{min-width:0}
.spot .meta .psub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m .spot .jphoto{width:100px;height:108px;top:4px;right:4px}
.m .spot .name,.m .spot .meta{padding-right:92px}
.spot .nums{display:flex;align-items:baseline;gap:10px;margin:16px 0 4px}
.spot .cur{font-size:40px;font-weight:800;letter-spacing:-.025em;line-height:1;color:var(--r3t)}
.spot .arw{color:var(--text-3);font-size:20px}
.spot .max{font-size:40px;font-weight:800;letter-spacing:-.025em;line-height:1;color:var(--r5t)}
.spot .gp{font-size:13px;font-weight:800;color:var(--up);background:rgba(64,192,87,.16);border-radius:99px;padding:3px 10px;margin-left:2px}
.spot .krow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.spot .krow .kk{background:color-mix(in oklab,var(--surface-2) 75%,transparent);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px}
.spot .krow .kk .l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.spot .krow .kk .n{font-size:16px;font-weight:700;margin-top:3px}
.spot .cta{display:flex;gap:8px;margin-top:16px}

/* ---------- Band: quick tools (gradient tiles) ---------- */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:22px 32px}
.gtile{position:relative;overflow:hidden;display:block;border-radius:var(--r-md);border:1px solid var(--border-strong);padding:18px 18px 20px;min-height:132px;background:var(--surface)}
.gtile::after{content:"";position:absolute;inset:0;opacity:.9;background:var(--tint);mix-blend-mode:normal;z-index:0}
.gtile>*{position:relative;z-index:1}
.gtile .ic{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.gtile .t{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:14px 0 3px;color:#fff}
.gtile .s{font-size:13px;line-height:1.45;color:rgba(255,255,255,.82);padding-right:26px}
.gtile .go{position:absolute;right:16px;bottom:16px;font-size:16px;color:rgba(255,255,255,.9);z-index:1}
.gtile:hover{transform:translateY(-2px);transition:transform .15s}
.tint-a{--tint:linear-gradient(150deg,#0e6b7d,#12323f)}
.tint-b{--tint:linear-gradient(150deg,#1c6b3a,#123027)}
.tint-c{--tint:linear-gradient(150deg,#2a4d8f,#151f38)}
.tint-d{--tint:linear-gradient(150deg,#6b3aa0,#241540)}

/* ---------- Curated rail ---------- */
.hsec{padding:26px 32px;border-top:1px solid var(--border)}
.hsechead{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.hsechead h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0}
.hsechead .badge{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hi);background:var(--accent-dim);border-radius:99px;padding:3px 10px}
.hsechead a{margin-left:auto;font-size:14px;font-weight:600}
.curated2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cur2{position:relative;overflow:hidden;display:block;background:var(--surface);border:1px solid color-mix(in oklab,var(--edge,var(--accent)) 45%,var(--border));border-radius:var(--r-md);padding:18px 18px 16px}
.cur2:hover{background:var(--surface-2);border-color:var(--edge,var(--accent));transform:translateY(-2px);transition:.15s}
.cur2 .top{display:flex;align-items:center;justify-content:space-between}
.cur2 .cnt{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1}
.cur2 .cnt.new{font-size:12px;color:var(--accent-hi);background:var(--accent-dim);border-radius:99px;padding:4px 10px;letter-spacing:.06em;text-transform:uppercase}
.cur2 . chip{font-size:11px}
.cur2 b{display:block;font-size:16px;font-weight:600;color:var(--text);margin:12px 0 4px}
.cur2 i{display:block;font-style:normal;font-size:13px;color:var(--text-3);line-height:1.5}
.cur2 .arr{position:absolute;right:16px;top:16px;color:var(--text-3)}

/* ---------- Ranked mini-lists (compact) ---------- */
.rlists{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rlist{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.rlist .rh{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,color-mix(in oklab,var(--edge,var(--accent)) 12%,var(--surface)),var(--surface))}
.rlist .rh .ic{width:24px;height:24px;border-radius:var(--r-xs);display:grid;place-items:center;font-size:12px;font-weight:800;color:#04222a;background:var(--edge,var(--accent))}
.rlist .rh b{font-size:14px;font-weight:700;letter-spacing:-.005em;color:var(--text)}
.rlist .rh .c{margin-left:auto;font-size:12px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}
.mlrow{display:grid;grid-template-columns:16px minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:7px 14px;border-bottom:1px solid var(--border)}
.mlrow:hover{background:var(--surface-2)}
.mlrow .rk{font-size:12px;font-weight:700;color:var(--text-3);text-align:center;font-variant-numeric:tabular-nums}
.mlrow .nm{min-width:0;display:flex;align-items:center;gap:7px}
.mlrow .nm b{font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlrow .nm .mt2{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.mlrow .rc{font-size:11px;height:20px;min-width:26px}
.mlrow .mm{font-size:12.5px;font-weight:800;color:var(--up);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
.mlrow .mm.v{color:var(--text-2);font-weight:700}
.rlist .rf{margin-top:auto;padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--accent-hi);border-top:1px solid var(--border);background:var(--bg)}
.rlist .rf:hover{background:var(--surface-2)}

/* ---------- CTA tracking banner ---------- */
.ctaband{position:relative;overflow:hidden;margin:26px 32px;border-radius:var(--r-lg);border:1px solid var(--border-strong);padding:28px 32px;background:linear-gradient(120deg,color-mix(in oklab,var(--accent) 26%,var(--surface)),color-mix(in oklab,var(--pos-att) 20%,var(--surface)) 60%,var(--surface))}
.ctaband .glow{position:absolute;right:-40px;top:-60px;width:280px;height:280px;border-radius:99px;background:radial-gradient(circle,color-mix(in oklab,var(--accent) 45%,transparent),transparent 70%);opacity:.5}
.ctaband .in2{position:relative;display:flex;align-items:center;gap:32px}
.ctaband .cp{flex:1;min-width:0}
.ctaband .cp .mo{margin:0 0 8px;color:var(--accent-hi)}
.ctaband .cp h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;text-wrap:balance}
.ctaband .cp p{font-size:15px;color:var(--text-2);margin:0;max-width:58ch;line-height:1.55}
.ctaband .feats{display:flex;gap:22px;margin-top:16px}
.ctaband .feats span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text)}
.ctaband .feats i{width:18px;height:18px;border-radius:99px;background:var(--accent-dim);border:1px solid var(--accent);color:var(--accent-hi);display:grid;place-items:center;font-size:10px;font-style:normal}
.ctaband .act{display:flex;flex-direction:column;gap:10px;flex:none}
.ctaband .act .btn{height:48px;padding:0 26px;font-size:15px;justify-content:center}
.ctaband .act .note{font-size:12px;color:var(--text-3);text-align:center}

/* ---------- Changelog (richer) ---------- */
.chgwrap{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.chgrow{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1.1fr) 84px;gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border)}
.chgrow:last-child{border-bottom:0}
.chgrow:hover{background:var(--surface-2)}
.chghead{background:var(--bg);border-bottom:1px solid var(--border-strong);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.valpot{display:flex;align-items:center;gap:8px;font-weight:800}
.valpot .ar{color:var(--text-3);font-weight:400}
.pbar{display:block;position:relative;height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.pbar i{display:block;position:absolute;left:0;top:0;bottom:0;border-radius:99px}
.pbar .gh{position:absolute;top:0;bottom:0;border-radius:0 99px 99px 0;background:repeating-linear-gradient(105deg,var(--r5) 0 5px,transparent 5px 10px);opacity:.5;border-right:2px solid var(--r5)}

/* ---------- Community saves (gradient) ---------- */
.saves2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.save2{position:relative;overflow:hidden;display:block;border-radius:var(--r-md);border:1px solid var(--border-strong);padding:18px;background:linear-gradient(160deg,color-mix(in oklab,var(--chrome-dim) 60%,var(--surface)),var(--surface) 75%)}
.save2:hover{border-color:var(--chrome)}
.save2 .hd{display:flex;align-items:center;gap:10px}
.save2 .hd .nm{font-size:18px;font-weight:700;letter-spacing:-.01em}
.save2 .who{font-size:13px;color:var(--text-3);margin-top:3px}
.save2 .row{display:flex;gap:8px;margin-top:16px}
.save2 .st{flex:1;background:color-mix(in oklab,var(--surface-2) 70%,transparent);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 10px;text-align:center}
.save2 .st .l{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.save2 .st .n{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-top:3px}

/* ---------- Explore (chips over tint) ---------- */
.explore2{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.excol{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px}
.excol .h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-hi);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.excol .h::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--eh,var(--chrome-hi))}
.excol .tags{display:flex;flex-wrap:wrap;gap:7px}
.excol .tags a{font-size:13px;font-weight:500;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:6px 11px}
.excol .tags a:hover{border-color:var(--accent);color:var(--accent-hi)}
.excol .more{display:inline-block;margin-top:12px;font-size:13px;font-weight:600}

/* ---------- Mobile ---------- */
.m .hhero .in{grid-template-columns:1fr;gap:20px;padding:24px 16px 22px}
.m .hh1{font-size:34px}
.m .hsub{font-size:15px;margin:12px 0 18px}
.m .hsearch{flex-direction:column}
.m .hsearch .field,.m .hsearch .go{height:50px}
.m .ticker{gap:16px;flex-wrap:wrap}
.m .ticker .v{font-size:20px}
.m .band{grid-template-columns:1fr 1fr;padding:16px}
.m .curated2,.m .saves2,.m .explore2,.m .rlists{grid-template-columns:1fr}
.m .ctaband{margin:16px;padding:20px 18px}
.m .ctaband .in2{flex-direction:column;align-items:stretch;gap:18px}
.m .ctaband .feats{flex-direction:column;gap:9px}
.m .ctaband .act .btn{width:100%}
.m .hsec{padding:20px 16px}
.m .chgrow{grid-template-columns:minmax(0,1fr) 96px 62px}
.m .chgrow .pbarcell{display:none}

/* clases de fila reutilizadas (no cargamos buscador.css aquí) */
.chgwrap .pcell{flex-direction:column;align-items:flex-start;gap:2px}
.pcell{display:flex;align-items:center;gap:10px;min-width:0}
.pcell>span:last-child{min-width:0}
.pnm{display:flex;align-items:center;gap:7px;min-width:0;font-weight:600;letter-spacing:-.005em;color:var(--text)}
.pnm a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psub{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden}
.posb{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:18px;padding:0 5px;border-radius:3px;background:var(--surface-2);border:1px solid var(--border-strong);font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--text-2);flex:none}

/* ============================================================
   Personalidad — fuente display, podio de rankings, aperitivo
   en cards curadas y micro-vida. Solo tokens del DS.
   ============================================================ */

/* ---- Fuente display (marca): titulares + cifras grandes ---- */
.hh1{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em}
.hsechead h2,.ctaband .cp h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em}
.ticker .v,.spot .cur,.spot .max,.cur2 .cnt{font-family:var(--font-display);font-weight:600;font-feature-settings:"tnum" 1}

/* ---- Ritmo: baña la sección alterna para no encadenar bandas iguales ---- */
.hsec.tint{background:radial-gradient(120% 100% at 0% 0%,color-mix(in oklab,var(--accent) 6%,transparent),transparent 60%),linear-gradient(180deg,color-mix(in oklab,var(--surface) 30%,var(--bg)),var(--bg))}

/* ---- Badge "en vivo" con latido ---- */
.hsechead .badge.live{display:inline-flex;align-items:center;gap:6px}
.hsechead .badge.live::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--up);animation:dotpulse 2.4s ease-out infinite}

/* ---- Rankings: escudo por fila + podio ---- */
.mlrow{grid-template-columns:24px 30px minmax(0,1fr) auto auto;gap:10px;text-decoration:none;color:var(--text)}
.mlrow:last-of-type{border-bottom:0}
.mlrow .rk{width:22px;height:22px;border-radius:99px;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);font-variant-numeric:tabular-nums}
.mlrow .rk.r1{color:#3d2b00;background:linear-gradient(150deg,#ffe066,#f59f00);border-color:#ffe066;box-shadow:0 2px 8px -2px rgba(245,159,0,.6)}
.mlrow .rk.r2{color:#26262b;background:linear-gradient(150deg,#f1f3f5,#adb5bd);border-color:#f1f3f5}
.mlrow .rk.r3{color:#3a1e05;background:linear-gradient(150deg,#f0a868,#c1701f);border-color:#f3b483}
.mlrow .cr{display:inline-flex;align-items:center;justify-content:center}
.mlrow .cr-ph{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--surface-2);border:1px solid var(--border)}
.mlrow.top .cr-ph{width:32px;height:32px}
.mlrow.top{padding-top:11px;padding-bottom:11px;background:linear-gradient(90deg,color-mix(in oklab,var(--edge,var(--accent)) 14%,transparent),transparent 62%)}
.mlrow.top .nm b{font-size:14.5px}
.mlrow.top:hover{background:linear-gradient(90deg,color-mix(in oklab,var(--edge,var(--accent)) 20%,transparent),var(--surface-2) 62%)}

/* ---- Cards curadas: escudos solapados + gancho del líder ---- */
.cur2 .top{min-height:30px}
.cur2 .faces{display:inline-flex;align-items:center;flex-direction:row-reverse}
.cur2 .faces .fc{width:30px;height:30px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;margin-right:-9px}
.cur2 .faces .fc:first-child{margin-right:0}
.cur2 .faces .fc .mc-crest{width:22px;height:22px}
.cur2 .tease{display:block;margin-top:12px;padding-top:11px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-3);display:flex;align-items:center;gap:8px}
.cur2 .tease b{display:inline;margin:0;font-size:12.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cur2 .tease .tv{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-2)}
.cur2{padding-bottom:14px}

/* ---- CTA: la nota deja de parecer un botón deshabilitado ---- */
.ctaband .act .note{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;letter-spacing:.01em;color:var(--text-3);background:none;border:0}
.ctaband .act .note::before{content:"";width:14px;height:14px;border-radius:99px;border:1.5px solid var(--text-3);background:radial-gradient(circle at 50% 42%,var(--text-3) 0 2px,transparent 2px);opacity:.7}

/* ---- Micro-vida ---- */
@keyframes dotpulse{0%{box-shadow:0 0 0 0 rgba(64,192,87,.4)}70%{box-shadow:0 0 0 6px rgba(64,192,87,0)}100%{box-shadow:0 0 0 0 rgba(64,192,87,0)}}
@keyframes spotpulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}
.htag .dot{animation:dotpulse 2.4s ease-out infinite}
.spot .lite{animation:spotpulse 4.5s ease-in-out infinite}
.ticker .v[data-count]{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.htag .dot,.spot .lite,.hsechead .badge.live::before{animation:none}}

/* ---- Mobile: el escudo del podio también en las mini-listas ---- */
.m .mlrow{grid-template-columns:22px 26px minmax(0,1fr) auto auto;gap:8px}