/* ════════════════════════════════════════════════════════════════
 * TLG · BACKGROUND ENGINE
 * Fondos animados premium SIN dependencia de vídeo externo.
 * Funcionan SIEMPRE. Cuando se suba un .mp4 propio a /videos/, el
 * <video> en HTML lo cubrirá automáticamente.
 * ════════════════════════════════════════════════════════════════ */

/* ── 1. Mesh gradient animado (base de cualquier escena) ── */
.bg-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(at 20% 30%, rgba(201,169,110,.18) 0px, transparent 50%),
    radial-gradient(at 80% 20%, rgba(26,46,66,.45) 0px, transparent 50%),
    radial-gradient(at 60% 80%, rgba(123,207,207,.10) 0px, transparent 50%),
    radial-gradient(at 30% 90%, rgba(201,169,110,.08) 0px, transparent 50%),
    linear-gradient(135deg, #0E0D0B 0%, #1A2E42 100%);
  animation: meshShift 18s ease-in-out infinite alternate;
}
@keyframes meshShift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%, 0 0; }
  100% { background-position: 30% 20%, 70% 10%, 60% 80%, 10% 90%, 0 0; }
}

/* ── 2. Partículas flotantes (efecto células / luciérnagas) ── */
.bg-particles {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none;
}
.bg-particles::before, .bg-particles::after {
  content: ''; position: absolute; inset: -50%;
  background-image:
    radial-gradient(circle, rgba(201,169,110,.5) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(123,207,207,.3) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(245,241,235,.2) 1px, transparent 1.5px);
  background-size: 180px 180px, 240px 240px, 320px 320px;
  background-position: 0 0, 60px 60px, 120px 120px;
  animation: particleFloat 40s linear infinite;
}
.bg-particles::after {
  animation-duration: 60s;
  animation-direction: reverse;
  opacity: .6;
}
@keyframes particleFloat {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-180px, -180px, 0); }
}

/* ── 3. Scan line vertical sutil ── */
.bg-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 48%,
    rgba(201,169,110,.08) 50%,
    transparent 52%,
    transparent 100%);
  background-size: 100% 8px;
  animation: scanMove 6s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes scanMove {
  from { background-position: 0 -100vh; }
  to   { background-position: 0 100vh; }
}

/* ── 4. Grain / film noise (SVG) ── */
.bg-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .79 0 0 0 0 .66 0 0 0 0 .43 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .12; mix-blend-mode: overlay;
  animation: grainShift .3s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0,0); }
  25% { transform: translate(-2%,1%); }
  50% { transform: translate(1%,-2%); }
  75% { transform: translate(-1%,2%); }
}

/* ── 5. HUD bracket esquinas (corner crops cinematográficos) ── */
.bg-corners {
  position: absolute; inset: 32px; pointer-events: none;
}
.bg-corners::before, .bg-corners::after,
.bg-corners > span:nth-child(1)::before,
.bg-corners > span:nth-child(1)::after {
  content: ''; position: absolute; width: 24px; height: 24px;
  border: 1px solid rgba(201,169,110,.6);
}
.bg-corners::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bg-corners::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }

/* ── 6. Marquee / Ticker horizontal HUD ── */
.tlg-marquee {
  position: relative; background: var(--tinta);
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  padding: 18px 0; overflow: hidden;
  font-family: var(--mono); font-size: 11px; letter-spacing: 3px;
  color: var(--oro); text-transform: uppercase;
}
.tlg-marquee-track {
  display: flex; gap: 60px; white-space: nowrap;
  animation: marqueeSlide 40s linear infinite;
  will-change: transform;
}
.tlg-marquee-track > span { display: inline-flex; gap: 60px; }
.tlg-marquee-track > span::after {
  content: '◈'; color: rgba(201,169,110,.4); margin-left: 60px;
}
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 7. Vídeo container con fallback ── */
.tlg-video-bg {
  position: absolute; inset: 0; overflow: hidden; z-index: -1;
}
.tlg-video-bg video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.5s ease;
}
.tlg-video-bg video.loaded { opacity: 1; }

/* ── 8. Sticky CTA bar (siempre visible al hacer scroll) ── */
.tlg-sticky-cta {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 90; transition: transform .5s cubic-bezier(.5,1.5,.3,1);
  background: var(--tinta); border: 1px solid var(--oro);
  border-radius: 999px; padding: 12px 12px 12px 24px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px;
  color: var(--arena); text-transform: uppercase;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  pointer-events: none;
}
.tlg-sticky-cta.visible { transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tlg-sticky-cta .price { color: var(--oro); }
.tlg-sticky-cta .cta-btn {
  background: var(--oro); color: var(--tinta);
  padding: 10px 20px; border-radius: 999px; text-decoration: none;
  font-weight: 500; transition: background .2s ease;
}
.tlg-sticky-cta .cta-btn:hover { background: #d6b77a; }
@media (max-width: 720px) {
  .tlg-sticky-cta { font-size: 11px; padding: 10px 10px 10px 18px; }
  .tlg-sticky-cta .cta-btn { padding: 8px 14px; }
}

/* ── 9. Section que muta con scroll (paralaje 3D) ── */
.tlg-stage {
  position: relative; min-height: 92vh;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 56px; overflow: hidden;
  isolation: isolate;
}
.tlg-stage > .stage-content { position: relative; z-index: 2; max-width: 1100px; width: 100%; }

/* ── 10. Split hero (vídeo izq / contenido der) ── */
.tlg-split {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  min-height: 100vh; position: relative;
}
.tlg-split-media {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0E0D0B 0%, #1A2E42 100%);
}
.tlg-split-content {
  padding: 120px 56px 80px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--tinta); position: relative;
}
@media (max-width: 900px) {
  .tlg-split { grid-template-columns: 1fr; min-height: auto; }
  .tlg-split-media { min-height: 50vh; }
  .tlg-split-content { padding: 60px 24px; }
}