@font-face{font-family:"Anton";src:url("https://naosemeta-ato.b-cdn.net/fonts/Anton-Regular.ttf") format("truetype"),url("fonts/Anton-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("https://naosemeta-ato.b-cdn.net/fonts/ChakraPetch-Regular.ttf") format("truetype"),url("fonts/ChakraPetch-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("https://naosemeta-ato.b-cdn.net/fonts/ChakraPetch-Bold.ttf") format("truetype"),url("fonts/ChakraPetch-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--red:#ff0000;--yellow:#fff800;--green:#1bde7c;--ink:#1a0000;--display:"Anton",Impact,sans-serif;--body:"Chakra Petch",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--red);color:var(--yellow);font-family:var(--body)}
.page{max-width:560px;margin:0 auto;padding:28px 20px 40px;display:flex;flex-direction:column;gap:26px}
.art{text-align:center}
.art-img{display:block;width:100%;height:auto}
.when{margin:14px 0 0;font:700 clamp(13px,3.6vw,16px)/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase}
.when b{color:var(--green)}
.links{display:grid;gap:14px}
.btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px;padding:16px 24px;background:var(--yellow);color:var(--red);border:3px solid var(--yellow);border-radius:14px;text-decoration:none;font:400 clamp(24px,6.5vw,32px)/1 var(--display);letter-spacing:.02em;text-transform:uppercase;text-align:left;cursor:pointer;transition:transform .12s,background .12s,border-color .12s,color .12s}
.btn i{font:700 22px var(--body);font-style:normal}
.btn:hover,.btn:focus-visible{transform:translateY(-3px);background:var(--green);border-color:var(--green);color:var(--ink)}
.btn:focus-visible,.copy:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn.off{background:transparent;color:var(--yellow);border-style:dashed;cursor:default;opacity:.85}
.btn.off i{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.btn.off:hover{transform:none;background:transparent;border-color:var(--yellow);color:var(--yellow)}
.panel{margin-top:10px;padding:18px;background:var(--ink);border:3px solid var(--yellow);border-radius:14px}
.panel[hidden]{display:none}
.panel pre{margin:0 0 14px;white-space:pre-wrap;word-break:break-word;font:400 15px/1.5 var(--body);color:var(--yellow);user-select:all}
.copy{width:100%;padding:14px;background:var(--green);color:var(--ink);border:0;border-radius:10px;font:700 16px var(--body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.copy:hover{background:var(--yellow)}
.copy-status{min-height:1.4em;margin:10px 0 0;text-align:center;font:700 14px var(--body);color:var(--green)}
.foot{text-align:center;font:700 12px var(--body);letter-spacing:.14em;opacity:.8}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover,.btn:focus-visible{transform:none}}

/* página de artes */
.back{align-self:flex-start;color:var(--yellow);font:700 14px var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.back:hover,.back:focus-visible{text-decoration:underline}
.title{margin:0;font:400 clamp(40px,11vw,56px)/1 var(--display);text-transform:uppercase}
.hint{margin:0;font:400 15px/1.45 var(--body)}
.gallery{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:26px}
.gallery img{display:block;width:100%;height:auto;border:3px solid var(--yellow);border-radius:10px;background:var(--ink)}
.dl{display:block;margin-top:10px;padding:14px;background:var(--yellow);color:var(--red);border-radius:10px;text-align:center;text-decoration:none;font:700 16px var(--body);letter-spacing:.05em;text-transform:uppercase}
.dl:hover,.dl:focus-visible{background:var(--green);color:var(--ink)}
.dl:focus-visible{outline:3px solid #fff;outline-offset:3px}