<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invitación MARI@</title>
<style>
*{box-sizing:border-box}
body{
margin:0; font-family:Georgia,serif;
background:#101313; color:#202321;
text-align:center; min-height:100vh;
}
button,input,textarea{font:inherit}
button{cursor:pointer}
.portada{
min-height:100vh;display:flex;flex-direction:column;
align-items:center;justify-content:center;padding:24px;
background:radial-gradient(circle,#414541,#101313 75%);
color:white;
}
.sobre{
width:230px;height:150px;position:relative;
background:#e9e4d8;border-radius:5px;
display:grid;place-items:center;margin:28px auto;
box-shadow:0 10px 30px #0008;
}
.sobre:before{
content:"";position:absolute;inset:0;
background:#c7c0b2;clip-path:polygon(0 0,50% 57%,100% 0);
}
.sello{
position:relative;background:#181b19;color:#fff;
width:58px;height:58px;border-radius:50%;
display:grid;place-items:center;font-size:17px;
border:2px solid #b6ad98;
}
.abrir{
background:#f0ece2;color:#171a18;border:0;
border-radius:30px;padding:14px 25px;
font-weight:bold;margin-top:12px;
}
.mini{font-size:12px;letter-spacing:4px}
h1{font-size:42px;margin:10px 0}
h2{font-size:27px}
.invitacion{
display:none;max-width:520px;margin:auto;
padding:28px 20px 45px;background:#f3f0e7;
min-height:100vh;
}
.linea{border-top:1px solid #777;margin:22px 0}
.etiqueta{letter-spacing:3px;font-size:11px}
.datos{line-height:1.9;font-size:17px}
.precio{font-size:25px;font-weight:bold}
.tarjeta{
border:1px solid #aaa;padding:18px;margin-top:25px;
}
input,textarea{
width:100%;padding:12px;margin:8px 0;
border:1px solid #aaa;border-radius:5px;
background:white;color:#222;
}
.opciones{display:flex;gap:10px;justify-content:center;
flex-wrap:wrap;margin:14px 0}
.opciones button{
padding:11px 23px;border:1px solid #333;
border-radius:25px;background:#fff;color:#222;
}
#si{background:#202522;color:white}
#no{position:relative}
#mensaje{font-size:14px;line-height:1.6;margin-top:15px}
.nota{font-size:12px;color:#666;line-height:1.6}
</style>
</head>
<body>
<section class="portada" id="portada">
<div class="mini">UNA INVITACIÓN ESPECIAL</div>
<div class="sobre"><div class="sello">MARI@</div></div>
<h1>MARI@</h1>
<p>Tenemos algo que celebrar contigo...</p>
<button class="abrir" onclick="abrirCarta()">
ABRIR INVITACIÓN ✉
</button>
<p class="nota" style="color:#ddd">Toca para descubrir la sorpresa</p>
</section>
<main class="invitacion" id="invitacion">
<div class="etiqueta">ESTÁS INVITADO/A</div>
<h1>MARI@</h1>
<p>¡Vamos a celebrar juntos!</p>
<div class="linea"></div>
<div class="datos">
<p><strong>📅 SÁBADO 7 DE NOVIEMBRE</strong><br>
Llegada: 6:00 p. m.</p>
<p><strong>🌿 LUGAR</strong><br>
Finca ubicada en Warnes</p>
<p><strong>🎉 ¿QUÉ HABRÁ?</strong><br>
Música, juegos, piscina, fogata y más.</p>
<p><strong>🚌 TRANSPORTE</strong><br>
Trufi de ida y vuelta: Bs 30 en total.</p>
<p><strong>🍽️ INCLUYE</strong><br>
Cena del sábado, desayuno y almuerzo del domingo.</p>
<p><strong>📅 DOMINGO 8 DE NOVIEMBRE</strong><br>
Regreso: 6:00 p. m.</p>
</div>
<div class="linea"></div>
<p class="etiqueta">APORTE POR PERSONA</p>
<div class="precio">Bs 150</div>
<p class="nota">El transporte se paga aparte: Bs 15 de ida y Bs 15 de vuelta.</p>
<section class="tarjeta">
<h2>¿Vienes con nosotros?</h2>
<p>Confirma tu asistencia</p>
<input id="nombre" placeholder="Escribe tu nombre">
<div class="opciones">
<button id="si" onclick="responderSi()">¡Sí, voy! 🎉</button>
<button id="no" onclick="responderNo()">No puedo 😅</button>
</div>
<textarea id="motivo" rows="2"
placeholder="Si no puedes venir, cuéntanos el motivo (opcional)"></textarea>
<div id="mensaje" aria-live="polite"></div>
</section>
<div class="linea"></div>
<p><strong>¡No te lo pierdas!</strong></p>
<p class="nota">¡Te esperamos para pasarla increíble!</p>
</main>
<script>
function abrirCarta(){
document.getElementById("portada").style.display="none";
document.getElementById("invitacion").style.display="block";
window.scrollTo(0,0);
}
function responderSi(){
const nombre=document.getElementById("nombre").value.trim();
const mensaje=document.getElementById("mensaje");
if(!nombre){
mensaje.textContent="Escribe tu nombre para confirmar 😊";
document.getElementById("nombre").focus();
return;
}
mensaje.textContent="¡Gracias, "+nombre+"! 🎉 Tu respuesta está lista. Avísanos por WhatsApp para que podamos registrarla.";
}
function responderNo(){
const motivo=document.getElementById("motivo").value.trim();
const boton=document.getElementById("no");
const mensaje=document.getElementById("mensaje");
if(!motivo){
mensaje.textContent="¡Espera! Primero cuéntanos por qué no puedes venir 😅";
boton.style.position="relative";
boton.style.left=(Math.random()*100-50)+"px";
boton.style.top=(Math.random()*50-25)+"px";
return;
}
const nombre=document.getElementById("nombre").value.trim();
mensaje.textContent="Gracias por avisarnos"+(nombre?", "+nombre:"")+". Motivo: "+motivo+". Tu respuesta está lista; falta enviarla para que la recibamos.";
boton.style.left="0";
boton.style.top="0";
}
document.getElementById("motivo").addEventListener("input",function(){
const boton=document.getElementById("no");
if(this.value.trim()){
boton.style.left="0";
boton.style.top="0";
}
});
</script>
</body>
</html>