/* TU ESPACIO ENTRE SESIONES y el ejercicio de reflexión · publicado con el sí del dueño (24-oct-2026).
   Nació como muestra en _MARCA/helber/acompanamiento_pacientes_20261023/muestra_web (allí está el porqué de cada cosa).
   Se apoya en estilo.css de la web (mismas letras, marfil, dorado, botones). Luminoso: el azul noche solo en letras
   y filetes (orden del dueño, 22-oct: mucho azul opaca todo). Letra de lectura 19,5 px o más; botones de 56 px o más. */

/* El botón de la cabecera no se parte en dos renglones en el celular (medido a 375 px el 23-oct). */
.cabecera--legal .boton { white-space: nowrap; }

/* ── El ejercicio ─────────────────────────────────────────────────────── */
.cuerpo-test { background: linear-gradient(180deg, var(--papel) 0%, var(--marfil) 60%, #F6EBD3 100%); }
.test { width: min(680px, calc(100% - 40px)); margin-inline: auto; padding: 36px 0 64px; }
.test__pantalla[hidden] { display: none; }
.test__foto img { width: 100%; border-radius: var(--r-foto); box-shadow: var(--sombra-suave); }
.test__foto { margin-bottom: 28px; }
.test__titulo { font-size: clamp(38px, 10vw, 54px); line-height: 1.16; }
.test__titulo em { font-style: italic; color: var(--oro-osc); }
.test__datos { margin: 22px 0 30px; display: grid; gap: 10px; }
.test__datos li { position: relative; padding-left: 30px; font-size: 19.5px; line-height: 1.5; }
.test__datos li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--oro); }

.test__avance { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.test__barra { flex: 1; height: 10px; border-radius: 999px; background: rgba(201, 165, 74, .22); overflow: hidden; }
/* Las barras se estiran con transform (no con width): así el teléfono no recalcula la página en cada paso. */
.test__relleno { display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(.08);
  background: linear-gradient(90deg, var(--oro-claro), var(--oro)); transition: transform .45s var(--curva); }
.test__cuenta { font-size: 19.5px; font-weight: 600; color: var(--oro-osc); min-width: 4.5em; text-align: right; }
.test__pide { font-size: 19.5px; color: var(--grafito); margin-bottom: 10px; }
.test__frase { font-size: clamp(28px, 7.4vw, 36px); line-height: 1.2; min-height: 3.6em; outline: none;
  scroll-margin-top: calc(var(--cab) + 16px); }
.test__opciones { display: grid; gap: 12px; margin-top: 26px; }
.opcion { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 60px; padding: 12px 20px;
  border-radius: 18px; background: var(--papel); border: 1.5px solid rgba(201, 165, 74, .55); text-align: left;
  font-size: 20px; color: var(--noche); transition: background-color .25s var(--curva), border-color .25s var(--curva), transform .25s var(--curva); }
.opcion:hover { border-color: var(--oro); transform: translateX(3px); }
.opcion__punto { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--oro); }
.opcion[aria-pressed="true"] { background: #F7EBCB; border-color: var(--oro); }
.opcion[aria-pressed="true"] .opcion__punto { background: var(--oro); box-shadow: inset 0 0 0 4px #F7EBCB; }
.test__atras { margin-top: 26px; font-size: 18px; color: var(--noche); text-decoration: underline;
  text-decoration-color: var(--oro); text-underline-offset: 5px; min-height: 48px; }

.test__cambio { margin-top: 18px; padding: 16px 20px; border: 1px solid rgba(201, 165, 74, .5); background: rgba(247, 235, 203, .55);
  border-radius: 14px; font-size: 19.5px; }
.test__arbolito { width: 190px; height: 190px; margin: 22px auto 0;
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%); mask-image: radial-gradient(circle, #000 55%, transparent 72%); }
.test__mapa { margin-top: 30px; display: grid; gap: 14px; }
.mapa__fila { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: 14px; font-size: 18px; }
.mapa__barra { height: 14px; border-radius: 999px; background: rgba(201, 165, 74, .2); overflow: hidden; }
.mapa__barra span { display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0);
  background: var(--oro); transition: transform .8s var(--curva); }
.test__semana { margin-top: 32px; padding: 24px 22px; border-radius: var(--r-tarjeta); background: var(--papel);
  border: 1.5px solid rgba(201, 165, 74, .6); box-shadow: var(--sombra-suave); }
.test__semana h3 { font-size: 26px; margin-bottom: 8px; }
.test__semana p { font-size: 20px; line-height: 1.55; }
.test__camino { margin-top: 22px; font-size: 19.5px; line-height: 1.55; }
.test__enviar { margin-top: 30px; display: grid; gap: 16px; justify-items: start; }
.permiso { display: flex; gap: 14px; align-items: flex-start; font-size: 19.5px; line-height: 1.5; cursor: pointer; }
.permiso input { flex: none; width: 26px; height: 26px; margin-top: 2px; accent-color: var(--oro-osc); }
.boton.is-apagado { opacity: .45; pointer-events: none; filter: grayscale(.3); }
.test__aviso { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linea); display: grid; gap: 10px; }
.test__aviso p { font-size: 19.5px; line-height: 1.55; color: #4E535A; }

@media (max-width: 480px) {
  .mapa__fila { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Tu espacio (la página de ayuda entre sesiones) ──────────────────────── */
.espacio { padding: 40px 0 72px; }
.espacio__cabeza { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
.espacio__titulo { font-size: clamp(40px, 10vw, 60px); line-height: 1.16; }
.espacio__titulo em { font-style: italic; color: var(--oro-osc); }
.espacio__foto { margin-top: 28px; }
.espacio__foto img { width: 100%; border-radius: var(--r-foto); box-shadow: var(--sombra-suave); }

.ruta { width: min(1080px, calc(100% - 40px)); margin: 48px auto 0; }
.ruta__titulo { font-size: clamp(30px, 8vw, 40px); }
.ruta__lista { margin-top: 26px; display: grid; gap: 18px; counter-reset: ruta; }
.momento { position: relative; display: grid; gap: 8px; padding: 26px 24px 26px 76px; border-radius: var(--r-tarjeta);
  background: var(--papel); border: 1.5px solid rgba(201, 165, 74, .5); box-shadow: var(--sombra-suave); }
.momento::before { counter-increment: ruta; content: counter(ruta); position: absolute; left: 22px; top: 24px;
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--oro);
  color: var(--noche); font-family: var(--serif); font-size: 20px; font-weight: 600; }
.momento__cuando { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-osc); }
.momento__nombre { font-family: var(--serif); font-size: 28px; line-height: 1.15; color: var(--noche); }
.momento__frase { font-size: 19.5px; line-height: 1.55; }
.momento .boton { margin-top: 10px; justify-self: start; }
.momento--nuevo { background: linear-gradient(160deg, #FFF9EC, #F7EBCB); border-color: var(--oro); }
.momento__sello { justify-self: start; font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  background: var(--noche); color: var(--marfil); }

.pausa { width: min(760px, calc(100% - 40px)); margin: 56px auto 0; padding: 30px 26px; border-radius: var(--r-tarjeta);
  background: #FFF6E2; border: 1.5px solid rgba(201, 165, 74, .6); }
.pausa h2 { font-size: clamp(28px, 7vw, 34px); }
.pausa ol { margin-top: 16px; display: grid; gap: 12px; list-style: decimal; padding-left: 26px; }
.pausa li { font-size: 20px; line-height: 1.5; }
.pausa__ayuda { margin-top: 18px; font-size: 19.5px; }

@media (min-width: 860px) {
  .ruta__lista { grid-template-columns: 1fr 1fr; }
  .momento--ancho { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .test__relleno, .mapa__barra span, .opcion { transition: none; }
}