/* ==========================================================================
   BOMBAR CRUZ — COMPONENTES
   Botões, navegação, cartões, molduras de foto, selos, rodapé.
   ========================================================================== */

/* ---------------------------------------------------------------- botão -- */

.btn {
  --btn-bg: var(--dourado);
  --btn-cor: var(--preto);
  --btn-borda: var(--dourado);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: 1.05em 1.9em;
  background: var(--btn-bg);
  color: var(--btn-cor);
  border: 1px solid var(--btn-borda);
  border-radius: var(--r-2);
  font-size: var(--t-peq);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--padrao) var(--curva),
    box-shadow var(--padrao) var(--curva),
    background-color var(--padrao) var(--curva),
    color var(--padrao) var(--curva),
    border-color var(--padrao) var(--curva);
}

.btn:hover {
  transform: translateY(-2px) scale(1.014);
  box-shadow: 0 10px 28px -12px rgba(201, 162, 39, .55);
}

.btn:active { transform: translateY(0) scale(.995); }

/* Secundário: transparente, borda e texto dourados. */
.btn--linha {
  --btn-bg: transparent;
  --btn-cor: var(--dourado);
  --btn-borda: var(--linha-forte);
}
.btn--linha:hover {
  --btn-borda: var(--dourado);
  background: rgba(201, 162, 39, .09);
  box-shadow: 0 10px 26px -14px rgba(201, 162, 39, .4);
}

/* Âmbar: reservado a drinks e gastronomia. */
.btn--ambar { --btn-bg: var(--ambar); --btn-borda: var(--ambar); }
.btn--ambar:hover { box-shadow: 0 10px 28px -12px rgba(216, 137, 37, .6); }

/* Sobre fotografia escura. */
.btn--claro {
  --btn-bg: transparent;
  --btn-cor: var(--branco-quente);
  --btn-borda: rgba(247, 243, 232, .38);
}
.btn--claro:hover {
  --btn-borda: var(--branco-quente);
  background: rgba(247, 243, 232, .1);
}

.btn--bloco { width: 100%; }

.btn svg { width: 17px; height: 17px; flex: none; }

.btn-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
}

/* Link de texto com sublinhado que cresce. */
.link-fio {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: var(--t-peq);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dourado);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--dourado), var(--dourado));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 24% 1px;
  transition: background-size var(--padrao) var(--curva), color var(--padrao) var(--curva);
}
.link-fio:hover { background-size: 100% 1px; }
.link-fio svg { width: 15px; height: 15px; transition: transform var(--padrao) var(--curva); }
.link-fio:hover svg { transform: translateX(4px); }

/* ----------------------------------------------------------------- selo -- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .48em 1em;
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
  background: rgba(201, 162, 39, .07);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dourado);
  line-height: 1;
}

.selo--ambar {
  color: var(--ambar);
  border-color: rgba(216, 137, 37, .35);
  background: rgba(216, 137, 37, .09);
}

.selo--pendente {
  color: var(--texto-tenue);
  border-color: var(--linha-fraca);
  background: rgba(247, 243, 232, .04);
}

.selo--vivo::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulso 2.6s var(--curva) infinite;
}

@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(216, 137, 37, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(216, 137, 37, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 137, 37, 0); }
}

/* --------------------------------------------------------------- moldura -- */
/* Contêiner padrão de fotografia: recorte, tratamento e zoom sutil.        */

.moldura {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-3);
  background: var(--verde-escuro);
  isolation: isolate;
}

.moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--trato-foto);
  transition: transform 900ms var(--curva), filter var(--lento) var(--curva);
}

.moldura::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grao);
  opacity: .045;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

/* Fio dourado interno — assinatura discreta nas fotos. */
.moldura--fio::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(241, 230, 200, .14);
  border-radius: var(--r-2);
  pointer-events: none;
  z-index: 3;
  transition: border-color var(--lento) var(--curva), inset var(--lento) var(--curva);
}
.moldura--fio:hover::before { border-color: var(--linha-forte); }

a.moldura:hover img,
.moldura-zoom:hover img,
.cartao:hover .moldura img {
  transform: scale(1.045);
  filter: var(--trato-foto-quente);
}

/* Proporções reutilizáveis. */
.prop-retrato  { aspect-ratio: 4 / 5; }
.prop-quadro   { aspect-ratio: 1 / 1; }
.prop-paisagem { aspect-ratio: 3 / 2; }
.prop-alta     { aspect-ratio: 3 / 4; }
.prop-cinema   { aspect-ratio: 16 / 9; }

/* -------------------------------------------------------------- cartão --- */

.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--verde-escuro);
  border: 1px solid var(--linha-fraca);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: border-color var(--padrao) var(--curva), transform var(--padrao) var(--curva),
              box-shadow var(--padrao) var(--curva);
}

.cartao:hover {
  border-color: var(--linha);
  transform: translateY(-3px);
  box-shadow: var(--s-media);
}

.cartao__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5) var(--e-5) var(--e-6);
  flex: 1;
}

.cartao__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
}

.cartao__nome {
  font-family: var(--fonte-display);
  font-size: 1.3rem;
  line-height: 1.16;
  color: var(--branco-quente);
}

.cartao__desc {
  font-size: .93rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

.cartao__selo {
  align-self: flex-start;
  margin-bottom: var(--e-1);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dourado);
}

/* Cartão de abertura da categoria: ocupa duas colunas e vira deitado no
   desktop. É ele que dá o ritmo editorial da grade do cardápio. */
.cartao--largo .cartao__nome { font-size: 1.75rem; }
.cartao--largo .cartao__desc { font-size: 1rem; max-width: 46ch; }

@media (min-width: 900px) {
  /* Altura fixa: sem ela a foto assume a proporção natural e o cartão de
     abertura fica mais alto que a categoria inteira embaixo dele. */
  .cartao--largo {
    flex-direction: row;
    align-items: stretch;
    height: clamp(320px, 27vw, 400px);
  }
  .cartao--largo .moldura {
    flex: 0 0 48%;
    aspect-ratio: auto;
    height: 100%;
    border-radius: 0;
  }
  .cartao--largo .cartao__corpo {
    justify-content: center;
    padding: var(--e-6) var(--e-6) var(--e-6) var(--e-5);
    gap: var(--e-3);
  }
}

/* Preço — dourado, tabular, alinhado à direita. */
.preco {
  flex: none;
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  color: var(--dourado);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.preco--pendente {
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* Linha pontilhada entre nome e preço, como em cardápio impresso. */
.cartao__topo--fio { align-items: flex-end; }
.cartao__topo--fio .cartao__nome { position: relative; }

/* --------------------------------------------------------------- navbar -- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--padrao) var(--curva),
              border-color var(--padrao) var(--curva),
              box-shadow var(--padrao) var(--curva);
}

.nav.encolhida {
  background: rgba(8, 38, 31, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linha);
  box-shadow: 0 10px 30px -22px rgba(4, 12, 9, .9);
}

.nav__env {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--borda-pagina);
}

.nav__marca { display: flex; align-items: center; min-height: 44px; flex: none; }
.nav__marca img {
  height: clamp(30px, 4.2vw, 38px);
  width: auto;
  transition: height var(--padrao) var(--curva);
}
.nav.encolhida .nav__marca img { height: clamp(26px, 3.6vw, 32px); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(var(--e-4), 2.1vw, var(--e-6));
}

.nav__link {
  position: relative;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  padding-block: var(--e-2);
  transition: color var(--padrao) var(--curva);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--padrao) var(--curva);
}

.nav__link:hover,
.nav__link.ativo { color: var(--creme); }
.nav__link:hover::after,
.nav__link.ativo::after { transform: scaleX(1); }
.nav__link.ativo { color: var(--dourado); }

.nav__acoes { display: flex; align-items: center; gap: var(--e-3); flex: none; }
.nav__acoes .btn { padding: .85em 1.35em; font-size: var(--t-micro); }

/* Botão hambúrguer */
.nav__abrir {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linha);
  border-radius: var(--r-2);
  color: var(--creme);
  flex: none;
  transition: border-color var(--padrao) var(--curva), background-color var(--padrao) var(--curva);
}
.nav__abrir:hover { border-color: var(--dourado); background: rgba(201, 162, 39, .08); }

.nav__abrir span {
  display: block;
  position: relative;
  width: 19px; height: 1.5px;
  background: currentColor;
  transition: background-color var(--rapido) var(--curva);
}
.nav__abrir span::before,
.nav__abrir span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px; height: 1.5px;
  background: currentColor;
  transition: transform var(--padrao) var(--curva);
}
.nav__abrir span::before { top: -6px; }
.nav__abrir span::after  { top:  6px; }

.menu-aberto .nav__abrir span { background: transparent; }
.menu-aberto .nav__abrir span::before { transform: translateY(6px) rotate(45deg); }
.menu-aberto .nav__abrir span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Painel mobile */
.painel {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 99;
  background: var(--verde-profundo);
  padding: var(--e-7) var(--borda-pagina) var(--e-8);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* visibility com atraso só na saída: assim ela vira "visible" no mesmo
     instante da abertura e o foco consegue entrar no primeiro link. */
  transition: opacity var(--padrao) var(--curva), transform var(--padrao) var(--curva),
              visibility 0s linear var(--padrao);
}

.menu-aberto .painel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--padrao) var(--curva), transform var(--padrao) var(--curva),
              visibility 0s linear 0s;
}

.painel__link {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--linha-fraca);
  font-family: var(--fonte-display);
  font-size: 1.75rem;
  color: var(--creme);
  transition: color var(--padrao) var(--curva), padding-left var(--padrao) var(--curva);
}
.painel__link:hover { color: var(--dourado); padding-left: var(--e-2); }

.painel__num {
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--dourado);
  opacity: .65;
}

.painel__pe { margin-top: auto; padding-top: var(--e-6); display: grid; gap: var(--e-3); }

/* Celular baixo: o menu inteiro precisa caber sem rolagem interna. */
@media (max-width: 980px) and (max-height: 900px) {
  .painel { padding-block: var(--e-5) var(--e-6); }
  .painel__link { font-size: 1.5rem; padding-block: var(--e-3); }
  .painel__pe { padding-top: var(--e-5); }
}

/* O selo de "aberto agora" abre o rodapé do menu: é a primeira dúvida de
   quem abre o site do celular às onze da noite. */
.painel__agora { margin-bottom: var(--e-2); }
.painel__agora:empty { display: none; }

/* ------------------------------------------------------------- marquee --- */

.faixa {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--linha);
  background: var(--preto);
  padding-block: var(--e-4);
}

.faixa__trilha {
  display: flex;
  width: max-content;
  animation: correr 42s linear infinite;
}

.faixa:hover .faixa__trilha { animation-play-state: paused; }

.faixa__grupo {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  padding-right: var(--e-6);
  flex: none;
}

.faixa__item {
  font-family: var(--fonte-display);
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--creme);
  white-space: nowrap;
}

.faixa__ponto { color: var(--dourado); flex: none; width: 18px; }

@keyframes correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .faixa__trilha { animation: none; }
}

/* ------------------------------------------------------- whatsapp flutua -- */

.zap {
  position: fixed;
  right: clamp(1rem, 3.5vw, 1.75rem);
  bottom: clamp(1rem, 3.5vw, 1.75rem);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4);
  background: var(--ambar);
  color: var(--preto);
  border-radius: var(--r-pill);
  box-shadow: 0 14px 34px -12px rgba(4, 12, 9, .8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.94);
  transition: opacity var(--padrao) var(--curva), transform var(--padrao) var(--curva),
              visibility 0s linear var(--padrao), box-shadow var(--padrao) var(--curva);
}

.zap.visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--padrao) var(--curva), transform var(--padrao) var(--curva),
              visibility 0s linear 0s, box-shadow var(--padrao) var(--curva);
}
.zap:hover { box-shadow: 0 18px 40px -12px rgba(216, 137, 37, .6); transform: scale(1.04); }
.zap svg { width: 26px; height: 26px; flex: none; }

.zap__texto {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-right: var(--e-2);
}

/* ---------------------------------------------------------------- rodapé -- */

.rodape {
  position: relative;
  background: var(--preto);
  border-top: 1px solid var(--linha);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) var(--e-6);
}

.rodape__grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.rodape__marca img { height: 46px; width: auto; margin-bottom: var(--e-5); }

.rodape__endereco {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linha-fraca);
  max-width: 34ch;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--texto-tenue);
}

.rodape__titulo {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: var(--e-4);
}

.rodape__lista { display: grid; gap: var(--e-3); }

.rodape__lista a {
  font-size: .92rem;
  color: var(--texto-suave);
  transition: color var(--padrao) var(--curva), transform var(--padrao) var(--curva);
  width: fit-content;
}
.rodape__lista a:hover { color: var(--dourado); transform: translateX(3px); }

.rodape__base {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linha-fraca);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

/* A assinatura é larga por causa do letter-spacing: em tela estreita ela
   precisa poder quebrar, senão empurra a página inteira para o lado. */
.rodape__assinatura {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  font-family: var(--fonte-display);
  font-size: .95rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dourado);
}

@media (max-width: 400px) {
  .rodape__assinatura { font-size: .85rem; letter-spacing: .18em; }
}

.rodape__mini {
  font-size: var(--t-micro);
  color: var(--texto-tenue);
  letter-spacing: .06em;
}

.rodape__social { display: flex; gap: var(--e-3); }

.rodape__social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  color: var(--creme);
  transition: color var(--padrao) var(--curva), border-color var(--padrao) var(--curva),
              background-color var(--padrao) var(--curva), transform var(--padrao) var(--curva);
}
.rodape__social a:hover {
  color: var(--preto);
  background: var(--dourado);
  border-color: var(--dourado);
  transform: translateY(-2px);
}
.rodape__social svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}

/* No toque, os links do rodapé ganham área suficiente para o dedo. */
@media (max-width: 760px) {
  .rodape__lista { gap: var(--e-1); }
  .rodape__lista a { padding-block: .5rem; }
}

/* ------------------------------------------------------------- fichinha -- */
/* Miniatura do cartão de bebida do Meu BomBar. É desenho, não foto: explica
   a funcionalidade em três linhas sem precisar de print de tela.            */

.fichinha {
  position: relative;
  width: min(100%, 340px);
  padding: var(--e-6) var(--e-5) var(--e-5);
  background: linear-gradient(160deg, var(--verde-escuro), var(--verde-vinheta));
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  box-shadow: var(--s-alta);
}

.fichinha::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(201, 162, 39, .16);
  border-radius: var(--r-2);
  pointer-events: none;
}

.fichinha__topo {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dourado);
}
.fichinha__topo span { opacity: .55; }

.fichinha__nome {
  font-family: var(--fonte-display);
  font-size: 1.6rem;
  color: var(--branco-quente);
  margin-block: var(--e-4) var(--e-5);
}

.fichinha__barra {
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(247, 243, 232, .1);
  overflow: hidden;
}
.fichinha__barra span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--dourado-escuro), var(--dourado));
}

.fichinha__pe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-3);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.fichinha__pe strong {
  font-family: var(--fonte-display);
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dourado);
}

.fichinha__nota {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linha-fraca);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* Ícone do CTA da navbar, proporcional ao texto menor daqui. Como ele é mais
   alto que a linha do texto, os botões da navbar recebem uma altura comum para
   "Cardápio" e "Meu BomBar" ficarem alinhados lado a lado. */
.nav__acoes .btn svg { width: 15px; height: 15px; }
.nav__acoes .btn { min-height: 37px; }

/* Breakpoints da navbar medidos a partir da largura real dos elementos:
   logo + menu + ações somam 964px (1072px de viewport com as bordas),
   e 844px sem o botão "Cardápio" (938px de viewport). */

@media (max-width: 1100px) {
  .nav__acoes .btn--linha { display: none; }
  /* Sozinho na navbar e em território de toque: alvo de 44px.
     Acima disso ele fica alinhado ao botão "Cardápio" ao lado. */
  .nav__acoes .nav__club { min-height: 44px; }

  /* Com o Club desligado não há dois botões disputando espaço, então
     "Cardápio" cabe até o ponto em que o menu vira hambúrguer. */
  .sem-club .nav__acoes .btn--linha { display: inline-flex; min-height: 44px; }
}

@media (max-width: 980px) {
  .sem-club .nav__acoes .btn--linha { display: none; }
}

@media (max-width: 980px) {
  .nav__menu { display: none; }
  .nav__abrir { display: flex; }
}

/* Em telas muito estreitas o CTA vira só o ícone, em vez de sumir:
   é a ação principal da navbar e precisa continuar alcançável. */
@media (max-width: 359px) {
  .nav__club-texto { display: none; }
  .nav__acoes .btn { padding-inline: .95em; }
}

@media (max-width: 460px) {
  .zap__texto { display: none; }
}

/* Tela estreita: rótulo comprido quebra em duas linhas em vez de estourar a
   borda. O CTA da navbar fica de fora porque ele mora numa barra de altura
   fixa e já vira só ícone abaixo de 360px. */
@media (max-width: 430px) {
  .btn:not(.nav__club) {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
}