/* =====================================================================
   AVENUE STUDIO — Shell da área do cliente (design system + navegação)
   Sidebar no desktop, tab bar fixa no mobile, topo com ☰ + perfil.
   Carregar depois das fontes e antes do <style> de cada página.
   ===================================================================== */

/* Fonte de menus/botões (estilo editorial, inspirado no álbum) — auto-hospedada.
   Variable font: um arquivo cobre 100–700. Degrada p/ Founders/sans se faltar. */
@font-face{font-family:'Josefin Sans';src:url('fonts/JosefinSans-var.woff2') format('woff2');font-weight:100 700;font-display:swap}

:root{
  --bg:#0e0d0c;--paper:#fbf9f5;--ink:#16130f;--ink-rgb:22,19,15;
  --muted:#8a8378;--muted-d:#5a544b;--accent:#c08a5e;--accent-rgb:192,138,94;
  --line:#e6ded1;--cream:#f2ede4;--red-rgb:214,64,42;--radius:18px;
  --detail:#7c7873;--detail-rgb:124,120,115;
  --solic:#f59e0b;--conf:#16a34a;--concl:#0e7490;--canc:#ef4444;
  --av-sidebar-w:232px;--av-topbar-h:64px;--av-tabbar-h:66px;
  --font-menu:'Josefin Sans','Founders Grotesk',sans-serif;
}
html[data-tema="classico"]{--accent:#a06b3f;--accent-rgb:160,107,63;--radius:22px}
html[data-tema="minimal"]{--accent:#2b2b2b;--accent-rgb:43,43,43;--radius:6px}
html[data-tema="minimal"] #avTopbar,html[data-tema="minimal"] #avSidebar{background:#000}
html[data-tema="minimal"] .btn:hover{background:#000!important}
html[data-tema="minimal"] .av-avatar{background:#000}

*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media(min-width:960px){ body.av-shell{padding-left:var(--av-sidebar-w)} }
@media(max-width:959px){ body.av-shell{padding-bottom:calc(var(--av-tabbar-h) + env(safe-area-inset-bottom,0px))} }

/* ---------- demo banner ---------- */
.av-demo-banner{background:rgba(var(--red-rgb),.92);color:#fff;text-align:center;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:9px 12px}

/* ---------- topbar (mobile + desktop) — static, scrolls with the page like before ---------- */
#avTopbar{background:var(--bg);color:var(--paper);height:var(--av-topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 18px;gap:12px;transition:.3s}
#avTopbar .av-logo{font-family:'Bootzy',serif;font-size:33px;letter-spacing:.16em;text-transform:uppercase;flex-shrink:0;display:flex;align-items:center}
#avTopbar .av-logo span span{color:var(--accent);transition:.3s}
#avTopbar .av-logo img{height:60px;object-fit:contain;vertical-align:middle}
.av-topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.av-topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
@media(min-width:960px){ #avDrawerBtn{display:none} #avTopbar .av-logo{display:none} }

.av-icon-btn{background:none;border:none;color:var(--paper);font-size:19px;cursor:pointer;padding:7px 10px;border-radius:8px;transition:.2s;line-height:1}
.av-icon-btn:hover{background:rgba(255,255,255,.08)}

.av-cta-agendar{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--accent-rgb),.9);color:#fff;padding:9px 16px;border-radius:100px;font-family:var(--font-menu);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.av-cta-agendar:hover{background:rgba(var(--red-rgb),.85)}

.av-profile-wrap{position:relative}
.av-profile-btn{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;border:none;display:grid;place-items:center;font-family:'Bootzy',serif;font-size:14px;cursor:pointer;flex-shrink:0}
.av-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:var(--paper);color:var(--ink);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.35);min-width:212px;padding:8px;display:none;z-index:90}
.av-dropdown.show{display:block}
.av-dropdown a,.av-dropdown span.act{display:flex;gap:11px;align-items:center;padding:11px 14px;border-radius:10px;font-family:var(--font-menu);font-size:14px;letter-spacing:.02em;color:var(--ink);cursor:pointer;transition:.15s}
.av-dropdown a:hover,.av-dropdown span.act:hover{background:var(--cream)}
.av-dropdown hr{border:none;border-top:1px solid var(--line);margin:6px 4px}

/* ---------- sidebar (desktop) ---------- */
#avSidebar{position:fixed;left:0;top:0;bottom:0;width:var(--av-sidebar-w);background:var(--bg);color:var(--paper);z-index:75;display:none;flex-direction:column;padding:22px 14px;transition:.3s}
#avSidebar .av-logo{font-family:'Bootzy',serif;font-size:30px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px 26px;display:flex;align-items:center}
#avSidebar .av-logo span span{color:var(--accent)}
#avSidebar .av-logo img{height:52px;object-fit:contain}
.av-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.av-nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;font-family:var(--font-menu);font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.78);transition:.15s}
.av-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.av-nav a.active{background:var(--accent);color:#fff;font-weight:600}
.av-nav a .ic{font-size:16px;width:20px;text-align:center;flex-shrink:0}
#avSidebar .av-bottom{display:flex;flex-direction:column;gap:3px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
#avSidebar .av-bottom a,#avSidebar .av-bottom span{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;font-family:var(--font-menu);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.7);cursor:pointer;transition:.15s}
#avSidebar .av-bottom a:hover,#avSidebar .av-bottom span:hover{background:rgba(255,255,255,.08);color:#fff}
@media(min-width:960px){ #avSidebar{display:flex} }

/* ---------- drawer (mobile ☰) ---------- */
#avDrawerOverlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:95;display:none}
#avDrawerOverlay.show{display:block}
#avDrawer{position:fixed;left:0;top:0;bottom:0;width:78vw;max-width:300px;background:var(--bg);color:var(--paper);z-index:96;padding:20px 14px;transform:translateX(-100%);transition:transform .25s ease;display:flex;flex-direction:column}
#avDrawer.show{transform:translateX(0)}
#avDrawer .av-logo{font-family:'Bootzy',serif;font-size:28px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px 22px}
#avDrawer .av-logo span span{color:var(--accent)}

/* ---------- tab bar (mobile) ---------- */
#avTabbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--bg);display:none;align-items:center;justify-content:space-around;height:var(--av-tabbar-h);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -6px 20px rgba(0,0,0,.18)}
#avTabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:rgba(255,255,255,.62);font-family:var(--font-menu);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;flex:1;padding:8px 4px}
#avTabbar a .ic{font-size:19px}
#avTabbar a.active{color:#fff}
#avTabbar a.av-tab-cta{color:#fff}
#avTabbar a.av-tab-cta .ic{background:var(--accent);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-top:-24px;box-shadow:0 8px 18px rgba(0,0,0,.3);font-size:20px}
@media(max-width:959px){ #avTabbar{display:flex} }

/* ---------- whatsapp fab ---------- */
.av-fab-wpp{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;width:52px;height:52px;border-radius:50%;background:rgba(37,211,102,.5);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);color:#fff;border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;font-size:24px;box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.35);transition:.2s}
.av-fab-wpp:hover{transform:translateY(-3px)}
@media(max-width:959px){ .av-fab-wpp{bottom:calc(var(--av-tabbar-h) + 14px + env(safe-area-inset-bottom,0px))} }

/* ---------- assistente de ajuda flutuante ---------- */
.av-fab-help{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:97;width:52px;height:52px;border-radius:50%;background:rgba(var(--ink-rgb),.45);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);color:var(--paper);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;font-size:20px;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -8px 14px rgba(0,0,0,.16);transition:.2s;cursor:pointer}
.av-fab-help:hover{transform:translateY(-3px)}
@media(max-width:959px){ .av-fab-help{bottom:calc(var(--av-tabbar-h) + 14px + env(safe-area-inset-bottom,0px))} }
/* ---------- dock: um lançador "?" mínimo que revela os FABs ---------- */
.av-fab-dock{position:fixed;left:18px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:98;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
@media(max-width:959px){ .av-fab-dock{bottom:calc(var(--av-tabbar-h) + 8px + env(safe-area-inset-bottom,0px))} }
.av-fab-launcher{pointer-events:auto;width:40px;height:40px;padding:0;border:none;background:none;box-shadow:none;color:var(--ink);opacity:.4;font-size:23px;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center;transition:opacity .2s,transform .25s}
.av-fab-launcher:hover{opacity:.85}
.av-fab-dock.open .av-fab-launcher{opacity:.85}
/* dentro do dock os FABs fluem em coluna (sobrepõe o position:fixed das regras acima) e ficam escondidos até abrir */
.av-fab-dock .av-fab-wpp,.av-fab-dock .av-fab-help{position:static;left:auto;right:auto;bottom:auto;z-index:auto;opacity:0;transform:translateY(10px) scale(.85);pointer-events:none;transition:opacity .22s,transform .22s}
.av-fab-dock.open .av-fab-wpp,.av-fab-dock.open .av-fab-help{opacity:1;transform:none;pointer-events:auto}
.av-help-panel{position:fixed;left:18px;bottom:calc(82px + env(safe-area-inset-bottom,0px));z-index:98;width:min(320px,calc(100vw - 36px));background:var(--paper);color:var(--ink);border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.32);display:none;flex-direction:column;overflow:hidden}
.av-help-panel.show{display:flex}
@media(max-width:959px){ .av-help-panel{bottom:calc(var(--av-tabbar-h) + 78px + env(safe-area-inset-bottom,0px))} }
.av-help-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:600;letter-spacing:.02em}
.av-help-head button{background:none;border:none;color:var(--paper);font-size:15px;cursor:pointer;opacity:.75;padding:2px 4px}
.av-help-head button:hover{opacity:1}
.av-help-body{padding:18px 16px 6px}
.av-help-body h4{font-family:'Bootzy',serif;font-size:18px;margin-bottom:8px}
.av-help-body p{font-size:13.5px;line-height:1.55;color:var(--ink-soft,var(--ink))}
.av-help-foot{display:flex;gap:8px;padding:14px 16px 18px;flex-wrap:wrap}
.av-help-foot .btn{flex:1;justify-content:center}

/* ---------- shared components ---------- */
/* Botões padrão (fatia 2 — padronização): PRIMÁRIO terracota clay sólido, SECUNDÁRIO .ghost neutro/contorno.
   Sem vidro/glossy nem fundo cinza. .btn-danger (vermelho) e .wa (WhatsApp) ficam por conta das páginas. */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:1px solid var(--accent);padding:12px 20px;border-radius:100px;font-family:var(--font-menu);font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:transform .16s cubic-bezier(.34,1.56,.64,1),background .2s,border-color .2s;box-shadow:0 2px 10px rgba(var(--ink-rgb),.08)}
.btn:hover:not(:disabled){background:#a9744a;border-color:#a9744a;transform:translateY(-2px) scale(1.02)}
.btn:active:not(:disabled){transform:scale(.955);transition-duration:.08s}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover:not(:disabled){background:var(--cream);border-color:rgba(var(--ink-rgb),.3);transform:translateY(-2px) scale(1.02)}
.btn.sm{padding:8px 15px;font-size:12px;text-transform:none;letter-spacing:0}
.btn:disabled{opacity:.5;cursor:not-allowed}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.chip{font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:100px;color:#fff;white-space:nowrap}
.chip.next{background:var(--accent);color:#fff}
@media (prefers-reduced-motion: reduce){ .btn,.btn.ghost,.card{transition:none!important} .btn:hover,.btn:active{transform:none!important} }

.av-empty{text-align:center;color:var(--muted-d);padding:34px 14px}
.av-empty .av-empty-ic{font-size:36px;margin-bottom:10px}
.av-empty h3{font-family:'Bootzy',serif;font-weight:500;font-size:18px;color:var(--ink);margin-bottom:4px}
.av-empty p{font-size:13.5px;max-width:340px;margin:0 auto}
.av-empty .btn{margin-top:14px}

.av-skel{background:linear-gradient(90deg,var(--cream) 25%,#e9e2d5 37%,var(--cream) 63%);background-size:400% 100%;animation:av-shimmer 1.4s ease infinite;border-radius:12px;height:64px;margin-bottom:10px}
@keyframes av-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

.av-toast-wrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
@media(max-width:959px){ .av-toast-wrap{bottom:calc(var(--av-tabbar-h) + 16px)} }
.av-toast{background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:100px;font-size:13px;box-shadow:0 10px 26px rgba(0,0,0,.3);opacity:0;transform:translateY(8px);transition:.25s}
.av-toast.show{opacity:1;transform:translateY(0)}

@media(max-width:620px){ #avTopbar{padding:0 14px} }

/* ---------- efeito 3D (clique/hover) nos elementos interativos das páginas do cliente ---------- */
.av-nav a,.av-cta-agendar,.av-icon-btn,#avTabbar a,.nav-card,.frente,.res,.filtro-pill,.estilo-card,.slot,.metodos label,.fotos figure img{
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s;
}
.nav-card:hover,.frente:hover,.res:hover,.estilo-card:hover{ transform: translateY(-3px) scale(1.012); box-shadow: 0 18px 34px rgba(var(--ink-rgb),.10); }
.nav-card:active,.frente:active,.res:active,.estilo-card:active,.filtro-pill:active,.slot:active{ transform: scale(.975); transition-duration: .08s; }
.av-nav a:hover,.av-icon-btn:hover{ transform: scale(1.04); }
.av-nav a:active,.av-icon-btn:active,.av-cta-agendar:active,#avTabbar a:active{ transform: scale(.94); transition-duration: .08s; }
.filtro-pill:hover{ transform: translateY(-1px) scale(1.03); }
@media (prefers-reduced-motion: reduce){
  .av-nav a,.av-cta-agendar,.av-icon-btn,#avTabbar a,.nav-card,.frente,.res,.filtro-pill,.estilo-card,.slot,.metodos label{ transition:none!important }
  .av-nav a:hover,.nav-card:hover,.frente:hover,.res:hover{ transform:none!important }
}