/* ============================================
   VANTS — Capa de diseño premium
   Se carga después de style.css. Solo afecta a la presentación:
   no cambia lógica, rutas, auth ni pagos.
   ============================================ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --premium-line: linear-gradient(90deg, transparent, var(--color-primary) 50%, transparent);
  --premium-card: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 100%, transparent) 0%, var(--color-surface-offset) 100%);
  --elite-a: #ff4655;
  --elite-b: #ffb547;
}
[data-theme='light'] {
  --premium-card: linear-gradient(180deg, #ffffff 0%, var(--color-surface-2) 100%);
}

/* Grano sutil en toda la página: textura de "producción" */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme='light'] body::before { opacity: 0.025; }

/* ---------- Header de cristal ---------- */
.header {
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: color-mix(in srgb, var(--color-border) 60%, transparent);
  transition: background var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
}
.header.is-scrolled {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  border-bottom-color: var(--color-border);
}
.logo svg { transition: transform var(--transition-slow); }
.logo:hover svg { transform: rotate(-8deg) scale(1.06); }
.nav-item { position: relative; }
.nav-item.active { text-shadow: 0 0 18px var(--color-primary-glow); }

/* ---------- Botones ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 88%, #fff) 0%, var(--color-primary) 55%, var(--color-primary-hover) 100%);
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out-expo);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn .btn-arrow { transition: transform var(--transition-interactive); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Hero cinematográfico ---------- */
.valorant-hero {
  /* El escenario es siempre oscuro, en ambos temas */
  --color-text: #f3efe8;
  --color-text-muted: #b4bcb6;
  min-height: min(92vh, 960px);
  padding: calc(var(--space-32) + var(--space-4)) var(--space-4) var(--space-24);
  background: #0b131b;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: -4% 0 0 0;
  z-index: -2;
  background: url('./assets/hero-arena.jpg') center 40% / cover no-repeat;
  transform: scale(1.06);
  animation: heroDrift 18s var(--ease-out-expo) both;
}
.hero-media::after {
  /* viñeta + fundido inferior hacia el fondo de la página */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(11, 19, 27, 0.35) 0%, rgba(11, 19, 27, 0.82) 70%, #0b131b 100%),
    linear-gradient(180deg, rgba(11, 19, 27, 0.6) 0%, transparent 30%, transparent 60%, var(--color-bg) 100%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
}
.valorant-hero::before {
  width: 1100px;
  height: 1100px;
  background: radial-gradient(circle, rgba(255, 70, 85, 0.22) 0%, transparent 55%);
  z-index: -1;
  animation: heroPulse 7s ease-in-out infinite;
}
.valorant-hero h1 {
  font-size: clamp(3.4rem, 1rem + 11vw, 10rem);
  letter-spacing: -0.01em;
  line-height: 0.86;
  background: linear-gradient(180deg, #ffffff 0%, #f3efe8 45%, #a9a49b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.6));
}
.valorant-hero h1 .hero-accent {
  background: linear-gradient(180deg, #ff7a85 0%, #ff4655 55%, #c22a3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.valorant-hero .hero-tagline { color: var(--color-text-muted); }
.hero-badge {
  background: rgba(255, 70, 85, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ff8a93;
}
.hero-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-10);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 239, 232, 0.55);
}
.hero-meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-meta span::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  transform: rotate(45deg);
}
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-8);
  z-index: 1;
  width: 22px;
  height: 36px;
  margin-left: -11px;
  border: 1.5px solid rgba(243, 239, 232, 0.35);
  border-radius: 12px;
}
.hero-scroll::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--color-primary);
  animation: scrollCue 1.8s ease-in-out infinite;
}

/* Entrada escalonada del hero */
.valorant-hero > .hero-badge,
.valorant-hero > h1,
.valorant-hero > .hero-tagline,
.valorant-hero > .hero-cta,
.valorant-hero > .hero-meta {
  animation: heroIn 900ms var(--ease-out-expo) both;
}
.valorant-hero > h1 { animation-delay: 80ms; }
.valorant-hero > .hero-tagline { animation-delay: 180ms; }
.valorant-hero > .hero-cta { animation-delay: 280ms; }
.valorant-hero > .hero-meta { animation-delay: 380ms; }

/* ---------- Cinta de juegos (marquee) ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: var(--space-4) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-10);
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-faint);
}
.marquee-item:nth-child(odd) { color: transparent; -webkit-text-stroke: 1px var(--color-border-strong); }
.marquee-item::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  transform: rotate(45deg);
}

/* ---------- Stats ---------- */
.stats-strip {
  background:
    radial-gradient(ellipse 50% 120% at 0% 50%, rgba(255, 70, 85, 0.06), transparent 60%),
    var(--color-surface);
}
.stat-num {
  font-size: var(--text-2xl);
  line-height: 1;
  background: linear-gradient(180deg, var(--color-text) 30%, var(--color-text-muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label { margin-top: var(--space-2); letter-spacing: 0.12em; }
.stats-strip > div:not(:last-child) { position: relative; padding-left: var(--space-4); }
.stats-strip > div:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-primary), transparent);
}

/* ---------- Encabezados de sección ---------- */
.valorant-section .section-header h2,
.banner-content h2 {
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem);
  letter-spacing: 0.04em;
  line-height: 1;
}
.valorant-section .section-header h2::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 auto var(--space-5);
  background: var(--color-primary);
  box-shadow: 0 0 16px var(--color-primary-glow);
}
.section-head h2 { letter-spacing: 0.06em; }
.section-lead { color: var(--color-text-muted); }

/* Títulos de páginas internas */
.content > h1:first-child {
  font-size: clamp(2.25rem, 1.2rem + 3vw, 3.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ---------- Tarjetas: superficie, foco con cursor y elevación ---------- */
.pricing-card,
.login-method-card,
.dash-card,
.ranking-row,
.rank-tile,
.player-card,
.empty-state {
  background: var(--premium-card);
}
.pricing-card,
.login-method-card,
.dash-card,
.rank-tile,
.player-card {
  position: relative;
  transition: transform 450ms var(--ease-out-expo), border-color var(--transition-interactive), background var(--transition-interactive);
}
.pricing-card::after,
.login-method-card::after,
.dash-card::after,
.player-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease-out-expo);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 70, 85, 0.12), transparent 45%);
}
.pricing-card:hover::after,
.login-method-card:hover::after,
.dash-card:hover::after,
.player-card:hover::after { opacity: 1; }
.login-method-card:hover,
.dash-card:hover,
.player-card:hover { transform: translateY(-4px); }
.login-method-icon {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: border-color var(--transition-interactive);
}
.login-method-card:hover .login-method-icon { border-color: var(--color-primary); }
.login-method-icon svg { width: 24px; height: 24px; }

/* Rangos: cada tile brilla con su color */
.rank-tile {
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rank) 14%, transparent), transparent 70%),
    var(--premium-card);
  cursor: default;
}
.rank-tile:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--rank) 55%, var(--color-border));
}
.rank-emblem { transition: transform 450ms var(--ease-out-expo), filter 450ms var(--ease-out-expo); }
.rank-tile:hover .rank-emblem {
  transform: scale(1.12);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rank) 70%, transparent));
}

/* Estados vacíos más cuidados */
.empty-state {
  border-style: solid;
  border-color: var(--color-border);
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(255, 70, 85, 0.07), transparent 70%),
    var(--premium-card);
}
.empty-state > svg,
.empty-state .empty-icon {
  filter: drop-shadow(0 0 12px var(--color-primary-glow));
}

/* ---------- Precios ---------- */
.pricing-grid { align-items: stretch; gap: var(--space-5); }
.pricing-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6) var(--space-6);
}
.pricing-card:hover { transform: translateY(-6px); }
.pricing-card .pricing-features { flex: 1; }
.pricing-badge {
  top: 0;
  left: auto;
  right: var(--space-6);
  transform: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.pricing-tier-name { font-size: var(--text-xl); letter-spacing: 0.01em; }
.pricing-price-num {
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.pricing-features li::before {
  content: '';
  width: 14px;
  height: 14px;
  margin-top: 0.3em;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* PRO: destacado */
.pricing-featured {
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 70, 85, 0.18), transparent 70%),
    var(--premium-card);
}
/* ELITE: acabado carmesí-ámbar */
.pricing-elite {
  border-color: color-mix(in srgb, var(--elite-b) 45%, var(--color-border));
  box-shadow: none;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 181, 71, 0.14), transparent 70%),
    var(--premium-card);
}
.pricing-elite::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--elite-a), var(--elite-b), var(--elite-a));
  background-size: 200% 100%;
  animation: eliteSheen 6s linear infinite;
}
.pricing-elite .pricing-price-num,
.pricing-elite .pricing-tier-name {
  background: linear-gradient(100deg, #ffd59a 0%, var(--elite-b) 40%, var(--elite-a) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pricing-elite .pricing-tier-tag { color: var(--elite-b); }
.pricing-elite .pricing-features li::before { background: var(--elite-b); }
.pricing-badge-elite { background: linear-gradient(90deg, var(--elite-a), var(--elite-b)); color: #1a0f05; }
.pricing-elite:hover { border-color: var(--elite-b); }
.pricing-elite .pricing-btn:hover { border-color: var(--elite-b); color: var(--elite-b); }
/* Nota bajo los planes: centrada de verdad */
.pricing-note, .pricing-note-dim {
  margin-inline: auto;
  text-align: center;
  color: var(--color-text-muted);
}

/* ---------- Banner Discord ---------- */
.valorant-banner {
  background: #0b131b;
  isolation: isolate;
  --color-text: #f3efe8;
  --color-text-muted: #b4bcb6;
}
.valorant-banner::before {
  z-index: -1;
  background:
    linear-gradient(90deg, #0b131b 0%, rgba(11, 19, 27, 0.75) 45%, rgba(11, 19, 27, 0.75) 55%, #0b131b 100%),
    linear-gradient(180deg, #0b131b 0%, transparent 25%, transparent 75%, #0b131b 100%),
    url('./assets/banner-setup.jpg') center / cover no-repeat;
}
.valorant-banner::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--premium-line);
}

/* ---------- Leaderboard ---------- */
.ranking-row { transition: transform 350ms var(--ease-out-expo), border-color var(--transition-interactive); }
.ranking-row:hover { transform: translateX(4px); }

/* ---------- Login ---------- */
.login-page {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(255, 70, 85, 0.1), transparent 70%),
    var(--premium-card);
  box-shadow: var(--shadow-lg);
}
.login-form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
  outline: none;
}

/* ---------- Footer ---------- */
.footer { position: relative; }
.footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--premium-line);
  opacity: 0.6;
}
.footer a { transition: color var(--transition-interactive); }
.footer-col a:hover { color: var(--color-primary); }

/* ---------- Aparición al hacer scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Animaciones ---------- */
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroDrift { from { transform: scale(1.14); } to { transform: scale(1.06); } }
@keyframes heroPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
@keyframes scrollCue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes eliteSheen { to { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .hero-media { animation: none; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .valorant-hero { min-height: 80vh; padding-top: var(--space-24); }
  .hero-grid { background-size: 44px 44px; }
}
@media (max-width: 640px) {
  .valorant-hero { min-height: 78vh; padding: var(--space-20) var(--space-4) var(--space-20); }
  .valorant-hero h1 { font-size: clamp(3rem, 0.5rem + 15vw, 5rem); }
  .hero-meta { gap: var(--space-2) var(--space-4); font-size: 10px; letter-spacing: 0.12em; }
  .hero-scroll { display: none; }
  .marquee-item { font-size: var(--text-base); gap: var(--space-6); }
  .marquee-track { gap: var(--space-6); }
  .stats-strip > div:not(:last-child)::before { display: none; }
  .stats-strip > div:not(:last-child) { padding-left: 0; }
  .pricing-card { padding: var(--space-8) var(--space-5) var(--space-5); }
}

/* ---------- Ajustes finos ---------- */
.stats-strip { align-items: start; }
.stats-strip > :last-child { align-self: center; }
.footer-bottom, .footer-bottom p { text-align: center; margin-inline: auto; }
/* ELITE en tema claro: degradado más oscuro para mantener contraste */
[data-theme='light'] .pricing-elite .pricing-price-num,
[data-theme='light'] .pricing-elite .pricing-tier-name {
  background-image: linear-gradient(100deg, #b45309 0%, #c2410c 50%, #be123c 100%);
}
[data-theme='light'] .pricing-elite .pricing-tier-tag { color: #b45309; }
[data-theme='light'] .pricing-elite .pricing-features li::before { background: #b45309; }

/* ============================================
   Rangos premium y marca (v2)
   ============================================ */
.logo img, .footer-logo img { width: 30px; height: 30px; display: block; transition: transform var(--transition-slow), filter var(--transition-slow); }
.logo:hover img { transform: rotate(-6deg) scale(1.06); filter: drop-shadow(0 0 10px rgba(255, 13, 46, .45)); }

.ranks-strip { gap: var(--space-3); }
.rank-tile {
  --rank-glow: color-mix(in srgb, var(--rank) 40%, transparent);
  overflow: hidden;
  gap: 6px;
  padding: var(--space-6) var(--space-2) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--rank) 22%, var(--color-border));
  border-bottom: 2px solid var(--rank);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  background:
    radial-gradient(90% 60% at 50% 32%, color-mix(in srgb, var(--rank) 20%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--rank) 6%, var(--color-surface)) 0%, var(--color-surface-offset) 100%);
}
.rank-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 900ms var(--ease-out-expo);
}
.rank-tile:hover::before { transform: translateX(130%); }
.rank-tile:hover { box-shadow: 0 18px 40px -18px var(--rank-glow); }
.rank-tier {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: color-mix(in srgb, var(--rank) 75%, var(--color-text-muted));
}
.rank-emblem { width: clamp(64px, 7vw, 96px); height: clamp(64px, 7vw, 96px); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.rank-emblem .rank-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rank-tile:hover .rank-emblem { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 0 18px var(--rank-glow)) drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.rank-name { font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text); }
.rank-min { color: color-mix(in srgb, var(--rank) 45%, var(--color-text-muted)); }

.rank-tile-elite .rank-emblem { animation: rank-float 5s ease-in-out infinite; }
.rank-tile-apex {
  border-color: color-mix(in srgb, #f2b843 45%, var(--rank));
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(255, 59, 78, .28), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(242, 184, 67, .16), transparent 70%),
    linear-gradient(180deg, #1d0a0e 0%, var(--color-surface-offset) 100%);
}
.rank-tile-apex .rank-name {
  background: linear-gradient(180deg, #fff3c4, #f2b843 60%, #c27a1a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rank-tile-apex::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: conic-gradient(from var(--apex-angle, 0deg), transparent 0 70%, rgba(242, 184, 67, .55) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  animation: apex-spin 6s linear infinite;
}
@property --apex-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes apex-spin { to { --apex-angle: 360deg; } }
@keyframes rank-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* Insignia de rango en listas y perfiles */
.rank-badge { padding: 3px 10px 3px 6px; gap: 6px; background: color-mix(in srgb, var(--rank) 10%, transparent); }
.rank-badge-emblem { width: 18px; height: 18px; flex: none; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }

[data-theme='light'] .rank-tile { background: radial-gradient(90% 60% at 50% 32%, color-mix(in srgb, var(--rank) 16%, transparent), transparent 70%), #fff; }
[data-theme='light'] .rank-tile-apex { background: radial-gradient(90% 70% at 50% 30%, rgba(255, 59, 78, .22), transparent 70%), #1d0a0e; }
[data-theme='light'] .rank-tile-apex .rank-min { color: #f0b8bd; }

@media (max-width: 900px) {
  .ranks-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
  .ranks-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rank-tile-elite .rank-emblem, .rank-tile-apex::after { animation: none; }
}

/* ============================================
   Acceso premium (Google · Discord · Steam) y cuenta
   ============================================ */
.login-page {
  position: relative;
  max-width: 480px;
  border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(255, 13, 46, .16), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 92%, #000) 0%, var(--color-surface-offset) 100%);
}
.login-page::before {
  content: '';
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-5);
  background: url('./assets/brand/vants-mark.svg') center / contain no-repeat;
  filter: drop-shadow(0 8px 22px rgba(255, 13, 46, .35));
}
.login-page h1 { letter-spacing: -.01em; }
.login-methods { gap: 10px; }
.login-btn {
  position: relative;
  overflow: hidden;
  justify-content: flex-start;
  padding: 14px 18px;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  font-weight: 700;
  letter-spacing: .01em;
}
.login-btn svg { width: 20px; height: 20px; flex: none; }
.login-btn::after {
  content: '→';
  margin-left: auto;
  opacity: .55;
  transition: transform var(--transition-interactive), opacity var(--transition-interactive);
}
.login-btn:hover::after { transform: translateX(3px); opacity: 1; }
.login-btn-google { background: #ffffff; border-color: #ffffff; color: #1f1f1f; }
.login-btn-google:hover { background: #f1f3f4; border-color: #f1f3f4; }
.login-btn-steam {
  background: linear-gradient(135deg, #1b2838 0%, #171a21 100%);
  border-color: #2a475e;
  color: #c7d5e0;
}
.login-btn-steam svg { color: #66c0f4; }
.login-btn-steam:hover { background: linear-gradient(135deg, #22344a 0%, #1b2838 100%); border-color: #66c0f4; color: #fff; }
.login-btn-discord:hover { box-shadow: 0 10px 26px -12px rgba(88, 101, 242, .8); }

/* Cuenta */
.account-item { position: relative; }
.account-item .btn-sm { margin-top: var(--space-2); }
.steam-acc { display: inline-flex; align-items: center; gap: 8px; }
.steam-acc img { width: 22px; height: 22px; border-radius: 3px; }
.steam-acc a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, #66c0f4 50%, transparent); }
.perk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.perk-card {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  background: var(--premium-card);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.perk-card h3 { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; margin: 6px 0; }
.perk-card p { font-size: 13px; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.perk-tier { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--color-primary); }
.perk-elite { border-color: color-mix(in srgb, #f2b843 40%, var(--color-border)); }
.perk-elite .perk-tier { color: #f2b843; }