/* decreto-1419-torre.css — La torre de oro del artículo del Decreto 1419 (EN / ES / FR).
 * Dos modos con el MISMO HTML, como el hilo de Servicios:
 *  - Base (sin .vivo): un bloque quieto con la portada de fondo, el 15 % y la frase final. Es lo que
 *    ven Google, quien no tiene WebGL y quien no carga JavaScript.
 *  - .vivo (lo pone decreto-1419-torre.js): 280vh de recorrido con la escena fija; al bajar, la torre
 *    se deshace moneda por moneda hasta el 15 %. Maqueta y modo foto: pruebas/decreto-1419/pieza.html.
 * La calculadora y el aviso de plazo vencido también van aquí: son de la misma pieza. */
.pz { --pz-oro: #c4a469; --pz-claro: #f1d9a0; --pz-texto: #e8e4de; --pz-suave: rgba(232,228,222,.66);
      position: relative; width: 100vw; margin: var(--space-12) 0 var(--space-12) calc(50% - 50vw);
      background: #0a0a0a; color: var(--pz-texto); font-family: var(--font-body); line-height: 1.6; }
.pz-fijo { position: relative; min-height: 72vh; overflow: hidden;
           background: linear-gradient(90deg, rgba(10,10,10,.92) 20%, rgba(10,10,10,.4)),
                       url(assets/journal-decreto-1419-1440w.webp) 75% 50% / cover no-repeat #0a0a0a; }
.pz.vivo { height: 280vh; }
.pz.vivo .pz-fijo { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; background: #0a0a0a; }
.pz-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.pz.vivo .pz-lienzo { display: block; }

/* Los textos van encima, en HTML: nítidos y en tres idiomas. Arriba dejan sitio al menú fijo. */
.pz-capa { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between;
           padding: clamp(88px, 13vh, 120px) clamp(20px, 5vw, 64px) clamp(28px, 6vh, 56px); }
.pz-arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pz-ceja { font: 500 11px/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--pz-oro); margin: 0; }
.pz-cuenta-caja { text-align: right; }
@media (max-width: 600px) { .pz-cuenta-caja { text-align: left; } }
.pz-cuenta { font: 400 15px/1.3 var(--font-body); letter-spacing: .04em; color: var(--pz-claro); margin: 4px 0 0; }
/* El decreto no fija hora y los bancos cierran antes: por eso el consejo bajo la cuenta. */
.pz-consejo { font: 400 12px/1.4 var(--font-body); color: var(--pz-suave); margin: 4px 0 0; }
.pz-abajo { text-align: center; }
.pz-pct, .pz-cuenta, .pz-res b, .pz-calc input { font-variant-numeric: lining-nums tabular-nums; }
.pz-pct { font: 200 clamp(64px, 12vw, 150px)/.9 var(--font-body); letter-spacing: -.02em; color: var(--pz-claro); margin: 0;
          text-shadow: 0 0 40px rgba(196,164,105,.35); }
.pz-pasos { position: relative; height: 4.8em; max-width: 620px; margin: 12px auto 0; font-size: clamp(15px, 1.9vw, 19px); }
.pz-paso { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; color: var(--pz-texto); }
.pz-paso.on { opacity: 1; transform: none; }
.pz-paso b { color: var(--pz-claro); font-weight: 400; }
.pz:not(.vivo) .pz-pasos { height: auto; }
.pz:not(.vivo) .pz-paso { display: none; }
.pz:not(.vivo) .pz-paso:last-child { display: block; position: static; opacity: 1; transform: none; }
.pz-vencido .pz-cuenta-caja { display: none; }

/* Calculadora: cuánto se paga y cuánto se ahorra en la sanción */
.pz-calc { margin: var(--space-10, 40px) 0; padding: clamp(20px, 4vw, 32px); border: 1px solid rgba(196,164,105,.35); border-radius: 4px;
           background: linear-gradient(180deg, rgba(196,164,105,.07), transparent); line-height: 1.6; }
.pz-calc .pz-ceja { margin-bottom: 18px; }
.pz-calc label { display: block; font-size: 15px; color: var(--color-text-muted, #9a948c); margin-bottom: 8px; }
.pz-calc input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--color-accent, #c4a469); border-radius: 0;
                 color: var(--color-text, #f2eee8); font: 200 clamp(26px, 5vw, 34px)/1.3 var(--font-body); padding: 4px 0; outline: none; }
.pz-calc input:focus-visible { border-bottom-width: 2px; }
.pz-res { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.pz-res div { font-size: 14px; color: var(--color-text-muted, #9a948c); }
.pz-res b { display: block; font: 200 clamp(24px, 4vw, 38px)/1.2 var(--font-body); color: #f1d9a0; overflow-wrap: anywhere; }
.pz-res .pz-ahorra { color: #f6e3b0; }
.pz-calc .pz-nota { font-size: 13px; line-height: 1.6; color: var(--color-text-muted, #9a948c); margin: 18px 0 0; }
@media (max-width: 480px) { .pz-res { grid-template-columns: 1fr; gap: 12px; } }

/* Pasado el 19 de noviembre: el aviso arriba del artículo (lo destapa el JS) */
.aviso-vencido { margin: 0 0 var(--space-8, 32px); padding: 14px 18px; border-left: 2px solid var(--color-accent, #c4a469);
                 background: rgba(196,164,105,.07); font-size: 15px; line-height: 1.6; color: var(--color-text, #f2eee8); }
.aviso-vencido a { color: var(--color-accent, #c4a469); }