/* ============================================================ */
/* DESIGN TOKENS — Página Treinamentos Lean (LIB)               */
/* Unificação dos tokens das seções 1, 2 e 3                    */
/* ============================================================ */
:root {
  /* Cores */
  --color-navy-deep:      #29235c;
  --color-indigo:         #394195;
  --color-photo-backing:  #1a1530;
  --color-accent:         #ff8000;
  --color-accent-dark:    #e67300;
  --color-white:          #ffffff;
  --color-text-muted:     #666666;
  --color-border-soft:    #dddddd;
  --color-section-bg:     #f3f3f3;
  --color-card-bg:        #f4f5fa;

  /* Tags dos cards do calendário */
  --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;

  /* Tipografia */
  --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;

  /* Hero */
  --hero-treinamentos-height: 563px;
  --hero-treinamentos-gradient:
    linear-gradient(88.9deg, rgb(41, 35, 92) 0.88%, rgb(57, 65, 149) 99.57%);
}

/* ============================================================ */
/* GLOBAL (escopado ao wrapper da página p/ não vazar no layout)*/
/* ============================================================ */
.treinamentos-lean-page {
  font-family: var(--font-primary);
}

/* Failsafe da 1ª dobra (A): os elementos que recebem reveal começam ocultos para
   evitar flash entre o parse do HTML e a marcação do contrato pelo
   agendaTreinamento.anim.js, que remove esta classe no próximo frame.
   Sem JS, o <noscript> da view reexibe tudo. */
.treinamentos-lean-page--preload :is(
  .hero-treinamentos__title,
  .hero-treinamentos__subtitle,
  .hero-treinamentos__actions,
  .stat-glass,
  .calendario__title,
  .calendario__subtitle
) {
  opacity: 0 !important;
}


/* ============================================================ */
/* SECTION: HERO TREINAMENTOS                                  */
/* ============================================================ */
.hero-treinamentos {
  position: relative;
  min-height: var(--hero-treinamentos-height);
  background: var(--hero-treinamentos-gradient);
  overflow: hidden;
}

/* --- Foto do gemba (43.4% direito, enquadramento original do Figma) ---
   O blend parte de rgb(50,52,124) — cor exata do hero gradient na
   posição x=56.6% — eliminando a linha de corte sem alterar o crop. */
.hero-treinamentos__bg-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 43.4%;                          /* 625px / 1440px — Figma */
  background-color: var(--color-photo-backing);
  z-index: 0;
}

.hero-treinamentos__bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  opacity: 0.55;
}

/* Blend: começa com a cor exata do hero gradient no seam (rgb 50,52,124)
   e transiciona até transparente — sem borda visível
   (position absolute — composição visual, caso legítimo) */
.hero-treinamentos__bg-photo-blend {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(50, 52, 124)          0%,
    rgba(57, 65, 148, 0.4)   40%,
    rgba(57, 65, 148, 0)     70%
  );
}

/* Parallax do BG do hero (B): heroParallax.js define --hero-parallax-x/y conforme
   o mouse. Só em ponteiro fino/hover (mesma guarda do JS); o scale(1.04) cobre o
   deslocamento máx. (~10px) para que as bordas não apareçam. */
@media (hover: hover) and (pointer: fine) {
  .hero-treinamentos__bg-photo {
    transform: translate3d(var(--hero-parallax-x, 0px), var(--hero-parallax-y, 0px), 0) scale(1.04);
    transition: transform 0.3s ease-out;
    will-change: transform;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-treinamentos__bg-photo {
      transform: none;
      transition: none;
    }
  }
}

/* Ultrawide: a faixa da foto para de crescer em 2560px. Em vez de continuar
   colada à direita da viewport, ela passa a ocupar os mesmos 43,4% de uma faixa
   de 2560px centrada — preservando o ponto de corte do Figma em relação ao
   conteúdo. À direita da foto sobra o próprio gradiente do hero (não é imagem,
   não perde qualidade ao esticar); a máscara dissolve a emenda dessa borda,
   já que a esquerda é resolvida pelo blend. */
@media (min-width: 2560px) {
  .hero-treinamentos__bg-photo {
    right: calc((100% - 2560px) / 2);
    width: calc(2560px * 0.434);
    -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%);
  }
}

/* --- Círculo decorativo (sangra no canto inferior esquerdo) --- */
.hero-treinamentos__circle {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.03);
  left: -86px;
  bottom: -92px;
  z-index: 0;
}

/* --- Container do conteúdo (acima das camadas de fundo) ---
   1198px internos = margens de 121px no frame de 1440px */
.hero-treinamentos__container {
  position: relative;
  z-index: 2;
  max-width: 1246px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 90px;
  padding-bottom: 66px;
}


/* ============================================================ */
/* HERO: COLUNA ESQUERDA                                       */
/* ============================================================ */
.hero-treinamentos__title {
  font-size: 4rem;                       /* 64px */
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  line-height: 0.94;
  max-width: 611px;
  margin-bottom: 0;
}

.hero-treinamentos__title-bold {
  font-weight: var(--font-weight-extrabold);
}

.hero-treinamentos__title-accent {
  color: var(--color-accent);
}

.hero-treinamentos__subtitle {
  font-size: 1.5rem;                     /* 24px */
  font-weight: var(--font-weight-regular);
  color: rgba(255, 255, 255, 0.7);
  line-height: normal;
  max-width: 606px;
  margin-top: 37px;
  margin-bottom: 0;
}

/* --- CTAs --- */
.hero-treinamentos__actions {
  margin-top: 60px;
  gap: 13px;
}

.btn-treinamentos {
  display: inline-flex;
  align-items: center;
  height: 52px;
  border-radius: 4px;
  padding: 0 29px;
  font-size: 0.881rem;                   /* 14.1px */
  line-height: 1.6;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

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

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

.btn-treinamentos--outline {
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  padding: 0 31px;
}

.btn-treinamentos--outline:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--color-white);
}


/* ============================================================ */
/* HERO: ESTATÍSTICAS (chips de vidro sobre a foto)            */
/* ============================================================ */
.hero-treinamentos__stats {
  gap: 25px;
}

.stat-glass {
  width: 134px;
  height: 98px;
  flex: 1 1 90px;
  min-width: 80px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.stat-glass__value {
  font-size: 2.5rem;                     /* 40px */
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 0.6;                      /* 24px no Figma */
  margin: 0;
  font-variant-numeric: tabular-nums;    /* dígitos de largura fixa durante a contagem */
}

.stat-glass__label {
  font-size: 0.8125rem;                  /* 13px */
  font-weight: var(--font-weight-regular);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.544px;
  text-transform: uppercase;
  line-height: 1.34;
  margin: 0;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 992px) {
  .hero-treinamentos__bg-photo {
    width: 100%;
  }

  .hero-treinamentos__bg-photo-blend {
    background: linear-gradient(
      90deg,
      rgb(41, 35, 92)          0%,
      rgba(57, 65, 148, 0.6)   50%,
      rgba(57, 65, 148, 0)     80%
    );
  }

  .hero-treinamentos__container {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hero-treinamentos__title {
    font-size: 2.75rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .hero-treinamentos__subtitle {
    margin-top: 24px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .hero-treinamentos__actions {
    margin-top: 36px;
    justify-content: center;
  }

  .hero-treinamentos__stats {
    margin-top: 48px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero-treinamentos__title {
    font-size: 2.25rem;
  }
}

@media (max-width: 575.98px) {
  .hero-treinamentos__title {
    font-size: 2rem;
  }

  .hero-treinamentos__subtitle {
    font-size: 1.125rem;
  }

  .stat-glass {
    height: 88px;
  }

  .hero-treinamentos__stats {
    gap: 12px;
  }
}


/* ============================================================ */
/* SECTION: CALENDÁRIO                                         */
/* ============================================================ */
.calendario {
  background-color: var(--color-section-bg);
  font-family: var(--font-primary);
  padding-top: 52px;
  padding-bottom: 72px;
}

/* Conteúdo de 1122px no frame de 1440px (margens de 202px/116px) */
.calendario__container {
  max-width: 1170px;
  padding-left: 24px;
  padding-right: 24px;
}

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

.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;
}

.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) --- */
.calendario__count {
  font-size: 0.819rem;                   /* 13.1px */
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 16px;
}

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

/* --- Busca (box único: lupa + input + botão laranja dentro) ---
   Formato do blog-lean, mas mantendo a altura compacta de treinamentos.
   A altura vem do padding vertical do input (9px), igual ao modelo anterior. */
.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;                 /* esquerda: espaço da lupa · direita: espaço do botão */
  transition: border-color 0.2s;
}

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

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

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

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

.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;                    /* botão mais quadrado (cantos suaves) */
  cursor: pointer;
  transition: background-color 0.2s;
}

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


/* ============================================================ */
/* LAYOUT: LISTA + SIDEBAR                                     */
/* ============================================================ */
.calendario__layout {
  gap: 24px;
  align-items: flex-start;
  margin-top: 32px;
}

/* --- Títulos dos grupos (com régua laranja) --- */
.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;
}

/* Espaço entre grupos: só quando o título vem logo após um card */
.cal-card + .calendario__group-title {
  margin-top: 30px;
}


/* ============================================================ */
/* CARROSSEL VERTICAL INFINITO (auto-play) da lista de eventos  */
/* Montado via JS só quando não há filtros. A faixa contém duas */
/* cópias da lista; rola translateY 0→-50% em loop sem emenda.  */
/* ============================================================ */
.cal-carousel {
  --cal-carousel-h: 900px;               /* janela ~4 cards (desktop) */
  height: var(--cal-carousel-h);
  overflow: hidden;
  position: relative;
  /* desvanece topo e base p/ sugerir continuidade do loop */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* faixa movida via JS (rAF) — o cursor controla a direção por zona */
.cal-carousel__track {
  display: block;
  will-change: transform;
}

/* emenda entre as duas cópias = mesmo respiro entre grupos */
.cal-carousel__copy {
  padding-bottom: 30px;
}

/* Botão "Ver mais eventos" — visível só no mobile (controlado por JS via [hidden]) */
.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;                   /* 14px */
  color: var(--color-navy-deep);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.calendario__more:hover {
  border-color: var(--color-navy-deep);
  background-color: #f7f7fb;
}

@media (max-width: 991.98px) {
  .cal-carousel { --cal-carousel-h: 620px; }
}

@media (max-width: 767.98px) {
  .cal-carousel { --cal-carousel-h: 560px; }
}


/* ============================================================ */
/* CARD DE ATIVIDADE                                           */
/* ============================================================ */
.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;
}

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

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

/* Frame fixo que contém o zoom da foto (C): a borda/raio vivem aqui e o
   overflow:hidden segura o scale. O selo de data fica fora do frame, então
   não é cortado. */
.cal-card__photo-frame {
  flex-shrink: 0;
  width: 195px;
  height: 107px;
  overflow: hidden;
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  display: block;
}

.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);
}

/* Zoom sutil ao passar o mouse no card. No carrossel, o giro pausa quando o
   cursor está na faixa central, então o hover ocorre com o card parado. */
.cal-card:hover .cal-card__photo {
  transform: scale(1.06);
}

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

/* Selo de data (position absolute — sobreposição visual, caso legítimo) */
.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;
}

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

.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;
}

.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) --- */
.cal-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-top: 10px;
}
.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;
}
.cal-card__meta-item svg { flex-shrink: 0; }

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

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

.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;
}

.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);
}

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

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

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

.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;
}

.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;
}

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

.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;                   /* evita o texto quebrar em 2 linhas */
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover-lift leve (C): efeito discreto que combina com o tamanho pequeno do
   botão, sem o contrato mg-btn. Vale também no teclado (focus-visible). */
.cal-btn:hover,
.cal-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(41, 35, 92, 0.18);
}

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

/* Telas muito estreitas (<360px): empilha os botões em largura total
   para que o texto não quebre nem estoure o card */
@media (max-width: 359.98px) {
  .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) {
  .cal-card__date-month { font-size: 0.75rem; }
  .cal-tag,
  .cal-tag--local,
  .cal-tag--setor {
    font-size: 0.75rem;
    line-height: 16px;
  }
}

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

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

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

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


/* ============================================================ */
/* SLIDE-UP (mg-btn) — contrato portado da Academia            */
/* O texto sobe no hover/focus revelando uma 2ª cópia. O upgrade*/
/* do markup é feito por initMgButtons (mgButtons.js).          */
/* Escopado à página para não vazar (a Academia usa global).    */
/* ============================================================ */
.treinamentos-lean-page {
  --mg-btn-swap-duration: 0.9s;          /* mesma velocidade da Academia */
}

/* Anti-FOUC: esconder conteudo cru enquanto JS nao upgrade o botao. */
.treinamentos-lean-page .mg-btn-auto:not(.mg-btn) { color: transparent !important; }
.treinamentos-lean-page .mg-btn-auto:not(.mg-btn) > svg,
.treinamentos-lean-page .mg-btn-auto:not(.mg-btn) > img,
.treinamentos-lean-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; }

.treinamentos-lean-page .mg-btn { position: relative; }
.treinamentos-lean-page .mg-btn__inner { display: inline-flex; align-items: center; gap: 10px; }
.treinamentos-lean-page .mg-btn__swap { position: relative; display: inline-grid; overflow: hidden; }
.treinamentos-lean-page .mg-btn__swap-text {
  grid-area: 1 / 1;
  transition: transform var(--mg-btn-swap-duration, .42s) cubic-bezier(.2, .7, .2, 1);
}
.treinamentos-lean-page .mg-btn__swap-text.is-absolute { position: absolute; inset: 0; transform: translate3d(0, 130%, 0); }
.treinamentos-lean-page .mg-btn:hover .mg-btn__swap-text.is-absolute,
.treinamentos-lean-page .mg-btn:focus-visible .mg-btn__swap-text.is-absolute { transform: translate3d(0, 0, 0); }
.treinamentos-lean-page .mg-btn:hover .mg-btn__swap-text.is-relative,
.treinamentos-lean-page .mg-btn:focus-visible .mg-btn__swap-text.is-relative { transform: translate3d(0, -130%, 0); }
.treinamentos-lean-page .mg-btn__icon { grid-area: 1 / 1; display: grid; place-items: center; transition: transform var(--mg-btn-swap-duration, .42s) cubic-bezier(.2, .7, .2, 1); }
.treinamentos-lean-page .mg-btn__icon.is-absolute { position: absolute; inset: 0; transform: translate3d(0, 130%, 0); }
.treinamentos-lean-page .mg-btn:hover .mg-btn__icon.is-absolute,
.treinamentos-lean-page .mg-btn:focus-visible .mg-btn__icon.is-absolute { transform: translate3d(0, 0, 0); }
.treinamentos-lean-page .mg-btn:hover .mg-btn__icon.is-relative,
.treinamentos-lean-page .mg-btn:focus-visible .mg-btn__icon.is-relative { transform: translate3d(0, -130%, 0); }
.treinamentos-lean-page .mg-btn__icon-wrap { width: var(--mg-icon-size, 16px); height: var(--mg-icon-size, 16px); }
.treinamentos-lean-page .mg-btn__icon svg { width: 100%; height: 100%; display: block; }

/* Sem animação de swap em reduced-motion: trava no estado de repouso. */
@media (prefers-reduced-motion: reduce) {
  .treinamentos-lean-page .mg-btn__swap-text,
  .treinamentos-lean-page .mg-btn__icon { transition: none; }
  .treinamentos-lean-page .mg-btn:hover .mg-btn__swap-text.is-absolute,
  .treinamentos-lean-page .mg-btn:focus-visible .mg-btn__swap-text.is-absolute,
  .treinamentos-lean-page .mg-btn:hover .mg-btn__icon.is-absolute,
  .treinamentos-lean-page .mg-btn:focus-visible .mg-btn__icon.is-absolute { transform: translate3d(0, 130%, 0); }
  .treinamentos-lean-page .mg-btn:hover .mg-btn__swap-text.is-relative,
  .treinamentos-lean-page .mg-btn:focus-visible .mg-btn__swap-text.is-relative,
  .treinamentos-lean-page .mg-btn:hover .mg-btn__icon.is-relative,
  .treinamentos-lean-page .mg-btn:focus-visible .mg-btn__icon.is-relative { transform: translate3d(0, 0, 0); }
}


/* ============================================================ */
/* SIDEBAR: FILTROS                                            */
/* ============================================================ */
.cal-filtros {
  /* ----------------------------------------------------------------
     Alinhamento vertical da coluna de filtros com a lista.
     Para trocar, acrescente UM pós-fixo na <aside class="cal-filtros ...">:
       .cal-filtros--alinha-titulo → (A)  régua de "Filtrar" alinhada à
                                     régua do 1º título de grupo.
       .cal-filtros--alinha-busca  → (B)  base da caixa de busca alinhada à
                                     régua laranja do 1º título de grupo.
     Sem pós-fixo, usa o padrão abaixo. (valores medidos p/ os cabeçalhos atuais)
     ---------------------------------------------------------------- */
  --cal-filtros-offset: -13px;           /* padrão = (B) */
  width: 280px;
  flex-shrink: 0;
  margin-top: var(--cal-filtros-offset);
}

/* Modificadores de alinhamento — troque o pós-fixo na class para ativar */
.cal-filtros--alinha-titulo { --cal-filtros-offset: 37px; }   /* (A) */
.cal-filtros--alinha-busca  { --cal-filtros-offset: -13px; }  /* (B) */

.cal-filtros__title {
  font-size: 1rem;                       /* 16px — Figma */
  font-weight: var(--font-weight-bold);
  color: var(--color-navy-deep);
  line-height: 1.6;                      /* iguala o título de grupo p/ alinhar a régua */
  padding-bottom: 12px;                  /* idem .calendario__group-title */
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: 12px;
}

/* --- Bloco de filtro: rótulo + cápsulas --- */
.cal-filtros__block + .cal-filtros__block {
  margin-top: 6px;
}

.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;
}

/* Cápsulas que quebram linha dentro de cada bloco */
.cal-filtros__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Pílulas de filtro (cápsulas / chips) --- */
.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 — Figma */
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
  color: #333;
  text-align: left;
  transition: border-color 0.2s, background-color 0.2s;
}

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

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

/* Botão "Ver mais/menos filtros" — só aparece no mobile (ver media query) */
.cal-filtros__toggle {
  display: none;
}


/* ============================================================ */
/* FILTROS APLICADOS (bloco abaixo da busca, na coluna) + util. */
/* ============================================================ */
[hidden] { display: none !important; }

/* Cápsula escolhida some da posição original (vira chip aplicado) */
.filtro-pill--chosen { display: none; }

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

.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;
}

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

/* Chip removível (cápsula navy com ✕) */
.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;
}

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

.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;
}

.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;
}

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

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


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

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

  .calendario__search {
    width: 100%;
  }

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

  /* ---- Carga parcial dos filtros + botão "Ver mais filtros" ---- */
  .cal-filtros__blocks {
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .cal-filtros.is-collapsed .cal-filtros__blocks {
    position: relative;
    max-height: 210px;                     /* parte visível no estado recolhido */
  }
  /* desvanecer no rodapé quando recolhido */
  .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) {
    .cal-filtros__blocks { transition: none; }
  }

  /* botão alternador (só no mobile) — discreto, com borda suave */
  .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;
  }
  .cal-filtros__toggle:hover {
    color: var(--color-navy-deep);
    border-color: var(--color-navy-deep);
  }
  .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);   /* seta p/ baixo */
    transition: transform 0.2s ease;
  }
  .cal-filtros:not(.is-collapsed) .cal-filtros__toggle::after {
    transform: translateY(2px) rotate(-135deg);  /* seta p/ cima */
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* mesmo offset do desktop (--cal-filtros-offset herdado de .cal-filtros) */
  .cal-filtros { width: 240px; flex-shrink: 0; margin-top: var(--cal-filtros-offset); order: 0; }
  .calendario__main { flex: 1; min-width: 0; }
}

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

  .calendario__subtitle {
    font-size: 1.125rem;
  }

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

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

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

  /* empilhado: selo de data como "aba" no canto superior esquerdo,
     levemente vazando à esquerda (igual ao desktop, que centraliza na vertical) */
  .cal-card__date {
    left: -8px;
    top: 14px;
    transform: none;
  }
}
/* ============================================================ */
/* SECTION: EXPLORE JORNADAS                                   */
/* ============================================================ */
.explore-jornadas {
  background-color: var(--color-white);
  padding-top: 64px;
  padding-bottom: 64px;
}

.explore-jornadas__container {
  max-width: 1246px;
  padding-left: 24px;
  padding-right: 24px;
}

/* --- Título (linha 1 extrabold, linha 2 regular) --- */
.explore-jornadas__title {
  font-size: 2.375rem;                   /* 38px */
  font-weight: var(--font-weight-regular);
  color: var(--color-navy-deep);
  line-height: normal;
  margin-bottom: 0;
}

.explore-jornadas__title-bold {
  display: block;
  font-weight: var(--font-weight-extrabold);
}

/* --- Traço laranja sob o título --- */
.explore-jornadas__divider {
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-accent);
  margin-top: 16px;
}

/* --- Grid de cards --- */
.explore-jornadas__cards {
  margin-top: 33px;
}


/* ============================================================ */
/* CARD DE JORNADA                                             */
/* ============================================================ */
.jornada-card {
  background-color: var(--color-card-bg);
  border-radius: 12px;
  padding: 32px;
}

.jornada-card__icon {
  font-size: 2rem;                       /* 32px */
  line-height: 1.6;                      /* 51.2px no Figma */
  margin-bottom: 12px;
}

.jornada-card__heading {
  font-size: 1rem;                       /* 16px */
  font-weight: var(--font-weight-extrabold);
  color: var(--color-navy-deep);
  line-height: 1.25;                     /* 20px */
  margin-bottom: 16px;
}

.jornada-card__heading-italic {
  font-weight: var(--font-weight-regular);
}

.jornada-card__text {
  font-size: 0.875rem;                   /* 14px */
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
  line-height: 1.43;                     /* 20px */
  margin-bottom: 24px;
}

/* --- CTA (largura total do card) --- */
.jornada-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 0.881rem;                   /* 14.1px */
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  padding: 12.8px 28.8px;
  transition: background-color 0.2s;
}

.jornada-card__cta:hover {
  background-color: var(--color-accent-dark);
  color: var(--color-white);
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 991.98px) {
  .explore-jornadas {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (max-width: 576px) {
  .explore-jornadas__title {
    font-size: 1.75rem;
  }

  .jornada-card {
    padding: 24px;
  }
}


/* ============================================================ */
/* MOBILE — a própria coluna de filtros (.cal-filtros) é exibida */
/* full-width acima da lista (≤767.98px) ou como sidebar de      */
/* 240px (768–991.98px). As cápsulas já quebram linha sozinhas,  */
/* então não há mais o bloco de chips duplicado (.filtro-visible).*/
/* ============================================================ */


/* ============================================================ */
/* SECTION: NEWSLETTER                                          */
/* ============================================================ */
.agenda-newsletter {
  --newsletter-section-bg: var(--color-navy-deep);
  --newsletter-section-color: var(--color-white);
  --newsletter-title-color: var(--color-accent);
  --newsletter-strong-color: var(--color-white);
  --newsletter-input-bg: var(--color-white);
  --newsletter-input-focus-color: var(--color-accent);
  --newsletter-button-bg: #129396;
  --newsletter-button-color: var(--color-white);
  --newsletter-checkbox-checked-bg: #129396;
  --newsletter-checkbox-checked-border: #129396;
  --newsletter-checkbox-focus-color: var(--color-accent);
  --newsletter-checkbox-check-color: var(--color-white);
}


/* ============================================================ */
/* SECTION: FAQ                                                 */
/* ============================================================ */
.agenda-faq {
  --faq-bg: var(--color-section-bg);
  --faq-title-color: var(--color-navy-deep);
  --faq-text-color: #4b5563;
  --faq-accent: var(--color-accent);
}

.agenda-faq .faq-module__header {
  text-align: center;
}

.agenda-faq .faq-module__divider {
  margin: 0 auto;
}


/* ============================================================ */
/* RESPONSIVO EXTRA                                             */
/* ============================================================ */

/* 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) {
  .filtro-pill,
  .cal-aplicado {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.875rem;
  }
  .calendario__search-btn {
    width: 36px;
    height: 36px;
  }
  .calendario__search-input {
    padding: 11px 0;
    font-size: 0.875rem;
  }
  .cal-aplicados__clear {
    display: inline-block;
    padding: 8px 0;
    font-size: 0.875rem;
  }
  .cal-btn {
    height: auto;
    min-height: 40px;
    padding: 0 18px;
    font-size: 0.875rem;
  }
}