/* ============================================================
   CONDUTOR DIGITAL BRASIL — Visual Enhancements v1.0
   Melhorias estéticas adicionais: botões, hero, cards, seções
   ============================================================ */

/* ============================================================
   NAVBAR — melhorias adicionais
   ============================================================ */
.nav-logo-inner {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 55%);
  border-radius: inherit;
}

/* Separador entre nav-links e nav-actions */
.nav-divider {
  width: 1px; height: 24px;
  background: var(--border);
  margin: 0 0.5rem;
}

/* Botão de Enviar Multa com destaque extra */
.nav-actions .btn-secondary {
  border-color: rgba(0,85,229,0.25);
  color: var(--brand-blue);
  font-weight: 600;
}
.nav-actions .btn-secondary:hover {
  background: rgba(0,85,229,0.06);
  border-color: rgba(0,85,229,0.4);
}

/* ============================================================
   HERO — trust chips refinados
   ============================================================ */
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.34rem 0.95rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  border: 1.5px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  white-space: nowrap;
  transition: all 0.2s ease;
}
.hero-chip:hover { background: rgba(255,255,255,0.10); }
.hero-chip i { font-size: 0.6rem; }
.hero-chip.chip-green {
  border-color: rgba(34,197,94,0.35);
  color: #4ADE80;
  background: rgba(34,197,94,0.10);
}
.hero-chip.chip-yellow {
  border-color: rgba(251,191,36,0.35);
  color: #FBBF24;
  background: rgba(251,191,36,0.10);
}
.hero-chip.chip-blue {
  border-color: rgba(96,171,255,0.35);
  color: #93C5FD;
  background: rgba(96,171,255,0.10);
}

/* Título hero com tamanho mais impactante */
.hero-title {
  font-size: clamp(2.5rem, 5.5vw, 4.2rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -2px !important;
}

/* Subtítulo mais legível */
.hero-subtitle {
  font-size: 1.07rem !important;
  color: rgba(255,255,255,0.72) !important;
  max-width: 540px !important;
  line-height: 1.82 !important;
}

/* Hero CTA — botão principal mais impactante */
.hero-cta-group .btn-accent {
  font-size: 1.02rem;
  padding: 0.9rem 2.2rem;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 24px rgba(245,140,0,0.38);
}
.hero-cta-group .btn-accent:hover {
  box-shadow: 0 10px 36px rgba(245,140,0,0.52);
}

/* Stats row hero mais visíveis */
.hero-stat-num {
  font-size: 2rem !important;
  color: #FBBF24 !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.5px;
}
.hero-stat-lbl {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.52) !important;
  margin-top: 4px !important;
  letter-spacing: 0.3px;
}

/* Dashboard card — visual mais rico */
.hero-dash {
  position: relative;
  background: rgba(8,18,42,0.65) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 22px !important;
  padding: 1.625rem !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.09) !important;
}

/* Linha decorativa no topo do dashboard card */
.hero-dash::before {
  content: '';
  position: absolute;
  top: 0; left: 1.5rem; right: 1.5rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,140,255,0.6), rgba(0,200,255,0.4), transparent);
  border-radius: 0 0 2px 2px;
}

.dash-kpi-val {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #5BB8FF !important;
  line-height: 1 !important;
}

/* Security badges mais suaves */
.sec-badge {
  font-size: 0.66rem !important;
  color: rgba(255,255,255,0.42) !important;
  font-weight: 600 !important;
  gap: 5px !important;
}

/* ============================================================
   TRUST MARQUEE — mais estilizada
   ============================================================ */
.trust-marquee {
  background: #FFFFFF !important;
  border-top: 1.5px solid #EBF0F8 !important;
  border-bottom: 1.5px solid #EBF0F8 !important;
  padding: 0.85rem 0 !important;
}
.trust-item {
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  color: #8898B0 !important;
  letter-spacing: 1.2px !important;
  padding: 0 1.75rem !important;
  gap: 8px !important;
}
.trust-dot {
  width: 4px !important;
  height: 4px !important;
  background: #0055E5 !important;
  opacity: 0.45 !important;
}

/* ============================================================
   SECTION HEADERS — melhorias gerais
   ============================================================ */
.section-header {
  margin-bottom: 3rem !important;
}

/* ============================================================
   STEPS — "Como Funciona"
   ============================================================ */
.step-num {
  background: white !important;
  border: 2.5px solid #0055E5 !important;
  box-shadow: 0 0 0 7px rgba(0,85,229,0.08) !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  color: #0055E5 !important;
  transition: all 0.28s ease !important;
}
.step-card:hover .step-num {
  background: linear-gradient(135deg, #0055E5, #0099CC) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 7px rgba(0,85,229,0.12), 0 8px 24px rgba(0,85,229,0.28) !important;
}
.step-title {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.6rem !important;
}
.step-desc {
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
  line-height: 1.72 !important;
}

/* ============================================================
   SERVICE CARDS — visual mais limpo
   ============================================================ */
.svc-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E8EFF8 !important;
  border-radius: 16px !important;
  padding: 1.625rem !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
}
.svc-card:hover {
  border-color: rgba(0,85,229,0.28) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 44px rgba(0,85,229,0.12) !important;
}
.svc-icon {
  width: 52px !important; height: 52px !important;
  background: rgba(0,85,229,0.07) !important;
  border: 1.5px solid rgba(0,85,229,0.13) !important;
  border-radius: 14px !important;
  font-size: 1.4rem !important;
  margin-bottom: 1.1rem !important;
  transition: all 0.25s ease !important;
}
.svc-card:hover .svc-icon {
  background: linear-gradient(135deg, #0055E5, #0099CC) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(0,85,229,0.30) !important;
  transform: scale(1.06) !important;
}
.svc-name {
  font-size: 0.97rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.45rem !important;
}
.svc-desc {
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  line-height: 1.68 !important;
  margin-bottom: 0.875rem !important;
}
.svc-link {
  font-size: 0.79rem !important;
  font-weight: 700 !important;
  color: var(--brand-blue) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: gap 0.2s ease !important;
}
.svc-card:hover .svc-link { gap: 9px !important; }

/* ============================================================
   FEATURE ITEMS — Empresas section
   ============================================================ */
.feat-item {
  background: #FAFBFF !important;
  border: 1.5px solid #E8EFF8 !important;
  border-radius: 14px !important;
  padding: 1.1rem 1.2rem !important;
  transition: all 0.25s ease !important;
}
.feat-item:hover {
  border-color: rgba(0,85,229,0.20) !important;
  background: #F5F8FF !important;
  box-shadow: 0 4px 14px rgba(0,85,229,0.07) !important;
  transform: translateX(4px) !important;
}
.feat-ico {
  background: rgba(0,85,229,0.08) !important;
  border: 1.5px solid rgba(0,85,229,0.14) !important;
  border-radius: 11px !important;
  color: var(--brand-blue) !important;
  width: 40px !important;
  height: 40px !important;
}

/* ============================================================
   MINI STAT CARDS — Empresas
   ============================================================ */
.mini-stat {
  background: white !important;
  border: 1.5px solid #E8EFF8 !important;
  border-radius: 16px !important;
  padding: 1.625rem 1.25rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  transition: all 0.25s ease !important;
  text-align: left;
}
.mini-stat:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,85,229,0.10) !important;
  border-color: rgba(0,85,229,0.18) !important;
}
.mini-stat-icon {
  font-size: 1.85rem !important;
  margin-bottom: 0.875rem !important;
  display: block !important;
}
.mini-stat-val {
  font-size: 1.95rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 5px !important;
  letter-spacing: -0.5px;
}
.mini-stat-lbl {
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
  font-weight: 500;
}

/* ============================================================
   STATS BANNER — visual mais dramático
   ============================================================ */
.stats-banner {
  margin: 0 !important;
  border-radius: 0 !important;
}
.stat-number {
  font-size: 3rem !important;
  letter-spacing: -1.5px !important;
}
.stat-item {
  position: relative;
}
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50%;
  background: rgba(255,255,255,0.08);
}

/* ============================================================
   BENEFIT CARDS — mais visuais
   ============================================================ */
.ben-card {
  background: white !important;
  border: 1.5px solid #E8EFF8 !important;
  border-radius: 18px !important;
  padding: 1.875rem 1.5rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  text-align: left !important;
}
.ben-card:hover {
  border-color: rgba(0,85,229,0.22) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,85,229,0.10) !important;
}
.ben-icon {
  width: 60px !important;
  height: 60px !important;
  background: rgba(0,85,229,0.07) !important;
  border: 1.5px solid rgba(0,85,229,0.12) !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.75rem !important;
  margin: 0 0 1.25rem !important;
  transition: all 0.25s ease !important;
}
.ben-card:hover .ben-icon {
  background: linear-gradient(135deg, #0055E5, #0099CC) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(0,85,229,0.28) !important;
  transform: scale(1.05) !important;
}
.ben-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: -0.2px;
}
.ben-desc {
  font-size: 0.84rem !important;
  color: var(--text-muted) !important;
  line-height: 1.7 !important;
}

/* ============================================================
   COURSE CARDS — mais limpos
   ============================================================ */
.course-card {
  border-radius: 18px !important;
  border: 1.5px solid #E8EFF8 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
}
.course-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.09) !important;
  border-color: rgba(0,85,229,0.20) !important;
}
.course-header {
  height: 64px !important;
  padding: 0 1.5rem !important;
}
.course-name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.course-price {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--brand-blue) !important;
}

/* ============================================================
   TESTIMONIAL CARDS — mais elegantes
   ============================================================ */
.testi-card {
  background: white !important;
  border: 1.5px solid #E8EFF8 !important;
  border-radius: 20px !important;
  padding: 1.875rem !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.testi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,85,229,0.25), transparent);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.testi-card:hover { transform: translateY(-5px) !important; box-shadow: 0 16px 44px rgba(0,0,0,0.09) !important; }
.testi-card:hover::before { opacity: 1; }
.testi-card.featured {
  border-color: rgba(0,85,229,0.22) !important;
  box-shadow: 0 6px 24px rgba(0,85,229,0.10) !important;
}
.testi-card.featured::before { opacity: 1; }
.testi-quote-icon {
  font-size: 3rem !important;
  color: rgba(0,85,229,0.07) !important;
  top: 1rem !important;
  right: 1.25rem !important;
  font-family: Georgia, serif !important;
  line-height: 1 !important;
}
.testi-stars { font-size: 0.9rem !important; letter-spacing: 3px !important; color: #F59E0B !important; }
.testi-text { font-size: 0.90rem !important; line-height: 1.80 !important; color: var(--text-secondary) !important; }
.testi-name { font-weight: 700 !important; font-size: 0.92rem !important; }
.testi-role { font-size: 0.76rem !important; color: var(--text-muted) !important; }

/* Trust row abaixo dos depoimentos */
.trust-row { border-top: 1.5px solid #EBF0F8 !important; }
.trust-metric-val { font-size: 2rem !important; font-weight: 800 !important; letter-spacing: -0.5px; }

/* ============================================================
   FAQ — melhorias
   ============================================================ */
.faq-question {
  padding: 1.2rem 1.5rem !important;
  font-size: 0.93rem !important;
  font-weight: 600 !important;
}
.faq-question:hover { color: var(--brand-blue) !important; }
.faq-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid #CBD5E1 !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--text-light) !important;
  transition: all 0.25s ease !important;
}
.faq-item.active .faq-icon {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: white !important;
  transform: rotate(45deg) !important;
}
.faq-answer-inner {
  font-size: 0.875rem !important;
  color: var(--text-muted) !important;
  line-height: 1.80 !important;
  padding: 0 1.5rem 1.375rem !important;
}

/* ============================================================
   CTA SECTION — melhorias visuais
   ============================================================ */
.cta-chip {
  font-size: 0.68rem !important;
  letter-spacing: 1.3px !important;
  padding: 0.4rem 1.15rem !important;
}
.cta-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
  letter-spacing: -1.5px !important;
  line-height: 1.10 !important;
}
.cta-sub {
  font-size: 1.02rem !important;
  color: rgba(255,255,255,0.58) !important;
  line-height: 1.82 !important;
}
.cta-trust-item {
  font-size: 0.77rem !important;
  color: rgba(255,255,255,0.42) !important;
  gap: 7px !important;
}
.cta-trust-item i { font-size: 0.82rem; }

/* ============================================================
   FOOTER — melhorias
   ============================================================ */
.social-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  transition: all 0.22s ease !important;
}
.social-btn:hover {
  background: rgba(0,85,229,0.25) !important;
  border-color: rgba(0,85,229,0.38) !important;
  color: #80BCFF !important;
  transform: translateY(-2px) !important;
}
.footer-links a {
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.42) !important;
  transition: all 0.2s ease !important;
}
.footer-links a:hover {
  color: #7BB5FF !important;
  padding-left: 5px !important;
}
.footer-col h4 {
  font-size: 0.68rem !important;
  letter-spacing: 2.2px !important;
  color: rgba(255,255,255,0.36) !important;
}

/* ============================================================
   UTILITÁRIOS — NOVOS
   ============================================================ */
/* Separador elegante entre seções */
.section-divider {
  width: 60px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 999px;
  margin: 1.25rem 0;
}
.section-divider.center { margin: 1.25rem auto; }

/* Pill badge de destaque inline */
.inline-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.18rem 0.65rem;
  background: rgba(0,85,229,0.09);
  border: 1px solid rgba(0,85,229,0.18);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand-blue);
  letter-spacing: 0.5px;
}

/* ============================================================
   HERO BADGE — mais polido
   ============================================================ */
.hero-badge {
  background: rgba(245,184,0,0.11) !important;
  border: 1.5px solid rgba(245,184,0,0.32) !important;
  color: #FBBF24 !important;
  padding: 0.46rem 1.2rem !important;
  font-size: 0.68rem !important;
  letter-spacing: 1.8px !important;
  margin-bottom: 1.75rem !important;
  backdrop-filter: blur(8px) !important;
  width: fit-content !important;
}

/* ============================================================
   NAVBAR BRAND — visual mais polido
   ============================================================ */
.nav-brand:hover .nav-brand-name { color: var(--brand-blue); }
.nav-logo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 55%);
  border-radius: inherit;
  pointer-events: none;
}

/* ============================================================
   SEÇÃO EMPRESAS — polimento
   ============================================================ */
.empresa-grid {
  gap: 4.5rem !important;
}

/* ============================================================
   AGENCY TAGS — mais visuais
   ============================================================ */
.agency-tag {
  background: #EEF4FF !important;
  border: 1.5px solid rgba(0,85,229,0.15) !important;
  border-radius: 8px !important;
  padding: 0.32rem 0.8rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--brand-blue) !important;
  transition: all 0.2s ease !important;
}
.agency-tag:hover {
  background: rgba(0,85,229,0.10) !important;
  border-color: rgba(0,85,229,0.28) !important;
  transform: translateY(-1px) !important;
}
.agency-lbl {
  font-size: 0.68rem !important;
  color: var(--text-light) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  margin-right: 0.35rem !important;
}

/* ============================================================
   FAQ SIDE CARD — refinado
   ============================================================ */
.faq-side-card {
  background: #F7FAFF !important;
  border: 1.5px solid rgba(0,85,229,0.12) !important;
  border-radius: 16px !important;
  padding: 1.625rem !important;
  box-shadow: 0 2px 10px rgba(0,85,229,0.06) !important;
  margin-top: 1.75rem !important;
}

/* ============================================================
   FOOTER — polimento extra
   ============================================================ */
.footer-bottom p { font-size: 0.76rem !important; }
.footer-desc { max-width: 290px !important; line-height: 1.75 !important; }

/* Logo CDB no footer */
footer .nav-logo {
  box-shadow: 0 4px 14px rgba(0,85,229,0.28) !important;
}

/* ============================================================
   BOTÃO WHATSAPP FLUTUANTE — com label
   ============================================================ */
.whatsapp-float {
  width: auto !important;
  border-radius: 999px !important;
  padding: 0 1.25rem !important;
  gap: 8px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}
.whatsapp-float::after {
  content: 'WhatsApp';
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.2px;
}
@media (max-width: 480px) {
  .whatsapp-float { width: 52px !important; padding: 0 !important; border-radius: 50% !important; font-size: 1.4rem !important; }
  .whatsapp-float::after { display: none; }
}

/* ============================================================
   ANIMAÇÕES DE ENTRADA — delay em cascata
   ============================================================ */
.services-grid .svc-card:nth-child(1) { transition-delay: 0.05s; }
.services-grid .svc-card:nth-child(2) { transition-delay: 0.10s; }
.services-grid .svc-card:nth-child(3) { transition-delay: 0.15s; }
.services-grid .svc-card:nth-child(4) { transition-delay: 0.20s; }
.services-grid .svc-card:nth-child(5) { transition-delay: 0.25s; }
.services-grid .svc-card:nth-child(6) { transition-delay: 0.30s; }
.services-grid .svc-card:nth-child(7) { transition-delay: 0.35s; }
.services-grid .svc-card:nth-child(8) { transition-delay: 0.40s; }

.benefits-grid .ben-card:nth-child(1) { transition-delay: 0.05s; }
.benefits-grid .ben-card:nth-child(2) { transition-delay: 0.10s; }
.benefits-grid .ben-card:nth-child(3) { transition-delay: 0.15s; }
.benefits-grid .ben-card:nth-child(4) { transition-delay: 0.20s; }
.benefits-grid .ben-card:nth-child(5) { transition-delay: 0.25s; }
.benefits-grid .ben-card:nth-child(6) { transition-delay: 0.30s; }
.benefits-grid .ben-card:nth-child(7) { transition-delay: 0.35s; }
.benefits-grid .ben-card:nth-child(8) { transition-delay: 0.40s; }

/* ============================================================
   RESPONSIVIDADE — melhorias extras
   ============================================================ */
@media (max-width: 768px) {
  .hero-title { font-size: 2.25rem !important; letter-spacing: -1px !important; }
  .hero-subtitle { font-size: 0.97rem !important; }
  .hero-cta-group { flex-direction: column; gap: 0.75rem; }
  .hero-cta-group .btn { width: 100%; justify-content: center; }
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-btns .btn { width: 100%; max-width: 320px; justify-content: center; }
  .ben-card { text-align: left !important; }
  .ben-icon { margin: 0 0 1.1rem !important; }
}
@media (max-width: 480px) {
  .hero-stat-num { font-size: 1.6rem !important; }
  .stat-number   { font-size: 2.4rem !important; }
}