/* AXELIA: the site's styles.
   Layout: pinned stages. Each section holds the screen while scroll drives one change, then hands over to the next with a different transition. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/geist.9b6f5ff45b.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/geist-mono.5f3d6ad60f.woff2) format('woff2'); }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.salto { position: absolute; left: 12px; top: -80px; z-index: 30; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 980px; background: var(--boton); color: var(--boton-ink); text-decoration: none; }
.salto:focus { top: 12px; }
:root {
  --hero: #F5F5F7; --hero-ink: #1D1D1F; --hero-gris: #6E6E73;
  --pagina: #FFFFFF; --alt: #F5F5F7; --ink: #1D1D1F; --gris: #86868B; --linea: #D2D2D7;
  --oscuro: #000000; --oscuro-ink: #F5F5F7; --oscuro-gris: #86868B; --oscuro-linea: #333336;
  --acento: #E8501A; --acento-oscuro: #FF7A3D; --boton: #1D1D1F; --boton-ink: #FFFFFF;
  --detras: #0B0B0C; --sombra: rgba(0, 0, 0, 0.22); --brillo: rgba(232, 80, 26, 0); --nucleo: none;
  --f: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.4, 0, .6, 1);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--pagina); color: var(--ink); font-family: var(--f); font-size: 17px; line-height: 1.47; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; }
#pagina { position: relative; background: var(--pagina); color: var(--ink); overflow-x: clip; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
h1, h2, h3, p, ol { margin: 0; padding: 0; }
h1, h2 { text-wrap: balance; }
.etiqueta { font-weight: 600; font-size: 21px; line-height: 1.19; letter-spacing: 0.011em; }
.titulo { font-weight: 700; font-size: clamp(2.2rem, min(4.45vw, 7.2vh), 4rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.copia { font-weight: 600; font-size: 17px; line-height: 1.24; letter-spacing: -0.02em; }
.pildora { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 980px; font-size: 17px; text-decoration: none; transition: opacity .32s var(--ease), transform .32s var(--ease); }
.pildora:hover { opacity: .82; }
.enlace { display: inline-flex; align-items: center; min-height: 48px; font-size: 17px; text-decoration: none; }
.enlace:hover { text-decoration: underline; }
.ancho { padding-inline: max(22px, calc((100% - 980px) / 2)); }

/* ---------- top bar ---------- */
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; min-height: 52px; background: color-mix(in srgb, var(--hero) 80%, transparent); color: var(--hero-ink); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--hero-ink) 14%, transparent); }
.barra { transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.barra[data-sobre="oscuro"] { background: color-mix(in srgb, var(--oscuro) 78%, transparent); color: var(--oscuro-ink); border-bottom-color: color-mix(in srgb, var(--oscuro-ink) 16%, transparent); }
.barra .nombre { font-weight: 600; font-size: 21px; letter-spacing: 0.01em; text-decoration: none; }
.barra nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; font-size: 12px; }
.barra nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.barra nav a:hover { text-decoration: underline; }

@media (hover: hover) {
  .pildora:hover { transform: scale(1.03); }
  .cifras div:hover b { color: var(--acento); }
  .cifras div:hover { translate: 0 -6px; }
  .cifras div:hover::after { transform: scaleX(1); }
  .cifras:has(div:hover) div:not(:hover) { --dim: .42; }
}

/* ---------- 1. hero: what the firm does, then its first deliverable grows to fill the screen ---------- */
#s-hero { position: relative; z-index: 1; background: var(--detras); --abre: 1; --f: 0; --c: 0; --cap: 1; }
.hero-escena { position: relative; background: var(--hero); color: var(--hero-ink); display: grid; justify-items: center; align-content: start; padding: clamp(40px, 8vh, 84px) 22px clamp(40px, 7vh, 72px); text-align: center; overflow: hidden; }
.hero-texto { display: grid; justify-items: center; opacity: calc(1 - var(--f)); transform: translateY(calc(var(--f) * -36px)); }
.hero-texto .marca { font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.19; letter-spacing: 0.011em; margin-bottom: 8px; }
.hero-texto h1 { max-width: 10.4em; font-weight: 700; font-size: clamp(2.5rem, min(6.67vw, 10vh), 6rem); line-height: 1.04; letter-spacing: -0.034em; }
.hero-texto .sub { margin-top: 14px; max-width: 30em; font-weight: 600; font-size: clamp(1.15rem, min(1.95vw, 3.1vh), 1.75rem); line-height: 1.16; letter-spacing: -0.006em; color: var(--hero-gris); text-wrap: balance; }
.hero-texto .sub b { font-weight: 600; color: var(--hero-ink); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 26px; margin-top: 18px; }
.avales { margin-top: 12px; font-size: 14px; line-height: 1.3; color: var(--hero-gris); }
.velo, .fundido { display: none; }
/* the frame holds a process map drawn in the page: lanes, steps, connectors, and the order that moves through them */
.hero-media { position: relative; width: min(100%, 980px); margin: clamp(26px, 5vh, 48px) 0 0; border-radius: 28px; overflow: hidden; background-color: var(--oscuro); background-image: radial-gradient(circle, color-mix(in srgb, var(--oscuro-ink) 10%, transparent) 1px, transparent 1.6px); background-size: 28px 28px; color: var(--oscuro-ink); text-align: left; }
.flujo-lienzo { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(14px, 2.4vh, 26px); padding: clamp(20px, 3vw, 36px) clamp(18px, 3vw, 36px) 8px; }
.flujo-titulo small { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.011em; color: var(--oscuro-gris); }
.flujo-titulo b { display: block; margin-top: 3px; font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.75rem); line-height: 1.14; letter-spacing: -0.02em; }
.flujo-mapa { position: relative; display: grid; }
.flujo-carriles, .flujo-pasos { grid-area: 1 / 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.flujo-carriles li { border-top: 1px solid var(--oscuro-linea); padding-top: 9px; font-size: 13px; font-weight: 600; letter-spacing: 0.011em; color: var(--oscuro-gris); }
.flujo-pasos { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: clamp(14px, 1.9vw, 28px); }
.paso { position: relative; z-index: 1; align-self: center; grid-column: var(--col); grid-row: var(--fila); margin-block: 36px 14px; padding: 11px 13px 13px; border-radius: 16px; background: color-mix(in srgb, var(--oscuro-ink) 8%, var(--oscuro)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oscuro-ink) 18%, transparent); transition: translate .32s var(--ease); }
.paso::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--acento-oscuro); opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.paso.hecho::after { opacity: 1; }
.paso small { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--oscuro-gris); }
.paso small::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--oscuro-ink) 30%, transparent); transition: background-color .45s var(--ease); }
.paso.hecho small::before { background: var(--acento-oscuro); }
.paso b { display: block; margin-top: 6px; font-weight: 600; font-size: clamp(.95rem, 1.4vw, 1.3rem); line-height: 1.12; letter-spacing: -0.02em; }
.paso span { display: block; margin-top: 5px; font-size: clamp(.72rem, .95vw, .9rem); line-height: 1.25; color: var(--oscuro-gris); }
.flujo-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flujo-lineas path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flujo-lineas .base { stroke: color-mix(in srgb, var(--oscuro-ink) 30%, transparent); }
.flujo-lineas .viva { stroke: var(--acento-oscuro); opacity: 0; transition: opacity .45s var(--ease); }
.flujo-lineas .viva.on { opacity: 1; }
/* what travels: one dot per connector, at a steady pace, only on the stretch the order has already covered */
.paquete { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--acento-oscuro); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento-oscuro) 24%, transparent); offset-rotate: 0deg; opacity: 0; transition: opacity .45s var(--ease); animation: viaja var(--dur, 2.4s) linear infinite; animation-play-state: paused; pointer-events: none; }
.paquete.on { opacity: 1; animation-play-state: running; }
.flujo-lienzo.fuera .paquete { animation-play-state: paused; }
@keyframes viaja { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (hover: hover) { .paso:hover { translate: 0 -3px; } }
.hero-media figcaption { padding: 4px clamp(18px, 3vw, 36px) clamp(20px, 3vw, 32px); opacity: var(--cap); transform: translateY(calc((1 - var(--cap)) * 22px)); }
.hero-media figcaption small { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0.011em; color: var(--oscuro-gris); }
.hero-media figcaption b { display: block; margin-top: 6px; max-width: 13em; font-weight: 600; font-size: clamp(1.5rem, min(2.78vw, 4.6vh), 2.5rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }

/* ---------- 2. why: words fill in as you read ---------- */
#s-porque { position: relative; z-index: 2; background: var(--pagina); padding-block: clamp(72px, 12vh, 150px) clamp(64px, 11vh, 130px); }
#leer { margin-top: 14px; max-width: 20.5em; font-weight: 600; font-size: clamp(1.6rem, min(2.78vw, 4.6vh), 2.5rem); line-height: 1.2; letter-spacing: -0.012em; }
#leer span { color: color-mix(in srgb, var(--ink) calc(22% + var(--w, 1) * 78%), transparent); }

/* ---------- today: a row of scenes you can drag through ---------- */
#s-hoy { --escena: min(80vw, 1120px, 118vh); position: relative; z-index: 1; background: var(--pagina); padding-block: clamp(24px, 5vh, 60px) clamp(64px, 11vh, 130px); }
#s-hoy .titulo { text-align: center; margin-bottom: clamp(22px, 4vh, 44px); padding-inline: 22px; }
/* touch keeps the system's own sideways scrolling with snap; with a mouse or trackpad the script moves the row (class "guiado"),
   so a sideways gesture never moves the page and a vertical one never moves the row */
.carril { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carril::-webkit-scrollbar { display: none; }
.carril .fila { position: relative; display: flex; gap: clamp(12px, 1.8vw, 26px); width: max-content; }
.carril.guiado { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.carril.guiado.arrastra { cursor: grabbing; }
.carril.guiado .fila { will-change: transform; }
.carril img { -webkit-user-drag: none; }
#s-hoy .fila { padding-inline: max(22px, calc((100vw - var(--escena)) / 2)); }
/* --d: how far a tile is from the middle of the row, in tiles; --n: the same without sign, 0 to 1 */
.escena-t { position: relative; flex: none; width: var(--escena); aspect-ratio: 1120 / 600; border-radius: 28px; overflow: hidden; scroll-snap-align: center; background: #000000; color: #F5F5F7; opacity: calc(1 - var(--n, 0) * .52); transform: scale(calc(1 - var(--n, 0) * .045)); }
.escena-t img, .oferta-t img { position: absolute; top: 0; left: -6%; width: 112%; height: 100%; max-width: none; object-fit: cover; translate: calc(var(--d, 0) * -4.5%) 0; transition: transform 1.2s var(--ease); }
.escena-t::after { content: ""; position: absolute; inset: 42% 0 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.74)); pointer-events: none; }
.escena-t .pie { position: absolute; left: clamp(18px, 3vw, 44px); right: clamp(18px, 3vw, 44px); bottom: clamp(18px, 3vw, 40px); z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; opacity: calc(1 - var(--n, 0) * 1.6); translate: calc(var(--d, 0) * 36px) 0; }
.escena-t .pie p { flex: 1 1 260px; min-width: 0; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.25; }
.escena-t .pie b { font-weight: 700; }
.pildora.clara { background: #F5F5F7; color: #1D1D1F; min-height: 44px; }
.paletas { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; }
.puntos { display: flex; align-items: center; gap: 9px; margin-right: auto; }
.puntos i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: .22; transition: opacity .32s var(--ease), transform .32s var(--ease); }
.puntos i.es { opacity: 1; transform: scale(1.3); }
.paleta[disabled] { opacity: .3; cursor: default; }
.paleta { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; transition: background-color .32s var(--ease), transform .32s var(--ease); }

/* ---------- screens: ERP and CRM showing the same figure ---------- */
#s-pantallas { position: relative; z-index: 1; background: #000000; color: #F5F5F7; padding-block: clamp(56px, 9vh, 110px) clamp(64px, 10vh, 120px); text-align: center; overflow: hidden; --a: 1; }
.rotulo { font-size: clamp(1.7rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: 0.01em; font-weight: 300; text-transform: uppercase; }
.rotulo b { font-weight: 700; }
.maqueta { display: block; width: min(100%, 1180px, 94vh); margin: clamp(4px, 1.5vh, 20px) auto 0; perspective: 1400px; }
.maqueta img { display: block; width: 100%; height: auto; opacity: calc(.15 + var(--a) * .85); transform: scale(calc(.9 + var(--a) * .1)) rotateX(calc(var(--ty, 0) * -3deg)) rotateY(calc(var(--tx, 0) * 4deg)); transition: transform .45s var(--ease); }
#s-pantallas .frase { max-width: 22em; margin: clamp(4px, 1vh, 14px) auto 0; font-weight: 600; font-size: clamp(1.25rem, 2.22vw, 2rem); line-height: 1.125; }
#s-pantallas .nota { margin-top: 18px; font-size: 12px; color: #86868B; }
.pildora.borde { border: 1px solid currentColor; }

/* ---------- what AXELIA offers: tall cards ---------- */
#s-oferta { position: relative; z-index: 1; background: var(--alt); padding-block: clamp(64px, 11vh, 130px) clamp(40px, 7vh, 80px); }
#s-oferta .titulo { max-width: 12em; margin: 10px 0 clamp(24px, 4vh, 48px); }
#s-oferta .fila { padding-inline: max(22px, calc((100vw - 980px) / 2)); }
.oferta-t { position: relative; flex: none; width: min(74vw, 372px, 31vh); aspect-ratio: 372 / 640; border-radius: 28px; overflow: hidden; scroll-snap-align: start; scroll-margin-inline: max(22px, calc((100vw - 980px) / 2)); background: #000000; color: #F5F5F7; --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 44px)); }
.oferta-t .cab { position: absolute; left: 22px; right: 22px; top: 24px; z-index: 1; }
.oferta-t .cab small { display: block; font-size: 15px; font-weight: 600; }
.oferta-t .cab b { display: block; margin-top: 8px; font-weight: 600; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.14; letter-spacing: -0.02em; }
.oferta-t .detalle { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 90px 66px 24px 22px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.88) 46%); font-weight: 600; font-size: 15px; line-height: 1.24; letter-spacing: -0.02em; transform: translateY(101%); transition: transform .5s var(--ease); }
.oferta-t .mas { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; background: rgba(245, 245, 247, 0.2); color: #F5F5F7; font-size: 26px; font-weight: 300; line-height: 1; cursor: pointer; transition: transform .45s var(--ease), background-color .32s var(--ease); }
.oferta-t:focus-within .detalle, .oferta-t.abierta .detalle { transform: translateY(0); }
.oferta-t:focus-within .mas, .oferta-t.abierta .mas { transform: rotate(45deg); background: rgba(245, 245, 247, 0.34); }
/* each card's drawing says what the service does; one SVG per card, sized with the card */
.oferta-t { background: #000000; box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.1); }
.vin { position: absolute; left: 8%; bottom: 15%; width: 84%; height: auto; overflow: visible; translate: calc(var(--d, 0) * -3%) 0; transition: scale 1.2s var(--ease); }
.vin text { font-family: var(--f); }
.vin .vt { fill: #F5F5F7; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.vin .vg { fill: #A1A1A6; font-size: 10px; font-weight: 500; }
.vin .vp { fill: #A1A1A6; font-size: 9px; font-weight: 500; }
.vin .vn { fill: var(--acento-oscuro); font-size: 10px; font-weight: 600; }
.vin .vc { fill: rgba(245, 245, 247, 0.07); stroke: rgba(245, 245, 247, 0.24); stroke-width: 1; }
.vin .vl { fill: none; stroke: rgba(245, 245, 247, 0.36); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.vin .vd { stroke-dasharray: 3 3; }
.vin .va { fill: var(--acento-oscuro); }
.vin .vas { stroke: var(--acento-oscuro); }
.vin .vb { fill: rgba(245, 245, 247, 0.2); }
.vin .tach { text-decoration: line-through; }
.vin .pq { animation: 2.6s linear infinite paused; }
.vin .pq-x { animation-name: pq-x; }
.vin .pq-y { animation-name: pq-y; }
.carril.vivo .vin .pq { animation-play-state: running; }
@keyframes pq-x { from { transform: translateX(0); } to { transform: translateX(30px); } }
@keyframes pq-y { from { transform: translateY(0); } to { transform: translateY(58px); } }
@media (hover: hover) {
  .oferta-t:hover .vin { scale: 1.04; }
  .escena-t:hover img, .oferta-t:hover img { transform: scale(1.05); }
  .oferta-t:hover .detalle { transform: translateY(0); }
  .oferta-t:hover .mas { transform: rotate(45deg); background: rgba(245, 245, 247, 0.34); }
  .paleta:not([disabled]):hover { background: color-mix(in srgb, var(--ink) 20%, transparent); transform: scale(1.08); }
}

/* ---------- 3. layers: a dark panel grows to full bleed, then scroll steps through the five ---------- */
/* ---------- method: one company's systems, put in order stage by stage ----------
   The drawing is one SVG. Its attribute data-paso (0 today, 1 to 4 the stages) decides what is on it; every change between two
   states is a CSS transition, so stepping through with the scroll, or pointing at a stage in the list, moves the same pieces. */
#s-metodo { position: relative; z-index: 1; background: var(--pagina); --q: 1; --c: 0; }
.capas-escena { background: var(--oscuro); color: var(--oscuro-ink); padding-block: clamp(56px, 9vh, 120px); }
.capas-dentro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 28px 56px; }
.capas-dentro .titulo { margin-top: 10px; max-width: 8em; font-size: clamp(2rem, min(3.6vw, 6vh), 3.25rem); }
.capas-lista { list-style: none; margin-top: clamp(16px, 3vh, 30px); border-bottom: 1px solid var(--oscuro-linea); position: relative; }
.capas-lista li { padding: 12px 0 12px 18px; border-top: 1px solid var(--oscuro-linea); opacity: .4; transition: opacity .4s var(--ease); }
.capas-lista li small { display: block; font-size: 13px; font-weight: 600; color: var(--acento-oscuro); }
.capas-lista li b { display: block; margin-top: 2px; font-weight: 600; font-size: clamp(1.1rem, min(1.7vw, 2.9vh), 1.5rem); line-height: 1.14; letter-spacing: -0.02em; }
.capas-lista li span { display: block; margin-top: 4px; color: var(--oscuro-gris); }
.capas-lista .riel { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--oscuro-linea); }
.capas-lista .riel::after { content: ""; position: absolute; inset: 0; background: var(--acento-oscuro); transform-origin: 50% 0; transform: scaleY(var(--s, 1)); }
.relevo { display: none; }
.capas-mapa { display: grid; place-items: center; }
.mapa-metodo { display: block; width: min(100%, calc((100vh - 200px) * 1.04)); height: auto; overflow: visible; --e: cubic-bezier(.4, 0, .2, 1); }
.mapa-metodo text { font-family: var(--f); }
.m-caja { fill: color-mix(in srgb, var(--oscuro-ink) 8%, var(--oscuro)); stroke: color-mix(in srgb, var(--oscuro-ink) 24%, transparent); stroke-width: 1; transition: stroke .5s var(--ease); }
.m-ficha { fill: var(--oscuro); stroke: color-mix(in srgb, var(--oscuro-ink) 24%, transparent); stroke-width: 1; }
.m-nombre { fill: var(--oscuro-ink); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.m-gris { fill: var(--oscuro-gris); font-size: 11.5px; font-weight: 500; }
.m-cifra { fill: var(--acento-oscuro); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.m-hoy, .m-una { font-size: 13.5px; font-weight: 600; transition: opacity .5s var(--ease), fill .5s var(--ease); }
.m-hoy { fill: var(--oscuro-gris); }
.m-una { fill: var(--oscuro-ink); opacity: 0; }
.m-acento, .m-ok { fill: var(--acento-oscuro); }
.ml { fill: none; stroke: color-mix(in srgb, var(--oscuro-ink) 34%, transparent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.md { stroke-dasharray: 4 4; }
.m-serie { stroke: var(--oscuro-ink); stroke-width: 1.7; }
.m-prev { stroke: var(--acento-oscuro); stroke-width: 1.7; }
.m-hueco { fill: none; stroke: color-mix(in srgb, var(--oscuro-ink) 40%, transparent); stroke-width: 1; stroke-dasharray: 2.5 2.5; }
/* where each piece is, and when it is there */
.m-nodo { transform: translate(var(--x), var(--y)); transition: transform .9s var(--e); transition-delay: calc(var(--i) * 70ms); }
.m-enredo, .m-canal, .m-dato, .m-estable, .m-arriba, .m-ok, .m-x3 { transition: opacity .55s var(--ease), transform .7s var(--e); }
.m-canal { transition-delay: .3s; }
.m-copia { transition: transform .7s var(--e), opacity .5s var(--ease); }
.m-copia.c1 { transform: translate(-6px, -6px); }
.m-copia.c2 { transform: translate(-12px, -12px); }
.mapa-metodo[data-paso="0"] .m-nodo { transform: translate(var(--hx), var(--hy)) rotate(var(--r)); }
.mapa-metodo:not([data-paso="0"]) .m-enredo { opacity: 0; }
.mapa-metodo[data-paso="0"] .m-canal { opacity: 0; transition-delay: 0s; }
.mapa-metodo:is([data-paso="0"], [data-paso="1"]) .m-dato { opacity: 0; transform: translateY(14px); }
.mapa-metodo:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .m-hoy { opacity: 0; }
.mapa-metodo:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) .m-una { opacity: 1; }
.mapa-metodo:is([data-paso="2"], [data-paso="3"], [data-paso="4"]) :is(.m-copia, .m-x3) { transform: none; opacity: 0; }
.mapa-metodo:is([data-paso="0"], [data-paso="1"], [data-paso="2"]) :is(.m-estable, .m-ok) { opacity: 0; }
.mapa-metodo:not([data-paso="4"]) .m-arriba { opacity: 0; transform: translateY(14px); }
/* what a stage brings is drawn in the accent while that stage is on */
.mapa-metodo[data-paso="1"] .m-canal .m-caja, .mapa-metodo[data-paso="2"] .m-dato .m-caja, .mapa-metodo[data-paso="4"] .m-arriba .m-caja { stroke: var(--acento-oscuro); }
.mapa-metodo[data-paso="2"] .m-una { fill: var(--acento-oscuro); }

.cifras b { transition: color .32s var(--ease); }

/* ---------- 5. data sheet and services; this sheet lifts to uncover the closing block ---------- */
#s-ficha { position: relative; z-index: 1; background: var(--pagina); padding-block: clamp(72px, 12vh, 150px); border-radius: 0 0 32px 32px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45); }
#s-ficha .titulo { margin: 10px 0 clamp(28px, 5vh, 56px); max-width: 12em; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px 24px; }
.cifras div { position: relative; padding-top: 16px; --e: clamp(0, calc(var(--v, 1) * 1.7 - var(--i, 0) * .22), 1); opacity: calc(var(--e) * var(--dim, 1)); transform: translateY(calc((1 - var(--e)) * 26px)); transition: translate .4s var(--ease), opacity .3s var(--ease); }
.cifras div::before, .cifras div::after { content: ""; position: absolute; left: 0; right: 0; transform-origin: 0 50%; }
.cifras div::before { top: 0; height: 1px; background: var(--linea); transform: scaleX(var(--e)); }
.cifras div::after { top: -1px; height: 2px; background: var(--acento); transform: scaleX(0); transition: transform .5s var(--ease); }
.sube-titulo { overflow: hidden; padding-bottom: .1em; opacity: 1 !important; transform: none !important; }
.sube-titulo span { display: block; transform: translateY(calc((1 - var(--v, 1)) * 108%)); }
.cifras b { display: block; font-weight: 700; font-size: clamp(3.2rem, 5.56vw, 5rem); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.cifras p { margin-top: 10px; color: var(--gris); }
[data-sube] { opacity: var(--v, 1); transform: translateY(calc((1 - var(--v, 1)) * 26px)); }

/* ---------- 6. closing block, waiting underneath ---------- */
#s-cierre { position: relative; z-index: 0; background: var(--oscuro); color: var(--oscuro-ink); padding-block: clamp(72px, 14vh, 150px) 28px; text-align: center; --r: 1; }
.cierre-dentro { display: grid; justify-items: center; opacity: calc(.25 + var(--r) * .75); transform: scale(calc(.94 + var(--r) * .06)); }
#s-cierre h2 { margin-top: 10px; max-width: 10em; font-weight: 700; font-size: clamp(2.5rem, min(6.67vw, 10vh), 6rem); line-height: 1.05; letter-spacing: -0.034em; }
#s-cierre .texto { margin-top: 14px; max-width: 27em; font-weight: 600; font-size: clamp(1.05rem, 1.46vw, 1.3125rem); line-height: 1.24; color: var(--oscuro-gris); }
#s-cierre .contacto { margin-top: 14px; font-family: var(--f-mono); font-size: 13px; color: var(--oscuro-gris); user-select: all; }
#s-cierre .nota { margin-top: clamp(48px, 10vh, 110px); font-size: 12px; line-height: 1.34; color: var(--oscuro-gris); max-width: 60em; }

/* ---------- contact: one button that travels with the page ----------
   It sits in the hero's layout at rest, floats as a pane of glass while the page moves, and settles into the closing block at the end.
   .muelle is a zero-size anchor at the bottom centre; --mx/--my carry it to a place in the layout, --t is how much it floats (0 in the layout, 1 floating). */
#paradas { position: absolute; left: 0; top: 0; width: 1px; height: 0; pointer-events: none; }
#paradas i { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; }
html.encaje { scroll-snap-type: y proximity; }
/* Touch (class "tactil", set by the script; see "Touch" in web/MOTOR.md). The browser's own scrolling always ends on a mark:
   i        a resting place: its top at the top of the screen
   i.paso   a step of a pinned stage: a swipe cannot fly over it, so one swipe is one step
   i.libre  as tall as a stretch of ordinary content taller than the screen: the page may rest anywhere inside it
   i.cabo   the end of that stretch, and i.fin the end of the page: their bottom at the bottom of the screen
   b        not a mark: a rule as tall as the screen with the browser's bars showing (100vh for its second one), which the script reads */
html.tactil { scroll-snap-type: y mandatory; }
html.tactil #paradas { height: 100%; }
#paradas i.paso { scroll-snap-stop: always; }
#paradas i.cabo, #paradas i.fin { scroll-snap-align: end; }
#paradas i.fin { bottom: 0; }
#paradas b { position: fixed; left: 0; top: 0; width: 0; height: 100vh; height: 100svh; visibility: hidden; }
#paradas b + b { height: 100vh; }
/* Touch: a pinned screen is as tall as the screen with the browser's bars away, and still lays its content out inside the screen with the bars
   showing (the difference is a border the background runs under). Otherwise, with the bars away, a strip of whatever is behind shows below it. */
html.tactil .mov [data-etapa] > .fijo { height: 100lvh !important; border-bottom: calc(100lvh - 100svh) solid transparent !important; }
html.tactil .mov .capas-escena { height: 100lvh; padding-bottom: calc(96px + 100lvh - 100svh); }
.muelle { position: fixed; z-index: 20; left: 50%; bottom: calc(44px + env(safe-area-inset-bottom, 0px)); width: 0; height: 0; --t: 1; --mx: 0px; --my: 0px; --lag: 0px; --paso: 0; --s-fondo: var(--boton); --s-ink: var(--boton-ink); --v-tinte: var(--pagina); --v-ink: var(--ink); transform: translate3d(var(--mx), calc(var(--my) + var(--lag)), 0); transition: opacity .32s var(--ease), visibility .32s; }
.muelle[data-sobre="oscuro"] { --v-tinte: #161617; --v-ink: #F5F5F7; }
.muelle.en-fin { --s-fondo: var(--oscuro-ink); --s-ink: var(--oscuro); }
.muelle.oculta { opacity: 0; visibility: hidden; }
.muelle-grupo { position: absolute; left: 0; top: 0; translate: -50% -50%; transform: translateX(calc(var(--t) * -28px)); }
.muelle-pildora { position: relative; display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 980px; font-size: 17px; line-height: 1; white-space: nowrap; text-decoration: none; color: color-mix(in srgb, var(--v-ink) calc(var(--t) * 100%), var(--s-ink)); transition: scale .32s var(--ease), color .4s var(--ease); }
.muelle-pildora b { position: relative; z-index: 1; font-weight: 400; }
.muelle .solido, .muelle .vidrio { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.muelle .solido { background: var(--s-fondo); opacity: calc(1 - var(--t)); }
/* the glass: what is behind shows through blurred and richer, a bright edge on top, a soft glow below, and a glint that crosses it while the page moves */
.muelle .vidrio { overflow: hidden; opacity: var(--t); background: color-mix(in srgb, var(--v-tinte) 54%, transparent); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1.5px 0 -0.5px rgba(255, 255, 255, 0.55), inset 0 -12px 14px -14px rgba(255, 255, 255, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 16px 36px -14px rgba(0, 0, 0, 0.42), 0 3px 8px -2px rgba(0, 0, 0, 0.14);
  transition: background-color .45s var(--ease); }
.muelle .vidrio::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 60%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0)); transform: translateX(calc(var(--paso) * 270%)); }
.muelle-mas { position: absolute; left: calc(100% + 8px); top: 0; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--v-ink); display: grid; place-items: center; cursor: pointer; opacity: var(--t); scale: var(--t); pointer-events: none; transition: color .4s var(--ease), rotate .45s var(--ease); }
.muelle.flota .muelle-mas { pointer-events: auto; }
.muelle-mas svg { position: relative; z-index: 1; width: 20px; height: 20px; }
.muelle-hoja { position: absolute; left: 0; bottom: 36px; translate: -50% 0; width: max-content; max-width: min(calc(100vw - 32px), 360px); padding: 8px; border-radius: 26px; color: var(--v-ink); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.95); transform-origin: 50% 100%; transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s, color .4s var(--ease); --t: 1; }
.muelle.abierta .muelle-hoja { opacity: 1; visibility: visible; transform: none; }
.muelle-hoja .vidrio { background: color-mix(in srgb, var(--v-tinte) 80%, transparent); }   /* a surface with text on it: denser than the button */
.muelle-hoja div { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 8px 8px 8px 16px; }
.muelle-hoja div + div { border-top: 1px solid color-mix(in srgb, var(--v-ink) 12%, transparent); }
.muelle-hoja small { display: block; font-size: 12px; line-height: 1.3; color: color-mix(in srgb, var(--v-ink) 62%, transparent); }
.muelle-hoja b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; -webkit-user-select: all; user-select: all; }
.muelle-hoja button { flex: none; min-width: 84px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 980px; background: color-mix(in srgb, var(--v-ink) 12%, transparent); color: inherit; font: inherit; font-size: 14px; cursor: pointer; transition: background-color .32s var(--ease); }
@media (hover: hover) {
  .muelle-pildora:hover { scale: 1.04; }
  .muelle-mas:hover { rotate: -8deg; }
  .muelle-hoja button:hover { background: color-mix(in srgb, var(--v-ink) 20%, transparent); }
}

/* ---------- motion on: sections become pinned stages ---------- */
/* the page's own contact buttons always stay visible; the glass button fades out where it coincides with one of them */
.mov .muelle { transition: none; }
.mov .barra { margin-bottom: -53px; }
.mov #s-hero { height: 730vh; --abre: 0; --cap: 0; --gira: 0; }
.mov .hero-escena { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; padding: clamp(76px, 11vh, 124px) 22px 0; transform-origin: 50% 62%; transform: scale(calc(1 - var(--c) * .075)); border-radius: calc(var(--c) * 32px); will-change: transform; }
.mov .velo { display: block; position: absolute; inset: 0; z-index: 3; background: var(--detras); opacity: calc(var(--c) * .45); pointer-events: none; }
/* the picture is laid out at its full size, a little beyond the screen so its round corners end up outside it, and is scaled down at rest:
   while it grows only transform changes, nothing is laid out or painted again */
.mov .hero-media { position: absolute; z-index: 2; left: -44px; right: -44px; top: 0; width: auto; height: calc(100% + 88px); margin: 0; aspect-ratio: auto; border-radius: calc(28px / var(--min, .66)); transform-origin: 50% 0; transform: translateY(calc((1 - var(--abre)) * var(--baja, 58vh) - var(--abre) * 44px)) scale(calc(var(--min, .66) + var(--abre) * (1 - var(--min, .66)))); will-change: transform; }
.mov .flujo-lienzo { position: absolute; inset: 0; box-sizing: border-box; padding: 112px calc(44px + max(22px, (100vw - 1180px) / 2)) calc(44px + clamp(170px, 27vh, 250px)); }
.mov .paso b { font-size: clamp(1.05rem, 1.55vw, 1.5rem); }
.mov .paso span { font-size: clamp(.8rem, 1.08vw, 1.0625rem); }
.mov .paso small, .mov .flujo-carriles li, .mov .flujo-titulo small { font-size: 14px; }
.mov .hero-media figcaption { position: absolute; z-index: 2; padding: 0; left: calc(44px + max(22px, (100vw - 1180px) / 2)); right: 66px; bottom: calc(44px + clamp(28px, 7vh, 72px)); }
.mov #s-porque { box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; margin-top: -100vh; margin-top: -100svh; border-radius: 32px 32px 0 0; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.5); clip-path: inset(-90px 0 0 0); }
.mov #s-metodo { height: 440vh; --q: 0; }
.mov .relevo { display: block; position: absolute; left: 0; right: 0; bottom: 6vh; color: var(--ink); --a: clamp(0, calc((var(--c) - .5) * 2.6), 1); opacity: var(--a); transform: translateY(calc((1 - var(--a)) * 26px)); pointer-events: none; }
.mov .relevo .titulo { margin-top: 10px; max-width: 12em; }
.mov #s-oferta { padding-top: 0; padding-bottom: max(12vh, 80px); }
.mov #s-oferta .estatico { display: none; }
.mov .capas-escena { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; display: grid; align-items: center; padding-block: 64px 96px; overflow: hidden; transform-origin: 50% 100%; transform: scale(calc(.9 + var(--q) * .1)); border-radius: calc((1 - var(--q)) * 44px) calc((1 - var(--q)) * 44px) 0 0; will-change: transform; }
.mov .fundido { display: block; position: absolute; inset: 0; background: var(--alt); opacity: var(--c); pointer-events: none; }
.mov .capas-dentro { opacity: calc(1 - var(--c) * 2.3); }
.mov .capas-lista li span { max-height: 0; overflow: hidden; margin-top: 0; opacity: 0; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease); }
.mov .capas-lista li.activa { opacity: 1; }
.mov .capas-lista li.activa span { max-height: 3.2em; margin-top: 4px; opacity: 1; }
@media (hover: hover) {
  .capas-lista li { cursor: default; }
  .mov .capas-lista:has(li:hover) li:not(:hover) { opacity: .4; }
  .mov .capas-lista:has(li:hover) li:not(:hover) span { max-height: 0; margin-top: 0; opacity: 0; }
  .mov .capas-lista li:hover { opacity: 1; }
  .mov .capas-lista li:hover span { max-height: 3.2em; margin-top: 4px; opacity: 1; }
}
.mov #s-ficha { box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.mov #s-cierre { position: sticky; bottom: 0; }

@media (max-width: 820px) {
  /* phones: the same process, top to bottom */
  .flujo-carriles { display: none; }
  .flujo-pasos { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; }
  .paso { grid-column: 1; grid-row: auto; margin: 0; padding: 11px 14px; display: flex; align-items: baseline; gap: 12px; border-radius: 14px; }
  .paso small { flex: none; min-width: 10.6em; }
  .paso b, .mov .paso b { margin: 0; font-size: 1.0625rem; }
  .paso span { display: none; }
  .mov .flujo-lienzo { padding: 104px 66px calc(44px + 250px); }
  #s-hoy { --escena: 84vw; }
  /* a screen of its own on a phone: shorter than the screen, the next section's title showed under it at rest */
  .mov #s-pantallas { box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
  .mov .hero-media figcaption { left: 66px; bottom: calc(44px + 96px); }
  .escena-t { aspect-ratio: 4 / 5; }
  .capas-dentro { grid-template-columns: minmax(0, 1fr); }
  .capas-mapa { order: -1; }
  .mapa-metodo { width: min(100%, 42vh); }
  .m-gris { font-size: 12.5px; }
  .mov .capas-lista li:not(.activa) { display: none; }
  .mov .capas-lista .riel { display: none; }
  .mov .capas-lista li { padding-left: 0; }
  .barra nav a.sec { display: none; }
}
@media (max-height: 640px) { .avales { display: none; } }

/* ---------- links between the home page and the service pages ---------- */
.oferta-t .detalle a { display: block; margin-top: 10px; color: var(--acento-oscuro); text-decoration: none; }
.oferta-t .detalle a:hover { text-decoration: underline; }
.enlaces { margin-top: clamp(28px, 5vh, 48px); max-width: 46em; font-size: 14px; line-height: 2; color: var(--oscuro-gris); }
.enlaces a { color: var(--oscuro-ink); text-decoration: none; white-space: nowrap; }
.enlaces a:hover { text-decoration: underline; }
#s-cierre .enlaces + .nota, .serv-cierre .enlaces + .nota { margin-top: 18px; }

/* ---------- service pages: one question, answered on one page, with the drawing that shows it ---------- */
.muelle.solo .muelle-grupo { transform: none; }
.serv-hero { background: var(--hero); color: var(--hero-ink); padding-block: clamp(96px, 15vh, 150px) clamp(48px, 9vh, 96px); }
.serv-hero .dentro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 36px 56px; }
.serv-hero h1 { margin-top: 10px; font-weight: 700; font-size: clamp(2.2rem, min(4.5vw, 7.4vh), 3.9rem); line-height: 1.05; letter-spacing: -0.032em; text-wrap: balance; }
.serv-hero .sub { margin-top: 16px; max-width: 27em; font-weight: 600; font-size: clamp(1.1rem, 1.55vw, 1.375rem); line-height: 1.24; color: var(--hero-gris); }
.serv-hero .acciones { justify-content: flex-start; margin-top: 24px; }
.serv-dibujo { position: relative; justify-self: end; width: 100%; max-width: 440px; margin: 0; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 28px; background-color: #000000; background-image: radial-gradient(circle, rgba(245, 245, 247, 0.1) 1px, transparent 1.6px); background-size: 28px 28px; }
.serv-dibujo .vin { position: static; width: 78%; translate: none; }
.serv-bloque { background: var(--pagina); padding-block: clamp(56px, 9vh, 104px); }
.serv-bloque.alt { background: var(--alt); }
.serv-bloque .titulo { margin-top: 10px; max-width: 14em; font-size: clamp(1.8rem, min(3.2vw, 6vh), 2.75rem); }
.serv-lista { list-style: none; margin: clamp(22px, 4vh, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 32px; counter-reset: paso; }
.serv-lista li { padding: 18px 0 20px; border-top: 1px solid var(--linea); font-weight: 600; font-size: 19px; line-height: 1.26; letter-spacing: -0.014em; }
ol.serv-lista li { counter-increment: paso; }
ol.serv-lista li::before { content: "Paso " counter(paso); display: block; margin-bottom: 8px; font-size: 14px; color: var(--acento); }
.serv-lista li span { display: block; margin-top: 8px; font-weight: 400; font-size: 17px; line-height: 1.4; letter-spacing: -0.012em; color: var(--gris); }
.serv-bloque.alt .serv-lista li span, .serv-preguntas p { color: #6E6E73; }
.serv-preguntas { margin-top: clamp(22px, 4vh, 40px); border-bottom: 1px solid var(--linea); }
.serv-preguntas details { border-top: 1px solid var(--linea); }
.serv-preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 16px 0; font-weight: 600; font-size: 19px; line-height: 1.26; letter-spacing: -0.014em; cursor: pointer; list-style: none; }
.serv-preguntas summary::-webkit-details-marker { display: none; }
.serv-preguntas summary::after { content: "+"; flex: none; font-weight: 300; font-size: 28px; line-height: 1; transition: rotate .32s var(--ease); }
.serv-preguntas details[open] summary::after { rotate: 45deg; }
.serv-preguntas p { max-width: 40em; padding: 0 0 22px; }
.serv-cierre { display: grid; justify-items: center; background: var(--oscuro); color: var(--oscuro-ink); padding-block: clamp(72px, 13vh, 140px) clamp(110px, 17vh, 150px); text-align: center; }
.serv-cierre h2 { margin-top: 10px; max-width: 10em; font-weight: 700; font-size: clamp(2.5rem, min(6vw, 9vh), 5rem); line-height: 1.05; letter-spacing: -0.034em; }
.serv-cierre .texto { margin-top: 14px; max-width: 27em; font-weight: 600; font-size: clamp(1.05rem, 1.46vw, 1.3125rem); line-height: 1.24; color: var(--oscuro-gris); }
.serv-cierre .contacto { margin-top: 14px; font-family: var(--f-mono); font-size: 13px; color: var(--oscuro-gris); user-select: all; }
.serv-cierre .nota { font-size: 12px; line-height: 1.34; color: var(--oscuro-gris); max-width: 60em; }
@media (max-width: 820px) {
  .serv-hero .dentro { grid-template-columns: minmax(0, 1fr); }
  .serv-dibujo { justify-self: start; max-width: 380px; }
}

/* ---------- sector pages: the sector's own process, told step by step beside a drawing that changes with it ----------
   The drawing (.esq) is one SVG with five states, data-paso 0 to 4. A piece carries data-desde (on the drawing from that step),
   data-hasta (until that step) and data-en (the steps where it is drawn in the accent). */
.esq { display: block; width: 100%; height: 100%; overflow: visible; }
.esq text { font-family: var(--f); }
.esq .m-chico { font-size: 12.5px; }
.esq .m-claro { fill: var(--oscuro-ink); }
.esq .m-barra { fill: color-mix(in srgb, var(--oscuro-ink) 22%, transparent); }
.esq .m-visto, .esq .m-vuelta { stroke: var(--acento-oscuro); stroke-width: 1.8; }
.esq .m-dia { fill: color-mix(in srgb, var(--oscuro-ink) 12%, transparent); stroke: none; }
.esq .m-dia.m-vac { fill: none; stroke: var(--acento-oscuro); stroke-width: 1.3; }
.esq .m-dia.m-baja { fill: none; stroke: color-mix(in srgb, var(--oscuro-ink) 55%, transparent); stroke-width: 1.2; stroke-dasharray: 3 2.5; }
.esq .m-dia.m-extra { fill: color-mix(in srgb, var(--oscuro-ink) 48%, transparent); }
.esq [data-desde], .esq [data-hasta] { transition: opacity .55s var(--ease), transform .7s cubic-bezier(.4, 0, .2, 1); }
.esq[data-paso="0"] :is([data-desde="1"], [data-desde="2"], [data-desde="3"], [data-desde="4"]),
.esq[data-paso="1"] :is([data-desde="2"], [data-desde="3"], [data-desde="4"]),
.esq[data-paso="2"] :is([data-desde="3"], [data-desde="4"]),
.esq[data-paso="3"] [data-desde="4"],
.esq[data-paso="1"] [data-hasta="0"],
.esq[data-paso="2"] :is([data-hasta="0"], [data-hasta="1"]),
.esq[data-paso="3"] :is([data-hasta="0"], [data-hasta="1"], [data-hasta="2"]),
.esq[data-paso="4"] :is([data-hasta="0"], [data-hasta="1"], [data-hasta="2"], [data-hasta="3"]) { opacity: 0; }
.esq[data-paso="0"] g:is([data-desde="1"], [data-desde="2"], [data-desde="3"], [data-desde="4"]),
.esq[data-paso="1"] g:is([data-desde="2"], [data-desde="3"], [data-desde="4"]),
.esq[data-paso="2"] g:is([data-desde="3"], [data-desde="4"]),
.esq[data-paso="3"] g[data-desde="4"] { transform: translateY(12px); }
.esq[data-paso="0"] [data-en~="0"]:is(.ml, .m-ficha), .esq[data-paso="0"] [data-en~="0"] :is(.m-caja, .m-ficha),
.esq[data-paso="1"] [data-en~="1"]:is(.ml, .m-ficha), .esq[data-paso="1"] [data-en~="1"] :is(.m-caja, .m-ficha),
.esq[data-paso="2"] [data-en~="2"]:is(.ml, .m-ficha), .esq[data-paso="2"] [data-en~="2"] :is(.m-caja, .m-ficha),
.esq[data-paso="3"] [data-en~="3"]:is(.ml, .m-ficha), .esq[data-paso="3"] [data-en~="3"] :is(.m-caja, .m-ficha),
.esq[data-paso="4"] [data-en~="4"]:is(.ml, .m-ficha), .esq[data-paso="4"] [data-en~="4"] :is(.m-caja, .m-ficha) { stroke: var(--acento-oscuro); }
.esq .ml, .esq .m-ficha { transition: stroke .5s var(--ease), opacity .55s var(--ease); }
@media (prefers-reduced-motion: reduce) { .esq * { transition: none !important; } }

.sec-hero h1 { max-width: 14em; }
.sec-hero .avales { margin-top: 18px; max-width: 44em; }
.sec-proceso { background: var(--oscuro); color: var(--oscuro-ink); padding-block: clamp(64px, 11vh, 120px) clamp(24px, 6vh, 64px); }
.sec-proceso .titulo { margin-top: 10px; max-width: 15em; font-size: clamp(1.9rem, min(3.4vw, 6vh), 3rem); }
.sec-cuerpo { display: grid; grid-template-columns: minmax(0, .64fr) minmax(0, 1.36fr); gap: 0 56px; }
.sec-pasos { list-style: none; margin: 0; padding: 0; }
.sec-paso { display: grid; align-content: center; min-height: 76vh; transition: opacity .4s var(--ease); }
.sec-proceso.vivo .sec-paso:not(.activa) { opacity: .32; }
.sec-paso small { font-size: 14px; font-weight: 600; color: var(--acento-oscuro); }
.sec-paso h3 { margin-top: 6px; font-weight: 600; font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.sec-paso p { margin-top: 10px; max-width: 23em; line-height: 1.42; color: var(--oscuro-gris); }
/* the drawing may run past the text column on the right, so it is as large as the screen allows */
.sec-lienzo { position: sticky; top: calc(52px + (100vh - 52px - min(76vh, 620px)) / 2); align-self: start; height: min(76vh, 620px); margin: 0 calc(-1 * clamp(0px, (100vw - 1024px) / 2, 130px)) 0 0; }
.serv-lista li a { color: inherit; text-decoration: none; }
.serv-lista li a:hover { color: var(--acento); }
.ficha-sectores { margin-top: clamp(28px, 5vh, 52px); font-size: 14px; line-height: 2; color: var(--gris); }
.ficha-sectores a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.ficha-sectores a:hover { text-decoration: underline; }
@media (max-width: 820px) {
  .sec-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .sec-lienzo { order: -1; top: 52px; z-index: 2; height: 44vh; margin: 0; padding-block: 14px 10px; background: var(--oscuro); box-shadow: 0 16px 16px -8px var(--oscuro); }
  .sec-paso { align-content: start; min-height: 48vh; padding-top: 5vh; }
}

/* ---------- inner pages written by hand on motor.js (see web/MOTOR.md) ----------
   A pinned stage is a tall section with one .fijo child that holds the screen while the page scrolls through its steps. */
.mov [data-etapa] { position: relative; height: calc(100vh + var(--largo, 56vh) * var(--n, 1)); }
.mov [data-etapa] > .fijo { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; overflow: hidden; }

/* inner pages: the page's own contact buttons stay visible; the glass button fades out where it coincides with one of them */
.mov.interior .hueco { visibility: visible; }
.interior .muelle { transition: none; }