/* =========================
   CONTAINER GERAL
========================= */
#eventos-container {
  margin-top: 30px;
}


/* =========================
   BLOCO EVENTOS
========================= */
.eventos-bloco {
  margin: 0 auto 20px auto; /* 🔥 reduz espaço abaixo */
  max-width: 700px;

  background: linear-gradient(
    180deg,
    rgba(20,20,20,0.55) 0%,
    rgba(10,10,10,0.65) 100%
  );

  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 22px;

  backdrop-filter: blur(3px);
}

/* espaçamento entre HOJE e PRÓXIMOS */
.eventos-bloco + .eventos-bloco {
  margin-top: 10px;
}


/* =========================
   TÍTULO
========================= */
.eventos-titulo {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;

  color: var(--vermelho-principal);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.evento-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--vermelho-principal);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}


/* =========================
   LISTA
========================= */
.eventos-lista {
  display: flex;
  flex-direction: column;
}


/* =========================
   LINHA DO EVENTO
========================= */
.evento-linha {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 14px;
  padding: 14px 6px;

  border-bottom: 1px solid rgba(255,255,255,0.05);

  text-decoration: none;
  color: inherit;
  cursor: pointer;

  transition: all 0.2s ease;
}

.evento-linha:last-child {
  border-bottom: none;
}

.evento-linha:hover {
  transform: translateX(4px);
  background: rgba(255,255,255,0.05);
}


/* =========================
   DATA
========================= */
.evento-data {
  min-width: 82px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vermelho-principal);
  white-space: nowrap;
}


/* =========================
   INFO
========================= */
.evento-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.evento-nome {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  word-break: break-word;
  line-height: 1.4;
}

.evento-local {
  font-size: 13px;
  color: #aaa;
}


/* =========================
   CTA FINAL (PADRÃO ESCURO LIMPO)
========================= */

.eventos-cta {
  margin-top: 20px;
  text-align: center;
}


/* BOTÃO (RESET + ESTILO FINAL) */
#eventos-container .eventos-cta .btn-eventos,
#eventos-container .eventos-cta .btn-eventos.btn,
#eventos-container .eventos-cta .btn-eventos.btn-danger {

  all: unset; /* 🔥 mata bootstrap */

  display: inline-block;
  padding: 12px 28px;

  background: rgba(255, 255, 255, 0.03);
  color: #e6e6e6;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;

  font-size: 13px;
  letter-spacing: 1px;

  cursor: pointer;
  text-align: center;

  font-family: inherit;
  line-height: normal;

  text-decoration: none;

  transition: all 0.2s ease;
}


/* HOVER (IGUAL BOTÃO DE BAIXO) */
#eventos-container .eventos-cta .btn-eventos:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.2);

  transform: translateY(-1px);
}


/* REMOVE QUALQUER EFEITO */
#eventos-container .eventos-cta .btn-eventos:focus,
#eventos-container .eventos-cta .btn-eventos:active,
#eventos-container .eventos-cta .btn-eventos:focus-visible {
  outline: none;
  box-shadow: none;
}


/* GARANTE LINK LIMPO */
a.btn-eventos {
  text-decoration: none !important;
}
/* =========================
   🔥 AJUSTE GLOBAL DE ESPAÇO (O QUE REALMENTE RESOLVE)
========================= */

/* remove buraco entre eventos e próxima seção */
#eventos-container + section,
#eventos-container + div {
  margin-top: 10px !important;
}

/* se estiver usando bootstrap/container */
.container + .container {
  margin-top: 15px;
}


/* =========================
   RESPONSIVO
========================= */
@media (max-width: 768px) {

  .evento-linha {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .evento-data {
    font-size: 12px;
  }

  .evento-nome {
    font-size: 14px;
  }

  .evento-local {
    font-size: 12px;
  }

  .eventos-titulo {
    font-size: 16px;
  }

 .eventos-cta{

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

}

.btn-eventos{

display:inline-block;

width:auto;

min-width:250px;

text-align:center;

}
}