/* ---------- Variáveis de cor ---------- */
:root {
  --amarelo:   #ffc107;
  --amarelo2:  #ffcc00;
  --escuro:    #111;
  --card-bg:   #1e1e1e;

  /* Tons de madeira */
  --mad-base:  #a55d25;
  --mad-clara: #8b5a2b;
  --mad-veia1: #ac510b;
  --mad-veia2: #7a4820;
  --mad-veia3: #4a2808;
  --mad-luz:   #c8894a;
}

/* ============================================================
   EFEITO DE MADEIRA — 100% CSS (sem imagem)
   Técnica: múltiplos repeating-linear-gradient sobrepostos
   ============================================================ */
body {
  margin: 0;
  padding-top: 70px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  background-color: var(--mad-base);

  /* Camada 1 — veios principais diagonais */
  background-image:
    /* reflexo/brilho superficial */
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.00) 60%
    ),
    /* veios finos escuros */
    repeating-linear-gradient(
      92deg,
      transparent                0px,
      transparent                18px,
      rgba(74, 40,  8, 0.25)     19px,
      rgba(74, 40,  8, 0.25)     20px,
      transparent                21px,
      transparent                46px,
      rgba(90, 48, 16, 0.18)     47px,
      rgba(90, 48, 16, 0.18)     48px,
      transparent                49px,
      transparent                80px
    ),
    /* veios médios quentes */
    repeating-linear-gradient(
      88deg,
      transparent                0px,
      transparent                30px,
      rgba(200,137, 74, 0.12)    32px,
      rgba(200,137, 74, 0.12)    33px,
      transparent                35px,
      transparent                70px,
      rgba(139, 90, 43, 0.15)    72px,
      rgba(139, 90, 43, 0.15)    74px,
      transparent                76px,
      transparent               120px
    ),
    /* veios largos de profundidade */
    repeating-linear-gradient(
      91deg,
      rgba(107, 63, 30, 1.00)    0px,
      rgba(122, 72, 32, 1.00)   60px,
      rgba( 90, 48, 16, 1.00)  120px,
      rgba(139, 90, 43, 1.00)  180px,
      rgba(107, 63, 30, 1.00)  240px
    );

  background-attachment: fixed;
  background-size: auto;
}


.produto-card {
  background-color: hsla(39, 99%, 27%, 0.604);
  border-radius: 12px;
  overflow: hidden;
  width: 300px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
}

.pca{
  background-color: #8a5a019a;
  border-radius: 12px;
  overflow: hidden;
  width: 150px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
}

.pca .preco{
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
  margin-bottom: 15px;
  color: #ffcc00;
}

.opcio{
  background-color: #ab68036e;
  border-radius: 10px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto; /* ← centraliza */
  padding: 10px;
}

.tit{
  margin: 0 auto; /* ← centraliza */;
  color: rgb(254, 254, 254);
  text-align: center;
  
}


.produto-card:hover {
  transform: scale(1.03);
}

.produto-card img {
  width: 100%;
  height: 275px;
  object-fit: cover;
  border-bottom: 1px solid #00000033;
}

.produto-card .info {
  padding: 15px;
  text-align: center;
}

.produto-card h3 {
  margin: 10px 0 5px;
  font-size: 1.4rem;
}

.produto-card p {
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.produto-card .preco {
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
  margin-bottom: 15px;
  color: #ffcc00;
}

.botoes-pedido {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 0 20px;
}
.btn-whatsapp,.btn-99food,
.btn-ifood {
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: background 0.3s;
}

.btn-99food {
  background-color: #ffd901;
}

.btn-99food:hover {
  background-color: #cca300;
}

.btn-whatsapp {
  background-color: #25d366;
}

.btn-whatsapp:hover {
  background-color: #128c7e;
}

.btn-ifood {
  background-color: #ea1d2c;
}

.btn-ifood:hover {
  background-color: #b50015;
}

.container-produtos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}



header {
  text-align: center;
  margin-bottom: 30px;
}

header h1 {
  font-size: 2.8rem;
  margin-bottom: 10px;
  color: #fff;
}
.btn-voltar {
  background-color: #b30000;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s;
}

.btn-voltar:hover {
  background-color: #ff0000;
}

/* NAVBAR */
nav.navbar {
  background-color: #212529;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Logo reduzida */
.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand img {
  height: 40px;
  width: auto;
}

/* Container da navbar */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Botão mobile */
.navbar-toggler {
  display: none;
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.navbar-collapse {
  display: flex;
  flex-basis: 100%;
  flex-grow: 1;
  justify-content: flex-end;
}

/* Menu */
ul.navbar-nav {
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav-item .nav-link {
  color: #fff;
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  transition: color 0.3s ease;
  font-size: 0.95rem;
}

.nav-item .nav-link:hover,
.nav-item .nav-link.active {
  color: #ffc107;
}

.nav-link i {
  margin-right: 5px;
}

.secao-titulo {
    width: 100%;
    height: 6rem;
    border-radius: 12px;
    text-align: center;
    font-size: 2rem;       /* Tamanho do título */
    font-weight: bold;
    color: #ffcc00;        /* Pode ajustar para combinar com o tema */
    margin: 50px 0 30px;   /* Espaço acima e abaixo do título */
    text-transform: uppercase; /* Deixa CREMES em maiúsculas */
    background-color: #0000006c;
}

/* Garante que os cards fiquem abaixo do título */
.secao-titulo + .container-produtos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0 20px 50px 20px; /* Espaço inferior para não colar no próximo bloco */
}

.titulo {
    width: 100%;
    height: 6rem;
    border-radius: 12px;
    text-align: center;
    font-size: 50px;       /* Tamanho do título */
    font-weight: bold;
    color: #ffcc00;        /* Pode ajustar para combinar com o tema */
    margin: 50px 0 90px;   /* Espaço acima e abaixo do título */
    text-transform: uppercase; /* Deixa CREMES em maiúsculas */
    background-color: #0000006c;
}

.btn-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ffffffcc;
    border: none;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    font-size: 20px;
    transition: 0.3s;
}

.btn-fav i {
    color: #555;
    transition: 0.2s;
}

.btn-fav.favorito i {
    color: red;
    transform: scale(1.2);
}


/* NAVBAR MOBILE */
@media (max-width: 992px) {
  .navbar-toggler {
    display: block;
  }

  .navbar-collapse {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #212529;
    padding: 1rem;
  }

  .navbar-collapse.show {
    display: flex;
  }

  ul.navbar-nav {
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media(max-widith:600px){
  .pca{
    width: 45%;
  }
}