/* as fontes do MANUAL de barbearia (Macchina): Oswald nos títulos (placa de
   oficina, caixa alta), Barlow no texto e IBM Plex Mono nos dados/rótulos —
   com reserva de sistema para o texto nunca sumir enquanto carrega */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Barlow:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
.wsbc.wsbc{position:relative;overflow:hidden;padding:0;color:#fff}
.wsbc-fundo{position:absolute;inset:0}
.wsbc-fundo img{width:100%;height:100%;object-fit:cover;display:block;animation:wsbc-zoom 16s ease-out forwards}
@keyframes wsbc-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.wsbc-veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,9,.5) 0%,rgba(12,10,9,.42) 45%,rgba(12,10,9,.68) 100%)}
.wsbc-in{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:clamp(72px,12vh,130px) 20px clamp(64px,10vh,104px);min-height:min(94vh,840px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.wsbc-nome{font-family:'Oswald','Arial Narrow','Arial Black',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(44px,8.8vw,102px);line-height:.95;margin:0;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.wsbc-nome{position:relative}
.wsbc-nome b{display:block;font-weight:400;color:var(--a);animation:wsbc-ouro 3.4s ease-in-out infinite,wsbc-respira 6s ease-in-out infinite}
/* o BRILHO que passa pelo nome (02/09: "tem que ter algum efeito no nome, no
   Barbearia também — impactante, moderno"): uma segunda camada com o MESMO
   texto, recortada na letra (background-clip:text), por cima da primeira; nela
   só o feixe claro é visível, andando da esquerda para a direita a cada 5s.
   Entra depois que as letras terminaram de subir. */
.wsbc-nome-brilho{position:absolute;inset:0;margin:0;pointer-events:none;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%);background-size:260% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;animation:wsbc-brilho 5.2s ease-in-out 1.8s infinite;opacity:.9}
.wsbc-nome-brilho b{display:block;font-weight:400;color:transparent;-webkit-text-fill-color:transparent;animation:wsbc-respira 6s ease-in-out infinite}
.wsbc-nome-brilho .wsbc-lb{opacity:1;transform:none;animation:none}
@keyframes wsbc-brilho{0%{background-position:120% 0}55%,100%{background-position:-140% 0}}
@keyframes wsbc-respira{0%,100%{letter-spacing:.01em}50%{letter-spacing:.09em}}
@keyframes wsbc-ouro{0%,100%{text-shadow:0 0 16px color-mix(in srgb,var(--a) 30%,transparent),0 4px 30px rgba(0,0,0,.45)}50%{text-shadow:0 0 38px color-mix(in srgb,var(--a) 70%,transparent),0 4px 30px rgba(0,0,0,.45)}}
.wsbc-w{display:inline-block;white-space:nowrap}
.wsbc-l{display:inline-block;opacity:0;transform:translateY(.4em) rotate(3deg);animation:wsbc-letra .62s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wsbc-letra{to{opacity:1;transform:none}}
/* divisor de barbearia: dois fios e a tesoura */
.wsbc-div{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 0;color:var(--a);font-size:17px}
.wsbc-div::before,.wsbc-div::after{content:'';width:54px;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.wsbc-div::after{background:linear-gradient(90deg,currentColor,transparent)}
.wsbc-faixa{margin:18px auto 0;max-width:720px;background:rgba(8,7,6,.55);border:0;border-radius:2px;padding:13px 24px;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:15px;line-height:1.65;color:rgba(255,255,255,.92);backdrop-filter:blur(4px)}
.wsbc-faixa small{display:block;margin-top:4px;font-family:'IBM Plex Mono',Consolas,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.wsbc-selos{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px}
/* sem a linha de borda (02/09: "tira essa linha de borda, está esquisito"):
   o selo é só a placa escura translúcida; o latão fica no número e no hover */
.wsbc-selo{background:rgba(10,8,8,.62);border:0;border-radius:2px;padding:16px 22px;min-width:150px;transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.wsbc-selo:hover{background:rgba(10,8,8,.78)}
.wsbc-selo:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.wsbc-selo b{display:block;font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;text-transform:uppercase;font-size:24px;line-height:1.1;color:var(--a)}
.wsbc-selo span{display:block;margin-top:7px;font-family:'IBM Plex Mono',Consolas,monospace;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.76)}
.wsbc-acoes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.wsbc-b{position:relative;overflow:hidden;display:inline-block;text-decoration:none;border:1px solid rgba(255,255,255,.6);color:#fff;border-radius:2px;padding:15px 26px;font-family:'Oswald','Arial Narrow',sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s,transform .3s,box-shadow .3s}
.wsbc-b:hover{background:#fff;color:#14100f;border-color:#fff;transform:translateY(-2px)}
/* a varredura de luz que passa pelos botões, de tempos em tempos */
.wsbc-b::before{content:'';position:absolute;top:0;bottom:0;left:-80%;width:44%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:wsbc-varre 4.2s ease-in-out infinite}
.wsbc-b+.wsbc-b::before{animation-delay:1.4s}
@keyframes wsbc-varre{0%,55%{left:-80%}75%,100%{left:130%}}
.wsbc-b1{background:linear-gradient(135deg,var(--a),color-mix(in srgb,var(--a) 60%,#fff));border-color:transparent;color:#14100f;animation:wsbc-pulso 3s ease-in-out infinite}
@keyframes wsbc-pulso{0%,100%{box-shadow:0 0 0 transparent}50%{box-shadow:0 6px 28px color-mix(in srgb,var(--a) 50%,transparent)}}
.wsbc-b1:hover{background:#fff;color:#14100f}
/* o POSTE DE BARBEIRO: a faixa listrada girando devagar na base do header */
.wsbc-listra{position:absolute;left:0;right:0;bottom:0;height:12px;z-index:3;background:repeating-linear-gradient(115deg,var(--a) 0 16px,#14100f 16px 32px,#f3efe9 32px 38px,#14100f 38px 54px);background-size:200% 100%;animation:wsbc-anda 22s linear infinite;opacity:.92}
@keyframes wsbc-anda{from{background-position:0 0}to{background-position:600px 0}}
@media(max-width:640px){
  .wsbc-in{min-height:min(96vh,760px);padding:84px 16px 56px}
  .wsbc-selos{gap:9px}
  .wsbc-selo{min-width:0;flex:1 1 40%;padding:13px 14px}
  .wsbc-acoes{width:100%}
  .wsbc-b{width:100%;max-width:340px;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .wsbc-fundo img,.wsbc-nome b,.wsbc-b::before,.wsbc-b1,.wsbc-listra,.wsbc-nome-brilho{animation:none}
  .wsbc-nome-brilho{display:none}
  .wsbc-l{animation:none;opacity:1;transform:none}
  .wsbc-selo,.wsbc-b{transition:none}
}

/* o mesmo chão da prévia: ela roda num documento com box-sizing:border-box em
   tudo. Num tema sem esse reset, padding e borda mediam diferente no publicado
   (botão de largura cheia estourando no celular, caixa interna mais larga). */
.wsbc,.wsbc *,.wsbc *::before,.wsbc *::after{box-sizing:border-box}
.wsbc a[href],.wsbc button{-webkit-tap-highlight-color:transparent}
.wsbc a[href]:active,.wsbc button:active{transform:scale(.97)}
.wsbc .ws-bt{position:relative;overflow:hidden;isolation:isolate}
.wsbc .ws-bt>span{position:relative;z-index:1}
/* z-index negativo DENTRO do isolate: fica atrás do texto sem precisar que o
   texto esteja num <span> — vários CTAs são <a>texto</a> puro. */
.wsbc .ws-bt::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--t);opacity:0;transition:opacity .35s}
.wsbc .ws-bt:hover::after{opacity:.14}
/* Esconde SÓ quando o JavaScript confirmou que está vivo (classe ws-js, posta
   pelo próprio script do bloco, antes da pintura). Sem isso o título nascia em
   opacity:0 e, se o JS falhasse, o texto do site sumia para o visitante — o
   teste pegou isso. Agora o padrão é visível, e a animação é o extra. */
.wsbc.ws-js .ws-tit{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.wsbc.ws-js.ws-vis .ws-tit{opacity:1;transform:none}
.wsbc.ws-js.ws-vis .ws-tit:nth-of-type(2){transition-delay:.08s}
@media(prefers-reduced-motion:reduce){
.wsbc a[href]:active,.wsbc button:active{transform:none}
.wsbc .ws-bt::after{transition:none}
.wsbc.ws-js .ws-tit{opacity:1;transform:none;transition:none}
}
.dep .in.ws-cheio{max-width:none;margin:0;padding:0}
.dep section.ws-cheio-pai{padding:0}
.dep .in:has(> .wsbc){max-width:none;margin:0;padding:0}
.dep section:has(> .in > .wsbc){padding:0}
.wsbc img.lazyload,.wsbc img.lazyloading{width:100%!important;max-width:100%}