/* Go Sports — sistema de diseño del portal web.
   Marca: naranja Ignite sobre tinta/hueso, display condensado (Anton) + Inter. */
:root {
  --ignite: #F5691F;
  --ember: #D8480B;
  --flare: #F97A2E;
  --ink: #16130F;
  --ink-2: #221C15;
  --night: #120F0B;
  --bone: #FBF7F1;
  --cream: #FFFFFF;
  --steel: #8A817A;
  --line: #ECE3D6;
  --good: #2F8F5B;
  --accent-ink: #fff;
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --ui: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --shadow: 0 24px 60px -20px rgba(20, 12, 4, .35);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ui);
  color: var(--ink);
  background: var(--bone);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Sensación de app: cursor de flecha en toda la página (sin el I-beam del texto).
   Los títulos, el nav y la UI no se seleccionan; el contenido (párrafos, listas,
   tablas) sí se puede seleccionar y copiar. Los campos de formulario conservan
   su cursor de texto. */
/* Cursor de flecha en TODO (sensación de app): forzamos que cada elemento
   herede el cursor, así ningún `cursor:auto` intermedio (p.ej. de terceros como
   Quill) reintroduce el I-beam sobre el texto. Los clicables e inputs lo
   sobrescriben abajo por mayor especificidad. */
*, *::before, *::after { cursor: inherit; }
body { cursor: default; }
h1, h2, h3, h4, h5, .eyebrow, .wordmark, .display, .nav, .footer .links,
.plan .name, .plan .who, .plan .price, .card h4, .section-head, .tag, .pass-tag,
.pass-head, .stats, label, th, .btn, button {
  user-select: none; -webkit-user-select: none;
}
a, button, .btn, .drop-toggle, select, summary, label, [role="button"], [onclick] { cursor: pointer; }
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea { cursor: text; }
/* Los campos de formulario no heredan color: sin esto el navegador usa negro,
   que en temas oscuros desaparece sobre el fondo del campo. */
input, textarea, select { color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--steel); opacity: 1; }

.wrap { width: min(1180px, 92vw); margin-inline: auto; }
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .95;
  text-transform: uppercase;
}
.tilt { display: inline-block; transform: skewX(-6deg); }
.accent { color: var(--ignite); }
.eyebrow {
  font-size: 12.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ignite); font-weight: 700; margin: 0 0 14px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; padding: 13px 22px;
  border-radius: 999px; border: 0; cursor: pointer; transition: .18s ease;
  font-family: var(--ui);
}
.btn-primary { background: var(--ignite); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--ignite) 84%, var(--ink)); transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.btn-ghost:hover { background: rgba(255,255,255,.16); }
.btn-dark { background: var(--ink); color: var(--bone); }
.btn-dark:hover { background: color-mix(in srgb, var(--ink) 82%, var(--bone)); }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }

/* ── Emblem ──────────────────────────────────────────────── */
.emblem { display: block; flex: none; }
.wordmark {
  font-family: var(--display); text-transform: uppercase; letter-spacing: -.01em;
  transform: skewX(-6deg); line-height: .85;
}
.wordmark .go { color: var(--ignite); }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  /* Toma el color del tema (--night, siempre oscuro) con algo de transparencia. */
  background: var(--night);
  background: color-mix(in srgb, var(--night) 82%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 66px; }
.nav .brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.nav .brand .wordmark { font-size: 22px; }
.nav .links { display: flex; gap: 26px; margin-left: 20px; }
.nav .links a { color: rgba(255,255,255,.82); font-size: 14.5px; font-weight: 500; }
.nav .links a:hover { color: #fff; }
.nav .dropdown { position: relative; }
.nav .drop-toggle { cursor: pointer; }
.nav .drop-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  background: #1c1811; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  padding: 8px; min-width: 230px; display: none; box-shadow: var(--shadow); z-index: 60;
}
.nav .dropdown:hover .drop-menu, .nav .dropdown:focus-within .drop-menu { display: block; }
.nav .drop-menu a {
  display: block; padding: 10px 14px; border-radius: 9px; color: rgba(255,255,255,.85);
  font-size: 14px; white-space: nowrap;
}
.nav .drop-menu a:hover { background: color-mix(in srgb, var(--ignite) 16%, transparent); color: #fff; }
.nav .spacer { flex: 1; }
.nav .actions { display: flex; align-items: center; gap: 12px; }
.nav .actions a.login { color: #fff; font-weight: 600; font-size: 14.5px; }
/* Menú móvil (hamburguesa) — el botón y el panel los inyecta nav-mobile.js.
   En escritorio quedan ocultos; solo aparecen <=820px. */
.nav-burger { display: none; margin: 0; padding: 0; width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; }
.nav-burger:hover { background: rgba(255,255,255,.16); }
.nav-burger svg { width: 22px; height: 22px; display: block; transition: transform .18s ease; }
.nav-burger .l1, .nav-burger .l2, .nav-burger .l3 { transition: transform .18s ease, opacity .18s ease; transform-origin: center; }
.nav-burger.open .l1 { transform: translateY(6px) rotate(45deg); }
.nav-burger.open .l2 { opacity: 0; }
.nav-burger.open .l3 { transform: translateY(-6px) rotate(-45deg); }
.nav-mobile { display: none; }
@media (max-width: 820px) {
  .nav .links { display: none; }
  .nav .actions { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-mobile {
    position: fixed; left: 0; right: 0; top: 66px; z-index: 49;
    background: var(--night); border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow); padding: 8px 0 16px;
    max-height: calc(100vh - 66px); overflow-y: auto;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-mobile.open { display: block; transform: none; opacity: 1; pointer-events: auto; }
  .nav-mobile .links-m { display: flex; flex-direction: column; }
  .nav-mobile .links-m a { color: rgba(255,255,255,.86); font-size: 16px; font-weight: 600;
    padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav-mobile .links-m a:hover { background: rgba(255,255,255,.06); color: #fff; }
  .nav-mobile .actions-m { display: flex; flex-direction: column; gap: 10px; padding: 16px 24px 4px; }
  .nav-mobile .actions-m a { width: 100%; justify-content: center; text-align: center; }
  .nav-mobile .actions-m .login { color: #fff; font-weight: 700; padding: 12px;
    border: 1px solid rgba(255,255,255,.22); border-radius: 999px; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(1200px 500px at 78% -10%, color-mix(in srgb, var(--ignite) 28%, transparent), transparent 60%),
    radial-gradient(900px 500px at 0% 120%, color-mix(in srgb, var(--ember) 20%, transparent), transparent 55%),
    var(--night);
  color: #fff; position: relative; overflow: hidden;
}
.hero .wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center;
  padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 8vw, 100px); }
.hero h1 { font-size: clamp(44px, 7vw, 86px); margin: 0 0 20px; text-wrap: balance; }
.hero p.lead { font-size: clamp(16px, 2.2vw, 20px); color: rgba(255,255,255,.82); max-width: 46ch; margin: 0 0 30px; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* Hero apilado: texto arriba, tres pantallas grandes a todo el ancho abajo. */
.hero.stack .wrap { grid-template-columns: 1fr; gap: 0; }
.hero.stack .txt { max-width: 820px; }
.hero.stack .art { margin-top: clamp(30px, 5vw, 56px); }
.hero.stack .trio .phone { width: clamp(196px, 26vw, 316px); }
.hero .stats { display: flex; gap: 30px; margin-top: 38px; }
.hero .stats b { font-family: var(--display); font-size: 30px; display: block; color: #fff; }
.hero .stats span { font-size: 12.5px; color: rgba(255,255,255,.6); letter-spacing: .04em; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero .art { order: -1; } }

/* ── Descarga en tiendas, bajo los teléfonos del hero ──────────────────────
   `.art` es flex horizontal (centra el mockup); en el hero pasa a columna para
   que los badges queden DEBAJO de los teléfonos y no a su lado. */
.hero .art { flex-direction: column; align-items: center; gap: clamp(16px, 2.6vw, 28px); }
.hero-stores { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-stores img { width: auto; display: block; }
/* Las dos alturas NO son iguales a propósito: el asset de Google trae su espacio
   de respeto DENTRO del PNG (192 px de botón en 250 px de imagen, 1.30×), así que
   igualar la altura del archivo dejaba el botón de Play visiblemente más chico
   que el de Apple. Se compensa con ese factor para que los dos se vean del mismo
   tamaño. Los badges son los oficiales de cada tienda y no se deforman ni se
   recolorean. */
.hero-stores .b-apple img { height: clamp(40px, 4.2vw, 48px); }
.hero-stores .b-google img { height: clamp(52px, 5.5vw, 62px); }
.hero-stores a { border-radius: 8px; transition: transform .18s ease, filter .18s ease; }
.hero-stores a:hover { transform: translateY(-2px); filter: brightness(1.1); }
.hero-stores a:focus-visible { outline: 2px solid var(--ignite); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero-stores a:hover { transform: none; } }

/* ── Phone mockup ────────────────────────────────────────── */
.art { display: flex; justify-content: center; position: relative; }
.phone {
  width: min(300px, 74vw); border-radius: 9.5% / 4.6%;
  background: #0b0a08; padding: 2.3%; box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.12); position: relative;
  container-type: inline-size;
}
/* La PANTALLA toma la proporción real de las capturas (todas 0.491 = 640/1304),
   así la imagen se muestra COMPLETA sin recortar ningún lado. La altura del
   teléfono sale de aquí (por eso .phone ya no fija aspect-ratio).
   Bisel concéntrico: radio_interior = radio_exterior − bisel, para grosor
   uniforme en lados y esquinas. Un pequeño padding deja un ESPACIO entre el
   contenido y el bisel, para que el contenido no toque ni se recorte contra el
   marco. La imagen se redondea a sí misma (border-radius sobre el <img>), NO con
   overflow:hidden: ese recorte difumina en alta densidad; así queda nítida. */
.phone .screen { width: 100%; aspect-ratio: 640 / 1304; border-radius: 7.2cqw;
  background: #0b0a08; padding: 6.5cqw 1.3cqw 1.3cqw; }
.phone .screen img { width: 100%; height: 100%; object-fit: contain; object-position: top;
  display: block; border-radius: 6cqw; }
.phone.float { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .phone.float, .duo.float { animation: none; } }

/* Dos pantallas apiladas (modo híbrido: score de campo + boxscore) */
.duo { display: flex; justify-content: center; align-items: center; }
.duo.float { animation: floaty 6s ease-in-out infinite; }
.duo .phone { width: clamp(158px, 21vw, 224px); }
.duo .phone:first-child { transform: rotate(-5deg) translateY(-6px); z-index: 1; }
.duo .phone:last-child { transform: rotate(4deg); margin-left: -50px; z-index: 2;
  box-shadow: -20px 26px 54px -18px rgba(0,0,0,.55); }

/* Tres pantallas inclinadas y flotando, junto al texto. La nitidez se logra
   quitando el recorte con border-radius (ver .phone .screen): sin esa capa de
   recorte, la rotación y la animación ya no difuminan. `will-change` fuerza que
   la capa animada se rasterice a resolución del dispositivo. */
.trio { display: flex; justify-content: center; align-items: center; }
.trio.float { animation: floaty 6.5s ease-in-out infinite; will-change: transform; }
.trio .phone { width: clamp(150px, 17vw, 214px); will-change: transform; }
.trio .phone:nth-child(1) { transform: rotate(-7deg) translateY(8px); z-index: 1; }
.trio .phone:nth-child(2) { z-index: 3; margin: 0 -14px; box-shadow: 0 30px 60px -22px rgba(0,0,0,.6); }
.trio .phone:nth-child(3) { transform: rotate(7deg) translateY(8px); z-index: 1; }
@media (max-width: 560px) { .trio { flex-wrap: wrap; } .trio .phone { width: clamp(128px, 30vw, 168px); } }

/* ── Sections ────────────────────────────────────────────── */
section { padding: clamp(56px, 9vw, 110px) 0; }
.section-head { text-align: center; max-width: 62ch; margin: 0 auto clamp(36px, 5vw, 60px); }
.section-head h2 { font-size: clamp(30px, 4.5vw, 52px); margin: 0 0 14px; text-wrap: balance; }
.section-head p { font-size: 17px; color: var(--steel); margin: 0; }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center;
  padding: clamp(30px, 5vw, 56px) 0; }
.feature.rev .txt { order: 2; }
.feature .txt h3 { font-size: clamp(26px, 3.4vw, 40px); margin: 8px 0 14px; line-height: 1.08; }
.feature .txt p { font-size: 16.5px; color: var(--steel); margin: 0 0 18px; }
.feature ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.feature li { padding-left: 28px; position: relative; font-size: 15px; }
.feature li::before {
  content: "▸"; position: absolute; left: 0; color: var(--ignite); font-weight: 700;
}
@media (max-width: 860px) {
  .feature, .feature.rev { grid-template-columns: 1fr; }
  .feature.rev .txt { order: 0; }
}

/* grid of small features */
.grid-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .grid-feat { grid-template-columns: 1fr; } }
.card {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; transition: .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(20,12,4,.4); }
.card .ico { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--ignite) 15%, var(--cream));
  display: grid; place-items: center; margin-bottom: 14px; }
.card h4 { margin: 0 0 6px; font-size: 18px; }
.card p { margin: 0; color: var(--steel); font-size: 14.5px; }

/* ── Pricing ─────────────────────────────────────────────── */
.dark { background: var(--night); color: #fff; }
/* Sección "feature" en oscuro del tema, teñida con el acento para que NO sea
   igual al panel superior (nav = --night puro). Texto en claro sobre el fondo. */
.feature-dark { background: var(--night); background: color-mix(in srgb, var(--night) 84%, var(--ignite) 16%); color: #fff; }
.feature-dark .feature .txt h3 { color: #fff; }
.feature-dark .feature .txt p { color: rgba(255,255,255,.8); }
.feature-dark .feature li { color: rgba(255,255,255,.92); }
.dark .section-head p { color: rgba(255,255,255,.7); }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 940px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; position: relative;
}
.plan.flag { border-color: var(--ignite); background: color-mix(in srgb, var(--ignite) 10%, transparent); }
.plan .tag { position: absolute; top: -11px; left: 22px; background: var(--ignite); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.plan .name { font-family: var(--display); font-size: 30px; text-transform: uppercase; transform: skewX(-6deg); }
.plan .who { color: rgba(255,255,255,.6); font-size: 12.5px; min-height: 34px; }
.plan .price { font-size: 24px; font-weight: 800; margin: 8px 0 4px; }
.plan .price small { font-size: 13px; color: rgba(255,255,255,.55); font-weight: 500; }
.plan .free { color: #7fe0a6; }
.plan ul { list-style: none; padding: 0; margin: 12px 0 20px; display: grid; gap: 9px; }
.plan li { font-size: 13px; color: rgba(255,255,255,.85); padding-left: 22px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ignite); font-weight: 800; }
.plan .btn { margin-top: auto; }

/* ── Pase de Torneo (dentro de la sección oscura de precios) ── */
.pass-band {
  margin-top: 20px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: center;
  border: 1px dashed color-mix(in srgb, var(--ignite) 50%, transparent);
  /* Tinte transparente sobre el fondo YA oscuro de la sección .dark que lo envuelve
     (mismo criterio que .plan.flag) — no var(--cream): esa es una superficie clara
     que en los temas claros del catálogo queda casi blanca, y el texto de aquí
     abajo está fijo en blanco/rgba(255,255,255,..) porque asume fondo oscuro. */
  border-radius: 18px; padding: 26px; background: color-mix(in srgb, var(--ignite) 8%, transparent);
}
@media (max-width: 760px) { .pass-band { grid-template-columns: 1fr; } }
.pass-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pass-head h3 { margin: 0; font-size: 22px; color: #fff; }
.pass-tag { background: var(--ignite); color: var(--accent-ink); font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.pass-info p { margin: 0 0 12px; color: rgba(255,255,255,.72); font-size: 14.5px; }
.pass-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pass-list li { font-size: 13.5px; color: rgba(255,255,255,.85); padding-left: 22px; position: relative; }
.pass-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ignite); font-weight: 800; }
.pass-prices { display: grid; gap: 10px; }
.pass-chip { display: flex; align-items: baseline; gap: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 12px 16px; }
.pass-chip b { font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.pass-chip span { font-size: 13px; color: rgba(255,255,255,.65); }
.pass-note { font-size: 11.5px; color: rgba(255,255,255,.45); margin-top: 2px; }

/* Plan Institucional: mismo layout que el Pase, tinte "enterprise" (ink) para
   distinguir venta asistida de compra directa. */
.inst-band { border-style: solid; border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04); }
.inst-band .pass-prices .btn { margin: 0; }
.inst-band .pass-prices { gap: 12px; }

/* ── CTA band ────────────────────────────────────────────── */
.cta-band { background: linear-gradient(120deg, var(--ignite), var(--ember)); color: #fff; text-align: center; }
.cta-band h2 { font-size: clamp(30px, 5vw, 56px); margin: 0 0 16px; }
.cta-band p { font-size: 18px; opacity: .95; margin: 0 0 26px; }
.cta-band .btn-primary { background: #fff; color: var(--ember); }
.cta-band .btn-primary:hover { background: var(--ink); color: var(--bone); }

/* ── Footer ──────────────────────────────────────────────── */
.footer { background: var(--night); color: rgba(255,255,255,.6); padding: 50px 0 40px; font-size: 13.5px; }
.footer .wrap { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: center; }
.footer a { color: rgba(255,255,255,.75); }
.footer a:hover { color: #fff; }
.footer .links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ── Auth + Account shells ───────────────────────────────── */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px;
  background: radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--ignite) 20%, transparent), transparent 60%), var(--night); }
.auth-card { width: min(420px, 100%); background: var(--cream); border-radius: 22px; padding: 34px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 24px; margin: 6px 0 6px; }
.auth-card .sub { color: var(--steel); font-size: 14px; margin: 0 0 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--steel); margin-bottom: 6px; }
.field input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px;
  font-size: 15px; font-family: var(--ui); background: var(--bone); }
.field input:focus { outline: 2px solid var(--ignite); border-color: transparent; background: var(--cream); }
.auth-alt { text-align: center; font-size: 13.5px; color: var(--steel); margin-top: 16px; }
.auth-alt a { color: var(--ember); font-weight: 600; }
.msg { font-size: 13.5px; padding: 10px 12px; border-radius: 10px; margin-bottom: 14px; display: none; }
.msg.err { background: #fdecea; color: #b3261e; display: block; }
.msg.ok { background: #e7f5ec; color: #1e7a45; display: block; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--steel); font-size: 12px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.gbtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); font-weight: 600;
  font-size: 14.5px; cursor: pointer; }
.gbtn:hover { background: var(--bone); }

/* Account */
.acct-nav { background: var(--night); color: #fff; }
.acct-nav .wrap { display: flex; align-items: center; height: 64px; gap: 14px; }
.acct-nav .brand { display: flex; align-items: center; gap: 10px; }
.acct-nav .wordmark { font-size: 20px; }
.acct-nav .spacer { flex: 1; }
.acct-nav button.link { background: none; border: 0; color: rgba(255,255,255,.8); cursor: pointer; font-size: 14px; font-family: var(--ui); }
.acct-wrap { width: min(940px, 92vw); margin: 34px auto 80px; }
.acct-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .acct-grid { grid-template-columns: 1fr; } }
/* Rol de AFICIONADO, en una sola columna: el panel Fan primero.
   La columna izquierda (identidad, resumen, historial) va antes en el DOM, así
   que en un teléfono el panel Fan —lo único que un aficionado vino a buscar—
   empezaba a 869 px, una pantalla completa de scroll, incluso ya sin los tres
   paneles de organizador (que estaban todos por DEBAJO y por eso esconderlos no
   lo subía). Con el rol de aficionado la columna derecha solo contiene el panel
   Fan, así que subirla entera es exactamente subir ese panel.
   Solo en una columna: en escritorio las dos caben y el orden ya es correcto. */
@media (max-width: 820px) { .acct-grid.rol-fan > div:last-child { order: -1; } }
.panel { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.panel h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin: 0 0 16px; }
.plan-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 800;
  padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--ember) 14%, var(--cream)); color: var(--ember); font-size: 14px; }
.who-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ignite); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 800; font-size: 20px; }
.kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--steel); }
.buy-list { display: grid; gap: 12px; }
.buy { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.buy .info b { display: block; font-size: 15px; }
.buy .info small { color: var(--steel); }
/* ── Bolsa de juegos: tramos de referencia + cotizador con compra directa ── */
.tiers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tier { display: flex; align-items: baseline; gap: 6px; border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 12px; background: var(--cream); }
.tier b { font-size: 16px; font-weight: 800; color: var(--ink); }
.tier small { color: var(--steel); font-size: 11.5px; }
.quote { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--cream); }
.quote > label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.quote-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quote .q-games { width: 110px; flex: none; }
.quote .q-out { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; }
.quote .q-total { font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.quote .q-unit { font-size: 12px; color: var(--steel); font-variant-numeric: tabular-nums; }
.quote .q-buy { flex: none; }
.quote .q-note { margin: 12px 0 0; font-size: 11.5px; color: var(--steel); }
@media (max-width: 520px) { .quote .q-buy { width: 100%; } }
/* Selector de banda (tamaño de liga) para Pro/Premium en el checkout. */
.bands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.band { font: inherit; font-size: 12px; font-weight: 600; color: var(--steel);
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 11px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.band:hover { border-color: var(--ignite); }
.band.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
table.history { width: 100%; border-collapse: collapse; font-size: 14px; }
.history th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); padding: 8px 10px; }
.history td { padding: 12px 10px; border-top: 1px solid var(--line); }
.history .amt { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pill.paid { background: #e7f5ec; color: #1e7a45; }
.pill.pending { background: #fff3e0; color: #b26a00; }
.empty { color: var(--steel); font-size: 14px; text-align: center; padding: 24px; }
.hidden { display: none !important; }

/* ===== Temas (10 paletas: 5 claras + 5 oscuras) — admin y landing =====
   Se recortó el catálogo de 40 a 10: muchas paletas del set original eran casi
   idénticas entre sí (media docena de azules sobre gris casi blanco), así que
   elegir tema no cambiaba nada visible. Quedan solo las que se distinguen de un
   vistazo por su color base. La MISMA lista vive en portal.css, themes.js,
   theme-default.js y en los <script> de aplicación temprana de login.html,
   resetPassword.html y finishSignup.html: si se toca una, hay que tocarlas todas. */
:root[data-theme="dark-01-nord"]{--ignite:#D8DEE9;--ember:#88C0D0;--flare:#A3BE8C;--ink:#ECEFF4;--ink-2:#ECEFF4;--night:#2E3440;--bone:#2E3440;--cream:#3B4252;--steel:#9AA5B1;--line:#434C5E;--accent-ink:var(--night);}
:root[data-theme="dark-02-dracula"]{--ignite:#BD93F9;--ember:#FF79C6;--flare:#50FA7B;--ink:#F8F8F2;--ink-2:#F8F8F2;--night:#282A36;--bone:#282A36;--cream:#383A59;--steel:#6272A4;--line:#3A3D4D;--accent-ink:var(--night);}
:root[data-theme="dark-06-tokyo-night"]{--ignite:#7AA2F7;--ember:#FF9E64;--flare:#9ECE6A;--ink:#C0CAF5;--ink-2:#C0CAF5;--night:#1A1B26;--bone:#1A1B26;--cream:#1F2335;--steel:#565F89;--line:#292E42;--accent-ink:var(--night);}
:root[data-theme="dark-08-monokai-pro"]{--ignite:#78DCE8;--ember:#FF6188;--flare:#A9DC76;--ink:#FCFCFA;--ink-2:#FCFCFA;--night:#2D2A2E;--bone:#2D2A2E;--cream:#363338;--steel:#939293;--line:#423F42;--accent-ink:var(--night);}
:root[data-theme="dark-14-everforest-dark"]{--ignite:#7FBBB3;--ember:#E69875;--flare:#A7C080;--ink:#D3C6AA;--ink-2:#D3C6AA;--night:#2D353B;--bone:#2D353B;--cream:#374145;--steel:#859289;--line:#475258;--accent-ink:var(--night);}
:root[data-theme="light-08-material-design-3"]{--ignite:#6750A4;--ember:#7D5260;--flare:#625B71;--ink:#1C1B1F;--ink-2:#1C1B1F;--night:#1C1B1F;--bone:#FFFBFE;--cream:#FFFFFF;--steel:#79747E;--line:#E7E0EC;--accent-ink:#fff;}
:root[data-theme="light-09-tailwind-slate"]{--ignite:#334155;--ember:#4F46E5;--flare:#10B981;--ink:#0F172A;--ink-2:#0F172A;--night:#0F172A;--bone:#F8FAFC;--cream:#FFFFFF;--steel:#64748B;--line:#E2E8F0;--accent-ink:#fff;}
:root[data-theme="light-13-chakra-teal"]{--ignite:#2C7A7B;--ember:#DD6B20;--flare:#38A169;--ink:#1A202C;--ink-2:#1A202C;--night:#1A202C;--bone:#F7FAFC;--cream:#FFFFFF;--steel:#718096;--line:#E2E8F0;--accent-ink:#fff;}
:root[data-theme="light-17-duolingo"]{--ignite:#1CB0F6;--ember:#58CC02;--flare:#FF9600;--ink:#3C3C3C;--ink-2:#3C3C3C;--night:#3C3C3C;--bone:#FFFFFF;--cream:#F7F7F7;--steel:#AFAFAF;--line:#E5E5E5;--accent-ink:var(--night);}
:root[data-theme="light-20-headspace"]{--ignite:#0D2149;--ember:#FA8334;--flare:#3BA99C;--ink:#22223B;--ink-2:#22223B;--night:#22223B;--bone:#FFF6EA;--cream:#FFFFFF;--steel:#7A7A8C;--line:#F3E4CC;--accent-ink:#fff;}
/* Selector de tema (botón flotante + menú) para el admin/landing */
.gs-theme-fab { position:fixed; right:16px; bottom:16px; z-index:1200; width:46px; height:46px; border-radius:999px; border:1px solid var(--line); background:var(--cream); color:var(--ink); font-size:20px; cursor:pointer; box-shadow:var(--shadow); display:grid; place-items:center; }
.gs-theme-fab:hover { border-color:var(--ignite); }
.gs-theme-back { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1300; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
.gs-theme-panel { background:var(--cream); color:var(--ink); width:min(720px,96vw); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.gs-theme-panel .hd { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); }
.gs-theme-panel .hd h3 { margin:0; font-size:16px; font-weight:800; }
.gs-theme-panel .hd .x { margin-left:auto; background:transparent; border:0; font-size:20px; color:var(--steel); cursor:pointer; }
.gs-theme-panel .bd { padding:14px 18px 20px; }
.gs-theme-panel .grp { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); font-weight:700; margin:14px 0 8px; }
.gs-theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.gs-theme-opt { text-align:left; background:var(--bone); border:1px solid var(--line); border-radius:11px; padding:9px 10px; cursor:pointer; display:flex; align-items:center; gap:9px; color:var(--ink); font-family:inherit; }
.gs-theme-opt:hover { border-color:var(--ignite); }
.gs-theme-opt.on { border-color:var(--ignite); box-shadow:inset 0 0 0 1px var(--ignite); }
.gs-theme-opt .sw { width:30px; height:30px; border-radius:8px; flex:none; position:relative; border:1px solid rgba(0,0,0,.15); overflow:hidden; }
.gs-theme-opt .sw i { position:absolute; width:50%; height:50%; }
/* Muestra del tema fuera del catálogo (la apariencia dentro de Editar perfil). */
.gs-sw { width:30px; height:30px; border-radius:8px; flex:none; position:relative; border:1px solid rgba(0,0,0,.15); overflow:hidden; display:inline-block; vertical-align:middle; }
.gs-sw i { position:absolute; width:50%; height:50%; }
.gs-theme-opt .nm { font-size:12.5px; font-weight:600; line-height:1.15; }