/* AXELIA · /modernizar-erp/ — «Módulo a módulo».
   Everything animated is under .mov (motion on). Without it the page reads complete and in order: the block is drawn, the stage lists its four steps above
   the drawing in its last state (every module new, every old one switched off), the close of the month shows both screens with the same figures. */

/* the top bar takes this page's wider column, so its name lines up with the page's text */
.barra.ancho { padding-inline: max(22px, calc((100% - 1240px) / 2)); }

.mo-sec { padding-inline: max(22px, calc((100% - 1240px) / 2)); }
.mo-m { font-family: var(--f-mono) !important; font-weight: 500; }

/* ======================================================================================================== 1. hero */
#mo-hero { position: relative; z-index: 1; box-sizing: border-box; background: var(--hero); color: var(--hero-ink); padding: clamp(96px, 13vh, 130px) max(22px, calc((100% - 1240px) / 2)) clamp(44px, 7vh, 80px); overflow: hidden;
  --e: clamp(0, calc((var(--a, .5) - .5) * 2.6), 1); }
.mov #mo-hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.mo-hero-dentro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px clamp(24px, 4.4vw, 80px); align-items: center; }
.mo-ceja { margin-bottom: 14px; font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.19; letter-spacing: .011em; color: var(--hero-gris); }
.mo-hero h1 { max-width: 9.6em; font-weight: 700; font-size: clamp(2.5rem, min(5.5vw, 9.4vh), 5.6rem); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.mo-sub { margin-top: 20px; max-width: 24em; font-weight: 600; font-size: clamp(1.1rem, min(1.7vw, 3vh), 1.6rem); line-height: 1.22; letter-spacing: -.01em; color: var(--hero-gris); text-wrap: balance; }
.mo-sub b { font-weight: 600; color: var(--hero-ink); }
.mo-hero .acciones { justify-content: flex-start; margin-top: 28px; }
.mo-hero .avales { margin-top: 20px; max-width: 30em; }
@media (max-height: 640px) and (min-width: 821px) { .mo-hero .avales { display: none; } }

.mo-obj { margin: 0; justify-self: end; --px: 0; --py: 0; }
.mo-obj figcaption { margin-top: 10px; font-size: 12px; color: var(--hero-gris); }
.mo-mono { display: block; overflow: visible; }
.mo-mono-d { height: min(72vh, 640px); height: min(72svh, 640px); width: auto; aspect-ratio: 500 / 640; }
.mo-mono-m { display: none; }
.mo-mono text { font-family: var(--f); }
.mo-sombra { fill: rgba(0, 0, 0, 0.16); }
.mo-cuerpo { fill: #0B0B0C; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.mo-placa rect { fill: #18181B; stroke: rgba(255, 255, 255, 0.1); }
.mo-placa path { stroke: rgba(255, 255, 255, 0.12); fill: none; }
.mo-p1 { font-size: 10px; letter-spacing: .14em; fill: #86868B; }
.mo-p2 { font-weight: 700; font-size: 20px; letter-spacing: -.02em; fill: #F5F5F7; }
.mo-p3 { font-size: 10.5px; fill: #86868B; }
.mo-p4 { font-weight: 700; font-size: 46px; letter-spacing: -.045em; fill: #F5F5F7; }
.mo-b-r { fill: #1A1A1D; stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; transition: stroke .3s var(--ease); }
.mo-b-hl { fill: none; stroke: rgba(255, 255, 255, 0.1); }
.mo-b-n { font-size: 11px; fill: #6E6E73; }
.mo-b-t { font-weight: 600; font-size: 17px; letter-spacing: -.012em; fill: #F5F5F7; }
.mo-b-s { font-size: 10.5px; fill: #86868B; }
.mo-led { fill: var(--acento-oscuro); }
.mo-puertos rect { fill: #111113; stroke: rgba(255, 255, 255, 0.08); }
.mo-puertos circle { fill: none; stroke: #66666B; stroke-width: 1.4; stroke-dasharray: 3 3; }
.mo-pt-h { font-size: 11px; fill: #86868B; }
.mo-cinta { transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(-5deg); }
.mo-cinta rect { fill: var(--acento); }
.mo-cinta text { font-weight: 700; font-size: 12px; letter-spacing: .24em; fill: #fff; }
.mo-cuerda { fill: none; stroke: #86868B; stroke-width: 1.4; }
.mo-etiqueta { transform: translate(424px, 78px) rotate(calc(8deg + var(--px, 0) * 3.5deg)); filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.2)); }
.mo-et-r { fill: #FFFFFF; stroke: rgba(0, 0, 0, 0.12); stroke-width: 1; }
.mo-et-o { fill: var(--hero); stroke: #86868B; stroke-width: 1.4; }
.mo-ojal { fill: #86868B; stroke: none; }
.mo-et-1 { font-size: 9.5px; letter-spacing: .14em; fill: #6E6E73; }
.mo-et-2 { font-weight: 700; font-size: 58px; letter-spacing: -.05em; fill: var(--hero-ink); }
.mo-et-3 { font-weight: 600; font-size: 14px; fill: var(--hero-ink); }
.mo-et-l { fill: none; stroke: #D2D2D7; }
.mo-mono-m .mo-etiqueta { transform: translate(316px, 40px) rotate(calc(9deg + var(--px, 0) * 3.5deg)); }
.mo-mono-m .mo-et-2 { font-size: 44px; }
.mo-mono-m .mo-et-3 { font-size: 12px; }
.mo-mono-m .mo-p2 { font-size: 13px; fill: #86868B; font-weight: 500; letter-spacing: 0; }
.mo-mono-m .mo-p4 { font-size: 34px; }
.mo-mono-m .mo-b-t { font-size: 13.5px; }
.mo-mono-m .mo-b-n { font-size: 10px; }
.mo-mono-m .mo-p1 { font-size: 9px; }
.mo-mono-m .mo-p3 { font-size: 9.5px; }
.mo-mono-m .mo-pt-h { font-size: 9.5px; }

/* the seams open with the scroll (--e) and a module comes out like a drawer under the pointer; at load the modules slide into the block */
.mov .mo-b { transform: translate(0, calc((var(--i) - 3) * var(--e, 0) * 4.4px)); transition: transform .45s var(--ease); animation: mo-ent .8s cubic-bezier(.2, .7, .2, 1) calc(.1s + var(--i) * 70ms) both; }
@keyframes mo-ent { from { translate: -30px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  .mov .mo-b:hover { transform: translate(16px, calc((var(--i) - 3) * var(--e, 0) * 4.4px)); }
  .mov .mo-b:hover .mo-b-r { stroke: rgba(255, 122, 61, 0.7); }
}
@media (prefers-reduced-motion: reduce) { .mo-b { animation: none !important; } }

@media (max-width: 820px) {
  .mo-hero-dentro { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #mo-hero { padding-top: 78px; padding-bottom: 28px; }
  .mov #mo-hero { display: block; min-height: 100svh; }
  .mo-hero h1 { font-size: clamp(2.2rem, 10.2vw, 3rem); max-width: 9em; }
  .mo-sub { margin-top: 12px; font-size: 1.1rem; }
  .mo-hero .acciones { margin-top: 18px; }
  .mo-hero .avales { margin-top: 12px; font-size: 13px; }
  .mo-obj { justify-self: stretch; }
  .mo-mono-d { display: none; }
  .mo-mono-m { display: block; width: 100%; height: auto; }
  .mo-obj figcaption { display: none; }
}

/* ======================================================================================================== 2. the stage */
#mo-etapa { z-index: 1; background: var(--hero); }
#mo-etapa .fijo { box-sizing: border-box; color: var(--oscuro-ink); background: var(--oscuro); padding: clamp(78px, 10.5vh, 96px) max(22px, calc((100% - 1240px) / 2)) clamp(60px, 9vh, 96px); }
.mo-cab-i { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--oscuro-linea); }
.mo-eti { font-weight: 600; font-size: 17px; line-height: 1.19; color: var(--acento-oscuro); }
.mo-prog { display: flex; gap: 6px; }
.mo-prog i { display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--oscuro-linea); transition: background-color .4s var(--ease); }
.mo-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px clamp(24px, 4vw, 64px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mo-nt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "s p" "h p" "h r"; gap: 0 clamp(24px, 3.4vw, 56px); align-content: start; padding-top: 16px; }
.mo-nt small { grid-area: s; font-size: 14px; font-weight: 600; color: var(--acento-oscuro); }
.mo-nt h3 { grid-area: h; margin-top: 2px; font-weight: 700; font-size: clamp(1.8rem, min(3.3vw, 5.8vh), 3.2rem); line-height: 1.04; letter-spacing: -.034em; }
.mo-nt p { grid-area: p; align-self: end; font-weight: 600; font-size: clamp(1.02rem, min(1.4vw, 2.6vh), 1.25rem); line-height: 1.25; letter-spacing: -.012em; color: var(--oscuro-ink); }
.mo-nt .mo-reg { grid-area: r; align-self: start; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--oscuro-linea); font-family: var(--f-mono); font-weight: 500; font-size: 12px; line-height: 1.4; color: var(--oscuro-gris); }
.mo-reg span { margin-right: 8px; color: var(--acento-oscuro); }
.mo-lienzo { position: relative; margin-top: 26px; display: flex; flex-direction: column; align-items: center; }
.mo-ej { position: absolute; right: 0; bottom: 0; margin: 0; font-size: 12px; color: var(--oscuro-gris); }

/* the board */
.mo-tab { --ink: var(--oscuro-ink); --gr: var(--oscuro-gris); --ac: var(--acento-oscuro); display: block; width: 100%; height: auto; overflow: visible; }
.mo-tab-m { display: none; }
:where(.mo-tab) text { font-family: var(--f); fill: var(--ink); }
.mo-tab .mo-m { font-family: var(--f-mono); }

/* state of each module, as numbers: n = how new it is (0 to 1), o = how switched off the old one is (0 to 1). Final state without motion: all new, all off. */
#mo-etapa { --n0: 1; --n1: 1; --n2: 1; --n3: 1; --n4: 1; --n5: 1; --n6: 1; --o0: 1; --o1: 1; --o2: 1; --o3: 1; --o4: 1; --o5: 1; --o6: 1;
  --ab: 1; --seq: 1; --mic: 0; --gau: 0; --sta: 1; --arcs: 1; }
.mo-tab .m0 { --n: var(--n0); --off: var(--o0); } .mo-tab .m1 { --n: var(--n1); --off: var(--o1); } .mo-tab .m2 { --n: var(--n2); --off: var(--o2); }
.mo-tab .m3 { --n: var(--n3); --off: var(--o3); } .mo-tab .m4 { --n: var(--n4); --off: var(--o4); } .mo-tab .m5 { --n: var(--n5); --off: var(--o5); } .mo-tab .m6 { --n: var(--n6); --off: var(--o6); }
/* the order of replacement is the order of the columns: 1 compras, 2 almacén, 3 producción, 4 ventas y pedidos, 5 facturación, 6 tesorería, 7 contabilidad:
   module k is complete at (rank + .2) / 8 of the step, and ramps over 1/16 of it */
.mov #mo-etapa[data-paso="0"] { --n0: 0; --n1: 0; --n2: 0; --n3: 0; --n4: 0; --n5: 0; --n6: 0; --o0: 0; --o1: 0; --o2: 0; --o3: 0; --o4: 0; --o5: 0; --o6: 0;
  --ab: clamp(0, calc(var(--f, .5) * 3), 1); --seq: 0; --mic: 1; --gau: 0; --sta: 0; --arcs: clamp(0, calc((var(--f, .5) - .3) * 6), 1); }
.mov #mo-etapa[data-paso="1"] { --n0: 0; --n1: 0; --n2: 0; --n3: 0; --n4: 0; --n5: 0; --n6: 0; --o0: 0; --o1: 0; --o2: 0; --o3: 0; --o4: 0; --o5: 0; --o6: 0;
  --ab: 1; --seq: 1; --mic: 0; --gau: 1; --sta: 0; --arcs: 0; }
.mov #mo-etapa[data-paso="2"] { --o0: 0; --o1: 0; --o2: 0; --o3: 0; --o4: 0; --o5: 0; --o6: 0;
  --n0: clamp(0, calc((var(--f, .5) - .025) * 16), 1); --n1: clamp(0, calc((var(--f, .5) - .15) * 16), 1); --n2: clamp(0, calc((var(--f, .5) - .275) * 16), 1);
  --n3: clamp(0, calc((var(--f, .5) - .4) * 16), 1); --n4: clamp(0, calc((var(--f, .5) - .525) * 16), 1); --n5: clamp(0, calc((var(--f, .5) - .65) * 16), 1); --n6: clamp(0, calc((var(--f, .5) - .775) * 16), 1);
  --ab: 1; --seq: 1; --mic: 0; --gau: 0; --sta: 1; --arcs: 1; }
.mov #mo-etapa[data-paso="3"] { --n0: 1; --n1: 1; --n2: 1; --n3: 1; --n4: 1; --n5: 1; --n6: 1;
  --o0: clamp(0, calc((var(--f, .5) - .025) * 16), 1); --o1: clamp(0, calc((var(--f, .5) - .15) * 16), 1); --o2: clamp(0, calc((var(--f, .5) - .275) * 16), 1);
  --o3: clamp(0, calc((var(--f, .5) - .4) * 16), 1); --o4: clamp(0, calc((var(--f, .5) - .525) * 16), 1); --o5: clamp(0, calc((var(--f, .5) - .65) * 16), 1); --o6: clamp(0, calc((var(--f, .5) - .775) * 16), 1);
  --ab: 1; --seq: 1; --mic: 0; --gau: 0; --sta: 1; --arcs: 1; }

/* old modules */
.mo-o { transform: translateX(calc((var(--i) - 3) * 15.333px * (1 - var(--ab, 1)))); }
.mo-cd { fill: color-mix(in srgb, var(--ink) 7%, #000); stroke: color-mix(in srgb, var(--ink) 26%, transparent); stroke-width: 1.2; opacity: calc(1 - var(--off, 0)); }
.mo-cd-off { fill: none; stroke: color-mix(in srgb, var(--ink) 34%, transparent); stroke-width: 1.2; stroke-dasharray: 4 5; opacity: var(--off, 0); }
.mo-ox { opacity: calc(1 - var(--off, 0)); }
.mo-ix { font-size: 11px; fill: var(--gr); opacity: calc(1 - var(--seq, 0)); }
.mo-sq { opacity: var(--seq, 0); transition: opacity .45s var(--ease); }
.mo-sq circle { fill: var(--ac); }
.mo-sq text { font-weight: 700; font-size: 14px; fill: #000; }
.mo-pl rect { fill: none; stroke: color-mix(in srgb, var(--ink) 34%, transparent); }
.mo-pl text { font-size: 10.5px; fill: var(--gr); }
.mo-nm { font-weight: 600; font-size: 17px; letter-spacing: -.012em; fill: var(--ink); }
.mo-mt { font-size: 10.5px; fill: var(--gr); }
.mo-us { font-size: 10.5px; fill: color-mix(in srgb, var(--ink) 64%, transparent); }
.mo-mic { opacity: var(--mic, 0); transition: opacity .45s var(--ease); }
.mo-gau { opacity: var(--gau, 0); transition: opacity .45s var(--ease); }
.mo-sta { opacity: var(--sta, 0); transition: opacity .45s var(--ease); }
.mo-sa { opacity: calc(1 - var(--n, 0)); }
.mo-sb { opacity: var(--n, 0); fill: var(--ac); }
.mo-pista { fill: color-mix(in srgb, var(--ink) 15%, transparent); }
.mo-gd { fill: var(--ink); }
.mo-gr { fill: var(--ac); }
.mo-stub-o { opacity: calc(1 - var(--off, 0)); }
.mo-stub-o path { fill: none; stroke: color-mix(in srgb, var(--ink) 42%, transparent); stroke-width: 1.4; stroke-dasharray: 3 4; }
.mo-stub-o circle { fill: #000; stroke: color-mix(in srgb, var(--ink) 50%, transparent); stroke-width: 1.3; }
.mo-off { opacity: var(--off, 0); }
.mo-of1 { font-weight: 600; font-size: 13px; fill: var(--ink); }
.mo-nm-g { fill: color-mix(in srgb, var(--ink) 38%, transparent); }
.mo-of2 { font-size: 10.5px; fill: var(--gr); }
.mo-pw circle { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.mo-pw path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
/* new modules */
.mo-slot { fill: none; stroke: color-mix(in srgb, var(--ink) 20%, transparent); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: calc(1 - var(--n, 0)); }
.mo-nw { opacity: var(--n, 0); transform: translateY(calc((1 - var(--n, 0)) * 16px)); }
.mo-nc { fill: color-mix(in srgb, var(--ac) 11%, #000); stroke: var(--ac); stroke-width: 1.5; }
.mo-ixn { font-size: 11px; fill: var(--ac); }
.mo-pln rect { fill: var(--ac); }
.mo-pln text { font-size: 10.5px; font-weight: 600; fill: #000; }
.mo-ok { fill: color-mix(in srgb, var(--ink) 70%, transparent); }
.mo-stub-n { opacity: var(--n, 0); }
.mo-stub-n path { fill: none; stroke: var(--ac); stroke-width: 1.6; }
.mo-stub-n circle { fill: #000; stroke: var(--ac); stroke-width: 1.5; }
/* connections: grey between old modules, orange between new ones, dashed orange across the bridge between a new and an old one */
.mo-ed { transition: opacity .45s var(--ease); }
.mo-oo { opacity: calc(var(--arcs, 1) * (1 - max(var(--a, 0), var(--b, 0)))); }
.mo-nn { opacity: calc(var(--arcs, 1) * min(var(--a, 0), var(--b, 0))); }
.mo-on { opacity: calc(var(--arcs, 1) * (max(var(--a, 0), var(--b, 0)) - min(var(--a, 0), var(--b, 0)))); }
.mo-ar { fill: none; stroke: color-mix(in srgb, var(--ink) 52%, transparent); stroke-width: 1.3; }
.mo-ar-n { stroke: var(--ac); }
.mo-ar-p { stroke: var(--ac); stroke-dasharray: 5 4; }
.mo-lb { fill: #000; stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1; }
.mo-lt { font-size: 10.5px; fill: color-mix(in srgb, var(--ink) 82%, transparent); }
.mo-lp-n .mo-lb { stroke: var(--ac); }
.mo-lp-n .mo-lt { fill: var(--ac); }
.mo-fl-g { fill: color-mix(in srgb, var(--oscuro-ink) 55%, #000); }
.mo-fl-o { fill: var(--acento-oscuro); }
/* the line that never stops */
.mo-sp-halo { fill: var(--ac); opacity: .16; }
.mo-sp-l { fill: none; stroke: var(--ac); stroke-width: 3; }
.mo-doc { fill: #fff; transform: translateX(calc(var(--k) * 178px + 90px)); }
.mo-doc:nth-child(2n) { fill: var(--ac); }
.mo-sp-pl { fill: #000; stroke: var(--ac); stroke-width: 1.6; }
.mo-sp-pl2 { stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 1.2; }
.mo-sp-t1 { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; fill: #fff; }
.mo-sp-t2 { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; fill: var(--gr); }
.mo-sp-t3 { font-weight: 700; font-size: 21px; letter-spacing: -.02em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.mo-sp-t4 { font-size: 11.5px; letter-spacing: .02em; fill: #fff; }
.mo-sp-t5 { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; fill: var(--ac); }
.mo-cbz { font-size: 10.5px; letter-spacing: .12em; fill: var(--gr); }
.mo-cbz-n { fill: var(--ac); opacity: calc(1 - var(--gau, 0)); transition: opacity .45s var(--ease); }
.mo-leyenda { opacity: var(--gau, 0); transition: opacity .45s var(--ease); }
.mov .mo-viaja .mo-doc { animation: mo-viaja 24s linear infinite; animation-delay: calc(var(--k) * -3.45s); transform: none; }
.mov .mo-viaja-v .mo-doc { animation-name: mo-viaja-v; animation-duration: 20s; animation-delay: calc(var(--k) * -2.9s); }
@keyframes mo-viaja { from { transform: translateX(0); } to { transform: translateX(1310px); } }
@keyframes mo-viaja-v { from { transform: translateY(0); } to { transform: translateY(422px); } }
.mo-viaja-v .mo-doc { transform: translateY(calc(var(--k) * 56px + 10px)); }

/* the step texts: four listed without motion; with motion one at a time, and a row of four marks that fills */
.mov .mo-notas { grid-template-columns: minmax(0, 1fr); gap: 0; }
.mov .mo-nt { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 0 12px; pointer-events: none; transition: opacity .45s var(--ease), translate .6s cubic-bezier(.4, 0, .2, 1), visibility .45s; }
.mov .mo-nt small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mov #mo-etapa[data-paso="0"] .mo-nt[data-k="0"], .mov #mo-etapa[data-paso="1"] .mo-nt[data-k="1"], .mov #mo-etapa[data-paso="2"] .mo-nt[data-k="2"], .mov #mo-etapa[data-paso="3"] .mo-nt[data-k="3"] { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; }
.mov #mo-etapa[data-paso="0"] .mo-prog i:nth-child(-n+1), .mov #mo-etapa[data-paso="1"] .mo-prog i:nth-child(-n+2), .mov #mo-etapa[data-paso="2"] .mo-prog i:nth-child(-n+3), .mov #mo-etapa[data-paso="3"] .mo-prog i:nth-child(-n+4) { background: var(--acento-oscuro); }

.mov #mo-etapa .fijo { display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start; padding-bottom: 100px;
  transform-origin: 50% 100%; transform: translateY(calc(var(--sale, 0) * 100vh)) scale(calc(.9 + var(--entra, 1) * .1)); border-radius: calc((1 - var(--entra, 1)) * 44px) calc((1 - var(--entra, 1)) * 44px) 0 0; will-change: transform; }
.mov .mo-cab { align-self: start; }
.mov .mo-lienzo { margin-top: 0; align-self: stretch; justify-content: center; min-height: 0; }
.mov .mo-tab:not(.mo-tab-m) { width: min(100%, calc((100vh - 330px) * 2.385)); width: min(100%, calc((100svh - 330px) * 2.385)); }

/* ---- phones: the drawing is its own composition: old column, the line, new column ---- */
@media (max-width: 820px) {
  .mo-notas { grid-template-columns: minmax(0, 1fr); }
  .mo-nt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "s" "h" "p" "r"; }
  .mo-nt h3 { font-size: 1.6rem; }
  .mo-nt p { margin-top: 6px; align-self: start; font-size: 1.02rem; }
  .mo-tab:not(.mo-tab-m) { display: none; }
  .mo-tab-m { display: block; }
  .mo-tab-m .mo-o { transform: translateY(calc((var(--i) - 3) * 7px * (1 - var(--ab, 1)))); }
  .mo-tab-m .mo-nm { font-size: 12.5px; letter-spacing: -.01em; }
  .mo-tab-m .mo-mt, .mo-tab-m .mo-us { font-size: 9.5px; }
  .mo-tab-m .mo-us { opacity: calc(1 - var(--gau, 0) - var(--sta, 0)); transition: opacity .45s var(--ease); }
  .mo-tab-m .mo-of1 { font-size: 11.5px; }
  .mo-tab-m .mo-of2 { font-size: 9px; }
  .mo-tab-m .mo-sq text { font-size: 12.5px; }
  .mo-tab-m .mo-sp-t4 { font-size: 12px; }
  .mo-lienzo { margin-top: 18px; }
  .mov .mo-cab { display: contents; }
  .mov .mo-cab-i { order: 1; }
  .mov .mo-lienzo { order: 2; align-self: center; margin-top: 8px; }
  .mov .mo-notas { order: 3; margin-top: 4px; }
  .mov #mo-etapa .fijo { grid-template-rows: auto minmax(0, 1fr) auto; padding: 66px 22px 100px; }
  .mov .mo-tab-m { width: min(100%, calc((100svh - 330px) * .72)); }
  .mov .mo-nt { padding-top: 6px; }
  .mov .mo-nt .mo-reg { display: none; }
  .mov .mo-nt p { font-size: 1.02rem; line-height: 1.25; }
  .mov .mo-nt h3 { font-size: 1.55rem; }
  .mo-ej { position: static; align-self: flex-end; margin-top: 4px; font-size: 11px; }
  .mov .mo-doc { animation-duration: 20s; }
}

/* ======================================================================================================== 3. the close of the month, in both systems */
#mo-conv { z-index: 2; background: var(--oscuro); --d: 31.5; }
#mo-conv .fijo { box-sizing: border-box; background: var(--alt); color: var(--ink); padding: clamp(78px, 10.5vh, 96px) max(22px, calc((100% - 1240px) / 2)) clamp(60px, 9vh, 96px); }
.mo-cvcab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 22px clamp(24px, 4vw, 64px); align-items: end; }
.mo-eti-c { color: var(--acento); }
.mo-cvt .titulo { margin-top: 6px; max-width: 12em; font-size: clamp(1.9rem, min(3.4vw, 5.8vh), 3.2rem); line-height: 1.04; letter-spacing: -.034em; }
.mo-cvej { margin-top: 8px; font-size: 12px; color: #6E6E73; }
.mo-notas-c { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.mo-notas-c .mo-nt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "s" "h" "p" "r"; padding-top: 0; }
.mo-notas-c .mo-nt small { color: var(--acento); }
.mo-notas-c .mo-nt h3 { margin-top: 3px; font-size: clamp(1.25rem, min(1.9vw, 3.4vh), 1.7rem); line-height: 1.1; letter-spacing: -.024em; }
.mo-notas-c .mo-nt p { margin-top: 6px; align-self: start; font-weight: 500; font-size: clamp(.98rem, min(1.2vw, 2.3vh), 1.08rem); line-height: 1.3; color: #6E6E73; }
.mo-notas-c .mo-nt .mo-reg { margin-top: 8px; font-size: 12px; font-weight: 500; line-height: 1.4; border-top-color: var(--linea); color: #6E6E73; }
.mo-notas-c .mo-reg span { color: var(--acento); }
.mo-cvl { margin-top: 24px; display: flex; justify-content: center; }
.mo-cv { display: block; width: 100%; height: auto; overflow: visible; }
.mo-cv-m { display: none; }
:where(.mo-cv) text { font-family: var(--f); fill: var(--ink); }
.mo-cv .mo-m { font-family: var(--f-mono); }
/* the old screen */
.mo-bisel { fill: #1C1C1F; }
.mo-pant { fill: #000; }
.mo-tg { font-size: 12px; letter-spacing: .12em; fill: #86868B !important; }
.mo-tled { fill: var(--acento-oscuro); }
.mo-tt { font-size: 17px; letter-spacing: .03em; fill: #F5F5F7 !important; }
.mo-tg2 { fill: #86868B !important; }
.mo-tr { font-size: 15px; letter-spacing: .03em; fill: #A1A1A6 !important; }
.mo-tv { font-size: 19px; letter-spacing: .03em; fill: #F5F5F7 !important; font-variant-numeric: tabular-nums; }
.mo-td { font-size: 15px; letter-spacing: .02em; fill: #F5F5F7 !important; }
.mo-tl { fill: none; stroke: rgba(255, 255, 255, 0.16); }
.mo-mismo { fill: none; stroke: var(--acento-oscuro); stroke-width: 1.4; }
.mo-mismo-n { stroke: var(--acento); }
.mo-cur { fill: var(--acento-oscuro); }
/* the new window */
.mo-vent { fill: #FFFFFF; stroke: var(--linea); stroke-width: 1.2; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, 0.1)); }
.mo-w1 { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.mo-wpl rect { fill: none; stroke: var(--acento); stroke-width: 1.4; }
.mo-wpl text { font-size: 12.5px; font-weight: 600; fill: var(--acento) !important; }
.mo-w2 { font-size: 14px; fill: #6E6E73 !important; }
.mo-wl { fill: none; stroke: #E5E5EA; stroke-width: 1; }
.mo-w3 { font-size: 16px; fill: #6E6E73 !important; }
.mo-w3b { font-weight: 600; font-size: 18px; fill: var(--ink) !important; }
.mo-w4 { font-weight: 600; font-size: 21px; letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.mo-w5 { font-weight: 700; font-size: 40px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mo-w7 { font-size: 14px; }
/* the bridge */
.mo-pu-l { fill: none; stroke: color-mix(in srgb, var(--ink) 38%, transparent); stroke-width: 1.4; stroke-dasharray: 2 5; }
.mo-pdot { fill: var(--acento); }
.mo-pdot2 { fill: var(--ink); }
.mo-pu-t { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: #6E6E73 !important; }
.mo-pu-s { font-size: 14px; fill: #6E6E73 !important; }
.mo-slip rect { fill: #fff; stroke: var(--acento); stroke-width: 1.5; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.1)); }
.mo-sl1 { font-size: 13px; }
.mo-sl2 { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.mo-pu-c { fill: none; stroke: var(--acento); stroke-width: 1.4; }
/* the calendar of invoices: the same bars, mirrored */
.mo-lg { font-size: 11.5px; letter-spacing: .02em; fill: #6E6E73 !important; }
.mo-lg-n { fill: var(--acento) !important; }
.mo-bn { fill: var(--acento); }
.mo-bo { fill: var(--ink); }
.mo-bz { fill: color-mix(in srgb, var(--ink) 16%, transparent); }
.mo-bn, .mo-bo { transform-box: fill-box; transform: scaleY(clamp(0, calc(var(--d, 31.5) - var(--k) + 1), 1)); }
.mo-bn { transform-origin: 50% 100%; }
.mo-bo { transform-origin: 50% 0; }
.mo-dn { font-size: 10.5px; fill: #6E6E73 !important; }
.mo-dn-w { fill: #B4B4B9 !important; }
.mo-dc { fill: var(--ink) !important; }
.mo-cierre { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 4; }
.mo-marca path { fill: none; stroke: var(--acento); stroke-width: 1.6; }
.mo-marca .mo-marca-t { fill: var(--acento); stroke: none; }
.mo-marca { transform: translateX(calc((var(--d, 31.5) - 1) * 37.576px + 18.79px)); }
.mo-marca-m { transform: translateX(calc((var(--d, 31.5) - 1) * 10.909px + 5.45px)); }
.mov .mo-viaja-c .mo-pdot { animation: mo-cv-r 6s linear infinite; animation-delay: calc(var(--k) * -1.2s); }
.mov .mo-viaja-c .mo-pdot2 { animation-name: mo-cv-l; }
.mov .mo-viaja-cv .mo-pdot { animation-name: mo-cv-d; animation-duration: 3.4s; animation-delay: calc(var(--k) * -.85s); }
.mov .mo-viaja-cv .mo-pdot2 { animation-name: mo-cv-u; }
@keyframes mo-cv-r { from { transform: translateX(0); } to { transform: translateX(240px); } }
@keyframes mo-cv-l { from { transform: translateX(0); } to { transform: translateX(-240px); } }
@keyframes mo-cv-d { from { transform: translateY(0); } to { transform: translateY(40px); } }
@keyframes mo-cv-u { from { transform: translateY(0); } to { transform: translateY(-40px); } }
.mo-pdot { transform: translateX(calc(var(--k) * 48px)); }
.mo-pdot2 { transform: translateX(calc(var(--k) * -48px)); }
.mo-viaja-cv .mo-pdot { transform: translateY(calc(var(--k) * 10px)); }
.mo-viaja-cv .mo-pdot2 { transform: translateY(calc(var(--k) * -10px)); }
/* the day (d) of each step: rests on day 4, day 19 and the close; the script writes the same figures into both screens */
.mov #mo-conv[data-paso="0"] { --d: calc(1 + 3 * clamp(0, var(--f, .5) * 2, 1)); }
.mov #mo-conv[data-paso="1"] { --d: calc(4 + 15 * clamp(0, var(--f, .5) * 2, 1)); }
.mov #mo-conv[data-paso="2"] { --d: calc(19 + 12.5 * clamp(0, var(--f, .5) * 2, 1)); }
.mov #mo-conv .mo-nt { padding-top: 0; }
.mov #mo-conv .fijo { display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start; padding-bottom: 100px;
  border-radius: calc((1 - var(--entra, 1)) * 32px) calc((1 - var(--entra, 1)) * 32px) 0 0; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.5); transform: translateY(calc(var(--sale, 0) * 100vh)); }
.mov #mo-conv[data-paso="0"] .mo-nt[data-k="0"], .mov #mo-conv[data-paso="1"] .mo-nt[data-k="1"], .mov #mo-conv[data-paso="2"] .mo-nt[data-k="2"] { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; }
.mov .mo-cvl { margin-top: 0; align-items: center; min-height: 0; }
.mov .mo-cv-d { width: min(100%, calc((100vh - 316px) * 2.594)); width: min(100%, calc((100svh - 316px) * 2.594)); }
.mo-cvl .mo-slip rect { transition: none; }

/* ======================================================================================================== 4. what you notice */
.mo-dol, .mo-ent, .mo-preg { position: relative; box-sizing: border-box; padding-block: clamp(84px, 11vh, 108px) clamp(90px, 11vh, 130px); }
.mo-dol { z-index: 3; background: var(--oscuro); color: var(--oscuro-ink); border-radius: 32px 32px 0 0; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.45); }
.mo-ent { z-index: 4; margin-top: -32px; background: var(--pagina); color: var(--ink); border-radius: 32px 32px 0 0; box-shadow: 0 -22px 44px -30px rgba(0, 0, 0, 0.3); }
.mo-preg { z-index: 5; margin-top: -32px; background: var(--alt); color: var(--ink); border-radius: 32px; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.35), 0 34px 60px -30px rgba(0, 0, 0, 0.5); }
.mov .mo-dol, .mov .mo-ent, .mov .mo-preg { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.mov .mo-dol, .mov .mo-ent { min-height: calc(100vh + 32px); min-height: calc(100svh + 32px); padding-bottom: 130px; }
.mo-dol .titulo, .mo-ent .titulo, .mo-preg .titulo { margin: 8px 0 0; max-width: 16em; font-size: clamp(2rem, min(3.8vw, 6vh), 3.4rem); }
.mo-ceja-o { color: var(--acento-oscuro); }
.mo-ceja-c { color: var(--acento); }
.mo-lanes { --lh: clamp(70px, 12.4vh, 122px); margin-top: clamp(20px, 3.6vh, 38px); border-top: 1px solid var(--oscuro-linea); }
.mo-lane { --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(24px, 4vw, 64px); align-items: center; padding: clamp(8px, 1.6vh, 16px) 0; border-bottom: 1px solid var(--oscuro-linea); }
.mov .mo-lane { opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 30px)); }
.mo-lane-t { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: baseline; }
.mo-lane-t b { font-family: var(--f-mono); font-weight: 500; font-size: 14px; color: var(--acento-oscuro); }
.mo-lane-t p { font-weight: 700; font-size: clamp(1.25rem, min(1.9vw, 3.4vh), 1.75rem); line-height: 1.1; letter-spacing: -.026em; text-wrap: balance; }
.mo-lane-t small { grid-column: 2; margin-top: 7px; font-family: var(--f-mono); font-size: 11.5px; line-height: 1.35; color: var(--oscuro-gris); }
.mo-lane-d, .mo-lane-e > div { min-width: 0; }
.mo-ln { display: block; height: var(--lh); width: auto; max-width: 100%; margin-left: auto; overflow: visible; }
.mo-ln-b { fill: none; stroke: var(--oscuro-linea); stroke-width: 1; }
.mo-lb2 { fill: color-mix(in srgb, var(--oscuro-ink) 36%, transparent); transform-box: fill-box; transform-origin: 50% 100%; }
.mo-lb-a { fill: var(--acento-oscuro); }
.mov .mo-lb2 { transform: scaleY(clamp(0, calc(var(--v, 1) * 2.6 - var(--j, 0) * .07 - .2), 1)); }
.mo-pasos { fill: none; stroke: color-mix(in srgb, var(--oscuro-ink) 50%, transparent); stroke-width: 2; stroke-linejoin: round; }
.mo-pt { fill: #000; stroke: color-mix(in srgb, var(--oscuro-ink) 60%, transparent); stroke-width: 2; }
.mo-pt-a { stroke: var(--acento-oscuro); }
.mo-pt-f { fill: var(--acento-oscuro); stroke: #000; stroke-width: 3; }
.mo-doc0 { fill: none; stroke: var(--acento-oscuro); stroke-width: 1.4; stroke-dasharray: 2 5; }
.mo-lane-e { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(24px, 4vw, 64px); padding-top: 6px; }
.mo-eje { display: block; height: calc(var(--lh) * .17); width: auto; max-width: 100%; margin-left: auto; overflow: visible; }
.mo-eje path { stroke: var(--oscuro-gris); stroke-width: 1; }
.mo-eje text { font-size: 10.5px; fill: var(--oscuro-gris); }
.mo-nota { margin-top: 14px; font-size: 12px; color: var(--oscuro-gris); }

/* ======================================================================================================== 5. what stays */
.mo-ent .titulo { max-width: 20em; }
.mo-tiras { margin-top: clamp(18px, 3.4vh, 34px); }
.mo-tira { --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); padding: clamp(10px, 1.7vh, 16px) 0 clamp(12px, 2vh, 18px); border-top: 1px solid var(--linea); }
.mo-tira:last-child { border-bottom: 1px solid var(--linea); }
.mov .mo-tira { opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 30px)); }
.mo-tira header { display: grid; grid-template-columns: 38px auto minmax(0, 1fr); align-items: baseline; gap: 0 14px; margin-bottom: clamp(6px, 1.2vh, 12px); }
.mo-tira header b { font-family: var(--f-mono); font-weight: 500; font-size: 14px; color: var(--acento); }
.mo-tira header h3 { font-weight: 700; font-size: clamp(1.15rem, min(1.7vw, 3vh), 1.5rem); line-height: 1.12; letter-spacing: -.024em; }
.mo-tira header p { justify-self: end; max-width: 30em; font-size: clamp(.9rem, 1.1vw, 1.02rem); line-height: 1.3; text-align: right; color: #6E6E73; }
.mo-tira-d { display: flex; justify-content: center; }
.mo-tiras { --k: clamp(.74, calc((100svh - 470px) / 400px), 1); }
.mo-st { display: block; width: 100%; height: auto; max-height: calc(var(--h, 110) * 1px * var(--k, 1)); overflow: visible; }
.mo-st-m { display: none; }
:where(.mo-st) text { font-family: var(--f); fill: var(--ink); }
.mo-st .mo-m { font-family: var(--f-mono); }
.mo-et-c { fill: var(--alt); stroke: var(--linea); stroke-width: 1.2; }
.mo-et-t { font-size: 11.5px; letter-spacing: .12em; fill: #6E6E73 !important; }
.mo-et-n { fill: var(--acento); }
.mo-et-nn { font-weight: 700; font-size: 11px; fill: #fff !important; }
.mo-et-m { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.mo-chev { fill: none; stroke: #86868B; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mo-op { fill: none; stroke: var(--acento); stroke-width: 2.4; }
.mo-op-t { font-size: 11.5px; letter-spacing: .04em; fill: var(--acento) !important; }
.mo-tick { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.mo-tk { font-size: 10.5px; fill: #6E6E73 !important; }
.mo-ch-r { fill: var(--alt); stroke: var(--linea); stroke-width: 1.2; }
.mo-ch-d { fill: var(--acento); }
.mo-ch-s { font-size: 11px; fill: #6E6E73 !important; }
.mo-ch-n { font-weight: 600; font-size: 15px; letter-spacing: -.012em; }
.mo-gl path { fill: none; stroke: #6E6E73; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.mo-ch-m .mo-ch-r { fill: none; stroke: var(--acento); stroke-dasharray: 4 4; }
.mo-ch-m .mo-gl path { stroke: var(--acento); }
.mov .mo-ch, .mov .mo-et { --q: clamp(0, calc(var(--v, 1) * 3 - var(--i, 0) * .22), 1); opacity: var(--q); }
.mo-h1 { fill: none; stroke: #86868B; stroke-width: 1.4; }
.mo-h1 { fill: repeating-linear-gradient(135deg, #000, #000); fill: color-mix(in srgb, var(--ink) 5%, transparent); stroke-dasharray: 5 4; }
.mo-h2 { fill: color-mix(in srgb, var(--acento) 12%, transparent); stroke: var(--acento); stroke-width: 1.5; }
.mo-lock rect, .mo-lock path { fill: none; stroke: #6E6E73; stroke-width: 1.6; stroke-linecap: round; }
.mo-h-t { font-size: 14px; fill: var(--ink) !important; }
.mo-h-ta { fill: var(--acento) !important; }
.mo-h-y { font-size: 11.5px; fill: #6E6E73 !important; }
.mo-h-k { fill: none; stroke: #86868B; stroke-width: 1; }
.mo-h-b { fill: none; stroke: var(--linea); stroke-width: 1.2; }
.mo-h-n { font-size: 14px; fill: #6E6E73 !important; }

/* ======================================================================================================== 6. questions */
.mo-q { margin-top: clamp(20px, 3.8vh, 40px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(28px, 5vw, 80px); align-items: start; }
.mo-q-lista { display: grid; gap: 4px; border-top: 1px solid var(--linea); }
.mo-q-b { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: baseline; box-sizing: border-box; width: 100%; padding: clamp(12px, 2.2vh, 20px) 0; border: 0; border-bottom: 1px solid var(--linea); background: none; color: color-mix(in srgb, var(--ink) 36%, transparent); font: inherit; text-align: left; cursor: pointer; transition: color .35s var(--ease); }
.mo-q-b b { font-family: var(--f-mono); font-weight: 500; font-size: 14px; color: inherit; }
.mo-q-b span { font-weight: 700; font-size: clamp(1.4rem, min(2.2vw, 3.9vh), 2rem); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.mo-q-b[aria-selected="true"] { color: var(--ink); }
.mo-q-b[aria-selected="true"] b { color: var(--acento); }
@media (hover: hover) { .mo-q-b:hover { color: var(--ink); } }
.mo-q-lista { gap: 0; }
.mo-q-paneles { min-width: 0; }
.mo-q-p { box-sizing: border-box; padding: clamp(20px, 3.2vh, 32px) clamp(22px, 2.6vw, 34px) clamp(18px, 3vh, 28px); border-radius: 28px; background: var(--pagina); box-shadow: inset 0 0 0 1px var(--linea); }
.mo-q-p + .mo-q-p { margin-top: 16px; }
.mo-q-p[hidden] { display: none; }
.mo-q-h { margin-bottom: 8px; font-weight: 700; font-size: 1.3rem; line-height: 1.12; letter-spacing: -.02em; }
.mo-q.js .mo-q-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mo-q-r { font-weight: 600; font-size: clamp(1.1rem, min(1.55vw, 2.9vh), 1.4rem); line-height: 1.26; letter-spacing: -.016em; }
.mo-q-d { margin-top: clamp(12px, 2.4vh, 24px); }
.mo-qd { display: block; width: 100%; height: auto; max-height: clamp(110px, 22vh, 170px); overflow: visible; }
:where(.mo-qd) text { font-family: var(--f); fill: var(--ink); }
.mo-qd .mo-m { font-family: var(--f-mono); }
.mo-q-l { margin-top: clamp(10px, 2vh, 18px); padding-top: 12px; border-top: 1px solid var(--linea); font-size: 15px; color: #6E6E73; }
.mo-q-l a { color: var(--acento); text-decoration: none; white-space: nowrap; }
.mo-q-l a:hover { text-decoration: underline; }
.mo-qc { fill: var(--alt); stroke: var(--linea); stroke-width: 1.2; }
.mo-qf { fill: color-mix(in srgb, var(--ink) 4%, transparent); stroke-dasharray: 4 4; }
.mo-qdia { font-size: 11.5px; fill: #6E6E73 !important; }
.mo-qop { fill: none; stroke: var(--acento); stroke-width: 2.6; }
.mo-qdoc { fill: var(--ink); }
.mo-qbr { fill: none; stroke: #86868B; stroke-width: 1.3; stroke-linejoin: round; }
.mo-qbr2 { fill: none; stroke: #86868B; stroke-width: 1.3; }
.mo-qt { font-size: 12px; fill: #6E6E73 !important; }
.mo-qb1 { fill: color-mix(in srgb, var(--ink) 8%, transparent); stroke: #86868B; stroke-width: 1.3; }
.mo-qin { fill: var(--ink) !important; }
.mo-qw circle { fill: none; stroke: var(--acento); stroke-width: 1.5; }
.mo-qw text { font-weight: 700; font-size: 13px; fill: var(--acento) !important; }
.mo-qb2 { fill: var(--alt); stroke: var(--acento); stroke-width: 1.4; }
.mo-qn { font-size: 11px; fill: var(--acento) !important; }
.mo-qrl { fill: none; stroke: var(--linea); stroke-width: 1; }
.mo-qr1 { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.mo-qmg rect { fill: var(--acento); }
.mo-qmg text { font-size: 12px; font-weight: 600; fill: #fff !important; }
.mo-qco rect { fill: color-mix(in srgb, var(--ink) 5%, transparent); stroke: #86868B; stroke-width: 1.2; stroke-dasharray: 4 3; }
.mo-qco text { font-size: 12px; fill: var(--ink) !important; }
.mo-qco .mo-lock rect, .mo-qco .mo-lock path { stroke: var(--ink); }

/* the closing block is revealed from underneath as the last sheet leaves */
.mov .serv-cierre { position: sticky; bottom: 0; z-index: 0; }

/* ======================= phones ======================= */
@media (max-width: 820px) {
  /* the close of the month */
  .mo-cvcab { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mo-cvt .titulo { font-size: 1.5rem; max-width: none; }
  .mo-cvej { display: none; }
  .mo-cv-d { display: none; }
  .mo-cv-m { display: block; width: 100%; height: auto; }
  .mo-cvl { margin-top: 12px; }
  .mo-notas-c .mo-nt h3 { font-size: 1.2rem; }
  .mo-notas-c .mo-nt p { font-size: .95rem; }
  .mov #mo-conv .fijo { grid-template-rows: auto minmax(0, 1fr); padding: 66px 22px 96px; }
  .mo-cv-m .mo-tg { font-size: 10px; } .mo-cv-m .mo-tr { font-size: 12px; } .mo-cv-m .mo-tv { font-size: 14px; } .mo-cv-m .mo-td { font-size: 12.5px; }
  .mo-cv-m .mo-w1 { font-size: 17px; } .mo-cv-m .mo-w3 { font-size: 13.5px; } .mo-cv-m .mo-w3b { font-size: 15px; } .mo-cv-m .mo-w4 { font-size: 16.5px; } .mo-cv-m .mo-w5 { font-size: 29px; } .mo-cv-m .mo-w7 { font-size: 12.5px; }
  .mo-cv-m .mo-pu-t { font-size: 10px; } .mo-cv-m .mo-pu-s { font-size: 12.5px; } .mo-cv-m .mo-lg { font-size: 9.5px; } .mo-cv-m .mo-dn { font-size: 8.5px; }
  .mov .mo-cv-m { width: min(100%, calc((100svh - 252px) * .8)); }
  .mov #mo-conv .mo-cvcab { gap: 6px; }
  .mov #mo-conv .mo-nt .mo-reg { display: none; }
  .mov #mo-conv .mo-notas-c { min-height: 96px; }
  .mo-cvt .titulo { margin-top: 2px; }
  /* what you notice, what stays, questions */
  .mo-dol, .mo-ent, .mo-preg { padding-block: 80px 70px; }
  .mov .mo-dol, .mov .mo-ent { padding-bottom: 120px; }
  .mo-dol .titulo, .mo-ent .titulo, .mo-preg .titulo { font-size: 1.85rem; }
  .mo-lanes { --lh: 62px; margin-top: 16px; }
  .mo-lane { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0; }
  .mo-lane-t p { font-size: 1.12rem; }
  .mo-lane-t small { font-size: 10.5px; }
  .mo-ln { height: var(--lh); width: 100%; }
  .mo-lane-e { grid-template-columns: minmax(0, 1fr); padding-top: 4px; }
  .mo-lane-e > span { display: none; }
  .mo-eje { height: 16px; width: 100%; }
  .mo-st-m .mo-et-m { font-size: 12px; } .mo-st-m .mo-ch-n { font-size: 11.5px; } .mo-st-m .mo-et-t { font-size: 9.5px; } .mo-st-m .mo-h-t { font-size: 11px; }
  .mo-st-d { display: none; }
  .mo-st-m { display: block; max-height: none; }
  .mo-tira-d { display: block; }
  .mo-tira header { grid-template-columns: 30px minmax(0, 1fr); gap: 0 8px; }
  .mo-tira header p { display: none; }
  .mo-tira header h3 { font-size: 1.08rem; }
  .mo-tira { padding: 12px 0 14px; }
  .mo-q { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mo-q-b span { font-size: 1.15rem; }
  .mo-q-b { padding: 10px 0; }
  .mo-q-p { padding: 16px 16px 14px; border-radius: 22px; }
  .mo-q-r { font-size: 1rem; }
  .mo-qd { max-height: 112px; }
  .mo-q-l { font-size: 13.5px; }
}

/* short screens: the header gives up its record line so the drawings keep their size */
@media (max-height: 780px) and (min-width: 821px) {
  .mov #mo-etapa .fijo { padding-top: 68px; padding-bottom: 96px; }
  .mo-cab-i { padding-bottom: 8px; }
  .mo-nt { padding-top: 10px; }
  .mo-nt .mo-reg { display: none; }
  .mov .mo-tab:not(.mo-tab-m) { width: min(100%, calc((100svh - 262px) * 2.385)); }
  .mov #mo-conv .fijo { padding-top: 68px; padding-bottom: 96px; }
  .mo-notas-c .mo-nt .mo-reg, .mo-cvej { display: none; }
  .mov .mo-cv-d { width: min(100%, calc((100svh - 304px) * 2.594)); }
  .mo-cvt .titulo { font-size: 2rem; }
  .mo-notas-c .mo-nt h3 { font-size: 1.3rem; }
  .mo-lane-t p { font-size: 1.3rem; }
  .mo-hero .acciones { margin-top: 20px; }
}

/* ======================= short phones =======================
   Safari gives the page about 700px of an 844px phone. Every resting place is composed again for that height; at 844 and above none of this applies. */
@media (max-width: 820px) and (max-height: 780px) {
  /* hero: headline, one row of actions, and the whole block under them */
  #mo-hero { padding-top: 70px; padding-bottom: 18px; }
  .mo-ceja { margin-bottom: 8px; font-size: 16px; }
  .mo-sub { margin-top: 10px; font-size: 1.05rem; }
  .mo-hero .acciones { flex-wrap: nowrap; gap: 8px 14px; margin-top: 14px; }
  .mo-hero .pildora { padding: 0 18px; font-size: 16px; white-space: nowrap; }
  .mo-hero .enlace { font-size: 16px; white-space: nowrap; }
  .mo-hero .avales { display: none; }
  .mo-hero-dentro { gap: 14px; }

  /* the close of the month: the section title steps back (it stays for screen readers) so the screens keep their size */
  .mo-cvt .titulo { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mov #mo-conv .fijo { padding-top: 64px; padding-bottom: 92px; }
  .mov #mo-conv .mo-cvcab { gap: 4px; }
  .mov #mo-conv .mo-notas-c { min-height: 88px; }
  .mo-notas-c .mo-nt h3 { font-size: 1.15rem; }
  .mo-notas-c .mo-nt p { margin-top: 4px; font-size: .92rem; line-height: 1.26; }
  .mov .mo-cv-m { width: min(100%, calc((100svh - 286px) * .807)); }
  .mo-cvl { margin-top: 6px; }

  /* what you notice */
  .mo-dol, .mo-ent, .mo-preg { padding-block: 66px 60px; }
  .mov .mo-dol, .mov .mo-ent { padding-bottom: 124px; }
  .mo-dol .titulo, .mo-ent .titulo, .mo-preg .titulo { font-size: 1.5rem; margin-top: 4px; }
  .mo-dol .etiqueta, .mo-ent .etiqueta, .mo-preg .etiqueta { font-size: 17px; }
  .mo-lanes { --lh: 48px; margin-top: 10px; }
  .mo-lane { gap: 3px; padding: 7px 0; }
  .mo-lane-t p { font-size: 1.02rem; line-height: 1.12; }
  .mo-lane-t small { margin-top: 3px; font-size: 10px; }
  .mo-x { display: none; }
  .mo-eje { height: 14px; }
  .mo-lane-e { padding-top: 2px; }
  .mo-nota { margin-top: 8px; font-size: 11px; line-height: 1.3; }

  /* what stays */
  .mo-tiras { margin-top: 8px; }
  .mo-tira { padding: 7px 0 8px; }
  .mo-tira header { margin-bottom: 4px; }
  .mo-tira header h3 { font-size: .98rem; }
  .mo-st-m { max-height: none; }
  .mo-st-p { max-height: 124px; }
  .mo-st-c { max-height: 84px; }
  .mo-st-h { max-height: 68px; }

  /* questions */
  .mo-q { margin-top: 10px; gap: 10px; }
  .mo-q-b { padding: 7px 0; }
  .mo-q-b span { font-size: 1.05rem; }
  .mo-q-p { padding: 12px 14px 10px; }
  .mo-q-r { font-size: .95rem; line-height: 1.24; }
  .mo-q-d { margin-top: 8px; }
  .mo-qd { max-height: 92px; }
  .mo-q-l { margin-top: 8px; padding-top: 8px; font-size: 12.5px; }
}