/* =========================
   EQUIPAMENTOS À VENDA
   Estilos específicos da página de equipamentos
   Arquivo: equipamentos.css
   Descrição: Fundo fixo, grid de produtos, carrossel, modal
 ========================= */

/* =========================
   FUNDO DA PÁGINA
   Fundo rosa simples (sem slides animadas)
 ========================= */
.bg-stage {
  display: none; /* Esconde todo o stage do fundo animado */
}

body {
  background: linear-gradient(180deg, var(--cor-fundo-gradiente-topo) 0%, var(--cor-fundo-gradiente-meio) 45%, var(--cor-fundo-gradiente-baixo) 100%) !important; /* Fundo rosa fixo */
}

.container {
  position: relative;
  text-align: left !important;
}

/* =========================
   CABEÇALHO DA LOJA
   Botão Voltar + Título "Equipamentos à Venda"
========================= */
.header-row {
  display: flex; /* Layout em linha */
  align-items: center; /* Alinha verticalmente */
  justify-content: space-between; /* Espaço entre botão e título */
  margin-bottom: 10px; /* Espaço abaixo do header */
}

.voltar-btn {
  display: inline-block;
  color: var(--cor-texto-principal);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 16px;
  background: rgba(246, 230, 235, 0.6); /* Fundo translúcido */
  border-radius: 20px; /* Bordas arredondadas */
  transition: background 0.2s ease;
  white-space: nowrap;
}

/* Estado hover do botão voltar */
.voltar-btn:hover {
  background: rgba(246, 230, 235, 0.9); /* Fundo mais sólido ao passar mouse */
}

/* =========================
   TÍTULO DA PÁGINA
   "Equipamentos à Venda"
========================= */
.title {
  text-align: right; /* Alinhado à direita */
  font-size: 16px;
  color: var(--cor-texto-principal);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(255,255,255,0.10);
  margin-inline: auto; /* Coloca no centro */
  margin-bottom: 0px;
}

/* =========================
   GRID DE PRODUTOS
   Layout em duas colunas para os cards
========================= */
.produtos-grid {
  display: grid; /* Layout em grid */
  grid-template-columns: repeat(2, 1fr); /* 2 colunas de largura igual */
  gap: 10px; /* Espaço entre os cards */
}

/* =========================
   CARD DE PRODUTO
   Container de cada produto
 ========================= */
.produto-card {
  background: rgba(246, 230, 235, 0.82); /* Fundo translúcido rosa claro */
  border: 1px solid rgba(255, 255, 255, 0.28); /* Borda branca semi-transparente */
  backdrop-filter: blur(10px); /* Efeito de desfoque no fundo */
  -webkit-backdrop-filter: blur(10px); /* Suporte para Safari */
  border-radius: 18px; /* Bordas arredondadas */
  padding: 8px 8px 0px 8px; /* Espaçamento interno (topo, dir, baixo, esq) */
  text-decoration: none; /* Remove sublinhado do link */
  color: var(--cor-preto); /* Cor do texto */
  display: flex; /* Layout flexível */
  flex-direction: column; /* Elementos em coluna */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10); /* Sombra suave */
  transition: transform 0.18s ease, box-shadow 0.18s ease; /* Animações suaves */
}

/* Estado hover do card */
.produto-card:hover {
  transform: translateY(-2px); /* Move o card para cima */
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16); /* Sombra mais intensa */
}

/* =========================
   CARROSSEL DE IMAGENS
   Container das imagens com navegação
========================= */
.carousel {
  position: relative; /* Posição relativa para posicionar botões */
  width: 100%; /* Largura total do container */
  height: 200px; /* Altura fixa do carrossel */
  overflow: hidden; /* Esconde imagens fora da área */
  border-radius: 14px; /* Bordas arredondadas */
}

/* Track que segura as imagens em linha */
.carousel-track {
  display: flex; /* Imagens em linha horizontal */
  transition: transform 0.3s ease; /* Animação suave ao trocar slide */
  height: 100%; /* Altura total do container */
}

/* Imagens dentro do carousel */
.carousel-track img {
  width: 100%; /* Ocupa toda largura do container */
  height: 100%; /* Ocupa toda altura */
  object-fit: cover; /* Cobre toda área sem distorcer */
  flex-shrink: 0; /* Não encolhe em telas menores */
}

/* Botões de navegação (prev/next) */
.carousel-btn {
  position: absolute; /* Posição absoluta dentro do carousel */
  top: 50%; /* Centraliza verticalmente */
  transform: translateY(-50%); /* Ajuste fino para centralizar */
  background: rgba(0, 0, 0, 0.4); /* Fundo preto semi-transparente */
  color: var(--cor-branco); /* Cor do ícone (branco) */
  border: none; /* Sem borda */
  width: 24px; /* Largura do botão */
  height: 24px; /* Altura do botão */
  border-radius: 50%; /* Botão circular */
  cursor: pointer; /* Cursor de clique */
  font-size: 16px; /* Tamanho do ícone */
  display: flex; /* Centraliza conteúdo */
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  z-index: 2; /* Fica acima das imagens */
}

/* Botão anterior */
.carousel-btn.prev {
  left: 6px; /* Posição à esquerda */
}

/* Botão próximo */
.carousel-btn.next {
  right: 6px; /* Posição à direita */
}

/* Estado hover dos botões */
.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.7); /* Mais escuro ao passar mouse */
}

/* Container dos pontos indicadores */
.carousel-dots {
  position: absolute; /* Posição absoluta */
  bottom: 6px; /* Distância do fundo */
  left: 50%; /* Centraliza horizontalmente */
  transform: translateX(-50%); /* Ajuste de centralização */
  display: flex; /* Pontos em linha */
  gap: 4px; /* Espaço entre pontos */
  z-index: 2; /* Fica acima das imagens */
}

/* Cada ponto indicador */
.carousel-dots .dot {
  width: 6px; /* Largura do ponto */
  height: 6px; /* Altura do ponto */
  border-radius: 50%; /* Ponto circular */
  background: rgba(255, 255, 255, 0.5); /* Branco semi-transparente */
  cursor: pointer; /* Cursor de clique */
}

/* Ponto ativo (imagem atual) */
.carousel-dots .dot.active {
  background: var(--cor-branco); /* Branco sólido */
}

/* =========================
   INFORMAÇÕES DO PRODUTO
   Container de texto (título, preço, botão)
========================= */
.produto-info {
  padding: 6px 4px 2px; /* Espaçamento interno (topo, dir, baixo, esq) */
}

/* Título do produto */
.produto-titulo {
  font-weight: 700; /* Negrito bold */
  font-size: 10px; /* Tamanho da fonte */
  margin-bottom: 6px; /* Espaço abaixo do título */
  line-height: 1.3; /* Altura da linha */
}

/* Legenda/descrição do produto */
.produto-legenda {
  font-size: 10px; /* Tamanho da fonte */
  color: var(--cor-texto-secundario); /* Cor do texto marrom escuro */
  margin-bottom: 6px; /* Espaço abaixo */
  line-height: 1.3; /* Altura da linha */
  display: -webkit-box; /* Container flexível */
  -webkit-line-clamp: 2; /* Limita a 2 linhas */
  -webkit-box-orient: vertical; /* Orientação vertical */
  overflow: hidden; /* Esconde texto excedente */
}

/* Container do preço e botão */
.produto-preco {
  font-size: 19px; /* Tamanho do preço */
  font-weight: 700; /* Negrito bold */
  color: var(--cor-preco); /* Cor rosa do valor */
  display: flex; /* Layout em linha */
  align-items: center; /* Alinha verticalmente */
  justify-content: space-between; /* Espaço entre preço e botão */
  margin-bottom: 6px; /* Espaço abaixo */
}

/* Botão de compra */
.produto-comprar {
  display: flex; /* Layout em linha */
  align-items: center; /* Alinha verticalmente */
  gap: 4px; /* Espaço entre ícone e texto */
  background: var(--cor-branco); /* Fundo branco */
  color: var(--cor-cinza-medio); /* Cor do texto */
  text-decoration: none; /* Remove sublinhado */
  padding: 6px 10px; /* Espaçamento interno */
  border-radius: 14px; /* Bordas arredondadas */
  font-size: 11px; /* Tamanho da fonte */
  font-weight: 600; /* Negrito semi-bold */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Sombra suave */
  transition: background 0.2s ease, box-shadow 0.2s ease; /* Animações suaves */
}

/* Estado hover do botão comprar */
.produto-comprar:hover {
  background: var(--cor-cinza-claro); /* Cinza claro ao passar mouse */
  box-shadow: 0 3px 8px rgba(0,0,0,0.2); /* Sombra mais intensa */
}

/* Ícone do WhatsApp no botão */
.produto-comprar img {
  width: 14px; /* Largura do ícone */
  height: 14px; /* Altura do ícone */
}

/* =========================
   RESPONSIVO
   Ajustes para telas menores (mobile)
========================= */
@media (max-width: 420px) {
  /* Carrossel menor no mobile */
  .carousel {
    height: 170px; /* Altura reduzida */
  }

  /* Título menor no mobile */
  .produto-titulo {
    font-size: 10px; /* Tamanho reduzido */
  }

  /* Legenda menor no mobile */
  .produto-legenda {
    font-size: 9px; /* Tamanho reduzido */
  }

  /* Preço menor no mobile */
  .produto-preco {
    font-size: 15px; /* Tamanho reduzido */
  }

  /* Grid com menos espaço no mobile */
  .produtos-grid {
    gap: 8px; /* Espaço reduzido entre cards */
  }
}

/* =========================
   MODAL DE IMAGEM
   Visualização ampliada das imagens
========================= */
.modal {
  display: none; /* Escondido por padrão */
  position: fixed; /* Posição fixa na tela */
  z-index: 1000; /* Camada muito alta */
  left: 0;
  top: 0;
  width: 100%; /* Largura total */
  height: 100%; /* Altura total */
  background-color: rgba(0, 0, 0, 0.9); /* Fundo preto semi-transparente */
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
}

.modal-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: var(--cor-branco);
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001;
}

.modal-close:hover {
  color: var(--cor-fundo-gradiente-topo);
}

.modal-prev,
.modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cor-branco);
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  padding: 16px;
  user-select: none;
  z-index: 1001;
}

.modal-prev {
  left: 20px;
}

.modal-next {
  right: 20px;
}

.modal-prev:hover,
.modal-next:hover {
  color: var(--cor-fundo-gradiente-topo);
}