/* ==========================================================================
   Toro Burger — CSS compartilhado por index.html e cardapio.html.
   Com duas páginas, o estilo mora aqui para não ter que ser mantido em dois
   lugares.
   ========================================================================== */

/* "Bebas Neue" (Ryoichi Tsunekawa / Dharma Type) — licenciada pela SIL Open
   Font License 1.1, que libera uso comercial. O texto da licença fica em
   fonts/bebas-neue/OFL.txt e precisa continuar junto do arquivo da fonte.
   Tem acentuação completa (Á Â Ã É Ê Í Ó Ô Õ Ú Ç), então os títulos podem
   usar as palavras acentuadas normalmente. É uma fonte só de caixa alta. */
@font-face{
  font-family:"Bebas Neue";
  src:url("fonts/bebas-neue/BebasNeue-Regular.woff2") format("woff2"),
      url("fonts/bebas-neue/BebasNeue-Regular.woff") format("woff"),
      url("fonts/bebas-neue/BebasNeue-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --ouro:      #fac020;
  --preto:     #0d0b0a;
  --vinho:     #7d1620;
  --claro:     #f1f1f1;
  --cinza:     #b9b3ae;
  --papel:     #ffffff;
  --escurecer: rgba(0,0,0,.58);
  --seta:      #100d0c;
  --largura:   1180px;
}

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

body{
  margin:0;
  background:var(--preto);
  color:var(--claro);
  font-family:"Montserrat",Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.container{ width:100%; max-width:var(--largura); margin:0 auto; padding:0 24px; }

/* --------------------------------------------------------------- cabeçalho */
.cabecalho{
  /* fica dentro do palco do vídeo: enquanto a animação roda o palco está
     grudado na tela, então o cabeçalho fica junto; quando a animação acaba,
     os dois sobem juntos e o cabeçalho sai de cena. */
  position:absolute;
  top:0; left:0; right:0;
  z-index:20;
  padding:30px 0 20px;
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}
.cabecalho__marca{
  display:block;
  width:118px;
  margin:0 auto 14px;
  text-decoration:none;
}
.cabecalho__marca img{ width:100%; filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)); }

/* ícones de rede social, discretos no canto superior direito */
.redes{ position:absolute; top:30px; right:28px; display:flex; gap:16px; align-items:center; }
.redes a{
  display:inline-flex; width:19px; height:19px;
  color:rgba(255,255,255,.62);
  transition:color .22s ease, transform .22s ease;
}
.redes a:hover, .redes a:focus-visible{ color:var(--ouro); transform:translateY(-2px); }
.redes svg{ width:100%; height:100%; fill:currentColor; display:block; }

/* ------------------------------------------------------------------ botões */
.botao{
  display:inline-block;
  padding:.9rem 1.9rem;
  border:2px solid var(--claro);
  border-radius:40px;
  color:var(--claro);
  background:transparent;
  font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; line-height:1;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.botao:hover, .botao:focus-visible{ background:var(--claro); color:var(--preto); }
.botao--ouro{ border-color:var(--ouro); color:var(--ouro); }
.botao--ouro:hover, .botao--ouro:focus-visible{ background:var(--ouro); color:var(--preto); }
.botao--vinho{ border-color:var(--vinho); color:var(--vinho); }
.botao--vinho:hover, .botao--vinho:focus-visible{ background:var(--vinho); color:var(--papel); }
.botao--discreto{
  padding:.6rem 1.2rem; border-width:1px; border-color:rgba(255,255,255,.28);
  color:rgba(255,255,255,.72); font-size:.62rem; letter-spacing:.14em;
}
.botao--discreto:hover, .botao--discreto:focus-visible{ background:transparent; border-color:var(--ouro); color:var(--ouro); }
.botoes{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ------------------------------------------------------------------ seções */
.secao{
  position:relative;
  padding:110px 0 100px;
  background:var(--preto) center / cover no-repeat;
}
.secao--foto::before{ content:""; position:absolute; inset:0; background:var(--escurecer); }
.secao--claro::before{
  background:linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.46) 30%, rgba(0,0,0,.46) 70%, rgba(0,0,0,.74) 100%);
}
.secao > .container{ position:relative; z-index:2; }

/* a "setinha" que aponta para baixo entre uma seção e outra */
.secao--seta::after{
  content:"";
  position:absolute; z-index:3;
  bottom:-26px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
  border-top:26px solid var(--seta);
}

.titulo{ text-align:center; margin:0 0 46px; }
.titulo__linha{ margin:0; font-size:1.35rem; font-weight:400; color:var(--claro); }
.titulo__destaque{
  font-family:"Bebas Neue","Montserrat",sans-serif; font-weight:400;
  font-size:clamp(2.3rem,7vw,4.6rem);
  line-height:1.2;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ouro);
  margin:.1em 0 0;
}

.texto{ max-width:760px; margin:0 auto; color:var(--cinza); }
.texto p{ margin:0 0 1.3em; }
.texto p:last-child{ margin-bottom:0; }
.texto strong{ color:var(--claro); font-weight:600; }

/* -------------------------------------------------------------------- capa */
.capa{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:210px 0 130px;
  background:var(--preto) center / cover no-repeat;
}
.capa::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.56) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,.74) 100%);
}
.capa > .container{ position:relative; z-index:2; }
.capa__marca{
  font-family:"Bebas Neue","Montserrat",sans-serif; font-weight:400;
  font-size:clamp(2.4rem,7.8vw,5.2rem);
  line-height:1.16;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ouro);
  margin:.05em 0 1.1rem;
}
.capa__apoio{ max-width:560px; margin:0 auto 2.2rem; color:var(--cinza); }

/* capa com o texto de um lado só; a outra metade fica livre para a foto de
   fundo aparecer sem nada por cima */
.capa--direita{ text-align:right; }
.capa--direita > .container{ display:flex; justify-content:flex-end; }
.capa__bloco{ width:min(560px, 100%); }
.capa--direita .capa__apoio{ margin-left:auto; margin-right:0; }
.capa--direita .botoes{ justify-content:flex-end; }
.capa--direita::before{
  background:
    linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.20) 40%, rgba(0,0,0,.68) 70%, rgba(0,0,0,.80) 100%),
    linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.08) 40%, rgba(0,0,0,.56) 100%);
}

/* mesma ideia, espelhada: escrita à esquerda, foto livre à direita */
.capa--esquerda{ text-align:left; }
.capa--esquerda > .container{ display:flex; justify-content:flex-start; }
.capa--esquerda .capa__apoio{ margin-left:0; margin-right:auto; }
.capa--esquerda .botoes{ justify-content:flex-start; }
.capa--esquerda::before{
  background:
    linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.66) 32%, rgba(0,0,0,.20) 62%, rgba(0,0,0,.06) 100%),
    linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.08) 40%, rgba(0,0,0,.56) 100%);
}

/* fundo que corre junto com a rolagem (parallax em CSS puro).
   Precisa vir DEPOIS de .secao e .capa: o atalho `background` das duas
   reseta o background-attachment. */
.secao--fixo{ background-attachment:fixed; }


/* ------------------------------------------- carrossel de banners */
/* Funciona só com CSS: os radios guardam qual banner está aberto e as setas
   são <label> apontando para o radio do banner anterior/seguinte. */
.carrossel{ position:relative; overflow:hidden; }
.carrossel__radio{
  /* Ficam FIXOS de propósito. Clicar numa seta dá foco ao radio escondido, e o
     navegador rola a página para trazer o elemento focado à tela — como eles
     ficavam no topo do carrossel, a página pulava de volta para o vídeo.
     Fixos, estão sempre visíveis, então não há nada para rolar. */
  position:fixed; top:50%; left:0;
  width:1px; height:1px; opacity:0; pointer-events:none;
}
.carrossel__trilho{
  display:flex; width:300%;
  transition:transform .75s cubic-bezier(.4,0,.2,1);
}
.carrossel__slide{ width:33.333333%; flex:0 0 33.333333%; }
#banner-1:checked ~ .carrossel__trilho{ transform:translateX(0); }
#banner-2:checked ~ .carrossel__trilho{ transform:translateX(-33.333333%); }
#banner-3:checked ~ .carrossel__trilho{ transform:translateX(-66.666666%); }

.seta{
  position:absolute; top:50%; z-index:4; transform:translateY(-50%);
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:rgba(255,255,255,.55);
  transition:color .22s ease;
}
.seta:hover{ color:var(--ouro); }
.seta svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.3; }
.seta--esq{ left:22px; }
.seta--dir{ right:22px; }

.pontos{
  position:absolute; z-index:4; left:0; right:0; bottom:38px;
  display:flex; justify-content:center; gap:11px;
}
.ponto{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.34); cursor:pointer;
  transition:background-color .22s ease;
}
.ponto:hover{ background:rgba(255,255,255,.7); }
.ponto--ativo{ background:var(--ouro); cursor:default; }

/* ------------------------------------------ vídeo puxado pela rolagem */
/* .puxa__trilho é a "pista": quanto mais alta, mais devagar o vídeo anda.
   O palco fica grudado (sticky) na tela enquanto a pista passa por trás. */
.puxa{ position:relative; background:var(--preto); }
.puxa__trilho{ height:340vh; }
.puxa__palco{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/* o texto acompanha o alinhamento do banner de baixo: encostado à direita.
   Aqui ele sai da largura do container e encosta mais na borda da tela: é o
   que mantém a coluna inteira dentro da faixa escura, longe do hambúrguer. */
.puxa__area{
  position:relative; z-index:2; display:flex; justify-content:flex-end;
  max-width:none; padding-right:clamp(28px,3.4vw,64px);
}
.puxa__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  /* o hambúrguer fica à esquerda do quadro: a âncora segura o enquadramento
     em qualquer tela e o corte cai sempre sobre o fundo escuro da direita */
  object-position:28% 50%;
}
/* Quanto do vídeo cabe na horizontal depende da PROPORÇÃO da janela, não da
   largura: quanto mais "quadrada" a janela, mais o vídeo é cortado dos lados.
   Por isso a âncora vai junto — sempre mostrando o hambúrguer e deixando a
   faixa escura do lado direito, onde o texto mora. */
@media (max-aspect-ratio:17/10){ .puxa__video{ object-position:40% 50%; } }
@media (max-aspect-ratio:29/20){ .puxa__video{ object-position:52% 50%; } }
/* janela alta (celular, ou o navegador estreito): não sobra faixa escura
   nenhuma, então o texto vai para o centro e o hambúrguer volta ao meio */
@media (max-aspect-ratio:6/5){ .puxa__video{ object-position:30% 50%; } }
/* sem véu: o vídeo fica na edição original, sem escurecer.
   A leitura do texto vem só da sombra em .puxa__conteudo. */
.puxa__conteudo{
  position:relative; z-index:2;
  /* coluna estreita de propósito: o hambúrguer ocupa a esquerda do quadro e
     o texto fica só na faixa escura da direita, sem passar por cima dele */
  width:min(320px,100%);
  text-align:right;
  /* o vídeo muda de quadro o tempo todo: a sombra garante a leitura em todos */
  text-shadow:0 2px 26px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.7);
}
/* na faixa estreita o texto de apoio respira melhor um pouco menor */
.puxa__conteudo .capa__apoio{ font-size:.88rem; line-height:1.65; margin-bottom:0; }
/* o título tem que caber em UMA linha dentro da coluna estreita */
.puxa__conteudo .titulo__destaque{ font-size:clamp(1.8rem,3vw,2.9rem); white-space:nowrap; }
.puxa__dica{
  margin:1.6rem 0 0;
  font-size:.7rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cinza);
}

/* ----------------------------------------------------------- especialidades */
.vitrine{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:34px;
  margin-top:12px;
}
.vitrine__item{
  position:relative; margin:0;
  border-radius:24px; overflow:hidden;
  /* sombra funda + fio de luz na borda: no fundo escuro é o fio que faz a
     foto parecer descolada do fundo */
  box-shadow:
    0 42px 74px -20px rgba(0,0,0,.92),
    0 16px 32px -12px rgba(0,0,0,.78),
    0 0 0 1px rgba(255,255,255,.07);
}
.vitrine__foto{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.vitrine__item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%);
  pointer-events:none;
}
.vitrine__botao{
  position:absolute; z-index:2;
  left:50%; bottom:24px; transform:translateX(-50%);
  white-space:nowrap;
}

/* ------------------------------------------------- página do cardápio */
/* Sem cabeçalho: só a logo (que volta para a inicial) e o botão do iFood.
   O fundo de mesa fica preso à tela com um elemento fixo, em vez de
   background-attachment, que trava no celular e esticaria a foto pela
   página inteira. */
.pagina-cardapio{ position:relative; }
.pagina-cardapio::before,
.pagina-cardapio::after{ content:""; position:fixed; inset:0; z-index:-1; }
.pagina-cardapio::before{ background:var(--preto) url("img/fundo-brasas.jpg") center / cover no-repeat; z-index:-2; }
.pagina-cardapio::after{
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 40%, rgba(0,0,0,.35) 100%);
}

.menu-topo{
  padding:34px 0 10px;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  text-align:center;
}
.menu-topo__marca{ display:block; width:168px; }
.menu-topo__marca img{ width:100%; filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)); }

.cardapio{ padding-top:56px; padding-bottom:110px; }
.cardapio .titulo{ margin-bottom:56px; }
.cardapio__grupo{ margin-bottom:84px; }
.cardapio__grupo:last-child{ margin-bottom:0; }
.cardapio__categoria{
  margin:0 0 6px;
  font-family:"Bebas Neue","Montserrat",sans-serif; font-weight:400;
  font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.2;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ouro); text-align:center;
}
.cardapio__nota{
  margin:0 0 34px; text-align:center;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cinza);
}

.pratos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:30px;
}
/* cartão do produto: mesma quina, sombra e fio de luz da vitrine da inicial */
.prato{
  display:flex; flex-direction:column;
  border-radius:24px; overflow:hidden;
  background:rgba(13,11,10,.78);
  box-shadow:
    0 34px 60px -22px rgba(0,0,0,.92),
    0 0 0 1px rgba(255,255,255,.07);
}

/* ESPAÇO DA FOTO — enquanto a foto não existir, aparece o marcador com o
   ícone de câmera. Quando o arquivo for colocado em img/cardapio/ com o
   nome indicado no HTML, a foto cobre o marcador sozinha. */
.prato__foto{
  position:relative;
  aspect-ratio:4/3;
  background:
    radial-gradient(ellipse at center, rgba(250,192,32,.07) 0%, rgba(0,0,0,0) 70%),
    #1a1614;
  overflow:hidden;
}
.prato__foto::before{
  content:"";
  position:absolute; inset:14px;
  border:1px dashed rgba(250,192,32,.35);
  border-radius:16px;
}
.prato__foto::after{
  content:"Foto do produto";
  position:absolute; left:0; right:0; top:50%;
  padding-top:44px; transform:translateY(-50%);
  text-align:center;
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(250,192,32,.6);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fac020' stroke-opacity='.6' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l1.6-2.2h6.8L17 7h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='12.6' r='3.6'/%3E%3C/svg%3E") center top / 34px 34px no-repeat;
}
.prato__foto img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.prato:hover .prato__foto img{ transform:scale(1.04); }
/* bebidas industrializadas: foto de produto sobre fundo preto, sem cortar */
.prato__foto--produto{ background:#000; }
.prato__foto--produto::before,
.prato__foto--produto::after{ content:none; }
.prato__foto--produto img{ inset:10% 0; height:80%; object-fit:contain; }

.prato__corpo{ flex:1 1 auto; display:flex; flex-direction:column; padding:22px 24px 24px; }
.prato__nome{
  margin:0; font-size:.98rem; font-weight:700; line-height:1.4;
  letter-spacing:.06em; text-transform:uppercase; color:var(--claro);
}
.prato__ing{ margin:.45rem 0 0; font-size:.86rem; line-height:1.6; color:var(--cinza); }
.prato__rodape{
  margin-top:auto; padding-top:18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.prato__preco{ margin:0; font-size:1.1rem; font-weight:700; color:var(--ouro); white-space:nowrap; }

/* ------------------------------------------------------------ contato/info */
.infos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:40px 34px; max-width:900px; margin:0 auto; text-align:center;
}
.info__rotulo{
  margin:0 0 .7rem;
  font-size:.75rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ouro);
}
.info p{ margin:0 0 .35rem; color:var(--cinza); }
.info__acao{ margin-top:1.3rem; }

.horarios{ max-width:520px; margin:0 auto; }
.horarios__linha{
  display:flex; align-items:baseline; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.10);
}
.horarios__linha:last-child{ border-bottom:0; }
.horarios__dia{ flex:1 1 auto; color:var(--claro); font-size:.9rem; }
.horarios__hora{ flex:0 0 auto; color:var(--ouro); font-weight:600; font-size:.9rem; }
.horarios__hora--fechado{ color:var(--cinza); font-weight:400; }

.mapa__moldura{
  max-width:900px; margin:46px auto 0;
  border-radius:24px;
  overflow:hidden;             /* é a moldura que corta as quinas do mapa */
  line-height:0;
  box-shadow:0 26px 50px -18px rgba(0,0,0,.8);
}
.mapa{
  border:0; width:100%; height:380px; display:block;
  filter:grayscale(.35) contrast(1.05);
}

/* ------------------------------------------------------------------ rodapé */
.rodape{ background:#080706; padding:64px 0 28px; text-align:center; }
.rodape__marca{ width:152px; margin:0 auto 22px; }
.rodape__botoes{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0 0 30px;
}
.rodape__botoes .botao{ padding:.72rem 1.5rem; font-size:.66rem; }
.rodape__contato{ margin:0 0 26px; color:var(--cinza); font-size:.9rem; }
.rodape__contato a{ color:var(--claro); text-decoration:none; }
.rodape__contato a:hover{ color:var(--ouro); }
.rodape__creditos{
  margin:0; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.72rem; letter-spacing:.08em; color:#6f6763;
}


/* ------------------------------------------------------------------- telas */
@media (max-width:900px){
  /* o fundo fixo trava/pisca em celular, então volta a rolar junto */
  .secao--fixo{ background-attachment:scroll; }
  .secao{ padding:80px 0 74px; }
  .capa{ padding:180px 0 100px; }
  .puxa__trilho{ height:260vh; }
  .cabecalho__marca{ width:96px; }
  .redes{ top:22px; right:18px; gap:14px; }
  .redes a{ width:17px; height:17px; }
  .menu{ gap:6px 20px; }
  .menu a{ font-size:.66rem; letter-spacing:.14em; }
}

@media (max-width:760px){
  /* em tela estreita não sobra metade vazia: o texto volta ao centro */
  .capa--direita{ text-align:center; }
  .capa--direita > .container{ justify-content:center; }
  .capa--direita .capa__apoio{ margin-left:auto; margin-right:auto; }
  .capa--direita .botoes{ justify-content:center; }
  .capa--direita::before,
  .capa--esquerda::before{
    background:linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.76) 100%);
  }
  .capa--esquerda{ text-align:center; }
  .capa--esquerda > .container{ justify-content:center; }
  .capa--esquerda .capa__apoio{ margin-left:auto; margin-right:auto; }
  .capa--esquerda .botoes{ justify-content:center; }
  .seta--esq{ left:6px; }
  .seta--dir{ right:6px; }
  .seta{ width:38px; height:38px; }
  .seta svg{ width:22px; height:22px; }
  .pontos{ bottom:26px; }
}

/* Abertura em janela alta (celular no retrato, ou o navegador estreito no
   computador): o vídeo cortado ocupa a tela toda e não sobra faixa escura,
   então o texto assume o centro. A sombra fecha mais para dar leitura sem
   precisar escurecer o vídeo. */
@media (max-width:760px), (max-aspect-ratio:6/5){
  .puxa__area{ justify-content:center; padding-right:0; }
  .puxa__conteudo{
    width:min(420px,100%);
    text-align:center;
    text-shadow:0 1px 3px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.9), 0 0 34px rgba(0,0,0,.8);
  }
  .puxa__conteudo .titulo__destaque{ font-size:clamp(1.9rem,6.4vw,3rem); }
}

@media (max-width:560px){
  .titulo__linha{ font-size:1.1rem; }
}