/* ============================================================
   JR FITNESS - landing_dark.css
   Colores del tema oscuro (estado por defecto, sin clase).
   Cargado después de landing_base.css.
   ============================================================ */

/* ── Body ──────────────────────────────────────────────────── */
.landing-body { background-color: #0b0f17; color: #f3f4f6; }

/* ── Navbar ────────────────────────────────────────────────── */
.landing-navbar { background: rgba(11,15,23,0.88); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.nav-logo-badge { box-shadow: 0 4px 14px rgba(16,185,129,0.3); }
.nav-logo-text  { color: #ffffff; }
.nav-links a    { color: #9ca3af; }
.btn-landing-sec { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #ffffff; }
.btn-landing-sec:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.btn-landing-pri { background: linear-gradient(135deg, #10b981, #059669); color: #ffffff; box-shadow: 0 4px 16px rgba(16,185,129,0.4); }
.btn-theme-toggle { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #ffffff; }
.btn-theme-toggle:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }


.nav-toggle     { color: #ffffff; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero-section {
  background:
    radial-gradient(circle at 75% 25%, rgba(16,185,129,0.2) 0%, transparent 50%),
    radial-gradient(circle at 15% 75%, rgba(59,130,246,0.15) 0%, transparent 50%),
    linear-gradient(180deg, #0b0f17 0%, #0f172a 100%);
}
.hero-badge { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.35); box-shadow: 0 0 15px rgba(16,185,129,0.2); }
.hero-title { color: #ffffff; }
.hero-description { color: #9ca3af; }
.hero-card-preview { box-shadow: 0 25px 60px rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.15); }
.btn-hero-secondary { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18); color: #ffffff; }
.btn-hero-secondary:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }

/* ── Floating Badges ───────────────────────────────────────── */
.floating-badge { background: rgba(17,24,39,0.92); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 15px 30px rgba(0,0,0,0.5); }
.badge-icon { background: rgba(16,185,129,0.15); }
.floating-badge strong { color: #ffffff; }
.floating-badge small  { color: #9ca3af; }

/* ── Countdown ─────────────────────────────────────────────── */
.hero-countdown-overlay { 
  background: radial-gradient(circle at 50% 30%, rgba(30, 41, 59, 0.60) 0%, rgba(15, 23, 42, 0.72) 65%, rgba(10, 15, 29, 0.82) 100%) !important; 
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important; 
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 30px rgba(16, 185, 129, 0.3) !important; 
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.hcd-time-unit { 
  background: rgba(255, 255, 255, 0.08) !important; 
  border: 1px solid rgba(255, 255, 255, 0.15) !important; 
  backdrop-filter: blur(4px) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
.hcd-digit { color: #ffffff; }
.hcd-label { color: #94a3b8; }

/* ── Section headers ───────────────────────────────────────── */
.section-title    { color: #ffffff; }
.section-subtitle { color: #9ca3af; }

/* ── Features ──────────────────────────────────────────────── */
.features-section { background: #0f172a; }
.feature-card     { background: linear-gradient(145deg, rgba(30,41,59,0.7), rgba(15,23,42,0.8)); border: 1px solid rgba(255,255,255,0.08); }
.feature-card:hover { border-color: rgba(16,185,129,0.4); box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(16,185,129,0.15); }
.feature-icon     { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); }
.feature-card h3  { color: #ffffff; }
.feature-card p   { color: #9ca3af; }

/* ── Pricing ───────────────────────────────────────────────── */
.pricing-section { background: #0b0f17; }
.pricing-tabs-wrapper { background: rgba(30,41,59,0.8); border: 1px solid rgba(255,255,255,0.1); }
.pricing-tab-btn  { color: #94a3b8; }
.pricing-tab-btn:hover:not(.active) { color: #ffffff; }
.pricing-tab-btn.active {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.4);
}
.pricing-card     { background: rgba(30,41,59,0.6); border: 1px solid rgba(255,255,255,0.08); }
.pricing-card.popular { border-color: #10b981; background: linear-gradient(145deg, rgba(16,185,129,0.1), rgba(15,23,42,0.9)); box-shadow: 0 15px 40px rgba(16,185,129,0.25), 0 0 25px rgba(16,185,129,0.2); }
.pricing-totem-avatar-mini { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.pricing-totem-slogan { color: #94a3b8; }
.pricing-days-badge { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #ffffff; }
.pricing-card.popular .pricing-days-badge { background: rgba(16,185,129,0.25); border-color: #34d399; color: #a7f3d0; box-shadow: 0 0 10px rgba(16,185,129,0.2); }
.pricing-sessions-highlight { color: #cbd5e1; }
.pricing-header h3 { color: #ffffff; }
.price             { color: #9ca3af; }
.price span        { color: #ffffff; }
.pricing-features  { color: #d1d5db; }
.btn-price         { border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: #ffffff; }
.btn-price:hover   { background: rgba(255,255,255,0.14); }
.pricing-voucher-avatar-mini { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.pricing-card-voucher-20.popular { border-color: #8b5cf6; background: linear-gradient(145deg, rgba(139,92,246,0.15), rgba(15,23,42,0.95)); box-shadow: 0 15px 40px rgba(139,92,246,0.3), 0 0 25px rgba(139,92,246,0.2); }

/* ── Location ──────────────────────────────────────────────── */
.location-section   { background: #0f172a; }
.location-card-info { background: linear-gradient(145deg, rgba(30,41,59,0.7), rgba(15,23,42,0.8)); border: 1px solid rgba(255,255,255,0.08); }
.loc-icon           { background: rgba(16,185,129,0.15); }
.location-item strong { color: #ffffff; }
.location-item p, .location-item a { color: #9ca3af; }
.location-map-card  { border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }

/* ── Social ────────────────────────────────────────────────── */
.social-section { background: radial-gradient(circle at 50% 0%, rgba(16,185,129,0.06) 0%, rgba(11,15,23,0) 70%), #0b0f17; border-top: 1px solid rgba(255,255,255,0.05); }
.social-card    { background: rgba(17,24,39,0.75); border: 1px solid rgba(255,255,255,0.09); }
.social-card:hover { border-color: rgba(255,255,255,0.22); box-shadow: 0 22px 40px -10px rgba(0,0,0,0.65); }
.social-avatar  { box-shadow: 0 8px 18px rgba(0,0,0,0.35); }
.social-name    { color: #ffffff; }
.social-handle  { color: #9ca3af; }
.social-desc    { color: #cbd5e1; }
.btn-social-card { background: #1f2937; color: #ffffff; border: 1px solid rgba(255,255,255,0.1); }
.btn-social-card:hover { background: #374151; border-color: rgba(255,255,255,0.25); }

/* ── Footer ────────────────────────────────────────────────── */
.landing-footer { background: #070a0f; color: #f8fafc; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-social-icon { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #9ca3af; }
.footer-social-icon:hover { color: #ffffff; }
.footer-social-icon--whatsapp:hover  { background: #25d366 !important; border-color: #25d366 !important; color: #ffffff !important; }
.footer-social-icon--instagram:hover { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045) !important; border-color: transparent !important; color: #ffffff !important; }
.footer-social-icon--facebook:hover  { background: #1877f2 !important; border-color: transparent !important; color: #ffffff !important; }
.footer-social-icon--x:hover         { background: #000000 !important; border-color: #000000 !important; color: #ffffff !important; }
.footer-social-icon--youtube:hover   { background: #ff0000 !important; border-color: transparent !important; color: #ffffff !important; }
.footer-social-icon--tiktok:hover    { background: linear-gradient(135deg, #00f2fe, #fe0979) !important; border-color: transparent !important; color: #ffffff !important; }
.footer-logo    { color: #ffffff; }
.footer-desc    { color: #9ca3af; }
.footer-links strong { color: #ffffff; }
.footer-links a { color: #9ca3af; }
.footer-bottom  { border-top: 1px solid rgba(255,255,255,0.05); color: #6b7280; }

/* ── Auth Modal ────────────────────────────────────────────── */
.auth-modal-overlay { background: rgba(0,0,0,0.8); }
.auth-modal-card    { background: #111827; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8); }
.auth-modal-close   { color: #9ca3af; }
.auth-modal-close:hover { color: #ffffff; }
.auth-modal-logo-title { color: #ffffff; }
.auth-modal-subtitle   { color: #94a3b8; }
.auth-tabs             { background: rgba(31,41,55,0.8); border: 1px solid rgba(255,255,255,0.08); }
.auth-tab              { color: #9ca3af; }
.auth-tab:hover:not(.active) { color: #ffffff; }

.auth-modal-card .form-label { color: #f3f4f6 !important; }
.auth-modal-card .form-input { background: #1f2937 !important; color: #ffffff !important; border: 1.5px solid #374151 !important; }
.auth-modal-card .form-input::placeholder { color: #9ca3af !important; }
.auth-modal-card .form-hint { color: #94a3b8; }
.auth-modal-card .photo-upload-compact { background: #1f2937; border: 1.5px dashed #475569; }
.auth-modal-card .photo-compact-content { color: #cbd5e1; }
.auth-modal-card::-webkit-scrollbar-track { background: rgba(17,24,39,0.6); }
.auth-modal-card::-webkit-scrollbar-thumb { background: #334155; }
.auth-modal-card { scrollbar-color: #334155 rgba(17,24,39,0.6); scrollbar-width: thin; }

.login-error,
.auth-modal-card .login-error {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
  border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
}

.auth-notice-box { background: rgba(30,58,138,0.25); border: 1px solid rgba(59,130,246,0.4); color: #93c5fd; }
.auth-remember-label { color: #f1f5f9; }
.auth-forgot-link { color: #34d399; }
.auth-forgot-link:hover { color: #6ee7b7; }
.checkbox-label  { color: #cbd5e1; }
.auth-recaptcha-notice { color: #64748b; }
.auth-recaptcha-notice a { color: #94a3b8; }

.auth-success-title { color: #ffffff; }
.auth-success-desc  { color: #cbd5e1; }
.auth-email-notice  { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: #a7f3d0; }
.auth-expedite-title { color: #94a3b8; }

.auth-modal-card input:-webkit-autofill,
.auth-modal-card input:-webkit-autofill:hover,
.auth-modal-card input:-webkit-autofill:focus,
.auth-modal-card input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #1f2937 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Mobile dark ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .landing-navbar { background: rgba(11, 15, 23, 0.98); }
  .nav-links {
    background:
      radial-gradient(ellipse 90% 50% at 85% -5%, rgba(16, 185, 129, 0.25) 0%, transparent 60%),
      radial-gradient(ellipse 80% 50% at 15% 100%, rgba(6, 182, 212, 0.18) 0%, transparent 60%),
      radial-gradient(circle at 50% 45%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
      linear-gradient(180deg, #0b0f17 0%, #06090e 100%) !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
  .nav-link-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #f3f4f6 !important;
  }
  .nav-link-item:hover, .nav-link-item:active {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #34d399 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
  }
  .nav-link-chevron {
    color: rgba(255, 255, 255, 0.35) !important;
  }
  .btn-mobile-sec {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    backdrop-filter: blur(10px);
  }
  .btn-mobile-sec:hover, .btn-mobile-sec:active {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
  }
  .btn-mobile-pri {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.38) !important;
    color: #ffffff !important;
    border: none !important;
  }
  .nav-mobile-footer-card {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .nav-mobile-direct-wa-btn {
    background: rgba(37, 211, 102, 0.12) !important;
    border: 1px solid rgba(37, 211, 102, 0.3) !important;
    color: #f3f4f6 !important;
  }
  .nav-mobile-direct-wa-btn:hover, .nav-mobile-direct-wa-btn:active {
    background: rgba(37, 211, 102, 0.2) !important;
    border-color: rgba(37, 211, 102, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
  }
  .nav-mobile-direct-wa-btn .nav-wa-title { color: #4ade80; }
  .nav-mobile-direct-wa-btn .nav-wa-sub { color: #9ca3af; }
  .nav-mobile-direct-wa-btn .nav-wa-arrow { color: #4ade80; }
  .nav-social-section-label { color: #9ca3af; }
  .nav-social-wa {
    background: rgba(37, 211, 102, 0.14) !important;
    border: 1px solid rgba(37, 211, 102, 0.35) !important;
    color: #25d366 !important;
  }
  .nav-social-wa:hover, .nav-social-wa:active {
    background: #25d366 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  }
  .nav-social-ig {
    background: rgba(225, 48, 108, 0.14) !important;
    border: 1px solid rgba(225, 48, 108, 0.35) !important;
    color: #f43f5e !important;
  }
  .nav-social-ig:hover, .nav-social-ig:active {
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(225, 48, 108, 0.45);
  }
  .nav-social-fb {
    background: rgba(24, 119, 242, 0.14) !important;
    border: 1px solid rgba(24, 119, 242, 0.35) !important;
    color: #3b82f6 !important;
  }
  .nav-social-fb:hover, .nav-social-fb:active {
    background: #1877f2 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.45);
  }
  .nav-social-tel {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #e5e7eb !important;
  }
  .nav-social-tel:hover, .nav-social-tel:active {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
  }
  .nav-social-loc {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.28) !important;
    color: #34d399 !important;
  }
  .nav-social-loc:hover, .nav-social-loc:active {
    background: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
  }
  .nav-toggle { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff; }
  .btn-theme-toggle-topbar { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff; }
}