/* ═══════════════════════════════════════════════════════════ */
/* SAMBOTECA — Ícones (Tabler Icons)                           */
/* ═══════════════════════════════════════════════════════════ */

/* ─── Modo Icon (3 modos + comercial) ─── */
.modo-icon,
.comercial-icon {
  width: 48px;
  height: 48px;
  stroke: currentColor;
  color: var(--text);
  transition: all 0.3s ease;
  display: block;
  margin: 0 auto 16px;
}

/* Hover: gradiente + glow */
.modo-card:hover .modo-icon,
.comercial-card:hover .comercial-icon {
  color: var(--samba-2);
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.5));
  transform: translateY(-4px) scale(1.05);
}

/* Cores por tipo */
.modo-card.domestico:hover .modo-icon { color: var(--samba-3); }
.modo-card.dev:hover .modo-icon { color: var(--samba-2); }
.modo-card.comercial:hover .modo-icon { color: var(--samba-1); }

/* ─── PNSI Icon ─── */
.pnsi-icon-hero {
  width: 96px;
  height: 96px;
  stroke: currentColor;
  color: var(--samba-2);
  display: block;
  margin: 0 auto 32px;
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.4));
  transition: all 0.5s ease;
}

.pnsi-hero:hover .pnsi-icon-hero {
  filter: drop-shadow(0 0 40px rgba(168, 85, 247, 0.7));
  transform: scale(1.05);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .modo-icon,
  .comercial-icon {
    width: 40px;
    height: 40px;
  }
  .pnsi-icon-hero {
    width: 72px;
    height: 72px;
  }
}