/* PORTADA-CAMPOS-ANIM-1 · la tarjeta derecha de la ilustración «Fill in before signing» (`svg#campos-escena-e`) se completa en orden, UNA vez, al entrar en pantalla:
   0,2–1,3 s se tipea «$ 1,250» · 1,6–2,5 s se tipea «03 / 04» · 2,9–4,0 s se dibuja la firma (garabato y tilde) · 4,4–4,9 s se estampa el sello (rebote y un pulso del anillo) ·
   a los 5,3 s está el estado final, que es EXACTAMENTE el dibujo de hoy. Sin bucle. La tarjeta izquierda y la flecha no llevan ninguna regla de acá.
   Ningún color escrito a mano: sólo `var(--sf-*)` (el fondo del campo cargado, #FFF7E6, es el del dibujo y no se vuelve a escribir: la animación parte de `--sf-paper` y
   llega al valor del propio dibujo). Sólo se anima fill, opacidad, transform, clip-path y stroke-dashoffset.

   El ESTADO BASE (sin atributo) es el final: sin JS, apagado el interruptor «Animations» del pie o con `prefers-reduced-motion`, el SVG se ve entero desde el primer cuadro.
   `portada-anim.js` (que escucha `sf:animaciones` de `animaciones.js`) pone en el SVG `data-animar="espera"` (la tarjeta vacía, con el cursor, mientras la sección no está a la vista)
   y `data-animar="corre"` (la secuencia) al entrar en pantalla (≥ 40 %). Salir de pantalla vuelve a `espera`, y volver a entrar repite la secuencia. */

/* ── espera: la tarjeta vacía (y, con `corre`, lo que todavía no empezó: las animaciones no rellenan hacia atrás, porque `steps(7,start)` saltaría al primer carácter en la demora) ── */
#campos-escena-e[data-animar="espera"] .pc-campo{fill:var(--sf-paper)}
#campos-escena-e[data-animar] .pc-texto{clip-path:inset(0 100% 0 0)}
#campos-escena-e[data-animar] .pc-trazo{stroke-dasharray:1 2;stroke-dashoffset:1}
#campos-escena-e[data-animar] .pc-sello{opacity:0}
#campos-escena-e[data-animar] .pc-cursor-importe{opacity:1}

/* el cursor sólo existe mientras se anima: en el estado final (la base) no se ve */
#campos-escena-e .pc-cursor{opacity:0;fill:var(--sf-ink)}
#campos-escena-e .pc-sello,#campos-escena-e .pc-anillo{transform-box:fill-box;transform-origin:center}

/* ── corre: la secuencia (t en segundos desde que la sección entra en pantalla) ── */
#campos-escena-e[data-animar="corre"] .pc-campo-importe{animation:pc-llenar .01s steps(1,end) 0s both}
#campos-escena-e[data-animar="corre"] .pc-campo-fecha{animation:pc-llenar .01s steps(1,end) 1.6s both}
#campos-escena-e[data-animar="corre"] .pc-texto-importe{animation:pc-tipear 1.1s steps(7,start) .2s forwards}
#campos-escena-e[data-animar="corre"] .pc-texto-fecha{animation:pc-tipear .9s steps(7,start) 1.6s forwards}
/* el cursor: parpadea a 1 Hz (medio segundo prendido, medio apagado), avanza un paso por carácter y se va; pasa de un campo al otro */
#campos-escena-e[data-animar="corre"] .pc-cursor-importe{animation:pc-parpadeo-importe 1.5s step-end 0s forwards,pc-avanza-importe 1.1s steps(7,start) .2s forwards}
#campos-escena-e[data-animar="corre"] .pc-cursor-fecha{animation:pc-parpadeo-fecha 1s step-end 1.6s forwards,pc-avanza-fecha .9s steps(7,start) 1.6s forwards}
/* la firma: primero el garabato (0,7 s), después la tilde (0,4 s) */
#campos-escena-e[data-animar="corre"] .pc-trazo-garabato{animation:pc-dibujar .7s ease-out 2.9s forwards}
#campos-escena-e[data-animar="corre"] .pc-trazo-tilde{animation:pc-dibujar .4s ease-out 3.6s forwards}
/* el sello: cae a escala 1 con un rebote chico; el anillo punteado interior hace UN pulso */
#campos-escena-e[data-animar="corre"] .pc-sello{animation:pc-estampar .25s cubic-bezier(.2,.9,.3,1.2) 4.4s forwards}
#campos-escena-e[data-animar="corre"] .pc-anillo{animation:pc-pulso .4s ease-in-out 4.9s forwards}

/* `from` sin `to`: la animación llega sola al valor del propio dibujo (el fondo del campo cargado, el trazo entero, el sello a escala 1) */
@keyframes pc-llenar{from{fill:var(--sf-paper)}}
@keyframes pc-tipear{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pc-parpadeo-importe{0%{opacity:1}33.34%{opacity:0}66.67%{opacity:1}100%{opacity:0}}
@keyframes pc-parpadeo-fecha{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
@keyframes pc-avanza-importe{from{transform:translateX(0)}to{transform:translateX(52px)}}
@keyframes pc-avanza-fecha{from{transform:translateX(0)}to{transform:translateX(47px)}}
@keyframes pc-dibujar{from{stroke-dasharray:1 2;stroke-dashoffset:1}to{stroke-dasharray:1 2;stroke-dashoffset:0}}
@keyframes pc-estampar{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:scale(1)}}
@keyframes pc-pulso{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ── sin movimiento: el estado final, sin ninguna animación ──
   Lo apaga el interruptor «Animations» del pie (`data-animaciones="off"` en <html>) o lo pide el sistema (`prefers-reduced-motion`) sin que se haya elegido encender.
   El script no pone `data-animar` en esos casos; estas reglas lo garantizan aunque alguien lo ponga. */
html[data-animaciones="off"] #campos-escena-e *{animation:none!important}
@media (prefers-reduced-motion:reduce){
  html:not([data-animaciones="on"]) #campos-escena-e *{animation:none!important}
}