/* =========
   LANDING HOLO v1 — hero holográfico UnaVista
   Glass liviano + drift + drag (touch incluido). Three.js solo fondo.
   ========= */

.holo-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1f22 0%, #102f31 45%, #1F2933 100%);
  color: #eafaf8;
}

.holo-hero .holo-eyebrow {
  letter-spacing: 2px;
  font-size: .75rem;
  color: #7df0e8;
  text-transform: uppercase;
}

#holo-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
#holo-bg canvas { display: block; }

.holo-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.holo-blob-b1 { width: 420px; height: 420px; left: -120px; top: -120px;
  background: radial-gradient(circle, rgba(20,184,177,.55), transparent 70%); }
.holo-blob-b2 { width: 360px; height: 360px; right: -100px; top: 10%;
  background: radial-gradient(circle, rgba(124,93,250,.45), transparent 70%); }
.holo-blob-b3 { width: 300px; height: 300px; left: 40%; bottom: -140px;
  background: radial-gradient(circle, rgba(6,182,212,.4), transparent 70%); }

.holo-hero-inner { position: relative; z-index: 2; }

/* — stage de paneles flotantes — */
#holo-stage {
  position: relative;
  z-index: 2;
  height: 560px;
  margin-top: 1.5rem;
  perspective: 1200px;
  touch-action: pan-y; /* la página scrollea; el drag vive en cada panel */
}

.holo-panel {
  position: absolute;
  width: 228px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(125,240,232,.45);
  box-shadow: 0 0 0 1px rgba(20,184,177,.12),
              0 8px 32px rgba(0,0,0,.35),
              0 0 24px rgba(20,184,177,.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #eafaf8;
  cursor: grab;
  touch-action: none; /* drag con 1 dedo dentro del panel, también en mobile */
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
/* posiciones iniciales (desktop) — JS las anima encima */
.holo-pos-0 { left: 4%;  top: 6%; }
.holo-pos-1 { left: 28%; top: 22%; }
.holo-pos-2 { left: 52%; top: 6%; }
.holo-pos-3 { left: 74%; top: 26%; }
.holo-pos-4 { left: 16%; top: 52%; }
.holo-pos-5 { left: 44%; top: 58%; }
.holo-pos-6 { left: 68%; top: 60%; }
.holo-pos-7 { left: 88%; top: 8%; }
.holo-pos-8 { left: 30%; top: 62%; }
.holo-pos-9 { left: 55%; top: 66%; }
.holo-pos-10 { left: 80%; top: 64%; }
.holo-pos-11 { left: 8%; top: 66%; }
/* con muchas apps el stage crece también en desktop */
#holo-stage.holo-many { min-height: 720px; }

.holo-panel:active { cursor: grabbing; }
.holo-panel.holo-active {
  border-color: rgba(125,240,232,.9);
  box-shadow: 0 0 0 1px rgba(125,240,232,.35),
              0 12px 40px rgba(0,0,0,.45),
              0 0 36px rgba(20,184,177,.35);
  z-index: 10;
}

.holo-panel h5 {
  font-size: .95rem;
  font-weight: 700;
  margin: 6px 0 2px;
  color: #fff;
}
.holo-panel .holo-app-icon { font-size: 1.3rem; color: #7df0e8; }
.holo-panel .holo-desc {
  font-size: .72rem;
  line-height: 1.3;
  color: rgba(234,250,248,.75);
  min-height: 2.6em;
  margin-bottom: 8px;
}
.holo-mini {
  font-size: .72rem;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(125,240,232,.25);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  line-height: 1.7;
  color: #c9f5f1;
}
.holo-mini .holo-ok { color: #4ade80; }
.holo-mini .holo-warn { color: #fbbf24; }
.holo-mini .holo-dim { color: rgba(201,245,241,.55); }
.holo-bar { display: inline-block; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #14B8B1, #7df0e8); vertical-align: middle; }
.holo-link {
  display: block;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  color: #062b29;
  background: #7df0e8;
  border-radius: 8px;
  padding: 6px;
  text-decoration: none;
}
.holo-link:hover { background: #fff; color: #062b29; text-decoration: none; }

/* drift CSS de respaldo (si no hay GSAP): animación sutil */
@keyframes holo-drift-a { 0%,100% { margin-top: 0; } 50% { margin-top: -8px; } }
@keyframes holo-drift-b { 0%,100% { margin-top: -4px; } 50% { margin-top: 6px; } }
.holo-no-gsap .holo-panel:nth-child(odd)  { animation: holo-drift-a 6s ease-in-out infinite; }
.holo-no-gsap .holo-panel:nth-child(even) { animation: holo-drift-b 7s ease-in-out infinite; }

/* trust bar + catálogo */
.holo-trust { position: relative; z-index: 2; }

/* mobile: stage más alto, paneles en 2 columnas absolutas compactas */
@media (max-width: 768px) {
  #holo-stage { height: 760px; }
  .holo-panel { width: 46vw; max-width: 210px; padding: 10px; }
  .holo-pos-0 { left: 2%;  top: 0; }
  .holo-pos-1 { left: 51%; top: 4%; }
  .holo-pos-2 { left: 2%;  top: 34%; }
  .holo-pos-3 { left: 51%; top: 38%; }
  .holo-pos-4 { left: 2%;  top: 67%; }
  .holo-pos-5 { left: 51%; top: 70%; }
  .holo-pos-6 { left: 2%;  top: 100%; }
  .holo-pos-7 { left: 51%; top: 104%; }
}
@media (max-width: 768px) {
  /* si hay más de 6 apps, el stage crece para no solapar el CTA */
  #holo-stage.holo-many { height: 1050px; }
}

/* movimiento reducido: todo estático */
@media (prefers-reduced-motion: reduce) {
  .holo-panel { animation: none !important; }
  #holo-bg { display: none; }
}