:root {
  --navy: #05193c;
  --navy-700: #0d2b5e;
  --gold: #e9c686;
  --gold-soft: #f5e6c8;
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Jost", ui-sans-serif, system-ui, sans-serif;
  --t-slow: 320ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  min-height: 100%;
  background-color: var(--navy);
}

body {
  font-family: var(--font-sans);
  color: var(--gold-soft);
  -webkit-font-smoothing: antialiased;
}

.portada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 100dvh;
  padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
  text-align: center;
}

.logo {
  width: min(20rem, 80vw);
  height: auto;
  margin-bottom: 1.5rem;
  animation: entrar var(--t-slow) var(--ease-out) both;
}

.titulo {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--gold);
  animation: entrar var(--t-slow) var(--ease-out) 80ms both;
}

.texto {
  max-width: 22rem;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  animation: entrar var(--t-slow) var(--ease-out) 160ms both;
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Menos movimiento: se queda el aparecer, se quita el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  @keyframes entrar {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}