/* Proto 8910 plano9: S desde hero; idle flota; tapado bajo cards/texto */
#ghost-lr {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: none !important;
}
#ghost-lr canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: min(28vw, 320px);
  height: auto;
  transform: translate3d(-9999px, 0, 0);
  mix-blend-mode: normal;
  opacity: 0;
  will-change: transform, opacity;
}

.header, .nav, .nav__drawer, main, .footer, footer.footer {
  position: relative;
  z-index: 2;
  background: transparent;
}

.hero__content,
.card, .plan, .post-card, .service-card,
.contact-channel, .faq details, .faq__item,
.section-header, .proof-bar, .hero__ctas,
.pricing-grid > *,
.btn, a.btn,
.cases-scroll {
  position: relative;
  z-index: 3;
  isolation: isolate;
}
.card, .plan, .post-card, .service-card {
  background-color: var(--color-surface, #0a0d12) !important;
}

.section-header {
  background: radial-gradient(ellipse 85% 90% at 25% 40%,
    rgba(6, 8, 12, 0.88) 0%,
    rgba(6, 8, 12, 0.45) 55%,
    transparent 78%);
}
.section-title, .section-lead, .section-label,
.hero__title, .hero__lead, .hero__sublead {
  position: relative;
  z-index: 3;
}

#hero.hero--fantasma { background: transparent !important; }
#hero.hero--fantasma .hero__layout { z-index: auto; }
#hero.hero--fantasma .hero__stage { z-index: 0; pointer-events: none; }
#hero.hero--fantasma .hero__content {
  position: relative;
  z-index: 3;
  background: radial-gradient(ellipse 90% 80% at 20% 50%,
    rgba(6, 8, 12, 0.92) 0%,
    rgba(6, 8, 12, 0.5) 55%,
    transparent 78%);
}

/* En el prototipo había un solo fantasma —el del scroll, ya desde el hero— y
   por eso se escondía la mascota. Aquí conviven los dos: el del hero se queda,
   y el del scroll no entra hasta #servicios (ANCLA en el .js). */

#proceso .section-title,
#proceso .process__item,
#proceso .proceso-step,
#proceso li,
#proceso .process__list,
#proceso .proceso-list,
#proceso ol, #proceso ul {
  position: relative;
  z-index: 3;
}

#ghost-lr-hud {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 50;
  font: 12px/1.2 system-ui, sans-serif;
  color: #fff;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  #ghost-lr canvas { width: min(42vw, 200px); }
}
/* Vista móvil: sin el fantasma que recorre el fondo. El del hero se queda. */
@media (max-width: 768px), ((hover: none) and (pointer: coarse) and (max-width: 1024px)) {
  #ghost-lr {
    display: none !important;
    visibility: hidden !important;
  }
}