/* ============================================================================
   DISTRITO 051 · conveniência, Vila São João, Torres/RS

   A cor vem do logo deles, medida pixel a pixel: #006EFB puro. O logo não
   tem meio-tom: é azul chapado, letra pesada com recorte de pincel, coroa
   em cima. O site segue isso: nada de gradiente, nada de sombra colorida.

   A vitrine é branca de propósito. Produto se lê melhor sobre branco, e é
   assim que a prateleira é na loja.
   ============================================================================ */

:root{
  --azul:        #006EFB;
  --azul-fundo:  #0057c8;
  --azul-claro:  #e8f1ff;

  --preto:       #0a0c10;
  --preto-2:     #141821;
  --tinta:       #11141a;
  --tinta-media: #474e5a;
  --tinta-fraca: #79808d;
  --linha:       #e4e7ec;
  --branco:      #ffffff;
  --cinza:       #f6f7f9;

  --zap:         #25D366;
  --zap-fundo:   #1da851;
  --alerta:      #d93b3b;
  --verde:       #1d9c4f;
  --ouro:        #f5a623;

  --raio:        14px;
  --sombra:      0 1px 2px rgba(10,12,16,.05), 0 6px 22px rgba(10,12,16,.07);
  --topo-alt:    62px;
  /* Salvo na tela de início do iPhone, o site ocupa a tela inteira e a barra
     de status (hora, bateria) fica POR CIMA dele: `black-translucent` +
     `viewport-fit=cover`. Sem somar esta faixa, o nome e o botão ficam
     embaixo do relógio. No navegador comum ela vale 0 e nada muda. */
  --seguro-topo: env(safe-area-inset-top, 0px);
  --topo-total:  calc(var(--topo-alt) + var(--seguro-topo));
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--branco);
  color:var(--tinta);
  font-family:'Archivo', system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.55;
  padding-bottom:96px;
}

h1,h2,h3{ margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; font-size:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:3px solid var(--azul);
  outline-offset:2px;
}

.env{ max-width:1080px; margin:0 auto; padding:0 20px; }
.env-fino{ max-width:760px; margin:0 auto; padding:0 20px; }

/* =========================== BARRA DE TOPO =========================== */

.barra-topo{
  position:fixed; top:0; left:0; right:0; z-index:70;
  height:var(--topo-total);
  padding-top:var(--seguro-topo);
  display:flex; align-items:center;
  background:transparent;
  transition:background .25s, box-shadow .25s;
}
.barra-topo.solida{
  /* No iPhone a hora e a bateria são BRANCAS (black-translucent). Com a
     barra branca embaixo elas sumiriam: a faixa delas fica azul. No
     navegador comum a faixa tem 0px e o fundo é só o branco. */
  background:linear-gradient(var(--azul) var(--seguro-topo), rgba(255,255,255,.97) var(--seguro-topo));
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--linha);
}
.bt-env{
  max-width:1080px; width:100%; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.bt-logo{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }
.barra-topo.solida .bt-logo{ color:var(--azul); }
/* O SVG do logo é injetado dentro deste span. Sem dar tamanho AO SPAN, o
   SVG herda a largura do pai e estoura: o logo é alto e estreito, então a
   conta de altura automática o faz crescer sem limite. */
/* O logo é alto e estreito (proporção de 0,37): em qualquer altura que
   caiba numa barra de 62px ele vira um risco de 14px de largura, e as
   letras somem. Na barra fica só o nome escrito, que se lê. O logo em si
   aparece grande no rodapé, onde há espaço para ele. */
#logo-topo{ display:none; }
.bt-nome{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:15px; text-transform:uppercase; letter-spacing:-.2px;
  line-height:1;
}
.bt-nome small{
  display:block; font-size:9.5px; letter-spacing:1.6px;
  font-family:'Archivo',sans-serif; font-weight:600;
  opacity:.75; margin-top:2px;
}

.bt-dir{ display:flex; align-items:center; gap:10px; }

/* o botão de menu */
.hamb{
  width:42px; height:42px;
  border:0; border-radius:11px;
  background:rgba(255,255,255,.16);
  display:grid; place-items:center; gap:0;
  backdrop-filter:blur(4px);
}
.barra-topo.solida .hamb{ background:var(--cinza); }
.hamb span{
  display:block; width:19px; height:2px; border-radius:2px;
  background:#fff;
  transition:transform .22s, opacity .18s;
}
.barra-topo.solida .hamb span{ background:var(--tinta); }
.hamb span + span{ margin-top:4px; }
.hamb.aberto span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamb.aberto span:nth-child(2){ opacity:0; }
.hamb.aberto span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* o menu que desce */
/* ---- links na barra, so em tela larga ---- */

.bt-links{ display:none; }
@media (min-width:960px){
  .bt-links{
    display:flex;
    align-items:center;
    gap:26px;
    margin-right:22px;
  }
  .bt-links a{
    color:rgba(255,255,255,.88);
    text-decoration:none;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:.01em;
    white-space:nowrap;
    transition:color .18s;
  }
  .bt-links a:hover{ color:var(--azul-claro, #4da3ff); }
  /* Com os links a mostra, o botao de gaveta nao tem mais o que abrir. */
  .hamb{ display:none; }
}

.menu{
  position:fixed; top:var(--topo-total); left:0; right:0; z-index:69;
  background:var(--branco);
  border-bottom:1px solid var(--linha);
  box-shadow:0 12px 30px rgba(10,12,16,.12);
  /* Escondida ACIMA da tela inteira, não só 120% da própria altura: com a
     faixa da barra de status somada ao topo, os 20% de folga não bastavam
     e a borda branca do menu aparecia atrás do relógio do iPhone. */
  transform:translateY(calc(-100% - var(--topo-total) - 20px));
  visibility:hidden;
  transition:transform .26s cubic-bezier(.3,.8,.4,1), visibility 0s linear .26s;
}
.menu.aberto{ transform:translateY(0); visibility:visible; transition-delay:0s; }
.menu-env{ max-width:1080px; margin:0 auto; padding:14px 20px 20px; }
.menu a{
  display:block;
  padding:13px 2px;
  font-size:17px; font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--linha);
}
.menu a:last-of-type{ border-bottom:0; }
.menu a:hover{ color:var(--azul); }

/* ================================ HERO ================================ */

.hero{
  position:relative;
  min-height:min(96vh, 760px);
  display:flex; align-items:flex-end;
  background:var(--azul);
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* Numa tela larga o `cover` corta em cima e embaixo; ancorar no
     centro-alto mantém a fachada e o letreiro visíveis, que é o que
     importa. Se trocar o vídeo e o enquadramento sair errado, é este
     segundo número que se mexe: 0% mostra o topo, 100% o pé. */
  object-position:center 38%;
}
/* No celular, a tela é mais alta que larga: o corte vira lateral, e aí o
   centro é o lugar certo. */
@media (max-width:620px){
  .hero-video{ object-position:center center; }
}
/* O vídeo dos sócios é vertical (9:16) e deve aparecer INTEIRO, sem corte
   (pedido do Arthur, 28/10). Em tela larga ele vira um quadro vertical à
   direita, na altura do bloco; no celular o bloco ganha a proporção do
   próprio vídeo, e o `cover` não tem o que cortar. */
@media (min-width:900px){
  .hero-video{
    inset:0 max(20px, calc(50% - 540px)) 0 auto;
    width:auto; height:100%;
    aspect-ratio:9 / 16;
    object-fit:cover; object-position:center;
  }
}
@media (max-width:899px){
  .hero{ min-height:min(96vh, 177.78vw); }
}
/* Fundo desfocado: some no celular, onde o vídeo já preenche tudo. */
.hero-fundo{ display:none; }
@media (min-width:900px){
  .hero-fundo{
    display:block;
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    filter:blur(38px) saturate(1.1);
    transform:scale(1.25);          /* esconde a borda esmaecida do blur */
    pointer-events:none;
  }
}
.hero-veu{
  position:absolute; inset:0;
  /* Três véus somados: um vertical, que escurece o topo onde fica a barra
     de navegação e o pé onde começa a próxima seção; um horizontal, que
     só escurece o lado do texto e deixa a vitrine da loja à mostra; e um
     radial no canto inferior direito.

     Esse radial existe por decisão do Arthur em 24/10/2026, mesma lógica
     já registrada no CLAUDE.md do workspace sobre o vídeo da JF: o vídeo
     do hero é gerado por IA (Gemini/Veo), e o canto inferior direito é
     onde esse tipo de vídeo costuma trazer a marca d'água de proveniência.
     Não achei marca visível nos frames que conferi antes de publicar, mas
     o radial fica como precaução — e exige o mesmo cuidado já anotado lá:
     o vídeo mostra fachada e gente que não existem de verdade, sem
     nenhuma indicação disso pra quem visita o site. */
  background:
    linear-gradient(90deg,
      rgba(10,12,16,.82) 0%,
      rgba(10,12,16,.6) 30%,
      rgba(10,12,16,.1) 56%,
      rgba(10,12,16,.2) 100%),
    linear-gradient(180deg,
      rgba(10,12,16,.62) 0%,
      rgba(10,12,16,.18) 36%,
      rgba(10,12,16,.72) 100%),
    radial-gradient(30% 26% at 93% 90%, rgba(6,7,9,.92), transparent 72%);
}
@media (max-width:899px){
  /* No celular o texto ocupa a largura toda, então o véu volta a ser só
     vertical e mais forte embaixo. */
  .hero-veu{
    background:linear-gradient(180deg,
      rgba(10,12,16,.6) 0%,
      rgba(10,12,16,.3) 34%,
      rgba(10,12,16,.9) 100%);
  }
}
.hero-env{
  position:relative;
  max-width:1080px; margin:0 auto; width:100%;
  padding:0 20px 56px;
  color:#fff;
}
@media (min-width:900px){
  /* Em tela larga o texto fica numa coluna à esquerda: o vídeo mostra a
     loja do lado direito, e cobrir a vitrine com o título joga fora
     justamente o que o vídeo tem de bom. */
  .hero-env > *{ max-width:42%; }
  .hero h1{ font-size:clamp(30px, 3.4vw, 46px); }
}
.hero h1{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:clamp(34px, 7.5vw, 62px);
  line-height:.96;
  letter-spacing:-1.2px;
  text-transform:uppercase;
  max-width:14ch;
}
.hero h1 em{ font-style:normal; color:#66abff; }
.hero-sub{
  font-size:clamp(16px, 2.3vw, 19px);
  margin-top:16px;
  max-width:46ch;
  color:#dde3ec;
}
.hero-botoes{ display:flex; gap:11px; flex-wrap:wrap; margin-top:28px; }

.b{
  display:inline-flex; align-items:center; gap:9px;
  border:0; border-radius:12px;
  padding:15px 26px;
  font-size:16px; font-weight:700;
  text-decoration:none;
  transition:transform .12s, background .15s;
}
.b:active{ transform:translateY(1px); }
.b-azul{ background:var(--azul); color:#fff; }
.b-azul:hover{ background:#1b7dff; }
.b-branco{ background:#fff; color:var(--tinta); }
.b-branco:hover{ background:#eef1f5; }
.b-vazio{
  background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,.45);
}
.b-vazio:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.b-zap{ background:var(--zap); color:#06331a; }
.b-zap:hover{ background:#2ee070; }

/* ============================= FAIXA AZUL ============================= */

.faixa{
  background:var(--azul);
  color:#fff;
  padding:3px 0;
  overflow:hidden;
  white-space:nowrap;
}
.faixa-rolo{
  display:inline-flex; gap:34px;
  padding:9px 0;
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase;
  animation:correr 32s linear infinite;
}
.faixa-rolo span{ display:inline-flex; align-items:center; gap:34px; }
.faixa-rolo i{ font-style:normal; opacity:.55; }
@keyframes correr{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .faixa-rolo{ animation:none; } }

/* ============================== SEÇÕES ============================== */

.secao{ padding:68px 0; }
.secao.cinza{ background:var(--cinza); }
.secao.preta{ background:var(--preto); color:#fff; }

.rotulo{
  display:inline-block;
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:11px; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--azul);
  margin-bottom:11px;
}
.secao.preta .rotulo{ color:#66abff; }

.titulo{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:clamp(26px, 4.6vw, 40px);
  line-height:1.03;
  letter-spacing:-.9px;
  text-transform:uppercase;
}
.texto{
  font-size:17px;
  color:var(--tinta-media);
  margin-top:16px;
  max-width:62ch;
}
.secao.preta .texto{ color:#aab3c0; }
.texto + .texto{ margin-top:13px; }

/* ---- quem somos: texto e foto lado a lado ---- */

.dois{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:46px; align-items:center;
}
@media (max-width:860px){ .dois{ grid-template-columns:1fr; gap:30px; } }

.peca{
  position:relative;
  margin:0;
  border-radius:var(--raio);
  overflow:hidden;
  background:var(--azul);
  aspect-ratio:16/10;
}
.peca-alta{ aspect-ratio:16/11; }
/* Retrato 3:4. Os rostos ficam a ~40% da altura da foto: ancorar o corte
   em cima (30%) tira só o excesso de baixo e mantém o logo da camiseta. */
.peca-retrato{ aspect-ratio:3/4; }
.peca-retrato img{ object-position:50% 30%; }
@media (min-width:861px){ .peca-retrato{ max-width:420px; justify-self:center; width:100%; } }
.peca img, .peca video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.peca figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 15px 12px;
  font-size:12.5px; font-weight:600;
  color:#fff;
  background:linear-gradient(transparent, rgba(10,12,16,.8));
}

/* sem o arquivo, mostra o logo em marca-d'água em vez de quadro quebrado */
.peca-vazia{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  color:rgba(255,255,255,.3);
  pointer-events:none;
}
/* O logo e alto e estreito (proporcao 0,37). So com `width` ele estica
   na vertical ate o fim do bloco. A altura e que manda aqui, e a largura
   sai dela. */
/* O logo e alto e estreito, entao quem manda e a altura; a largura sai
   dela. So `width` fazia ele crescer ate o fim do bloco. */
.peca-vazia svg{ height:96px; width:auto; opacity:.55; }

/* Enquanto a foto nao existe, o espaco diz o que falta ali. Sem isso fica
   so um logo solto num retangulo azul, que parece defeito em vez de
   lugar reservado. */
.peca-aviso{
  display:block;
  margin-top:14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.5;
  color:rgba(255,255,255,.55);
}
.peca img + .peca-vazia{ display:none; }

/* ---- os números do negócio ---- */

.numeros{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:16px;
  margin-top:40px;
}
/* Sao tres numeros. No celular o `auto-fit` acima deixa 2 em cima e 1
   sozinho embaixo, com um buraco do lado, que parece defeito. Em tela
   estreita viram uma coluna so, e aí os tres ficam alinhados. */
@media (max-width:560px){
  .numeros{ grid-template-columns:1fr; }
}
.num{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:20px;
}
.secao.preta .num{ background:var(--preto-2); border-color:#242a35; }
.num-val{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:30px; line-height:1;
  color:var(--azul);
  font-variant-numeric:tabular-nums;
}
.secao.preta .num-val{ color:#66abff; }
.num-rot{ font-size:13.5px; color:var(--tinta-fraca); margin-top:7px; }

/* ============================= CARDÁPIO ============================= */

/* ========================= O BALCÃO =========================
   Faixa de vídeo com o drink sendo montado, entre o texto de quem são
   eles e o cardápio. Quebra o ritmo: duas seções de texto seguidas
   cansam, e aqui entra movimento sem pedir nada do visitante. */

.balcao{
  position:relative;
  padding:clamp(48px, 7vw, 86px) 0;
  background:var(--preto);
  overflow:hidden;
}

/* Duas colunas: o texto e o filme. Antes o vídeo era fundo da faixa inteira,
   e como ele é quase quadrado (720×780) numa faixa de 3,2:1, o `cover`
   escondia dois terços da altura — sobrava o teto e metade de uma garrafa.
   Com coluna própria ele aparece inteiro, que é o que o vídeo tem de bom:
   o copo sendo montado. */
.balcao-env{
  max-width:var(--largura, 1180px);
  margin:0 auto;
  padding:0 clamp(16px, 4vw, 40px);
  display:grid;
  grid-template-columns:1fr minmax(260px, 420px);
  gap:clamp(24px, 5vw, 64px);
  align-items:center;
}

.balcao-filme{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:#05070a;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  /* A proporção exata do arquivo, medida nele (620×672): a caixa não corta
     nada e o vídeo não estica. Trocando o vídeo por um de outro formato,
     muda só esta linha. */
  aspect-ratio:620 / 672;
}
.balcao-filme video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}

/* No celular o texto vem primeiro e o filme embaixo, inteiro. Empilhar é o
   certo: lado a lado numa tela de 390px deixaria o vídeo do tamanho de um
   selo. */
@media (max-width:760px){
  .balcao-env{ grid-template-columns:1fr; gap:26px; }
  .balcao-filme{ max-width:420px; margin:0 auto; width:100%; }
}

/* O texto fica sobre o preto da seção, então é branco. Esta regra existia
   antes e se perdeu quando o vídeo deixou de ser fundo — sem ela o título
   herda a cor escura do resto do site e some. */
.balcao-txt{ color:#fff; }
.balcao-txt .rotulo{ color:#66abff; }
.balcao-txt .titulo{ font-size:clamp(23px, 3vw, 34px); }
/* Sem `max-width` em ch aqui: o texto agora tem coluna própria, e limitar a
   medida de novo deixaria uma faixa vazia entre ele e o vídeo. */
.balcao-txt .texto{ color:#c3cad6; max-width:38ch; }

.cardapio{ background:var(--branco); padding-top:52px; }

.cardapio-topo{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-bottom:22px;
}

/* a barra de categorias gruda abaixo do topo */
.cats{
  position:sticky; top:var(--topo-total); z-index:50;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha);
  margin-bottom:26px;
}
.cats-rolo{
  display:flex; gap:8px;
  max-width:1080px; margin:0 auto; padding:12px 20px;
  overflow-x:auto; scrollbar-width:none;
}
.cats-rolo::-webkit-scrollbar{ display:none; }
.cat{
  flex:0 0 auto;
  background:var(--cinza);
  border:1px solid var(--linha);
  color:var(--tinta-media);
  border-radius:999px;
  padding:8px 16px;
  font-size:14px; font-weight:600;
  white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s;
}
.cat:hover{ border-color:var(--azul); color:var(--azul); }
.cat.on{ background:var(--azul); border-color:var(--azul); color:#fff; }

.cat-bloco{ padding-top:14px; }
.cat-tit{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:12px;
  border-bottom:2px solid var(--tinta);
  margin-bottom:20px;
}
.cat-tit h3{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:19px; text-transform:uppercase; letter-spacing:-.3px;
}
.cat-nota{ font-size:14px; color:var(--tinta-fraca); }

/* a grade de produtos */
.grade{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
  gap:14px;
}
@media (max-width:420px){
  .grade{ grid-template-columns:repeat(2, 1fr); gap:11px; }
}

.pr{
  position:relative;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:12px;
  display:flex; flex-direction:column;
  transition:border-color .14s, box-shadow .14s, transform .14s;
}
.pr:hover{ border-color:#c9d2de; box-shadow:var(--sombra); transform:translateY(-2px); }
/* Esgotado: esmaece o conteúdo, mas NÃO o cartão inteiro, senão a tarja
   esmaece junto e parece cortada. */
.pr.fora .pr-moldura, .pr.fora .pr-nome, .pr.fora .pr-desc, .pr.fora .pr-pe{ opacity:.62; }
.pr.fora:hover{ transform:none; box-shadow:none; border-color:var(--linha); }

.pr-moldura{
  background:var(--branco);
  border-radius:9px;
  aspect-ratio:1;
  display:grid; place-items:center;
  margin-bottom:10px;
  overflow:hidden;
}
.pr-img{ width:86%; height:86%; object-fit:contain; }

/* O desenho de reserva fica escondido enquanto houver uma foto na frente
   dele. Se a foto falhar, o `onerror` a remove, e o irmão-anterior deixa
   de existir: a regra para de valer e o desenho aparece. */
.pr-foto + .pr-reserva{ display:none; }
.pr.fora .pr-img{ filter:grayscale(1); }

.pr-nome{
  font-size:14px; font-weight:600;
  line-height:1.3;
  flex:1 1 auto;
}
.pr-desc{ font-size:12px; color:var(--tinta-fraca); margin-top:3px; }

.pr-pe{
  display:flex; align-items:center; justify-content:space-between;
  gap:9px; margin-top:11px;
}
.pr-preco{
  font-family:'Roboto Mono', ui-monospace, monospace;
  font-size:15px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pr.fora .pr-preco{ color:var(--tinta-fraca); text-decoration:line-through; }

/* a tarja de esgotado: etiqueta inteira, afastada da borda do cartão */
.tarja{
  position:absolute; top:18px; right:18px; z-index:2;
  background:var(--tinta);
  color:#fff;
  font-size:10px; font-weight:700; line-height:1;
  letter-spacing:.8px; text-transform:uppercase;
  padding:5px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.tarja.zap{ background:var(--azul); }

/* o + e o contador */
.add{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:9px;
  border:1.5px solid var(--azul);
  background:transparent; color:var(--azul);
  font-size:19px; font-weight:700; line-height:1;
  display:grid; place-items:center;
  transition:background .12s, color .12s;
}
.add:hover{ background:var(--azul); color:#fff; }
.add.cheio{ background:var(--azul); color:#fff; text-decoration:none; }

.qtd{
  flex:0 0 auto;
  display:flex; align-items:center;
  border:1.5px solid var(--azul);
  border-radius:9px;
  overflow:hidden;
}
.qtd button{
  width:30px; height:32px;
  border:0; background:transparent; color:var(--azul);
  font-size:17px; font-weight:700; line-height:1;
}
.qtd button:hover{ background:var(--azul-claro); }
.qtd span{
  font-family:'Roboto Mono',monospace;
  font-size:14px; font-weight:700;
  min-width:20px; text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ============================ MESA DE BILHAR ============================ */

.mesa{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:22px; align-items:center;
  background:var(--preto-2);
  border:1px solid #242a35;
  border-radius:var(--raio);
  padding:24px;
}
@media (max-width:700px){
  .mesa{ grid-template-columns:1fr; text-align:center; justify-items:center; gap:16px; }
}
.mesa-bola{
  width:66px; height:66px;
  border-radius:50%;
  background:var(--azul);
  display:grid; place-items:center;
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:27px; color:#fff;
}
.mesa-tit{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:23px; text-transform:uppercase; letter-spacing:-.4px;
}
.mesa-tit.livre  { color:#54e58c; }
.mesa-tit.ocupada{ color:#ffc24d; }
.mesa-sub{ font-size:15px; color:#aab3c0; margin-top:4px; }
/* a hora da última mudança: o cliente julga se o dado está fresco */
.mesa-quando{
  font-family:'Roboto Mono',monospace;
  font-size:12px; color:#6b7482; margin-top:6px;
}

.fichas-regra{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:26px;
}
.regra{
  flex:1 1 210px;
  background:var(--preto-2);
  border:1px solid #242a35;
  border-radius:var(--raio);
  padding:18px;
}
.regra-n{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:25px; color:#66abff; line-height:1;
}
.regra-t{ font-size:14.5px; color:#aab3c0; margin-top:7px; }

/* ============================ AVALIAÇÕES ============================ */

/* Aparece só enquanto as avaliações forem de exemplo. Feio de propósito:
   é um aviso para o Arthur, não um elemento de design. */
.av-aviso{
  background:#fff4d6;
  border:1px solid #e8c45a;
  border-radius:10px;
  padding:13px 15px;
  margin:20px 0 4px;
  font-size:14px; font-weight:600;
  color:#7a5a10;
}

.nota-geral{
  display:flex; align-items:center; gap:18px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.nota-num{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:52px; line-height:1;
  font-variant-numeric:tabular-nums;
}
.estrelas{ display:flex; gap:3px; }
.estrelas svg{ width:19px; height:19px; }
.nota-de{ font-size:14px; color:var(--tinta-fraca); margin-top:5px; }

.avaliacoes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  gap:14px;
}
.av{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:18px;
}
.av-topo{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.av-letra{
  width:38px; height:38px; flex:0 0 auto;
  border-radius:50%;
  background:var(--azul-claro); color:var(--azul);
  display:grid; place-items:center;
  font-weight:700; font-size:16px;
}
.av-nome{ font-weight:600; font-size:15px; }
.av-quando{ font-size:12.5px; color:var(--tinta-fraca); }
.av-txt{ font-size:14.5px; color:var(--tinta-media); line-height:1.6; }

/* ============================== DÚVIDAS ============================== */

.duvida{
  border-bottom:1px solid var(--linha);
}
.duvida summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 2px;
  font-size:16.5px; font-weight:600;
  cursor:pointer;
  list-style:none;
}
.duvida summary::-webkit-details-marker{ display:none; }
.duvida summary::after{
  content:'+';
  font-size:23px; font-weight:400; color:var(--azul);
  line-height:1; flex:0 0 auto;
  transition:transform .2s;
}
.duvida[open] summary::after{ transform:rotate(45deg); }
.duvida-corpo{
  padding:0 2px 20px;
  font-size:15.5px; color:var(--tinta-media);
  max-width:66ch;
}

/* ============================== RODAPÉ ============================== */

.rodape{
  background:var(--preto);
  color:#fff;
  padding:52px 0 38px;
}
.rod-grade{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:36px;
}
@media (max-width:760px){ .rod-grade{ grid-template-columns:1fr; gap:28px; } }
.rod-logo{ width:62px; color:#fff; margin-bottom:16px; line-height:0; }
.rod-logo svg{ width:100%; height:auto; display:block; }
.rod-tit{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:12px; letter-spacing:1.4px; text-transform:uppercase;
  color:#6b7482;
  margin-bottom:12px;
}
.rodape p, .rodape a{ font-size:14.5px; color:#aab3c0; text-decoration:none; }
.rodape a:hover{ color:#fff; }
.rodape li{ list-style:none; margin-bottom:7px; }
.rodape ul{ margin:0; padding:0; }
/* Aberto ou fechado, agora só aqui no rodapé, colado nos horários, que
   é onde a informação faz sentido. */
.estado-rodape{
  display:inline-block;
  font-size:13px; font-weight:600;
  color:#ff9b9b;
  margin-bottom:10px;
}
.estado-rodape.aberta{ color:#54e58c; }

.horarios{
  font-family:'Roboto Mono',monospace;
  font-size:13px; line-height:2;
  font-variant-numeric:tabular-nums;
  color:#aab3c0;
}
.horarios b{ color:#fff; font-weight:500; }
.horarios .hoje{ color:#66abff; }
.rod-pe{
  border-top:1px solid #1d222b;
  margin-top:34px; padding-top:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:#6b7482;
}

/* =========================== CARRINHO FIXO =========================== */

.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--branco);
  border-top:1px solid var(--linha);
  box-shadow:0 -4px 22px rgba(10,12,16,.1);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(130%);
  transition:transform .22s ease;
}
.barra.on{ transform:translateY(0); }
.barra-env{
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center; gap:16px;
}
.barra-resumo{ flex:1 1 auto; min-width:0; }
.barra-itens{ font-size:13px; color:var(--tinta-fraca); }
.barra-total{
  font-family:'Roboto Mono',monospace;
  font-size:19px; font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* =========================== FOLHA DO PEDIDO =========================== */

.cortina{
  position:fixed; inset:0; z-index:80;
  background:rgba(10,12,16,.6);
  opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.cortina.on{ opacity:1; pointer-events:auto; }

.folha{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--branco);
  border-radius:20px 20px 0 0;
  max-height:92vh;
  display:flex; flex-direction:column;
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.3,.8,.4,1);
}
.folha.on{ transform:translateY(0); }
@media (min-width:721px){
  .folha{
    left:50%; right:auto;
    width:660px; max-width:calc(100vw - 32px);
    transform:translate(-50%,100%);
  }
  .folha.on{ transform:translate(-50%,0); }
}
.folha-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--linha);
}
.folha-tit{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:17px; text-transform:uppercase; letter-spacing:.4px;
}
.fechar{
  width:34px; height:34px;
  border:0; border-radius:9px;
  background:var(--cinza); color:var(--tinta-media);
  font-size:18px; line-height:1;
}
.fechar:hover{ background:var(--linha); }
.folha-corpo{ overflow-y:auto; padding:18px 22px 24px; }

.ped-linha{
  display:flex; justify-content:space-between; gap:12px;
  font-family:'Roboto Mono',monospace;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  padding:7px 0;
}
.ped-linha .n{ flex:1 1 auto; font-family:'Archivo',sans-serif; }
.ped-sep{ border:0; border-top:1px solid var(--linha); margin:13px 0; }
.ped-total{
  display:flex; justify-content:space-between;
  font-family:'Roboto Mono',monospace;
  font-size:20px; font-weight:700;
  font-variant-numeric:tabular-nums;
  padding-top:4px;
}

.campo{ margin-top:17px; }
.campo label{
  display:block;
  font-size:11.5px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase;
  color:var(--tinta-fraca);
  margin-bottom:6px;
}
.campo input, .campo select, .campo textarea{
  width:100%;
  background:var(--branco);
  border:1.5px solid var(--linha);
  border-radius:10px;
  padding:12px 13px;
  font-size:16px;              /* 16px evita o zoom do iPhone */
  font-family:inherit;
  color:var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{ border-color:var(--azul); }
.campo textarea{ resize:vertical; min-height:62px; }
.dica{ font-size:12.5px; color:var(--tinta-fraca); margin-top:5px; }
.dupla{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:430px){ .dupla{ grid-template-columns:1fr; } }

.opcoes{ display:flex; gap:9px; flex-wrap:wrap; }
.opc{
  flex:1 1 128px;
  background:var(--branco);
  border:1.5px solid var(--linha);
  border-radius:10px;
  padding:11px 13px;
  font-size:14.5px; font-weight:600;
  color:var(--tinta-media);
  text-align:left;
}
.opc:hover{ border-color:var(--azul); }
.opc.on{ border-color:var(--azul); background:var(--azul-claro); color:var(--azul); }

.aviso18{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--cinza);
  border:1px solid var(--linha);
  border-radius:10px;
  padding:13px;
  margin-top:19px;
  font-size:13px; color:var(--tinta-media);
  line-height:1.5;
}
.aviso18 input{ margin-top:2px; width:18px; height:18px; accent-color:var(--azul); flex:0 0 auto; }

.btn-zap{
  width:100%; margin-top:18px;
  background:var(--zap); color:#06331a;
  border:0; border-radius:12px;
  padding:16px;
  font-size:16px; font-weight:700;
}
.btn-zap:hover{ background:#2ee070; }
.btn-zap:disabled{ opacity:.6; cursor:wait; }
.erro{ color:var(--alerta); font-size:13.5px; font-weight:600; margin-top:11px; min-height:1px; }

/* ---------------------------------------------------------------------- *
 *  Cardápio vazio
 *
 *  O estado em que o site ficou no ar até 27/10: banco ligado, nenhum
 *  produto cadastrado, e a seção "O que tem hoje" com o título e nada
 *  embaixo. O vão branco não dizia se tinha dado erro, se a loja estava
 *  fechada ou se faltava rolar mais.
 *
 *  O botão herda .btn-zap, que é `width:100%` porque lá ele vive dentro
 *  da folha estreita do pedido. Aqui está no meio da página, então a
 *  largura volta a ser do conteúdo, com um teto para não virar uma barra
 *  atravessada no desktop.
 * ---------------------------------------------------------------------- */
.vazio{
  display:flex; flex-direction:column; align-items:center;
  gap:10px; text-align:center;
  padding:44px 20px;
  background:var(--cinza);
  border:1px solid var(--linha);
  border-radius:16px;
}
.vazio-tit{ margin:0; font-size:17px; font-weight:700; color:var(--tinta); }
.vazio-txt{
  margin:0; max-width:46ch;
  font-size:14.5px; line-height:1.55; color:var(--tinta-media);
}
.vazio .btn-zap{
  width:auto; min-width:min(100%, 260px);
  margin-top:8px;
  display:inline-block; text-decoration:none; text-align:center;
}

/* ---------------------------------------------------------------------------
   VÍDEO QUE NÃO TOCA SOZINHO (iPhone no Modo de Baixa Energia)

   O iOS bloqueia o autoplay nesse modo e põe um botão de play por cima do
   vídeo. Esses vídeos são ambiente, não conteúdo para apertar play: o botão
   some e fica a foto de capa (atributo `poster`) até o `site.js` conseguir
   tocar, o que acontece no primeiro toque do visitante na tela.
   --------------------------------------------------------------------------- */
video:not([controls])::-webkit-media-controls,
video:not([controls])::-webkit-media-controls-start-playback-button,
video:not([controls])::-webkit-media-controls-panel,
video:not([controls])::-webkit-media-controls-overlay-play-button{
  display:none !important;
  -webkit-appearance:none;
  opacity:0;
  pointer-events:none;
}

/* Capa que esconde o botão de play do iOS (ver comentário no index.html).
   Some com um fade quando o vídeo começa, e não recebe toque: o toque cai nos
   botões do hero e é ele que destrava o vídeo no iPhone. */
.hero-capa{
  pointer-events:none;
  transition:opacity .45s ease;
}
.hero.tocando .hero-capa{ opacity:0; }
/* Bastidores usa o molde do topo; a capa é a do vídeo dele. */

/* Aviso do dono no topo do site (feriado, horário diferente...). Amarelo de
   atenção, sem competir com o título. */
.aviso-loja{
  display:inline-block; margin:0 0 16px;
  background:#ffd24d; color:#1a1400;
  font-size:14.5px; font-weight:700; line-height:1.3;
  padding:9px 15px; border-radius:12px;
  max-width:100%;
}
.aviso-loja[hidden]{ display:none; }

/* Respiro mínimo abaixo do menu fixo: em janela baixa o texto do hero (com o
   aviso do dono) cresce até o topo e passava por cima do logo. Em tela alta
   não muda nada, porque o bloco fica colado no pé. */
.hero .hero-env{ padding-top:96px; }