/* Motor visual. NÃO editar por cliente — a variação vem do `tema` no config.js.

   Princípio deste layout: A PÁGINA É UMA SÓ SUPERFÍCIE.
   Nenhuma seção tem fundo próprio, borda, linha divisória ou troca de cor.
   O que separa um assunto do outro é espaço vazio e nada mais. Tudo o que
   pudesse virar uma "costura" visível foi removido de propósito. */

:root {
  --primaria: #0d0f14;
  --destaque: #d9a441;
  --acao: #1f9d55;
  --tinta: #eceef2;
  --tinta-fraca: #9aa2b1;
  --fonte-titulo: system-ui, sans-serif;
  --fonte-texto: system-ui, sans-serif;
  --fundo-opacidade: .16;

  --linha: rgba(255, 255, 255, .12);
  /* Texto dentro do botão de ação. Branco só continua certo enquanto `acao` for
     escuro; num botão bronze ou areia ele reprova em contraste. Vem do config. */
  --tinta-acao: #fff;
}

/* --- fontes próprias -------------------------------------------------------
   Os arquivos ficam em `fontes/` DENTRO da pasta da landing, e cada pasta só
   carrega o que o seu config pede: o navegador só busca o woff2 quando alguma
   regra realmente usa a família. Pasta sem `fontes/` nunca pede nada, e o
   estilo.css continua idêntico em todas — que é a regra do modelo.
   Subset latino: dá conta do português inteiro e é metade do arquivo. */
@font-face {
  font-family: "Fraunces";
  src: url("fontes/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;   /* texto aparece na hora, na fonte de reserva */
}

@font-face {
  font-family: "Archivo";
  src: url("fontes/archivo.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

/* O atributo `hidden` só aplica display:none pela folha do navegador, e
   QUALQUER regra de display nossa vence essa. Sem isto, elemento escondido
   pelo app.js continua aparecendo. Vale pra .marca-texto, .marca-logo,
   .faixa-demo e .plantao. */
[hidden] { display: none !important; }

/* Rolagem suave só pra quem não pediu o contrário no sistema: pra quem tem
   sensibilidade vestibular, a página deslizando sozinha é justamente o efeito
   que causa mal-estar. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--primaria);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 800; line-height: 1.15; letter-spacing: -.4px; }

.wrap { position: relative; z-index: 1; width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 22px; }
.wrap-estreito { max-width: 720px; }

/* --- camada de atmosfera --------------------------------------------------
   Fica fixa atrás de tudo. Os degradês já dão profundidade sozinhos; a foto
   (se houver) entra por cima deles, bem apagada, com as bordas dissolvidas
   por máscara — nunca com recorte reto. */
.fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Derivados de --destaque: trocar a paleta no config.js reacende o fundo
     na cor certa sozinho. Percentuais baixos porque cor quente lê mais forte
     que fria na mesma opacidade. */
  background:
    radial-gradient(900px 620px at 78% -6%,  color-mix(in srgb, var(--destaque) 15%, transparent), transparent 70%),
    radial-gradient(760px 560px at 6%  36%,  color-mix(in srgb, var(--destaque)  8%, transparent), transparent 72%),
    radial-gradient(1000px 700px at 94% 80%, color-mix(in srgb, var(--destaque) 11%, transparent), transparent 74%);
}

/* Textura vertical discreta, no espírito da persiana do fundo da referência */
.fundo::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, .030) 0 1px,
    transparent 1px 46px
  );
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 100%);
}

/* Foto de atmosfera — só aparece se `fotoFundo` existir no config */
.fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--foto-fundo, none);
  background-size: cover;
  background-position: center;
  opacity: var(--fundo-opacidade);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 25%, #000 10%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 25%, #000 10%, transparent 78%);
}

/* --- faixa de demonstração ------------------------------------------------ */
.faixa-demo {
  position: relative;
  z-index: 2;
  background: color-mix(in srgb, var(--destaque) 13%, transparent);
  color: var(--tinta-fraca);
  font-size: 13px;
  text-align: center;
  padding: 9px 16px;
}

/* --- topo ----------------------------------------------------------------- */
.topo { position: relative; z-index: 1; }

.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 156px;
  flex-wrap: wrap;
}

/* `isolation` cria contexto de empilhamento próprio: sem isso o símbolo em
   z-index -1 cairia atrás da foto do topo e sumiria. */
.marca { position: relative; display: flex; align-items: center; isolation: isolate; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.2; }

.marca-texto strong {
  font-family: var(--fonte-titulo);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 800;
  letter-spacing: -.8px;
}

.marca-texto span {
  font-size: 13px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--destaque);
}

.marca-logo { width: auto; display: block; }

/* Símbolo: marca d'água grande ATRÁS do nome, não um ícone ao lado. Ele dá
   fundo ao texto em vez de disputar espaço com ele. */
.marca[data-logo="simbolo"] .marca-logo {
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  height: 136px;
  max-width: none;
  opacity: .22;
  z-index: -1;
  pointer-events: none;
}

/* Logo completa já contém o nome: continua sendo a marca em si, no fluxo. */
.marca[data-logo="completa"] .marca-logo { height: 62px; max-width: 300px; }

.plantao {
  font-size: 13px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 6px 15px;
  color: var(--tinta-fraca);
  white-space: nowrap;
}

/* --- alto da página: cabeçalho + herói ------------------------------------
   Os dois vivem no mesmo container justamente pra a foto cobrir ambos como
   uma imagem só. Se a foto ficasse no herói, ela começaria abaixo do nome do
   escritório e criaria uma emenda exatamente ali. Como o container envolve os
   dois, a altura acompanha sozinha quando o título de outro cliente for maior. */
.alto { position: relative; z-index: 1; }

.alto.com-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,
      var(--primaria) 30%,
      color-mix(in srgb, var(--primaria) 82%, transparent) 62%,
      color-mix(in srgb, var(--primaria) 45%, transparent) 100%),
    var(--foto-heroi);
  background-size: cover;
  background-position: center right;
  /* dissolve o pé da foto na página — nada de linha reta */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}

/* --- herói ---------------------------------------------------------------- */
/* Sem borda inferior e sem fundo próprio: ele se dissolve no resto da página. */
.heroi { position: relative; z-index: 1; padding: 40px 0 100px; }

.linha-fina {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--destaque);
}

.heroi h1 { margin: 0 0 20px; font-size: clamp(34px, 6vw, 58px); max-width: 15ch; }

.heroi .sub {
  margin: 0 0 34px;
  font-size: clamp(17px, 2.2vw, 20px);
  max-width: 50ch;
  color: var(--tinta-fraca);
}

.heroi .local { margin: 20px 0 0; font-size: 14px; color: var(--tinta-fraca); opacity: .8; }

/* --- botões --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}

.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn-acao { background: var(--acao); color: var(--tinta-acao); }

/* --- foco visível ----------------------------------------------------------
   Quem navega por teclado precisa ver onde está. `:focus-visible` (e não
   `:focus`) mantém o anel fora do clique de mouse, que é o que faz o anel
   parecer sujeira e leva o desenvolvedor a desligar tudo com outline:none.
   O deslocamento existe pra não encostar no botão arredondado. */
   O `outline` moderno já acompanha o arredondamento do próprio elemento, então
   nada de `border-radius` aqui: mexer nisso deformaria a pílula do botão no
   instante em que ela recebe o foco. */
:where(a, button, summary, details, [tabindex]):focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 3px;
}

.ico-wa {
  width: 20px; height: 20px; flex: none;
  background: currentColor;
  -webkit-mask: var(--wa) center / contain no-repeat;
  mask: var(--wa) center / contain no-repeat;
}

/* --- blocos --------------------------------------------------------------- */
/* Só espaço. Sem background, sem border, sem divisor. */
.bloco { position: relative; z-index: 1; padding: 60px 0 100px; }

/* Imagem atrás de uma seção. A máscara radial é o que impede que ela vire
   um retângulo com borda — sem isso, a costura entre seções volta. O
   `inset` negativo faz a imagem transbordar o bloco, então o desvanecimento
   acontece fora da área de texto. */
.com-fundo::before {
  content: "";
  position: absolute;
  inset: -90px 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--foto-secao);
  background-size: cover;
  background-position: center;
  opacity: var(--secao-opacidade, .10);
  -webkit-mask-image: radial-gradient(75% 62% at 50% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(75% 62% at 50% 50%, #000 0%, transparent 78%);
}

.bloco h2, .cta-final h2 {
  font-size: clamp(27px, 4vw, 40px);
  margin: 0 0 56px;
  max-width: 20ch;
}

/* --- direitos: selo com ícone + texto ------------------------------------- */
.direitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 46px; }

.direitos li {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 26px;
  align-items: start;
}

.direitos .selo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--destaque);
  background: color-mix(in srgb, var(--destaque) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--destaque) 45%, transparent);
}

.direitos .selo svg { width: 32px; height: 32px; }

.direitos .num {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--destaque);
}

.direitos h3 { margin: 0 0 10px; font-size: clamp(21px, 2.5vw, 25px); }
.direitos p { margin: 0; font-size: 18px; max-width: 60ch; color: var(--tinta-fraca); }

/* --- erros: linha do tempo em zigue-zague --------------------------------- */
/* Ímpares à direita da linha, pares à esquerda — como na referência. */
.linha-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 58px;
}

.linha-tempo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--linha);
}

.linha-tempo li {
  position: relative;
  width: calc(50% - 56px);
}

.linha-tempo li:nth-child(odd)  { margin-left: auto;  text-align: left; }
.linha-tempo li:nth-child(even) { margin-right: auto; text-align: right; }

/* o ponto, encaixado exatamente sobre a linha central */
.linha-tempo li::before {
  content: "";
  position: absolute;
  top: 12px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--destaque);
  box-shadow: 0 0 0 5px var(--primaria), 0 0 0 6px var(--linha);
}

.linha-tempo li:nth-child(odd)::before  { left: -63px; }
.linha-tempo li:nth-child(even)::before { right: -63px; }

.linha-tempo h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.8vw, 29px);
  color: var(--destaque);
}

.linha-tempo p { margin: 0; color: var(--tinta-fraca); }

/* --- checklist: seção opcional -------------------------------------------
   Duas colunas no desktop, porque item de conferência é curto e uma coluna só
   deixaria meia tela vazia à direita. Sem cartão, sem caixa: o que separa um
   item do outro é o fio de cima, no mesmo espírito do resto da página. */
.bloco-intro {
  margin: -34px 0 52px;
  max-width: 62ch;
  font-size: 18px;
  color: var(--tinta-fraca);
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 48px;
}

.checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 16px;
  align-items: start;
  border-top: 1px solid var(--linha);
  padding-top: 22px;
}

.checklist .marca-check { color: var(--destaque); line-height: 0; margin-top: 4px; }
.checklist .marca-check svg { width: 22px; height: 22px; }
.checklist h3 { margin: 0 0 8px; font-size: clamp(18px, 2vw, 21px); }
.checklist p { margin: 0; color: var(--tinta-fraca); font-size: 16.5px; }

/* --- faq: accordion nativo, sem javascript -------------------------------- */
/* Largura limitada SEM centralizar: num layout contínuo, a margem esquerda
   precisa bater com a das outras seções. */
.faq { max-width: 840px; }
.faq details { border-bottom: 1px solid var(--linha); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 38px 20px 0;
  font-weight: 600;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--destaque);
}

.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 22px; color: var(--tinta-fraca); }

/* --- cta final ------------------------------------------------------------ */
/* Mesmo fundo do resto. O que o destaca é o centro e o espaço, não uma faixa. */
.cta-final { position: relative; z-index: 1; padding: 60px 0 100px; text-align: center; }
.cta-final h2 { margin-inline: auto; }
.cta-final p { color: var(--tinta-fraca); max-width: 46ch; margin: 0 auto 32px; }

.assinatura {
  margin: 40px auto 0 !important;
  font-size: 14px;
  color: var(--tinta-fraca) !important;
  opacity: .75;
  line-height: 1.8;
}

/* --- rodapé --------------------------------------------------------------- */
.rodape {
  position: relative;
  z-index: 1;
  color: var(--tinta-fraca);
  font-size: 13px;
  padding: 20px 0 56px;
  text-align: center;
  opacity: .7;
}

.rodape p { margin: 0 0 12px; }

@media (max-width: 860px) {
  .bloco h2, .cta-final h2 { max-width: none; margin-bottom: 40px; }

  .bloco-intro { margin: -26px 0 40px; }
  .checklist { grid-template-columns: 1fr; gap: 30px; }

  /* Linha do tempo vira coluna única com a linha à esquerda */
  .linha-tempo { gap: 40px; }
  .linha-tempo::before { left: 7px; }
  .linha-tempo li,
  .linha-tempo li:nth-child(odd),
  .linha-tempo li:nth-child(even) {
    width: auto;
    margin: 0 0 0 42px;
    text-align: left;
  }
  .linha-tempo li:nth-child(odd)::before,
  .linha-tempo li:nth-child(even)::before {
    left: -42px;
    right: auto;
  }
}

@media (max-width: 760px) {
  /* Sem `padding-bottom` no body: ele só existia pra abrir espaço pra barra
     fixa de WhatsApp, que saiu em 11/08/2026. Mantê-lo deixaria 70px de vazio
     morto no pé da página, no aparelho em que ele mais aparece. */

  .topo-linha { min-height: 118px; }
  .marca[data-logo="simbolo"] .marca-logo { height: 100px; left: -24px; }

  .heroi { padding: 26px 0 64px; }
  .bloco { padding: 40px 0 64px; }
  .cta-final { padding: 24px 0 64px; }

  /* No celular a tela é estreita: o véu do alto vira vertical, senão o texto
     cai em cima do assunto da foto e some. */
  .alto.com-foto::before {
    background-image:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--primaria) 74%, transparent),
        var(--primaria) 92%),
      var(--foto-heroi);
    background-position: center;
  }

  .direitos { gap: 34px; }
  .direitos li { grid-template-columns: 54px 1fr; gap: 18px; }
  .direitos .selo { width: 54px; height: 54px; }
  .direitos .selo svg { width: 26px; height: 26px; }
  .direitos p { font-size: 17px; }
}

/* ===========================================================================
   MOVIMENTO — desligado por padrão, ligado por `tema.movimento: true`.

   O estado inicial é `opacity: 0`, então ele SÓ pode existir depois que o
   app.js confirmou que consegue desfazê-lo: a classe `com-movimento` entra no
   <html> só quando há IntersectionObserver e o sistema não pede movimento
   reduzido. Sem ela, nada aqui vale e a página é a de sempre — visível.
   =========================================================================== */
/* `--dx`/`--dy` vêm do app.js: subida discreta por padrão, entrada lateral
   quando o grupo pede. Uma propriedade só (`translate`) mantém a transição
   barata — o navegador anima na GPU e não recalcula layout. */
.com-movimento .entra {
  opacity: 0;
  transform: translate(var(--dx, 0px), var(--dy, 14px));
  transition:
    opacity   .62s cubic-bezier(.22, .61, .36, 1) var(--atraso, 0ms),
    transform .62s cubic-bezier(.22, .61, .36, 1) var(--atraso, 0ms);
}

.com-movimento .entra.visivel { opacity: 1; transform: none; }

/* REDUZIR, NÃO REMOVER. Quem pede movimento reduzido está pedindo pra parar de
   deslizar — o que causa desconforto vestibular é a coisa se MOVER, não a
   opacidade mudar. Então o deslocamento sai e sobra um esmaecimento curto.

   Isto também conserta um problema prático: no Windows, "reduzir animações"
   está desligado em muita máquina por hábito de deixar o PC leve. A regra
   antiga zerava a transição inteira, e nessas máquinas a página ficava sem
   entrada nenhuma — indistinguível de animação quebrada.

   `movimento: "sempre"` no config pula esta regra de propósito. */
@media (prefers-reduced-motion: reduce) {
  .com-movimento:not(.movimento-forcado) .entra {
    transform: none;
    transition: opacity .32s ease var(--atraso, 0ms);
  }
}

/* A resposta do accordion desce em vez de aparecer de estalo. Três décimos:
   o suficiente pra o olho seguir de onde o texto veio, curto o bastante pra
   não atrasar quem já está abrindo a terceira pergunta. */
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] > p { animation: desce .3s cubic-bezier(.22, .61, .36, 1); }
}

@keyframes desce {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ===========================================================================
   VARIANTE "EDITORIAL" — `tema.variante: "editorial"` no config.js.

   Ponto de vista: guia de campo impresso. Serifada de display com eixo óptico,
   numerais grandes como elemento gráfico, fios finos no lugar de caixas, e
   nenhuma foto — a composição é toda tipográfica. Sem a variante ligada,
   nenhuma regra daqui existe, e as landings antigas não mudam um pixel.
   =========================================================================== */

/* A Fraunces variável vai de 400 a 700. O peso 800 do motor cairia fora do
   eixo e o navegador engrossaria a letra por conta própria — o "falso negrito",
   que borra justamente a serifa fina que motivou escolher a fonte.
   `opsz` é o eixo óptico: quanto maior o corpo, mais fino o contraste do
   desenho. É o que faz o título parecer desenhado pro tamanho em que está. */
.v-editorial h1,
.v-editorial h2,
.v-editorial h3,
.v-editorial .marca-texto strong {
  font-weight: 600;
  letter-spacing: -.6px;
  text-wrap: balance;   /* corta a linha onde o sentido pede, não onde a caixa acaba */
}

.v-editorial h1 { font-variation-settings: "opsz" 120; letter-spacing: -1.4px; }
.v-editorial h2 { font-variation-settings: "opsz" 84; letter-spacing: -1px; }
.v-editorial h3 { font-variation-settings: "opsz" 32; }
.v-editorial .marca-texto strong { font-variation-settings: "opsz" 60; letter-spacing: -.9px; }

.v-editorial p { text-wrap: pretty; }   /* sem palavra sozinha na última linha */

/* Fio sob o cabeçalho: é ele que anuncia o assunto da página como um guia
   impresso, e ele para na margem do texto — não atravessa a tela. Fio de borda
   a borda viraria a "costura" que este layout existe pra não ter. */
.v-editorial .topo-linha { border-bottom: 1px solid var(--linha); padding-bottom: 22px; }
.v-editorial .marca-texto span { font-size: 11px; letter-spacing: 3.4px; }

.v-editorial .linha-fina { font-size: 11.5px; letter-spacing: 2.6px; }
.v-editorial .heroi h1 { font-size: clamp(38px, 5.6vw, 62px); max-width: 17ch; line-height: 1.08; }
.v-editorial .heroi .sub { max-width: 52ch; }

/* Marca de seção: um traço curto e cheio, no lugar do fio longo. Diz "começou
   um assunto" sem dividir a página em faixas. */
.v-editorial .bloco > .wrap > h2::before,
.v-editorial .cta-final h2::before {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: var(--destaque);
  margin-bottom: 26px;
}

.v-editorial .cta-final h2::before { margin-inline: auto; }

/* --- direitos: o numeral vira o elemento gráfico -------------------------- */
/* O selo redondo com ícone sai; quem organiza a lista é o número grande na
   coluna da esquerda e o fio que abre cada item. */
.v-editorial .direitos { gap: 0; }
.v-editorial .direitos .selo { display: none; }

.v-editorial .direitos li {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--linha);
  padding: 30px 0 34px;
}

.v-editorial .direitos li:last-child { border-bottom: 1px solid var(--linha); }

.v-editorial .direitos li > div {
  display: grid;
  grid-template-columns: 128px 1fr;
  column-gap: 28px;
  align-items: start;
}

.v-editorial .direitos .num {
  grid-row: 1 / span 2;          /* o numeral acompanha título E texto */
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  font-variation-settings: "opsz" 130;
  letter-spacing: -1px;
  line-height: .9;
}

.v-editorial .direitos h3 { grid-column: 2; margin: 0 0 10px; }
.v-editorial .direitos p  { grid-column: 2; }

/* --- checklist ------------------------------------------------------------ */
.v-editorial .checklist li { border-top-color: color-mix(in srgb, var(--destaque) 32%, transparent); }
.v-editorial .checklist h3 { letter-spacing: -.3px; }

/* --- faq ------------------------------------------------------------------ */
.v-editorial .faq summary {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 20.5px);
  letter-spacing: -.3px;
  transition: color .2s ease;
}

.v-editorial .faq summary:hover { color: var(--destaque); }

/* A assinatura herda o limite de 46ch do parágrafo do CTA, que é medida de
   leitura — endereço não é texto corrido, e quebrar "São Bernardo / do Campo"
   no meio faz o pé da página parecer torto. */
.v-editorial .assinatura { max-width: 62ch; }

/* --- botão ---------------------------------------------------------------- */
/* Retângulo de canto vivo em vez de pílula: a pílula é o botão padrão de toda
   landing genérica, e aqui o vocabulário é impresso. */
.v-editorial .btn {
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: .2px;
  transition:
    transform .18s cubic-bezier(.22, .61, .36, 1),
    box-shadow .18s ease,
    filter .18s ease;
}

.v-editorial .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .85);
  filter: brightness(1.04);   /* bronze clareia rápido: 1.1 do padrão desbota */
}

/* Precisa vir depois do :hover — o dedo/mouse continua em cima no clique, e
   sem isto o botão não afundaria nunca. */
.v-editorial .btn:active { transform: translateY(0); box-shadow: none; }

/* --- celular: decisões próprias, não a versão espremida ------------------- */
@media (max-width: 760px) {
  /* O numeral sobe pra cima do título: 128px de coluna fixa comeriam um terço
     da largura de um telefone. */
  .v-editorial .direitos li > div { grid-template-columns: 1fr; }
  .v-editorial .direitos .num {
    grid-row: auto;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 10px;
  }
  .v-editorial .direitos h3, .v-editorial .direitos p { grid-column: 1; }

  /* Título proporcionalmente MAIOR que no desktop, não menor: no telefone ele
     é a tela inteira, e é a única coisa que a pessoa lê antes de decidir rolar. */
  .v-editorial .heroi h1 { font-size: clamp(31px, 8.4vw, 42px); max-width: none; letter-spacing: -1px; }

  /* Botão de largura cheia: alvo de polegar, e o único jeito de o CTA não
     depender de mira num aparelho segurado com uma mão só. */
  /* 16px, e o corpo menor não é economia de espaço: em 390px o rótulo do herói
     ("Falar com o escritório no WhatsApp") quebrava em duas linhas e o ícone
     ficava boiando no meio do bloco. Um ponto a menos resolve sem encurtar o
     texto, que é o que diz em qual canal a conversa acontece. */
  .v-editorial .btn { display: flex; width: 100%; justify-content: center; padding: 17px 18px; font-size: 16px; }

  .v-editorial .topo-linha { min-height: 96px; padding-bottom: 16px; }
  .v-editorial .bloco > .wrap > h2::before,
  .v-editorial .cta-final h2::before { margin-bottom: 20px; }
}

/* ===========================================================================
   FOTO DENTRO DA LINHA DO TEMPO (item de `erros` com `imagem` no config)

   No desktop a linha do tempo deixa metade da largura vazia em frente a cada
   item — é ali que a foto entra, espelhada em relação ao texto. O lado é
   decidido pelo `nth-child`, o mesmo que decide o lado do texto.
   Sem borda e sem moldura: a imagem entra com as bordas dissolvidas por
   máscara, senão vira o retângulo que este layout existe pra não ter.
   =========================================================================== */
/* A foto NÃO é uma ilustração ao lado do texto: é ambientação. Ela sangra pra
   fora da coluna, até passar da borda da tela, e afunda no fundo da página por
   trás de um véu da cor primária — o que se vê é a atmosfera da imagem, não um
   retângulo com uma foto dentro. Nunca deve haver aresta visível.

   Por isso ela precisa de recorte no eixo X: sem ele a foto que vaza pra fora
   da tela criaria barra de rolagem horizontal. `clip` e não `hidden` porque
   `hidden` num eixo força o outro a rolar, e cortaria o transbordo vertical
   das imagens de seção das outras landings. */
.bloco[data-secao="erros"] { overflow-x: clip; }

.tempo-foto {
  margin: 0;
  position: absolute;
  z-index: -1;           /* atrás do texto, à frente da camada de atmosfera */
  pointer-events: none;
  overflow: hidden;
  /* dissolve topo e base: a foto não pode ter começo nem fim visível */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
}

.tempo-foto img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .58; }

/* O véu. É ele que faz a foto parecer estar ATRÁS do fundo do site: opaco
   junto ao texto, transparente na borda de fora. Sem ele a foto compete com a
   leitura; com ele, ela só dá profundidade àquele lado da página. */
.tempo-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 12%, var(--primaria) 88%);
}

@media (min-width: 861px) {
  /* Alta e larga o bastante pra sair da tela: o transbordo é o que elimina a
     aresta externa. 56px = a metade da distância entre as duas colunas, então
     a foto morre antes de encostar na linha do tempo. */
  .tempo-foto { top: -80px; bottom: -80px; width: 56vw; }

  /* Ímpar tem o texto à direita da linha, então a foto vai pro vazio da
     esquerda — e o véu adensa da esquerda pra direita. Par é o espelho. */
  .linha-tempo li:nth-child(odd)  .tempo-foto { right: calc(100% + 56px); }
  .linha-tempo li:nth-child(even) .tempo-foto { left:  calc(100% + 56px); }
  .linha-tempo li:nth-child(even) .tempo-foto::after {
    background: linear-gradient(to left, transparent 12%, var(--primaria) 88%);
  }
}

@media (max-width: 860px) {
  /* No telefone não existe lado vazio: a foto passa a ser o fundo do próprio
     item, de borda a borda da tela (-64px = os 42px de margem do item mais os
     22px de respiro do wrap). Mais apagada e com véu vertical, porque aqui ela
     fica DEBAIXO do texto e não pode disputar com ele. */
  .tempo-foto { top: -30px; bottom: -30px; left: -64px; right: -22px; }
  .tempo-foto img { opacity: .42; }
  .tempo-foto::after {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--primaria) 55%, transparent),
      color-mix(in srgb, var(--primaria) 78%, transparent));
  }
}

/* ===========================================================================
   RODAPÉ INSTITUCIONAL — seção opcional `contato`.

   É o único lugar da página com estrutura de colunas. Ele existe pra a landing
   terminar como site de escritório (marca, menu, redes, endereço) e não como
   página solta de campanha.
   =========================================================================== */
.rodape-rico {
  position: relative;
  z-index: 1;
  padding: 20px 0 10px;
}

/* O fio que abre o rodapé para na margem do texto em vez de atravessar a tela.
   Fio de borda a borda é exatamente a "costura" que esta página não tem em
   lugar nenhum — e o rodapé não é motivo pra abrir exceção. */
.rodape-rico > .wrap::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--linha);
  margin-bottom: 58px;
}

.rodape-grade {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: 54px;
  align-items: start;
}

.rodape-logo { display: block; height: 58px; width: auto; max-width: 300px; margin-bottom: 20px; }

.rodape-nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.5px;
  margin-bottom: 16px;
}

.rodape-frase {
  margin: 0 0 26px;
  max-width: 34ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tinta-fraca);
}

/* Botão de contorno, não o cheio: no rodapé o CTA cheio competiria com o da
   seção anterior, que está a uma tela de distância e é o principal. */
.btn-contorno {
  border: 1px solid color-mix(in srgb, var(--destaque) 55%, transparent);
  color: var(--destaque);
  padding: 13px 26px;
  font-size: 15.5px;
}

.btn-contorno:hover { background: color-mix(in srgb, var(--destaque) 12%, transparent); filter: none; }

.rodape-colunas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.rodape-col h3 {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--destaque);
}

.rodape-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rodape-col li { font-size: 15px; line-height: 1.55; color: var(--tinta-fraca); }

.rodape-col a {
  color: var(--tinta-fraca);
  text-decoration: none;
  transition: color .18s ease;
}

.rodape-col a:hover { color: var(--tinta); }

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
  font-size: 13px;
  color: var(--tinta-fraca);
  opacity: .75;
}

@media (max-width: 900px) {
  .rodape-grade { grid-template-columns: 1fr; gap: 44px; }
  .rodape-colunas { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (max-width: 560px) {
  /* Uma coluna só. Menu e Contato empilhados continuam legíveis; lado a lado
     em 320px, o endereço quebraria em cinco linhas. */
  .rodape-colunas { grid-template-columns: 1fr; gap: 30px; }
  .rodape-rico { padding-top: 54px; }
  .rodape-base { margin-top: 40px; }
}

/* --- rodapé institucional na variante editorial --------------------------- */
.v-editorial .rodape-nome { font-weight: 600; font-variation-settings: "opsz" 40; }
.v-editorial .btn-contorno { border-radius: 4px; }
.v-editorial .rodape-col h3 { font-family: var(--fonte-texto); letter-spacing: 2.6px; }

@media (max-width: 760px) {
  /* O botão de largura cheia da variante vale pro CTA da página, não pro
     rodapé: ali ele viraria uma faixa e roubaria a atenção do endereço. */
  .v-editorial .btn-contorno { display: inline-flex; width: auto; font-size: 15px; }
}