/* La página ligera de los teléfonos (21 oct 2026, plan aprobado por Ernesto). En un teléfono se abre primero esto: arriba,
   las dos puertas como en el 3D (la foto fija que coloca index.html) y el botón «Ver en 3D»; debajo, los bloques del paseo
   seguidos, con una foto de cada planta sacada del 3D de verdad (herramientas/movil/fotos_pasos.py). Al pulsar «Ver en 3D»
   llega el mismo 3D del ordenador, entero. La elige el script del principio de index.html (html.ligera, y #recorrido con
   sin-3d y ligera desde que existe); la monta y la desmonta js/movil/ligera.js. Sobre la versión sin 3D de recorrido.css.
   Como en el resto de la web: nada de cajas ni fondos, todo sobre el papel */

html.ligera #pantalla-carga { display: none !important; }              /* (vuelve con «Ver en 3D», que quita html.ligera) */
html.ligera #recorrido { position: relative; overflow: hidden; overflow: clip; }   /* la foto fija es más ancha que la pantalla: en el 3D la recorta su escena */
html.ligera #recorrido .recorrido__escena { display: contents; }        /* la foto fija se coloca en la pantalla de arriba */
html.ligera #recorrido #recorrido-lienzo, html.ligera #recorrido .recorrido__texto { display: none; }

/* ---------- la primera pantalla: las puertas, como en el 3D, y el botón ---------- */
html.ligera #recorrido .recorrido__cartel { display: block; position: absolute; z-index: 0; pointer-events: none; }
html.ligera #recorrido .recorrido__portal { position: relative; display: block; height: 100vh; height: 100svh; min-height: 0; pointer-events: none; }
/* cada puerta lleva a su web: el enlace, encima de su puerta de la foto (lo coloca ligera.js), sin que se vea */
html.ligera #recorrido .recorrido__puerta {
  position: absolute; z-index: 1; display: block; transform: none; clip-path: none; overflow: hidden; color: transparent; text-decoration: none;
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
html.ligera #recorrido .recorrido__puerta span[lang] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.ligera #recorrido .recorrido__puerta:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; border-radius: 3px; }

/* «Ver en 3D»: el mismo trazo de cera azul que «Entrar» (arte/movil/trazo.webp, herramientas/movil/trazo.py), con la
   palabra en blanco en la cursiva de Osuna Serif 6; da el mismo saltito al aparecer */
.ligera__ver, .ligera__pastilla {
  border: 0; border-radius: 0; padding: 0 0 3px; background: url('../arte/movil/trazo.webp') center / 100% 100% no-repeat;
  color: #fff; font: italic 400 24px/1 'Osuna Serif 7', Georgia, serif; letter-spacing: 0.005em; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ligera__ver span[lang], .ligera__pastilla span[lang] { display: inline-block; }
.ligera__ver {
  position: absolute; z-index: 1; left: 50%; bottom: calc(9vh + env(safe-area-inset-bottom, 0px)); bottom: calc(9svh + env(safe-area-inset-bottom, 0px));
  width: 236px; height: 66px; margin-left: -118px; pointer-events: auto;
  animation: ligera-gelatina .7s cubic-bezier(.3, 1.5, .5, 1) .5s both;
}
.ligera__ver:active, .ligera__pastilla:active { transform: scale(0.95); transition: transform .06s; }
.ligera__ver:focus-visible, .ligera__pastilla:focus-visible { outline: 2px dashed #2f6ae0; outline-offset: 2px; }
/* la pastilla: el mismo botón, pequeño, a mano mientras dura el paseo, cuando el de arriba ya no se ve */
.ligera__pastilla {
  position: fixed; z-index: 19; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: 150px; height: 44px; padding-bottom: 2px; font-size: 17px;
  opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .3s ease, translate .3s ease;
}
.ligera__pastilla.es-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
@keyframes ligera-gelatina { 0% { scale: 1; } 30% { scale: 1.12 0.9; } 55% { scale: 0.94 1.08; } 75% { scale: 1.04 0.97; } 100% { scale: 1; } }

/* ---------- los bloques, seguidos, y la foto de cada planta debajo del suyo ---------- */
html.ligera #recorrido .recorrido__hud { position: static; }
html.ligera #recorrido .hud { position: static; max-width: 38em; margin: 5vh var(--margen-ancho) 0; opacity: 1; transform: none; pointer-events: auto; }
html.ligera #recorrido .hud[data-hud="nombre"] { margin-top: 2vh; }
/* la foto, de lado a lado de la pantalla, sin bordes: el papel de la foto es el de la página, y lo que el teléfono corta
   en sus orillas (una escalera que sigue) se deshace en el papel */
html.ligera #recorrido .ligera__foto { margin: 3.5vh 0 0; padding: 0; }
html.ligera #recorrido .ligera__foto img {
  display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
html.ligera #recorrido .recorrido__cola { height: 8vh; }

/* ---------- la ficha de una obra: debajo de la lista, al pulsar su nombre ---------- */
html.ligera #recorrido .recorrido__ficha {
  position: static; display: block; max-width: 38em; margin: 3vh var(--margen-ancho) 0; translate: none;
  opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .3s ease, transform .3s ease;
}
html.ligera #recorrido .recorrido__ficha[hidden] { display: none; }
html.ligera #recorrido .recorrido__ficha.es-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ligera__ver { animation: none; }
  .ligera__pastilla, html.ligera #recorrido .recorrido__ficha { transition: none; }
}