:root { --fondo: #eef1f4; --tinta: #1d2733; --acento: #0f6f7c; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, var(--fondo) 75%);
  color: var(--tinta);
  font-family: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
}
main { display: flex; flex-direction: column; align-items: center; }
h1 {
  font-size: clamp(3rem, 11vw, 7.5rem); font-weight: 300; line-height: 1;
  letter-spacing: .35em; padding-left: .35em;
  animation: aparecer .9s ease-out both;
}
main::after {
  content: ""; width: 64px; height: 2px; margin-top: 28px; background: var(--acento);
  animation: crecer .9s .3s ease-out both;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes crecer { from { width: 0; } to { width: 64px; } }
@media (prefers-reduced-motion: reduce) { h1, main::after { animation: none; } }