/* ===========================================================
   STYLES — MAIS QUE VITALÍCIO · Landing de Captura · v2
   Brandbook v5.2 · Bizu × Copa do Mundo 2026
   Mobile-first · breakpoint 768px
   =========================================================== */

/* -----------------------------------------------------------
   1. TOKENS — paleta, tipografia, espaçamento
   ----------------------------------------------------------- */
:root {
  /* Cores oficiais */
  --verde-profundo: #00472D;
  --verde-brasil:   #009C3B;
  --ouro-hexa:      #D4AF37;
  --ouro-claro:     #F4D679;
  --navy-estadio:   #001A4D;
  --navy-medio:     #002D7A;
  --branco-ceramico:#F5F2EA;
  --branco-puro:    #FFFFFF;
  --amarelo-brasil: #FFDF00;
  --vermelho-apito: #B22222;
  --preto-carbono:  #0A0A0A;
  --grafite:        #1A1A1A;
  --whatsapp:       #25D366;

  /* Tipografia */
  --fonte-display:   'Anton', 'Bebas Neue', Impact, sans-serif;
  --fonte-display-2: 'Bebas Neue', Impact, sans-serif;
  --fonte-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fonte-mono:      'JetBrains Mono', Menlo, monospace;

  /* Container */
  --container-max: 1240px;
  --container-pad-mobile: 20px;
  --container-pad-desktop: 32px;

  /* Sombras */
  --shadow-cta:  0 8px 24px rgba(0,0,0,0.18);
  --shadow-card: 0 4px 16px rgba(0,71,45,0.08);
  --shadow-foto: 0 20px 50px rgba(0,0,0,0.45);

  /* Escala tipográfica padronizada — H1 Hero é a referência canônica.
     Toda H2 da página + H1 da obrigado usam EXATAMENTE estes valores.
     Toda sub/lead/body usa --fs-sub-hero. */
  --fs-h1-hero-mobile:  clamp(28px, 3.6vw, 48px);
  --fs-h1-hero-tablet:  clamp(32px, 3.8vw, 44px);
  --fs-h1-hero-desktop: clamp(36px, 3.2vw, 50px);
  --fs-sub-hero:        clamp(15px, 1.45vw, 17px);
}

/* -----------------------------------------------------------
   2. BASE
   ----------------------------------------------------------- */
body {
  font-family: var(--fonte-body);
  font-size: 16px;
  line-height: 1.6;
  background: var(--branco-ceramico);
  color: var(--preto-carbono);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-mobile);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--container-pad-desktop); }
}

/* -----------------------------------------------------------
   3. TARJA COUNTDOWN BRASIL — topo absoluto · sticky
   Verde Brasil + Amarelo Brasil + Verde Brasil em gradiente
   JS popula o texto dinamicamente. Esconde se já passou a data.
   ----------------------------------------------------------- */
.tarja-countdown {
  position: relative;
  width: 100%;
  background:
    linear-gradient(90deg,
      var(--verde-brasil) 0%,
      var(--verde-brasil) 18%,
      var(--amarelo-brasil) 35%,
      var(--amarelo-brasil) 65%,
      var(--verde-brasil) 82%,
      var(--verde-brasil) 100%
    );
  color: var(--navy-estadio);
  padding: 11px 16px;
  text-align: center;
  z-index: 199;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.tarja-countdown.hidden {
  display: none;
}

.tarja-countdown-text {
  font-family: var(--fonte-display-2);
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--navy-estadio);
  font-weight: 400;
  line-height: 1.2;
}

.tarja-countdown-text strong {
  font-family: var(--fonte-display);
  font-weight: 400;
  color: var(--verde-profundo);
  font-size: 1.15em;
  letter-spacing: 0.02em;
  padding: 0 4px;
}

/* -----------------------------------------------------------
   3.1 FAIXA DECORATIVA TOPO — 4 stripes finos abaixo da tarja
   ----------------------------------------------------------- */
.faixa-brasil {
  position: relative;
  width: 100%;
  display: flex;
  height: 4px;
  z-index: 198;
}
.faixa-brasil .stripe-verde   { flex: 1; background: var(--verde-brasil); }
.faixa-brasil .stripe-amarelo { flex: 1; background: var(--amarelo-brasil); }

/* -----------------------------------------------------------
   4. DOBRA 1 — HERO (INVERTIDA · fundo branco · copy verde)
   ----------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--branco-ceramico);
  color: var(--verde-profundo);
  /* Padding-top reduzido pra logo subir colando perto da tarja Brasil */
  padding: 20px 0 0;
  overflow: hidden;
}

.hero-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --- COLUNA COPY --- */
.hero-content {
  display: flex;
  flex-direction: column;
}

.hero-logo {
  width: 140px;
  height: auto;
  /* Logo subiu — margem reduzida */
  margin-bottom: 18px;
}

.hero-eyebrow {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--verde-profundo);
  margin-bottom: 18px;
  border-left: 2px solid var(--ouro-hexa);
  padding-left: 12px;
}

.hero h1 {
  /* H1 em Anton (display condensed bold) — texto novo usa CAPS literais
     pra criar a ênfase, sem <strong>. Destaque visual fica no
     highlight-marker amarelo (MAIS QUE VITALÍCIO).
     ESCALA CANÔNICA: --fs-h1-hero-* (toda H2 da página espelha). */
  font-family: var(--fonte-display);
  font-size: var(--fs-h1-hero-mobile);
  font-weight: 400; /* Anton só tem regular; já é display bold por desenho */
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--verde-profundo);
  margin-bottom: 20px;
  max-width: 100%;
}

.hero-sub {
  /* Sub canônica — toda lead/body de outras dobras espelha esta escala. */
  font-family: var(--fonte-body);
  font-size: var(--fs-sub-hero);
  font-weight: 400;
  line-height: 1.55;
  color: var(--navy-estadio);
  margin-bottom: 28px;
  max-width: 54ch;
}

.hero-sub strong {
  font-weight: 700;
  color: var(--verde-profundo);
  letter-spacing: 0.01em;
}

/* --- TARJA AMARELA ANIMADA (marca-texto) ---
   Pinta amarelo Brasil da esquerda pra direita simulando highlighter.
   Anima UMA vez no load (delay pequeno pra dramatizar a entrada). */
.highlight-marker {
  position: relative;
  display: inline;
  /* Gradiente posicionado fora da tela à esquerda — animação puxa pra 0 */
  background-image: linear-gradient(120deg, var(--amarelo-brasil) 0%, var(--amarelo-brasil) 100%);
  background-repeat: no-repeat;
  background-size: 0% 88%;
  background-position: 0 88%;
  padding: 0 4px;
  color: var(--verde-profundo);
  font-weight: 700;
  animation: highlight-paint 0.9s 0.6s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-sub .highlight-marker {
  color: var(--navy-estadio);
}

.highlight-marker--delay {
  animation-delay: 1.6s;
}

/* Variante com sublinhado verde escuro (usado no MAIS QUE VITALÍCIO da H1).
   Combina com a tarja amarela animada — verde escuro contrasta no amarelo. */
.highlight-marker--underline {
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--verde-profundo);
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
}

@keyframes highlight-paint {
  0%   { background-size: 0% 88%; }
  100% { background-size: 100% 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .highlight-marker {
    background-size: 100% 88%;
    animation: none;
  }
}

/* --- COLUNA BANNER ---
   Banner desktop (1280×720): jogadores ocupam só o terço direito; a zona
   escura à esquerda é vazia/cenário e NÃO deve aparecer na Hero.
   Solução: container com aspect-ratio + object-fit: cover + object-position
   pra recortar a zona vazia e exibir apenas o lado dos jogadores.
   Banner mobile (384×640): jogadores embaixo, topo escuro. Mesma estratégia,
   mas posicionado pelo bottom pra preservar os jogadores. */
.hero-banner-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  /* Moldura cores do Brasil: amarelo interno + verde externo (fina e delicada).
     border (2px amarelo) + box-shadow 0 0 0 (2px verde) substitui outline —
     outline era cortado no mobile por parents com overflow/transform; box-shadow
     respeita border-radius e nunca é clipado. Total 4px (vs 8px anterior). */
  border: 2px solid var(--amarelo-brasil);
  box-shadow:
    0 0 0 2px var(--verde-brasil),
    0 16px 40px rgba(0,71,45,0.18);
  background: var(--verde-profundo);
  /* Margem 2px garante respiro pro box-shadow externo não encostar nos vizinhos. */
  margin: 2px;
}

/* <picture> precisa ocupar 100% do wrap pra <img> filho herdar dimensões certas.
   Sem isso, <picture> fica inline com altura natural da imagem (16:9 ou 9:16),
   <img> com width/height 100% referencia <picture> em vez do wrap, e sobra
   vazio (desktop) ou imagem corta zona preta (mobile). */
.hero-banner-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* 1 único <img> renderizado — art-direction feita via <source media> no HTML.
   Mobile-first: object-position center bottom preserva jogadores no banner mobile.
   Desktop override abaixo no media query (>=1024px) ajusta pra right center. */
.hero-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  margin: 0;
}

/* CTA principal */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--amarelo-brasil);
  color: var(--navy-estadio);
  font-family: var(--fonte-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 20px 36px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  text-align: center;
  width: 100%;
  max-width: 420px;
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  background: #FFE83D;
}

.cta:active {
  transform: translateY(0);
}

.cta-arrow {
  font-family: var(--fonte-body);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}

.cta-hero {
  margin-top: 4px;
}

/* -----------------------------------------------------------
   5. DOBRA 1 — DESKTOP LAYOUT (split 50/50 sem corte)
   ----------------------------------------------------------- */
@media (min-width: 768px) {
  .hero {
    /* Padding top reduzido pra conjunto subir; min-height removido pra altura
       seguir o banner (não força viewport inteira mais). */
    padding: 28px 0 56px;
    display: flex;
    align-items: flex-start;
  }

  .hero-grid {
    flex-direction: row;
    /* stretch: conjunto de copy alinha altura com banner (mesma altura) */
    align-items: stretch;
    gap: 48px;
  }

  .hero-content {
    flex: 1.25 1 0;
    max-width: 620px;
    /* Conjunto de copy começa no topo (logo + tarja) e empilha natural.
       O banner que se ajusta pra base alinhar com o CTA — não o texto.
       flex 1.25 dá mais peso ao texto vs banner (texto respira mais). */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .hero-banner-wrap {
    flex: 1 1 0;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    max-height: 80vh;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    /* Moldura cores do Brasil: amarelo interno + verde externo (fina e delicada).
       border 2px + box-shadow 0 0 0 2px substitui outline — total 4px (vs 8px). */
    border: 2px solid var(--amarelo-brasil);
    box-shadow:
      0 0 0 2px var(--verde-brasil),
      0 16px 40px rgba(0,71,45,0.18);
    background: var(--verde-profundo);
    margin: 2px;
    /* Banner desce pra base — bottom alinha com o bottom do botão CTA.
       Elimina vazio embaixo do banner que aparecia antes (estava em flex-start). */
    align-self: flex-end;
  }

  /* Desktop override — banner 1200×676 (jogadores no terço direito).
     object-position: right center recorta a zona vazia e mostra apenas o
     lado dos jogadores + estádio iluminado. */
  .hero-banner-img {
    object-position: right center;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-logo {
    width: 180px;
    /* Logo subiu — margem reduzida no desktop */
    margin-bottom: 24px;
  }

  .hero h1 {
    /* Tablet — Anton estica até o limite do col esquerdo do grid. */
    font-size: var(--fs-h1-hero-tablet);
    max-width: 100%;
  }

  /* Tablet — toda H2 da página espelha H1 Hero. */
  .dobra-2 h2,
  .dobra-3 h2,
  .dobra-4 h2 {
    font-size: var(--fs-h1-hero-tablet);
  }
}

@media (min-width: 1024px) {
  .hero h1 {
    /* Desktop — H1 estica até ~largura da sub-headline, reduz 1 linha vertical. */
    font-size: var(--fs-h1-hero-desktop);
    max-width: 100%;
  }

  /* Desktop — toda H2 da página espelha H1 Hero. */
  .dobra-2 h2,
  .dobra-3 h2,
  .dobra-4 h2 {
    font-size: var(--fs-h1-hero-desktop);
  }
}

/* -----------------------------------------------------------
   6. DOBRA 2 — O QUE É  (APROVADA · INTACTA)
   ----------------------------------------------------------- */
.dobra-2 {
  background: var(--branco-ceramico);
  color: var(--preto-carbono);
  padding: 80px 0;
  position: relative;
}

.dobra-2 .eyebrow {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--verde-profundo);
  margin-bottom: 20px;
  border-left: 2px solid var(--verde-profundo);
  padding-left: 12px;
}

.dobra-2 h2 {
  /* Espelha H1 Hero (escala canônica). */
  font-family: var(--fonte-display);
  font-size: var(--fs-h1-hero-mobile);
  line-height: 1.08;
  color: var(--verde-profundo);
  letter-spacing: -0.005em;
  margin-bottom: 32px;
  max-width: 100%;
}

.hero-title-gold {
  color: var(--ouro-hexa);
}

.dobra-2 h2 .ouro {
  color: var(--ouro-hexa);
}

.dobra-2 .lead {
  /* Espelha sub Hero. */
  font-family: var(--fonte-body);
  font-size: var(--fs-sub-hero);
  line-height: 1.55;
  color: var(--grafite);
  max-width: 65ch;
  margin-bottom: 56px;
}

/* Grid de cards do stack */
.stack-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 64px;
}

@media (min-width: 768px) {
  .stack-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

.stack-card {
  background: var(--branco-puro);
  border: 1px solid rgba(212,175,55,0.30);
  border-left: 4px solid var(--ouro-hexa);
  padding: 28px;
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stack-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,71,45,0.12);
}

.stack-card .eyebrow-card {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde-profundo);
  margin-bottom: 10px;
}

.stack-card h3 {
  font-family: var(--fonte-display);
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--navy-estadio);
  margin-bottom: 12px;
  line-height: 1.15;
}

.stack-card p {
  font-family: var(--fonte-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--preto-carbono);
  opacity: 0.88;
}

/* Lead de reforço abaixo dos cards (substitui ex-card de permanência) */
.dobra-2-reforco {
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--verde-profundo);
  border-left: 4px solid var(--ouro-hexa);
  border-radius: 4px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.dobra-2-reforco p {
  font-family: var(--fonte-body);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.65;
  color: var(--branco-ceramico);
}

.dobra-2-reforco p strong {
  color: var(--ouro-hexa);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
  font-size: 1.08em;
}

/* -----------------------------------------------------------
   7. CTA SECUNDÁRIA — bloco entre dobra 2 e 3
   ----------------------------------------------------------- */
.cta-block {
  background: var(--branco-ceramico);
  padding: 64px 0;
  text-align: center;
}

.cta-block .cta {
  margin: 0 auto;
}

.cta-block .cta-micro {
  font-family: var(--fonte-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--grafite);
  opacity: 0.78;
  margin-top: 18px;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------------------------------------
   9. DOBRA 3 — BIO DO MATHEUS (com foto à direita no desktop)
   ----------------------------------------------------------- */
.dobra-3 {
  background: var(--verde-profundo);
  color: var(--branco-ceramico);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.dobra-3::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(212,175,55,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0,156,59,0.08) 0%, transparent 50%);
  pointer-events: none;
}

.dobra-3 .container {
  position: relative;
  z-index: 2;
}

/* --- HEADER 2-COL: texto + foto --- */
.bio-header {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 56px;
}

.bio-text { order: 2; }
.bio-foto { order: 1; }

.bio-foto {
  margin: 0;
  display: flex;
  justify-content: center;
}

.bio-foto img {
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  border: 3px solid var(--ouro-hexa);
  box-shadow: var(--shadow-foto);
  display: block;
}

@media (min-width: 768px) {
  .bio-header {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }
  .bio-text { order: 1; flex: 1 1 62%; }
  .bio-foto { order: 2; flex: 1 1 38%; justify-content: flex-end; }
  .bio-foto img {
    max-width: 360px;
  }
}

.dobra-3 .eyebrow {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ouro-hexa);
  margin-bottom: 20px;
  border-left: 2px solid var(--ouro-hexa);
  padding-left: 12px;
}

.dobra-3 h2 {
  /* Espelha H1 Hero (escala canônica). */
  font-family: var(--fonte-display);
  font-size: var(--fs-h1-hero-mobile);
  line-height: 1.08;
  color: var(--branco-ceramico);
  letter-spacing: -0.005em;
  margin-bottom: 16px;
}

.dobra-3 h2 .nome {
  display: block;
  color: var(--ouro-hexa);
}

.dobra-3 h2 .legenda {
  /* Linha de bio sob o nome — espelha sub Hero. */
  display: block;
  font-family: var(--fonte-display-2);
  font-size: var(--fs-sub-hero);
  letter-spacing: 0.04em;
  color: var(--branco-ceramico);
  opacity: 0.82;
  margin-top: 14px;
  line-height: 1.4;
}

.dobra-3 .body {
  /* Espelha sub Hero. */
  font-family: var(--fonte-body);
  font-size: var(--fs-sub-hero);
  line-height: 1.55;
  color: var(--branco-ceramico);
  opacity: 0.92;
  max-width: 60ch;
  margin-top: 28px;
}

.dobra-3 .body p {
  margin-bottom: 16px;
}

/* Stats grid — 3 colunas em todos os breakpoints (compacto no mobile) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 40px;
  padding: 28px 0;
  border-top: 1px solid rgba(212,175,55,0.25);
  border-bottom: 1px solid rgba(212,175,55,0.25);
}

@media (min-width: 768px) {
  .stats-grid {
    gap: 24px;
    padding: 40px 0;
    margin-bottom: 56px;
  }
}

.stat-item {
  text-align: center;
}

.stat-num {
  font-family: var(--fonte-display);
  font-size: clamp(28px, 7vw, 88px);
  line-height: 1;
  color: var(--ouro-hexa);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

@media (min-width: 768px) {
  .stat-num { margin-bottom: 12px; }
}

.stat-label {
  font-family: var(--fonte-mono);
  font-size: clamp(8px, 2vw, 11px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--branco-ceramico);
  opacity: 0.85;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .stat-label {
    letter-spacing: 0.22em;
    line-height: 1.5;
  }
}

/* Ícone de futebol no topo de cada stack-card da Dobra 2 */
.stack-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 16px;
  color: var(--verde-profundo);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stack-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (min-width: 768px) {
  .stack-card-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
  }
}

/* Frase-síntese de fechamento */
.sintese {
  text-align: center;
  margin: 48px auto;
  max-width: 760px;
}

.sintese p {
  font-family: var(--fonte-display);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  color: var(--branco-ceramico);
  letter-spacing: -0.005em;
}

.sintese p .destaque {
  color: var(--ouro-hexa);
}

.sintese .micro {
  font-family: var(--fonte-body);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.6;
  color: var(--branco-ceramico);
  opacity: 0.82;
  margin-top: 28px;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-final-wrap {
  text-align: center;
  margin-top: 40px;
}

.cta-final-wrap .cta {
  margin: 0 auto;
}

.cta-final-wrap .micro {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ouro-claro);
  margin-top: 20px;
}

/* -----------------------------------------------------------
   9.5 DOBRA 4 — PROVA SOCIAL (masonry de prints aprovados)
   Fundo Branco Cerâmico (contraste com Dobra 3 Verde Profundo)
   Layout column-count (cross-browser sem JS)
   ----------------------------------------------------------- */
.dobra-4 {
  background: var(--branco-ceramico);
  color: var(--preto-carbono);
  padding: 80px 0;
  position: relative;
}

.dobra-4 .eyebrow {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--verde-profundo);
  margin-bottom: 20px;
  border-left: 2px solid var(--ouro-hexa);
  padding-left: 12px;
}

.dobra-4 h2 {
  /* Espelha H1 Hero (escala canônica).
     max-width 48ch garante que a frase "Veja alguns dos engenheiros…"
     quebra em 2-3 linhas, sem espaço vazio à direita. */
  font-family: var(--fonte-display);
  font-size: var(--fs-h1-hero-mobile);
  line-height: 1.08;
  color: var(--verde-profundo);
  letter-spacing: -0.005em;
  margin-bottom: 24px;
  max-width: 48ch;
}

.dobra-4 .lead {
  /* Espelha sub Hero. */
  font-family: var(--fonte-body);
  font-size: var(--fs-sub-hero);
  line-height: 1.55;
  color: var(--grafite);
  max-width: 60ch;
  margin-bottom: 48px;
}

/* Masonry com column-count — fallback universal sem JS.
   Mobile 1 col / Tablet 2 col / Desktop 3 col */
.masonry-grid {
  column-count: 1;
  column-gap: 16px;
  margin-bottom: 56px;
}

@media (min-width: 640px) {
  .masonry-grid {
    column-count: 2;
    column-gap: 20px;
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    column-count: 3;
    column-gap: 24px;
  }
}

.masonry-item {
  /* break-inside garante que o "card" nunca quebra entre colunas */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 16px 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--branco-puro, #fff);
  border: 1px solid rgba(0, 71, 45, 0.08);
  box-shadow: 0 4px 16px rgba(0, 71, 45, 0.08);
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.masonry-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 71, 45, 0.14);
}

@media (min-width: 640px) {
  .masonry-item {
    margin-bottom: 20px;
  }
}

@media (min-width: 1024px) {
  .masonry-item {
    margin-bottom: 24px;
  }
}

/* Imagens reais — proporção natural, Mansory column-count distribui em waterfall */
.masonry-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* -----------------------------------------------------------
   LIGHTBOX — overlay full-screen ao clicar em print do masonry
   ----------------------------------------------------------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
  padding: 24px;
  animation: lightbox-in 0.18s ease-out;
}

.lightbox-overlay img {
  max-width: 95%;
  max-height: 95vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  user-select: none;
}

@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-overlay { animation: none; }
  .masonry-item { transition: none; }
  .masonry-item:hover { transform: none; }
}

.dobra-4 .cta-final-wrap {
  margin-top: 32px;
}

.dobra-4 .cta-final-wrap .micro {
  color: var(--verde-profundo);
  opacity: 0.7;
}

/* -----------------------------------------------------------
   10. FOOTER
   ----------------------------------------------------------- */
footer {
  background: var(--branco-ceramico);
  color: var(--preto-carbono);
  padding: 56px 0 36px;
  border-top: 2px solid var(--ouro-hexa);
  text-align: center;
}

footer .footer-meta {
  font-family: var(--fonte-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--grafite);
  opacity: 0.88;
  margin-bottom: 20px;
}

footer .footer-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

footer .footer-links a {
  font-family: var(--fonte-body);
  font-size: 13px;
  color: var(--verde-profundo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer .footer-links a:hover {
  color: var(--ouro-hexa);
}

footer .footer-disclaimer {
  font-family: var(--fonte-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--grafite);
  opacity: 0.7;
  max-width: 64ch;
  margin: 0 auto 16px;
}

footer .footer-copy {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde-profundo);
  opacity: 0.7;
}

/* -----------------------------------------------------------
   11. STICKY CTA MOBILE
   ----------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--verde-profundo);
  border-top: 2px solid var(--ouro-hexa);
  padding: 12px 16px;
  z-index: 150;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
}

.sticky-cta.visible {
  transform: translateY(0);
}

.sticky-cta .cta {
  font-size: 15px;
  padding: 14px 24px;
  max-width: 100%;
}

@media (min-width: 768px) {
  .sticky-cta { display: none; }
}

@media (max-width: 767px) {
  body.has-sticky footer {
    padding-bottom: 100px;
  }
}

/* -----------------------------------------------------------
   12. LOADING STATE
   ----------------------------------------------------------- */
.cta.loading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

.cta.loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--navy-estadio);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------
   13. MODAL DE CAPTURA
   ----------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.modal-overlay.open {
  display: flex;
  opacity: 1;
}

.modal-card {
  background: var(--branco-ceramico);
  color: var(--preto-carbono);
  max-width: 480px;
  width: 100%;
  border-radius: 8px;
  padding: 40px 28px 28px;
  position: relative;
  border-top: 4px solid var(--ouro-hexa);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  max-height: 92vh;
  overflow-y: auto;
}

@media (min-width: 480px) {
  .modal-card { padding: 48px 40px 32px; }
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  color: var(--verde-profundo);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.18s ease;
}

.modal-close:hover,
.modal-close:focus-visible {
  background: rgba(0,71,45,0.08);
  outline: none;
}

.modal-eyebrow {
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--verde-profundo);
  margin-bottom: 12px;
}

.modal-card h2 {
  font-family: var(--fonte-display);
  font-size: 32px;
  line-height: 1;
  color: var(--verde-profundo);
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}

.modal-sub {
  font-family: var(--fonte-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--grafite);
  margin-bottom: 24px;
}

.modal-form .field {
  margin-bottom: 14px;
}

.modal-form label {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--verde-profundo);
  margin-bottom: 6px;
}

.modal-form input {
  width: 100%;
  background: var(--branco-puro);
  color: var(--preto-carbono);
  border: 2px solid rgba(0,71,45,0.18);
  border-radius: 4px;
  padding: 14px 16px;
  font-size: 16px;
  font-family: var(--fonte-body);
  transition: border-color 0.18s ease;
}

.modal-form input:focus {
  outline: none;
  border-color: var(--ouro-hexa);
}

.modal-form input.invalid {
  border-color: var(--vermelho-apito);
}

.modal-form .form-error {
  font-family: var(--fonte-body);
  font-size: 13px;
  color: var(--vermelho-apito);
  background: rgba(178,34,34,0.08);
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
  display: none;
}

.modal-form .form-error.show {
  display: block;
}

.cta-modal {
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
}

.modal-microcopy {
  font-family: var(--fonte-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--grafite);
  opacity: 0.7;
  margin-top: 16px;
  text-align: center;
}

/* Trava de scroll do body quando modal aberto */
body.modal-open {
  overflow: hidden;
}

/* -----------------------------------------------------------
   14. UTILS
   ----------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}