/* Reset básico */
* {
  margin: 0;
  /* Remove margens padrão de todos os elementos */
  padding: 0;
  /* Remove padding padrão de todos os elementos */
  box-sizing: border-box;
  /* Faz o padding e border serem incluídos no tamanho total dos elementos */
}

/* Estilo do corpo da página */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  /* Define fonte padrão */
  background: #f8f8f5;
  /* Cor de fundo clara */
  color: #2e3d27;
  /* Cor padrão do texto (verde escuro) */
  min-height: 100vh;
  /* Altura mínima da viewport (tela inteira) */
  display: flex;
  /* Usa flexbox para layout */
  flex-direction: column;
  /* Itens dispostos em coluna */
}

/* Principal área flexível para ocupar espaço disponível */
main {
  flex-grow: 1;
  /* Faz o main crescer para ocupar espaço restante */
}

/* Estilo do cabeçalho */
header {
  background: linear-gradient(90deg, #388e3c, #66bb6a);
  /* Gradiente verde horizontal */
  color: #fff;
  /* Texto branco */
  padding: 1.5rem 0.5rem;
  /* Espaçamento vertical e horizontal */
  text-align: center;
  /* Texto centralizado */
  font-size: 1.5rem;
  /* Tamanho da fonte */
  letter-spacing: 1px;
  /* Espaçamento entre letras */
  box-shadow: 0 2px 8px #0002;
  /* Sombra leve abaixo do header */
  position: relative;
  /* Posição relativa para possíveis elementos filhos posicionados */
}

/* Menu de navegação */
nav {
  display: flex;
  /* Flexbox para os links */
  justify-content: center;
  /* Centraliza horizontalmente */
  align-items: center;
  /* Centraliza verticalmente */
  gap: 2rem;
  /* Espaço entre os links */
  background: #009300;
  /* Fundo verde */
  padding: 1rem 0;
  /* Espaçamento vertical */
  border-radius: 0 0 18px 18px;
  /* Bordas arredondadas só na parte inferior */
  box-shadow: 0 2px 8px #0002;
  /* Sombra leve */
}

/* Estilo dos links do menu */
nav a {
  color: #fff;
  /* Cor do texto branco */
  text-decoration: none;
  /* Remove sublinhado */
  font-size: 1.15rem;
  /* Tamanho da fonte */
  font-weight: 500;
  /* Peso médio da fonte */
  padding: 0.5rem 1.2rem;
  /* Espaçamento interno */
  border-radius: 20px;
  /* Bordas arredondadas */
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
  /* Transição suave para hover */
  display: flex;
  /* Flex para alinhar ícones/texto */
  align-items: center;
  /* Centraliza conteúdo verticalmente */
  gap: 0.5rem;
  /* Espaço entre ícone e texto */
}

/* Efeito ao passar o mouse nos links do menu */
nav a:hover {
  background: #66bb6a;
  /* Fundo verde claro */
  color: #fff;
  /* Texto branco */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* Sombra maior */
}

/* Grid para produtos */
.produtos-grid {
  display: flex;
  /* Flexbox */
  flex-wrap: wrap;
  /* Permite quebra em várias linhas */
  gap: 2rem;
  /* Espaço entre os produtos */
  justify-content: center;
  /* Centraliza os produtos */
  margin-bottom: 2rem;
  /* Espaço inferior */
}

/* Cartão individual do produto */
.produto-card {
  background: linear-gradient(120deg, #77C87A 60%, #88BD8A 100%);
  /* Fundo gradiente verde */
  border-radius: 1.2rem;
  /* Bordas arredondadas */
  box-shadow: 0 4px 24px #388e3c22;
  /* Sombra verde clara */
  padding: 1.2rem 1.2rem 1.5rem 1.2rem;
  /* Espaçamento interno */
  min-width: 260px;
  /* Largura mínima */
  max-width: 270px;
  /* Largura máxima */
  width: 100%;
  /* Largura total possível */
  min-height: 350px;
  /* Altura mínima para alinhar botões */
  display: flex;
  /* Flexbox */
  flex-direction: column;
  /* Organiza itens verticalmente */
  align-items: center;
  /* Centraliza conteúdo */
  transition: transform 0.2s, box-shadow 0.2s;
  /* Transição suave para hover */
  font-size: 1.08rem;
  /* Tamanho da fonte */
  animation: popIn 0.7s;
  /* Animação de entrada */
}

/* Efeito hover no cartão do produto */
.produto-card:hover {
  transform: translateY(-6px) scale(1.03);
  /* Levanta e aumenta levemente */
  box-shadow: 0 8px 24px #0002;
  /* Sombra mais forte */
}

/* Imagem dentro do cartão do produto */
.produto-card img {
  width: 100%;
  /* Ocupa toda largura do cartão */
  height: 200px;
  /* Altura fixa */
  object-fit: contain;
  /* Ajusta imagem mantendo proporção */
  border-radius: 10px;
  /* Bordas arredondadas */
  margin-bottom: 0.7rem;
  /* Espaço abaixo da imagem */
  box-shadow: 0 2px 8px #0001;
  /* Sombra leve */
}

/* Título do produto */
.produto-card h3 {
  font-size: 1.1rem;
  /* Tamanho da fonte */
  margin-bottom: 0.3rem;
  /* Espaço abaixo */
  color: #2e3d27;
  /* Cor do texto */
  text-align: center;
  /* Centralizado */
}

/* Avaliação do produto (ex: estrelas) */
.produto-card .avaliacao {
  color: #ffd600;
  /* Cor amarela */
  font-size: 1.1rem;
  /* Tamanho da fonte */
  margin-bottom: 0.3rem;
  /* Espaço abaixo */
}

/* Descrição ou preço do produto */
.produto-card p {
  font-size: 1rem;
  /* Tamanho da fonte */
  color: #388e3c;
  /* Cor verde */
  margin-bottom: 0.7rem;
  /* Espaço abaixo */
  font-weight: bold;
  /* Negrito */
  text-align: center;
  /* Centraliza o texto */
}

/* Botão do cartão do produto */
.produto-card button {
  background: #388e3c;
  /* Fundo verde */
  color: #fff;
  /* Texto branco */
  border: none;
  /* Sem borda */
  padding: 0.5rem 1.2rem;
  /* Espaçamento interno */
  border-radius: 20px;
  /* Bordas arredondadas */
  font-size: 1rem;
  /* Tamanho da fonte */
  cursor: pointer;
  /* Cursor de mão ao passar */
  font-weight: 500;
  /* Peso da fonte */
  transition: background 0.2s;
  /* Transição suave no background */
  box-shadow: 0 2px 8px #0001;
  /* Sombra leve */
  margin-top: auto;
  /* Alinha o botão na parte inferior do cartão */
}

/* Efeito hover no botão */
.produto-card button:hover {
  background: #2e7031;
  /* Fundo verde mais escuro */
}

/* Centralização de textos principais */
main>section,
.sobre-container,
.carrinho-container,
.compra-container {
  text-align: center;
  /* Centraliza texto */
}

/* Container do login */
.login-container {
  max-width: 400px;
  /* Largura máxima */
  margin: 2.5rem auto;
  /* Margem vertical e centralização horizontal */
  background: #fff;
  /* Fundo branco */
  border-radius: 18px;
  /* Bordas arredondadas */
  box-shadow: 0 4px 16px #0001;
  /* Sombra leve */
  padding: 2rem 1.5rem;
  /* Espaçamento interno */
  text-align: center;
  /* Texto centralizado */
}

/* Formulário de login */
.form-login {
  display: flex;
  /* Flexbox */
  flex-direction: column;
  /* Organiza campos em coluna */
  gap: 1.2rem;
  /* Espaço entre campos */
  margin-bottom: 1.2rem;
  /* Espaço abaixo do formulário */
}

/* Labels do formulário */
.form-login label {
  display: flex;
  /* Flexbox */
  flex-direction: column;
  /* Organiza label e input em coluna */
  align-items: flex-start;
  /* Alinha ao início da linha */
  font-weight: 500;
  /* Peso da fonte */
  color: #388e3c;
  /* Cor verde */
  gap: 0.3rem;
  /* Espaço entre label e input */
}

/* Inputs do formulário */
.form-login input {
  padding: 0.5rem 1rem;
  /* Espaçamento interno */
  border-radius: 20px;
  /* Bordas arredondadas */
  border: 1px solid #bdbdbd;
  /* Borda cinza clara */
  font-size: 1rem;
  /* Tamanho da fonte */
  outline: none;
  /* Remove contorno padrão */
  background: #f8f8f5;
  /* Fundo claro */
  width: 100%;
  /* Largura total do container */
  margin-top: 0.2rem;
  /* Espaço acima */
  transition: border 0.2s;
  /* Transição suave na borda */
}

/* Foco no input */
.form-login input:focus {
  border: 1.5px solid #388e3c;
  /* Borda verde mais grossa */
}

/* Link para login */
.login-link {
  margin-top: 0.5rem;
  /* Espaço acima */
  font-size: 1rem;
  /* Tamanho da fonte */
}

/* Estilo do link dentro da classe login-link */
.login-link a {
  color: #388e3c;
  /* Cor verde */
  text-decoration: underline;
  /* Sublinhado */
  font-weight: bold;
  /* Negrito */
}

/* Mensagens de login e cadastro */
#login-msg,
#cadastro-msg {
  margin-top: 0.7rem;
  /* Espaço acima */
  font-size: 1.05rem;
  /* Tamanho da fonte */
}

/* Link para termos */
.Termos-link {
  margin-top: 0.5rem;
  /* Espaço acima */
  font-size: 1rem;
  /* Tamanho da fonte */
}

/* Estilo do link dentro da classe Termos-link */
.Termos-link a {
  color: #00e1ff;
  /* Cor azul clara */
  text-decoration: underline;
  /* Sublinhado */
  font-weight: bold;
  /* Negrito */
}

/* Container dos detalhes do produto */
.produto-detalhe-container {
  max-width: 700px;
  /* Largura máxima */
  margin: 2.5rem auto;
  /* Margem vertical e centralizado horizontal */
  background: #fff;
  /* Fundo branco */
  border-radius: 18px;
  /* Bordas arredondadas */
  box-shadow: 0 4px 16px #0001;
  /* Sombra leve */
  padding: 2rem 1.5rem;
  /* Espaçamento interno */
  display: flex;
  /* Flexbox */
  flex-wrap: wrap;
  /* Permite quebrar em linhas */
  gap: 2rem;
  /* Espaço entre itens */
  align-items: center;
  /* Alinha itens verticalmente */
  justify-content: center;
  /* Centraliza horizontalmente */
  min-height: 350px;
  /* Altura mínima */
  text-align: center;
  /* Texto centralizado */
}

/* Imagem dos detalhes do produto */
.produto-detalhe-img img {
  width: 260px;
  /* Largura fixa */
  height: 260px;
  /* Altura fixa */
  object-fit: cover;
  /* Corta para preencher sem distorcer */
  border-radius: 16px;
  /* Bordas arredondadas */
  box-shadow: 0 2px 12px #0001;
  /* Sombra leve */
}

/* Informações do produto detalhado */
.produto-detalhe-info {
  flex: 1;
  /* Ocupa espaço restante */
  min-width: 220px;
  /* Largura mínima */
}

/* Título do produto detalhado */
.produto-detalhe-info h1 {
  color: #388e3c;
  /* Cor verde */
  font-size: 2rem;
  /* Fonte grande */
  margin-bottom: 0.5rem;
  /* Espaço abaixo */
}

/* Preço do produto detalhado */
.produto-detalhe-preco {
  color: #388e3c;
  /* Cor verde */
  font-size: 1.3rem;
  /* Tamanho da fonte */
  font-weight: bold;
  /* Negrito */
  margin: 0.7rem 0;
  /* Espaço vertical */
}

/* Descrição do produto detalhado */
.produto-detalhe-desc {
  color: #2e3d27;
  /* Cor do texto */
  margin-bottom: 1.2rem;
  /* Espaço abaixo */
  font-size: 1.1rem;
  /* Tamanho da fonte */
}

/* Responsividade para telas até 900px */
@media (max-width: 900px) {

  .produtos-grid,
  .dicas_videos {
    gap: 1rem;
    /* Menor espaço entre itens */
  }
}

/* Responsividade para telas até 700px */
@media (max-width: 700px) {

  .produtos-grid,
  .dicas_videos {
    flex-direction: column;
    /* Itens empilhados verticalmente */
    align-items: center;
    /* Centraliza itens */
  }

  .produto-card,
  .video-thumb {
    width: 95vw;
    /* Largura quase total da tela */
    min-width: 0;
    /* Remove largura mínima */
  }

  section h2 {
    font-size: 1.2rem;
    /* Título menor */
  }

  /* Navegação responsiva */
  nav {
    flex-direction: column;
    /* Menu em coluna */
    gap: 0.5rem;
    /* Espaço menor */
    padding: 0.5rem 0;
    /* Padding reduzido */
  }

  nav a {
    font-size: 1rem;
    /* Fonte menor */
    padding: 0.4rem 1rem;
    /* Padding menor */
  }

  header {
    padding: 1rem 0.5rem;
    /* Padding reduzido */
    font-size: 1.2rem;
    /* Fonte menor */
  }
}

/* Container do carousel */
.carousel-container {
  display: flex;
  /* Flexbox */
  justify-content: center;
  /* Centraliza horizontalmente */
  align-items: center;
  /* Centraliza verticalmente */
  margin: 2.5rem 0 1.5rem 0;
  /* Margem vertical */
  min-height: 260px;
  /* Altura mínima */
}

/* Container do texto centralizado abaixo do carousel */
.centered-text-container {
  display: flex;
  /* Flexbox */
  justify-content: center;
  /* Centraliza horizontalmente */
  align-items: center;
  /* Centraliza verticalmente */
  margin: 1.5rem 0 2rem 0;
  /* Margem vertical */
  text-align: center;
  /* Texto centralizado */
  padding: 0 1rem;
  /* Padding horizontal */
}

/* Título centralizado */
.centered-title {
  color: #388e3c;
  /* Cor verde */
  font-size: 2.2rem;
  /* Fonte grande */
  font-weight: bold;
  /* Negrito */
  margin: 0;
  /* Sem margem */
  letter-spacing: 1px;
  /* Espaço entre letras */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Sombra leve no texto */
}

/* Container do carousel */
.carousel {
  position: relative;
  /* Posicionamento relativo para botões */
  width: 100%;
  /* Largura total do container */
  max-width: 420px;
  /* Largura máxima */
  min-height: 260px;
  /* Altura mínima */
  border-radius: 1.2rem;
  /* Bordas arredondadas */
  overflow: hidden;
  /* Esconde overflow */
  box-shadow: 0 4px 24px #388e3c22;
  /* Sombra verde clara */
  background: #fff;
  /* Fundo branco */
  display: flex;
  /* Flexbox */
  align-items: center;
  /* Centraliza verticalmente */
  justify-content: center;
  /* Centraliza horizontalmente */
}

/* Imagens dentro do carousel */
.carousel-img {
  display: none;
  /* Escondido por padrão */
  width: 100%;
  /* Largura total */
  height: 260px;
  /* Altura fixa */
  object-fit: contain;
  /* Ajusta imagem sem distorcer */
  border-radius: 1.2rem;
  /* Bordas arredondadas */
  animation: n 0.7s;
  /* Animação (definida em outro lugar) */
}

/* Imagem ativa do carousel */
.carousel-img.active {
  display: block;
  /* Exibe a imagem ativa */
}

/* Botões do carousel */
.carousel-btn {
  position: absolute;
  /* Posicionamento absoluto */
  top: 50%;
  /* Centralizado verticalmente */
  transform: translateY(-50%);
  /* Ajuste vertical */
  background: #388e3cdd;
  /* Fundo verde com transparência */
  border: none;
  /* Sem borda */
  border-radius: 50%;
  /* Botão circular */
  font-size: 2rem;
  /* Fonte grande */
  color: #fff;
  /* Texto branco */
  cursor: pointer;
  /* Cursor de mão */
  padding: 0.2em 0.6em;
  /* Padding interno */
  z-index: 2;
  /* Fica acima de outros elementos */
  opacity: 0.85;
  /* Transparência */
  transition: background 0.2s, transform 0.2s;
  /* Transição suave */
  box-shadow: 0 2px 8px #388e3c33;
  /* Sombra leve */
}

.carousel-btn:hover {
  background: #225024;
  transform: scale(1.1);
}

.carousel-btn.prev {
  left: 12px;
}

.carousel-btn.next {
  right: 12px;
}

/* Motivos */
.motivos-section {
  text-align: center;
  /* Centraliza o texto dentro da seção */
  margin-bottom: 2.5rem;
  /* Espaço abaixo da seção */
  animation: fadeIn 1.5s;
  /* Animação de fade in com duração de 1.5 segundos */
}

.motivos-section h2 {
  color: #388e3c;
  /* Cor verde escura para o título */
  font-size: 2rem;
  /* Tamanho grande para o título */
  margin-bottom: 1.2rem;
  /* Espaço abaixo do título */
  font-weight: bold;
  /* Texto em negrito */
  letter-spacing: 1px;
  /* Espaçamento entre letras */
}

.motivos-list {
  display: flex;
  /* Usa flexbox para layout */
  flex-wrap: wrap;
  /* Permite que os itens quebrem linha */
  justify-content: center;
  /* Centraliza os itens horizontalmente */
  gap: 1.5rem;
  /* Espaçamento entre os itens */
  margin-bottom: 1.5rem;
  /* Espaço abaixo da lista */
}

.motivo-card {
  background: linear-gradient(120deg, #e6f4ea 60%, #c3e6cb 100%);
  /* Fundo com gradiente verde claro */
  border-radius: 1rem;
  /* Bordas arredondadas */
  box-shadow: 0 2px 12px #388e3c22;
  /* Sombra suave com cor verde translúcida */
  padding: 1.2rem 1.5rem;
  /* Espaçamento interno */
  min-width: 180px;
  /* Largura mínima */
  max-width: 220px;
  /* Largura máxima */
  display: flex;
  /* Flexbox para conteúdo interno */
  flex-direction: column;
  /* Itens em coluna */
  align-items: center;
  /* Centraliza itens horizontalmente */
  transition: transform 0.2s, box-shadow 0.2s;
  /* Transição suave para transformações e sombra */
  font-size: 1.08rem;
  /* Tamanho da fonte */
  animation: popIn 0.7s;
  /* Animação de entrada rápida */
}

.motivo-card:hover {
  transform: translateY(-6px) scale(1.04);
  /* Move para cima e aumenta um pouco no hover */
  box-shadow: 0 8px 24px #388e3c33;
  /* Sombra mais forte ao passar o mouse */
}

.motivo-icon {
  font-size: 2.2rem;
  /* Tamanho grande para o ícone */
  margin-bottom: 0.5rem;
  /* Espaço abaixo do ícone */
  display: block;
  /* Exibe como bloco */
}

/* Estilos gerais da página */
body {
  font-family: Arial, sans-serif;
  background: #f9f9f9;
  margin: 0;
  padding: 0;
}

/* Cabeçalho verde do site */
header {
  background: #2e7d32;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
}

/* Área que exibe os produtos */
.produtos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  gap: 20px;
}

/* Cada card de produto */
.produto-card {
  background: white;
  border-radius: 12px;
  padding: 15px;
  width: 220px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: 0.3s;
}

/* Efeito ao passar o mouse */
.produto-card:hover {
  transform: scale(1.03);
}

/* Imagem do produto */
.produto-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Botão de adicionar ao carrinho */
.btn-destaque {
  background: #388e3c;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-destaque:hover {
  background: #2e7d32;
}

/* Estilo de cada item dentro do carrinho */
.carrinho-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  background: white;
  border-radius: 8px;
}

/* Imagem dentro do carrinho */
.carrinho-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-right: 15px;
  border-radius: 8px;
}

/* Div que contém as informações do produto */
.carrinho-info {
  flex: 1;
}

/* Área dos botões de quantidade (+ e -) */
.quantidade-controle {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}

/* Estilo dos botões + e - */
.quantidade-controle button {
  background: #2e7d32;
  color: white;
  border: none;
  border-radius: 5px;
  width: 25px;
  height: 25px;
  cursor: pointer;
  font-weight: bold;
}

/* Efeito ao passar o mouse no + e - */
.quantidade-controle button:hover {
  background: #1b5e20;
}

/* Número que mostra a quantidade */
.quantidade-controle span {
  min-width: 20px;
  text-align: center;
  font-weight: bold;
}

/* Botão de remover item */
.carrinho-remover {
  background: #e53935;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.carrinho-remover:hover {
  background: #c62828;
}

/* Total do carrinho */
.carrinho-total {
  font-size: 1.2em;
  font-weight: bold;
  text-align: right;
  margin: 20px 0;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
}

/* Mensagem quando o carrinho estiver vazio */
.carrinho-vazio {
  text-align: center;
  padding: 40px;
  color: #666;
}

/* Botões finais (esvaziar/finalizar) */
.botoes-final {
  text-align: center;
  margin: 20px;
}

.botoes-final button {
  background: #2e7d32;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin: 0 10px;
}

.botoes-final button:hover {
  background: #1b5e20;
}

/* Dicas e Vídeos */
.dicas-videos {
  display: flex;
  /* Flexbox para layout */
  gap: 1.5rem;
  /* Espaço entre os itens */
  justify-content: center;
  /* Centraliza horizontalmente */
  flex-wrap: wrap;
  /* Permite quebra de linha */
  margin: 1rem 0 1.5rem 0;
  /* Margem superior e inferior */
}

.video-thumb {
  background: linear-gradient(120deg, #77C87A 60%, #88BD8A 100%);
  /* Fundo gradiente verde */
  border-radius: 1.2rem;
  /* Bordas arredondadas */
  box-shadow: 0 4px 24px #388e3c22;
  /* Sombra leve verde */
  padding: 1.2rem 1.2rem 1.5rem 1.2rem;
  /* Espaçamento interno */
  min-width: 320px;
  /* Largura mínima */
  max-width: 350px;
  /* Largura máxima */
  width: 100%;
  /* Ocupa toda a largura do contêiner */
  display: flex;
  /* Flexbox para conteúdo */
  flex-direction: column;
  /* Coluna */
  align-items: center;
  /* Centraliza horizontalmente */
  transition: transform 0.2s, box-shadow 0.2s;
  /* Transição suave para transformações e sombra */
  font-size: 1.08rem;
  /* Tamanho da fonte */
  animation: popIn 0.7s;
  /* Animação de entrada */
}

.video-thumb:hover {
  transform: translateY(-4px) scale(1.03);
  /* Eleva e aumenta levemente ao passar o mouse */
  box-shadow: 0 6px 18px #0002;
  /* Sombra mais forte */
}

.video-thumb img {
  width: 100%;
  /* Largura total da imagem */
  height: 260px;
  /* Altura fixa */
  object-fit: contain;
  /* Mantém proporção da imagem */
  border-radius: 1.2rem;
  /* Bordas arredondadas */
  animation: n 0.7s;
  /* Animação (definida em outro lugar) */
}

.video-thumb a {
  display: block;
  /* Exibe como bloco */
  color: #388e3c;
  /* Cor verde */
  font-weight: 500;
  /* Peso da fonte médio */
  text-decoration: none;
  /* Remove sublinhado */
  padding: 0.7rem 0.5rem;
  /* Espaçamento interno */
  width: 100%;
  /* Ocupa toda largura do contêiner */
  text-align: center;
  /* Centraliza o texto */
  transition: background 0.2s, color 0.2s;
  /* Transição suave para cor e fundo */
}

.video-thumb a:hover {
  background: #e8f5e9;
  /* Fundo verde claro ao passar o mouse */
  color: #1b5e20;
  /* Texto verde escuro */
}

.dicas-link {
  text-align: center;
  /* Centraliza o texto */
  margin-bottom: 2rem;
  /* Espaço abaixo */
}

/* Estilo do Carrinho*/
.carrinho-container {
  max-width: 450px;
  /* Largura máxima do contêiner */
  margin: 3rem auto;
  /* Margem superior e inferior e centralização horizontal */
  background: #fff;
  /* Fundo branco */
  border-radius: 16px;
  /* Bordas arredondadas */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Sombra suave */
  padding: 2rem 1.5rem;
  /* Espaçamento interno */
  text-align: center;
  /* Centraliza o texto */
}

.carrinho-container h1 {
  color: #388e3c;
  /* Cor verde */
  font-size: 1.6rem;
  /* Tamanho do título */
  margin-bottom: 1.5rem;
  /* Espaço abaixo do título */
}

.carrinho-acoes {
  display: flex;
  /* Flexbox para layout */
  justify-content: center;
  /* Centraliza horizontalmente */
  gap: 1rem;
  /* Espaço entre botões */
  margin-top: 1.5rem;
  /* Espaço acima */
}

.carrinho-acoes a {
  padding: 0.7rem 1.5rem;
  /* Espaçamento interno */
  border-radius: 25px;
  /* Bordas arredondadas estilo pílula */
  font-weight: 600;
  /* Texto semi-negrito */
  text-decoration: none;
  /* Remove sublinhado */
  display: inline-flex;
  /* Exibe como flex container inline */
  align-items: center;
  /* Centraliza verticalmente */
  gap: 0.5rem;
  /* Espaço entre ícones e texto */
  transition: background 0.3s, transform 0.2s;
  /* Transições suaves */
}

/* Botão continuar */
.btn-continuar {
  background: #f0f0f0;
  /* Fundo cinza claro */
  color: #388e3c;
  /* Texto verde */
}

/* Botão finalizar */
#btn-finalizar {
  background: #388e3c;
  /* Fundo verde */
  color: #fff;
  /* Texto branco */
}

.carrinho-acoes a:hover {
  transform: scale(1.05);
  /* Aumenta um pouco no hover */
}

/*Informações e Dicas*/
.dicas-lista {
  display: flex;
  /* Flexbox para layout */
  flex-wrap: wrap;
  /* Permite quebra de linha */
  justify-content: center;
  /* Centraliza horizontalmente */
  gap: 1.5rem;
  /* Espaço entre os itens */
  margin-top: 2rem;
  /* Espaço acima */
}

.dica-card {
  flex: 1 1 200px;
  /* Flex-grow e flex-shrink com base de 200px */
  max-width: 220px;
  /* Largura máxima */
  background: #eaf6eb;
  /* Fundo verde claro */
  border-radius: 16px;
  /* Bordas arredondadas */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Sombra leve */
  padding: 1.2rem 1rem;
  /* Espaçamento interno */
  text-align: center;
  /* Centraliza texto */
  transition: transform 0.2s, box-shadow 0.2s;
  /* Transições suaves */
}

.dica-card:hover {
  transform: translateY(-5px);
  /* Levanta o card ao passar o mouse */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  /* Sombra mais forte */
}

/* Título de cada dica */
.dica-card h2 {
  font-size: 1.1rem;
  /* Tamanho do título */
  font-weight: bold;
  /* Negrito */
  margin-bottom: 0.7rem;
  /* Espaço abaixo do título */
  display: flex;
  /* Flexbox para alinhar itens */
  align-items: center;
  /* Centraliza verticalmente */
  justify-content: center;
  /* Centraliza horizontalmente */
  gap: 0.4rem;
  /* Espaço entre ícones e texto */
  color: #2e7d32;
  /* Verde escuro */
}

/* Texto das dicas */
.dica-card p {
  font-size: 0.95rem;
  /* Tamanho do texto */
  color: #2e3d27;
  /* Cor texto escuro */
  line-height: 1.4rem;
  /* Altura da linha para leitura */
}

.projetos-lista {
  display: flex;
  /* Define que o container usa flexbox para organizar os filhos */
  flex-wrap: wrap;
  /* Permite que os itens quebrem para a próxima linha, se necessário */
  justify-content: center;
  /* Centraliza horizontalmente os itens dentro do container */
  gap: 1.5rem;
  /* Espaço fixo entre os itens flex (horizontal e vertical) */
  margin-top: 2rem;
  /* Espaço acima da lista de projetos */
}

.projeto-card {
  flex: 1 1 200px;
  /* Flex-grow: 1 (cresce), flex-shrink: 1 (encolhe), flex-basis: 200px (tamanho base) */
  max-width: 220px;
  /* Largura máxima do cartão para não ficar muito grande */
  background: #eaf6eb;
  /* Cor de fundo suave (verde claro) */
  border-radius: 16px;
  /* Bordas arredondadas */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Sombra suave para profundidade */
  padding: 1.2rem 1rem;
  /* Espaçamento interno (topo/baixo 1.2rem, esquerda/direita 1rem) */
  text-align: center;
  /* Centraliza texto dentro do cartão */
  transition: transform 0.2s, box-shadow 0.2s;
  /* Animação suave para transformações e sombra */
}

.projeto-card:hover {
  transform: translateY(-5px);
  /* Move o cartão 5px para cima ao passar o mouse */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  /* Aumenta a sombra para destaque */
}

/* Título de cada projeto */
.projeto-card h2 {
  font-size: 1.1rem;
  /* Tamanho da fonte do título */
  font-weight: bold;
  /* Negrito */
  margin-bottom: 0.7rem;
  /* Espaço abaixo do título */
  display: flex;
  /* Usa flexbox para o conteúdo do título */
  align-items: center;
  /* Alinha verticalmente no centro */
  justify-content: center;
  /* Centraliza horizontalmente */
  gap: 0.4rem;
  /* Espaço entre elementos dentro do título */
  color: #2e7d32;
  /* Cor verde escura para o texto */
}

/* Texto dos projetos */
.projeto-card p {
  font-size: 0.95rem;
  /* Tamanho da fonte para o texto */
  color: #2e3d27;
  /* Cor verde escuro mais suave */
  line-height: 1.4rem;
  /* Espaçamento entre linhas */
  margin-bottom: 1rem;
  /* Espaço abaixo do parágrafo */
}

/* Botão dos projetos */
.projeto-card .btn-destaque {
  display: inline-block;
  /* Exibe o botão como um bloco em linha */
  padding: 0.5rem 1rem;
  /* Espaçamento interno do botão */
  background: #2e7d32;
  /* Fundo verde escuro */
  color: #fff;
  /* Cor do texto branco */
  text-decoration: none;
  /* Remove sublinhado do link */
  border-radius: 20px;
  /* Bordas arredondadas */
  font-size: 0.9rem;
  /* Tamanho da fonte */
  font-weight: bold;
  /* Negrito */
  transition: background 0.2s, transform 0.2s;
  /* Animação suave para cor e transformação */
}

.projeto-card .btn-destaque:hover {
  background: #1b5e20;
  /* Fundo verde ainda mais escuro ao passar o mouse */
  transform: translateY(-2px);
  /* Move o botão levemente para cima */
}

.login-container {
  background: #fff;
  /* Fundo branco */
  max-width: 350px;
  /* Largura máxima do container */
  margin: 3rem auto;
  /* Espaço em cima e embaixo, centralizado horizontalmente */
  padding: 2rem;
  /* Espaçamento interno */
  border-radius: 12px;
  /* Bordas arredondadas */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Sombra suave */
  text-align: center;
  /* Centraliza o texto */
}

/* Título do container de login */
.login-container h1 {
  font-size: 1.5rem;
  /* Tamanho da fonte */
  font-weight: bold;
  /* Negrito */
  color: #2e7d32;
  /* Cor verde escura */
  margin-bottom: 1.5rem;
  /* Espaço abaixo do título */
  display: flex;
  /* Usa flexbox */
  align-items: center;
  /* Alinha verticalmente no centro */
  justify-content: center;
  /* Centraliza horizontalmente */
  gap: 0.4rem;
  /* Espaço entre elementos */
}

/* Labels do formulário de login */
.form-login label {
  display: block;
  /* Faz o label ocupar toda a linha */
  text-align: left;
  /* Alinha o texto à esquerda */
  font-weight: bold;
  /* Negrito */
  color: #2e7d32;
  /* Cor verde escura */
  margin-bottom: 0.4rem;
  /* Espaço abaixo do label */
  font-size: 0.9rem;
  /* Tamanho da fonte */
}

/* Campos de input do formulário */
.form-login input {
  width: 100%;
  /* Ocupa toda a largura do container pai */
  padding: 0.7rem;
  /* Espaçamento interno */
  margin-bottom: 1rem;
  /* Espaço abaixo do input */
  border: 1px solid #ccc;
  /* Borda cinza clara */
  border-radius: 25px;
  /* Bordas arredondadas */
  font-size: 0.95rem;
  /* Tamanho da fonte */
  outline: none;
  /* Remove contorno padrão ao focar */
  transition: border 0.2s;
  /* Animação suave na borda */
}

.form-login input:focus {
  border: 1px solid #2e7d32;
  /* Borda verde escura quando o campo está focado */
}

/* Botão principal */
.btn-destaque {
  padding: 0.8rem;
  /* Espaçamento interno */
  border: none;
  /* Remove borda padrão */
  border-radius: 25px;
  /* Bordas arredondadas */
  background: #2e7d32;
  /* Fundo verde escuro */
  color: white;
  /* Texto branco */
  font-weight: bold;
  /* Negrito */
  font-size: 1rem;
  /* Tamanho da fonte */
  cursor: pointer;
  /* Cursor de ponteiro ao passar o mouse */
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  /* Animações suaves */
}

.btn-destaque:hover {
  background: #1b5e20;
  /* Fundo verde mais escuro ao passar o mouse */
  transform: translateY(-2px);
  /* Move o botão para cima levemente */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  /* Sombra mais forte */
}

/* Link abaixo do formulário */
.login-link {
  margin-top: 1rem;
  /* Espaço acima do link */
  font-size: 0.9rem;
  /* Tamanho da fonte */
}

.login-link a {
  color: #2e7d32;
  /* Cor verde escura */
  font-weight: bold;
  /* Negrito */
  text-decoration: none;
  /* Remove sublinhado */
}

.login-link a:hover {
  text-decoration: underline;
  /* Sublinha ao passar o mouse */
}

footer {
  background: #DAFFD4;
  /* cor de fundo (ajuste se quiser) */
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 12px 12px;
  /* bordas arredondadas só embaixo */
}

/* Estilo do rodapé */
footer {
  background: #DAFFD4;
  /* Cor de fundo verde claro */
  padding: 1rem;
  /* Espaçamento interno em todos os lados */
  display: flex;
  /* Usa flexbox para organizar elementos */
  align-items: center;
  /* Alinha verticalmente ao centro */
  justify-content: space-between;
  /* Distribui espaço entre elementos, primeiro à esquerda, último à direita */
  border-radius: 0 0 12px 12px;
  /* Bordas arredondadas só nos cantos inferiores */
}

/* Parte esquerda do footer */
.footer-left {
  display: flex;
  /* Usa flexbox para os itens internos */
  align-items: center;
  /* Alinha verticalmente ao centro */
}

/* Parte central do footer */
.footer-center {
  flex: 1;
  /* Ocupa todo espaço disponível */
  text-align: center;
  /* Centraliza o texto */
}

/* Texto dentro da parte central do footer */
.footer-center p {
  margin: 0;
  /* Remove margem padrão */
  font-size: 1.1rem;
  /* Tamanho da fonte */
  color: #000000;
  /* Cor do texto preta */
}

/* Parte direita do footer */
.footer-right {
  display: flex;
  /* Usa flexbox para os itens internos */
  align-items: center;
  /* Alinha verticalmente ao centro */
  gap: 0.5rem;
  /* Espaço entre os elementos internos */
}

/* Imagens dentro do footer */
footer img {
  height: 50px;
  /* Altura fixa da imagem */
  width: auto;
  /* Largura ajusta proporcionalmente */
}

/* Ícones dentro do footer */
footer i {
  font-size: 1.5rem;
  /* Tamanho da fonte dos ícones */
  color: #000000;
  /* Cor preta para os ícones */
}

/* Outra regra para footer que pode sobrescrever a primeira */
/* Alinha texto centralizado e define padding e cor */
footer {
  text-align: center;
  /* Centraliza texto */
  padding: 20px;
  /* Espaçamento interno */
  background-color: #DAFFD4;
  /* Cor de fundo verde claro (mesma anterior) */
  color: #fff;
  /* Cor do texto branco */
  margin-top: 40px;
  /* Espaço acima do footer */
}

/* Classe para texto dentro do footer */
.footer-text {
  font-size: 0.9rem;
  /* Tamanho da fonte */
}

/* Container da seção Finalizar Compra */
.checkout-container {
  max-width: 420px;
  /* Largura máxima do container */
  margin: 3rem auto;
  /* Espaço em cima e embaixo, centralizado horizontalmente */
  background: #fff;
  /* Fundo branco */
  border-radius: 7px;
  /* Bordas arredondadas */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  /* Sombra suave */
  padding: 40px;
  /* Espaçamento interno */
  text-align: center;
  /* Centraliza texto */
}

/* Container para os métodos de pagamento */
.metodos-pagamento {
  display: flex;
  /* Usa flexbox para organizar os botões */
  flex-direction: row;
  /* Organiza os botões horizontalmente */
  justify-content: center;
  /* Centraliza os botões horizontalmente */
  gap: 20px;
  /* Espaço maior entre os botões para separá-los */
  margin-top: 10px;
  /* Espaço acima do container */
  flex-wrap: wrap;
  /* Permite quebra de linha se necessário em telas pequenas */
}

/* Labels dentro do container Finalizar Compra */
.checkout-container label {
  display: block;
  /* Faz o label ocupar linha inteira */
  text-align: left;
  /* Alinha o texto à esquerda */
  font-weight: bold;
  /* Negrito */
  color: #2e7d32;
  /* Cor verde escura */
  margin-bottom: 1px;
  /* Pequeno espaço abaixo */
}

/* Inputs e selects dentro do container */
.checkout-container input,
.checkout-container select {
  width: 100%;
  /* Ocupa toda a largura disponível */
  padding: 10px;
  /* Espaçamento interno */
  margin-bottom: 10px;
  /* Espaço abaixo */
  border: 3px solid #2e7d32;
  /* Borda verde escura grossa */
  border-radius: 25px;
  /* Bordas arredondadas */
  font-size: 20px;
  /* Tamanho da fonte grande */
  background: #f8f8f5;
  /* Fundo claro */
}

/* Botão dentro do container Finalizar Compra */
.checkout-container button {
  width: 100%;
  /* Ocupa toda a largura */
  padding: 0.8rem;
  /* Espaçamento interno */
  border: 2px solid #2e7d32;
  /* Borda verde escura */
  border-radius: 25px;
  /* Bordas arredondadas */
  background: #fff;
  /* Fundo branco */
  color: #2e7d32;
  /* Cor do texto verde escura */
  font-weight: bold;
  /* Negrito */
  cursor: pointer;
  /* Cursor de mão ao passar o mouse */
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  /* Animações suaves */
}

/* Efeito hover no botão dentro do container de checkout */
.checkout-container button:hover {
  background: #e8f5e9;
  /* Muda o fundo para verde claro ao passar o mouse */
}

/* Posicionamento do logo */
#logo {
  position: absolute;
  /* Posição absoluta na tela */
  top: 10px;
  /* Distância de 10px do topo */
  left: 10px;
  /* Distância de 10px da esquerda */
  width: 60px;
  /* Largura fixa de 60px */
  height: auto;
  /* Altura ajusta proporcionalmente */
  z-index: 10;
  /* Fica acima de outros elementos */
}

/* Estilo geral para todos os títulos h1 */
h1 {
  font-size: 2.5rem;
  /* Tamanho grande para destaque */
  margin: 0;
  /* Remove margem padrão */
}

/* Container principal da página */
.container {
  max-width: 900px;
  /* Largura máxima do container */
  margin: 30px auto;
  /* Espaço acima e abaixo, centralizado horizontalmente */
  padding: 20px;
  /* Espaçamento interno */
  background-color: #fff;
  /* Fundo branco */
  border-radius: 8px;
  /* Bordas arredondadas */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Sombra leve para profundidade */
}

/* Estilo geral para títulos h2 */
h2 {
  color: #2c6e49;
  /* Cor verde escura */
  font-size: 1.8rem;
  /* Tamanho médio para títulos */
  margin-bottom: 10px;
  /* Espaço abaixo do título */
}

/* Estilo para parágrafos e itens de lista */
p,
li {
  font-size: 1rem;
  /* Tamanho padrão de texto */
  line-height: 1.6;
  /* Espaçamento entre linhas para melhor leitura */
  margin-bottom: 15px;
  /* Espaço abaixo de cada texto */
}

/* Estilo para listas não ordenadas */
ul {
  padding-left: 20px;
  /* Espaço à esquerda para identação dos itens */
}

/* Classe para informações de contato */
.contact-info {
  font-weight: bold;
  /* Texto em negrito */
}

/* Botão de confirmar com estilo principal */
.btn-confirmar {
  display: inline-block;
  /* Exibe como bloco em linha */
  background-color: #4CAF50;
  /* Fundo verde */
  color: white;
  /* Texto branco */
  padding: 12px 24px;
  /* Espaçamento interno */
  font-size: 16px;
  /* Tamanho da fonte */
  border-radius: 5px;
  /* Bordas arredondadas pequenas */
  text-decoration: none;
  /* Remove sublinhado */
  cursor: pointer;
  /* Cursor de mãozinha */
  transition: background-color 0.3s ease;
  /* Transição suave na cor do fundo */
}

/* Efeito hover para o botão confirmar */
.btn-confirmar:hover {
  background-color: #45a049;
  /* Verde mais escuro ao passar o mouse */
}

/* Botão de voltar com estilo similar */
.btn-voltar {
  display: inline-flex;
  /* Exibe como flex container em linha */
  align-items: center;
  /* Alinha itens verticalmente no centro */
  text-decoration: none;
  /* Remove sublinhado */
  background-color: #4CAF50;
  /* Fundo verde */
  color: white;
  /* Texto branco */
  padding: 12px;
  /* Espaçamento interno */
  font-size: 16px;
  /* Tamanho da fonte */
  border-radius: 5px;
  /* Bordas arredondadas pequenas */
  transition: background-color 0.3s ease;
  /* Transição suave na cor do fundo */
}

/* Efeito hover para o botão voltar */
.btn-voltar:hover {
  background-color: #45a049;
  /* Verde mais escuro ao passar o mouse */
}

/* Estilo da seta para esquerda usada no botão voltar */
.arrow-left {
  width: 0;
  /* Sem largura */
  height: 0;
  /* Sem altura */
  border-top: 5px solid transparent;
  /* Borda superior transparente */
  border-bottom: 5px solid transparent;
  /* Borda inferior transparente */
  border-right: 10px solid white;
  /* Borda direita branca, formando a seta */
  margin-right: 10px;
  /* Espaço à direita da seta */
}

/* Estilos para o botão excluir */
.btn-excluir {
  background-color: #f44336;
  /* Cor de fundo vermelha (padrão para "Excluir") */
  color: white;
  /* Texto branco */
  border: none;
  /* Remove a borda */
  border-radius: 5px;
  /* Bordas arredondadas */
  padding: 8px 16px;
  /* Espaçamento interno */
  font-size: 14px;
  /* Tamanho da fonte */
  cursor: pointer;
  /* Aponta como um botão clicável */
  transition: background-color 0.3s ease, transform 0.2s ease;
  /* Transição suave para efeitos */
}

/* Efeito de hover - quando o mouse passa sobre o botão */
.btn-excluir:hover {
  background-color: #d32f2f;
  /* Cor de fundo um pouco mais escura */
  transform: scale(1.05);
  /* Aumenta um pouco o tamanho do botão */
}

/* Efeito de foco - quando o botão é focado (geralmente por teclado ou clique) */
.btn-excluir:focus {
  outline: none;
  /* Remove o contorno padrão de foco */
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.6);
  /* Adiciona um contorno vermelho suave */
}

/* Efeito de clique - quando o botão é pressionado */
.btn-excluir:active {
  background-color: #c62828;
  /* Cor de fundo ainda mais escura ao clicar */
  transform: scale(0.98);
  /* Dá a impressão de "pressionado" */
}

/* Estilo das fotos */
/* Estilo para a foto do integrante */
.foto-integrante {
  width: 120px;
  /* largura fixa de 120 pixels */
  height: 120px;
  /* altura fixa de 120 pixels */
  border-radius: 50%;
  /* deixa a imagem circular */
  object-fit: cover;
  /* a imagem preenche o espaço cortando partes se necessário */
  margin-bottom: 15px;
  /* espaço abaixo da foto */
  border: 3px solid #4caf50;
  /* borda verde sólida de 3 pixels */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* sombra suave para dar profundidade */
  transition: transform 0.3s ease;
  /* animação suave para transformações */
}

/* Efeito ao passar o mouse sobre a foto */
.foto-integrante:hover {
  transform: scale(1.05);
  /* aumenta a foto em 5% */
}

/* Centraliza o texto dentro do cartão de dica */
.dica-card {
  text-align: center;
}

/* Espaçamento acima da seção de links sociais */
.redes-sociais {
  margin-top: 15px;
}

/* Estilo para os links das redes sociais */
.redes-sociais a {
  color: #4caf50;
  /* cor verde para os ícones */
  font-size: 24px;
  /* tamanho dos ícones */
  margin: 0 10px;
  /* espaço horizontal entre os ícones */
  transition: color 0.3s ease, transform 0.3s ease;
  /* animação suave para cor e tamanho */
  text-decoration: none;
  /* remove sublinhado dos links */
}

/* Efeito ao passar o mouse sobre os links sociais */
.redes-sociais a:hover {
  color: #2e7d32;
  /* muda para um verde mais escuro */
  transform: scale(1.1);
  /* aumenta o ícone em 10% */
}

/* Alinha verticalmente os ícones dentro dos links */
.redes-sociais i {
  vertical-align: middle;
}

.endereco {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 3px solid #2e7d32;
  border-radius: 25px;
  font-size: 20px;
  background: #f8f8f5;
}


.baixo {
  display: flex;
}

.entrega {
  display: flex;
  width: 200px;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}