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

body{
background:#fff;
overflow-x:hidden;
}

header{
padding-top:20px;
}

.home-btn{
position:fixed;
top:15px;
left:50%;
transform:translateX(-50%);
background:#000;
color:white;
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
text-decoration:none;
z-index:1000;
transition:.3s;
}

.home-btn:hover{
transform:translateX(-50%) scale(1.1);
}

.banner{
width:100%;
height:350px;
overflow:hidden;
margin-top:50px;
}

.banner img{
width:100%;
height:100%;
object-fit:cover;
}

.eventos{
    width:90%;
    max-width:1200px;
    margin:50px auto;
}

.evento-card{
    display:flex;
    background:white;
    border-radius:25px;
    margin-bottom:30px;
    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.10);

    transition:.4s;
}

.evento-card:hover{
    transform:translateY(-8px);
}

.fecha{
    width:180px;
    text-align:center;
    padding:25px;
    background:#fafafa;
}

.icono{
    width:70px;
    height:70px;
    border-radius:50%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:30px;
}

.fecha h2{
    font-size:60px;
    margin:10px 0;
}

.contenido{
    flex:1;
    padding:35px;
}

.contenido h2{
    font-size:36px;
}

.contenido span{
    font-weight:bold;
}

.tag{
    display:inline-block;
    margin:15px 0;
    padding:8px 18px;
    border-radius:50px;
    color:white;
    font-size:13px;
}

.info{
    width:280px;
    padding:35px;
    border-left:1px solid #eee;
}

.info p{
    margin-bottom:20px;
}

.info a{
    display:block;
    text-align:center;
    text-decoration:none;
    color:white;
    padding:14px;
    border-radius:12px;
    font-weight:bold;
}

/* MORADO */

.purple{
    border-right:8px solid #8b5cf6;
}

.purple .icono,
.purple .tag,
.purple .info a{
    background:#8b5cf6;
}

.purple span{
    color:#8b5cf6;
}

/* VERDE */

.green{
    border-right:8px solid #10b981;
}

.green .icono,
.green .tag,
.green .info a{
    background:#10b981;
}

.green span{
    color:#10b981;
}

/* NARANJA */

.orange{
    border-right:8px solid #f97316;
}

.orange .icono,
.orange .tag,
.orange .info a{
    background:#f97316;
}

.orange span{
    color:#f97316;
}

/* AZUL */

.blue{
    border-right:8px solid #0ea5e9;
}

.blue .icono,
.blue .tag,
.blue .info a{
    background:#0ea5e9;
}

.blue span{
    color:#0ea5e9;
}

/* ROSA */

.pink{
    border-right:8px solid #ff4f87;
}

.pink .icono,
.pink .tag,
.pink .info a{
    background:#ff4f87;
}

.pink span{
    color:#ff4f87;
}

@media(max-width:900px){

    .evento-card{
        flex-direction:column;
    }
    
    .fecha,
    .info{
        width:100%;
    }
    
    .info{
        border-left:none;
        border-top:1px solid #eee;
    }
    
    .contenido h2{
        font-size:28px;
    }
    
    .fecha h2{
        font-size:50px;
    }
    
    }

    .hidden{
        opacity:0;
        transform:translateY(80px);
        transition:all .8s ease;
    }
    
    .show{
        opacity:1;
        transform:translateY(0);
    }