/* Metade do dobro: o tabloide (docs/design-system.md). Cada cor tem um sentido só; cada bloco explica com um desenho
   ou um número grande, e a frase é uma só. */
/* The tabloid's faces, served from here (docs/design-system.md), from google/fonts under the SIL OFL (fonts/SOURCE.txt):
   Anton and Archivo Narrow as WOFF2, Noticia Text as it came (#75) */
@font-face { font-family: "Anton"; src: url("/static/fonts/Anton-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("/static/fonts/ArchivoNarrow.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Noticia Text"; src: url("/static/fonts/NoticiaText-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noticia Text"; src: url("/static/fonts/NoticiaText-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root {
  color-scheme: dark;
  --papel: #131315;
  --papel-2: #1c1c20;
  --tinta-sobe: #c0102b;      /* a label's red and green, the same in both themes, white text on them (#95) */
  --tinta-desce: #00766a;
  --tinta: #ece9e0;
  --tinta-2: #aeaa9f;
  --fio: #34343a;
  --vermelho: #ff5a4f;        /* um sentido só: o preço subiu */
  --verde: #2fc4a4;           /* um sentido só: o preço baixou */
  --bloco: #c8102e;           /* fundo do cabeçalho e das etiquetas vermelhas, sempre com texto branco */
  --marca: #ffd21f;           /* marca-texto: o que importa lembrar, o que está escolhido, o que se aperta */
  --sobre-marca: #141416;
  --reticula: #d9d4c7;
  --sombra: #8f8b80;
  --f-manchete: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --f-texto: "Noticia Text", Georgia, "Times New Roman", serif;
  --f-rotulo: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --larg: 1240px;
}
html[data-modo="claro"] {
  color-scheme: light;
  --papel: #eeece3;
  --papel-2: #f5f3ec;
  --tinta: #151517;
  --tinta-2: #4b4943;
  --fio: #c9c5b8;
  --vermelho: #c0102b;
  --verde: #00766a;
  --reticula: #151517;
  --sombra: #3a3833;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* a class's display must never show what the page hid */
html, body { margin: 0; }
body { background: var(--papel); color: var(--tinta); font: 400 17px/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.anuncio :focus-visible { outline-color: var(--tinta); }  /* yellow on the light card is 1.4:1 (#95) */
.sprite { position: absolute; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--larg); margin: 0 auto; padding: 0 20px; }
.subiu-cor { color: var(--vermelho); }
.baixou-cor { color: var(--verde); }
.rotulo { font: 700 13px/1.2 var(--f-rotulo); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.secao-tit { margin: 0; font: 400 clamp(30px, 4vw, 44px)/1 var(--f-manchete); text-transform: uppercase; }

/* botões */
.botao { font: 600 14px/1 var(--f-rotulo); padding: 10px 13px; border: 1px solid var(--tinta); background: transparent; cursor: pointer; }
.botao:hover { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }
.botao.cheio { background: var(--tinta); color: var(--papel); font-weight: 700; }
.botao.cheio:hover { background: var(--marca); color: var(--sobre-marca); }

/* cabeçalho */
.folio { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font: 600 13px/1.3 var(--f-rotulo); text-transform: uppercase; letter-spacing: .06em; padding: 14px 0 8px; border-bottom: 3px double var(--tinta); }
.mast { margin: 0; background: var(--bloco); color: #fff; text-align: center; font: 400 clamp(46px, 9.2vw, 124px)/.92 var(--f-manchete); text-transform: uppercase; padding: 14px 10px 10px; text-wrap: balance; }
.orelha { border: 2px solid var(--tinta); padding: 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.orelha .grande { font: 400 64px/.9 var(--f-manchete); }
.orelha .rot { font: 600 14px/1.2 var(--f-rotulo); text-transform: uppercase; }
.orelha dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; }
.orelha dt { font: 400 26px/1 var(--f-manchete); text-align: right; }
.orelha dd { margin: 0; font: 600 14px/1.2 var(--f-rotulo); }

/* plantão */
.plantao { display: flex; align-items: stretch; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); margin-bottom: 34px; }
.pl-tag { flex: none; background: var(--bloco); color: #fff; font: 400 20px/1 var(--f-manchete); text-transform: uppercase; padding: 10px 14px; display: flex; align-items: center; }
.pl-trilho { overflow: hidden; flex: 1; min-width: 0; }
.pl-faixa { display: flex; width: max-content; }
.pl-faixa ul { display: flex; margin: 0; padding: 0; list-style: none; }
.pl-faixa li { white-space: nowrap; padding: 11px 22px; font: 600 15px/1.2 var(--f-rotulo); border-right: 1px solid var(--fio); }
.pl-faixa .sobe { color: var(--vermelho); }
.pl-faixa .desce { color: var(--verde); }

/* tirinha: o que é metade do dobro, em quatro quadros */
.tirinha { margin-bottom: 44px; }
.tir-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.quadros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.quadro { border: 2px solid var(--tinta); padding: 14px 14px 16px; display: grid; grid-template-rows: auto 168px auto; gap: 12px; position: relative; }
.q-num { position: absolute; top: -2px; left: -2px; background: var(--tinta); color: var(--papel); font: 400 18px/1 var(--f-manchete); padding: 5px 9px; }
.q-quando { padding-left: 34px; font: 700 14px/1.3 var(--f-rotulo); text-transform: uppercase; letter-spacing: .06em; }
.q-palco { position: relative; display: flex; align-items: flex-end; justify-content: center; border-bottom: 2px solid var(--tinta); }
.q-palco.alto { --h: 68%; }
.q-palco.baixo { --h: 34%; }
.q-barra { width: 42%; height: var(--h); background: repeating-linear-gradient(135deg, var(--fio) 0 6px, transparent 6px 10px); border: 2px solid var(--tinta-2); border-bottom: 0; transform-origin: bottom; }
.q-tag { position: absolute; left: 50%; bottom: calc(var(--h) + 10px); transform: translateX(-50%) rotate(-3deg); background: var(--papel); border: 2px solid var(--tinta); font: 400 28px/1 var(--f-manchete); padding: 6px 10px 5px; white-space: nowrap; }
.q-tag.sobe { color: var(--vermelho); border-color: var(--vermelho); }
.q-tag s { text-decoration-thickness: 3px; text-decoration-color: var(--vermelho); }
.q-selo { position: absolute; right: 4px; bottom: 12px; background: var(--tinta); color: var(--papel); font: 400 22px/1 var(--f-manchete); padding: 8px 9px 6px; transform: rotate(8deg); }
.q-selo.alarme { background: none; color: var(--vermelho); border: 3px double var(--vermelho); font-size: 17px; transform: rotate(-8deg); top: 10px; right: 4px; bottom: auto; }
.q-legenda { margin: 0; font: 400 17px/1.3 var(--f-texto); }
.q-legenda b { font-weight: 700; }
.tir-pe { margin: 14px 0 0; font: 400 17px/1.4 var(--f-texto); }
.tir-pe mark { background: var(--marca); color: var(--sobre-marca); padding: 1px 4px; }

/* carimbo grande e lembrete */
.carimbo-grande { position: absolute; right: 0; top: 8%; color: var(--vermelho); border: 4px double var(--vermelho); padding: 6px 12px 4px; text-align: center; font: 400 26px/1 var(--f-manchete); text-transform: uppercase; transform: rotate(-9deg); background: color-mix(in srgb, var(--papel) 70%, transparent); }
.carimbo-grande small { display: block; font: 700 12px/1.2 var(--f-rotulo); letter-spacing: .12em; }
.lembrete { margin: 14px 0 6px; font: 400 20px/1.35 var(--f-texto); }
.lembrete mark { background: var(--marca); color: var(--sobre-marca); padding: 2px 6px; font-weight: 700; white-space: nowrap; }
.legenda-g { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 6px; padding: 0; list-style: none; font: 400 14px/1.3 var(--f-rotulo); color: var(--tinta-2); }
.legenda-g li { display: flex; align-items: center; gap: 6px; }

/* gráfico */
.svg-g { display: block; width: 100%; height: auto; overflow: visible; }
.svg-g text { font: 400 12px var(--f-rotulo); fill: var(--tinta-2); }
.svg-g .grade { stroke: var(--fio); stroke-width: 1; }
.svg-g .base { stroke: var(--tinta-2); stroke-width: 1; }
.svg-g .linha { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; }
.svg-g .linha-de { fill: none; stroke: var(--tinta-2); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.svg-g .ponto { fill: var(--tinta); stroke: var(--papel); stroke-width: 2; }
.svg-g .ponto.ult-sobe { fill: var(--vermelho); }
.svg-g .ponto.ult-desce { fill: var(--verde); }
.svg-g .rotulo-ult { font: 700 14px var(--f-rotulo); fill: var(--tinta); }
.svg-g .rotulo-sobe { fill: var(--vermelho); }
.svg-g .rotulo-desce { fill: var(--verde); }
.svg-g .alvo { fill: transparent; cursor: crosshair; }
.svg-g .alvo:focus-visible { outline: none; stroke: var(--marca); stroke-width: 3; }
.svg-g .viajante { fill: var(--marca); stroke: var(--papel); stroke-width: 2; }
.dica { position: fixed; z-index: 30; pointer-events: none; background: var(--tinta); color: var(--papel); font: 600 13px/1.35 var(--f-rotulo); padding: 6px 9px; max-width: 240px; opacity: 0; transition: opacity .12s; }
.dica.on { opacity: 1; }

/* lateral */
.cupom { border: 2px dashed var(--tinta); padding: 16px 14px; position: relative; }
.cupom .tesoura { position: absolute; top: -12px; left: 12px; background: var(--papel); padding: 0 6px; font: 600 14px/1.6 var(--f-rotulo); }
.cupom label { display: block; font: 400 28px/1 var(--f-manchete); text-transform: uppercase; margin: 4px 0 12px; }
.campo { display: flex; }
.campo input { flex: 1; min-width: 0; padding: 11px 10px; border: 2px solid var(--tinta); border-right: 0; background: var(--papel); font: 400 16px var(--f-rotulo); }
.campo button { border: 2px solid var(--tinta); background: var(--tinta); color: var(--papel); font: 700 14px/1 var(--f-rotulo); padding: 0 14px; cursor: pointer; text-transform: uppercase; }
.campo button:hover { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.carimbos { display: grid; grid-template-columns: max-content 1fr; gap: 12px 12px; align-items: center; margin: 10px 0 0; }
.carimbos div { display: contents; }
.carimbos dd { margin: 0; font: 600 15px/1.3 var(--f-rotulo); }

/* carimbos */
.carimbo { display: inline-block; font: 400 17px/1 var(--f-manchete); text-transform: uppercase; padding: 4px 7px 3px; border: 3px double currentColor; transform: rotate(-4deg); white-space: nowrap; }
.carimbo.subiu { color: var(--vermelho); }
.carimbo.baixou { color: var(--verde); }
.carimbo.metade { color: var(--vermelho); border-style: solid; border-width: 2px; }
.carimbo.parado { color: var(--tinta-2); border-style: solid; border-width: 1px; transform: none; font: 700 13px/1 var(--f-rotulo); padding: 5px 7px; }

/* foto do produto: a da loja, recortada, com sombra em retícula */
.produto { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.produto .sombra { position: absolute; inset: 0; background: var(--sombra); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.produto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.produto.recorte img { background: #f4f1e8; padding: 6%; }
.produto.recorte img, .produto.recorte .sombra { transform: rotate(-1.6deg); }
.produto img:not(.pronta) { visibility: hidden; }
.ico { width: 52px; height: 52px; color: var(--reticula); }


/* classificados */
.classificados { padding: 34px 0 10px; }
.cab-class { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.cab-class p { margin: 0; font: 600 15px/1.3 var(--f-rotulo); color: var(--tinta-2); }
.controles { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; align-items: end; padding: 16px 0; }
.segmento { display: flex; flex-wrap: wrap; border: 2px solid var(--tinta); width: fit-content; }
.segmento button { background: none; border: 0; border-right: 2px solid var(--tinta); padding: 10px 14px; cursor: pointer; font: 700 15px/1 var(--f-rotulo); display: flex; align-items: baseline; gap: 6px; }
.segmento button:last-child { border-right: 0; }
.segmento button b { font: 400 22px/1 var(--f-manchete); font-weight: 400; }
.segmento button[aria-pressed="true"] { background: var(--marca); color: var(--sobre-marca); }
.segmento button:hover:not([aria-pressed="true"]) { background: var(--papel-2); }
.campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.campos label { display: block; margin-bottom: 4px; }
.campos select, .campos input { width: 100%; padding: 9px; border: 2px solid var(--tinta); background: var(--papel); font: 400 15px var(--f-rotulo); }
.contagem { margin: 0 0 12px; font: 600 14px/1.3 var(--f-rotulo); color: var(--tinta-2); }
.anuncios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.anuncios li { display: flex; }
.anuncio { flex: 1; text-align: left; background: var(--papel-2); border: 0; cursor: pointer; padding: 14px 14px 16px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 6px; }
.anuncio .produto { width: min(100%, 180px); justify-self: center; margin-bottom: 4px; }
/* without a photo, the category's drawing takes the photo's square, so names and prices line up */
.anuncio > .ico { width: min(100%, 180px); height: auto; aspect-ratio: 1; padding: 30%; justify-self: center; margin-bottom: 4px; }
.a-loja { font: 700 12px/1.2 var(--f-rotulo); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.a-nome { font: 700 15px/1.3 var(--f-texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.a-preco s { font: 400 14px/1 var(--f-rotulo); color: var(--tinta-2); }
.a-preco b { font: 400 30px/1 var(--f-manchete); font-weight: 400; }
.a-cupom { font: 600 14px/1.3 var(--f-rotulo); color: var(--tinta-2); }
.a-cupom .num { color: var(--tinta); }
.a-cupom mark { background: var(--marca); color: var(--sobre-marca); padding: 0 4px; letter-spacing: .04em; }
.a-acompanho { font: 600 14px/1.3 var(--f-rotulo); color: var(--tinta-2); }
.a-acompanho b { color: var(--tinta); }
#f-acompanho-caixa { margin-top: 10px; }
.acompanhar { margin: 0 0 14px; }
.a-pe { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 34px; }
.mais { display: block; margin: 18px auto 0; }
.vazio { padding: 30px 0; font: 400 18px/1.4 var(--f-texto); }
.vazio button { margin-left: 8px; }

/* ficha */
dialog.ficha { border: 0; padding: 0; background: transparent; color: var(--tinta); max-width: min(760px, calc(100vw - 24px)); width: 100%; max-height: calc(100dvh - 24px); }
dialog.ficha::backdrop { background: rgba(8, 8, 10, .72); }
.folha { background: var(--papel); border: 2px solid var(--tinta); padding: 22px 24px 24px; box-shadow: 8px 8px 0 rgba(0,0,0,.4); }
.folha-cab { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px 16px; align-items: start; }
.folha h2 { margin: 4px 0 0; font: 400 clamp(24px, 3.6vw, 34px)/1.05 var(--f-manchete); text-transform: uppercase; text-wrap: balance; }
.fechar { background: none; border: 2px solid var(--tinta); width: 40px; height: 40px; font: 400 22px/1 var(--f-manchete); cursor: pointer; }
.fechar:hover { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }
.folha-preco { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 14px 0 4px; border-top: 3px double var(--tinta); margin-top: 12px; }
.folha-preco .agora { font: 400 56px/1 var(--f-manchete); }
.folha .lembrete { font-size: 18px; margin: 6px 0 14px; }
.blocos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }  /* one column a block: 3, or 4 with a coupon */
.bloco { background: var(--papel-2); padding: 10px 12px; }
.bloco b { display: block; font: 400 26px/1.1 var(--f-manchete); font-weight: 400; margin-top: 4px; }
.bloco small { display: block; font: 400 13px/1.3 var(--f-rotulo); color: var(--tinta-2); }
.folha details { margin-top: 10px; }
/* the same EAN in other stores (#19): each one opens its record, so each is a card */
.outras ul { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 6px; }
.outras button { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; background: var(--papel-2); border: 0; padding: 10px 12px; cursor: pointer; text-align: left; font: 600 15px/1.3 var(--f-rotulo); }
.outras button:hover { background: color-mix(in srgb, var(--papel-2) 70%, var(--tinta) 8%); }
.outras b { font: 400 24px/1 var(--f-manchete); font-weight: 400; }
.outras .versao { margin: 10px 0 0; font: 700 15px/1.3 var(--f-rotulo); }
.a-lojas { margin-right: auto; }
.folha summary { cursor: pointer; font: 700 14px/1.4 var(--f-rotulo); text-transform: uppercase; letter-spacing: .06em; }
.folha table { width: 100%; border-collapse: collapse; margin-top: 8px; font: 400 15px/1.3 var(--f-rotulo); }
.folha th, .folha td { text-align: left; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--fio); }
.folha td.n, .folha th.n { text-align: right; font-variant-numeric: tabular-nums; }
.rodape-f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 16px; font: 400 14px/1.4 var(--f-rotulo); color: var(--tinta-2); }
.rodape-f a { color: var(--tinta); font-weight: 700; }

/* expediente */
.expediente { border-top: 3px double var(--tinta); margin-top: 30px; padding-block: 16px 36px; font: 400 14px/1.5 var(--f-rotulo); color: var(--tinta-2); }
.expediente summary { cursor: pointer; font: 700 14px/1.4 var(--f-rotulo); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta); }
.expediente p { margin: 8px 0 0; max-width: 70ch; }

/* telas estreitas */
@media (max-width: 980px) {
  .quadros { grid-template-columns: repeat(2, 1fr); }
  .controles { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .campos { grid-template-columns: 1fr; }
  .blocos { grid-auto-flow: row; grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .quadros { grid-template-columns: 1fr; }
  .folha { padding: 16px; }
  .folha-cab { grid-template-columns: 72px 1fr auto; }
  .folha-preco .agora { font-size: 44px; }
  .segmento button { padding: 9px 10px; }
}

/* movimento: o que o papel faria. Quem pediu menos movimento ao sistema não vê nada disso */
@media (prefers-reduced-motion: no-preference) {
  .pl-faixa { animation: corre 70s linear infinite; }
  .plantao:hover .pl-faixa, .plantao:focus-within .pl-faixa, .pausado .pl-faixa { animation-play-state: paused; }
  .quadro.ativo .q-barra { animation: cresce .6s cubic-bezier(.2, .8, .3, 1.15) both; }
  .quadro.ativo .q-tag { animation: pula .6s cubic-bezier(.2, .8, .3, 1.3) both; }
  .quadro.ativo .q-selo { animation: selo .4s cubic-bezier(.2, .9, .3, 1.25) .35s both; }
  .carimbo-grande { animation: carimba .42s cubic-bezier(.2, .9, .3, 1.25) .55s both; }
  .ficha .linha { animation: traca 1.4s ease-in-out .3s both; }
  dialog.ficha[open] .folha { animation: folha .32s cubic-bezier(.2, .8, .3, 1) both; }
  .anuncio { transition: background-color .15s; }
  .anuncio:hover .carimbo.subiu, .anuncio:hover .carimbo.baixou { animation: bate .22s ease-out; }
  .produto img, .produto .sombra { transition: transform .22s cubic-bezier(.2, .8, .3, 1); }
  .anuncio:hover .produto img { transform: translate(-3px, -5px); }
  .anuncio:hover .produto .sombra { transform: translate(4px, 6px); }
  .anuncio:hover .produto.recorte img { transform: translate(-3px, -5px) rotate(-1.6deg); }
  .anuncio:hover .produto.recorte .sombra { transform: translate(4px, 6px) rotate(-1.6deg); }
  ::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-trilho { overflow-x: auto; }
  .pl-faixa ul[aria-hidden] { display: none; }
  #pausar, #pausar + .at-sep { display: none; }  /* nothing moves: no pause, nor its divider */
}
@keyframes corre { to { transform: translateX(-50%); } }
@keyframes selo { from { scale: 1.9; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes cresce { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@keyframes pula { 0% { transform: translate(-50%, 24px) rotate(-3deg); opacity: .2; } 100% { transform: translate(-50%, 0) rotate(-3deg); opacity: 1; } }
@keyframes carimba { 0% { transform: scale(1.9) rotate(-16deg); opacity: 0; } 70% { transform: scale(.95) rotate(-8deg); opacity: 1; } 100% { transform: scale(1) rotate(-9deg); opacity: 1; } }
@keyframes traca { from { stroke-dashoffset: var(--comp, 2000); } to { stroke-dashoffset: 0; } }
@keyframes folha { from { transform: translateY(26px) rotate(-1.2deg); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes bate { 0% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(-4deg) scale(.9); } 100% { transform: rotate(-4deg) scale(1); } }

/* #95: o anúncio conta o que mudou; o carimbo fica para a metade do dobro */
.a-preco { align-items: center; }
.a-mov { font: 700 15px/1 var(--f-rotulo); padding: 4px 6px; border-radius: 2px; white-space: nowrap; }
.a-mov.sobe { color: var(--vermelho); background: color-mix(in srgb, var(--vermelho) 14%, transparent); }
.a-mov.desce { color: var(--verde); background: color-mix(in srgb, var(--verde) 14%, transparent); }
.a-era { font: 500 14px/1.3 var(--f-rotulo); color: var(--tinta-2); }
.a-era s { color: var(--tinta-2); }
.a-cupom small { font-size: 12px; }
.a-var { margin-right: auto; }
.a-pe { justify-content: flex-start; flex-wrap: wrap; min-height: 0; margin-top: auto; }
.anuncio { display: flex; flex-direction: column; gap: 6px; }
.anuncio .produto, .anuncio > .ico { align-self: center; }
.produto:has(img:not(.pronta)) .sombra { visibility: hidden; }  /* no flat grey square while the photo is prepared */
@media (max-width: 520px) {
  /* The filters wrap, smaller, instead of scrolling sideways, where a cut button reads as missing (Allan, item 4). */
  #f-mov { gap: 6px; }
  #f-mov button { font-size: 13px; padding: 6px 8px; flex: 1 1 auto; }
  .quadros { grid-template-columns: 1fr 1fr; gap: 8px; }
  .quadro { grid-template-rows: auto 96px auto; padding: 10px 8px 10px; gap: 8px; }
  .q-quando { padding-left: 26px; font-size: 11px; }
  .q-tag { font-size: 18px; padding: 4px 6px 3px; }
  .q-selo { font-size: 14px; }
  .q-selo.alarme { font-size: 10px; top: 4px; right: 2px; border-width: 2px; }
  .q-palco.baixo .q-tag { bottom: calc(var(--h) + 4px); }
  .q-legenda { font-size: 14px; }
}

/* #95 versão 2: the classifieds as a masonry wall of light clippings (style D). Each card is a piece of white
   newsprint whatever the theme, so inside it the light theme's tokens apply; the price is a flyer label in the
   movement's color, the movement beside it, and the name sits on the card, never on the photo. */
.anuncio {
  --cartao: #fffdf7; --papel: var(--cartao); --papel-2: var(--cartao); --tinta: #151517; --tinta-2: #55524b; --fio: #c9c5b8;
  --vermelho: var(--tinta-sobe); --verde: var(--tinta-desce); --reticula: #151517; --sombra: #3a3833;
  background: var(--cartao); color: var(--tinta); border-radius: 2px;
}
.anuncios { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-auto-flow: row dense; grid-auto-rows: 4px; column-gap: 14px; row-gap: 0; align-items: start; }
.anuncios li { display: block; }
.anuncio { width: 100%; container-type: inline-size; padding: 12px 0 14px; gap: 6px; }
.anuncio > * { margin-inline: 12px; }
.anuncio .produto { width: 74%; margin: 4px auto 6px; }
.anuncio.alto .produto { width: 88%; margin-top: 10px; margin-bottom: 10px; }
.anuncio > .ico { width: 60%; padding: 18%; margin: 4px auto; }
.anuncio > .carimbo { align-self: flex-start; margin-bottom: 4px; }
.etiqueta { display: inline-block; font: 400 min(44px, 17cqi)/0.95 var(--f-manchete); padding: 6px 8px 3px; transform: rotate(-2deg); transform-origin: left;
  white-space: nowrap; color: #fff; background: var(--tinta); }
.etiqueta.subiu { background: var(--tinta-sobe); }
.etiqueta.baixou { background: var(--tinta-desce); }
.etiqueta.parado { background: var(--marca); color: var(--sobre-marca); }
.a-preco { gap: 4px 10px; align-items: center; }
.a-preco .a-mov { background: none; padding: 0; font-size: 17px; }
.a-nome { font-weight: 400; font-size: 15px; -webkit-line-clamp: 3; }
.a-era { font-size: 13px; }
/* The lead story's price and the stamps legend use the same label. */
.carimbos .etiqueta { font-size: 20px; padding: 4px 6px 2px; }
.carimbos dt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.carimbos .a-mov { background: none; padding: 0; }
@media (max-width: 620px) {
  .anuncios { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
  .anuncio { padding: 10px 0 12px; gap: 5px; }
  .anuncio > * { margin-inline: 9px; }
  .a-preco .a-mov { font-size: 14px; }
  .a-nome { font-size: 13.5px; -webkit-line-clamp: 2; }
  .a-era, .a-cupom { font-size: 12px; }
  .anuncio > .carimbo { font-size: 13px; }
}

/* #95: the front page as a wall (montaMural). The wordmark is huge ink behind the first row, "do dobro" in red;
   the lead story's long version (#capa) gives way to its card here, and the record keeps the chart. */
.mural { position: relative; padding: 18px 0 26px; }
.mural .mast { position: absolute; z-index: 0; top: 18px; margin: 0; padding: 0; background: none; color: var(--tinta); text-align: left;
  font: 400 100px/.84 var(--f-manchete); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; pointer-events: none; }
.mural .mast span { display: block; }
.mural .mast .dobro { color: var(--bloco); }
.mural-colunas { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 14px; align-items: start; }
.mural-coluna { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.mural-coluna > * { min-width: 0; }
.peca-chamada .campo { display: flex; } .peca-chamada .campo input { flex: 1 1 0; min-width: 0; width: 0; }
.mural-pecas { display: none; }
.mural-pecas.sem-mural { display: grid; gap: 14px; margin-bottom: 24px; }  /* /api/capa failed: the offer check and the legend stay */
.mural-pecas.sem-mural .orelha { display: none; }  /* the countdown and the score have no numbers without it */
.peca { margin: 0; }
.mural .orelha { background: var(--papel); }
.peca-dias { flex-direction: row; align-items: center; gap: 12px; }
.peca-dias .grande { font-size: 72px; }
.peca-dias .rot { font: 700 15px/1.2 var(--f-rotulo); text-transform: uppercase; letter-spacing: .06em; }
#orelha-mov dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; }
#orelha-mov dt { font: 400 34px/1 var(--f-manchete); text-align: right; }
#orelha-mov dd { margin: 0; font: 700 15px/1.2 var(--f-rotulo); white-space: nowrap; }
.peca-chamada { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.peca-chamada .chamada { margin: 0; font: 400 22px/1.3 var(--f-texto); max-width: 24ch; }
.peca-chamada .cupom { margin: 0; }
.peca-carimbos .carimbos { grid-template-columns: 1fr; gap: 4px; }
.peca-carimbos .carimbos dd { margin-bottom: 8px; }
.peca-capa .botao { justify-self: start; align-self: flex-start; }
@media (max-width: 620px) {
  .mural-colunas, .mural-coluna { gap: 10px; }
  .peca-dias .grande { font-size: 52px; } .peca-dias .rot { font-size: 12px; }
  #orelha-mov dt { font-size: 26px; } #orelha-mov dd { font-size: 12px; }
  .peca-chamada .chamada { font-size: 16px; }
  .peca-chamada .campo { flex-direction: column; } .peca-chamada .campo input { width: 100%; flex: none; border-right: 2px solid var(--tinta); }
  .peca-chamada .campo button { padding: 10px; } .peca-chamada .cupom label { font-size: 22px; }
}

/* #95: each card's small chart, on a band of the card's paper over the foot of the photo. Red or green by the
   movement, the dashed line at the first price seen. */
.a-graf { display: block; position: relative; z-index: 1; height: 34px; margin: -30px 12px 2px; color: var(--tinta-2);
  background: color-mix(in srgb, var(--cartao) 78%, transparent); }
.a-graf:empty { height: 0; margin-top: 0; }
.a-graf svg { display: block; width: 100%; height: 100%; overflow: visible; }
.a-graf .linha { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.a-graf .base { fill: none; stroke: var(--tinta-2); stroke-width: 1; stroke-dasharray: 3 3; }
.a-graf.subiu { color: var(--vermelho); } .a-graf.baixou { color: var(--verde); }
.a-graf.grande { height: 56px; margin-top: -40px; }

/* #95: the lead story, two columns wide, set apart: a red band, the stamp on the photo, the sum in big type. */
.peca-capa { position: absolute; z-index: 2; padding: 0 0 16px; gap: 0; cursor: default; box-shadow: 0 0 0 3px var(--bloco); }
.peca-capa > * { margin-inline: 0; }
.capa-faixa { display: block; background: var(--bloco); color: #fff; font: 400 22px/1 var(--f-manchete); text-transform: uppercase; letter-spacing: .03em; padding: 9px 14px 7px; }
.capa-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; padding: 14px 14px 0; align-items: start; }
.capa-foto { position: relative; display: grid; }
.capa-foto .produto { width: 100%; margin: 0; }
.capa-foto .carimbo-grande { position: absolute; right: -4px; top: 2px; font-size: 22px; color: var(--vermelho); border-color: var(--vermelho); background: color-mix(in srgb, var(--cartao) 80%, transparent); }
.capa-foto .a-graf.grande { margin: -36px 0 0; height: 60px; }
.capa-texto { display: grid; gap: 10px; align-content: start; justify-items: start; min-width: 0; container-type: inline-size; }
.peca-capa .capa-tit { margin: 0; font: 400 clamp(24px, 13cqi, 48px)/.95 var(--f-manchete); text-transform: uppercase; text-wrap: balance; }
.capa-de { font: 600 16px/1.2 var(--f-rotulo); color: var(--tinta-2); }
.capa-de s { font: 400 26px/1 var(--f-manchete); text-decoration-color: var(--vermelho); text-decoration-thickness: 3px; }
.peca-capa .etiqueta { font-size: clamp(32px, 19cqi, 64px); }
.capa-visto { font: 400 18px/1.35 var(--f-texto); }
.capa-visto mark { background: var(--marca); color: var(--sobre-marca); padding: 0 4px; font-weight: 700; }
.peca-capa.estreita .capa-corpo { grid-template-columns: 1fr; }
.peca-capa.estreita .capa-foto .produto { width: 72%; margin: 0 auto; }
.peca-capa.estreita .capa-faixa { font-size: 18px; }
.mural-colunas { min-height: 0; }

/* #95: real discounts, after the front page's wall: the same wall, mirrored, in green; "de verdade" in ink. */
.descontos { padding-bottom: 26px; border-top: 3px double var(--tinta); margin-top: 6px; }
.mural .mast .verde { color: var(--verde); }
.desc-grande { box-shadow: 0 0 0 3px var(--tinta-desce); }
.desc-grande .capa-faixa { background: var(--tinta-desce); }
.desc-grande .capa-tit { color: var(--tinta-desce); }
.desc-sub { margin: 0; font: 400 20px/1.3 var(--f-texto); }
.desc-card { cursor: pointer; }
.desc-queda { font: 400 min(56px, 22cqi)/.9 var(--f-manchete); color: var(--verde); }
.desc-rot { font: 700 12px/1.2 var(--f-rotulo); text-transform: uppercase; letter-spacing: .06em; color: var(--verde); }
@media (max-width: 620px) { .desc-sub { font-size: 16px; } }


/* #95: the lowest price we ever saw, a highlighter-yellow tag under the price (Deku Deals' "Lowest price ever"). */
.selo-minimo { align-self: flex-start; background: var(--marca); color: var(--sobre-marca); font: 700 13px/1 var(--f-rotulo); letter-spacing: .02em; padding: 5px 7px 4px; border-radius: 2px; }
.ficha .selo-minimo { display: inline-block; margin-left: 8px; vertical-align: middle; }
/* With seven filters the fields get their own line instead of being squeezed beside them. */
.classificados .controles { grid-template-columns: minmax(0, 1fr); }
.classificados .campos { max-width: 760px; }

/* #95: a smaller strip; its panels play once, in turn, when the page is drawn (tocaTirinha). */
.tirinha { margin-bottom: 30px; }
.tirinha .secao-tit { font-size: clamp(28px, 4vw, 44px); }
@media (min-width: 521px) {
  .quadros { gap: 10px; }
  .quadro { grid-template-rows: auto 110px auto; padding: 10px 10px 12px; gap: 8px; }
  .q-quando { padding-left: 30px; font-size: 12px; }
  .q-tag { font-size: 21px; padding: 4px 8px 3px; }
  .q-selo { font-size: 17px; padding: 6px 7px 4px; }
  .q-selo.alarme { font-size: 13px; top: auto; bottom: 8px; right: 2px; }  /* beside the bar, clear of the price tag above it */
  .q-legenda { font-size: 15px; }
}

/* #95: the ticker first, then the shortcuts bar, stuck to the top. */
.topo-plantao { padding-top: 10px; }
.atalhos { position: sticky; top: 0; z-index: 25; background: var(--papel); border-bottom: 2px solid var(--tinta); }
.atalhos .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-top: 8px; padding-bottom: 8px; }
.at-links { display: flex; gap: 6px; }
.atalhos a { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta); text-decoration: none; font: 700 14px/1.1 var(--f-rotulo); text-transform: uppercase;
  letter-spacing: .05em; border: 2px solid var(--tinta); padding: 8px 12px 7px; }
.atalhos a:hover { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }
.atalhos a[aria-current] { background: var(--tinta); color: var(--papel); }
.at-ico { font: 400 16px/1 var(--f-rotulo); }
.at-ico.sobe { color: var(--vermelho); } .at-ico.desce { color: var(--verde); }
.atalhos a:hover .at-ico { color: inherit; }
.at-acoes { display: flex; align-items: center; gap: 8px; }
.at-acoes button { background: none; border: 0; padding: 4px 0; color: var(--tinta-2); font: 600 14px/1 var(--f-rotulo); cursor: pointer; }
.at-acoes button:hover, .at-acoes button[aria-pressed="true"] { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.at-sep { color: var(--fio); }
.atalhos .curto { display: none; }
#mural, #descontos, #classificados { scroll-margin-top: 64px; }
@media (max-width: 620px) {
  .atalhos .wrap { gap: 4px 8px; flex-wrap: nowrap; }
  .at-links { gap: 4px; flex: 1 1 auto; min-width: 0; }
  .atalhos a { flex: 1 1 0; justify-content: center; gap: 4px; font-size: 12px; padding: 7px 4px 6px; letter-spacing: .02em; }
  .at-acoes { gap: 5px; } .at-acoes button { font-size: 12px; }
  .atalhos .longo { display: none; } .atalhos .curto { display: inline; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.topo-plantao .plantao { margin: 0 0 6px; }