/* ============================================================
   NAWI · Lingotes de oro del hero — adorno arrastrable.
   Reglas duras (aprendidas a golpes):
   - El CONTENEDOR nunca captura clics (pointer-events:none). Solo el lingote
     los captura. Así jamás tapa un botón del hero ni "bloquea la página".
   - Sin imágenes ni librerías: SVG inline + gradientes. La CSP del sitio
     solo permite 'self', así que nada de CDNs.
   - Respeta prefers-reduced-motion: sin flotar, pero se siguen arrastrando.
   ============================================================ */

.gold-bars {
  position: absolute;
  inset: 0;
  z-index: 2;              /* por encima del texto para poder agarrarlos… */
  pointer-events: none;    /* …pero el contenedor es "transparente" al ratón */
  overflow: hidden;
}

.gb-bar {
  position: absolute;
  width: var(--gb-size, 132px);
  pointer-events: auto;    /* SOLO el lingote recibe el clic */
  cursor: grab;
  opacity: .78;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55))
          drop-shadow(0 0 34px var(--gold-glow));
  transition: opacity .35s ease, filter .35s ease;
  will-change: transform;
  touch-action: none;      /* el arrastre no hace scroll en móvil */
  user-select: none;
  -webkit-user-select: none;
}

.gb-bar svg { display: block; width: 100%; height: auto; }

.gb-bar:hover { opacity: 1; filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)) drop-shadow(0 0 46px var(--gold-glow-strong)); }
.gb-bar.is-drag { cursor: grabbing; opacity: 1; transition: none; }

/* Flotación lenta en reposo. Se apaga mientras se arrastra. */
@keyframes gbFloat {
  0%, 100% { transform: translate3d(var(--gb-x, 0px), var(--gb-y, 0px), 0) rotate(var(--gb-rot, 0deg)); }
  50%      { transform: translate3d(var(--gb-x, 0px), calc(var(--gb-y, 0px) - 12px), 0) rotate(calc(var(--gb-rot, 0deg) + 1.2deg)); }
}
.gb-bar:not(.is-drag) { animation: gbFloat var(--gb-dur, 9s) ease-in-out infinite; animation-delay: var(--gb-delay, 0s); }
.gb-bar.is-drag { transform: translate3d(var(--gb-x, 0px), var(--gb-y, 0px), 0) rotate(var(--gb-rot, 0deg)); }

/* Colocación: fuera de la columna central de texto. */
.gb-1 { top: 20%; left: 5%;  --gb-size: 148px; --gb-rot: -7deg;  --gb-dur: 9s;  --gb-delay: 0s; }
.gb-2 { top: 30%; right: 6%; --gb-size: 116px; --gb-rot: 9deg;   --gb-dur: 11s; --gb-delay: -3s; }
.gb-3 { bottom: 14%; left: 12%; --gb-size: 96px; --gb-rot: 4deg; --gb-dur: 13s; --gb-delay: -6s; }

@media (max-width: 1100px) {
  .gb-1 { --gb-size: 112px; left: 2%; }
  .gb-2 { --gb-size: 92px;  right: 2%; }
  .gb-3 { display: none; }
}
@media (max-width: 640px) {
  .gb-1 { --gb-size: 84px; top: 12%; left: 2%; }
  .gb-2 { --gb-size: 72px; top: 20%; right: 2%; }
  .gb-bar { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .gb-bar, .gb-bar:not(.is-drag) { animation: none; transform: translate3d(var(--gb-x, 0px), var(--gb-y, 0px), 0) rotate(var(--gb-rot, 0deg)); }
}