/* HamburQueen: revisão de UX/UI (10/11/2026). Carrega por último e corrige layout, ritmo, celular e movimento. */

/* ---------- ritmo: menos vazio entre as seções ---------- */
.hq-section{padding:clamp(56px,8vw,104px) 0}
.hq-head{margin-bottom:clamp(22px,3.4vw,36px)}
.hq-lead{text-wrap:pretty}
.hq-h2{text-wrap:balance}

/* troca de tema suave (a classe fica só durante a troca) */
html.hq-theming *,html.hq-theming *::before,html.hq-theming *::after{transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease!important}

/* ---------- topo: carrossel de fotos na capa ---------- */
.hq-sleeve .hq-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.1s ease,transform 6.5s ease-out}
.hq-sleeve .hq-slide.on{opacity:1;transform:scale(1)}
.hq-slide-dots{position:absolute;z-index:3;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.hq-slide-dots button{width:30px;height:30px;border:0;padding:0;background:transparent;display:grid;place-items:center}
.hq-slide-dots button::before{content:"";width:18px;height:3px;border-radius:3px;background:rgba(255,255,255,.4);transition:background .3s,width .3s}
.hq-slide-dots button[aria-selected="true"]::before{background:var(--gold);width:26px}
.hq-sleeve-wrap{perspective:1200px}
.hq-sleeve{transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
/* dica do toca-discos, colada no disco */
.hq-tt-hint{position:absolute;z-index:4;right:0;bottom:-40px;margin:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(20,14,14,.9);border:1px solid rgba(242,182,50,.4);font:400 12.5px/1.2 var(--type);color:var(--gold);white-space:nowrap;animation:hqHint 2.6s ease-in-out infinite}
.hq-tt-hint b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#1d1300;font-size:12px}
html.hq-playing .hq-tt-hint{animation:none;opacity:.55}
@keyframes hqHint{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------- Burguer do Mês ---------- */
.hq-disc-badge{width:118px;height:118px;font-size:14px;line-height:1.05;padding:8px}
.hq-disc-badge b{font-size:21px;letter-spacing:.02em;word-break:keep-all}
.hq-hall-track{justify-content:flex-start}
.hq-hall-track::after{content:"";flex:0 0 1px}
@media (min-width:901px){.hq-hall-track{justify-content:safe center}}
.hq-hall-card{transition:transform .3s,border-color .3s}
.hq-hall-card:hover{transform:translateY(-4px) rotate(-1deg);border-color:var(--gold)}
.hq-hall-card .hq-mini{animation:hqSpin 14s linear infinite}
.hq-hall-card .hq-mini img,.hq-hall-card .hq-mini span{animation:none}

/* ---------- cardápio ---------- */
.hq-menu-top{align-items:center}
.hq-menu-ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hq-grid .hq-item{animation:hqCardIn .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes hqCardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.hq-more{display:flex;justify-content:center;margin-top:16px}
.hq-more .hq-btn{min-width:min(100%,320px)}
@media (hover:hover) and (pointer:fine){
  .hq-item{transform-style:preserve-3d;will-change:transform}
  .hq-item:hover{box-shadow:0 18px 40px rgba(0,0,0,.28)}
}

/* ---------- o espaço: fotos com profundidade ---------- */
.hq-mosaic figure{position:relative}
.hq-mosaic img{transform:translateY(var(--py,0px)) scale(1.12);transition:transform .2s linear}
.hq-mosaic figure:hover img{transform:translateY(var(--py,0px)) scale(1.18)}
.hq-perk{transition:transform .3s,border-color .3s}
.hq-perk:hover{transform:translateY(-4px);border-color:var(--red)}
.hq-perk svg{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.hq-perk:hover svg{transform:rotate(-12deg) scale(1.15)}

/* ---------- agenda vazia: compacta ---------- */
.hq-agenda.vazia{padding-bottom:clamp(28px,4vw,48px)}
.hq-agenda.vazia .hq-ag-empty{padding:18px}

/* ---------- prévia do cartão: hambúrgueres que acendem um a um ---------- */
.hq-fid-stamps i{display:grid;place-items:center}
.hq-fid-stamps i::after{display:none}
.hq-fid-stamps svg{width:58%;height:58%;color:rgba(255,236,220,.18);transition:color .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.hq-fid-stamps i.on svg{color:var(--gold);transform:scale(1.12)}
.hq-fid-stamps i.prize svg{color:var(--red-ink);color:#ff4b55}

/* ---------- avaliações e Instagram ---------- */
.hq-review{transition:transform .3s,border-color .3s}
.hq-review:hover{transform:translateY(-4px);border-color:var(--gold)}
.hq-insta a{background-size:220% 100%;animation:hqGrad 9s ease-in-out infinite alternate}
@keyframes hqGrad{from{background-position:0% 50%}to{background-position:100% 50%}}
.hq-insta a:hover .hq-btn{transform:translateY(-2px)}

/* segunda faixa: dourada, no sentido contrário */
.hq-ticker-2{background:var(--gold);color:#1d1300;transform:rotate(1deg);margin:0 -10px -14px;border-color:#0f0b0b}
.hq-ticker-2 .hq-ticker-track{animation-direction:reverse;animation-duration:46s}
.hq-ticker-2 span{font-family:var(--type);text-transform:none;letter-spacing:.02em;font-size:21px}
.hq-ticker-2 span::after{content:"♪";color:var(--red)}

/* ---------- títulos que sobem letra a letra ---------- */
/* a folga em cima e embaixo deixa os acentos (Á, Ã, Ç) aparecerem inteiros */
.hq-split{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .02em .06em;margin:-.16em -.02em -.06em}
.hq-split>span{display:inline-block;will-change:transform}

/* ---------- celular ---------- */
@media (max-width:700px){
  /* controles do cardápio numa linha só, que rola de lado */
  .hq-menu-top{flex-direction:column;align-items:stretch;gap:10px}
  .hq-search{max-width:none;flex:0 0 auto}
  .hq-menu-ctrl{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
  .hq-menu-ctrl::-webkit-scrollbar{display:none}
  .hq-menu-ctrl>*{flex:none}
  .hq-filters{flex-wrap:nowrap}
  .hq-filter{white-space:nowrap}
  /* cartões mais compactos: texto em 3 linhas */
  .hq-item p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hq-item.open p{-webkit-line-clamp:unset}
  .hq-perks{grid-template-columns:1fr 1fr;gap:10px}
  .hq-perk{padding:14px}
  .hq-perk h3{font-size:18px}
  .hq-perk p{font-size:13px}
  .hq-perk svg{width:24px;height:24px;margin-bottom:8px}
  .hq-tt-hint{right:auto;left:50%;transform:translateX(-50%);bottom:-44px;animation:none}
  .hq-sleeve-wrap{margin-bottom:56px}
  .hq-disc-badge{width:96px;height:96px;font-size:12px}
  .hq-disc-badge b{font-size:17px}
  .hq-slide-dots{top:8px}
  .hq-ticker-2 span{font-size:17px}
}
@media (max-width:900px){
  .hq-tt-hint{right:-6%}
}

@media (prefers-reduced-motion: reduce){
  .hq-sleeve .hq-slide{transition:opacity .3s;transform:none!important}
  .hq-grid .hq-item,.hq-tt-hint,.hq-insta a,.hq-hall-card .hq-mini{animation:none}
  .hq-mosaic img{transform:scale(1.05)!important}
}

/* ---------- player do Spotify dentro do rádio (aparece só quando a música vem do Spotify) ---------- */
.hq-radio-sp{display:none;grid-column:1/-1;border-radius:12px;overflow:hidden;min-height:80px;background:#121212}
html.hq-spotify .hq-radio-sp{display:block}
.hq-radio-sp iframe{display:block;width:100%;height:80px;border:0}
html.hq-spotify .hq-radio-panel>img{display:none}
html.hq-spotify .hq-radio-panel{grid-template-columns:1fr}

/* ======================= Jukebox e as 10 ideias (10/11/2026) ======================= */
/* Jukebox: abas Trechos / Playlist da casa */
.hq-radio-panel{display:block;width:min(360px,calc(100vw - 96px));padding:10px 12px 12px}
.hq-jb-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hq-jb-tabs{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(255,236,220,.08);flex:1}
.hq-jb-tabs button{flex:1;min-height:34px;border:0;border-radius:999px;background:transparent;color:#cdbdb1;font:400 14px/1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.hq-jb-tabs button[aria-selected="true"]{background:var(--gold);color:#1d1300}
.hq-jb-x{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,236,220,.18);background:transparent;color:#f5ede2;display:grid;place-items:center;flex:none}
.hq-jb-x svg{width:20px;height:20px}
.hq-jb-trechos{display:grid;grid-template-columns:56px 1fr;gap:10px 12px;align-items:center}
.hq-jb-pane[hidden]{display:none}
.hq-jb-full{margin-left:auto;align-self:center;font-size:12.5px;font-weight:700;color:#1ed760;text-decoration:none;white-space:nowrap}
.hq-jb-full:hover{text-decoration:underline}
.hq-radio-ctrl button:last-child{margin-left:0}
.hq-radio-sp{display:block!important;min-height:232px;border-radius:12px;overflow:hidden;background:#121212}
.hq-radio-sp iframe{display:block;width:100%;height:232px;border:0}
.hq-radio-panel>img{display:none}
.hq-radio.resume .hq-radio-btn{animation:hqResume 1.6s ease-in-out infinite}
@keyframes hqResume{50%{box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 8px rgba(242,182,50,.25)}}

/* ideia 1: cartaz da turnê com a foto do burger ao fundo (quando o dono sobe a foto no painel) */
.hq-month .hq-month-grid>div.has-photo{background:linear-gradient(180deg,rgba(15,11,11,.55),rgba(15,11,11,.92) 62%),var(--poster) center/cover}

/* ideia 2: avaliações que se revezam */
.hq-reviews.hq-rot .hq-review.hq-rev-on{animation:hqRevIn .6s ease both}
@keyframes hqRevIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.hq-rev-dots{display:flex;justify-content:center;gap:6px;margin-top:14px;min-height:4px}
.hq-rev-dots i{width:22px;height:4px;border-radius:4px;background:var(--line-2)}
.hq-rev-dots i.on{background:var(--gold-ink)}

/* ideia 4: Hall da Fama e votação lado a lado */
.hq-mes-extra{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:start;margin-top:clamp(48px,7vw,80px)}
.hq-mes-extra .hq-hall,.hq-mes-extra .hq-vote{margin-top:0}
.hq-mes-extra .hq-hall-track{justify-content:flex-start}
.hq-mes-extra .hq-vote-grid{grid-template-columns:1fr 1fr}
.hq-mes-extra .hq-vote h3,.hq-mes-extra .hq-hall h3{font-size:clamp(26px,3vw,36px)}
@media (max-width:900px){.hq-mes-extra{grid-template-columns:1fr}}

/* ideia 7: botão do topo vivo quando o delivery está aberto */
.hq-order.live{box-shadow:0 0 0 0 rgba(184,29,39,.6);animation:hqLive 2.4s infinite}
@keyframes hqLive{70%{box-shadow:0 0 0 10px rgba(184,29,39,0)}100%{box-shadow:0 0 0 0 rgba(184,29,39,0)}}
.hq-order:not(.live){background:transparent;border-color:rgba(255,236,220,.28);color:#f5ede2}

/* ideia 8: tarja "Hoje" (dia de evento) */
.hq-today{position:fixed;z-index:98;top:72px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:6px 16px;background:var(--gold);color:#1d1300;text-decoration:none;font-size:14px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.hq-today b{font-weight:800}.hq-today>b:last-child{text-decoration:underline;text-underline-offset:3px}
.hq-today-dot{width:9px;height:9px;border-radius:50%;background:#b81d27;animation:hqPulse 1.6s infinite}
html.hq-has-today .hq-hero{padding-top:150px}
@media (max-width:560px){.hq-today{top:64px;font-size:13px;gap:8px}}

/* ideia 9: busca por voz */
.hq-search.has-mic input{padding-right:84px}
.hq-mic{position:absolute;right:44px;top:4px;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--muted);display:grid;place-items:center}
.hq-search:not(.has) .hq-mic{right:4px}
.hq-mic.on{background:var(--red);color:#fff;animation:hqPulse 1.2s infinite}

/* ideia 10: modo mesa (QR na mesa abre só o cardápio) */
.hq-mesa-bar{position:fixed;z-index:98;top:72px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;background:#f2b632;color:#1d1300;font-size:14px}
.hq-mesa-bar a{color:#1d1300;font-weight:700}
html.hq-mesa main>section:not(#cardapio),html.hq-mesa .hq-ticker,html.hq-mesa .hq-insta,html.hq-mesa .hq-links,html.hq-mesa .hq-today,html.hq-mesa .hq-radio{display:none!important}
html.hq-mesa #cardapio{padding-top:130px}
html.hq-mesa .hq-quiz-cta{display:none}
html.hq-mesa .hq-setlist{max-width:760px;transform:none}
@media (max-width:560px){.hq-mesa-bar{top:64px}}

/* o atributo hidden sempre vence (barras fixas, microfone e abas têm display próprio no CSS) */
[hidden]{display:none!important}
/* etiqueta "No palco" / "Virou fixo" por cima do disco que gira */
.hq-flag{z-index:2}
/* player da playlist: altura que o Spotify usa (352 com a lista; 152 compacto no celular) */
.hq-radio-sp{min-height:0}
.hq-radio-sp iframe{height:352px}
@media (max-width:560px){.hq-radio-sp iframe{height:152px}}
html.hq-mesa .hq-burger,html.hq-mesa .hq-sheet{display:none!important}

/* cards do cardápio alinhados: mesma altura por linha, preço e botões sempre no pé */
.hq-item{align-items:stretch}
.hq-item>div:last-child{display:flex;flex-direction:column;min-width:0}
.hq-item>div:last-child p{flex:1 1 auto}
.hq-item-foot{margin-top:auto;flex-wrap:nowrap}
.hq-item-price{white-space:nowrap}
.hq-item-disc{align-self:start}
.hq-quiz-res .hq-item-disc{align-self:center}