/* Paleta de colores basada en la imagen */
html {
  background-color: #0e2a2c;
}
:root {
  --background-teal: #083437;
  --background-teal-light: #165659;
  --accent-mint: #1ee59f;
  --white-text: #ffffff;
  --dark-text: #0e2a2c;
}

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(
    160deg,
    var(--background-teal) 0%,
    var(--background-teal-light) 50%,
    var(--background-teal) 100%
  );
  color: var(--white-text);
}

/* Animaciones */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  80% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in-down {
  animation: fadeInDown 0.8s ease-out forwards;
}
.animate-pop-in {
  animation: popIn 0.5s ease-out forwards;
}

/* Transiciones del formulario */
.step {
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  will-change: opacity, transform;
}
.step.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: -9999px;
  transform: translateX(-20px);
}
.step.active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
}

.team-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
}

/* Botón deshabilitado */
.button-disabled {
  background-color: #1a6266;
  color: #8cb7ba;
  cursor: not-allowed;
  transform: none !important;
}
.button-disabled:hover {
  background-color: #1a6266;
}

.main-container {
  background-color: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vs-text {
  font-size: 4rem;
  font-weight: 900;
  color: var(--accent-mint);
  text-shadow: 0 0 15px rgba(30, 229, 159, 0.7);
  line-height: 1;
}

@media (max-width: 640px) {
  .team-logo {
    width: 56px;
    height: 56px;
  }
  .vs-text {
    font-size: 2rem;
  }
}