/* ============================================================================
   certificados-cursos.css — Seção Cursos no site_2026
   ----------------------------------------------------------------------------
   OBJETIVO:
   - Manter a estrutura funcional em duas colunas usada na versão publicada.
   - Trocar a navegação antiga por setas discretas < >.
   - Permitir navegação direta por índice numerado, sem bolinhas rosa.
   - Não substituir nem alterar o arquivo css/Styles.css do projeto novo.
   - Atuar apenas dentro da seção #cursos com a classe .cursos-certificados-2026.
   ========================================================================== */

.cursos-certificados-2026 {
  --cursos-cor-fundo: #f7f7f5;
  --cursos-cor-texto: #1f242b;
  --cursos-cor-texto-suave: #505a64;
  --cursos-cor-borda: rgba(31, 36, 43, 0.18);
  --cursos-cor-borda-ativa: rgba(47, 95, 99, 0.55);
  --cursos-cor-acento: #2f5f63;
  --cursos-cor-acento-escuro: #244b4f;

  width: 100%;
  min-height: 245px;
  padding: 48px 18px 42px;
  background: var(--cursos-cor-fundo);
  color: var(--cursos-cor-texto);
  box-sizing: border-box;
}

.cursos-certificados-2026 .cursos-certificados-titulo {
  margin: 0 0 30px;
  color: var(--cursos-cor-texto);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  text-align: center;
  font-weight: 800;
}

.cursos-certificados-2026 .curso-tabela-certificados-2026 {
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 58px);
  row-gap: 8px;
  align-items: start;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cursos-certificados-2026 .curso-coluna-certificado,
.cursos-certificados-2026 .curso-coluna-dados {
  min-width: 0;
  text-align: left;
}

.cursos-certificados-2026 .certificado-link-2026 {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--cursos-cor-acento);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.cursos-certificados-2026 .certificado-link-2026:hover,
.cursos-certificados-2026 .certificado-link-2026:focus-visible {
  color: var(--cursos-cor-acento-escuro);
  border-bottom-color: var(--cursos-cor-acento-escuro);
  outline: none;
}

.cursos-certificados-2026 .certificado-link-2026.is-disabled,
.cursos-certificados-2026 .certificado-link-2026.is-loading {
  pointer-events: none;
  opacity: 0.62;
}

.cursos-certificados-2026 .certificado-data-2026 {
  display: block;
  margin-top: 8px;
  color: var(--cursos-cor-texto-suave);
  font-size: 0.93rem;
  line-height: 1.45;
}

.cursos-certificados-2026 .certificado-titulo-bloco-2026 {
  margin: 0 0 8px;
  padding: 0;
}

.cursos-certificados-2026 .certificado-titulo-2026 {
  display: block;
  color: var(--cursos-cor-texto);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.35;
  font-weight: 800;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cursos-certificados-2026 .certificado-area-2026 {
  display: block;
  color: var(--cursos-cor-texto-suave);
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Navegação inferior: discreta, direta e não linear */
.cursos-certificados-2026 .curso-navegacao-2026 {
  width: min(760px, 100%);
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
}

.cursos-certificados-2026 .curso-seta-discreta-2026 {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cursos-cor-acento);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cursos-certificados-2026 .curso-seta-discreta-2026:hover,
.cursos-certificados-2026 .curso-seta-discreta-2026:focus-visible {
  background: rgba(47, 95, 99, 0.08);
  color: var(--cursos-cor-acento-escuro);
  outline: none;
  transform: translateY(-1px);
}

.cursos-certificados-2026 .curso-indice-2026 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

.cursos-certificados-2026 .curso-indice-item-2026 {
  flex: 0 0 auto;
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--cursos-cor-texto-suave);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cursos-certificados-2026 .curso-indice-item-2026:hover,
.cursos-certificados-2026 .curso-indice-item-2026:focus-visible {
  border-color: var(--cursos-cor-borda-ativa);
  color: var(--cursos-cor-acento-escuro);
  outline: none;
}

.cursos-certificados-2026 .curso-indice-item-2026.is-active {
  border-color: var(--cursos-cor-borda-ativa);
  background: rgba(47, 95, 99, 0.1);
  color: var(--cursos-cor-acento-escuro);
}

.cursos-certificados-2026 .certificados-status-2026 {
  min-height: 20px;
  margin: 16px auto 0;
  width: min(760px, 100%);
  color: var(--cursos-cor-texto-suave);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
}

.cert-modal-2026 {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.86);
  overflow: auto;
  z-index: 999999;
  box-sizing: border-box;
}

.cert-modal-2026.open {
  display: flex;
}

.cert-img-2026 {
  display: block;
  max-width: min(1120px, 96vw);
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
}

.cert-close-2026 {
  position: fixed;
  top: 18px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.36);
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 1000000;
}

.cert-close-2026:hover,
.cert-close-2026:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}

@media (max-width: 700px) {
  .cursos-certificados-2026 {
    padding: 42px 16px 38px;
  }

  .cursos-certificados-2026 .curso-tabela-certificados-2026 {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .cursos-certificados-2026 .curso-coluna-certificado,
  .cursos-certificados-2026 .curso-coluna-dados {
    text-align: center;
  }

  .cursos-certificados-2026 .curso-navegacao-2026 {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 6px;
  }

  .cursos-certificados-2026 .curso-seta-discreta-2026 {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .cursos-certificados-2026 .curso-indice-2026 {
    justify-content: flex-start;
  }

  .cert-modal-2026 {
    padding: 18px;
  }
}

/* ==========================================================================
   CORRECAO_NAVEGACAO_INICIO_NUMERACAO
   --------------------------------------------------------------------------
   Corrige a navegação direta dos certificados para iniciar visualmente em 01.
   O problema ocorria porque a lista estava centralizada em um container com
   rolagem horizontal, fazendo a visualização começar em números intermediários.
   ========================================================================== */

.cursos-certificados-2026 .curso-indice-2026 {
  justify-content: flex-start;
  scroll-padding-left: 0;
}

.cursos-certificados-2026 .curso-indice-item-2026:first-child {
  margin-left: 0;
}

/* ==========================================================================
   CORRECAO_LARGURA_REAL_CURSOS_202606
   --------------------------------------------------------------------------
   Ajusta a seção Cursos para seguir a largura visual da seção Projetos.
   Aumenta a área útil da coluna do título do certificado e evita quebra
   desnecessária de linha quando ainda existe espaço horizontal disponível.
   ========================================================================== */

.cursos-certificados-2026 .curso-tabela-certificados-2026,
.cursos-certificados-2026 .curso-navegacao-2026,
.cursos-certificados-2026 .certificados-status-2026 {
  width: min(1180px, 92vw);
}

.cursos-certificados-2026 .curso-tabela-certificados-2026 {
  grid-template-columns: minmax(145px, 210px) minmax(0, 1fr);
  column-gap: clamp(34px, 7vw, 88px);
}

.cursos-certificados-2026 .certificado-titulo-2026 {
  max-width: none;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.cursos-certificados-2026 .curso-navegacao-2026 {
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  gap: 8px;
}

.cursos-certificados-2026 .curso-seta-discreta-2026 {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 1.1rem;
}

.cursos-certificados-2026 .curso-indice-2026 {
  justify-content: flex-start;
  gap: 3px;
  padding: 2px 0 6px;
  scroll-behavior: auto;
  scrollbar-width: none;
}

.cursos-certificados-2026 .curso-indice-2026::-webkit-scrollbar {
  display: none;
}

.cursos-certificados-2026 .curso-indice-item-2026 {
  min-width: 21px;
  height: 22px;
  padding: 0 3px;
  border: 0;
  border-radius: 4px;
  font-size: 0.68rem;
}

.cursos-certificados-2026 .curso-indice-item-2026.is-active {
  background: rgba(47, 95, 99, 0.11);
}


/* ==========================================================================
   CORRECAO_LIMITE_VISUAL_CURSOS_CARDS_202606
   --------------------------------------------------------------------------
   Ajusta a largura da seção Cursos para respeitar os mesmos limites visuais
   dos cards da seção Projetos, evitando que o conteúdo encoste nas laterais
   da tela em desktops/notebooks.
   ========================================================================== */

.cursos-certificados-2026 {
  --largura-visual-cursos-2026: min(1040px, calc(100vw - 152px));
}

.cursos-certificados-2026 .curso-tabela-certificados-2026,
.cursos-certificados-2026 .curso-navegacao-2026,
.cursos-certificados-2026 .certificados-status-2026 {
  width: var(--largura-visual-cursos-2026);
  max-width: var(--largura-visual-cursos-2026);
  margin-left: auto;
  margin-right: auto;
}

.cursos-certificados-2026 .curso-tabela-certificados-2026 {
  grid-template-columns: minmax(130px, 185px) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
}

.cursos-certificados-2026 .curso-navegacao-2026 {
  overflow: hidden;
}

.cursos-certificados-2026 .curso-indice-2026 {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 900px) {
  .cursos-certificados-2026 {
    --largura-visual-cursos-2026: min(100%, calc(100vw - 32px));
  }

  .cursos-certificados-2026 .curso-tabela-certificados-2026 {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
}