/* ==========================================================================
   JARDIM MOAZ — CONSTRUÇÃO FINANCIADA | styles.css
   --------------------------------------------------------------------------
   Identidade: kit_preparado do Jardim Moaz (marca.json). O símbolo da marca é
   a SERRA (duas montanhas). Ela vira sistema na página inteira: marcador de
   eyebrow, régua sob os títulos, divisória entre dobras, textura de fundo,
   selo, bullet de lista e horizonte no fim do hero.
   Os dois motivos entram em data URI (playbook 15.1): funcionam em file://,
   em print e em PDF, que é como o cliente abre o site.
   ========================================================================== */

:root {
  /* --- Marca (kit_preparado / marca.json) --------------------------------- */
  --brand:        #2490c0;   /* azul da serra */
  --brand-strong: #1b7099;   /* hover / contraste */
  --brand-light:  #87cae8;   /* acento sobre fundo escuro */
  --brand-pale:   #e8f4fa;   /* tint claro */
  --brand-soft:   rgba(36,144,192,.10);

  /* verde da marca (o ponto do "LOTEAMENTO • RESIDENCIAL") = conversão */
  --green:        #309c48;
  --green-deep:   #237636;
  --green-light:  #46c163;

  /* risco (semântico, único vermelho da página) */
  --red:          #c0392b;

  /* --- Superfícies -------------------------------------------------------- */
  --ink:      #061a22;
  --ink-2:    #0b2b38;
  --ink-3:    #12414f;
  --white:    #ffffff;
  --off:      #f4f7f9;
  --mute:     #e9eff3;
  --line:     #dde5ea;
  --text:     #10222a;
  --text-mute:#3d525c;
  --on-dark:      #eaf3f7;
  --on-dark-mute: #b9cdd7;

  /* --- Forma (raio medido no ícone pelo kit) ------------------------------ */
  --radius:    13px;
  --radius-sm: 9px;
  --radius-lg: 20px;

  /* --- Tipografia --------------------------------------------------------- */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-text:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Layout ------------------------------------------------------------- */
  --container: 1180px;
  --container-pad: clamp(20px, 4vw, 40px);
  --header-h: 90px;

  --shadow-sm: 0 4px 14px rgba(6,26,34,.06);
  --shadow:    0 14px 40px rgba(6,26,34,.10);
  --shadow-lg: 0 26px 62px rgba(6,26,34,.18);

  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .2s var(--ease);
  --t: .35s var(--ease);

  /* --- MOTIVOS DA MARCA (data URI: sobrevivem a file://, print e PDF) ------
     --mark-full = a serra inteira (duas montanhas) → textura, selo, ícone.
     --mark-band = o pico que emenda na horizontal → régua, divisória, bullet.
     Recortados do arquivo real da logo pela skill kit-de-marca.             */
  --mark-full:url('data:image/png;base64,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');
  --mark-band:url('data:image/png;base64,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');
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--brand); color: #fff; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ==========================================================================
   A SERRA COMO SISTEMA
   Aplicações reutilizáveis. Todas nascem visíveis: identidade não pode
   depender de JS, senão some em print e em PDF (playbook 15.3).
   ========================================================================== */

/* 1. Divisória entre dobras */
.serra-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 26px 0;
  background: var(--white);
}
.serra-divider::before,
.serra-divider::after {
  content: "";
  height: 1px;
  width: clamp(50px, 16vw, 190px);
  background: linear-gradient(90deg, transparent, rgba(36,144,192,.45));
}
.serra-divider::after { transform: scaleX(-1); }
.serra-divider__mark {
  width: 62px; height: 15px;
  background: var(--brand);
  -webkit-mask: var(--mark-full) center/contain no-repeat;
          mask: var(--mark-full) center/contain no-repeat;
  flex: 0 0 auto;
}
.serra-divider__mark--sm { width: 34px; height: 8px; opacity: .45; }

/* 2. Textura de serra em dobras escuras (baixíssima opacidade) */
.serra-texture { position: relative; isolation: isolate; }
.serra-texture > * { position: relative; z-index: 1; }
.serra-texture::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .022;
  background-color: var(--brand-light);
  -webkit-mask: var(--mark-full) 0 0/460px 105px repeat;
          mask: var(--mark-full) 0 0/460px 105px repeat;
}

/* 3. Bullet de pico (listas) */
.peak-list li {
  position: relative;
  padding-left: 30px;
  line-height: 1.6;
}
.peak-list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 19px; height: 9px;
  background: var(--brand);
  -webkit-mask: var(--mark-band) center/contain no-repeat;
          mask: var(--mark-band) center/contain no-repeat;
}

/* ==========================================================================
   TIPOGRAFIA UTILITÁRIA
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
}
/* Marcador de eyebrow = a serra da marca, nunca uma bolinha genérica */
.eyebrow::before {
  content: "";
  width: 26px; height: 6px;
  background: currentColor;
  -webkit-mask: var(--mark-full) center/contain no-repeat;
          mask: var(--mark-full) center/contain no-repeat;
  flex: 0 0 auto;
}
.eyebrow--dark  { color: var(--ink); }
.eyebrow--light { color: var(--brand-light); }
.eyebrow--onred { color: var(--red); }

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(28px, 4vw, 47px);
  line-height: 1.16;
  letter-spacing: -.015em;
  margin-bottom: 20px;
  max-width: 010ch;
  max-width: 21ch;
  text-wrap: balance;
}
.section-title--light { color: #fff; }
.section-title--wide  { max-width: 26ch; }
/* Título que tem que caber numa linha só no desktop. Corpo menor e sem trava
   de medida: abaixo de ~520px ele quebra, o que é o certo no celular. */
.section-title--oneline {
  max-width: none;
  font-size: clamp(20px, 3vw, 40px);
  text-wrap: nowrap;
}
@media (max-width: 680px) { .section-title--oneline { text-wrap: balance; font-size: clamp(24px, 5.4vw, 32px); } }


.section-lead {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--text-mute);
  max-width: 62ch;
  margin-bottom: 44px;
}
.section-lead--light { color: var(--on-dark-mute); }

.accent { color: var(--brand); }
.section-title--light .accent { color: var(--brand-light); }
.accent-red { color: var(--red); }

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .005em;
  padding: 15px 28px;
  border-radius: var(--radius);
  transition: transform var(--t-fast), background var(--t), color var(--t), box-shadow var(--t);
  text-align: center;
  isolation: isolate;
}
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 18px 34px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--compact { padding: 11px 20px; font-size: 14px; }

/* anel de pulso (só nos CTAs principais, nunca na barra fixa) */
.btn--accent, .btn--green { color: #fff; }
.btn--accent::after, .btn--green::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: var(--radius);
  animation: ringPulse 2.1s ease-out infinite;
}
@keyframes ringPulse {
  0%   { inset: 0;     opacity: .5; }
  70%  { inset: -12px; opacity: 0; }
  100% { inset: -12px; opacity: 0; }
}
.btn--accent { background: var(--brand); box-shadow: 0 12px 30px -10px rgba(36,144,192,.7); }
.btn--accent::after { background: var(--brand); }
.btn--accent:hover  { background: var(--brand-strong); }

.btn--green { background: linear-gradient(118deg, var(--green-light), var(--green) 55%, var(--green-deep)); box-shadow: 0 12px 30px -10px rgba(48,156,72,.7); }
.btn--green::after { background: var(--green-light); }
.btn--green:hover { filter: brightness(1.07); }

.btn--ghost-light {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.22); }

.btn--back { background: var(--mute); color: var(--ink); }
.btn--back:hover { background: #d8e2e8; }

@media (max-width: 620px) {
  /* label longo não pode virar linha única e estourar a dobra (playbook 14.2) */
  .btn { white-space: normal; line-height: 1.32; }
}

/* ==========================================================================
   BARRA DE PROGRESSO DE LEITURA
   ========================================================================== */
.read-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  z-index: 1000;
  transition: width .1s linear;
  pointer-events: none;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  display: flex; align-items: center;
  /* Superfície PRÓPRIA: o resto do site é quase preto (--ink #061a22), aqui
     o azul da marca domina. O degradê anda devagar na diagonal, então o
     cabeçalho se destaca sem precisar de borda nem de sombra pesada.
     Faixa clara mantida em #10566f: contraste 8:1 com o texto branco. */
  background-image: linear-gradient(115deg,
    #072b3a 0%, #0b4257 22%, #10566f 38%, #0a3446 62%, #072b3a 80%, #0b4257 100%);
  background-size: 260% 100%;
  background-position: 0% 50%;
  animation: headerFlow 22s linear infinite;
  transition: box-shadow var(--t);
}
@keyframes headerFlow { to { background-position: 260% 50%; } }

/* Brilho da marca atravessando o cabeçalho. Fica atrás do conteúdo. */
.site-header::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%, rgba(36,144,192,.30) 38%, rgba(135,202,232,.20) 50%, rgba(36,144,192,.26) 62%, transparent 100%);
  background-size: 55% 100%;
  background-repeat: no-repeat;
  animation: headerSheen 11s var(--ease) infinite;
}
@keyframes headerSheen {
  0%       { background-position: -60% 0; opacity: .0; }
  12%      { opacity: 1; }
  78%      { opacity: 1; }
  90%, 100% { background-position: 160% 0; opacity: 0; }
}
/* fio da marca no topo do header */
.site-header::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand) 26%, var(--brand-light) 50%, var(--brand) 74%, transparent);
  opacity: .9;
  z-index: 2;
}

/* rolou a página: o degradê continua andando, a barra só ganha peso.
   Sem backdrop-filter: a superfície é opaca, o desfoque não apareceria. */
.site-header.is-solid { box-shadow: 0 10px 34px -14px rgba(0,0,0,.72); }
.site-header__inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 16px;
  width: 100%; height: 100%;
}
.site-header__brand { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }

/* ==========================================================================
   A ONDA DA MARCA, DENTRO DA LOGO
   Único lugar do cabeçalho onde há movimento. O arquivo da logo foi separado
   em duas camadas: o lettering fica parado e só a serra se desenha da
   esquerda para a direita na entrada, o mesmo movimento do vídeo do indoor.
   Anima por clip-path (revela), não por scaleX: esticar achataria os picos.
   A serra NASCE desenhada e a animação só reencena a entrada, então sem JS,
   em print e com "reduzir movimento" ela continua lá (playbook 15.3).
   ========================================================================== */
.brand-logo { position: relative; display: block; height: 56px; }
.brand-logo img {
  height: 100%; width: auto; display: block;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
}
.brand-logo__serra {
  position: absolute; inset: 0;
  animation: brandSerraDraw 1.7s cubic-bezier(.55,.06,.2,1) .35s both;
}
/* o traço vive entre 12,7% e 82,4% da largura do arquivo: a revelação corre
   nesse intervalo e só depois abre o resto, senão sobra tempo morto */
@keyframes brandSerraDraw {
  0%   { clip-path: inset(0 88% 0 0); }
  84%  { clip-path: inset(0 16% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
/* reaproveitada pela régua de autoridade */
@keyframes serraDraw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* faixa de nav sempre visível, deslizando pro lado (sem hambúrguer) */
.site-nav {
  display: flex; align-items: center; gap: 7px;
  margin-left: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 1.5%, #000 97%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 1.5%, #000 97%, transparent 100%);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a[data-section] {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
  transition: color .2s var(--ease), background .25s var(--ease);
}
.site-nav a[data-section]:hover { color: #fff; background: rgba(255,255,255,.14); }
.site-nav a[data-section].current { color: var(--ink); background: #fff; font-weight: 700; }
.site-header__cta { flex-shrink: 0; margin-left: 6px; }

@media (max-width: 980px) {
  :root { --header-h: 72px; }
  .site-header__cta { display: none; }
  .brand-logo { height: 34px; }
  .site-nav { margin-left: 12px; }
  .site-nav a[data-section] { padding: 6px 13px; font-size: 12.5px; color: #fff; background: rgba(255,255,255,.11); }
  .site-nav a[data-section].current { background: #fff; color: var(--ink); }
}

/* ==========================================================================
   HERO — a foto real do loteamento, com a serra que virou a logo no horizonte
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 44px) 0 110px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
/* A imagem sangra a dobra inteira e o cabeçalho passa por cima: sem emenda
   entre header e foto (mesma construção da primeira dobra da Romualdo). */
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  animation: heroZoom 20s var(--ease) infinite alternate;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, rgba(6,26,34,.92) 0%, rgba(6,26,34,.78) 34%, rgba(6,26,34,.34) 66%, rgba(6,26,34,.16) 100%),
    linear-gradient(180deg, rgba(6,26,34,.14) 0%, transparent 20%, rgba(6,26,34,.62) 100%);
}
@media (max-width: 760px) {
  .hero__overlay {
    background: linear-gradient(180deg,
      rgba(6,26,34,.80) 0%, rgba(6,26,34,.72) 30%,
      rgba(6,26,34,.52) 58%, rgba(6,26,34,.78) 100%);
  }
}

.hero__content { position: relative; z-index: 1; text-align: left; }

/* Escala da primeira dobra copiada da LP da Romualdo: com a mesma H1 e o
   mesmo parágrafo, esses valores fazem os três blocos (título, subtítulo e
   botões) fecharem quase na mesma margem direita. Mexer em um só desalinha. */
.hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: #fff;
  margin-bottom: 26px;
  max-width: 20ch;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0,0,0,.4);
}
.hero__headline .accent { color: var(--brand-light); }
.hero__sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--on-dark);
  max-width: 60ch;
  margin-bottom: 36px;
  text-shadow: 0 2px 18px rgba(0,0,0,.42);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__cue {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(26px, 4vh, 44px);
  padding-top: clamp(18px, 2.6vh, 26px);
  border-top: 1px solid rgba(255,255,255,.16);
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.hero__cue:hover { color: var(--brand-light); }
.hero__cue-chevron {
  display: inline-grid; place-items: center;
  width: 33px; height: 33px;
  border-radius: 50%;
  background: rgba(36,144,192,.34);
  border: 1px solid rgba(135,202,232,.45);
  color: #fff;
  animation: cueBounce 1.9s ease-in-out infinite;
}
.hero__cue:hover .hero__cue-chevron { background: var(--brand); }
.hero__cue-chevron svg { width: 15px; height: 15px; }
@keyframes cueBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Notebook de 13 polegadas (1366x680 e afins): sem isto o CTA primário nasce
   abaixo da linha d'água. O hero é min-height, então nada é clipado, mas o
   botão que converte tem que aparecer sem rolagem. */
@media (min-width: 761px) and (max-height: 780px) {
  /* Só encolhe respiro. A escala do tipo fica igual à da Romualdo, senão o
     título perde peso justo na tela mais comum e a dobra desalinha. */
  .hero { padding-top: calc(var(--header-h) + 24px); padding-bottom: 78px; }
  .hero__headline { margin-bottom: 18px; }
  .hero__sub { margin-bottom: 26px; }
  .hero__cue { margin-top: 20px; padding-top: 14px; }
}

@media (max-width: 600px) {
  .hero { padding-bottom: 96px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* ==========================================================================
   NÚMEROS DE AUTORIDADE
   ========================================================================== */
.proof {
  background: var(--ink);
  color: #fff;
  padding: clamp(46px, 6vw, 74px) 0 clamp(40px, 5vw, 62px);
  position: relative;
  z-index: 2;
}
.proof--single { padding: clamp(46px, 6vw, 74px) 0; }
.proof__solo {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(22px, 5vw, 54px); flex-wrap: wrap;
}
/* A ONDA da marca abrindo a régua, antes do "+14 anos". Segundo e último
   lugar animado da página. Nasce desenhada; o estado escondido só existe
   quando o JS marca .reveal, então em print e sem JS ela continua lá. */
.proof__seal {
  flex: 0 0 auto;
  width: clamp(96px, 10vw, 132px); aspect-ratio: 150 / 34;
  background: linear-gradient(90deg, var(--brand-light) 0%, var(--brand) 58%, var(--brand-strong) 100%);
  -webkit-mask: var(--mark-full) center/contain no-repeat;
          mask: var(--mark-full) center/contain no-repeat;
  filter: drop-shadow(0 4px 14px rgba(36,144,192,.45));
}
.proof__solo.reveal .proof__seal { clip-path: inset(0 100% 0 0); }
.proof__solo.reveal.is-visible .proof__seal {
  animation: serraDraw 1.5s cubic-bezier(.55,.06,.2,1) .18s forwards;
}
.proof__solo-num {
  flex: 0 0 auto; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(46px, 7vw, 76px); color: var(--brand-light);
  line-height: .92; letter-spacing: -.035em;
}
.proof__solo-num small {
  display: block; margin-top: 9px;
  font-size: .22em; color: var(--on-dark-mute); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.proof__solo-label {
  flex: 1 1 0; max-width: 46ch;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--on-dark); line-height: 1.55;
  border-left: 3px solid var(--brand); padding-left: 24px;
}
.proof__solo-label strong { color: #fff; font-weight: 600; }
.proof__solo-label .proof__hl { color: var(--brand-light); font-weight: 700; }
@media (max-width: 660px) {
  .proof__solo { flex-direction: column; text-align: center; gap: 18px; }
  .proof__solo-label { border-left: 0; border-top: 3px solid var(--brand); padding-left: 0; padding-top: 16px; }
}

/* ==========================================================================
   PROCESSO — 4 etapas
   ========================================================================== */
.process {
  padding: clamp(66px, 8vw, 112px) 0;
  background: var(--off);
  position: relative;
  overflow: hidden;
}
.process::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -12%, rgba(36,144,192,.10), transparent 58%);
  pointer-events: none;
}
.process .container { position: relative; z-index: 1; }

/* Os cards ocupam o container inteiro, não uma faixa centrada de 940px: o
   card 1 tem que nascer na mesma margem esquerda do título e da linha
   "Uma jornada em quatro passos". Centrado, ele começava 80px à direita. */
.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 46px 0 0;
}
.step {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 30px 28px;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s var(--ease), transform .6s var(--ease),
              box-shadow var(--t), border-color var(--t);
}
.step.on { opacity: 1; transform: translateY(0); }
.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 46px rgba(6,26,34,.11);
  border-color: rgba(36,144,192,.45);
}
/* cordilheira que "desenha" no topo do card ao revelar */
.step::before {
  content: "";
  position: absolute; top: 0; left: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-strong));
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease) .16s;
}
.step.on::before { transform: scaleX(1); }
.step__ghost {
  position: absolute; top: -22px; right: 6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 158px; line-height: 1;
  color: var(--brand);
  opacity: .13; pointer-events: none; user-select: none;
  transition: opacity var(--t), transform .5s var(--ease);
}
.step:hover .step__ghost { opacity: .2; transform: translateY(4px); }
.step__icon {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center;
  width: 58px; height: 58px; margin-bottom: 16px;
  border-radius: var(--radius);
  background: linear-gradient(152deg, var(--brand), var(--brand-strong));
  color: #fff;
  box-shadow: 0 10px 24px rgba(36,144,192,.38);
  transform: scale(.5) rotate(-14deg); opacity: 0;
  transition: transform .55s cubic-bezier(.2,1.35,.4,1) .16s, opacity .4s .16s, box-shadow var(--t);
}
.step.on .step__icon { transform: scale(1) rotate(0); opacity: 1; }
.step:hover .step__icon { box-shadow: 0 14px 32px rgba(36,144,192,.56); }
.step__icon svg { width: 26px; height: 26px; }
/* serra fantasma dentro do selo, mesmo traço da marca */
.step__icon::after {
  content: "";
  position: absolute; left: 8px; right: 8px; bottom: 7px; height: 9px;
  background: rgba(255,255,255,.4);
  -webkit-mask: var(--mark-full) center/contain no-repeat;
          mask: var(--mark-full) center/contain no-repeat;
}
.step__kicker {
  position: relative; z-index: 1; display: block;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
  margin-bottom: 7px;
}
.step__title {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2vw, 21px); color: var(--ink);
  line-height: 1.22; letter-spacing: -.015em; margin-bottom: 10px;
}
.step__text { position: relative; z-index: 1; font-size: 15px; color: var(--text-mute); line-height: 1.62; }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } .step__ghost { font-size: 128px; } }

/* ==========================================================================
   RISCO — construir por conta, aos poucos
   ========================================================================== */
.risk-band {
  position: relative;
  padding: clamp(56px, 7vw, 92px) 0;
  background: var(--white);
  color: var(--text);
  border-top: 1px solid var(--line);
}
.risk-band__inner {
  display: grid;
  grid-template-columns: minmax(250px, 370px) 1fr;
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
}
.risk-band__aside .section-title { max-width: 16ch; margin-bottom: 24px; }
.risk-band__list { display: flex; flex-direction: column; }
.rb {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
}
.rb:last-child { border-bottom: 0; }
.rb__ic {
  flex: 0 0 auto; width: 27px; height: 27px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--red); color: #fff;
}
.rb__ic svg { width: 13px; height: 13px; }
.rb__txt {
  position: relative;
  font-size: clamp(15px, 1.5vw, 16px); line-height: 1.42;
  color: var(--text); padding-bottom: 3px;
  transition: color .4s var(--ease);
}
.rb__txt::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.rb.is-struck .rb__txt::after { transform: scaleX(1); }
.rb.is-struck .rb__txt { color: var(--text-mute); }
@media (max-width: 780px) {
  .risk-band__inner { display: flex; flex-direction: column; gap: 26px; align-items: stretch; }
  .risk-band__aside { display: contents; }
  .risk-band__aside .section-title { max-width: none; order: 1; margin: 0 0 4px; }
  .risk-band__list { order: 2; }
  .risk-band__cta { order: 3; }
}

/* ==========================================================================
   MODELOS / OFERTA (dobra escura)
   ========================================================================== */
.offer {
  background: linear-gradient(168deg, var(--ink-2) 0%, var(--ink) 58%, #04141b 100%);
  color: #fff;
  padding: clamp(70px, 9vw, 118px) 0;
  position: relative;
  overflow: hidden;
}
.offer::before {
  content: "";
  position: absolute; top: -140px; right: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(36,144,192,.20) 0%, transparent 70%);
  pointer-events: none;
}
.offer__head { max-width: 760px; margin-bottom: 48px; position: relative; z-index: 1; }

.model__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative; z-index: 1;
}
.model {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.model:hover {
  transform: translateY(-5px);
  border-color: rgba(36,144,192,.55);
  background: rgba(36,144,192,.08);
}
.model--featured {
  border-color: rgba(36,144,192,.5);
  background: linear-gradient(180deg, rgba(36,144,192,.14), rgba(255,255,255,.02));
  position: relative;
}
.model--featured::after {
  content: "";
  position: absolute; top: -60%; left: -45%;
  width: 38%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(135,202,232,.14), transparent);
  transform: rotate(12deg);
  animation: cardSheen 5.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cardSheen { 0% { left: -45%; } 60%, 100% { left: 130%; } }

/* Capa do modelo: foto da fachada, com a crista da serra fechando a base.
   ⚠️ As fotos são ILUSTRATIVAS (vieram do site do Romualdo, provisórias).
   Trocar assim que o Jardim Moaz tiver render ou foto de casa própria. */
.model__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.model__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.model:hover .model__img img { transform: scale(1.05); }

.model__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.model__tier {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; margin-bottom: 15px;
  background: rgba(255,255,255,.1); color: var(--on-dark);
}
.model__tier--accent { background: var(--brand); color: #fff; }
.model__type {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  color: #fff; margin-bottom: 14px; line-height: 1.2;
}
.model__type span { color: var(--brand-light); }
.model__specs {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 20px; padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.model__specs li { color: var(--on-dark-mute); font-size: 14.5px; }
.model__specs li::before { background: var(--brand-light); top: .55em; }
.model__price { margin-top: auto; display: flex; flex-direction: column; gap: 3px; }
.model__label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--brand-light);
}
.model__value {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 29px); font-weight: 700;
  color: #fff; letter-spacing: -.025em; line-height: 1.15; white-space: nowrap;
}
.model__value small { display: block; font-size: .40em; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--on-dark-mute); margin-bottom: 3px; }
.model__specs { flex: 0 0 auto; }
.model__installment {
  margin-top: 16px; padding-top: 15px;
  border-top: 1px dashed rgba(255,255,255,.17);
  display: flex; flex-direction: column; gap: 3px;
}
.model__inst-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--brand-light);
}
.model__inst-value {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; color: #fff; line-height: 1.3;
}
.model__inst-value small { font-size: .55em; font-weight: 500; color: var(--on-dark-mute); }

.offer__note {
  position: relative; z-index: 1;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px dashed rgba(255,255,255,.14);
  font-size: 13px; color: var(--on-dark-mute);
  text-align: center; max-width: 78ch; margin-left: auto; margin-right: auto;
}
.offer__cta { position: relative; z-index: 1; text-align: center; margin-top: 38px; }
@media (max-width: 900px) {
  .model__grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   O LOTEAMENTO (galeria real)
   ========================================================================== */
/* Dobra curta de propósito: quem manda aqui é o carrossel, não o texto.
   Cabeçalho em linha só, largo e raso, com metade do respiro das outras. */
.gallery { padding: clamp(40px, 4.6vw, 66px) 0; background: var(--white); overflow: hidden; }
/* sem linha de apoio: só o eyebrow e o título seguram a dobra */
.gallery__head { margin-bottom: 34px; max-width: none; }
.gallery__head .section-title { margin-bottom: 0; }

.marquee-wrap { position: relative; }
.marquee__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  box-shadow: 0 8px 20px rgba(36,144,192,.42);
  transition: transform var(--t), background var(--t);
}
.marquee__nav:hover { background: var(--brand-strong); transform: translateY(-50%) scale(1.07); }
.marquee__nav:active { transform: translateY(-50%) scale(.96); }
.marquee__nav svg { width: 22px; height: 22px; }
.marquee__nav--prev { left: clamp(8px, 3vw, 32px); }
.marquee__nav--next { right: clamp(8px, 3vw, 32px); }
@media (max-width: 600px) {
  .marquee__nav { width: 42px; height: 42px; }
  .marquee__nav svg { width: 18px; height: 18px; }
}

.marquee {
  position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  padding: 8px 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.marquee.is-dragging { cursor: grabbing; }
.marquee__track { display: flex; gap: 22px; width: max-content; will-change: transform; }
.marquee__item {
  position: relative; flex: 0 0 auto;
  width: clamp(260px, 32vw, 390px);
  height: clamp(320px, 42vw, 505px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mute);
  box-shadow: 0 12px 32px rgba(6,26,34,.12);
  isolation: isolate;
}
.marquee__item img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
  -webkit-user-drag: none; user-drag: none;
  pointer-events: none;
}
.marquee__item:hover img { transform: scale(1.06); }
.marquee__item::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 46%, rgba(6,26,34,.86) 100%);
}
.marquee__item figcaption {
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
  font-family: var(--font-display);
  color: #fff; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}
/* marcador da legenda = a serra da marca */
.marquee__item figcaption::before {
  content: "";
  width: 22px; height: 10px; flex: 0 0 auto;
  background: var(--brand-light);
  -webkit-mask: var(--mark-band) center/contain no-repeat;
          mask: var(--mark-band) center/contain no-repeat;
}
@media (max-width: 600px) {
  .marquee__track { gap: 14px; }
  .marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
}
.gallery__cta { text-align: center; margin-top: 48px; }

/* ==========================================================================
   QUEM CONDUZ
   ========================================================================== */
.experts { padding: clamp(66px, 8vw, 112px) 0; background: var(--off); position: relative; }
.experts__inner {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}
.experts__photo {
  position: relative;
  padding: 4px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--brand), var(--brand-strong));
  box-shadow: 0 26px 52px rgba(6,26,34,.22);
}
.experts__photo img {
  width: 100%;
  border-radius: calc(var(--radius-lg) - 4px);
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 18%;
}
.experts__caption {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: rgba(6,26,34,.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.experts__caption strong { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.experts__caption span { color: var(--on-dark-mute); font-size: 12.5px; margin-top: 3px; }

.experts__copy { max-width: 620px; }
.experts__copy .section-title { max-width: none; }
.experts__lead { font-size: 16.5px; color: var(--text-mute); margin-bottom: 16px; }
.experts__cta { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
@media (max-width: 880px) {
  .experts__inner { grid-template-columns: 1fr; }
  .experts__photo { max-width: 400px; margin: 0 auto; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.objections { padding: clamp(66px, 8vw, 112px) 0; background: var(--white); }
.objections__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.objections__grid .objection:last-child:nth-child(odd) { grid-column: 1 / -1; }
.objection {
  background: var(--off);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 20px 24px;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.objection:hover { transform: translateY(-3px); }
.objection[open] { background: #fff; border-color: rgba(36,144,192,.42); box-shadow: var(--shadow-sm); }
.objection summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-display); font-weight: 500; font-size: 16px;
  color: var(--ink); line-height: 1.4;
}
.objection summary::-webkit-details-marker { display: none; }
.objection__icon {
  position: relative; width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%;
  background: var(--brand-pale);
  border: 1px solid rgba(36,144,192,.4);
  transition: background var(--t), border-color var(--t);
}
.objection__icon::before, .objection__icon::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 2px; border-radius: 2px;
  background: var(--brand-strong);
  transform: translate(-50%,-50%);
  transition: transform var(--t), background var(--t);
}
.objection__icon::after { transform: translate(-50%,-50%) rotate(90deg); }
.objection[open] .objection__icon { background: var(--brand); border-color: var(--brand); }
.objection[open] .objection__icon::before,
.objection[open] .objection__icon::after { background: #fff; }
.objection[open] .objection__icon::after { transform: translate(-50%,-50%) rotate(0); }
.objection p { margin-top: 14px; color: var(--text-mute); font-size: 15px; line-height: 1.7; }
@media (max-width: 780px) { .objections__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FORMULÁRIO
   ========================================================================== */
.viability {
  padding: clamp(70px, 9vw, 118px) 0;
  background: linear-gradient(162deg, var(--ink) 0%, var(--ink-2) 60%, var(--ink-3) 130%);
  position: relative; overflow: hidden;
  color: #fff;
}
.viability::before {
  content: "";
  position: absolute; top: -200px; left: -160px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(36,144,192,.22) 0%, transparent 70%);
  pointer-events: none;
}
.form-head { max-width: 660px; margin: 0 auto 28px; text-align: center; }
.form-head .eyebrow { justify-content: center; }
.form-head .section-title { max-width: none; margin-left: auto; margin-right: auto; }
.form-head .section-lead { margin-left: auto; margin-right: auto; margin-bottom: 0; }

.steps-indicator {
  display: flex; align-items: center; justify-content: center;
  max-width: 460px; margin: 0 auto 24px; position: relative; z-index: 1;
}
.step-item { display: flex; align-items: center; gap: 10px; }
.step-circle {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  transition: background var(--t), color var(--t);
}
.step-circle.active   { background: var(--brand); color: #fff; }
.step-circle.complete { background: var(--green); color: #fff; }
.step-label { font-size: 13.5px; color: var(--on-dark-mute); font-weight: 500; }
.step-item.active .step-label { color: #fff; }
.step-connector { flex: 1 1 auto; height: 2px; background: rgba(255,255,255,.18); margin: 0 14px; position: relative; overflow: hidden; }
.step-connector-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand); transition: width .4s var(--ease); }

.form-card {
  background: #fff; color: var(--text);
  max-width: 560px; margin: 0 auto;
  padding: 34px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
/* cordilheira no topo do card */
.form-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
}
.form-step { display: none; }
.form-step.active { display: block; animation: formFade .35s var(--ease); }
@keyframes formFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.form-step-title { font-family: var(--font-display); font-size: 19px; color: var(--ink); margin: 8px 0 18px; }

.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 13px; font-weight: 500; color: var(--ink); }
.form-group input, .form-group select {
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit; font-size: 15px; color: var(--ink); background: #fff; width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-group input::placeholder { color: #93a3ab; }
.form-group input:focus, .form-group select:focus {
  outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(36,144,192,.18);
}
.form-group input.error, .form-group select.error { border-color: #c83232; background: #fff6f6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; gap: 12px; margin-top: 6px; align-items: stretch; flex-wrap: wrap; }
.form-actions .btn--back { flex: 0 0 auto; }
.form-actions .btn--block { flex: 1 1 200px; width: auto; }

.form-success { display: none; text-align: center; padding: 20px 8px; }
.form-success.show { display: block; animation: formFade .4s var(--ease); }
.form-success h3 { font-family: var(--font-display); font-size: 21px; color: var(--ink); margin-bottom: 8px; }
.form-success p { color: var(--text-mute); font-size: 15px; line-height: 1.62; max-width: 46ch; margin: 0 auto; }

.success-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 14px;
  background: rgba(48,156,72,.15); color: var(--green);
}
.success-icon svg { width: 28px; height: 28px; }

.trust-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px;
  max-width: 660px; margin: 22px auto 0; position: relative; z-index: 1;
}
.trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-dark-mute); }
.trust-item svg { width: 17px; height: 17px; color: var(--brand-light); flex: 0 0 17px; }

.error-msg { display: none; font-size: 12.5px; color: #c83232; font-weight: 500; margin-top: 4px; }
.error-msg.show { display: block; }

@media (max-width: 480px) {
  .form-card { padding: 26px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .step-label { display: none; }
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.site-footer {
  background: #04141b;
  color: var(--on-dark);
  padding: 60px 0 40px;
  text-align: center;
}
.site-footer .container { display: flex; flex-direction: column; align-items: center; }
.site-footer__logo { display: inline-block; line-height: 0; margin-bottom: 22px; }
.site-footer__logo img { width: clamp(170px, 18vw, 214px); height: auto; }
.site-footer__divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; }
.site-footer__divider::before, .site-footer__divider::after {
  content: ""; height: 1px; width: 64px;
  background: linear-gradient(90deg, transparent, rgba(36,144,192,.55));
}
.site-footer__divider::after { transform: scaleX(-1); }
.site-footer__tagline {
  color: var(--on-dark-mute);
  font-size: 14.5px; line-height: 1.65;
  max-width: 62ch; margin-bottom: 28px;
}
.site-footer__info { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; margin-bottom: 32px; }
.site-footer__info-item { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--on-dark-mute); }
.site-footer__info-item svg { width: 18px; height: 18px; color: var(--brand-light); flex: 0 0 18px; }
.site-footer__copy {
  font-size: 12.5px; color: var(--on-dark-mute);
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: 22px; width: 100%; max-width: 720px;
}
.site-footer__dev {
  font-size: 12.5px; color: var(--on-dark-mute); margin-top: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.dev-badge {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .1em;
  transition: transform var(--t-fast);
}
.dev-badge::before {
  content: ""; position: absolute; inset: 1.6px;
  border-radius: calc(var(--radius-sm) - 1px);
  background: #04141b; z-index: 0;
  transition: background var(--t);
}
.dev-badge span { position: relative; z-index: 1; color: var(--brand-light); transition: color var(--t); }
.dev-badge:hover { transform: translateY(-2px); }
.dev-badge:hover::before { background: var(--brand); }
.dev-badge:hover span { color: #fff; }

/* ==========================================================================
   CTA FIXO (todas as larguras) + FAB + POPUP
   ========================================================================== */
.mobile-cta {
  position: fixed; bottom: 0; left: 0; width: 100%;
  z-index: 850;
  display: flex; justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(6,26,34,.93);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.1);
  transform: translateY(120%);
  transition: transform .35s var(--ease);
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta .btn { width: 100%; max-width: 540px; }
.mobile-cta .btn--green::after { animation: none; opacity: 0; }

.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 95;
  width: 58px; height: 58px;
  border-radius: 50% !important;   /* exceção proposital: botão de marca */
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 14px 30px -8px rgba(37,211,102,.6);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), bottom .3s var(--ease);
  animation: waPulse 2.6s var(--ease) infinite;
}
.wa-fab svg { width: 32px; height: 32px; }
.wa-fab:hover { transform: scale(1.06); }
@keyframes waPulse {
  0%,100% { box-shadow: 0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5); }
  50%     { box-shadow: 0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 12px rgba(37,211,102,0); }
}
.wa-fab.lifted { bottom: calc(94px + env(safe-area-inset-bottom)); }
@media (max-width: 767px) {
  .wa-fab { width: 52px; height: 52px; }
  .wa-fab svg { width: 28px; height: 28px; }
  .wa-fab.lifted { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

.lead-popup { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; }
.lead-popup[hidden] { display: none; }
.lead-popup__backdrop {
  position: absolute; inset: 0;
  background: rgba(4,20,27,.74);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: popupFade .3s var(--ease);
}
/* O card carrega o formulário completo em 2 passos e NÃO cabe em tela baixa.
   O overlay centraliza por grid: card maior que a tela transborda pros dois
   lados e o topo fica inalcançável. 40px = o padding do overlay, dos 2 lados. */
.lead-popup__card {
  position: relative;
  width: 100%; max-width: 440px;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 38px 30px 32px;
  box-shadow: var(--shadow-lg);
  animation: popupRise .4s var(--ease);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lead-popup__card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
}
@keyframes popupFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes popupRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.lead-popup__close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  font-size: 1.7rem; line-height: 1; color: #93a3ab;
  transition: color .2s var(--ease);
}
.lead-popup__close:hover { color: var(--ink); }
.lead-popup__title { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-bottom: 8px; line-height: 1.24; }
.lead-popup__sub { font-size: 14.5px; color: var(--text-mute); margin-bottom: 20px; line-height: 1.6; }
.lead-popup__form .form-actions { flex-wrap: wrap; }
.lead-popup__form .btn { white-space: normal; }
.lead-popup__success { display: none; text-align: center; padding: 10px 0; }
.lead-popup__success.show { display: block; animation: popupFade .4s var(--ease); }
.lead-popup__success h3 { font-family: var(--font-display); font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.lead-popup__success p { color: var(--text-mute); font-size: 14.5px; line-height: 1.6; }

/* ==========================================================================
   REVEAL
   ========================================================================== */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.model__grid .model:nth-child(2) { transition-delay: .1s; }
.model__grid .model:nth-child(3) { transition-delay: .2s; }
.objections__grid .objection:nth-child(2) { transition-delay: .06s; }
.objections__grid .objection:nth-child(3) { transition-delay: .12s; }
.objections__grid .objection:nth-child(4) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal], .reveal, .step { opacity: 1; transform: none; }
  .step__icon { opacity: 1; transform: none; }
  .step::before { transform: scaleX(1); }
  .hero__bg img { animation: none; }
  /* as duas ondas: sem movimento, mas desenhadas */
  .brand-logo__serra { animation: none; clip-path: none; }
  .proof__solo.reveal .proof__seal,
  .proof__solo.reveal.is-visible .proof__seal { animation: none; clip-path: none; }
  /* cabeçalho: fica no meio do degradê, sem andar */
  .site-header { animation: none; background-position: 40% 50%; }
  .site-header::after { animation: none; background-position: 30% 0; opacity: 1; }
}