/* === VARIÁVEIS DE CORES === */
:root {
  --marsala: #63172D;
  --champanhe: #C6C0B6;
  --dourado: #9B7D3A;
  --claro: #f9f9f9;
  --escuro: #1e1e1e;
}

/* === RESET GLOBAL === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'AUMIN Variable Concept', sans-serif;
  background: var(--claro);
  color: var(--escuro);
  overflow-x: hidden;
}

/* === CABEÇALHO COM IMAGEM DE FUNDO (PADRONIZADO COMPACTO) === */
header {
  background: url('banner_brondino.webp') no-repeat center center;
  background-size: cover;
  height: 18rem;
  width: 100%;
}

/* === MENU DE NAVEGAÇÃO === */
nav {
  background: var(--dourado);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  padding: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 500;
}

footer {
  background: var(--marsala); /* Fundo do rodapé */
  color: white;
  text-align: center;
  padding: 1rem;
  margin-top: 3rem;
}

.btn-whatsapp {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
}
.btn-whatsapp img {
  width: 5rem;
  height: 5rrem;
}

/* Botão Whatsapp no celular */

@media screen and (max-width: 768px){ 

  header {
    background: url('banner_brondino.webp') no-repeat center top;
    background-size: cover;
    height: clamp(7rem, 3vw, 9rem);;
  }

/* === MENU DE NAVEGAÇÃO === */
nav {
  background: var(--dourado);
  display: flex;
  flex-wrap: nowrap;              /* <- impede quebra de linha */
  overflow-x: auto;               /* <- permite rolagem lateral */
  white-space: nowrap;
  padding: 1rem;
  gap: 2rem;                      /* espaço entre os itens */
  justify-content: flex-start;   /* alinha os itens à esquerda */
  -webkit-overflow-scrolling: touch; /* rolagem suave no iOS */
}

nav a {
  color: white;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 500;
  flex: 0 0 auto;                 /* <- impede que eles estiquem ou quebrem */
}

footer {
  background: var(--marsala); /* Fundo do rodapé */
  color: white;
  text-align: center;
  padding: 1rem;
  margin-top: 3rem;
}
  .btn-whatsapp {
    position: fixed;
    bottom: .5rem;
    right: .5rem;
    z-index: 1000;
  }
  .btn-whatsapp img {
    width: 3rem;
    height: 3rem;
  }
}