/* Quizzando — álbum de figurinhas. Camada de tema aplicada sobre o CSS compilado do Astro. */
@font-face{font-family:"Sofia Sans Extra Condensed";font-style:italic;font-weight:1 1000;font-display:swap;src:url(fonts/sofia-sans-extra-condensed-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans Extra Condensed";font-style:italic;font-weight:1 1000;font-display:swap;src:url(fonts/sofia-sans-extra-condensed-latin-ext-wght-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root,:root:root{
  color-scheme:light;
  --ground:#3416b5;
  --ground-deep:#1f0a72;
  --ground-lift:#4a2bd0;
  --ink:#17104a;
  --ink-2:#4b4275;
  --paper:#fff;
  --gold:#ffcf24;
  --pink:#ff4f8b;
  --cat:#ffcf24;

  --bg:var(--ground);
  --surface:var(--paper);
  --surface-2:#4526c8;
  --border:#6b4fe6;
  --text:#fff;
  --text-muted:#d8ceff;
  --brand-500:var(--gold);
  --brand-600:var(--gold);
  --brand-100:var(--gold);
  --on-brand:var(--ink);
  --accent-500:var(--pink);
  --accent-text:var(--ink-2);
  --focus:var(--gold);
  --font-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Sofia Sans Extra Condensed","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --fs-lg:clamp(1.15rem,1.05rem + .5vw,1.35rem);
  --fs-xl:clamp(2.25rem,1.5rem + 3.6vw,3.5rem);
  --fs-2xl:clamp(3.4rem,1.8rem + 8vw,6rem);
  --lh-tight:.98;
  --radius-sm:.5rem;--radius-md:.9rem;--radius-lg:1.1rem;
  --shadow-1:0 2px 4px #0f053855,0 10px 22px #0f053866;
  --shadow-2:0 3px 6px #0f053866,0 14px 30px #0f053880;
  --container:62rem;
  --gutter:1.25rem;
}
@media (prefers-color-scheme:dark){:root,:root:root{--bg:var(--ground);--surface:var(--paper);--surface-2:#4526c8;--border:#6b4fe6;--text:#fff;--text-muted:#d8ceff;--brand-500:var(--gold);--brand-600:var(--gold);--brand-100:var(--gold);--on-brand:var(--ink);--accent-text:var(--ink-2);--focus:var(--gold);--shadow-1:0 2px 4px #0f053855,0 10px 22px #0f053866;--shadow-2:0 3px 6px #0f053866,0 14px 30px #0f053880}}

/* Categorias = cor da figurinha */
.c-brasil{--cat:#2fd07a}
.c-cultura{--cat:#ff8a24}
.c-internet{--cat:#26d0f2}
.c-trabalho{--cat:#ffcf24}
.c-vida-social{--cat:#ff5c95}

/* Superfícies de papel: tokens locais de tinta */
html:root .card,html:root .chips a,html:root .cookie,html:root .quiz .opcao,html:root .quiz .ranking li,html:root .figurinha,html:root .quiz .convite,html:root .quiz .comparacao{
  --text:var(--ink);--text-muted:var(--ink-2);--brand-600:#3416b5;--focus:#3416b5;color:var(--ink);
}
html:root .card:focus-visible,html:root .quiz .opcao:focus-visible{--focus:var(--gold)}

/* ---------- Base ---------- */
html:root body{background:var(--ground);color:#fff;font-family:var(--font-body);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
html:root ::selection{background:var(--gold);color:var(--ink)}
html:root{scrollbar-color:var(--gold) var(--ground-deep);caret-color:var(--gold);accent-color:var(--gold)}
html:root h1,html:root h2,html:root h3{font-family:var(--font-display);font-style:italic;font-weight:900;letter-spacing:-.01em;line-height:var(--lh-tight);text-wrap:balance}
html:root h1{font-size:var(--fs-2xl)}
html:root h2{font-size:var(--fs-xl)}
html:root h3{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.1rem)}
html:root a{color:var(--gold);text-decoration-thickness:.09em;text-underline-offset:.22em}
html:root a:hover{color:#fff}
html:root :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:.4rem}

/* Botões: adesivo dourado */
html:root .btn{background:var(--gold);color:var(--ink);font:800 1.0625rem/1 var(--font-body);border-radius:.9rem;min-height:3.25rem;padding-inline:1.5rem;box-shadow:0 3px 0 #b8900a,0 12px 24px #0f053866;transition:transform .16s cubic-bezier(.2,.9,.3,1.2),box-shadow .16s}
html:root .btn:hover{color:var(--ink);transform:translateY(-2px) rotate(-.6deg)}
html:root .btn:active{transform:translateY(2px) scale(.98);box-shadow:0 1px 0 #b8900a,0 4px 10px #0f053866}
html:root .quiz .btn-sec,html:root .botoes .btn-sec.btn-sec{background:transparent;color:#fff;border:2px solid rgb(255 255 255/.85);box-shadow:none}
html:root .quiz .btn-sec:hover{background:rgb(255 255 255/.14);color:#fff}
html:root .quiz .voltar{color:var(--gold);font-weight:800}
html:root .quiz .voltar:hover{color:#fff}

/* ---------- Cabeçalho: marca em adesivo ---------- */
html:root .site-header{background:transparent;border:0}
html:root .site-header .bar{padding-top:.9rem;min-height:4.25rem}
html:root .brand{color:var(--ink);background:var(--paper);padding:.15rem .9rem .15rem .3rem;border-radius:1rem;gap:.55rem;font:900 1.7rem/1 var(--font-display);font-style:italic;box-shadow:var(--shadow-1);transform:rotate(-2.2deg);transition:transform .2s cubic-bezier(.2,.9,.3,1.3)}
html:root .brand:hover{color:var(--ink);transform:rotate(1deg) scale(1.03)}
html:root .brand .logo{background:var(--pink);color:#fff;border-radius:.6rem;width:2.15rem;height:2.15rem;font:900 1.15rem/1 var(--font-display);font-style:italic;transform:rotate(4deg)}

/* ---------- Home ---------- */
html:root .hero{padding-block:clamp(2rem,6vw,4.5rem) 1rem}
html:root .hero h1{max-width:11ch;margin-bottom:1.1rem;font-size:clamp(3.6rem,2rem + 10vw,7.5rem);line-height:.9;letter-spacing:-.02em}
html:root .hero p{max-width:34ch;color:var(--text-muted);font-size:var(--fs-lg);line-height:1.45}
html:root .bloco{padding-block:1.75rem}
html:root .bloco>h2{margin-bottom:1.1rem}
html:root .lista{gap:1.1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:40rem){html:root .lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}}
html:root .bloco[aria-labelledby=h-destaque] .lista{grid-template-columns:1fr}

/* Figurinha (card) */
html:root .card{position:relative;flex-direction:column;align-items:stretch;gap:.7rem;padding:.5rem .5rem .8rem;background:var(--paper);border:0;border-radius:1.15rem;box-shadow:var(--shadow-1);transition:transform .22s cubic-bezier(.2,.9,.3,1.25),box-shadow .22s}
html:root .card:hover{transform:translateY(-4px) rotate(0deg)!important;box-shadow:var(--shadow-2);border:0}
html:root .card:active{transform:scale(.97)!important}
html:root .card .emoji{display:grid;place-items:center;aspect-ratio:5/4;font-size:clamp(3.4rem,14vw,4.6rem);background:var(--cat);border-radius:.75rem;position:relative}
html:root .card[data-n]:not(.destaque)::before{content:"nº " attr(data-n);position:absolute;z-index:1;top:1rem;left:1rem;padding:.12rem .5rem;border-radius:.4rem;background:var(--paper);color:var(--ink);font:800 .75rem/1.3 var(--font-body);font-variant-numeric:tabular-nums}
html:root .card .corpo{gap:.2rem;padding-inline:.4rem}
html:root .card .cat{order:3;color:var(--ink-2);font-size:.8125rem;font-weight:700;letter-spacing:0;text-transform:none}
html:root .card .titulo{font:900 clamp(1.5rem,1.2rem + 1.4vw,1.9rem)/.98 var(--font-display);font-style:italic;color:var(--ink);letter-spacing:-.005em}
html:root .card .desc{color:var(--ink-2);font-size:.9rem;line-height:1.4}
html:root .card .meta{order:4;color:var(--ink-2);font-size:.8125rem;font-weight:700;margin-top:.15rem}

/* Grade da página do álbum */
html:root .grupo .lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
html:root .grupo .card .desc,html:root .grupo .card .cat{display:none}
html:root .grupo .card .corpo{gap:.3rem}
html:root .grupo .card:nth-child(4n+1){transform:rotate(-1.4deg)}
html:root .grupo .card:nth-child(4n+2){transform:rotate(1deg)}
html:root .grupo .card:nth-child(4n+3){transform:rotate(.6deg)}
html:root .grupo .card:nth-child(4n){transform:rotate(-.9deg)}
html:root .grupo{margin-top:2.5rem}
html:root .grupo h3{margin-bottom:1.1rem}
html:root .grupo.grupo h3 a{color:#fff;text-decoration:underline;text-decoration-color:var(--cat);text-decoration-thickness:.16em;text-underline-offset:.18em}
html:root .grupo h3 a:hover{color:var(--gold)}
@media (min-width:40rem){html:root .grupo .lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}}

/* Destaque: a figurinha especial */
html:root .card.destaque{--cat:var(--gold);max-width:25rem;padding:.7rem .7rem 1.2rem;gap:.9rem;background:var(--paper);border-radius:1.5rem;overflow:hidden;transform:rotate(-2.4deg);background-image:none}
html:root .card.destaque:hover{transform:translateY(-4px) rotate(-.8deg)!important}
html:root .card.destaque .emoji{aspect-ratio:1/.82;font-size:clamp(5.5rem,26vw,8rem);background:var(--gold);border-radius:1rem;overflow:hidden}
html:root .card.destaque .corpo{padding-inline:.6rem}
html:root .card.destaque .titulo{font-size:clamp(2.2rem,1.6rem + 2.4vw,2.9rem);line-height:.94}
html:root .card.destaque .cat,html:root .card.destaque .desc,html:root .card.destaque .meta{color:var(--ink-2)}
html:root .card.destaque .desc{font-size:.95rem}
html:root .card.destaque::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(112deg,transparent 34%,rgb(255 255 255/.7) 47%,rgb(255 255 255/.15) 53%,transparent 62%);background-size:260% 100%;background-position:130% 0;mix-blend-mode:soft-light}
@media (min-width:60rem){
  html:root main:has(>.hero){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);column-gap:2rem;align-content:start;width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
  html:root main:has(>.hero)>*{grid-column:1/-1;max-width:none;padding-inline:0}
  html:root main:has(>.hero)>.hero{grid-column:1;grid-row:1;align-self:center}
  html:root main:has(>.hero)>.bloco[aria-labelledby=h-destaque]{grid-column:2;grid-row:1;align-self:center;padding-block:2rem 1rem}
  html:root .bloco[aria-labelledby=h-destaque]>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html:root .hero{padding-bottom:1rem}
}

/* Chips de categoria: etiquetas coladas */
html:root .chips{gap:.7rem}
html:root .chips a{background:var(--paper);color:var(--ink);border:0;border-radius:.8rem;font-weight:800;box-shadow:var(--shadow-1);min-height:2.9rem;transition:transform .2s cubic-bezier(.2,.9,.3,1.3)}
html:root .chips li:nth-child(odd) a{transform:rotate(-1.2deg)}
html:root .chips li:nth-child(even) a{transform:rotate(1deg)}
html:root .chips a:hover{color:var(--ink);border:0;transform:translateY(-3px) rotate(0)}
html:root .chips a.c-brasil{box-shadow:inset 0 -.32rem 0 var(--cat),var(--shadow-1)}
html:root .chips a.c-cultura{box-shadow:inset 0 -.32rem 0 var(--cat),var(--shadow-1)}
html:root .chips a.c-internet{box-shadow:inset 0 -.32rem 0 var(--cat),var(--shadow-1)}
html:root .chips a.c-trabalho{box-shadow:inset 0 -.32rem 0 var(--cat),var(--shadow-1)}
html:root .chips a.c-vida-social{box-shadow:inset 0 -.32rem 0 var(--cat),var(--shadow-1)}

/* ---------- Quiz ---------- */
html:root .quiz{max-width:44rem;padding-block:1.5rem 3rem}
html:root .quiz .emoji{display:grid;place-items:center;width:6.5rem;height:6.5rem;margin-bottom:1.2rem;font-size:3.6rem;background:var(--cat);border:.4rem solid var(--paper);border-radius:1.4rem;box-shadow:var(--shadow-1);transform:rotate(-4deg)}
html:root .quiz [data-view=intro] h1{font-size:clamp(3rem,1.6rem + 7vw,5.25rem);line-height:.92}
html:root .quiz .lead{color:var(--text-muted);font-size:var(--fs-lg);max-width:40ch}
html:root .quiz .meta{color:var(--text-muted);font-weight:600}
html:root .quiz [data-action=start]{margin-block:.4rem 0;min-width:12rem;min-height:3.6rem;font-size:1.2rem}
html:root .quiz .aviso,html:root .aviso{background:rgb(255 255 255/.1);color:var(--text-muted);border-radius:.9rem;font-size:.875rem;line-height:1.5}

html:root .quiz .barra{height:.8rem;background:var(--ground-deep);border-radius:99px;box-shadow:inset 0 1px 3px #0006}
html:root .quiz .barra-fill{background:var(--gold);border-radius:99px;transition:width .35s cubic-bezier(.2,.9,.3,1)}
html:root .quiz .contador{color:#fff;font-weight:800}
html:root .quiz .pergunta{font-size:clamp(2.4rem,1.5rem + 4.4vw,3.6rem);line-height:.96;margin-top:1.8rem}
html:root .quiz .opcoes{gap:.8rem;margin-top:1.6rem}
html:root .quiz .opcao{background:var(--paper);border:.22rem solid var(--paper);border-radius:1rem;min-height:3.75rem;padding:.8rem 1rem .8rem .8rem;font:700 1.0625rem/1.3 var(--font-body);box-shadow:0 2px 4px #0f053855,0 8px 16px #0f053855;transition:transform .16s cubic-bezier(.2,.9,.3,1.3),background .15s,border-color .15s}
html:root .quiz .opcao:hover{transform:translateY(-2px) rotate(-.4deg)}
html:root .quiz .opcao:active{transform:scale(.985)}
html:root .quiz .opcao[aria-pressed=true]{background:var(--gold);border-color:var(--ink)}
html:root .quiz .opcao .tecla{background:var(--ink);color:#fff;border-radius:50%;width:2rem;height:2rem;font-size:.875rem}
html:root .quiz .dica{color:var(--text-muted)}

/* Resultado: a figurinha é o resultado */
html:root .figurinha{position:relative;display:flex;flex-direction:column;align-items:stretch;max-width:24rem;margin-bottom:1.6rem;padding:.6rem .6rem 1.25rem;background:var(--paper);border-radius:1.5rem;box-shadow:var(--shadow-2);transform:rotate(-2deg);overflow:hidden}
html:root .emoji,html:root .figurinha .emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
html:root .figurinha .emoji{display:grid;place-items:center;width:auto;height:auto;aspect-ratio:1/.8;margin:0 0 .9rem;font-size:clamp(6rem,30vw,8.5rem);background:var(--cat);border:0;border-radius:1rem;box-shadow:none;transform:none}
html:root .figurinha .eyebrow{order:5;margin:.5rem .5rem 0;color:var(--ink-2);font:700 .8125rem/1.3 var(--font-body);letter-spacing:0;text-transform:none}
html:root .figurinha h1,html:root .figurinha .r-titulo{padding-inline:.6rem;color:var(--ink);font-size:clamp(2.4rem,1.7rem + 3.4vw,3.3rem);line-height:.94;margin-bottom:.4rem}
html:root .figurinha .r-pct{padding-inline:.6rem;margin:0;color:var(--ink-2);font-weight:700}
html:root .figurinha .r-pct strong{color:var(--ink);font:900 2.2rem/1 var(--font-display);font-style:italic;margin-right:.15rem}
html:root .figurinha::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(112deg,transparent 34%,rgb(255 255 255/.7) 47%,rgb(255 255 255/.15) 53%,transparent 62%);background-size:260% 100%;background-position:130% 0;mix-blend-mode:soft-light}
html:root .quiz [data-view=resultado] .lead,html:root .resultado .lead{color:#fff;max-width:46ch}
html:root .quiz .comparacao,html:root .quiz .convite{background:var(--gold);color:var(--ink);border-radius:.9rem}
html:root .quiz [data-view=resultado] h3{font-size:1.9rem;margin-top:2rem}
html:root .quiz .ranking{gap:.7rem}
html:root .quiz .ranking li{background:var(--paper);border:0;border-radius:.9rem;box-shadow:var(--shadow-1);padding:.8rem 1rem}
html:root .quiz .rank-barra{background:#e6e0fa;height:.6rem}
html:root .quiz .rank-fill{background:var(--cat)}
html:root .quiz .r-pct{color:var(--text-muted)}
html:root .quiz .acoes{margin-top:1.8rem}
html:root .quiz .status{color:#fff}
html:root .resultado{max-width:44rem;padding-block:2rem 3rem}
html:root .resultado>.btn{margin-top:.6rem}

/* Momento orquestrado: a figurinha é colada na página */
@keyframes colar{0%{opacity:0;transform:translateY(-1.6rem) rotate(9deg) scale(1.28);filter:blur(3px)}55%{opacity:1;transform:translateY(0) rotate(-3.4deg) scale(.97);filter:blur(0)}100%{opacity:1;transform:rotate(var(--tilt,-2.4deg)) scale(1)}}
@keyframes brilho{from{background-position:130% 0}to{background-position:-30% 0}}
@media (prefers-reduced-motion:no-preference){
  html:root .card.destaque{--tilt:-2.4deg;animation:colar .8s cubic-bezier(.2,.9,.3,1) .12s both}
  html:root .card.destaque::after{animation:brilho 1.1s ease-out .7s both}
  html:root .figurinha{--tilt:-2deg;animation:colar .8s cubic-bezier(.2,.9,.3,1) both}
  html:root .figurinha::after{animation:brilho 1.1s ease-out .65s both}
}

/* Seções de leitura: "Sobre este quiz" e "Faça também" */
html:root .trilha{color:var(--text-muted)}
html:root .sobre p,html:root .sobre li{max-width:64ch}
html:root .sobre{padding-block:2rem}
html:root .sobre h2{font-size:clamp(2rem,1.5rem + 2vw,2.6rem)}
html:root .sobre h3{font-size:1.7rem}
html:root .possiveis li{background:rgb(255 255 255/.12);color:#fff;border-radius:.6rem;font-weight:600}
html:root .outros h2{font-size:clamp(2rem,1.5rem + 2vw,2.6rem)}
html:root .outros .lista{grid-template-columns:1fr}
@media (min-width:44rem){html:root .outros .lista{grid-template-columns:repeat(3,minmax(0,1fr))}}
html:root .outros .card{flex-direction:row;align-items:center;padding:.5rem .9rem .5rem .5rem;gap:.9rem}
html:root .outros .card::before{display:none}
html:root .outros .card .emoji{aspect-ratio:1;width:4.6rem;flex:none;font-size:2.4rem;border-radius:.7rem}
html:root .outros .card .desc{display:none}
html:root .outros .card .titulo{font-size:1.5rem}
@media (min-width:44rem){html:root .outros .card{flex-direction:column;align-items:stretch;padding:.5rem .5rem .8rem}html:root .outros .card::before{display:block}html:root .outros .card .emoji{aspect-ratio:5/4;width:auto;font-size:3.6rem}}
html:root .outros .card:nth-child(odd){transform:rotate(-1deg)}
html:root .outros .card:nth-child(even){transform:rotate(.8deg)}

/* Páginas institucionais */
html:root main>.container:not(.hero):not(.bloco):not(.quiz):not(.resultado):not(.sobre):not(.outros) p{max-width:66ch}
html:root main .container h1{font-size:clamp(3rem,1.6rem + 6vw,5rem);margin-bottom:1.2rem}

/* ---------- Anúncios (comportamento intacto, só o papel) ---------- */
html:root .ad-rotulo{color:var(--text-muted);letter-spacing:.02em;text-transform:none}
html:root .ad-area{background:rgb(255 255 255/.1);border-radius:.9rem}

/* ---------- Rodapé ---------- */
html:root .site-footer{margin-top:3.5rem;padding-block:2rem 2.5rem;background:var(--ground-deep);border:0;color:var(--text-muted)}
html:root .site-footer .marca{color:#fff}
html:root .site-footer .marca strong{font:900 1.9rem/1 var(--font-display);font-style:italic}
html:root .site-footer li a,html:root .site-footer .legal button{color:var(--text-muted)}
html:root .site-footer li a:hover,html:root .site-footer .legal button:hover{color:var(--gold)}
html:root .site-footer .legal{border-color:rgb(255 255 255/.18)}

/* ---------- Cookies: continua sendo um painel de papel ---------- */
html:root .cookie{background:var(--paper);border:0;border-radius:1.2rem 1.2rem 0 0;box-shadow:0 -10px 34px #0f053888}
html:root .cookie h2{font:900 1.7rem/1 var(--font-display);font-style:italic;color:var(--ink)}
html:root .cookie p{color:var(--ink-2)}
html:root .cookie .btn{box-shadow:none;background:var(--ink);color:#fff;font-size:.9375rem}
html:root .cookie .botoes .btn.btn-sec{background:transparent;color:var(--ink);border:2px solid var(--ink)}
html:root .cookie .btn:hover{color:#fff;transform:none}
html:root .cookie .botoes .btn.btn-sec:hover{color:var(--ink);background:#efeafd}
html:root .cookie a{color:#3416b5}

/* ---------- Mobile estreito ---------- */
@media (max-width:23.5rem){html:root .grupo .lista{gap:.8rem}html:root .card .titulo{font-size:1.4rem}}
@media (prefers-reduced-motion:reduce){html:root *,html:root :before,html:root :after{animation:none!important;transition-duration:.01ms!important}}

/* Espaços vazios do álbum: completam a linha da grade */
html:root .grupo .lista::after{content:"?" / "";display:none;place-items:center;border:3px dashed rgb(255 255 255/.4);border-radius:1.15rem;min-height:11rem;color:rgb(255 255 255/.4);font:900 5rem/1 var(--font-display);font-style:italic}
html:root .grupo .lista:has(>:nth-child(3):last-child)::after{display:grid}
@media (min-width:40rem){
  html:root .grupo .lista:has(>:nth-child(3):last-child)::after{display:none}
  html:root .grupo .lista:has(>:nth-child(2):last-child)::after{display:grid}
}