@charset "utf-8";
/* CSS Document */
/* -------------------------------------
     RESETS BÁSICOS
  -------------------------------------- */

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-size: 15px;
}
.links-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#menu {
  display: flex;
  padding: 15px 30px;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 9999;
  width: 100%;
}
#menu .links-menu {
  display: flex;
  gap: 30px;
  line-height: 60px;
  margin: 0 auto;
}
#menu .links-menu a {
color: white !important;
  text-decoration: none !important;
  font-weight: 500;
  font-size: 16px;
  padding: 0 15px;
  display: block;
}
#menu .links-menu a:hover { background-color: white; color: #2b5d61 !important; border-radius: 20px;}
#menu_mobile {
  display: none;
}
.logo:hover{ background: none !important;}
/* -------------------------------------
     BANNER COM SCROLL
  -------------------------------------- */
.scroll-section {
  height: 200vh;
  position: relative;
  background-color: #000; /* Preenche todo o espaço da rolagem com fundo escuro */
}

/* Fixa a estrutura centralizada na tela durante o scroll */
.sticky-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh; /* Ocupa 100% da altura da tela para centralizar o banner */
  display: flex;
  align-items: center;      /* Centraliza o vídeo verticalmente */
  justify-content: center;  /* Centraliza o vídeo horizontalmente */
  overflow: hidden;
}

.video-container {
  width: 1920px;
  height: 1080px;
  max-width: 100%;
  background-color: #111;
  position: relative;
  overflow: hidden;
}

#scrollSection{ display: block;}
#scrollSectionMobile{ display: none;}
.textbox{ width: 80%; padding: 0 5%; margin: 0 auto; height: 35px; border-radius: 25px;  border: 1px solid #ffffff; margin: 5px 0;}
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Elimina qualquer espaçamento sutil de elementos inline */
}
@font-face {
  font-family: motter;
  src: url("bootstrap/motter-corpus-itc-tt.ttf") format('truetype');
}
h1 {
  font-family: motter;
}
.verde-agua {
  background-color: #2b5d61;
}
a{ color: #2b5d61; text-decoration: none;}
a:hover{ color: #000; text-decoration: underline;}


#promos{ background: #2b5d61; padding: 40px; color: #fff;}


.botao{ background: #fff; color:#2b5d61; font-weight: 600; text-align: center; padding: 15px 50px; display:inline-block; margin: 0 auto; border: 1px solid #fff; border-radius: 30px; text-decoration: none !important;}
.botao:hover{background: #2b5d61; color:#fff; }
.botao_small{ font-size: 13px; background: #fff; color:#2b5d61; font-weight: 600; text-align: center; padding: 15px 50px; display:inline-block; margin: 0 auto; border: 1px solid #fff; border-radius: 30px; text-decoration: none !important;}
.botao_small:hover{background: #2b5d61; color:#fff;}

#cardapio-digital{ height: auto; padding: 220px 0;  text-align: center; background: #000;}
#conceito{ height: auto; line-height: 1000px; color: #fff; text-align: center; background: #000;}


#molhos{ padding: 80px 0;  text-align: center; background-color: #fff;}
#molhos .molho img{ width: 90%; height: auto; margin: 0 auto;}
#delivery{ padding: 80px 0; text-align: center; font-size: 20px; background: #ececec url("imgs/bg-molhos.png") top center no-repeat; color:#000;}
.small-text{ font-size: 11px; padding: 20px 0;}
#unidade { padding: 80px 0; text-align: left; font-size: 20px; background-color: #fff;}

#unidade .foto-unidade img{ height: auto; width: 80%; vertical-align: middle; margin: auto 0;}

#rodape{ padding: 40px 0 0 0; text-align: left; color: #fff; font-size: 16px;}
#rodape strong{ font-size: 20px;}
#rodape .coluna { margin-bottom: 40px;}

#mouseVideoCardapio {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0.7;}



/* Estado inicial dos elementos escondidos */

.revelar {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.revelar-esquerda {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.revelar-direita {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Estado ativo (quando entram na tela) */
.revelar.ativo,
.revelar-esquerda.ativo,
.revelar-direita.ativo {
  opacity: 1;
  transform: translate(0);
}
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.6s; }
.delay-3 { transition-delay: 0.8s; }
.delay-4 { transition-delay: 1s; }




.videoconceito{
            top: 0;
            left: 0;
            width: 100vw; /* 100% da largura da janela */
            height: 100vh; /* 100% da altura da janela */
            object-fit: cover; /* Cobre toda a área sem distorcer a proporção */
            display: block;
}
.videoconceitomobile{
            top: 0;
            left: 0;
            width: 100vw; /* 100% da largura da janela */
            height: auto; /* 100% da altura da janela */
            object-fit: cover; /* Cobre toda a área sem distorcer a proporção */
            display: none;
}



/* -------------------------------------
     ESTILOS DO MOBILE (Até 768px)
  -------------------------------------- */
@media (max-width: 768px) {
    .videoconceito {display: none;}
    .videoconceitomobile {display: block; padding-top: 60px;}
  #menu {
    display: none;
  }
  #menu_mobile {
    display: block; 
    background-color: #2b5d61;
    color: #fff;
    position: fixed;
    width: 100%;
    z-index: 999999;
  }
    #scrollSection{ display: none;}
    #scrollSectionMobile{ display: block; padding-top: 80px;}
    #scrollSectionMobile img{ width: 100%; height: auto;}
    
  /* Barra superior do mobile (Logo + Botão) */
  .cabecalho-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
  }
  /* Estilo do botão sanduíche */
  #btn-sanduiche {
    background: transparent;
    border: none;
    color: white  !important; 
    text-decoration: none  !important;
    font-size: 28px;
    cursor: pointer;
  }
  /* Estado inicial dos links no mobile (Escondidos) */
  #links-mobile {
    display: none; /* Esconde a lista por padrão */
    background-color: #267b82; /* Fundo um pouco mais escuro */
    flex-direction: column;
    text-align: center;
  }
  #links-mobile a {
    padding: 20px 0;
    border-bottom: solid 1px #2b5d61;
    color: white !important;
    text-decoration: none  !important;
    font-size: 20px;
    display: block;
  }
#mouseVideoCardapio {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 1;}
  
  #links-mobile.aberto {
    display: flex;
  }
}