/* ============================================
   HEADER: Comportamiento con scroll
   ============================================ */

/* Estado normal del header (fijo en la parte superior) */
#header-como-llegar {
  position: fixed;        /* Fijo en la ventana */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;          /* Por encima de otros elementos */
  
  /* Transiciones suaves para fondo, transformación y opacidad */
  transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  
  /* Color de fondo inicial (transparente) */
  background-color: transparent;
}

/* Estado cuando el usuario ha hecho scroll (más de 50px) */
#header-como-llegar.scrolled {
  background-color: rgba(0, 0, 0, 0.35) !important; /* Fondo semitransparente oscuro */
}

/* Estado oculto: se desliza hacia arriba fuera de la pantalla */
#header-como-llegar.hidden {
  transform: translateY(-100%);
  opacity: 0;
}