/* v1.16.1-pedasi.9 · Bloque 2 de cierre: Tarjeta del recorrido con texto grande y pantallas chicas.
   Todo lo de este archivo es opcional por caso (clases de body que pone el motor según el manifiesto) o corrige un defecto medido. */

/* Todo cuelga de body.recorrido-movil (manifiesto `recorrido_movil: true`; la pone app.js) y de las clases que guia.js pone
   con esa clave (#guia.hay-mas, #guia.fila-suelta, #guia.acciones-fijas, #portada.desborda). Sin la clave no aplica nada;
   con la jerarquía compacta, la tarjeta queda como estaba (la portada, 5, sí cambia). Mediciones de partida: auditoría
   «antes» del 8 oct 2026, puntos 4, 8 y 14. */

/* 1 · Con texto grande (body.letra-grande), las acciones secundarias de la etapa van dentro de la fila de acciones (guia.js
   las mueve; primera fila, a todo el ancho): si la fila queda fija al pie, van con ella y nunca quedan debajo. Misma
   separación que antes: 4 px de margen + 8 px de hueco de la fila = los 12 px de siempre. Con texto normal siguen en su
   sitio, encima de la fila, y la fila fija deja a la vista la acción de la etapa. Toque de 44 px (eran 40). */
body.recorrido-movil:not(.jer-compacta) #guia .fila > .extra{flex:0 0 100%;margin:0 0 4px}
@media (pointer:coarse){ body.recorrido-movil:not(.jer-compacta) #guia .extra .b{min-height:44px} }
/* Con texto grande, «Anterior» desactivado (etapa 1) no ocupa una fila entera: «Etapa 1 de 4» ya dice que no hay anterior,
   y así la acción principal de la etapa 1 queda a la vista al 200 % en 390×844. A texto normal se ve como siempre. */
body.recorrido-movil.letra-grande:not(.jer-compacta) #guia #g-ant:disabled{display:none}
/* Con texto normal la fila también queda fija al pie si la tarjeta no cabe sin estar limitada (guia.js pone .acciones-fijas:
   «Explorar» acorta la columna de controles y en 360×640 y 640×360 la tarjeta ya no la toca). Mismo pie que .limitada
   (experiencia.css, v1.5.6); .fila-suelta lo suelta igual. */
body.recorrido-movil:not(.jer-compacta) #guia.acciones-fijas .fila{position:sticky;bottom:-12px;margin-bottom:-12px;padding:10px 0 12px;
  background:rgb(var(--papel-rgb));box-shadow:0 -10px 12px -10px rgba(0,0,0,.45)}

/* 2 · La tarjeta no cabe: lo dice. Con la fila fija al pie, el texto que pasa bajo ella se desvanece (18 px: en 360×640 con
   texto normal la fila fija deja unos 85 px encima y un desvanecido más alto llegaba al título). En pantallas táctiles,
   además, #g-sigue: una barra de desplazamiento propia que guia.js coloca en el margen derecho de la tarjeta (vacío: no tapa
   texto ni acciones), siempre a la vista mientras la tarjeta no cabe, con una flecha al pie mientras queda contenido debajo
   (la flecha se mueve dos veces al aparecer); si no hay sitio para la barra, la flecha sola. Ahí la barra del sistema se
   oculta para no tener dos; con ratón queda la del sistema, que se puede arrastrar, y #g-sigue no se pinta. */
@media (pointer:coarse){
  body.recorrido-movil:not(.jer-compacta) #guia{scrollbar-width:none}
  body.recorrido-movil:not(.jer-compacta) #guia::-webkit-scrollbar{display:none}
}
body.recorrido-movil #guia.limitada.hay-mas:not(.fila-suelta) .fila::before,
body.recorrido-movil #guia.acciones-fijas.hay-mas:not(.fila-suelta) .fila::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px;pointer-events:none;
  background:linear-gradient(rgba(var(--papel-rgb),0),rgb(var(--papel-rgb)))}
#g-sigue{position:fixed;width:8px;pointer-events:none!important}
#g-sigue::before{content:"";position:absolute;left:2.5px;top:0;bottom:12px;width:3px;border-radius:2px;background:rgba(250,249,245,.16)}
#g-sigue i{position:absolute;left:2.5px;top:0;width:3px;border-radius:2px;background:rgba(var(--detalle-rgb),.9)}
#g-sigue svg{position:absolute;left:-1px;bottom:0;width:10px;height:6px;fill:none;stroke:var(--detalle-texto);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#g-sigue.solo-flecha::before,#g-sigue.solo-flecha i{display:none}
#g-sigue.al-final svg{visibility:hidden}
@media (prefers-reduced-motion:no-preference){ #g-sigue:not(.al-final) svg{animation:gSigue 900ms ease-in-out 2} }
html.movimiento-reducido #g-sigue svg{animation:none}
@keyframes gSigue{50%{transform:translateY(3px)}}
body.con-reproductor #g-sigue{display:none!important}

/* 3 · Teléfono horizontal (y toda pantalla baja): la tarjeta y la elección de retomar terminan 10 px encima de la barra
   (844×390: la tarjeta llegaba a y 314 y la barra empieza en 312; «Explorar por mi cuenta» quedaba debajo). La barra la
   publica el frente de controles en --dock-tope si la mueve (dos filas); si no, la mide guia.js (--g-dock). dvh donde
   exista (en el teléfono 100vh puede pasar del alto visible), dentro de @supports: una declaración con var() no cae a la
   anterior al calcularse, y sin dvh la tarjeta se quedaba sin alto máximo. */
@media (max-height:500px){
  body.recorrido-movil:not(.jer-compacta) #guia,body.recorrido-movil:not(.jer-compacta) #eleccion{
    max-height:calc(100vh - 52px - var(--dock-tope, var(--g-dock, 78px)) - 10px)}
  body.recorrido-movil.demo-activo:not(.jer-compacta) #guia,body.recorrido-movil.demo-activo:not(.jer-compacta) #eleccion{
    max-height:calc(100vh - 80px - var(--dock-tope, var(--g-dock, 78px)) - 10px)}
  body.recorrido-movil:not(.jer-compacta) #b-guia{bottom:calc(var(--dock-tope, var(--g-dock, 66px)) + 10px)}
}
@supports (height:100dvh){
  @media (max-height:500px){
    body.recorrido-movil:not(.jer-compacta) #guia,body.recorrido-movil:not(.jer-compacta) #eleccion{
      max-height:calc(100dvh - 52px - var(--dock-tope, var(--g-dock, 78px)) - 10px)}
    body.recorrido-movil.demo-activo:not(.jer-compacta) #guia,body.recorrido-movil.demo-activo:not(.jer-compacta) #eleccion{
      max-height:calc(100dvh - 80px - var(--dock-tope, var(--g-dock, 78px)) - 10px)}
  }
}
/* 4 · Teléfono vertical: la tarjeta y la elección se apoyan 12 px sobre la barra si esta crece (dos filas con letra grande);
   con la barra de una fila es exactamente lo de siempre (84 px más la zona segura). */
@media (max-width:700px) and (min-height:501px){
  body.recorrido-movil:not(.jer-compacta):not(.panel-plegado) #guia,body.recorrido-movil:not(.jer-compacta) #eleccion{
    bottom:max(calc(84px + env(safe-area-inset-bottom)),calc(var(--dock-tope, var(--g-dock, 0px)) + 12px))}
}

/* 5 · Portada: si no cabe (390×844 al 200 %: «Explorar lotes» con top 850 > 844 y la portada desplazándose sin señal), las
   dos puertas quedan fijas al pie sobre un velo que desvanece el título que sigue debajo; al desplazar se lee entero y las
   puertas siguen a mano. La caja de las acciones llega a los bordes de la tarjeta con margen negativo y relleno iguales:
   sin desborde (sin .desborda) todo queda donde estaba y sin fondo.
   Fijas, pegadas al borde de la pantalla: el límite de un elemento fijo (sticky) descuenta el relleno inferior de la portada
   (experiencia.css: max(clamp(24px,6vh,72px), zona segura); 51 px en 390×844), así que se compensa con la misma distancia en
   negativo, y el velo baja hasta el borde con la zona segura dentro de su relleno: ninguna franja sin velo bajo los botones
   por donde siga pasando el título. Ese relleno solo existe con .desborda y solo agranda el desborde: no oscila. */
body.recorrido-movil #p-acciones{margin:-14px -20px -18px;padding:14px 20px 18px;border-radius:0 0 18px 18px}
body.recorrido-movil #portada.desborda #p-acciones{position:sticky;z-index:1;
  bottom:calc(-1 * max(clamp(24px,6vh,72px),env(safe-area-inset-bottom,0px)));
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(rgba(15,17,16,0),rgba(15,17,16,.9) 22px)}

/* 6 · v1.16.1-pedasi.16 (QA B5, D1) · Portada con texto grande en el teléfono: «Sobre esta información» (y el selector de idioma)
   pisaba el rótulo del proyecto. Con letra grande los dos bloques de arriba se apilan: la identidad arriba y los botones
   discretos debajo, alineados a la izquierda, en el flujo (ya no absolutos). Y el bloque de texto deja sitio al pie fijo para que
   la última línea del párrafo se pueda leer al desplazar (antes quedaba bajo las puertas). */
@media (max-width:700px){
  body.recorrido-movil.letra-grande #portada .identidad,body.recorrido-movil.letra-grande #portada .discreto{position:static;flex:none;align-self:flex-start;margin:0}
  body.recorrido-movil.letra-grande #portada .identidad{margin:max(16px,env(safe-area-inset-top)) 0 0 max(16px,env(safe-area-inset-left))}
  body.recorrido-movil.letra-grande #portada .discreto{margin:10px 0 0 max(16px,env(safe-area-inset-left));flex-wrap:wrap;gap:8px}
  body.recorrido-movil.letra-grande #portada .discreto button{min-height:44px}
  body.recorrido-movil.letra-grande #portada.desborda .copia{padding-bottom:calc(18px + var(--p-acciones-alto,120px))}
}