/* ============================================
   B3Fin — Ajustes Home (Ajustes.txt)
   ============================================ */

/* Espaçamento vertical mais contínuo entre seções */
section { padding: 80px 0 !important; }
@media (max-width: 720px) {
  section { padding: 56px 0 !important; }
}

/* ----- HERO ----- */
.hero { padding: 140px 0 80px !important; min-height: auto !important; }
.hero-title { font-size: 55px !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; }
.hero-lede { font-size: 20px !important; color: #ffffff !important; line-height: 1.55 !important; }
.hero-actions { margin-top: 36px !important; }
.hero-footer { display: none !important; }

/* ----- TÍTULOS DE SEÇÃO (40px, 2 linhas, branco) ----- */
.section-title,
.section-title--md,
.section-title--sm,
.stats-manifesto,
.manifesto-title,
.manifesto-title--md {
  font-size: 40px !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  max-width: 24ch;
  text-wrap: balance;
}
@media (max-width: 720px) {
  .section-title,
  .section-title--md,
  .section-title--sm,
  .stats-manifesto,
  .manifesto-title,
  .manifesto-title--md { font-size: 30px !important; }
}

/* mantém o dourado nas palavras destacadas (em) */
.stats-manifesto em,
.manifesto-title em,
.cta-title em { color: var(--bt-gold-light) !important; }

/* ----- SECTION-LABEL: traço dourado + texto com asterisco em branco ----- */
.section-label {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.section-label::before {
  width: 48px !important;
  height: 1px !important;
  background: var(--bt-gold-light) !important;
}

/* ----- CORPO DE TEXTO (20px branco) ----- */
.section-lede,
.verticals-note,
.manifesto-body p,
.vertical-desc,
.leader-bio,
.team-carousel-lede,
.driver-text {
  font-size: 20px !important;
  color: #ffffff !important;
  line-height: 1.55 !important;
}

/* ----- BOTÕES / CTAs (18px) ----- */
.btn,
.nav-cta,
.vertical-link {
  font-size: 18px !important;
}

/* ----- DRIVERS ----- */
.driver-num { font-size: 22px !important; }

/* ----- VERTICAIS ----- */
.vertical-title { font-size: 28px !important; color: #ffffff !important; }
.vertical-num { color: var(--bt-gold-light) !important; }

/* ----- STATS ----- */
.stats-grid,
.stats-grid--2 {
  border-top: 0 !important; /* remove linha horizontal */
  margin-top: 56px !important;
}
.stat {
  border-bottom: 0 !important;
  padding: 0 32px !important;
}
.stat:first-child { padding-left: 0 !important; }
.stat:last-child { border-right: 0 !important; padding-right: 0 !important; }

.stat-label {
  font-family: var(--font-display) !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}
.stat-number {
  font-size: 60px !important;
  margin: 18px 0 0 !important;
  color: #ffffff !important;
}
.stat-number .unit {
  font-size: 0.5em !important;
  color: var(--bt-gold-light) !important;
}
.stat-caption {
  font-size: 20px !important;
  color: #ffffff !important;
  line-height: 1.5 !important;
  margin: 18px 0 0 !important;
  max-width: 38ch;
}

/* ----- LEADERSHIP / SENIORS ----- */
.leader-name { color: #ffffff !important; }
.leader-role { color: var(--bt-gold-light) !important; }
.senior-name { color: #ffffff !important; font-size: 18px !important; }
.senior-role {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--bt-gold-light) !important;
  letter-spacing: 0.02em !important;
}

/* ----- CTA SECTION ----- */
.cta-title {
  font-size: 48px !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
}
@media (max-width: 720px) {
  .cta-title { font-size: 32px !important; }
}

/* ----- FOOTER ----- */
.footer { padding: 48px 0 32px !important; }
.footer-inner {
  grid-template-columns: 1.4fr 1fr 1fr !important;
  gap: 40px !important;
}
@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr !important; }
}
.footer h5 {
  font-size: 14px !important;
  color: #ffffff !important;
  letter-spacing: 0.18em !important;
}
.footer a,
.footer-parent {
  font-size: 18px !important;
  color: #ffffff !important;
  opacity: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.footer-bottom {
  font-size: 14px !important;
  color: #ffffff !important;
  opacity: 0.7;
}

/* ----- MOBILE STATS FIX -----
   Neutralizes the 0 32px padding from desktop stats so mobile cards
   align flush left with the rest of the page content. */
@media (max-width: 860px) {
  .stat { padding: 36px 0 !important; }
  .stat:first-child { padding-top: 0 !important; padding-left: 0 !important; }
  .stat:last-child { padding-bottom: 0 !important; padding-right: 0 !important; }
}

/* ----- MOBILE TYPOGRAPHY FIX -----
   Reduce hero/headline sizes on mobile (the !important above sets 55px
   which is way too large on small screens). */
@media (max-width: 720px) {
  .hero-title { font-size: 40px !important; line-height: 1.08 !important; }
}
@media (max-width: 480px) {
  .hero-title { font-size: 36px !important; }
}

/* ----- MOBILE LEADERSHIP FIX -----
   Remove the divider line above the leader photo on mobile. */
@media (max-width: 860px) {
  .leadership-grid { border-top: 0 !important; padding-top: 0 !important; }
}

/* ----- MOBILE HERO TITLE: merge bottom 3 lines into a flowing block -----
   Desktop: 4 forced lines via <br/>. Mobile: hide line breaks 2-3 so
   lines 2-4 flow as one continuous block, filling empty space on the right
   instead of leaving orphan words like "mais" or "do" alone on a line. */
.hero-title-mobile-space { display: none; }
@media (max-width: 720px) {
  .hero-title .hero-title-br-mobile-hide { display: none; }
  .hero-title-mobile-space { display: inline; }
}