/* RF Áudio & Vídeo - Melhorias Visuais para Assistência Técnica */

/* Ícones e elementos técnicos */
.tech-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  border-radius: 50%;
  color: white;
  font-size: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}

/* Seção de especialidades técnicas */
.tech-specialties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.specialty-card {
  background: white;
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--accent-red);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.specialty-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue), var(--accent-red));
}

.specialty-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(13, 71, 161, 0.2);
}

.specialty-title {
  color: var(--primary-blue);
  font-size: 20px;
  font-weight: 700;
  margin: 16px 0 8px 0;
}

.specialty-description {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Elementos de destaque para assistência técnica */
.tech-highlight {
  background: linear-gradient(135deg, var(--light-red), #FFF3E0);
  border: 2px solid var(--accent-red);
  border-radius: var(--radius);
  padding: 20px;
  margin: 24px 0;
  position: relative;
}

.tech-highlight::before {
  content: '⚡';
  position: absolute;
  top: -10px;
  left: 20px;
  background: var(--accent-red);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* Botão de orçamento especial */
.btn-quote {
  background: linear-gradient(45deg, var(--accent-red), #FF5722);
  color: white;
  padding: 16px 32px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(211, 47, 47, 0.3);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-quote:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(211, 47, 47, 0.4);
}

.btn-quote::before {
  content: '📱';
  font-size: 18px;
}

/* Seção de garantia e confiança */
.trust-section {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: white;
  padding: 40px 24px;
  border-radius: var(--radius);
  text-align: center;
  margin: 32px 0;
  position: relative;
  overflow: hidden;
}

.trust-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="80" cy="40" r="1.5" fill="%23ffffff" opacity="0.1"/><circle cx="40" cy="80" r="1" fill="%23ffffff" opacity="0.1"/></svg>');
  pointer-events: none;
}

.trust-content {
  position: relative;
  z-index: 1;
}

/* Melhorias para dispositivos móveis */
@media (max-width: 768px) {
  .tech-specialties {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .specialty-card {
    padding: 20px;
  }
  
  .btn-quote {
    padding: 14px 24px;
    font-size: 16px;
  }
  
  .trust-section {
    padding: 32px 20px;
  }
}

/* Animações suaves */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Indicadores de status técnico */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status-available {
  background: #E8F5E8;
  color: #2E7D32;
  border: 1px solid #4CAF50;
}

.status-busy {
  background: var(--light-red);
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
}

.status-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}