/* =========================
   🔶 SECCIÓN INICIAL
   ========================= */
#firstview{ width: 100vw;color: var(--color-bg);position: relative;background-color: rgb(64, 62, 62);}

/* =========================
   🔷 ESTRUCTURA PRINCIPAL
   ========================= */
#hero { position: relative; height: auto; }
#banner { width: 100vw; height: 100vh; background: blue;display: flex; }

#hero video {filter: contrast(1.3);  }
#bg-video,
#bg-video-mobile {

  top: 0; left: 0;
  object-fit: cover;
  z-index: 0;
  width: 100%;
}

/* Desktop: solo se ve el horizontal */
#bg-video-mobile { display: none;}

@media (max-width: 768px) {
  #bg-video { display: none; }
  #bg-video-mobile { display: block;height: 100%; }
}


/* =========================
   ⚙️ LOGO Y ANIMACIONES
   ========================= */
#logo {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 10vw; font-weight: 900; font-style: italic; z-index: 5;
  display: none; opacity: 0; transition: opacity .4s ease;
}
#logo.on { display: flex; opacity: 1; }             /* visible cuando hero está en viewport */
#logo.fade-out { opacity: 0; }                      /* animación de salida */
#logo:hover #dot { transform: translateY(-.2em); }  /* efecto hover */
#logo #dot { color: var(--brand-primary); }
#logo div { animation: reveal 2.5s ease-out forwards; opacity: 0; filter: blur(10px); }

/* =========================
   💫 ANIMACIONES CLAVE
   ========================= */
@keyframes reveal {
  0% { opacity: 0; filter: blur(10px); transform: scale(1.1); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* =========================
   🔸 DETALLES VISUALES
   ========================= */
#dot { display: inline-block; transform-origin: bottom center; transition: transform .2s cubic-bezier(.25,1,.5,1); }

/* =========================
   🧩 OTROS
   ========================= */
#sticky-wrapper { position: sticky; top: 0; height: 0; } /* placeholder, sin espacio */