:root{
  --cobalto:#2340d8;
  --papel:#f3f4ff;
  --lila:#b9c3ff;
  --sol:#ffd23f;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color:var(--cobalto);
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:48px 48px;
  color:var(--papel);
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  padding:clamp(1.5rem,5vw,4rem);
}
header{font-weight:500;font-size:1rem;color:var(--lila)}
main{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:60rem;
}
h1{
  font-weight:800;
  font-size:clamp(3.5rem,14vw,11rem);
  line-height:.9;
  letter-spacing:-.045em;
  font-variation-settings:"opsz" 96;
}
h1 .l{
  display:inline-block;
  opacity:0;
  transform:translateY(.25em);
  animation:sube .5s cubic-bezier(.2,.7,.2,1) forwards;
}
h1 .obra{
  display:inline-block;
  width:.08em;
  height:.72em;
  margin-left:.06em;
  background:var(--sol);
  animation:parpadeo 1.1s steps(1) infinite;
}
@keyframes sube{to{opacity:1;transform:none}}
@keyframes parpadeo{50%{opacity:0}}
.texto{
  margin-top:clamp(1.5rem,4vw,2.5rem);
  max-width:32rem;
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.45;
}
.links{
  margin-top:2rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  font-size:1.05rem;
}
a{
  color:var(--papel);
  text-decoration:underline;
  text-decoration-color:var(--sol);
  text-decoration-thickness:3px;
  text-underline-offset:5px;
}
a:hover{color:var(--sol)}
a:focus-visible{outline:3px solid var(--sol);outline-offset:4px;border-radius:2px}
footer{font-size:.9rem;color:var(--lila)}
@media (prefers-reduced-motion:reduce){
  h1 .l{animation:none;opacity:1;transform:none}
  h1 .obra{animation:none}
}