/**
 * Objetos de papel (R7, AB#488): única imagética do site — folhas brancas sobre painel `wash` e um círculo `wash2`.
 * Posição, rotação e escala por custom properties: --x, --y, --rot, --scale. A folha é branca também no tema escuro.
 */
.art { position: relative; overflow: hidden; border-radius: var(--r-art); background: var(--wash); }
.art-circle { position: absolute; border-radius: var(--r-pill); background: var(--wash2); }
.paper {
  background: var(--paper);
  border-radius: var(--r-paper);
  box-shadow: var(--paper-shadow);
  translate: var(--x, 0) var(--y, 0);
  rotate: var(--rot, 0deg);
  scale: var(--scale, 1);
}
.ln { height: 5px; border-radius: 3px; background: var(--paper-line); }
.ln-dark { background: var(--paper-ink); }
.ph { border-radius: 3px; }

/* Documento: título escuro, linhas de texto e um bloco de foto */
.paper-doc { --pw: 136px; --ph: 192px; width: var(--pw); height: var(--ph); padding: 16px; display: flex; flex-direction: column; gap: 7px; }
.paper-doc .ln-dark { height: 8px; width: 66%; }
.paper-doc .ln:nth-child(4) { width: 80%; }
.paper-doc .ph { margin-top: 6px; height: 48px; background: var(--paper-sky); }
.paper-doc.is-mini { --pw: 56px; --ph: 78px; padding: 8px; gap: 4px; }
.paper-doc.is-mini .ln-dark { height: 5px; }
.paper-doc.is-mini .ln { height: 3px; }
.paper-doc.is-mini .ph { margin-top: 0; height: 16px; }

/* Colagem: grade 2×3 */
.paper-collage { --pw: 140px; --ph: 198px; width: var(--pw); height: var(--ph); padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; }
.paper-collage.is-mini { --pw: 58px; --ph: 78px; padding: 6px; gap: 4px; }
.paper-collage .ph:nth-child(1) { background: var(--paper-teal); }
.paper-collage .ph:nth-child(2) { background: var(--paper-magenta); }
.paper-collage .ph:nth-child(3) { background: var(--paper-violet); }
.paper-collage .ph:nth-child(4) { background: var(--paper-sky); }
.paper-collage .ph:nth-child(5) { background: var(--paper-blue); }
.paper-collage .ph:nth-child(6) { background: var(--paper-blush); }

/* Cartão pequeno: círculo + linha escura */
.paper-card { --pw: 118px; --ph: 76px; width: var(--pw); height: var(--ph); padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.paper-card .dot { width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--paper-green); }
.paper-card .ln-dark { height: 6px; width: 70%; }

/* Painel com composição (hero / vitrine) */
.art-compose > .paper { position: absolute; left: calc(50% - var(--pw) / 2); top: calc(50% - var(--ph) / 2); }
.art-mini { flex: none; width: 104px; height: 104px; border-radius: 18px; }
.art-hero { min-height: 560px; }
.art-hero .paper { position: absolute; }
.art-hero .paper-doc { left: 20px; top: 26px; --rot: -8deg; }
.art-hero .paper-collage { left: 122px; top: 0; --rot: 3deg; z-index: 1; }
.art-hero .paper-card { left: 236px; top: 110px; --rot: -4deg; z-index: 2; }
.art-stage { position: absolute; left: 50%; top: 50%; width: 360px; height: 200px; margin: -100px 0 0 -180px; scale: var(--art-scale, 1.4); }