/* AXELIA · /sectores/petroleo-y-energia/ — «El activo». Cost and work belong to a named piece of equipment: the pump P-101.
   Everything pinned or animated is under .mov (motion on). Without it the page reads complete and in order: the plan is whole, the order of work is filled in,
   the field report is synchronised, every drawing is in its last state. */

/* 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)); }
.pl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pl-seccion { padding-inline: max(22px, calc((100% - 1240px) / 2)); }
.pl-ej, .pl-l2 { display: none; }
.pl-nota { margin-top: 14px; font-size: 12px; line-height: 1.3; color: var(--gris); }

/* the drawings of the page (pain points, services, questions) share one set of strokes; the colours come from the section they sit in */
.pl-d { display: block; --d-ink: var(--oscuro-ink); --d-gris: var(--oscuro-gris); --d-linea: color-mix(in srgb, var(--oscuro-ink) 42%, transparent); --d-panel: color-mix(in srgb, var(--oscuro-ink) 8%, var(--oscuro)); --d-borde: color-mix(in srgb, var(--oscuro-ink) 26%, transparent); --d-ac: var(--acento-oscuro); --d-fondo: var(--oscuro); }
.pl-d.pl-d-l { --d-ink: var(--ink); --d-gris: #6E6E73; --d-linea: #9a9aa0; --d-panel: #FFFFFF; --d-borde: #C9C9CF; --d-ac: var(--acento); --d-fondo: #FFFFFF; }
.pl-d .dl { fill: none; stroke: var(--d-linea); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pl-d .dd { stroke-dasharray: 4 4; }
.pl-d .da { fill: none; stroke: var(--d-ac); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-d .df { fill: var(--d-ac); }
.pl-d .dp { fill: var(--d-panel); stroke: var(--d-borde); stroke-width: 1.2; }
.pl-d .dp.da { stroke: var(--d-ac); stroke-width: 1.5; }
.pl-d .dd2 { stroke-dasharray: 3 3; }
.pl-d .chip { fill: var(--d-fondo); stroke: var(--d-ac); stroke-width: 1.5; }
.pl-d .dl-c { fill: var(--d-borde); }
.pl-d .bz { fill: #1D1D1F; }
.pl-d .pw { fill: #FFFFFF; }
.pl-d .chk { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-d .dt { fill: var(--d-ink); font-weight: 600; letter-spacing: -.01em; }
.pl-d .dg { fill: var(--d-gris); font-weight: 500; }
.pl-d .dm { font-family: var(--f-mono); }
.pl-d .dm.dt { font-weight: 500; letter-spacing: -.02em; }
.pl-d .dm.dg { font-weight: 500; }
.pl-d .dk { fill: var(--d-gris); font-weight: 600; letter-spacing: .09em; }
.pl-d .df-t { fill: var(--d-ac); }

/* =============================================================== 1. hero: a plan of the field, drawn as an engineer would, and the headline over it */
#pl-hero { position: relative; z-index: 1; background: var(--hero); color: var(--hero-ink); }
.pl-hero-fijo { box-sizing: border-box; background: var(--hero); padding: 76px max(22px, calc((100% - 1240px) / 2)) 30px; overflow: hidden; }
/* the section is twice a screen tall and the stage that follows is pulled up over its second half: the hero stays put while the black sheet rises over it, and then scrolls away by itself */
.mov #pl-hero { height: 200vh; height: 200svh; margin-bottom: -100vh; margin-bottom: -100svh; }
.mov .pl-hero-fijo { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; padding-block: 72px 26px; }
.mov #pl-hero.cubierto, .mov #pl-hero.cubierto .hueco { visibility: hidden; }     /* the shared sheet keeps contact buttons visible on inner pages, so the hero's one is hidden by name once covered */
.pl-hoja { --w: min(1240px, calc(100vw - 60px), calc((100vh - 104px) * 1.5625)); --w: min(1240px, calc(100vw - 60px), calc((100svh - 104px) * 1.5625)); position: relative; width: var(--w); aspect-ratio: 1000 / 640; margin-inline: auto; font-size: calc(var(--w) / 77.5); }
.pl-planos { position: absolute; inset: 0; }
.pl-plano { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 64.8% 67.5%; }
.pl-plano-v { display: none; }
.mov .pl-plano { transform: scale(calc(1 + var(--cubre, 0) * .62)); will-change: transform; }
.mov .pl-hero-texto { opacity: calc(1 - var(--cubre, 0) * 1.4); }

.pl-hero-texto { position: absolute; left: 5.2%; top: 8%; z-index: 2; width: 42%; text-shadow: 0 0 .5em var(--hero), 0 0 1em var(--hero), 0 0 1.6em var(--hero); }
.pl-ceja { margin-bottom: .55em; font-weight: 600; font-size: 1.28em; line-height: 1.19; letter-spacing: .011em; color: var(--hero-gris); }
.pl-hero h1 { max-width: 8.3em; font-weight: 700; font-size: 4.7em; line-height: 1.02; letter-spacing: -.038em; text-wrap: balance; }
.pl-sub { margin-top: .85em; max-width: 16.5em; font-weight: 600; font-size: 1.5em; line-height: 1.2; letter-spacing: -.01em; color: var(--hero-gris); text-wrap: balance; }
.pl-sub b { font-weight: 600; color: var(--hero-ink); }
.pl-hero .acciones { justify-content: flex-start; margin-top: 1.25em; }
.pl-hero .avales { margin-top: .9em; max-width: 25em; font-size: max(12px, .9em); text-shadow: inherit; }
.pl-hero-texto .pildora { text-shadow: none; }     /* the halo that lifts the text off the contour lines would smear the label of the dark button */

/* the drawing: ink on the page's own grey, one orange mark */
.pl-plano text { font-family: var(--f); fill: var(--hero-ink); }
.pl-plano .pl-m { font-family: var(--f-mono); font-weight: 500; letter-spacing: -.01em; }
.pl-plano .pl-k { font-weight: 600; letter-spacing: .1em; fill: var(--hero-gris); }
.pl-plano .pl-t { font-weight: 500; }
.pl-plano .pl-tb { font-weight: 700; letter-spacing: -.02em; }
.pl-plano .pl-gris { fill: var(--hero-gris); }
.pl-plano .pl-ac { fill: var(--acento); font-weight: 600; }
.pl-fr1 { fill: none; stroke: var(--hero-ink); stroke-width: 1.3; }
.pl-fr2 { fill: none; stroke: var(--hero-ink); stroke-width: .7; }
.pl-fr3 { fill: none; stroke: var(--hero-ink); stroke-width: .8; }
.pl-cj { fill: var(--hero); stroke: var(--hero-ink); stroke-width: .8; }
.pl-con path { fill: none; stroke: var(--hero-ink); stroke-opacity: .15; stroke-width: .8; }
.pl-con2 path { stroke-opacity: .32; stroke-width: 1; }
.pl-plano .pl-el { fill: var(--hero-gris); font-size: 8px; paint-order: stroke; stroke: var(--hero); stroke-width: 4; stroke-linejoin: round; }
.pl-cruz path { fill: none; stroke: var(--hero-ink); stroke-opacity: .38; stroke-width: .8; }
.pl-via1 { fill: none; stroke: var(--hero-ink); stroke-width: 6.6; }
.pl-via2 { fill: none; stroke: var(--hero); stroke-width: 5; }
.pl-via3 { fill: none; stroke: var(--hero-ink); stroke-opacity: .55; stroke-width: .6; stroke-dasharray: 6 5; }
.pl-edif { fill: var(--hero); stroke: var(--hero-ink); stroke-width: 1.1; }
.pl-pad { fill: none; stroke: var(--hero-gris); stroke-width: .8; stroke-dasharray: 3 2.5; }
.pl-sim { fill: var(--hero); stroke: var(--hero-ink); stroke-width: 1.5; }
.pl-sim2 { stroke-width: 1.6; }
.pl-fin2 { fill: none; stroke: var(--hero-ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pl-fin { fill: none; stroke: var(--hero-ink); stroke-width: 1.4; }
.pl-tub { fill: none; stroke: var(--hero-ink); stroke-width: 2.6; stroke-linejoin: round; }
.pl-tub3 { stroke-width: 3.4; }
.pl-pt { fill: var(--hero-ink); }
.pl-lim { fill: none; stroke: var(--hero-ink); stroke-width: .9; stroke-dasharray: 6 3.5; }
.pl-lim2 { fill: none; stroke: var(--hero-ink); stroke-width: .8; stroke-dasharray: 2.5 2; }
.pl-etq { fill: var(--hero); stroke: var(--hero-ink); stroke-width: .8; }
.pl-leyr { fill: var(--hero); stroke: var(--hero-ink); stroke-width: .7; }
.pl-eg { fill: var(--hero-ink); }
.pl-eb { fill: var(--hero); stroke: var(--hero-ink); stroke-width: .8; }
.pl-aro { fill: none; stroke: var(--acento); stroke-width: 1.9; }
.pl-aro2 { fill: none; stroke: var(--acento); stroke-width: .9; stroke-dasharray: 2.5 3; }
.pl-lid { fill: none; stroke: var(--acento); stroke-width: 1.2; }
.pl-pto { fill: var(--acento); }
.pl-card { fill: #FFFFFF; stroke: var(--hero-ink); stroke-width: .9; }
.pl-sombra { fill: var(--hero-ink); opacity: .1; }
/* a crosshair that follows the pointer over the sheet, and snaps to the pump when it comes close */
.pl-mira { opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
#pl-hero.sobre .pl-mira { opacity: 1; }
.pl-mh, .pl-mv { fill: none; stroke: var(--acento); stroke-width: .6; stroke-opacity: .75; }
.pl-mh, .pl-mv, .pl-mr { will-change: transform; }
.pl-mrr { fill: var(--hero-ink); }
.pl-plano text.pl-mt { fill: #FFFFFF; }
#pl-hero.imanta .pl-aro2 { stroke-width: 1.4; stroke-dasharray: none; }
/* the layers are drawn in one after another as the page opens */
.mov .pl-capa { animation: pl-capa .9s var(--ease) both; animation-delay: calc(var(--c) * 140ms + 150ms); }
@keyframes pl-capa { from { opacity: 0; } }

/* =============================================================== 2. the order of work: a black stage; the asset tree stays beside the document while it fills in */
#pl-orden { z-index: 2; background: var(--hero); --u: max(9.5px, min(calc((100vh - 190px) / 44), calc((min(100vw, 1440px) - 440px) / 62))); --u: max(9.5px, min(calc((100svh - 190px) / 44), calc((min(100vw, 1440px) - 440px) / 62))); }
#pl-orden .fijo { background-color: var(--oscuro); background-image: radial-gradient(circle, color-mix(in srgb, var(--oscuro-ink) 9%, transparent) 1px, transparent 1.6px); background-size: 28px 28px; color: var(--oscuro-ink); padding: 84px max(22px, calc((100% - 1392px) / 2)) 100px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 52px; align-items: start; }
.pl-o-texto { display: grid; align-content: center; align-self: stretch; min-width: 0; }
.pl-o-eti { font-weight: 600; font-size: 17px; line-height: 1.19; color: var(--acento-oscuro); }
.pl-o-h2 { margin-top: 6px; font-weight: 700; font-size: clamp(1.45rem, min(2.2vw, 3.7vh), 2rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.pl-o-pasos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 30px; }
.pl-op small { display: block; font-size: 15px; font-weight: 600; color: var(--acento-oscuro); }
.pl-op h3 { margin-top: 6px; font-weight: 700; font-size: 1.7rem; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.pl-op p { margin-top: 8px; font-size: 15.5px; line-height: 1.36; color: var(--oscuro-gris); }
.pl-reg { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.4; color: color-mix(in srgb, var(--oscuro-ink) 72%, transparent) !important; }
.pl-reg span { display: block; margin-bottom: 2px; color: var(--oscuro-gris); }
.pl-o-riel { display: none; list-style: none; margin: 0; padding: 0; }
#pl-orden .pl-nota { color: var(--oscuro-gris); }

/* the canvas: one design, drawn at 62 × 44 em and scaled as a whole */
.pl-lienzo { position: relative; width: calc(62 * var(--u)); height: calc(44 * var(--u)); font-size: var(--u); justify-self: center; align-self: center; }
.pl-cx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cx-g { fill: none; stroke: color-mix(in srgb, var(--oscuro-ink) 24%, transparent); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.cx-v { fill: none; stroke: var(--acento-oscuro); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cx-p { fill: var(--acento-oscuro); }
.pl-vuelo { display: none; position: absolute; left: 0; top: 0; width: .75em; height: .75em; margin: -.375em 0 0 -.375em; border-radius: 50%; background: var(--acento-oscuro); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--acento-oscuro) 24%, transparent); }

.pl-nodos { list-style: none; margin: 0; padding: 0; }
.pl-nd { position: absolute; box-sizing: border-box; display: block; border-radius: .9em; background: color-mix(in srgb, var(--oscuro-ink) 5%, var(--oscuro)); box-shadow: inset 0 0 0 1px var(--oscuro-linea); padding: .55em 1em; }
.pl-nd small { display: block; font-size: .82em; line-height: 1.2; font-weight: 600; color: var(--oscuro-gris); }
.pl-nd b { display: block; margin-top: .1em; font-size: 1.15em; line-height: 1.15; font-weight: 600; letter-spacing: -.012em; color: color-mix(in srgb, var(--oscuro-ink) 62%, transparent); }
.pl-nd::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--acento-oscuro); opacity: 0; pointer-events: none; }
.pl-n-raiz { left: 0; top: 0; width: 17em; height: 3.6em; }
.pl-n-raiz b, .pl-n-planta b { color: var(--oscuro-ink); }
.pl-n-pozos { left: 2.8em; top: 4.8em; width: 14.2em; height: 3em; }
.pl-n-planta { left: 2.8em; top: 9em; width: 14.2em; height: 3em; }
.pl-n-p102 { left: 5.6em; top: 34.4em; width: 11.4em; height: 3em; }
.pl-n-alm { left: 2.8em; top: 39.4em; width: 18em; height: 3em; }
.pl-res { position: absolute; right: .8em; bottom: .55em; padding: .22em .7em; border-radius: 980px; font-style: normal; font-size: .78em; font-weight: 600; color: var(--acento-oscuro); box-shadow: inset 0 0 0 1px var(--acento-oscuro); }
.pl-n-p101 { left: 5.6em; top: 13.4em; width: 17.2em; height: 19.6em; padding: 1.25em 1.4em 1.2em; background: color-mix(in srgb, var(--oscuro-ink) 9%, var(--oscuro)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento-oscuro) 55%, transparent), 0 0 3.2em -.6em color-mix(in srgb, var(--acento-oscuro) 40%, transparent); display: flex; flex-direction: column; }
.pl-n-p101::after { opacity: 1; }
.pl-p-cab { display: flex; align-items: center; gap: .9em; }
.pl-bomba { flex: none; width: 3.5em; height: 3.5em; overflow: visible; }
.pb-a { fill: none; stroke: var(--oscuro-ink); stroke-width: 2.2; }
.pb-b { fill: none; stroke: var(--oscuro-ink); stroke-width: 2.2; stroke-linejoin: round; }
.pb-c { fill: none; stroke: var(--acento-oscuro); stroke-width: 1.4; stroke-dasharray: 3 4; }
.pl-n-p101 .pl-p-cab b { margin-top: .05em; font-size: 2.1em; line-height: 1; letter-spacing: -.035em; color: var(--oscuro-ink); }
.pl-vib { display: none; position: absolute; left: 1.4em; right: 1.4em; top: 8.7em; }
.pl-vib p { display: flex; align-items: baseline; justify-content: space-between; font-size: .74em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oscuro-gris); }
.pl-vib b { font-family: var(--f-mono); letter-spacing: 0; color: var(--acento-oscuro); font-weight: 500; }
.pl-vib svg { display: block; width: 100%; height: auto; margin-top: .6em; overflow: visible; }
.vb-g { fill: none; stroke: color-mix(in srgb, var(--oscuro-ink) 22%, transparent); stroke-width: .8; }
.vb-m { fill: none; stroke: var(--acento-oscuro); stroke-width: 1; stroke-dasharray: 3 3; }
.vb-t { fill: var(--acento-oscuro); font-family: var(--f); font-weight: 600; }
.vb-l { fill: none; stroke: var(--oscuro-ink); stroke-width: 1.5; stroke-linejoin: round; }
.vb-p { fill: var(--acento-oscuro); }
.pl-estado { position: relative; margin-top: .85em; height: 2.1em; font-size: .86em; font-weight: 600; }
.pl-estado span { position: absolute; left: 0; top: 0; display: none; align-items: center; gap: .6em; height: 100%; padding: 0 1em 0 .8em; border-radius: 980px; box-shadow: inset 0 0 0 1px var(--acento-oscuro); color: var(--acento-oscuro); white-space: nowrap; }
.pl-estado span:last-child { display: inline-flex; }
.pl-estado i { width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
.pl-coste { margin-top: 1.15em; padding-top: .9em; border-top: 1px solid var(--oscuro-linea); }
.pl-coste small { display: block; font-size: .74em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oscuro-gris); }
.pl-n-p101 .pl-suma { display: block; margin-top: .12em; font-family: var(--f-mono); font-weight: 500; font-size: 2.85em; line-height: 1.05; letter-spacing: -.045em; color: var(--oscuro-ink); }
.pl-barra { display: flex; gap: .2em; height: .7em; margin-top: .75em; }
.pl-barra i { display: block; flex: 1 1 0; min-width: 0; border-radius: .35em; transform-origin: 0 50%; }
.pl-barra i:nth-child(1) { background: color-mix(in srgb, var(--oscuro-ink) 78%, transparent); }
.pl-barra i:nth-child(2) { background: color-mix(in srgb, var(--oscuro-ink) 40%, transparent); }
.pl-barra i:nth-child(3) { background: var(--acento-oscuro); }
.pl-leyenda { list-style: none; margin: .7em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.pl-leyenda small { display: block; font-size: .7em; line-height: 1.2; font-weight: 500; color: var(--oscuro-gris); }
.pl-leyenda b { display: block; margin-top: .1em; font-family: var(--f-mono); font-size: .92em; font-weight: 500; letter-spacing: -.02em; color: var(--oscuro-ink); }

/* the document: a sheet of paper that fills in */
.pl-ot { position: absolute; left: 29em; top: 0; width: 33em; height: 44em; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; border-radius: 1em; background: #FFFFFF; color: #1D1D1F; box-shadow: 0 2.4em 4em -1.6em rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); font-size: 1em; }
.pl-ot-cab { padding: 1.4em 2em .9em; }
.pl-ot .pl-k, .pl-oc .pl-k { font-weight: 600; font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: #86868B; }
.pl-ot-fila { display: flex; align-items: center; justify-content: space-between; }
.pl-sello { position: relative; display: block; width: 7em; height: 1.9em; }
.pl-sello span { position: absolute; right: 0; top: 0; display: none; align-items: center; height: 100%; padding: 0 .9em; border-radius: 980px; font-size: .78em; font-weight: 600; background: #1D1D1F; color: #FFFFFF; white-space: nowrap; }
.pl-sello span:last-child { display: inline-flex; background: var(--acento); }
.pl-ot-num { margin-top: .3em; font-family: var(--f-mono); font-weight: 500; font-size: 2.35em; line-height: 1; letter-spacing: -.06em; }
.pl-ot-t { margin-top: .25em; font-weight: 600; font-size: 1.2em; line-height: 1.2; letter-spacing: -.02em; }
.pl-ot-act { margin-top: .55em; font-family: var(--f-mono); font-size: .8em; color: #6E6E73; }
.pl-ot-act .pl-k { margin-right: .7em; font-family: var(--f); }
.pl-bl { position: relative; display: grid; grid-template-columns: 6.4em minmax(0, 1fr); column-gap: 1em; padding: .7em 2em .65em; border-top: 1px solid #E5E5EA; }
.pl-bl::after { content: ""; position: absolute; left: 9.4em; right: 2em; top: .95em; height: 2.4em; border-radius: .35em; opacity: calc(1 - var(--r, 1)); pointer-events: none;
  background: linear-gradient(#ECECEF, #ECECEF) 0 0 / 62% .62em no-repeat, linear-gradient(#ECECEF, #ECECEF) 0 1.5em / 38% .62em no-repeat; }
.pl-bl-k { padding-top: .25em; font-weight: 600; font-size: .72em; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; color: #86868B; }
.pl-bl-c { position: relative; min-width: 0; }
.pl-fila1 { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; font-size: 1.02em; }
.pl-fila1 b { font-weight: 600; letter-spacing: -.012em; }
.pl-alerta { color: var(--acento); font-size: 1.12em; }
.pl-m2 { margin-top: .12em; font-family: var(--f-mono); font-size: .8em; line-height: 1.4; color: #6E6E73; }
.pl-fila1 .pl-m2 { margin-top: 0; }
.pl-onda { position: absolute; right: 0; top: -.1em; width: 7.4em; height: auto; overflow: visible; }
.pl-onda .on-l { fill: none; stroke: #1D1D1F; stroke-width: 1.3; stroke-linejoin: round; }
.pl-onda .on-m { fill: none; stroke: var(--acento); stroke-width: 1; stroke-dasharray: 2.5 2.5; }
.pl-ck { position: relative; padding-left: 1.7em; font-size: .98em; line-height: 1.55; }
.pl-ck i { position: absolute; left: 0; top: .32em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #1D1D1F; }
.pl-ck i::after { content: ""; position: absolute; left: .34em; top: .17em; width: .26em; height: .5em; border: solid #FFFFFF; border-width: 0 .13em .13em 0; rotate: 45deg; }
.pl-fl { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.6em; align-items: center; gap: 0 .7em; padding: .22em 0; font-size: .98em; line-height: 1.2; }
.pl-fl + .pl-fl { border-top: 1px solid #F0F0F3; }
.pl-fl span { font-weight: 600; letter-spacing: -.012em; }
.pl-fl small { display: block; font-size: .76em; font-weight: 500; color: #86868B; }
.pl-fl em { font-style: normal; font-size: .74em; font-weight: 600; padding: .25em .7em; border-radius: 980px; background: #F0F0F3; color: #1D1D1F; }
.pl-fl b { text-align: right; font-family: var(--f-mono); font-size: .88em; font-weight: 500; letter-spacing: -.03em; }
.pl-banda { margin-top: auto; padding: 1.05em 2em 1.2em; background: #000000; color: #F5F5F7; }
.pl-banda-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.pl-banda .pl-k { color: #86868B; }
.pl-banda .pl-suma { font-family: var(--f-mono); font-weight: 500; font-size: 2em; line-height: 1; letter-spacing: -.05em; color: var(--acento-oscuro); }
.pl-banda-l { list-style: none; margin: .85em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.pl-banda-l li { padding-top: .6em; border-top: 1px solid #333336; }
.pl-banda-l small { display: block; font-size: .78em; line-height: 1.25; font-weight: 600; color: #F5F5F7; }
.pl-banda-l b { display: block; margin-top: .2em; font-family: var(--f-mono); font-size: 1.1em; font-weight: 500; letter-spacing: -.03em; }
.pl-banda-l i { display: block; margin-top: .1em; font-style: normal; font-size: .7em; line-height: 1.25; color: #86868B; }

/* =============================================================== 3. without a connection: a light sheet, a field device, a link and the order */
#pl-sc { z-index: 3; background: var(--oscuro); --u: max(9px, min(calc((100vh - 380px) / 30), calc((min(100vw, 1440px) - 44px) / 62))); --u: max(9px, min(calc((100svh - 380px) / 30), calc((min(100vw, 1440px) - 44px) / 62))); }
#pl-sc .fijo { background: var(--alt); color: var(--ink); padding: 88px max(22px, calc((100% - 1240px) / 2)) 100px; }
.pl-sc-cab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0 clamp(24px, 5vw, 80px); align-items: end; }
.pl-sc-tit .titulo { margin-top: 8px; max-width: 13em; font-size: clamp(2rem, min(3.7vw, 5.6vh), 3.4rem); }
.pl-sc-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pl-sc-pasos small { display: block; font-size: 15px; font-weight: 600; color: var(--acento); }
.pl-sc-pasos h3 { margin-top: 4px; font-weight: 700; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.025em; }
.pl-sc-pasos p { margin-top: 4px; max-width: 27em; font-size: 16px; line-height: 1.34; color: #6E6E73; }
.pl-sc-lienzo { position: relative; width: calc(62 * var(--u)); height: calc(30 * var(--u)); font-size: var(--u); margin: 26px auto 0; }
.pl-nota-sc { margin-top: 8px; text-align: right; }

/* the field device: a dark bezel with its screen */
.pl-tab { position: absolute; left: 0; top: .2em; width: 21em; height: 29.6em; box-sizing: border-box; margin: 0; padding: .85em; border-radius: 2.1em; background: #1D1D1F; box-shadow: 0 2.2em 3.4em -1.6em rgba(0, 0, 0, .55), inset 0 0 0 .1em #4a4a4d; }
.pl-tab-p { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 1em 1.1em .9em; border-radius: 1.4em; background: #FFFFFF; overflow: hidden; }
.pl-tab-b { display: flex; align-items: center; justify-content: space-between; height: 1.7em; font-size: .86em; }
.pl-tab-h { font-family: var(--f-mono); font-weight: 500; }
.pl-tab-e { position: relative; display: inline-flex; align-items: center; gap: .55em; height: 1.9em; padding: 0 .9em 0 .6em; border-radius: 980px; font-weight: 600; background: #F5F5F7; box-shadow: inset 0 0 0 1px #D2D2D7; }
.pl-tab-e1, .pl-ex { display: none; }
.pl-tab-e2 { display: inline-flex; align-items: center; }
.pl-tab-e2::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .5em; border-radius: 50%; background: var(--acento); }
.pl-ex { position: relative; width: 1em; height: 1em; border-radius: 50%; box-shadow: inset 0 0 0 .14em var(--acento); }
.pl-ex::after { content: ""; position: absolute; left: 50%; top: -.15em; width: .14em; height: 1.3em; background: var(--acento); rotate: 45deg; }
.pl-tab-t { display: flex; align-items: baseline; justify-content: space-between; margin-top: .9em; padding-bottom: .7em; border-bottom: 1px solid #E5E5EA; }
.pl-tab-t span { font-weight: 700; font-size: 1.12em; letter-spacing: -.02em; }
.pl-tab-t b { font-family: var(--f-mono); font-weight: 500; font-size: .92em; color: #6E6E73; }
.pl-cola { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.pl-cola li { --w: 1; --e: 1; display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 1.5em; align-items: center; column-gap: .55em; padding: .35em 0; border-bottom: 1px solid #F0F0F3; }
.pl-cola li:last-child { border-bottom: 0; }
.pl-cola time, .pl-oc-l time { font-family: var(--f-mono); font-size: .84em; color: #6E6E73; }
.pl-cola span { font-size: .9em; line-height: 1.22; font-weight: 600; letter-spacing: -.012em; }
.pl-ic { position: relative; display: block; width: 1.4em; height: 1.4em; }
.pl-ic::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 .14em #9a9aa0; background: linear-gradient(#9a9aa0, #9a9aa0) 50% 24% / .13em .42em no-repeat, linear-gradient(#9a9aa0, #9a9aa0) 62% 50% / .32em .13em no-repeat; opacity: calc(1 - var(--e)); }
.pl-ic em { position: absolute; inset: 0; border-radius: 50%; background: var(--acento); opacity: var(--e); }
.pl-ic em::after { content: ""; position: absolute; left: .5em; top: .26em; width: .3em; height: .6em; border: solid #FFFFFF; border-width: 0 .15em .15em 0; rotate: 45deg; }
.pl-tab-pie { display: flex; align-items: center; justify-content: space-between; padding-top: .75em; border-top: 1px solid #E5E5EA; font-size: .9em; font-weight: 600; color: #6E6E73; }
.pl-cuenta { font-family: var(--f-mono); font-weight: 500; font-size: 1.7em; line-height: 1; letter-spacing: -.04em; color: #1D1D1F; }

/* the link: a signal that is off, and then on */
.pl-enlace { position: absolute; left: 21em; top: 0; width: 20em; height: 30em; }
.pl-hilo { position: absolute; top: 14.6em; height: .14em; }
.pl-hilo-a { left: .6em; width: 6.9em; }
.pl-hilo-b { left: 12.5em; width: 6.9em; }
.pl-hilo::before, .pl-hilo::after { content: ""; position: absolute; inset: 0; }
.pl-hilo::before { background: repeating-linear-gradient(90deg, #9a9aa0 0 .5em, transparent .5em .95em); }
.pl-hilo::after { background: var(--acento); opacity: 1; }
.pl-senal { position: absolute; left: 7.9em; top: 11.2em; width: 4.2em; height: 6.8em; }
.pl-barras { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; }
.pl-barras i { position: relative; display: block; width: .8em; border-radius: .22em; background: #D2D2D7; height: calc(1.8em + var(--b) * 1.55em); }
.pl-barras i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--acento); opacity: 1; }
.pl-tacha { position: absolute; inset: -.4em; width: calc(100% + .8em); height: calc(100% + .8em); overflow: visible; display: none; }
.pl-tacha path { fill: none; stroke: #1D1D1F; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pl-senal-t { position: absolute; left: 0; right: 0; top: 19em; display: grid; justify-items: center; text-align: center; }
.pl-senal-t span { grid-area: 1 / 1; font-weight: 700; font-size: 1.3em; line-height: 1.15; letter-spacing: -.025em; }
.pl-st1 { display: none; }
.pl-st2 small { display: block; margin-top: .25em; font-family: var(--f-mono); font-size: .66em; font-weight: 500; letter-spacing: 0; color: #6E6E73; }
.pl-punto { display: none; position: absolute; left: 0; top: 0; width: .7em; height: .7em; margin: -.35em 0 0 -.35em; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 .28em color-mix(in srgb, var(--acento) 22%, transparent); }

/* the order in the system */
.pl-oc { position: absolute; left: 41em; top: .2em; width: 21em; height: 29.6em; box-sizing: border-box; display: flex; flex-direction: column; padding: 1.5em 1.5em 1.2em; border-radius: 1.4em; background: #FFFFFF; box-shadow: 0 1.4em 2.6em -1.4em rgba(0, 0, 0, .28), inset 0 0 0 1px #D2D2D7; }
.pl-oc-cab { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.pl-sync { position: relative; display: grid; justify-items: end; font-size: .74em; font-weight: 600; }
.pl-sync span { grid-area: 1 / 1; white-space: nowrap; }
.pl-sy1 { display: none; color: #6E6E73; }
.pl-sy2 { color: var(--acento); }
.pl-oc .pl-ot-num { font-size: 2.3em; }
.pl-oc .pl-ot-t { font-size: 1.08em; }
.pl-oc-l { list-style: none; margin: 1em 0 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.pl-oc-l li { --e: 1; position: relative; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); align-items: center; column-gap: .55em; min-height: 3.1em; padding: 0 .9em; }
.pl-oc-l li::before { content: ""; position: absolute; inset: 0; border-radius: .7em; box-shadow: inset 0 0 0 1.5px #D2D2D7; opacity: 0; }
.pl-oc-l span { font-size: .9em; line-height: 1.22; font-weight: 600; letter-spacing: -.012em; }
.pl-oc-pie { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding-top: .8em; border-top: 1px solid #E5E5EA; font-size: .86em; font-weight: 600; color: #6E6E73; }
.pl-oc-pie .pl-cuenta { font-size: 1.35em; }
.pl-oc-ok { color: var(--acento); }

/* =============================================================== 4. the habits that cost: three strips on a black sheet */
.pl-dol, .pl-serv, .pl-preg { position: relative; box-sizing: border-box; padding-block: clamp(92px, 12vh, 124px) clamp(70px, 10vh, 110px); }
.pl-dol { z-index: 4; margin-top: -32px; background: var(--oscuro); color: var(--oscuro-ink); border-radius: 32px 32px 0 0; box-shadow: 0 -22px 44px -30px rgba(0, 0, 0, .5); }
.pl-dol .titulo { margin-top: 10px; max-width: 15em; font-size: clamp(2rem, min(3.8vw, 6.2vh), 3.4rem); }
.pl-tiras { list-style: none; margin: clamp(20px, 3.6vh, 36px) 0 0; padding: 0; border-bottom: 1px solid var(--oscuro-linea); }
.pl-tira { --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; column-gap: clamp(16px, 3vw, 44px); padding-block: clamp(8px, 1.6vh, 18px); border-top: 1px solid var(--oscuro-linea); opacity: var(--e); translate: 0 calc((1 - var(--e)) * 30px); }
.pl-tira-n { font-family: var(--f-mono); font-size: 15px; color: var(--acento-oscuro); }
.pl-tira-t small { display: block; font-size: 15px; font-weight: 600; color: var(--oscuro-gris); }
.pl-tira-t p { margin-top: 4px; max-width: 15em; font-weight: 700; font-size: clamp(1.3rem, min(2.4vw, 4.4vh), 2.1rem); line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.pl-tira-d { height: clamp(100px, 16.5vh, 170px); width: auto; aspect-ratio: 520 / 150; max-width: 100%; }
.pl-dol .pl-nota { color: var(--oscuro-gris); }
.mov .pl-dol { min-height: calc(100vh + 32px); min-height: calc(100svh + 32px); display: grid; align-content: center; padding-bottom: 150px; }

/* =============================================================== 5. services: everything hangs from the same plate */
.pl-serv { z-index: 5; margin-top: -32px; background: var(--pagina); border-radius: 32px 32px 0 0; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .4); }
.pl-serv .titulo { margin-top: 10px; max-width: 15em; font-size: clamp(2rem, min(3.8vw, 6.2vh), 3.4rem); }
.mov .pl-serv { min-height: calc(100vh + 32px); min-height: calc(100svh + 32px); display: grid; align-content: center; padding-bottom: 150px; }
.pl-serv-cuerpo { --g: 14px; display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); column-gap: 64px; align-items: center; margin-top: clamp(22px, 4vh, 40px); }
.pl-placa { position: relative; margin: 0; opacity: clamp(0, calc(var(--v, 1) * 1.8), 1); }
.pl-placa svg { display: block; width: 100%; height: auto; }
.pl-placa::after { content: ""; position: absolute; left: 100%; top: 50%; width: 32px; height: 1.5px; background: var(--acento); }
.pa-p { fill: #1D1D1F; }
.pa-b { fill: #000000; stroke: #3a3a3d; stroke-width: 1; }
.pa-t { fill: #2a2a2c; stroke: #5a5a5e; stroke-width: 1; }
.pa-r { stroke: #5a5a5e; stroke-width: 1.4; }
.pa-k { fill: #86868B; font-weight: 600; letter-spacing: .12em; }
.pa-n { fill: #F5F5F7; font-weight: 700; letter-spacing: -.04em; }
.pa-v { fill: #F5F5F7; font-weight: 600; letter-spacing: -.01em; }
.pa-m { fill: #F5F5F7; font-family: var(--f-mono); font-weight: 500; letter-spacing: -.03em; }
.pa-ac { fill: var(--acento-oscuro); }
.pa-h { fill: none; stroke: #3a3a3d; stroke-width: 1; }
.pl-serv-lista { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--g); }
.pl-serv-lista::before { content: ""; position: absolute; left: -32px; top: calc((100% - 2 * var(--g)) / 6); bottom: calc((100% - 2 * var(--g)) / 6); width: 1.5px; background: var(--acento); }
.pl-sv { --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); position: relative; display: grid; grid-template-columns: clamp(130px, min(17vw, 24vh), 220px) minmax(0, 1fr) 32px; align-items: center; column-gap: clamp(16px, 2.4vw, 32px); padding: clamp(10px, 1.8vh, 18px) 22px clamp(10px, 1.8vh, 18px) clamp(14px, 1.6vw, 22px); border-radius: 24px; background: var(--alt); box-shadow: inset 0 0 0 1px var(--linea); opacity: var(--e); translate: 0 calc((1 - var(--e)) * 30px); transition: background-color .35s var(--ease); }
.pl-sv::before { content: ""; position: absolute; right: 100%; top: 50%; width: 32px; height: 1.5px; background: var(--acento); }
.pl-sv-d { width: 100%; height: auto; }
.pl-sv-t small { display: block; font-size: 15px; font-weight: 600; color: var(--acento); }
.pl-sv-t h3 { margin-top: 4px; font-weight: 700; font-size: clamp(1.3rem, min(2.1vw, 4vh), 1.85rem); line-height: 1.1; letter-spacing: -.028em; }
.pl-sv-t h3 a { text-decoration: none; }
.pl-sv-t h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pl-sv-t p { margin-top: 6px; max-width: 30em; font-size: clamp(14.5px, 1.2vw, 16px); line-height: 1.36; color: #6E6E73; }
.pl-sv-f { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--boton); color: var(--boton-ink); font-size: 20px; line-height: 1; padding-bottom: 2px; transition: transform .32s var(--ease); }
@media (hover: hover) { .pl-sv:hover { background: #ECECF0; } .pl-sv:hover .pl-sv-f { transform: translateX(3px); } }

/* =============================================================== 6. the two questions, each with its drawing */
.pl-preg { z-index: 6; margin-top: -32px; background: var(--alt); border-radius: 32px; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .35), 0 34px 60px -30px rgba(0, 0, 0, .5); }
.mov .pl-preg { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.pl-preg-dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: max(22px, calc((100% - 1240px) / 2)); }
.pl-preg-cab { grid-column: 1 / -1; margin-bottom: clamp(18px, 3.4vh, 36px); }
.pl-preg-cab .titulo { margin-top: 10px; font-size: clamp(2.4rem, min(5vw, 8vh), 4.4rem); line-height: 1.04; }
.pl-q { padding: clamp(18px, 3.2vh, 34px) clamp(20px, 4vw, 60px) 0 0; border-top: 1px solid var(--linea); }
.pl-q + .pl-q { padding: clamp(18px, 3.2vh, 34px) 0 0 clamp(20px, 4vw, 60px); border-left: 1px solid var(--linea); }
.pl-q-d { width: min(100%, 460px); height: auto; margin-bottom: clamp(14px, 2.6vh, 28px); }
.pl-q h3 { font-weight: 700; font-size: clamp(1.5rem, min(2.5vw, 4.6vh), 2.3rem); line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.pl-q p { margin-top: 12px; max-width: 28em; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.4; color: #6E6E73; }
.mov .serv-cierre { position: sticky; bottom: 0; z-index: 0; }

/* =================================================================== motion on =================================================================== */
/* the pinned stages arrive as a sheet with round corners that flatten, and stay put while the next sheet covers them */
.mov #pl-orden .fijo { align-items: center; transform-origin: 50% 100%; transform: translateY(calc(var(--sale, 0) * 100vh)) scale(calc(1 - var(--sale, 0) * .05)); opacity: calc(1 - var(--sale, 0) * .45); border-radius: calc((1 - var(--entra, 1)) * 36px) calc((1 - var(--entra, 1)) * 36px) 0 0; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .5); will-change: transform; }
.mov #pl-orden { --u5: calc(var(--s, 1) * 5); }
.mov #pl-orden [data-d="0"], .mov #pl-orden [data-l="0"] { --k: 0; } .mov #pl-orden [data-d="1"] { --k: 1; } .mov #pl-orden [data-d="2"], .mov #pl-orden [data-l="2"] { --k: 2; } .mov #pl-orden [data-d="3"] { --k: 3; } .mov #pl-orden [data-d="4"] { --k: 4; }
.mov #pl-orden [data-d], .mov #pl-orden [data-l] { --r: clamp(0, calc((var(--u5) - var(--k) - var(--t, .03)) * 9), 1); }
.mov #pl-orden [data-d] { opacity: var(--r); }
.mov #pl-orden .pl-bl[data-d] .pl-bl-c { opacity: var(--r); translate: 0 calc((1 - var(--r)) * .8em); }
.mov #pl-orden .pl-bl[data-d] .pl-bl-k { opacity: calc(.5 + var(--r) * .5); }
.mov #pl-orden .pl-banda-l li[data-d] { opacity: 1; }
.mov #pl-orden .pl-banda-l li[data-d] :is(b, i) { opacity: var(--r); translate: 0 calc((1 - var(--r)) * .6em); }
.mov #pl-orden .pl-banda-l li[data-d] small { opacity: calc(.45 + var(--r) * .55); }
.mov #pl-orden .pl-nd[data-l]::after { opacity: var(--r); }
.mov #pl-orden .pl-n-alm[data-l] .pl-res { opacity: var(--r); }
.mov #pl-orden .pl-n-alm[data-l] b { color: color-mix(in srgb, var(--oscuro-ink) calc(62% + var(--r) * 38%), transparent); }
.mov #pl-orden .cx-s { opacity: var(--r); }
/* inside the document, rows that belong to a block arrive one after another; at the last step the paper dims and only the cost stays bright */
.mov #pl-orden .pl-bl { --dim: clamp(0, calc((var(--u5) - 4.02) * 6), 1); opacity: calc(1 - var(--dim) * .6); }
.mov #pl-orden .pl-ot-cab { opacity: calc(1 - clamp(0, calc((var(--u5) - 4.02) * 6), 1) * .6); }
.mov #pl-orden .pl-ck, .mov #pl-orden .pl-fl, .mov #pl-orden .pl-onda { opacity: clamp(0, calc((var(--u5) - var(--k, 0) - var(--tt, .03)) * 9), 1); }
.mov #pl-orden .pl-bl[data-d="0"] .pl-onda { --k: 0; --tt: .12; } .mov #pl-orden .pl-bl[data-d="1"] .pl-ck { --k: 1; --tt: .03; } .mov #pl-orden .pl-bl[data-d="1"] .pl-ck:nth-child(2) { --tt: .12; }
.mov #pl-orden .pl-bl[data-d="2"] .pl-fl { --k: 2; --tt: .03; } .mov #pl-orden .pl-bl[data-d="2"] .pl-fl:nth-child(2) { --tt: .1; } .mov #pl-orden .pl-bl[data-d="2"] .pl-fl:nth-child(3) { --tt: .17; }
.mov #pl-orden .pl-banda-l li:nth-child(3) { --t: .14; }
/* the status of the order and of the pump follow the step */
.mov #pl-orden .pl-estado span, .mov #pl-orden .pl-sello span { display: inline-flex; opacity: 0; transition: opacity .4s var(--ease); }
.mov #pl-orden[data-paso="0"] :is(.pl-estado, .pl-sello) span[data-k="0"], .mov #pl-orden[data-paso="1"] :is(.pl-estado, .pl-sello) span[data-k="1"], .mov #pl-orden[data-paso="2"] :is(.pl-estado, .pl-sello) span[data-k="2"], .mov #pl-orden[data-paso="3"] :is(.pl-estado, .pl-sello) span[data-k="3"], .mov #pl-orden[data-paso="4"] :is(.pl-estado, .pl-sello) span[data-k="4"] { opacity: 1; }
/* the cost on the pump: absent until the spares are reserved, then building; the bar and the split arrive with the last step */
.mov #pl-orden .pl-vib { display: block; opacity: calc(1 - clamp(0, calc((var(--u5) - 1.95) * 9), 1)); }
.mov #pl-orden .pl-coste { --k: 2; opacity: clamp(0, calc((var(--u5) - 2.02) * 9), 1); }
.mov #pl-orden .pl-barra, .mov #pl-orden .pl-leyenda { opacity: clamp(0, calc((var(--u5) - 4.04) * 7), 1); }
.mov #pl-orden .pl-barra i { transform: scaleX(clamp(0, calc((var(--u5) - 4.06) * 6), 1)); }
.mov #pl-orden .pl-vuelo { display: block; animation: pl-vuelo 2.6s linear infinite; animation-delay: calc(var(--i) * -.87s); }
@keyframes pl-vuelo { 0% { translate: 29em 40em; } 22% { translate: 26.2em 40em; } 77% { translate: 26.2em 27.6em; } 100% { translate: 22.8em 27.6em; } }
/* the step's text beside the drawing, one at a time */
.mov .pl-o-pasos { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 30px; min-height: min(17.5rem, 32vh); }
.mov .pl-op { grid-area: 1 / 1; 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 #pl-orden[data-paso="0"] .pl-op[data-k="0"], .mov #pl-orden[data-paso="1"] .pl-op[data-k="1"], .mov #pl-orden[data-paso="2"] .pl-op[data-k="2"], .mov #pl-orden[data-paso="3"] .pl-op[data-k="3"], .mov #pl-orden[data-paso="4"] .pl-op[data-k="4"] { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; }
.mov .pl-op h3 { margin-top: 8px; font-size: clamp(1.9rem, min(2.8vw, 5vh), 2.6rem); line-height: 1.04; }
.mov .pl-op p:not(.pl-reg) { font-weight: 600; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.3; letter-spacing: -.01em; }
.mov .pl-op .pl-reg { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--oscuro-linea); font-weight: 500; font-size: 12.5px; }
.mov .pl-o-riel { display: block; position: relative; margin-top: 20px; padding-left: 18px; }
.mov .pl-o-riel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--oscuro-linea); }
.mov .pl-o-riel::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--acento-oscuro); transform-origin: 50% 0; transform: scaleY(var(--s, 1)); }
.mov .pl-o-riel li { padding: 4px 0; font-size: 14px; color: var(--oscuro-gris); opacity: .55; transition: opacity .4s var(--ease), color .4s var(--ease); }
.mov #pl-orden[data-paso="0"] .pl-o-riel li[data-k="0"], .mov #pl-orden[data-paso="1"] .pl-o-riel li[data-k="1"], .mov #pl-orden[data-paso="2"] .pl-o-riel li[data-k="2"], .mov #pl-orden[data-paso="3"] .pl-o-riel li[data-k="3"], .mov #pl-orden[data-paso="4"] .pl-o-riel li[data-k="4"] { opacity: 1; color: var(--oscuro-ink); }
.mov #pl-orden .pl-nota { margin-top: 18px; }

/* the offline stage: the report is written (u3 from 0 to 1), the signal returns, the queue leaves in order (1 to 2), the last two follow (2 to 3) */
.mov #pl-sc .fijo { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 0; align-content: stretch; transform-origin: 50% 100%; transform: translateY(calc(var(--sale, 0) * 100vh)) scale(calc(1 - var(--sale, 0) * .05)); opacity: calc(1 - var(--sale, 0) * .45); border-radius: calc((1 - var(--entra, 1)) * 36px) calc((1 - var(--entra, 1)) * 36px) 0 0; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .35); will-change: transform; }
.mov .pl-sc-lienzo { align-self: center; margin: 0 auto; }
.mov #pl-sc { --u3: calc(var(--s, 1) * 3); --cn: clamp(0, calc((var(--u3) - 1.02) * 14), 1); --fin: clamp(0, calc((var(--u3) - 2.3) * 12), 1); }
.mov .pl-cola li, .mov .pl-oc-l li { --w: clamp(0, calc((var(--u3) - .04 - var(--i) * .07) * 14), 1); --e: clamp(0, calc((var(--u3) - var(--x)) * 14), 1); }
.mov .pl-cola li { opacity: var(--w); translate: 0 calc((1 - var(--w)) * .7em); }
.mov .pl-cola li span, .mov .pl-cola li time { opacity: calc(1 - var(--e) * .5); }
.mov .pl-oc-l li::before { opacity: calc(1 - var(--e)); }
.mov .pl-oc-l li > * { opacity: var(--e); translate: calc((1 - var(--e)) * -1.4em) 0; }
.mov .pl-tab-e1 { display: inline; opacity: calc(1 - var(--cn)); }
.mov .pl-tab-e2 { display: block; position: absolute; left: 0; right: 0; text-align: center; opacity: var(--cn); }
.mov .pl-tab-e { min-width: 9.2em; justify-content: flex-start; }
.mov .pl-ex { display: block; opacity: calc(1 - var(--cn)); }
.mov .pl-hilo::before { opacity: calc(1 - var(--cn)); }
.mov .pl-hilo::after { opacity: var(--cn); }
.mov .pl-barras i::after { opacity: clamp(0, calc((var(--u3) - 1 - var(--b) * .035) * 20), 1); }
.mov .pl-tacha { display: block; opacity: calc(1 - var(--cn)); }
.mov .pl-st1 { display: block; opacity: calc(1 - var(--cn)); }
.mov .pl-st2 { opacity: var(--cn); }
.mov .pl-sy1 { display: block; opacity: calc(1 - var(--cn)); }
.mov .pl-sy2 { opacity: var(--cn); }
.mov .pl-oc-ok { opacity: var(--fin); }
.mov .pl-punto { display: block; opacity: calc(var(--cn) * (1 - var(--fin))); animation: pl-punto 2.4s linear infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes pl-punto { 0% { translate: .6em 14.67em; } 100% { translate: 19.4em 14.67em; } }
.mov .pl-sc-pasos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-self: end; }
.mov .pl-sc-pasos li { 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; }
.mov #pl-sc[data-paso="0"] .pl-sc-pasos li[data-k="0"], .mov #pl-sc[data-paso="1"] .pl-sc-pasos li[data-k="1"], .mov #pl-sc[data-paso="2"] .pl-sc-pasos li[data-k="2"] { opacity: 1; visibility: visible; translate: 0 0; }

/* =================================================================== screens up to 1180px =================================================================== */
@media (max-width: 1180px) {
  #pl-orden .fijo { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); column-gap: 28px; }
}

/* =================================================================== phones =================================================================== */
@media (max-width: 820px) {
  .pl-nota { font-size: 11.5px; }
  /* hero: the headline, then the plan filling the rest of the screen */
  .pl-hero-fijo { padding: 72px 22px 20px; }
  .mov .pl-hero-fijo { display: block; padding-block: 70px 18px; }
  .pl-hoja { --w: calc(100vw - 44px); width: auto; aspect-ratio: auto; font-size: 16px; display: flex; flex-direction: column; }
  .pl-hero-texto { position: static; order: 1; width: auto; text-shadow: none; }
  .mov .pl-hero-texto { opacity: 1; }
  .pl-ceja { font-size: 1.06em; margin-bottom: .35em; }
  .pl-hero h1 { max-width: none; font-size: clamp(2.2rem, 9.6vw, 2.7rem); }
  .pl-sub { margin-top: .6em; max-width: none; font-size: 1.06rem; }
  .pl-hero .acciones { margin-top: .9em; gap: 4px 20px; }
  .pl-hero .avales { margin-top: .55em; font-size: 12.5px; }
  .pl-planos { position: relative; inset: auto; order: 2; width: 100%; margin-top: 12px; aspect-ratio: 346 / 400; }
  .pl-plano-h { display: none; }
  .pl-plano-v { display: block; transform-origin: 25% 62%; }
  .mov .pl-plano { transform: scale(calc(1 + var(--cubre, 0) * .5)); }
  /* the order of work: the pump and its cost, then the paper filling in */
  #pl-orden { --u: 13.2px; }
  #pl-orden .fijo { display: block; padding: 66px 22px 98px; }
  .pl-o-texto { display: block; }
  .mov #pl-orden .fijo { display: block; }
  .mov .pl-o-eti, .mov .pl-o-h2, .mov .pl-o-riel { display: none; }
  .mov #pl-orden .pl-nota { margin-top: 10px; }
  .mov .pl-o-pasos { margin-top: 0; min-height: 0; }
  .mov .pl-op { padding-bottom: 2px; }
  .mov .pl-op h3 { font-size: 1.55rem; margin-top: 3px; }
  .mov .pl-op p:not(.pl-reg) { margin-top: 5px; font-size: .98rem; line-height: 1.27; }
  .mov .pl-op .pl-reg { display: none; }
  .mov .pl-o-pasos { height: 8.1rem; }
  .pl-lienzo { width: 100%; height: auto; margin-top: 12px; display: grid; row-gap: .8em; }
  .mov .pl-lienzo { margin-top: 12px; }
  .pl-cx, .pl-vuelo, .pl-vib, .pl-n-raiz, .pl-n-pozos, .pl-n-planta, .pl-n-p102, .pl-n-alm { display: none !important; }
  .pl-nodos { display: block; }
  .pl-n-p101 { position: relative; left: auto; top: auto; width: auto; height: auto; padding: .8em 1em .85em; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cab cos" "est est" "bar bar"; align-items: center; gap: .6em .9em; }
  .pl-p-cab { grid-area: cab; }
  .pl-bomba { width: 2.3em; height: 2.3em; }
  .pl-p-cab small { display: none; }
  .pl-n-p101 .pl-p-cab b { font-size: 1.7em; }
  .pl-estado { grid-area: est; margin: 0; height: 2em; font-size: .82em; justify-self: start; min-width: 0; }
  .pl-estado span { padding: 0 .7em 0 .55em; }
  .pl-coste { grid-area: cos; margin: 0; padding: 0; border: 0; text-align: right; }
  .pl-coste small { display: none; }
  .pl-n-p101 .pl-suma { margin: 0; font-size: 1.7em; }
  .pl-barra { grid-area: bar; margin: 0; }
  .pl-leyenda { display: none; }
  .pl-ot { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 0; }
  .pl-ot-cab { padding: .9em 1.1em .6em; display: grid; grid-template-columns: auto 1fr; column-gap: .9em; align-items: center; }
  .pl-ot-fila { grid-column: 1 / -1; margin-bottom: .1em; }
  .pl-ot-num { margin: 0; font-size: 1.8em; }
  .pl-ot-t { margin: 0; font-size: .95em; }
  .pl-ot-act { display: none; }
  .pl-bl { grid-template-columns: 5.2em minmax(0, 1fr); padding: .5em 1.1em .5em; column-gap: .6em; }
  .pl-bl-k { font-size: .66em; padding-top: .35em; }
  .pl-bl::after { left: 6.9em; right: 1.1em; top: .75em; }
  .pl-onda { display: none; }
  .pl-fl small, .pl-m2:not(.pl-fila1 .pl-m2) { display: none; }
  .pl-fl { padding: .12em 0; grid-template-columns: minmax(0, 1fr) auto 4.4em; }
  .pl-fl em { display: none; }
  .pl-banda { padding: .7em 1.1em .8em; }
  .pl-banda .pl-suma { font-size: 1.5em; }
  .pl-banda-l { margin-top: .5em; gap: .5em; }
  .pl-banda-l li { padding-top: .4em; }
  .pl-banda-l small { font-size: .62em; }
  .pl-banda-l b { font-size: .92em; }
  .pl-ot .pl-k, .pl-oc .pl-k { font-size: .64em; }
  .pl-sello { height: 1.7em; }
  /* offline: the device, the link, the order, one under the other */
  #pl-sc { --u: 12.8px; }
  #pl-sc .fijo { padding: 64px 22px 98px; }
  .mov #pl-sc .fijo { display: block; }
  .pl-sc-cab { display: block; }
  .pl-sc-tit .titulo { font-size: 1.7rem; margin-top: 3px; max-width: none; }
  .pl-sc-tit .etiqueta { font-size: 17px; }
  .mov .pl-sc-pasos { margin-top: 8px; height: 6.2rem; }
  .mov .pl-sc-pasos h3 { font-size: 1.15rem; margin-top: 0; }
  .mov .pl-sc-pasos small { display: none; }
  .mov .pl-sc-pasos p { font-size: .95rem; margin-top: 2px; line-height: 1.28; }
  .pl-sc-lienzo { width: 100%; height: auto; margin: 10px auto 0; display: grid; row-gap: .5em; }
  .pl-tab, .pl-oc { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .pl-tab { border-radius: 1.5em; padding: .5em; }
  .pl-tab-p { padding: .6em .8em .5em; border-radius: 1.1em; }
  .pl-tab-b { height: 1.5em; font-size: .78em; }
  .pl-tab-t { margin-top: .4em; padding-bottom: .35em; }
  .pl-tab-t span { font-size: 1em; }
  .pl-cola { display: block; }
  .pl-cola li { grid-template-columns: 3em minmax(0, 1fr) 1.3em; padding: .22em 0; }
  .pl-cola span { font-size: .8em; }
  .pl-cola time { font-size: .76em; }
  .pl-tab-pie { padding-top: .35em; font-size: .8em; }
  .pl-enlace { position: relative; left: auto; top: auto; width: auto; height: auto; display: flex; align-items: center; justify-content: center; gap: 1.1em; padding: .2em 0; }
  .pl-hilo { display: none; }
  .pl-senal { position: relative; left: auto; top: auto; width: 2.5em; height: 3em; flex: none; }
  .pl-barras i { width: .46em; height: calc(.8em + var(--b) * .72em); }
  .pl-senal-t { position: static; display: grid; justify-items: start; text-align: left; }
  .pl-senal-t span { font-size: 1.1em; }
  .pl-st2 small { display: inline; margin-left: .5em; }
  .pl-punto { display: none !important; }
  .pl-oc { padding: .8em 1em .7em; border-radius: 1.1em; }
  .pl-oc .pl-ot-num { font-size: 1.6em; display: inline-block; margin-right: .6em; }
  .pl-oc .pl-ot-t { display: inline; font-size: .9em; }
  .pl-oc-l { display: block; margin-top: .4em; }
  .pl-oc-l li { min-height: 2em; padding: 0 .5em; }
  .pl-oc-l span { font-size: .8em; }
  .pl-oc-l time { font-size: .76em; }
  .pl-oc-pie { padding-top: .45em; margin-top: .3em; }
  .pl-nota-sc { display: none; }
  /* sheets */
  .pl-dol, .pl-serv, .pl-preg { padding-block: 88px 70px; }
  .mov .pl-dol, .mov .pl-serv, .mov .pl-preg { padding-block: 62px 98px; align-content: start; }
  .mov .pl-dol { padding-bottom: 150px; }
  .pl-dol .titulo, .pl-serv .titulo { font-size: 1.75rem; margin-top: 4px; }
  .pl-dol .etiqueta, .pl-serv .etiqueta, .pl-preg .etiqueta { font-size: 17px; }
  .pl-tiras { margin-top: 14px; }
  .pl-tira { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding-block: 9px; }
  .pl-tira-n { display: none; }
  .pl-tira-t p { font-size: 1.1rem; max-width: none; }
  .pl-tira-t small { font-size: 13px; }
  .pl-tira-d { width: 100%; height: auto; max-height: 104px; }
  .pl-serv-cuerpo { grid-template-columns: minmax(0, 1fr); row-gap: 14px; margin-top: 14px; }
  .pl-placa { display: none; }
  .pl-serv-lista::before, .pl-sv::before { display: none; }
  .pl-sv { grid-template-columns: 112px minmax(0, 1fr) 28px; padding: 12px 14px 12px 10px; column-gap: 12px; border-radius: 20px; }
  .pl-serv-lista { --g: 10px; }
  .pl-sv-t small { font-size: 12.5px; }
  .pl-sv-t h3 { font-size: 1.12rem; }
  .pl-sv-t p { margin-top: 4px; font-size: 13px; line-height: 1.32; }
  .pl-sv-f { width: 28px; height: 28px; font-size: 18px; }
  .pl-preg-dentro { grid-template-columns: minmax(0, 1fr); }
  .pl-preg-cab .titulo { font-size: 2.3rem; }
  .pl-q, .pl-q + .pl-q { padding: 14px 0 12px; border-left: 0; }
  .pl-q-d { width: min(100%, 230px); margin-bottom: 8px; }
  .pl-q h3 { font-size: 1.25rem; }
  .pl-q p { margin-top: 6px; font-size: .98rem; line-height: 1.34; }
}
/* =================================================================== phones with a short screen: Safari gives the page about 700px of an 844px phone ===================================================================
   Every resting place is composed again at that height: nothing under the top bar (52px) or behind the contact button (it floats about 100px from the bottom). */
@media (max-width: 820px) and (max-height: 780px) {
  .pl-ej { display: inline; font-weight: 500; }
  .pl-dol .pl-ej { font-size: 13px; color: var(--oscuro-gris); }
  .pl-l1 { display: none; }
  .pl-l2 { display: inline; }
  /* hero: a tighter headline, and the plan takes whatever is left of the screen, whole */
  .mov .pl-hero-fijo { padding-block: 62px 12px; }
  .mov .pl-hoja { height: 100%; }
  .pl-ceja { font-size: 1rem; margin-bottom: .15em; }
  .pl-hero h1 { font-size: clamp(2rem, 8.9vw, 2.25rem); }
  .pl-sub { margin-top: .4em; font-size: 1rem; line-height: 1.18; }
  .pl-hero .acciones { margin-top: .5em; flex-wrap: nowrap; gap: 4px 16px; }
  .pl-hero .avales { margin-top: .35em; font-size: 12px; line-height: 1.28; }
  .mov .pl-planos { flex: 1 1 0; min-height: 0; aspect-ratio: auto; margin-top: 6px; }
  /* the order of work: the cost band at the foot of the paper has to stay on screen */
  #pl-orden .fijo { padding: 58px 22px 100px; }
  .mov .pl-op h3 { font-size: 1.4rem; }
  .mov .pl-op p:not(.pl-reg) { margin-top: 3px; font-size: .92rem; line-height: 1.24; }
  .mov .pl-o-pasos { height: 7.2rem; }
  .mov #pl-orden .pl-nota { display: none; }
  .mov .pl-lienzo { margin-top: 6px; row-gap: .5em; }
  .pl-n-p101 { padding: .55em .9em .6em; gap: .4em .8em; }
  .pl-bomba { width: 1.9em; height: 1.9em; }
  .pl-n-p101 .pl-p-cab b { font-size: 1.5em; }
  .pl-estado { height: 1.8em; font-size: .78em; }
  .pl-n-p101 .pl-suma { font-size: 1.5em; }
  .pl-ot-cab { padding: .6em 1em .35em; }
  .pl-ot-fila { margin-bottom: 0; }
  .pl-ot-num { font-size: 1.55em; }
  .pl-ot-t { font-size: .88em; }
  .pl-bl { padding: .32em 1em .3em; }
  .pl-bl::after { top: .45em; height: 1.7em; background: linear-gradient(#ECECEF, #ECECEF) 0 0 / 62% .55em no-repeat, linear-gradient(#ECECEF, #ECECEF) 0 1.1em / 38% .55em no-repeat; }
  .pl-ck { line-height: 1.38; }
  .pl-fl { padding: .05em 0; }
  .pl-banda { padding: .5em 1em .6em; }
  .pl-banda .pl-suma { font-size: 1.35em; }
  .pl-banda-l { margin-top: .35em; }
  .pl-banda-l li { padding-top: .3em; }
  .pl-banda-l i { display: none; }
  /* offline: the title gives way to the label and the step's text, and the three pieces tighten */
  #pl-sc { --u: 12.2px; }
  #pl-sc .fijo { padding: 58px 22px 100px; }
  .pl-sc-tit .titulo { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mov .pl-sc-pasos { margin-top: 6px; height: 4.7rem; }
  .mov .pl-sc-pasos h3 { font-size: 1.1rem; }
  .mov .pl-sc-pasos p { font-size: .9rem; line-height: 1.25; }
  .pl-sc-lienzo { margin-top: 8px; row-gap: .35em; }
  .pl-tab { padding: .4em; }
  .pl-tab-p { padding: .45em .7em .35em; }
  .pl-tab-b { height: 1.3em; }
  .pl-tab-t { margin-top: .2em; padding-bottom: .2em; }
  .pl-cola li { padding: .14em 0; }
  .pl-tab-pie { padding-top: .2em; }
  .pl-enlace { padding: 0; gap: 1em; }
  .pl-senal { width: 2em; height: 2.4em; }
  .pl-barras i { width: .38em; height: calc(.6em + var(--b) * .58em); }
  .pl-senal-t span { font-size: 1em; }
  .pl-oc { padding: .55em .9em .5em; }
  .pl-oc .pl-ot-num { font-size: 1.35em; }
  .pl-oc-l { margin-top: .25em; }
  .pl-oc-l li { min-height: 1.6em; }
  .pl-oc-pie { padding-top: .3em; margin-top: .15em; }
  /* sheets: what fits on a 700px screen */
  .mov .pl-dol, .mov .pl-serv, .mov .pl-preg { padding-top: 60px; }
  .pl-dol .titulo { font-size: 1.4rem; margin-top: 2px; }
  .pl-tiras { margin-top: 8px; }
  .pl-tira { row-gap: 4px; padding-block: 6px; }
  .pl-tira-t small { display: none; }
  .pl-tira-t p { font-size: 1rem; line-height: 1.12; }
  .pl-tira-d { max-height: 92px; }
  .pl-dol .pl-nota { display: none; }
  .pl-serv .titulo { font-size: 1.5rem; margin-top: 2px; }
  .pl-serv-cuerpo { margin-top: 10px; row-gap: 10px; }
  .pl-serv-lista { --g: 8px; }
  .pl-sv { grid-template-columns: 92px minmax(0, 1fr) 28px; padding: 9px 12px 9px 8px; column-gap: 10px; }
  .pl-sv-t p { font-size: 12.5px; line-height: 1.3; }
  .pl-preg-cab .titulo { font-size: 1.9rem; margin-top: 2px; }
  .pl-preg-cab { margin-bottom: 4px; }
  .pl-q, .pl-q + .pl-q { padding: 8px 0 8px; }
  .pl-q-d { width: min(100%, 176px); margin-bottom: 4px; }
  .pl-q h3 { font-size: 1.12rem; }
  .pl-q p { margin-top: 4px; font-size: .92rem; line-height: 1.3; }
}
@media (max-height: 640px) { .pl-hero .avales { display: none; } }
@media (max-height: 800px) and (min-width: 821px) {
  #pl-sc { --u: max(9px, min(calc((100vh - 352px) / 30), calc((min(100vw, 1440px) - 44px) / 62))); --u: max(9px, min(calc((100svh - 352px) / 30), calc((min(100vw, 1440px) - 44px) / 62))); }
  .pl-nota-sc { display: none; }
  .mov .pl-o-riel { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pl-sv, .pl-sv-f { transition: none !important; } }