/* Eventos */
.ev-intro { padding: calc(var(--header-h) + 14vh) var(--pad) 8vh; }
.ev-intro__title { font-size: clamp(64px, 14vw, 260px); line-height: .95; }
.ev-intro__lead { margin-top: 3vh; font-size: clamp(18px, 1.8vw, 28px); color: var(--muted); max-width: 28em; }

.events { margin: 0 var(--pad); border-top: 1px solid var(--line); padding-bottom: 14vh; }
.event {
  display: grid;
  grid-template-columns: 4rem 15rem 1fr minmax(14rem, 22rem);
  gap: var(--pad);
  align-items: baseline;
  padding: clamp(22px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--line);
  transition: opacity .4s, padding-left .6s var(--ease);
}
.event p, .event h2 { margin: 0; }
.event__num { color: var(--muted); font-size: 15px; }
.event__date { font-size: clamp(16px, 1.4vw, 22px); }
.event__city { font-size: clamp(44px, 8vw, 150px); line-height: .95; white-space: nowrap; }
.event__where { display: flex; flex-direction: column; gap: 8px; font-size: clamp(15px, 1.2vw, 19px); }
.event__where p { color: var(--muted); }
.event__map { align-self: flex-start; }
.event__tbd { color: var(--muted); }
.event--tbd .event__city { color: #8a8a8a; }

@media (hover: hover) {
  .events:hover .event { opacity: .3; }
  .events .event:hover { opacity: 1; padding-left: 14px; }
}

.js .event { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s var(--ease), padding-left .6s var(--ease); }
.js .event.is-in { opacity: 1; transform: none; }
@media (hover: hover) {
  .js .events:hover .event.is-in { opacity: .3; }
  .js .events .event.is-in:hover { opacity: 1; }
}

@media (max-width: 899px) {
  .event { grid-template-columns: 1fr; gap: 8px; }
  .event__num { display: none; }
  .event__where { margin-top: 10px; }
  .event__city { font-size: clamp(44px, 15vw, 90px); }
}