/* =========================================================
   atras.css
   Botón flotante "Volver atrás"
   El botón .btn-flotante queda reservado para ir al Index.
   ========================================================= */

.btn-volver-atras {
  position: fixed;

  /* Alineado con el extremo derecho de la estructura de 600px */
  right: calc((100vw - 600px) / 2 + 8px);

  /* Más arriba que el botón "Subir" */
  bottom: 140px;

  z-index: 9998;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 92px;
  height: 24px;
  padding: 0 9px;

  box-sizing: border-box;

  background: rgba(11, 11, 11, 0.88);
  border: 1px solid rgba(181, 108, 255, 0.38);

  color: #B56CFF;

  font-family: inherit;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.4px;

  text-decoration: none;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  transform: translateY(8px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* ---------------------------------------------------------
   Aparición al hacer scroll
   --------------------------------------------------------- */

.btn-volver-atras.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* ---------------------------------------------------------
   Hover / foco
   --------------------------------------------------------- */

.btn-volver-atras:hover,
.btn-volver-atras:focus-visible {
  color: #D9A7FF;

  border-color: rgba(217, 167, 255, 0.82);

  box-shadow:
    0 0 8px rgba(181, 108, 255, 0.28);

  outline: none;
}


/* ---------------------------------------------------------
   Al pulsar
   --------------------------------------------------------- */

.btn-volver-atras:active {
  transform: translateY(1px);
}


/* ---------------------------------------------------------
   Pantallas menores a 600px
   Evita que el cálculo del centrado produzca
   posiciones negativas.
   --------------------------------------------------------- */

@media (max-width: 600px) {

  .btn-volver-atras {
    right: 54px;
    bottom: 110px;

    min-width: 88px;
    height: 23px;

    font-size: 9px;
  }

}


/* ---------------------------------------------------------
   Pantallas muy pequeñas
   --------------------------------------------------------- */

@media (max-width: 380px) {

  .btn-volver-atras {
    right: 50px;
    bottom: 105px;

    min-width: 84px;
    padding: 0 7px;

    font-size: 9px;
    letter-spacing: 0.2px;
  }

}