/* Campo Vivo · propuesta "línea": el recorrido de la app (recorrido.js).
   Un velo oscuro con un hueco sobre la parte que se explica, el anillo cálido que la marca y una tarjeta chica al lado. Pensado para
   no tocar nada de lo demás: todo vive bajo .recorrido y en un solo bloque, y todo sale de los tokens de linea.css (el anillo es la luz
   dorada, nunca el morado: ese es de lo que suena, de lo activo y del foco, y el foco de sus botones ya lo trae linea.css).
   - recorrido.js escribe la posición (left, top, width, height) directo en el hueco, el anillo y la tarjeta.
   - El hueco es la sombra enorme de un cuadro del tamaño de la parte: así sigue sus esquinas redondas y el velo cubre toda la pantalla
     sin recortes. La parte se ve tal cual, sin copias.
   - Capa: z-index 35, sobre la historia y la bienvenida (30) y bajo las hojas y el aviso de seguridad (40) y el aviso breve (50). Nada
     es negativo.
   - Movimiento: nada de esto se anima por CSS; recorrido.js posa el anillo y la tarjeta con Web Animations (opacidad, escala, desenfoque)
     y solo con movimiento permitido. Con "reducir movimiento" aparece y se va de golpe. Nada parpadea ni late. */

/* Mientras está abierto la página de abajo no se desplaza. La reserva del borde evita que, al quitarse la barra de desplazamiento de un
   navegador de escritorio, todo se corra a un lado. */
html.con-recorrido { overflow: hidden; scrollbar-gutter: stable; }

.recorrido {
  position: fixed;
  inset: 0;
  z-index: 35;
  overscroll-behavior: contain;
  touch-action: pinch-zoom;   /* ni arrastres ni desplazamientos por debajo; acercar con los dedos, sí */
}

.recorrido__foco,
.recorrido__anillo {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 14px;
  pointer-events: none;
}
/* Sin transiciones: con "reducir movimiento" linea.css las deja en 0,01 ms y el WebKit de iPhone las sigue contando un cuadro, así que el
   anillo se veía todavía en el paso anterior. Se pone en su sitio de una vez. */
.recorrido__foco,
.recorrido__anillo,
.recorrido .recorrido__tarjeta { transition: none; }
.recorrido__foco { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.78); }
.recorrido__anillo {
  border: 2px solid var(--oro);
  box-shadow: 0 0 0 1px rgba(var(--oro-canto-rgb), 0.16), 0 0 26px rgba(var(--oro-rgb), 0.3);
}

/* La tarjeta se ancla por el borde que mira a la parte marcada (recorrido.js decide el lado y pone su left, top o bottom). */
.recorrido .recorrido__tarjeta {
  position: absolute;
  left: 16px;
  width: 320px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 14px;
  border-radius: 20px;
  background: var(--oro-ambiente) 50% 0 / 100% 160px no-repeat, var(--grafito);
  box-shadow: 0 0 0 1px var(--linea-tenue), 0 24px 64px rgba(0, 0, 0, 0.6);
  text-align: left;
}

.recorrido__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.recorrido__titulo { color: var(--blanco); }
.recorrido__paso { flex: none; color: var(--gris); }
.recorrido__frase { margin-top: 6px; }

.recorrido__acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.recorrido__saltar { min-width: 44px; padding-inline: 4px; }
.recorrido__siguiente { min-width: 116px; }   /* "Siguiente" y "Listo" miden lo mismo: el botón no se mueve al llegar al último paso */

@media (max-width: 767px) {
  .recorrido .recorrido__tarjeta { padding: 16px 18px 12px; border-radius: 18px; }
}

/* Modo de contraste forzado: las sombras desaparecen, así que el anillo y la tarjeta se dibujan con bordes del sistema. */
@media (forced-colors: active) {
  .recorrido__anillo { border-color: Highlight; }
  .recorrido .recorrido__tarjeta { border: 1px solid CanvasText; }
}