/* ══════════════════════════════════════════════════════════════════════════
   JÉFFERSON ESTEVÃO · ADVOCACIA — SITE v3

   Esta versão veste a gramática da APRESENTAÇÃO DE IDENTIDADE dele
   (apresentacao-jefferson.vercel.app), que é a peça que ele já aprovou.
   O que foi trazido de lá, elemento por elemento:

     herói .............. foto sangrada + véu marinho vindo da esquerda
     título ............. duas linhas em Palatino, a segunda em OURO
     rótulo ............. marcador dourado redondo antes do texto
     selos .............. fileira de etiquetas com borda fina
     cartões ............ numerados, canto arredondado, borda de fio
     corpo .............. destaque em negrito dentro do parágrafo

   A foto do herói mudou duas vezes. Saiu a da poltrona da apresentação,
   passou pelo ensaio de estúdio e hoje é uma de tribunal: ele de toga, em
   pé, sustentando oralmente. Ela entra em duas camadas iguais, o quadro
   inteiro e o recorte dele sem fundo por cima, para que a silhueta fique à
   frente e o texto more na porta escura à esquerda.

   NÃO EXISTE MAIS VÉU NENHUM no herói. Os dois gradientes que ficavam
   acima e abaixo do recorte foram removidos a pedido do Luiz, já sabendo
   do custo em contraste. Se um dia o texto voltar a sumir sobre a foto, a
   causa é esta, e a saída é respaldo local (como o dos selos), não véu.

   TRÊS COISAS QUE NÃO SE NEGOCIAM (iguais à v1 e à v2)
   1. O telefone nunca fica a mais de um polegar.
   2. Nada anima antes da primeira tela estar pronta.
   3. Tudo funciona com o JavaScript desligado.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/lato-700.woff2') format('woff2')}

:root{
  --ink:#0E1526;
  --marinho:#16203A;
  --papel:#F4F1EA;
  --ouro:#C9A961;
  /* O bronze é o ouro para fundo claro. Sobre o papel o ouro mede contraste
     2,00, abaixo dos 3,0 do título e dos 4,5 do rótulo; o bronze mede 5,36.
     A faixa de papel usou o ouro de 31/08 a 16/09 e passou ao bronze por
     decisão do Luiz, para o site seguir a regra da Central. */
  --bronze:#7A5F16;

  /* Os dois verdes do WhatsApp, e a diferença é de função, não de descuido.
     --zap é para PREENCHIMENTO. É mais fundo que o verde puro da marca porque
     o puro tem luminância .479 contra .417 do ouro: cheio, ele fica mais
     brilhante que o dourado e rouba a vez do telefone. Este tem .297.
     --zap-luz é para SÍMBOLO SOBRE ESCURO, onde o problema se inverte: ali o
     verde fundo empasta contra o marinho e o brilhante é que separa. */
  --zap:#2DA95B;
  --zap-luz:#25D366;

  --fio:rgba(244,241,234,.13);
  --fio-forte:rgba(244,241,234,.26);
  --fio-ouro:rgba(201,169,97,.32);
  --mute:rgba(244,241,234,.66);
  --dim:rgba(244,241,234,.52);

  --marca:Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;
  --ui:'Lato',Arial,Helvetica,sans-serif;
  --expo:cubic-bezier(.22,1,.36,1);

  --faixa:64px;
  --caixa:1320px;
  --gutter:clamp(20px,4vw,56px);
  --ar:clamp(72px,10vh,124px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* A faixa do topo é fixa: sem esta folga, quem chega por link com âncora
   para com o título da seção escondido atrás dela. Nas seções da home o
   respiro grande disfarçava; numa etapa, de padding curto, não disfarça. */
[id]{scroll-margin-top:calc(var(--faixa) + 22px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:var(--ink);color:var(--papel);font-family:var(--ui);
  font-size:16px;line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ouro);color:#171104}

.cx{max-width:var(--caixa);margin:0 auto;padding:0 var(--gutter)}
.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--gutter);top:8px;z-index:99;background:var(--ouro);color:#171104;
  padding:13px 18px;border-radius:4px;font-weight:700}

/* ── tipografia ────────────────────────────────────────────────────────── */
.display{font-family:var(--marca);font-weight:400;
  font-size:min(clamp(40px,6vw,82px),10vh);
  line-height:1.03;letter-spacing:-.024em;text-wrap:balance}
/* a segunda linha em ouro é a assinatura tipográfica da identidade */
.display .ouro{color:var(--ouro);display:block}
.tit{font-family:var(--marca);font-weight:400;
  font-size:clamp(28px,3.6vw,50px);line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
.tit .ouro{color:var(--ouro);display:block}
.sub{font-family:var(--marca);font-weight:400;font-size:clamp(19px,1.9vw,25px);
  line-height:1.22;letter-spacing:-.016em;text-wrap:balance}
.corpo{font-size:15.5px;line-height:1.78;color:var(--mute);max-width:58ch;text-wrap:pretty}
.corpo + .corpo{margin-top:14px}
.corpo b{color:var(--papel);font-weight:700}
.corpo .g{color:var(--ouro);font-weight:700}
.mini{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.4}

/* rótulo em versal dourada. Até 16/09 levava um ponto redondo na frente; o
   Luiz tirou o ponto de todos os rótulos, e os títulos perderam o ponto final */
.rot{display:flex;align-items:center;color:var(--ouro);margin-bottom:20px;
  text-wrap:balance}

/* ── selos ─────────────────────────────────────────────────────────────── */
.selos{display:flex;flex-wrap:wrap;gap:8px}
.selo{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;
  border:1px solid var(--fio-forte);border-radius:4px;color:var(--mute);
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.selo.g{border-color:var(--fio-ouro);color:var(--ouro)}

/* ── botão ─────────────────────────────────────────────────────────────── */
/* ── tecla acesa ──────────────────────────────────────────────────────────
   O botão deixou de ser um retângulo chapado e virou uma tecla iluminada,
   pela referência que o Luiz trouxe. São cinco camadas, e cada uma faz uma
   coisa que as outras não fazem:
     1. raio 999px, a forma de tecla;
     2. degradê vertical claro em cima e escuro embaixo, que é como a luz cai
        num objeto convexo;
     3. clarão radial saindo do alto, o "aceso" propriamente dito;
     4. trama diagonal de 3px, quase invisível, que tira o plástico do degradê;
     5. fio de luz na borda de cima e fio escuro na de baixo, o relevo.
   Fora dela: um anel escuro de 1px que descola a tecla do fundo (essencial
   sobre a foto do herói) e o halo dourado, que é o brilho vazando.

   ATENÇÃO ao mexer no degradê: a letra é ESCURA e anda sobre ele, então vale
   o pior ponto e não a cor do meio. O pé em #A5843E ainda dá 5,34, acima dos
   4,5 que o número em 17px exige. Se escurecer mais, reprova.

   Isto NÃO usa gradiente em border-box com padding-box translúcido. Foi
   exatamente essa técnica que, em 31/08, deixou os botões virarem blocos
   dourados sólidos e derrubou o site inteiro. Aqui os anéis são box-shadow,
   que não tem como vazar por trás do fundo. */
.bt{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;
  border-radius:999px;border:0;color:#171104;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),
    radial-gradient(130% 190% at 50% -40%,rgba(255,252,240,.62),rgba(255,252,240,0) 58%),
    linear-gradient(180deg,#E6CB8E 0%,var(--ouro) 48%,#A5843E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(60,40,0,.3),
    inset 0 0 26px rgba(255,243,208,.4),
    0 0 0 1px rgba(9,13,22,.95),
    0 0 0 7px rgba(201,169,97,.1),
    0 12px 38px rgba(201,169,97,.34),
    0 4px 16px rgba(0,0,0,.5);
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
  transition:box-shadow .2s ease,transform .12s var(--expo),filter .2s ease}
.bt:hover{filter:brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(60,40,0,.3),
    inset 0 0 30px rgba(255,243,208,.5),
    0 0 0 1px rgba(9,13,22,.95),
    0 0 0 8px rgba(201,169,97,.14),
    0 14px 46px rgba(201,169,97,.46),
    0 4px 16px rgba(0,0,0,.5)}
/* apertar afunda a tecla: o relevo inverte e o halo encolhe */
.bt:active{transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(60,40,0,.4),
    inset 0 -1px 0 rgba(255,255,255,.3),
    0 0 0 1px rgba(9,13,22,.95),
    0 0 0 5px rgba(201,169,97,.08),
    0 5px 16px rgba(201,169,97,.22)}
.bt svg{width:15px;height:15px;flex:none}
/* O número saiu da Palatino e foi para a Lato. O peso vai a 700, que é o mesmo
   do rótulo do botão, então o número passa a falar com a mesma voz em vez de
   parecer citação vinda de outra peça. E o corpo cai de 17 para 15px porque a
   Lato tem altura de x bem maior que a Palatino: no mesmo corpo ela ocuparia
   mais linha do que o botão comporta. */
.bt .num{font-family:var(--ui);font-size:15px;font-weight:700;letter-spacing:.005em;
  text-transform:none}
/* A mesma tecla, apagada. É o que dá hierarquia sem precisar de tamanho: uma
   acesa e uma no escuro, lado a lado, e ninguém tem dúvida de qual é a
   principal. Mesmo relevo, mesmo anel, sem o clarão e sem o halo dourado. */
.bt-vaz{border:0;color:var(--papel);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#1E2942 0%,#141C30 100%);
  box-shadow:
    inset 0 1px 0 rgba(244,241,234,.2),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(9,13,22,.95),
    0 0 0 7px rgba(244,241,234,.045),
    0 10px 28px rgba(0,0,0,.5)}
/* WhatsApp cheio, ao lado do dourado. São dois blocos de cor na mesma linha,
   e isso é o próprio ponto de um bloco de contato: duas portas, as duas
   visíveis. Só que "as duas visíveis" não é "as duas do mesmo tamanho de voz".
   Duas decisões seguram isso, e as duas são conta e não gosto:
   VERDE REBAIXADO. O verde puro do WhatsApp tem luminância .479 contra .417
   do ouro, ou seja, cheio ele fica MAIS brilhante que o dourado e rouba a vez
   do telefone, que é quem deve mandar. O --zap tem .297, sete décimos do ouro.
   LETRA ESCURA. É a mesma anatomia do botão dourado, então os dois casam em
   vez de parecerem de sistemas diferentes, e mede 5,69, acima dos 4,5 que o
   número em 17px exige. Letra clara sobre este verde daria 3,33 e reprovaria. */
/* Tecla acesa em verde. O pé da rampa é #299952 e não um verde mais fundo
   porque a letra escura anda sobre ele: em #1F7F43 media 3,42 e reprovava;
   aqui dá 4,72. É a mesma armadilha do dourado, e o pior ponto é que manda. */
.bt-whats{border:0;color:#07200F;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),
    radial-gradient(130% 190% at 50% -40%,rgba(228,255,236,.5),rgba(228,255,236,0) 58%),
    linear-gradient(180deg,#4ACB7D 0%,var(--zap) 48%,#299952 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,40,15,.35),
    inset 0 0 26px rgba(210,255,225,.28),
    0 0 0 1px rgba(9,13,22,.95),
    0 0 0 7px rgba(45,169,91,.12),
    0 12px 38px rgba(45,169,91,.3),
    0 4px 16px rgba(0,0,0,.5)}
.bt-whats:hover{filter:brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,40,15,.35),
    inset 0 0 30px rgba(210,255,225,.36),
    0 0 0 1px rgba(9,13,22,.95),
    0 0 0 8px rgba(45,169,91,.16),
    0 14px 46px rgba(45,169,91,.42),
    0 4px 16px rgba(0,0,0,.5)}
.bt-whats:active{transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0,40,15,.45),
    inset 0 -1px 0 rgba(255,255,255,.25),
    0 0 0 1px rgba(9,13,22,.95),
    0 0 0 5px rgba(45,169,91,.1),
    0 5px 16px rgba(45,169,91,.2)}
.bt-whats svg{width:17px;height:17px;fill:currentColor;stroke:none}
.bt-whats:focus-visible{outline-color:var(--papel)}
/* a tecla apagada não acende no hover, só levanta um pouco a borda e o texto */
.bt-vaz:hover{color:var(--ouro);filter:none;
  box-shadow:
    inset 0 1px 0 rgba(201,169,97,.32),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(9,13,22,.95),
    0 0 0 7px rgba(201,169,97,.07),
    0 10px 28px rgba(0,0,0,.5)}
.bt-vaz:active{transform:translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(244,241,234,.12),
    0 0 0 1px rgba(9,13,22,.95),
    0 4px 12px rgba(0,0,0,.4)}
a:focus-visible,.bt:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

/* ── faixa do topo ─────────────────────────────────────────────────────── */
.topo{position:fixed;inset:0 0 auto;z-index:40;height:var(--faixa);
  background:rgba(14,21,38,.86);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--fio)}
/* space-between distribui os três: marca à esquerda, menu no meio, telefone
   na borda direita. Antes isso era feito com margin-left:auto, e havia uma
   regra .menu ~ .bt que anulava a margem — seletor de irmão casa mesmo com o
   menu em display:none, então no celular o botão colava na marca. */
.topo .cx{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
/* O lockup é o ARQUIVO da Central, v1 horizontal na versão papel, e não mais
   um remonte em texto. Enquanto era remonte, cada ajuste de corpo, de caixa e
   de entreletra do "Advocacia" era uma chance de a marca do site andar para
   longe da marca de verdade. Com o arquivo essa chance acaba: o desenho é o
   mesmo do timbrado, do cartão e da assinatura.
   O preço é que aqui não há texto, só imagem. Por isso o link carrega o
   aria-label com o nome e a imagem vai de alt vazio, senão o leitor de tela
   anuncia a mesma coisa duas vezes.
   Altura fixa e largura automática: a proporção do arquivo é 5.107 para 1, e
   quem trava a proporção são os atributos width/height no HTML. */
.marca{display:flex;align-items:center;flex:none;min-height:44px}
.marca img{height:40px;width:auto;display:block}

/* ── passa-bastão: a marca da faixa só entra quando a do herói sai ────────
   Enquanto o lockup grande está na tela, a mesma marca repetida lá em cima é
   redundante. Ela aparece no instante em que o lockup do herói cruza a altura
   onde ela mora, e como nessa hora um está exatamente atrás do outro, atrás
   do vidro da faixa, a troca lê como passagem de bastão e não como algo que
   pisca.
   Quem liga e desliga é o JS (ver v3.js). Duas garantias aqui: a classe
   'troca-marca' só existe com JS, então sem ele a marca fica sempre visível;
   e o que some é opacidade e visibilidade, nunca display, porque a caixa
   precisa continuar ocupando lugar. Se ela saísse do fluxo, o space-between
   jogaria o menu e o telefone para a esquerda a cada rolagem.
   A visibilidade entra na transição com atraso para não cortar o esmaecer, e
   sai na hora para devolver o link ao teclado no mesmo quadro. */
.topo.troca-marca .marca{opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .38s ease,transform .38s ease,visibility 0s linear .38s}
.topo.troca-marca.com-marca .marca{opacity:1;visibility:visible;transform:none;
  transition:opacity .38s ease,transform .38s ease,visibility 0s}
@media(prefers-reduced-motion:reduce){
  .topo.troca-marca .marca,.topo.troca-marca.com-marca .marca{transform:none}
}
.menu{display:none;align-items:center;gap:clamp(12px,1.5vw,24px)}
/* A fonte cresce com a tela e a entreletra encolhe junto: maiúscula pequena
   precisa de espaço entre as letras para não virar mancha, maiúscula grande
   não precisa. Por isso .11em aqui, contra os .15em de quando era 10px. */
.menu a{display:inline-flex;align-items:center;min-height:44px;
  font-size:clamp(11px,.9vw,12.5px);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);transition:color .18s ease;
  white-space:nowrap}
.menu a:hover{color:var(--papel)}
.topo .bt{min-height:40px;padding:0 18px;flex:none}
/* Os dois botões viram um bloco só: com space-between, dois filhos soltos no
   fim da faixa seriam empurrados para longe um do outro. */
.acoes-topo{display:flex;align-items:center;gap:8px;flex:none}
/* WhatsApp no verde dele mesmo, porque é o que faz a pessoa reconhecer o
   botão sem ler o rótulo. Na faixa entra só o símbolo, em botão vazado: um
   segundo bloco de cor cheia ao lado do dourado brigaria com ele, e o ouro é
   quem tem que ganhar essa disputa. */
.bt-zap{display:inline-flex;align-items:center;justify-content:center;
  width:46px;min-height:40px;border-radius:999px;flex:none;border:0;
  color:var(--zap-luz);
  background:linear-gradient(180deg,#1E2942 0%,#141C30 100%);
  box-shadow:inset 0 1px 0 rgba(244,241,234,.18),inset 0 -1px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(9,13,22,.95),0 4px 12px rgba(0,0,0,.4);
  transition:box-shadow .18s ease,filter .18s ease}
.bt-zap svg{width:19px;height:19px;fill:currentColor;display:block}
.bt-zap:hover{filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(45,169,91,.4),inset 0 -1px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(9,13,22,.95),0 0 0 6px rgba(45,169,91,.1),0 4px 14px rgba(0,0,0,.45)}
.bt-zap:focus-visible{outline:2px solid var(--zap-luz);outline-offset:3px}
/* O menu só entra quando CABE, e antes ele não cabia. Estava entrando em
   980px, mas os cinco rótulos mais a marca e os botões da direita só fechavam
   a partir de 1043px. No meio dessa faixa a linha estourava a caixa e quem
   pagava era o botão: em 1000px ele ficava com 4px de margem em vez de 40, e
   em 980px 13px dele saíam da tela. Ninguém tinha visto porque quase todo
   monitor é mais largo que isso.
   Duas coisas subiram o piso desde então: a fonte do menu e a marca, que
   passou de 148px para 163px quando virou o arquivo da Central. Com as duas,
   o piso está em 1063px e o corte fica em 1100, onde o botão tem os 44px de
   margem que a régua manda e ainda sobram 16px de folga entre os blocos.
   Se mexer na fonte, nos rótulos ou na altura do logo, refaça a medida antes
   de baixar este número. */
@media(min-width:1100px){.menu{display:flex}}
@media(max-width:559px){.topo .bt .rotulo{display:none}.topo .bt{padding:0 15px}}

/* ── herói: arte de fundo ────────────────────────────────────────────────
   Duas artes, uma por formato, e cada uma pede um lugar diferente para o
   texto. Medido antes de decidir, em luminância média por zona:

     desktop ... esquerda 24 · centro 29 · DIREITA 39  (ele está à direita)
     celular ... topo 65 · meio 18 · BASE 14           (ele está no alto)

   Daí o texto ficar à esquerda no desktop e na base no celular: é onde a
   arte já é escura, e o véu só precisa completar o serviço.

   ⚠️ A <img> vive dentro de um <picture>, então NÃO é filha direta do herói.
   Quem recebe position:absolute é o <picture>; um seletor .heroi > img não
   casa e a imagem cai no fluxo, empurrando o texto para fora da tela.

   AS REGRAS DA FIGURA (retrato recortado) SEGUEM ABAIXO, DORMENTES. */
.heroi{position:relative;min-height:100svh;display:grid;align-content:stretch;
  padding-top:var(--faixa);isolation:isolate;overflow:hidden}
.heroi > picture{position:absolute;inset:0;display:block;z-index:-2}
.heroi > picture img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* SEM VÉU, a pedido do Luiz: a arte aparece nítida, do jeito que foi feita.
   O texto passa a se defender sozinho, com respaldo local onde precisa
   (o rótulo do plantão já tem o seu). Se um dia algo sumir sobre a arte,
   a saída é dar respaldo àquela peça, não devolver véu por cima de tudo. */

.heroi .cx{position:relative;z-index:1;width:100%;display:grid;align-items:end;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,3vw,52px)}
.heroi .fala-heroi{align-self:center;max-width:min(56%,620px);
  padding-block:clamp(28px,6vh,64px)}

/* ── dormentes: voltam a valer assim que a .figura reaparecer no HTML ──── */
.heroi:has(.figura) .cx{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
.heroi:has(.figura) .fala-heroi{max-width:585px}
/* ele pisa na base do herói, como quem está de pé no chão da seção */
.heroi .figura{align-self:end;justify-self:end;min-width:0;position:relative}
.heroi .figura img{position:relative;z-index:1;
  height:min(76svh,830px);width:auto;max-width:none;display:block}

/* HALO DE ESTÚDIO. O retrato vem recortado, sem fundo, e o terno dele mede
   rgb(20,22,34): contraste 1,01 contra o --ink. Posto direto no escuro, o
   corpo desaparece e sobram a cabeça e as mãos flutuando.

   O halo é filho da FIGURA, não do herói. Amarrado a ela, ele acompanha o
   retrato quando o layout vira uma coluna no celular. Preso ao herói, como
   estava antes, ficava atrás do título e deixava ele no escuro. */
.heroi .figura::before{content:'';position:absolute;z-index:0;pointer-events:none;
  left:-46%;right:-46%;top:-7%;bottom:-9%;
  background:radial-gradient(50% 48% at 50% 40%,
    rgba(76,88,122,.95) 0%,rgba(52,62,92,.76) 36%,rgba(26,34,56,.40) 58%,
    rgba(14,21,38,0) 78%)}
/* O rótulo do plantão é a única peça que cai na borda entre a zona clara e a
   escura da arte, e no aparelho real ele quebra em duas linhas bem em cima da
   luminária. Escurecer o véu até resolver apagaria justamente o melhor
   detalhe da imagem, então ele ganha respaldo PRÓPRIO, do mesmo jeito que os
   selos: assim fica legível onde quer que a arte o coloque. */
.heroi .rot,.atalhos .rot{position:relative;display:inline-flex;width:auto;align-self:start;
  padding:8px 16px;border-radius:999px;
  background:rgba(9,13,22,.78);border:1px solid rgba(201,169,97,.28);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}

/* ── o selo de plantão é a única coisa que se mexe na página ──────────────
   A página inteira é parada de propósito, então o movimento aqui só se paga
   porque este selo é a única promessa de urgência que ela faz.

   Uma luz corre pela BORDA, sem parar. O miolo continua translúcido porque
   quem recebe o brilho é uma máscara de 1px, não o fundo: dois retângulos, um
   até o content-box e outro até a borda, com mask-composite:exclude sobrando
   só o anel. Se isso virar background do elemento, o desfoque de trás morre e
   o selo fica opaco. (Até 16/09 havia também um ponto que respirava na frente
   do texto; ele saiu junto com os pontos dos outros rótulos.)

   O ::after depende do position:relative acrescentado acima. E o gradiente é
   linear de propósito: em conic a luz daria a volta de verdade, mas num
   formato largo e baixo ela acelera nas pontas e desacelera nos lados, e o
   solavanco aparece. */
/* A passagem e o intervalo são coisas separadas, e é por isso que dá para
   pedir "mais devagar E mais seguido" sem contradição.
   A conta: o fundo tem o dobro da largura do selo, então cada 1% de
   background-position vale 1% da largura dele. A faixa clara mora entre 21%
   e 33% do gradiente, ou seja 42% a 66% da largura, e some da tela quando a
   posição passa de 80% (fora pela esquerda) ou de -70% (fora pela direita).
   Andar de 80 até -70 é a travessia inteira. Ela come 70% do ciclo, o resto
   é o escuro. Em 3.1s isso dá 2,2s de passagem lenta e 0,9s de espera, contra
   1,1s de passagem e 3,3s de espera de antes. */
.heroi .rot::after,.atalhos .rot::after{content:'';position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,transparent 20%,
    rgba(240,214,143,0) 21%,#F0D68F 27%,rgba(240,214,143,0) 33%,
    transparent 34%,transparent 100%);
  background-size:200% 100%;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:corre-plantao 3.1s linear infinite}
@keyframes corre-plantao{
  0%{background-position:80% 0}
  70%,100%{background-position:-70% 0}
}
/* Quem pediu menos movimento no aparelho recebe o selo parado, e ele continua
   legível: o que some é a animação, não a borda. */
@media(prefers-reduced-motion:reduce){
  .heroi .rot::after,.atalhos .rot::after{animation:none}
}
/* Mesmo arquivo da faixa do topo, ver o comentário lá em cima. Aqui ele é
   bem maior, porque no herói o lockup é a assinatura da peça e não uma marca
   de navegação: em 1280 ele passa de 235px para 327px de largura, pouco mais
   da metade da coluna de texto.
   O min() com vh é a mesma trava do título: numa janela baixa quem cresce em
   largura rouba a altura de todo o resto, e o herói já é apertado no eixo
   vertical. Com ela, tela larga e baixa segura o logo em 8vh. */
.heroi .lockup{margin-bottom:clamp(24px,4.5vh,44px)}
.heroi .lockup img{height:min(clamp(60px,6.75vw,88px),10vh);width:auto;display:block}
.heroi .display{max-width:15ch}
.heroi .corpo{margin-top:20px;max-width:40ch}
.heroi .acao{margin-top:clamp(24px,3.4vh,34px);display:flex;flex-wrap:wrap;gap:11px}
.heroi .selos{margin-top:clamp(24px,4vh,38px)}
@media(max-width:899px){
  /* Na arte de celular ele ocupa o alto e a base é a zona escura (luminância
     14). Então o texto desce e encosta no rodapé da tela: fica sobre o que já
     é escuro, e a figura dele continua inteira acima, sem véu por cima. */
  .heroi{min-height:100svh;display:grid;align-content:end;
    padding:calc(var(--faixa) + 14px) 0 clamp(30px,5vh,48px)}
  .heroi > picture img{object-position:50% 22%}
  /* também sem véu no celular: a arte de celular já é escura na base, que é
     exatamente onde o texto mora */
  .heroi .cx{display:flex;flex-direction:column}
  .heroi .figura{order:-1;align-self:center;justify-self:auto;
    margin-bottom:clamp(18px,3vh,30px)}
  .heroi .figura img{height:min(33svh,286px)}
  .heroi .figura::before{left:-70%;right:-70%;top:-10%;bottom:-12%}
  .heroi .fala-heroi{max-width:none;padding-block:0;align-self:auto}

  /* Centralizado no celular. Basta o text-align no bloco para o título, o
     texto e o selo se alinharem, porque o selo é inline-flex e obedece ao
     alinhamento do pai. Só a fileira de botões precisa de regra própria: ela
     é flex, e flex ignora text-align. */
  .heroi .fala-heroi{text-align:center}
  .heroi .acao{justify-content:center}
  /* Em bloco o texto do selo centraliza linha a linha quando quebra em duas. */
  .heroi .rot{display:inline-block}
  /* O lockup some no celular: a mesma marca está na faixa fixa dois dedos
     acima. Repetida, ela só empurrava a frase e o telefone para fora da
     primeira tela, que é o único lugar que quem chega em pânico lê. */
  .heroi .lockup{display:none}

  /* E os selos também. Medido no Safari real, que tem 745px de altura úteis
     e não os 852 do aparelho: o texto ocupava 496px e empurrava o rótulo do
     plantão para cima do queixo dele. Os selos sozinhos custam 106px e são
     credencial, não ação. Na primeira tela do celular o que precisa caber é
     a frase e o telefone; a OAB continua no rodapé e nas seções. */
  .heroi .selos{display:none}
  .heroi .display,.heroi .corpo{max-width:none}
  .heroi .lockup{margin-bottom:clamp(18px,3vh,26px)}
}
@media(min-width:900px) and (max-width:1080px){
  /* faixa apertada: o retrato encolhe antes de espremer o título */
  .heroi .figura img{height:min(62svh,640px)}
}

/* ── seções ────────────────────────────────────────────────────────────── */
.sec{padding:var(--ar) 0;position:relative}
.sec + .sec{border-top:1px solid var(--fio)}
.cab{max-width:62ch;margin-bottom:clamp(32px,5vh,52px)}
.cab .corpo{margin-top:18px}

/* cartões numerados, como os da apresentação */
.cartoes{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.cartoes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.cartoes.tres{grid-template-columns:repeat(3,1fr)}}
.cartao{display:block;background:rgba(22,32,58,.55);border:1px solid var(--fio);
  border-radius:8px;padding:clamp(20px,2.2vw,28px);
  transition:border-color .22s ease,background .22s ease,transform .3s var(--expo)}
a.cartao:hover{border-color:var(--fio-ouro);background:rgba(22,32,58,.85);transform:translateY(-2px)}
.cartao .n{color:var(--ouro);opacity:.85;margin-bottom:14px;display:block}
/* Versal. A entreletra troca de sinal junto: em caixa alta e baixa ela era
   NEGATIVA (-.016em), porque a Palatino em corpo de título abre demais entre
   as minúsculas; em versal o problema é o oposto, maiúscula colada vira
   parede, então vai positiva. */
.cartao h3{font-family:var(--marca);font-weight:400;font-size:clamp(18px,1.75vw,21px);
  line-height:1.28;letter-spacing:.03em;text-transform:uppercase;
  margin-bottom:11px;text-wrap:balance}
.cartao .corpo{font-size:14.5px;max-width:none}
.cartao .p{margin-top:16px;display:flex;align-items:center;gap:9px;
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro);
  transition:gap .3s var(--expo)}
a.cartao:hover .p{gap:15px}
.cartao .p svg{width:12px;height:12px}

/* ── faixa de papel, para a convicção ──────────────────────────────────── */
.papel-band{background:var(--papel);color:var(--marinho);padding:var(--ar) 0}
.papel-band .rot{color:var(--bronze)}
.papel-band .display .ouro{color:var(--bronze)}
.papel-band .corpo{color:rgba(22,32,58,.78);max-width:52ch;font-size:16.5px}
.papel-band .corpo b{color:var(--marinho)}
.par2{display:grid;gap:clamp(26px,4vw,64px);align-items:start}
@media(min-width:920px){.par2{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .par2 .lado{padding-top:8px}}
.assina{margin-top:32px;padding-top:19px;border-top:1px solid rgba(22,32,58,.16);
  display:flex;align-items:center;gap:14px}
.assina img{width:27px;opacity:.9}
.assina .q{font-family:var(--marca);font-size:16.5px;line-height:1.3}
.assina .q span{display:block;font-family:var(--ui);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin-top:5px}

/* ── trajetória ────────────────────────────────────────────────────────── */
.dupla{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media(min-width:900px){.dupla{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.quadro{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:8px;
  background:var(--marinho);border:1px solid var(--fio)}
.quadro img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
/* O clipe já vem cortado em 4:5 no próprio arquivo, então aqui o cover não
   tem folga para trabalhar e não precisa de object-position: o enquadramento
   foi decidido na hora de codificar, e não sobra pixel para jogar fora. */
.quadro .filme{width:100%;height:100%;object-fit:cover;display:block}

/* ── o quadro que passa sozinho ──────────────────────────────────────────
   Em /guia/prenderam-alguem a foto parada virou um punhado delas se rendendo
   uma à outra, sem botão e sem arrasto, como um clipe mudo. É o quadro de
   sempre, no mesmo lugar e no mesmo 4:5: o que muda é que a imagem não fica
   a mesma.

   A QUE SAI NÃO APAGA JUNTO COM A QUE ENTRA. Ela fica inteira por baixo até
   estar coberta, e só então some. Fundir as duas ao mesmo tempo deixa o
   marinho do fundo aparecer entre elas (com as duas a 50%, um quarto da tela
   vira fundo) e o corte ganha um piscar escuro que não existe em vídeo
   nenhum. Quem garante a ordem é o z-index que o fotos.js troca antes de
   cada passagem, e não a ordem do HTML: assim a volta do ciclo, em que a
   última precisa ceder para a primeira, funde igual a todas as outras.

   Sem JavaScript fica a primeira e nada se move, que é a seção como ela
   sempre foi. A regra 3 do cabeçalho deste arquivo continua de pé. */
.quadro.passa img{position:absolute;inset:0;opacity:0;
  transition:opacity 1.4s var(--expo)}
.quadro.passa img.vez{opacity:1}
html:not(.js) .quadro.passa img:first-child{opacity:1}
/* Quem pediu menos movimento não recebe clipe rodando sozinho: o fotos.js
   nem liga o relógio, e aqui a transição sai do caminho para o caso de a
   primeira foto precisar ser acesa por ele mesmo assim. */
@media(prefers-reduced-motion:reduce){.quadro.passa img{transition:none}}
.marcos{margin-top:28px;border-top:1px solid var(--fio)}
.marcos li{list-style:none;display:flex;gap:clamp(14px,2vw,26px);align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--fio)}
.marcos .q{flex:0 0 clamp(54px,7vw,90px);color:var(--ouro);opacity:.9}
.marcos .d{flex:1 1 auto;min-width:0;font-size:15px;color:var(--mute);text-wrap:pretty}
.marcos .d b{color:var(--papel);font-weight:700}

/* ── chamada final ───────────────────────────────────────────────────────
   Sem foto, como o herói. A separação do que vem antes é feita por um fio,
   não por imagem. */
.chamada{position:relative;overflow:hidden;border-top:1px solid var(--fio)}
.chamada .cx{padding-top:var(--ar);padding-bottom:var(--ar)}
/* a frase é mais longa que a anterior: 15ch quebrava em quatro linhas */
.chamada .display{max-width:23ch}
.chamada .corpo{margin-top:18px}
.chamada .acao{margin-top:30px;display:flex;flex-wrap:wrap;gap:11px}

/* ── faixa do mapa ───────────────────────────────────────────────────────
   Imagem estática, não iframe: ver a nota no HTML. A faixa sangra a largura
   inteira e o object-fit corta pelas laterais, então o pino, que está no
   centro do arquivo, continua visível em qualquer tela. */
.mapa{border-top:1px solid var(--fio)}
/* O mapa é o do OpenStreetMap na cor dele mesmo. O fundo de espera acompanha
   a cor média do arquivo (#E8E9DF), e não o marinho: se a imagem demorar, o
   que pisca é um bege parecido e não um retângulo escuro que depois clareia. */
.mapa-tela{position:relative;display:block;overflow:hidden;
  height:clamp(230px,34vh,380px);background:#E8E9DF}
.mapa-tela img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform .5s var(--expo),filter .3s ease}
/* Clarear no hover funcionava no mapa escuro. Num mapa claro isso lava a
   imagem, então o que sobe é a saturação. */
.mapa-tela:hover img{transform:scale(1.02);filter:saturate(1.1)}
/* O véu encurtou muito. Ele existe só para a faixa clara não brigar de topo
   com o escuro da página em cima e do rodapé embaixo; se continuasse nos
   .55/.72 de antes, escureceria justamente a cor que era para aparecer. */
.mapa-tela::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,21,38,.40) 0%,rgba(14,21,38,0) 13%,
    rgba(14,21,38,0) 84%,rgba(14,21,38,.46) 100%)}
/* À ESQUERDA de propósito. Estava à direita e passou a colidir com o WhatsApp
   flutuante: rolando pela faixa, o botão verde cruzava exatamente por cima
   deste e o engolia, porque ele é fixo e vence no empilhamento. Quem cede é
   este, que é só uma pista visual: o link mesmo é a faixa inteira. */
.mapa-cta{position:absolute;z-index:1;left:clamp(16px,4vw,52px);bottom:clamp(16px,3vh,28px);
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px;
  border:1px solid var(--fio-ouro);border-radius:999px;
  background:rgba(14,21,38,.82);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);color:var(--ouro);
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .2s ease,background .2s ease}
.mapa-cta svg{width:12px;height:12px}
.mapa-tela:hover .mapa-cta{border-color:var(--ouro);background:rgba(14,21,38,.92)}
.mapa-tela:focus-visible{outline:2px solid var(--ouro);outline-offset:-3px}

.mapa-pe{padding:clamp(26px,4vh,40px) 0 clamp(30px,4vh,44px);
  display:grid;gap:clamp(16px,3vw,44px);align-items:start}
@media(min-width:820px){.mapa-pe{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.mapa-pe .end{font-family:var(--marca);font-size:clamp(17px,1.5vw,20px);line-height:1.5;
  letter-spacing:-.012em;color:var(--papel);font-style:normal;max-width:34ch}
.mapa-pe .end .rua{display:block}
.mapa-pe .end .loc{display:block;color:var(--mute);font-size:.86em;margin-top:6px}
.mapa-cred{font-size:12.5px;line-height:1.6;color:var(--dim);max-width:46ch;
  align-self:end}
.mapa-cred a{color:var(--mute);border-bottom:1px solid var(--fio-forte)}
.mapa-cred a:hover{color:var(--ouro);border-bottom-color:var(--ouro)}

/* ── rodapé ────────────────────────────────────────────────────────────── */
.rodape{border-top:1px solid var(--fio);padding:clamp(44px,6vh,66px) 0 28px}
.rgrade{display:grid;gap:clamp(28px,4vw,54px)}
@media(min-width:820px){.rgrade{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr)}}
.rodape h4{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:14px}
.rodape .li{display:flex;align-items:center;min-height:44px;color:var(--mute);font-size:14.5px;
  transition:color .18s ease}
.rodape .li:hover{color:var(--papel)}
/* Endereço: a linha mais longa tem 30 caracteres, então 22ch partia o nome
   da rua no meio e jogava "· Centro" sozinho numa linha. As quebras são
   explícitas e a largura tem de caber a maior delas. */
.rodape .end{font-family:var(--marca);font-size:clamp(16.5px,1.4vw,19px);line-height:1.5;
  letter-spacing:-.012em;color:var(--papel);max-width:34ch;font-style:normal}
.rodape .end .rua{display:block}
.rodape .end .loc{display:block;color:var(--mute);font-size:.86em;margin-top:6px}
.rodape .cont{margin-top:20px;padding-top:16px;border-top:1px solid var(--fio);
  display:flex;flex-direction:column;align-items:flex-start}
.rodape .cont a{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--marca);font-size:17.5px;letter-spacing:-.01em;
  border-bottom:1px solid transparent;overflow-wrap:anywhere;
  transition:border-color .18s ease,color .18s ease}
.rodape .cont a:hover{color:var(--ouro);border-bottom-color:var(--ouro)}
.rodape .sobre{color:var(--dim);font-size:14px;max-width:34ch;margin-top:14px;text-wrap:pretty}
.pe{margin-top:clamp(34px,5vh,54px);padding-top:20px;border-top:1px solid var(--fio);
  display:flex;flex-wrap:wrap;gap:9px 24px;color:var(--dim);font-size:12.5px}

/* ── barra fixa do telefone, no celular ────────────────────────────────── */
/* ── WhatsApp flutuante ───────────────────────────────────────────────────
   Fica na tela o tempo todo, inclusive na primeira, porque não repete nada:
   o herói oferece telefone e guia, nunca WhatsApp.
   O canto de baixo à direita é livre no computador. No celular não é: ali
   mora a barra dourada do telefone, 60px de altura mais 14 de folga. Por isso
   o botão sobe para cima dela em vez de disputar o mesmo canto, e fica com o
   z-index abaixo do dela, que é 50. */
.zap-flut{position:fixed;z-index:45;display:flex;align-items:center;
  justify-content:center;width:56px;height:56px;border-radius:50%;
  right:clamp(16px,3vw,32px);bottom:clamp(16px,3vh,32px);
  /* mesmo verde do botão de fechamento: uma marca, um verde. Aqui o símbolo
     fica branco e não escuro, porque é assim que o WhatsApp se reconhece. */
  background:
    radial-gradient(120% 160% at 50% -20%,rgba(228,255,236,.45),rgba(228,255,236,0) 60%),
    linear-gradient(180deg,#4ACB7D 0%,var(--zap) 50%,#299952 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,40,15,.35),
    0 0 0 1px rgba(9,13,22,.95),
    0 0 0 7px rgba(45,169,91,.1),
    0 12px 36px rgba(45,169,91,.3),
    0 12px 32px rgba(0,0,0,.45);
  transition:transform .2s var(--expo),filter .2s ease}
.zap-flut svg{width:29px;height:29px;fill:currentColor;display:block}
.zap-flut:hover{filter:brightness(1.07);transform:translateY(-2px)}
.zap-flut:active{transform:translateY(0)}
.zap-flut:focus-visible{outline:2px solid var(--papel);outline-offset:3px}
/* ── celular: cabeçalho centralizado, conteúdo à esquerda ─────────────────
   Meio-termo escolhido depois de ver as três versões lado a lado. Centralizar
   a página inteira foi testado e descartado por dois motivos medidos:

   1. Em texto centralizado as DUAS margens ficam soltas, então cada linha
      começa num ponto diferente e o olho perde a âncora para voltar. Num
      parágrafo de quatro linhas já se sente. (No justificado, que também foi
      descartado, ao menos a margem esquerda fica fixa.)
   2. A lista de marcos quebrou: os rótulos ficaram à esquerda e as descrições
      no meio, dois alinhamentos brigando dentro do mesmo bloco.

   Então centraliza só o que é cerimônia, e é curto: o rótulo dourado, o
   título, o parágrafo de abertura logo abaixo dele e a fileira de botões.
   Cartão, lista de marcos, texto longo e rodapé continuam à esquerda, que é
   onde a pessoa efetivamente lê e varre.

   O parágrafo é pego por ADJACÊNCIA (.tit + .corpo), nunca por .corpo solto:
   é o que separa o texto de abertura, que é curto, do texto de leitura, que
   não pode centralizar. Se um dia entrar um segundo parágrafo na abertura,
   ele já cai à esquerda sozinho, e isso é o certo. */
@media(max-width:899px){
  /* .chamada é o bloco de fechamento (#contato). Ele não é .sec, e é
     justamente o gêmeo do herói: cerimônia pura, então entra inteiro. */
  .sec .rot,.papel-band .rot,.chamada .rot{justify-content:center}
  .sec .tit,.sec .display,.papel-band .display,.chamada .display{text-align:center}
  .sec .tit + .corpo,.sec .display + .corpo,.chamada .display + .corpo{text-align:center}
  .sec .acao,.chamada .acao{justify-content:center}
}

@media(max-width:899px){
  .zap-flut{width:52px;height:52px;right:12px;bottom:88px}
  .zap-flut svg{width:27px;height:27px}
}
@media(prefers-reduced-motion:reduce){.zap-flut{transition:none}}

.dock{display:none}
@media(max-width:899px){
  .dock{position:fixed;left:12px;right:12px;bottom:14px;z-index:50;
    display:flex;align-items:center;justify-content:center;gap:12px;height:60px;
    border-radius:999px;color:#171104;
    background:
      repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),
      radial-gradient(120% 300% at 50% -60%,rgba(255,252,240,.55),rgba(255,252,240,0) 62%),
      linear-gradient(180deg,#E6CB8E 0%,var(--ouro) 48%,#A5843E 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.8),
      inset 0 -1px 0 rgba(60,40,0,.3),
      inset 0 0 30px rgba(255,243,208,.35),
      0 0 0 1px rgba(9,13,22,.95),
      0 0 0 7px rgba(201,169,97,.1),
      0 14px 44px rgba(201,169,97,.3),
      0 14px 40px rgba(0,0,0,.55)}
  .dock:active{transform:scale(.985)}
  /* recolhe enquanto os botões do herói estão à vista, para não haver dois
     botões dourados iguais empilhados na primeira tela */
  .js .dock{transition:transform .34s var(--expo),opacity .22s ease}
  .js .dock.recolhido{transform:translateY(calc(100% + 20px));opacity:0;pointer-events:none}
  @media(prefers-reduced-motion:reduce){.js .dock{transition:none}}
  .dock .r{font-size:9.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
    color:rgba(23,17,4,.82)}
  /* a barra guarda os mesmos 2px a mais que tinha sobre o botão comum */
  .dock .num{font-family:var(--ui);font-size:17px;font-weight:700;letter-spacing:.005em}
  .dock svg{width:16px;height:16px}
  .rodape{padding-bottom:104px}
}

/* ── revelação ao rolar ────────────────────────────────────────────────── */
.js .rev{opacity:0;transform:translateY(16px)}
.js .rev.on{opacity:1;transform:none;
  transition:opacity .7s var(--expo),transform .7s var(--expo)}
@media(prefers-reduced-motion:reduce){.js .rev{opacity:1;transform:none}}

/* ══ relógio da custódia ══════════════════════════════════════════════════
   A peça mais distinta do projeto, trazida da v1 para a v3 e revestida na
   gramática desta versão: canto arredondado, cartão de fio, mesmo ouro.
   A mecânica não muda: calcula no aparelho de quem abriu, não guarda, não
   envia, não rastreia. Sem JavaScript o mostrador some e o texto explica
   a regra do mesmo jeito.
   ═══════════════════════════════════════════════════════════════════════ */
.topo-guia{padding:calc(var(--faixa) + 44px) 0 0}
.migalha{display:flex;align-items:center;gap:9px;color:var(--dim);margin-bottom:18px}
.migalha a{color:var(--ouro)}
.migalha svg{width:10px;height:10px;opacity:.6}

.relogio{border:1px solid var(--fio);border-radius:10px;background:rgba(22,32,58,.42);
  padding:clamp(22px,3vw,38px);margin-top:clamp(28px,4vh,42px)}
.entrada{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:clamp(24px,4vh,34px)}
.campo{display:flex;flex-direction:column;gap:8px}
.campo .lab{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.dias{display:flex;border:1px solid var(--fio);border-radius:6px;overflow:hidden}
.dias button{padding:0 22px;min-height:52px;font:inherit;color:var(--mute);background:none;
  border:0;cursor:pointer;transition:background .18s ease,color .18s ease}
.dias button + button{border-left:1px solid var(--fio)}
.dias button[aria-pressed="true"]{background:var(--ouro);color:#171104;font-weight:700}
input[type=time]{min-height:52px;padding:0 15px;background:var(--ink);color:var(--papel);
  border:1px solid var(--fio);border-radius:6px;font-family:var(--marca);font-size:21px;min-width:138px}
input[type=time]:focus{outline:2px solid var(--ouro);outline-offset:1px}

.duplo{display:flex;gap:clamp(22px,4vw,50px);align-items:center;flex-wrap:wrap}
.mostrador{flex:none;width:min(240px,64vw);aspect-ratio:1;position:relative}
.mostrador svg{width:100%;height:100%;display:block}
.centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;pointer-events:none}
.centro .n{font-family:var(--marca);font-size:clamp(28px,7vw,38px);line-height:1;letter-spacing:-.02em}
.centro .u{margin-top:7px;color:var(--ouro)}
.leitura{flex:1 1 270px;min-width:0}
.leitura .ate{font-family:var(--marca);font-size:clamp(19px,2.3vw,26px);line-height:1.28;
  letter-spacing:-.018em;text-wrap:pretty}
.leitura .ate b{color:var(--ouro);font-weight:400}
.leitura .obs{margin-top:13px;font-size:14.5px;color:var(--mute);text-wrap:pretty;max-width:46ch}
.leitura .fonte{margin-top:15px;padding-top:12px;border-top:1px solid var(--fio);
  color:var(--dim);font-size:12.5px}
.estourado .centro .n,.estourado .leitura .ate b{color:#E0736C}
.so-js{display:none}
.js .so-js{display:block}
.js .sem-js{display:none}
.nao-sei{margin-top:18px;font-size:13.5px;color:var(--dim);max-width:58ch;text-wrap:pretty}
.nao-sei b{color:var(--mute)}

.etapa{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--fio);align-items:baseline}
.etapa .q{flex:0 0 clamp(84px,11vw,116px);font-size:9.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ouro);opacity:.9}
.etapa .c{flex:1 1 auto;min-width:0}
.etapa h3{font-family:var(--marca);font-weight:400;font-size:19px;letter-spacing:-.015em;
  line-height:1.25;margin-bottom:7px}
.etapa p{font-size:14.5px;line-height:1.72;color:var(--mute);text-wrap:pretty;max-width:58ch}
@media(max-width:640px){.etapa{flex-direction:column;gap:7px}.etapa .q{flex:none}}

.lista-passos{border-top:1px solid var(--fio)}
.lista-passos li{list-style:none;display:flex;gap:16px;align-items:baseline;padding:15px 0;
  border-bottom:1px solid var(--fio)}
.lista-passos .n{flex:none;color:var(--ouro);opacity:.85}
.lista-passos .t{flex:1 1 auto;min-width:0;font-size:15px;color:var(--mute);text-wrap:pretty}

.nao{border:1px solid rgba(224,115,108,.34);border-radius:10px;
  padding:22px 24px;margin-top:26px;background:rgba(224,115,108,.06)}
.nao h3{font-family:var(--marca);font-weight:400;font-size:20px;margin-bottom:12px}
.nao li{list-style:none;padding:7px 0 7px 19px;position:relative;color:var(--mute);
  font-size:14.5px;text-wrap:pretty}
.nao li::before{content:'';position:absolute;left:1px;top:16px;width:5px;height:5px;
  border-radius:50%;background:#E0736C;opacity:.8}
.nao li b{color:var(--papel);font-weight:700}

/* ── estimativa de progressão ────────────────────────────────────────────
   Mesmo cartão do relógio. O resultado vem em três dados lado a lado, e o
   rótulo "estimativa" aparece antes do número, nunca depois: quem lê rápido
   tem de bater o olho na ressalva primeiro. */
.form-prog{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:clamp(24px,4vh,32px)}
@media(min-width:720px){.form-prog{grid-template-columns:repeat(2,1fr)}
  .form-prog .largo{grid-column:1/-1}}
.form-prog label{display:flex;flex-direction:column;gap:8px}
.form-prog .lab{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.form-prog input,.form-prog select{min-height:52px;padding:0 14px;background:var(--ink);
  color:var(--papel);border:1px solid var(--fio);border-radius:6px;
  font-family:var(--ui);font-size:15px;width:100%}
.form-prog input:focus,.form-prog select:focus{outline:2px solid var(--ouro);outline-offset:1px}
.dois-campos{display:flex;gap:10px}
.dois-campos label{flex:1}

.saida-prog{display:grid;gap:14px;grid-template-columns:1fr;
  padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--fio)}
@media(min-width:640px){.saida-prog{grid-template-columns:repeat(3,1fr)}}
.dado .k{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:7px}
.dado .v{font-family:var(--marca);font-size:clamp(18px,2vw,23px);line-height:1.2;
  letter-spacing:-.016em;text-wrap:balance}
.prog-frase{font-family:var(--marca);font-size:clamp(19px,2.3vw,26px);line-height:1.28;
  letter-spacing:-.018em;margin-top:clamp(22px,3vh,30px);text-wrap:pretty}
.prog-frase b{color:var(--ouro);font-weight:400}
.prog-nota:not(:empty){margin-top:14px;padding:13px 15px;border-radius:8px;
  background:rgba(224,115,108,.07);border:1px solid rgba(224,115,108,.3);
  font-size:14px;color:var(--mute);text-wrap:pretty}
.tabela-fracoes{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px}
.tabela-fracoes th,.tabela-fracoes td{text-align:left;padding:11px 12px;
  border-bottom:1px solid var(--fio);color:var(--mute)}
.tabela-fracoes th{font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ouro)}
.tabela-fracoes td:last-child{font-family:var(--marca);font-size:17px;color:var(--papel);white-space:nowrap}
.rolagem{overflow-x:auto}