/* 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);
}

* { 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; }

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: #fff; }

.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); }

/* --- 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; }

  /* 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; }
}