/* ——— Variables de color y tipografía ——— */
:root {
  --clr-bg:        #1e1f29;
  --clr-surface:   #2b2d3a;
  --clr-text:      #f2f2f2;
  --clr-accent:    #ffd166;
  --clr-success:   #50fa7b;
  --clr-danger:    #ff5555;
  --rad: 1rem;
  --font-main: 'Montserrat', sans-serif;
}

/* ——— Reset express ——— */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 20% 30%, #262736 0%, #1e1f29 70%);
  color: var(--clr-text);
  font-family: var(--font-main);
  line-height: 1.55;
  overflow-x: hidden;
}

/* ——— Banner ——— */
.banner {
  padding: 3.5rem 1rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, #2b2d3a 0%, #31324b 100%);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

.banner h1 {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--clr-accent);
  animation: fadeInDown .9s cubic-bezier(.61,.01,.25,1) both;
}

/* ——— Contenido principal ——— */
.container {
  flex: 1;
  width: min(90%, 720px);
  margin: 3rem auto 2rem;
  text-align: center;
}

.mensaje {
  font-size: 1.3rem;
  margin-bottom: 2.5rem;
  min-height: 3rem;          /* evita “salto” al cambiar texto */
  transition: color .4s ease;
}

/* ——— Botones ——— */
.btn-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.btn {
  padding: .9rem 2rem;
  border: none;
  border-radius: var(--rad);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .18s, filter .18s;
  user-select: none;
}

.btn-success { background: var(--clr-success); color: #1b1b1b; }
.btn-danger  { background: var(--clr-danger);  color: #f8f8f2;  }

.btn:hover   { filter: brightness(1.08); transform: translateY(-3px); }
.btn:active  { transform: scale(.96); }

.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ——— Footer ——— */
footer {
  text-align: center;
  padding: 1rem .5rem 2rem;
  font-size: .85rem;
  color: #9e9e9e;
}

/* ——— Animaciones clave ——— */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}