.proto-tab a.collapsed .tab-text {
      font-size: 14px;
      opacity: 0.9;
  }

  .tab-icon.icon-white {
      display: none !important;
  }

  .tab-icon.icon-orange {
      display: block !important;
  }

  .proto-tab a:not(.collapsed) .icon-white {
      display: block !important;
  }

  .proto-tab a:not(.collapsed) .icon-orange {
      display: none !important;
  }

  .mb0 {
      margin-bottom: 0px !important
  }

  /* wrapper com scroll horizontal caso algum dia tenha muitas abas */
  .proto-eixos-grid-wrap {
      overflow: visible !important;
      padding-top: 60px;
      /* Espaço de segurança para a foto que subiu */
  }

  /* container flex (abas + painel) */
  .proto-eixos-grid {
      display: flex !important;
      align-items: flex-start;
      justify-content: center;
      gap: 10px;
      /* Reduzi o gap para compensar o aumento da ativa */
      width: 100%;
      height: 600px;
      /* Garanta uma altura fixa para o container das abas */
  }

  /* abas */
  .proto-tab {
      flex: 0 0 78px;
      height: 560px;
      /* MESMA ALTURA DO CARD BRANCO */
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .proto-tab a.collapsed {
      height: 400px;
      /* Mantenha EXATAMENTE a mesma altura da ativa */
      background: #fff;
      flex: 0 0 78px;
      z-index: 1;
  }


  .proto-tab a {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 78px;
      padding: 20px 0;
      /* Espaço interno */
      border-radius: 10px;
      background: #fff;
      text-decoration: none !important;
      box-shadow: 0 14px 30px rgba(0, 0, 0, .10);
      border: 1px solid rgba(0, 0, 0, .06);
      position: relative;
      transition: all 0.3s ease;
  }

  .tab-text {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-weight: 800;
      color: #0b4a6e;
      font-size: 15px;
      white-space: nowrap;
      letter-spacing: .4px;
  }

  .tab-icon {
      width: 34px !important;
      height: auto !important;
      margin-bottom: 10px;
      /* REMOVEMOS o position absolute e o transform que estavam aqui */
  }

  /* Wrapper que segura o Texto e o Ícone */
  .tab-content-wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      justify-content: flex-end;
      /* ALINHA NO RODAPÉ */
      align-items: center;
      gap: 15px;
      /* Espaço entre texto e ícone */
  }

  /* Ajuste do Texto Vertical */
  .tab-content-wrapper span {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      /* Para ler de baixo para cima */
      font-weight: bold;
      color: #004067;
      font-size: 16px;
      white-space: nowrap;
  }

  /* Ajuste do Ícone no fundo */
  .tab-content-wrapper img {
      width: 32px;
      /* Ajuste o tamanho conforme seu ícone */
      height: auto;
      margin-bottom: 5px;
  }

  .proto-tab a::after {
      content: "›";
      position: absolute;
      right: 50%;
      top: 20px;
      /* Joga a seta para o topo da aba */
      transform: translateX(50%) rotate(90deg);
      /* Aponta para baixo ou para o lado */
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #f0a438;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      display: none;
  }

  .proto-tab a>img {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%) rotate(180deg);
      height: 34px !important;
      width: auto !important;
  }

  .proto-tab a:not(.collapsed) {
      flex: 0 0 85px;
      background: #0b4a6e !important;
      box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
      z-index: 5;
      border-radius: 10px 0 0 10px;

  }

  .proto-tab a:not(.collapsed) .tab-text {
      color: #fff !important;
  }

  /* painel */
  .proto-panel-card {
      flex: 0 1 auto;
      width: auto;
      max-width: 400px;
      background: #fff;
      border-radius: 14px;
      min-height: 560px;
      /* Altura base */
      box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
      z-index: 2;
      position: relative;
      padding: 80px 30px 30px 30px;
      margin-top: 0;
  }

  /* ====== GRUDAR painel na aba ativa ======
                  quando o painel estiver imediatamente após uma aba, remove o gap e encaixa */
  .proto-tab+#eixoPanelContent {
      margin-left: -14px;
      /* mesmo valor do gap */
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-bottom: solid 8px #0B4A6E;
  }

  /* ====== layout do conteúdo (igual protótipo) ====== */
  .eixo-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
  }

  .eixo-head {
      display: flex;
      align-items: flex-end;
      gap: 20px;
      position: relative;
      /* Puxa para cima sem mover o card branco */
      margin-top: -100px;
      /* Garante que o topo (Selo Liderança) não seja cortado */
      z-index: 999;
  }

  @media(max-width: 991px) {
    .eixo-head{
        margin-top: inherit !important;
    }
  }

  .eixo-foto {
      width: 110px;
      /* Aumentei um pouco para bater com o protótipo */
      height: 110px;
      border-radius: 50%;
      background: #fff;
      /* padding: 6px;*/
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      /* Sombra da foto */
      flex: 0 0 110px;
      overflow: hidden;
  }

  .eixo-foto img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
  }

  .eixo-titulos {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: visible;
      /* Garante que o selo azul apareça inteiro */
  }

  .eixo-titulos h3 {
      margin: 0;
      font-weight: 900;
      color: #0b4a6e;
      font-size: 19px;
      line-height: 1.05;
  }

  .eixo-titulos .inst {
      margin-top: 10px;
      font-weight: 900;
      color: #0b4a6e;
      font-size: 17px;
      font-style: italic;
  }

  .eixo-label {
      font-weight: 600;
      color: #0b4a6e;
      margin: 16px 0 6px;
  }

  .eixo-muted {
      font-size: 12px;
      color: #0b4a6e;
      font-weight: 400;
      text-align: justify;
  }

  .eixo-list {
      margin-top: 10px;
      padding-left: 18px;
  }

  .eixo-list li {
      margin: 10px 0;
  }

  /* mobile */
  @media (max-width: 991.98px) {
      .proto-eixos-grid {
          display: block !important;
      }

      .proto-tab {
          width: auto;
          height: auto;
          margin-bottom: 10px;
      }

      .proto-tab a {
          width: auto;
          height: auto;
          writing-mode: horizontal-tb;
          transform: none;
          padding: 12px 14px;
      }

      .proto-tab a::after {
          display: none;
      }

      .proto-tab a>img {
          position: static;
          transform: none;
          height: 26px !important;
          margin-right: 8px;
      }

      .proto-panel-card {
          width: 100%;
          min-height: auto;
          margin-top: 12px;
          padding: 22px;
      }

      .proto-tab+#eixoPanelContent {
          margin-left: 0 !important;
          border-radius: 14px !important;
      }

      .eixo-grid {
          grid-template-columns: 1fr;
      }
  }

  [data-toggle="collapse"]:after{
      display: none;
  }

  .estrutura-image-container {
      transition: all 0.4s ease;
  }

  .estrutura-image-container:hover {
      transform: translateY(-5px);
      box-shadow: 0 30px 80px rgba(2,58,96,0.2) !important;
      border-color: rgba(11,74,110,0.3);
  }

  @media (max-width: 768px) {
      .estrutura-image-container {
          padding: 25px 20px !important;
          margin: 0 10px;
      }
  }


  @media (max-width: 768px) {
      .btn-download-pdf{
          font-size: 12px !important;
      }
  }
  .cargo-eixo {
      font-size: 11px;
      font-weight: 700;
      color: #0b4a6e;
      background: #7ce3f3;
      padding-right: 10px;
      padding-left: 10px;
      padding-top: 2px;
      padding-bottom: 2px;
      border-radius: 10px;
      width: fit-content;
      margin-bottom: -9px;
  }

  .img-custom {
      height: 137px;
      object-fit: contain;
  }

  .ls.ms [role="tablist"] .card-header {
      background: #023a60;
      border-color: #023a60;
  }

  [role="tablist"] .card-header a color: #fff !important;
  }

  [role="tablist"] .card-header a:hover {
      color: #fff !important;
  }

  .page_title,
  .call-to-action {
      background-image: url("/images/background-governança.jpg") !important;
  }

  /* ===== PRINCÍPIOS (final com botão) ===== */
  #principios {
      position: relative;
      z-index: 10;
      margin-top: -230px;
      /* ajuste fino */
      padding-top: 0 !important;
      /* anula classes s-pt-* */
      background: transparent;
      overflow-x: hidden;
  }

  #principios .principios-panel {
      background: #f2f5f7;
      border-radius: 18px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
      padding: 90px 28px 95px;
      position: relative;
      z-index: 1;
      overflow-x: hidden;
      /* não deixa “vazar” */
      overflow-y: visible;
  }

  #principios .principios-lead {
      max-width: 820px;
      margin: 14px auto 70px;
      color: #6b7280;
      line-height: 1.6;
      font-size: 15px;
  }

  /* Carrossel centralizado */
  #principios .principios-carousel {
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
      position: relative;
      display: grid;
      grid-template-columns: 64px 1fr 64px;
      /* mais espaço p/ setas */
      align-items: center;
      gap: 14px;
      padding: 0 8px;
      /* evita seta encostar na borda */
  }

  #principios .principios-arrow {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 0;
      background: rgba(255, 255, 255, .95);
      box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
      display: grid;
      place-items: center;
      cursor: pointer;
      user-select: none;
  }

  #principios .principios-arrow span {
      font-size: 34px;
      line-height: 1;
      color: #0b4a6e;
      margin-top: -2px;
  }

  #principios .principios-arrow:focus {
      outline: 2px solid rgba(11, 74, 110, .35);
      outline-offset: 2px;
  }

  #principios .principios-viewport {
      position: relative;
      width: 100%;
      height: 320px;
      /* menor (mais parecido com protótipo) */
      overflow: visible;
      /* permite sobreposição */
  }

  #principios .principios-track {
      position: relative;
      width: 100%;
      height: 100%;
  }

  /* Itens empilhados */
  #principios .principios-item {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) translateX(var(--x, 0px)) scale(var(--s, 1));
      z-index: var(--z, 1);
      opacity: var(--o, 1);
      transition: transform .45s ease, opacity .25s ease;
      width: 190px;
      /* menor */
      pointer-events: auto;
  }

  #principios .principios-item.is-hidden {
      opacity: 0;
      pointer-events: none;
  }

  /* Card */
  #principios .principios-card {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      height: 300px;
      /* menor */
      box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
      background: rgba(0, 86, 120, 0);
  }

  #principios .principios-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  /* Nome do princípio (centralizado vertical) */
  #principios .principios-label {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
      z-index: 3;
      font-weight: 800;
      letter-spacing: .8px;
      color: #fff;
      text-transform: uppercase;
      text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
      font-size: 14px;
      pointer-events: none;
  }

  /* Botão “Mais detalhes” */
  #principios .principios-cta {
      position: absolute;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      z-index: 5;
      border: 0;
      border-radius: 999px;
      padding: 10px 18px;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .3px;
      text-transform: uppercase;
      cursor: pointer;
      white-space: nowrap;
      background: #0b4a6e;
      /* padrão */
      color: #fff;
      box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
  }

  /* destaque central */
  #principios .principios-item.is-active {
      z-index: 200;
  }

  /* Degradê azul mais forte no card ativo */
  #principios .principios-item.is-active .principios-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
      rgba(11, 74, 110, 0) 45%,
      rgba(11, 74, 110, .55) 65%,
      #0b4a6e 100%);
      z-index: 2;
      pointer-events: none;
  }

  /* Ponte conectando no texto */
  #principios .principios-item.is-active .principios-card::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -22px;
      transform: translateX(-50%);
      width: 100%;
      height: 44px;
      background: #0b4a6e;
      border-radius: 18px;
      z-index: 4;
      box-shadow: 0 12px 22px rgba(0, 0, 0, .12);
      pointer-events: none;
  }

  /* Botão ativo: fundo #7ce3f3 e texto azul tema */
  #principios .principios-item.is-active .principios-cta {
      background: #7ce3f3;
      color: #0b4a6e;
  }

  /* Box do texto */
  #principios .principios-textbox {
      max-width: 650px;
      margin: -36px auto 0;
      background: #0b4a6e;
      color: #fff;
      border-radius: 18px;
      padding: 22px 26px 22px;
      box-shadow: 0 16px 34px rgba(0, 0, 0, .14);
      position: relative;
      z-index: 200;
      margin-top: 7px;
  }

  #principios .principios-text-title {
      margin: 0 0 8px;
      font-weight: 800;
      font-size: 18px;
      color: #fff;
  }

  #principios .principios-text {
      margin: 0;
      color: rgba(255, 255, 255, .92);
      line-height: 1.65;
      font-size: 14.5px;
  }

  /* Responsivo */
  @media (max-width: 991.98px) {
      /*#principios {*/
      /*    margin-top: -140px;*/
      /*}*/

      #principios .principios-panel {
          padding: 60px 18px 70px;
      }

      #principios .principios-viewport {
          height: 320px;
      }

      #principios .principios-item {
          width: 260px;
      }

      #principios .principios-card {
          height: 290px;
      }

      #principios .principios-carousel {
          max-width: 860px;
      }
  }

  @media (max-width: 575.98px) {
      /*#principios {*/
      /*    margin-top: -90px;*/
      /*}*/

      #principios .principios-carousel {
          grid-template-columns: 44px 1fr 44px;
      }

      #principios .principios-item {
          width: 88vw;
          max-width: 340px;
      }
  }

  #principios .principios-item.is-active .principios-card {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
  }

  #principios .principios-carousel {
      position: relative;
      z-index: 50;
      isolation: isolate;
  }

  #principios .principios-arrow {
      position: relative;
      z-index: 999;
      background: rgba(124, 227, 243, 0.65);
      opacity: 1 !important;
  }


  /* ===== Conecte sua instituição (final sem cortar imagem) ===== */
  .conecte-sec {
      overflow-x: hidden;
      overflow-y: visible;
      /* não deixa cortar embaixo */
  }

  .conecte-row {
      position: relative;
      align-items: center;
      padding-bottom: 110px;
      /* espaço para a imagem “descer” sem cortar */
      overflow: visible;
      /* garante que o absolute não seja clipado */
  }

  /* Fundo azul por trás */
  .conecte-row::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 58%;
      background: #0b4a6e;
      border-radius: 6px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
      z-index: 1;
  }

  /* Conteúdo */
  .conecte-box {
      position: relative;
      z-index: 2;
      background: transparent;
      padding: 28px 28px;
      color: rgba(255, 255, 255, .92);
      text-align: left;
  }

  .conecte-title {
      margin: 0 0 12px;
      font-weight: 800;
      color: #ffbf3b;
      font-size: 18px;
  }

  .conecte-box p {
      margin: 0 0 14px;
      line-height: 1.65;
      font-size: 14px;
  }

  /* IMAGEM (por cima) */
  .conecte-media-col {
      position: relative;
      z-index: 3;
      margin-top: 0;
  }

  @media (min-width: 992px) {
      .conecte-media-col {
          position: absolute;
          right: 0;
          top: 44px;
          /* desce a imagem (azul aparece por cima) */
          width: 58.333333%;
          /* col-lg-7 */
          padding-left: 15px;
          padding-right: 15px;
      }
  }

  .conecte-media {
      margin-left: -95px;
      /* overlap lateral (ajuste fino) */
  }

  .conecte-media img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 15px;
      box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
  }

  /* Mobile: layout normal (sem absolute/overlap forte) */
  @media (max-width: 991.98px) {
      .conecte-row {
          padding-bottom: 0;
      }

      .conecte-row::before {
          width: 100%;
          border-radius: 10px;
      }

      .conecte-media-col {
          position: relative;
          top: auto;
          width: auto;
          margin-top: 18px;
      }

      .conecte-media {
          margin-left: 0;
      }
  }



       /* =========================================================
          INSTITUIÇÕES REPRESENTANTES (TABS + CARDS) - PRONTO
          ========================================================= */
   #instituicoes-representantes .tab-content {
       background: #fff;
       border-radius: 12px;
       padding: 40px 22px;
       box-shadow:
               0 2px 6px rgba(0, 0, 0, .06),
               0 14px 40px rgba(0, 0, 0, .10);
   }

  /* TABS: barra azul + bordas nas abas */
  #instituicoes-representantes .nav-tabs {
      border: 0 !important;
      border-bottom: 0 !important;
      background: #0b4a6e;
      border-radius: 12px;
      padding: 14px 43px 0px;
      gap: 14px;
      align-items: stretch;
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
  }

  #instituicoes-representantes .nav-tabs .nav-item {
      margin: 0 !important;
      display: flex;
  }

  #instituicoes-representantes .nav-tabs .nav-link {
      margin-bottom: 0 !important;
      border-radius: 12px;
      padding: 12px 14px;
      font-weight: 700;
      font-size: 12px;
      line-height: 1.15;
      text-align: center;
      white-space: normal;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
      background: transparent !important;
      color: #fff !important;
      border: 2px solid rgba(255, 255, 255, .35) !important;
      box-shadow: none !important;
      opacity: 1 !important;
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
  }

  #instituicoes-representantes .nav-tabs .nav-link:hover {
      border-color: rgba(255, 255, 255, .55) !important;
      background: rgba(255, 255, 255, .06) !important;
      color: #fff !important;
  }

  /* ATIVA: fundo branco + texto azul + "conectada" ao conteúdo */
  #instituicoes-representantes .nav-tabs .nav-link.active,
  #instituicoes-representantes .nav-tabs .nav-item.show .nav-link {
      background: #fff !important;
      color: #0b4a6e !important;
      border-color: #fff !important;
      /* aqui é o ponto do protótipo */
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      /* ajuda a “encaixar” no conteúdo abaixo (sem linha de separação) */
      border-bottom-width: 0 !important;
      position: relative;
      top: 2px;
      /* desce um pouco para esconder qualquer emenda */
      z-index: 2;
  }

  /* Desktop: manter 1 linha e “dividir” igualmente */
  @media (min-width: 992px) {
      #instituicoes-representantes .nav-tabs {
          flex-wrap: nowrap;
      }

      #instituicoes-representantes .nav-tabs .nav-item {
          flex: 1 1 0;
      }
  }

  /* Mobile: deixa quebrar naturalmente */
  @media (max-width: 991.98px) {
      #instituicoes-representantes .nav-tabs {
          padding: 10px;
      }

      #instituicoes-representantes .nav-tabs .nav-link {
          padding: 10px 12px;
      }
  }

  /* CARDS */
  #instituicoes-representantes .rep-card {
      background: #fff;
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, .08);
      box-shadow: 0 14px 30px rgba(0, 0, 0, .10);
      overflow: hidden;
  }

  #instituicoes-representantes .rep-card-body {
      min-height: 170px;
      padding: 18px 14px 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  #instituicoes-representantes .rep-logo {
      width: auto;
      max-width: 85%;
      height: auto;
      display: block;
      margin: 0 auto;
  }

  #instituicoes-representantes .rep-name {
      margin: 10px 0 0;
      font-size: 12px;
      color: #6b7280;
      text-align: center;
  }

  #eixoPanelContent {
      display: none; /* começa escondido até o JS abrir o primeiro */
  }

  .card-header{
      background: #0b4a6e !important;
  }

  @media(max-width: 768px){
      #manifesto-text p{
          text-align: center !important;
      }
  }

  .conteudo-manifesto{
      padding:50px 60px 200px;
  }

  @media(max-width: 768px){
      .conteudo-manifesto{
          padding: 50px 15px 200px;
      }
  }
  @media(max-width: 768px) {
      .padding-bottom-200 {
          padding-bottom: 45px !important;
      }
  }

  @media(min-width: 992px) {
      .eixo-m {
          display: none !important;
      }
  }


  @media(max-width: 480px) {
      .line-p {
          width: 100% !important;
      }
  }

  @media (max-width: 767px) {
      #principios .principios-img {
          object-position: top center !important; /* foca topo */
      }
  }


  @media (max-width: 768px) {
      .page_title { display: none !important; }
      .page_title-mobile { display: block !important; }

      .page_title,
      .page_title-mobile {
          background-image: url(/images/bgg2.jpeg) !important;
      }
  }

  @media (min-width: 769px) {
      .page_title-mobile { display: none !important; }
  }

  @media (max-width: 768px) {
      .page_title-mobile {
          background-size: cover !important;
          background-position: center 20% !important; /* Mulher mais centralizada */
          background-attachment: scroll !important;
      }

  }


  @media(min-width: 769px){
      .w-300{
          width: 300px;
      }
  }

  @media(min-width: 769px){
      .w-200{
          width: 200px;
      }
  }

  @media(min-width: 1200px) {
      .padd{
          padding-top: initial !important;
      }
  }