/* Noamdan, opción C "Skyline": el diseño de monolitos sobre concreto con movimiento medido.
   Un gesto principal: el monolito de la portada crece desde la base hasta su forma final.
   Los obeliscos suben desde la línea de base al entrar en pantalla. Todo se apaga con prefers-reduced-motion. */
:root { --hh: 71px; }
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 150; background: var(--cobalt); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.curtain { position: fixed; inset: 0; z-index: 200; background: var(--ink); transform: scaleY(0); transform-origin: top; pointer-events: none; }
.js .curtain { animation: c-out var(--dur-m, 480ms) var(--ease) both; }
.js.leaving .curtain { animation: c-in var(--dur-m, 480ms) var(--ease) both; }
@keyframes c-out { from { transform: scaleY(1); transform-origin: top; } to { transform: scaleY(0); transform-origin: top; } }
@keyframes c-in { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
.cursor { position: fixed; left: 0; top: 0; z-index: 250; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: width 240ms var(--ease), height 240ms var(--ease), margin 240ms var(--ease), opacity 120ms linear; }
.cursor.on { opacity: 1; }
.cursor.big { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
@media (pointer: coarse) { .cursor { display: none; } }

/* más aire entre bloques */
.sec { padding-top: clamp(6rem, 24vh, 18rem); }
.statement { font-size: clamp(1.9rem, 4.6vw, 4.8rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; max-width: 22ch; text-wrap: balance; }
.js .statement .w { opacity: 0.14; transition: opacity 120ms linear; }

/* portada: el monolito crece desde la base */
.gate { --e: 1; --t: 1; --l: 1; }
@media (min-width: 761px) {
  .top { position: sticky; top: 0; z-index: 120; }
  .js .gate { height: 300vh; --e: 0; --t: 0; --l: 0; }
  .js .gate-stick { position: sticky; top: var(--hh); height: calc(100svh - var(--hh)); overflow: hidden; }
  .js .gate-stick .hero { height: 100%; min-height: 0; }
  .js .gate .monolith { clip-path: inset(calc((1 - var(--e)) * 16%) calc((1 - var(--e)) * 43%) 0 calc((1 - var(--e)) * 36%)); }
  .gate .mark-xl { font-size: min(var(--t9), 41svh); }
  .js .gate .mark-xl { opacity: var(--t); }
  .js .gate .hero-side { opacity: var(--l); transform: translateY(calc((1 - var(--l)) * 20px)); }
}

/* obeliscos: suben desde la línea de base */
.js .skyline .obelisk { clip-path: inset(100% 0 0 0); transition: clip-path 900ms var(--ease), background-color 120ms var(--ease), color 120ms var(--ease); }
.js .skyline.in .obelisk { clip-path: inset(0); }
.js .skyline.in .obelisk:nth-child(2) { transition-delay: 110ms, 0s, 0s; }
.js .skyline.in .obelisk:nth-child(3) { transition-delay: 220ms, 0s, 0s; }
.js .skyline.in .obelisk:nth-child(4) { transition-delay: 330ms, 0s, 0s; }

/* índice grande: el resto se atenúa */
.bigindex a { transition: opacity 120ms linear, background-color 120ms var(--ease), color 120ms var(--ease); }
@media (hover: hover) { .bigindex:hover li a:not(:hover):not(:focus-visible) { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  .js .gate { height: auto; --e: 1; --t: 1; --l: 1; }
  .js .gate-stick { position: static; height: auto; overflow: visible; }
  .js .statement .w { opacity: 1; }
  .js .skyline .obelisk { clip-path: none; }
  .curtain, .cursor, .progress { display: none; }
}

/* Opción Logo: el logo se construye con el scroll, dos barras que se curvan en U. */
.monolith { position: relative; }
.logo-build { position: absolute; left: 50%; top: 43%; width: min(84%, 80svh); height: auto; translate: -50% -50%; overflow: visible; color: var(--bg); }
.logo-build .final { fill: currentColor; }
.logo-build .worm { fill: none; stroke: currentColor; stroke-width: 237.5; stroke-linecap: butt; }
.logo-build .cons { display: none; }
.js .logo-build .cons { display: inline; }
.js .logo-build .final { opacity: 0; }
.hero { --w: 1; --s: 1; }
.gate-word { position: relative; z-index: 1; font-size: clamp(2.2rem, 5.6cqi, 5rem); line-height: 0.95; letter-spacing: -0.035em; }
.js .gate-word { clip-path: inset(-.3em -.3em calc((1 - var(--w)) * (100% + .6em) - .3em) -.3em); transform: translateY(calc((1 - var(--w)) * 0.3em)); }
.js .gate .hero-side { opacity: var(--s); transform: translateY(calc((1 - var(--s)) * 16px)); }
.js .hero:has(.monolith) .hero-side { transition: none; }

/* portada fija mientras se construye el logo (escritorio y móvil) */
.js .gate { height: 280svh; }
.js .statement .w { transition: opacity .28s ease-out; }
.js .gate-stick { position: sticky; top: var(--hh); height: calc(100svh - var(--hh)); overflow: hidden; }
.js .gate-stick .hero { height: 100%; min-height: 0; }
.js .gate .monolith { clip-path: none; min-height: 0; }
@media (max-width: 760px) {
  .logo-build { width: 96%; top: 40%; }
  .js .gate { height: 185svh; }
  .js .gate-stick .hero { grid-template-rows: minmax(0, 1fr) auto; }
  .js .gate .hero-side { padding-top: .75rem; padding-bottom: 1rem; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1rem; }
  .js .gate .hero-side .lead { display: none; }
  .js .gate .hero-side p[style] { margin-top: 0 !important; }
  .js .gate .hero-side .cta { padding: 12px 16px; white-space: nowrap; }
  .js .gate .monolith { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .gate { height: auto; }
  .js .gate-stick { position: static; height: auto; overflow: visible; }
  .js .gate-stick .hero { height: auto; min-height: min(88svh, 62rem); }
  .js .gate-word { clip-path: none; transform: none; }
  .js .gate .hero-side { opacity: 1; transform: none; }
}

/* Hover de proyectos: loop de imágenes en blanco y negro */
.obelisk .o-foot { position: relative; z-index: 1; }
.obelisk .anim { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; opacity: 0; pointer-events: none; z-index: 0; }
.obelisk.is-anim .anim { opacity: 1; }
.obelisk.is-anim .glyph { color: var(--ah); -webkit-text-stroke: 3px var(--at); paint-order: stroke fill; }
.obelisk.is-anim .o-foot > * { background: var(--ah); color: var(--at); width: fit-content; max-width: 100%; padding: .12em .4em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.obelisk.is-anim .o-foot > * + * { margin-top: .3em; }
.wl-float { position: fixed; left: 0; top: 0; width: min(260px, 46vw); aspect-ratio: 1 / 1; z-index: 140; pointer-events: none; opacity: 0; visibility: hidden; background: var(--bg); border: 3px solid var(--ink); }
.wl-float.on { opacity: 1; visibility: visible; }
.wl-float canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
@media (hover: none) { .wl-float { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .gate { height: auto; }
  .js .gate-stick { position: static; height: auto; overflow: visible; }
  .js .gate-stick .hero { height: auto; min-height: min(88svh, 62rem); }
  .js .gate-word { clip-path: none; transform: none; }
  .js .gate .hero-side { opacity: 1; transform: none; }
}

/* Hover de proyectos: loop de imágenes en blanco y negro */
.obelisk .o-foot { position: relative; z-index: 1; }
.obelisk .anim { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; opacity: 0; pointer-events: none; z-index: 0; }
.obelisk.is-anim .anim { opacity: 1; }
.obelisk.is-anim .glyph { color: var(--ah); -webkit-text-stroke: 3px var(--at); paint-order: stroke fill; }
.obelisk.is-anim .o-foot > * { background: var(--ah); color: var(--at); width: fit-content; max-width: 100%; padding: .12em .4em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.obelisk.is-anim .o-foot > * + * { margin-top: .3em; }
.wl-row { position: relative; overflow: hidden; }
.wl-row .anim { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; opacity: 0; pointer-events: none; z-index: 0; }
.wl-row.is-anim .anim { opacity: 1; }
.wl-row > span { position: relative; z-index: 1; }
.wl-row.is-anim > span { background: var(--ah); color: var(--at); width: fit-content; max-width: 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.wl-row.is-anim > .wl-year, .wl-row.is-anim > .wl-name, .wl-row.is-anim > .wl-what { padding-block: .1em; }
a.wl-row.is-anim:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) { .obelisk .anim, .wl-float { display: none; } }

/* Trabajo: nueve monolitos en tres filas de tres */
@media (min-width: 961px) { .skyline.tri .obelisk { grid-column: span 4; } }

/* Carga del hover: la caja aparece al instante, se llena de arriba abajo con el color del hover y luego el barrido descubre la imagen */
.obelisk .anim, .wl-float canvas { clip-path: inset(0 0 100% 0); }
.obelisk.is-show .anim, .wl-float.is-show canvas { clip-path: inset(0); transition: clip-path 240ms steps(10, end); }
.anim-ld { position: absolute; inset: 0; background: var(--ah); clip-path: inset(0 0 100% 0); pointer-events: none; z-index: 0; }
.obelisk.is-anim:not(.is-warm) .anim-ld, .wl-float.on .anim-ld { clip-path: inset(0); transition: clip-path 260ms steps(10, end); }
.wl-float canvas { position: relative; }
@media (prefers-reduced-motion: reduce) { .anim-ld { display: none; } }

/* Cursor del sitio: el cuadrado de la grilla con un corte diagonal; cada estado sale del mismo cuadrado, sin letras */
.cursor { position: fixed; left: 0; top: 0; z-index: 250; width: 0; height: 0; margin: 0; background: none; color: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: opacity 120ms linear; will-change: transform; }
.cursor.on { opacity: 1; }
@media (hover: hover) and (pointer: fine) { html.cur-on, html.cur-on * { cursor: none !important; } }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
.cursor .a,.cursor .b{position:absolute;background:currentColor;left:0;top:0;width:18px;height:18px;transition:left 260ms cubic-bezier(.2,.8,.2,1),top 260ms cubic-bezier(.2,.8,.2,1),width 260ms cubic-bezier(.2,.8,.2,1),height 260ms cubic-bezier(.2,.8,.2,1),clip-path 260ms cubic-bezier(.2,.8,.2,1),opacity 160ms linear,background-color 160ms linear,transform 140ms cubic-bezier(.2,.8,.2,1)}
.cursor .a{clip-path:polygon(0 0,100% 0,0 100%,0 100%)}
.cursor .b{clip-path:polygon(100% 0,100% 100%,0 100%,0 100%);opacity:0}
.cursor.down .a{transform:scale(.72)}
.cursor[data-s="link"] .a{left:-13px;top:-13px;width:26px;height:26px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.cursor[data-s="project"] .a,.cursor[data-s="copy"] .a,.cursor[data-s="copy2"] .a{left:-22px;top:-22px;width:44px;height:44px;background:transparent;border:3px solid currentColor;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.cursor[data-s="project"] .b{left:-5px;top:-5px;width:10px;height:10px;opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.cursor[data-s="copy"] .b,.cursor[data-s="copy2"] .b{left:-10px;top:-10px;width:20px;height:20px;opacity:1}
.cursor[data-s="copy2"] .b{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.cursor[data-s="list"] .a{left:-5px;top:-5px;width:10px;height:10px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.cursor[data-s="ext"] .a{left:-20px;top:0;width:20px;height:20px;clip-path:polygon(0 0,100% 0,100% 100%,100% 100%)}
.cursor[data-s="text"] .a{left:-1.5px;top:-13px;width:3px;height:26px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);animation:blink 1s steps(1,end) infinite}
.cursor[data-s="drag"] .a{left:-24px;top:-24px;width:22px;height:22px}
.cursor[data-s="drag"] .b{left:2px;top:2px;width:22px;height:22px;opacity:1}
.cursor[data-s="load"] .a{left:-11px;top:-11px;width:22px;height:22px;animation:spin .8s steps(1,end) infinite}
.cursor[data-s="theme"] .a,.cursor[data-s="theme"] .b{left:-13px;top:-13px;width:26px;height:26px}
.cursor[data-s="theme"] .b{opacity:.3}
.cursor[data-s="off"] .a{opacity:.35}
.cursor[data-s="close"] .a{left:-14px;top:-14px;width:28px;height:28px;clip-path:polygon(0 12%,12% 0,50% 38%,88% 0,100% 12%,62% 50%,100% 88%,88% 100%,50% 62%,12% 100%,0 88%,38% 50%)}
@keyframes blink{50%{opacity:0}}
@keyframes spin{0%{transform:rotate(0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce) { .cursor .a, .cursor .b { transition: none; } .cursor[data-s="load"] .a, .cursor[data-s="text"] .a { animation: none; } }

/* Capturas con efecto de hover (figura.js) */
.dfig { position: relative; margin: 2rem 0; aspect-ratio: var(--ar); max-width: 100%; background: var(--cobalt); overflow: hidden; }
.dfig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dfig canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; }
.dfig.is-ready canvas { opacity: 1; }
.dfig.is-ready.is-color canvas { opacity: 0; }
.dfig i { position: absolute; inset: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
.dfig i.a { background: var(--cobalt); }
.dfig i.b { background: var(--ink); }
.dfig.cov i { clip-path: inset(0 0 0 0); transition: clip-path 240ms steps(10, end); }
.dfig.cov i.b { transition-delay: 90ms; }
.dfig.gone i { clip-path: inset(100% 0 0 0); transition: clip-path 240ms steps(10, end); }
.dfig.gone i.a { transition-delay: 90ms; }
.dfig.no-t i { transition: none; }
.dfig figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: .5rem .75rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); display: flex; flex-wrap: wrap; gap: .25rem 1rem; z-index: 2; pointer-events: none; }
.dfig-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 34rem; }
.dfig-row .dfig { margin: 1rem 0 2rem; }
.dfig-hint-touch { display: none; }
@media (hover: none) { .dfig-hint { display: none; } .dfig-hint-touch { display: inline; } }

/* Pie: llamada a escribir, y página de contacto con foto */
.foot-cta { margin-top: 1.6em; }
.foot-cta .cta { display: inline-block; max-width: 100%; white-space: normal; background: var(--bg); color: var(--ink); }
.contact-text h2 { margin-bottom: 1rem; }
.contact-steps { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: .75rem; max-width: 36rem; }
.contact-steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .5rem; border-top: 1px solid var(--ink); padding-top: .75rem; }
.contact-note { margin-top: .5rem; max-width: 24rem; }
.gc.g9-12 .dfig { margin-top: 0; }
@media (max-width: 800px) { .contact-text, .gc.g9-12 { grid-column: 1 / -1; } .gc.g9-12 { margin-top: 2rem; } }

/* Notas: tarjetas con portada, cuadrícula, anterior/siguiente */
.ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut, 1.5rem); padding-right: var(--gut, 1.5rem); }
@media (max-width: 900px) { .ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ngrid { grid-template-columns: minmax(0, 1fr); } }
.ncard a { display: block; text-decoration: none; color: inherit; }
.ncard .dfig, .ncard .ncover-logo { margin: 0 0 1rem; }
.ncard h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; margin: .3em 0 .4em; }
.ncard p { margin: 0; }
.ncard .label { opacity: .75; }
.ncard a:hover h3 { text-decoration: underline; text-underline-offset: .15em; }
.ncover-logo { aspect-ratio: var(--ar, 3/2); background: var(--cobalt); color: var(--on-cobalt); display: grid; place-items: center; }
.ncover-logo svg { width: 42%; height: auto; }
.note-body .dfig { margin: 2rem 0; }
.note-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut, 1.5rem); border-top: 1px solid var(--ink); padding-top: 1rem; }
.note-nav a { display: grid; gap: .25rem; text-decoration: none; padding: 1rem; box-shadow: inset 0 0 0 1px var(--ink); }
.note-nav a:hover { background: var(--ink); color: var(--bg); }
.note-nav .nn-r { text-align: right; grid-column: 2; }
.note-nav a span:last-child { font-weight: 800; font-size: 1.25rem; line-height: 1.1; }
@media (max-width: 560px) { .note-nav { grid-template-columns: minmax(0, 1fr); } .note-nav .nn-r { grid-column: auto; text-align: left; } }
.ncard a:hover { background: none; color: inherit; text-decoration: none; }
.ncard a:hover h3 { background: var(--cobalt); color: var(--on-cobalt); text-decoration: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ncard a:hover .label { opacity: .75; }
.ncard a:hover .ncover-logo { outline: 3px solid var(--ink); outline-offset: -3px; }