/* ==========================================================================
   PL Advogados · base.css
   Tokens, reset, tipografia e utilitarios.
   Paleta derivada do logo: azul-petroleo (ink) + greige, com latao de acento.
   ========================================================================== */

:root {
  /* Cor: marca */
  --ink: #1E2B39;
  --ink-2: #2B3E52;
  --ink-3: #101923;

  --greige: #E6E5DE;
  --greige-2: #DAD9D1;
  --paper: #FFFFFF;
  /* Nao escurecer: --muted (#64707E) rende 4,54:1 sobre este valor, ou seja o
     tom ja esta calibrado no limite do AA. Um passo a mais reprovaria. Quando a
     alternancia de secoes precisou ficar mais legivel, a solucao foi o filete
     em .section--alt, que nao mexe na luminancia. */
  --paper-alt: #F4F3EE;

  --brass: #9C7C4E;        /* filetes e detalhes decorativos */
  --brass-text: #7A5F38;   /* texto sobre fundo claro: 6.2:1 */
  --brass-lt: #C3A575;     /* texto sobre fundo ink: 7.0:1 */

  /* O latao aparece como filete em nove lugares. Antes cada componente escolhia
     a sua espessura (1, 1.5, 2 e 3px) e o seu comprimento (28, 34 e 44px), o que
     deixava o acento coerente em cor e solto em forma. Sao duas formas agora, e
     so estas: a marca fina e o trilho. Todo gesto decorativo usa uma das duas. */
  --brass-hair: 1px;
  --brass-rail: 2px;
  --brass-mark: 28px;

  /* Cor: texto */
  --text: #333C48;
  --muted: #64707E;
  --text-on-ink: #FFFFFF;
  --muted-on-ink: #C2CCD8;

  --line: #E2E1D9;
  --line-ink: rgba(255, 255, 255, .14);

  /* Tipografia */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-md: clamp(1.0625rem, .98rem + .38vw, 1.1875rem);
  --fs-lg: clamp(1.1875rem, 1.06rem + .55vw, 1.4375rem);
  --fs-h3: clamp(1.25rem, 1.12rem + .58vw, 1.5rem);
  /* Os titulos deste site sao frases inteiras, nao rotulos: o h1 da home tem 120
     caracteres e os h2 passam de 90. A 44 e 60px eles viravam paredes de serifa
     de tres linhas abrindo cada secao. O teto baixou; a base nao mudou, entao no
     celular nada encolheu. O minimo do h1 subiu de 34 para 30px justamente para
     que a regra de excecao do hero em .hero h1 deixasse de ser necessaria. */
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.375rem);
  --fs-h1: clamp(1.875rem, 1.37rem + 2.15vw, 3.25rem);

  /* Espacamento (escala de 4px) */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Layout */
  --maxw: 1180px;
  --maxw-narrow: 760px;
  --gutter: clamp(1.25rem, .8rem + 2vw, 2.5rem);
  /* Valor do mobile. O desktop sobe para 92px logo abaixo, para acomodar a
     assinatura oficial. Ver a nota la. */
  --header-h: 76px;

  /* Forma */
  --radius-sm: 4px;
  --radius: 8px;

  --shadow-sm: 0 1px 2px rgba(30, 43, 57, .06), 0 4px 14px -8px rgba(30, 43, 57, .18);
  --shadow: 0 2px 4px rgba(30, 43, 57, .05), 0 18px 40px -24px rgba(30, 43, 57, .35);
  --shadow-lg: 0 4px 8px rgba(30, 43, 57, .06), 0 32px 64px -32px rgba(30, 43, 57, .45);

  /* Movimento */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* Camadas */
  --z-sticky: 40;
  --z-drawer: 90;
  --z-skip: 200;
}

/* A assinatura oficial mede 728x296. Exibida a 156px de largura ela ocupa 63px
   de altura, e "ADVOGADOS" (37px dos 296 do arquivo) fica em 7,9px, no limite do
   legivel. Dai o cabecalho de 92px no desktop.

   Mudar o token so acima de 960px e proposital: a gaveta de navegacao (.nav e
   .nav-scrim, ancoradas em var(--header-h)) so existe abaixo desse ponto, entao
   ela continua alinhada ao cabecalho de 76px. scroll-padding-top e .error-page
   derivam do token e acompanham sozinhos. */
@media (min-width: 961px) {
  :root { --header-h: 92px; }
}

/* -------------------------------------------------------- breakpoints -- */

/* Custom property nao e avaliada dentro de @media, entao isto e um contrato
   escrito, nao um token. Antes eram treze valores (480, 560, 600, 620, 640, 760,
   820, 900, 960, 961, 1000), cada componente escolhendo o seu, o que fazia a
   pagina quebrar em degraus que nunca coincidiam. Sao quatro agora:

     560px  celular largo   -- uma coluna vira o padrao
     760px  tablet          -- grades de duas colunas colapsam
     960px  gaveta de nav   -- o menu vira hamburguer
     961px  gemeo min-width do anterior

   Quem precisar de um ponto novo, ajuste o componente para caber num destes. */

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

address { font-style: normal; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

::selection {
  background: var(--ink);
  color: #fff;
}

/* --------------------------------------------------------- tipografia -- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.005em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.22; }
h4 { font-size: var(--fs-md); line-height: 1.3; }

p { text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }

strong, b { font-weight: 700; }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--muted);
}

/* O rotulo e so o texto em versalete: o filete de latao que abria a linha foi
   removido. A marca de 28px continua no sistema (stats, checklist, steps), mas
   nao nasce mais aqui. Bloco, e nao inline-flex, porque nao ha mais nada para
   alinhar ao lado do texto. */
.eyebrow {
  display: block;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-text);
}

/* text-align, e nao justify-content: sem o flex, quem centraliza e o texto. O
   text-indent compensa o espacamento que a ultima letra arrasta, senao o
   rotulo assenta deslocado meio pixel a esquerda do titulo. */
.eyebrow--center {
  text-align: center;
  text-indent: .18em;
}

/* ------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: calc(var(--maxw-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .62); }
/* O filete marca a troca de secao com nitidez que 10% de luminancia nao davam,
   e sem custo de contraste. Duas alt em sequencia dispensam a linha do meio. */
.section--alt {
  background: var(--paper-alt);
  border-block: 1px solid var(--line);
}

.section--alt + .section--alt { border-top: 0; }

.section-head { max-width: 46rem; margin-bottom: var(--sp-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > .lead { margin-top: var(--sp-4); }

/* Linha de botoes fechando uma secao. Existe para tirar do HTML os
   style="text-align: center" e os margin-top avulsos que faziam esse papel. */
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.section-actions--center { justify-content: center; }

/* Ressalva de carater informativo no pe de uma secao. */
.disclaimer {
  max-width: 52rem;
  margin-top: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* O ritmo vertical dentro de um bloco de texto. A variante larga existe porque
   as colunas dos .split separavam os proprios filhos com margin-top inline em
   36 lugares do HTML; o utilitario ja estava aqui, faltava o segundo degrau. */
.flow > * + * { margin-top: var(--sp-4); }
.flow--lg > * + * { margin-top: var(--sp-5); }

/* O olho de boi ja carrega a propria margem inferior e pertence ao titulo que
   vem logo abaixo. Sem esta excecao o fluxo abriria um segundo intervalo entre
   os dois e o rotulo deixaria de colar no que ele rotula. */
.flow > .eyebrow + *,
.flow--lg > .eyebrow + * { margin-top: 0; }

/* -------------------------------------------------------- utilitarios -- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

/* input e textarea entraram com o formulario de contato. Fora desta lista eles
   herdavam o anel do navegador, que some contra --paper em alguns temas. */
:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Sobre --ink-3 o latao rende 4,7:1; o latao claro rende 7:1. Antes isso
   dependia de uma classe .on-ink que nenhum elemento chegou a receber, entao a
   regra nunca valia. Listar os proprios componentes escuros dispensa a classe.
   :where() mantem especificidade zero, para que a regra acima ainda ganhe.

   .page-hero e .cookie-notice faltavam: os dois sao --ink-3 e os dois tem
   elementos focalizaveis, entao recebiam o anel escuro sobre fundo quase preto.
   .stats saiu porque deixou de ser um bloco escuro. */
:where(.hero, .page-hero, .signals, .spotlight, .cta-band, .site-footer,
       .cookie-notice) :focus-visible { outline-color: var(--brass-lt); }

/* ------------------------------------------------------------ botoes -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  /* O mesmo raio dos cartoes. A pilula anterior era o unico gesto de app num
     conjunto sobrio: serifa, filetes de latao, retratos em preto e branco. */
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--ink-2); box-shadow: 0 14px 30px -14px rgba(30, 43, 57, .7); }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--light { background: var(--greige); color: var(--ink); }
.btn--light:hover { background: #fff; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .5); }

.btn--ghost {
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn--sm { min-height: 44px; padding: var(--sp-2) var(--sp-5); font-size: var(--fs-xs); }

/* Link de texto com seta */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}

.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--brass-text); gap: var(--sp-3); }
.link-arrow:hover svg { transform: translateX(3px); }

.link-arrow--on-ink { color: var(--brass-lt); }
.link-arrow--on-ink:hover { color: #fff; }

/* O paragrafo que carrega um .link-arrow fechando um bloco de texto. Substitui
   os margin-top inline que faziam esse papel em seis paginas. */
.link-arrow-row { margin-top: var(--sp-5); }

/* ------------------------------------------------------ animacao base -- */

/* A ocultacao e condicional de proposito. Setenta e cinco elementos usam .reveal
   e antes todos nasciam em opacity: 0, esperando o IntersectionObserver: se o
   site.js nao carregasse, o site inteiro ficava em branco. Agora quem esconde e
   a classe .js-reveal, que o proprio site.js poe no <html> na primeira linha que
   executa. Script bloqueado, arquivo com 404, erro antes daquela linha ou JS
   desligado -- em qualquer um dos casos a classe nunca entra e o conteudo
   aparece. O @media (scripting: none) sozinho so cobriria o ultimo caso. */
.reveal { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js-reveal .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
  /* A moldura grudada do .split tambem solta aqui, mas a regra mora em site.css:
     este arquivo carrega antes, e com a mesma especificidade o sticky venceria. */
}