/* estilos compartidos: transiciones verticales y botón BACK */
body { transition: opacity .5s ease, transform .55s cubic-bezier(.45, 0, .2, 1); }
html.in-down body:not(.is-ready) { opacity: 0; transform: translateY(9vh); }
html.in-up   body:not(.is-ready) { opacity: 0; transform: translateY(-9vh); }
html body.go-down { opacity: 0; transform: translateY(-9vh); }
html body.go-up   { opacity: 0; transform: translateY(9vh); }
@media (prefers-reduced-motion: reduce) { html body.go-down, html body.go-up { transform: none; } html.in-down body, html.in-up body { transform: none !important; } }
/* BACK: texto pequeño, pero con una zona de pulsación amplia alrededor */
#back { position: fixed; top: 0; left: 1.6rem; z-index: 999; padding: 1.1rem 1.4rem 1.3rem; font: 400 0.62rem/1 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; opacity: .55; color: #0a0a0a; user-select: none; text-decoration: none; transition: opacity .2s ease; }
#back:hover { opacity: 1; font-weight: 700; }
@media (max-width: 640px) { #back { left: .2rem; padding: .9rem 1.1rem 1.1rem; } }