/* ===== Tema de Natal =====
 *
 * So vale com data-tema="natal" no <html>, que so existe de 1 a 25 de
 * dezembro (datas e a troca automatica no layouts/layout.html). As cores
 * (--primary) ficam no layout, como as dos outros temas.
 *
 * O cenario do banner (aurora, lua da logo, treno, vila, guirlanda com
 * enfeites, neve) e montado pelo scripts/natal.js so neste tema. Aqui ficam
 * o visual dele, a faixa do evento, o podio de presentes e os gorros.
 *
 * Arquivo separado pelo limite de 64 KiB da CentralCart.
 */

/* ---------- Opcoes do painel de ajustes ----------
   A cor do Halloween so aparece no painel durante o evento dele (data-evento
   no html, posto pelo layout). A do Natal fica sempre (o layout poe "natal"
   na lista de cores aceitas o ano todo). */
.ajustes-opcao[data-ajuste-tema='halloween'] {
  display: none;
}

/* Natal trancado ate 1/12 (data-trancados no html, posto pelo layout): a
   opcao aparece apagada, com o cadeado e a data no lugar do visto, e nao
   aplica (o natal.js avisa quando clicam). */
.ajustes-trancado {
  display: none;
}

:root[data-trancados~='natal'] .ajustes-opcao[data-ajuste-tema='natal'] :is(.ajustes-amostra, .ajustes-nome) {
  opacity: 0.45;
}

:root[data-trancados~='natal'] .ajustes-opcao[data-ajuste-tema='natal'] .ajustes-visto {
  display: none;
}

:root[data-trancados~='natal'] .ajustes-opcao[data-ajuste-tema='natal'] .ajustes-trancado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 2px 7px 2px 6px;
  border: 1px solid rgb(var(--foreground) / 0.14);
  border-radius: 999px;
  color: rgb(var(--foreground) / 0.7);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.ajustes-trancado svg {
  width: 12px;
  height: 12px;
}

:root[data-evento='halloween'] .ajustes-opcao[data-ajuste-tema='halloween'] {
  display: flex;
}

/* A amostra do painel de cores (gorro do Papai Noel) fica no
   styles/cabecalho.css, junto com as dos outros temas. */

/* Selo do banner e faixa so durante o evento: quem aplica o tema de Natal
   fora de 1 a 25 de dezembro ganha o visual, sem o aviso de ofertas. */
:root:not([data-tema='natal']) .nt-selo,
:root:not([data-evento='natal']) .nt-selo {
  display: none !important;
}

/* ---------- Faixa do evento (acima do cabecalho) ----------
   Vermelho do tema com flocos de neve bem fracos. A esquerda a etiqueta
   escura com o nome do evento e o recado; a direita a contagem em blocos
   escuros e o botao. Mesmo molde da faixa do Halloween. */
.nt-faixa {
  display: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='44'%3E%3Cg transform='translate(16 12) rotate(10) scale(0.8)' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4M-2 -6.4L0 -4.4L2 -6.4M-2 6.4L0 4.4L2 6.4M-6.5 -1.5L-3.8 -2.2L-4.5 -4.9M6.5 1.5L3.8 2.2L4.5 4.9M-6.5 1.5L-3.8 2.2L-4.5 4.9M6.5 -1.5L3.8 -2.2L4.5 -4.9'/%3E%3C/g%3E%3Cg transform='translate(70 30) rotate(-8) scale(1.05)' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4M-2 -6.4L0 -4.4L2 -6.4M-2 6.4L0 4.4L2 6.4M-6.5 -1.5L-3.8 -2.2L-4.5 -4.9M6.5 1.5L3.8 2.2L4.5 4.9M-6.5 1.5L-3.8 2.2L-4.5 4.9M6.5 -1.5L3.8 -2.2L4.5 -4.9'/%3E%3C/g%3E%3Cg transform='translate(122 10) rotate(20) scale(0.65)' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4M-2 -6.4L0 -4.4L2 -6.4M-2 6.4L0 4.4L2 6.4M-6.5 -1.5L-3.8 -2.2L-4.5 -4.9M6.5 1.5L3.8 2.2L4.5 4.9M-6.5 1.5L-3.8 2.2L-4.5 4.9M6.5 -1.5L3.8 -2.2L4.5 -4.9'/%3E%3C/g%3E%3Ccircle cx='44' cy='34' r='1.2' fill='white' fill-opacity='.2'/%3E%3Ccircle cx='100' cy='20' r='1' fill='white' fill-opacity='.2'/%3E%3Ccircle cx='138' cy='36' r='1.3' fill='white' fill-opacity='.18'/%3E%3C/svg%3E") 0 50% / 150px 44px, hsl(var(--primary));
  color: #fff;
}

:root[data-tema='natal'][data-evento='natal'] .nt-faixa:not([hidden]) {
  display: block;
}

.nt-faixa-conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding-block: 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.nt-faixa-aviso,
.nt-faixa-tempo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.nt-faixa-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 9px 4px 7px;
  border-radius: 6px;
  background: #3a0710;
  color: #ffd7a8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nt-faixa-selo svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: #7be0a4;
}

.nt-faixa-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nt-faixa-rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.nt-relogio {
  display: flex;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.nt-relogio > span {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  min-width: 34px;
  padding: 3px 6px;
  border-radius: 5px;
  background: #3a0710;
  color: #ffb3b9;
  font-size: 11px;
  font-weight: 700;
}

.nt-relogio b {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.nt-faixa-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 10px;
  border-radius: 6px;
  background: #3a0710;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 0.15s ease;
}

.nt-faixa-botao svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.15s ease;
}

@media (hover: hover) {
  .nt-faixa-botao:hover { background: #55101c; }
  .nt-faixa-botao:hover svg { transform: translateX(2px); }
}

.nt-faixa-botao:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .nt-faixa-rotulo { display: none; }
}

@media (max-width: 767px) {
  .nt-faixa-texto { display: none; }
}

@media (max-width: 639px) {
  .nt-faixa-conteudo { gap: 6px 10px; }
  .nt-faixa-tempo { gap: 6px; }
  .nt-relogio > span { min-width: 0; padding: 3px 5px; }
  .nt-faixa-botao { padding: 5px 7px; }
  .nt-faixa-botao span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .nt-faixa-selo { gap: 5px; padding: 4px 7px 4px 6px; letter-spacing: 0.06em; }
  .nt-relogio { gap: 3px; }
  .nt-relogio > span { padding: 3px 4px; }
}

/* ---------- Fundo da pagina ----------
   O mesmo fundo dos outros temas (tres camadas soltas que andam devagar com
   a rolagem e acendem na cor do tema perto do mouse), com flocos de neve,
   estrelas, arvorezinhas, presentes, bengalas, sinos, bolas de Natal e
   azevinho no lugar das marcas de mira. Semente fixa. */
:root[data-tema='natal'] .grid-background {
  --marcas:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg transform='translate(107.9 91.9) rotate(-7) scale(1.08)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6.5 -1.5H6.5V7.5H-6.5ZM-7.5 -4.5H7.5V-1.5H-7.5ZM0 -4.5V7.5M0 -4.5C-1.5 -8.5 -6 -8.5 -4.8 -5.6M0 -4.5C1.5 -8.5 6 -8.5 4.8 -5.6'/%3E%3C/g%3E%3Cg transform='translate(49.7 264.5) rotate(14) scale(0.82)' fill='none' stroke='white' stroke-opacity='0.7' stroke-width='1.74' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4M-2 -6.4L0 -4.4L2 -6.4M-2 6.4L0 4.4L2 6.4M-6.5 -1.5L-3.8 -2.2L-4.5 -4.9M6.5 1.5L3.8 2.2L4.5 4.9M-6.5 1.5L-3.8 2.2L-4.5 4.9M6.5 -1.5L3.8 -2.2L4.5 -4.9'/%3E%3C/g%3E%3Cg transform='translate(327.5 237.8) rotate(14) scale(1.06)' fill='white' fill-opacity='0.7' stroke='none'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(16 43.2) rotate(-12) scale(0.82)' fill='none' stroke='white' stroke-opacity='0.9' stroke-width='1.74' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-1.5 8.5V-3A4 4 0 0 1 6.5 -3V-1.5M-1.5 4.5L1 2.5M-1.5 0L1 -2'/%3E%3C/g%3E%3Cg transform='translate(281.3 31.2) rotate(-11) scale(0.85)' fill='white' fill-opacity='0.6' stroke='none'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(190.8 279.2) rotate(4) scale(0.92)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.56' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4M-2 -6.4L0 -4.4L2 -6.4M-2 6.4L0 4.4L2 6.4M-6.5 -1.5L-3.8 -2.2L-4.5 -4.9M6.5 1.5L3.8 2.2L4.5 4.9M-6.5 1.5L-3.8 2.2L-4.5 4.9M6.5 -1.5L3.8 -2.2L4.5 -4.9'/%3E%3C/g%3E%3Cg transform='translate(207.5 100.1) rotate(14) scale(0.97)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.49' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6.5 -1.5H6.5V7.5H-6.5ZM-7.5 -4.5H7.5V-1.5H-7.5ZM0 -4.5V7.5M0 -4.5C-1.5 -8.5 -6 -8.5 -4.8 -5.6M0 -4.5C1.5 -8.5 6 -8.5 4.8 -5.6'/%3E%3C/g%3E%3Ccircle fill='white' fill-opacity='0.6' cx='243.4' cy='240.7' r='1.4'/%3E%3Ccircle fill='white' fill-opacity='0.9' cx='135.3' cy='317.4' r='0.9'/%3E%3Ccircle fill='white' fill-opacity='0.7' cx='298.1' cy='323.6' r='1.3'/%3E%3C/svg%3E") 0 0 / 360px 360px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cg transform='translate(14.4 308.9) rotate(6) scale(1.01)' fill='none' stroke='white' stroke-opacity='0.9' stroke-width='1.44' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 4C-6 -3 -4 -6.5 0 -6.5C4 -6.5 6 -3 6 4L7.5 5.5H-7.5ZM-2 5.5A2 2 0 0 0 2 5.5M0 -6.5V-8.5'/%3E%3C/g%3E%3Cg transform='translate(50.1 449) rotate(-3) scale(0.87)' fill='white' fill-opacity='0.9' stroke='none'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(350.4 424.2) rotate(-6) scale(0.72)' fill='none' stroke='white' stroke-opacity='0.6' stroke-width='1.96' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -3A6 6 0 1 1 -0.01 -3ZM-2 -3V-5.5H2V-3M0 -5.5V-7.5'/%3E%3C/g%3E%3Cg transform='translate(402.2 200.8) rotate(-9) scale(1.01)' fill='white' fill-opacity='0.5' stroke='none'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(263 279.1) rotate(18) scale(0.75)' fill='none' stroke='white' stroke-opacity='0.9' stroke-width='1.88' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -7.5L2.2 -2.6L7.4 -2.2L3.5 1.3L4.6 6.4L0 3.8L-4.6 6.4L-3.5 1.3L-7.4 -2.2L-2.2 -2.6Z'/%3E%3C/g%3E%3Cg transform='translate(54.3 34.3) rotate(-11) scale(0.93)' fill='none' stroke='white' stroke-opacity='0.7' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0Q-4 -5.5 -9.5 -2Q-6 -1 -6.5 2Q-3 0 0 0ZM0 0Q4 -5.5 9.5 -2Q6 -1 6.5 2Q3 0 0 0Z'/%3E%3Cg fill='white' fill-opacity='0.7' stroke='none'%3E%3Ccircle cx='-1.4' cy='1.6' r='1.5'/%3E%3Ccircle cx='1.4' cy='1.6' r='1.5'/%3E%3Ccircle cx='0' cy='-0.6' r='1.5'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(204.9 416) rotate(-5) scale(1.01)' fill='none' stroke='white' stroke-opacity='0.6' stroke-width='1.44' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4M-2 -6.4L0 -4.4L2 -6.4M-2 6.4L0 4.4L2 6.4M-6.5 -1.5L-3.8 -2.2L-4.5 -4.9M6.5 1.5L3.8 2.2L4.5 4.9M-6.5 1.5L-3.8 2.2L-4.5 4.9M6.5 -1.5L3.8 -2.2L4.5 -4.9'/%3E%3C/g%3E%3Cg transform='translate(344 33.2) rotate(-10) scale(0.72)' fill='none' stroke='white' stroke-opacity='0.7' stroke-width='1.96' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 4C-6 -3 -4 -6.5 0 -6.5C4 -6.5 6 -3 6 4L7.5 5.5H-7.5ZM-2 5.5A2 2 0 0 0 2 5.5M0 -6.5V-8.5'/%3E%3C/g%3E%3Cg transform='translate(32.9 171.1) rotate(16) scale(1.09)' fill='none' stroke='white' stroke-opacity='1' stroke-width='1.34' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6.5 -1.5H6.5V7.5H-6.5ZM-7.5 -4.5H7.5V-1.5H-7.5ZM0 -4.5V7.5M0 -4.5C-1.5 -8.5 -6 -8.5 -4.8 -5.6M0 -4.5C1.5 -8.5 6 -8.5 4.8 -5.6'/%3E%3C/g%3E%3Cg transform='translate(452.7 303.2) rotate(-1) scale(0.74)' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='1.91' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4M-2 -6.4L0 -4.4L2 -6.4M-2 6.4L0 4.4L2 6.4M-6.5 -1.5L-3.8 -2.2L-4.5 -4.9M6.5 1.5L3.8 2.2L4.5 4.9M-6.5 1.5L-3.8 2.2L-4.5 4.9M6.5 -1.5L3.8 -2.2L4.5 -4.9'/%3E%3C/g%3E%3Ccircle fill='white' fill-opacity='0.5' cx='165.5' cy='266' r='0.9'/%3E%3Ccircle fill='white' fill-opacity='0.7' cx='108.2' cy='27.6' r='1.3'/%3E%3Ccircle fill='white' fill-opacity='0.6' cx='371.9' cy='72' r='0.9'/%3E%3Ccircle fill='white' fill-opacity='0.5' cx='416.2' cy='136.3' r='1.1'/%3E%3Ccircle fill='white' fill-opacity='0.7' cx='86.3' cy='102.5' r='0.9'/%3E%3C/svg%3E") 0 0 / 480px 480px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cg transform='translate(532.6 639) rotate(-8) scale(0.75)' fill='none' stroke='white' stroke-opacity='0.7' stroke-width='1.88' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-1.5 8.5V-3A4 4 0 0 1 6.5 -3V-1.5M-1.5 4.5L1 2.5M-1.5 0L1 -2'/%3E%3C/g%3E%3Cg transform='translate(99.9 243.7) rotate(17) scale(0.84)' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='1.70' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4M-2 -6.4L0 -4.4L2 -6.4M-2 6.4L0 4.4L2 6.4M-6.5 -1.5L-3.8 -2.2L-4.5 -4.9M6.5 1.5L3.8 2.2L4.5 4.9M-6.5 1.5L-3.8 2.2L-4.5 4.9M6.5 -1.5L3.8 -2.2L4.5 -4.9'/%3E%3C/g%3E%3Cg transform='translate(407.3 370.4) rotate(-9) scale(0.72)' fill='none' stroke='white' stroke-opacity='0.9' stroke-width='1.96' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4M-2 -6.4L0 -4.4L2 -6.4M-2 6.4L0 4.4L2 6.4M-6.5 -1.5L-3.8 -2.2L-4.5 -4.9M6.5 1.5L3.8 2.2L4.5 4.9M-6.5 1.5L-3.8 2.2L-4.5 4.9M6.5 -1.5L3.8 -2.2L4.5 -4.9'/%3E%3C/g%3E%3Cg transform='translate(560.1 332) rotate(-3) scale(0.87)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.64' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4M-2 -6.4L0 -4.4L2 -6.4M-2 6.4L0 4.4L2 6.4M-6.5 -1.5L-3.8 -2.2L-4.5 -4.9M6.5 1.5L3.8 2.2L4.5 4.9M-6.5 1.5L-3.8 2.2L-4.5 4.9M6.5 -1.5L3.8 -2.2L4.5 -4.9'/%3E%3C/g%3E%3Cg transform='translate(237.2 596.1) rotate(2) scale(1.03)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.41' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 4C-6 -3 -4 -6.5 0 -6.5C4 -6.5 6 -3 6 4L7.5 5.5H-7.5ZM-2 5.5A2 2 0 0 0 2 5.5M0 -6.5V-8.5'/%3E%3C/g%3E%3Cg transform='translate(376.5 559.4) rotate(-2) scale(0.80)' fill='none' stroke='white' stroke-opacity='0.6' stroke-width='1.77' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -3A6 6 0 1 1 -0.01 -3ZM-2 -3V-5.5H2V-3M0 -5.5V-7.5'/%3E%3C/g%3E%3Cg transform='translate(367.3 140.5) rotate(16) scale(0.91)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.58' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-1.5 8.5V-3A4 4 0 0 1 6.5 -3V-1.5M-1.5 4.5L1 2.5M-1.5 0L1 -2'/%3E%3C/g%3E%3Cg transform='translate(45.2 643) rotate(2) scale(0.77)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.84' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -7.5L2.2 -2.6L7.4 -2.2L3.5 1.3L4.6 6.4L0 3.8L-4.6 6.4L-3.5 1.3L-7.4 -2.2L-2.2 -2.6Z'/%3E%3C/g%3E%3Cg transform='translate(190.7 110.8) rotate(16) scale(0.75)' fill='white' fill-opacity='0.8' stroke='none'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(551 57.7) rotate(18) scale(0.86)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.66' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 4C-6 -3 -4 -6.5 0 -6.5C4 -6.5 6 -3 6 4L7.5 5.5H-7.5ZM-2 5.5A2 2 0 0 0 2 5.5M0 -6.5V-8.5'/%3E%3C/g%3E%3Cg transform='translate(50.2 405) rotate(-10) scale(1.07)' fill='white' fill-opacity='0.6' stroke='none'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(194 418.9) rotate(2) scale(0.74)' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='1.91' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-1.5 8.5V-3A4 4 0 0 1 6.5 -3V-1.5M-1.5 4.5L1 2.5M-1.5 0L1 -2'/%3E%3C/g%3E%3Cg transform='translate(698.2 589.4) rotate(4) scale(0.81)' fill='white' fill-opacity='0.6' stroke='none'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(333.4 688.6) rotate(4) scale(1.06)' fill='white' fill-opacity='0.9' stroke='none'%3E%3Cpath d='M0 -5L1.1 -1.1L5 0L1.1 1.1L0 5L-1.1 1.1L-5 0L-1.1 -1.1Z'/%3E%3C/g%3E%3Cg transform='translate(276.4 222.7) rotate(11) scale(0.91)' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='1.58' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -3A6 6 0 1 1 -0.01 -3ZM-2 -3V-5.5H2V-3M0 -5.5V-7.5'/%3E%3C/g%3E%3Cg transform='translate(588.8 505.6) rotate(-17) scale(0.79)' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='1.80' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -9L5.5 -2.5H2.8L7.5 4.5H-7.5L-2.8 -2.5H-5.5ZM0 4.5V8'/%3E%3C/g%3E%3Cg transform='translate(604.3 189.4) rotate(10) scale(0.80)' fill='none' stroke='white' stroke-opacity='0.7' stroke-width='1.77' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6 4C-6 -3 -4 -6.5 0 -6.5C4 -6.5 6 -3 6 4L7.5 5.5H-7.5ZM-2 5.5A2 2 0 0 0 2 5.5M0 -6.5V-8.5'/%3E%3C/g%3E%3Cg transform='translate(669.2 24.2) rotate(16) scale(0.88)' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1.63' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4M-2 -6.4L0 -4.4L2 -6.4M-2 6.4L0 4.4L2 6.4M-6.5 -1.5L-3.8 -2.2L-4.5 -4.9M6.5 1.5L3.8 2.2L4.5 4.9M-6.5 1.5L-3.8 2.2L-4.5 4.9M6.5 -1.5L3.8 -2.2L4.5 -4.9'/%3E%3C/g%3E%3Ccircle fill='white' fill-opacity='0.5' cx='399.7' cy='508.5' r='1.2'/%3E%3Ccircle fill='white' fill-opacity='0.8' cx='261.1' cy='711.4' r='1.1'/%3E%3Ccircle fill='white' fill-opacity='0.7' cx='668.1' cy='544.5' r='1'/%3E%3Ccircle fill='white' fill-opacity='0.6' cx='282.7' cy='440.2' r='0.9'/%3E%3Ccircle fill='white' fill-opacity='0.7' cx='274.1' cy='349.3' r='1.1'/%3E%3Ccircle fill='white' fill-opacity='0.6' cx='657.9' cy='524.9' r='0.9'/%3E%3Ccircle fill='white' fill-opacity='0.8' cx='401.9' cy='137.5' r='1.1'/%3E%3Ccircle fill='white' fill-opacity='0.8' cx='704.2' cy='385.6' r='1.3'/%3E%3C/svg%3E") 0 0 / 720px 720px;
}

/* ---------- Logo da PLF nevada ----------
   No Natal a logo do cabecalho, do rodape e do login fica no vermelho do
   tema com neve acumulada em cima (no alto da moldura, nos tracos, no
   ponto do meio e no fundo do miolo), e os dois cortes vazados. Usa o lugar
   da logo amarela, como o Halloween. */
:root[data-tema='natal'] .logo-tema-padrao { display: none; }

:root[data-tema='natal'] .logo-tema-amarelo {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cmask id='c'%3E%3Crect width='512' height='512' fill='white'/%3E%3Cpath d='M240 175V112H140A45 45 0 0 0 95 157V234H50 M272 337V400H372A45 45 0 0 0 417 355V278H462' fill='none' stroke='black' stroke-width='9' stroke-linejoin='round'/%3E%3C/mask%3E %3Cg mask='url(%23c)'%3E %3Cpath fill='%23dc2837' fill-rule='evenodd' d='M168 87H348A110 110 0 0 1 458 197V315A110 110 0 0 1 348 425H168A110 110 0 0 1 58 315V197A110 110 0 0 1 168 87Z M207 175H305A52 52 0 0 1 357 227V285A52 52 0 0 1 305 337H207A52 52 0 0 1 155 285V227A52 52 0 0 1 207 175Z'/%3E%3Cg fill='%23dc2837'%3E%3Crect x='243' y='63' width='26' height='30'/%3E%3Crect x='243' y='419' width='26' height='30'/%3E%3Crect x='33' y='243' width='30' height='26'/%3E%3Crect x='449' y='243' width='30' height='26'/%3E%3Crect x='233' y='233' width='46' height='46' rx='12'/%3E%3C/g%3E %3Cpath d='M77.9 133.9A110 110 0 0 1 168 87H348A110 110 0 0 1 438.1 133.9' fill='none' stroke='%23b9cbe2' stroke-width='30' stroke-linecap='round' transform='translate(0 6)'/%3E %3Cpath d='M77.9 133.9A110 110 0 0 1 168 87H348A110 110 0 0 1 438.1 133.9' fill='none' stroke='%23f6f9fd' stroke-width='30' stroke-linecap='round'/%3E %3Cg fill='%23f6f9fd'%3E %3Cpath d='M180 98v14a7 7 0 0 0 14 0v-14z'/%3E%3Cpath d='M300 98v9a6 6 0 0 0 12 0v-9z'/%3E%3Cpath d='M372 98v17a7 7 0 0 0 14 0v-17z'/%3E%3Cpath d='M100 112l-6 13a6 6 0 0 0 11 4l5-12z'/%3E %3Cellipse cx='256' cy='64' rx='17' ry='8'/%3E%3Cellipse cx='48' cy='243' rx='18' ry='7'/%3E%3Cellipse cx='464' cy='243' rx='18' ry='7'/%3E %3Cpath d='M233 245C233 230 279 230 279 245C270 240 262 243 256 240C250 243 242 240 233 245Z'/%3E %3Cpath d='M196 339Q256 314 316 339Z'/%3E %3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Banner: ceu ---------- */

/* Noite de inverno: azul quase preto no alto, clareando para o horizonte. As
   artes e o efeito dos outros temas saem de cena. */
:root[data-tema='natal'] .hero-stage {
  background:
    radial-gradient(ellipse 70% 60% at 74% 36%, rgb(52 98 150 / 0.55) 0%, transparent 70%),
    linear-gradient(180deg, #050d1c 0%, #0a1a33 30%, #12305a 66%, #1d4572 100%);
}

:root[data-tema='natal'] .hero-stage .fundo-tema,
:root[data-tema='natal'] .hero-stage .grid-background,
:root[data-tema='natal'] .hero-stage .hero-spotlight,
:root[data-tema='natal'] .hero-stage .hero-veil,
:root[data-tema='natal'] .banner-estilhacos {
  display: none;
}

@media (max-width: 1023px) {
  :root[data-tema='natal'] .hero-stage {
    background:
      radial-gradient(ellipse 120% 40% at 50% 64%, rgb(52 98 150 / 0.55) 0%, transparent 72%),
      linear-gradient(180deg, #050d1c 0%, #0a1a33 26%, #12305a 60%, #1d4572 100%);
  }
}

/* --mx/--my fixos aqui: o main.js troca essas variaveis no banner a cada
   movimento do mouse, e as milhares de pecas da cena seriam recalculadas
   junto (o tema travava ao passar o cursor). Com o valor fixo na raiz da
   cena, a troca para aqui; o parallax da cena e feito pelo natal.js. */
.nt-cena {
  --mx: 0.5;
  --my: 0.5;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: layout paint;
  pointer-events: none;
  animation: nt-surgir 0.8s ease-out both;
}

/* Camadas que se mexem (parallax, enfeites, luzes): cada uma na sua placa,
   assim mexer uma nao obriga a redesenhar as outras. */
.nt-auroras,
.nt-lua,
.nt-vila,
.nt-canto,
.nt-moldura,
.nt-guirlanda,
.nt-luzes,
.nt-enfeite {
  will-change: transform;
}

.nt-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.nt-ceu,
.nt-neve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Aurora: tres cortinas de raios, cada uma ondulando no seu ritmo. So
   transform e opacidade (a placa de video faz, sem redesenhar). */
.nt-auroras {
  position: absolute;
  inset: 0;
}

.nt-aurora {
  position: absolute;
  transform-origin: 50% 100%;
}

.nt-aurora svg {
  display: block;
  width: 100%;
  height: 100%;
}

.nt-aurora-1 { left: -6%; top: 2%; width: 74%; height: 46%; opacity: 0.8; animation: nt-aurora-1 17s ease-in-out infinite alternate; }
.nt-aurora-2 { left: 20%; top: -4%; width: 64%; height: 38%; opacity: 0.62; animation: nt-aurora-2 23s ease-in-out infinite alternate; }
.nt-aurora-3 { left: 46%; top: 4%; width: 58%; height: 34%; opacity: 0.52; animation: nt-aurora-3 27s ease-in-out infinite alternate; }

@media (max-width: 1023px) {
  .nt-aurora-1 { left: -40%; top: 0; width: 150%; height: 26%; }
  .nt-aurora-2 { left: -10%; top: -2%; width: 140%; height: 22%; }
  .nt-aurora-3 { left: -30%; top: 30%; width: 160%; height: 18%; opacity: 0.35; }
}

/* A lua: o natal.js poe ela atras do podio. Sem podio, fica no canto. Um
   halo frio em volta. */
.nt-lua {
  position: absolute;
  top: 8%;
  right: 8%;
  width: min(32vw, 440px);
  aspect-ratio: 1;
}

.nt-lua::before {
  content: '';
  position: absolute;
  inset: -28%;
  background: radial-gradient(closest-side, rgb(226 236 255 / 0.3), rgb(150 185 230 / 0.12) 55%, transparent);
}

.nt-lua svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Treno: o natal.js leva ele pelo ceu (transform). Silhueta com um fio de
   luz da lua na borda. */
.nt-treno {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  transform-origin: 50% 50%;
  will-change: transform;
}

.nt-treno svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.nt-contorno {
  stroke: rgb(232 241 255 / 0.4);
  stroke-width: 0.7;
  stroke-linejoin: round;
}

.nt-rena-pernas {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nt-rena-chifre {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.nt-nariz-luz {
  transform-box: fill-box;
  transform-origin: center;
  animation: nt-nariz 0.9s ease-in-out infinite alternate;
}

/* Vila presa embaixo. No celular corta as laterais e mostra o miolo. */
.nt-vila {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 380;
  min-height: 200px;
}

/* Cantos do computador: pinheiro com o boneco de neve e pinheiro com os
   presentes. Passam um pouco da borda para o parallax nao abrir fresta, e
   pisam no chao da vila, logo acima da faixa de pagamentos (que fica no pe
   do banner no computador). */
.nt-canto {
  position: absolute;
  bottom: 88px;
  height: min(54%, 420px);
  width: auto;
  aspect-ratio: 360 / 420;
}

.nt-canto-esq { left: -24px; }
.nt-canto-dir { right: -24px; }

/* Celular e tablet: uma moldura so, no pe do podio. */
.nt-moldura {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 200;
  max-height: 42%;
}

.nt-chao {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1a2c48;
}

/* Celular e tablet: boneco de neve e presentes no chao livre embaixo do
   podio (top = pe do podio, medido no natal.js). */
.nt-cel {
  display: none;
  position: absolute;
  top: calc(100% - var(--nt-base, 0px) + 2px);
  width: clamp(72px, 21vw, 124px);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
}

.nt-cel-esq { left: 4%; }
.nt-cel-dir { right: 4%; }

@media (max-width: 1023px) {
  .nt-canto { display: none; }
  .nt-moldura,
  .nt-cel { display: block; }
  .nt-moldura,
  .nt-vila { bottom: max(0px, calc(var(--nt-base, 0px) - 24px)); }
  .nt-chao {
    display: block;
    height: max(0px, calc(var(--nt-base, 0px) - 18px));
  }
}

.nt-vila,
.nt-canto,
.nt-moldura {
  overflow: visible;
}

/* Escurece a esquerda (onde fica o texto) e funde o pe do banner com o
   fundo da pagina. */
.nt-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(4 10 22 / 0.5) 0%, rgb(4 10 22 / 0.22) 38%, transparent 60%),
    linear-gradient(to top, rgb(var(--background)) 0%, transparent 12%);
}

@media (max-width: 1023px) {
  .nt-veu {
    background:
      linear-gradient(to bottom, rgb(4 10 22 / 0.4) 0%, transparent 40%),
      linear-gradient(to top, rgb(var(--background)) 0%, transparent 8%);
  }
}

/* Guirlanda no alto do banner (o natal.js desenha na largura certa): os
   enfeites (cada um preso pelo alto do fio, o natal.js gira), os galhos por
   cima e as luzes que piscam por cima de tudo. */
.nt-guirlanda-caixa {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.nt-guirlanda {
  position: relative;
  display: block;
  overflow: visible;
}

.nt-luzes {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}

.nt-enfeite {
  position: absolute;
  overflow: visible;
  transform-origin: 50% 2px;
}

/* Vida na cena: estrelas, pisca-pisca (tres grupos que se revezam, como
   num pisca-pisca de verdade), fumaca das chamines, estrelas das arvores. */
.nt-estrela { animation: nt-estrela 3s ease-in-out infinite alternate; }

.nt-fase { animation: nt-luz 2.4s steps(1, end) infinite; }
.nt-fase-1 { animation-delay: -0.8s; }
.nt-fase-2 { animation-delay: -1.6s; }

.nt-fumaca {
  fill: #9fb3cc;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: nt-fumaca 4.2s ease-out infinite;
}

.nt-estrela-brilho {
  transform-box: fill-box;
  transform-origin: center;
  animation: nt-nariz 1.6s ease-in-out infinite alternate;
}

/* ---------- Podio de presentes ----------
   Os degraus viram caixas de presente embrulhadas: papel com listras finas
   (vermelho no 1o, verde no 2o, azul no 3o), fita na cor da medalha descendo
   pela frente, tampa um pouco mais larga com a neve escorrendo da borda,
   laco na frente da tampa e uma etiqueta de papel pendurada com o numero.
   A tampa de cima (face 3D) fica coberta de neve; a lateral mostra o papel
   mais escuro com a outra fita. */
:root[data-tema='natal'] .banner-podio-lugar {
  --papel: #c41e2e;
  --papel-claro: #e8414f;
  --papel-escuro: #6e0c17;
  --cordao: 46px;
}

:root[data-tema='natal'] .banner-podio-1 { --cordao: 66px; }
:root[data-tema='natal'] .banner-podio-2 { --papel: #1c6a47; --papel-claro: #2f8e61; --papel-escuro: #0a3320; }
:root[data-tema='natal'] .banner-podio-3 { --papel: #284a96; --papel-claro: #4067c0; --papel-escuro: #10224f; --cordao: 36px; }

:root[data-tema='natal'] .banner-podio-degrau {
  --fita: 22px;
  margin-top: 24px;
  border: 1px solid rgb(0 0 0 / 0.55);
  border-bottom: 0;
  background:
    linear-gradient(90deg,
      transparent calc(50% - var(--fita) / 2),
      var(--medalha-escura) calc(50% - var(--fita) / 2),
      var(--medalha) calc(50% - var(--fita) / 2 + 4px),
      color-mix(in srgb, var(--medalha) 50%, #fff) 50%,
      var(--medalha) calc(50% + var(--fita) / 2 - 4px),
      var(--medalha-escura) calc(50% + var(--fita) / 2),
      transparent calc(50% + var(--fita) / 2)),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.07) 0 7px, transparent 7px 17px),
    linear-gradient(90deg, rgb(0 0 0 / 0.3), transparent 35%, rgb(255 255 255 / 0.05) 80%, rgb(255 255 255 / 0.09)),
    linear-gradient(180deg, var(--papel-claro), var(--papel) 38%, var(--papel-escuro));
  box-shadow:
    inset 0 -26px 22px -14px rgb(0 0 0 / 0.5),
    0 14px 22px -8px rgb(0 0 0 / 0.6);
}

/* Tampa: faixa mais larga que a caixa, com a fita passando e a sombra que
   ela faz na caixa. */
:root[data-tema='natal'] .banner-podio-degrau::after,
:root[data-tema='natal'] .banner-podio-1 .banner-podio-degrau::after {
  top: -3px;
  left: -7px;
  right: -7px;
  height: 30px;
  border: 1px solid rgb(0 0 0 / 0.55);
  border-radius: 3px;
  background:
    linear-gradient(90deg,
      transparent calc(50% - var(--fita) / 2),
      var(--medalha-escura) calc(50% - var(--fita) / 2),
      var(--medalha) calc(50% - var(--fita) / 2 + 4px),
      color-mix(in srgb, var(--medalha) 45%, #fff) 50%,
      var(--medalha) calc(50% + var(--fita) / 2 - 4px),
      var(--medalha-escura) calc(50% + var(--fita) / 2),
      transparent calc(50% + var(--fita) / 2)),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.08) 0 7px, transparent 7px 17px),
    linear-gradient(180deg, var(--papel-claro), var(--papel) 70%, var(--papel-escuro));
  box-shadow:
    0 5px 6px -2px rgb(0 0 0 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.2),
    inset 0 -2px 0 rgb(0 0 0 / 0.2);
  transition: filter 0.4s ease;
}

@media (hover: hover) {
  :root[data-tema='natal'] .banner-podio-lugar:hover .banner-podio-degrau::after,
  :root[data-tema='natal'] .banner-podio-1:hover .banner-podio-degrau::after {
    box-shadow:
      0 5px 6px -2px rgb(0 0 0 / 0.45),
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      inset 0 -2px 0 rgb(0 0 0 / 0.2);
    filter: brightness(1.12);
  }
}

/* Neve escorrendo da borda da tampa (no lugar da luz de hover). */
:root[data-tema='natal'] .banner-podio-degrau::before {
  inset: auto;
  top: -9px;
  left: -10px;
  right: -10px;
  height: 18px;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 18'%3E %3Cpath d='M0 3C10 0 20 1 32 2.5S54 1 64 3V9C60 9 59 12 56 12S52 8.5 48 9S44 15 40 15S36 9 32 9.5S26 11 22 11S18 9 14 9.5S10 14.5 6.5 14.5S3 9 0 9Z' fill='%23c3d4ea'/%3E %3Cpath d='M0 1.5C10 -1 20 0 32 1S54 -1 64 1.5V7.5C60 7.5 59 10.5 56 10.5S52 7 48 7.5S44 13.5 40 13.5S36 7.5 32 8S26 9.5 22 9.5S18 7.5 14 8S10 13 6.5 13S3 7.5 0 7.5Z' fill='%23f5f9fe'/%3E %3C/svg%3E") left top / 64px 18px repeat-x;
  opacity: 1;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25));
}

/* Laco na frente da tampa (a face da esquerda do bloco 3D, que nao aparece
   nos presentes): a cor da medalha recortada no desenho do laco, com as
   dobras e o brilho por cima. */
:root[data-tema='natal'] .banner-podio-face-esq {
  top: -9px;
  bottom: auto;
  left: 50%;
  width: 76px;
  height: 40px;
  margin-left: -38px;
  z-index: 3;
  border: 0;
  transform: translateZ(4px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--medalha) 55%, #fff), var(--medalha) 45%, var(--medalha-escura));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 40'%3E%3Cg fill='white'%3E %3Cpath d='M38 16C30 3 11 -1 5 7C0 14 13 22 38 16Z'/%3E%3Cpath d='M38 16C46 3 65 -1 71 7C76 14 63 22 38 16Z'/%3E %3Cpath d='M35 18C31 25 27 31 22 39L28 36.5L30.5 40C33.5 31 37 25 39.5 19Z'/%3E%3Cpath d='M41 18C45 25 49 31 54 39L48 36.5L45.5 40C42.5 31 39 25 36.5 19Z'/%3E %3Crect x='32.5' y='11' width='11' height='11' rx='3.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 40'%3E%3Cg fill='white'%3E %3Cpath d='M38 16C30 3 11 -1 5 7C0 14 13 22 38 16Z'/%3E%3Cpath d='M38 16C46 3 65 -1 71 7C76 14 63 22 38 16Z'/%3E %3Cpath d='M35 18C31 25 27 31 22 39L28 36.5L30.5 40C33.5 31 37 25 39.5 19Z'/%3E%3Cpath d='M41 18C45 25 49 31 54 39L48 36.5L45.5 40C42.5 31 39 25 36.5 19Z'/%3E %3Crect x='32.5' y='11' width='11' height='11' rx='3.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

:root[data-tema='natal'] .banner-podio-face-esq::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 40'%3E %3Cpath d='M35 15C28 8 17 6 12 9.5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='3' stroke-linecap='round'/%3E %3Cpath d='M41 15C48 8 59 6 64 9.5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='3' stroke-linecap='round'/%3E %3Cpath d='M7 6C11 2 19 2 25 5' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'/%3E %3Cpath d='M51 5C57 2 65 2 69 6' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='2' stroke-linecap='round'/%3E %3Cpath d='M37 20C34 27 30 33 26 38M39 20C42 27 46 33 50 38' fill='none' stroke='%23000' stroke-opacity='.22' stroke-width='2'/%3E %3Crect x='32.5' y='11' width='11' height='11' rx='3.5' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='1.4'/%3E %3Crect x='34.5' y='12.5' width='5' height='2.5' rx='1.2' fill='%23fff' opacity='.6'/%3E %3C/svg%3E") center / contain no-repeat;
}

/* Tampa de cima: coberta de neve. */
:root[data-tema='natal'] .banner-podio-face-topo {
  left: -7px;
  right: -7px;
  border-color: rgb(0 0 0 / 0.3);
  background:
    radial-gradient(ellipse 30% 60% at 22% 40%, #ffffff, transparent 70%),
    radial-gradient(ellipse 34% 55% at 70% 60%, #ffffff, transparent 70%),
    linear-gradient(0deg, #c9d9ec, #eef5fd 60%, #f9fcff);
}

/* Lateral: o papel mais escuro, a outra fita e a beirada da tampa. */
:root[data-tema='natal'] .banner-podio-face-dir {
  border-color: rgb(0 0 0 / 0.55);
  background:
    linear-gradient(180deg, transparent 0 27px, rgb(0 0 0 / 0.4) 27px 29px, transparent 29px),
    linear-gradient(90deg, transparent 38%, var(--medalha-escura) 38% 62%, transparent 62%),
    linear-gradient(180deg, var(--papel), var(--papel-escuro));
  filter: brightness(0.8);
}

:root[data-tema='natal'] .banner-podio-louro {
  display: none;
}

/* Etiqueta: papel creme com o furo, presa por um cordao que sobe ate o no
   do laco, levemente torta. O numero escrito em vermelho escuro. */
:root[data-tema='natal'] .banner-podio-numero {
  position: relative;
  margin-top: 28px;
  padding: 14px 14px 8px;
  min-width: 54px;
  border-radius: 7px;
  background: linear-gradient(180deg, #fbf5e9, #eadfc8);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #8a1220;
  -webkit-text-fill-color: #8a1220;
  -webkit-text-stroke: 0;
  font-size: 44px;
  text-align: center;
  box-shadow:
    inset 0 -2px 0 rgb(0 0 0 / 0.08),
    0 0 0 1px rgb(80 50 20 / 0.35);
  filter: drop-shadow(0 5px 4px rgb(0 0 0 / 0.45));
  rotate: -6deg;
  transform-origin: 50% 9px;
}

:root[data-tema='natal'] .banner-podio-1 .banner-podio-numero { font-size: 60px; padding: 16px 18px 10px; rotate: 4deg; }
:root[data-tema='natal'] .banner-podio-3 .banner-podio-numero { font-size: 38px; rotate: 7deg; }

/* Cordao */
:root[data-tema='natal'] .banner-podio-numero::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% - 9px);
  width: 1.6px;
  height: var(--cordao);
  margin-left: -0.8px;
  background: #4a3524;
}

/* Furo */
:root[data-tema='natal'] .banner-podio-numero::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--medalha-escura);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.5), 0 0 0 1.5px #d8c7a4;
}

@media (max-width: 639px) {
  :root[data-tema='natal'] .banner-podio-lugar { --cordao: 22px; }
  :root[data-tema='natal'] .banner-podio-1 { --cordao: 34px; }
  :root[data-tema='natal'] .banner-podio-3 { --cordao: 18px; }
  :root[data-tema='natal'] .banner-podio-degrau { --fita: 14px; margin-top: 18px; }
  :root[data-tema='natal'] .banner-podio-degrau::after { height: 20px; left: -4px; right: -4px; }
  :root[data-tema='natal'] .banner-podio-face-esq { width: 50px; height: 26px; margin-left: -25px; top: -6px; }
  :root[data-tema='natal'] .banner-podio-numero { margin-top: 18px; padding: 9px 8px 4px; min-width: 34px; font-size: 26px; border-radius: 5px; }
  :root[data-tema='natal'] .banner-podio-1 .banner-podio-numero { font-size: 36px; padding: 11px 11px 6px; }
  :root[data-tema='natal'] .banner-podio-3 .banner-podio-numero { font-size: 23px; }
  :root[data-tema='natal'] .banner-podio-numero::after { top: 3px; width: 5px; height: 5px; margin-left: -2.5px; }
}

/* ---------- Gorro do Papai Noel no lugar das coroas ----------
   No podio e no ranking do cabecalho, o avatar ganha um gorro vermelho
   caido para o lado, com a barra de pelo seguindo a curva da medalha e o
   pompom na cor da colocacao (--medalha: dourado, prata ou bronze). O gorro
   e um desenho; o pompom e uma mascara pintada com a cor do lugar. */
:root[data-tema='natal'] {
  --nt-gorro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 56'%3E %3Cpath d='M11 40C12 22 22 7 38 5C52 3 64 9 71 19C67 17.5 63 17.5 59.5 19.5C64.5 25 68 32 69.5 40Q40 31 11 40Z' fill='%23d42536' stroke='%235a0a13' stroke-width='1.2' stroke-linejoin='round'/%3E %3Cpath d='M59.5 19.5C64.5 25 68 32 69.5 40Q62 37.5 55 36.5C57 31 57.5 25 55 20.5C56.5 19.8 58 19.5 59.5 19.5Z' fill='%239c1426'/%3E %3Cpath d='M18 32C20 21 27 12 37 9' fill='none' stroke='%23ff7883' stroke-width='3' stroke-linecap='round' opacity='.55'/%3E %3Cpath d='M9 45Q40 30 71 45' fill='none' stroke='%235a0a13' stroke-opacity='.5' stroke-width='13.5' stroke-linecap='round'/%3E %3Cpath d='M9 45Q40 30 71 45' fill='none' stroke='%23cfc8bb' stroke-width='12' stroke-linecap='round'/%3E %3Cpath d='M9 43.5Q40 28.5 71 43.5' fill='none' stroke='%23f7f4ee' stroke-width='9' stroke-linecap='round'/%3E %3Cg fill='%23fff'%3E%3Ccircle cx='16' cy='38.5' r='2.4'/%3E%3Ccircle cx='27' cy='34.5' r='2.6'/%3E%3Ccircle cx='40' cy='33' r='2.6'/%3E%3Ccircle cx='53' cy='34.5' r='2.6'/%3E%3Ccircle cx='64' cy='38.5' r='2.4'/%3E%3C/g%3E %3Ccircle cx='72' cy='19' r='8' fill='none' stroke='%232a1a10' stroke-opacity='.55' stroke-width='1.2'/%3E %3Ccircle cx='69.6' cy='16.4' r='3.2' fill='%23fff' opacity='.55'/%3E %3Cpath d='M66 23.5A8 8 0 0 0 79.5 21' fill='none' stroke='%23000' stroke-opacity='.28' stroke-width='3'/%3E %3C/svg%3E");
  --nt-pompom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 56'%3E%3Ccircle cx='72' cy='19' r='8' fill='white'/%3E%3C/svg%3E");
}

:root[data-tema='natal'] .banner-podio-coroa svg,
:root[data-tema='natal'] .ranking-mini-coroa {
  display: none;
}

/* --gorro e a escala do desenho (80 x 56). A margem puxa o avatar para cima
   ate a barra de pelo ficar sobre o aro da medalha. */
:root[data-tema='natal'] .banner-podio-coroa {
  --gorro: 1.05;
  width: calc(var(--gorro) * 80px);
  height: calc(var(--gorro) * 56px);
  margin-bottom: calc(var(--gorro) * -30px);
  z-index: 3;
  rotate: -8deg;
}

:root[data-tema='natal'] .banner-podio-1 .banner-podio-coroa { --gorro: 1.34; }

@media (max-width: 639px) {
  :root[data-tema='natal'] .banner-podio-coroa { --gorro: 0.66; }
  :root[data-tema='natal'] .banner-podio-1 .banner-podio-coroa { --gorro: 0.86; }
}

:root[data-tema='natal'] .banner-podio-coroa::before,
:root[data-tema='natal'] .banner-podio-coroa::after,
:root[data-tema='natal'] .ranking-mini-rosto::before,
:root[data-tema='natal'] .ranking-mini-rosto::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

:root[data-tema='natal'] .banner-podio-coroa::before,
:root[data-tema='natal'] .banner-podio-coroa::after {
  inset: 0;
}

:root[data-tema='natal'] .ranking-mini-rosto {
  margin-top: 6px;
}

:root[data-tema='natal'] .ranking-mini-rosto::before,
:root[data-tema='natal'] .ranking-mini-rosto::after {
  top: -10px;
  left: 50%;
  width: 26px;
  height: 18px;
  translate: -48% 0;
  rotate: -10deg;
}

/* O desenho do gorro fica por cima da cor do pompom (o brilho e a sombra do
   pompom estao no desenho). */
:root[data-tema='natal'] .banner-podio-coroa::before,
:root[data-tema='natal'] .ranking-mini-rosto::before {
  z-index: 2;
  background: var(--nt-gorro) center / contain no-repeat;
}

:root[data-tema='natal'] .banner-podio-coroa::after,
:root[data-tema='natal'] .ranking-mini-rosto::after {
  z-index: 1;
  background: var(--medalha);
  -webkit-mask: var(--nt-pompom) center / contain no-repeat;
  mask: var(--nt-pompom) center / contain no-repeat;
}

@media (hover: hover) {
  :root[data-tema='natal'] .banner-podio-lugar:hover .banner-podio-coroa {
    transform: translateY(-4px) rotate(-6deg) scale(1.05);
  }
}

/* ---------- Movimento ---------- */

@keyframes nt-surgir { from { opacity: 0; } to { opacity: 1; } }
@keyframes nt-estrela { from { opacity: 0.15; } to { opacity: 0.85; } }
@keyframes nt-aurora-1 {
  0% { transform: translateX(-3%) scaleY(0.9) skewX(-5deg); opacity: 0.68; }
  50% { opacity: 0.95; }
  100% { transform: translateX(3%) scaleY(1.08) skewX(4deg); opacity: 0.8; }
}
@keyframes nt-aurora-2 {
  0% { transform: translateX(4%) scaleY(1.05) skewX(4deg); opacity: 0.5; }
  100% { transform: translateX(-4%) scaleY(0.88) skewX(-5deg); opacity: 0.75; }
}
@keyframes nt-aurora-3 {
  0% { transform: translateX(-2%) scaleY(0.92) skewX(3deg); opacity: 0.4; }
  100% { transform: translateX(5%) scaleY(1.1) skewX(-4deg); opacity: 0.66; }
}
@keyframes nt-luz {
  0% { opacity: 1; }
  33.33% { opacity: 0.35; }
  66.66% { opacity: 0.7; }
}
@keyframes nt-fumaca {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15% { opacity: 0.45; }
  100% { opacity: 0; transform: translate(10px, -34px) scale(2); }
}
@keyframes nt-nariz { from { opacity: 0.55; transform: scale(0.85); } to { opacity: 1; transform: scale(1.15); } }

/* "Reduzir animacoes" (painel) ou o sistema pedindo menos movimento: a cena
   fica parada (o natal.js tambem para a neve, o treno e os enfeites). */
:root[data-menos-animacao='sim'] .nt-cena,
:root[data-menos-animacao='sim'] .nt-cena * {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .nt-cena,
  .nt-cena * {
    animation: none !important;
    transition: none !important;
  }
}