/* ==========================================================================
   components/volver-arriba.css — Botón flotante "Volver arriba"
   Sin marcador: lo crea assets/js/volver-arriba.js (sin JS no existe).
   Aparece tras una pantalla de scroll; es un enlace a #contenido, así que
   también mueve el punto de partida del teclado al inicio del contenido.
   Se apila encima del botón de WhatsApp (components/whatsapp.css), centrado
   sobre él y separado por --space-3.
   ========================================================================== */
.volver-arriba {
  position: fixed;
  right: calc(var(--pad-x) + var(--safe-right) + (var(--tam-whatsapp) - var(--tactil)) / 2);
  bottom: calc(var(--space-5) + var(--tam-whatsapp) + var(--space-3) + var(--safe-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: var(--tactil); height: var(--tactil);
  border: var(--hairline) solid var(--borde-inverso);
  border-radius: var(--radio-circulo);
  background: var(--c-abismo);
  color: var(--c-blanco);
  box-shadow: var(--sombra-flotante);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-3));
  transition:
    opacity var(--dur-media) var(--ease-salida),
    transform var(--dur-media) var(--ease-salida),
    visibility var(--dur-casi-cero) linear var(--dur-media);
}
.volver-arriba.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur-media) var(--ease-entrada),
    transform var(--dur-media) var(--ease-entrada);
}
.volver-arriba:hover { background: var(--c-laguna); }
.volver-arriba:active { transform: scale(var(--escala-pulsado)); }
.volver-arriba svg { width: var(--icono-sm); height: var(--icono-sm); }