/* Rich Gonzalez · v8 · Etapa 1
   Concepto: una escena fija avanza con el scroll y deja una retícula que organiza el resto del sitio. */
:root{
  --bg:#0A0A0A;
  --fg:#F3F1EA;
  --mute:#9A988F;
  --line:#6B6A66;
  --accent:#FFE900;
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --mx:clamp(16px,6.25vw,90px);
  --ins:clamp(10px,1.6vw,22px);
  --hh:56px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:14px;line-height:1.5}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gut{padding-left:max(calc(var(--mx) + var(--ins)),env(safe-area-inset-left,0px));padding-right:max(var(--mx),env(safe-area-inset-right,0px))}
.y{color:var(--accent)}
.skiplink{position:absolute;left:-999px;top:8px;background:var(--accent);color:#0A0A0A;padding:8px 12px;z-index:100}
.skiplink:focus{left:8px}

/* Encabezado */
.top{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(var(--bg),rgba(10,10,10,0));pointer-events:none}
.top-in{height:var(--hh);display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.top-in>*{pointer-events:auto}
.brand{text-decoration:none;font-weight:500}
.right{display:flex;gap:18px;align-items:center}
.nav{display:flex;gap:18px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
body:not(.in-intro) .nav{opacity:1;visibility:visible}
.nav a{text-decoration:none}
.nav a.cur{color:var(--accent)}
.lang{display:flex}
.lang button{background:none;border:0;padding:6px 5px;letter-spacing:.1em;cursor:pointer;text-transform:uppercase;font-size:11px}
.lang button[aria-pressed="true"]{color:var(--accent)}
@media (max-width:760px){.nav{display:none}}

.btn{background:none;border:1px solid var(--line);padding:8px 12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-size:10px}
.btn:hover{border-color:var(--fg)}

/* ORIGIN */
.track{height:1000vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cap{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);opacity:0;pointer-events:none;z-index:2}
.cap .p{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.01em;text-wrap:balance;max-width:16em;font-size:clamp(28px,5.4vw,84px)}
.cap .q{font-family:var(--display);font-weight:500;font-size:clamp(16px,2.2vw,30px);margin-top:.7em}
.cap .s{font-size:clamp(10px,1vw,13px);color:var(--mute);margin-top:1em;letter-spacing:.04em}
.cap.small .p{font-size:clamp(22px,3.6vw,52px)}
.cap.word .p{font-size:clamp(26px,4.2vw,64px);letter-spacing:.02em}
.reveal{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;z-index:2}
.reveal.on{pointer-events:auto}
.reveal h1,.static .name{font-family:var(--display);font-weight:800;margin:0;line-height:.92;letter-spacing:-.02em;font-size:clamp(52px,12vw,176px)}
.rl{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-top:clamp(20px,4vh,44px);border-top:1px solid var(--line);padding-top:18px;flex-wrap:wrap}
.d{margin:0;font-size:clamp(11px,1.2vw,14px);line-height:1.7}
.d span{color:var(--mute)}
.cta{display:inline-block;background:var(--accent);color:#0A0A0A;padding:12px 18px;text-decoration:none;letter-spacing:.1em;font-weight:500;font-size:12px;text-transform:uppercase}
.cta:hover{background:#fff35c}
.hud-bot{position:absolute;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:flex-end;gap:12px;z-index:3}
.readout{font-size:10px;color:var(--mute);letter-spacing:.08em;line-height:1.5}
.hud-bot .btn{margin-left:auto;transition:opacity .3s}
body:not(.in-intro) #skip{opacity:0;pointer-events:none}

/* Versión estática (movimiento reducido) */
.static{display:none}
body.rm .track{display:none}
body.rm .static{display:block}
.static section{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid #222;padding-block:96px}
.cap-s{font-family:var(--display);font-weight:800;font-size:clamp(28px,5.4vw,84px);line-height:1;margin:0 0 24px;max-width:14em}
.cap-s.big{font-size:clamp(34px,7vw,104px);line-height:.98}
.cap-q{font-family:var(--display);font-weight:500;font-size:clamp(18px,2.4vw,32px);margin:.4em 0 0}

/* Secciones con retícula */
.sec{position:relative;padding-block:clamp(72px,14vh,140px);border-top:1px solid #1a1a1a;scroll-margin-top:var(--hh)}
.sec.grid::before{content:"";position:absolute;top:0;bottom:0;left:var(--mx);right:var(--mx);background:repeating-linear-gradient(90deg,rgba(243,241,234,.08) 0 1px,transparent 1px 8.3333%);pointer-events:none}
.sec.grid::after{content:"";position:absolute;top:0;height:min(14vh,110px);left:var(--mx);width:2px;background:var(--accent)}
.sec>*{position:relative;z-index:1}
.kick{margin:0;font-size:11px;letter-spacing:.14em;color:var(--accent)}
.sec h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,88px);line-height:1;margin:.3em 0 .15em;letter-spacing:-.01em;text-wrap:balance}
.alt{margin:0;color:var(--mute);font-size:12px}
.pairs{margin-top:clamp(40px,10vh,100px)}
.pair{display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(243,241,234,.25);padding:18px 0;font-size:clamp(11px,1.2vw,14px);letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap}
.pair span:last-child{color:var(--mute)}
.disc{list-style:none;margin:clamp(32px,8vh,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(243,241,234,.25)}
.disc li{border-bottom:1px solid rgba(243,241,234,.25);border-right:1px solid rgba(243,241,234,.12)}
.disc li:last-child{border-right:0}
.disc a{display:block;padding:28px 16px 28px 0;font-family:var(--display);font-weight:800;font-size:clamp(18px,2.6vw,36px);text-decoration:none;text-transform:uppercase;letter-spacing:-.01em}
.disc li+li a{padding-left:16px}
.disc a:hover{color:var(--accent)}
@media (max-width:700px){.disc{grid-template-columns:1fr 1fr}.disc li:nth-child(2){border-right:0}.disc li+li a{padding-left:0}.disc li:nth-child(even) a{padding-left:16px}}

.filters{display:flex;gap:6px;flex-wrap:wrap;margin:28px 0 24px}
.chip{border:1px solid var(--line);padding:3px 9px;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.chip.on{background:var(--accent);border-color:var(--accent);color:#0A0A0A}
.cards{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.card{min-width:0}
.card.feature{grid-row:span 1}
.shot{border:1px solid #2d2d2b;background:#141414;aspect-ratio:16/10;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top left}
.shot.ph{display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-style:dashed}
.meta{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-top:8px;font-size:11px;letter-spacing:.06em;flex-wrap:wrap}
.meta h3{margin:0;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:0}
.meta span{color:var(--mute);text-transform:uppercase}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.dev{margin:32px 0 0;font-size:11px;color:var(--mute);max-width:56ch;border-left:2px dashed var(--line);padding-left:12px}

.foot{border-top:1px solid #1a1a1a;padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));font-size:11px;color:var(--mute)}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.nav{transition:none}}

.shot img.top-c{object-position:center 28%}

/* ---------- Etapa 2: páginas interiores ---------- */
.page-top{padding-top:calc(var(--hh) + clamp(40px,10vh,100px));min-height:70vh}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,88px);line-height:1;margin:.3em 0 .15em;letter-spacing:-.01em;text-wrap:balance}
h1.h2{margin-top:.3em}
button.chip{background:none;color:var(--fg);cursor:pointer;font-family:var(--mono)}
button.chip:hover{border-color:var(--fg)}
button.chip.on{background:var(--accent);border-color:var(--accent);color:#0A0A0A}
.cards.wall{grid-template-columns:repeat(3,1fr);gap:28px 16px;margin-top:8px}
@media (max-width:900px){.cards.wall{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards.wall{grid-template-columns:1fr}}
.cards.wall .shot{aspect-ratio:4/3}
a.card{display:block;text-decoration:none}
a.card .shot{transition:border-color .25s}
a.card:hover .shot{border-color:var(--accent)}
a.card:hover h3{color:var(--accent)}
a.card[hidden]{display:none}
.empty{margin:40px 0;color:var(--mute);font-size:12px}
.more{margin:clamp(40px,8vh,80px) 0 0}
/* archive */
.arc{list-style:none;margin:clamp(28px,6vh,56px) 0 0;padding:0;border-top:1px solid rgba(243,241,234,.25)}
.arc a{display:grid;grid-template-columns:64px 1.4fr 1.4fr 1fr;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(243,241,234,.18);text-decoration:none;font-size:12px;letter-spacing:.06em}
.arc .th{width:64px;height:48px;overflow:hidden;border:1px solid #2d2d2b;background:#141414;display:block}
.arc .th img{width:100%;height:100%;object-fit:cover}
.arc .nm{font-family:var(--display);font-weight:800;font-size:clamp(16px,2vw,24px);letter-spacing:0}
.arc .ds,.arc .ct{color:var(--mute);text-transform:uppercase}
.arc a:hover .nm{color:var(--accent)}
@media (max-width:700px){.arc a{grid-template-columns:56px 1fr;grid-template-areas:"t n" "t d";row-gap:2px}.arc .th{grid-area:t;width:56px;height:42px}.arc .nm{grid-area:n}.arc .ds{grid-area:d}.arc .ct{display:none}}
/* proyecto genérico */
.back{margin:0 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.back a{text-decoration:none;color:var(--mute)}
.back a:hover{color:var(--accent)}
.disc-line{margin:0;color:var(--mute);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(32px,8vh,72px)}
.gal .fig{margin:0;background:#141414;border:1px solid #2d2d2b}
.gal .fig:first-child{grid-column:1/-1}
.gal img{width:100%;height:auto}
@media (max-width:700px){.gal{grid-template-columns:1fr}}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(56px,12vh,120px);border-top:1px solid rgba(243,241,234,.25);padding-top:20px;font-family:var(--display);font-weight:800;font-size:clamp(18px,2.4vw,32px)}
.pn a{text-decoration:none;display:block}
.pn a.r{text-align:right}
.pn a:hover{color:var(--accent)}
.pn small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
/* caso MeetLogic */
.casewrap{max-width:1500px}
.chero{padding-bottom:clamp(40px,8vh,80px)}
.chn{font-family:var(--display);font-weight:800;font-size:clamp(52px,12vw,176px);line-height:.92;letter-spacing:-.02em;margin:.1em 0 .1em}
.tag{font-family:var(--display);font-weight:500;font-size:clamp(20px,3vw,40px);line-height:1.1;margin:0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:clamp(28px,6vh,56px) 0;padding-top:18px;border-top:1px solid var(--line);font-size:12px;line-height:1.7}
.facts dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.facts dd{margin:0}
@media (max-width:700px){.facts{grid-template-columns:1fr}}
.fig{margin:0}
.fig img{width:100%;height:auto;border:1px solid #2d2d2b;background:#141414}
.fig figcaption{margin-top:8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.fig.wide{margin-top:8px}
.case{padding-block:clamp(56px,12vh,120px);border-top:1px solid rgba(243,241,234,.18)}
.ch{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,72px);line-height:1;letter-spacing:-.01em;margin:.35em 0 .5em;text-wrap:balance}
.cp{max-width:62ch;margin:0 0 clamp(28px,6vh,56px);font-size:clamp(13px,1.3vw,16px);line-height:1.75}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.duo.ph{grid-template-columns:1.6fr 1fr}
.duo .mob{max-width:340px}
@media (max-width:700px){.duo,.duo.ph{grid-template-columns:1fr}}
.case.close{text-align:left}
.case.close .ch{font-size:clamp(34px,6vw,88px)}