/*================================================
  Tech & Cyberpunk Redesign Styles
  - Font applied to headings
  - Glowing effects on cards, buttons
  - Cursor adjustments
================================================*/

/* ====== Tipografía ======= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Orbitron', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Título secundario como subtitle */
.section-title .sub-title {
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00d4ff !important;
  -webkit-text-fill-color: #00d4ff !important;
  background: none !important;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

/* ======= Tarjetas de Servicios (Efecto Glass/Neon) ======= */
.service-wrapper {
  background: rgba(10, 15, 25, 0.6) !important;
  border: 1px solid rgba(0, 212, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  border-radius: 12px !important;
  transition: all 0.4s ease-in-out !important;
  position: relative;
  overflow: hidden;
}

/* Hover de la tarjeta */
.service-wrapper:hover {
  transform: translateY(-8px) !important;
  border-color: #00d4ff !important;
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.2), inset 0 0 15px rgba(0, 212, 255, 0.1) !important;
}

/* Brillo en el icono */
.service-inner .service-icon img, .service-inner .bg-icon img {
  filter: drop-shadow(0 0 8px rgba(0,212,255,0.6));
}

.service-wrapper:hover .service-title {
  color: #00d4ff !important;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* ======= Botones ======= */
.btn-effect {
  background: transparent !important;
  border: 2px solid #00d4ff !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 8px !important;
}

.btn-effect:hover {
  background: rgba(0, 212, 255, 0.15) !important;
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.5), inset 0 0 10px rgba(0, 212, 255, 0.2) !important;
}

.btn-effect svg path {
  stroke: #00d4ff !important;
}

/* Botón WhatsApp original section (no float) */
#contacto .whatsapp-btn {
  border-color: #00d4ff;
  color: #fff;
  font-family: 'Rajdhani', sans-serif !important;
  text-transform: uppercase;
}

#contacto .whatsapp-btn:hover {
  background: rgba(0, 212, 255, 0.15);
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.6);
  color: #00d4ff;
}

#contacto .whatsapp-btn i {
  color: #00d4ff;
}

/* Botón flotante WhatsApp */
.whatsapp-float {
  background: #00d4ff !important;
  color: #000 !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.6) !important;
  border: 2px solid #00d4ff;
}
.whatsapp-float:hover {
  background: #000 !important;
  color: #00d4ff !important;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.9) !important;
}

/* ====== Cursor ====== */
#cursor .cursor__circle {
  border-color: #00d4ff !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
  background: rgba(0, 212, 255, 0.1);
}

/* Efecto text-shadow en header */
.banner-title {
  text-shadow: 0 0 20px rgba(0, 255, 179, 0.4), 2px 2px 0px rgba(0, 150, 255, 0.5);
}
.banner-content h2 {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700;
  text-transform: none;
}

/* ====== Image Floating Animation ====== */
.tech-float-image {
  animation: techFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
  max-width: 100%;
}

@keyframes techFloat {
  0% { transform: translateY(0); filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4)); }
  50% { transform: translateY(-15px); filter: drop-shadow(0 0 25px rgba(0, 212, 255, 0.8)); }
  100% { transform: translateY(0); filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4)); }
}

/* ====== Responsive Hero Section Fixes ====== */
.banner-bg-one {
  max-width: 100%;
  height: auto;
  opacity: 0.8;
  transition: all 0.3s ease;
}

@media (min-width: 992px) {
  .banner-bg-one {
    max-width: 140% !important;
    margin-left: -20% !important;
    margin-top: 50px;
  }
}

@media (min-width: 1200px) {
  .banner-bg-one {
    max-width: 120% !important;
    margin-left: -10% !important;
  }
}

/* Responsiveness Fixes */
@media (max-width: 991px) {
  .tech-float-image {
    max-width: 80%;
    margin: 0 auto;
  }
  .banner-inner {
    padding: 150px 0 80px 0 !important;
  }
}
@media (max-width: 767px) {
  .tech-float-image {
    max-width: 100%;
  }
  .banner-content h2 {
    font-size: 28px !important;
  }
  .banner-title {
    font-size: 2.5rem !important;
  }
}