/* Julian Juillerat · sistema Cerrado (V3)
   Claro, General Sans, sin acento: el color entra solo por las fotos y las pantallas de los casos.
   Medidas de referencia: tableros del lienzo «Portfolio V2 · Cerrado» a 1440 y 390. */

:root {
  --bg: #FAFAFA;
  --ink: #1C1C1C;
  --title: #1C1C1C;
  --muted: #696969;
  --faint: #A3A3A3;
  --line: #E4E4E4;
  --card: #EFEFEF;
  --card-hover: #EAEAEA;
  --btn2: #EDEDED;
  --btn2-edge: #D4D4D4;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: 40px;
  --font: 'General Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
@media (max-width: 759px) { :root { --gutter: 20px; } }
/* Por encima de 1680 el contenido se queda a 1600 y se centra */
.hd, .ft, .hero, .work, .idx, .val, .mo > .lbl, .mo-nav, .mo-band, .nf { padding-left: max(var(--gutter), calc((100% - 1600px) / 2)); padding-right: max(var(--gutter), calc((100% - 1600px) / 2)); }
.hero { max-width: none; }
.hero h1 { max-width: 920px; font: inherit; letter-spacing: inherit; }
.case-pg { max-width: 1680px; margin-inline: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Cabecera ───────────────────────────────────────────── */
.hd { position: sticky; top: 0; z-index: 20; background: var(--bg); transition: box-shadow .2s; height: 84px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; color: var(--muted); }
/* Fija y opaca: el menú no baja de 4,5:1 sobre las fotos; con scroll, un filete la separa del contenido */
.hd.sc { box-shadow: 0 1px 0 var(--line); }
#work, #experience { scroll-margin-top: 96px; }
.hd-brand { display: block; width: 104px; transition: opacity .25s; }
.hd-brand:hover { opacity: .6; }
.hd-brand img { width: 100%; height: auto; }
.hd-nav { display: flex; gap: 32px; align-items: center; }
.hd-nav a { text-decoration: none; transition: color .2s; }
.hd-nav a:hover, .hd-nav a[aria-current] { color: var(--ink); }
.hd-nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.hd-clock { font-weight: 400; font-variant-numeric: tabular-nums; }
.hd-menu { display: none; align-items: center; gap: 6px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.hd-menu i { display: grid; gap: 4px; }
.hd-menu i::before, .hd-menu i::after { content: ''; display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .25s; }
.menu-open .hd-menu i::before { transform: translateY(2.75px) rotate(45deg); }
.menu-open .hd-menu i::after { transform: translateY(-2.75px) rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 15; background: var(--bg); padding: 96px var(--gutter) 40px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.menu-open .mnav { opacity: 1; visibility: visible; transition: opacity .25s; }
.mnav nav { display: grid; gap: 6px; }
.mnav nav a { font-size: 40px; line-height: 1.15; font-weight: 500; letter-spacing: -0.035em; text-decoration: none; }
.mnav nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.mnav-foot { font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; }
.mnav-foot a { text-decoration: none; }
.menu-open { overflow: hidden; }
@media (max-width: 759px) {
  .hd { height: 64px; }
  .hd-brand { width: 88px; }
  .hd-nav { display: none; }
  .hd-menu { display: inline-flex; }
}

/* ── Botones: tinta (principal) y niebla (secundario) ────── */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border: 0; border-radius: 8px; font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), color .3s .08s, text-shadow .3s; }
.btn:active { transform: scale(.97); }
.btn-ink { background: var(--ink); color: var(--bg); box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.12); }
.btn-fog { background: var(--btn2); color: var(--ink); box-shadow: inset 0 -1px 0 var(--btn2-edge); }
/* Al pasar, el fondo cambia un punto: la tinta se aclara y la niebla se oscurece */
.btn { transition: transform .18s var(--ease), background-color .2s ease-out; }
@media (hover: hover) {
  .btn-ink:hover { background: #333; }
  .btn-fog:hover { background: #E4E4E4; }
}

/* ── Estado de un caso ──────────────────────────────────── */
.st { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.st-dot.req { border: 1.5px dashed #8A8A86; background: none; }
.st u { text-underline-offset: 3px; }

/* ── Pie: la firma con Marble Canyon ────────────────────── */
.ft { position: relative; border-top: 1px solid var(--line); padding-top: 110px; padding-bottom: 36px; overflow: hidden; }
.ft-h { max-width: 680px; font-size: 60px; line-height: 1.03; font-weight: 500; letter-spacing: -0.045em; }
.ft-cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ft-mail { font-size: 18px; margin-right: 8px; text-decoration: none; }
.ft-sig { margin-top: 95px; }
.ft-sig img { width: 100%; height: auto; clip-path: inset(0 100% 0 0); }
.ft-sig.in img { animation: sig-write 1.6s cubic-bezier(.45,.05,.35,1) forwards; }
@keyframes sig-write { to { clip-path: inset(0 0 0 0); } }
.ft-bar { margin-top: 52px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; font-size: 13px; color: var(--muted); }
.ft-bar nav { display: flex; gap: 24px; }
.ft-bar nav a { color: var(--ink); text-decoration: none; }
.ft-bar nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; transform: translate(-50%, 12px); padding: 10px 16px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 759px) {
  .ft { padding-top: 56px; padding-bottom: 24px; }
  .ft-h { font-size: 34px; line-height: 1.06; letter-spacing: -0.04em; }
  .ft-cta { margin-top: 32px; gap: 10px; }
  .ft-mail { flex-basis: 100%; font-size: 16px; margin: 0 0 6px; }
  .ft-sig { margin-top: 72px; }
  .ft-bar { margin-top: 40px; font-size: 12px; align-items: center; }
  .ft-bar nav { gap: 8px; margin-right: -6px; }
  .ft-bar nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-sig img { clip-path: none; }
  .ft-sig.in img { animation: none; }
}

/* ── Loader: la J con Marble Canyon vuela a la firma ─────── */
.ld { display: none; position: fixed; inset: 0; z-index: 50; background: var(--bg); }
.has-ld .ld { display: block; }
.ld-j { position: absolute; left: 50%; top: 50%; width: min(491px, 62vw); aspect-ratio: 490.8 / 467.5; transform-origin: 0 0; }
.ld-j img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-j .night { opacity: 0; }
.has-ld .hd-brand { opacity: 0; }

/* ── Home ───────────────────────────────────────────────── */
.hero { padding-top: 88px; font-size: 44px; line-height: 1.14; font-weight: 500; letter-spacing: -0.03em; }
/* Apertura: una frase a la izquierda, en dos tonos, y los casos justo debajo */
.hero h1 { max-width: 940px; margin: 0; color: var(--ink); text-wrap: balance; }
.hero h1 span { color: var(--muted); }
/* Entrada: en la primera visita de la sesión, «Hi, I'm Julian. Welcome.» centrado sobre el fondo; a los 1,2 s se
   desvanece y la home sube en su sitio. Solo CSS: sin JS termina igual. Con movimiento reducido o entrando por un
   ancla no aparece (la cabecera no pone hero-intro) */
.hello { display: none; }
.hero-intro .hello { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--bg); pointer-events: none; animation: hello-out .35s ease-in 1.2s both; }
.hello p { margin: 0; padding: 0 var(--gutter); font-size: 44px; line-height: 1.14; font-weight: 500; letter-spacing: -0.03em; text-align: center; color: var(--ink); animation: hello-in .45s cubic-bezier(.2,.7,.2,1) both, hello-up .3s ease-in 1.1s forwards; }
.hero-intro .hero, .hero-intro .work { animation: hello-rise .7s cubic-bezier(.2,.7,.2,1) 1.25s both; }
@keyframes hello-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes hello-up { to { opacity: 0; transform: translateY(-8px); } }
@keyframes hello-out { to { opacity: 0; visibility: hidden; } }
@keyframes hello-rise { from { opacity: 0; transform: translateY(16px); } }
/* Pie a partir de 1200: titular en dos líneas a la izquierda; correo y botones a la derecha, alineados con su última línea */
@media (min-width: 1200px) {
  .ft { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: end; }
  .ft-h { grid-column: 1; max-width: 960px; }
  .ft-cta { grid-column: 2; margin-top: 0; justify-content: flex-end; padding-bottom: 6px; }
  .ft-mail { flex-basis: 100%; margin: 0 0 4px; text-align: right; }
  .ft-sig, .ft-bar { grid-column: 1 / -1; }
}
/* 404: rótulo, titular al tamaño del hero, una línea y la vuelta a la home */
.nf { padding-top: 120px; padding-bottom: 150px; font-size: 44px; line-height: 1.14; font-weight: 500; letter-spacing: -0.03em; }
.nf > .lbl { margin-bottom: 20px; letter-spacing: 0; }
.nf h1 { font: inherit; letter-spacing: inherit; max-width: 760px; }
.nf p { margin-top: 18px; max-width: 46ch; font-size: 16px; font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--muted); }
.nf .btn { margin-top: 32px; letter-spacing: 0; }
@media (max-width: 759px) { .nf { padding-top: 64px; padding-bottom: 96px; font-size: 30px; } }
/* Cómo trabajo: seis valores en tres columnas */
.val { padding-top: 117px; }
.val > .lbl { margin-bottom: 14px; }
.val-h { font-size: 32px; line-height: 1.15; font-weight: 500; letter-spacing: -0.03em; }
.val ol { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.val li { padding: 20px 0 44px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.val li .m { color: var(--muted); font-size: 13px; }
.val h3 { margin-top: 14px; font-size: 20px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; }
.val li p { margin-top: 10px; color: var(--muted); max-width: 44ch; }
.lbl { font-size: 14px; font-weight: 500; }
.work { padding-top: 80px; }
.work > .lbl { margin-bottom: 22px; }

/* Bento: tres tarjetas iguales con un elemento por caso y, debajo, la banca en tres tarjetas finas */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.bento-bank { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.case { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.cv { position: relative; container-type: inline-size; overflow: hidden; border-radius: 20px; background: var(--card); aspect-ratio: var(--ar); transition: background-color .4s var(--ease); }
.cv-txt { position: absolute; z-index: 1; left: var(--pl); top: var(--pt); display: flex; flex-direction: column; gap: var(--tg); }
.cv-logo { height: var(--lb); display: flex; align-items: center; }
.cv-logo > * { height: var(--lh); width: auto; color: var(--ink); }
.cv-t { max-width: var(--tmax); font-size: var(--ts); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: var(--title); }
.cv-t .nw { white-space: nowrap; }
.cv-a { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.cv-a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Hover: la tarjeta se oscurece un punto */
@media (hover: hover) {
  .case:hover .cv { background: var(--card-hover); }
  .case.lk:hover .cap b { text-decoration: underline; text-underline-offset: 4px; }
}
/* Entrada al hacer scroll */
.js .case.rv { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .case.rv.in { opacity: 1; transform: none; }
.cap a { text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .js .case.rv { opacity: 1; transform: none; } }
.cap { margin-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-size: 15px; line-height: 1.4; }
.cap b { font-weight: 500; }

/* Medidas de cada tarjeta en unidades del contenedor (cqw = 1 % del ancho de la tarjeta) */
.k-vg, .k-sf, .k-fc { --ar: 437 / 546; --pl: 8.23cqw; --pt: 8.23cqw; --tg: 4.57cqw; --lb: 6.4cqw; --ts: 5.95cqw; --tmax: 84cqw;
        --ex: 50%; --ey: 64.4%; --hw: 31.1cqw; --sf: 12.8cqw; --cw: 43.45cqw; }
.k-vg { --lh: 5.03cqw; } .k-sf { --lh: 5.95cqw; } .k-fc { --lh: 4.34cqw; }
.k-cj, .k-sb, .k-on { --ar: 437 / 220; --pl: 8.23cqw; --pt: 8.23cqw; --tg: 4.57cqw; --lb: 6.4cqw; --ts: 5.95cqw; --tmax: 86cqw; }
.k-cj { --lh: 4.8cqw; } .k-sb { --lh: 5.95cqw; } .k-on { --lh: 5.2cqw; }

/* El elemento de cada caso: centrado bajo el titular; con puntero se inclina hacia él (site.js) */
.el { position: absolute; left: var(--ex); top: var(--ey); transform: translate(-50%, -50%); perspective: 900px; pointer-events: none; }
.el-t { transform: rotateX(var(--cy, 0deg)) rotateY(var(--cx, 0deg)); transition: transform .38s var(--ease); }
/* VivaGym: el corazón de la marca late solo; al pasar, sube, late y aparece «Ya eres socio», el final del alta */
.vgm { width: var(--hw); aspect-ratio: 1; }
.vgm-u, .vgm .el-t, .vgm-i { width: 100%; height: 100%; }
.vgm-u { transition: transform .52s cubic-bezier(.22, 1, .36, 1); }
.vgm-i { animation: vg-idle 3.2s ease-out .6s infinite both; }
.vgm-i svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3.66cqw 4.1cqw rgba(253, 80, 0, .22)); }
.vgm-h { position: absolute; left: 50%; top: calc(50% + var(--hw) * .441); width: calc(var(--hw) * 1.25); max-width: none; height: auto; transform: translate(-50%, 10px); opacity: 0; transition: opacity .38s cubic-bezier(.22, 1, .36, 1), transform .52s cubic-bezier(.22, 1, .36, 1); }
.k-vg.on .vgm-u { transform: translateY(calc(var(--hw) * -.162)); }
.k-vg.on .vgm-h { opacity: 1; transform: translate(-50%, 0); transition-delay: .12s; }
.vgm-i.beat-a { animation: vg-beat-a .76s ease-out; } .vgm-i.beat-b { animation: vg-beat-b .76s ease-out; }
@keyframes vg-idle { 0% { transform: scale(1); } 5% { transform: scale(1.045); } 10% { transform: scale(1); } 15% { transform: scale(1.03); } 22%, 100% { transform: scale(1); } }
@keyframes vg-beat-a { 0% { transform: scale(1); } 22% { transform: scale(1.1); } 44% { transform: scale(.98); } 66% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes vg-beat-b { 0% { transform: scale(1); } 22% { transform: scale(1.1); } 44% { transform: scale(.98); } 66% { transform: scale(1.05); } 100% { transform: scale(1); } }
/* Safe Intelligence: el logo de Spec27; al pasar, los cuatro puntos se barajan como en el login y el nombre se reescribe */
.s27 { font-size: var(--sf); }
.s27-t { display: flex; align-items: center; height: 1.333em; }
.s27-d { position: relative; flex: none; width: .76em; height: .76em; }
.s27-d i { position: absolute; width: .3em; height: .3em; border-radius: 50%; background: #B476FE; }
.s27-d i:nth-child(1) { left: 0; top: 0; } .s27-d i:nth-child(2) { left: .46em; top: 0; } .s27-d i:nth-child(3) { left: 0; top: .46em; } .s27-d i:nth-child(4) { left: .46em; top: .46em; }
.s27-w { position: relative; margin-left: .3em; font: 600 1em/1 'IBM Plex Sans', var(--font); letter-spacing: -.03em; color: #16192A; white-space: pre; }
.s27-w .g { visibility: hidden; }
.s27-w .tx { position: absolute; left: 0; top: 0; }
.s27-w .tx::after { content: ""; display: inline-block; width: .055em; height: .94em; margin-left: .05em; vertical-align: -.17em; border-radius: 1px; background: #B476FE; animation: s27-caret 1.05s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes s27-caret { 0%, 42% { opacity: 1; } 58%, 88% { opacity: 0; } 100% { opacity: 1; } }
.s27-d.sh-a i, .s27-d.sh-b i { animation-duration: 1.7s; animation-timing-function: cubic-bezier(.66, 0, .34, 1); }
.s27-d.sh-a i:nth-child(1) { animation-name: s27-a1; } .s27-d.sh-a i:nth-child(2) { animation-name: s27-a2; } .s27-d.sh-a i:nth-child(3) { animation-name: s27-a3; } .s27-d.sh-a i:nth-child(4) { animation-name: s27-a4; }
.s27-d.sh-b i:nth-child(1) { animation-name: s27-b1; } .s27-d.sh-b i:nth-child(2) { animation-name: s27-b2; } .s27-d.sh-b i:nth-child(3) { animation-name: s27-b3; } .s27-d.sh-b i:nth-child(4) { animation-name: s27-b4; }
@keyframes s27-a1 { 0% { transform: none; } 28%, 33% { transform: translate(.46em, .46em); } 61%, 66% { transform: translate(0, .46em); } 94%, 100% { transform: translate(.46em, 0); } }
@keyframes s27-a2 { 0%, 33% { transform: none; } 61%, 100% { transform: translate(0, .46em); } }
@keyframes s27-a3 { 0%, 33% { transform: none; } 61%, 100% { transform: translate(0, -.46em); } }
@keyframes s27-a4 { 0% { transform: none; } 28%, 33% { transform: translate(-.46em, -.46em); } 61%, 66% { transform: translate(0, -.46em); } 94%, 100% { transform: translate(-.46em, 0); } }
@keyframes s27-b1 { 0% { transform: none; } 28%, 33% { transform: translate(.46em, .46em); } 61%, 66% { transform: translate(0, .46em); } 94%, 100% { transform: translate(.46em, 0); } }
@keyframes s27-b2 { 0%, 33% { transform: none; } 61%, 100% { transform: translate(0, .46em); } }
@keyframes s27-b3 { 0%, 33% { transform: none; } 61%, 100% { transform: translate(0, -.46em); } }
@keyframes s27-b4 { 0% { transform: none; } 28%, 33% { transform: translate(-.46em, -.46em); } 61%, 66% { transform: translate(0, -.46em); } 94%, 100% { transform: translate(-.46em, 0); } }
/* Fourteen: la moneda del concepto Artefact. Se balancea sola y, con puntero, se inclina hacia él con un brillo que la recorre */
.coin { width: var(--cw); aspect-ratio: 1; }
.coin-t { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 2.3cqw 2.3cqw rgba(0,0,0,.28)); }
.coin-t img { display: block; width: 100%; height: 100%; }
.coin-g { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(img/fc-coin.webp) center / contain no-repeat; mask: url(img/fc-coin.webp) center / contain no-repeat; mix-blend-mode: overlay; background: linear-gradient(105deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 68%); background-size: 300% 100%; background-position: var(--gp, 50%) 0; opacity: var(--go, 0); }
.k-fc:not(.tilt) .coin-t { animation: coin-sway 6s ease-in-out infinite; }
.k-fc:not(.tilt) .coin-g { opacity: .55; animation: coin-sweep 6s ease-in-out infinite alternate; }
.k-fc.in .coin img { animation: coin-strike 1.2s .3s both; }
@keyframes coin-sway { 0%, 100% { transform: rotateX(4deg) rotateY(-14deg); } 50% { transform: rotateX(-3deg) rotateY(14deg); } }
@keyframes coin-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes coin-strike { 0% { opacity: 0; transform: scale(1.07); filter: brightness(2.2) blur(2px); } 14% { opacity: 1; transform: scale(.988); filter: brightness(1.5) blur(0); } 30% { transform: scale(1.004); filter: brightness(1.1); } 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .vgm-i, .s27-w .tx::after, .k-fc .coin-t, .k-fc .coin-g, .k-fc.in .coin img { animation: none; }
  .el-t, .vgm-u, .vgm-h { transition: none; }
}

/* Moments: el trabajo primero y luego los otros entornos donde también gestiono y aprendo.
   La banda se desliza: con el dedo, el trackpad, arrastrando con el ratón o desde el índice (site.js); el entorno del centro se ve entero */
.mo { padding-top: 117px; }
.mo > .lbl { margin-bottom: 18px; }
.mo-nav { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 32px; }
.mo-nav button { appearance: none; display: inline-flex; gap: 8px; padding: 0; border: 0; background: none; font: 500 15px/1.4 var(--font); color: var(--ink); opacity: .6; cursor: pointer; transition: opacity .3s var(--ease); }
.mo-nav button[aria-current], .mo-nav button:focus-visible { opacity: 1; }
@media (hover: hover) { .mo-nav button:hover { opacity: 1; } }
.mo-band { position: relative; display: flex; gap: 120px; overflow-x: auto; cursor: grab; scrollbar-width: none; overscroll-behavior-x: contain; }
.mo-band::-webkit-scrollbar { display: none; }
.mo-band.drag { cursor: grabbing; user-select: none; }
.mo-band img { -webkit-user-drag: none; }
.mo-band:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.mo-ch { flex: none; border-top: 1px solid var(--line); padding-top: 16px; opacity: .4; transition: opacity .5s cubic-bezier(.22, 1, .36, 1); }
.mo-ch.on { opacity: 1; }
.mo-ch h3 { font-size: 15px; line-height: 1.45; font-weight: 500; }
.mo-ch p { font-size: 15px; line-height: 1.45; color: var(--muted); }
.mo-ph { display: flex; gap: 16px; margin-top: 36px; }
.mo-ph img { display: block; height: 300px; width: auto; border-radius: 12px; }
@media (max-width: 759px) {
  .mo { padding-top: 72px; }
  .mo-nav { gap: 8px 20px; margin-bottom: 24px; font-size: 14px; }
  .mo-band { gap: 56px; }
  .mo-ph { gap: 10px; margin-top: 24px; }
  .mo-ph img { height: 220px; border-radius: 10px; }
  .mo-ch p { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) { .mo-ch, .mo-nav button { transition: none; } }

/* Índice tipo CV */
.idx { padding-top: 117px; }
.idx > .lbl { margin-bottom: 24px; }
.idx-row { display: grid; grid-template-columns: 200px 260px 260px 1fr; gap: 24px; padding: 22px 0 40px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.idx-row .m { color: var(--muted); }
.idx-row b { font-weight: 500; }
.idx-row p { max-width: 52ch; }
.home .ft { margin-top: 60px; }

@media (max-width: 1199px) {
  .hero { font-size: 38px; }
  .idx-row { grid-template-columns: 160px minmax(0, 1fr); gap: 4px 24px; }
  .idx-row > * { grid-column: 2; }
  .idx-row > .d { grid-column: 1; grid-row: 1 / span 3; }
  .idx-row p { margin-top: 8px; }
}
/* Tableta: la banca a una columna para que los titulares no queden diminutos */
/* Tableta: una tarjeta por fila con las proporciones apaisadas del escritorio;
   VivaGym pasa a apaisada con el móvil a la derecha, cortado por abajo como en el escritorio */
@media (min-width: 760px) and (max-width: 1023px) {
  .val ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento, .bento-bank { grid-template-columns: 1fr; row-gap: 40px; }
  .bento-bank { grid-column: auto; }
  .k-vg, .k-sf, .k-fc { --ar: 776 / 420; --pl: 5.67cqw; --pt: 6.19cqw; --tg: 3.09cqw; --lb: 3.61cqw; --ts: 4.6cqw; --tmax: 46cqw;
          --ex: 76%; --ey: 52%; --hw: 17cqw; --sf: 7cqw; --cw: 24cqw; }
  .k-vg { --lh: 2.84cqw; } .k-sf { --lh: 3.35cqw; } .k-fc { --lh: 2.45cqw; }
  .k-cj, .k-sb, .k-on { --ar: 776 / 230; --pl: 5.67cqw; --pt: 5.67cqw; --tg: 3.09cqw; --lb: 3.61cqw; --ts: 4.6cqw; --tmax: 60cqw; }
  .k-cj { --lh: 2.7cqw; } .k-sb { --lh: 3.35cqw; } .k-on { --lh: 2.9cqw; }
}
@media (max-width: 759px) {
  .hero { padding-top: 40px; font-size: 30px; }
  .hello p { font-size: 30px; }
  #work, #experience { scroll-margin-top: 76px; }
  .val { padding-top: 72px; }
  .val-h { font-size: 26px; }
  .val ol { grid-template-columns: 1fr; margin-top: 28px; }
  .val li { padding-bottom: 32px; }
  .work { padding-top: 45px; }
  .work > .lbl { margin-bottom: 18px; }
  .bento, .bento-bank { grid-template-columns: 1fr; row-gap: 48px; }
  .bento-bank { grid-column: auto; }
  .cv { border-radius: 16px; }
  .cap { flex-direction: column; align-items: flex-start; gap: 8px; }
  .k-vg, .k-sf, .k-fc, .k-cj, .k-sb, .k-on { --pl: 8cqw; --pt: 9.143cqw; --tg: 4.571cqw; --lb: 8cqw; --ts: max(20px, 6.857cqw); --tmax: 84cqw; }
  .k-vg, .k-sf, .k-fc { --ar: 350 / 420; --ex: 50%; --ey: 66%; --hw: 30cqw; --sf: 12cqw; --cw: 44cqw; }
  .k-vg { --lh: 6.29cqw; } .k-sf { --lh: 7.43cqw; } .k-fc { --lh: 5.43cqw; }
  .k-cj, .k-sb, .k-on { --ar: 350 / 200; }
  .k-cj { --lh: 6cqw; } .k-sb { --lh: 7.43cqw; } .k-on { --lh: 6.6cqw; }
  .idx { padding-top: 80px; }
  .idx > .lbl { margin-bottom: 26px; }
  .idx-row { display: block; padding: 16px 0 24px; font-size: 14px; line-height: 1.45; }
  .idx-row > span { display: inline; }
  .idx-row > .d { display: block; margin-bottom: 4px; }
  .idx-row > b::after { content: '\00a0\00a0'; }
  .idx-row p { display: none; }
  .home .ft { margin-top: 50px; }
}

/* ── Página de caso ─────────────────────────────────────────
   El marcado viene tal cual de los tableros aprobados: .cd (escritorio, CS-*5) y .cm (móvil, CS-*7).
   Aquí solo se vuelven flexibles las medidas fijas para que aguanten de 320 a 2560 px. */
.case-pg { padding-bottom: 120px; }
/* Titulares sin una palabra sola en la última línea */
.case-pg h1, .case-pg h2, .ft-h { text-wrap: balance; }
/* Next case: la tarjeta de la home; en escritorio, apaisada con el elemento a la derecha, como en tableta */
@media (min-width: 760px) {
  .nxc .k-vg, .nxc .k-sf, .nxc .k-fc { --ar: 776 / 420; --pl: 5.67cqw; --pt: 6.19cqw; --tg: 3.09cqw; --lb: 3.61cqw; --ts: 4.6cqw; --tmax: 46cqw;
          --ex: 76%; --ey: 52%; --hw: 17cqw; --sf: 7cqw; --cw: 24cqw; }
  .nxc .k-vg { --lh: 2.84cqw; } .nxc .k-sf { --lh: 3.35cqw; } .nxc .k-fc { --lh: 2.45cqw; }
}
/* More work: dos tarjetas en fila desde 1024; en tableta, una debajo de otra para que el texto se lea */
@media (min-width: 760px) and (max-width: 1023px) { .cd .nxm { grid-template-columns: minmax(0, 1fr) !important; row-gap: 32px !important; } }
.cm { display: none; }
@media (max-width: 759px) {
  .cd { display: none; }
  .cm { display: block; }
  .case-pg { padding-bottom: 72px; }
}

/* Visor de capturas: cada captura se amplía; las de antes y después se abren juntas (site.js) */
.zm { cursor: zoom-in; }
.lb { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #141414; color: #FAFAFA; }
.lb[open] { display: grid; grid-template-rows: 1fr auto; animation: ab-fade .25s ease-out; }
.lb::backdrop { background: transparent; }
.lb:focus, .lb:focus-visible { outline: none; }
.lb-st { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 0; padding: 64px 72px 16px; }
.lb-st figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; height: 100%; justify-content: center; }
.lb-st img { display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; border-radius: 8px; background: #fff; cursor: zoom-out; }
.lb-st figcaption { font-size: 13px; color: rgba(250, 250, 250, .7); }
.lb-bar { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 0 0 24px; font-size: 13px; color: rgba(250, 250, 250, .7); }
.lb button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #FAFAFA; cursor: pointer; transition: background-color .2s; }
.lb button:hover { background: rgba(255, 255, 255, .22); }
/* El anillo de foco general es tinta: sobre el fondo oscuro del visor no se veía */
.lb :focus-visible { outline-color: #FAFAFA; }
.lb .lb-x { position: absolute; top: 16px; right: 16px; }
.lb button[hidden] { display: none; }
@media (max-width: 759px) {
  .lb-st { flex-direction: column; gap: 12px; padding: 64px 12px 12px; overflow: auto; justify-content: flex-start; }
  .lb-st figure { height: auto; }
  .lb-st img { max-height: none; width: 100%; }
}

/* Escritorio: lo fijo pasa a fluido sin cambiar nada a 1440 */
.cd [style*="grid-template-columns: 1fr 668px"] { grid-template-columns: minmax(0, 1fr) minmax(0, 668px) !important; }
.cd [style*="width: 668px; height: 820px"] { width: 100% !important; height: auto !important; aspect-ratio: 668 / 820; }
.cd [style*="flex-direction: column; gap: 14px; width: 300px"] { width: auto !important; flex: 0 1 300px; min-width: 0; }
.cd [style*="width: 300px; height: 649px"] { width: 100% !important; height: auto !important; aspect-ratio: 300 / 649; }
/* Fourteen: vídeo de cada concepto y su texto; el vídeo cede antes que el texto */
.cd [style*="grid-template-columns: 600px 1fr"] { grid-template-columns: minmax(0, 600px) minmax(220px, 1fr) !important; }

@media (max-width: 1399px) {
  /* Tira de pasos: etiqueta y recuento arriba, los seis pasos a todo el ancho debajo */
  .cd [style*="grid-template-columns: 150px 1fr 90px"] { grid-template-columns: 1fr auto !important; gap: 10px 16px !important; }
  .cd [style*="grid-template-columns: 150px 1fr 90px"] > div { grid-column: 1 / -1; grid-row: 2; }
  /* Tres versiones: las tres en fila; las figuras se reducen en vez de saltar de línea */
  .cd [style*="grid-template-columns: 190px 190px 1fr"] { grid-template-columns: 170px 170px minmax(0, 1fr) !important; }
  .cd [style*="grid-template-columns: 190px 190px 1fr"] [role="img"] { zoom: .8; }
}
@media (max-width: 1199px) {
  .cd [style*="grid-template-columns: 320px 1fr"] { grid-template-columns: 200px minmax(0, 1fr) !important; gap: 32px !important; }
  .cd [style*="40px 0 400px"] { padding-left: 272px !important; }
  .cd h1[style*="font-size: 72px"] { font-size: 56px !important; }
  .cd [style*="justify-content: center; gap: 64px"] { gap: 24px !important; }
  .cd [style*="grid-template-columns: 220px 1fr 1fr"] { grid-template-columns: 160px 1fr 1fr !important; gap: 20px !important; }
  .cd [style*="font-size: 64px"] { font-size: 48px !important; }
  .cd [style*="font-size: 36px; line-height: 1"] { font-size: 30px !important; }
  /* Cabecera: texto y debajo el vídeo a un tamaño contenido */
  .cd [style*="grid-template-columns: 1fr 668px"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 48px !important; }
  .cd [style*="width: 668px; height: 820px"] { max-width: 520px; }
  .cd [style*="grid-template-columns: 1fr 668px"] > img { max-width: 520px; }
  .cd [style*="grid-template-columns: 190px 190px 1fr"] { grid-template-columns: 150px 150px minmax(0, 1fr) !important; gap: 24px !important; }
  .cd [style*="grid-template-columns: 190px 190px 1fr"] [role="img"] { zoom: .66; }
  /* La captura de portátil sale de la sangría para que se lea */
  .cd [style*="40px 0 400px"]:has(img[src*="vg-ds-desk"]) { padding-left: 40px !important; }
}
@media (max-width: 959px) {
  .cd [style*="grid-template-columns: 320px 1fr"] { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .cd [style*="40px 0 400px"] { padding-left: 40px !important; }
  .cd [style*="grid-template-columns: 190px 190px 1fr"] { grid-template-columns: 140px 140px minmax(0, 1fr) !important; }
  .cd [style*="grid-template-columns: 190px 190px 1fr"] [role="img"] { zoom: .6; }
}

/* Móvil: el tablero está a 390; por debajo, los móviles y las figuras encogen en vez de desbordar */
.cm [style*="width: 350px; height: 430px"] { width: 100% !important; height: auto !important; aspect-ratio: 350 / 430; }
.cm [style*="justify-content: center; gap: 14px"] > div { flex: 0 1 150px; min-width: 0; }
.cm [style*="width: 150px; height: 325px"] { width: 100% !important; height: auto !important; aspect-ratio: 150 / 325; }
@media (max-width: 374px) {
  .cm [role="img"][style*="width: 308px"] { zoom: .85; }
}

/* ── About: ventana ancha a dos columnas (referencia: stanreimgen.space)
   Izquierda, el texto de más a menos tinta y el contacto; derecha, una foto grande y las miniaturas para cambiarla. */
.ab { width: min(1376px, calc(100% - 64px)); height: min(720px, calc(100% - 64px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 24px; background: rgba(246,246,246,.9); -webkit-backdrop-filter: blur(30px) saturate(1.2); backdrop-filter: blur(30px) saturate(1.2); color: var(--ink); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 50px 120px -40px rgba(0,0,0,.4); overflow: hidden; }
.ab:focus, .ab:focus-visible { outline: none; }
.ab::backdrop { background: rgba(28,28,28,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ab[open] { display: grid; grid-template-columns: minmax(0, 466px) minmax(0, 1fr); animation: ab-in .5s var(--ease); }
.ab[open]::backdrop { animation: ab-fade .35s ease-out; }
@keyframes ab-in { from { opacity: 0; transform: translateY(28px) scale(.985); } }
@keyframes ab-fade { from { opacity: 0; } }
.ab-x { position: absolute; z-index: 2; top: 12px; right: 12px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.07); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color .2s; }
.ab-x:hover { background: rgba(0,0,0,.12); }
.ab-txt { padding: 88px 32px 40px; border-right: 1px solid rgba(0,0,0,.06); overflow: auto; display: flex; flex-direction: column; }
.ab-h { font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; }
.ab-p { margin-top: 18px; font-size: 16px; line-height: 1.45; max-width: 46ch; }
.ab-h + .ab-p { margin-top: 24px; }
.ab-p.m { color: var(--muted); }
.ab-c { margin-top: auto; padding-top: 36px; display: grid; gap: 12px; font-size: 14px; font-weight: 500; }
.ab-c a, .ab-c button { display: inline-flex; align-items: center; gap: 12px; width: fit-content; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.ab-c i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.06); font-style: normal; transition: background-color .2s; }
.ab-c a:hover i, .ab-c button:hover i { background: rgba(0,0,0,.12); }
.ab-c svg { width: 15px; height: 15px; }
.ab-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 64px 40px 40px; min-height: 0; }
.ab-big { position: relative; width: min(100%, 480px, calc(100vh - 300px)); aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: 0 30px 60px -30px rgba(0,0,0,.35); }
.ab-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.ab-big img.on { opacity: 1; }
.ab-th { display: flex; gap: 14px; }
.ab-th button { width: 64px; height: 64px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--card); cursor: pointer; opacity: .75; transform: scale(.94); transition: opacity .25s, transform .35s var(--ease), box-shadow .25s; }
.ab-th button:hover { opacity: 1; }
.ab-th button[aria-pressed="true"] { opacity: 1; transform: none; box-shadow: 0 0 0 3px #fff, 0 6px 16px -6px rgba(0,0,0,.35); }
.ab-th img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .ab { width: 100%; height: 100%; border-radius: 0; background: var(--bg); }
  .ab[open] { display: flex; flex-direction: column; overflow: auto; }
  .ab-ph { order: -1; flex: none; }
  .ab-txt { flex: none; }
  .ab-ph { padding: 64px 20px 0; }
  .ab-big { width: 100%; max-width: 520px; }
  .ab-txt { padding: 32px 20px 40px; border: 0; overflow: visible; }
  .ab-c { padding-top: 28px; }
}
/* Pantallas bajas (portátil a 720): todo el texto y el contacto caben sin scroll */
@media (min-width: 901px) and (max-height: 820px) {
  .ab-txt { padding-top: 56px; padding-bottom: 28px; }
  .ab-p { margin-top: 12px; font-size: 15px; }
  .ab-h + .ab-p { margin-top: 18px; }
  .ab-c { padding-top: 24px; gap: 8px; }
  .ab-c i { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .ab[open], .ab[open]::backdrop { animation: none; } .ab-big img { transition: none; } }

/* ── Pantallas grandes ──────────────────────────────────────
   Desde 2000 px la maqueta de 1600 crece con la ventana en vez de quedarse con márgenes enormes:
   a 2560 se ve como a ~1880. El cursor y el visor de capturas cuelgan del body y no se escalan. */
@media (min-width: 2000px) { .hd, .hello, main, .ft, .ab { zoom: 1.08; } }
@media (min-width: 2240px) { .hd, .hello, main, .ft, .ab { zoom: 1.18; } }
@media (min-width: 2400px) { .hd, .hello, main, .ft, .ab { zoom: 1.27; } }
@media (min-width: 2560px) { .hd, .hello, main, .ft, .ab { zoom: 1.36; } }
@media (min-width: 2880px) { .hd, .hello, main, .ft, .ab { zoom: 1.53; } }
@media (min-width: 3200px) { .hd, .hello, main, .ft, .ab { zoom: 1.7; } }
@media (min-width: 3440px) { .hd, .hello, main, .ft, .ab { zoom: 1.83; } }
@media (min-width: 3840px) { .hd, .hello, main, .ft, .ab { zoom: 2.04; } }