:root{
  --yellow:#FDC524;
  --ink:#0B1220;
  --muted:#6B7280;
  --line: rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--ink);
  background:#fff;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/*
  Pediste: logo y textos centrados, pero ubicados "más abajo".
  Solución: main en columna (flex-direction: column), centrado horizontal con align-items:center,
  y empuje hacia abajo con padding-top responsivo.
*/
main{
  flex:1;
  display:flex;
  flex-direction:column;   /* clave para centrar horizontal */
  align-items:center;      /* centra horizontal */
  justify-content:flex-start;
  padding: clamp(88px, 18vh, 180px) 24px 24px;
}

.landing{
  width:min(720px, 100%);
  text-align:center;
}

.logo{
  width:min(560px, 100%);
  height:auto;
  display:block;
  margin:0 auto 24px;
}

.tagline{
  margin:0 0 22px;
  font-size:16px;
  color:var(--muted);
  font-weight:500;
  letter-spacing:.02em;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  font-weight:700;
  text-decoration:none;
  border:1px solid var(--line);
  background: linear-gradient(180deg, var(--yellow), #ffde6a);
  color:var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.08)}
.btn:focus{outline: 3px solid rgba(253,197,36,.35); outline-offset:2px}

/* Footer con línea a lo ancho */
.footer{width:100%;}
.footer-line{width:100%; border-top:1px solid var(--line);}
.footer-copy{
  text-align:center;
  padding:14px 24px 18px;
  font-size:12px;
  color:var(--muted);
}

@media (max-width: 420px){
  main{padding: clamp(64px, 14vh, 140px) 18px 18px}
  .tagline{font-size:15px}
}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
}