/* ============================================================
   STREAMLY — TEMA CLARO "RED BULL" (white + navy + red + yellow)
   Fondo blanco premium, navy como color de marca, rojo en CTAs,
   amarillo en highlights. Tipografía: Barlow Condensed (titulares,
   estilo sport), Inter (cuerpo). Look limpio, energético, premium.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@500;600;700;800;900&display=swap');

/* ── PALETA BRAND ─────────────────────────────────────────── */
:root {
  /* — Colores semánticos — */
  --navy:          #3671C6;   /* azul plataforma — texto/headings/marca */
  --navy-deep:     #00153a;   /* navy más profundo (footer, secciones inv) */
  --accent-red:    #E30613;   /* Red Bull red — CTAs, primary, alerts */
  --accent-yellow: #FFD400;   /* Red Bull yellow — highlights, ranking */
  --accent-blue:   #3E72BC;   /* azul brillante secundario */
  --success:       #00A878;   /* verde sobrio */
  --bg:            #FFFFFF;    /* fondo principal blanco */
  --bg-soft:       #F4F6FA;    /* gris muy claro (secciones alternas) */
  --bg-card:       #FFFFFF;    /* tarjetas */
  --text-main:     #0E1A2B;    /* texto principal (navy casi negro) */
  --text-dim:      #5a6678;    /* texto secundario gris-azulado */
  --text-mute:     #8a93a3;    /* texto terciario */
  --border-soft:   #E2E7F0;    /* bordes claros */
  --border-strong: #c8d0de;

  /* — Aliases legacy (el HTML usa estos nombres; los remapeamos) — */
  --pacman:    var(--accent-yellow);
  --blinky:    var(--accent-red);
  --inky:      var(--navy);          /* "inky" ahora = navy (era cyan) */
  --pinky:     #c026d3;
  --clyde:     var(--accent-yellow);
  --scared:    var(--navy);
  --nes-green: var(--success);
  --nes-sky:   var(--accent-blue);
  --nes-brick: #C77C3A;
  --white:     #FFFFFF;
  --dark:      var(--bg);            /* "dark" ahora = blanco (flip de tema) */
  --dark2:     var(--bg-card);
  --maze-blue: var(--border-strong);

  /* Sombras suaves (reemplazan los glows del tema dark) */
  --glow-pac:   0 2px 8px rgba(227,6,19,0.12);
  --glow-red:   0 2px 10px rgba(227,6,19,0.20);
  --glow-blue:  0 2px 10px rgba(0,30,80,0.12);
  --glow-pink:  0 2px 10px rgba(192,38,211,0.15);
  --glow-green: 0 2px 10px rgba(0,168,120,0.15);
  --glow-maze:  0 1px 4px rgba(0,0,0,0.06);

  --shadow-card:  0 1px 3px rgba(14,26,43,0.06), 0 4px 16px rgba(14,26,43,0.06);
  --shadow-hover: 0 4px 12px rgba(14,26,43,0.10), 0 12px 32px rgba(14,26,43,0.12);
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── BODY — fondo blanco premium ──────────────────────────── */
body {
  background: var(--bg);
  font-family: 'Fira Code', 'Courier New', monospace;
  color: var(--text-main);
  overflow-x: hidden;
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Sin scanlines ni flicker en tema claro */

/* ── TIPOGRAFÍA ───────────────────────────────────────────── */
/* Titulares: Barlow Condensed (estilo deportivo Red Bull) en navy */
h1, h2, h3,
.section-h, .hero h1, .step-title, .feat-title,
.discord-title, .plan-name-tag, .refund-title,
.stat-num, .footer-logo, .card-name {
  font-family: 'Press Start 2P', monospace !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
  color: var(--navy);
  letter-spacing: 0 !important;
}

/* El logo conserva un toque pixel (identidad), pero compacto */
.nav-logo {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 14px !important;
  color: var(--navy) !important;
  letter-spacing: 3px !important;
  text-shadow: none !important;
}

/* Botones → fuente pixel (Press Start 2P) */
.btn-primary, .btn-ghost, .btn-lg,
.plan-cta, .discord-btn, .social-link {
  font-family: 'Press Start 2P', monospace !important;
}

/* Links del nav → fuente pixel */
.nav-link {
  font-family: 'Press Start 2P', monospace !important;
}

/* Tags / labels chicos con Fira Code */
.section-tag, .hero-tag, .step-num,
.lang-sel, .footer-link, .footer-copy {
  font-family: 'Fira Code', monospace !important;
}
.card-badge { font-family: 'Press Start 2P', monospace !important; }

p, li, .step-desc, .feat-desc, .section-sub,
.plan-tagline, .refund-text, .discord-desc,
.stat-label, .typing-line, .plan-feats li {
  font-family: 'Fira Code', monospace !important;
  line-height: 1.7;
  color: var(--text-dim);
}

/* ── NAV — barra navy (Red Bull) ──────────────────────────── */
nav {
  background: #000000 !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 2px 20px rgba(0,21,58,0.25);
}
.nav-logo { color: #fff !important; }      /* logo blanco sobre navy */
.logo-dot {
  background: var(--accent-red) !important;
  border-radius: 50% !important;
  width: 10px !important;
  height: 10px !important;
  box-shadow: none !important;
  animation: none !important;
}
.nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  text-shadow: none !important;
  transition: color 0.15s;
}
.nav-link:hover { color: var(--accent-yellow) !important; text-shadow: none !important; }
.nav-link::before { content: '' !important; }

/* Botón secundario (Iniciar sesión) — outline blanco sobre navy */
.btn-ghost {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: all 0.15s;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
}

/* Selector de idioma sobre navy */
.lang-sel {
  background: rgba(255,255,255,0.10) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  font-weight: 600 !important;
}
/* Las opciones del dropdown van sobre fondo blanco del menú nativo →
   texto navy para que se lean (sino blanco sobre blanco). */
.lang-sel option {
  color: var(--navy) !important;
  background: #fff !important;
}

/* Botón primario (Empezar gratis) — ROJO Red Bull */
.btn-primary {
  font-size: 9px !important;
  font-weight: 700 !important;
  background: var(--accent-red) !important;
  color: #000 !important;
  border-radius: 0 !important;
  border: 1.5px solid var(--accent-red) !important;
  box-shadow: 0 4px 14px rgba(227,6,19,0.30) !important;
  text-shadow: none !important;
  transition: all 0.18s;
  padding: 10px 20px;
}
.btn-primary:hover {
  background: #00E676 !important;
  color: #fff !important;
  border-color: #00E676 !important;
  box-shadow: 0 0 12px #00E676, 0 0 28px rgba(0,230,118,0.6) !important;
  transform: translateY(-1px) !important;
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero { padding: 90px 40px 70px; position: relative; background: var(--bg); }
.hero-bg-glow {
  background: radial-gradient(ellipse, rgba(227,6,19,0.06) 0%, transparent 70%) !important;
}
.hero-badge {
  background: rgba(255,212,0,0.14) !important;
  border: 1px solid rgba(255,212,0,0.55) !important;
  border-radius: 0 !important;
  color: #8a6200 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}
.badge-pulse {
  background: var(--accent-red) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgba(227,6,19,0.18) !important;
  animation: badgeBlink 1.1s steps(1, end) infinite !important;
}
@keyframes badgeBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}
.hero-tag {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--accent-red) !important;
  letter-spacing: 3px !important;
  text-shadow: none !important;
}
.hero h1 {
  font-size: clamp(22px, 4vw, 44px) !important;
  color: var(--navy) !important;
  text-shadow: none !important;
  letter-spacing: 2px !important;
  line-height: 1.7 !important;
  font-weight: 800 !important;
}
/* "stream" estilo letrero neón: relleno blanco-rosado + contorno rojo nítido + glow rojo */
.hero h1 .blue {
  color: #ffdede !important;
  -webkit-text-fill-color: #ffdede !important;
  -webkit-text-stroke: 1px #E30613 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  text-shadow:
    0 0 5px #ff4d4d,
    0 0 11px #E30613,
    0 0 20px #E30613,
    0 0 34px #b00009,
    0 0 52px #8a0008 !important;
}
.hero h1 .red    { color: var(--accent-red) !important; text-shadow: none !important; }
.hero h1 .green  { color: var(--success) !important; text-shadow: none !important; }
.hero h1 .purple { color: var(--accent-red) !important; text-shadow: none !important; }
.hero h1 .silver { color: var(--text-dim) !important; }
/* highlight tipo "subrayado amarillo Red Bull" */
.hero h1 .rainbow {
  color: var(--navy) !important;
  animation: none !important;
  background: linear-gradient(transparent 70%, rgba(255,212,0,0.6) 0);
  padding: 0 4px;
}

.typing-line {
  font-family: 'Fira Code', monospace !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  text-shadow: none !important;
  position: relative !important;
  z-index: 3 !important;
}
.typing-line::before { content: '' !important; }
.cursor {
  background: var(--accent-red) !important;
  border-radius:0 !important;
  width: 3px !important;
  height: 20px !important;
  box-shadow: none !important;
}
.hero p {
  font-family: 'Fira Code', monospace !important;
  color: var(--text-dim) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

/* Botones grandes del hero */
.btn-lg {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.18s !important;
  text-shadow: none !important;
}
.btn-lg.blue {                       /* primario → rojo */
  background: var(--accent-red) !important;
  color: #000 !important;
  border: 1.5px solid var(--accent-red) !important;
  box-shadow: 0 4px 14px rgba(227,6,19,0.30) !important;
}
.btn-lg.blue:hover {
  background: #00E676 !important; color: #fff !important;
  border-color: #00E676 !important;
  box-shadow: 0 0 12px #00E676, 0 0 28px rgba(0,230,118,0.6) !important;
  transform: translateY(-1px) !important;
}
.btn-lg.outline {                    /* secundario → outline navy */
  background: transparent !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--border-strong) !important;
  box-shadow: none !important;
}
.btn-lg.outline:hover {
  background: var(--bg-soft) !important; color: var(--navy) !important;
  border-color: var(--navy) !important; box-shadow: none !important;
  transform: translateY(-1px) !important;
}

/* ── GAME PREVIEW ─────────────────────────────────────────── */
.game-preview::before {
  background: linear-gradient(135deg, #000000, transparent, rgba(255,212,0,0.2)) !important;
}
.game-frame {
  border: 1px solid var(--border-strong) !important;
  border-radius:0 !important;
  background: #000000 !important;
  box-shadow: var(--shadow-card);
}
.titlebar-url {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  background: var(--bg-soft) !important;
  border-radius:0 !important;
  font-family: 'Fira Code', monospace !important;
}
.game-name-a { font-size: 16px !important; color: var(--accent-red) !important; text-shadow: none !important; }
.game-name-b { font-size: 16px !important; color: var(--accent-blue) !important; text-shadow: none !important; }
.game-fill {
  background: linear-gradient(90deg, var(--accent-yellow), var(--accent-red)) !important;
  box-shadow: none !important;
}
.game-divider { background: var(--accent-yellow) !important; box-shadow: none !important; }
.scanlines { background: none !important; }

/* ── STATS — strip NAVY invertido (estilo Red Bull) ───────── */
.stats-row {
  border-top: none !important;
  border-bottom: none !important;
  background: #000000 !important;
  box-shadow: none !important;
}
.stat-num {
  color: var(--accent-yellow) !important;
  text-shadow: none !important;
  font-size: clamp(20px, 3vw, 34px) !important;
  font-weight: 900 !important;
}
.stat-num.silver { color: #fff !important; text-shadow: none !important; }
.stat-label {
  font-family: 'Fira Code', monospace !important;
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px;
}
.stat-label::before { content: '' !important; }
.stat-divider { background: rgba(255,255,255,0.18) !important; }

/* ── SECCIÓN TAGS ─────────────────────────────────────────── */
.section-tag {
  background: rgba(227,6,19,0.08) !important;
  color: var(--accent-red) !important;
  border: 1px solid rgba(227,6,19,0.25) !important;
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}
.section-tag.silver {
  background: rgba(0,30,80,0.06) !important;
  color: var(--navy) !important;
  border-color: rgba(0,30,80,0.18) !important;
}
.section-tag::before { content: '' !important; }
.section-tag::after  { content: '' !important; }

.section-h {
  font-size: clamp(16px, 3vw, 30px) !important;
  color: var(--navy) !important;
  text-shadow: none !important;
  line-height: 1.7 !important;
  letter-spacing: 1px !important;
  font-weight: 800 !important;
}
.section-h .blue   { color: var(--accent-red) !important; text-shadow: none !important; }
.section-h .red    { color: var(--accent-red) !important; text-shadow: none !important; }
.section-h .green  { color: var(--success) !important; text-shadow: none !important; }
.section-h .purple { color: var(--accent-red) !important; text-shadow: none !important; }
.section-h .orange { color: var(--accent-yellow) !important; text-shadow: none !important; }
.section-h .silver { color: var(--text-dim) !important; }
.section-h .rainbow {
  color: var(--navy) !important; animation: none !important;
  background: linear-gradient(transparent 70%, rgba(255,212,0,0.85) 0);
  padding: 0 4px;
  text-shadow: none !important;
  filter: none !important;
}
.section-sub {
  color: var(--text-dim) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  font-family: 'Fira Code', monospace !important;
}

/* ── Profundidad del fondo: veladura oscura sutil + viñeta (solo sobre el fondo
      texturizado; va detrás del contenido con z-index:-1, no lo ensucia) ── */
/* Capa del relieve (cuadrados) — desenfocada, detrás del velo */
body::after {
  content: '';
  position: fixed;
  inset: -24px;
  z-index: -2;
  pointer-events: none;
  background: url('/patron-cuadros.svg') center center / cover no-repeat;
  filter: blur(2.5px);
}
/* Velo oscuro + viñeta para dar profundidad */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(0,0,0,0.11), rgba(0,0,0,0.11)),
    radial-gradient(ellipse at 50% 35%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.30) 100%);
}

/* ── Resplandor blanco detrás de los títulos/subtítulos que flotan sobre el
      fondo, para que no se pierdan con la textura ── */
/* Subtítulos: texto más pequeño → resplandor más marcado para que se note */
.section-sub {
  text-shadow: 0 0 12px #fff, 0 0 22px #fff, 0 0 38px rgba(255,255,255,0.95), 0 1px 2px #fff !important;
}
/* Chips: cuadro negro, texto amarillo (normal) */
.section-tag, .section-tag.silver {
  background: #000 !important;
  border: 1px solid #000 !important;
  color: #FDD900 !important;
  -webkit-text-fill-color: #FDD900 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* ── PASOS ────────────────────────────────────────────────── */
.steps-grid { gap: 20px !important; }
.step {
  background: #000000 !important;
  border: 1px solid #C0BFBF !important;
  border-radius:0 !important;
  box-shadow: 0 0 16px rgba(54,113,198,0.07) !important;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}
.step::before {
  background: linear-gradient(90deg, transparent, var(--accent-red), transparent) !important;
}
.step:hover {
  background: #000000 !important;
  border-color: var(--accent-yellow) !important;
  box-shadow: 0 0 8px var(--accent-yellow), 0 0 18px rgba(255,212,0,0.45) !important;
  transform: translateY(-3px) !important;
}
.step-num {
  color: var(--accent-red) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}
.step-icon {
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius:0 !important;
  background: rgba(255,255,255,0.05) !important;
}
.step-icon.silver { border-color: rgba(227,6,19,0.3) !important; background: rgba(227,6,19,0.08) !important; }
.step-icon svg { filter: none; }
.step-icon.silver svg { filter: none; }
.step-title {
  font-size: 13px !important;
  color: var(--navy) !important;
  text-shadow: none !important;
  line-height: 1.7 !important;
  font-weight: 800 !important;
}
.step-title span { color: var(--accent-red) !important; }
.step-desc { color: rgba(255,255,255,0.78) !important; font-size: 15px !important; }

/* ── FEATURES ─────────────────────────────────────────────── */
.features-grid { gap: 20px !important; }
.feat {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius:0 !important;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}
.feat::after { background: linear-gradient(90deg, transparent, var(--accent-red), transparent) !important; }
.feat:hover {
  border-color: var(--accent-red) !important;
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-3px) !important;
}
.feat-icon {
  border: 1px solid rgba(0,30,80,0.12) !important;
  border-radius:0 !important;
  background: var(--bg-soft) !important;
}
.feat-icon.silver { border-color: rgba(227,6,19,0.18) !important; background: rgba(227,6,19,0.05) !important; }
.feat-title {
  font-size: 12px !important;
  color: var(--navy) !important;
  text-shadow: none !important;
  line-height: 1.7 !important;
  font-weight: 800 !important;
}
.feat-title span { color: var(--accent-red) !important; }
.feat-desc { color: var(--text-dim) !important; font-size: 15px !important; }

/* ── PLANES ───────────────────────────────────────────────── */
.plans-section {
  background: var(--bg-soft) !important;
}
/* ── PLANES — estilo terminal de la plataforma ───────────── */
.plan-card {
  background: #000000 !important;
  border: 1px solid #C0BFBF !important;
  border-top: 3px solid #C0BFBF !important;
  border-radius: 0 !important;
  box-shadow: 0 0 16px rgba(54,113,198,0.07) !important;
  transition: all 0.15s !important;
}
.plan-card:not(.featured):hover { transform: translateY(-4px) !important; }
/* Premium "especial": al pasar el ratón se eleva, el glow amarillo se intensifica y un destello diagonal la recorre (CSS puro, sin JS = súper ligero) */
.plan-card.featured:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 0 18px #FDD900, 0 0 44px rgba(253,217,0,0.75), 0 16px 44px rgba(0,0,0,0.55) !important;
}
.plan-card.featured::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.28) 50%, transparent 62%) !important;
  background-size: 250% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 220% 0 !important;
  opacity: 0 !important;
  transition: none !important;
}
.plan-card.featured:hover::after {
  opacity: 1 !important;
  background-position: -60% 0 !important;
  transition: background-position 0.85s ease, opacity 0.15s ease !important;
}
/* Solo cuando el ratón está sobre el botón, el plan free se "enciende" en verde (sin tocar el texto blanco) */
.plan-card:not(.featured):has(.plan-cta.outline:hover) {
  border-color: #00E676 !important;
  box-shadow: 0 0 12px #00E676, 0 0 28px rgba(0,230,118,0.55) !important;
}
.plan-card:not(.featured):has(.plan-cta.outline:hover) .plan-price-big[style*="silver"] {
  color: #00E676 !important;
  text-shadow: 0 0 8px #00E676, 0 0 18px rgba(0,230,118,0.55) !important;
}
.plan-card:not(.featured):has(.plan-cta.outline:hover) .plan-tagline { border-bottom-color: rgba(0,230,118,0.5) !important; }
.plan-card:not(.featured):has(.plan-cta.outline:hover) .plan-feats li:not(.off)::before {
  background: #00E676 !important;
  box-shadow: 0 0 8px #00E676, 0 0 18px rgba(0,230,118,0.55) !important;
}
/* Plan destacado → borde amarillo neón */
.plan-card.featured {
  background: #000000 !important;
  border: 2px solid #FDD900 !important;
  border-top: 3px solid #FDD900 !important;
  box-shadow: 0 0 8px #FDD900, 0 0 20px rgba(253,217,0,0.5) !important;
}
.plan-card.featured .plan-tagline { border-bottom-color: rgba(192,191,191,0.4) !important; }

.popular-pill {
  background: #FDD900 !important;
  color: #000000 !important;
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
}
.plan-name-tag {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  color: rgba(255,255,255,0.5) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
}
.plan-name-tag::before { content: '' !important; }
.plan-price-big {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 24px !important;
  color: #FDD900 !important;
  text-shadow: 0 0 8px #FDD900, 0 0 20px rgba(253,217,0,0.5) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}
/* Precio del plan free → rojo */
.plan-price-big[style*="silver"] {
  color: #E30613 !important;
  text-shadow: 0 0 8px #E30613, 0 0 18px rgba(227,6,19,0.45) !important;
}
.plan-price-big span {
  font-family: 'Fira Code', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.4) !important;
  text-shadow: none !important;
}
.plan-tagline {
  color: #FFFFFF !important;
  font-size: 11px !important;
  border-bottom: 1px solid #C0BFBF !important;
}
.plan-feats li { color: #FFFFFF !important; font-size: 11px !important; }
.plan-feats li svg { display: none !important; }
.plan-feats li::before {
  content: '' !important;
  width: 6px; height: 6px;
  border-radius: 0;
  background: #FDD900;
  box-shadow: 0 0 8px #FDD900, 0 0 18px rgba(253,217,0,0.45);
  flex-shrink: 0;
}
/* Puntos del plan free → rojo */
.plan-card:not(.featured) .plan-feats li::before {
  background: #E30613;
  box-shadow: 0 0 8px #E30613, 0 0 18px rgba(227,6,19,0.40);
}
.plan-feats li.off { color: rgba(255,255,255,0.2) !important; }
.plan-feats li.off::before { background: rgba(255,255,255,0.1) !important; box-shadow: none !important; }
.plan-cta {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
  border-radius: 0 !important;
  transition: all 0.2s !important;
}
/* CTA premium → amarillo (como pay-btn.purple de la plataforma) */
.plan-cta.blue, .plan-cta.gold {
  background: #FDD900 !important;
  color: #000000 !important;
  border: 1px solid #FDD900 !important;
  box-shadow: 0 0 8px #FDD900, 0 0 20px rgba(253,217,0,0.5) !important;
  text-shadow: none !important;
}
.plan-cta.blue:hover, .plan-cta.gold:hover {
  background: #FDD900 !important; color: #000000 !important;
  border-color: #FDD900 !important;
  box-shadow: 0 0 16px #FDD900, 0 0 32px rgba(253,217,0,0.6) !important;
}
/* CTA free → rojo */
.plan-cta.outline {
  background: #E30613 !important;
  color: #000 !important;
  border: 1px solid #E30613 !important;
  box-shadow: 0 0 8px #E30613, 0 0 18px rgba(227,6,19,0.45) !important;
  text-shadow: none !important;
}
.plan-cta.outline:hover {
  background: #00E676 !important; color: #fff !important;
  border-color: #00E676 !important;
  box-shadow: 0 0 16px #00E676, 0 0 32px rgba(0,230,118,0.6) !important;
}
.refund-box {
  background: var(--bg-card) !important;
  border-left: 3px solid var(--accent-yellow) !important;
  border-radius:0 !important;
  box-shadow: var(--shadow-card);
}
.refund-title {
  font-size: 10px !important;
  color: var(--navy) !important;
  text-shadow: none !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}
.refund-text { color: var(--text-dim) !important; font-size: 14px !important; }

/* ── COMUNIDAD ────────────────────────────────────────────── */
.discord-card {
  background: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius:0 !important;
  box-shadow: 0 12px 40px rgba(0,30,80,0.25);
}
.discord-glow { display: none !important; }
.discord-icon { border-radius:0 !important; box-shadow: none !important; background: transparent !important; }
.discord-title {
  font-size: clamp(13px, 2vw, 20px) !important;
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}
.discord-desc { color: rgba(255,255,255,0.78) !important; font-size: 16px !important; }
.discord-btn {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.15s !important;
  background: var(--accent-red) !important;
  color: #000 !important;
  border: 1.5px solid var(--accent-red) !important;
  box-shadow: 0 4px 14px rgba(227,6,19,0.35) !important;
  text-shadow: none !important;
}
.discord-btn:hover {
  transform: translateY(-1px) !important;
  background: #00E676 !important; color: #fff !important;
  border-color: #00E676 !important;
  box-shadow: 0 0 12px #00E676, 0 0 28px rgba(0,230,118,0.6) !important;
}
.social-link {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: all 0.15s !important;
}
.social-link:hover {
  background: rgba(255,255,255,0.12) !important; color: #fff !important;
  border-color: #fff !important; box-shadow: none !important;
}

/* ── LINKS GENERALES ──────────────────────────────────────── */
a { color: var(--accent-red); text-decoration: none; transition: color 0.15s; }
a:hover { color: #B80510; text-shadow: none; }

/* ── FOOTER ───────────────────────────────────────────────── */
footer {
  background: #000000 !important;
  border-top: none !important;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-logo {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 12px !important;
  color: #fff !important;
  text-shadow: none !important;
  letter-spacing: 3px !important;
}
.footer-link {
  color: rgba(255,255,255,0.75) !important;
  font-family: 'Fira Code', monospace !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color 0.15s !important;
}
.footer-link:hover { color: #fff !important; text-shadow: none !important; }
.footer-copy {
  font-size: 12px !important;
  color: rgba(255,255,255,0.55) !important;
  font-family: 'Fira Code', monospace !important;
  letter-spacing: 0.5px !important;
  text-shadow: none !important;
}

/* ── SCROLL ANIMATIONS ────────────────────────────────────── */
.reveal, .reveal-left, .reveal-right { opacity: 0; transition: all 0.6s ease !important; }
.reveal.visible       { opacity: 1; transform: translateY(0) !important; }
.reveal-left.visible  { opacity: 1; transform: translateX(0) !important; }
.reveal-right.visible { opacity: 1; transform: translateX(0) !important; }

/* ── PARTÍCULAS & SCROLLBAR ───────────────────────────────── */
#particles-canvas { opacity: 0.25 !important; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius:0; }
::-webkit-scrollbar-thumb:hover { background: #000000; box-shadow: none; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {
  nav { padding: 14px 20px !important; }
  .nav-links { display: none; }
  .hero { padding: 70px 20px 50px !important; }
  .hero h1 { font-size: clamp(34px, 9vw, 52px) !important; }
  .stats-row { gap: 24px !important; padding: 40px 20px !important; }
  .section { padding: 60px 20px !important; }
  .steps-grid    { grid-template-columns: 1fr !important; }
  .features-grid { grid-template-columns: 1fr !important; }
  .plans-grid    { grid-template-columns: 1fr !important; }
  .plans-section { padding: 60px 20px !important; }
  .community     { padding: 60px 20px !important; }
  footer { padding: 30px 20px !important; flex-direction: column; align-items: flex-start; }
  .section-h { font-size: clamp(26px, 7vw, 38px) !important; }
  .hero-btns { flex-direction: column; align-items: center; }
  .discord-card { padding: 32px 20px !important; }
  .discord-title { font-size: 24px !important; }
  .stat-num { font-size: 32px !important; }
}

@media (max-width: 600px) {
  .nav-right { gap: 6px; }
  .btn-primary { font-size: 12px !important; padding: 8px 14px !important; }
  .btn-lg { font-size: 13px !important; padding: 12px 20px !important; }
  .hero h1 { font-size: clamp(28px, 9vw, 40px) !important; }
  .plan-price-big { font-size: 40px !important; }
  .discord-title { font-size: 20px !important; }
}