/* =================================================================== */
/* CSS PARA MARKETPLACE - Focus Grid v3 by Gemini                    */
/* Foco em conversão, clareza e design profissional.                 */
/* Compatível com a estrutura HTML e JS existentes.                  */
/* =================================================================== */

/* --- 1. IMPORTAÇÃO DE FONTES E VARIÁVEIS DE DESIGN (Mantido) --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Lato:wght@400;700&display=swap');

:root {
    /* Cores (Mantidas conforme solicitado) */
    --cor-primaria-escura: #0D2C4B;
    --cor-primaria-cta: #007AFF;
    --cor-primaria-cta-hover: #005ECE;
    --cor-texto-principal: #212529;
    --cor-texto-secundario: #6c757d;
    --cor-fundo-pagina: #F8F9FA;
    --cor-fundo-elemento: #FFFFFF;
    --cor-borda: #E9ECEF;
    --cor-avaliacao: #FFC107;

    /* Tipografia */
    --fonte-titulo: 'Poppins', sans-serif;
    --fonte-texto: 'Lato', sans-serif;

    /* Outros */
    --raio-borda: 8px;
    --sombra-padrao: 0 4px 15px rgba(0, 0, 0, 0.07);
    --sombra-elevada: 0 8px 30px rgba(0, 0, 0, 0.12);
    --transicao-padrao: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- 2. RESET E ESTILOS GLOBAIS --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--fonte-texto);
    background-color: var(--cor-fundo-pagina);
    color: var(--cor-texto-principal);
    line-height: 1.6;
}

/* --- 3. CABEÇALHO E RODAPÉ (Mantidos conforme solicitado) --- */
header, footer {
    font-family: var(--fonte-texto);
    background-color: var(--cor-fundo-elemento);
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.logo-nav-container {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1400px; margin: 0 auto; padding: 16px 32px;
}
.logo { max-width: 120px; }
nav ul { list-style: none; display: flex; gap: 24px; }
nav ul li a {
    color: var(--cor-texto-principal); text-decoration: none; font-weight: 600;
    font-family: var(--fonte-titulo); font-size: 1rem; padding: 8px 0;
    position: relative; transition: var(--transicao-padrao);
}
nav ul li a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background-color: var(--cor-primaria-cta); transition: width 0.3s ease;
}
nav ul li a:hover { color: var(--cor-primaria-cta); }
nav ul li a:hover::after { width: 100%; }
footer { padding: 32px; margin-top: 64px; border-top: 1px solid var(--cor-borda); box-shadow: none;}

/* --- 4. SEÇÃO PRINCIPAL E TÍTULO (Novo Design) --- */
#cursos {
    padding: 48px 32px;
    max-width: 1400px;
    margin: 0 auto;
}
#cursos h2 {
    text-align: center;
    font-family: var(--fonte-titulo);
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--cor-primaria-escura);
    margin-bottom: 8px;
}
#cursos > p {
    text-align: center;
    font-size: 1.15rem;
    max-width: 750px;
    margin: 0 auto 48px auto;
    color: var(--cor-texto-secundario);
}

/* --- 5. PAINEL DE CONTROLE: FILTROS E PESQUISA (Novo Design) --- */
.barra-pesquisa, .filtros {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background-color: var(--cor-fundo-elemento);
    border: 1px solid var(--cor-borda);
}
.barra-pesquisa {
    padding: 20px;
    border-radius: var(--raio-borda) var(--raio-borda) 0 0;
    border-bottom: none;
}
.filtros {
    flex-wrap: wrap;
    border-radius: 0 0 var(--raio-borda) var(--raio-borda);
    margin-bottom: 48px;
    box-shadow: var(--sombra-padrao);
}
.barra-pesquisa form {
    display: flex; width: 100%; gap: 16px;
}
.barra-pesquisa label, .filtros label {
    font-weight: 600; font-size: 0.95rem; color: var(--cor-texto-secundario);
    margin-right: -8px;
}
.barra-pesquisa input, .filtros select {
    padding: 10px 14px;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    font-size: 1rem;
    font-family: var(--fonte-texto);
    background-color: var(--cor-fundo-pagina);
    transition: var(--transicao-padrao);
}
.barra-pesquisa input:focus, .filtros select:focus {
    outline: none;
    border-color: var(--cor-primaria-cta);
    box-shadow: 0 0 0 3px rgba(0, 127, 255, 0.15);
}
.barra-pesquisa input { flex-grow: 1; }
.barra-pesquisa button {
    font-family: var(--fonte-titulo);
    background-color: var(--cor-primaria-cta);
    color: var(--cor-fundo-elemento);
    padding: 10px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: var(--transicao-padrao);
}
.barra-pesquisa button:hover {
    background-color: var(--cor-primaria-cta-hover);
    transform: translateY(-2px);
}

/* --- 6. LISTA E CARDS DE CURSOS (Novo Design "Focus Grid") --- */
.lista-cursos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}
.curso {
    background-color: var(--cor-fundo-elemento);
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-padrao);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transicao-padrao);
    border: 1px solid transparent; /* Para evitar "pulo" no hover */
}
.curso:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-elevada);
    border-color: var(--cor-primaria-cta);
}
.curso img {
    width: 100%;
    display: block;
    /* CHAVE PARA CONSISTÊNCIA VISUAL: */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: #eee; /* Cor de fundo enquanto a imagem carrega */
}
.curso h3 {
    font-family: var(--fonte-titulo);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cor-primaria-escura);
    margin: 16px 20px 4px 20px;
    line-height: 1.4;
    min-height: 46px; /* Garante altura para 2 linhas, evitando pulos */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.curso .categoria {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cor-texto-secundario);
    margin: 0 20px 16px 20px;
}
/* Agrupador para Preço e Avaliação */
.curso-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px 16px 20px;
    gap: 16px;
}
.curso .preco {
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cor-primaria-cta);
}
.curso .avaliacao {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cor-texto-secundario);
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--cor-fundo-pagina);
    padding: 4px 8px;
    border-radius: 4px;
}
.curso .avaliacao::before {
    content: '★';
    color: var(--cor-avaliacao);
}
.curso .ver-curso {
    display: block;
    text-align: center;
    font-family: var(--fonte-titulo);
    background-color: var(--cor-primaria-cta);
    color: var(--cor-fundo-elemento);
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transicao-padrao);
    margin-top: auto; /* Empurra para a base do card */
}
.curso .ver-curso:hover {
    background-color: var(--cor-primaria-cta-hover);
}

/* --- 7. PAGINAÇÃO (Design Refinado) --- */
#paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 64px;
}
#paginacao a {
    color: var(--cor-texto-secundario);
    padding: 10px 18px;
    text-decoration: none;
    transition: var(--transicao-padrao);
    border-radius: var(--raio-borda);
    font-weight: 700;
    border: 1px solid var(--cor-borda);
    background-color: var(--cor-fundo-elemento);
}
#paginacao a:hover {
    background-color: #e9ecef;
    color: var(--cor-primaria-cta);
    transform: translateY(-2px);
}
#paginacao a.ativo {
    background-color: var(--cor-primaria-cta);
    color: var(--cor-fundo-elemento);
    border-color: var(--cor-primaria-cta);
    box-shadow: 0 4px 10px rgba(0, 127, 255, 0.3);
    transform: translateY(-2px);
}

/* --- 8. RESPONSIVIDADE --- */
@media (max-width: 992px) {
    .lista-cursos { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 768px) {
    nav ul { display: none; }
    #cursos { padding: 32px 16px; }
    .barra-pesquisa { flex-direction: column; align-items: stretch; }
    .filtros { flex-direction: column; align-items: stretch; }
    .filtros label { margin-bottom: 4px; }
}
@media (max-width: 480px) {
    .lista-cursos { grid-template-columns: 1fr; }
}