:root{
  --bg:#0c0e10; --ink:#e6e4dd; --dim:#8b9096; --accent:#ffb454;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,monospace;
  display:flex; flex-direction:column; min-height:100dvh;
}
[data-lang="es"] [lang="en"]{display:none}
[data-lang="en"] [lang="es"]{display:none}

header{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 2rem; font-size:.8rem; color:var(--dim);
}
.lang button{
  background:none; border:none; color:var(--dim); font:inherit; cursor:pointer; padding:.25rem .5rem;
}
.lang button[aria-pressed="true"]{color:var(--accent)}
.lang button:hover{color:var(--ink)}

main{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:0 2rem 4rem; max-width:52rem; width:100%; margin:0 auto;
}
.prompt{color:var(--dim); font-size:.85rem; margin-bottom:1rem}
h1{
  font-size:clamp(2.5rem,9vw,5.5rem); font-weight:500; letter-spacing:-.03em; line-height:1;
}
h1 .tld{color:var(--accent)}
.cursor{
  display:inline-block; width:.55em; height:.9em; background:var(--ink);
  margin-left:.12em; vertical-align:baseline;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}

.tagline{margin-top:1.75rem; color:var(--dim); font-size:.95rem; line-height:1.6; max-width:34rem}
.mail{margin-top:2.5rem; font-size:.95rem}
.mail a{
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--accent); padding-bottom:2px;
}
.mail a:hover{color:var(--accent)}
.mail .lbl{color:var(--dim)}