/* Estilo global para o contêiner principal */
@media (min-width: 768px) {
    .conteiner-principal {
        margin-top: 137px;
    }
}

/* ----------------------------
   Estilo Amabee.css
   ----------------------------
   Autor: Isaac Amante
   Data: 2024-06-26
   Descrição: Estilos CSS para descrições de produtos Amabee.
*/


/* Estilo dos paragrafos na classe Pagina_Conteudo
    - Define tipografia, tamanho, espaçamento e cor para parágrafos.
    - Margem inferior para espaçamento entre parágrafos.
*/

.Pagina_Conteudo p {
    font-size: 14px;
}

.Pagina_Conteudo blockquote p {
    margin-bottom: 0;
    font-size: 17.5px;
    font-weight: 300;
    line-height: 1.25;
}

.Pagina_Conteudo li {
    font-size: 14px;
}

/* Estilo para descrição de produtos
   Comentários descritivos adicionados para facilitar manutenção:
   - Cada bloco descreve propósito, variações visuais e notas de acessibilidade.
   - Considere extrair cores/espacamentos para variáveis CSS para temas.
*/

/* ----------------------------
   Container principal do card
   ----------------------------
   - Define tipografia base, cor do texto, fundo degradê e borda.
   - Border-radius e box-shadow para destaque sutil no layout.
   - max-width centraliza o card em larguras maiores.
*/
#produto-card {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: #0f172a;
    background: linear-gradient(180deg, #fff, #f6f8f9);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    max-width: 980px;
    margin: 0 auto;
    box-shadow: 0 8px 28px rgba(2, 6, 23, .06);
}

#produto-card ul{
    list-style-type: circle !important;
}

/* ----------------------------
   Header com título e tags
   ----------------------------
   - layout flexível para permitir quebra (wrap) em telas pequenas.
   - gap entre título e lista de tags para legibilidade.
*/
.produto-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 16px;
    margin-bottom: 14px;
}

/* Título do produto
   - usa clamp() para escalonamento responsivo entre dispositivos.
   - line-height reduzido para títulos compostos.
*/
.produto-header h1 {
    margin: 0;
    font-size: clamp(20px, 2.8vw, 28px);
    line-height: 1.2;
    color: #0b1220;
}

/* Subtítulo ou descrição curta
   - menor contraste que o título para hierarquia visual.
*/
.produto-header p {
    margin: 6px 0 0;
    color: #475569;
    font-size: 14px;
}

/* Tags do produto
   - lista flexível de badges; adaptável em múltiplas linhas.
*/
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Estilo individual das tags
   - badges com borda arredondada (pill).
   - mantido contraste e legibilidade em tamanho reduzido.
*/
.tag {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
}

/* Tag da validade
   - estilo distinto (border dashed + fundo azulado) para chamar atenção.
   - importante garantir contraste suficiente para leitura.
*/
.tag-validade {
    border: 1px dashed #dbeafe;
    background: #eff6ff;
    color: #1e40af;
}

/* ----------------------------
   Seção principal (hero copy)
   ----------------------------
   - bloco branco com borda suave para destacar descrição principal.
   - ideal para resumo curto e pontos fortes do produto.
*/
.hero-copy {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    margin-bottom: 18px;
}

/* Parágrafos na descrição principal */
.hero-copy p {
    margin: 0;
    color: #1f2937;
}

/* Destaque em negrito na descrição principal
   - cor verde para enfatizar benefícios (ex.: natural, orgânico).
*/
.hero-copy strong {
    color: #0b5e3c;
}

/* ----------------------------
   Grid responsivo de colunas
   ----------------------------
   - usa flexbox com wrap; cada coluna tem min-width para colapsar em telas pequenas.
*/
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.col {
    flex: 1 1 320px;
    min-width: 280px;
    border-radius: 12px;
    padding: 16px;
}

.col ul {
    margin: 0;
    padding-left: 18px;
}

/* Coluna de destaques
   - fundo amarelado suave para chamar atenção a pontos fortes.
*/
.col-destaques {
    background: #fffbeb;
    border: 1px solid #fef3c7;
}

.col-destaques h2 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #92400e;
}

.col-destaques ul {
    color: #7c2d12;
}

/* Coluna de compromisso / sustentabilidade
   - fundo esverdeado para reforçar mensagem de responsabilidade.
*/
.col-compromisso {
    background: #ecfdf5;
    border: 1px solid #d1fae5;
}

.col-compromisso h2 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #065f46;
}

.col-compromisso p {
    color: #064e3b;
}

.col-compromisso ul {
    color: #065f46;
}

/* ----------------------------
   Footer com chips e botões
   ----------------------------
   - chips para atributos (orgânico, vegano, etc.)
   - botoes alinhados à direita com gap consistente.
*/
.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #111827;
    color: #f9fafb;
    border-radius: 10px;
    font-size: 12px;
}

/* Botões de ação
   - estilos básicos de botão; adicionar :focus visível para acessibilidade.
*/
.botoes {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.btn {
    cursor: pointer;
    border: 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    /* Nota: adicione outline visível para foco (acessibilidade) se necessário */
}

/* Botão primário - ação principal */
.btn-primary {
    background: #0ea5e9;
    color: #fff;
}

/* Botão secundário - ação de menor prioridade */
.btn-secondary {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #0f172a;
}

/* ----------------------------
   Painel colapsável de ingredientes
   ----------------------------
   - implementação simples com transição em max-height para efeito de desdobrar.
   - usar aria-expanded/aria-controls no botão que controla o painel para acessibilidade.
*/
.ingredientes {
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms ease, padding 180ms ease;
    border-radius: 10px;
    margin-top: 12px;
    background: #ffffff;
    border: 1px solid #e6eef5;
    padding: 0 16px;
}

/* Classe aplicada quando o painel está aberto */
.ingredientes.open {
    padding: 12px 16px;
    max-height: none;

    .ingredientes h3 {
        margin: 0 0 8px;
        font-size: 16px;
        color: #0b1220;
    }

    .ingredientes ul {
        margin: 0;
        padding-left: 18px;
        color: #1f2937;
    }