/* 1. OBRIGATÓRIO: Zera as margens do navegador */
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0;
  background-color: #ffffff;
}

/* 2. O PAI (Cabeçalho): Ele precisa ter 0 de padding para não empurrar o filho */
.cabecalho-site {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0; /* IMPORTANTE: Zero de padding aqui */
  width: 100%;
}

/* Container que segura as duas imagens */
.topo-dividido {
  display: flex; /* Ativa o modo flexível */
  justify-content: space-between; /* MÁGICA: Joga um pra cada ponta */
  align-items: center; /* Alinha verticalmente no centro (na linha vermelha) */
  width: 100%; /* Ocupa a largura total */
  padding: 10px 50px; /* O 50px aqui é a distância da borda (onde você fez o círculo vermelho) */
  background-color: #fcf1db;
  box-sizing: border-box; /* Garante que o padding não estoure a tela */
}

/* 1. O Pai que segura as duas */
.topo-dividido {
  display: flex;
  justify-content: space-between; /* Joga uma pra cada canto */
  align-items: center; /* Alinha o meio delas */
  width: 100%;
  padding: 10px 50px; /* Espaço nas laterais */
  box-sizing: border-box; /* Importante pro padding não estourar a tela */
}

/* 2. A Logo da Esquerda (Bolinha) */
.img-esq {
  max-width: 90px; /* <--- ISSO AQUI QUE VAI DIMINUIR ELA */
  height: auto; /* Mantém a proporção */
}

/* 3. A Máquina da Direita */
.img-dir {
  max-width: 120px; /* <--- ISSO AQUI QUE VAI DIMINUIR ELA TBM */
  height: auto;
}

/* 4. O MENU: Ajuste para ficar bonito embaixo da barra */
.navegacao-principal {
  width: 100%;
  padding-top: 0px; /* Espaço entre a barra bege e o menu */
  border-top: 1px solid #fcf1db;
  border-bottom: 1px solid #fcf1db;

  /* --- MENU FIXO NO TOPO --- */

  /* 1. A Mágica: Cola o elemento */
  position: sticky;
  position: -webkit-sticky; /* Para funcionar no Safari/iPhone */

  /* 2. Onde ele deve colar? No topo (0px) */
  top: 0;

  /* 3. Camada Superior: Garante que ele passe POR CIMA das roupas e banners */
  z-index: 1000;

  /* 4. Fundo: Importante! Se não colocar cor, ele fica transparente 
       e o conteúdo mistura tudo quando passar por baixo. */
  background-color: #ffffff;

  /* 5. Acabamento (Opcional): Uma sombrinha suave pra destacar do resto */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  /* Garante largura total */
  width: 100%;
}
.navegacao-principal ul {
  display: flex; /* Ativa o modo flex na lista */
  justify-content: center; /* Centraliza os itens PERFEITAMENTE no meio da tela */
  list-style: none; /* Tira as bolinhas */
  padding: 15px 0; /* Espaço interno */
  margin: 0; /* Zera margens externas */
  gap: 30px; /* Cria um espaço igual entre cada link "Home", "Skate", etc. */
}

.navegacao-principal a {
  text-decoration: none; /* Tira o sublinhado azul */
  color: #000; /* Cor preta */
  font-weight: bold; /* Negrito */
  text-transform: uppercase; /* Letras maiúsculas estilo Street */
  font-size: 0.9rem;
}

/* Efeito ao passar o mouse  */
.navegacao-principal a:hover {
  color: #6e373d;
}

/* A VITRINE (Onde a mágica acontece) */
.vitrine-produtos {
  display: grid;
  /* Aqui dizemos: Crie colunas automáticas com no mínimo 250px cada.
       Isso faz caber 4 ou 5 produtos em telas grandes, igual a MKD */
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px; /* Espaço entre os produtos */
  max-width: 1200px; /* Largura máxima do site para não esticar demais */
  margin: 0 auto; /* Centraliza a vitrine na tela */
  padding: 20px; /* Um respiro nas laterais */
}

/* O CARTÃO DO PRODUTO INDIVIDUAL */
.card-produto {
  display: flex;
  flex-direction: column; /* Organiza foto, texto e botão um embaixo do outro */
  align-items: center; /* Centraliza tudo no meio do cartão */
  text-align: center; /* Alinha o texto ao centro */
  padding: 10px;
  /* TRUQUE NOVO: */
  height: 100%; /* Força o cartão a ocupar a altura total da linha do Grid */
  justify-content: space-between; /* Espalha o conteúdo (topo no topo, base na base) */
}

/* A IMAGEM DO PRODUTO */
.card-produto img {
  width: 100%; /* A imagem ocupa a largura total do cartão */
  height: auto; /* Mantém a proporção */
  object-fit: cover; /* Garante que a foto não fique deformada */
  margin-bottom: 10px;
}

/* O TÍTULO DO PRODUTO */
.card-produto h3 {
  font-size: 1rem;
  margin: 10px 0;
  font-weight: normal; /* MKD usa fontes mais finas, fica elegante */
  color: #000;
  font-weight: bolder;
}

/* O PREÇO */
.card-produto .preco {
  font-size: 1.1rem;
  margin-bottom: 15px;
  color: #000;
  font-weight: bolder;
}

/* RESPONSIVIDADE (Para celular) */
/* Quando a tela for pequena (celular), mostre 2 produtos por linha ou 1 só */
@media (max-width: 600px) {
  .vitrine-produtos {
    grid-template-columns: 1fr 1fr; /* 2 colunas no celular (estilo app) */
    gap: 15px;
  }
}
.card-produto button {
  /* 1. Cores e Borda (O Truque) */
  background-color: #6e373d; /* Fundo Vinho */
  color: #fcf1db; /* Texto Creme */
  /* Adicionamos uma borda da mesma cor do fundo agora, 
       para o botão não mudar de tamanho quando passar o mouse */
  border: 2px solid #6e373d;

  /* 2. Formato e Tamanho */
  max-width: 100%; /* Ocupa a largura toda do card */
  width: 200px;
  padding: 12px 0; /* Mais "gordinho" (alto) pra ficar imponente */
  border-radius: 6px; /* Cantos levemente arredondados (moderno) */

  /* 3. Tipografia (Texto) */
  text-transform: uppercase; /* CAIXA ALTA */
  font-weight: 700; /* Negrito bem forte */
  font-size: 0.9rem;
  letter-spacing: 1px; /* Um espacinho charmoso entre as letras */

  /* 4. Comportamento */
  cursor: pointer; /* Mãozinha do mouse */
  /* O Segredo da Suavidade: anima todas as mudanças em 0.3 segundos */
  transition: all 0.3s ease-in-out;

  /* TRUQUE NOVO: */
  margin-top: auto; /* Isso é mágico! Empurra o botão para o fundo do cartão, não importa o tamanho do texto acima */
}

/* --- O EFEITO AO PASSAR O MOUSE (HOVER) --- */
.card-produto button:hover {
  /* Inverte as cores */
  background-color: transparent; /* Fundo some (fica da cor do card) */
  color: #6e373d; /* Texto vira Vinho */
  /* A borda de 2px que definimos acima agora fica visível! */

  /* Opcional: um leve aumento pra dar um "pop" */
  transform: translateY(-2px); /* Sobe 2 pixels */
  box-shadow: 0 4px 8px rgba(110, 55, 61, 0.2); /* Sombrainha suave vinho */
}

/* --- ATIVA A ROLAGEM SUAVE NO SITE TODO --- */
html {
  scroll-behavior: smooth; /* Isso faz a página deslizar em vez de pular */
}

/* --- RODAPÉ ESTILO MKD (Minimalista) --- */
.rodape-site {
  background-color: #6e373d; /* Seu fundo Vinho */
  color: #fcf1db; /* Seu texto Bege */
  padding: 60px 20px 40px; /* Espaçamento interno */
  margin-top: 80px; /* Afasta dos produtos */
  border-top: 4px solid #fcf1db; /* Um detalhe charmoso no topo */
  /* --- O SEGREDO DO TELA CHEIA --- */
  min-height: 100vh; /* Ocupa 100% da altura da tela do visitante */
  /* Isso organiza o conteúdo: Texto no topo, Copyright no pé */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container-rodape {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* Espalha as colunas */
  flex-wrap: wrap; /* Permite quebrar linha no celular */
  gap: 40px;
}

/* AS COLUNAS */
.coluna-footer {
  flex: 1; /* Todas ocupam o mesmo espaço */
  min-width: 250px; /* Tamanho mínimo pra não esmagar */
  display: flex;
  flex-direction: column;
}

/* O TÍTULO COM A LINHA EMBAIXO (Estilo MKD) */
.titulo-footer {
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  padding-bottom: 15px; /* Espaço entre texto e linha */

  /* A LINHA SUTIL */
  border-bottom: 1px solid rgba(252, 241, 219, 0.3);
}

/* O TEXTO DO CONTEÚDO */
.coluna-footer p,
.coluna-footer a {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #fcf1db;
  text-decoration: none;
  opacity: 0.8; /* Um pouco transparente pra ficar chique */
  margin-bottom: 10px;
  transition: opacity 0.3s;
}

.coluna-footer a:hover {
  opacity: 1; /* Brilha ao passar o mouse */
}

/* ÍCONES DE REDES SOCIAIS (Opcional) */
.redes-sociais {
  display: flex;
  gap: 15px;
  font-size: 1.5rem; /* Aumenta se usar ícones */
  padding-top: 15px;
}

.pagamento {
  display: flex;
  gap: 15px;
  font-size: 1.5rem; /* Aumenta se usar ícones */
}

.area-dev {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* O SEGREDO DO MEIO: */
  flex-grow: 1; /* Isso diz: "Ocupe todo o espaço vazio que sobrar entre o topo e o chão!" */

  text-align: center;
  margin: 20px 0;
}

.foto-dev {
  width: 150px;
  height: 150px;
  object-fit: cover;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  margin-bottom: 15px;
}

.texto-dev h1 {
  font-size: 2rem;
  margin: 5px 0;
  font-family: "Times New Roman", serif;
  font-weight: normal;
}

.texto-dev p {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0;
}

/* DIREITOS AUTORAIS (Lá embaixo) */
.copyright {
  text-align: center;
  margin-top: 60px;
  padding-top: 20px;
  border-bottom: 1px solid rgba(252, 241, 219, 0.3);
  font-size: 0.8rem;
  margin: 0 auto;
}

/* CELULAR */
@media (max-width: 768px) {
  .container-rodape {
    flex-direction: column; /* Uma coluna embaixo da outra */
    text-align: center;
  }
  .titulo-footer {
    border-bottom: 1px solid rgba(252, 241, 219, 0.3); /* Mantém a linha */
    display: inline-block; /* A linha fica só do tamanho do texto */
    margin: 0 auto 20px auto; /* Centraliza */
  }
}

.container-produto {
  max-width: 1000px; /* Largura boa pra leitura */
  margin: 40px auto; /* Centraliza na tela */
  padding: 0 20px;
  display: flex; /* Coloca um do lado do outro */
  gap: 40px; /* Espaço entre foto e texto */
  align-items: center; /* Centraliza verticalmente */
}

/* A FOTO */
.area-foto {
  flex: 1; /* Ocupa metade do espaço */
}

.foto-principal {
  width: 100%; /* Ocupa a largura toda da coluna dela */
  height: auto;

  object-fit: cover;
}

/* O TEXTO */
.info-produto {
  flex: 1; /* Ocupa a outra metade */
}

.titulo-produto {
  font-size: 1.8rem;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #000;
}

.preco-atual {
  font-size: 2rem;
  font-weight: bold;
  color: #000; /* Seu vinho */
}

.parcelamento {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 25px;
}

/* O BOTÃO PRETO ESTILO MKD */
.btn-comprar-detalhe {
  width: 100%;
  padding: 18px;
  background-color: #000;
  color: #fff;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.3s;
  margin-bottom: 30px;
  border-radius: 4px;
}

.btn-comprar-detalhe:hover {
  background-color: #6e373d; /* Fica vinho ao passar o mouse */
}

.descricao-produto h3 {
  font-size: 1rem;
  text-transform: uppercase;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* NO CELULAR: Um embaixo do outro */
@media (max-width: 768px) {
  .container-produto {
    flex-direction: column;
  }
}
/* GRADE DE TAMANHOS */
.grade-tamanhos {
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
}

/* O BOTÃO (QUADRADINHO) */
.tamanho-box {
  width: 45px;
  height: 45px;
  background-color: #fff;
  border: 1px solid #ccc;
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  transition: all 0.2s; /* Deixa a mudança de cor suave */
}

/* --- EFEITO HOVER (O QUE VOCÊ PEDIU) --- */
/* Quando passar o mouse, a borda e o texto ficam vinho */
.tamanho-box:hover {
  border-color: #6e373d;
  color: #6e373d;
  transform: translateY(-2px); /* Dá um pulinho pra cima */
}