/* ============================================================
   AGÊNCIA MANSIO — sistema de componentes
   Carregado DEPOIS de tailwind.css (overrides customizados vencem).

   CONCEITO — grade institucional em azul de marca
   O site é claro e organizado como um documento de projeto: coluna de rótulo,
   painéis alinhados, tabela e linha do tempo. O azul não é só o botão, ele é
   superfície: painel da oferta, faixa de indicadores, fechamento e rodapé.
   Assim a página fica reconhecível a três metros de distância sem depender de
   foto, ilustração ou depoimento, que é o que a agência ainda não tem.

   O azul cheio aparece só em blocos curtos e nunca sob texto corrido: sob
   leitura longa ele cansa e derruba a taxa de rolagem.

   Identidade: Archivo (títulos, grotesca estreita) · Jost (texto, geométrica) ·
   azul #1B47D0 sobre branco, azul profundo #0A1F5C nas placas.
   ============================================================ */

:root{
  /* --- superfícies --- */
  --paper:    #FFFFFF;   /* base */
  --wash:     #F2F6FE;   /* azul lavado: alterna as seções, no lugar do cinza */
  --wash-2:   #E4EBFC;   /* preenchimento um pouco mais firme */
  --panel:    #FFFFFF;   /* painel elevado: cards, tabela */

  /* --- tinta --- */
  --ink:      #131722;   /* texto primário */
  --ink-2:    #464E60;   /* texto secundário, 8.4:1 sobre branco */
  --muted:    #6A7285;   /* etiquetas e legendas, 5.4:1 */
  --line:     #DDE3F0;
  --line-2:   #EAEFF9;

  /* --- marca --- */
  --blue:      #1B47D0;  /* ação; 7.3:1 com texto branco */
  --blue-2:    #12329B;  /* hover/ativo */
  --blue-deep: #0A1F5C;  /* placa profunda: indicadores, CTA final, rodapé */
  --blue-soft: #8FA6FF;  /* acento sobre placa escura */
  --green:     #1E7A46;  /* WhatsApp */
  --white:     #FFFFFF;

  /* Nomes herdados do sistema anterior, mantidos porque ainda aparecem em
     alguns pontos do HTML e nos scripts. Apontam para os tokens novos. */
  --sheet:    var(--paper);
  --sheet-2:  var(--wash);
  --plate:    var(--blue-deep);
  --graphite: var(--ink);
  --pencil:   var(--ink-2);
  --rule:     var(--line);
  --rule-2:   var(--line-2);
  --blue-wash:var(--wash);

  --maxw: 1200px;
  --pad: clamp(20px, 4.5vw, 56px);
  --fs-display: clamp(2.6rem, 5.6vw, 4.4rem);
  --fs-sec: clamp(2rem, 3.8vw, 3rem);
  --r: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 74px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
html.is-locked{ overflow:hidden; }

body{
  font-family:"Jost", system-ui, sans-serif;
  background:var(--paper); color:var(--ink);
  line-height:1.68; font-size:1.0625rem; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--blue); color:var(--white); padding:.8em 1.4em; font-weight:500;
}
.skip-link:focus{ left:8px; top:8px; }

:where(a, button, summary, input, select, textarea):focus-visible{
  outline:2px solid var(--blue); outline-offset:3px; border-radius:var(--r);
}

/* ============================================================
   DISPOSITIVOS TIPOGRÁFICOS
   ============================================================ */
/* Etiqueta de seção: caixa alta espaçada com um fio curto antes.
   Não é monoespaçada de propósito: etiqueta em mono virou marca registrada de
   site gerado por IA, e foi justamente o que o cliente reprovou. */
.eyebrow{
  font-family:"Jost", sans-serif;
  font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  font-size:.75rem; color:var(--blue);
  display:inline-flex; align-items:center; gap:.65rem;
}
.eyebrow::before{ content:""; width:20px; height:2px; background:currentColor; flex:none; }
.eyebrow--pencil{ color:var(--muted); }
.eyebrow--red{ color:var(--muted); }   /* o vermelho de revisão saiu do sistema */
.eyebrow--light{ color:var(--blue-soft); }

.sec-head{ max-width:720px; margin-bottom:clamp(28px,4vw,44px); }
.sec-title{
  font-family:"Archivo", system-ui, sans-serif; font-weight:600;
  line-height:1.05; letter-spacing:-.03em; font-size:var(--fs-sec);
  color:var(--ink); margin:1rem 0 .9rem; text-wrap:balance;
}
.sec-title--light{ color:var(--white); }
.o-line{ color:var(--blue); }
.o-line--red{ color:var(--blue); }
.sec-sub{ font-size:1.0625rem; color:var(--ink-2); max-width:56ch; }
.sec-sub--light{ color:rgba(255,255,255,.78); }
.mark{ color:var(--blue); }
.section--plate .mark, .sec-title--light .mark{ color:var(--blue-soft); }

/* Linha de redução de fricção. Herda o nome do sistema anterior, mas perdeu os
   ticks de cota: agora é só uma legenda discreta com fio de marca. O rótulo
   continua obrigado a carregar informação real (tempo, custo, prazo). */
.dim{
  display:flex; align-items:flex-start; gap:.75rem;
  font-family:"Jost", sans-serif;
  font-size:.75rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0;
}
.dim::before{ content:""; width:20px; height:2px; background:var(--blue); flex:none; margin-top:.55em; }
/* Precisa poder quebrar: no celular o rótulo inteiro não cabe em uma linha e,
   travado em flex:none, empurrava a página para o lado. */
.dim > span{ flex:1 1 auto; min-width:0; }
.dim--blue{ color:var(--blue); }
.dim--red{ color:var(--muted); }
.dim--light{ color:rgba(255,255,255,.6); }
.dim--light::before{ background:var(--blue-soft); }
.dim--start::before{ display:none; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  --bg:var(--blue); --bd:var(--blue); --fg:var(--white);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:"Jost", sans-serif; font-weight:500; font-size:1rem; letter-spacing:.02em;
  padding:1.05em 1.85em; min-height:54px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:var(--r); cursor:pointer; text-align:center;
  transition:background .18s, border-color .18s, color .18s;
}
.btn:hover{ --bg:var(--blue-2); --bd:var(--blue-2); }
.btn--lg{ padding:1.15em 2.1em; font-size:1.0625rem; min-height:58px; }
.btn--sm{ padding:.72em 1.2em; font-size:.9375rem; min-height:44px; }
.btn--block{ width:100%; }

/* Secundário sobre papel. */
.btn--ghost{ --bg:transparent; --bd:var(--line); --fg:var(--blue); }
.btn--ghost:hover{ --bg:var(--wash); --bd:var(--blue); --fg:var(--blue); }

.btn--ghost-light{ --bg:transparent; --bd:var(--line); --fg:var(--ink); }
.btn--ghost-light:hover{ --bg:var(--wash); --bd:var(--blue); --fg:var(--blue); }

/* Sobre superfície azul o primário inverte: branco com texto azul. */
.section--plate .btn, .offer .btn, .footer .btn{ --bg:var(--white); --bd:var(--white); --fg:var(--blue); }
.section--plate .btn:hover, .offer .btn:hover, .footer .btn:hover{ --bg:var(--wash-2); --bd:var(--wash-2); --fg:var(--blue-2); }
.section--plate .btn--ghost, .footer .btn--ghost-light{
  --bg:transparent; --bd:rgba(255,255,255,.35); --fg:var(--white);
}
.section--plate .btn--ghost:hover, .footer .btn--ghost-light:hover{
  --bg:var(--white); --bd:var(--white); --fg:var(--blue);
}

.btn--wa{ --bg:var(--green); --bd:var(--green); --fg:var(--white); }
.btn--wa:hover{ --bg:#155C34; --bd:#155C34; }
.btn[aria-busy="true"]{ opacity:.7; cursor:progress; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  min-height:var(--nav-h); padding:.7rem var(--pad);
  background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.nav.is-stuck{ border-color:var(--line); }
body[data-nav-solid] .nav{ background:rgba(255,255,255,.98); border-color:var(--line); }

.nav__brand{ display:flex; align-items:center; gap:.55rem; color:var(--ink); flex:none; }
.logo-mark{ color:var(--blue); display:flex; }
.nav__name{
  font-family:"Archivo",sans-serif; font-weight:400; letter-spacing:-.025em;
  font-size:1.0625rem; line-height:1; color:var(--muted); text-transform:none;
}
.nav__name strong{ color:var(--ink); font-weight:600; margin-left:.3em; }
.nav__name--lg{ font-size:1.35rem; }

.nav__links{ display:flex; gap:1.6rem; margin-left:auto; }
.nav__links a{
  font-family:"Jost", sans-serif;
  font-weight:400; font-size:.9375rem; letter-spacing:.01em;
  color:var(--ink-2); position:relative; padding:.35em 0; transition:color .18s; white-space:nowrap;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--blue); transition:width .22s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--blue); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ width:100%; }
.nav__cta{ flex:none; }

.nav__toggle{
  display:none; margin-left:auto; width:44px; height:44px; flex:none;
  background:transparent; border:0; cursor:pointer; padding:11px 10px;
  flex-direction:column; justify-content:space-between;
}
.nav__toggle span{ display:block; height:2px; width:100%; background:var(--blue); border-radius:2px;
  transition:transform .22s var(--ease), opacity .18s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

.nav__mobile{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:var(--paper); border-top:1px solid var(--line);
  padding:1rem var(--pad) 1.4rem; flex-direction:column; gap:0;
  max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
}
.nav__mobile a{
  font-family:"Archivo",sans-serif; font-weight:600; letter-spacing:-.02em;
  color:var(--ink); font-size:1.125rem; text-transform:none;
  padding:.95em 0; border-bottom:1px solid var(--line-2);
}
.nav__mobile a[aria-current="page"]{ color:var(--blue); }
.nav__mobile-cta{
  margin-top:1.2rem; border-bottom:0 !important; color:var(--white) !important;
  text-align:center; font-family:"Jost",sans-serif !important;
  font-weight:500 !important; font-size:1rem !important; letter-spacing:.02em !important;
}
.nav__mobile.is-open{ display:flex; }

@media (max-width:1040px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
}

/* CTA fixo no mobile: barra cheia na borda inferior, dentro do alcance do polegar. */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:none; align-items:center; justify-content:center; text-align:center;
  background:var(--blue); color:var(--white);
  font-family:"Jost",sans-serif; font-weight:500; font-size:1rem; letter-spacing:.02em;
  padding:1em 1.2em calc(1em + env(safe-area-inset-bottom));
  transform:translateY(140%); transition:transform .32s var(--ease);
}
.sticky-cta.is-visible{ transform:none; }
@media (max-width:1040px){ .sticky-cta{ display:flex; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:calc(var(--nav-h) + clamp(34px,6vh,64px)) var(--pad) clamp(40px,6vh,68px);
  background:var(--paper);
}
.hero__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; }
/* No desktop o painel da oferta ocupa a coluna direita inteira. No mobile ele
   sobe para logo abaixo da promessa: os bullets são reforço, não pré-requisito
   para converter, então descem para depois do painel. */
.hero__grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  grid-template-areas:"intro form" "bullets form";
  align-content:start;
  column-gap:clamp(2rem,4.5vw,3.6rem); row-gap:0;
  align-items:start;
}
.hero__intro{ grid-area:intro; }
.hero__form{ grid-area:form; }
.hero__reforco{ grid-area:bullets; }
@media (max-width:980px){
  .hero__grid{
    grid-template-columns:1fr;
    grid-template-areas:"intro" "form" "bullets";
    row-gap:1.8rem;
  }
}

.hero__qualifier{
  display:block;
  font-family:"Jost", sans-serif;
  font-size:.75rem; line-height:1.6; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); border-left:2px solid var(--blue);
  padding:.15em 0 .15em .8em; margin-bottom:1.4rem;
}
.hero__qualifier b{ color:var(--blue); font-weight:500; }

.hero__title{
  font-family:"Archivo",sans-serif; font-weight:600; text-transform:none;
  line-height:1.04; letter-spacing:-.032em; font-size:var(--fs-display);
  color:var(--ink); margin:0 0 1.2rem; text-wrap:balance;
}
.hero__lead{ font-size:clamp(1.0625rem,1.6vw,1.25rem); color:var(--ink-2); margin-bottom:1.6rem; max-width:48ch; }
.hero__lead strong{ color:var(--ink); font-weight:500; }

.hero__bullets{ list-style:none; display:grid; gap:.75rem; margin:1.6rem 0 0; padding:1.5rem 0 0; border-top:2px solid var(--blue); }
.hero__bullets li{
  display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start;
  color:var(--ink-2); font-size:.9375rem;
}
.hero__bullets li::before{
  content:""; width:7px; height:7px; margin-top:.62em; flex:none;
  border-radius:50%; background:var(--blue);
}
@media (max-width:980px){ .hero__bullets{ margin-top:0; } }

/* ---------- PAINEL DE OFERTA ----------
   Ocupa o lugar que era do formulário no hero e nos cabeçalhos de persona.
   Não captura nada: diz o que o clique entrega e leva ao Typebot. É o único
   bloco azul cheio acima da dobra, e por isso concentra o CTA principal. */
.offer{
  background:var(--blue); color:var(--white);
  border-radius:var(--r); padding:clamp(1.6rem,2.8vw,2.15rem);
  position:relative;
}
.offer .eyebrow{ color:rgba(255,255,255,.78); }
.offer .eyebrow::before{ background:rgba(255,255,255,.5); }
.offer__title{
  font-family:"Archivo",sans-serif; font-weight:600; text-transform:none;
  font-size:1.5rem; line-height:1.1; letter-spacing:-.025em;
  color:var(--white); margin:.85rem 0 1.25rem;
}
.offer__list{ list-style:none; display:grid; gap:.9rem; padding:0; margin:0 0 1.85rem; }
.offer__list li{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start;
  color:rgba(255,255,255,.9); font-size:.9375rem; line-height:1.5;
}
.offer__list li::before{
  content:""; width:18px; height:18px; margin-top:.2em; border-radius:50%; flex:none;
  background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}
.offer__foot{
  font-family:"Jost", sans-serif;
  font-size:.8125rem; letter-spacing:.02em; text-transform:none;
  color:rgba(255,255,255,.72); margin-top:.9rem; text-align:center;
}

/* ============================================================
   SEÇÕES
   ============================================================ */
.section{ padding:clamp(60px,8vw,110px) 0; position:relative; }
.section--sheet{ background:var(--paper); }
.section--sheet-2{ background:var(--wash); }
.section--panel{ background:var(--paper); }
.section--rule{ border-top:1px solid var(--line); }

/* Placa profunda — tudo que entra aqui precisa inverter, senão herda cor de
   papel. Vale como rede de segurança: qualquer componente colocado numa placa
   fica legível sem precisar de modificador próprio no HTML. */
.section--plate{ background:var(--blue-deep); color:rgba(255,255,255,.78); }
.section--plate .sec-title,
.section--plate .rev__col h3,
.section--plate .faq__item summary{ color:var(--white); }
.section--plate .eyebrow, .section--plate .o-line, .section--plate .o-line--red{ color:var(--blue-soft); }
.section--plate .sec-sub, .section--plate .note, .section--plate .logos__title{ color:rgba(255,255,255,.7); }
.section--plate .cmp-wrap{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.04); }
.section--plate .cmp caption, .section--plate .cmp td{ color:rgba(255,255,255,.72); }
.section--plate .cmp thead th{ color:var(--white); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.section--plate .cmp tbody th{ color:var(--white); }
.section--plate .cmp th, .section--plate .cmp td{ border-color:rgba(255,255,255,.12); }
.section--plate .cmp .is-best{ color:var(--white); background:rgba(143,166,255,.14); }
.section--plate .faq__item{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); }
.section--plate .faq__item[open]{ border-color:var(--blue-soft); }
.section--plate .faq__answer{ color:rgba(255,255,255,.72); }
.section--plate .faq__item summary::before,
.section--plate .faq__item summary::after{ background:var(--blue-soft); }
.section--plate .pain li{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.72); }
.section--plate .pain li strong{ color:var(--white); }
.section--plate .steps__item{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); }
.section--plate .steps__item:hover{ background:rgba(255,255,255,.09); border-color:var(--blue-soft); }
.section--plate .steps__item h3{ color:var(--white); }
.section--plate .steps__item p{ color:rgba(255,255,255,.72); }
.section--plate .steps__no{ background:var(--blue-soft); color:var(--blue-deep); }
.section--plate .rev__col{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); }
.section--plate .rev__list li{ color:rgba(255,255,255,.72); }
.section--plate .rev__list li b{ color:var(--white); }
.section--plate .logos__grid li{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.8); }
.section--plate .prose{ color:rgba(255,255,255,.72); }
.section--plate .prose h2, .section--plate .prose h3, .section--plate .prose strong{ color:var(--white); }
.section--plate .prose a, .section--plate .answer p a{ color:var(--blue-soft); }
.section--plate .card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); }
.section--plate .card:hover{ background:rgba(255,255,255,.09); border-color:var(--blue-soft); }
.section--plate .card h3{ color:var(--white); }
.section--plate .card p{ color:rgba(255,255,255,.72); }
.section--plate .card__tag, .section--plate .card__icon{ color:var(--blue-soft); }
.section--plate .card__icon{ background:rgba(255,255,255,.08); }
.section--plate .counter__item{ background:rgba(255,255,255,.05); }
.section--plate .answer{ background:rgba(255,255,255,.06); border-color:var(--blue-soft); }
.section--plate .answer p{ color:rgba(255,255,255,.85); }

/* ---------- BREADCRUMBS ---------- */
.crumbs{ padding-top:calc(var(--nav-h) + 22px); }
.crumbs ol{
  list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; padding:0; margin:0;
  font-family:"Jost", sans-serif; font-size:.8125rem;
  letter-spacing:.02em; color:var(--muted);
}
.crumbs li::after{ content:"/"; margin-left:.45rem; color:var(--line); }
.crumbs li:last-child::after{ content:""; }
.crumbs a:hover{ color:var(--blue); }
.crumbs [aria-current]{ color:var(--ink); }

/* ---------- CABEÇALHO DE PÁGINA INTERNA ---------- */
.phead{ padding:clamp(22px,3vw,34px) 0 clamp(44px,6vw,72px); background:var(--paper); }
/* Desktop: promessa e bloco resposta-primeiro empilhados à esquerda, painel da
   oferta ocupando a coluna direita inteira.
   Mobile: promessa → oferta → bloco resposta-primeiro. O H1 continua sendo o
   primeiro conteúdo da página; só o texto de apoio desce. */
.phead__grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  grid-template-areas:"intro form" "answer form";
  align-content:start;
  column-gap:clamp(2rem,4.5vw,3.4rem); row-gap:0;
  align-items:start;
}
.phead__intro{ grid-area:intro; min-width:0; }
.phead__answer{ grid-area:answer; min-width:0; }
.phead__form{ grid-area:form; }
@media (max-width:980px){
  .phead__grid{
    grid-template-columns:1fr;
    grid-template-areas:"intro" "form" "answer";
    row-gap:1.6rem;
  }
  .phead__answer .answer{ margin-top:0; }
}
.phead__title{
  font-family:"Archivo",sans-serif; font-weight:600; text-transform:none; color:var(--ink);
  font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05; letter-spacing:-.032em;
  margin:1rem 0 1rem; max-width:18ch; text-wrap:balance;
}
.phead__title em{ font-style:normal; color:var(--blue); }
.phead__lead{ font-size:clamp(1.0625rem,1.6vw,1.1875rem); color:var(--ink-2); max-width:52ch; }

/* ---------- BLOCO RESPOSTA-PRIMEIRO (citável por IA) ---------- */
.answer{
  border-left:3px solid var(--blue); background:var(--wash);
  padding:1.15rem 1.35rem; border-radius:0 var(--r) var(--r) 0; margin:1.7rem 0 0; max-width:74ch;
}
.answer p{ color:var(--ink); font-size:1.0625rem; margin:0; }
.answer strong{ font-weight:500; }

/* ============================================================
   CARDS
   ============================================================ */
/* Card com contorno próprio e espaçamento real, não grade de fio com gap de 1px:
   quando a contagem de cards não fecha a linha, a grade de fio deixa uma célula
   cinza vazia na tela. Com contorno por card, a sobra é só espaço. */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(1rem,2vw,1.5rem);
}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.75rem 1.6rem; display:flex; flex-direction:column;
  transition:background .2s, border-color .2s;
}
.card:hover{ background:var(--wash); border-color:var(--blue); }
.card__tag{
  font-family:"Jost", sans-serif; font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:.75rem; display:block;
}
.card h3{
  font-family:"Archivo",sans-serif; font-weight:600; text-transform:none;
  font-size:1.25rem; letter-spacing:-.025em; color:var(--ink); line-height:1.15; margin-bottom:.5rem;
}
.card p{ color:var(--ink-2); font-size:.9375rem; margin:0; }
.card .btn{ align-self:flex-start; margin-top:1.35rem; }
.card__icon{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:var(--wash); color:var(--blue); margin-bottom:1rem;
}
/* Card em destaque (usado nas páginas de persona). */
.card--dark{ background:var(--blue-deep); }
.card--dark h3{ color:var(--white); }
.card--dark p{ color:rgba(255,255,255,.75); }
.card--dark .card__tag, .card--dark .card__icon{ color:var(--blue-soft); }
.card--dark .card__icon{ background:rgba(255,255,255,.1); }
.card--dark:hover{ background:#0D2A73; border-color:var(--blue-soft); }
/* Botão dentro do card profundo precisa inverter, senão fica azul sobre azul. */
.card--dark .btn{ --bg:var(--white); --bd:var(--white); --fg:var(--blue); }
.card--dark .btn:hover{ --bg:var(--wash-2); --bd:var(--wash-2); --fg:var(--blue-2); }
.card--dark .btn--ghost{ --bg:transparent; --bd:rgba(255,255,255,.4); --fg:var(--white); }
.card--dark .btn--ghost:hover{ --bg:var(--white); --bd:var(--white); --fg:var(--blue); }
.card--dark .btn--wa{ --bg:var(--green); --bd:var(--green); --fg:var(--white); }
.card--dark .btn--wa:hover{ --bg:#155C34; --bd:#155C34; --fg:var(--white); }

/* ---------- DORES ---------- */
.pain{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(1rem,2vw,1.5rem); padding:0; margin:0;
}
.pain li{
  list-style:none; background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem 1.5rem; color:var(--ink-2); font-size:.9375rem;
}
.pain li strong{
  display:block; font-family:"Archivo",sans-serif; font-weight:600; text-transform:none;
  color:var(--ink); font-size:1.1875rem; line-height:1.15; margin-bottom:.5rem; letter-spacing:-.025em;
}

/* ============================================================
   MÉTODO — aqui a numeração é legítima: as fases são uma sequência,
   e a ordem carrega a informação (pular etapa é o erro que a seção nomeia).
   ============================================================ */
.steps{ display:grid; gap:.75rem; }
.steps__item{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.4rem,2.6vw,1.9rem);
  transition:background .2s, border-color .2s;
}
.steps__item:hover{ background:var(--wash); border-color:var(--blue); }
.steps__no{
  font-family:"Archivo",sans-serif; font-weight:600;
  font-size:.9375rem; letter-spacing:-.02em; line-height:1;
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; padding:0;
  background:var(--blue); color:var(--white); border:0;
}
.steps__item h3{
  font-family:"Archivo",sans-serif; font-weight:600; text-transform:none;
  font-size:1.1875rem; letter-spacing:-.025em; color:var(--ink); margin-bottom:.4rem; line-height:1.15;
}
.steps__item p{ color:var(--ink-2); font-size:.9375rem; margin:0; }
/* Lista de etapas sequenciais (dentro de fases do método). */
.steps__list{ list-style:none; padding:0; margin:.9rem 0 0; display:grid; gap:.5rem; }
.steps__list li{
  display:grid; grid-template-columns:auto 1fr; gap:.6rem;
  color:var(--ink-2); font-size:.9375rem;
}
.steps__list li::before{ content:"→"; color:var(--blue); font-weight:500; }
.section--plate .steps__list li{ color:rgba(255,255,255,.72); }
.section--plate .steps__list li::before{ color:var(--blue-soft); }
@media (max-width:560px){ .steps__item{ grid-template-columns:1fr; gap:.8rem; } .steps__no{ justify-self:start; } }

/* ============================================================
   TABELA COMPARATIVA (formato de alta extração por LLM)
   ============================================================ */
.cmp-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.5rem 0; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
.cmp{ width:100%; min-width:620px; border-collapse:collapse; font-size:.9375rem; }
.cmp caption{
  text-align:left; padding:1.1rem 1.25rem .4rem; color:var(--muted);
  font-family:"Jost", sans-serif; font-size:.8125rem; letter-spacing:.02em;
}
.cmp th, .cmp td{ padding:1rem 1.25rem; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top; }
.cmp thead th{
  font-family:"Jost", sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; font-size:.6875rem;
  color:rgba(255,255,255,.75); background:var(--blue); white-space:nowrap; border-bottom:0;
}
.cmp thead th.is-best{ color:var(--white); background:var(--blue-deep); }
.cmp tbody th{ font-weight:500; color:var(--ink); }
.cmp td{ color:var(--ink-2); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td{ border-bottom:0; }
.cmp tbody .is-best{ color:var(--ink); background:var(--wash); }

/* ============================================================
   BLOCO DE REVISÃO — segunda assinatura.
   A agência não tem case autorizado. Em vez de esconder, declara em duas
   colunas: o que já é verificável e o que ainda não existe. É o diferencial
   honesto contra o depoimento genérico.
   ============================================================ */
.rev{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.5rem); }
@media (max-width:760px){ .rev{ grid-template-columns:1fr; } }
.rev__col{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.5rem,3vw,2rem); }
.rev__col--yes{ background:var(--wash); }
.rev__tag{
  font-family:"Jost", sans-serif; font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; display:block; margin-bottom:.7rem;
}
.rev__col--yes .rev__tag{ color:var(--blue); }
.rev__col--no .rev__tag{ color:var(--muted); }
.rev__col h3{
  font-family:"Archivo",sans-serif; font-weight:600; text-transform:none;
  font-size:1.25rem; letter-spacing:-.025em; color:var(--ink); margin-bottom:1.15rem; line-height:1.1;
}
.rev__list{ list-style:none; padding:0; margin:0; display:grid; gap:.85rem; }
.rev__list li{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; color:var(--ink-2); font-size:.9375rem; }
.rev__list li b{ color:var(--ink); font-weight:500; }
.rev__list li::before{
  content:""; width:18px; height:18px; margin-top:.2em; border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}
.rev__col--no .rev__list li::before{
  background:var(--wash-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%236A7285' stroke-width='3' stroke-linecap='round' d='M6 12h12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ============================================================
   NÚMEROS VERIFICÁVEIS — faixa na placa profunda
   ============================================================ */
.counter{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  background:var(--blue-deep); border-radius:var(--r); overflow:hidden;
}
@media (max-width:760px){ .counter{ grid-template-columns:repeat(2,1fr); } }
.counter__item{ padding:clamp(1.4rem,2.6vw,2rem) clamp(1rem,2vw,1.6rem); }
.counter__item + .counter__item{ border-left:1px solid rgba(255,255,255,.16); }
@media (max-width:760px){
  .counter__item:nth-child(3){ border-left:0; }
  .counter__item:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.16); }
}
.counter__num{
  display:flex; align-items:baseline; gap:.08em;
  font-family:"Archivo",sans-serif; font-weight:600; letter-spacing:-.035em;
  font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--white); line-height:1;
}
.counter__num i{ color:var(--blue-soft); font-style:normal; font-size:.62em; }
.counter__num i:empty{ display:none; }
.counter__label{
  display:block; font-family:"Jost", sans-serif;
  font-weight:400; text-transform:none; letter-spacing:.01em;
  font-size:.875rem; color:rgba(255,255,255,.66); margin-top:.55rem;
}

/* ---------- FUNDADOR ---------- */
.spec{ display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.spec__photo img{ border:1px solid var(--line); border-radius:var(--r); width:100%; object-fit:cover; background:var(--wash); }
.spec__bio{ font-size:1.0625rem; color:var(--ink-2); margin:.2rem 0 1.4rem; max-width:52ch; }
.spec__stats{ list-style:none; display:grid; gap:.75rem; padding:0; margin:0; }
.spec__stats li{ font-size:.9375rem; color:var(--ink-2); display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:baseline; }
.spec__stats li span{
  font-family:"Jost", sans-serif; font-weight:500; font-size:.8125rem; letter-spacing:.02em;
  color:var(--blue); background:var(--wash); border:1px solid var(--line);
  border-radius:999px; padding:.3em .8em; line-height:1; white-space:nowrap;
}
@media (max-width:820px){ .spec{ grid-template-columns:1fr; } .spec__photo{ max-width:340px; } }

/* ---------- FERRAMENTAS ---------- */
.logos__title{
  font-family:"Jost", sans-serif; text-transform:uppercase;
  letter-spacing:.18em; font-size:.75rem; color:var(--muted); margin-bottom:1.2rem;
}
.logos__grid{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; padding:0; margin:0; }
.logos__grid li{
  font-family:"Jost", sans-serif; font-size:.875rem; letter-spacing:.01em;
  color:var(--blue); background:var(--wash); border:1px solid var(--line);
  padding:.4em .95em; border-radius:999px;
}

/* ============================================================
   FAQ (details/summary — conteúdo no DOM, sem JS)
   ============================================================ */
.faq{ display:grid; gap:.75rem; max-width:860px; }
.faq__item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); }
.faq__item[open]{ border-color:var(--blue); background:var(--wash); }
.faq__item summary{
  cursor:pointer; list-style:none; padding:1.2rem 3.25rem 1.2rem 1.35rem; position:relative;
  font-family:"Archivo",sans-serif; font-weight:600; letter-spacing:-.02em;
  font-size:1.0625rem; color:var(--ink); transition:color .18s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:1.3rem; top:50%; width:16px; height:2px;
  background:var(--blue); transform:translateY(-50%);
}
.faq__item summary::before{
  content:""; position:absolute; right:1.3rem; top:50%; width:16px; height:2px;
  background:var(--blue); transform:translateY(-50%) rotate(90deg); transition:transform .22s var(--ease);
}
.faq__item[open] summary::before{ transform:translateY(-50%) rotate(0deg); }
.faq__item summary:hover{ color:var(--blue); }
.faq__answer{ padding:0 3.25rem 1.35rem 1.35rem; color:var(--ink-2); font-size:.9375rem; }
.faq__answer p + p{ margin-top:.6rem; }
.faq__answer a{ color:var(--blue); text-decoration:underline; }

/* ---------- CTA FINAL ---------- */
.cta-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.cta__sub{ font-size:1.0625rem; color:rgba(255,255,255,.8); max-width:46ch; margin-top:.9rem; }
.cta__link{ color:var(--blue-soft); text-decoration:underline; }
.cta-head .btn{ flex:none; }
@media (max-width:600px){ .cta-head{ flex-direction:column; align-items:stretch; } .cta-head .btn{ width:100%; } }

/* ---------- NOTA ---------- */
.note{ font-size:.875rem; color:var(--muted); max-width:68ch; }
.note--boxed{ border:1px solid var(--line); background:var(--wash); border-radius:var(--r); padding:1rem 1.2rem; margin-top:1.2rem; }
.section--plate .note--boxed{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05); }

/* ---------- PROSE (páginas legais) ---------- */
.prose{ max-width:72ch; color:var(--ink-2); }
.prose h2{
  font-family:"Archivo",sans-serif; font-weight:600; text-transform:none; color:var(--ink);
  font-size:1.5rem; line-height:1.15; letter-spacing:-.025em; margin:2.4rem 0 .8rem;
}
.prose h3{ font-family:"Archivo",sans-serif; font-weight:600; text-transform:none; color:var(--ink); font-size:1.125rem; letter-spacing:-.02em; margin:1.6rem 0 .5rem; }
.prose p{ margin-bottom:.9rem; }
.prose ul, .prose ol{ margin:0 0 .9rem 1.2rem; display:grid; gap:.4rem; }
.prose a{ color:var(--blue); text-decoration:underline; }
.prose strong{ color:var(--ink); font-weight:500; }
.prose__meta{
  font-family:"Jost", sans-serif; color:var(--muted);
  font-size:.8125rem; letter-spacing:.02em; margin-bottom:1.8rem;
}

/* ============================================================
   ANIMAÇÕES — uma sequência curta no load, uma revelação por seção.
   Nada acima da dobra depende de JS para ficar visível.
   ============================================================ */
/* O estado oculto só existe sob .js-reveal (setada por um inline no <head>).
   Sem JS — ou se animations.js falhar em carregar — nada fica escondido. */
.js-reveal .reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease) var(--d,0s), transform .55s var(--ease) var(--d,0s); }
.js-reveal .reveal.in{ opacity:1; transform:none; }

/* A revelação é aplicada ao BLOCO, nunca aos filhos.
   As grades hairline (.cards, .pain, .steps…) desenham o fio com o próprio
   fundo e o gap de 1px: esconder os filhos deixaria uma laje cinza na tela
   se o observer atrasasse. Revelando o bloco inteiro, o estado intermediário
   não existe — e o movimento fica mais contido. */
.js-reveal .section .sec-head, .js-reveal .section .cards, .js-reveal .section .pain,
.js-reveal .section .steps, .js-reveal .section .counter, .js-reveal .section .faq,
.js-reveal .section .rev, .js-reveal .section .cmp-wrap, .js-reveal .section .spec{
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
/* Mesma quantidade de classes que o estado oculto acima — se o seletor visível
   ficar com especificidade menor, a seção nunca reaparece. */
.js-reveal .in-view .sec-head, .js-reveal .in-view .cards, .js-reveal .in-view .pain,
.js-reveal .in-view .steps, .js-reveal .in-view .counter, .js-reveal .in-view .faq,
.js-reveal .in-view .rev, .js-reveal .in-view .cmp-wrap, .js-reveal .in-view .spec{
  opacity:1; transform:none;
}
.js-reveal .in-view .cards, .js-reveal .in-view .pain, .js-reveal .in-view .steps,
.js-reveal .in-view .counter, .js-reveal .in-view .faq, .js-reveal .in-view .rev,
.js-reveal .in-view .cmp-wrap, .js-reveal .in-view .spec{ transition-delay:.08s; }

@media (prefers-reduced-motion: reduce){
  .reveal, .section .sec-head, .section .cards, .section .pain, .section .steps,
  .section .counter, .section .faq, .section .rev, .section .cmp-wrap, .section .spec,
  .sticky-cta, .consent{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* ---------- AVISO DE COOKIES (LGPD) ---------- */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 1.6rem;
  padding:1rem clamp(16px,4vw,40px);
  background:var(--paper); border-top:1px solid var(--blue);
  transform:translateY(100%); transition:transform .35s var(--ease);
}
.consent.is-visible{ transform:none; }
.consent__text{ font-size:.9375rem; color:var(--ink-2); max-width:66ch; margin:0; }
.consent__text a{ color:var(--blue); text-decoration:underline; }
.consent__actions{ display:flex; gap:.6rem; flex:none; }
@media (max-width:1040px){
  .consent__actions{ width:100%; }
  .consent__actions .btn{ flex:1; }
  body.tem-aviso-cookies .sticky-cta{ bottom:var(--consent-h, 148px); }
}

/* ============================================================
   RODAPÉ
   Continuação da placa profunda: o azul fecha a página do mesmo jeito que
   abre no painel da oferta.
   ============================================================ */
.footer{ background:var(--blue-deep); border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.72); padding:clamp(2.8rem,5vw,4rem) 0 1.6rem; }
.footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.2rem;
  padding-bottom:2.2rem; border-bottom:1px solid rgba(255,255,255,.14);
}
@media (max-width:960px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer__grid{ grid-template-columns:1fr; gap:1.8rem; } }
.footer .nav__name{ color:rgba(255,255,255,.55); }
.footer .nav__name strong{ color:var(--white); }
.footer__brand p{ color:rgba(255,255,255,.72); margin-top:.8rem; max-width:40ch; font-size:.9375rem; }
.footer__nap{
  font-family:"Jost", sans-serif; font-size:.8125rem !important;
  text-transform:none; letter-spacing:.02em; color:rgba(255,255,255,.55) !important;
}
.footer__col{ display:grid; gap:.55rem; align-content:start; }
.footer__col h3{
  font-family:"Jost", sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; font-size:.6875rem;
  color:rgba(255,255,255,.5); margin-bottom:.5rem;
}
.footer__col a{ color:rgba(255,255,255,.78); font-size:.9375rem; transition:color .18s; }
.footer__col a:hover{ color:var(--white); }
.footer__badges{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }
.footer__badges span{
  font-family:"Jost", sans-serif; letter-spacing:.02em; font-size:.75rem;
  color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.2);
  padding:.35em .8em; border-radius:999px;
}
.footer__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:1.5rem;
  font-family:"Jost", sans-serif; font-size:.8125rem;
  letter-spacing:.02em; color:rgba(255,255,255,.55);
}
.footer__legal{ display:flex; gap:1.1rem; }
.footer__legal a:hover{ color:var(--white); }
@media (max-width:1040px){ .footer{ padding-bottom:5.5rem; } }