/* Base: tokens, fuentes, layout general, encabezado y controles */
/* Fuentes autoalojadas (SIL OFL 1.1, ver assets/fonts/LICENSE-*) */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/geist-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/geist-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/geist-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/geist-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/geist-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2")}
:root{
  color-scheme: dark;
  --desk:#140e09;
  --page:#141311; --page-2:#1b1916; --pink:#ece4d4; --psoft:#9d9384; --prule:rgba(236,228,212,.13);
  --cover:#0f0e0d;
  --brass:#c8a36a;
  --fg:#efe7da; --fg-soft:#a69b8b;
  --f-display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --f-body:"Geist","Segoe UI",system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --pw:max(150px, min(520px, 45vw, calc((100dvh - var(--vch,264px)) / 1.38)));
  --ph:calc(var(--pw) * 1.38);
  --flip:1000ms;
  --ease:cubic-bezier(.645,.045,.355,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html,body{height:100%}
body{margin:0;background:var(--desk);color:var(--fg);font-family:var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}

/* ---------- App ---------- */
.app{position:relative;z-index:1;min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));padding-block:0 18px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;padding-inline:clamp(0px,2vw,24px)}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.brand b{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1;text-transform:uppercase;white-space:nowrap;letter-spacing:.01em}
.brand span{font-family:var(--f-mono);font-size:12px;white-space:nowrap;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft)}
.actions{display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1px solid rgba(239,231,218,.18);border-radius:999px;padding:2px;background:rgba(10,8,6,.4)}
.lang button{background:none;border:0;padding:5px 10px;border-radius:999px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--fg-soft)}
.lang button[aria-pressed="true"]{background:var(--fg);color:var(--desk)}
.cta{background:var(--fg);color:var(--desk);border:0;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:500;white-space:nowrap}
.cta:hover{background:var(--brass)}
.intro{padding-inline:clamp(0px,2vw,24px);display:flex;flex-direction:column;gap:10px;max-width:600px}
.intro h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(32px,3.6vw,50px);line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.intro h1 em{color:var(--brass)}
.intro p{margin:0;font-family:var(--f-mono);font-size:11.5px;line-height:1.6;letter-spacing:.04em;color:var(--fg-soft);max-width:46ch}

/* ---------- Controles ---------- */
.controls{display:flex;align-items:center;justify-content:center;gap:14px;padding-block:6px}
.nav{width:42px;height:42px;border-radius:50%;border:1px solid rgba(239,231,218,.22);background:rgba(14,12,10,.6);display:grid;place-items:center;backdrop-filter:blur(6px)}
.nav:hover:not(:disabled){border-color:var(--brass);color:var(--brass)}
.nav:disabled{opacity:.3;cursor:default}
.nav svg{width:16px;height:16px}
.where{min-width:12ch;text-align:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft);font-variant-numeric:tabular-nums}

.where-w{display:grid;gap:7px;justify-items:center}
.progress{display:block;width:100%;min-width:12ch;height:2px;background:rgba(239,231,218,.12);border-radius:2px;overflow:hidden}
.progress.pm{display:none}
.progress i{display:block;height:100%;width:0;background:var(--brass);transition:width .6s var(--ease)}
.app>.top{order:0}.intro{order:1}.stage{order:2}.controls{order:3}.strip{order:5}.strip-hint{order:6}.guide{order:7}
#main{display:contents}
.noscript{position:relative;z-index:2;margin:24px;font-family:var(--f-mono);font-size:13px;color:var(--fg)}