/* AXELIA · /sectores/fabricacion/ — «La explosión».
   Everything animated is under .mov (motion on). Without it the page reads complete: the sheet is drawn, the stage shows its five steps listed under one drawing
   in its last state, and every bar of «Previsto y real» is full. */

/* ---------- 1. hero: the headline, and a drawing sheet: the product exploded, and its bill of materials as a tree ---------- */
#fa-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; }
.mov #fa-hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.fa-hero-dentro { display: grid; grid-template-columns: minmax(0, 450px) minmax(0, 1fr); gap: 36px clamp(28px, 3.4vw, 56px); align-items: center; }
.fa-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); }
.fa-hero h1 { font-weight: 700; font-size: clamp(2.5rem, min(5.2vw, 9vh), 4.9rem); line-height: 1.03; letter-spacing: -.036em; text-wrap: balance; }
.fa-sub { margin-top: 18px; max-width: 22em; font-weight: 600; font-size: clamp(1.1rem, min(1.6vw, 2.9vh), 1.5rem); line-height: 1.22; letter-spacing: -.008em; color: var(--hero-gris); text-wrap: balance; }
.fa-sub b { font-weight: 600; color: var(--hero-ink); }
.fa-hero .acciones { justify-content: flex-start; margin-top: 26px; }
.fa-hero .avales { margin-top: 18px; max-width: 30em; }

/* the sheet: a double frame on the grey, zones and a title block, as on a real drawing */
.fa-hoja { margin: 0; justify-self: end; max-width: 100%; }
.fa-hoja figcaption { margin-top: 14px; text-align: right; font-size: 12px; color: var(--hero-gris); }
.fa-hoja-in { position: relative; box-sizing: border-box; padding: 0; border: 1px solid color-mix(in srgb, var(--hero-ink) 62%, transparent); box-shadow: inset 0 0 0 5px var(--hero), inset 0 0 0 6px color-mix(in srgb, var(--hero-ink) 30%, transparent); }
.fa-rot-sup { display: flex; justify-content: space-between; gap: 16px; margin: 6px 6px 0; padding: 8px 12px 8px; border-bottom: 1px solid color-mix(in srgb, var(--hero-ink) 30%, transparent); font-family: var(--f-mono); font-size: 12px; letter-spacing: .02em; color: var(--hero-gris); }
.fa-rot-sup span:first-child { color: var(--hero-ink); font-weight: 500; }
.fa-cuerpo { display: grid; grid-template-columns: auto minmax(236px, 292px); gap: 0 clamp(8px, 1.4vw, 22px); align-items: start; padding: 10px 18px 6px 12px; margin-inline: 6px; }
.fa-dib { width: min(40vw, 400px, calc((100vh - 232px) * .657)); width: min(40vw, 400px, calc((100svh - 232px) * .657)); min-width: 220px; }
.fa-expl { display: block; width: 100%; height: auto; overflow: visible; }
.fa-lista { padding-top: 6px; }
.fa-lista-t { padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--hero-ink) 30%, transparent); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.fa-lista-t small { margin-left: 8px; font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: 0; color: var(--hero-gris); }
.fa-arbol { list-style: none; margin: 0; padding: 0; }
.fa-f { display: grid; grid-template-columns: auto 24px minmax(0, 1fr) auto; align-items: center; gap: 0 9px; min-height: 48px; }
.fa-rm { display: inline-flex; align-self: stretch; }
.fa-rm i { position: relative; flex: none; width: 18px; }
.fa-rm i::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--hero-ink) 38%, transparent); }
.fa-rm i.l::before { bottom: 50%; }
.fa-rm i.v::before { display: none; }
.fa-rm i.t::after, .fa-rm i.l::after { content: ""; position: absolute; left: 8px; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--hero-ink) 38%, transparent); }
.fa-nn { display: grid; place-items: center; width: 22px; height: 22px; border: 1.4px solid var(--acento); border-radius: 50%; font-family: var(--f-mono); font-weight: 600; font-size: 12px; line-height: 1; color: var(--acento); }
.fa-tx { display: grid; min-width: 0; }
.fa-tx strong { font-weight: 600; font-size: 15px; line-height: 1.15; letter-spacing: -.012em; }
.fa-tx small { margin-top: 1px; font-family: var(--f-mono); font-size: 11.5px; color: var(--hero-gris); }
.fa-q { padding-left: 6px; font-family: var(--f-mono); font-weight: 500; font-size: 13.5px; text-align: right; white-space: nowrap; }
.fa-rot-inf { display: grid; grid-template-columns: repeat(3, auto); justify-content: end; margin: 0 6px 6px; border-top: 1px solid color-mix(in srgb, var(--hero-ink) 30%, transparent); }
.fa-rot-inf span { display: grid; gap: 1px; padding: 8px 16px 9px; border-left: 1px solid color-mix(in srgb, var(--hero-ink) 30%, transparent); }
.fa-rot-inf small { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--hero-gris); }
.fa-rot-inf b { font-family: var(--f-mono); font-weight: 500; font-size: 14px; }

.fa-pedido { margin-top: 18px; }
.fa-pedido dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 12px 0 0; }
.fa-pedido dl > div { display: grid; gap: 1px; padding-left: 10px; border-left: 1.4px solid var(--acento); }
.fa-pedido dt { font-size: 12.5px; color: var(--hero-gris); }
.fa-pedido dd { margin: 0; font-family: var(--f-mono); font-weight: 500; font-size: 16px; letter-spacing: -.01em; }

/* the drawing */
.fa-expl { --tinta: var(--hero-ink); }
.fa-expl .hp { fill: #FFFFFF; stroke: var(--tinta); stroke-width: 1.4; stroke-linejoin: round; }
.fa-expl .hl-izq { fill: #E9E9EE; }
.fa-expl .hl-der { fill: #D4D4DA; }
.fa-expl .hs { fill: none; stroke: color-mix(in srgb, var(--tinta) 50%, transparent); stroke-width: 1; stroke-linecap: round; }
.fa-expl .hdash { stroke-dasharray: 4 4; }
.fa-expl .hd { fill: none; stroke: color-mix(in srgb, var(--tinta) 46%, transparent); stroke-width: 1; stroke-dasharray: 12 4 2 4; }
.fa-expl .hk { fill: color-mix(in srgb, var(--tinta) 28%, transparent); stroke: color-mix(in srgb, var(--tinta) 60%, transparent); stroke-width: 1; }
.fa-expl .hi { fill: #DCDCE1; stroke: var(--tinta); stroke-width: 1.2; }
.fa-expl .hb { fill: var(--hero); stroke: var(--acento); stroke-width: 1.4; }
.fa-expl .hn { fill: var(--acento); font-family: var(--f-mono); font-weight: 600; font-size: 13px; }
.fa-expl .hl { fill: none; stroke: var(--acento); stroke-width: 1; }
.fa-expl .hdot { fill: var(--acento); }
.fa-expl .hdim path { fill: none; stroke: color-mix(in srgb, var(--tinta) 62%, transparent); stroke-width: 1; }
.fa-expl .hdim .hfill { fill: var(--tinta); stroke: none; }
.fa-expl .ht { fill: var(--hero-gris); font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; }

/* the sheet reacts: parts open a little as the page leaves the hero (--a), and lean with the pointer (--px, --py) */
.fa-hoja { --e: max(0, calc(var(--a, .47) - .47)); }
.fa-expl g[class^="x-"] { transform-box: view-box; }
.mov .fa-expl .x-bolts { transform: translate(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 5px - var(--e) * 110px)); }
.mov .fa-expl .x-motor { transform: translate(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 4px - var(--e) * 60px)); }
.mov .fa-expl .x-helice { transform: translate(calc(var(--px, 0) * 3px), calc(var(--py, 0) * 2px - var(--e) * 8px)); }
.mov .fa-expl .x-carcasa { transform: translate(calc(var(--px, 0) * -1px), calc(var(--py, 0) * -2px + var(--e) * 40px)); }
.mov .fa-expl .x-chapa { transform: translate(calc(var(--px, 0) * -4px), calc(var(--py, 0) * -4px + var(--e) * 90px)); }
/* at load the parts start closed and open into place */
@keyframes fa-abre { from { translate: 0 var(--c, 0); opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes fa-baja { from { translate: 0 8px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.mov .fa-expl .x-bolts { --c: 118px; animation: fa-abre 1.25s cubic-bezier(.2, .7, .2, 1) .15s both; }
.mov .fa-expl .x-motor { --c: 86px; animation: fa-abre 1.25s cubic-bezier(.2, .7, .2, 1) .1s both; }
.mov .fa-expl .x-helice { --c: 40px; animation: fa-abre 1.25s cubic-bezier(.2, .7, .2, 1) .05s both; }
.mov .fa-expl .x-carcasa { --c: -10px; animation: fa-abre 1.25s cubic-bezier(.2, .7, .2, 1) both; }
.mov .fa-expl .x-chapa { --c: -80px; animation: fa-abre 1.25s cubic-bezier(.2, .7, .2, 1) .05s both; }
.mov .fa-expl .x-grupo { animation: fa-baja .8s var(--ease) 1s both; }
.mov .fa-f { animation: fa-baja .6s var(--ease) calc(.5s + var(--i) * 70ms) both; }
@media (prefers-reduced-motion: reduce) { .fa-expl *, .fa-f { animation: none !important; } }

@media (max-width: 820px) {
  .fa-hero-dentro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #fa-hero { padding-top: 78px; padding-bottom: 30px; }
  .mov #fa-hero { display: block; min-height: 100svh; }
  .fa-hero .avales { margin-top: 14px; font-size: 13px; }
  .fa-hoja { justify-self: stretch; }
  .fa-hoja figcaption { text-align: left; }
  .fa-cuerpo { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 0 6px; padding: 6px 8px 4px 4px; margin-inline: 4px; }
  .fa-dib { width: 100%; min-width: 0; overflow: hidden; }
  .fa-expl { width: 152%; max-width: none; margin-left: -19.5%; }
  .fa-rot-inf, .fa-hoja figcaption { display: none; }
  .fa-expl .hn, .fa-expl .ht, .fa-expl .hb, .fa-expl .hl, .fa-expl .hdot { display: none; }
  .fa-pedido { display: none; }
  .fa-rot-sup { font-size: 10.5px; padding: 6px 8px; gap: 6px; }
  .fa-rot-sup span:nth-child(2) { display: none; }
  .fa-lista-t { font-size: 13px; padding-bottom: 6px; }
  .fa-lista-t small { display: block; margin: 1px 0 0; font-size: 10.5px; }
  .fa-f { min-height: 35px; grid-template-columns: auto 19px minmax(0, 1fr) auto; gap: 0 5px; }
  .fa-rm i { width: 11px; }
  .fa-rm i::before { left: 5px; }
  .fa-nn { width: 18px; height: 18px; font-size: 10.5px; border-width: 1.2px; }
  .fa-tx strong { font-size: 12.5px; }
  .fa-tx small { font-size: 10.5px; }
  .fa-q { font-size: 11px; padding-left: 2px; }
  .fa-rot-inf span { padding: 5px 10px 6px; }
  .fa-rot-inf b { font-size: 12px; }
  .fa-rot-inf small { font-size: 9.5px; }
}
@media (max-height: 640px) and (min-width: 821px) { .fa-hero .avales { display: none; } }

@media (max-height: 820px) and (min-width: 821px) { .fa-pedido, .fa-hoja figcaption { display: none; } .fa-f { min-height: 42px; } .fa-rot-inf span { padding-block: 6px 7px; } .fa-lista-t { padding-bottom: 6px; } }

/* ---------- 2. the stage: one drawing on millimetre paper, rearranged in five steps ---------- */
#fa-explosion { z-index: 1; background: var(--hero); }
#fa-explosion .fijo { box-sizing: border-box; color: var(--oscuro-ink); padding: clamp(84px, 11vh, 120px) max(22px, calc((100% - 1392px) / 2)) clamp(56px, 9vh, 96px);
  background-color: var(--oscuro);
  background-image: linear-gradient(color-mix(in srgb, var(--oscuro-ink) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--oscuro-ink) 5%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--oscuro-ink) 3%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--oscuro-ink) 3%, transparent) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; background-position: center top; }
.fa-eti { font-weight: 600; font-size: 17px; line-height: 1.19; color: var(--acento-oscuro); }
.fa-izq h2 { margin-top: 6px; font-weight: 700; font-size: clamp(1.8rem, min(2.8vw, 4.7vh), 2.6rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.fa-barra, .fa-rail, .fa-cont { display: none; }
.fa-notas { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 22px; }
.fa-nt { padding-top: 14px; border-top: 1px solid var(--oscuro-linea); }
.fa-nt small { display: block; font-size: 14px; font-weight: 600; color: var(--acento-oscuro); }
.fa-nt h3 { margin-top: 4px; font-weight: 700; font-size: 1.3rem; line-height: 1.12; letter-spacing: -.02em; }
.fa-nt p { margin-top: 8px; font-size: 15px; line-height: 1.35; color: var(--oscuro-gris); }
.fa-nt .fa-reg { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--oscuro-ink) 72%, transparent); }
.fa-nt .fa-reg span { display: block; color: var(--oscuro-gris); }
.fa-lienzo { margin-top: 28px; }
.fa-lienzo .e-mv { display: none; }

/* the drawing: every piece is in one of a few families, and data-v lists the steps in which it is there */
.e-svg { display: block; width: 100%; height: auto; overflow: visible; }
.e-svg { --ink: var(--oscuro-ink); --gr: var(--oscuro-gris); --bg: var(--oscuro); --ac: var(--acento-oscuro); }
.e-svg.e-l { --ink: var(--ink-c, #1D1D1F); --gr: #6E6E73; --bg: #FFFFFF; --ac: var(--acento); }
.e-svg text { font-family: var(--f); }
.e-t { fill: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.e-g { fill: var(--gr); font-weight: 500; }
.e-m { fill: var(--ink); font-family: var(--f-mono) !important; font-weight: 500; }
.e-mg { fill: var(--gr); font-family: var(--f-mono) !important; font-weight: 500; }
.e-b { font-weight: 500; }
.e-cp { fill: var(--gr); font-size: 12px; font-weight: 600; letter-spacing: .09em; }
.e-o { fill: var(--ac); font-weight: 600; }
.e-oc { fill: var(--ac); }
.e-acf { fill: var(--ac); }
.e-caja { fill: color-mix(in srgb, var(--ink) 7%, var(--bg)); stroke: color-mix(in srgb, var(--ink) 38%, transparent); stroke-width: 1.2; }
.e-caja-ac { stroke: var(--ac); }
.e-pan { fill: color-mix(in srgb, var(--ink) 5%, var(--bg)); stroke: color-mix(in srgb, var(--ink) 24%, transparent); stroke-width: 1.2; }
.e-pan-ac { stroke: color-mix(in srgb, var(--ac) 80%, transparent); }
.e-ln { fill: none; stroke: color-mix(in srgb, var(--ink) 26%, transparent); stroke-width: 1; }
.e-ln2 { fill: none; stroke: color-mix(in srgb, var(--ink) 60%, transparent); stroke-width: 1.2; }
.e-sem { stroke-dasharray: 2 5; stroke: color-mix(in srgb, var(--ink) 20%, transparent); }
.e-fan { fill: none; stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.2; stroke-dasharray: 4 5; }
.e-fan-l { fill: none; stroke: color-mix(in srgb, var(--ink) 24%, transparent); stroke-width: 1.2; stroke-dasharray: 2 5; }
.e-rama { fill: color-mix(in srgb, var(--ink) 42%, transparent); }
.e-te { fill: var(--ac); }
.e-te-l { fill: none; stroke: var(--ac); stroke-width: 1.5; }
.e-pista { fill: none; stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1; }
.e-gs { fill: color-mix(in srgb, var(--ink) 86%, transparent); }
.e-gx { fill: color-mix(in srgb, var(--ink) 26%, transparent); }
.e-hueco { fill: url(#fa-rayas); stroke: var(--ac); stroke-width: 1; stroke-dasharray: 3 2; }
.e-llega { fill: color-mix(in srgb, var(--ac) 38%, transparent); stroke: var(--ac); stroke-width: 1.2; }
.e-marca { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.e-pl { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.2; stroke-dasharray: 3 3; }
.e-re { fill: color-mix(in srgb, var(--ink) 88%, transparent); }
.e-ro { fill: var(--ac); }
.e-chip { fill: var(--bg); stroke: var(--ac); stroke-width: 1.4; }

/* which pieces are there in which step: the generic rule, so the drawing's markup carries its own timetable */
.e-v { opacity: 1; }
#fa-explosion[data-paso="0"] .e-v:not([data-v~="0"]),
#fa-explosion[data-paso="1"] .e-v:not([data-v~="1"]),
#fa-explosion[data-paso="2"] .e-v:not([data-v~="2"]),
#fa-explosion[data-paso="3"] .e-v:not([data-v~="3"]),
#fa-explosion[data-paso="4"] .e-v:not([data-v~="4"]) { opacity: 0; translate: 0 10px; visibility: hidden; }
#fa-explosion[data-paso="0"] :is(.e-ped, .e-nodo) { opacity: 0; }
#fa-explosion[data-paso="0"] .e-rama, #fa-explosion[data-paso="0"] .e-gs { opacity: 0; }

/* the explosion: at the start every node sits on the root and is small; each flies to its place, then its connector grows */
.e-nodo, .e-gran { transform-box: fill-box; transform-origin: 50% 50%; }
.e-rh { transform-box: fill-box; transform-origin: 0 50%; }
.e-rv { transform-box: fill-box; transform-origin: 50% 0; }
.e-gs { transform-box: fill-box; transform-origin: 0 50%; }
#fa-explosion[data-paso="0"] .e-nodo { transform: translate(var(--dx), var(--dy)) scale(.45); }
#fa-explosion[data-paso="0"] .e-rh { transform: scaleX(0); }
#fa-explosion[data-paso="0"] .e-rv { transform: scaleY(0); }
#fa-explosion[data-paso="0"] .e-gs { transform: scaleX(0); }
#fa-explosion:not([data-paso="0"]) .e-pc .e-gran { transform: translate(-93px, -102px) scale(.41); }
#fa-explosion:not([data-paso="0"]) .e-mv .e-gran { transform: translate(0, -110px); }

/* the plan is no longer the main thing once it is being made: the tree steps back (on) */
.mov #fa-explosion:is([data-paso="3"], [data-paso="4"]) .e-arbol { opacity: .2; }
.mov .e-svg :is(.e-v, .e-arbol, .e-ped) { transition: opacity .55s var(--ease), translate .7s cubic-bezier(.4, 0, .2, 1), visibility .55s; }
.mov .e-svg .e-nodo { transition: transform .85s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 70ms), opacity .5s var(--ease) calc(var(--i, 0) * 70ms); }
.mov .e-svg .e-gran { transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .5s var(--ease), translate .7s, visibility .5s; }
.mov .e-svg :is(.e-rh, .e-rv, .e-gs) { transition: transform .6s cubic-bezier(.4, 0, .2, 1) calc(.5s + var(--i, 0) * 110ms), opacity .3s var(--ease) calc(.5s + var(--i, 0) * 110ms); }
.mov .e-svg .e-gs { --i: 3; }

/* step 3: the manufacturing order. Everything on the bar follows the stage's own progress (--f), complete at the resting place */
.e-gantt { --g: clamp(0, calc(var(--f, .5) * 2), 1); --t: calc(var(--g) * 12); --dp: 58px; }
.e-mv .e-gantt { --dp: 17.5px; }
.e-re { transform-box: fill-box; transform-origin: 0 50%; }
.e-gantt .e-re { transform: scaleX(clamp(0, calc((var(--t) - var(--s, 0)) / var(--l, 1)), 1)); }
.e-gantt .e-r1x { transform: scaleX(clamp(0, calc((var(--t) - 3) / .4), 1)); }
.e-gantt .e-nota-g { opacity: clamp(0, calc((var(--t) - var(--s, 0)) * 5), 1); }
.e-gantt .e-dep { opacity: clamp(0, calc((var(--t) - 4.6) * 5), 1); }
.e-gantt .e-hoy { transform: translateX(calc(var(--t) * var(--dp))); }

/* the step texts: five listed without motion; with motion a numbered rail on the left and one note at a time */
.mov #fa-explosion .fijo { display: grid; grid-template-columns: minmax(270px, 330px) minmax(0, 1fr); gap: 0 clamp(24px, 3.2vw, 56px); align-items: start; padding: clamp(78px, 10.5vh, 96px) max(22px, calc((100% - 1392px) / 2)) 104px; 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 .fa-izq { align-self: stretch; display: flex; flex-direction: column; padding-top: 4px; }
.mov .fa-barra { display: block; position: relative; height: 2px; margin-top: 16px; background: var(--oscuro-linea); }
.mov .fa-barra i { position: absolute; inset: 0; background: var(--acento-oscuro); transform-origin: 0 50%; transform: scaleX(var(--s, 1)); }
.mov .fa-rail { display: grid; gap: 2px; margin: 22px 0 0; padding: 0; list-style: none; }
.mov .fa-rail li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 7px 0; font-weight: 600; font-size: clamp(1.05rem, min(1.45vw, 2.6vh), 1.3rem); line-height: 1.15; letter-spacing: -.016em; color: color-mix(in srgb, var(--oscuro-ink) 36%, transparent); transition: color .4s var(--ease); }
.mov .fa-rail li b { font-family: var(--f-mono); font-weight: 500; font-size: 13px; letter-spacing: 0; }
.mov #fa-explosion[data-paso="0"] .fa-rail li:nth-child(1), .mov #fa-explosion[data-paso="1"] .fa-rail li:nth-child(2), .mov #fa-explosion[data-paso="2"] .fa-rail li:nth-child(3), .mov #fa-explosion[data-paso="3"] .fa-rail li:nth-child(4), .mov #fa-explosion[data-paso="4"] .fa-rail li:nth-child(5) { color: var(--oscuro-ink); }
.mov #fa-explosion[data-paso="0"] .fa-rail li:nth-child(1) b, .mov #fa-explosion[data-paso="1"] .fa-rail li:nth-child(2) b, .mov #fa-explosion[data-paso="2"] .fa-rail li:nth-child(3) b, .mov #fa-explosion[data-paso="3"] .fa-rail li:nth-child(4) b, .mov #fa-explosion[data-paso="4"] .fa-rail li:nth-child(5) b { color: var(--acento-oscuro); }
.mov .fa-notas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 24px 0 0; }
.mov .fa-nt { grid-area: 1 / 1; padding-top: 14px; opacity: 0; visibility: hidden; translate: 0 14px; pointer-events: none; transition: opacity .45s var(--ease), translate .6s cubic-bezier(.4, 0, .2, 1), visibility .45s; }
.mov .fa-nt small, .mov .fa-nt h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mov .fa-nt p { margin-top: 0; font-weight: 600; font-size: clamp(1.02rem, min(1.35vw, 2.5vh), 1.2rem); line-height: 1.28; letter-spacing: -.012em; color: var(--oscuro-ink); }
.mov .fa-nt .fa-reg { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--oscuro-linea); font-weight: 500; font-size: 12.5px; }
.mov #fa-explosion[data-paso="0"] .fa-nt[data-k="0"], .mov #fa-explosion[data-paso="1"] .fa-nt[data-k="1"], .mov #fa-explosion[data-paso="2"] .fa-nt[data-k="2"], .mov #fa-explosion[data-paso="3"] .fa-nt[data-k="3"], .mov #fa-explosion[data-paso="4"] .fa-nt[data-k="4"] { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; }
.mov .fa-lienzo { margin-top: 0; align-self: center; }
.mov .fa-lienzo .e-pc { width: min(100%, calc((100vh - 178px) * 1.6)); width: min(100%, calc((100svh - 178px) * 1.6)); margin-left: auto; }

/* ---------- phones: the drawing is its own composition (a list, not a tree on its side), one screen per step ---------- */
@media (max-width: 820px) {
  .fa-lienzo .e-pc { display: none; }
  .fa-lienzo .e-mv { display: block; }
  .fa-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .mov .fa-cont { display: grid; justify-items: end; font-family: var(--f-mono); font-size: 15px; color: var(--oscuro-gris); }
  .mov .fa-cont span { grid-area: 1 / 1; opacity: 0; transition: opacity .35s var(--ease); }
  .mov .fa-cont span::after { content: " / 05"; }
  .mov #fa-explosion[data-paso="0"] .fa-cont span:nth-child(1), .mov #fa-explosion[data-paso="1"] .fa-cont span:nth-child(2), .mov #fa-explosion[data-paso="2"] .fa-cont span:nth-child(3), .mov #fa-explosion[data-paso="3"] .fa-cont span:nth-child(4), .mov #fa-explosion[data-paso="4"] .fa-cont span:nth-child(5) { opacity: 1; color: var(--oscuro-ink); }
  .mov .fa-izq h2, .mov .fa-rail { display: none; }
  .mov #fa-explosion .fijo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0; padding: 64px 22px 100px; }
  .mov .fa-izq { display: contents; }
  .mov .fa-cab { order: 1; padding-top: 6px; }
  .mov .fa-barra { order: 2; margin-top: 12px; }
  .mov .fa-lienzo { order: 3; align-self: center; margin-top: 8px; }
  .mov .fa-notas { order: 4; margin: 6px 0 0; }
  .mov .fa-lienzo .e-mv { width: 100%; overflow: hidden; }
  .mov .fa-nt p { font-size: 1.0625rem; line-height: 1.28; }
  .mov .fa-nt .fa-reg { display: none; }
  /* the tree is a column; for the purchase it slides up so the short leaf sits under the header, and the rest leaves */
  .mov #fa-explosion:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .e-mv .e-arbol { translate: 0 -300px; }
  .mov #fa-explosion[data-paso="2"] .e-mv .e-arbol .e-nodo:not(.e-sola) { opacity: 0; }
  .mov #fa-explosion[data-paso="2"] .e-mv .e-arbol .e-rama { opacity: 0; }
  .mov #fa-explosion:is([data-paso="3"], [data-paso="4"]) .e-mv .e-arbol { opacity: 0; }
  #pagina:not(.mov) .e-mv [data-v="2"], #pagina:not(.mov) .e-mv [data-v="3"], #pagina:not(.mov) .e-mv [data-v="4"] { display: none; }
}

/* ---------- 3. «Previsto y real»: a white sheet over the black stage; two bars per cost line, each real bar grows with the scroll ---------- */
#fa-pr { z-index: 2; }
#fa-pr .fijo { box-sizing: border-box; background: var(--pagina); color: var(--ink); padding: clamp(72px, 9.6vh, 96px) max(22px, calc((100% - 1240px) / 2)) clamp(70px, 10vh, 108px); }
.fa-pr-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.fa-pr-cab .titulo { margin-top: 6px; max-width: 11em; font-size: clamp(1.9rem, min(3.3vw, 5.4vh), 3rem); }
.fa-pr-nota { max-width: 24em; font-weight: 600; font-size: clamp(1rem, min(1.4vw, 2.6vh), 1.22rem); line-height: 1.27; letter-spacing: -.012em; color: #6E6E73; }
.fa-pr-nota p + p { margin-top: 6px; }
.fa-tabla { display: grid; gap: clamp(8px, 1.4vh, 14px); margin-top: clamp(14px, 2.6vh, 26px); }
.fa-lin { --q: 1; padding-top: clamp(8px, 1.3vh, 12px); border-top: 1px solid var(--linea); }
.fa-lin-c { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; }
.fa-lin-c h3 { font-weight: 700; font-size: clamp(1.2rem, min(1.8vw, 3.1vh), 1.6rem); line-height: 1.1; letter-spacing: -.025em; }
.fa-sub2 { font-size: 15px; color: #6E6E73; }
.fa-dif { margin-left: auto; display: flex; align-items: baseline; gap: 12px; }
.fa-dif b { font-family: var(--f-mono); font-weight: 500; font-size: clamp(1.3rem, min(2.1vw, 3.6vh), 2rem); letter-spacing: -.03em; }
.fa-dif i { font-family: var(--f-mono); font-style: normal; font-size: 15px; color: #6E6E73; }
.fa-sube .fa-dif b { color: var(--acento); }
.fa-bars { position: relative; display: grid; gap: 5px; margin-top: clamp(6px, 1vh, 10px); }
.fa-b { position: relative; height: clamp(19px, 2.8vh, 27px); }
.fa-ba, .fa-bb, .fa-ah { position: absolute; top: 0; left: 0; height: 100%; border-radius: 7px; }
.fa-ba { box-sizing: border-box; width: calc(var(--pl) * 1%); border: 1.5px solid var(--ink); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 8%, transparent) 0 5px, transparent 5px 10px); }
.fa-bb { width: calc(var(--re) * 1%); background: linear-gradient(90deg, var(--ink) 0, var(--ink) calc(var(--cr) * 1%), var(--acento) calc(var(--cr) * 1%)); transform-origin: 0 50%; transform: scaleX(var(--q)); }
.fa-ah { left: calc(var(--re) * 1%); width: calc((var(--pl) - var(--re)) * 1%); border: 1.5px dashed color-mix(in srgb, var(--ink) 55%, transparent); border-left: 0; border-radius: 0 7px 7px 0; box-sizing: border-box; opacity: clamp(0, calc((var(--q) - .8) * 5), 1); }
.fa-b em { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-style: normal; font-family: var(--f-mono); font-size: 13px; white-space: nowrap; }
.fa-b em b { font-weight: 500; }
.fa-b-pl em { color: var(--ink); }
.fa-b-re em { color: #FFFFFF; opacity: clamp(0, calc((var(--q) - .25) * 4), 1); }
.fa-ml { position: absolute; top: -5px; bottom: -5px; left: calc(var(--pl) * 1%); border-left: 1.5px dashed var(--ink); opacity: .55; }
.fa-tot { margin-top: 2px; padding-top: clamp(9px, 1.5vh, 14px); border-top: 1.5px solid var(--ink); }
.fa-tot .fa-lin-c h3 { font-size: clamp(1.3rem, min(2vw, 3.5vh), 1.8rem); }
.fa-pr-ley { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: clamp(8px, 1.5vh, 16px); font-size: 14px; color: #6E6E73; }
.fa-pr-ley i { display: inline-block; width: 22px; height: 10px; margin-right: 8px; vertical-align: -1px; border-radius: 3px; }
.fa-pr-ley .a { box-sizing: border-box; border: 1.5px solid var(--ink); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 8%, transparent) 0 4px, transparent 4px 8px); }
.fa-pr-ley .b { background: var(--ink); }
.fa-pr-ley .c { background: var(--acento); }
.fa-pr-ej { margin-left: auto; }

/* ---------- 4/5/6. three sheets, one over the last: what repeats in a plant (black), where to start (white), questions (off-white) ---------- */
.fa-dol, .fa-serv, .fa-preg { position: relative; box-sizing: border-box; padding-block: clamp(96px, 13vh, 130px) clamp(96px, 12vh, 140px); }
.fa-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); }
.fa-serv { 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); }
.fa-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 .fa-dol, .mov .fa-serv, .mov .fa-preg { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.mov .fa-dol, .mov .fa-serv { min-height: calc(100vh + 32px); min-height: calc(100svh + 32px); padding-bottom: 150px; }
.fa-seccion { padding-inline: max(22px, calc((100% - 1240px) / 2)); }
.fa-seccion .titulo { margin: 10px 0 clamp(24px, 4.2vh, 44px); max-width: 15em; font-size: clamp(2rem, min(3.8vw, 6.2vh), 3.4rem); }
.fa-carril.carril { overflow: visible; scroll-snap-type: none; }
.fa-carril .fila { width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.mov .serv-cierre { position: sticky; bottom: 0; z-index: 0; }

/* what repeats: open columns on black, each with its drawing */
.fa-d { --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); border-top: 1px solid var(--oscuro-linea); padding-top: 24px; opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 40px)); }
.fa-d-dib .e-svg { width: 100%; height: auto; }
.fa-dt small { display: block; margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--acento-oscuro); }
.fa-dt small b { margin-right: 8px; font-family: var(--f-mono); font-weight: 500; }
.fa-dt p { margin-top: 8px; font-weight: 700; font-size: clamp(1.3rem, 1.95vw, 1.8rem); line-height: 1.13; letter-spacing: -.025em; text-wrap: balance; }
.e-pt { fill: color-mix(in srgb, var(--ink) 30%, transparent); }
.e-sel { fill: color-mix(in srgb, var(--ac) 14%, transparent); stroke: var(--ac); stroke-width: 1.4; }
.e-rango { fill: var(--ac); }
.e-rg1 { opacity: .16; } .e-rg2 { opacity: .3; } .e-rg3 { opacity: .62; }
.e-pl-l { fill: none; stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 1.2; stroke-dasharray: 3 4; }

/* where to start: three rows you can press, a drawing on each */
.fa-carril-sv .fila { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fa-sv { --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 390px); align-items: center; gap: 0 clamp(20px, 3vw, 48px); padding: clamp(14px, 2.4vh, 22px) 0; border-top: 1px solid var(--linea); color: inherit; text-decoration: none; opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 36px)); }
.fa-sv:last-child { border-bottom: 1px solid var(--linea); }
.fa-sv-n { align-self: start; padding-top: 8px; font-family: var(--f-mono); font-size: 15px; color: var(--acento); }
.fa-sv-t { display: grid; gap: 8px; }
.fa-sv-t b { font-weight: 700; font-size: clamp(1.7rem, min(3vw, 5vh), 2.5rem); line-height: 1.06; letter-spacing: -.03em; transition: translate .45s var(--ease); }
.fa-sv-t > span { max-width: 26em; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.3; color: #6E6E73; }
.fa-sv-t em { font-style: normal; color: var(--acento); }
.fa-sv-d .e-svg { display: block; width: 100%; height: auto; }
.e-svg.sm, .e-svg.qm { display: none !important; }
@media (hover: hover) { .fa-sv:hover .fa-sv-t b { translate: 10px 0; } .fa-sv:hover .fa-sv-t em { text-decoration: underline; } }
.fa-sv:focus-visible { outline-offset: -4px; border-radius: 12px; }
.e-vivo { opacity: .9; }

/* questions: two panels */
.fa-carril-q .fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.fa-pq { --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); position: relative; box-sizing: border-box; padding: clamp(22px, 3.2vh, 32px) clamp(22px, 2.4vw, 34px) clamp(24px, 3.6vh, 36px); border-radius: 28px; background: var(--pagina); box-shadow: inset 0 0 0 1px var(--linea); opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 40px)); }
.fa-pq-n { font-family: var(--f-mono); font-size: 15px; color: var(--acento); }
.fa-pq-dib { margin-top: 14px; }
.fa-pq-dib .e-svg { display: block; width: 100%; height: auto; }
.fa-pq h3 { margin-top: 20px; font-weight: 700; font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.fa-pq p { margin-top: 12px; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.38; color: #6E6E73; }

/* =================================== motion on =================================== */
.mov #fa-pr .fijo { display: grid; align-content: center; padding-bottom: 104px; 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 .fa-pr-dentro { width: 100%; }
.mov .fa-pr-nota { display: grid; }
.mov .fa-pr-nota p { grid-area: 1 / 1; margin: 0; opacity: 0; translate: 0 10px; transition: opacity .45s var(--ease), translate .55s cubic-bezier(.4, 0, .2, 1); }
.mov #fa-pr[data-paso="0"] .nk0, .mov #fa-pr[data-paso="1"] .nk1, .mov #fa-pr[data-paso="2"] .nk2 { opacity: 1; translate: 0 0; }
.mov .fa-lin { --q: clamp(0, calc((var(--s, 1) * 3 - var(--k, 0)) * 2), 1); opacity: calc(.4 + var(--q) * .6); }
.mov .fa-tot { --q: clamp(0, calc((var(--s, 1) * 3 - 2.1) * 3), 1); }
.mov .fa-dif { opacity: clamp(0, calc((var(--q) - .7) * 4), 1); translate: 0 calc((1 - clamp(0, (var(--q) - .7) * 4, 1)) * 10px); }
.mov .fa-sub2 { opacity: calc(.45 + var(--q) * .55); }

/* ======================= phones ======================= */
@media (max-width: 820px) {
  .e-svg.sd, .e-svg.qd { display: none !important; }
  .e-svg.sm, .e-svg.qm { display: block !important; }
  #fa-pr .fijo { padding-top: 76px; }
  .fa-pr-cab { display: block; }
  .fa-pr-cab .titulo { font-size: 1.85rem; line-height: 1.06; margin-top: 4px; }
  .fa-pr-nota { margin-top: 10px; font-size: 1rem; line-height: 1.25; }
  .mov .fa-pr-nota { min-height: 78px; }
  .fa-tabla { margin-top: 14px; gap: 8px; }
  .fa-lin { padding-top: 8px; }
  .fa-lin-c h3 { font-size: 1.15rem; }
  .fa-sub2 { display: none; }
  .fa-tot .fa-sub2 { display: block; flex-basis: 100%; order: 3; font-size: 12.5px; }
  .fa-dif b { font-size: 1.3rem; }
  .fa-dif i { font-size: 12.5px; }
  .fa-b { height: 24px; }
  .fa-b em { font-size: 11.5px; left: 10px; }
  .fa-bars { gap: 5px; margin-top: 6px; }
  .fa-pr-ley { display: none; }
  .mov #fa-pr .fijo { align-content: start; padding-bottom: 100px; }
  .fa-seccion .titulo { font-size: 2rem; }
  .fa-dol, .fa-serv, .fa-preg { padding-block: 92px 84px; }
  .fa-carril.carril { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -22px; }
  .fa-carril .fila, .fa-carril-sv .fila, .fa-carril-q .fila { display: flex; width: max-content; gap: 12px; padding-inline: 22px; }
  .fa-d, .fa-sv, .fa-pq { flex: none; width: min(80vw, 330px); scroll-snap-align: start; scroll-margin-inline: 22px; }
  .fa-d { padding-top: 18px; }
  .fa-dt small { margin-top: 14px; }
  .fa-dt p { font-size: 1.2rem; }
  .fa-sv { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 14px; padding: 16px 16px 20px; border: 0; border-radius: 24px; background: var(--alt); }
  .fa-sv:last-child { border-bottom: 0; }
  .fa-sv-n { display: none; }
  .fa-sv-t b { font-size: 1.45rem; }
  .fa-sv-t > span { font-size: 1rem; }
  .fa-pq { padding: 18px 18px 22px; border-radius: 24px; }
  .fa-pq h3 { font-size: 1.3rem; margin-top: 14px; }
  .fa-pq p { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .fa-sv-t b, .fa-pr-nota p { transition: none !important; } }

/* 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)); }

/* short screens (laptops): the sheets keep every resting place whole */
@media (max-height: 800px) and (min-width: 821px) {
  .fa-pr-ley { display: none; }
  .fa-lin-c h3 { font-size: 1.2rem; }
  .fa-sub2 { font-size: 14px; }
  .fa-dt small { margin-top: 12px; }
  .fa-d-dib .e-svg { width: min(100%, calc(28vh * 1.565)); }
  .fa-dt p { font-size: clamp(1.15rem, min(1.95vw, 3.2vh), 1.8rem); margin-top: 6px; }
  .fa-sv { padding: clamp(8px, 1.5vh, 14px) 0; }
  .fa-sv-t b { font-size: clamp(1.5rem, min(3vw, 4.4vh), 2.5rem); }
  .fa-sv-t { gap: 5px; }
  .fa-sv-d .e-svg { width: min(100%, calc(17.5vh * 2.8)); margin-left: auto; }
  .fa-pq-dib .e-svg { width: min(100%, calc(38vh * 2.9)); }
  .fa-pq h3 { margin-top: 12px; }
  .fa-pq p { margin-top: 8px; line-height: 1.32; }
}
@media (max-height: 800px) and (min-width: 821px) { .fa-seccion .titulo { margin-bottom: 18px; } }

/* ======================= short phones =======================
   Safari gives the page about 700px of an 844px phone. The same screens, tighter: nothing under the top bar (52px) or behind the contact button (the last 100px).
   Written for phone widths and heights up to 780px only; the 844px phone and every desktop keep their own rules. */
@media (max-width: 820px) and (max-height: 780px) {
  /* hero: headline, button, experience line and the whole bill of materials, down to the screws, on one screen */
  #fa-hero { padding-top: 70px; padding-bottom: 14px; }
  .fa-hero-dentro { gap: 12px; }
  .fa-ceja { margin-bottom: 6px; font-size: 16px; }
  .fa-hero h1 { font-size: 2.15rem; }
  .fa-sub { margin-top: 10px; font-size: 1rem; line-height: 1.2; }
  .fa-hero .acciones { margin-top: 14px; }
  .fa-hero .avales { margin-top: 10px; font-size: 12.5px; line-height: 1.25; }
  .fa-cuerpo { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); padding-block: 4px 2px; }
  .fa-expl { margin-top: -14%; margin-bottom: -6%; }
  .fa-f { min-height: 29px; }
  .fa-lista-t { padding-bottom: 4px; }
  .fa-lista-t small { display: inline; margin-left: 6px; }
  .fa-rot-sup { padding-block: 4px; }

  /* stage: the drawing takes the room that is left between the header and the step's text, scaled to fit */
  .mov #fa-explosion .fijo { padding-top: 58px; }
  .mov .fa-cab { padding-top: 2px; }
  .mov .fa-barra { margin-top: 8px; }
  .mov .fa-lienzo { align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 0; margin-top: 4px; }
  .mov .fa-lienzo .e-mv { height: 100%; }
  .mov .fa-notas { margin-top: 2px; }
  .mov .fa-nt { padding-top: 8px; }
  .mov .fa-nt p { font-size: 1rem; line-height: 1.24; }

  /* «Previsto y real»: the four rows, the total included, above the button */
  #fa-pr .fijo { padding-top: 62px; }
  .fa-pr-cab .etiqueta { font-size: 16px; }
  .fa-pr-cab .titulo { font-size: 1.6rem; margin-top: 2px; }
  .fa-pr-nota { margin-top: 6px; font-size: .95rem; line-height: 1.22; }
  .mov .fa-pr-nota { min-height: 46px; }
  .fa-tabla { margin-top: 8px; gap: 4px; }
  .fa-lin { padding-top: 5px; }
  .fa-lin-c h3 { font-size: 1.08rem; }
  .fa-dif b { font-size: 1.2rem; }
  .fa-bars { gap: 4px; margin-top: 5px; }
  .fa-b { height: 20px; }
  .fa-tot .fa-sub2 { font-size: 11.5px; }

  /* pains, services, questions */
  .fa-dol, .fa-serv, .fa-preg { padding-block: 80px 70px; }
  .fa-carril-q .fila { align-items: flex-start; }
}