/* ═══════════════════════════════════════════════════════════════
   MICRO-INTERAÇÕES — ver design-microinteracoes.json
   Um instrumento de precisão responde com firmeza, não com salto.
   ═══════════════════════════════════════════════════════════════ */

/* ── MASSA: cresce no hover, afunda no clique ────────────────── */
.cta{
  transform:translate(var(--imx,0px), var(--imy,0px)) scale(var(--esc,1));
  transition:transform var(--gesto) var(--ease),
             box-shadow var(--gesto) var(--ease),
             color var(--gesto);
  will-change:transform;
}
.cta:hover{ --esc:1.02; box-shadow:0 14px 30px -18px rgba(23,21,15,.42) }
.cta:active{ --esc:.985; transition:transform 90ms ease-out }
.cta.fantasma:hover{ box-shadow:0 12px 26px -20px rgba(23,21,15,.34) }

/* ── NÍVEL: a tinta SOBE preenchendo o botão, como líquido em provete ──
   Substitui a varredura lateral (clichê) e dispensa o brilho diagonal:
   um gesto só, calmo, coerente com instrumento de medição. */
.cta::before{
  transform:translateY(101%) !important;
  transition:transform 420ms var(--ease) !important;
}
.cta:hover::before{ transform:translateY(0) !important }
/* linha de nível: o menisco que marca onde a tinta chegou */
.cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:var(--papel); pointer-events:none;
  transform:scaleX(0); transform-origin:left;
  transition:transform 420ms var(--ease), opacity 220ms var(--ease) 300ms;
}
.cta:hover::after{ transform:scaleX(1); opacity:0 }
.cta.fantasma::after{ background:var(--laranja) }

/* ── COTA NO CARD: quinas de desenho técnico no hover ──────────
   NÃO force position aqui: componentes como .leiCard dependem de
   position:absolute para empilhar. O micro.js só ajusta quem for
   'static', preservando quem já tem posicionamento próprio. */
.cotaCanto{
  position:absolute; width:11px; height:11px; pointer-events:none; z-index:3;
  border-color:var(--laranja); border-style:solid; border-width:0;
  opacity:0; transform:scale(.86);
  transition:opacity var(--gesto) var(--ease), transform var(--gesto) var(--ease);
}
.cotaCanto.tl{ top:7px;  left:7px;  border-top-width:1px;    border-left-width:1px }
.cotaCanto.tr{ top:7px;  right:7px; border-top-width:1px;    border-right-width:1px }
.cotaCanto.bl{ bottom:7px; left:7px; border-bottom-width:1px; border-left-width:1px }
.cotaCanto.br{ bottom:7px; right:7px;border-bottom-width:1px; border-right-width:1px }
.temCota:hover > .cotaCanto{ opacity:1; transform:scale(1) }

/* ── SUBLINHADO QUE MEDE: links de texto no corpo ───────────── */
.linkMede{ position:relative; text-decoration:none; white-space:nowrap }
.linkMede::before{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--laranja); transform:scaleX(0); transform-origin:left;
  transition:transform var(--gesto) var(--ease);
}
.linkMede::after{
  content:""; position:absolute; right:0; bottom:-6px; width:1px; height:7px;
  background:var(--laranja); transform:scaleY(0); transform-origin:bottom;
  transition:transform var(--tique) var(--ease) var(--gesto);
}
.linkMede:hover::before{ transform:scaleX(1) }
.linkMede:hover::after{ transform:scaleY(1) }

/* ── FOCO DE INSTRUMENTO: acessibilidade com a linguagem da marca ── */
:focus-visible{
  outline:none;
  box-shadow:
    -3px -3px 0 -1px var(--laranja),
     3px  3px 0 -1px var(--laranja),
     0 0 0 3px rgba(226,98,14,.16);
}
.cta:focus-visible{ box-shadow:0 0 0 3px rgba(226,98,14,.28), 0 12px 26px -18px rgba(23,21,15,.4) }

/* ── respeito à preferência do sistema ──────────────────────── */
/* O ímã e o glint respondem ao gesto do usuário (cursor), não são movimento
   ambiente — por isso continuam sob prefers-reduced-motion, por decisão do
   cliente. Só o que roda sozinho é desligado nas páginas.
   As páginas trazem um `*{animation:none !important}` dentro do bloco de
   reduced-motion; esta regra tem especificidade maior e devolve o glint. */
@media (prefers-reduced-motion: reduce){
  .cta:hover::after{ animation:glintPassa .7s var(--ease) !important }
}
@media (hover:none), (pointer:coarse){
  .cta{ --imx:0px !important; --imy:0px !important }
}

/* ═════════════════════════════════════════════════════════════════════
   MARCA — O PRUMO CELESTE
   ═════════════════════════════════════════════════════════════════════
   O fio de prumo é o instrumento mais antigo da engenharia e o único que
   não depende de opinião: obedece à gravidade e aponta o centro exato da
   Terra. Já era o dispositivo da seção da balança — vira o símbolo.

   Em tamanho de cabeçalho as duas facetas internas são SUPRIMIDAS. A
   32px elas fecham de tinta e sujam o corpo em vez de dar volume; a
   espessura também não escala junto, engrossa proporcionalmente mais.
   O ponto laranja fica sempre: é o único elemento cheio do símbolo e o
   que carrega a promessa inteira — precisão absoluta num ponto.

   inline-block em vez de flex de propósito: o .logo já é uma linha de
   texto com o traço dourado no meio, e virar contêiner flex quebrava o
   alinhamento óptico que já estava resolvido.                         */
.prumo{height:62px; width:auto; display:inline-block; vertical-align:middle;
  margin:0 17px 6px 0; color:var(--ouro); flex-shrink:0;
  transition:transform var(--gesto) var(--ease)}
.prumo .fio{fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round}
.prumo .ponto{fill:var(--laranja)}
/* o prumo sobe quando a mão chega: um instrumento suspenso, não um ícone */
.logo:hover .prumo{transform:translateY(-3px)}
@media (max-width:1180px){ .prumo{height:56px; margin-right:14px} }
@media (max-width:980px){  .prumo{height:50px; margin-right:12px} }
@media (prefers-reduced-motion:reduce){ .logo:hover .prumo{transform:none} }

/* ── mobile ≤700px: o prumo encolhe junto com a banda de 64px ──
   36px, não 46: num telefone a banda tem 64px e o símbolo precisa de
   respiro em cima e embaixo. As regras de página (banda, painel do menu)
   moram no CSS de cada página; aqui só o que é compartilhado. */
@media (max-width:700px){
  .prumo{height:38px; margin-right:9px}
}


/* ═══════════════ GLOSSÁRIO ═══════════════
   Termo técnico com a explicação em linguagem de gente. O balão é um ::after do
   próprio termo, e ele vive dentro de caixas que CORTAM: a pilha da lei tem
   overflow:hidden, e cartão com transform vira bloco contentor — captura até
   position:fixed. Não adianta tentar escapar: o balão precisa caber. O micro.js
   mede e escreve --gx (deslocamento) e --gmax (teto de largura); aqui mora só a
   aparência. */
.glossario{position:relative; cursor:help;
  text-decoration:underline dotted var(--laranja);
  text-underline-offset:3px; text-decoration-thickness:1.5px}
.glossario:focus-visible{outline:2px solid var(--laranja); outline-offset:2px; border-radius:2px}
/* .aberto é o caminho do dedo: sem hover, o toque abre e fecha */
.glossario:hover::after,
.glossario:focus-visible::after,
.glossario.aberto::after{
  content:attr(data-g); position:absolute; left:var(--gx,0px); bottom:132%;
  background:var(--tinta); color:var(--papel); font-size:12.5px; padding:9px 13px;
  width:max-content; max-width:min(340px,var(--gmax,340px)); border-radius:2px;
  z-index:30; line-height:1.5; box-shadow:0 14px 30px -14px rgba(14,13,20,.6);
  /* o termo pode estar dentro de <b>, de um rótulo em caixa alta ou de um
     bloco com letter-spacing: o balão não herda nada disso */
  font-family:var(--sans,inherit); font-weight:400; font-style:normal;
  text-decoration:none; text-transform:none; letter-spacing:0; text-align:left}
.glossario.abaixo:hover::after,
.glossario.abaixo:focus-visible::after,
.glossario.abaixo.aberto::after{bottom:auto; top:132%}
@media (max-width:700px){
  .glossario:hover::after,
  .glossario:focus-visible::after,
  .glossario.aberto::after{font-size:13px; padding:10px 13px}
}