/* ===============================
HERO
=============================== */

.hero {
  min-height: 100vh;
  height: auto;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--branco);

  background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.3),
                rgba(0, 0, 0, 0.7)
              ),
              url("../img/banner.jpeg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: var(--rem-2);
}

.hero-conteudo {
  display: flex; /* Usa Flexbox para organizar o conteúdo */
  flex-direction: column; /* Coloca os elementos em coluna */
  align-items: center; /* Centraliza os elementos horizontalmente */
  justify-content: center; /* Centraliza verticalmente */
  gap: var(--rem-1); /* Espaço entre os elementos */
}

.hero-conteudo img {
  width: 300px; /* Define largura fixa da imagem */
  height: auto; /* Mantém a proporção da imagem */
}

.hero h1 {
  font-size: var(--rem-25); /* Define o tamanho do título */
  margin-bottom: var(--rem-15); /* Espaço abaixo do título */
}

.hero p {
  font-size: 1.125rem; /* Tamanho da fonte do parágrafo */
  max-width: 600px; /* Limita largura para melhorar leitura */
  margin-bottom: var(--rem-2); /* Espaço abaixo do texto */
}

/* ===============================
BOTÃO PRINCIPAL
=============================== */

.btn-principal {
  background: var(--verde); /* Cor de fundo do botão */
  color: var(--branco); /* Cor do texto */
  
  padding: var(--rem-1) var(--rem-25); /* Espaçamento interno vertical e horizontal */
  
  border-radius: var(--radius); /* Arredonda as bordas */
  
  font-weight: bold; /* Deixa o texto em negrito */
  
  text-decoration: none; /* Remove o sublinhado de links */
  
  transition: 0.3s; /* Cria animação suave nas mudanças de estilo */
  
  align-items: center; /* Alinha conteúdo interno (útil se usar flex futuramente) */
}

.btn-principal:hover {
  background: var(--verde-escuro); /* Muda a cor quando o mouse passa por cima */
}

/* ===============================
CATEGORIAS
=============================== */

.categorias {
  padding: var(--rem-5) var(--rem-125); /* Espaçamento interno vertical e horizontal */
  text-align: center; /* Centraliza o texto */
  background: var(--branco); /* Fundo branco da seção */
}

.categorias h2 {
  font-size: var(--rem-2); /* Tamanho do título da seção */
  margin-bottom: var(--rem-3); /* Espaço abaixo do título */
}

.categorias-container {
  display: flex; /* Usa Flexbox para organizar os cards */
  justify-content: center; /* Centraliza os cards horizontalmente */
  
  gap: 1.875rem; /* Espaço entre os cards */
  
  flex-wrap: wrap; /* Permite quebrar linha em telas menores */
  
  max-width: 1200px; /* Limita a largura máxima do container */
  
  margin: auto; /* Centraliza o container na página */
}

.categoria-card {
  display: flex; /* Usa Flexbox */
  align-items: center; /* Centraliza verticalmente o conteúdo */
  justify-content: center; /* Centraliza horizontalmente */
  
  width: 260px; /* Largura do card */
  height: 140px; /* Altura do card */
  
  font-size: 1.375rem; /* Tamanho do texto */
  font-weight: bold; /* Texto em negrito */
  
  background: var(--azul-medio); /* Cor de fundo */
  color: var(--branco); /* Cor do texto */
  
  border-radius: var(--radius); /* Bordas arredondadas */
  
  text-decoration: none; /* Remove sublinhado caso seja link */
  
  /* Sombra para dar efeito de elevação */
  box-shadow: 0 0.625rem 1.5625rem rgba(0,0,0,0.15);
  
  transition: all 0.3s ease; /* Animação suave para transformações */
}

.categoria-card:hover {
  transform: translateY(-0.5rem) scale(1.03); /* Move o card para cima e aumenta um pouco */
  background: var(--azul); /* Muda a cor ao passar o mouse */
  box-shadow: 0 0.9375rem 1.875rem rgba(0,0,0,0.25); /* Aumenta a sombra para efeito de profundidade */
}

/* ===============================
CTA FINAL
=============================== */

.cta {
  color: var(--branco); /* Cor do texto */
  text-align: center; /* Centraliza o texto */
  padding: var(--rem-6) var(--rem-15); /* Espaçamento interno (topo, fundo, esquerda e direita) */
  display: flex; /* Usa o Flexbox */
  flex-direction: column; /* Organiza os elementos em coluna */
  align-items: center; /* Centraliza os itens horizontalmente */
  justify-content: center; /* Centraliza os itens verticalmente */
  gap: var(--rem-15); /* Espaço entre os elementos */
}

.cta h2 {
  font-size: var(--rem-2); /* Tamanho do título */
  font-weight: 700; /* Tamanho de fonte em negrito */
  margin: 0; /* Remove a margem padrão */
}

.cta p {
  font-size: 1.125rem; /* Tamanho do texto do parágrafo */
  line-height: 1.6; /* Define o espaçamento entre as linhas do texto */
  margin: 0; /* Remove a margem padrão */
  max-width: 600px; /* Limita a largura do parágrafo */
}

.btn-cta {
  background: var(--verde-escuro); /* Cor de fundo do botão */
  color: var(--branco); /* Cor do texto */
  padding: var(--rem-1) var(--rem-25); /* Espaçamento interno (vertical e horizontal) */
  border-radius: var(--radius); /* Bordas arredondadas */
  font-weight: bold; /* Texto em negrito */
  text-decoration: none; /* Remove o sublinhado do link */
  transition: all 0.3s; /* Animação suave para transições */
  display: inline-block; /* Exibe o botão como um bloco inline */
  box-shadow: 0 var(--rem-06) 16rem rgba(0,0,0,0.25); /* Sombra leve no botão */
}

.btn-cta:hover {
  background: var(--verde); /* Muda a cor ao passar o mouse */
  transform: translateY(-2px); /* Move o botão ligeiramente para cima */
  box-shadow: 0 var(--rem-08) var(--rem-2) rgba(0,0,0,0.35); /* Aumenta a sombra ao passar o mouse */
}

/* TABLETS (telas verticais ou médias) */
@media (max-width: 1024px) {
  .hero {
    background: linear-gradient(
                  to bottom,
                  rgba(0, 0, 0, 0.3),
                  rgba(0, 0, 0, 0.7)
                ),
                url("../img/banner2.jpeg");

    background-size: cover;
    background-position: center;
  }
}

/* ===============================
MEDIA QUERY CELULAR PEQUENO
=============================== */
@media (max-width: 480px) {

  /* ===============================
   HERO (SEÇÃO PRINCIPAL DO SITE)
   =============================== */
  .hero {
    min-height: 70vh; /* mantém impacto visual sem exagerar */

    background: linear-gradient(
                  to bottom,
                  rgba(0, 0, 0, 0.3),
                  rgba(0, 0, 0, 0.7)
                ),
                url("../img/banner2.jpeg");

    background-size: cover;          /* mantém sem espaço vazio */
    background-position: center top; /* evita cortar o foco principal */
    background-repeat: no-repeat;

    padding: var(--rem-2);
  }

.hero-conteudo img {
  width: 200px; /* Define uma largura menor para a imagem dentro do hero */
}

.hero h1 {
  font-size: 1.8rem; /* Diminui o tamanho do título principal */
  margin-bottom: var(--rem-1); /* Espaço abaixo do título */
}

.hero p {
  font-size: var(--rem-1); /* Define o tamanho do texto descritivo */
  max-width: 90%; /* Limita a largura do texto para melhorar a leitura */
  margin-bottom: var(--rem-15); /* Espaço abaixo do parágrafo */
}

.btn-principal {
  padding: 0.75rem 2rem; /* Espaçamento interno do botão (vertical e horizontal) */
  font-size: 0.9rem; /* Tamanho da fonte do botão */
}


/* ===============================
   CATEGORIAS
   =============================== */

.categorias h2 {
  font-size: var(--rem-15); /* Define o tamanho do título da seção de categorias */
  margin-bottom: var(--rem-2); /* Espaço abaixo do título */
}

.categorias-container {
  gap: var(--rem-1); /* Define o espaço entre os cards de categoria */
}

.categoria-card {
  width: 180px; /* Define a largura do card de categoria */
  height: 100px; /* Define a altura do card */
  font-size: var(--rem-1); /* Define o tamanho do texto dentro do card */
}

/* ===============================
   CTA FINAL (CALL TO ACTION)
   =============================== */

.cta {
  padding: 4rem 1rem; /* Espaçamento interno grande para destacar a seção */
  gap: var(--rem-1); /* Espaço entre os elementos internos */
}

.cta h2 {
  font-size: var(--rem-15); /* Define o tamanho do título da seção CTA */
}

.cta p {
  font-size: 0.95rem; /* Define o tamanho do texto */
  max-width: 90%; /* Limita a largura do texto para melhor leitura */
}

.btn-cta {
  padding: 0.75rem 2rem; /* Espaçamento interno do botão CTA */
  font-size: 0.9rem; /* Define o tamanho do texto do botão */
}
}

/* ===============================
CELULAR PEQUENO (≤360px) - COMPLETO
=============================== */

@media (max-width: 380px) {

 /* ===============================
   HERO (SEÇÃO PRINCIPAL DO SITE)
   =============================== */

.hero {
  height: 55vh; /* Define a altura da seção hero como 55% da altura da tela */
  padding: var(--rem-05); /* Define o padding (espaçamento interno) como 0.5rem */
}

.hero-conteudo {
  max-width: 280px; /* Limita a largura máxima do conteúdo do hero */
  gap: var(--rem-05); /* Define o espaçamento entre os elementos dentro do hero */
}

.hero-conteudo img {
  width: 150px; /* Define a largura da imagem dentro do hero */
  height: auto; /* A altura é ajustada automaticamente para manter a proporção da imagem */
}

.hero h1 {
  font-size: var(--rem-15); /* Define o tamanho da fonte do título */
  margin-bottom: var(--rem-05); /* Adiciona espaço abaixo do título */
}

.hero p {
  font-size: 0.85rem; /* Define o tamanho da fonte do parágrafo */
  max-width: 100%; /* Garante que o texto ocupe toda a largura disponível */
  margin-bottom: 0.8rem; /* Adiciona espaço abaixo do parágrafo */
}

.btn-principal {
  padding: 0.5rem 1.2rem; /* Define o padding do botão (vertical e horizontal) */
  font-size: var(--rem-075); /* Define o tamanho da fonte do botão */
}


/* ===============================
   CATEGORIAS
   ================================ */

.categorias {
  padding: 3rem 0.5rem; /* Espaçamento interno para a seção de categorias */
}

.categorias h2 {
  font-size: 1.3rem; /* Define o tamanho do título da seção de categorias */
  margin-bottom: var(--rem-15); /* Adiciona espaço abaixo do título */
}

.categorias-container {
  gap: var(--rem-05); /* Define o espaço entre os cards de categoria */
}

.categoria-card {
  width: 140px; /* Define a largura dos cards de categoria */
  height: 80px; /* Define a altura dos cards de categoria */
  font-size: 0.9rem; /* Define o tamanho da fonte dentro dos cards */
}

/* ===============================
   CTA FINAL (CALL TO ACTION)
   ================================ */

.cta {
  padding: 2.5rem 0.5rem; /* Define o padding da seção de CTA final */
  gap: var(--rem-05); /* Define o espaço entre os elementos dentro da seção */
}

.cta h2 {
  font-size: 1.3rem; /* Define o tamanho do título da seção CTA */
}

.cta p {
  font-size: 0.8rem; /* Define o tamanho da fonte do texto da CTA */
  max-width: 100%; /* Garante que o texto ocupe toda a largura disponível */
}

.btn-cta {
  padding: 0.4rem 1.2rem; /* Define o padding do botão da CTA */
  font-size: 0.75rem; /* Define o tamanho da fonte do botão da CTA */
}

}

/* ===============================
HERO - CORRIGIDO PARA ALTURA PEQUENA
=============================== */
@media (max-height: 440px) {
  .hero {
    min-height: 100vh; /* continua ocupando tela, mas mais flexível */
    padding: var(--rem-1); /* reduz o “peso” visual */

    background: linear-gradient(
                  to bottom,
                  rgba(0, 0, 0, 0.3),
                  rgba(0, 0, 0, 0.7)
                ),
                url("../img/banner.jpeg");

    background-size: cover;
    background-position: center top; /* evita cortar partes importantes */
    background-repeat: no-repeat;

    text-align: center;
  }

.hero-conteudo {
  max-width: 280px; /* Define uma largura máxima para o conteúdo do hero */

  width: 90%; /* Faz o conteúdo ocupar 90% da largura disponível em telas pequenas */

  text-align: center; /* Centraliza o texto dentro do container */

  gap: var(--rem-05); /* Define o espaço entre os elementos internos (imagem, título, texto etc.) */
}

.hero-conteudo img {
  width: 150px; /* Define a largura da imagem dentro do hero */
}

.hero h1 {
  font-size: var(--rem-15); /* Define o tamanho da fonte do título principal */

  margin-bottom: var(--rem-05); /* Adiciona espaço abaixo do título */
}

.hero p {
  font-size: 0.85rem; /* Define o tamanho da fonte do parágrafo */

  margin-bottom: 0.8rem; /* Adiciona espaço abaixo do parágrafo */
}

.btn-principal {
  padding: 0.5rem 1.2rem; /* Espaçamento interno do botão (vertical e horizontal) */

  font-size: var(--rem-075); /* Define o tamanho da fonte do botão */
}
}