:root{
  --bg:#fafafa; --fg:#16181d; --dim:#6b7280; --accent:#4056f0;
  --border:#e3e5ea; --field:#fff; --danger:#d23b3b; --radius:.65rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101216; --fg:#e8e9ec; --dim:#98a0ac; --accent:#7486ff;
    --border:#272c34; --field:#171a1f;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{color-scheme:light dark}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 1rem/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
main{
  max-width:440px; margin:0 auto; padding:clamp(2.5rem,8vh,5rem) 1.25rem 2rem;
  min-height:100svh; display:flex; flex-direction:column;
}
.hero{margin-bottom:2.2rem}
.logo{font-size:clamp(3rem,10vw,4rem); font-weight:800; letter-spacing:-.045em; margin:0; line-height:1}
.dot{color:var(--accent)}

.links{display:flex; flex-direction:column; gap:1.1rem}
.link{
  display:flex; flex-direction:column; gap:.35rem;
  padding:1rem 1.1rem; background:var(--field);
  border:1.5px solid var(--border); border-radius:var(--radius);
  text-decoration:none; transition:border-color .15s;
}
.link:hover{border-color:var(--accent)}
.link-label{font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--dim)}
.link-url{
  color:var(--fg); font:600 1.05rem/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.arrow{font-weight:400; color:var(--accent)}

.firma{margin:2.5rem 0 0; text-align:center}
.firma img{width:260px; height:auto; opacity:.85}