/* ==========================================================
   Mialich: paletas de cores (escolhidas em Painel de Mídia › Tema do site)
   O site marca o <html> com data-tema="escuro | blackfriday | natal" e, nas paletas escuras,
   data-modo="escuro". Sem atributo vale o azul original (tokens do :root de style.css).
   Os valores das paletas abaixo são os do arquivo de paletas aprovado.
   ========================================================== */
:root { --surface: #ffffff; --gold: #c99a2e;
  /* faixas coloridas (guia de cortes, Trabalhe conosco): extremos do degradê, brilho e cores de texto */
  --banda-1: #0a2766; --banda-2: #0a3b97; --banda-3: #1357c6; --banda-glow: #4d92ff; --banda-destaque: #a9c8ff; --banda-suave: #d6e4ff; }

/* ==========================================================
   Mialich — paletas alternativas
   Basta adicionar este arquivo DEPOIS do CSS principal e
   definir o tema no <html>:  <html data-tema="escuro">
   Valores: escuro | blackfriday | natal   (sem atributo = azul original)
   Usa exatamente os mesmos tokens do :root atual do site.
   ========================================================== */

/* ---------- 1) MODO ESCURO ---------- */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --blue:      #2f66d9;   /* primário (texto branco sobre ele = 5.2:1) */
  --blue-dark: #1f4fb8;   /* hover / estados escuros */
  --blue-ink:  #070c1b;   /* topbar, ::selection */
  --blue-100:  #1d2d57;
  --blue-50:   #141f3d;
  --blue-mid:  #7fa8ff;   /* acento: títulos pequenos, links (7.8:1) */
  --accent:    var(--blue-mid);
  --paper:     #0d1426;   /* fundo da página */
  --paper-2:   #141c33;
  --surface:   #16203a;   /* NOVO: fundo de cards (ver nota abaixo) */
  --ink:       #e9eefb;   /* texto principal (15.8:1) */
  --muted:     #9fabc8;   /* texto secundário (8:1) */
  --line:      #27324f;
  --shadow:    0 14px 34px -14px rgba(0, 0, 0, .7);
  --shadow-sm: 0 6px 18px -8px rgba(0, 0, 0, .6);
}

/* ---------- 2) BLACK FRIDAY ---------- */
:root[data-tema^="blackfriday"] {
  color-scheme: dark;
  --blue:      #d3121e;   /* primário vermelho (branco sobre ele = 5.4:1) */
  --blue-dark: #a30d17;
  --blue-ink:  #000000;
  --blue-100:  #3a1417;
  --blue-50:   #25100f;
  --blue-mid:  #ffc400;   /* acento amarelo-ouro (12:1 sobre o fundo) */
  --accent:    var(--blue-mid);
  --paper:     #0f0f0f;
  --paper-2:   #181818;
  --surface:   #1b1b1b;
  --ink:       #f7f7f7;
  --muted:     #adadad;
  --line:      #333333;
  --shadow:    0 14px 34px -14px rgba(255, 196, 0, .22);
  --shadow-sm: 0 6px 18px -8px rgba(0, 0, 0, .8);
  --banda-1: #2a0509; --banda-2: #8f0b14; --banda-3: #d3121e; --banda-glow: #ff4a55; --banda-destaque: #ffc400; --banda-suave: #ffe1e3;
}

/* ---------- 3) NATAL ---------- */
:root[data-tema="natal"] {
  --blue:      #14633b;   /* verde pinheiro (branco sobre ele = 7.3:1) */
  --blue-dark: #0d4529;
  --blue-ink:  #08281a;
  --blue-100:  #d6ebdd;
  --blue-50:   #edf6f0;
  --blue-mid:  #c4122e;   /* acento vermelho natalino (5.6:1) */
  --accent:    var(--blue-mid);
  --gold:      #c99a2e;   /* NOVO: detalhes dourados (selos, filetes) */
  --paper:     #fbf6ec;   /* creme quente */
  --paper-2:   #f1e9d8;
  --surface:   #ffffff;
  --ink:       #15231b;
  --muted:     #55665c;
  --line:      #e3dac6;
  --shadow:    0 14px 34px -14px rgba(8, 40, 26, .35);
  --shadow-sm: 0 6px 18px -8px rgba(8, 40, 26, .25);
  --banda-1: #08281a; --banda-2: #0d4529; --banda-3: #14633b; --banda-glow: #2f9a63; --banda-destaque: #f0d58a; --banda-suave: #e3f2e8;
}

/* ---------- Paletas escuras: caixas e cartões usam --surface em vez de branco ---------- */
:root[data-modo="escuro"] .a11y-painel,
:root[data-modo="escuro"] .a11y-topo,
:root[data-modo="escuro"] .a11y-tile,
:root[data-modo="escuro"] .asst-painel,
:root[data-modo="escuro"] .asst-msg-bot .asst-balao,
:root[data-modo="escuro"] .asst-chips-grade .asst-chip:hover .asst-chip-icone,
:root[data-modo="escuro"] .asst-form,
:root[data-modo="escuro"] .asst-form input,
:root[data-modo="escuro"] .asst-nota,
:root[data-modo="escuro"] .jornal-card,
:root[data-modo="escuro"] .jornal-vazio,
:root[data-modo="escuro"] .has-product-reveal .receita-conteudo,
:root[data-modo="escuro"] .acougue-completo,
:root[data-modo="escuro"] .main-header,
:root[data-modo="escuro"] .nav-links,
:root[data-modo="escuro"] .cartaz-item,
:root[data-modo="escuro"] .sazonal-banner,
:root[data-modo="escuro"] .parceiros-secao,
:root[data-modo="escuro"] .search-input,
:root[data-modo="escuro"] .select-filtro,
:root[data-modo="escuro"] .card-loja,
:root[data-modo="escuro"] .card-receita,
:root[data-modo="escuro"] .app-download-area,
:root[data-modo="escuro"] .cartao-beneficios .beneficio-destaque,
:root[data-modo="escuro"] .info-card,
:root[data-modo="escuro"] .form-card,
:root[data-modo="escuro"] .input-group input:focus,
:root[data-modo="escuro"] .input-group select:focus,
:root[data-modo="escuro"] .input-group textarea:focus,
:root[data-modo="escuro"] .card-beneficio-rh,
:root[data-modo="escuro"] .gente-numeros li,
:root[data-modo="escuro"] .mapa-painel,
:root[data-modo="escuro"] .mapa-busca input:focus,
:root[data-modo="escuro"] .cep-linha input:focus,
:root[data-modo="escuro"] .mapa-area,
:root[data-modo="escuro"] .loja-seletor,
:root[data-modo="escuro"] .lt-card,
:root[data-modo="escuro"] .semana,
:root[data-modo="escuro"] .ess-visao,
:root[data-modo="escuro"] .valor-card,
:root[data-modo="escuro"] .sobre-numeros,
:root[data-modo="escuro"] .gente-texto,
:root[data-modo="escuro"] .vc-card,
:root[data-modo="escuro"] .dia-resultado,
:root[data-modo="escuro"] .dia-tabela,
:root[data-modo="escuro"] .ci-card,
:root[data-modo="escuro"] .priv-indice,
:root[data-modo="escuro"] .priv-tabela-wrap,
:root[data-modo="escuro"] .aviso-cookies,
:root[data-modo="escuro"] .inst-vazio,
:root[data-modo="escuro"] .inst-passos li,
:root[data-modo="escuro"] .inst-caixa,
:root[data-modo="escuro"] .inst-card,
:root[data-modo="escuro"] .faq-item,
:root[data-modo="escuro"] .imp-item,
:root[data-modo="escuro"] .ts-periodo {
  background-color: var(--surface);
}
:root[data-modo="escuro"] .a11y-tamanho button,
:root[data-modo="escuro"] .asst-link,
:root[data-modo="escuro"] .asst-chip,
:root[data-modo="escuro"] .jt-jump input,
:root[data-modo="escuro"] .rec-cabeca-link,
:root[data-modo="escuro"] .rec-mais,
:root[data-modo="escuro"] .ac-btn,
:root[data-modo="escuro"] .rs-link,
:root[data-modo="escuro"] a.rs-link:hover .rs-icone,
:root[data-modo="escuro"] a.rs-link:focus-visible .rs-icone,
:root[data-modo="escuro"] a.rs-link:hover .rs-ir i,
:root[data-modo="escuro"] a.rs-link:focus-visible .rs-ir i,
:root[data-modo="escuro"] .carousel-btn,
:root[data-modo="escuro"] .seta-oferta,
:root[data-modo="escuro"] .receita-categoria,
:root[data-modo="escuro"] .loja-breve .selo-breve,
:root[data-modo="escuro"] .valor-card:focus-within .valor-ico,
:root[data-modo="escuro"] .dia-opcao {
  background-color: var(--surface);
  color: var(--blue-mid);
}

/* Logo azul e vermelha: nas paletas escuras fica com fundo transparente e ganha um contorno claro fino para continuar legível */
:root[data-modo="escuro"] .main-header .logo img { filter: drop-shadow(1px 0 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 1px 0 #ffffff) drop-shadow(0 -1px 0 #ffffff); }
:root[data-modo="escuro"] .main-header .nav-links li a { color: var(--ink); }
:root[data-modo="escuro"] .main-header .nav-links li a:hover,
:root[data-modo="escuro"] .main-header .nav-links li a.is-active { background: var(--blue-100); color: var(--ink); }
:root[data-modo="escuro"] .main-header .nav-links li a.btn-destaque-header { background: var(--blue); color: #ffffff; }
:root[data-modo="escuro"] .main-header .nav-links li a.nav-link-secundario { color: var(--blue-mid); }
:root[data-modo="escuro"] img { color-scheme: normal; }
:root[data-modo="escuro"] ::selection { background: var(--blue); color: #ffffff; }
:root[data-modo="escuro"] .rec-cabeca-link strong { color: var(--blue-mid); }
:root[data-modo="escuro"] .rec-cabeca-link span { color: var(--ink); }

/* ==========================================================
   Artes predefinidas das datas (renderizadas por sec_palette_arte_html em src/lib/theme.php)
   Natal: faixa de mensagem, fio de luzes e neve. Black Friday: faixa em movimento e fita de listras.
   ========================================================== */
.tema-arte, .tema-neve { display: none; }
html[data-tema="natal"] .tema-arte-natal { display: block; }
html[data-tema="natal"] .tema-neve { display: block; }
html[data-tema="blackfriday"] .tema-arte-bf[data-para="blackfriday"], html[data-tema="blackfriday2"] .tema-arte-bf[data-para="blackfriday2"] { display: block; }
.tema-arte-bf[data-para="blackfriday2"] .tema-fita { display: none; }
.tema-arte-bf[data-para="blackfriday2"] .tema-marquee-grupo b { color: #ff233d; } /* estrelas da faixa em vermelho (sem dourado) */ /* sem a fita de listras (a Black Friday 2 tem a própria faixa vermelha) */
html[data-arte="0"] .tema-arte, html[data-arte="0"] .tema-neve { display: none !important; }

.tema-faixa { font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: calc(17px * var(--a11y-fs, 1)); line-height: 1.2; }

/* ---------- Natal ---------- */
.tema-arte-natal { position: relative; z-index: 30; }
.tema-arte-natal .tema-faixa { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 16px; text-align: center; color: #ffffff; background: linear-gradient(90deg, #08281a, #14633b 50%, #08281a); border-bottom: 3px solid var(--gold); }
.tema-azevinho { flex-shrink: 0; }
.tema-luzes {
  height: 34px; margin-bottom: -8px; pointer-events: none; animation: tema-pisca 2.6s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='34' viewBox='0 0 96 34'%3E%3Cpath d='M0 4Q24 12 48 4Q72 12 96 4' fill='none' stroke='%231b3a2a' stroke-width='1.6'/%3E%3Cg%3E%3Crect x='9.5' y='6.5' width='5' height='4' rx='1' fill='%23444'/%3E%3Cellipse cx='12' cy='16' rx='4.6' ry='6.4' fill='%23e0293b'/%3E%3Crect x='33.5' y='6.5' width='5' height='4' rx='1' fill='%23444'/%3E%3Cellipse cx='36' cy='16' rx='4.6' ry='6.4' fill='%23f2c14e'/%3E%3Crect x='57.5' y='6.5' width='5' height='4' rx='1' fill='%23444'/%3E%3Cellipse cx='60' cy='16' rx='4.6' ry='6.4' fill='%232fa866'/%3E%3Crect x='81.5' y='6.5' width='5' height='4' rx='1' fill='%23444'/%3E%3Cellipse cx='84' cy='16' rx='4.6' ry='6.4' fill='%23dfe9ff'/%3E%3C/g%3E%3C/svg%3E") repeat-x left top / 96px 34px;
}
@keyframes tema-pisca { 0%, 100% { filter: brightness(1.18) drop-shadow(0 0 4px rgba(255, 220, 120, .55)); } 50% { filter: brightness(.72); } }

.tema-neve { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.tema-neve i { position: absolute; top: -14px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #ffffff; opacity: .9; box-shadow: 0 0 3px rgba(20, 99, 59, .55); animation: tema-neve-cai var(--d) linear var(--a) infinite; }
@keyframes tema-neve-cai { 0% { transform: translate3d(0, -4vh, 0); } 50% { transform: translate3d(22px, 52vh, 0); } 100% { transform: translate3d(-10px, 108vh, 0); } }

/* ---------- Black Friday ---------- */
.tema-arte-bf { position: relative; z-index: 30; }
.tema-arte-bf .tema-faixa { overflow: hidden; white-space: nowrap; color: #ffffff; background: #000000; padding: 8px 0; font-size: calc(16px * var(--a11y-fs, 1)); letter-spacing: .12em; }
.tema-marquee { display: inline-flex; animation: tema-marquee var(--dur, 40s) linear infinite; }
.tema-marquee-grupo { display: inline-flex; align-items: center; }
.tema-marquee-grupo span { padding: 0 22px; }
.tema-marquee-grupo b { color: var(--blue-mid); font-size: 1.1em; }
@keyframes tema-marquee { to { transform: translateX(-50%); } }
.tema-fita { height: 8px; background: repeating-linear-gradient(135deg, #ffc400 0 14px, #0a0a0a 14px 28px); }

@media (prefers-reduced-motion: reduce) {
  .tema-neve { display: none !important; }
  .tema-luzes, .tema-marquee { animation: none; }
  .tema-arte-bf .tema-faixa { text-align: center; }
  .tema-marquee-grupo + .tema-marquee-grupo { display: none; }
  .tema-marquee-grupo > *:nth-child(n+3) { display: none; }
  .tema-marquee { display: block; text-align: center; }
  .tema-marquee-grupo { justify-content: center; }
}
@media (max-width: 700px) { .tema-arte-natal .tema-faixa { font-size: calc(14px * var(--a11y-fs, 1)); gap: 8px; } .tema-azevinho { width: 26px; } }

/* ---------- Arte Black Lich: só aparece com a paleta Black Friday; a capa em vídeo cede lugar à abertura Black Lich ---------- */
html:not([data-tema^="blackfriday"]) .black-arte { display: none; }
html[data-tema^="blackfriday"]:not([data-arte="0"]) .hero-video { display: none; }
html[data-arte="0"] .black-arte { display: none !important; }

/* ==========================================================
   Ajustes de cor por paleta: elementos que tinham azul fixo (círculos, brilhos e degradês).
   Black Friday e Natal trocam o azul pelas cores da paleta; as paletas escuras trocam o branco fixo por --surface.
   ========================================================== */

/* ---------- Cartão Mialich ---------- */
:root[data-tema^="blackfriday"] .cartao-wrapper,
:root[data-tema="natal"] .cartao-wrapper {
  background:
    radial-gradient(58% 90% at 80% 48%, color-mix(in srgb, var(--banda-glow) 55%, transparent) 0%, transparent 70%),
    linear-gradient(135deg, var(--blue-ink) 0%, var(--blue-dark) 48%, var(--blue) 100%);
}
:root[data-tema^="blackfriday"] .ct-pre, :root[data-tema="natal"] .ct-pre { color: var(--banda-suave); }
:root[data-tema^="blackfriday"] .cartao-beneficios li i,
:root[data-tema="natal"] .cartao-beneficios li i {
  background: color-mix(in srgb, var(--banda-destaque) 16%, transparent);
  border-color: color-mix(in srgb, var(--banda-destaque) 40%, transparent);
  color: var(--banda-suave);
}
:root[data-tema^="blackfriday"] .cartao-imagem::before,
:root[data-tema="natal"] .cartao-imagem::before {
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--banda-destaque) 45%, transparent), color-mix(in srgb, var(--banda-glow) 42%, transparent) 52%, color-mix(in srgb, var(--banda-2) 60%, transparent) 100%);
}
:root[data-tema^="blackfriday"] .ca-circulo,
:root[data-tema="natal"] .ca-circulo {
  background:
    radial-gradient(ellipse at 28% 18%, color-mix(in srgb, var(--banda-destaque) 38%, transparent), transparent 58%),
    linear-gradient(145deg, var(--banda-glow) 0%, var(--banda-3) 42%, var(--banda-2) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -12px 32px rgba(0, 0, 0, .25);
}

/* ---------- Clube Mialich: esfera e órbitas ---------- */
:root[data-tema^="blackfriday"] .blue-orbit,
:root[data-tema="natal"] .blue-orbit {
  background:
    radial-gradient(ellipse at 28% 18%, color-mix(in srgb, var(--banda-destaque) 38%, transparent), transparent 58%),
    linear-gradient(145deg, var(--banda-glow) 0%, var(--banda-3) 48%, var(--banda-1) 100%);
  background-size: 160% 160%, 100% 100%;
}
:root[data-tema^="blackfriday"] .blue-orbit::before, :root[data-tema="natal"] .blue-orbit::before { border-color: color-mix(in srgb, var(--banda-glow) 35%, transparent); border-top-color: color-mix(in srgb, var(--banda-destaque) 60%, transparent); border-bottom-color: color-mix(in srgb, var(--banda-2) 60%, transparent); }
:root[data-tema^="blackfriday"] .blue-orbit::after, :root[data-tema="natal"] .blue-orbit::after { border-color: color-mix(in srgb, var(--banda-2) 30%, transparent); border-left-color: color-mix(in srgb, var(--banda-glow) 40%, transparent); border-right-color: color-mix(in srgb, var(--banda-destaque) 40%, transparent); }
:root[data-tema^="blackfriday"] .live-dot, :root[data-tema="natal"] .live-dot { background: var(--blue); }
:root[data-tema^="blackfriday"] .seal-points, :root[data-tema="natal"] .seal-points { color: var(--blue-mid); }
:root[data-tema^="blackfriday"] .arrow-left, :root[data-tema="natal"] .arrow-left { fill: var(--blue-mid); }
:root[data-tema^="blackfriday"] .arrow-right, :root[data-tema="natal"] .arrow-right { fill: var(--blue); }

/* ---------- Sobre nós: brilhos atrás de Visão e Valores ---------- */
:root[data-tema^="blackfriday"] .ess-visao::after, :root[data-tema="natal"] .ess-visao::after { background: radial-gradient(circle, color-mix(in srgb, var(--banda-glow) 25%, transparent), transparent 70%); }
:root[data-tema^="blackfriday"] .ess-valores::before, :root[data-tema="natal"] .ess-valores::before { background: radial-gradient(circle, color-mix(in srgb, var(--banda-glow) 35%, transparent), transparent 70%); }

/* ---------- Paletas escuras: degradês que terminavam em branco ---------- */
:root[data-modo="escuro"] .parceiros-secao { background: linear-gradient(180deg, var(--surface) 0%, var(--blue-50) 100%); border-color: var(--blue-100); }
:root[data-modo="escuro"] .cartao-solicite { background: linear-gradient(100deg, var(--blue-50) 0%, var(--surface) 62%); }
:root[data-modo="escuro"] .inst-caixa.cv-impresso { background: linear-gradient(165deg, var(--blue-50) 0%, var(--surface) 70%); }
@media (min-width: 861px) {
  :root[data-modo="escuro"] .lt-ano, :root[data-modo="escuro"] .lt-item:nth-child(even) .lt-ano { background: linear-gradient(135deg, var(--blue-50) 0%, color-mix(in srgb, var(--surface) 70%, transparent) 100%); }
}
:root[data-tema] .lt-foto figcaption { background: color-mix(in srgb, var(--blue-ink) 82%, transparent); }

/* ==========================================================
   Datas comemorativas: Páscoa, Dia das Mães, Dia dos Pais, Dia das Crianças e Aniversário Mialich
   ========================================================== */
:root[data-tema="pascoa"] {
  --blue: #6b3fa0; --blue-dark: #4b2a78; --blue-ink: #2a1647; --blue-100: #e6dbf5; --blue-50: #f4eefb; --blue-mid: #b43f8f; --accent: var(--blue-mid);
  --paper: #faf6fc; --paper-2: #f1e9f7; --surface: #ffffff; --ink: #231433; --muted: #66587a; --line: #e5daf0;
  --shadow: 0 14px 34px -14px rgba(42, 22, 71, .35); --shadow-sm: 0 6px 18px -8px rgba(42, 22, 71, .25);
  --banda-1: #2a1647; --banda-2: #5a3492; --banda-3: #8a5cc7; --banda-glow: #b78cf0; --banda-destaque: #f3c6e6; --banda-suave: #ece0fa;
}
:root[data-tema="maes"] {
  --blue: #b0245f; --blue-dark: #82174a; --blue-ink: #3a0b24; --blue-100: #f8d9e6; --blue-50: #fdeff5; --blue-mid: #d94b8a; --accent: var(--blue-mid);
  --paper: #fff7f9; --paper-2: #fbe9ef; --surface: #ffffff; --ink: #2b1119; --muted: #78505f; --line: #f0d5df;
  --shadow: 0 14px 34px -14px rgba(58, 11, 36, .35); --shadow-sm: 0 6px 18px -8px rgba(58, 11, 36, .25);
  --banda-1: #3a0b24; --banda-2: #82174a; --banda-3: #c2336f; --banda-glow: #f06aa5; --banda-destaque: #ffd3e4; --banda-suave: #ffe6ef;
}
:root[data-tema="pais"] {
  --blue: #0f5c73; --blue-dark: #0a4153; --blue-ink: #06222d; --blue-100: #d3e9f0; --blue-50: #eaf5f8; --blue-mid: #1f8aa8; --accent: var(--blue-mid);
  --paper: #f3f7f8; --paper-2: #e4ecee; --surface: #ffffff; --ink: #0f1f26; --muted: #52666e; --line: #d5e0e3;
  --shadow: 0 14px 34px -14px rgba(6, 34, 45, .35); --shadow-sm: 0 6px 18px -8px rgba(6, 34, 45, .25);
  --banda-1: #06222d; --banda-2: #0b4a5e; --banda-3: #14799a; --banda-glow: #3fb4d6; --banda-destaque: #bfe9f5; --banda-suave: #dcf2f8;
}
:root[data-tema="criancas"] {
  --blue: #5b3df5; --blue-dark: #3f26c4; --blue-ink: #1d1366; --blue-100: #e0dbff; --blue-50: #f1eeff; --blue-mid: #00a7c7; --accent: var(--blue-mid);
  --paper: #f7f7ff; --paper-2: #eceaff; --surface: #ffffff; --ink: #1a1640; --muted: #5d5a85; --line: #dedcf5;
  --shadow: 0 14px 34px -14px rgba(29, 19, 102, .35); --shadow-sm: 0 6px 18px -8px rgba(29, 19, 102, .25);
  --banda-1: #1d1366; --banda-2: #3f26c4; --banda-3: #6f55ff; --banda-glow: #5ee0f0; --banda-destaque: #9fefff; --banda-suave: #e3f8ff;
}
:root[data-tema="aniversario"] {
  --banda-1: #0a2766; --banda-2: #0a3b97; --banda-3: #1357c6; --banda-glow: #6aa6ff; --banda-destaque: #cfe1ff; --banda-suave: #e4eeff;
}

/* faixa de mensagem das datas */
.tema-arte-festa { position: relative; z-index: 30; }
.tema-arte-festa .tema-faixa { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 16px; text-align: center; color: #ffffff; background: linear-gradient(90deg, var(--banda-1), var(--banda-3) 50%, var(--banda-1)); border-bottom: 3px solid var(--banda-destaque); }
.tema-arte-festa .tema-faixa b { color: var(--banda-destaque); font-size: 1.15em; }
@media (max-width: 700px) { .tema-arte-festa .tema-faixa { font-size: calc(14px * var(--a11y-fs, 1)); gap: 8px; } }

/* efeitos: ovos, corações, estrelas, balões e confetes */
.tema-part { display: none; position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.tema-part i { position: absolute; top: -40px; left: var(--x); width: var(--s); height: calc(var(--s) * 1.25); opacity: .9; animation: tema-part-cai var(--d) linear var(--a) infinite; }
@keyframes tema-part-cai { 0% { transform: translate3d(0, -6vh, 0) rotate(0deg); } 100% { transform: translate3d(34px, 112vh, 0) rotate(300deg); } }
@keyframes tema-part-sobe { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(26px, -120vh, 0); } }

.tema-part-pascoa i { border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background-color: #cdb4f0; background-image: linear-gradient(transparent 38%, rgba(255, 255, 255, .6) 38% 54%, transparent 54%); box-shadow: 0 1px 3px rgba(42, 22, 71, .25); }
.tema-part-pascoa i:nth-child(4n+1) { background-color: #f6b8de; }
.tema-part-pascoa i:nth-child(4n+2) { background-color: #b9a1ea; }
.tema-part-pascoa i:nth-child(4n+3) { background-color: #a9d9f2; }
.tema-part-pascoa i:nth-child(4n) { background-color: #c8ecb8; }
.tema-part-maes i, .tema-part-pais i { width: auto; height: auto; line-height: 1; font-style: normal; font-size: var(--s); }
.tema-part-maes i::before { content: "♥"; color: var(--blue-mid); }
.tema-part-maes i:nth-child(3n)::before { content: "✿"; color: var(--banda-glow); }
.tema-part-pais i::before { content: "★"; color: var(--blue-mid); }
.tema-part-pais i:nth-child(3n)::before { content: "✦"; color: var(--blue); }
.tema-part-criancas i { top: auto; bottom: -70px; width: calc(var(--s) * 1.1); height: calc(var(--s) * 1.4); border-radius: 50% 50% 46% 46%; background-color: var(--blue-mid); animation-name: tema-part-sobe; }
.tema-part-criancas i::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: calc(var(--s) * 1.8); background: rgba(0, 0, 0, .25); }
.tema-part-criancas i:nth-child(4n+1) { background-color: #5b3df5; }
.tema-part-criancas i:nth-child(4n+2) { background-color: #00a7c7; }
.tema-part-criancas i:nth-child(4n+3) { background-color: #ff7ac6; }
.tema-part-criancas i:nth-child(4n) { background-color: #7ddc6b; }
.tema-part-aniversario i { width: calc(var(--s) * .5); height: calc(var(--s) * .9); border-radius: 2px; background-color: #6aa6ff; }
.tema-part-aniversario i:nth-child(5n+1) { background-color: #003898; }
.tema-part-aniversario i:nth-child(5n+2) { background-color: #6aa6ff; }
.tema-part-aniversario i:nth-child(5n+3) { background-color: #ffffff; box-shadow: 0 0 0 1px rgba(0, 56, 152, .25); }
.tema-part-aniversario i:nth-child(5n+4) { background-color: #b9d4ff; }
.tema-part-aniversario i:nth-child(5n) { background-color: #c0c8d8; }

/* banner da data (imagem enviada pelo painel), no topo da Home */
.tema-banner { display: none; margin-top: 18px; }
.tema-banner img { display: block; width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
.tema-banner a { display: block; }

/* qual arte aparece com qual paleta */
html[data-tema="pascoa"] .tema-arte-festa[data-para="pascoa"], html[data-tema="pascoa"] .tema-part-pascoa, html[data-tema="pascoa"] .tema-banner[data-para="pascoa"],
html[data-tema="maes"] .tema-arte-festa[data-para="maes"], html[data-tema="maes"] .tema-part-maes, html[data-tema="maes"] .tema-banner[data-para="maes"],
html[data-tema="pais"] .tema-arte-festa[data-para="pais"], html[data-tema="pais"] .tema-part-pais, html[data-tema="pais"] .tema-banner[data-para="pais"],
html[data-tema="criancas"] .tema-arte-festa[data-para="criancas"], html[data-tema="criancas"] .tema-part-criancas, html[data-tema="criancas"] .tema-banner[data-para="criancas"],
html[data-tema="aniversario"] .tema-arte-festa[data-para="aniversario"], html[data-tema="aniversario"] .tema-part-aniversario, html[data-tema="aniversario"] .tema-banner[data-para="aniversario"],
html[data-tema="natal"] .tema-banner[data-para="natal"], html[data-tema="blackfriday"] .tema-banner[data-para="blackfriday"], html[data-tema="blackfriday2"] .tema-banner[data-para="blackfriday2"] { display: block; }
html[data-arte="0"] .tema-part, html[data-arte="0"] .tema-banner { display: none !important; }
@media (prefers-reduced-motion: reduce) { .tema-part { display: none !important; } }

/* ---------- Ajustes de cor para todas as paletas com cor própria (datas, Natal, Black Friday e as criadas no painel) ---------- */
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .cartao-wrapper {
  background:
    radial-gradient(58% 90% at 80% 48%, color-mix(in srgb, var(--banda-glow) 55%, transparent) 0%, transparent 70%),
    linear-gradient(135deg, var(--blue-ink) 0%, var(--blue-dark) 48%, var(--blue) 100%);
}
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .ct-pre { color: var(--banda-suave); }
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .cartao-beneficios li i {
  background: color-mix(in srgb, var(--banda-destaque) 16%, transparent);
  border-color: color-mix(in srgb, var(--banda-destaque) 40%, transparent);
  color: var(--banda-suave);
}
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .cartao-imagem::before {
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--banda-destaque) 45%, transparent), color-mix(in srgb, var(--banda-glow) 42%, transparent) 52%, color-mix(in srgb, var(--banda-2) 60%, transparent) 100%);
}
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .ca-circulo {
  background:
    radial-gradient(ellipse at 28% 18%, color-mix(in srgb, var(--banda-destaque) 38%, transparent), transparent 58%),
    linear-gradient(145deg, var(--banda-glow) 0%, var(--banda-3) 42%, var(--banda-2) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -12px 32px rgba(0, 0, 0, .25);
}
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .blue-orbit {
  background:
    radial-gradient(ellipse at 28% 18%, color-mix(in srgb, var(--banda-destaque) 38%, transparent), transparent 58%),
    linear-gradient(145deg, var(--banda-glow) 0%, var(--banda-3) 48%, var(--banda-1) 100%);
  background-size: 160% 160%, 100% 100%;
}
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .live-dot { background: var(--blue); }
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .seal-points { color: var(--blue-mid); }
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .arrow-left { fill: var(--blue-mid); }
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .arrow-right { fill: var(--blue); }
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .ess-visao::after { background: radial-gradient(circle, color-mix(in srgb, var(--banda-glow) 25%, transparent), transparent 70%); }
html[data-tema]:not([data-tema="escuro"]):not([data-tema="aniversario"]) .ess-valores::before { background: radial-gradient(circle, color-mix(in srgb, var(--banda-glow) 35%, transparent), transparent 70%); }