/* Memórias (Fase 8 · web 07) e o livrinho para imprimir. Só tokens. A área de cima é sol
   clarinho com o círculo da prancha; as caixinhas e os momentos levam a cor de cada um. */
.conteudo:has(.faixa-memorias) { position: relative; }
.faixa-memorias { position: absolute; inset: 0 0 auto 0; height: 470px; background: var(--okf-sol-soft); overflow: hidden; z-index: 0; }
.faixa-memorias::after { content: ""; position: absolute; top: -160px; right: -120px; width: 520px; height: 520px; border-radius: 50%;
  background: color-mix(in srgb, var(--okf-sol) 55%, transparent); }
.conteudo:has(.faixa-memorias) > :not(.faixa-memorias) { position: relative; z-index: 1; }

.abas-mem { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--okf-radius-pill); background: var(--okf-surface-raised); }
.abas-mem button { min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--okf-radius-pill); background: none;
  font: var(--okf-font-heading); color: var(--okf-ink); cursor: pointer; }
.abas-mem button.ativo { background: var(--okf-petroleo); color: var(--okf-on-petroleo); }
.btn-sol { background: var(--okf-sol); color: var(--okf-ink); }

/* caixinhas */
.faixa-caixinhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--okf-space-4); }
.caixinha { display: flex; flex-direction: column; align-items: flex-start; gap: var(--okf-space-2); padding: var(--okf-space-5, 20px);
  border: 0; border-radius: var(--okf-radius-lg); background: var(--okf-surface-raised); box-shadow: var(--okf-shadow-card);
  text-align: left; font: inherit; color: var(--okf-ink); cursor: pointer; --cx: var(--okf-sol); --cx-soft: var(--okf-sol-soft); }
.caixinha.escolhida { box-shadow: inset 0 0 0 3px var(--cx); }
.caixinha strong { font: var(--okf-font-heading); }
.caixinha small { font: var(--okf-font-label); }
.caixinha .caixinha-de { font: var(--okf-font-caption); color: var(--okf-ink-muted); margin-top: -6px; }
.caixinha-icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--cx-soft); color: var(--okf-ink); }
.caixinha .barra { display: block; width: 100%; height: 10px; border-radius: 5px; background: var(--okf-surface-sunken); overflow: hidden; margin-top: 4px; }
.caixinha .barra span { display: block; height: 100%; border-radius: 5px; background: var(--cx); }
.caixinha-nova { align-items: center; justify-content: center; text-align: center; background: transparent; box-shadow: none;
  border: 2px dashed color-mix(in srgb, var(--okf-sol) 80%, var(--okf-ink) 10%); }
.caixinha-nova small { font: var(--okf-font-caption); font-weight: 600; }
.ic-grande { width: 32px; height: 32px; }
.cor-sol { --cx: var(--okf-sol); --cx-soft: var(--okf-sol-soft); }
.cor-azul { --cx: var(--okf-azul); --cx-soft: var(--okf-azul-soft); }
.cor-coral { --cx: var(--okf-coral); --cx-soft: var(--okf-coral-soft); }
.cor-verde { --cx: var(--okf-verde); --cx-soft: var(--okf-verde-soft); }
.filtro-ativo { margin: var(--okf-space-3) 0 0; font: var(--okf-font-body); }

/* mural */
.grade-memorias { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); gap: var(--okf-space-6); margin-top: var(--okf-space-6); align-items: start; }
.mural { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--okf-space-4); align-items: stretch; }
.mem { display: flex; flex-direction: column; gap: var(--okf-space-2); min-width: 0; border-radius: var(--okf-radius-lg); overflow: hidden;
  background: var(--okf-surface-raised); box-shadow: var(--okf-shadow-card); }
.mem[data-editar] { cursor: pointer; }
.mem h3 { font: var(--okf-font-title); font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.mem p { margin: 0; font: var(--okf-font-body); }
.mem small { font: var(--okf-font-caption); font-weight: 600; color: var(--okf-ink-muted); }
.mem .sobre { margin: 0; font: var(--okf-font-caption); font-weight: 800; letter-spacing: .04em; color: var(--okf-ink-muted); }
.mem-corpo { display: flex; flex-direction: column; gap: var(--okf-space-2); padding: var(--okf-space-5, 20px); }
.mem-momento.largo { grid-column: span 2; flex-direction: row; }
.mem-momento.largo .mem-midia-caixa { flex: 1 1 50%; }
.mem-momento.largo .mem-corpo { flex: 1 1 50%; }
.mem-momento.largo h3 { font-size: 30px; }
.mem-midia-caixa { background: var(--okf-sol-soft); min-height: 180px; display: grid; }
.mem-momento:nth-child(3n+2) .mem-midia-caixa { background: var(--okf-azul-soft); }
.mem-momento:nth-child(3n) .mem-midia-caixa { background: var(--okf-verde-soft); }
.mem-foto { width: 100%; height: 100%; min-height: 180px; object-fit: cover; display: block; cursor: zoom-in; }
.mem-midia { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--okf-ink); font: var(--okf-font-heading); text-decoration: none; }
.mem-frase { padding: var(--okf-space-6); background: var(--okf-coral-soft); }
.mem-frase .ic-aspas { width: 30px; height: 30px; color: var(--okf-coral-strong); }
.mem-frase h3 { font-size: 26px; }
.mem-frase footer, .mem-conquista footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--okf-space-2); }
.mem-conquista { padding: var(--okf-space-6); border-radius: var(--okf-radius-lg); }
.mem-conquista .sobre, .mem-conquista small { color: color-mix(in srgb, var(--cart-texto) 80%, transparent); }
.mem-conquista h3 { font-size: 26px; }
.mem-vazio { grid-column: 1 / -1; padding: var(--okf-space-6); }
.chips-mem { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-mem { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--okf-radius-pill);
  background: var(--cx-soft, var(--okf-surface-sunken)); color: var(--okf-ink); font: var(--okf-font-caption); font-weight: 800; }
.chip-coracao { background: var(--okf-coral-soft); color: var(--okf-coral-strong); cursor: pointer; }
.mem-frase .chip-coracao { background: var(--okf-surface-raised); }
.chip-coracao.aceso .ic { fill: currentColor; }
.mem-conquista .chip-mem { background: color-mix(in srgb, var(--cart-texto) 14%, transparent); color: var(--cart-texto); }

/* lateral */
.anos { list-style: none; margin: var(--okf-space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.anos button { display: flex; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 var(--okf-space-3); border: 0;
  border-radius: var(--okf-radius-md); background: none; font: var(--okf-font-heading); color: var(--okf-ink); cursor: pointer; }
.anos li:first-child button, .anos button.ativo { background: var(--okf-sol-soft); }
.anos button.ativo { box-shadow: inset 0 0 0 2px var(--okf-sol); }
.livrinho-chamada { gap: var(--okf-space-3); }
.livrinho-chamada .secao-titulo { color: inherit; }
.livrinho-chamada p { margin: 0; }
.livrinho-chamada .btn { align-self: flex-start; }
.secao-titulo .ic { vertical-align: -3px; margin-right: 6px; }
.grade-memorias .secao-cabeca .selo { white-space: nowrap; flex: none; }

/* livrinho (A4) */
body.livrinho { max-width: 760px; margin: 0 auto; padding: var(--okf-space-6) var(--okf-space-4); background: var(--okf-surface); color: var(--okf-ink); }
.livrinho-barra { display: flex; justify-content: space-between; gap: var(--okf-space-3); margin-bottom: var(--okf-space-6); }
.capa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--okf-space-3); min-height: 80vh;
  padding: var(--okf-space-8); border-radius: var(--okf-radius-lg); background: var(--cx-soft); text-align: center; break-after: page;
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.capa h1 { font: var(--okf-font-display); }
.capa-icone { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 28px; background: var(--okf-surface-raised); color: var(--cx); }
.capa-icone .ic { width: 52px; height: 52px; }
.capa img { margin-top: var(--okf-space-6); }
.pagina { padding: var(--okf-space-8) 0; border-bottom: 1px solid var(--okf-line); break-inside: avoid-page; }
.pagina h2 { font: var(--okf-font-title); font-size: 30px; margin: var(--okf-space-2) 0 var(--okf-space-4); }
.pagina-foto { width: 100%; max-height: 520px; object-fit: contain; border-radius: var(--okf-radius-md); }
.pagina-texto { font: var(--okf-font-body); font-size: 18px; }
@media print {
  .nao-imprimir { display: none; }
  body.livrinho { padding: 0; background: #fff; }
}

@media (max-width: 1280px) {
  .mural { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .grade-memorias { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .mural { grid-template-columns: 1fr; }
  .mem-momento.largo { grid-column: auto; flex-direction: column; }
}