/* ══════════════════════════════════════════════════════════
   MODO IA — CSS VARIABLES OVERRIDE
   Todo lo que usa var(--accent) etc. cambia automáticamente
   ══════════════════════════════════════════════════════════ */
body.mode-ia {
  --black:  #03030f;
  --dark:   #060614;
  --panel:  #09091e;
  --border: rgba(0, 229, 255, 0.12);
  --accent: #00e5ff;
  --accent2: #7c3aed;
  --muted:  rgba(180, 235, 255, 0.5);
}

/* Transición suave de fondo/color en todos los elementos clave */
body, nav, nav.scrolled, section, footer,
#clientes, .service-item,
.card, .card-overlay {
  transition: background 0.6s ease, border-color 0.6s ease, color 0.6s ease;
}

/* Nav scrolled en modo IA */
body.mode-ia nav.scrolled {
  background: rgba(3,3,15,0.94);
}

/* Play btn hover en modo IA */
body.mode-ia .card:hover .play-btn {
  border-color: var(--accent);
  background: rgba(0,229,255,0.1);
  box-shadow: 0 0 20px rgba(0,229,255,0.3);
}

/* Glow sutil en labels/títulos en modo IA */
body.mode-ia .section-label {
  text-shadow: 0 0 20px rgba(0,229,255,0.6);
}
body.mode-ia .card-tag {
  text-shadow: 0 0 12px rgba(0,229,255,0.5);
}

/* Scanline overlay en modo IA */
body.mode-ia::after {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
}

/* ─── GLITCH TEXT EN MODO IA ─── */
body.mode-ia .client-name:hover::after {
  content: attr(data-text);
  opacity: 1;
  left: 5px;
  text-shadow: -5px 0 rgba(255,0,80,0.9);
  animation: glitch-anim calc(var(--glitch-speed, 1) * 3s) infinite linear alternate-reverse;
}
body.mode-ia .client-name:hover::before {
  content: attr(data-text);
  opacity: 1;
  left: -5px;
  text-shadow: 5px 0 rgba(0,229,255,0.9);
  animation: glitch-anim calc(var(--glitch-speed, 1) * 2s) infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0%   { clip-path: inset(20% 0 50% 0); }
  5%   { clip-path: inset(10% 0 60% 0); }
  10%  { clip-path: inset(15% 0 55% 0); }
  15%  { clip-path: inset(25% 0 35% 0); }
  20%  { clip-path: inset(30% 0 40% 0); }
  25%  { clip-path: inset(40% 0 20% 0); }
  30%  { clip-path: inset(10% 0 60% 0); }
  35%  { clip-path: inset(15% 0 55% 0); }
  40%  { clip-path: inset(25% 0 35% 0); }
  45%  { clip-path: inset(30% 0 40% 0); }
  50%  { clip-path: inset(20% 0 50% 0); }
  55%  { clip-path: inset(10% 0 60% 0); }
  60%  { clip-path: inset(15% 0 55% 0); }
  65%  { clip-path: inset(25% 0 35% 0); }
  70%  { clip-path: inset(30% 0 40% 0); }
  75%  { clip-path: inset(40% 0 20% 0); }
  80%  { clip-path: inset(20% 0 50% 0); }
  85%  { clip-path: inset(10% 0 60% 0); }
  90%  { clip-path: inset(15% 0 55% 0); }
  95%  { clip-path: inset(25% 0 35% 0); }
  100% { clip-path: inset(30% 0 40% 0); }
}

/* ─── PORTFOLIO DUAL VISIBILITY ─── */
body.mode-ia #portfolio-ia   { display: block; }
body.mode-ia #portfolio-trad { display: none; }

/* Cards IA — borde cyan + glow en hover */
body.mode-ia .card {
  border: 1px solid rgba(0,229,255,0.08);
}
body.mode-ia .card:hover {
  border-color: rgba(0,229,255,0.35);
  box-shadow: 0 0 30px rgba(0,229,255,0.08);
}