/* Base do site · Instituto Dra. Daniela Nóbrega · tudo o que as seções compartilham (prefixo wf-) */
:root{
  --wf-gesso:#e3dbcd; --wf-gelo:#f1ebe0; --wf-gelo-2:#f7f2e8; --wf-gesso-sombra:#d6cab7; --wf-creme:#e6d9c8;
  --wf-cafe:#2b2018; --wf-cafe-2:#3b2b20; --wf-cafe-suave:#584739; --wf-nogueira:#463e30;
  --wf-ouro-claro:#e9d7a0; --wf-ouro:#c9a24a; --wf-ouro-fundo:#8a6a22; --wf-ouro-tinta:#6d4f17;
  --wf-noite:#211811; --wf-noite-2:#2f2319; --wf-perola:#f4eee3; --wf-perola-suave:#cfc3b2;
  --wf-f-titulo:"Aboreto","Cormorant SC","Times New Roman",serif;
  --wf-f-texto:"Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --wf-t-mini:.875rem; --wf-t-texto:clamp(1rem,.95rem + .25vw,1.14rem); --wf-t-lead:clamp(1.12rem,1rem + .55vw,1.4rem);
  --wf-t-titulo:clamp(1.55rem,1.05rem + 2.1vw,2.7rem); --wf-t-letreiro:clamp(3.4rem,1.6rem + 9vw,9.5rem);
  --wf-gutter:clamp(1.25rem,5.6vw,5.5rem); --wf-max:1264px; --wf-respiro:clamp(4.5rem,9vw,9rem);
  --wf-ease:cubic-bezier(.2,.7,.2,1);
  --wf-reflexo:0;                 /* 0..1, escrito pelo base.js: posição do reflexo no ouro (rolagem + ponteiro) */
  --wf-sombra-parede:drop-shadow(.35rem .5rem .55rem rgba(59,43,32,.22));
}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
img{max-width:100%;height:auto}
main{display:block}
.wf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* a parede: toda seção clara é a mesma parede de gesso; a cor do topo e do pé é sempre --wf-gesso */
.wf-sec{position:relative;isolation:isolate;padding:var(--wf-respiro) var(--wf-gutter);background:var(--wf-gesso);color:var(--wf-cafe);font-family:var(--wf-f-texto);font-size:var(--wf-t-texto);line-height:1.6}
.wf-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 46% at 22% 34% in oklab,var(--wf-gelo-2) 0%,transparent 72%),radial-gradient(52% 44% at 86% 62% in oklab,#d9cdb9 0%,transparent 74%)}
.wf-sec--b::before{background:radial-gradient(58% 44% at 78% 30% in oklab,var(--wf-gelo-2) 0%,transparent 72%),radial-gradient(50% 44% at 10% 66% in oklab,#d9cdb9 0%,transparent 74%)}
/* a parede de nogueira à noite: onde o dourado mais aparece */
.wf-sec--noite{background:var(--wf-noite);color:var(--wf-perola)}
.wf-sec--noite::before{background:radial-gradient(60% 50% at 26% 30% in oklab,#3d2d20 0%,transparent 72%),radial-gradient(50% 46% at 84% 70% in oklab,#34261a 0%,transparent 74%)}
.wf-dentro{max-width:var(--wf-max);margin:0 auto;position:relative}

/* etiqueta de parede: abre toda seção, como a legenda de uma obra */
.wf-etiqueta{display:inline-block;padding-top:.9rem;border-top:1px solid var(--wf-ouro-fundo);min-width:11rem;margin:0 0 clamp(1.6rem,3vw,2.6rem)}
.wf-etiqueta b{display:block;font-family:var(--wf-f-titulo);font-weight:400;font-size:var(--wf-t-mini);letter-spacing:.14em;text-transform:uppercase}
.wf-etiqueta span{display:block;margin-top:.3rem;font-size:var(--wf-t-mini);color:var(--wf-cafe-suave)}
.wf-sec--noite .wf-etiqueta{border-color:var(--wf-ouro)}
.wf-sec--noite .wf-etiqueta span{color:var(--wf-perola-suave)}

/* título em duas batidas, como o do hero: a segunda em dourado-tinta */
.wf-titulo{margin:0;font-family:var(--wf-f-titulo);font-weight:400;font-size:var(--wf-t-titulo);line-height:1.22;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
.wf-titulo em{font-style:normal;color:var(--wf-ouro-tinta);display:block}
.wf-sec--noite .wf-titulo em{color:var(--wf-ouro-claro)}
.wf-lead{font-size:var(--wf-t-lead);line-height:1.5;color:var(--wf-cafe-suave);max-width:34em;text-wrap:pretty}
.wf-sec--noite .wf-lead{color:var(--wf-perola-suave)}

/* ouro espelhado: letra ou forma com reflexo que anda com a rolagem e o ponteiro */
.wf-ouro{color:var(--wf-ouro-tinta);
  background:linear-gradient(105deg,#8a6a22 0%,#d6b35c 14%,#f4e8bd 24%,#b98f38 36%,#7c5c1c 48%,#e3c777 60%,#f6ecc8 68%,#c9a24a 80%,#8a6a22 100%);
  background-size:260% 100%;background-position:calc(var(--wf-reflexo)*100%) 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(.04em .06em .05em rgba(59,43,32,.28))}
.wf-ouro-chapa{background:linear-gradient(105deg,#8a6a22 0%,#d6b35c 14%,#f4e8bd 24%,#b98f38 36%,#7c5c1c 48%,#e3c777 60%,#f6ecc8 68%,#c9a24a 80%,#8a6a22 100%);background-size:260% 100%;background-position:calc(var(--wf-reflexo)*100%) 0}
.wf-fio{display:block;height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--wf-ouro-fundo) 18%,var(--wf-ouro) 50%,var(--wf-ouro-fundo) 82%,transparent)}

/* botões (os do hero continuam com as classes hd-) */
.wf-botao{display:inline-flex;align-items:center;gap:.8em;min-height:48px;padding:.95em 1.6em;border-radius:99px;background:var(--wf-cafe);color:var(--wf-perola);font-weight:500;letter-spacing:.03em;text-decoration:none;transition:transform .4s var(--wf-ease),background .3s}
.wf-botao:hover{transform:translateY(-2px);background:var(--wf-cafe-2)}
.wf-botao svg{width:1.2em;height:1.2em;color:var(--wf-ouro-claro)}
.wf-sec--noite .wf-botao{background:var(--wf-perola);color:var(--wf-cafe)}
.wf-sec--noite .wf-botao svg{color:var(--wf-ouro-fundo)}
.wf-link{display:inline-flex;align-items:center;min-height:48px;color:inherit;text-decoration:none;border-bottom:1px solid var(--wf-ouro-fundo);padding:.2em 0}
.wf-sec a:focus-visible,.wf-sec button:focus-visible,.wf-rodape a:focus-visible,.wf-zap:focus-visible{outline:2px solid var(--wf-ouro-fundo);outline-offset:4px}
.wf-sec--noite a:focus-visible,.wf-sec--noite button:focus-visible,.wf-rodape a:focus-visible{outline-color:var(--wf-ouro-claro)}

/* citação de paciente: sempre com nome abreviado e origem */
.wf-fala{margin:0}
.wf-fala p{margin:0;font-style:italic}
.wf-fala cite{display:block;margin-top:.45em;font-style:normal;font-size:var(--wf-t-mini);color:var(--wf-cafe-suave)}
.wf-sec--noite .wf-fala cite{color:var(--wf-perola-suave)}

/* entrada por rolagem: um gesto por seção. data-wf="sobe" | "surge" | "fio"; atraso por --wf-d */
[data-wf]{opacity:0;transition:opacity 1s var(--wf-ease) var(--wf-d,0s),transform 1.1s var(--wf-ease) var(--wf-d,0s),clip-path 1.1s var(--wf-ease) var(--wf-d,0s)}
[data-wf="sobe"]{transform:translate3d(0,1.4rem,0)}
[data-wf="fio"]{opacity:1;clip-path:inset(0 100% 0 0)}
[data-wf].wf-visto{opacity:1;transform:none}
[data-wf="fio"].wf-visto{clip-path:inset(0 0 0 0)}
.wf-semjs [data-wf]{opacity:1;transform:none;clip-path:none}

/* botão do WhatsApp que acompanha a rolagem no celular */
.wf-zap{position:fixed;z-index:40;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:none;align-items:center;gap:.6em;min-height:52px;padding:.8em 1.25em;border-radius:99px;background:var(--wf-cafe);color:var(--wf-perola);font-family:var(--wf-f-texto);font-weight:500;font-size:1rem;text-decoration:none;box-shadow:0 .6rem 1.6rem -.5rem rgba(33,24,17,.6),0 0 0 1px rgba(233,215,160,.35) inset;opacity:0;transform:translateY(120%);transition:opacity .4s,transform .5s var(--wf-ease)}
.wf-zap svg{width:1.3em;height:1.3em;color:var(--wf-ouro-claro)}
.wf-zap.wf-zap-on{opacity:1;transform:none}
@media (max-width:820px){.wf-zap{display:inline-flex}}

/* granulado único, fixo, por cima da página */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .12 0 0 0 0 .08 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}
.hd-grao{display:none}
/* emenda do hero com a primeira seção */
.hd-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:-1;pointer-events:none;background:linear-gradient(180deg in oklab,transparent,var(--wf-gesso))}

/* rodapé */
.wf-rodape{position:relative;background:var(--wf-noite);color:var(--wf-perola-suave);font-family:var(--wf-f-texto);font-size:var(--wf-t-mini);line-height:1.6;padding:clamp(3rem,6vw,5rem) var(--wf-gutter) clamp(5.5rem,6vw,3rem)}
.wf-rodape-dentro{max-width:var(--wf-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:clamp(1.6rem,4vw,4rem);align-items:start}
.wf-rodape-mono{width:clamp(7rem,12vw,10.5rem);height:auto;display:block;margin-bottom:1rem}
.wf-rodape h2{margin:0 0 .7rem;font-family:var(--wf-f-titulo);font-weight:400;font-size:var(--wf-t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--wf-ouro-claro)}
.wf-rodape p{margin:0 0 .35rem}
.wf-rodape a{color:var(--wf-perola);text-decoration:none;border-bottom:1px solid rgba(233,215,160,.4);display:inline-block;padding:.2rem 0}
.wf-rodape-nome{font-family:var(--wf-f-titulo);color:var(--wf-perola);letter-spacing:.1em;text-transform:uppercase;font-size:1rem}
.wf-rodape-fim{max-width:var(--wf-max);margin:clamp(2rem,4vw,3.4rem) auto 0;padding-top:1.2rem;border-top:1px solid rgba(233,215,160,.25);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem}
.wf-selo a{color:var(--wf-ouro-claro);border-bottom-color:var(--wf-ouro)}
@media (max-width:820px){.wf-rodape-dentro{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.wf-rodape-dentro>:first-child{grid-column:1/-1}}
@media (max-width:460px){.wf-rodape-dentro{grid-template-columns:minmax(0,1fr)}}