/* --- CONFIGURAÇÕES GERAIS E CORES --- */
:root {
    --primary: #770623;
    --white: #ffffff;
    --dark: #1a0106;
    --transition: 0.3s ease;
}

body, html {
    background-color: #ffffff !important; /* Força o branco em tudo */
    margin: 0;
    padding: 0;
}
/* --- ESTILO DA PÁGINA DE SELEÇÃO --- */

.container {
    max-width: 95% !important; /* Quase encosta nos cantos */
    width: 95% !important;
    margin: 0 auto;
}
/* Ajuste do container para ser largo */
.container.page-selection {
    max-width: 96% !important; /* Faz o conteúdo expandir para os lados */
    width: 96%;
}

.selection-header {
    margin-bottom: 70px;
    text-align: center;
}

.selection-header h2 { 
    color: var(--primary);
    font-family: 'Cinzel', serif; 
    font-size: 3rem; 
    margin-bottom: 15px; 
}

.selection-header p {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.6;
}

.counter-badge { 
    display: inline-block; 
    background: var(--primary); 
    color: white; 
    padding: 10px 25px; 
    border-radius: 50px; 
    font-weight: 600; 
    margin-top: 25px;
    box-shadow: 0 4px 15px rgba(119, 6, 35, 0.2);
}

/* --- LAYOUT POR CATEGORIAS --- */
.categoria-section {
    margin-bottom: 120px;
    width: 100%;
}
.categoria-titulo {
    font-family: 'Cinzel', serif;
    color: var(--primary);
    font-size: 1.8rem;
    margin-bottom: 40px;
    padding-left: 10px;
    border-left: 5px solid var(--primary); /* Um detalhe elegante em vez da borda embaixo */
    text-align: left;
}

/* Grid fixo de 4 colunas */


/* --- CARD DE DOCE SELECIONÁVEL --- */


.selectable-card:hover { 
    border-color: var(--primary); 
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

.selectable-card.selected { 
    border-color: var(--primary); 
    background: #fffcfd; /* Um tom de branco quase imperceptível para destacar */
}

/* Ícone de check para selecionados */
.selectable-card.selected::after {
    content: '✓'; 
    position: absolute; 
    top: 10px; 
    right: 10px;
    background: var(--primary); 
    color: var(--white);
    width: 28px; 
    height: 28px; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold;
    font-size: 0.9rem;
}

.card-name { 
    font-family: 'Cinzel', serif; 
    font-size: 1.1rem; 
    margin-bottom: 8px; 
    color: var(--dark); 
}

.price-bar {
    background: #ffffff;
    box-shadow: 0 -15px 50px rgba(0,0,0,0.1);
    border-top: 1px solid #eee;
}

/* --- BARRA DE PREÇO FIXA --- */
.price-bar {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%;
    background: var(--white); 
    color: var(--dark);
    padding: 25px 0; 
    z-index: 999;
    transform: translateY(100%); 
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.08);
    border-top: 1px solid rgba(119, 6, 35, 0.1);
}

.price-bar.active { transform: translateY(0); }



.total-info span { font-size: 0.9rem; color: #777; text-transform: uppercase; }
.total-info h3 { 
    font-family: 'Cinzel', serif; 
    font-size: 2rem; 
    color: var(--primary); 
}

.btn-finish {
    background: var(--primary); 
    color: white; 
    border: none;
    padding: 18px 45px; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    cursor: pointer; 
    font-weight: 600; 
    transition: 0.3s;
}

.btn-finish:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* --- MODAL DE FINALIZAÇÃO --- */
.modal {
    position: fixed; 
    inset: 0; 
    background: rgba(26, 1, 6, 0.92);
    z-index: 2000; 
    display: none; 
    align-items: center; 
    justify-content: center;
    backdrop-filter: blur(8px);
}
.modal.active { display: flex; }

.modal-content {
    background: var(--white); 
    border: 2px solid var(--primary);
    padding: 50px 40px; 
    width: 95%; 
    max-width: 600px; 
    text-align: center;
    color: var(--dark);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

/* Itens no Modal */
#resumo-itens {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 15px;
    margin: 30px 0;
    text-align: left;
}

.resumo-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fcfcfc;
    padding: 12px;
    border: 1px solid #f0f0f0;
}

.resumo-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

/* --- RESPONSIVIDADE --- */


/* --- SCROLLBAR --- */
#resumo-itens::-webkit-scrollbar { width: 5px; }
#resumo-itens::-webkit-scrollbar-thumb { background: var(--primary); }

/* --- SEÇÃO DE MARKETING (CORREÇÃO DE CORES) --- */
.section-marketing-degustacao {
    margin-top: 100px;
    padding: 80px 40px;
    background: #fdfafb !important; /* Fundo claro */
    border: 1px solid rgba(119, 6, 35, 0.05);
    text-align: center;
    color: var(--dark) !important; /* Força o texto geral a ser escuro */
}

.marketing-content h2 {
    color: var(--primary) !important;
    font-family: 'Cinzel', serif;
    margin-bottom: 30px;
}

.marketing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 50px 0;
}

.m-item h4 {
    font-family: 'Cinzel', serif;
    color: var(--primary) !important; /* Títulos em Bordô */
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.m-item p {
    color: #444 !important; /* Texto descritivo em Cinza Escuro */
    font-size: 0.95rem;
    line-height: 1.6;
}

.marketing-cta {
    margin-top: 50px;
    border-top: 1px solid #ddd;
    padding-top: 40px;
}

.marketing-cta p {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    margin-bottom: 25px;
    color: var(--dark) !important; /* Texto "Pronto para vivenciar..." */
}

/* Garante que o botão tenha contraste */
.marketing-cta .btn-hero {
    background: var(--primary);
    color: white !important;
    border: none;
    padding: 15px 40px;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

.marketing-cta .btn-hero:hover {
    background: var(--dark);
    transform: translateY(-3px);
}

/* Ajuste Responsivo */
@media (max-width: 850px) {
    .marketing-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}



/* --- CONFIGURAÇÕES GERAIS E CORES --- */
:root {
    --primary: #770623;
    --white: #ffffff;
    --dark: #1a0106;
    --transition: 0.3s ease;
}

body, html {
    background-color: #ffffff !important; /* Força o branco em tudo */
    margin: 0;
    padding: 0;
}
/* --- ESTILO DA PÁGINA DE SELEÇÃO --- */
.page-selection { 
    background-color: #ffffff !important;
    padding: 160px 4% 120px; /* 4% de margem nas bordas da tela */
    width: 100%;
    max-width: 100vw; /* Ocupa 100% da largura da janela */
    box-sizing: border-box;
}

.container {
    max-width: 95% !important; /* Quase encosta nos cantos */
    width: 95% !important;
    margin: 0 auto;
}
/* Ajuste do container para ser largo */
.container.page-selection {
    max-width: 96% !important; /* Faz o conteúdo expandir para os lados */
    width: 96%;
}

.selection-header {
    margin-bottom: 70px;
    text-align: center;
}

.selection-header h2 { 
    color: var(--primary);
    font-family: 'Cinzel', serif; 
    font-size: 3rem; 
    margin-bottom: 15px; 
}

.selection-header p {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.6;
}

.counter-badge { 
    display: inline-block; 
    background: var(--primary); 
    color: white; 
    padding: 10px 25px; 
    border-radius: 50px; 
    font-weight: 600; 
    margin-top: 25px;
    box-shadow: 0 4px 15px rgba(119, 6, 35, 0.2);
}

/* --- LAYOUT POR CATEGORIAS --- */
.categoria-section {
    margin-bottom: 120px;
    width: 100%;
}
.categoria-titulo {
    font-family: 'Cinzel', serif;
    color: var(--primary);
    font-size: 1.8rem;
    margin-bottom: 40px;
    padding-left: 10px;
    border-left: 5px solid var(--primary); /* Um detalhe elegante em vez da borda embaixo */
    text-align: left;
}

/* Grid fixo de 4 colunas */
.categoria-grid {
    display: grid; 
    /* Mantém 4 colunas mas elas ficam maiores agora */
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px; /* Mais espaço entre os doces para não embolar */
}

/* --- CARD DE DOCE SELECIONÁVEL --- */
.selectable-card {
    background: #ffffff;
    border: 1px solid #f0f0f0; /* Borda bem clarinha */
    padding: 25px; 
    transition: var(--transition); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* Sombra bem leve */
}

.selectable-card:hover { 
    border-color: var(--primary); 
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

.selectable-card.selected { 
    border-color: var(--primary); 
    background: #fffcfd; /* Um tom de branco quase imperceptível para destacar */
}

/* Ícone de check para selecionados */
.selectable-card.selected::after {
    content: '✓'; 
    position: absolute; 
    top: 10px; 
    right: 10px;
    background: var(--primary); 
    color: var(--white);
    width: 28px; 
    height: 28px; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold;
    font-size: 0.9rem;
}

.card-img { 
    width: 100%; 
    aspect-ratio: 1/1; 
    object-fit: cover; 
    margin-bottom: 20px; 
    border-radius: 2px;
}

.card-name { 
    font-family: 'Cinzel', serif; 
    font-size: 1.1rem; 
    margin-bottom: 8px; 
    color: var(--dark); 
}

.price-bar {
    background: #ffffff;
    box-shadow: 0 -15px 50px rgba(0,0,0,0.1);
    border-top: 1px solid #eee;
}

/* --- BARRA DE PREÇO FIXA --- */
.price-bar {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%;
    background: var(--white); 
    color: var(--dark);
    padding: 25px 0; 
    z-index: 999;
    transform: translateY(100%); 
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.08);
    border-top: 1px solid rgba(119, 6, 35, 0.1);
}

.price-bar.active { transform: translateY(0); }

.bar-content { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.total-info span { font-size: 0.9rem; color: #777; text-transform: uppercase; }
.total-info h3 { 
    font-family: 'Cinzel', serif; 
    font-size: 2rem; 
    color: var(--primary); 
}

.btn-finish {
    background: var(--primary); 
    color: white; 
    border: none;
    padding: 18px 45px; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    cursor: pointer; 
    font-weight: 600; 
    transition: 0.3s;
}

.btn-finish:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* --- MODAL DE FINALIZAÇÃO --- */
.modal {
    position: fixed; 
    inset: 0; 
    background: rgba(26, 1, 6, 0.92);
    z-index: 2000; 
    display: none; 
    align-items: center; 
    justify-content: center;
    backdrop-filter: blur(8px);
}
.modal.active { display: flex; }

.modal-content {
    background: var(--white); 
    border: 2px solid var(--primary);
    padding: 50px 40px; 
    width: 95%; 
    max-width: 600px; 
    text-align: center;
    color: var(--dark);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

/* Itens no Modal */
#resumo-itens {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 15px;
    margin: 30px 0;
    text-align: left;
}

.resumo-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fcfcfc;
    padding: 12px;
    border: 1px solid #f0f0f0;
}

.resumo-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 1200px) {
    .categoria-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 850px) {
    .categoria-grid { grid-template-columns: repeat(2, 1fr); }
    .page-selection { padding-top: 120px; }
}

@media (max-width: 480px) {
    .categoria-grid { grid-template-columns: 1fr; }
    .modal-content { padding: 30px 20px; }
    #resumo-itens { grid-template-columns: 1fr; }
    .bar-content { flex-direction: column; gap: 20px; text-align: center; }
}

/* --- SCROLLBAR --- */
#resumo-itens::-webkit-scrollbar { width: 5px; }
#resumo-itens::-webkit-scrollbar-thumb { background: var(--primary); }

/* --- SEÇÃO DE MARKETING (CORREÇÃO DE CORES) --- */
.section-marketing-degustacao {
    margin-top: 100px;
    padding: 80px 40px;
    background: #fdfafb !important; /* Fundo claro */
    border: 1px solid rgba(119, 6, 35, 0.05);
    text-align: center;
    color: var(--dark) !important; /* Força o texto geral a ser escuro */
}

.marketing-content h2 {
    color: var(--primary) !important;
    font-family: 'Cinzel', serif;
    margin-bottom: 30px;
}

.marketing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 50px 0;
}

.m-item h4 {
    font-family: 'Cinzel', serif;
    color: var(--primary) !important; /* Títulos em Bordô */
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.m-item p {
    color: #444 !important; /* Texto descritivo em Cinza Escuro */
    font-size: 0.95rem;
    line-height: 1.6;
}

.marketing-cta {
    margin-top: 50px;
    border-top: 1px solid #ddd;
    padding-top: 40px;
}

.marketing-cta p {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    margin-bottom: 25px;
    color: var(--dark) !important; /* Texto "Pronto para vivenciar..." */
}

/* Garante que o botão tenha contraste */
.marketing-cta .btn-hero {
    background: var(--primary);
    color: white !important;
    border: none;
    padding: 15px 40px;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

.marketing-cta .btn-hero:hover {
    background: var(--dark);
    transform: translateY(-3px);
}

/* Ajuste Responsivo */
@media (max-width: 850px) {
    .marketing-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}