/* ========= Variáveis de cor ========= */
    :root {
      --rosa: #E82E89;
      --amarelo: #FAC710;
      --branco: #FFFFFF;
      --cinza-escuro: #333333;
      --salmao: #FC8F7C;
      --preto: #000000;
    }

    .topo-a3 {
    background-image: url('../img/bnn-workshops.png');
    background-size: cover;
    background-position: center;
}


.title-page {
    color: #FFF;
    text-align: center;
    font-family: Roboto;
    font-size: 128px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    
}

.data-page {
    color: #FAC710;
    text-align: center;
    font-family: Roboto;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 36.48px;
    text-transform: uppercase;
}

.subtitle-page {
    color: #FFF;
    text-align: center;
    font-family: Roboto;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.1;
    text-transform: capitalize;
}


    .bg-amarelo {
      background-color: var(--amarelo);
    }

    .bg-salmao {
      background-color: var(--salmao);
    }

    /* ========= Container de largura fixa ========= */
    .container-fluid {
      max-width: 1920px;
      margin: 0 auto;
    }

    /* ========= Tipografia responsiva ========= */


    .box-ws {
      border-top: 3px solid #000;
      border-bottom: 3px solid #000;
      margin-left: 25px;
      margin-right: 25px;
    }



    /* ========= Seção Esquerda ========= */
    .secao-esquerda {
      position: relative;
      padding: 4rem 3rem;
      font-family: "Roboto";
    }

    .secao-esquerda .texto-vertical {
      /* apagar top, left e translateY */
      position: static;
      /* ou remova completamente */
      transform: rotate(-90deg);
      transform-origin: center center;
      font-size: 140px;
      font-weight: 700;
      opacity: 0.15;
      white-space: nowrap;
      line-height: 1;
    }


    .secao-esquerda .titulo-principal {
      font-size: 44px;
      font-weight: 500;
      line-height: 1.2;

    }

    .secao-esquerda .titulo-principal span {
      font-weight: 900;
    }

    .secao-esquerda .titulo-principal .text-warning {
      color: var(--amarelo) !important;
    }

    .secao-esquerda .subtitulo {
      margin-top: 48px;
      font-size: 24px;
      font-weight: 700;
      color: var(--amarelo);
      text-transform: uppercase;
    }

    .secao-esquerda .subtitulo-menor {
      font-size: 20px;
      font-weight: 700;
      color: var(--amarelo);
      line-height: 2;
    }

    .secao-esquerda p {
      font-size: 19px;
      line-height: 1.5;
      margin-top: 10px;
      text-align: justify;
      margin-bottom: 25px;
    }

    .secao-esquerda p strong {
      color: var(--branco);
    }

    /* ========= Seção Direita ========= */
    .secao-direita {
      background-color: var(--branco);
      color: var(--cinza-escuro);
      padding: 36px 54px 18px;
      font-family: "Roboto";
    }

    .secao-direita .box-instrutor {
      position: relative;
    }

    .secao-direita .instrutor img {
      width: 8rem;
      height: 8rem;
      object-fit: cover;
    }

    .secao-direita .nome-instrutor {
      font-size: 24px;
      font-weight: 400;
      width: 95%;
    }

    .secao-direita .nome-instrutor span {
      font-weight: 700;
      color: var(--rosa)
    }

    .btn-rosa {
      border: 2px solid var(--rosa);
      color: var(--rosa);
      font-weight: 700;
      padding: 9px 27px;
      border-radius: 30px;
      transition: all 0.3s;
      font-family: "Montserrat";
      letter-spacing: 2.88px;
      font-size: 24px;
      line-height: 0.9;
    }

    .btn-rosa:hover {
      background-color: var(--rosa);
      color: var(--branco);
    }

    .titulo-secao {
      font-size: 24px;
      font-weight: 700;
      color: var(--rosa);
      margin-bottom: 1rem;
      text-transform: uppercase;
      z-index: 99;
      position: relative;
    }

    .secao-direita p {
      font-size: 20px;
      line-height: 1.5;
    }

    .btn-inscrever {
      background-color: var(--rosa);
      color: var(--branco);
      font-size: 24px;
      padding: 13.4px 38px;
      border-radius: 2rem;
      float: right;
      margin-top: 2rem;
      line-height: 0.6;
      letter-spacing: 2px;
      font-family: Montserrat;
      font-weight: 700;
      text-decoration: none;
    }

    hr {
      border-top: 3px solid #000;
      margin: 30px auto;
      opacity: 1;
      width: 96%;
    }

    .flag-instrutor {
      position: absolute;
      right: 15px;
      width: 50px;
      bottom: 0px;
    }

    .horario-ws {
      font-weight: 700;
    }

    .local-ws span {
      color: var(--rosa);
      font-weight: 700;
    }

    .bgimg-rosa {
      background-color: var(--rosa);
      color: var(--branco);
      border-radius: 50%;
      padding: 0 0 0 10px;
    }

    .bg-rosa {
      background-color: var(--rosa);
      color: var(--branco);
    }

    .bg-amarelo {
      background-color: var(--amarelo);
      color: var(--preto);
    }

    .bg-amarelo .titulo-principal {
      color: var(--branco);
    }

    .bg-amarelo .subtitulo,
    .bg-amarelo .subtitulo-menor {
      color: var(--rosa);
    }

    .bg-amarelo p strong {
      color: var(--preto);
    }

    .bg-amarelo .titulo-principal .text-warning {
      color: var(--rosa) !important;
    }

    .bg-amarelo .texto-vertical {
      color: #FFF;
    }

    .bg-salmao {
      background-color: var(--salmao);
      color: var(--branco);
    }

    .bg-salmao .titulo-principal {
      color: var(--branco);
    }

    .bg-salmao .subtitulo,
    .bg-salmao .subtitulo-menor {
      color: var(--preto);
    }

    .bg-salmao .subtitulo-menor span {
      color: var(--branco);
      font-weight: 400;
    }

    .bg-salmao p strong {
      color: var(--branco) !important;
    }

    .bg-salmao .titulo-principal .text-warning {
      color: var(--preto) !important;
    }

    .mtp-5 {
      margin-top: 48px;
    }

    .logotipo-case-texto {
      height: 90px;
    }

    .logotipo-case {
      height: 120px;
      margin-top: -20px;
    }


    .flag-instrutor-modal {
      position: absolute;
      right: 15px;
      width: 30px;
      bottom: 0px;
    }

    .box-modal {
      border: 10px solid var(--rosa);
      border-radius: 30px;
      padding: 10px;
      background-color: var(--branco);
    }


.modal-body {
    background-image: unset;
}



    .custom-close-btn {
      background-image: none;
      background-color: var(--rosa);
      border-radius: 50%;
      width: 33px;
      height: 33px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 23px;
      border: none;
      box-shadow: none;
      cursor: pointer;
      padding: 0;
      font-family: Montserrat;
      font-weight: 900;
      position: absolute;
      top: 2%;
      right: 2%;
    }

    .w-instrutor-modal {
      width: 95%;
    }

    .w-instrutor-modal span {
      color: var(--rosa) !important;
      font-weight: 900;
    }

    .btn-fechar-custom {
      background-color: var(--rosa);
      border-radius: 20px;
      border: 0;
    }

    .modal-body {
      /* força overflow se quiser */
      overflow-y: auto;
    }

    /* largura da barra */
    .modal-body::-webkit-scrollbar {
      width: 8px;
    }

    /* fundo do trilho */
    .modal-body::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }

    /* “polegar” (a parte que você arrasta) */
    .modal-body::-webkit-scrollbar-thumb {
      background-color: #ff66b2;
      /* rosa */
      border-radius: 4px;
      border: 2px solid #f1f1f1;
      /* cria um espaçamento interno */
    }

    /* opcional: canto onde se encontram hor/ver */
    .modal-body::-webkit-scrollbar-corner {
      background: transparent;
    }

    .modal-body {
      scrollbar-width: thin;
      /* “auto”, “thin” ou “none” */
      scrollbar-color: #ff66b2 #f1f1f1;
      /* polegar e trilho */
    }

.modal-header .nome-instrutor{
  font-size: 24px;
}

.modal-body p{
  font-size: 18px;
}

    @media (max-width: 575.98px) {
        .title-page {
            font-size: 50px;
        }

        .data-page {
            font-size: 25px;
            letter-spacing: 15px;
        }

        .subtitle-page {
            font-size: 16px;
        }
        
        
        .box-ws {
        margin-left: 15px;
        margin-right: 15px;
      }

      .secao-esquerda .texto-vertical {
        font-size: 14vw;
      }

      .secao-esquerda {
        padding: 3rem 2rem;
      }

      .secao-esquerda .titulo-principal {
        font-size: 32px;
      }

      .secao-esquerda .subtitulo {
        font-size: 20px;
        margin-top: 36px;
      }

      .secao-esquerda .subtitulo-menor {
        line-height: 1.1;
      }

      .secao-esquerda p {
        font-size: 16px;
        margin-top: 8px;
        margin-bottom: 16px;
      }

      .secao-direita {
        padding: 36px 15px 18px;
      }

      .secao-direita .box-instrutor {
        position: relative;
        margin: 10px auto 30px;
      }

      .secao-direita .nome-instrutor {
        font-size: 20px;
        text-align: center;
        width: 80%;
        margin: 10px auto 30px;
      }

      .secao-direita p {
        font-size: 18px;
      }

      .btn-rosa {
        font-size: 20px;
        padding: 0.5rem 1rem;
        margin: auto;
      }

      .w-instrutor-modal {
        width: 90%;
        margin: 20px auto;
        text-align: center;
      }
    .modal-header .nome-instrutor{
  font-size: 20px;
}

.modal-body p{
  font-size: 15px;
}
    
    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        .title-page {
            font-size: 80px;
        }

        .data-page {
            font-size: 44px;
            letter-spacing: 20px;
        }

        .subtitle-page {
            font-size: 22px;
        }


        .title-page {
            font-size: 80px;
        }

        .data-page {
            font-size: 44px;
            letter-spacing: 20px;
        }

        .subtitle-page {
            font-size: 22px;
        }
        
        .box-ws {
        margin-left: 2.604vw;
        margin-right: 2.604vw;
      }

      .secao-esquerda .texto-vertical {
        font-size: 14vw;
      }

      .secao-esquerda {
        padding: 3.5rem 2.5rem;
      }

      .secao-esquerda .titulo-principal {
        font-size: 4.688vw;
      }

      .secao-esquerda .subtitulo {
        font-size: 2.865vw;
        margin-top: 5.469vw;
      }

      .secao-esquerda p {
        font-size: 2.214vw;
        margin-top: 1.172vw;
        margin-bottom: 2.604vw;
      }

      .secao-direita {
        padding: 36px 15px 18px;
      }

      .secao-direita .nome-instrutor {
        font-size: 2.865vw;
      }

      .secao-direita p {
        font-size: 2.474vw;
      }

      .btn-rosa {
        font-size: 2.865vw;
        padding: 0.5rem 1.25rem;
      }

          .modal-header .nome-instrutor{
  font-size: 20px;
}

.modal-body p{
  font-size: 15px;
}

    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .title-page {
            font-size: 80px;
        }

        .data-page {
            font-size: 44px;
            letter-spacing: 20px;
        }

        .subtitle-page {
            font-size: 22px;
        }
        
        .box-ws {
        margin-left: 22px;
        margin-right: 22px;
      }

      .secao-esquerda {
        padding: 4rem 3rem;
      }

      .secao-esquerda .titulo-principal {
        font-size: 40px;
      }

      .secao-esquerda .subtitulo {
        font-size: 24px;
        margin-top: 45px;
      }

      .secao-esquerda p {
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 22px;
      }

      .secao-direita .nome-instrutor {
        font-size: 24px;
      }

      .secao-direita p {
        font-size: 20px;
      }

      .btn-rosa {
        font-size: 24px;
        padding: 0.5rem 1.5rem;
      }

                .modal-header .nome-instrutor{
  font-size: 20px;
}

.modal-body p{
  font-size: 15px;
}
    }

    @media (min-width: 992px) and (max-width: 1919.98px) {

        .title-page {
            font-size: 80px;
        }

        .data-page {
            font-size: 44px;
            letter-spacing: 20px;
        }

        .subtitle-page {
            font-size: 22px;
        }

      .mtp-5 {
        margin-top: 2vw;
      }


      .box-ws {
        margin-left: 1.3vw;
        /* 25px → 25/1920*100 = 1.3vw */
        margin-right: 1.3vw;
        border-top-width: 0.16vw;
        /* 3px → 3/1920*100 = 0.16vw */
        border-bottom-width: 0.16vw;
      }

      .secao-esquerda {
        padding: 4rem 3rem;
        /* mantém rem */
      }

      .secao-esquerda .texto-vertical {
        font-size: 7.3vw;
        /* 140px → 140/1920*100 = 7.3vw */
      }

      .secao-esquerda .titulo-principal {
        font-size: 2.3vw;
        /* 44px → 44/1920*100 = 2.3vw */
        line-height: 1.2;
      }

      .secao-esquerda .subtitulo {
        font-size: 1.25vw;
        /* 24px → 24/1920*100 = 1.25vw */
        margin-top: 2.5vw;
        /* 48px → 2.5vw */
      }

      .secao-esquerda .subtitulo-menor {
        font-size: 1.04vw;
        /* 20px → 1.04vw */
        line-height: 2;
      }

      .secao-esquerda p {
        font-size: 0.99vw;
        /* 19px → 0.99vw */
        margin-top: 0.52vw;
        /* 10px → 0.52vw */
        margin-bottom: 1.3vw;
        /* 25px → 1.3vw */
      }

      .secao-direita .instrutor img {
        width: 8rem;
        height: 8rem;
      }

      .secao-direita .nome-instrutor {
        font-size: 1.25vw;
        /* 24px → 1.25vw */
      }


      .secao-direita .titulo-secao {
        font-size: 1.25vw;
      }

      .secao-direita .horario-ws {
        font-size: 1.25vw;
      }

      .secao-direita p {
        font-size: 1.04vw;
        /* 20px → 1.04vw */
      }

      .btn-rosa {
        border-width: 0.1vw;
        /* 2px → 0.1vw */
        padding: 0.5vw 2vw;
        font-size: 1.25vw;
        /* 24px → 1.25vw */
        letter-spacing: 0.15vw;
        /* 2.88px → 0.15vw */
        border-radius: 1.56vw;
        /* 30px → 1.56vw */
      }

      .btn-inscrever {
        font-size: 1.3vw;
        /* 20px → 1.04vw */
        padding: 0.7vw 2vw;
        /* mantém rem */
        border-radius: 2vw;
        /* 2rem ≈ 2vw */
      }

      hr {
        border-top-width: 0.16vw;
        /* 3px → 0.16vw */
        margin: 1.56vw auto;
        /* 30px → 1.56vw */
        width: 96%;
      }

      .flag-instrutor {
        width: 2.6vw;
        /* 50px → 2.6vw */
        right: 0.8vw;
        /* 15px → 0.8vw */
      }

      .logotipo-case-texto {
        height: 90px;
      }

      .logotipo-case {
        height: 120px;
        margin-top: -20px;
      }

    }