/* ==========================================================================
   ZONATEC - ESTILOS PERSONALIZADOS & MICRO-INTERACCIONES
   Paleta: Rojo Intenso (#E50914), Negro (#121212), Gris Claro (#F4F4F5)
   ========================================================================== */

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: #FFFFFF;
  color: #121212;
}

/* Selección de texto */
::selection {
  background-color: #E50914;
  color: #ffffff;
}

/* Efecto Glassmorphism refinado para header */
.glass-header-tech {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(228, 228, 231, 0.85);
}

/* Patrón de cuadrícula tecnológica sutil para fondo del Hero */
.bg-tech-pattern {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(229, 9, 20, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229, 9, 20, 0.035) 1px, transparent 1px);
}

/* Pulso para el botón flotante de WhatsApp */
@keyframes tech-whatsapp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-pulse-tech {
  animation: tech-whatsapp-pulse 2.2s infinite;
}

/* Animación sutil de levitación en tarjetas tech */
.tech-card {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.tech-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(229, 9, 20, 0.08), 0 8px 10px -6px rgba(18, 18, 18, 0.04);
  border-color: rgba(229, 9, 20, 0.35);
}

/* Brillo rojo para botones primarios */
.btn-red-glow {
  box-shadow: 0 4px 14px 0 rgba(229, 9, 20, 0.35);
  transition: all 0.2s ease-in-out;
}

.btn-red-glow:hover {
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.45);
  transform: translateY(-1px);
}

/* Animación suave para notificaciones Toast */
@keyframes slideUpToast {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toast-slide-up {
  animation: slideUpToast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ocultar barra de desplazamiento */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}