/* =========================================================
   BARBEARIA 313 — preto & branco
   Camada de movimento/3D: tudo que depende do JS fica sob
   `.fx` (classe que o fx.js coloca no <html>). Sem JS, ou com
   "reduzir movimento" ligado, o site continua completo e estático.
   ========================================================= */

:root{
  --black:#000;
  --ink:#070707;
  --ink2:#0d0d0d;
  --line:rgba(255,255,255,.14);
  --line2:rgba(255,255,255,.07);
  --white:#fff;
  --mute:rgba(255,255,255,.58);
  --mute2:rgba(255,255,255,.38);
  --pad:clamp(20px,5vw,64px);
  --maxw:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.7;
  font-weight:300;
  overflow-x:hidden;
  overflow-x:clip;           /* "clip" não cria contêiner de rolagem: o sticky continua valendo */
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:#fff;color:#000}

svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}

/* --- scroll suave (Lenis) --- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(64px,8vw,120px);position:relative}

/* ---------- tipografia ---------- */
.h2{
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(2.4rem,6.6vw,5.4rem);
  line-height:.94;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:.12em 0 .5em;
}
/* o acento do Ó (NÓS) e a vírgula encostavam nas letras da linha de cima */
.sobre__text .h2{line-height:1.19}
.h2 em{font-family:'UnifrakturCook',serif;font-style:normal;letter-spacing:0;
  text-transform:none;font-size:1.34em;line-height:.8;vertical-align:-.04em}
.eyebrow{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--mute2);margin:0;font-weight:500;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--line);display:block}
.lead{font-size:clamp(1.05rem,1.6vw,1.32rem);color:rgba(255,255,255,.86);font-weight:300}
p{margin:0 0 1.1em;color:var(--mute)}

.sechead{max-width:760px;margin-bottom:clamp(38px,5vw,66px)}
.sechead__sub{color:var(--mute2);margin:0}

/* texto dividido em palavras/letras pelo fx.js (máscara de revelação) */
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block}
.h2 .wd,.hero__title .wd{clip-path:inset(-.2em -.12em -.3em -.12em)}
.h2 em .wd{clip-path:none}
.gw{display:inline}

/* ---------- textura ---------- */
.grain{
  position:fixed;inset:-8%;z-index:9998;pointer-events:none;opacity:.048;
  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='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}
  100%{transform:translate(3%,3%)}
}
.scanlines{
  position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.28;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
}

/* barra de progresso da página */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:950;pointer-events:none}
.progress span{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}

/* ---------- cursor ---------- */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor span{
  display:block;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:1px solid #fff;transition:transform .28s var(--ease),background .28s;
}
.cursor.is-on{opacity:1}
.cursor.is-big span{transform:scale(2.1);background:#fff}
@media (hover:none),(max-width:900px){.cursor{display:none}}

/* =========================================================
   LOGO 3D — a logo original empilhada em camadas de profundidade
   (cada <span> é uma fatia; girando o conjunto vira um relevo real)
   ========================================================= */
.logo3d{
  position:relative;width:var(--s,142px);height:var(--s,142px);
  perspective:900px;flex:none;display:block;
}
.logo3d__tilt,.logo3d__stage{position:absolute;inset:0;transform-style:preserve-3d}
.logo3d__layer{
  position:absolute;inset:0;
  background:url(../img/logo-3d.png) center/contain no-repeat;
}
.logo3d__flat{width:100%;height:100%;border-radius:50%;display:block}
.logo3d.is-3d .logo3d__flat{display:none}

/* ---------- preloader ---------- */
.preloader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center}
.preloader.is-done{visibility:hidden;pointer-events:none}
.preloader__panel{position:absolute;left:0;right:0;background:#000;will-change:transform}
.preloader__panel--a{top:0;height:50.6%}
.preloader__panel--b{bottom:0;height:50.6%}
.preloader__inner{position:relative;display:grid;justify-items:center;gap:30px}
.logo3d--pre{--s:150px}
.preloader__bar{width:min(230px,52vw);height:1px;background:rgba(255,255,255,.16);overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:#fff}
.preloader__count{font-family:'Anton',sans-serif;font-size:.9rem;letter-spacing:.28em;color:var(--mute2)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px var(--pad);
  transition:transform .5s var(--ease),background .45s var(--ease),padding .45s var(--ease),border-color .45s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(0,0,0,.82);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding-block:12px;border-bottom-color:var(--line2);
}
.nav.is-hidden{transform:translateY(-100%)}

.nav__brand{display:flex;align-items:center;gap:12px}
.nav__brand img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.nav__brandtext{
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:.82rem;line-height:1;
}
.nav__brandtext strong{display:block;font-size:1.15rem;letter-spacing:.18em}

.nav__links{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav__links a{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);position:relative;padding-block:6px;transition:color .3s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:#fff;
  transition:width .4s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}
.nav__cta--mobile{display:none}

.nav__cta{
  border:1px solid var(--white);padding:11px 24px;border-radius:100px;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  transition:background .35s var(--ease),color .35s var(--ease);
  white-space:nowrap;
}
.nav__cta:hover{background:#fff;color:#000}

.nav__burger{display:none;width:34px;height:34px;position:relative}
.nav__burger span{
  position:absolute;left:6px;right:6px;height:1.5px;background:#fff;
  transition:transform .4s var(--ease),opacity .3s;
}
.nav__burger span:nth-child(1){top:13px}
.nav__burger span:nth-child(2){top:20px}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 34px;border-radius:100px;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s;
}
.btn svg{width:17px;height:17px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn--solid{background:#fff;color:#000}
.btn--solid:hover{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff}
.btn--ghost{box-shadow:inset 0 0 0 1px var(--line);color:#fff}
.btn--ghost:hover{background:#fff;color:#000}
.btn--lg{padding:20px 46px;font-size:.84rem}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;
  text-align:center;overflow:hidden;padding:120px var(--pad) 90px;
}
.hero__media{position:absolute;inset:0;z-index:0;will-change:transform}
.hero__layer{position:absolute;inset:-26px;will-change:transform}
.hero__kb{
  position:absolute;inset:0;background-size:cover;background-position:center;
  animation:kb 16s ease-in-out infinite alternate;
}
/* os vídeos já vão em preto e branco — nada de filtro pesado na GPU do celular */
.hero__kb video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.hero__kb video.is-on{opacity:1}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.12)}}
@keyframes kbSuave{from{transform:scale(1.01)}to{transform:scale(1.06)}}
@media (max-width:860px){ .hero__kb{animation-name:kbSuave} }

.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(115% 75% at 50% 44%,rgba(0,0,0,.44) 0%,rgba(0,0,0,.76) 62%,#000 100%),
    linear-gradient(to bottom,rgba(0,0,0,.82),rgba(0,0,0,.4) 36%,rgba(0,0,0,.94));
}
.hero__smoke{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
}
.hero__content{position:relative;z-index:3;max-width:900px;display:grid;justify-items:center;gap:0}
.hero__logo{--s:clamp(104px,13vw,150px);margin-bottom:28px}
.hero__eyebrow{
  font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--mute);margin:0 0 20px;
}
.hero__title{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(2.7rem,9.2vw,7.2rem);line-height:.9;letter-spacing:-.025em;
  text-transform:uppercase;margin:0 0 26px;
}
.hero__sub{color:rgba(255,255,255,.72);margin:0 0 38px;font-size:clamp(.95rem,1.5vw,1.12rem)}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.hero__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  display:grid;justify-items:center;gap:10px;
}
.hero__scrollline{width:1px;height:52px;background:linear-gradient(to bottom,transparent,#fff);
  animation:scrolldown 2.2s var(--ease) infinite}
@keyframes scrolldown{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}
.hero__scrolltxt{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--mute2)}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden;border-block:1px solid var(--line2);
  padding-block:18px;background:var(--ink);
}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__track.is-running{animation:slide var(--dur,34s) linear infinite}
.marquee__track span{
  font-family:'Anton',sans-serif;font-size:clamp(1.4rem,3.2vw,2.3rem);
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;padding-right:.4em;
  color:rgba(255,255,255,.9);
}
.marquee__track b{color:rgba(255,255,255,.22);font-weight:400;padding-inline:.18em}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- sobre ---------- */
.sobre{background:var(--ink)}
.sobre__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.sobre__media{position:relative;padding-bottom:64px}
.frame{position:relative;overflow:hidden;border-radius:2px}
.frame img{width:100%;height:auto;object-fit:cover;filter:grayscale(1) contrast(1.1);
  transition:filter .7s}
.frame:hover img{filter:grayscale(1) contrast(1.2)}
.frame--small{
  position:absolute;right:-6%;bottom:0;width:52%;
  border:8px solid var(--ink);
}
.stats{display:flex;gap:clamp(22px,4vw,52px);margin-top:44px;flex-wrap:wrap}
.stat{display:grid;gap:2px}
.stat b{font-family:'Anton',sans-serif;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1}
.stat span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute2);line-height:1.5}

/* ---------- vídeo que expande no scroll ---------- */
.reelwrap{position:relative;background:#000}
.reel{position:relative;height:72vh;overflow:hidden;display:grid;place-items:center}
.reel__frame{position:absolute;inset:0;overflow:hidden;background:#000}
.reel__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;
  filter:grayscale(1);
}
.reel__veil{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(100% 80% at 50% 50%,rgba(0,0,0,.18),rgba(0,0,0,.62));
}
.reel__words{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.reel__words span{
  grid-area:1/1;opacity:0;padding-inline:var(--pad);text-align:center;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:-.02em;line-height:.92;
  font-size:clamp(3.2rem,12.5vw,10.5rem);color:#fff;
  text-shadow:0 4px 60px rgba(0,0,0,.6);
}

/* ---------- ritual: toalha quente ---------- */
.toalha{background:#000;overflow:hidden}
.toalha::before{                      /* brilho quente bem sutil atrás do vídeo */
  content:"";position:absolute;left:-10%;top:10%;width:70%;height:80%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent);
}
.toalha__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,7vw,110px);align-items:center;position:relative}
.toalha__media{display:grid;justify-items:center}
.toalha__frame{
  position:relative;width:min(100%,400px);aspect-ratio:9/16;max-height:80vh;max-height:80svh;
  border-radius:22px;overflow:hidden;background:#0a0a0a;
  box-shadow:0 40px 90px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.12);
}
.toalha__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.toalha__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 35%),linear-gradient(to bottom,rgba(0,0,0,.35),transparent 25%);
}
.toalha__badge{
  position:absolute;left:16px;top:16px;z-index:3;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px;background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
/* vapor: manchas desfocadas subindo e sumindo */
.toalha__vapor{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen}
.toalha__vapor i{
  position:absolute;bottom:-12%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.34),rgba(255,255,255,0));
  filter:blur(14px);opacity:0;animation:vapor 7s ease-in infinite;
}
.toalha__vapor i:nth-child(1){left:6%; animation-delay:0s}
.toalha__vapor i:nth-child(2){left:34%;animation-delay:1.4s;width:56%}
.toalha__vapor i:nth-child(3){left:58%;animation-delay:2.8s}
.toalha__vapor i:nth-child(4){left:20%;animation-delay:4.2s;width:38%}
.toalha__vapor i:nth-child(5){left:48%;animation-delay:5.6s;width:50%}
@keyframes vapor{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  20%{opacity:.75}
  100%{transform:translate3d(-12%,-150%,0) scale(1.7);opacity:0}
}

.ritual{list-style:none;margin:34px 0 40px;padding:0;display:grid;gap:0;counter-reset:r}
.ritual li{
  position:relative;display:grid;grid-template-columns:62px 1fr;gap:16px;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--line2);
}
.ritual li:last-child{border-bottom:1px solid var(--line2)}
.ritual li::after{                    /* linha que "acende" no fx.js */
  content:"";position:absolute;left:0;top:-1px;height:1px;width:var(--fill,0%);background:#fff;
}
.ritual__n{font-family:'Anton',sans-serif;font-size:2rem;line-height:1;color:rgba(255,255,255,.22)}
.ritual li b{display:block;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.35rem;letter-spacing:.01em;margin-bottom:4px}
.ritual li span:not(.ritual__n){color:var(--mute);font-size:.94rem;line-height:1.6}
.toalha__cta{display:flex}

/* ---------- serviços ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px}
.chip{
  padding:9px 20px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--line);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  transition:background .3s,color .3s,box-shadow .3s;
}
.chip:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.chip.is-on{background:#fff;color:#000;box-shadow:none}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.card{
  position:relative;overflow:hidden;border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--line);
  padding:30px 28px 28px;background:var(--ink2);
  display:flex;flex-direction:column;gap:12px;cursor:pointer;
  transition:box-shadow .5s var(--ease),background .5s;
}
.card.is-out{display:none}
.card::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;
  background:linear-gradient(135deg,rgba(255,255,255,.09),transparent 62%);
  transition:opacity .5s var(--ease);
}
/* brilho que segue o cursor */
.card::after,.plano::after,.frame::after,.contato__media::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 46%);
  transition:opacity .45s var(--ease);
}
.card:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);background:#101010}
.card:hover::before,.card:hover::after,.plano:hover::after,
.frame:hover::after,.contato__media:hover::after{opacity:1}
.card>*{position:relative;z-index:1}
.card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.card__name{
  font-family:'Anton',sans-serif;font-size:1.32rem;line-height:1.1;
  text-transform:uppercase;letter-spacing:.01em;margin:0;
}
.card__num{
  font-family:'Anton',sans-serif;font-size:.78rem;color:rgba(255,255,255,.2);
  letter-spacing:.1em;padding-top:5px;
}
.card__desc{font-size:.86rem;color:var(--mute2);margin:0;flex:1;line-height:1.65}
.card__meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:14px;
  border-top:1px solid var(--line2);margin-top:4px;
}
.card__price{font-family:'Anton',sans-serif;font-size:1.7rem;line-height:1}
.card__time{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute2)}
.card__go{
  margin-left:auto;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;color:var(--mute);transition:color .3s;
}
.card__go svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.card:hover .card__go{color:#fff}
.card:hover .card__go svg{transform:translateX(4px)}
.servicos__foot{margin-top:44px;display:flex;justify-content:center}

/* ---------- planos / mensalidade ---------- */
.planos{background:var(--ink)}
.sechead--center{margin-inline:auto;text-align:center}
.sechead--center .eyebrow{justify-content:center}
.sechead--center .sechead__sub{color:var(--mute)}
.sechead--center strong{color:#fff;font-weight:600}

.planos__grid{
  display:grid;grid-template-columns:repeat(4,1fr);     /* 8 planos = 4 × 2 certinho */
  gap:12px;margin-bottom:clamp(38px,5vw,60px);
}
.plano{
  position:relative;display:grid;justify-items:center;gap:2px;overflow:hidden;
  padding:30px 18px 24px;border-radius:3px;background:var(--ink2);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .45s var(--ease),background .45s var(--ease);
}
.plano>*{position:relative;z-index:1}
.plano:hover{background:#101010;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.plano__vezes{font-family:'Anton',sans-serif;font-size:2.7rem;line-height:1}
.plano__vezes i{font-style:normal;font-size:.5em;color:var(--mute2);margin-left:1px}
.plano__nome{
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute2);margin-bottom:16px;text-align:center;
}
.plano__preco{font-family:'Anton',sans-serif;font-size:1.9rem;line-height:1}
.plano__corte{font-size:.72rem;color:var(--mute);margin-top:4px}
.plano__eco{
  margin-top:14px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.9);
}
.plano__eco--vazio{background:transparent;color:var(--mute2);box-shadow:inset 0 0 0 1px var(--line2)}
.plano__go{
  margin-top:16px;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);transition:color .3s;
}
.plano:hover .plano__go{color:#fff}

/* o de maior economia ganha destaque, invertido, com um brilho que varre o cartão */
.plano.is-destaque{background:#fff;color:#000;box-shadow:none;overflow:visible}
.plano.is-destaque .plano__vezes i,
.plano.is-destaque .plano__nome,
.plano.is-destaque .plano__corte,
.plano.is-destaque .plano__go{color:rgba(0,0,0,.62)}
.plano.is-destaque .plano__eco{background:rgba(0,0,0,.1);color:#000}
.plano.is-destaque:hover{background:#f0f0f0}
.plano.is-destaque:hover .plano__go{color:#000}
.plano.is-destaque::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(0,0,0,.09) 50%,transparent 62%);
  background-size:260% 100%;background-position:130% 0;
  animation:sheen 4.2s ease-in-out infinite;
}
@keyframes sheen{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}
.plano__selo{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  background:#fff;color:#000;padding:5px 12px;border-radius:100px;
  box-shadow:0 0 0 4px var(--ink);white-space:nowrap;
}
.plano--avulso{background:transparent;box-shadow:inset 0 0 0 1px var(--line2)}

.perks{
  list-style:none;margin:0 0 clamp(34px,4.5vw,52px);padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;
  border-block:1px solid var(--line2);padding-block:30px;
}
.perks li{display:grid;justify-items:center;text-align:center;gap:6px}
.perks svg{width:26px;height:26px;color:rgba(255,255,255,.8);margin-bottom:6px}
.perks b{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.perks span{font-size:.82rem;color:var(--mute2);line-height:1.5}

.planos__foot{display:grid;justify-items:center;gap:14px}
.planos__nota{font-size:.76rem;color:var(--mute2);margin:0;text-align:center}

/* ---------- equipe ---------- */
.equipe{background:var(--ink)}
.team{
  display:grid;grid-template-columns:repeat(4,1fr);                 /* 4 barbeiros = 4 colunas */
  gap:clamp(18px,2.2vw,28px);max-width:1140px;margin-inline:auto;
}
.member{display:grid;gap:6px;align-content:start}
.member__photo{
  position:relative;overflow:hidden;border-radius:3px;aspect-ratio:4/5;
  box-shadow:inset 0 0 0 1px var(--line);margin-bottom:18px;background:#0a0a0a;
}
.member__photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  filter:grayscale(1) contrast(1.15) brightness(.95);
  transition:filter .9s var(--ease);
}
.member:hover .member__photo img,
.member.is-lit .member__photo img{filter:grayscale(0) contrast(1.05) brightness(1)}
.member__photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent 46%);
}
.member__tag{
  position:absolute;left:16px;bottom:16px;z-index:2;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.member h3{
  font-family:'Anton',sans-serif;font-weight:400;font-size:1.42rem;
  text-transform:uppercase;letter-spacing:.01em;margin:0 0 6px;
}
.member ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.member li{
  font-size:.86rem;color:var(--mute2);line-height:1.6;
  padding-left:18px;position:relative;
}
.member li::before{
  content:"";position:absolute;left:0;top:.66em;width:8px;height:1px;background:rgba(255,255,255,.35);
}
.teamshot{
  margin:clamp(44px,6vw,80px) auto 0;position:relative;overflow:hidden;border-radius:3px;
  max-width:1000px;
}
.teamshot img{width:100%;height:auto;filter:grayscale(1) contrast(1.1) brightness(.8)}
.teamshot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,4vw,44px);
  background:linear-gradient(to top,rgba(0,0,0,.92),transparent);
  font-size:clamp(.9rem,1.6vw,1.15rem);color:rgba(255,255,255,.9);max-width:640px;
}

/* ---------- galeria ---------- */
/* base (sem JS): grade comum */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:6px;padding-inline:6px;
}
.tile{position:relative;overflow:hidden;cursor:pointer;background:#0a0a0a;aspect-ratio:4/5}
.tile img{
  width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;
  filter:grayscale(1) contrast(1.12) brightness(.86);
  transition:transform 1.3s var(--ease),filter .6s var(--ease);
}
.tile:hover img{transform:scale(1.09);filter:grayscale(0) contrast(1.02) brightness(1)}
.tile::after{
  content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:box-shadow .4s;pointer-events:none;
}
.tile:hover::after{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.galeria__foot{margin-top:38px;display:flex;justify-content:center}
/* com JS o botão fica na própria cena, logo abaixo do anel (sem faixa preta vazia no fim) */
.fx .ring .galeria__foot{
  position:absolute;left:0;right:0;bottom:7svh;margin-inline:auto;z-index:5;
}
@media (max-width:860px){ .fx .ring .galeria__foot{bottom:104px} }

/* com JS: anel 3D que gira conforme você rola a página */
.fx .ringwrap{height:340vh}
.fx .ring{
  position:sticky;top:0;height:100vh;height:100svh;
  display:grid;place-items:center;overflow:hidden;
}
.fx .ring__scene{
  width:100%;height:100%;perspective:1250px;perspective-origin:50% 46%;
  display:grid;place-items:center;
}
.fx .grid{
  display:block;position:relative;width:0;height:0;padding:0;gap:0;
  transform-style:preserve-3d;
}
.fx .tile{
  position:absolute;left:0;top:0;aspect-ratio:auto;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:3px;box-shadow:0 22px 50px rgba(0,0,0,.55);
}
.fx .tile img{transition:filter .7s var(--ease),transform 1.1s var(--ease)}
.fx .tile.is-front img{filter:grayscale(0) contrast(1.04) brightness(1)}
.fx .tile:hover img{transform:scale(1.05)}

/* ---------- cta faixa ---------- */
.cta{position:relative;overflow:hidden;padding-block:clamp(90px,12vw,170px);text-align:center}
.cta__bg{position:absolute;inset:-14% 0;background-size:cover;background-position:center 30%;
  filter:grayscale(1) contrast(1.15) brightness(.4)}
.cta__veil{position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 50%,rgba(0,0,0,.4),rgba(0,0,0,.9))}
.cta__inner{position:relative;z-index:2;display:grid;justify-items:center}
.cta__inner p{max-width:440px}

/* ---------- contato ---------- */
.contato{background:var(--ink)}
.contato__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,80px);align-items:center}
.info{list-style:none;margin:34px 0 40px;padding:0;display:grid;gap:0}
.info li{
  display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:baseline;
  padding-block:18px;border-top:1px solid var(--line2);
}
.info li:last-child{border-bottom:1px solid var(--line2)}
.info__k{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute2)}
.info__v{color:rgba(255,255,255,.9);font-size:1rem}
.info__v a{border-bottom:1px solid var(--line);transition:border-color .3s}
.info__v a:hover{border-color:#fff}
.info__v strong{font-weight:600}
.info__mute{color:var(--mute2);font-size:.86rem}

/* mapa: invertido para casar com o preto e branco do site */
.mapa{
  margin-top:clamp(38px,5vw,64px);
  border-radius:3px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);
  line-height:0;
}
.mapa iframe{
  width:100%;height:clamp(260px,34vw,400px);border:0;display:block;
  filter:grayscale(1) invert(.92) contrast(.86) brightness(.95);
  transition:filter .5s var(--ease);
}
.mapa:hover iframe{filter:grayscale(.4) invert(.9) contrast(.9) brightness(1)}
@media (hover:none){ .mapa iframe{filter:grayscale(.5) invert(.92) contrast(.88)} }
/* com JS: o mapa só "pega" o dedo/mouse depois de um clique — não rouba a rolagem */
.fx .mapa iframe{pointer-events:none}
.fx .mapa.is-active iframe,
.lenis.lenis-smooth .mapa.is-active iframe{pointer-events:auto}

.contato__btns{display:flex;gap:12px;flex-wrap:wrap}
.contato__media{
  position:relative;overflow:hidden;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.7);
  max-width:480px;margin-inline:auto;
}
.contato__media img{width:100%;height:auto;filter:grayscale(1) contrast(1.1) brightness(.85)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line2);padding-top:clamp(46px,6vw,72px);background:#000}
.foot__grid{
  display:grid;grid-template-columns:1fr auto auto;gap:36px;align-items:center;
  padding-bottom:clamp(34px,4vw,52px);
}
.foot__brand{display:flex;align-items:center;gap:16px}
.foot__brand img{width:56px;height:56px;border-radius:50%}
.foot__brand p{margin:0;font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:.9rem;letter-spacing:.1em;color:rgba(255,255,255,.85)}
.foot__nav{display:flex;gap:24px;flex-wrap:wrap}
.foot__nav a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute2);transition:color .3s}
.foot__nav a:hover{color:#fff}
.foot__social{display:flex;gap:10px}
.foot__social a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--line);transition:background .35s,color .35s;
}
.foot__social svg{width:19px;height:19px}
.foot__social a:hover{background:#fff;color:#000}
.foot__bar{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line2);padding-block:22px;
  font-size:.7rem;letter-spacing:.1em;color:var(--mute2);
}

/* ---------- sticky cta mobile ---------- */
.stickycta{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:800;display:none;
  text-align:center;padding:17px;border-radius:100px;background:#fff;color:#000;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  box-shadow:0 14px 40px rgba(0,0,0,.6);
  transform:translateY(140%);transition:transform .55s var(--ease);
}
.stickycta.is-on{transform:none}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.96);
  display:grid;place-items:center;padding:5vw;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.lb.is-on{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:86vh;object-fit:contain;
  transform:scale(.94);transition:transform .5s var(--ease)}
.lb.is-on img{transform:none}
.lb__close{position:absolute;top:20px;right:24px;font-size:1.5rem;color:#fff;
  width:46px;height:46px;border-radius:50%;transition:background .3s}
.lb__close:hover{background:rgba(255,255,255,.12)}
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);font-size:2.6rem;color:#fff;
  width:58px;height:58px;border-radius:50%;line-height:0;transition:background .3s;
}
.lb__nav:hover{background:rgba(255,255,255,.12)}
.lb__nav--prev{left:12px}
.lb__nav--next{right:12px}

/* =========================================================
   COM JS — vídeo que expande (fica "grudado" na tela enquanto você rola)
   ========================================================= */
.fx .reelwrap{height:310vh}
.fx .reel{position:sticky;top:0;height:100vh;height:100svh}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1000px){
  .sobre__grid,.contato__grid,.toalha__grid{grid-template-columns:1fr}
  .toalha__frame{width:min(100%,360px)}
  .sobre__media{padding-bottom:0;order:2}
  .frame--small{position:relative;right:auto;bottom:auto;width:100%;margin-top:12px;border-width:0}
  .foot__grid{grid-template-columns:1fr;justify-items:start;gap:26px}
}

@media (max-width:860px){
  .nav__burger{display:block}
  .nav>.nav__cta{display:none}
  .nav__cta--mobile{display:inline-flex;justify-content:center;margin-top:12px}
  /* o backdrop-filter/transform da .nav vira "containing block" e prenderia o
     painel fixo dentro da barra (80px). Com o menu aberto, removemos os dois. */
  .nav.is-open{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:transparent;transform:none;
  }
  .nav__links{
    position:fixed;inset:0;z-index:-1;
    flex-direction:column;justify-content:center;gap:6px;
    background:rgba(0,0,0,.97);backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
    padding:var(--pad);
  }
  .nav.is-open .nav__links{opacity:1;visibility:visible}
  .nav__links a{
    font-family:'Anton',sans-serif;font-size:1.9rem;letter-spacing:.04em;color:#fff;
    opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease);
    padding-block:9px;
  }
  .nav.is-open .nav__links a{opacity:1;transform:none}
  .nav.is-open .nav__links a:nth-child(1){transition-delay:.08s}
  .nav.is-open .nav__links a:nth-child(2){transition-delay:.14s}
  .nav.is-open .nav__links a:nth-child(3){transition-delay:.2s}
  .nav.is-open .nav__links a:nth-child(4){transition-delay:.26s}
  .nav.is-open .nav__links a:nth-child(5){transition-delay:.32s}
  .nav.is-open .nav__links a:nth-child(6){transition-delay:.38s}
  .nav.is-open .nav__links a:nth-child(7){transition-delay:.44s}
  .nav.is-open .nav__links a:nth-child(8){transition-delay:.5s}
  .nav .nav__links a.nav__cta--mobile{font-size:.8rem}
  .nav__links a::after{display:none}

  .stickycta{display:block}
  .foot{padding-bottom:92px}
  .info li{grid-template-columns:1fr;gap:5px}
  .teamshot figcaption{position:relative;background:none;padding:16px 0 0}
  .grid{grid-template-columns:repeat(2,1fr)}
  .fx .ringwrap{height:300vh}
  .fx .reelwrap{height:270vh}

}

@media (max-width:900px){ .team{grid-template-columns:repeat(2,1fr);max-width:640px} }   /* tablet: 2 × 2, sem esticar as fotos além da resolução delas */
/* equipe no CELULAR (até 640px): cartas que empilham enquanto você rola.
   Tablets ficam com a grade 2×2 normal. */
@media (max-width:640px){
  /* equipe no celular: cartas que empilham enquanto você rola */
  .fx .team{display:block}
  .fx .member{
    position:sticky;top:calc(80px + var(--k,0) * 12px);
    background:var(--ink);padding:12px 0 22px;margin-bottom:34vh;border-radius:6px;   /* respiro: dá tempo de ler antes da próxima carta subir */
    box-shadow:0 -34px 60px -12px rgba(0,0,0,.85);
  }
  .fx .member:nth-child(1){--k:0}
  .fx .member:nth-child(2){--k:1}
  .fx .member:nth-child(3){--k:2}
  .fx .member:nth-child(4){--k:3}
  .fx .member:last-child{margin-bottom:0}
  .fx .member__photo{max-height:50vh;max-height:50svh;margin-bottom:14px}
}

@media (max-width:700px){
  .planos__grid{grid-template-columns:repeat(2,1fr);gap:8px}
}
@media (max-width:560px){
  .plano{padding:22px 10px 18px}
  .plano__vezes{font-size:2.1rem}
  .plano__preco{font-size:1.5rem}
  .plano__nome{font-size:.58rem;letter-spacing:.16em;margin-bottom:12px}
  .plano__corte{font-size:.66rem}
  .plano__eco{font-size:.56rem;padding:5px 9px}
  .perks{grid-template-columns:repeat(2,1fr);gap:18px}

  .hero__actions{flex-direction:column;width:100%;align-items:stretch}
  .hero__actions .btn{justify-content:center}
  .cards{grid-template-columns:1fr}
  .stats{gap:22px}
  .stat{flex:1 1 78px}
  .lb__nav{width:46px;height:46px;font-size:2rem}
}

/* =========================================================
   TOQUE (celular/tablet) — sem :hover, as fotos precisam
   nascer um pouco coloridas, e o que pesa na GPU é aliviado.
   ========================================================= */
@media (hover:none){
  .frame img,
  .contato__media img{filter:grayscale(.15) contrast(1.04) brightness(.96)}
  .tile img{filter:grayscale(.25) contrast(1.04) brightness(.92)}
  .teamshot img{filter:grayscale(.2) contrast(1.05) brightness(.88)}
  /* grão animado e linhas de varredura custam bateria no celular */
  .grain{animation:none;inset:0}
  .fx .tile{box-shadow:none}            /* sombra grande em 12 camadas 3D pesa em celular modesto */
  .scanlines{display:none}
  /* alvos de toque confortáveis (mínimo ~44px) */
  .card__go{padding:13px 4px 13px 12px;margin-block:-13px}
  .nav__burger{width:44px;height:44px}
  .nav__burger span{left:11px;right:11px}
  .nav__burger span:nth-child(1){top:18px}
  .nav__burger span:nth-child(2){top:25px}
  .chip{padding:11px 20px}
  .nav__cta{padding:13px 24px}
  .plano{padding:26px 16px 22px}
  .lb__close{width:52px;height:52px}
  .lb__nav{width:52px;height:52px}
}

/* barra fixa respeitando o "notch"/barra de gestos do iPhone */
@supports (padding:max(0px)){
  .stickycta{bottom:max(14px,env(safe-area-inset-bottom))}
  .nav{
    padding-left:max(var(--pad),env(safe-area-inset-left));
    padding-right:max(var(--pad),env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion:reduce){
  .toalha__vapor{display:none}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .grain{display:none}
}

/* =========================================================
   ECONOMIA — animações contínuas só rodam com a seção na tela
   (o main.js coloca .is-tela). Fora dela ficam pausadas.
   ========================================================= */
.hero:not(.is-tela) .hero__kb,
.hero:not(.is-tela) .hero__scrollline,
.toalha:not(.is-tela) .toalha__vapor i,
.planos:not(.is-tela) .plano.is-destaque::before{animation-play-state:paused}

/* modo leve (celular fraco ou economia de dados) — sem grão, vapor mais simples */
html.lite{scroll-behavior:smooth}            /* sem o Lenis, os links do menu ainda deslizam */
.lite .grain,.lite .scanlines{display:none}
.lite .toalha__vapor i{filter:none;opacity:.5}
@media (hover:none){ .hero__kb.tem-video{animation:none} }   /* o vídeo já se mexe; no celular o zoom extra só gastava bateria */

/* =========================================================
   VERSÃO ENXUTA (nov/2026) — pedido do Gui: menos rolagem,
   localização logo no começo, agendar/planos/WhatsApp na cara.
   ========================================================= */

/* ---------- atalhos logo abaixo do topo ---------- */
.atalhos{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--ink);border-block:1px solid var(--line2);
}
.atalho{
  display:flex;align-items:center;gap:16px;
  padding:clamp(20px,2.4vw,30px) clamp(18px,2.4vw,34px);
  border-right:1px solid var(--line2);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.atalho:last-child{border-right:0}
.atalho svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.atalho span{display:grid;gap:3px;min-width:0}
.atalho b{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.1}
.atalho small{font-size:.74rem;color:var(--mute2);letter-spacing:.02em}
.atalho:hover{background:#fff;color:#000}
.atalho:hover small{color:rgba(0,0,0,.6)}
.atalho--forte{background:#fff;color:#000}
.atalho--forte small{color:rgba(0,0,0,.6)}
.atalho--forte:hover{background:#e9e9e9}

/* ---------- localização: fachada + mapa lado a lado ---------- */
.local{
  display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(12px,1.6vw,20px);
  height:clamp(340px,40vw,500px);
}
.contato .contato__media{max-width:none;margin:0;height:100%;box-shadow:none}
.contato .contato__media img{height:100%;object-fit:cover;object-position:center 40%}
.contato .mapa{margin-top:0;height:100%}
.contato .mapa iframe{height:100%}
.info--linha{
  grid-template-columns:repeat(4,1fr);gap:0 clamp(18px,2.4vw,34px);
  margin:clamp(26px,3vw,38px) 0 clamp(26px,3vw,36px);
}
.info--linha li{grid-template-columns:1fr;gap:6px;border-bottom:1px solid var(--line2)}

/* ---------- especialidades: vídeo de fundo, sem rolagem presa ---------- */
.espec{position:relative;overflow:hidden;background:#000;
  min-height:clamp(420px,62vh,640px);display:grid;align-items:center}
.espec__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.espec__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.45) 45%,rgba(0,0,0,.8))}
.espec__inner{position:relative;z-index:2;padding-block:clamp(60px,8vw,110px)}
.espec__lista{list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.espec__lista li{
  padding:26px clamp(10px,1.6vw,22px) 0 0;border-right:1px solid var(--line2);
  font-family:'Anton',sans-serif;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.2vw,3.7rem);color:#fff;
}
.espec__lista li + li{padding-left:clamp(10px,1.6vw,22px)}
.espec__lista li:last-child{border-right:0}
.espec__lista span{display:block;font-family:inherit;font-size:.8rem;letter-spacing:.3em;
  color:var(--mute2);margin-bottom:14px}

/* ---------- botões flutuantes: agendar + WhatsApp ---------- */
.flutua{position:fixed;right:18px;bottom:18px;z-index:800;display:flex;align-items:center;gap:10px;
  pointer-events:none}
.flutua > *{pointer-events:auto}
.flutua .stickycta{
  position:static;display:block;padding:15px 26px;
  transform:translateY(calc(100% + 30px));opacity:0;
  transition:transform .55s var(--ease),opacity .4s;
}
.flutua .stickycta.is-on{transform:none;opacity:1}
.wppfloat{
  width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#000;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 12px 34px rgba(0,0,0,.6);
  transition:background .3s,color .3s,transform .3s var(--ease);
}
.wppfloat svg{width:28px;height:28px}
.wppfloat:hover{background:#fff;color:#000;transform:scale(1.06)}

/* ---------- galeria mais curta ---------- */
.fx .ringwrap{height:230vh}

@media (max-width:1000px){
  .atalhos{grid-template-columns:repeat(2,1fr)}
  .atalho:nth-child(2){border-right:0}
  .atalho:nth-child(-n+2){border-bottom:1px solid var(--line2)}
  .local{grid-template-columns:1fr;height:auto}
  .contato .contato__media{height:clamp(220px,58vw,380px)}
  .contato .mapa iframe{height:clamp(240px,62vw,380px)}
  .info--linha{grid-template-columns:repeat(2,1fr)}
  .espec__lista{grid-template-columns:repeat(2,1fr)}
  .espec__lista li{padding:22px 10px 22px 0;border-bottom:1px solid var(--line2)}
  .espec__lista li:nth-child(2){border-right:0}
  .espec__lista li:nth-child(3){padding-left:0}
  .fx .ringwrap{height:210vh}
  .foot{padding-bottom:92px}
  /* celular: a barra "Agendar" ocupa a largura e o WhatsApp fica no canto dela */
  .flutua{left:14px;right:14px;bottom:14px}
  .flutua .stickycta{flex:1;padding:17px}
}
@media (max-width:640px){
  .atalho{padding:18px 14px;gap:11px}
  .atalho svg{width:22px;height:22px}
  .atalho small{font-size:.68rem}
  .info--linha{grid-template-columns:1fr}
  /* equipe no celular: carrossel de lado (antes as cartas empilhavam e esticavam a página) */
  .fx .team,.team{
    display:grid;grid-auto-flow:column;grid-auto-columns:76%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;max-width:none;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scrollbar-width:none;
  }
  .team::-webkit-scrollbar{display:none}
  .fx .member,.member{position:static;margin:0;padding:0;box-shadow:none;scroll-snap-align:center}
}
@supports (padding:max(0px)){
  .flutua{bottom:max(14px,env(safe-area-inset-bottom))}
}

/* celular: menos altura — cartões de serviço compactos, uma foto só no Sobre, vídeo da toalha menor */
@media (max-width:640px){
  .cards{gap:10px}
  .card{padding:18px 18px 16px;gap:8px}
  .card__name{font-size:1.15rem}
  .card__desc{font-size:.8rem;line-height:1.5}
  .card__meta{padding-top:10px;margin-top:2px}
  .card__price{font-size:1.4rem}
  .sobre__media .frame--small{display:none}
  .sobre__media .frame:not(.frame--small) img{aspect-ratio:4/3;object-position:center 45%}
  .toalha__frame{width:min(68%,270px)}
}