// Espera a que todo el DOM cargue
document.addEventListener("DOMContentLoaded", function() {
  const glide = document.querySelector(".glide");
  const target = document.querySelector(".main-content");

  if (glide && target) {
    // Crear el botón
    const btn = document.createElement("button");
    btn.innerHTML = "↓"; //"▼"; // flecha hacia abajo ▼
    btn.setAttribute("aria-label", "Ir al contenido");
    Object.assign(btn.style, {
			fontFamily: "sans-serif",
      display: "block",
      margin: "30px auto 0",
      background: "#1f2937",
      color: "white",
      border: "none",
      borderRadius: "50%",
      width: "50px",
      height: "50px",
      fontSize: "24px",
      cursor: "pointer",
      boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
      transition: "background 0.3s",
			position: "absolute",
      bottom: "10px",
      left: "calc(50% - 25px)"
    });

    // Hover effect
    btn.addEventListener("mouseover", () => btn.style.background = "#111827");
    btn.addEventListener("mouseout",  () => btn.style.background = "#1f2937");

    // Scroll suave al hacer click
    btn.addEventListener("click", () => {
      target.scrollIntoView({ behavior: "smooth" });
    });

    // Insertar al final del .glide
    glide.appendChild(btn);
  }
});