:root{
  /* tirado da foto de atendimento: parede verde-acinzentada, jaleco, madeira, unha vermelha */
  --papel:#eff1ec;
  --salvia:#c9d3cb;
  --nevoa:#dbe3df;
  --linho:#e7ddd2;
  --luz:#fbf9f4;
  --tinta:#1d2a27;
  --tinta-2:#51605b;
  --madeira:#6f5d50;
  --unha:#c4243c;
  --f-titulo:"Vollkorn",Georgia,serif;
  --f-texto:"Lexend",system-ui,sans-serif;
  --margem:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-texto);font-weight:300;background:var(--papel);color:var(--tinta);font-size:18px;line-height:1.6;overflow-x:clip}
a{color:inherit}
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;isolation:isolate;overflow:hidden}

.malha{position:absolute;inset:-14%;z-index:-3;filter:blur(64px)}
.malha i{position:absolute;border-radius:50%;animation:respira 30s ease-in-out infinite alternate}
.malha i:nth-child(1){left:-6%;top:-8%;width:56%;height:70%;background:radial-gradient(closest-side,var(--nevoa),transparent)}
.malha i:nth-child(2){left:22%;bottom:-16%;width:52%;height:62%;background:radial-gradient(closest-side,var(--linho),transparent);animation-duration:36s;animation-delay:-9s}
.malha i:nth-child(3){right:-8%;top:-10%;width:56%;height:80%;background:radial-gradient(closest-side,var(--salvia),transparent);animation-duration:27s;animation-delay:-5s}
.malha i:nth-child(4){left:28%;top:10%;width:36%;height:44%;background:radial-gradient(closest-side,var(--luz),transparent);animation-duration:40s}
@keyframes respira{from{transform:translate3d(-2%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.09)}}
.grao{position:absolute;inset:0;z-index:-1;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%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px var(--margem)}
.marca{font-family:var(--f-titulo);font-size:1.3rem;font-weight:500;text-decoration:none}
.marca small{display:block;font-family:var(--f-texto);font-weight:400;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);margin-top:1px}
.topo nav{display:flex;gap:26px;align-items:center;font-size:.92rem;font-weight:400}
.topo nav a{text-decoration:none;color:var(--tinta-2)}
.topo .zap{color:var(--tinta);font-weight:500;border-bottom:1.5px solid var(--unha);padding-bottom:2px}

.palco{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;padding:0 var(--margem) clamp(16px,3vh,36px);position:relative}
.texto{max-width:min(40rem,46vw);position:relative;z-index:2}
.olho{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--madeira);font-weight:500;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.olho::before{content:"";width:28px;height:1px;background:var(--madeira)}
h1{font-family:var(--f-titulo);font-weight:400;font-size:clamp(2.5rem,5.2vw,4.9rem);line-height:1.02;letter-spacing:-.022em}
h1 .l{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
h1 .l>span{display:inline-block;transform:translateY(125%);animation:sobe 1s cubic-bezier(.2,.75,.2,1) forwards}
h1 .l:nth-child(1)>span{animation-delay:.25s}h1 .l:nth-child(2)>span{animation-delay:.38s}h1 .l:nth-child(3)>span{animation-delay:.51s}
h1 em{font-style:italic;color:var(--unha);position:relative;white-space:nowrap}
h1 em svg{position:absolute;left:-1%;bottom:-.02em;width:94%;height:.14em;overflow:visible}
h1 em path{fill:none;stroke:var(--unha);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:risca 1.1s ease 1.4s forwards}
@keyframes sobe{to{transform:none}}
@keyframes risca{to{stroke-dashoffset:0}}

.coisas{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;margin-top:24px;font-size:clamp(1rem,1.2vw,1.1rem);font-weight:400}
.coisas li{color:rgba(29,42,39,.42);padding-right:16px;margin-right:16px;border-right:1px solid rgba(29,42,39,.18);transition:color .6s;position:relative}
.coisas li:last-child{border:0;margin:0;padding:0}
.coisas li.on{color:var(--tinta)}
.coisas li::before{content:"";position:absolute;left:0;right:16px;bottom:-5px;height:2px;background:var(--unha);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.coisas li:last-child::before{right:0}
.coisas li.on::before{transform:scaleX(1)}

.apoio{margin-top:24px;font-size:clamp(1.02rem,1.25vw,1.14rem);color:var(--tinta-2);max-width:31rem;min-height:5.2em}
.apoio strong{color:var(--tinta);font-weight:500}
.apoio #onde-txt{transition:opacity .35s}
.apoio #onde-txt.troca{opacity:0}

/* dois ambientes: a chave muda a frase, o endereço e a luz */
.onde{display:inline-grid;grid-template-columns:1fr 1fr;position:relative;margin-top:22px;background:rgba(251,249,244,.66);border:1px solid rgba(29,42,39,.12);border-radius:999px;padding:4px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.onde button{position:relative;z-index:1;border:0;background:none;font:inherit;font-weight:400;font-size:.94rem;color:var(--tinta-2);padding:11px 20px;border-radius:999px;cursor:pointer;transition:color .4s;min-height:44px;white-space:nowrap}
.onde button[aria-pressed="true"]{color:#fbf9f4}
.onde i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--tinta);transition:transform .5s cubic-bezier(.3,.8,.2,1)}
.hero[data-onde="sala"] .onde i{transform:translateX(100%)}

.acoes{margin-top:18px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.botao{display:inline-flex;align-items:center;gap:12px;background:var(--unha);color:#fff8f6;text-decoration:none;font-weight:500;padding:17px 26px;border-radius:999px;font-size:1rem;transition:transform .3s,box-shadow .3s}
.botao:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(196,36,60,.28)}
.botao svg{width:20px;height:20px}
.assina{font-size:.86rem;font-weight:400;color:var(--tinta-2);line-height:1.5}
.assina b{color:var(--tinta);font-weight:500}
.assina .est{color:var(--unha);letter-spacing:.1em;margin:0 4px 0 2px}

/* luz: morna em casa, fria no consultório */
.temp{position:absolute;inset:0;z-index:-2;pointer-events:none;transition:opacity 1.4s ease}
.temp.casa{background:radial-gradient(60% 70% at 18% 62%,rgba(241,214,186,.85),transparent 70%),radial-gradient(40% 40% at 44% 12%,rgba(255,242,220,.8),transparent 70%);opacity:1}
.temp.sala{background:radial-gradient(60% 70% at 18% 62%,rgba(198,217,222,.9),transparent 70%),radial-gradient(40% 40% at 44% 12%,rgba(236,244,246,.9),transparent 70%);opacity:0}
.hero[data-onde="sala"] .temp.casa{opacity:0}
.hero[data-onde="sala"] .temp.sala{opacity:1}

/* a foto é a página: sangra até as bordas e dissolve na malha */
.foto{position:absolute;top:0;right:0;bottom:0;width:52vw;z-index:-2;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.6) 16%,#000 32%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.6) 16%,#000 32%);
  clip-path:inset(0 0 0 100%);animation:revela 1.6s cubic-bezier(.3,.7,.2,1) .05s forwards}
.foto img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block;transform:scale(1.07);transform-origin:38% 78%;animation:aproxima 9s cubic-bezier(.2,.6,.2,1) .1s forwards}
@keyframes revela{to{clip-path:inset(0)}}
@keyframes aproxima{to{transform:scale(1)}}

.resposta{position:absolute;right:var(--margem);bottom:clamp(64px,9vh,84px);width:min(310px,24vw);z-index:2;background:rgba(251,249,244,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);border-radius:22px;padding:20px 22px 16px;box-shadow:0 24px 50px rgba(29,42,39,.16);opacity:0;transform:translateY(24px);animation:entra 1s cubic-bezier(.2,.7,.2,1) 1.6s forwards}
.resposta h2{font-family:var(--f-titulo);font-weight:500;font-style:italic;font-size:1.3rem;line-height:1.15;margin-bottom:12px}
.resposta ol{list-style:none;padding:0;counter-reset:p;font-size:.87rem;font-weight:400;color:var(--tinta-2)}
.resposta li{counter-increment:p;display:flex;gap:12px;padding:7px 0;border-top:1px solid rgba(29,42,39,.1);line-height:1.35}
.resposta li::before{content:counter(p);font-family:var(--f-titulo);font-size:1.05rem;color:var(--unha);width:12px;flex:none}
.resposta .local{margin-top:4px;padding-top:10px;border-top:1px solid rgba(29,42,39,.1);font-size:.8rem;font-weight:400;color:var(--tinta);display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.resposta .local svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--unha)}

.base{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;padding:14px var(--margem) 18px;font-size:.82rem;font-weight:400;color:var(--tinta-2);position:relative;z-index:2}
.base b{color:var(--tinta);font-weight:500}
.base span:last-child{background:rgba(251,249,244,.74);padding:4px 12px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.e{opacity:0;transform:translateY(18px);animation:entra .9s cubic-bezier(.2,.7,.2,1) forwards}
.olho.e{animation-delay:.1s}.coisas.e{animation-delay:.95s}.apoio.e{animation-delay:1.08s}.onde.e{animation-delay:1.2s}.acoes.e{animation-delay:1.32s}
@keyframes entra{to{opacity:1;transform:none}}

@media (max-width:860px){
  body{font-size:17px}
  .topo{position:relative;z-index:3;padding-top:16px}
  .topo nav a:not(.zap){display:none}
  .zap .num{display:none}
  .hero{display:block}
  .hero::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(239,241,236,.94) 0,rgba(239,241,236,.7) 46%,rgba(239,241,236,0) 100%)}
  .foto{position:relative;width:auto;height:clamp(350px,52svh,460px);margin-top:-84px;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 74%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 74%,transparent 100%)}
  .foto img{object-position:50% 16%;transform-origin:50% 60%}
  .palco{display:block;padding-top:0;margin-top:-6px}
  .texto{max-width:none}
  .olho{margin-bottom:12px;font-size:.68rem}
  h1{font-size:clamp(2.3rem,10.2vw,3.3rem)}
  .coisas{display:grid;grid-template-columns:auto auto;justify-content:start;gap:12px 28px;font-size:.98rem;margin-top:22px}
  .coisas li{justify-self:start;border:0;margin:0;padding:0}
  .coisas li::before{right:0}
  .apoio{min-height:0}
  .onde{display:grid;width:100%}
  .onde button{padding:11px 8px}
  .acoes{margin-top:16px}
  .botao{width:100%;justify-content:center}
  .resposta{position:static;width:auto;margin:28px 0 6px;animation-delay:.2s}
  .base{font-size:.78rem}
  .base span:last-child{background:none;padding:0}
}
@media (min-width:861px){.zap .rot{display:none}}
@media (prefers-reduced-motion:reduce){
  .malha i{animation:none}
  .e,.resposta{animation:none;opacity:1;transform:none}
  h1 .l>span{animation:none;transform:none}
  h1 em path{animation:none;stroke-dashoffset:0}
  .foto{animation:none;clip-path:none}
  .foto img{animation:none;transform:none}
  .coisas li{color:var(--tinta)}
  .temp,.onde i{transition:none}
}

/* ===== chamada para o guia, dentro do hero ===== */
.desce{text-decoration:none;color:var(--tinta);font-weight:500;display:inline-flex;gap:8px;align-items:center;background:rgba(251,249,244,.74);padding:4px 14px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.desce i{font-style:normal;color:var(--unha);animation:g-pulo 2.2s ease-in-out infinite}
@keyframes g-pulo{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* ===== o guia: a sala do hero D, na pele do hero E ===== */
.g-guia{position:relative;isolation:isolate;background:#f4f2ec}
.g-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity 1.4s ease}
.g-luz.g-morna{background:radial-gradient(50% 30% at 22% 30%,rgba(241,214,186,.6),transparent 70%),radial-gradient(46% 30% at 80% 62%,rgba(219,227,223,.9),transparent 70%)}
.g-luz.g-fria{background:radial-gradient(50% 30% at 22% 70%,rgba(198,217,222,.85),transparent 70%),radial-gradient(46% 30% at 80% 62%,rgba(226,236,240,.9),transparent 70%);opacity:0}
.g-guia[data-passo="3"] .g-morna{opacity:0}
.g-guia[data-passo="3"] .g-fria{opacity:1}
.g-topo{padding:clamp(64px,11vh,120px) var(--margem) 0;max-width:62rem}
.g-olho{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--madeira);font-weight:500;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.g-olho::before{content:"";width:28px;height:1px;background:var(--madeira)}
.g-topo h2{font-family:var(--f-titulo);font-weight:400;font-size:clamp(2rem,4vw,3.6rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.g-topo h2 em{font-style:italic;color:var(--unha)}
.g-topo p{margin-top:16px;color:var(--tinta-2);max-width:36rem;font-size:clamp(1rem,1.25vw,1.12rem)}

.g-corpo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,4vw,64px);padding:0 var(--margem)}
.g-cena{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:10px}
.g-palco{position:relative;width:100%;height:min(70svh,680px)}
.g-palco canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)}
.g-pronta .g-palco canvas{opacity:1}
.g-ponto{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;background:none;padding:0;cursor:pointer;opacity:0;transition:opacity .6s;font:inherit}
.g-pronta .g-ponto{opacity:1}
.g-ponto b{display:grid;place-items:center;width:28px;height:28px;margin:8px;border-radius:50%;background:#fbf9f4;color:var(--tinta);font-family:var(--f-titulo);font-weight:500;font-size:.95rem;box-shadow:0 6px 16px rgba(29,42,39,.18);border:1px solid rgba(29,42,39,.1);transition:transform .5s cubic-bezier(.2,.7,.2,1),background .4s,color .4s}
.g-ponto.on b{background:var(--unha);color:#fff8f6;transform:scale(1.28);border-color:transparent}

.g-trilho{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;padding:0}
.g-trilho button{width:100%;text-align:left;border:0;background:none;font:inherit;cursor:pointer;padding:12px 0 6px;border-top:2px solid rgba(29,42,39,.14);color:var(--tinta-2);font-size:.86rem;font-weight:400;display:flex;gap:8px;align-items:baseline;transition:color .4s,border-color .4s;min-height:44px}
.g-trilho button b{font-family:var(--f-titulo);font-weight:500;font-size:1rem}
.g-trilho button.on{color:var(--tinta);border-color:var(--unha)}
.g-trilho button.on b{color:var(--unha)}
.g-trilho button.feito{border-color:rgba(29,42,39,.5)}

.g-passos{padding:14vh 0 20vh}
.g-passo{min-height:82svh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .6s;scroll-margin-top:9vh}
.g-passo.on{opacity:1}
.g-num{font-family:var(--f-titulo);font-style:italic;font-size:1.1rem;color:var(--unha);display:flex;align-items:center;gap:12px;margin-bottom:14px}
.g-num::after{content:"";height:1px;width:44px;background:var(--unha);opacity:.5}
.g-passo h3{font-family:var(--f-titulo);font-weight:400;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.08;letter-spacing:-.018em;text-wrap:balance}
.g-passo p{margin-top:16px;color:var(--tinta-2);max-width:27rem}
.g-passo p q{font-family:var(--f-titulo);font-style:italic;font-size:1.12em;color:var(--tinta);quotes:"“" "”"}
.g-ir{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--tinta);font-weight:500;text-decoration:none;border-bottom:1.5px solid var(--unha);padding-bottom:3px;align-self:flex-start}
.g-ir span{transition:transform .3s}
.g-ir:hover span{transform:translateX(4px)}
.g-fim{padding:0 var(--margem) clamp(60px,10vh,110px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;border-top:1px solid rgba(29,42,39,.12);padding-top:28px;margin-top:0}
.g-fim p{font-family:var(--f-titulo);font-style:italic;font-size:clamp(1.3rem,2vw,1.7rem)}
.g-sem3d .g-cena{display:none}
.g-sem3d .g-corpo{grid-template-columns:1fr}
.g-sem3d .g-passo{opacity:1;min-height:0;padding:28px 0}

@media (max-width:860px){
  .desce{background:none;padding:0;order:3}
  .g-topo{padding-top:56px}
  .g-corpo{display:block}
  .g-cena{height:auto;display:block;z-index:2;margin:18px calc(var(--margem) * -1) 0;padding:6px var(--margem) 10px;background:#f4f2ec}
  .g-cena::after{content:"";position:absolute;left:0;right:0;top:100%;height:26px;background:linear-gradient(to bottom,#f4f2ec,rgba(244,242,236,0));pointer-events:none}
  .g-palco{height:clamp(240px,37svh,330px);width:auto;margin:0 calc(var(--margem) * -1)}
  .g-trilho{gap:6px;margin-top:4px}
  .g-trilho button{font-size:.74rem;padding:8px 0 2px;flex-direction:column;gap:0;align-items:flex-start}
  .g-passos{padding:2vh 0 26vh}
  .g-passo{min-height:56svh;justify-content:flex-start;padding-top:14px;scroll-margin-top:calc(clamp(240px,37svh,330px) + 96px)}
  .g-passo h3{font-size:clamp(1.7rem,7.4vw,2.2rem)}
  .g-fim{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  .desce i{animation:none}
  .g-luz,.g-ponto b,.g-passo{transition:none}
}