/* Instituto Harmonizare · Dra. Aliny Godoy — base do sistema visual */
@font-face{font-family:"Boska";src:url("../fontes/boska-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Boska";src:url("../fontes/boska-300-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Boska";src:url("../fontes/boska-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("../fontes/outfit-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  /* nogueira (parede da recepção) */
  --nogueira-clara:#794d28; --nogueira:#5a3a26; --nogueira-funda:#341d04; --nogueira-texto:#43281a; --nogueira-noite:#22130a;
  /* latão do logo */
  --latao:#c9a35c; --latao-claro:#ecd6a6; --latao-fundo:#a8803f; --latao-tinta:#6f4e14; /* latão escuro: texto pequeno sobre claro (AA) */
  /* quartzito do balcão */
  --quartzito:#bea77e; --quartzito-claro:#e4d9c3; --quartzito-luz:#efe7d6;
  /* gelo (paredes e bouclé) e porcelanato do consultório */
  --gelo:#eee8da; --gelo-luz:#f7f3ea; --porcelanato:#e6e0d4; --porcelanato-sombra:#cfc6b4;
  --tinta:#2a1808; --tinta-2:#5b4636; /* texto sobre claro */
  --f-titulo:"Boska","Cormorant Garamond",Georgia,serif;
  --f-apoio:"Outfit","Helvetica Neue",Arial,sans-serif;
  --margem:clamp(22px,6vw,96px);
  --largura:1240px;
  --respiro:clamp(84px,12vw,168px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:20px}
body{background:var(--nogueira-noite);color:var(--gelo);font-family:var(--f-apoio);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block}
:focus-visible{outline:2px solid var(--latao);outline-offset:4px}
::selection{background:var(--latao);color:var(--tinta)}

/* superfícies: cada seção é um material do instituto */
.wf-sup{position:relative;isolation:isolate;overflow:clip}
.wf-sup--gelo{background:var(--gelo-luz);color:var(--tinta)}
.wf-sup--porcelanato{background:var(--porcelanato);color:var(--tinta)}
.wf-sup--quartzito{background:var(--quartzito-claro);color:var(--tinta)}
.wf-sup--nogueira{background:var(--nogueira-texto);color:var(--gelo)}
.wf-sup--noite{background:var(--nogueira-noite);color:var(--gelo)}
.wf-dentro{width:min(100%,calc(var(--largura) + 2*var(--margem)));margin-inline:auto;padding-inline:var(--margem)}

/* plaqueta de porta: numera e nomeia o cômodo de cada seção */
.wf-plaqueta{display:inline-flex;align-items:center;gap:14px;font-size:11.5px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;line-height:1;color:var(--latao-tinta)}
.wf-plaqueta b{font-family:var(--f-titulo);font-weight:400;font-size:15px;letter-spacing:.08em;color:inherit}
.wf-plaqueta::before{content:"";width:34px;height:1px;background:currentColor;opacity:.8}
.wf-sup--nogueira .wf-plaqueta,.wf-sup--noite .wf-plaqueta{color:var(--latao-claro)}

/* títulos */
.wf-titulo{font-family:var(--f-titulo);font-weight:300;font-size:clamp(34px,4.6vw,76px);line-height:1.05;letter-spacing:.008em;text-wrap:balance}
.wf-titulo i,.wf-titulo em{font-style:italic}
.wf-sup--nogueira .wf-titulo,.wf-sup--noite .wf-titulo{color:#e3c68c}
.wf-fala{font-family:var(--f-titulo);font-weight:300;font-style:italic;font-size:clamp(22px,2.3vw,34px);line-height:1.3}
.wf-autora{display:block;margin-top:14px;font-family:var(--f-apoio);font-style:normal;font-size:11.5px;font-weight:400;letter-spacing:.26em;text-transform:uppercase}
.wf-texto{font-size:clamp(16px,1.2vw,18.5px);line-height:1.65;max-width:34em}
.wf-sup--gelo .wf-texto,.wf-sup--porcelanato .wf-texto,.wf-sup--quartzito .wf-texto{color:var(--tinta-2)}
.wf-texto strong{font-weight:500;color:inherit}
.wf-nq{white-space:nowrap}

/* botões */
.wf-botao{display:inline-flex;align-items:center;gap:11px;background:var(--gelo);color:var(--tinta);font-family:var(--f-apoio);font-weight:500;font-size:15px;letter-spacing:.03em;padding:16px 26px 16px 22px;border-radius:3px;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),0 1px 0 rgb(24 12 3 / .5),0 14px 30px -12px rgb(20 10 2 / .7);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .35s}
.wf-botao svg{width:19px;height:19px;flex:none}
.wf-botao:hover,.wf-botao:focus-visible{transform:translateY(-2px);background:#f7f2e6}
.wf-botao--nogueira{background:var(--nogueira);color:var(--gelo-luz);box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 14px 30px -14px rgb(52 29 4 / .7)}
.wf-botao--nogueira:hover,.wf-botao--nogueira:focus-visible{background:var(--nogueira-texto)}
.wf-elo{font-size:14px;font-weight:400;letter-spacing:.04em;padding:10px 0;background:linear-gradient(var(--latao),var(--latao)) 0 calc(100% - 7px)/100% 1px no-repeat;transition:background-size .4s var(--ease)}
.wf-elo:hover,.wf-elo:focus-visible{background-size:38% 1px}

/* o pendente de luz (o da recepção): fio de latão que acende quando a seção chega */
.wf-pendente{display:block;position:relative;width:min(100%,300px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgb(255 232 190 / 0),#ffe9c2 18%,#fff4dc 50%,#ffe9c2 82%,rgb(255 232 190 / 0));
  box-shadow:0 0 12px 1px rgb(255 214 150 / .55),0 0 34px 6px rgb(255 200 130 / .22)}

/* revelação na rolagem: só esconde quando há JS */
.wf-js [data-wf-revela]{opacity:0;transform:translate3d(0,18px,0);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*.12s)}
.wf-js [data-wf-revela].wf-visto{opacity:1;transform:none}

/* botão de WhatsApp que acompanha a rolagem no celular */
.wf-fixo{position:fixed;z-index:60;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));display:none;align-items:center;gap:9px;background:var(--gelo);color:var(--tinta);font-weight:500;font-size:14px;padding:13px 18px 13px 15px;border-radius:999px;box-shadow:0 10px 30px -8px rgb(20 10 2 / .6),0 0 0 1px rgb(42 24 8 / .12);transform:translateY(120%);transition:transform .5s var(--ease)}
.wf-fixo svg{width:18px;height:18px}
.wf-fixo.wf-aparece{transform:none}
@media (max-width:999px){.wf-fixo{display:inline-flex}}