*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    background:linear-gradient(-45deg,#0d0d0d,#1a0000,#330000,#0d0d0d);
    background-size:400% 400%;
    animation:fondoAnimado 15s ease infinite;
    color:white;
}

@keyframes fondoAnimado{
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}

header{
    background:linear-gradient(90deg,#1a0000,#4d0000,#660000);
    padding:25px;
    text-align:center;
}

header h1{
    color:#ffcccc;
    font-size:3rem;
    letter-spacing:4px;
    animation:brillo 2s infinite alternate;
}

@keyframes brillo{
    from{
        text-shadow:0 0 5px #ff6666;
    }

    to{
        text-shadow:
        0 0 10px #ff6666,
        0 0 20px #ff0000,
        0 0 40px #ff0000;
    }
}

.linea{
    width:220px;
    height:4px;
    margin:15px auto 0;
    background:linear-gradient(to right,transparent,red,transparent);
}

.intro{
    max-width:900px;
    margin:30px auto;
    padding:25px;
    background:rgba(26,26,26,.95);
    border-left:5px solid #8b0000;
    border-radius:15px;
    box-shadow:0 0 20px rgba(255,0,0,.3);
    transition:.4s;
}

.intro:hover{
    transform:scale(1.02);
}

.intro h2{
    color:#ff6666;
    margin-bottom:10px;
}

.intro p{
    line-height:1.8;
    text-align:justify;
}

.carousel-container{
    width:90%;
    max-width:500px;
    margin:50px auto;
    overflow:hidden;
    border-radius:15px;
    border:2px solid #8b0000;
    box-shadow:
    0 0 15px rgba(255,0,0,.6),
    0 0 35px rgba(255,0,0,.3);
}

.carousel{
    display:flex;
    transition:transform .5s ease-in-out;
}

.carousel img{
    min-width:100%;
    width:100%;
    height:400px;
    object-fit:cover;
    display:block;
    transition:.5s;
}

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

.calendar{
    width:320px;
    margin:40px auto;
    background:#1a1a1a;
    padding:20px;
    border-radius:15px;
    text-align:center;
    border:1px solid #8b0000;
    box-shadow:0 0 20px rgba(255,0,0,.4);
}

.calendar h3{
    color:#ff6666;
    margin-bottom:15px;
}

.days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:5px;
}

.day-name{
    font-weight:bold;
    color:#d9d9d9;
    padding:5px;
}

.day{
    background:#333;
    padding:10px;
    border-radius:8px;
    transition:.3s;
    cursor:pointer;
}

.day:hover{
    background:#8b0000;
    transform:scale(1.1);
}

.highlight{
    background:#8b0000;
    color:white;
    font-weight:bold;
    box-shadow:0 0 10px red;
}

footer{
    margin-top:40px;
    background:#120000;
    text-align:center;
    padding:20px;
    color:#ccc;
}

header,
.intro,
.carousel-container,
.calendar,
footer{
    animation:aparecer 1s ease;
}

@keyframes aparecer{
    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}