/* =========================
   CARDS DA PÁGINA PRINCIPAL
   Estilos para os cards clicáveis da página inicial
   Arquivo: cards.css
   Descrição: Define appearance dos cards (WhatsApp, Instagram, Localização, etc)
========================= */

/* =========================
   CARD DE LINK
   Cards clicáveis (WhatsApp, Instagram, etc)
 ========================= */
.card{
  background:var(--cor-card-fundo);
  border:1px solid var(--cor-card-borda);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:22px;
  padding:4px 4px;
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 8px 20px var(--cor-sombra-fraca);
  text-align:left;
  text-decoration:none;
  color:var(--cor-card-texto);
  transition:box-shadow 0.18s ease, background 0.18s ease;
  outline:none;
}

/* =========================
   CARD DESTAQUE - MINHA LOJINHA
   Card especial para chamar atenção
 ========================= */
.card#minhaloja{
  background:linear-gradient(135deg, var(--cor-destaque-gradiente-inicio) 0%, var(--cor-destaque-gradiente-inicio) 100%);
  border:2px solid var(--cor-destaque-borda);
  box-shadow:0 8px 25px var(--cor-destaque-sombra);
  animation:pulse-destaque 2s ease-in-out infinite;
}

@keyframes pulse-destaque{
  0%,100%{box-shadow:0 8px 25px var(--cor-destaque-sombra);}
  50%{box-shadow:0 8px 35px var(--cor-destaque-sombra);}
}

.card#minhaloja:hover{
  transform:scale(1.02);
  border-color:var(--cor-destaque-gradiente-fim);
  box-shadow:0 14px 35px var(--cor-destaque-sombra);
}

.card#minhaloja:active{
  background:linear-gradient(135deg, var(--cor-destaque-hover) 0%, var(--cor-destaque-hover) 100%);
}

/* Estado hover do card (ao passar mouse) */
.card:hover{
  box-shadow:0 14px 28px var(--cor-sombra-forte);
  background:var(--cor-card-hover);
}

/* Estado active (ao clicar) - fundo rosa */
.card:active{
  background:var(--cor-card-hover);
}

/* =========================
   CARD DM DEV SOLUÇÕES
   Card especial para divulgação do desenvolvedor
========================= */
.dmdev-float{
  position:fixed;
  bottom:20px;
  right:20px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--cor-dmdev-fundo-inicio) 0%, var(--cor-dmdev-fundo-fim) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.4);
  z-index:9999;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.dmdev-float:hover{
  transform:scale(1.1);
  box-shadow:0 8px 28px rgba(0,0,0,0.5);
}

.dmdev-float:active{
  transform:scale(0.95);
}

.dmdev-float img{
  width:30px;
  height:30px;
  object-fit:contain;
  max-width:100%;
  max-height:100%;
}
}

/* =========================
   ÍCONE DO CARD
   Container do ícone/imagem
========================= */
.icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 42px;
}

/* Imagem dentro do ícone */
.icon img{
  width:34px;
  height:34px;
  display:block;
}

/* =========================
   TÍTULO E SUBTÍTULO DO CARD
========================= */
.card-title{
  font-weight:700;
  margin-bottom:3px;
  font-size:15px;
}

.card-sub{
  font-size:11px;
  color:var(--cor-texto-secundario);
  line-height:1.4;
}

/* =========================
   RESPONSIVO - MOBILE
   Ajustes para telas menores
========================= */
@media (max-width: 420px){
  .card-title{
    font-size:13px !important;
  }

  .card:nth-child(6) .card-title{
    font-size:12px;
  }

  .card-sub{
    font-size:10px;
  }
}