/* =========================================================================
   Design system — carregado DEPOIS do style.css, sobrescreve o tema antigo.
   O sistema tem inline-style em muitos pontos (heranca do codigo
   descompilado), por isso alguns blocos precisam de !important. Onde nao
   precisa, nao usei.
   Nenhuma classe ou id foi renomeado: o JavaScript depende deles.
   ========================================================================= */

:root {
    /* superficie */
    --ds-bg:           #0A0A0B;
    --ds-bg-soft:      #101012;
    --ds-surface:      #131316;
    --ds-surface-2:    #1A1A1F;
    --ds-surface-3:    #222228;

    /* traco */
    --ds-border:       rgba(255, 255, 255, .07);
    --ds-border-2:     rgba(255, 255, 255, .12);

    /* texto */
    --ds-text:         #FAFAFA;
    --ds-text-2:       #A5A5AE;
    --ds-text-3:       #71717A;

    /* acento: dourado — premio, e combina com a marca */
    --ds-accent:       #C8A24C;
    --ds-accent-2:     #E3C27E;
    --ds-accent-soft:  rgba(200, 162, 76, .12);
    --ds-accent-ink:   #0A0A0B;

    --ds-success:      #34D399;
    --ds-danger:       #F87171;

    /* forma */
    --ds-r-sm:  8px;
    --ds-r:     12px;
    --ds-r-lg:  16px;
    --ds-r-xl:  22px;

    /* profundidade — sombra suave em camadas, sem "caixa flutuante" */
    --ds-sh-1: 0 1px 2px rgba(0,0,0,.4);
    --ds-sh-2: 0 4px 16px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
    --ds-sh-3: 0 12px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);

    --ds-t: 160ms cubic-bezier(.2, .6, .3, 1);
}

/* ------------------------------------------------------------------ base */

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--ds-bg) !important;
    color: var(--ds-text) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ds-accent); color: var(--ds-accent-ink); }

h1, h2, h3, h4, h5, h6 {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ds-text);
    font-weight: 650;
    letter-spacing: -0.021em;
    line-height: 1.2;
}

a { color: var(--ds-text); text-decoration: none; transition: color var(--ds-t); }
a:hover { color: var(--ds-accent-2); }

/* barra de rolagem discreta */
* { scrollbar-width: thin; scrollbar-color: var(--ds-surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--ds-surface-3);
    border-radius: 99px;
    border: 3px solid var(--ds-bg);
}
*::-webkit-scrollbar-thumb:hover { background: #34343d; }

/* foco visivel — acessibilidade */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
    border-radius: var(--ds-r-sm);
}

/* --------------------------------------------------------------- tipos */

.font-lgg  { font-size: 1.35rem !important; font-weight: 650; letter-spacing: -0.02em; }
.font-mdd  { font-size: 1.05rem !important; font-weight: 600; letter-spacing: -0.015em; }
.font-xs   { font-size: .875rem !important; }
.font-xss  { font-size: .8125rem !important; }
.font-xsss { font-size: .75rem  !important; }

.font-weight-500 { font-weight: 520 !important; }
.font-weight-600 { font-weight: 620 !important; }

.text-muted, .text-secondary { color: var(--ds-text-2) !important; }

/* ------------------------------------------------------------- cabecalho */

.app-header,
.header-app-header {
    background: rgba(10, 10, 11, .72) !important;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--ds-border) !important;
    box-shadow: none !important;
}

.header-app-header-container {
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 20px;
}

.app-brand img,
.header-app-brand img { max-height: 40px; width: auto; }

/* a "barra preta" decorativa do tema antigo so criava ruido */
.black-bar { display: none !important; }

/* ---------------------------------------------------------------- layout */

.app-main {
    /* Coluna unica. O sistema e desenhado mobile-first: cada pagina e uma
       pilha vertical. Sem esta restricao o heroi ficava com 640px e a grade
       de quantidade com 926px, desalinhados na mesma tela. */
    max-width: 680px;
    margin-inline: auto;
    padding: 26px 18px 64px;
}

.app-title h1,
.app-title > h1 {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 680;
    letter-spacing: -0.028em;
    margin-bottom: 4px;
}

.app-title-desc { color: var(--ds-text-2); font-size: .9375rem; }

/* ----------------------------------------------------------------- cards */

.app-card,
.card {
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-r-lg) !important;
    box-shadow: var(--ds-sh-1) !important;
    transition: border-color var(--ds-t), transform var(--ds-t), box-shadow var(--ds-t);
}

.card-body { padding: 20px; }

.box-shadow-08 { box-shadow: var(--ds-sh-2) !important; }

/* ------------------------------------------------- card de rifa (SorteioTpl) */

[class*="SorteioTpl_sorteioTpl"] {
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-r-lg) !important;
    overflow: hidden;
    box-shadow: var(--ds-sh-1);
    transition: transform var(--ds-t), border-color var(--ds-t), box-shadow var(--ds-t);
}

@media (hover: hover) {
    [class*="SorteioTpl_sorteioTpl"]:hover {
        transform: translateY(-3px);
        border-color: var(--ds-border-2) !important;
        box-shadow: var(--ds-sh-3);
    }
}

[class*="SorteioTpl_imagemContainer"] {
    position: relative;
    background: var(--ds-surface-2);
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

/* O style.css antigo traz ".SorteioTpl_sorteioTpl__X .SorteioTpl_imagem__Y"
   com object-fit: fill — especificidade (0,2,0), que ganhava do seletor de
   atributo simples abaixo. Resultado: na pagina da campanha a foto era
   ESTICADA ate preencher um container 1.43:1, deformando qualquer imagem que
   o lojista subisse. O primeiro seletor iguala a especificidade. */
[class*="SorteioTpl_sorteioTpl"] [class*="SorteioTpl_imagem"],
[class*="SorteioTpl_imagem"] {
    width: 100%; height: 100%;
    object-fit: cover !important;
    display: block;
    transition: transform 400ms cubic-bezier(.2,.6,.3,1);
}

@media (hover: hover) {
    [class*="SorteioTpl_sorteioTpl"]:hover [class*="SorteioTpl_imagem"] { transform: scale(1.04); }
}

/* o titulo ficava sobre a imagem e brigava com ela; agora tem area propria */
[class*="SorteioTpl_info"] {
    position: static !important;
    background: none !important;
    padding: 16px 18px 18px !important;
}

[class*="SorteioTpl_title"] {
    font-size: 1.0625rem !important;
    font-weight: 640;
    letter-spacing: -0.02em;
    color: var(--ds-text) !important;
    margin: 0 0 4px !important;
    text-shadow: none !important;
}

[class*="SorteioTpl_descricao"] {
    color: var(--ds-text-2) !important;
    font-size: .8125rem !important;
    margin: 0 !important;
    text-shadow: none !important;
}

/* selo "Adquira já" */
.blink, .fuse {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-accent-2) !important;
    border: 1px solid rgba(200,162,76,.25);
    border-radius: 99px !important;
    padding: 4px 11px !important;
    font-size: .6875rem !important;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    animation: none !important;
    backdrop-filter: blur(8px);
}

/* --------------------------------------------------- seletor de quantidade */

.item {
    background: var(--ds-surface-2) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-r) !important;
    padding: 16px 12px !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--ds-t);
    position: relative;
}

@media (hover: hover) {
    .item:hover {
        border-color: rgba(200,162,76,.45) !important;
        background: var(--ds-surface-3) !important;
        transform: translateY(-2px);
    }
}

.item:active { transform: translateY(0); }

.item-content-plus,
.item h4, .item h3 {
    color: var(--ds-text) !important;
    font-size: 1.375rem !important;
    font-weight: 680 !important;
    letter-spacing: -0.03em;
    margin: 0 !important;
    font-variant-numeric: tabular-nums;
}

.item-content-txt {
    color: var(--ds-text-3) !important;
    font-size: .6875rem !important;
    font-weight: 560;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* o "mais popular" era um verde chapado; agora usa o acento da marca */
.item.popular,
.item[class*="popular"],
.item.bg-success,
.item.active {
    background: linear-gradient(160deg, rgba(200,162,76,.16), rgba(200,162,76,.06)) !important;
    border-color: var(--ds-accent) !important;
}

.item.popular .item-content-plus,
.item.active  .item-content-plus { color: var(--ds-accent-2) !important; }

/* ---------------------------------------------------------------- botoes */

.btn {
    border-radius: var(--ds-r-sm) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 11px 18px;
    border: 1px solid transparent;
    transition: all var(--ds-t);
    box-shadow: none !important;
}

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

.btn-primary,
.btn-success {
    background: var(--ds-accent) !important;
    border-color: var(--ds-accent) !important;
    color: var(--ds-accent-ink) !important;
}

.btn-primary:hover,
.btn-success:hover {
    background: var(--ds-accent-2) !important;
    border-color: var(--ds-accent-2) !important;
    color: var(--ds-accent-ink) !important;
}

.btn-secondary,
.btn-dark {
    background: var(--ds-surface-2) !important;
    border-color: var(--ds-border-2) !important;
    color: var(--ds-text) !important;
}

.btn-secondary:hover,
.btn-dark:hover { background: var(--ds-surface-3) !important; }

.btn-outline-light {
    background: transparent !important;
    border-color: var(--ds-border-2) !important;
    color: var(--ds-text) !important;
}
.btn-outline-light:hover { background: var(--ds-surface-2) !important; }

.btn-danger { background: var(--ds-danger) !important; border-color: var(--ds-danger) !important; color: #1A0A0A !important; }

.btn-wide { width: 100%; padding-block: 13px; }

/* CTA principal de compra */
.btn-comprar,
#btn-comprar,
button[form="form-comprar"] {
    background: var(--ds-accent) !important;
    color: var(--ds-accent-ink) !important;
    border: none !important;
    border-radius: var(--ds-r) !important;
    font-weight: 660 !important;
    box-shadow: 0 6px 20px rgba(200,162,76,.22) !important;
}

.btn-comprar:hover,
#btn-comprar:hover { background: var(--ds-accent-2) !important; }

/* o icone do CTA vinha com fundo branco fixo no HTML */
.btn span[style*="background-color: white"],
.btn span[style*="background-color:white"] {
    background: rgba(10,10,11,.16) !important;
    border-radius: var(--ds-r-sm) !important;
}
.btn span[style*="background-color: white"] i,
.btn span[style*="background-color:white"] i { color: var(--ds-accent-ink) !important; }

/* --------------------------------------------------------------- formularios */

.form-control,
.form-select,
input[type="text"], input[type="tel"], input[type="email"],
input[type="password"], input[type="number"], textarea, select {
    background: var(--ds-surface-2) !important;
    border: 1px solid var(--ds-border-2) !important;
    border-radius: var(--ds-r-sm) !important;
    color: var(--ds-text) !important;
    padding: 11px 14px !important;
    font-size: .9375rem !important;
    transition: border-color var(--ds-t), box-shadow var(--ds-t);
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 0 0 3px var(--ds-accent-soft) !important;
    background: var(--ds-surface-2) !important;
    color: var(--ds-text) !important;
}

.form-control::placeholder, input::placeholder, textarea::placeholder {
    color: var(--ds-text-3) !important;
}

/* Em .form-floating quem ocupa o lugar do placeholder e o proprio <label>, e
   por isso o Bootstrap deixa o placeholder transparente. A regra acima, por
   usar !important, o tornava visivel de novo: no modal de login "Telefone" e
   "(00) 0000-0000" apareciam sobrepostos na mesma linha. */
.form-floating > .form-control::placeholder,
.form-floating > .form-select::placeholder {
    color: transparent !important;
}

.form-label, label {
    color: var(--ds-text-2);
    font-size: .8125rem;
    font-weight: 550;
    margin-bottom: 6px;
}

/* campo de quantidade da compra */
input#qtd, input[name="qtd"], .qtd-input {
    text-align: center;
    font-size: 1.125rem !important;
    font-weight: 640 !important;
    font-variant-numeric: tabular-nums;
    background: var(--ds-surface-2) !important;
    color: var(--ds-text) !important;
}

/* ---------------------------------------------------------------- modais */

.modal-content {
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-border-2) !important;
    border-radius: var(--ds-r-lg) !important;
    box-shadow: var(--ds-sh-3) !important;
    color: var(--ds-text) !important;
}

.modal-header, .modal-footer { border-color: var(--ds-border) !important; padding: 18px 20px; }
.modal-body { padding: 20px; }
.modal-title { font-weight: 640; letter-spacing: -0.02em; }
.modal-backdrop.show { opacity: .72; backdrop-filter: blur(3px); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); opacity: .55; }
.btn-close:hover { opacity: 1; }

/* ------------------------------------------------------------- acordeao (FAQ) */

.accordion-item {
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-r) !important;
    margin-bottom: 10px;
    overflow: hidden;
}

.accordion-button {
    background: transparent !important;
    color: var(--ds-text) !important;
    font-weight: 560;
    font-size: .9375rem;
    padding: 15px 18px;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) { color: var(--ds-accent-2) !important; background: var(--ds-accent-soft) !important; }
.accordion-button::after { filter: invert(1) grayscale(1) brightness(1.4); opacity: .5; }
.accordion-body { color: var(--ds-text-2); font-size: .875rem; padding: 4px 18px 18px; }

/* --------------------------------------------------------------- progresso */

.progress {
    background: var(--ds-surface-3) !important;
    border-radius: 99px !important;
    height: 8px !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2)) !important;
    border-radius: 99px;
}

/* ------------------------------------------------------------------ tabelas */

.table { color: var(--ds-text) !important; border-color: var(--ds-border) !important; }
.table > :not(caption) > * > * {
    background: transparent !important;
    border-bottom-color: var(--ds-border) !important;
    padding: 12px 14px;
    color: var(--ds-text) !important;
}
.table thead th {
    color: var(--ds-text-3) !important;
    font-size: .6875rem;
    font-weight: 620;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ badges */

.badge {
    border-radius: 99px !important;
    font-weight: 600;
    font-size: .6875rem;
    letter-spacing: .03em;
    padding: 5px 10px;
}
.badge.bg-success { background: rgba(52,211,153,.14) !important; color: var(--ds-success) !important; }
.badge.bg-danger  { background: rgba(248,113,113,.14) !important; color: var(--ds-danger)  !important; }
.badge.bg-warning { background: var(--ds-accent-soft) !important; color: var(--ds-accent-2) !important; }

/* --------------------------------------------------------- botoes flutuantes */

.suporte {
    border-radius: 99px !important;
    backdrop-filter: blur(12px);
    border: 1px solid var(--ds-border-2) !important;
    background: rgba(26,26,31,.82) !important;
    color: var(--ds-text) !important;
    font-size: .8125rem !important;
    font-weight: 560;
    padding: 9px 15px !important;
    box-shadow: var(--ds-sh-2) !important;
    transition: all var(--ds-t);
}

.suporte:hover {
    background: var(--ds-surface-3) !important;
    border-color: var(--ds-accent) !important;
    color: var(--ds-accent-2) !important;
}

/* ------------------------------------------------------------------ rodape */

.rodape {
    background: var(--ds-bg-soft) !important;
    border-top: 1px solid var(--ds-border);
    padding: 40px 20px 32px !important;
    margin-top: 56px;
    color: var(--ds-text-3);
}

.rodape a { color: var(--ds-text-2); }
.rodape a:hover { color: var(--ds-accent-2); }

.social { display: flex; gap: 14px; justify-content: center; }

.social a,
.whatsapp1, .instagram1, .twitter1, .youtube1 {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border);
    color: var(--ds-text-2) !important;
    transition: all var(--ds-t);
}

.social a:hover,
.whatsapp1:hover, .instagram1:hover, .twitter1:hover, .youtube1:hover {
    background: var(--ds-surface-3);
    border-color: var(--ds-accent);
    color: var(--ds-accent-2) !important;
    transform: translateY(-2px);
}

/* --------------------------------------------------------------- menu lateral */

.app-header-mobile {
    background: var(--ds-surface) !important;
    border-right: 1px solid var(--ds-border);
}

.app-header-mobile a { color: var(--ds-text-2); padding: 11px 0; }
.app-header-mobile a:hover { color: var(--ds-accent-2); }
.app-header-mobile .icone { color: var(--ds-text-3); }

.menu-mobile--button {
    background: transparent !important;
    border: 1px solid var(--ds-border-2) !important;
    border-radius: var(--ds-r-sm) !important;
    color: var(--ds-text) !important;
}

/* ------------------------------------------------------------------- toques */

.icone, .spacing-icon { color: inherit; opacity: .85; }

hr { border-color: var(--ds-border) !important; opacity: 1; }

.alert {
    border-radius: var(--ds-r) !important;
    border: 1px solid var(--ds-border-2) !important;
    background: var(--ds-surface-2) !important;
    color: var(--ds-text) !important;
    font-size: .875rem;
}
.alert-danger  { border-color: rgba(248,113,113,.3) !important; background: rgba(248,113,113,.08) !important; color: var(--ds-danger) !important; }
.alert-success { border-color: rgba(52,211,153,.3)  !important; background: rgba(52,211,153,.08)  !important; color: var(--ds-success) !important; }

/* grade de numeros (rifas onde o cliente escolhe) */
.numero, .number-item, [class*="numero-item"] {
    border-radius: var(--ds-r-sm) !important;
    border: 1px solid var(--ds-border) !important;
    background: var(--ds-surface-2) !important;
    color: var(--ds-text-2) !important;
    font-variant-numeric: tabular-nums;
    font-size: .8125rem;
    transition: all var(--ds-t);
}
.numero:hover, .number-item:hover { border-color: var(--ds-accent) !important; color: var(--ds-accent-2) !important; }
.numero.selecionado, .numero.active, .number-item.active {
    background: var(--ds-accent) !important;
    border-color: var(--ds-accent) !important;
    color: var(--ds-accent-ink) !important;
    font-weight: 640;
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------- responsivo */

@media (max-width: 575.98px) {
    body { font-size: 14.5px; }
    .app-main { padding: 20px 16px 48px; }
    .card-body, .modal-body { padding: 16px; }
    .item { padding: 13px 8px !important; }
    .item-content-plus, .item h4 { font-size: 1.2rem !important; }
    .rodape { padding: 32px 16px 24px !important; margin-top: 40px; }
}

/* =========================================================================
   Ajustes feitos depois de ver o resultado no navegador
   ========================================================================= */

/* O selo usa "badge bg-success blink": .badge.bg-success (2 classes) vencia o
   .blink (1 classe) e o selo continuava verde. */
.badge.blink,
.badge.bg-success.blink,
.badge.fuse {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-accent-2) !important;
    border: 1px solid rgba(200,162,76,.28) !important;
}

/* ------------------------------------------- listagem de campanhas (horizontal) */

.campanhas-listagem [class*="SorteioTpl_sorteioTpl"] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

.campanhas-listagem [class*="SorteioTpl_imagemContainer"] {
    position: relative !important;
    flex: 0 0 148px;
    width: 148px;
    aspect-ratio: auto !important;
    min-height: 116px;
    border-radius: 0 !important;
}

.campanhas-listagem [class*="SorteioTpl_info"] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 16px 18px !important;
}

.campanhas-listagem [class*="SorteioTpl_title"] { font-size: 1rem !important; }

.campanhas-listagem .badge { align-self: flex-start; margin-top: 2px; }

@media (max-width: 575.98px) {
    .campanhas-listagem [class*="SorteioTpl_imagemContainer"] {
        flex-basis: 104px; width: 104px; min-height: 96px;
    }
    .campanhas-listagem [class*="SorteioTpl_info"] { padding: 12px 14px !important; }
    .campanhas-listagem [class*="SorteioTpl_title"] { font-size: .9375rem !important; }
}


/* ------------------------------------------------- barra de filtros das campanhas
   Markup real:
     .app-card > .app-body.d-flex.justify-content-center
        <p>Listar</p>  +  .btn-group > button > a
   O card externo virava uma segunda moldura em volta das pilulas; aqui ele fica
   transparente e so o btn-group vira a pilula. */

.app-card:has(> .app-body > .btn-group),
.app-card:has(> .app-body > .btn-group-sm) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.app-body > p.text-uppercase {
    color: var(--ds-text-3) !important;
    font-size: .6875rem !important;
    font-weight: 600;
    letter-spacing: .1em;
}

.btn-group {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: 99px;
    padding: 4px;
    gap: 2px;
    display: inline-flex;
    box-shadow: var(--ds-sh-1);
}

.btn-group > .btn {
    border-radius: 99px !important;
    padding: 7px 16px !important;
    font-size: .8125rem !important;
    font-weight: 550;
    background: transparent !important;   /* vence o inline-style do botao ativo */
    border: none !important;
    color: var(--ds-text-2) !important;
}

.btn-group > .btn a { color: inherit !important; display: block; }

.btn-group > .btn:hover { background: var(--ds-surface-2) !important; }
.btn-group > .btn:hover a { color: var(--ds-text) !important; }

/* o filtro ativo vem com background inline; por isso o seletor de atributo */
.btn-group > .btn[style*="primariaDarken"] {
    background: var(--ds-accent) !important;
}
.btn-group > .btn[style*="primariaDarken"] a { color: var(--ds-accent-ink) !important; font-weight: 620; }

/* ------------------------------------------------------- titulo das paginas */


.app-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* sem isto o titulo herdava alinhamento a direita */
    text-align: left;
    gap: 2px;
    margin-bottom: 22px;
}

.app-title h1 i { color: var(--ds-accent); font-size: .85em; margin-right: 2px; }

.app-title h1 { margin: 0 !important; }

/* o subtitulo vinha inline ao lado do h1 e ficava desalinhado */
.app-title .app-title-desc,
.app-title-desc { display: block; margin: 0; }

/* --------------------------------------------------- botoes flutuantes laterais */

/* estavam sobrepondo o cabecalho no desktop */
.suporte-fixo, .botoes-flutuantes, .fixed-buttons {
    position: fixed !important;
    right: 16px;
    bottom: 16px;
    top: auto !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1030;
}

/* ------------------------------------------------------------ marca no topo */

.app-brand img, .header-app-brand img, .navbar-brand img {
    max-height: 38px; width: auto; object-fit: contain;
}

/* ------------------------------------------------------------------- rodape */

/* o hr do rodape somava com a borda superior e virava linha dupla */
.rodape hr { display: none; }

.rodape .font-xs { color: var(--ds-text-3); font-size: .8125rem !important; }


/* a imagem padrao (no_image.jpg) tem fundo branco e destoa do card escuro */
[class*="SorteioTpl_imagem"][src*="no_image"] {
    opacity: .18;
    filter: grayscale(1) invert(1);
    object-fit: contain !important;
    padding: 18%;
    background: var(--ds-surface-2);
}


/* O font-family global do body vencia a fonte dos icones e eles viravam
   caixinha vazia. Estes seletores devolvem a fonte propria de cada familia. */
.bi, [class^="bi-"], [class*=" bi-"],
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    line-height: 1;
    display: inline-block;
    vertical-align: -.125em;
}

.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
}

/* icone dentro de titulo: alinhado e na cor de acento */
h1 .bi, h2 .bi, .app-title .bi { color: var(--ds-accent); }


/* =========================================================================
   Pagina da campanha (produto)
   Ela tem duas larguras concorrentes: o card-heroi ocupava toda a .app-main
   (886px) enquanto o restante do conteudo vive num .container-600. O
   resultado era um heroi desalinhado do resto. Aqui tudo passa a usar a
   mesma coluna.
   ========================================================================= */

:root { --ds-col: 640px; }

.container-600 { max-width: var(--ds-col) !important; }

.campanha-header,
[class*="SorteioTpl_destaque"] {
    max-width: var(--ds-col);
    margin-inline: auto !important;
}

/* o heroi estava com 553px de altura quase toda vazia */
[class*="SorteioTpl_destaque"] [class*="SorteioTpl_imagemContainer"] {
    aspect-ratio: 16 / 9;
    max-height: 380px;
}

/* bloco de titulo do heroi: o selo caia por cima do texto */
[class*="SorteioTpl_destaque"] [class*="SorteioTpl_info"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    height: auto !important;
    padding: 18px 20px 20px !important;
}

[class*="SorteioTpl_destaque"] [class*="SorteioTpl_title"] { font-size: 1.25rem !important; }

[class*="SorteioTpl_destaque"] .badge { position: static !important; order: -1; }

/* ------------------------------------------------------- botoes flutuantes */

/* herdavam .btn e ficavam dourados solidos, competindo com o CTA de compra */
[class*="sorteioShare"] {
    position: fixed;
    right: 14px;
    bottom: 14px;
    top: auto !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    z-index: 1030;
}

[class*="sorteioShare"] a,
[class*="sorteioShare"] .btn {
    background: rgba(26,26,31,.9) !important;
    backdrop-filter: blur(12px);
    border: 1px solid var(--ds-border-2) !important;
    color: var(--ds-text-2) !important;
    border-radius: 99px !important;
    padding: 9px 15px !important;
    font-size: .8125rem !important;
    font-weight: 550 !important;
    box-shadow: var(--ds-sh-2) !important;
}

[class*="sorteioShare"] a:hover,
[class*="sorteioShare"] .btn:hover {
    border-color: var(--ds-accent) !important;
    color: var(--ds-accent-2) !important;
    background: var(--ds-surface-3) !important;
}

/* ------------------------------------------------- faixa de preco / campanha */

.container-600 .app-card { margin-bottom: 12px; }

/* "Campanha [data] por apenas [preco]" */
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark {
    background: var(--ds-surface-2) !important;
    color: var(--ds-text) !important;
    border: 1px solid var(--ds-border);
    font-weight: 560;
    font-size: .8125rem !important;
    padding: 7px 12px;
}

/* CTA "Ver meus numeros" nao pode ter o mesmo peso do botao de compra */
a[href*="meus-numeros"].btn,
.btn.btn-ver-numeros {
    background: var(--ds-surface-2) !important;
    color: var(--ds-text) !important;
    border: 1px solid var(--ds-border-2) !important;
    box-shadow: none !important;
}
a[href*="meus-numeros"].btn:hover { background: var(--ds-surface-3) !important; border-color: var(--ds-accent) !important; }

@media (max-width: 575.98px) {
    [class*="SorteioTpl_destaque"] [class*="SorteioTpl_imagemContainer"] { max-height: 240px; }
    [class*="sorteioShare"] { right: 10px; bottom: 10px; }
    [class*="sorteioShare"] a, [class*="sorteioShare"] .btn { padding: 8px 13px !important; font-size: .75rem !important; }
}


/* ------------------------------------------------- coluna unica em toda pagina */

/* o container interno da pagina de campanha nao precisa mais restringir:
   quem manda na largura agora e o .app-main */
.container-600 { max-width: 100% !important; padding-inline: 0 !important; }

.campanha-header,
[class*="SorteioTpl_destaque"] { max-width: 100%; }

/* O verde do "Mais popular" vem em inline-style no .item-content, entao
   precisa de seletor de atributo para ser sobrescrito. */
.item-content[style*="background"],
.item-content[style*="34a772"],
.item-content[style*="rgb(52"] {
    background: linear-gradient(160deg, rgba(200,162,76,.18), rgba(200,162,76,.07)) !important;
    border: 1px solid var(--ds-accent) !important;
    border-radius: var(--ds-r) !important;
}

.item-content[style*="background"] h4,
.item-content[style*="background"] .item-content-plus { color: var(--ds-accent-2) !important; }

/* selo "Mais popular" acima do card */
.item .badge, .item-content .badge {
    background: var(--ds-accent) !important;
    color: var(--ds-accent-ink) !important;
    border: none !important;
    font-size: .625rem !important;
    letter-spacing: .06em;
}

/* "Ver meus numeros" e acao secundaria: nao pode ter o mesmo peso do CTA */
[class*="SorteioTpl_destaque"] .btn-success,
.campanha-header .btn-success {
    background: var(--ds-surface-2) !important;
    color: var(--ds-text) !important;
    border: 1px solid var(--ds-border-2) !important;
    box-shadow: none !important;
    font-weight: 560 !important;
}

[class*="SorteioTpl_destaque"] .btn-success:hover,
.campanha-header .btn-success:hover {
    background: var(--ds-surface-3) !important;
    border-color: var(--ds-accent) !important;
    color: var(--ds-accent-2) !important;
}

/* selo do heroi encostava no subtitulo */
[class*="SorteioTpl_destaque"] [class*="SorteioTpl_descricao"] { margin: 0 !important; }
[class*="SorteioTpl_destaque"] .badge { margin: 0 !important; }

/* grade do seletor de quantidade: respiro consistente */
.item-content { border-radius: var(--ds-r) !important; }


/* =========================================================================
   Seletor de quantidade — seletores casados com os do style.css original
   (.vendasExpressNumsSelect.v2 ...), senao o verde de la vencia.
   ========================================================================= */

.vendasExpressNumsSelect.v2 .item .item-content {
    background: var(--ds-surface-2) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-r) !important;
    transition: all var(--ds-t);
}

@media (hover: hover) {
    .vendasExpressNumsSelect.v2 .item:hover .item-content {
        border-color: rgba(200,162,76,.45) !important;
        background: var(--ds-surface-3) !important;
    }
}

.vendasExpressNumsSelect.v2 .item.mais-popular .item-content {
    background: linear-gradient(160deg, rgba(200,162,76,.20), rgba(200,162,76,.07)) !important;
    border: 1px solid var(--ds-accent) !important;
}

.vendasExpressNumsSelect.v2 .item.mais-popular .item-content-plus,
.vendasExpressNumsSelect.v2 .item.mais-popular h4 { color: var(--ds-accent-2) !important; }

.vendasExpressNumsSelect.v2 .item.mais-popular .item-content-txt { color: rgba(227,194,126,.75) !important; }

/* etiqueta "Mais popular" */
.item.mais-popular .badge,
.mais-popular > .badge,
.vendasExpressNumsSelect.v2 .item.mais-popular .badge {
    background: var(--ds-accent) !important;
    color: var(--ds-accent-ink) !important;
    border: none !important;
    font-weight: 640;
    font-size: .625rem !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px !important;
}

/* ------------------------------------------------ heroi: selo x subtitulo */

/* o <p> do subtitulo tem margin inline; o selo caia por cima dele */
[class*="SorteioTpl_destaque"] [class*="SorteioTpl_info"] > * { margin: 0 !important; }
[class*="SorteioTpl_destaque"] [class*="SorteioTpl_info"] { gap: 8px; }


/* O selo vive num wrapper .custom-badge-display posicionado de forma absoluta,
   e caia exatamente sobre o titulo. Lugar natural dele e o canto da imagem. */
/* o style.css tem ".campanha-header .custom-badge-display{top:auto!important}"
   (2 classes); por isso aqui a especificidade precisa ser igual ou maior. */
.custom-badge-display,
.campanha-header .custom-badge-display,
.custom-highlight-card .custom-badge-display,
[class*="SorteioTpl_destaque"] .custom-badge-display {
    position: absolute !important;
    top: 12px !important;
    bottom: auto !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 3;
    margin: 0 !important;
}

[class*="SorteioTpl_sorteioTpl"] { position: relative; }

/* na listagem o selo fica no fluxo, abaixo da descricao */
.campanhas-listagem .custom-badge-display {
    position: static !important;
    align-self: flex-start;
}


/* =========================================================================
   Mobile: os botoes flutuantes cobriam a grade de quantidade — justamente a
   area onde o cliente decide a compra. Viram circulos so com icone.
   ========================================================================= */

@media (max-width: 767.98px) {
    [class*="sorteioShare"] {
        right: 10px !important;
        bottom: 10px !important;
        gap: 8px;
    }

    [class*="sorteioShare"] a,
    [class*="sorteioShare"] .btn {
        width: 46px; height: 46px;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex; align-items: center; justify-content: center;
        overflow: hidden;
    }

    /* esconde o rotulo, mantem o icone e o acesso por leitor de tela */
    [class*="sorteioShare"] a > *:not(i):not(svg),
    [class*="sorteioShare"] .btn > *:not(i):not(svg) {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }

    [class*="sorteioShare"] i,
    [class*="sorteioShare"] svg { font-size: 1.15rem; margin: 0 !important; }

    /* respiro no fim da pagina para os botoes nunca taparem o ultimo bloco */
    .app-main { padding-bottom: 96px; }
}

/* o "Campanha [data] por apenas [preco]" quebrava feio em telas estreitas */
@media (max-width: 420px) {
    .badge.bg-secondary, .badge.bg-light, .badge.bg-dark {
        font-size: .75rem !important;
        padding: 6px 9px;
        white-space: normal;
        line-height: 1.3;
    }
}


/* =========================================================================
   Acao principal de formulario
   O tema marcava alguns submits como .btn-secondary (cinza). Sendo a unica
   acao da tela, ela precisa do acento — senao o usuario nao sabe onde clicar.
   ========================================================================= */

form button[type="submit"].btn-secondary.btn-wide,
form button[type="submit"].btn-secondary.btn-wide-in,
.app-form button[type="submit"].btn-secondary {
    background: var(--ds-accent) !important;
    border-color: var(--ds-accent) !important;
    color: var(--ds-accent-ink) !important;
    font-weight: 640 !important;
}

form button[type="submit"].btn-secondary.btn-wide:hover,
.app-form button[type="submit"].btn-secondary:hover {
    background: var(--ds-accent-2) !important;
    border-color: var(--ds-accent-2) !important;
}

/* botao secundario real (cancelar / voltar) continua discreto */
form .btn-secondary[data-bs-dismiss],
form a.btn-secondary { background: var(--ds-surface-2) !important; color: var(--ds-text) !important; }

/* cartao de formulario com respiro */
.app-form .card-body, .app-form .app-card { padding: 22px; }
.app-form .form-group + .form-group, .app-form label + label { margin-top: 14px; }

/* ---------------------------------------------------------------------------
   Utilitarios de cor herdados do tema claro

   Os templates marcam texto com .text-dark / .text-black do Bootstrap porque
   o layout original tinha fundo claro. Sobre as superficies escuras do
   redesign isso vira preto sobre preto: no checkout o nome do comprador, o
   numero da transacao e o telefone ficavam invisiveis (contraste ~1.05:1).
   --------------------------------------------------------------------------- */
.text-dark, .text-black {
    color: var(--ds-text) !important;
}

/* Onde o fundo e mesmo claro, o texto precisa voltar a ser escuro — senao
   troca um problema pelo outro (branco sobre branco). */
.bg-white, .bg-light {
    color: #16161A !important;
}

.bg-white.text-dark,  .bg-light.text-dark,
.bg-white .text-dark, .bg-light .text-dark,
.bg-white.text-black, .bg-light.text-black,
.bg-white .text-black, .bg-light .text-black {
    color: #16161A !important;
}

/* O tema antigo pintava o cartao de detalhes do pedido de branco solido
   (style.css: ".app-main .detalhes-compra .app-card"). Com especificidade
   (0,3,0) e !important ele passava por cima da regra geral de .app-card, e
   o bloco "Detalhes da sua compra" ficava branco no meio da pagina escura,
   com o texto claro por cima — ilegivel. Mesma especificidade aqui, e este
   arquivo carrega depois. */
.app-main .detalhes-compra .app-card {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
}

/* .bg-white combinado com .bg-opacity-* e heranca do tema claro: sobre o
   fundo escuro vira um retangulo cinza lavado — era o caso do bloco
   "Duvidas / Fale conosco" na home. Passa a ser superficie do tema, e o
   texto continua claro (a regra .bg-white acima escureceria o texto). */
.bg-white.bg-opacity-10,
.bg-white.bg-opacity-25,
.bg-white.bg-opacity-50,
.bg-white.bg-opacity-75 {
    background-color: var(--ds-surface-2) !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--ds-text) !important;
}

/* O selo "Mais popular" nao e um elemento com classe .badge: e um ::before
   do proprio .item, com verde fixo no style.css (#198754) e no style2.css.
   Por isso as regras de .badge mais acima nunca o alcancaram e ele continuava
   verde no meio da paleta dourada. */
.vendasExpressNumsSelect .item.mais-popular:before,
.most-popular::before {
    background-color: var(--ds-accent) !important;
    color: var(--ds-accent-ink) !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
}

/* O style.css antigo esconde a marca no cabecalho da pagina de campanha
   (".header-app-header.campanha > div > div > div a .header-app-brand"),
   deixando a barra com apenas o menu e o botao de suporte — parece pagina
   inacabada. E justamente a tela onde o cliente decide pagar, que e quando a
   marca mais importa. Mesma especificidade para sobrescrever. */
.header-app-header.campanha > div > div > div a .header-app-brand {
    display: block !important;
    max-height: 34px;
    width: auto;
    margin-inline: auto;
}

/* O container interno do cabecalho e "display: block" no tema antigo, entao o
   "flex-grow-1" do link da marca nao valia nada. Em tela estreita menu, marca
   e suporte empilhavam em tres linhas e a barra virava 168px de altura,
   empurrando a pagina inteira para baixo. Vale para todas as paginas, nao so
   a de campanha. */
.header-app-header .header-app-header-container > div > div {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

/* a marca no meio, menu a esquerda e acoes a direita */
.header-app-header .header-app-header-container > div > div > a.flex-grow-1 {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

/* Barra de cotas vendidas. O preenchimento (.progress-bar) estava com fundo
   transparente, entao a barra aparecia como um risco cinza vazio mesmo com
   venda registrada — o visitante nao via andamento nenhum. */
.progress {
    background: var(--ds-surface-3) !important;
    border-radius: 99px;
    overflow: hidden;
    height: 8px !important;
}

.progress .progress-bar {
    background-image: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2)) !important;
    background-color: var(--ds-accent) !important;
    border-radius: 99px;
    font-size: 0;              /* o "0.5%" nao cabe em 8px de altura */
    min-width: 3px;
    transition: width 600ms cubic-bezier(.2,.6,.3,1);
}

/* Card de campanha em tela estreita.
   O card e um flex container: em tela larga fica imagem a esquerda e texto a
   direita, e funciona. No celular a imagem passava a ocupar a largura toda e
   o bloco de texto sobrava fora da altura do card — com "overflow: hidden",
   o nome da campanha simplesmente sumia e ficava so a foto. Aqui ele empilha
   e a altura passa a acompanhar o conteudo. */
@media (max-width: 640px) {
    [class*="SorteioTpl_sorteioTpl"] {
        flex-direction: column;
        height: auto !important;
    }

    [class*="SorteioTpl_sorteioTpl"] [class*="SorteioTpl_imagemContainer"] {
        width: 100%;
        flex: 0 0 auto;
    }

    [class*="SorteioTpl_sorteioTpl"] [class*="SorteioTpl_info"] {
        width: 100%;
        flex: 1 1 auto;
    }
}

/* Suporte no cabecalho.
   O link tinha dois <div class="suporte"> empilhados — um so com o icone,
   outro com o rotulo — somando 97px de altura e esticando a barra inteira
   para 117px. Como sao blocos, ficavam um sob o outro. Em linha, o cabecalho
   cai para ~72px e o controle vira um botao unico. */
.header-app-header .suporte {
    display: inline-flex !important;
    align-items: center;
    height: auto !important;
    width: auto !important;
    opacity: 1 !important;
    line-height: 1;
    font-size: .8125rem;
}

.header-app-header .suporte + .suporte { margin-left: 6px; }

.header-app-header a:has(> .suporte) {
    display: inline-flex !important;
    align-items: center;
    padding: 8px 14px !important;
    border: 1px solid var(--ds-border-2);
    border-radius: 99px;
    background: var(--ds-surface-2);
    line-height: 1;
}

/* =========================================================================
   Menu mobile (#mobileMenu)

   Era uma lista corrida com divisorias de ponta a ponta, icone e rotulo do
   mesmo peso, e o botao de fechar colado na borda da tela. Aqui vira um menu
   com alvo de toque folgado, hierarquia clara e area de contato no rodape.
   ========================================================================= */

#mobileMenu .modal-content {
    background: var(--ds-bg) !important;
}

#mobileMenu .app-header {
    height: 64px;
    min-height: 64px;
    border-bottom: 1px solid var(--ds-border) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--ds-bg) !important;
}

#mobileMenu .app-header .container { padding-inline: 18px; }
#mobileMenu .app-brand { max-height: 30px; width: auto; }

/* o botao encostava na borda direita; agora e um alvo circular com folga */
#mobileMenu .menu-mobile--button {
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50%;
    border: 0 !important;
    color: var(--ds-text-2) !important;
    transition: background var(--ds-t), color var(--ds-t);
}

#mobileMenu .menu-mobile--button:hover,
#mobileMenu .menu-mobile--button:active {
    background: var(--ds-surface-2);
    color: var(--ds-text) !important;
}

#mobileMenu .modal-body { padding: 12px 0 28px; }
#mobileMenu .modal-body .container { padding-inline: 12px; }

#mobileMenu nav ul { list-style: none; margin: 0; padding: 0; }

#mobileMenu nav li + li { border-top: 1px solid var(--ds-border); }

#mobileMenu nav a {
    display: flex !important;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 12px;
    border-radius: var(--ds-r);
    color: var(--ds-text) !important;
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: -.01em;
    transition: background var(--ds-t), color var(--ds-t);
}

#mobileMenu nav a .icone {
    font-size: 1.125rem;
    line-height: 1;
    color: var(--ds-text-3);
    width: 22px;
    text-align: center;
    transition: color var(--ds-t);
}

#mobileMenu nav a:hover,
#mobileMenu nav a:active {
    background: var(--ds-surface-2);
    color: var(--ds-text) !important;
}

#mobileMenu nav a:hover .icone,
#mobileMenu nav a:active .icone { color: var(--ds-accent); }

/* pagina atual em destaque, para o visitante saber onde esta */
#mobileMenu nav a[aria-current="page"] {
    background: var(--ds-accent-soft);
    color: var(--ds-accent-2) !important;
}

#mobileMenu nav a[aria-current="page"] .icone { color: var(--ds-accent); }

/* acao principal (Entrar / Sair) */
#mobileMenu .btn-primary,
#mobileMenu .btn-secondary {
    min-height: 50px;
    border-radius: var(--ds-r) !important;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-top: 14px;
}

/* rodape de contato: ocupa o vazio do fim do menu com algo util */
#mobileMenu .menu-rodape {
    margin-top: 26px;
    padding: 16px 12px 0;
    border-top: 1px solid var(--ds-border);
    color: var(--ds-text-3);
    font-size: .8125rem;
}

#mobileMenu .menu-rodape a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ds-text-2) !important;
    min-height: 44px;
}

#mobileMenu .menu-rodape a:hover { color: var(--ds-accent-2) !important; }

/* A logo nunca pode passar da largura do proprio link — sem isto ela
   transbordava e ficava por baixo do botao de suporte. */
.header-app-header .header-app-header-container img.app-brand,
.header-app-header .header-app-header-container img.header-app-brand {
    max-width: 100%;
    height: auto;
}

@media (max-width: 480px) {
    /* Numa barra de 375px o rotulo "Suporte" ocupava 162px e sobrava so 80px
       para a marca. No celular fica o icone, que ja e entendido e libera o
       espaco central. */
    .header-app-header .suporte.text-yellow { display: none !important; }

    .header-app-header a:has(> .suporte) {
        padding: 9px !important;
        width: 40px;
        height: 40px;
        justify-content: center;
    }

    .header-app-header .suporte .bi { font-size: 1rem; }
}

/* Botoes flutuantes (grupo / suporte). Sao sobreposicao por natureza; o que
   da para fazer e reduzir a area no celular e dar sombra, para lerem como
   camada acima do conteudo e nao como colisao. */
@media (max-width: 640px) {
    [class*="sorteioShare"] {
        right: 8px !important;
        bottom: 14px !important;
        gap: 8px;
    }

    [class*="sorteioShare"] > * {
        width: 42px !important;
        height: 42px !important;
        box-shadow: var(--ds-sh-2);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

/* Caixa de data/preco da campanha: com "Campanha" e a data lado a lado em
   375px, a data quebrava em tres linhas e a caixa ficava desalinhada da
   irma ao lado. Empilhar rotulo e valor resolve e fica mais legivel. */
@media (max-width: 480px) {
    .campanha-header .item,
    .app-main .card-body > .d-flex > .item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 2px;
    }

    .campanha-header .item .title,
    .app-main .card-body > .d-flex > .item .title {
        margin-right: 0 !important;
        font-size: .75rem;
        color: var(--ds-text-3) !important;
    }
}