/* ===== HERO ===== */
.hero-eventos {
    text-align: center;
    padding: 60px 20px;
}

.hero-eventos h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
}

.hero-eventos p {
    font-size: 20px;
    opacity: 0.8;
}

/* ============================================================
   LAYOUT PRINCIPAL: LISTADO IZQUIERDA + CALENDARIO DERECHA
   ============================================================ */

.wrapContent .eventos-layout {
    display: grid !important;
    grid-template-columns: 350px 1fr !important;
    gap: 40px !important;
    width: 100% !important;
    align-items: start !important;
    margin-top: 40px !important;
}

/* Evitar que el template rompa el grid */
.wrapContent .eventos-layout section,
.wrapContent .eventos-layout aside {
    float: none !important;
    width: auto !important;
    clear: none !important;
    display: block !important;
}

/* ============================================================
   LISTADO IZQUIERDO
   ============================================================ */

.eventos-lista {
    background: #f7f3ef;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.eventos-lista h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.evento {
    background: #fafafa;
    border-left: 4px solid #c49a6c;
    padding: 20px;
    margin-bottom: 20px;
}

.evento h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.evento p {
    font-size: 16px;
    margin: 4px 0;
}

/* ============================================================
   CALENDARIO DINÁMICO
   ============================================================ */

.calendario-eventos {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Encabezado del calendario */
.calendar-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 22px;
    margin-bottom: 10px;
}

.calendar-header span {
    cursor: pointer;
    font-size: 24px;
    padding: 5px 10px;
}

/* Grid del calendario */
.calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 5px !important;
    margin-top: 20px !important;
}

.calendar-grid div {
    padding: 10px;
    text-align: center;
    border-radius: 6px;
}

.calendar-grid .day {
    background: #fafafa;
    border: 1px solid #ddd;
}

.calendar-grid .event {
    margin-top: 5px;
    background: #c49a6c;
    color: #fff;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 12px;
}

/* ============================================================
   AJUSTES DEL LOGO Y MENÚ (solo para events.html)
   ============================================================ */

.logowrap {
  position: relative !important;
  margin-top: 40px !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1 !important;
  text-align: center;
}

.wrapTopMenu {
    position: relative;
    z-index: 20;
}

.wrapTopMenu .topMenu {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
}

#mainmenu,
#mainmenu_right {
    display: flex !important;
    gap: 20px;
}

.logoWrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1 !important;
    margin-top: 40px !important;
}

.wrapTopMenu {
    margin-top: 20px !important;
    position: relative !important;
    z-index: 2 !important;
}

.event-day {
    background: #b38b59;
    color: white;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
}

.event-day:hover {
    background: #8a6a45;
}
/* Ajuste fino del logo SOLO en events.html */
.logoSeparator .logoWrap .logoHeader .logoImg {
    margin-top: -40px !important; /* súbelo más o menos según necesites */
}

.evento-card img {
    vertical-align: top !important;
    display: block !important;
}