body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #333;
  text-align: center;
  background: linear-gradient(135deg, #ffdee9 0%, #b5fffc 100%);
  overflow-x: hidden;
  transition: background 1s ease;
}

.escena {
  display: none;
  opacity: 0;
  min-height: 100vh;
  padding: 50px 20px;
  animation: fadeIn 1s ease forwards;
}

.activa {
  display: block;
  opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Botones */
button {
  background: linear-gradient(135deg, #ff4d6d, #ff8fab);
  border: none;
  padding: 12px 28px;
  color: white;
  font-size: 18px;
  border-radius: 30px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255,100,150,0.7);
}

/* Corazones flotando */
.corazon {
  position: fixed;
  color: #ff4d6d;
  font-size: 20px;
  animation: flotar 4s linear infinite;
}
@keyframes flotar {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-800px); opacity: 0; }
}

/* Galería */
.galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.galeria img {
  width: 45%;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}
.galeria img:hover {
  transform: scale(1.05);
}

/* Historia */
.linea { opacity: 0; transform: translateY(20px); animation: aparecer 1s forwards; }
.linea:nth-child(1){animation-delay:.5s;} .linea:nth-child(2){animation-delay:2s;}
.linea:nth-child(3){animation-delay:3.5s;} .linea:nth-child(4){animation-delay:5s;}
@keyframes aparecer { to { opacity: 1; transform: translateY(0);} }

/* Promesa */
#escena6 {
  position: relative;
  color: white;
  background: radial-gradient(circle at bottom, #1a1a2e, #000);
  overflow: hidden;
}
#estrellas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.promesa { position: relative; z-index: 2; text-shadow: 0 0 8px rgba(255,255,255,0.8); }
.promesas-iconos span { margin: 0 5px; font-size: 24px; animation: latido 3s infinite; }
@keyframes latido { 0%,100%{transform:scale(1);}50%{transform:scale(1.2);} }

/* Planes */
.planes { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 20px; }
.plan { max-width: 250px; }
.plan img { width: 100%; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.3s; }
.plan img:hover { transform: scale(1.05); }
.plan p { font-size: 16px; margin-top: 10px; }

/* Responsivo */
@media (max-width: 600px){
  .galeria img, .plan { width: 100%; }
}