/* Crew Rivals · web pública (inicio, prensa, invitación, legales y borrar cuenta).
   Mismo lenguaje que la app: Manrope, tinta violeta oscura, violeta para resaltar, botones «caramelo» amarillos
   con canto, tarjetas blancas muy redondeadas. El azul de la marca (icono, tráiler) es el de las cabeceras. */

@font-face{font-family:Manrope;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/manrope-600.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/manrope-700.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:800;font-style:normal;font-display:swap;src:url(fonts/manrope-800.woff2) format("woff2")}

:root{
  --sky:#5AABFF; --blue:#2266F2; --blue-deep:#0B2C9E; --night:#071A5E;
  --ink:#24125E; --ink-2:#6F689A; --ink-3:#A39DC4;
  --line:#ECE8F8; --lilac:#F4F1FF; --lilac-2:#E9E4FB;
  --violet:#4A2BEA; --violet-lip:#2E16A8;
  --gold:#FFC61A; --gold-hi:#FFE970; --gold-lip:#C47A00; --on-gold:#3A1D8F;
  --mint:#16B676; --mint-lip:#0B8A57; --red:#E8385A; --red-lip:#B51E3D;
  --paper:#fff;
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --wrap:1160px; --gutter:clamp(16px,4vw,32px);
  --shadow:0 1px 2px rgba(36,18,94,.06),0 12px 32px rgba(36,18,94,.10);
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-weight:600;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:var(--violet);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--violet-lip)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0;text-wrap:balance}
p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ───────────── Botones caramelo (como en la app) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border:0;border-radius:var(--r-md);
  font:800 17px/1.1 Manrope,system-ui,sans-serif;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .08s ease,box-shadow .08s ease}
.btn:active{transform:scale(.98)}
.btn-gold{background:linear-gradient(180deg,#FFE970,#FFB300);color:var(--on-gold);box-shadow:0 6px 18px rgba(196,122,0,.28)}
.btn-gold:hover{color:var(--on-gold);filter:brightness(1.03)}
.btn-white{background:#fff;color:var(--ink);box-shadow:0 6px 18px rgba(3,12,60,.18)}
.btn-white:hover{color:var(--ink)}
.btn-violet{background:linear-gradient(180deg,#6A4DFF,#4A2BEA);color:#fff;box-shadow:0 6px 18px rgba(74,43,234,.28)}
.btn-violet:hover{color:#fff}
.btn-red{background:linear-gradient(180deg,#FF8199,#E8385A);color:#fff;box-shadow:0 6px 18px rgba(232,56,90,.28)}
.btn-red:hover{color:#fff}
.btn-ghost{background:var(--lilac);color:var(--violet);min-height:44px;padding:0 16px;font-size:15px;border-radius:var(--r-sm)}
.btn-ghost:hover{background:var(--lilac-2);color:var(--violet-lip)}.btn-ghost:active{transform:none}
.btn-block{display:flex;width:100%}

/* Tiendas: aún sin publicar se ven como «próximamente» (no son enlaces) */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:12px;min-width:186px;height:58px;padding:0 18px 0 14px;border-radius:14px;
  background:#0A0F2C;color:#fff;text-decoration:none;box-shadow:0 5px 0 rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s}
.store:hover{color:#fff}.store:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.store svg{width:26px;height:26px;flex:none;fill:currentColor}
.store span{display:flex;flex-direction:column;line-height:1.1;font-size:19px;font-weight:800;letter-spacing:-.01em}
.store small{font-size:12px;font-weight:600;opacity:.8;letter-spacing:0}
.store.soon{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);cursor:default}
.store.soon:active{transform:none}
.on-light .store.soon{background:var(--lilac);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--lilac-2)}

/* ───────────── Barra superior */
.top{position:relative;z-index:5}
.top .wrap{display:flex;align-items:center;gap:20px;height:104px}
.brand{display:block;flex:none}
.brand img{height:72px;width:auto;filter:drop-shadow(0 4px 10px rgba(3,12,60,.18))}
.nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav a{padding:10px 14px;border-radius:12px;font-weight:700;font-size:16px;text-decoration:none;color:inherit}
.nav a:hover{background:rgba(255,255,255,.14);color:inherit}
.top.light{border-bottom:1px solid var(--line);background:#fff}
.top.light .nav a{color:var(--ink)}.top.light .nav a:hover{background:var(--lilac)}
.lang{position:relative;margin-left:6px}
.lang summary{display:flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:12px;list-style:none;cursor:pointer;font-weight:800;font-size:15px;
  background:rgba(255,255,255,.14);user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{background:rgba(255,255,255,.22)}
.lang summary svg{width:18px;height:18px}.lang summary .chev{width:14px;height:14px;transition:transform .15s}
.lang[open] summary .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:6px;border-radius:16px;background:#fff;box-shadow:0 14px 40px rgba(3,12,60,.22);z-index:20}
.nav .lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;color:var(--ink);font-weight:700;font-size:15px}
.nav .lang-menu a:hover{background:var(--lilac);color:var(--ink)}
.lang-menu a[aria-current] {color:var(--violet)}
.lang-menu svg{width:16px;height:16px;color:var(--violet)}
.top.light .lang summary{background:var(--lilac);color:var(--ink)}
.top.light .lang summary:hover{background:var(--lilac-2)}
@media (max-width:640px){.top .wrap{height:80px}.brand img{height:52px}.nav a.opt{display:none}}

/* ───────────── Fondos azules de la marca, con los destellos del icono */
.sky{position:relative;color:#fff;isolation:isolate;overflow:hidden;
  background:radial-gradient(90% 70% at 15% 0%,var(--sky) 0%,rgba(90,171,255,0) 60%),
             radial-gradient(70% 60% at 100% 100%,#0A2B9A 0%,rgba(10,43,154,0) 70%),
             linear-gradient(165deg,#3D86FF 0%,var(--blue) 38%,var(--blue-deep) 100%)}
.sparkles{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sparkles svg{position:absolute;fill:#fff}
.sparkles .g{fill:var(--gold)}
@media (max-width:640px){.home-sky>.sparkles{display:none}}

/* ═════════════ INICIO ═════════════ */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center;
  padding-top:clamp(20px,5vw,56px);padding-bottom:clamp(56px,8vw,104px)}
.hero h1{font-size:clamp(40px,5.6vw,76px);letter-spacing:-.04em;line-height:.98}
.hero h1 .line{display:block}
.hero .sub{margin-top:22px;max-width:30em;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:#E6EEFF}
.hero .stores{margin-top:32px}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.hero .facts li{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:14px;font-weight:700;color:#F2F6FF}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;text-align:left}.hero .phone-stage{order:2}}

/* El teléfono con una pregunta jugable (la misma pantalla que la app) */
.phone-stage{position:relative;display:flex;justify-content:center}
.phone-stage::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;top:8%;
  background:radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,0) 68%);z-index:-1}
/* El teléfono: la pantalla de preguntas de la app a escala (1 unidad de la app = 100cqw/1080, textos ×0,88) */
.phone{width:min(340px,82vw);border-radius:52px;padding:11px;background:#0A1240;
  box-shadow:0 0 0 2px rgba(255,255,255,.18) inset,0 40px 80px rgba(3,12,60,.55),0 10px 24px rgba(3,12,60,.35);transform:rotate(2deg)}
.screen{position:relative;aspect-ratio:1080/2400;border-radius:42px;background:#fff;color:var(--ink);overflow:hidden;container-type:inline-size;user-select:none;-webkit-user-select:none}
.screen .island{position:absolute;top:3.2cqw;left:50%;width:30cqw;height:8.6cqw;margin-left:-15cqw;border-radius:5cqw;background:#0A1240;z-index:3}
.q-top{position:absolute;left:4.07cqw;right:4.07cqw;top:calc(12.4cqw + 1.85cqw);height:12cqw;display:flex;align-items:center;gap:3.33cqw}
.q-x{width:11.5cqw;height:11.5cqw;flex:none;border-radius:3.4cqw;border:.28cqw solid #E4DFF6;display:grid;place-items:center;color:var(--ink)}
.q-x svg{width:5cqw;height:5cqw}
.q-prog{flex:1;min-width:0}
.q-prog small{display:block;font-size:2.93cqw;line-height:1.2;color:var(--ink-2);font-weight:700}
.q-segs{display:flex;gap:1.11cqw;margin-top:1.48cqw}
.q-segs i{flex:1;height:1.11cqw;border-radius:.56cqw;background:#ECE8F8;transition:background .2s}
.q-segs i.now{background:var(--violet)}.q-segs i.ok{background:var(--mint)}.q-segs i.bad{background:var(--red)}
.q-total{width:18.5cqw;text-align:right;line-height:1}
.q-total b{display:block;font-size:5.4cqw;font-weight:800;font-variant-numeric:tabular-nums}
.q-total small{display:block;margin-top:.3cqw;font-size:2.77cqw;color:var(--ink-2);font-weight:700}
.q-stage{position:absolute;left:4.07cqw;right:4.07cqw;top:calc(12.4cqw + 25cqw);bottom:6.5cqw;display:flex;flex-direction:column}
.q-clock{display:flex;align-items:flex-end;height:20.4cqw}
.q-sec{display:flex;align-items:baseline;gap:1.85cqw;line-height:.78}
.q-sec b{font-size:24.4cqw;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:color .2s}
.q-sec small{font-size:5.2cqw;font-weight:800;color:var(--ink-2)}
.q-sec.low b{color:var(--red)}
.q-live{margin-left:auto;text-align:right;line-height:1;padding-bottom:.6cqw}
.q-live small{display:block;font-size:3.1cqw;font-weight:800;color:var(--ink-2)}
.q-live b{display:block;margin-top:.6cqw;font-size:9.8cqw;font-weight:800;letter-spacing:-.03em;color:var(--violet);font-variant-numeric:tabular-nums}
.q-live b.min{color:#F29A00}.q-live b.zero{color:var(--ink-3)}
.q-live b.punch{animation:punch .2s ease-out}
@keyframes punch{50%{transform:scale(1.12)}}
.q-bar{position:relative;height:1.67cqw;margin-top:2.22cqw;border-radius:.83cqw;background:#ECE8F8;overflow:hidden}
.q-bar i{position:absolute;inset:0;border-radius:.83cqw;background:var(--violet);transform-origin:left;transition:background-color .2s}
.q-bar i.warn{background:#F29A00}.q-bar i.low{background:var(--red)}
.q-block{padding-top:4.07cqw;display:flex;flex-direction:column;gap:4.81cqw}
.q-head{position:relative;display:flex;flex-direction:column;gap:2.4cqw}
.q-head.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-1.5cqw)}40%{transform:translateX(1.5cqw)}60%{transform:translateX(-1cqw)}80%{transform:translateX(.6cqw)}}
.q-cat{display:flex;align-items:center;gap:1.85cqw;height:7.4cqw;font-size:3.1cqw;font-weight:800;color:#2673D1;letter-spacing:.01em}
.q-cat img{width:7cqw;height:7cqw}
.q-text{font-size:6.84cqw;font-weight:800;line-height:1.18;letter-spacing:-.015em;min-height:2.36em;transition:opacity .25s}
.q-float{position:absolute;left:0;right:0;top:40%;text-align:center;font-size:7.3cqw;font-weight:800;color:var(--red);opacity:0;pointer-events:none}
.q-float.go{animation:floatup 1.1s ease-out}
@keyframes floatup{0%{opacity:0;transform:translateY(2cqw) scale(.9)}20%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-6cqw)}}
.q-answers{display:flex;flex-direction:column;gap:2.6cqw;margin:0;padding:0;list-style:none}
.q-answers button{position:relative;display:flex;align-items:center;width:100%;height:15.9cqw;padding:0 2.8cqw;border-radius:4.8cqw;
  border:.28cqw solid #E4DFF6;background:#fff;color:var(--ink);font:800 4.4cqw/1.1 Manrope,system-ui,sans-serif;text-align:left;cursor:pointer;
  transition:opacity .15s,transform .15s,background .15s;-webkit-tap-highlight-color:transparent}
.q-answers button[disabled]{cursor:default}
.q-answers button:not([disabled]):hover{background:#FBFAFF}
.q-answers button:not([disabled]):active{transform:scale(.98)}
.q-answers .k{position:absolute;left:2.8cqw;top:50%;width:8cqw;height:8cqw;margin-top:-4cqw;border-radius:2.4cqw;background:#F1EDFF;display:grid;place-items:center;font-size:3.26cqw;color:var(--ink)}
.q-answers .t{margin-left:11.7cqw;margin-right:10cqw}
.q-answers button.dim{opacity:.45}
.q-answers button.ok{background:linear-gradient(180deg,#5BE8AB,#12AE70);border-color:transparent;color:#fff;opacity:1}
.q-answers button.bad{background:linear-gradient(180deg,#FF8199,#E8385A);border-color:transparent;color:#fff;opacity:.9}
.q-answers button.ok,.q-answers button.bad{animation:pop .3s ease-out}
.q-answers button.bad{animation:shake .4s}
@keyframes pop{50%{transform:scale(1.03)}}
.q-answers .mark{position:absolute;right:3.5cqw;top:50%;width:7.8cqw;height:7.8cqw;margin-top:-3.9cqw;border-radius:50%;background:#fff;display:grid;place-items:center;animation:popin .35s ease-out}
.q-answers .mark svg{width:5cqw;height:5cqw}
@keyframes popin{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.q-answers .gain{position:absolute;right:14cqw;top:-7cqw;font-size:7.3cqw;font-weight:800;color:var(--mint);animation:floatup 1.1s ease-out forwards;pointer-events:none}
.q-start{position:absolute;inset:auto 0 0 0;top:46%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;padding:0 8cqw;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%);z-index:2}
.q-start .btn{min-height:13cqw;padding:0 9cqw;font-size:4.6cqw;border-radius:3.9cqw}
.q-start p{font-size:3.4cqw;color:var(--ink-2);font-weight:700;max-width:60cqw}
.q-start.hide{display:none}
.q-done{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;padding:12cqw 4cqw 6cqw;background:#fff;text-align:center}
.q-done.show{display:flex;animation:fadein .3s}
@keyframes fadein{from{opacity:0}}
.q-done h3{font-size:3.75cqw;letter-spacing:0}
.q-score{display:flex;align-items:baseline;justify-content:center;gap:1.5cqw;margin-top:1.5cqw}
.q-score b{font-size:12.2cqw;font-weight:800;color:var(--violet);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.q-score small{font-size:3.75cqw;font-weight:800;color:var(--ink-3)}
.q-marks{display:flex;gap:2cqw;justify-content:center;margin-top:3cqw}
.q-marks i{width:8.1cqw;height:8.1cqw;border-radius:50%;display:grid;place-items:center;color:#fff;animation:popin .35s ease-out backwards}
.q-marks i.ok{background:var(--mint)}.q-marks i.bad{background:var(--red)}
.q-marks svg{width:5cqw;height:5cqw}
.q-next{width:100%;margin-top:6cqw;padding:5.9cqw 4.8cqw 4.8cqw;border-radius:5.5cqw;background:#fff;box-shadow:0 1.5cqw 5cqw rgba(36,18,94,.12);display:flex;flex-direction:column;align-items:center;gap:2cqw}
.q-next .chip{padding:1cqw 3.2cqw;border-radius:99px;background:#F1EDFF;color:var(--violet);font-size:3cqw;font-weight:800}
.q-next img{width:21cqw;height:21cqw}
.q-next b{font-size:4.9cqw;font-weight:800}
.q-cat-chip{display:inline-flex;align-items:center;gap:1.1cqw;padding:.9cqw 2.6cqw .9cqw 1.2cqw;border-radius:99px;background:rgba(47,140,255,.13);color:#2673D1;font-size:2.8cqw;font-weight:800}
.q-cat-chip img{width:5cqw;height:5cqw}
.q-next .btn{margin-top:2cqw;min-height:12.2cqw;font-size:4.2cqw;border-radius:3.7cqw}
@media (max-width:900px){.phone{transform:none}}

/* ───────────── Secciones */
.section{padding:clamp(64px,9vw,120px) 0}
.section-head{max-width:720px}
.section-head h2{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.035em}
.section-head p{margin-top:16px;font-size:clamp(17px,1.5vw,19px);color:var(--ink-2);max-width:36em}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center p{margin-left:auto;margin-right:auto}

/* Un día de juego: es una secuencia real, por eso va numerada */
.day-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:56px 0 0;padding:0;list-style:none;counter-reset:step}
.day-steps li{position:relative;padding:26px 22px 26px;border-radius:var(--r-xl);background:var(--lilac)}
.day-steps li::before{counter-increment:step;content:counter(step);position:absolute;top:22px;right:22px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--violet);font-weight:800;font-size:15px}
.day-steps img{width:64px;height:64px}
.day-steps h3{margin-top:18px;font-size:22px;letter-spacing:-.02em}
.day-steps p{margin-top:10px;color:var(--ink-2);font-size:16px}
.day-steps .pts{display:inline-block;margin-top:14px;padding:5px 11px;border-radius:999px;background:#fff;color:var(--violet);font-weight:800;font-size:14px}
.day-steps li.team{background:var(--violet);color:#fff}
.day-steps li.team p{color:#DCD5FF}
.day-steps li.team::before{background:rgba(255,255,255,.16);color:#fff}
.day-steps li.team .pts{background:var(--gold);color:var(--on-gold)}
@media (max-width:1000px){.day-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.day-steps{grid-template-columns:1fr}}

.cats{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;padding:0;list-style:none}
.cats li{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;border:2px solid var(--line);font-weight:700;font-size:15px}
.cats img{width:34px;height:34px}
.cats-note{margin-top:16px;color:var(--ink-2)}

/* Minijuegos: carril horizontal con capturas reales */
.games{background:var(--night);color:#fff;overflow:hidden}
.games .section-head p{color:#B9C8F2}
.games-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.rail-nav{display:flex;gap:10px;flex:none}
.rail-nav button{width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center}
.rail-nav button:hover{background:rgba(255,255,255,.2)}
.rail-nav svg{width:20px;height:20px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,24vw,270px);gap:20px;margin-top:48px;padding:0 var(--gutter) 10px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none;list-style:none}
.rail::-webkit-scrollbar{display:none}
@media (min-width:1224px){.rail{padding-left:calc((100vw - var(--wrap))/2 + var(--gutter));scroll-padding-left:calc((100vw - var(--wrap))/2 + var(--gutter))}}
.rail li{scroll-snap-align:start}
.rail figure{margin:0}
.games .rail{margin-top:40px}
.rail .shot{border-radius:24px;overflow:hidden;aspect-ratio:480/933;background:#14277A;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.rail img{width:100%;height:100%;object-fit:cover}
.rail figcaption{margin-top:16px}
.rail figcaption b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em}
.rail figcaption span{display:block;margin-top:4px;color:#B9C8F2;font-size:15px;line-height:1.45}
@media (max-width:640px){.rail-nav{display:none}}

/* Divisiones: escalera de Bronce III a Leyendas */
.league .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,80px);align-items:center}
.league-rules{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.league-rules li{display:flex;gap:14px;align-items:flex-start;font-size:17px}
.league-rules img{width:40px;height:40px;flex:none}
.league-rules b{display:block;font-weight:800}
.league-rules span{color:var(--ink-2)}
.ladder{display:flex;align-items:stretch;gap:clamp(4px,.8vw,8px);height:clamp(280px,34vw,400px);margin:0;padding:0;list-style:none}
.ladder li{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.ladder .bar{width:100%;border-radius:10px 10px 4px 4px;background:var(--c);height:var(--h);box-shadow:inset 0 -6px 0 rgba(0,0,0,.14)}
.ladder .tier{position:absolute;bottom:calc(var(--h) + 8px);font-size:11px;font-weight:800;color:var(--ink-2);white-space:nowrap}
.ladder .group{position:absolute;top:calc(100% + 10px);left:0;font-size:13px;font-weight:800;color:var(--c);white-space:nowrap}
.ladder li.top .bar{background:linear-gradient(180deg,#FF6FA6,#E0246F)}
.ladder li.top .group{left:auto;right:0}
.ladder li.top img{position:absolute;bottom:calc(var(--h) + 6px);width:clamp(34px,4vw,48px)}
.ladder-wrap{padding-bottom:34px}
@media (max-width:900px){.league .wrap{grid-template-columns:1fr}.ladder .tier{display:none}}
@media (max-width:600px){.ladder li:not(.top):not(:first-child) .group{display:none}}

/* Más formas de jugar */
.more{background:var(--lilac)}
.more-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px;margin-top:48px}
.more-item{border-radius:var(--r-xl);background:#fff;padding:28px;display:flex;flex-direction:column}
.more-item h3{font-size:24px;letter-spacing:-.02em;margin-top:18px}
.more-item p{margin-top:10px;color:var(--ink-2)}
.more-item .icons{display:flex;gap:6px}
.more-item .icons img{width:56px;height:56px}
.more-item.wide{background:var(--blue);color:#fff;background:linear-gradient(160deg,#3D86FF,var(--blue-deep))}
.more-item.wide p{color:#DCE7FF}
.code-chip{display:inline-flex;align-self:flex-start;margin-top:auto;padding:10px 16px;border-radius:12px;background:var(--lilac);color:var(--ink);
  font-weight:800;font-size:20px;letter-spacing:.2em}
.more-item p+.code-chip{margin-top:22px}
@media (max-width:1000px){.more-grid{grid-template-columns:1fr 1fr}.more-item.wide{grid-column:1/-1}}
@media (max-width:620px){.more-grid{grid-template-columns:1fr}}

.final{text-align:center}
.final .wrap{padding-top:clamp(64px,9vw,112px);padding-bottom:clamp(64px,9vw,112px)}
.final img.emblem{width:120px;height:120px;margin:0 auto;filter:drop-shadow(0 18px 30px rgba(3,12,60,.4))}
.final h2{margin-top:26px;font-size:clamp(36px,5vw,64px);letter-spacing:-.04em}
.final p{margin:16px auto 0;max-width:30em;color:#E6EEFF;font-size:19px}
.final .stores{justify-content:center;margin-top:32px}

/* ───────────── Pie */
.foot{background:var(--night);color:#B9C8F2;font-size:15px}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;padding-top:36px;padding-bottom:40px}
.foot img{height:36px;width:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto}
.foot a{color:#fff;text-decoration:none;font-weight:700}
.foot a:hover{text-decoration:underline;color:#fff}
.foot .legal-line{flex-basis:100%;color:#8496CF;font-size:14px}
.foot-light{background:#fff;color:var(--ink-2);border-top:1px solid var(--line)}
.foot-light a{color:var(--ink)}.foot-light a:hover{color:var(--violet)}
.foot-light .legal-line{color:var(--ink-3)}

/* ═════════════ PRENSA ═════════════ */
.press-hero{padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,72px)}
.press-hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:end}
.press-hero h1{font-size:clamp(40px,6vw,72px);letter-spacing:-.04em}
.press-hero p{margin-top:18px;max-width:34em;font-size:19px;color:#E6EEFF}
.press-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.press-hero .icon{justify-self:end;width:min(220px,40vw);height:auto;border-radius:22%;box-shadow:0 30px 60px rgba(3,12,60,.45);transform:rotate(-5deg)}
@media (max-width:800px){.press-hero .wrap{grid-template-columns:1fr}.press-hero .icon{display:none}}
.press-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(32px,5vw,64px);padding:clamp(48px,6vw,80px) 0}
.factsheet{position:sticky;top:24px;align-self:start;border-radius:var(--r-xl);background:var(--lilac);padding:26px}
.factsheet h2{font-size:20px;letter-spacing:-.01em}
.factsheet dl{margin:18px 0 0;display:grid;gap:14px}
.factsheet dt{font-size:13px;font-weight:700;color:var(--ink-2)}
.factsheet dd{margin:2px 0 0;font-weight:800;font-size:16px;overflow-wrap:anywhere}
.press-main>section+section{margin-top:clamp(56px,7vw,88px)}
.press-main h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em}
.press-main .lede{margin-top:10px;color:var(--ink-2);max-width:40em}
.copyblock{position:relative;margin-top:20px;padding:22px 24px;border-radius:var(--r-lg);border:2px solid var(--line)}
.copyblock h3{font-size:15px;color:var(--ink-2);font-weight:700;letter-spacing:0}
.copyblock p{margin-top:8px;max-width:62ch}
.copyblock p+p{margin-top:12px}
.copyblock .btn-ghost{position:absolute;top:14px;right:14px}
@media (min-width:641px){.copyblock{padding-right:100px}}
@media (max-width:640px){.copyblock .btn-ghost{position:static;margin-top:14px}}
.features{margin:20px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.features li{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--r-md);background:var(--lilac)}
.features img{width:36px;height:36px;flex:none}
@media (max-width:640px){.features{grid-template-columns:1fr}}
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:24px}
.asset{border-radius:var(--r-lg);border:2px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.asset .pv{display:grid;place-items:center;aspect-ratio:16/10;padding:22px;background:#fff}
.asset .pv img{max-height:100%;width:auto;object-fit:contain}
.asset .pv.blue{background:linear-gradient(160deg,#3D86FF,var(--blue-deep))}
.asset .pv.dark{background:#0A0F2C}
.asset .pv.check{background:conic-gradient(#F1F0F6 25%,#fff 0 50%,#F1F0F6 0 75%,#fff 0) 0 0/20px 20px}
.asset .meta{padding:14px 16px;border-top:2px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.asset .meta b{font-size:15px;flex-basis:100%}
.dl{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;background:var(--lilac);font-size:13px;font-weight:800;text-decoration:none}
.dl:hover{background:var(--lilac-2)}
.dl svg{width:14px;height:14px}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:24px}
.shots a{display:block;border-radius:18px;overflow:hidden;aspect-ratio:9/20;background:var(--lilac);position:relative}
.shots img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.shots a:hover img{transform:scale(1.03)}
.shots a span{position:absolute;left:8px;bottom:8px;padding:4px 9px;border-radius:8px;background:rgba(10,15,44,.75);color:#fff;font-size:12px;font-weight:700}
.trailer{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;align-items:center;margin-top:24px}
.trailer video{width:100%;aspect-ratio:9/16;border-radius:24px;background:#0A0F2C;object-fit:cover}
.trailer p{color:var(--ink-2)}
.trailer .btn{margin-top:18px}
@media (max-width:700px){.trailer{grid-template-columns:1fr}.trailer video{max-width:320px}}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:24px}
.swatch{border-radius:var(--r-md);overflow:hidden;border:2px solid var(--line)}
.swatch i{display:block;height:84px;background:var(--c)}
.swatch div{padding:10px 12px;font-size:14px}
.swatch b{display:block}
.swatch code{font:700 13px/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--ink-2)}
.note{margin-top:20px;padding:16px 18px;border-radius:var(--r-md);background:var(--lilac);color:var(--ink-2);font-size:15px;max-width:62ch}
@media (max-width:900px){.press-body{grid-template-columns:1fr}.factsheet{position:static}}

/* ═════════════ INVITACIÓN ═════════════ */
.page-sky{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.invite{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px var(--gutter) 48px}
.invite-inner{width:100%;max-width:440px}
.invite .lead{text-align:center;font-size:17px;font-weight:700;color:#E6EEFF}
.team-card{position:relative;margin-top:16px;border-radius:var(--r-xl);background:#fff;color:var(--ink);text-align:center;padding:30px 22px 26px;
  box-shadow:0 10px 0 rgba(3,12,60,.18),0 30px 60px rgba(3,12,60,.35)}
.team-card .shield{width:76px;height:76px;margin:0 auto}
.team-card h1{margin-top:12px;font-size:clamp(26px,7vw,32px);letter-spacing:-.03em;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--lilac);font-size:14px;font-weight:700;color:var(--ink-2)}
.chips img{width:18px;height:auto;border-radius:3px}
.team-card .label{margin-top:24px;font-size:14px;font-weight:700;color:var(--ink-2)}
.code{display:inline-block;max-width:100%;margin-top:8px;padding:12px 16px 12px calc(16px + .2em);border-radius:var(--r-md);background:var(--lilac);
  font-size:clamp(28px,9vw,38px);font-weight:800;letter-spacing:.2em;font-variant-numeric:tabular-nums;color:var(--ink)}
.invite .actions{display:grid;gap:16px;margin-top:28px}
.invite .help{margin-top:22px;text-align:center;font-size:15px;color:#D6E2FF}
.invite .help b{color:#fff}
.invite .msg{margin-top:16px;border-radius:var(--r-xl);background:#fff;color:var(--ink);padding:30px 24px;text-align:center;box-shadow:0 10px 0 rgba(3,12,60,.18)}
.invite .msg img{width:72px;height:72px;margin:0 auto}
.invite .msg h1{margin-top:12px;font-size:26px;letter-spacing:-.02em}
.invite .msg p{margin-top:10px;color:var(--ink-2)}
.invite .msg .stores{justify-content:center;margin-top:20px}
.invite .msg .btn{margin-top:22px}
.top-min .wrap{justify-content:center;height:112px}
.top-min .brand img{height:72px}

/* ═════════════ LEGALES ═════════════ */
.doc-head{background:var(--lilac);padding:clamp(40px,6vw,72px) 0 clamp(32px,5vw,56px)}
.doc-head h1{font-size:clamp(36px,5vw,58px);letter-spacing:-.035em}
.doc-head p{margin-top:12px;color:var(--ink-2)}
.doc{display:grid;grid-template-columns:240px minmax(0,68ch);gap:clamp(32px,6vw,80px);padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(64px,8vw,104px)}
.toc{position:sticky;top:24px;align-self:start;font-size:15px}
.toc b{display:block;font-size:14px;color:var(--ink-2);margin-bottom:10px}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px;counter-reset:t}
.toc a{display:block;padding:7px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:700;line-height:1.3}
.toc a:hover{background:var(--lilac);color:var(--violet)}
.prose{font-size:17px;line-height:1.7;color:#3A2E72}
.prose h2{margin-top:44px;font-size:24px;letter-spacing:-.02em;color:var(--ink);scroll-margin-top:24px}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul{margin:14px 0 0}
.prose ul{padding-left:1.2em}
.prose li{margin-top:8px;padding-left:4px}
.prose li::marker{color:var(--violet)}
.prose b{color:var(--ink);font-weight:800}
@media (max-width:900px){.doc{grid-template-columns:1fr}.toc{display:none}}

/* ═════════════ BORRAR CUENTA ═════════════ */
.account{padding:clamp(40px,6vw,80px) var(--gutter) clamp(64px,8vw,104px);background:var(--lilac);flex:1}
.account-card{max-width:520px;margin:0 auto;background:#fff;border-radius:var(--r-xl);padding:clamp(24px,5vw,40px);box-shadow:var(--shadow)}
.account-card .ic{width:64px;height:64px}
.account-card h1{margin-top:16px;font-size:clamp(28px,5vw,36px);letter-spacing:-.03em}
.account-card>p{margin-top:12px;color:var(--ink-2)}
.account-card .alt{margin-top:18px;padding:14px 16px;border-radius:var(--r-md);background:var(--lilac);font-size:15px;color:var(--ink-2)}
.account-card .alt b{color:var(--ink)}
.form{display:grid;gap:16px;margin-top:26px}
.field label{display:block;font-weight:800;font-size:15px}
.field input{display:block;width:100%;margin-top:7px;height:54px;padding:0 16px;border-radius:14px;border:2px solid var(--line);background:#fff;
  font:700 17px Manrope,system-ui,sans-serif;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(74,43,234,.15)}
.field small{display:block;margin-top:6px;color:var(--ink-2);font-size:14px}
.form .btn{margin-top:8px}
.alert{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding:14px 16px;border-radius:var(--r-md);background:#FFE8ED;color:#A3163F;font-weight:700;font-size:15px}
.done-card{text-align:center}
.done-card .ic{margin:0 auto}
.page-light{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.page-light main{flex:1}