/* === Material Symbols === */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
}

/* === Utility === */
.accent-bg {
  background: linear-gradient(90deg, #06B6D4 0%, #3B82F6 100%);
}

.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* === Background Video === */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  opacity: 0.3;
}

body {
  position: relative;
}

/* === Tech Grid Overlay === */
.tech-grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: -1;
  pointer-events: none;
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0%   { transform: translateY(0); }
  100% { transform: translateY(50px); }
}

/* === Floating Orbs === */
.floating-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
  animation: float 15s ease-in-out infinite;
}

.orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(6, 182, 212, 0.3);
  top: 10%;
  left: -10%;
  animation-delay: 0s;
}

.orb-2 {
  width: 300px;
  height: 300px;
  background: rgba(59, 130, 246, 0.3);
  bottom: 20%;
  right: -5%;
  animation-delay: -5s;
}

.orb-3 {
  width: 250px;
  height: 250px;
  background: rgba(139, 92, 246, 0.2);
  top: 50%;
  left: 50%;
  animation-delay: -10s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(50px, -50px) scale(1.1); }
  50%      { transform: translate(-30px, 30px) scale(0.9); }
  75%      { transform: translate(40px, 20px) scale(1.05); }
}

/* === Data Particles === */
.data-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(6, 182, 212, 0.6);
  border-radius: 50%;
  animation: particleDrift 8s linear infinite;
}

.particle:nth-child(1)  { left: 10%; top: 20%;  animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2)  { left: 25%; top: 50%;  animation-delay: 1s; animation-duration: 10s; }
.particle:nth-child(3)  { left: 40%; top: 10%;  animation-delay: 2s; animation-duration: 14s; }
.particle:nth-child(4)  { left: 55%; top: 70%;  animation-delay: 0.5s; animation-duration: 9s; }
.particle:nth-child(5)  { left: 70%; top: 30%;  animation-delay: 3s; animation-duration: 11s; }
.particle:nth-child(6)  { left: 85%; top: 60%;  animation-delay: 1.5s; animation-duration: 13s; }
.particle:nth-child(7)  { left: 15%; top: 80%;  animation-delay: 2.5s; animation-duration: 8s; }
.particle:nth-child(8)  { left: 35%; top: 40%;  animation-delay: 4s; animation-duration: 15s; }
.particle:nth-child(9)  { left: 50%; top: 90%;  animation-delay: 0.8s; animation-duration: 10s; }
.particle:nth-child(10) { left: 65%; top: 15%;  animation-delay: 3.5s; animation-duration: 12s; }
.particle:nth-child(11) { left: 80%; top: 45%;  animation-delay: 1.2s; animation-duration: 9s; }
.particle:nth-child(12) { left: 5%;  top: 55%;  animation-delay: 2.8s; animation-duration: 11s; }
.particle:nth-child(13) { left: 45%; top: 25%;  animation-delay: 0.3s; animation-duration: 14s; }
.particle:nth-child(14) { left: 90%; top: 85%;  animation-delay: 3.2s; animation-duration: 10s; }
.particle:nth-child(15) { left: 20%; top: 65%;  animation-delay: 1.8s; animation-duration: 13s; }
.particle:nth-child(16) { left: 75%; top: 5%;   animation-delay: 4.5s; animation-duration: 8s; }
.particle:nth-child(17) { left: 60%; top: 55%;  animation-delay: 2.2s; animation-duration: 12s; }
.particle:nth-child(18) { left: 30%; top: 95%;  animation-delay: 0.7s; animation-duration: 9s; }

@keyframes particleDrift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
}

/* === Pulse Rings === */
.pulse-ring {
  position: fixed;
  border: 2px solid rgba(6, 182, 212, 0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: pulseRing 6s ease-out infinite;
}

.pulse-ring-1 {
  width: 300px;
  height: 300px;
  top: 30%;
  left: 60%;
  animation-delay: 0s;
}

.pulse-ring-2 {
  width: 400px;
  height: 400px;
  top: 40%;
  left: 10%;
  animation-delay: 3s;
}

@keyframes pulseRing {
  0%   { transform: scale(0.5); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* === Service Icon === */
.service-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s;
}

.service-icon .material-symbols-outlined {
  font-size: 36px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

.group:hover .service-icon {
  transform: scale(1.1);
}

/* === Section Divider === */
.section-divider {
  width: 80px;
  height: 4px;
  border-radius: 2px;
  margin: 0 auto;
  background: linear-gradient(90deg, #06B6D4 0%, #3B82F6 100%);
}

/* === Smooth scroll === */
html {
  scroll-behavior: smooth;
}

/* === Active nav link === */
.nav-active {
  color: #06B6D4 !important;
  border-bottom: 2px solid #06B6D4;
  padding-bottom: 4px;
}

/* === Tech Image Card Background === */
.tech-bg-card {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.group:hover .tech-bg-card {
  opacity: 0.25;
  transform: scale(1.05);
}

/* === Section with dimmed tech background === */
.tech-bg-section {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

/* === Que hacemos icon box === */
.icon-box-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  padding: 40px 32px;
  transition: all 0.3s ease;
}
.icon-box-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -12px rgba(6, 182, 212, 0.2);
  border-color: rgba(6, 182, 212, 0.3);
}
.icon-box-card ul {
  list-style: none;
  padding: 0;
}
.icon-box-card ul li {
  padding: 6px 0;
  color: #45464d;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-box-card ul li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(90deg, #06B6D4, #3B82F6);
  flex-shrink: 0;
}

/* === Client logo placeholder === */
.client-logo-item {
  filter: grayscale(1);
  opacity: 0.5;
  transition: all 0.3s ease;
}
.client-logo-item:hover {
  filter: grayscale(0);
  opacity: 0.9;
}

/* === Section title tag === */
.section-tag {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #06B6D4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(6, 182, 212, 0.05);
  backdrop-filter: blur(8px);
  margin-bottom: 16px;
}