/* Páginas simples del sitio (privacidad.html y 404.html). Misma paleta, fuentes y marco que las ventanas de la
   página principal (.win de hero-preview-story-golden-forest.html), sin animaciones ni scripts.
   build_site.py le pone hash al nombre de este archivo y de las fuentes, y reescribe estas url(). */
@font-face{font-family:"Metamorphous";src:url("../fonts/Metamorphous-Regular.55939a5664.ttf") format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"Special Gothic SemiCondensed";src:url("../fonts/SpecialGothic_SemiCondensed-SemiBold.0b2980ff01.ttf") format("truetype");font-weight:600;font-display:block}
@font-face{font-family:"Ovo";src:url("../fonts/Ovo-Regular.36f8e3a5f8.ttf") format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"Tenor Sans";src:url("../fonts/TenorSans-Regular.108943081c.ttf") format("truetype");font-weight:400;font-display:block}
:root{--bg:#050508;--ivory:#efe9dc;--gold:#B79A60}
html{background:var(--bg)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding:28px 16px 40px;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,#14121c 0%,var(--bg) 70%);color:#e9e3d4}
.brand{margin:0 0 26px;font:400 22px/1 "Metamorphous",serif;letter-spacing:.08em;color:#c9c6d6;text-decoration:none;text-shadow:0 1px 0 #000}
.brand:hover{color:var(--ivory)}
.frame{position:relative;display:flex;width:min(680px,100%);box-sizing:border-box;padding:10px;border-radius:2px;
  background:linear-gradient(180deg,#5f5d72,#38364a);filter:drop-shadow(0 18px 30px rgba(0,0,0,.7));
  box-shadow:inset 0 1px 0 rgba(235,232,255,.45),inset 0 -2px 0 rgba(0,0,0,.7),0 0 0 1px #0b0a12}
.lip{flex:1;display:flex;min-width:0;padding:3px 3px 5px;
  background:linear-gradient(180deg,#d2d1de 0,#8e8c9f 1.5px,#4c4b5c 3px) top/100% 3px no-repeat,
             linear-gradient(0deg,#e1e0ea 0,#a9a8b8 2px,#6c6a7e 4px,#3a394a 5px) bottom/100% 5px no-repeat,
             linear-gradient(90deg,#b4b3c4,#5b5a6c 3px) left/3px 100% no-repeat,
             linear-gradient(270deg,#24232e,#4b4a5a 3px) right/3px 100% no-repeat,#2a2935}
.inset{flex:1;min-width:0;padding:24px 28px 26px;background:linear-gradient(180deg,rgba(1,1,5,.97),rgba(9,9,15,.96));
  box-shadow:inset 0 3px 7px #000,inset 0 -1px 0 rgba(255,255,255,.06)}
.gem{position:absolute;width:8px;height:8px;transform:rotate(45deg);
  background:linear-gradient(135deg,#efe0b3,var(--gold) 45%,#5d4a26);box-shadow:0 0 0 1px #17140c,0 1px 2px rgba(0,0,0,.8)}
.gem.tl{left:2px;top:2px}.gem.tr{right:2px;top:2px}.gem.bl{left:2px;bottom:2px}.gem.br{right:2px;bottom:2px}
.kicker{margin:0 0 7px;font:600 11px/1 "Special Gothic SemiCondensed",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
h1{margin:0;font:400 32px/1.1 "Ovo",serif;color:#f1e9d6;text-shadow:0 1px 0 #000}
h2{margin:22px 0 6px;font:400 20px/1.2 "Ovo",serif;color:#f1e9d6}
.rule{height:1px;margin:14px 0 16px;background:linear-gradient(90deg,rgba(183,154,96,.6),rgba(183,154,96,.12) 70%,transparent)}
p,li{font:400 15px/1.6 "Tenor Sans",sans-serif;color:#e6dfcf}
p{margin:0 0 10px}
ul{margin:0 0 10px;padding-left:20px}
li{margin:0 0 4px}
strong{font-weight:400;color:#f1e9d6}
a{color:#e3cf9c;text-decoration:underline;text-decoration-color:rgba(183,154,96,.5);text-underline-offset:2px}
a:hover{color:#fff7e6}
a:focus-visible{outline:2px solid #c9b07a;outline-offset:2px}
.foot{margin:16px 0 0;font:400 12px/1.4 "Tenor Sans",sans-serif;letter-spacing:.04em;color:#77788D}
.back{display:inline-block;margin:10px 0 0;padding:11px 20px;border:1px solid rgba(183,154,96,.55);border-radius:2px;background:#0b0b10;
  font:600 13px/1 "Special Gothic SemiCondensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#f1e9d6;text-decoration:none}
.back:hover{border-color:#c9b07a;color:#fff7e6}
@media (max-width:520px){.inset{padding:18px 18px 20px}h1{font-size:27px}p,li{font-size:14.5px}}
