/* =====================================================================
   Portal SIT-GP · sistema visual «Cinta de custodia»
   Fondo gris niebla frío, tinta pizarra, una sola cinta roja de custodia.
   Bordes redondeados en todo; esquinas rectas solo en acciones
   destructivas o irreversibles (D-31).
   ===================================================================== */

@font-face { font-family: "Caslon Registro"; src: url("../fuentes/libre-caslon-display.3b6d3d56e4eb.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Next"; src: url("../fuentes/atkinson-next.825fabef695f.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Next"; src: url("../fuentes/atkinson-next-cursiva.740db8084ae9.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Mono"; src: url("../fuentes/atkinson-mono.387c8dcba3be.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  /* Color */
  --niebla: #DEE4E7;          /* fondo */
  --papel: #F4F6F7;           /* superficies */
  --papel-alto: #FBFCFC;      /* superficies elevadas, campos */
  --tinta: #1C2430;           /* texto principal */
  --tinta-2: #3D4957;         /* texto secundario */
  --tinta-3: #535F6C;         /* rótulos, ayudas */
  --cinta: #B3312B;           /* línea de custodia, acción principal */
  --cinta-honda: #8F231F;     /* hover / presionado */
  --cinta-velo: rgba(179, 49, 43, .10);
  --alerta: #7A4E0A;           /* advertencias: algo para revisar, no un error */
  --alerta-velo: #FBF1DE;
  --hilo: #8A949E;            /* tramos pendientes (solo líneas) */
  --linea: #C5CDD3;           /* bordes finos */
  --linea-fuerte: #97A2AC;
  --pizarra: #1F2935;         /* panel oscuro del ingreso */
  --pizarra-2: #2A3542;
  --sobre-pizarra: #E6EBEE;
  --sobre-pizarra-2: #B7C1CA;

  /* Tipografía */
  --f-registro: "Caslon Registro", "Libre Caslon Display", Georgia, serif;
  --f-texto: "Atkinson Next", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --f-cifra: "Atkinson Mono", "Atkinson Hyperlegible Mono", ui-monospace, monospace;

  /* Bordes (D-31) */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-xl: 30px;
  --r-pastilla: 999px;

  /* Espacio (pauta de 8) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --borde-lateral: clamp(16px, 5vw, 72px);
  --ancho: 1296px;
  --alto-control: 44px;       /* alto de campos, desplegables y botones de formulario */

  /* Profundidad */
  --sombra-1: 0 1px 2px rgba(28, 36, 48, .06), 0 2px 8px rgba(28, 36, 48, .06);
  --sombra-2: 0 2px 6px rgba(28, 36, 48, .07), 0 12px 32px rgba(28, 36, 48, .10);

  /* Movimiento (Emil Kowalski) */
  --sal: cubic-bezier(0.23, 1, 0.32, 1);
  --curso: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--niebla); color: var(--tinta);
  font-family: var(--f-texto); font-size: 1.0625rem; line-height: 1.55;
  font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
::selection { background: rgba(179, 49, 43, .18); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--cinta); outline-offset: 3px; border-radius: 6px; }
a { color: inherit; text-decoration-color: var(--linea-fuerte); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--cinta); }
input, button, select, textarea { font: inherit; color: inherit; }
html { scrollbar-color: var(--linea-fuerte) var(--niebla); }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Tipos ----------------------------------------------------------- */
.registro { font-family: var(--f-registro); font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; }
.t-1 { font-family: var(--f-registro); font-weight: 400; font-size: clamp(2.6rem, 1.4rem + 4.3vw, 5.4rem); line-height: 1.0; letter-spacing: -0.015em; }
.t-2 { font-family: var(--f-registro); font-weight: 400; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); line-height: 1.05; letter-spacing: -0.01em; }
.t-3 { font-family: var(--f-registro); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); line-height: 1.12; }
.entrada-texto { font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); line-height: 1.5; color: var(--tinta-2); max-width: 36ch; }
.rotulo { font-family: var(--f-texto); font-size: .8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.cifra { font-family: var(--f-cifra); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ayuda { font-size: .9375rem; color: var(--tinta-3); }

/* --- Contenedor -------------------------------------------------------- */
.envoltura { width: min(100% - 2 * var(--borde-lateral), var(--ancho)); margin-inline: auto; }

/* --- Marca --------------------------------------------------------- */
.marca { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.0625rem; letter-spacing: .01em; text-decoration: none; color: var(--tinta); }
.marca svg { width: 16px; height: 26px; flex: none; }
.marca small { display: block; font-weight: 500; font-size: .75rem; color: var(--tinta-3); letter-spacing: .02em; }

/* --- Botones --------------------------------------------------------- */
.boton {
  --b-fondo: var(--cinta); --b-texto: #fff; --b-borde: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-m); border: 1.5px solid var(--b-borde);
  background: var(--b-fondo); color: var(--b-texto); font-weight: 650; font-size: 1rem; text-decoration: none;
  cursor: pointer; transition: transform 160ms var(--sal), background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.boton:active { transform: scale(0.97); }
.boton .nudo { width: 18px; height: 18px; flex: none; }
.boton-principal:hover { background: var(--cinta-honda); }
.boton-sereno { --b-fondo: transparent; --b-texto: var(--tinta); --b-borde: var(--linea-fuerte); }
.boton-sereno:hover { --b-borde: var(--tinta); background: rgba(28, 36, 48, .04); }
.boton-tinta { --b-fondo: var(--tinta); --b-texto: #fff; }
.boton-tinta:hover { --b-fondo: #2B3644; }
.boton-enlace { --b-fondo: transparent; --b-texto: var(--tinta-2); min-height: 44px; padding: 0 10px; font-weight: 600; }
.boton-enlace:hover { color: var(--tinta); background: rgba(28, 36, 48, .05); }
/* D-31: lo irreversible tiene esquinas rectas. */
.boton-peligro { --b-fondo: transparent; --b-texto: var(--cinta-honda); --b-borde: var(--cinta); border-radius: 0; }
.boton-peligro:hover { --b-fondo: var(--cinta-honda); --b-texto: #fff; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.boton-ancho { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .boton-principal:hover .nudo { transform: translateX(2px); }
  .boton .nudo { transition: transform 200ms var(--sal); }
}

/* --- Campos ------------------------------------------------------------ */
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 650; font-size: .9375rem; }
.campo input, .formulario input:not([type=checkbox]):not([type=hidden]):not([type=radio]) {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r-s);
  border: 1.5px solid var(--linea); background: var(--papel-alto); font-size: 1.0625rem;
  transition: border-color 160ms ease, box-shadow 160ms ease; caret-color: var(--cinta);
}
.campo input:hover { border-color: var(--linea-fuerte); }
.campo input:focus, .formulario input:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(28, 36, 48, .10); }
.campo input[aria-invalid="true"] { border-color: var(--cinta); }
.campo-codigo input { font-family: var(--f-cifra); font-size: 1.6rem; letter-spacing: .35em; text-align: center; padding-left: calc(14px + .35em); }
.error-campo { color: var(--cinta-honda); font-size: .9375rem; font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
.error-campo svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.aviso {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s);
  background: var(--cinta-velo); color: var(--cinta-honda); font-weight: 600; font-size: .9375rem;
}
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.aviso-neutro { background: rgba(28, 36, 48, .06); color: var(--tinta-2); }

/* --- Pastillas y sellos ------------------------------------------------- */
.pastilla { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: var(--r-pastilla); border: 1px solid var(--linea-fuerte); font-size: .8125rem; font-weight: 650; color: var(--tinta-2); background: var(--papel-alto); }
.pastilla-alerta { margin-top: 10px; color: var(--alerta); background: var(--alerta-velo); border-color: var(--alerta); }
.pastilla i { width: 8px; height: 8px; border-radius: 50%; background: var(--hilo); }
.pastilla-demo { border-style: dashed; }
.sello {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  border: 1.5px solid currentColor; color: var(--tinta-2); font-family: var(--f-texto); font-size: .625rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 1.15; transform: rotate(-8deg);
  box-shadow: inset 0 0 0 3px var(--papel), inset 0 0 0 4px currentColor;
}

.sello-pliegue { position: absolute; right: -52px; top: -50px; width: 78px; height: 78px; font-size: .75rem; letter-spacing: .02em; background: var(--papel); }
.sello-rojo { color: var(--cinta-honda); }
.sello-pliegue.sello-rojo { right: auto; left: -46px; top: -96px; }
.cola-pendiente { position: absolute; right: 0; top: 19%; font-size: .875rem; font-weight: 400; font-style: italic; color: var(--tinta-3); }
.titulo-seccion { display: flex; gap: 18px; align-items: flex-start; }
.titulo-seccion .marcador { width: 18px; height: 30px; margin-top: .35em; }

/* --- Fichas (papel) --------------------------------------------------- */
.ficha { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra-1); }

/* --- Marcador de cinta (señal de sección) ------------------------------- */
.marcador { width: 14px; height: 22px; flex: none; color: var(--cinta); }

/* =====================================================================
   PORTADA (B)
   ===================================================================== */
.portada-cabecera {
  position: sticky; top: 0; z-index: 10;
  background: rgba(222, 228, 231, .86); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--linea);
}
.seccion[id] { scroll-margin-top: 96px; }
.portada-cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 84px; }
.portada-cabecera nav { display: flex; align-items: center; gap: var(--e-2); }

.portada-inicio { position: relative; min-height: calc(100svh - 84px); display: grid; grid-template-rows: auto 1fr; padding-bottom: var(--e-6); }
.portada-inicio .envoltura.texto { padding-top: clamp(24px, 5vh, 64px); }
.portada-inicio h1 { font-size: clamp(2.8rem, 1.2rem + 5.4vw, 6.6rem); line-height: .98; max-width: 16ch; }
.portada-bajada { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-6) var(--e-7); align-items: end; margin-top: var(--e-5); }
@media (min-width: 1101px) {
  .portada-inicio .envoltura.texto > div { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--e-7); align-items: end; }
  .portada-bajada { grid-template-columns: 1fr; gap: var(--e-5); margin-top: 0; padding-bottom: .5em; }
}
.portada-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
/* Subrayado de «origen»: un tramo de cinta que se dibuja una vez al terminar la cinta grande */
.origen { position: relative; display: inline-block; }
.origen svg { position: absolute; left: 0; bottom: -.05em; width: 100%; height: .12em; min-height: 8px; overflow: visible; }
.origen path { fill: none; stroke: var(--cinta); stroke-width: 6; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 0; }
.portada-hechos { display: grid; gap: var(--e-3); align-self: start; padding-top: clamp(8px, 2vh, 24px); }
.portada-hechos li { list-style: none; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--tinta-2); font-size: 1rem; }
.portada-hechos li svg { width: 22px; height: 22px; color: var(--cinta); margin-top: 1px; }
.portada-hechos strong { color: var(--tinta); font-weight: 650; }

/* La cinta de custodia */
.custodia { position: relative; margin: clamp(16px, 3vh, 40px) 0 0; }
.sello-pliegue.abajo { top: auto; bottom: -92px; right: -40px; }
.custodia-lienzo { position: relative; height: clamp(250px, 34vh, 330px); }
.custodia-lienzo svg.cinta { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cinta .tramo { fill: none; stroke: var(--cinta); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cinta .tramo-brillo { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform: translateY(-2px); }
.cinta .pendiente { fill: none; stroke: var(--hilo); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.custodia-leyenda { position: absolute; right: 0; bottom: 0; display: flex; gap: var(--e-5); align-items: center; font-size: .8125rem; color: var(--tinta-3); font-weight: 600; }
.custodia-leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.custodia-leyenda b { display: inline-block; width: 26px; height: 4px; border-radius: 4px; background: var(--cinta); }
.custodia-leyenda b.p { height: 0; border-top: 2.5px dotted var(--hilo); background: none; }

.pliegues { position: absolute; inset: 0; list-style: none; }
.pliegue { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -11px); }
.pliegue.arriba { transform: translate(-50%, calc(-100% + 11px)); }
.pliegue.ancla-izq { transform: translate(-11px, -11px); }
.pliegue.ancla-izq.arriba { transform: translate(-11px, calc(-100% + 11px)); }
.pliegue.ancla-izq .pliegue-boton { justify-items: start; }
.pliegue-boton {
  display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--tinta);
  -webkit-tap-highlight-color: transparent;
}
.pliegue-punto { width: 22px; height: 22px; border-radius: 50%; background: var(--papel); border: 3px solid var(--cinta); box-shadow: 0 0 0 5px var(--niebla); transition: transform 180ms var(--sal); }
.pliegue.pend .pliegue-punto { border-color: var(--hilo); border-style: dashed; }
.pliegue-etiqueta {
  position: relative; display: grid; gap: 2px; min-width: 168px; padding: 10px 14px; border-radius: var(--r-m); background: var(--papel); border: 1px solid var(--linea);
  box-shadow: var(--sombra-1); text-align: left; transition: transform 200ms var(--sal), box-shadow 200ms ease, border-color 200ms ease;
}
.pliegue-etiqueta .cifra { font-size: .8125rem; color: var(--tinta-3); }
.pliegue-etiqueta strong { font-size: .9375rem; font-weight: 650; }
.pliegue-etiqueta > span:nth-child(3) { font-size: .875rem; color: var(--tinta-2); }
.pliegue.arriba .pliegue-boton { grid-auto-flow: row; }
.pliegue.arriba .pliegue-etiqueta { order: -1; }
@media (hover: hover) and (pointer: fine) {
  .pliegue-boton:hover .pliegue-etiqueta { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--linea-fuerte); }
  .pliegue-boton:hover .pliegue-punto { transform: scale(1.12); }
}
.pliegue-boton[aria-expanded="true"] .pliegue-etiqueta { border-color: var(--cinta); }
.pliegue-final .pliegue-etiqueta { min-width: 210px; background: var(--tinta); color: #fff; border-color: var(--tinta); }
.pliegue-final .pliegue-etiqueta .cifra, .pliegue-final .pliegue-etiqueta > span:nth-child(3) { color: var(--sobre-pizarra-2); }
.pliegue-final .pliegue-etiqueta .valor { font-family: var(--f-registro); font-size: 2.1rem; line-height: 1.05; color: #fff; }

.evidencia {
  position: absolute; z-index: 5; width: min(340px, calc(100vw - 32px)); padding: 16px 18px; border-radius: var(--r-m);
  background: var(--papel-alto); border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra-2); font-size: .9375rem; color: var(--tinta-2);
  transform-origin: var(--origen, top center); opacity: 0; transform: scale(.97) translateY(4px); pointer-events: none;
  visibility: hidden; transition: opacity 160ms ease, transform 200ms var(--sal), visibility 0s linear 200ms;
}
.evidencia.abierta { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
/* Muesca que apunta al punto del pliegue (--muesca la fija sitgp.js) */
.evidencia::before {
  content: ""; position: absolute; top: -7px; left: var(--muesca, 50%); width: 12px; height: 12px; margin-left: -6px;
  background: var(--papel-alto); border-top: 1px solid var(--linea-fuerte); border-left: 1px solid var(--linea-fuerte);
  border-top-left-radius: 3px; transform: rotate(45deg);
}
.evidencia-cerrar { display: none; }
.evidencia-titulo { display: block; font-family: var(--f-texto); font-size: 1rem; font-weight: 700; color: var(--tinta); margin-bottom: 6px; }
.evidencia dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; font-size: .875rem; }
.evidencia dt { color: var(--tinta-3); }
.evidencia dd { margin: 0; color: var(--tinta); }

.demo-rotulo { position: absolute; right: 0; bottom: 34px; }
.custodia-pista { position: absolute; left: 0; bottom: 0; font-size: .8125rem; font-weight: 600; color: var(--tinta-3); }
.pliegue-final .pliegue-etiqueta .meta-linea { font-size: .8125rem; font-weight: 650; color: var(--sobre-pizarra); margin-top: 2px; }

/* Dibujo de la cinta al cargar (solo con movimiento permitido).
   El script mide el largo del trazo en pantalla (--largo); el estado oculto
   solo aplica mientras la custodia no está «dibujada». */
.custodia[data-dibujar] .tramo { stroke-dasharray: var(--largo, none); stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--curso); }
.custodia.fija .tramo { stroke-dasharray: none; }
.custodia[data-dibujar] .tramo-brillo, .custodia[data-dibujar] .pendiente { transition: opacity 500ms ease 1300ms; }
.custodia[data-dibujar] .pliegue { transition: opacity 360ms ease var(--retraso, 0ms), translate 420ms var(--sal) var(--retraso, 0ms); }
.js .custodia[data-dibujar]:not(.dibujada) .tramo { stroke-dashoffset: var(--largo, 0); }
.js .custodia[data-dibujar]:not(.dibujada) .tramo-brillo, .js .custodia[data-dibujar]:not(.dibujada) .pendiente { opacity: 0; }
.js .custodia[data-dibujar]:not(.dibujada) .pliegue { opacity: 0; translate: 0 6px; }

/* Secciones de la portada */
.seccion { padding-block: clamp(64px, 11vh, 120px); }
.seccion-cabeza { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e-7); align-items: end; margin-bottom: clamp(32px, 6vh, 64px); }
.seccion-cabeza p { color: var(--tinta-2); max-width: 46ch; }

.mes { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); counter-reset: tramo; }
.mes::before { content: ""; position: absolute; left: 11px; right: calc((100% - 3 * var(--e-6)) / 4 - 12px); top: 10px; height: 4px; border-radius: 4px; background: var(--cinta); }
.mes li { position: relative; padding-top: 52px; counter-increment: tramo; }
.mes li::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--papel); border: 3px solid var(--cinta); box-shadow: 0 0 0 5px var(--niebla); }
.mes .cuando { position: absolute; left: 34px; top: 0; padding: 0 10px; background: var(--niebla); font-size: .875rem; color: var(--tinta-3); line-height: 24px; }
.mes li:last-child .cuando { left: 34px; }
.mes h3 { font-family: var(--f-registro); font-weight: 400; font-size: 1.75rem; line-height: 1.1; margin: 0 0 10px; }
.mes p { color: var(--tinta-2); font-size: 1rem; }
.mes .quien { margin-top: 14px; display: inline-flex; }

.registro-tabla { border-top: 1.5px solid var(--tinta); }
.registro-fila { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4.5fr) minmax(0, 5.5fr); gap: var(--e-6); align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--linea-fuerte); }
.registro-fila h3 { font-family: var(--f-registro); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + .6vw, 1.85rem); line-height: 1.12; }
.registro-fila p { color: var(--tinta-2); }
.registro-fila .rotulo { justify-self: end; white-space: nowrap; }

.cierre { padding-block: 0 clamp(64px, 12vh, 128px); }
/* Cierre en pizarra: la cinta baja desde la pestaña, llega a un pliegue pendiente y sigue hacia el botón */
.cierre .ficha {
  --cierre-pad: clamp(32px, 5vw, 64px); --cierre-x: clamp(24px, 8vw, 120px);
  padding: var(--cierre-pad); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-6); align-items: center; position: relative; overflow: hidden;
  background: var(--pizarra); border-color: var(--pizarra-2); color: var(--sobre-pizarra);
}
.cierre .ficha :focus-visible { outline-color: var(--sobre-pizarra); }
.cierre p { color: var(--sobre-pizarra-2); margin-top: 12px; max-width: 52ch; }
.cierre-camino {
  position: relative; align-self: stretch; margin: calc(-1 * var(--cierre-pad)) var(--cierre-x) calc(-1 * var(--cierre-pad)) 0;
  padding: 0 0 var(--cierre-pad); display: flex; flex-direction: column; align-items: flex-start;
}
.cierre-camino::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 46px; background: var(--cinta); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.cierre-hilo { display: block; width: 5px; height: clamp(48px, 9vh, 80px); margin: 37px 0 0 8.5px; border-radius: 5px; background: var(--cinta); transform-origin: top; }
.cierre-paso { display: flex; align-items: center; gap: var(--e-3); }
.cierre-punto { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 3px dashed #6F7B87; background: var(--pizarra); box-sizing: border-box; }
.cierre-etiqueta { font-size: .9375rem; color: var(--sobre-pizarra-2); white-space: nowrap; }
.cierre-etiqueta .cifra { color: var(--sobre-pizarra); font-weight: 600; }
.cierre-hilo-pend { display: block; height: 28px; margin-left: 10px; border-left: 2.5px dotted #6F7B87; }

.pie { padding-block: var(--e-7); border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: .9375rem; }
.pie .envoltura { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); }

/* =====================================================================
   ENTRADA (A): inicio de sesión y segundo factor
   ===================================================================== */
.entrada { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.entrada-formulario { display: grid; grid-template-rows: auto 1fr auto; padding: clamp(24px, 4vw, 56px) clamp(16px, 6vw, 96px); }
.entrada-centro { align-self: center; width: min(100%, 440px); padding-block: var(--e-7); }
.entrada-centro h1 { font-family: var(--f-registro); font-weight: 400; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1.02; }
.entrada-centro .entrada-sub { color: var(--tinta-2); margin-top: 12px; }
.formulario { display: grid; gap: var(--e-5); margin-top: var(--e-6); }
.formulario .pie-formulario { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--e-3); }
.entrada-pie { font-size: .875rem; color: var(--tinta-3); display: flex; gap: var(--e-4); flex-wrap: wrap; }

.entrada-panel { position: relative; background: var(--pizarra); color: var(--sobre-pizarra); border-radius: var(--r-xl) 0 0 var(--r-xl); padding: clamp(32px, 5vw, 72px); display: grid; align-content: center; overflow: hidden; }
.entrada-panel .t-2 { color: #fff; max-width: 14ch; }
.entrada-panel p { color: var(--sobre-pizarra-2); max-width: 40ch; margin-top: 16px; }
.pasos-acceso { list-style: none; position: relative; margin-top: var(--e-7); display: grid; gap: var(--e-6); }
.pasos-acceso::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 0; border-left: 2.5px dotted #6F7B87; }
.pasos-acceso li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 18px; align-items: start; }
.pasos-acceso .punto { width: 24px; height: 24px; border-radius: 50%; border: 2.5px dashed #6F7B87; background: var(--pizarra); position: relative; z-index: 1; }
.pasos-acceso li.hecho .punto { border: 3px solid var(--cinta); background: var(--cinta); }
.pasos-acceso li.actual .punto { border: 3px solid var(--cinta); background: var(--pizarra); box-shadow: 0 0 0 6px rgba(179, 49, 43, .25); }
.pasos-acceso li.hecho::after { content: ""; position: absolute; left: 10px; top: 24px; width: 4px; height: calc(100% + var(--e-6) - 24px); background: var(--cinta); border-radius: 4px; }
.pasos-acceso strong { display: block; color: #fff; font-weight: 650; }
.pasos-acceso span { color: var(--sobre-pizarra-2); font-size: .9375rem; }
.pasos-acceso li:not(.hecho):not(.actual) strong { color: var(--sobre-pizarra-2); }

.qr-ficha { display: grid; grid-template-columns: 168px 1fr; gap: var(--e-5); align-items: center; padding: var(--e-4); border-radius: var(--r-m); background: var(--papel-alto); border: 1px solid var(--linea); }
.qr-ficha img { width: 168px; height: 168px; border-radius: var(--r-s); background: #fff; padding: 8px; }
.secreto { font-family: var(--f-cifra); font-size: .875rem; word-break: break-all; background: var(--niebla); padding: 8px 10px; border-radius: var(--r-s); color: var(--tinta); user-select: all; }
.codigos-recuperacion { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; padding: var(--e-4) var(--e-5); border-radius: var(--r-m); background: var(--papel-alto); border: 1px solid var(--linea); font-family: var(--f-cifra); font-size: 1rem; letter-spacing: .04em; color: var(--tinta); user-select: all; }
.acciones-recuperacion { display: grid; gap: var(--e-3); justify-items: center; }

/* Formularios genéricos de la librería de cuentas */
.formulario-generico form { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.formulario-generico form p { display: grid; gap: 6px; }
.formulario-generico label { font-weight: 650; font-size: .9375rem; }
.formulario-generico button { justify-self: start; }
.formulario-generico button, .formulario-generico .button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--r-m); border: 0; background: var(--cinta); color: #fff; font-weight: 650; cursor: pointer; transition: transform 160ms var(--sal), background-color 180ms ease; }
.formulario-generico button:hover { background: var(--cinta-honda); }
.formulario-generico button:active { transform: scale(.97); }
.formulario-generico ul.errorlist { list-style: none; color: var(--cinta-honda); font-weight: 600; font-size: .9375rem; }
.formulario-generico h1 { font-family: var(--f-registro); font-weight: 400; font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem); line-height: 1.05; }
.formulario-generico h2 { font-family: var(--f-registro); font-weight: 400; font-size: 1.5rem; margin-top: var(--e-6); }
.formulario-generico p { color: var(--tinta-2); }

/* =====================================================================
   Privacidad (M-14): autorización de datos y política pública
   ===================================================================== */
.privacidad-aviso { display: grid; gap: var(--e-3); margin-top: var(--e-6); padding: var(--e-5); border-radius: var(--r-m); background: var(--papel-alto); border: 1px solid var(--linea); color: var(--tinta-2); font-size: .9375rem; }
.privacidad-aviso h2 { font-family: var(--f-registro); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--tinta); }
.privacidad-casilla { display: grid; gap: 6px; }
.privacidad-casilla .cuenta-casilla { font-weight: 500; font-size: .9375rem; }
.politica { width: min(100% - 2 * var(--borde-lateral), 70ch); margin-inline: auto; padding-block: clamp(24px, 4vw, 56px) var(--e-9); }
.politica h1 { font-family: var(--f-registro); font-weight: 400; font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem); line-height: 1.05; margin-top: var(--e-7); }
.politica h2 { font-family: var(--f-registro); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); line-height: 1.12; }
.politica-version { margin-top: var(--e-3); color: var(--tinta-3); font-size: .9375rem; }
.politica section, .politica-indice { display: grid; gap: var(--e-3); margin-top: var(--e-7); }
.politica-indice { padding: var(--e-5); border-radius: var(--r-l); background: var(--papel); border: 1px solid var(--linea); }
.politica-indice h2 { font-size: 1.25rem; }
.politica ul, .politica ol { display: grid; gap: var(--e-2); padding-left: 1.4em; }
.politica p, .politica li { color: var(--tinta-2); }
.politica strong { color: var(--tinta); }
.politica a, .privacidad-aviso a { overflow-wrap: anywhere; }
.politica section { scroll-margin-top: var(--e-5); }

/* =====================================================================
   APLICACIÓN (C): espacios e inicio del cliente
   ===================================================================== */
.app-cabecera { position: sticky; top: 0; z-index: 10; background: rgba(222, 228, 231, .86); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--linea); }
.app-cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 68px; }
.app-cabecera nav { display: flex; align-items: center; gap: var(--e-2); }
.migas { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta-3); font-size: .9375rem; }
.migas a { text-decoration: none; }
.usuario { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px 0 4px; border-radius: var(--r-pastilla); font-size: .9375rem; color: var(--tinta-2); text-decoration: none; transition: background-color 160ms ease; }
.usuario:hover { background: rgba(28, 36, 48, .06); color: var(--tinta); }
.usuario .inicial { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; font-weight: 700; font-size: .875rem; }
.app-principal { padding-block: clamp(32px, 6vh, 64px) var(--e-9); }
.app-saludo { display: flex; justify-content: space-between; align-items: end; gap: var(--e-5); flex-wrap: wrap; margin-bottom: clamp(28px, 5vh, 48px); }
.app-saludo p { color: var(--tinta-2); margin-top: 8px; }

/* Mi cuenta (M-03) */
.cuenta { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--e-5); }
.cuenta-ficha { display: grid; gap: var(--e-3); align-content: start; padding: clamp(24px, 3vw, 32px); }
.cuenta-ficha p { color: var(--tinta-2); }
.cuenta-ficha .boton { justify-self: start; margin-top: var(--e-2); }
.cuenta-formulario { max-width: 440px; margin-top: 0; }
.cuenta-avisos { display: grid; gap: var(--e-3); }
.cuenta-casilla { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--e-3); align-items: start; min-height: var(--alto-control); color: var(--tinta); font-weight: 600; cursor: pointer; }
.cuenta-casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cinta); cursor: pointer; }
.cuenta-actividad, .cuenta-datos { display: grid; gap: var(--e-3); padding: clamp(24px, 3vw, 32px); margin-top: var(--e-5); }
.cuenta-datos p { color: var(--tinta-2); max-width: 70ch; }
.cuenta-datos a { overflow-wrap: anywhere; }

.espacios { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--e-5); }
.espacio { position: relative; padding: 28px 28px 24px; display: grid; gap: var(--e-5); transition: transform 200ms var(--sal), box-shadow 200ms ease, border-color 200ms ease; }
.espacio::before { content: ""; position: absolute; left: 28px; top: -1px; width: 18px; height: 34px; background: var(--color-cliente, var(--cinta)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
@media (hover: hover) and (pointer: fine) { .espacio:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--linea-fuerte); } }
.espacio-cabeza { padding-top: 22px; display: flex; justify-content: space-between; gap: var(--e-4); align-items: start; }
.espacio-cabeza p { color: var(--tinta-3); font-size: .9375rem; margin-top: 4px; }
.mini-cinta { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; padding-top: 4px; }
.mini-cinta::before { content: ""; position: absolute; left: 7px; right: calc(20% - 7px); top: 10px; border-top: 2.5px dotted var(--hilo); }
.mini-cinta li { position: relative; display: grid; font-size: 0; }
.mini-cinta li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px dashed var(--hilo); background: var(--papel); position: relative; z-index: 1; }
.mini-cinta li.hecho::before { border: 2px solid var(--cinta); background: var(--cinta); }
.mini-cinta li.actual::before { border: 2.5px solid var(--cinta); box-shadow: 0 0 0 4px var(--cinta-velo); }
.mini-cinta li.hecho::after { content: ""; position: absolute; left: 7px; width: 100%; top: 5px; height: 4px; border-radius: 4px; background: var(--cinta); }
.mini-cinta li.hecho:last-child::after { display: none; }
.espacio-pie { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); flex-wrap: wrap; padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.espacio-pie .cifra { font-size: .8125rem; color: var(--tinta-3); }

.cliente-titulo { display: flex; gap: var(--e-4); align-items: center; }
.cliente-titulo .bandera { width: 22px; height: 40px; background: var(--color-cliente, var(--cinta)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); flex: none; }
.tablero-cliente { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--e-5); }
.tablero-cliente .ficha { padding: 24px 26px; display: grid; gap: 10px; align-content: start; }
.tablero-cliente .ficha .valor { font-family: var(--f-registro); font-size: 2.6rem; line-height: 1; }
.lista-mensajes { list-style: none; display: grid; gap: var(--e-2); margin-bottom: var(--e-5); }

/* =====================================================================
   Adaptación
   ===================================================================== */
@media (max-width: 1100px) {
  .portada-bajada { grid-template-columns: 1fr; }
  .portada-hechos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seccion-cabeza { grid-template-columns: 1fr; gap: var(--e-4); }
  .mes { grid-template-columns: 1fr; row-gap: var(--e-7); max-width: 720px; }
  .mes::before { left: 10px; right: auto; top: 12px; bottom: 12px; width: 4px; height: auto; }
  .mes li { padding: 0 0 0 52px; display: flex; flex-direction: column; align-items: flex-start; }
  .mes li::before { top: 4px; }
  .mes h3 { order: 1; }
  .mes p { order: 2; }
  .mes .cuando { order: 3; position: static; display: block; padding: 0; background: none; margin-top: 10px; line-height: 1.4; }
  .mes .quien { order: 4; margin-top: 10px; }
}
@media (max-width: 1100px) {
  /* La cinta se desenrolla en vertical, a todo el ancho */
  .custodia-lienzo { height: auto; padding-left: 44px; }
  .custodia-lienzo svg.cinta { display: none; }
  .custodia-lienzo::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 60px; width: 5px; border-radius: 5px; background: var(--cinta); }
  .custodia-lienzo::after { content: ""; position: absolute; left: 14px; bottom: 18px; height: 42px; border-left: 2.5px dotted var(--hilo); }
  .pliegues { position: static; display: grid; gap: var(--e-4); padding-top: 34px; }
  .pliegue, .pliegue.arriba, .pliegue.ancla-izq, .pliegue.ancla-izq.arriba { position: relative; left: auto; top: auto; transform: none; }
  .pliegue-boton { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 14px; width: 100%; margin-left: -44px; }
  .pliegue.arriba .pliegue-etiqueta { order: 0; }
  .pliegue-etiqueta { width: 100%; min-width: 0; }
  .custodia-leyenda { position: static; margin-bottom: 8px; flex-wrap: wrap; gap: var(--e-3); }
  .demo-rotulo { position: static; display: inline-flex; margin-top: 8px; }
  .evidencia::before { display: none; }
  .evidencia-cerrar { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin-top: 12px; padding: 0 18px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-m); background: transparent; color: var(--tinta); font-weight: 650; cursor: pointer; }
  .custodia-pista { position: static; margin-bottom: 8px; }
  .evidencia { position: fixed; left: 16px !important; right: 16px; bottom: 16px !important; top: auto !important; width: auto; transform-origin: bottom center; }
  .cola-pendiente { position: static; display: block; margin: 8px 0 0 -44px; padding-left: 48px; }
  .sello-pliegue, .sello-pliegue.abajo, .sello-pliegue.sello-rojo { left: auto; right: 12px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(-8deg); width: 74px; height: 74px; }
  .pliegue-etiqueta:has(.sello-pliegue) { padding-right: 92px; }
}
@media (max-width: 900px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada-panel { border-radius: var(--r-xl) var(--r-xl) 0 0; order: 2; }
  .registro-fila { grid-template-columns: 1fr; gap: var(--e-2); }
  .cierre .ficha { grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--e-4); row-gap: 0; padding-left: var(--cierre-x); align-items: start; }
  .cierre .ficha::after { content: ""; position: absolute; left: var(--cierre-x); top: -2px; width: 22px; height: 46px; background: var(--cinta); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
  .cierre-camino { display: contents; }
  .cierre-camino::before { display: none; }
  .cierre-texto { grid-column: 2; grid-row: 1; padding-bottom: var(--e-6); }
  .cierre-hilo { grid-column: 1; grid-row: 1; width: 5px; height: auto; margin: calc(37px - var(--cierre-pad)) 0 0; justify-self: center; align-self: stretch; }
  .cierre-paso { display: contents; }
  .cierre-punto { grid-column: 1; grid-row: 2; }
  .cierre-etiqueta { grid-column: 2; grid-row: 2; align-self: center; white-space: normal; }
  .cierre-hilo-pend { grid-column: 1; grid-row: 3; height: auto; margin: 0; justify-self: center; align-self: stretch; }
  .cierre-camino .boton { grid-column: 2; grid-row: 3; justify-self: start; margin-top: var(--e-4); }
}
@media (max-width: 760px) {
  .portada-hechos { grid-template-columns: 1fr; }
  .portada-cabecera .boton-enlace { display: none; }
  .registro-fila .rotulo { justify-self: start; }
  .portada-acciones .boton { flex: 1 1 100%; }
  .qr-ficha { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .app-cabecera .solo-ancho { display: none; }
  .app-cabecera nav { gap: 0; }
  .app-cabecera .marca span { display: none; }
  .migas { min-width: 0; }
  .migas a:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* Ventana de aviso y confirmación (alerta de otro mes y confirmar.js), en todas las páginas */
.alerta { width: min(560px, calc(100vw - 32px)); padding: 28px 28px 24px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-l); background: var(--papel-alto); color: var(--tinta); box-shadow: var(--sombra-2); }
.alerta[open] { display: grid; gap: var(--e-4); animation: alerta-entra 220ms var(--sal); }
.alerta::backdrop { background: rgba(28, 36, 48, .42); animation: velo-entra 220ms ease-out; }
.alerta-cabeza { display: flex; align-items: center; gap: 12px; color: var(--alerta); }
.alerta-cabeza svg { width: 26px; height: 26px; flex: none; }
.alerta-cabeza h2 { font-family: var(--f-registro); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); line-height: 1.1; color: var(--tinta); }
.alerta p { color: var(--tinta-2); }
.alerta .tabla-marco { max-height: 240px; overflow: auto; }
.alerta .tabla td.cifra { white-space: nowrap; }
.alerta-cuenta { font-variant-numeric: tabular-nums; }
@keyframes alerta-entra { from { opacity: 0; transform: scale(.97) translateY(6px); } }
@keyframes velo-entra { from { opacity: 0; } }
.alerta .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
@media (prefers-reduced-motion: reduce) { .alerta[open], .alerta::backdrop { animation: none; } }

/* Desplegables con bordes redondeados (D-31) donde el navegador permite dar estilo a la lista */
@supports (appearance: base-select) {
  select { appearance: base-select; display: inline-flex; align-items: center; gap: 8px; }
  select::picker(select) {
    appearance: base-select; border: 1px solid var(--linea-fuerte); border-radius: var(--r-m);
    background: var(--papel-alto); box-shadow: var(--sombra-2); padding: 6px; margin-block: 4px;
  }
  select option { border-radius: var(--r-s); padding: 8px 12px; min-height: 40px; }
  select option:hover, select option:focus-visible { background: rgba(28, 36, 48, .06); }
  select option:checked { background: rgba(28, 36, 48, .10); font-weight: 650; }
  select option::checkmark { display: none; }
  select::picker-icon {
    content: ""; width: 7px; height: 7px; margin-inline-start: auto; border-right: 2px solid var(--tinta-2);
    border-bottom: 2px solid var(--tinta-2); transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms var(--sal);
  }
  select:open::picker-icon { transform: translateY(2px) rotate(225deg); }
}
@media (prefers-reduced-motion: reduce) { select::picker-icon { transition: none; } }

/* Aparición suave al bajar con el scroll (portada). Sin soporte o con «reducir movimiento», todo queda como está. */
@keyframes aparecer { from { opacity: 0; translate: 0 18px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mes li, .registro-fila, .cierre .ficha {
      animation: aparecer linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @media (max-width: 1100px) {
      .custodia .pliegue {
        animation: aparecer linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }
    }
  }
}

/* --- Portada: movimiento con sentido (una sola vez, nada en bucle) ----------
   Con «reducir movimiento» o sin soporte, todo queda en su estado final. */
@keyframes estampar { from { opacity: 0; scale: 1.18; rotate: -6deg; } 30% { opacity: 1; } }
@keyframes anillo { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
@keyframes trazar { from { transform: scaleY(0); } }
@keyframes surge { from { opacity: 0; scale: .6; } }
@keyframes cabecera-gana {
  to { background-color: rgba(222, 228, 231, .86); border-bottom-color: var(--linea); backdrop-filter: saturate(1.2) blur(10px); }
}
.pliegue:first-child .pliegue-punto { position: relative; }
.pliegue:first-child .pliegue-punto::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--cinta); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .origen path { transition: stroke-dashoffset 520ms var(--sal); }
  .js .portada-inicio:not(.cinta-lista) .origen path { stroke-dashoffset: 1; }
  .portada-inicio.cinta-lista .pliegue:first-child .pliegue-punto::after { animation: anillo 800ms var(--sal) 1 both; }
  .custodia-pista { transition: opacity 400ms ease 300ms; }
  .js .portada-inicio:not(.cinta-lista) .custodia-pista { opacity: 0; }
  .custodia.dibujada .sello { animation: estampar 180ms var(--sal) calc(var(--retraso, 0ms) + 340ms) 1 both; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cierre-hilo { animation: trazar linear both; animation-timeline: view(); animation-range: entry 30% entry 90%; }
    .cierre-punto { animation: surge linear both; animation-timeline: view(); animation-range: entry 70% entry 100%; }
    @media (max-width: 1100px) {
      .custodia.dibujada .sello { animation: estampar linear both; animation-timeline: view(); animation-range: entry 30% entry 70%; }
    }
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .portada-cabecera {
      background-color: transparent; border-bottom-color: transparent; backdrop-filter: none;
      animation: cabecera-gana linear both; animation-timeline: scroll(root); animation-range: 0px 120px;
    }
  }
}

/* =====================================================================
   Portada (2/2): «Un mes de trabajo» como relato y demostraciones de constancia
   Base sin JS: cada tramo trae su pantalla de demostración debajo del texto, en su estado final.
   portada.js agrega: portada-anima (estados iniciales de las animaciones, solo con movimiento permitido),
   relato-vivo (escritorio: pantalla fija a la derecha) y huella-viva (campo de la demostración).
   ===================================================================== */
.relato-escena { display: none; }

/* Pantalla de demostración: ficha de papel con el aspecto del portal */
.pantalla { display: grid; grid-template-rows: auto 1fr; min-height: 340px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra-2); overflow: hidden; text-align: left; }
.mes li > .pantalla { order: 5; width: 100%; margin-top: var(--e-5); }
.pantalla-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px var(--e-3); padding: 12px 16px; background: var(--papel-alto); border-bottom: 1px solid var(--linea); }
.pantalla-ruta { font-weight: 650; font-size: .9375rem; color: var(--tinta); }
.pantalla-cuerpo { display: grid; align-content: start; gap: var(--e-4); padding: var(--e-5) clamp(16px, 3vw, 28px); }
.pantalla .pantalla-org { font-size: .875rem; color: var(--tinta-3); }
.pantalla .sub { display: block; font-size: .8125rem; color: var(--tinta-3); }
.pantalla strong { font-size: .9375rem; font-weight: 650; color: var(--tinta); overflow-wrap: anywhere; }
.pantalla .resultado { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .9375rem; font-weight: 650; color: var(--tinta); }
.pantalla .resultado svg { width: 18px; height: 18px; flex: none; }
.pastilla-ok { border-color: var(--tinta); color: var(--tinta); }
.pastilla-ok i { width: auto; height: auto; border-radius: 0; background: none; font-style: normal; font-weight: 700; line-height: 1; }
.pastilla-ok i::before { content: "\2713"; }
.pantalla .pastilla-alerta { margin-top: 0; }

.reporte { display: grid; gap: var(--e-3); padding: var(--e-4); border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--papel-alto); }
.reporte-fila { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.reporte-fila svg { width: 24px; height: 24px; color: var(--tinta-2); }
.reporte-version { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.barra { height: 8px; border-radius: 8px; background: var(--niebla); overflow: hidden; }
.barra-llena { display: block; height: 100%; border-radius: 8px; background: var(--tinta); transform-origin: left; }
.pantalla .huella-res { font-size: clamp(1.125rem, .9rem + 1vw, 1.6rem); line-height: 1.2; color: var(--tinta); white-space: nowrap; }

.indicadores { display: grid; gap: 8px; }
.indicador { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--papel-alto); }
.indicador.bajo { border-color: var(--alerta); background: var(--alerta-velo); }
.indicador-valor { display: grid; justify-items: end; gap: 6px; }
.valor-ind { font-family: var(--f-registro); font-size: 2rem; line-height: 1; color: var(--tinta); }
.sellos { display: flex; justify-content: center; align-items: center; gap: var(--e-6); padding: var(--e-3) 0 var(--e-2); }
.sellos .sello { width: 84px; height: 84px; font-size: .75rem; letter-spacing: .02em; }

.grafica { position: relative; aspect-ratio: 320 / 150; }
.grafica svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.grafica .eje { fill: none; stroke: var(--linea-fuerte); stroke-width: 1; }
.grafica .meta-trazo { fill: none; stroke: var(--hilo); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.grafica .serie { fill: none; stroke: var(--tinta); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.grafica-meta { position: absolute; left: 0; top: 24.5%; transform: translateY(-125%); font-size: .8125rem; font-weight: 650; color: var(--tinta-3); }
.grafica-punto { position: absolute; left: 91.7%; top: 41.1%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--tinta); }
.grafica-fin { position: absolute; left: 91.7%; top: calc(41.1% + 16px); transform: translateX(-50%); margin-left: 6px; font-size: .875rem; font-weight: 700; color: var(--tinta); white-space: nowrap; }
.grafica-meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); text-align: center; font-size: .8125rem; color: var(--tinta-3); }
.grafica-meses b { color: var(--tinta); }
.informe-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--papel-alto); }
.informe-fila svg { width: 24px; height: 24px; flex: none; color: var(--tinta-2); }
.informe-fila strong { flex: 1; min-width: 0; }

/* Estados iniciales y animaciones de las pantallas (una sola vez por aparición; nada en bucle) */
@keyframes llenar { from { transform: scaleX(0); } }
@keyframes aparece-pantalla { from { opacity: 0; translate: 0 4px; } }
@keyframes trazar-linea { from { stroke-dashoffset: 1; } }
.portada-anima .pantalla:not(.activa) .barra-llena { transform: scaleX(0); }
.portada-anima .pantalla:not(.activa) .tarde, .portada-anima .pantalla:not(.activa) .grafica-fin, .portada-anima .pantalla:not(.activa) .grafica-punto, .portada-anima .pantalla:not(.activa) .sello { opacity: 0; }
.portada-anima .pantalla:not(.activa) .serie { stroke-dashoffset: 1; }
.portada-anima .pantalla.activa .barra-llena { animation: llenar 1100ms var(--curso) both; }
.portada-anima .pantalla.activa .tarde { animation: aparece-pantalla 320ms var(--sal) 1150ms both; }
.portada-anima .pantalla.activa .huella-res ~ .tarde { animation-delay: 700ms; }
.portada-anima .pantalla.activa .sello-a { animation: estampar 180ms var(--sal) 450ms both; }
.portada-anima .pantalla.activa .sello-b { animation: estampar 180ms var(--sal) 1250ms both; }
.portada-anima .pantalla.activa .serie { animation: trazar-linea 900ms var(--curso) both; }
.portada-anima .pantalla.activa .grafica-punto { animation: aparece-pantalla 300ms var(--sal) 800ms both; }
.portada-anima .pantalla.activa .grafica-fin { animation: aparece-pantalla 300ms var(--sal) 800ms both; }

/* Escritorio con JS: dos columnas, tramos altos a la izquierda y una sola pantalla fija a la derecha */
@media (min-width: 1101px) {
  .relato-vivo .relato { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-8); align-items: start; }
  .relato-vivo .mes { --sangria: clamp(112px, 20vh, 200px); display: block; max-width: none; }
  /* Hilo punteado de todo el recorrido y, encima, la cinta roja que avanza hasta el tramo activo */
  .relato-vivo .mes::before { left: 11px; right: auto; top: calc(var(--sangria) + 16px); bottom: calc(68vh - var(--sangria) - 16px); width: 0; height: auto; border-radius: 0; background: none; border-left: 2.5px dotted var(--hilo); }
  .relato-vivo .mes::after { content: ""; position: absolute; left: 10px; top: calc(var(--sangria) + 16px); width: 4px; height: var(--avance, 0px); border-radius: 4px; background: var(--cinta); transition: height 420ms var(--sal); }
  .relato-vivo .mes li { z-index: 1; min-height: 68vh; padding: var(--sangria) 0 0 52px; display: flex; flex-direction: column; align-items: flex-start; animation: none; }
  .relato-vivo .mes li::before { top: calc(var(--sangria) + 4px); border-color: var(--tinta-3); transition: background-color 240ms var(--sal), border-color 240ms var(--sal); }
  .relato-vivo .mes li.hecho::before { border-color: var(--cinta); }
  .relato-vivo .mes li.activo::before { border-color: var(--cinta); background: var(--cinta); }
  .relato-vivo .mes h3 { order: 1; padding-right: 0; color: var(--tinta-3); transition: color 240ms var(--sal); }
  .relato-vivo .mes li.activo h3 { color: var(--tinta); }
  .relato-vivo .mes p { order: 2; }
  .relato-vivo .mes .cuando { order: 3; position: static; display: block; padding: 0; background: none; margin-top: 10px; line-height: 1.4; }
  .relato-vivo .mes .quien { order: 4; margin-top: 10px; }
  .relato-vivo .relato-escena { display: grid; position: sticky; top: max(104px, calc(50svh - 215px)); }
  .relato-escena > .pantalla { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 0 10px; transition: opacity 240ms var(--sal), translate 240ms var(--sal), visibility 0s linear 240ms; }
  .relato-escena > .pantalla.activa { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
}

/* «Cada cifra deja constancia»: banda de papel claro de borde a borde */
.seccion-banda { background: var(--papel); border-block: 1px solid var(--linea); }
.registro-fila-demo { align-items: start; }
.demo-const { display: grid; gap: var(--e-3); min-width: 0; padding: var(--e-4); border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--papel-alto); }
.demo-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px var(--e-3); }

.huella-campo { display: none; gap: 6px; font-size: .875rem; font-weight: 650; color: var(--tinta); }
.huella-viva .huella-campo { display: grid; }
.huella-viva .huella-estatica { display: none; }
.huella-campo input { width: 100%; min-width: 0; min-height: var(--alto-control); padding: 0 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-m); background: var(--papel); font-family: var(--f-cifra); font-size: 1rem; color: var(--tinta); }
@media (max-width: 600px) {
  .huella-campo input { padding: 0 8px; font-family: var(--f-texto); font-size: 1rem; letter-spacing: 0; }
}
.huella-campo input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.huella-estatica { font-size: .875rem; color: var(--tinta-2); overflow-wrap: anywhere; }
.huella { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; margin: 0; font-size: .8125rem; color: var(--tinta); }
.huella span { white-space: nowrap; }
.huella-estado { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-s); font-size: .9375rem; font-weight: 650; transition: background-color 160ms ease, color 160ms ease; }
.huella-estado svg { width: 18px; height: 18px; flex: none; }
.huella-estado .i-error { display: none; }
.huella-estado[data-estado="ok"] { background: rgba(28, 36, 48, .06); color: var(--tinta-2); }
.huella-estado[data-estado="error"] { background: var(--cinta-velo); color: var(--cinta-honda); }
.huella-estado[data-estado="error"] .i-ok { display: none; }
.huella-estado[data-estado="error"] .i-error { display: block; }

.demo-versiones { position: relative; height: 136px; }
.ficha-version { position: absolute; display: grid; gap: 2px; width: calc(100% - 40px); height: 64px; padding: 10px 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-m); background: var(--papel); font-size: .8125rem; color: var(--tinta-2); transition: opacity 320ms var(--sal), translate 520ms var(--sal); }
.ficha-version strong { font-size: .875rem; color: var(--tinta); }
.ficha-v1 { left: 0; top: 0; }
.ficha-v2 { left: 40px; top: 72px; border-color: var(--tinta); background: var(--papel-alto); box-shadow: var(--sombra-2); }
.portada-anima .demo-versiones:not(.visto) .ficha-v2 { opacity: 0; translate: 36px 0; }

.demo-bitacora ol { list-style: none; display: grid; overflow: hidden; }
.bit-linea { display: grid; grid-template-columns: 4.5em auto minmax(0, 1fr); gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid var(--linea); font-family: var(--f-cifra); font-size: .8125rem; color: var(--tinta-2); transition: opacity 320ms var(--sal) 200ms, translate 420ms var(--sal) 200ms; }
.bit-linea:last-child { border-bottom: 0; }
.bit-linea span:last-child { overflow-wrap: anywhere; color: var(--tinta); }
.portada-anima .demo-bitacora:not(.visto) .bit-nueva { opacity: 0; translate: 0 100%; }

@media (max-width: 1100px) {
  .registro-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .registro-fila > .demo-const, .registro-fila > .rotulo { grid-column: 1 / -1; }
  .registro-fila .rotulo { justify-self: start; }
}
@media (max-width: 900px) {
  .registro-fila { grid-template-columns: 1fr; }
}