/* Estilos para el botón "Volver arriba" */
#scrollToTopBtn {
  display: none; /* Oculto por defecto */
  position: fixed; /* Posición fija en la pantalla */
  bottom: 100px; /* Distancia desde abajo */
  right: 30px; /* Distancia desde la derecha */
  z-index: 99; /* Asegura que esté sobre otros elementos */
  border: none; /* Sin borde */
  outline: none; /* Sin outline al hacer foco */
  background-color: green; /* Color de fondo (azul ejemplo) */
  color: white; /* Color del texto */
  cursor: pointer; /* Cursor de mano al pasar por encima */
  padding: 12px 15px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  font-size: 16px; /* Tamaño de fuente */
  opacity: 0; /* Empezar transparente para la transición */
  visibility: hidden; /* Empezar oculto */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, background-color 0.2s; /* Transición suave para aparecer/desaparecer y hover */
}

/* Estilo para cuando el botón debe mostrarse */
#scrollToTopBtn.show {
  display: block; /* Necesario para que la visibilidad funcione */
  opacity: 1; /* Hacerlo visible */
  visibility: visible; /* Hacerlo visible */
}

/* Estilo al pasar el cursor por encima (hover) */
#scrollToTopBtn:hover {
  background-color: var(--bs-dark); /* Color de fondo más oscuro al pasar el cursor */
}

/* Opcional: Añadir una flecha usando pseudo-elementos si lo deseas
   (requiere ajustar el padding y quizás quitar el texto "Inicio" del HTML) */
/*
#scrollToTopBtn::before {
  content: '\2191';  Unicode para flecha hacia arriba
  margin-right: 5px; Ajusta según necesites
  font-weight: bold;
}
*/