/* ===== VARIÁVEIS (paleta gerada pela IA de design) ===== */
:root {                    /* :root: seletor do documento inteiro; guarda variáveis */
  --verde: #0F8B6C;        /* cor principal (saúde/confiança) */
  --verde-claro: #E6F5F0;  /* fundo suave */
  --laranja: #F28C28;      /* cor de destaque para botões */
  --texto: #1E2A32;        /* cor do texto */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* *: todos os elementos; box-sizing inclui borda/padding na largura;
   margin/padding 0 zera espaçamentos padrão do navegador */

body {
  font-family: Arial, Helvetica, sans-serif; /* font-family: tipo de letra */
  color: var(--texto);                       /* color: cor do texto; var() usa a variável */
  line-height: 1.6;                          /* line-height: espaço entre linhas */
}

/* ===== CABEÇALHO ===== */
.cabecalho {
  display: flex;                   /* display:flex: alinha filhos lado a lado */
  justify-content: space-between;  /* espalha logo à esquerda e menu à direita */
  align-items: center;             /* centraliza na vertical */
  padding: 12px 5%;                /* padding: espaço interno */
  background: var(--verde);        /* background: cor de fundo */
  position: sticky;                /* sticky: cabeçalho fica fixo ao rolar */
  top: 0;
}
.logo { height: 56px; }            /* height: altura da imagem */
.menu { display: flex; gap: 24px; list-style: none; }
/* gap: espaço entre itens; list-style:none remove os marcadores da lista */
.menu a { color: #fff; text-decoration: none; font-weight: bold; }
/* text-decoration:none tira o sublinhado; font-weight: negrito */
.menu a:hover { color: var(--laranja); }
/* :hover: estilo quando o mouse passa por cima */

/* ===== DESTAQUE ===== */
.destaque {
  display: grid;                    /* grid: layout em colunas */
  grid-template-columns: 1fr 1fr;   /* duas colunas de mesma largura */
  gap: 32px;
  align-items: center;
  padding: 48px 5%;
  background: var(--verde-claro);
}
.destaque h1 { font-size: 2.4rem; color: var(--verde); } /* font-size: tamanho da fonte */
.logo {
  background: #fff;                 /* fundo branco em círculo destaca o logo no cabeçalho verde */
  border-radius: 50%;
  padding: 4px;
}
.destaque-img, .produtos-img {
  width: 100%;                      /* width: ocupa toda a largura disponível */
  max-height: 420px;                /* limita a altura das fotos verticais da IA */
  border-radius: 16px;              /* border-radius: cantos arredondados */
  object-fit: cover;                /* object-fit: recorta sem distorcer */
}
.botao {
  display: inline-block;
  margin-top: 16px;                 /* margin: espaço externo */
  padding: 12px 24px;
  background: var(--laranja);
  color: #fff;
  border: none;                     /* border: borda (removida) */
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;                  /* cursor: mãozinha ao passar o mouse */
}

/* ===== SERVIÇOS ===== */
section { padding: 48px 5%; }
h2 { color: var(--verde); margin-bottom: 20px; }
.cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* repeat(3, 1fr): três colunas iguais */
.cartao {
  padding: 20px;
  border: 1px solid #d6e9e2;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); /* box-shadow: sombra suave */
}

/* ===== PRODUTOS ===== */
.produtos-img { max-height: 320px; margin-bottom: 16px; } /* max-height: altura máxima */
.lista-produtos { padding-left: 20px; }

/* ===== CONTATO ===== */
form { display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
/* flex-direction: column empilha os campos verticalmente */
input, textarea { padding: 10px; border: 1px solid #ccc; border-radius: 6px; font: inherit; }

/* ===== RODAPÉ ===== */
.rodape { background: var(--texto); color: #fff; text-align: center; padding: 24px; font-size: .9rem; }
/* text-align: center centraliza o texto */

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {         /* @media: regras só para telas até 768px (celular) */
  .destaque, .cartoes { grid-template-columns: 1fr; } /* vira uma coluna só */
  .menu { gap: 12px; font-size: .9rem; }
}