.elementor-1160 .elementor-element.elementor-element-3d1c21a{--display:flex;}/* Start custom CSS *//* =========================================
   SECCIÓN QUIÉNES SOMOS — Nativa Digital
   Circuito Electrónico Glowing Premium
   ========================================= */

.qs-section {
  padding: 120px 20px;
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* =========================================
   ANIMACIÓN GLOBAL: PARTÍCULAS INTELIGENTES
   ========================================= */

.qs-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.qs-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(0, 255, 255, 0.7);
  border-radius: 50%;
  filter: blur(2px);
  animation: floatParticle 12s linear infinite;
}

@keyframes floatParticle {
  0% { transform: translateY(0) translateX(0); opacity: .3; }
  40% { opacity: .9; }
  100% { transform: translateY(-260px) translateX(80px); opacity: 0; }
}

/* Generación automática de 30 partículas */
.qs-particles span:nth-child(1){ top:80%; left:25%; animation-delay:.2s; }
.qs-particles span:nth-child(2){ top:70%; left:40%; animation-delay:.5s; }
.qs-particles span:nth-child(3){ top:65%; left:60%; animation-delay:1.2s; }
.qs-particles span:nth-child(4){ top:85%; left:70%; animation-delay:.7s; }
.qs-particles span:nth-child(5){ top:75%; left:50%; animation-delay:1.6s; }
.qs-particles span:nth-child(6){ top:90%; left:30%; animation-delay:2s; }
.qs-particles span:nth-child(7){ top:88%; left:80%; animation-delay:1s; }
.qs-particles span:nth-child(8){ top:82%; left:10%; animation-delay:.3s; }
.qs-particles span:nth-child(9){ top:78%; left:90%; animation-delay:1.8s; }
.qs-particles span:nth-child(10){ top:92%; left:55%; animation-delay:.9s; }

/* duplicamos para densidad */
.qs-particles span:nth-child(11){ top:50%; left:25%; animation-delay:.2s; }
.qs-particles span:nth-child(12){ top:55%; left:40%; animation-delay:.5s; }
.qs-particles span:nth-child(13){ top:58%; left:60%; animation-delay:1.2s; }
.qs-particles span:nth-child(14){ top:40%; left:70%; animation-delay:.7s; }
.qs-particles span:nth-child(15){ top:45%; left:50%; animation-delay:1.6s; }
.qs-particles span:nth-child(16){ top:35%; left:30%; animation-delay:2s; }
.qs-particles span:nth-child(17){ top:38%; left:80%; animation-delay:1s; }
.qs-particles span:nth-child(18){ top:42%; left:10%; animation-delay:.3s; }
.qs-particles span:nth-child(19){ top:48%; left:90%; animation-delay:1.8s; }
.qs-particles span:nth-child(20){ top:34%; left:55%; animation-delay:.9s; }


/* =========================================
   FONDO DE CONEXIONES ALGORÍTMICAS
   ========================================= */

.algo-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

/* Grid algorítmico (vertical + horizontal) */
.algo-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(148,0,255,0.12) 0px,
      rgba(148,0,255,0.12) 2px,
      transparent 2px,
      transparent 130px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,240,255,0.10) 0px,
      rgba(0,240,255,0.10) 2px,
      transparent 2px,
      transparent 130px
    );
  
  opacity: 0.22;
  animation: grid-move 20s linear infinite;
  filter: blur(1px);
}

@keyframes grid-move {
  0%   { transform: translate(0,0); }
  100% { transform: translate(-130px, -130px); }
}

/* Nodos glowing */
.algo-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(130,0,255,0.4), transparent 60px),
    radial-gradient(circle at 70% 65%, rgba(0,200,255,0.35), transparent 60px),
    radial-gradient(circle at 40% 85%, rgba(160,0,255,0.28), transparent 60px);

  filter: blur(30px);
  opacity: 0.8;
  animation: pulse-nodes 12s ease-in-out infinite;
}

@keyframes pulse-nodes {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.2); }
}


/* =========================================
   CONECTORES DE CIRCUITO (líneas reales SVG)
   ========================================= */

.circuit-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.32;
}

.circuit-lines svg {
  width: 100%;
  height: 100%;
}

.circuit-lines path {
  stroke: rgba(120,0,255,0.7);
  stroke-width: 1.6px;
  fill: none;
  stroke-dasharray: 6 14;
  animation: circuitFlow 4s linear infinite;
  filter: drop-shadow(0 0 8px rgba(120,0,255,0.8));
}

@keyframes circuitFlow {
  0%   { stroke-dashoffset: 180; }
  100% { stroke-dashoffset: -180; }
}


/* =========================================
   CONTENIDO - TÍTULOS Y TEXTOS
   ========================================= */

.qs-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1.2s ease forwards;
}

.qs-title {
  font-size: 56px;
  font-weight: 800;
  background: linear-gradient(90deg, #b86bff, #7c3cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glowText 2.5s ease-in-out infinite alternate;
}

.qs-desc {
  font-size: 18px;
  line-height: 1.7;
  color: #d6d6d6;
  margin-bottom: 18px;
  animation: fadeIn 1.4s ease forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes glowText {
  from { text-shadow: 0 0 10px rgba(160,70,255,0.4); }
  to { text-shadow: 0 0 28px rgba(180,90,255,1); }
}


/* =========================================
   ESFERA GLOW CENTRAL (lado izquierdo)
   ========================================= */

.qs-glow {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(150,0,255,0.45), rgba(0,0,0,0));
  border-radius: 50%;
  filter: blur(60px);
  position: absolute;
  top: -20px;
  left: -20px;
  animation: breathing 6s infinite ease-in-out;
  z-index: 1;
}

@keyframes breathing {
  0%,100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

.circuit-svg {
  position: relative;
  z-index: 2;
  animation: floatCircuit 4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(120,40,255,0.7));
}

@keyframes floatCircuit {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.circuit-svg path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: drawLines 3s ease forwards;
}

@keyframes drawLines {
  to { stroke-dashoffset: 0; }
}

.circuit-svg circle {
  animation: pulseNode 2s infinite alternate ease-in-out;
}

@keyframes pulseNode {
  0% { filter: drop-shadow(0 0 6px #00eaff); }
  100% { filter: drop-shadow(0 0 16px #00eaff); }
}


/* =========================================
   FEATURES A LA DERECHA
   ========================================= */

.qs-visual {
  position: relative;
  display: flex;
  align-items: center;
  gap: 80px;
  z-index: 5;
}

.qs-features-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 360px;
  z-index: 5;
}

.qs-feature-card {
  background: linear-gradient(
      90deg,
      rgba(107, 33, 168, 0.22),
      rgba(0, 229, 255, 0.15)
    );
  border: 1px solid rgba(255,255,255,0.08);
  padding: 16px 20px;
  border-radius: 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 0 18px rgba(107,33,168,0.2);
  opacity: 0;
  animation: fadeSlide 1s ease forwards;
  transition: .25s ease;
}

.qs-feature-card:nth-child(1){animation-delay:.4s;}
.qs-feature-card:nth-child(2){animation-delay:.55s;}
.qs-feature-card:nth-child(3){animation-delay:.7s;}
.qs-feature-card:nth-child(4){animation-delay:.85s;}
.qs-feature-card:nth-child(5){animation-delay:1s;}

.qs-feature-card h4 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #fff;
  font-weight: 700;
}

.qs-feature-card p {
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
}

.qs-feature-card:hover {
  transform: translateX(6px) translateY(-4px);
  box-shadow:
      0 0 26px rgba(120, 40, 255, .5),
      0 0 46px rgba(0,229,255,.25);
  border-color: rgba(255,255,255,0.18);
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media(max-width:900px){
  .qs-visual {
    flex-direction: column;
    gap: 60px;
  }

  .circuit-svg,
  .qs-glow {
    width: 300px !important;
    height: 300px !important;
  }

  .qs-feature-card {
    width: 100%;
  }

  .qs-container {
    text-align: center;
  }
}/* End custom CSS */