/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ---------- 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;
}


/* ==================== 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);
}

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

.navbar-brand {
  display: flex;
  align-items: center;
}

.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;
}

ul.navbar-nav {
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: center;
}

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

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

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

.produto-card {
  background-color: #8a5a019a;
  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;
}

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

.produto-card img {
  width: 100%;
  height: 235px;
  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;
}

.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: #ffde24;
}

.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;
}
.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;
    align-items: flex-start; /* <- Alinha à esquerda */
  }

  .nav-item .nav-link {
    width: 100%;
  }
}

/* Reduz altura da navbar */
.navbar {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/* Reduz altura do logo (opcional, se quiser menor) */
.navbar-brand img {
  height: 40px;
  width: auto;
}

/* ==================== ESTILO DO CONTEÚDO ==================== */

/* Cabeçalho */
header {
  text-align: center;
  margin-bottom: 30px;
}

header h1 {
  font-size: 2.8rem;
  margin-bottom: 10px;
  color: #fff;
}

/* Botão Voltar */
.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;
}

/* Título da categoria */
.categoria {
  margin-bottom: 30px;
  padding: 0 20px;
}

.categoria h2 {
  font-size: 2rem;
  border-left: 6px solid #ffcc00;
  padding-left: 10px;
  margin-bottom: 20px;
  color: #fff;
}

/* Container dos cards */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 0 20px;
}

/* remove sublinhado e força herdar cor */
.card,
.card-link,
a.card {
  text-decoration: none; /* remove sublinhado do link que envolve o card */
 
}

/* Card individual */
.card {
   background-color: #8a5a019a;
  border-radius: 12px;
  overflow: hidden;
  width: 280px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  transition: transform 0.3s;
  color: #f6d30c;
}

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

.card h3 {
 margin-top: 50px;
  font-size: 2rem;
  text-align: center;
  
}

/* Imagem do card */
.card img {
  width: 100%;
  height: 290px; /* escolha a altura padrão */
  object-fit: cover;
}

/* Animação de entrada */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsividade para os cards */
@media (max-width: 768px) {
  .card {
    width: 90%;
  }
}

@media (max-width: 576px) {
  .card img,
  .produto-card img,
  .pca img {
    height: auto !important;
    object-fit: contain;
  }
}

@media( max-width){
  .card h3,
  .produto-card h3,
  .pca h3{
    font-size: 1.3rem !important;
  }
}

@media(max-width:576px){
  .card h3{
    margin-top: 20px !important;
  }
}

/* Botão flutuante do WhatsApp */
.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 999;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.floating-button:hover {
  transform: scale(1.1);
}