/* =========================
   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;
}

/* 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
 ========================= */
.card-dmdev{
   background:linear-gradient(135deg, var(--cor-dmdev-fundo-inicio) 0%, var(--cor-dmdev-fundo-fim) 100%);
   border:1px solid rgba(71, 35, 35, 0.3);
 }

/* === FLOATING DMDEV - Bolinha flutuante no canto === */
.floating-dmdev {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cor-dmdev-fundo-inicio) 0%, var(--cor-dmdev-fundo-fim) 100%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-dmdev:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.floating-dmdev .icon img {
  width: 32px;
  height: 32px;
}

/* Gradiente invertido no hover */
.card-dmdev:hover{
   background:linear-gradient(225deg, var(--cor-dmdev-fundo-inicio) 0%, var(--cor-dmdev-fundo-fim) 100%);
 }

/* Gradiente invertido no click */
.card-dmdev:active{
   background:linear-gradient(225deg, var(--cor-dmdev-fundo-inicio) 0%, var(--cor-dmdev-fundo-fim) 100%);
 }

/* Título e subtítulo do card DM Dev (texto branco) */
.card-dmdev .card-title,
.card-dmdev .card-sub{
   color:var(--cor-dmdev-texto);
 }

/* Subtítulo do card DM Dev (cinza claro) */
.card-dmdev .card-sub{
   color:var(--cor-dmdev-subtitulo);
 }

/* =========================
   Í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;
  }
}