/* Possenti & Silveira Advogados: papelaria institucional suíça (ver LEITURA.md).
   Grade de 12 colunas, fio fino, numeração de capítulos, Inter Tight no texto e Newsreader só nos títulos.
   Tinta no petróleo da marca (#012a32) e dourado do logo só em fio e detalhe. Cantos retos em tudo. */
:root {
  --fundo: #ffffff;
  --papel: #f5f4ef;
  --tinta: #1b2a2e;
  --petroleo: #012a32;
  --suave: #56676b;
  --linha: #d6dad8;
  --ouro: #b88c55;
  --ouro-escuro: #85602f;
  --marca: #012a32;
  --marca-2: #b88c55;
  --cartao: #ffffff;
  --fonte-titulo: "Newsreader", Georgia, "Times New Roman", serif;
  --fonte-texto: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --raio: 0px;
  --g: clamp(16px, 2vw, 28px);
}
body { background: var(--fundo); color: var(--tinta); font-feature-settings: "ss01", "tnum" 0; }
::selection { background: var(--petroleo); color: #fff; }
h1, h2 { color: var(--petroleo); font-weight: 400; letter-spacing: -0.018em; }
h3, h4 { font-family: var(--fonte-texto); letter-spacing: -0.005em; }
.botao { border-radius: 0; font-weight: 600; letter-spacing: .01em; padding: 1em 1.4em; }
.botao--ouro { --b-fundo: var(--petroleo); --b-tinta: #fff; }
.botao:hover { box-shadow: none; background: #0a3d47; }
.botao--vazado:hover { background: var(--papel); }
.rotulo { font: 500 12.5px/1.4 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.n { font-variant-numeric: tabular-nums; }

/* Grade de 12 colunas */
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }

/* Monograma P&S */
.mono { display: block; color: var(--petroleo); }
.mono .mono__fio { stroke: var(--ouro); }
.mono text { font-family: var(--fonte-titulo); fill: currentColor; }
.mono .mono__vazio { fill: var(--mono-fundo, #fff); }
.rodape { --mono-fundo: var(--papel); }

/* Cabeçalho */
.topo { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--linha); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.marca { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; min-height: 48px; }
.marca .mono { width: 42px; height: 42px; }
.marca__nome { font: 600 15px/1.1 var(--fonte-texto); color: var(--petroleo); letter-spacing: .01em; }
.marca__nome small { display: block; margin-top: 4px; font-weight: 500; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--suave); }
.topo__menu { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.topo__menu a { display: inline-flex; align-items: baseline; gap: 6px; font: 500 14.5px/1 var(--fonte-texto); color: var(--petroleo); padding-block: 8px; border-bottom: 1px solid transparent; transition: border-color .25s; }
.topo__menu a span { font-size: 12px; color: var(--ouro-escuro); font-variant-numeric: tabular-nums; }
.topo__menu a:hover { border-color: var(--petroleo); }
.topo__acoes { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.topo__wa { padding: .85em 1.2em; font-size: 14.5px; }
.topo__botao { display: none; }
.m-fechar, .menu-aberto .m-abrir { display: none; }
.menu-aberto .m-fechar { display: inline; }

/* Capa (hero) */
.capa { padding-top: clamp(20px, 3vw, 40px); }
.regua { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--petroleo); border-bottom: 1px solid var(--linha); }
.regua > div { padding: 12px 0; min-width: 0; }
.regua > div + div { padding-left: var(--g); border-left: 1px solid var(--linha); }
.regua dt { font: 500 12px/1.3 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.regua dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.35; color: var(--petroleo); }
.capa__grade { padding-block: clamp(32px, 4.5vw, 64px) clamp(56px, 7vw, 104px); align-items: stretch; }
.capa__texto { grid-column: 1 / 8; }
.capa h1 { font-size: clamp(2.3rem, 4.1vw, 4rem); line-height: 1.05; max-width: 17ch; }
.lide { max-width: 40ch; margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(1rem, 1.2vw, 1.12rem); color: var(--suave); }
.portas { margin-top: clamp(28px, 3.4vw, 48px); border-top: 1px solid var(--petroleo); }
.portas a { display: grid; grid-template-columns: 3.2em 1fr auto; align-items: center; column-gap: 1rem; row-gap: 2px; padding: 18px 8px 18px 0; border-bottom: 1px solid var(--linha); transition: background-color .3s, padding .35s cubic-bezier(.2,.7,.2,1); }
.portas .n { grid-row: 1 / 3; font: 500 13px var(--fonte-texto); color: var(--ouro-escuro); }
.portas .t { font: 600 clamp(1.05rem, 1.3vw, 1.2rem)/1.2 var(--fonte-texto); color: var(--petroleo); }
.portas .d { grid-column: 2; font-size: .92rem; color: var(--suave); }
.portas svg { grid-column: 3; grid-row: 1 / 3; width: 22px; height: 22px; color: var(--petroleo); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.portas a:hover { background: var(--papel); padding-left: 12px; }
.portas a:hover svg { transform: translateX(4px); }
.capa__foto { grid-column: 8 / 13; margin: 0; display: flex; flex-direction: column; }
.moldura { position: relative; overflow: hidden; background: #e4e6e5; }
.moldura img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(1.02); }
.capa__foto .moldura { flex: 1; min-height: 460px; }
.legenda { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linha); font-size: 12.5px; line-height: 1.4; color: var(--suave); }
.legenda b { font-weight: 600; color: var(--petroleo); }

/* Capítulos */
.cap { padding-top: clamp(64px, 9vw, 128px); }
.cap__cab { border-top: 1px solid var(--petroleo); padding-top: 14px; margin-bottom: clamp(28px, 4vw, 56px); row-gap: 14px; }
.cap__num { grid-column: 1 / 4; }
.cap__num b { color: var(--petroleo); font-weight: 600; margin-right: .5em; }
.cap__titulo { grid-column: 4 / 13; font-size: clamp(1.9rem, 3.4vw, 3.3rem); line-height: 1.08; max-width: 22ch; }
.cap__corpo > * { grid-column: 4 / 13; min-width: 0; }
.texto-col { max-width: 62ch; }
.texto-col p + p { margin-top: 1em; }
.texto-col p { color: var(--tinta); }

/* 01 O escritório */
.escritorio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.citacao { margin: 0; padding-top: 16px; border-top: 1px solid var(--ouro); }
.citacao p { font: 400 clamp(1.45rem, 2.2vw, 2rem)/1.22 var(--fonte-titulo); color: var(--petroleo); letter-spacing: -.01em; text-wrap: balance; }
.citacao footer { margin-top: 14px; font-size: 12.5px; color: var(--suave); letter-spacing: .04em; }

/* 02 e 03: as duas áreas, lado a lado */
.duplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--g) * 2); }
.duplo { grid-template-rows: repeat(4, auto); }
.area { min-width: 0; scroll-margin-top: 90px; display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.area > .link-seta { justify-self: start; align-self: start; }
.area .cap__cab { display: block; }
.area .cap__titulo { margin-top: 14px; font-size: clamp(1.75rem, 2.7vw, 2.6rem); max-width: 18ch; }
.area__intro { margin-bottom: 28px; color: var(--suave); max-width: 52ch; }
.area__intro strong { color: var(--petroleo); font-weight: 600; }
.indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.indice li { display: grid; grid-template-columns: 3em minmax(0, 1fr); column-gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--linha); }
.indice .n { font: 500 13px/1.6 var(--fonte-texto); color: var(--ouro-escuro); padding-top: .1em; }
.indice h3 { font: 600 1.04rem/1.35 var(--fonte-texto); color: var(--petroleo); }
.indice p { margin-top: 4px; font-size: .95rem; line-height: 1.5; color: var(--suave); }
.link-seta { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 10px 0; font: 600 15px/1.2 var(--fonte-texto); color: var(--petroleo); border-bottom: 1px solid var(--petroleo); }
.link-seta svg { width: 18px; height: 18px; transition: transform .3s; }
.link-seta:hover svg { transform: translateX(4px); }

/* 04 Tabela Família x Trabalho */
.tabela { border-top: 1px solid var(--petroleo); }
.tabela__cab, .tabela__linha { display: grid; grid-template-columns: 3em minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--g); }
.tabela__cab { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.tabela__cab span:first-child { visibility: hidden; }
.tabela__linha { padding: 22px 0; border-bottom: 1px solid var(--linha); }
.tabela__linha > .n { font: 500 13px/1.6 var(--fonte-texto); color: var(--ouro-escuro); }
.tabela h3 { font: 600 1.02rem/1.35 var(--fonte-texto); color: var(--petroleo); }
.tabela p { margin-top: 6px; font-size: .95rem; color: var(--suave); }
.cel::before { content: none; }

/* 05 Antes de começar */
.antes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.lista-def { margin: 0; border-top: 1px solid var(--linha); }
.lista-def > div { display: grid; grid-template-columns: 3em minmax(0, 1fr); column-gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--linha); }
.lista-def .n { font: 500 13px/1.6 var(--fonte-texto); color: var(--ouro-escuro); }
.lista-def dt { font: 600 1.02rem/1.35 var(--fonte-texto); color: var(--petroleo); }
.lista-def dd { grid-column: 2; margin: 4px 0 0; font-size: .95rem; color: var(--suave); }

/* 06 Etapas: régua de quatro tempos */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); counter-reset: etapa; }
.cap__corpo > .etapas { grid-column: 1 / 13; }
.etapas li { position: relative; padding-top: 18px; border-top: 1px solid var(--petroleo); }
.etapas li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--ouro); }
.etapas .n { display: block; font: 500 13px var(--fonte-texto); color: var(--ouro-escuro); }
.etapas h3 { margin-top: 10px; font: 600 1.06rem/1.3 var(--fonte-texto); color: var(--petroleo); }
.etapas p { margin-top: 6px; font-size: .95rem; color: var(--suave); }

/* 07 Sócios */
.socios { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--g); align-items: start; }
.socios__texto p { font: 400 clamp(1.2rem, 1.6vw, 1.45rem)/1.35 var(--fonte-titulo); color: var(--petroleo); }
.socios__texto small { display: block; margin-top: 12px; font-size: 12.5px; color: var(--suave); }
.socio { margin: 0; }
.socio .moldura { aspect-ratio: 3 / 4; }
.socio .moldura img { top: 0; height: 100%; }
.socio figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); }
.socio .fig { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.socio h3 { margin-top: 6px; font: 600 1.12rem/1.25 var(--fonte-texto); color: var(--petroleo); }
.socio p { margin-top: 2px; font-size: .92rem; color: var(--suave); }
.socio .oab { margin-top: 6px; font-size: 13px; color: var(--petroleo); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* 08 Avaliações */
/* nota do Google só como número com link (OAB, crítica de 14/10) */
.aval-link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--petroleo); text-decoration: underline; text-underline-offset: 4px; }
.aval-link svg { width: 18px; height: 18px; }
.aval { display: grid; grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr)); gap: var(--g); align-items: start; }
.aval__nota { padding-top: 14px; border-top: 1px solid var(--petroleo); }
.aval__nota strong { display: block; font: 400 clamp(3rem, 5vw, 4.6rem)/1 var(--fonte-titulo); color: var(--petroleo); letter-spacing: -.02em; }
.estrelas { display: flex; gap: 3px; margin-top: 10px; color: var(--ouro); }
.estrelas svg { width: 15px; height: 15px; }
.aval__nota p { margin-top: 8px; font-size: .92rem; color: var(--suave); }
.aval__nota a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-weight: 600; font-size: 14.5px; color: var(--petroleo); text-decoration: underline; text-underline-offset: 4px; }
.depo { margin: 0; padding-top: 14px; border-top: 1px solid var(--linha); }
.depo p { font-size: 1rem; line-height: 1.55; color: var(--tinta); }
.depo footer { margin-top: 12px; font-size: 12.5px; color: var(--suave); }
.depo footer b { color: var(--petroleo); font-weight: 600; }

/* 09 Perguntas, abertas */
.perguntas { margin: 0; border-top: 1px solid var(--linha); }
.perguntas > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: calc(var(--g) * 1.5); padding: 22px 0; border-bottom: 1px solid var(--linha); }
.perguntas dt { font: 600 1.04rem/1.4 var(--fonte-texto); color: var(--petroleo); }
.perguntas dd { margin: 0; font-size: .97rem; color: var(--suave); }

/* 10 Contato */
.contato { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.contato__intro { margin-bottom: 24px; color: var(--suave); max-width: 52ch; }
.canais { border-top: 1px solid var(--petroleo); }
.canais a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 14px 4px 14px 0; border-bottom: 1px solid var(--linha); transition: background-color .3s, padding .35s; }
.canais a:hover { background: var(--papel); padding-left: 10px; }
.canais .c-rot { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.canais .c-val { display: block; margin-top: 2px; font: 600 1.05rem/1.3 var(--fonte-texto); color: var(--petroleo); overflow-wrap: anywhere; }
.canais svg { width: 20px; height: 20px; color: var(--petroleo); }
.endereco { padding-top: 14px; border-top: 1px solid var(--linha); font-style: normal; }
.endereco p { color: var(--tinta); }
.endereco .rotulo { display: block; margin-bottom: 8px; }
.endereco a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-weight: 600; color: var(--petroleo); text-decoration: underline; text-underline-offset: 4px; }
.selo { margin-top: 24px; padding: 16px 0 0; border-top: 1px solid var(--linha); font-size: .92rem; color: var(--suave); }

/* Rodapé */
.rodape { margin-top: clamp(72px, 10vw, 140px); padding: 28px 0 40px; border-top: 1px solid var(--petroleo); background: var(--papel); }
.rodape__grade { align-items: start; row-gap: 20px; }
.rodape__marca { grid-column: 1 / 5; display: flex; align-items: center; gap: 16px; }
.rodape__marca .mono { width: 48px; height: 48px; }
.rodape__marca img { width: 120px; height: auto; }
.rodape__legal { grid-column: 5 / 9; font-size: 13.5px; line-height: 1.6; color: var(--suave); }
.rodape__links { grid-column: 9 / 13; font-size: 13.5px; line-height: 1.6; color: var(--suave); text-align: right; }
.rodape__links a { color: var(--petroleo); text-decoration: underline; text-underline-offset: 3px; }
.miudo { grid-column: 1 / 13; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 12.5px; color: var(--suave); }

/* WhatsApp: botão reto no petróleo, não a bolinha verde */
.wa-flutuante { background: var(--petroleo); border-radius: 0; box-shadow: 0 10px 30px -12px rgb(1 42 50 / .55); }
.wa-flutuante:hover { transform: none; background: #0a3d47; }

/* Telas médias */
@media (max-width: 1080px) {
  .topo__menu { gap: 18px; }
  .topo__menu a span { display: none; }
  .aval { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .socios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .socios__texto { grid-column: 1 / -1; }
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 900px) {
  .topo__menu { display: none; }
  .topo__botao { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--petroleo); background: #fff; color: var(--petroleo); font: 600 14px var(--fonte-texto); cursor: pointer; }
  .menu-aberto .topo__menu { display: flex; position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: stretch; gap: 0; padding: 112px 16px 24px; background: #fff; overflow: auto; }
  .menu-aberto .topo__menu a { padding: 16px 0; font-size: 1.35rem; border-bottom: 1px solid var(--linha); }
  .menu-aberto .topo__menu a span { display: inline; font-size: 13px; margin-right: 10px; }
  .menu-aberto .wa-flutuante { display: none; }
  .capa__texto, .capa__foto { grid-column: 1 / -1; }
  .capa__foto { order: -1; margin-bottom: 32px; }
  .capa__foto .moldura { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
  .capa h1 { max-width: 18ch; }
  .cap__num, .cap__titulo, .cap__corpo > * { grid-column: 1 / -1; }
  .duplo { grid-template-columns: 1fr; grid-template-rows: none; row-gap: clamp(64px, 9vw, 128px); }
  .area { display: block; grid-row: auto; }
  .escritorio, .antes, .contato { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topo__linha { height: 64px; }
  .topo__wa { display: none; }
  .marca .mono { width: 38px; height: 38px; }
  .marca__nome { font-size: 14px; }
  .marca__nome small { font-size: 12px; letter-spacing: .2em; }
  .capa > .wrap { display: flex; flex-direction: column; }
  .capa__grade { padding-top: 8px; padding-bottom: 40px; }
  .regua { order: 2; grid-template-columns: 1fr; }
  .regua > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--linha); }
  .regua > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; padding: 9px 0; align-items: baseline; }
  .regua dd { margin: 0; }
  .capa h1 { font-size: clamp(2.05rem, 9.4vw, 2.6rem); }
  .portas a { grid-template-columns: 2.6em 1fr auto; padding-right: 2px; }
  .portas a:hover { padding-left: 0; }
  .legenda { flex-direction: column; gap: 2px; }
  .tabela__cab { display: none; }
  .tabela__linha { grid-template-columns: 2.4em minmax(0, 1fr); row-gap: 18px; }
  .tabela__linha .cel { grid-column: 2; }
  .cel::before { content: attr(data-area); display: block; margin-bottom: 6px; font: 500 12px/1.3 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-escuro); }
  .etapas { grid-template-columns: 1fr; row-gap: 28px; }
  .socios, .aval { grid-template-columns: 1fr; }
  .socios { row-gap: 32px; }
  .socio .moldura { aspect-ratio: 4 / 5; }
  .aval { row-gap: 24px; }
  .perguntas > div { grid-template-columns: 1fr; row-gap: 8px; }
  .canais a:hover { padding-left: 0; }
  .rodape__marca, .rodape__legal, .rodape__links { grid-column: 1 / -1; text-align: left; }
}