/* Arquivo: style.css */
/* Versão atualizada com estilo para .imagem-produto (para as imagens reais nos cards). */

/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --cor-primaria: #4e9551; /* Verde Jardim */
    --cor-secundaria: #8BC34A; /* Verde Lima */
    --cor-fundo: #F1F8E9; /* Creme Claro */
    --cor-texto: #333;
    --cor-borda-card: #E0E0E0;
    --sombra-card: 0 4px 8px rgba(0, 0, 0, 0.1);
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
    padding-bottom: 50px; /* Espaço para o rodapé */
}

/* Cabeçalho */
.cabecalho {
    background-color: var(--cor-primaria);
    color: white;
    padding: 2rem 1rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cabecalho h1 {
    margin-bottom: 0.5rem;
    font-size: 2.5rem;
}

.cabecalho p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Conteúdo Principal */
.conteudo-principal {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Seção de Venda (Vídeo + Produtos) */
.secao-venda {
    background-color: white;
    padding: 2rem;
    margin-bottom: 3rem;
    border-radius: 10px;
    box-shadow: var(--sombra-card);
}

.secao-venda h2 {
    color: var(--cor-primaria);
    border-bottom: 2px solid var(--cor-secundaria);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.chamada-produto {
    font-style: italic;
    margin: 1.5rem 0 1rem 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: #555;
}

/* Embed do Instagram */
.embed-container {
    width: 100%;
    max-width: 600px; /* Limita a largura do vídeo */
    margin: 0 auto 1.5rem auto;
    /* Estilo para o placeholder (removido borda e fundo) */
    text-align: center;
}

.placeholder-embed {
    padding: 20px;
    border: 1px dashed #ccc; /* Borda mais discreta */
    background-color: #f9f9f9;
    margin: 1rem auto; /* Centraliza o placeholder */
    max-width: 90%; /* Limita a largura do placeholder */
}

.placeholder-embed p {
    margin: 0.5rem 0;
}

/* Cards de Produto */
.produtos-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.card-produto {
    background-color: #fff;
    border: 1px solid var(--cor-borda-card);
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.card-produto:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.card-produto h3 {
    color: var(--cor-primaria);
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.descricao-produto {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 1rem;
    min-height: 40px; /* Garante altura mínima para alinhamento */
}

.imagem-placeholder {
    width: 100%;
    height: 150px;
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda-card);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: #999;
    font-style: italic;
    border-radius: 4px;
}

/* Novo estilo para imagens reais dos produtos */
.imagem-produto {
    width: 100%;
    height: 150px;
    object-fit: cover; /* Encaixa a imagem sem distorcer */
    border-radius: 4px;
    margin-bottom: 1rem;
    border: 1px solid var(--cor-borda-card); /* Borda sutil como no placeholder */
}

/* Botão de Comprar */
.botao-comprar {
    display: inline-block;
    background-color: var(--cor-secundaria);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 100%;
}

.botao-comprar:hover {
    background-color: #689F38; /* Um verde mais escuro no hover */
}

/* Rodapé */
.rodape {
    text-align: center;
    padding: 1rem;
    background-color: var(--cor-primaria);
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 0.85rem;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.rodape p {
    margin: 0.2rem 0;
}

/* Responsividade */
@media (max-width: 768px) {
    .cabecalho h1 {
        font-size: 2rem;
    }

    .secao-venda {
        padding: 1rem;
    }

    .produtos-container {
        flex-direction: column;
        align-items: center;
    }

    .card-produto {
        max-width: 90%;
    }
    
    .rodape {
        position: static; /* Rodapé não fixo em telas pequenas */
    }
}