/* ==========================================================================
   Acene — "Ofício"
   Minimalismo profissional. Sem efeito nenhum como assinatura: o que
   sustenta a página é tipografia, medida e alinhamento.

   Três decisões governam tudo aqui:

   1. UMA cor de destaque, usada pouquíssimo. O verde da marca aparece em
      talvez três lugares por tela. Contenção só parece cara quando a
      exceção é rara.
   2. Nada anima na rolagem. Movimento só existe onde há gesto do leitor
      (foco, hover, envio). Isso é o que separa "sóbrio" de "sóbrio com
      truque colado por cima".
   3. Claro e escuro de verdade, os dois pensados. É o que faz um site
      contido parecer de 2026 e não de 2012.
   ========================================================================== */

:root{
  color-scheme: light;

  --papel:#FBFBF9;
  --papel-2:#F2F2EE;
  --tinta:#12140F;
  --tinta-2:#565B54;
  --tinta-3:#8A8F87;
  --risco:rgba(18,20,15,.14);
  --risco-2:rgba(18,20,15,.07);
  --acento:#14603A;
  --acento-2:#1E6529;
  --alerta:#8C3A1E;

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --larg:1180px;
  --col:min(66ch,100%);
}

/* O claro é o padrão, sempre — mesmo em aparelho configurado no escuro. O
   escuro continua existindo, inteiro e com os contrastes recalculados, mas só
   entra quando o visitante aperta o botão. Antes o site seguia o sistema
   operacional sozinho; agora a primeira impressão é uma só, que é o que
   importa numa página que vai ser apresentada. */
:root[data-tema="escuro"]{
  color-scheme: dark;
  --papel:#0D0F0C;
  --papel-2:#15180F;
  --tinta:#EDEEE8;
  --tinta-2:#A2A89D;
  --tinta-3:#6E756B;
  --risco:rgba(237,238,232,.16);
  --risco-2:rgba(237,238,232,.08);
  --acento:#79C596;
  --acento-2:#96D6AC;
  --alerta:#E09070;
}

*{box-sizing:border-box;margin:0}
html{
  -webkit-text-size-adjust:100%;
  background:var(--papel);
  scroll-behavior:smooth;
}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--serif);
  font-size:clamp(17px,1.05vw,18.5px);
  font-weight:400;
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--acento);color:var(--papel)}

.pular{position:absolute;left:-9999px;top:0;z-index:99;background:var(--tinta);
  color:var(--papel);padding:12px 18px;font-family:var(--sans);font-size:14px}
.pular:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

/* ---------------------------------------------------------------- régua */
.faixa{max-width:var(--larg);margin-inline:auto;padding-inline:var(--gutter);width:100%}
main{position:relative}
section[id]{scroll-margin-top:96px}

/* rótulo: o único lugar onde uso caixa alta, e bem pequena */
.rot{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);
  font-feature-settings:"tnum";
}
.num{font-family:var(--sans);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ----------------------------------------------------------------- topo */
.topo{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.topo.fixado{border-bottom-color:var(--risco-2)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:15px}
.marca{
  font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-.02em;
  text-decoration:none;display:inline-flex;align-items:center
}
.marca i{font-style:normal;color:var(--acento)}
.menu{display:flex;gap:clamp(16px,2vw,30px);align-items:center}
.menu a{
  font-family:var(--sans);font-size:13.5px;font-weight:450;color:var(--tinta-2);
  text-decoration:none;position:relative;padding-block:4px;white-space:nowrap;
  transition:color .2s
}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.menu a:hover{color:var(--tinta)}
.menu a:hover::after{transform:none}
@media(max-width:920px){.menu{display:none}}

/* o botão de tema: quadrado, 1px, sem ícone fofo */
.tema{
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-2);
  background:transparent;border:1px solid var(--risco);border-radius:2px;
  padding:8px 12px;min-height:34px;cursor:pointer;
  transition:border-color .2s,color .2s
}
.tema:hover{border-color:var(--tinta-3);color:var(--tinta)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:14px;font-weight:500;
  padding:12px 20px;min-height:44px;border-radius:2px;cursor:pointer;
  background:var(--tinta);color:var(--papel);border:1px solid var(--tinta);
  text-decoration:none;transition:opacity .2s,transform .2s
}
.btn:hover{opacity:.86}
.btn:active{transform:translateY(1px)}
.btn-linha{
  background:transparent;color:var(--tinta);border-color:var(--risco)
}
.btn-linha:hover{border-color:var(--tinta);opacity:1}

/* link de texto: sublinhado fino que engrossa, nada de cor */
.lnk{
  text-decoration:none;border-bottom:1px solid var(--risco);
  transition:border-color .22s
}
.lnk:hover{border-bottom-color:var(--acento)}

/* ----------------------------------------------------------------- capa
   A capa é lida como a cabeça de um documento, em quatro registros
   horizontais: a chancela, o título, o corpo em duas colunas e a régua de
   fatos. Cada um é separado do seguinte por um fio ou por espaço medido —
   e nenhum deles deixa metade da largura vazia, que era o defeito da
   primeira versão: o título parava no meio e o aviso descia para o pé,
   então o quadrante superior direito ficava morto. */
.capa{padding-block:clamp(26px,3.4vw,44px) clamp(56px,8vw,104px)}

/* quem assina e de onde. É o que dá borda superior à página. */
.chancela{
  display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;
  padding-bottom:13px;margin-bottom:clamp(34px,4.6vw,66px);
  border-bottom:1px solid var(--risco-2)
}
.chancela span{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)
}

/* Duas colunas, duas linhas. A coluna estreita da direita é ocupada nas
   duas: aviso em cima, botões embaixo. */
/* o texto de abertura e os botões ocupam UMA célula: sem isto a colocação
   automática empurrava o aviso para uma terceira linha, sozinho */
.capa-txt{display:flex;flex-direction:column;gap:clamp(22px,2.8vw,34px)}
.capa-txt .lead,.capa-txt .acoes{margin:0}
.capa-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.76fr);
  column-gap:clamp(30px,4vw,64px);row-gap:clamp(34px,4.4vw,56px);
  align-items:start}
@media(max-width:1000px){
  .capa-in{grid-template-columns:1fr;row-gap:clamp(26px,4vw,34px)}
  /* numa coluna só: título, quem assina, o que o escritório faz, ação, e só
     então o alerta de prazo. Ninguém deve receber o aviso sem saber de quem
     é a página. */
  h1{order:1} .retrato-capa{order:2} .capa-txt{order:3} .aviso{order:4}
}

/* o aviso da reforma: hairline à esquerda, e é só isso. Nenhuma caixa,
   nenhum fundo, nenhum ícone. */
/* ------------------------------------------------- o retrato da capa
   A primeira versão desta capa não tinha imagem nenhuma: título, texto e um
   fio verde. Ficava correta e sem graça. Numa firma de 52 anos a cara de quem
   assina é o argumento, então o fundador entra no alto da coluna da direita,
   alinhado pelo pé com o título.

   Tratamento igual ao da seção de equipe: preto e branco, colorindo no hover.
   Não há frase atribuída a ele — só nome, função e a data, que é o que dá
   para verificar. */
.retrato-capa{
  margin:0;align-self:end;justify-self:end;
  width:min(232px,100%);display:flex;flex-direction:column;gap:14px
}
.retrato-capa .moldura{
  aspect-ratio:1/1;overflow:hidden;background:var(--papel-2);
  border:1px solid var(--risco-2);border-radius:2px
}
.retrato-capa img{
  width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)
}
.retrato-capa:hover img{transform:scale(1.03)}
.retrato-capa figcaption{display:flex;flex-direction:column;gap:3px}
.retrato-capa b{font-family:var(--serif);font-weight:400;font-size:18px;
  letter-spacing:-.01em;line-height:1.2}
.retrato-capa span{font-family:var(--sans);font-size:12.5px;color:var(--tinta-3)}
@media(max-width:1000px){
  .retrato-capa{justify-self:start;align-self:start;width:min(200px,54%)}
}

/* O aviso: um fio vertical e nada mais. Nenhuma caixa, nenhum fundo, nenhum
   ícone. Agora ele divide a linha de baixo com o texto de abertura. */
.aviso{
  border-left:2px solid var(--acento);padding-left:clamp(16px,1.6vw,22px);
  align-self:start;display:flex;flex-direction:column;justify-content:flex-start
}
.aviso .rot{display:block;margin-bottom:10px}
.aviso p{margin:0;font-size:16.5px;line-height:1.55;color:var(--tinta-2);max-width:30ch}
.aviso strong{font-weight:500;color:var(--tinta)}
.aviso .lnk{display:inline-block;margin-top:14px;font-family:var(--sans);
  font-size:13.5px;color:var(--tinta-2)}
.aviso .lnk::after{content:" \2192"}
@media(max-width:1000px){.aviso{display:block}}
h1{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(39px,6.9vw,90px);line-height:1.02;letter-spacing:-.027em;
  max-width:26ch;
}
/* Em tela larga o título é quebrado à mão em três linhas, para a terceira
   ser só "desde 1974." em itálico e na cor de destaque. Quebra automática
   deixaria a frase cair em lugares diferentes a cada largura, e num título
   deste tamanho isso é visível. Abaixo de 1000px volta a quebrar sozinho. */
@media(min-width:1000px){h1 span,h1 em{display:block}}
h1 em{font-style:italic;color:var(--acento);white-space:nowrap}
.lead{
  margin:0;max-width:56ch;
  font-size:clamp(17px,1.25vw,20px);line-height:1.6;color:var(--tinta-2);
  text-wrap:pretty;
}
/* os botões dividem a coluna estreita com o aviso, empilhados e com a
   largura do próprio texto — esticados virariam formulário */
/* os botões estão na coluna larga desde que o retrato tomou a estreita:
   esticados eles viravam duas barras pesadas */
.acoes{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
@media(max-width:560px){.acoes .btn{flex:1 1 200px}}

/* a régua de fatos: hairline, números em tabular, nada de caixa */
.fatos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(40px,4.6vw,66px);
  background:var(--risco-2);border-block:1px solid var(--risco-2);
}
.fatos > div{background:var(--papel);padding:22px 0 20px}
.fatos > div + div{padding-left:clamp(14px,2vw,26px)}
.fatos b{
  display:block;font-family:var(--sans);font-weight:500;
  font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums
}
.fatos span{display:block;margin-top:9px;font-family:var(--sans);font-size:12.5px;
  line-height:1.4;color:var(--tinta-3)}
@media(max-width:760px){
  .fatos{grid-template-columns:1fr 1fr}
  .fatos > div{padding-inline:0!important}
  .fatos > div:nth-child(even){padding-left:clamp(14px,4vw,26px)!important}
}

/* --------------------------------------------------------------- blocos */
.bloco{padding-block:clamp(56px,7vw,110px);border-top:1px solid var(--risco-2)}
.cab{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3vw,44px);
  align-items:baseline;margin-bottom:clamp(30px,4vw,54px)
}
.cab .n{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--tinta-3);
  font-variant-numeric:tabular-nums;padding-top:.5em}
h2{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.4vw,42px);line-height:1.12;letter-spacing:-.018em;
  max-width:20ch;text-wrap:balance
}
.texto{max-width:var(--col);font-size:clamp(16.5px,1.1vw,18.5px);line-height:1.66;
  color:var(--tinta-2);text-wrap:pretty}
.texto + .texto{margin-top:1.1em}
.texto strong{font-weight:500;color:var(--tinta)}

/* ------------------------------------------------------------- serviços */
.servicos{list-style:none;margin:0;padding:0;border-top:1px solid var(--risco-2)}
.servicos li{border-bottom:1px solid var(--risco-2)}
.servicos a{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) minmax(0,1.15fr);
  gap:4px clamp(16px,3vw,40px);align-items:baseline;
  padding:clamp(18px,2.2vw,26px) 2px;text-decoration:none;
  transition:padding-left .3s cubic-bezier(.2,.7,.3,1),background-color .3s
}
.servicos a:hover,.servicos a:focus-visible{
  padding-left:clamp(8px,1.4vw,16px);
  background:color-mix(in srgb, var(--papel-2) 70%, transparent)
}
.servicos .i{font-family:var(--sans);font-size:12px;color:var(--tinta-3);
  font-variant-numeric:tabular-nums}
.servicos .t{font-size:clamp(19px,1.8vw,24px);line-height:1.22;letter-spacing:-.014em}
.servicos .d{font-size:15px;line-height:1.55;color:var(--tinta-2)}
.servicos a:hover .i{color:var(--acento)}
@media(max-width:760px){
  .servicos a{grid-template-columns:2.6rem minmax(0,1fr)}
  .servicos .d{grid-column:2}
}

/* --------------------------------------------------------- linha do tempo */
.marcos{list-style:none;margin:0;padding:0;border-top:1px solid var(--risco-2)}
.marcos li{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;
  gap:6px clamp(16px,3vw,36px);align-items:baseline;
  padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--risco-2)
}
.marcos .dt{font-family:var(--sans);font-size:13px;color:var(--tinta-3);
  font-variant-numeric:tabular-nums}
.marcos .ev{font-size:clamp(16.5px,1.3vw,19px);line-height:1.34}
.marcos .ev small{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;
  color:var(--tinta-2)}
.marcos .st{
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-3);white-space:nowrap;padding-top:.25em
}
.marcos .st.ok{color:var(--acento)}
.marcos .st.agora{color:var(--tinta);position:relative;padding-left:15px}
.marcos .st.agora::before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--acento)
}
@media(max-width:720px){
  .marcos li{grid-template-columns:minmax(0,1fr) auto}
  .marcos .dt{grid-column:1/-1}
}

/* --------------------------------------------------------------- equipe */
.time{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,52px)}
.pessoa .retrato{
  aspect-ratio:4/5;overflow:hidden;background:var(--papel-2);
  border:1px solid var(--risco-2);border-radius:2px
}
.pessoa .retrato img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(var(--zoom,1));transform-origin:50% 30%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)
}
.pessoa:hover .retrato img{transform:scale(calc(var(--zoom,1) * 1.03))}
.time .pessoa:nth-child(1) img{--zoom:1.00;object-position:50% 20%}
.time .pessoa:nth-child(2) img{--zoom:1.02;object-position:50% 16%}
.time .pessoa:nth-child(3) img{--zoom:1.34;object-position:50% 26%}
.pessoa h3{margin:18px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,1.5vw,22px);letter-spacing:-.012em;line-height:1.2}
.pessoa .papel{margin:5px 0 0;font-family:var(--sans);font-size:12.5px;
  color:var(--tinta-3)}
.pessoa .bio{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--tinta-2);
  max-width:32ch}
@media(max-width:860px){
  .time{grid-template-columns:repeat(2,1fr);gap:30px}
  .time .pessoa:nth-child(3){grid-column:1/-1;max-width:calc(50% - 15px)}
}
@media(max-width:540px){
  .time{grid-template-columns:1fr;gap:34px}
  .time .pessoa:nth-child(3){max-width:none}
  .pessoa .retrato{max-width:280px}
}

/* ----------------------------------------------------------- depoimentos */
.vozes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,52px)}
@media(max-width:860px){.vozes{grid-template-columns:1fr;gap:32px}}
.vozes figure{margin:0;padding-top:22px;border-top:1px solid var(--risco)}
.vozes blockquote{
  margin:0;font-size:clamp(16.5px,1.25vw,19px);line-height:1.58;
  text-wrap:pretty;hanging-punctuation:first
}
.vozes figcaption{margin-top:18px;font-family:var(--sans)}
.vozes figcaption b{display:block;font-size:14px;font-weight:500}
.vozes figcaption span{display:block;margin-top:3px;font-size:12.5px;color:var(--tinta-3)}

/* -------------------------------------------------------------- contato */
.contato-grade{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr);
  gap:clamp(32px,4.5vw,76px)}
@media(max-width:900px){.contato-grade{grid-template-columns:1fr;gap:44px}}
.campos{display:grid;gap:20px 26px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.campos{grid-template-columns:1fr}}
.campo{margin:0;display:flex;flex-direction:column;gap:6px}
.campo.todo{grid-column:1/-1}
.campo label{font-family:var(--sans);font-size:12.5px;font-weight:450;color:var(--tinta-2)}
.campo input,.campo textarea,.campo select{
  width:100%;background:transparent;color:var(--tinta);
  font-family:var(--sans);font-size:15.5px;
  border:1px solid var(--risco);border-radius:2px;padding:11px 12px;
  transition:border-color .2s
}
.campo textarea{resize:vertical;min-height:118px;line-height:1.55}
.campo select{appearance:none;cursor:pointer}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-3)}
.campo input:hover,.campo textarea:hover,.campo select:hover{border-color:var(--tinta-3)}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:0;border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 16%,transparent)
}
.campo[data-ruim="true"] input,.campo[data-ruim="true"] textarea{border-color:var(--alerta)}
.campo .erro{min-height:15px;font-family:var(--sans);font-size:12px;color:var(--alerta)}
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pe-form{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}
.recado{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--tinta-2);
  margin:0;max-width:44ch}
.recado[data-tipo="ok"]{color:var(--acento)}
.recado[data-tipo="erro"]{color:var(--alerta)}

.canais{margin:0;display:grid;align-content:start;border-top:1px solid var(--risco)}
.canal{padding:16px 0;border-bottom:1px solid var(--risco-2)}
.canal dt{margin-bottom:5px}
.canal dd{margin:0;font-size:15.5px;line-height:1.58}
.canal a{text-decoration:none;border-bottom:1px solid var(--risco-2);transition:border-color .2s}
.canal a:hover{border-bottom-color:var(--acento)}

/* --------------------------------------------------------------- rodapé */
.rodape{border-top:1px solid var(--risco);padding-block:clamp(40px,5vw,68px) 28px}
.rodape-topo{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,44px)}
@media(max-width:940px){.rodape-topo{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rodape-topo{grid-template-columns:1fr;gap:26px}}
.rodape p{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--tinta-2);max-width:32ch}
.rodape ul{list-style:none;margin:12px 0 0;padding:0}
.rodape li{padding:4px 0}
.rodape li a{font-family:var(--sans);font-size:14px;color:var(--tinta-2);
  text-decoration:none;transition:color .2s}
.rodape li a:hover{color:var(--tinta)}
.rodape-pe{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  margin-top:clamp(36px,4.5vw,60px);padding-top:22px;border-top:1px solid var(--risco-2)}
.rodape-pe span{font-family:var(--sans);font-size:12px;color:var(--tinta-3)}

/* --------------------------------------------------------------- WHATSAPP
   As outras propostas usam um círculo verde que se abre no hover. Aqui não:
   círculo e animação de abertura seriam justamente o tipo de gesto que esta
   proposta evita. É um retângulo com o mesmo raio de 2px de todo o resto,
   com o rótulo já escrito — nada precisa ser descoberto passando o mouse.
   A cor é a mesma variável de destaque do site, então ela vira verde-claro
   sobre fundo escuro sozinha, sem nenhuma regra extra. */
.zap{
  position:fixed;z-index:60;
  right:max(20px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:0 18px;border-radius:2px;
  background:var(--acento);color:var(--papel);
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.005em;
  line-height:1;text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.10), 0 10px 26px -14px rgba(0,0,0,.55);
  transition:opacity .2s, transform .2s
}
.zap svg{width:19px;height:19px;flex:0 0 auto;fill:currentColor;display:block}
.zap:hover{opacity:.9}
.zap:active{transform:translateY(1px)}
.zap:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

/* alvo de 44px onde o dedo é o ponteiro */
@media(pointer:coarse){
  .zap{gap:0;width:52px;min-height:52px;padding:0;justify-content:center}
  .zap span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .marca{min-height:44px;align-items:center}
  .menu a{padding-block:12px}
  .rodape li a{display:inline-block;padding-block:11px}
  .canal a{display:inline-block;padding-block:12px}
  .lnk{display:inline-block;padding-block:12px}
  .tema{min-height:44px;padding-inline:15px}
  .aviso .lnk{padding-block:12px}
  .campo input,.campo select{min-height:46px}
  .campo textarea{min-height:130px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

@media print{
  .topo,.tema,.zap,.acoes{display:none}
  body{background:#fff;color:#000}
}