/* RESET */

*{
  margin:0;              /* Remove todas as margens padrão dos elementos */
  padding:0;             /* Remove todos os espaçamentos internos padrão */
  box-sizing:border-box; /* Faz com que largura e altura incluam padding e borda no cálculo */
  font-family:Arial, Helvetica, sans-serif; /* Define a fonte padrão da página */
}

/* ROOT */

:root{

  /* REM SPACING */

  --rem-0:0rem;
  --rem-0125:0.125rem;
  --rem-025:0.25rem;
  --rem-05:0.5rem;
  --rem-075:0.75rem;
  --rem-1:1rem;
  --rem-125:1.25rem;
  --rem-15:1.5rem;
  --rem-175:1.75rem;
  --rem-2:2rem;
  --rem-25:2.5rem;
  --rem-3:3rem;
  --rem-4:4rem;
  --rem-5:5rem;
  --rem-6:6rem;
  --rem-7:7rem;
  --rem-8:8rem;

  /* CORES NEUTRAS */

  --branco: #ffffff;
  --branco-suave: #f5f5f5;
  --cinza-claro: #d4d6d8;
  --cinza: #b2b3bb;
  --preto-suave: #222222;
  --preto: #000000;


  /* PALETA DE CORES */

  --vermelho: #d55547;
  --vermelho-suave: #d59d99;

  --azul: #3d5f90;
  --azul-forte: #1b34c8;
  --azul-medio: #14608b;
  --azul-suave: #70b5cb;
  --azul-claro: #4269d8;

  --laranja: #f86908;
  --laranja-medio: #dd4f09;
  --laranja-escuro: #b63f07;
  --laranja-mais-escuro: #7a2905;

  --ciano: #1a6580;

  --escuro: #090f0a;

}

/* HTML E BODY */
html, body{
  font-size: 16px;
  height:100%;     /* Define que a altura deles será 100% da altura da tela */
}

/* BODY */

body{
  background:var(--branco);        /* Define a cor de fundo da página usando uma variável CSS chamada --branco */
  color:var(--preto-suave);        /* Define a cor padrão do texto usando a variável --preto-suave */
  line-height:1.4;                 /* Define o espaçamento entre linhas do texto (1.4 vezes o tamanho da fonte) */
  display:flex;                    /* Transforma o body em um container flexbox */
  flex-direction:column;           /* Organiza os elementos dentro do body em coluna (um embaixo do outro) */
  min-height:100vh;                /* Define altura mínima de 100% da altura da tela (viewport height) */
}

/* CONTAINER */

.container {
  width: 100%;             /* Faz o container ocupar 100% da largura disponível da tela */
  max-width: 1600px;       /* Define um limite máximo de largura (1600px), evitando que o layout fique muito largo em telas grandes */
  margin: 0 auto;          /* Centraliza o container horizontalmente na tela (auto divide o espaço das laterais) */
  padding: 0;              /* Remove qualquer espaçamento interno dentro do container */
  display: flex;           /* Transforma o container em um Flexbox para facilitar o alinhamento dos elementos internos */
  flex-direction: column;  /* Organiza os elementos dentro do container em coluna (um embaixo do outro) */
  flex:1;                  /* Faz o container crescer e ocupar o espaço disponível dentro do elemento pai (geralmente o body) */
}

/* HEADER */

header{
  width:100%;              /* Faz o header ocupar 100% da largura disponível da página */
  background:var(--azul-medio); /* Define a cor de fundo usando a variável CSS --branco */
}

.header{
  display:flex;                 /* Transforma o elemento em um container Flexbox */
  align-items:center;           /* Alinha os itens verticalmente no centro */
  justify-content:space-between; /* Coloca o primeiro item à esquerda e o último à direita */
  gap:var(--rem-1);             /* Cria um espaçamento entre os elementos usando a variável --rem-1 */
  padding:var(--rem-1);         /* Adiciona espaço interno dentro do header usando a variável --rem-1 */
}

.header a {
  text-decoration: none;
  color: var(--escuro);
}

/* Menu */

.menu-hamburguer {
  display: none;              /* Esconde o botão por padrão (normalmente só aparece em telas pequenas via media query) */
  background: none;           /* Remove qualquer fundo padrão do botão */
  border: none;               /* Remove qualquer borda padrão */
  font-size: 1.8rem;          /* Tamanho do ícone ou texto do botão (~28px) */
  cursor: pointer;            /* Cursor de mãozinha, indicando que é clicável */
  color: var(--preto);        /* Cor do ícone/texto do botão, usando variável CSS para preto */
}

/* Logo */

.logo img{
  height: 70px;   /* Define a altura da imagem do logo como 70 pixels */
}

/* Inico */

/* Container do início do carrinho */
.inicio-carrinho{
    display: flex; /* coloca os elementos lado a lado */
    justify-content: space-between; /* cria espaço entre os itens */
    align-items: center; /* alinha os itens verticalmente no centro */
}

/* Botão Nossa Empresa */
.btn-empresa{
    display: flex; /* deixa o ícone e texto alinhados na horizontal */
    align-items: center; /* centraliza verticalmente o conteúdo */
    gap: 6px; /* cria espaço entre o ícone e o texto */
    text-decoration: none; /* remove o sublinhado do link */
    color: var(--laranja-escuro); /* define a cor do texto usando variável */
    font-weight: 600; /* deixa o texto mais forte (semi-negrito) */
    padding: 6px 10px; /* espaço interno do botão */
    border-radius: 8px; /* arredonda os cantos do botão */
    transition: 0.2s; /* cria uma animação suave nas mudanças */
}

/* Ícone dentro do botão empresa */
.btn-empresa i{
    font-size: var(--rem-175); /* define o tamanho do ícone usando variável */
}

/* Container do texto do botão */
.texto-empresa{
    display: flex; /* ativa o flexbox */
    flex-direction: column; /* coloca os textos um embaixo do outro */
    font-size: var(--rem-075); /* define o tamanho do texto */
    line-height: 1; /* reduz o espaçamento entre as linhas */
}

/* Efeito ao passar o mouse no botão */
.btn-empresa:hover{
    background-color: var(--cinza-claro); /* muda a cor de fundo quando passa o mouse */
}

/* Carrinho */
.inicio a,
.carrinho button {
  position: relative;        /* Necessário para posicionar o badge de quantidade de itens dentro do botão */
  background: none;          /* Remove o fundo padrão do botão */
  border: none;              /* Remove a borda padrão do botão */
  padding: var(--rem-05);    /* Espaçamento interno do botão (ex: 0.5rem ≈ 8px) */
  cursor: pointer;           /* Muda o cursor para mãozinha, indicando que é clicável */
  font-size: var(--rem-175);        /* Define o tamanho do ícone dentro do botão (aprox. 28px) */
  color: var(--laranja); /* Define a cor do ícone do carrinho usando a variável --laranja-escuro */
  display: flex;             /* Torna o botão um container flexbox (útil para alinhar ícone e badge) */
  align-items: center;       /* Centraliza verticalmente o conteúdo do botão */
  justify-content: center;   /* Centraliza horizontalmente o conteúdo do botão */
}

/* Notificação */
.carrinho .badge {
  position: absolute;           /* Posiciona a badge em relação ao botão pai (.carrinho button) */
  top: -5px;                    /* Move a badge 5px acima do topo do botão */
  right: -5px;                  /* Move a badge 5px à direita do botão */
  background: var(--branco);     /* Define a cor de fundo da badge (geralmente laranja) */
  color: var(--azul);         /* Cor do texto dentro da badge */
  font-size: 0.7rem;            /* Tamanho do número dentro da badge (≈11px) */
  font-weight: bold;             /* Deixa o número em negrito */
  width: 18px;                   /* Largura da badge */
  height: 18px;                  /* Altura da badge */
  border-radius: 50%;            /* Torna a badge **redonda**, formando uma bolinha */
  display: none;                 /* Esconde a badge por padrão (aparecerá só quando houver itens) */
  align-items: center;           /* Centraliza verticalmente o número dentro da badge */
  justify-content: center;       /* Centraliza horizontalmente o número dentro da badge */
}

.carrinho .badge.ativo {
  display: flex;  /* Mostra a badge, transformando-a em um container flex para centralizar o número */
}

/* CONTEUDO */

.conteudo{
  flex:1;   /* Faz o elemento crescer e ocupar todo o espaço disponível dentro do container flex */
}

/* FOOTER */

footer {
  background: var(--branco-suave);   /* Fundo do rodapé em laranja escuro */
  color: var(--preto);              /* Cor do texto padrão dentro do footer é branca */
  margin-top: auto;                   /* Faz o footer "grudar" na parte inferior quando usado em layout flex com min-height: 100vh */
}

.footer {
  max-width: 1200px;                                /* Limita a largura máxima do conteúdo do footer */
  margin: auto;                                     /* Centraliza o footer horizontalmente */
  display: grid;                                    /* Usa Grid Layout para organizar o conteúdo em colunas */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Cria colunas responsivas, cada uma com mínimo de 200px, se ajustando automaticamente */
  gap: var(--rem-2);                                /* Espaço entre colunas e linhas do grid */
  padding: var(--rem-2);                            /* Espaçamento interno em todos os lados */
}

.footer img {
  height: 60px;              /* Define altura das imagens dentro do footer (como logo ou ícones) */
}

.footer p,
.footer a {
  color: var(--preto-suave);       /* Texto e links brancos para contraste com fundo laranja escuro */
  font-size: 0.8rem;          /* Tamanho de fonte legível, mas menor que o padrão de corpo de texto */
  line-height: 1.6;           /* Espaçamento entre linhas para melhor leitura */
}

/* Botão Carrinho */
.btn-carrinho {
  margin-top: var(--rem-05);              /* Espaço acima do botão, separando do conteúdo acima (ex: descrição ou preço) */
  background: var(--laranja-escuro);        /* Cor de fundo laranja escuro, chamativa para ação principal */
  border: none;                           /* Remove borda padrão do botão */
  cursor: pointer;                        /* Cursor de mãozinha, indicando que é clicável */
  padding: var(--rem-05) var(--rem-1);    /* Espaçamento interno: vertical (top/bottom) menor, horizontal (left/right) maior */
  text-align: center;                     /* Centraliza o texto dentro do botão */
  color: var(--branco);                    /* Texto branco para contraste com o fundo laranja */
  font-weight: bold;                       /* Texto em negrito, destacando a ação */
  border-radius: var(--rem-025);          /* Cantos levemente arredondados, estilo moderno */
  transition: background-color 0.3s ease; /* Transição suave da cor de fundo no hover */
}

@media (max-width: 1024px){

  .header{
      display:flex;
      align-items:center;
  }

  .menu-hamburguer{
      display:block;
      order:1;
      color: var(--laranja);
  }

  .logo{
      order:2;
      flex:1;
      display:flex;
      justify-content:center;
  }

  .inicio{
      order:3;
  }

  .carrinho{
      order:4;
  }

  .footer p,
  .footer a {
    font-size: 0.7rem;          /* Tamanho de fonte legível, mas menor que o padrão de corpo de texto */
  }

}

@media (max-width: 480px) {

  /* HEADER */
  .header {
    padding: var(--rem-05); /* reduz espaçamento */
    gap: var(--rem-05);
  }

  .logo img {
    height: 50px; /* diminui logo */
  }

  .menu-hamburguer {
    font-size: 1.5rem;
  }

  /* BOTÃO EMPRESA */
  .btn-empresa {
    padding: 4px 6px;
    font-size: 0.7rem;
  }

  .texto-empresa {
    display: none; /* esconde texto e deixa só ícone */
  }

  /* CARRINHO */
  .inicio a,
  .carrinho button {
    font-size: 1.4rem;
    padding: var(--rem-025);
  }

  .carrinho .badge {
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
  }

  /* FOOTER */
  .footer {
    grid-template-columns: 1fr; /* uma coluna só */
    text-align: center;
  }

  .footer img {
    height: 50px;
  }

  .footer p,
  .footer a {
    font-size: 0.7rem;
  }

}