/* AXELIA · /integracion-erp-crm/ — «El pedido que viaja».
   Everything that moves is written under .mov (motion on). Without it the page reads complete: the order has arrived at the bank, the counter says 1,
   the five steps are listed under the drawing, both rows of the week are filled in. */

/* ---------- 1. hero: the headline, and two systems facing each other with an order about to cross ---------- */
#ic-hero { position: relative; z-index: 1; box-sizing: border-box; background: var(--hero); color: var(--hero-ink); padding: clamp(92px, 12vh, 118px) max(22px, calc((100% - 1240px) / 2)) clamp(36px, 6vh, 64px); overflow: hidden; }
.mov #ic-hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.ic-ceja { margin-bottom: 10px; font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.19; letter-spacing: .011em; color: var(--hero-gris); }
.ic-hero h1 { font-weight: 700; font-size: clamp(2.5rem, min(5.3vw, 8.8vh), 5rem); line-height: 1.03; letter-spacing: -.036em; text-wrap: balance; }
.ic-hero-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px 40px; margin-top: 16px; }
.ic-sub { max-width: 31em; font-weight: 600; font-size: clamp(1.1rem, min(1.55vw, 2.7vh), 1.45rem); line-height: 1.22; letter-spacing: -.008em; color: var(--hero-gris); text-wrap: balance; }
.ic-sub b { font-weight: 600; color: var(--hero-ink); }
.ic-hero .acciones { flex: none; justify-content: flex-end; margin-top: 0; }

.ic-escena { --alto: clamp(300px, calc(100vh - 410px), 480px); --alto: clamp(300px, calc(100svh - 410px), 480px); --hueco: clamp(110px, 15vw, 200px); --y: max(calc(var(--alto) * .6), 226px);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--hueco) minmax(0, 1.18fr); height: var(--alto); margin-top: clamp(22px, 4vh, 40px); }
.ic-lado { position: relative; min-width: 0; }
.ic-ven { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 34px 64px -28px rgba(0, 0, 0, 0.34), 0 10px 22px -10px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.ic-barra { flex: none; display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-bottom: 1px solid #E5E5EA; }
.ic-barra i { width: 10px; height: 10px; border-radius: 50%; background: #D2D2D7; }
.ic-barra i.a { background: var(--acento); }
.ic-barra b { margin-left: 8px; font-weight: 600; font-size: 14px; letter-spacing: .01em; }
.ic-barra span { margin-left: auto; font-size: 12.5px; color: var(--gris); }
.ic-cuerpo { position: relative; flex: 1; min-height: 0; }

.ic-crm-c { padding: 18px; }
.ic-embudo { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; gap: 6px; }
.ic-embudo li { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: var(--w); height: 38px; padding: 0 24px; background: var(--alt); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 10px 100%); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6E6E73; }
.ic-embudo li b { font-family: var(--f-mono); font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--ink); }
.ic-embudo li.g { background: color-mix(in srgb, var(--acento) 13%, #FFFFFF); color: var(--acento); }
.ic-embudo li.g b { color: var(--acento); }
.ic-ranura { position: absolute; left: 18px; right: 18px; top: calc(var(--y) - 92px); height: 100px; box-sizing: border-box; padding: 18px 20px; border: 1.5px dashed #C7C7CC; border-radius: 18px; }
.ic-skel { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 7px 12px; width: min(48%, 190px); }
.ic-skel i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: #E5E5EA; }
.ic-skel em { display: block; height: 7px; border-radius: 4px; background: #E5E5EA; align-self: end; }
.ic-skel em + em { width: 62%; align-self: start; background: #EDEDF0; }
.ic-contactos { position: absolute; left: 18px; right: 18px; bottom: 16px; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ic-contactos li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 50px; align-items: center; gap: 12px; }
.ic-contactos i { width: 24px; height: 24px; border-radius: 50%; background: #E5E5EA; }
.ic-contactos span { display: block; height: 7px; border-radius: 4px; background: #E5E5EA; }
.ic-contactos em { display: block; height: 7px; border-radius: 4px; background: #EDEDF0; }
.ic-contactos li:nth-child(2) span { width: 72%; }

/* the order card: lifted out of the CRM, a little crooked, sliding toward the gap as the page leaves (--a, from data-avance) and drifting and turning a little toward the pointer (--px, --py, from the page script); flat 2D only */
.ic-pedido { position: absolute; z-index: 3; top: var(--y); right: -34px; width: min(262px, 64%); }
.ic-pedido-in { box-sizing: border-box; padding: 16px 20px 14px; border-radius: 20px; background: #FFFFFF;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.03), 0 44px 64px -24px rgba(0, 0, 0, 0.46), 0 16px 28px -12px rgba(0, 0, 0, 0.22), inset 0 0 0 1.5px var(--acento);
  transform: translate(calc((var(--a, .5) - .5) * 240px + var(--px, 0) * 9px), calc(-50% + var(--py, 0) * 6px)) rotate(calc(-2.6deg + (var(--a, .5) - .5) * -9deg + var(--px, 0) * 1.4deg)); }
.ic-ped-k { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gris); }
.ic-ped-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
.ic-ped-n { margin-top: 8px; font-weight: 700; font-size: 1.8rem; line-height: 1; letter-spacing: -.035em; }
.ic-ped-i { display: none; }
.ic-pedido dl { margin: 12px 0 0; }
.ic-pedido dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0 0; margin-top: 7px; border-top: 1px solid #E5E5EA; }
.ic-pedido dt { font-size: 13px; color: var(--gris); }
.ic-pedido dd { margin: 0; font-family: var(--f-mono); font-weight: 500; font-size: 13.5px; }

/* the gap, with the connection that does not cross yet */
.ic-pasarela { position: relative; grid-column: 2; align-self: start; margin-top: var(--y); transform: translateY(-50%); display: flex; align-items: center; height: 26px; }
.ic-pasarela i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 2px #AEAEB2; }
.ic-pasarela span { flex: 1; align-self: center; border-top: 2px dashed #AEAEB2; }
.ic-pasarela b { flex: none; display: grid; place-items: center; height: 26px; padding: 0 14px; border-radius: 13px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #AEAEB2; font-weight: 600; font-size: 12.5px; color: #6E6E73; }
.ic-pasarela small { position: absolute; left: 50%; top: 34px; translate: -50% 0; font-family: var(--f-mono); font-size: 11.5px; color: var(--gris); }

.ic-erp-c { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 18px; padding: 16px 18px; }
.ic-menu { display: grid; align-content: start; gap: 2px; }
.ic-menu span { display: block; padding: 8px 10px; border-radius: 9px; font-size: 13px; color: #6E6E73; }
.ic-menu .on { background: var(--alt); color: var(--ink); font-weight: 600; }
.ic-tabla { position: relative; min-width: 0; }
.ic-tabla-t { margin-bottom: 10px; font-weight: 600; font-size: 15px; line-height: 1.2; }
.ic-th, .ic-tr { display: grid; grid-template-columns: 56px minmax(0, 1.2fr) 62px 78px; align-items: center; gap: 10px; }
.ic-th { height: 28px; border-bottom: 1px solid var(--linea); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.ic-tr { height: 40px; border-bottom: 1px solid #EDEDF0; font-size: 13px; color: #6E6E73; white-space: nowrap; }
.ic-tr b { font-family: var(--f-mono); font-weight: 500; color: var(--ink); }
.ic-tr span { overflow: hidden; text-overflow: ellipsis; }
.ic-tr em { justify-self: start; padding: 3px 9px; border-radius: 10px; background: var(--alt); font-style: normal; font-size: 11.5px; }
.ic-kpis { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ic-kpis span { padding: 10px 14px 11px; border-radius: 14px; background: var(--alt); }
.ic-kpis small { display: block; font-size: 12px; line-height: 1.2; color: var(--gris); }
.ic-kpis b { display: block; margin-top: 3px; font-family: var(--f-mono); font-weight: 500; font-size: 1.35rem; line-height: 1.1; }
.ic-tr-nuevo { position: absolute; left: -8px; right: -8px; top: calc(var(--y) - 78px); box-sizing: border-box; grid-template-columns: 56px minmax(0, 1fr); padding: 0 8px; border: 1.5px dashed var(--acento); border-radius: 12px; background: color-mix(in srgb, var(--acento) 6%, #FFFFFF); }
.ic-tr-nuevo b { color: var(--acento); }
.ic-tr-nuevo span { color: #6E6E73; }

/* ---------- 2. the journey: a black stage; the order card moves along one row of four systems ---------- */
#ic-viaje { z-index: 1; background: var(--hero); }
#ic-viaje .fijo { display: flex; flex-direction: column; 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: clamp(84px, 11vh, 120px) max(22px, calc((100% - 1392px) / 2)) clamp(56px, 9vh, 96px); }
.ic-tit { order: 1; }
.ic-cont { order: 2; margin-top: 18px; }
.ic-lienzo { order: 3; position: relative; margin-top: clamp(20px, 4vh, 40px); }
.ic-pasos { order: 4; }
.ic-eti { font-weight: 600; font-size: 17px; line-height: 1.19; color: var(--acento-oscuro); }
.ic-tit h2 { margin-top: 6px; max-width: 14em; font-weight: 700; font-size: clamp(1.8rem, min(2.8vw, 4.7vh), 2.6rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.ic-cont-t { font-size: 15px; font-weight: 600; color: var(--oscuro-gris); }
.ic-cont-n { font-weight: 700; font-size: 4.5rem; line-height: 1; letter-spacing: -.06em; color: var(--acento-oscuro); }
.ic-cont-n i { font-style: normal; }
.ic-cont-n i:not(:last-child) { display: none; }
.ic-cont-f { display: flex; gap: 8px; margin-top: 8px; }
.ic-cont-f span { width: 12px; height: 12px; border-radius: 50%; background: var(--acento-oscuro); box-sizing: border-box; transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.ic-cont-f .b, .ic-cont-f .c { background: transparent; box-shadow: inset 0 0 0 1.5px var(--oscuro-gris); }
.ic-cont-s { margin-top: 8px; font-size: 14px; color: var(--oscuro-gris); }

/* the drawing: one SVG, every piece in one of a few states */
.ic-ventana { display: block; }
.ic-svg { display: block; width: 100%; height: auto; overflow: visible; --ac: color-mix(in srgb, var(--oscuro-ink) 55%, transparent); --ink-l: color-mix(in srgb, var(--oscuro-ink) 40%, transparent); --ink-f: color-mix(in srgb, var(--oscuro-ink) 30%, transparent); --ink-p: color-mix(in srgb, var(--oscuro-ink) 26%, transparent); }
.ic-svg .ln { fill: none; stroke: var(--ink-l); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ic-svg .dash { stroke-dasharray: 4 4; }
.ic-svg .ac-s { fill: none; stroke: var(--ac); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic-svg .ac-f { fill: var(--ac); }
.ic-svg .ac-t { fill: var(--ac); }
.ic-svg .fl { fill: color-mix(in srgb, var(--oscuro-ink) 5%, var(--oscuro)); stroke: var(--ink-f); stroke-width: 1.3; stroke-linejoin: round; }
.ic-svg .fl.ac-s { stroke: var(--ac); stroke-width: 1.6; }
.ic-svg .pn { fill: color-mix(in srgb, var(--oscuro-ink) 8%, var(--oscuro)); stroke: var(--ink-p); stroke-width: 1.2; }
.ic-svg .bl { fill: color-mix(in srgb, var(--oscuro-ink) 20%, transparent); }
.ic-svg .bl-c { fill: color-mix(in srgb, var(--oscuro-ink) 30%, transparent); }
.ic-svg .pd { fill: var(--ac); }
.ic-svg .tx { fill: var(--oscuro-ink); font-weight: 600; letter-spacing: -.01em; }
.ic-svg .tg { fill: var(--oscuro-gris); font-weight: 500; }
.ic-svg .cp { fill: var(--oscuro-gris); font-size: 12.5px; font-weight: 600; letter-spacing: .09em; }
.ic-svg .tm { font-family: var(--f-mono); fill: var(--oscuro-ink); font-weight: 500; }
.ic-svg .tm.tg { fill: var(--oscuro-gris); }
.ic-svg .tb { font-weight: 600; }
.ic-svg .slot { stroke: color-mix(in srgb, var(--oscuro-ink) 34%, transparent); stroke-width: 1.3; }
.ic-svg .nombre { fill: var(--oscuro-ink); font-weight: 600; letter-spacing: -.01em; }
/* the connections that cross between systems: dashed and grey until they are live, then orange with a small dot travelling along them */
.ic-svg .api-b { stroke: color-mix(in srgb, var(--oscuro-ink) 34%, transparent); stroke-width: 1.5; }
.ic-svg .api-q { fill: var(--oscuro); stroke: color-mix(in srgb, var(--oscuro-ink) 42%, transparent); stroke-width: 1.5; }
.ic-svg .api-pill { fill: var(--oscuro); stroke: color-mix(in srgb, var(--oscuro-ink) 36%, transparent); stroke-width: 1.3; }
.ic-svg .api-t { fill: var(--oscuro-gris); font-weight: 600; letter-spacing: .04em; }
.ic-svg .api-v { fill: none; stroke: var(--acento-oscuro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-svg .api-p { fill: var(--acento-oscuro); }
.ic-svg .api-pill-v { fill: var(--oscuro); stroke: var(--acento-oscuro); stroke-width: 1.6; }
.ic-svg .api-t-v { fill: var(--acento-oscuro); font-weight: 600; letter-spacing: .04em; }
.ic-svg .paq { fill: var(--acento-oscuro); opacity: 0; }
/* how many times the order is typed: a pill above each system */
.ic-svg .tp-r { fill: var(--oscuro); stroke: color-mix(in srgb, var(--oscuro-ink) 30%, transparent); stroke-width: 1.2; }
.ic-svg .tp-t { fill: var(--oscuro-gris); font-size: 13px; font-weight: 600; letter-spacing: -.005em; }
.ic-svg .tp-k { color: var(--oscuro-gris); }
.ic-svg .tp-k rect, .ic-svg .tp-k path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ic-svg .tp.on .tp-r { stroke: var(--acento-oscuro); }
.ic-svg .tp.on .tp-t { fill: var(--acento-oscuro); }
.ic-svg .tp.on .tp-k { color: var(--acento-oscuro); }
/* the order */
.ic-svg .token { transform: translateX(1390px); }
.ic-svg .token-caja { fill: var(--oscuro); stroke: var(--acento-oscuro); stroke-width: 1.8; }
.ic-svg .token .cp { fill: var(--acento-oscuro); }

/* which system is lit, by step: the others recede, the lit one brightens */
.ic-svg .sis { transition: opacity .5s var(--ease); }
.ic-svg .ent { transition: translate .7s cubic-bezier(.4, 0, .2, 1), opacity .55s var(--ease); }
.ic-svg [data-d], .ic-svg [data-h] { transition: opacity .5s var(--ease), translate .7s cubic-bezier(.4, 0, .2, 1); }
#ic-viaje[data-paso="0"] .sis:not([data-k="0"]), #ic-viaje[data-paso="2"] .sis:is([data-k="0"], [data-k="3"], [data-k="4"]), #ic-viaje[data-paso="1"] .sis:is([data-k="3"], [data-k="4"]), #ic-viaje[data-paso="3"] .sis:is([data-k="0"], [data-k="4"]) { opacity: .42; }
#ic-viaje[data-paso="1"] .sis[data-k="0"], #ic-viaje[data-paso="3"] .sis[data-k="1"] { opacity: .66; }
#ic-viaje[data-paso="4"] .sis[data-k="0"] { opacity: .6; }
#ic-viaje[data-paso="4"] .sis:is([data-k="1"], [data-k="3"]) { opacity: .85; }
#ic-viaje[data-paso="0"] .sis[data-k="0"], #ic-viaje[data-paso="1"] .sis[data-k="1"], #ic-viaje[data-paso="2"] .sis[data-k="1"], #ic-viaje[data-paso="3"] .sis[data-k="3"], #ic-viaje[data-paso="4"] .sis:is([data-k="1"], [data-k="3"], [data-k="4"]),
#ic-viaje[data-paso="1"] .sis[data-k="0"], #ic-viaje[data-paso="3"] .sis[data-k="1"] { --ac: var(--acento-oscuro); --ink-l: color-mix(in srgb, var(--oscuro-ink) 74%, transparent); --ink-f: color-mix(in srgb, var(--oscuro-ink) 52%, transparent); --ink-p: color-mix(in srgb, var(--oscuro-ink) 52%, transparent); }
/* a piece that exists from a given step on (data-d), one that stops existing from a given step on (data-h) */
#ic-viaje[data-paso="0"] :is([data-d="1"], [data-d="2"], [data-d="3"], [data-d="4"]),
#ic-viaje[data-paso="1"] :is([data-d="2"], [data-d="3"], [data-d="4"]),
#ic-viaje[data-paso="2"] :is([data-d="3"], [data-d="4"]),
#ic-viaje[data-paso="3"] [data-d="4"],
#ic-viaje[data-paso="1"] [data-h="1"],
#ic-viaje[data-paso="2"] :is([data-h="1"], [data-h="2"]),
#ic-viaje[data-paso="3"] :is([data-h="1"], [data-h="2"], [data-h="3"]),
#ic-viaje[data-paso="4"] :is([data-h="1"], [data-h="2"], [data-h="3"], [data-h="4"]) { opacity: 0; }
#ic-viaje[data-paso="0"] .ent[data-d], #ic-viaje[data-paso="1"] .ent:is([data-d="2"], [data-d="3"], [data-d="4"]), #ic-viaje[data-paso="2"] .ent:is([data-d="3"], [data-d="4"]), #ic-viaje[data-paso="3"] .ent[data-d="4"] { translate: 0 10px; }

/* the step texts: all five listed without motion */
.ic-pasos { list-style: none; margin: clamp(28px, 5vh, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; }
.ic-pt { padding-top: 16px; border-top: 1px solid var(--oscuro-linea); }
.ic-pt small { display: block; font-size: 14px; font-weight: 600; color: var(--acento-oscuro); }
.ic-pt h3 { margin-top: 6px; font-weight: 700; font-size: 1.3rem; line-height: 1.12; letter-spacing: -.02em; }
.ic-pt p { margin-top: 8px; font-size: 15px; line-height: 1.35; color: var(--oscuro-gris); }
.ic-pt .ic-reg-t { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.4; color: color-mix(in srgb, var(--oscuro-ink) 70%, transparent); }
.ic-pt .ic-reg-t span { display: block; margin-bottom: 2px; color: var(--oscuro-gris); }

/* ---------- 3. «Antes y después»: the same week, twice ---------- */
#ic-semana { z-index: 2; }
#ic-semana .fijo { background: var(--pagina); color: var(--ink); padding: clamp(84px, 11.5vh, 112px) max(22px, calc((100% - 1240px) / 2)) clamp(64px, 9vh, 104px); }
.ic-sem-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 56px; margin-bottom: clamp(18px, 3.4vh, 34px); }
.ic-sem-cab .titulo { margin-top: 8px; max-width: 11em; font-size: clamp(2rem, min(3.7vw, 6.2vh), 3.4rem); }
.ic-sem-nota { max-width: 27em; font-size: 15.5px; line-height: 1.38; color: #6E6E73; }
.ic-sem-nota p + p { margin-top: 8px; }
.ic-sem { display: grid; grid-template-columns: minmax(118px, 150px) repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; grid-auto-flow: column; gap: 10px; }
.ic-fila { align-self: center; padding-right: 8px; }
.ic-fila b { display: block; font-weight: 700; font-size: 1.2rem; line-height: 1.1; letter-spacing: -.02em; }
.ic-fila span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.2; color: #6E6E73; }
.ic-fila span i { display: block; margin-bottom: 2px; font-style: normal; font-weight: 700; font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: -.05em; color: var(--ink); }
.ic-fila-con span i { color: var(--acento); }
.ic-dia { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; padding: 0 6px; font-weight: 600; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; }
.ic-dia small { font-weight: 500; font-size: 13px; color: var(--gris); }
.ic-dia .d2 { display: none; }
.ic-c { position: relative; display: grid; align-content: space-between; gap: 14px; box-sizing: border-box; min-height: clamp(150px, 25vh, 218px); padding: 16px; border-radius: 20px; }
.ic-sin { background: var(--alt); }
.ic-con { color: var(--oscuro-ink); isolation: isolate; }
.ic-con::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--oscuro); }
.ic-con::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px dashed #C7C7CC; opacity: 0; pointer-events: none; }
.ic-ped { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-height: 64px; }
.ic-ped li { display: flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; width: 54px; height: 28px; border-radius: 9px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--linea); }
.ic-ped i { width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }
.ic-ped i.h { background: transparent; box-shadow: inset 0 0 0 1.5px #AEAEB2; }
.ic-con .ic-ped li { background: color-mix(in srgb, var(--oscuro-ink) 9%, var(--oscuro)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oscuro-ink) 16%, transparent); }
.ic-con .ic-ped i { background: var(--acento-oscuro); }
.ic-con .ic-ped i.h { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--oscuro-ink) 42%, transparent); }
.ic-inc { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.ic-ico { flex: none; width: 24px; height: 24px; margin-top: -1px; color: var(--ink); }
.ic-con .ic-ico { color: var(--oscuro-ink); }
.ic-inc b { display: block; font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; }
.ic-inc small { display: block; margin-top: 3px; font-family: var(--f-mono); font-size: 12px; line-height: 1.25; color: #6E6E73; }
.ic-con .ic-inc small { color: var(--oscuro-gris); }
.ic-leyenda { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 18px 0 0; font-size: 13.5px; color: #6E6E73; }
.ic-leyenda .t { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--acento); }
.ic-leyenda .t.h { background: transparent; box-shadow: inset 0 0 0 1.5px #AEAEB2; }

/* ---------- 4. today / how it is done / what you get / questions: sheets, each over the last ---------- */
.ic-hoy, .ic-hacer, .ic-llevas, .ic-preg { position: relative; box-sizing: border-box; padding-block: clamp(96px, 13vh, 130px) clamp(96px, 12vh, 140px); }
.ic-hoy { z-index: 3; background: var(--oscuro); color: var(--oscuro-ink); border-radius: 32px 32px 0 0; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.4); }
.ic-hacer { z-index: 4; margin-top: -32px; background: var(--alt); border-radius: 32px 32px 0 0; box-shadow: 0 -22px 44px -30px rgba(0, 0, 0, 0.3); }
.ic-llevas { z-index: 5; 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, 0.3); }
.ic-preg { z-index: 6; margin-top: -32px; background: var(--pagina); border-radius: 32px; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.35), 0 34px 60px -30px rgba(0, 0, 0, 0.5); }
.mov .ic-hoy, .mov .ic-hacer, .mov .ic-llevas, .mov .ic-preg { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.mov .ic-hoy, .mov .ic-hacer, .mov .ic-llevas { min-height: calc(100vh + 32px); min-height: calc(100svh + 32px); padding-bottom: 150px; }   /* the next sheet covers the last 32px */
.ic-seccion { padding-inline: max(22px, calc((100% - 1240px) / 2)); }
.ic-seccion .titulo { margin: 10px 0 clamp(24px, 4.2vh, 44px); max-width: 15em; font-size: clamp(2rem, min(3.8vw, 6.2vh), 3.4rem); }
.ic-carril.carril { overflow: visible; scroll-snap-type: none; }
.ic-carril .fila { width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }

/* three signs: light cards drawn with the very fragments of the interface that go wrong */
.ic-senal { --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: #F5F5F7; color: var(--ink); opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 44px)); transition: translate .45s var(--ease); }
.ic-dib { display: block; box-sizing: border-box; width: 100%; height: auto; padding: 22px 22px 0; --ink-v: #1D1D1F; }
.ic-dib .v-w { fill: #FFFFFF; stroke: rgba(0, 0, 0, 0.08); stroke-width: 1; }
.ic-dib .v-l { fill: none; stroke: #E5E5EA; stroke-width: 1; }
.ic-dib .v-d { fill: #D2D2D7; }
.ic-dib .v-cp { fill: #86868B; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; }
.ic-dib .v-g { fill: #6E6E73; font-weight: 500; }
.ic-dib .v-m { fill: #1D1D1F; font-family: var(--f-mono); font-weight: 500; }
.ic-dib .v-t { fill: #1D1D1F; font-weight: 600; letter-spacing: -.01em; }
.ic-dib .v-ac { fill: var(--acento); }
.ic-dib .v-big { fill: #1D1D1F; font-family: var(--f-mono); font-weight: 500; letter-spacing: -.03em; }
.ic-dib .v-ch { fill: #F5F5F7; stroke: #D2D2D7; stroke-width: 1; }
.ic-dib .v-ch2 { fill: #FFFFFF; stroke: var(--acento); stroke-width: 1.5; }
.ic-dib .v-neq { fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; }
.ic-dib .v-ld { fill: none; stroke: #AEAEB2; stroke-width: 1.4; stroke-dasharray: 3 3; }
.ic-dib .v-af { fill: #AEAEB2; }
.ic-dib .v-k rect, .ic-dib .v-k path { fill: none; stroke: var(--acento); stroke-width: 1.4; stroke-linecap: round; }
.ic-dib .v-k2 { color: #6E6E73; }
.ic-dib .v-sub { fill: none; stroke: var(--acento); stroke-width: 1.6; stroke-linecap: round; }
.ic-dib .v-ac-r { fill: color-mix(in srgb, var(--acento) 10%, #FFFFFF); stroke: var(--acento); stroke-width: 1.2; }
.ic-dib .v-tr { fill: #E5E5EA; }
.ic-dib .v-tr-f { fill: #1D1D1F; }
.ic-dib .v-bt { fill: #1D1D1F; }
.ic-dib .v-bt-t { fill: #FFFFFF; font-weight: 600; }
.ic-tt { padding: 14px 26px 28px; }
.ic-tt small { display: block; font-size: 15px; font-weight: 600; color: var(--acento); }
.ic-tt small i { font-style: normal; font-family: var(--f-mono); font-weight: 500; margin-right: 6px; color: #86868B; }
.ic-tt p { margin-top: 8px; font-weight: 600; font-size: clamp(1.15rem, 1.55vw, 1.4rem); line-height: 1.2; letter-spacing: -.02em; }
@media (hover: hover) { .ic-senal:hover, .ic-paso:hover { translate: 0 -6px; } }

/* four steps, each drawn on the same four systems: first what they hold, then what travels, then what is live, then what is watched */
.ic-hacer { padding-top: clamp(84px, 11vh, 104px); }
.ic-hacer .ic-seccion .titulo { margin-bottom: clamp(18px, 3vh, 30px); }
.ic-hacer .ic-carril .fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ic-paso { --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); position: relative; overflow: hidden; box-sizing: border-box; padding: 20px 26px 20px; border-radius: 28px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--linea); opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 44px)); transition: translate .45s var(--ease); }
.ic-paso::before { content: attr(data-n); position: absolute; top: 4px; right: 22px; font-weight: 700; font-size: 7rem; line-height: 1; letter-spacing: -.06em; color: #F0F0F3; pointer-events: none; }
.ic-pdib { position: relative; display: block; width: min(100%, 392px); height: auto; margin-bottom: 14px; overflow: visible; }
.ic-pdib .n-r { fill: #FFFFFF; stroke: #1D1D1F; stroke-width: 1.4; }
.ic-pdib .n-t { fill: #1D1D1F; font-weight: 600; letter-spacing: -.01em; }
.ic-pdib .n-g { fill: #6E6E73; font-weight: 500; }
.ic-pdib .n-m { fill: #86868B; font-family: var(--f-mono); font-weight: 500; }
.ic-pdib .n-d { fill: none; stroke: #AEAEB2; stroke-width: 1.4; stroke-dasharray: 2 4; stroke-linecap: round; }
.ic-pdib .n-l { fill: none; stroke: #1D1D1F; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic-pdib .n-lv { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linecap: round; }
.ic-pdib .n-ld { fill: none; stroke: #AEAEB2; stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linecap: round; }
.ic-pdib .n-u { fill: none; stroke: var(--acento); stroke-width: 1.6; stroke-linecap: round; }
.ic-pdib .n-pf { fill: #1D1D1F; }
.ic-pdib .n-pg { fill: #AEAEB2; }
.ic-pdib .n-b { fill: color-mix(in srgb, var(--acento) 12%, #FFFFFF); stroke: var(--acento); stroke-width: 1; }
.ic-pdib .n-bt { fill: var(--acento); font-weight: 600; }
.ic-pdib .n-ok { fill: var(--acento); }
.ic-pdib .n-ho { fill: none; stroke: #AEAEB2; stroke-width: 1.4; }
.ic-pdib .n-ch { fill: #F5F5F7; stroke: #D2D2D7; stroke-width: 1; }
.ic-pdib .n-g, .ic-pdib .n-m, .ic-pdib .n-t, .ic-pdib .n-bt { font-size: 13px; }
.ic-paso .ic-pp small { display: block; font-size: 14.5px; font-weight: 600; color: var(--acento); }
.ic-paso .ic-pp small i { font-style: normal; font-family: var(--f-mono); font-weight: 500; margin-right: 6px; color: #86868B; }
.ic-paso .ic-pp h3 { margin-top: 6px; font-weight: 700; font-size: clamp(1.25rem, 1.75vw, 1.6rem); line-height: 1.1; letter-spacing: -.025em; }
.ic-paso .ic-pp p { margin-top: 6px; max-width: 30em; font-size: 15.5px; line-height: 1.36; color: #6E6E73; }

/* what you get: one board with three things marked on it */
.ic-llevas-dentro { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 32px clamp(32px, 5vw, 80px); padding-inline: max(22px, calc((100% - 1240px) / 2)); }
.ic-llevas-txt .titulo { margin-top: 10px; max-width: 11em; font-size: clamp(2rem, min(3.7vw, 6.2vh), 3.4rem); }
.ic-ents { list-style: none; margin: clamp(22px, 4vh, 40px) 0 0; padding: 0; }
.ic-ents li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 16px; padding: 18px 0; border-top: 1px solid var(--oscuro-linea); transition: opacity .35s var(--ease); }
.ic-ents li:last-child { border-bottom: 1px solid var(--oscuro-linea); }
.ic-ents b, .ic-reg b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--acento-oscuro); color: #000000; font-weight: 700; font-size: 14px; line-height: 1; }
.ic-ents p { font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; }
.ic-tablero { margin: 0; min-width: 0; }
.ic-vent2 { overflow: hidden; border-radius: 22px; background: #FFFFFF; color: var(--ink); box-shadow: 0 50px 90px -34px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ic-barra2 { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-bottom: 1px solid #E5E5EA; }
.ic-barra2 i { width: 10px; height: 10px; border-radius: 50%; background: #D2D2D7; }
.ic-barra2 i.a { background: var(--acento); }
.ic-barra2 b { margin-left: 8px; font-weight: 600; font-size: 14px; }
.ic-barra2 span { margin-left: auto; font-family: var(--f-mono); font-size: 12.5px; color: var(--gris); }
.ic-mapa-c { position: relative; padding: 22px 26px 14px; border-bottom: 1px solid #E5E5EA; }
.ic-mapa { display: block; width: 100%; height: auto; overflow: visible; }
.ic-mapa .b-n { fill: #FFFFFF; stroke: #1D1D1F; stroke-width: 1.4; }
.ic-mapa .b-t { fill: #1D1D1F; font-weight: 600; }
.ic-mapa .b-l { fill: none; stroke: #1D1D1F; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic-mapa .b-pf { fill: #1D1D1F; }
.ic-mapa .b-g { fill: #6E6E73; font-family: var(--f-mono); }
.ic-tabla-b { position: relative; display: grid; grid-template-columns: minmax(124px, 1.5fr) minmax(0, 1.05fr) minmax(0, 1.25fr) 52px minmax(0, 1.25fr) minmax(0, 1fr); padding: 24px 22px 16px; }
.ic-tabla-b > span { box-sizing: border-box; padding: 11px 8px; }
.ic-tabla-b .c1 { grid-column: 1; } .ic-tabla-b .c2 { grid-column: 2; } .ic-tabla-b .c3 { grid-column: 3; } .ic-tabla-b .c4 { grid-column: 4; } .ic-tabla-b .c5 { grid-column: 5; } .ic-tabla-b .c6 { grid-column: 6; }
.ic-h .s { display: none; }
.ic-h i { font-style: normal; }
.ic-d.c6 { white-space: nowrap; }
.ic-h { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.ic-d { display: flex; align-items: center; gap: 8px; border-top: 1px solid #EDEDF0; font-size: 13.5px; line-height: 1.25; color: #6E6E73; }
.ic-d b { font-weight: 600; color: var(--ink); }
.ic-fl { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--gris); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-doc { width: 20px; height: 20px; margin-inline: auto; fill: none; stroke: #6E6E73; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-d.c6 { color: var(--ink); font-weight: 500; }
.ic-d.c6 i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.ic-d.c6.av { color: var(--acento); font-weight: 600; }
.ic-d.c6.av i { background: var(--acento); }
.ic-reg { position: relative; z-index: 1; pointer-events: none; border: 1.5px dashed var(--acento); border-radius: 14px; transition: opacity .3s var(--ease), background-color .3s var(--ease); }
.ic-reg b { position: absolute; top: -16px; left: 50%; translate: -50% 0; background: var(--acento); color: #FFFFFF; }
.ic-reg.r0 { position: absolute; left: 14px; right: 14px; top: 10px; bottom: 6px; }
.ic-reg.r0 b { left: 26px; }
.ic-reg.r2 { grid-column: 4; grid-row: 1 / span 5; margin: 2px -3px 0; }
.ic-reg.r3 { grid-column: 5 / span 2; grid-row: 1 / span 5; margin: 2px -1px 0; }
@media (hover: hover) {
  .ic-llevas:has(.ic-ents li[data-k="0"]:hover) .ic-reg:not([data-k="0"]), .ic-llevas:has(.ic-ents li[data-k="1"]:hover) .ic-reg:not([data-k="1"]), .ic-llevas:has(.ic-ents li[data-k="2"]:hover) .ic-reg:not([data-k="2"]) { opacity: .22; }
  .ic-llevas:has(.ic-ents li[data-k="0"]:hover) .ic-reg[data-k="0"], .ic-llevas:has(.ic-ents li[data-k="1"]:hover) .ic-reg[data-k="1"], .ic-llevas:has(.ic-ents li[data-k="2"]:hover) .ic-reg[data-k="2"] { background: color-mix(in srgb, var(--acento) 7%, transparent); }
  .ic-llevas:has(.ic-reg[data-k]:hover) .ic-ents li { opacity: .5; }
}

/* questions: three plain rows, the question large and the answer beside it */
.ic-preg-dentro { padding-inline: max(22px, calc((100% - 1240px) / 2)); }
.ic-preg-cab .titulo { margin-top: 10px; font-size: clamp(2.4rem, min(5vw, 8vh), 4.6rem); line-height: 1.04; }
.ic-qa { margin-top: clamp(26px, 5vh, 56px); border-bottom: 1px solid var(--linea); }
.ic-qa-f { --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); display: grid; grid-template-columns: 48px minmax(0, 1.05fr) minmax(0, 1fr); gap: 8px clamp(20px, 3vw, 44px); align-items: baseline; padding: clamp(22px, 3.8vh, 36px) 0; border-top: 1px solid var(--linea); opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 30px)); }
.ic-qa-n { font-family: var(--f-mono); font-size: 15px; color: var(--acento); }
.ic-qa-f h3 { font-weight: 700; font-size: clamp(1.4rem, 2.5vw, 2.3rem); line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.ic-qa-f p { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.42; color: #6E6E73; }
.mov .serv-cierre { position: sticky; bottom: 0; z-index: 0; }

/* =================================== motion on =================================== */
@keyframes ic-paq { 0% { transform: translateX(0); opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateX(92px); opacity: 0; } }
@keyframes ic-paq-v { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(-678px); opacity: 0; } }
.mov .ic-svg .paq { animation: ic-paq 1.9s linear infinite; }
.mov .ic-svg .paq-v { animation: ic-paq-v 3.6s linear infinite; }

.mov #ic-viaje .fijo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "tit cont" "pasos cont" "lienzo lienzo"; column-gap: 40px; padding: clamp(76px, 10.5vh, 96px) max(22px, calc((100% - 1392px) / 2)) 104px; transform-origin: 50% 100%; transform: translateY(calc(var(--sale, 0) * 100vh)) scale(calc(.9 + var(--entra, 1) * .1)); border-radius: calc((1 - var(--entra, 1)) * 44px) calc((1 - var(--entra, 1)) * 44px) 0 0; will-change: transform; }
.mov .ic-tit { grid-area: tit; }
.mov .ic-tit h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mov .ic-cont { grid-area: cont; justify-self: end; margin: 0; text-align: right; }
.mov .ic-pasos { grid-area: pasos; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 10px 0 0; }
.mov .ic-lienzo { grid-area: lienzo; display: grid; align-items: center; margin-top: 0; min-height: 0; }
.mov .ic-ventana { display: grid; justify-items: center; }
.mov .ic-svg { width: min(100%, calc((100vh - 400px) * 2.885)); width: min(100%, calc((100svh - 400px) * 2.885)); }
.mov .ic-cont-n { display: grid; justify-items: end; font-size: clamp(5rem, min(11vw, 17vh), 9.5rem); line-height: .86; color: var(--oscuro-ink); }
.mov .ic-cont-n i { display: block; grid-area: 1 / 1; opacity: 0; translate: 0 .16em; transition: opacity .4s var(--ease), translate .55s cubic-bezier(.4, 0, .2, 1); }
.mov .ic-cont-n i[data-n="1"] { color: var(--acento-oscuro); }
.mov #ic-viaje[data-paso="0"] i[data-n="3"], .mov #ic-viaje:is([data-paso="1"], [data-paso="2"]) i[data-n="2"], .mov #ic-viaje:is([data-paso="3"], [data-paso="4"]) i[data-n="1"] { opacity: 1; translate: 0 0; }
.mov .ic-cont-f { justify-content: flex-end; margin-top: 14px; }
.mov #ic-viaje:is([data-paso="0"]) .ic-cont-f :is(.b, .c) { background: var(--acento-oscuro); box-shadow: none; }
.mov #ic-viaje:is([data-paso="1"], [data-paso="2"]) .ic-cont-f .c { background: var(--acento-oscuro); box-shadow: none; }
.mov .ic-cont-s { display: none; }

/* where the order is, from the engine's --s: it moves between systems as you scroll, one stretch at a time */
.mov #ic-viaje { --c1: clamp(0, (var(--s, 1) - .1) / .2, 1); --c2: clamp(0, (var(--s, 1) - .3) / .2, 1); --c3: clamp(0, (var(--s, 1) - .5) / .2, 1); --c4: clamp(0, (var(--s, 1) - .7) / .2, 1);
  --x: calc(125px + (var(--c1) + var(--c2) + var(--c3)) * 310px + var(--c4) * 335px);
  --cam: calc(190px + var(--c1) * 400px + var(--c3) * 465px + var(--c4) * 205px); }
.mov .ic-svg .token { transform: translateX(var(--x)); will-change: transform; }

/* the step's text beside the drawing, one at a time */
.mov .ic-pt { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: start; max-width: 40em; padding-top: 0; border-top: 0; opacity: 0; visibility: hidden; translate: 0 16px; pointer-events: none; transition: opacity .45s var(--ease), translate .6s cubic-bezier(.4, 0, .2, 1), visibility .45s; }
.mov .ic-pt small { font-size: 16px; }
.mov .ic-pt h3 { margin-top: 6px; font-size: clamp(1.8rem, min(3.1vw, 5.2vh), 2.9rem); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.mov .ic-pt p { text-wrap: pretty; margin-top: 10px; font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.26; letter-spacing: -.012em; }
.mov .ic-pt .ic-reg-t { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--oscuro-linea); font-weight: 500; font-size: 13.5px; }
.mov .ic-pt .ic-reg-t span { display: inline; margin-right: 8px; }
.mov #ic-viaje[data-paso="0"] .ic-pt[data-k="0"], .mov #ic-viaje[data-paso="1"] .ic-pt[data-k="1"], .mov #ic-viaje[data-paso="2"] .ic-pt[data-k="2"], .mov #ic-viaje[data-paso="3"] .ic-pt[data-k="3"], .mov #ic-viaje[data-paso="4"] .ic-pt[data-k="4"] { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; }

/* the week: a white sheet rises over the black stage, which stays put; the second step fills the bottom row */
.mov #ic-semana .fijo { display: grid; align-content: center; padding-bottom: 104px; border-radius: calc((1 - var(--entra, 1)) * 32px) calc((1 - var(--entra, 1)) * 32px) 0 0; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.5); transform: translateY(calc(var(--sale, 0) * 100vh)); }
.mov .ic-sem-dentro { width: 100%; }
.mov .ic-sem-nota { display: grid; }
.mov .ic-sem-nota p { grid-area: 1 / 1; margin: 0; transition: opacity .45s var(--ease), translate .55s cubic-bezier(.4, 0, .2, 1); }
.mov #ic-semana[data-paso="0"] .ic-sem-nota .n1, .mov #ic-semana[data-paso="1"] .ic-sem-nota .n0 { opacity: 0; translate: 0 8px; }
.mov #ic-semana .ic-sin, .mov #ic-semana .ic-fila-sin { transition: opacity .6s var(--ease); }
.mov #ic-semana[data-paso="1"] .ic-sin { opacity: .62; }
.mov #ic-semana .ic-con::before { transition: opacity .6s var(--ease) calc(var(--i, 0) * 80ms), transform .7s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * 80ms); }
.mov #ic-semana .ic-con::after { transition: opacity .5s var(--ease); }
.mov #ic-semana .ic-con > * { transition: opacity .5s var(--ease) calc(var(--i, 0) * 80ms + 160ms), translate .6s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * 80ms + 160ms); }
.mov #ic-semana .ic-fila-con { transition: opacity .5s var(--ease); }
.mov #ic-semana .ic-fila-con span { transition: opacity .5s var(--ease) .3s; }
.mov #ic-semana[data-paso="0"] .ic-con::before { opacity: 0; transform: scale(.96); }
.mov #ic-semana[data-paso="0"] .ic-con::after { opacity: 1; }
.mov #ic-semana[data-paso="0"] .ic-con > .ic-inc { opacity: 0; translate: 0 10px; }
.mov #ic-semana[data-paso="0"] .ic-con > .ic-ped { opacity: .16; }
.mov #ic-semana[data-paso="0"] .ic-fila-con { opacity: .4; }
.mov #ic-semana[data-paso="0"] .ic-fila-con span { opacity: 0; }

/* ======================= screens up to 820px: phones ======================= */
@media (max-width: 820px) {
  #ic-hero { padding: 80px 22px 22px; }
  .ic-ceja { margin-bottom: 6px; font-size: 16px; }
  .ic-hero-pie { display: block; margin-top: 10px; }
  .ic-sub { font-size: 1rem; line-height: 1.25; }
  .ic-hero .acciones { justify-content: flex-start; margin-top: 12px; }
  .ic-escena { --alto: auto; display: block; height: auto; margin-top: 14px; }
  .ic-lado-crm { height: 156px; }
  .ic-lado-erp { height: 160px; }
  .ic-ven { border-radius: 16px; }
  .ic-barra { height: 34px; padding: 0 12px; gap: 6px; }
  .ic-barra b { font-size: 13px; }
  .ic-barra span { font-size: 12px; }
  .ic-crm-c { padding: 10px 12px; }
  .ic-embudo { gap: 4px; }
  .ic-embudo li { height: 22px; padding: 0 18px; font-size: 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 7px 100%); }
  .ic-embudo li b { font-size: 12px; }
  .ic-ranura, .ic-contactos { display: none; }
  .ic-pedido { top: auto; bottom: -30px; right: auto; left: 50%; translate: -50% 0; width: min(78%, 280px); }
  .ic-pedido-in { padding: 11px 16px 10px; border-radius: 16px; transform: translate(calc((var(--a, .5) - .5) * 60px + var(--px, 0) * 6px), 0) rotate(calc(-2deg + (var(--a, .5) - .5) * -6deg + var(--px, 0) * 1.2deg)); }
  .ic-ped-n { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 1.45rem; }
  .ic-ped-i { display: block; font-family: var(--f-mono); font-weight: 500; font-size: .95rem; letter-spacing: 0; color: #6E6E73; }
  .ic-pedido dl { display: none; }
  .ic-pasarela { grid-column: auto; align-self: auto; margin: 0 auto; transform: none; flex-direction: column; width: 26px; height: 94px; }
  .ic-pasarela span { flex: 1; align-self: center; border-top: 0; border-left: 2px dashed #AEAEB2; }
  .ic-pasarela b { padding: 0 10px; }
  .ic-pasarela small { left: 34px; top: 50%; translate: 0 -50%; }
  .ic-erp-c { display: block; padding: 8px 12px; }
  .ic-menu, .ic-kpis { display: none; }
  .ic-tabla-t { margin-bottom: 4px; font-size: 14px; }
  .ic-th { height: 22px; font-size: 10.5px; }
  .ic-th, .ic-tr { grid-template-columns: 50px minmax(0, 1fr) 60px; gap: 8px; }
  .ic-th span:nth-child(4), .ic-tr em { display: none; }
  .ic-tr { height: 30px; font-size: 12.5px; }
  .ic-tr:nth-child(3), .ic-tr:nth-child(4) { display: none; }
  .ic-tr-nuevo { position: static; display: grid; grid-template-columns: 50px minmax(0, 1fr); height: 32px; margin: 6px -6px 0; padding: 0 6px; }

  .ic-hoy, .ic-hacer, .ic-llevas, .ic-preg { padding-block: 92px 84px; }
  .mov .ic-hoy, .mov .ic-hacer, .mov .ic-llevas { padding-bottom: 150px; }
  .ic-seccion .titulo { font-size: 2rem; }
  .ic-carril.carril { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -22px; }
  .ic-carril .fila, .ic-hacer .ic-carril .fila { display: flex; width: max-content; gap: 12px; padding-inline: 22px; }
  .ic-senal, .ic-paso { flex: none; width: min(80vw, 330px); scroll-snap-align: start; scroll-margin-inline: 22px; }
  .ic-paso { width: min(86vw, 350px); padding: 18px 18px 18px; }
  .ic-paso::before { font-size: 5rem; right: 16px; }
  .ic-pdib { width: 100%; margin-bottom: 12px; }
  .ic-dib { padding: 16px 16px 0; }
  .ic-tt { padding: 10px 18px 20px; }
  .ic-tt p { font-size: 1.15rem; }

  /* the stage: the drawing is wider than the screen and slides past, following the order */
  #ic-viaje { --esc: .76; }
  .ic-pasos { grid-template-columns: minmax(0, 1fr); }
  #pagina:not(.mov) .ic-ventana { overflow-x: auto; margin-inline: -22px; padding-inline: 22px; scrollbar-width: none; }
  #pagina:not(.mov) .ic-ventana .ic-svg { width: 1140px; max-width: none; }
  .mov #ic-viaje .fijo { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "tit cont" "lienzo lienzo" "pasos pasos"; padding: 66px 22px 100px; column-gap: 20px; align-content: start; }
  .mov .ic-eti { align-self: center; }
  .mov .ic-tit { align-self: center; }
  .mov .ic-cont { display: flex; align-items: center; gap: 12px; align-self: center; }
  .mov .ic-cont-t { display: none; }
  .mov .ic-cont-n { font-size: 3.4rem; }
  .mov .ic-cont-f { margin-top: 0; }
  .mov .ic-lienzo { align-items: center; }
  .mov .ic-ventana { position: relative; display: block; width: 100vw; margin-inline: calc(50% - 50vw); height: calc(520px * var(--esc)); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .mov .ic-ventana .ic-svg { position: absolute; left: 0; top: 0; width: calc(1500px * var(--esc)); height: calc(520px * var(--esc)); max-width: none; transform: translateX(calc(50vw - var(--cam) * var(--esc))); will-change: transform; }
  .mov .ic-pt { padding-top: 0; }
  .mov .ic-pt h3 { font-size: 1.65rem; }
  .mov .ic-pt p { font-size: 1.0625rem; line-height: 1.28; margin-top: 8px; }
  .mov .ic-pt .ic-reg-t { display: none; }
  .mov .ic-pasos { margin-top: 6px; }

  /* the week, turned on its side: a row per day, the two ways side by side */
  .mov #ic-semana .fijo { align-content: start; padding-top: 66px; padding-bottom: 100px; }
  #ic-semana .fijo { padding-top: 76px; }
  .ic-sem-cab { margin-bottom: 12px; }
  .ic-sem-cab .titulo { margin-top: 2px; font-size: 1.75rem; line-height: 1.06; }
  #ic-semana .etiqueta { font-size: 17px; }
  .ic-sem-nota, .mov .ic-sem-nota { display: none; }
  .ic-sem { grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 6px; }
  .ic-fila { padding-right: 0; align-self: end; }
  .ic-fila b { font-size: .95rem; }
  .ic-fila span { margin-top: 4px; font-size: 11.5px; }
  .ic-fila span i { display: inline; margin-right: 5px; font-size: 1.5rem; }
  .ic-dia { display: block; padding: 0; align-self: center; font-size: 12px; }
  .ic-dia .d1, .ic-dia small { display: none; }
  .ic-dia .d2 { display: inline; }
  .ic-c { gap: 6px; min-height: 0; padding: 8px 9px 9px; border-radius: 12px; }
  .ic-ped { gap: 4px; min-height: 0; }
  .ic-ped li { width: 30px; height: 17px; gap: 3px; border-radius: 6px; }
  .ic-ped i { width: 4px; height: 4px; }
  .ic-ped i.h, .ic-con .ic-ped i.h { box-shadow: inset 0 0 0 1px #AEAEB2; }
  .ic-inc { gap: 6px; }
  .ic-ico { width: 16px; height: 16px; margin-top: 0; }
  .ic-inc b { font-size: 12px; line-height: 1.18; }
  .ic-inc small { display: none; }
  .ic-leyenda { margin-top: 10px; font-size: 12px; gap: 4px 16px; }
  .ic-leyenda span:last-child { display: none; }

  .ic-llevas-dentro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ic-llevas-txt .titulo { font-size: 1.85rem; }
  .ic-ents { margin-top: 12px; }
  .ic-ents li { padding: 11px 0; gap: 12px; }
  .ic-ents p { font-size: 1.02rem; }
  .ic-ents b, .ic-reg b { width: 24px; height: 24px; font-size: 12.5px; }
  .ic-ents li { grid-template-columns: 24px minmax(0, 1fr); }
  .ic-mapa-c { padding: 16px 14px 8px; }
  .ic-tabla-b { grid-template-columns: minmax(0, 1.3fr) 38px minmax(0, 1.2fr) minmax(0, 1.15fr); padding: 22px 8px 10px; }
  .ic-h { font-size: 9.5px; letter-spacing: .04em; }
  .ic-h .l { display: none; } .ic-h .s { display: inline; }
  .ic-d.c5, .ic-d.c6 { font-size: 11.5px; }
  .ic-tabla-b .c2, .ic-tabla-b .c3 { display: none; }
  .ic-tabla-b .c4 { grid-column: 2; } .ic-tabla-b .c5 { grid-column: 3; } .ic-tabla-b .c6 { grid-column: 4; }
  .ic-tabla-b > span { padding: 9px 5px; }
  .ic-d { font-size: 12px; gap: 5px; }
  .ic-fl { width: 12px; height: 12px; }
  .ic-reg.r0 { left: 6px; right: 6px; top: 6px; bottom: 2px; }
  .ic-reg.r0 b { left: 18px; }
  .ic-reg.r2 { grid-column: 2; }
  .ic-reg.r3 { grid-column: 3 / span 2; }

  .ic-preg-dentro { }
  .ic-preg-cab .titulo { font-size: 2.2rem; }
  .ic-qa { margin-top: 16px; }
  .ic-qa-f { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 13px 0; }
  .ic-qa-f h3 { font-size: 1.2rem; }
  .ic-qa-f p { font-size: 1rem; line-height: 1.38; }
}
/* a phone's real page height (Safari with its bars: about 390x700): every resting place stays composed above the floating contact button */
@media (max-width: 820px) and (max-height: 780px) {
  /* hero */
  #ic-hero { padding: 74px 22px 16px; }
  .ic-ceja, .ic-sub-2 { display: none; }
  .ic-hero h1 { font-size: 2.15rem; }
  .ic-hero-pie { margin-top: 8px; }
  .ic-sub { font-size: .97rem; line-height: 1.24; }
  .ic-hero .acciones { margin-top: 10px; }
  .ic-escena { margin-top: 12px; }
  .ic-lado-crm { height: 136px; }
  .ic-lado-erp { height: 136px; }
  .ic-embudo li:first-child { display: none; }
  .ic-pasarela { height: 86px; }
  .ic-tr:nth-child(5) { display: none; }
  /* the stage: a smaller drawing and tighter step texts, so the title never reaches the captions */
  #ic-viaje { --esc: .66; }
  .mov #ic-viaje .fijo { padding-top: 62px; }
  .mov .ic-cont-n { font-size: 2.6rem; }
  .mov .ic-pt small { font-size: 14px; }
  .mov .ic-pt h3 { font-size: 1.45rem; }
  .mov .ic-pt p { font-size: .97rem; line-height: 1.26; margin-top: 6px; }
  .mov .ic-pasos { margin-top: 4px; }
  /* the sheets */
  .ic-hoy, .ic-hacer, .ic-llevas, .ic-preg { padding-block: 76px 84px; }
  .mov .ic-hoy, .mov .ic-hacer, .mov .ic-llevas { padding-bottom: 132px; }
  /* the week */
  #ic-semana .fijo, .mov #ic-semana .fijo { padding-top: 62px; padding-bottom: 100px; }
  #ic-semana .etiqueta { font-size: 15px; }
  .ic-sem-cab { margin-bottom: 8px; }
  .ic-sem-cab .titulo { max-width: none; font-size: 1.5rem; }
  .ic-sem { gap: 6px; }
  .ic-fila span { margin-top: 2px; font-size: 11px; }
  .ic-fila span i { font-size: 1.4rem; }
  .ic-c { gap: 5px; padding: 8px 8px 9px; border-radius: 12px; }
  .ic-ped { gap: 3px; }
  .ic-ped li { width: 24px; height: 15px; gap: 2px; border-radius: 5px; }
  .ic-ped i { width: 3.5px; height: 3.5px; }
  .ic-inc b { font-size: 12px; }
  .ic-leyenda { margin-top: 8px; font-size: 12px; }
  /* what you get */
  #ic-llevas .etiqueta { font-size: 15px; }
  .ic-llevas-dentro { gap: 12px; }
  .ic-llevas-txt .titulo { font-size: 1.5rem; }
  .ic-ents { margin-top: 6px; }
  .ic-ents li { padding: 7px 0; }
  .ic-ents p { font-size: .94rem; line-height: 1.18; }
  .ic-barra2 { height: 34px; }
  .ic-mapa-c { padding: 10px 14px 4px; }
  .ic-tabla-b { padding: 18px 8px 6px; }
  .ic-tabla-b > span { padding: 6px 5px; }
  /* questions */
  .ic-preg-cab .titulo { font-size: 1.9rem; }
  .ic-qa { margin-top: 12px; }
  .ic-qa-f { padding: 10px 0; }
  .ic-qa-f h3 { font-size: 1.1rem; }
  .ic-qa-f p { font-size: .93rem; line-height: 1.34; }
}
/* tablet widths: the stage drawing scales with the screen, the step texts keep two columns */
@media (min-width: 821px) and (max-width: 1080px) {
  .ic-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ic-sem { grid-template-columns: minmax(96px, 120px) repeat(5, minmax(0, 1fr)); gap: 8px; }
  .ic-c { padding: 12px; }
  .ic-ped li { width: 46px; }
  .ic-inc b { font-size: 13.5px; }
  .ic-llevas-dentro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 820px) {
  .ic-kpis { display: none; }
  .ic-tr:nth-child(5) { display: none; }
  .ic-contactos { display: none; }
}
@media (max-height: 700px) and (min-width: 821px) {
  .ic-tr:nth-child(4) { display: none; }
}
/* short laptop screens: the same sheets, a little tighter, so each still fits above the contact button */
@media (max-height: 800px) and (min-width: 821px) {
  .ic-hoy, .ic-hacer, .ic-llevas, .ic-preg { padding-block: 84px 100px; }
  .mov .ic-hoy, .mov .ic-hacer, .mov .ic-llevas { padding-bottom: 124px; }
  .ic-hacer { padding-top: 76px; }
  .ic-seccion .titulo { margin-bottom: 16px; }
  .ic-hacer .ic-seccion .titulo { margin-bottom: 14px; }
  .ic-dib { padding: 12px 18px 0; }
  .ic-tt { padding: 8px 22px 18px; }
  .ic-tt p { font-size: 1.1rem; }
  .ic-paso { padding: 12px 22px 14px; }
  .ic-pdib { width: min(100%, 300px); margin-bottom: 8px; }
  .ic-paso .ic-pp h3 { font-size: 1.25rem; }
  .ic-paso .ic-pp p { font-size: 14.5px; line-height: 1.3; }
  .ic-paso::before { font-size: 5rem; }
  #ic-semana .fijo { padding-top: 76px; }
  .ic-sem-cab { margin-bottom: 14px; }
  .ic-sem-cab .titulo { max-width: none; }
  .ic-sem { gap: 8px; }
  .ic-c { min-height: 136px; padding: 12px; gap: 8px; }
  .ic-ped { min-height: 56px; gap: 6px; }
  .ic-leyenda { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ic-svg *, .ic-senal, .ic-paso { transition: none !important; animation: none !important; } }

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