@font-face {
    font-family: 'Museo Sans Rounded 300';
    src: url('/assets/fonts/fonte-site-20260729232102-1f23496015.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Museo Sans Rounded 500';
    src: url('/assets/fonts/fonte-site-20260729232048-e5fe1d6168.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Museo Sans Rounded 700';
    src: url('/assets/fonts/fonte-site-20260729232038-1544f25be6.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Museo Sans Rounded 900';
    src: url('/assets/fonts/fonte-site-20260729232024-19a931ca5f.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --roxo: #372b83;
    --dourado: #e8bb4d;
    --amarelo: #e8bb4d;
    --rosa: #c5546e;
    --gelo: #f7f6fb;
    --texto: #29253a;
    --cinza: #6f6a7d;
    --site-cor-texto-principal: #29253a;
    --site-cor-texto-secundario: #6f6a7d;
    --borda: #e5e1f1;
    --sombra: 0 14px 35px rgba(55,43,131,.13);

    --site-cor-header: #372b83;
    --site-cor-footer: #21185e;
    --site-cor-botao-primario: #e8bb4d;
    --site-cor-botao-texto: #372b83;
    --site-cor-botao-secundario: #372b83;
    --site-cor-botao-secundario-texto: #ffffff;
    --site-cor-botao-desabilitado: #e9e7ef;
    --site-cor-botao-desabilitado-texto: #8a8696;

    --site-fonte-titulos: 'Museo Sans Rounded 900', 'Arial', 'Helvetica', sans-serif;
    --site-fonte-subtitulos: 'Museo Sans Rounded 700', 'Arial', 'Helvetica', sans-serif;
    --site-fonte-textos: 'Museo Sans Rounded 500', 'Arial', 'Helvetica', sans-serif;
    --site-fonte-legendas: 'Museo Sans Rounded 300', 'Arial', 'Helvetica', sans-serif;

    --site-peso-titulos: 900;
    --site-peso-subtitulos: 700;
    --site-peso-textos: 500;
    --site-peso-legendas: 300;

    --site-radius-botoes: 999px;
    --site-radius-cards: 24px;

    --ambiente-elemento-fundo: url('/uploads/ambientes/site-publico/elemento_fundo-20260729232000-5a1f59e592.png');
    --ambiente-elemento-esquerdo: none;
    --ambiente-elemento-direito: none;
    --ambiente-elementos-opacidade: 0.18;
}

body,
input,
textarea,
select,
button {
    font-family: var(--site-fonte-textos) !important;
    font-weight: var(--site-peso-textos) !important;
}

p,
li,
a,
span,
.card-content p,
.produto-descricao,
.section-title p,
.video-box-content p,
.revendedor-conteudo p,
.historia-card p,
.contato-card p {
    font-family: var(--site-fonte-textos) !important;
    font-weight: var(--site-peso-textos) !important;
}

h1,
.hero h1,
.page-hero h1,
.cta h2 {
    font-family: var(--site-fonte-titulos) !important;
    font-weight: var(--site-peso-titulos) !important;
}

h2, h3, h4, h5, h6,
.section-title h2,
.produto-info h2,
.hero-card-inner h2,
.ranking-head h3,
.card-content h3,
.form-card-publico h2,
.revendedor-conteudo h2,
.historia-card h2,
.contato-card h2 {
    font-family: var(--site-fonte-subtitulos) !important;
    font-weight: var(--site-peso-subtitulos) !important;
}

.tag,
.card-meta,
.ranking-periodo,
.logo-area span,
.footer-bottom,
.produto-selo,
small,
.caption,
.legenda {
    font-family: var(--site-fonte-legendas) !important;
    font-weight: var(--site-peso-legendas) !important;
}

.btn-site,
.btn-primary,
.btn-secondary,
.nav-destaque,
.site-nav,
.hero-list span,
.campo-publico label,
.btn-form-publico,
.whatsapp-float {
    font-family: var(--site-fonte-textos) !important;
}

.site-header {
    background: var(--site-cor-header);
}

.site-footer {
    background: var(--site-cor-footer);
}

.btn-site,
.nav-destaque,
.whatsapp-float {
    border-radius: var(--site-radius-botoes);
}

/*
 * Ações clicáveis devem comunicar visualmente que são botões.
 * O navegador não aplica cursor de mão automaticamente em elementos <button>,
 * por isso o comportamento é padronizado aqui para os três ambientes.
 */
.btn-site:not([disabled]):not(.is-disabled),
a.btn-site:not(.is-disabled),
button.btn-site:not([disabled]),
input.btn-site:not([disabled]),
.nav-destaque:not(.is-disabled),
.whatsapp-float {
    cursor: pointer !important;
}

.btn-primary,
.nav-destaque {
    background: var(--site-cor-botao-primario);
    color: var(--site-cor-botao-texto) !important;
    border-color: var(--site-cor-botao-primario);
}

.btn-secondary {
    background: var(--site-cor-botao-secundario);
    color: var(--site-cor-botao-secundario-texto) !important;
    border-color: var(--site-cor-botao-secundario);
}

.btn-primary:hover,
.btn-secondary:hover,
.nav-destaque:hover {
    filter: brightness(.96);
}

.btn-site[disabled],
.btn-site.is-disabled,
.btn-primary[disabled],
.btn-secondary[disabled] {
    cursor: not-allowed !important;
    opacity: 1 !important;
    background: var(--site-cor-botao-desabilitado) !important;
    color: var(--site-cor-botao-desabilitado-texto) !important;
    border-color: var(--site-cor-botao-desabilitado) !important;
    box-shadow: none !important;
    filter: none !important;
}

.collection-card,
.dica-card,
.rank-card,
.video-box,
.ranking-box,
.historia-card,
.contato-card,
.dica-artigo,
.produto-info,
.produto-imagem-principal,
.produto-dado-card,
.produto-palavras,
.form-card-publico,
.revendedor-conteudo {
    border-radius: var(--site-radius-cards);
}



body > .ambiente-decoracoes {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/*
 * Mantém a decoração atrás do conteúdo sem transformar elementos flutuantes
 * em elementos normais do fluxo. A regra anterior atingia o botão WhatsApp,
 * anulava seu position: fixed e criava uma faixa vazia após o rodapé.
 */
body > *:not(.ambiente-decoracoes):not(.whatsapp-float):not(script):not(style) {
    position: relative;
    z-index: 1;
}

.whatsapp-float {
    position: fixed !important;
    right: 18px !important;
    bottom: 18px !important;
    z-index: 30 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: calc(100vw - 36px);
    margin: 0 !important;
}

.ambiente-elemento {
    position: absolute;
    display: block;
    pointer-events: none;
    opacity: var(--ambiente-elementos-opacidade);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ambiente-elemento-fundo {
    inset: 0;
    background-image: var(--ambiente-elemento-fundo);
    background-repeat: repeat;
    background-position: top left;
    background-size: auto;
    opacity: var(--ambiente-elementos-opacidade);
}

/*
 * A vitrine superior da Home possui um fundo claro próprio no CSS legado.
 * Esse fundo escondia a textura global. Criamos uma camada exclusiva dentro
 * da seção, acima do fundo claro e abaixo do banner, avisos e horário.
 */
body.ambiente-site-publico .home-vitrine-section {
    position: relative !important;
    isolation: isolate !important;
}

body.ambiente-site-publico .home-vitrine-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--ambiente-elemento-fundo);
    background-repeat: repeat;
    background-position: top left;
    background-size: auto;
    opacity: var(--ambiente-elementos-opacidade);
}

body.ambiente-site-publico .home-vitrine-section > * {
    position: relative;
    z-index: 1;
}

.ambiente-elemento-esquerdo {
    top: 88px;
    left: -34px;
    width: clamp(150px, 18vw, 300px);
    aspect-ratio: 1;
    background-image: var(--ambiente-elemento-esquerdo);
}

.ambiente-elemento-direito {
    top: 110px;
    right: -38px;
    width: clamp(150px, 18vw, 300px);
    aspect-ratio: 1;
    background-image: var(--ambiente-elemento-direito);
}

@media (max-width: 760px) {
    .ambiente-elemento-esquerdo,
    .ambiente-elemento-direito {
        width: 150px;
        opacity: calc(var(--ambiente-elementos-opacidade) * .72);
    }
}


