:root {
  --bege: #F6F0D8;
  --marrom: #4A2E1F;
  --terracota: #C7662D;
  --verde-claro: #B6C18A;
  --verde-medio: #9FAA6F;
  --branco: #FAF7F2;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: "Segoe UI", Arial, Georgia, "Times New Roman", serif;
  background-color: var(--bege);
  color: var(--marrom);
  line-height: 1.6;
}

/* =========================
   ATUALIZAÇÃO DE FONTES
========================= */

/* Importar fonte Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@700&display=swap');

/* =========================
   HEADER COM PARALLAX
========================= */

header {
  position: relative;
  text-align: center;
  padding: 3rem 1rem 2rem;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: image-set(
    url("img/fundo-trigo-1280.webp") 1x,
    url("img/fundo-trigo-1920.webp") 2x
  );
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transform: scale(1.05);
  z-index: 0;
}

header > * {
  position: relative;
  z-index: 1;
}

header img {
  max-width: 188px;
  cursor: pointer;
}

nav {
  margin-top: 1rem;
}

nav a {
  margin: 0 1rem;
  text-decoration: none;
  color: var(--branco);
  font-weight: bold;
}

nav a:hover {
  color: var(--terracota);
}

/* =========================
   HERO / CARROSSEL COM SOMBRA
========================= */

.hero {
  position: relative;
  height: 70vh;
  overflow: visible;
  background: var(--bege);
  margin-bottom: -10px;
  margin-top: -10px;
}

.carousel {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  width: 300%;
  animation: slide 30s linear infinite;
  /*box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3);
    /*0 10px 20px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.15);
    0 -20px 40px rgba(0, 0, 0, 0.3),
    0 -10px 20px rgba(0, 0, 0, 0.2),
    0 -5px 10px rgba(0, 0, 0, 0.15);*/
}

.carousel img {
  width: 100vw;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.hero-text {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Fundo sutilmente mais escuro para garantir leitura sobre pães claros, se necessário */
  background: rgba(246, 240, 216, 0.7); 
  display: flex;
  flex-direction: column; /* Organiza um embaixo do outro */
  align-items: flex-start; /* Alinha tudo à esquerda como na imagem */
  justify-content: center;
  padding-left: 30%; /* Espaçamento da lateral esquerda puxado para o centro*/
  padding-right: 5%;
  text-align: left;
}

.hero-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: 5rem; /* Tamanho grande conforme imagem */
  color: var(--marrom);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.hero-text-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  color: var(--marrom);
  margin-bottom: 2.5rem;
  font-weight: 600;
  max-width: 600px;
}

/* =========================
   NOVOS BOTÕES (Estilo Imagem Referência)
========================= */

.hero-buttons {
  display: flex;
  gap: 1.5rem; /* Espaço entre os botões */
  flex-wrap: wrap;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: 2px solid transparent; /* Prepara para borda */
}

.hero-btn svg {
  width: 20px;
  height: 20px;
  margin-right: 10px; /* Ícone à esquerda do texto */
  fill: currentColor; /* Ícone pega a cor do texto */
}

/* BOTÃO 1: WHATSAPP (Estilo "Place an order" - Vazado/Outline) */
.btn-whatsapp {
  border-color: var(--terracota);
  color: var(--terracota);
  background-color: transparent;
}

.btn-whatsapp:hover {
  background-color: var(--terracota);
  color: var(--branco);
}

/* BOTÃO 2: INSTAGRAM (Estilo "Show more" - Sólido) */
.btn-instagram {
  border-color: var(--terracota);
  color: var(--terracota);
  background-color: transparent;
}

.btn-instagram:hover {
  background-color: var(--terracota);
  color: var(--branco);
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200vw);
  }
}

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

main {
  max-width: 900px;
  margin: auto;
  padding: 3rem 1.5rem;
}

section h1,
section h2 {
  text-align: center;
  color: var(--terracota);
  margin-bottom: 2rem;
}

.menu-item {
  margin-bottom: 2rem;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

/* =========================
   RODAPÉ
========================= */

footer {
  background: var(--verde-claro);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
}

footer a {
  color: var(--marrom);
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

footer a:hover {
  color: var(--terracota);
}

footer a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  vertical-align: middle;
}

/* =========================
   RESPONSIVO
========================= */

@media (max-width: 600px) {
  .hero-text {
    padding: 0 5%;
    align-items: center; /* No celular fica melhor centralizado */
    text-align: center;
  }
  
  .hero-text h1 {
    font-size: 3rem;
  }
  
  .hero-text-subtitle {
    font-size: 0.95rem;
  }
  
  
  .hero-buttons {
    justify-content: center;
  }
  
  /*.hero-buttons {
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
  }*/
  
  .hero-btn {
    width: 100%;
    min-width: unset;
  }

  header::before {
    background-attachment: scroll;
  }
  
  .carousel {
    box-shadow: 
      0 15px 30px rgba(0, 0, 0, 0.25),
      0 8px 15px rgba(0, 0, 0, 0.18),
      0 -15px 30px rgba(0, 0, 0, 0.25),
      0 -8px 15px rgba(0, 0, 0, 0.18);
  }
  
  .hero {
    margin-bottom: -10px;
    margin-top: -10px;
  }
}