figure{ margin:0}

body{font-family: Calibri, sans-serif; color:#f6e7d4; margin:0; padding:0}

.page{ background-color:#452415;}
.amarelo{ background-color:#f6e7d4; padding-top:60px; padding-bottom:60px}
.vermelho{ background-color:#452415; min-height:10px}
.rodape {background-color:#452415; font-size:8pt; color:#f6e7d4; text-align:center; padding:10px}

.central { width:96%; margin:0 auto; max-width:930px; box-sizing: border-box;}

.titulo{ box-sizing: border-box; color:#f6e7d4; text-align:center; font-size:25pt; font-weight:bold; margin-bottom:30px; background-image:url(../images/titulo.gif); background-position:center; background-repeat:no-repeat; height:60px; padding-top:15px}



h1 {color:#f6e7d4; font-size:23pt; margin:0; margin-bottom:20px; margin-top:10px; font-style:italic; font-family: 'Georgia', 'Times New Roman', serif; font-weight: normal;}
h2 {color:#f6e7d4; font-size:22pt; font-weight:bold; margin:0; margin-bottom:20px; margin-top:10px; font-style:italic}
h3 {color:#f6e7d4;	font-size:14pt;	margin:0; font-weight:bold; text-align:justify;}
h4 {color:#f6e7d4; font-size:12pt; margin:0; font-weight:400; text-align:center;}

.voltar{background-color:#3a2213; color:#FFF; width:80px; padding:10px; text-align:center; font-size:12pt; margin:auto 0; 
-moz-border-radius:5px;	-webkit-border-radius:5px; border-radius:5px;}

img, picture, video, embed{	border:0; max-width: 100%; /*define a largura máxima em até 100%*/}

A{ text-decoration: none; color:#FFF;}
A:hover{text-decoration: none;}

.banner {width:100%; height:390px; overflow:hidden; background-position:center; background-size:auto 100%; text-align:center; text-shadow: 1px 1px #92c5ec; background-repeat:no-repeat}
.bemvindo{ font-size:35pt; font-weight:bold; padding-top:50px}
.slogan1{ font-size:20pt; padding:20px; font-style:italic; font-family: 'Georgia', 'Times New Roman', serif;}
.slogan2{ font-size:15pt;}

.form{ box-sizing: border-box; font-size: 10pt; padding-left:10px; color:#2f2f2f; border: 0px; width:97%; height:27px;padding-top:2px; margin:5px; margin-left:0; background-color:#FFF; margin-bottom:10px;
font-family: Calibri, sans-serif;-moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.form_txt{box-sizing: border-box; font-size: 10pt; padding-left:10px; color:#2f2f2f; border: 0px; width:97%; height:77px;padding-top:2px; margin:5px; margin-left:0; background-color:#FFF; margin-bottom:10px;
font-family: Calibri, sans-serif;-moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.form_bt{box-sizing: border-box; font-size: 13pt; color:#FFF; border: 0px; width:100%; height:50px; margin:5px; margin-left:0; background-color:#30990d; font-family: Calibri, sans-serif;-moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-align:center}

.botao{	border: 0px; margin:0; 	cursor:pointer;	font-size: 11pt; text-transform:uppercase;	background-color:#30990d; color:#FFFFFF; width:100%; padding:15px; text-align:center;	-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px; box-sizing: border-box;}

.botao_pequeno{border: 0px; margin:0; 	cursor:pointer;	font-size: 8pt; text-transform:uppercase; background-color:#f6e7d4; color:#452415; padding:8px; text-align:center;	-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px; box-sizing: border-box; }

.bloco{line-height:150%; margin:0px; padding-top:10px; text-align:justify; font-size:14pt}

.sep {background-color:#452415; height:1px; width:100%; margin-top:10px; margin-left:0; margin-right:0; margin-bottom:10px; clear:both}

.foto_evento_sem{ width:93%; height:180px; background-color:#f4f4f4; margin:0 auto; margin-bottom:10px; background-image:url(../images/sem.gif); background-position:center; background-repeat:no-repeat}


.fundo_data{float:left; width:60px; display:block; background-color:#f6e7d4; margin-right:10px; margin-bottom:5px;  -moz-border-radius:3px;	-webkit-border-radius:3px; border-radius:3px;}
.dia {color:#452415; font-size:30pt; margin:0px; text-align:center; height:35px;}
.mes {color:#452415; text-align:center;	font-size:15pt;	margin:0px;}
.ano {color:#452415; text-align:center;	font-size:15pt;	margin:0px; padding-bottom:5px}
.leia{background-color:#2f2f2f; color:#FFF; width:80px; padding:10px; text-align:center; font-size:12pt; margin:auto 0;  -moz-border-radius:10px;	-webkit-border-radius:10px; border-radius:10px;}

.botao_eventos{ float:left; margin:10px; margin-left:0; border: 0px; text-transform:uppercase; cursor:pointer; font-size: 11pt; font-weight:bold; background-color:#f6e7d4; padding:20px; text-align:center;	-moz-border-radius: 10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px; color:#452415 !important}

.tabela_rolagem{width: 100%; overflow-y: auto;_overflow: auto;	margin: 0 0 1em}
.loja_tabela{ margin:0;	padding:1px; width:100%; min-width:600px; color:#452415;}*/
.loja_tabela_dados{	font-size: 12pt; margin:0;	padding:10px; padding-top:15px; padding-bottom:15px; text-align:center; color:#452415;}
.loja_tabela_topo{ font-size: 13pt;	color:#FFFFFF; font-weight:bold; background-color:#3a2213; margin:0; padding:7px}

.botao_vermelho_pequeno{border: 0px; margin:0; 	cursor:pointer;	font-size: 9pt; text-transform:uppercase;	background-color:#ff0000; color:#FFFFFF; padding:12px; text-align:center;	-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px; box-sizing: border-box; }

.box_endereco{background-color:#f6e7d4; color:#452415; float:left; box-sizing: border-box; padding:10px; width:100%; text-align:left; margin-bottom:10px}





:root {
    --cor-vinho: #452415;
    --cor-fundo-card: #fff2c6;
    --cor-borda-card: #f5cf87;
}

/* Card Principal da Matéria */
.card-recadinho {
    background-color: var(--cor-fundo-card);
    border: 2px dashed var(--cor-borda-card);
    border-radius: 18px;
    padding: 20px 25px;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-sizing: border-box;
}

.recadinho-col {
    display: flex;
    align-items: center;
}

.content-center {
    flex-direction: column;
    text-align: center;
    flex: 1;
}

.recadinho-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--cor-vinho);
}

.recadinho-header h3 {
    font-family: 'Georgia', cursive, serif;
    font-size: 33px;
    font-style: italic;
    margin: 0;
    color: var(--cor-vinho);
    font-weight: normal;
}

.recadinho-texto {
    font-size: 30px;
    margin-top: 10px;
    color: var(--cor-vinho);
    line-height: 1.4;
}

.badge-sino {
    background-color: #fbd65c;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-sino
{ width:50px; height:50px}

.icon-right {
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.btn-saiba-mais {
    background-color: var(--cor-vinho);
    color: #ffffff !important;
    text-decoration: none;
    padding: 8px 22px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s ease;
}

.btn-saiba-mais:hover {
    opacity: 0.9;
}

/* Seção do Pedido */
/* Container Externo - Largura total e fundo verde */
.card-pedido {
    width: 100%;
    background-color: #f6e7d4;
    padding: 25px 0; /* Espaçamento interno vertical */
    box-sizing: border-box;
}

/* Container Interno - Conteúdo centralizado e limitado */
.pedido-container {
    width: 96%;
    max-width: 930px;
    margin: 0 auto; /* Centraliza o bloco na tela */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Ajustes de cor de texto para contrastar com o fundo verde */
.pedido-texto h4,
.pedido-texto p {
    color: #ffffff; /* Ajuste a cor do texto conforme necessário */
}

.pedido-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pedido-texto h4 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: bold;
    color: var(--cor-vinho);
}

.pedido-texto p {
    margin: 0;
    font-size: 14px;
    color: var(--cor-vinho);
}

.btn-fazer-pedido {
    background-color: var(--cor-vinho);
    color: #ffffff !important;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.5px;
    transition: opacity 0.2s ease;
}

.btn-fazer-pedido:hover {
    opacity: 0.9;
}

/* Regras para Responsividade em Celulares/Tablets */
@media (max-width: 768px) {
    .card-recadinho {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
    }

    .icon-right {
        margin-top: 10px;
    }
	
	.pedido-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .pedido-info {
        flex-direction: column;
    }

    .card-pedido {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .btn-fazer-pedido {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}






/* ==========================================================================
   LISTAGEM DE GRUPOS DE PRODUTOS
   ========================================================================== */

/* Cabeçalho Visual da Seção */
.grupos-header {
    text-align: center;
    margin-bottom: 35px;
}

.grupos-titulo {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2.3rem;
    font-style: italic;
    color: #f6e7d4; /* Tom burgundy/vinho do layout */
    margin: 0 0 10px 0;
    font-weight: normal;
}

.grupos-divisor {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 15px auto;
    width: 200px;
}

.grupos-divisor::before,
.grupos-divisor::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #D8A5A5;
}

.grupos-divisor span {
    padding: 0 10px;
    color: #f6e7d4;
    font-size: 14px;
}

.grupos-subtitulo {
    font-size: 1.05rem;
    color: #f6e7d4;
    margin: 0;
}

/* Grid Layout */
.grupos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas em telas grandes */
    gap: 20px;
    padding: 10px 0;
}

/* Card Individual */
.card-grupo {
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid #F0E8E6;
}

.card-grupo:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(139, 30, 30, 0.12);
}

/* Container de Imagem e Ícone Flutuante */
.card-imagem-wrapper {
    position: relative;
    width: 100%;
    padding-top: 65%; /* Proporção da imagem */
    background-color: #F9F9F9;
}

.card-imagem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Ícone Redondo Flutuante */
/* Contêiner redondo flutuante */
.card-icone {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden; /* Mantém o formato arredondado na imagem */
    border: 2px solid #FFFFFF; /* Borda branca para destacar da imagem principal */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F2C76A; /* Cor de fundo de apoio */
}

/* Imagem do Ícone */
.card-icone .icone-img {
    width: 60%;
    height: 60%;
    object-fit: cover;
    display: block;
}

/* Conteúdo de Texto do Card */
.card-conteudo {
    padding: 28px 15px 20px 15px; /* Espaço superior maior devido ao ícone */
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-titulo {
    font-size: 1.15rem;
    font-weight: 700;
    color: #452415;
    margin: 0 0 6px 0;
	font-family: 'Georgia', 'Times New Roman', serif;
	min-height:50px
}

.card-subtitulo {
    font-size: 0.85rem;
    color: #452415;
    font-weight: 400;
}

/* ==========================================================================
   RESPONSIVIDADE (MEDIA QUERIES)
   ========================================================================== */

/* Tablets / Telas Médias (max-width: 992px) */
@media (max-width: 992px) {
    .grupos-grid {
        grid-template-columns: repeat(2, 1fr); /* passa para 2 colunas */
        gap: 18px;
    }

    .grupos-titulo {
        font-size: 1.9rem;
    }
}

/* Smartphones / Telas Pequenas (max-width: 576px) */
@media (max-width: 576px) {
    .grupos-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 coluna no celular */
        gap: 15px;
    }

    .grupos-titulo {
        font-size: 1.6rem;
    }

    .grupos-subtitulo {
        font-size: 0.95rem;
    }
}