/* Base do site — Dr. Lucas Ribeiro. Sistema visual em ../../02-conceito/sistema.md */
:root{
  /* cerâmica: a escala curta de onde sai o gradiente */
  --porcelana:#f6f1e7; --luz:#fbf8f1; --marfim:#efe6d6; --marfim-2:#e6d8c0; --marfim-3:#dccdb4; --mel:#d8b780;
  --opala:#e3e9ec; --opala-funda:#cdd8df; --esmalte:#d5e0e8;
  --escala-1:#f4eee2; --escala-2:#efe6d4; --escala-3:#e9dcc4; --escala-4:#e2d0b2; --escala-5:#dcc5a0; --escala-6:#d5b98e;
  /* tinta e metal */
  --tinta:#252f3c; --tinta-2:#4b5665; --tinta-3:#1c2530; --aco:#9aa3ab;
  --fio:rgb(37 47 60 / .16); --fio-escuro:rgb(246 241 231 / .18); --apoio-escuro:rgb(246 241 231 / .78);
  /* tipografia */
  --f-titulo:"Marcellus","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-texto:"Red Hat Text","Segoe UI",system-ui,sans-serif;
  --t-titulo:clamp(2.55rem, min(6.2vw, 12.2svh), 7.25rem);
  --t-h2:clamp(2rem, 1.3rem + 2.6vw, 3.6rem);
  --t-h3:1.35rem;
  --t-texto:clamp(1rem, .93rem + .28vw, 1.28rem);
  --t-pequeno:.8125rem;
  /* espaço */
  --margem:clamp(1.25rem, 5.6vw, 5.5rem);
  --secao:clamp(4.5rem, 10svh, 8.5rem);
  --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2.25rem; --e5:3.5rem; --e6:5.5rem;
  --raio:2px;
  --sombra-botao:0 1px 0 rgb(255 255 255 / .12) inset, 0 14px 28px -16px rgb(37 47 60 / .55);
  --sombra-pousada:0 10px 22px -12px rgb(37 47 60 / .5);
  --curva:cubic-bezier(.2,.72,.16,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--porcelana); color:var(--tinta); font-family:var(--f-texto); font-size:var(--t-texto); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
a{color:inherit}
img,svg{display:block; max-width:100%}
img{height:auto}
h1,h2,h3{font-family:var(--f-titulo); font-weight:400; margin:0; letter-spacing:-.012em; text-wrap:balance}
h2{font-size:var(--t-h2); line-height:1.08}
h3{font-size:var(--t-h3); line-height:1.25}
p{margin:0}
:focus-visible{outline:2px solid var(--tinta); outline-offset:3px}
.so-leitor{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* grão único, fixo, por cima de tudo */
body::after{content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .14  0 0 0 0 .17  0 0 0 0 .22  0 0 0 1.1 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ───────── peças compartilhadas ───────── */
.wf-secao{position:relative; isolation:isolate; padding:var(--secao) var(--margem)}
.wf-secao > *{position:relative; z-index:1}
.wf-escura{background:var(--tinta); color:var(--porcelana)}
.wf-escura .wf-sobrelinha{color:var(--marfim-3)}
.wf-escura .wf-apoio{color:var(--apoio-escuro)}
.wf-miolo{max-width:76rem; margin-inline:auto}

.wf-sobrelinha{display:flex; align-items:center; gap:.8rem; margin:0 0 var(--e3); font-size:.95rem; font-weight:500; letter-spacing:.02em; color:var(--tinta-2)}
.wf-sobrelinha::before{content:""; flex:none; width:2.2rem; height:1px; background:currentColor; opacity:.7}
.wf-rotulo{font-size:var(--t-pequeno); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2)}
.wf-escura .wf-rotulo{color:var(--marfim-3)}
.wf-apoio{color:var(--tinta-2); max-width:34em; text-wrap:pretty}
.wf-apoio b,.wf-apoio strong{font-weight:500; color:var(--tinta)}
.wf-escura .wf-apoio b,.wf-escura .wf-apoio strong{color:var(--porcelana)}

/* malha de fundo de uma seção clara: manchas em OKLCH respirando (as cores vêm da seção) */
.wf-malha{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.wf-malha i{position:absolute; border-radius:50%; will-change:transform}
.wf-malha i:nth-child(1){animation:wf-m1 34s ease-in-out infinite alternate}
.wf-malha i:nth-child(2){animation:wf-m2 27s ease-in-out infinite alternate}
.wf-malha i:nth-child(3){animation:wf-m3 38s ease-in-out infinite alternate}
.wf-malha i:nth-child(4){animation:wf-m4 23s ease-in-out infinite alternate}
@keyframes wf-m1{to{transform:translate3d(5%,4%,0) scale(1.08)}}
@keyframes wf-m2{to{transform:translate3d(-6%,5%,0) scale(1.06)}}
@keyframes wf-m3{to{transform:translate3d(-5%,-6%,0) scale(1.1)}}
@keyframes wf-m4{to{transform:translate3d(6%,-4%,0) scale(1.07)}}

/* botões e WhatsApp */
.wf-botao{display:inline-flex; align-items:center; gap:.7rem; padding:1.02rem 1.5rem 1.02rem 1.3rem; background:var(--tinta); color:var(--porcelana); text-decoration:none; font-weight:500; font-size:.96em; letter-spacing:.01em; border-radius:var(--raio);
  box-shadow:var(--sombra-botao); transition:transform .5s var(--curva), box-shadow .5s var(--curva), background .3s}
.wf-botao svg{width:1.2rem; height:1.2rem; flex:none}
.wf-botao:hover{transform:translateY(-2px); background:var(--tinta-3); box-shadow:0 1px 0 rgb(255 255 255 / .12) inset, 0 20px 34px -16px rgb(37 47 60 / .6)}
.wf-escura .wf-botao{background:var(--porcelana); color:var(--tinta); box-shadow:0 14px 28px -16px rgb(0 0 0 / .6)}
.wf-escura .wf-botao:hover{background:var(--luz)}
.wf-link{display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; font-weight:500; padding:.4rem 0; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; transition:background-size .5s var(--curva)}
.wf-link:hover{background-size:0 1px}

/* revelação na rolagem: um gesto por seção */
.wf-rev{opacity:0; transform:translateY(14px); transition:opacity 1s var(--curva), transform 1s var(--curva); transition-delay:calc(var(--i,0) * 120ms)}
.wf-rev.visto{opacity:1; transform:none}

/* botão flutuante do WhatsApp (celular) */
.wf-flutua{position:fixed; right:1rem; bottom:1rem; z-index:80; display:none; align-items:center; gap:.55rem; padding:.85rem 1.1rem .85rem .95rem; background:var(--tinta); color:var(--porcelana); text-decoration:none; font-weight:500; font-size:.92rem; border-radius:999px; box-shadow:0 14px 28px -12px rgb(37 47 60 / .7); opacity:0; transform:translateY(12px); transition:opacity .5s var(--curva), transform .5s var(--curva)}
.wf-flutua svg{width:1.15rem; height:1.15rem}
.wf-flutua.ativo{opacity:1; transform:none}
@media (max-width:860px){.wf-flutua{display:inline-flex}}

/* celular */
@media (max-width:860px){
  :root{--secao:clamp(3.5rem, 9svh, 5.5rem)}
}