/* La Cuantía — calendario mural de pagas. Fondo blanco dominante, tinta oscura, tres colores solo para las bandas
   (neto, retención de IRPF, cotización). Antonio (meses, importes, títulos) + Afacad (texto). Polices : OFL, ver polices/LICENSE-*.txt */
:root {
  --blanco: #ffffff; --tinta: #231a2b; --tinta2: #5a4d63; --suave: #f4f2f6; --dic: #f8ecf1; --raya: #d9d4de;
  --neto: #b8336a; --irpf: #d0532f; --cot: #6d5bb5;
  --t: "Afacad", "Segoe UI", system-ui, sans-serif; --c: "Antonio", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 1.1875rem/1.55 var(--t); overflow-wrap: break-word; }
img, svg { max-width: 100%; }
a { color: var(--neto); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.saltar { position: absolute; left: -999px; top: 0; min-height: 44px; }
.saltar:focus { left: 1rem; top: .5rem; background: var(--tinta); color: #fff; padding: .6rem 1rem; z-index: 5; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* cabecera */
.cab { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 2rem; padding: .5rem clamp(1rem, 4vw, 3.5rem) 0; border-bottom: 1px solid var(--raya); }
.marca { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font: 600 1.6rem/1 var(--c); letter-spacing: .02em; color: var(--tinta); text-decoration: none; }
.marca svg { width: 1.9rem; height: 1.9rem; flex: none; }
.menu { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; font: 500 1.2rem var(--c); letter-spacing: .02em; color: var(--tinta2); text-decoration: none; border-bottom: 3px solid transparent; }
.menu a:hover { color: var(--tinta); border-bottom-color: var(--raya); }
.menu a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--neto); }

/* la pared : la frase-formulario y el calendario */
.pared { padding: 1.4rem clamp(1rem, 4vw, 3.5rem) 0; }
h1 { font: 600 clamp(2rem, 3.6vw, 3.1rem)/1 var(--c); margin: 0 0 .7rem; }
h2 { font: 600 clamp(1.8rem, 3vw, 2.5rem)/1.05 var(--c); margin: 0 0 1rem; }
.pared h2.t-herr { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1; margin: 0 0 .7rem; }
.frase { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; font: 500 clamp(1.6rem, 3vw, 2.5rem)/1.3 var(--c); }
.frase > label { font: inherit; }
.campo-bruto { display: inline-flex; align-items: baseline; gap: .5rem; }
.campo-bruto span { font: 400 clamp(1.1rem, 2vw, 1.6rem) var(--t); color: var(--tinta2); }
#bruto { font: 600 clamp(1.8rem, 3.4vw, 2.8rem)/1.1 var(--c); width: 6.2ch; min-height: 52px; border: 0; border-bottom: 3px solid var(--tinta); background: var(--suave); color: var(--tinta); padding: .05rem .4rem; text-align: right; border-radius: 0; }
#bruto[aria-invalid=true] { border-bottom-color: var(--irpf); }
#pagas { font: 600 clamp(1.4rem, 2.6vw, 2.1rem) var(--c); min-height: 52px; border: 0; border-bottom: 3px solid var(--tinta); background: var(--suave); color: var(--tinta); padding: 0 .4rem; border-radius: 0; }
.error { flex-basis: 100%; margin: .2rem 0 0; font: 600 1.05rem var(--t); color: #a3311a; }
.situacion { flex-basis: 100%; font: 400 1.05rem/1.4 var(--t); margin-top: .5rem; }
.situacion summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; color: var(--tinta2); }
.situacion summary .cambiar { color: var(--neto); text-decoration: underline; }
.opciones { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; padding: .6rem 0 .4rem; }
.opciones .campo { display: flex; flex-direction: column; gap: .2rem; margin: 0; min-width: min(100%, 12rem); max-width: 100%; }
.opciones .error { flex-basis: auto; }
.opciones select, .opciones input { font: inherit; min-height: 46px; max-width: 100%; border: 1px solid #7c6f85; border-radius: 3px; padding: .2rem .6rem; background: #fff; color: var(--tinta); }
.opciones input { width: 7rem; }

.respuesta { font-size: 1.3rem; margin: 1rem 0 .8rem; max-width: 60rem; }
.respuesta b { font: 600 1.6rem var(--c); color: var(--neto); }
.ayuda { margin: 0 0 .7rem; color: var(--tinta2); font-size: 1.05rem; }

/* el calendario : cada mes es una casilla; en 14 pagas se toca un mes para poner en él la otra paga extra */
.cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem 1.4rem; }
.mes { min-width: 0; }
.mes-boton, .mes-fijo { display: flex; flex-direction: column; gap: .25rem; width: 100%; padding: .35rem .6rem .5rem; position: relative; text-align: left; }
.mes-boton { appearance: none; border: 0; border-top: 2px solid var(--raya); border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.mes-fijo { border-top: 2px solid var(--raya); }
.mes-boton:hover { background: var(--suave); }
.mes-boton[aria-pressed=false]::after { content: "+"; position: absolute; right: .55rem; top: .25rem; font: 500 1.6rem/1 var(--c); color: var(--tinta2); }
.mes .nom { font: 400 1.45rem/1 var(--c); text-transform: lowercase; color: var(--tinta2); }
.mes .neto { font: 600 1.75rem/1.1 var(--c); }
.mes.doble .mes-boton, .mes.doble .mes-fijo { background: var(--dic); border-top-color: var(--neto); }
.mes.doble .neto { color: var(--neto); }
.tira { display: flex; height: 14px; width: 100%; margin-top: .15rem; }
.tira i { display: block; height: 100%; }
.s-neto { background: var(--neto); } .s-irpf { background: var(--irpf); } .s-cot { background: var(--cot); }
.mas { font-size: 1rem; color: var(--tinta2); line-height: 1.3; }
.anima .tira i { animation: brota .45s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; }
@keyframes brota { from { transform: scaleX(.9); } to { transform: none; } }
.clave { display: flex; flex-wrap: wrap; gap: .3rem 1.8rem; font-size: 1.02rem; color: var(--tinta2); margin: 1rem 0 0; }
.clave span { display: inline-flex; align-items: center; gap: .45rem; }
.clave i { width: 1.6rem; height: 12px; display: inline-block; flex: none; }
.clave b { color: var(--tinta); }

/* de dónde sale cada cifra */
.detalle { padding: 3.4rem clamp(1rem, 4vw, 3.5rem) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 3.5rem; }
.detalle h2, .detalle .hipotesis, .detalle .limites { grid-column: 1 / -1; }
.hipotesis, .limites { color: var(--tinta2); }
.avisos { margin: .8rem 0 0; max-width: 60rem; color: var(--tinta2); font-size: 1.05rem; }
.avisos:empty { margin: 0; }
.pasos { margin: 0; padding-left: 1.4rem; }
.pasos li { margin: 0 0 .6rem; }
.pasos b { font: 600 1.25rem var(--c); }
.tabla-env { overflow-x: auto; align-self: start; }
.tabla { border-collapse: collapse; width: 100%; font-size: 1.05rem; }
.tabla caption { text-align: left; color: var(--tinta2); padding-bottom: .4rem; }
.tabla th, .tabla td { padding: .45rem .5rem; text-align: right; }
.tabla th[scope=row], .tabla thead th:first-child { text-align: left; }
.tabla thead th { font-weight: 400; color: var(--tinta2); vertical-align: bottom; }
.tabla tbody tr:nth-child(odd) { background: var(--suave); }
.tabla tbody tr:last-child td { font: 600 1.25rem var(--c); color: var(--neto); }

/* texto de las páginas */
.perfil { padding: 1.2rem clamp(1rem, 4vw, 3.5rem) 0; max-width: 62rem; }
.migas { margin: 0 0 .4rem; color: var(--tinta2); font-size: 1.05rem; }
.migas a { display: inline-flex; align-items: center; min-height: 44px; }
.bajada { font-size: 1.3rem; color: var(--tinta2); margin: 0 0 .5rem; max-width: 50rem; }
.fecha { margin: 0 0 1.2rem; color: var(--tinta2); font-size: 1.05rem; }
.articulo { padding: 0 clamp(1rem, 4vw, 3.5rem); max-width: 62rem; }
.articulo.suelto { padding-top: 1.6rem; max-width: none; }
.articulo.suelto > * { max-width: 62rem; }
.articulo.suelto > table, .articulo.suelto > ul, .articulo.suelto > ol { max-width: 62rem; }
.articulo h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 2.4rem 0 .8rem; }
.articulo h3 { font: 600 1.5rem/1.15 var(--c); margin: 1.8rem 0 .5rem; }
.articulo p, .articulo li { max-width: 46rem; }
.articulo blockquote { margin: 0 0 1.2rem; padding: .6rem 1rem; border-left: 4px solid var(--neto); background: var(--suave); color: var(--tinta); max-width: 46rem; }
.articulo blockquote p { margin: 0; }
.articulo table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.4rem; font-size: 1.05rem; }
.articulo th, .articulo td { padding: .45rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--raya); overflow-wrap: anywhere; }
.articulo thead th { font-weight: 700; color: var(--tinta); border-bottom: 2px solid var(--tinta); }
.articulo tbody tr:nth-child(odd) { background: var(--suave); }
.articulo a { display: inline; }
.articulo li { margin-bottom: .35rem; }
.articulo .footnote { font-size: 1.02rem; color: var(--tinta2); }

/* pie */
.pie { margin-top: 4rem; padding: 2.2rem clamp(1rem, 4vw, 3.5rem) 3rem; background: var(--suave); font-size: 1.02rem; }
.pie p { max-width: 50rem; }
.h-fuentes { font-size: 1.5rem; margin: 1.4rem 0 .6rem; }
.fuentes { padding-left: 1.4rem; margin: 0; } .fuentes li { margin: 0 0 .7rem; } .fuentes span { display: block; color: var(--tinta2); }
.pie-legal a { display: inline-flex; min-height: 44px; align-items: center; }

@media (max-width: 1000px) { .cal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .cab { gap: 0; padding-top: .2rem; }
  .menu { flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 0 1.2rem; scrollbar-width: thin; padding-bottom: .1rem; }
  .menu a { flex: none; white-space: nowrap; }
  .pared { padding-top: .8rem; }
  .cal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .8rem; }
  .mes .nom { font-size: 1.2rem; } .mes .neto { font-size: 1.45rem; }
  .mes-boton, .mes-fijo { padding: .3rem .4rem .4rem; }
  .respuesta { font-size: 1.1rem; margin: .6rem 0; }
  .detalle { grid-template-columns: minmax(0, 1fr); }
  .detalle > * { min-width: 0; }
  /* tabla de 12 y 14 pagas : texto de 16 px como mínimo, las columnas se ajustan al ancho */
  .tabla { font-size: 1rem; }
  .tabla th, .tabla td { padding: .4rem .25rem; }
  .tabla thead th { font-size: 1rem; line-height: 1.2; }
  .tabla tbody tr:last-child td { font-size: 1.1rem; }
  .articulo table { font-size: 1rem; }
  .articulo th, .articulo td { padding: .4rem .3rem; }
}
@media (max-width: 360px) { .tabla th, .tabla td { padding: .4rem .12rem; } }
@media (prefers-reduced-motion: reduce) { .anima .tira i { animation: none; } }

/* outil paro */
.paro-frase { gap: .2rem 1.6rem; }
.paro-grupo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; max-width: 100%; }
.paro-grupo .campo-bruto { flex-wrap: wrap; }
#base, #dias { font: 600 clamp(1.8rem, 3.4vw, 2.8rem)/1.1 var(--c); width: 5.4ch; min-height: 52px; border: 0; border-bottom: 3px solid var(--tinta); background: var(--suave); color: var(--tinta); padding: .05rem .4rem; text-align: right; border-radius: 0; }
#base[aria-invalid=true], #dias[aria-invalid=true] { border-bottom-color: var(--irpf); }
#hijos { font: 600 clamp(1.4rem, 2.6vw, 2.1rem) var(--c); min-height: 52px; border: 0; border-bottom: 3px solid var(--tinta); background: var(--suave); color: var(--tinta); padding: 0 .4rem; border-radius: 0; }
.paro .cal { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mes.paro-p1 .mes-fijo { background: var(--dic); border-top-color: var(--neto); }
.paro-clave-p1 i { background: var(--dic); border-top: 2px solid var(--neto); }
.paro-h { font: 600 1.5rem/1.15 var(--c); margin: 2rem 0 .6rem; }
.paro-pasos { max-width: 52rem; }
@media (max-width: 1000px) { .paro .cal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .paro .cal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* outil imv */
.imv-campo { display: inline-flex; align-items: baseline; gap: .5rem; }
.imv-campo label, .imv-ing-t { font: inherit; }
#imv-adultos, #imv-menores, #imv-ingresos { font: 600 clamp(1.8rem, 3.4vw, 2.8rem)/1.1 var(--c); min-height: 52px; border: 0; border-bottom: 3px solid var(--tinta); background: var(--suave); color: var(--tinta); padding: .05rem .3rem; text-align: right; border-radius: 0; }
#imv-adultos, #imv-menores { width: 4.2ch; }
#imv-ingresos { width: 6.2ch; }
#imv-adultos[aria-invalid=true], #imv-menores[aria-invalid=true], #imv-ingresos[aria-invalid=true] { border-bottom-color: var(--irpf); }
.imv-marcas { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .1rem 1.6rem; margin: .4rem 0 0; padding: 0; border: 0; font: 400 1.1rem/1.35 var(--t); }
.imv-marcas label { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; cursor: pointer; }
.imv-marcas input { width: 1.35rem; height: 1.35rem; margin: 0; flex: none; accent-color: var(--neto); }
.imv-barra { max-width: 60rem; }
.imv-total { margin: 0 0 .25rem; font-size: 1.05rem; color: var(--tinta2); }
.imv-total b { font: 600 1.3rem var(--c); color: var(--tinta); }
.imv-barra .tira { height: 28px; background: var(--suave); }
.imv-barra .tira i { transition: width .3s ease; }
.imv-barra .clave { margin-top: .6rem; }
.imv-barra .clave span { display: block; }
.imv-barra .clave i { vertical-align: middle; margin-right: .45rem; }
.imv-t-pasos { font: 600 1.5rem/1.15 var(--c); margin: 2rem 0 .4rem; }
.imv .hipotesis, .imv .pasos, .imv .limites { max-width: 60rem; }
@media (prefers-reduced-motion: reduce) { .imv-barra .tira i { transition: none; } }
/* outil autonomos */
.a-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem 3.5rem; }
@media (min-width: 900px) { .a-cuerpo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.a-frase { margin: 0; }
.a-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; margin: 0 0 .5rem; font: 500 clamp(1.4rem, 2.6vw, 2.1rem)/1.3 var(--c); }
.a-linea label { font: inherit; }
#rend, #base { font: 600 clamp(1.7rem, 3vw, 2.5rem)/1.1 var(--c); width: 7.6ch; min-height: 52px; border: 0; border-bottom: 3px solid var(--tinta); background: var(--suave); color: var(--tinta); padding: .05rem .4rem; text-align: right; border-radius: 0; }
#rend[aria-invalid=true], #base[aria-invalid=true] { border-bottom-color: var(--irpf); }
.a-botones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .4rem; }
.a-boton { min-height: 44px; font: 500 1.05rem var(--t); padding: .3rem .9rem; border: 1px solid #7c6f85; border-radius: 3px; background: #fff; color: var(--tinta); cursor: pointer; }
.a-boton:hover { background: var(--suave); }
.a-boton[aria-pressed=true] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.a-herr .pasos { margin-top: .4rem; }
.a-figura { margin: 0; min-width: 0; }
.escalera { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 0 .25rem; }
.peldano { min-width: 0; display: flex; flex-direction: column; }
.peldano .col { position: relative; height: 12rem; background: var(--suave); border-bottom: 2px solid var(--raya); }
.peldano .horq { position: absolute; left: 18%; right: 18%; min-height: 3px; }
.peldano.reducida .horq { background: var(--cot); }
.peldano.general .horq { background: var(--neto); }
.peldano.elegida .col { background: var(--dic); border-bottom-color: var(--tinta); }
.peldano .marca { position: absolute; left: -.2rem; right: -.2rem; height: 3px; background: var(--tinta); transform: translateY(50%); }
.peldano .num { text-align: center; font: 400 1.1rem/1.6 var(--c); color: var(--tinta2); }
.peldano.elegida .num { font-weight: 700; color: var(--tinta); }
.grupos { display: grid; gap: 0 .25rem; margin: .1rem 0 0; font-size: 1rem; color: var(--tinta2); }
.grupos span { border-top: 2px solid var(--raya); text-align: center; padding-top: .1rem; }
.a-figura .clave { margin-top: .7rem; }
.clave i.a-raya { height: 3px; background: var(--tinta); }
@media (max-width: 700px) { .peldano .col { height: 9rem; } .peldano .num { font-size: 1rem; } .escalera, .grupos { gap: 0 .15rem; } }

/* outil finiquito */
.fin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; max-width: 72rem; font: 400 1.05rem/1.4 var(--t); }
.fin-grupo { margin: 0; padding: .4rem 0 .2rem; border: 0; border-top: 2px solid var(--raya); min-width: 0; }
.fin-grupo legend { display: flex; align-items: center; gap: .5rem; padding: 0 .4rem 0 0; font: 600 1.45rem/1.2 var(--c); }
.fin-grupo .opciones { padding: .4rem 0 .2rem; }
.fin-grupo .opciones .campo { min-width: min(100%, 10rem); }
.fin-grupo .error { flex-basis: 100%; }
.fin-caja.campo { flex-direction: row; align-items: center; gap: .5rem; align-self: end; min-height: 46px; }
.fin-caja input[type=checkbox] { width: 1.4rem; height: 1.4rem; min-height: 0; margin: 0; flex: none; accent-color: var(--neto); }
.fin-paga { border-left: 3px solid var(--dic); padding-left: .7rem; }
.fin-n { flex-basis: 100%; margin: 0; font: 600 1.15rem var(--c); color: var(--tinta2); }
.fin-m { display: inline-block; width: .9rem; height: .9rem; flex: none; margin-right: .45rem; vertical-align: baseline; }
.s-fin4 { background: var(--tinta2); }
.fin-tira { display: flex; height: 16px; max-width: 72rem; margin: 0 0 1rem; background: var(--suave); }
.fin-tira i { display: block; height: 100%; }
.fin-env { max-width: 72rem; }
.fin-tabla td:nth-child(2) { text-align: left; color: var(--tinta2); }
.fin-tabla td:last-child { white-space: nowrap; }
.fin-tabla th[scope=row] { font-weight: 600; }
@media (max-width: 700px) {
  .fin-form { grid-template-columns: minmax(0, 1fr); }
  .fin-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fin-tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .fin-tabla th[scope=row] { grid-column: 1; }
  .fin-tabla td:last-child { grid-column: 2; grid-row: 1; }
  .fin-tabla td:nth-child(2) { grid-column: 1 / -1; padding-top: 0; }
  .fin-tabla td:nth-child(2):empty { display: none; }
}

/* outil despido */
.frase-despido input[type=date], #diario { font: 600 clamp(1.4rem, 2.6vw, 2.1rem)/1.1 var(--c); min-height: 52px; max-width: 100%; border: 0; border-bottom: 3px solid var(--tinta); background: var(--suave); color: var(--tinta); padding: .05rem .4rem; border-radius: 0; }
#diario { width: 4.6ch; text-align: right; }
.frase-despido [aria-invalid=true] { border-bottom-color: var(--irpf); }
.campo-tipo { flex-basis: 100%; min-width: 0; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; margin: .6rem 0 0; font: 400 1.05rem/1.4 var(--t); color: var(--tinta2); }
#tipo { font: 600 clamp(1.15rem, 2vw, 1.5rem) var(--c); min-height: 48px; width: 100%; max-width: 32rem; min-width: 0; border: 0; border-bottom: 3px solid var(--tinta); background: var(--suave); color: var(--tinta); padding: 0 .4rem; border-radius: 0; }
.despido .pasos { margin: 0 0 .4rem; max-width: 60rem; }
.despido .ayuda { margin-top: .6rem; }
@media (max-width: 400px) { .frase-despido input[type=date] { font-size: 1.25rem; padding: .05rem .2rem; } }

/* outil pension */
.pj-num { font: 600 clamp(1.8rem, 3.4vw, 2.8rem)/1.1 var(--c); width: 6.2ch; min-height: 52px; border: 0; border-bottom: 3px solid var(--tinta); background: var(--suave); color: var(--tinta); padding: .05rem .4rem; text-align: right; border-radius: 0; }
.pj-num.corto { width: 3.2ch; }
.pj-num[aria-invalid=true], .pj textarea[aria-invalid=true], .pj .opciones input[aria-invalid=true] { border-color: var(--irpf); border-bottom-color: var(--irpf); }
.pj-grupo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.pj-grupo[hidden] { display: none; }
.pj .pj-lista { flex-basis: 100%; }
.pj .opciones textarea { font: inherit; width: min(100%, 24rem); min-height: 9rem; border: 1px solid #7c6f85; border-radius: 3px; padding: .4rem .6rem; background: #fff; color: var(--tinta); }
.pj-ayuda { color: var(--tinta2); font-size: 1rem; max-width: 24rem; }
.pj-escala { position: relative; height: 18px; max-width: 60rem; background: var(--suave); border-bottom: 1px solid var(--raya); }
.pj-lleno { position: absolute; left: 0; top: 0; bottom: 0; background: var(--neto); transition: width .3s ease-out; }
.pj-marca { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1px; background: var(--tinta); }
.pj-clave i.pj-i-min { width: 3px; height: 1.2rem; background: var(--tinta); }
.pj-t-pasos { font: 600 1.5rem/1.15 var(--c); margin: 1.8rem 0 .6rem; }
.pj-pasos { max-width: 60rem; }
.pj-limites { max-width: 60rem; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .pj-lleno { transition: none; } }