/* Página inicial: a abertura com a pena. As fontes, o cabeçalho, o rodapé e o painel vêm do comum.css. */
:root {
  --bordo: #5C1A24;
  --marfim: #F5F0E6;
  --tinta: #1F1A1C;
  --latao: #A98455;
  --pedra: #8A817C;
  --areia: #E6DDD0;
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --lado: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  --cima: max(14px, env(safe-area-inset-top));
  --baixo: max(18px, env(safe-area-inset-bottom));
  --altura: 100vh;
  --rotulo: 11px;
}
@supports (height: 100dvh) { :root { --altura: 100dvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--tinta); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tinta);
  color: var(--marfim);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 1px solid var(--areia); outline-offset: 5px; }

/* ---------- a tela: tudo cabe numa altura de tela; só uma tela pequena demais rola ---------- */
.tela { position: relative; min-height: var(--altura); overflow-x: clip; }

/* o canvas cobre a tela durante a abertura; no fim o site.js o desloca e reduz até a pena cair no lugar.
   O palco recorta a caixa deslocada, que senão passaria do pé da tela e criaria rolagem */
.palco { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: var(--altura); overflow: hidden; pointer-events: none; }
.pena {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  transform-origin: 0 0;
  opacity: 0; transition: opacity 1.2s ease;
}
.pena.pronta { opacity: 1; }
.pena.indo { transition: opacity 1.2s ease, transform 1.25s cubic-bezier(.65, 0, .2, 1); }
.rapido .pena.indo { transition-duration: .4s, .7s; }
/* a imagem nítida acende por cima do canvas e só então ele some: as duas meio transparentes juntas "lavavam" a pena */
.nitida .pena { opacity: 0; transition: opacity 0s linear .65s; }
.sem-quadros .pena { opacity: 0; transition: opacity .5s ease; }
/* o canvas tinha um quadro do giro: a imagem fixa espera ele quase apagar, para não haver duas penas juntas */
.sem-quadros.apagando .pena-fixa { transition-delay: .4s; }

/* composição em retrato: a pena em cima, o texto embaixo, o conjunto centrado na altura */
.composicao {
  position: relative; z-index: 1;
  height: var(--altura); min-height: 480px;
  display: grid;
  grid-template-rows: minmax(0, min(50vh, 440px)) auto;
  align-content: center;
  row-gap: clamp(18px, 3.4vh, 40px);
  padding: calc(var(--cima) + 60px) var(--lado) var(--baixo);
}
.lugar-pena { position: relative; min-height: 0; width: min(100%, 62vw, 340px); justify-self: center; }
.pena-fixa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease; }
.nitida .pena-fixa, .sem-quadros .pena-fixa, .estatico .pena-fixa, .no-js .pena-fixa { opacity: 1; }
/* com JS, a imagem só aparece inteira: chegando pela rede, ela se desenharia em faixas */
.js .pena-fixa:not(.carregada) { opacity: 0 !important; }

.texto { display: flex; flex-direction: column; align-items: center; text-align: center; }
.marca { margin: 0; width: clamp(196px, 60vw, 300px); }
.marca img { width: 100%; height: auto; }
.frase {
  margin-top: clamp(16px, 3vh, 30px);
  font-style: italic; font-weight: 400; color: var(--areia);
  font-size: clamp(21px, min(6.2vw, 3.9vh), 30px); line-height: 1.2; letter-spacing: .005em;
}
.frase .linha { display: block; }
.palavra { display: inline-block; }
.contato {
  list-style: none; margin: clamp(16px, 3vh, 30px) 0 0; padding: 0;
  display: flex; justify-content: center;
}
.botao-contato {
  display: inline-flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 24px 0 28px;
  border: 1px solid rgba(169, 132, 85, .75); color: var(--marfim); text-decoration: none;
  font-family: var(--sans); font-weight: 500; font-size: var(--rotulo); letter-spacing: .28em; text-transform: uppercase;
  transition: background .4s cubic-bezier(.2, .7, .2, 1), border-color .4s ease;
}
.botao-contato .icone { width: 18px; height: 18px; color: var(--latao-claro); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.botao-contato:hover { background: rgba(169, 132, 85, .16); border-color: var(--latao-claro); }
.botao-contato:hover .icone { transform: translateX(4px); }
.assinatura { margin-top: clamp(10px, 2.4vh, 24px); }
.nome { font-size: clamp(16px, 4.4vw, 19px); line-height: 1.3; }
.oab {
  margin-top: 4px; font-family: var(--sans); font-weight: 500; font-size: 10px; line-height: 1.6;
  letter-spacing: .22em; text-transform: uppercase; color: var(--latao); text-wrap: balance;
}

/* paisagem: a pena à esquerda, o texto à direita, alinhado pela esquerda */
@media (min-aspect-ratio: 1/1) {
  .composicao {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-content: stretch; align-items: center;
    column-gap: clamp(28px, 5vw, 110px);
    padding: calc(var(--cima) + 44px) max(var(--lado), 7vw) calc(var(--baixo) + 24px);
    max-width: 1840px; margin-inline: auto;   /* tela muito larga: o conjunto fica no meio, não à esquerda */
  }
  .lugar-pena { width: 100%; height: min(100%, max(680px, 64vh)); justify-self: stretch; }
  .texto { align-items: flex-start; text-align: left; }
  .marca { width: clamp(220px, 27vw, 430px); }
  .frase { font-size: clamp(22px, min(2.7vw, 5vh), 42px); margin-top: clamp(18px, 3.6vh, 40px); }
  .contato { justify-content: flex-start; margin-top: clamp(18px, 3.6vh, 40px); }
  .nome { font-size: clamp(16px, 1.45vw, 21px); }
}
@media (min-aspect-ratio: 1/1) and (min-width: 1280px) and (min-height: 640px) {
  :root { --rotulo: 13px; }
  .oab { font-size: 11.5px; }
  .botao-contato { min-height: 56px; padding: 0 28px 0 32px; }
}
/* tablet em pé: a mesma composição do celular, com letra maior */
@media (max-aspect-ratio: 1/1) and (min-width: 600px) and (min-height: 800px) {
  :root { --rotulo: 12.5px; }
  .lugar-pena { width: min(100%, 52vw, 400px); }
  .marca { width: clamp(300px, 46vw, 400px); }
  .frase { font-size: clamp(30px, 4.6vw, 38px); }
  .nome { font-size: 21px; }
  .oab { font-size: 11px; }
}
/* monitor em pé ou tablet grande: a mesma composição, maior */
@media (max-aspect-ratio: 1/1) and (min-width: 900px) and (min-height: 1400px) {
  :root { --rotulo: 14px; }
  .composicao { grid-template-rows: minmax(0, min(46vh, 820px)) auto; }
  .lugar-pena { width: min(100%, 52vw, 640px); }
  .marca { width: clamp(400px, 42vw, 520px); }
  .frase { font-size: clamp(38px, 4vw, 50px); }
  .nome { font-size: 24px; }
  .oab { font-size: 12.5px; }
}
/* celular deitado: tudo menor, para caber numa tela baixa */
@media (min-aspect-ratio: 1/1) and (max-height: 500px) {
  :root { --rotulo: 10px; }
  .composicao {
    min-height: 300px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 24px;
    padding: calc(var(--cima) + 30px) var(--lado) var(--baixo);
  }
  .cabecalho--inicio .cabecalho-faixa { min-height: 48px; }
  .marca { width: clamp(160px, 28vw, 230px); }
  .frase { font-size: clamp(16px, 5.2vh, 21px); margin-top: 10px; }
  .contato { margin-top: 8px; }
  .botao-contato { min-height: 42px; letter-spacing: .2em; }
  .assinatura { margin-top: 2px; }
  .nome { font-size: 15px; }
  .oab { margin-top: 0; font-size: 9.5px; letter-spacing: .16em; }
}
/* tela estreita, ou deitada com a coluna de texto estreita: a cidade em linha própria (sem o "·" solto no fim) */
@media (max-width: 380px), (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3) and (max-width: 820px),
  (min-aspect-ratio: 1/1) and (max-width: 520px) {
  .oab .cidade { display: block; }
  .oab .cidade > span { display: none; }
}

/* ---------- revelação (só com JS): o texto entra depois que a pena chega ---------- */
.js .marca, .js .palavra, .js .contato li, .js .assinatura, .js .topo, .js .descer {
  opacity: 0;
  transition: opacity .9s ease, transform 1.05s cubic-bezier(.2, .7, .2, 1), filter 1.05s ease;
}
.js .marca { transform: translateY(10px); filter: blur(6px); }
.js .palavra { transform: translateY(.18em); }
.js .contato li, .js .assinatura { transform: translateY(8px); }
.js .contato a, .js .topo a, .js .topo button, .js .descer { visibility: hidden; transition: visibility 0s linear 1s; }
.assentada { --ritmo: 1; }
.assentada.rapido { --ritmo: .3; }
.assentada .marca, .assentada .palavra, .assentada .contato li, .assentada .assinatura, .assentada .topo, .assentada .descer { opacity: 1; transform: none; filter: none; }
.assentada .marca { transition-delay: calc(var(--ritmo) * .45s); }
.assentada .palavra { transition-delay: calc(var(--ritmo) * (.8s + var(--i, 0) * 85ms)); }
.assentada .contato li { transition-delay: calc(var(--ritmo) * (1.4s + var(--j, 0) * 75ms)); }
.assentada .assinatura { transition-delay: calc(var(--ritmo) * 1.65s); }
.assentada .topo, .assentada .descer { transition-delay: calc(var(--ritmo) * 1.85s); }
.assentada .contato a, .assentada .topo a, .assentada .topo button, .assentada .descer { visibility: visible; }
/* o link só fica tocável quando aparece */
.assentada .contato a { transition-delay: calc(var(--ritmo) * 1.4s); }
.assentada .topo a, .assentada .topo button, .assentada .descer { transition-delay: calc(var(--ritmo) * 1.85s); }

/* movimento reduzido: tudo parado e visível, a pena nítida no lugar, sem o canvas */
.estatico .palco { display: none; }
.estatico .marca, .estatico .palavra, .estatico .contato li, .estatico .assinatura, .estatico .topo, .estatico .descer {
  opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
}
.estatico .contato a, .estatico .topo a, .estatico .topo button, .estatico .descer { visibility: visible !important; transition: none !important; }
/* a pena fixa acende devagar quando termina de chegar (opacidade, sem movimento) */

/* sem JS: a imagem fixa e o texto, já no lugar */
.no-js .palco { display: none; }

/* transição entre páginas: a pena vai para o topo do Sobre; o logotipo, para o cabeçalho */
.pena-fixa { view-transition-name: pena; }
.marca img { view-transition-name: marca; }

/* ---------- abaixo da primeira tela ---------- */
.descer {
  position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 2;
  display: grid; place-items: center; width: 44px; height: 52px; margin-left: -22px;
}
.descer span { width: 1px; height: 34px; background: linear-gradient(to bottom, rgba(169, 132, 85, 0), var(--latao)); }
@media (min-aspect-ratio: 1/1) and (max-height: 500px) { .descer { display: none; } }
@media (max-aspect-ratio: 1/1) { .descer { bottom: max(6px, env(safe-area-inset-bottom)); height: 40px; } .descer span { height: 24px; } }
.inicio-mais { position: relative; background: var(--tinta); border-top: 1px solid rgba(169, 132, 85, .22); }
.inicio-faixa {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 110px);
  max-width: 1240px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--lado);
}
@media (max-width: 860px) { .inicio-faixa { grid-template-columns: 1fr; } }
.inicio-titulo { margin-top: 16px; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; color: var(--marfim); text-wrap: balance; }
.inicio-texto { margin-top: 20px; max-width: 34em; font-size: 19px; line-height: 1.6; color: var(--areia); }
.inicio-intro .link-seta { margin-top: 18px; }
.lista-areas { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 18px 0 14px; }
.lista-areas li { display: inline-flex; align-items: center; }
.lista-areas li:not(:last-child)::after { content: "·"; margin: 0 12px; color: var(--pedra); }
.lista-areas a { display: inline-flex; align-items: center; min-height: 40px; font-size: 21px; font-style: italic; color: var(--marfim); text-decoration: none; transition: color .3s ease; }
.lista-areas a:hover { color: var(--latao-claro); }
.inicio-blog { display: block; padding-top: 0; }
.inicio-blog-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.inicio-mais .cartao { border-top-color: var(--linha-clara); }
.inicio-mais .cartao-area { color: var(--latao); }
.inicio-mais .cartao-titulo { color: var(--marfim); background-image: linear-gradient(var(--latao), var(--latao)); }
.inicio-mais .cartao-link:hover .cartao-titulo { color: var(--latao-claro); }
.inicio-mais .cartao-resumo { color: var(--areia); }
.inicio-mais .cartao-meta { color: var(--pedra); }