/* ==========================================================================
   InvestPro · page-home.css — Home 80/20 (rodada 2026-08-11)
   O design system e os componentes compartilhados vivem em system.css
   (admin-trio, timeline4, path-card, showcase, trust-seal, faq-index,
   slogan-line, eyebrow-gold, botão WhatsApp verde e o consentimento LGPD
   canônico — NÃO redeclarar cores do consent aqui: P0.2).
   Aqui ficam apenas overrides específicos desta página:
     · hero foto full-bleed (hero-consorcio-familia) com overlay leve
     · sobre (foto do escritório + acessos rápidos)
     · headers centrados das seções
     · comparativo rolando no próprio contêiner no mobile (P0.1)
     · nota de depoimentos pendentes (LGPD)
     · FAQ (grid sticky + accordion)
   ========================================================================== */

/* ===== HERO — foto full-bleed (80/20): a foto é a protagonista ===== */
body[data-page="home"] .hero-bg > img {
  filter: brightness(0.68) contrast(1.04) saturate(1.02);
  object-position: 60% 40%; /* mantém a família fora da área do texto */
}
body[data-page="home"] .hero-overlay {
  background:
    linear-gradient(90deg, rgba(7, 21, 42, 0.62) 0%, rgba(7, 21, 42, 0.18) 60%),
    linear-gradient(180deg, rgba(7, 21, 42, 0.10) 0%, rgba(7, 21, 42, 0.30) 60%, rgba(7, 21, 42, 0.66) 100%);
}
body[data-page="home"] .hero-overlay::after { display: none; } /* sheen desnecessário sobre foto */

/* faixa de métricas removida — só o scroll, sem régua */
body[data-page="home"] .hero-foot {
  grid-template-columns: 1fr;
  justify-items: end;
  border-top: 0;
  padding-top: 0;
}

/* coluna única, conectada e centralizada (só a home usa esta folha) */
.hero-master_grid.is-home-stacked {
  grid-template-columns: 1fr;
  align-content: center;
}
.hero-master_grid.is-home-stacked .headline-home-a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.2vw, 26px);
  max-width: 680px;
}
.hero-master_grid.is-home-stacked .hero-sub { max-width: 46ch; }

/* Contraste do micro-rótulo do hero (acessibilidade) */

/* ===== ADMINISTRADORAS (componente .admin-trio em system.css) ===== */
.section_about.is-admin-trio .logos_source {
  text-align: left;
  margin-top: 6px;
}

/* ===== SOBRE — foto real + micro-pilares + acessos rápidos ===== */
.about_media {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.about_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about_pillars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about_quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.about_quick a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--ink-strong);
  transition: border-color var(--t), color var(--t);
}
.about_quick a:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* ===== TRÊS CAMINHOS — header centrado (cards .path-card em system.css) ===== */
.services_header.is-centered {
  grid-template-columns: 1fr;
  justify-items: start;
  text-align: left;
}
.services_header.is-centered .services_header-left {
  align-items: flex-start;
}

/* ===== COMO FUNCIONA — header centrado (timeline .timeline4 em system.css) ===== */
.howit_header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
  max-width: 640px;
  margin: 0 0 clamp(36px, 4vw, 56px);
}
.howit_header .text-5xl { max-width: 20ch; }

/* ===== VITRINE (o que você conquista) — header (cards .showcase_card em system.css) ===== */
.section_categorias { background: var(--off); }
.cat_header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.cat_header .text-5xl { max-width: 18ch; }

/* ===== COMPARATIVO — <table> semântica real (th scope col/row) ==============
   O system.css estiliza .pillars_table como grid de <div>; na home a tabela
   virou <table> real (a11y sem sr-only). Overrides restauram o mesmo visual
   com display de tabela nativo (display:grid/flex em table/td destruiria a
   semântica). O flex interno vive no wrapper .p-cell_in. */
table.pillars_table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
table.pillars_table col.is-col-dim { width: 33.5%; }
table.pillars_table col.is-col-market { width: 30%; }
table.pillars_table col.is-col-ip { width: 36.5%; }
table.pillars_table .p-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}
table.pillars_table th { font-weight: 400; }
.p-cell_in {
  display: flex;
  align-items: center;
  gap: 14px;
}
table.pillars_table .p-cell.is-dim .p-cell_in {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
/* bordas por linha (o :nth-last-child(-n+3) do padrão grid zera o
   border-bottom de TODAS as células dentro de <tr>; refazemos aqui) */
table.pillars_table thead .p-cell,
table.pillars_table tbody tr:not(:last-child) .p-cell {
  border-bottom: 1px solid var(--border-2);
}
table.pillars_table tbody tr:last-child .p-cell { border-bottom: 0; }

/* Mobile: a tabela NÃO empilha (padrão grid do system.css) — ela rola no
   próprio contêiner (P0.1), com cabeçalhos visíveis e sem rótulos ::before */
@media (max-width: 991px) {
  .pillars_scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pillars_scroll table.pillars_table { min-width: 640px; }
  table.pillars_table .p-cell.is-head { display: table-cell; }
  table.pillars_table .p-cell.is-market::before,
  table.pillars_table .p-cell.is-ip::before { content: none; }
  table.pillars_table .p-cell.is-dim,
  table.pillars_table .p-cell.is-market {
    border-right: 1px solid var(--border-2) !important;
  }
  table.pillars_table .p-cell.is-dim,
  table.pillars_table .p-cell.is-dim:first-of-type {
    padding: clamp(22px, 2.6vw, 32px);
  }
  table.pillars_table .p-cell.is-ip { background: rgba(0, 114, 206, 0.04); }
}

/* ===== PROVA REAL — aspas display + nota de pendência (interim LGPD) ===== */
.review_quote {
  font-style: italic;
  letter-spacing: -0.01em;
}
.review_pending-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-2);
  text-align: left;
  margin-top: 16px;
}

/* ===== FAQ DA HOME ===== */
.section_about.is-faq-home { background: var(--off); }
.faqhome_grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
.faqhome_head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  position: sticky;
  top: 96px;
}
.faqhome_head .text-5xl { max-width: 14ch; }
.faqhome_list { display: flex; flex-direction: column; }
.faqhome_item { border-top: 1px solid var(--border-2); }
.faqhome_item:last-child { border-bottom: 1px solid var(--border-2); }
.faqhome_item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.faqhome_item summary::-webkit-details-marker { display: none; }
.faqhome_item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform var(--t);
}
.faqhome_item[open] summary::after { transform: rotate(-135deg); }
.faqhome_item summary:hover { color: var(--blue); }
.faqhome_item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.faqhome_answer { padding: 0 0 22px; max-width: 62ch; }
.faqhome_answer p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; }

/* ===== RESPONSIVO ===== */
@media (max-width: 991px) {
  .faqhome_grid { grid-template-columns: 1fr; gap: 28px; }
  .faqhome_head { position: static; }
}

/* ---------- HERO: proteção mais fechada atrás do bloco de texto (teste 12/08) ---------- */
/* scrim lateral esquerdo mais denso onde vivem H1 + apoio + slogan + botões;
   lado direito (família/chaves) permanece aberto */
.section_hero .hero-overlay {
  background:
    linear-gradient(90deg,
      rgba(7, 21, 42, 0.90) 0%,
      rgba(7, 21, 42, 0.72) 30%,
      rgba(7, 21, 42, 0.34) 55%,
      rgba(7, 21, 42, 0.10) 78%,
      rgba(7, 21, 42, 0.16) 100%),
    linear-gradient(180deg,
      rgba(7, 21, 42, 0.22) 0%,
      rgba(7, 21, 42, 0.30) 55%,
      rgba(7, 21, 42, 0.78) 100%);
}

/* ============================================================
   FORMULÁRIO · SPLIT (02/09) — mesma estrutura da Fale Conosco:
   painel branded (foto+scrim+logo centralizada) à esquerda +
   formulário claro à direita. Form claro escopado em #form-home.
   ============================================================ */
.section_contact.is-split { background: var(--bg); }
.csplit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 72px); align-items: stretch; }

.csplit-aside {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); min-height: 560px;
  display: flex; padding: clamp(28px, 3vw, 40px);
}
.csplit-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.csplit-scrim { position: absolute; inset: 0; background: linear-gradient(165deg, rgba(7,21,42,0.72) 0%, rgba(7,21,42,0.86) 100%); }
.csplit-aside_in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
.csplit-logo { height: clamp(40px, 4vw, 56px); width: auto; }

.csplit-form { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); }
.csplit-form_head { display: flex; flex-direction: column; gap: 12px; }
.csplit-title { font-family: var(--font-title); font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink-strong); text-wrap: balance; margin: 0; }
.csplit-title .italic { font-family: var(--font-accent); font-style: italic; font-weight: 500; color: var(--blue); }
.csplit-sub { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: var(--muted); margin: 0; }
.csplit-sub strong { color: var(--ink-strong); font-weight: 600; }

/* form CLARO escopado no #form-home (não mexe nos outros forms) */
#form-home .form_form { display: grid; gap: 16px; }
#form-home .form_input {
  background-color: rgba(12, 35, 64, 0.05);
  border: 1px solid rgba(12, 35, 64, 0.08);
  color: var(--ink-strong);
}
#form-home .form_input::placeholder { color: var(--muted-2); }
#form-home .form_input:focus { border-color: rgba(12,35,64,0.34); background-color: rgba(12,35,64,0.03); }
#form-home .form_label { color: var(--muted); }
#form-home .form_input:where(select) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c2340' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
#form-home .form_input:where(select) option { color: var(--ink-strong); background: #fff; }
#form-home .form_consent-label span { color: var(--muted); }
#form-home .form_consent-label a { color: var(--blue); }
#form-home .form_micro-disclaimer { color: var(--muted-2); }
#form-home .button.is-secondary[type="submit"] { border-radius: 999px; }

@media (max-width: 991px) {
  .csplit { grid-template-columns: 1fr; }
  .csplit-form { order: -1; }
  .csplit-aside { min-height: 360px; }
}
@media (max-width: 767px) {
  .csplit-aside { display: none; }
}

/* vídeo de fundo do painel split: quem prefere menos movimento vê a foto (fallback) */
@media (prefers-reduced-motion: reduce) {
  .csplit-bg.is-video { display: none; }
}
/* com o vídeo ativo (motion ok), scrim mais leve p/ o gradiente animado aparecer;
   no fallback (reduced-motion → foto), vale o scrim forte padrão */
@media (prefers-reduced-motion: no-preference) {
  .csplit-aside .csplit-scrim {
    background: linear-gradient(165deg, rgba(7,21,42,0.42) 0%, rgba(7,21,42,0.62) 100%);
  }
}

/* ============================================================
   BENTO ADMINISTRADORAS (04/09) — estrutura portada da LP
   seja-parceiro (.pbento-*, ref. BYQ/Avenir). Cópia escopada por
   página; origem: page-lp-parceiro.css.
   ============================================================ */
  margin-bottom: 2px;
}
.pmq-head .hero-button-wrap { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }

/* ============================================================
   BENTO "POR QUE MIGRAR" (03/09, ref. BYQ/Avenir): headline
   central + grid 6fr/3fr/3fr — card foto (2 linhas), time c/
   avatares reais, tile Master e card navy de credenciais.
   ============================================================ */
.section_about.is-pbento { background: var(--bg); }

.pbento-head {
  max-width: 860px;
  margin: 0 0 clamp(36px, 4.5vw, 64px);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; text-align: left;
}
.pbento-head h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.14;
  color: var(--ink-strong);
  text-wrap: balance;
}
.pbento-lead { margin: 0; font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.6; color: var(--muted); max-width: 56ch; }

.pbento-grid {
  display: grid;
  grid-template-columns: 6fr 3fr 3fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.pbento-card { border-radius: var(--r-md); padding: clamp(20px, 2vw, 26px); }

/* card grande: foto + fatos */
.pbento-card.is-photo {
  grid-row: 1 / 3;
  position: relative; overflow: hidden;
  min-height: clamp(430px, 46vw, 600px);
  display: flex; align-items: flex-end;
  color: #fff;
}
.pbento-card.is-photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.pbento-shade {
  position: absolute; inset: 0;
  background: linear-gradient(transparent 52%, rgba(4, 12, 24, 0.55));
}
.pbento-photo_in {
  position: relative; display: flex; flex-direction: column; gap: 18px; width: 100%;
  /* painel de vidro (pedido 03/09) */
  background: rgba(7, 21, 42, 0.40);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: calc(var(--r-md) - 2px);
  padding: clamp(16px, 1.8vw, 24px);
}
.pbento-photo_in h3 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.25;
  max-width: 26ch;
  text-wrap: balance;
}
.pbento-div { display: block; height: 1px; background: rgba(255, 255, 255, 0.16); }
.pbento-stats { display: flex; gap: clamp(20px, 2.5vw, 40px); flex-wrap: wrap; }
.pbento-stat { display: flex; align-items: center; gap: 12px; }
.pbento-stat .n {
  font-family: var(--font-title);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700; letter-spacing: -0.02em;
  white-space: nowrap;
}
.pbento-stat .t { font-size: 13px; line-height: 1.45; color: var(--on-dark-2); max-width: 17ch; }

/* card time: avatares reais + 03 administradoras */
.pbento-card.is-team {
  background: #e6eef8;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 24px; color: var(--ink-strong);
}
.pbento-team_top { display: flex; flex-direction: column; gap: 14px; }
.pbento-avatars { display: flex; }
.pbento-avatars img,
.pbento-avplus {
  width: 42px; height: 42px; flex: none;
  border-radius: 10px;
  border: 2px solid #fff;
  object-fit: cover;
}
.pbento-avatars img + img,
.pbento-avplus { margin-left: -12px; }
.pbento-avplus {
  display: grid; place-items: center;
  background: var(--blue); color: #fff;
  font-weight: 700; font-size: 18px;
}
.pbento-team_top p { margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 600; max-width: 22ch; }
.pbento-big { display: flex; align-items: flex-end; gap: 10px; }
.pbento-big .n {
  font-family: var(--font-title);
  font-size: clamp(38px, 3.6vw, 52px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 0.95;
}
.pbento-big .t { font-size: 13.5px; line-height: 1.4; color: var(--muted); max-width: 13ch; padding-bottom: 4px; }

/* card Master: tile sobre padrão diagonal */
.pbento-card.is-partner {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(12, 35, 64, 0.05) 0 1px, transparent 1px 8px),
    var(--off);
  display: flex; align-items: flex-end;
}
.pbento-partner_tile {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  background: var(--bg);
  border-radius: var(--r-md);
  padding: 12px;
  box-shadow: 0 12px 32px -20px rgba(12, 35, 64, 0.35);
}
.pbento-partner_tile > img { width: 64px; height: 64px; flex: none; border-radius: 10px; object-fit: cover; }
.pbento-partner_info { display: flex; flex-direction: column; gap: 8px; }
.pbento-partner_info p { margin: 0; font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--ink-strong); }
.pbento-mono {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-2);
}

/* card navy: credenciais */
.pbento-card.is-navy {
  grid-column: 2 / 4;   /* card largo na base direita (como no template) */
  background:
    radial-gradient(ellipse at 18% 0%, rgba(0, 114, 206, 0.20) 0%, transparent 55%),
    linear-gradient(160deg, #0e2a55 0%, #0a1e42 60%, #07152a 100%);
  color: var(--on-dark-1);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 28px;
}
.pbento-navy_top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pbento-navy_title {
  margin: 0;
  font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.45; font-weight: 600;
  color: #7FB8E8;
  max-width: 24ch;
  text-wrap: balance;
}
.pbento-navy_logo { height: 18px; width: auto; flex: none; opacity: 0.92; margin-top: 3px; }
.pbento-navy_bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pbento-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.pbento-tags span {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 9px; border-radius: 7px;
}
.pbento-navy_cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: #fff;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
}
.pbento-navy_cta:hover { color: #7FB8E8; border-color: #7FB8E8; }

.pbento-source {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--muted-2);
}

/* responsivo do bento */
@media (max-width: 991px) {
  .pbento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .pbento-card.is-photo { grid-column: 1 / -1; grid-row: auto; min-height: 400px; }
  /* sobe o enquadramento p/ os rostos ficarem acima do painel */
  .pbento-card.is-photo > img { object-position: center 22%; }
  .pbento-card.is-navy { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pbento-grid { grid-template-columns: 1fr; }
  .pbento-card.is-navy { grid-column: auto; }
  /* mobile: foto e painel EMPILHADOS (nada sobre os rostos) */
  .pbento-card.is-photo { min-height: 0; padding: 0; display: block; }
  .pbento-card.is-photo > img {
    position: static;
    width: 100%; height: 250px;
    object-position: center 25%;
  }
  .pbento-shade { display: none; }
  .pbento-photo_in {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(160deg, #0e2a55 0%, #07152a 100%);
    border: 0; border-radius: 0;
    padding: 18px 20px 22px;
  }
}

/* card navy: chips de texto -> as 3 logos brancas (balanceamento óptico
   proporcional ao dos admin-cards: E 22 / VW 26 / S 29) */
.pbento-tags.is-logos { align-items: center; gap: clamp(20px, 2.6vw, 40px); width: 100%; justify-content: space-between; }
.pbento-tags.is-logos img { display: block; width: auto; height: 32px; }
.pbento-tags.is-logos img[src*="consorcio-volkswagen"] { height: 38px; }
.pbento-tags.is-logos img[src*="stellantis"] { height: 42px; }

/* card navy no mobile: logos em COLUNA com ritmo constante
   (no fim do arquivo de propósito — precisa vencer as bases .is-logos) */
@media (max-width: 640px) {
  .pbento-navy_top { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .pbento-navy_logo { margin-top: 0; }
  .pbento-navy_title { max-width: none; }
  .pbento-tags.is-logos {
    flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 22px;
    padding-top: 6px;
  }
  .pbento-tags.is-logos img { height: 27px; }
  .pbento-tags.is-logos img[src*="consorcio-volkswagen"] { height: 32px; }
  .pbento-tags.is-logos img[src*="stellantis"] { height: 35px; }
}
/* Home: logos do card navy são LINKS para os hubs */
.pbento-tags.is-logos a { display: inline-flex; transition: opacity var(--t); }
.pbento-tags.is-logos a:hover { opacity: 0.75; }

/* Home: sem o CTA "Pronto para transformar..." do footer (04/09) —
   a página já fecha com CTA própria + formulário. */
body[data-page="home"] .fcta { display: none; }

/* ============================================================
   MÉTODO · stepper scroll-driven (04/09): intro sticky + trilho
   que preenche no scroll; etapas acendem em sequência. Substitui
   o bp-grid/timeline4 (fundo quadriculado removido).
   ============================================================ */
.section_about.is-metodo { background: var(--bg); border-top: 1px solid var(--border-2); }
.met_grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.met_intro {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.met_intro h2 { margin: 0; }
.met_lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 44ch;
}
.met_steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(64px, 6vw, 84px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 44px);
}
.met_rail {
  position: absolute;
  left: 23px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.met_fill {
  position: absolute;
  inset: 0;
  background: var(--blue, #0072ce);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
.met_step { position: relative; }
.met_num {
  position: absolute;
  left: calc(-1 * clamp(64px, 6vw, 84px));
  top: -2px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--muted-2);
  transition: background 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}
.met_body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
.met_body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}
/* pin via sticky nativo: o wrapper alto cria o percurso de scroll e o
   conteúdo fica preso; JS só calcula o progresso (à prova de layout) */
.met_sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 40px; /* compensa a navbar: centro óptico levemente abaixo dela */
  box-sizing: border-box;
}
.met_sticky .met_grid { width: 100%; }
.met_pinwrap.is-js { height: 235vh; }
.met_pinwrap.is-js .met_step {
  opacity: 0.22;
  transform: translateY(22px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.met_pinwrap.is-js .met_step.is-on { opacity: 1; transform: none; }
.met_step.is-on .met_num {
  background: var(--blue, #0072ce);
  border-color: var(--blue, #0072ce);
  color: #fff;
}
@media (max-width: 991px) {
  .met_pinwrap.is-js { height: 190vh; }
}
@media (max-width: 991px) {
  .met_grid { grid-template-columns: 1fr; }
  .met_intro { position: static; }
}
@media (max-width: 479px) {
  .met_steps { padding-left: 60px; }
  .met_rail { left: 19px; }
  .met_num { left: -60px; width: 40px; height: 40px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-metodo].is-js .met_step { opacity: 1; transform: none; transition: none; }
  .met_num { transition: none; }
}

/* ============================================================
   TRÊS CAMINHOS · Services Bento 3/6/3 (Avenir/BYQ, 04/09)
   Centro alto c/ glass (Para você) · esq foto+navy (Parceiros) ·
   dir stripes fact + foto (Contempladas).
   ============================================================ */
.section_services.is-tcb { background: var(--bg); }
.tcb_head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.tcb_head h2 { margin: 0; }
.tcb_lead { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 46ch; }

.tcb_grid {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  gap: 16px;
  align-items: stretch;
}
.tcb_col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tcb_card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  min-width: 0;
}

/* fotos de fundo */
.tcb_card.is-photo, .tcb_card.is-center { display: flex; }
.tcb_card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tcb_card.is-photo > img { object-position: center 30%; }
.tcb_scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 21, 42, 0.06) 30%, rgba(7, 21, 42, 0.86) 100%);
}
.tcb_scrim.is-leve { background: linear-gradient(180deg, rgba(7, 21, 42, 0.18) 0%, rgba(7, 21, 42, 0.55) 100%); }

/* coluna esquerda: foto alta + navy baixo (448 + 216 + gap = centro 680) */
.tcb_card.is-photo { height: 28rem; align-items: flex-end; padding: clamp(16px, 1.8vw, 24px); }
.tcb_card.is-navy {
  height: 13.5rem;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 1.8vw, 24px);
}
.tcb_card.is-navy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(16.5px, 1.4vw, 19px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--on-dark-1);
  max-width: 24ch;
}
.tcb_icons { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.tcb_ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #7db4e8;
}
.tcb_ico svg { width: 22px; height: 22px; }
.tcb_seta { color: rgba(255, 255, 255, 0.4); display: grid; place-items: center; }

/* centro alto */
.tcb_card.is-center {
  height: calc(28rem + 13.5rem + 16px);
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 28px);
}
.tcb_card.is-center > img { object-position: center 20%; }
.tcb_glass {
  position: relative;
  z-index: 2;
  width: min(100%, 400px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-md);
  background: rgba(7, 21, 42, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.tcb_glass h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.tcb_glass .button { align-self: flex-start; margin-top: 4px; }

/* overlays das fotos laterais */
.tcb_overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.tcb_overlay h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.tcb_bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tcb_bullets li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}
.tcb_bullets svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: #7db4e8; }
.tcb_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-bottom: 2px;
  align-self: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.tcb_link svg { transition: transform var(--t); }
.tcb_link:hover svg { transform: translateX(3px); }

/* direita: stripes fact */
.tcb_card.is-stripes {
  height: 13.5rem;
  background-color: var(--navy-deep);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 10px);
  display: flex;
  align-items: flex-end;
  padding: clamp(16px, 1.8vw, 24px);
}
.tcb_fact { display: flex; align-items: flex-end; gap: 12px; }
.tcb_fact .n {
  font-family: var(--font-display);
  font-size: clamp(44px, 4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: #fff;
}
.tcb_fact .t {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--on-dark-2);
  max-width: 18ch;
  padding-bottom: 5px;
}

@media (max-width: 991px) {
  .tcb_head { grid-template-columns: 1fr; align-items: start; }
  .tcb_grid { grid-template-columns: 1fr 1fr; }
  .tcb_card.is-center { grid-column: 1 / -1; order: -1; height: 30rem; }
}
@media (max-width: 640px) {
  .tcb_grid { grid-template-columns: 1fr; }
  .tcb_card.is-center { height: 26rem; }
  .tcb_card.is-photo { height: 22rem; }
}

/* complementos do bento no #sobre (04/09) */
.tcb_card.is-navy .tcb_link { margin-top: auto; }
.tcb_slogan {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #fff;
  text-wrap: balance;
}
.tcb_slogan em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: #7db4e8;
}
.tcb_bullets li span strong { color: #fff; }
.tcb_card.is-center > img { object-position: center 35%; }

/* ============================================================
   QUEM SOMOS · banda navy fotográfica estilo manifesto (04/09)
   — contraste com o bento branco da seção acima: foto do time
   como fundo full-width, pilares em régua, sem cards.
   ============================================================ */
.section_about.is-manifsobre {
  position: relative;
  overflow: hidden;
  color: var(--on-dark-1);
}
.ms_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.ms_scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(7, 21, 42, 0.93) 0%, rgba(7, 21, 42, 0.82) 45%, rgba(7, 21, 42, 0.55) 100%),
    linear-gradient(180deg, rgba(7, 21, 42, 0.25) 0%, rgba(7, 21, 42, 0.45) 100%);
}
.is-manifsobre .padding-global { position: relative; z-index: 2; }
.ms_in { display: flex; flex-direction: column; gap: 16px; max-width: 30ch; }
.ms_in h2 { margin: 0; color: var(--on-dark-1); }
.ms_lead {
  margin: 0;
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--on-dark-2);
  max-width: 48ch;
}
.ms_pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
  margin-top: clamp(36px, 4.5vw, 64px);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 900px;
}
.ms_pillar { display: flex; flex-direction: column; gap: 6px; }
.ms_pillar strong {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--on-dark-1);
}
.ms_pillar span {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--on-dark-2);
}
.ms_foot {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 52px);
}
.ms_quick { display: flex; gap: clamp(16px, 2.5vw, 28px); flex-wrap: wrap; }
.ms_quick a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--on-dark-1);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t), border-color var(--t);
}
.ms_quick a:hover { color: #7db4e8; border-color: #7db4e8; }
.ms_quick a svg { transition: transform var(--t); }
.ms_quick a:hover svg { transform: translateX(3px); }
@media (max-width: 767px) {
  .ms_pillars { grid-template-columns: 1fr; gap: 16px; }
  .ms_in { max-width: none; }
}

/* ============================================================
   HERO · alinhar à COLUNA GLOBAL (04/09)
   .hero-master_grid herdava max-width fixo 1280px e escapava ~17px
   da coluna global (min(1710px,95%)) — o título ficava ~8px à
   esquerda do logo/menu. Agora corre na MESMA coluna do navbar e
   das seções. Mobile/tablet intocados.
   ============================================================ */
@media (min-width: 992px) {
  body[data-page="home"] .hero-master_grid { max-width: min(1710px, 95%); }
}

/* ============================================================
   HERO · CARROSSEL de fundo (04/09)
   Slides empilhados que fazem crossfade (imóvel/carro/moto/caminhão).
   Herdam o filtro de brilho de .hero-bg > img (legibilidade do texto).
   Sem JS ou reduced-motion: só o 1º slide aparece (nunca gateia conteúdo).
   ============================================================ */
.hero-bg.is-carousel .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  will-change: opacity;
}
.hero-bg.is-carousel .hero-slide.is-active { opacity: 1; }
/* fallback sem JS: garante o 1º slide visível mesmo sem a classe alternando */
.hero-bg.is-carousel:not(.is-js) .hero-slide:first-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg.is-carousel .hero-slide { transition: none; }
}
/* Mobile: as fotos têm o sujeito no centro-direita e espaço escuro à esquerda
   (para o texto no DESKTOP). No recorte estreito do celular, deslocamos o foco
   para a direita p/ o sujeito (veículo/pessoas) não ser cortado. */
@media (max-width: 767px) {
  .hero-bg.is-carousel .hero-slide { object-position: 68% center; }
}