body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #ff4d6d, #ff99ac);
  color: white;
}

/* Contenedor centrado adaptable */
.contenedor {
  height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Texto adaptable */
h1 {
  font-size: 6vw; /* se adapta al tamaño de pantalla */
}

p {
  font-size: 5vw;
  margin-top: 20px;
}

/* Botón estilo app */
button {
  margin-top: 30px;
  padding: 15px;
  width: 80%;
  max-width: 300px;
  font-size: 5vw;
  border: none;
  border-radius: 30px;
  background: white;
  color: #ff4d6d;
}

/* Corazones */
.corazon {
  position: fixed;
  animation: flotar 5s linear infinite;
}

@keyframes flotar {
  0% { transform: translateY(100vh); opacity: 1; }
  100% { transform: translateY(-10vh); opacity: 0; }
}

/* Nombre animado */
.nombre {
  font-size: 8vw;
  font-weight: bold;
  min-height: 40px;
}

/* Cursor parpadeando */
.nombre::after {
  content: "|";
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Corazones explosión */
.corazon {
  position: fixed;
  animation: explotar 1.5s ease-out forwards;
}

@keyframes explotar {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(1.5);
    opacity: 0;
  }
}

/* ✨ Estrellas flotantes */
.estrella {
  position: fixed;
  font-size: 1.5vw;
  animation: flotarEstrella 8s ease-in-out infinite;
  z-index: 1;
}

@keyframes flotarEstrella {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.3; }
  50% { transform: translateY(-30px) translateX(20px) scale(1.2); opacity: 0.8; }
}

/* 🌟 Brillo automático en el nombre */
.nombre {
  animation: brillar 2.5s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

@keyframes brillar {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 77, 109, 0.6); }
  50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 77, 109, 0.9); }
}

/* 💫 Partículas brillantes */
.particula {
  position: fixed;
  pointer-events: none;
  animation: caerParticula 2s ease-out forwards;
}

@keyframes caerParticula {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(100px) translateX(50px) scale(0);
    opacity: 0;
  }
}

/* 💕 Confeti de corazones */
.confeti {
  position: fixed;
  pointer-events: none;
  animation: caerConfeti 3s ease-in forwards;
}

@keyframes caerConfeti {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 🎀 Efecto hover del botón */
button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 77, 109, 0.5);
  transition: all 0.3s ease;
}

button:active {
  transform: scale(0.98);
}

/* 🌈 Fondo animado alternativo */
@keyframes gradientShift {
  0% { background: linear-gradient(135deg, #ff4d6d, #ff99ac); }
  50% { background: linear-gradient(135deg, #ff99ac, #ffb3ba); }
  100% { background: linear-gradient(135deg, #ff4d6d, #ff99ac); }
}

/* 💗 Pulsación suave al cargar */
@keyframes pulsacion {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

p {
  animation: pulsacion 2s ease-in-out infinite;
}