/* --- ESTILOS GERAIS --- */
* {
    box-sizing: border-box; /* Garante que preenchimentos não quebrem o tamanho dos elementos */
}

body {
    background-color: #EBF5FF; /* Azul bem clarinho para todo o site */
    margin: 0;
}

.home-page {
    background-color: #ebf5ff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

header {
    background: #fdfdfd; /* Cor mais clara para melhor leitura */
    padding: 10px 5%;
    display: flex;
    flex-direction: row; /* Logo e Menu lado a lado no desktop */
    justify-content: space-between;
    align-items: center;           
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-scrolled {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 8px 5%;
}

/* --- LOGO --- */
.logo-img {
    height: 160px; /* Tamanho aumentado para maior visibilidade no desktop */
    width: 160px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.03);
}

#btn-mobile {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6db3f8;
}

nav ul li a {
    text-decoration: none;
    color: #493f64; /* Cor mais escura para melhor leitura */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1px;
    transition: color 0.3s ease;
    margin: 0 15px;
    position: relative; 
    display: inline-block;
    cursor: pointer;
    z-index: 1;
    transition: color 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);

}

nav ul li a:hover {
    color: #6db3f8; 
}

nav li {
    display: inline-block;
}

/* --- BARRA DE PESQUISA --- */
.search-container {
    padding: 20px 5% 0 5%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.search-container input {
    width: 100%;
    max-width: 600px;
    padding: 12px 25px;
    border: 2px solid #ccecff;
    border-radius: 50px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    color: #493f64;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.search-container input:focus {
    border-color: #6db3f8;
    box-shadow: 0 4px 15px rgba(109, 179, 248, 0.2);
}

/* --- BARRA DE FILTROS / CATEGORIAS --- */
.filter-bar {
    background: #ffffff;
    padding: 10px 5% 20px 5%; /* Removido padding superior (era 20px) */
    border-bottom: 1px solid #c5e5f1;
    overflow-x: auto;
    white-space: nowrap;
    position: sticky;
    top: 180px; /* Ajustado para a nova altura do header desktop (Logo 160px + paddings) */
    z-index: 999;
    -webkit-overflow-scrolling: touch; /* Rolagem suave no iOS */
    scrollbar-width: none; /* Esconde barra no Firefox */
}

.filter-bar a {
    text-decoration: none;
    color: #888;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 20px;
    border: 2px solid #f0f0f0;
    border-radius: 50px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    background: #fcfcfc;
}

.filter-bar a:hover, .filter-bar a.active {
    color: #fff;
    background: #6db3f8;
    border-color: #6db3f8;
    box-shadow: 0 4px 10px rgba(109, 179, 248, 0.3);
}

/* --- BANNER HERO PROPORCIONAL --- */
.hero-banner {
    width: 100%;
    max-width: 1200px; 
    margin: 15px auto; 
    aspect-ratio: 21 / 9; /* Proporção ideal para banners modernos */
    
    /* Configurações de Fundo (Cor + Imagem) */
    background-color: #6B8E68; 
    background-image: url('img/banner1.jpg'); /* Sua imagem de banner */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* Faz a imagem preencher todo o banner */
    border-radius: 20px; /* Cantos arredondados para um visual moderno */
    

    /* Layout para o conteúdo de texto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    color: #493f64;
    padding: 60px; /* Mais espaço interno */
}

/* Ajuste sutil no tamanho do título para caber no novo banner */
.hero-content h1 {
    font-size: 2rem; /* Reduzido de 3.5rem para caber na arte menor */
    color: #ffffff; 
    margin-bottom: 5px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

/* --- ANIMAÇÕES DE REVELAÇÃO (Scroll Reveal) --- */
.revelar {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.revelar.visivel {
    opacity: 1;
    transform: translateY(0);
}


@media (max-width: 600px) {
    .hero-content h1 {
        font-size: 1.5rem; 
    }
}
/* --- CONTAINER DO CARROSSEL --- */
.carrossel {
    width: 100%;
    margin: 0 auto; 
    overflow: hidden;
}

.slider {
    width: 100%;
    overflow: hidden;

}

.slides {
    display: flex;
    width: 300%;
    animation: slide-auto 15s infinite ease-in-out;
    
}

.slide {
    width: 33.33%;
    height: 100%;
    float: left;
    min-height: 150px; /* controla altura do banner */
    flex-shrink: 0;
    display: flex;
    justify-content:flex-start ;
    align-items: center;
    flex-direction: column;
    background-repeat: no-repeat;
    background-position:  center center; /* Alinha a imagem à esquerda e centraliza verticalmente */
    background-size: contain; /* Mantém a imagem inteira visível dentro do espaço */
    background-origin: content-box; /* ADICIONADA: Garante que a imagem comece dentro da borda, não atrás dela */  
}

.slide:nth-child(1) {
    background-color: #926C54; /* Cor para o primeiro banner */
}

.slide:nth-child(2) {
    background-color: #565B26; /* Cor para o segundo banner */
}

.slide:nth-child(3) {
    background-color: #7CA3B4; /* Cor para o terceiro banner */
}
   
/* ANIMAÇÃO */
@keyframes slide-auto {
    0% { transform: translateX(0); }
    30% { transform: translateX(0); }

    33% { transform: translateX(-33.33%); }
    63% { transform: translateX(-33.33%); }

    66% { transform: translateX(-66.66%); }
    96% { transform: translateX(-66.66%); }

    100% { transform: translateX(0); }
} /* coloque mais de um banner */

/* --- SEÇÃO DE DESTAQUES --- */
.featured-section {
    padding: 20px 5%; /* Reduzido de 60px para trazer os produtos para cima */
    background: transparent;            
}
.featured-section h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #493f64;
    margin-bottom: 20px; /* Reduzido o espaço entre o título e os produtos */
}
.featured-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 30px 5%;
    max-width: 900px;
    margin: 0 auto;
}

/* Estilos Compartilhados para Cards (Destaques e Produtos) */
.card, .product-card {
    background: rgb(255, 255, 255);
    border-radius: 15px; /* Cantos mais retos para um visual "quadrado" */
    box-shadow: 0 10px 20px rgba(0,0,0,0.04);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    position: relative;
    flex-direction: column;
    background: #fff;
}

.featured-products .product-card {
    width: 100%;
    max-width: 100%; 
}

.product-info {     
    padding: 15px; 
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}
.product-info h3 {
    font-size: 1.1rem;
    color: #21a6ff;
    margin-bottom: 12px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1.2;
}
.product-info p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}       

/* --- PÁGINA DE PRODUTOS --- */
.produtos {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Alterado para 4 produtos por linha */
    gap: 25px; /* Espaçamento idêntico ao destaque para consistência */
    padding: 40px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.card:hover, .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(109, 179, 248, 0.12);
    border-color: #6db3f8;
}

.img-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f9f9f9;
    border-radius: 4px 4px 0 0;
    cursor: zoom-in;
}

.img-container img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 10px;
    transition: transform 0.2s ease-out; /* Transição mais rápida para seguir o mouse */
    box-sizing: border-box;
    transform-origin: center; /* Ponto inicial do zoom */
}

/* Suporte para duas imagens - a segunda aparece no hover */
.img-container .secondary-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s ease;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    z-index: 2;
}

.img-container:hover .secondary-img {
    opacity: 1;
}

.img-container:hover img,
.img-container.lupa-ativa img {
    transform: scale(1.6); /* Nível do zoom */
}

/* --- ESTILOS DO MODAL (DETALHES DO PRODUTO) --- */
.modal {
    display: none; 
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-content {
    background: #fff;
    padding: 40px;
    border-radius: 30px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #493f64;
    line-height: 1;
}

.modal-left { flex: 1; min-width: 300px; }
.modal-right { flex: 1.2; min-width: 300px; display: flex; flex-direction: column; gap: 15px; }
.modal-img { width: 100%; border-radius: 15px; }

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.btn-copy-link {
    background: #f0f8ff;
    color: #50a0f0;
    border: 2px solid #50a0f0;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.aviso-variacao {
    background: #fff5f5;
    border-left: 4px solid #ff6b6b;
    padding: 12px;
    font-size: 0.85rem;
    color: #c92a2a;
    border-radius: 10px;
    margin: 10px 0;
    line-height: 1.4;
}

/* Garante que a lupa funcione dentro do modal também */
.modal-left .img-container {
    border-radius: 15px;
}

/* Botões de troca de imagem no Modal */
.modal-thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.thumb-btn {
    padding: 8px 15px;
    border: 2px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 20px;
    font-weight: bold;
    color: #493f64;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.thumb-btn.active {
    border-color: #2b4d6e;
    background: #294663;
    color: #fff;
}

/* Lente da Lupa (Círculo) */
.img-container::after {
    content: "";
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 120px;
    height: 120px;
    border: 2px solid #d0e4f8;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    background: rgba(255, 255, 255, 0.1);
}

.img-container:hover::after,
.img-container.lupa-ativa::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.card-info {    
    padding: 12px; /* Menos preenchimento interno nas páginas de produtos */
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.categoria-tag {
    font-size: 0.7rem;
    color: #122c46;
    background: rgba(109, 179, 248, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
    margin: 0 auto 8px auto;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.card-info h2 {
    font-size: 1.1rem;
    color: #21a6ff;
    margin-bottom: 12px;
    min-height: 50px; /* Altura mínima fixa para que os títulos sempre alinhem */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.card-info p:not(.preco) {
    flex-grow: 1;
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 10px; /* Aproxima a descrição do preço */
    line-height: 1.5;
    text-align: center;
    /* Limita o texto no card para não esticar o layout, o resto aparece no Modal */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Preço em destaque */
.preco {
    font-size: 1.2rem;
    color:#2e5e8f;
    font-weight: 800;
    margin-top: auto;
    display: block;
    text-align: center;
    margin-bottom: 8px;
}

/* Estilo do botão comprar */
.card button, .product-card button {
    background: #50a0f0;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 20px;
    font-weight: 700;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.card button:hover, .product-card button:hover {
    background: #00fa00;
    transform: scale(1.02);
    box-shadow: 0 6px 15px rgba(109, 179, 248, 0.3);
    color: #fff;
    border-color: #6db3f8;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* --- CARRINHO LATERAL --- */
#carrinho-lateral {
    position: fixed;
    right: -350px;
    top: 0;
    width: 350px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    padding: 25px; 
    z-index: 2000;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    z-index: 2000;
    transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
    padding: 0; /* Padding interno movido para os containers filhos */
}

#carrinho-lateral.aberto {
    right: 0;
    transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    overflow-y: auto;
}

#carrinho-lateral::-webkit-scrollbar {
    width: 6px;
}
#carrinho-lateral::-webkit-scrollbar-thumb {
    background-color: #b3e9ff;
    border-radius: 10px;
}
#carrinho-lateral::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 10px;
}

.carrinho-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    background: #fdfdfd;
    border-bottom: 1px solid #eee;
}

.carrinho-header h2 {
    margin: 0;
    color: #493f64;
    font-size: 1.5rem;
}

#itens-carrinho {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Barra de rolagem personalizada */
#itens-carrinho::-webkit-scrollbar {
    width: 6px;
}
#itens-carrinho::-webkit-scrollbar-thumb {
    background-color: #b3e9ff;
    border-radius: 10px;
}
#itens-carrinho::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 10px;
}

.carrinho-footer {
    padding: 25px;
    background: #cee9fc;
    border-top: 1px solid #eee;
}

.btn-finalizar {
    background: #6db3f8;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 50px;
    font-weight: bold;
    width: 100%;
    margin-top: 15px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.item-carrinho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #9fcdf3;
    font-size: 0.9rem;
}

.item-carrinho strong {
    color: #493f64;
    display: block;
    margin-bottom: 4px;
}

.btn-remover {
    background: #beedff;
    color: #312ee0;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.btn-remover:hover {
    background: #ff6b6b;
    color: white;
}

/* --- BOTÃO FLUTUANTE CARRINHO --- */
.btn-carrinho-flutuante {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1001;
    padding: 15px;
    border-radius: 50%;
    background: #e6ff56;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.btn-carrinho-flutuante:hover {
    transform: scale(1.1);
}

.carrinho-footer {
    padding: 25px;
    background: #fdfdfd;
    border-top: 1px solid #eee;
}

.btn-finalizar {
    background: #50a0f0;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 50px;
    font-weight: bold;
    width: 100%;
    margin-top: 15px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-finalizar:hover {
    background: #11f337;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(109, 179, 248, 0.4);
}

.btn-finalizar:active {
    transform: translateY(-1px);
}

.carrinho-footer h3 {
    display: flex;
    justify-content: space-between;
    color: #493f64;
    margin-bottom: 20px;
}

footer {
    background: #493f64;
    color: white;
    text-align: center;
    padding: 20px 5%;
    font-size: 0.9em;
}


/* --- ESTILOS DA PÁGINA SOBRE --- */
.sobre-nos {
    padding: 60px 5%;
    background: transparent; /* Permite que o azul do fundo apareça */
    text-align: center;
    border-radius: 45px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    max-width: 1200px;
    margin: 0 auto;
}

.sobre-nos h1 {
    color: #1a2f44;
    margin-bottom: 30px;
    text-align: center;
}

.sobre-nos p {
    color: #888;
    margin-bottom: 30px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}   

.sobre-nos p {
    color: #888;
    margin-bottom: 30px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}       

.container-sobre {
    padding: 60px 5%;
    background: #ffffff;
    text-align: center;
    border-radius: 45px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.container-sobre h1 {
    color: #1a2f44;
    margin-bottom: 30px;
}

.lista-institucional {
    list-style: none;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.lista-institucional li {
    background: #fdfdfd;
    margin-bottom: 20px;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    border-left: 5px solid #6db3f8;
}

.lista-institucional strong {
    display: block;
    color: #493f64;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

/* --- ESTILOS DA PÁGINA DE CONTATO --- */
.contato-secao {
    padding: 60px 5%;
    background: transparent; /* Permite que o azul do fundo apareça */
    text-align: center;
}

.container-contato h1 {
    color: #1d3247;
    margin-bottom: 10px;
}

.container-contato > p {
    color: #1c2535;
    margin-bottom: 40px;
}

.contato-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: center;
    max-width: 1100px;
    margin: 40px auto;
}

.contato-imagem-wrapper {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.contato-lateral-info {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 320px;
}

.imagem-quadrada {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.contato-info, .contato-form {
    padding: 20px;
    text-align: left;
}

.btn-whatsapp-grande {
    display: block;
    background: #25d366; /* Verde oficial do WhatsApp */
    color: white;
    text-decoration: none;
    padding: 18px 25px;
    border-radius: 50px;
    font-weight: bold;
    text-align: center;
    margin-top: 30px;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.btn-whatsapp-grande:hover {
    background: #128c7e;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
}

.contato-info h2, .contato-form h2 {
    color: #493f64;
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.info-item {
    margin-bottom: 20px;
}

.info-item strong {
    color: #6db3f8;
    display: block;
    margin-bottom: 5px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #493f64;
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #f0f0f0;
    border-radius: 15px;
    font-family: inherit;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: #6db3f8;
    outline: none;
}

.btn-enviar {
    background: #142536;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: 0.3s;
}

.btn-enviar:hover {
    background: #493f64;
    transform: translateY(-2px);
}

/* --- CONFIGURAÇÃO PARA CELULARES (Telas até 768px) --- */
@media (max-width: 768px) {
    header {
        padding: 8px 5%;
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    .logo-img {
        height: 100px; /* Tamanho aumentado no mobile */
        width: 100px;
    }

    #btn-mobile {
        display: block !important;
        font-size: 2rem;
        z-index: 1001;
    }

    header nav {
        display: none; /* Esconde o menu por padrão */
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        padding: 20px 0;
        height: calc(100vh - 116px); /* Ajustado para a nova altura do header mobile */
        top: 116px;
        z-index: 1000;
    }

    header nav.active {
        display: block; /* Mostra o menu quando ativo */
    }

    header nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    header nav ul li {
        display: block;
        width: 100%;
        text-align: center;
    }

    .hero-banner {
        height: 300px; /* Altura fixa costuma funcionar melhor para banners mobile */
        max-width: 100%;
        padding: 0; /* Remove padding para a imagem encostar nas bordas se necessário */
        background-size: cover; /* 'cover' preenche o espaço; mudaremos a origem para não cortar */
        background-position: center center; /* Centraliza a imagem de fundo */
        background-origin: border-box; /* Garante que a imagem use todo o espaço disponível */
    }

    .hero-content h1 {
        font-size: 1.8rem; /* Título mais equilibrado para telas estreitas */
    }

    .featured-section h2 {
        font-size: 1.8rem;
        margin-bottom: 25px;
        padding: 0 10px;
    }

    .featured-products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        padding: 20px 10px;
    }

    .featured-products .product-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .product-info {
        padding: 12px;
    }

    .hero-content p {
        font-size: 1.1rem;
    }

    .filter-bar {
        top: 116px; /* Ajustado para a nova altura do header mobile */
        padding: 5px 5% 5px 0%; /* Ajusta o padding para o mobile */
        padding: 5px 5% 5px 5%; /* Removido padding superior no mobile (era 15px) */
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .filter-bar ul {
        justify-content: flex-start;
        padding: 0 20px 5px 20px;
        gap: 8px;
        width: max-content; /* Permite que o flex expanda para o scroll */
    }

    .filter-bar a {
        padding: 10px 18px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .produtos {
        grid-template-columns: repeat(2, 1fr); /* Agora exibe 2 produtos por linha */
        padding: 15px 10px;
        gap: 12px;
    }

    /* Deixa o Modal de detalhes mais compacto no mobile */
    .modal-content {
        padding: 25px 15px;
        gap: 15px;
        border-radius: 20px;
        width: 90%; /* Define uma largura menor que a tela para centralizar visualmente */
        max-height: 80vh;
        overflow-y: auto;
        text-align: center; /* Centraliza os textos */
    }

    .modal-left, .modal-right {
        min-width: 100%;
    }

    .modal-right h2 {
        font-size: 1.3rem;
    }

    .modal-right {
        align-items: center; /* Centraliza o botão e outros elementos flexíveis */
        text-align: center;
    }

    .card:hover, .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(109, 179, 248, 0.12);
        border-color: #6db3f8;
    }       

    /* Ajustes específicos para o card em mobile */
    .card img, .product-card img {
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain; /* Garante que a imagem não seja cortada */
        border-radius: 4px 4px 0 0;
        transition: transform 0.3s ease;
        cursor: pointer;
        width: 100%;
    }

    .card-info {
        padding: 10px; /* Reduz o espaço interno para caber melhor em 2 colunas */
    }

    .categoria-tag {
        font-size: 0.6rem;
        padding: 2px 8px;
    }

    .card-info h2 {
        font-size: 0.85rem; /* Título menor para os cards menores */
        min-height: auto; /* Remove min-height para evitar espaços vazios desnecessários */
    }

    .card-info p:not(.preco) {
        font-size: 0.75rem; /* Letras menores na descrição */
        margin-bottom: 10px;
    }

    .preco {
        font-size: 1rem;
    }

    .card button, .product-card button {
        background-color: #50a0f0; 
        padding: 15px 15px; /* Botão mais baixo */
        margin-top: 10px;
        font-size: 0.8rem;
        width: 100%; /* Botão ocupa a largura total para facilitar o toque */
    }

  /* Faz o botão ficar grande e verde ao tocar/passar o mouse */
.card button:hover, .product-card button:hover {
    background-color: #2ecc71; /* Verde */
    transform: scale(1.1);    /* Aumenta o tamanho em 10% */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Adiciona uma sombra para destacar */
    color: #fff;              /* Cor do texto branca */
    border-color: #27ae60;    /* Borda verde mais escura */
    
    /* Adiciona suavidade na transição (opcional, mas recomendado) */
    transition: all 0.3s ease; 
}
  

    /* Carrossel */
    .slides {
        grid-template-columns: 1fr;
        gap: 0;
        overflow: hidden;
        width: 100%;
        height: 50px;
    }

    .slide, .slide img, .slider, .carrossel {
        width: 100%;
        height: 173px;
        object-fit: cover;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .slide:hover img {
        transform: scale(1.05);
    }

    .slides {
        height: 170px;
        width: 300%;
        animation: slide-auto 15s infinite ease-in-out;
        overflow: hidden;
    }

    .slide {
        width: 33.3333%;
        height: 85%;
        height: 100%; /* Ajustado de 85% para 100% para eliminar o vão inferior */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-shrink: 0; 
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.5s ease;
    }

    .slide:hover img {
        transform: scale(1.05);
    }
    .contato-grid {
        flex-direction: column;
        gap: 20px;
    }

    .contato-imagem-wrapper {
        max-width: 100%;
    }

    .featured-section {
        padding: 30px 5%;
    }

    .produtos {
        padding: 20px 10px;
        gap: 20px;
    }

    .sobre-nos {
        padding: 40px 5%;
    }

    .container-sobre h1 {
        font-size: 2rem;
    }

    .lista-institucional li {
        padding: 20px;
        margin-bottom: 15px;
    }

    .lista-institucional strong {
        font-size: 1.1rem;
    }

    .btn-carrinho-flutuante {
        position: fixed;
        bottom: 30px; /* Mais longe da borda para não ser cortado por telas curvas */
        right: 30px;
        padding: 15px;
        font-size: 1.5rem;
        z-index: 2100; /* Garante que fique acima de tudo */
        background: #e6ff57;
        border-radius: 50%;
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
}

/* --- CONFIGURAÇÃO PARA TABLETS (Entre 769px e 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .produtos, .featured-products {
        gap: 20px;
    }
    .produtos { /* Aplica grid de 2 colunas apenas para a página de produtos */
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .featured-products { /* Garante que featured-products continue com flexbox para rolagem */
    }

    .card, .product-card {
        width: 100% !important; /* O grid controla a largura, não o width fixo */
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }
}