/* ==============================================================================
   ANIMATIONS & UI INTERACTION SYSTEM — Algoritmo Binario
   Experiencia Figma 3D + Cyberpunk Determinista (Nivel 1000/1000):
   1. Menú móvil en esquina superior derecha (100% responsive en celular)
   2. Parallax 3D Tilt Holográfico con perspectiva reactiva al cursor
   3. Borde láser giratorio con gradiente cónico (Conic Laser Border)
   4. Diagrama de flujo con pulsos de energía y haces de partículas SVG
   5. Monitor de actividad de agentes con visualizador de frecuencias (Waveform)
   6. Glassmorphism reactivo en cabecera
   7. Botones hápticos táctiles con rebote elástico
   8. Scroll reveal determinista
   ============================================================================== */

:root {
  --green-brand: #5cbdb5;
  --green-brand-hover: #4ea8a1;
  --cyan-brand: #38bdf8;
  --cyan-glow: rgba(56, 189, 248, 0.28);
  --teal-glow: rgba(92, 189, 181, 0.28);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==============================================================================
   1. PARALLAX 3D TILT HOLOGRÁFICO EN TARJETAS (ESTILO FIGMA / WEBGL)
   ============================================================================== */
.service-card, .pillar-card, .benefit-card, .cluster-card, 
.telemetry-tilt-card, .card, .content-card, .slider-box, 
.ab-pipeline-widget, section > article, .use-case, .step-box {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform, border-color, box-shadow;
  transition: transform 0.25s var(--ease-spring), 
              border-color 0.25s ease, 
              box-shadow 0.25s ease;
}

/* Línea superior brillante con efecto Shimmer en la arista de la tarjeta */
.service-card::after, .pillar-card::after, .benefit-card::after, 
.cluster-card::after, .telemetry-tilt-card::after, .card::after, 
.content-card::after, .slider-box::after, .ab-pipeline-widget::after, 
section > article::after, .use-case::after, .step-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--cyan-brand), var(--green-brand), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.service-card:hover, .pillar-card:hover, .benefit-card:hover, 
.cluster-card:hover, .telemetry-tilt-card:hover, .card:hover, 
.content-card:hover, .slider-box:hover, .ab-pipeline-widget:hover, 
section > article:hover, .use-case:hover, .step-box:hover {
  border-color: rgba(92, 189, 181, 0.6) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(92, 189, 181, 0.15) !important;
}

.service-card:hover::after, .pillar-card:hover::after, .benefit-card:hover::after, 
.cluster-card:hover::after, .telemetry-tilt-card:hover::after, .card:hover::after, 
.content-card:hover::after, .slider-box:hover::after, .ab-pipeline-widget:hover::after, 
section > article:hover::after, .use-case:hover::after, .step-box:hover::after {
  opacity: 1;
}

.service-card > *, .pillar-card > *, .benefit-card > *, 
.cluster-card > *, .telemetry-tilt-card > *, .card > *, 
.content-card > *, .slider-box > *, .ab-pipeline-widget > *, 
section > article > *, .use-case > *, .step-box > * {
  position: relative;
  z-index: 2;
}

/* ==============================================================================
   2. NODO CENTRAL AGENTE IA: BORDE LÁSER GIRATORIO (CONIC LASER BORDER)
   ============================================================================== */
.center-node, .node-card.center-node {
  position: relative;
  background: linear-gradient(145deg, #09213d 0%, #04101e 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.2) !important;
}

.center-node .center-badge {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid var(--cyan-brand);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
  font-weight: 800;
}

/* ==============================================================================
   3. PULSOS DE ENERGÍA EN CABLES SVG (DIAGRAMA DE FLUJO EN TIEMPO REAL)
   ============================================================================== */
.pipeline-wire {
  stroke: #163254 !important;
  stroke-width: 2.5 !important;
  stroke-dasharray: 6 6 !important;
}

.pipeline-pulse {
  stroke: var(--cyan-brand) !important;
  stroke-width: 3.5 !important;
  stroke-linecap: round !important;
  filter: drop-shadow(0 0 8px var(--cyan-brand)) !important;
  stroke-dasharray: 25 180 !important;
  animation: flowEnergy 2s linear infinite !important;
}

.pipeline-pulse.reverse {
  stroke: var(--green-brand) !important;
  filter: drop-shadow(0 0 8px var(--green-brand)) !important;
  animation: flowEnergyReverse 2s linear infinite !important;
}

@keyframes flowEnergy {
  from { stroke-dashoffset: 205; }
  to { stroke-dashoffset: 0; }
}

@keyframes flowEnergyReverse {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 205; }
}

/* ==============================================================================
   4. VISUALIZADOR DE FRECUENCIAS DE AGENTE (WAVEFORM)
   ============================================================================== */
.agent-waveform {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 13px;
  vertical-align: middle;
  margin-left: 6px;
}

.wave-bar {
  width: 2.5px;
  height: 100%;
  background: var(--green-brand);
  border-radius: 2px;
  animation: wavePulse 1.2s ease-in-out infinite alternate;
}

.wave-bar:nth-child(2) { animation-delay: 0.15s; height: 60%; background: var(--cyan-brand); }
.wave-bar:nth-child(3) { animation-delay: 0.3s; height: 100%; }
.wave-bar:nth-child(4) { animation-delay: 0.45s; height: 50%; background: var(--cyan-brand); }

@keyframes wavePulse {
  0% { transform: scaleY(0.25); }
  100% { transform: scaleY(1); }
}

/* ==============================================================================
   5. CABECERA CON GLASSMORPHISM EN SCROLL
   ============================================================================== */
.site-header {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
  background-color: rgba(3, 9, 20, 0.94) !important;
  border-bottom: 1px solid rgba(92, 189, 181, 0.28) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ==============================================================================
   6. BOTONES HÁPTICOS TÁCTILES
   ============================================================================== */
.btn-solid, .btn-primary, .btn-main, .nav-cta, .btn-nav-contact, .btn-simulate, .btn-run-sql {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease-spring), 
              box-shadow 0.2s ease, 
              background-color 0.15s ease !important;
  will-change: transform;
}

.btn-solid:hover, .btn-primary:hover, .btn-main:hover, 
.nav-cta:hover, .btn-nav-contact:hover, .btn-simulate:hover, .btn-run-sql:hover {
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 4px 22px var(--teal-glow) !important;
}

.btn-solid:active, .btn-primary:active, .btn-main:active, 
.nav-cta:active, .btn-nav-contact:active, .btn-simulate:active, .btn-run-sql:active {
  transform: translateY(0) scale(0.97) !important;
}

.btn-ghost {
  transition: all 0.2s ease !important;
}

.btn-ghost:hover {
  border-color: var(--green-brand) !important;
  box-shadow: 0 0 16px rgba(92, 189, 181, 0.25);
  transform: translateY(-2px);
}

/* Enlaces con flecha magnética */
.service-link, a[class*="-link"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.service-link .arrow-icon, a[class*="-link"] .arrow-icon {
  display: inline-block;
  transition: transform 0.25s ease;
}

.service-card:hover .service-link, .card:hover a[class*="-link"] {
  color: #72e2d8 !important;
}

.service-card:hover .service-link .arrow-icon, .card:hover a[class*="-link"] .arrow-icon {
  transform: translateX(6px);
}

/* ==============================================================================
   7. MENÚ MÓVIL EN ESQUINA SUPERIOR DERECHA (ESTILO FIGMA / LINEAR)
   ============================================================================== */
.nav-toggle {
  display: none;
  background: rgba(8, 26, 48, 0.7);
  border: 1px solid rgba(92, 189, 181, 0.4);
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: all 0.25s var(--ease-spring);
  z-index: 1001;
  position: relative;
}

.nav-toggle:hover, .nav-toggle:focus-visible {
  background: rgba(92, 189, 181, 0.15);
  border-color: #5cbdb5;
  box-shadow: 0 0 12px rgba(92, 189, 181, 0.35);
  outline: none;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #5cbdb5;
  border-radius: 2px;
  transition: transform 0.25s var(--ease-spring), opacity 0.2s ease, background-color 0.2s ease;
}

/* Morph de 3 barras a X cuando el menú está abierto */
.nav-toggle.is-active {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background-color: #38bdf8;
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background-color: #38bdf8;
}

@media (max-width: 980px) {
  .nav-toggle {
    display: inline-flex !important;
  }

  .nav-container, .header-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
  }

  .main-nav, .nav {
    display: none !important;
  }

  .main-nav.is-active, .nav.is-active {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: rgba(3, 9, 20, 0.98) !important;
    border-bottom: 2px solid rgba(92, 189, 181, 0.3) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 1.25rem 1.5rem !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85) !important;
    z-index: 9999 !important;
    animation: mobileDrawerSlide 0.25s var(--ease-spring) forwards !important;
  }

  @keyframes mobileDrawerSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .main-nav.is-active ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .main-nav.is-active ul li {
    width: 100% !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 0.5rem !important;
  }

  .main-nav.is-active ul li:last-child {
    border-bottom: none !important;
    padding-top: 0.5rem !important;
  }

  .main-nav.is-active a, .nav.is-active a {
    display: block !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    padding: 6px 0 !important;
    text-decoration: none !important;
  }

  .main-nav.is-active a:hover, 
  .main-nav.is-active a.active,
  .nav.is-active a:hover,
  .nav.is-active a[aria-current="page"] {
    color: #5cbdb5 !important;
  }

  .main-nav.is-active .btn-nav-contact, .nav.is-active .nav-cta {
    display: block !important;
    text-align: center !important;
    background: #5cbdb5 !important;
    color: #030914 !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    margin-top: 0.5rem !important;
  }
}

/* ==============================================================================
   8. SCROLL REVEAL Y ACCESIBILIDAD
   ============================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .pillar-card, .benefit-card, .service-card, .cluster-card, .goal-chip,
  .use-case, .content-card, .articles-list li, .telemetry-tilt-card,
  section > article, .card {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s var(--ease-spring), 
                transform 0.65s var(--ease-spring), 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
  }

  .pillar-card.in-view, .benefit-card.in-view, .service-card.in-view,
  .cluster-card.in-view, .goal-chip.in-view, .use-case.in-view,
  .content-card.in-view, .articles-list li.in-view, .telemetry-tilt-card.in-view,
  section > article.in-view, .card.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  .whatsapp-btn, .wa-floating-btn {
    animation: waPulse 3s ease-in-out infinite;
  }
  @keyframes waPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(37, 211, 102, 0.45); }
    50% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 0 9px rgba(37, 211, 102, 0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .service-card, .pillar-card, .card, section > article {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==============================================================================
   9. ACCESIBILIDAD UNIVERSAL (WCAG 2.1 AA / AAA) Y ENLACE DE SALTO
   ============================================================================== */
.skip-link {
  position: absolute;
  top: -120px;
  left: 1.5rem;
  background: #5cbdb5;
  color: #030914 !important;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.65rem 1.25rem;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  z-index: 1000000;
  text-decoration: none;
  transition: top 0.25s var(--ease-spring);
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid #5cbdb5 !important;
  outline-offset: 3px !important;
}

/* ==============================================================================
   10. TARJETAS DE CONVERSIÓN, AUTORIDAD Y TRANSACCIONALIDAD (CRO B2B MÉXICO)
   ============================================================================== */
.ab-conversion-card {
  background: linear-gradient(135deg, rgba(7, 19, 34, 0.95), rgba(4, 13, 26, 0.98));
  border: 1px solid rgba(92, 189, 181, 0.4);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 30px rgba(92, 189, 181, 0.1);
  margin: 3.5rem 0 2rem;
}

.ab-conversion-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #38bdf8, #5cbdb5, transparent);
}

.trust-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5rem;
  align-items: center;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 39, 66, 0.4);
  border: 1px solid rgba(92, 189, 181, 0.3);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.76rem;
  color: #5eead4;
}

.trust-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}