Histórico da Página

<div class="FullWidthCarouselstyles__DraggableContainer-sc-16jty68-1 fwSgiY inherited-styles-for-exported-element">
  <div class="grid__Container-sc-p40pqe-0 ctsbPE">
    <div style="margin-left: -16px; cursor: grab; transition: margin-left 0.6s ease 0s;" class="grid__Row-sc-p40pqe-1 oFuOf">
      <div class="grid__StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="2xIZne1VBy81MhQlXA90bn" draggable="false" href="https://tdn.totvs.com/display/TCGDC/3+-+Release+-12.1.2503" class="rogGT">
          <div color="rgba(9, 30, 66, 1)" class="cELStS"></div>
          <div class="fzULwq">
            <h3 class="titlegch3">RELEASE</h3>
            <p class="muted"> </p>
            <p class="pmodelTex">Explore as versões do TOTVS CRM - GC: documentos detalhados destacam as atualizações, melhorias e inovações introduzidas. </p>
          </div>
        </a></div>
<!-- Separação bloco -->
             
      <div class="grid__StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="3Vmbzdd1S76GhVxNtDs2Kz" draggable="false" href="https://tdn.totvs.com/display/TCGDC/Roadmap+do+Produto" class="rogGT">
          <div color="rgba(9, 30, 66, 1)" class="cELStS"></div>
          <div class="fzULwq">
            <h3 class="titlegch3">ROADMAP</h3>
            <p class="muted"> </p>
            <p class="pmodelTex">Confira nosso roadmap e prepare-se para as inovações que vão elevar sua experiência com o TOTVS CRM. </p>
          </div>
        </a></div>
      <div class="cJzWlo"><a data-testid="individual-template" data-uuid="1Tqt54zuPmOckSi6MKDPiy" draggable="false" href="https://tdn.totvs.com/pages/viewpage.action?pageId=636959623" class="rogGT">
          <div color="rgba(9, 30, 66, 1)" class="cELStS"></div>
          <div class="fzULwq">
            <h3 class="titlegch3">CALENDÁRIO</h3>
            <p class="pmodelTex">Consulte o Calendário de Atualizações para ficar a par das datas importantes e das atualizações.</p>
          </div>
        </a></div>

<!-- Separação bloco -->

    </div>
  </div>
</div>

<style>
  *, ::after, ::before {
    box-sizing: border-box;
  }

  .wiki-content h3 {
  margin: 0 !important;
}

  .inherited-styles-for-exported-element {
    color: #091e42;
    font-family: "Roboto", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
  }

  .titlegch3 {
    color: #494440;
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: 900;
      line-height: 1.2;
  margin-bottom: .5rem;
  margin-top: 0;
}


.pmodelTex {
font-family: Lato, sans-serif;
font-size: 16px;
color: #494440
}
  @media (min-width: 768px) {
    .titlegch3 {
      font-size: 1.5rem;
      line-height: 1.33333;
    }
  }

  .ctsbPE {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
  }

  @media (min-width: 576px) {
    .ctsbPE {
      max-width: 540px;
    }
  }

  @media (min-width: 768px) {
    .ctsbPE {
      max-width: 720px;
    }
  }

  @media (min-width: 992px) {
    .ctsbPE {
      max-width: 960px;
    }
  }

  @media (min-width: 1200px) {
    .ctsbPE {
      max-width: 1140px;
    }
  }

  .oFuOf {
    -webkit-box-align: stretch;
    -webkit-box-pack: start;
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .cJzWlo {
    display: block;
    flex: 1 1 auto;
    padding: 1rem;
    position: relative;
    scroll-margin-top: 72px;
    text-align: center;
    width: 83.3333%;
    margin: 10px;
    max-width: 350px;
  }

  @media (min-width: 992px) {
    .cJzWlo {
      display: block;
      flex: 0 0 auto;
      width: 33.3333%;
    }
  }

  .fwSgiY {
    overflow-x: hidden;
  }

  .rogGT {
    border-radius: .5rem;
    box-shadow: rgba(9, 30, 66, .15) 0 .1rem 1rem 0;
    color: inherit !important;
    display: block;
    height: 100%;
    margin: 0;
    overflow: hidden;
    text-align: left;
    text-decoration: none !important;
    text-wrap: wrap;
    user-select: none;
    white-space-collapse: collapse;
    width: auto;
    border: 1px solid #ccccc;
  }

  .hNWOlT {
    background-color: #6B48FF;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .hNWOlT {
      height: 3rem;
    }
  }

  .grqWLk {
    background-color: #0ADBE3;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .grqWLk {
      height: 3rem;
    }
  }

  .cELStS {
    background-color: #EEEEEE;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .cELStS {
      height: 3rem;
    }
  }

  .bxLzQJ {
    background-color: #ffc400;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .bxLzQJ {
      height: 3rem;
    }
  }

  .lnQKVZ {
    background-color: #00c7e5;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .lnQKVZ {
      height: 3rem;
    }
  }

  .kgNiiW {
    background-color: #f99cdb;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .kgNiiW {
      height: 3rem;
    }
  }

  .bgvUWO, .eUOZOn, .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
    background-color: #fff;
    background-image: url(https://totvscrm.com/wp-content/uploads/2024/02/agile3.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 3px solid #fff;
    border-radius: .5rem;
    height: 3rem;
    left: 1rem;
    position: absolute;
    top: -1.5rem;
    width: 3rem;
  }

  .eUOZOn, .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
    background-image: url(https://totvscrm.com/wp-content/uploads/2024/02/roadmap3.png);
  }

  .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
    background-image: url(https://totvscrm.com/wp-content/uploads/2024/02/data3.png);
  }

  .gAonen, .iRWtjz, .kIYtDi {
    background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/4Mgm4SG6P6bD673rMtNpXP/9f8798510480b30d296550be747b9624/icon-content-checklists_2x.png);
  }

  .gAonen, .kIYtDi {
    background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/x2AI5JZPTDVY7BxKbvClM/dc65b20bf0914caa72bcaf2ddbb05d9b/UseCasesBrainstorming.svg);
  }

  .gAonen {
    background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/5rv4eidOfMf1vdEzVpHNlA/bb102f380f9cfd3d1761858d8910963d/icon-object-book_2x.png);
  }

  .fzULwq {
    padding: 2.25rem 1.5rem 1.5rem;
    position: relative;
  }

  body :focus {
    outline: 2px solid #091e42;
  }

  a:not([href]), a:not([href]):hover {
    color: inherit;
  }

  .fzULwq p {
    font-size: 15px;
    margin: 0;
  }

  .fzULwq p+p {
    margin-top: .5rem;
  }

  .cJzWlo>:last-child, .cJzWlo>:last-child>:last-child, .cJzWlo>:last-child>:last-child>:last-child {
    margin-bottom: 0;
  }

  .fwSgiY .grid__Row-sc-p40pqe-1 {
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    width: calc(100% + 2rem);
  }

  .rogGT:focus, .rogGT:hover {
    box-shadow: rgba(9, 30, 66, .25) 0 .5rem 1rem 0;
    color: inherit !important;
     text-decoration: none !important;
  }

  .fzULwq p.muted {
    color: #5e6c84;
  }

  body :focus:not(:focus-visible) {
    outline: 0 !important;
  }
</style>

<!-- Adicione este link para o Font Awesome -->  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
 <style>
  /* Seu CSS existente vai aqui... */
  body {
  background: #eee;
  /* This is just a helper in case the element has a transparent background or white colors. */
}

/* When exporting elements with child elements that were edited, edited classes has !important on every CSS declaration.
This will be fixed on future updates (requires a lot of work due to the nature of CSS selectors complexity). Sorry for the inconvenience. You can remove it, but be careful and check if some other selector won't override it. */
*, ::after {
  border: 0 solid #e5e7eb;
}

h2, p {
  margin: 0 0 1rem;
}

h2 {
  margin-bottom: .5rem;
}

img { /* Mantido caso haja outras imagens, mas as dos cards foram removidas */
  border-style: none;
  display: initial;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

* {
  box-sizing: border-box;
}

article {
  display: block;
}

strong {
  font-weight: bolder;
}

.btn:hover, a {
  text-decoration: none;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col-12, .col-6 {
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  width: 100%;
}

.col-12, .col-6 {
  -webkit-box-flex: 0;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .col-md-3 {
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 992px) {
  .col-lg-2 {
    -webkit-box-flex: 0;
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
}

.btn {
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  font-size: 13px;
  line-height: 1.5;
  padding: .375rem .75rem;
  text-align: center;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
  transition-behavior: normal, normal, normal, normal, normal;
  user-select: none;
  vertical-align: middle;
}

@media (prefers-reduced-motion:reduce) {
  .btn {
    transition: none 0s;
    transition-behavior: normal;
  }
}

.btn-outline-primary {
  border-color: #0ADBE3;
  color: #494440;
  text-decoration: none;
}

.card {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  background-clip: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: break-word;
  position: relative;
}

.card-body {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: .75rem;
}

.card-footer {
  padding: .75rem 1.25rem;
  text-align: center;
  width: 100%;
}

.btn {
  border-radius: 40px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 991.98px) {
  .btn-outline-primary {
    font-size: 13px;
    padding: 5px;
  }
}

.display-h2 {
  font-size: 28px;
}

@media screen and (max-width: 768px) {
  .display-h2 {
    font-size: 26px;
  }
}

.display-text-support {
  font-size: 18px;
}

.display-h2 {
  line-height: 1.3;
}

.display-text-support {
  line-height: 1.5;
}

.card-transparent {
  border-radius: 15px;
  transition: all .3s ease-in-out;
  transition-behavior: normal;
}

.card-transparent-home {
  background-color: transparent;
  border: 1px solid #494440;
  margin-bottom: 75px;
  min-height: 126px;
  padding-top: 15px;
}

img[data-src] {
  min-height: 1px;
  min-width: 1px;
}

.btn:focus {
  outline: 0;
}

.btn:disabled {
  opacity: .65;
}

.btn-outline-primary:hover {
  background-color: #0ADBE3;
  border-color: #0ADBE3;
  text-decoration: none;
}

.btn-outline-primary:focus {
  box-shadow: rgba(84, 192, 209, .5) 0 0 0 .2rem;
}

.btn-outline-primary:disabled {
  background-color: transparent;
  color: #0ADBE3;
  text-decoration: none;
}

.card-footer:last-child {
  border-radius: 0 0 calc(-1px + .25rem) calc(-1px + .25rem);
}

.btn-outline-primary.bg-light-gray {
  background-color: #f5f5f5;
}

@media screen and (max-width: 992px) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.card .card-footer-over {
  z-index: 30;
}

.card-footer.card-footer-over {
  left: 0;
  position: absolute;
  right: 0;
  bottom: -15%; /* Ajuste conforme necessário para posicionar corretamente o rodapé dentro do card */
  transition: all .3s ease-in-out;
}

.card-transparent .card-icon {
  border-radius: 50%;
  /* line-height: 85px; */ /* Removido/Comentado - Flexbox é melhor para centralizar ícones */
  margin: 0 auto;
  text-align: center;
  transition: all .3s ease-in-out;
  transition-behavior: normal;
  /* Adicionado para manter o espaço e centralizar o ícone */
  min-height: 85px;
  width: 85px; /* Definir largura também */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ajuste o tamanho e cor do ícone aqui */
  font-size: 2.5rem; /* Exemplo de tamanho */
  color: #494440;   /* Exemplo de cor (pode herdar se preferir) */
}


.card-transparent .card-body {
  text-align: center;
}

.card-transparent .card-footer {
  bottom: -15%;
  left: 0;
  position: absolute;
  right: 0;
  transition: all .3s ease-in-out;
  transition-behavior: normal;
}

@media (min-width: 992px) {
  .card-transparent:hover {
    transform: scale(1.2);
  }
}

.card-transparent-home:hover {
  background-color: transparent;
  box-shadow: unset;
}
.card-footer.card-footer-over a {
  color: #494440; /* Define a cor do texto */
  text-decoration: none; /* Remove o sublinhado */
}

.card-footer.card-footer-over a:hover {
  color: #FFFFFF; /* Cor do texto ao passar o mouse, ajuste conforme necessário */
  background-color: #0ADBE3; /* Cor de fundo ao passar o mouse, já definido em sua regra .btn-outline-primary:hover */
}
a:where(:not(.wp-element-button)) {
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

.btn-outline-primary:hover.bg-light-gray {
  background-color: #0ADBE3;
}

.card-transparent .card-body .card-title {
  font-size: 14px;
  font-weight: 900;
}

.card-transparent:hover .card-footer {
  background-color: transparent;
  border-style: none;
  opacity: 1;
  text-align: center;
}

.card-transparent-home:hover .card-icon {
  background-color: transparent;
  /* Opcional: mudar a cor do ícone no hover */
  /* color: #0ADBE3; */
}


.card-transparent-home:hover .card-footer {
  transform: translateY(0);
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

.btn-outline-primary:not(:disabled):not(.disabled):not(.btn-disabled):not([href="#off"]):active {
  background-color: #0ADBE3;
  border-color: #0ADBE3;
  color: #212529;
  text-decoration: none;
}

.btn-outline-primary:not(:disabled):not(.disabled):not(.btn-disabled):not([href="#off"]):active:focus {
  box-shadow: rgba(84, 192, 209, .5) 0 0 0 .2rem;
  text-decoration: none;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.text-center {
  text-align: center !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.text-secondary {
  color: #0ADBE3 !important;
}

.text-dark {
  color: #363636 !important;
}

.text-blue {
  color: #363636!important;
}

.btn-outline-primary:hover {
  color: #494440 !important;
  text-decoration: none;
}

.css-scan-edited-element-0 {
  background-color: #f5f5f5 !important;
  background-size: cover !important;
  border-radius: 0 !important;
  border-style: initial !important;
  border-width: 0 !important;
  box-sizing: border-box !important;
  color: #494440 !important;
  display: block !important;
  font-family: Lato, sans-serif !important;
  font-size: 14.4px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 80px 0 .5rem !important;
  position: relative !important;
  tab-size: 4 !important;
  text-align: left !important;
}

@media (max-width: 767.98px) {
  .css-scan-edited-element-0 {
    background-position: 100% center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 50px !important;
  }
}

.css-scan-edited-element-0::after, .css-scan-edited-element-0::before {
  border: 0 solid #e5e7eb !important;
  border-image: initial initial initial initial initial !important;
  box-sizing: border-box !important;
}

.css-scan-edited-element-0::before {
  background-image: url(https://totvscrm.com/wp-content/uploads/2024/02/plnfundoo.png) !important;
  background-position: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-size: auto 600px !important;
  bottom: 0 !important;
  content: "" !important;
  height: 100% !important;
  position: absolute !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 0 !important;
}

@media screen and (max-width: 1500px) {
  .css-scan-edited-element-0::before {
    display: none !important;
  }
}

html {
  font-size: 16px;
  /* This is IMPORTANT since some copied values use "REM" units */
}
</style>

<section class="css-scan-edited-element-0 inherited-styles-for-exported-element" style="background-color: #f5f5f5">

  <div class="container">
    <div class="row mb-5">
      <article class="col-12">
        <p class="display-h2 font-weight-bold text-uppercase text-center text-dark">
          Aprofunde Seu Conhecimento <br>explore a<strong class="text-secondary"> documentação</strong>
        </p>

        <div class="display-text-support text-center mt-4">
          <p class=".display-text-support ">Este recurso valioso é projetado para enriquecer sua compreensão do produto e otimizar sua experiência de uso.<br>
          </p>

        </div>
      </article>
    </div>

    <div class="row">
      <!-- Adm. -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-clipboard-list"></i> <!-- Ícone de Administração/Configuração -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Adm.</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/1+-+Administrativo" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Agenda -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
             <i class="fas fa-calendar-alt"></i> <!-- Ícone de Agenda -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Agenda</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/2+-+Agenda" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Analytics -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-chart-pie"></i> <!-- Ícone de Gráfico/Analytics -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Analytics</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/3+-+Analytics" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Analytics Studio -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-drafting-compass"></i> <!-- Ícone de Criação/Estúdio -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue"> A. Studio</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/4+-+Analytics+Studio" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Atividades -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-tasks"></i> <!-- Ícone de Tarefas/Atividades -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Atividades</p>
          </div>

<div class="FullWidthCarouselstyles__DraggableContainer-sc-16jty68-1 fwSgiY inherited-styles-for-exported-element">
    <div class="grid__Container-sc-p40pqe-0 ctsbPE">
      <div style="margin-left: -16px; cursor: grab; transition: margin-left 0.6s ease 0s;" class="grid__Row-sc-p40pqe-1 oFuOf">
        <div class="grid__StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="2xIZne1VBy81MhQlXA90bn" draggable="false" <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/Release5+-+Atividade" class="rogGTbtn btn-outline-primary bg-light-gray">
            <div color="rgba(9, 30, 66, 1)" class="hNWOlT"></div> Saiba Mais
            <div class="fzULwq"></a>
              <div class="bgvUWO"><</div>
        </div>
      <h3 class="titlegch3">Releases</h3></div>
      <!-- Catálogo -->
      <p<div class="mutedcol-lg-2 col-md-3 col-6"> </p>
        <div class="card card-transparent card-transparent-home">
   <p>Clique e explore: cada versão do TOTVS CRM<div class="card-icon">
    Gestão de Clientes é apresentada com documentos detalhados, que fornecem insights claros sobre as mudanças implementadas, as melhorias realizadas e as novidades que foram introduzidas. </p><i class="fas fa-book-open"></i> <!-- Ícone de Livro/Catálogo -->
          </div>
          <div  </div>
class="card-body">
           </a></div>
<!-- Separação bloco --> <p class="card-title text-uppercase text-blue">Catálogo</p>
             </div>
  
        <div class="grid__StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="3Vmbzdd1S76GhVxNtDs2Kz" draggable="false"card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/Roadmap+do+Produtopages/releaseview.action?pageId=728643168" class="rogGTbtn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
     <div color="rgba(9, 30, 66, 1)" class="grqWLk">< </div>
        </div>
     <div class="fzULwq"> </div>
      <!-- Contas -->
      <div class="eUOZOn"></div>col-lg-2 col-md-3 col-6">
        <div      <h3 class="titlegch3">Roadmap</h3>card card-transparent card-transparent-home">
          <div    <p class="mutedcard-icon"> </p>
             <i <p>Acompanhe nosso roadmap e prepare-se para as próximas inovações que irão elevar sua experiência com o TOTVS CRM - Gestão de Clientes a um novo patamar. Estamos ansiosos para crescer e evoluir junto com você!</p>
class="fas fa-building"></i> <!-- Ícone de Empresa/Conta -->
          </div>
          <div class="card-body">
            <p class="card-title  </div>text-uppercase text-blue">Contas</p>
          </a></div>
          <div class="cJzWlo"><a data-testid="individual-template" data-uuid="1Tqt54zuPmOckSi6MKDPiy" draggable="false"card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/pages/viewpage.action?pageId=636959623TCGDC/7+-+Contas" class="rogGTbtn btn-outline-primary bg-light-gray">
            <div color="rgba(9, 30, 66, 1)" class="cELStS"></div>
 Saiba Mais
            </a>
  <div class="fzULwq">
       </div>
       <div class="gRxMAA">< </div>
      </div>
        <h3 class="titlegch3">Calendário</h3>
  <!-- Data Discovery -->
      <div class="col-lg-2 col-md-3 col-6">
   <p>Fique de olho no Calendário de Atualizações e antecipe-se às novidades que farão a diferença no seu dia a dia. Estamos comprometidos em mantê-lo atualizado com as mais recentes inovações do TOTVS CRM - Gestão de Clientes.</p><div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-search"></i> <!-- Ícone de Busca/Descoberta -->
            </div>
          </a></div>
 
<!-- Separação bloco -->

<div class="card-body">
          </div>
  <p  </div>
  </div>class="card-title text-uppercase text-blue">D. discovery</p>
  
  <style>
    *, ::after, ::before {
 </div>
       box-sizing: border-box;
  <div  }
class="card-footer card-footer-over">
   
    .wiki-content h3 {
   <a margin: 0 !important;
}

    .inherited-styles-for-exported-element {href="https://tdn.totvs.com/display/TCGDC/8+-+Data+Discovery" class="btn btn-outline-primary bg-light-gray">
      color: #091e42;
      font-family: "Roboto", sans-serif;
 Saiba Mais
       font-size: 1.25rem;
    </a>
  font-weight: 400;
      line-height: 1.5; </div>
    }
    </div>
    .titlegch3 {
  </div>
      font<!--family: "Roboto", sans-serif; Documentos -->
    font-size: 1.25rem;
 <div class="col-lg-2 col-md-3 font-weight: 500;
col-6">
     line-height: 1.2;
  <div class="card margincard-bottom: .5rem;
transparent card-transparent-home">
     margin-top: 0;
}
    @media (min-width: 768px) {<div class="card-icon">
      .titlegch3 {
      <i  font-size: 1.5rem;
        line-height: 1.33333;class="fas fa-file-alt"></i> <!-- Ícone de Documento -->
      }
    }
  </div>
    .ctsbPE {
     <div margin-left: auto;
class="card-body">
       margin-right: auto;
    <p  padding-left: 1rem;class="card-title text-uppercase text-blue">Docs</p>
      padding-right: 1rem;    </div>
      width: 100%;
    }
  
<div class="card-footer card-footer-over">
       @media (min-width: 576px) {
  <a href="https://tdn.totvs.com/display/public/TCGDC/9+-+Documentos" class="btn  .ctsbPE {btn-outline-primary bg-light-gray">
        max-width: 540px;
     Saiba }Mais
    }
  
    @media (min-width: 768px) { </a>
      .ctsbPE {
   </div>
     max-width: 720px;
  </div>
    }
    }</div>
  
    @media (min-width: 992px) {<!-- Marketplace -->
      .ctsbPE {
        max-width: 960px;
<div class="col-lg-2 col-md-3 col-6">
       }
 <div class="card  }card-transparent card-transparent-home">
  
      @media (min-width: 1200px) { <div class="card-icon">
      .ctsbPE {
     <i class="fas  max-width: 1140px;
      }
fa-store"></i> <!-- Ícone de Loja/Marketplace -->
        }
  </div>
    .oFuOf {
     <div -webkit-box-align: stretch;class="card-body">
      -webkit-box-pack: start;
      <p  align-items: stretch;
class="card-title text-uppercase text-blue">Marketp.</p>
       display: flex;
  </div>
    flex-wrap: wrap;
     <div justify-content: space-around;class="card-footer card-footer-over">
      margin-left: -1rem;
      <a href="https://tdn.totvs.com/display/TCGDC/11+-+Marketplace"  margin-right: -1rem;class="btn btn-outline-primary bg-light-gray">
    }
  
    .cJzWlo {
   Saiba Mais
  display: block;
      flex: 1 1 auto;</a>
      padding: 1rem;
   </div>
   position: relative;
      scroll-margin-top: 72px;</div>
      text-align: center;
</div>
       width: 83.3333%;<!-- Oportunidades -->
      margin: 10px;
      max-width: 300px;<div class="col-lg-2 col-md-3 col-6">
    }
  
  <div  @media (min-width: 992px) {
class="card card-transparent card-transparent-home">
          .cJzWlo {<div class="card-icon">
        display: block;
    <i class="fas fa-trophy"></i>  flex: 0 0 auto;
  <!-- Ícone de Troféu/Oportunidade (conforme sugerido) -->
      width: 33.3333%;
      }
    }
  <!-- Alternativas: fas fa-dollar-sign, fas fa-lightbulb -->
    .fwSgiY {
      overflow-x: hidden;</div>
    }
  
    .rogGT {<div class="card-body">
      border-radius: .5rem;
     <p box-shadow: rgba(9, 30, 66, .15) 0 .5rem 1rem 0;
class="card-title text-uppercase text-blue">Oport.</p>
          color: inherit !important;
 </div>
     display: block;
      height: 100%;<div class="card-footer card-footer-over">
      margin: 0;
     <a overflow: hidden;href="https://tdn.totvs.com/display/public/TCGDC/12+-+Oportunidades" class="btn btn-outline-primary bg-light-gray">
      text-align: left;
      text-decoration: noneSaiba !important;Mais
       text-wrap: wrap;
    </a>
  user-select: none;
      white-space-collapse: collapse; </div>
      width: auto;  </div>
    }  </div>
   
   <!-- .hNWOlT {Pers. (Personalização/Personas?) -->
      background-color: #6B48FF;
 <div class="col-lg-2 col-md-3 col-6">
       height: 2rem; <div class="card card-transparent card-transparent-home">
    }
  
    @media (min-width: 576px) {<div class="card-icon">
      .hNWOlT {
      <i  height: 3rem;
      }
class="fas fa-id-badge"></i> <!-- Ícone de Identificação/Persona -->
      }
  
    .grqWLk {
      background-color: #0ADBE3;
 <!-- Alternativas: fas fa-user-edit, fas fa-palette -->
         height: 2rem; </div>
    }
  
    @media (min-width: 576px) {
<div class="card-body">
         .grqWLk {
  <p class="card-title text-uppercase text-blue">Pers.</p>
   height: 3rem;
      }</div>
     }
  
    .cELStS {<div class="card-footer card-footer-over">
      background-color: #FEAC0E;
     <a height: 2rem;
    }
  
href="https://tdn.totvs.com/pages/viewpage.action?pageId=821575034" class="btn btn-outline-primary bg-light-gray">
       @media (min-width: 576px) {
    Saiba Mais
 .cELStS  {
        height: 3rem; </a>
      }
    }</div>
  
     .bxLzQJ {</div>
      background-color: #ffc400;</div>
      height: 2rem;
    }<!-- Plan. (Planejamento) -->
  
    @media (min-width: 576px) {<div class="col-lg-2 col-md-3 col-6">
      .bxLzQJ {
        height: 3rem;<div class="card card-transparent card-transparent-home">
      }
    }
  <div class="card-icon">
    .lnQKVZ {
      background-color: #00c7e5;
      height: 2rem; <i class="fas fa-map-signs"></i> <!-- Ícone de Mapa/Planejamento -->
    }
  
    @media (min-width: 576px) {
 <!-- Alternativas: fas fa-calendar-check, fas .lnQKVZ {
fa-sitemap -->
         height: 3rem;
 </div>
       }
    }<div class="card-body">
  
     .kgNiiW {
    <p  background-color: #f99cdb;
class="card-title text-uppercase text-blue">Plan.</p>
         height: 2rem; </div>
    }
  
    @media (min-width: 576px) {<div class="card-footer card-footer-over">
      .kgNiiW {
        height: 3rem;
      }<a href="https://tdn.totvs.com/display/TCGDC/14+-+Planejamento" class="btn btn-outline-primary bg-light-gray">
    }
  
    .bgvUWO, .eUOZOn, .gAonen, .gRxMAA, .iRWtjz, .kIYtDi { Saiba Mais
      background-color: #fff;
      background-image: url(https://totvscrm.com/wp-content/uploads/2024/01/pre-release-access-1.png);
</a>
        background-position: center center;</div>
       background-repeat: no-repeat; </div>
      background-size: contain;
</div>
       border: 8px solid #fff;
<!-- Vendas -->
      <div  border-radius: .5rem;
class="col-lg-2 col-md-3 col-6">
       height: 3rem;
   <div class="card card-transparent card-transparent-home">
   left: 1rem;
      position: absolute;<div class="card-icon">
      top: -1.5rem;
      width: 3rem;
    }
  
    .eUOZOn, .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
<i class="fas fa-hand-holding-usd"></i> <!-- Ícone de Mão com Dinheiro/Vendas -->
            background-image: url(https://totvscrm.com/wp-content/uploads/2024/01/roadmap-3.png);
    }
  
    .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {<!-- Alternativas: fas fa-tags, fas fa-cash-register -->
          </div>
      background-image: url(https://totvscrm.com/wp-content/uploads/2024/01/calend.png);
    }<div class="card-body">
  
    .gAonen, .iRWtjz, .kIYtDi {
   <p class="card-title text-uppercase background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/4Mgm4SG6P6bD673rMtNpXP/9f8798510480b30d296550be747b9624/icon-content-checklists_2x.png);
text-blue">Vendas</p>
      }
      </div>
          <div class="card-footer card-footer-over">
    .gAonen, .kIYtDi {
      background-image: url(<a href="https://imagestdn.ctfassetstotvs.netcom/rz1oowkt5gypdisplay/x2AI5JZPTDVY7BxKbvClM/dc65b20bf0914caa72bcaf2ddbb05d9b/UseCasesBrainstorming.svg);
    }
  TCGDC/15+-+Vendas" class="btn btn-outline-primary bg-light-gray">
    .gAonen {
      background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/5rv4eidOfMf1vdEzVpHNlA/bb102f380f9cfd3d1761858d8910963d/icon-object-book_2x.png);
   Saiba }Mais
  
    .fzULwq {
      padding: 2.25rem 1.5rem 1.5rem;</a>
      position: relative;
    }</div>
  
    body :focus {</div>
      </div>
 outline: 2px solid #091e42;
  <!-- Workflow }-->
   
    a:not([href]), a:not([href]):hover {<div class="col-lg-2 col-md-3 col-6">
      color: inherit;
 <div class="card  }card-transparent card-transparent-home">
  
    .fzULwq p {
      font-size: 13px;
<div class="card-icon">
        margin: 0;
    }
  
    .fzULwq p+p {<i class="fas fa-project-diagram"></i> <!-- Ícone de Diagrama/Workflow -->
      margin-top: .5rem;
    }
  
 <!-- Alternativas: fas .cJzWlo>:last-child, .cJzWlo>:last-child>:last-child, .cJzWlo>:last-child>:last-child>:last-child {
fa-cogs, fas fa-sync-alt -->
         margin-bottom: 0; </div>
    }
  
    .fwSgiY .grid__Row-sc-p40pqe-1 {<div class="card-body">
      flex-wrap: nowrap;
      padding-bottom: 1rem;
<p class="card-title text-uppercase text-blue">Workflow</p>
       width: calc(100% + 2rem); </div>
    }
  
    .rogGT:focus, .rogGT:hover {<div class="card-footer card-footer-over">
      box-shadow: rgba(9, 30, 66, .25) 0 .5rem 1rem 0;      <a href="https://tdn.totvs.com/display/TCGDC/17+-+Workflow" class="btn btn-outline-primary bg-light-gray">
      color: inherit !important;
       text-decoration: none !important;Saiba Mais
    }
  
    .fzULwq p.muted { </a>
      color: #5e6c84;
    }</div>
  
    body :focus:not(:focus-visible) { </div>
      outline: 0 !important;
    }
  </style>
  </div>

    </div>
  </div>

</section>