@font-face{font-family:'Grieffed Mono';src:url(18cad8549fd3999ac042.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Grieffed Mono';src:url(df18ccf1455ac7210268.woff) format('woff');font-weight:700;font-style:normal;font-display:swap}

/* ============================================================
   Álvaro Vega / Grieffed
   Dirección: galería densa. Interfaz mínima, la obra ocupa todo.
   Referencia de partida: sitios de artista en ArtStation.
   Las obras no se recortan: la rejilla es de altura libre.
   ============================================================ */
:root{
  --bg:#141412;
  --bg-2:#1D1C19;
  --line:#2E2C27;
  --fg:#F1EDE2;
  --fg-2:#938D80;
  --accent:#C1401E;
  --amber:#D9A233;
  --head:56px;
  --gut:clamp(14px,2.4vw,28px);
  --gap:clamp(8px,1.1vw,14px);
  --max:1680px;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:80;background:var(--accent);color:#12100E;padding:.6em 1em}

/* ---------- cabecera ---------- */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(20,20,18,.94);
  backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:20px;height:var(--head)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:13px;white-space:nowrap}
.brand img{width:26px;height:auto;opacity:.92}
.brand small{display:block;font-weight:300;letter-spacing:.1em;font-size:10px;color:var(--fg-2);text-transform:uppercase;margin-top:2px}
nav.main{display:flex;gap:18px;margin-left:auto;align-items:center}
nav.main a{font-size:12px;min-height:44px;display:flex;align-items:center;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);padding:6px 0;border-bottom:1px solid transparent}
nav.main a:hover{color:var(--fg)}
nav.main a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent)}
.lang{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--fg-2)}
.lang button{background:none;border:0;color:var(--fg-2);font:inherit;font-size:12px;letter-spacing:.1em;cursor:pointer;padding:11px 8px;min-height:44px}
.lang button[aria-pressed="true"]{color:var(--fg)}
@media (max-width:620px){
  .bar{height:auto;padding:10px 0;flex-wrap:wrap;gap:10px}
  nav.main{width:100%;margin-left:0;gap:16px;order:3}
  .lang{margin-left:auto}
}

/* ---------- bandas de título, como en el CV ---------- */
.band{display:block;margin:0 0 14px;padding:7px 12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:clamp(13px,1.5vw,17px);line-height:1.25;color:#F1EDE2;background:var(--accent)}
.band.amber{background:var(--amber);color:#141412;font-size:12px;letter-spacing:.14em;padding:5px 12px}
.tagline{display:block;margin:10px 0 0;padding:6px 12px;background:var(--accent);color:#F1EDE2;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:clamp(11px,1.2vw,13px)}
/* ---------- franja de título ---------- */
.masthead{padding:clamp(18px,3vw,34px) 0 clamp(12px,1.6vw,18px)}
.masthead h1{font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:.02em;margin:0;text-transform:uppercase}
.masthead h1.band{font-size:clamp(15px,1.8vw,19px)}
.masthead p{margin:6px 0 0;color:var(--fg-2);max-width:74ch;font-weight:300}
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-top:clamp(14px,2vw,22px)}
.tabs button{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--fg-2);
  font:inherit;font-size:12px;min-height:44px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 14px;cursor:pointer;margin-bottom:-1px;
}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.tabs .count{color:var(--fg-2);font-size:10px;margin-left:6px}

.masthead .quick{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.secline{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);font-weight:500;margin:clamp(22px,3vw,34px) 0 10px}
.hero-card{margin:0 0 var(--gap)}
.hero-card a{display:block;max-width:940px}
.hero-card img,.hero-card video{width:100%;height:auto;border:1px solid transparent}
.hero-card a:hover img,.hero-card a:focus-visible img{border-color:var(--accent)}
.hero-card .label{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:10px 2px 0}
.hero-card .label b{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-left:3px solid var(--accent);padding-left:9px}
.hero-card .label span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.herolead{max-width:64ch;color:#C9CFD3;font-weight:300;margin:8px 0 0}
.picks{columns:1;column-gap:var(--gap);padding-top:clamp(18px,2.6vw,30px)}
@media (min-width:520px){.picks{columns:2}}
@media (min-width:1080px){.picks{columns:3}}
.picks .card{break-inside:avoid;margin:0 0 var(--gap)}
.allwork{padding:8px 0 clamp(40px,6vw,80px)}
.allwork a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);border-bottom:1px solid var(--accent);padding-bottom:3px}
.allwork a:hover{color:var(--fg)}
/* ---------- portada: escena Kenshi por capas ---------- */
.hero{position:relative;overflow:hidden;height:max(320px,min(66vh,46vw));background:var(--bg)}
.hero .stage{position:absolute;inset:0}
.hero .dep{position:absolute;bottom:0;right:0;height:100%;width:auto;line-height:0;will-change:transform}
.hero .dep>img{display:block;height:100%;width:auto;max-width:none}
.hero .dep .fig{position:absolute;left:79.531%;top:60.078%;width:2.969%;height:auto}
@media (min-width:820px){
  .hero .dep{left:0;right:0;bottom:0;height:auto;width:100%}
  .hero .dep>img{width:100%;height:auto}
}
.hero .d0>img{animation:driftA 41s ease-in-out infinite alternate}
.hero .d1>img{animation:driftB 29s ease-in-out infinite alternate}
.hero .d2>img{animation:driftC 23s ease-in-out infinite alternate}
.hero .d2 .fig{animation:breathe 9s ease-in-out infinite alternate}




.hero .veilbottom{position:absolute;left:0;right:0;bottom:0;height:58%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,20,18,0) 0%,rgba(20,20,18,.74) 62%,var(--bg) 100%)}
.hero .copy{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) clamp(20px,3.4vw,40px)}
.hero .copy .inner{max-width:var(--max);margin:0 auto}
.hero .copy h1{font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:.02em;margin:0;text-transform:uppercase}
.hero .copy .tagline{margin-top:10px}
.hero .copy p{margin:12px 0 0;color:#C3BEB2;max-width:58ch;font-weight:300}
.hero .copy .quick{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
@media (prefers-reduced-motion:reduce){.hero .dep>img,.hero .dep .fig{animation:none}}

/* ---------- rejilla ---------- */
.grid{columns:1;column-gap:var(--gap);padding:var(--gap) 0 clamp(40px,6vw,80px)}
@media (min-width:520px){.grid{columns:2}}
@media (min-width:860px){.grid{columns:3}}
@media (min-width:1200px){.grid{columns:4}}
@media (min-width:1560px){.grid{columns:5}}
.card{break-inside:avoid;margin:0 0 var(--gap);position:relative;background:var(--bg-2)}
.card a{display:block;position:relative}
.card img{width:100%;height:auto;border:1px solid transparent;transition:border-color .15s linear}
.card a:hover img,.card a:focus-visible img{border-color:var(--accent)}
.card .label{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:8px 2px 2px;flex-wrap:wrap;
}
.card .label b a{color:inherit}
.card .label b{font-weight:600;font-size:12px;color:var(--fg);text-transform:uppercase;letter-spacing:.04em;border-left:2px solid var(--accent);padding-left:7px}
.card .label .tags{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px}
.tag{font-size:10px;color:var(--fg-2);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid transparent;padding:3px 0}
.tag:hover,.tag:focus-visible{color:var(--fg);border-bottom-color:var(--accent)}
.tags i{color:var(--line);font-style:normal;font-size:10px}
.project .kind.tags{display:flex;gap:6px;flex-wrap:wrap;align-items:baseline;margin-top:8px}
.project .kind .tag{font-size:11px;letter-spacing:.12em}
.backlink{color:var(--fg-2);border-bottom:1px solid var(--accent);padding-bottom:2px}
.card.shield .veil{
  position:absolute;inset:0;background:#0B0D0E;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:10px;padding:16px;text-align:center;
}
.card.shield .veil p{margin:0;font-size:12px;color:var(--fg-2)}
.card.shield .veil button{background:none;border:1px solid var(--line);color:var(--fg);font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;cursor:pointer}

/* ---------- ficha de proyecto ---------- */
.project{padding:clamp(18px,3vw,34px) 0 clamp(40px,6vw,80px);max-width:1180px;margin:0 auto}
.project .top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.wip{display:inline-block;font-style:normal;font-size:10px;letter-spacing:.14em;background:var(--amber);color:#141412;padding:3px 8px;margin-left:10px;vertical-align:middle;font-weight:700}
.project h1{font-size:clamp(19px,2.2vw,26px);font-weight:700;margin:0;text-transform:uppercase;letter-spacing:.03em;border-left:3px solid var(--accent);padding-left:10px}
.project .kind{color:var(--fg-2);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.project .back{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.project .back:hover{color:var(--fg)}
.project .text{padding:18px 0 4px;max-width:72ch;color:#C9CFD3;font-weight:300}
.project .text p{margin:0 0 .9em}
.stack{display:grid;gap:var(--gap);padding-top:14px}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding-top:14px;align-items:start}
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.zoom img{width:100%;height:auto;background:var(--bg-2);border:1px solid transparent}
.zoom:hover img,.zoom:focus-visible img{border-color:var(--accent)}
.zoom .cap{display:block;text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2);padding:6px 0 0;border-left:2px solid var(--accent);padding-left:7px;margin-top:6px}
.pages img{width:100%;height:auto;background:var(--bg-2);border:1px solid transparent}
.pages img:hover,.pages img:focus-visible{border-color:var(--accent)}
.readerbar{display:flex;gap:10px;align-items:center;padding-top:16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.readerbar button{background:none;border:1px solid var(--line);color:var(--fg-2);font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;cursor:pointer}
.readerbar button[aria-pressed="true"]{color:var(--fg);border-color:var(--accent)}
.stack img,.stack video{width:100%;height:auto;background:var(--bg-2)}
.stack .zoom,.pages .zoom{margin:0}
.card video{width:100%;height:auto}
.credits{margin:22px 0 0;display:flex;gap:26px;flex-wrap:wrap;font-size:12px;color:var(--fg-2);border-top:1px solid var(--line);padding-top:14px}
.credits .type-link{display:inline-block;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:color .18s ease,text-decoration-color .18s ease}
.credits .type-link:hover{color:var(--accent);text-decoration-color:currentColor}
.credits b{display:block;color:var(--fg);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.endcontact{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-2)}
.endcontact a{color:var(--fg);border-bottom:1px solid var(--accent);padding-bottom:2px}
.pager{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:26px;padding-top:16px;font-size:12px}
.pager a{color:var(--fg-2)}
.pager a:hover{color:var(--fg)}

/* ---------- páginas de texto ---------- */
.page{padding:clamp(24px,4vw,48px) 0 clamp(40px,6vw,80px);max-width:1180px;margin:0 auto}
.page h1{margin:0 0 18px}
.about{display:grid;gap:clamp(20px,3vw,44px)}
@media (min-width:840px){.about{grid-template-columns:300px 1fr}}
.about .side h2:first-of-type{margin-top:20px}
.about figure img{width:100%;height:auto}

.about .claim{font-size:clamp(17px,2vw,21px);line-height:1.4;font-weight:500;color:var(--fg);max-width:26ch;margin:0}
.about .bio{max-width:68ch;color:#C9CFD3;font-weight:300;font-size:15px}
.about h2{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#141412;background:var(--amber);font-weight:700;margin:24px 0 10px;padding:4px 10px}
.about ul{margin:0;padding:0;list-style:none}
.about li{padding:5px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;justify-content:space-between;font-size:13px}
.about li span.r{color:var(--fg-2);white-space:nowrap;font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{border:1px solid var(--line);padding:5px 9px;font-size:12px;color:#C9CFD3;display:block}
.contact-grid{display:grid;gap:clamp(24px,5vw,64px);align-items:center}
@media (min-width:860px){.contact-grid{grid-template-columns:1fr 320px}}
.contact-grid .claim{font-size:clamp(19px,2.2vw,26px);line-height:1.35;font-weight:500;max-width:22ch;margin:0 0 14px;color:var(--fg)}
.contact-grid .sub{color:var(--fg-2);max-width:52ch;font-weight:300;margin:0 0 26px}
.contact-grid .write{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);margin:0 0 4px}
.mascot{margin:0}.mascot img{width:100%;max-width:340px;margin-left:auto;height:auto}
.contact-grid a.mail,.contact a.mail{font-size:clamp(18px,2.4vw,26px);font-weight:500;border-bottom:1px solid var(--accent);padding-bottom:2px;word-break:break-all}
.btn{background:none;border:1px solid var(--line);color:var(--fg);font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 13px;cursor:pointer;margin-left:10px}
.links{margin-top:26px;display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.links a{color:var(--fg-2);border-bottom:1px solid transparent}
.links a:hover{color:var(--fg);border-bottom-color:var(--line)}

footer.site{border-top:1px solid var(--line);padding:18px 0 30px;color:var(--fg-2);font-size:12px}
footer.site .wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

/* ---------- visor ---------- */
dialog.viewer{border:0;padding:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:#08090A;color:var(--fg)}
dialog.viewer::backdrop{background:rgba(0,0,0,.95)}
.vi{height:100dvh;display:grid;grid-template-rows:auto 1fr auto;padding:10px var(--gut)}
.vtop,.vbot{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.vfig{margin:0;display:grid;place-items:center;min-height:0}
.vfig img{max-height:calc(100dvh - 120px);max-width:100%;width:auto;height:auto;object-fit:contain}
dialog.viewer button{min-height:44px;background:none;border:1px solid var(--line);color:var(--fg);font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;cursor:pointer}


/* v21: small, interruptible feedback; artwork stays uncropped. */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}
button,.btn{transition:transform 160ms var(--ease-out),border-color 160ms ease,color 160ms ease}
button:active,.btn:active{transform:scale(.97)}
.artwork{margin:0;min-width:0}
.media-heading{font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin:30px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.motion-link{display:flex;gap:8px;align-items:center;text-align:left;min-height:44px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg);font:inherit;font-size:11px;padding:8px 0;cursor:pointer;margin-top:5px}
.motion-link span{color:var(--amber);font-size:10px}
.motion-badge{position:absolute;bottom:10px;right:10px;border:1px solid var(--line);background:rgba(20,20,18,.9);font-size:10px;letter-spacing:.08em;padding:4px 8px;color:var(--fg)}
.related{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;font-size:12px;margin-top:26px}
.related>span{color:var(--fg-2)}
.vfig video{max-height:calc(100dvh - 160px);max-width:100%;width:auto;height:auto;object-fit:contain}
.vtop{min-height:48px}.vtop>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vtop button{flex-shrink:0}
.vbot{flex-wrap:wrap;gap:8px}.v-modes{display:flex;gap:6px}.v-modes:empty{display:none}
.v-modes button[aria-pressed="true"]{border-color:var(--accent);color:var(--fg)}
.hero .foreground{position:relative;height:100%;width:100%;line-height:0;animation:driftC 23s ease-in-out infinite alternate}
.hero .foreground>img:not(.fig){display:block;height:100%;width:auto;max-width:none}
.hero .dep.d2{aspect-ratio:2/1}
.hero .dep .fig{left:79.531%;top:59.22%;width:2.969%;height:auto;transform-origin:53% 100%;animation:none;will-change:transform}
.hero .d2>img{animation:none}
.hero.motion-paused .dep>img,.hero.motion-paused .foreground{animation-play-state:paused}
@media(min-width:820px){.hero .foreground{height:auto}.hero .foreground>img:not(.fig){width:100%;height:auto}}
@media(hover:hover) and (pointer:fine){.motion-link:hover{color:var(--amber);border-color:var(--amber)}}
@media(max-width:520px){.v-modes{width:100%;justify-content:center}.vfig img,.vfig video{max-height:calc(100dvh - 190px)}.vtop{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero .foreground,.hero .dep>img{animation:none!important}button:active,.btn:active{transform:none}.hero .fig{transform:none!important}}

.keyboard-input button,.keyboard-input .btn{transition:none}.keyboard-input button:active,.keyboard-input .btn:active{transform:none}
.hero .dsky{background:#1c1c1c}.hero .dsky>img,.hero .d0>img,.hero .d1>img{clip-path:url(#landscape-without-figure)}

/* Static line art. No parallax, drift, figure animation or separate scene layers. */
:root{--bg:#000000}
.hero{background:#000}
.hero-sketch{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center bottom;opacity:.58;pointer-events:none}
.hero .dep,.hero .dep *{animation:none!important;transform:none!important;transition:none!important}
.hero .veilbottom{background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.78) 66%,#000 100%)}
.about figure,.mascot{background:#000}
.about figure img,.mascot img{mix-blend-mode:screen;opacity:.76}

/* Archivo gráfico */
:root{--bg:#000;--bg-2:#080808;--fg:#EEE9DF;--fg-2:#A39E92;--line:#3A3832;--accent:#D34A28;--amber:#D9A233;--gut:clamp(18px,4vw,56px);--gap:18px;--max:1440px}
body{font-family:'Grieffed Mono',Consolas,monospace;font-size:13px;line-height:1.7}
header.site{background:rgba(0,0,0,.96);border-color:var(--line)}
.bar{height:78px;gap:24px}.brand{font-size:13px;letter-spacing:.1em}.brand small{font-size:10px;letter-spacing:.18em}
.brand img{width:23px}nav.main{gap:24px}nav.main a{font-size:11px;letter-spacing:.03em;text-transform:none}
nav.main a[aria-current="page"]{border-bottom-color:var(--accent)}
.lang button{font-size:10px}
.hero{max-width:var(--max);margin:0 auto;height:auto;min-height:440px;border-bottom:1px solid var(--line);overflow:hidden;background:#000}
.hero .stage{inset:auto var(--gut) 28px auto;width:54%;height:365px}
.hero-sketch{object-fit:contain;object-position:right center;opacity:.92;filter:brightness(2.4) drop-shadow(0 0 .3px #999)}
.hero .veilbottom{display:none}
.hero .copy{position:relative;inset:auto;padding:40px var(--gut) 36px;pointer-events:none}
.hero .copy .inner{margin:0;max-width:100%}
.hero .copy h1{font-size:clamp(58px,6.7vw,94px);line-height:1.02;font-weight:700;letter-spacing:-.065em;max-width:48%;margin:0 0 22px}
.hero .copy h1 span{display:block}
.hero .copy .tagline{display:table;max-width:48%;margin:0;padding:6px 12px;background:var(--accent);color:#000;font-size:clamp(10px,1vw,13px);letter-spacing:0;line-height:1.55;text-transform:none}
.hero .copy p{max-width:43%;font-size:12px;line-height:1.8;margin-top:22px;color:var(--fg-2)}
.hero .copy .quick{max-width:50%;margin-top:26px;gap:20px;pointer-events:auto}
.hero .quick .btn{padding:8px 0;border:0;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:0;text-transform:none;min-height:38px}
.secline{font-size:11px;color:var(--accent);font-weight:700;letter-spacing:.1em;margin:26px 0 20px}
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));columns:auto;padding-top:0;gap:18px}
.picks .card{margin:0}.card{border:1px solid var(--line);padding:12px;background:var(--bg-2);transition:border-color 150ms ease}
.card>a{overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.card img{border:0;transition:none}.picks .card>a>img{aspect-ratio:1;object-fit:contain;background:#000}
.card .label{display:block;margin-top:12px;padding:10px 0 0;border-top:1px solid var(--line)}
.card .label b{display:block;border:0;padding:0;font-size:12px;text-transform:none;font-weight:700;letter-spacing:0}
.card .label .tags{margin-top:4px;gap:5px}.tag{font-size:9px;letter-spacing:0;text-transform:none}
.grid .card{margin-bottom:18px}.grid{column-gap:18px;padding-top:18px}
.allwork{padding:25px 0 44px;margin:0}.allwork a{font-size:11px;letter-spacing:0;text-transform:none}
.band{padding:0 0 14px;background:none;color:var(--fg);border-bottom:1px solid var(--line);font-size:clamp(22px,3vw,35px);letter-spacing:-.035em}
.masthead h1.band{font-size:clamp(26px,4vw,44px)}
.tabs{gap:12px}.tabs button{padding:10px 4px;font-size:11px;letter-spacing:.025em}
.project .top{padding-bottom:20px}.project h1{border:0;padding:0;font-size:clamp(25px,3.2vw,42px);letter-spacing:-.035em}
.project .text{font-size:13px;line-height:1.85}.project .kind .tag{font-size:10px;letter-spacing:0}
.project .stack{max-width:980px;margin:0 auto;gap:24px}.project .pages{gap:18px}
.zoom img{border:1px solid var(--line)}.zoom .cap{font-size:10px;text-transform:none;letter-spacing:0;border:0;padding-left:0}
.page{padding-top:38px}.about{grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:52px}
.about .bio{font-size:14px;line-height:1.9}.about h2{background:none;color:var(--accent);border-bottom:1px solid var(--line);padding:10px 0;font-size:12px;letter-spacing:.05em}
.about li{font-size:11px;line-height:1.7;gap:14px}.about li span.r{font-size:10px}
.about figure img,.mascot img{opacity:.82}.chips li{font-size:11px;padding:5px 9px}
.contact-grid{grid-template-columns:minmax(0,1fr) 320px;min-height:520px;gap:38px}
.contact-grid .mail{font-size:clamp(17px,2.8vw,30px)}
.btn{font-size:10px;letter-spacing:.03em;min-height:40px}.links{font-size:11px}
footer.site{font-size:10px;line-height:1.8;border-color:var(--line)}
dialog.viewer{background:#000}.vtop,.vbot{font-size:10px}.viewer button{font-family:inherit}
.vfig{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
img,video{-webkit-user-drag:none;-webkit-touch-callout:none}
@media(hover:hover) and (pointer:fine){
 .card:hover,.card:focus-within{border-color:var(--accent)}
 .hero .quick .btn:hover{border-color:var(--accent)}
 .allwork a:hover{color:var(--fg)}
}
@media(max-width:1050px){
 .hero .stage{width:49%;height:340px}.hero .copy .tagline{max-width:52%}.hero .copy p{max-width:49%}
 .bar{gap:16px}nav.main{gap:16px}
 .about{gap:30px}.contact-grid{grid-template-columns:minmax(0,1fr) 250px}
}
@media(max-width:800px){
 .bar{height:auto;min-height:74px;padding:14px 0;flex-wrap:wrap;gap:10px}
 nav.main{order:3;width:100%;margin-left:0;gap:24px}.lang{margin-left:auto}
 .hero{min-height:0}.hero .copy{padding-top:28px;padding-bottom:28px}
 .hero .copy h1{font-size:64px;max-width:52%}
 .hero .copy p{max-width:52%;font-size:11px}.hero .copy .tagline{max-width:56%}
 .hero .stage{height:310px;width:45%;bottom:55px}
 .picks{grid-template-columns:repeat(2,minmax(0,1fr))}
 .about{grid-template-columns:230px minmax(0,1fr);gap:24px}
 .about li{flex-wrap:wrap}.contact-grid{grid-template-columns:minmax(0,1fr) 200px}
 .contact-grid .mail{font-size:18px}.contact-grid .btn{margin:12px 0 0}
}
@media(max-width:560px){
 .hero .copy h1{font-size:64px;max-width:100%}
 .hero .copy .tagline{max-width:100%;font-size:10px}
 .hero .copy p{max-width:100%;font-size:11px}
 .hero .copy .quick{max-width:100%;gap:16px}
 .hero .copy{padding-bottom:250px}
 .hero .stage{width:calc(100% - 36px);height:225px;right:18px;bottom:12px}
 .hero-sketch{opacity:.95}
 .picks{grid-template-columns:1fr}.card{padding:10px}.card .label b{font-size:13px}.tag{font-size:10px}
 .about{grid-template-columns:1fr}.about .side figure{max-width:230px;margin:0 auto!important}
 .contact-grid{grid-template-columns:1fr;min-height:0}.mascot img{margin:0 auto;max-width:260px}
 .contact-grid .mail{font-size:clamp(16px,5.5vw,25px)}
 .vtop>span{max-width:65vw}.tabs{gap:10px}.tabs button{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.card,button,.btn{transition:none!important}}


/* ---------- portada: escena de Selys ----------
   El dibujo de Álvaro es la base y no se toca. Encima va un SVG con el mismo
   viewBox que la lámina, así todo queda anclado a la ilustración y no se
   descoloca al cambiar el tamaño de pantalla.

   Una sola reproducción al abrir. Propósito: explicación — la portada cuenta
   que Selys es un mundo con historia dentro. */
.hero .plate{position:absolute;right:0;bottom:0;height:100%;width:auto;
  aspect-ratio:1336/775;max-width:100%;pointer-events:none}
@media (max-width:900px){
  /* sin fijar top y bottom a la vez: si se fijan los dos, la caja se estira,
     deja de tener la proporción de la lámina y el SVG se despega del dibujo */
  .hero .plate{width:100%;height:auto;top:auto;bottom:0;margin:0}
}
.hero .hero-sketch{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center}
.hero .scene{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero .scene image{opacity:.92;filter:brightness(2.4) drop-shadow(0 0 .3px #999)}
.hero .scene .ship{transform-box:fill-box;transform-origin:center}
.hero .scene .star{fill:#EEE9DF;opacity:.18}
.hero .scene .dust{fill:#EEE9DF;opacity:0}
.hero .scene .hatch{fill:#EEE9DF;opacity:0}
.hero .scene .glow{fill:#EEE9DF;opacity:.05}
.hero .scene .walker{stroke:#EEE9DF;stroke-width:1.5;stroke-linecap:round;
  fill:none;opacity:0}

/* estado de reposo: la nave empieza en su punto de órbita, no invisible */
.hero .scene .ship{opacity:.92}

@media (prefers-reduced-motion:reduce){
  /* se muestra directamente el plano final */
  .hero .scene .walker{opacity:.9}
  .hero .scene .hatch{opacity:.5}
}