/* ============================================================
   DOPAMINA | GASTROBAR — SITE
   Depende de ../brand/tokens.css (importado antes deste).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--dp-fundo);
  color: var(--dp-texto);
  font-family: var(--dp-fonte-texto);
  font-size: var(--dp-t-base);
  line-height: var(--dp-leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Todo espaçamento vertical é explícito — sem margem herdada do navegador */
p, ul, ol, dl, figure { margin: 0; }

h1, h2, h3, .display {
  font-family: var(--dp-fonte-display);
  font-weight: 400;
  letter-spacing: var(--dp-tracking-display);
  line-height: var(--dp-leading-tight);
  text-transform: uppercase;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--dp-amarelo-300); outline-offset: 4px; border-radius: 4px; }

.envoltorio {
  position: relative; z-index: 1;
  max-width: var(--dp-largura-max);
  margin-inline: auto;
  padding-left:  max(var(--dp-margem-lateral), env(safe-area-inset-left));
  padding-right: max(var(--dp-margem-lateral), env(safe-area-inset-right));
}

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rotulo {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--dp-t-xs); font-weight: 600;
  letter-spacing: var(--dp-tracking-caps); text-transform: uppercase;
  color: var(--dp-amarelo-300);
}
.rotulo::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }

/* Grão global */
body::after {
  content: ""; position: fixed; inset: -50%;
  pointer-events: none; z-index: 2; opacity: .05;
  background-image: url("../assets/padroes/grao.svg");
  background-size: 320px;
}

/* ============================================================
   ABERTURA DE MARCA (preloader)
   ============================================================ */
.cortina {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--dp-roxo-900);
  transition: opacity .6s var(--dp-ease-saida), visibility .6s;
}
.cortina[data-pronto="sim"] { opacity: 0; visibility: hidden; }
.cortina__marca { width: clamp(90px, 16vw, 150px); color: var(--dp-amarelo-300); animation: respirar 1.6s var(--dp-ease-suave) infinite; }
@keyframes respirar { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.07); opacity: 1; } }

/* ============================================================
   NAVEGAÇÃO
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  transition: background var(--dp-vel-media), backdrop-filter var(--dp-vel-media),
              border-color var(--dp-vel-media);
  border-bottom: 1px solid transparent;
}
.nav[data-solido="sim"] {
  background: color-mix(in srgb, var(--dp-roxo-900) 80%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--dp-borda);
}
.nav__interno { display: flex; align-items: center; gap: var(--dp-e-4); min-height: var(--dp-cabecalho-h); }

.marca { display: flex; align-items: center; gap: .7rem; }
.marca__simbolo { width: 40px; height: 40px; color: var(--dp-amarelo-300); flex: none; }
.marca__nome { font-family: var(--dp-fonte-display); font-size: 1.35rem; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.marca__tipo { font-size: .6rem; letter-spacing: .34em; color: var(--dp-texto-fraco); text-transform: uppercase; }

.nav__links { display: flex; gap: var(--dp-e-5); margin-left: auto; }
.nav__link {
  position: relative;
  font-size: var(--dp-t-sm); font-weight: 500;
  color: var(--dp-texto-suave);
  transition: color var(--dp-vel-rapida);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1.5px; background: var(--dp-amarelo-300);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dp-vel-media) var(--dp-ease-saida);
}
.nav__link:hover { color: var(--dp-texto); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta { margin-left: var(--dp-e-4); }

@media (max-width: 860px) { .nav__links { display: none; } .nav__cta { margin-left: auto; } }

/* ============================================================
   BOTÕES
   ============================================================ */
.botao {
  --bt-fundo: transparent; --bt-cor: var(--dp-texto); --bt-borda: rgba(255,255,255,.16);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.5rem;
  border-radius: var(--dp-r-pill);
  background: var(--bt-fundo); color: var(--bt-cor);
  border: 1px solid var(--bt-borda);
  font-size: var(--dp-t-sm); font-weight: 600; white-space: nowrap;
  transition: transform var(--dp-vel-rapida) var(--dp-ease-saida),
              background var(--dp-vel-rapida), border-color var(--dp-vel-rapida),
              box-shadow var(--dp-vel-media) var(--dp-ease-saida);
}
.botao svg { width: 18px; height: 18px; flex: none; }
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(.98); }

.botao--ouro { --bt-fundo: var(--dp-grad-ouro); --bt-cor: var(--dp-sobre-destaque); --bt-borda: transparent; font-weight: 700; }
.botao--ouro:hover { box-shadow: var(--dp-brilho-ouro); }
.botao--ouro::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform var(--dp-vel-lenta) var(--dp-ease-saida);
}
.botao--ouro:hover::after { transform: translateX(130%); }
.botao--fantasma:hover { --bt-fundo: rgba(255,255,255,.06); --bt-borda: var(--dp-borda-forte); }

/* ============================================================
   HERO
   ============================================================ */
.heroi {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--dp-cabecalho-h) + 3rem) 0 var(--dp-e-8);
  overflow: hidden;
}

/* Orbes de luz — animação lenta e barata (só transform/opacity) */
.orbe {
  position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none; z-index: 0;
  will-change: transform;
}
.orbe--1 { width: 46vw; height: 46vw; left: -12vw; top: -8vw;  background: rgba(74,26,102,.75);  animation: flutuar1 22s var(--dp-ease-suave) infinite; }
.orbe--2 { width: 34vw; height: 34vw; right: -8vw; top: 14vh;  background: rgba(250,204,21,.14); animation: flutuar2 27s var(--dp-ease-suave) infinite; }
.orbe--3 { width: 40vw; height: 40vw; left: 26vw; bottom: -18vw; background: rgba(107,42,143,.55); animation: flutuar1 31s var(--dp-ease-suave) infinite reverse; }

@keyframes flutuar1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6%, 8%) scale(1.14); } }
@keyframes flutuar2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-8%, 6%) scale(1.2); } }

.heroi__grade {
  display: grid; align-items: center; gap: var(--dp-e-6);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}
@media (max-width: 900px) { .heroi__grade { grid-template-columns: 1fr; } }

.heroi__titulo { font-size: var(--dp-t-3xl); }
.heroi__titulo em {
  font-style: normal;
  background: var(--dp-grad-ouro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.heroi__texto {
  max-width: 46ch; margin-top: var(--dp-e-5);
  color: var(--dp-texto-suave); font-size: var(--dp-t-md);
}
.heroi__acoes { display: flex; flex-wrap: wrap; gap: var(--dp-e-3); margin-top: var(--dp-e-6); }

.heroi__mascote {
  color: var(--dp-amarelo-300);
  filter: drop-shadow(0 24px 60px rgba(250,204,21,.22));
  will-change: transform;
}
@media (max-width: 900px) { .heroi__mascote { max-width: 320px; margin-inline: auto; } }

/* Palavras entram uma a uma */
.palavra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* folga no topo: sem ela o overflow corta o acento de Á, Í, Õ */
  padding-block: .14em .04em;
  margin-block: -.14em -.04em;
}
.palavra > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .9s var(--dp-ease-saida);
  transition-delay: var(--atraso, 0ms);
}
.pronto .palavra > span { transform: none; }

.rolar {
  position: absolute; left: 50%; bottom: 26px; z-index: 1;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: var(--dp-t-xs); letter-spacing: var(--dp-tracking-caps);
  text-transform: uppercase; color: var(--dp-texto-fraco);
}
.rolar__trilho {
  width: 1px; height: 42px;
  background: linear-gradient(var(--dp-amarelo-300), transparent);
  animation: descer 2.2s var(--dp-ease-suave) infinite;
  transform-origin: top;
}
@keyframes descer { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============================================================
   LETREIRO (marquee)
   ============================================================ */
.letreiro {
  position: relative;
  display: flex; overflow: hidden;
  padding: var(--dp-e-4) 0;
  border-block: 1px solid var(--dp-borda);
  background: rgba(250,204,21,.04);
  user-select: none;
}
.letreiro__trilha {
  display: flex; flex: none; gap: var(--dp-e-5);
  padding-right: var(--dp-e-5);
  animation: correr 34s linear infinite;
}
.letreiro:hover .letreiro__trilha { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-100%); } }

.letreiro__item {
  display: inline-flex; align-items: center; gap: var(--dp-e-5);
  font-family: var(--dp-fonte-display); font-size: var(--dp-t-lg);
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--dp-texto-suave); white-space: nowrap;
}
.letreiro__item svg { width: 22px; height: 22px; color: var(--dp-amarelo-300); flex: none; }

/* ============================================================
   SEÇÕES
   ============================================================ */
.secao { padding: clamp(4rem, 11vw, 9rem) 0; position: relative; }
.secao__cabeca { max-width: 62ch; margin-bottom: var(--dp-e-7); }
.secao__titulo { font-size: var(--dp-t-2xl); margin-top: var(--dp-e-3); }
.secao__texto { color: var(--dp-texto-suave); margin-top: var(--dp-e-4); font-size: var(--dp-t-md); }

/* ---------- Sobre ---------- */
.sobre__grade { display: grid; gap: var(--dp-e-7); grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; }
@media (max-width: 860px) { .sobre__grade { grid-template-columns: 1fr; } }

.declaracao {
  font-family: var(--dp-fonte-display);
  font-size: var(--dp-t-xl);
  text-transform: uppercase;
  line-height: 1.05;
}
.declaracao em { font-style: normal; color: var(--dp-amarelo-300); }

.numeros { display: grid; gap: var(--dp-e-4); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: var(--dp-e-6); }
.numero {
  padding: var(--dp-e-4);
  border-radius: var(--dp-r-md);
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(158deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.numero__valor {
  font-family: var(--dp-fonte-display); font-size: var(--dp-t-xl);
  color: var(--dp-amarelo-300); font-variant-numeric: tabular-nums; line-height: 1;
}
.numero__rotulo { font-size: var(--dp-t-xs); color: var(--dp-texto-fraco); text-transform: uppercase; letter-spacing: .12em; margin-top: .5rem; }

/* ---------- Destaques ---------- */
.trilho {
  display: grid; gap: var(--dp-e-4);
  grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 1fr);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--dp-e-3);
  scrollbar-width: thin;
  scrollbar-color: var(--dp-roxo-400) transparent;
}
.trilho::-webkit-scrollbar { height: 6px; }
.trilho::-webkit-scrollbar-thumb { background: var(--dp-roxo-400); border-radius: 99px; }

.destaque {
  scroll-snap-align: start;
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--dp-e-5);
  border-radius: var(--dp-r-lg);
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(158deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  overflow: hidden;
  transition: transform var(--dp-vel-media) var(--dp-ease-saida),
              border-color var(--dp-vel-media), box-shadow var(--dp-vel-media);
}
.destaque:hover { transform: translateY(-5px); border-color: var(--dp-borda-forte); box-shadow: var(--dp-sombra-md); }
.destaque__categoria { font-size: var(--dp-t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--dp-amarelo-300); }
.destaque__nome {
  font-family: var(--dp-fonte-texto);
  text-transform: none;
  font-size: var(--dp-t-md);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-top: .55rem;
}
.destaque__descricao { color: var(--dp-texto-suave); font-size: var(--dp-t-sm); margin-top: .5rem; flex: 1; }
.destaque__preco {
  font-family: var(--dp-fonte-display); font-size: var(--dp-t-lg);
  color: var(--dp-amarelo-300); margin-top: var(--dp-e-4);
  font-variant-numeric: tabular-nums;
}
.destaque__marca {
  position: absolute; right: -22px; bottom: -22px;
  width: 118px; color: var(--dp-amarelo-300); opacity: .06;
  pointer-events: none;
}

/* ---------- Horários ---------- */
.horarios { display: grid; gap: 0; max-width: 620px; }
.horario {
  display: flex; align-items: center; gap: var(--dp-e-4);
  padding: var(--dp-e-4) 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.horario:first-child { border-top: 1px solid rgba(255,255,255,.07); }
.horario__dias { font-weight: 600; }
.horario__faixa { margin-left: auto; font-family: var(--dp-fonte-display); font-size: var(--dp-t-md); color: var(--dp-amarelo-300); font-variant-numeric: tabular-nums; }
.horario[data-fechado="sim"] .horario__faixa { color: var(--dp-texto-fraco); font-family: var(--dp-fonte-texto); font-size: var(--dp-t-sm); }
.horario[data-hoje="sim"] { position: relative; }
.horario[data-hoje="sim"]::before {
  content: "hoje"; position: absolute; left: -3.4rem; top: 50%;
  transform: translateY(-50%);
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dp-amarelo-300);
}
@media (max-width: 620px) { .horario[data-hoje="sim"]::before { display: none; } }

/* ---------- Localização ---------- */
.local { display: grid; gap: var(--dp-e-6); grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; }
@media (max-width: 860px) { .local { grid-template-columns: 1fr; } }

.mapa {
  position: relative; aspect-ratio: 4/3;
  border-radius: var(--dp-r-lg);
  border: 1px solid var(--dp-borda);
  background: var(--dp-grad-avatar);
  display: grid; place-items: center;
  overflow: hidden;
  text-align: center; padding: var(--dp-e-5);
}
.mapa::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/padroes/pontos.svg");
  background-size: 30px; color: var(--dp-roxo-300); opacity: .35;
}
.mapa__pino { width: 54px; color: var(--dp-amarelo-300); margin: 0 auto var(--dp-e-3); animation: pular 2.6s var(--dp-ease-elast) infinite; }
@keyframes pular { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.mapa__conteudo { position: relative; }

/* ---------- Chamada final ---------- */
.chamada {
  position: relative;
  text-align: center;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.4rem, 5vw, 4rem);
  border-radius: var(--dp-r-xl);
  border: 1px solid var(--dp-borda-forte);
  background: var(--dp-grad-avatar);
  overflow: hidden;
}
.chamada__raios {
  position: absolute; inset: -30%;
  color: var(--dp-amarelo-300);
  background-image: url("../assets/padroes/raios.svg");
  background-size: cover; background-position: center;
  animation: girar 90s linear infinite;
  pointer-events: none;
}
@keyframes girar { to { transform: rotate(360deg); } }
.chamada__conteudo { position: relative; }
.chamada__titulo { font-size: var(--dp-t-2xl); }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: var(--dp-e-3); justify-content: center; margin-top: var(--dp-e-6); }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--dp-borda); padding: var(--dp-e-7) 0 var(--dp-e-6); }
.rodape__grade { display: grid; gap: var(--dp-e-5); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rodape__titulo { font-size: var(--dp-t-xs); font-weight: 700; letter-spacing: var(--dp-tracking-caps); text-transform: uppercase; color: var(--dp-amarelo-300); margin-bottom: var(--dp-e-3); }
.rodape p, .rodape li { color: var(--dp-texto-suave); font-size: var(--dp-t-sm); margin: 0 0 .35rem; }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape__creditos {
  margin-top: var(--dp-e-6); padding-top: var(--dp-e-4);
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-wrap: wrap; gap: var(--dp-e-3);
  color: var(--dp-texto-fraco); font-size: var(--dp-t-xs);
}
.aviso-bebida {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; margin-top: var(--dp-e-4);
  border-radius: var(--dp-r-md);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  font-size: var(--dp-t-xs); color: var(--dp-texto-fraco);
}

/* ============================================================
   REVELAÇÃO NO SCROLL
   ============================================================ */
.revelar { opacity: 0; transform: translateY(26px); }
.revelar.visivel {
  opacity: 1; transform: none;
  transition: opacity .85s var(--dp-ease-saida), transform .85s var(--dp-ease-saida);
  transition-delay: var(--atraso, 0ms);
}

/* Sem movimento: nada entra deslizando nem fica invisível */
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
  .palavra > span { transform: none; }
  .orbe, .letreiro__trilha, .chamada__raios, .rolar__trilho, .mapa__pino { animation: none; }
}

/* ============================================================
   AJUSTES DE CELULAR
   ============================================================ */
@media (max-width: 640px) {
  /* Carrossel de destaques sangra até a borda, com o primeiro e o último
     cartão alinhados ao conteúdo — mesma lógica das abas do cardápio. */
  .trilho {
    margin-inline: calc(-1 * var(--dp-margem-lateral));
    padding-inline: var(--dp-margem-lateral);
    scroll-padding-inline: var(--dp-margem-lateral);
    grid-auto-columns: minmax(min(78vw, 300px), 1fr);
  }

  .destaque { padding: 1.15rem; }

  /* O marcador "hoje" fica fora da caixa no desktop; no celular vira selo inline */
  .horario[data-hoje="sim"]::before {
    position: static;
    transform: none;
    margin-right: .5rem;
    padding: .1rem .4rem;
    border: 1px solid currentColor;
    border-radius: var(--dp-r-pill);
  }
  .horario[data-hoje="sim"] { flex-wrap: wrap; }
}

@media (max-width: 400px) {
  .rodape__grade { grid-template-columns: 1fr; }
  .heroi__acoes .botao { width: 100%; }
}