/* Estilos gerais (mantidos) */
body { margin: 0; font-family: sans-serif; }
a { text-decoration: none; }

/* Estilos da seção Novidades (mantidos) */
.novidades-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0818 0%, #1a1033 100%);
}
.novidades-section::before { /* ... estilos do pseudo-elemento mantidos ... */
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(101, 45, 245, 0.1) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(245, 166, 35, 0.1) 0%, transparent 40%);
    z-index: 0;
}
.novidades-container {
    position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.novidades-title { /* ... estilos do título mantidos ... */
    text-align: center; font-size: 2.5rem; margin-bottom: 50px; font-weight: 700;
    position: relative; display: inline-block; left: 50%; transform: translateX(-50%); color: #fff;
}
.novidades-title::after { /* ... estilos do after do título mantidos ... */
    content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
    width: 80px; height: 3px; background: #f5a623;
}

/* --- ALTERAÇÕES PRINCIPAIS NO LAYOUT DOS CARDS --- */

.cards-container {
    /* ALTERAÇÃO: Não é mais flex row. Itens internos vão empilhar por padrão. */
    /* display: flex; */ /* Removido */
    /* gap: 30px; */    /* Removido */
    /* align-items: flex-start; */ /* Removido */
}

.card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    /* ALTERAÇÃO: Remover altura fixa/100% para permitir altura natural */
    /* height: 100%; */
}
.card:hover { /* ... :hover mantido ... */
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.card-image { /* ... estilos da imagem mantidos ... */
    width: 100%; height: 200px; /* Ajuste altura se necessário */
    overflow: hidden; flex-shrink: 0;
}
.card-image img { /* ... estilos da img mantidos ... */
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block;
}
.card:hover .card-image img { transform: scale(1.05); }
.card-content { /* ... estilos do conteúdo mantidos (flex column interno) ... */
    padding: 20px; display: flex; flex-direction: column; flex-grow: 1;
}
.card-category { /* ... estilos da categoria mantidos ... */
    display: inline-block; padding: 5px 10px; background: #f5a623; color: #000; border-radius: 5px;
    font-size: 0.8rem; font-weight: 600; margin-bottom: 10px; align-self: flex-start;
}
.card-title { /* ... estilos do título do card mantidos ... */
    font-size: 1.5rem; margin: 0 0 10px 0; font-weight: 600; color: #fff;
}
.card-secondary .card-title { font-size: 1.2rem; }
.card-text { /* ... estilos do texto mantidos (flex-grow para empurrar botão) ... */
    color: rgba(255, 255, 255, 0.8); margin-bottom: 15px; line-height: 1.5; flex-grow: 1;
}
.card-button { /* ... estilos do botão mantidos (margin-top auto) ... */
    display: inline-block; padding: 8px 15px; background: transparent; color: #f5a623; border: 1px solid #f5a623;
    border-radius: 5px; text-decoration: none; font-weight: 500; transition: all 0.3s ease;
    margin-top: auto; align-self: flex-start;
}
.card-button:hover { background: #f5a623; color: #000; }

.card-principal {
    /* ALTERAÇÃO: Não precisa mais de 'flex: 2' */
    /* flex: 2; */
    width: 100%; /* Garante largura total (embora block já faça isso) */
    /* ALTERAÇÃO: Adiciona margem abaixo para separar dos secundários */
    margin-bottom: 40px; /* Ajuste o valor conforme necessário */
}

.secondary-cards {
    /* ALTERAÇÃO: Torna-se o container flex row para os cards secundários */
    display: flex;
    flex-direction: row; /* Padrão, mas explícito */
    flex-wrap: wrap; /* Permite que os cards quebrem linha */
    gap: 20px; /* Espaço entre os cards secundários */
    /* ALTERAÇÃO: Não precisa mais de 'flex: 1' como filho do .cards-container */
    /* flex: 1; */
}

.card-secondary {
    /* ALTERAÇÃO: Define como os cards secundários se comportam na linha flex */
    flex: 1 1 300px; /* Cresce (1), Encolhe (1), Base de 300px */
    /* Alternativa: 3 colunas (ajustar calc para o gap exato) */
    /* flex: 1 1 calc(33.333% - 14px); */
    min-width: 280px; /* Garante uma largura mínima antes de quebrar */
}

/* --- Responsividade --- */
/* Ajustar as regras para o novo layout */

@media (max-width: 992px) {
    /* O layout principal já empilha, então não precisa mudar .cards-container */
    .card-principal {
        margin-bottom: 30px; /* Ajuste margem se necessário */
    }
    .secondary-cards {
        gap: 15px; /* Ajuste o gap se necessário */
    }
    .card-secondary {
        /* Exemplo: Mudar para 2 colunas */
        flex-basis: calc(50% - 8px); /* Ajustar calc para o novo gap */
        min-width: 0; /* Resetar min-width se a base % for suficiente */
    }
}

@media (max-width: 768px) {
    .novidades-title {
        font-size: 2rem; /* Mantido */
    }
     .card-principal {
        margin-bottom: 25px; /* Ajuste margem se necessário */
    }
    .secondary-cards {
        gap: 15px;
    }
    .card-secondary {
        /* Exemplo: Mudar para 1 coluna */
        flex-basis: 100%;
    }
}