/* AXELIA · /sectores/alimentacion-carnica/ — «El lote».
   Everything animated is under .mov (motion on). Without it the page reads complete: the line is drawn in its last state, the five steps are listed, the tree is whole. */

/* ---------- 1. hero: the headline, and the lot label drawn as an object ---------- */
#ca-hero { position: relative; z-index: 1; box-sizing: border-box; background: var(--hero); color: var(--hero-ink); padding: clamp(104px, 15vh, 150px) max(22px, calc((100% - 1240px) / 2)) clamp(48px, 8vh, 90px); overflow: hidden; }
.mov #ca-hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.ca-hero-dentro { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.ca-ceja { margin-bottom: 14px; font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.19; letter-spacing: .011em; color: var(--hero-gris); }
.ca-hero h1 { max-width: 9.2em; font-weight: 700; font-size: clamp(2.5rem, min(5.7vw, 9.4vh), 5.4rem); line-height: 1.03; letter-spacing: -.036em; text-wrap: balance; }
.ca-sub { margin-top: 18px; max-width: 25em; font-weight: 600; font-size: clamp(1.15rem, min(1.75vw, 3vh), 1.6rem); line-height: 1.2; letter-spacing: -.008em; color: var(--hero-gris); text-wrap: balance; }
.ca-sub b { font-weight: 600; color: var(--hero-ink); }
.ca-hero .acciones { justify-content: flex-start; margin-top: 26px; }
.ca-hero .avales { margin-top: 18px; max-width: 34em; }

.ca-lote-marco { margin: 0; justify-self: end; width: min(100%, 500px, calc((100vh - 190px) * .6875)); width: min(100%, 500px, calc((100svh - 190px) * .6875)); }
.ca-lote-marco figcaption { margin-top: 20px; text-align: center; font-size: 12px; color: var(--hero-gris); }
/* the label slides and turns a little as the page leaves the hero (--a, from data-avance), and drifts toward the pointer (--px, --py, from the page script) */
.ca-lote-sube { transform: translateY(calc((var(--a, .5) - .5) * -90px)) rotate(calc(-2.4deg + (var(--a, .5) - .5) * -9deg)); }
.ca-lote { position: relative; transform: translate(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 9px)) rotate(calc(var(--px, 0) * 1.1deg)); }
.ca-lote::before, .ca-lote::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 22px; background: #FFFFFF; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.ca-lote::before { transform: translate(-26px, 12px) rotate(-5.5deg); }
.ca-lote::after { transform: translate(20px, 6px) rotate(4deg); opacity: .7; }
.ca-lote-hoja { position: relative; border-radius: 22px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 34px 64px -26px rgba(0, 0, 0, 0.38), 0 10px 22px -10px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.05); overflow: hidden; }
.ca-papel { display: block; width: 100%; height: auto; }
.ca-papel .et-k { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; fill: #86868B; }
.ca-papel .et-v { font-weight: 600; letter-spacing: -.01em; fill: #1D1D1F; }
.ca-papel .et-m { font-family: var(--f-mono); font-weight: 500; fill: #1D1D1F; }
.ca-papel .et-num { font-size: 108px; font-weight: 700; letter-spacing: -.055em; fill: #1D1D1F; }
.ca-papel .et-h { fill: none; stroke: #D2D2D7; stroke-width: 1; }
.ca-papel .et-ac { fill: var(--acento); }
.ca-papel .et-ac-t { fill: var(--acento); }
.ca-papel .et-b { fill: #1D1D1F; }

/* ---------- 2. the production line: a black stage that grows as it arrives and stays put while the next sheet covers it ---------- */
#ca-linea { z-index: 1; background: var(--hero); }
#ca-linea .fijo { background-color: var(--oscuro); background-image: radial-gradient(circle, color-mix(in srgb, var(--oscuro-ink) 9%, transparent) 1px, transparent 1.6px); background-size: 28px 28px; color: var(--oscuro-ink); padding: clamp(84px, 11vh, 120px) max(22px, calc((100% - 1392px) / 2)) clamp(56px, 9vh, 96px); }
.ca-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ca-eti { font-weight: 600; font-size: 17px; line-height: 1.19; color: var(--acento-oscuro); }
.ca-cab h2 { margin-top: 6px; font-weight: 700; font-size: clamp(1.8rem, min(2.8vw, 4.7vh), 2.6rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.ca-cont, .ca-barra { display: none; }
.ca-lienzo { position: relative; margin-top: clamp(20px, 4vh, 40px); }
.ca-cadena { display: none; }

/* the drawing: one SVG, every piece in one of five states */
.ca-svg { display: block; width: 100%; height: auto; overflow: visible; --ac: color-mix(in srgb, var(--oscuro-ink) 55%, transparent); }
:is(.ca-svg, .ca-dib) { --ink-l: color-mix(in srgb, var(--oscuro-ink) 40%, transparent); --ink-f: color-mix(in srgb, var(--oscuro-ink) 36%, transparent); --ink-p: color-mix(in srgb, var(--oscuro-ink) 28%, transparent); }
:is(.ca-svg, .ca-dib) .ln { fill: none; stroke: var(--ink-l); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
:is(.ca-svg, .ca-dib) .dash { stroke-dasharray: 4 4; }
:is(.ca-svg, .ca-dib) .ac-s { fill: none; stroke: var(--ac, var(--acento-oscuro)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:is(.ca-svg, .ca-dib) .ac-f { fill: var(--ac, var(--acento-oscuro)); }
:is(.ca-svg, .ca-dib) .ac-t { fill: var(--ac, var(--acento-oscuro)); }
:is(.ca-svg, .ca-dib) .fl { fill: color-mix(in srgb, var(--oscuro-ink) 6%, var(--oscuro)); stroke: var(--ink-f); stroke-width: 1.4; stroke-linejoin: round; }
:is(.ca-svg, .ca-dib) .fl.ac-s { stroke: var(--ac, var(--acento-oscuro)); stroke-width: 1.6; }
:is(.ca-svg, .ca-dib) .pn { fill: color-mix(in srgb, var(--oscuro-ink) 8%, var(--oscuro)); stroke: var(--ink-p); stroke-width: 1.2; }
:is(.ca-svg, .ca-dib) .pn.ac-s { stroke: var(--ac, var(--acento-oscuro)); stroke-width: 1.4; }
:is(.ca-svg, .ca-dib) .hoja { fill: color-mix(in srgb, var(--oscuro-ink) 7%, var(--oscuro)); stroke: color-mix(in srgb, var(--oscuro-ink) 26%, transparent); stroke-width: 1.2; }
:is(.ca-svg, .ca-dib) .bl { fill: color-mix(in srgb, var(--oscuro-ink) 22%, transparent); }
:is(.ca-svg, .ca-dib) .bl-c { fill: color-mix(in srgb, var(--oscuro-ink) 30%, transparent); }
:is(.ca-svg, .ca-dib) .resalte { fill: color-mix(in srgb, var(--acento-oscuro) 14%, transparent); stroke: var(--acento-oscuro); stroke-width: 1.2; }
:is(.ca-svg, .ca-dib) .chip { fill: var(--oscuro); stroke: var(--acento-oscuro); stroke-width: 1.6; }
:is(.ca-svg, .ca-dib) .tx { fill: var(--oscuro-ink); font-weight: 600; letter-spacing: -.01em; }
:is(.ca-svg, .ca-dib) .tg { fill: var(--oscuro-gris); font-weight: 500; }
:is(.ca-svg, .ca-dib) .cp { fill: var(--oscuro-gris); font-size: 12.5px; font-weight: 600; letter-spacing: .09em; }
:is(.ca-svg, .ca-dib) .tm { font-family: var(--f-mono); fill: var(--oscuro-ink); font-weight: 500; }
:is(.ca-svg, .ca-dib) .tm.tg { fill: var(--oscuro-gris); }
:is(.ca-svg, .ca-dib) .tb { font-weight: 600; }
.ca-svg .tg-box { stroke-width: 1.2; }
.ca-svg .abierto { fill: var(--oscuro); stroke: none; }
.ca-svg .rueda { fill: var(--oscuro); stroke: var(--ink-l); stroke-width: 1.4; }
.ca-svg .barra { fill: color-mix(in srgb, var(--oscuro-ink) 36%, transparent); }
.ca-svg .sello { stroke-width: 1.6; }
.ca-svg .suelo { stroke-width: 1; opacity: .7; }
.ca-svg .tallo { stroke-dasharray: 2 5; opacity: .6; }
.ca-svg .ruta { stroke: color-mix(in srgb, var(--oscuro-ink) 24%, transparent); stroke-width: 2; }
.ca-svg .encendida { fill: var(--acento-oscuro); }
.ca-svg .nodo { fill: var(--oscuro); stroke: color-mix(in srgb, var(--oscuro-ink) 42%, transparent); stroke-width: 1.6; }
.ca-svg .nodo-lleno { fill: var(--acento-oscuro); }
.ca-svg .nombre-est { fill: var(--oscuro-ink); font-weight: 600; letter-spacing: -.01em; }
.ca-svg .lb-ext { opacity: .7; }
.ca-svg .cinta-sombra { fill: none; stroke: color-mix(in srgb, var(--oscuro-ink) 24%, transparent); stroke-width: 1.2; stroke-dasharray: 3 4; }
.ca-svg .cinta-barra { fill: color-mix(in srgb, var(--oscuro-ink) 80%, transparent); }
.ca-svg .cinta-merma { fill: var(--acento-oscuro); }
.ca-svg .token-caja { fill: var(--oscuro); stroke: var(--acento-oscuro); stroke-width: 1.6; }
.ca-svg .caja-mini { stroke-width: 1.4; }
.ca-svg .seg { fill: var(--acento-oscuro); }
.ca-svg .tk-a { opacity: 0; }
.ca-svg .token { transform: translateX(1318px); }

/* which station is lit, by step: the others recede, the lit one brightens and comes forward */
.ca-svg .est { transition: opacity .5s var(--ease); }
.ca-svg .est-in { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
#ca-linea[data-paso="0"] .est:not([data-k="0"]), #ca-linea[data-paso="1"] .est:not([data-k="1"]), #ca-linea[data-paso="2"] .est:not([data-k="2"]), #ca-linea[data-paso="3"] .est:not(:is([data-k="3"], [data-k="4"])) { opacity: .5; }
#ca-linea[data-paso="0"] .est[data-k="0"], #ca-linea[data-paso="1"] .est[data-k="1"], #ca-linea[data-paso="2"] .est[data-k="2"], #ca-linea[data-paso="3"] .est:is([data-k="3"], [data-k="4"]) { --ac: var(--acento-oscuro); --ink-l: color-mix(in srgb, var(--oscuro-ink) 78%, transparent); --ink-f: color-mix(in srgb, var(--oscuro-ink) 74%, transparent); --ink-p: color-mix(in srgb, var(--oscuro-ink) 58%, transparent); }
#ca-linea[data-paso="0"] .est[data-k="0"] .est-in, #ca-linea[data-paso="1"] .est[data-k="1"] .est-in, #ca-linea[data-paso="2"] .est[data-k="2"] .est-in { transform: scale(1.16); }
#ca-linea[data-paso="3"] .est:is([data-k="3"], [data-k="4"]) .est-in { transform: scale(1.1); }
#ca-linea[data-paso="4"] .est { opacity: .85; }
/* a piece that exists from a given step on (data-d), and the lot's own label, which is the raw-material lot only at reception */
#ca-linea[data-paso="0"] :is([data-d="1"], [data-d="2"], [data-d="3"], [data-d="4"]),
#ca-linea[data-paso="1"] :is([data-d="2"], [data-d="3"], [data-d="4"]),
#ca-linea[data-paso="2"] :is([data-d="3"], [data-d="4"]),
#ca-linea[data-paso="3"] [data-d="4"] { opacity: 0; }
#ca-linea[data-paso="0"] .ent[data-d], #ca-linea[data-paso="1"] .ent:is([data-d="2"], [data-d="3"]), #ca-linea[data-paso="2"] .ent[data-d="3"] { translate: 0 10px; }
#ca-linea[data-paso="0"] .tk-a { opacity: 1; }
#ca-linea[data-paso="0"] .tk-b { opacity: 0; }
#ca-linea:not([data-paso="4"]) .traza { opacity: 0; }
#ca-linea[data-paso="4"] .cinta { opacity: 0; }

/* the step texts: all five listed without motion */
.ca-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; }
.ca-pt { padding-top: 16px; border-top: 1px solid var(--oscuro-linea); }
.ca-pt small { display: block; font-size: 14px; font-weight: 600; color: var(--acento-oscuro); }
.ca-pt h3 { margin-top: 6px; font-weight: 700; font-size: 1.3rem; line-height: 1.12; letter-spacing: -.02em; }
.ca-pt p { margin-top: 8px; font-size: 15px; line-height: 1.35; color: var(--oscuro-gris); }
.ca-pt .ca-reg { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.4; color: color-mix(in srgb, var(--oscuro-ink) 70%, transparent); }
.ca-pt .ca-reg span { display: block; margin-bottom: 2px; color: var(--oscuro-gris); }

/* ---------- 3. «Retirada en una consulta»: a white sheet, a search field and the tree it returns ---------- */
#ca-ret { z-index: 2; }
#ca-ret .fijo { background: var(--pagina); color: var(--ink); padding: clamp(88px, 12vh, 120px) max(22px, calc((100% - 1240px) / 2)) clamp(64px, 9vh, 110px); }
.ca-ret-cab .titulo { margin-top: 8px; max-width: 14em; font-size: clamp(2rem, min(3.7vw, 6.2vh), 3.4rem); }
.ca-campo { display: flex; align-items: center; gap: 16px; margin-top: clamp(20px, 3.4vh, 34px); padding: 10px 10px 10px clamp(18px, 2vw, 30px); min-height: 84px; border-radius: 980px; background: var(--alt); box-shadow: inset 0 0 0 1px var(--linea); }
.ca-lupa { flex: none; width: 26px; height: 26px; color: var(--gris); }
.ca-campo-t { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.ca-campo-t small { font-size: 15px; font-weight: 600; color: var(--gris); }
.ca-campo-t b { display: inline-flex; align-items: center; font-family: var(--f-mono); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -.02em; }
.ca-ch { font-style: normal; }
.ca-caret { display: inline-block; width: 2px; height: .95em; margin-left: 5px; background: var(--acento); }
.ca-boton { margin-left: auto; display: inline-flex; align-items: center; min-height: 64px; padding: 0 clamp(20px, 2.2vw, 32px); border-radius: 980px; background: var(--boton); color: var(--boton-ink); font-size: 17px; }
.ca-arbol { list-style: none; margin: clamp(22px, 4vh, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 56px; align-items: center; }
.ca-celda { position: relative; }
.fantasma { position: absolute; inset: 0; border: 1.5px dashed var(--linea); border-radius: 18px; transition: opacity .4s var(--ease); }
.fantasma em { position: absolute; left: 18px; top: 16px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--gris); }
.ca-nodo { position: relative; padding: 20px 22px 22px; border-radius: 18px; background: var(--alt); box-shadow: inset 0 0 0 1px var(--linea); }
.ca-nodo small { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.2; color: var(--gris); }
.ca-nodo b { display: block; margin-top: 6px; font-family: var(--f-mono); font-weight: 500; font-size: clamp(1.4rem, 2.3vw, 2.1rem); line-height: 1.05; letter-spacing: -.02em; }
.c1 .ca-nodo b, .c2 .ca-nodo b { font-size: clamp(1.1rem, 1.65vw, 1.55rem); }
.ca-nodo span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.3; color: #6E6E73; }
.ca-nodo-lote { background: var(--oscuro); color: var(--oscuro-ink); box-shadow: 0 24px 44px -26px rgba(0, 0, 0, 0.55); padding: 26px 26px 28px; }
.ca-nodo-lote small, .ca-nodo-lote span { color: var(--oscuro-gris); }
.ca-nodo-lote b { margin-top: 8px; font-size: clamp(2rem, 3.5vw, 3.2rem); color: var(--acento-oscuro); }
.ca-clientes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; }
.ca-clientes .ca-nodo { padding: 12px 18px 14px; border-radius: 16px; background: var(--pagina); }
.ca-clientes .ca-nodo b { font-size: clamp(1.2rem, 1.8vw, 1.6rem); margin-top: 3px; }
.ca-clientes .ca-nodo span { margin-top: 3px; }
/* connectors: the tree is read from the lot outwards, so each line grows away from it */
.c2::before, .c3::before, .c3::after, .ca-clientes::before, .ca-clientes .ca-nodo::before { content: ""; position: absolute; background: var(--acento); }
.c2::before, .c3::before { top: 50%; right: 100%; width: 56px; height: 1.5px; transform-origin: 100% 50%; }
.c3::after { top: 50%; left: 100%; width: 28px; height: 1.5px; transform-origin: 0 50%; }
.ca-clientes::before { left: -28px; top: calc((100% - 24px) / 6); bottom: calc((100% - 24px) / 6); width: 1.5px; transform-origin: 50% 0; }
.ca-clientes .ca-nodo::before { left: -28px; top: 50%; width: 28px; height: 1.5px; transform-origin: 0 50%; }
.ca-pie { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(22px, 4vh, 40px); padding-top: 16px; border-top: 1px solid var(--linea); }
.ca-leyenda { list-style: none; margin: 0; padding: 0; font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.25; letter-spacing: -.012em; }
.ca-leyenda li + li { margin-top: 4px; }
.ca-resumen { font-size: 15px; line-height: 1.4; color: #6E6E73; text-align: right; }
.ca-resumen b { color: var(--ink); font-weight: 600; }
.ca-resumen i { font-style: normal; margin-inline: 4px; }

/* ---------- 4. today in a plant / services: black cards on a light sheet, a light sheet over black, each as a sheet over the last ---------- */
.ca-hoy, .ca-serv, .ca-preg { position: relative; box-sizing: border-box; padding-block: clamp(96px, 13vh, 130px) clamp(96px, 12vh, 140px); }
.ca-hoy { z-index: 3; background: var(--alt); border-radius: 32px 32px 0 0; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.4); }
.ca-serv { z-index: 4; margin-top: -32px; background: var(--oscuro); color: var(--oscuro-ink); border-radius: 32px 32px 0 0; box-shadow: 0 -22px 44px -30px rgba(0, 0, 0, 0.3); }
.ca-preg { z-index: 5; 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 .ca-hoy, .mov .ca-serv, .mov .ca-preg { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.mov .ca-hoy, .mov .ca-serv { min-height: calc(100vh + 32px); min-height: calc(100svh + 32px); padding-bottom: 150px; }   /* the next sheet covers the last 32px */
.ca-seccion { padding-inline: max(22px, calc((100% - 1240px) / 2)); }
.ca-seccion .titulo { margin: 10px 0 clamp(24px, 4.2vh, 44px); max-width: 15em; font-size: clamp(2rem, min(3.8vw, 6.2vh), 3.4rem); }
.ca-carril.carril { overflow: visible; scroll-snap-type: none; }
.ca-carril .fila { width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.ca-tarjeta { --e: clamp(0, calc(var(--v, 1) * 1.8 - var(--i, 0) * .2), 1); position: relative; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: #000000; color: #F5F5F7; box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.1); opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 44px)); transition: translate .45s var(--ease); }
.ca-serv .ca-tarjeta { background: color-mix(in srgb, var(--oscuro-ink) 6%, var(--oscuro)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oscuro-ink) 14%, transparent); }
.ca-dib { display: block; box-sizing: border-box; width: 100%; height: auto; padding: 22px 22px 0; --ac: var(--acento-oscuro); }
.ca-tt { padding: 14px 24px 26px; }
.ca-tt small { display: block; font-size: 15px; font-weight: 600; color: var(--acento-oscuro); }
.ca-tt p { margin-top: 8px; font-weight: 600; font-size: clamp(1.15rem, 1.55vw, 1.4rem); line-height: 1.2; letter-spacing: -.02em; }
.ca-tt a { display: inline-block; margin-top: 14px; color: var(--acento-oscuro); text-decoration: none; }
.ca-tt a:hover { text-decoration: underline; }
@media (hover: hover) { .ca-tarjeta:hover { translate: 0 -6px; } }

/* ---------- 5. questions: large type, and the closing block waits underneath ---------- */
.ca-preg-dentro { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; padding-inline: max(22px, calc((100% - 1240px) / 2)); }
.ca-preg-cab .titulo { margin-top: 10px; font-size: clamp(2.4rem, min(5vw, 8vh), 4.6rem); line-height: 1.04; }
.ca-qa { border-bottom: 1px solid var(--linea); }
.ca-qa details { border-top: 1px solid var(--linea); }
.ca-qa summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 30px 0 18px; font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.12; letter-spacing: -.025em; cursor: pointer; list-style: none; }
.ca-qa summary::-webkit-details-marker { display: none; }
.ca-qa summary::after { content: "+"; flex: none; font-weight: 300; font-size: 34px; line-height: .9; color: var(--acento); transition: rotate .32s var(--ease); }
.ca-qa details[open] summary::after { rotate: 45deg; }
.ca-qa p { max-width: 32em; padding: 0 0 34px; font-size: clamp(1.1rem, 1.55vw, 1.4rem); line-height: 1.4; color: #6E6E73; }
.mov .serv-cierre { position: sticky; bottom: 0; z-index: 0; }

/* =================================== motion on =================================== */
.mov #ca-linea .fijo { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; padding: clamp(80px, 11vh, 98px) 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 .ca-cont { display: grid; justify-items: end; font-family: var(--f-mono); font-size: 15px; color: var(--oscuro-gris); }
.mov .ca-cont span { grid-area: 1 / 1; opacity: 0; transition: opacity .35s var(--ease); }
.mov .ca-cont span::after { content: " / 05"; }
.mov #ca-linea[data-paso="0"] .ca-cont span:nth-child(1), .mov #ca-linea[data-paso="1"] .ca-cont span:nth-child(2), .mov #ca-linea[data-paso="2"] .ca-cont span:nth-child(3), .mov #ca-linea[data-paso="3"] .ca-cont span:nth-child(4), .mov #ca-linea[data-paso="4"] .ca-cont span:nth-child(5) { opacity: 1; color: var(--oscuro-ink); }
.mov .ca-barra { display: block; position: relative; height: 2px; margin-top: 14px; background: var(--oscuro-linea); }
.mov .ca-barra i { position: absolute; inset: 0; background: var(--acento-oscuro); transform-origin: 0 50%; transform: scaleX(var(--s, 1)); }
.mov .ca-lienzo { display: grid; align-items: center; margin-top: 0; min-height: 0; }
.mov .ca-ventana { display: grid; justify-items: center; }
.mov .ca-svg { width: min(100%, calc((100vh - 430px) * 3.1)); width: min(100%, calc((100svh - 430px) * 3.1)); }

/* where the lot is, from the engine's --s: it moves between stations as you scroll, one stretch at a time */
.mov #ca-linea { --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) / .12, 1); --c4: clamp(0, (var(--s, 1) - .62) / .08, 1); --c5: clamp(0, (var(--s, 1) - .8) / .04, 1); --cp: clamp(0, (var(--s, 1) - .2) / .1, 1);
  --x: calc(128px + (var(--c1) + var(--c2) + var(--c3) + var(--c4)) * 256px + var(--c5) * 166px);
  --cam: calc(var(--x) - 128px * var(--c4) * (1 - var(--c5))); }
.mov .ca-svg .token { transform: translateX(var(--x)); will-change: transform; }
.mov .ca-svg .e-tramo { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(calc((var(--c1) + var(--c2) + var(--c3) + var(--c4)) / 4)); }
.mov .ca-svg .e-final { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--c5)); }
.mov .ca-svg .cinta-barra { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(calc(1 - .13 * var(--cp))); }
.mov .ca-svg .cinta-merma { transform: translateY(calc(var(--cp) * 34px)); opacity: clamp(0, calc(var(--cp) * 8), 1); }
.mov .ca-svg .cinta-ini { opacity: calc(1 - clamp(0, calc(var(--cp) * 6), 1)); }
.mov .ca-svg .cinta-fin, .mov .ca-svg .cinta-nota { opacity: clamp(0, calc((var(--cp) - .85) * 7), 1); }
.mov .ca-svg :is(.cinta, .traza) { transition: opacity .4s var(--ease); }
.mov .ca-svg [data-d] { transition: opacity .55s var(--ease) calc(var(--i, 0) * 90ms), translate .7s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * 90ms); }
.mov .ca-svg .tk-a, .mov .ca-svg .tk-b { transition: opacity .35s var(--ease); }
/* step 4 runs the trace back from the customer, scrubbed by the step's own progress (--f), complete at its resting place */
.mov .ca-svg .seg.sh { transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
.mov .ca-svg .seg.sv { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.mov #ca-linea[data-paso="4"] .sv { transform: scaleY(clamp(0, calc((var(--f) - .12) / .08), 1)); }
.mov #ca-linea[data-paso="4"] .s1 { transform: scaleX(clamp(0, calc((var(--f) - .2) / .14), 1)); }
.mov #ca-linea[data-paso="4"] .s2 { transform: scaleX(clamp(0, calc((var(--f) - .34) / .06), 1)); }
.mov #ca-linea[data-paso="4"] .s3 { transform: scaleX(clamp(0, calc((var(--f) - .4) / .06), 1)); }
.mov .ca-svg .punta { opacity: 0; }
.mov #ca-linea[data-paso="4"] .p0 { opacity: clamp(0, calc((var(--f) - .19) * 25), 1); }
.mov #ca-linea[data-paso="4"] .p1 { opacity: clamp(0, calc((var(--f) - .33) * 25), 1); }
.mov #ca-linea[data-paso="4"] .p2 { opacity: clamp(0, calc((var(--f) - .39) * 25), 1); }
.mov #ca-linea[data-paso="4"] .p3 { opacity: clamp(0, calc((var(--f) - .45) * 25), 1); }
.mov .ca-svg .nodo-traza { --k: clamp(0, calc((var(--f, 1) - var(--d)) / .04), 1); opacity: 0; }
.mov #ca-linea[data-paso="4"] .nodo-traza { opacity: var(--k); translate: 0 calc((1 - var(--k)) * 8px); }

/* the step's text beside the drawing, one at a time */
.mov .ca-pasos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.mov .ca-pt { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 clamp(28px, 5vw, 72px); align-items: start; padding-top: 18px; 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 .ca-pt small { font-size: 16px; }
.mov .ca-pt h3 { margin-top: 8px; font-size: clamp(1.8rem, min(3.3vw, 5.6vh), 3rem); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.mov .ca-pt p { margin-top: 0; max-width: 27em; font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.26; letter-spacing: -.012em; }
.mov .ca-pt .ca-reg { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--oscuro-linea); font-weight: 500; font-size: 13.5px; }
.mov .ca-pt .ca-reg span { display: inline; margin-right: 8px; }
.mov #ca-linea[data-paso="0"] .ca-pt[data-k="0"], .mov #ca-linea[data-paso="1"] .ca-pt[data-k="1"], .mov #ca-linea[data-paso="2"] .ca-pt[data-k="2"], .mov #ca-linea[data-paso="3"] .ca-pt[data-k="3"], .mov #ca-linea[data-paso="4"] .ca-pt[data-k="4"] { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; }

/* the retirada sheet: it rises over the black stage, which stays put, with round corners that flatten as it arrives */
.mov #ca-ret .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 .ca-ret-dentro { width: 100%; }
.mov #ca-ret[data-paso="0"] .ca-ch { opacity: clamp(0, calc(var(--f) * 16 - var(--i) * 1.2), 1); }
.mov #ca-ret [data-d] { transition: opacity .55s var(--ease) calc(var(--i, 0) * 110ms), translate .7s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * 110ms); }
.mov #ca-ret :is(.c2, .c3, .ca-clientes)::before, .mov #ca-ret .c3::after, .mov #ca-ret .ca-clientes .ca-nodo::before { transition: transform .6s cubic-bezier(.4, 0, .2, 1) .12s; }
.mov #ca-ret .c2::before { transition-delay: .3s; }
#ca-ret[data-paso="0"] :is([data-d="1"], [data-d="2"]), #ca-ret[data-paso="1"] [data-d="2"] { opacity: 0; translate: 0 12px; }
#ca-ret[data-paso="0"] :is(.c2, .c3, .ca-clientes)::before, #ca-ret[data-paso="0"] .c3::after, #ca-ret[data-paso="0"] .ca-clientes .ca-nodo::before,
#ca-ret[data-paso="1"] .c3::after, #ca-ret[data-paso="1"] .ca-clientes::before, #ca-ret[data-paso="1"] .ca-clientes .ca-nodo::before { transform: scale(0); }
#ca-ret:is([data-paso="1"], [data-paso="2"]) :is(.c1, .c2) .fantasma, #ca-ret[data-paso="2"] .c4 .fantasma { opacity: 0; }
.mov .ca-leyenda { display: grid; }
.mov .ca-leyenda li { grid-area: 1 / 1; margin: 0; opacity: 0; translate: 0 10px; transition: opacity .4s var(--ease), translate .5s cubic-bezier(.4, 0, .2, 1); }
.mov #ca-ret[data-paso="0"] .ca-leyenda li[data-k="0"], .mov #ca-ret[data-paso="1"] .ca-leyenda li[data-k="1"], .mov #ca-ret[data-paso="2"] .ca-leyenda li[data-k="2"] { opacity: 1; translate: 0 0; }

/* ======================= screens up to 1080px: the line is wider than the screen and slides past, following the lot ======================= */
@media (max-width: 1080px) {
  .mov .ca-ventana { position: relative; display: block; width: 100vw; margin-inline: calc(50% - 50vw); height: 426px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); transition: opacity .4s var(--ease); }
  .mov .ca-ventana .ca-svg { position: absolute; left: 0; top: 0; width: 1320px; height: 426px; max-width: none; transform: translateX(calc(50vw - (110px + var(--cam)) * .88)); will-change: transform; }
  .mov #ca-linea[data-paso="4"] .ca-ventana { opacity: 0; }
  .mov .ca-cadena { display: grid; position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; align-content: center; gap: 0; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
  .mov #ca-linea[data-paso="4"] .ca-cadena { opacity: 1; visibility: visible; }
  .ca-cadena li { position: relative; padding: 14px 0 14px 46px; }
  .ca-cadena li + li::before { content: ""; position: absolute; left: 14px; top: -14px; height: 28px; width: 1.5px; background: var(--acento-oscuro); }
  .ca-cadena li::after { content: ""; position: absolute; left: 7px; top: 22px; width: 15px; height: 15px; border-radius: 50%; background: var(--acento-oscuro); }
  .ca-cadena small { display: block; font-size: 13px; font-weight: 600; color: var(--oscuro-gris); }
  .ca-cadena b { display: block; margin-top: 2px; font-family: var(--f-mono); font-weight: 500; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; }
  .ca-cadena span { display: block; margin-top: 2px; font-size: 14px; color: var(--oscuro-gris); }
  .mov #ca-linea[data-paso="4"] .ca-cadena li { opacity: clamp(0, calc((var(--f) - var(--t, 0)) / .06), 1); translate: calc((1 - clamp(0, (var(--f) - var(--t, 0)) / .06, 1)) * -12px) 0; }
  .mov .ca-cadena li:nth-child(1) { --t: .0; } .mov .ca-cadena li:nth-child(2) { --t: .12; } .mov .ca-cadena li:nth-child(3) { --t: .22; } .mov .ca-cadena li:nth-child(4) { --t: .32; }
}

/* ======================= phones ======================= */
@media (max-width: 820px) {
  .ca-hero-dentro { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #ca-hero { padding-top: 84px; }
  .ca-hero h1 { max-width: none; }
  .ca-lote-marco { justify-self: center; width: min(100%, 340px); }
  /* with motion the hero is the screen: the text, and under it whatever height is left, in which the top of the label rises from the bottom edge and fades into the grey */
  .mov #ca-hero { display: block; min-height: 100vh; min-height: 100svh; padding-bottom: 0; }
  .mov .ca-hero-dentro { display: flex; flex-direction: column; gap: 20px; min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); }
  .mov .ca-lote-marco { position: relative; flex: 1 1 0; min-height: 190px; width: 100%; box-sizing: border-box; padding: 6px 25px 0; overflow: hidden; }
  .mov .ca-lote-marco::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, rgba(245, 245, 247, 0), var(--hero)); pointer-events: none; }
  .mov .ca-lote-marco figcaption { display: none; }
  .ca-pasos { grid-template-columns: minmax(0, 1fr); }
  /* without motion the line keeps a legible size and is swiped along */
  #pagina:not(.mov) .ca-ventana { overflow-x: auto; margin-inline: -22px; padding-inline: 22px; scrollbar-width: none; }
  #pagina:not(.mov) .ca-ventana .ca-svg { width: 1320px; max-width: none; }
  .mov #ca-linea .fijo { padding-top: 66px; padding-bottom: 100px; }
  .mov .ca-cab h2 { display: none; }
  .mov .ca-cab { align-items: center; }
  .mov .ca-pt { grid-template-columns: minmax(0, 1fr); gap: 10px 0; padding-top: 14px; }
  .mov .ca-pt h3 { font-size: 1.65rem; }
  .mov .ca-pt p { font-size: 1.0625rem; line-height: 1.28; }
  .mov .ca-pt .ca-reg { display: none; }
  .mov #ca-ret .fijo { align-content: start; padding-top: 72px; padding-bottom: 100px; }
  #ca-ret .etiqueta { font-size: 17px; }
  .ca-ret-cab .titulo { margin-top: 4px; font-size: 1.75rem; line-height: 1.06; }
  .ca-campo { margin-top: 14px; min-height: 56px; gap: 10px; }
  .ca-campo-t { gap: 10px; }
  .ca-campo-t b { font-size: 1.7rem; }
  .ca-boton { min-height: 46px; padding: 0 16px; font-size: 15px; }
  .ca-lupa { width: 22px; height: 22px; }
  /* the tree, top to bottom: supplier and raw-material lot side by side, the lot below them, its customers last */
  .ca-arbol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 20px; align-items: stretch; margin-top: 16px; }
  .c1 { grid-column: 1; grid-row: 1; } .c2 { grid-column: 2; grid-row: 1; }
  .c3 { grid-column: 1 / -1; grid-row: 2; } .c4 { grid-column: 1 / -1; grid-row: 3; }
  .ca-nodo { padding: 11px 13px 13px; border-radius: 14px; }
  .ca-nodo small { font-size: 12.5px; }
  .ca-nodo b { font-size: 1.05rem; }
  .c1 .ca-nodo b, .c2 .ca-nodo b { font-size: .95rem; }
  .ca-nodo span { margin-top: 3px; font-size: 12.5px; }
  .ca-nodo-lote { padding: 12px 16px 14px; }
  .ca-nodo-lote b { margin-top: 4px; font-size: 1.9rem; }
  .ca-clientes { gap: 8px; margin-left: 28px; }
  .ca-clientes .ca-nodo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 9px 14px; }
  .ca-clientes .ca-nodo span { display: none; }
  .ca-clientes .ca-nodo small { grid-column: 1; }
  .ca-clientes .ca-nodo b { grid-column: 2; margin: 0; font-size: 1.05rem; }
  .c2::before { top: 50%; right: 100%; width: 28px; }
  .c3::before { top: auto; bottom: 100%; left: 75%; right: auto; width: 1.5px; height: 20px; transform-origin: 50% 100%; }
  .c3::after { top: 100%; left: 14px; width: 1.5px; height: 20px; transform-origin: 50% 0; }
  .ca-clientes::before { left: -14px; top: 20px; bottom: 20px; }
  .ca-clientes .ca-nodo::before { left: -14px; width: 14px; }
  .ca-pie { margin-top: 14px; padding-top: 10px; }
  .ca-leyenda { font-size: 1rem; }
  .ca-resumen { display: none; }
  .ca-seccion .titulo { font-size: 2rem; }
  /* cards in a row you swipe through */
  .ca-carril.carril { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -22px; }
  .ca-carril .fila { display: flex; width: max-content; gap: 12px; padding-inline: 22px; }
  .ca-tarjeta { flex: none; width: min(78vw, 330px); scroll-snap-align: start; scroll-margin-inline: 22px; }
  .ca-dib { padding: 16px 16px 0; }
  .ca-tt { padding: 10px 18px 20px; }
  .ca-tt p { font-size: 1.15rem; }
  .ca-preg-dentro { grid-template-columns: minmax(0, 1fr); }
  .ca-preg-cab .titulo { font-size: 2.5rem; }
  .ca-qa summary { padding: 20px 0 14px; font-size: 1.3rem; }
  .ca-qa p { padding-bottom: 22px; font-size: 1.0625rem; }
  .ca-hoy, .ca-serv, .ca-preg { padding-block: 92px 84px; }
}
@media (max-width: 820px) and (max-height: 780px) {
  .ca-ceja { margin-bottom: 8px; font-size: 16px; }
  .ca-hero h1 { font-size: 2.3rem; }
  .ca-sub { margin-top: 12px; font-size: 1.06rem; }
  .ca-hero .acciones { margin-top: 14px; }
  .ca-hero .avales { margin-top: 10px; font-size: 12.5px; line-height: 1.3; }
  .mov #ca-hero .ca-hero-dentro { gap: 14px; }
  .mov #ca-linea .fijo { padding-top: 62px; }
  .mov .ca-pt { padding-top: 10px; gap: 8px 0; }
  .mov .ca-pt h3 { font-size: 1.5rem; }
  .mov .ca-pt p { font-size: 1rem; line-height: 1.24; }
  .mov #ca-ret .fijo { padding-top: 64px; }
  #ca-ret .etiqueta { font-size: 16px; }
  .ca-ret-cab .titulo { margin-top: 2px; font-size: 1.6rem; }
  .ca-campo { margin-top: 12px; min-height: 52px; padding: 6px 6px 6px 14px; }
  .ca-campo-t b { font-size: 1.45rem; }
  .ca-boton { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .ca-arbol { margin-top: 12px; row-gap: 16px; }
  .ca-nodo { padding: 8px 11px 9px; }
  .ca-nodo small { font-size: 12px; }
  .ca-nodo-lote { padding: 9px 14px 10px; }
  .ca-nodo-lote b { margin-top: 2px; font-size: 1.65rem; }
  .ca-nodo-lote span { margin-top: 2px; }
  .ca-clientes { gap: 6px; }
  .ca-clientes .ca-nodo { padding: 6px 12px; }
  .c3::before { height: 14px; }
  .c3::after { height: 14px; }
  .ca-clientes::before { top: 17px; bottom: 17px; }
  .ca-pie { margin-top: 8px; padding-top: 8px; }
  .ca-leyenda { font-size: .95rem; line-height: 1.2; }
  .ca-hoy, .ca-serv, .ca-preg { padding-block: 76px 72px; }
  .serv-cierre { padding-block: 84px 64px; }
  .ca-preg-cab .titulo { font-size: 2.1rem; }
  .ca-qa summary { padding: 14px 0 8px; font-size: 1.12rem; }
  .ca-qa p { padding-bottom: 14px; font-size: .98rem; line-height: 1.35; }
}
@media (max-width: 1080px) and (max-height: 780px) {
  /* the line is shown from the equipment down: the weight ribbon (and its room) goes, the weight stays on the lot */
  .mov .ca-ventana { height: 338px; }
  .mov .ca-ventana .ca-svg { top: -88px; }
  .mov .ca-svg .cinta { display: none; }
  .ca-cadena li { padding: 8px 0 8px 46px; }
  .ca-cadena li + li::before { top: -10px; height: 24px; }
  .ca-cadena li::after { top: 17px; }
  .ca-cadena b { font-size: 1.35rem; }
  .ca-cadena span { display: none; }
}
@media (max-height: 640px) { .ca-hero .avales { display: none; } }
@media (prefers-reduced-motion: reduce) { .ca-svg *, .ca-tarjeta { transition: none !important; } }

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

/* the tone marker must be measured against its own section, not against the whole page */
.ca-serv { position: relative; }