/* Fold · EL TUTORIAL POR CAPÍTULOS (08/10/2026) Y EL DE «LO NUEVO» (07/10/2026). Lo pinta tutorial.js; prefijo «tut-».
   Reglas: docs/context/interfaz-calma.md. Variables de estilos.css y de calma.css; los botones
   son los de siempre (.pulsador, .enlace-discreto, .calma-texto). Las posiciones las pone tutorial.js por el CSSOM
   (sin atributos style). Solo se anima con transform y opacity: Fold viaja de un paso al siguiente (tutorial.js, requestAnimationFrame) y la
   tarjeta aparece cuando llega; con «reducir movimiento», nada de eso: todo aparece en su sitio. */

.tut { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tut[hidden] { display: none; }

/* EL VELO: cuatro paños alrededor de lo señalado (que queda a plena luz). En los pasos sin zona, uno solo lo cubre todo. */
.tut-velo { position: fixed; background: rgba(5, 6, 8, 0.6); pointer-events: auto; }
:root[data-tema="claro"] .tut-velo { background: rgba(22, 24, 28, 0.46); }
@media (prefers-color-scheme: light) { :root:not([data-tema]) .tut-velo { background: rgba(22, 24, 28, 0.46); } }
.tut-velo[hidden], .tut-tapa[hidden], .tut-foco[hidden] { display: none; }
/* Lo señalado se ve pero no se pulsa (salvo en el paso de «aprender haciendo», donde la tapa se quita). */
.tut-tapa { position: fixed; pointer-events: auto; }
.tut-foco { position: fixed; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 2px var(--cobalto-claro), 0 0 0 7px var(--cobalto-tenue); }

/* EL PASO: el sitio de Fold a un lado y, al otro, la tarjeta (lo que dice): el progreso, el titular, una o dos frases y
   los botones. Fold no está dentro: es el viajero de abajo, que llega a su sitio y entonces la tarjeta aparece. */
/* (14/10/2026, pulido para enseñarlo: Fold a 136 px junto a la tarjeta —antes 100— y en el lado y la altura que dan a lo que
   explica: tutorial.js pone «tut-fold-der» si lo señalado queda a su derecha y «tut-fold-arriba» si queda encima. La tarjeta lleva
   una colita hacia su boca: se lee que lo dice él.) */
.tut-paso { position: fixed; pointer-events: none; box-sizing: border-box; display: grid; grid-template-columns: 136px minmax(0, 1fr); column-gap: 10px; align-items: end;
  width: min(556px, calc(100vw - 24px)); color: var(--texto); transition: opacity .2s ease-out; }
.tut-paso:focus { outline: none; }
.tut-sitio { display: block; width: 136px; height: 121px; }
.tut-paso.tut-fold-arriba .tut-sitio { align-self: start; }
.tut-paso.tut-fold-der { grid-template-columns: minmax(0, 1fr) 136px; }
.tut-paso.tut-fold-der .tut-sitio { order: 2; }
.tut-tarjeta { position: relative; pointer-events: auto; min-width: 0; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4) var(--e-5) var(--e-3); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-panel); box-shadow: var(--sombra-3); transform-origin: 0 100%; }
/* La colita: un cuadradito girado del color de la tarjeta, asomando por el lado de Fold a la altura de su boca. */
.tut-tarjeta::before { content: ""; position: absolute; left: -8px; bottom: 34px; width: 14px; height: 14px; box-sizing: border-box; background: var(--superficie); border: solid var(--costura-fuerte); border-width: 0 0 1px 1px; transform: rotate(45deg); pointer-events: none; }
.tut-fold-arriba .tut-tarjeta::before { bottom: auto; top: 62px; }
.tut-fold-der .tut-tarjeta::before { left: auto; right: -8px; border-width: 1px 1px 0 0; }
.tut-fold-der .tut-tarjeta { transform-origin: 100% 100%; }
.tut-fold-arriba .tut-tarjeta { transform-origin: 0 0; }
.tut-fold-der.tut-fold-arriba .tut-tarjeta { transform-origin: 100% 0; }
.tut-paso.tut-entra .tut-tarjeta { animation: tut-entra .28s cubic-bezier(.16, 1, .3, 1); }
@keyframes tut-entra { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
/* Mientras Fold va de camino (o se abre el apartado que toca) la tarjeta no se ve: habla cuando llega. */
.tut-en-camino .tut-paso, .tut-esperando .tut-paso { opacity: 0; }
/* (En estrecho la hoja se queda en su borde —Fold camina por él— y lo que se funde es lo que dice.) */
.tut-en-camino .tut-paso.tut-hoja, .tut-esperando .tut-paso.tut-hoja { opacity: 1; }
.tut-hoja .tut-tarjeta { transition: opacity .2s ease-out; }
.tut-en-camino .tut-hoja .tut-tarjeta, .tut-esperando .tut-hoja .tut-tarjeta { opacity: 0; }

/* FOLD, EL VIAJERO: una pieza fija que solo se mueve con transform (tutorial.js > viajar). Su caja entera mide 176 × 156 (el
   tamaño del saludo, en el centro); junto a la tarjeta va a escala, más pequeño (así se dibuja nítido: nunca se agranda).
   La pose es lo que se agacha, se estira y se inclina; la sombra queda en el suelo y se encoge cuando él sube. */
.tut-viajero { position: fixed; left: 0; top: 0; width: 176px; height: 156px; pointer-events: none; transform-origin: 50% 100%; will-change: transform; z-index: 2; }
.tut-viajero[hidden] { display: none; }
.tut-pose { width: 100%; height: 100%; transform-origin: 50% 100%; will-change: transform; }
.fold.tut-fold { display: block; width: 176px; height: 156px; }
.tut-fold ellipse.f-sombra { opacity: 0; }   /* la sombra es la del viajero, que no salta con él */
.tut-sombra { position: absolute; left: 32%; right: 30%; bottom: 3px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, .3); transform-origin: 50% 50%; }
/* Al aterrizar, dos soplos de polvo a los lados de los pies (los mueve tutorial.js mientras se asienta, con transform y opacity). */
.tut-polvo { position: absolute; bottom: 4px; width: 16px; height: 7px; border-radius: 50%; background: var(--texto-2); opacity: 0; pointer-events: none; }
.tut-polvo.tut-polvo-i { left: 26%; }
.tut-polvo.tut-polvo-d { right: 26%; }
/* (Las piezas del dibujo se nombran con su etiqueta —g.f-senala— y siempre bajo .tut-fold: esta hoja no redefine
   ninguna clase de fold-animado.css, solo dice cómo se ve Fold DENTRO del tutorial.) */
/* SEÑALA de verdad, con el brazo largo y la mano del índice (g.f-apunta de fold-animado.js): al llegar lo alza (pasa de
   estirado al frente a apuntar: una transición), apunta a lo que explica (tutorial.js pone el ángulo) y de vez en cuando da dos
   toquecitos. Los ojos miran ahí. El brazo corto de la marca no se usa aquí. El giro se reparte: 45 % en el hombro y 55 % en
   el codo (así, aunque apunte hacia arriba, el antebrazo queda separado de la hoja). */
.fold.tut-fold g.f-senala { display: none; }
/* Un filo del tono contrario alrededor del brazo: en oscuro el brazo es claro y a veces pasa por encima de las tarjetas de papel
   de la app (claras); sin el filo, ahí no se veía. Cambia con el tema igual que el color del brazo (fold-animado.css). */
.fold.tut-fold { --tut-halo: rgba(8, 9, 12, .9); }
@media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]) .fold.tut-fold { --tut-halo: rgba(255, 255, 255, .95); } }
[data-tema="claro"] .fold.tut-fold { --tut-halo: rgba(255, 255, 255, .95); }
[data-tema="oscuro"] .fold.tut-fold { --tut-halo: rgba(8, 9, 12, .9); }
.fold.tut-fold g.f-apunta { transform-box: view-box; transform-origin: 164px 130px; transition: transform .42s ease-out; filter: drop-shadow(0 0 1px var(--tut-halo)) drop-shadow(0 0 1px var(--tut-halo)); }
.fold.tut-fold g.f-antebrazo { transform-box: view-box; transform-origin: 188px 125px; transition: transform .42s ease-out; }
.fold.tut-fold[data-estado="senala"] g.f-apunta, .fold.tut-fold[data-estado="ok"][data-tut-apunta] g.f-apunta { opacity: 1; transform: rotate(calc(var(--tut-giro, 0deg) * .45)); }
.fold.tut-fold[data-estado="ok"][data-tut-apunta] g.f-antebrazo { transform: rotate(calc(var(--tut-giro, 0deg) * .55)); }
.fold.tut-fold[data-estado="senala"] g.f-antebrazo { transform: rotate(calc(var(--tut-giro, 0deg) * .55)); animation: tut-toca 3.2s ease-in-out .6s infinite; }
@keyframes tut-toca { 0%, 62%, 100% { transform: rotate(calc(var(--tut-giro, 0deg) * .55)) translateX(0); } 70% { transform: rotate(calc(var(--tut-giro, 0deg) * .55)) translateX(7px); } 78% { transform: rotate(calc(var(--tut-giro, 0deg) * .55)) translateX(0); } 86% { transform: rotate(calc(var(--tut-giro, 0deg) * .55)) translateX(7px); } 94% { transform: rotate(calc(var(--tut-giro, 0deg) * .55)) translateX(0); } }
.fold.tut-fold[data-estado="senala"] g.f-ojos { transform: translate(var(--tut-ox, 0px), var(--tut-oy, 0px)); }
/* LA CARA CAMBIA CON EL PASO. Alegre (ha salido bien: la respuesta llega, pulsa lo que tocaba, decide, se despide): los ojos se
   cierran en dos arcos sonrientes —los mismos trazos del dibujo— y la sonrisa crece. Curioso (el paso de preguntar): cejas
   arriba, ojos más abiertos y la cabeza ladeada hacia la caja. */
.fold.tut-fold[data-estado="ok"] g.f-ojos, .fold.tut-fold[data-estado="celebra"] g.f-ojos, .fold.tut-fold[data-estado="asiente"] g.f-ojos { opacity: 0; }
.fold.tut-fold[data-estado="ok"] path.f-cejas, .fold.tut-fold[data-estado="celebra"] path.f-cejas, .fold.tut-fold[data-estado="asiente"] path.f-cejas { opacity: 1; stroke-width: 6; }
.fold.tut-fold path.f-boca-sonrisa { transform-box: fill-box; transform-origin: 50% 0; }
.fold.tut-fold[data-estado="ok"] path.f-boca-sonrisa, .fold.tut-fold[data-estado="celebra"] path.f-boca-sonrisa, .fold.tut-fold[data-estado="asiente"] path.f-boca-sonrisa { opacity: 1; transform: scale(1.18, 1.3); }
.fold.tut-fold[data-tut-animo="curioso"] path.f-cejas { opacity: 1; transform-box: fill-box; transform-origin: 50% 50%; transform: translateY(-17px) scale(.72); stroke-width: 6; }
.fold.tut-fold[data-tut-animo="curioso"] ellipse.f-globo { transform: scale(1.1); }
.fold.tut-fold[data-tut-animo="curioso"][data-estado="senala"] g.f-cuerpo { transform-box: view-box; transform-origin: 100px 188px; transform: rotate(-4deg); }
.fold.tut-fold[data-tut-animo="curioso"][data-estado="piensa"] path.f-cejas { opacity: 0; }
/* Parpadea al tocar el suelo (tutorial.js pone la clase una décima de segundo). */
.fold.tut-fold.tut-parpadea g.f-ojo { animation: none; transform: scaleY(.1); }
/* ASIENTE: cuando la persona decide una propuesta. Dos cabezadas y sigue. */
.fold.tut-fold[data-estado="asiente"] g.f-cuerpo { transform-box: view-box; transform-origin: 100px 188px; animation: tut-asiente .55s ease-in-out 2; }
@keyframes tut-asiente { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(7deg) translateY(3px); } }
/* LA DESPEDIDA: al cerrar, una copia de Fold (fuera del diálogo, sin pulsar nada) saluda y salta a «Más», donde vuelve a estar el tutorial. */
.tut-adios { position: fixed; left: 0; top: 0; width: 176px; height: 156px; pointer-events: none; z-index: 61; transform-origin: 50% 100%; will-change: transform, opacity; }

.tut-cuerpo { min-width: 0; }
.tut-barra { display: block; height: 3px; margin: 4px 0 var(--e-2); border-radius: 2px; background: var(--costura-fuerte); overflow: hidden; }
.tut-barra i { display: block; height: 100%; background: var(--cobalto-claro); transform-origin: 0 50%; transform: scaleX(0); transition: transform .35s ease-out; }
.tut-progreso { margin: 0 0 2px; font-size: var(--calma-t-nota); font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.tut-titular { margin: 0 0 var(--e-1); font-size: var(--calma-t-titulo); font-weight: 680; line-height: 1.25; color: var(--texto); text-wrap: balance; }
.tut-texto, .tut-extra { margin: 0; font-size: var(--calma-t-texto); line-height: 1.45; color: var(--texto); overflow-wrap: anywhere; text-wrap: pretty; }
.tut-extra { margin-top: var(--e-2); font-size: var(--calma-t-menor); color: var(--texto-2); }
.tut-extra[hidden] { display: none; }
.tut-botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.tut-hueco { flex: 1 1 auto; }
.tut-botones [hidden] { display: none; }
.tut-botones .tut-saltar { min-height: 44px; margin-left: -8px; }
.tut-botones .tut-siguiente { height: 44px; padding: 0 18px; border-radius: var(--r-control); }
.tut-botones button:active { transform: translateY(1px); }
.tut-botones button:focus-visible { outline: none; box-shadow: var(--anillo-foco); }

/* EN EL CENTRO (el saludo, el cierre y lo que no tiene zona en esta pantalla): Fold más grande, encima. */
.tut-paso.tut-centro { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.tut-centro .tut-sitio { width: 176px; height: 156px; margin-bottom: 6px; }
.tut-centro .tut-tarjeta { border-radius: var(--r-panel); transform-origin: 50% 0; padding-top: var(--e-5); }
.tut-centro .tut-tarjeta::before { left: 50%; top: -8px; bottom: auto; margin-left: -7px; border-width: 1px 0 0 1px; }
.tut-centro .tut-botones { justify-content: center; }
.tut-centro .tut-hueco { display: none; }

/* EN ESTRECHO: una hoja pegada al borde de abajo (o al de arriba, si lo señalado está abajo). Nunca tapa lo señalado.
   Fold va DENTRO de la hoja, en su columna (14/10/2026: posado en el borde quedaba encima del texto atenuado de la app), y
   asoma la cabeza por el borde que da a lo señalado cuando hay sitio para no taparlo (tut-asoma: tutorial.js). */
.tut-paso.tut-hoja { left: 0; right: 0; bottom: 0; top: auto; width: auto; transform: none; pointer-events: auto; grid-template-columns: 84px minmax(0, 1fr); column-gap: var(--e-3); align-items: start;
  background: var(--superficie); border: solid var(--costura-fuerte); border-width: 1px 0 0; border-radius: 16px 16px 0 0; box-shadow: var(--sombra-3);
  padding: var(--e-4) var(--e-4) calc(var(--e-2) + env(safe-area-inset-bottom, 0px)); }
.tut-paso.tut-hoja.tut-arriba { top: 0; bottom: auto; border-radius: 0 0 16px 16px; border-width: 0 0 1px; padding: calc(var(--e-3) + env(safe-area-inset-top, 0px)) var(--e-4) var(--e-2); }
.tut-hoja .tut-sitio { width: 84px; height: 75px; margin: 0; }
.tut-hoja.tut-asoma .tut-sitio { margin-top: -34px; }
.tut-hoja.tut-arriba .tut-sitio { align-self: end; }
.tut-hoja.tut-arriba.tut-asoma .tut-sitio { margin: 0 0 -30px; }
.tut-hoja .tut-tarjeta { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.tut-hoja .tut-tarjeta::before { display: none; }
.tut-hoja.tut-entra .tut-tarjeta { animation: none; }
.tut-hoja .tut-botones .tut-atras, .tut-hoja .tut-botones .tut-pausa { padding: 0 10px; }

/* EN PAUSA: sin velo ni tarjeta; queda «Seguir el recorrido», con Fold sentado encima. La aplicación se usa entera. */
.tut-pausado .tut-velo, .tut-pausado .tut-foco, .tut-pausado .tut-tapa, .tut-pausado .tut-paso { display: none; }
.tut-seguir { position: fixed; right: 16px; bottom: 132px; pointer-events: auto; min-height: 44px; padding: 0 16px; font: inherit; font-size: var(--calma-t-menor); font-weight: 650; color: var(--texto); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); box-shadow: var(--sombra-3); cursor: pointer; }
.tut-seguir[hidden] { display: none; }
.tut-seguir:hover { border-color: var(--cobalto-claro); }
.tut-seguir:active { transform: translateY(1px); }
.tut-seguir:focus-visible { outline: none; box-shadow: var(--anillo-foco); }

/* EL ÍNDICE DE CAPÍTULOS (08/10/2026): la otra caja del diálogo, en el centro; en estrecho, a todo lo ancho. Una fila por
   capítulo (un botón entero): nombre, cómo lo lleva y qué explica. */
.tut-paso[hidden], .tut-indice[hidden] { display: none; }
.tut-indice { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--e-3);
  width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: var(--e-5) var(--e-5) var(--e-3); color: var(--texto); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-panel); box-shadow: var(--sombra-3); }
.tut-indice:focus { outline: none; }
.tut-capitulos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.tut-capitulo-boton { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-3); row-gap: 2px; align-items: center; width: 100%; min-height: 52px; padding: var(--e-2) var(--e-3); text-align: left; font: inherit; color: var(--texto); background: transparent; border: 1px solid transparent; border-radius: var(--r-control); cursor: pointer; }
.tut-capitulo-boton:hover { border-color: var(--costura-fuerte); }
.tut-capitulo-boton:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.tut-capitulo-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); min-width: 0; }
.tut-capitulo-nombre { font-size: var(--calma-t-texto); font-weight: 650; overflow-wrap: anywhere; }
.tut-capitulo-estado { font-size: var(--calma-t-nota); color: var(--texto-2); }
.tut-capitulo-boton[data-tut-estado="visto"] .tut-capitulo-estado { color: var(--texto); font-weight: 600; }
.tut-capitulo-resumen { grid-column: 1; font-size: var(--calma-t-menor); line-height: 1.4; color: var(--texto-2); overflow-wrap: anywhere; }
.tut-capitulo-ir { grid-column: 2; grid-row: 1 / span 2; font-size: var(--calma-t-menor); font-weight: 600; color: var(--cobalto-claro); white-space: nowrap; }

/* «ENSÉÑAME ESTO»: una línea discreta bajo la cabecera de cada apartado (y bajo la caja de preguntar). La primera vez lo
   ofrece con una frase y «Ahora no»; después queda solo el botón. No tapa nada y no se mueve. */
.tut-franja { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px var(--e-2); min-height: 36px; padding: 0 var(--e-4); box-sizing: border-box; }
.tut-franja.tut-ofrece { justify-content: flex-start; padding-top: var(--e-1); padding-bottom: var(--e-1); border-bottom: 1px solid var(--costura-fuerte); }
.tut-franja-texto { flex: 1 1 200px; margin: 0; font-size: var(--calma-t-menor); line-height: 1.4; color: var(--texto); }
.tut-franja .tut-ensename, .tut-franja .tut-ahora-no { white-space: nowrap; }
.tut-franja.tut-ofrece .tut-ensename { font-weight: 650; color: var(--cobalto-claro); }
.tut-franja button:focus-visible { outline: none; box-shadow: var(--anillo-foco); }

/* «Más › Ver el tutorial»: su icono (toda entrada de «Más» necesita el suyo; sin él la máscara pinta un cuadrado macizo). */
.menu-mas-lista #abrir-tutorial { --mv-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M10.2 8.6l5.3 3.4-5.3 3.4z'/%3E%3C/svg%3E"); }

/* MIENTRAS ESTÁ ABIERTO NO HAY NINGÚN OTRO AVISO: la franja, el aviso que se va solo y la pista de la primera vez
   guardan su sitio (no se mueve la pantalla) pero no se ven. Al cerrarlo vuelven como estaban. */
html.tut-abierto #calma-franja, html.tut-abierto #notificacion, html.tut-abierto #bienvenida-pista { visibility: hidden; }

/* CON «REDUCIR MOVIMIENTO»: Fold aparece en su sitio (tutorial.js no lo hace viajar), la tarjeta no se funde y el brazo
   señala quieto hacia lo que explica. Todo se entiende igual. */
@media (prefers-reduced-motion: reduce) {
  .tut-paso, .tut-hoja .tut-tarjeta { transition: none; }
  .tut-paso.tut-entra .tut-tarjeta { animation: none; }
  .tut-barra i { transition: none; }
  .tut-botones button:active, .tut-seguir:active { transform: none; }
  .fold.tut-fold[data-estado="senala"] g.f-apunta, .fold.tut-fold[data-estado="ok"][data-tut-apunta] g.f-apunta { animation: none !important; opacity: 1; transform: rotate(calc(var(--tut-giro, 0deg) * .45)); }
  .fold.tut-fold[data-estado="senala"] g.f-antebrazo, .fold.tut-fold[data-estado="ok"][data-tut-apunta] g.f-antebrazo { animation: none !important; transform: rotate(calc(var(--tut-giro, 0deg) * .55)); }
  .fold.tut-fold[data-estado="asiente"] g.f-cuerpo { animation: none !important; transform: rotate(5deg); }
  .tut-polvo, .tut-adios { display: none; }
}