/* Clínica Implantar: teal da marca (matiz 192) + neutros perolados. DESIGN.md explica as escolhas. */
@font-face{font-family:"Familjen Grotesk";src:url(/fonts/FamiljenGrotesk.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/fonts/PublicSans.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{
  --acento:oklch(.5 .085 197);--acento-f:oklch(.42 .075 197);--acento-c:oklch(.93 .03 192);
  --tinta:oklch(.25 .035 205);--texto:oklch(.33 .025 205);--suave:oklch(.48 .02 205);
  --papel:oklch(.982 .005 160);--lavado:oklch(.955 .012 185);--linha:oklch(.89 .015 190);
  --perola:radial-gradient(120% 90% at 85% 10%,oklch(.95 .03 192) 0,transparent 60%),radial-gradient(90% 70% at 0% 100%,oklch(.96 .02 80) 0,transparent 55%);
  --f-t:"Familjen Grotesk",system-ui,sans-serif;--f-c:"Public Sans",system-ui,sans-serif;
  --r:22px;--sombra:0 1px 2px oklch(.25 .03 205/.06),0 12px 32px -12px oklch(.25 .03 205/.18);
  --e:cubic-bezier(.2,.7,.2,1);--d:800ms;
  --fs-1:clamp(2.3rem,1.4rem + 3.6vw,4.4rem);--fs-2:clamp(1.7rem,1.2rem + 1.9vw,2.7rem);--fs-3:1.2rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.65 var(--f-c);color:var(--texto);background:var(--papel)}
img{max-width:100%;height:auto;display:block}
a{color:var(--acento-f);text-underline-offset:.2em}
h1,h2,h3{font-family:var(--f-t);color:var(--tinta);line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;font-weight:700;text-wrap:balance}
h1{font-size:var(--fs-1)}h2{font-size:var(--fs-2)}h3{font-size:var(--fs-3);letter-spacing:-.01em}
p{margin:0 0 1em;text-wrap:pretty}
.caixa{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.pular{position:absolute;left:-999px;top:0;background:var(--tinta);color:#fff;padding:.6rem 1rem;z-index:99}.pular:focus{left:1rem}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:6px}
.escondido{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ico{width:1.25em;height:1.25em;flex:none}
.rot{font:600 1rem/1.2 var(--f-t);color:var(--acento);margin-bottom:.9rem}

/* botões: uma ação principal, a secundária é link de texto ao lado */
.acoes{display:flex;flex-wrap:nowrap;align-items:center;gap:1.4rem}
.bt{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;min-height:48px;padding:.8rem 1.4rem;border:0;border-radius:999px;background:var(--acento);color:#fff;font:600 1rem/1 var(--f-c);text-decoration:none;cursor:pointer;box-shadow:var(--sombra);transition:background-color .25s,transform .25s var(--e)}
.bt:hover{background:var(--acento-f);transform:translateY(-1px)}.bt:active{transform:scale(.98)}
.bt[disabled]{opacity:.6;cursor:wait}
.lk{font-weight:600;white-space:nowrap;color:var(--acento-f);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--e);padding:.3rem 0}
.lk:hover{background-size:100% 1.5px}
.lk::after{content:" →"}

/* topo: fundo sólido no próprio elemento fixo (Safari 26) */
.topo{position:fixed;top:0;left:0;right:0;z-index:20;background-color:transparent;border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s,box-shadow .3s}
.topo.rolou{background-color:var(--papel);border-color:var(--linha);box-shadow:0 6px 20px -14px oklch(.25 .03 205/.35)}
.topo-l{display:flex;align-items:center;gap:2rem;min-height:72px}
.marca{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--tinta);flex:none}
.marca-s{width:42px;height:42px}
.marca b{display:block;font:700 1.35rem/1 var(--f-t);letter-spacing:.02em;text-transform:uppercase} /* avoid-ai-design-ignore: SD4 (o logo da clínica é IMPLANTAR em caixa alta) */
.marca small{display:block;font:500 .78rem/1.3 var(--f-c);color:var(--suave);letter-spacing:.02em}
#menu{display:flex;gap:1.6rem;margin-left:auto}
#menu a{color:var(--texto);text-decoration:none;font-weight:500;font-size:.96rem;padding:.4rem 0}
#menu a:hover{color:var(--acento-f)}
.topo-wa{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;padding:.6rem 1.05rem;border-radius:999px;border:1.5px solid var(--acento);color:var(--acento-f);font-weight:600;text-decoration:none;transition:background-color .25s,color .25s,opacity .3s}
.topo-wa:hover{background:var(--acento);color:#fff}

/* hero: foto do casal com Ken Burns, passa por baixo do menu; véu perolado da esquerda; casal sempre à direita */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(620px,100svh,980px);display:grid;align-items:center;padding:calc(72px + 3rem) 0 4rem;
  background:radial-gradient(38% 55% at 80% 70%,oklch(.72 .08 192/.55),transparent 70%),radial-gradient(60% 75% at 78% 42%,#f1eeee 0%,#d5d2d2 45%,#a8a5a6 100%)}
/* fundo de estúdio em CSS + casal recortado ancorado à direita pela altura: fica inteiro e à direita em qualquer tela */
.hero-bg{position:absolute;inset:0;z-index:-2;animation:kb 26s ease-in-out infinite alternate;transform-origin:80% 60%}
.hero-casal{position:absolute;bottom:0;right:max(1.5rem,calc((100vw - 1180px)/2 - 5rem));height:min(calc(100% - 96px),900px);width:auto}
.hero-sombra{position:absolute;bottom:-14px;right:max(1.5rem,calc((100vw - 1180px)/2 - 5rem));width:min(26vw,420px);height:46px;border-radius:50%;background:radial-gradient(closest-side,rgb(40 30 30/.38),transparent);translate:-8% 0}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06) translate(-.8%,-.6%)}}
.hero-veu{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,oklch(.982 .005 160) 0%,oklch(.982 .005 160/.94) 26%,oklch(.97 .012 190/.6) 46%,transparent 66%),
  radial-gradient(60% 70% at 12% 30%,oklch(.9 .05 192/.55),transparent 70%),
  linear-gradient(0deg,oklch(.982 .005 160) 0%,transparent 22%)}
.hero-t{max-width:36rem}
.hero .linhas{z-index:-1;color:var(--acento);opacity:.35}
.selo{display:inline-block;font-weight:600;font-size:.88rem;color:var(--acento-f);background:oklch(1 0 0/.78);padding:.45rem .9rem;border-radius:999px;margin-bottom:1.4rem}
.hero h1 em{font-style:normal;color:var(--acento)}
.hero-l{font-size:1.15rem;max-width:34rem;margin-bottom:2rem;color:var(--tinta)}
.nota{display:inline-flex;align-items:center;gap:.5rem;margin-top:2.2rem;color:var(--texto);text-decoration:none;font-size:.95rem}
.nota b{font:700 1.4rem/1 var(--f-t);color:var(--tinta)}
.nota .plataforma{width:22px;height:22px}
.nota::before{content:"★★★★★";color:oklch(.72 .15 80);letter-spacing:.08em;font-size:1rem;order:2}
.nota span{order:3}
.js .hero-t>*{opacity:0;transform:translateY(22px)}
.js .hero.foi .hero-t>*{opacity:1;transform:none;transition:opacity .9s var(--e),transform .9s var(--e)}
.js .hero.foi .hero-t>:nth-child(2){transition-delay:.08s}.js .hero.foi .hero-t>:nth-child(3){transition-delay:.16s}
.js .hero.foi .hero-t>:nth-child(4){transition-delay:.24s}.js .hero.foi .hero-t>:nth-child(5){transition-delay:.32s}

/* linhas animadas (SVG) no fundo das faixas */
.linhas{position:absolute;left:0;right:0;bottom:0;width:100%;height:60%;pointer-events:none;color:oklch(.78 .08 192);opacity:.28}
.linhas path{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:.25 .08;animation:corre 18s linear infinite}
.linhas path:nth-child(2){animation-duration:26s;animation-direction:reverse;opacity:.7}.linhas path:nth-child(3){animation-duration:34s;opacity:.5}
@keyframes corre{to{stroke-dashoffset:-1.33}}

/* colagem (agora na seção do Dr.) com parallax leve */
.colagem{position:relative;aspect-ratio:1/1.02;max-width:540px;width:100%}
.colagem img{position:absolute;object-fit:cover;box-shadow:var(--sombra)}
.c1{left:18%;top:0;width:52%;height:78%;border-radius:999px 999px var(--r) var(--r)}
.c2{left:0;bottom:2%;width:42%;aspect-ratio:1;border-radius:var(--r)}
.c3{right:0;bottom:6%;width:42%;height:56%;object-position:50% 0;border-radius:var(--r) var(--r) 999px 999px;border:6px solid var(--lavado)}
.js .colagem img{opacity:0;transform:translateY(28px) scale(.97)}
.js .colagem.foi img{opacity:1;transform:none;transition:opacity var(--d) var(--e),transform 1s var(--e)}
.js .colagem.foi .c2{transition-delay:.12s}.js .colagem.foi .c3{transition-delay:.24s}
@supports (animation-timeline:view()){
  @media (min-width:900px) and (prefers-reduced-motion:no-preference){
    .colagem .c2{animation:sobe linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .colagem .c3{animation:desce linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .t-imp img,.t-len img{animation:flutua linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes sobe{from{translate:0 40px}to{translate:0 -40px}}@keyframes desce{from{translate:0 -30px}to{translate:0 30px}}
@keyframes flutua{from{translate:0 36px}to{translate:0 -36px}}

/* assinatura: comparador antes/depois */
.comp-s{position:relative;isolation:isolate;overflow:hidden;color:oklch(.9 .015 190);padding:clamp(3.5rem,8vw,6.5rem) 0;background:radial-gradient(55% 60% at 90% 10%,oklch(.45 .09 192/.55),transparent 70%),radial-gradient(50% 50% at 0% 100%,oklch(.4 .07 230/.45),transparent 70%),linear-gradient(160deg,oklch(.27 .04 205),oklch(.19 .03 215))}
.comp-s .caixa{position:relative}
.comp-s h2{color:#fff}.comp-s .rot{color:oklch(.78 .08 192)}
.comp-t{max-width:40rem;margin-bottom:2.2rem}
.comp{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1080/440;background:#000;touch-action:pan-y;user-select:none}
.comp img{width:100%;height:100%;object-fit:cover}
.comp-a{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.comp-h{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fff;translate:-1px 0;pointer-events:none}
.comp-h::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;translate:-50% -50%;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%230d2b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 4px 16px rgb(0 0 0/.35)}
.comp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.comp:has(input:focus-visible) .comp-h::after{outline:3px solid oklch(.78 .08 192);outline-offset:3px}
.comp-r{position:absolute;top:1rem;font:600 .9rem/1 var(--f-c);color:#fff;background:rgb(0 0 0/.45);padding:.45rem .7rem;border-radius:999px;pointer-events:none}
.r-a{left:1rem}.r-d{right:1rem}
.comp-n{font-size:.9rem;margin:1rem 0 0;color:oklch(.75 .02 190)}

/* tratamentos: um bloco maior, o outro invertido */
.trat{padding:clamp(4rem,9vw,7rem) 0;background:var(--perola),var(--papel)}
.trat-g{display:grid;gap:clamp(3rem,6vw,5rem)}
.trat article{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,4rem);align-items:center}
.t-imp{grid-template-columns:1.1fr .9fr!important}
.trat article img{border-radius:var(--r);box-shadow:var(--sombra);aspect-ratio:1;object-fit:cover}
.t-len{grid-template-columns:.9fr 1.1fr!important}
.trat ul{padding:0;margin:0 0 1.5rem;list-style:none}
.trat li{padding:.65rem 0 .65rem 1.9rem;border-bottom:1px solid var(--linha);position:relative}
.trat li::before{content:"";position:absolute;left:0;top:1.05rem;width:14px;height:14px;border-radius:50%;border:2px solid var(--acento)}
/* casos do portfolio (06/11/2026): paisagem + retrato lado a lado, empilham no celular */
.casos{padding:0 0 clamp(4rem,9vw,7rem);background:var(--papel)}
.casos-g{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1rem,3vw,2rem);align-items:start}
.casos figure{margin:0}
.casos img{width:100%;height:auto;border-radius:var(--r);box-shadow:var(--sombra)}
.casos figcaption{margin-top:.7rem;font-size:.95rem;color:var(--suave)}

/* quem atende + passos */
.dr{background:var(--lavado);padding:clamp(4rem,9vw,7rem) 0}
.dr{background:radial-gradient(60% 60% at 100% 0%,oklch(.92 .04 192),transparent 70%),var(--lavado)}
.dr-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.dr-f{border-radius:999px 999px var(--r) var(--r);aspect-ratio:3/4;object-fit:cover;object-position:50% 10%;box-shadow:var(--sombra)}
.dr-r{font-weight:600;color:var(--acento-f)}
.passos{grid-column:1/-1;list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:p;position:relative}
.passos::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:var(--linha)}
.passos li{position:relative}
.passos .n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--acento);color:#fff;font:700 1.2rem/1 var(--f-t);margin-bottom:1rem;position:relative}
.passos p{font-size:.98rem}

/* avaliações: origem e foto em cada uma */
.avs{padding:clamp(4rem,9vw,7rem) 0;background:linear-gradient(180deg,var(--papel),oklch(.965 .012 190) 60%,var(--papel))}
.avs-t{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:2.2rem}
.avs-t h2{margin:0}.nota-c{margin:0}
.avs-g{columns:3 300px;column-gap:1.4rem}
.av{break-inside:avoid;margin:0 0 1.4rem;background:#fff;border:1px solid var(--linha);border-radius:var(--r);padding:1.5rem}
.av blockquote{margin:0 0 1.2rem;font-size:1.02rem;color:var(--tinta)}
.av blockquote::before{content:"★★★★★";display:block;color:oklch(.78 .15 80);letter-spacing:.1em;font-size:.9rem;margin-bottom:.6rem}
.av figcaption{display:flex;align-items:center;gap:.75rem}
.av figcaption img{width:44px;height:44px;border-radius:50%}
.av b{display:block;font-size:.95rem;color:var(--tinta)}
.av small{display:flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--suave)}
.av .plataforma{width:14px;height:14px}

/* dúvidas */
.faq{padding:0 0 clamp(4rem,9vw,7rem)}
.faq-g{display:grid;grid-template-columns:.7fr 1.3fr;gap:2rem}
details{border-bottom:1px solid var(--linha)}
summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;font:600 1.1rem/1.3 var(--f-t);color:var(--tinta);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:.4rem;top:50%;width:12px;height:12px;border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);translate:0 -70%;rotate:45deg;transition:rotate .3s var(--e)}
details[open] summary::after{rotate:225deg}
details p{padding-bottom:1.2rem;margin:0}

/* contato */
.cont{position:relative;isolation:isolate;overflow:hidden;background:var(--tinta);color:oklch(.88 .015 190);padding:clamp(4rem,9vw,6.5rem) 0}
.cont-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);max-width:none;object-fit:cover;z-index:-2;filter:blur(2px) saturate(.8)}
.cont-veu{position:absolute;inset:-40px;z-index:-1;background:linear-gradient(100deg,oklch(.2 .035 205/.97) 0%,oklch(.22 .04 205/.9) 45%,oklch(.3 .07 192/.78) 100%)}
.cont-g{position:relative}
.cont h2{color:#fff}.cont a{color:oklch(.85 .07 192)}
.cont-g{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.cont-l{font-size:1.1rem}
.cont .bt{margin-bottom:2rem}
.cont dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.8rem 1.4rem}
.cont dt{font-weight:600;color:#fff}.cont dd{margin:0}
.form{background:#fff;color:var(--texto);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:1rem}
.form a{color:var(--acento-f)}
.campo{display:grid;gap:.35rem;margin:0;border:0;padding:0;min-width:0}
.campo label,.campo legend{font-weight:600;color:var(--tinta);font-size:.95rem;padding:0}
.campo small{color:var(--suave);font-size:.82rem;font-weight:400}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
input,textarea{font:inherit;color:var(--tinta);width:100%;padding:.8rem .95rem;border:1.5px solid var(--linha);border-radius:12px;background:var(--papel);transition:border-color .2s}
input:focus,textarea:focus{border-color:var(--acento);outline:none;box-shadow:0 0 0 3px var(--acento-c)}
[aria-invalid=true]{border-color:oklch(.55 .18 25)}
.int-f{display:flex;flex-wrap:wrap;gap:.5rem}
.int-f legend{width:100%;margin-bottom:.35rem}
.int-f label{display:inline-flex;align-items:center;gap:.45rem;font-weight:500;padding:.55rem .95rem;border:1.5px solid var(--linha);border-radius:999px;cursor:pointer;min-height:44px}
.int-f label:has(input:checked){border-color:var(--acento);background:var(--acento-c);color:var(--acento-f)}
.int-f input{width:auto;accent-color:var(--acento);margin:0}
.form .bt{justify-self:start}
.form-st{margin:0;font-weight:600;min-height:1.2em}.form-st.ok{color:oklch(.45 .1 160)}.form-st.erro{color:oklch(.5 .18 25)}
.form-lg{font-size:.82rem;color:var(--suave);margin:0}

/* rodapé e páginas internas */
.rod{background:oklch(.2 .03 205);color:oklch(.78 .015 190);padding:3.5rem 0 1.5rem;font-size:.92rem}
.rod a{color:oklch(.85 .05 192)}
.rod-g{display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr;gap:2rem;margin-bottom:2rem}
.marca-c{color:#fff}.marca-c small{color:oklch(.7 .02 190)}
.rod address{font-style:normal}.rod b{color:#fff}
.rod-l{display:grid;gap:.5rem;align-content:start}
.rod-f{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid oklch(.32 .03 205);padding-top:1.3rem;font-size:.85rem}
.rod-f p{margin:0}
.int{padding:clamp(3rem,7vw,5rem) 0}
.art{max-width:44rem}.art h2{font-size:1.4rem;margin-top:2rem}

/* revelar ao rolar: sem JS tudo aparece */
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.foi{opacity:1;transform:none;transition:opacity .7s var(--e),transform .7s var(--e)}

@media (max-width:980px){
  #menu{display:none}
  .topo-l{justify-content:space-between}
  .hero-g,.dr-g,.cont-g,.faq-g{grid-template-columns:1fr}
  .colagem{justify-self:center;max-width:460px}
  .trat article,.t-imp,.t-len{grid-template-columns:1fr!important}
  .t-len img{order:-1}
  .dr-f{max-width:340px}
  .rod-g{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .casos-g{grid-template-columns:1fr}
  .passos{grid-template-columns:1fr}.passos::before{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto}
  .passos li{padding-left:4.2rem}.passos .n{position:absolute;left:0;top:0}
  .duas{grid-template-columns:1fr}
  .comp{aspect-ratio:4/3}
  .rod-g{grid-template-columns:1fr}
  .js .topo-wa.longe{opacity:0;pointer-events:none}
}
@media (max-width:400px){
  .caixa{width:calc(100% - 1.75rem)}
  .acoes{gap:1rem}.bt{padding:.8rem 1.1rem;font-size:.95rem}
  .marca small{display:none}
  .topo-wa{padding:.5rem .8rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .js .reveal,.js .colagem img{opacity:1;transform:none}
}
.nw{white-space:nowrap}

/* implante 3D: seção alta, conteúdo preso enquanto as peças se montam */
.imp3d{position:relative;height:260vh;background:radial-gradient(70% 60% at 75% 45%,oklch(.4 .08 192/.6),transparent 70%),linear-gradient(180deg,oklch(.19 .03 215),oklch(.24 .04 205) 50%,oklch(.19 .03 215));color:oklch(.88 .015 190)}
.imp3d-pin{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:hidden}
.imp3d h2{color:#fff}.imp3d .rot{color:oklch(.78 .08 192)}.imp3d .lk{color:oklch(.85 .07 192)}
.imp3d-g{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.pecas{list-style:none;padding:0;margin:1.8rem 0 2rem;display:grid;gap:1.1rem}
.pecas li{display:grid;grid-template-columns:44px 1fr;gap:1rem;opacity:.38;transition:opacity .5s var(--e),transform .5s var(--e)}
.pecas li.ativa{opacity:1;transform:translateX(6px)}
.pecas .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid oklch(.78 .08 192);font:700 1.1rem/1 var(--f-t);color:#fff}
.pecas li.ativa .n{background:var(--acento);border-color:var(--acento)}
.pecas h3{color:#fff;margin-bottom:.25rem}.pecas p{margin:0;font-size:.98rem}
.imp3d-v{position:relative;height:min(78svh,640px);border-radius:28px;background:radial-gradient(closest-side,oklch(.5 .07 192/.35),transparent)}
.imp3d-v canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s var(--e);touch-action:pan-y;cursor:grab}
.imp3d-v.com-3d canvas{opacity:1}.imp3d-v.com-3d .imp-svg{opacity:0}
.imp-svg{position:absolute;inset:8% 25%;width:50%;height:84%;color:oklch(.85 .06 192);transition:opacity .6s}
.imp-svg path{stroke-dasharray:1;stroke-dashoffset:1}
.imp-svg.foi path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--e)}
.imp3d-d{position:absolute;bottom:.6rem;left:0;right:0;text-align:center;font-size:.85rem;color:oklch(.75 .03 192);margin:0;opacity:0}
.com-3d .imp3d-d{opacity:1}

/* faixa com vídeo de fundo dos casos */
.faixa{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(380px,60svh,560px);display:grid;align-items:end;padding:4rem 0}
.bg-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:var(--tinta) center/cover}
.faixa-veu{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,oklch(.17 .03 210/.95) 0%,oklch(.2 .04 205/.55) 55%,oklch(.3 .07 192/.35) 100%),linear-gradient(90deg,oklch(.2 .04 205/.7),transparent 70%)}
.faixa h2{color:#fff;max-width:22ch}
.bt-cl{background:#fff;color:var(--acento-f)}.bt-cl:hover{background:var(--acento-c)}

@media (max-width:980px){
  .imp3d{height:auto}.imp3d-pin{position:relative;height:auto;padding:4rem 0}
  .imp3d-g{grid-template-columns:1fr}.imp3d-v{height:min(70svh,480px);order:-1}
  .pecas li{opacity:1}
  .dr-g{grid-template-columns:1fr}.colagem{justify-self:center;max-width:440px}
}
@media (max-width:980px){
  .hero{align-items:end;min-height:max(100svh,680px);padding-bottom:2.5rem}
  .hero-casal{top:64px;bottom:auto;height:min(56svh,620px);right:4%}
  .hero-sombra{display:none}
  .hero-veu{background:linear-gradient(0deg,oklch(.982 .005 160) 0%,oklch(.982 .005 160/.97) 40%,oklch(.982 .005 160/.6) 54%,transparent 66%),radial-gradient(70% 40% at 0% 30%,oklch(.9 .05 192/.5),transparent 70%)}
  .hero-l{font-size:1.05rem}
}
}
@media (prefers-reduced-motion:reduce){
  .hero-bg{animation:none}
  .js .hero-t>*{opacity:1;transform:none}
  .imp-svg path{stroke-dashoffset:0}
}
.marca img{height:56px;width:auto}.marca-c img{height:88px}
@media (max-width:400px){.marca img{height:48px}}
/* Dr. Hebne: texto à esquerda, colagem à direita. Dra. Thaís: seção rosa clarinho, colagem à esquerda */
.dr .colagem{justify-self:end}
.thais{position:relative;padding:clamp(4rem,9vw,7rem) 0;background:radial-gradient(55% 60% at 0% 20%,oklch(.93 .045 10),transparent 70%),radial-gradient(50% 55% at 100% 100%,oklch(.94 .035 40/.8),transparent 70%),oklch(.972 .016 15)}
.thais .rot,.thais .dr-r,.thais .lk{color:oklch(.47 .11 10)}
.thais .colagem .c3{border-color:oklch(.972 .016 15)}
@media (max-width:980px){.dr .colagem{justify-self:center;order:-1}}
/* logo grande na primeira tela, volta ao normal quando o topo fica sólido */
.marca img{transition:height .35s var(--e)}
.topo:not(.rolou) .marca img{height:112px}
.topo:not(.rolou) .topo-l{min-height:136px}
.hero{padding-top:calc(136px + 2rem)}
@media (max-width:980px){.topo:not(.rolou) .marca img{height:88px}.topo:not(.rolou) .topo-l{min-height:108px}.hero-casal{top:104px}}
/* topo fixo: o hero começa atrás dele; demais páginas e âncoras descontam a altura */
main>section:first-child:not(.hero){padding-top:calc(136px + 2rem)}
[id]{scroll-margin-top:84px}