<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cuenta Regresiva</title>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #fff, #ffeaea);
  }

  .contenedor {
    position: fixed; /* siempre visible arriba a la izquierda */
    top: 10px;
    right: 10px;
    background: #fff5f5;
    border: 2px solid #eb0808;
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    width: auto;
  }

  p {
    font-size: 0.9em;
    font-weight: bold;
    color: #222;
    margin: 0 0 5px 0;
  }

  #titulo-faltan {
    color: #eb0808;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
  }

  #temporizador {
    color: #111;
    font-size: 1.2em;
    font-weight: bold;
    background: #ffeaea;
    padding: 5px 10px;
    border-radius: 6px;
    display: inline-block;
  }

  #encabezado-tiempo {
    color: #444;
    font-size: 0.7em;
    font-weight: bold;
    margin-top: 4px;
    text-transform: uppercase;
  }

  #mensaje-compra {
    color: #eb0808;
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 6px;
    animation: parpadeo 1.2s infinite;
  }

  @keyframes parpadeo {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
  }
</style>
</head>
<body>
  <div class="contenedor">
    <p>Cuenta Regresiva</p>
    <div id="titulo-faltan">⏳ FALTAN SOLO ⏳</div>
    <div id="temporizador"></div>
    <div id="encabezado-tiempo">HORAS • MINUTOS • SEGUNDOS</div>
    <div id="mensaje-compra"></div>
  </div>

<script>
const horaInicio = new Date("2025-11-30T19:30:00");
const horaFin    = new Date("2025-12-02T16:42:00");

function actualizarTemporizador() {
  const ahora = new Date();
  let tiempoRestante = horaFin - ahora;

  if (tiempoRestante <= 0) {
    document.getElementById("temporizador").textContent = "Finalizado";
    document.getElementById("mensaje-compra").textContent = "";
    clearInterval(intervalo);
    return;
  }

  const horas   = Math.floor((tiempoRestante / (1000 * 60 * 60)) % 24);
  const minutos = Math.floor((tiempoRestante / (1000 * 60)) % 60);
  const segundos = Math.floor((tiempoRestante / 1000) % 60);

  document.getElementById("temporizador").textContent =
    String(horas).padStart(2, '0') + " : " +
    String(minutos).padStart(2, '0') + " : " +
    String(segundos).padStart(2, '0');

  document.getElementById("mensaje-compra").textContent = "🔥 COMPRA AHORA 🔥";
}

const intervalo = setInterval(actualizarTemporizador, 1000);
actualizarTemporizador();
</script>
</body>
</html>