#cursos-passo {
  --title-font-size: var(--font-size-lg);
  --section-cover-border-radius: var(--border-radius-md);
  .section-content {
    border-bottom: 4px solid var(--color-complementary);
    padding-block-end: var(--space-2x);
  }

}

@media( width >= 901px){
  #cursos-passo {
    --section-content-position: wrap-start / 7;
  }
}

.cursos-header {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.cursos-passo {
  background-color: #f5e9df;
  padding: 1rem;
  border-radius: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cursos-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.icon-small {
  width: 18px;
  height: 18px;
  margin-right: 0.6rem;
  stroke: #1a1a1a;
  flex-shrink: 0;
}

.cursos-item span {
  font-size: 1rem;
}

.button-cursos {
  padding: 1rem 10rem;
  font-size: 24px;
  border: none;
  background-color: #1C262A;
  color: #FFE8BC;
  border-radius: 16px;
  cursor: pointer;
}


#contact-unir {
  border-radius: 20px;
  padding: 63px;
  color: #000;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
}

/* =====================================================
   Estilos para a seção #contact-unir (layout lado a lado)
   ===================================================== */

/* 1) Container principal: fundo, padding e flex */
#contact-unir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /*quebraemtelapequena*/gap: 40px;
  border-radius: 20px;
  padding: 63px;
  color: #000;
   /* texto escuro sobre fundo claro */
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

/* 2) Container da imagem (lado esquerdo) */
#contact-unir .section-image {
  flex: 1; /* ocupar metade do espaço (ou ajuste conforme desejar) */
  max-width: 400px; /* limita o tamanho máximo da imagem + caixa */
}

/* 3) “Cartão” branco atrás da imagem (cantinhos arredondados) */
#contact-unir .stack {
  border-radius: 20px;
  padding: 20px; /* cria espaço em volta da img */
  box-sizing: border-box;
  width: 120%;
  height: auto;
}

/* 4) A própria imagem (book cover) */
#contact-unir .img-item {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px; /* opcional: cantos levemente arredondados na própria capa */
}

/* 5) Bloco de texto (lado direito) */
#contact-unir .section-content {
  flex: 2; /* ocupa o dobro do espaço da imagem */
  max-width: 600px;
  position: relative; /* para que o z-index fique acima de qualquer coisa */
  z-index: 1;
}

/* 6) Rótulo “LIVRO” */
#contact-unir .label-book {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  color: #1C262A; /* tom escuro para contraste */
  letter-spacing: 1px;
}

/* 7) Título principal */
#contact-unir .book-title {
  font-size: 36px; /* conforme o print, ajuste se quiser maior */
  margin: 0 0 20px 0;
  line-height: 1.2;
  color: #FFFFFF;
}

/* 8) Parágrafo descritivo */
#contact-unir .description {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 30px 0;
  color: #1C262A;
}


/* 10) Responsividade: em telas pequenas, empilha tudo */
@media (max-width: 768px) {
  #contact-unir {
    flex-direction: column;
    padding: 40px 20px;
    gap: 30px;
  }

  /* Diminui texto em mobile */
  #contact-unir .book-title {
    font-size: 28px;
  }
  #contact-unir .description {
    font-size: 14px;
  }

  /* Faz a imagem ocupar 100% em mobile */
  #contact-unir .section-image {
    max-width: none;
    width: 100%;
  }

  #contact-unir .stack {
    padding: 16px;
  }
}




/* ===================================================
   podcast-full.css
   =================================================== */

/* 1) Container principal */
#podcast-full {
  background-color: #1c262a;
  border-radius: 20px;
  padding: 60px 80px;
  color: #ffe8bc;
  font-family: 'Bricolage Grotesque', Tahoma, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

#podcast-full .podcast-label{
  font-size: 16px;
  font-weight: 700;
  color: #1c262a; /* Cor do texto */
  background-color: #ffe8bc; /* Cor de fundo */
  padding: 8px 20px; /* Adiciona um pouco de padding */
  border-radius: 37px; /* Borda arredondada */
  display: inline-block; /* Para garantir que o fundo tenha o tamanho adequado */
  margin-bottom: 12px; /* Espaçamento abaixo do "PODCAST" */
  width: 120px;
}
/* 1.1) "ACOMPANHE NOSSO PODCAST" */
#podcast-full .section-subtitle {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: #ff780c;
  margin: 0;
  margin-bottom: 24px;
  text-align: center;
}

/* 2) Wrapper flexível para texto e imagem */
#podcast-full .podcast-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 40px;
}

#podcast-full .podcast-text-image {
  text-align: center;
  flex: 1;
}

#podcast-full .podcast-logo {
  border-radius: 16px;
}

#podcast-full .podcast-cover {
  width: 200px;
  height: auto;
  object-fit: contain;
}

/* 3) Detalhes do podcast (Título, descrição e botões) */
#podcast-full .podcast-details {
  flex: 2;
  display: flex;
  flex-direction: column;
}

#podcast-full .podcast-title {
  font-size: 36px;
  font-weight: 700;
  color: #ffe8bc;
  margin: 0;
}

#podcast-full .podcast-subtitle {
  font-size: 16px;
  color: #ffe8bc;
}

#podcast-full .listen-section {
  display: flex;
  flex-direction: column;
  
  gap: 12px;
}

#podcast-full .listen-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--title-color, var(--color-accent));
}

#podcast-full .listen-buttons {
  display: flex;
  gap: 12px;
}

#podcast-full .btn-play,
#podcast-full .btn-platform {
  width: 48px;
  height: 48px;
}

#podcast-full .play-icon,
#podcast-full .platform-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

 /* ===================================================
   4) EPISÓDIOS (Cards ao lado) */
#podcast-full .podcast-episodes {
  display: flex;
  gap: 40px;
  justify-content: center;
}

#podcast-full .episode-card {
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 300px; /* Definindo uma altura fixa para o card */
}

#podcast-full .episode-cover {
  border-radius: 12px;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 41px; /* Espaço entre a imagem e o texto */
}

#podcast-full .episode-icon {
  margin-top: 200px; /* Espaço entre a imagem e o topo */
  width: 200px; /* Ajuste a largura da imagem conforme necessário */
  height: 200px; /* Ajuste a altura da imagem conforme necessário */
  max-width: none !important; /* Garante que a imagem não seja redimensionada */
}

#podcast-full .episode-number {
  font-size: 14px;
  font-weight: 600;
  color: #ffe8bc;
  margin-top: 111px; /* Ajuste para garantir que o número do episódio fique abaixo da imagem */
}

#podcast-full .episode-title-outside {
  margin-top: 111px; /* Ajuste para garantir que o número do episódio fique abaixo da imagem */
  font-size: 14px;
  color: #ffe8bc;
}

#podcast-full .episode-title-outside strong {
  color: #ffe8bc;
  font-weight: 600;
}


/* 5) Responsividade */
@media (max-width: 1024px) {
  #podcast-full .podcast-title {
    font-size: 32px;
  }
  #podcast-full .podcast-subtitle {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  #podcast-full {
    padding: 24px 20px;
  }
  #podcast-full .podcast-title {
    font-size: 28px;
  }
  #podcast-full .podcast-subtitle {
    font-size: 14px;
  }
  #podcast-full .episode-card {
    flex-direction: row;
    gap: 8px;
  }
  #podcast-full .episode-cover {
    width: 40px;
    height: 40px;
  }
  #podcast-full .episode-icon {
    width: 24px;
    height: 24px;
  }
  #podcast-full .episode-number,
  #podcast-full .episode-title {
    font-size: 12px;
  }
}

#banner-cursos {
  position: relative;
  height: 100vh;
  grid-column: start / end;
  background-attachment: fixed;
  display: grid;
  grid-template-columns: subgrid;
  padding-block: var(--space-lg);
  align-items: end;
  background: var(--color-surface) var(--section-image) no-repeat center top / cover;
  translate: 0 -270px;
  margin-block-end: -170px;  
  img{
    grid-column: wrap-start / wrap-end; 
  }
}

#cursos-curso{
  --section-layout-padding-block: calc(var(--wrap-gap) * 3);
  --section-cover-border-radius: var(--border-radius-md);
  .section-layout{
    --section-image-position: 2 / 6;
    --section-content-position: middle / -2;
    /* --section-background: none; */
    margin-block: 40px;
  }

  .btn-saiba {
    display: inline-block;
    width: fit-content;
    background-color: #1C262A; /* botão escuro */
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
  }

  .btn-saiba:hover {
    background-color: #000; /* escurece ligeiramente ao passar mouse */
  }

}


#cursos-podcast{

  --section-layout-padding-block: 132px;

  --title-section-color: #ffe8bc;
  --title-section-transform: uppercase;
  --description-color: var(--color-primary);

  .podcast-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 40px;
  }

  .podcast-logo {
    border-radius: 16px;
  }
  
  .podcast-cover {
    width: 200px;
    height: auto;
    object-fit: contain;
  }

  .podcast-details {
    flex: 2;
    display: flex;
    flex-direction: column;
  }

  .podcast-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffe8bc;
    margin: 0;
  }

  .section-subtitle {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #ff780c;
    margin: 0;
    margin-bottom: 24px;
  }

  .podcast-label {
    font-size: 16px;
    font-weight: 700;
    color: #1c262a;
    background-color: #ffe8bc;
    padding: 8px 20px;
    border-radius: 37px;
    display: inline-block;
    margin-bottom: 12px;
    width: 120px;
  }

  .podcast-subtitle {
    font-size: 16px;
    color: #ffe8bc;
  }

  .listen-section {
    display: flex;
    flex-direction: column;
    
    gap: 12px;
  }

  .listen-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--title-color, var(--color-accent));
  }

  .listen-buttons {
    display: flex;
    gap: 12px;
  }

  .btn-play,
  .btn-platform {
    width: 48px;
    height: 48px;
  }

  .play-icon,
  .platform-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .podcast-episodes {
    display: flex;
    gap: 40px;
    justify-content: end;
  }

  .episode-card {
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 300px; /* Definindo uma altura fixa para o card */
  }

  .episode-cover {
    border-radius: 12px;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 41px; /* Espaço entre a imagem e o texto */
  }

  .episode-icon {
    margin-top: 200px; /* Espaço entre a imagem e o topo */
    width: 200px; /* Ajuste a largura da imagem conforme necessário */
    height: 200px; /* Ajuste a altura da imagem conforme necessário */
    max-width: none !important; /* Garante que a imagem não seja redimensionada */
  }

  .episode-number {
    font-size: 14px;
    font-weight: 600;
    color: #ffe8bc;
    margin-top: 111px; /* Ajuste para garantir que o número do episódio fique abaixo da imagem */
  }

  .episode-title-outside {
    margin-top: 111px; /* Ajuste para garantir que o número do episódio fique abaixo da imagem */
    font-size: 14px;
    color: #ffe8bc;
  }

  .episode-title-outside strong {
    color: #ffe8bc;
    font-weight: 600;
  }

}

.bloco-podcast {
  display: grid;
  gap: var(--space-6x);
}

@media(width > 900px){
  .bloco-podcast {
    grid-template-columns: repeat(2, 1fr);
  }
}

#educacao-video {
  --section-header-align: center;
}

@media(width >= 900px){
  #educacao-video {
    --section-header-position: 4 / -4;
    --section-content-position: 3 / -3;
  
    video {
      height: 500px;
      width: 100%;
      max-width: initial;
    }
  }
  .educacao-professor{
  --section-content-position: 8 / -2 !important;
  }
}


#educacao-publico {
  --data-list-columns: repeat(3, 1fr);
  --data-list-gap: var(--column-width);
}

@media(width <= 900px){
  #educacao-publico {
    --data-list-columns: 1fr;
  }
}

#educacao-faq{
  --section-layout-align: start;
}

.educacao-topic {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
  --subtitle-font-size: var(--font-size-lg);
}


#educacao-professor{
  
  --section-layout-column-gap: var(--space-3x);
  --section-layout-row-gap: var(--space-2x);
  --section-title-font-size: var(--font-size-3xl);
  --section-layout-padding-block: 132px;
  --section-layout-align: start;
  --data-list-columns: repeat(3, 1fr);
  --section-color: var(--color-accent);
  --title-font-weight: regular;
  --title-color: #FFE8BC;

  .section-footer{
    margin-block-start: 32px;
  }

  .slide-nav button svg:hover, svg:focus{
    fill: #1C262A;
  }
}

#educacao-professor.section-header{
--section-title-font-size: var(--font-size-ml);

}

#educacao-professor strong {
  color: var(--color-accent);
 --title-font-weight: bold;
}


#estatistica-publico {
  --data-list-columns: repeat(3, 1fr);
  --section-content-position: 5 / -3;
}

@media(width <= 900px){
 #estatistica-publico {
    --data-list-columns: 1fr;
  }
}

.educacao-professor{
  --section-content-position: 8 / -2 !important;
}