/* ==========================================================================
   ignite. — Landing page de captação
   Linguagem do template PayFlow (payflowio.framer.website) traduzida para a
   identidade navy + dourado: fundo claro quente, seções escuras em bento,
   pills, rótulos monoespaçados "● RÓTULO", tiles arredondados, marquee de
   depoimentos e marca-d'água gigante no rodapé.
   Depende de tokens.css: cores e espaços vêm das variáveis --ig-*.
   ========================================================================== */

@import url("tokens.css");

/* ------------------------------------------------------------------ Fontes */
@font-face{ font-family:'Poppins'; src:url('../fonts/poppins-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('../fonts/poppins-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('../fonts/poppins-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter';   src:url('../fonts/inter-300.woff2')   format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter';   src:url('../fonts/inter-400.woff2')   format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter';   src:url('../fonts/inter-500.woff2')   format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter';   src:url('../fonts/inter-600.woff2')   format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ------------------------------------------------------------- Ajuste fino */
:root{
  --pf-bg:        var(--ig-gold-50);     /* creme quente da página          */
  --pf-tile:      #F1EDE3;               /* tile neutro quente              */
  --pf-tile-line: var(--ig-gold-200);
  --pf-dark:      var(--ig-navy-950);
  --pf-card-dark: #0C2148;               /* cartão sobre o escuro           */
  /* Raios contidos (sóbrio/premium): base alinhada à escala --ig (10 = ig-lg).
     Reduzidos de 18/26px a pedido — cantos mais firmes em todo o site. */
  --pf-radius:    10px;
  --pf-radius-lg: 14px;

  --pf-h1:  clamp(2.4rem, 1.5rem + 4vw, 4.6rem);
  --pf-h2:  clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);

  --ig-section-y: clamp(4rem, 2.6rem + 4.5vw, 7.5rem);
}

body{ overflow-x:hidden; background:var(--pf-bg); }
img,svg{ max-width:100%; }

/* O topo é fixo: âncoras internas param abaixo dele. */
[id]{ scroll-margin-top:84px; }

.ig-skip{
  position:absolute; left:-9999px; top:0; background:var(--ig-gold-400);
  color:var(--ig-navy-900); padding:var(--ig-space-3) var(--ig-space-4); z-index:var(--ig-z-modal);
  font-weight:var(--ig-fw-semi);
}
.ig-skip:focus{ left:var(--ig-space-4); top:var(--ig-space-4); }

/* Revelação ao rolar — conteúdo visível por padrão; .reveal-prep arma. */
.reveal{ opacity:1; transform:none; }
.reveal-prep .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ig-ease-out), transform .6s var(--ig-ease-out);
}
.reveal-prep .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal-prep .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   COMPONENTES DA LINGUAGEM
   ========================================================================== */

/* Rótulo monoespaçado com ponto dourado: o único "eyebrow" da página. */
.tag{
  display:flex; align-items:center; justify-content:center; gap:var(--ig-space-2);
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ig-gold-800);
  margin:0 0 var(--ig-space-4);
}
.tag::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--ig-gold-400); }
.tag--left{ justify-content:flex-start; }

/* Cabeçalho de seção centrado, como no template. */
.sec-head{ text-align:center; max-width:720px; margin:0 auto clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.sec-head h2{
  font-size:var(--pf-h2); font-weight:var(--ig-fw-semi);
  line-height:1.12; letter-spacing:var(--ig-tracking-tight);
  margin:0 0 var(--ig-space-4);
}
.sec-head p{ font-size:var(--ig-text-lg); color:var(--ig-text-muted); margin:0 auto; max-width:56ch; }
.sec-head--left{ text-align:left; margin-inline:0; }
.sec-head--left .tag{ justify-content:flex-start; }
.sec-head--left p{ margin-inline:0; }

/* Símbolo da Meta (infinito) junto às menções de parceria. Herda a altura da
   linha do texto (1em) e usa o azul da marca Meta; contextos escuros podem
   sobrescrever a cor. */
.logo-meta{
  display:inline-block; height:.9em; width:auto; aspect-ratio:48 / 26;
  vertical-align:-.08em; color:#0866FF; flex:none;
}

/* Botões de canto firme (6px) — pareiam com os inputs (4px) no formulário;
   a pílula ficou só para chips/badges pequenos de metadado. */
.ig-btn{ border-radius:var(--ig-radius-md); }
/* Em telas estreitas o --lg mantém o rótulo em UMA linha (padding/fonte menores). */
@media (max-width:480px){
  .ig-btn--lg{ padding:.9rem 1.4rem; font-size:var(--ig-text-base); }
}
.ig-btn .seta{ font-family:var(--ig-font-text); }

/* ==========================================================================
   NAVEGAÇÃO — tira utilitária clara + navbar navy sólida, no vocabulário do
   template SwiftForm (faixa fina de anúncio sobre uma barra escura com CTA).
   ========================================================================== */

/* O header é um wrapper sem caixa própria: com display:contents o sticky da
   navbar passa a valer contra a PÁGINA. Antes, o sticky ficava preso ao header
   (altura = navtop+navbar), o alcance era 0px e, na fronteira, o engata/solta
   por subpixel fazia a linha da borda "piscar" — além da barra nunca fixar. */
.cabecalho{ display:contents; }

/* --- Navbar navy, fixa. --------------------------------------------------- */
.navbar{
  position:sticky; top:0; z-index:var(--ig-z-sticky);
  background:var(--ig-navy-900);
  color:var(--ig-text-on-dark);
  border-bottom:1px solid var(--ig-border-dark);
}
.navbar__in{
  width:100%; min-height:66px;
  display:flex; align-items:center; gap:var(--ig-space-5);
}
.navbar__logo{ color:#fff; height:34px; display:inline-flex; flex:none; }
@media (max-width:520px){ .navbar__logo{ height:28px; } }
.navbar__logo svg{ height:100%; width:auto; display:block; }

/* Painel: inline no desktop (display:contents), gaveta suspensa no mobile. */
.navbar__panel{ display:contents; }

.navbar__nav{
  display:flex; align-items:center; gap:var(--ig-space-1);
  margin-inline:auto;
}
.navbar__nav a{
  color:var(--ig-text-on-dark-muted); text-decoration:none;
  font-size:var(--ig-text-sm); font-weight:var(--ig-fw-medium);
  padding:var(--ig-space-2) var(--ig-space-3); border-radius:var(--ig-radius-md);
  transition:color var(--ig-dur-fast) var(--ig-ease), background var(--ig-dur-fast) var(--ig-ease);
}
.navbar__nav a:hover{ color:#fff; background:rgba(255,255,255,.07); }
.navbar__nav a.is-active{ color:#fff; background:rgba(204,178,123,.16); }

.navbar__tel{
  color:var(--ig-text-on-dark-muted); text-decoration:none;
  font-weight:var(--ig-fw-medium); font-size:var(--ig-text-sm); white-space:nowrap;
}
.navbar__tel:hover{ color:#fff; }
.navbar__cta{ font-size:var(--ig-text-sm); padding:var(--ig-space-3) var(--ig-space-5); }
.navbar__cta--mobile{ display:none; }   /* CTA de largura total, só dentro da gaveta */

/* Hambúrguer — só no mobile. */
.navbar__toggle{
  display:none; margin-left:auto; flex:none;
  width:44px; height:44px; padding:0; border:0; background:transparent;
  color:#fff; cursor:pointer; align-items:center; justify-content:center;
}
.navbar__toggle span{ position:relative; display:block; width:20px; height:2px; background:currentColor; border-radius:2px; transition:background var(--ig-dur-fast) var(--ig-ease); }
.navbar__toggle span::before,
.navbar__toggle span::after{ content:''; position:absolute; left:0; width:20px; height:2px; background:currentColor; border-radius:2px; transition:transform var(--ig-dur-base) var(--ig-ease); }
.navbar__toggle span::before{ top:-6px; }
.navbar__toggle span::after{ top:6px; }
.navbar.is-open .navbar__toggle span{ background:transparent; }
.navbar.is-open .navbar__toggle span::before{ transform:translateY(6px) rotate(45deg); }
.navbar.is-open .navbar__toggle span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:900px){
  .navbar__toggle{ display:inline-flex; }
  .navbar__cta{ display:none; }                    /* barra fica só logo + hambúrguer */
  .navbar__panel{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:var(--ig-navy-900); border-bottom:1px solid var(--ig-border-dark);
    box-shadow:var(--ig-shadow-lg);
    padding:var(--ig-space-4) var(--ig-space-5) var(--ig-space-6);
    visibility:hidden; opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity var(--ig-dur-base) var(--ig-ease),
               transform var(--ig-dur-base) var(--ig-ease),
               visibility var(--ig-dur-base) var(--ig-ease);
  }
  .navbar.is-open .navbar__panel{ visibility:visible; opacity:1; transform:none; pointer-events:auto; }
  .navbar__nav{ flex-direction:column; align-items:stretch; gap:2px; margin:0 0 var(--ig-space-3); }
  .navbar__nav a{ padding:var(--ig-space-3); font-size:var(--ig-text-base); }
  .navbar__tel{
    display:block; text-align:center; padding:var(--ig-space-3);
    border-top:1px solid var(--ig-border-dark);
  }
  .navbar__cta--mobile{
    display:inline-flex; width:100%; justify-content:center;
    margin-top:var(--ig-space-4); font-size:var(--ig-text-base);
  }
}

/* ==========================================================================
   HERO — alinhado à esquerda (como o main-hero-head do template): pílula de
   avaliação, headline, sub, CTA duplo e colagem.
   ========================================================================== */
.hero{ padding-block:clamp(2.5rem, 1.8rem + 3vw, 4.5rem) 0; text-align:left; }

/* --- Hero com fundo em gradiente (navy+dourado, estilo aurora) ---------- */
.hero--gradient{
  position:relative; overflow:hidden;
  background:var(--ig-navy-950); color:var(--ig-text-on-dark);
  padding-bottom:clamp(3rem, 2rem + 3vw, 5rem);
}
.hero--gradient .hero__bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
/* Overlay leve: reforça o escuro atrás do texto (esquerda) e fecha em navy
   embaixo, pra transição limpa com a seção clara seguinte. */
.hero--gradient .hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,23,49,0) 40%, rgba(8,23,49,.45) 72%, var(--ig-navy-950) 100%),
    linear-gradient(90deg, rgba(8,23,49,.55) 0%, rgba(8,23,49,.12) 45%, rgba(8,23,49,0) 70%);
}
.hero--gradient > .ig-container{ position:relative; z-index:1; }

/* Texto e componentes na versão clara (sobre o escuro). */
.hero--gradient h1{ color:#fff; }
.hero--gradient h1 em{ color:var(--ig-gold-400); }
.hero--gradient .hero__lead{ color:var(--ig-text-on-dark-muted); }

.hero--gradient .hero__badge{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero--gradient .ig-btn--outline{ color:#fff; border-color:rgba(255,255,255,.32); }
.hero--gradient .ig-btn--outline:hover{ background:rgba(255,255,255,.08); border-color:var(--ig-gold-400); }

.hero--gradient .faixa{ border-color:rgba(255,255,255,.14); }
.hero--gradient .faixa__rotulo{ color:var(--ig-text-on-dark-muted); }
.hero--gradient .faixa__lista{ color:rgba(255,255,255,.78); }

/* ==========================================================================
   HERO "DESIGN CANVAS" — fundo escuro + grade, headline fina gigante com
   moldura de seleção e alças, botões pílula e números com contagem.
   Animado por GSAP (assets/js/hero.js); sem JS, mostra o estado final.
   ========================================================================== */
/* Altura contida (74vh máx.): a dobra mostra o começo da próxima seção como
   convite de scroll; espaços internos comprimidos na mesma proporção. */
.herofv{
  position:relative; overflow:hidden;
  background:var(--ig-navy-950); color:var(--ig-text-on-dark);
  min-height:clamp(520px, 74vh, 720px);
  display:flex; align-items:stretch;
  padding-block:clamp(4.5rem, 3.5rem + 3vw, 5.5rem) clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
}
.herofv__bg{
  /* Sangria de 28px: o parallax do mouse (hero.js) desloca este fundo em até
     ±24px; sem a folga, a borda do lado do cursor descobria uma fresta. */
  position:absolute; inset:-28px; z-index:0;
  background-size:cover; background-position:center;
  opacity:.9;
}
/* Vídeo de fundo dentro do bg: o scrim ::after pinta por cima (gerado depois
   dos filhos), então a legibilidade do texto não muda. A imagem inline fica
   como fallback enquanto carrega e para movimento reduzido. */
.herofv__video{
  /* Sangra 2px além do container: em DPR fracionário (Windows 125%) a camada
     do vídeo arredonda 1px a menos e deixava a imagem de fallback (mais clara)
     aparecer como uma linha fina na base do hero. */
  position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px);
  object-fit:cover;
}
@media (prefers-reduced-motion: reduce){
  .herofv__video{ display:none; }
}
.herofv__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,12,28,.62) 0%, rgba(5,12,28,.45) 45%, rgba(5,12,28,.82) 100%),
    linear-gradient(90deg, rgba(5,12,28,.72) 0%, rgba(5,12,28,.28) 55%, rgba(5,12,28,.12) 100%);
}
/* Grade fina do "canvas", esmaecendo nas bordas. */
.herofv__grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:clamp(120px,15vw,240px) clamp(120px,15vw,240px);
  background-position:center;
  -webkit-mask-image:radial-gradient(120% 115% at 50% 42%, #000 52%, transparent 100%);
          mask-image:radial-gradient(120% 115% at 50% 42%, #000 52%, transparent 100%);
}
.herofv__in{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:column; justify-content:space-between; gap:clamp(2rem, 1.4rem + 2vw, 3rem);
}
.herofv__top{ max-width:min(100%, 1040px); }

.herofv__kicker{
  font-family:var(--ig-font-mono); font-size:var(--ig-text-sm);
  letter-spacing:.06em; color:var(--ig-text-on-dark-muted);
  margin:0 0 var(--ig-space-4);
}

/* Headline no mesmo peso do título da intro (Poppins SemiBold, tracking
   apertado) — teto recalibrado p/ a 1ª linha caber inteira no desktop. */
.herofv__title{
  font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi);
  font-size:clamp(2.3rem, .9rem + 4.9vw, 4.6rem);
  line-height:1.08; letter-spacing:var(--ig-tracking-tight); color:#fff;
  margin:0; text-wrap:balance;
}
.herofv__line{ display:block; }
.herofv__line--key{ display:block; }   /* pode quebrar por palavra no mobile */
.herofv__title em{ font-style:normal; color:var(--ig-gold-400); }
/* split da animação: palavra não quebra no meio; caractere anima. */
.herofv .wd{ display:inline-block; white-space:nowrap; }
.herofv .ch{ display:inline-block; will-change:transform; }

/* Moldura de seleção + alças (o efeito "objeto selecionado" do template). */
.herofv__frame{ position:relative; display:inline-block; padding:.06em .16em .02em; }
.herofv__box{
  position:absolute; inset:0; pointer-events:none;
  border:1px solid rgba(204,178,123,.55);
}
.hd{
  position:absolute; width:10px; height:10px; margin:-5px;
  background:var(--ig-navy-950); border:1.5px solid var(--ig-gold-400);
  box-shadow:0 0 0 1px rgba(5,12,28,.6);
}
.hd--tl{ top:0; left:0 }   .hd--tc{ top:0; left:50% }   .hd--tr{ top:0; left:100% }
.hd--ml{ top:50%; left:0 } .hd--mr{ top:50%; left:100% }
.hd--bl{ top:100%; left:0 }.hd--bc{ top:100%; left:50% }.hd--br{ top:100%; left:100% }

.herofv__lead{
  font-size:var(--ig-text-lg); line-height:var(--ig-lh-relaxed);
  color:var(--ig-text-on-dark-muted); max-width:52ch;
  margin:clamp(1.1rem, .8rem + 1vw, 1.6rem) 0 0;
}
.herofv__cta{ display:flex; flex-wrap:wrap; gap:var(--ig-space-4); margin-top:var(--ig-space-6); }

/* Faixa de números com contagem (parte de baixo do canvas), com separadores. */
.herofv__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  padding-top:clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem);
  border-top:1px solid var(--ig-border-dark);
}
.herofv__stat{
  display:flex; flex-direction:column; gap:8px;
  padding-left:clamp(1.25rem,0.6rem + 2vw,2.75rem);
  border-left:1px solid rgba(255,255,255,.14);
}
.herofv__stat:first-child{ padding-left:0; border-left:0; }
.herofv__num{
  font-family:var(--ig-font-text); font-weight:300;
  font-size:clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem); line-height:1; color:#fff;
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
}
.herofv__stat span{ font-size:var(--ig-text-sm); color:var(--ig-text-on-dark-muted); max-width:22ch; }

@media (max-width:720px){
  .herofv__stats{ grid-template-columns:1fr 1fr; row-gap:clamp(1.75rem,1.2rem + 2vw,2.5rem); }
  .herofv__stat:nth-child(odd){ padding-left:0; border-left:0; }        /* coluna 1 sem divisória */
  .herofv__stat:nth-child(even){ padding-left:clamp(1.25rem,4vw,2rem); }
}
@media (max-width:340px){
  .herofv__stats{ grid-template-columns:1fr; }
  .herofv__stat{ padding-left:0; border-left:0; }
  .herofv__stat + .herofv__stat{ padding-top:var(--ig-space-4); border-top:1px solid rgba(255,255,255,.12); }
  .herofv__cta .ig-btn{ width:100%; justify-content:center; }
}

/* Botões: claro (branco) e vidro — como no template. */
.ig-btn--light{ background:#fff; color:var(--ig-navy-900); }
.ig-btn--light:hover{ background:var(--ig-gold-100); color:var(--ig-navy-900); }
.ig-btn--light:active{ background:var(--ig-gold-200); }
.ig-btn--glass{
  background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.ig-btn--glass:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.42); color:#fff; }

/* ==========================================================================
   PAGEHERO — cabeçalho das páginas internas (navy + brilho dourado sutil)
   ========================================================================== */
.pagehero{
  position:relative; overflow:hidden;
  background:var(--ig-navy-950); color:var(--ig-text-on-dark);
  padding-block:clamp(2.75rem, 2rem + 3.5vw, 5rem);
  border-bottom:1px solid var(--ig-border-dark);
}
/* Vídeo de fundo (mesmo do hero da home), sangrado 2px (anti-fresta de DPR). */
.pagehero__video{
  position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px);
  object-fit:cover; z-index:0;
}
@media (prefers-reduced-motion: reduce){ .pagehero__video{ display:none; } }
.pagehero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(rgba(5,12,28,.55), rgba(5,12,28,.78)),
    radial-gradient(46% 72% at 84% 16%, rgba(204,178,123,.20) 0%, rgba(204,178,123,0) 62%),
    radial-gradient(62% 90% at 8% 96%, rgba(36,58,99,.55) 0%, rgba(8,23,49,0) 60%);
}
.pagehero > .ig-container{ position:relative; z-index:2; }
.pagehero__crumbs{
  font-size:var(--ig-text-sm); color:var(--ig-text-on-dark-muted);
  margin:0 0 var(--ig-space-4);
}
.pagehero__crumbs a{ color:var(--ig-text-on-dark-muted); text-decoration:none; }
.pagehero__crumbs a:hover{ color:#fff; }
.pagehero__crumbs .sep{ margin:0 .5em; opacity:.5; }
.pagehero__crumbs [aria-current]{ color:var(--ig-gold-400); }
.pagehero .tag{ justify-content:flex-start; color:var(--ig-gold-400); }
.pagehero h1{
  font-size:var(--pf-h2); font-weight:var(--ig-fw-bold);
  line-height:1.05; letter-spacing:-0.02em; color:#fff;
  max-width:22ch; margin:0 0 var(--ig-space-4);
}
.pagehero h1 em{ font-style:normal; color:var(--ig-gold-400); }
.pagehero__lead{
  font-size:var(--ig-text-lg); color:var(--ig-text-on-dark-muted);
  max-width:62ch; margin:0;
}
.pagehero__acoes{ display:flex; flex-wrap:wrap; gap:var(--ig-space-4); margin-top:var(--ig-space-6); }
.pagehero .ig-btn--outline{ color:#fff; border-color:rgba(255,255,255,.32); }
.pagehero .ig-btn--outline:hover{ background:rgba(255,255,255,.08); border-color:var(--ig-gold-400); }
.pagehero--post h1{ font-size:clamp(1.8rem, 1.3rem + 2vw, 2.8rem); max-width:26ch; }
.pagehero__meta{
  margin:var(--ig-space-3) 0 0;
  font-family:var(--ig-font-mono); font-size:var(--ig-text-sm);
  letter-spacing:.03em; color:var(--ig-text-on-dark-muted);
}
.pagehero__meta .sep{ margin:0 .4em; opacity:.5; }

/* --- Blog: grade simples e uniforme + prosa do artigo -------------------- */
.blogcards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--ig-space-5); }
@media (max-width:900px){ .blogcards{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .blogcards{ grid-template-columns:1fr; } }

.blogcard__meta{ display:flex; align-items:center; gap:var(--ig-space-3); flex-wrap:wrap; }
.blogcard__tema{
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--ig-radius-sm);
  background:var(--ig-gold-100); color:var(--ig-gold-800);
}
.blogcard{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--ig-white); border:1px solid var(--ig-navy-100);
  border-radius:var(--pf-radius); overflow:hidden;
  transition:box-shadow var(--ig-dur-base) var(--ig-ease), transform var(--ig-dur-base) var(--ig-ease);
}
.blogcard:hover{ box-shadow:var(--ig-shadow-md); transform:translateY(-3px); }
.blogcard__media{ display:block; aspect-ratio:16 / 9; overflow:hidden; background:var(--ig-navy-100); }
.blogcard__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 600ms var(--ig-ease-out); }
.blogcard:hover .blogcard__media img{ transform:scale(1.04); }
.blogcard__body{ display:flex; flex-direction:column; gap:var(--ig-space-2); padding:var(--ig-space-5); flex:1; }
.blogcard__data{ font-family:var(--ig-font-mono); font-size:var(--ig-text-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--ig-text-muted); }
.blogcard__titulo{ font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi); font-size:1.15rem; line-height:1.3; color:var(--ig-text); text-wrap:balance; }
.blogcard__resumo{
  font-size:var(--ig-text-sm); line-height:1.55; color:var(--ig-text-muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blogcard__ler{
  margin-top:auto; padding-top:var(--ig-space-3);
  display:inline-flex; align-items:center; gap:var(--ig-space-2);
  font-weight:var(--ig-fw-semi); font-size:var(--ig-text-sm); color:var(--ig-gold-800);
}
.blogcard__ler .seta{ transition:transform var(--ig-dur-base) var(--ig-ease); }
.blogcard:hover .blogcard__ler .seta{ transform:translateX(4px); }

.prosa__capa{ margin:0 auto var(--ig-space-6); max-width:52rem; border-radius:var(--pf-radius); overflow:hidden; }
.prosa__capa img{ width:100%; display:block; aspect-ratio:21 / 9; object-fit:cover; }
.prosa{ max-width:44rem; margin-inline:auto; font-size:var(--ig-text-lg); line-height:1.7; color:var(--ig-navy-800); }
.prosa h2{
  margin:clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem) 0 var(--ig-space-3);
  font-size:1.45rem; font-weight:var(--ig-fw-semi); color:var(--ig-text); text-wrap:balance;
}
.prosa p{ margin:0 0 var(--ig-space-4); text-wrap:pretty; }
.prosa > p:first-child{ font-size:1.2em; line-height:1.6; color:var(--ig-navy-900); }
.prosa ul{ margin:0 0 var(--ig-space-4); padding-left:1.2em; }
.prosa li{ margin-bottom:var(--ig-space-2); text-wrap:pretty; }
.prosa li::marker{ color:var(--ig-gold-500); }
.prosa strong{ color:var(--ig-navy-900); }
.prosa a{ color:var(--ig-gold-800); text-underline-offset:3px; text-decoration-color:var(--ig-gold-400); }
.prosa a:hover{ color:var(--ig-navy-900); }
.prosa mark{ background:var(--ig-gold-100); color:var(--ig-gold-800); padding:0 .15em; }
.prosa blockquote{
  margin:var(--ig-space-5) 0; padding:var(--ig-space-4) var(--ig-space-5);
  background:var(--pf-tile); border-radius:var(--ig-radius-md);
  font-style:italic; color:var(--ig-navy-800);
}
.prosa blockquote p:last-child{ margin-bottom:0; }

/* Linha de players na bio do fundador. */
.fundador__players{
  font-family:var(--ig-font-mono); font-size:var(--ig-text-sm);
  letter-spacing:.04em; color:var(--ig-text-muted);
}
.fundador__players b, .fundador__players strong{ color:var(--ig-navy-800); font-weight:var(--ig-fw-semi); }

/* Pílula navy com estrelas douradas — a "5 Star - Rated" do template. */
.hero__badge{
  display:inline-flex; align-items:center; gap:var(--ig-space-3);
  background:var(--ig-navy-900); border:1px solid var(--ig-navy-700);
  border-radius:var(--ig-radius-full);
  padding:6px 6px 6px var(--ig-space-4);
  font-size:var(--ig-text-sm); font-weight:var(--ig-fw-medium);
  color:var(--ig-text-on-dark-muted);
  margin:0 0 var(--ig-space-5);
  box-shadow:var(--ig-shadow-sm);
}
.hero__stars{ display:inline-flex; gap:2px; color:var(--ig-gold-400); }
.hero__stars svg{ width:15px; height:15px; }
.hero__badge b{ color:#fff; font-weight:var(--ig-fw-semi); }
.hero__badge-tag{
  background:var(--ig-gold-400); color:var(--ig-navy-900);
  font-size:var(--ig-text-xs); font-weight:var(--ig-fw-semi);
  padding:3px 10px; border-radius:var(--ig-radius-full); white-space:nowrap;
}

.hero h1{
  font-size:var(--pf-h1); font-weight:var(--ig-fw-semi);
  line-height:1.06; letter-spacing:var(--ig-tracking-tight);
  max-width:18ch; margin:0 0 var(--ig-space-5);
}
.hero h1 em{ font-style:normal; color:var(--ig-gold-700); }
.hero__lead{
  font-size:var(--ig-text-lg); color:var(--ig-text-muted);
  max-width:52ch; margin:0 0 var(--ig-space-6);
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:var(--ig-space-4); justify-content:flex-start;
  margin-bottom:clamp(2.5rem, 1.6rem + 3vw, 4rem);
}

/* --- Botão com troca de rótulo animada (assinatura do SwiftForm). -------- */
.ig-btn__label{ position:relative; display:inline-grid; overflow:hidden; }
.ig-btn__label .ig-btn__txt{
  grid-area:1/1; display:block;
  transition:transform .38s var(--ig-ease-out);
}
.ig-btn__label .ig-btn__txt:nth-child(2){ transform:translateY(115%); }
.ig-btn--anim:hover .ig-btn__label .ig-btn__txt:nth-child(1){ transform:translateY(-115%); }
.ig-btn--anim:hover .ig-btn__label .ig-btn__txt:nth-child(2){ transform:translateY(0); }
.ig-btn .seta{ display:inline-block; transition:transform .3s var(--ig-ease-out); }
.ig-btn--anim:hover .seta{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .ig-btn__label .ig-btn__txt{ transition:none; }
  .ig-btn__label .ig-btn__txt:nth-child(2){ display:none; }
  .ig-btn .seta{ transition:none; }
}

/* Colagem: conversa de WhatsApp + leitura de funil, ambos construídos em CSS.
   Reenquadrada como a "galeria" flutuante do template — cartões com mais lift,
   borda neutra e uma etiqueta dourada solta sobre a conversa. */
.colagem{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:var(--ig-space-4); align-items:stretch;
  max-width:1080px; margin-inline:auto;
  text-align:left;
}
@media (max-width:860px){ .colagem{ grid-template-columns:1fr; } }

.mock{
  position:relative;
  background:#fff; border:1px solid var(--ig-navy-100);
  border-radius:var(--pf-radius);
  box-shadow:0 1px 2px rgba(8,23,49,.04), 0 18px 40px -12px rgba(8,23,49,.20);
  overflow:hidden;
}

/* Etiqueta dourada flutuante — eco do ícone solto no hero do SwiftForm. */
.mock__float{
  position:absolute; top:-14px; right:-10px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ig-gold-400); color:var(--ig-navy-900);
  border-radius:var(--ig-radius-full);
  padding:6px 12px; font-size:var(--ig-text-xs); font-weight:var(--ig-fw-semi);
  box-shadow:var(--ig-shadow-md);
}
.mock__float svg{ width:14px; height:14px; }
@media (max-width:860px){ .mock__float{ right:var(--ig-space-4); } }

/* --- conversa ---------------------------------------------------------- */
.chat{ display:flex; flex-direction:column; }
.chat__head{
  display:flex; align-items:center; gap:var(--ig-space-3);
  padding:var(--ig-space-4); border-bottom:1px solid var(--ig-gold-100);
  font-size:var(--ig-text-sm);
}
.chat__avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--ig-navy-900); color:var(--ig-gold-400);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ig-font-display); font-weight:var(--ig-fw-bold); font-size:.8rem;
}
.chat__head strong{ display:block; color:var(--ig-navy-900); }
.chat__head span{ color:var(--ig-text-muted); font-size:var(--ig-text-xs); }
.chat__corpo{ padding:var(--ig-space-4); display:flex; flex-direction:column; gap:var(--ig-space-3); flex:1; }
.chat__msg{
  background:var(--ig-navy-50); border-radius:14px 14px 14px 4px;
  padding:var(--ig-space-3) var(--ig-space-4);
  font-size:var(--ig-text-sm); color:var(--ig-navy-800); max-width:32ch;
}
.chat__msg mark{ background:none; color:var(--ig-gold-800); font-weight:var(--ig-fw-semi); }
.chat__hora{ font-size:var(--ig-text-xs); color:var(--ig-navy-300); align-self:flex-start; }
.chat__valida{
  margin:var(--ig-space-2) var(--ig-space-4) var(--ig-space-4);
  background:#fff; border:1px solid var(--ig-gold-200); border-radius:var(--pf-radius);
  box-shadow:var(--ig-shadow-sm);
  padding:var(--ig-space-3) var(--ig-space-4);
  font-size:var(--ig-text-xs); color:var(--ig-text-muted);
}
.chat__valida strong{ display:block; color:var(--ig-navy-900); font-size:var(--ig-text-sm); }
.chat__valida em{ font-style:normal; color:var(--ig-success); font-weight:var(--ig-fw-semi); }

/* --- leitura de funil --------------------------------------------------- */
.painel__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--ig-space-4);
  padding:var(--ig-space-4) var(--ig-space-5); border-bottom:1px solid var(--ig-gold-100);
}
.painel__head strong{ font-family:var(--ig-font-display); color:var(--ig-navy-900); }
.painel__head span{ font-size:var(--ig-text-xs); color:var(--ig-text-muted); font-family:var(--ig-font-mono); text-transform:uppercase; letter-spacing:.08em; }
.painel__tiles{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ig-space-2);
  padding:var(--ig-space-4) var(--ig-space-5);
}
@media (max-width:520px){ .painel__tiles{ grid-template-columns:repeat(2,1fr); } }
.painel__tile{
  background:var(--pf-bg); border:1px solid var(--ig-gold-200); border-radius:var(--pf-radius);
  padding:var(--ig-space-3) var(--ig-space-4);
}
.painel__tile strong{
  display:block; font-family:var(--ig-font-display); font-weight:var(--ig-fw-bold);
  font-size:1.35rem; color:var(--ig-navy-900); line-height:1.2;
}
.painel__tile span{ font-size:var(--ig-text-xs); color:var(--ig-text-muted); }
.painel__tile--ouro strong{ color:var(--ig-gold-700); }
.painel__linhas{ padding:0 var(--ig-space-5) var(--ig-space-5); }
.painel__linha{
  display:flex; align-items:center; gap:var(--ig-space-3);
  padding-block:var(--ig-space-3); border-top:1px solid var(--ig-gold-100);
  font-size:var(--ig-text-sm); color:var(--ig-navy-800);
}
.painel__linha:first-child{ border-top:0; }
.painel__linha strong{ font-weight:var(--ig-fw-medium); color:var(--ig-navy-900); }
.painel__linha span{ margin-left:auto; }
.chip{
  font-size:var(--ig-text-xs); font-weight:var(--ig-fw-semi);
  border-radius:var(--ig-radius-full); padding:2px 10px;
}
.chip--ok{ background:var(--ig-success-bg); color:var(--ig-success); }
.chip--info{ background:var(--ig-info-bg); color:var(--ig-info); }
.chip--warn{ background:var(--ig-warning-bg); color:var(--ig-warning); }

/* ==========================================================================
   FAIXA DE PÚBLICO — linhas tracejadas + nomes, como a faixa de logos.
   ========================================================================== */
.faixa{
  margin-top:clamp(3rem, 2rem + 3vw, 5rem);
  padding-block:var(--ig-space-5);
  border-block:1px dashed var(--ig-gold-300);
}
.faixa__rotulo{
  text-align:center; font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ig-text-muted);
  margin:0 0 var(--ig-space-4);
}
.faixa__lista{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--ig-space-3) clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi);
  font-size:clamp(1rem, .9rem + .5vw, 1.2rem); color:var(--ig-navy-400);
}

/* ==========================================================================
   BANDA DE STATS — tiles com número grande e rótulo mono.
   ========================================================================== */
.stats{ padding-block:clamp(2.5rem, 1.8rem + 2.5vw, 4rem) var(--ig-section-y); }
.stats__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:var(--ig-space-3);
}
.stat{
  background:var(--pf-tile); border-radius:var(--pf-radius);
  padding:var(--ig-space-6) var(--ig-space-5);
  text-align:center;
}
.stat strong{
  display:block; font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi);
  font-size:clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); line-height:1.1;
  color:var(--ig-navy-900); letter-spacing:var(--ig-tracking-tight);
}
.stat span{
  display:block; margin-top:var(--ig-space-2);
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ig-text-muted);
}

/* ==========================================================================
   DORES — tiles numerados na mesma família dos stats.
   ========================================================================== */
.dores{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--ig-space-3);
}
.dor{
  background:var(--pf-tile); border-radius:var(--pf-radius);
  padding:var(--ig-space-5);
  display:flex; flex-direction:column; gap:var(--ig-space-3);
}
.dor__n{
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.1em; color:var(--ig-gold-800);
}
.dor p{ margin:0; font-size:.97rem; color:var(--ig-navy-800); }

/* ==========================================================================
   SEÇÃO ESCURA — a virada + bento de entregáveis.
   ========================================================================== */
.escuro{
  background:var(--pf-dark); color:#fff;
  border-radius:var(--pf-radius-lg);
  margin-inline:clamp(.5rem, 1.5vw, 1.5rem);
  padding-block:var(--ig-section-y);
  position:relative; overflow:hidden;
}
/* Grade de pontos sutil, como no template. */
.escuro::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;
}
.escuro > .ig-container{ position:relative; }
.escuro .sec-head h2{ color:#fff; }
.escuro .sec-head p{ color:var(--ig-text-on-dark-muted); }
.escuro .tag{ color:var(--ig-gold-400); }

.bento{
  display:grid; gap:var(--ig-space-3);
  grid-template-columns:repeat(6,1fr);
}
.bento__card{
  background:var(--pf-card-dark); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--pf-radius);
  padding:var(--ig-space-6);
  grid-column:span 2;
  display:flex; flex-direction:column; gap:var(--ig-space-3);
}
.bento__card--l{ grid-column:span 3; }
.bento__card--xl{ grid-column:span 6; }
@media (max-width:900px){
  .bento{ grid-template-columns:1fr 1fr; }
  .bento__card, .bento__card--l{ grid-column:span 1; }
  .bento__card--xl{ grid-column:span 2; }
}
@media (max-width:560px){
  .bento{ grid-template-columns:1fr; }
  .bento__card, .bento__card--l, .bento__card--xl{ grid-column:span 1; }
}
.bento__card h3{
  color:#fff; font-size:1.15rem; font-weight:var(--ig-fw-semi);
  margin:0;
}
.bento__card p{ margin:0; font-size:var(--ig-text-sm); color:var(--ig-text-on-dark-muted); max-width:46ch; }

/* mini-mockups dentro do bento */
.bento__canais{ display:flex; gap:var(--ig-space-2); flex-wrap:wrap; margin-top:auto; padding-top:var(--ig-space-4); }
.bento__canais span{
  border:1px solid rgba(255,255,255,.14); border-radius:var(--ig-radius-full);
  padding:var(--ig-space-2) var(--ig-space-4);
  font-size:var(--ig-text-xs); font-weight:var(--ig-fw-semi); color:#fff;
}
.bento__frames{ display:flex; gap:var(--ig-space-2); margin-top:auto; padding-top:var(--ig-space-4); }
.bento__frame{
  flex:1; aspect-ratio:4/5; border-radius:10px;
  background:linear-gradient(160deg, rgba(204,178,123,.22), rgba(204,178,123,.05));
  border:1px solid rgba(204,178,123,.25);
  display:flex; align-items:center; justify-content:center;
}
.bento__frame--video::after{
  content:''; width:0; height:0;
  border-left:12px solid var(--ig-gold-400);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  margin-left:3px;
}
.bento__frame span{
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  color:var(--ig-gold-400); letter-spacing:.08em;
}

/* funil dentro do cartão largo */
.funilzinho{ display:flex; flex-direction:column; gap:var(--ig-space-2); margin-top:var(--ig-space-4); max-width:560px; }
.funilzinho__linha{ display:flex; align-items:center; gap:var(--ig-space-3); font-size:var(--ig-text-xs); }
.funilzinho__rotulo{ flex:none; width:9ch; color:var(--ig-text-on-dark-muted); font-family:var(--ig-font-mono); text-transform:uppercase; letter-spacing:.06em; }
.funilzinho__barra{ height:22px; border-radius:6px; background:linear-gradient(90deg, var(--ig-gold-600), var(--ig-gold-400)); }
.funilzinho__valor{ color:#fff; font-weight:var(--ig-fw-semi); }

/* ==========================================================================
   COMO FUNCIONA — painéis numerados dentro da mesma seção escura.
   ========================================================================== */
.passosec{ margin-top:var(--ig-section-y); }
.passosec .sec-head{ text-align:left; margin-inline:0; max-width:640px; }
.passosec .tag{ justify-content:flex-start; }

.etapas{ display:grid; gap:var(--ig-space-3); }
.etapa-card{
  background:var(--pf-card-dark); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--pf-radius);
  padding:var(--ig-space-6);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--ig-space-5); align-items:center;
}
@media (max-width:760px){ .etapa-card{ grid-template-columns:1fr; } }
.etapa-card__n{
  font-family:var(--ig-font-mono); font-size:var(--ig-text-sm);
  color:var(--ig-gold-400); letter-spacing:.1em; margin-bottom:var(--ig-space-2); display:block;
}
.etapa-card h3{ color:#fff; font-size:var(--ig-text-h3); margin:0 0 var(--ig-space-3); }
.etapa-card p{ margin:0; color:var(--ig-text-on-dark-muted); font-size:var(--ig-text-base); max-width:48ch; }
.etapa-card__nota{
  background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.16);
  border-radius:var(--pf-radius); padding:var(--ig-space-4) var(--ig-space-5);
  font-size:var(--ig-text-sm); color:var(--ig-text-on-dark-muted);
}
.etapa-card__nota strong{ color:var(--ig-gold-400); display:block; margin-bottom:var(--ig-space-1); font-family:var(--ig-font-mono); font-size:var(--ig-text-xs); letter-spacing:.1em; text-transform:uppercase; }

/* ==========================================================================
   FUNDADOR — split card no vocabulário do template.
   ========================================================================== */
.fundador{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:0; overflow:hidden;
  background:#fff; border:1px solid var(--ig-gold-200);
  border-radius:var(--pf-radius-lg); box-shadow:var(--ig-shadow-sm);
}
@media (max-width:820px){ .fundador{ grid-template-columns:1fr; } }
.fundador__foto{
  background:var(--ig-navy-950); position:relative; min-height:380px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:var(--ig-space-5);
}
.fundador__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.fundador__vazio{ color:var(--ig-text-on-dark-muted); font-size:var(--ig-text-sm); max-width:24ch; }
.fundador__vazio strong{ display:block; color:var(--ig-gold-400); font-family:var(--ig-font-display); font-size:1.05rem; margin-bottom:var(--ig-space-2); }
.fundador__texto{ padding:clamp(1.75rem, 1.2rem + 2vw, 3.25rem); }
.fundador blockquote{
  margin:0 0 var(--ig-space-5); padding:0;
  font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi);
  font-size:clamp(1.25rem, 1.05rem + 1vw, 1.7rem);
  line-height:1.35; color:var(--ig-navy-900); max-width:28ch;
}
.fundador__texto > p{ font-size:var(--ig-text-base); color:var(--ig-navy-700); }
.fundador__assina{
  margin-top:var(--ig-space-5); padding-top:var(--ig-space-4);
  border-top:1px dashed var(--ig-gold-300);
  font-size:var(--ig-text-sm); color:var(--ig-text-muted);
}
.fundador__assina strong{ display:block; font-family:var(--ig-font-display); color:var(--ig-navy-900); }

/* ==========================================================================
   ESPECIALIDADE — dois split cards (claro + painel escuro).
   ========================================================================== */
.produtos{ display:grid; gap:var(--ig-space-4); }
.produto{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  overflow:hidden;
  background:var(--pf-tile); border-radius:var(--pf-radius-lg);
}
@media (max-width:820px){ .produto{ grid-template-columns:1fr; } }
.produto__claro{ padding:clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem); }
.produto__claro h3{
  font-size:var(--ig-text-h3); font-weight:var(--ig-fw-semi);
  margin:0 0 var(--ig-space-4);
}
.produto__claro dt{
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ig-gold-800);
  margin-top:var(--ig-space-4);
}
.produto__claro dt:first-child{ margin-top:0; }
.produto__claro dd{ margin:var(--ig-space-1) 0 0; font-size:.95rem; color:var(--ig-navy-800); }
.produto__escuro{
  background:var(--pf-card-dark); color:#fff;
  padding:clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
  display:flex; flex-direction:column; justify-content:center; gap:var(--ig-space-3);
  position:relative; overflow:hidden;
}
.produto__escuro::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:20px 20px;
}
.produto__escuro > *{ position:relative; }
.produto__escuro strong{
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ig-gold-400);
}
.produto__escuro p{ margin:0; font-size:1.05rem; line-height:1.55; color:#fff; max-width:36ch; }

/* ==========================================================================
   DEPOIMENTOS — marquee de cartões com bordas esmaecidas.
   ========================================================================== */
.depos{ overflow:hidden; position:relative; }
.depos::before,.depos::after{
  content:''; position:absolute; top:0; bottom:0; width:min(120px,12vw); z-index:1; pointer-events:none;
}
.depos::before{ left:0; background:linear-gradient(90deg, var(--pf-bg), transparent); }
.depos::after{ right:0; background:linear-gradient(-90deg, var(--pf-bg), transparent); }

.depos__track{ display:flex; gap:var(--ig-space-4); width:max-content; animation:depos 48s linear infinite; }
.depos__track--reverso{ animation-direction:reverse; margin-top:var(--ig-space-4); }
.depos__grupo{ display:flex; gap:var(--ig-space-4); }
@keyframes depos{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .depos__track{ animation:none; }
  .depos{ overflow-x:auto; }
}

.depo{
  width:min(360px, 82vw); flex:none; margin:0;
  background:#fff; border:1px solid var(--ig-gold-200);
  border-radius:var(--pf-radius);
  padding:var(--ig-space-5);
  display:flex; flex-direction:column; gap:var(--ig-space-4);
}
.depo blockquote{ margin:0; }
.depo blockquote p{ margin:0; font-size:var(--ig-text-sm); line-height:1.6; color:var(--ig-navy-800); }
.depo mark{ background:none; color:inherit; font-weight:var(--ig-fw-semi); box-shadow:inset 0 -.4em 0 var(--ig-gold-200); }
.depo figcaption{ margin-top:auto; display:flex; flex-direction:column; gap:2px; }
.depo__metrica{
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ig-gold-800); font-weight:var(--ig-fw-semi);
}
.depo__quem{ font-size:var(--ig-text-xs); color:var(--ig-text-muted); }
.depo--destaque{ background:var(--ig-navy-900); border-color:var(--ig-navy-900); }
.depo--destaque blockquote p{ color:#fff; }
.depo--destaque mark{ color:var(--ig-gold-400); box-shadow:none; }
.depo--destaque .depo__metrica{ color:var(--ig-gold-400); }
.depo--destaque .depo__quem{ color:var(--ig-text-on-dark-muted); }
.depos__nota{
  text-align:center; margin:var(--ig-space-5) auto 0; font-size:var(--ig-text-sm);
  color:var(--ig-text-muted); max-width:62ch;
}

/* ==========================================================================
   CASES — cartões "folding" empilhados no scroll (template BYQ ValueFeatures):
   cada card é sticky num offset fixo abaixo da navbar; o seguinte desliza por
   cima. 2 colunas (conteúdo | foto), fundos alternados p/ a pilha ler bem.
   ========================================================================== */
.fold{ display:flex; flex-direction:column; gap:clamp(2.5rem, 1.5rem + 3vw, 5rem); }
.fcard{
  position:sticky; top:clamp(5.25rem, 4.5rem + 2vw, 6.5rem);   /* navbar (66px) + respiro */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items:center;
  border-radius:var(--pf-radius-lg);
  padding:clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.fcard--tile{ background:var(--pf-tile); }
.fcard--azul{ background:var(--ig-navy-100); }
.fcard--navy{ background:var(--ig-navy-900); color:#fff; }

.fcard__conteudo{ display:flex; flex-direction:column; align-items:flex-start; max-width:34rem; }
.fcard__label{
  margin:0 0 var(--ig-space-4);
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ig-navy-600);
}
.fcard--navy .fcard__label{ color:var(--ig-gold-400); }
.fcard__stat{ margin:0; display:flex; align-items:baseline; gap:var(--ig-space-3); flex-wrap:wrap; }
.fcard__stat strong{
  font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi);
  font-size:clamp(2.4rem, 1.8rem + 2.2vw, 3.6rem); line-height:1;
  letter-spacing:var(--ig-tracking-tight); color:var(--ig-navy-900);
}
.fcard--navy .fcard__stat strong{ color:var(--ig-gold-400); }
.fcard__stat span{ font-size:var(--ig-text-base); color:var(--ig-navy-700); }
.fcard--navy .fcard__stat span{ color:var(--ig-text-on-dark-muted); }
.fcard__titulo{ margin:var(--ig-space-4) 0 0; font-size:1.25rem; font-weight:var(--ig-fw-semi); color:var(--ig-navy-900); max-width:24ch; text-wrap:balance; }
.fcard--navy .fcard__titulo{ color:#fff; }
.fcard__texto{ margin:var(--ig-space-2) 0 0; font-size:var(--ig-text-base); line-height:1.55; color:var(--ig-navy-700); max-width:44ch; }
.fcard--navy .fcard__texto{ color:var(--ig-text-on-dark-muted); }
.fcard__quote{
  margin:var(--ig-space-5) 0 0; padding-top:var(--ig-space-4);
  border-top:1px dashed rgba(14,39,84,.28); align-self:stretch;
}
.fcard--navy .fcard__quote{ border-top-color:rgba(255,255,255,.22); }
.fcard__quote blockquote{ margin:0; font-style:italic; font-size:var(--ig-text-lg); line-height:1.5; color:var(--ig-navy-800); }
.fcard--navy .fcard__quote blockquote{ color:var(--ig-gold-100); }
.fcard__quote figcaption{
  margin-top:var(--ig-space-2);
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ig-navy-600);
}
.fcard--navy .fcard__quote figcaption{ color:var(--ig-text-on-dark-muted); }

.fcard__media{ position:relative; border-radius:var(--pf-radius); overflow:hidden; height:clamp(18rem, 12rem + 16vw, 26rem); align-self:stretch; }
.fcard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@media (max-width:900px){
  .fcard{ grid-template-columns:1fr; gap:var(--ig-space-5); }
  .fcard__media{ height:15rem; order:2; }
}

/* ==========================================================================
   MÉTODO FERA — o método nomeado (port do deck da proposta): 4 colunas com
   letra dourada gigante + separadores finos, e o payoff "1 a 3 vendas/mês".
   ========================================================================== */
.fera{ padding-block:var(--ig-section-y); background:var(--ig-navy-950); color:#fff; }
.fera .sec-head h2{ color:#fff; }
.fera .sec-head p{ color:var(--ig-text-on-dark-muted); }
.fera .tag{ color:var(--ig-gold-400); }

.fera__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.fera__col{ border-left:1px solid rgba(204,178,123,.35); padding-left:clamp(1rem, .8rem + 1vw, 1.5rem); }
.fera__letra{
  display:block; font-family:var(--ig-font-display); font-weight:var(--ig-fw-bold);
  font-size:clamp(2.75rem, 2rem + 2.5vw, 4rem); line-height:1;
  color:var(--ig-gold-400); margin-bottom:var(--ig-space-3);
}
/* Degradê dourado em movimento contínuo, SÓ nas letras (pedido do cliente).
   Pontas do gradiente iguais → loop sem emenda. Fallback: dourado sólido. */
@supports (-webkit-background-clip: text) or (background-clip: text){
  .fera__letra{
    background:linear-gradient(100deg,
      var(--ig-gold-600) 0%, var(--ig-gold-400) 25%, #f6e7c3 50%,
      var(--ig-gold-400) 75%, var(--ig-gold-600) 100%);
    background-size:200% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:fera-flow 3.6s linear infinite;
  }
}
@keyframes fera-flow{
  from{ background-position:0% 0; }
  to{ background-position:-200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .fera__letra{
    animation:none; background:none;
    -webkit-text-fill-color:var(--ig-gold-400); color:var(--ig-gold-400);
  }
}
.fera__col h3{ margin:0 0 var(--ig-space-2); font-size:1.1rem; font-weight:var(--ig-fw-semi); color:#fff; }
.fera__col p{ margin:0; font-size:var(--ig-text-sm); line-height:1.55; color:var(--ig-text-on-dark-muted); }

/* Payoff: a promessa do método. */
.fera__meta{
  margin-top:clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top:clamp(1.5rem, 1rem + 1.5vw, 2rem);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; gap:clamp(1.25rem, 1rem + 1.5vw, 2rem); flex-wrap:wrap;
}
.fera__meta-num{
  margin:0; font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi);
  font-size:clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height:1; color:var(--ig-gold-400);
  letter-spacing:var(--ig-tracking-tight); white-space:nowrap;
}
.fera__meta-txt b{ display:block; font-size:var(--ig-text-lg); font-weight:var(--ig-fw-semi); color:#fff; }
.fera__meta-txt span{ display:block; margin-top:2px; font-size:var(--ig-text-sm); color:var(--ig-text-on-dark-muted); max-width:52ch; }
.fera__meta .ig-btn{ margin-left:auto; }

.reveal-prep .fera__grid .fera__col:nth-child(2){ transition-delay:80ms; }
.reveal-prep .fera__grid .fera__col:nth-child(3){ transition-delay:160ms; }
.reveal-prep .fera__grid .fera__col:nth-child(4){ transition-delay:240ms; }

@media (max-width:900px){ .fera__grid{ grid-template-columns:1fr 1fr; } .fera__meta .ig-btn{ margin-left:0; } }
@media (max-width:520px){ .fera__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   COMPARATIVO — dois cards no vocabulário de pricing.
   ========================================================================== */
.planos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:var(--ig-space-4); align-items:stretch;
  max-width:980px; margin-inline:auto;
}
.plano{
  border-radius:var(--pf-radius-lg);
  padding:clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  display:flex; flex-direction:column; gap:var(--ig-space-4);
}
.plano--eles{ background:var(--pf-tile); }
.plano--nos{
  background:var(--pf-dark); color:#fff;
  position:relative; overflow:hidden;
}
.plano--nos::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:20px 20px;
}
.plano--nos > *{ position:relative; }
.plano__selo{
  align-self:flex-start;
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:var(--ig-radius-full); padding:var(--ig-space-1) var(--ig-space-3);
}
.plano--eles .plano__selo{ background:#fff; color:var(--ig-text-muted); border:1px solid var(--ig-gold-200); }
.plano--nos .plano__selo{ background:rgba(204,178,123,.16); color:var(--ig-gold-400); }
.plano h3{ margin:0; font-size:var(--ig-text-h3); }
.plano--nos h3{ color:#fff; }
.plano__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.plano__lista li{
  display:flex; gap:var(--ig-space-3); align-items:baseline;
  padding-block:var(--ig-space-3);
  font-size:var(--ig-text-sm);
  border-top:1px dashed var(--ig-gold-300);
}
.plano--nos .plano__lista li{ border-top-color:rgba(255,255,255,.14); color:#fff; }
.plano--eles .plano__lista li{ color:var(--ig-text-muted); }
.plano__lista li::before{ flex:none; font-weight:var(--ig-fw-bold); }
.plano--eles .plano__lista li::before{ content:'✕'; color:var(--ig-navy-300); }
.plano--nos .plano__lista li::before{ content:'✓'; color:var(--ig-gold-400); }
.plano__cta{ margin-top:auto; padding-top:var(--ig-space-4); }

/* ==========================================================================
   FAQ — acordeão com círculo de + / −.
   ========================================================================== */
.faq{ max-width:760px; margin-inline:auto; }
.faq details{ border-top:1px solid var(--ig-gold-200); }
.faq details:last-child{ border-bottom:1px solid var(--ig-gold-200); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:var(--ig-space-5) calc(40px + var(--ig-space-4)) var(--ig-space-5) 0;
  font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi); font-size:1.08rem;
  color:var(--ig-navy-900); position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:0; top:50%; margin-top:-18px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--ig-gold-300);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ig-font-text); font-weight:400; font-size:1.2rem; color:var(--ig-navy-900);
  transition:transform var(--ig-dur-base) var(--ig-ease), background var(--ig-dur-base) var(--ig-ease);
}
.faq details[open] summary::after{
  content:'+'; transform:rotate(45deg);
  background:var(--ig-navy-900); color:#fff; border-color:var(--ig-navy-900);
}
.faq details p{ margin:0 0 var(--ig-space-5); color:var(--ig-text-muted); max-width:60ch; }

/* ==========================================================================
   CTA FINAL — banner escuro arredondado com o formulário.
   ========================================================================== */
/* CTA final no modelo BYQ "CtaSection": 2 colunas — esquerda decorativa
   (imagem + widget de funil + provas) e direita com o formulário. */
.cta{ padding-block:var(--ig-section-y); background:var(--ig-navy-50); }
.cta2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--ig-space-4); align-items:stretch; }
@media (max-width:960px){ .cta2{ grid-template-columns:1fr; } .cta2__left{ min-height:16rem; } }

/* Esquerda: vídeo abstrato de fundo + logo centralizada, nada mais */
.cta2__left{
  position:relative; overflow:hidden; border-radius:var(--pf-radius-lg);
  padding:clamp(1.75rem, 1.2rem + 2vw, 3rem); min-height:30rem;
  display:grid; place-items:center;
  color:#fff; background:var(--ig-navy-900);
}
.cta2__video{
  /* Mesmo sangramento anti-fresta de DPR fracionário do vídeo do hero. */
  position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px);
  object-fit:cover; z-index:0;
}
.cta2__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(rgba(8,23,49,.25), rgba(8,23,49,.45));
}
.cta2__logo{ position:relative; z-index:2; color:#fff; height:clamp(30px, 24px + 1.2vw, 42px); display:inline-block; filter:drop-shadow(0 4px 24px rgba(8,23,49,.6)); }
.cta2__logo svg{ height:100%; width:auto; display:block; }
/* Movimento reduzido: esconde o vídeo, fica o navy + scrim (sem loop animado). */
@media (prefers-reduced-motion: reduce){
  .cta2__video{ display:none; }
  .cta2__left{ background:var(--ig-navy-900) var(--cta2-fundo, url('../img/colagem-chaves.jpg')) center/cover no-repeat; }
}

/* Direita: painel branco + cabeçalho + formulário (flat, sem card aninhado) */
.cta2__right{
  background:var(--ig-white); border-radius:var(--pf-radius-lg);
  padding:clamp(1.75rem, 1.2rem + 2vw, 3rem);
  display:flex; flex-direction:column; gap:clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.cta2__badge{
  align-self:flex-start; display:inline-flex; align-items:center; gap:var(--ig-space-2);
  padding:var(--ig-space-2) var(--ig-space-3); border:1px solid var(--ig-navy-200); border-radius:var(--ig-radius-md);
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--ig-navy-700);
}
.cta2__badge-dot{ width:.6rem; height:.6rem; border-radius:2px; background:var(--ig-gold-400); flex:none; }
.cta2__head h2{ margin:var(--ig-space-4) 0 var(--ig-space-3); font-size:var(--pf-h2); font-weight:var(--ig-fw-semi); line-height:1.12; letter-spacing:var(--ig-tracking-tight); color:var(--ig-text); max-width:20ch; }
.cta2__head p{ margin:0; color:var(--ig-text-muted); font-size:var(--ig-text-lg); line-height:1.55; max-width:46ch; }
.cta2__right .formcard{ background:transparent; box-shadow:none; padding:0; max-width:none; margin:0; }

/* ==========================================================================
   FORMULÁRIO
   ========================================================================== */
.formcard{
  background:#fff; color:var(--ig-navy-900);
  border-radius:var(--pf-radius);
  padding:clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  box-shadow:var(--ig-shadow-lg);
  max-width:var(--ig-container-form); width:100%; margin-inline:auto;
}
.formcard p{ color:var(--ig-navy-900); font-size:var(--ig-text-base); }
.formcard .formcard__titulo{
  font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi);
  font-size:1.25rem; margin:0 0 var(--ig-space-1); color:var(--ig-navy-900);
}
.formcard .formcard__sub{ font-size:var(--ig-text-sm); color:var(--ig-text-muted); margin:0 0 var(--ig-space-5); }
.formcard .ig-help{ color:var(--ig-text-muted); }
.formcard .ig-error{ color:var(--ig-danger); }
.formcard .ig-label{ color:var(--ig-navy-900); }

.passos{ display:flex; gap:var(--ig-space-2); margin-bottom:var(--ig-space-5); }
.passos span{
  flex:1; height:3px; border-radius:var(--ig-radius-full); background:var(--ig-navy-100);
  transition:background var(--ig-dur-base) var(--ig-ease);
}
.passos span.on{ background:var(--ig-gold-400); }

.etapa[hidden]{ display:none; }
.form__linha{ display:grid; grid-template-columns:1fr 1fr; gap:var(--ig-space-3); }
@media (max-width:420px){ .form__linha{ grid-template-columns:1fr; } }

.consent{
  display:flex; gap:var(--ig-space-3); align-items:flex-start;
  font-size:var(--ig-text-sm); color:var(--ig-text-muted); margin:var(--ig-space-4) 0;
}
.consent input{ width:18px; height:18px; margin-top:3px; accent-color:var(--ig-navy-900); flex:none; }
.consent a{ color:var(--ig-text-accent); }

.formcard .form__pe{ font-size:var(--ig-text-xs); color:var(--ig-text-muted); text-align:center; margin:var(--ig-space-3) 0 0; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__voltar{
  background:none; border:0; color:var(--ig-text-muted); font:inherit;
  font-size:var(--ig-text-sm); cursor:pointer; padding:var(--ig-space-2) 0; margin-top:var(--ig-space-3);
}
.form__voltar:hover{ color:var(--ig-navy-900); }

/* ==========================================================================
   RODAPÉ — claro, com cartão de contato, colunas e marca-d'água gigante.
   ========================================================================== */
.rodape{
  padding-top:var(--ig-section-y);
  padding-bottom:clamp(2.5rem, 1.5rem + 2vw, 4rem);   /* respiro embaixo (a watermark que fazia isso foi removida) */
  border-top:1px solid var(--ig-gold-200);
  color:var(--ig-text-muted); font-size:var(--ig-text-sm);
  position:relative; overflow:hidden;
}
.rodape__in{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
  gap:clamp(2.5rem, 1rem + 4vw, 4.5rem); align-items:start;
}
@media (max-width:768px){ .rodape__in{ grid-template-columns:1fr; gap:var(--ig-space-8); } }
/* E-mail/URLs longos quebram em vez de invadir a coluna vizinha. */
.rodape__in p{ overflow-wrap:anywhere; }

/* Metade esquerda: marca + WhatsApp (sem tile, como no template). */
.rodape__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--ig-space-4); }
.rodape__brand p{ margin:0; max-width:34ch; color:var(--ig-navy-700); }
.rodape__logo{ color:var(--ig-navy-900); height:24px; display:inline-block; }
.rodape__logo svg{ height:100%; width:auto; display:block; }

/* Metade direita: colunas de navegação. */
.rodape__nav{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem, .6rem + 2.2vw, 3rem); }
.rodape__nav > div{ flex:0 0 auto; }
@media (max-width:520px){ .rodape__nav{ gap:var(--ig-space-6); } .rodape__nav > div{ flex:1 0 40%; } }

.rodape h3{
  color:var(--ig-navy-900); font-size:var(--ig-text-xs); font-family:var(--ig-font-mono);
  font-weight:var(--ig-fw-semi); letter-spacing:.12em; text-transform:uppercase;
  margin:0 0 var(--ig-space-3);
}
.rodape a{ color:var(--ig-navy-700); text-decoration:none; }
.rodape a:hover{ color:var(--ig-navy-900); }
/* O pill do cartão de contato não herda a cor de link do rodapé. */
.rodape a.ig-btn--secondary{ color:#fff; }
.rodape a.ig-btn--secondary:hover{ color:#fff; }

.rodape__base{
  margin-top:var(--ig-space-8); padding-block:var(--ig-space-5);
  border-top:1px solid var(--ig-gold-200); border-bottom:1px solid var(--ig-gold-200);
  display:flex; flex-wrap:wrap; gap:var(--ig-space-4); justify-content:space-between; align-items:center;
  font-size:var(--ig-text-xs); position:relative; z-index:1;
}
.rodape__base-l{ display:flex; align-items:center; gap:var(--ig-space-5); flex-wrap:wrap; }
.rodape__social{ display:flex; gap:var(--ig-space-3); }
.rodape__social a{ color:var(--ig-navy-400); display:inline-flex; transition:color var(--ig-dur-base) var(--ig-ease); }
.rodape__social a:hover{ color:var(--ig-navy-900); }
.rodape__social svg{ width:22px; height:22px; display:block; }
.rodape__parceiro{ color:var(--ig-text-subtle); }
.rodape__legal{
  margin:var(--ig-space-5) 0 0; max-width:none;
  font-size:var(--ig-text-xs); line-height:1.6; color:var(--ig-text-subtle);
  position:relative; z-index:1;
}


/* ==========================================================================
   WHATSAPP FLUTUANTE
   ========================================================================== */
.wpp{
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem);
  z-index:var(--ig-z-float);
  display:inline-flex; align-items:center; gap:var(--ig-space-3);
  background:var(--ig-whatsapp); color:#fff; text-decoration:none;
  padding:var(--ig-space-3) var(--ig-space-5); border-radius:var(--ig-radius-full);
  box-shadow:var(--ig-shadow-lg); font-weight:var(--ig-fw-semi); font-size:var(--ig-text-sm);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity var(--ig-dur-base) var(--ig-ease), transform var(--ig-dur-base) var(--ig-ease);
}
.wpp.is-on{ opacity:1; transform:none; pointer-events:auto; }
.wpp svg{ width:20px; height:20px; flex:none; }
@media (max-width:520px){ .wpp span{ display:none; } .wpp{ padding:var(--ig-space-4); } }

/* ==========================================================================
   PÁGINAS INTERNAS (obrigado, privacidade, erro de validação)
   ========================================================================== */
.miolo{ max-width:var(--ig-container-text); }
.miolo h2{ margin-top:var(--ig-space-7); }
.miolo ul{ padding-left:var(--ig-space-5); }
.miolo li{ margin-bottom:var(--ig-space-2); }

.obrigado{ text-align:center; }
.obrigado__selo{
  width:64px; height:64px; margin:0 auto var(--ig-space-5);
  border-radius:var(--ig-radius-full); background:var(--ig-gold-400);
  display:flex; align-items:center; justify-content:center;
}
.obrigado__selo svg{ width:30px; height:30px; color:var(--ig-navy-900); }
.obrigado ol{ text-align:left; max-width:34rem; margin:var(--ig-space-6) auto; padding-left:var(--ig-space-5); }
.obrigado ol li{ margin-bottom:var(--ig-space-3); }

/* ==========================================================================
   RITMO
   ========================================================================== */
.ig-section--continua{ padding-top:0; }
/* Meia-entrada: p/ seção clara logo após bloco colorido de cauda curta —
   divide o respiro da fronteira entre os dois lados da troca de cor. */
.ig-section--meia{ padding-top:calc(var(--ig-section-y) / 2); }
main p,main li,main dd,main blockquote{ text-wrap:pretty; }

.reveal-prep .dores .dor:nth-child(3n+2){ transition-delay:100ms; }
.reveal-prep .dores .dor:nth-child(3n){ transition-delay:200ms; }
.reveal-prep .stats__grid .stat:nth-child(2){ transition-delay:90ms; }
.reveal-prep .stats__grid .stat:nth-child(3){ transition-delay:180ms; }
.reveal-prep .stats__grid .stat:nth-child(4){ transition-delay:270ms; }
.reveal-prep .bento .bento__card:nth-child(2n){ transition-delay:120ms; }
@media (prefers-reduced-motion: reduce){
  .reveal-prep .reveal{ transition-delay:0s !important; }
}

/* ==========================================================================
   SEÇÃO 02 — Título com preenchimento + slider de serviços
   Título grande em Poppins onde cada palavra "acende" (opacity .16 → 1) conforme
   a página rola — efeito de preenchimento igual ao da Millenium (JS embrulha as
   palavras em .w > .w-i e move a opacidade pelo scroll; main.js §5c). Abaixo, um
   slider de cards com título, ícone, texto e foto que aparece no hover.
   Fundo claro (creme) — "claro é leitura". Setas só em tablet/mobile.
   ========================================================================== */

/* --- 02a · Título com preenchimento por palavra --------------------- */
.introcol{ padding-block:var(--ig-section-y); background:var(--pf-bg); }
.introcol__frase{
  max-width:52rem; margin:0 auto;
  font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi);
  font-size:clamp(1.9rem, 1rem + 3.4vw, 3.4rem);
  line-height:1.18; letter-spacing:var(--ig-tracking-tight);
  color:var(--ig-text); text-align:center; text-wrap:balance;
}
/* Palavras embrulhadas pelo JS (efeito de preenchimento) — genérico p/ qualquer
   título com data-fill. Sem JS / movimento reduzido: texto pleno. */
.is-fill .w{ display:inline-block; }
.is-fill .w-i{ display:inline-block; will-change:opacity; opacity:.16; }  /* JS sobrescreve inline no scroll */

.introcol__selo{
  margin:clamp(2.25rem, 1.4rem + 3vw, 3.75rem) auto 0; max-width:none;
  display:flex; justify-content:center; align-items:center; gap:var(--ig-space-2);
  font-family:var(--ig-font-text); font-weight:var(--ig-fw-medium);
  font-size:var(--ig-text-base); color:var(--ig-text-muted);
}
.introcol__star{ color:var(--ig-gold-500); flex:none; }

/* --- 02a · Bento (fiel ao template BYQ "BentoSection") -------------- */
/* Grade 6fr/3fr/3fr × 2: foto grande à esq (h3 + divisor + 2 stats sobre a
   imagem), tile claro (avatares sobrepostos + stat grande), listrado com
   cartão branco de parceiro, e navy largo (headline + logo, tags + link). */
.bentog-sec{ background:var(--pf-bg); padding-block:0 var(--ig-section-y); }
.bentog{
  display:grid; gap:var(--ig-space-3);
  grid-template-columns:6fr 3fr 3fr;
  grid-template-rows:repeat(2, minmax(17.5rem, auto));
}
.bentog__card{ position:relative; overflow:hidden; border-radius:var(--pf-radius-lg); }

/* 1 · Foto grande — ocupa as 2 linhas da coluna esquerda. */
.bentog__card--foto{
  grid-row:1 / 3;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
  min-height:34rem;
}
.bentog__card--foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; transition:transform 600ms var(--ig-ease-out); }
.bentog__card--foto:hover img{ transform:scale(1.035); }
.bentog__grad{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(8,23,49,.92) 0%, rgba(8,23,49,.55) 34%, rgba(8,23,49,0) 66%); }
.bentog__body{ position:relative; z-index:1; padding:clamp(1.25rem, 1rem + 1.2vw, 1.85rem); }
.bentog__h{ margin:0; font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi);
  font-size:clamp(1.35rem, 1.05rem + 1.2vw, 2rem); line-height:1.14;
  letter-spacing:var(--ig-tracking-tight); color:#fff; text-wrap:balance; max-width:22ch; }
.bentog__div{ height:1px; background:rgba(255,255,255,.16); margin-block:clamp(1rem, .8rem + .8vw, 1.5rem); }
.bentog__stats{ display:flex; flex-wrap:wrap; gap:clamp(1rem, .7rem + 1.2vw, 2rem); }
.bentog__stat{ display:flex; align-items:center; gap:var(--ig-space-3); }
.bentog__stat b{ font-family:var(--ig-font-text); font-weight:300;
  font-size:clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height:1; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.bentog__stat span{ font-size:var(--ig-text-sm); line-height:1.35; color:rgba(255,255,255,.85); max-width:8.5rem; }

/* 2 · Tile claro — avatares sobrepostos + stat grande embaixo. */
.bentog__card--tile{
  background:var(--pf-tile); color:var(--ig-text);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:var(--ig-space-5); padding:clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
}
.bentog__avatars{ display:flex; margin-bottom:var(--ig-space-3); }
.bentog__avatar{
  flex:none; width:40px; height:40px; overflow:hidden;
  border-radius:var(--ig-radius-lg); border:2px solid var(--pf-bg);
  margin-left:-11px; background:var(--ig-navy-100);
}
.bentog__avatar:first-child{ margin-left:0; }
/* Crop no TOPO: os rostos das fotos do time vivem na metade superior. */
.bentog__avatar img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.bentog__avatar--plus{
  display:grid; place-items:center;
  background:var(--ig-gold-400); color:var(--ig-navy-900);
  font-weight:var(--ig-fw-bold); font-size:1rem;
}
.bentog__tile-txt{ margin:0; font-size:var(--ig-text-sm); font-weight:var(--ig-fw-medium);
  line-height:1.45; color:var(--ig-navy-800); max-width:22ch; }
.bentog__big{ display:flex; align-items:flex-end; gap:var(--ig-space-3); flex-wrap:wrap; }
.bentog__big b{ font-family:var(--ig-font-text); font-weight:300; white-space:nowrap;
  font-size:clamp(1.8rem, 1.4rem + 1.1vw, 2.3rem); line-height:1; letter-spacing:-0.02em; color:var(--ig-navy-900); }
.bentog__big span{ font-size:var(--ig-text-sm); color:var(--ig-text-muted); padding-bottom:3px; }

/* 3 · Listrado — cartão branco do parceiro flutuando sobre o padrão. */
.bentog__card--stripe{
  background:repeating-linear-gradient(180deg,
    rgba(14,39,84,.82) 0 7px, transparent 7px 17px), var(--pf-bg);
  display:flex; align-items:center;
  padding:clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
}
.bentog__partner{
  width:100%; background:var(--pf-bg); border-radius:var(--pf-radius);
  padding:var(--ig-space-3); display:flex; align-items:center; gap:var(--ig-space-4);
  box-shadow:var(--ig-shadow-md);
}
.bentog__partner-foto{ flex:none; width:64px; height:64px; overflow:hidden; border-radius:var(--ig-radius-lg); }
.bentog__partner-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; }
.bentog__partner .bentog__tile-txt{ margin-bottom:var(--ig-space-2); }
.bentog__mono{ font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ig-navy-500); }

/* 4 · Navy largo — headline suave + logo, tags mono + link sublinhado. */
.bentog__card--cta{
  grid-column:2 / 4;
  background:var(--ig-navy-900); color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:var(--ig-space-6); padding:clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
}
/* Mesmo vídeo do CTA final ao fundo; sangra 2px (anti-fresta de DPR
   fracionário). Sem vídeo (reduced-motion/falha): fica o navy sólido. */
.bentog__cta-video{
  position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px);
  object-fit:cover; z-index:0;
}
@media (prefers-reduced-motion: reduce){ .bentog__cta-video{ display:none; } }
/* Scrim por cima do vídeo (::after pinta depois dos filhos) p/ o texto ler. */
.bentog__card--cta::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(8,23,49,.35), rgba(8,23,49,.6));
}
.bentog__card--cta > :not(.bentog__cta-video){ position:relative; z-index:1; }
.bentog__cta-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--ig-space-5); }
.bentog__cta-h{ margin:0; font-family:var(--ig-font-display); font-weight:var(--ig-fw-medium);
  font-size:clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height:1.2;
  letter-spacing:var(--ig-tracking-tight); color:var(--ig-navy-100); max-width:24ch; text-wrap:balance; }
.bentog__cta-logo{ flex:none; color:#fff; height:22px; margin-top:4px; }
.bentog__cta-logo svg{ height:100%; width:auto; display:block; }
.bentog__cta-base{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--ig-space-4); flex-wrap:wrap; }
.bentog__tags{ display:flex; gap:var(--ig-space-2); flex-wrap:wrap; }
.bentog__tags span{
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.08em; text-transform:uppercase;
  padding:6px 8px; border-radius:var(--ig-radius-sm);
  background:rgba(255,255,255,.16); color:rgba(255,255,255,.88);
}
.bentog__link{
  display:inline-flex; align-items:center; gap:var(--ig-space-2);
  color:#fff; text-decoration:none; font-weight:var(--ig-fw-medium); font-size:var(--ig-text-sm);
  border-bottom:1px solid #fff; padding-bottom:3px;
  transition:color var(--ig-dur-base) var(--ig-ease), border-color var(--ig-dur-base) var(--ig-ease);
}
.bentog__link:hover{ color:var(--ig-gold-400); border-color:var(--ig-gold-400); }
.bentog__link .seta{ transition:transform var(--ig-dur-base) var(--ig-ease); }
.bentog__link:hover .seta{ transform:translateX(4px); }

/* stagger da revelação */
.reveal-prep .bentog .bentog__card:nth-child(2){ transition-delay:80ms; }
.reveal-prep .bentog .bentog__card:nth-child(3){ transition-delay:160ms; }
.reveal-prep .bentog .bentog__card:nth-child(4){ transition-delay:240ms; }

@media (max-width:991px){
  .bentog{ grid-template-columns:1.6fr 1fr; }
  .bentog__card--cta{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .bentog{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .bentog__card--foto{ grid-row:auto; grid-column:1 / -1; min-height:26rem; }
}
@media (max-width:500px){
  .bentog{ grid-template-columns:1fr; }
  .bentog__card--foto{ grid-column:auto; min-height:22rem; }
  .bentog__card--cta{ grid-column:auto; }
}

/* --- 02b · Slider de serviços --------------------------------------- */
.servicos-slider{ padding-bottom:var(--ig-section-y); background:var(--pf-bg); overflow:clip; }
.slider{ position:relative; }
.slider__mask{ overflow:hidden; }
.slider__track{
  --slider-gap:var(--ig-space-4);
  display:flex; gap:var(--slider-gap);
  transition:transform 700ms var(--ig-ease-out); will-change:transform;
}

.scard{
  flex:0 0 calc((100% - 2 * var(--ig-space-4)) / 3);   /* 3 por vista no desktop */
  position:relative; overflow:hidden; border-radius:var(--pf-radius);
  min-height:34rem; padding:var(--ig-space-6);
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  text-align:center; gap:var(--ig-space-6);
  background:var(--pf-tile); color:var(--ig-navy-900);
  transition:color 350ms var(--ig-ease-out);
}
.scard__titulo{ position:relative; z-index:2; margin:0; font-size:var(--ig-text-h3); font-weight:var(--ig-fw-semi); color:inherit; }
.scard__icone{ position:relative; z-index:2; width:5rem; height:5rem; color:var(--ig-gold-600); }
.scard__icone svg{ width:100%; height:100%; }
.scard__texto{ position:relative; z-index:2; margin:0; max-width:34ch; font-size:var(--ig-text-base); color:inherit; }

.scard__foto{ position:absolute; inset:0; z-index:1; opacity:0; transition:opacity 500ms var(--ig-ease-out); }
.scard__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.scard__foto::after{                                   /* escurece a foto p/ o texto claro ler bem */
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,23,49,.55), rgba(8,23,49,.20) 45%, rgba(8,23,49,.88));
}

/* Hover no desktop: foto entra, texto vira claro. */
@media (hover:hover){
  .scard:hover{ color:var(--ig-gold-50); }
  .scard:hover .scard__foto{ opacity:1; }
  .scard:hover .scard__icone{ color:var(--ig-gold-400); }
}
/* Touch (sem hover): foto sempre visível — o efeito não se perde no celular. */
@media (hover:none){
  .scard{ color:var(--ig-gold-50); }
  .scard__foto{ opacity:1; }
  .scard__icone{ color:var(--ig-gold-400); }
}

/* Navegação — só aparece quando há cards fora da vista (tablet/mobile). */
.slider__nav{ display:none; justify-content:center; align-items:center; gap:var(--ig-space-2); margin-top:var(--ig-space-6); }
.slider__btn{
  display:grid; place-items:center; width:48px; height:48px;
  border-radius:var(--ig-radius-md); border:1px solid transparent;
  background:var(--ig-navy-100); color:var(--ig-navy-900); cursor:pointer;
  transition:background var(--ig-dur-base) var(--ig-ease), opacity var(--ig-dur-base) var(--ig-ease);
}
.slider__btn:hover{ background:var(--ig-gold-300); }
.slider__btn[disabled]{ opacity:.3; pointer-events:none; }

@media (max-width:991px){
  .scard{ flex-basis:calc((100% - var(--ig-space-4)) / 2); }   /* ~2 por vista */
  .slider__nav{ display:flex; }
}
@media (max-width:767px){
  .scard{ flex-basis:85%; min-height:28rem; padding:var(--ig-space-5); border-radius:var(--ig-radius-lg); }
}

/* ==========================================================================
   SEÇÃO 03 — Expertise (modelo BYQ/Avenir "ValueFeatures")
   Headline à esquerda + slider de cards quadrados (foto preenchendo + painel de
   vidro fosco + CTA). Um card por vista; setas no topo-direita (desktop) e
   estáticas (mobile). Reaproveita o slider genérico (.slider/.slider__* + JS
   §5b). Fundo navy-50 (claro/frio) pra separar da seção creme acima.
   ========================================================================== */
.expertise{ padding-block:var(--ig-section-y); background:var(--ig-navy-50); color:var(--ig-text); }
.expertise__head{
  max-width:48rem; margin:0 0 clamp(2.5rem, 1.6rem + 3vw, 4rem);
  display:flex; flex-direction:column; gap:var(--ig-space-5);
}
.expertise__head .tag{ margin:0; }
.expertise__title{
  margin:0; font-size:var(--pf-h2); font-weight:var(--ig-fw-semi);
  line-height:1.12; letter-spacing:var(--ig-tracking-tight);
  color:var(--ig-text); text-wrap:balance;
}

/* Um card por vista; setas flutuando no topo-direita (área livre ao lado do H2). */
.slider--expertise{ position:relative; }
.slider--expertise .slider__mask{ max-width:none; }   /* full-width: mostra vários cards + espiada */
.slider--expertise .slider__nav--tr{
  display:flex; position:absolute; right:0; bottom:calc(100% + var(--ig-space-6)); margin:0;
}

.xcard{
  flex:0 0 26rem;                                      /* largura fixa; ~2–3 por vista no desktop */
  max-width:calc(100% - var(--ig-space-6));            /* nunca maior que a viewport */
  position:relative; overflow:hidden; border-radius:var(--pf-radius);
  aspect-ratio:3 / 4;                                  /* retrato: a foto respira em cima */
  display:flex; flex-direction:column; justify-content:flex-end;
}
.xcard__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; z-index:0; }
.xcard::after{                                    /* escurece a base p/ o painel ler bem */
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,23,49,0) 52%, rgba(8,23,49,.62));
}
.xcard__panel{
  position:relative; z-index:2; margin:var(--ig-space-5);
  padding:var(--ig-space-5); border-radius:var(--pf-radius);
  background:rgba(247,246,245,.14); border:1px solid rgba(247,246,245,.22);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  color:var(--ig-gold-50);
  display:flex; flex-direction:column; gap:var(--ig-space-3);
  min-height:13.5rem;               /* painéis iguais entre si, colados no rodapé do card */
}
.xcard__title{ margin:0; font-size:var(--ig-text-h3); font-weight:var(--ig-fw-semi); color:var(--ig-white); }
.xcard__body{ margin:0; font-size:var(--ig-text-base); line-height:1.55; color:rgba(247,246,245,.9); }
.xcard__cta{
  align-self:flex-start; margin-top:auto;   /* fixa o CTA no rodapé → alinha entre os cards */
  display:inline-flex; align-items:center; gap:var(--ig-space-2);
  font-family:var(--ig-font-text); font-weight:var(--ig-fw-semi); font-size:var(--ig-text-sm);
  color:var(--ig-gold-400); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:color var(--ig-dur-base) var(--ig-ease), gap var(--ig-dur-base) var(--ig-ease);
}
.xcard__cta:hover{ color:var(--ig-white); gap:var(--ig-space-3); }

@media (max-width:767px){
  .slider--expertise .slider__nav--tr{ position:static; margin:0 0 var(--ig-space-6); justify-content:flex-start; }
  .xcard{ flex-basis:85%; aspect-ratio:3 / 4.4; }     /* 1 card + espiada no mobile */
  .xcard__panel{ min-height:0; }                       /* 1 card por vista: altura natural */
}

/* ==========================================================================
   SEÇÃO 04b — Processo (timeline no modelo .tl-split da Millenium)
   2 colunas: intro FIXA à esquerda (topbar + h2 + texto + CTA) e a timeline à
   direita (trilho + preenchimento por altura no scroll + dots dourados).
   Adaptado aos tokens navy+dourado; fundo creme. Lógica em main.js §5d.
   ========================================================================== */
.processo{ padding-block:var(--ig-section-y); background:var(--pf-bg); }

.tl-split{ display:grid; grid-template-columns:1fr; gap:var(--ig-space-8); align-items:start; }
@media (min-width:1024px){
  .tl-split{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(3rem, 1rem + 5vw, 6rem); }
  .tl-intro{ position:sticky; top:6rem; }
}
.tl-intro{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--ig-space-4); }
.tl-intro h2{ margin:0; font-size:var(--pf-h2); line-height:1.12; letter-spacing:var(--ig-tracking-tight); color:var(--ig-text); text-wrap:balance; }
.tl-intro p{ margin:0; color:var(--ig-text-muted); font-size:var(--ig-text-lg); line-height:1.6; max-width:40ch; }
.tl-cta{ margin-top:var(--ig-space-2); }

.section-topbar{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--ig-space-4);
  width:100%; padding-bottom:var(--ig-space-3); margin-bottom:var(--ig-space-2);
  border-bottom:1px solid var(--ig-border);
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ig-text-muted);
}
.section-topbar .tb-num{ color:var(--ig-gold-800); }

/* Trilho + preenchimento por altura */
.tl-track{ position:relative; }
.tl-line{ position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:rgba(14,39,84,.16); border-radius:2px; }
.tl-line-fill{ position:absolute; left:0; top:0; width:100%; height:0; background:linear-gradient(var(--ig-gold-400), var(--ig-gold-500)); border-radius:2px; }

.tl-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(2rem, 1.4rem + 2vw, 3rem); }
.tl-step{
  position:relative; padding-left:var(--ig-space-7);
  display:grid; grid-template-columns:2.4rem 1fr; gap:var(--ig-space-4); align-items:start;
}
.tl-dot{ position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%; background:var(--ig-gold-400); box-shadow:0 0 0 4px var(--pf-bg); }
.tl-num{
  font-family:var(--ig-font-display); font-weight:var(--ig-fw-bold);
  font-size:var(--ig-text-h3); line-height:1; letter-spacing:var(--ig-tracking-tight);
  color:var(--ig-gold-700); padding-top:2px;
}
.tl-body{ display:flex; flex-direction:column; gap:var(--ig-space-2); }
.tl-title{ font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi); font-size:var(--ig-text-h4); line-height:var(--ig-lh-snug); letter-spacing:var(--ig-tracking-snug); color:var(--ig-text); }
.tl-body p{ margin:0; color:var(--ig-text-muted); font-size:.95rem; line-height:1.55; }
.tl-recebe{ margin-top:var(--ig-space-1) !important; }
.tl-recebe strong{ margin-right:.45em; color:var(--ig-gold-800); font-family:var(--ig-font-mono); font-size:var(--ig-text-xs); letter-spacing:.06em; text-transform:uppercase; }

@media (max-width:479px){
  .tl-step{ grid-template-columns:1fr; gap:var(--ig-space-1); padding-left:var(--ig-space-6); }
  .tl-num{ font-size:var(--ig-text-lg); }
}

/* ==========================================================================
   SEÇÃO 04 — Bento assimétrico (modelo BYQ "BentoSection")
   Headline centrada + grade 6fr/3fr/3fr, 4 cards: grande (imagem+stats),
   canais (claro), criativos (listrado) e escuro (tags+CTA). Recria a antiga
   seção escura de entregáveis, sem avatares/rosto de cliente (LGPD).
   ========================================================================== */
.bento2{ padding-block:var(--ig-section-y); background:var(--pf-bg); }
.bento2__head{ max-width:42rem; margin:0 auto clamp(3rem, 2rem + 4vw, 5.5rem); text-align:center; }
.bento2__head .tag{ justify-content:center; }
.bento2__head h2{ margin:0; font-size:var(--pf-h2); line-height:1.12; letter-spacing:var(--ig-tracking-tight); text-wrap:balance; }

.bento2__grid{
  display:grid; gap:var(--ig-space-4);
  grid-template-columns:6fr 3fr 3fr;
  grid-template-rows:minmax(16.5rem, auto) minmax(16.5rem, auto);   /* cresce p/ não cortar conteúdo */
}
.b2card{ position:relative; border-radius:var(--pf-radius); overflow:hidden; }
.b2card--hero{ grid-column:1; grid-row:1 / span 2; }
.b2card--canais{ grid-column:2; grid-row:1; }
.b2card--criativos{ grid-column:3; grid-row:1; }
.b2card--dark{ grid-column:2 / span 2; grid-row:2; }

/* Card grande com imagem */
.b2card--hero{ display:flex; flex-direction:column; justify-content:flex-end; padding:var(--ig-space-6); color:var(--ig-white); }
.b2card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.b2card--hero::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,23,49,0) 30%, rgba(8,23,49,.85)); }
.b2card__in{ position:relative; z-index:2; display:flex; flex-direction:column; gap:var(--ig-space-5); }
.b2card__in h3{ margin:0; color:var(--ig-white); font-size:var(--ig-text-h3); font-weight:var(--ig-fw-semi); line-height:1.15; max-width:22ch; }
.b2card__rule{ height:1px; background:rgba(255,255,255,.18); }
.b2card__stats{ display:flex; gap:var(--ig-space-6); flex-wrap:wrap; }
.b2stat b{ display:block; font-family:var(--ig-font-display); font-weight:var(--ig-fw-bold); font-size:clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height:1; letter-spacing:var(--ig-tracking-tight); color:var(--ig-gold-400); }
.b2stat span{ display:block; margin-top:var(--ig-space-2); font-size:var(--ig-text-sm); color:rgba(255,255,255,.85); max-width:16ch; }

/* Card canais (claro) */
.b2card--canais{ background:var(--pf-tile); color:var(--ig-navy-900); padding:var(--ig-space-5); display:flex; flex-direction:column; justify-content:space-between; gap:var(--ig-space-4); }
.b2card__badges{ display:flex; flex-wrap:wrap; gap:var(--ig-space-2); margin-bottom:var(--ig-space-3); }
.b2card__badges span{ font-family:var(--ig-font-mono); font-size:var(--ig-text-xs); letter-spacing:.04em; padding:var(--ig-space-1) var(--ig-space-2); border:1px solid var(--ig-navy-200); border-radius:var(--ig-radius-full); color:var(--ig-navy-700); }
.b2card__lead{ margin:0; font-size:.95rem; line-height:1.5; color:var(--ig-navy-800); }
.b2card__big{ display:flex; align-items:baseline; gap:var(--ig-space-3); }
.b2card__big b{ font-family:var(--ig-font-display); font-weight:var(--ig-fw-bold); font-size:clamp(2rem, 1.4rem + 1.6vw, 2.75rem); line-height:1; letter-spacing:var(--ig-tracking-tight); color:var(--ig-navy-900); }
.b2card__big span{ font-size:var(--ig-text-sm); color:var(--ig-text-muted); max-width:12ch; }

/* Card criativos (listrado) */
.b2card--criativos{
  background-color:var(--pf-bg); padding:var(--ig-space-5); display:flex; align-items:flex-end;
  background-image:repeating-linear-gradient(45deg, rgba(14,39,84,.05) 0, rgba(14,39,84,.05) 1px, transparent 1px, transparent 9px);
}
.b2card__tile{ background:var(--ig-white); border-radius:var(--pf-radius); padding:var(--ig-space-4); display:flex; align-items:center; gap:var(--ig-space-4); box-shadow:var(--ig-shadow-sm); }
.b2card__ic{ flex:none; width:3rem; height:3rem; color:var(--ig-gold-600); }
.b2card__ic svg{ width:100%; height:100%; }
.b2card__label{ display:block; margin-top:var(--ig-space-2); font-family:var(--ig-font-mono); font-size:var(--ig-text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--ig-navy-400); }

/* Card escuro */
.b2card--dark{ background:var(--ig-navy-900); color:var(--ig-white); padding:var(--ig-space-6); display:flex; flex-direction:column; justify-content:space-between; gap:var(--ig-space-6); }
.b2card__darkh{ margin:0; font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi); font-size:var(--ig-text-h3); line-height:1.15; letter-spacing:var(--ig-tracking-snug); color:var(--ig-text-on-dark-muted); max-width:20ch; }
.b2card__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--ig-space-4); flex-wrap:wrap; }
.b2card__tags{ display:flex; flex-wrap:wrap; gap:var(--ig-space-2); }
.b2card__tags span{ font-family:var(--ig-font-mono); font-size:var(--ig-text-xs); letter-spacing:.06em; text-transform:uppercase; padding:var(--ig-space-1) var(--ig-space-2); background:rgba(255,255,255,.12); border-radius:var(--ig-radius-sm); color:rgba(255,255,255,.88); }
.b2card__cta{
  display:inline-flex; align-items:center; gap:var(--ig-space-2); flex:none;
  font-family:var(--ig-font-text); font-weight:var(--ig-fw-semi); font-size:var(--ig-text-sm);
  color:var(--ig-gold-400); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:color var(--ig-dur-base) var(--ig-ease), gap var(--ig-dur-base) var(--ig-ease);
}
.b2card__cta:hover{ color:var(--ig-white); gap:var(--ig-space-3); }

/* Tablet: 2 colunas; grande em cima full-width; escuro full-width embaixo. */
@media (max-width:991px){
  .bento2__grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .b2card--hero{ grid-column:1 / 3; grid-row:auto; min-height:24rem; }
  .b2card--canais{ grid-column:1; grid-row:auto; min-height:17rem; }
  .b2card--criativos{ grid-column:2; grid-row:auto; min-height:17rem; }
  .b2card--dark{ grid-column:1 / 3; grid-row:auto; }
}
/* Mobile: uma coluna. */
@media (max-width:600px){
  .bento2__grid{ grid-template-columns:1fr; }
  .b2card--hero{ grid-column:1; min-height:22rem; }
  .b2card--canais, .b2card--criativos, .b2card--dark{ grid-column:1; }
}

/* ==========================================================================
   SEÇÃO 04 — Serviços (cópia fiel do padrão .srv-row da Millenium)
   Bloco navy escuro; cada linha = título+seta | descrição+tags | foto. Hover
   clareia a linha, preenche/desloca a seta e dá zoom na foto. Adaptado aos
   tokens navy+dourado do ignite.
   ========================================================================== */
.srv{ padding-block:var(--ig-section-y); background:var(--ig-navy-900); color:var(--ig-white); }
.srv-head{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--ig-space-4); max-width:48rem; margin:0 auto clamp(3rem, 5vw, 5rem);
}
.srv-kicker{
  display:inline-flex; align-items:center; gap:var(--ig-space-2);
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ig-gold-400);
}
.srv-kicker svg{ width:18px; height:18px; flex:none; }
.srv-title{
  margin:0; max-width:24ch; font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi);
  font-size:var(--pf-h2); line-height:1.12; letter-spacing:var(--ig-tracking-tight);
  color:var(--ig-white); text-wrap:balance;
}
.srv-head-cta{ margin-top:var(--ig-space-2); }

.srv-list{ border-top:1px solid rgba(255,255,255,.12); }
.srv-row{
  position:relative; display:grid;
  grid-template-columns:1fr 1.05fr 1.12fr; grid-template-areas:"head mid media";
  align-items:stretch; min-height:232px; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.12);
  text-decoration:none; color:var(--ig-white);
  transition:background var(--ig-dur-base) var(--ig-ease);
}
.srv-row:hover{ background:rgba(255,255,255,.04); color:var(--ig-white); }
.srv-row:focus-visible{ outline:2px solid var(--ig-gold-400); outline-offset:-4px; }
.srv-row-head, .srv-row-mid{
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--ig-space-6);
  padding:var(--ig-space-6); min-width:0; border-right:1px solid rgba(255,255,255,.12);
}
.srv-row-head{ grid-area:head; }
.srv-row-mid{ grid-area:mid; }
.srv-row-title{
  margin:0; font-family:var(--ig-font-display); font-weight:var(--ig-fw-semi);
  font-size:var(--ig-text-h3); line-height:var(--ig-lh-snug);
  letter-spacing:var(--ig-tracking-snug); color:var(--ig-white); max-width:14ch;
}
.srv-row-arrow{
  flex:none; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; color:var(--ig-white);
  transition:background-color var(--ig-dur-base) var(--ig-ease),
             color var(--ig-dur-base) var(--ig-ease),
             border-color var(--ig-dur-base) var(--ig-ease),
             transform var(--ig-dur-base) var(--ig-ease);
}
.srv-row:hover .srv-row-arrow{
  background:var(--ig-gold-400); color:var(--ig-navy-900); border-color:var(--ig-gold-400);
  transform:translate(3px, -3px);
}
.srv-row-desc{ margin:0; font-size:var(--ig-text-base); line-height:1.55; color:var(--ig-text-on-dark-muted); max-width:42ch; }
.srv-row-tags{ display:flex; flex-wrap:wrap; gap:var(--ig-space-2); }
.srv-tag{
  display:inline-flex; align-items:center; padding:var(--ig-space-1) var(--ig-space-3);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--ig-radius-full);
  font-family:var(--ig-font-mono); font-size:var(--ig-text-xs); letter-spacing:.06em; color:var(--ig-white);
}
.srv-row-media{ grid-area:media; position:relative; overflow:hidden; margin:var(--ig-space-5); border-radius:var(--pf-radius); background:var(--ig-navy-800); }
.srv-row-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--ig-dur-slow) var(--ig-ease);
}
.srv-row:hover .srv-row-media img{ transform:scale(1.05); }
.srv-row-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,23,49,.25), transparent 40%); }

@media (max-width:1023px){
  .srv-row{ grid-template-columns:1fr 1fr; grid-template-areas:"media media" "head mid"; }
  .srv-row-media{ min-height:200px; }
  .srv-row-mid{ border-right:0; }
}
@media (max-width:639px){
  .srv-row{ grid-template-columns:1fr; grid-template-areas:"media" "head" "mid"; min-height:0; }
  .srv-row-media{ min-height:176px; }
  .srv-row-head{ flex-direction:row; align-items:center; justify-content:space-between; border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .srv-row-title{ max-width:none; }
}

/* ==========================================================================
   SEÇÃO 07 — Prova social: mural de prints (marquee 2 fileiras)
   Fundo navy pros prints (claros) saltarem. Duas fileiras rolando em sentidos
   opostos, pausa no hover. Sem movimento reduzido: fileiras viram scroll manual.
   ========================================================================== */
/* Fundo curto embaixo: a nota é a última linha — o respiro da fronteira fica
   dividido com a meia-entrada da seção seguinte (.ig-section--meia). */
.mural{ padding-block:var(--ig-section-y) clamp(2.5rem, 2rem + 2vw, 3.5rem); background:var(--ig-navy-900); color:var(--ig-white); overflow:hidden; }
.mural .sec-head h2{ color:var(--ig-white); }
.mural .sec-head p{ color:var(--ig-text-on-dark-muted); }
.mural .tag{ color:var(--ig-gold-400); }

.mural__wall{
  display:flex; flex-direction:column; gap:var(--ig-space-4);
  margin-top:clamp(2rem, 1.4rem + 2vw, 3.25rem);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mural__row{ display:flex; width:max-content; animation:mural-scroll 100s linear infinite; }
.mural__row--rev{ animation-direction:reverse; }
.mural__row:hover{ animation-play-state:paused; }
.mural__group{ display:flex; gap:var(--ig-space-5); padding-right:var(--ig-space-5); flex:none; }
@keyframes mural-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.pshot{
  flex:none; width:300px; margin:0;
  aspect-ratio:9 / 16;   /* prints cortados (sem barras pretas) são ~480x853 */
  border-radius:var(--pf-radius); overflow:hidden;
  background:var(--ig-navy-800); box-shadow:var(--ig-shadow-lg);
}
.pshot img{ width:100%; height:100%; object-fit:cover; display:block; }

.mural__nota{
  margin:clamp(2rem, 1.4rem + 2vw, 3rem) auto 0; max-width:none; text-align:center;
  font-size:var(--ig-text-sm); color:var(--ig-text-on-dark-muted);
}

@media (max-width:600px){ .pshot{ width:250px; } }

@media (prefers-reduced-motion: reduce){
  .mural__row{ animation:none; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .mural__group[aria-hidden]{ display:none; }
  .mural__wall{ -webkit-mask-image:none; mask-image:none; }
}