/* =============================================
   Jornada E-commerce 360 — Custom CSS
   Paleta: #111425 (base) | #2b446d (depth) | #e8c018 (accent)
   Design: dark navy premium, gold only on CTAs & key accents
   ============================================= */

:root {
  --gold:        #e8c018;
  --gold-light:  #f5d840;
  --gold-dark:   #c4a014;
  --blue:        #2b446d;
  --blue-light:  #3a5a8a;
  --blue-dark:   #1e3050;
  --base:        #111425;
  --base-deep:   #0b1020;
  --base-card:   #171f38;
  --base-border: #2b446d;
}

/* === GLOBAL === */
html { scroll-behavior: smooth; }
body { background: var(--base); }
::selection { background: var(--gold); color: #000; }

/* === HEADER === */
#header {
  background: transparent;
  transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}
#header.scrolled {
  background: rgba(11, 16, 32, 0.95);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(43, 68, 109, 0.4);
}

/* === BACKGROUNDS === */
.hero-bg {
  background:
    radial-gradient(ellipse at 25% 40%, rgba(43, 68, 109, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 60%, rgba(11, 16, 32, 0.8) 0%, transparent 50%),
    linear-gradient(160deg, #080e1d 0%, #111425 45%, #0e1830 100%);
}

.grid-overlay {
  background-image:
    linear-gradient(rgba(43, 68, 109, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 68, 109, 0.10) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Glow azul para seções de autoridade */
.section-glow-blue {
  background: radial-gradient(ellipse at 50% 0%, rgba(43, 68, 109, 0.35) 0%, transparent 65%);
}

/* Glow dourado sutil para CTA */
.section-glow-gold {
  background: radial-gradient(ellipse at 50% 0%, rgba(232, 192, 24, 0.07) 0%, transparent 60%);
}

/* Glow azul inferior */
.section-glow-bottom {
  background: radial-gradient(ellipse at 50% 100%, rgba(43, 68, 109, 0.25) 0%, transparent 60%);
}

/* Mantido por compatibilidade */
.section-glow-neon { background: radial-gradient(ellipse at 50% 100%, rgba(43, 68, 109, 0.2) 0%, transparent 60%); }

/* CTA intermediário — abismo azul-marinho */
.cta-mid-bg {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(232, 192, 24, 0.06) 0%, transparent 50%),
    linear-gradient(160deg, #080e1d 0%, #0e1830 50%, #080e1d 100%);
}

/* === SECTION DEPTHS === */
.section-deep { background: var(--base-deep); }
.section-mid  { background: var(--base); }

/* === BUTTONS === */
.btn-gold {
  background: linear-gradient(135deg, #c4a014 0%, #e8c018 40%, #f5d840 100%);
  background-size: 200% auto;
  color: #05090f;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background-position 0.4s, transform 0.2s, box-shadow 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-gold:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(232, 192, 24, 0.30);
}

/* Botão neon = CTA secundário importantíssimo (ex: enviar inscrição) */
.btn-neon {
  background: linear-gradient(135deg, #c4a014 0%, #e8c018 100%);
  color: #05090f;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform 0.2s, box-shadow 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-neon:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(232, 192, 24, 0.28);
}

/* Botão outline azul — para CTAs secundários (ex: "Ver o conteúdo") */
.btn-outline {
  border: 1.5px solid rgba(43, 68, 109, 0.7);
  color: #a0b4d0;
  font-weight: 600;
  transition: border-color .25s, color .25s, background .25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-outline:hover {
  border-color: var(--blue-light);
  color: #fff;
  background: rgba(43, 68, 109, 0.15);
}

/* === SHADOWS === */
.shadow-gold { box-shadow: 0 10px 40px rgba(232, 192, 24, 0.22); }
.shadow-blue  { box-shadow: 0 4px 24px rgba(43, 68, 109, 0.40); }
.shadow-neon  { box-shadow: 0 4px 24px rgba(232, 192, 24, 0.22); }

/* === GRADIENT TEXT (somente ouro, sem verde) === */
.gradient-text {
  background: linear-gradient(135deg, #e8c018 0%, #f5d840 45%, #e8c018 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === CARD GLOW (hover elegante) === */
.card-hover {
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.card-hover:hover {
  border-color: rgba(43, 68, 109, 0.7) !important;
  box-shadow: 0 0 0 1px rgba(43, 68, 109, 0.3), 0 8px 32px rgba(11, 16, 32, 0.5);
  transform: translateY(-2px);
}

/* === DASHBOARD CARD (hero float animation) === */
.dashboard-card {
  background: linear-gradient(145deg, #1a2640 0%, #171f38 100%);
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

/* === SALE NOTIFICATION === */
.sale-notification {
  opacity: 1;
  will-change: transform, opacity;
  animation: none !important;
}
.sale-notification.notif-hidden {
  opacity: 0 !important;
  transform: scale(0.85) translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sale-notification.notif-visible {
  opacity: 1 !important;
  transform: scale(1) translateY(0);
  animation: notifPulse 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
@keyframes notifPulse {
  0%   { opacity: 0; transform: scale(0.7) translateY(10px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(-3px); }
  80%  { transform: scale(0.97) translateY(1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* === STAT CARDS === */
.stat-card {
  background: linear-gradient(135deg, rgba(27, 38, 64, 0.8) 0%, rgba(17, 20, 37, 0.6) 100%);
  backdrop-filter: blur(4px);
}

/* === MODULE CARDS === */
.module-card {
  transition: border-color .25s, background .25s, transform .25s;
}
.module-card:hover {
  background: linear-gradient(135deg, rgba(43, 68, 109, 0.12) 0%, rgba(23, 31, 56, 0.95) 100%);
  border-color: rgba(43, 68, 109, 0.6) !important;
  transform: translateY(-2px);
}

/* === TESTIMONIAL RESULT BADGE === */
.result-badge {
  background: rgba(43, 68, 109, 0.25);
  border: 1px solid rgba(43, 68, 109, 0.5);
  border-radius: .5rem;
  padding: .375rem .75rem;
  text-align: center;
}
.result-badge p { color: #a8c4e8; font-weight: 700; font-size: .875rem; }

/* === TESTIMONIAL CAROUSEL === */
.carousel-wrapper { cursor: grab; }
.carousel-wrapper:active { cursor: grabbing; }
.testimonial-card {
  border: 1px solid rgba(43, 68, 109, 0.4);
  background: linear-gradient(145deg, #1a2640 0%, #141c30 100%);
  transition: border-color .25s, transform .25s;
}
.testimonial-card:hover {
  border-color: rgba(43, 68, 109, 0.7);
  transform: translateY(-2px);
}

/* === CHECK ITEMS (depois da jornada) === */
.check-item {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(43, 68, 109, 0.35);
  border: 1px solid rgba(43, 68, 109, 0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: #a8c4e8;
  flex-shrink: 0;
}

/* === FORM STYLES === */
.form-label {
  display: block;
  font-size: .875rem;
  color: #8090a8;
  margin-bottom: .375rem;
  font-weight: 500;
}
.form-input {
  width: 100%;
  background: rgba(11, 16, 32, 0.7);
  border: 1px solid rgba(43, 68, 109, 0.5);
  border-radius: .75rem;
  padding: .75rem 1rem;
  color: #f0f0f0;
  font-size: .9375rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232, 192, 24, 0.10);
}
.form-input::placeholder { color: #3a4a5e; }
.form-input option { background: var(--base-card); }

/* === MULTI-STEP INDICATOR === */
.step-indicator {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  background: rgba(43, 68, 109, 0.3);
  border: 1.5px solid rgba(43, 68, 109, 0.5);
  color: #6080a0;
  flex-shrink: 0;
  transition: background .3s, color .3s, border-color .3s;
}
.step-indicator.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #000;
  box-shadow: 0 0 16px rgba(232, 192, 24, 0.35);
}
.step-indicator.done {
  background: rgba(43, 68, 109, 0.5);
  border-color: rgba(43, 68, 109, 0.8);
  color: #a8c4e8;
}
.step-line {
  height: 2px;
  background: rgba(43, 68, 109, 0.3);
  transition: background .4s;
}
.step-line.done { background: var(--gold); }

/* === FAQ === */
.faq-item {
  background: linear-gradient(135deg, #141c30 0%, #111425 100%);
  border: 1px solid rgba(43, 68, 109, 0.3);
  transition: border-color .25s;
}
.faq-item:hover { border-color: rgba(43, 68, 109, 0.6); }
.faq-btn:hover { background: rgba(43, 68, 109, 0.06); }
.faq-icon.open { transform: rotate(45deg); }

/* === PAIN CARDS === */
.pain-card {
  background: linear-gradient(135deg, rgba(30, 10, 10, 0.5) 0%, rgba(17, 20, 37, 0.5) 100%);
  transition: border-color .25s, transform .25s;
}
.pain-card:hover {
  border-color: rgba(200, 60, 60, 0.5) !important;
  transform: translateY(-2px);
}

/* === BEFORE/AFTER CARDS === */
.before-card {
  background: linear-gradient(135deg, rgba(40, 10, 10, 0.4) 0%, rgba(17, 20, 37, 0.6) 100%);
}
.after-card {
  background: linear-gradient(135deg, rgba(43, 68, 109, 0.18) 0%, rgba(17, 20, 37, 0.8) 100%);
  border-color: rgba(43, 68, 109, 0.5) !important;
}

/* === ANIMATIONS === */
@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.animate-bounce-slow { animation: bounce-slow 2.5s ease-in-out infinite; }

/* === PROGRESS BAR === */
.progress-bar {
  background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
  animation: growWidth 1.5s ease-out forwards;
  transform-origin: left;
}
@keyframes growWidth { from { width: 0; } }

/* === GOLD BADGE === */
.gold-badge {
  background: linear-gradient(135deg, rgba(196, 160, 20, 0.15) 0%, rgba(232, 192, 24, 0.08) 100%);
  border: 1px solid rgba(232, 192, 24, 0.3);
  color: var(--gold);
}

/* === VAGAS BADGE === */
.vagas-badge {
  background: rgba(43, 68, 109, 0.25);
  border: 1px solid rgba(43, 68, 109, 0.5);
  color: #a8c4e8;
}

/* === MOBILE CTA BAR === */
.mobile-cta-bar {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* === RESPONSIVE TWEAKS === */
@media (max-width: 640px) {
  h1 { font-size: 2.25rem !important; line-height: 1.2 !important; }
  .dashboard-card { animation: none; }
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--base-deep); }
::-webkit-scrollbar-thumb { background: var(--blue-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }