/* Ronda 29B · barrita B3TTER en 3D junto al nombre de la portada (orden de Uriel 28-sep 09:50). Sólo reglas de hero3d.js.
   El lienzo va en posición absoluta respecto a .hero .dentro: no ocupa sitio en la rejilla, así el h1, la foto y el lema
   no se mueven ni un píxel. Oculto (visibility) hasta que hero3d.js lo coloca y pinta el primer fotograma: CLS 0. */
.hero .dentro { position: relative; }
.hero3d { position: absolute; top: 0; left: 0; width: 1px; height: 1px; display: block; visibility: hidden; opacity: 0;
  cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  outline: none; border-radius: 14px; z-index: 1; }
.hero3d.h3-listo { visibility: visible; opacity: 1; transition: opacity .9s cubic-bezier(.2, .7, .2, 1); }
.hero3d.h3-fuera, .hero3d.h3-fuera:active { cursor: default; }
.hero3d.h3-agarra, .hero3d.h3-agarra:active { cursor: grabbing; }
.hero3d:focus-visible { box-shadow: 0 0 0 2px rgba(19, 10, 7, .35); }
.hero3d.h3-sin { display: none; }
@media (prefers-reduced-motion: reduce) { .hero3d.h3-listo { transition: none; } }