/* Clear Flow & Human First (27/9/26) — leer antes de tocar. La filosofía, explicada sin ruido. Abre limpia (el título grande y una línea) y se recorre en capítulos; toda la página cambia de color con el scroll, como Quiénes somos: tinta → arena (Clear Flow) → naranja (Human First) → tinta → arena (la claridad del manifiesto) → tinta. · Tres escenas en lienzo (assets/js/clearflow.js) avanzan con el scroll, sin secuestrarlo: la sección mide 320svh (el manifiesto, 280svh) y el escenario se queda fijo (sticky) mientras dura. El JS escribe --p (0 → 1) en la sección; con ella se funden las frases (--a entrada, --z salida) y aparecen las palabras. Clear Flow: un ovillo de líneas (la complejidad) se ordena, fluye y acaba en una sola línea naranja. Las palabras de «menos» se tachan y se van; las de «más» quedan sobre la línea. Human First: una rejilla rígida (tecnología, procesos, marcas) se vuelve un anillo alrededor de una persona que crece en el centro; el anillo se acerca. Manifiesto: «No hacemos más ruido.» llega con interferencias (la frase cortada en seis franjas que tiemblan, un eco naranja y ondas de señal); el ruido se apaga, queda una línea, la página se hace clara (arena) y la línea, ya naranja, escribe «Creamos más claridad.». Después, el texto se enciende palabra a palabra al leerlo. · El color vive en el (cx-tinta, cx-arena, cx-naranja) con variables registradas (@property): fondo, texto y filetes se funden a la vez en 0,7 s. Una sección puede cambiar de color a mitad de recorrido (data-cx2 y data-cx-at): el manifiesto pasa de tinta a arena cuando llega la claridad. · Sin JavaScript o con movimiento reducido (html.cx-quieto), nada se fija ni se mueve: las frases van una tras otra y el lienzo muestra el estado final. · Sobre arena y naranja, los rótulos pequeños van en tinta (contraste). · Retícula: textos dentro de .wrap (la medida del menú); los lienzos van a sangre, como imagen. Entrada, frase de la diferencia y principios, centrados. · Letra grande en Neue Haas Display 25 XThin (UltraLight, 200); cuerpos en Light (300). */ @font-face{font-family:'nh-ultralight';src:url('../fonts/Nh-25xthin.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap} @property --cx-bg{syntax:'';inherits:true;initial-value:#1F2322} @property --cx-fg{syntax:'';inherits:true;initial-value:#F6F5F3} @property --cx-fg2{syntax:'';inherits:true;initial-value:rgba(246,245,243,.76)} @property --cx-fg3{syntax:'';inherits:true;initial-value:rgba(246,245,243,.5)} @property --cx-line{syntax:'';inherits:true;initial-value:rgba(246,245,243,.12)} @property --cx-acc{syntax:'';inherits:true;initial-value:#FF4D00} /* ---------- Los tres estados de color ---------- */ body.cx-tinta,html:not(.cx-js) [data-cx=tinta]{--cx-bg:var(--ink);--cx-fg:var(--bone);--cx-fg2:rgba(246,245,243,.76);--cx-fg3:rgba(246,245,243,.5);--cx-line:rgba(246,245,243,.14);--cx-acc:var(--orange)} body.cx-arena,html:not(.cx-js) [data-cx=arena]{--cx-bg:var(--sand);--cx-fg:var(--ink);--cx-fg2:rgba(31,35,34,.8);--cx-fg3:rgba(31,35,34,.56);--cx-line:rgba(31,35,34,.16);--cx-acc:var(--ink)} body.cx-naranja,html:not(.cx-js) [data-cx=naranja]{--cx-bg:var(--orange);--cx-fg:var(--ink);--cx-fg2:rgba(31,35,34,.84);--cx-fg3:rgba(31,35,34,.62);--cx-line:rgba(31,35,34,.24);--cx-acc:var(--ink)} body.cx{background-color:var(--cx-bg);color:var(--cx-fg); transition:--cx-bg .7s ease-in-out,--cx-fg .7s ease-in-out,--cx-fg2 .7s ease-in-out,--cx-fg3 .7s ease-in-out,--cx-line .7s ease-in-out,--cx-acc .7s ease-in-out} body.cx.cx-sin{transition:none} html:not(.cx-js) [data-cx]{background-color:var(--cx-bg);color:var(--cx-fg)} body.cx .ma-foot{color:var(--bone)} body.cx main .lk{color:var(--cx-fg);border-bottom-color:var(--cx-line)} body.cx main .lk:hover{color:var(--cx-fg);border-bottom-color:var(--orange)} /* ---------- Piezas comunes ---------- */ .cx-k{display:flex;gap:16px;font-family:var(--f-label);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-acc)} .cx-ln{display:block;overflow:hidden;padding-bottom:.08em} .cx-ln>span{display:inline-block;transform:translateY(106%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)} .cx-ln.in>span{transform:none} .cx-rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)} .cx-rv.in{opacity:1;transform:none} html:not(.cx-js) .cx-ln>span,html.cx-quieto .cx-ln>span{transform:none} html:not(.cx-js) .cx-rv,html.cx-quieto .cx-rv{opacity:1;transform:none} .cx-pt{font-family:var(--f-light);font-weight:300;font-size:clamp(17px,1.45vw,21px);line-height:1.55;color:var(--cx-fg2);max-width:44ch} .cx-qt{margin:0} .cx-qt p{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(24px,2.4vw,38px);line-height:1.24;letter-spacing:-.01em;color:var(--cx-fg);max-width:24ch;text-wrap:balance} .cx-qt.cx-rv{transition-delay:.12s} .cx-prac{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,110px);margin-top:clamp(70px,11vw,150px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--cx-line)} /* ---------- Entrada: el título y una línea ---------- */ .cx-in{min-height:100svh;display:flex} .cx-in-w{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:calc(24px + 55px + clamp(20px,4.5svh,44px)) 0 clamp(22px,4.5svh,46px)} .cx-t{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:min(18.45vw,262.5px);line-height:.94;letter-spacing:-.04em;color:var(--cx-fg);margin-left:-.035em} .cx-t>span{display:block;white-space:nowrap} .cx-w{display:inline-block;animation:cx-orden 1.6s cubic-bezier(.16,.84,.24,1) calc(.3s + var(--d,0s)) both} .cx-amp{color:var(--orange)} @keyframes cx-orden{from{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--r,0deg))}} .cx-tag{text-align:center;font-family:var(--f-label);font-size:13px;letter-spacing:.18em;text-transform:uppercase;line-height:1.75;color:var(--cx-fg);animation:cx-aparece .9s ease 1.1s both} @keyframes cx-aparece{from{opacity:0}} /* ---------- Escenas ---------- */ .cx-sc{position:relative} .cx-stage{position:relative;min-height:100svh;overflow:hidden;--band:.46} .cx-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} .cx-lay{position:absolute;top:0;bottom:0;left:0;right:0;width:min(90%,var(--maxw));margin:0 auto;pointer-events:none;z-index:1} .cx-ui{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:calc(24px + 55px + clamp(22px,4.5svh,48px)) 0 clamp(30px,7svh,76px)} .cx-beats{display:grid;gap:26px} .cx-b{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(30px,3.8vw,58px);line-height:1.08;letter-spacing:-.02em;color:var(--cx-fg);max-width:17ch;text-wrap:balance} .cx-menos,.cx-mas,.cx-orb{list-style:none;margin:0;padding:0} .cx-menos{display:none} .cx-menos li,.cx-mas li,.cx-orb li{font-family:var(--f-label);font-weight:500;font-size:clamp(10.5px,.92vw,13px);letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg);white-space:nowrap} .cx-menos li{position:absolute;left:var(--xm,var(--x));top:var(--ym,var(--y))} .cx-menos li::after{content:"";position:absolute;left:-6px;right:-6px;top:52%;height:1px;background:var(--orange);transform-origin:left center;transform:scaleX(var(--k,1))} .cx-mas{position:absolute;left:0;right:0;top:calc(var(--band) * 100%);display:flex;justify-content:space-between;gap:12px;transform:translateY(calc(-100% - 16px))} .cx-orb{position:absolute;inset:0;pointer-events:none;z-index:1;display:none} .cx-orb li{position:absolute;left:0;top:0} html.cx-js .cx-orb{display:block} /* Sin movimiento (o sin JavaScript): la escena queda en su estado final, sin fijarse; la línea o el anillo arriba y las frases debajo, una tras otra. */ html.cx-quieto .cx-ui,html:not(.cx-js) .cx-ui{justify-content:flex-start} html.cx-quieto .cx-beats,html:not(.cx-js) .cx-beats{margin-top:calc(62svh - 150px)} html.cx-quieto .cx-mas{top:34svh} html:not(.cx-js) .cx-lay{display:none} /* Con movimiento: la sección es alta y el escenario se queda fijo mientras dura. */ html.cx-js:not(.cx-quieto) .cx-sc{height:320svh} html.cx-js:not(.cx-quieto) .cx-stage{position:sticky;top:0;height:100svh;min-height:0} html.cx-js:not(.cx-quieto) .cx-ui{height:100svh;min-height:0} html.cx-js:not(.cx-quieto) .cx-b{grid-area:1/1;align-self:end;--o:clamp(0,min(calc((var(--p,0) - var(--a)) / .05),calc((var(--z) - var(--p,0)) / .05)),1);opacity:var(--o);transform:translateY(calc((1 - var(--o)) * 18px))} html.cx-js:not(.cx-quieto) .cx-menos{display:block} html.cx-js:not(.cx-quieto) .cx-menos li{--k:clamp(0,calc((var(--p,0) - var(--t)) / .06),1);--f:clamp(0,calc((var(--p,0) - var(--t) - .07) / .07),1);opacity:calc(1 - var(--f));transform:translateY(calc(var(--f) * -16px))} html.cx-js:not(.cx-quieto) .cx-mas li{--m:clamp(0,calc((var(--p,0) - .8 - var(--i) * .035) / .05),1);opacity:var(--m);transform:translateY(calc((1 - var(--m)) * 10px))} html.cx-js:not(.cx-quieto) .cx-orb li{opacity:clamp(0,calc((var(--p,0) - .74 - var(--i) * .03) / .05),1)} /* ---------- Clear Flow · cuando todo fluye ---------- */ .cx-fl{padding:clamp(100px,16svh,180px) 0 clamp(90px,14svh,160px)} .cx-big{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(34px,4.4vw,70px);line-height:1.06;letter-spacing:-.02em;color:var(--cx-fg)} .cx-verbs{list-style:none;margin-top:clamp(14px,2vw,26px)} .cx-verbs li{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(40px,6.4vw,100px);line-height:1.04;letter-spacing:-.03em;color:var(--cx-fg)} .cx-verbs li:nth-child(2)>span{transition-delay:.08s} .cx-verbs li:nth-child(3)>span{transition-delay:.16s} .cx-verbs li:nth-child(4)>span{transition-delay:.24s} .cx-verbs li:nth-child(5)>span{transition-delay:.32s} .cx-big .cx-ln:nth-child(2)>span{transition-delay:.1s} /* ---------- Human First · primero, las personas ---------- */ .cx-an{padding:clamp(100px,16svh,180px) 0 clamp(90px,14svh,160px)} .cx-an-h{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(34px,4.4vw,70px);line-height:1.06;letter-spacing:-.02em;color:var(--cx-fg);margin-bottom:clamp(36px,6vw,80px)} .cx-sw{padding:clamp(22px,3vw,40px) 0;border-top:1px solid var(--cx-line)} .cx-sw-p{position:relative;height:1.12em;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(40px,5.8vw,92px);line-height:1.12;letter-spacing:-.03em;color:var(--cx-fg)} .cx-sw-p span{position:absolute;left:0;top:0;width:50%;white-space:nowrap;transition:transform 1.15s cubic-bezier(.65,0,.35,1),opacity .9s ease} .cx-s1{transform:translateX(0)} .cx-s2{transform:translateX(100%);opacity:.28} .cx-sw.on .cx-s1{transform:translateX(100%);opacity:.28} .cx-sw.on .cx-s2{transform:translateX(0);opacity:1} .cx-sw-t{margin-top:14px;font-family:var(--f-light);font-weight:300;font-size:clamp(17px,1.45vw,21px);line-height:1.5;color:var(--cx-fg2);opacity:0;transform:translateY(10px);transition:opacity .8s ease .75s,transform .8s cubic-bezier(.2,.7,.2,1) .75s} .cx-sw.on .cx-sw-t{opacity:1;transform:none} html:not(.cx-js) .cx-s1{transform:translateX(100%);opacity:.28} html:not(.cx-js) .cx-s2{transform:translateX(0);opacity:1} html:not(.cx-js) .cx-sw-t{opacity:1;transform:none} /* ---------- La diferencia ---------- */ .cx-dif{padding:clamp(130px,22svh,240px) 0 clamp(50px,8svh,90px);text-align:center} .cx-dif-t{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:min(8.2vw,128px);line-height:1.02;letter-spacing:-.03em;color:var(--cx-fg)} .cx-dif-t span{display:block} .cx-inv{opacity:calc(1 - .86 * var(--q,0))} .cx-vis{opacity:calc(.3 + .7 * var(--q,0));color:color-mix(in srgb,var(--orange) calc(var(--q,0) * 100%),var(--cx-fg))} html:not(.cx-js) .cx-inv{opacity:.14} html:not(.cx-js) .cx-vis{opacity:1;color:var(--orange)} .cx-dif-s{margin-top:clamp(22px,3vw,36px);font-family:var(--f-label);font-weight:500;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cx-fg3)} /* ---------- Manifiesto: el ruido se apaga y una línea escribe la claridad ---------- */ .cx-mf-ui{justify-content:flex-start} .cx-mf-t{display:grid;margin:auto 0} .cx-mf-a,.cx-mf-c{grid-area:1/1;position:relative;margin:-.12em 0 -.12em -.054em;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:min(19.54vw,277.9px,31svh);line-height:.94;letter-spacing:-.04em;color:var(--cx-fg)} .cx-mf-c{margin-left:-.035em;font-size:min(19.94vw,283.6px,31.64svh)} .cx-mf-s,.cx-mf-e,.cx-mf-c>span{display:block;padding:.12em 0;white-space:nowrap} .cx-mf-s{position:relative;z-index:1;clip-path:inset(calc(var(--i) * 100% / 6) 0 calc(100% - (var(--i) + 1) * 100% / 6) 0)} .cx-mf-s+.cx-mf-s,.cx-mf-e{position:absolute;left:0;right:0;top:0} .cx-mf-e{z-index:0;color:var(--orange);opacity:0} .cx-mf.cx-mf-limpio .cx-mf-s,html.cx-quieto .cx-mf-s,html:not(.cx-js) .cx-mf-s{clip-path:none} .cx-mf.cx-mf-limpio .cx-mf-s+.cx-mf-s,html.cx-quieto .cx-mf-s+.cx-mf-s,html:not(.cx-js) .cx-mf-s+.cx-mf-s{visibility:hidden} html.cx-js:not(.cx-quieto) .cx-mf{height:280svh} html.cx-js:not(.cx-quieto) .cx-mf-a{--o:clamp(0,calc((.58 - var(--p,0)) / .08),1);opacity:var(--o);transform:translateY(calc((1 - var(--o)) * -.12em))} html.cx-js:not(.cx-quieto) .cx-mf-c{--w:clamp(0,calc((var(--p,0) - .6) / .24),1);clip-path:inset(0 calc((1 - var(--w)) * 100%) 0 0)} html.cx-quieto .cx-mf-t,html:not(.cx-js) .cx-mf-t{display:block;margin:clamp(36px,8svh,90px) 0 0} html.cx-quieto .cx-mf-c,html:not(.cx-js) .cx-mf-c{margin-top:.4em} html.cx-quieto .cx-mf-c::after,html:not(.cx-js) .cx-mf-c::after{content:"";display:block;height:2px;margin-left:.035em;background:var(--orange)} html.cx-quieto .cx-mf .cx-cv,html:not(.cx-js) .cx-mf .cx-cv{display:none} /* Lectura: cada palabra se enciende cuando se lee; la línea naranja sigue a la lectura. */ .cx-mf-r{padding:clamp(90px,16svh,190px) 0 clamp(50px,8svh,100px)} .cx-rd{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(32px,4.8vw,76px);line-height:1.1;letter-spacing:-.02em;color:var(--cx-fg);text-wrap:pretty} .cx-mf-o{display:grid;gap:clamp(30px,4.4vw,60px);margin-top:clamp(70px,11vw,150px)} .cx-rd-l{font-size:min(9.635vw,137.03px);line-height:1.04;letter-spacing:-.03em;white-space:nowrap} .cx-rd-l:nth-child(1) .cx-rd-x{margin-left:-.067em} .cx-rd-l:nth-child(2) .cx-rd-x{margin-left:-.037em} .cx-rd-u{display:block;height:2px;margin-top:.16em;background:var(--orange);transform-origin:left center;transform:scaleX(var(--u,1))} html.cx-js:not(.cx-quieto) .cx-rw{opacity:calc(.12 + .88 * var(--l,0));transition:opacity .25s linear} html.cx-js:not(.cx-quieto) .cx-rd-u{transform:scaleX(var(--u,0))} .cx-mj{padding:clamp(60px,10svh,120px) 0 clamp(90px,14svh,160px)} .cx-mj-l{list-style:none;border-top:1px solid var(--cx-line)} .cx-mj-l li{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(28px,4vw,62px);line-height:1.1;letter-spacing:-.02em;color:var(--cx-fg);padding:.34em 0 .3em;border-bottom:1px solid var(--cx-line)} .cx-mj-s{margin-top:clamp(34px,5vw,64px);font-family:var(--f-light);font-weight:300;font-size:clamp(17px,1.45vw,21px);color:var(--cx-fg2)} /* ---------- Principios ---------- */ .cx-pr{padding:clamp(90px,14svh,160px) 0} .cx-pr-k{font-family:var(--f-label);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-acc);text-align:center} .cx-pr-l{display:flex;flex-direction:column;gap:clamp(64px,11vw,140px);margin-top:clamp(50px,8vw,100px);text-align:center} .cx-p h3{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(32px,5.2vw,82px);line-height:1.04;letter-spacing:-.025em;max-width:16ch;margin:0 auto;color:var(--cx-fg)} .cx-p p{margin:clamp(14px,2vw,22px) auto 0;font-family:var(--f-light);font-weight:300;font-size:clamp(16px,1.45vw,20px);line-height:1.5;color:var(--cx-fg2);max-width:44ch} html.cx-js:not(.cx-quieto) .cx-p{opacity:.12;transform:translateY(60px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)} html.cx-js:not(.cx-quieto) .cx-p.in{opacity:1;transform:none} /* ---------- Cierre ---------- */ .cx-end{padding:clamp(90px,14svh,160px) 0 clamp(80px,12svh,140px)} .cx-end-t{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:min(8.8vw,136px);line-height:1;letter-spacing:-.03em;color:var(--cx-fg)} .cx-end-t .cx-ln:nth-child(2)>span{transition-delay:.12s} .cx-o{color:var(--orange)} .cx-end-l{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:clamp(36px,5vw,64px)} /* ---------- Tableta y móvil ---------- */ @media (max-width:900px){ .cx-in-w,.cx-ui{padding-top:calc(16px + 55px + clamp(18px,4svh,36px))} .cx-prac{grid-template-columns:minmax(0,1fr)} } @media (max-width:760px){ .cx-stage{--band:.36} .cx-tag{font-size:11.5px} .cx-b{font-size:clamp(27px,7.6vw,40px)} .cx-mas{flex-wrap:wrap;justify-content:flex-start;gap:6px 18px} .cx-menos li:nth-child(1){--xm:4%;--ym:23%} .cx-menos li:nth-child(2){--xm:30%;--ym:18%} .cx-menos li:nth-child(3){--xm:10%;--ym:31%} .cx-menos li:nth-child(4){--xm:60%;--ym:27%} .cx-menos li:nth-child(5){--xm:34%;--ym:40%} .cx-sw-p{height:2.24em;font-size:clamp(34px,10vw,56px)} .cx-sw-p span{width:100%} .cx-s1{transform:translateY(0)} .cx-s2{transform:translateY(100%)} .cx-sw.on .cx-s1,html:not(.cx-js) .cx-s1{transform:translateY(100%)} .cx-sw.on .cx-s2,html:not(.cx-js) .cx-s2{transform:translateY(0)} .cx-dif-t{font-size:11.6vw} .cx-rd-l{font-size:11vw;white-space:normal} .cx-end-t{font-size:12vw} } @media (prefers-reduced-motion:reduce){ .cx-w,.cx-tag{animation:none} } /* ---------- Móvil: la entrada no ensancha la página (27/9/26) ---------- Mientras las palabras del título se colocan, alguna sale un momento por la derecha. En móvil el navegador ensanchaba la página 16-18 px y la cápsula del menú quedaba descentrada respecto al texto. El recorte horizontal de la entrada lo evita (clip no crea contenedor de scroll: los sticky siguen igual). Vuelta atrás: borrar este bloque. */ .cx-in{overflow-x:clip}