.agenda-page{
    background:#f4f7fb;
}

.agenda-page .container{
    max-width:960px;
    width:calc(100% - 48px);
    margin:0 auto;
}

.agenda-section{
    padding:60px 0 80px;
}


/* ==========================================
   AGRUPACIÓN POR MES
========================================== */

.agenda-month-group + .agenda-month-group{
    margin-top:40px;
}

.agenda-month-header{

    display:flex;
    align-items:center;
    gap:18px;

    margin:65px 0 28px;

    font-size:25px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:#0b3a82;
}

.agenda-month-header::after{

    content:"";

    flex:1;

    height:2px;

    background:#d9e2ee;

}


/* ==========================================
   EVENTOS
========================================== */

.agenda-item{

    display:grid;

    grid-template-columns:70px 1fr;

    gap:22px;

    align-items:start;

    padding:18px 0;

    border-bottom:1px solid #edf1f6;

    transition:.25s ease;

}

.agenda-item:hover{

    transform:translateX(4px);

}

.agenda-date{

    text-align:center;

}

.agenda-day{

    display:block;

    font-size:42px;

    font-weight:900;

    line-height:1;

    color:#0b3a82;

}

.agenda-month{

    display:block;

    margin-top:4px;

    font-size:12px;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#d4a017;

}

.agenda-info h2{

    margin:0 0 8px;

    color:#0b3a82;

    font-size:26px;

    line-height:1.25;

    font-weight:800;

}

.agenda-meta{

    margin:5px 0;

    color:#5f6f86;

    font-size:16px;

}

.agenda-hour{

    color:#d4a017;

    font-weight:700;

}

.agenda-location{

    color:#6a778b;

}

.empty-state{

    text-align:center;

    padding:60px 20px;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:768px){

    .agenda-page .container{

        width:calc(100% - 28px);

    }

    .agenda-section{

        padding:40px 0 60px;

    }

    .agenda-month-group + .agenda-month-group{

        margin-top:26px;

    }

    .agenda-month-header{

        margin:42px 0 20px;

        gap:12px;

        font-size:26px;

        letter-spacing:.05em;

    }

    .agenda-item{

        grid-template-columns:56px 1fr;

        gap:16px;

        padding:16px 0;

    }

    .agenda-day{

        font-size:32px;

    }

    .agenda-month{

        font-size:11px;

    }

    .agenda-info h2{

        font-size:20px;

        line-height:1.3;

    }

    .agenda-meta{

        font-size:14px;

    }

}

/* ==========================================
   DESCRIPCIÓN DE LOS EVENTOS
========================================== */

.agenda-description{

    margin-top:16px;

    color:#4f5e73;

    font-size:15px;

    line-height:1.7;

}

.agenda-description p{

    margin:0 0 12px;

}

.agenda-description p:last-child{

    margin-bottom:0;

}