/* ==========================================================================
   1. VARIÁVEIS GLOBAIS (TEMA TECH / GLASSMORPHISM)
   ========================================================================== */
:root {
    /* Paleta de Cores: Dark Slate & Cyan Neon */
    --bg-color: #0f172a; /* Fundo cinza-azulado muito escuro e elegante */
    --card-bg: rgba(30, 41, 59, 0.6); /* Fundo do card translúcido */
    --text-main: #f8fafc; /* Texto principal quase branco */
    --text-muted: #94a3b8; /* Texto secundário suave */
    
    /* Cores de Destaque */
    --accent-color: #38bdf8; /* Azul cyan tecnológico */
    --accent-hover: #0ea5e9;
    --accent-glow: rgba(56, 189, 248, 0.4); /* Brilho neon suave */
    
    /* Efeitos Estruturais */
    --border-glass: rgba(255, 255, 255, 0.08); /* Borda de vidro quase invisível */
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px var(--accent-glow);
    --radius-lg: 16px;
    --radius-pill: 50px;
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modo Claro Opcional (Caso queira alternar depois) */
body.light-mode {
    --bg-color: #f8fafc;
    --card-bg: rgba(255, 255, 255, 0.8);
    --text-main: #0f172a;
    --text-muted: #64748b;
    --accent-color: #0ea5e9;
    --border-glass: rgba(0, 0, 0, 0.05);
    --shadow-soft: 0 8px 32px rgba(15, 23, 42, 0.08);
}

/* ==========================================================================
   2. RESET E TIPOGRAFIA
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Fontes modernas e limpas */
    font-family: 'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at top right, rgba(56,189,248,0.05) 0%, transparent 40%);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    transition: var(--transition-smooth);
}

/* ==========================================================================
   3. CABEÇALHO (HEADER) - EFEITO VIDRO
   ========================================================================== */
   header {
    background: rgba(15, 23, 42, 0.85); /* Deixei um tiquinho mais opaco para os produtos não atrapalharem a leitura quando passarem por baixo */
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-glass);
    padding: 16px 0;
    
    /* AS 3 LINHAS MÁGICAS QUE PRENDEM NO TOPO: */
    position: sticky;
    top: 0;
    z-index: 999; /* Garante que o header vai ficar por cima das imagens dos produtos */
}


.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.header-container h1 {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(to right, #fff, var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Texto com gradiente tecnológico */
    letter-spacing: -0.5px;
    margin: 0;
}

.header-container p {
    display: none;
}

/* Barra de Pesquisa */
#search-area {
    flex: 1;
    min-width: 280px;
    max-width: 500px;
    position: relative;
}

#campo-pesquisa {
    width: 100%;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    color: var(--text-main);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-smooth);
}

#campo-pesquisa::placeholder {
    color: var(--text-muted);
}

#campo-pesquisa:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow); /* Brilho suave ao digitar */
}

/* aqui fica a transição entre abas*/

/* ==========================================================================
   3.1 MENU DE ABAS (HEADER)
   ========================================================================== */
.header-abas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px; /* Espaçamento entre uma aba e outra */
    margin-top: 24px; /* Dá uma distância do título do site */
    padding-top: 16px;
    border-top: 1px solid var(--border-glass); /* Cria uma linha divisória de vidro muito sutil */
}

.header-abas a {
    color: var(--text-muted); /* Começa com uma cor mais apagada */
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    transition: var(--transition-smooth);
}

.header-abas a:hover {
    color: var(--text-main); /* Fica branco/claro ao passar o mouse */
    background: rgba(255, 255, 255, 0.05); /* Dá um fundo bem fraquinho tipo vidro */
    text-shadow: 0 0 10px var(--accent-glow); /* Adiciona o seu brilho neon característico no texto */
}


/* ==========================================================================
   TRANSIÇÃO DE PÁGINAS
   ========================================================================== */
/* Animação de entrada (quando a página abre) */
body {
    animation: fadeInPage 0.5s ease forwards;
    opacity: 0; /* Começa invisível e vai aparecendo */
}

@keyframes fadeInPage {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
        /* REMOVEMOS O TRANSFORM DAQUI */
    }
}

/* Animação de saída (acionada pelo JavaScript antes de mudar de página) */
body.saindo {
    animation: fadeOutPage 0.4s ease forwards;
}

@keyframes fadeOutPage {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

/* ==========================================================================
   4. CATÁLOGO DE PRODUTOS
   ========================================================================== */
.catalogo_produtos {
    max-width: 1280px; 
    margin: 60px auto;
    padding: 0 24px;
    display: grid;
    /* Aqui está a mágica: mude de 280px para 210px ou 220px */
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    /* Dica: Diminuir o gap de 32px para 24px ajuda a dar mais fôlego pros 5 cards não ficarem tão espremidos */
    gap: 24px; 
}

/* ==========================================================================
   5. CARDS DE PRODUTO
   ========================================================================== */
.produto {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinhamento à esquerda é mais moderno */
    text-align: left;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.produto:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-soft), var(--shadow-glow);
    border-color: rgba(56, 189, 248, 0.3);
}

.produto img {
    width: 100%;
    height: 200px;
    object-fit: contain; /* Mantemos para não cortar nenhum pedaço do produto */
    background-color: #ffffff; /* Cria um fundo branco para camuflar as imagens zuadas */
    border-radius: 12px; /* Deixa a borda arredondada, combinando com seu card */
    padding: 16px; /* Dá um espaço interno para o produto não colar nas bordas */
    margin-bottom: 24px;
    transition: transform 0.5s ease;
}

.produto:hover img {
    transform: scale(1.05); /* Imagem cresce suavemente ao passar o mouse */
}

.produto h2 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3.2rem;
}

.produto p {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 24px;
    width: 100%;
}

/* ==========================================================================
   6. BOTÕES 
   ========================================================================== */
.produto {
    /* ... mantenha o restante do CSS do .produto igual, mas certifique-se 
       de que ele tem flex e flex-direction: column (já estava no anterior) */
    height: 100%; /* Ajuda a padronizar a altura dos cards */
}

.produto a {
    display: flex; /* Isso resolve o bug! Transforma o link num bloco estruturado */
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px 20px;
    border-radius: var(--radius-pill); 
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: var(--transition-smooth);
    cursor: pointer;
    box-sizing: border-box; /* Garante que o padding não estoure a largura */
    white-space: nowrap; /* Impede que o texto "IR COMPRAR" quebre em duas linhas */
}

.btn-descricao {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-glass);
    margin-bottom: 12px;
    margin-top: auto; /* A Mágica: Empurra os botões sempre para o final do card! */
}

.btn-descricao:hover {
    color: var(--text-main);
    border-color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
}

.btn-comprar {
    background: var(--accent-color);
    color: #0f172a; 
    border: none;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.btn-comprar:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6);
}

/* ==========================================================================
   7. MODAL DE DESCRIÇÃO
   ========================================================================== */
.modal-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(15, 23, 42, 0.95);
    z-index: 999999;
    display: none; /* O JS muda para flex */
    justify-content: center;
    align-items: center;
}

.modal-overlay.ativo {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-color);
    border: 1px solid var(--border-glass);
    width: 90%;
    max-width: 600px;
    border-radius: var(--radius-lg);
    padding: 40px;
    position: relative;
    box-shadow: var(--shadow-soft);
    transform: scale(0.95);
    transition: var(--transition-smooth);
}

.modal-overlay.ativo .modal-content {
    transform: scale(1);
}

.fechar-modal {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.fechar-modal:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444; /* Vermelho suave */
}

#modal-titulo {
    color: var(--text-main);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 16px;
    padding-right: 40px;
}

#modal-texto {
    color: var(--text-muted);
    margin-bottom: 24px;
}

#modal-pontos-fortes {
    list-style: none;
}

#modal-pontos-fortes li {
    color: var(--text-main);
    margin-bottom: 12px;
    padding-left: 24px;
    position: relative;
}

#modal-pontos-fortes li::before {
    content: '→';
    color: var(--accent-color);
    position: absolute;
    left: 0;
}

/* ==========================================================================
   8. RODAPÉ
   ========================================================================== */
footer {
    text-align: center;
    padding: 40px 24px;
    border-top: 1px solid var(--border-glass);
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 80px;
}

/* ==========================================================================
   9. RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-container h1 {
        text-align: center;
    }

    .catalogo_produtos {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 40px auto;
    }
}

.header-abas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid var(--border-glass);
}
.header-abas a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1.0rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    transition: var(--transition-smooth);
}
.header-abas a:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
    text-shadow: 0 0 10px var(--accent-glow);
}

/* ==========================================================================
   FILTRO DE PREÇO (Limpo e Organizado)
   ========================================================================== */
.filtro-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 24px 0 24px;
    width: 100%;
}

.filtro-container label {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

#ordenar-preco {
    background: var(--card-bg);
    color: var(--text-main);
    border: 2px solid var(--border-glass);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
    margin-bottom: 10px;
}

#ordenar-preco:hover, #ordenar-preco:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-glow);
}

#ordenar-preco option {
    background-color: var(--bg-color); 
    color: var(--text-main);
}

/* ==========================================================================
   10. PAGINAÇÃO
   ========================================================================== */
.paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 40px auto 80px auto;
    width: 100%;
}

.btn-pagina {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border: 1px solid var(--border-glass);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-weight: 600;
}

.btn-pagina:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: var(--accent-color);
}

.btn-pagina.ativo {
    background: var(--accent-color);
    color: #0f172a;
    border-color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* ==========================================================================
   MENSAGEM DE BUSCA VAZIA (PRODUTO NÃO ENCONTRADO)
   ========================================================================== */
.mensagem-vazia {
    grid-column: 1 / -1; /* O TRUQUE: Faz a mensagem ignorar as 5 colunas e ocupar a tela toda! */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    background: var(--card-bg);
    border: 2px dashed rgba(56, 189, 248, 0.4); /* Borda tracejada azul neon */
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    margin-top: 20px;
    animation: fadeInPage 0.5s ease forwards;
}

.mensagem-vazia h2 {
    color: var(--text-main);
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.mensagem-vazia p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* ==========================================================================
   NOTIFICAÇÃO DE COMPRA (PROVA SOCIAL)
   ========================================================================== */
.notificacao-compra {
    position: fixed;
    bottom: -150px; /* Começa escondido pra fora da tela */
    left: 24px;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--accent-color);
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.2);
    z-index: 999999;
    pointer-events: none; /* Faz o mouse ignorar a caixa para não atrapalhar cliques do usuário */
    transition: bottom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efeito de pulo elástico */
}

/* Quando o JS adicionar essa classe, ele sobe pra tela */
.notificacao-compra.mostrar {
    bottom: 24px;
}

.notificacao-icone {
    font-size: 2rem;
    background: rgba(56, 189, 248, 0.1);
    padding: 10px;
    border-radius: 50%;
}

.notificacao-texto {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.notificacao-texto span {
    color: var(--text-main);
    font-weight: 600;
}

.notificacao-texto strong {
    color: var(--accent-color);
    display: block;
    margin-top: 2px;
}

/* ==========================================================================
   MENU DE SUGESTÕES (TAGS RÁPIDAS)
   ========================================================================== */
.sugestoes-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    width: 100%;
    border-top: 1px solid var(--border-glass);
    overflow-x: auto; /* Se não couber na tela do celular, ele cria um scroll pro lado! */
    white-space: nowrap; /* Impede que os botões quebrem de linha */
    scrollbar-width: none; /* Esconde a barra de rolagem feia no Firefox */
}

/* Esconde a barra de rolagem no Chrome/Safari */
.sugestoes-container::-webkit-scrollbar {
    display: none;
}

.btn-sugestao {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid var(--border-glass);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-sugestao:hover {
    background: rgba(56, 189, 248, 0.15);
    color: var(--text-main);
    border-color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-glow);
    transform: translateY(-2px);
}

/* O botão de limpar fica com um visual levemente avermelhado no hover */
.btn-sugestao.limpar:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

/* ==========================================================================
   9. RESPONSIVIDADE (CELULARES E TABLETS) - MODO APLICATIVO
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. CABEÇALHO MAIS COMPACTO */
    header {
        padding: 12px 0;
    }

    .header-container {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
    }
    
    .header-container h1 {
        font-size: 1.4rem; /* Diminui o logo */
        text-align: center;
    }

    #campo-pesquisa {
        padding: 10px 16px; /* Barra de pesquisa mais fina */
    }

    /* 2. ABAS MAIS JUNTAS */
    .header-abas {
        margin-top: 12px;
        padding-top: 12px;
        gap: 8px; /* Junta mais os botões */
    }

    .header-abas a {
        font-size: 0.75rem; /* Texto menor */
        padding: 6px 12px;
    }

    /* 3. FILTRO CENTRALIZADO */
    .filtro-container {
        justify-content: center;
        padding: 12px 16px 0 16px;
    }

    #ordenar-preco {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* 4. VITRINE COM 2 PRODUTOS LADO A LADO */
    .catalogo_produtos {
        grid-template-columns: repeat(2, 1fr); /* Força 2 colunas cravadas! */
        gap: 12px; /* Espaço menor entre os cards */
        margin: 24px auto;
        padding: 0 12px;
    }

    /* 5. CARDS DE PRODUTO AJUSTADOS PRO CELULAR */
    .produto {
        padding: 12px; /* Card com menos borda pra caber na tela */
        border-radius: 12px;
    }

    .produto img {
        height: 120px; /* Imagem menor */
        padding: 8px;
        margin-bottom: 12px;
    }

    .produto h2 {
        font-size: 0.85rem; /* Título menor para não estourar a linha */
        height: 2.6rem;
        margin-bottom: 6px;
    }

    .produto p {
        font-size: 1.1rem; /* Preço menor */
        margin-bottom: 12px;
    }

    .produto a {
        padding: 8px 10px;
        font-size: 0.75rem; /* Botões menores */
    }
    
    .btn-descricao {
        margin-bottom: 8px;
    }

    /* 6. SUGESTÕES DINÂMICAS (Efeito Carrossel Swipe estilo iFood) */
    .sugestoes-container {
        justify-content: flex-start; /* O SEGREDO: Libera a rolagem e para de cortar os primeiros itens */
        padding: 10px 16px;
        gap: 8px;
        /* Dá um respiro no final para o último botão não colar na tela */
        padding-right: 24px; 
        /* Efeito magnético suave ao rolar no touch */
        scroll-snap-type: x mandatory; 
    }

    .btn-sugestao {
        font-size: 0.75rem; /* Fica menor e mais delicado */
        padding: 6px 14px;
        flex-shrink: 0; /* Proíbe o celular de tentar "amassar" o botão */
        scroll-snap-align: start; /* Dá aquela travadinha satisfatória ao deslizar o dedo */
    }
}

/* ==========================================================================
   10. EFEITO HEADER COMPACTO (ALTA PERFORMANCE - LISO)
   ========================================================================== */
/* 1. Transições focadas: o navegador não engasga mais recalculando a página inteira! */
header {
    transition: background-color 0.2s ease, padding 0.1s ease;
}

.header-container h1, 
#campo-pesquisa, 
.header-abas,
.header-abas a {
    transition: color 0.3s ease, background 0.3s ease, text-shadow 0.3s ease; 
}

/* 2. LIGA A PLACA DE VÍDEO (GPU) APENAS PARA O QUE VAI DESAPARECER */
.filtro-container,
.sugestoes-container {
    will-change: max-height, opacity, transform; 
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, transform 0.25s ease;
    max-height: 80px; 
    opacity: 1;
    overflow: hidden;
    transform: translateY(0); 
}

/* ---------------------------------------------------
   3. O ESTADO COMPACTO (AQUI ELE ENCOLHE!) 
   --------------------------------------------------- */
header.header-compacto {
    padding: 8px 0;
    background: rgba(15, 23, 42, 0.98);
}

header.header-compacto .header-container h1 {
    font-size: 1.3rem; 
}

header.header-compacto #campo-pesquisa {
    padding: 8px 20px; 
}

header.header-compacto .header-abas {
    margin-top: 8px;
    padding-top: 8px;
    gap: 16px; 
}

header.header-compacto .header-abas a {
    font-size: 0.85rem;
    padding: 4px 12px;
}

/* 4. FAZ AS SUGESTÕES E O FILTRO DESLIZAREM E SUMIREM */
header.header-compacto .filtro-container,
header.header-compacto .sugestoes-container {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-color: transparent;
    pointer-events: none;
    transform: translateY(-10px); 
}