/* =========================
   Reset básico e variáveis
   ========================= */

:root {
  /* Declara variáveis CSS para paleta de verdes e cinzas */
  --green-900: #0f5132;  /* Verde escuro para títulos e ênfase */
  --green-700: #198754;  /* Verde principal */
  --green-600: #2ea66d;  /* Verde médio */
  --green-500: #37c77c;  /* Verde destaque */
  --green-100: #eaf7ef;  /* Verde muito claro para fundos */
  --gray-900: #1f2937;   /* Cinza escuro para texto */
  --gray-600: #4b5563;   /* Cinza médio para descrições */
  --gray-200: #e5e7eb;   /* Cinza claro para bordas */
  --white: #ffffff;      /* Branco padrão */
  --shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Sombra suave padrão */
}

/* Remove margem e padding padrão e define comportamento de box sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Define fonte global, cor de fundo e cor de texto */
body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--green-100), #f7fff9);
  color: var(--gray-900);
  line-height: 1.6;
}

/* Links sem sublinhado e com transição suave de cor */
a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* Títulos com cor de destaque e espaçamento */
h1, h2, h3 {
  color: var(--green-900);
  letter-spacing: 0.2px;
}

/* Parágrafos com cor média para leitura confortável */
p {
  color: var(--gray-600);
}

/* =========================
   Topbar (cabeçalho)
   ========================= */

.topbar {
  position: sticky;          /* Mantém no topo ao rolar */
  top: 0;                    /* Fixa no topo */
  z-index: 10;               /* Garante sobreposição acima do conteúdo */
  background: var(--white);  /* Fundo branco para contraste */
  border-bottom: 1px solid var(--gray-200); /* Linha inferior sutil */
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);  /* Sombra leve */
}

.brand {
  display: flex;             /* Organiza ícone e título na mesma linha */
  align-items: center;       /* Alinha verticalmente */
  gap: 10px;                 /* Espaçamento entre ícone e título */
  padding: 14px 20px;        /* Espaçamento interno */
}

.logo {
  font-size: 24px;           /* Tamanho do emoji da marca */
}

.site-title {
  font-size: 18px;           /* Tamanho do título do site */
  font-weight: 700;          /* Peso forte para destaque */
}

/* Menu de navegação */
.nav {
  display: flex;             /* Links em linha */
  gap: 8px;                  /* Espaçamento entre links */
  padding: 0 20px 14px 20px; /* Espaçamento inferior para respirar */
  flex-wrap: wrap;           /* Permite quebrar linha em telas pequenas */
}

.nav-link {
  padding: 10px 14px;        /* Área clicável confortável */
  border-radius: 8px;        /* Bordas arredondadas */
  color: var(--green-700);   /* Verde principal nos links */
  font-weight: 600;          /* Peso médio para dar presença */
  background: rgba(55, 199, 124, 0.08); /* Fundo verde translúcido */
}

.nav-link:hover {
  background: rgba(55, 199, 124, 0.16); /* Intensifica no hover */
}

.nav-link.active {
  background: var(--green-500); /* Link ativo com verde forte */
  color: var(--white);          /* Texto branco para contraste */
}

/* =========================
   Hero (destaque inicial)
   ========================= */

.hero {
  display: grid;             /* Grid com duas colunas (conteúdo + arte) */
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;       /* Alinha verticalmente */
  gap: 30px;                 /* Espaçamento entre colunas */
  padding: 40px 24px;        /* Espaçamento interno */
  max-width: 1100px;         /* Largura máxima */
  margin: 30px auto;         /* Centraliza e dá margem externa */
}

.hero-content h2 {
  font-size: 32px;           /* Tamanho do título principal */
  margin-bottom: 10px;       /* Espaço inferior */
}

.hero-content p {
  font-size: 16px;           /* Tamanho do texto */
  margin-bottom: 18px;       /* Espaço inferior */
}

.hero-actions {
  display: flex;             /* Organiza botões lado a lado */
  gap: 12px;                 /* Espaço entre botões */
  margin-top: 10px;          /* Margem superior */
}

/* Área de arte decorativa com bolhas animadas */
.hero-art {
  position: relative;        /* Permite posicionar elementos filhos absolutamente */
  height: 220px;             /* Altura definida */
  background: radial-gradient(120px circle at 60% 40%, rgba(55, 199, 124, 0.25), transparent 70%),
              radial-gradient(160px circle at 20% 70%, rgba(25, 135, 84, 0.20), transparent 60%);
  border-radius: 16px;       /* Bordas arredondadas */
  box-shadow: var(--shadow); /* Sombra */
}

.bubble {
  position: absolute;        /* Posicionamento livre dentro da hero-art */
  border-radius: 50%;        /* Forma circular */
  background: linear-gradient(135deg, var(--green-500), var(--green-600));
  opacity: 0.8;              /* Transparência sutil */
  animation: float 6s ease-in-out infinite; /* Animação de flutuar */
}

.bubble-lg { width: 120px; height: 120px; left: 20px; top: 30px; }
.bubble-md { width: 80px;  height: 80px;  right: 20px; bottom: 30px; }
.bubble-sm { width: 50px;  height: 50px;  left: 60%; top: 60%; }

/* =========================
   Cards e grades
   ========================= */

.features .grid {
  display: grid;             /* Layout em grid */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;                 /* Espaçamento entre cards */
  max-width: 1100px;         /* Largura máxima */
  margin: 10px auto 40px;    /* Margens */
  padding: 0 24px;           /* Espaço lateral */
}

.card {
  background: var(--white);  /* Fundo branco */
  border: 1px solid var(--gray-200); /* Borda suave */
  border-radius: 14px;       /* Bordas arredondadas */
  padding: 18px;             /* Espaço interno */
  box-shadow: var(--shadow); /* Sombra */
}

/* Efeito de entrada horizontal */
.slide-in {
  animation: slideIn 700ms ease both; /* Animação definida abaixo */
}
.delay-1 { animation-delay: 0.12s; }  /* Atraso leve */
.delay-2 { animation-delay: 0.24s; }  /* Atraso maior */

/* =========================
   Botões
   ========================= */

.btn {
  display: inline-flex;       /* Permite centralizar conteúdo com flex */
  align-items: center;        /* Alinha verticalmente */
  justify-content: center;    /* Centraliza horizontalmente */
  padding: 10px 16px;         /* Tamanho do botão */
  border-radius: 10px;        /* Bordas arredondadas */
  font-weight: 600;           /* Peso do texto */
  cursor: pointer;            /* Cursor de mão */
  transition: transform 0.15s ease, box-shadow 0.15s ease; /* Transição suave */
}

.btn-primary {
  background: var(--green-700); /* Fundo verde principal */
  color: var(--white);          /* Texto branco */
  box-shadow: 0 8px 18px rgba(25,135,84,0.25); /* Sombra verde */
}

.btn-primary:hover {
  transform: translateY(-2px);  /* Sobe levemente no hover */
  box-shadow: 0 12px 24px rgba(25,135,84,0.28); /* Sombra mais forte */
}

.btn-outline {
  background: transparent;          /* Sem fundo */
  color: var(--green-700);          /* Verde no texto */
  border: 2px solid var(--green-700); /* Borda verde */
}

.btn-outline:hover {
  transform: translateY(-2px);      /* Sobe levemente no hover */
  box-shadow: 0 10px 20px rgba(0,0,0,0.08); /* Sombra leve */
}

/* Animação pulsante para chamar atenção */
.pulse {
  animation: pulse 1.8s ease-in-out infinite; /* Define a animação */
}

/* =========================
   Grade do cardápio
   ========================= */

.menu-grid {
  max-width: 1100px;          /* Largura máxima */
  margin: 0 auto 40px;        /* Centraliza e adiciona margem inferior */
  padding: 0 24px;            /* Espaço lateral */
  display: grid;              /* Layout em grid */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Colunas fluidas */
  gap: 18px;                  /* Espaçamento */
}

.menu-item {
  background: var(--white);   /* Fundo branco */
  border: 1px solid var(--gray-200); /* Borda sutil */
  border-radius: 14px;        /* Cantos arredondados */
  overflow: hidden;           /* Oculta excedentes da imagem */
  box-shadow: var(--shadow);  /* Sombra */
  transition: transform 0.18s ease, box-shadow 0.18s ease; /* Efeito ao passar o mouse */
}

.menu-item img {
  width: 100%;                /* Imagem ocupa toda a largura */
  height: 160px;              /* Altura fixa */
  object-fit: cover;          /* Corta a imagem mantendo proporção */
}

.menu-info {
  padding: 14px;              /* Espaço interno para texto */
}

.menu-info h3 {
  font-size: 18px;            /* Tamanho do título */
  margin-bottom: 6px;         /* Espaço inferior */
}

.menu-info p {
  font-size: 14px;            /* Tamanho do texto */
  margin-bottom: 10px;        /* Espaço inferior */
}

.price {
  display: inline-block;      /* Permite padding funcionar */
  background: rgba(25,135,84,0.08); /* Fundo translúcido verde */
  color: var(--green-700);    /* Texto verde */
  padding: 6px 10px;          /* Espaço interno */
  border-radius: 8px;         /* Cantos arredondados */
  font-weight: 700;           /* Destaque no preço */
}

/* Efeito sutil de elevação ao passar o mouse */
.hover-rise:hover {
  transform: translateY(-3px);      /* Sobe 3px */
  box-shadow: 0 14px 28px rgba(0,0,0,0.10); /* Sombra mais forte */
}

/* =========================
   Formulários e status
   ========================= */

.form-section {
  max-width: 800px;           /* Largura confortável para formulários */
  margin: 0 auto 40px;        /* Centraliza e dá margem */
  padding: 0 24px;            /* Espaços laterais */
}

.form-card {
  padding: 18px;              /* Espaço interno */
}

.form-group {
  display: flex;              /* Coloca label e campo em coluna */
  flex-direction: column;     /* Coluna */
  gap: 8px;                   /* Espaço entre label e input */
  margin-bottom: 14px;        /* Espaço entre grupos */
}

label {
  font-weight: 600;           /* Destaque no rótulo */
  color: var(--green-900);    /* Cor do rótulo */
}

input[type="text"],
textarea,
select {
  padding: 10px 12px;         /* Espaço interno dos campos */
  border: 1px solid var(--gray-200); /* Borda suave */
  border-radius: 10px;        /* Cantos arredondados */
  outline: none;              /* Remove contorno padrão */
  font-size: 14px;            /* Tamanho do texto */
  transition: border-color 0.15s ease, box-shadow 0.15s ease; /* Transição ao focar */
  background: #fbfffc;        /* Fundo muito claro */
}

input[type="text"]:focus,
textarea:focus,
select:focus {
  border-color: var(--green-500);     /* Borda verde ao foco */
  box-shadow: 0 0 0 4px rgba(55,199,124,0.18); /* Halo verde */
}

.form-actions {
  display: flex;              /* Botões lado a lado */
  gap: 12px;                  /* Espaço entre botões */
  margin-top: 8px;            /* Margem superior */
}

.status-msg {
  margin-top: 12px;           /* Espaço acima da mensagem */
  font-size: 14px;            /* Tamanho do texto */
}

.status-msg.success {
  color: var(--green-700);    /* Cor verde para sucesso */
}

.status-msg.error {
  color: #b00020;             /* Vermelho para erros */
}

/* =========================
   Resumo do pagamento
   ========================= */

.summary-card h3 {
  font-size: 20px;            /* Tamanho do título do resumo */
  margin-bottom: 10px;        /* Espaço inferior */
}

.summary-card p {
  margin-bottom: 8px;         /* Espaço entre linhas */
}

/* =========================
   Rodapé
   ========================= */

.footer {
  margin-top: 30px;           /* Espaço antes do rodapé */
  padding: 20px 24px;         /* Espaço interno */
  background: var(--white);   /* Fundo branco */
  border-top: 1px solid var(--gray-200); /* Linha superior */
}

.footer-content {
  max-width: 1100px;          /* Largura máxima */
  margin: 0 auto;             /* Centraliza */
}

/* =========================
   Animações (keyframes)
   ========================= */

/* Fade com leve subida */
.fade-in-up {
  animation: fadeInUp 700ms ease both; /* Aplica animação definida abaixo */
}

@keyframes fadeInUp {
  /* Define frames da animação de desaparecer/aparecer subindo */
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  /* Animação de entrada lateral */
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  /* Animação pulsante suave para botões de destaque */
  0%   { transform: scale(1);    box-shadow: 0 8px 18px rgba(25,135,84,0.25); }
  50%  { transform: scale(1.03); box-shadow: 0 12px 24px rgba(25,135,84,0.32); }
  100% { transform: scale(1);    box-shadow: 0 8px 18px rgba(25,135,84,0.25); }
}

@keyframes float {
  /* Animação de flutuação das bolhas decorativas */
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* =========================
   Responsividade
   ========================= */

@media (max-width: 860px) {
  /* Ajustes para tablets e celulares */
  .hero {
    grid-template-columns: 1fr; /* Empilha conteúdo e arte */
  }
  .hero-art {
    height: 180px;              /* Reduz altura da arte */
    margin-top: -10px;          /* Aproxima do conteúdo */
  }
}