/* ==========================================================================
   DIX STOREFRONT - MODERN THEME ENGINE
   ========================================================================== */

/* 1. VARI�VEIS & CONFIGURA��ES GLOBAIS (O "Motor")
   --------------------------------------------------------------------------
   As vari�veis --cor-primaria, --cor-menu, etc, s�o injetadas pelo _Layout.cshtml
   baseado no Banco de Dados. Aqui n�s derivamos as varia��es.
*/
:root {
    /* Cria automaticamente um tom 20% mais escuro para intera��es (Hover) */
    --cor-primaria-dark: color-mix(in srgb, var(--cor-primaria), black 20%);
    /* --cor-primaria-soft e --on-primaria-soft vem do servidor (_ThemeTokens):
       precisam conhecer a SUPERFICIE e ter piso de contraste. Ver DESIGN_TOKENS.md */
    /* Sombras Padronizadas (Efeito de profundidade moderna) */
    --sombra-suave: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --sombra-flutuante: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
    /* Transi��es */
    --transicao-padrao: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   1b. CONTEXTOS DE SUPERFÍCIE  (Fase 2)
   --------------------------------------------------------------------------
   PROBLEMA QUE ISTO RESOLVE: --cor-titulo/--cor-texto eram derivados apenas do
   FUNDO DA PÁGINA e usados sobre QUALQUER superfície. Num tema escuro, um card
   claro recebia título quase branco => texto invisível. E vice-versa.

   COMO FUNCIONA: o servidor deriva um conjunto (título/texto/suave/borda) para
   CADA superfície e emite em _ThemeTokens.cshtml. As classes abaixo apenas
   REAPONTAM os tokens C3 para o conjunto da superfície corrente. Como custom
   properties são herdadas, tudo que estiver dentro do bloco passa a enxergar as
   cores certas — sem que nenhum componente precise saber onde está.

   PARA AUTORES DE TEMPLATE: nunca escreva cor de texto fixa. Se criar um bloco
   com fundo próprio, marque-o com a classe de contexto correspondente.
   Contrato: Docs/DesignTokens/DESIGN_TOKENS.md
   ========================================================================== */

/* Superfície de card/painel — aplicada automaticamente aos componentes que já
   usam var(--superficie) como fundo. */
.ctx-superficie,
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.accordion-item,
.list-group-item,
.bg-superficie,
.card-depoimento,
.mk-secao-painel {
    --cor-titulo: var(--titulo-on-superficie);
    --cor-texto: var(--texto-on-superficie);
    --cor-texto-muted: var(--suave-on-superficie);
    --cor-borda: var(--borda-on-superficie);
    /* Um card é sempre a superfície do TEMA, mesmo aninhado dentro de um bloco
       claro fixo. Sem isto, um .card dentro de .bg-light herdaria --superficie
       branco e receberia o texto claro do tema => claro sobre branco. */
    --superficie: var(--superficie-base);
    --on-superficie: var(--on-superficie-base);
    /* Recalcula os tokens de campo NESTE contexto: custom properties são
       computadas onde são declaradas, então sem isto continuariam valendo os
       valores do :root. */
    --campo-fundo: color-mix(in srgb, var(--texto-on-superficie) 7%, var(--superficie-base));
    --campo-fundo-hover: color-mix(in srgb, var(--texto-on-superficie) 11%, var(--superficie-base));
    --acento: var(--acento-on-superficie);
    --acento-sec: var(--acento-sec-on-superficie);
    --bs-link-color: var(--acento-on-superficie);
    --bs-link-color-rgb: var(--acento-on-superficie-rgb);
    --campo-texto-suave: var(--suave-on-campo);
    /* Espelha os --bs-* que dependem do contexto. Sem isto eles ficariam com o
       valor computado no :root: custom property e computada ONDE e declarada,
       entao um .h6 dentro de um bloco claro continuaria com a cor de titulo do
       tema (bug encontrado pela pagina /dev/tokens). */
    --bs-heading-color: var(--cor-titulo);
    --bs-emphasis-color: var(--cor-titulo);
    --bs-body-color: var(--cor-texto);
    --bs-secondary-color: var(--cor-texto-muted);
    --bs-tertiary-color: var(--cor-texto-muted);
    --bs-border-color: var(--cor-borda);
    --bs-border-color-translucent: var(--cor-borda);
    /* REAPLICA a cor: trocar o token nao basta. Texto que apenas HERDA do body
       continuaria com a cor do contexto anterior — foi assim que um paragrafo
       claro apareceu dentro de um bloco branco. Achado pela pagina /dev/tokens. */
    color: var(--cor-texto);
}

/* Superfície CLARA FIXA: blocos que continuam brancos/quase-brancos mesmo em
   tema escuro (bg-white/bg-light no markup, heros com gradiente claro).
   Aqui o texto precisa ficar ESCURO — é o oposto do resto do tema. */
/* NOTA (upgrade p/ Bootstrap 5.3): os .alert saíram desta lista. No 5.1 eles
   tinham fundo claro FIXO e precisavam de contexto claro; no 5.3 seguem o
   data-bs-theme (--bs-info-bg-subtle vira #032830 no escuro), então o contexto
   PADRÃO já é o correto para eles. Mantê-los aqui seria a regressão inversa:
   texto escuro sobre alert escuro.
   .bg-white e .bg-light, ao contrário, continuam claros fixos no 5.3
   (--bs-light-rgb e --bs-white-rgb não são redefinidos no tema escuro). */
.ctx-claro,
.bg-white,
.bg-light {
    --cor-titulo: var(--titulo-on-claro);
    --cor-texto: var(--texto-on-claro);
    --cor-texto-muted: var(--suave-on-claro);
    --cor-borda: var(--borda-on-claro);
    --superficie: #ffffff;
    --on-superficie: #212529;
    /* token-ok: este contexto E a superficie clara fixa; #ffffff aqui e a definicao */
    --campo-fundo: color-mix(in srgb, var(--texto-on-claro) 7%, #ffffff);
    --campo-fundo-hover: color-mix(in srgb, var(--texto-on-claro) 11%, #ffffff);
    --acento: var(--acento-on-claro);
    --acento-sec: var(--acento-sec-on-claro);
    --bs-link-color: var(--acento-on-claro);
    --bs-link-color-rgb: var(--acento-on-claro-rgb);
    --campo-texto-suave: var(--suave-on-claro);
    /* Espelha os --bs-* que dependem do contexto. Sem isto eles ficariam com o
       valor computado no :root: custom property e computada ONDE e declarada,
       entao um .h6 dentro de um bloco claro continuaria com a cor de titulo do
       tema (bug encontrado pela pagina /dev/tokens). */
    --bs-heading-color: var(--cor-titulo);
    --bs-emphasis-color: var(--cor-titulo);
    --bs-body-color: var(--cor-texto);
    --bs-secondary-color: var(--cor-texto-muted);
    --bs-tertiary-color: var(--cor-texto-muted);
    --bs-border-color: var(--cor-borda);
    --bs-border-color-translucent: var(--cor-borda);
    /* REAPLICA a cor: trocar o token nao basta. Texto que apenas HERDA do body
       continuaria com a cor do contexto anterior — foi assim que um paragrafo
       claro apareceu dentro de um bloco branco. Achado pela pagina /dev/tokens. */
    color: var(--cor-texto);
}

/* EXCEÇÕES: elementos que TÊM bg-light/bg-white no markup mas cujo fundo a
   camada de compatibilidade (Fase 1) já tokenizou. Eles seguem o tema, não são
   claros fixos — portanto voltam ao contexto de superfície.
   Precisam vir DEPOIS do bloco acima. */
.table > thead.bg-light,
.table > thead.bg-white,
.table > thead.table-light,
.form-control.bg-light,
.form-control.bg-white,
.form-select.bg-light,
.form-select.bg-white,
.input-group.bg-light,
.input-group.bg-white,
.input-group-text.bg-light,
.input-group-text.bg-white,
.card.bg-superficie,
.card-header.bg-superficie,
.card-footer.bg-superficie {
    --cor-titulo: var(--titulo-on-superficie);
    --cor-texto: var(--texto-on-superficie);
    --cor-texto-muted: var(--suave-on-superficie);
    --cor-borda: var(--borda-on-superficie);
    /* Alias estável: volta à superfície do tema sem auto-referência cíclica
       (--superficie: var(--superficie) seria inválido). */
    --superficie: var(--superficie-base);
    --on-superficie: var(--on-superficie-base);
    --campo-fundo: color-mix(in srgb, var(--texto-on-superficie) 7%, var(--superficie-base));
    --campo-texto-suave: var(--suave-on-campo);
    /* Espelha os --bs-* que dependem do contexto. Sem isto eles ficariam com o
       valor computado no :root: custom property e computada ONDE e declarada,
       entao um .h6 dentro de um bloco claro continuaria com a cor de titulo do
       tema (bug encontrado pela pagina /dev/tokens). */
    --bs-heading-color: var(--cor-titulo);
    --bs-emphasis-color: var(--cor-titulo);
    --bs-body-color: var(--cor-texto);
    --bs-secondary-color: var(--cor-texto-muted);
    --bs-tertiary-color: var(--cor-texto-muted);
    --bs-border-color: var(--cor-borda);
    --bs-border-color-translucent: var(--cor-borda);
    /* REAPLICA a cor: trocar o token nao basta. Texto que apenas HERDA do body
       continuaria com a cor do contexto anterior — foi assim que um paragrafo
       claro apareceu dentro de um bloco branco. Achado pela pagina /dev/tokens. */
    color: var(--cor-texto);
}

/* Topo e rodapé: fundos próprios, configurados pelo lojista. */
.ctx-topo {
    --cor-titulo: var(--titulo-on-topo);
    --cor-texto: var(--texto-on-topo);
    --cor-texto-muted: var(--suave-on-topo);
    --cor-borda: var(--borda-on-topo);
    --acento: var(--acento-on-topo);
    --acento-sec: var(--acento-sec-on-topo);
    --bs-link-color: var(--acento-on-topo);
    --bs-link-color-rgb: var(--acento-on-topo-rgb);
    /* Espelha os --bs-* que dependem do contexto. Sem isto eles ficariam com o
       valor computado no :root: custom property e computada ONDE e declarada,
       entao um .h6 dentro de um bloco claro continuaria com a cor de titulo do
       tema (bug encontrado pela pagina /dev/tokens). */
    --bs-heading-color: var(--cor-titulo);
    --bs-emphasis-color: var(--cor-titulo);
    --bs-body-color: var(--cor-texto);
    --bs-secondary-color: var(--cor-texto-muted);
    --bs-tertiary-color: var(--cor-texto-muted);
    --bs-border-color: var(--cor-borda);
    --bs-border-color-translucent: var(--cor-borda);
    /* REAPLICA a cor: trocar o token nao basta. Texto que apenas HERDA do body
       continuaria com a cor do contexto anterior — foi assim que um paragrafo
       claro apareceu dentro de um bloco branco. Achado pela pagina /dev/tokens. */
    color: var(--cor-texto);
}

.ctx-rodape,
footer {
    --cor-titulo: var(--titulo-on-rodape);
    --cor-texto: var(--texto-on-rodape);
    --cor-texto-muted: var(--suave-on-rodape);
    --cor-borda: var(--borda-on-rodape);
    --acento: var(--acento-on-rodape);
    --acento-sec: var(--acento-sec-on-rodape);
    --bs-link-color: var(--acento-on-rodape);
    --bs-link-color-rgb: var(--acento-on-rodape-rgb);
    /* Espelha os --bs-* que dependem do contexto. Sem isto eles ficariam com o
       valor computado no :root: custom property e computada ONDE e declarada,
       entao um .h6 dentro de um bloco claro continuaria com a cor de titulo do
       tema (bug encontrado pela pagina /dev/tokens). */
    --bs-heading-color: var(--cor-titulo);
    --bs-emphasis-color: var(--cor-titulo);
    --bs-body-color: var(--cor-texto);
    --bs-secondary-color: var(--cor-texto-muted);
    --bs-tertiary-color: var(--cor-texto-muted);
    --bs-border-color: var(--cor-borda);
    --bs-border-color-translucent: var(--cor-borda);
    /* REAPLICA a cor: trocar o token nao basta. Texto que apenas HERDA do body
       continuaria com a cor do contexto anterior — foi assim que um paragrafo
       claro apareceu dentro de um bloco branco. Achado pela pagina /dev/tokens. */
    color: var(--cor-texto);
}

/* NOTA: o .toast NAO recebe contexto claro. No 5.3 --bs-toast-bg deriva de
   --bs-body-bg, entao ele acompanha o tema — mesma situacao dos .alert. Forcar
   contexto claro aqui daria texto escuro sobre toast escuro (media 1,43 na
   pagina /dev/tokens). O fundo #fff inline do _Layout tambem foi removido. */


/* Área de FOTO de produto: fundo branco é exceção legítima do contrato, mas
   NÃO deve criar contexto claro para o texto ao redor — só contém <img>. */
.bg-foto {
    /* token-ok: foto de produto tem fundo branco chapado (excecao do contrato) */
    background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6, .fw-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    /* Token sem�ntico: derivado do fundo do site (override: cor_titulos) */
    color: var(--cor-titulo);
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--cor-fundo-site);
    /* Token sem�ntico: derivado do fundo do site (override: cor_texto_site) */
    color: var(--cor-texto);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* Texto de ênfase: mesma cor dos títulos, SEM alterar fonte/peso (ao contrário
   de .fw-title, que também aplica Montserrat 700). Substitui os usos de
   .text-dark cujo objetivo era "destacar", não "escurecer".
   Ver Docs/DesignTokens/PLANO_CONTRASTE.md */
.texto-enfase {
    color: var(--cor-titulo);
}

/* Área levemente rebaixada DENTRO da superfície corrente. Substitui os usos de
   .bg-light cuja intenção era "separar esta região do resto do card", e não
   "esta região é branca": um formulário sob as abas, o rodapé de total, um card
   de observação. Segue o tema em vez de virar um bloco claro no escuro.
   Em tema claro a superfície É #ffffff, então o resultado fica próximo do
   #f8f9fa que o bg-light dava. */
.superficie-suave {
    background-color: color-mix(in srgb, var(--cor-texto) 5%, var(--superficie));
}

/* Hero institucional: mesma ideia, em gradiente. */
.hero-suave {
    background: linear-gradient(180deg, var(--superficie) 0%, color-mix(in srgb, var(--cor-texto) 7%, var(--superficie)) 100%);
}

    .hero-suave.hero-suave-diagonal {
        background: linear-gradient(135deg, var(--superficie) 0%, color-mix(in srgb, var(--cor-texto) 7%, var(--superficie)) 100%);
    }

/* Variante do CTA que usa a cor de CALL em vez da primária. */
.bg-cta-call {
    /* token-ok: gradiente de marca (receita do contrato); texto vai em var(--on-call) */
    background: linear-gradient(135deg, var(--cor-call) 0%, color-mix(in srgb, var(--cor-call), #000 45%) 100%);
    color: var(--on-call) !important;
}

/* Superfície de card/painel. Substitui .bg-white em elementos de card, onde o
   branco fixo era só "a cor de card do tema claro".
   Seguro nos dois temas: --superficie É #ffffff quando o fundo do site é claro
   (BaseController), então em tema claro isto é no-op visual; em tema escuro
   corrige o texto claro que sumia sobre o branco fixo.
   NÃO usar em área de FOTO de produto — lá o branco é exceção legítima. */
.bg-superficie {
    background-color: var(--superficie);
}

/* Cor secund�ria como acento (texto). Ex.: rótulos/eyebrows, "Veja também". */
.text-secundaria {
    color: var(--cor-secundaria) !important;
}

/* Selo de apoio na cor secund�ria (a��o/informa��o secund�ria; o selo principal fica na prim�ria) */
.badge-secundaria {
    background-color: var(--cor-secundaria) !important;
    color: var(--on-secundaria) !important;
}

a {
    text-decoration: none;
    transition: var(--transicao-padrao);
    /* --acento: marca verificada contra a superficie corrente (ver contexto) */
    color: var(--acento);
}

    a:hover {
        color: var(--cor-primaria-dark);
    }

/* 3. BOT�ES (Design System)
   --------------------------------------------------------------------------
*/
/* Bot�o Principal (S�lido) */
.btn-custom {
    background-color: var(--cor-primaria);
    color: var(--cor-texto-primaria) !important; /* MUDOU AQUI */
    border: 1px solid transparent;
    transition: var(--transicao-padrao);
    font-weight: 600;
}

    .btn-custom:hover {
        /* --cor-primaria-hover move a cor no sentido OPOSTO ao do texto, entao o
           contraste sobe. O --cor-primaria-dark escurecia sempre, o que reduz o
           contraste quando o texto por cima e escuro (marca clara). */
        background-color: var(--cor-primaria-hover);
        color: var(--on-primaria-hover) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

/* CLASSE PARA O CARD DO "FALE CONOSCO" */
.bg-primaria-dinamico {
    background-color: var(--cor-primaria) !important; /* Adicione o !important aqui */
    color: var(--cor-texto-primaria) !important;
}

    .bg-primaria-dinamico * {
        color: var(--cor-texto-primaria) !important;
    }

/* Bot�o Secund�rio (Borda) — usa a COR SECUND�RIA (a��o secund�ria; a��o principal fica no .btn-custom) */
.btn-outline-custom {
    border: 2px solid var(--cor-secundaria);
    color: var(--acento-sec);
    background: transparent;
    font-weight: 700;
    transition: var(--transicao-padrao);
}

    .btn-outline-custom:hover {
        background-color: var(--cor-secundaria);
        color: var(--on-secundaria);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

/* Bot�o Whatsapp Flutuante */
.btn-whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    /* token-ok: WhatsApp tem cor de marca propria, nao acompanha a paleta */
    background-color: #25d366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    z-index: 1000;
    transition: var(--transicao-padrao);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4);
}

    .btn-whatsapp-float:hover {
        /* token-ok: WhatsApp (hover) */
        background-color: #1da851;
        transform: scale(1.1) rotate(5deg); /* Pequena anima��o */
        /* token-ok: WhatsApp (hover) */
        color: #fff;
    }

/* Bot�es de Navega��o (Carrossel) */
.btn-nav-flutuante {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 45px;
    height: 45px;
    background-color: var(--superficie);
    color: var(--cor-primaria);
    border: none;
    border-radius: 50%;
    box-shadow: var(--sombra-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicao-padrao);
    opacity: 0.9;
    cursor: pointer;
}

    .btn-nav-flutuante:hover {
        background-color: var(--cor-primaria);
        color: var(--cor-texto-primaria);
        transform: translateY(-50%) scale(1.1);
        opacity: 1;
        box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    }

.btn-nav-prev {
    left: -20px;
}

.btn-nav-next {
    right: -20px;
}

@media (max-width: 992px) {
    .btn-nav-prev, .btn-nav-next {
        display: none;
    }
}

/* 4. CARDS & PRODUTOS
   --------------------------------------------------------------------------
*/
.card {
    border: none;
    background: var(--superficie);
    transition: var(--transicao-padrao);
    border-radius: 16px; /* Bordas mais arredondadas estilo App */
}

/* --------------------------------------------------------------------------
   CARD DE PRODUTO (Base) — usado no carrossel da home, em Campanhas e no Catalogo.

   O card e UMA superficie so, com uma "janela" de foto no topo. Antes o rodape
   dos botoes tambem era branco, entao o nome do produto virava uma tarja escura
   entre dois blocos brancos em tema escuro. Removido o branco do rodape, o nome
   e os botoes passam a dividir a superficie do card e a tarja deixa de existir
   — mesma estrutura que o tema Aurora ja usava.

   Branco permanece SO na area de foto e nas miniaturas (.bg-foto): foto de
   produto tem fundo branco chapado, excecao registrada no contrato.
   -------------------------------------------------------------------------- */
.card-produto-foto {
    height: 200px;
}

.card-produto-thumbs {
    min-height: 42px;
}

.card-produto-categoria {
    font-size: 0.62rem;
    letter-spacing: 1px;
    /* --acento-sec: a secundaria ja verificada contra a superficie do card */
    color: var(--acento-sec);
}

.card-produto-titulo {
    font-size: 0.85rem;
    /* line-height proprio: o 1.6 do body deixava o bloco de 2 linhas alto demais
       e colava o nome nos botoes. 0,85rem x 1,3 reduz ~27% a altura do bloco. */
    line-height: 1.3;
    color: var(--cor-titulo);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Efeito Hover nos Cards de Produto */
.hover-card {
    box-shadow: var(--sombra-suave);
    overflow: hidden;
    position: relative;
}

    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--sombra-flutuante) !important;
    }

    .hover-card img {
        transition: transform 0.5s ease;
    }

    .hover-card:hover img {
        transform: scale(1.05); /* Zoom sutil na imagem */
    }

/* Card de Depoimento */
.card-depoimento {
    background: var(--superficie);
    border-radius: 16px;
    box-shadow: var(--sombra-suave);
    transition: var(--transicao-padrao);
}

    .card-depoimento:hover {
        transform: translateY(-5px);
        box-shadow: var(--sombra-flutuante);
    }

/* ==========================================================================
   5. NAVEGA��O E TOPO DIN�MICO (HEADER)
   ========================================================================== */
header nav {
    transition: padding 0.3s ease;
}

.navbar-brand img {
    transition: transform 0.3s ease;
}

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

/* ---------------------------------------------------
   TEXTOS DO TOPO: Respeita a escolha do usu�rio (--cor-menu) 
   --------------------------------------------------- */
.navbar-dinamico .nav-link,
.navbar-dinamico .logo-texto-fallback,
.navbar-dinamico .icone-usuario,
.navbar-dinamico .menu-hamburguer-btn i {
    color: var(--cor-menu) !important;
}

.navbar-dinamico .divisor-topo {
    background-color: var(--cor-menu) !important;
    opacity: 0.3;
}

.menu-hamburguer-btn:focus {
    box-shadow: none;
    outline: none;
}

/* ---------------------------------------------------
   EFEITOS HOVER NO MENU: Usa a Cor Prim�ria 
   --------------------------------------------------- */
.navbar-dinamico .nav-link {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 1rem !important;
    position: relative;
    opacity: 0.9;
}

    /* Quando passa o mouse, a letra fica da cor de HOVER do menu (fallback: prim�ria) */
    .navbar-dinamico .nav-link:hover {
        color: var(--cor-hover-menu) !important;
        opacity: 1;
    }

    /* A linha animada embaixo do menu acompanha a cor de HOVER do menu */
    .navbar-dinamico .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%;
        background-color: var(--cor-hover-menu);
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .navbar-dinamico .nav-link:hover::after {
        width: 70%;
    }

/* ---------------------------------------------------
   BOT�ES DO TOPO (Carrinho e Entrar) 
   --------------------------------------------------- */

/* Estado Normal do Carrinho */
.btn-carrinho-topo {
    background-color: transparent !important;
    border: 1px solid color-mix(in srgb, var(--cor-menu), transparent 80%);
    color: var(--cor-menu) !important;
    border-radius: 50px;
    padding: 8px 20px !important;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transicao-padrao);
}

    .btn-carrinho-topo .icone-carrinho {
        color: var(--cor-menu) !important;
    }

/* Remove a linha de sublinhado animado que os links normais t�m */
.navbar-dinamico .btn-carrinho-topo::after {
    display: none !important;
}

/* HOVER DO CARRINHO: For�a a cor de contraste e adiciona o efeitinho de pular */
.navbar-dinamico .btn-carrinho-topo:hover {
    background-color: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
    color: var(--cor-texto-primaria) !important;
    transform: translateY(-2px); /* Efeito igual ao do bot�o Entrar */
}

    .navbar-dinamico .btn-carrinho-topo:hover .icone-carrinho {
        color: var(--cor-texto-primaria) !important;
    }

/* A bolinha vermelha do carrinho (Qtd) */
.badge-carrinho {
    /* token-ok: vermelho semantico de alerta */
    background-color: #dc3545 !important;
    color: white !important;
}

/* Estado Normal do Bot�o Entrar */
.btn-login-topo {
    border: 2px solid var(--cor-menu);
    color: var(--cor-menu) !important;
    background: transparent;
    transition: var(--transicao-padrao);
}

    /* HOVER DO BOT�O ENTRAR */
    .btn-login-topo:hover {
        background-color: var(--cor-primaria);
        border-color: var(--cor-primaria);
        color: var(--cor-texto-primaria) !important;
        transform: translateY(-2px);
    }

/* ---------------------------------------------------
   BOT�O DE BUSCA DO TOPO (UX Premium)
   --------------------------------------------------- */
/* 1. Ajuste de Respiro (Padding e Tamanho) */
.btn-busca-topo {
    background-color: transparent !important;
    color: var(--cor-menu) !important;
    border-radius: 50%;
    width: 45px; /* Ligeiramente maior para dar margem */
    height: 45px;
    padding: 0 !important;
    transition: var(--transicao-padrao);
    border: 1px solid transparent;
}

.navbar-dinamico .btn-busca-topo::after {
    display: none !important;
}

/* Reduz o �cone sutilmente para sobrar mais espa�o em branco no c�rculo */
.btn-busca-topo .icone-busca {
    font-size: 1.15rem !important;
}

/* 2. O Hover Discreto: Fundo transl�cido em vez de cor s�lida */
/* O rgba branco com 15% de opacidade cria um destaque elegante em fundos escuros */
.btn-busca-topo:hover, .btn-busca-topo[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--cor-menu) !important;
    transform: translateY(-2px);
}

/* 3. Dropdown flutuante (Descolado do menu) */
.dropdown-busca .dropdown-menu {
    margin-top: 15px !important; /* Cria um v�o entre o cabe�alho e a caixa */
    border: 1px solid rgba(0,0,0,0.05) !important;
}

/* 4. Input Premium (Estilo P�lula com bot�o interno) */
.input-group-busca {
    background-color: color-mix(in srgb, var(--cor-texto) 7%, var(--superficie)); /* Fundo neutro derivado da superf�cie */
    border-radius: 50px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

    /* Quando o usu�rio clica para digitar, a caixa acende com a cor da marca */
    .input-group-busca:focus-within {
        background-color: var(--superficie);
        border-color: var(--cor-primaria-soft);
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
    }

    .input-group-busca .form-control {
        color: var(--cor-texto);
        font-weight: 500;
    }

        .input-group-busca .form-control::placeholder {
            color: var(--cor-texto-muted);
            font-weight: 400;
        }

@media (max-width: 992px) {
    .dropdown-busca .dropdown-menu {
        min-width: 100% !important;
        margin-top: 10px !important;
    }
}



/* 6. TABELAS & CARRINHO (Ajustes finos)
   --------------------------------------------------------------------------
*/
.table-hover tbody tr:hover {
    background-color: var(--cor-primaria-soft);
}

/* Controle de Quantidade */
.qtd-control-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--cor-borda);
    border-radius: 50px; /* P�lula completa */
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    background: var(--superficie);
    width: auto; /* Permite crescer */
    min-width: 120px; /* Garante tamanho m�nimo */
}

    .qtd-control-group .btn {
        border: none;
        background: transparent;
        padding: 0.5rem 1rem;
        color: var(--cor-texto);
        transition: background-color 0.2s;
        z-index: 10; /* Garante clique */
    }

        .qtd-control-group .btn:hover {
            background-color: color-mix(in srgb, var(--cor-texto) 8%, var(--superficie));
            color: var(--cor-primaria);
        }

        .qtd-control-group .btn:active {
            background-color: color-mix(in srgb, var(--cor-texto) 12%, var(--superficie));
        }

    .qtd-control-group input {
        border: none;
        text-align: center;
        font-weight: 700;
        width: 60px; /* Aumentado para caber 3-4 d�gitos */
        padding: 0;
        background: transparent;
        color: var(--cor-texto);
        -moz-appearance: textfield; /* Remove setinhas nativas */
    }

        /* Remove setinhas nativas do Chrome/Safari */
        .qtd-control-group input::-webkit-outer-spin-button,
        .qtd-control-group input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

    /* Feedback Visual de Carregando (Opcional) */
    .qtd-control-group.loading {
        opacity: 0.7;
        pointer-events: none;
    }

/* 7. RODAP� (FOOTER)
   --------------------------------------------------------------------------
*/
footer {
    background-color: var(--cor-rodape) !important;
    color: var(--cor-texto-rodape);
    font-size: 0.9rem;
}

    footer h5 {
        font-size: 1.1rem;
        letter-spacing: 0.5px;
        margin-bottom: 1.5rem;
        color: var(--cor-texto-rodape);
        opacity: 0.95;
        font-weight: 700;
    }

    footer a {
        color: color-mix(in srgb, var(--cor-texto-rodape) 70%, transparent) !important;
        transition: all 0.2s ease;
    }

        footer a:hover {
            color: var(--cor-texto-rodape) !important;
            padding-left: 5px; /* Seta imagin�ria */
            text-decoration: none;
        }

.copyright-bar {
    background-color: color-mix(in srgb, var(--cor-texto-rodape) 8%, transparent);
    padding: 20px 0;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--cor-texto-rodape) 60%, transparent);
}

/* 8. UTILIT�RIOS E CLASSES ESPECIAIS
   --------------------------------------------------------------------------
*/

/* Sombras Suaves */
.shadow-soft {
    box-shadow: var(--sombra-suave) !important;
}

/* Fundo Call to Action com Gradiente */
.bg-cta-modern {
    /* token-ok: gradiente de marca (receita do contrato); texto vai em var(--on-call) */
    background: linear-gradient(135deg, var(--cor-primaria) 0%, color-mix(in srgb, var(--cor-primaria), #000 45%) 100%);
    color: var(--cor-texto-primaria) !important;
}

    .bg-cta-modern h2, .bg-cta-modern p, .bg-cta-modern i {
        color: var(--cor-texto-primaria) !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* Card de CTA com mídia real (imagem/gif/vídeo vindos do ERP) */
.cta-media {
    height: auto;
    min-height: 180px;
    max-height: 520px;
    object-fit: cover;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Com texto do lojista por cima da mídia: véu escuro uniforme p/ leitura */
.cta-overlay-texto {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.55) 100%);
}

/* Texto do lojista (HTML livre do ERP): branco com sombra p/ legibilidade */
.cta-conteudo {
    max-width: 780px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

    .cta-conteudo,
    .cta-conteudo * {
        /* token-ok: texto sobre imagem com veu escuro (excecao do contrato) */
        color: #fff !important;
    }

/* ===================================================================
   BANNER DA CAMPANHA COM A BUSCA INCORPORADA
   A busca fica A CAVALEIRO da borda inferior do banner: metade sobre a
   arte, metade para fora. Integra os dois num conjunto so cobrindo o
   minimo do trabalho do lojista (so a metade de cima do campo encosta
   na imagem), e a sombra do campo mantem o efeito de profundidade.
   Vale em todos os tamanhos: no celular o banner 3:1 fica baixo, e e
   justamente ai que sobrepor pouco importa mais.
   =================================================================== */
/* MOBILE (padrao): banner e busca empilhados dentro de um card so. Com 3:1 o
   banner fica com ~130px no celular; a cavaleiro, o campo comeria um quinto da
   arte. Aqui ele nao cobre nada. O arredondado/sombra sao do CONTAINER. */
.campanha-banner {
    position: relative;
    background-color: var(--superficie);
    border-radius: var(--bs-border-radius-xl);
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-sm);
}

.campanha-banner-arte {
    overflow: hidden;
}

.campanha-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

.campanha-banner-busca {
    padding: 0.85rem 0.85rem 1rem;
}

/* DESKTOP: a arte vira o card e a busca sai do fluxo, ficando A CAVALEIRO da
   borda inferior - metade sobre a imagem, metade fora. Aqui o banner e alto o
   bastante para a faixa coberta ser irrelevante, e a sombra do campo da o
   efeito de profundidade. */
@media (min-width: 768px) {
    .campanha-banner {
        background-color: transparent;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
        /* Reserva o espaco da metade do campo que avanca para fora da arte */
        padding-bottom: 2.25rem;
    }

    .campanha-banner-arte {
        border-radius: var(--bs-border-radius-xl);
        box-shadow: var(--bs-box-shadow-sm);
    }

    .campanha-banner-busca {
        position: absolute;
        left: 0;
        right: 0;
        /* Alinha a base do campo com a borda inferior da arte... */
        bottom: 2.25rem;
        /* ...e desce metade da propria altura, deixando-o meio dentro, meio fora */
        transform: translateY(50%);
        padding: 0 0.75rem;
        /* O container ocupa a largura toda; sem isto ele roubaria o clique do
           link do banner nas laterais vazias da busca. */
        pointer-events: none;
    }

        .campanha-banner-busca form {
            pointer-events: auto;
        }
}

/* ===================================================================
   DROPDOWN QUE ABRE NO HOVER  (opt-in pela classe .dropdown-hover)
   So no desktop COM MOUSE de verdade: em toque nao existe hover, e um
   menu que abre "sozinho" no primeiro toque engole o toque seguinte.
   O clique continua funcionando normalmente - o Bootstrap segue no
   comando, isto aqui e so uma camada visual por cima.
   Nao usar em menu de conta/acoes destrutivas: abrir sem intencao um
   menu que tem "Sair" e pedir clique errado.
   =================================================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
    .dropdown-hover:hover > .dropdown-menu {
        display: block;
        /* Sem o Popper (que so roda no clique) o menu nao recebe top/left:
           o [data-bs-popper] do Bootstrap so aparece quando o JS abre. */
        top: 100%;
        left: 0;
    }

    /* Ponte invisivel sobre o vao do mt-2: sem ela o caminho diagonal do
       mouse ate o primeiro item sai do elemento e o menu pisca/fecha.
       A altura casa EXATAMENTE com o mt-2 (0.5rem) dos dois temas: se passar
       disso, a ponte cobre a barriga do proprio link e engole o clique nele. */
    .dropdown-hover > .dropdown-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -0.5rem;
        height: 0.5rem;
    }
}

/* Ajuste dos indicadores do carrossel */
.carousel-indicators [data-bs-target] {
    background-color: var(--cor-primaria) !important;
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.carousel-indicators .active {
    opacity: 1;
}

.carousel-inner {
    padding-bottom: 20px;
}

/* Formata��o de Conte�do HTML do Banco (Quem Somos, FAQ) */
.conteudo-dinamico {
    font-family: 'Open Sans', sans-serif;
    color: var(--cor-texto);
    line-height: 1.8;
    font-size: 1rem;
    white-space: pre-line;
}

    .conteudo-dinamico h1, .conteudo-dinamico h2, .conteudo-dinamico h3 {
        font-family: 'Montserrat', sans-serif;
        color: var(--cor-primaria);
        font-weight: 700;
        margin-top: 2rem;
    }

    .conteudo-dinamico ul {
        padding-left: 1.5rem;
    }

    .conteudo-dinamico a {
        color: var(--cor-primaria);
        text-decoration: underline;
        font-weight: 600;
    }

    .conteudo-dinamico *:not(br) {
        white-space: normal;
    }

/* Ajuste local para o Accordion ficar na cor da marca em INSTITUCIONAL */
.accordion-button:not(.collapsed) {
    background-color: var(--cor-primaria-soft);
    color: var(--on-primaria-soft);
    box-shadow: none; /* Remove a borda azul padr�o */
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,0.1);
}

/* ==========================================================================
   9. HEADER E LOGO DIN�MICA
   ========================================================================== */
.img-logo-topo {
    max-height: 85px; /* Altura generosa para Desktop (pode aumentar se quiser) */
    width: auto;
    max-width: 280px; /* Limite de largura para logos muito compridas */
    object-fit: contain;
    transition: var(--transicao-padrao);
}

/* Reduz a logo automaticamente em celulares e tablets */
@media (max-width: 992px) {
    .img-logo-topo {
        max-height: 55px;
        max-width: 200px;
    }
}

/* ==========================================================================
   10. MICRO-ANIMA��ES E GATILHOS PSICOL�GICOS
   ========================================================================== */

/* Anima��o suave de entrada dos produtos (Efeito Cascata/Dopamina) */
.fade-in-up {
    animation: fadeInUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sombra aprimorada para a barra de pesquisa flutuante */
.shadow-flutuante {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15) !important;
}

/* Intera��o com o input de pesquisa */
.search-wrapper:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--cor-primaria-soft);
}

/* ==========================================================================
   11. MENU DROPDOWN ANIMADO E PREMIUM
   ========================================================================== */

/* Anima��o suave para o Dropdown abrir deslizando */
.navbar-dinamico .dropdown-menu {
    animation: slideDropdown 0.3s ease-out forwards;
    transform-origin: top center;
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

/* Dropdowns (busca, menus) acompanham a superf�cie do tema em vez do branco fixo do Bootstrap */
.dropdown-menu {
    background-color: var(--superficie);
}

@keyframes slideDropdown {
    0% {
        opacity: 0;
        transform: scaleY(0.9) translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
}

/* Estilo individual de cada item do menu Dropdown */
.navbar-dinamico .dropdown-item {
    transition: all 0.2s ease;
    border-radius: 8px; /* Arredonda a sele��o interna */
    font-size: 0.95rem;
    color: var(--cor-texto);
    margin-bottom: 2px;
}

    /* Fundo super suave e �cone pula pra direita */
    .navbar-dinamico .dropdown-item:hover {
        background-color: var(--cor-primaria-soft);
        color: var(--on-primaria-soft);
        transform: translateX(5px); /* D� um passinho pro lado indicando interatividade */
    }

        /* O �cone dentro do link acompanha a cor no hover */
        .navbar-dinamico .dropdown-item:hover i {
            color: var(--cor-primaria) !important;
        }

/* Efeito 'Hover-Scale' Global para bot�es (voc� usou nas views, aqui est� o motor dele) */
.hover-scale {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;
}

    .hover-scale:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
    }

/* ==========================================================================
   12. LINKS DE A��O (TEXT LINKS)
   ========================================================================== */

/* Efeito cl�ssico de "Ver Mais" (Arrow Slide) usado em grandes e-commerces */
.link-campanha {
    transition: color 0.3s ease;
}

    .link-campanha i {
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .link-campanha:hover {
        color: var(--cor-primaria-dark) !important;
        text-decoration: underline !important;
        text-underline-offset: 4px; /* Afasta a linha do texto para ficar mais leg�vel */
    }

        /* A setinha pula para a direita quando o mouse passa por cima do texto */
        .link-campanha:hover i {
            transform: translateX(6px);
        }
/* ==========================================================================
   BOT�ES DO BANNER PRINCIPAL (Premium & Responsivo)
   ========================================================================== */
.nav-banner-btn {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Usa a cor do topo como fundo e a cor do menu como �cone para harmonia total */
    background-color: var(--cor-topo);
    color: var(--cor-menu);
    border: 1px solid rgba(0,0,0,0.05); /* Borda microsc�pica para separar de fundos da mesma cor */
    transition: var(--transicao-padrao);
}

    /* Quando passa o mouse, inverte as cores ou usa a prim�ria para dar destaque */
    .nav-banner-btn:hover {
        background-color: var(--cor-primaria);
        color: var(--cor-texto-primaria) !important;
    }

/* RESPONSIVIDADE MOBILE: Encolhe o bot�o em telas pequenas para n�o roubar espa�o do banner */
@media (max-width: 768px) {
    .nav-banner-btn {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   BANNER RESPONSIVO (Ajuste de Altura e Textos)
   ========================================================================== */
.img-banner-adaptativo {
    width: 100%;
    height: auto; /* A M�GICA: O banner dita a pr�pria altura, acabando com as faixas brancas */
    max-height: 700px; /* Trava de seguran�a para n�o explodir em monitores gigantes */
    object-fit: cover; /* Se bater na trava de 700px, ele corta o excesso suavemente */
    background-color: var(--cor-topo);
}

@media (max-width: 768px) {
    /* 1. Ajuste da Imagem: Altura menor e preenchimento total */
    .img-banner-adaptativo {
        height: auto !important; /* Deixa o celular calcular a altura exata baseada na largura */
        height: 250px;
        object-fit: cover !important; /* Faz a imagem preencher o espa�o, sumindo com o branco */
    }

    /* 2. Degrad� e Textos: O degrad� no mobile deve vir de BAIXO PARA CIMA (0deg) para leitura perfeita */
    .carousel-caption {
        background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%) !important;
        padding: 1.2rem !important;
    }

        /* 3. Escala Perfeita das Fontes para n�o quebrar a tela */
        .carousel-caption .display-5 {
            font-size: 1.3rem !important; /* T�tulo leg�vel mas compacto */
            margin-bottom: 0.3rem !important;
            line-height: 1.2;
        }

        .carousel-caption .lead {
            font-size: 0.85rem !important; /* Subt�tulo menor */
            margin-bottom: 0.5rem !important;
        }

        .carousel-caption .btn {
            padding: 0.3rem 1.2rem !important;
            font-size: 0.85rem !important;
        }
}

/* ==========================================================================
   BOT�O VOLTAR AO TOPO
   ========================================================================== */
.btn-voltar-topo {
    position: fixed;
    bottom: 100px; /* Fica estrategicamente acima do WhatsApp (que est� em 30px) */
    right: 35px;
    background-color: var(--cor-primaria-dark); /* Usa a cor escura do menu para n�o brigar com o verde do zap */
    color: var(--cor-texto-primaria);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: var(--sombra-suave);
    border: none;
    cursor: pointer;
}

    .btn-voltar-topo.show {
        opacity: 0.8;
        visibility: visible;
        transform: translateY(0);
    }

    .btn-voltar-topo:hover {
        opacity: 1;
        background-color: var(--cor-primaria);
        color: var(--cor-texto-primaria);
        transform: translateY(-3px);
    }