@font-face{font-family:Jost;font-weight:300;font-display:swap;src:url(fonts/Jost-300.woff2) format('woff2')}
@font-face{font-family:Jost;font-weight:400;font-display:swap;src:url(fonts/Jost-400.woff2) format('woff2')}
@font-face{font-family:Jost;font-weight:500;font-display:swap;src:url(fonts/Jost-500.woff2) format('woff2')}
:root{--bone:#f1ece0;--ink:#15130f;--gold:#d9b46c;--line-d:#39425f;--line-l:#c9c0ac;
 --S:min(46vw,76lvh);--ox:.22;--oy:-.03}
@media (max-aspect-ratio:9/10){:root{--S:min(84vw,40lvh);--ox:.02;--oy:-.075}}
*{box-sizing:border-box;margin:0}
html{background:#0e1b4d;-webkit-text-size-adjust:100%}
body{font:300 18px/1.6 Jost,system-ui,sans-serif;color:var(--bone);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
#bg{position:fixed;inset:0;height:100lvh;background:#0e1b4d;z-index:0}
#bg:after{content:"";position:absolute;inset:0;background:radial-gradient(70% 62% at 50% 46%,#ffffff17,#ffffff00 70%),radial-gradient(120% 100% at 50% 50%,#00000000 55%,#00000038)}
#ring,#poster{position:fixed;z-index:2;pointer-events:none}
#ring{inset:0;width:100%;height:100lvh;display:block;opacity:0}
#ring.live{opacity:1}
#poster{left:calc(50% + var(--ox)*100vw);top:calc(50lvh - var(--oy)*100lvh);width:calc(var(--S)*1.3);height:calc(var(--S)*1.3);transform:translate(-50%,-50%)}
body:after{content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

.nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 clamp(16px,3vw,48px)}
.logo{font:400 26px/1 Italiana,serif;letter-spacing:.14em;text-decoration:none}
.nav ul{display:flex;gap:32px;list-style:none;padding:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.nav ul a{text-decoration:none;display:block;padding:12px 0;transition:color .15s ease-out}
.nav ul a:hover{color:var(--gold)}
.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:400}

section{position:relative;z-index:3}
h1,h2{font-family:Italiana,serif;font-weight:400;letter-spacing:-.015em;line-height:1}
h1{font-size:min(13.6vw,27lvh)}
h2{font-size:clamp(48px,7.4vw,120px)}
.lede{font-size:clamp(18px,1.5vw,22px);line-height:1.55;max-width:30em}

#hero{height:100svh;min-height:540px;z-index:1;padding:clamp(88px,15vh,140px) clamp(16px,3vw,48px) 32px;display:flex;flex-direction:column}
#hero .eyebrow{margin-bottom:24px}
.hero-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;position:relative;z-index:4;padding-bottom:16px}
.hero-foot .lede{max-width:24em}
.go{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:12px 0;font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;transition:color .15s ease-out}
.go:hover{color:var(--gold)}
.go:active{transform:scale(.98)}
.tag{position:absolute;right:clamp(16px,3vw,48px);bottom:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.72;font-weight:400}

.chapter{padding:0 clamp(16px,6vw,96px)}
.hold{position:absolute;left:0;right:0}
.pin{position:sticky;top:0;height:100lvh;display:flex;align-items:center;padding:0 clamp(16px,6vw,96px)}
.pin.end{justify-content:flex-end}
.pin.center{justify-content:center;text-align:center}
.block{display:flex;flex-direction:column;gap:24px;max-width:min(38vw,560px)}
.rv{transform:translateY(24px);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s cubic-bezier(.2,.8,.2,1);opacity:0}
.rv.in{transform:none;opacity:1}
#lapis{height:400lvh}
.scrim{padding:64px clamp(24px,5vw,72px);background:radial-gradient(closest-side,#060f3ae6 35%,#060f3a00);max-width:820px}
.scrim h2{font-size:clamp(44px,6vw,92px);margin-bottom:16px}
.scrim .lede{margin:0 auto}
#crisocola{height:230lvh}
#obsidiana{height:230lvh;color:var(--ink)}
#pieza{height:300lvh;color:var(--ink)}
#pieza .sticky{position:sticky;top:0;height:100lvh;display:flex;flex-direction:column;justify-content:center;gap:32px;max-width:min(38vw,560px)}
.parts{list-style:none;padding:0;display:grid;gap:0;counter-reset:p}
.parts li{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:16px 0;border-top:1px solid var(--line-l);font-size:17px;line-height:1.45}
.parts b{font-weight:500;display:block}
.num{font-size:13px;font-weight:500;line-height:24px}
.dot{position:fixed;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:#15130f;color:#f1ece0;font-size:13px;font-weight:500;line-height:28px;text-align:center;z-index:4;opacity:0;transition:opacity .2s ease-out;pointer-events:none;will-change:transform}
.dot.on{opacity:1}

#taller{background:#15130f;color:var(--bone);padding:clamp(96px,14vw,160px) clamp(16px,6vw,96px)}
#taller h2{max-width:11em;margin-bottom:64px}
#taller .stills figure:last-child{margin-bottom:96px}
.stills{display:grid;grid-template-columns:7fr 5fr;gap:16px;align-items:end}
.stills figure{overflow:hidden;background:#201d18}
.stills img{display:block;width:100%;height:auto;will-change:transform}
.stills figcaption{padding:12px 0 0;font-size:13px;letter-spacing:.06em}

#hazlo{min-height:100lvh;padding:96px clamp(16px,6vw,96px) 48px;display:flex;align-items:center;justify-content:flex-end}
.panel{width:min(100%,460px)}
.panel h2{margin-bottom:16px}
fieldset{border:0;padding:0;margin:32px 0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
legend,.fl{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin-bottom:12px;display:block;padding:0}
.st{position:relative;display:block;cursor:pointer}
.st input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.st span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 4px;border:1px solid #4d4f57;font-size:15px;font-weight:400;transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out}
.st input:checked+span{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.st input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.field{display:flex;gap:8px;margin-bottom:24px}
#grabado{flex:1;min-width:0;height:52px;padding:0 16px;background:transparent;border:1px solid #4d4f57;border-radius:0;color:inherit;font:400 20px/1 Italiana,serif;letter-spacing:.1em;text-transform:uppercase}
#grabado:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
#ver-grabado{height:52px;padding:0 16px;background:transparent;border:1px solid #4d4f57;color:inherit;font:400 13px/1 Jost,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .15s ease-out}
#ver-grabado:hover{border-color:var(--bone)}
.cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;background:var(--bone);color:var(--ink);font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:background-color .15s ease-out,transform .15s ease-out}
.cta:hover{background:#fff}
.cta:active{transform:scale(.98)}

#fin{background:#15130f;padding:clamp(96px,14vw,176px) clamp(16px,6vw,96px) 32px}
#fin h2{font-size:clamp(56px,11vw,180px);margin-bottom:40px}
#fin .lede{margin-bottom:48px;max-width:32em}
#fin .cta{display:inline-flex;width:auto;padding:0 32px}
.foot{margin-top:clamp(80px,12vw,144px);padding-top:16px;border-top:1px solid #3a372f;font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a{text-decoration-thickness:1px;text-underline-offset:4px}

@media (max-aspect-ratio:9/10){
 body{font-size:17px}
 .nav ul{display:none}
 h1{font-size:min(23vw,15lvh)}
 #hero{padding-top:88px}
 #hero .eyebrow{margin-bottom:16px}
 .hero-foot{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:24px}
 .tag{left:16px;right:auto;bottom:12px}
 .chapter{padding:0 16px}
 .pin,.pin.end{align-items:flex-end;justify-content:flex-start;padding:0 16px clamp(32px,8lvh,72px)}
 .pin.center{align-items:center;justify-content:center;padding:0 8px}
 .block{max-width:none;gap:12px}
 h2{font-size:clamp(44px,13vw,72px)}
 .scrim{padding:40px 16px}
 #pieza .sticky{max-width:none;justify-content:flex-end;gap:12px;padding-bottom:24px}
 .parts li{padding:8px 0;font-size:15px;line-height:1.35}
 #pieza h2{font-size:clamp(36px,10vw,56px)}
 .stills{grid-template-columns:1fr}
 #hazlo{align-items:flex-end;padding:40lvh 16px 32px}
 fieldset{margin:16px 0 16px}
 .panel h2{font-size:44px;margin-bottom:8px}
 .panel .lede{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.rv{transition:none;transform:none;opacity:1}}
.poster-mode #bg,.poster-mode #poster,.poster-mode section,.poster-mode .dot,.poster-mode:after{display:none!important}
.poster-mode,html:has(.poster-mode){background:transparent}
.poster-mode #ring{opacity:1}
[data-drag]{touch-action:pan-y}
.scrim .lede{font-weight:400}
.stills .frame{overflow:hidden}
html{scroll-behavior:smooth}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}