/* Propuesta de Filosofía (4/10/26) — piezas nuevas sobre clearflow.css. Leer antes de tocar.

   Referencia de Jacinto: la página de disciplinas de B-Bruce (filas grandes que se encienden y tarjetas
   que corren). Aquí, con lo nuestro y sin perder lo que ya tenía la página:
   · .cx-key  los tres principios en una línea cada uno, justo después de la entrada.
   · .cx-sbd  capítulo 03, System by Design.
   · .cx-dis  las cuatro disciplinas, en filas grandes.
   · .cx-pr2  los ocho principios en tarjetas que corren solas y se arrastran (assets/js/clearflow-p.js).
   Las filas están apagadas (fg3) y se encienden al pasar por el centro de la pantalla (.on, del JS) o con
   el ratón. Sin JS o con movimiento reducido, todo encendido y quieto. Colores: variables de clearflow.css. */

/* ---------- Así pensamos ---------- */
.cx-key{padding:clamp(80px,12svh,140px) 0 clamp(90px,14svh,160px)}
.cx-key-l{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;border-top:1px solid var(--cx-line)}
.cx-kr a,.cx-dr{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:24px;align-items:baseline;
  padding:clamp(22px,3vw,36px) 0 clamp(24px,3.2vw,40px);border-bottom:1px solid var(--cx-line);text-decoration:none;
  color:var(--cx-fg3);transition:color .6s ease}
.cx-kn,.cx-dn{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(44px,7.2vw,112px);line-height:1;letter-spacing:-.035em}
.cx-kd,.cx-dd{justify-self:end;text-align:right;font-family:var(--f-light);font-weight:300;font-size:clamp(17px,1.6vw,24px);line-height:1.35;max-width:30ch;transition:color .6s ease}
.cx-kr.on a,.cx-kr a:hover,.cx-kr a:focus-visible,.cx-dr.on,.cx-dr:hover,.cx-dr:focus-visible{color:var(--cx-fg)}
.cx-kr a:hover .cx-kd,.cx-kr a:focus-visible .cx-kd,.cx-dr:hover .cx-dd,.cx-dr:focus-visible .cx-dd{color:var(--orange)}
html:not(.cx-js) .cx-kr a,html.cx-quieto .cx-kr a,html:not(.cx-js) .cx-dr,html.cx-quieto .cx-dr{color:var(--cx-fg)}
.cx-key-s{margin:clamp(44px,6vw,84px) 0 0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(26px,2.8vw,44px);line-height:1.2;letter-spacing:-.015em;color:var(--cx-fg);max-width:26ch;text-wrap:balance}

/* ---------- 03 System by Design ---------- */
.cx-sbd{padding:clamp(90px,14svh,160px) 0}
.cx-sbd-t,.cx-dis-t,.cx-pr2-t{margin:clamp(26px,3.6vw,44px) 0 0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:min(8.4vw,124px);line-height:1;letter-spacing:-.03em;color:var(--cx-fg)}
.cx-sbd-t .cx-ln:nth-child(2)>span,.cx-dis-t .cx-ln:nth-child(2)>span,.cx-pr2-t .cx-ln:nth-child(2)>span{transition-delay:.12s}

/* ---------- Lujo: una línea más ---------- */
.cx-mj-x{margin:clamp(18px,2.4vw,28px) 0 0;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:46ch}

/* ---------- Cuatro disciplinas ---------- */
.cx-dis{padding:clamp(90px,14svh,160px) 0}
.cx-dis-h,.cx-pr2-h{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:24px;align-items:end}
.cx-dis-t,.cx-pr2-t{margin:0;font-size:min(7vw,104px)}
.cx-dis-h .cx-pt,.cx-pr2-h .cx-pt{justify-self:end;padding-bottom:.6em}
.cx-dl{display:block;margin-top:clamp(50px,7vw,96px);border-top:1px solid var(--cx-line)}
.cx-dn{font-size:clamp(40px,6.2vw,96px)}

/* ---------- Ocho principios en tarjetas ---------- */
.cx-pr2{padding:clamp(90px,14svh,160px) 0}
.cx-car{--borde:calc((100% - min(90%,var(--maxw))) / 2);margin-top:clamp(48px,6vw,80px);overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none;overscroll-behavior-x:contain}
.cx-car::-webkit-scrollbar{display:none}
.cx-car.arrastra{cursor:grabbing}
.cx-car-t{display:flex;gap:20px;width:max-content;padding:0 var(--borde)}
.cx-c{position:relative;flex:0 0 auto;width:clamp(270px,27vw,400px);aspect-ratio:3 / 4;margin:0;border-radius:6px;overflow:hidden;
  background:#2A2F2D;color:var(--bone);outline:none}
.cx-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
  transition:filter .7s ease,transform 1.2s var(--ease-sheet)}
.cx-c::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(12,14,13,.6),rgba(12,14,13,0) 42%);transition:background .6s ease}
.cx-c-t{position:absolute;z-index:2;left:22px;right:22px;top:20px;margin:0;font-family:var(--f-text);font-weight:400;
  font-size:clamp(20px,1.7vw,25px);line-height:1.15;letter-spacing:-.01em;color:var(--bone)}
.cx-c-p{position:absolute;z-index:2;left:22px;right:22px;bottom:24px;margin:0;font-family:var(--f-light);font-weight:300;
  font-size:clamp(18px,1.55vw,23px);line-height:1.3;color:var(--bone);opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .8s var(--ease-sheet)}
.cx-c:hover img,.cx-c:focus-visible img{filter:blur(16px) brightness(.6);transform:scale(1.08)}
.cx-c:hover::after,.cx-c:focus-visible::after{background:rgba(12,14,13,.16)}
.cx-c:hover .cx-c-p,.cx-c:focus-visible .cx-c-p{opacity:1;transform:none}
.cx-c:focus-visible{box-shadow:0 0 0 2px var(--orange)}
/* Pantallas táctiles: sin ratón, la explicación se ve siempre sobre un velo inferior. */
@media (hover:none){
  .cx-c::after{background:linear-gradient(to bottom,rgba(12,14,13,.6),rgba(12,14,13,0) 40%,rgba(12,14,13,0) 50%,rgba(12,14,13,.7))}
  .cx-c-p{opacity:1;transform:none;font-size:17px}
}

/* ---------- Tableta y móvil ---------- */
@media (max-width:900px){
  .cx-kr a,.cx-dr,.cx-dis-h,.cx-pr2-h{grid-template-columns:minmax(0,1fr)}
  .cx-kd,.cx-dd,.cx-dis-h .cx-pt,.cx-pr2-h .cx-pt{justify-self:start;text-align:left}
  .cx-kd,.cx-dd{margin-top:12px}
  .cx-dis-h .cx-pt,.cx-pr2-h .cx-pt{margin-top:24px;padding-bottom:0}
}
@media (max-width:760px){
  .cx-sbd-t{font-size:11.6vw}
  .cx-dis-t,.cx-pr2-t{font-size:11vw}
  .cx-c{width:78vw}
}

/* ---------- Entrada como manifiesto (4/10/26, noche; ronda 3) ----------
   Jacinto: a pantalla completa, centrada, como un manifiesto; el giro de las palabras le parecía simple: mejor un
   zoom y sin el «&».
   · «Clear Flow» llega desde muy cerca (×7, desenfocada y con las letras abiertas) y se asienta; «Human First», igual,
     medio segundo después. Como una cámara que se aleja hasta encuadrar.
   · Entre las dos, una línea naranja se dibuja desde el centro; debajo, «Dos principios y un sistema» se descifra.
   · El título sigue al ratón con suavidad (--mx, --my) y, al bajar, se desvanece: sube un poco, se desenfoca y se
     funde, sin salirse de su sección (--p de 0 a 1, del JS). Antes crecía y se veía el corte con la sección
     siguiente (Jacinto, 4/10).
   · Movimiento reducido: todo quieto, en su sitio. */
.cx-hx{position:relative;align-items:center;justify-content:center;text-align:center;min-height:100svh;overflow:clip}
.cx-hx-w{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2.6svh,30px);
  padding:calc(24px + 55px + 2svh) 2vw calc(5svh + 30px);box-sizing:border-box;
  transform:translate3d(calc(var(--mx,0) * .5px),calc(var(--my,0) * .5px - var(--p,0) * 9svh),0) scale(calc(1 - var(--p,0) * .07));
  opacity:calc(1 - var(--p,0) * 1.5);filter:blur(calc(var(--p,0) * 14px));transform-origin:50% 46%}
.cx-hx-t{margin:0;font-size:min(19.6vw,30svh);line-height:.86;letter-spacing:-.05em}
.cx-hx-l{display:block;white-space:nowrap}
.cx-hx-a{transform:translate3d(calc(var(--mx,0) * -.7px),0,0)}
.cx-hx-b{transform:translate3d(calc(var(--mx,0) * .7px),0,0)}
.cx-z{display:inline-block;animation:cx-zoom 2.1s cubic-bezier(.16,1,.3,1) .25s both;will-change:transform,filter}
.cx-hx-b .cx-z{animation-delay:.75s}
@keyframes cx-zoom{
  0%{opacity:0;transform:scale(7);filter:blur(24px);letter-spacing:.35em}
  35%{opacity:1}
  100%{opacity:1;transform:scale(1);filter:blur(0);letter-spacing:-.05em}}
.cx-hx-r{display:block;width:min(40vw,560px);height:1.5px;background:var(--orange);transform:scaleX(0);transform-origin:50% 50%;
  animation:cx-traza 1.2s cubic-bezier(.65,0,.35,1) 1.9s forwards;margin:clamp(6px,1.4svh,16px) auto}
@keyframes cx-traza{to{transform:scaleX(1)}}
.cx-hx-g{animation:cx-aparece .7s ease 2.5s both}
.cx-hx-baja{position:absolute;left:50%;bottom:3svh;width:1px;height:46px;margin-left:-.5px;background:var(--cx-line);overflow:hidden;
  opacity:calc(1 - var(--p,0) * 4)}
.cx-hx-baja::after{content:'';position:absolute;left:0;right:0;top:-46px;height:46px;background:var(--cx-fg);animation:cx-baja 2.2s cubic-bezier(.65,0,.35,1) 3.2s infinite}
@keyframes cx-baja{to{transform:translateY(92px)}}
@media (max-width:760px){
  .cx-hx-t{font-size:min(29vw,14svh);line-height:.9}
  .cx-hx-t>.cx-hx-l{white-space:normal}
  .cx-hx-t .cx-z{max-width:min-content}
  @keyframes cx-zoom{
    0%{opacity:0;transform:scale(4);filter:blur(16px);letter-spacing:.25em}
    35%{opacity:1}
    100%{opacity:1;transform:scale(1);filter:blur(0);letter-spacing:-.05em}}
}
@media (prefers-reduced-motion:reduce){
  .cx-z,.cx-hx-g,.cx-hx-baja::after{animation:none}
  .cx-hx-r{animation:none;transform:none}
  .cx-hx-w{transform:none;opacity:1;filter:none}
}
html.cx-quieto .cx-hx-r{animation:none;transform:none}
html.cx-quieto .cx-z{animation:none}

/* ---------- Así pensamos, centrado (manifiesto) ---------- */
.cx-p2 .cx-key{text-align:center}
.cx-p2 .cx-key .cx-k{justify-content:center}
.cx-p2 .cx-key-l{border-top:0;margin-top:clamp(36px,5vw,64px)}
.cx-p2 .cx-kr a{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.4vw,18px);border-bottom:0;padding:clamp(26px,3.6vw,46px) 0}
.cx-p2 .cx-kn{font-size:clamp(52px,9vw,148px)}
.cx-p2 .cx-kd{justify-self:auto;text-align:center;max-width:none;transform:translateY(10px);opacity:.0;transition:color .6s ease,opacity .7s ease,transform .9s var(--ease-sheet)}
.cx-p2 .cx-kr.on .cx-kd,.cx-p2 .cx-kr a:hover .cx-kd,.cx-p2 .cx-kr a:focus-visible .cx-kd{opacity:1;transform:none}
html:not(.cx-js) .cx-p2 .cx-kd,html.cx-quieto .cx-p2 .cx-kd{opacity:1;transform:none}
.cx-p2 .cx-key-s{margin-left:auto;margin-right:auto}