/* ═══════════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════════ */
:root {
  --primary:       #556B2F;
  --primary-solid: #4e612a;
  --primary-light: #6f7f45;
  --primary-dim:   #3f4f22;
  --primary-glow:  rgba(85,107,47,.25);
  --primary-ghost: rgba(85,107,47,.08);
  --primary-border:rgba(85,107,47,.3);

  --secondary:     #7A8450;
  --accent-warm:   #aab48a;

  --dark:          #060b09;
  --dark2:         #080f0c;
  --white:         #f5faf7;
  --gray:          #6a8078;
  --gray-light:    #a8c0b4;

  --ff-display:    'Bebas Neue', sans-serif;
  --ff-body:       'Sora', sans-serif;
  --ff-text:       'DM Sans', sans-serif;

  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-bounce:   cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth:   cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body { 
  background: var(--dark); 
  color: var(--white); 
  font-family: var(--ff-text); 
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* ═══════════════════════════════════════════
   CAPA DE FONDO (ESTABLE)
═══════════════════════════════════════════ */
.background-layer,
.reflectores-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ═══════════════════════════════════════════
   REFLECTORES (EFECTO LIMPIO)
═══════════════════════════════════════════ */
.reflector {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(122,132,80,0.2),
    rgba(85,107,47,0.3),
    rgba(122,132,80,0.2),
    transparent
  );
  filter: blur(40px);
  opacity: 0;
  animation: sweepReflector 12s ease-in-out infinite;
  transform-origin: center;
}

.reflector-1 {
  top: 20%;
  height: 15%;
  animation-duration: 14s;
}

.reflector-2 {
  top: 45%;
  height: 12%;
  animation-duration: 18s;
  animation-delay: -3s;
}

.reflector-3 {
  top: 70%;
  height: 20%;
  animation-duration: 10s;
  animation-delay: -6s;
}

@keyframes sweepReflector {
  0% {
    transform: translateX(-100%) skewX(-15deg);
    opacity: 0;
  }
  10% { opacity: 0.4; }
  40% { opacity: 0.6; }
  60% { opacity: 0.5; }
  90% { opacity: 0.2; }
  100% {
    transform: translateX(100%) skewX(15deg);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════
   REFLECTORES RÁPIDOS (VARIANTE)
═══════════════════════════════════════════ */
.reflector-fast {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(122,132,80,0.25),
    rgba(85,107,47,0.35),
    rgba(122,132,80,0.25),
    transparent
  );
  filter: blur(20px);
  animation-duration: 6s;
  height: 8%;
}

/* ═══════════════════════════════════════════
   LUCES EN MOVIMIENTO (SUAVES)
═══════════════════════════════════════════ */
.moving-light {
  position: absolute;
  width: 60px;
  height: 60px;
  background: radial-gradient(
    circle,
    rgba(85,107,47,0.35),
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(25px);
  animation: moveLight 20s linear infinite;
}

@keyframes moveLight {
  0% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translate(80vw, 20vh) scale(1.2);
    opacity: 0.5;
  }
  50% {
    transform: translate(40vw, 70vh) scale(0.8);
    opacity: 0.4;
  }
  75% {
    transform: translate(20vw, 40vh) scale(1.1);
    opacity: 0.45;
  }
  100% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0.3;
  }
}

/* ═══════════════════════════════════════════
   CAPAS (FIX HEADER Y CONTENIDO)
═══════════════════════════════════════════ */
header {
  position: relative;
  z-index: 10;
}

main,
section,
footer {
  position: relative;
  z-index: 1;
}

.menu-flotante {
  position: relative;
  z-index: 20;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .reflector {
    filter: blur(20px);
  }

  .reflector-1,
  .reflector-2,
  .reflector-3 {
    height: 8%;
  }
}