/* Base comum do site — Dra. Jéssica Gonçalves. As variáveis do hero estão em hero.css (:root). */
:root{
  --respiro: clamp(96px, 12vw, 180px);
  --conteudo: 1320px;
  --curva: cubic-bezier(.16,.84,.2,1);
  --noite: #16141a;
  --noite-2: #201c25;
  --creme: #f6ece1;
  --creme-2: #bdb3b8;
}
html{scroll-behavior:auto}
img,video,svg,canvas{max-width:100%}
section[id]{scroll-margin-top:24px}

/* granulado único, fixo, para o site inteiro */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* o hero já tem o próprio granulado: some quando o do body existe */
.hero .grao{display:none}

/* entrada por rolagem: só com JS */
.js [data-rev]{opacity:0;transform:translateY(14px)}
.js [data-rev].rev-on{opacity:1;transform:none;transition:opacity .9s ease, transform 1s var(--curva)}
.js [data-rev="2"].rev-on{transition-delay:.12s}
.js [data-rev="3"].rev-on{transition-delay:.24s}
.js [data-rev="4"].rev-on{transition-delay:.36s}
.js [data-rev="5"].rev-on{transition-delay:.48s}
.js [data-rev="6"].rev-on{transition-delay:.6s}
.js .rev-ja [data-rev], .js [data-rev].rev-ja{transition-delay:0s !important}

/* botão de WhatsApp que acompanha a rolagem (celular) */
.wf-whats{
  position:fixed;z-index:50;right:16px;bottom:16px;
  display:none;align-items:center;gap:9px;min-height:52px;padding:0 20px 0 16px;border-radius:999px;
  background:var(--grafite);color:#fbf3ea;text-decoration:none;font-family:var(--f-texto);font-weight:400;font-size:16px;
  box-shadow:0 14px 30px -12px rgb(20 16 20 / .6);
  opacity:0;transform:translateY(20px);transition:opacity .4s ease, transform .5s var(--curva);
}
.wf-whats svg{width:22px;height:22px;fill:currentColor}
.wf-whats.on{opacity:1;transform:none}
.wf-whats:focus-visible{outline:2px solid var(--pessego);outline-offset:3px}
@media (max-width:900px){ .wf-whats{display:inline-flex} }

/* ---------- rodapé (noite, continuação do contato) ---------- */
.rp{
  position:relative;background:var(--noite);color:var(--creme);
  padding:72px var(--margem) 34px;font-family:var(--f-texto);font-weight:300;
  overflow:clip;
}
.rp::before{ /* as raias terminam aqui */
  content:"";position:absolute;left:0;right:0;top:0;height:10px;
  background:repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgb(255 250 243 / .14) calc(25% - 1px) 25%), linear-gradient(#94543f, #6e3b2c);
  opacity:.9;
}
.rp-in{max-width:var(--conteudo);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:40px 56px;align-items:start}
.rp .rp-nome{font-family:var(--f-titulo);font-weight:500;font-size:clamp(40px,4vw,60px);line-height:.88;margin:0}
.rp .rp-nome span{display:block;color:var(--pessego);font-size:.5em;letter-spacing:.06em;line-height:1.2;margin-top:6px}
.rp .rp-oab{margin:16px 0 0;font-family:var(--f-titulo);font-weight:500;font-size:22px;letter-spacing:.08em;color:var(--creme)}
.rp h3{margin:0 0 12px;font-family:var(--f-titulo);font-weight:500;font-size:19px;letter-spacing:.14em;text-transform:uppercase;color:var(--creme-2)}
.rp p,.rp li{margin:0;font-size:18px;line-height:1.55}
.rp ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rp a{color:var(--creme);text-decoration:none;border-bottom:1px solid rgb(242 207 176 / .35);padding-bottom:1px;transition:border-color .3s, color .3s}
.rp a:hover,.rp a:focus-visible{color:var(--pessego);border-color:var(--pessego)}
.rp a:focus-visible{outline:2px solid var(--pessego);outline-offset:3px}
.rp .rp-nota{grid-column:1/-1;font-size:15px;color:var(--creme-2);max-width:60em}
.rp-base{max-width:var(--conteudo);margin:44px auto 0;padding-top:20px;border-top:1px solid rgb(255 250 243 / .12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:15px;color:var(--creme-2)}
.rp-base p{font-size:15px}
.rp-selo a{font-weight:500;color:var(--creme)}
@media (max-width:900px){
  .rp{padding-bottom:96px}
  .rp-in{grid-template-columns:minmax(0,1fr);gap:32px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  .js [data-rev]{opacity:1;transform:none}
}