/* AXELIA · /arquitectura-de-sistemas/ — «El mapa».
   The whole page is drawn as architect's sheets: a plan of a company's systems (walls, ports, pipes, grid references, a revision box).
   Everything animated is under .mov (motion on). Without it the page reads complete: the plan is drawn, the stage shows its last layer and lists its four steps. */

.barra.ancho { padding-inline: max(22px, calc((100% - 1240px) / 2)); }

/* ---------- 0. the drawing vocabulary (shared by the hero sheet and the stage sheet) ---------- */
.as-hoja { --tinta: #1D1D1F; --gr: #6E6E73; --ac: #E8501A; --bg: #F5F5F7; --sup: #FFFFFF; position: relative; container-type: size; }
.as-hoja.osc { --tinta: #F5F5F7; --gr: #86868B; --ac: #FF7A3D; --bg: #000000; --sup: #0C0C0D; }
.a-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.a-svg text { font-family: var(--f); }
.a-svg path, .a-svg rect, .a-svg circle { vector-effect: none; }

/* the sheet: double frame, reference band, ticks, registration crosses */
.a-fr1 { fill: none; stroke: color-mix(in srgb, var(--tinta) 82%, transparent); stroke-width: 1.5; }
.a-fr2 { fill: none; stroke: color-mix(in srgb, var(--tinta) 42%, transparent); stroke-width: .9; }
.a-tk { fill: none; stroke: color-mix(in srgb, var(--tinta) 42%, transparent); stroke-width: .9; }
.a-cruz { fill: none; stroke: color-mix(in srgb, var(--tinta) 20%, transparent); stroke-width: 1; }
.a-rc, .a-rr { fill: var(--gr); font-family: var(--f-mono) !important; font-weight: 500; font-size: 12.5px; text-anchor: middle; transition: fill .25s var(--ease); }
.as-hoja[data-c="0"] .rc-0, .as-hoja[data-c="1"] .rc-1, .as-hoja[data-c="2"] .rc-2, .as-hoja[data-c="3"] .rc-3, .as-hoja[data-c="4"] .rc-4, .as-hoja[data-c="5"] .rc-5,
.as-hoja[data-c="6"] .rc-6, .as-hoja[data-c="7"] .rc-7, .as-hoja[data-c="8"] .rc-8, .as-hoja[data-c="9"] .rc-9, .as-hoja[data-c="10"] .rc-10, .as-hoja[data-c="11"] .rc-11,
.as-hoja[data-r="0"] .rr-0, .as-hoja[data-r="1"] .rr-1, .as-hoja[data-r="2"] .rr-2, .as-hoja[data-r="3"] .rr-3, .as-hoja[data-r="4"] .rr-4, .as-hoja[data-r="5"] .rr-5 { fill: var(--ac); font-weight: 600; }

/* the plan: buildings are walls with a fill; ERP modules are rooms inside one wall */
.a-re { fill: var(--sup); }
.a-re-e { fill: color-mix(in srgb, var(--tinta) 3%, var(--sup)); }
.a-re-h { fill: color-mix(in srgb, var(--tinta) 4%, var(--bg)); }
.a-mu { fill: none; stroke: var(--tinta); stroke-width: 4; stroke-linecap: square; }
.a-mu-e { stroke-width: 5.5; }
.a-mu-h { stroke-width: 2.2; stroke-linecap: butt; stroke-dasharray: 7 5; }
.a-gl path { fill: none; stroke: color-mix(in srgb, var(--tinta) 38%, transparent); stroke-width: 1.2; }
.a-pa { fill: none; stroke: color-mix(in srgb, var(--tinta) 30%, transparent); stroke-width: 1.2; }
.a-co { fill: none; stroke: var(--tinta); stroke-width: 9; stroke-linecap: butt; }
.a-co-i { fill: none; stroke: var(--bg); stroke-width: 6.2; stroke-linecap: butt; }
.a-ma { fill: none; stroke: var(--tinta); stroke-width: 1.7; stroke-dasharray: 5 5; stroke-linecap: butt; }
.a-jm { fill: none; stroke: var(--tinta); stroke-width: 2.2; }
.a-pt { fill: var(--bg); stroke: var(--tinta); stroke-width: 2.4; }
.a-nt { fill: var(--tinta); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.a-n { fill: var(--tinta); font-weight: 650; font-size: 15.5px; letter-spacing: -.015em; }
.a-h { fill: var(--tinta); font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.a-s, .a-hs, .a-k { fill: var(--gr); font-family: var(--f-mono) !important; font-weight: 500; font-size: 11px; letter-spacing: 0; }
.a-hs { font-size: 10.5px; }
.a-k { font-size: 9.5px; letter-spacing: .12em; }
.a-tg circle { fill: var(--bg); stroke: var(--ac); stroke-width: 1.7; }
.a-tg text { fill: var(--ac); font-family: var(--f-mono) !important; font-weight: 600; font-size: 12px; text-anchor: middle; }
.a-dm path { fill: none; stroke: var(--gr); stroke-width: 1; }
.a-dm text { fill: var(--gr); font-family: var(--f-mono) !important; font-size: 11px; }
.a-pi rect { fill: var(--bg); stroke: color-mix(in srgb, var(--tinta) 55%, transparent); stroke-width: 1; }
.a-pi text { fill: var(--tinta); font-family: var(--f-mono) !important; font-weight: 500; font-size: 10.5px; text-anchor: middle; }
.a-dot { fill: var(--ac); }
#pagina:not(.mov) .a-dot { display: none; }

/* the stage layers: every piece says in which steps it is there */
.a-svg .v { opacity: 1; }
#as-mapa[data-paso="0"] .a-svg .v:not([data-v~="0"]),
#as-mapa[data-paso="1"] .a-svg .v:not([data-v~="1"]),
#as-mapa[data-paso="2"] .a-svg .v:not([data-v~="2"]),
#as-mapa[data-paso="3"] .a-svg .v:not([data-v~="3"]) { opacity: 0; visibility: hidden; }
#as-mapa:not([data-paso="0"]) .a-base { opacity: .34; }
#as-mapa[data-paso="3"] .a-l3 { opacity: .0; }
.mov .a-svg .v { transition: opacity .5s var(--ease), visibility .5s; }
.mov .a-svg .a-base { transition: opacity .6s var(--ease); }

/* step 2: processes. Three routes on the same plan; each segment grows with the stage's own progress (--f), complete at the resting place */
.a-rt { --g: clamp(0, calc((var(--f, .5) - var(--t0)) / var(--dt)), 1); }
.a-rt-v { --rc: var(--ac); }
.a-rt-c, .a-rt-k { --rc: var(--tinta); }
.a-rs { fill: none; stroke: var(--rc); stroke-width: 3.2; stroke-linecap: round; transform-box: fill-box; }
.a-rt-k .a-rs { stroke-dasharray: 10 5 2 5; stroke-width: 2.6; }
.a-rs.hx { transform-origin: 0 50%; transform: scaleX(clamp(0, calc((var(--g) - var(--s)) / var(--l)), 1)); }
.a-rs.hxr { transform-origin: 100% 50%; transform: scaleX(clamp(0, calc((var(--g) - var(--s)) / var(--l)), 1)); }
.a-rs.hy { transform-origin: 50% 0; transform: scaleY(clamp(0, calc((var(--g) - var(--s)) / var(--l)), 1)); }
.a-rs.hyu { transform-origin: 50% 100%; transform: scaleY(clamp(0, calc((var(--g) - var(--s)) / var(--l)), 1)); }
.a-st { opacity: clamp(0, calc((var(--g) - var(--s)) / .08), 1); }
.a-st circle { fill: var(--bg); stroke: var(--rc); stroke-width: 2.2; }
.a-rt-v .a-st circle { fill: var(--ac); }
.a-st text { fill: var(--tinta); font-family: var(--f-mono) !important; font-weight: 600; font-size: 11.5px; text-anchor: middle; }
.a-rt-v .a-st text { fill: var(--bg); }
.a-rn { fill: var(--tinta); font-family: var(--f-mono) !important; font-weight: 600; font-size: 10.5px; letter-spacing: .1em; }
.a-rn-v { fill: var(--ac); }

/* step 3: diagnosis. Duplicates, work done by hand, risks, each with its code */
.a-hl { fill: color-mix(in srgb, var(--ac) 14%, transparent); }
.a-m1 { fill: color-mix(in srgb, var(--ac) 22%, transparent); stroke: var(--ac); stroke-width: 2; }
.a-m2 { fill: var(--ac); }
.a-m3 { fill: var(--ac); stroke: var(--ac); stroke-width: 2; stroke-linejoin: round; }
.a-mk text { fill: var(--ac); font-family: var(--f-mono) !important; font-weight: 600; font-size: 12px; }
.a-mk .a-m3t { fill: var(--bg); font-size: 11px; }
.a-mk { transform-box: fill-box; transform-origin: 50% 50%; }
.mov .a-mk { transition: transform .55s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 70ms), opacity .4s var(--ease); }
.mov #as-mapa:not([data-paso="2"]) .a-mk { transform: scale(.55); }

/* step 4: the plan by stages, drawn as revision clouds with their triangle */
.a-nube { fill: color-mix(in srgb, var(--ac) 7%, transparent); stroke: var(--ac); stroke-width: 1.9; stroke-linejoin: round; }
.a-rv path { fill: var(--ac); stroke: var(--ac); stroke-width: 2; stroke-linejoin: round; }
.a-rv text { fill: var(--bg); font-family: var(--f-mono) !important; font-weight: 700; font-size: 12px; text-anchor: middle; }
.a-nl { fill: var(--ac); font-weight: 700; font-size: 14px; letter-spacing: -.01em; paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; }
.a-evo { fill: var(--tinta); font-weight: 650; font-size: 15px; letter-spacing: -.012em; }
.a-evo-s { fill: var(--gr); font-weight: 500; font-size: 13px; }
.a-nb { transform-box: fill-box; transform-origin: 50% 50%; }
.mov .a-nb { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.mov #as-mapa:not([data-paso="3"]) .a-nb { transform: scale(.94); }

/* the hero sheet draws itself once when the page arrives; every drawn line scales out of its start */
@keyframes as-x { from { transform: scaleX(0); } }
@keyframes as-y { from { transform: scaleY(0); } }
@keyframes as-fd { from { opacity: 0; } }
.mov .dr, .mov .fd { transform-box: fill-box; }
.mov .dr.hx { transform-origin: 0 50%; animation: as-x var(--t, .6s) cubic-bezier(.3, .7, .2, 1) var(--d, 0s) both; }
.mov .dr.hxr { transform-origin: 100% 50%; animation: as-x var(--t, .6s) cubic-bezier(.3, .7, .2, 1) var(--d, 0s) both; }
.mov .dr.hy { transform-origin: 50% 0; animation: as-y var(--t, .6s) cubic-bezier(.3, .7, .2, 1) var(--d, 0s) both; }
.mov .dr.hyu { transform-origin: 50% 100%; animation: as-y var(--t, .6s) cubic-bezier(.3, .7, .2, 1) var(--d, 0s) both; }
.mov .fd { animation: as-fd .6s var(--ease) var(--d, 0s) both; }

/* the phone plan is its own drawing (portrait, bigger type per unit); same vocabulary, other sizes */
.a-nt-m { font-size: 16px; } .a-n-m { font-size: 14px; } .a-s-m { font-size: 10px; } .a-h-m { font-size: 12.5px; } .a-hs-m { font-size: 10px; } .a-k-m { font-size: 9px; }
.a-tg-m circle { stroke-width: 1.5; } .a-tg-m text { font-size: 10.5px; }
.a-pi-m text { font-size: 9.5px; }
.a-rc-m { font-size: 9.5px; }
.a-ch rect { fill: var(--bg); stroke: color-mix(in srgb, var(--tinta) 55%, transparent); stroke-width: 1.2; }
.a-ch text { fill: var(--tinta); font-weight: 600; font-size: 11.5px; text-anchor: middle; }
.a-nl-m { font-size: 13px; } .a-evo-m { font-size: 12.5px; }
.a-lgt { fill: var(--tinta); font-family: var(--f-mono) !important; font-weight: 500; font-size: 10px; }
.a-lg-mu { stroke-width: 3; } .a-lg-co { stroke-width: 7; } .a-lg-ci { stroke-width: 4.6; }
.a-lg-v, .a-lg-c, .a-lg-k { fill: none; stroke-linecap: round; stroke-width: 2.8; }
.a-lg-v { stroke: var(--ac); } .a-lg-c, .a-lg-k { stroke: var(--tinta); } .a-lg-k { stroke-dasharray: 7 3.5 1.5 3.5; }
.a-rt-m .a-rs { stroke-width: 2.8; }
.a-rt-m .a-st circle { stroke-width: 2; r: 9; }
.a-rt-m .a-st text { font-size: 10.5px; }

/* ---------- 1. the sheet as a layout: every overlay is placed in the sheet's own units (u = 1/1400 of the sheet's width) ---------- */
.as-hoja { width: min(100%, calc((100vh - 104px) * 1.8919)); width: min(100%, calc((100svh - 104px) * 1.8919)); aspect-ratio: 1400 / 740; margin-inline: auto; }
.as-hoja > * { --u: calc(100cqw / 1400); }
.as-mv { display: none; }
.as-ley, .as-leyes, .as-own, .as-key, .as-hal, .as-eta, .as-caj-r, .as-rut ol, .as-rail, .as-notas { list-style: none; margin: 0; padding: 0; }
.as-ic { flex: none; width: 34px; height: 14px; overflow: visible; }
.as-ic * { fill: none; stroke: var(--tinta); stroke-width: 1.6; }
.as-ic .ic-mu { stroke-width: 3.4; }
.as-ic .ic-co { stroke-width: 7; }
.as-ic .ic-pt { fill: var(--bg); stroke-width: 2; }
.as-ic .ic-ma { stroke-dasharray: 4 3.5; }
.as-ic .ic-rv, .as-ic .ic-rvc { stroke: var(--ac); stroke-width: 3; }
.as-ic .ic-rvc { fill: var(--ac); stroke-width: 1; }
.as-ic .ic-rc, .as-ic .ic-rk { stroke-width: 2.6; }
.as-ic .ic-rk { stroke-dasharray: 8 4 2 4; }
.as-ic .ic-rcc { fill: var(--bg); stroke-width: 2; }
.as-mk { flex: none; width: 26px; height: 18px; overflow: visible; }
.as-mk * { fill: color-mix(in srgb, var(--ac) 22%, transparent); stroke: var(--ac); stroke-width: 1.7; stroke-linejoin: round; }
.as-mk .f { fill: var(--ac); }
.as-tri { flex: none; width: 26px; height: 22px; overflow: visible; }
.as-tri path { fill: var(--ac); stroke: var(--ac); stroke-width: 2; stroke-linejoin: round; }
.as-tri text { fill: var(--bg); stroke: none; font-family: var(--f-mono); font-weight: 700; font-size: 12px; }

/* revision box (cajetín): who drew it, which revision we are on */
.as-caj { position: absolute; left: calc(var(--u) * 884); top: calc(var(--u) * 600); width: calc(var(--u) * 468); height: calc(var(--u) * 94); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 196);
  border: 1px solid color-mix(in srgb, var(--tinta) 55%, transparent); font-size: max(10px, calc(var(--u) * 12)); line-height: 1.2; color: var(--gr); }
.as-caj-i { display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--u) * 8) calc(var(--u) * 12); border-right: 1px solid color-mix(in srgb, var(--tinta) 55%, transparent); }
.as-caj-i b { color: var(--tinta); font-weight: 700; font-size: 1.25em; letter-spacing: .14em; }
.as-caj-i span { display: block; }
.as-cur i { font-style: normal; color: var(--tinta); font-family: var(--f-mono); }
.as-caj-r { display: grid; grid-template-rows: repeat(4, 1fr); }
.as-caj-r li { display: grid; grid-template-columns: calc(var(--u) * 32) minmax(0, 1fr); align-items: center; border-top: 1px solid color-mix(in srgb, var(--tinta) 30%, transparent); color: var(--gr); transition: color .35s var(--ease); }
.as-caj-r li:first-child { border-top: 0; }
.as-caj-r b { text-align: center; font-family: var(--f-mono); font-weight: 600; color: inherit; }
.as-hoja-h .as-caj-r li:first-child { color: var(--tinta); }
.as-hoja-h .as-caj-r li:first-child b { color: var(--ac); }
.as-hj { display: none; }

/* ---------- the hero ---------- */
#as-hero { position: relative; z-index: 1; box-sizing: border-box; background: var(--hero); color: var(--hero-ink); padding: 76px 22px 28px; overflow: hidden; display: grid; place-items: center; --e: max(0, calc((var(--a, .5) - .5) * 2)); }
.mov #as-hero { min-height: 100vh; min-height: 100svh; }
.as-hoja-h { --tinta: var(--hero-ink); }
.as-texto { position: absolute; left: calc(var(--u) * 62); top: calc(var(--u) * 80); width: calc(var(--u) * 396); }
.as-h1 { font-weight: 700; letter-spacing: -.04em; }
.as-h1-a { display: block; font-weight: 600; font-size: max(15px, calc(var(--u) * 24)); line-height: 1.2; letter-spacing: -.012em; color: var(--hero-gris); }
.as-h1-b { display: block; margin-top: calc(var(--u) * 8); font-size: max(40px, calc(var(--u) * 90)); line-height: .97; text-wrap: balance; }
.as-sub { margin-top: calc(var(--u) * 24); max-width: 20em; font-weight: 600; font-size: max(15px, calc(var(--u) * 21)); line-height: 1.26; letter-spacing: -.014em; color: var(--hero-gris); text-wrap: pretty; }
.as-texto .acciones { justify-content: flex-start; margin-top: calc(var(--u) * 24); }
.as-ley-h { position: absolute; left: calc(var(--u) * 62); top: calc(var(--u) * 616); display: grid; gap: calc(var(--u) * 6); font-size: max(10.5px, calc(var(--u) * 13)); color: var(--gr); }
.as-ley-h li { display: flex; align-items: center; gap: .7em; }
.as-pie { position: absolute; left: calc(var(--u) * 486); top: calc(var(--u) * 642); width: calc(var(--u) * 360); font-family: var(--f-mono); font-size: max(10px, calc(var(--u) * 11)); line-height: 1.35; color: var(--gr); }
.a-mira { opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.as-hoja.on .a-mira { opacity: 1; }
.a-mira path { fill: none; stroke: var(--ac); stroke-width: 1; stroke-dasharray: 3 4; }
.a-mira-c { fill: none; stroke: var(--ac); stroke-width: 1.4; }
.a-mira-v { transform: translateX(calc(var(--cx, 0) * 1px)); transition: transform .12s linear; }
.a-mira-h { transform: translateY(calc(var(--cy, 0) * 1px)); transition: transform .12s linear; }
.a-mira-c { transform: translate(calc(var(--cx, 0) * 1px), calc(var(--cy, 0) * 1px)); transition: transform .12s linear; }
.mov #as-hero .as-texto { transform: translateY(calc(var(--e) * -40px)); will-change: transform; }
.mov #as-hero .a-par { transform: translateY(calc(var(--e) * -26px)); }
.mov #as-hero .a-gl, .mov #as-hero .a-dm { opacity: calc(1 - var(--e) * 1.4); }

/* ---------- 2. the stage: one plan, four layers ---------- */
#as-mapa { z-index: 1; background: var(--hero); }
#as-mapa .fijo { box-sizing: border-box; background: var(--oscuro); color: var(--oscuro-ink); padding: 52px 22px 40px; }
.as-hoja-m { margin: 0 auto; }
.as-izq { position: absolute; left: calc(var(--u) * 62); top: calc(var(--u) * 66); width: calc(var(--u) * 396); }
.as-eti { font-weight: 600; font-size: max(13px, calc(var(--u) * 17)); line-height: 1.2; color: var(--acento-oscuro); }
.as-cont { display: none; }
.as-h2 { margin-top: calc(var(--u) * 8); font-weight: 700; font-size: max(24px, calc(var(--u) * 42)); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.as-barra, .as-rail { display: none; }
.as-notas { display: grid; gap: calc(var(--u) * 22); margin-top: calc(var(--u) * 26); }
.as-nt small { display: block; font-family: var(--f-mono); font-size: max(11px, calc(var(--u) * 12.5)); color: var(--acento-oscuro); }
.as-nt h3 { margin-top: 4px; font-weight: 700; font-size: max(18px, calc(var(--u) * 24)); line-height: 1.12; letter-spacing: -.02em; }
.as-nt p { margin-top: 6px; font-size: max(14px, calc(var(--u) * 17)); line-height: 1.32; color: var(--oscuro-gris); }
.as-reg { font-family: var(--f-mono); font-size: max(11px, calc(var(--u) * 12.5)) !important; }
.as-reg span { color: var(--oscuro-gris); }
.as-leyes { position: absolute; left: calc(var(--u) * 62); top: calc(var(--u) * 600); width: calc(var(--u) * 806); height: calc(var(--u) * 94); font-size: max(10px, calc(var(--u) * 12)); line-height: 1.2; color: var(--gr); display: grid; }
.as-ley-k { grid-area: 1 / 1; min-width: 0; }
.as-own { display: grid; gap: calc(var(--u) * 1.5); }
.as-own li { display: grid; grid-template-columns: calc(var(--u) * 26) calc(var(--u) * 122) minmax(0, 1fr); align-items: center; height: calc(var(--u) * 17.5); }
.as-own b { display: grid; place-items: center; width: 1.45em; height: 1.45em; border: 1.5px solid var(--ac); border-radius: 50%; font-family: var(--f-mono); font-weight: 600; font-size: .86em; color: var(--ac); }
.as-own span { color: var(--tinta); font-weight: 600; }
.as-own em { font-style: normal; color: var(--tinta); }
.as-own em i { font-style: normal; color: var(--gr); }
.as-ley0 { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 190); gap: 0 calc(var(--u) * 34); }
.as-key { display: grid; align-content: start; gap: calc(var(--u) * 12); padding-top: calc(var(--u) * 4); }
.as-key li { display: flex; align-items: center; gap: .7em; }
.as-ley1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 calc(var(--u) * 22); }
.as-rut { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: 0 .7em; }
.as-rut b { color: var(--tinta); font-size: 1.1em; }
.as-rut ol { grid-column: 1 / -1; margin-top: calc(var(--u) * 2); counter-reset: p; }
.as-rut li { counter-increment: p; position: relative; padding-left: 1.7em; line-height: 1.26; }
.as-rut li::before { content: counter(p); position: absolute; left: 0; font-family: var(--f-mono); font-weight: 600; color: var(--tinta); }
.as-ley2 { display: block; }
.as-hal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; gap: 0 calc(var(--u) * 26); height: 100%; }
.as-hal li { display: grid; grid-template-columns: calc(var(--u) * 34) calc(var(--u) * 30) minmax(0, 1fr); align-items: center; }
.as-hal b { font-family: var(--f-mono); color: var(--ac); }
.as-hal em { font-style: normal; font-weight: 600; color: var(--tinta); }
.as-hal span { color: var(--gr); }
.as-ley3 { display: block; }
.as-eta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 calc(var(--u) * 22); }
.as-eta li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .7em; align-items: center; align-content: start; }
.as-eta b { color: var(--tinta); font-size: 1.12em; }
.as-eta span { grid-column: 1 / -1; margin-top: calc(var(--u) * 4); }

/* without motion: the plan, then the four notes, then the four legends, all in order */
#pagina:not(.mov) .as-hoja-m { container-type: normal; width: min(100%, 1240px); aspect-ratio: auto; display: block; }
#pagina:not(.mov) .as-hoja-m .as-pc { position: static; display: block; height: auto; aspect-ratio: 1400 / 740; }
#pagina:not(.mov) .as-hoja-m > * { --u: calc(min(100vw - 44px, 1240px) / 1400); }
#pagina:not(.mov) .as-izq { position: static; width: auto; margin-top: 28px; }
#pagina:not(.mov) .as-notas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#pagina:not(.mov) .as-leyes { position: static; width: auto; height: auto; display: grid; gap: 22px; margin-top: 28px; font-size: 13px; }
#pagina:not(.mov) .as-ley-k { grid-area: auto; }
#pagina:not(.mov) .as-own li { height: auto; min-height: 22px; grid-template-columns: 30px 150px minmax(0, 1fr); }
#pagina:not(.mov) .as-hal { grid-template-rows: none; grid-auto-flow: row; gap: 8px 26px; height: auto; }
#pagina:not(.mov) .as-hal li { grid-template-columns: 40px 38px minmax(0, 1fr); }
#pagina:not(.mov) .as-caj { position: static; width: auto; height: 92px; margin-top: 26px; font-size: 12px; }
#pagina:not(.mov) .as-hoja-m .as-caj-r li { color: var(--tinta); }

/* with motion: one note, one legend at a time; a numbered rail; the revision box follows the step */
.mov #as-mapa .fijo { display: grid; place-items: center; padding-top: 56px; padding-bottom: 28px; 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 .as-hoja-m { width: min(100%, calc((100vh - 84px) * 1.8919)); width: min(100%, calc((100svh - 84px) * 1.8919)); }
.mov .as-barra { display: block; position: relative; height: 2px; margin-top: calc(var(--u) * 20); background: var(--oscuro-linea); }
.mov .as-barra i { position: absolute; inset: 0; background: var(--acento-oscuro); transform-origin: 0 50%; transform: scaleX(var(--s, 1)); }
.mov .as-rail { display: grid; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 16); }
.mov .as-rail li { display: grid; grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr); align-items: baseline; padding: calc(var(--u) * 4) 0; font-weight: 600; font-size: max(15px, calc(var(--u) * 22)); line-height: 1.15; letter-spacing: -.02em; color: color-mix(in srgb, var(--oscuro-ink) 34%, transparent); transition: color .4s var(--ease); }
.mov .as-rail b { font-family: var(--f-mono); font-weight: 500; font-size: .6em; letter-spacing: 0; }
.mov #as-mapa[data-paso="0"] .as-rail li:nth-child(1), .mov #as-mapa[data-paso="1"] .as-rail li:nth-child(2), .mov #as-mapa[data-paso="2"] .as-rail li:nth-child(3), .mov #as-mapa[data-paso="3"] .as-rail li:nth-child(4) { color: var(--oscuro-ink); }
.mov #as-mapa[data-paso="0"] .as-rail li:nth-child(1) b, .mov #as-mapa[data-paso="1"] .as-rail li:nth-child(2) b, .mov #as-mapa[data-paso="2"] .as-rail li:nth-child(3) b, .mov #as-mapa[data-paso="3"] .as-rail li:nth-child(4) b { color: var(--acento-oscuro); }
.mov .as-notas { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: calc(var(--u) * 26); }
.mov .as-nt { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 0 12px; transition: opacity .45s var(--ease), translate .6s cubic-bezier(.4, 0, .2, 1), visibility .45s; border-top: 1px solid var(--oscuro-linea); padding-top: calc(var(--u) * 14); }
.mov .as-nt small, .mov .as-nt h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mov .as-nt p { margin-top: 0; font-weight: 600; font-size: max(15px, calc(var(--u) * 20)); line-height: 1.26; letter-spacing: -.014em; color: var(--oscuro-ink); }
.mov .as-nt .as-reg { margin-top: calc(var(--u) * 12); font-weight: 500; font-size: max(11px, calc(var(--u) * 12.5)) !important; color: color-mix(in srgb, var(--oscuro-ink) 70%, transparent); letter-spacing: 0; }
.mov #as-mapa[data-paso="0"] .as-nt[data-k="0"], .mov #as-mapa[data-paso="1"] .as-nt[data-k="1"], .mov #as-mapa[data-paso="2"] .as-nt[data-k="2"], .mov #as-mapa[data-paso="3"] .as-nt[data-k="3"] { opacity: 1; visibility: visible; translate: 0 0; }
.mov .as-ley-k { opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s; }
.mov #as-mapa[data-paso="0"] .as-ley0, .mov #as-mapa[data-paso="1"] .as-ley1, .mov #as-mapa[data-paso="2"] .as-ley2, .mov #as-mapa[data-paso="3"] .as-ley3 { opacity: 1; visibility: visible; }
.mov .as-hoja-m .as-caj-r li { color: color-mix(in srgb, var(--gr) 70%, transparent); }
.mov #as-mapa[data-paso="0"] .as-caj-r li:nth-child(1), .mov #as-mapa[data-paso="1"] .as-caj-r li:nth-child(-n+2), .mov #as-mapa[data-paso="2"] .as-caj-r li:nth-child(-n+3), .mov #as-mapa[data-paso="3"] .as-caj-r li { color: var(--tinta); }
.mov #as-mapa[data-paso="0"] .as-caj-r li:nth-child(1) b, .mov #as-mapa[data-paso="1"] .as-caj-r li:nth-child(2) b, .mov #as-mapa[data-paso="2"] .as-caj-r li:nth-child(3) b, .mov #as-mapa[data-paso="3"] .as-caj-r li:nth-child(4) b { color: var(--ac); }
.mov .as-hoja-m .as-hj { display: block; position: absolute; opacity: 0; transition: opacity .35s var(--ease); }
.mov .as-hoja-m .as-caj-i { position: relative; }
.mov .as-hoja-m .as-hj { left: calc(var(--u) * 12); bottom: calc(var(--u) * 8); }
.mov #as-mapa[data-paso="0"] .as-hj[data-k="0"], .mov #as-mapa[data-paso="1"] .as-hj[data-k="1"], .mov #as-mapa[data-paso="2"] .as-hj[data-k="2"], .mov #as-mapa[data-paso="3"] .as-hj[data-k="3"] { opacity: 1; }
.as-hoja-m .as-pie-g { min-height: 1.2em; }

/* ---------- phones and narrow windows: the plan is portrait, text and drawing stack ---------- */
@media (max-width: 900px) {
  .as-pc { display: none; }
  .as-mv { display: block; position: static; width: 100%; height: auto; }
  .as-hoja { container-type: normal; width: 100%; max-width: 520px; aspect-ratio: auto; }
  .as-hoja > * { --u: 1px; }
  .as-hoja-h { display: flex; flex-direction: column; }
  #as-hero { display: block; padding: 76px 22px 30px; }
  .as-texto { position: static; width: auto; order: 1; }
  .as-h1-a { font-size: 19px; }
  .as-h1-b { margin-top: 4px; font-size: clamp(2.7rem, 14vw, 3.7rem); line-height: .98; }
  .as-sub { margin-top: 14px; font-size: 17px; max-width: none; }
  .as-texto .acciones { margin-top: 16px; }
  .as-hoja-h .as-mv { order: 2; margin-top: 18px; aspect-ratio: 380 / 480; }
  .as-ley-h, .as-pie, .as-hoja-h .as-caj { display: none; }
  .mov #as-hero .as-texto { transform: none; will-change: auto; }
  .as-mv .a-rc-m { font-size: 9.5px; }
  .as-hoja-m .as-mv { aspect-ratio: 380 / 530; }
  .mov #as-mapa .fijo { display: flex; flex-direction: column; place-items: initial; justify-content: flex-start; padding: 62px 22px 104px; }
  .mov .as-hoja-m { display: contents; }
  .mov .as-izq { display: contents; }
  .mov .as-cab { order: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 6px; }
  .mov .as-eti { font-size: 17px; }
  .mov .as-cont { display: grid; justify-items: end; font-family: var(--f-mono); font-size: 14px; color: var(--oscuro-gris); }
  .mov .as-cont span { grid-area: 1 / 1; opacity: 0; transition: opacity .35s var(--ease); }
  .mov .as-cont span::after { content: " / 04"; }
  .mov #as-mapa[data-paso="0"] .as-cont span:nth-child(1), .mov #as-mapa[data-paso="1"] .as-cont span:nth-child(2), .mov #as-mapa[data-paso="2"] .as-cont span:nth-child(3), .mov #as-mapa[data-paso="3"] .as-cont span:nth-child(4) { opacity: 1; color: var(--oscuro-ink); }
  .mov .as-h2, .mov .as-rail, .mov .as-leyes, .mov .as-hoja-m .as-caj { display: none; }
  .mov .as-barra { order: 2; margin-top: 10px; }
  .mov .as-hoja-m .as-mv { order: 3; width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 312px); margin: 12px auto 0; flex: none; }
  .mov .as-notas { order: 4; margin-top: 8px; }
  .mov .as-nt p { font-size: 1.0625rem; line-height: 1.28; }
  .mov .as-nt .as-reg { display: none; }
  /* static (no motion): the sheet, then text */
  #pagina:not(.mov) .as-hoja-m { max-width: 520px; }
  #pagina:not(.mov) .as-hoja-m .as-pc { display: none; }
  #pagina:not(.mov) .as-notas { grid-template-columns: minmax(0, 1fr); }
  #pagina:not(.mov) .as-leyes { font-size: 13px; }
  #pagina:not(.mov) .as-ley0 { grid-template-columns: minmax(0, 1fr); }
  #pagina:not(.mov) .as-ley1, #pagina:not(.mov) .as-hal, #pagina:not(.mov) .as-eta { grid-template-columns: minmax(0, 1fr); }
  #pagina:not(.mov) .as-caj { font-size: 12px; }
}

/* ---------- 3. «Lo que te llevas»: three sheets on a table; they are dealt out as the section arrives ---------- */
#as-llevas { position: relative; z-index: 2; box-sizing: border-box; background-color: var(--alt); background-image: linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; color: var(--ink); border-radius: 36px 36px 0 0; padding: 92px 22px 112px; --e: clamp(0, calc((var(--a, .5) - .08) / .34), 1);
  --k: min(calc((min(100vw, 1284px) - 44px) / 1240), calc((100vh - 384px) / 530)); --k: min(calc((min(100vw, 1284px) - 44px) / 1240), calc((100svh - 384px) / 530)); }
.mov #as-llevas { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.as-ll-in { width: min(100%, 1240px); margin-inline: auto; }
.as-ll-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 0 56px; align-items: end; }
.as-ll-cab .etiqueta { grid-column: 1 / -1; }
.as-ll-cab .titulo { margin-top: 8px; font-size: clamp(2.2rem, min(4.2vw, 6.6vh), 3.75rem); }
.as-ll-sub { font-weight: 600; font-size: 1.0625rem; line-height: 1.27; letter-spacing: -.014em; color: var(--gris); padding-bottom: 6px; }
.as-mesa.carril { overflow: visible; scroll-snap-type: none; margin-top: clamp(22px, 4vh, 44px); }
.as-mesa .fila { position: relative; display: block; width: auto; height: calc(var(--k) * 530); }
.as-ho { position: absolute; z-index: 1; margin: 0; }
.as-ho1 { left: 0; top: calc(var(--k) * 56); width: calc(var(--k) * 500); }
.as-ho2 { left: calc(var(--k) * 494); top: 0; width: calc(var(--k) * 330); z-index: 3; }
.as-ho3 { left: calc(var(--k) * 808); top: calc(var(--k) * 64); width: calc(var(--k) * 432); z-index: 2; }
.as-ho3 h3 { padding-left: calc(var(--k) * 40); }
.as-doc { display: block; width: 100%; height: auto; overflow: visible; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 14px 34px -10px rgba(0, 0, 0, .22); border-radius: 3px;
  --tinta: #1D1D1F; --gr: #6E6E73; --ac: #E8501A; --bg: #FFFFFF; --sup: #FFFFFF; transition: translate .45s cubic-bezier(.2, .7, .2, 1), rotate .45s cubic-bezier(.2, .7, .2, 1), scale .45s cubic-bezier(.2, .7, .2, 1); }
.as-ho1 .as-doc { rotate: -2.2deg; } .as-ho2 .as-doc { rotate: .8deg; } .as-ho3 .as-doc { rotate: 2.4deg; }
.as-ho:hover { z-index: 4; }
.as-ho:hover .as-doc { rotate: 0deg; translate: 0 -12px; scale: 1.025; }
.as-ho h3 { margin-top: calc(var(--k) * 22); counter-increment: hj; font-weight: 600; font-size: clamp(.95rem, calc(var(--k) * 17), 1.1rem); line-height: 1.26; letter-spacing: -.014em; max-width: 21em; }
.as-ho h3::before { content: "0" counter(hj); display: block; margin-bottom: 4px; font-family: var(--f-mono); font-weight: 500; font-size: 13px; color: var(--acento); letter-spacing: 0; }
.as-mesa { counter-reset: hj; }
.mov .as-ho1 { transform: translate(calc((1 - var(--e)) * var(--k) * 320), calc((1 - var(--e)) * var(--k) * 18)); }
.mov .as-ho2 { transform: translate(0, calc((1 - var(--e)) * var(--k) * 40)); }
.mov .as-ho3 { transform: translate(calc((1 - var(--e)) * var(--k) * -310), calc((1 - var(--e)) * var(--k) * 12)); }
.mov .as-ho h3 { opacity: calc(var(--e) * var(--e)); }
@media (max-height: 800px) and (min-width: 901px) {
  #as-llevas { padding: 70px 22px 78px; --k: min(calc((min(100vw, 1284px) - 44px) / 1240), calc((100vh - 268px) / 530)); --k: min(calc((min(100vw, 1284px) - 44px) / 1240), calc((100svh - 268px) / 530)); }
  .as-ll-sub { display: none; }
  .as-ll-cab .titulo { font-size: clamp(2rem, 4vw, 3rem); }
  .as-mesa.carril { margin-top: 16px; }
}
/* the documents */
.d-pa { fill: var(--sup); }
.d-fr { fill: none; stroke: color-mix(in srgb, var(--tinta) 70%, transparent); stroke-width: 1.2; }
.d-fr2 { fill: none; stroke: color-mix(in srgb, var(--tinta) 28%, transparent); stroke-width: .8; }
.d-ln { fill: none; stroke: color-mix(in srgb, var(--tinta) 55%, transparent); stroke-width: 1; }
.d-ln2 { fill: none; stroke: color-mix(in srgb, var(--tinta) 14%, transparent); stroke-width: 1; }
.d-cruz path { fill: none; stroke: color-mix(in srgb, var(--tinta) 8%, transparent); stroke-width: 1; }
.as-doc text { font-family: var(--f); }
.d-m { fill: var(--gr); font-family: var(--f-mono) !important; font-weight: 500; font-size: 9.5px; letter-spacing: .06em; }
.d-ac { fill: var(--ac); }
.d-tt { fill: var(--tinta); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.d-g { fill: var(--gr); font-weight: 500; font-size: 11.5px; }
.d-g2 { fill: var(--tinta); font-weight: 500; font-size: 10.5px; }
.d-dd { fill: var(--tinta); font-weight: 600; font-size: 13px; letter-spacing: -.01em; }
.d-nn { fill: var(--ac); font-family: var(--f-mono) !important; font-weight: 600; font-size: 24px; }
.d-nm { fill: var(--tinta); font-weight: 700; font-size: 9.5px; letter-spacing: -.01em; }
.d-rv { fill: none; stroke: var(--ac); stroke-width: 2; stroke-linejoin: round; }
.d-rc, .d-rk { fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linejoin: round; }
.d-rk { stroke-dasharray: 5 3 1 3; }
.d-pv { fill: var(--ac); }
.d-tri path { fill: var(--ac); stroke: var(--ac); stroke-width: 1.6; stroke-linejoin: round; }
.d-tri text { fill: #FFFFFF; font-family: var(--f-mono) !important; font-weight: 700; font-size: 10.5px; }
.d-corte { fill: none; stroke: var(--ac); stroke-width: 1.4; stroke-dasharray: 5 4; }
.d-esp .d-dd { fill: var(--gr); }
.d-esp .d-nn { fill: color-mix(in srgb, var(--tinta) 30%, transparent); }
.d-esp .d-tri { opacity: .45; }
.d-bar { fill: color-mix(in srgb, var(--ac) 8%, #fff); stroke: var(--ac); stroke-width: 1.6; }
.d-bar-u { fill: color-mix(in srgb, var(--ac) 18%, #fff); }
.mov .d-row, .mov .d-esc { transform-box: fill-box; }
.mov .d-esc { transform-origin: 50% 100%; transform: scaleY(calc(.25 + var(--e) * .75)); opacity: calc(.2 + var(--e) * .8); }
.mov .d-row { opacity: calc(.15 + var(--e) * .85); }
/* the plan sheet uses the same vocabulary as the hero, at half size */
.as-doc .a-mu { stroke-width: 4; } .as-doc .a-co { stroke-width: 9; } .as-doc .a-co-i { stroke: #fff; }

/* ---------- 4. «Lo habitual»: a register of drawings ---------- */
#as-sin { position: relative; z-index: 3; box-sizing: border-box; margin-top: -36px; background: var(--oscuro); color: var(--oscuro-ink); border-radius: 36px 36px 0 0; padding: 124px 22px 128px;
  --tinta: #F5F5F7; --gr: #86868B; --ac: #FF7A3D; --bg: #000000; }
.mov #as-sin { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.as-sin-in { width: min(100%, 1240px); margin-inline: auto; }
#as-sin .etiqueta { color: var(--acento-oscuro); }
#as-sin .titulo { margin-top: 8px; max-width: 12em; font-size: clamp(2.2rem, min(4.2vw, 6.6vh), 3.75rem); }
.as-regi { list-style: none; margin: clamp(24px, 4.4vh, 44px) 0 0; padding: 0; border-top: 1px solid var(--oscuro-linea); counter-reset: s; }
.as-sr { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 470px); align-items: center; gap: 0 36px; padding: clamp(10px, 1.9vh, 20px) 0; border-bottom: 1px solid var(--oscuro-linea); }
.as-sr-n { align-self: start; padding-top: 8px; font-family: var(--f-mono); font-size: 14px; color: var(--acento-oscuro); }
.as-sr-t { font-weight: 700; font-size: clamp(1.35rem, min(2.35vw, 4.4vh), 2.2rem); line-height: 1.12; letter-spacing: -.03em; max-width: 17em; text-wrap: balance; }
.as-sr-d { min-width: 0; }
.as-sd { display: block; width: 100%; height: auto; overflow: visible; }
.as-sd text { font-family: var(--f); }
.sd-m { fill: var(--gr); font-family: var(--f-mono) !important; font-weight: 500; font-size: 11px; }
.sd-g { fill: var(--gr); font-weight: 500; font-size: 11px; }
.sd-tr { fill: none; stroke: color-mix(in srgb, var(--tinta) 16%, transparent); stroke-width: 4; }
.sd-ar { fill: none; stroke: var(--tinta); stroke-width: 4; stroke-linecap: round; }
.sd-tk { fill: none; stroke: var(--ac); stroke-width: 2; stroke-linecap: round; }
.sd-ex rect { fill: color-mix(in srgb, var(--tinta) 7%, transparent); stroke: color-mix(in srgb, var(--tinta) 45%, transparent); stroke-width: 1.4; }
.sd-p rect { fill: color-mix(in srgb, var(--ac) 13%, transparent); stroke: var(--ac); stroke-width: 1.6; stroke-dasharray: 6 4; }
.sd-pn { fill: var(--ac); font-weight: 650; font-size: 11.5px; }
.sd-c rect { fill: none; stroke: color-mix(in srgb, var(--tinta) 38%, transparent); stroke-width: 1.2; stroke-dasharray: 3 3; }
.sd-q { fill: var(--ac); font-weight: 700; font-size: 14px; }
.sd-ok rect { fill: color-mix(in srgb, var(--tinta) 10%, transparent); stroke: color-mix(in srgb, var(--tinta) 55%, transparent); stroke-dasharray: none; }
.sd-ok circle { fill: var(--tinta); }
.mov .sd-g { opacity: 1; }
.mov .sd-ar { transition: none; }
.mov .as-sr { opacity: calc(.12 + var(--v, 1) * .88); translate: 0 calc((1 - var(--v, 1)) * 26px); }
.mov .sd-ring, .mov .sd-g[style] { transform-box: fill-box; }
.mov .sd-p0 { translate: calc((1 - var(--v, 1)) * -26px) 0; } .mov .sd-p2 { translate: calc((1 - var(--v, 1)) * 26px) 0; } .mov .sd-p1 { translate: 0 calc((1 - var(--v, 1)) * 14px); }

/* ---------- 5. «Antes de empezar»: three questions, one sheet at a time ---------- */
#as-preg { position: relative; z-index: 4; box-sizing: border-box; margin-top: -36px; background: var(--pagina); color: var(--ink); border-radius: 36px 36px 0 0; padding: 112px 22px 120px; }
.mov #as-preg { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.as-preg-in { width: min(100%, 1240px); margin-inline: auto; }
#as-preg .titulo { margin-top: 8px; }
.as-tabs { margin-top: clamp(22px, 4vh, 40px); display: grid; gap: 22px; }
.as-tabs.con-js { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 0 clamp(28px, 4.4vw, 64px); align-items: center; }
.as-tabs-l { display: grid; gap: 4px; border-left: 1px solid var(--linea); }
.as-tabs-l button { display: block; width: 100%; text-align: left; margin-left: -1px; padding: 18px 20px 20px 24px; border: 0; border-left: 3px solid transparent; background: none; color: var(--gris); cursor: pointer; font: 700 clamp(1.1rem, min(1.6vw, 2.9vh), 1.45rem)/1.16 var(--f); letter-spacing: -.024em; transition: color .3s var(--ease); }
.as-tabs-l button span { display: block; margin-bottom: 8px; font: 500 13px var(--f-mono); letter-spacing: 0; color: var(--gris); }
.as-tabs-l button:hover { color: var(--ink); }
.as-tabs-l button[aria-selected="true"] { color: var(--ink); border-left-color: var(--acento); }
.as-tabs-l button[aria-selected="true"] span { color: var(--acento); }
.as-pn { box-sizing: border-box; background: var(--alt); border-radius: 26px; padding: clamp(18px, 2.6vw, 34px) clamp(18px, 3vw, 40px) clamp(20px, 3vw, 36px); }
.as-pn h3 { font-weight: 700; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.024em; margin-bottom: 18px; }
.con-js .as-pn { grid-column: 2; grid-row: 1; }
.con-js .as-pn h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.as-pn-d { max-height: calc(100svh - 440px); }
.as-pn p { margin-top: 20px; max-width: 34em; font-weight: 600; font-size: clamp(1.02rem, min(1.4vw, 2.6vh), 1.25rem); line-height: 1.28; letter-spacing: -.016em; }
.mov .as-pn:not([hidden]) { animation: as-pn .5s var(--ease) both; }
@keyframes as-pn { from { opacity: 0; translate: 0 12px; } }
.as-qd { display: block; width: 100%; height: auto; max-height: calc(100svh - 440px); overflow: visible; --tinta: #1D1D1F; --gr: #6E6E73; --ac: #E8501A; --bg: #F5F5F7; }
.as-qd text { font-family: var(--f); }
.qd-m { fill: var(--gr); font-family: var(--f-mono) !important; font-weight: 500; font-size: 11px; letter-spacing: .08em; }
.qd-ac { fill: var(--ac); }
.qd-b { fill: var(--tinta); font-weight: 650; font-size: 15px; letter-spacing: -.014em; }
.qd-n { fill: var(--tinta); font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; }
.qd-nf { fill: var(--gr); }
.qd-nt { font-size: 13px; }
.qd-mv { display: none; } .qd-nm { font-size: 12.5px; } .qd-bm { font-size: 13px; }
.qd-bw { fill: #fff; font-weight: 650; font-size: 14px; }
.qd-box { fill: #fff; stroke: var(--tinta); stroke-width: 1.4; }
.qd-no { stroke: var(--ac); }
.qd-ck { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qd-ckn { stroke: var(--ac); }
.qd-ln { fill: color-mix(in srgb, var(--tinta) 14%, transparent); }
.qd-ln2 { fill: color-mix(in srgb, var(--tinta) 8%, transparent); }
.qd-sep { fill: none; stroke: color-mix(in srgb, var(--tinta) 22%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.qd-fr { fill: var(--bg); stroke: color-mix(in srgb, var(--tinta) 35%, transparent); stroke-width: 1; }
.qd-st { fill: #fff; stroke: var(--tinta); stroke-width: 1.5; }
.qd-st-u { fill: color-mix(in srgb, var(--ac) 10%, #fff); stroke: var(--ac); }
.qd-flecha { fill: none; stroke: color-mix(in srgb, var(--tinta) 30%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.as-qd .d-tri path { fill: var(--ac); stroke: var(--ac); stroke-width: 1.6; stroke-linejoin: round; }
.as-qd .d-tri text { fill: #fff; font-family: var(--f-mono) !important; font-weight: 700; font-size: 10.5px; }
.qd-bl { fill: #fff; stroke: color-mix(in srgb, var(--tinta) 45%, transparent); stroke-width: 1.3; }
.qd-fal { fill: color-mix(in srgb, var(--ac) 8%, #fff); stroke: var(--ac); stroke-dasharray: 5 4; }
.qd-cn { fill: none; stroke: color-mix(in srgb, var(--tinta) 50%, transparent); stroke-width: 1.4; }
.qd-br { fill: none; stroke: color-mix(in srgb, var(--tinta) 55%, transparent); stroke-width: 1.2; }
.qd-rev { fill: var(--ac); }
.qd-fl { fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qd-sg { fill: #fff; stroke: var(--tinta); stroke-width: 1.5; }
.qd-esp { fill: none; stroke: color-mix(in srgb, var(--tinta) 40%, transparent); stroke-dasharray: 5 4; }
.qd-sg.qd-esp { fill: none; }
.mov .qd-fil { animation: as-pn .5s var(--ease) calc(var(--i, 0) * 70ms + .1s) both; }
.mov .qd-esc { transform-box: fill-box; transform-origin: 50% 100%; animation: as-esc .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 90ms + .1s) both; }
@keyframes as-esc { from { opacity: 0; transform: scaleY(.2); } }

/* ---------- 6. after the map: each stage has its service ---------- */
#as-obra { position: relative; z-index: 5; box-sizing: border-box; margin-top: -36px; background: var(--alt); color: var(--ink); border-radius: 36px 36px 0 0; padding: 120px 22px 132px; }
.mov #as-obra { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.as-obra-in { width: min(100%, 1240px); margin-inline: auto; }
#as-obra .titulo { margin-top: 8px; max-width: 13em; font-size: clamp(2.2rem, min(4.2vw, 6.6vh), 3.75rem); }
.as-obra-l { list-style: none; margin: clamp(22px, 4vh, 44px) 0 0; padding: 0; border-top: 1px solid var(--linea); }
.as-ob a { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr) 170px; align-items: center; gap: 0 36px; padding: clamp(20px, 3.8vh, 38px) 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: inherit; }
.as-ob .as-tri2 { position: absolute; left: 0; top: 50%; width: 34px; height: 29px; translate: 0 -50%; }
.as-tri2 path { fill: var(--acento); stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; }
.as-tri2 text { fill: #fff; font-family: var(--f-mono); font-weight: 700; font-size: 12px; }
.as-ob-e { padding-left: 50px; font-family: var(--f-mono); font-weight: 500; font-size: 13px; color: var(--gris); }
.as-ob-n { display: grid; gap: 8px; }
.as-ob b { font-weight: 700; font-size: clamp(1.7rem, min(3.2vw, 5.6vh), 2.9rem); line-height: 1.05; letter-spacing: -.034em; transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.as-ob-t { max-width: 30em; font-weight: 600; font-size: 1.0625rem; line-height: 1.27; letter-spacing: -.014em; color: var(--gris); }
.og { display: block; width: 100%; height: auto; justify-self: end; overflow: visible; --tinta: #1D1D1F; --gr: #6E6E73; --ac: #E8501A; }
.og-b { fill: #fff; stroke: var(--tinta); stroke-width: 2.4; }
.og-h { fill: color-mix(in srgb, var(--tinta) 4%, #fff); stroke-width: 1.6; stroke-dasharray: 5 3.5; }
.og-g { fill: none; stroke: color-mix(in srgb, var(--tinta) 30%, transparent); stroke-width: 1; }
.og-t { fill: var(--tinta); font-family: var(--f); font-weight: 650; font-size: 11.5px; }
.og-co { fill: none; stroke: var(--tinta); stroke-width: 9; } .og-ci { fill: none; stroke: var(--alt); stroke-width: 6; }
.og-pt { fill: var(--alt); stroke: var(--tinta); stroke-width: 2.2; } .og-ac { fill: var(--ac); }
.og-fl { fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.og-s { fill: none; stroke: color-mix(in srgb, var(--tinta) 55%, transparent); stroke-width: 1.5; }
.og-u { fill: var(--ac); }
.as-ob i { position: absolute; right: 0; bottom: calc(clamp(14px, 2.4vh, 24px) - 6px); font-style: normal; font-size: 15px; color: var(--acento); opacity: 0; translate: -8px 0; transition: opacity .3s var(--ease), translate .4s cubic-bezier(.2, .7, .2, 1); }
.as-ob a:hover b, .as-ob a:focus-visible b { translate: 10px 0; }
.as-ob a:hover i, .as-ob a:focus-visible i { opacity: 1; translate: 0 0; }
.mov .as-ob { opacity: calc(.12 + var(--v, 1) * .88); translate: 0 calc((1 - var(--v, 1)) * 26px); }
.serv-cierre { position: relative; z-index: 6; margin-top: -36px; border-radius: 36px 36px 0 0; padding-top: calc(clamp(72px, 13vh, 140px) + 36px); }

@media (max-height: 800px) and (min-width: 901px) {
  #as-sin { padding: 100px 22px 96px; }
  #as-preg { padding: 92px 22px 96px; }
  #as-obra { padding: 96px 22px 100px; }
  .as-regi { margin-top: 20px; }
  .as-sr { padding-block: 12px; }
  .as-sr-t { font-size: clamp(1.3rem, 2.1vw, 1.8rem); }
  #as-obra .titulo, #as-sin .titulo, #as-preg .titulo { font-size: clamp(2rem, 3.6vw, 3rem); max-width: none; }
  .as-obra-l { margin-top: 18px; }
  .as-ob a { padding-block: 16px; }
  .as-tabs { margin-top: 18px; }
}

@media (max-width: 900px) {
  #as-llevas { padding: 82px 22px 100px; --k: 1px; }
  .mov #as-llevas { align-content: center; }
  .as-ll-cab { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
  .as-ll-cab .titulo { font-size: clamp(2.3rem, 11vw, 3rem); }
  .as-ll-sub { padding: 0; }
  .as-mesa.carril { overflow-x: auto; scroll-snap-type: x mandatory; margin: 24px -22px 0; }
  .as-mesa .fila { display: flex; width: max-content; height: auto; gap: 14px; padding: 8px 22px 28px; align-items: center; }
  .as-ho, .as-ho1, .as-ho2, .as-ho3 { position: relative; left: auto; top: auto; z-index: auto; width: min(316px, calc(100vw - 80px)); scroll-snap-align: center; flex: none; }
  .mov .as-ho1, .mov .as-ho2, .mov .as-ho3 { transform: none; }
  .mov .as-ho h3 { opacity: 1; }
  .as-ho .as-doc { rotate: 0deg; }
  .as-ho h3 { margin-top: 16px; font-size: 1rem; }
  .mov .d-esc { transform: none; opacity: 1; } .mov .d-row { opacity: 1; }
  #as-sin { padding: 76px 22px 92px; }
  .as-sr { grid-template-columns: minmax(0, 1fr); gap: 5px 0; padding: 11px 0 10px; }
  .as-sr-n { padding: 0; }
  .as-sr-t { font-size: 1.14rem; line-height: 1.16; }
  .as-sr-d { max-width: 300px; }
  #as-sin .titulo { font-size: clamp(2rem, 9.4vw, 2.5rem); }
  .as-regi { margin-top: 20px; }
  #as-preg { padding: 96px 22px 110px; }
  .as-tabs.con-js { grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
  .as-tabs-l { border-left: 0; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .as-tabs-l button { padding: 10px 6px 8px; border-left: 0; border-top: 3px solid var(--linea); margin: 0; font-size: .86rem; line-height: 1.18; letter-spacing: -.012em; }
  .as-tabs-l button span { margin-bottom: 4px; font-size: 12px; }
  .as-tabs-l button[aria-selected="true"] { border-top-color: var(--acento); }
  .con-js .as-pn { grid-column: 1; grid-row: auto; padding: 16px 16px 20px; border-radius: 20px; }
  .as-pn-d, .as-qd { max-height: none; }
  .qd-pc { display: none; } .qd-mv { display: block; }
  .as-pn p { margin-top: 14px; font-size: 1.0625rem; }
  #as-obra { padding: 88px 22px 104px; }
  .as-ob a { grid-template-columns: minmax(0, 1fr) 96px; gap: 0 14px; padding: 14px 0 16px; }
  .as-ob-e { grid-column: 1 / -1; }
  .as-ob-n { grid-column: 1; gap: 4px; }
  .as-ob .og { grid-column: 2; grid-row: 2; width: 96px; margin: 0; align-self: center; }
  .as-ob i { display: none; }
  .as-ob-t { font-size: .98rem; }
  .as-obra-l { margin-top: 18px; }
  .as-ob .as-tri2 { top: 20px; translate: none; width: 30px; height: 26px; }
  .as-ob-e { min-height: 30px; display: flex; align-items: center; padding-left: 42px; }
  .as-ob b { font-size: 1.5rem; }
}

/* short phones: Safari gives the page about 390x700. Every screen is composed again for that height; at 844 nothing here applies. */
@media (max-width: 900px) and (max-height: 780px) {
  /* hero: the text shrinks a step and the whole plan still fits under it */
  #as-hero { padding: 62px 22px 16px; }
  .as-h1-a { font-size: 17px; }
  .as-h1-b { font-size: clamp(2.3rem, 11.6vw, 2.9rem); }
  .as-sub { margin-top: 10px; font-size: 15px; line-height: 1.25; }
  .as-texto .acciones { margin-top: 12px; }
  .as-hoja-h .as-mv { width: auto; max-width: 100%; height: calc(100vh - 304px); height: calc(100svh - 304px); margin: 12px auto 0; order: 2; }
  /* the three sheets: smaller, caption beside its number, no lead-in line */
  .mov #as-llevas { align-content: start; padding: 64px 22px 20px; }
  .as-ll-sub { display: none; }
  .as-ll-cab { gap: 6px 0; }
  .as-ll-cab .titulo { font-size: clamp(1.9rem, 8.4vw, 2.2rem); }
  .as-mesa.carril { margin-top: 12px; }
  .as-mesa .fila { padding-bottom: 8px; }
  .as-ho, .as-ho1, .as-ho2, .as-ho3 { width: min(316px, calc(100vw - 80px), calc((100vh - 372px) * 340 / 480)); width: min(316px, calc(100vw - 80px), calc((100svh - 372px) * 340 / 480)); }
  .as-ho h3 { margin-top: 10px; font-size: .92rem; line-height: 1.22; }
  .as-ho h3::before { display: inline; margin: 0 8px 0 0; }
  /* the signals: the code sits beside the sentence, the drawing under it */
  .mov #as-sin { align-content: start; padding: 66px 22px 20px; }
  #as-sin .titulo { font-size: clamp(1.8rem, 8.2vw, 2.1rem); }
  .as-regi { margin-top: 12px; }
  .as-sr { grid-template-columns: 38px minmax(0, 1fr); gap: 0; align-items: start; padding: 9px 0 8px; }
  .as-sr-n { padding-top: 3px; font-size: 12px; }
  .as-sr-t { font-size: 1.03rem; line-height: 1.17; }
  .as-sr-d { grid-column: 1 / -1; max-width: 250px; margin-top: 4px; }
  /* the questions */
  .mov #as-preg { align-content: start; padding: 66px 22px 20px; }
  #as-preg .titulo { font-size: clamp(1.9rem, 8.4vw, 2.2rem); }
  .as-tabs { margin-top: 12px; }
  .as-tabs.con-js { gap: 10px 0; }
  .con-js .as-pn { padding: 12px 14px 16px; }
  .as-pn-d .qd-mv { width: auto; max-width: 100%; max-height: 150px; margin-inline: auto; }
  .as-pn p { margin-top: 10px; font-size: 1rem; line-height: 1.26; }
  /* what comes after: the little drawing moves up beside the stage, the name takes the full width */
  .mov #as-obra { align-content: start; padding: 64px 22px 20px; }
  #as-obra .titulo { font-size: clamp(1.9rem, 8.4vw, 2.2rem); }
  .as-obra-l { margin-top: 12px; }
  .as-ob a { grid-template-columns: minmax(0, 1fr) 76px; padding: 10px 0 11px; }
  .as-ob-e { grid-column: 1; grid-row: 1; min-height: 26px; }
  .as-ob .og { grid-column: 2; grid-row: 1; width: 76px; align-self: center; }
  .as-ob-n { grid-column: 1 / -1; grid-row: 2; gap: 2px; }
  .as-ob b { font-size: 1.3rem; }
  .as-ob-t { font-size: .92rem; line-height: 1.24; }
  .as-ob .as-tri2 { top: 10px; }
}

/* each sheet overlaps the one before by 36px; at a resting place that edge stays just below the screen, so it shows only while the page moves */
.mov #as-llevas, .mov #as-sin, .mov #as-preg, .mov #as-obra { min-height: calc(100vh + 36px); min-height: calc(100svh + 36px); }