/* ==========================================================================
   ABITA — Componentes
   Cabeçalho, menu, botões, rodapé e WhatsApp. Compartilhados por todas
   as páginas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOTÕES
   O hover não troca a cor: uma superfície sobe de baixo e a cor do texto
   vira junto. Custa uma pseudo e lê como intenção, não como estado padrão.
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 3.25rem;
  padding: var(--e-3) var(--e-6);
  border: var(--fio) solid transparent;
  border-radius: var(--raio);
  font-size: var(--fs-sm);
  font-weight: var(--peso-medio);
  letter-spacing: 0.01em;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-rapida) var(--suave),
              border-color var(--t-rapida) var(--suave);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform var(--t-media) var(--mola);
}

.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }

/* Primário sobre claro */
.btn--forte {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}
.btn--forte::before { background: var(--papel); }
.btn--forte:hover { color: var(--tinta); }

/* Primário sobre escuro */
.btn--claro {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--papel);
}
.btn--claro::before { background: var(--tinta); }
.btn--claro:hover { color: var(--papel); }

/* Contorno, herda a banda */
.btn--fio {
  border-color: var(--linha-cor, var(--linha));
  color: var(--texto-cor, var(--texto));
}
.btn--fio::before { background: var(--texto-cor, var(--texto)); }
.btn--fio:hover {
  color: var(--fundo-da-banda, var(--papel));
  border-color: var(--texto-cor, var(--texto));
}
.escuro .btn--fio:hover { --fundo-da-banda: var(--tinta); }

/* Link com seta. A seta anda, o fio se estende. */
.btn--seta {
  min-height: 2.75rem;
  padding: var(--e-2) 0;
  border: 0;
  overflow: visible;
  color: var(--texto-cor, var(--texto));
  font-size: var(--fs-sm);
}
.btn--seta::before { display: none; }

.btn--seta .risco {
  position: relative;
  display: inline-block;
  width: var(--e-5);
  height: var(--fio);
  background: currentColor;
  transition: width var(--t-media) var(--mola);
}
.btn--seta .risco::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: var(--fio) solid currentColor;
  border-right: var(--fio) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn--seta:hover .risco { width: var(--e-7); }

/* Linha de CTA. Desde 19/10/2026, só "Falar no WhatsApp". */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4) var(--e-6);
}


/* --------------------------------------------------------------------------
   LUZ DO CTA
   Um arco de luz dá a volta na borda. A borda, e não a caixa: o anel é
   recortado por duas máscaras que se excluem, então o miolo continua
   limpo e o texto nunca fica por baixo de nada.

   `@property` é o que torna o ângulo animável. Sem ele o navegador ignora
   a animação e o arco fica parado num ponto da borda, que é um estado
   bom e não um defeito.
   -------------------------------------------------------------------------- */

@property --led-giro {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.btn--led::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-conteudo);
  border-radius: inherit;
  padding: var(--fio);
  background: conic-gradient(from var(--led-giro),
                transparent 0deg,
                var(--led-cor, var(--papel)) var(--led-arco),
                transparent calc(var(--led-arco) * 2));
  /* Duas máscaras que se excluem deixam só o anél de --fio de espessura. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: led-giro var(--led-volta) linear infinite;
  pointer-events: none;
}

@keyframes led-giro { to { --led-giro: 360deg; } }

/* O CTA fixo do cabeçalho leva o LED. O pulso dos botões do simulador
   saiu com ele, em 19/10/2026. */

/* Tokens não zeram animação: `animation-duration: 0s` deixa o arco
   parado num ponto qualquer. Aqui a regra tem de ser explícita. */
@media (prefers-reduced-motion: reduce) {
  .btn--led::after { animation: none; }
}


/* --------------------------------------------------------------------------
   CABEÇALHO
   Mínimo de propósito: marca, um CTA e o menu. Sete destinos em barra
   apertam o tipo e empurram o olho para a navegação em vez do conteúdo.
   O mapa completo do site está no rodapé.
   -------------------------------------------------------------------------- */

.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-cabecalho);
  color: var(--papel);
  transition: transform var(--t-media) var(--suave),
              background-color var(--t-media) var(--suave);
}

.cabecalho::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tinta);
  opacity: 0;
  transition: opacity var(--t-media) var(--suave);
}

.cabecalho[data-solido="true"]::after { opacity: 1; }
.cabecalho[data-oculto="true"] { transform: translateY(-100%); }

/* Com o menu aberto o cabeçalho sobe acima dele. O menu tem camada maior e
   fundo opaco, e cobria o botão que o fecha: em qualquer largura, o único
   jeito de sair era escolher um destino ou apertar Esc. O respiro do alto
   do menu já é a altura do cabeçalho, então nada fica por baixo. */
body.travado .cabecalho { z-index: calc(var(--z-menu) + 1); }

/* E ganha fundo: num celular baixo o menu rola, e os itens passavam por
   baixo do logo. */
body.travado .cabecalho::after { opacity: 1; }

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--cabecalho-h);
}

.cabecalho .marca { flex: 0 0 auto; }

.marca img {
  width: auto;
  height: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  filter: invert(1);
}

.cabecalho__acoes { display: flex; align-items: center; gap: var(--e-4); }

.cabecalho .btn--fio {
  --texto-cor: var(--papel);
  border-color: var(--linha-inv);
  min-height: 2.75rem;
  padding-inline: var(--e-4);
}
.cabecalho .btn--fio::before { background: var(--papel); }
.cabecalho .btn--fio:hover { color: var(--tinta); border-color: var(--papel); }

.cabecalho__cta { display: none; }

@media (min-width: 600px) { .cabecalho__cta { display: inline-flex; } }


/* Botão de menu: palavra mais duas barras. */
.menu-btn {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 2.75rem;
  padding-inline: var(--e-1);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  color: inherit;
}

.menu-btn__barras {
  position: relative;
  width: 1.5rem;
  height: 0.625rem;
  flex: 0 0 auto;
}

.menu-btn__barras span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--fio);
  background: currentColor;
  transition: transform var(--t-media) var(--mola),
              opacity var(--t-rapida) var(--suave);
}

.menu-btn__barras span:nth-child(1) { top: 0; }
.menu-btn__barras span:nth-child(2) { bottom: 0; }

.menu-btn[aria-expanded="true"] .menu-btn__barras span:nth-child(1) { transform: translateY(0.3125rem) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__barras span:nth-child(2) { transform: translateY(-0.3125rem) rotate(-45deg); }


/* --------------------------------------------------------------------------
   MENU DE TELA CHEIA
   -------------------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  padding: calc(var(--cabecalho-h) + var(--e-5)) var(--goteira) var(--e-6);
  background: var(--tinta);
  color: var(--texto-corpo-inv);
  --linha-cor: var(--linha-inv);
  --texto-cor: var(--papel);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  /* A visibilidade vira de uma vez: elemento com visibility:hidden não
     recebe foco, e o primeiro link precisa ser focável no mesmo instante
     em que o menu abre. Ao fechar, o atraso segura até o fade terminar. */
  transition: opacity var(--t-media) var(--suave),
              visibility 0s linear var(--t-media);
}

.menu[data-aberto="true"] {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--t-media) var(--suave), visibility 0s;
}

/* A grade é de uma coluna só, em qualquer largura. Em duas, a lista
   ocupava 959px de altura e o pé ao lado dela 229px: sobravam 731px de
   coluna direita vazia, com o CTA boiando no topo desse vazio. O pé
   virou faixa embaixo, onde ele fecha o bloco em vez de pendurar. */
/* Centrado por margem, e não por `align-content: center`. Quando a lista
   passa da altura da tela, num celular baixo, o centro por alinhamento
   empurra metade do excesso para cima, fora do alcance da rolagem: em 360
   por 740 o item 01 ficava cortado. Margem automática nunca fica negativa,
   então sobra a rolagem normal. */
.menu__grade {
  width: 100%;
  max-width: var(--medida);
  margin: auto;
  display: grid;
  gap: clamp(var(--e-5), 4vw, var(--e-7));
}

.menu__lista { display: grid; }

.menu__item { border-top: var(--fio) solid var(--linha-inv); }
.menu__item:last-child { border-bottom: var(--fio) solid var(--linha-inv); }

/* O corpo era --fs-d1, 68px por item. Oito destinos nesse tamanho dão
   959px de lista e o menu passa a rolar numa tela de 900: o item 08 fica
   fora da vista, que é o oposto do que um mapa do site serve para fazer.
   O menu não é o conteúdo da página, é a forma de sair dela. */
.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  /* O padding é o que garante o alvo de 44px: com --e-2 o item media 38px
     no celular, abaixo do mínimo do design.md §9. Aqui dá 54. */
  padding-block: var(--e-3);
  font-size: var(--fs-d3);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  font-weight: var(--peso-medio);
  color: var(--papel);
  transition: padding-left var(--t-media) var(--mola),
              opacity var(--t-rapida) var(--suave);
}

.menu__link:hover { padding-left: var(--e-3); }
.menu__link .indice { color: var(--texto-meta-inv); }
.menu__link[aria-current="page"] { font-weight: var(--peso-forte); }

.menu__pe {
  display: grid;
  gap: var(--e-4);
  padding-top: var(--e-5);
  border-top: var(--fio) solid var(--linha-inv);
  font-size: var(--fs-sm);
}

.menu__pe a:hover { color: var(--papel); }

@media (min-width: 900px) {
  /* Quatro por coluna: metade da altura, e a largura da tela finalmente
     faz trabalho. O preenchimento é por coluna, não por linha, para a
     numeração 01 a 08 continuar descendo na ordem de leitura. */
  .menu__lista {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: var(--e-9);
  }
  .menu__item:last-child { border-bottom: 0; }
  .menu__item:nth-child(4n) { border-bottom: var(--fio) solid var(--linha-inv); }

  .menu__link { font-size: var(--fs-d2); padding-block: clamp(var(--e-3), 1.2vw, var(--e-4)); }

  /* Contato e unidades à esquerda, CTA na ponta oposta da mesma linha. */
  .menu__pe {
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: var(--e-8);
  }
  .menu__pe .btn { justify-self: end; }
}

body.travado { overflow: hidden; }


/* --------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */

.rodape {
  position: relative;
  background: var(--tinta);
  color: var(--texto-corpo-inv);
  --linha-cor: var(--linha-inv);
  --texto-cor: var(--papel);
  --meta-cor: var(--texto-meta-inv);
  overflow: hidden;
}

/* Marca d'água Λ, cortada pela borda. A única outra aparição do símbolo. */
.rodape__lambda {
  position: absolute;
  right: calc(var(--goteira) * -1);
  bottom: -12%;
  width: clamp(10rem, 26vw, 26rem);
  aspect-ratio: 760 / 655;
  background: var(--papel);
  opacity: 0.04;
  -webkit-mask: var(--lambda) no-repeat center / contain;
  mask: var(--lambda) no-repeat center / contain;
  pointer-events: none;
}

.rodape__topo {
  position: relative;
  z-index: var(--z-conteudo);
  display: grid;
  gap: var(--e-8);
  padding-block: var(--secao-curta);
}

.rodape .marca img { height: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.rodape__assinatura { margin-top: var(--e-4); color: var(--papel); }

.rodape__col h2 {
  margin-bottom: var(--e-4);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  color: var(--texto-meta-inv);
}

.rodape__col li + li,
.rodape__col p + p { margin-top: var(--e-1); }

/* Link de rodapé é texto denso: 44px cheios inchariam o bloco. Fica em
   35px, que é o alvo confortável sem virar lista de botões. */
.rodape__col li a,
.rodape__col p a { display: inline-block; padding-block: var(--e-2); }

.menu__pe a:not(.btn) { display: inline-block; padding-block: var(--e-1); }
.menu__pe .btn { display: inline-flex; text-align: center; }

/* Qualquer grupo que vem depois de outro conteúdo na coluna, e não só
   depois de outro grupo: "Redes" vem depois dos e-mails, e com `+ grupo`
   o rótulo dela encostava no último e-mail. Depois do título da coluna
   não: ali quem dá o respiro é a margem do próprio título. */
.rodape__col > :not(h2) + .rodape__grupo { margin-top: var(--e-6); }

.rodape address { font-style: normal; }
.rodape address strong { display: block; font-weight: var(--peso-medio); color: var(--papel); }

.rodape a { transition: color var(--t-rapida) var(--suave); }
.rodape a:hover { color: var(--papel); }

/* Redes por ícone. O glifo encosta na esquerda do alvo de 44px em vez de
   ficar centrado nele: assim a marca alinha com a coluna de texto acima e
   o alvo de toque continua inteiro.

   Duas coisas desalinhavam os dois ícones. A caixa de 24 do LinkedIn
   guarda um glifo de 17,5 de altura contra 19,7 do Instagram, 11% menor,
   e com o centro em 12,25 em vez de 12: por isso cada `viewBox` foi
   recortado no desenho, e não na caixa. E `inline-flex` fazia o link
   entrar no alinhamento por linha de base, que difere entre os dois
   glifos e empurrava um deles 4px para baixo. `flex` sai disso.

   A altura é a medida que iguala, não a largura: o "in" é naturalmente
   mais largo que alto e o quadrado do Instagram não é. */
.redes {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  margin-top: var(--e-2);
}

/* A lista do rodapé empilha e por isso `li + li` ganha margem no topo.
   Aqui a lista é horizontal: a margem empurrava o segundo ícone 2px
   para baixo do primeiro. */
.redes li { display: flex; }
.rodape__col .redes li + li { margin-top: 0; }

.rede {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--texto-corpo-inv);
}

.rede svg { display: block; height: 1.75rem; width: auto; }
.rede:hover { color: var(--papel); }

.rodape__normas {
  position: relative;
  z-index: var(--z-conteudo);
  padding-block: var(--e-5);
  border-top: var(--fio) solid var(--linha-inv);
  font-size: var(--fs-sm);
  max-width: var(--medida-texto);
}

.rodape__base {
  position: relative;
  z-index: var(--z-conteudo);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-6);
  padding-block: var(--e-5);
  border-top: var(--fio) solid var(--linha-inv);
  font-size: var(--fs-sm);
}

.rodape__base p { margin-right: auto; }

.rodape__base a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

.rodape__blog-icone {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.82;
}

/* No celular as colunas empilham, e o vão de coluna do desktop virava
   oitenta pixels entre um bloco e o seguinte, o dobro do respiro de seção.
   A linha de baixo empilha também: em fileira, "Blog" e "Contato" ficavam
   numa linha e a política caía sozinha na outra. Os links vêm antes, com
   alvo de toque, e o copyright fecha. */
@media (max-width: 699px) {
  .rodape__topo { gap: var(--e-6); }

  .rodape__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .rodape__base p { order: 1; margin: var(--e-3) 0 0; }
  .rodape__base a { padding-block: var(--e-2); }
}

@media (min-width: 700px) {
  .rodape__topo { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  .rodape__topo { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--e-6); }
}


/* --------------------------------------------------------------------------
   WHATSAPP FLUTUANTE
   Verde de terceiro sobrescrito para a paleta. A etiqueta abre no hover.
   -------------------------------------------------------------------------- */

.whats {
  position: fixed;
  right: var(--goteira);
  bottom: var(--goteira);
  z-index: var(--z-whatsapp);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  height: 3.25rem;
  padding-inline: 1rem;
  border-radius: 100px;
  background: var(--tinta);
  color: var(--papel);
  box-shadow: var(--sombra-cartao);
  transition: background-color var(--t-rapida) var(--suave),
              color var(--t-rapida) var(--suave);
}

.whats:hover { background: var(--papel); color: var(--tinta); }
.whats svg { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: 0 0 auto; }

.whats__txt {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--peso-medio);
  transition: max-width var(--t-media) var(--mola);
}

.whats:hover .whats__txt,
.whats:focus-visible .whats__txt { max-width: 10rem; }


/* --------------------------------------------------------------------------
   PÁGINA INTERNA E TEXTO LEGAL
   -------------------------------------------------------------------------- */

.pagina-topo { padding-top: calc(var(--cabecalho-h) + var(--secao)); }

/* Abertura das páginas fora do menu, Blog e Política: rótulo, nome e uma
   linha, no mesmo passo das seções. Sem isso as três encostavam uma na
   outra, sem respiro nenhum. */
.pagina-topo > .rotulo + .d1 { margin-top: var(--e-3); }
.pagina-topo > .d1 + p { margin-top: var(--e-3); }

.legal { max-width: var(--medida-texto); }
.legal > :first-child { margin-top: 0; }

.legal h2 {
  margin-top: var(--e-7);
  margin-bottom: var(--e-3);
  font-size: var(--fs-d3);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  font-weight: var(--peso-medio);
  color: var(--texto);
}

.legal p, .legal ul { margin-top: var(--e-3); }
.legal ul { list-style: disc; padding-left: var(--e-4); }
.legal li { margin-top: var(--e-1); }
.legal strong { font-weight: var(--peso-forte); color: var(--texto); }
.legal address { font-style: normal; }

.legal a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: var(--fio);
}

/* --------------------------------------------------------------------------
   CAPA DAS PÁGINAS INTERNAS
   Cena inteira ao fundo, texto no terço esquerdo. Vive aqui, e não na folha
   de cada página, porque era o mesmo bloco copiado cinco vezes.

   **A altura vem de `--capa-alt`, nunca do conteúdo.** Sem piso, a banda
   media o texto: página com título de duas linhas dava 531px, com três
   dava 560, e as capas divergiam entre si.

   Sem as variáveis de banda escura o título herda `--texto`, que é quase
   preto, e some sobre a fotografia: a seção é clara na aparência e escura
   na regra. Foi esse o defeito do CTA final da home, em 31/08.
   -------------------------------------------------------------------------- */

.abertura {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  min-height: var(--capa-alt);
  background: var(--tinta);
  color: var(--texto-corpo-inv);
  --linha-cor: var(--linha-inv);
  --texto-cor: var(--papel);
  --meta-cor: var(--meta-sobre-foto);
}

/* **No celular o piso sobe**, porque ali o par de CTA empilha e a capa mais
   alta passava dele: em 390px, Projeto Corporativo media 498 e Layout 470,
   contra 432 das outras cinco. Medido com o piso desligado, a mais alta é
   Projeto Corporativo em 360 e 375, com 522px; de 540 para cima o par volta
   a caber numa linha e o piso de sempre basta. */
@media (max-width: 539px) {
  .abertura { min-height: 33rem; }
}

.abertura__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abertura__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veu-esquerda);
}

/* No celular o texto ocupa a largura toda e a ponta direita dele cai na
   parte clara do véu lateral, que é onde a fotografia costuma ser mais
   clara. `--veu-largo` mantém a direção e nunca clareia abaixo de 0.62. */
@media (max-width: 759px) {
  .abertura__veu { background: var(--veu-largo); }
}

.abertura__texto { position: relative; }

.abertura > .tela {
  padding-top: calc(var(--cabecalho-h) + var(--e-6));
  padding-bottom: var(--e-5);
}

.abertura__titulo {
  margin-top: var(--e-4);
  max-width: 20ch;
  color: var(--texto-sobre-foto);
}

.abertura__lead {
  margin-top: var(--e-3);
  max-width: 46ch;
  color: var(--texto-sobre-foto);
}

.abertura .cta { margin-top: clamp(var(--e-4), 2vw, var(--e-5)); }

@media (max-width: 759px) {
  .abertura > .tela {
    padding-top: calc(var(--cabecalho-h) + var(--e-5));
    padding-bottom: var(--e-4);
  }
}

/* --------------------------------------------------------------------------
   FAQ — sanfona nativa
   `<details>` e `<summary>`, não `<div>` com script. O abrir e fechar, o
   foco de teclado, o Enter, o Espaço e o estado anunciado ao leitor de tela
   vêm do navegador. Sem JavaScript, nada disso precisa ser reimplementado e
   nada quebra se o script falhar.

   O atributo `name` no HTML deixa a sanfona **exclusiva**: abrir uma
   fecha a anterior. Numa lista de nove perguntas é o que impede a página
   de dobrar de altura enquanto o leitor procura a dúvida dele.

   Vive aqui, e não na folha de cada página de serviço, porque era o mesmo
   bloco copiado três vezes.
   -------------------------------------------------------------------------- */

.faq__cabeca h2 { margin-top: var(--e-3); }

.faq__lista { margin-top: clamp(var(--e-4), 2.5vw, var(--e-5)); }

.faq__item { border-top: var(--fio) solid var(--linha-cor, var(--linha)); }

.faq__item:last-child { border-bottom: var(--fio) solid var(--linha-cor, var(--linha)); }

/* O marcador padrão do navegador sai, e entra o sinal da direita. As duas
   declarações são necessárias: uma para o WebKit antigo, outra para o
   resto. */
.faq__pergunta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--e-5);
  align-items: baseline;
  gap: var(--e-4);
  /* Alvo de toque de 44px com folga, e cursor de ação. */
  padding-block: var(--e-4);
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-d3);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  font-weight: var(--peso-medio);
  color: var(--texto-cor, var(--texto));
}

.faq__pergunta::-webkit-details-marker { display: none; }

/* Sinal de mais que vira menos: dois fios cruzados, e o vertical some ao
   abrir. Mais barato que um ícone e escala com o corpo do texto. */
.faq__pergunta::after {
  content: "";
  justify-self: end;
  align-self: center;
  width: var(--e-4);
  height: var(--e-4);
  background:
    linear-gradient(currentColor, currentColor) center / 100% var(--fio) no-repeat,
    linear-gradient(currentColor, currentColor) center / var(--fio) 100% no-repeat;
  opacity: 0.6;
  transition: background-size var(--t-media) var(--suave), opacity var(--t-rapida) var(--suave);
}

/* Ao abrir, o fio vertical encolhe até sumir e sobra o traço: o mais vira
   menos com movimento, não com troca seca.

   Girar 90° não serve, por mais tentador que pareça: um mais girado em 90°
   continua sendo um mais. */
.faq__item[open] .faq__pergunta::after {
  background-size: 100% var(--fio), var(--fio) 0%;
  opacity: 1;
}

.faq__pergunta:hover::after { opacity: 1; }

.faq__resposta {
  padding-bottom: var(--e-4);
  max-width: 60ch;
}

.faq__resposta p { margin: 0; }

/* A abertura desliza onde o navegador sabe interpolar `auto`. Onde não
   sabe, a resposta simplesmente aparece, que é o comportamento nativo.

   **A animação nunca esconde conteúdo.** A tentação é zerar a altura no
   estado fechado e devolver `auto` no aberto, mas aí a visibilidade da
   resposta passa a depender de a transição rodar: num contexto em que ela
   não roda, e há vários, a altura fica presa em zero e a pergunta abre
   vazia. Aqui a altura inicial vive em `@starting-style`, que só existe no
   quadro de entrada: sem transição, o valor é `auto` desde o primeiro
   quadro e a resposta aparece.

   O `interpolate-size` fica preso à lista, e não em `:root`, para não
   mudar transição nenhuma no resto do site. */
@supports (interpolate-size: allow-keywords) {
  .faq__lista { interpolate-size: allow-keywords; }

  .faq__item[open]::details-content {
    block-size: auto;
    overflow: hidden;
    transition: block-size var(--t-media) var(--suave);
  }

  @starting-style {
    .faq__item[open]::details-content { block-size: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__pergunta::after { transition: none; }
  .faq__item[open]::details-content { transition: none; }
}


/* --------------------------------------------------------------------------
   LINK NO TEXTO
   O reset tira o sublinhado de todo link, e no meio de um parágrafo ele
   precisa aparecer: é o único sinal de que o nome da página leva até ela.
   Fio em cinza de meta, que vira a cor do texto no hover.
   -------------------------------------------------------------------------- */

.link-texto,
.limite--par a {
  text-decoration: underline;
  text-decoration-thickness: var(--fio);
  text-underline-offset: 0.3em;
  text-decoration-color: var(--meta-cor, var(--texto-meta));
  transition: text-decoration-color var(--t-rapida) var(--suave);
}

.link-texto:hover,
.limite--par a:hover { text-decoration-color: currentColor; }


/* --------------------------------------------------------------------------
   LIMITE EM QUADRO
   "O limite certo" de Layout Corporativo e Assinatura: a frase de limite de um
   lado e, do outro, o quadro com o que entra e o que fica fora, cada linha
   apontando para a página que cuida dela. Vive aqui porque é o mesmo bloco
   nas duas páginas. O texto corrido que ele substituiu, com "Se... Se...",
   dizia o mesmo limite três vezes.

   **As duas colunas só abrem de 1100px para cima**, e só porque nada vem
   depois do quadro na seção. Abaixo disso tudo empilha na mesma margem
   esquerda: duas margens na mesma seção o olho lê como desalinho.

   **O fio de baixo fecha o grupo, e não a linha.** Com `:last-child` numa
   grade de duas colunas só a caixa da direita ganhava fio embaixo, e as
   duas ficavam com molduras diferentes lado a lado.
   -------------------------------------------------------------------------- */

.limites--quadro {
  row-gap: clamp(var(--e-5), 3vw, var(--e-6));
  align-items: start;
}

.limites--quadro .limites__cabeca h2 {
  margin-top: var(--e-3);
  max-width: 22ch;
}

.limites__lead {
  margin-top: var(--e-4);
  max-width: 44ch;
}

.limites__grupo + .limites__grupo { margin-top: var(--e-5); }

.limites__legenda {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding-bottom: var(--e-3);
}

.limites--quadro .limite {
  padding-block: var(--e-3);
  border-top: var(--fio) solid var(--linha-cor, var(--linha));
  color: var(--texto-cor, var(--texto));
}

.limites__grupo > .limite:last-child,
.limites__grupo dl { border-bottom: var(--fio) solid var(--linha-cor, var(--linha)); }

.limite--par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--e-4);
  align-items: baseline;
}

.limite--par dd {
  margin: 0;
  text-align: right;
}

/* A linha inteira é o link, e não só o nome da página: o nome tem 20px de
   altura, abaixo do alvo de toque de 44px, e a linha tem 58. É o mesmo
   recurso dos cartões de Serviços. */
.limite--par { position: relative; }
.limite--par dd a::after { content: ""; position: absolute; inset: 0; }

@media (min-width: 1100px) {
  .limites--quadro .limites__cabeca {
    grid-column: centro-start / centro-end;
    grid-row: 1;
    width: min(100%, 30rem);
  }

  .limites--quadro .limites__quadro {
    grid-column: centro-start / centro-end;
    grid-row: 1;
    width: calc(100% - 30rem - var(--e-7));
    margin-left: auto;
  }
}


/* --------------------------------------------------------------------------
   BANDA DE FECHO
   O CTA final de todas as páginas, inclusive a home. Vive aqui,
   e não na folha de cada página, porque era o mesmo bloco copiado oito vezes
   com três nomes de classe diferentes.

   **A cena fica presa à janela e o texto desce por cima.** É o único gesto de
   movimento pesado do site, e ele vem de `background-attachment: fixed`, sem
   uma linha de JavaScript.

   **Por que fundo em CSS e não `<picture>`:** para prender a imagem à janela
   com `position: fixed` é preciso clipar o que passa da seção, e `overflow`
   não clipa filho fixo. Quem clipa é `clip-path`, que torna a seção o bloco
   contentor do filho fixo e o faz rolar junto de novo. Com fundo o problema
   não existe. A cena passa a ser decorativa, e é o que ela é nesta banda.

   **Uma cena só, em todas as páginas, e ela não aparece: compõe.** Decisão
   do cliente em 14/09/2026. O véu é o `--veu-fecho`, que nunca abre abaixo
   de 0.80, e por isso o contraste do texto não depende da foto.

   **A imagem é declarada aqui, e não no `style` de cada página.** `url()`
   dentro de variável declarada no HTML resolvia contra esta folha, em
   `css/`, e o caminho tinha de ser a partir da raiz: aberto como arquivo, o
   navegador procurava `assets/` na raiz do disco e a banda ficava preta.
   Declarada e usada na mesma folha, o caminho é relativo a ela, e não
   depende de o site estar na raiz do domínio.

   **Duas larguras, e a estreita é a do celular.** Sem `srcset` a escolha vira
   media query: abaixo de 760px entra o arquivo pequeno, que é onde o
   `briefing-site.md` §10.3 cobra velocidade.
   -------------------------------------------------------------------------- */

.proximo,
.fecho,
.final {
  --fecho-larga: url("../assets/img/final-2000.webp");
  --fecho-estreita: url("../assets/img/final-1200.webp");
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: var(--fecho-alt);
  background-color: var(--tinta);
  background-image: var(--fecho-estreita);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--texto-corpo-inv);
  --linha-cor: var(--linha-inv);
  --texto-cor: var(--papel);
  --meta-cor: var(--meta-sobre-foto);
}

.proximo__veu,
.fecho__veu,
.final__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veu-fecho);
}

.proximo__texto,
.fecho__texto,
.final__texto { position: relative; }

/* **O respiro interno não pode ser o de seção.** `min-height` é piso e
   conteúdo vence: com o `padding-block` de `.secao` somado ao texto, a banda
   ia a 633px e o piso de `--fecho-alt` nunca mandava em nada. Aqui quem
   manda é o piso, porque a banda fecha a página e não abre. */
.proximo > .tela,
.fecho > .tela,
.final > .tela { padding-block: var(--e-6); }

/* `background-attachment: fixed` só no desktop. O iOS ignora, e onde não
   ignora ele repinta a banda inteira a cada quadro de rolagem. */
@media (min-width: 760px) {
  .proximo,
  .fecho,
  .final {
    background-image: var(--fecho-larga);
    background-attachment: fixed;
  }
}

@media (prefers-reduced-motion: reduce) {
  .proximo,
  .fecho,
  .final { background-attachment: scroll; }
}