/* ------- ESTILO ATUAL (DESKTOP) ------- */

#podcasts .banner{
  margin-top: 10px;
}

#podcasts .banner-topo{
  height: 487px;
}

#podcasts .banner-topo .info-banner{
  padding: 135px;
  padding-top: 200px;
  color:#fff;
}

#podcasts .banner-topo .info-banner h1,
#podcasts .banner-topo .info-banner p{
  width: 50%;
}


/* ------- RESPONSIVO (MOBILE) ------- */

@media (max-width: 768px) {
  #podcasts .topo{
    padding: 0 20px;
  }

  #podcasts .banner-topo{
    height: auto; /* deixa crescer conforme o conteúdo */
    padding-bottom: 40px;
  }

  #podcasts .banner-topo .info-banner{
    padding: 40px 20px; /* muito mais leve */
  }

  #podcasts .banner-topo .info-banner h1,
  #podcasts .banner-topo .info-banner p{
    width: 100% !important; /* ocupa a largura do mobile */
  }

  #podcasts .banner-topo .info-banner h1{
    font-size: 28px;
    line-height: 1.2;
  }

  #podcasts .banner-topo .info-banner p{
    font-size: 16px;
    line-height: 1.4;
    margin-top: 10px;
  }
}

/* ------- RESPONSIVO (TELAS MUITO PEQUENAS) ------- */

@media (max-width: 480px) {
  #podcasts .banner-topo .info-banner{
    padding: 30px 15px;
  }

  #podcasts .banner-topo .info-banner h1{
    font-size: 24px;
  }

  #podcasts .banner-topo .info-banner p{
    font-size: 15px;
  }
}

#podcasts .section-podcasts {
  padding: 20px 0;
}

#podcasts .section-podcasts h1 {
  font-size: 40px;
  color:#032A64;
  width: 55%;
  font-weight: bold;
  text-align: left;
  padding-top: 30px;
}

/* ------- MOBILE ------- */
@media (max-width: 768px) {
  #podcasts .section-podcasts h1 {
    width: 100%;       /* agora ocupa toda a largura */
    font-size: 28px;   /* mais confortável */
    line-height: 1.25;
    padding-top: 0px;
  }
}

/* ------- MOBILE PEQUENO ------- */
@media (max-width: 480px) {
  #podcasts .section-podcasts h1 {
    font-size: 24px;
  }
}

#podcasts .section-podcasts .benefit-box {
  border-radius: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  color: white;
  text-align: left;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#podcasts .section-podcasts .box-2 a{
  display: inline-block; /* <<< isso resolve */
  width: auto;  
  margin-top: 10px;
  padding: 8px 10px;
  max-width: 140px;
  background: #0072BC;
  border-radius: 25px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;

  font-family: Open Sans;
  font-weight: 700;
  font-size: 15px;
  text-align: center;

  /* animação suave */
  transition: all 0.3s ease;
}
/* HOVER */
#podcasts .section-podcasts .box-2 a:hover {
  background: #008ce9;              /* cor um pouco mais clara */
  transform: scale(1.03);           /* aumenta levemente */
  box-shadow: 0 6px 20px rgba(0, 114, 188, 0.4);  /* brilho */
}

#podcasts .section-podcasts #btn-ver-mais-podcasts{
  display: inline-block; /* <<< isso resolve */
  width: auto;  
  margin-top: 10px;
  padding: 8px 16px;
  max-width: 230px;
  background: #0072BC;
  border-radius: 25px;
  border: none;
  text-decoration: none;
  color: #fff;
  font-weight: bold;

  font-family: Open Sans;
  font-weight: 700;
  font-size: 15px;
  text-align: center;

  /* animação suave */
  transition: all 0.3s ease;
}
/* HOVER */
#podcasts .section-podcasts #btn-ver-mais-podcasts:hover {
  background: #008ce9;              /* cor um pouco mais clara */
  transform: scale(1.03);           /* aumenta levemente */
  box-shadow: 0 6px 20px rgba(0, 114, 188, 0.4);  /* brilho */
}
#podcasts .section-podcasts #btn-ver-menos-podcasts{
  display: inline-block; /* <<< isso resolve */
  width: auto;  
  margin-top: 10px;
  padding: 8px 16px;
  max-width: 230px;
  background: #0072BC;
  border-radius: 25px;
  border: none;
  text-decoration: none;
  color: #fff;
  font-weight: bold;

  font-family: Open Sans;
  font-weight: 700;
  font-size: 15px;
  text-align: center;

  /* animação suave */
  transition: all 0.3s ease;
}
/* HOVER */
#podcasts .section-podcasts #btn-ver-menos-podcasts:hover {
  background: #008ce9;              /* cor um pouco mais clara */
  transform: scale(1.03);           /* aumenta levemente */
  box-shadow: 0 6px 20px rgba(0, 114, 188, 0.4);  /* brilho */
}

#podcasts #section-podcasts {
    overflow-anchor: none;
}


/* CSS: animação */
#podcasts .podcast-item {
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: 
  opacity 250ms ease,
  transform 250ms ease,
  max-height 450ms ease,
  margin 350ms ease,
  padding 350ms ease;
  /* Valores iniciais neutros */
}

/* Classe de estado "escondido" (aplicamos também max-height:0 via JS) */
#podcasts .podcast-item.is-hidden {
  opacity: 0;
  transform: translateY(18px);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

#podcasts .section-podcasts #btn-ver-mais-paper{
  display: inline-block; /* <<< isso resolve */
  width: auto;  
  margin-top: 10px;
  padding: 8px 16px;
  max-width: 230px;
  background: #0072BC;
  border-radius: 25px;
  border: none;
  text-decoration: none;
  color: #fff;
  font-weight: bold;

  font-family: Open Sans;
  font-weight: 700;
  font-size: 15px;
  text-align: center;

  /* animação suave */
  transition: all 0.3s ease;
}
/* HOVER */
#podcasts .section-podcasts #btn-ver-mais-paper:hover {
  background: #008ce9;              /* cor um pouco mais clara */
  transform: scale(1.03);           /* aumenta levemente */
  box-shadow: 0 6px 20px rgba(0, 114, 188, 0.4);  /* brilho */
}
#podcasts .section-podcasts #btn-ver-menos-paper{
  display: inline-block; /* <<< isso resolve */
  width: auto;  
  margin-top: 10px;
  padding: 8px 16px;
  max-width: 230px;
  background: #0072BC;
  border-radius: 25px;
  border: none;
  text-decoration: none;
  color: #fff;
  font-weight: bold;

  font-family: Open Sans;
  font-weight: 700;
  font-size: 15px;
  text-align: center;

  /* animação suave */
  transition: all 0.3s ease;
}
/* HOVER */
#podcasts .section-podcasts #btn-ver-menos-paper:hover {
  background: #008ce9;              /* cor um pouco mais clara */
  transform: scale(1.03);           /* aumenta levemente */
  box-shadow: 0 6px 20px rgba(0, 114, 188, 0.4);  /* brilho */
}

/* CSS: animação */
#podcasts .paper-item {
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: 
  opacity 250ms ease,
  transform 250ms ease,
  max-height 450ms ease,
  margin 350ms ease,
  padding 350ms ease;
  /* Valores iniciais neutros */
}

/* Classe de estado "escondido" (aplicamos também max-height:0 via JS) */
#podcasts .paper-item.is-hidden {
  opacity: 0;
  transform: translateY(18px);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

#podcasts .section-podcasts #btn-ver-mais-videocast{
  display: inline-block; /* <<< isso resolve */
  width: auto;  
  margin-top: 10px;
  padding: 8px 16px;
  max-width: 230px;
  background: #0072BC;
  border-radius: 25px;
  border: none;
  text-decoration: none;
  color: #fff;
  font-weight: bold;

  font-family: Open Sans;
  font-weight: 700;
  font-size: 15px;
  text-align: center;

  /* animação suave */
  transition: all 0.3s ease;
}
/* HOVER */
#podcasts .section-podcasts #btn-ver-mais-videocast:hover {
  background: #008ce9;              /* cor um pouco mais clara */
  transform: scale(1.03);           /* aumenta levemente */
  box-shadow: 0 6px 20px rgba(0, 114, 188, 0.4);  /* brilho */
}
#podcasts .section-podcasts #btn-ver-menos-videocast{
  display: inline-block; /* <<< isso resolve */
  width: auto;  
  margin-top: 10px;
  padding: 8px 16px;
  max-width: 230px;
  background: #0072BC;
  border-radius: 25px;
  border: none;
  text-decoration: none;
  color: #fff;
  font-weight: bold;

  font-family: Open Sans;
  font-weight: 700;
  font-size: 15px;
  text-align: center;

  /* animação suave */
  transition: all 0.3s ease;
}
/* HOVER */
#podcasts .section-podcasts #btn-ver-menos-videocast:hover {
  background: #008ce9;              /* cor um pouco mais clara */
  transform: scale(1.03);           /* aumenta levemente */
  box-shadow: 0 6px 20px rgba(0, 114, 188, 0.4);  /* brilho */
}

/* CSS: animação */
#podcasts .videocast-item {
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: 
  opacity 250ms ease,
  transform 250ms ease,
  max-height 450ms ease,
  margin 350ms ease,
  padding 350ms ease;
  /* Valores iniciais neutros */
}

/* Classe de estado "escondido" (aplicamos também max-height:0 via JS) */
#podcasts .videocast-item.is-hidden {
  opacity: 0;
  transform: translateY(18px);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Opcional: pequena suavização visual do conteúdo interno */
#podcasts .benefit-box {
  transition: transform 350ms ease;
}


#podcasts .section-podcasts .box-1 { background-color: #33ADC8; }
#podcasts .section-podcasts .box-2 { background-color: #F2F2F4; color: #E43470; border: 2px solid #E43470; }
#podcasts .section-podcasts .box-3 { background-color: #032A64; }

#podcasts .section-podcasts .benefit-title {
  font-weight: 700;
  font-size: 2.25rem;
  margin-bottom: 8px;
}

#podcasts .section-podcasts .benefit-text {
  font-size: 1.2rem;
  color: inherit;
  font-weight: bold;
  height: 70px;
}

#podcasts .section-podcasts .box-2 .benefit-text{
  color:#000;
  font-size: 1.2rem;
  font-weight: 400;
  height: 70px;
}

#podcasts .section-podcasts .box-1 .benefit-text{
  height: 100px;
}

#podcasts .section-podcasts .box-2{
  border: none;
  background-color: #E9E9E9;
}

#podcasts .section-podcasts .box-3 .icon-box{
  position: relative;
  bottom: 140px;
  left: 5px;
}
#podcasts .section-podcasts .box-2 .icon-box{
  position: relative;
  bottom: 110px;
  left: 5px;
}
#podcasts .section-podcasts .box-1 .icon-box{
  position: relative;
  bottom: 65px;
  left: 5px;
}
#podcasts .section-podcasts .icon-box-unique{
  position: relative;
  bottom: 150px;
  left: 5px;
}

#podcasts .section-podcasts .box-1 .icon-box-unique{
  position: relative;
  bottom: 80px;
  left: 5px;
}

/* ---------------------- */
/* 1024px (Tablets grandes) */
/* ---------------------- */
@media (max-width: 1024px) and (min-width: 821px) {

  #podcasts .section-podcasts .benefit-box {
    min-height: 440px; /* MAIS ALTURA PARA TEXTO QUEBRAR */
    padding: 25px 20px;
  }

  #podcasts .section-podcasts .benefit-title {
    font-size: 1.8rem;
  }

  #podcasts .section-podcasts .benefit-text {
    font-size: 1.05rem;
    height: 130px; /* mantém padronização dos textos */
  }

   #podcasts .section-podcasts .box-1 .benefit-text {
    font-size: 1.05rem;
    height: 130px; /* mantém padronização dos textos */
  }

  #podcasts .section-podcasts .box-2 .benefit-text {
    font-size: 1.05rem;
    height: 70px; /* mantém padronização dos textos */
  }

  /* Ajustes individuais dos ícones */
  #podcasts .section-podcasts .box-1 .icon-box {
    bottom: 80px;
  }
  #podcasts .section-podcasts .box-2 .icon-box {
    bottom: 150px;
  }
  #podcasts .section-podcasts .box-3 .icon-box {
    bottom: 130px;
  }
  #podcasts .section-podcasts .icon-box-unique {
    bottom: 90px;
  }
}

/* ---------------------- */
/* 768px (Tablet retrato) */
/* ---------------------- */
@media (max-width: 820px) and (min-width: 541px) {

  #podcasts .section-podcasts .benefit-box {
    min-height: 480px;  /* ainda mais altura */
    padding: 30px 20px;
  }

  #podcasts .section-podcasts .benefit-title {
    font-size: 1.6rem;
  }

  #podcasts .section-podcasts .benefit-text {
    font-size: 1.00rem;
    height: 150px; /* mantém padronização dos textos */
  }

   #podcasts .section-podcasts .box-1 .benefit-text {
    font-size: 1.00rem;
    height: 200px; /* mantém padronização dos textos */
  }

  #podcasts .section-podcasts .box-2 .benefit-text {
    font-size: 1.05rem;
    height: 100px; /* mantém padronização dos textos */
  }
  #podcasts .section-podcasts .box-2 .icon-box {
    bottom: 165px;
  }
  #podcasts .section-podcasts .box-1 .icon-box-unique {
    bottom: 40px;
  }

  #podcasts .section-podcasts .box-3 .icon-box-unique {
    bottom: 120px;
  }
}

@media (max-width: 540px) {
  #podcasts .section-podcasts .benefit-text {
    height: 100px;
  }
  #podcasts .section-podcasts .box-1 .benefit-text{
    height: 140px;
  }
  #podcasts .section-podcasts .box-3 .icon-box{
  bottom: 65px;
  }
  #podcasts .section-podcasts .box-2 .icon-box{
    bottom: 110px;
  }
  #podcasts .section-podcasts .box-1 .icon-box{
    bottom: 40px;
  }
}