/* Estilos del sitio. Colores y tipografías: variables al inicio (:root). */
:root{--bg:#0d0d0d;--ink:#d4cfc4;--dim:#8a867c;--gold:#b7a468;--line:#242320;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font:500 15px/1.3 "Space Grotesk",system-ui,sans-serif}
body{position:relative}
.mono{font-family:"Roboto Mono",ui-monospace,monospace;font-weight:300;font-size:12px}
button{font:inherit;color:inherit;background:none;border:0;padding:2px 0;cursor:pointer}
button[aria-pressed=true]{color:var(--gold)}
a{color:inherit;text-decoration:none}
a:hover,button:hover{color:var(--gold)}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
header{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;gap:1rem;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 24px;background:linear-gradient(var(--bg) 55%,transparent);pointer-events:none}
header>*{pointer-events:auto}
nav{text-align:right}nav a{margin-left:.8rem;display:inline-block}
.view{position:absolute;inset:0;display:none}
.view.on{display:block}
.hud{position:fixed;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);color:var(--dim)}
img{display:block;width:100%}
.star img{filter:brightness(.8);transition:filter .3s}
.star:hover img{filter:none}
figcaption{margin-top:6px;color:var(--dim)}
#hint{position:fixed;left:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 62px);color:var(--dim);transition:opacity .6s}
/* B: constelación */
#b{overflow:hidden;cursor:grab;touch-action:none}
#field{position:absolute;left:0;top:0;width:2600px;height:1700px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:200px 200px}
.star{position:absolute;margin:0;cursor:pointer}
.star img{pointer-events:none;user-select:none}
#mm{position:fixed;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 40px);width:130px;height:85px;border:1px solid var(--line)}
#mm i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold)}
#mm b{position:absolute;border:1px solid var(--ink)}
#o,#s,#m,#v,#f,#x,#i,#c{overflow-y:auto;overflow-x:hidden;padding:calc(env(safe-area-inset-top,0px) + 110px) 3vw 14vh}
.top{display:flex;justify-content:space-between;gap:4vw;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;margin-bottom:9vw}
.top h2{margin:0;font-weight:500;font-size:clamp(22px,2.6vw,34px)}
.top h2 .mono{color:var(--dim);margin-right:.8rem}
.top p{margin:0;max-width:44ch;color:var(--dim);line-height:1.7}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:6vw 2vw;align-items:start}
.g figure{margin:calc(var(--m)*1vw) 0 0;grid-column:var(--c)/span var(--s);cursor:pointer}
.g img{filter:brightness(.92);transition:filter .3s}
.g figure:hover img{filter:none}
.sub{grid-column:1/-1;margin:4vw 0 -2vw;color:var(--dim);border-top:1px solid var(--line);padding-top:10px}
nav a[aria-current],#home:hover{color:var(--gold)}
.mt{display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw;border-top:1px solid var(--line);padding-top:3vw}
.mt .side{grid-column:1/span 4;position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);align-self:start;font-size:clamp(15px,1.2vw,18px);line-height:1.65}
.mt .side p{margin:0 0 1.2em}
.mt .im{grid-column:5/-1;display:grid;gap:4vw}
.mt figure{margin:0}
.vf{position:relative;display:block;max-width:min(100%,720px);margin:0 0 4vw;border-top:1px solid var(--line);padding-top:3vw}
.vf img{filter:brightness(.88);transition:filter .3s}
.vf:hover img,.vf:focus-visible img{filter:none}
.vf>span{position:absolute;left:14px;bottom:14px;background:rgba(13,13,13,.78);padding:6px 10px}
.vt{display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw}
.vt .tx{grid-column:1/span 6;margin:0;line-height:1.65;font-size:clamp(15px,1.2vw,18px)}
.vt .ac{grid-column:8/-1;margin:0;color:var(--dim);line-height:2}
.vt .ac b{color:var(--ink);font-weight:400}
.ir{display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw;align-items:start;border-top:1px solid var(--line);padding:1.4vw 0 3vw;color:inherit}
.ir img{grid-column:1/span 3;aspect-ratio:3/2;object-fit:cover;filter:brightness(.85);transition:filter .3s}
.ir .in{grid-column:9/-1;display:flex;flex-direction:column;gap:6px}
.ir .in b{font:500 clamp(22px,2.4vw,32px)/1.1 "Space Grotesk",system-ui,sans-serif;color:var(--ink)}
.ir .in>span{color:var(--dim)}
.ir:hover .in b,.ir:hover .go{color:var(--gold)}
.ir:hover img{filter:none}
.ct{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}
.ct li{display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw;align-items:baseline;border-bottom:1px solid var(--line);padding:1.6vw 0}
.ct .mono{grid-column:1/span 3;color:var(--dim)}
.ct .v{grid-column:4/-1;font-size:clamp(16px,1.6vw,22px);font-weight:500;overflow-wrap:anywhere}
.ct a:hover{color:var(--gold)}
@media(max-width:760px){.ir img{grid-column:1/span 5}.ir .in{grid-column:7/-1}.ct .mono,.ct .v{grid-column:1/-1}.ct .v{margin-top:4px}.ct li{padding:4vw 0}}
.ex{display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw;border-top:1px solid var(--line);padding:1.6vw 0 4vw}
.ex .d{grid-column:1/span 4;color:var(--dim);line-height:1.7}
.ex .d b{display:block;color:var(--ink);font:500 clamp(18px,1.8vw,24px)/1.3 "Space Grotesk",system-ui,sans-serif}
.ex .n{grid-column:5/span 8}
.ex h3{margin:0 0 .3em;font-weight:500;font-size:clamp(24px,3vw,40px);line-height:1.1}
.ex .n p{margin:0;color:var(--dim);line-height:1.8}
.ex .n .pl{color:var(--ink);margin-bottom:1em}
.ex .n a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ex .n a:hover{color:var(--gold)}
@media(max-width:760px){.ex .d,.ex .n{grid-column:1/-1}.ex .n{margin-top:4vw}}
.soon{margin:0;border-top:1px solid var(--line);padding-top:3vw;font-size:clamp(20px,2.6vw,34px);font-weight:500;line-height:1}
#logo{position:fixed;left:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);width:130px;height:auto;opacity:.9;pointer-events:none}
#lang{margin-left:.9rem;color:var(--dim);white-space:nowrap}#lang button{padding:0 2px}
#by{font-size:16px;position:fixed;left:14px;top:calc(env(safe-area-inset-top,0px) + 84px);margin:0;color:var(--dim)}
@media(max-width:760px){nav a{margin-left:.5rem;font-size:13px}}
@media(max-width:760px){.vt .tx,.vt .ac{grid-column:1/-1}.vt .ac{margin-top:6vw}}
@media(max-width:760px){.mt .side,.mt .im{grid-column:1/-1}.mt .side{position:static;margin-bottom:6vw}}
.st{display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw;border-top:1px solid var(--line);padding:3vw 0 7vw}
.st .side{grid-column:1/span 4;position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);align-self:start}
.st .side p{margin:6px 0 0;color:var(--dim)}
.st .tx{grid-column:6/span 6}
.st h3{margin:0 0 1.4em;font-weight:500;font-size:clamp(20px,2.2vw,28px)}
.st .tx p{margin:0 0 1.2em;font-size:clamp(16px,1.25vw,19px);line-height:1.65;max-width:62ch}
@media(max-width:760px){.st .side,.st .tx{grid-column:1/-1}.st .side{position:static;width:60%;margin-bottom:6vw}}
@media(max-width:760px){.g{grid-template-columns:repeat(6,1fr)}.g figure:nth-of-type(odd){grid-column:1/span 4;margin-top:0}.g figure:nth-of-type(even){grid-column:3/span 4;margin-top:6vw}.top{flex-direction:column;gap:3vh}}
@media(prefers-reduced-motion:reduce){.g img{transition:none}}
/* visor */
#lb{position:fixed;inset:0;z-index:50;background:rgba(13,13,13,.97);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);gap:4vw;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 60px) 5vw calc(env(safe-area-inset-bottom,0px) + 24px)}
#lb[hidden]{display:none}
#lbi{width:auto;max-width:100%;max-height:78vh;justify-self:center}
#lbx,#lbn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px)}
#lbx{right:5vw}#lbn{left:5vw;color:var(--dim)}
#lb p{margin:0 0 1em;line-height:1.7;color:var(--ink)}
@media(max-width:760px){
#lb{grid-template-columns:1fr;align-content:center;gap:2vh}
#mm{width:96px;height:63px}}
@media(prefers-reduced-motion:reduce){.star img{transition:none}}

html[lang="en"] .es,html[lang="es"] .en{display:none}