/* Fonte (opcional, mas ajuda a ficar mais "clean") */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
body {    font-family: 'DM Sans', sans-serif;
}

/* =========================================
   Estilos Gerais (Removidos do <style> inline)
   ========================================= */
hr.divisor {
    height: 1px;
    border: none;

    margin: 20px 0;
}



a {
    text-decoration: none !important;
}


/* =========================================
   Grid de Cards (3 por linha)
   ========================================= */
.cards-grid {
 display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
margin-bottom: 70px;
  margin-top: 42px;
  padding: 7px;
  
}

.card-item {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    display: flex; /* Ativa o flexbox */
    flex-direction: row; /* Coloca os itens lado a lado (Texto esquerda, Imagem direita) */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    height: 150px; /* Altura fixa para os cards ficarem iguais na linha */
    align-items: stretch;
}

.card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1; /* Faz o texto ocupar todo o espaço da esquerda */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
}

.card-img-wrapper {
    width: 95px; /* Largura da imagem na direita */
   
    display: flex;
    align-items: center;
    justify-content: center;
 
    flex-shrink: 0; /* Impede que a imagem esmague */
}

.card-img-wrapper img {
    max-width: 149%;
  max-height: 85%;
  object-fit: contain;
  margin-left: -67px;
}

/* Ajuste no título e texto para caber melhor no layout horizontal */
.card-title {
 font-size: 16px;
  margin-bottom: 4px;
  font-weight: 600;
}

.card-text {
 font-size: 14px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #454545;
  width: 155px;
}



.title-fiscal { color: #000000; }
.title-textil { color: #000000; }
.title-store  { color: #000000; }
.title-websys { color: #000000; }
.title-escola { color: #000000; }
.title-parce  { color: #000000; }
 .title-download { color: #000000; }



.card-btn {
    font-size: 13px;
    font-weight: bold;
    color: #0042A4;
    align-self: flex-start;
}
.card-download-wrapper {
    grid-column: 1 / -1; /* Faz ocupar a linha inteira se estiver na grid, mas vamos colocar fora */
    width: 100%;
  max-width: 336px;
margin: -16px 0px 0px 162px;
}

/* =========================================
   Card de Download (Linha separada, estilo diferente)
   ========================================= */
.card-download {
    display: flex;
    flex-direction: row; /* Garante que os itens fiquem lado a lado */
    align-items: center; /* Centraliza verticalmente */
    justify-content: space-between; /* Empurra o texto para a esquerda e a imagem para a direita */
   border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px;
  gap: 20px;
  box-shadow: 0 4px 8px rgba(136, 136, 136, 0.18);
    transition: transform 0.3s ease;
    text-align: left;
    height: 137px;
}

.card-download:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,102,255,0.15);
}

.card-download-body {
    flex-grow: 1; /* Faz o corpo do texto ocupar todo o espaço possível na esquerda */
}

.card-download img {
    width: 80px; /* Tamanho da imagem na direita */
    height: auto;
    flex-shrink: 0; /* Impede que a imagem encolha se o texto for muito grande */
}

.card-download-title {
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 5px;
}

.card-download-text {
    font-size: 13px;
    color: #454545;
      width: 208px;
}

.card-download-btn {
    display: inline-block;
   background: #F60;
  color: #fff !important;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
  margin-top: 10px;
  transition: background 0.3s ease;
  font-size: 13px;
}

.card-download-btn:hover {
    background: #cc5200;
}


.hero-syntech {
background: rgb(51,51,51);

  padding: 40px 9px;
  margin-top: -21px;
}

.hero-content {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}

.hero-content h1 {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.hero-content p {
  margin: 0 0 16px 0;
  color: #ffffff;
  font-size: 14px;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-hero {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 12px;
  text-decoration: none;
  font-weight: 600;
}

.btn-hero.primary {
  background: #f60;
  color: #ffffff;
  border: 1px solid #f60;
}

.btn-hero.outline {
  background: transparent;
  color: #ffffff;
  border: 1px solid #5e5e5e;
}





@media screen and (max-width: 1000px) and (orientation: portrait) {

.btn-hero {
  font-size: 13px;
}
.hero-content h1 {
  font-size: 26px;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin-bottom: 30px;
  margin-top: -9px;
  padding: 10px;
}

element {
}
a:visited {
  text-decoration: none;
}
.card-item {
  height: 165px;
}

}