body {
     background-color: #121223;
     /* Fundo escuro (inspirado no seu print) */
     color: #f0f0f0;
     /* Texto claro */
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 20px;
 }

 /* --- BARRA FIXA NO TOPO --- */
 .top-bar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 55px;
     background: #000000;
     /* cor do header – pode trocar */
     display: flex;
     align-items: center;
     padding-left: 20px;
     z-index: 9999;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }

 /* --- BOTÃO VOLTAR --- */
 .voltar,
 .voltar:visited {
     color: #ffffff !important;
     /* Sempre branco */
     text-decoration: none;
     font-weight: 600;

     display: inline-flex;
     align-items: center;
     gap: 6px;

     padding: 6px 12px;
     border-radius: 8px;

     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(6px);

     transition: 0.2s;
 }

 .voltar:hover {
     background: rgba(255, 255, 255, 0.18);
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
 }

 .header-section {
     text-align: center;
     margin-bottom: 40px;
 }

 #templetes {
     padding: .5rem 1rem;
  
 }

 .header-section h1 {
     font-size: 3em;
     color: #4A90E2;
     /* Cor azul de destaque */
     margin-bottom: 5px;
 }

 .header-section p {
     font-size: 1.2em;
     color: #a0a0a0;
 }

 /* --- Estilos do Filtro --- */
 .filter-buttons {
     text-align: center;
     margin-bottom: 40px;
 }

 .filter-btn {
     background-color: transparent;
     color: #f0f0f0;
     border: 1px solid #4A90E2;
     padding: 10px 20px;
     margin: 5px;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s;
     font-weight: bold;
 }

 .filter-btn:hover,
 .filter-btn.active {
     background-color: #4A90E2;
     /* Cor azul quando ativo/hover */
     color: #121223;
 }

 /* --- Estilos da Grade de Modelos --- */
 .template-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .template-card {
     background-color: #1f1f3a;
     /* Fundo do card ligeiramente mais claro */
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
     transition: transform 0.3s;
     text-align: center;
 }

 .template-card:hover {
     transform: translateY(-5px);
     /* Efeito sutil ao passar o mouse */
 }

 .template-preview img {
     width: 100%;
     height: auto;
     display: block;
     border-bottom: 3px solid #4A90E2;
     /* Linha de destaque */
 }

 .card-content {
     padding: 15px;
 }

 .card-content h3 {
     font-size: 1.3em;
     color: #f0f0f0;
     margin: 5px 0;
 }

 .card-content .price {
     display: block;
     margin-bottom: 15px;
     color: #4A90E2;
     /* Preço em destaque */
     font-weight: bold;
 }

 .card-content .btn-download {
     background-color: #4A90E2;
     color: #fff;
     padding: 10px 20px;
     text-decoration: none;
     border-radius: 5px;
     display: inline-block;
     transition: background-color 0.3s;
 }

 .card-content .btn-download:hover {
     background-color: #3b74b9;
 }

 /* Classe usada para esconder itens pelo filtro (via JS) */
 .hidden {
     display: none !important;
 }


 /* Adicione estas classes ao seu arquivo de estilos */

 .promo-section {
     padding: 60px 0;
border-bottom: 1px solid gray;
 }

 .promo-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     /* Espaço entre o texto e a imagem */
 }

 .promo-text {
     flex: 1;
 }

 .promo-image {
     flex: 1;
     max-width: 450px;
     /* Limite o tamanho da imagem */
     text-align: center;
 }

 .promo-image img {
     width: 100%;
     height: auto;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .destaque-gratis {
     background-color: #e6f7ff;
     /* Um fundo claro para o destaque */
     border-left: 5px solid var(--primary-color);
     padding: 15px;
     margin: 20px 0;
     border-radius: 5px;
 }

 .destaque-gratis h3 {
     color: black;
     margin-top: 0;
     font-size: 1.5em;

 }

 .destaque-gratis p {
     color: rgb(76, 76, 76);
     margin-top: 0;
     font-size: 1.5em;

 }

 .highlight {
     font-weight: bold;
     color: var(--secondary-color);
     /* Uma cor forte para chamar atenção */
 }


 #templetes {
     padding-top: 3.5rem;
 }

 /*
=====================================================
✉️ SEÇÃO DE CONTATO (CONTACT)
=====================================================
*/
.contact-section {
    background-color: var(--bg-dark);
    color: var(--text-color);
    padding: 100px 20px;
    text-align: center;
}

.contact-section h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 20px;
}

.contact-section p {
    color: var(--text-color);
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-width: 600px;
    margin: 0 auto;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #222;
    border-radius: 8px;
    background-color: #1a1a1f;
    color: var(--text-color);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #777;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px var(--primary-color);
    outline: none;
}

.btn-contato{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}
   
/* Ícones sociais */
.social-links {
    margin-top: 40px;
}

.social-links a {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin: 0 10px;
    transition: 0.3s ease;
}

.social-links a:hover {
    color: #fff;
    transform: translateY(-3px);
}


 /* Responsividade básica */
 @media (max-width: 900px) {
     .promo-content {
         flex-direction: column;
         text-align: center;
     }

     .promo-image {
         max-width: 100%;
         margin-top: 30px;
     }



 }