/* ============================================================
   IG TECH · Depth 3D Layer
   Perspectiva real + preserve-3d + parallax · WOW factor
   ============================================================ */

/* ============================================================
   1. HERO con PERSPECTIVA 3D
   Activamos el contexto 3D para que todo dentro pueda usar rotateX/Y
   ============================================================ */
.hero {
  perspective: 1800px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.hero-grid {
  transform-style: preserve-3d;
}

/* ============================================================
   2. TERMINAL · sin rotación 3D · solo glow sutil
   (quitado tilt/perspective · el usuario prefiere plano)
   ============================================================ */
.hero .terminal {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   3. CUBO 3D · RETIRADO
   Decoración técnica que reforzaba el cliché "consultora IT".
   Si el JS sigue inyectándolo, queda oculto vía display:none.
   ============================================================ */
.d3-iso-cube,
.d3-iso-face,
.d3-iso-face--front,
.d3-iso-face--back,
.d3-iso-face--right,
.d3-iso-face--left,
.d3-iso-face--top,
.d3-iso-face--bottom { display: none !important; }

/* ============================================================
   4. PILLAR CARDS · 3D tilt RETIRADO
   El mouse-tracking con rotateX/rotateY/translateZ no convencía.
   Vuelve al hover simple de enhancements.css: lift + shadow + border.
   La función `enable3DPillars()` en depth-3d.js también queda noop.
   ============================================================ */

/* ============================================================
   5. PARALLAX SCROLL · capas del hero se mueven a velocidades distintas
   ============================================================ */
.hero-bg {
  transform: translate3d(0, var(--parallax-bg, 0), 0);
  will-change: transform;
}
.hero-grid-pattern {
  transform: translate3d(0, var(--parallax-grid, 0), 0);
  will-change: transform;
}

/* STAT NUMBERS · sin text-shadow 3D (quitado por preferencia del usuario)
   El gradient brand→accent ya viene de enhancements.css */

/* ============================================================
   7. BOTONES con depth · 3D press al activar
   ============================================================ */
.btn--lg,
.btn--accent,
.btn--primary {
  transform-style: preserve-3d;
  position: relative;
}
.btn--lg::before,
.btn--accent::before,
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  transform: translateZ(-1px) translateY(3px);
  filter: blur(0.5px) brightness(0.4);
  z-index: -1;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn--lg:active,
.btn--accent:active,
.btn--primary:active {
  transform: translateY(2px);
}
.btn--lg:active::before,
.btn--accent:active::before,
.btn--primary:active::before {
  transform: translateZ(-1px) translateY(1px);
  opacity: 0.3;
}

/* ============================================================
   8. ACCENT-LINE (hero) · gradient-text retirado
   `background-clip: text` con gradiente es decorativo y prohibido.
   La emphasis viene ahora del peso + tamaño, no del color.
   ============================================================ */
.hero-title .accent-line {
  position: relative;
  display: inline-block;
}
.hero-title .accent-line::before { display: none !important; }

/* ============================================================
   9. LOGO 3D · el punto verde sale ligeramente del plano
   ============================================================ */
.logo {
  transform-style: preserve-3d;
}
.logo::after {
  /* Override del live-badge para que se vea en 3D */
  transform: translateZ(8px);
}

/* ============================================================
   10. RESPONSIVE · desactivar 3D en móvil (rendimiento)
   ============================================================ */
@media (max-width: 900px) {
  .hero .terminal {
    transform: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }
  .hero .terminal::after { display: none; }
  /* Las pillar-cards ya no usan 3D; el hover móvil se controla en enhancements.css */
}

/* ============================================================
   11. REDUCED MOTION · honor preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero .terminal { transform: none !important; }
}