/* =========================================================================
   VERSÃO 2 · NOITE (Cacau)
   O modo noite da identidade (lives, Aula Magna, abertura de carrinho):
   fundo Cacau, texto Creme, Argila continua sendo o botão. A assinatura de
   composição é o arco Argila com o Victor dentro e as folhas cruzando a borda.
   ========================================================================= */
:root {
  --bg: #2E2320;
  --fg: var(--creme);
  --fg-suave: rgba(255, 245, 220, .78);
  --kicker: var(--argila-clara);
  --trilho: rgba(255, 245, 220, .18);
  --cartela: #F4EFE6;
  --opcao-bg: rgba(255, 245, 220, .05);
  --opcao-borda: rgba(255, 245, 220, .26);
  --opcao-sombra: none;
  --campo-bg: rgba(255, 245, 220, .06);
  --brinde-bg: rgba(201, 100, 66, .14);
  --foco: var(--argila-clara);
  --erro: #F0A590;
}
body { background: #2E2320 url(assets/fibra-cacau.webp) 0 0 / 800px auto repeat; }
.titulo i { color: var(--argila); }
.opcao[aria-pressed="true"] { color: var(--creme); }
.cartela__lista .linha i { background: rgba(46,35,32,.4); }

/* ---------- lateral: o arco ---------- */
.lateral { display: grid; grid-template-columns: 1fr 170px; align-items: end; gap: var(--e2); }
.lateral .mote { font-size: 1.06rem; align-self: center; color: var(--creme); }
.lateral .assina { display: none; }
.arco { position: relative; width: 100%; aspect-ratio: 4 / 5.3; }
.arco__forma {
  position: absolute; inset: 14% 0 0 0; border-radius: 999px 999px 14px 14px;
  background: var(--argila) url(assets/bloco-argila-680.webp) center / 170% auto no-repeat; overflow: hidden;
  box-shadow: 0 18px 30px -16px rgba(0,0,0,.6);
}
.arco__forma::after { /* aro interno de Creme, como o fio de uma moldura de papel */
  content: ""; position: absolute; inset: 7px; border-radius: 999px 999px 8px 8px; border: 1.5px solid rgba(255,245,220,.5); pointer-events: none;
}
.arco > img { position: absolute; pointer-events: none; }
.a-victor { left: 50%; bottom: 0; width: 86%; translate: -50% 0; z-index: 2; clip-path: inset(0 0 0 0 round 0 0 12px 12px);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.a-laranja { left: -16%; top: 6%; width: 52%; rotate: -28deg; z-index: 3; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.a-alecrim { right: -16%; bottom: 8%; width: 52%; rotate: 8deg; z-index: 3; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.a-gota    { right: 6%; top: 8%; width: 14%; rotate: 14deg; z-index: 3; filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); }

@media (min-width: 900px) {
  .lateral { display: flex; flex-direction: column; }
  .arco { max-width: 330px; margin: 0 auto 0 6px; }
  .lateral .assina { display: block; margin: 1.6rem 0 0 6px; }
  .lateral .assina span { color: var(--argila-clara); }
  .lateral .mote { order: 3; margin: 1.2rem 0 0 6px; font-size: 1.32rem; max-width: 24ch; }
}
@media (max-width: 899px) { .arco { grid-column: 2; grid-row: 1; } .lateral .mote { grid-column: 1; grid-row: 1; } }

/* ---------- folha: painel de papel escuro ---------- */
.folha {
  padding: clamp(24px, 5vw, 52px); border-radius: 18px;
  background: rgba(255, 245, 220, .055); border: 1px solid rgba(255, 245, 220, .16);
  box-shadow: 0 24px 40px -26px rgba(0,0,0,.7);
}
.cartela { background: #F4EFE6; }
.consente input { accent-color: var(--argila); }
.rodape a { color: var(--argila-clara); }
@media (min-width: 900px) { .folha { min-height: 660px; } }