/* ═══════════════════════════════════════════════
   tech-globe.css — Globo tech interactivo (lead-globe.js)
   Kinik Labs · test-lead.html + servicios.html + nosotros.html
   Extraído de test-lead.css (RF-031..043, RNF-018, RNF-020)
   Sección adaptativa al tema claro/oscuro (RF-042) vía tokens --tg-*
   ═══════════════════════════════════════════════ */

/* Paleta de la sección del globo por tema (espejo de tokens.css) */
:root {
  --tg-bg: radial-gradient(
      1100px 520px at 50% -8%,
      rgba(9, 133, 199, 0.14),
      transparent 62%
    ),
    linear-gradient(180deg, var(--bg-page) 0%, var(--bg-surface) 100%);
  --tg-dot: rgba(23, 27, 32, 0.5);
  --tg-dot-soft: rgba(23, 27, 32, 0.3);
  --tg-node-bg: rgba(255, 255, 255, 0.7);
  --tg-node-border: rgba(0, 0, 0, 0.12);
  --tg-node-shadow: 0 4px 16px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --tg-hover-border: rgba(9, 133, 199, 0.9);
  --tg-hover-shadow: 0 0 0 2px rgba(9, 133, 199, 0.28),
    0 0 30px rgba(9, 199, 78, 0.45), 0 0 60px rgba(9, 133, 199, 0.35),
    0 8px 32px rgba(15, 23, 42, 0.2);
  --tg-pill-bg: rgba(255, 255, 255, 0.7);
  --tg-pill-border: rgba(0, 0, 0, 0.12);
  --tg-pill-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  --tg-nextjs-filter: none;
}

[data-theme="dark"] {
  --tg-dot: rgba(255, 255, 255, 0.5);
  --tg-dot-soft: rgba(255, 255, 255, 0.32);
  --tg-node-bg: rgba(255, 255, 255, 0.055);
  --tg-node-border: rgba(255, 255, 255, 0.14);
  --tg-node-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --tg-hover-border: rgba(255, 255, 255, 0.65);
  --tg-hover-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25),
    0 0 30px rgba(9, 199, 78, 0.75), 0 0 60px rgba(9, 133, 199, 0.6),
    0 8px 32px rgba(0, 0, 0, 0.7);
  --tg-pill-bg: rgba(255, 255, 255, 0.06);
  --tg-pill-border: rgba(255, 255, 255, 0.16);
  --tg-pill-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  --tg-nextjs-filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tg-dot: rgba(255, 255, 255, 0.5);
    --tg-dot-soft: rgba(255, 255, 255, 0.32);
    --tg-node-bg: rgba(255, 255, 255, 0.055);
    --tg-node-border: rgba(255, 255, 255, 0.14);
    --tg-node-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --tg-hover-border: rgba(255, 255, 255, 0.65);
    --tg-hover-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25),
      0 0 30px rgba(9, 199, 78, 0.75), 0 0 60px rgba(9, 133, 199, 0.6),
      0 8px 32px rgba(0, 0, 0, 0.7);
    --tg-pill-bg: rgba(255, 255, 255, 0.06);
    --tg-pill-border: rgba(255, 255, 255, 0.16);
    --tg-pill-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    --tg-nextjs-filter: invert(1);
  }
}

.lead-globe-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-20) var(--space-6) var(--space-24);
  overflow: hidden;
  background: var(--tg-bg);
  color: var(--text-primary);
}

/* Canvas WebGL: cubre la sección completa (RF-044), detrás de todo el
   contenido 3D (partículas + esfera) que ahora reacciona en cualquier punto */
.lead-globe-section__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Micro-puntos decorativos: distribución irregular, opacidad baja (RF-042) */
.lead-globe-section__dots {
  position: absolute;
  inset: -6%;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 26%, var(--tg-dot), transparent 100%),
    radial-gradient(1.1px 1.1px at 63% 18%, var(--tg-dot-soft), transparent 100%),
    radial-gradient(1.6px 1.6px at 82% 44%, var(--tg-dot-soft), transparent 100%),
    radial-gradient(1px 1px at 36% 58%, var(--tg-dot), transparent 100%),
    radial-gradient(1.3px 1.3px at 71% 76%, var(--tg-dot-soft), transparent 100%),
    radial-gradient(1px 1px at 24% 84%, var(--tg-dot), transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 42%, var(--tg-dot-soft), transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 12%, var(--tg-dot), transparent 100%),
    radial-gradient(1px 1px at 8% 62%, var(--tg-dot-soft), transparent 100%),
    radial-gradient(1.4px 1.4px at 58% 92%, var(--tg-dot-soft), transparent 100%);
  background-size:
    420px 420px,
    560px 560px,
    340px 340px,
    640px 640px,
    480px 480px,
    520px 520px,
    300px 300px,
    380px 380px,
    600px 600px,
    460px 460px;
  background-repeat: repeat;
  opacity: 0.12;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.lead-globe-section__header {
  position: relative;
  z-index: 4;
  text-align: center;
}

.lead-globe-section__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand-green);
}

.lead-globe-section__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-top: var(--space-4);
}

.lead-globe-section__subtitle {
  margin-top: var(--space-4);
  margin-inline: auto;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 56ch;
}

/* ── Escenario 3D: esfera ≈ 78% de la caja (RF-036 mod.); el contenedor se
   acota por altura para que la sección complete ≈ 100vh (RF-041).
   El canvas y los nodos viven a nivel de #lead-globe-section (RF-044);
   .tech-globe marca solo la caja "escenario" que centra la esfera. ── */
.tech-globe {
  position: relative;
  width: min(56vh, 620px);
  aspect-ratio: 1 / 1;
  margin-block: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.tech-globe.is-dragging {
  cursor: grabbing;
}

/* Capa de nodos: cubre la sección completa (coordenadas de proyección) */
.tech-globe__nodes {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

/* Nodo: chip glass con el logo SVG oficial (RF-039) */
.tech-globe__node {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26%;
  background: var(--tg-node-bg);
  border: 1px solid var(--tg-node-border);
  box-shadow: var(--tg-node-shadow);
  transform: translate(-50%, -50%);
  transition:
    transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 250ms ease,
    filter 250ms ease;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, opacity;
}

.tech-globe__node img {
  width: 55%;
  height: 55%;
  object-fit: contain;
  opacity: 0.96;
  pointer-events: none;
}

/* Next.js (devicons): marca negra (badInDark) → blanco sobre la sección
   oscura, igual que la presentación dark oficial de Vercel */
.tech-globe__node[data-name="Next.js"] img {
  filter: var(--tg-nextjs-filter);
}

/* Hover sobre un nodo: crece + glow de marca mejorado */
.tech-globe__node.is-hovered {
  transform: translate(-50%, -50%) scale(1.35) !important;
  border-color: var(--tg-hover-border) !important;
  background: linear-gradient(
    135deg,
    rgba(9, 199, 78, 0.35),
    rgba(9, 133, 199, 0.35)
  ) !important;
  box-shadow: var(--tg-hover-shadow) !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 9999 !important;
}

.tech-globe__node.is-hovered img {
  opacity: 1 !important;
  filter: brightness(1.3) !important;
}

.tech-globe__tooltip {
  position: absolute;
  z-index: 1000;
  transform: translate(-50%, calc(-100% - 14px));
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 15, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f2f5f8;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}

.tech-globe__fallback {
  display: none;
}

/* Fallback visible si no se pudo cargar three.js */
.lead-globe-section.is-fallback .lead-globe-section__canvas,
.lead-globe-section.is-fallback .tech-globe__nodes {
  display: none;
}

.lead-globe-section.is-fallback .lead-globe-section__dots {
  opacity: 0.12;
}

.tech-globe.is-fallback .tech-globe__fallback {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
  padding: var(--space-8);
}

.tech-globe__pill {
  padding: var(--space-1) var(--space-3);
  background: var(--tg-pill-bg);
  border: 1px solid var(--tg-pill-border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-primary);
  box-shadow: var(--tg-pill-shadow);
}

/* ─────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .tech-globe {
    width: min(72vw, 420px);
  }
}

/* ─────────────────────────────────────────────
   Reduced motion (globo v2): sin parallax de puntos
   ni transiciones de nodos; el hover conserva el glow
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lead-globe-section__dots,
  .tech-globe__node {
    transition: opacity 150ms ease, filter 150ms ease !important;
  }
}