Jonel-a11y/index.html

## index.html

<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fondo de Mar con Luz y Corazones</title>
  <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Zona oscura en la parte inferior -->
  <div class="dark-bottom"></div>

  <!-- Efecto de luz en movimiento -->
  <div class="light-overlay"></div>

  <!-- Contenedor para extra animación de corazones (nuevos) -->
  <div class="extra-hearts"></div>

  <!-- Botón principal y demás elementos -->
  <button id="btn">¿Estás lista?</button>

  <div id="mensaje" class="mensaje-oculto">
    <div class="mensaje-texto"></div>
  </div>

  <div id="pregunta" class="pregunta-oculta">
    <p>¿Me amas?</p>
    <div class="botones">
      <button id="btn-si">Sí</button>
      <button id="btn-no">No</button>
    </div>
  </div>

  <div id="respuesta" class="respuesta-oculta"></div>

  <!-- Elementos decorativos ya existentes -->
  <div class="hearts-rain"></div>
  <div class="floating-hearts"></div>
  <div class="sparkles"></div>
  <div class="romantic-glow"></div>

  <!-- Audio -->
  <audio id="background-music" loop>
    <source src="romantic-music.mp3" type="audio/mpeg">
    Tu navegador no soporta audio.
  </audio>

  <!-- Secuencia de amor -->
  <div id="love-sequence" class="sequence-hidden"></div>

  <script src="script.js"></script>
</body>
</html>

## script.js
document.addEventListener("DOMContentLoaded", () => {
  const music = document.getElementById("background-music");
  music.volume = 0.3;

  // ===== INICIALIZACIÓN =====
  document.body.addEventListener("click", () => {
    music.play().catch(() => {});
    crearChispas();
  }, { once: true });

  // ===== EFECTOS VISUALES EXISTENTES =====
  function crearCorazones(contenedor, clase) {
    const corazon = document.createElement("div");
    corazon.className = clase;
    corazon.innerHTML = "❤";
    corazon.style.cssText = `
      left: ${Math.random() * 100}%;
      color: hsl(${Math.random() * 360}, 70%, 60%);
      font-size: 36px;
      position: absolute;
      animation: caida ${Math.random() * 3 + 2}s linear infinite;
    `;
    contenedor.appendChild(corazon);
    setTimeout(() => corazon.remove(), 5000);
  }
  setInterval(() => crearCorazones(document.querySelector(".hearts-rain"), "heart-rain"), 300);
  setInterval(() => crearCorazones(document.querySelector(".floating-hearts"), "floating-heart"), 1500);

  function crearChispas() {
    const chispa = document.createElement("div");
    chispa.className = "sparkle";
    chispa.style.cssText = `
      left: ${Math.random() * 100}%;
      top: ${Math.random() * 100}%;
      position: absolute;
    `;
    document.querySelector(".sparkles").appendChild(chispa);
    setTimeout(() => chispa.remove(), 2000);
  }
  setInterval(crearChispas, 300);

  // ===== BOTÓN PRINCIPAL =====
  document.getElementById("btn").addEventListener("click", function() {
    this.remove();
    // Explosión de corazones
    for (let i = 0; i < 50; i++) {
      crearCorazones(document.body, "heart-explosion");
    }
    setTimeout(() => {
      document.getElementById("pregunta").classList.add("pregunta-visible");
    }, 1000);
  });

  // ===== MANEJO DE RESPUESTAS =====
  document.getElementById("btn-si").addEventListener("click", () => {
    document.getElementById("pregunta").classList.remove("pregunta-visible");
    mostrarMensaje("La verdad, yo también te amo con todo mi ser. Este sentimiento es tan profundo y sincero que desborda mi alma.", true);
  });
  document.getElementById("btn-no").addEventListener("click", () => {
    document.getElementById("pregunta").classList.remove("pregunta-visible");
    mostrarMensaje("Gracias por tu honestidad.", false);
  });

  function mostrarMensaje(texto, mostrarBoton) {
    const respuesta = document.getElementById("respuesta");
    respuesta.innerHTML = mostrarBoton ? `
      <p>${texto}</p>
      <button class="step-button">Siguiente</button>
    ` : `<p>${texto}</p>`;
    respuesta.classList.add("respuesta-visible");
    if (mostrarBoton) {
      respuesta.querySelector("button").addEventListener("click", iniciarSecuencia);
    }
  }

  // ===== SECUENCIA ROMÁNTICA =====
  const frasesAmor = [


    "Eres la pieza que completa mi rompecabezas...",

    "Contigo, cada día es una nueva página de nuestra historia... No dejemos que tena un final...",

    "Mi mundo se ilumina con tu presencia...eres la luz que me guia en este oscuro camino..",

    "Desde el primer instante en que nuestras miradas se cruzaron, supe que nuestros destinos estaban destinados a entrelazarse en una danza de deseo y pasión, donde cada caricia sería un poema y cada susurro una promesa de noches interminables...",
    "Cada vez que cierro los ojos, puedo sentir el calor de tu aliento en mi piel, evocando recuerdos de momentos compartidos que aún arden en mi memoria, deseando que el tiempo nos conceda una vez más la oportunidad de perdernos en la lujuria de nuestros cuerpos...",
    "Tus palabras, cargadas de insinuaciones sutiles, despiertan en mí un torrente de emociones que me arrastran hacia un abismo de placer y complicidad, donde solo existimos tú y yo, fusionándonos en un éxtasis que desafía toda lógica...",
    "La forma en que tus dedos rozan mi piel, dejando un rastro de fuego y deseo, me hace anhelar cada vez más esos momentos en los que el mundo desaparece y solo quedamos nosotros, entregados a la pasión que nos consume sin remedio...",
     "En cada encuentro furtivo, nuestras almas se reconocen y nuestros cuerpos se buscan con una urgencia primitiva, desatando una tormenta de sensaciones que nos lleva al límite de la cordura, donde la lujuria y el amor se funden en una sola esencia..."


  ];


  let pasoActual = 0;
  function iniciarSecuencia() {
    pasoActual = 0; // Reiniciamos la secuencia
    document.getElementById("respuesta").classList.remove("respuesta-visible");
    const contenedor = document.getElementById("love-sequence");
    contenedor.innerHTML = '';
    mostrarSiguienteFrase(contenedor);
  }
  function mostrarSiguienteFrase(contenedor) {
    if (pasoActual >= frasesAmor.length) return mostrarFinal();
    contenedor.innerHTML = '';
    const fraseDiv = document.createElement("div");
    fraseDiv.className = "love-step visible";
    fraseDiv.innerHTML = `
      <p>${frasesAmor[pasoActual]}</p>
      <button class="step-button">Continuar</button>
    `;
    fraseDiv.querySelector("button").addEventListener("click", () => {
      pasoActual++;
      mostrarSiguienteFrase(contenedor);
    });
    contenedor.appendChild(fraseDiv);
  }
  function mostrarFinal() {
    const contenedor = document.getElementById("love-sequence");
    contenedor.innerHTML = `
      <div class="love-step visible">
        <p>Desde que te conocí, supe que quería compartir cada instante de mi vida contigo... ¿Te gustaría caminar juntos por siempre?</p>
        <div class="botones">
          <button class="step-button" id="aceptar-btn">¡Sí!</button>
          <button class="step-button" id="rechazar-btn">No</button>
        </div>
      </div>
    `;
    document.getElementById("aceptar-btn").addEventListener("click", () => {
      // Al aceptar, se muestra el mensaje final junto con un gran corazón pulsante
      contenedor.innerHTML = "<p>¡Feliz San Valentín, mi amor!</p><div class='big-heart'>  ❤</div>";
    });
    document.getElementById("rechazar-btn").addEventListener("click", () => {
      contenedor.innerHTML = `
        <div class="love-step visible">
          <p>Volver a intentar...</p>
          <button class="step-button" id="segura-btn">¿Segura?</button>
        </div>
      `;
      document.getElementById("segura-btn").addEventListener("click", () => {
        mostrarFinal();
      });
    });
  }

  // ===== NUEVAS FUNCIONES: Corazones extra =====
  // Corazones que emergen desde abajo
  function crearCorazonUp() {
    const container = document.querySelector('.extra-hearts');
    const heart = document.createElement('div');
    heart.className = 'heart-up';
    heart.innerHTML = '❤';
    heart.style.left = Math.random() * 100 + '%';
    heart.style.fontSize = (Math.random() * 10 + 15) + 'px';
    container.appendChild(heart);
    setTimeout(() => heart.remove(), 5000);
  }
  // Corazones flotantes y parpadeantes
  function crearCorazonBlink() {
    const container = document.querySelector('.extra-hearts');
    const heart = document.createElement('div');
    heart.className = 'heart-blink';
    heart.innerHTML = '❤';
    heart.style.left = Math.random() * 100 + '%';
    heart.style.top = Math.random() * 100 + '%';
    heart.style.fontSize = (Math.random() * 10 + 10) + 'px';
    container.appendChild(heart);
    setTimeout(() => heart.remove(), 3000);
  }
  setInterval(crearCorazonUp, 1000);
  setInterval(crearCorazonBlink, 800);
});

## style.css
/* ===== ESTILOS GLOBALES ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
  font-family: 'Great Vibes', cursive;
}

body {
  height: 100vh;
  overflow: hidden;
  /* Fondo con degradado animado: de azul brillante en la parte superior a oscuro en la parte inferior */
  background: linear-gradient(180deg, #00d4ff, #090979, #020024);
  background-size: 200% 200%;
  animation: backgroundAnimation 20s ease infinite;
  position: relative;
}

/* Animación del fondo */
@keyframes backgroundAnimation {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* ===== Zona oscura en la parte inferior ===== */
.dark-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  z-index: 0;
  pointer-events: none;
}

/* ===== Efecto de luz en movimiento (más realista) ===== */
.light-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), transparent 70%);
  opacity: 0.6;
  z-index: 1;
  animation: lightMovement 10s linear infinite;
}

@keyframes lightMovement {
  0% {
    background-position: 0% 0%;
    transform: translate(0, 0) scale(1);
  }
  50% {
    background-position: 100% 100%;
    transform: translate(-10%, -10%) scale(1.1);
  }
  100% {
    background-position: 0% 0%;
    transform: translate(0, 0) scale(1);
  }
}

/* ===== Contenedor para extra corazones ===== */
.extra-hearts {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ===== Efectos de corazones ya existentes ===== */
.hearts-rain,
.floating-hearts {
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.heart-rain,
.floating-heart {
  position: absolute;
  font-size: 36px;
  animation: caida 3s linear infinite;
  opacity: 0.8;
}

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

/* ===== Nuevos Corazones: Emergiendo desde abajo ===== */
.heart-up {
  position: absolute;
  bottom: 0;
  font-size: 20px;
  opacity: 0.8;
  animation: heartUpAnimation 5s linear forwards;
}

@keyframes heartUpAnimation {
  0% { transform: translateY(0) scale(0.5); opacity: 0.8; }
  100% { transform: translateY(-100vh) scale(1); opacity: 0; }
}

/* ===== Nuevos Corazones: Flotantes y parpadeantes ===== */
.heart-blink {
  position: absolute;
  opacity: 0;
  animation: heartBlinkAnimation 3s ease-in-out infinite;
}

@keyframes heartBlinkAnimation {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* ===== BOTÓN PRINCIPAL ===== */
#btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 40px;
  font-size: 2em;
  background: #ff69b4;
  color: white;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 3;
}

#btn:hover {
  transform: translate(-50%, -50%) scale(1.15);
}

/* ===== TEXTO Y MENSAJES ===== */
.mensaje-oculto,
.pregunta-oculta,
.respuesta-oculta,
.love-step {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  z-index: 4;
}

.mensaje-visible,
.pregunta-visible,
.respuesta-visible,
.love-step.visible {
  opacity: 1;
  visibility: visible;
  animation: brillo-texto 2s infinite;
}

@keyframes brillo-texto {
  0%, 100% { text-shadow: 0 0 20px rgba(255,255,255,1); }
  50% { text-shadow: 0 0 10px rgba(255,255,255,0.8); }
}

p, .mensaje-texto {
  font-size: 2.5em;
  margin: 20px 0;
  line-height: 1.5;
}

/* ===== BOTONES DE RESPUESTA ===== */
.botones {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

#btn-si,
#btn-no,
.step-button {
  padding: 15px 40px;
  font-size: 1.5em;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s;
}

#btn-si,
.step-button {
  background: #ff69b4;
}

#btn-no {
  background: #6c757d;
}

button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255,255,255,0.5);
}

/* ===== ELEMENTOS DECORATIVOS ===== */
.decorative-image {
  position: absolute;
  bottom: 10%;
  right: 5%;
  max-width: 300px;
  border-radius: 15px;
  z-index: 3;
}

/* ===== SECUENCIA DE AMOR ===== */
#love-sequence {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  z-index: 5;
}

/* ===== Pulsación del gran corazón ===== */
.big-heart {
  display: block;
  font-size: 100px;
  margin: 20px auto 0;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {
  #btn {
    font-size: 1.5em;
    padding: 15px 30px;
  }
  p, .mensaje-texto {
    font-size: 2em;
  }
  .decorative-image {
    max-width: 200px;
  }
}

	<html lang="es">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Fondo de Mar con Luz y Corazones</title>
	<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<!-- Zona oscura en la parte inferior -->
	<div class="dark-bottom"></div>

	<!-- Efecto de luz en movimiento -->
	<div class="light-overlay"></div>

	<!-- Contenedor para extra animación de corazones (nuevos) -->
	<div class="extra-hearts"></div>

	<!-- Botón principal y demás elementos -->
	<button id="btn">¿Estás lista?</button>

	<div id="mensaje" class="mensaje-oculto">
	<div class="mensaje-texto"></div>
	</div>

	<div id="pregunta" class="pregunta-oculta">
	<p>¿Me amas?</p>
	<div class="botones">
	<button id="btn-si">Sí</button>
	<button id="btn-no">No</button>
	</div>
	</div>

	<div id="respuesta" class="respuesta-oculta"></div>

	<!-- Elementos decorativos ya existentes -->
	<div class="hearts-rain"></div>
	<div class="floating-hearts"></div>
	<div class="sparkles"></div>
	<div class="romantic-glow"></div>

	<!-- Audio -->
	<audio id="background-music" loop>
	<source src="romantic-music.mp3" type="audio/mpeg">
	Tu navegador no soporta audio.
	</audio>

	<!-- Secuencia de amor -->
	<div id="love-sequence" class="sequence-hidden"></div>

	<script src="script.js"></script>
	</body>
	</html>
	document.addEventListener("DOMContentLoaded", () => {
	const music = document.getElementById("background-music");
	music.volume = 0.3;

	// ===== INICIALIZACIÓN =====
	document.body.addEventListener("click", () => {
	music.play().catch(() => {});
	crearChispas();
	}, { once: true });

	// ===== EFECTOS VISUALES EXISTENTES =====
	function crearCorazones(contenedor, clase) {
	const corazon = document.createElement("div");
	corazon.className = clase;
	corazon.innerHTML = "❤";
	corazon.style.cssText = `
	left: ${Math.random() * 100}%;
	color: hsl(${Math.random() * 360}, 70%, 60%);
	font-size: 36px;
	position: absolute;
	animation: caida ${Math.random() * 3 + 2}s linear infinite;
	`;
	contenedor.appendChild(corazon);
	setTimeout(() => corazon.remove(), 5000);
	}
	setInterval(() => crearCorazones(document.querySelector(".hearts-rain"), "heart-rain"), 300);
	setInterval(() => crearCorazones(document.querySelector(".floating-hearts"), "floating-heart"), 1500);

	function crearChispas() {
	const chispa = document.createElement("div");
	chispa.className = "sparkle";
	chispa.style.cssText = `
	left: ${Math.random() * 100}%;
	top: ${Math.random() * 100}%;
	position: absolute;
	`;
	document.querySelector(".sparkles").appendChild(chispa);
	setTimeout(() => chispa.remove(), 2000);
	}
	setInterval(crearChispas, 300);

	// ===== BOTÓN PRINCIPAL =====
	document.getElementById("btn").addEventListener("click", function() {
	this.remove();
	// Explosión de corazones
	for (let i = 0; i < 50; i++) {
	crearCorazones(document.body, "heart-explosion");
	}
	setTimeout(() => {
	document.getElementById("pregunta").classList.add("pregunta-visible");
	}, 1000);
	});

	// ===== MANEJO DE RESPUESTAS =====
	document.getElementById("btn-si").addEventListener("click", () => {
	document.getElementById("pregunta").classList.remove("pregunta-visible");
	mostrarMensaje("La verdad, yo también te amo con todo mi ser. Este sentimiento es tan profundo y sincero que desborda mi alma.", true);
	});
	document.getElementById("btn-no").addEventListener("click", () => {
	document.getElementById("pregunta").classList.remove("pregunta-visible");
	mostrarMensaje("Gracias por tu honestidad.", false);
	});

	function mostrarMensaje(texto, mostrarBoton) {
	const respuesta = document.getElementById("respuesta");
	respuesta.innerHTML = mostrarBoton ? `
	<p>${texto}</p>
	<button class="step-button">Siguiente</button>
	` : `<p>${texto}</p>`;
	respuesta.classList.add("respuesta-visible");
	if (mostrarBoton) {
	respuesta.querySelector("button").addEventListener("click", iniciarSecuencia);
	}
	}

	// ===== SECUENCIA ROMÁNTICA =====
	const frasesAmor = [


	"Eres la pieza que completa mi rompecabezas...",

	"Contigo, cada día es una nueva página de nuestra historia... No dejemos que tena un final...",

	"Mi mundo se ilumina con tu presencia...eres la luz que me guia en este oscuro camino..",

	"Desde el primer instante en que nuestras miradas se cruzaron, supe que nuestros destinos estaban destinados a entrelazarse en una danza de deseo y pasión, donde cada caricia sería un poema y cada susurro una promesa de noches interminables...",
	"Cada vez que cierro los ojos, puedo sentir el calor de tu aliento en mi piel, evocando recuerdos de momentos compartidos que aún arden en mi memoria, deseando que el tiempo nos conceda una vez más la oportunidad de perdernos en la lujuria de nuestros cuerpos...",
	"Tus palabras, cargadas de insinuaciones sutiles, despiertan en mí un torrente de emociones que me arrastran hacia un abismo de placer y complicidad, donde solo existimos tú y yo, fusionándonos en un éxtasis que desafía toda lógica...",
	"La forma en que tus dedos rozan mi piel, dejando un rastro de fuego y deseo, me hace anhelar cada vez más esos momentos en los que el mundo desaparece y solo quedamos nosotros, entregados a la pasión que nos consume sin remedio...",
	"En cada encuentro furtivo, nuestras almas se reconocen y nuestros cuerpos se buscan con una urgencia primitiva, desatando una tormenta de sensaciones que nos lleva al límite de la cordura, donde la lujuria y el amor se funden en una sola esencia..."



	];


	let pasoActual = 0;
	function iniciarSecuencia() {
	pasoActual = 0; // Reiniciamos la secuencia
	document.getElementById("respuesta").classList.remove("respuesta-visible");
	const contenedor = document.getElementById("love-sequence");
	contenedor.innerHTML = '';
	mostrarSiguienteFrase(contenedor);
	}
	function mostrarSiguienteFrase(contenedor) {
	if (pasoActual >= frasesAmor.length) return mostrarFinal();
	contenedor.innerHTML = '';
	const fraseDiv = document.createElement("div");
	fraseDiv.className = "love-step visible";
	fraseDiv.innerHTML = `
	<p>${frasesAmor[pasoActual]}</p>
	<button class="step-button">Continuar</button>
	`;
	fraseDiv.querySelector("button").addEventListener("click", () => {
	pasoActual++;
	mostrarSiguienteFrase(contenedor);
	});
	contenedor.appendChild(fraseDiv);
	}
	function mostrarFinal() {
	const contenedor = document.getElementById("love-sequence");
	contenedor.innerHTML = `
	<div class="love-step visible">
	<p>Desde que te conocí, supe que quería compartir cada instante de mi vida contigo... ¿Te gustaría caminar juntos por siempre?</p>
	<div class="botones">
	<button class="step-button" id="aceptar-btn">¡Sí!</button>
	<button class="step-button" id="rechazar-btn">No</button>
	</div>
	</div>
	`;
	document.getElementById("aceptar-btn").addEventListener("click", () => {
	// Al aceptar, se muestra el mensaje final junto con un gran corazón pulsante
	contenedor.innerHTML = "<p>¡Feliz San Valentín, mi amor!</p><div class='big-heart'> ❤</div>";
	});
	document.getElementById("rechazar-btn").addEventListener("click", () => {
	contenedor.innerHTML = `
	<div class="love-step visible">
	<p>Volver a intentar...</p>
	<button class="step-button" id="segura-btn">¿Segura?</button>
	</div>
	`;
	document.getElementById("segura-btn").addEventListener("click", () => {
	mostrarFinal();
	});
	});
	}

	// ===== NUEVAS FUNCIONES: Corazones extra =====
	// Corazones que emergen desde abajo
	function crearCorazonUp() {
	const container = document.querySelector('.extra-hearts');
	const heart = document.createElement('div');
	heart.className = 'heart-up';
	heart.innerHTML = '❤';
	heart.style.left = Math.random() * 100 + '%';
	heart.style.fontSize = (Math.random() * 10 + 15) + 'px';
	container.appendChild(heart);
	setTimeout(() => heart.remove(), 5000);
	}
	// Corazones flotantes y parpadeantes
	function crearCorazonBlink() {
	const container = document.querySelector('.extra-hearts');
	const heart = document.createElement('div');
	heart.className = 'heart-blink';
	heart.innerHTML = '❤';
	heart.style.left = Math.random() * 100 + '%';
	heart.style.top = Math.random() * 100 + '%';
	heart.style.fontSize = (Math.random() * 10 + 10) + 'px';
	container.appendChild(heart);
	setTimeout(() => heart.remove(), 3000);
	}
	setInterval(crearCorazonUp, 1000);
	setInterval(crearCorazonBlink, 800);
	});
	/* ===== ESTILOS GLOBALES ===== */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: #fff;
	font-family: 'Great Vibes', cursive;
	}

	body {
	height: 100vh;
	overflow: hidden;
	/* Fondo con degradado animado: de azul brillante en la parte superior a oscuro en la parte inferior */
	background: linear-gradient(180deg, #00d4ff, #090979, #020024);
	background-size: 200% 200%;
	animation: backgroundAnimation 20s ease infinite;
	position: relative;
	}

	/* Animación del fondo */
	@keyframes backgroundAnimation {
	0% { background-position: 0% 0%; }
	50% { background-position: 100% 100%; }
	100% { background-position: 0% 0%; }
	}

	/* ===== Zona oscura en la parte inferior ===== */
	.dark-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30%;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
	z-index: 0;
	pointer-events: none;
	}

	/* ===== Efecto de luz en movimiento (más realista) ===== */
	.light-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), transparent 70%);
	opacity: 0.6;
	z-index: 1;
	animation: lightMovement 10s linear infinite;
	}

	@keyframes lightMovement {
	0% {
	background-position: 0% 0%;
	transform: translate(0, 0) scale(1);
	}
	50% {
	background-position: 100% 100%;
	transform: translate(-10%, -10%) scale(1.1);
	}
	100% {
	background-position: 0% 0%;
	transform: translate(0, 0) scale(1);
	}
	}

	/* ===== Contenedor para extra corazones ===== */
	.extra-hearts {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	}

	/* ===== Efectos de corazones ya existentes ===== */
	.hearts-rain,
	.floating-hearts {
	position: fixed;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	}

	.heart-rain,
	.floating-heart {
	position: absolute;
	font-size: 36px;
	animation: caida 3s linear infinite;
	opacity: 0.8;
	}

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

	/* ===== Nuevos Corazones: Emergiendo desde abajo ===== */
	.heart-up {
	position: absolute;
	bottom: 0;
	font-size: 20px;
	opacity: 0.8;
	animation: heartUpAnimation 5s linear forwards;
	}

	@keyframes heartUpAnimation {
	0% { transform: translateY(0) scale(0.5); opacity: 0.8; }
	100% { transform: translateY(-100vh) scale(1); opacity: 0; }
	}

	/* ===== Nuevos Corazones: Flotantes y parpadeantes ===== */
	.heart-blink {
	position: absolute;
	opacity: 0;
	animation: heartBlinkAnimation 3s ease-in-out infinite;
	}

	@keyframes heartBlinkAnimation {
	0%, 100% { opacity: 0; }
	50% { opacity: 1; }
	}

	/* ===== BOTÓN PRINCIPAL ===== */
	#btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px 40px;
	font-size: 2em;
	background: #ff69b4;
	color: white;
	border: none;
	border-radius: 40px;
	cursor: pointer;
	transition: all 0.3s;
	z-index: 3;
	}

	#btn:hover {
	transform: translate(-50%, -50%) scale(1.15);
	}

	/* ===== TEXTO Y MENSAJES ===== */
	.mensaje-oculto,
	.pregunta-oculta,
	.respuesta-oculta,
	.love-step {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 800px;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s;
	z-index: 4;
	}

	.mensaje-visible,
	.pregunta-visible,
	.respuesta-visible,
	.love-step.visible {
	opacity: 1;
	visibility: visible;
	animation: brillo-texto 2s infinite;
	}

	@keyframes brillo-texto {
	0%, 100% { text-shadow: 0 0 20px rgba(255,255,255,1); }
	50% { text-shadow: 0 0 10px rgba(255,255,255,0.8); }
	}

	p, .mensaje-texto {
	font-size: 2.5em;
	margin: 20px 0;
	line-height: 1.5;
	}

	/* ===== BOTONES DE RESPUESTA ===== */
	.botones {
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-top: 30px;
	}

	#btn-si,
	#btn-no,
	.step-button {
	padding: 15px 40px;
	font-size: 1.5em;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.3s;
	}

	#btn-si,
	.step-button {
	background: #ff69b4;
	}

	#btn-no {
	background: #6c757d;
	}

	button:hover {
	transform: scale(1.1);
	box-shadow: 0 0 15px rgba(255,255,255,0.5);
	}

	/* ===== ELEMENTOS DECORATIVOS ===== */
	.decorative-image {
	position: absolute;
	bottom: 10%;
	right: 5%;
	max-width: 300px;
	border-radius: 15px;
	z-index: 3;
	}

	/* ===== SECUENCIA DE AMOR ===== */
	#love-sequence {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 800px;
	z-index: 5;
	}

	/* ===== Pulsación del gran corazón ===== */
	.big-heart {
	display: block;
	font-size: 100px;
	margin: 20px auto 0;
	animation: pulse 1.5s ease-in-out infinite;
	}

	@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
	}

	/* ===== RESPONSIVO ===== */
	@media (max-width: 768px) {
	#btn {
	font-size: 1.5em;
	padding: 15px 30px;
	}
	p, .mensaje-texto {
	font-size: 2em;
	}
	.decorative-image {
	max-width: 200px;
	}
	}