/* =====================================================================
   FAROESTE BEER CO - Identidade Visual
   Cor primária (cabeçalho/rodapé): #056A3E
   Cor secundária (texto menu):     #F0E3C2
   Cor hover do menu:                #44ad7d
   ===================================================================== */

:root {
  --cor-primaria: #056A3E;
  --cor-secundaria: #F0E3C2;
  --cor-hover-menu: #44ad7d;
}

/* Fonte de texto: Poppins (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*
  Fonte principal (display/títulos): "fty skorzhen"
  Não localizamos uma fonte com esse nome exato nos catálogos públicos
  (Google Fonts / Adobe Fonts / DaFont). Pode ser um nome digitado de
  forma diferente, ou uma fonte licenciada/comprada separadamente.

  Enquanto isso, usamos "Rye" (Google Fonts) como fonte temporária no
  estilo faroeste/rústico que combina com a marca. Assim que você enviar
  o arquivo .woff2/.ttf correto da fonte "fty skorzhen", troque o bloco
  abaixo por um @font-face local, por exemplo:

  @font-face {
    font-family: 'Fty Skorzhen';
    src: url('/assets/fonts/fty-skorzhen.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
*/
@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');

body {
  font-family: 'Poppins', sans-serif;
}

.font-display {
  font-family: 'Rye', serif; /* placeholder até a fonte oficial ser enviada */
}

/* Cabeçalho e rodapé */
.header-faroeste,
.footer-faroeste {
  background-color: var(--cor-primaria);
}

.menu-texto {
  color: var(--cor-secundaria);
  transition: color 0.2s ease;
}

.menu-texto:hover,
.menu-texto.ativo {
  color: var(--cor-hover-menu);
}

/* Scrollbar do carrossel */
.carrossel-scroll::-webkit-scrollbar {
  height: 8px;
}
.carrossel-scroll::-webkit-scrollbar-thumb {
  background-color: var(--cor-primaria);
  border-radius: 9999px;
}

/* Slide de banners */
.slide-banner {
  scroll-snap-type: x mandatory;
}
.slide-banner > * {
  scroll-snap-align: center;
}

/* Utilitário: esconder no desktop / mobile, complementando Tailwind */
@media (max-width: 767px) {
  .apenas-desktop { display: none !important; }
}
@media (min-width: 768px) {
  .apenas-mobile { display: none !important; }
}