/* ══════════════════════════════════════════════════════════════
   CRYSTAL — SECTIONS
   Estilos específicos de cada seção da landing page.
   Ordem: Hero → Ticker → §01–§08 → Footer
   ══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   WRAPPERS DE LAYOUT
   Colunas centrais reutilizadas entre seções.
   Princípio: eixo central estreito, bordas como descompressão.
───────────────────────────────────────────────────────────── */

/* Coluna estreita: seções de leitura pura */
.col-center {
  max-width: var(--w-reading);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Coluna de conteúdo: intro + cards médios */
.col-content {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Coluna larga: grades de 3–4 colunas */
.col-wide {
  max-width: var(--w-layout);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Intro de seção: eyebrow + título + lead, sempre centralizados */
.section-intro {
  text-align: center;
  margin-bottom: var(--s-20);
}

/* Título de seção padrão (56px) */
.section-title {
  font-size: var(--text-6xl);
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--c-ink);
  text-wrap: balance;
  margin-bottom: var(--s-8);
}

/* Título XL (64px) — seções de maior impacto */
.section-title--xl {
  font-size: var(--text-7xl);
  line-height: 1.04;
  letter-spacing: -0.030em;
}

/* Título em fundo escuro */
.section-title--light {
  color: var(--c-surface-2);
}

/* Lead: texto de apresentação curto, centralizado */
.section-lead {
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--c-ink-2);
  max-width: var(--w-narrow);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--s-7);
  letter-spacing: -0.005em;
}

.section-lead--light {
  color: #E8DFCC;
}

/* Body: parágrafos de corpo, alinhados à esquerda no bloco central */
.section-body {
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--c-ink-3);
  max-width: var(--w-narrow);
}

.section-body--light {
  color: #E8DFCC;
}


/* ─────────────────────────────────────────────────────────────
   NAV — Scroll state
   Fundo sutil aparece ao rolar (adicionado via JS)
───────────────────────────────────────────────────────────── */
.nav.is-scrolled {
  /* Sutil: as pills já têm backdrop-filter, o nav permanece limpo */
}


/* ══════════════════════════════════════════════════════════════
   HERO
   Seção de entrada: título grande, CTAs, mockup de browser.
   ══════════════════════════════════════════════════════════════ */
.s-hero {
  position: relative;
  width: 100%;
  padding: 180px 24px 0;
  overflow: hidden;
}

/* Foto de fundo — com um véu escurecido (15%) por cima */
.s-hero__bg {
  position: absolute;
  inset: 0;
  background: url('../public/BackHero9ql.webp') center 35% / cover no-repeat;
  pointer-events: none;
}

/* Losangos decorativos de profundidade */
.s-hero__diamond-1 {
  top: 240px;
  width: 680px;
  height: 680px;
}

.s-hero__diamond-2 {
  top: 340px;
  width: 440px;
  height: 440px;
  border-color: rgba(26, 22, 20, 0.03);
}

/* Coluna central do hero */
.s-hero__content {
  position: relative;
  z-index: 5;
  max-width: var(--w-hero);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Palco do texto do hero: no desktop se dissolve (display:contents —
   eyebrow/título/subtítulo continuam filhos diretos do flex do
   content, layout idêntico ao de antes do wrapper). No mobile o
   tier <=640px o transforma no grid que ancora o título ao meio
   óptico da tela — ver responsive.css. */
.s-hero__stage {
  display: contents;
}

/* Eyebrow especial do hero — provocação inicial */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: #FEFBF6;
  border-radius: var(--r-full);
  margin-bottom: 24.5px;
}

.hero-eyebrow span {
  font-size: 13px;
  font-weight: 500;
  color: #3A3128;
}

.hero-eyebrow em {
  font-style: normal;
  font-weight: 700;
}

/* H1 do hero — o ponto de impacto máximo */
.s-hero__title {
  margin: 0;
  font-size: var(--text-hero);
  line-height: 1.0;
  letter-spacing: -0.034em;
  font-weight: 500;
  color: #FFFFFF;
  text-wrap: balance;
  max-width: 1020px;
}

.s-hero__title .serif-i {
  font-size: 1.08em;
}

/* Seletor específico (não altera o utilitário .muted global) — só
   esse span dentro do título da hero recebe esse tom. */
.s-hero__title .muted {
  color: #FFC284;
}

/* Subtítulo */
.s-hero__subtitle {
  margin-top: 40px;
  font-size: var(--text-xl);
  line-height: 1.55;
  color: #F1F1F1;
  font-weight: 400;
  width: 90%;
  max-width: 590px;
  letter-spacing: -0.005em;
}

/* Linha de CTAs */
.s-hero__cta-row {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Trust strip */
.s-hero__trust {
  margin-top: 64px;
}

/* ─── Mockup de browser ─────────────────────────────────────
   width:98% + max-width:1080px: fluido até ~1150px de viewport
   (98% do container ainda é menor que o teto), depois trava em
   1080px — o teto evita que o mockup vire uma faixa gigante em
   telas ultrawide. Os 2% de folga conectam sem salto com o tier
   ≤1024px logo abaixo (ver responsive.css). */
.s-hero__mockup {
  position: relative;
  z-index: 5;
  width: 98%;
  max-width: 1080px;
  margin: 120px auto 0;
}

/* Faixa 1025–1160px: o hero-annotation (ancorada no mockup via
   right:-25px) fica espremida contra a borda da janela aqui — a
   margem de centralização só cresce de verdade depois que o teto
   de 1080px é atingido (~1150px). 97% (em vez de 98%) alarga essa
   margem só nessa janela estreita, afastando a annotation da borda
   sem tocar no valor de "right". 1160px é o ponto exato em que 97%
   do container já bate no teto de 1080px — acima disso a regra
   base volta a valer, mas o resultado já é idêntico (ambas travam
   em 1080px), então não há salto na transição. */
@media (min-width: 1025px) and (max-width: 1160px) {
  .s-hero__mockup {
    width: 97%;
  }
}

/* Frame externo simulando janela de browser */
.browser-frame {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 18px 18px 4px 4px;
  box-shadow: 0 1px 2px rgba(26, 22, 20, 0.04),
    0 24px 60px rgba(26, 22, 20, 0.10),
    0 60px 140px rgba(26, 22, 20, 0.06);
  overflow: hidden;
}

/* Barra de chrome do browser */
.browser-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border-sm);
  background: var(--c-bg);
}

.browser-dots {
  display: flex;
  gap: 6px;
}

.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.browser-dots span:nth-child(1) {
  background: #D4B5A0;
}

.browser-dots span:nth-child(2) {
  background: #D4C4A0;
}

.browser-dots span:nth-child(3) {
  background: #A8B89C;
}

.browser-url {
  flex: 1;
  max-width: 420px;
  margin: 0 auto;
  padding: 6px 14px;
  background: rgba(255, 251, 243, 0.8);
  border: 1px solid var(--c-border-sm);
  border-radius: 6px;
  font-size: 11px;
  color: var(--c-ink-3);
  text-align: center;
}

/* Área de conteúdo do mockup */
.browser-content {
  padding: 48px 56px 64px;
  background: linear-gradient(180deg, #FFFBF3 0%, #F4F0E8 100%);
  min-height: 400px;
}

/* ─── Elementos do wireframe interno ─── */
/* Mini nav */
.mock-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 56px;
}

.mock-logo-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mock-logo-mark {
  width: 14px;
  height: 14px;
  background: var(--c-ink);
  transform: rotate(45deg);
  border-radius: 1px;
  opacity: 0.85;
}

.mock-logo-text {
  width: 64px;
  height: 8px;
  background: var(--c-ink);
  border-radius: 2px;
  opacity: 0.85;
}

.mock-nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
}

.mock-nav-links span {
  height: 6px;
  background: var(--c-ink-3);
  border-radius: 2px;
  opacity: 0.5;
}

.mock-nav-links span:nth-child(1) {
  width: 38px;
}

.mock-nav-links span:nth-child(2) {
  width: 46px;
}

.mock-nav-links span:nth-child(3) {
  width: 36px;
}

.mock-nav-cta {
  width: 78px;
  height: 22px;
  background: var(--c-ink) !important;
  border-radius: 11px;
  opacity: 1 !important;
}

/* Mini hero do mockup */
.mock-hero {
  text-align: center;
  width: 56%;
  max-width: 500px;
  min-width: 360px;
  margin: 0 auto;
}

.mock-eyebrow-pill {
  display: inline-flex;
  padding: 5px 12px;
  background: rgba(122, 107, 82, 0.10);
  border-radius: var(--r-full);
  margin-bottom: 20px;
}

.mock-eyebrow-pill span {
  width: 60px;
  height: 7px;
  background: var(--c-accent);
  border-radius: 2px;
  display: block;
}

.mock-title-1 {
  width: 100%;
  height: 24px;
  background: var(--c-ink);
  border-radius: 4px;
  margin-bottom: 14px;
  opacity: 0.92;
}

.mock-title-2 {
  width: 78%;
  height: 24px;
  background: var(--c-ink);
  border-radius: 4px;
  margin: 0 auto 28px;
  opacity: 0.92;
}

.mock-sub-1 {
  width: 62%;
  height: 8px;
  background: var(--c-ink-3);
  border-radius: 2px;
  margin: 0 auto 8px;
  opacity: 0.55;
}

.mock-sub-2 {
  width: 50%;
  height: 8px;
  background: var(--c-ink-3);
  border-radius: 2px;
  margin: 0 auto 32px;
  opacity: 0.55;
}

.mock-cta-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.mock-btn-primary {
  width: 108px;
  height: 32px;
  background: var(--c-ink);
  border-radius: 16px;
  display: block;
}

.mock-btn-outline {
  width: 88px;
  height: 32px;
  border: 1px solid var(--c-ink);
  border-radius: 16px;
  display: block;
}

/* Card de anotação flutuante. right:-25 (não mais -28) — compensa
   o width:98% do .s-hero__mockup: entre ~1025-1150px o mockup passou
   a ter uma folga interna antes do teto de 1080px, então o overhang
   fixo de -28px colava a annotation na borda da janela nessa faixa
   (o teto ainda não havia entrado para abrir espaço via centralização). */
.hero-annotation {
  position: absolute;
  top: 32%;
  right: -25px;
  padding: 14px 18px;
  background: var(--c-ink);
  color: var(--c-surface-2);
  border-radius: var(--r-md);
  font-size: 12px;
  line-height: 1.4;
  max-width: 210px;
  box-shadow: 0 12px 28px rgba(26, 22, 20, 0.25);
  transform: rotate(2deg);
  z-index: 10;
}

.hero-annotation__label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-muted);
  margin-bottom: 6px;
}


/* ══════════════════════════════════════════════════════════════
   TICKER
   Faixa escura com texto em scroll contínuo
   ══════════════════════════════════════════════════════════════ */
.ticker {
  background: var(--c-dark-2);
  color: var(--c-surface-2);
  padding: 18px 0;
  overflow: hidden;
  user-select: none;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 30s linear infinite;
}

/* Cada conjunto de itens (duplicado para loop perfeito) */
.ticker-set {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 0 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-muted);
  white-space: nowrap;
}

.ticker-highlight {
  color: var(--c-surface-2);
}

.ticker-accent {
  color: var(--c-accent-lt);
}

.ticker-sep {
  opacity: 0.4;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Pausa o ticker ao hover */
.ticker:hover .ticker-track {
  animation-play-state: paused;
}


/* ══════════════════════════════════════════════════════════════
   §01 — ANTES DA CONVERSA
   O que acontece antes de qualquer conversa
   ══════════════════════════════════════════════════════════════ */
.s-antes {
  padding: 160px 0;
  background: #F5F5F5;
}

/* Quote cards: impressões dos visitantes anônimos */
.quote-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: var(--w-content);
  margin: 0 auto 64px;
  padding: 0 32px;
}

/* Cards escuros: fundo ink, borda clara sutil (padrão de superfícies escuras do design) */
.quote-card {
  padding: 28px;
  background: var(--c-ink);
  border: 1px solid var(--c-border-dk);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-dk-lg);
}

/* Inclinações opostas criam tensão e dinamismo visual */
.quote-card--left {
  transform: rotate(-1deg);
}

.quote-card--right {
  transform: rotate(1deg);
}


.quote-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* Avatar circular com iniciais */
.quote-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--c-bg-warm);
  border-radius: 50%;
  font-size: 11px;
  color: var(--c-ink-3);
  font-weight: 500;
  flex-shrink: 0;
}

.quote-card__name {
  font-size: 12px;
  font-weight: 500;
  color: #F5F5F5;
  line-height: 1.2;
}

.quote-card__time {
  font-size: 10px;
  color: var(--c-accent);
  letter-spacing: 0.04em;
}

.quote-card__text {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  color: var(--c-surface);
  /* #FFFBF3 sobre fundo escuro */
}

/* Bloco de fechamento: impacto central */
.s-antes__close {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 40px;
  background: #FDFAF3;
  border: 1px solid var(--c-border-sm);
  /* rgba(26,22,20,0.06) */
  border-radius: 20px;
  text-align: center;
}

/* Especificidade (0,2,0) > .s-antes__close p (0,1,1) — garante que o título
   não seja sobrescrito pela regra geral de parágrafo do bloco */
.s-antes__close .s-antes__close-title {
  font-size: 30px;
  line-height: 1.2;
  color: #1A1614;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin-bottom: 18px;
  max-width: 638px;
}

/* Instrument Serif: 33.6px (1.12 × 30px base).
   white-space:nowrap: "Agora mesmo." não pode quebrar internamente —
   se a linha vira, a frase inteira pula para a linha de baixo junto,
   nunca deixando "Agora" sozinho na linha anterior. */
.s-antes__close .s-antes__close-title .serif-i {
  font-weight: 400;
  font-size: 1.12em;
  white-space: nowrap;
}

.s-antes__close p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink-3);
  max-width: 520px;
  margin: 0 auto;
}


/* ══════════════════════════════════════════════════════════════
   §02 — A DIFERENÇA
   "O comum" vs "O raro" — contraste entre sites genéricos e Crystal
   ══════════════════════════════════════════════════════════════ */
.s-diferenca {
  padding: 120px 0 80px;
  background: #F5F5F5;
}

/* 48px — harmoniza o título com a largura dos cards logo abaixo
   (.section-title é compartilhado entre seções; escopado aqui para
   não afetar §01/§04/§05/§06/§07, que usam a mesma classe). */
.s-diferenca .section-title {
  font-size: 48px;
}

/* Grade de dois cards contrastantes */
.contrast-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 24px;
}

/* Card base */
.contrast-card {
  padding: 44px 40px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* O Comum — apagado, acinzentado */
.contrast-card--muted {
  background: #fefcf759;
  border: 1px dashed var(--c-accent-bdr);
}

/* O Raro — limpo, com sombra e destaque */
.contrast-card--light {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 1px 2px rgba(26, 22, 20, 0.04),
    0 24px 60px rgba(26, 22, 20, 0.08),
    0 48px 120px rgba(26, 22, 20, 0.05);
}

.contrast-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Tags "O comum" / "O raro" */
.contrast-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.contrast-tag--muted {
  background: rgba(122, 107, 82, 0.12);
  color: var(--c-accent);
}

.contrast-tag--dark {
  background: var(--c-ink);
  color: var(--c-surface-2);
}

.contrast-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent-bdr);
}

.contrast-tag-dot--light {
  background: var(--c-accent-lt);
}

.contrast-card__percent {
  font-size: 11px;
  color: var(--c-accent-muted);
  letter-spacing: 0.06em;
}

.contrast-card__percent--dark {
  color: var(--c-ink);
  font-weight: 500;
}

.contrast-card__title {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 0;
}

.contrast-card--muted .contrast-card__title {
  color: var(--c-accent);
}

.contrast-card--light .contrast-card__title {
  color: var(--c-ink);
}

/* Mini wireframe dentro dos cards */
.contrast-mockup {
  border-radius: 10px;
  padding: 18px;
}

.contrast-mockup--muted {
  background: rgba(255, 251, 243, 0.5);
  border: 1px solid rgba(181, 167, 138, 0.4);
}

.contrast-mockup--light {
  background: linear-gradient(180deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
  border: 1px solid var(--c-border);
}

/* Chrome do mockup muted */
.cmock-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cmock-dots {
  display: flex;
  gap: 6px;
}

.cmock-dots span {
  width: 8px;
  height: 8px;
  background: var(--c-accent-bdr);
  border-radius: 50%;
}

.cmock-url {
  width: 80px;
  height: 6px;
  background: var(--c-accent-bdr);
  border-radius: 3px;
}

/* Linhas de texto do mockup muted */
.cmock-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmock-line {
  height: 8px;
  background: var(--c-accent-bdr);
  border-radius: 2px;
}

.cmock-line--full {
  width: 100%;
  opacity: 0.8;
}

.cmock-line--80 {
  width: 80%;
  opacity: 0.7;
}

.cmock-line--60 {
  width: 60%;
  opacity: 0.6;
}

.cmock-line--40 {
  width: 40%;
  opacity: 0.5;
}

/* Chrome do mockup light */
.cmock-chrome--light {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cmock-logo-sm {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cmock-logo-sm::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--c-ink);
  transform: rotate(45deg);
  border-radius: 1px;
  display: block;
  opacity: 0.85;
}

.cmock-logo-sm::after {
  content: '';
  width: 50px;
  height: 6px;
  background: var(--c-ink);
  border-radius: 3px;
  display: block;
  opacity: 0.7;
}

.cmock-nav-sm {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cmock-nav-sm span {
  width: 32px;
  height: 14px;
  background: rgba(26, 22, 20, 0.08);
  border-radius: 7px;
}

.cmock-btn {
  width: 48px;
  height: 14px;
  background: var(--c-ink);
  border-radius: 7px;
}

.cmock-body--light {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cmock-title {
  width: 90%;
  height: 14px;
  background: var(--c-ink);
  border-radius: 3px;
  opacity: 0.85;
}

.cmock-title--sm {
  width: 65%;
  opacity: 0.45;
}

.cmock-btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.cmock-btn-primary {
  width: 60px;
  height: 20px;
  background: var(--c-ink);
  border-radius: 10px;
  display: block;
}

.cmock-btn-secondary {
  width: 40px;
  height: 20px;
  border: 1px solid var(--c-ink);
  border-radius: 10px;
  display: block;
}

.contrast-card__body {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.contrast-card--muted .contrast-card__body {
  color: var(--c-ink-4);
}

.contrast-card--light .contrast-card__body {
  color: var(--c-ink-2);
}

.contrast-card--light .contrast-card__body strong {
  font-weight: 500;
  color: var(--c-ink);
}

/* Fechamento impactante: "Isso é o que a Crystal constrói." */
.s-diferenca__close {
  text-align: center;
  padding: 80px 0 0;
}

.s-diferenca__rule {
  width: 80px;
  height: 1px;
  background: var(--c-ink);
  margin: 0 auto 32px;
}

.s-diferenca__close-title {
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--c-ink);
  font-weight: 500;
  text-wrap: balance;
  margin: 0;
}

.s-diferenca__close-title .serif-i {
  font-size: 1.08em;
}


/* ══════════════════════════════════════════════════════════════
   §03 — COMO DECIDEM
   Os três pilares da primeira impressão
   ══════════════════════════════════════════════════════════════ */
.s-decisao {
  position: relative;
  overflow: hidden;
  padding: 160px 0;
  background: #0D0B0A;
}

/* Elipse dourada posicionada no rodapé — cortada pelo overflow:hidden da seção */
.s-decisao::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translate(-50%, 72%);
  background: url('../public/radialGradient.webp') center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* Garante que o conteúdo fica acima da elipse */
.s-decisao>* {
  position: relative;
  z-index: 1;
}

/* Texto claro sobre fundo escuro. 48px quebra a linha de forma
   harmônica com os demais textos da seção (.section-title é
   compartilhado; escopado para não afetar as demais seções). */
.s-decisao .section-title {
  color: #FFFFFF;
  font-size: 56px;
  margin-bottom: 36px;
}

.s-decisao .section-lead {
  color: #F5F5F5;
}

.s-decisao .section-lead em {
  color: #F5F5F5;
}

.s-decisao .section-body {
  color: #F5F5F5;
}

.s-decisao .s-decisao__close-em {
  color: #F5F5F5;
}

/* ─── Critérios — cards com badge numérico ───────────────────
   Três cards: superfície limpa, sombra sutil, badge circular
   escuro com número em mono. Centrado, simples, legível.
─────────────────────────────────────────────────────────── */
/* margin-bottom maior (92px, era 72px): as seções ficam mais
   verticais e precisam preencher a tela — textos de descrição
   ficam mais descolados dos elementos seguintes para dar respiro
   e melhorar a leitura. gap menor (12px) aproxima os cards entre si. */
.criteria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  /* cards com altura natural — sem esticar para igualar */
  gap: 12px;
  max-width: var(--w-wide);
  margin: 0 auto 92px;
  padding: 0 44px;
}

.criterion {
  padding: 32px 32px 44px;
  background: #FFFBF3;
  border: 1px solid rgba(26, 22, 20, 0.08);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Alturas fixas — cards da ponta maiores, central menor (sem tag) */
.criterion:nth-child(1),
.criterion:nth-child(3) {
  height: 248.8px;
}

.criterion:nth-child(2) {
  height: 218px;
}

/* Badge circular escuro — número em fonte mono, limpo */
.criterion__badge {
  width: 46px;
  height: 46px;
  background: #1A1614;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.criterion__badge span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #FAF6EE;
  letter-spacing: 0.04em;
}

.criterion__title {
  font-size: 22px;
  font-weight: 500;
  color: #1A1614;
  letter-spacing: -0.015em;
  margin: 0 0 6.8px;
}

.criterion__body {
  font-size: 14px;
  line-height: 1.65;
  color: #5C5246;
  margin: 0;
}

/* Tag de detalhe — empurrada para baixo com margin-top auto */
.criterion__tag {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 12px;
  background: #F4F0E8;
  color: #1A1614;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 100px;
}

/* Fechamento da seção */
.s-decisao__close {
  max-width: var(--w-reading);
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}

/* Parágrafo de corpo dentro do fechamento: bloco e texto centrados no eixo da seção */
.s-decisao__close .section-body {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.s-decisao__close-em {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.7;
  color: #F5F5F5;
  font-weight: 500;
  text-wrap: balance;
}

.s-decisao__close-em .serif-i {
  font-weight: 400;
  font-size: 1.06em;
}


/* ══════════════════════════════════════════════════════════════
   §03/§04 — DEGRAU INTERMEDIÁRIO — 1025 a 1251px
   Entre o desktop cheio (>=1252px) e o teto do clamp fluido do tier
   <=1024px (que não muda — continua normal nos dois). Título de §03
   recua de 56 para 52px, lead ganha 17px; título de §04 (--xl, 64px
   na base) recua para 56px, alinhando o peso das duas seções nessa
   faixa antes do clamp assumir em 1024px.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1251px) {
  .s-decisao .section-title {
    font-size: 52px;
  }

  .s-decisao .section-lead {
    font-size: 17px;
  }

  .s-processo .section-title--xl {
    font-size: 56px;
  }
}


/* ══════════════════════════════════════════════════════════════
   §04 — PROCESSO
   4 etapas: Conversa → Direção → Construção → No ar
   ══════════════════════════════════════════════════════════════ */
.s-processo {
  padding: 160px 0 180px;
  background: #F4F0E8;
  border-top: 1px solid var(--c-border-sm);
}

/* Container relativo para a linha conectora */
.process-wrapper {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 42px;
}

/* Linha pontilhada que conecta os 4 steps */
.process-connector {
  position: absolute;
  top: 78px;
  left: calc(8% + 24px);
  right: calc(8% + 24px);
  height: 1px;
  background: repeating-linear-gradient(90deg,
      var(--c-ink) 0,
      var(--c-ink) 4px,
      transparent 4px,
      transparent 12px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  /* Desenho: a linha se traça da esquerda p/ direita ao entrar no
     viewport — as 4 etapas soltas viram uma jornada. (.is-visible via JS) */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-signature) var(--ease-out);
}

.process-connector.is-visible {
  transform: scaleX(1);
}

/* Grade de 4 cards */
.process-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Antecipa o 2x2 do tablet (que só entra em <=1024px) para a faixa
   1025-1200px: nela as 4 colunas ficam espremidas demais (largura
   do container ainda não é grande o bastante para 4 cards
   confortáveis, mas já passou do breakpoint tablet). O gap (20px)
   e o process-connector permanecem os da regra base — só o grid
   muda. process-card__body ganha 99% de largura só para reposicionar
   a quebra de linha do corpo do texto (empurra um "o" órfão para a
   linha de baixo, sem precisar reescrever o parágrafo). */
@media (min-width: 1025px) and (max-width: 1200px) {
  .process-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .process-card__body {
    width: 99%;
    max-width: 435px;
  }
}

/* Card base de processo */
.process-card {
  padding: 30px 26px 32px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 360px;
}

/* Card 04 — destaque escuro */
.process-card--dark {
  background: var(--c-dark-2);
  color: var(--c-surface-2);
  border-color: var(--c-dark-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1),
    0 16px 36px rgba(26, 22, 20, 0.18),
    0 40px 100px rgba(26, 22, 20, 0.10);
  overflow: hidden;
}

/* Glow radial de fundo no card escuro */
.process-card__glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(212, 196, 160, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

/* Cabeçalho de cada card: número + indicador */
.process-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.process-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--c-bg);
  border-radius: 50%;
  font-size: 13px;
  color: var(--c-ink);
  font-weight: 500;
}

.process-card--dark .process-card__num {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--c-surface-2);
}

/* Indicadores de estado (círculo, outline, barras, pulso) */
.process-indicator {
  display: inline-block;
}

.process-indicator--filled {
  width: 9px;
  height: 9px;
  background: var(--c-ink);
  border-radius: 50%;
}

.process-indicator--outline {
  width: 9px;
  height: 9px;
  border: 2px solid var(--c-ink);
  border-radius: 50%;
  background: transparent;
}

.process-indicator--bars {
  display: inline-flex;
  gap: 2px;
}

.process-indicator--bars i {
  display: block;
  width: 3px;
  height: 9px;
  background: var(--c-ink);
  font-style: normal;
}

/* Ponto com pulso — card "No ar" */
.process-indicator--pulse {
  position: relative;
  display: inline-flex;
  width: 10px;
  height: 10px;
}

.process-indicator--pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-accent-lt);
  border-radius: 50%;
}

.process-indicator--pulse::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(212, 196, 160, 0.3);
  border-radius: 50%;
}

/* Label e subtitle do card */
.process-card__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.process-card__title {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  font-weight: 500;
  margin: 0;
}

.process-card__subtitle {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.process-card--dark .process-card__subtitle {
  color: var(--c-accent-lt);
}

.process-card__body {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--c-ink-3);
  flex: 1;
  margin: 0;
  position: relative;
  z-index: 1;
}

.process-card--dark .process-card__body {
  color: #E8DFCC;
}

/* Frase de ênfase ao final do card */
.process-card__em {
  font-size: 17px;
  line-height: 1.3;
  color: var(--c-ink);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  margin: 0;
  position: relative;
  z-index: 1;
}

.process-card--dark .process-card__em {
  color: var(--c-surface-2);
}


/* ══════════════════════════════════════════════════════════════
   §05 — CONFIABILIDADE
   Direto com quem constrói. Comparação de fluxos.
   ══════════════════════════════════════════════════════════════ */
.s-confianca {
  padding: 160px 0 110px;
  background: #F4F0E8;
}

/* "quem constrói." não pode quebrar no meio quando o título quebra
   linha — nowrap faz a frase inteira mover para a linha seguinte
   como um bloco só, nunca dividida em duas. */
.s-confianca .section-title--xl .serif-i {
  white-space: nowrap;
}

/* Intro com menos margem — a comparação começa logo abaixo */
.s-confianca .section-intro {
  margin-bottom: 56px;
}

/* ─────────────────────────────────────────────────────────────
   §05 — COMPARAÇÃO DE FLUXOS
   Dois caminhos no mesmo eixo vertical central, com a MESMA anatomia
   (badge → título → etapas → corpo → nota). Lidos de cima para baixo
   — o comum primeiro, o Crystal depois — a sequência reforça a
   narrativa: primeiro o problema, depois a virada. Cards largos
   (1025px) com conteúdo centralizado: o cabeçalho segue a borda,
   tudo o resto respira no eixo central. Ambos usam .reveal.
───────────────────────────────────────────────────────────── */

.trust-compare {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1025px;
  margin: 0 auto 72px;
}

/* Card base — mesma estrutura nos dois cards.
   gap:0 propositalmente: cada relação de vizinhança abaixo tem seu
   próprio respiro (margin-top), porque a hierarquia entre título →
   etapas → corpo → nota não é uniforme — quanto mais a leitura avança,
   menor o respiro, guiando o olho em cadência decrescente. */
.tflow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 64px 64px 56px;
  border-radius: var(--r-2xl);
  overflow: hidden;
}

/* Lado A — caminho comum: mesmo conjunto de cores do card "O Raro" (§02):
   superfície clara e quente, borda sutil e sombra suave em camadas. */
.tflow--common {
  padding: 64px 64px 46px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 1px 2px rgba(26, 22, 20, 0.04),
    0 24px 60px rgba(26, 22, 20, 0.08),
    0 48px 120px rgba(26, 22, 20, 0.05);
}

/* Lado B — Crystal: escuro de impacto, o "importante e contrastante" */
.tflow--crystal {
  padding: 50px 64px 56px;
  background: linear-gradient(150deg, var(--c-dark-2) 0%, #2A1F1B 100%);
  border: 1px solid var(--c-dark-2);
  box-shadow: var(--shadow-dk-lg), 0 48px 120px rgba(26, 22, 20, 0.12);
}

.tflow__glow {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(212, 196, 160, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Cabeçalho: badge + meta — única linha que NÃO acompanha o centro,
   ancorada nas duas bordas do card (largura total, span-between). */
.tflow__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
  margin-bottom: 44px;
}

/* Selo do lado claro — pílula escura (igual ao selo "O RARO" da §02) */
.tflow__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: var(--r-full);
}

.tflow__badge--dark {
  background: rgba(250, 246, 238, 0.06);
  border-color: var(--c-border-dk);
}

.tflow__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent-lt);
  flex-shrink: 0;
}

.tflow__badge--dark .tflow__badge-dot {
  background: var(--c-accent-lt);
}

.tflow__badge-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-surface-2);
  line-height: 1;
}

.tflow__badge--dark .tflow__badge-text {
  color: var(--c-accent-lt);
}

.tflow__meta {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--c-ink-4);
  line-height: 1;
}

.tflow--crystal .tflow__meta {
  color: var(--c-accent-muted);
}

/* Título — Geist + acento serif itálico. O respiro padrão é menor
   (36px) porque no card comum o próximo elemento é a legenda do
   relé, bem próxima do título; no card Crystal, sem legenda, o
   .direct recupera o salto maior de hierarquia com seu próprio
   margin-top (ver abaixo). */
.tflow__title {
  width: 100%;
  font-size: 32px;
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 38px;
  position: relative;
  z-index: 1;
}

/* nowrap: mesma razão do título da seção — a parte serif quebra
   como um bloco só, nunca dividida em duas linhas. */
.tflow__title .serif-i {
  font-size: 1.1em;
  white-space: nowrap;
}

.tflow__title--light {
  color: var(--c-surface-2);
}

/* Legenda do relé — "tempo de espera a cada etapa" reposicionada
   para logo acima da linha pontilhada que ela descreve: a proximidade
   física cria a conexão visual entre texto e diagrama (antes ficava
   isolada no rodapé, sem relação clara com nada ao redor). */
.tflow__caption {
  width: 100%;
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--c-ink-4);
  position: relative;
  z-index: 1;
}

/* ── Relé horizontal (lado comum): a mensagem perde sinal a cada nó,
   lida da esquerda para a direita — mesma direção da leitura.
   --relay-w/--relay-gap alimentam tanto a largura das colunas quanto
   o comprimento da linha conectora abaixo — um único ponto de ajuste
   para os dois, inclusive nos breakpoints responsivos. ── */
.relay {
  --relay-w: 190px;
  --relay-gap: 28px;
  width: 100%;
  list-style: none;
  margin: 0px 0 56px;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px var(--relay-gap);
}

.relay__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: var(--relay-w);
}

.relay__idx {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-bg-warm);
  border: 1px solid var(--c-border-lg);
  font-size: 11px;
  color: var(--c-ink-2);
  z-index: 1;
}

/* Linha pontilhada horizontal ligando um selo ao próximo — o caminho
   que a mensagem percorre. Alinhada ao centro vertical do círculo,
   some no último nó (não há próxima etapa) e em telas estreitas
   (onde a fileira vira coluna). */
.relay__step:not(:last-child) .relay__idx::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--relay-w) - 30px + var(--relay-gap));
  border-top: 1px dashed var(--c-accent-bdr);
}

/* Tique pontilhado vertical — pausa entre o selo e o nome, eco do
   "tempo de espera" que fecha o card (mesma linguagem visual). */
.relay__tick {
  width: 0;
  height: 14px;
  border-left: 1px dashed var(--c-accent-bdr);
}

.relay__name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  line-height: 1.3;
  margin-top: 4px;
}

.relay__sub {
  max-width: 162px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-ink-3);
}

/* ── Elo direto (lado Crystal): MESMO eixo horizontal do relé ao
   lado — dois nós ligados por uma linha sólida dourada e contínua,
   bidirecional (mensagem ↔ resposta). O oposto exato do relé
   pontilhado que desbota: aqui o sinal chega intacto nos dois
   sentidos. Mesma anatomia, resultado invertido. ── */
.direct {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 28px;
  /* margin-top compensa o .tflow__title mais enxuto: sem legenda antes
     dele, este card precisa recuperar o salto de 64px título → etapas. */
  margin: 28px 0 44px;
  position: relative;
  z-index: 1;
}

.direct__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 160px;
}

/* Marcador "Você": ícone Lucide (user), mesmo peso visual do losango
   da Crystal ao lado — só o glifo, sem anel/fundo por trás. */
.direct__mark {
  width: 26px;
  height: 26px;
  color: var(--c-accent-lt);
  flex-shrink: 0;
}

/* Marcador "Crystal": losango como CONTORNO fino (border), não mais o
   hack de dois losangos preenchidos sobrepostos — a espessura da linha
   agora acompanha o peso do ícone "user" ao lado (~1.75-2px), em vez
   do anel grosso de 8px que destoava do resto. */
.direct__mark--crystal {
  width: 20px;
  height: 20px;
  margin: 3px;
  border: 2px solid var(--c-accent-lt);
  border-radius: 3px;
  background: none;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.direct__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-surface-2);
  line-height: 1.3;
  margin-top: 4px;
}

.direct__step--crystal .direct__name {
  color: var(--c-accent-lt);
}

/* Subtítulo dos nós: mesma família tonal do corpo do texto (creme),
   não mais o tom acastanhado de --c-accent-muted, que ficava opaco
   e de leitura difícil sobre o fundo escuro. */
.direct__sub {
  font-size: 12px;
  line-height: 1.5;
  color: #E8DFCC;
}

/* Conector central: rótulos + seta bidirecional (sua mensagem ↔
   resposta) — sinal intacto, ida e volta. */
.direct__conn {
  flex: 0 0 auto;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  padding: 6px 0;
}

/* Rótulos do conector: tom mais dimmed que o subtítulo dos nós — são
   a camada mais discreta da hierarquia — mas ainda legíveis (creme
   translúcido, não o marrom-acinzentado anterior). */
.direct__conn-label {
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: rgba(232, 223, 204, 0.6);
  white-space: nowrap;
}

/* Seta bidirecional — ícone Lucide de verdade, tamanho fixo e
   proporção travada (sem preserveAspectRatio:none esticando o
   viewBox, que antes deformava as pontas da seta). */
.direct__conn-arrow {
  width: 22px;
  height: 22px;
  color: var(--c-accent-lt);
  flex-shrink: 0;
}

/* ── Corpo dos cards — largura de leitura curta mesmo no card largo,
   pois texto corrido nunca deve ultrapassar ~620–760px. ── */
.tflow__body {
  width: 100%;
  max-width: var(--w-reading);
  margin: 0 auto 32px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--c-ink-2);
  text-wrap: balance;
  position: relative;
  z-index: 1;
}

/* Card branco (.tflow--common) apenas: respiro lateral e leitura
   mais espaçada, próprios desse texto (o card escuro não é tocado). */
.tflow--common .tflow__body {
  padding: 0 3%;
  line-height: 1.9;
}

.tflow__body em {
  font-style: italic;
}

.tflow__body--light {
  color: #E8DFCC;
}

/* ── Rodapé: nota (comum) / ênfase serif (Crystal) — chega por último,
   sempre depois das etapas e do corpo, respiro menor por ser a nota
   final. ── */
.tflow__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-ink-4);
  position: relative;
  z-index: 1;
}

/* Ênfase final: serif normal (sem itálico) — o mesmo par tipográfico
   do resto do site, mas sem a inclinação, para soar mais como uma
   afirmação do que como um floreio decorativo. */
.tflow__foot--em {
  display: block;
  max-width: var(--w-reading);
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--c-accent-lt);
  font-weight: 400;
}

/* ── Fechamento: lógica do pagamento (mantido) ── */
.s-confianca__close {
  max-width: var(--w-narrow);
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}

.s-confianca__close-em {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-ink);
  font-weight: 500;
}

.s-confianca__close-em .serif-i {
  font-weight: 400;
  font-size: 1.06em;
}

/* Responsivo §05: cards largos empilham as etapas verticalmente
   antes de encolher a tipografia.
   O max-width:720px fixo do .trust-compare foi removido — ele
   sozinho já limitava os cards a 672px de conteúdo (720 - o padding
   próprio de 24px cada lado), ficando pequeno demais em viewports
   maiores dessa faixa. Sem esse teto, .trust-compare herda o
   max-width:1025px da regra base (irrelevante aqui, pois o viewport
   já é ≤1080px) e os cards passam a ocupar 96% do espaço disponível.
   width (não max-width) é proposital: um item flex com margin:auto
   no eixo cruzado deixa de esticar (align-items:stretch é ignorado)
   e passa a se ajustar ao conteúdo — com max-width:96% os cards
   encolhiam para ~842px (o conteúdo cabia sem precisar dos 96%),
   bem menores que o pretendido. width:96% força o valor exato; o
   margin:auto só distribui a sobra para centralizar. */
@media (max-width: 1080px) {
  .trust-compare {
    padding: 0 24px;
  }

  .tflow {
    width: 96%;
    margin: 0 auto;
    padding: 48px 40px 40px;
  }

  .relay {
    --relay-w: 130px;
    --relay-gap: 20px;
  }
}

/* Grid do relé (nós "a cada repasse"): faixa própria, separada do
   resto do tier <=720px abaixo — a fileira 2x2 do relé passa a
   quebrar a partir de 800px (não mais 740px).
   BUGFIX RAIZ: flex-wrap empacota quantos itens couberem por linha —
   não força 2 por linha, só "o que der". Qualquer largura de
   container que caiba 3×190px vira 3+1 em vez de 2+2 (aconteceu de
   novo em ~800px mesmo após alargar o breakpoint). grid com
   grid-template-columns:repeat(2,...) resolve na raiz: nunca cabe
   um 3º item na mesma linha, seja qual for a largura disponível —
   só o tier <=520px abaixo (1 coluna) muda esse número. */
@media (max-width: 800px) {
  .relay {
    --relay-w: 190px;
    --relay-gap: 20px;
    display: grid;
    grid-template-columns: repeat(2, var(--relay-w));
    justify-content: center;
    column-gap: 24px;
    row-gap: 40px;
    margin-top: 23px;
    margin-bottom: 58px;
  }

  /* Linha conectora entre os nós do relé permanece oculta nessa
     largura — o tique vertical (.relay__tick) já comunica o
     caminho sozinho, sem pedido explícito para reintroduzi-la. */
  .relay__idx::after {
    display: none;
  }
}

/* 1 por linha abaixo de 520px: o tier acima é grid de 2 colunas —
   aqui vira 1 coluna só (não flex-direction, que não faz nada em
   display:grid). Também permite ajustar o gap vertical por faixa
   (pedido) em vez de depender do row-gap fixo de 40px do tier acima. */
@media (max-width: 520px) {
  .relay {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 40px;
  }
}

/* Gap um pouco mais justo nas telas bem estreitas — o card do relé
   já ocupa quase a largura toda ali, 40px de sobra vertical começa
   a parecer excessivo perto do resto do respiro da seção. */
@media (max-width: 383px) {
  .relay {
    gap: 32px;
  }
}

/* Abaixo de 720px o relé horizontal quebraria 3+1 (assimétrico,
   com linha conectora apontando para o nada) — a coluna vertical
   entra antes disso. */
@media (max-width: 720px) {
  .tflow {
    padding: 36px 28px 32px;
  }

  .tflow__head {
    margin-bottom: 32px;
  }

  .tflow__title {
    font-size: 30px;
    margin: 12px 0 29px;
  }

  .tflow__body {
    font-size: 14px;
  }

  /* .direct também volta a ser fileira nessa largura — risco de
     overflow em telas bem menores (~<570px), já resolvido com
     reset para coluna no tier <=640px abaixo. */
  .direct {
    flex-direction: row;
    gap: 19px;
    margin: 28px 0 56px;
  }

  .direct__conn {
    width: auto;
    flex-direction: row;
    gap: 10px;
    padding: 0;
  }

  .direct__conn-arrow {
    width: 40px;
    flex-shrink: 0;
  }

  .tflow__foot--em {
    font-size: 20px;
  }
}

/* §05 — card escuro (.tflow--crystal): ajustes próprios — até 768px */
@media (max-width: 768px) {
  .tflow--crystal .tflow__body {
    line-height: 1.8;
    margin: 0 auto 42px;
  }

  .tflow__foot--em {
    font-size: 21px;
    line-height: 1.4;
  }
}

/* §05 — card escuro (.tflow--crystal): ajustes próprios — até 540px */
@media (max-width: 540px) {
  .tflow--crystal .tflow__body {
    margin: 0 auto 36px;
  }
}

/* Reset de segurança: .direct em fileira (definido acima, tier
   <=720px) precisaria de ~508px (2×160 dos steps + 150 do conector
   + 2×19 de gap) — não cabe em telas de celular comuns (360-390px).
   Volta para coluna, como já era antes desse ajuste. */
@media (max-width: 640px) {
  .direct {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
  }

  .direct__sub {
    color: #6d6054;
  }

  /* Seta girada 90° (só o ícone, permanece ↕ mas os textos continuam
     lado a lado com ela, não empilhados). Grid com 1fr/auto/1fr em
     vez de flex+gap: assim a seta fica travada no centro exato do
     conector, e cada texto ocupa uma coluna de largura IGUAL de cada
     lado — sem isso, "sua mensagem" (mais longo) empurraria a seta
     para a direita do centro, já que texto+gap simples não força
     simetria quando os dois lados têm tamanhos diferentes. Cada
     label alinha para dentro (em direção à seta) com text-align. */
  .direct__conn {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
  }

  .direct__conn-label:first-child {
    text-align: right;
  }

  .direct__conn-label:last-child {
    text-align: left;
  }

  .direct__conn-arrow {
    transform: rotate(90deg);
  }
}

/* §05 — card escuro (.tflow--crystal): citação em destaque com
   largura própria — 550 a 384px */
@media (min-width: 384px) and (max-width: 550px) {
  .tflow__foot--em {
    width: 80%;
  }
}



/* ══════════════════════════════════════════════════════════════
   §06 — O CUSTO (dark)
   Seção escura de impacto: o custo invisível da ausência
   ══════════════════════════════════════════════════════════════ */
.s-custo {
  padding: 180px 0 80px;
  background: #0E1418;
  color: var(--c-surface-2);
  position: relative;
  overflow: hidden;
}

/* Mais respiro antes do conteúdo (92px, era 80px) — mesma lógica do
   .criteria: seções mais verticais precisam desse descolamento. */
.s-custo .section-intro {
  margin-bottom: 92px;
}

/* Glow sutil de fundo */
.s-custo__glow {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(122, 107, 82, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* Título em duas linhas: Geist 72px / Serif 77.8px */
.s-custo .section-title--xl {
  font-size: 72px;
  line-height: 73px;
  letter-spacing: -0.032em;
}

.s-custo .section-title--xl .serif-i {
  font-size: 77.8px;
  line-height: 79px;
  letter-spacing: -0.005em;
}

/* §06 — degrau intermediário (título) — 1250 a 1025px (mesmo padrão
   do degrau de §03/§04: entre o desktop cheio e o clamp fluido do
   tier <=1024px, que continua normal). O .s-custo__final-text dessa
   mesma faixa fica depois da própria base dele (ver abaixo) — mesma
   especificidade exige vir depois no arquivo para vencer. */
@media (min-width: 1025px) and (max-width: 1250px) {
  .s-custo .section-title--xl {
    font-size: 64px;
  }

  .s-custo .section-title--xl .serif-i {
    font-size: 67.8px;
  }
}

/* Lead com cor e largura do design */
.s-custo .section-lead--light {
  font-size: 19px;
  line-height: 1.6;
  color: #E8DFCC;
  max-width: 620px;
  letter-spacing: -0.005em;
}

/* Texto "Chega como silêncio." — impacto isolado */
.s-custo__silence {
  font-size: 19px;
  line-height: 1.6;
  color: #FAF6EE;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-top: 24px;
  text-align: center;
}

/* Card com a citação grande */
.cost-quote {
  max-width: 820px;
  margin: 0 auto 82px;
  padding: 71px 56px 64px;
  background: rgba(250, 246, 238, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(250, 246, 238, 0.08);
  border-radius: 24px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 24px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}

/* Aspas decorativas grandes */
.cost-quote__mark {
  position: absolute;
  top: 20px;
  left: 43px;
  font-size: 140px;
  line-height: 1;
  color: rgba(212, 196, 160, 0.15);
  pointer-events: none;
}

.cost-quote__text {
  font-size: 42px;
  line-height: 48px;
  color: #FAF6EE;
  font-weight: 400;
  letter-spacing: -0.022em;
  width: 490px;
  /* quebra o texto no lugar certo */
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Itens de custo invisível */
.cost-items {
  max-width: 1080px;
  margin: 0 auto 112px;
  padding: 0 24px;
}

/* Faixa 1025-1200px: mais respiro no rodapé da seção (100px em vez
   de 80px) e entre a citação e os itens de custo (128px, mantendo o
   mesmo delta de +16px sobre a regra base que já existia) — nessa
   largura intermediária o conteúdo estava mais denso que nos
   extremos (desktop largo ou mobile já reduzido). */
@media (min-width: 1025px) and (max-width: 1200px) {
  .s-custo {
    padding: 180px 0 100px;
  }

  .cost-items {
    margin: 0 auto 128px;
  }
}

.cost-items__label {
  text-align: center;
  font-size: 13.5px;
  letter-spacing: 0.109em;
  text-transform: uppercase;
  color: #D4C4A0;
  margin-bottom: 32px;
  font-weight: 500;
}

/* max-width:788px no grid — 3 colunas de 252px (788 - 2×16 de gap,
   dividido por 3) é o novo teto real; o antigo 458px por coluna
   nunca mais seria atingido (conflito), então o valor foi atualizado
   junto para refletir o tamanho de fato das colunas. */
.cost-items__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 252px));
  gap: 16px;
  max-width: 788px;
  margin: 0 auto;
  justify-content: center;
}

.cost-item {
  width: 100%;
  max-width: 252px;
  margin: 0 auto;
  padding: 24px 28px 45px;
  background: #FFFBF3;
  border: 1px solid rgba(250, 246, 238, 0.08);
  border-radius: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  box-sizing: border-box;
}

/* Dot padrão escuro; variante dourada no card do meio */
.cost-item__dot {
  width: 8px;
  height: 8px;
  background: #1A1614;
  border-radius: 50%;
  flex-shrink: 0;
}

.cost-item__dot--accent {
  background: #D4C4A0;
}

.cost-item__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #1A1614;
  max-width: 394px;
}

.cost-item__body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: #5C5246;
  margin: 0;
  max-width: 624px;
  /* teto generoso e não-vinculante — a coluna real
    (252px) é bem mais estreita; funciona como salvaguarda caso o
    card volte a crescer, sem restringir o layout atual */
}

/* Fechamento: pergunta + frase final — sem divisória, gap 3px */
.s-custo__close {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.s-custo__question-text {
  font-size: 16px;
  line-height: 1.75;
  color: #E8DFCC;
  margin: 0;
}

.s-custo__final-text {
  font-size: 64px;
  line-height: 74px;
  letter-spacing: -0.029em;
  color: #FAF6EE;
  font-weight: 400;
  text-wrap: balance;
  margin: 0;
}

/* §06 — degrau intermediário (final-text) — 1250 a 1025px. Precisa
   vir DEPOIS da base acima: mesma especificidade (0-1-0), então
   quem aparece por último no arquivo vence — a media query sozinha
   não basta. */
@media (min-width: 1025px) and (max-width: 1250px) {
  .s-custo__final-text {
    font-size: 60.7px;
  }
}


/* ══════════════════════════════════════════════════════════════
   §07 — CTA INLINE (dark)
   Seção de conversão, continuação da seção de custo
   ══════════════════════════════════════════════════════════════ */
.s-cta {
  padding: 40px 0 62px;
  background: #0E1418;
  color: var(--c-surface-2);
  position: relative;
  overflow: hidden;
}

.s-cta__glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(212, 196, 160, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Frame externo com border-radius grande, borda e sombra sutil */
.s-cta__frame {
  position: relative;
  z-index: 1;
  max-width: 1770px;
  width: calc(100% - 150px);
  margin: 0 auto;
  border-radius: 170px;
  border: 1px solid rgba(250, 246, 238, 0.1);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2),
    0px 24px 60px rgba(0, 0, 0, 0.3),
    inset 0px 1px 0px 1px rgba(250, 246, 238, 0.08);
  background: rgba(15, 21, 25, 0.01);
  padding: 140px 24px 157px;
}

/* Faixa intermediária 1025-1274px: os 150px de margem fixa da
   moldura (calc(100% - 150px)) começam a apertar o conteúdo antes
   do tratamento mobile de <=900px entrar em ação. Três degraus
   graduais (120px -> 100px -> 80px de desconto) suavizam a transição
   em vez de um salto único direto para os 64px do tier <=900px.
   O border-radius do .cta-glass sobe para 34px nos dois últimos
   degraus (1025-1099px) — mais arredondado, acompanhando a moldura
   externa que já está proporcionalmente mais estreita nessa faixa. */
@media (min-width: 1100px) and (max-width: 1274px) {
  .s-cta__frame {
    width: calc(100% - 120px);
  }
}

@media (min-width: 1075px) and (max-width: 1099px) {
  .s-cta__frame {
    width: calc(100% - 100px);
  }

  .cta-glass {
    border-radius: 34px;
  }
}

@media (min-width: 1025px) and (max-width: 1074px) {
  .s-cta__frame {
    width: calc(100% - 80px);
  }

  .cta-glass {
    border-radius: 34px;
  }
}

/* Faixa 951-1024px: valor próprio em responsive.css (calc(100% - 72px),
   dentro do bloco compartilhado ≤1024px). Abaixo de 950px o desconto
   cai mais (54px) antes do tratamento especial de ≤900px assumir. */
@media (max-width: 950px) {
  .s-cta__frame {
    width: calc(100% - 54px);
  }
}

/* Tratamento especial da moldura em telas menores: os 150px de
   margem e o raio de 170px são assinatura do desktop — em telas
   estreitas eles consumiriam o espaço do conteúdo. A moldura
   afina e o raio acompanha, preservando o gesto sem sufocar. */
@media (max-width: 900px) {
  .s-cta__frame {
    width: calc(100% - 64px);
    border-radius: 120px;
    padding: 110px 24px 120px;
  }

  /* Herda o raio do tier 1024-901px (32px) ajustado para essa largura
     — intermediário até o 18px (--r-lg) do tier <=640px abaixo. */
  .cta-glass {
    border-radius: 28px;
  }
}

@media (max-width: 640px) {
  .s-cta__frame {
    width: calc(100% - 28px);
    border-radius: 44px;
    /* Sem padding lateral próprio: o .col-center interno já cuida
       das margens de leitura — evita padding duplo que espremia
       o conteúdo numa coluna de ~150px. */
    padding: 80px 0 90px;
  }
}

.s-cta__label {
  font-size: 12px;
  letter-spacing: 0.128em;
  text-transform: uppercase;
  color: #D4C4A0;
  margin-bottom: 32px;
  font-weight: 500;
  text-align: center;
}

.s-cta__title {
  font-size: 56px;
  line-height: 59px;
  letter-spacing: -0.028em;
  color: #FAF6EE;
  font-weight: 500;
  text-wrap: balance;
  margin-bottom: 32px;
  text-align: center;
}

.s-cta__title .serif-i {
  font-size: 61.6px;
  line-height: 65px;
  letter-spacing: -0.005em;
  font-weight: 400;
}

.s-cta__subtitle {
  font-size: 18px;
  line-height: 1.65;
  color: #E8DFCC;
  max-width: 560px;
  margin: 0 auto 56px;
  text-align: center;
}

.s-cta__subtitle strong {
  color: #FAF6EE;
  font-weight: 500;
}

/* Card de vidro com o CTA principal */
.cta-glass {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 44px 48px;
  background: rgba(250, 246, 238, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(250, 246, 238, 0.1);
  border-radius: 24px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2),
    0px 24px 60px rgba(0, 0, 0, 0.3),
    inset 0px 1px 0px 1px rgba(250, 246, 238, 0.08);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-glass__glow {
  position: absolute;
  top: -43px;
  right: -59px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(212, 196, 160, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.cta-glass__inner {
  position: relative;
  z-index: 1;
}

.cta-glass__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D4C4A0;
  margin-bottom: 24px;
  font-weight: 500;
}

.cta-glass__text {
  font-size: 22px;
  line-height: 30px;
  color: #FAF6EE;
  font-weight: 400;
  letter-spacing: -0.012em;
  margin: 0 auto 48px;
  max-width: 440px;
}

/* Parte em serif dentro do texto do card */
.cta-glass__text .serif-i {
  font-size: 25.1px;
  line-height: 34px;
  letter-spacing: -0.005em;
}

/* "Vamos construir o seu?" — pequeno label antes do botão */
.cta-glass__question {
  font-size: 12.4px;
  line-height: 16px;
  color: #FAF6EE;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 19px;
}

/* Botão CTA específico desta seção */
.btn--cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px 18px 32px;
  height: 64px;
  background: #FAF6EE;
  color: #1A1614;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 999px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2),
    0px 12px 32px rgba(0, 0, 0, 0.3),
    inset 0px 1px 0px rgba(255, 255, 255, 0.5);
  text-decoration: none;
  box-sizing: border-box;
}

.btn--cta .btn-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: #1A1614;
  color: #FAF6EE;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  font-size: 0;
  line-height: 0;
}

.btn--cta .btn-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: auto;
}

/* Nota do WhatsApp abaixo do botão */
.cta-glass__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.4px;
  margin-top: 19px;
  font-size: 8.8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #D4C4A0;
}

.cta-glass__whatsapp-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #7A6B52;
  border-radius: 50%;
}


/* ══════════════════════════════════════════════════════════════
   §08 — FAQ
   Perguntas frequentes, sempre abertas
   ══════════════════════════════════════════════════════════════ */
.s-faq {
  padding: 160px 0;
  background: var(--c-bg);
}

/* Lista de perguntas */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 42px;
}

/* Item individual de FAQ */
.faq-item {
  padding: 28px 32px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 20px;
  align-items: start;
}

.faq-num {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  padding-top: 5px;
}

.faq-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* h3 só embrulha o botão por semântica de heading — sem margin própria */
.faq-question-heading {
  margin: 0;
}

/* Botão: reset de estilos nativos, mantém a tipografia da pergunta.
   Sempre clicável no DOM; o colapso visual (accordion) só existe no
   tier <=640px — ver responsive.css e main.js (módulo 08). No
   desktop funciona como texto estático (sem indicador, cursor:auto
   — nada acontece ao clicar, então nada deve sugerir que aconteça),
   perguntas sempre abertas. */
.faq-question {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  color: var(--c-ink);
  cursor: auto;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.012em;
  font-weight: 500;
}

.faq-answer {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-ink-3);
  margin: 0;
}

.faq-answer em {
  font-style: italic;
  font-weight: 500;
  color: var(--c-ink);
}


/* ══════════════════════════════════════════════════════════════
   §09 — CTA FINAL
   Última palavra: diamantes, lead serif, convite final
   ══════════════════════════════════════════════════════════════ */
.s-final {
  padding: 160px 0 180px;
  border-radius: 120px 120px 0 0;
  margin: 16px 0 0;
  background: url('../public/Lastsectionbackground.webp') center / cover no-repeat;
  position: relative;
  overflow: hidden;
}

/* col-center override: Figma usa 900px de área útil (vs. --w-reading: 760px) */
.s-final .col-center {
  max-width: 948px;
}

/* Diamantes concêntricos de fundo */
.s-final__diamond-1 {
  top: 120px;
  width: 780px;
  height: 780px;
}

.s-final__diamond-2 {
  top: 240px;
  width: 500px;
  height: 500px;
  border-color: rgba(26, 22, 20, 0.06);
}

.s-final__diamond-3 {
  top: 360px;
  width: 240px;
  height: 240px;
  border-color: rgba(26, 22, 20, 0.08);
}

.s-final .eyebrow {
  margin-bottom: 31.3px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(26, 22, 20, 0.08);
}

.s-final .eyebrow span {
  color: #FFFFFF;
}

.s-final__lead {
  font-size: 15px;
  line-height: 26px;
  color: #F1F1F1;
  max-width: 596px;
  margin: 0 auto 60px;
  text-shadow: 1px 2px 6px #00000045;
  text-align: center;
  letter-spacing: -0.007em;
}

.s-final__title {
  font-size: 64px;
  line-height: 54px;
  letter-spacing: -0.030em;
  font-weight: 500;
  color: #FFFFFF;
  max-width: 900px;
  margin: 0 auto 32.3px;
  text-align: center;
}

/* nowrap: mesma razão do título de §05/tflow — a parte serif quebra
   como um bloco só, nunca dividida em duas linhas. */
.s-final__title .serif-i {
  font-size: 61px;
  line-height: 73px;
  letter-spacing: -0.005em;
  font-weight: 400;
  white-space: nowrap;
}

/* Reveal de assinatura (mesmo gesto do hero): o título-clímax do §08
   materializa de um leve desfoque, subindo curto, ao entrar no viewport. */
.s-final__title.reveal {
  transform: translateY(14px);
  filter: blur(12px);
  transition: opacity var(--t-signature) var(--ease-out),
    transform var(--t-signature) var(--ease-out),
    filter var(--t-signature) var(--ease-out);
}

.s-final__title.reveal.is-visible {
  filter: blur(0);
}

.s-final__subtitle {
  font-size: 18px;
  line-height: 29px;
  color: #F1F1F1;
  max-width: 620px;
  margin: 0 auto 31.3px;
  text-shadow: 1px 2px 8px #0000005e;
  text-align: center;
  letter-spacing: -0.005em;
}

.s-final__subtitle .serif-i {
  font-size: 19.4px;
  line-height: 31px;
  color: #F1F1F1;
  font-style: italic;
  letter-spacing: -0.005em;
}

/* Grupo de CTA + badges */
.s-final__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 48px;
  /* subtítulo→botão = 31.3 (margin) + 48 (padding) = 79.3px */
}

.s-final__cta .btn {
  background: #1a1614;
  color: #FAF6EE;
}

.s-final__badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 8px;
  /* botão→container = 24px (gap) + 8px (padding) = 32px até os badges */
}

/* Dots ocultos nos badges desta seção — design limpo sem marcadores */
.s-final__badges .badge-dot {
  display: none;
}

.s-final__badges .badge {
  background: rgb(255 255 255 / 76%);
  border: 1px solid rgba(26, 22, 20, 0.08);
  color: #0c0c0c;
}

.s-final__badge-vagas {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}


/* ══════════════════════════════════════════════════════════════
   FOOTER
   Rodapé escuro: logo, descrição, links, copyright
   ══════════════════════════════════════════════════════════════ */
.footer {
  padding: 72px 0 56px;
  background: var(--c-dark);
  color: var(--c-accent-muted);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Área principal: logo + desc + links */
.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--c-border-dk-sm);
  margin-bottom: 32px;
}

.footer-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-accent-muted);
  max-width: 420px;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  font-size: 13.5px;
  color: #E8DFCC;
  transition: color var(--t-fast) var(--ease-out);
}

.footer-links a:hover {
  color: var(--c-surface-2);
}

.footer-links__cta {
  font-weight: 500;
  color: var(--c-surface-2) !important;
}

/* Rodapé inferior: copyright */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-accent);
}