/* ===================================================================== SOLUCIONES — la pregunta que se vuelve rótulo, y la respuesta en tres. Beats: 1 · la pregunta sola en pantalla, nada más 2 · al scrollear se achica, sube y entrega la posta a la píldora 3 · debajo salen tres columnas — el porqué, el cómo y el qué Por qué la píldora y no la misma frase escalada: el rótulo de una escena anclada es .ask-pill — mayúsculas, tracking abierto, borde de 1px y vidrio. Nada de eso sobrevive a un scale(): el tracking se comprime junto con la letra y el borde se afina hasta desaparecer. Así que el titular grande se achica hacia el lugar exacto donde aparece la píldora y le pasa la posta ahí. Es el mismo objeto para el ojo, con la tipografía correcta en los dos extremos. Todo se mueve leyendo --p (0→1), que escribe js/v2.js. ===================================================================== */ .solu{ position:relative; background:var(--ground-base); height:400vh; overflow:clip; /* ---- Tramos ---- */ /* La pregunta se sostiene sola hasta .18, después se achica. */ --ask: clamp(0, calc((var(--p,0) - .18) / .20), 1); /* Relevo entre el titular y la píldora, dentro del tramo --ask. */ --ask-out: clamp(0, calc((1 - var(--ask)) / .45), 1); --ask-in: clamp(0, calc((var(--ask) - .70) / .30), 1); /* Las columnas entran escalonadas, ya con la píldora arriba. */ /* Padding visual de las tarjetas. Vive acá arriba porque lo leen dos cosas: el column-gap de la grilla y el gap del bloque respuesta. */ --pad-x:clamp(18px, 1.9vw, 28px); --pad-y:clamp(20px, 2.2vw, 30px); --c1: clamp(0, calc((var(--p,0) - .40) / .14), 1); --c2: clamp(0, calc((var(--p,0) - .47) / .14), 1); --c3: clamp(0, calc((var(--p,0) - .54) / .14), 1); } .solu__pin{ position:sticky;top:0; height:100svh; display:grid;place-items:center; overflow:clip; } .solu__pin > *{grid-area:1 / 1} /* ===================================================================== LA PREGUNTA — titular grande ===================================================================== */ .solu__ask{ justify-self:center; max-width:min(92vw, 1160px); margin:0; text-align:center; font-family:var(--font-display); font-weight:var(--fw-bold); /* Medido: a 70px la frase entra en 1086px y el tope es 1160. Una línea — el salto de línea queda congelado al achicarse. */ font-size:clamp(30px, 4.9vw, 70px); line-height:1.0; letter-spacing:var(--ls-hero); color:var(--paper); text-wrap:balance; /* Termina exactamente donde aparece la píldora, y se apaga ahí. */ transform: translate3d(0, calc(var(--ask) * -33vh), 0) scale(calc(1 - var(--ask) * .74)); transform-origin:center center; opacity:var(--ask-out); will-change:transform, opacity; } .solu__ask b{font-weight:inherit;color:var(--cyan-400)} /* Todo lo que llega DESPUÉS de la pregunta va en una columna en flujo, no en la misma celda con desplazamientos en vh: apilar a mano la píldora, la bajada y la grilla terminaba con la bajada encima de las tarjetas en cuanto cambiaba el alto del viewport. */ .solu__answer{ width:100%;height:100%; display:flex;flex-direction:column;align-items:center; justify-content:center; /* + --pad-y porque la tarjeta se desborda hacia arriba: el gap del flex mide contra la caja de contenido, no contra el borde pintado, y sin esto la píldora queda pegada al canto de la tarjeta. */ gap:calc(var(--pad-y) + clamp(16px, 1.9vw, 26px)); padding:calc(var(--nav-h) + 2.4vh) 0 calc(3vh + var(--pad-y)); } /* La píldora recibe la posta. Material en .ask-pill (css/v2.css), el mismo que usa "¿Te pasa esto?" — acá sólo va cuándo se enciende. */ .solu__pill{ opacity:var(--ask-in); pointer-events:none; } /* ===================================================================== LAS TRES COLUMNAS — porqué · cómo · qué El método es el argumento: primero ordenar, después automatizar, y recién ahí el efecto. Los productos concretos viven adentro de cada columna, en la lista — que es donde el lector los busca cuando ya entendió para qué sirven. Subgrid, no tres cajas sueltas: con alturas de contenido distintas cada columna arrancaba su párrafo a una altura distinta y las tres se leían torcidas. Con subgrid las cuatro filas — rótulo, titular, bajada, lista — comparten línea base entre columnas. ===================================================================== */ .solu__cols{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); /* Ocho pistas: diagrama, rótulo, titular, bajada y una por cada renglón de la lista. Los renglones necesitan pista propia porque unos envuelven a dos líneas y otros no: sin eso el bloque alinea pero los ítems de adentro derivan uno respecto del otro. */ grid-template-rows:auto auto auto auto auto auto auto auto; row-gap:0; /* El fondo de cada tarjeta se desborda --pad-x por lado, así que el gap tiene que cubrir esos dos desbordes ANTES de dejar aire. Atado por calc y no a ojo: suelto, las tarjetas se pisan. */ column-gap:calc(var(--pad-x) * 2 + clamp(14px, 1.4vw, 22px)); } /* La tarjeta se dibuja con un ::before y no con padding sobre la propia columna: el padding de un subgrid le come la primera y la última pista, y las filas dejarían de compartir línea base — que es justo lo que la grilla está resolviendo. */ .solu__col{ position:relative;isolation:isolate; grid-row:span 8; display:grid; grid-template-rows:subgrid; row-gap:0; align-content:start; } /* El reposo es la columna puesta y el diagrama dibujado. La entrada escalonada la toma el script cuando marca .is-js: sin JS nadie escribe --p, --c queda en 0 y la sección salía en blanco. */ .solu.is-js .solu__col{ opacity:var(--c); transform:translate3d(0, calc((1 - var(--c)) * 24px), 0); } .solu__col::before{ content:"";position:absolute;z-index:-1; inset:calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)); border-radius:var(--radius-lg); background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.085); } .solu__col:nth-child(1){--c:var(--c1)} .solu__col:nth-child(2){--c:var(--c2)} .solu__col:nth-child(3){--c:var(--c3)} /* El diagrama corre en su propia ventana, atrasada respecto de la tarjeta: la caja tiene que existir antes de que se dibuje lo que hay adentro. Con --c a secas el trazo terminaba con la tarjeta todavía a medio aparecer y se leía como un glitch, no como un dibujo. */ .solu__col{--cd:1} .solu.is-js .solu__col{--cd:clamp(0, calc((var(--c, 0) - .30) / .70), 1)} /* La tercera es el remate: se levanta medio tono y toma el borde cian. Una sola tarjeta acentuada — si se acentúan las tres, ninguna lo está. */ .solu__col--out::before{ background:color-mix(in srgb, var(--cyan-400) 6%, transparent); border-color:color-mix(in srgb, var(--cyan-400) 30%, transparent); } /* Un tono del hero por columna: el verde del parque para ordenar, el cyan de la marca para automatizar y el violeta del jacarandá para el resultado. Se redefine --cyan-400 en la columna, así el rótulo, el diagrama y el borde del remate lo toman solos. */ .solu__col:nth-child(1){--cyan-400:var(--park-300)} .solu__col:nth-child(3){--cyan-400:var(--jaca-400)} .solu__col--out stop{stop-color:var(--cyan-400)} /* Sin subgrid no se pueden compartir las pistas; se cae a alturas mínimas para que al menos el titular no descuadre a sus vecinas. */ @supports not (grid-template-rows: subgrid){ .solu__col{display:block} .dia{max-width:none} .solu__name{min-height:2.2em} .solu__copy{min-height:4.7em} .solu__points{display:block} } /* ===================================================================== EL DIAGRAMA — el mismo negocio en tres estados No son tres ilustraciones sueltas: 01 está disperso, 02 conectado y 03 creciendo. La sección plantea 01→02→03 como una secuencia y hasta acá estaba dibujada como tres iguales; esto es lo que la vuelve un recorrido. Motor: el mismo del mapa de proceso — pathLength="1" y stroke-dashoffset. Cero librería, cero @keyframes: todo se deriva de --cd, y --cd de --c, que ya escribía el scroll de la escena. Si la escena cambia de tramos, el dibujo la sigue solo. apple-design §11: sólo transform y opacity, más stroke-dashoffset, que el compositor también resuelve sin layout. ===================================================================== */ .dia{ display:block;width:100%;height:auto; /* Reserva su alto desde el primer cuadro: sin esto la fila del subgrid crece cuando el SVG termina de layoutear y las tres columnas saltan juntas. */ aspect-ratio:200 / 88; padding-bottom:clamp(16px, 1.9vw, 24px); overflow:visible; } /* Las piezas se mueven respecto de sí mismas, no del lienzo. */ .dia *{transform-box:fill-box;transform-origin:center} /* El marco llega primero: la caja antes que su contenido. */ .dia__frame{ fill:none;stroke:rgba(255,255,255,.14);stroke-width:1; stroke-dashoffset:calc(1 - clamp(0, var(--cd, 1) / .55, 1)); } /* --- 01 · los papeles sueltos que se alinean --- Cada papel guarda en --dx/--dy/--dr de dónde viene. Se interpola por (1 - cd), así que el estado de reposo ES la grilla ordenada: si el motor nunca corre, el dibujo queda bien igual. */ .dia__paper{ fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.16);stroke-width:1; transform: translate(calc((1 - var(--cd, 1)) * var(--dx, 0px)), calc((1 - var(--cd, 1)) * var(--dy, 0px))) rotate(calc((1 - var(--cd, 1)) * var(--dr, 0deg))); } /* Los estados se encienden al final: el orden es la consecuencia. */ .dia__row{ fill:var(--cyan-400); opacity:calc(clamp(0, (var(--cd, 1) - .6) / .4, 1) * .85); } /* --- 02 · el nodo y los canales que se enganchan --- */ .dia__link{ fill:none;stroke:var(--cyan-400);stroke-width:1.5;stroke-linecap:round; stroke-dashoffset:calc(1 - clamp(0, (var(--cd, 1) - .25) / .5, 1)); opacity:.75; } .dia__hub{ fill:color-mix(in srgb, var(--cyan-400) 20%, transparent); stroke:var(--cyan-400);stroke-width:1.5; transform:scale(calc(.4 + clamp(0, var(--cd, 1) / .35, 1) * .6)); } /* Opaco, no translúcido: los vínculos pasan por debajo y con relleno transparente se veían atravesando el círculo. Misma regla que los nodos del mapa. */ .dia__sat{ fill:#08193B;stroke:rgba(255,255,255,.30);stroke-width:1; transform:scale(calc(.2 + clamp(0, (var(--cd, 1) - .55) / .45, 1) * .8)); } .dia__satTxt{ fill:var(--paper-dim); font-family:var(--font-body);font-size:8px;font-weight:600; text-anchor:middle; opacity:clamp(0, (var(--cd, 1) - .7) / .3, 1); } /* --- 03 · la curva que sube --- */ .dia__base{stroke:rgba(255,255,255,.14);stroke-width:1} .dia__area{ fill:url(#solu-sube); opacity:calc(clamp(0, (var(--cd, 1) - .45) / .55, 1) * .9); } .dia__line{ fill:none;stroke:var(--cyan-400);stroke-width:2; stroke-linecap:round;stroke-linejoin:round; stroke-dashoffset:calc(1 - clamp(0, var(--cd, 1) / .8, 1)); } /* El punto es el remate, no un adorno que espera: aparece cuando el trazo ya llegó a la punta. */ .dia__dot{ fill:var(--paper); transform:scale(clamp(0, (var(--cd, 1) - .78) / .22, 1)); } /* El número y el rótulo van juntos: eran dos filas diciendo lo mismo, y cada nivel de jerarquía de más es una decisión que el lector tiene que tomar antes de llegar al contenido. */ .solu__kind{ display:block; font-family:var(--font-body); font-size:var(--text-2xs); font-weight:var(--fw-semibold); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--cyan-400); padding-bottom:clamp(12px, 1.4vw, 18px); } .solu__kind i{ font-style:normal; color:var(--paper-mute); font-variant-numeric:tabular-nums; } .solu__name{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:clamp(19px, 1.85vw, 27px); line-height:1.12; letter-spacing:var(--ls-hero); color:var(--paper); margin:0; padding-bottom:clamp(12px, 1.4vw, 18px); text-wrap:balance; } .solu__copy{ font-family:var(--font-body); font-size:clamp(14px, 1.05vw, 16px); line-height:1.5; color:var(--paper-dim); margin:0; padding-bottom:clamp(16px, 1.9vw, 24px); text-wrap:pretty; } /* La lista es tabla, no viñetas: sin íconos. Doce checks cian repetidos no agregan información y son lo que más satura el bloque. La hairline hace de separador y alinea renglón contra renglón entre columnas. */ .solu__points{ list-style:none;margin:0;padding:0; /* Subgrid anidado: la lista hereda las cuatro pistas del final para que cada renglón alinee contra el de las otras columnas. En