/* ============================================================
   REVELARIUM — páginas internas
   Sobre, Contato, Privacidade e Termos.

   Carrega SEMPRE depois de /style.css, que é quem traz as
   variáveis de cor, o cabeçalho, o rodapé e a tipografia. Aqui
   entra só o que a home não tem: coluna de leitura longa,
   formulário e o selo de confirmação de envio.
   ============================================================ */

/* ------------------------------------------------------------
   A COLUNA
   O cabeçalho é fixo. Sem esta folga no topo, o título de toda
   página interna nasceria debaixo da barra. No celular o menu
   desce para a segunda linha (o flex-wrap do style.css), então
   a barra é mais alta lá — daí a folga MENOR no desktop, não
   maior, que é o contrário do instinto.
   ------------------------------------------------------------ */
/* A LARGURA É A DO CABEÇALHO, E A CONTA É A MESMA

   Esta linha é cópia literal do padding lateral do `header` no
   style.css, e tem que continuar sendo. É ela que faz o texto começar
   exatamente onde começa o logo e terminar onde termina o menu.

   Como funciona: enquanto a tela é menor que 1080px, `--respiro` ganha
   e todo mundo fica colado na borda com a mesma folga; passando de
   1080px, a metade da sobra ganha e todo mundo para na mesma linha
   invisível. Logo, menu e texto se movem JUNTOS para o centro conforme
   a tela encolhe, porque estão obedecendo à mesma conta — e não porque
   alguém acertou dois valores parecidos que um dia vão se separar.

   A leitura numa tela muito larga fica com linha longa. É escolha
   deliberada: o desenho da página é uma coluna alinhada à marca, não
   uma coluna estreita boiando no meio do vazio. */
.pagina{ padding:128px max(var(--respiro), calc((100% - var(--medida)) / 2)) 80px; }

/* O .container do style.css centraliza em 1080px. Aqui quem já faz isso
   é o padding acima — deixar os dois agindo empilharia uma margem em
   cima da outra e o texto sairia de registro com o cabeçalho. */
.pagina .container{ max-width:none; margin:0; }

/* ------------------------------------------------------------
   A REGRA DA LARGURA NESTAS PÁGINAS

   Quem decide onde o texto quebra é a COLUNA, não um limite de
   caracteres. A coluna já é a largura da marca — do logo ao fim
   do menu — e ela encolhe sozinha quando a tela encolhe. Quebra
   por tela estreita é comportamento responsivo. Quebra em três
   linhas com 600px de sobra à direita é limite artificial.

   Limite em `ch` só continua existindo em dois lugares, e por
   motivo específico:

     - dentro de um card, que já é um contêiner estreito;
     - em texto CENTRALIZADO (o selo e o véu do contato), onde a
       linha longa afasta demais o começo de uma linha do começo
       da seguinte e a leitura realmente sofre.

   Fora desses dois casos, não coloque max-width aqui.
   ------------------------------------------------------------ */
.pagina h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(32px, 7vw, 54px);
  line-height:1.1; letter-spacing:-.01em;
  /* explícito porque o style.css dá 19ch a todo h1 — regra do hero
     da home, onde a silhueta ocupa o lado direito e o título PRECISA
     parar antes. Aqui não há silhueta e não há por que parar. */
  max-width:none;
  /* `pretty` e nao `balance`. O balance reparte o titulo em linhas de
     comprimento parecido — bonito num titulo curto e centralizado,
     errado aqui: numa coluna de 1080px ele quebrava "Por que voce
     recua quando as / coisas comecam a dar certo" bem antes da borda
     direita, e o titulo parecia nao pertencer a mesma largura do
     resto da pagina. O `pretty` deixa a linha ir ate o fim e so cuida
     de nao largar uma palavra sozinha na ultima. Navegador que nao
     conhece `pretty` ignora e preenche a linha, que e o que se quer. */
  text-wrap:pretty;
}
.pagina .abertura{
  margin-top:22px;
  font-size:clamp(17px, 4vw, 21px);
  color:var(--ocre-suave);
}

/* Fio âmbar entre o cabeçalho da página e o corpo do texto. */
.pagina .fio{
  border:0; height:1px; margin:44px 0 40px;
  background:linear-gradient(to right, var(--ambar), var(--linha) 42%, transparent);
}

/* ------------------------------------------------------------
   TEXTO CORRIDO
   O style.css centraliza h2 e reserva 52px embaixo — regra da
   home, onde h2 é título de seção sozinho no meio da tela. Em
   texto corrido isso desmonta a leitura, então aqui volta tudo
   para a esquerda e para uma distância de parágrafo.
   ------------------------------------------------------------ */
.prosa{ font-size:17px; line-height:1.75; }
.prosa p, .prosa li{ color:rgba(234,224,203,.84); }
.prosa p{ margin-bottom:20px; }
.prosa h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(23px, 4.6vw, 31px);
  text-align:left; margin:52px 0 18px; line-height:1.25;
  color:var(--pergaminho);
}
.prosa h2:first-child{ margin-top:0; }
.prosa h3{
  font-family:var(--sans); font-weight:600;
  font-size:16px; letter-spacing:.02em;
  margin:32px 0 12px; color:var(--ambar);
}
.prosa ul, .prosa ol{ margin:0 0 22px 24px; }
.prosa li{ margin-bottom:10px; }
.prosa li::marker{ color:var(--ambar); }
.prosa strong{ color:var(--pergaminho); font-weight:600; }
.prosa a{ text-decoration:underline; text-underline-offset:3px; }

/* Bloco de destaque: uma definição, um endereço, um prazo. */
.prosa .destaque{
  background:var(--azul-card);
  border-left:2px solid var(--ambar);
  border-radius:0 3px 3px 0;
  padding:18px 22px; margin:0 0 24px;
}
.prosa .destaque p:last-child{ margin-bottom:0; }

/* Data de vigência, no alto dos documentos legais. */
.vigencia{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#8A8370; margin-top:18px;
}

/* ------------------------------------------------------------
   A BATIDA

   As linhas isoladas que carregam o argumento — "Não do
   princípio. De você." Elas não são citação nem destaque
   decorativo: são o ritmo do texto, e precisam de silêncio em
   volta para funcionar. Maiores, em serifa, com o dobro de
   respiro. Uma a cada seção, no máximo — usadas demais, viram
   ruído e a página perde o compasso.
   ------------------------------------------------------------ */
.prosa .batida{
  font-family:var(--serif);
  font-size:clamp(21px, 4.4vw, 27px);
  line-height:1.35; color:var(--pergaminho);
  text-wrap:balance;
  margin:38px 0 38px;
}
.prosa .batida em{ font-style:italic; color:var(--ambar-claro); }
.prosa .batida strong{ color:var(--ambar); font-weight:600; }

/* Fecho de página: o botão e a letra miúda na mesma linha. */
.acao-final{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  margin:52px 0 0;
}
.nota-pagina{
  margin-top:44px; padding-top:24px;
  border-top:1px solid var(--linha);
  font-size:13px; line-height:1.7; color:#8A8370;
}

/* Marcação de texto que ainda não foi escrito. Mesma linguagem do
   [ capa do livro ] da home: monoespaçado e sem graça de propósito,
   para gritar na tela e não sobreviver a uma revisão distraída. */
.aguardando{
  border:1px dashed var(--linha); border-radius:3px;
  padding:28px 22px; margin-bottom:22px;
  text-align:center;
}
.aguardando p{
  font-family:monospace; font-size:12px; letter-spacing:.06em;
  color:var(--ocre-suave); margin:0;
}

/* ------------------------------------------------------------
   REVELAÇÕES — a listagem
   ------------------------------------------------------------ */

/* O rastro no alto do artigo. Faz o papel do eyebrow e, de quebra,
   devolve o caminho para a listagem — que é como quem chega por
   busca descobre que existe mais de um texto aqui. */
.rastro{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ocre-suave); margin-bottom:20px;
}
.rastro a{ color:var(--ambar); }

/* O destaque: um cartão só, do tamanho da coluna. É a porta para
   quem chega sem saber por onde começar. */
.destaque{
  display:block;
  background:var(--azul-card);
  border:1px solid var(--linha);
  border-left:2px solid var(--ambar);
  border-radius:0 4px 4px 0;
  padding:34px 30px;
  color:var(--pergaminho);
  transition:background .25s, border-color .25s;
}
.destaque:hover{ background:#182742; color:var(--pergaminho); border-color:var(--ambar); }
.destaque-selo{
  display:block; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ambar); margin-bottom:14px;
}
.destaque h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px, 5.4vw, 38px); line-height:1.2;
  text-align:left; margin:0 0 16px; text-wrap:balance;
}
.destaque p{ color:var(--ocre-suave); margin:0 0 20px; }
.destaque-acao{ font-size:14px; letter-spacing:.06em; color:var(--ambar); }

.lista-titulo{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(22px, 4.4vw, 28px);
  text-align:left; margin:58px 0 22px;
}

/* Os cards herdam .artigos/.artigo do style.css, que é a mesma
   grade da home — o olho reconhece o padrão de um lugar para o
   outro. Aqui só entra o resumo, que a home não mostra. */
.artigo-olho{
  color:var(--ocre-suave); font-size:15px; line-height:1.6;
  margin:12px 0 16px;
}
.artigo > span{ font-size:14px; letter-spacing:.06em; color:var(--ambar); }

/* A grade fecha sozinha em qualquer quantidade.

   A home tem exatamente três cards e usa três colunas. A listagem tem
   um número que muda a cada cluster novo — com cinco artigos e três
   colunas, sobrava uma célula vazia no canto, que dentro da moldura
   parecia card faltando.

   Duas colunas resolvem para número par. Para ímpar, o último card
   atravessa a linha inteira: a regra vale para 5, 7, 9 ou 21 artigos,
   sem ninguém precisar voltar aqui para contar de novo. */
@media (min-width:760px){
  .pagina .artigos{ grid-template-columns:1fr 1fr; }
  .pagina .artigo:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* ------------------------------------------------------------
   REVELAÇÕES — o bloco de convite

   Componente fixo no fim de todo artigo. O traço âmbar à esquerda
   é o mesmo do .destaque de propósito: dentro do site, esse traço
   quer dizer sempre "este é o caminho principal daqui".
   ------------------------------------------------------------ */
.convite{
  background:var(--azul-card);
  border-left:2px solid var(--ambar);
  border-radius:0 4px 4px 0;
  padding:30px 30px 32px;
  margin:56px 0 0;
}
.convite-ponte{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(20px, 4.2vw, 26px); line-height:1.35;
  color:var(--pergaminho); margin:0 0 14px;
}
.convite p{ color:var(--ocre-suave); margin:0 0 24px; }
.convite .micro{ margin:14px 0 0; }

.convite-metodo{
  margin:26px 0 0; font-size:15px; line-height:1.7;
  color:var(--ocre-suave); font-style:italic;
}
.convite-metodo a{ font-style:normal; white-space:nowrap; }

/* ------------------------------------------------------------
   REVELAÇÕES — a malha interna
   ------------------------------------------------------------ */
.malha{ margin-top:56px; padding-top:34px; border-top:1px solid var(--linha); }
.malha h2{
  font-family:var(--sans); font-weight:600;
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ambar); text-align:left; margin:0 0 20px;
}
.malha ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.malha li{ margin:0; }
.malha li a{
  display:block; background:var(--azul-card);
  padding:18px 22px; color:var(--pergaminho);
  transition:background .25s;
}
.malha li a:hover{ background:#182742; color:var(--pergaminho); }
.malha li small{
  display:block; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ambar); margin-bottom:6px;
}
.malha li span{ font-family:var(--serif); font-size:19px; line-height:1.35; }
.malha-todas{ margin:22px 0 0; font-size:14px; }

/* ------------------------------------------------------------
   FORMULÁRIO DE CONTATO
   ------------------------------------------------------------ */
/* O espaço entre os campos é menor que o espaço em volta do formulário
   de propósito: rótulo, campo e aviso pertencem uns aos outros, e os
   três campos pertencem ao mesmo bloco. Afastá-los faz o olho ler três
   formulários em vez de um. */
.form-contato{ display:grid; gap:20px; max-width:34rem; }
.campo{ display:grid; gap:9px; }
.campo label{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ambar);
}
.campo input,
.campo textarea{
  width:100%;
  background:var(--azul-card);
  border:1px solid var(--linha);
  border-radius:3px;
  padding:14px 16px;
  color:var(--pergaminho);
  font-family:var(--sans);
  /* 16px não é escolha estética: abaixo disso o Safari do iPhone dá
     zoom sozinho ao focar o campo e a página inteira sai do lugar. */
  font-size:16px; line-height:1.5;
  transition:border-color .2s, background .2s;
}
.campo textarea{ min-height:11rem; resize:vertical; }
.campo input::placeholder,
.campo textarea::placeholder{ color:#6C6653; }
.campo input:focus,
.campo textarea:focus{
  outline:none; border-color:var(--ambar); background:#16243B;
}
.campo.erro input,
.campo.erro textarea{ border-color:#B4553F; }
.campo .aviso{ font-size:13px; color:#D08C78; }
/* Aviso vazio sai do fluxo inteiro — inclusive da fresta que a grade
   reservaria para ele. Guardar altura para um erro que quase nunca
   aparece custa espaço em toda visita e afasta campos que deveriam ser
   lidos como um bloco só.

   O salto que isso permite acontece no envio, que é justamente quando a
   pessoa espera a tela mudar. Não é o mesmo caso do oráculo, que muda
   no meio da digitação e por isso mantém a altura reservada. */
.campo .aviso:empty{ display:none; }

/* ------------------------------------------------------------
   O ORÁCULO
   A frase que se monta enquanto a pessoa digita o nome.

   min-height fixo mesmo vazio: sem isso o formulário inteiro
   pula para baixo na terceira letra digitada e a pessoa perde o
   campo de vista no meio da própria palavra.
   ------------------------------------------------------------ */
.oraculo{
  min-height:1.6em;
  font-family:var(--serif);
  font-size:clamp(16px, 3.8vw, 19px);
  line-height:1.6; color:var(--ocre-suave);
  opacity:0; transform:translateY(-3px);
  transition:opacity .4s ease, transform .4s ease;
}
.oraculo.visivel{ opacity:1; transform:none; }
.oraculo b{ color:var(--ambar); font-weight:600; }

/* Armadilha para robô de spam. Fora da tela em vez de display:none —
   robô que se preze ignora campo escondido por display, mas preenche
   um que está no fluxo. Quem navega por teclado ou leitor de tela
   nunca chega nele, por causa do tabindex e do aria-hidden no HTML. */
.armadilha{
  position:absolute; left:-9999px;
  width:1px; height:1px; overflow:hidden;
}

.form-contato .cta{ justify-self:start; border:0; cursor:pointer; font-family:var(--sans); }
.form-contato .cta[disabled]{ opacity:.55; cursor:progress; }

.form-rodape{ font-size:14px; color:var(--ocre-suave); margin-top:26px; }

/* ------------------------------------------------------------
   O SELO DE CONFIRMAÇÃO
   Substitui o formulário depois do envio.

   O selo em SVG abaixo é o padrão, não um plano B: ele já está
   no HTML e já anima sozinho. Se o arquivo Lottie existir, o
   contato.js troca um pelo outro depois de carregar — e se não
   existir, ninguém percebe que faltou alguma coisa.
   ------------------------------------------------------------ */
.envio-ok{ text-align:center; padding:8px 0 12px; }
.envio-ok[hidden]{ display:none; }
/* O contato.js move o foco para cá quando o selo entra, para que leitor
   de tela e navegação por teclado não fiquem parados num botão que
   acabou de sumir. O :focus-visible do style.css desenharia um retângulo
   âmbar em volta do bloco inteiro — anel de foco em volta de um painel
   não indica nada a ninguém, só suja a tela. O foco continua indo; só a
   moldura sai. */
.envio-ok:focus,
.envio-ok:focus-visible{ outline:none; }
.envio-ok-arte{ width:min(220px, 56vw); margin:0 auto 28px; }
.envio-ok h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px, 5.5vw, 38px);
  text-align:center; margin:0 0 16px; text-wrap:balance;
}
.envio-ok p{ color:var(--ocre-suave); max-width:38ch; margin:0 auto 10px; }

/* ------------------------------------------------------------
   O VÉU
   A confirmação de tela cheia. Cobre o site inteiro com um preto
   quase opaco e põe a ilustração no meio.

   O selo em SVG da seção acima continua existindo e continua sendo
   trocado pelo formulário por baixo — o véu vem POR CIMA dele, não
   no lugar dele. Assim, quando a pessoa fecha o véu, a página
   embaixo já está confirmada, e se a ilustração não carregar o véu
   simplesmente não abre e o selo é a confirmação.
   ------------------------------------------------------------ */
.veu{
  position:fixed; inset:0; z-index:100;
  /* Preto com um pouco de transparência: a página continua sendo
     insinuada por trás, mas sem entregar forma nenhuma. A 93% o anel
     do selo aparecia de fantasma bem atrás do título; o borrão mais
     forte resolve sem precisar fechar o véu inteiro. */
  background:rgba(4,7,13,.95);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  /* numa janela baixa a ilustração mais o texto não cabem: o véu
     rola por dentro em vez de cortar o fim da mensagem */
  overflow-y:auto;
  padding:40px var(--respiro);
  animation:veu-entra .5s ease both;
}
.veu[hidden]{ display:none; }

.veu-caixa{ text-align:center; max-width:34rem; }
.veu-caixa:focus{ outline:none; }
.veu-arte{
  width:min(420px, 74vw); margin:0 auto 30px;
  animation:veu-arte-entra .9s cubic-bezier(.2,.7,.3,1) both;
}
.veu-arte svg{ width:100%; height:auto; display:block; }
.veu h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(28px, 6vw, 42px);
  text-align:center; margin:0 0 16px; text-wrap:balance;
  animation:veu-texto-entra .7s ease .35s both;
}
.veu p{
  color:var(--ocre-suave); max-width:36ch; margin:0 auto 30px;
  animation:veu-texto-entra .7s ease .5s both;
}
.veu-acoes{ animation:veu-texto-entra .7s ease .65s both; }
.veu-fechar{
  display:block; margin:22px auto 0;
  background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:#6E6754;
}
.veu-fechar:hover{ color:var(--ambar); }

@keyframes veu-entra       { from{ opacity:0 } to{ opacity:1 } }
@keyframes veu-arte-entra  { from{ opacity:0; transform:translateY(18px) scale(.96) } to{ opacity:1; transform:none } }
@keyframes veu-texto-entra { from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* Enquanto o véu está aberto, a página de trás não rola: sem isto o
   dedo no celular rola o formulário atrás da ilustração. */
body.veu-aberto{ overflow:hidden; }

.selo{ width:100%; height:auto; display:block; overflow:visible; }
.selo .anel{
  fill:none; stroke:var(--ambar); stroke-width:1.5;
  /* 2·pi·r com r=52 dá 326,7 — o traço nasce todo deslocado e a
     animação o recolhe até zero, que é o círculo se desenhando. */
  stroke-dasharray:327; stroke-dashoffset:327;
  animation:selo-traco 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
.selo .anel-fino{
  fill:none; stroke:var(--ambar); stroke-width:1; opacity:.4;
  stroke-dasharray:5 11;
  transform-origin:60px 60px;
  animation:selo-gira 26s linear infinite;
}
.selo .marca{
  fill:none; stroke:var(--pergaminho); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  /* o traço do "v" mede ~49px no viewBox; a máscara precisa ser MAIOR
     que ele, senão sobra um pedaço desenhado antes da animação começar */
  stroke-dasharray:50; stroke-dashoffset:50;
  animation:selo-traco .5s ease .85s forwards;
}
.selo .fagulha{ fill:var(--ambar); opacity:0; animation:selo-fagulha 3.2s ease-in-out infinite; }
.selo .fagulha:nth-of-type(2){ animation-delay:.9s; }
.selo .fagulha:nth-of-type(3){ animation-delay:1.8s; }

@keyframes selo-traco  { to{ stroke-dashoffset:0; } }
@keyframes selo-gira   { to{ transform:rotate(360deg); } }
@keyframes selo-fagulha{ 0%,100%{ opacity:0 } 50%{ opacity:.85 } }

/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */
@media (min-width:760px){
  /* No desktop o menu cabe ao lado do logo e a barra fica mais
     baixa — a folga do topo diminui junto. */
  .pagina{ padding-top:118px; padding-bottom:100px; }
  .prosa{ font-size:18px; }

  /* O formulário acompanha a mesma largura do resto da página. Nome e
     e-mail dividem a linha; a mensagem e o botão atravessam.

     O oráculo mora dentro da célula do nome e cresce para duas linhas
     quando a frase é comprida. Numa grade, a célula mais alta manda na
     altura da linha inteira — sem a reserva de duas linhas embaixo, o
     campo de e-mail daria um salto para baixo no meio da digitação do
     nome, que é exatamente o susto que o min-height existe para evitar. */
  .form-contato{ max-width:none; grid-template-columns:1fr 1fr; gap:18px 28px; }
  #campoNome{ grid-column:1; }
  #campoEmail{ grid-column:2; }
  #campoMensagem,
  .form-contato .armadilha,
  .form-contato .cta,
  .form-contato > .aviso{ grid-column:1 / -1; }
  /* alinha o e-mail pelo topo, e não esticado pela altura da célula */
  .campo{ align-content:start; }
}

/* ------------------------------------------------------------
   MOVIMENTO REDUZIDO
   Quem pediu ao sistema para reduzir animações recebe o selo
   inteiro, pronto e parado. Nada de traço se desenhando, nada
   girando. O contato.js completa: com esta preferência ligada,
   nem tenta carregar o Lottie.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .oraculo{ transition:none; }
  .selo *{
    animation:none !important;
    stroke-dashoffset:0 !important;
  }
  .selo .fagulha{ opacity:.7 !important; }
  /* O véu ainda abre — ele é a confirmação, não enfeite. O que sai é
     a entrada deslizando e a ilustração, que anima sozinha por dentro
     (o contato.js congela o SMIL dela nesse caso). */
  .veu, .veu-arte, .veu h2, .veu p, .veu-acoes{ animation:none !important; }
}

/* ============================================================
   SOBRE — DIAGRAMAÇÃO
   Só a /sobre/ usa este bloco. As páginas legais e o Contato
   continuam na .prosa corrida, que é o certo para elas.

   O PROBLEMA QUE ISTO RESOLVE
   O Sobre é o texto mais longo do site e vinha como um único
   fio de parágrafos, todos com o mesmo corpo, o mesmo
   espaçamento e a mesma medida — que aqui é a largura inteira
   da marca, 1080px. Linha longa, nenhum ponto de apoio para o
   olho, e um leitor que desiste no terceiro bloco.

   O QUE MUDA
   Cada movimento do texto vira uma seção com trilho à esquerda:
   o nome do movimento em caixa alta âmbar de um lado, a leitura
   do outro, ocupando o resto da largura. A largura da página continua
   sendo a da marca — a decisão do topo deste arquivo segue de pé.
   O que era linha comprida virou estrutura.

   E onde o conteúdo já era uma lista disfarçada de parágrafo, ele
   passa a parecer o que é: os três instrumentos viram três
   caixas, e as promessas do compromisso viram etiquetas.
   ============================================================ */

/* 1.66 e nao os 1.75 da .prosa comum: com o texto agora quebrado em
   secoes, caixas e etiquetas, a entrelinha larga que segurava a leitura
   num bloco unico passou a somar com o respiro das secoes e deixava a
   pagina com cara de rascunho espacado. */
.pagina-sobre .prosa{ font-size:17px; line-height:1.66; }
/* Na tela larga a linha fica longa por decisao de projeto (o texto vai
   ate a borda direita do menu). Linha longa precisa de MAIS entrelinha,
   nao menos: e o que da ao olho a pista de onde recomecar a proxima. */
@media (min-width:900px){ .pagina-sobre .prosa{ line-height:1.72; } }

/* ---- O TRILHO ---- */
.sobre-secao{
  display:grid;
  gap:8px;
  padding:52px 0;
  border-top:1px solid var(--linha);
}
@media (min-width:900px){
  .sobre-secao{
    /* 1fr, e nao uma medida de leitura: o texto vai ate a borda
       direita da pagina, alinhado com o fim do menu do cabecalho.
       Regra da casa, a mesma que rege o .pagina la em cima. O trilho
       da esquerda continua deslocando o texto; o que muda e que o
       lado direito nao para antes da hora. */
    grid-template-columns:190px minmax(0, 1fr);
    gap:0 60px;
    padding:66px 0;
  }
}

.sobre-marca{
  margin:0; padding-top:.75em;
  font-family:var(--sans); font-weight:600;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ambar);
}
.sobre-corpo > :first-child{ margin-top:0; }
.sobre-corpo p:last-child{ margin-bottom:0; }

/* ---- A ABERTURA ----
   Sem trilho e sem linha em cima: é a entrada do texto, não um
   movimento entre outros. Corpo maior para soar como voz, não
   como parágrafo. */
.sobre-abertura{ border-top:0; padding-top:8px; }
.sobre-abertura p{ font-size:19px; line-height:1.72; color:var(--pergaminho); }

/* ---- AS TESES ----
   As frases que carregam a ideia inteira. Já vinham em serifada
   graças à .batida; o que faltava era o traço curto em cima, que
   é o que faz o olho parar. Mesmo vocabulário do .fio do topo da
   página — a casa marca pausa com fio âmbar, não com caixa. */
.sobre-corpo .batida{
  position:relative;
  margin:36px 0;
  padding-top:24px;
  color:var(--ambar-claro);
}
.sobre-corpo .batida::before{
  content:"";
  position:absolute; top:0; left:0;
  width:46px; height:1px;
  background:var(--ambar);
}

/* ---- OS TRÊS INSTRUMENTOS ----
   Eram uma frase só, com os três emendados. São três coisas
   diferentes e agora se leem como três. */
.sobre-instrumentos{
  list-style:none;
  margin:26px 0 0; padding:0;
  display:grid; gap:14px;
}
@media (min-width:760px){
  .sobre-instrumentos{ grid-template-columns:repeat(3, 1fr); }
}
.sobre-instrumento{
  border:1px solid var(--linha);
  border-radius:4px;
  background:rgba(10,17,29,.5);
  padding:22px 20px 24px;
}
.sobre-instrumento h3{
  margin:0 0 12px;
  font-family:var(--sans); font-weight:600;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ambar);
}
.sobre-instrumento h3 a{ color:inherit; text-decoration:none; }
.sobre-instrumento h3 a:hover{ color:var(--ambar-claro); }
.sobre-instrumento p{ margin:0; font-size:15.5px; line-height:1.62; }
.sobre-remate{ margin-top:26px; }

/* ---- O COMPROMISSO ----
   As três negativas eram uma frase corrida. Viram etiquetas: é a
   parte do texto que a pessoa precisa poder conferir de relance,
   sem ler o parágrafo inteiro. */
.sobre-nunca{
  list-style:none;
  margin:26px 0 24px; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.sobre-nunca li{
  border:1px solid var(--linha);
  border-radius:2px;
  padding:8px 13px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ocre-suave);
}

/* ---- O FECHAMENTO ----
   Centralizado, e é a única parte da página que é. Depois de sete
   movimentos alinhados à esquerda, virar para o centro fecha o
   texto — o olho entende que acabou antes de ler a última linha. */
.sobre-fecho{
  border-top:1px solid var(--linha);
  padding:70px 0 0;
  text-align:center;
}
.sobre-fecho .sobre-marca{ padding:0; margin-bottom:22px; }
.sobre-nao{
  list-style:none; margin:0 auto; padding:0;
  /* 42ch, e nao 32: as tres linhas sao frases inteiras e precisam
     caber cada uma na sua. Em 32ch a primeira quebrava em
     "Voce nao precisa acreditar mais / forte." */
  max-width:42ch;
}
.sobre-nao li{
  font-size:19px; line-height:1.95;
  color:rgba(234,224,203,.84);
}
.sobre-fecho .batida{
  margin:32px auto 0; padding-top:0;
  max-width:30ch;
  text-wrap:balance;
}
.sobre-fecho .batida::before{ display:none; }
.pagina-sobre .acao-final{ justify-content:center; margin-top:44px; }

@media (max-width:899px){
  .sobre-secao{ padding:40px 0; }
  .sobre-abertura p{ font-size:18px; }
  .sobre-fecho{ padding-top:48px; }
  .sobre-nao li{ font-size:17.5px; line-height:1.85; }
}

/* O .prosa h2 declara text-align:left, e alinhamento herdado não vence
   declaração explícita — o centro do fechamento precisa ser dito aqui. */
.sobre-fecho h2{ text-align:center; margin:0 0 26px; }
/* A abertura não tem trilho, mas precisa do lugar dele para o corpo
   cair na segunda coluna. Em coluna única o vazio viraria um respiro
   a mais no topo da página. */
.sobre-abertura > div:empty{ display:none; }
@media (min-width:900px){ .sobre-abertura > div:empty{ display:block; } }

/* ---- CORREÇÃO DE ESPECIFICIDADE ----
   `.prosa ul` vale (0,1,1) e declara `margin-left:24px` para listas de
   texto corrido. As três listas desta página não são listas de leitura
   — são caixas, etiquetas e um fechamento centralizado — e estavam
   herdando aquele recuo: as caixas saíam desalinhadas dos parágrafos e
   o fechamento centralizava 24px fora do eixo da página. Os seletores
   abaixo têm dois nomes de classe justamente para ganhar de lá. */
.sobre-corpo .sobre-instrumentos{ margin:26px 0 0; }
.sobre-corpo .sobre-nunca{ margin:26px 0 24px; }
.sobre-fecho .sobre-nao{ margin:0 auto; }
/* mesma história: `.prosa li` dá 10px embaixo de cada item, que aqui
   se somariam ao gap do grid e ao respiro das etiquetas */
.sobre-instrumentos li,
.sobre-nunca li,
.sobre-nao li{ margin-bottom:0; }
/* Trecho que não pode quebrar por dentro — usado nos títulos formados
   por duas frases curtas, para a quebra cair entre elas. */
.pagina-sobre .nq{ white-space:nowrap; }

/* ------------------------------------------------------------
   A ARTE DO ARTIGO
   Entra entre o título e o texto, no lugar do `.fio` — ver o
   comentário em includes/revelacoes-topo.php.

   A base dissolve no fundo da página. É a técnica anti "quadrado
   colado" dos FUNDAMENTOS (seção 7), aplicada de leve: as artes já
   nascem com as bordas escuras, então 8% de esfumado bastam para o
   corte sumir. Mais que isso começaria a comer a imagem — na arte do
   primeiro artigo as mãos chegam perto da borda de baixo.
   ------------------------------------------------------------ */
.artigo-arte{
  width:100%; height:auto;
  /* sem margem em cima: quem dá o respiro é o margin-bottom do .fio,
     que vem logo antes dela */
  margin:0 0 40px;
  border-radius:4px;
  -webkit-mask-image:linear-gradient(180deg, #000 92%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 92%, transparent 100%);
}
@media (max-width:760px){
  .artigo-arte{ margin:0 0 30px; }
}