/* =============================================================================
   LegalOps Co. — site institucional
   Monocromático paper/ink, um acento ouro. Tokens herdados do kit de marca
   (assets/css/tokens.css do acervo "LegalOps Co."), reduzidos ao que esta
   página usa de fato.
   Mobile-first: cada @media daqui para baixo só acrescenta, nunca desfaz.
   ========================================================================== */

:root {
  --paper:      #F5F2EC;
  --paper-2:    #ECE7DC;
  --ink:        #0E0D0B;
  --ink-soft:   #3A372F;
  --ink-mute:   #6B675C;
  --hairline:   #C9C2B0;
  --gold:       #8E6722;

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans:  "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Medida única de recuo lateral: a mesma no header, no quadro e no rodapé,
     para que as bordas se alinhem em qualquer largura. */
  --gutter: clamp(20px, 5vw, 72px);
  --rule:   1px solid var(--hairline);
}

/* A marca é impressa em papel claro. No escuro ela inverte: mesma tinta,
   outro suporte — não é um segundo tema, é o mesmo com os papéis trocados. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #0B0A08;
    --paper-2:  #15130E;
    --ink:      #F2EFE7;
    --ink-soft: #C9C3B4;
    --ink-mute: #8A8477;
    --hairline: #2A271F;
    --gold:     #C8A24A;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(15px, 0.5vw + 14px, 17px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Nenhum filho pode empurrar a página para os lados. */
  overflow-x: hidden;
}

.pular {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 12px 16px; z-index: 10; text-decoration: none;
}
.pular:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------------------------------------------------------------- cabeçalho */

.topo {
  padding: clamp(28px, 7vw, 72px) var(--gutter) clamp(24px, 5vw, 48px);
  border-bottom: var(--rule);
}

.carimbo {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  font-family: var(--mono);
  font-size: clamp(9.5px, 1.6vw, 11px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 clamp(20px, 4vw, 34px);
}
.carimbo .br { color: var(--gold); border: 1px solid currentColor; padding: 3px 7px; }

/* A logo é o conteúdo do header, então ela ocupa a largura disponível em vez
   de um tamanho fixo: o SVG escala pelo próprio viewBox e nunca estoura o
   recuo lateral. `display:block` remove a folga de linha de base embaixo. */
.marca { margin: 0; }
.marca svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1180px;
  color: var(--ink);
}

.assinatura {
  margin: clamp(18px, 3.5vw, 30px) 0 0;
  max-width: 62ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw + 12px, 26px);
  line-height: 1.38;
  letter-spacing: -.01em;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------- quadro */

.quadro { padding: clamp(28px, 6vw, 64px) var(--gutter) clamp(36px, 7vw, 80px); }

.quadro-cabeca {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px 24px;
  margin: 0 0 clamp(16px, 3vw, 26px);
}
.quadro-cabeca h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(9.5px, 1.6vw, 11px);
  font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* Alvo de toque com piso de 44px, sem inchar a linha de texto ao redor. */
.link-externo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--mono);
  font-size: clamp(9.5px, 1.6vw, 11px);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.link-externo:hover, .link-externo:focus-visible { border-bottom-color: var(--gold); color: var(--gold); }
.link-externo svg { width: 11px; height: 11px; flex: none; }

/* O iframe carrega uma página desenhada para telas largas. No celular isso
   vira um cartão-postal ilegível, então lá a moldura ganha altura em `dvh`
   (a barra do navegador móvel come `vh`) e o visitante rola dentro dela.
   A partir de 720px a proporção passa a mandar. */
.moldura {
  position: relative;
  height: 78dvh;
  min-height: 420px;
  border: var(--rule);
  background: var(--paper-2);
  overflow: hidden;
}
@supports not (height: 1dvh) { .moldura { height: 78vh; } }

/* O cartaz fica no fundo da pilha; o iframe pinta por cima quando carrega. */
.moldura-cartaz {
  position: absolute; inset: 0; margin: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: var(--gutter);
  font-family: var(--mono);
  font-size: clamp(10px, 1.6vw, 12px);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
}
.moldura-cartaz a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.moldura-cartaz a:hover, .moldura-cartaz a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); }

.moldura iframe {
  position: relative; z-index: 1;
  display: block;
  width: 100%; height: 100%;
  border: 0;
}

.moldura-nota {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: clamp(9px, 1.5vw, 10.5px);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------- rodapé */

.rodape {
  border-top: var(--rule);
  padding: clamp(24px, 5vw, 44px) var(--gutter) clamp(32px, 6vw, 56px);
  display: grid; gap: 18px;
  font-size: clamp(12.5px, 1.4vw, 13.5px);
  color: var(--ink-soft);
}
.rodape a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline); }
.rodape a:hover, .rodape a:focus-visible { border-bottom-color: var(--gold); color: var(--gold); }

.contatos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contatos a { display: inline-flex; align-items: center; min-height: 44px; }

.registro {
  font-family: var(--mono);
  font-size: clamp(9.5px, 1.5vw, 11px);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute);
}

@media (min-width: 720px) {
  .moldura { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .rodape { grid-template-columns: 1fr auto; align-items: end; gap: 32px; }
  .contatos { grid-auto-flow: column; gap: 28px; }
  .contatos a { min-height: 0; }
  .registro { text-align: right; }
}

@media (min-width: 1180px) {
  .moldura { aspect-ratio: 16 / 9; }
}

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