/* ===== FX TITULOS ROBOTA – Parpadeo Neón Automático ===== */
/* Paleta corporativa */
:root{
  --robota-yellow:#FFD000;
  --robota-cyan:#00E0FF;
  --robota-dark:#111111;
  --robota-white:#FFFFFF;
}

/* Tamaños sugeridos */
.fx-title-xl{ font-size: clamp(28px, 5vw, 62px); line-height: 1.1; font-weight: 800; }
.fx-title-lg{ font-size: clamp(22px, 3.8vw, 42px); line-height: 1.15; font-weight: 700; }

/* Animación base: pulso neón (apta para fondos oscuros) */
.fx-title-pulse{
  color: var(--robota-white);
  text-shadow: 0 0 0 transparent;
  animation: robotaPulse 6.5s ease-in-out infinite;
}

/* Variante para fondos claros (texto oscuro con halo) */
.fx-title-pulse-light{
  color: var(--robota-dark);
  text-shadow: 0 0 0 transparent;
  animation: robotaPulseLight 6.5s ease-in-out infinite;
}

/* Gradiente animado + pulso (neón elegante) */
.fx-title-pulse-gradient{
  background: linear-gradient(90deg, var(--robota-yellow), var(--robota-cyan), var(--robota-yellow));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: robotaGradient 9s linear infinite, robotaPulseGlow 6.5s ease-in-out infinite;
}

/* Keyframes: brillo suave, un pequeño “flicker” y descanso */
@keyframes robotaPulse{
  0%, 14% { text-shadow: 0 0 0 transparent; }
  15%     { text-shadow: 0 0 6px #fff, 0 0 14px var(--robota-yellow), 0 0 26px var(--robota-cyan); }
  17%     { text-shadow: 0 0 2px #fff, 0 0 8px var(--robota-yellow), 0 0 16px var(--robota-cyan); } /* micro flicker */
  25%     { text-shadow: 0 0 10px #fff, 0 0 22px var(--robota-yellow), 0 0 34px var(--robota-cyan); }
  40%,100%{ text-shadow: 0 0 0 transparent; }
}

@keyframes robotaPulseLight{
  0%, 14% { text-shadow: 0 0 0 transparent; }
  15%     { text-shadow: 0 0 10px rgba(255,208,0,.55), 0 0 22px rgba(0,224,255,.45); }
  17%     { text-shadow: 0 0 6px rgba(255,208,0,.4),  0 0 16px rgba(0,224,255,.35); }
  25%     { text-shadow: 0 0 14px rgba(255,208,0,.7),  0 0 28px rgba(0,224,255,.55); }
  40%,100%{ text-shadow: 0 0 0 transparent; }
}

@keyframes robotaPulseGlow{
  0%, 14% { filter: drop-shadow(0 0 0 rgba(255,208,0,0)); }
  15%     { filter: drop-shadow(0 0 6px rgba(255,208,0,.35)); }
  25%     { filter: drop-shadow(0 0 10px rgba(255,208,0,.45)); }
  40%,100%{ filter: drop-shadow(0 0 0 rgba(255,208,0,0)); }
}

/* Gradiente desplazándose (para la versión gradient) */
@keyframes robotaGradient{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* Accesibilidad: si el usuario prefiere menos animación, atenuamos */
@media (prefers-reduced-motion: reduce){
  .fx-title-pulse,
  .fx-title-pulse-light,
  .fx-title-pulse-gradient{
    animation-duration: 18s; /* mucho más lento */
  }
}

/* ===== SUBTÍTULOS ROBOTA – Barra luminosa + texto dinámico ===== */
:root{
  --robota-yellow:#FFD000;
  --robota-cyan:#00E0FF;
  --robota-dark:#111111;
  --robota-white:#FFFFFF;
}

/* Contenedor general debajo del título */
.fx-sub{
  display:flex; align-items:center; gap:.75rem;
  margin-top:.5rem;
  font-weight:600;
  line-height:1.2;
  color: var(--robota-dark);
}

/* Variante para fondos oscuros (texto claro) */
.fx-sub--dark{ color: var(--robota-white); }

/* Barra luminosa a la izquierda del subtítulo */
.fx-sub__bar{
  width: 46px; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--robota-yellow), var(--robota-cyan), var(--robota-yellow));
  box-shadow: 0 0 16px rgba(255,208,0,.45), 0 0 22px rgba(0,224,255,.35);
  animation: fxSubBar 3.2s linear infinite;
  flex: 0 0 auto;
}
@keyframes fxSubBar{
  0%{ filter: brightness(1); }
  50%{ filter: brightness(1.3); }
  100%{ filter: brightness(1); }
}

/* Texto del subtítulo + cursor tipo typing */
.fx-sub__text{
  position: relative;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing:.2px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

/* Caret (cursor) durante escritura */
.fx-sub__text.is-typing::after{
  content:"";
  display:inline-block; width: 8px; height: 1.05em;
  margin-left: 4px; transform: translateY(2px);
  background: currentColor;
  animation: fxCaret .9s steps(2,end) infinite;
}
@keyframes fxCaret{
  0%,49%{ opacity: 1; } 50%,100%{ opacity: 0; }
}

/* Modo reducido: sin caret ni animaciones fuertes */
@media (prefers-reduced-motion: reduce){
  .fx-sub__bar{ animation: none; }
  .fx-sub__text.is-typing::after{ display:none; }
}
/* ====== FX TITULOS ROBOTA – ACTIVOS SOLO EN HOVER ====== */
/* Paleta corporativa */
:root{
  --robota-yellow:#FFD000;
  --robota-cyan:#00E0FF;
  --robota-dark:#111111;
  --robota-white:#FFFFFF;
}

/* A) Glow clásico (sobre fondos oscuros) */
.fx-title-hover{
  color: var(--robota-white);
  transition: text-shadow .35s ease, color .35s ease;
}
.fx-title-hover:hover{
  color: var(--robota-yellow);
  text-shadow:
    0 0 4px #fff,
    0 0 12px var(--robota-yellow),
    0 0 22px var(--robota-yellow),
    0 0 32px var(--robota-cyan);
}

/* B) Glow para fondos claros */
.fx-title-hover-light{
  color: var(--robota-dark);
  transition: text-shadow .35s ease, color .35s ease;
}
.fx-title-hover-light:hover{
  color: var(--robota-dark);
  text-shadow:
    0 0 8px rgba(255,208,0,.7),
    0 0 18px rgba(0,224,255,.6),
    0 0 28px rgba(0,224,255,.4);
}

/* C) Gradiente animado solo en hover */
.fx-title-gradient-hover{
  color: var(--robota-dark);
  transition: all .4s ease;
}
.fx-title-gradient-hover:hover{
  background: linear-gradient(90deg, var(--robota-yellow), var(--robota-cyan), var(--robota-yellow));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: robotaGradient 6s linear infinite;
}
@keyframes robotaGradient{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* D) Subrayado que aparece en hover */
.fx-title-underline{
  position: relative;
  display: inline-block;
  background: linear-gradient(var(--robota-yellow), var(--robota-yellow)) bottom center/0 .14em no-repeat;
  transition: background-size .35s ease, text-shadow .35s ease;
}
.fx-title-underline:hover{
  background-size: 100% .14em;
  text-shadow: 0 0 10px rgba(255,208,0,.45);
}

/* ====== Tamaños sugeridos ====== */
.fx-title-xl{ font-size: clamp(28px, 5vw, 62px); line-height: 1.1; font-weight: 800; }
.fx-title-lg{ font-size: clamp(22px, 3.8vw, 42px); line-height: 1.15; font-weight: 700; }

.services-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 tarjetas por fila */
  gap: 12px; /* espacio entre tarjetas */
  max-width: 800px; /* ancho máximo de la fila */
  margin: 0 auto; /* centrar la fila */
  padding: 10px 0;
}

.service-card {
  min-height: 95px; /* altura mínima uniforme */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  text-align: center;
  font-size: 1rem;
}

/* Tarjeta Ingeniería en Robots */
.card-robots {
  background: linear-gradient(
    135deg,
    rgba(106, 90, 205, 0.50),
    rgba(72, 61, 139, 0.50)
  );
  color: #ffffff;
}

/* Tarjeta IoT */
.card-iot {
  background: linear-gradient(
    135deg,
    rgba(74, 144, 226, 0.50),
    rgba(30, 99, 178, 0.50)
  );
  color: #fff;
}

/* Tarjeta IA Aplicada */
.card-ia {
  background: linear-gradient(
    135deg,
    rgba(59, 179, 214, 0.50),
    rgba(22, 122, 158, 0.50)
  );
  color: #fff;
}

/* Tarjeta Gestión de Energía */
.card-energia {
  background: linear-gradient(
    135deg,
    rgba(46, 204, 113, 0.50),
    rgba(27, 122, 74, 0.50)
  );
  color: #fff;
}

/* Tarjeta Recursos para Minería */
.card-mineria {
  background: linear-gradient(
    135deg,
    rgba(255, 152, 0, 0.50),
    rgba(230, 81, 0, 0.50)
  );
  color: #fff;
}

/* Tarjeta Drones y Siembra de Nubes */
.card-drones {
  background: linear-gradient(
    135deg,
    rgba(156, 39, 176, 0.50),
    rgba(106, 27, 154, 0.50)
  );
  color: #fff;
}


/* Fondo del encabezado principal */
.header-gradient {
  background: #05004d;
  background: linear-gradient(
    135deg, 
    rgba(5, 0, 77, 1) 0%, 
    rgba(9, 44, 121, 1) 50%, 
    rgba(0, 88, 176, 1) 100%
  );
}

/* Fondo del encabezado - versión elegante */
.header-gradient-elegant {
  background: linear-gradient(
    135deg,
    rgba(3, 8, 30, 1) 0%,     /* azul casi negro */
    rgba(15, 32, 80, 1) 65%,  /* azul profundo corporativo */
    rgba(32, 58, 124, 1) 100% /* azul apagado */
  );
}

/* Fondo del encabezado - versión futurista */
.header-gradient-futuristic {
  background: linear-gradient(
    135deg,
    rgba(2, 0, 36, 1) 0%,     /* azul oscuro */
    rgba(0, 128, 255, 1) 50%, /* azul vibrante */
    rgba(0, 212, 255, 1) 100% /* cian/teal brillante */
  );
}