/* reset básico */

*{
box-sizing:border-box;
}

html,body{
margin:0;
padding:0;
overflow-x:hidden;
}

img,iframe{
max-width:100%;
height:auto;
}

/* body */

body{

font-family:'Poppins', sans-serif;
background:#d7b4c6;

display:flex;
justify-content:center;
align-items:center;

min-height:100vh;

padding:20px;

}

/* tarjeta */

.card{

width:900px;
max-width:100%;

background:#e9dde6;

border-radius:12px;

box-shadow:0 15px 40px rgba(0,0,0,0.2);

position:relative;

padding:30px;

overflow:hidden;

}

/* header */

header{

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;

}

nav a{

margin:0 20px;

text-decoration:none;

color:#6f5c75;

font-weight:500;

}

.logo{
font-size:35px;
}

/* texto */

.hero{

text-align:center;
margin-top:40px;

}

.hero h1{

font-family:'Pacifico', cursive;

font-size:60px;

color:#7c4f83;

margin:10px 0;

}

.hero p{

color:#777;

max-width:420px;

margin:auto;

}

/* puntos */

.social{

margin-top:20px;

}

.social span{

margin:0 10px;

font-size:18px;

color:#7c4f83;

}

/* botón */

.memory-button{

margin-top:25px;

padding:14px 28px;

background:#7c4f83;

color:white;

font-size:18px;

border:none;

border-radius:30px;

cursor:pointer;

transition:all .3s ease;

box-shadow:0 6px 15px rgba(0,0,0,.2);

}

.memory-button:hover{

background:#6b3f71;

transform:translateY(-2px);

}

/* corona de estrellas */

.star-arc{

position:absolute;

top:10px;

left:50%;

transform:translateX(-50%);

width:100%;

max-width:600px;

}

.star-arc svg{

width:100%;

}

/* globos */

.balloons{

position:absolute;

right:0;

top:0;

}

.balloon{

position:absolute;

display:flex;

flex-direction:column;

align-items:center;

animation:float 6s infinite ease-in-out;

}

.balloon-shape{

width:70px;

height:90px;

background:radial-gradient(circle at 30% 30%, #ff6b81,#e84160);

border-radius:50% 50% 45% 45%;

}

.string{

width:2px;

height:40px;

background:#444;

}

/* curva globos */

.balloon1{
right:160px;
top:220px;
}

.balloon2{
right:90px;
top:180px;
}

.balloon3{
right:20px;
top:220px;
}

@keyframes float{

0%{transform:translateY(0)}

50%{transform:translateY(-25px)}

100%{transform:translateY(0)}

}

/* osito */

.bear{

position:absolute;

left:40px;

bottom:20px;

}

.bear img{

width:200px;

}

/* cupcake */

.cake{

position:absolute;

right:40px;

bottom:40px;

font-size:100px;

}

/* confetti */

.confetti{

position:absolute;

width:8px;
height:8px;

background:#ffcc00;

animation:fall 5s linear infinite;

}

@keyframes fall{

0%{transform:translateY(-100px)}

100%{transform:translateY(500px)}

}

/* modal video */

.video-modal{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.7);

justify-content:center;
align-items:center;

z-index:999;

}

.video-box{

position:relative;

width:90%;
max-width:700px;

background:white;

border-radius:10px;

padding:10px;

}

.video-box iframe{

width:100%;
height:400px;

border:none;

}

.close-video{

position:absolute;

top:-10px;
right:-10px;

background:#7c4f83;

color:white;

border-radius:50%;

padding:5px 10px;

cursor:pointer;

}

/* responsive */

@media (max-width:768px){

body{
padding:10px;
}

.card{

width:100%;
max-width:100%;

margin:0;

border-radius:15px;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

}

.hero h1{
font-size:36px;
}

.hero p{
font-size:14px;
padding:0 10px;
}

/* corona */

.star-arc{

position:relative;

margin-bottom:20px;

}

/* globos */

.balloons{

position:relative;

display:flex;

justify-content:center;

align-items:flex-end;

gap:15px;

margin:20px 0;

width:100%;

}

.balloon{

position:relative;

top:0 !important;
right:0 !important;
left:0 !important;

margin:0 5px;

}

.balloon-shape{

width:40px;
height:55px;

}

.string{

height:25px;

}

/* osito */

.bear{

position:relative;

left:auto;
bottom:auto;

margin-top:20px;

}

.bear img{

width:140px;

}

/* cupcake */

.cake{

position:relative;

right:auto;
bottom:auto;

font-size:60px;

margin-top:10px;

}

.video-box iframe{

height:220px;

}

}