body{
margin:0;
font-family:Arial;
background:#ff7a00;
color:white;
text-align:center;
}

header{
background:#5300ff;
padding:15px;
}

nav a{
margin:10px;
color:white;
font-weight:bold;
text-decoration:none;
}

.carousel{
position:relative;
max-width:800px;
margin:auto;
}

.carousel img{
width:100%;
border-radius:10px;
}

.carousel button{
position:absolute;
top:45%;
font-size:30px;
background:none;
border:none;
color:white;
cursor:pointer;
}

.carousel button:nth-child(2){left:10px;}
.carousel button:nth-child(3){right:10px;}

.video-layout{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
padding:20px;
}

video{
width:600px;
max-width:90%;
border-radius:10px;
}

.playlist{
background:#ff8c2a;
padding:15px;
border-radius:10px;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:10px;
padding:20px;
}

.gallery img{
width:100%;
border-radius:10px;
cursor:pointer;
transition:transform .3s;
}

.gallery img:hover{
transform:scale(1.05);
}

#zoomViewer{
position:fixed;
display:none;
align-items:center;
justify-content:center;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
}

#zoomViewer img{
max-width:90%;
max-height:90%;
}

#mascota{
position:fixed;
bottom:20px;
right:20px;
width:140px;
}

#mascota img{
width:100%;
cursor:pointer;
animation:float 3s infinite ease-in-out;
}

#speech{
background:white;
color:black;
padding:8px;
border-radius:10px;
margin-top:5px;
display:none;
}

@keyframes float{
0%{{transform:translateY(0)}}
50%{{transform:translateY(-10px)}}
100%{{transform:translateY(0)}}
}

.glitter{
pointer-events:none;
position:fixed;
width:100%;
height:100%;
background-image:radial-gradient(white 1px, transparent 1px);
background-size:3px 3px;
opacity:0.25;
animation:glitterMove 10s linear infinite;
}

@keyframes glitterMove{
from{background-position:0 0}
to{background-position:200px 200px}
}
.zoomContent{
text-align:center;
color:white;
}

#zoomDesc{
margin-top:15px;
font-size:18px;
max-width:700px;
}



#avePapel{
position:fixed;
width:90px;
top:30%;
left:-120px;
z-index:9999;
pointer-events:none;
transition:transform 2s linear;
}

#confeti{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
z-index:9999;
}

.confeti-piece{

position:absolute;

width:12px;
height:12px;

background:red;

animation:caer linear infinite;

clip-path: polygon(
30% 0%, 70% 0%,
100% 30%, 100% 70%,
70% 100%, 30% 100%,
0% 70%, 0% 30%
);

}

@keyframes caer{

0%{
transform:translateY(-10vh) rotate(0deg);
}

100%{
transform:translateY(110vh) rotate(360deg);
}

}


#contadorVisitas{

position:fixed;

bottom:10px;
left:10px;

background:rgba(0,0,0,0.6);
color:white;

padding:8px 15px;

border-radius:10px;

font-size:16px;

}

.piePagina{

background:#5300ff;

color:white;

text-align:center;

padding:20px;

font-size:14px;

margin-top:40px;

}