.hero {

    background: linear-gradient(135deg, #2c5aa0, #1e3a8a);

    color: white;

    text-align: center;

    padding: 150px 0 100px;

    margin-top: 70px;

}



.hero h2 {

    font-size: 3rem;

    margin-bottom: 20px;

}



.hero p {

    font-size: 1.2rem;

    margin-bottom: 30px;

    opacity: 0.9;

}



.produtos {

    padding: 80px 0;

}



.section-title {

    text-align: center;

    font-size: 2.5rem;

    color: #2c5aa0;

    margin-bottom: 50px;

}



.filtros {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-bottom: 40px;

    flex-wrap: wrap;

}



.filtro-btn {

    padding: 10px 20px;

    border: 2px solid #2c5aa0;

    background: white;

    color: #2c5aa0;

    border-radius: 25px;

    cursor: pointer;

    transition: all 0.3s ease;

    font-weight: 600;

}



.filtro-btn.active,

.filtro-btn:hover {

    background: #2c5aa0;

    color: white;

}



.produtos-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

}



.produto-card {

    background: white;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    transition: transform 0.3s ease;

}



.produto-card:hover {

    transform: translateY(-5px);

}



.produto-imagem {

    width: 100%;

    height: 250px;

    object-fit: cover;

}



.produto-info {

    padding: 20px;

}



.produto-categoria {

    color: #666;

    font-size: 0.9rem;

    text-transform: uppercase;

    margin-bottom: 10px;

}



.produto-nome {

    font-size: 1.3rem;

    color: #333;

    margin-bottom: 10px;

}



.produto-descricao {

    color: #666;

    margin-bottom: 15px;

    line-height: 1.5;

}



.produto-preco {

    font-size: 1.5rem;

    color: #2c5aa0;

    font-weight: bold;

    margin-bottom: 15px;

}



.produto-acoes {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.footer {

    background: #333;

    color: white;

    text-align: center;

    padding: 30px 0;

}