/* JoySystem · Barbearia — site institucional */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font:16px/1.6 Inter,system-ui,sans-serif;color:#222;background:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:Oswald,Impact,sans-serif;font-weight:600;letter-spacing:.01em;line-height:1.1;margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.demo-bar{background:var(--c1);color:var(--escuro);text-align:center;font-size:.82rem;font-weight:600;padding:6px 12px}
.demo-bar a{font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;transition:transform .15s,background .15s;cursor:pointer;font-size:.95rem}
.btn:hover{transform:translateY(-2px)}
.btn.ouro{background:var(--c1);color:var(--escuro)}
.btn.vidro{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.btn.linha{border-color:var(--c1);color:var(--c1);background:none}
.btn.grande{padding:15px 28px;font-size:1.02rem}
.eyebrow{display:inline-block;color:var(--c1);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;margin-bottom:10px}

/* topo */
.topo{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;padding:12px 20px;background:var(--escuro);color:#fff;transition:box-shadow .2s}
.topo.solido{box-shadow:0 6px 24px rgba(0,0,0,.35)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.marca img{max-height:44px;width:auto}
.marca b{display:block;font-family:Oswald,sans-serif;font-size:1.35rem;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.marca small{display:block;color:var(--c1);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase}
.poste{width:14px;height:36px;border-radius:8px;background:repeating-linear-gradient(135deg,#c8202d 0 6px,#fff 6px 12px,#1c42a0 12px 18px,#fff 18px 24px);box-shadow:0 0 0 3px var(--c1)}
.menu{display:flex;gap:22px}
.menu a{text-decoration:none;font-weight:600;font-size:.92rem;opacity:.85}
.menu a:hover{opacity:1;color:var(--c1)}
.hamb{display:none;background:none;border:0;padding:6px;cursor:pointer}
.hamb span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}

/* hero */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;color:#fff;background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.65) 55%,rgba(10,10,10,.35)),var(--foto) center/cover}
.hero-in{max-width:1160px;margin:0 auto;padding:70px 20px;width:100%}
.selo{display:inline-block;border:1px solid var(--c1);color:var(--c1);padding:5px 14px;border-radius:999px;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hero h1{font-size:clamp(3rem,9vw,6.4rem);text-transform:uppercase;margin:18px 0 10px;letter-spacing:.02em}
.hero p{font-size:clamp(1.05rem,2.2vw,1.3rem);max-width:560px;opacity:.9;margin:0 0 28px}
.acoes{display:flex;gap:12px;flex-wrap:wrap}
.hero-dados{list-style:none;display:flex;gap:28px;padding:0;margin:40px 0 0;flex-wrap:wrap}
.hero-dados li{font-size:.9rem;opacity:.85}
.hero-dados b{display:block;font-family:Oswald,sans-serif;font-size:1.8rem;color:var(--c1);opacity:1}

/* diferenciais */
.difs{background:var(--escuro);color:#fff;padding:34px 0;border-top:1px solid rgba(255,255,255,.08)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.dif span{font-size:1.6rem}
.dif b{display:block;margin:6px 0 2px;font-size:1rem}
.dif p{margin:0;opacity:.7;font-size:.88rem}

/* seções */
.secao{padding:84px 0}
.secao.escuro{background:var(--escuro);color:#fff}
.cab{text-align:center;max-width:640px;margin:0 auto 44px}
.cab h2{font-size:clamp(2rem,4.5vw,2.9rem);text-transform:uppercase}
.cab p{opacity:.75;margin:10px 0 0}
.cab a{color:var(--c1);font-weight:700}

.servicos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.srv{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px rgba(20,20,20,.07);display:flex;flex-direction:column;transition:transform .2s}
.srv:hover{transform:translateY(-4px)}
.srv.dest{outline:2px solid var(--c1)}
.srv img{height:170px;width:100%;object-fit:cover}
.srv-in{padding:18px 18px 16px;display:flex;flex-direction:column;flex:1}
.srv-t{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.srv-t h3{font-size:1.25rem;text-transform:uppercase}
.srv-t b{font-family:Oswald,sans-serif;font-size:1.3rem;color:var(--c1);white-space:nowrap}
.srv p{margin:6px 0 14px;color:#666;font-size:.9rem;flex:1}
.srv-r{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee;padding-top:12px;font-size:.88rem;color:#777}
.srv-r a{font-weight:700;color:var(--escuro);text-decoration:none}
.srv-r a:hover{color:var(--c1)}

.sobre{padding:84px 0;background:#fff}
.sobre-g{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sobre-g img{border-radius:20px;aspect-ratio:4/3.4;object-fit:cover;width:100%;box-shadow:24px 24px 0 var(--c1)}
.sobre h2{font-size:clamp(1.9rem,4vw,2.6rem);text-transform:uppercase;margin-bottom:14px}
.sobre p{color:#555}
.sobre .btn{margin-top:10px}

.equipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.prof{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px;text-align:center}
.prof-f{width:150px;height:150px;margin:0 auto 16px;border-radius:50%;overflow:hidden;border:3px solid var(--c1);display:grid;place-items:center;background:#222}
.prof-f img{width:100%;height:100%;object-fit:cover}
.prof-f span{font:600 3rem Oswald,sans-serif;color:var(--c1)}
.prof h3{font-size:1.4rem;text-transform:uppercase}
.prof em{display:block;color:var(--c1);font-style:normal;font-size:.85rem;font-weight:600;margin:4px 0 8px}
.prof p{opacity:.72;font-size:.9rem;margin:0 0 16px}

.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;transition:transform .25s,filter .25s;filter:grayscale(.15)}
.galeria img:hover{transform:scale(1.03);filter:none}

/* app */
.app-sec{background:linear-gradient(135deg,var(--escuro),#2a2418);color:#fff;padding:84px 0;overflow:hidden}
.app-g{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}
.app-sec h2{font-size:clamp(1.9rem,4vw,2.7rem);text-transform:uppercase;margin-bottom:18px}
.lista{list-style:none;padding:0;margin:0 0 28px}
.lista li{padding:8px 0 8px 30px;position:relative;opacity:.9}
.lista li::before{content:'✓';position:absolute;left:0;color:var(--c1);font-weight:800}
.lista b{color:var(--c1)}
.celular{justify-self:center;width:260px;height:520px;border-radius:40px;background:#000;padding:12px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 2px #333}
.cel-tela{height:100%;border-radius:30px;background:linear-gradient(160deg,#3a3122,#141414);padding:46px 12px 12px;position:relative;overflow:hidden}
.notif{display:flex;gap:10px;background:rgba(255,255,255,.92);color:#111;border-radius:16px;padding:11px;margin-bottom:10px;font-size:.74rem;line-height:1.35;animation:cai .8s both}
.notif.n2{animation-delay:.4s;opacity:.85}
.notif i{flex:none;width:30px;height:30px;border-radius:8px;background:repeating-linear-gradient(135deg,#c8202d 0 4px,#fff 4px 8px,#1c42a0 8px 12px,#fff 12px 16px);box-shadow:inset 0 0 0 3px var(--escuro)}
.notif b{display:block;font-size:.8rem}
.cel-poste{position:absolute;bottom:-40px;left:50%;width:70px;height:220px;margin-left:-35px;border-radius:40px;opacity:.18;background:repeating-linear-gradient(135deg,#c8202d 0 14px,#fff 14px 28px,#1c42a0 28px 42px,#fff 42px 56px)}
@keyframes cai{from{opacity:0;transform:translateY(-14px)}}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dep{margin:0;background:#fff;border-radius:16px;padding:24px;box-shadow:0 8px 30px rgba(20,20,20,.06)}
.dep p{margin:0 0 14px;font-size:1.02rem}
.dep cite{font-style:normal;color:var(--c1);font-weight:700;font-size:.88rem}

.cta{background:linear-gradient(rgba(10,10,10,.82),rgba(10,10,10,.82)),var(--foto) center/cover;color:#fff;text-align:center;padding:90px 0}
.cta h2{font-size:clamp(2rem,5vw,3.2rem);text-transform:uppercase}
.cta p{opacity:.85;margin:10px auto 26px;max-width:520px}

.rodape{background:var(--escuro);color:#ddd;padding-top:60px}
.rod-g{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;padding-bottom:36px}
.rod-nome{font:600 1.6rem Oswald,sans-serif;color:#fff;text-transform:uppercase}
.rodape h3{color:var(--c1);font-size:1.05rem;text-transform:uppercase;margin-bottom:12px}
.rodape p{margin:0 0 10px;opacity:.8}
.horas{list-style:none;padding:0;margin:0}
.horas li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.12);font-size:.92rem}
.mapa{display:block;width:100%;height:280px;border:0;filter:grayscale(.6) invert(.9) hue-rotate(180deg)}
.rod-fim{display:flex;justify-content:space-between;gap:10px;padding:18px 20px;font-size:.82rem;opacity:.65;flex-wrap:wrap}
.rod-fim a{text-decoration:none}
.wa-flut{position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:40}
.wa-flut svg{width:30px;height:30px;fill:#fff}

@media (max-width:900px){
  .menu{position:fixed;inset:62px 0 auto 0;flex-direction:column;gap:0;background:var(--escuro);padding:8px 20px 18px;transform:translateY(-130%);transition:transform .25s;box-shadow:0 18px 30px rgba(0,0,0,.4)}
  .menu.aberto{transform:none}
  .menu a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .hamb{display:block}
  .topo .btn{padding:9px 16px}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .sobre-g,.app-g,.rod-g{grid-template-columns:1fr}
  .sobre-g img{box-shadow:12px 12px 0 var(--c1)}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
  .celular{width:230px;height:440px}
  .secao,.sobre,.app-sec{padding:60px 0}
}