@charset "UTF-8";

@media (max-width:764px) {

	.sty-iframe iframe {
		width: 100%!important;
	}


  
}

/* tablet */
@media (max-width: 991.98px){
  .banner-left .icon-pessoas{
    left: clamp(8px, 2vw, 16px);
    top: 70%;                 /* ajuste fino para alinhar ao “participa” */
    width: clamp(56px, 9vw, 96px);
  }

   .icone-seta {
    right: -10px;
    bottom: -12px;
    width: clamp(52px, 9vw, 76px);
  }
  .banner-c-mob{
  background-image: url(../img/banner-c-mob.png);
  background-size: none;
  background-position: left;
}
.banner-home-mob{
  background-image: url(../img/banner-home-mob.png);
  background-size: none;
  background-position: center;
  height: auto;
}
.banner-home p {
    color: white;

}
.espaco-mob-banner{
  padding-top: 0px;
}
.btn-prima {
  
    font-size: 20px;
    padding: 10px 35px 10px 35px;
}
.grupo-label {
    font-size: 40px;
}
.accordion-item:last-of-type .accordion-button.collapsed {
    font-size: 16px;
}
.accordion-button:not(.collapsed) {
      font-size: 19px;
}
.redes .sociais a {
    width: 40px;
}
.redes .sociais {
    gap: 10px;
}
.title-video {
    color: var(--quaternaria);
    font-size: 27px;
    font-weight: 600;
}
}

@media (min-width:0px) and (max-width:580px) {
    .banner-comissao {
      background-size: cover !important;

    }
}
/* mobile */
@media (max-width: 575.98px){
  .banner-left .icon-pessoas{
    left: clamp(6px, 2.5vw, 14px);
    top: 70%;
    width: clamp(48px, 12vw, 72px);
  }

}
/* mobile */
@media (min-width: 1452px){
 .banner-comissao {
      background-position: center !important;

    }
}
@media (min-width: 1452px){
 .banner-comissao {
      background-position: center !important;

    }
}
@media (min-width: 1700px){
 .banner-comissao {
      height: 450px;

    }
}
/* ajustes para telas menores */
@media (max-width: 991.98px) {
 
}
@media (max-width: 575.98px) {
  .icone-seta {
    right: -6px;
    bottom: -8px;
    width: clamp(44px, 12vw, 64px);
  }
}

/* tablet: sobe um pouco e reduz */
@media (max-width: 991.98px){
  .icone-caderno{
    right: -6px;
    width: clamp(56px, 9vw, 84px);
  }
   .icone-duvida{
    right: -6px !important;
    width: clamp(56px, 9vw, 84px);
  }
}
@media (min-width:991px) and (max-width:1030px) {
	
.icone-caderno {
    right: -10px !important;
    
}
.icone-duvida {
    right: -10px !important;
    
}
}
@media (min-width:0px) and (max-width:385px) {
	
.icone-caderno {
  bottom: -110px !important;
  width: clamp(38px, 12vw, 7px) !important;

}
.icone-duvida {
  bottom: -80px !important;
  width: clamp(38px, 12vw, 7px) !important;

}
}
/* mobile: deixa mais contido */
@media (max-width: 575.98px){
  .icone-caderno{
    right: -4px;
    bottom: -100px;   
    width: clamp(48px, 12vw, 72px);
  }
   .icone-duvida{
    right: -4px !important;
    bottom: -100px !important;   
    width: clamp(48px, 12vw, 72px) !important;
  }
  .banner-prin .faixa {
    transform: translateY(50px) !important;
}
}

@media (min-width:0px) and (max-width:991px) {
	.titulo-sobre  {
		font-size: 30px;
		padding-top: 50px;
	}

	.sty-iframe {
    padding-top: 25px;
	}
	.redes a{
		width: 40px;
		padding-top: 30px;
	}
	.link-li li a {
    font-size: 22px;
    padding-bottom: 5px;
	padding-left: 0px; 
    padding-right: 0px; 
    font-weight: 600;
}
.balanca-mob{
	padding-top: 60px;
	padding-bottom: 60px;
}
.pad-mobile{
	padding-top: 40px;
}
.banner-prin .faixa {
    transform: translateY(60px);
}
.icone-caderno{
    bottom: -110px; 
        width: clamp(46px, 12vw, 72px);
  
  }
  .icone-duvida{
    bottom: -110px; 
        width: clamp(46px, 12vw, 72px);
  
  }
}
@media (min-width:0px) and (max-width:650px) {
	
.lampada {
    position: absolute;
    left: 10px;
    top: 70%;
    transform: translateY(-50%);
    width: 80px;
}
 
}

@media (min-width:0px) and (max-width:550px) {
	.volte {
    color: white;
    font-weight: bold;
    font-size: 25px;
}

 
}

@media (min-width:992px) and (max-width:1199px) {
	
      .btn-prima {
        font-size: 25px;
        padding: 10px 35px 10px 35px;
    }
    .titulo-sobre {

    font-size: 45px;
}

 
}

@media (min-width:0px) and (max-width:650px) {
	
.banner-comissao .text-s-comissao {
    font-size: 20px;
}
 
}


/* tablet: aproxima um pouco do box */
@media (max-width: 991.98px){
  .icone-alerta{
    top: -14px;
    right: -14px;
    width: clamp(40px, 7.5vw, 56px);
  }
}

@media (max-width: 575.98px){
  .borda-preparando{ padding-right: 24px; }
  .icone-alerta{
    bottom: -10px;
    right: 8px;
    transform: none;
    width: 36px;
  }
}


/* telas muito pequenas: ícone menor ainda */
@media (max-width: 360px){
  .borda-preparando{ padding-right: 52px; }
  .icone-alerta{ width: 34px; right: 8px; }
}


/* ====== MOBILE ====== */
@media (max-width: 991.98px) {
  .logo-menu {
    width: 200px;
}
  /* a barra vira o referencial do painel */
  .nav-custom { 
    position: relative; 
    z-index: 1040; /* barra acima do painel */
  }

  /* botão sempre clicável acima do painel */
  .nav-custom .navbar-toggler { 
    z-index: 1050; 
  }

  /* painel do menu abre logo abaixo da barra e ocupa 100% */
  .nav-custom .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #060644ef; /* sua cor primária */
    padding: .75rem 0 1rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    z-index: 1030;
    border-radius: 5px;
  }

  /* evita “fantasmas” quando o collapse está fechado */
  .nav-custom .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  /* mantém suas classes, só forçamos coluna no mobile */
  .nav-custom .navbar-nav {
    flex-direction: column !important;
    align-items: center;
    width: 100%;
    gap: .25rem;
  }

  /* área clicável mais confortável */
  .nav-custom .navbar-nav .nav-link {
    display: block;
    padding: .6rem 1rem;
    font-size: 1.125rem;
  }


  .banner-comissao {
    background-repeat: no-repeat;
    background-size: unset; 
     background-position: left; 
    height: auto; 
    background-image: url(../img/banner-c-mob.webp);
}

}


/* altura mínima para permitir centralização vertical em desktop */
#bannercomissao .row { min-height: 360px; } /* ajuste se seu banner for mais alto */

/* bloco de texto com largura confortável e recuo */
.banner-comissao .copy{
  width: min(620px, 100%);   /* mesma “caixa” do mock */
  margin: 0 auto;            /* central no mobile */
  text-align: left;
}

/* tipografia opcional (não mexe no layout) */
.banner-comissao .titulo-sobre{ line-height: 1.2; }
.banner-comissao .text-s-comissao{ line-height: 1.7; }

/* em telas grandes: cola à esquerda e dá um leve respiro interno */
@media (min-width: 992px){
  .banner-comissao .copy{
    margin: 0;               /* deixa à esquerda */
  }
}


/* MOBILE */
@media (max-width: 576px){
  #bannercomissao .row{
    padding-left: 16px;
    padding-right: 16px;    /* respiro nas bordas */
  }
  .banner-comissao .col-12{
    padding-left: 0;
    padding-right: 0;
  }
  .banner-comissao .copy{
    width: 100% !important; /* mata fit-content/max-width herdado */
    max-width: none !important;
    padding: 16px 0;        /* ajuste de respiro interno */
  }
  .banner-comissao .text-s-comissao{
    width: 100% !important;
    font-size: 16px;
    line-height: 1.6;
  }
}

@media (min-width:0px) and (max-width:200px) {
	
      .banner-comissao .text-s-comissao {
        font-size: 12px;
    }
}

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

@media (max-width: 992px) {
  .contatos-card { padding-top: 5.5rem; }
  .contatos-title { width: 88%; top: -1.8rem; }
  .contatos-icone { width: 18%; bottom: -7%; right: 4%; }
}

@media (max-width: 576px) {
  .contatos-card { padding-top: 6.2rem; }
  .contatos-title { width: 92%; top: -1.2rem; }
  .contatos-icone { width: 22%; bottom: -8%; right: 5%; }
  .contatos-body p { font-size: .95rem; }
}

/* Evita barra de rolagem horizontal no mobile */
html, body {
  overflow-x: hidden;
}


@media (min-width:0px) and (max-width:450px) {
    .accordion-item:last-of-type .accordion-button.collapsed {
        font-size: 14px;
    }
    .acc-left {
    width: 50px;
    height: 50px;
}
}


/* 🔧 Mobile: usar quase 100% da largura da tela */
@media (max-width: 500px){
  .video-embed-9x16{
    width: 250px;             /* ocupa 90% da largura da viewport */
    max-width: none;         /* remove limite do container */
    border-radius: 10px;
  }

  .video-embed-9x16 .yt-embed{
    transform: scale(1.00);  /* zoom bem leve */
  }
}



/* 🔧 Mobile: usar quase 100% da largura da tela */
@media (max-width: 390px){
  .video-embed-9x16{
    width: 150px;             /* ocupa 90% da largura da viewport */
    max-width: none;         /* remove limite do container */
    border-radius: 10px;
  }

}