/* ================= LANDING MEU ÁLBUM (meu-album-2026.html) =================
   Extensão de landing.css + landing-v2.css — só o que é específico desta
   página: o componente visual do hero (.ma-progress, um anel de progresso +
   grade de 4 quadradinhos "tenho/repetida/falta", em vez do leque de
   figurinhas/Legends que as outras 2 landings usam, porque esta landing vende
   "organizar a coleção", não uma figurinha específica). Cores via custom
   properties de css/style.css/landing.css (--accent, --gold, --surface-2,
   --border-2…), nada de hex solto fora do que já existe nelas. */
*{}/* regra vazia de propósito, mesmo cuidado de css/legends-landing.css: a 1ª
   regra "de verdade" logo após o comentário grande do topo some do CSSOM
   neste ambiente de preview (confirmado lá, não é cache) — sacrifica esta
   regra vazia em vez de uma regra real. Não remover. */

/* anel de progresso — conic-gradient simples (sem SVG/JS), miolo vazado por
   ::before pra virar um "donut" com o texto centralizado */
.ma-progress{display:flex;flex-direction:column;align-items:center;gap:20px;
  margin:26px auto 0;width:100%;max-width:280px}
.ma-ring{position:relative;width:176px;height:176px;border-radius:50%;
  background:conic-gradient(var(--accent) 0% 72%, var(--surface-3) 72% 100%);
  display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:0 22px 40px -18px rgba(0,0,0,.85)}
.ma-ring::before{content:"";position:absolute;inset:14px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border-2)}
.ma-ring-label{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.ma-ring-label b{font-family:var(--f-display);font-weight:800;font-size:40px;color:var(--text);line-height:1}
.ma-ring-label span{font-family:var(--f-display);font-weight:700;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:4px}

/* grade de 4 "figurinhas" simplificadas — comunica tenho (verde) / repetida
   (verde + selo dourado) / falta (apagada), mesma linguagem visual de
   .sticker-btn (css/style.css) sem reaproveitar a classe de verdade (ali tem
   bandeira/número reais, aqui é só decoração) */
.ma-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
.ma-cell{position:relative;aspect-ratio:3/4;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:800;font-size:19px;color:var(--faint)}
.ma-cell.has,.ma-cell.dup{color:var(--text);border-color:var(--accent-2);
  background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 24%,var(--surface-2)),var(--surface-2) 65%)}
.ma-cell.dup i{position:absolute;bottom:-6px;right:-6px;font-style:normal;background:var(--gold);
  color:#2b1c00;font-size:10px;font-weight:800;border-radius:20px;padding:2px 6px;line-height:1.3}
.ma-cell.missing{opacity:.45}

.ma-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:11.5px;
  font-family:var(--f-display);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ma-legend span{display:flex;align-items:center;gap:6px}
.ma-legend i{width:9px;height:9px;border-radius:50%;background:var(--faint);display:block}
.ma-legend .has i{background:var(--accent)}
.ma-legend .dup i{background:var(--gold)}

@media (min-width:900px){.ma-progress{max-width:320px}}