<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Un mensaje para ti</title>
<style>
html,body{height:100%;margin:0;background:#000;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;}
.wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;position:relative;overflow:hidden;text-align:center;}
.stars{position:absolute;inset:0;background:
radial-gradient(1px 1px at 20% 10%, rgba(255,255,255,0.9) 50%, transparent 51%),
radial-gradient(1px 1px at 40% 30%, rgba(255,255,255,0.85) 50%, transparent 51%),
radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.8) 50%, transparent 51%),
radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.7) 50%, transparent 51%),
radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.6) 50%, transparent 51%);
background-size: 200px 200px, 180px 180px, 220px 220px, 160px 160px, 240px 240px;
pointer-events:none;opacity:0.9;mix-blend-mode:screen;}
.card{position:relative;z-index:2;max-width:900px;}
h1{font-size:24px;line-height:1.4;margin:0 0 18px;}
img{max-width:100%;height:auto;border-radius:12px;box-shadow:0 6px 30px rgba(0,0,0,0.6);display:block;margin:0 auto;}
@media (min-width:600px) { h1 { font-size:28px; } }
</style>
</head>
<body>
<div class="wrap">
<div class="stars" aria-hidden="true"></div>
<div class="card">
<h1>TE AMO CON TODA MI ALMA SE QUE PODEMOS TENER PROBLEMAS PERO SIEMPRE SEREMOS TU Y YO CONTRA ELLOS ERES LO MEJOR DE MI VIDA Y ESO NUNCA VA A CAMBIAR TE AMO 💖</h1>
<img alt="Imagen para ti" src="data:image/jpeg;base64,REEMPLAZA_ESTA_PARTE_CON_TU_IMAGEN">
</div>
</div>
</body>
</html>