/* 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. */
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 { cursor: pointer; }
input, 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; } }

/* ── 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);
  border-radius: 18px; padding: 26px; background: color-mix(in srgb, var(--ignite) 8%, var(--cream));
}
@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; } }
.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); }
/* 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 (40 paletas del PDF v2) — aplican al admin y a la landing ===== */
: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-03-solarized-dark"]{--ignite:#268BD2;--ember:#CB4B16;--flare:#859900;--ink:#93A1A1;--ink-2:#93A1A1;--night:#002B36;--bone:#002B36;--cream:#073642;--steel:#839496;--line:#0A3A44;--accent-ink:var(--night);}
:root[data-theme="dark-04-gruvbox-dark"]{--ignite:#458588;--ember:#D65D0E;--flare:#98971A;--ink:#EBDBB2;--ink-2:#EBDBB2;--night:#282828;--bone:#282828;--cream:#3C3836;--steel:#A89984;--line:#504945;--accent-ink:#fff;}
:root[data-theme="dark-05-catppuccin-mocha"]{--ignite:#CBA6F7;--ember:#FAB387;--flare:#94E2D5;--ink:#CDD6F4;--ink-2:#CDD6F4;--night:#1E1E2E;--bone:#1E1E2E;--cream:#313244;--steel:#9399B2;--line:#45475A;--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-07-one-dark-pro"]{--ignite:#61AFEF;--ember:#D19A66;--flare:#98C379;--ink:#ABB2BF;--ink-2:#ABB2BF;--night:#282C34;--bone:#282C34;--cream:#2C313A;--steel:#5C6370;--line:#3E4451;--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-09-ayu-dark"]{--ignite:#59C2FF;--ember:#FF8F40;--flare:#C2D94C;--ink:#B3B1AD;--ink-2:#B3B1AD;--night:#0A0E14;--bone:#0A0E14;--cream:#131721;--steel:#626A73;--line:#1B222D;--accent-ink:var(--night);}
:root[data-theme="dark-10-night-owl"]{--ignite:#82AAFF;--ember:#F78C6C;--flare:#22DA6E;--ink:#D6DEEB;--ink-2:#D6DEEB;--night:#011627;--bone:#011627;--cream:#0B2942;--steel:#637777;--line:#1D3B53;--accent-ink:var(--night);}
:root[data-theme="dark-11-horizon"]{--ignite:#26BBD9;--ember:#E95678;--flare:#29D398;--ink:#E0E0E0;--ink-2:#E0E0E0;--night:#1C1E26;--bone:#1C1E26;--cream:#232530;--steel:#6C6F93;--line:#2E303E;--accent-ink:var(--night);}
:root[data-theme="dark-12-palenight"]{--ignite:#82AAFF;--ember:#F78C6C;--flare:#C3E88D;--ink:#A6ACCD;--ink-2:#A6ACCD;--night:#292D3E;--bone:#292D3E;--cream:#32374D;--steel:#676E95;--line:#3A3F58;--accent-ink:var(--night);}
:root[data-theme="dark-13-kanagawa"]{--ignite:#7E9CD8;--ember:#FFA066;--flare:#6A9589;--ink:#DCD7BA;--ink-2:#DCD7BA;--night:#1F1F28;--bone:#1F1F28;--cream:#2A2A37;--steel:#727169;--line:#363646;--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="dark-15-rose-pine"]{--ignite:#9CCFD8;--ember:#EB6F92;--flare:#F6C177;--ink:#E0DEF4;--ink-2:#E0DEF4;--night:#191724;--bone:#191724;--cream:#1F1D2E;--steel:#6E6A86;--line:#26233A;--accent-ink:var(--night);}
:root[data-theme="dark-16-cobalt2"]{--ignite:#0088FF;--ember:#FFC600;--flare:#38C5D9;--ink:#FFFFFF;--ink-2:#FFFFFF;--night:#193549;--bone:#193549;--cream:#1F435C;--steel:#9DB4C4;--line:#2A4E68;--accent-ink:var(--night);}
:root[data-theme="dark-17-synthwave-84"]{--ignite:#36F9F6;--ember:#FF7EDB;--flare:#FEDE5D;--ink:#F4EEE4;--ink-2:#F4EEE4;--night:#262335;--bone:#262335;--cream:#2A2139;--steel:#848BBD;--line:#34294F;--accent-ink:var(--night);}
:root[data-theme="dark-18-oceanic-next"]{--ignite:#6699CC;--ember:#F99157;--flare:#99C794;--ink:#C0C5CE;--ink-2:#C0C5CE;--night:#1B2B34;--bone:#1B2B34;--cream:#22333D;--steel:#65737E;--line:#2C3F4B;--accent-ink:var(--night);}
:root[data-theme="dark-19-nightfox"]{--ignite:#719CD6;--ember:#F4A261;--flare:#81B29A;--ink:#CDCECF;--ink-2:#CDCECF;--night:#192330;--bone:#192330;--cream:#212E3F;--steel:#71839B;--line:#29394F;--accent-ink:var(--night);}
:root[data-theme="dark-20-iceberg-dark"]{--ignite:#84A0C6;--ember:#E2A478;--flare:#B4BE82;--ink:#C6C8D1;--ink-2:#C6C8D1;--night:#161821;--bone:#161821;--cream:#1E212B;--steel:#6B7089;--line:#272B37;--accent-ink:var(--night);}
:root[data-theme="light-01-solarized-light"]{--ignite:#268BD2;--ember:#CB4B16;--flare:#859900;--ink:#586E75;--ink-2:#586E75;--night:#586E75;--bone:#FDF6E3;--cream:#FFFFFF;--steel:#657B83;--line:#EEE8D5;--accent-ink:#fff;}
:root[data-theme="light-02-gruvbox-light"]{--ignite:#076678;--ember:#AF3A03;--flare:#79740E;--ink:#3C3836;--ink-2:#3C3836;--night:#3C3836;--bone:#FBF1C7;--cream:#FFFFFF;--steel:#7C6F64;--line:#EBDBB2;--accent-ink:#fff;}
:root[data-theme="light-03-catppuccin-latte"]{--ignite:#1E66F5;--ember:#FE640B;--flare:#40A02B;--ink:#4C4F69;--ink-2:#4C4F69;--night:#4C4F69;--bone:#EFF1F5;--cream:#FFFFFF;--steel:#8C8FA1;--line:#CCD0DA;--accent-ink:#fff;}
:root[data-theme="light-04-rose-pine-dawn"]{--ignite:#286983;--ember:#B4637A;--flare:#EA9D34;--ink:#575279;--ink-2:#575279;--night:#575279;--bone:#FAF4ED;--cream:#FFFAF3;--steel:#9893A5;--line:#F2E9E1;--accent-ink:#fff;}
:root[data-theme="light-05-everforest-light"]{--ignite:#3A94C5;--ember:#F57D26;--flare:#8DA101;--ink:#5C6A72;--ink-2:#5C6A72;--night:#5C6A72;--bone:#FFFBEF;--cream:#FFFFFF;--steel:#939F91;--line:#EFEBD4;--accent-ink:#fff;}
:root[data-theme="light-06-ayu-light"]{--ignite:#399EE6;--ember:#FA8D3E;--flare:#86B300;--ink:#5C6166;--ink-2:#5C6166;--night:#5C6166;--bone:#FAFAFA;--cream:#FFFFFF;--steel:#8A9199;--line:#E7E8E9;--accent-ink:#fff;}
:root[data-theme="light-07-one-light"]{--ignite:#4078F2;--ember:#E45649;--flare:#50A14F;--ink:#383A42;--ink-2:#383A42;--night:#383A42;--bone:#FAFAFA;--cream:#FFFFFF;--steel:#A0A1A7;--line:#E5E5E6;--accent-ink:#fff;}
: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-10-ios-sistema"]{--ignite:#5856D6;--ember:#FF9500;--flare:#34C759;--ink:#1C1C1E;--ink-2:#1C1C1E;--night:#1C1C1E;--bone:#F2F2F7;--cream:#FFFFFF;--steel:#8E8E93;--line:#E5E5EA;--accent-ink:#fff;}
:root[data-theme="light-11-radix-colors"]{--ignite:#5B5BD6;--ember:#E93D82;--flare:#29A383;--ink:#21201C;--ink-2:#21201C;--night:#21201C;--bone:#F9F9F8;--cream:#FFFFFF;--steel:#797874;--line:#E9E8E6;--accent-ink:#fff;}
:root[data-theme="light-12-ant-design"]{--ignite:#1677FF;--ember:#FA8C16;--flare:#52C41A;--ink:#262626;--ink-2:#262626;--night:#262626;--bone:#F5F5F5;--cream:#FFFFFF;--steel:#8C8C8C;--line:#D9D9D9;--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-14-linear"]{--ignite:#1D1D1F;--ember:#5E6AD2;--flare:#8A8F98;--ink:#1D1D1F;--ink-2:#1D1D1F;--night:#1D1D1F;--bone:#FBFBFD;--cream:#FFFFFF;--steel:#6B6F76;--line:#E4E4E7;--accent-ink:#fff;}
:root[data-theme="light-15-notion"]{--ignite:#37352F;--ember:#2383E2;--flare:#0F7B6C;--ink:#37352F;--ink-2:#37352F;--night:#37352F;--bone:#FFFFFF;--cream:#F7F6F3;--steel:#9B9A97;--line:#EBEAE8;--accent-ink:#fff;}
:root[data-theme="light-16-stripe"]{--ignite:#0A2540;--ember:#635BFF;--flare:#24B47E;--ink:#0A2540;--ink-2:#0A2540;--night:#0A2540;--bone:#F6F9FC;--cream:#FFFFFF;--steel:#425466;--line:#E3E8EE;--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-18-airbnb"]{--ignite:#222222;--ember:#FF385C;--flare:#00A699;--ink:#222222;--ink-2:#222222;--night:#222222;--bone:#FFFFFF;--cream:#F7F7F7;--steel:#717171;--line:#EBEBEB;--accent-ink:#fff;}
:root[data-theme="light-19-spotify-light"]{--ignite:#191414;--ember:#1DB954;--flare:#1E3264;--ink:#191414;--ink-2:#191414;--night:#191414;--bone:#F7F7F7;--cream:#FFFFFF;--steel:#6A6A6A;--line:#E0E0E0;--accent-ink:#fff;}
: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; }