/* ============================================================
   1. IMPORTAÇÕES E RESET
   ============================================================ */

/* Importação da fonte Inter do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Reset básico para garantir que o site apareça igual em todos os navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: clip;
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   2. VARIÁVEIS GLOBAIS E ESTILOS BASE
   ============================================================ */

:root {
    --primaria: #2b3d4f;
    --fundo-claro: #f6f7f7;
    --texto-escuro: #0f172a;
    --texto-suave: #64748b;
    --branco: #ffffff;
    --borda: #e2e8f0;
    --sombra: rgba(0, 0, 0, 0.05);
}

/* ---VARIÁVEIS DO TEMA ESCURO --- */
[data-theme="dark"] {
    /* Usamos um azul vibrante para garantir que os botões "Comprar" e os ícones fiquem bem visíveis */
    /*--primaria: #5998a6; /*Turquesa Mudo */
    /*--primaria: #6488a8; /*Azul Metálico */
    --primaria: #4a7c9d; /*Azul Aço */
    --fundo-claro: #0f172a; 
    --texto-escuro: #f8fafc;
    --texto-suave: #94a3b8;       
    --branco: #2b3d4f;    
    --borda: #334155;          
    --sombra: rgba(0, 0, 0, 0.6); 
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--fundo-claro);
    color: var(--texto-escuro);
    line-height: 1.5;
}

/* Classe utilitária para centralizar o conteúdo e limitar a largura */
.caixa-conteudo {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 1rem;
    word-break: break-word;
}

/* ============================================================
   3. CABEÇALHO
   ============================================================ */

header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--primaria);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--borda);
    padding: 15px 0;
}

.cabecalho-conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logotipo {
    display: flex;
    align-items: center;
}

.logotipo-img {
    height: 80px;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
    border-radius: 25px;
}

.logotipo:hover .logotipo-img {
    transform: scale(1.05);
}

.barra-pesquisa {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.barra-pesquisa input {
    width: 100%;
    background-color: #f1f5f9;
    border: none;
    border-radius: 50px;
    padding: 12px 15px 12px 45px;
    font-size: 0.875rem;
    outline: none;
    transition: all 0.3s;
}

.barra-pesquisa input:focus {
    background-color: var(--branco);
    box-shadow: 0 0 0 2px rgba(43, 61, 79, 0.1);
}

.icone-pesquisa {
    position: absolute;/* Mantém o ícone fixo dentro da barra de pesquisa */
    left: 15px;
    top: 70%;
    transform: translateY(-50%); /* Ajusta a posição vertical do ícone */
    color: var(--texto-suave); /* Cor do ícone */
}

.cabecalho-acoes {
    display: flex;
    align-items: center;
    gap: 15px;
}

.botao-icone {
    padding: 8px;
    border-radius: 50%;
    color: var(--fundo-claro);
    transition: background 0.3s;
    display: flex;
    font-size: 1.1rem;
}

.botao-icone:hover {
    background-color: var(--texto-escuro);
}

.botao-carrinho {
    background-color: var(--primaria);
    color: var(--branco);
    border-radius: 10px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    box-shadow: 0 10px 15px -3px rgba(43, 61, 79, 0.2);
    transition: all 0.3s;
}

.botao-carrinho:hover {
    box-shadow: 0 20px 25px -5px rgba(43, 61, 79, 0.3);
}

.contador-carrinho {
    background-color: var(--branco);
    color: var(--primaria);
    font-size: 0.75rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   4. SEÇÃO DE DESTAQUE PRINCIPAL
   ============================================================ */

.destaque-principal {
    padding: 30px 0;
}

.cartao-destaque {
    position: relative;
    min-height: 500px;
    border-radius: 30px;
    overflow: hidden;
    background-color: var(--primaria);
    display: flex;
    align-items: center;
}

.fundo-destaque {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s;
}

.cartao-destaque:hover .fundo-destaque {
    transform: scale(1.05);
}

.camada-destaque {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(43, 61, 79, 0.9), rgba(43, 61, 79, 0.4), transparent);
}

.conteudo-destaque {
    position: relative;
    padding: 60px;
    max-width: 700px;
    color: var(--branco);
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.etiqueta-destaque {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: bold;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.titulo-destaque {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.1;
}

.descricao-destaque {
    font-size: 1.25rem;
    color: #cbd5e1;
}

.botoes-destaque {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.botao-primario {
    background-color: var(--branco);
    color: var(--primaria);
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s;
}

.botao-primario:hover {
    background-color: #f1f5f9;
}

.botao-contorno {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--branco);
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: bold;
    backdrop-filter: blur(5px);
    transition: background 0.3s;
}

.botao-contorno:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   5. SEÇÕES GERAIS
   ============================================================ */

section {
    padding: 60px 0;
}

.cabecalho-secao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.titulo-secao h3 {
    font-size: 1.5rem;
    color: var(--primaria);
    font-weight: bold;
}

.titulo-secao p {
    color: var(--texto-suave);
    font-size: 0.875rem;
}

.ver-todos {
    color: var(--primaria);
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ver-todos:hover {
    text-decoration: underline;
}

/* ============================================================
   6. GRADE DE PRODUTOS
   ============================================================ */

.grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

.cartao-produto {
    background-color: var(--branco);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--borda);
    transition: all 0.3s;
    overflow: hidden;
}

.cartao-produto:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.imagem-produto,
.cartao-imagem {
    background-color: var(--fundo-claro);
    border-radius: 15px;
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    margin-bottom: 15px;
    width: 100%;
}

.imagem-produto img,
.cartao-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.cartao-produto:hover .imagem-produto img,
.cartao-produto:hover .cartao-imagem img {
    transform: scale(1.1);
}

.selo {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--primaria);
    color: var(--branco);
    font-size: 0.6rem;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 5px;
}

.nome-produto,
.cartao-nome {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--primaria);
    margin-bottom: 5px;
    line-height: 1.3; /* 1. Define a altura de cada linha */
    height: calc(1.3em * 2); /* 2. Força a caixa a ter exatamente o tamanho de 2 linhas (1.3 x 2) */
    display: -webkit-box;/* 3. Coloca os "3 pontinhos" se o nome tiver 3 linhas ou mais */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cartao-nome {
    font-size: 0.875rem;
    -webkit-line-clamp: 1; /* 3. Coloca os "3 pontinhos" se o nome tiver 2 linhas ou mais */
}

.descricao-produto {
    color: var(--texto-suave);
    font-size: 0.875rem;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Número máximo de linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rodape-produto {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.preco-produto,
.cartao-preco {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--primaria);
}

.botao-adicionar-carrinho {
    background-color: #f1f5f9;
    padding: 8px;
    border-radius: 8px;
    color: var(--primaria);
    transition: all 0.3s;
    display: flex;
}

.botao-adicionar-carrinho:hover {
    background-color: var(--primaria);
    color: var(--branco);
}

.cartao-info {
    padding: 1rem;
}

.cartao-categoria {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

/* ============================================================
   7. BANNER PROMOCIONAL
   ============================================================ */

.banner-promocional {
    background-color: var(--branco);
    border: 2px solid var(--borda);
    border-radius: 30px;
    padding: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.texto-promocional h2 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primaria);
    text-transform: uppercase;
}

.texto-promocional p {
    color: var(--texto-suave);
    font-size: 1.125rem;
    margin-bottom: 25px;
}

.caixa-cupom {
    display: inline-flex;
    background-color: var(--fundo-claro);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--borda);
}

.codigo-cupom {
    padding: 0 20px;
    font-weight: 900;
    letter-spacing: 2px;
    border-right: 1px solid var(--borda);
    display: flex;
    align-items: center;
}

.botao-cupom {
    padding: 0 20px;
    font-weight: bold;
    color: var(--primaria);
    font-size: 0.875rem;
}

.botao-grande {
    background-color: var(--primaria);
    color: var(--branco);
    padding: 20px 40px;
    border-radius: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.botao-grande:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(43, 61, 79, 0.3);
}

/* ============================================================
   8. SEÇÃO NOSSA MISSÃO
   ============================================================ */

.nossa-missao {
    background-color: var(--branco);
    border-radius: 50px;
    margin: 60px 0;
    padding: 80px 0;
}

.conteudo-missao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.moldura-imagem-missao {
    position: relative;
}

.fundo-imagem-missao {
    position: absolute;
    inset: -15px;
    background-color: #f1f5f9;
    border-radius: 40px;
    transform: rotate(3deg);
}

.imagem-missao {
    position: relative;
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.texto-missao {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.etiqueta-missao {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--primaria);
}

.etiqueta-missao span {
    width: 30px;
    height: 1px;
    background-color: var(--primaria);
}

.texto-missao h2 {
    font-size: 3rem;
    font-weight: 900;
    color: var(--primaria);
}

.texto-missao p {
    color: var(--texto-suave);
    font-size: 1.125rem;
    line-height: 1.8;
}

.estatisticas-missao {
    display: flex;
    gap: 40px;
}

.item-estatistica span {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primaria);
}

.item-estatistica p {
    font-size: 0.875rem;
    color: var(--texto-suave);
}

.saiba-mais {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primaria);
    font-weight: bold;
    transition: gap 0.3s;
}

.saiba-mais:hover {
    gap: 15px;
}

/* ============================================================
   9. RODAPÉ
   ============================================================ */

footer {
    background-color: var(--primaria);
    color: #94a3b8;
    padding: 80px 0 40px;
}

.grade-rodape {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 60px;
}

.informacao-rodape {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.logotipo-rodape {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--branco);
}

.descricao-rodape {
    font-size: 0.875rem;
    line-height: 1.6;
}

.links-sociais {
    display: flex;
    gap: 15px;
}

.botao-social {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--branco);
    transition: background 0.3s;
}

.botao-social:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.coluna-rodape h4 {
    color: var(--branco);
    margin-bottom: 25px;
    font-weight: bold;
}

.coluna-rodape ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coluna-rodape a {
    font-size: 0.875rem;
    transition: color 0.3s;
}

.coluna-rodape a:hover {
    color: var(--branco);
}

.lista-contato li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.875rem;
}

.lista-contato .fa-solid,
.lista-contato .fa-regular {
    font-size: 1rem;
    color: #475569;
    margin-top: 2px;
}

.rodape-inferior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.item-rodape-inferior {
    display: flex;
    align-items: center;
    gap: 15px;
}

.item-rodape-inferior span {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #475569;
}

.icones-pagamento {
    display: flex;
    gap: 10px;
}

.selo-pagamento {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 0.6rem;
    font-weight: bold;
    color: var(--branco);
}

.icones-seguranca {
    display: flex;
    gap: 15px;
    font-size: 1.25rem;
}

.direitos-autorais {
    font-size: 0.75rem;
    color: #475569;
}

/* ============================================================
   10. PÁGINA: PRODUTOS
   ============================================================ */

.catalogo-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 0; 
}

.sidebar {
    width: 100%;
}

.area-produtos {
    width: 100%;
}

.sidebar-conteudo {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: var(--branco);
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--borda);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.filtro-section h3 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texto-escuro);
    margin-bottom: 0.875rem;
}

.filtro-grid {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.filtro-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--texto-escuro);
    padding: 10px 0; /* <-- ISSO AQUI FAZ A MÁGICA no mobile e desktop */
    border-bottom: 1px solid #f1f5f9; /* Uma linhazinha sutil para separar */
}

.filtro-item input[type="checkbox"],
.filtro-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--borda);
    border-radius: 4px;
    background-color: var(--branco);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    position: relative;
}

.filtro-item input[type="radio"] {
    border-radius: 50%;
}

.filtro-item input[type="checkbox"]:checked {
    background-color: var(--primaria);
    border-color: var(--primaria);
}

.filtro-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: 2px solid var(--branco);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.filtro-item input[type="radio"]:checked {
    border-color: var(--primaria);
}

.filtro-item input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--primaria);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.preco-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--texto-suave);
    margin-top: 0.25rem;
}

.barra-ferramentas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.organizar-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================================
   11. PÁGINA: DETALHES DO PRODUTO
   ============================================================ */

.secao-produto {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.secao-produto > * {
    min-width: 0;
}

.conteudo-principal {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
    box-sizing: border-box;
    width: 100%;
}

.galeria {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    width: 100%;
}

.imagem-principal {
    aspect-ratio: 1 / 1;
    max-height: 500px;
    width: 100%;
    background-color: var(--branco);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.imagem-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 0.5rem;
    scrollbar-width: none; 
}

.miniatura {
    width: clamp(60px, 20%, 96px);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s ease-in-out;
}

.miniatura:hover, .miniatura.ativa {
  opacity: 1;
  border: 2px solid var(--primaria); /* ou a cor do seu tema */
}

.miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-produto {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.titulo-produto {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.avaliacao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--texto-claro);
}

.estrelas {
    color: var(--amarelo);
    display: flex;
    gap: 2px;
}

.preco-container {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--borda);
}

.preco-atual {
    font-size: 2rem;
    font-weight: 700;
}

.parcelamento {
    font-size: 0.875rem;
    color: var(--texto-claro);
    margin-top: 0.25rem;
}

.botoes-acao {
    display: flex;
    flex-direction: column; /* Força um a ficar em cima do outro */
    gap: 1rem;
    width: 60%;
    margin: 0 auto; /* Empurra o bloco todo para o centro da tela */
}

.botao-comprar-agora {
    background-color: var(--primaria);
    color: var(--branco);
    font-weight: 700;
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: opacity 0.2s;
}

.botao-comprar-agora:hover {
    opacity: 0.9;
}

.botao-no-carrinho {
    border: 2px solid var(--primaria);
    color: var(--primaria);
    font-weight: 700;
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.botao-no-carrinho:hover {
    background-color: #f8fafc;
}

.calculo-frete {
    background-color: var(--branco);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
}


.frete-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.frete-input-grupo {
    display: flex;
    gap: 0.5rem;
}

.frete-input-grupo input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    outline: none;
}

.botao-frete {
    background-color: #cbd5e1;
    color: var(--primaria);
    font-weight: 700;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.grade-recursos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.recurso-item 
{
    background-color: var(--branco);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.recurso-item i {
    font-size: 1.5rem;
    color: var(--primaria);
}

.recurso-label {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--texto-claro);
}

.recurso-valor {
    font-size: 0.875rem;
    font-weight: 700;
}

.especificacoes {
    margin-top: 4rem;
}

.especificacoes h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.tabela-especificacoes {
   
    background-color: var(--branco);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);

}

.tabela-especificacoes tr {
    border-bottom: 1px solid var(--borda);
}

.tabela-especificacoes tr:last-child {
    border-bottom: none;
}

.tabela-especificacoes td {
    padding: 1rem;
    font-size: 0.875rem;
}

.tabela-col-label {
    background-color: var(--branco);
    color: var(--texto-claro);
    font-weight: 700;
    width: 30%;
}

.tabela-col-valor {
    font-weight: 500;
}

.produtos-relacionados {
    margin-top: 4rem;
}

.relacionados-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.relacionados-topo h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.newsletter-texto {
    color: #94a3b8;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
}

.newsletter-form input {
    flex: 1;
    background-color: rgba(255,255,255,0.1);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: var(--branco);
    font-size: 0.875rem;
    outline: none;
}

.botao-newsletter {
    background-color: var(--branco);
    color: var(--primaria);
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

/* Muda a cor das setas do carrossel para a cor primária */
.slick-prev:before, .slick-next:before {
    color: var(--primaria); 
}

/* Container geral da paginação para dar um espaço dos produtos */
.paginacao-container {
    width: 100%;
    margin-top: 40px; 
    margin-bottom: 40px;
}

/* Transforma a lista vertical em horizontal e remove as bolinhas */
.pagination {
    display: flex;
    justify-content: center; /* Centraliza os botões */
    list-style-type: none;   /* Remove as "bolinhas" da lista (bullets) */
    gap: 8px;                /* Espaço entre um botão e outro */
}

/* Estilo dos links (os botões em si) */
.page-link {
    display: block;
    padding: 8px 16px;
    color: #333;             /* Cor do texto */
    background-color: #fff;
    border: 1px solid #ddd;  /* Borda cinza clara */
    border-radius: 5px;      /* Bordas arredondadas */
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Efeito visual ao passar o mouse por cima do botão */
.page-link:hover {
    background-color: #f4f4f4;
    border-color: #bbb;
    color: #000;
}

.mobile-only {
    display: none; /* Esconde botões no desktop */
}

/* ============================================================
   13. PÁGINA DE CONTATO
   ============================================================ */
.secao-contato {
    padding: 60px 0;
}

.cabecalho-secao-contato {
    text-align: center;
    margin-bottom: 50px;
}

.cabecalho-secao-contato h2 {
    font-size: 2.5rem;
    color: var(--primaria);
    font-weight: 900;
    margin-bottom: 15px;
}

.cabecalho-secao-contato p {
    color: var(--texto-suave);
    font-size: 1.125rem;
}

.grid-contato {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.cartao-contato {
    background-color: var(--branco);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--borda);
    box-shadow: 0 10px 25px -5px var(--sombra);
}

.grupo-form {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.grupo-form label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--texto-escuro);
}

.txtform, .txtMensagem {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: inherit;
    background-color: #f8fafc;
    transition: all 0.3s;
}

.txtform:focus, .txtMensagem:focus {
    outline: none;
    border-color: var(--primaria);
    background-color: var(--branco);
    box-shadow: 0 0 0 3px rgba(43, 61, 79, 0.1);
}

.txtMensagem {
    resize: vertical;
    min-height: 150px;
}

.btn-form {
    width: 100%;
    background-color: var(--primaria);
    color: var(--branco);
    padding: 16px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    margin-top: 10px;
}

.btn-form:hover {
    background-color: var(--texto-escuro);
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.cartao-mapa {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--borda);
    box-shadow: 0 10px 25px -5px var(--sombra);
    min-height: 100%; /* Faz o mapa acompanhar a altura do formulário */
}

.mapa {
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: block;
}

/* ============================================================
   15. PÁGINA: SOBRE NÓS (LAYOUT AVANÇADO)
   ============================================================ */

.secao-sobre-loja {
    padding: 60px 0 100px;
}

/* --- Topo: Grid de Missão e Imagem --- */
.grade-sobre-topo {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 2rem;
    margin-bottom: 5rem;
    align-items: stretch;
}

.cartao-sobre-missao {
    background-color: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.etiqueta-sobre {
    font-size: 0.625rem;
    font-weight: 800;
    color: var(--primaria);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.titulo-sobre-grande {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primaria);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.texto-sobre-descricao {
    font-size: 1rem;
    color: var(--texto-suave);
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.estatisticas-sobre {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--borda);
}

.numero-sobre {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--primaria);
    margin-bottom: 0.25rem;
}

.legenda-sobre {
    font-size: 0.625rem;
    font-weight: 800;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Topo: Cartão de Imagem Flutuante --- */
.cartao-imagem-sobre {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    min-height: 400px;
}

.img-fundo-sobre {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 1s ease;
}

.cartao-imagem-sobre:hover .img-fundo-sobre {
    transform: scale(1.05);
}

.camada-escura-sobre {
    position: absolute;
    inset: 0;
    background-color: rgba(43, 61, 79, 0.25);
    transition: background-color 0.3s;
}

.cartao-imagem-sobre:hover .camada-escura-sobre {
    background-color: rgba(43, 61, 79, 0.1);
}

.caixa-flutuante-glass {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    padding: 1.5rem;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.icone-destaque-sobre {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: rgba(43, 61, 79, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: var(--primaria);
    font-size: 1.2rem;
}

.titulo-glass {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primaria);
    margin-bottom: 0.25rem;
}

.texto-glass {
    font-size: 0.75rem;
    color: var(--texto-suave);
    line-height: 1.6;
}

/* 1. Escurece a película por cima da foto */
[data-theme="dark"] .camada-escura-sobre {
    background-color: rgba(15, 23, 42, 0.65); 
}

/* Revela a foto suavemente no hover */
[data-theme="dark"] .cartao-imagem-sobre:hover .camada-escura-sobre {
    background-color: rgba(15, 23, 42, 0.4); 
}

/* 2. Adapta a caixa de vidro flutuante para o modo noturno */
[data-theme="dark"] .caixa-flutuante-glass {
    background-color: rgba(43, 61, 79, 0.85); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); 
}

/* 3. Ajusta o quadradinho do ícone para dar contraste na caixa escura */
[data-theme="dark"] .icone-destaque-sobre {
    background-color: rgba(255, 255, 255, 0.08); 
}

/* --- Pilares Fundamentais --- */
.pilares-sobre {
    padding: 3rem 0;
    border-top: 1px solid var(--borda);
}

.cabecalho-pilares {
    text-align: center;
    margin-bottom: 3rem;
}

.cabecalho-pilares h2 {
    font-size: 1.875rem;
    font-weight: 900;
    color: var(--primaria);
    margin-bottom: 1rem;
}

.cabecalho-pilares p {
    font-size: 0.875rem;
    color: var(--texto-suave);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.grade-pilares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.cartao-pilar {
    background-color: var(--branco);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--borda);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.3s;
}

.cartao-pilar:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

.icone-pilar {
    width: 48px;
    height: 48px;
    background-color: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--primaria);
    font-size: 1.5rem;
}

.cartao-pilar h3 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primaria);
    margin-bottom: 0.75rem;
}

.cartao-pilar p {
    font-size: 0.75rem;
    color: var(--texto-suave);
    line-height: 1.6;
}

/* --- Linha do Tempo (Trajetória) --- */
.linha-tempo-sobre {
    background-color: #f8fafc;
    border: 1px solid var(--borda);
    border-radius: 24px;
    padding: 2.5rem;
    margin-top: 3rem;
}

[data-theme="dark"] .linha-tempo-sobre {
    background-color: var(--branco); /* Ajuste sutil para o modo noturno */
}

.cabecalho-tempo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    color: var(--primaria);
}

.cabecalho-tempo h3 {
    font-weight: 700;
    font-size: 1.25rem;
}

.grade-trajetoria {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.item-trajetoria {
    background-color: var(--fundo-claro);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--borda);
}

.ano-trajetoria {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background-color: var(--primaria);
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 900;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.item-trajetoria h4 {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--primaria);
    margin-bottom: 0.5rem;
}

.item-trajetoria p {
    font-size: 0.75rem;
    color: var(--texto-suave);
    line-height: 1.5;
}

/* ============================================================
   CORREÇÕES DO BANNER E RODAPÉ NO MODO ESCURO
   ============================================================ */

/* --- 1. BANNER PRINCIPAL --- */
/* Força o texto do banner a ser branco puro, garantindo leitura sobre a imagem de fundo */
[data-theme="dark"] .conteudo-destaque {
    color: #ffffff;
}

/* Ajuste dos botões do banner para não sumirem no fundo escuro */
[data-theme="dark"] .botao-primario {
    background-color: var(--primaria); 
    color: #ffffff;
}

[data-theme="dark"] .botao-contorno {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .botao-contorno:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* --- 2. RODAPÉ (FOOTER) --- */
/* Escurece o fundo do rodapé para integrar melhor com o modo noturno da loja */
[data-theme="dark"] footer {
    background-color: #080f1e; /* Um tom de azul quase preto, mais escuro que o fundo da página */
    border-top: 1px solid var(--borda);
    color: var(--texto-suave);
}

/* Garante que o logotipo, títulos das colunas e selos fiquem bem claros */
[data-theme="dark"] .logotipo-rodape,
[data-theme="dark"] .coluna-rodape h4,
[data-theme="dark"] .selo-pagamento {
    color: var(--texto-escuro); /* No modo escuro, essa variável é quase branca (#f8fafc) */
}

/* Melhora o destaque dos links do rodapé ao passar o mouse */
[data-theme="dark"] .coluna-rodape a:hover {
    color: var(--primaria); 
}

/* Ajusta as cores das redes sociais (LinkedIn, Facebook, etc.) */
[data-theme="dark"] .botao-social {
    color: var(--texto-escuro);
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .botao-social:hover {
    background-color: var(--primaria);
    color: #ffffff;
}

/* --- Responsividade --- */
@media (max-width: 1024px) {
    .grade-sobre-topo {
        grid-template-columns: 1fr;
    }
    .cartao-imagem-sobre {
        min-height: 350px;
    }
    .grade-trajetoria {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cartao-sobre-missao {
        padding: 2rem;
    }
    .titulo-sobre-grande {
        font-size: 2rem;
    }
    .grade-pilares {
        grid-template-columns: 1fr;
    }
    .grade-trajetoria {
        grid-template-columns: 1fr;
    }

    .cabecalho-lista-produtos 
    { display: none !important; }
        .item-carrinho { flex-direction: column !important; align-items: stretch !important; gap: 15px; }
        .detalhes-produto { width: 100% !important; }
        .valores-produto { display: flex !important; justify-content: space-between !important; align-items: center !important; border-top: 1px dashed #e2e8f0; padding-top: 15px; width: 100% !important; }
        .valores-produto > div { text-align: left !important; flex: none !important; }
        .linha-pagamento { flex-direction: column !important; }
        .linha-pagamento select, .linha-pagamento button { width: 100% !important; margin-top: 10px; }
        .frete-input-grupo { display: flex; flex-direction: column; gap: 8px; width: 100%; }
        .frete-input-grupo input, .frete-input-grupo button { width: 100% !important; border-radius: 6px !important; }
      
}

/* ============================================================
   12. MEDIA QUERIES 
   ============================================================ */

/* --- A partir de 640px (Smartphones Grandes e Tablets) --- */
@media (min-width: 640px) {
      .grade-produtos {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

/* --- A partir de 768px (Tablets e Desktops) --- */
@media (min-width: 768px) {
    .secao-produto {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Entre 600px e 1023px (Ajustes de botões para Tablets) --- */
@media (min-width: 600px) and (max-width: 1023px) {
    .botoes-acao {
        flex-direction: row;
    }
    .botao-comprar-agora,
    .botao-no-carrinho {
        flex: 1;
        max-width: 280px;
    }
}

/* --- A partir de 1024px (Telas Grandes / Desktops) --- */
@media (min-width: 1024px) {
   
    .grade-produtos {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
    .catalogo-container {
        flex-direction: row;
        align-items: flex-start;
    }
    .sidebar {
        width: 280px;
        flex-shrink: 0;
        position: sticky;
        top: 100px;
    }
    .area-produtos {
        flex: 1;
        min-width: 0;
    }
}

/* --- Até 1024px (Tablets grandes e menores) --- */
@media (max-width: 1024px) {
    .grade-rodape {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* --- Até 768px (Smartphones e Tablets) --- */
@media (max-width: 768px) {
    /* =========================================
       1. CABEÇALHO E NAVEGAÇÃO (MOBILE - COM LUPA)
       ========================================= */
    header {
        padding: 8px 0; 
    }
    
    .cabecalho-conteudo {
        flex-wrap: wrap;
    }

    .logotipo-img {
        height: 40px; 
        border-radius: 8px;
    }

    .cabecalho-acoes {
        gap: 5px; 
    }

    /* Estilo para a nova lupa do mobile */
    .botao-pesquisa-mobile {
        display: flex;
    }

    .botao-carrinho {
        padding: 6px 10px; 
        border-radius: 8px;
        font-size: 0.9rem;
    }

    .contador-carrinho {
        width: 18px; 
        height: 18px; 
        font-size: 0.65rem;
    }

    /* Barra de pesquisa Oculta por padrão no mobile */
    .barra-pesquisa {
        display: none; 
        order: 3;
        flex-basis: 100%;
        max-width: 100%; 
        margin-top: 15px; 
        padding-bottom: 5px;
    }
    
    /* Classe que o JavaScript vai adicionar para mostrar a barra */
    .barra-pesquisa.ativa {
        display: block;
        animation: deslizarBaixo 0.3s ease;
    }

    /* Animação suave ao abrir a pesquisa */
    @keyframes deslizarBaixo {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .barra-pesquisa input {
        padding: 10px 15px 10px 40px; 
        font-size: 0.85rem;
    }
    
    .icone-pesquisa {
        left: 12px;
    }

    .mobile-only {
        display: flex;
    }

    .grid-contato {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .cabecalho-secao-contato h2 {
        font-size: 2rem;
    }
    .cartao-contato {
        padding: 25px;
    }
    .cartao-mapa {
        min-height: 300px;
    }
    .mapa {
        min-height: 300px;
    }

    /* =========================================
       2. LAYOUTS GERAIS E TEXTOS
       ========================================= */
    .cabecalho-secao {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .titulo-secao h1 {
        font-size: 1.8rem;
    }

    .cartao-destaque {
        min-height: 380px;
        border-radius: 20px;
    }
    
    .titulo-destaque {
        font-size: 2rem;
    }
    
    .descricao-destaque {
        font-size: 1rem;
    }
    
    .conteudo-destaque {
        padding: 35px 25px;
        gap: 18px;
    }

    .banner-promocional {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        border-radius: 20px;
    }
    
    .texto-promocional h2 {
        font-size: 1.75rem;
    }

    .nossa-missao {
        border-radius: 30px;
        margin: 30px 0;
        padding: 50px 0;
    }
    
    .conteudo-missao {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .texto-missao h2 {
        font-size: 2rem;
    }

    /* =========================================
       3. PÁGINA DE PRODUTOS
       ========================================= */
    .secao-produto {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .titulo-produto {
        font-size: 1.75rem;
    }
    
    .botoes-acao {
        flex-direction: column;
    }

    /* =========================================
       4. MENU LATERAL DE FILTROS (OFF-CANVAS)
       ========================================= */
    .botao-abrir-filtros {
        width: 100%;
        background-color: var(--branco);
        border: 1px solid var(--borda);
        color: var(--primaria);
        padding: 12px;
        border-radius: 8px;
        font-weight: bold;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px var(--sombra);
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -100%; 
        width: 85%; 
        max-width: 350px;
        height: 100vh;
        background-color: var(--fundo-claro);
        z-index: 1000;
        transition: left 0.3s ease-in-out;
        overflow-y: auto; 
        box-shadow: 5px 0 15px rgba(0,0,0,0.3);
    }

    .sidebar.ativa {
        left: 0;
    }

    .sidebar-conteudo {
        border: none; 
        box-shadow: none;
        padding: 1.25rem;
    }

    .botao-fechar-filtros {
        align-self: flex-end;
        font-size: 1.2rem;
        color: var(--texto-suave);
        padding: 10px;
        background-color: var(--branco);
        color: var(--primaria);
        padding: 15px 30px;
        border-radius: 12px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: background 0.3s;
    }

    /* =========================================
       5. RODAPÉ
       ========================================= */
    .grade-rodape {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .rodape-inferior {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .informacao-rodape,
    .coluna-rodape {
        align-items: center;
        text-align: center;
    }
    
    .lista-contato li {
        justify-content: center;
    }
    
    .links-sociais {
        justify-content: center;
    }
}

/* --- Até 480px (Smartphones Menores) --- */
@media (max-width: 480px) {
    .logotipo-img {
        height: 45px;
        border-radius: 10px;
    }
    .cartao-destaque {
        min-height: 320px;
        border-radius: 16px;
    }
    .titulo-destaque {
        font-size: 1.6rem;
    }
    .conteudo-destaque {
        padding: 25px 20px;
    }
    .botao-primario,
    .botao-contorno {
        padding: 12px 20px;
        font-size: 0.875rem;
    }
   
    .grade-produtos {
        grid-template-columns: 1fr;
    }
    .texto-promocional h2 {
        font-size: 1.5rem;
    }
    .botao-grande {
        width: 100%;
        text-align: center;
    }
    .nossa-missao {
        border-radius: 20px;
    }
    .imagem-missao {
        height: 260px;
    }
    .titulo-produto {
        font-size: 1.5rem;
    }
    .preco-atual {
        font-size: 1.5rem;
    }
    .grade-recursos {
        grid-template-columns: 1fr;
    }
    .tabela-col-label {
        width: 40%;
    }
    .rodape-inferior {
        align-items: center;
        text-align: center;
    }
    .item-rodape-inferior {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}

/* --- Até 320px (Telas muito pequenas) --- */
@media (max-width: 320px) {
    .logotipo-img {
        height: 38px;
        border-radius: 8px;
    }
    .botao-icone {
        padding: 6px;
        font-size: 0.95rem;
    }
    .botao-carrinho {
        padding: 8px 10px;
        gap: 6px;
        font-size: 0.8rem;
    }
    .titulo-destaque {
        font-size: 1.35rem;
    }
    .conteudo-destaque {
        padding: 20px 15px;
        gap: 14px;
    }
}