*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe Script','Brush Script MT',cursive;
}

body{
height:100vh;
background: linear-gradient(135deg,#ffc0cb,#ff9ac6,#ff6fae);
display:flex;
justify-content:center;
align-items:center;
color:white;
}

/* CORAZONES FLOTANTES */

.floating-heart{
position:absolute;
width:50px;
height:45px;
background:white;
transform:rotate(-45deg);
animation: pulse 2s infinite;
opacity:0.7;
}

.floating-heart::before,
.floating-heart::after{
content:"";
position:absolute;
width:50px;
height:45px;
background:white;
border-radius:50%;
}

.floating-heart::before{
top:-22.5px;
left:0;
}

.floating-heart::after{
left:22.5px;
top:0;
}

@keyframes pulse {
0%, 100% {
transform: rotate(-45deg) scale(1);
}
50% {
transform: rotate(-45deg) scale(1.2);
}
}

@keyframes pulse-heart {
0%, 100% {
transform: rotate(-45deg) scale(1);
box-shadow: 0 0 20px rgba(255, 111, 174, 0.5), 0 15px 35px rgba(0,0,0,0.2);
}
50% {
transform: rotate(-45deg) scale(1.1);
box-shadow: 0 0 40px rgba(255, 111, 174, 0.8), 0 15px 35px rgba(0,0,0,0.2);
}
}

/* PANTALLAS */

.pantalla{
position:absolute;
width:100%;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
transition:opacity 0.8s ease;
}

.oculto{
opacity:0;
pointer-events:none;
}

/* TEXTO PRINCIPAL */

h1{
font-size:30px;
margin-bottom:120px;
letter-spacing:2px;
text-shadow:2px 2px 10px rgba(0,0,0,0.2);
}

/* CORAZON */

.corazon{
position:relative;
width:220px;
height:200px;
background:#ff6fae;
transform:rotate(-45deg);
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 0 20px rgba(255, 111, 174, 0.5), 0 15px 35px rgba(0,0,0,0.2);
animation: pulse-heart 2s infinite;
}

.corazon::before,
.corazon::after{
content:"";
position:absolute;
width:220px;
height:200px;
background:#ff6fae;
border-radius:50%;
}

.corazon::before{
top:-110px;
left:0;
}

.corazon::after{
left:110px;
top:0;
}

/* BOTON */

button{
padding:12px 28px;
border:none;
border-radius:25px;
background:white;
color:#ff4d88;
font-weight:bold;
font-size:16px;
cursor:pointer;
transition:0.3s;
z-index:10;
}

.heart-button{
transform: rotate(45deg);
}

button:hover{
background:#ffe4ef;
transform:scale(1.1);
}

.heart-button:hover{
transform:scale(1.1) rotate(45deg);
}

/* MENSAJE */

.cajaMensaje{
background:rgba(255,255,255,0.2);
padding:40px;
border-radius:20px;
backdrop-filter:blur(10px);
max-width:400px;
}

#textoMensaje{
margin:20px 0;
font-size:18px;
color:white;
}