/* ============================================================
   Magic UI — Efectos visuales para IndraMind Cybersecurity
   Componentes: Meteors · Shimmer Button · Border Beam ·
                Ripple · Marquee · Gradient Text ·
                Spotlight Card · Particles · Dot Grid ·
                Animated Badge · Glowing Button
   ============================================================ */

:root {
  --amazon:   #004254;
  --turquesa: #00B0BD;
  --oscuro:   #001923;
  --ceramic:  #E3E2DA;
}

/* --- TÉCNICO / FUTURISTA --- */
* {
  letter-spacing: -0.015em;
}

html {
  scroll-behavior: auto !important; /* Lenis lo maneja */
}

body {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- GLASSMORPHISM PREMIUM --- */
.mu-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ================================================================
   1. SHIMMER BUTTON
   Rayo de luz que recorre el botón de izquierda a derecha
   ================================================================ */
.mu-shimmer {
  position: relative;
  overflow: hidden;
}

.mu-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  animation: mu-shimmer-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mu-shimmer-sweep {
  0%   { left: -120%; }
  60%  { left: 120%;  }
  100% { left: 120%;  }
}

/* ================================================================
   2. BORDER BEAM
   Haz de luz que orbita el borde de una tarjeta
   Requiere @property para la animación del ángulo cónico
   ================================================================ */
@property --mu-beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.mu-beam {
  position: relative;
  isolation: isolate;
}

.mu-beam::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--mu-beam-angle),
    transparent 75%,
    var(--turquesa) 88%,
    rgba(0, 176, 189, 0.6) 92%,
    transparent 100%
  );
  animation: mu-beam-rotate 3.5s linear infinite;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

.mu-beam:hover::before {
  opacity: 1;
}

@keyframes mu-beam-rotate {
  to { --mu-beam-angle: 360deg; }
}

/* Fallback: si @property no está soportado, usar keyframes clásicos */
@supports not (background: conic-gradient(from 1deg, red, blue)) {
  .mu-beam::before {
    background: linear-gradient(
      var(--mu-beam-fallback-angle, 0deg),
      transparent 40%,
      var(--turquesa) 50%,
      transparent 60%
    );
    animation: mu-beam-rotate-fallback 3.5s linear infinite;
  }
  @keyframes mu-beam-rotate-fallback {
    0%   { --mu-beam-fallback-angle: 0deg;   }
    100% { --mu-beam-fallback-angle: 360deg; }
  }
}

/* ================================================================
   3. METEORS
   Líneas diagonales que cruzan secciones oscuras
   ================================================================ */
.mu-meteor {
  position: absolute;
  width: 2px;
  height: 0;
  border-radius: 9999px;
  background: linear-gradient(
    to bottom,
    rgba(0, 176, 189, 0.9) 0%,
    rgba(0, 176, 189, 0.4) 40%,
    transparent 100%
  );
  box-shadow: 0 0 6px 1px rgba(0, 176, 189, 0.35);
  top:  var(--mt, 20%);
  left: var(--ml, 50%);
  transform: rotate(215deg);
  transform-origin: top center;
  opacity: 0;
  animation: mu-meteor-fall var(--md, 5s) linear var(--delay, 0s) infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes mu-meteor-fall {
  0%   { height: 0;     opacity: 0;   transform: rotate(215deg) translateY(0);       }
  5%   { height: 120px; opacity: 1;                                                   }
  80%  { height: 120px; opacity: 0.8; transform: rotate(215deg) translateY(600px);    }
  100% { height: 0;     opacity: 0;   transform: rotate(215deg) translateY(700px);    }
}

/* ================================================================
   4. RIPPLE (Ondas expansivas)
   Círculos concéntricos que se expanden desde un punto
   ================================================================ */
.mu-ripple-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.mu-ripple-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 176, 189, 0.18);
  animation: mu-ripple-expand 4s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 1s);
  width:  calc(200px + var(--i, 0) * 180px);
  height: calc(200px + var(--i, 0) * 180px);
}

@keyframes mu-ripple-expand {
  0%   { transform: scale(0.8); opacity: 0.5; }
  50%  { opacity: 0.25; }
  100% { transform: scale(1.6); opacity: 0;   }
}

/* ================================================================
   5. MARQUEE (Desplazamiento infinito)
   ================================================================ */
.mu-marquee-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  margin-top: 40px;
  /* fade edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.mu-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: mu-marquee-scroll 28s linear infinite;
  will-change: transform;
}

.mu-marquee-track .sector-chip {
  flex-shrink: 0;
  width: 148px;
}

@keyframes mu-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pausa al hover */
.mu-marquee-wrapper:hover .mu-marquee-track {
  animation-play-state: paused;
}

/* ================================================================
   6. GRADIENT TEXT ANIMADO
   El texto varía su gradiente en un ciclo continuo
   ================================================================ */
.mu-gradient-text {
  background: linear-gradient(
    90deg,
    var(--turquesa)       0%,
    #7fdee5               25%,
    var(--turquesa)       50%,
    #b2f0f4               75%,
    var(--turquesa)       100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: mu-gradient-shift 4s linear infinite;
}

@keyframes mu-gradient-shift {
  0%   { background-position: 0%   center; }
  100% { background-position: 200% center; }
}

/* ================================================================
   7. SPOTLIGHT CARD
   Brillo que sigue al cursor dentro de la tarjeta
   ================================================================ */
.mu-spotlight {
  position: relative;
  overflow: hidden;
}

.mu-spotlight::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 176, 189, 0.10) 0%,
    transparent 70%
  );
  transform: translate(
    calc(var(--mx, -999px) - 140px),
    calc(var(--my, -999px) - 140px)
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.mu-spotlight:hover::after {
  opacity: 1;
}

/* ================================================================
   8. DOT GRID PATTERN (SVG background)
   Rejilla de puntos para secciones oscuras
   ================================================================ */
.mu-dot-grid {
  background-image: radial-gradient(
    circle,
    rgba(0, 176, 189, 0.18) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
}

/* ================================================================
   9. GLOWING BUTTON
   Variante de botón con halo de luz exterior
   ================================================================ */
.mu-glow {
  box-shadow:
    0 0 0   0   rgba(0, 176, 189, 0.0),
    0 4px 14px  rgba(0, 176, 189, 0.35);
  animation: mu-glow-pulse 2.5s ease-in-out infinite;
}

@keyframes mu-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0  0  0   rgba(0, 176, 189, 0.0),
      0 4px 14px  rgba(0, 176, 189, 0.35);
  }
  50% {
    box-shadow:
      0 0  0  8px rgba(0, 176, 189, 0.0),
      0 4px 28px  rgba(0, 176, 189, 0.55);
  }
}

/* ================================================================
   10. ANIMATED BADGE / KICKER
   El punto que pulsa junto al kicker de sección
   ================================================================ */
.mu-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mu-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--turquesa);
  flex-shrink: 0;
  animation: mu-badge-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
  box-shadow: 0 0 0 0 rgba(0, 176, 189, 0.5);
}

@keyframes mu-badge-ping {
  0%   { box-shadow: 0 0 0 0   rgba(0, 176, 189, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 176, 189, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(0, 176, 189, 0);    }
}

/* ================================================================
   11. WORD ROTATE (animación de texto en hero)
   ================================================================ */
.mu-word-rotate {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.mu-word-rotate-inner {
  display: block;
  animation: mu-word-slide 9s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

@keyframes mu-word-slide {
  0%,  28% { transform: translateY(0%);       opacity: 1; }
  33%       { transform: translateY(-100%);    opacity: 0; }
  34%       { transform: translateY(100%);     opacity: 0; }
  38%, 61%  { transform: translateY(0%);       opacity: 1; }
  66%       { transform: translateY(-100%);    opacity: 0; }
  67%       { transform: translateY(100%);     opacity: 0; }
  72%, 95%  { transform: translateY(0%);       opacity: 1; }
  100%      { transform: translateY(-100%);    opacity: 0; }
}

/* ================================================================
   12. PARTICLES CANVAS
   (el canvas lo genera magic-ui.js, aquí solo la base)
   ================================================================ */
.mu-particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ================================================================
   13. NÚMERO TICKER — mejora visual de las estadísticas
   ================================================================ */
.stat-number {
  background: linear-gradient(135deg, #fff 0%, var(--turquesa) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   14. CARD SHINE (hover) — brillo diagonal al pasar el cursor
   ================================================================ */
.mu-shine {
  position: relative;
  overflow: hidden;
}

.mu-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(0, 176, 189, 0.08) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  transition: opacity 0.1s;
  pointer-events: none;
  z-index: 1;
}

.mu-shine:hover::before {
  opacity: 1;
  animation: mu-shine-sweep 0.55s ease-out forwards;
}

@keyframes mu-shine-sweep {
  0%   { left: -75%; opacity: 1; }
  100% { left: 125%; opacity: 1; }
}

/* ================================================================
   15. HERO KICKER — pill con animación
   ================================================================ */
.hero-kicker.mu-badge {
  background: rgba(0, 176, 189, 0.12);
  border-color: rgba(0, 176, 189, 0.3);
}

/* ================================================================
   16. AURORA BACKGROUND (Para heros)
   Es un degradado suave que flota y se mueve
   ================================================================ */
.mu-aurora {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 176, 189, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 10% 20%, rgba(0, 66, 84, 0.2) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(127, 222, 229, 0.1) 0%, transparent 40%);
  filter: blur(60px);
  z-index: -1;
  opacity: 0.6;
  animation: mu-aurora-shift 12s ease-in-out infinite alternate;
}

@keyframes mu-aurora-shift {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.1) translate(2%, 3%); }
  100% { transform: scale(1) translate(-2%, 2%); }
}

/* ================================================================
   17. TRACING BEAM (Línea de seguimiento vertical)
   ================================================================ */
.mu-tracing-beam {
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0, 176, 189, 0.1);
  display: none;
}

@media (min-width: 1280px) {
  .mu-tracing-beam { display: block; }
}

.mu-tracing-beam::after {
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  width: 6px;
  height: 64px;
  background: linear-gradient(to bottom, transparent, var(--turquesa), transparent);
  border-radius: 999px;
  box-shadow: 0 0 10px var(--turquesa);
}

/* ================================================================
   18. BACKGROUND BEAMS (Hilos de luz estáticos/lentos)
   ================================================================ */
.mu-bg-beams {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0, 176, 189, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 176, 189, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  z-index: -1;
  -webkit-mask-image: radial-gradient(circle, black, transparent 80%);
  mask-image: radial-gradient(circle, black, transparent 80%);
}

/* ================================================================
   19. MAGNETIC BUTTON (Sutil segumiento de cursor)
   ================================================================ */
.mu-magnetic {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ================================================================
   20. BACKGROUND RIPPLE (Hover on section)
   ================================================================ */
.mu-bg-ripple {
  position: relative;
}

.mu-bg-ripple::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(0, 176, 189, 0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 0;
}

.mu-bg-ripple:hover::before {
  opacity: 1;
}

/* ================================================================
   21. ANIMATED LIST / NOTIFICATIONS (Magic UI Style)
   ================================================================ */
.mu-animated-list-container {
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.mu-notification {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* Estilo exacto del componente Notification de Magic UI */
.mu-notification {
  background: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
}

.mu-notification:hover {
  transform: scale(1.03);
}

/* Soporte para animaciones de entrada programadas vía JS */
.mu-list-enter {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: mu-list-stagger 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mu-list-stagger {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mu-list-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ================================================================
   22. SHADCN-INSPIRED FORM ELEMENTS
   ================================================================ */
.mu-input, .mu-select, .mu-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  outline: none;
}

.mu-input:focus, .mu-select:focus, .mu-textarea:focus {
  border-color: var(--turquesa);
  box-shadow: 0 0 0 2px rgba(0, 176, 189, 0.15);
}

.mu-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 25, 35, 0.5);
  margin-bottom: 0.5rem;
}

.mu-form-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

/* Reutilizar mu-beam para el borde de la tarjeta del formulario */
.mu-form-card.mu-beam::before {
  inset: -2px; /* Un poco más grueso para formularios */
  animation-duration: 4s;
}

/* ================================================================
   RESPONSIVE — desactivar efectos en móvil si son pesados
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .mu-meteor,
  .mu-ripple-ring,
  .mu-marquee-track,
  .mu-gradient-text,
  .mu-shimmer::after,
  .mu-beam::before,
  .mu-badge::before,
  .mu-glow,
  .mu-aurora {
    animation: none !important;
  }
  .mu-gradient-text {
    -webkit-text-fill-color: var(--turquesa);
  }
}

@media (max-width: 768px) {
  .mu-meteor, .mu-aurora, .mu-bg-beams { display: none; }
  .mu-ripple-ring { animation-duration: 6s; }
}
/* ================================================================
   25. HEXAGON PATTERN (Magic UI Style)
   ================================================================ */
.mu-hexagon-container {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: transparent;
  overflow: hidden;
}

.mu-hexagon-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='173.205' viewBox='0 0 100 173.205'%3E%3Cpath d='M25 0 L75 0 L100 43.301 L100 129.904 L75 173.205 L25 173.205 L0 129.904 L0 43.301 Z' fill='none' stroke='rgba(0,176,189,0.06)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 50px 86.6px;
  transform: skewY(6deg);
  mask-image: radial-gradient(420px circle at center, white, transparent);
  -webkit-mask-image: radial-gradient(420px circle at center, white, transparent);
}

.mu-hexagon-highlight {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 176, 189, 0.1);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  animation: mu-pulse 3s infinite ease-in-out;
}

@keyframes mu-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* ================================================================
   26. TEXT ANIMATE (blurInUp)
   ================================================================ */
.mu-text-animate span {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
}
/* ================================================================
   27. NOISE TEXTURE (Premium Grain)
   ================================================================ */
.mu-noise-overlay {
  position: fixed;
  inset: -200%;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.025;
  animation: mu-noise-shift 0.2s infinite;
}

@keyframes mu-noise-shift {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  30% { transform: translate(5%,-10%) }
  40% { transform: translate(-5%,15%) }
  50% { transform: translate(-10%,5%) }
  60% { transform: translate(15%,0) }
  70% { transform: translate(0,10%) }
  80% { transform: translate(-15%,0) }
  90% { transform: translate(10%,5%) }
  100% { transform: translate(5%,0) }
}

/* ================================================================
   28. SCROLL PROGRESS BAR
   ================================================================ */
.mu-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--turquesa);
  transform-origin: 0%;
  transform: scaleX(0);
  z-index: 10001;
}
/* ================================================================
   29. ANIMATED BEAM (Flow Visualization)
   ================================================================ */
.mu-beam-container {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-height: 600px;
  align-items: center;
  justify-content: space-between;
  padding: 80px;
  background: white;
  border-radius: 20px;
  border: 1px solid rgba(0, 25, 35, 0.05);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
  margin: 20px auto;
  overflow: visible;
}

.mu-beam-node {
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.05);
  background: white;
  box-shadow: 0 0 20px -5px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mu-beam-node:hover {
  transform: scale(1.1);
  border-color: var(--turquesa);
  box-shadow: 0 0 25px rgba(0, 176, 189, 0.2);
}

.mu-beam-node img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.mu-beam-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.mu-beam-path {
  fill: none;
  stroke: rgba(0, 176, 189, 0.1);
  stroke-width: 2;
}

.mu-beam-path-animated {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10, 100;
  stroke-dashoffset: 0;
  animation: mu-beam-move 3s linear infinite;
}

@keyframes mu-beam-move {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -110; }
}
/* ================================================================
   30. ORBITING CIRCLES (Dynamic Visualization)
   ================================================================ */
.mu-orbit-container {
  position: relative;
  display: flex;
  height: 600px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.mu-orbit-path {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(0, 176, 189, 0.15);
  pointer-events: none;
}

.mu-orbiter {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  border: 1px solid rgba(0, 176, 189, 0.1);
  padding: 10px;
  z-index: 30;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mu-orbiter:hover {
  transform: scale(1.3) !important;
  border-color: var(--turquesa);
  box-shadow: 0 8px 25px rgba(0, 176, 189, 0.2);
  z-index: 50;
}

.mu-orbiter img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

@keyframes mu-orbit-anim {
  from { transform: rotate(0deg) translateX(var(--radius)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg); }
}

.mu-orbiter-animate {
  animation: mu-orbit-anim var(--duration) linear infinite;
  animation-direction: var(--direction, normal);
}

.mu-orbit-center {
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #001923;
  width: 80px;
  height: 80px;
  border: 4px solid #00B0BD;
  box-shadow: 0 0 40px rgba(0, 176, 189, 0.2);
}
.mu-orbiter-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #001923;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
  border: 1px solid rgba(0, 176, 189, 0.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.mu-orbiter:hover .mu-orbiter-label {
  opacity: 1;
  background: white;
  border-color: #00B0BD;
}

/* ================================================================
   31. STEP FLOW (NIST Section)
   ================================================================ */
.mu-step-flow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  padding: 2rem 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none; /* Hide scrollbar Firefox */
  -ms-overflow-style: none;  /* Hide scrollbar IE/Edge */
}

.mu-step-flow-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar Chrome/Safari */
}

@media (max-width: 1024px) {
  .mu-step-flow-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 1rem;
  }
}

.mu-step-card {
  flex: 0 0 200px;
  background: white;
  border: 1px solid rgba(0, 176, 189, 0.1);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  position: relative;
  z-index: 1;
}

.mu-step-card:hover {
  transform: translateY(-8px);
  border-color: var(--turquesa);
  box-shadow: 0 12px 30px rgba(0, 176, 189, 0.1);
}

.mu-step-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  display: block;
}

.mu-step-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--oscuro);
  margin-bottom: 0.5rem;
}

.mu-step-desc {
  font-size: 0.85rem;
  color: rgba(0, 25, 35, 0.6);
  line-height: 1.4;
  margin: 0;
}

.mu-step-arrow {
  font-size: 1.5rem;
  color: var(--turquesa);
  font-weight: bold;
  opacity: 0.4;
  flex-shrink: 0;
  user-select: none;
  animation: mu-arrow-pulse 2s infinite ease-in-out;
}

@media (max-width: 1024px) {
  .mu-step-arrow {
    transform: rotate(90deg);
    width: 100%;
    text-align: center;
    margin: -0.5rem 0;
  }
}

@keyframes mu-arrow-pulse {
  0%, 100% { transform: translateX(0); opacity: 0.4; }
  50% { transform: translateX(5px); opacity: 0.8; }
}

@media (max-width: 1024px) {
  @keyframes mu-arrow-pulse {
    0%, 100% { transform: rotate(90deg) translateX(0); opacity: 0.4; }
    50% { transform: rotate(90deg) translateX(5px); opacity: 0.8; }
  }
}

/* ================================================================
   32. FLIP WORDS (Aceternity style)
   ================================================================ */
.mu-flip-container {
  display: inline-block;
  position: relative;
  vertical-align: top;
  overflow: hidden;
  height: 1.2em;
  margin-left: 0.2em;
}

.mu-flip-word {
  display: inline-block;
  color: var(--turquesa);
  font-weight: 800;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(100%);
  position: absolute;
  left: 0;
  white-space: nowrap;
}

.mu-flip-word.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

.mu-flip-word.exit {
  opacity: 0;
  transform: translateY(-100%);
}

/* ================================================================
   33. BENTO GRID (Dashboard Style Layout)
   ================================================================ */
.mu-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  width: 100%;
}

@media (max-width: 1024px) {
  .mu-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .mu-bento-grid {
    grid-template-columns: 1fr;
  }
}

.mu-bento-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background-color: white;
  border: 1px solid rgba(0, 176, 189, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 320px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.mu-bento-card:hover {
  transform: translateY(-5px);
  border-color: var(--turquesa);
  box-shadow: 0 20px 40px rgba(0, 176, 189, 0.12);
}

.mu-bento-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  overflow: hidden;
  z-index: 0;
  border-bottom: 1px solid rgba(0, 176, 189, 0.04);
  background: linear-gradient(to bottom, rgba(227, 226, 218, 0.2), transparent);
}

.mu-bento-card-content {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  margin-top: auto;
  background: white;
  flex-grow: 0;
}

.mu-bento-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--oscuro);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0, 25, 35, 0.15);
}

.mu-bento-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--oscuro);
  margin-bottom: 0.5rem;
}

.mu-bento-desc {
  font-size: 0.9rem;
  color: rgba(0, 25, 35, 0.6);
  line-height: 1.5;
}

.mu-bento-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.mu-bento-tag {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
  padding: 3px 8px;
  background: rgba(0, 176, 189, 0.08);
  color: var(--amazon);
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* Grillas Especiales */
@media (min-width: 641px) {
  .col-span-1 { grid-column: span 1 / span 1; }
  .col-span-2 { grid-column: span 2 / span 2; }
  .col-span-3 { grid-column: span 3 / span 3; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .lg\:col-span-1 { grid-column: span 1 / span 1; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 2 / span 2; }
}

/* ================================================================
   34. INTERACTIVE GLOBAL MAP (SOC Centers)
   ================================================================ */
.mu-map-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.mu-map-container {
    width: 100%;
    max-width: 1200px;
    height: 600px;
    position: relative;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .mu-map-container {
        height: 400px;
    }
}

.mu-map-info-box {
    position: absolute;
    background: rgba(10, 25, 35, 0.85);
    border: 1px solid var(--turquesa);
    padding: 20px;
    min-width: 200px;
    pointer-events: none;
    backdrop-filter: blur(8px);
    z-index: 10;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.mu-map-info-box h3 {
    color: var(--turquesa);
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
}

.mu-map-info-box .subtitle {
    margin: 0 0 15px 0;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    font-weight: 600;
}

.mu-map-info-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mu-map-info-box ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: white;
}

.mu-map-info-box ul li::before {
    content: "⌖";
    position: absolute;
    left: 0;
    color: var(--turquesa);
    font-size: 16px;
}

.mu-map-info-box .footer-text {
    font-size: 12px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
}

/* Positioning info boxes */
#box-latam { bottom: 10%; left: 0%; }
#box-europa { top: 10%; right: 5%; }
#box-asomaf { bottom: 15%; right: 0%; }

@media (max-width: 1024px) {
    .mu-map-info-box {
       position: static;
       margin-bottom: 1rem;
       min-width: auto;
       width: 100%;
       pointer-events: auto;
    }
    .mu-map-info-boxes-mobile {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1rem;
       margin-top: 2rem;
    }
}

@media (max-width: 640px) {
    .mu-map-info-boxes-mobile {
       grid-template-columns: 1fr;
    }
}

#jvm-map {
    width: 100%;
    height: 100%;
    background-color: transparent !important;
}