/* ==========================================================================
   Global
   ========================================================================== */
.eventos-page {
  font-family: 'Roboto', sans-serif;
  --mg-btn-swap-duration: 0.7s;
}

.eventos-page header {
  border-bottom: 0;
}

.eventos-divider {
  width: 48px;
  height: 3px;
  background-color: #ff8000;
  border-radius: 2px;
}

.eventos-divider--left {
  margin: 0 0 1.5rem;
}

.eventos-divider--full {
  width: 100%;
}

.eventos-divider--center {
  margin: 0 auto 3rem;
}

/* ==========================================================================
   Seção: Hero (eventos-hero)
   ========================================================================== */
.eventos-hero {
  position: relative;
  background-color: #29235c;
  overflow: hidden;
  color: #ffffff;
  padding: 120px 0;
}

/* Camada do fundo: o parallax de rolagem move .eventos-hero__media (--hero-scroll-y, eventos.anim.js) e o do
   mouse move .eventos-hero__bg; ficam em elementos separados para um não sobrescrever o transform do outro. */
.eventos-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translate3d(0, var(--hero-scroll-y, 0px), 0);
  will-change: transform;
}

.eventos-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: translate3d(0, 0, 0);
}

.eventos-hero__foto,
.eventos-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O vídeo só aparece quando já está tocando (sem quadro preto enquanto carrega). */
.eventos-hero__video {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.eventos-hero__video.is-playing {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .eventos-hero__bg {
    transform: translate3d(var(--hero-parallax-x, 0px), var(--hero-parallax-y, 0px), 0) scale(1.03);
    transition: transform 0.15s ease-out;
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eventos-hero__bg {
    transform: none;
    transition: none;
  }
}

/* Ultrawide: a arte para de crescer em 2560px e fica centrada — acima disso o
   upscaling degradava a foto. As sobras laterais ficam no roxo da seção; à
   esquerda o overlay já é opaco e à direita a máscara dissolve a emenda. */
@media (min-width: 2560px) {
  .eventos-hero__bg {
    right: 0;
    max-width: 2560px;
    margin-inline: auto;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 200px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 200px), transparent 100%);
  }
}

.eventos-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(41, 35, 92, 1) 20%, rgba(41, 35, 92, 0.8) 50%, rgba(41, 35, 92, 0) 100%);
  z-index: 2;
}

@media (max-width: 767.98px) {
  .eventos-hero__overlay {
    background: rgba(41, 35, 92, 0.9);
  }
}

/* Com o vídeo tocando: o mesmo degradê roxo, mas sem chegar a transparente à direita, mais um véu escuro —
   o vídeo é mais claro e movimentado que a foto e o texto precisa manter o contraste. */
.eventos-hero__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 85% 40%, rgba(57, 65, 149, 0.35) 0%, rgba(57, 65, 149, 0) 60%),
    linear-gradient(180deg, rgba(14, 11, 40, 0.3) 0%, rgba(14, 11, 40, 0) 45%, rgba(14, 11, 40, 0.4) 100%),
    linear-gradient(90deg, rgba(41, 35, 92, 0.55) 30%, rgba(41, 35, 92, 0.2) 100%);
  opacity: 0;
  transition: opacity 1.2s ease;
}

.eventos-hero--video .eventos-hero__overlay::after {
  opacity: 1;
}

/* No celular o roxo base já cobre 90%; com o vídeo ele fica um pouco mais leve para o movimento aparecer. */
@media (max-width: 767.98px) {
  .eventos-hero__overlay {
    transition: background-color 1.2s ease;
  }

  .eventos-hero--video .eventos-hero__overlay {
    background: rgba(41, 35, 92, 0.55);
  }

  .eventos-hero__overlay::after {
    background: linear-gradient(180deg, rgba(14, 11, 40, 0.45) 0%, rgba(14, 11, 40, 0.25) 50%, rgba(14, 11, 40, 0.55) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eventos-hero__media {
    transform: none;
  }
}

.eventos-hero > .container {
  position: relative;
  z-index: 3;
  /* Parallax de rolagem (eventos.anim.js): o texto sobe um pouco mais rápido e some enquanto o fundo desce. */
  transform: translate3d(0, var(--hero-conteudo-y, 0px), 0);
  opacity: var(--hero-conteudo-opacidade, 1);
}

.eventos-hero__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.eventos-hero__title-bold {
  font-weight: 800;
  display: block;
}

.eventos-hero__title-regular {
  font-weight: 400;
  display: block;
}

.eventos-hero__title-highlight {
  font-weight: 400;
  display: block;
  color: #ff8000;
}

.eventos-hero__description {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: 2.5rem;
  max-width: 580px;
}

@media (max-width: 767.98px) {
  .eventos-hero__description {
    font-size: 1.125rem;
  }
}

.eventos-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.eventos-hero__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ff8000;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  padding: 16px 28px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.eventos-hero__btn-primary:hover,
.eventos-hero__btn-primary:focus-visible {
  background: #e87400;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 14px 22px -4px rgba(255, 128, 0, 0.4);
}

.eventos-hero__btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s ease;
}

.eventos-hero__btn-outline:hover,
.eventos-hero__btn-outline:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* Anti-FOUC: esconder conteudo cru enquanto JS nao upgrade o botao. */
.eventos-page .mg-btn-auto:not(.mg-btn) { color: transparent !important; }
.eventos-page .mg-btn-auto:not(.mg-btn) > svg,
.eventos-page .mg-btn-auto:not(.mg-btn) > img,
.eventos-page .mg-btn-auto:not(.mg-btn) > span:not(.mg-btn__inner):not(.mg-btn__swap):not(.mg-btn__swap-text):not(.mg-btn__icon-wrap):not(.mg-btn__icon) { opacity: 0 !important; visibility: hidden !important; }
.eventos-page .mg-btn {
  position: relative;
}

.eventos-page .mg-btn__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eventos-page .mg-btn__swap {
  position: relative;
  display: inline-grid;
  overflow: hidden;
}

.eventos-page .mg-btn__swap-text {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--mg-btn-swap-duration, 0.42s) cubic-bezier(0.2, 0.7, 0.2, 1);
}

.eventos-page .mg-btn__swap-text.is-absolute {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 130%, 0);
}

.eventos-page .mg-btn:hover .mg-btn__swap-text.is-absolute,
.eventos-page .mg-btn:focus-visible .mg-btn__swap-text.is-absolute {
  transform: translate3d(0, 0, 0);
}

.eventos-page .mg-btn:hover .mg-btn__swap-text.is-relative,
.eventos-page .mg-btn:focus-visible .mg-btn__swap-text.is-relative {
  transform: translate3d(0, -130%, 0);
}

.eventos-page .mg-btn__icon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: transform var(--mg-btn-swap-duration, 0.42s) cubic-bezier(0.2, 0.7, 0.2, 1);
}

.eventos-page .mg-btn__icon.is-absolute {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 130%, 0);
}

.eventos-page .mg-btn:hover .mg-btn__icon.is-absolute,
.eventos-page .mg-btn:focus-visible .mg-btn__icon.is-absolute {
  transform: translate3d(0, 0, 0);
}

.eventos-page .mg-btn:hover .mg-btn__icon.is-relative,
.eventos-page .mg-btn:focus-visible .mg-btn__icon.is-relative {
  transform: translate3d(0, -130%, 0);
}

.eventos-page .mg-btn__icon-wrap {
  width: var(--mg-icon-size, 16px);
  height: var(--mg-icon-size, 16px);
}

.eventos-page .mg-btn__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .eventos-page .mg-btn__swap-text,
  .eventos-page .mg-btn__icon {
    transition: none;
  }

  .eventos-page .mg-btn__swap-text.is-absolute,
  .eventos-page .mg-btn__icon.is-absolute {
    display: none;
  }
}

/* ==========================================================================
   Seção: Calendário (eventos-calendario)
   Contrato padrão portado da Agenda de Treinamentos (.calendario / .cal-card /
   .cal-filtros / .filtro-pill). Escopado a .eventos-page para não vazar.
   Os efeitos mg-btn dos CTAs reutilizam o contrato .eventos-page .mg-btn acima.
   ========================================================================== */

/* Design tokens do contrato do calendário (espelham os :root da página de
   treinamentos; escopados à página para não poluir o restante do site) */
.eventos-page {
  --color-navy-deep: #29235c;
  --color-indigo: #394195;
  --color-accent: #ff8000;
  --color-accent-dark: #e67300;
  --color-white: #ffffff;
  --color-text-muted: #666666;
  --color-border-soft: #dddddd;
  --color-section-bg: #f3f3f3;

  --tag-local-bg: rgba(26, 43, 72, 0.9);
  --tag-tipo-bg: rgba(22, 145, 148, 0.2);
  --tag-tipo-text: #169194;
  --tag-novo-bg: rgba(203, 108, 230, 0.2);
  --tag-novo-text: #cb6ce6;
  --tag-setor-bg: rgba(255, 128, 1, 0.2);
  --tag-setor-text: #ff8001;

  --font-primary: 'Roboto', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

.eventos-page [hidden] { display: none !important; }

.eventos-page .calendario {
  background-color: var(--color-section-bg);
  font-family: var(--font-primary);
  padding-top: 52px;
  padding-bottom: 72px;
}

.eventos-page .calendario__container {
  max-width: 1170px;
  padding-left: 24px;
  padding-right: 24px;
}

/* --- Cabeçalho da seção --- */
.eventos-page .calendario__title {
  font-size: 2.375rem;                   /* 38px */
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-deep);
  line-height: normal;
  margin-bottom: 0;
}

.eventos-page .calendario__subtitle {
  font-size: 1.25rem;                    /* 20px */
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  line-height: 1.19;
  max-width: 850px;
  margin-top: 24px;
  margin-bottom: 0;
}

.eventos-page .calendario__accent-bar {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-accent);
  margin-top: 20px;
}

/* --- Contador de resultados (topo da lista, junto aos cards) --- */
.eventos-page .calendario__count {
  font-size: 0.819rem;                   /* 13.1px */
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 16px;
}

.eventos-page .calendario__count strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-deep);
}

/* --- Busca (box único: lupa + input + botão laranja dentro) --- */
.eventos-page .calendario__search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  padding: 0 5px 0 38px;
  transition: border-color 0.2s;
}

.eventos-page .calendario__search:focus-within {
  border-color: var(--color-accent);
}

.eventos-page .calendario__search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.eventos-page .calendario__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 9px 0;
  font-family: var(--font-primary);
  font-size: 0.75rem;                    /* 12px */
  color: #333;
}

.eventos-page .calendario__search-input::placeholder {
  color: #999999;
}

.eventos-page .calendario__search-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--color-accent);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.eventos-page .calendario__search-btn:hover {
  background-color: var(--color-accent-dark);
}

/* ---- Layout: lista + sidebar ---- */
.eventos-page .calendario__layout {
  gap: 24px;
  align-items: flex-start;
  margin-top: 32px;
}

/* --- Títulos dos grupos (com régua laranja) --- */
.eventos-page .calendario__group-title {
  font-size: 1rem;                       /* 16px */
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-deep);
  line-height: 1.6;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: 30px;
}

.eventos-page .cal-card + .calendario__group-title {
  margin-top: 30px;
}

/* Carrossel vertical desativado nesta página (data-cal-carousel="off" no root):
   poucos eventos → lista fixa, com todos os cards visíveis. Busca/filtros seguem
   ativos via agendaTreinamento.js. */

/* Botão "Ver mais eventos" — visível só no mobile (controlado por JS via [hidden]) */
.eventos-page .calendario__more {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 11px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  font-size: 0.875rem;
  color: var(--color-navy-deep);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.eventos-page .calendario__more:hover {
  border-color: var(--color-navy-deep);
  background-color: #f7f7fb;
}

/* ---- Card de evento ---- */
.eventos-page .cal-card {
  display: flex;
  align-items: center;
  gap: 28px;
  background-color: var(--color-white);
  border: 1px solid #ececec;
  border-left: 4px solid var(--color-accent);
  border-radius: 10px;
  min-height: 171px;
  padding: 23px 24px 23px 18px;
}

.eventos-page .cal-card + .cal-card {
  margin-top: 12px;
}

/* --- Foto com selo de data sobreposto --- */
.eventos-page .cal-card__media {
  position: relative;
  flex-shrink: 0;
  margin-left: 30px;
}

.eventos-page .cal-card__photo-frame {
  flex-shrink: 0;
  width: 195px;
  height: 107px;
  overflow: hidden;
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  display: block;
}

.eventos-page .cal-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.eventos-page .cal-card:hover .cal-card__photo {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .eventos-page .cal-card__photo { transition: none; }
  .eventos-page .cal-card:hover .cal-card__photo { transform: none; }
}

/* Selo de data */
.eventos-page .cal-card__date {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 60px;
  background-color: #f4f4f4;
  border-radius: 8px;
  padding: 11px 8px;
  box-shadow: -1px 4px 2px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eventos-page .cal-card__date-day {
  font-size: 1.5rem;                     /* 24px */
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-deep);
  line-height: 1;
}

.eventos-page .cal-card__date-month {
  font-size: 0.7rem;                     /* 11.2px */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  line-height: 1.6;
}

.eventos-page .cal-card__date-year {
  font-size: 0.625rem;                   /* 10px */
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-muted);
  line-height: 1.2;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

/* --- Linha período · carga horária (igual aos cards da /academia) --- */
.eventos-page .cal-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-top: 10px;
}
.eventos-page .cal-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  line-height: 1.4;
}
.eventos-page .cal-card__meta-item svg { flex-shrink: 0; }

/* --- Corpo do card --- */
.eventos-page .cal-card__body {
  flex-grow: 1;
  min-width: 0;
}

.eventos-page .cal-card__tags {
  gap: 11px;
  align-items: center;
}

.eventos-page .cal-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.6875rem;                  /* 11px */
  font-weight: var(--font-weight-bold);
  line-height: 15px;
  text-transform: uppercase;
  white-space: nowrap;
}

.eventos-page .cal-tag--local {
  background-color: var(--tag-local-bg);
  color: var(--color-white);
  font-size: 0.625rem;                   /* 10px */
  letter-spacing: 1px;
  padding: 2px 12px;
  backdrop-filter: blur(2px);
}

.eventos-page .cal-tag--tipo {
  background-color: var(--tag-tipo-bg);
  color: var(--tag-tipo-text);
  padding-left: 16px;
  padding-right: 16px;
}

.eventos-page .cal-tag--novo {
  background-color: var(--tag-novo-bg);
  color: var(--tag-novo-text);
  padding-left: 16px;
  padding-right: 16px;
}

.eventos-page .cal-tag--setor {
  background-color: var(--tag-setor-bg);
  color: var(--tag-setor-text);
  font-size: 0.625rem;                   /* 10px */
}

.eventos-page .cal-card__title {
  font-size: 1rem;                       /* 16px */
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-deep);
  line-height: 20px;
  margin-top: 10px;
  margin-bottom: 0;
}

.eventos-page .cal-card__desc {
  font-size: 0.875rem;                   /* 14px */
  color: var(--color-text-muted);
  line-height: 20px;
  max-width: 540px;
  margin-top: 4px;
  margin-bottom: 0;
}

/* Local em destaque na linha de meta do card (mantém os textos dos eventos) */
.eventos-page .cal-card__desc strong {
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-deep);
}

/* --- Ações do card --- */
.eventos-page .cal-card__actions {
  gap: 11px;
  margin-top: 12px;
}

.eventos-page .cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 0.8rem;                     /* 12.8px */
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
}

.eventos-page .cal-btn:hover,
.eventos-page .cal-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(41, 35, 92, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .eventos-page .cal-btn { transition: background-color 0.2s, border-color 0.2s; }
  .eventos-page .cal-btn:hover,
  .eventos-page .cal-btn:focus-visible {
    transform: none;
    box-shadow: none;
  }
}

@media (max-width: 359.98px) {
  .eventos-page .cal-card__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

}

/* Celular/tablet: alvo de toque ≥ 40px e tags legíveis (≥ 12px) */
@media (max-width: 991.98px) {
  .eventos-page .cal-card__date-month { font-size: 0.75rem; }
  .eventos-page .cal-tag,
  .eventos-page .cal-tag--local,
  .eventos-page .cal-tag--setor {
    font-size: 0.75rem;
    line-height: 16px;
  }
}

.eventos-page .cal-btn--primary {
  background-color: var(--color-accent);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

.eventos-page .cal-btn--primary:hover {
  background-color: var(--color-accent-dark);
  color: var(--color-white);
}

.eventos-page .cal-btn--outline {
  border: 1px solid var(--color-text-muted);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.eventos-page .cal-btn--outline:hover {
  border-color: var(--color-navy-deep);
  color: var(--color-navy-deep);
}

/* ---- Sidebar: filtros ---- */
.eventos-page .cal-filtros {
  --cal-filtros-offset: -13px;
  width: 280px;
  flex-shrink: 0;
  margin-top: var(--cal-filtros-offset);
}

.eventos-page .cal-filtros--alinha-titulo { --cal-filtros-offset: 37px; }
.eventos-page .cal-filtros--alinha-busca  { --cal-filtros-offset: -13px; }

.eventos-page .cal-filtros__title {
  font-size: 1rem;                       /* 16px */
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-deep);
  line-height: 1.6;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: 12px;
}

.eventos-page .cal-filtros__block + .cal-filtros__block {
  margin-top: 6px;
}

.eventos-page .cal-filtros__label {
  font-size: 0.625rem;                   /* 10px */
  font-weight: var(--font-weight-bold);
  color: #999999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 18px;
  margin-bottom: 10px;
}

.eventos-page .cal-filtros__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Pílulas de filtro --- */
.eventos-page .filtro-pill {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  background-color: #F4F5FA;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  padding: 4px 14px;
  font-family: var(--font-primary);
  font-size: 0.8125rem;                  /* 13px */
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
  color: #333;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.eventos-page .filtro-pill:hover {
  border-color: var(--color-navy-deep);
  background-color: #ededf3;
}

.eventos-page .filtro-pill--active {
  background-color: var(--color-navy-deep);
  border-color: var(--color-navy-deep);
  color: var(--color-white);
}

.eventos-page .cal-filtros__toggle {
  display: none;
}

/* ---- Filtros aplicados (chips removíveis abaixo da busca) ---- */
.eventos-page .filtro-pill--chosen { display: none; }

.eventos-page .cal-aplicados {
  margin-top: 12px;
  margin-bottom: 4px;
  padding: 10px 12px;
  background-color: #f4f5fa;
  border: 1px solid #e3e3ee;
  border-radius: 8px;
}

.eventos-page .cal-aplicados__label {
  font-size: 0.625rem;                   /* 10px */
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999999;
  margin: 0 0 8px;
}

.eventos-page .cal-aplicados__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.eventos-page .cal-aplicado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 14px;
  background-color: var(--color-navy-deep);
  border: 1px solid var(--color-navy-deep);
  border-radius: 999px;
  font-family: var(--font-primary);
  font-size: 0.8125rem;                  /* 13px */
  line-height: 1.35;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.eventos-page .cal-aplicado:hover {
  background-color: var(--color-indigo);
  border-color: var(--color-indigo);
}

.eventos-page .cal-aplicado__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  font-size: 14px;
  line-height: 1;
}

.eventos-page .cal-aplicados__clear {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-primary);
  font-size: 0.8125rem;                  /* 13px */
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}

.eventos-page .cal-aplicados__clear:hover {
  color: var(--color-accent-dark);
}

/* Estado vazio (nenhum resultado) */
.eventos-page .calendario__empty {
  padding: 28px 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- Responsivo ---- */
@media (max-width: 767.98px) {
  .eventos-page .calendario__layout {
    flex-direction: column;
  }

  .eventos-page .cal-filtros {
    width: 100%;
    margin-top: 0;
    order: -1;                           /* filtros antes da lista no mobile */
  }

  .eventos-page .calendario__search {
    width: 100%;
  }

  .eventos-page .calendario__search-input {
    flex-grow: 1;
    width: auto;
  }

  .eventos-page .cal-filtros__blocks {
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .eventos-page .cal-filtros.is-collapsed .cal-filtros__blocks {
    position: relative;
    max-height: 210px;
  }
  .eventos-page .cal-filtros.is-collapsed .cal-filtros__blocks::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(243, 243, 243, 0), var(--color-section-bg) 92%);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .eventos-page .cal-filtros__blocks { transition: none; }
  }

  .eventos-page .cal-filtros__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 9px;
    background: none;
    border: 1px solid var(--color-border-soft);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
  }
  .eventos-page .cal-filtros__toggle:hover {
    color: var(--color-navy-deep);
    border-color: var(--color-navy-deep);
  }
  .eventos-page .cal-filtros__toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .eventos-page .cal-filtros:not(.is-collapsed) .cal-filtros__toggle::after {
    transform: translateY(2px) rotate(-135deg);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .eventos-page .cal-filtros { width: 240px; flex-shrink: 0; margin-top: var(--cal-filtros-offset); order: 0; }
  .eventos-page .calendario__main { flex: 1; min-width: 0; }
}

@media (max-width: 768px) {
  .eventos-page .calendario__title {
    font-size: 1.75rem;
  }

  .eventos-page .calendario__subtitle {
    font-size: 1.125rem;
  }

  .eventos-page .cal-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .eventos-page .cal-card__media {
    margin-left: 0;
    width: 100%;
  }

  .eventos-page .cal-card__photo-frame {
    width: 100%;
    height: 160px;
  }

  .eventos-page .cal-card__date {
    left: -8px;
    top: 14px;
    transform: none;
  }
}

/* ==========================================================================
   Seção: Destaque Lean Summit (eventos-destaque-lean-summit)
   ========================================================================== */
.eventos-destaque-lean-summit {
  position: relative;
  background-color: #29235c;
  color: #ffffff;
  overflow: hidden;
  padding: 80px 0;
}

.eventos-destaque-lean-summit__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

@media (max-width: 991.98px) {
  .eventos-destaque-lean-summit__bg {
    width: 100%;
    opacity: 0.2;
  }
}

/* Ultrawide: mesmo teto do hero (2560px de faixa) — a foto trava em 1280px e
   mantém a borda direita colada ao centro, preservando o split com o texto.
   A máscara à esquerda dissolve a emenda com o roxo da seção. */
@media (min-width: 2560px) {
  .eventos-destaque-lean-summit__bg {
    left: auto;
    right: 50%;
    width: 1280px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 200px, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 200px, #000 100%);
  }
}

.eventos-destaque-lean-summit__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(268deg, #29235C 50.0%, rgba(41, 35, 92, 0.00) 80.0%);
    z-index: 2;
}

@media (max-width: 991.98px) {
    .eventos-destaque-lean-summit__overlay {
        background: linear-gradient(180deg, rgba(41, 35, 92, 0.85) 100%, rgba(41, 35, 92, 1) 55%);
    }
}

.eventos-destaque-lean-summit > .container {
  position: relative;
  z-index: 3;
}

.eventos-destaque-lean-summit__content {
  max-width: 600px;
  margin-left: auto;
}

@media (max-width: 991.98px) {
  .eventos-destaque-lean-summit__content {
    margin-left: 0;
  }
}

.eventos-destaque-lean-summit__title {
  color: #ff8000;
  font-size: clamp(2rem, 4vw, 2.375rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.eventos-destaque-lean-summit__text {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.eventos-destaque-lean-summit__divider {
  width: 24px;
  height: 3px;
  background-color: #ff8000;
  border-radius: 2px;
  margin-bottom: 1.75rem;
}

.eventos-destaque-lean-summit__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 575.98px) {
  .eventos-destaque-lean-summit__features {
    grid-template-columns: 1fr;
    width: min(360px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

.eventos-destaque-lean-summit__feature-card {
  background-color: rgba(255, 255, 255, 0.07);
  border-top: 2px solid #ff8000;
  border-radius: 10px;
  padding: 1.25rem 1rem;
  text-align: center;
}

.eventos-destaque-lean-summit__feature-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.4;
  margin: 0;
}

.eventos-destaque-lean-summit__note {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 2rem;
}

.eventos-destaque-lean-summit__btn {
  background-color: #ff8000;
  color: #ffffff;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease;
}

.eventos-destaque-lean-summit__btn:hover,
.eventos-destaque-lean-summit__btn:focus-visible {
  background-color: #e67300;
  color: #ffffff;
}

/* ==========================================================================
   Seção: Lean Global Connection (eventos-lean-global)
   Ref: Figma node 2452:7 (Frame 329) — seção de 1440 × 1174.
   Foto industrial de fundo com esmaecimento (gradiente) para #f4f4f4 sob o
   texto + véu cinza 8% (#808080) sobre quase toda a foto. Os 5 selos de
   estatística e o selo de data ficam ancorados à direita de um "frame"
   travado em 1440px — o recuo de 204px do texto reproduz a mesma margem
   esquerda do container de 1082px usado nas demais seções da página.
   Abaixo de 1350px o layout vira coluna única (a foto sai de cena).
   ========================================================================== */
.eventos-lean-global {
  --lgc-navy: #29235c;
  --lgc-accent: #ff8000;
  --lgc-accent-dark: #e67300;
  --lgc-text-body: #666666;
  --lgc-border: #d9d9d9;
  --lgc-bg: #f4f4f4;

  background-color: var(--lgc-bg);
}

.eventos-lean-global__frame {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  padding: 73px 0 59px;
}

/* Foto de fundo + véu + esmaecimento — três camadas, de baixo para cima:
   foto → véu cinza → esmaecimento claro. O `z-index: 0` cria um contexto de
   empilhamento próprio; sem ele os pseudo-elementos ficariam ABAIXO da <img>
   (que vem depois deles na ordem do documento) e o esmaecimento sumiria.

   O esmaecimento tem de ser a camada de CIMA: assim as bordas do frame
   renderizam a cor da seção EXATA (o véu, se ficasse por cima, escureceria a
   faixa plana da esquerda para ≈#ebebeb e criaria um degrau visível contra o
   #f4f4f4 da seção nas telas mais largas que os 1440px do frame). */
.eventos-lean-global__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.eventos-lean-global__bg-photo {
  position: absolute;
  left: 0;
  top: -16.01%;
  width: 100%;
  height: 122.49%;
  object-fit: cover;
}

/* Esmaecimento: dissolve foto + véu na cor da seção nas DUAS bordas do frame.
   À esquerda, opaco até 32% (as porcentagens do Figma eram relativas a uma
   caixa de 88,47% da largura — aqui a caixa é o frame inteiro, daí a
   reescala). À direita, uma rampa longa (~14% ≈ 190px a 1440) substitui o
   corte seco que o overflow do frame fazia na foto. */
.eventos-lean-global__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgb(244, 244, 244) 0%,
    rgb(244, 244, 244) 32.1%,
    rgba(244, 244, 244, 0.75) 43.65%,
    rgba(244, 244, 244, 0.5) 54.23%,
    rgba(244, 244, 244, 0) 70.72%,
    rgba(244, 244, 244, 0) 86%,
    rgba(244, 244, 244, 0.15) 91%,
    rgba(244, 244, 244, 0.5) 96%,
    rgb(244, 244, 244) 100%
  );
}

/* Véu cinza uniforme (tinta #808080 a 8%) sobre toda a foto. Uniforme de
   propósito: o recorte do Figma parava a 13,54% da direita e deixava um
   segundo degrau vertical — quem apaga a faixa da direita agora é a rampa
   do esmaecimento acima. */
.eventos-lean-global__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(128, 128, 128, 0.08);
}

/* Colunas de texto (heading+lead+traço / cards+nota+CTAs) */
.eventos-lean-global__content-top,
.eventos-lean-global__content-bottom {
  position: relative;
  z-index: 1;
  margin-left: 204px;
}

/* 45px/linha = as duas linhas ocupam os 90px do Figma (`normal` daria 88) */
.eventos-lean-global__heading {
  font-size: 38px;
  font-weight: 800;
  line-height: 45px;
  color: var(--lgc-navy);
  margin: 0 0 22px;
}

/* 625px de largura + 28px de entrelinha reproduzem as 5 linhas do Figma */
.eventos-lean-global__lead {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--lgc-text-body);
  max-width: 625px;
  margin: 0 0 22px;
}

.eventos-lean-global__lead strong {
  font-weight: 700;
}

.eventos-lean-global__divider {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--lgc-accent);
  margin: 0 0 55px;
}

/* Cards numerados horizontais (01 roxo / 02 azul / 03 verde): header de
   170-173 × 150 centralizado num card de 123px de altura (o overflow:hidden
   recorta 13,5px acima/abaixo), com gradiente, textura fotográfica, número
   64px e título sobrepostos. */
.eventos-lean-global__cards {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 600px;
  margin: 0 0 48px;
}

/* No Figma o vão entre o 2º e o 3º card é 20px (os demais, 22px) */
.eventos-lean-global__cards > :last-child {
  margin-top: -2px;
}

.eventos-lean-global__card {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 123px;
  background-color: #ffffff;
  border: 1px solid var(--lgc-border);
  border-radius: 15px;
  box-shadow: 0 5px 5.5px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* Hover: elevação + sombra (padrão home-dna-stat/home-ecosystem-card). O reveal
   (reveal-animations.css, carregado depois deste arquivo) é dono de transform e
   da transição do card: por isso o hover usa o longhand `translate` — que o
   transform:none de .reveal.is-visible não afeta — e a regra abaixo re-declara
   a transição do reveal acrescentando translate/box-shadow em 0.2s, sem o
   delay escalonado da entrada dos cards. */
.eventos-page .eventos-lean-global__card {
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.65s ease, translate 0.2s ease, box-shadow 0.2s ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
}

.eventos-lean-global__card:hover,
.eventos-lean-global__card:focus-within {
  translate: 0 -4px;
  box-shadow: 0 12px 14px 3px rgba(0, 0, 0, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .eventos-page .eventos-lean-global__card { transition: none; }

  .eventos-lean-global__card:hover,
  .eventos-lean-global__card:focus-within {
    translate: none;
  }
}

.eventos-lean-global__card-header {
  position: relative;
  flex-shrink: 0;
  width: 170px;
  height: 150px;
  overflow: hidden;
}

.eventos-lean-global__card--azul .eventos-lean-global__card-header,
.eventos-lean-global__card--verde .eventos-lean-global__card-header {
  width: 173px;
}

.eventos-lean-global__card--roxo  .eventos-lean-global__card-header { background-image: linear-gradient(127.69deg, #8b3fa8 0%, #8836ae 100%); }
.eventos-lean-global__card--azul  .eventos-lean-global__card-header { background-image: linear-gradient(128.18deg, #1b2358 0%, #131f71 100%); }
.eventos-lean-global__card--verde .eventos-lean-global__card-header { background-image: linear-gradient(128.18deg, #0a5f59 0%, #0b6f63 100%); }

/* Brilho radial atrás do número + risco diagonal sutil (do Figma) */
.eventos-lean-global__card--roxo .eventos-lean-global__card-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(109.8deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 0.76%, rgba(255, 255, 255, 0) 0.76%, rgba(255, 255, 255, 0) 9.9%),
    radial-gradient(161px 209px at 128px 23px, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
}

.eventos-lean-global__card--azul .eventos-lean-global__card-header::before,
.eventos-lean-global__card--verde .eventos-lean-global__card-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110.1deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 0.76%, rgba(255, 255, 255, 0) 0.76%, rgba(255, 255, 255, 0) 9.9%),
    radial-gradient(164px 209px at 130px 23px, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
}

/* Texturas fotográficas — sutis, recortadas pelo overflow:hidden do header */
.eventos-lean-global__card-texture {
  position: absolute;
  pointer-events: none;
}

.eventos-lean-global__card--roxo .eventos-lean-global__card-texture {
  left: -9px;
  top: -16px;
  width: 200px;
  height: 166px;
  opacity: 0.23;
}

/* Espelhada no Figma (a mulher fica no terço esquerdo, olhando para dentro).
   O nó tem máscara + espelhamento aninhados que os percentuais do MCP não
   reproduzem — a caixa abaixo foi medida no render do Figma por pontos do
   rosto (olhos, topo da cabeça, queixo) e preserva a proporção 3:2 da foto. */
.eventos-lean-global__card--azul .eventos-lean-global__card-texture {
  left: -31px;
  top: 5px;
  width: 283px;
  height: 188px;
  opacity: 0.11;
  transform: scaleX(-1);
}

.eventos-lean-global__card--verde .eventos-lean-global__card-texture {
  left: -15px;
  top: -25px;
  width: 203px;
  height: 199px;
  opacity: 0.23;
  mix-blend-mode: luminosity; /* recebe o matiz do gradiente verde */
}

.eventos-lean-global__card-number {
  position: absolute;
  top: 17.5px;
  right: 11px;
  font-family: 'Poppins', sans-serif;
  font-size: 64px;
  font-weight: 800;
  line-height: 64px;
  color: rgba(255, 255, 255, 0.22);
}

.eventos-lean-global__card--azul .eventos-lean-global__card-number  { right: 7px; }
.eventos-lean-global__card--verde .eventos-lean-global__card-number { right: 4px; top: 15.5px; }

.eventos-lean-global__card-title {
  position: absolute;
  left: 20px;
  bottom: 22.5px;
  font-size: 20px;
  font-weight: 800;
  line-height: normal;
  color: #ffffff;
  margin: 0;
}

.eventos-lean-global__card--azul .eventos-lean-global__card-title  { left: 16px; }
.eventos-lean-global__card--verde .eventos-lean-global__card-title { bottom: 20.5px; }

/* As larguras vêm do Figma e são o que produz as quebras de linha corretas
   (cada card tem uma caixa de texto de largura própria). */
.eventos-lean-global__card-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--lgc-text-body);
  margin: 0;
  max-width: 100%;
}

.eventos-lean-global__card--roxo  .eventos-lean-global__card-text { width: 337px; }
.eventos-lean-global__card--azul  .eventos-lean-global__card-text { width: 392px; }
.eventos-lean-global__card--verde .eventos-lean-global__card-text { width: 398px; }

.eventos-lean-global__note {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--lgc-text-body);
  max-width: 600px;
  margin: 0 0 44px;
}

.eventos-lean-global__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
}

.eventos-lean-global__btn {
  display: inline-block;
  background-color: var(--lgc-accent);
  color: #ffffff;
  font-size: 14.7px;
  font-weight: 600;
  line-height: 23.55px;
  text-decoration: none;
  padding: 14.4px 32px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.eventos-lean-global__btn:hover,
.eventos-lean-global__btn:focus-visible {
  background-color: var(--lgc-accent-dark);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Selos de estatística
   Desktop (≥1350px): ancorados ao "frame" (top/right em px, espelhando as
   coordenadas exatas do Figma a 1440px de tela).
   -------------------------------------------------------------------------- */
.eventos-lean-global__stats {
  position: absolute;
  top: 94px;
  right: 55px;
  width: 404px;
  height: 225px;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Vãos do Figma (medidos da borda externa): ícone em 17px, divisor em 73,5px,
   texto em ~91px — o padding é 1px menor porque a borda entra na conta.
   Fundo 85% branco uniforme: quem varia é a foto por trás (lavada pelo
   gradiente da seção à esquerda, vívida à direita). */
.eventos-lean-global__pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 197px;
  height: 75px;
  padding: 0 16px;
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--lgc-border);
  border-radius: 21px;
  box-shadow: 0 5px 5.5px 3px rgba(0, 0, 0, 0.2);
}

/* O selo de tradução usa ícone de 44px e caixa de texto mais larga (106px
   no Figma, contra ~90px dos demais) — daí o recuo próprio. */
.eventos-lean-global__pill--traducao {
  padding: 0 4px 0 13px;
  gap: 13px;
}

/* As três fileiras encostam (75px de passo) e se empilham de cima para baixo:
   a de cima cobre a de baixo, então a sombra de cada uma cai sobre a
   seguinte e o conjunto ganha o leve ar de sobreposição do design. */
.eventos-lean-global__pill--paises        { left: 0;     top: 0;     z-index: 3; }
.eventos-lean-global__pill--palestrantes  { left: 207px; top: 0;     z-index: 3; }
.eventos-lean-global__pill--participantes { left: 99px;  top: 75px;  z-index: 2; }
.eventos-lean-global__pill--conteudo      { left: 0;     top: 150px; z-index: 1; }
.eventos-lean-global__pill--traducao      { left: 207px; top: 150px; z-index: 1; }

/* Hover: o selo "solidifica" sobre a foto (branco cheio + borda laranja),
   sobe 3px e vem para a frente das fileiras vizinhas — as três fileiras se
   encostam e a sombra de uma cai sobre a outra, então sem o z-index a
   elevação apareceria por baixo do selo de cima.
   Mesma mecânica do hover dos cards: o reveal (reveal-animations.css) é dono
   de transform e da transição, por isso o hover usa o longhand `translate` —
   que o transform:none de .reveal.is-visible não afeta — e a regra abaixo
   re-declara a transição do reveal acrescentando as propriedades do hover em
   0.2s, sem o delay escalonado da entrada. */
.eventos-page .eventos-lean-global__pill {
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.65s ease, translate 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms, 0ms;
}

.eventos-lean-global__pill:hover,
.eventos-lean-global__pill:focus-within {
  z-index: 4;
  translate: 0 -3px;
  background-color: #ffffff;
  border-color: var(--lgc-accent);
  box-shadow: 0 10px 12px 3px rgba(0, 0, 0, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .eventos-page .eventos-lean-global__pill { transition: none; }

  .eventos-lean-global__pill:hover,
  .eventos-lean-global__pill:focus-within {
    translate: none;
  }
}

.eventos-lean-global__pill-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

/* O círculo do ícone recebe uma lavagem do laranja da marca */
.eventos-lean-global__pill:hover .eventos-lean-global__pill-icon,
.eventos-lean-global__pill:focus-within .eventos-lean-global__pill-icon {
  background-color: rgba(255, 128, 0, 0.14);
}

/* Cada ícone tem seu tamanho próprio no Figma dentro do círculo de 42px.
   user-select/drag desligados: arrastar o dedo/mouse pela seção
   selecionava a imagem e pintava um quadrado azul sobre o ícone. */
.eventos-lean-global__pill-icon img {
  width: 37px;
  height: 37px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.eventos-lean-global__pill--palestrantes  .eventos-lean-global__pill-icon img { width: 32px; height: 32px; }
.eventos-lean-global__pill--participantes .eventos-lean-global__pill-icon img { width: 38px; height: 38px; }
.eventos-lean-global__pill--conteudo      .eventos-lean-global__pill-icon img { width: 35px; height: 35px; }
.eventos-lean-global__pill--traducao      .eventos-lean-global__pill-icon img { width: 42px; height: 42px; }

/* 42px centralizados, iguais nos 5 selos (Line 44/45 do Figma) */
.eventos-lean-global__pill-divider {
  flex-shrink: 0;
  width: 1px;
  height: 42px;
  background-color: var(--lgc-accent);
  border-radius: 1px;
}

.eventos-lean-global__pill-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--lgc-navy);
  line-height: normal;
  min-width: 0;
}

.eventos-lean-global__pill-value {
  font-size: 24px;
  font-weight: 800;
  white-space: nowrap;
}

.eventos-lean-global__pill-unit {
  font-size: 15px;
  font-weight: 400;
}

.eventos-lean-global__pill-tag {
  display: block;
  font-size: 11px;
}

.eventos-lean-global__pill-text--plain {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Selo "Lean Global Connection · NOV 12-13 · 2026"
   No Figma ele fica à direita, na altura dos CTAs. Ancorado pelo `bottom`
   (e não pelo `top: 948px` do desenho) para acompanhar a altura real da
   seção — que muda conforme o número de CTAs ativos.
   -------------------------------------------------------------------------- */
.eventos-lean-global__badge {
  position: absolute;
  bottom: 59px;
  right: 55px;
  width: 403px;
  height: 101px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lgc-navy);
  border: 1px solid var(--lgc-border);
  border-radius: 21px;
  box-shadow: 0 5px 5.5px 3px rgba(0, 0, 0, 0.2);
}

/* O PNG é o nó "LOGO LGC 1" do Figma (400 × 80 @2x) com as margens internas
   já embutidas no canvas — por isso vai em tamanho natural, sem padding. */
.eventos-lean-global__badge-logo {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Responsivo
   Abaixo de 1350px a foto sai de cena (as coordenadas absolutas dos selos
   deixariam de caber ao lado do texto) e as quatro faixas viram uma coluna
   única de 600px — a largura dos cards no Figma — centralizada na página,
   na ordem: título, lead, selos, traço, cards, nota, CTAs, selo de data.
   -------------------------------------------------------------------------- */
@media (max-width: 1349.98px) {
  .eventos-lean-global__bg {
    display: none;
  }

  .eventos-lean-global__frame {
    padding-left: 24px;
    padding-right: 24px;
  }

  .eventos-lean-global__content-top,
  .eventos-lean-global__stats,
  .eventos-lean-global__content-bottom,
  .eventos-lean-global__badge {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Sem a foto atrás, cada dado mantém o encapsulamento do desktop —
     pílula branca 85% com borda, radius 21 e sombra — em grade 2 / 2 / 1
     com colunas de largura natural centralizadas como grupo. */
  .eventos-lean-global__stats {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 14px;
    width: auto;
    height: auto;
    margin-top: 34px;
    margin-bottom: 34px;
    padding: 10px 0;
  }

  .eventos-lean-global__pill {
    position: static;
    width: auto;
    height: auto;
    min-height: 75px;
  }

  /* Última linha (Tradução) atravessa a grade, centralizada — espelha a
     composição 2 / 1 / 2 do desktop. Espaçamento interno padrão (o recuo
     especial do desktop existia para a caixa de texto de 106px). */
  .eventos-lean-global__pill--traducao {
    grid-column: 1 / -1;
    justify-self: center;
    padding: 0 16px;
    gap: 15px;
  }

  .eventos-lean-global__actions {
    align-items: center;
  }

  /* O selo de data fecha a seção como bloco próprio, centralizado */
  .eventos-lean-global__badge {
    position: static;
    width: 100%;
    max-width: 403px;
    height: auto;
    padding: 16px 20px;
    margin-top: 44px;
  }
}

@media (max-width: 991.98px) {
  .eventos-lean-global__heading {
    font-size: 32px;
  }
}

@media (max-width: 575.98px) {
  .eventos-lean-global__frame {
    padding-top: 48px;
    padding-bottom: 48px; /* o recuo lateral de 24px vem do breakpoint acima */
  }

  .eventos-lean-global__heading {
    font-size: 28px;
  }

  .eventos-lean-global__lead,
  .eventos-lean-global__note {
    font-size: 18px;
    line-height: 26px;
  }

  /* Estreito demais para duas colunas: as pílulas empilham numa trilha
     única dimensionada pelo conteúdo mais largo (fit-content) e
     centralizada — o conjunto fica no eixo da página E as linhas
     compartilham a mesma borda esquerda (centralizar o conteúdo de cada
     pílula individualmente deixava os ícones em zigue-zague). */
  .eventos-lean-global__stats {
    grid-template-columns: fit-content(280px);
  }

  .eventos-lean-global__pill--traducao {
    grid-column: auto;
    justify-self: stretch;
  }

  .eventos-lean-global__card {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  /* Seletores de 2 classes para vencer as regras por cor sem !important */
  .eventos-lean-global__card .eventos-lean-global__card-header {
    width: 100%;
    height: 110px;
  }

  .eventos-lean-global__card .eventos-lean-global__card-texture {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Empilhado, o texto usa a largura do card em vez da caixa do Figma */
  .eventos-lean-global__card .eventos-lean-global__card-text {
    width: auto;
    padding: 16px;
  }

  .eventos-lean-global__btn {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   Seção: Histórico (eventos-historico)
   ========================================================================== */
.eventos-historico {
  padding: 80px 0;
  background-color: #ffffff;
}

@media (max-width: 1399.98px) and (min-width: 992px) {
  .eventos-historico > .container {
    max-width: 1320px;
  }
}

@media (max-width: 1324.98px) and (min-width: 992px) {
  .eventos-historico > .container {
    max-width: 1140px;
  }
}

.eventos-historico__header {
  margin-bottom: 3rem;
}

.eventos-historico__title {
  color: #29235c;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.eventos-historico__subtitle {
  color: #666666;
  font-size: 1.25rem;
  line-height: 1.4;
  max-width: 920px;
}

.eventos-historico__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(320px, auto) minmax(320px, auto);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

@media (max-width: 1314.98px) {
  .eventos-historico__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 1rem;
  }
}

@media (max-width: 1314.98px) and (min-width: 992px) {
  .eventos-historico__header {
    width: 800px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .eventos-historico__grid {
    width: 800px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.eventos-historico__card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background-color: transparent;
  padding: 0;
}

.eventos-historico__card--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.eventos-historico__card::before {
  display: none;
}

.eventos-historico__card > * {
  position: relative;
  z-index: 2;
}

/* Card posições */
.eventos-historico__card--quiz {
  grid-column: 1 / span 4;
  grid-row: 2 / span 1;
  border-bottom: 6px solid #ff8000;
}

.eventos-historico__card--lideranca {
  grid-column: 9 / span 4;
  grid-row: 1 / span 1;
  border-left: 6px solid #ff8000;
}

.eventos-historico__card--gestao {
  grid-column: 9 / span 4;
  grid-row: 2 / span 1;
  border-right: 6px solid #ff8000;
}

.eventos-historico__card--cases {
  grid-column: 5 / span 4;
  grid-row: 2 / span 1;
  border-top: 6px solid #ff8000;
  background-color: #261b3f;
}

.eventos-historico__card--img-only {
  grid-column: 1 / span 8;
  grid-row: 1 / span 1;
  border-top: 6px solid #ff8000;
  padding: 0;
}

@media (max-width: 1314.98px) {
  .eventos-historico__card--img-only {
    grid-column: 1 / -1;
    grid-row: auto;
    height: clamp(220px, 26vw, 340px);
    border: none;
    border-top: 6px solid #ff8000;
  }

  .eventos-historico__card--quiz,
  .eventos-historico__card--lideranca,
  .eventos-historico__card--gestao,
  .eventos-historico__card--cases {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
    border: none;
    border-left: 4px solid #ff8000;
  }
}

@media (max-width: 575.98px) {
  .eventos-historico__grid {
    grid-template-columns: 1fr;
  }

  .eventos-historico__card {
    width: 100%;
  }

  .eventos-historico__card--quiz,
  .eventos-historico__card--lideranca,
  .eventos-historico__card--gestao,
  .eventos-historico__card--cases,
  .eventos-historico__card--img-only {
    aspect-ratio: auto;
    border: none;
    border-left: 4px solid #ff8000;
  }

  .eventos-historico__card--img-only {
    height: auto;
  }

  .eventos-historico__card .eventos-historico__card-img,
  .eventos-historico__card .eventos-historico__card-img-cases {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    object-fit: initial;
  }
}

.eventos-historico__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.eventos-historico__card-img-cases {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.eventos-historico__card-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.eventos-historico__card-title-italic {
  font-style: italic;
}

.eventos-historico__card-text {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}

.eventos-historico__actions {
  text-align: center;
}

.eventos-historico__btn {
  background-color: #ff8000;
  color: #ffffff;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease;
}

.eventos-historico__btn:hover,
.eventos-historico__btn:focus-visible {
  background-color: #e67300;
  color: #ffffff;
}

/* ==========================================================================
   Seção: Comunidade (eventos-comunidade)
   ========================================================================== */
.eventos-comunidade {
  background-color: #eceeff;
  padding: 80px 0;
  text-align: center;
}

.eventos-comunidade__title {
  color: #29235c;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.eventos-comunidade__card {
  position: relative;
  border-radius: 14px;
  border-bottom: 4px solid #ff8000;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  padding: 2rem;
  background-color: #29235c;
}

.eventos-comunidade__card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.eventos-comunidade__card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(41, 35, 92, 1) 0%, rgba(41, 35, 92, 0.8) 40%, rgba(41, 35, 92, 0) 100%);
  z-index: 2;
}

.eventos-comunidade__card-content {
  position: relative;
  z-index: 3;
}

.eventos-comunidade__card-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.eventos-comunidade__card-text {
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.eventos-comunidade__card-link {
  color: #ff8000;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

.eventos-comunidade__card-link:hover,
.eventos-comunidade__card-link:focus-visible {
  color: #e67300;
  text-decoration: underline;
}

/* Newsletter component extracted to components/newsletter-signup.css */

/* Celular/tablet: filtros (cápsulas, chips, busca, link "Limpar tudo") com alvo de toque ≥ 36px e botões dos cards ≥ 40px.
   Fica no fim do arquivo porque as regras base (.filtro-pill { min-height: 0 }, .cal-aplicado, .cal-aplicados__clear)
   vêm depois do bloco de toque das tags. */
@media (max-width: 991.98px) {
  .eventos-page .filtro-pill,
  .eventos-page .cal-aplicado {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.875rem;
  }
  .eventos-page .calendario__search-btn {
    width: 36px;
    height: 36px;
  }
  .eventos-page .calendario__search-input {
    padding: 11px 0;
    font-size: 0.875rem;
  }
  .eventos-page .cal-aplicados__clear {
    display: inline-block;
    padding: 8px 0;
    font-size: 0.875rem;
  }
  .eventos-page .cal-btn {
    height: auto;
    min-height: 40px;
    padding: 0 18px;
    font-size: 0.875rem;
  }
}

/* =====================================================================================
   Ajustes do docx SEO "landing eventos" (22/04/2026).
   Fundos: hero escuro → frase de destaque branca → calendário cinza → Lean Summit azul-escuro (split)
   → Lean Global Connection cinza com foto → histórico branco → comunidade lilás → newsletter branca
   com card flutuante → FAQ cinza.
   ===================================================================================== */

/* Frase de destaque logo após o hero. */
.eventos-destaque {
  background: #ffffff;
  padding: clamp(48px, 6vw, 88px) 0;
}

.eventos-destaque__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1082px;
  margin: 0 auto;
}

.eventos-destaque__frase {
  position: relative;
  margin: 0;
  padding-left: 28px;
  color: #29235c;
  font-size: clamp(1.375rem, 2.3vw, 1.875rem);
  font-weight: 800;
  line-height: 1.3;
}

.eventos-destaque__frase::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 5px;
  border-radius: 3px;
  background: #ff8000;
}

.eventos-destaque__highlight {
  color: #ff8000;
}

.eventos-destaque__texto {
  margin: 0;
  color: #555555;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.55;
}

@media (max-width: 991.98px) {
  .eventos-destaque__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .eventos-destaque__texto {
    padding-left: 28px;
  }
}

/* Lean Summit: três pilares com ícone, título e texto (antes só um rótulo por card). */
.eventos-destaque-lean-summit__pilares {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 12px;
}

.eventos-destaque-lean-summit__pilar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  border-left: 3px solid #ff8000;
  background-color: rgba(255, 255, 255, 0.07);
  transition: background-color 0.2s ease, translate 0.2s ease;
}

.eventos-destaque-lean-summit__pilar:hover {
  background-color: rgba(255, 255, 255, 0.12);
  translate: 4px 0;
}

.eventos-destaque-lean-summit__pilar-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 128, 0, 0.16);
  color: #ff8000;
}

.eventos-destaque-lean-summit__pilar-title {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
}

.eventos-destaque-lean-summit__pilar-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.eventos-destaque-lean-summit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.eventos-destaque-lean-summit__btn-outline {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.eventos-destaque-lean-summit__btn-outline:hover,
.eventos-destaque-lean-summit__btn-outline:focus-visible {
  background-color: #ffffff;
  color: #29235c;
}

@media (max-width: 575.98px) {
  .eventos-destaque-lean-summit__actions > a {
    width: 100%;
    text-align: center;
  }
}

/* Histórico: botão abaixo da galeria; setas só no carrossel (< 992px). */
.eventos-historico__carrossel {
  position: relative;
}

.eventos-historico__nav {
  display: none;
}

.eventos-historico__grid:focus-visible {
  outline: 2px solid #ff8000;
  outline-offset: 4px;
}

@media (max-width: 991.98px) {
  .eventos-historico__grid {
    display: flex;
    gap: 16px;
    width: auto;
    margin-bottom: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .eventos-historico__grid::-webkit-scrollbar {
    display: none;
  }

  .eventos-historico__grid > .eventos-historico__card {
    flex: 0 0 min(86%, 560px);
    aspect-ratio: 2.3 / 1;
    height: auto;
    scroll-snap-align: start;
    border: none;
    border-bottom: 4px solid #ff8000;
    border-radius: 12px;
    background-color: #261b3f;
  }

  .eventos-historico__grid > .eventos-historico__card .eventos-historico__card-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Arte mais quadrada (Lean Summit 2023): inteira, sem corte, sobre o fundo escuro do card. */
  .eventos-historico__grid > .eventos-historico__card--cases .eventos-historico__card-img {
    object-fit: contain;
  }

  .eventos-historico__nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 2rem;
  }

  .eventos-historico__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #d9dbe8;
    border-radius: 50%;
    background: #ffffff;
    color: #29235c;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .eventos-historico__nav-btn:hover,
  .eventos-historico__nav-btn:focus-visible {
    background: #29235c;
    color: #ffffff;
  }

  .eventos-historico__nav-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
  }
}

/* Celular: revisão do layout empilhado. */
@media (max-width: 767.98px) {
  /* O botão "Explorar o histórico de eventos" fica só no tablet/desktop. */
  .eventos-historico__actions {
    display: none;
  }

  .eventos-historico__nav {
    margin-bottom: 0;
  }

  /* Calendário empilhado (coluna com align-items: flex-start): a lista encolhia na largura do conteúdo
     e os cards não chegavam à margem direita. */
  .eventos-page .calendario__main {
    align-self: stretch;
    width: 100%;
  }

  /* Comunidade: título/texto sobre a foto precisam de véu mais forte (a arte do Summit tem letras grandes). */
  .eventos-comunidade__card-overlay {
    background: linear-gradient(0deg, rgba(41, 35, 92, 0.98) 0%, rgba(41, 35, 92, 0.9) 55%, rgba(41, 35, 92, 0.55) 100%);
  }

  .eventos-comunidade__card {
    min-height: 0;
    padding: 1.5rem;
  }

  .eventos-comunidade__card-content {
    padding-top: 96px;
  }
}

/* Celular: os 5 selos do Lean Global Connection em grade 2 / 2 / 1 compacta (empilhados ocupavam quase uma tela). */
@media (max-width: 575.98px) {
  .eventos-lean-global__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .eventos-lean-global__stats .eventos-lean-global__pill {
    gap: 8px;
    min-height: 64px;
    padding: 0 10px;
    border-radius: 16px;
  }

  .eventos-lean-global__stats .eventos-lean-global__pill-icon {
    width: 32px;
    height: 32px;
  }

  .eventos-lean-global__stats .eventos-lean-global__pill-icon img {
    width: 26px;
    height: 26px;
  }

  .eventos-lean-global__stats .eventos-lean-global__pill-divider {
    height: 32px;
  }

  .eventos-lean-global__stats .eventos-lean-global__pill-value {
    font-size: 19px;
  }

  .eventos-lean-global__stats .eventos-lean-global__pill-unit,
  .eventos-lean-global__stats .eventos-lean-global__pill-text--plain {
    font-size: 13px;
  }

  .eventos-lean-global__stats .eventos-lean-global__pill--traducao {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 60%;
  }
}

/* Newsletter: card flutuante ("convite") sobre fundo branco; a arte vai só para dentro do card. */
.home-newsletter.eventos-newsletter {
  background: #ffffff;
  padding: clamp(56px, 6vw, 88px) 0;
}

.home-newsletter.eventos-newsletter::before {
  display: none;
}

.eventos-newsletter__card {
  position: relative;
  max-width: 1082px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 56px);
  border-radius: 24px;
  border-top: 4px solid #ff8000;
  background-color: var(--newsletter-section-bg);
  background-image: var(--newsletter-section-image);
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 60px rgba(41, 35, 92, 0.18);
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .eventos-destaque-lean-summit__pilar,
  .eventos-destaque-lean-summit__pilar:hover {
    transition: none;
    translate: none;
  }

  .eventos-historico__grid {
    scroll-behavior: auto;
  }
}