Histórico da Página

<style>

    #likes-and-labels-container {
    display: none;
  }
  
  #comments-section > div.bottom-comment-panels.comment-panels > div > div > form > div {
    display: none;
  }
  
    /* Início estilo banner */
  
    .compositiondani-banner {
      position: relative;
      min-height: 220px;
      border-radius: 5px;
      margin-bottom: 5px;
      overflow: hidden;
    }
  
    .compositiondani-banner-image {
      background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/capa-com-fundo-e-sem-icone-TDN21.png");
      background-size: cover;
      min-height: inherit;
      width: 100%;
    }
  
    .compositiondani-banner-overlay {
      min-height: inherit;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      pointer-events: none;
    }
  
    .compositiondani-banner-logo-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, -50%);
    }
  
    .compositiondani-banner-logo {
      width: 350px;
      height: 180px;
      background-image: url("https://totvscrm.com/wp-content/uploads/2023/09/logo-com-descricao-totvsgc.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  
    .compositiondani-banner-title {
      margin-bottom: 10px !important;
      padding: 10px !important;
      background: rgba(0, 0, 0, 0.5) !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      font-size: 12px !important;
      line-height: 1.3 !important;
      max-height: 133px !important;
      font-family: "Roboto", sans-serif !important;
      -webkit-line-clamp: 3 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      color: #ffffff !important;
      position: relative !important;
      margin-top: 130px !important;
      border-radius: 10px !important;
    }
  
    .compositiondani-banner-content {
      position: absolute;
      padding: 30px;
      max-width: 60%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      color: white;
      text-align: center;
    }
  
    .custom-header h1 {
      font-size: 16px;
      background-color: rgba(0, 0, 0, 0.6);
      padding: 10px;
      border-radius: 5px;
      margin: 0;
    }
  
    .negrito-materialize {
      font-weight: bold;
    }
  
    .custom-margin-justified {
      margin: 0 20px;
      text-align: justify;
    }
      /* Final estilo banner */
  
      #content.page.view {
    padding-right: 0 !important;
  }
  
   /* impedir vermelho no nav */
  
  #breadcrumb-section > nav {
      background-color: initial !important;
      box-shadow: none !important;
  }
  
  @media only screen and (min-width: 601px) {
      nav, 
      nav .nav-wrapper i, 
      nav a.sidenav-trigger, 
      nav a.sidenav-trigger i {
          height: auto !important;
          line-height: normal !important;
      }
  }
  
  /* final vermelho no nav */
  .hidden-content {
    display: none;
  }
  .toggle-button {
    background-color: #6B48FF; /* cor de fundo do botão */
    color: white; /* cor do texto do botão */
    border: none; /* remove borda padrão */
    padding: 10px 20px; /* espaçamento interno do botão */
    border-radius: 30px; /* cantos arredondados */
    cursor: pointer; /* estilo do cursor ao passar o mouse */
    font-size: 16px; /* tamanho da fonte */
    display: flex; /* para alinhar ícone e texto */
    align-items: center; /* alinha verticalmente o ícone e o texto */
    justify-content: center; /* alinha horizontalmente o ícone e o texto */
  }
  
  .toggle-button .fas {
    margin-right: 10px; /* espaço à direita do ícone */
  }
  
  .toggle-button img {
    height: 38px; /* Ajuste conforme necessário */
    width: auto; /* Mantém a proporção da imagem */
    margin-right: 10px; /* espaço à direita da imagem */
  }
  
  </style>
  
  <header>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/>
  
    <div class="compositiondani-banner">
      <div class="compositiondani-banner-image"></div>
      <div class="compositiondani-banner-overlay"></div>
      <div class="compositiondani-banner-logo-container">
        <div class="compositiondani-banner-logo"></div>
      </div>
      <div class="compositiondani-banner-content">
        <h1 class="compositiondani-banner-title"> 
          CONJUNTO DE CORREÇÕESCORRECCIONES - RELEASE 12.1.2401
  </h1>
  </header>
    </div>
  </div>
  
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
  />
  <link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
  />
  
  
  <!-- Inclua o estilo do tema Monokai -->
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css"/>
  
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  
  
  
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
  <script src="https://kit.fontawesome.com/cf71d43aec.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://kit.fontawesome.com/cf71d43aec.css" crossorigin="anonymous">
  
  <style>
  /* ==============================
    =       CONFIGURAÇÕES GERAIS      =
    =============================== */
  
  * {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  
  body {
  margin: 0;
  padding: 0;
  }
  
  a {
  color: #42526e;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  }
  
  a:hover {
  color: white;
  }
  
  li {  font-size: 14px !important;
  }
  
  h3 {  font-size: 14px !important;
  font-weight: bold;  
  
  }
  
  h1 {  font-size: 13px !important;
  
  
  }
  
  h2 {  font-size: 15px !important;
  font-weight: bold;  
  
  }
  
  td, th {
    padding: 6px;
  }
  
  * p {
    margin-bottom: 0 !important;
  }
  
  /* ==============================
      =        ESTILOS DE TÍTULOS       =
      =============================== */
  
  #title-text {
  display: none !important;
  }
  
  #content > div.page-metadata > div {
    float: none !important;
    line-height: normal !important;
    width: auto !important;
    display: none !important; /* ou outra propriedade de display que você deseja usar */
    margin: 0 !important; /* ou outra propriedade de margin que você deseja usar */
  }
  
  #section2 > ol > li:nth-child(2) > p {
    margin-bottom: 0;
  }
  
  
  
  .wiki-content h1,
  .wiki-content h2 {
  font-family: "Roboto", sans-serif !important;
  font-size: 13px!important;
  
  }
  
  .wiki-content h1 {
  font-size: 13px !important;
  }
  
  .wiki-content h2 {
  font-size: 14px !important;
  color: #42526e !important;
  border-bottom: 2px solid #dfe1e5;
   padding-bottom: 5px;
  font-weight: bold;  
  }
  
  .custom-heading,
  h3.custom-h3 {
  font-size: 16px;
  color: #42526e;
  margin-bottom: 20px;
  }
  
  .custom-h1 {
  color: #feac0e;
  }
  
  .explanation h2 {
  font-weight: bold;
  }
  
  /* ==============================
      =        ESTILOS DE TEXTO         =
      =============================== */
  
  .wiki-content p {
  font-size: 14px !important;
  }
  
  .justificado,
  .custom-justified {
  text-align: justify;
  margin: 10px 0;
  }
  
  /* ==============================
      =       ESTILOS DE LINKS         =
      =============================== */
  
  .wiki-content a,
  .wiki-content a:link,
  .wiki-content a:visited,
  .wiki-content a:focus,
  .wiki-content a:active {
  text-decoration: none;
  color: #42526e;
  font-size: 14px;
  
  
  }
  
  .wiki-content a:hover {
  color: white;
  }
  
  /* ==============================
      =       ESTILOS DE CONTAINER     =
      =============================== */
  
  
  
  .custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
  }
  
  .faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  }
  
  /* ==============================
      =       ESTILOS DE CARDS         =
      =============================== */
  
  .card {
  border: 2px solid #9aa1ad;
  padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #f4f5f7;
  color: #42526e;
  overflow-x: hidden;
   top: 0;
  
  
  }
  
  
  
  /* ==============================
      =       ESTILOS DE TABS          =
      =============================== */
  
  .tabs {
  background-color: #dfe1e5;
  }
  
  .tabs .tab a {
  color: rgb(66, 82, 110);
  }
  
  .tabs .tab a:hover,
  .tabs .tab a.active,
  .tabs .tab a:focus.active {
  color: #6B48FF;
  background-color: transparent;
  }
  
  .tabs .tab a:focus {
  background-color: rgba(82, 97, 232, 0.25);
  }
  
  .tabs .tab.disabled a,
  .tabs .tab.disabled a:hover {
  color: rgba(16, 148, 184, 0.24);
  }
  
  .tabs .indicator {
  background-color: #6B48FF;
  }
  
  .tab-content {
   gap: 0;
  padding: 10px;
  }
  
  .tab-content pre {
  max-width: 100%;
  overflow-x: hidden;
  }
  
  /* ==============================
      =        ESTILOS DE ÍCONES        =
      =============================== */
  
  .icon-list,
  .icon {
  padding-left: 0;
  list-style-type: none;
  }
  
  .icon {
  display: inline-block;
  width: 24px;
  vertical-align: middle;
  margin-right: 45px;
  position: relative;
  left: -25px;
  }
  
  .item .label i {
  margin-right: 10px;
  }
  
  .label b {
  color: #42526e;
  }
  
  td th {
  color: #42526e;
  }
  
  /* ==============================
      =    ESTILOS DE COMPONENTES      =
      =============================== */
  
  .collapsible,
  .collapsible-header,
  .collapsible-body {
  box-shadow: none !important;
  }
  
  .faq-question {
  font-weight: bold;
  margin-bottom: 5px;
  }
  
  .faq-answer {
  margin-bottom: 20px;
  }
  
  .custom-list {
  padding-left: 0;
  margin-left: 1.5em;
  }
  
  .custom-list li {
  position: relative;
  padding-left: 1em;
  }
  
  ul.custom-list {
  padding-left: 10px;
  }
  
  ul.custom-list li {
  position: relative;
  list-style-type: disc;
  padding-left: 30px;
  margin-bottom: 10px;
  }
  
  .item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  }
  
  .item:last-child {
  border-bottom: none;
  }
  
  .item .label {
  flex: 1;
  font-weight: bold;
  }
  
  .item .value {
  flex: 1;
  text-align: right;
  }
  .item {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  }
  
  .item:last-child {
  border-bottom: none;
  }
  
  /* Estilos para o label */
  .label {
  font-weight: bold;
  display: flex;
  align-items: center;
  }
  
  .item .label i {
  margin-right: 10px; /* Adiciona espaço depois dos ícones */
  }
  
  /* ==============================
      =     ESTILOS DE IMAGENS         =
      =============================== */
  
  .imagem-responsiva {
  max-width: 100%;
  height: auto;
  }
  
  .custom-header-bg img {
  width: 100%;
  height: auto;
  display: block;
  }
  
  /* ==============================
      =     ESTILOS DE VÍDEO           =
      =============================== */
  
  #youtube-video-container iframe {
  width: 100%;
  height: auto;
  display: block;
  }
  
  .video-container {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .ytp-cued-thumbnail-overlay-image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  }
  
  /* ==============================
      =    OUTROS ESTILOS PERSONALIZADOS =
      =============================== */
  .custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
  }
  
  .custom-heading {
  font-size: 16px;
  color: #42526e;
  margin: 10px 0;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 5px;
  font-weight: bold;  
  }
  
  #indice {
  border-radius: 5px;
  padding: 20px;
  max-width: 100%;
  overflow: hidden;
  }
  
  #indice h2 {
  text-align: center;
  margin-bottom: 16px;
  }
  
  #indice ul {
  list-style-type: none;
  padding-left: 0;
  }
  
  #indice li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.1s ease;
  }
  
  #indice li:last-child {
  border-bottom: none;
  }
  
  #indice li:hover {
  background-color: #6B48FF;
  color: white;
  }
  
  /* ==============================
  =      ESTILOS DE TABELAS        =
  ============================== */
  .custom-grey {
  background-color: #ffffff;
  }
  
  .custom-grey th,
  .custom-grey td {
  border: 1px solid #362194;
  padding: 10px;
  color:#362194
  }
  
  .custom-grey tr:nth-child(even) td {
  background-color: #e6e0f7;
  }
  
  .custom-grey tr:nth-child(odd) td {
  background-color: #f4f5f7;
  }
  
  .custom-grey th {
  color: #fff;
  background-color: #443391;
  }
  
  
  
  .custom-grey td {
  font-size: 13px;
  }
  
  .custom-grey tr:nth-child(odd) {
  background-color: #e4e4e6;
  }
  
  .custom-grey tr:nth-child(even) {
  background-color: #dfdfdf;
  }
  
  .custom-alert-warning {
  background-color: #fdf1dc; /* ou qualquer outra cor que preferir */
  color: #5c4225; /* cor do texto */
  border: 1px solid #d6800f; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
  
  }
  
  .custom-alert-warning .fas {
  color: #5c4225; /* cor do ícone no alerta de aviso */
  margin-right: 10px; /* espaço extra entre o ícone e o texto */
  }
  
  .custom-alert-danger {
  background-color: #ffe7ec; /* ou qualquer outra cor que preferir */
  color: #9e1d3b; /* cor do texto */
  border: 1px solid #eb7893; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
  
  }
  
  .custom-alert-danger .fas {
  color: #f34b72; /* cor do ícone no alerta de perigo */
  margin-right: 10px; /* espaço extra entre o ícone e o texto */
  }
  
  
  .alert-secondary-custom {
    background-color: #F2EEFF; /* Cor de fundo do alerta */
    color: #3217a7; /* Cor do texto */
    border: 1px solid #9475f7; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
  }
  
  .alert-secondary-custom .fas {
    color: #6B48FF; /* Cor dos ícones FontAwesome */
    margin-right: 10px; /* Espaço extra entre o ícone e o texto */
  }
  
  
  /* ========== FIM DO ESTILO ========= */
  
  </style>
  
  
     
  
  
  
  
  
  <!-- Tabs e conteúdo das guias -->
  <div class="card">
    <ul class="tabs">
      <li class="tab col s4"><a href="#tab1">DETALHES>DETALLES FUNCIONAIS<FUNCIONALES</a></li>
  
    </ul>
     <!-- Tab Content -->
  
      <div id="tab1" class="col s12">
        <div class="tab-content">
          <div style="background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;">
            <section id="section1" style="margin-top: 40px;">
               <!-- Tab 70 conteúdo -->
  <!-- Segundo Card -->
  
    <!-- Primeiro Card -->
      <!-- Primeiro Card -->
  <div class="card">
    <div class="item">
      <span class="label">
        <table border="1">
          <tr>
              <td><i class="fas fa-tags"></i> <b>Produto<b>Producto:</b></td>
              <td>Gestão<td>Gestión de Clientes<clientes</td>
          </tr>
          <tr>
              <td><i class="fas fa-link"></i> <b>Linha<b>Línea de Produtoproducto:</b></td>
              <td>TOTVS CRM</td>
          </tr>
          <tr>
              <td><i class="fas fa-chart-pie"></i> <b>Segmento:</b></td>
              <td>Cross Segmentos</td>
          </tr>
          <tr>
              <td><i class="fas fa-desktop"></i> <b>Módulo:</b></td>
              <td>Geral<<td>General</td>
          </tr>
          <tr>
              <td><i class="fas fa-globe"></i> <b>Aplicação<b>Aplicación:</b></td>
              <td>Web/Mobile</td>
          </tr>
          <tr>
              <td><i class="fas fa-hashtag"></i> <b>Identificador:</b></td>
              <td>
                
                DTCRMSC-3172 - DTCRMSC-3246</td>
          </tr>
      </table>
      </span>
    </div>
    </div>
  
    <br>
    
    <button class="toggle-button">
      <img src="https://totvscrm.com/wp-content/uploads/2024/01/Icones-TCRM-GCatividades.png" alt="ATIVIDADES Icon">   ATIVIDADESACTIVIDADES
    </button>
  
    
      <br>
      
    <h2 class="custom-heading">
      <i class="fas fa-bug"></i>&nbsp &nbsp INCONSISTÊNCIAINCONSISTENCIA 
    </h2>
    <p class="justificado">
      <ol>
        <li><strong>Erro<li><strong>Error aoal Clonarclonar Atividades<actividades</strong>: UsuáriosUsuarios enfrentavamenfrentaban problemas aoal tentarintentar clonar atividadesactividades que tinhamtenían suasu origemorigen deletadaborrado.</li>

    </ol>
      
  
    </p>
    <br>
  
  <!-- ... (seu conteúdo existente) ... -->
  
               <h2 class="custom-heading">
                <i class="fas fa-screwdriver-wrench"></i> &nbsp CORREÇÃOCORRECCIÓN
            </h2>
           
            <ol>
              <li><strong>Correção<li><strong>Corrección aoal Clonarclonar Atividades<actividades</strong>:Ajustes noen el sistema para permitir ael clonagemclonaje de atividadesactividades mesmoincluso quandocuando ael origemorigen foifue deletadaborrado, evitando erroserrores.</li>

          </ol>              
              
                
         
  
     
              
  
            
       
        <br>
  
        <button class="toggle-button">
          <img src="https://totvscrm.com/wp-content/uploads/2024/01/Icones-TCRM-GCSTUDIO.png" alt="Studio Icon"> ANALYTICS STUDIO
        </button>
        
        <p class="justificado">
        <br>
        <h2 class="custom-heading">
          <i class="fas fa-bug"></i>&nbsp &nbsp INCONSISTÊNCIAINCONSISTENCIA 
        </h2>
        <p class="justificado">
  
        <ol>
          <li><strong>Componente dodel Workplace Ativo<activo</strong>: OEl componente permaneciapermanecía ativoactivo mesmoincluso quandocuando ala integraçãointegración comcon oel GoodData estavaestaba desativadadesactivada.</li>
      </ol>
  
      <h2 class="custom-heading">
        <i class="fas fa-screwdriver-wrench"></i> &nbsp CORREÇÃOCORRECCIÓN
    </h2>
   
    <ol>
      <li><strong>Ocultação<li><strong>Ocultar de Componente<componente</strong>: Se Implementadoimplementó umun ajuste para ocultar automaticamenteautomáticamente oel componente quandocuando ala integraçãointegración comcon GoodData nãono estiverestuviera ativaactiva, assegurandogarantizando que oel comportamentocomportamiento dodel sistema estejaesté alinhadoalineado comcon aslas configuraçõesconfiguraciones ativasactivas.</li>
  </ol>
  
  
  
  <br>
  
  
  <button class="toggle-button">
    <img src="https://totvscrm.com/wp-content/uploads/2023/11/vendaIcones-TCRM-GC.png" alt="Agenda Icon">  VENDASVENTAS
  </button>
  
  <p class="justificado">
  <br>
  <h2 class="custom-heading">
    <i class="fas fa-bug"></i>&nbsp &nbsp INCONSISTÊNCIAINCONSISTENCIA 
  </h2>
  <p class="justificado">
  
  <ol>
    <li> <strong>Desalineamiento <strong>Desalinhamentoen noel Cadastroregistro de Descontosdescuentos (ErroError de Interfaceinterfaz)</strong>: Los Usuáriosusuarios encontravamencontraban campos desalinhadosdesalineados aoal tentarintentar cadastrarregistrar políticas de descontodescuento
        
      </li> <p>
  </ol>
  <h2 class="custom-heading">
    <i class="fas fa-screwdriver-wrench"></i> &nbsp CORREÇÃOCORRECCIÓN
  </h2>
  
  <ol>
  <li><strong>Melhoria<li><strong>Mejora en nala InterfaceInterfaz de Cadastro<registro</strong>: RealizadasSe alterações na interfacerealizaron modificaciones en la interfaz para alinharalinear corretamentecorrectamente oslos campos, proporcionando umauna experiênciaexperiencia de usuáriousuerio maismás agradávelagradable.
    </li>
  </ol>
  
  <br>
  <button class="toggle-button">
    <img src="https://totvscrm.com/wp-content/uploads/2023/10/[email protected]" alt="Planejamento Icon">  PLANEJAMENTOPLANIFICACIÓN
  </button>
  
  
  <p class="justificado">
  <br>
  <h2 class="custom-heading">
    <i class="fas fa-bug"></i>&nbsp &nbsp INCONSISTÊNCIAINCONSISTENCIA 
  </h2>
  <p class="justificado">
  
  <ol>    <li><strong>Problemas aoal Importarimportar CSVsCSV:</strong> Los Usuáriosusuarios enfrentavamenfrentaban lentidãolentitud ey dificuldadesdificultades aoal importar arquivosarchivos CSV comcon umun grandegran número de linhaslíneas, especialmente quandocuando essesestos arquivosarchivos continhamcontenían erroserrores.</li>
  </ol>
  <h2 class="custom-heading">
    <i class="fas fa-screwdriver-wrench"></i> &nbsp CORREÇÃOCORRECCIÓN
  </h2>
  
  <ol>
    <li><strong>Optimización <li><strong>Otimizaçãoen noel Processamentoprocesamiento de CSVsCSV:</strong> Implementadas melhorias no processamento desses arquivos Se implementaron mejoras en el procesamiento de estos archivos para assegurargarantizar umauna respostarespuesta maismás rápida ey eficiente. Esta otimizaçãooptimización minimiza aslas dificuldadesdificultades encontradas, mesmoincluso emen casos de arquivosarchivos CSV volumososvoluminosos ey comcon erroserrores.</li>
  </ol>
    
  
  <br>
  
  <br>
  
  </section>
  </div>
        </div>
         
          
            <!-- Tab 30 fim -->
          
            <!-- Tab 30 fim -->
          
          </div>
        </div>
    
  
  
    
  
    
            
                            <!-- Primeira coluna do conteúdo da guia 2 -->
  
            
            </div>
             
      </div>
  </div>
  
    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
  // Inicialização das tabs
  document.addEventListener("DOMContentLoaded", function () {
    var tabs = document.querySelectorAll(".tabs");
    M.Tabs.init(tabs);
  });
  </script>
  
  <script>
  const items = document.querySelectorAll("#indice li");
  
  items.forEach(item => {
      item.addEventListener('click', (e) => {
          const targetId = e.target.getAttribute('data-target');
          const targetElement = document.getElementById(targetId);
          window.scrollTo({
              top: targetElement.offsetTop - 10,
              behavior: "smooth"
          });
      });
  });
  </script>
  
  <script src="https://kit.fontawesome.com/7fd5a54246.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> 
  
  <script>hljs.highlightAll();</script>
  
  
  
  <script src="scripts.js"></script>
  
  <script>
  document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.collapsible');
      var instances = M.Collapsible.init(elems);
  });
  </script>
  
  <!-- ... (conteudo video) ... -->
  <script src="https://www.youtube.com/iframe_api"></script>
  
  <script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '315',
      width: '560',
      videoId: 'FvsuBOvyyro',
      playerVars: {
        start: 1238, // 20:38 em segundos
        end: 1356   // 22:36 em segundos
      }
    });
  }
  </script>
  
  
  <script>
    function toggleContent(contentId) {
      const content = document.getElementById(contentId);
      const buttons = document.querySelectorAll('.toggle-button');
      let icon;
      
      buttons.forEach(btn => {
        if (btn.getAttribute('onclick').includes(contentId)) {
          icon = btn.querySelector('.fas');
        }
      });
    
      if (content.style.display === 'none' || content.style.display === '') {
        content.style.display = 'block';
        icon.classList.remove('fa-expand-arrows-alt');
        icon.classList.add('fa-compress-arrows-alt');
      } else {
        content.style.display = 'none';
        icon.classList.remove('fa-compress-arrows-alt');
        icon.classList.add('fa-expand-arrows-alt');
      }
    }
    </script>