/* ==========================================================================
   Angie Motors — Catálogo Digital
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/inter.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --fundo: oklch(14% .005 250);
  --texto: oklch(98% 0 0);
  --cartao: oklch(19% .006 250);
  --secundaria: oklch(24% .006 250);
  --suave: oklch(68% .01 250);
  --borda: oklch(28% .006 250);
  --primaria: oklch(82% .16 85);
  --primaria-texto: oklch(14% .005 250);
  --ouro: linear-gradient(135deg, oklch(85% .17 88), oklch(72% .15 78));
  --ouro-texto: linear-gradient(135deg, oklch(90% .16 90), oklch(72% .15 78));
  --sombra-xl: 0 20px 25px -5px rgb(0 0 0 / .3), 0 8px 10px -6px rgb(0 0 0 / .3);
  --sombra-ouro: 0 10px 15px -3px var(--p20), 0 4px 6px -4px var(--p20);
  --b40: color-mix(in oklab, var(--borda) 40%, transparent);
  --b50: color-mix(in oklab, var(--borda) 50%, transparent);
  --b60: color-mix(in oklab, var(--borda) 60%, transparent);
  --b70: color-mix(in oklab, var(--borda) 70%, transparent);
  --s30: color-mix(in oklab, var(--secundaria) 30%, transparent);
  --s40: color-mix(in oklab, var(--secundaria) 40%, transparent);
  --s70: color-mix(in oklab, var(--secundaria) 70%, transparent);
  --p5: color-mix(in oklab, var(--primaria) 5%, transparent);
  --p10: color-mix(in oklab, var(--primaria) 10%, transparent);
  --p20: color-mix(in oklab, var(--primaria) 20%, transparent);
  --p25: color-mix(in oklab, var(--primaria) 25%, transparent);
  --p30: color-mix(in oklab, var(--primaria) 30%, transparent);
  --p40: color-mix(in oklab, var(--primaria) 40%, transparent);
  --p50: color-mix(in oklab, var(--primaria) 50%, transparent);
  --p60: color-mix(in oklab, var(--primaria) 60%, transparent);
  --p70: color-mix(in oklab, var(--primaria) 70%, transparent);
}

/* ---------- Base ---------- */

*, ::before, ::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.icone { flex-shrink: 0; }
.pagina { min-height: 100vh; overflow-x: clip; background: var(--fundo); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ouro { background-image: var(--ouro); }
:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--primaria); }
.so-desktop { display: none; }
@media (min-width: 640px) { .so-celular { display: none; } .so-desktop { display: inline; } }

/* ---------- Botões ---------- */

.botao {
  display: inline-flex; height: 36px; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: 10px; white-space: nowrap;
  font-size: 14px; font-weight: 700; line-height: 20px;
  transition: color .15s, background-color .15s, border-color .15s;
}
.botao .icone { width: 16px; height: 16px; }
.botao--ouro { background-color: var(--primaria); color: var(--primaria-texto); box-shadow: var(--sombra-ouro); }
.botao--ouro:hover { opacity: .95; }
.botao--largo { width: 100%; }

/* ---------- Topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 40;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--b60);
  background-color: color-mix(in oklab, var(--fundo) 85%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.topo__barra { max-width: 64rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; }
.marca { display: flex; min-width: 0; align-items: center; gap: 12px; }
.marca__logo { display: flex; width: 50px; height: 50px; flex-shrink: 0; align-items: center; justify-content: center; }
.marca__logo img { width: 100%; height: 100%; object-fit: contain; }
.marca__textos { min-width: 0; line-height: 1.25; }
.marca__nome { font-size: 18px; font-weight: 900; line-height: 28px; letter-spacing: -.025em; color: transparent; background-image: var(--ouro-texto); -webkit-background-clip: text; background-clip: text; }
.marca__sub { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); }

.enderecos { border-top: 1px solid var(--b40); background: var(--s30); }
.enderecos > div { max-width: 64rem; margin: 0 auto; display: grid; gap: 4px; padding: 8px 16px; font-size: 11px; color: var(--suave); }
@media (min-width: 640px) { .enderecos > div { grid-template-columns: 1fr 1fr; } }
.endereco { display: flex; align-items: flex-start; gap: 6px; }
.endereco .icone { width: 12px; height: 12px; margin-top: 2px; color: var(--primaria); }

/* ---------- Busca, quiz e categorias ---------- */

.conteudo { max-width: 96rem; margin: 0 auto; padding: 20px 16px 64px; }
.busca { position: relative; }
.busca .icone { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--suave); pointer-events: none; }
.busca__campo {
  display: flex; width: 100%; height: 44px; padding: 4px 12px 4px 40px;
  border: 1px solid var(--b70); border-radius: 999px; background: color-mix(in oklab, var(--secundaria) 50%, transparent);
  font-size: 14px; line-height: 20px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.busca__campo::placeholder { color: var(--suave); }
.busca__campo:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--primaria); }

.finder {
  margin-top: 10px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; overflow: hidden;
  padding: 8px 16px; border: 1px solid var(--b60); border-radius: 16px; background: var(--cartao); box-shadow: var(--sombra-xl);
  transition: border-color .15s;
}
.finder:hover { border-color: var(--p40); }
.finder__textos { display: flex; flex-direction: column; gap: 2px; }
.finder__icone { display: none; }
.finder__titulo { font-size: 14px; font-weight: 900; line-height: 1.25; letter-spacing: -.025em; }
.finder__titulo .so-celular span { margin-right: 6px; }
.finder__texto { margin-top: 2px; font-size: 11px; line-height: 1.375; color: var(--suave); }
.finder__botao { height: 24px; margin: 4px auto 0; padding: 8px 12px; flex-shrink: 0; }
@media (min-width: 640px) {
  .finder { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; }
  .finder__textos { flex-direction: row; align-items: center; gap: 12px; }
  .finder__icone { display: flex; width: 36px; height: 36px; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid var(--p30); border-radius: 999px; background: var(--p10); color: var(--primaria); }
  .finder__icone .icone { width: 16px; height: 16px; }
  .finder__titulo { font-size: 18px; }
  .finder__texto { font-size: 12px; }
  .finder__botao { height: 36px; margin: 0 0 0 16px; padding: 8px 16px; }
}

.categorias { margin: 16px -16px 0; padding: 0 16px 4px; overflow-x: auto; }
.categorias > div { display: flex; gap: 8px; }
.categoria {
  flex-shrink: 0; padding: 6px 16px; border: 1px solid var(--b70); border-radius: 999px; background: var(--s40);
  font-size: 12px; font-weight: 600; line-height: 16px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave);
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.categoria:hover { color: var(--texto); }
.categoria[data-active=true] { border-color: var(--primaria); background: var(--primaria); color: var(--primaria-texto); box-shadow: 0 4px 6px -1px var(--p25), 0 2px 4px -2px var(--p25); }

/* ---------- Vitrine ---------- */

.grade { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 16px; }
@media (min-width: 640px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grade--vazia { display: block; }
.esqueleto { height: 384px; border: 1px solid var(--b50); border-radius: 16px; background: var(--cartao); animation: pulsar 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.vazio { display: grid; place-items: center; padding: 64px 0; border: 1px dashed var(--borda); border-radius: 16px; text-align: center; }
.vazio .icone { width: 40px; height: 40px; margin-bottom: 12px; color: var(--suave); }
.vazio p:first-of-type { font-size: 14px; font-weight: 500; line-height: 20px; }
.vazio p + p { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--suave); }

.item { height: 100%; border-radius: 16px; scroll-margin-top: 96px; transition: box-shadow .5s; }
.item.is-focado { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--p70); }

.card {
  display: flex; height: 100%; flex-direction: column; overflow: hidden;
  border: 1px solid var(--b60); border-radius: 16px; background: var(--cartao); box-shadow: var(--sombra-xl);
  transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: var(--p40); }
.card--destaque { border-color: var(--p50); box-shadow: 0 0 0 1px var(--p20), 0 20px 25px -5px var(--p10), 0 8px 10px -6px var(--p10); }
.card--destaque:hover { border-color: var(--p70); }

.card__midia { position: relative; width: 100%; aspect-ratio: 4 / 3; flex-shrink: 0; overflow: hidden; background: linear-gradient(to bottom right, var(--secundaria), var(--fundo), #000); }
.card__midia::before { content: ""; position: absolute; inset: 0; z-index: 20; background: linear-gradient(to top, rgb(0 0 0 / .7), transparent 50%); pointer-events: none; }
.card__foto { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.card:hover .card__foto { transform: scale(1.03); }
.card__sem-foto { display: grid; width: 100%; height: 100%; place-items: center; color: var(--suave); }
.card__sem-foto .icone { width: 40px; height: 40px; opacity: .4; }
.card__protecao { position: absolute; inset: 0; z-index: 10; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.card__categoria {
  position: absolute; left: 12px; top: 12px; z-index: 30; display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 10px; background: rgb(0 0 0 / .7); color: var(--primaria);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.card__selo {
  position: absolute; right: 12px; top: 16px; z-index: 30; max-width: 60%;
  padding: 2px 6px; border: 1px solid color-mix(in oklab, var(--primaria-texto) 20%, transparent); border-radius: 999px;
  color: var(--primaria-texto); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}
.card__marca { display: none; }

.card__corpo { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 16px; }
.card__info { display: flex; flex: 1; flex-direction: column; gap: 16px; }
.card__titulo { font-size: 18px; font-weight: 900; line-height: 1.25; letter-spacing: -.025em; }
.cores { margin-top: 8px; }
.cores > * + * { margin-top: 6px; }
.cores__atual { display: flex; align-items: center; gap: 6px; }
.cores__atual span:first-child { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); }
.cores__atual span:last-child { font-size: 11px; font-weight: 600; }
.cores__lista { display: flex; flex-wrap: wrap; gap: 6px; }
.cor {
  display: flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--s70); font-size: 11px; color: var(--suave); transition: color .15s, background-color .15s, border-color .15s;
}
.cor:hover { color: var(--texto); }
.cor[aria-pressed=true] { border-color: var(--primaria); background: var(--p10); color: var(--texto); }
.cor__amostra { width: 14px; height: 14px; flex-shrink: 0; border: 1px solid var(--b70); border-radius: 999px; }
.cor .truncar { max-width: 9rem; }

.specs { margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px; border: 1px solid var(--b60); border-radius: 12px; background: var(--s30); }
.spec { display: flex; min-width: 0; align-items: flex-start; gap: 8px; }
.spec .icone { width: 14px; height: 14px; margin-top: 2px; color: var(--primaria); }
.spec > div { min-width: 0; }
.spec dt { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.spec dd { font-size: 12px; font-weight: 600; line-height: 16px; }
.spec dd.quebra { white-space: pre-line; overflow-wrap: break-word; }

.precos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(calc(9px * 1.25 * 2), auto) auto;
  align-items: start; gap: 2px 8px; padding: 8px; border: 1px solid var(--p30); border-radius: 12px;
  background: linear-gradient(to bottom right, var(--p5), transparent); container-type: inline-size;
}
.precos span { text-align: center; font-size: 9px; font-weight: 500; line-height: 1.25; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
/* Mesmo tamanho do original (14px), reduzindo só quando o valor não caberia na coluna */
.precos strong { min-width: 0; text-align: center; font-size: 14px; font-size: min(14px, calc((100cqi - 16px) / (var(--c, 11) * 1.78))); font-weight: 900; line-height: 20px; color: var(--primaria); }

.card__aviso { min-height: 2.5rem; font-size: 10px; line-height: 1.375; color: var(--suave); }
.card .botao .icone { margin-right: 8px; }

.rodape { padding: 24px 0; border-top: 1px solid var(--b40); background: color-mix(in oklab, var(--secundaria) 20%, transparent); text-align: center; font-size: 11px; color: var(--suave); }

/* ---------- Janela do quiz (gaveta no celular) ---------- */

.modal {
  width: 100%; max-width: 24rem; max-height: 85vh; padding: 0; overflow: hidden;
  border: 1px solid var(--b60); border-radius: 16px; background: var(--cartao); color: var(--texto);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
.modal::backdrop { background: rgb(0 0 0 / .8); }
.modal[open] { animation: janela .2s ease-out; }
.modal__caixa { position: relative; display: flex; max-height: 85vh; flex-direction: column; padding: 24px; }
.modal__alca { display: none; }
.modal__conteudo { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal__fechar { position: absolute; top: 16px; right: 16px; z-index: 1; border-radius: 8px; opacity: .7; transition: opacity .15s; }
.modal__fechar:hover { opacity: 1; }
.modal__fechar .icone { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .modal { max-width: 100%; max-height: calc(100% - 96px); margin: auto 0 0; border-radius: 10px 10px 0 0; }
  .modal[open] { animation: gaveta .5s cubic-bezier(.32, .72, 0, 1); }
  .modal__caixa { max-height: none; padding: 0 0 env(safe-area-inset-bottom); }
  .modal__alca { display: block; flex-shrink: 0; width: 100px; height: 8px; margin: 16px auto 32px; border-radius: 999px; background: var(--secundaria); }
  .modal__conteudo { max-height: 75vh; padding: 8px 24px 32px; }
  .modal__fechar { display: none; }
}

.quiz { animation: entrar .3s ease-out; }
.quiz__voltar { margin-bottom: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--suave); transition: color .15s; }
.quiz__voltar:hover { color: var(--primaria); }
.quiz__voltar .icone { width: 14px; height: 14px; }
.quiz__centro { text-align: center; }
.quiz h2 { font-size: 18px; font-weight: 900; line-height: 28px; letter-spacing: -.025em; outline: none; }
.quiz h2.menor { font-size: 16px; line-height: 24px; }
.quiz__texto { margin-top: 8px; font-size: 14px; line-height: 1.625; color: var(--suave); }
.quiz__centro .quiz__texto { max-width: 20rem; margin-inline: auto; }
.quiz__destaque { margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--primaria); }
.quiz__pergunta { margin-top: 20px; font-size: 14px; font-weight: 700; line-height: 20px; }
.quiz__comparativo + .quiz__pergunta { margin-top: 16px; }
.quiz__opcoes { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.opcao {
  width: 100%; padding: 12px 16px; border: 1px solid var(--b70); border-radius: 16px; background: var(--s40);
  text-align: left; font-size: 14px; font-weight: 600; line-height: 20px;
  transition: border-color .15s, background-color .15s, transform .15s;
}
.opcao:hover { border-color: var(--p50); background: var(--s70); }
.opcao:active { transform: scale(.99); }
.opcao span { margin-right: 8px; }
.quiz__aviso { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 0; text-align: center; }
.quiz__aviso--analise { gap: 12px; padding: 48px 0; }
.quiz__aviso-titulo { font-size: 14px; font-weight: 700; line-height: 1.625; outline: none; }
.quiz__aviso-texto { font-size: 12px; line-height: 1.625; color: var(--suave); }
.quiz__aviso .quiz__destaque { font-size: 11px; line-height: 1.5; }
.quiz__linha { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 20px; }
.quiz__linha--sub { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--suave); animation: aparecer .5s .3s both; }
.quiz__linha .icone { width: 16px; height: 16px; color: var(--primaria); }
.quiz__linha--sub .icone { width: 14px; height: 14px; }
.pulsar { animation: pulsar 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.quiz__barra { margin-top: 8px; width: 160px; height: 4px; overflow: hidden; border-radius: 999px; background: var(--secundaria); }
.quiz__barra div { width: 50%; height: 100%; }
.quiz__comparativo { margin-top: 12px; padding: 12px; border: 1px solid var(--b60); border-radius: 16px; background: var(--s30); font-size: 12px; line-height: 1.625; color: var(--suave); }
.quiz__comparativo > div + div { margin-top: 12px; }
.quiz__comparativo p { font-weight: 700; color: var(--texto); }
.quiz__comparativo ul { margin-top: 4px; padding-left: 16px; }
.quiz__comparativo li + li { margin-top: 2px; }

.recomendacao { margin-top: 12px; overflow: hidden; border: 1px solid var(--p50); border-radius: 16px; background: var(--p5); }
.recomendacao > img { width: 100%; height: 160px; object-fit: cover; }
.recomendacao__corpo { display: flex; flex-direction: column; padding: 16px; }
.recomendacao__modelo { font-size: 18px; font-weight: 900; line-height: 1.25; }
.recomendacao__preco { margin-top: 2px; font-size: 14px; font-weight: 700; line-height: 20px; color: var(--primaria); }
.recomendacao__motivo { margin-top: 8px; font-size: 12px; line-height: 1.625; color: var(--suave); }
.recomendacao dl { margin-top: 12px; display: grid; gap: 6px; padding: 12px; border: 1px solid var(--b60); border-radius: 16px; background: var(--s30); }
.recomendacao dl div { display: flex; gap: 8px; font-size: 11px; }
.recomendacao dt { width: 112px; flex-shrink: 0; font-weight: 700; }
.recomendacao dd { min-width: 0; color: var(--suave); }
.recomendacao .botao--ouro { margin-top: 16px; }
.botao--contorno { margin-top: 8px; border: 1px solid var(--b70); background: var(--fundo); box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
.botao--contorno:hover { background: var(--primaria); color: var(--primaria-texto); }
.botao--contorno .icone { margin-right: 6px; }
.quiz__subtitulo { margin-top: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.alternativas { margin-top: 8px; }
.alternativas > * + * { margin-top: 8px; }
.alternativa { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--b60); border-radius: 16px; background: var(--s30); text-align: left; transition: border-color .15s; }
.alternativa:hover { border-color: var(--p50); }
.alternativa img { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; object-fit: cover; }
.alternativa > div { min-width: 0; }
.alternativa p:first-child { font-size: 13px; font-weight: 700; }
.alternativa p:last-child { font-size: 11px; font-weight: 600; color: var(--suave); }
.quiz__refazer { margin: 20px auto 0; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--suave); transition: color .15s; }
.quiz__refazer:hover { color: var(--primaria); }
.quiz__refazer .icone { width: 12px; height: 12px; }
.quiz__catalogo { max-width: 20rem; margin-top: 24px; }

/* ---------- Avisos (sem conexão, nova versão) ---------- */

.aviso-offline { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; justify-content: center; padding: 8px 12px 0; pointer-events: none; }
.aviso-offline div, .aviso-versao > div {
  display: flex; align-items: center; pointer-events: auto;
  border: 1px solid var(--b70); background: color-mix(in oklab, var(--fundo) 95%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.aviso-offline div { gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--suave); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); }
.aviso-offline .icone { width: 14px; height: 14px; color: var(--primaria); }
.aviso-versao { position: fixed; inset: auto 0 16px; z-index: 60; display: flex; justify-content: center; padding: 0 16px; }
.aviso-versao > div { width: 100%; max-width: 24rem; gap: 12px; padding: 12px 16px; border-color: var(--p40); border-radius: 16px; box-shadow: var(--sombra-xl); }
.aviso-versao .icone { width: 16px; height: 16px; color: var(--primaria); }
.aviso-versao p { flex: 1; font-size: 12px; line-height: 16px; color: var(--suave); }
.aviso-versao strong { display: block; font-weight: 600; color: var(--texto); }
.aviso-versao button { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; color: var(--primaria-texto); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }

/* ---------- Animações ---------- */

@keyframes pulsar { 50% { opacity: .5; } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes entrar { from { opacity: 0; transform: translateX(8px); } }
@keyframes janela { from { opacity: 0; transform: scale(.95); } }
@keyframes gaveta { from { transform: translateY(100%); } }

/* ==========================================================================
   TEMAS DE DATAS COMEMORATIVAS (classe no <html>: tema-outubro-rosa, ...)
   ========================================================================== */

.marca__edicao { display: none; }
[class*="tema-"] .marca__edicao { display: block; font-size: 9px; font-weight: 800; line-height: 1.2; }
[class*="tema-"] .card__marca { position: absolute; right: 10px; bottom: 10px; z-index: 30; pointer-events: none; line-height: 1; }

/* Outubro Rosa */
.tema-outubro-rosa .topo { background-image: linear-gradient(110deg, #a8477612, #0000 52%, #e58db50a); }
.tema-outubro-rosa .marca__nome { background-image: linear-gradient(115deg, #f6cadc, #e58db5, #b85b8b); }
.tema-outubro-rosa .marca__logo img { filter: brightness(0) saturate(100%) invert(79%) sepia(19%) saturate(1057%) hue-rotate(291deg) brightness(98%) contrast(91%); }
.tema-outubro-rosa .marca__edicao { color: #e58db5; font-weight: 700; line-height: inherit; letter-spacing: .13em; }
.tema-outubro-rosa .endereco .icone, .tema-outubro-rosa .spec .icone { color: #e58db5; }
.tema-outubro-rosa .card { border-color: #e58db57a; box-shadow: 0 8px 24px -18px #e58db580; }
.tema-outubro-rosa .card:hover { border-color: #e58db5; box-shadow: 0 8px 26px -16px #e58db58c; }
.tema-outubro-rosa .categoria[data-active=true] { color: #21101b; background: #e58db5; border-color: #e58db5; }
.tema-outubro-rosa .categoria[data-active=false]:hover { border-color: #e58db5; }
.tema-outubro-rosa .busca__campo:focus { border-color: #e58db5; box-shadow: 0 0 0 2px #a8477633; }
.tema-outubro-rosa .card__selo { color: #21101b; background-image: linear-gradient(115deg, #f6cadc, #a84776); }
.tema-outubro-rosa .finder .ouro, .tema-outubro-rosa .card .botao { color: #21101b; background-image: linear-gradient(115deg, #f6cadc, #e58db5, #a84776); box-shadow: 0 4px 12px #a8477630; }
.tema-outubro-rosa .precos { background: linear-gradient(135deg, #a847761f, #f6cadc06); border-color: #e58db58c; }
.tema-outubro-rosa .precos strong, .tema-outubro-rosa .card__categoria { color: #f6cadc; }
.tema-outubro-rosa .card__categoria { border: 1px solid #e58db547; }
.tema-outubro-rosa .cor[aria-pressed=true] { background-color: #e58db51a; border-color: #e58db5; }
.tema-outubro-rosa .card__marca { display: flex; width: 33px; height: 33px; right: 11px; align-items: center; justify-content: center; border: 1px solid #f6cadca6; border-radius: 11px; background: #120c12ba; font-size: 23px; box-shadow: 0 2px 10px #0003; }
.tema-outubro-rosa .card__marca::before { content: "🎀"; }
@media (max-width: 640px) { .tema-outubro-rosa .card__marca { width: 29px; height: 29px; right: 9px; bottom: 9px; font-size: 20px; } }

/* Halloween */
.tema-halloween .conteudo { position: relative; z-index: 1; isolation: isolate; background-image: radial-gradient(170px 280px at 0 44%, #42235121, #0000 80%), radial-gradient(170px 280px at 100% 65%, #6331311a, #0000 80%); }
.tema-halloween .rodape { position: relative; z-index: 1; }
.tema-halloween .conteudo::before, .tema-halloween .conteudo::after {
  content: ""; position: absolute; z-index: -1; width: 38px; height: 48px; opacity: .38; pointer-events: none;
  border-radius: 48% 48% 10% 10%; box-shadow: 0 0 25px #bea0dc24;
  clip-path: polygon(0 12%, 8% 5%, 24% 0, 76% 0, 92% 5%, 100% 12%, 100% 100%, 78% 87%, 55% 100%, 31% 87%, 0 100%);
  background: radial-gradient(circle at 36% 40%, #1a1420 0 2px, #0000 2.5px), radial-gradient(circle at 64% 40%, #1a1420 0 2px, #0000 2.5px), radial-gradient(at 50% 65%, #fffc, #cdc3dc7a);
}
.tema-halloween .conteudo::before { top: 180px; left: -53px; transform: rotate(-12deg); }
.tema-halloween .conteudo::after { top: 490px; right: -51px; transform: rotate(12deg) scale(.85); }
.tema-halloween .marca__nome { background-image: linear-gradient(115deg, #e99443, #c66b32 62%, #f0ad62); }
.tema-halloween .marca__logo img { filter: sepia(.35) saturate(1.65) hue-rotate(-24deg) brightness(1.03); }
.tema-halloween .marca__edicao { margin-top: 2px; color: #df873e; font-weight: 700; letter-spacing: .13em; }
.tema-halloween .endereco .icone, .tema-halloween .spec .icone { color: #df873e; }
.tema-halloween .ouro { transition: box-shadow .25s, filter .25s; box-shadow: 0 0 12px -6px #c76a2559; }
.tema-halloween .ouro:hover { filter: brightness(1.04); box-shadow: 0 0 18px -5px #c76a2580; }
.tema-halloween .card { border-color: #c0683861; transition: border-color .25s, box-shadow .25s; box-shadow: 0 0 0 1px #421f4d1f, 0 8px 26px -18px #994b3057; }
.tema-halloween .card:hover { border-color: #c76a2585; box-shadow: 0 8px 24px -14px #54266573, 0 0 17px -7px #c76a258c; }
.tema-halloween .card__selo { color: #170f13; background-image: linear-gradient(120deg, #bd6836, #8c4b39); box-shadow: 0 0 10px -4px #c76a257a; }
.tema-halloween .card__selo::before { content: "🎃 "; }
.tema-halloween .categoria[data-active=true] { color: #100d10; background: #bd6b35; border-color: #dc884d; box-shadow: 0 4px 12px -6px #c76a2580; }
.tema-halloween .categoria[data-active=false]:hover { border-color: #c76a256b; box-shadow: 0 0 10px -6px #c76a2566; }
.tema-halloween .busca__campo:focus { border-color: #bc754c; box-shadow: 0 0 0 2px #c76a251f; }
.tema-halloween .precos { background: linear-gradient(135deg, #b85c2b1f, #31192c21); border-color: #ca703694; }
.tema-halloween .precos strong { color: #e9954e; }
.tema-halloween .card .botao, .tema-halloween .finder .ouro { color: #180f0d; background-image: linear-gradient(115deg, #e18b3e, #c56b2e 55%, #a9552a); box-shadow: 0 4px 16px #ae4e1f33; }
.tema-halloween .card .botao:hover, .tema-halloween .finder .ouro:hover { background-image: linear-gradient(115deg, #eda15a, #d67835 55%, #b45d30); }
.tema-halloween .card .botao:hover { box-shadow: 0 5px 20px #ae4e1f4d; }
@media (max-width: 640px) { .tema-halloween .conteudo::before, .tema-halloween .conteudo::after { display: none; } }

.halloween-cenario { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.halloween-web-corner { position: absolute; top: 0; width: clamp(120px, 13vw, 205px); height: clamp(120px, 13vw, 205px); color: #d3c7da61; filter: drop-shadow(0 0 5px #a06faf3b); }
.halloween-web-corner:first-child { left: 0; }
.halloween-web-mirror { right: 0; transform: scaleX(-1); }
.halloween-morcego { position: absolute; }
.halloween-morcego:nth-child(3) { right: 12%; top: 96px; width: 36px; height: 16px; }
.halloween-morcego:nth-child(4) { left: 7%; top: 42%; width: 28px; height: 12px; display: none; }
.halloween-morcego:nth-child(5) { right: 5%; bottom: 14%; width: 32px; height: 14px; display: none; }
@media (min-width: 640px) { .halloween-morcego:nth-child(4) { display: block; } }
@media (min-width: 768px) { .halloween-morcego:nth-child(5) { display: block; } }
.halloween-web-scroll { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .85s, visibility .85s; }
.halloween-web-scroll.is-visible { opacity: 1; visibility: visible; }
.halloween-web-scroll-art { position: absolute; top: 11%; left: -34px; width: clamp(115px, 11vw, 160px); height: clamp(115px, 11vw, 160px); color: #dacfe25c; filter: drop-shadow(0 0 7px #884e9d47); transform-origin: 0 0; animation: halloween-web-breathe 6.8s ease-in-out infinite alternate; }
.halloween-web-scroll.on-right .halloween-web-scroll-art { left: auto; right: -34px; transform-origin: 100% 0; animation-name: halloween-web-breathe-right; }
.halloween-web-bat { position: absolute; top: calc(11% + 58px); left: clamp(54px, 7vw, 100px); width: 24px; height: 12px; color: #644171b8; opacity: .42; transform: rotate(-13deg); }
.halloween-web-scroll.on-right .halloween-web-bat { left: auto; right: clamp(54px, 7vw, 100px); transform: rotate(13deg); }
.halloween-ghost-overlay { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .26s, visibility .26s; }
.halloween-ghost-overlay.is-visible { opacity: 1; visibility: visible; }
.halloween-floating-ghost {
  position: absolute; bottom: 23%; right: clamp(18px, 4vw, 70px); z-index: 1; width: 52px; height: 62px; opacity: .92; pointer-events: none;
  border-radius: 49% 49% 5% 5% / 39% 39% 5% 5%; background: linear-gradient(145deg, #fff 38%, #e8e6eb 100%);
  box-shadow: 0 0 18px #ffffff38; filter: drop-shadow(0 0 9px #a475bc59); transition: right .26s, left .26s;
  clip-path: polygon(0 28%, 3% 18%, 10% 9%, 22% 3%, 38% 0, 62% 0, 78% 3%, 90% 9%, 97% 18%, 100% 28%, 100% 92%, 98% 96%, 90% 99%, 78% 100%, 65% 98%, 52% 93%, 40% 89%, 27% 93%, 14% 99%, 4% 98%, 0 94%);
}
.halloween-ghost-overlay.on-left .halloween-floating-ghost { bottom: 32%; left: clamp(18px, 4vw, 70px); right: auto; }
.halloween-floating-ghost span { position: absolute; inset: 0; background: radial-gradient(circle at 35% 38%, #17151a 0 2.6px, #0000 3px), radial-gradient(circle at 65% 38%, #17151a 0 2.6px, #0000 3px), radial-gradient(at 20% 91%, #9b9ba073 0 23%, #0000 24%); }
.halloween-floating-ghost span::after { content: ""; position: absolute; top: 46%; left: 39%; width: 22%; height: 13%; border-bottom: 2.5px solid #17151a; border-radius: 0 0 50% 50%; }
@keyframes halloween-web-breathe { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(3deg) translateY(5px); } }
@keyframes halloween-web-breathe-right { from { transform: scaleX(-1) rotate(-2deg) translateY(0); } to { transform: scaleX(-1) rotate(3deg) translateY(5px); } }
@media (max-width: 640px) {
  .halloween-web-corner { width: 64px; height: 64px; opacity: .35; }
  .halloween-web-scroll-art { top: 13%; left: -29px; width: 85px; height: 85px; color: #dacfe24d; }
  .halloween-web-scroll.on-right .halloween-web-scroll-art { right: -29px; }
  .halloween-web-bat { top: calc(13% + 32px); left: 48px; width: 17px; height: 9px; opacity: .3; }
  .halloween-web-scroll.on-right .halloween-web-bat { right: 48px; }
  .halloween-floating-ghost { bottom: 20%; right: 14px; width: 38px; height: 46px; opacity: .9; }
  .halloween-ghost-overlay.on-left .halloween-floating-ghost { bottom: 34%; left: 14px; }
}

/* Black Friday */
.tema-black-friday .topo { background-image: linear-gradient(115deg, #d9ac550e, #0000 55%, #d9ac5509); }
.tema-black-friday .marca__nome { background-image: linear-gradient(115deg, #fff0c7 0%, #d7ae65 45%, #f5d994 75%, #b98539 100%); }
.tema-black-friday .marca__logo img { filter: drop-shadow(0 0 5px #d9ac551f) brightness(1.08) saturate(.8); }
.tema-black-friday .marca__edicao { color: #f9e2ad; font-size: 10px; letter-spacing: .18em; text-shadow: 0 0 12px #d9ac5533; }
.tema-black-friday .endereco .icone { color: #ffe0a0; }
.tema-black-friday .spec .icone { color: #f9e2ad; }
.tema-black-friday .card { border-color: #d9ac5559; box-shadow: 0 8px 24px -18px #d9ac554d; }
.tema-black-friday .card:hover { border-color: #ffe0a0b8; box-shadow: 0 8px 28px -16px #d9ac5566; }
.tema-black-friday .card__categoria { color: #ffe0a0; border: 1px solid #d9ac5559; }
.tema-black-friday .card__selo { color: #1c160e; background: linear-gradient(110deg, #f9e2ad, #c99b4d); border-color: #ffe0a08c; }
.tema-black-friday .cor[aria-pressed=true] { background-color: #d9ac551c; border-color: #e7bf75; }
.tema-black-friday .cor[aria-pressed=true]:focus-visible { outline-color: #e7bf75; }
.tema-black-friday .categoria[data-active=true] { color: #18120a; background: linear-gradient(110deg, #ffe0a0, #c28b39); border-color: #d9ac55; }
.tema-black-friday .categoria[data-active=false]:hover { border-color: #d9ac55; }
.tema-black-friday .busca__campo:focus { border-color: #d9ac55; box-shadow: 0 0 0 2px #d9ac5526; }
.tema-black-friday .precos { background: linear-gradient(135deg, #d9ac551f, #d9ac5504); border-color: #d9ac557a; }
.tema-black-friday .precos strong { color: #ffe0a0; }
.tema-black-friday .finder .ouro, .tema-black-friday .card .botao { color: #17120b; background-image: linear-gradient(110deg, #ffe0a0, #d9ac55 55%, #a8732b); box-shadow: 0 4px 12px #c4903e29; }
.tema-black-friday .card__marca { display: block; padding: 7px 9px; border: 1px solid #f9e2adb8; border-radius: 7px; background: linear-gradient(115deg, #12110ff5, #302413f5); color: #f9e2ad; font-size: 9px; font-weight: 900; letter-spacing: .075em; box-shadow: 0 3px 11px #00000040, inset 0 1px #f9e2ad17; }
.tema-black-friday .card__marca::before { content: "BLACK FRIDAY"; }
@media (max-width: 640px) {
  .tema-black-friday .marca__edicao { font-size: 9px; }
  .tema-black-friday .card__marca { padding: 6px 8px; font-size: 8px; }
}

/* Natal */
.tema-natal .topo { background-image: linear-gradient(105deg, #153b2c38, #0d111014 53%, #531c221a); border-bottom-color: #c6a66b30; }
.tema-natal .marca__nome { background-image: linear-gradient(110deg, #f8e7b7, #b98c47 55%, #ead09a); }
.tema-natal .marca__logo img { filter: sepia(.7) saturate(.7) hue-rotate(347deg) brightness(.89) contrast(1.1); }
.tema-natal .marca__edicao { color: #c6a66b; letter-spacing: .23em; }
.tema-natal .endereco .icone, .tema-natal .spec .icone { color: #c6a66b; }
.tema-natal .card__categoria { color: #dfc58f; }
.tema-natal .card { border-color: #c6a66b4a; box-shadow: 0 7px 24px -18px #000000ad, 0 0 0 1px #153b2c14; }
.tema-natal .card:hover { border-color: #c6a66ba1; box-shadow: 0 10px 26px -17px #153b2c66; }
.tema-natal .cor[aria-pressed=true] { background: #153b2c3b; border-color: #c6a66bcc; }
.tema-natal .precos { background: linear-gradient(125deg, #153b2c2b, #c6a66b0e); border-color: #c6a66b66; }
.tema-natal .precos strong { color: #e6c994; }
.tema-natal .categoria[data-active=true] { color: #f4ede1; background: linear-gradient(115deg, #94373a, #76252c); border-color: #a64c4c; box-shadow: 0 3px 11px -7px #852d328c; }
.tema-natal .categoria[data-active=false]:hover, .tema-natal .busca__campo:focus { border-color: #c6a66ba6; }
.tema-natal .card__selo { color: #fff5e9; background: linear-gradient(110deg, #923438, #72252b); }
.tema-natal .finder .ouro, .tema-natal .card .botao { color: #17251d; background-image: linear-gradient(110deg, #ead4a2, #c6a66b 56%, #a17b42); }
.tema-natal .card__marca { display: grid; width: 31px; height: 34px; place-items: center; border: 1px solid #c6a66b9e; border-radius: 10px; background: linear-gradient(145deg, #153b2cf5, #3f2321f0); color: #f2dbab; font-size: 20px; font-weight: 900; box-shadow: 0 2px 9px #00000042; }
.tema-natal .card__marca::before { content: "🎄"; }
@media (max-width: 640px) { .tema-natal .card__marca { width: 29px; height: 31px; font-size: 18px; } }

.natal-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.natal-ambient::before, .natal-ambient::after { content: ""; position: absolute; top: 0; width: 130px; height: 130px; opacity: .25; background: radial-gradient(at 0 0, #2a6947a6, #0000 70%); }
.natal-ambient::before { left: 0; }
.natal-ambient::after { right: 0; transform: scaleX(-1); }
.natal-snow { position: absolute; top: -25px; left: var(--snow-x); font-size: var(--snow-size); font-weight: 400; color: #fffaf0; opacity: 0; text-shadow: 0 0 3px #ffffff26; animation: natal-snowfall var(--snow-duration) linear var(--snow-delay) infinite; }
.natal-sparkle { position: fixed; top: 42%; right: 4%; z-index: 35; font-size: 19px; color: #fff3dd; text-shadow: 0 0 7px #ffffff52; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .45s, transform .45s; }
.natal-sparkle.is-visible { opacity: .4; transform: translateY(0); }
.natal-sparkle.on-left { top: 55%; left: 4%; right: auto; }
@keyframes natal-snowfall { 0% { opacity: 0; transform: translateY(-10px); } 12% { opacity: .26; } 85% { opacity: .26; } to { opacity: 0; transform: translate(18px, 105vh); } }
@media (max-width: 640px) {
  .natal-snow:nth-child(n + 9) { display: none; }
  .natal-sparkle { right: 3%; font-size: 16px; }
  .natal-sparkle.on-left { left: 3%; }
}

/* Réveillon */
.tema-ano-novo .topo { background-image: linear-gradient(112deg, #b68a461f, #080a0d1a 49%, #e0c38c14); border-color: #cfb2793d; box-shadow: 0 1px 22px #c59a560e; }
.tema-ano-novo .marca__nome { background-image: linear-gradient(105deg, #f6e5ba, #c59b59 52%, #f1ddb0); }
.tema-ano-novo .marca__logo img { filter: sepia(.52) saturate(.78) brightness(.9) contrast(1.08); }
.tema-ano-novo .marca__edicao { color: #e4cc99; line-height: 1.3; letter-spacing: .22em; text-shadow: 0 0 12px #e9c78438; }
.tema-ano-novo .card { border-color: #c6a0606b; transition: border-color .3s, box-shadow .3s; box-shadow: 0 0 0 1px #c19a5914, 0 12px 30px -24px #e8be6e38; }
.tema-ano-novo .card:hover { border-color: #eed49ab3; box-shadow: 0 0 0 1px #e6c17a30, 0 9px 28px -15px #dfb56938; }
.tema-ano-novo .card__midia::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #ebc8871c; pointer-events: none; }
.tema-ano-novo .categoria[data-active=true] { color: #15130f; background: linear-gradient(115deg, #f3dfae, #ba904e); border-color: #d7b777; }
.tema-ano-novo .card__selo { color: #16130e; background: linear-gradient(115deg, #f0dda9, #b78d4a); }
.tema-ano-novo .card__categoria, .tema-ano-novo .spec .icone, .tema-ano-novo .endereco .icone { color: #dfbd7c; }
.tema-ano-novo .cor[aria-pressed=true] { background: #d8b77814; border-color: #d8b778; }
.tema-ano-novo .precos { background: linear-gradient(130deg, #d8b57217, #12121566); border-color: #cba8697a; }
.tema-ano-novo .precos strong { color: #f1d29a; }
.tema-ano-novo .finder .ouro, .tema-ano-novo .card .botao { color: #12100d; background-image: linear-gradient(110deg, #f2ddaa, #c39b5a 58%, #9c753e); }

.ano-novo-fireworks { position: fixed; inset: 0; z-index: 35; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .55s, visibility .55s; }
.ano-novo-fireworks.is-visible { opacity: 1; visibility: visible; }
.ano-novo-burst { position: absolute; top: 30%; right: 7%; width: 1px; height: 1px; filter: drop-shadow(0 0 5px #efc87c8c); }
.ano-novo-burst-secondary { top: 67%; right: 17%; opacity: .7; transform: scale(.58); }
.ano-novo-fireworks.on-left .ano-novo-burst { top: 61%; left: 7%; right: auto; }
.ano-novo-fireworks.on-left .ano-novo-burst-secondary { top: 31%; left: 17%; }
.ano-novo-burst i { position: absolute; top: 0; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #f8e5b7; box-shadow: 0 0 8px 2px #e0b5656b; opacity: 0; transform: rotate(var(--spark-angle)) translateY(0); animation: ano-novo-spark 1.8s cubic-bezier(.17, .55, .32, 1) var(--spark-delay) both; }
.ano-novo-burst i:nth-of-type(3n) { width: 2px; height: 7px; border-radius: 6px; background: linear-gradient(#fff7e4, #b78b4b); }
.ano-novo-burst i:nth-of-type(4n) { background: #fff9e7; box-shadow: 0 0 10px 3px #ffeab980; }
.ano-novo-burst i::after { content: ""; position: absolute; top: 5px; left: 50%; width: 1px; height: 15px; border-radius: 3px; opacity: .75; background: linear-gradient(#fff7dcb3, #e0b26552 48%, #0000); transform: translate(-50%); }
.ano-novo-burst i:nth-of-type(3n)::after { height: 20px; opacity: .6; }
.ano-novo-burst-core { position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff3d4; box-shadow: 0 0 18px 6px #e4b66380; opacity: 0; animation: ano-novo-core 1.4s ease-out both; }
.ano-novo-burst-core::before { content: ""; position: absolute; inset: -45px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #f5d19033 0%, #dda75814 29%, #0000 70%); transform: scale(.35); animation: ano-novo-halo 1.8s ease-out both; }
.ano-novo-burst-secondary i, .ano-novo-burst-secondary .ano-novo-burst-core, .ano-novo-burst-secondary .ano-novo-burst-core::before { animation-delay: .4s; }
@keyframes ano-novo-spark { 0% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(0) scale(.4); } 15% { opacity: 1; } 55% { opacity: .85; } to { opacity: 0; transform: rotate(var(--spark-angle)) translateY(calc(-1 * var(--spark-distance))) scale(.35); } }
@keyframes ano-novo-core { 0% { opacity: 0; transform: scale(.25); } 20% { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.5); } }
@keyframes ano-novo-halo { 0% { opacity: 0; transform: scale(.25); } 20% { opacity: .7; transform: scale(.7); } 55% { opacity: .45; transform: scale(1.1); } to { opacity: 0; transform: scale(1.5); } }
@media (max-width: 640px) {
  .ano-novo-burst { top: 33%; right: 9%; transform: scale(.68); }
  .ano-novo-burst-secondary { top: 72%; right: 17%; transform: scale(.38); }
  .ano-novo-fireworks.on-left .ano-novo-burst { top: 63%; left: 9%; }
  .ano-novo-fireworks.on-left .ano-novo-burst-secondary { top: 29%; left: 17%; }
}

@media (prefers-reduced-motion: reduce) {
  .natal-snow, .ano-novo-fireworks { display: none; }
  .natal-sparkle, .halloween-web-scroll, .halloween-ghost-overlay, .tema-ano-novo .card { transition: none; }
  .halloween-web-scroll-art { animation: none; }
}