/* IDENTIDADE VISUAL */
:root {
    --cor-primaria: #08594A;    /* Verde Escuro */
    --cor-secundaria: #65A65B;  /* Verde Claro/Ações */
    --cor-destaque: #D2F25C;    /* Verde Limão/Neon */
    --cor-fundo: #F2F2F2;       /* Off-White */
    --cor-branco: #FFFFFF;
    --cor-alerta: #e74c3c;      /* Vermelho Padrão */
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}
body { 
    font-family: 'Poppins', sans-serif; 
    background-color: var(--cor-fundo); 
    color: #333; 
    overflow-x: hidden;
}
a { text-decoration: none; }




/* =================================================================================================================
   ================================================================================================================= */




/* Mensagem Topo */
.top-message {
    background: var(--cor-primaria);
    color: var(--cor-destaque);
    text-align: center;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    letter-spacing: 0.5px;
}
.close-message {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--cor-destaque); cursor: pointer;
}




/* =================================================================================================================
   ================================================================================================================= */




/* Header */
.header-main {
    background: var(--cor-branco);
    padding: 15px 15%;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    position: sticky; top: 0; z-index: 1000;
}
.header-logo img { height: 24px; margin-top: 5px; }
.header-actions {
    position: relative; /* Isso diz ao popup: "Ei, calcule sua posição a partir daqui!" */
    display: flex;
    align-items: center;
}
.nav-desktop {
    display: flex;
    align-items: center;
}
.nav-desktop .btn-nav-app {
    background-color: var(--cor-primaria); /* Usa o verde escuro da Ecotex */
    color: var(--cor-branco) !important; /* Força a cor branca para sobrescrever o padrão do menu */
    padding: 8px 18px;
    border-radius: 8px; /* Cantos arredondados iguais ao do print */
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Dá um respiro entre o ícone do celular e o texto */
    transition: 0.3s;
}
.nav-desktop .btn-nav-app:hover {
    background-color: var(--cor-secundaria); /* Muda para o verde de ação */
    transform: translateY(-2px); /* Pequeno efeito elástico para cima */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.nav-desktop a { color: var(--cor-primaria); margin: 0 15px; font-weight: 500; font-size: 14px; transition: 0.3s; }
.nav-desktop a:hover { color: var(--cor-secundaria); }
.icon-btn {
    background: none; border: none; color: var(--cor-primaria); font-size: 20px;
    margin-left: 15px; cursor: pointer; transition: 0.3s;
}
.icon-btn:hover { color: var(--cor-secundaria); }


/* Menu Mobile Oculto no Desktop */
.menu-toggle { display: none; }
.mobile-menu-popup { display: none; }




/* =================================================================================================================
   ================================================================================================================= */




/* Banner Hero (Slides Topo) */
.hero-banner { position: relative; width: 100%; height: 500px; overflow: hidden; background: var(--cor-primaria); }
.bg-slider, .bg-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.bg-slide { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-size: cover; 
    background-position: center; 
    
    /* Estado de descanso: Invisível e tamanho normal */
    opacity: 0; 
    transform: scale(1); 
    
    /* O Segredo: O 'transform 0s 1s' faz o tamanho congelar por 1 segundo enquanto a opacidade some */
    transition: opacity 1s ease-in-out, transform 0s 1s; 
}
.bg-slide.active { 
    /* Estado ativo: Visível e ampliado */
    opacity: 1; 
    transform: scale(1.1); 
    
    /* Inicia o fade-in de 1s e o zoom contínuo de 7s */
    transition: opacity 1s ease-in-out, transform 7s linear; 
}
/* O "Motor" da animação Ken Burns */
@keyframes zoomSuave {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}
.banner-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(to right, rgba(8,89,74,0.85) 0%, rgba(8,89,74,0.3) 100%); 
    z-index: 1; 
}
.content-slider { position: relative; z-index: 2; width: 100%; height: 100%; overflow: hidden; }
.slide-track { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease-in-out; }
.slide { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.slide-container { display: flex; align-items: center; justify-content: center; max-width: 1200px; width: 90%; gap: 40px; }
.slide-image img { max-width: 400px; max-height: 350px; object-fit: contain; drop-shadow: 0 20px 30px rgba(0,0,0,0.5); }
.slide-text { color: var(--cor-branco); max-width: 500px; }
.slide-text h2 { font-size: 42px; margin-bottom: 15px; line-height: 1.2; color: var(--cor-destaque); }
.slide-text p { font-size: 18px; margin-bottom: 25px; opacity: 0.9; }

.btn-banner {
    background: var(--cor-secundaria); color: var(--cor-branco);
    padding: 12px 30px; border-radius: 25px; font-weight: bold;
    display: inline-block; transition: 0.3s;
}
.btn-banner:hover { background: var(--cor-destaque); color: var(--cor-primaria); }


/* Setas Banner */
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 10; transition: 0.3s; }
.slider-arrow:hover { background: var(--cor-secundaria); }
.slider-arrow.prev { left: 20px; }
.slider-arrow.next { right: 20px; }
.slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.dot { width: 12px; height: 12px; background: rgba(255,255,255,0.4); border-radius: 50%; cursor: pointer; transition: 0.3s; }
.dot.active { background: var(--cor-destaque); width: 24px; border-radius: 10px; }




/* =================================================================================================================
   ================================================================================================================= */




/* Módulos Gerais */
.modulo-destaque { background: var(--cor-primaria); color: var(--cor-branco); padding: 60px 5%; }
.container-modulo { display: flex; align-items: center; justify-content: space-between; max-width: 750px; margin: auto; }
.destaque-texto { max-width: 600px; }
.destaque-texto h2 { font-size: 32px; color: var(--cor-destaque); margin-bottom: 15px; }
.destaque-texto p { font-size: 16px; margin-bottom: 25px; line-height: 1.6; }
.destaque-icone i { font-size: 120px; opacity: 0.2; }

.btn-gigante {
    background: var(--cor-destaque); color: var(--cor-primaria);
    padding: 15px 30px; border-radius: 30px; font-weight: bold; font-size: 16px;
    display: inline-block; transition: 0.3s;
}
.btn-gigante:hover { background: var(--cor-secundaria); color: var(--cor-branco); }




/* =================================================================================================================
   ================================================================================================================= */




/* Sessão Produtos Branca */
.modulo-branco { background: var(--cor-fundo); padding: 60px 5%; text-align: center; }
.modulo-branco .container-modulo {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Garante que o cabeçalho ocupe o espaço todo e centralize o texto */
.cabecalho-modulo {
    width: 100%;
    text-align: center;
}
.cabecalho-modulo h2 { color: var(--cor-primaria); font-size: 32px; margin-bottom: 10px; }
.cabecalho-modulo p { color: #666; margin-bottom: 40px; }

.grid-produtos { 
    display: grid; 
    /* O SEGREDO MUDOU: Troquei o auto-fit por repeat(3, 1fr) para travar em 3 colunas exatas */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    width: 100%; 
    max-width: 1100px; /* Aumentei um pouco a largura para os 3 cards respirarem bem */
    margin: 40px auto 0 auto; 
    align-items: stretch; 
}
.card-produto {
    background: var(--cor-branco); border-radius: 15px; padding: 25px;
    position: relative; box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: 0.3s; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    justify-content: space-between; /* Mantém a imagem no topo e botão no final */
    height: 100%; /* Usa 100% da altura da linha do grid */
}
.card-produto:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.card-produto h3 { 
    font-size: 16px; 
    color: #333; 
    margin-bottom: 20px; 
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* Faz o título ocupar o espaço vazio do meio */
}
.tag-categoria {
    position: absolute; top: 15px; left: 15px; background: var(--cor-destaque);
    color: var(--cor-primaria); font-size: 11px; font-weight: bold; padding: 4px 10px; border-radius: 10px; text-transform: uppercase;
}
.card-produto img { max-width: 100%; height: 160px; object-fit: contain; margin-bottom: 20px; }
.card-produto h3 { font-size: 16px; color: #333; margin-bottom: 20px; height: 40px; }

.btn-comprar {
    background: var(--cor-secundaria); color: var(--cor-branco);
    padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px;
    width: 100%; display: block; transition: 0.3s; border: none; cursor: pointer;
}
.btn-comprar:hover { background: var(--cor-primaria); }




/* =================================================================================================================
   ================================================================================================================= */




/* Lojas / Revendedores */
.slide-lojas { 
    display: flex; 
    gap: 30px; 
    width: 100%; 
    max-width: 730px; /* Limita a largura exata para caberem 2 cards por vez */
    margin: 30px auto 0 auto; /* Centraliza o bloco na tela */
    overflow-x: auto; 
    scroll-behavior: smooth; /* Deslizamento suave nativo */
    
    /* Esconde a barra de rolagem visualmente no desktop */
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}
.slide-lojas::-webkit-scrollbar { 
    display: none; 
}
.card-loja { 
    background: var(--cor-branco); 
    border-radius: 15px; 
    padding: 25px; 
    text-align: left; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    
    /* Força cada card a ocupar exatos 50% do espaço (1 de 2) */
    flex: 0 0 calc(50% - 15px); 
    min-width: calc(50% - 15px); 
}
.card-loja h3 { color: var(--cor-primaria); margin-bottom: 10px; }
.card-loja p { color: #666; font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.card-loja i { color: var(--cor-secundaria); margin-right: 5px; }
.btn-rota { background: var(--cor-primaria); color: var(--cor-branco); padding: 8px 15px; border-radius: 5px; font-size: 13px; font-weight: bold; display: inline-block; }

/* CONTROLES DO CARROSSEL DE LOJAS (DESKTOP) */
.controles-lojas {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px; /* Espaço entre os cards e os botões */
}

.controles-lojas button {
    background: rgba(8, 89, 74, 0.08); /* Fundo bem sutil e discreto */
    color: var(--cor-primaria);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.controles-lojas button:hover {
    background: var(--cor-secundaria);
    color: var(--cor-branco);
}

/* PROTEÇÃO DO MOBILE: Esconde os botões no celular */
@media (max-width: 990px) {
    .controles-lojas { display: none; }
}




/* =================================================================================================================
   ================================================================================================================= */




/* Rodapé */
.rodape-site { background: var(--cor-primaria); color: var(--cor-branco); padding: 60px 15% 20px; }
.container-rodape { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; max-width: 1200px; margin: auto; margin-bottom: 40px; }
.rodape-linha { border-color: rgba(255,255,255,0.1); margin: 15px 0; }

.rodape-desc { font-size: 13px; opacity: 0.8; line-height: 1.6; margin-bottom: 20px; }
.redes-sociais a { color: var(--cor-branco); background: rgba(255,255,255,0.1); width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 10px; transition: 0.3s; }
.redes-sociais a:hover { background: var(--cor-destaque); color: var(--cor-primaria); }
.rodape-coluna h3 { color: var(--cor-destaque); margin-bottom: 20px; font-size: 16px; text-transform: uppercase; }
.rodape-coluna ul { list-style: none; }
.rodape-coluna ul li { margin-bottom: 10px; }
.rodape-coluna ul a { color: rgba(255,255,255,0.8); transition: 0.3s; font-size: 0.8rem; }
.rodape-coluna ul a:hover { color: var(--cor-destaque); }
.rodape-inferior { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
.container-inferior { display: flex; justify-content: space-between; max-width: 1200px; margin: auto; font-size: 12px; opacity: 0.7; }
.inferior-links a { color: var(--cor-branco); margin: 0 10px; }
.inferior-links a:hover { color: var(--cor-destaque); }
.inferior-copy a { color: var(--cor-branco); }
.inferior-copy a:hover { color: var(--cor-destaque); }




/* =================================================================================================================
   ================================================================================================================= */




/* Popups Laterais Animados (Carrinho/Login) */
.login-popup, .cart-popup {
    position: absolute; /* Mudamos de fixed para absolute */
    top: calc(100% + 30px); /* O popup vai começar exatamente onde o ícone termina + 20px de respiro */
    right: 0; /* Alinha perfeitamente com a borda direita do botão de carrinho */
    width: 320px;
    max-width: 90vw; /* Proteção para telas de celulares muito pequenos */
    background: var(--cor-branco);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 15px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    
    /* O efeito gangorra continua intacto! */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

/* O EFEITO GANGORRA: Quando a classe .active é adicionada pelo JS */
.login-popup.active, .cart-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    /* O cubic-bezier(0.175, 0.885, 0.32, 1.25) é o que cria o efeito "elástico" (passa do ponto e volta) */
    transition: opacity 0.3s, visibility 0.3s, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.25);
}

/* Ajuste fino dos cabeçalhos dos popups para encaixar nas bordas arredondadas */
.popup-header, .cart-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 15px 20px; 
    background: var(--cor-fundo); 
    border-radius: 15px 15px 0 0; /* Arredonda só em cima */
    border-bottom: 1px solid #eee; 
}

.popup-header h3, .cart-header h3 { 
    color: var(--cor-primaria); 
    margin: 0; 
    font-size: 16px; 
}

.close-cart { 
    background: none; 
    border: none; 
    font-size: 18px; 
    color: #999; 
    cursor: pointer; 
    transition: 0.3s; 
}

.close-cart:hover { 
    color: var(--cor-alerta); 
    transform: scale(1.1);
}






/* =================================================================================================================
   ================================================================================================================= */






/* MODAL DE PRODUTO DETALHADO */
.produto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide meio a meio */
    gap: 40px; /* Um respiro maior entre as colunas */
}

.produto-foto {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 20px;
}

.produto-foto img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Ficha Técnica (Abaixo da foto) */
.produto-especificacoes h4 {
    color: var(--cor-primaria);
    font-size: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.lista-tecnica {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Lista em 2 colunas para ficar compacta */
    gap: 10px;
}

.lista-tecnica li {
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lista-tecnica li i {
    color: var(--cor-secundaria);
    width: 15px;
    text-align: center;
}

/* Botão invisível no Desktop */
.btn-ver-mais-tec { 
    display: none; 
}

/* Regras apenas para Mobile */
@media (max-width: 850px) {
    
    /* Esconde do 4º item (n+4) em diante se tiver a classe 'mobile-recolhida' */
    .lista-tecnica.mobile-recolhida li:nth-child(n+4) {
        display: none;
    }

    /* Estilo discreto do botão (apenas o ícone centralizado) */
    .btn-ver-mais-tec {
        display: block;
        width: 100%;
        background: none;
        border: none;
        border-radius: 12px;
        background-color: var(--cor-fundo);
        color: var(--cor-destaque);
        font-size: 22px; /* Ícone um pouco maior para ser fácil de tocar */
        text-align: center;
        margin-top: 15px;
        cursor: pointer;
    }

    /* Animação para girar a setinha para cima quando estiver aberto */
    .btn-ver-mais-tec i {
        transition: transform 0.3s ease;
    }
    .btn-ver-mais-tec.aberto i {
        transform: rotate(180deg);
    }
}

/* Área Direita (Compra) */
.badge-premium {
    display: inline-block;
    background: var(--cor-secundaria);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
}

.curta-desc {
    color: #666;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.seletor-quantidade { margin-bottom: 25px; }
.seletor-quantidade label { display: block; font-weight: bold; margin-bottom: 10px; color: var(--cor-primaria); }

.qtd-controle { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.btn-qtd { width: 40px; height: 40px; border: 1px solid #ddd; background: #fff; border-radius: 8px; cursor: pointer; font-weight: bold; transition: 0.2s; }
.btn-qtd:hover { background: #f4f4f4; }
#input-qtd { width: 60px; height: 40px; text-align: center; border: 1px solid #ddd; border-radius: 8px; font-weight: bold; }

.btn-qtd-plus { background: rgba(8, 89, 74, 0.05); border: 1px dashed var(--cor-primaria); color: var(--cor-primaria); padding: 8px 15px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }

.btn-comprar-grande { width: 100%; background: var(--cor-primaria); color: #fff; border: none; padding: 15px; border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-comprar-grande:hover { background: var(--cor-secundaria); }

/* Texto Papo de Especialista */
.texto-venda {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.texto-venda h4 {
    color: var(--cor-primaria);
    font-size: 16px;
    margin-bottom: 15px;
}

.texto-venda p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Responsivo */
@media (max-width: 850px) {
    .produto-grid { grid-template-columns: 1fr; gap: 20px; }
    .texto-venda { margin-top: 20px; padding-top: 20px; }
}
@media (max-width: 480px) {
    .lista-tecnica { grid-template-columns: 1fr; } /* No celular pequeno, a lista volta a ter 1 coluna */
}





/* =================================================================================================================
   ================================================================================================================= */





/* SISTEMA DE MODAIS RESPONSIVOS */
/* Fundo escurecido que trava a tela */
.modal-overlay {
    display: none; /* Inicia oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Efeito de sombra no fundo */
    backdrop-filter: blur(3px); /* Leve desfoque no fundo */
    z-index: 2000; /* Acima de tudo */
    align-items: center;
    justify-content: center;
    padding: 20px; /* Margem lateral garantida no mobile */
}

/* Container do Modal */
.modal-container {
    background: var(--cor-branco);
    width: 100%;
    max-width: 600px; /* Largura máxima no desktop */
    border-radius: 15px; /* Cantos arredondados solicitados */
    overflow: hidden;
    animation: slideDown 0.3s ease-out; /* Animação de entrada */
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Cabeçalho do Modal */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    border-bottom: 1px solid #eee;
}

.modal-header h3 {
    color: var(--cor-primaria);
    margin: 0;
    font-size: 1.2rem;
}

/* Botão X (Fechar) */
.btn-fechar-modal {
    background: none;
    border: none;
    font-size: 30px;
    color: var(--cor-destaque); /* Verde claro/destaque */
    cursor: pointer;
    line-height: 1;
    transition: 0.2s;
}

.btn-fechar-modal:hover {
    transform: scale(1.2);
    opacity: 0.8;
}

/* Corpo do conteúdo */
.modal-body {
    padding: 25px;
    max-height: 70vh; /* Limita altura para telas pequenas */
    overflow-y: auto; /* Scroll interno se o texto for grande */
    line-height: 1.6;
    color: #555;
}

/* Animação de entrada */
@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Ajuste fino para Mobile */
@media (max-width: 600px) {
    .modal-container {
        max-width: 100%; /* Ocupa a largura disponível respeitando o padding do overlay */
    }
    .modal-body {
        padding: 20px;
        font-size: 14px;
    }
}




/* =================================================================================================================
   ================================================================================================================= */





/* ESTILOS DO FAQ (SANFONA) */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

.faq-pergunta {
    width: 100%;
    background: #f9f9f9;
    border: none;
    padding: 15px 20px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--cor-primaria);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s;
}

.faq-pergunta:hover {
    background: #f1f1f1;
}

.faq-pergunta i {
    color: var(--cor-destaque);
    transition: transform 0.3s ease;
}

/* Rotação da seta quando ativo */
.faq-pergunta.ativa i {
    transform: rotate(180deg);
}

.faq-resposta {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: var(--cor-branco);
}

.faq-resposta p {
    padding: 15px 20px;
    margin: 0;
    font-size: 14px;
    color: #555;
    border-top: 1px solid #eee;
}





/* =================================================================================================================
   ================================================================================================================= */





/* FEED DE PROJETOS 3D */
.feed-3d {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Colunas */
    gap: 25px;
}

.card-feed {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: 0.3s;
}

.card-feed:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.img-3d-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1; /* Mantém a imagem sempre quadrada */
    background: #f4f4f4;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}

.img-3d-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-feed h4 {
    color: var(--cor-primaria);
    margin-bottom: 15px;
    font-size: 16px;
}

/* Container dos Botões */
.botoes-feed {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Botões 1:1 Quadrados e Arredondados */
.btn-feed-acao {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px; /* Cantos arredondados */
    background: rgba(8, 89, 74, 0.08); /* Verde suave padrão */
    color: var(--cor-primaria);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    font-size: 16px;
}

.btn-feed-acao:hover {
    background: var(--cor-secundaria);
    color: var(--cor-branco);
}

/* Ajuste Mobile para o Feed virar 1 coluna */
@media (max-width: 600px) {
    .feed-3d {
        grid-template-columns: 1fr;
    }
}





/* =================================================================================================================
   ================================================================================================================= */





/* Responsivo */
@media (max-width: 990px) {
    .nav-desktop { display: none; }
    .menu-toggle { display: block; }
    .slide-container { flex-direction: column; text-align: center; }
    .slide-text h2 { font-size: 32px; }
    .slider-arrow {
        display: none !important;
    }
    .container-modulo { flex-direction: column; text-align: center; }
    .destaque-texto { margin-bottom: 30px; }
    .container-inferior { flex-direction: column; align-items: center; gap: 10px; }
    
    .mobile-menu-popup {
        display: none; 
        position: absolute; /* Mudou de fixed para absolute */
        top: 99%; /* O segredo: Gruda exatamente 100% abaixo do limite do cabeçalho */
        left: 0; 
        width: 100%;
        background: var(--cor-branco); 
        z-index: 999; 
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        flex-direction: column;
    }
    .mobile-menu-popup.active { display: flex; }
    .menu-item { padding: 15px 20px; border-bottom: 1px solid #eee; color: var(--cor-primaria); font-weight: 500; }
    .menu-item i { width: 25px; color: var(--cor-secundaria); }
    .grid-produtos, .slide-lojas {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory; /* Efeito de encaixe ao arrastar */
        gap: 15px;
        padding-bottom: 20px; /* Espaço para a sombra não ser cortada */
        padding-left: 5%; /* Alinha com a margem da tela */
        padding-right: 5%;
        margin-left: -5%; /* Compensa o padding para encostar na borda real */
        width: calc(100% + 10%);
    }

    /* Esconde a barra de rolagem horizontal (Opcional, mas fica mais bonito) */
    .grid-produtos::-webkit-scrollbar, .slide-lojas::-webkit-scrollbar {
        display: none;
    }

    .card-produto, .card-loja {
        flex: 0 0 80%; /* Ocupa 80% da tela, deixando 20% do próximo card visível */
        scroll-snap-align: center;
        max-width: 320px; /* Limite para não ficar gigante em tablets */
    }

    /* ==========================================
       RODAPÉ CENTRALIZADO NO MOBILE
       ========================================== */
    .container-rodape {
        grid-template-columns: 1fr; /* Força tudo a ficar em 1 única coluna empilhada */
        gap: 30px; /* Dá um respiro entre os blocos no celular */
    }

    .rodape-coluna {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .rodape-logo img {
        margin: 0 auto;
    }

    .lista-contato li {
        justify-content: center;
    }

    .rodape-logo img {
        margin: 0 auto;
    }

    .lista-contato li {
        justify-content: center;
    }
}