/* ============================================================
   🌗 NOVUVITAE — SISTEMA COMPLETO DE MODO CLARO
   (Versión compatible con tu código actual)
============================================================ */

/* 🎨 Paleta base (Modo Oscuro por defecto) */
:root {
  --color-primary: #00e6c3;
  --color-secondary: #e6f2f2;

  --color-bg: #0a0a0a;
  --color-bg-2: #011627;
  --color-bg-3: #001a33;

  --color-text: #e6f2f2;
  --color-text-soft: rgba(230, 242, 242, 0.8);

  --color-card: rgba(255, 255, 255, 0.05);
  --color-border: rgba(0, 230, 195, 0.2);
  --color-border-strong: rgba(0, 230, 195, 0.4);
}

/* 🌞 Modo Claro */
body.light {
  --color-bg: #ffffff;
  --color-bg-2: #f2f6f8;
  --color-bg-3: #e8edf0;

  --color-text: #1a1a1a;
  --color-text-soft: rgba(0, 0, 0, 0.6);

  --color-card: rgba(0, 0, 0, 0.05);
  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.3);
}

/* === Fondos basados en gradientes === */
body.light .hero-modern,
body.light .servers-hero-section,
body.light .nvlabs-modern-section,
body.light .contact-modern-section,
body.light .timeline-section,
body.light .team-section,
body.light .discord-hero,
body.light .features-section,
body.light .support-section,
body.light .invite-section,
body.light .join-team-section {
  background: linear-gradient(145deg, var(--color-bg-2), var(--color-bg)) !important;
}

/* === Navbar === */
body.light .navbar-modern {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
body.light .nav-menu a { color: #222 !important; }
body.light .nav-menu a:hover { color: var(--color-primary) !important; }
body.light .nav-menu a.active { color: var(--color-primary) !important; }
body.light .logo-text-nav { color: #222 !important; }

/* Botón de tema */
body.light .theme-toggle-modern {
  background: rgba(0,0,0,0.06) !important;
  border-color: var(--color-border);
  color: var(--color-primary);
}

/* === Textos === */
body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light h5,
body.light h6 {
  color: var(--color-text) !important;
}

body.light p,
body.light span,
body.light li {
  color: var(--color-text-soft) !important;
}

/* === Cards y Glass === */
body.light .service-card,
body.light .stat-card,
body.light .tutorial-card,
body.light .feature-card,
body.light .feature-card-dj,
body.light .join-card,
body.light .contact-card,
body.light .member-card,
body.light .stat-box,
body.light .channel-category,
body.light .testimonial-card {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text);
  backdrop-filter: blur(10px);
}

/* === Botones Outline === */
body.light .btn-hero-secondary,
body.light .btn-cta-secondary,
body.light .btn-dj-secondary,
body.light .btn-join-secondary {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
body.light .btn-dj-secondary:hover,
body.light .btn-join-secondary:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* === Wave SVG === */
body.light .wave-fill {
  fill: #dfe6ea !important;
}

/* === Footer === */
body.light .footer-modern {
  background: #f4f7f8 !important;
  color: #111 !important;
}
body.light .footer-title,
body.light .footer-links a,
body.light .logo-text {
  color: #111 !important;
}
body.light .footer-tagline,
body.light .copyright {
  color: #444 !important;
}


/* ---------------------------------------------------
   🎨 NOVUVITAE GLOBAL STYLES - OPTIMIZED
--------------------------------------------------- */

/* 💡 Variables de color base */
:root {
  --color-primary: #00e6c3;
  --color-secondary: #e6f2f2;
  --color-dark: #011627;
  --color-bg: #0a0a0a;
  --color-bg-light: #ffffff;
  --color-card: rgba(255, 255, 255, 0.05);
  --color-text: #e6f2f2;
}

/* 🌞 Modo claro */
body.light {
  --color-bg: #ffffff;
  --color-text: #1c1c1c;
  --color-card: rgba(0, 0, 0, 0.05);
}

/* 🔧 Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}

/* ---------------------------------------------------
   ⚙️ PRELOADER
--------------------------------------------------- */
#preloader {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #011627 40%, #000 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
  transition: opacity 0.8s ease, transform 1s ease;
}

.loader-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 70px;
  height: 70px;
  border: 5px solid rgba(0,230,195,0.15);
  border-top-color: #00e6c3;
  border-radius: 50%;
  animation: spin 1s linear infinite, glowPulse 1.5s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 10px #00e6c3; }
  50% { box-shadow: 0 0 25px #00e6c3; }
}

#preloader.fade-out {
  opacity: 0;
  transform: scale(1.2);
  pointer-events: none;
}

/* ---------------------------------------------------
   🔹 NAVBAR MODERNO
--------------------------------------------------- */
.navbar-modern {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(1, 22, 39, 0.8);
  backdrop-filter: blur(20px);
  z-index: 1000;
  border-bottom: 1px solid rgba(0, 230, 195, 0.1);
  transition: all 0.3s ease;
}

.navbar-modern.scrolled {
  background: rgba(1, 22, 39, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.navbar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.2rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.navbar-logo:hover {
  transform: scale(1.05);
}

.logo-icon-nav {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #011627;
  font-size: 1.3rem;
  box-shadow: 0 4px 15px rgba(0, 230, 195, 0.4);
}

.logo-text-nav {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.highlight {
  color: #00e6c3;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-menu a {
  position: relative;
  color: #e6f2f2;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.3s ease;
  padding: 0.5rem 0;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #00e6c3;
  transition: width 0.3s ease;
}

.nav-menu a:hover {
  color: #00e6c3;
}

.nav-menu a:hover::after {
  width: 100%;
}

.nav-menu a.active {
  color: #00e6c3;
}

.nav-menu a.active::after {
  width: 100%;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.theme-toggle-modern {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00e6c3;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-toggle-modern:hover {
  background: rgba(0, 230, 195, 0.1);
  border-color: #00e6c3;
  transform: scale(1.1);
}

.nav-cta-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.5rem;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  color: #011627;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 230, 195, 0.3);
}

.nav-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(0, 230, 195, 0.5);
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.mobile-menu-btn span {
  width: 28px;
  height: 3px;
  background: #00e6c3;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translateY(11px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-11px);
}

.scroll-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #00e6c3, #00ffdd);
  width: 0%;
  transition: width 0.1s ease;
}

/* ---------------------------------------------------
   💫 HERO SECTION MODERNO
--------------------------------------------------- */
.hero-modern {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 2rem 4rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #011627 0%, #001a33 50%, #011627 100%);
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.3;
  animation: float 20s infinite ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #00e6c3, transparent);
  top: -200px;
  right: -200px;
  animation-delay: 0s;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #00b8a0, transparent);
  bottom: -150px;
  left: -150px;
  animation-delay: 5s;
}

.orb-3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #0099ff, transparent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 10s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(50px, -50px); }
  66% { transform: translate(-50px, 50px); }
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle, rgba(0, 230, 195, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 1;
  opacity: 0.3;
}

.hero-container {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.hero-logo-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-glow {
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, rgba(0, 230, 195, 0.3), transparent 70%);
  border-radius: 50%;
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.5; }
}

.hero-logo-modern {
  width: 600px;
  height: 300px;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(0, 230, 195, 0.6));
  position: relative;
  z-index: 2;
}

@keyframes float-logo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.logo-ring {
  position: absolute;
  inset: -20px;
  border: 2px solid rgba(0, 230, 195, 0.3);
  border-radius: 50%;
  animation: rotate-ring 20s linear infinite;
}

@keyframes rotate-ring {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-text {
  max-width: 800px;
}

.hero-title {
  font-size: 4rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  letter-spacing: 1px;
}

.gradient-text {
  background: linear-gradient(135deg, #00e6c3, #00ffdd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(0, 230, 195, 0.5);
}

.hero-subtitle {
  font-size: 1.3rem;
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
}

.hero-features {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.feature-badge {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 230, 195, 0.3);
  border-radius: 50px;
  color: #e6f2f2;
  font-size: 0.95rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.feature-badge:hover {
  background: rgba(0, 230, 195, 0.1);
  border-color: #00e6c3;
  transform: translateY(-3px);
}

.feature-badge i {
  color: #00e6c3;
  font-size: 1.1rem;
}

.hero-cta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-btn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 2.5rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.hero-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.hero-btn:hover::before {
  transform: translateX(100%);
}

.hero-btn.primary {
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  color: #011627;
  box-shadow: 0 8px 30px rgba(0, 230, 195, 0.4);
}

.hero-btn.primary:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 230, 195, 0.6);
}

.hero-btn.secondary {
  background: transparent;
  color: #00e6c3;
  border: 2px solid #00e6c3;
}

.hero-btn.secondary:hover {
  background: rgba(0, 230, 195, 0.1);
  transform: translateY(-5px);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 900px;
  margin-top: 2rem;
}

.stat-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  border-color: #00e6c3;
  box-shadow: 0 10px 30px rgba(0, 230, 195, 0.3);
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 900;
  color: #00e6c3;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.stat-label {
  font-size: 0.9rem;
  color: #e6f2f2;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.scroll-indicator {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0.6;
  animation: bounce 2s infinite;
  z-index: 10;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

.mouse {
  width: 26px;
  height: 40px;
  border: 2px solid #00e6c3;
  border-radius: 20px;
  position: relative;
}

.wheel {
  width: 4px;
  height: 8px;
  background: #00e6c3;
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-wheel 1.5s infinite;
}

@keyframes scroll-wheel {
  0% { top: 8px; opacity: 1; }
  100% { top: 20px; opacity: 0; }
}

.scroll-indicator p {
  font-size: 0.85rem;
  color: #e6f2f2;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ---------------------------------------------------
   📦 SECCIÓN DE SERVICIOS
--------------------------------------------------- */
.section {
  padding: 5rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.apple-title {
  font-size: 3rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 4rem;
  background: linear-gradient(135deg, #ffffff, #00e6c3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.service-card {
  background: var(--color-card);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.service-card:hover {
  transform: translateY(-10px);
  border-color: #00e6c3;
  box-shadow: 0 15px 40px rgba(0, 230, 195, 0.3);
}

.service-card-img {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #011627;
}

.gradient-purple {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

.gradient-blue {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.service-card h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.service-card p {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.btn-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  color: #011627;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.3s, background 0.3s;
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 230, 195, 0.5);
}

/* ---------------------------------------------------
   🎮 SERVERS SECTION
--------------------------------------------------- */
.servers-hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #011627, #001a33);
  overflow: hidden;
}

.server-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.3);
  transition: all 0.8s ease;
  z-index: 1;
}

.server-hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.server-hero-text {
  max-width: 800px;
  text-align: center;
  color: #ffffff;
}

.server-category {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: rgba(0, 230, 195, 0.2);
  border: 1px solid #00e6c3;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
}

.server-hero-title {
  font-size: 5rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 30px rgba(0, 230, 195, 0.5);
}

.server-hero-description {
  font-size: 1.3rem;
  line-height: 1.8;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.server-hero-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-hero-primary,
.btn-hero-secondary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.btn-hero-primary {
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  color: #011627;
  box-shadow: 0 8px 25px rgba(0, 230, 195, 0.4);
}

.btn-hero-primary:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0, 230, 195, 0.6);
}

.btn-hero-secondary {
  background: transparent;
  color: #00e6c3;
  border: 2px solid #00e6c3;
}

.btn-hero-secondary:hover {
  background: rgba(0, 230, 195, 0.1);
  transform: translateY(-5px);
}

.server-cards-carousel {
  position: relative;
  z-index: 3;
  padding: 2rem;
  background: linear-gradient(180deg, transparent, rgba(1, 22, 39, 0.9));
}

.server-cards-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.server-cards-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s ease;
}

.server-mini-card {
  min-width: 280px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.server-mini-card.active {
  border-color: #00e6c3;
  box-shadow: 0 8px 30px rgba(0, 230, 195, 0.4);
  transform: scale(1.05);
}

.server-mini-card:hover {
  transform: translateY(-5px);
  border-color: #00e6c3;
}

.server-mini-image {
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.server-mini-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
}

.server-mini-emoji {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 2rem;
}

.server-mini-info {
  padding: 1.5rem;
}

.server-mini-location {
  display: block;
  font-size: 0.75rem;
  color: #00e6c3;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.server-mini-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.3rem;
}

.server-mini-subtitle {
  font-size: 0.9rem;
  color: #e6f2f2;
  opacity: 0.7;
}

.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 230, 195, 0.2);
  border: 1px solid #00e6c3;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00e6c3;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.carousel-nav-btn:hover {
  background: rgba(0, 230, 195, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.carousel-nav-btn.prev {
  left: 1rem;
}

.carousel-nav-btn.next {
  right: 1rem;
}

.carousel-counter {
  text-align: center;
  margin-top: 1rem;
  color: #e6f2f2;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* ---------------------------------------------------
   🔬 NVLABS SECTION
--------------------------------------------------- */
.nvlabs-modern-section {
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #011627, #001a33);
  position: relative;
  overflow: hidden;
}

.nvlabs-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.nvlabs-header {
  text-align: center;
  margin-bottom: 4rem;
}

.nvlabs-title {
  font-size: 4rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.nvlabs-description {
  font-size: 1.2rem;
  color: #e6f2f2;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
}

.nvlabs-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.nvlabs-feature-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  transition: all 0.3s ease;
  position: relative;
  backdrop-filter: blur(10px);
}

.nvlabs-feature-card.featured {
  border-color: #00e6c3;
  box-shadow: 0 0 40px rgba(0, 230, 195, 0.3);
}

.nvlabs-feature-card:hover {
  transform: translateY(-10px);
  border-color: #00e6c3;
  box-shadow: 0 15px 50px rgba(0, 230, 195, 0.4);
}

.featured-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  color: #011627;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
}

.feature-icon-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
}

.feature-icon {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #011627;
  position: relative;
  z-index: 2;
}

.icon-glow {
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, rgba(0, 230, 195, 0.3), transparent);
  border-radius: 50%;
  z-index: 1;
  animation: pulse-glow 3s ease-in-out infinite;
}

.feature-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
}

.feature-description {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #e6f2f2;
  opacity: 0.9;
  margin-bottom: 0.8rem;
}

.feature-list i {
  color: #00e6c3;
  font-size: 1rem;
}

.nvlabs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}

.stat-item {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  border-color: #00e6c3;
  transform: translateY(-5px);
}

.stat-number {
  font-size: 3rem;
  font-weight: 900;
  color: #00e6c3;
  display: block;
  margin-bottom: 0.5rem;
}

.nvlabs-cta {
  background: rgba(0, 230, 195, 0.05);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 20px;
  padding: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-content {
  flex: 1;
  min-width: 300px;
}

.cta-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
}

.cta-description {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-cta-primary,
.btn-cta-secondary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-cta-primary {
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  color: #011627;
  box-shadow: 0 8px 25px rgba(0, 230, 195, 0.4);
}

.btn-cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 230, 195, 0.6);
}

.btn-cta-secondary {
  background: transparent;
  color: #00e6c3;
  border: 2px solid #00e6c3;
}

.btn-cta-secondary:hover {
  background: rgba(0, 230, 195, 0.1);
  transform: translateY(-3px);
}

/* ---------------------------------------------------
   📞 CONTACTO SECTION
--------------------------------------------------- */
.contact-modern-section {
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #001a33, #011627);
}

.contact-container {
  max-width: 1400px;
  margin: 0 auto;
}

.contact-header {
  text-align: center;
  margin-bottom: 4rem;
}

.contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.5rem;
  background: rgba(0, 230, 195, 0.1);
  border: 1px solid #00e6c3;
  border-radius: 50px;
  color: #00e6c3;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}

.contact-title {
  font-size: 3.5rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.contact-subtitle {
  font-size: 1.2rem;
  color: #e6f2f2;
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
}

.contact-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.contact-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.contact-card:hover {
  transform: translateY(-10px);
  border-color: #00e6c3;
  box-shadow: 0 15px 50px rgba(0, 230, 195, 0.3);
}

.card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(0, 230, 195, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-card:hover .card-glow {
  opacity: 1;
}

.card-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #011627;
  margin-bottom: 1.5rem;
}

.card-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
}

.card-description {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #e6f2f2;
  opacity: 0.8;
  font-size: 0.9rem;
}

.info-item i {
  color: #00e6c3;
}

.card-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  padding: 1rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.discord-btn {
  background: #5865F2;
  color: #ffffff;
}

.discord-btn:hover {
  background: #4752c4;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(88, 101, 242, 0.4);
}

.email-btn {
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  color: #011627;
}

.email-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 230, 195, 0.4);
}

.form-btn {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #ffffff;
}

.form-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4);
}

.quick-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 8px;
  color: #e6f2f2;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #00e6c3;
  background: rgba(255, 255, 255, 0.08);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.contact-info-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2.5rem;
  background: rgba(0, 230, 195, 0.05);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 20px;
  margin-bottom: 4rem;
}

.info-bar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.info-bar-item i {
  font-size: 2rem;
  color: #00e6c3;
}

.info-text {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 0.85rem;
  color: #e6f2f2;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
}

.contact-faq {
  text-align: center;
}

.faq-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.faq-item {
  display: flex;
  gap: 1.5rem;
  text-align: left;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: #00e6c3;
  transform: translateY(-5px);
}

.faq-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #011627;
  font-size: 1.5rem;
}

.faq-content h4 {
  font-size: 1.2rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.faq-content p {
  color: #e6f2f2;
  opacity: 0.8;
  line-height: 1.6;
}

/* ---------------------------------------------------
   📜 FOOTER MODERNO
--------------------------------------------------- */
.footer-modern {
  position: relative;
  background: #011627;
  color: #e6f2f2;
  overflow: hidden;
}

.footer-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.footer-waves svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 120px;
}

.wave-fill {
  fill: #001a33;
}

.footer-content {
  position: relative;
  padding: 5rem 2rem 2rem;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.brand-column {
  max-width: 400px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.logo-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #011627;
  font-size: 1.5rem;
}

.logo-text {
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
}

.footer-tagline {
  color: #e6f2f2;
  opacity: 0.8;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.footer-stats {
  display: flex;
  gap: 2rem;
}

.stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  color: #00e6c3;
  margin-bottom: 0.3rem;
}

.footer-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
}

.footer-title i {
  color: #00e6c3;
}

.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #e6f2f2;
  opacity: 0.8;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-links a:hover {
  opacity: 1;
  color: #00e6c3;
  transform: translateX(5px);
}

.footer-links i {
  font-size: 0.8rem;
  color: #00e6c3;
}

.footer-social-section {
  max-width: 1400px;
  margin: 0 auto 3rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(0, 230, 195, 0.2);
  border-bottom: 1px solid rgba(0, 230, 195, 0.2);
}

.social-wrapper {
  text-align: center;
}

.social-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.social-links-footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.social-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-btn.discord { background: #5865F2; }
.social-btn.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-btn.tiktok { background: #000000; }
.social-btn.twitch { background: #9146FF; }
.social-btn.twitter { background: #1DA1F2; }
.social-btn.github { background: #333; }

.social-btn:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.footer-bottom {
  border-top: 1px solid rgba(0, 230, 195, 0.1);
  padding: 2rem 0;
}

.footer-bottom-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.copyright {
  color: #e6f2f2;
  opacity: 0.7;
  font-size: 0.9rem;
}

.footer-badges {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 230, 195, 0.1);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 50px;
  font-size: 0.8rem;
  color: #00e6c3;
}

.footer-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #00e6c3;
  border-radius: 50%;
  opacity: 0.3;
  animation: float-particle 10s infinite ease-in-out;
}

.particle:nth-child(1) {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.particle:nth-child(2) {
  top: 30%;
  left: 30%;
  animation-delay: 2s;
}

.particle:nth-child(3) {
  top: 50%;
  left: 50%;
  animation-delay: 4s;
}

.particle:nth-child(4) {
  top: 70%;
  left: 70%;
  animation-delay: 6s;
}

.particle:nth-child(5) {
  top: 90%;
  left: 90%;
  animation-delay: 8s;
}

@keyframes float-particle {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0.3;
  }
  50% {
    transform: translate(100px, -100px);
    opacity: 0.6;
  }
}

/* ---------------------------------------------------
   📅 TIMELINE SECTION
--------------------------------------------------- */
.timeline-section {
  padding: 8rem 2rem 6rem;
  background: linear-gradient(180deg, #011627, #001a33);
  min-height: 100vh;
}

.timeline-header {
  text-align: center;
  margin-bottom: 5rem;
}

.timeline-title {
  font-size: 4rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ffffff, #00e6c3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.timeline-subtitle {
  font-size: 1.3rem;
  color: #e6f2f2;
  opacity: 0.8;
}

.timeline-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding: 2rem 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #00e6c3, transparent);
  border-radius: 2px;
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 5rem;
  position: relative;
}

.timeline-point {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  z-index: 10;
}

.point-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #011627;
  box-shadow: 0 0 30px rgba(0, 230, 195, 0.5);
  transition: all 0.3s ease;
}

.timeline-point.active .point-inner {
  animation: pulse-glow 2s ease-in-out infinite;
}

.point-glow {
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, rgba(0, 230, 195, 0.4), transparent);
  border-radius: 50%;
  z-index: -1;
}

.timeline-content {
  width: calc(50% - 60px);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.timeline-content.visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item:nth-child(odd) .timeline-content {
  margin-right: auto;
  padding-right: 3rem;
}

.timeline-item:nth-child(even) .timeline-content {
  margin-left: auto;
  padding-left: 3rem;
}

.timeline-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.timeline-card:hover {
  border-color: #00e6c3;
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 230, 195, 0.3);
}

.card-year {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  color: #011627;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.timeline-card .card-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
}

.timeline-card .card-description {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.tag {
  padding: 0.4rem 1rem;
  background: rgba(0, 230, 195, 0.1);
  border: 1px solid rgba(0, 230, 195, 0.3);
  border-radius: 50px;
  font-size: 0.85rem;
  color: #00e6c3;
  font-weight: 600;
}

/* =======================================================
   🎧 DJ-NV PAGE STYLES
   Estilos específicos para la página del bot de música
======================================================= */

/* ---------------------------------------------------
   🎵 PÁGINA PRINCIPAL DJ-NV
--------------------------------------------------- */
.page-content {
  padding-top: 70px;
}

/* ---------------------------------------------------
   🎧 HERO SECTION DJ-NV
--------------------------------------------------- */
.dj-hero {
  min-height: 100vh;
  background: linear-gradient(145deg, #011627, #1a0033, #011627);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.dj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(168, 85, 247, 0.1), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0, 230, 195, 0.1), transparent 50%);
  animation: pulse-bg 8s ease-in-out infinite;
}

@keyframes pulse-bg {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.dj-hero__container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.dj-hero__text h1 {
  font-size: 4rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.dj-hero__text .highlight-gradient {
  background: linear-gradient(135deg, #a855f7, #00e6c3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dj-hero__text p {
  font-size: 1.3rem;
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

/* Botones DJ-NV */
.dj-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.btn-dj-primary,
.btn-dj-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 2.5rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-dj-primary {
  background: linear-gradient(135deg, #5865F2, #4752c4);
  color: #ffffff;
  box-shadow: 0 8px 30px rgba(88, 101, 242, 0.4);
}

.btn-dj-primary:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(88, 101, 242, 0.6);
}

.btn-dj-secondary {
  background: transparent;
  color: #a855f7;
  border: 2px solid #a855f7;
}

.btn-dj-secondary:hover {
  background: rgba(168, 85, 247, 0.1);
  transform: translateY(-5px);
}

/* Media del Hero (Vinilo) */
.dj-hero__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dj-vinil-wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  margin-bottom: 2rem;
}

.dj-vinil {
  width: 100%;
  height: 100%;
  animation: rotate-vinyl 4s linear infinite;
  filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.5));
}

@keyframes rotate-vinyl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.dj-punta {
  position: absolute;
  top: -30px;
  right: 5px;
  width: 500px;
  height: auto;
  transform-origin: top right;
  animation: needle-swing 4s ease-in-out infinite;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

@keyframes needle-swing {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

.dj-sticker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: auto;
  animation: pulse-sticker 3s ease-in-out infinite;
}

@keyframes pulse-sticker {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}

.dj-header-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  margin-bottom: 0.5rem;
}

.dj-status {
  text-align: center;
  font-size: 1.1rem;
  color: #00ff90;
  font-weight: 600;
  background: rgba(0, 255, 144, 0.1);
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  border: 1px solid rgba(0, 255, 144, 0.3);
  display: inline-block;
}

/* ---------------------------------------------------
   ⭐ SECCIÓN DE CARACTERÍSTICAS
--------------------------------------------------- */
.features-section {
  background: linear-gradient(180deg, #011627, #001a33);
  padding: 6rem 2rem;
}

.features-header {
  text-align: center;
  margin-bottom: 4rem;
}

.features-header h2 {
  font-size: 3.5rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1rem;
}

.features-header p {
  font-size: 1.2rem;
  color: #e6f2f2;
  opacity: 0.8;
  max-width: 700px;
  margin: 0 auto;
}

.features-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card-dj {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.feature-card-dj:hover {
  transform: translateY(-10px);
  border-color: #a855f7;
  box-shadow: 0 15px 50px rgba(168, 85, 247, 0.3);
}

.feature-icon-dj {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #ffffff;
}

.feature-card-dj h3 {
  font-size: 1.8rem;
  color: #ffffff;
  margin-bottom: 1rem;
  font-weight: 800;
}

.feature-card-dj p {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.6;
}

/* ---------------------------------------------------
   📚 SECCIÓN CÓMO USAR
--------------------------------------------------- */
.how-to-section {
  background: #001a33;
  padding: 6rem 2rem;
}

.tutorial-grid {
  max-width: 1200px;
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 3rem;
}

.tutorial-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.tutorial-card:hover {
  transform: translateY(-10px);
  border-color: #00e6c3;
  box-shadow: 0 15px 50px rgba(0, 230, 195, 0.3);
}

.tutorial-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
}

.tutorial-content {
  padding: 2rem;
}

.tutorial-content h3 {
  font-size: 1.8rem;
  color: #ffffff;
  margin-bottom: 1rem;
  font-weight: 800;
}

.tutorial-content p {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.6;
}

.tutorial-content code {
  background: rgba(0, 230, 195, 0.1);
  color: #00e6c3;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
}

/* ---------------------------------------------------
   🎧 SECCIÓN DE INVITACIÓN
--------------------------------------------------- */
.invite-section {
  background: linear-gradient(145deg, #1a0033, #011627);
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
}

.invite-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 10;
}

.invite-container h2 {
  font-size: 3.5rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.invite-container p {
  font-size: 1.2rem;
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.8;
  margin-bottom: 3rem;
}

/* Barras musicales animadas */
.music-bars {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
}

.bar {
  width: 12px;
  background: linear-gradient(180deg, #00e6c3, #00b8a0);
  border-radius: 8px 8px 0 0;
  animation: bar-animation 0.8s ease-in-out infinite;
}

.bar:nth-child(1) { animation-delay: 0s; }
.bar:nth-child(2) { animation-delay: 0.1s; }
.bar:nth-child(3) { animation-delay: 0.2s; }
.bar:nth-child(4) { animation-delay: 0.3s; }
.bar:nth-child(5) { animation-delay: 0.4s; }
.bar:nth-child(6) { animation-delay: 0.5s; }
.bar:nth-child(7) { animation-delay: 0.6s; }
.bar:nth-child(8) { animation-delay: 0.7s; }
.bar:nth-child(9) { animation-delay: 0.8s; }
.bar:nth-child(10) { animation-delay: 0.9s; }

@keyframes bar-animation {
  0%, 100% { height: 20%; }
  50% { height: 100%; }
}

.animated-button {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 2.5rem;
  background: linear-gradient(135deg, #5865F2, #4752c4);
  color: #ffffff;
  border-radius: 12px;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(88, 101, 242, 0.4);
}

.animated-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(88, 101, 242, 0.6);
}

/* ---------------------------------------------------
   🛡️ SECCIÓN SOPORTE/PRIVACIDAD
--------------------------------------------------- */
.support-section {
  background: #011627;
  padding: 6rem 2rem;
}

.support-grid {
  max-width: 1200px;
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.support-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.support-card:hover {
  transform: translateY(-10px);
  border-color: #dc2626;
  box-shadow: 0 15px 50px rgba(220, 38, 38, 0.3);
}

.support-card i {
  font-size: 4rem;
  color: #dc2626;
  margin-bottom: 1.5rem;
}

.support-card h3 {
  font-size: 1.8rem;
  color: #ffffff;
  margin-bottom: 1rem;
  font-weight: 800;
}

.support-card p {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.6;
}

/* ---------------------------------------------------
   💬 POPUP (DJ-NV)
--------------------------------------------------- */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.popup.active {
  opacity: 1;
  pointer-events: all;
}

.popup-content {
  background: rgba(1, 22, 39, 0.95);
  border: 2px solid #00e6c3;
  border-radius: 20px;
  padding: 3rem;
  max-width: 600px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 230, 195, 0.3);
}

.blur-glass {
  backdrop-filter: blur(20px);
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: #00e6c3;
  cursor: pointer;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(0, 230, 195, 0.1);
  transform: rotate(90deg);
}

.popup-content h3 {
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.popup-content p {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.8;
  font-size: 1.1rem;
}

.popup-content a {
  color: #00e6c3;
  font-weight: 700;
  text-decoration: none;
}

.popup-content a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------
   📱 RESPONSIVE DJ-NV
--------------------------------------------------- */
@media (max-width: 768px) {
  .dj-hero__container {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-top: 2rem;
  }

  .dj-hero__text h1 {
    font-size: 2.5rem;
  }

  .dj-vinil-wrapper {
    width: 300px;
    height: 300px;
  }

  .features-header h2,
  .invite-container h2 {
    font-size: 2.5rem;
  }

  .dj-buttons {
    flex-direction: column;
  }

  .btn-dj-primary,
  .btn-dj-secondary {
    width: 100%;
    justify-content: center;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-grid {
    grid-template-columns: 1fr;
  }

  .support-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .dj-hero__text h1 {
    font-size: 2rem;
  }

  .dj-vinil-wrapper {
    width: 250px;
    height: 250px;
  }

  .features-header h2 {
    font-size: 2rem;
  }

  .invite-container h2 {
    font-size: 2.5rem;
  }
}

/* ---------------------------------------------------
   🔧 NVLABS PAGE (simple)
--------------------------------------------------- */
.nvlabs-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 2rem;
  background: linear-gradient(145deg, #011627, #00e6c3);
}

.nvlabs-hero h1 {
  font-size: 4rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.nvlabs-hero p {
  font-size: 1.3rem;
  color: #e6f2f2;
  opacity: 0.9;
  max-width: 700px;
}

/* ---------------------------------------------------
   🔧 FORO (simple, no usado)
--------------------------------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.new-topic {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

/* ---------------------------------------------------
   📱 RESPONSIVE
--------------------------------------------------- */
@media (max-width: 1024px) {
  .nav-cta-btn span {
    display: none;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-container {
    grid-template-columns: 1fr 1fr;
  }

  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 768px) {
  .navbar-container {
    padding: 1rem;
  }

  .nav-menu {
    position: fixed;
    top: 70px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 70px);
    background: rgba(1, 22, 39, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 2rem;
    gap: 0;
    transition: left 0.3s ease;
  }

  .nav-menu.active {
    left: 0;
  }

  .nav-menu a {
    width: 100%;
    padding: 1rem;
    text-align: center;
    font-size: 1.1rem;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .nav-cta-btn {
    display: none;
  }

  .hero-modern {
    padding: 7rem 1rem 3rem;
  }

  .hero-logo-wrapper {
    width: 200px;
    height: 200px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-cta {
    flex-direction: column;
    width: 100%;
  }

  .hero-btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .nvlabs-features-grid {
    grid-template-columns: 1fr;
  }

  .nvlabs-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .nvlabs-cta {
    flex-direction: column;
    text-align: center;
  }

  .contact-methods-grid {
    grid-template-columns: 1fr;
  }

  .contact-info-bar {
    grid-template-columns: 1fr;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-column {
    align-items: center;
  }

  .footer-links a {
    justify-content: center;
  }

  .timeline-line {
    left: 30px;
  }

  .timeline-point {
    left: 30px;
  }

  .timeline-content {
    width: calc(100% - 100px);
    margin-left: auto !important;
    padding-left: 3rem !important;
    padding-right: 0 !important;
  }

  .dj-hero__container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .dj-vinil-wrapper {
    width: 300px;
    height: 300px;
  }

  .about__container {
    grid-template-columns: 1fr;
  }

  .card-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.8rem;
  }

  .server-hero-title {
    font-size: 3rem;
  }

  .nvlabs-title {
    font-size: 2.5rem;
  }

  .contact-title {
    font-size: 2.5rem;
  }

  .timeline-title {
    font-size: 2.5rem;
  }

  .dj-hero__text h1 {
    font-size: 2rem;
  }
}

/* =======================================================
   👥 TEAM PAGE STYLES
   Estilos específicos para la página del equipo
======================================================= */

/* ---------------------------------------------------
   🎯 HERO SECTION TEAM
--------------------------------------------------- */
.team-hero {
  min-height: 60vh;
  background: linear-gradient(145deg, #011627, #001a33, #011627);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 2rem 4rem;
  position: relative;
  overflow: hidden;
}

.team-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 40%, rgba(0, 230, 195, 0.1), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(168, 85, 247, 0.1), transparent 50%);
  animation: pulse-bg 8s ease-in-out infinite;
}

@keyframes pulse-bg {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.team-hero-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.team-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.5rem;
  background: rgba(0, 230, 195, 0.1);
  border: 1px solid #00e6c3;
  border-radius: 50px;
  color: #00e6c3;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 2rem;
}

.team-hero-title {
  font-size: 4rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.team-hero-subtitle {
  font-size: 1.3rem;
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
}

/* ---------------------------------------------------
   👥 TEAM GRID SECTION
--------------------------------------------------- */
.team-section {
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #011627, #001a33);
}

.team-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
}

/* ---------------------------------------------------
   👤 MEMBER CARD
--------------------------------------------------- */
.team-member {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Delays escalonados para animación */
.team-member:nth-child(1) { animation-delay: 0.1s; }
.team-member:nth-child(2) { animation-delay: 0.2s; }
.team-member:nth-child(3) { animation-delay: 0.3s; }
.team-member:nth-child(4) { animation-delay: 0.4s; }
.team-member:nth-child(5) { animation-delay: 0.5s; }
.team-member:nth-child(6) { animation-delay: 0.6s; }
.team-member:nth-child(7) { animation-delay: 0.7s; }
.team-member:nth-child(8) { animation-delay: 0.8s; }

.member-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.member-card:hover {
  transform: translateY(-10px);
  border-color: #00e6c3;
  box-shadow: 0 20px 60px rgba(0, 230, 195, 0.3);
}

/* ---------------------------------------------------
   🖼️ MEMBER IMAGE
--------------------------------------------------- */
.member-image-wrapper {
  position: relative;
  padding: 2rem 2rem 0;
}

.member-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid rgba(0, 230, 195, 0.3);
  transition: all 0.3s ease;
}

.member-card:hover .member-image {
  border-color: #00e6c3;
  box-shadow: 0 0 30px rgba(0, 230, 195, 0.5);
}

.member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.member-card:hover .member-image img {
  transform: scale(1.05);
}

.member-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(1, 22, 39, 0.95) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.member-card:hover .member-overlay {
  opacity: 1;
}

.member-socials {
  display: flex;
  gap: 1rem;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 230, 195, 0.2);
  border: 1px solid #00e6c3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00e6c3;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1.1rem;
}

.social-link:hover {
  background: #00e6c3;
  color: #011627;
  transform: translateY(-3px);
}

/* ---------------------------------------------------
   🏷️ ROLE BADGES
--------------------------------------------------- */
.role-badge {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.founder-badge {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #011627;
}

.developer-badge {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #ffffff;
}

.manager-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
}

.designer-badge {
  background: linear-gradient(135deg, #ec4899, #db2777);
  color: #ffffff;
}

.admin-badge {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}

.creator-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
}

/* ---------------------------------------------------
   ℹ️ MEMBER INFO
--------------------------------------------------- */
.member-info {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.member-name {
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.member-role {
  font-size: 1.1rem;
  color: #00e6c3;
  font-weight: 600;
  margin-bottom: 1rem;
}

.member-description {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}

/* ---------------------------------------------------
   🏷️ SKILL TAGS
--------------------------------------------------- */
.member-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-tag {
  padding: 0.4rem 1rem;
  background: rgba(0, 230, 195, 0.1);
  border: 1px solid rgba(0, 230, 195, 0.3);
  border-radius: 50px;
  font-size: 0.8rem;
  color: #00e6c3;
  font-weight: 600;
  transition: all 0.3s ease;
}

.skill-tag:hover {
  background: rgba(0, 230, 195, 0.2);
  border-color: #00e6c3;
  transform: translateY(-2px);
}

/* ---------------------------------------------------
   📊 TEAM STATS SECTION
--------------------------------------------------- */
.team-stats-section {
  padding: 4rem 2rem;
  background: #001a33;
}

.stats-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.stat-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-box:hover {
  border-color: #00e6c3;
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 230, 195, 0.3);
}

.stat-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #011627;
}

.stat-number {
  font-size: 3rem;
  font-weight: 900;
  color: #00e6c3;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1rem;
  color: #e6f2f2;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------------------------------------------------
   💼 JOIN THE TEAM SECTION
--------------------------------------------------- */
.join-team-section {
  padding: 6rem 2rem;
  background: linear-gradient(145deg, #011627, #1a0033);
  position: relative;
  overflow: hidden;
}

.join-team-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.15), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(0, 230, 195, 0.15), transparent 50%);
}

.join-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.join-content {
  text-align: left;
}

.join-title {
  font-size: 3rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.join-description {
  font-size: 1.2rem;
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.join-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.btn-join-primary,
.btn-join-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 2.5rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-join-primary {
  background: linear-gradient(135deg, #00e6c3, #00b8a0);
  color: #011627;
  box-shadow: 0 8px 30px rgba(0, 230, 195, 0.4);
}

.btn-join-primary:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 230, 195, 0.6);
}

.btn-join-secondary {
  background: transparent;
  color: #00e6c3;
  border: 2px solid #00e6c3;
}

.btn-join-secondary:hover {
  background: rgba(0, 230, 195, 0.1);
  transform: translateY(-5px);
}

.join-visual {
  display: grid;
  gap: 1.5rem;
}

.join-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 230, 195, 0.2);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.join-card:hover {
  border-color: #00e6c3;
  transform: translateX(10px);
  box-shadow: 0 10px 30px rgba(0, 230, 195, 0.3);
}

.join-card i {
  font-size: 3rem;
  color: #00e6c3;
  margin-bottom: 1rem;
}

.join-card h3 {
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.join-card p {
  color: #e6f2f2;
  opacity: 0.8;
}

/* ---------------------------------------------------
   📱 RESPONSIVE TEAM PAGE
--------------------------------------------------- */
@media (max-width: 1024px) {
  .team-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .join-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .join-content {
    text-align: center;
  }

  .join-buttons {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .team-hero-title {
    font-size: 2.5rem;
  }

  .team-container {
    grid-template-columns: 1fr;
  }

  .stats-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .join-title {
    font-size: 2rem;
  }

  .join-buttons {
    flex-direction: column;
  }

  .btn-join-primary,
  .btn-join-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .team-hero-title {
    font-size: 2rem;
  }

  .team-hero-subtitle {
    font-size: 1rem;
  }

  .stats-container {
    grid-template-columns: 1fr;
  }

  .member-name {
    font-size: 1.5rem;
  }

  .member-role {
    font-size: 1rem;
  }
}

/* =======================================================
   💬 DISCORD PAGE STYLES
   Página de invitación al servidor de Discord
======================================================= */

/* ---------------------------------------------------
   🎮 HERO DISCORD
--------------------------------------------------- */
.discord-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 2rem 4rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #23272A, #2C2F33, #23272A);
}

.discord-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.discord-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.2;
  animation: float-orb 15s infinite ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #5865F2, transparent);
  top: -200px;
  right: -200px;
  animation-delay: 0s;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #00e6c3, transparent);
  bottom: -150px;
  left: -150px;
  animation-delay: 5s;
}

.orb-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, #a855f7, transparent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 10s;
}

@keyframes float-orb {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(50px, -50px); }
  66% { transform: translate(-50px, 50px); }
}

.discord-hero-container {
  position: relative;
  z-index: 10;
  max-width: 900px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Logo Discord Animado */
.discord-logo-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.discord-logo-glow {
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, rgba(88, 101, 242, 0.4), transparent);
  border-radius: 50%;
  animation: pulse-logo 2s ease-in-out infinite;
}

@keyframes pulse-logo {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

.discord-logo-icon {
  font-size: 8rem;
  color: #5865F2;
  position: relative;
  z-index: 2;
  animation: bounce-logo 3s ease-in-out infinite;
}

@keyframes bounce-logo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.discord-pulse {
  position: absolute;
  inset: 0;
  border: 3px solid #5865F2;
  border-radius: 50%;
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Textos del Hero */
.discord-hero-title {
  font-size: 4.5rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.discord-highlight {
  background: linear-gradient(135deg, #5865F2, #7289DA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.discord-hero-subtitle {
  font-size: 1.3rem;
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.8;
  max-width: 700px;
}

/* Stats Rápidas */
.discord-quick-stats {
  display: flex;
  gap: 2rem;
  margin: 1rem 0;
  flex-wrap: wrap;
  justify-content: center;
}

.quick-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.3);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.quick-stat:hover {
  transform: translateY(-5px);
  border-color: #5865F2;
  box-shadow: 0 10px 30px rgba(88, 101, 242, 0.4);
}

.quick-stat i {
  font-size: 2rem;
  color: #5865F2;
}

.quick-stat .stat-number {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffffff;
}

.quick-stat .stat-label {
  font-size: 0.9rem;
  color: #e6f2f2;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Botón Principal */
.discord-join-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 3rem;
  background: linear-gradient(135deg, #5865F2, #4752c4);
  color: #ffffff;
  border-radius: 50px;
  font-size: 1.3rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 40px rgba(88, 101, 242, 0.5);
  transition: all 0.3s ease;
  overflow: hidden;
  animation: pulse-btn 2s ease-in-out infinite;
}

@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 10px 40px rgba(88, 101, 242, 0.5); }
  50% { box-shadow: 0 10px 50px rgba(88, 101, 242, 0.8); }
}

.discord-join-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 60px rgba(88, 101, 242, 0.7);
}

.btn-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.discord-join-btn:hover .btn-glow {
  transform: translateX(100%);
}

.discord-join-btn i:first-child {
  font-size: 1.5rem;
}

.discord-join-btn i:last-child {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.discord-join-btn:hover i:last-child {
  transform: translateX(5px);
}

/* Indicador Online */
.online-indicator {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.5rem;
  background: rgba(67, 181, 129, 0.1);
  border: 1px solid rgba(67, 181, 129, 0.3);
  border-radius: 50px;
  color: #e6f2f2;
  font-size: 0.95rem;
}

.online-dot {
  width: 12px;
  height: 12px;
  background: #43B581;
  border-radius: 50%;
  animation: blink-dot 2s ease-in-out infinite;
}

@keyframes blink-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---------------------------------------------------
   🌟 CARACTERÍSTICAS
--------------------------------------------------- */
.discord-features-section {
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #23272A, #2C2F33);
}

.features-container {
  max-width: 1400px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 3.5rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #e6f2f2;
  opacity: 0.8;
  max-width: 700px;
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(88, 101, 242, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.feature-card:hover {
  transform: translateY(-10px);
  border-color: #5865F2;
  box-shadow: 0 15px 50px rgba(88, 101, 242, 0.3);
}

.feature-icon-wrapper {
  margin-bottom: 1.5rem;
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #ffffff;
}

.feature-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
}

.feature-description {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.6;
}

/* ---------------------------------------------------
   📋 CANALES
--------------------------------------------------- */
.discord-channels-section {
  padding: 6rem 2rem;
  background: #2C2F33;
}

.channels-container {
  max-width: 1400px;
  margin: 0 auto;
}

.channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.channel-category {
  background: rgba(35, 39, 42, 0.6);
  border: 1px solid rgba(88, 101, 242, 0.2);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.channel-category:hover {
  border-color: #5865F2;
  transform: translateY(-5px);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(88, 101, 242, 0.3);
}

.category-header i {
  font-size: 1.5rem;
  color: #5865F2;
}

.category-header h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
}

.channel-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  color: #e6f2f2;
  transition: all 0.3s ease;
}

.channel-item:hover {
  background: rgba(88, 101, 242, 0.2);
  transform: translateX(5px);
}

.channel-item i {
  color: #99AAB5;
  font-size: 0.9rem;
}

/* ---------------------------------------------------
   💬 TESTIMONIOS
--------------------------------------------------- */
.discord-testimonials-section {
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #2C2F33, #23272A);
}

.testimonials-container {
  max-width: 1400px;
  margin: 0 auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(88, 101, 242, 0.2);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  border-color: #5865F2;
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(88, 101, 242, 0.3);
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.user-avatar {
  position: relative;
}

.user-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #5865F2;
}

.online-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: #43B581;
  border: 3px solid #2C2F33;
  border-radius: 50%;
}

.user-info h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.3rem;
}

.user-info span {
  font-size: 0.85rem;
  color: #99AAB5;
}

.testimonial-text {
  color: #e6f2f2;
  opacity: 0.9;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.testimonial-rating {
  display: flex;
  gap: 0.3rem;
}

.testimonial-rating i {
  color: #FFA500;
  font-size: 1rem;
}

/* ---------------------------------------------------
   🚀 CTA FINAL
--------------------------------------------------- */
.discord-cta-section {
  padding: 6rem 2rem;
  background: linear-gradient(145deg, #5865F2, #4752c4);
  position: relative;
  overflow: hidden;
}

.cta-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.cta-content {
  text-align: center;
}

.cta-icon {
  font-size: 5rem;
  color: #ffffff;
  margin-bottom: 2rem;
  animation: bounce-icon 2s ease-in-out infinite;
}

@keyframes bounce-icon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.cta-title {
  font-size: 3.5rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.cta-description {
  font-size: 1.3rem;
  color: #ffffff;
  opacity: 0.9;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 2.5rem;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  overflow: hidden;
}

.cta-btn.primary {
  background: #ffffff;
  color: #5865F2;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.cta-btn.primary:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
}

.cta-btn.secondary {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.cta-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-5px);
}

.btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(88, 101, 242, 0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.cta-btn.primary:hover .btn-shine {
  transform: translateX(100%);
}

/* Contador */
.member-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.counter-item {
  text-align: center;
}

.counter-number {
  font-size: 2.5rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.counter-number.online {
  color: #43B581;
}

.counter-label {
  font-size: 0.9rem;
  color: #ffffff;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.counter-divider {
  width: 2px;
  height: 60px;
  background: rgba(255, 255, 255, 0.3);
}

/* Decoración */
.cta-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: rotate-circle 20s linear infinite;
}

.decoration-circle:nth-child(1) {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -150px;
}

.decoration-circle:nth-child(2) {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -100px;
  animation-delay: 5s;
}

.decoration-circle:nth-child(3) {
  width: 150px;
  height: 150px;
  top: 50%;
  left: 10%;
  animation-delay: 10s;
}

@keyframes rotate-circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------
   📱 RESPONSIVE
--------------------------------------------------- */
@media (max-width: 768px) {
  .discord-hero-title {
    font-size: 2.5rem;
  }

  .discord-logo-icon {
    font-size: 5rem;
  }

  .discord-quick-stats {
    gap: 1rem;
  }

  .features-grid,
  .channels-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .section-title,
  .cta-title {
    font-size: 2.5rem;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .cta-btn {
    width: 100%;
    justify-content: center;
  }

  .member-counter {
    flex-direction: column;
    gap: 1rem;
  }

  .counter-divider {
    width: 60px;
    height: 2px;
  }
}

@media (max-width: 480px) {
  .discord-hero-title {
    font-size: 2rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .cta-title {
    font-size: 2rem;
  }
}

/* ============================================================
   ?? SECCI�N DE PROMOCI�N DE TWITCH
============================================================ */

.twitch-promo-section {
  position: relative;
  padding: 6rem 2rem;
  background: linear-gradient(180deg, var(--color-bg-2), var(--color-bg-3));
  overflow: hidden;
}

.twitch-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

/* ---------------------------------------------------
   ENCABEZADO DE SECCI�N
--------------------------------------------------- */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #9146ff, #772ce8);
  border-radius: 20px;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 40px rgba(145, 70, 255, 0.3);
  animation: float 3s ease-in-out infinite;
}

.section-icon i {
  font-size: 2.5rem;
  color: #ffffff;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.section-title {
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: 1rem;
  letter-spacing: -1px;
}

.section-description {
  font-size: 1.2rem;
  color: var(--color-text-soft);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ---------------------------------------------------
   GRID DE WIDGETS
--------------------------------------------------- */
.twitch-widgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 2.5rem;
  margin-bottom: 4rem;
}

/* ---------------------------------------------------
   TARJETAS DE WIDGET
--------------------------------------------------- */
.twitch-widget-card {
  background: var(--color-card);
  border: 1px solid rgba(145, 70, 255, 0.2);
  border-radius: 20px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.twitch-widget-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #9146ff, #00e6c3);
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.twitch-widget-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(145, 70, 255, 0.4);
}

.twitch-widget-card:hover::before {
  opacity: 0.3;
}

/* Indicador de live */
.twitch-widget-card.live {
  border-color: #9146ff;
  animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% {
    border-color: #9146ff;
    box-shadow: 0 0 20px rgba(145, 70, 255, 0.3);
  }
  50% {
    border-color: #b380ff;
    box-shadow: 0 0 40px rgba(145, 70, 255, 0.6);
  }
}

/* ---------------------------------------------------
   HEADER DEL WIDGET
--------------------------------------------------- */
.twitch-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.channel-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.channel-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9146ff, #772ce8);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(145, 70, 255, 0.3);
  overflow: hidden;
  transition: all 0.3s ease;
}

.channel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.channel-avatar i {
  font-size: 1.8rem;
  color: #ffffff;
}

.twitch-widget-card.live .channel-avatar {
  border-color: #9146ff;
  box-shadow: 0 0 20px rgba(145, 70, 255, 0.6);
  animation: avatar-pulse 2s ease-in-out infinite;
}

@keyframes avatar-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.channel-details {
  flex: 1;
}

.channel-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.verified-badge {
  color: #9146ff;
  font-size: 1rem;
}

.channel-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-soft);
  font-weight: 600;
}

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4444;
}

.status-indicator.live {
  background: #43B581;
  box-shadow: 0 0 10px #43B581;
  animation: pulse-live 2s ease-in-out infinite;
}

@keyframes pulse-live {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.status-indicator.offline {
  background: #747f8d;
}

.follow-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  background: linear-gradient(135deg, #9146ff, #772ce8);
  color: #ffffff;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(145, 70, 255, 0.3);
}

.follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(145, 70, 255, 0.5);
  background: linear-gradient(135deg, #a367ff, #8844ff);
}

/* ---------------------------------------------------
   CONTENEDOR DE EMBED
--------------------------------------------------- */
.twitch-embed-container {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 1.5rem;
  position: relative;
}

.twitch-embed-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.twitch-widget-card.live .twitch-embed-container {
  height: 400px;
}

/* Placeholder cuando est� offline */
.embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-soft);
}

.embed-placeholder i {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: rgba(145, 70, 255, 0.4);
}

.embed-placeholder p {
  font-size: 1.1rem;
  font-weight: 600;
}

/* ---------------------------------------------------
   ESTAD�STICAS DEL CANAL
--------------------------------------------------- */
.channel-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: rgba(145, 70, 255, 0.1);
  border: 1px solid rgba(145, 70, 255, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(145, 70, 255, 0.15);
  transform: translateY(-2px);
}

.stat-item i {
  font-size: 1.5rem;
  color: #9146ff;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: 0.2rem;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* ---------------------------------------------------
   INFORMACI�N DEL STREAM
--------------------------------------------------- */
.stream-info {
  padding: 1.5rem;
  background: rgba(145, 70, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(145, 70, 255, 0.2);
}

.stream-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.stream-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.stream-game,
.stream-uptime {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-soft);
  font-weight: 600;
}

.stream-game::before {
  content: '??';
}

.stream-uptime::before {
  content: '??';
}

/* ---------------------------------------------------
   CTA FINAL
--------------------------------------------------- */
.twitch-cta {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(145, 70, 255, 0.1), rgba(0, 230, 195, 0.1));
  border: 2px solid rgba(145, 70, 255, 0.3);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.twitch-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(145, 70, 255, 0.2), transparent);
  animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

.twitch-cta h3 {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.twitch-cta p {
  font-size: 1.1rem;
  color: var(--color-text-soft);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.btn-twitch-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 2.5rem;
  background: linear-gradient(135deg, #9146ff, #00e6c3);
  color: #ffffff;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 40px rgba(145, 70, 255, 0.3);
}

.btn-twitch-cta:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px rgba(145, 70, 255, 0.5);
}

/* ---------------------------------------------------
   DECORACI�N DE FONDO
--------------------------------------------------- */
.twitch-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.decoration-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(145, 70, 255, 0.2), transparent);
  filter: blur(60px);
  animation: blob-float 20s ease-in-out infinite;
}

.blob-1 {
  width: 400px;
  height: 400px;
  top: -200px;
  right: -200px;
}

.blob-2 {
  width: 300px;
  height: 300px;
  bottom: -150px;
  left: -150px;
  animation-delay: 7s;
}

.blob-3 {
  width: 250px;
  height: 250px;
  top: 50%;
  left: 50%;
  animation-delay: 14s;
}

@keyframes blob-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

/* ---------------------------------------------------
   RESPONSIVE
--------------------------------------------------- */
@media (max-width: 1200px) {
  .twitch-widgets-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}

@media (max-width: 768px) {
  .twitch-promo-section {
    padding: 4rem 1.5rem;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .section-description {
    font-size: 1rem;
  }

  .twitch-widgets-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .twitch-widget-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .follow-btn {
    width: 100%;
    justify-content: center;
  }

  .twitch-embed-container {
    height: 250px;
  }

  .twitch-widget-card.live .twitch-embed-container {
    height: 350px;
  }

  .channel-stats {
    grid-template-columns: 1fr;
  }

  .twitch-cta h3 {
    font-size: 1.6rem;
  }

  .twitch-cta p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 1.8rem;
  }

  .channel-name {
    font-size: 1.1rem;
  }

  .twitch-embed-container {
    height: 200px;
  }

  .twitch-widget-card.live .twitch-embed-container {
    height: 280px;
  }

  .btn-twitch-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------
   MODO CLARO
--------------------------------------------------- */
body.light .twitch-promo-section {
  background: linear-gradient(180deg, var(--color-bg-2), var(--color-bg-3));
}

body.light .twitch-widget-card {
  background: var(--color-card);
  border-color: rgba(145, 70, 255, 0.3);
}

body.light .embed-placeholder {
  background: rgba(0, 0, 0, 0.05);
}

body.light .stat-item {
  background: rgba(145, 70, 255, 0.08);
  border-color: rgba(145, 70, 255, 0.25);
}

body.light .stream-info {
  background: rgba(145, 70, 255, 0.08);
  border-color: rgba(145, 70, 255, 0.25);
}

body.light .twitch-cta {
  background: linear-gradient(135deg, rgba(145, 70, 255, 0.15), rgba(0, 230, 195, 0.15));
  border-color: rgba(145, 70, 255, 0.4);
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.popup-content {
  background: #011627;
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  color: #e6f2f2;
  max-width: 500px;
  position: relative;
  box-shadow: 0 0 25px rgba(0, 230, 195, 0.5);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2rem;
  cursor: pointer;
  color: var(--color-primary);
  font-weight: bold;
  transition: transform 0.2s ease;
}

.close-btn:hover {
  transform: scale(1.2);
}