/* Quiénes somos · cambio de color (26/9/26) — leer antes de tocar. La página abre limpia (el logotipo grande sobre naranja y una sola línea) y, en cuanto se empieza a bajar, cambia de color TODA la página, no una franja: naranja → arena → tinta, los colores de la casa. Después entra en materia por capítulos. · El color vive en el : clases qx-naranja, qx-arena y qx-tinta, que pone assets/js/quienes.js. Se transmite con variables registradas (@property): fondo, texto y filetes se funden a la vez en 0,7 s. Las secciones no llevan fondo propio. · Cuándo cambia: arriba del todo, naranja; al bajar unos píxeles, arena; cuando la foto de Miquel y Jacinto cruza el 60 % de la pantalla, tinta, que sigue en la cita de Jacinto y enlaza sin corte con el pie. · Sin JavaScript, cada sección pinta su propio fondo (mismos colores, con cortes rectos). Con movimiento reducido, el cambio es instantáneo. · Sobre naranja y arena, los rótulos pequeños van en tinta: el naranja sobre arena no llega al contraste mínimo para texto pequeño. · Retícula: todo dentro de .wrap, la medida del menú. La entrada, el manifiesto y la cita van centrados, como composición. · Letra grande en Neue Haas Display 25 XThin (UltraLight, peso 200). */ @font-face{font-family:'nh-ultralight';src:url('../fonts/Nh-25xthin.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap} @property --qx-bg{syntax:'';inherits:true;initial-value:#1F2322} @property --qx-fg{syntax:'';inherits:true;initial-value:#F6F5F3} @property --qx-fg2{syntax:'';inherits:true;initial-value:rgba(246,245,243,.72)} @property --qx-fg3{syntax:'';inherits:true;initial-value:rgba(246,245,243,.5)} @property --qx-line{syntax:'';inherits:true;initial-value:rgba(246,245,243,.12)} @property --qx-acc{syntax:'';inherits:true;initial-value:#FF4D00} /* ---------- Los tres estados de color ---------- */ body.qx-naranja,html:not(.qx-js) [data-qx=naranja]{--qx-bg:var(--orange);--qx-fg:var(--ink);--qx-fg2:rgba(31,35,34,.84);--qx-fg3:rgba(31,35,34,.62);--qx-line:rgba(31,35,34,.24);--qx-acc:var(--ink)} body.qx-arena,html:not(.qx-js) [data-qx=arena]{--qx-bg:var(--sand);--qx-fg:var(--ink);--qx-fg2:rgba(31,35,34,.8);--qx-fg3:rgba(31,35,34,.56);--qx-line:rgba(31,35,34,.16);--qx-acc:var(--ink)} body.qx-tinta,html:not(.qx-js) [data-qx=tinta]{--qx-bg:var(--ink);--qx-fg:var(--bone);--qx-fg2:rgba(246,245,243,.76);--qx-fg3:rgba(246,245,243,.5);--qx-line:rgba(246,245,243,.12);--qx-acc:var(--orange)} body.qx{background-color:var(--qx-bg);color:var(--qx-fg); transition:--qx-bg .7s ease-in-out,--qx-fg .7s ease-in-out,--qx-fg2 .7s ease-in-out,--qx-fg3 .7s ease-in-out,--qx-line .7s ease-in-out,--qx-acc .7s ease-in-out} body.qx.qx-sin{transition:none} html:not(.qx-js) [data-qx]{background-color:var(--qx-bg);color:var(--qx-fg)} body.qx .ma-foot{color:var(--bone)} /* Enlaces de la página: toman el color del estado; el naranja queda para el hover. */ body.qx main .lk{color:var(--qx-fg);border-bottom-color:var(--qx-line)} body.qx main .lk:hover{color:var(--qx-fg);border-bottom-color:var(--orange)} /* ---------- Entrada: logotipo grande y una línea ---------- */ .qx-in{min-height:100svh;display:flex} .qx-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)} .qx-wm{overflow:hidden} .qx-wm svg{display:block;width:100%;height:auto;fill:currentColor;animation:qx-sube 1.25s cubic-bezier(.2,.7,.2,1) .28s both} @keyframes qx-sube{from{transform:translateY(104%)}} .qx-tag{text-align:center;font-family:var(--f-label);font-size:13px;letter-spacing:.18em;text-transform:uppercase;line-height:1.75;color:var(--qx-fg);animation:qx-aparece .9s ease .75s both} @keyframes qx-aparece{from{opacity:0}} /* ---------- Manifiesto: una frase, con aire ---------- */ .qx-man{min-height:100svh;display:flex;align-items:center;padding:clamp(110px,16svh,180px) 0} .qx-man .wrap{text-align:center} .qx-t{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:min(6.2vw,96px);line-height:1.05;letter-spacing:-.02em;color:var(--qx-fg)} .qx-t span{display:block} /* ---------- Capítulos: foto del estudio fija, texto que avanza ---------- */ .qx-ch{padding-bottom:clamp(40px,8svh,100px)} .qx-ch-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,7vw,110px)} .qx-media{position:relative} .qx-stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(24px + 55px + 18px) 0 26px} .qx-frame{position:relative;margin:0;width:100%;aspect-ratio:4/3;max-height:calc(100svh - 165px);border-radius:18px;overflow:hidden;background:rgba(31,35,34,.06);transform:translateZ(0)} .qx-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)} .qx-frame img.on{opacity:1;transform:none} .qx-cap{margin-top:14px;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--qx-fg3)} .qx-c{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:14svh 0} .qx-c-m{display:none} .qx-k{display:flex;gap:16px;font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--qx-acc);margin-bottom:clamp(18px,2.4vw,28px)} .qx-h{font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(36px,3.9vw,60px);line-height:1.04;letter-spacing:-.02em;color:var(--qx-fg);text-wrap:balance} .qx-h[data-rv]{transition-delay:.06s} .qx-b{margin-top:clamp(20px,2.6vw,32px)} .qx-b[data-rv]{transition-delay:.12s} .qx-p{font-family:var(--f-light);font-weight:300;font-size:clamp(16px,1.25vw,18px);line-height:1.62;color:var(--qx-fg2);max-width:46ch} .qx-p+.qx-p{margin-top:14px} .qx-dl div{border-top:1px solid var(--qx-line);padding:16px 0 18px} .qx-dl dt{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--qx-fg)} .qx-dl dd{margin-top:8px;font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--qx-fg2)} .qx-b .lk{margin-top:18px} /* ---------- Jacinto: la cita cierra la página, ya en tinta ---------- */ .qx-dir{padding:clamp(120px,22svh,230px) 0 clamp(100px,16svh,170px);text-align:center} .qx-q{margin:0} .qx-q p{max-width:24ch;margin:0 auto;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(28px,3.4vw,52px);line-height:1.2;letter-spacing:-.015em;color:var(--qx-fg);text-wrap:balance} .qx-sig{margin-top:clamp(36px,5vw,56px);font-family:var(--f-label);font-weight:500;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;color:var(--qx-fg)} .qx-role{margin-top:8px;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--qx-fg3)} .qx-go{margin-top:clamp(22px,3vw,34px)} /* ---------- Tableta y móvil: la foto va dentro de cada capítulo ---------- */ @media (max-width:960px){ .qx-ch-g{display:block} .qx-media{display:none} .qx-c{min-height:0;padding:clamp(56px,13vw,96px) 0 0} .qx-c-m{display:block;margin:0 0 clamp(24px,5vw,36px);border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:rgba(31,35,34,.06)} .qx-c-m img{width:100%;height:100%;object-fit:cover} .qx-t{font-size:7.4vw} .qx-h{font-size:clamp(32px,5.6vw,46px)} } @media (max-width:900px){ .qx-in-w{padding-top:calc(16px + 55px + clamp(18px,4svh,36px))} } @media (max-width:760px){ .qx-t{font-size:10.2vw} .qx-tag{font-size:11.5px} } @media (prefers-reduced-motion:reduce){ .qx-wm svg,.qx-tag{animation:none} .qx-frame img{transition:none} } /* ---------- Miquel y Jacinto (27/9/26) ---------- Petición de Jacinto: la foto de Miquel y suya, como en la web actual (foto y texto, lado a lado) pero con el lenguaje nuevo. La página pasa a tinta cuando la sección cruza el 60 % de la pantalla (su data-qx), y la foto, en blanco y negro, se abre al entrar: recorte que se abre y zoom que se asienta, como las imágenes de Metodología. Sin JavaScript o con movimiento reducido, la foto entera y quieta. Textos: los de la web actual (bloque «Miquel & Jacinto» y la primera frase de «Una nota personal»; la segunda ya es la cita que cierra la página). */ .qx-mj{padding:clamp(100px,18svh,190px) 0 clamp(10px,4svh,50px)} .qx-mj-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(40px,7vw,110px);align-items:center} .qx-mj-f{position:relative;margin:0;aspect-ratio:4/5;max-height:calc(100svh - 150px);border-radius:18px;overflow:hidden;background:rgba(246,245,243,.06);transform:translateZ(0)} .qx-mj-f img{width:100%;height:100%;object-fit:cover;object-position:50% 72%} .qx-mj-f[data-rv]{opacity:1;transform:translateZ(0);transition:clip-path 1.6s cubic-bezier(.2,.7,.2,1)} html.qx-js .qx-mj-f[data-rv]:not(.in){clip-path:inset(14% 0 14% 0 round 18px)} html.qx-js .qx-mj-f[data-rv] img{transform:scale(1.16);transition:transform 1.9s cubic-bezier(.2,.7,.2,1)} html.qx-js .qx-mj-f[data-rv].in img,html.norv .qx-mj-f img{transform:none} html.norv .qx-mj-f[data-rv]{clip-path:none} .qx-mj-t{margin:0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(40px,4.6vw,76px);line-height:1.02;letter-spacing:-.025em;color:var(--qx-fg);text-wrap:balance} .qx-mj-t[data-rv]{transition-delay:.06s} .qx-mj .qx-b{margin-top:clamp(22px,3vw,36px)} .qx-mj .qx-p{max-width:44ch} @media (max-width:960px){ .qx-mj-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(30px,7vw,48px)} .qx-mj-f{max-height:none;border-radius:14px} html.qx-js .qx-mj-f[data-rv]:not(.in){clip-path:inset(10% 0 10% 0 round 14px)} } @media (prefers-reduced-motion:reduce){ .qx-mj-f[data-rv],html.qx-js .qx-mj-f[data-rv]:not(.in){clip-path:none;transition:none} html.qx-js .qx-mj-f[data-rv] img{transform:none;transition:none} }