/* =========================================================================
   Menu por categoria: abas no topo com painel ao passar o mouse, subbarra
   com as páginas da categoria atual, gaveta no celular e o mapa no rodapé
   ========================================================================= */
.nav-cat { display: flex; align-items: center; gap: 4px; }
.cat { position: relative; }
.cat-botao { position: relative; display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 800; color: var(--texto-2); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.cat-botao svg { width: 18px; height: 18px; }
.cat:hover .cat-botao { background: rgba(255, 92, 180, 0.1); color: var(--texto); }
.cat.ativo .cat-botao { color: #fff; background: var(--grad-botao, var(--gradiente)); box-shadow: var(--sombra-botao, 0 6px 16px rgba(255, 61, 154, 0.35)); }
/* As categorias que mais importam ganham contorno, mesmo fora delas */
.cat.destaque:not(.ativo) .cat-botao { color: var(--rosa); box-shadow: inset 0 0 0 1.5px rgba(255, 79, 174, 0.45); }

.aviso-num { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #fb7185, #e11d48); box-shadow: 0 0 0 2px var(--solido, #fff), 0 4px 10px rgba(225, 29, 72, 0.45); animation: aviso-pulsa 2s ease-in-out infinite; }
@keyframes aviso-pulsa { 50% { transform: scale(1.12); } }
.aviso-bolinha { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #fb7185, #e11d48); }

/* Painel da categoria (ao passar o mouse) */
.cat-painel { position: absolute; left: 50%; top: calc(100% + 12px); z-index: 45; width: 340px; padding: 10px; border-radius: 20px; background: var(--solido); border: 1px solid var(--borda); box-shadow: 0 20px 44px rgba(20, 0, 30, 0.28); display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; }
.cat-painel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.cat:hover .cat-painel, .cat:focus-within .cat-painel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cat-titulo { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; font-size: 12px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; color: var(--texto-3); border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.cat-titulo svg { width: 14px; height: 14px; }
.cat-item, .gaveta-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--texto); }
.cat-item > svg, .gaveta-item > svg { width: 20px; height: 20px; flex: none; padding: 8px; box-sizing: content-box; border-radius: 12px; color: var(--rosa); background: rgba(255, 79, 174, 0.12); }
.cat-item span, .gaveta-item span { display: flex; flex-direction: column; min-width: 0; }
.cat-item b, .gaveta-item b { font-size: 14px; }
.cat-item small, .gaveta-item small { font-size: 12px; color: var(--texto-3); }
.cat-item:hover, .cat-item.ativo { background: var(--painel-2); }
.cat-item.ativo > svg { color: #fff; background: var(--gradiente); }

/* Subbarra: as páginas da categoria atual, sempre à vista */
.sub-barra { max-width: 1320px; margin: 8px auto 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 16px; overflow-x: auto; scrollbar-width: none; background: var(--vidro, rgba(255, 255, 255, 0.5)); border: 1px solid var(--vidro-borda, var(--borda)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sub-barra::-webkit-scrollbar { display: none; }
.sub-titulo { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 6px; font-size: 12px; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; color: var(--texto-3); border-right: 1px solid var(--borda); white-space: nowrap; }
.sub-titulo svg { width: 14px; height: 14px; }
.sub-barra a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--texto-2); white-space: nowrap; }
.sub-barra a svg { width: 16px; height: 16px; }
.sub-barra a:hover { background: var(--painel-2); color: var(--texto); }
.sub-barra a.ativo { color: var(--texto); background: var(--painel); box-shadow: inset 0 0 0 1.5px rgba(255, 79, 174, 0.55); }
.sub-barra a .aviso-bolinha { margin-left: 2px; }

/* Gaveta do celular: todas as categorias com tudo à vista */
.gaveta { position: fixed; inset: 0; z-index: 60; background: rgba(20, 0, 30, 0.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.gaveta-caixa { position: absolute; left: 12px; right: 12px; top: 86px; bottom: 12px; overflow-y: auto; padding: 14px; border-radius: 22px; background: var(--solido); display: flex; flex-direction: column; gap: 14px; animation: entrar 0.2s ease-out; }
.gaveta-caixa h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 12px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; color: var(--texto-3); }
.gaveta-caixa h4 svg { width: 14px; height: 14px; }

/* Rodapé como mapa do site */
.rodape-site.mapa { display: grid; grid-template-columns: 1.3fr repeat(5, 1fr); gap: 20px; align-items: start; padding-top: 24px; }
.mapa-marca { display: flex; flex-direction: column; gap: 4px; }
.mapa-marca img { width: 34px; height: 34px; }
.mapa-marca b { font-family: var(--fonte-titulo); font-weight: 400; font-size: 22px; color: var(--texto); }
.mapa-col { display: flex; flex-direction: column; gap: 6px; }
.mapa-col h4 { margin: 0 0 2px; font-size: 12px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; color: var(--texto-2); }
.mapa-col a, .mapa-marca a { color: var(--texto-3); text-decoration: none; font-size: 14px; }
.mapa-col a:hover, .mapa-marca a:hover { color: var(--rosa); }

@media (max-width: 1180px) {
  .cat-botao { padding: 10px 11px; }
  .cat-botao span { display: none; }
  .cat.ativo .cat-botao span, .cat.destaque .cat-botao span { display: inline; }
}
@media (max-width: 860px) {
  .nav-cat { display: none; }
  .rodape-site.mapa { grid-template-columns: 1fr 1fr; }
  .mapa-marca { grid-column: 1 / -1; }
  .sub-barra { margin-top: 6px; }
}

/* Atalhos do lobby: o que mais importa, à vista */
.atalhos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.atalho { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; text-decoration: none; color: var(--texto); background: var(--painel); border: 1px solid var(--borda-card, var(--borda)); box-shadow: var(--sombra-card, var(--sombra)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.atalho:hover { transform: translateY(-3px); }
.atalho > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.atalho b { font-size: 14px; }
.atalho small { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atalho-ic { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--rosa); background: rgba(255, 79, 174, 0.12); }
.atalho-ic svg { width: 20px; height: 20px; }
.atalho em { margin-left: auto; color: var(--texto-3); }
.atalho em svg { width: 16px; height: 16px; }
.atalho .aviso-bolinha { position: absolute; top: -6px; right: -6px; box-shadow: 0 0 0 2px var(--solido, #fff); }
.atalho.forte { background: radial-gradient(120% 120% at 0% 0%, rgba(255, 79, 174, 0.28), transparent 60%), var(--painel); border-color: rgba(255, 79, 174, 0.45); }
.atalho.forte .atalho-ic { color: #fff; background: var(--gradiente); box-shadow: 0 6px 14px rgba(255, 61, 154, 0.35); }
@media (max-width: 1180px) { .atalhos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .atalho { padding: 10px; } .atalho small { display: none; } }
/* O painel da categoria passa por cima da subbarra */
.barra-topo { position: relative; z-index: 3; }
.sub-barra { position: relative; z-index: 1; }
/* Cards em grade podem encolher (no celular as tabelas do lobby empurravam a página) */
.grade > * { min-width: 0; }
.grade > .cartao { overflow-x: auto; }
.ao-vivo > * { min-width: 0; }
@media (max-width: 860px) { .ao-vivo { grid-template-columns: minmax(0, 1fr); } }

/* Menu sem tremer: o painel espera um pouco para abrir e para fechar, e a
   categoria atual não abre painel (a subbarra já mostra as páginas dela) */
.barra-topo { isolation: isolate; }
.cat-painel { z-index: 50; transition: opacity 0.18s ease 0.15s, transform 0.18s ease 0.15s, visibility 0s linear 0.33s; }
.cat:hover .cat-painel, .cat:focus-within .cat-painel { transition: opacity 0.18s ease 0.08s, transform 0.18s ease 0.08s, visibility 0s linear 0.08s; }
.cat.ativo .cat-painel { display: none; }

/* Rastro de doces no mouse (js/rastro.js) */
.rastro-doce { position: fixed; z-index: 9999; pointer-events: none; display: grid; place-items: center; transform: translate(-50%, -50%); filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 79, 174, 0.55)); animation: rastro-doce 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.rastro-doce > span { width: 100% !important; filter: none; }
.rastro-doce .bz-bala.azul { height: 80%; }
.rastro-doce .bz-pirulito i { box-shadow: 0 0 0 1.5px #fff; }
.rastro-doce .bz-melancia { box-shadow: inset -2px -3px 0 rgba(0, 0, 0, 0.18); }
.rastro-doce.brilho { background: radial-gradient(circle, #fff 0 18%, transparent 20%), conic-gradient(from 45deg, transparent 0 10%, #fff 12%, transparent 14% 35%, #fff 37%, transparent 39% 60%, #fff 62%, transparent 64% 85%, #fff 87%, transparent 89%); border-radius: 50%; filter: drop-shadow(0 0 5px #fde047) drop-shadow(0 0 8px #ff4fae); }
@keyframes rastro-doce {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(calc(var(--r) * 0.2)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.35) rotate(var(--r)); }
}
.item-rastro { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--texto-2); text-align: left; }
.item-rastro:hover { background: var(--painel-2); color: var(--texto); }
.item-rastro span { flex: 1; }
.chave-liga { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--painel-3); border: 1px solid var(--borda-forte); transition: background 0.2s ease; }
.chave-liga::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; }
.chave-liga.ligada { background: var(--gradiente); border-color: transparent; }
.chave-liga.ligada::after { transform: translateX(14px); }