/* Vado Barber Club — versão mobile. Carrega depois de style.css e fx.css */
.menu-btn,.menu-ov,.dock,.dots{display:none}

@media(max-width:600px){
*{-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:70px}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body.menu-open{overflow:hidden}
header .button.small{display:none}

/* menu em tela cheia, abre em círculo a partir do botão */
.menu-btn{display:block;position:relative;width:46px;height:46px;border:1px solid #ffffff30;border-radius:50%;background:none;cursor:pointer}
.menu-btn i{position:absolute;left:14px;width:16px;height:2px;background:var(--paper);transition:transform .4s cubic-bezier(.2,.8,.2,1),top .4s cubic-bezier(.2,.8,.2,1)}
.menu-btn i:first-child{top:18px}
.menu-btn i:last-child{top:26px}
.menu-btn[aria-expanded=true] i:first-child{top:22px;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] i:last-child{top:22px;transform:rotate(-45deg)}
.menu-ov{display:flex;flex-direction:column;justify-content:center;position:fixed;inset:0;z-index:45;padding:80px 7% 40px;background:#111210f7;backdrop-filter:blur(18px);clip-path:circle(0 at calc(100% - 7% - 23px) 41px);transition:clip-path .75s cubic-bezier(.7,0,.2,1);pointer-events:none}
.menu-ov.open{clip-path:circle(150% at calc(100% - 7% - 23px) 41px);pointer-events:auto}
.menu-ov a{display:flex;justify-content:space-between;align-items:center;padding:.1em 0;border-bottom:1px solid var(--line);font:800 17vw/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;opacity:0;translate:0 50px;transition:opacity .5s,translate .7s cubic-bezier(.2,.8,.2,1),color .2s}
.menu-ov a::after{content:"↗";font-size:.45em;color:var(--yellow)}
.menu-ov a:active{color:var(--yellow)}
.menu-ov.open a{opacity:1;translate:0 0;transition-delay:calc(.3s + var(--k)*.08s)}
.menu-ov .cta{margin-top:28px;padding:20px 22px;background:var(--yellow);color:#111;border:0;font:700 15px 'DM Sans',sans-serif;letter-spacing:0}
.menu-ov .cta::after{color:#111;font-size:15px}

/* barra de agendamento fixa na base */
.dock{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;gap:8px;translate:0 160%;transition:translate .55s cubic-bezier(.2,.8,.2,1)}
.dock.show{translate:0 0}
.dock .button{flex:1;box-shadow:0 12px 30px #000a}
.dock .ig{display:grid;place-items:center;width:58px;background:#191b15ee;border:1px solid #ffffff30;backdrop-filter:blur(12px);font-weight:700;font-size:13px;box-shadow:0 12px 30px #000a}
.button:active{scale:.96}

/* time: carrossel com cartão ativo em cor */
.team{display:flex;gap:14px;margin:0 -6%;padding:0 6% 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.team::-webkit-scrollbar,.gallery::-webkit-scrollbar{display:none}
.barber{flex:0 0 72%;scroll-snap-align:center;scale:.9;transition:scale .5s cubic-bezier(.2,.8,.2,1),opacity .5s,transform .25s}
.barber.rv.in:not(.act){opacity:.5}
.barber.act{scale:1}
.barber.act .portrait{filter:grayscale(0)}
.barber.act .portrait-photo,.barber.act .initials{scale:1.07}
.barber:hover{transform:perspective(900px)}
.barber-caption strong{font-size:17px}
.barber-caption small{font-size:10px}
.dots{display:flex;justify-content:center;gap:6px;margin-top:18px}
.dots i{width:6px;height:6px;border-radius:6px;background:#ffffff40;transition:width .4s cubic-bezier(.2,.8,.2,1),background .3s}
.dots i.on{width:28px;background:var(--yellow)}

/* galeria deslizável (as 3 fotos) */
.gallery{display:flex;gap:12px;margin:0 -6%;padding:0 6%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery figure,.gallery figure:last-child{display:block;flex:0 0 74%;scroll-snap-align:center;translate:none!important}
.gallery figure:nth-child(2){padding-top:0}

/* planos e serviços */
.plan:hover{transform:none}
.service:hover{translate:0 0}
.service:active{color:var(--yellow)}

/* perfil vira bottom sheet (arraste para baixo fecha) */
dialog{margin:auto 0 0;max-width:none;width:100%;max-height:88vh;border-radius:24px 24px 0 0;border-bottom:0;padding:40px 22px calc(28px + env(safe-area-inset-bottom,0px))}
dialog::before{content:"";position:absolute;top:10px;left:50%;width:44px;height:4px;margin-left:-22px;border-radius:4px;background:#ffffff40}
@keyframes sheet{from{transform:translateY(100%)}}
dialog[open]{animation:sheet .55s cubic-bezier(.2,.9,.2,1)}
}