/* ============================================================================
   descenso.css — «El descenso»: la página /memoria (la versión web del papel).
   Se carga DESPUÉS de base.css y pagina.css y solo añade lo que es suyo:
     · la lámina del puesto de trabajo (SVG) y su montaje pieza a pieza,
     · los pasos que gobiernan el montaje al bajar,
     · el mando de cambio de modelo,
     · la hoja de una decisión (las seis casillas) y el enlace al papel.
   Tokens, tipografía, membrete y colofón los dan base.css y pagina.css.
   Solo tinta / papel / verdín / grises. Ningún color nuevo.

   Dos clases gobiernan los estados (las pone el <script> de la cabecera):
     html.con-js  → hay JavaScript (en móvil, las etiquetas salen de una en una).
     html.montaje → se puede animar (no hay prefers-reduced-motion): las piezas
                    empiezan fuera y entran al bajar.
   Sin ninguna de las dos —sin JS o con movimiento reducido— la lámina sale
   entera, montada y etiquetada, y todos los pasos se leen en flujo.
   ============================================================================ */


/* ============================================================================
   1 · La lámina: registro de tinta sobre papel
   ============================================================================ */
.lamina{
  display:block; width:100%; height:100%;
  overflow:hidden;                 /* base.css pone svg{overflow:visible} */
  color:var(--tinta);
  fill:none; stroke:currentColor; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
}
.lamina text{stroke:none}
.lamina .fino{stroke-width:2}
.lamina .cable{stroke-width:2.6}

/* las etiquetas: Caslon cursiva con línea de guía, como una lámina técnica */
.lamina .etiqueta text{font-family:var(--display); font-style:italic; font-size:30px; fill:var(--tinta)}
.lamina .guia{stroke:var(--verdin-c); stroke-width:1.6}
.lamina .punto{fill:var(--verdin-c); stroke:none}

/* los rótulos de las cajas de fuera (su nube, su correo, sus fuentes) */
.lamina .rotulo{font-family:var(--body); font-size:23px; fill:var(--gris); letter-spacing:.06em}

/* el marco del puesto entero y su título */
.lamina .marco{stroke:var(--verdin-c); stroke-width:2; stroke-dasharray:14 10}
.lamina .titulo{font-family:var(--display); font-style:italic; font-size:32px; fill:var(--verdin)}

/* el hueco del modelo: solo cuando se cambia */
.lamina .hueco rect{stroke:var(--verdin-c); stroke-width:2; stroke-dasharray:10 8; opacity:0; transition:opacity .4s}
.lamina.con-hueco .hueco rect{opacity:1}
/* el instante en que el sitio del modelo está vacío: el hueco late, para que se vea que no hay nadie */
.lamina.hueco-vacio .hueco rect{stroke:var(--verdin); animation:late .46s ease-in-out}
@keyframes late{0%{opacity:.35}50%{opacity:1}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .lamina.hueco-vacio .hueco rect{animation:none} }

/* El modelo que está puesto. Por defecto —sin JS, o si el guion no llega— se ve el
   primero y punto: el puesto nunca sale sin nadie sentado. Cuando descenso.js arranca
   marca html.js-modelos y a partir de ahí manda la clase .puesto. */
.lamina .modelo[data-modelo="2"],
.lamina .modelo[data-modelo="3"]{display:none}
html.js-modelos .lamina .modelo{
  display:inline; opacity:0; transform:translateY(-30px);
  transition:opacity .34s ease, transform .5s cubic-bezier(.2,.75,.25,1);
}
html.js-modelos .lamina .modelo.puesto{opacity:1; transform:none}


/* ============================================================================
   2 · El montaje: escena pegajosa arriba, pasos que pasan por debajo
   ============================================================================ */
.montaje{margin-bottom:84px}
.montaje > .intro{margin-bottom:6px}
.montaje-in{position:relative}

.escena-sticky{
  position:sticky; top:0; z-index:3;
  background:var(--paper);
  padding:12px 0 10px;
  border-bottom:1px solid var(--rule-2);
}
.escena{height:clamp(200px, 38svh, 268px)}
@media (min-width:760px){ .escena{height:clamp(260px, 44svh, 400px)} }

/* las piezas: quietas por defecto; con html.montaje llegan de fuera al bajar */
.lamina .pieza{transform:none; opacity:1}
html.montaje .lamina .pieza{
  opacity:0;
  transform:translate(var(--dx,0px), var(--dy,0px));
  transition:transform .72s cubic-bezier(.2,.75,.25,1), opacity .42s ease;
}
html.montaje .lamina .pieza.puesta{opacity:1; transform:none}

/* la etiqueta entra un poco después que su pieza, y su guía se traza */
html.montaje .lamina .pieza .etiqueta{opacity:0; transition:opacity .4s ease .22s}
html.montaje .lamina .pieza.puesta .etiqueta{opacity:1}
html.montaje .lamina .pieza .guia{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .55s ease .26s}
html.montaje .lamina .pieza.puesta .guia{stroke-dashoffset:0}

/* en el teléfono la lámina se ve pequeña: el trazo y las letras crecen para que se lean */
@media (max-width:759px){
  .lamina .etiqueta text{font-size:46px}
  .lamina .guia{stroke-width:3}
  .lamina .punto{r:8}
  .lamina .rotulo{font-size:26px}
  .lamina .titulo{font-size:46px}
}


/* ── escritorio: dos columnas. La lámina se queda pegada a un lado y los pasos pasan
      por el otro; la caja se ensancha por fuera de la columna de lectura (nunca 100vw,
      que se lleva la barra de scroll por delante). ─────────────────────────────────── */
@media (min-width:940px){
  .montaje-in{
    margin-inline:-52px;
    display:grid; grid-template-columns:1fr 348px; gap:0 44px; align-items:start;
  }
  .escena-sticky{
    grid-column:1; grid-row:1;
    top:12vh; padding:0; border-bottom:0; background:transparent;
  }
  .escena{height:clamp(300px, 56svh, 520px)}
  ol.pasos{grid-column:2; grid-row:1}
  .paso{min-height:46svh; max-width:none}
  .paso:first-child{padding-top:14vh}
  .paso:last-child{min-height:42svh}
}
@media (min-width:1120px){ .montaje-in{margin-inline:-110px} }
@media (min-width:1240px){ .montaje-in{margin-inline:-170px} }
@media (min-width:1400px){ .montaje-in{margin-inline:-230px; grid-template-columns:1fr 380px} }


/* ============================================================================
   3 · Los pasos (la voz que acompaña al montaje)
   ============================================================================ */
ol.pasos{list-style:none; counter-reset:pz; padding:0; margin:0; max-width:none}
.paso{
  counter-increment:pz;
  min-height:42svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:22px 0 26px; margin:0;
  max-width:60ch;
}
.paso:last-child{min-height:30svh}
.paso h3{
  font-family:var(--display); font-weight:400; font-size:26px; line-height:1.24;
  margin:0 0 9px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.paso h3::before{
  content:counter(pz,decimal-leading-zero);
  font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.16em;
  color:var(--verdin-c); flex:none;
}
.paso h3 .alias{font-family:var(--body); font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--verdin)}
.paso p{font-size:16.5px; line-height:1.7; color:var(--gris); margin:0; max-width:56ch}
.paso p b{color:var(--tinta)}
.paso .remate{font-family:var(--display); font-size:20px; line-height:1.4; color:var(--tinta); margin-top:14px}

/* con JS, el paso que no toca se atenúa (nunca por debajo de legible) */
html.con-js .paso{opacity:.42; transition:opacity .35s ease}
html.con-js .paso.actual, html.con-js .paso.visto{opacity:1}
@media (prefers-reduced-motion:reduce){ html.con-js .paso{opacity:1} }


/* ============================================================================
   4 · El mando de cambio de modelo
   ============================================================================ */
.modelos{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0 0}
.modelos .eti{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--verdin); flex-basis:100%; margin:0 0 4px}
.modelos button{
  font-family:var(--body); font-size:14px; letter-spacing:.03em;
  background:var(--white); color:var(--gris);
  border:1px solid var(--rule); border-radius:2px;
  padding:9px 15px; cursor:pointer;
}
.modelos button:hover{border-color:var(--verdin-c); color:var(--tinta)}
.modelos button[aria-pressed="true"]{background:var(--tinta); border-color:var(--tinta); color:var(--paper)}


/* ============================================================================
   5 · La hoja de una decisión (las seis casillas)
   ============================================================================ */
.ficha{background:var(--white); border:1px solid var(--rule); margin:30px 0 8px}
.ficha .cab{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-bottom:1px solid var(--rule); padding:13px 22px; margin:0;
  font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--verdin);
  max-width:none;
}
.ficha dl{display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0}
.ficha dl > div{padding:17px 22px; border-bottom:1px solid var(--rule-2)}
.ficha dl > div:nth-child(odd){border-right:1px solid var(--rule-2)}
.ficha dl > div:nth-last-child(-n+2){border-bottom:0}
.ficha dt{font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--gris-2); margin:0 0 6px}
.ficha dd{margin:0; font-size:15px; line-height:1.6; color:var(--gris)}
.ficha dd b{color:var(--tinta)}
.ficha .vence{background:var(--hueso)}
@media (max-width:620px){
  .ficha dl{grid-template-columns:1fr}
  .ficha dl > div:nth-child(odd){border-right:0}
  .ficha dl > div:nth-last-child(2){border-bottom:1px solid var(--rule-2)}
}
.pie-figura{font-size:13.5px; line-height:1.62; color:var(--gris-2); margin:14px 0 0; max-width:60ch}


/* ============================================================================
   6 · El enlace al papel (discreto, al final)
   ============================================================================ */
.papel{border-top:1px solid var(--rule-2); margin-top:30px; padding-top:20px}
.papel p{font-size:14.5px; color:var(--gris-2); margin:0}
.papel a{color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--verdin-c)}
.papel a:hover{color:var(--verdin)}


/* ============================================================================
   7 · Movimiento reducido: la lámina se queda quieta y entera
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  .lamina .pieza, .lamina .etiqueta, .lamina .guia, .lamina .modelo,
  .lamina .hueco rect, html.con-js .paso{transition:none !important}
  .lamina .pieza{opacity:1 !important; transform:none !important}
  .lamina .guia{stroke-dashoffset:0 !important}
}