/* #1363 jaisaveiga.advogada — site (designer5, 14/11/2026). Tokens em tokens.css.
   Tese: o site é uma folha dos autos — margem, fólio numerado e o § como único grafismo. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 var(--t-texto)/1.65 var(--f-texto); overflow-x: clip; -webkit-font-smoothing: antialiased; }
/* grão de papel, 3 % */
body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, dl, dd, figure { margin: 0; }
ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 340; line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.01em; }
em { font-style: italic; font-weight: 300; }
:focus-visible { outline: 2px solid var(--metal-texto); outline-offset: 4px; border-radius: 2px; }
.hero :focus-visible, .contato :focus-visible, .topo :focus-visible, .rodape :focus-visible { outline-color: var(--metal-claro); }

.pular { position: absolute; left: var(--margem); top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--papel); color: var(--tinta); }
.pular:focus { top: .5rem; }
.pular:focus-visible { outline-color: var(--metal-claro); }

/* fólio: o número da folha na margem */
.folio { font-size: var(--t-mini); letter-spacing: .18em; text-transform: uppercase; color: var(--metal-texto); font-weight: 500; }
.hero .folio, .contato .folio { color: var(--metal-claro); }

/* régua de latão que se desenha */
.regua { display: block; height: 1px; background: var(--metal-claro); transform-origin: left center; }
.regua--tinta { background: var(--metal); margin: var(--e3) 0; }

/* botão */
.botao { display: inline-flex; align-items: center; gap: .9rem; min-height: 3.25rem; padding: .85rem 1.5rem; border: 1px solid currentColor; text-decoration: none; font-weight: 500; letter-spacing: .02em; position: relative; overflow: hidden; isolation: isolate; transition: color var(--dur) var(--ease); }
.botao svg { width: 1.25rem; height: 1.25rem; flex: none; transition: transform var(--dur) var(--ease); }
.botao::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--metal-claro); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur) var(--ease); }
.botao--metal { color: var(--metal-claro); }
/* ação principal: latão cheio (o contorno fica para a ação secundária) */
.botao--cheio { background: var(--metal-claro); border-color: var(--metal-claro); color: var(--vinho); font-weight: 600; }
.botao--cheio::before { background: var(--papel); }
.botao:hover, .botao:focus-visible { color: var(--vinho); }
.botao:hover::before, .botao:focus-visible::before { transform: scaleY(1); }
.botao:hover svg { transform: translateX(4px); }
.botao:active { transform: translateY(1px); }
.botao--grande { font-size: 1.125rem; min-height: 4rem; padding-inline: 2rem; }

/* link com sublinhado que se desenha */
.fio { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; background: linear-gradient(currentColor, currentColor) left calc(100% - .55rem) / 100% 1px no-repeat; transition: background-size var(--dur) var(--ease); }
.fio:hover { background-size: 0 1px; background-position: right calc(100% - .55rem); }

/* foto: moldura com zoom lento */
.hero__retrato, .hero__retrato img, .quem__foto img { width: 100%; transition: transform 1.2s var(--ease); }
.quem__foto:hover img { transform: scale(1.03); }
.hero__retrato { outline: 1px solid rgba(214, 183, 124, .5); outline-offset: .5rem; }

/* ---------- topo ---------- */
.topo { position: absolute; inset: auto 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e2) var(--margem); color: var(--papel-sobre-vinho); }
.topo__marca { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; font-family: var(--f-titulo); font-size: 1.125rem; letter-spacing: -.01em; }
.topo__sufixo { font-style: italic; color: var(--metal-claro); margin-left: .35em; }
.topo__nav { display: none; gap: var(--e4); font-size: .9375rem; }
.topo__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; background: linear-gradient(var(--metal-claro), var(--metal-claro)) left calc(100% - .5rem) / 0 1px no-repeat; transition: background-size var(--dur) var(--ease); }
.topo__nav a:hover, .topo__nav a:focus-visible { background-size: 100% 1px; }

/* ---------- 1. hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; padding: 6.5rem var(--margem) var(--e3); background: var(--vinho); color: var(--papel-sobre-vinho); overflow: clip; }
.hero__sinal { position: absolute; right: -6vw; top: -8vh; z-index: 0; font-family: var(--f-titulo); font-weight: 200; font-size: clamp(24rem, 62vw, 62rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(214, 183, 124, .28); pointer-events: none; user-select: none; }
.hero__grade { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e3); row-gap: var(--e3); align-items: end; }
.hero__sobre { grid-column: 1 / -1; font-size: var(--t-mini); letter-spacing: .22em; text-transform: uppercase; color: var(--metal-claro); }
.hero__titulo { grid-column: 1 / -1; font-size: var(--t-hero); font-weight: 300; line-height: .88; letter-spacing: -.045em; }
.hero__linha { display: block; }
.hero__linha--it { font-style: italic; font-weight: 200; color: var(--metal-claro); padding-left: 1.1em; }
.hero__base { grid-column: 1 / -1; display: grid; gap: var(--e3); justify-items: start; max-width: 34rem; }
.hero__lide { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; max-width: 46ch; }
.hero__retrato { grid-column: 1 / -1; width: min(60%, 15rem); justify-self: end; order: -1; margin: 0 .5rem 2rem 0; }
.hero__rodape { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e3); margin-top: var(--e4); }
.hero__rodape .regua { grid-column: 1 / -1; }
.hero__rolar { font-size: var(--t-mini); letter-spacing: .18em; text-transform: uppercase; }

/* entrada do hero: só com JS e com movimento permitido; solta sozinho (.pronto) */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.pronto) .hero__titulo { opacity: 0; }
}

/* ---------- 2. tese (momento tipográfico) ---------- */
.tese { padding: var(--secao) var(--margem); display: grid; gap: var(--e4); }
.tese__frase { font-family: var(--f-titulo); font-weight: 300; font-size: clamp(1.9rem, 1rem + 4.2vw, 5.25rem); line-height: 1.08; letter-spacing: -.025em; max-width: 24ch; }
.tese__frase em { color: var(--metal-texto); }
.tese__autoria { font-size: var(--t-mini); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-2); display: flex; align-items: center; gap: var(--e2); }
.tese__autoria::before { content: ""; width: 3rem; height: 1px; background: var(--metal); }

/* ---------- 3. áreas (sumário) ---------- */
.areas { padding: 0 var(--margem) var(--secao); display: grid; gap: var(--e6); }
.areas__cabeca { display: grid; gap: var(--e2); align-content: start; }
.areas__nota { color: var(--tinta-2); max-width: 34ch; }
.sumario { border-top: 1px solid var(--tinta); }
.sumario__item { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--e1) var(--e2); padding: var(--e3) 0; border-bottom: 1px solid rgba(30, 21, 19, .22); position: relative; transition: padding-left var(--dur) var(--ease); }
.sumario__item::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--metal); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.sumario__item:hover::after { transform: scaleX(1); }
.sumario__num { font-family: var(--f-titulo); font-style: italic; color: var(--metal-texto); padding-top: .2em; }
.sumario__item p { grid-column: 2; color: var(--tinta-2); max-width: 52ch; }

/* ---------- 4. caminho (momento assinatura) ---------- */
.caminho { background: var(--papel-2); }
.caminho__palco { padding: var(--secao) var(--margem); display: grid; gap: var(--e6); }
.caminho__cabeca { display: grid; gap: var(--e2); }
.caminho__passos { display: grid; gap: var(--e3); }
/* cada passo é uma folha: papel, margem de latão, pauta e borda (no celular e na tela larga) */
.passo { display: grid; gap: var(--e2); padding: var(--e3) var(--e3) var(--e4) 3.25rem; border: 1px solid rgba(118, 88, 34, .55); transform-origin: left center;
  background: linear-gradient(var(--metal), var(--metal)) 2rem 0 / 1px 100% no-repeat, repeating-linear-gradient(to bottom, transparent 0 2.5rem, rgba(30, 21, 19, .07) 2.5rem calc(2.5rem + 1px)), #fbf8f2; }
.passo__num { font-family: var(--f-titulo); font-weight: 200; font-size: clamp(5rem, 28vw, 9rem); line-height: .8; letter-spacing: -.05em; color: var(--metal-texto); }
.passo__texto { display: grid; gap: var(--e1); max-width: 44ch; }
.passo__texto p { color: var(--tinta-2); }
.passo__fls { font-size: var(--t-mini); letter-spacing: .18em; text-transform: uppercase; color: var(--metal-texto); font-weight: 500; }
.caminho__trilho { display: none; }

/* ---------- peça gráfica: a folha dos autos (margem, fólio, § e linhas de latão) ---------- */
.folha { position: relative; --w: 10rem; width: var(--w); display: grid; align-content: space-between; aspect-ratio: 210 / 297; padding: calc(var(--w) * .09) calc(var(--w) * .09) calc(var(--w) * .1) calc(var(--w) * .21); border: 1px solid var(--metal); color: var(--metal-texto);
  background: linear-gradient(var(--metal), var(--metal)) 13% 0 / 1px 100% no-repeat, #fbf8f2;
  box-shadow: .45rem .45rem 0 -1px var(--papel), .45rem .45rem 0 0 var(--metal); }
.folha__fls { justify-self: end; white-space: nowrap; font-size: clamp(.5rem, calc(var(--w) * 0.049), .75rem); letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.folha__sinal { font-family: var(--f-titulo); font-style: italic; font-weight: 200; font-size: calc(var(--w) * 0.434); line-height: .8; }
.folha__linhas { width: 100%; height: calc(var(--w) * 0.21); background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px calc(var(--w) * 0.0525)); opacity: .55; clip-path: polygon(0 0, 100% 0, 100% 76%, 58% 76%, 58% 100%, 0 100%); }
.folha__assina { font-family: var(--f-titulo); font-style: italic; font-weight: 300; width: 100%; font-size: calc(var(--w) * 0.147); line-height: 1; padding-top: calc(var(--w) * 0.042); border-top: 1px solid currentColor; }
.folha--vinho { border-color: rgba(214, 183, 124, .6); color: var(--metal-claro);
  background: linear-gradient(rgba(214, 183, 124, .6), rgba(214, 183, 124, .6)) 13% 0 / 1px 100% no-repeat, var(--vinho-2);
  box-shadow: .45rem .45rem 0 -1px var(--vinho), .45rem .45rem 0 0 rgba(214, 183, 124, .6); }
.folha--vinho .folha__linhas { height: calc(var(--w) * 0.315); }

/* ---------- 5. sabia dessa? ---------- */
.sabia { padding: var(--secao) var(--margem); display: grid; gap: var(--e6); }
.sabia__cabeca { display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e3); align-items: end; }
.sabia__cabeca .folio { align-self: end; }
.sabia__cabeca h2 { grid-column: 1; }
.sabia__cabeca .folha { grid-column: 2; grid-row: 1 / 3; --w: clamp(5.5rem, 13vw, 11rem); margin: 0 .45rem .45rem 0; }
.sabia__grade { display: grid; gap: var(--e3); }
/* cada nota é uma folha: margem de latão e canto dobrado */
.nota { position: relative; clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%); }
.nota::after { content: ""; position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; background: linear-gradient(to top right, var(--metal) 50%, transparent 50%); opacity: .55; }
.nota { display: grid; gap: var(--e2); align-content: start; padding: var(--e4) var(--e3) var(--e4) var(--e4); background: linear-gradient(rgba(168, 132, 63, .5), rgba(168, 132, 63, .5)) 1rem 0 / 1px 100% no-repeat, #fbf8f2; border: 1px solid rgba(30, 21, 19, .14); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.nota:hover { transform: translateY(-2px); border-color: var(--metal); }
.nota__marca { font-family: var(--f-titulo); font-style: italic; font-size: 2.5rem; line-height: 1; color: var(--metal-texto); }
.nota p { color: var(--tinta-2); }
.nota .nota__lei { margin-top: var(--e2); padding-top: var(--e2); border-top: 1px solid rgba(30, 21, 19, .14); font-size: var(--t-mini); letter-spacing: .08em; text-transform: uppercase; color: var(--metal-texto); }
.sabia__aviso { font-size: var(--t-mini); color: var(--tinta-2); max-width: 60ch; }

/* ---------- 6. quem assina ---------- */
.quem { padding: 0 var(--margem) var(--secao); display: grid; gap: var(--e6); }
/* o segundo recorte entra em duotone vinho e papel, para não repetir o retrato do hero */
.quem__foto { position: relative; overflow: hidden; isolation: isolate; background: var(--papel); outline: 1px solid var(--metal); outline-offset: .5rem; margin: .5rem; }
.quem__foto img { filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; }
.quem__foto::after { content: ""; position: absolute; inset: 0; background: var(--vinho); mix-blend-mode: lighten; pointer-events: none; }
.quem__texto { display: grid; gap: var(--e2); align-content: center; }
.quem__nome { font-family: var(--f-titulo); font-size: var(--t-h3); letter-spacing: .08em; text-transform: uppercase; margin-top: var(--e3); }
.quem__oab { font-size: var(--t-mini); letter-spacing: .18em; text-transform: uppercase; color: var(--metal-texto); }
.quem__bio { color: var(--tinta-2); max-width: 56ch; }
.quem__lema { font-family: var(--f-titulo); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.15; letter-spacing: -.015em; margin-top: var(--e3); max-width: 18ch; }

/* ---------- 7. contato ---------- */
.contato { padding: var(--secao) var(--margem); background: var(--vinho); color: var(--papel-sobre-vinho); display: grid; gap: var(--e6); }
.contato h2 { font-size: clamp(2.75rem, 1rem + 8.5vw, 9rem); font-weight: 300; line-height: .92; letter-spacing: -.04em; }
.contato h2 em { color: var(--metal-claro); font-weight: 200; }
.contato__grade { display: grid; gap: var(--e6); align-items: start; }
.contato__atalhos { display: grid; gap: var(--e2); justify-items: start; }
.contato__atalhos .botao { width: 100%; justify-content: space-between; text-align: left; }
.contato__dados { display: grid; gap: var(--e3); align-content: start; }
.contato__grade .folha { --w: clamp(10rem, 16vw, 13rem); justify-self: end; margin: 0 .45rem .45rem 0; }
.contato__dados div { display: grid; gap: .25rem; padding-top: var(--e2); border-top: 1px solid rgba(214, 183, 124, .4); }
.contato__dados dt { font-size: var(--t-mini); letter-spacing: .18em; text-transform: uppercase; color: var(--metal-claro); }

/* ---------- rodapé ---------- */
.rodape { padding: var(--e6) var(--margem) 6.5rem; background: var(--vinho); color: var(--papel-sobre-vinho); display: grid; gap: var(--e2); border-top: 1px solid rgba(214, 183, 124, .4); }
.rodape__marca { font-family: var(--f-titulo); font-size: 1.5rem; }
.rodape__marca em { color: var(--metal-claro); }
.rodape__nota, .rodape__credito { font-size: var(--t-mini); max-width: 62ch; color: #d9cfc2; }

/* WhatsApp fixo no celular: barra na base, o rodapé reserva o espaço dela */
.zap-fixo { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 50; display: flex; align-items: center; justify-content: center; min-height: 3.25rem; background: var(--metal-claro); color: var(--vinho); font-weight: 600; text-decoration: none; letter-spacing: .02em; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.zap-fixo:active { transform: translateY(1px); }
/* some enquanto o hero ou o contato (que já têm o botão) estão na tela; sem JS fica sempre visível */
.zap-fixo { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.zap-fixo--recolhido { transform: translateY(150%); opacity: 0; pointer-events: none; }

/* ---------- 768 ---------- */
@media (min-width: 48rem) {
  .sabia__grade { grid-template-columns: repeat(3, 1fr); }
  .nota--baixa { margin-top: var(--e8); }
  .quem { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e3); }
  .quem__foto { grid-column: 1 / 6; }
  .quem__texto { grid-column: 7 / 13; }
  .contato__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--e8); }
  .contato__dados { grid-template-columns: repeat(2, 1fr); }
  .contato__grade .folha { grid-column: 2; }
  .sumario__item { grid-template-columns: 5rem minmax(0, 5fr) minmax(0, 6fr); align-items: baseline; padding: var(--e4) 0; }
  .sumario__item p { grid-column: 3; }
  .sumario__item:hover { padding-left: var(--e2); }
}

/* ---------- 1024+ ---------- */
@media (min-width: 64rem) {
  .topo__nav { display: flex; }
  /* a folha sobe para a linha dos botões e dos dados: sem linha própria na grade */
  .contato__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; column-gap: var(--e6); }
  .contato__grade .folha { grid-column: 3; }
  .zap-fixo { display: none; }
  .rodape { padding-bottom: var(--e6); grid-template-columns: 1fr 2fr auto; align-items: end; column-gap: var(--e6); }
  .hero__titulo { grid-column: 1 / 10; grid-row: 2; position: relative; z-index: 1; }
  .hero__sobre { grid-row: 1; }
  .hero__base { grid-column: 1 / 7; grid-row: 3; }
  .hero__retrato { grid-column: 9 / 13; grid-row: 1 / 4; width: 100%; order: 0; align-self: end; margin: 0; }
  .tese { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e3); }
  .tese .folio { grid-column: 1 / 3; padding-top: 1rem; }
  .tese__frase, .tese__autoria { grid-column: 3 / 13; }
  .areas { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e3); }
  .areas__cabeca { grid-column: 1 / 5; position: sticky; top: 6rem; align-self: start; }
  .sumario { grid-column: 5 / 13; }
  .passo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e3); align-items: end; }
  .passo__num { grid-column: 1 / 7; font-size: clamp(9rem, 24vw, 24rem); }
  .passo__texto { grid-column: 8 / 13; padding-bottom: 1.5rem; }
  .sabia { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e3); }
  .sabia__cabeca { grid-column: 1 / 13; }
  .sabia__grade { grid-column: 2 / 13; }
  .sabia__aviso { grid-column: 2 / 13; }

  /* momento assinatura fixo: só quando o JS liga (.caminho--fixo); sem ele fica a lista */
  .caminho--fixo .caminho__palco { height: 100vh; min-height: 40rem; padding-block: 5.5rem 2rem; grid-template-rows: auto 1fr auto; gap: var(--e3); overflow: hidden; }
  /* cada passo é uma folha empilhada; a rolagem vira a de cima pela margem esquerda */
  .caminho--fixo .caminho__passos { position: relative; display: block; perspective: 4200px; overflow: hidden; }
  .caminho--fixo .passo { position: absolute; inset: 0; grid-template-rows: auto 1fr; align-items: end; padding: var(--e3) var(--e4) var(--e3) 7rem; border: 1px solid rgba(118, 88, 34, .55); transform-origin: left center; backface-visibility: hidden;
    background: linear-gradient(var(--metal), var(--metal)) 4.5rem 0 / 1px 100% no-repeat, repeating-linear-gradient(to bottom, transparent 0 2.5rem, rgba(30, 21, 19, .07) 2.5rem calc(2.5rem + 1px)), #fbf8f2;
    box-shadow: 0 24px 48px -30px rgba(44, 16, 22, .45); }
  .caminho--fixo .passo:nth-child(1) { z-index: 3; }
  .caminho--fixo .passo:nth-child(2) { z-index: 2; }
  .caminho--fixo .passo:nth-child(3) { z-index: 1; }
  .caminho--fixo .passo__fls { grid-column: 1 / -1; justify-self: end; align-self: start; }
  .caminho--fixo .passo__num { font-size: min(46vh, 27vw); }
  .caminho--fixo .passo__texto { padding-bottom: 1rem; }
  .caminho--fixo .caminho__trilho { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; padding-top: var(--e2); border-top: 1px solid rgba(30, 21, 19, .22); font-size: var(--t-mini); letter-spacing: .18em; color: var(--tinta-2); }
  .caminho--fixo .caminho__fio { position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--metal); transform: scaleX(0); transform-origin: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}