/* ===== base do site — Dra. Marília Pedrozo Pitthan ===== */
:root{
  /* tons tirados da foto do consultório */
  --noite:#130b06;
  --nogueira-funda:#1d140d;
  --nogueira-1:#2c2118;
  --nogueira-2:#3e332a;
  --nogueira-3:#5f5249;
  --piso:#614a3f;
  --creme:#e9dfc6;
  --areia:#eee9e5;
  --vidro:#b9c7bf;
  --texto:#f4ecd9;
  --texto-suave:#d9cfba;
  /* lado claro (a persiana) e o vidro do tampo */
  --papel:#f5eede;
  --papel-2:#ece2cb;
  --tinta:#241a12;
  --tinta-suave:#57483b;
  --vidro-claro:#dfe7e0;
  --vidro-fundo:#8fa79b;
  --verde-tinta:#33483e;
  --fio-claro:rgba(233,223,198,.22);
  --fio-tinta:rgba(36,26,18,.18);
  --serifa:"Spectral", "Iowan Old Style", Georgia, serif;
  --sem:"Sora", "Helvetica Neue", Arial, sans-serif;
  --margem:clamp(1.25rem, 5vw, 5.5rem);
  --ease:cubic-bezier(.2,.7,.1,1);
  --foto-l:calc(100svh * 1.206);
  --t-h2:clamp(2.15rem, 4.4vw, 4.2rem);
  --t-h3:clamp(1.35rem, 1.9vw, 1.75rem);
  --t-texto:clamp(1rem, 1.1vw, 1.1rem);
  --t-mini:.875rem;
  --raio:3px;
  --respiro:clamp(4.5rem, 12vh, 9.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--noite);color:var(--texto);font-family:var(--sem);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img{max-width:100%;height:auto}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--creme);color:var(--noite)}

/* granulado único, fixo, por cima da página (o do hero fica só nele) */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}

/* ---------- seções ---------- */
.wf-sec{position:relative;isolation:isolate;padding-block:var(--respiro);overflow:clip}
.wf-dentro{width:min(100% - 2 * var(--margem), 80rem);margin-inline:auto}
/* a borda do tampo de vidro: toda seção começa nela */
.wf-sec::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:9px;pointer-events:none;
  background:linear-gradient(180deg in oklab, #6f8a7d 0%, #cfe0d6 22%, #f1f7f2 40%, #a9c4b7 62%, #7d9a8c 100%);
  box-shadow:0 10px 30px -8px rgba(19,11,6,.45)}

/* noite de nogueira (o painel) */
.wf-noite{color:var(--texto);background:
  radial-gradient(ellipse 60% 50% at 82% 12% in oklab, color-mix(in oklab, var(--creme) 22%, var(--nogueira-2)) 0%, transparent 70%),
  radial-gradient(ellipse 55% 60% at 14% 70% in oklab, var(--nogueira-2) 0%, transparent 74%),
  radial-gradient(ellipse 50% 46% at 60% 100% in oklab, var(--piso) 0%, transparent 72%),
  linear-gradient(170deg in oklab, var(--nogueira-funda) 0%, var(--noite) 100%)}
/* claro de persiana */
.wf-clara{color:var(--tinta);background:
  radial-gradient(ellipse 55% 50% at 86% 8% in oklab, #fbf7ec 0%, transparent 70%),
  radial-gradient(ellipse 60% 60% at 8% 60% in oklab, var(--papel-2) 0%, transparent 72%),
  radial-gradient(ellipse 50% 44% at 70% 100% in oklab, color-mix(in oklab, var(--vidro) 55%, var(--papel)) 0%, transparent 72%),
  var(--papel)}
/* vidro do tampo */
.wf-vidro{color:var(--tinta);background:
  radial-gradient(ellipse 60% 55% at 18% 6% in oklab, #eef4ee 0%, transparent 70%),
  radial-gradient(ellipse 60% 60% at 92% 64% in oklab, var(--vidro) 0%, transparent 72%),
  radial-gradient(ellipse 50% 44% at 30% 100% in oklab, color-mix(in oklab, var(--papel-2) 70%, var(--vidro)) 0%, transparent 72%),
  var(--vidro-claro)}

/* a luz da persiana: faixas verticais que respiram. Usar: <div class="wf-luz" aria-hidden="true"></div> dentro da seção */
.wf-luz{position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 46px, rgba(233,223,198,.07) 60px 92px, transparent 106px 150px);
  -webkit-mask-image:linear-gradient(100deg, transparent 8%, #000 46%, transparent 92%);mask-image:linear-gradient(100deg, transparent 8%, #000 46%, transparent 92%);
  animation:wf-sol 34s ease-in-out infinite alternate}
.wf-clara .wf-luz,.wf-vidro .wf-luz{background:repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,252,240,.55) 60px 92px, transparent 106px 150px)}
@keyframes wf-sol{from{transform:translate3d(-2.5%,0,0)}to{transform:translate3d(2.5%,0,0)}}

/* ---------- tipografia ---------- */
.wf-rotulo{margin:0 0 1.4rem;display:flex;align-items:center;gap:.9rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--creme)}
.wf-rotulo::before{content:"";width:2.6rem;height:1px;background:currentColor;opacity:.7}
.wf-clara .wf-rotulo,.wf-vidro .wf-rotulo{color:var(--verde-tinta)}
.wf-h2{margin:0;font-family:var(--serifa);font-weight:300;font-size:var(--t-h2);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.wf-h2 em{font-style:italic;color:var(--creme)}
.wf-clara .wf-h2 em,.wf-vidro .wf-h2 em{color:var(--verde-tinta)}
.wf-h3{margin:0;font-family:var(--serifa);font-weight:400;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.008em}
.wf-texto{margin:0;font-size:var(--t-texto);line-height:1.68;font-weight:300;max-width:36em}
.wf-clara .wf-texto,.wf-vidro .wf-texto{font-weight:400;color:var(--tinta)}
.wf-texto strong{font-weight:500}
.wf-mini{font-size:var(--t-mini);line-height:1.5}
.wf-suave{color:var(--texto-suave)}
.wf-clara .wf-suave,.wf-vidro .wf-suave{color:var(--tinta-suave)}
.wf-num{font-family:var(--serifa);font-weight:300;font-variant-numeric:lining-nums;line-height:1}

/* ---------- ações ---------- */
.wf-btn{display:inline-flex;align-items:center;gap:.8rem;min-height:3.25rem;padding:.9rem 1.5rem .9rem 1.6rem;border-radius:var(--raio);
  background:var(--creme);color:var(--noite);font-weight:500;font-size:.98rem;text-decoration:none;word-spacing:.09em;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.5);transition:transform .35s var(--ease), background .35s}
.wf-btn svg{width:1.05rem;height:1.05rem;transition:transform .35s var(--ease)}
.wf-btn:hover,.wf-btn:focus-visible{background:#f6efdc;transform:translateY(-2px)}
.wf-btn:hover svg,.wf-btn:focus-visible svg{transform:translateX(4px)}
.wf-btn--tinta{background:var(--tinta);color:var(--papel);box-shadow:0 14px 30px -14px rgba(36,26,18,.6)}
.wf-btn--tinta:hover,.wf-btn--tinta:focus-visible{background:#35271c}
.wf-link{display:inline-flex;align-items:center;min-height:3rem;font-size:.95rem;text-decoration:none;border-bottom:1px solid currentColor;padding:.5rem 0 .3rem;opacity:.92;transition:opacity .3s}
.wf-link:hover{opacity:1}
.wf-link b{font-weight:500;white-space:nowrap;margin-left:.35em}

/* ---------- entrada pela rolagem: data-wf-entra (opcional data-wf-atraso="1..6") ---------- */
[data-wf-entra]{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s var(--ease), transform 1s var(--ease);transition-delay:calc(var(--wf-a,0) * 110ms)}
[data-wf-entra].wf-visto{opacity:1;transform:none}
.wf-sem-js [data-wf-entra]{opacity:1;transform:none}

/* ---------- botão que acompanha a rolagem no celular ---------- */
.wf-fixo{position:fixed;z-index:80;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));display:none;align-items:center;justify-content:space-between;gap:1rem;
  min-height:3.4rem;padding:.8rem 1.2rem;border-radius:var(--raio);background:var(--creme);color:var(--noite);text-decoration:none;font-weight:500;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(19,11,6,.25);transform:translate3d(0,140%,0);transition:transform .5s var(--ease)}
.wf-fixo.wf-aparece{transform:none}
.wf-fixo small{display:block;font-weight:400;font-size:.72rem;opacity:.75}
.wf-fixo svg{width:1.1rem;height:1.1rem;flex:none}
@media (max-width:860px){.wf-fixo{display:flex}}

/* ---------- fecho ---------- */
.wf-fecho{text-align:left;padding-bottom:clamp(3rem,8vh,5.5rem)}
.wf-fecho-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,6rem);align-items:start;margin-top:clamp(2rem,5vh,3.4rem)}
.wf-fecho .wf-h2{font-size:clamp(2.5rem,6.6vw,6.9rem);line-height:.98}
.wf-fecho-regua{display:flex;align-items:center;gap:1rem;margin-top:clamp(1.6rem,4vh,2.6rem);font-family:var(--serifa);font-size:1.15rem;color:var(--creme)}
.wf-fecho-regua span:last-child{font-style:italic}
.wf-fecho-regua i{flex:1;height:2.2rem;background:repeating-linear-gradient(90deg, rgba(233,223,198,.85) 0 calc(100%/45 - 3px), transparent calc(100%/45 - 3px) calc(100%/45));background-size:100% 100%;-webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.25), #000);mask-image:linear-gradient(90deg, rgba(0,0,0,.25), #000);border-radius:1px;transform-origin:left;transition:transform 1.8s var(--ease) .3s}
.wf-fecho-regua:not(.wf-visto) i{transform:scaleX(0)}
.wf-sem-js .wf-fecho-regua i{transform:none}
.wf-fecho-fala{margin:0;font-family:var(--serifa);font-style:italic;font-weight:300;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.4;max-width:26em;color:var(--creme)}
.wf-fecho-fala cite{display:block;margin-top:.6rem;font-family:var(--sem);font-style:normal;font-size:var(--t-mini);color:var(--texto-suave)}
.wf-fecho-acoes{display:flex;flex-wrap:wrap;gap:1rem 1.7rem;align-items:center;margin-top:2.2rem}
.wf-fecho-fala{padding-left:1.3rem;border-left:3px solid var(--creme)}
.wf-fecho-prova{margin:2rem 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .6rem;color:var(--texto-suave)}
.wf-fecho-prova b{font-size:1.7rem;color:var(--creme)}
.wf-fecho-prova span{display:inline-flex;align-items:baseline;gap:.6rem;white-space:nowrap}
@media (max-width:480px){.wf-fecho-prova i{display:none}.wf-fecho-prova{gap:.2rem 1.6rem}}
.wf-fecho-prova i{width:1px;height:1.2rem;background:var(--fio-claro);margin:0 .7rem;align-self:center}
/* o tampo de vidro: os dados pousados nele */
.wf-fecho-tampo{position:relative;color:var(--tinta);border-radius:var(--raio);padding:clamp(1.4rem,2.4vw,2.2rem);
  background:linear-gradient(165deg in oklab, #eef4ee 0%, var(--vidro-claro) 45%, var(--vidro) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset, 0 9px 0 -1px var(--vidro-fundo), 0 40px 70px -30px rgba(0,0,0,.8)}
.wf-fecho-tampo::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.34) 52px 80px, transparent 94px 130px);
  -webkit-mask-image:linear-gradient(115deg, transparent 20%, #000 60%, transparent 96%);mask-image:linear-gradient(115deg, transparent 20%, #000 60%, transparent 96%)}
.wf-fecho-tampo-t{position:relative;margin:0 0 .6rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--verde-tinta)}
.wf-fecho-dados{position:relative;margin:0;padding:0;list-style:none}
.wf-fecho-dados li{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid rgba(36,26,18,.16);font-size:.98rem;line-height:1.5}
.wf-fecho-dados span{font-family:var(--serifa);font-style:italic;font-size:1.15rem;color:var(--verde-tinta)}
.wf-fecho-dados a{text-underline-offset:.2em;display:inline-block;padding:.35rem 0}
@media (max-width:860px){.wf-fecho-grade{grid-template-columns:1fr}.wf-fecho-dados li{grid-template-columns:5.2rem 1fr}.wf-fecho-acoes .wf-btn{width:100%;justify-content:space-between}}

/* ---------- rodapé ---------- */
.wf-rodape{position:relative;background:var(--noite);color:var(--texto-suave);padding:2.4rem 0 calc(2.2rem + env(safe-area-inset-bottom));border-top:1px solid var(--fio-claro);font-size:var(--t-mini);line-height:1.6}
.wf-rodape-grade{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem 3rem}
.wf-rodape b{display:block;font-family:var(--serifa);font-weight:400;font-size:1.2rem;color:var(--texto)}
.wf-rodape nav{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.wf-rodape a{text-underline-offset:.2em;text-decoration-color:rgba(217,207,186,.4);display:inline-flex;align-items:center;min-height:2.75rem}
.wf-rodape a:hover{color:var(--texto)}
.wf-selo{margin:1.8rem 0 0;padding-top:1.2rem;border-top:1px solid var(--fio-claro);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem}
.wf-selo a{color:var(--creme);font-weight:500}
@media (max-width:860px){.wf-rodape{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}}