/* ==========================================================================
   Base — sistema visual derivado do hero D "Roteiro" (ver 02-conceito/sistema.md)
   As seções usam só estas variáveis. Não redeclarar cores nem fontes.
   ========================================================================== */
:root{
  --wf-noite:#172049;
  --wf-noite-2:#1f2a5a;
  --wf-noite-3:#0f1532;
  --wf-noite-4:#263570;
  --wf-taupe:#5a4a3f;
  --wf-luz:#a9825f;
  --wf-marfim:#efe9e3;
  --wf-marfim-80:color-mix(in oklab,#efe9e3 80%,transparent);
  --wf-marfim-60:color-mix(in oklab,#efe9e3 62%,transparent);
  --wf-marfim-35:color-mix(in oklab,#efe9e3 35%,transparent);
  --wf-marfim-14:color-mix(in oklab,#efe9e3 14%,transparent);
  --wf-marfim-06:color-mix(in oklab,#efe9e3 6%,transparent);
  --wf-tinta:#0f1532;
  --wf-tinta-60:color-mix(in oklab,#0f1532 62%,transparent);
  --wf-tinta-35:color-mix(in oklab,#0f1532 35%,transparent);
  --wf-tinta-14:color-mix(in oklab,#0f1532 14%,transparent);

  --wf-fonte-titulo:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --wf-fonte-mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --wf-t1:clamp(1.9rem,1rem + 2.1vw,3rem);
  --wf-t2:clamp(1.25rem,1rem + .7vw,1.6rem);
  --wf-corpo:1rem;
  --wf-apoio:clamp(.8rem,.72rem + .25vw,.92rem);
  --wf-mono:.75rem;
  --wf-mono-xs:.68rem;
  --wf-cit:clamp(1rem,.9rem + .35vw,1.2rem);

  --wf-margem:clamp(1.25rem,1rem + 2.6vw,4.5rem);
  --wf-coluna:clamp(520px,44vw,640px);
  --wf-max:1280px;
  --wf-respiro:clamp(5rem,10vh,9rem);
  --wf-raio:999px;
  --wf-raio-caixa:12px;
  --wf-sombra-botao:0 10px 30px -14px rgba(0,0,0,.8);

  --wf-lento:.9s;
  --wf-curva:cubic-bezier(.2,.7,.2,1);
  --wf-nav:4.5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--wf-noite);
  color:var(--wf-marfim);
  font-family:var(--wf-fonte-titulo);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
a{color:inherit}
img,svg{display:block}
img{max-width:100%;height:auto}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--wf-marfim);outline-offset:3px;border-radius:4px}
.wf-claro :focus-visible{outline-color:var(--wf-tinta)}

/* granulado único, fixo, por cima da página inteira */
body::after{
  content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
}

/* --------------------------------------------------------------------------
   Seção como elevação: linha de teto (o fio do roteiro) + rótulo numerado
   -------------------------------------------------------------------------- */
.wf-secao{
  position:relative;
  padding:var(--wf-respiro) var(--wf-margem);
  isolation:isolate;
  overflow:clip;
}
.wf-secao::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--wf-marfim-14);z-index:2;
}
.wf-claro{background:var(--wf-marfim);color:var(--wf-tinta)}
.wf-claro::before{background:var(--wf-tinta-14)}
.wf-miolo{max-width:var(--wf-max);margin:0 auto;position:relative;z-index:1}
.wf-rotulo{
  font-family:var(--wf-fonte-mono);font-size:var(--wf-mono-xs);letter-spacing:.08em;
  color:var(--wf-marfim-60);text-transform:uppercase;
  display:flex;align-items:center;gap:.6em;margin-bottom:1.6rem;
}
.wf-rotulo::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.9}
.wf-claro .wf-rotulo{color:var(--wf-tinta-60)}

/* malha de fundo de seção: três manchas no máximo, respirando */
.wf-malha{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.wf-malha i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.wf-malha .wf-m-azul{background:radial-gradient(closest-side in oklch,var(--wf-noite-4) 0%,transparent 100%);opacity:.85}
.wf-malha .wf-m-fundo{background:radial-gradient(closest-side in oklch,var(--wf-noite-3) 0%,transparent 100%)}
.wf-malha .wf-m-taupe{background:radial-gradient(closest-side in oklch,color-mix(in oklch,var(--wf-taupe) 78%,var(--wf-noite)) 0%,color-mix(in oklch,var(--wf-taupe) 40%,var(--wf-noite)) 40%,transparent 100%);opacity:.9}
.wf-malha .wf-m-luz{background:radial-gradient(closest-side in oklch,color-mix(in oklch,var(--wf-luz) 26%,var(--wf-noite)) 0%,transparent 100%);opacity:.7}
.wf-respira-a{animation:wf-respira-a 34s ease-in-out infinite alternate}
.wf-respira-b{animation:wf-respira-b 40s ease-in-out infinite alternate}
.wf-respira-c{animation:wf-respira-c 26s ease-in-out infinite alternate}
@keyframes wf-respira-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vw,3vh,0) scale(1.12)}}
@keyframes wf-respira-b{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5vw,-2vh,0) scale(1.08)}}
@keyframes wf-respira-c{from{transform:translate3d(0,0,0) scale(1);opacity:.82}to{transform:translate3d(-3vw,-4vh,0) scale(1.1);opacity:1}}

/* --------------------------------------------------------------------------
   Tipografia de seção
   -------------------------------------------------------------------------- */
.wf-t1{font-family:var(--wf-fonte-titulo);font-weight:600;font-size:var(--wf-t1);line-height:1.06;letter-spacing:-.018em;text-wrap:balance}
.wf-t1 .wf-leve{font-weight:500;color:var(--wf-marfim-80)}
.wf-claro .wf-t1 .wf-leve{color:var(--wf-tinta-60)}
.wf-t2{font-family:var(--wf-fonte-titulo);font-weight:600;font-size:var(--wf-t2);line-height:1.2;letter-spacing:-.01em}
.wf-texto{font-size:var(--wf-corpo);line-height:1.6;color:var(--wf-marfim-80);max-width:52ch}
.wf-claro .wf-texto{color:var(--wf-tinta-60)}
.wf-texto b,.wf-texto strong{font-weight:600;color:var(--wf-marfim)}
.wf-claro .wf-texto b,.wf-claro .wf-texto strong{color:var(--wf-tinta)}
.wf-mono{font-family:var(--wf-fonte-mono);font-size:var(--wf-mono);letter-spacing:.02em;line-height:1.6}
.wf-mono-xs{font-family:var(--wf-fonte-mono);font-size:var(--wf-mono-xs);letter-spacing:.03em}
.wf-apoio{font-family:var(--wf-fonte-mono);font-size:var(--wf-apoio);line-height:1.6;color:var(--wf-marfim-80)}
.wf-claro .wf-apoio{color:var(--wf-tinta-60)}
.wf-num{font-family:var(--wf-fonte-mono);font-size:var(--wf-mono-xs);color:var(--wf-marfim-60);letter-spacing:.04em}
.wf-claro .wf-num{color:var(--wf-tinta-60)}

/* citação de paciente */
.wf-cit{padding-left:1rem;border-left:1px solid var(--wf-marfim-35)}
.wf-claro .wf-cit{border-color:var(--wf-tinta-35)}
.wf-cit__frase{font-family:var(--wf-fonte-titulo);font-style:italic;font-size:var(--wf-cit);line-height:1.35;max-width:34ch}
.wf-cit__quem{margin-top:.35rem;font-family:var(--wf-fonte-mono);font-size:var(--wf-mono-xs);letter-spacing:.03em;color:var(--wf-marfim-60)}
.wf-claro .wf-cit__quem{color:var(--wf-tinta-60)}

/* botões e links */
.wf-botao{
  display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.8rem 1.35rem;
  border-radius:var(--wf-raio);background:var(--wf-marfim);color:var(--wf-tinta);
  font-family:var(--wf-fonte-titulo);font-weight:600;font-size:.95rem;letter-spacing:-.005em;
  text-decoration:none;box-shadow:var(--wf-sombra-botao);
  transition:transform .35s var(--wf-curva),background-color .3s;
}
.wf-botao:hover{transform:translateY(-1px);background:#fff}
.wf-botao svg{width:18px;height:18px;flex:none}
.wf-claro .wf-botao{background:var(--wf-tinta);color:var(--wf-marfim)}
.wf-claro .wf-botao:hover{background:var(--wf-noite-2)}
.wf-link{
  font-family:var(--wf-fonte-mono);font-size:var(--wf-mono);color:var(--wf-marfim-80);
  text-decoration:none;border-bottom:1px solid var(--wf-marfim-35);padding-bottom:.15em;
  transition:color .3s,border-color .3s;
}
.wf-link:hover{color:var(--wf-marfim);border-color:var(--wf-marfim)}
.wf-claro .wf-link{color:var(--wf-tinta-60);border-color:var(--wf-tinta-35)}
.wf-claro .wf-link:hover{color:var(--wf-tinta);border-color:var(--wf-tinta)}
.wf-pilula{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--wf-marfim);
  border:1px solid var(--wf-marfim-35);border-radius:var(--wf-raio);padding:.5rem .9rem;
  font-family:var(--wf-fonte-mono);font-size:var(--wf-mono);letter-spacing:.02em;
  transition:border-color .3s,background-color .3s;
}
.wf-pilula:hover{border-color:var(--wf-marfim);background:var(--wf-marfim-14)}

/* nó do roteiro (ponto + rótulo), para as seções reaproveitarem */
.wf-no{display:inline-flex;align-items:center;gap:.6em;font-family:var(--wf-fonte-mono);font-size:var(--wf-mono);letter-spacing:.02em}
.wf-no__ponto{width:6px;height:6px;border-radius:50%;background:var(--wf-marfim);flex:none;position:relative}
.wf-no__ponto::after{content:"";position:absolute;inset:-9px;border-radius:50%;background:radial-gradient(closest-side,var(--wf-marfim-35),transparent);opacity:0;transition:opacity .7s var(--wf-curva)}
.wf-no.wf-aceso .wf-no__ponto::after{opacity:1}
.wf-no__n{color:var(--wf-marfim-60);font-size:var(--wf-mono-xs)}
.wf-claro .wf-no__ponto{background:var(--wf-tinta)}
.wf-claro .wf-no__ponto::after{background:radial-gradient(closest-side,var(--wf-tinta-35),transparent)}
.wf-claro .wf-no__n{color:var(--wf-tinta-60)}

/* entrada na rolagem: um gesto. .wf-entra fica invisível até ganhar .wf-visto (base.js) */
.wf-entra{opacity:0;transform:translateY(.6rem);transition:opacity .85s var(--wf-curva),transform .85s var(--wf-curva)}
.wf-entra.wf-visto{opacity:1;transform:none}
.wf-entra[data-atraso="1"]{transition-delay:.1s}.wf-entra[data-atraso="2"]{transition-delay:.2s}.wf-entra[data-atraso="3"]{transition-delay:.3s}.wf-entra[data-atraso="4"]{transition-delay:.4s}.wf-entra[data-atraso="5"]{transition-delay:.5s}.wf-entra[data-atraso="6"]{transition-delay:.6s}

/* botão flutuante do WhatsApp (aparece depois do hero; base.js) */
.wf-flutua{
  position:fixed;right:1rem;bottom:1rem;z-index:40;
  display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.75rem 1.1rem;
  border-radius:var(--wf-raio);background:var(--wf-marfim);color:var(--wf-tinta);
  font-family:var(--wf-fonte-titulo);font-weight:600;font-size:.9rem;text-decoration:none;
  box-shadow:var(--wf-sombra-botao);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .5s var(--wf-curva),transform .5s var(--wf-curva);
}
.wf-flutua svg{width:18px;height:18px}
.wf-flutua.wf-ligado{opacity:1;transform:none;pointer-events:auto}
@media (min-width:900px){.wf-flutua{right:1.5rem;bottom:1.5rem}}

/* utilitários */
.wf-so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wf-sep{color:var(--wf-marfim-35);margin:0 .4em}
.wf-claro .wf-sep{color:var(--wf-tinta-35)}
@media (max-width:899px){
  :root{--wf-nav:3.75rem;--wf-coluna:100%;--wf-mono:.72rem}
}