/* Como o Plexus funciona (V6, 13/10/2026, 17:4x). A seção na linha da Legora que trava a tela: enquanto a pessoa
 * desce, a tela fica parada; à esquerda, as sete partes em pílulas, com a do momento aberta e o texto dela; à
 * direita, a arte muda a cada parte; embaixo, à esquerda, a barra do quanto falta. O pedido dele: ninguém pula uma
 * parte. A Legora ao pé da letra nas pílulas e no cartão aberto (o cinza translúcido com a letra branca); o resto
 * na letra e nas cores do Plexus. A arte de cada opção mora em sol-a, sol-b e sol-c, num palco de 640 por 560
 * que o motor escala para caber. Sem JavaScript, a lista aparece aberta e a arte some. */

/* 14/10, 10:18: embaixo, o mesmo respiro da dor antes desta seção (o pedido dele, com os dois prints) */
.sol.block { padding-bottom: 56px; }
@media (max-width: 900px) { .sol.block { padding-bottom: 40px; } }
.sol .wrap > .display { margin: 0; }
.sol-trilho { margin-top: 24px; }
.sol-fixo { position: relative; }
.sol-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 32px; }
.sol-arte { display: none; }
.sol-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; justify-items: start; }
.sol-progresso { display: none; }

/* As pílulas e o cartão aberto (a forma da Legora). 13/10, 19:17: o cinza translúcido saiu («essas caixas nessa
 * cor não combinaram com o site do Plexus»). 14/10, 09:18: a transparência da Legora no verde do Plexus (o pedido
 * dele, com o print dela): toda pílula no verde translúcido com a letra branca, e o «+» num círculo branco
 * translúcido. 0,84 é o peso da pílula da Legora medido no print dele (a letra branca a 4,67:1); no verde, 0,84
 * dá 4,57:1 sobre o papel. */
.sol-item { border-radius: 20px; background: rgba(74, 100, 60, 0.84); color: #fff; max-width: 100%;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  transition: width 480ms var(--ease); }
.sol-pilula { display: inline-flex; align-items: center; gap: 12px; height: 38px; padding: 0 7px 0 15px; border: 0; border-radius: 999px;
  background: none; color: inherit; font: inherit; font-size: var(--size-text); line-height: 1; cursor: pointer; text-align: left; white-space: nowrap; }
.sol-pilula:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.sol-pilula .mais { position: relative; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); flex: none; transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.sol-pilula .mais::before, .sol-pilula .mais::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; margin: -0.75px 0 0 -4.5px; border-radius: 1px; background: rgba(255, 255, 255, 0.92); }
.sol-pilula .mais::after { transform: rotate(90deg); }
/* 19:17: a letra do texto aberto bem menor («esse texto pode dar uma boa reduzida de tamanho»), de 20 para 16 */
/* o texto não alarga a pílula: a largura da pílula é a do nome, e a do cartão aberto é fixa */
.sol-corpo { display: grid; grid-template-rows: 1fr; width: 0; min-width: 100%; transition: grid-template-rows 480ms var(--ease); }
.sol-corpo > div { min-height: 0; overflow: hidden; }
.sol-corpo p { margin: 0; padding: 0 18px 17px 15px; max-width: 26em; font-size: 16px; line-height: 1.45; color: #fff; text-wrap: pretty; }

/* Com JavaScript: o trilho alto, a tela presa, uma parte aberta por vez */
.js .sol-trilho { height: calc(100svh - var(--nav-h) + var(--n, 7) * 62svh); }
.js .sol-fixo { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; }
.js .sol-grade { height: 100%; padding-top: 28px; padding-bottom: 28px; }
.js .sol-arte { display: block; position: relative; grid-column: 2; grid-row: 1 / 3; min-height: 0; }
.js .sol-lista { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
.js .sol-progresso { display: block; grid-column: 1; grid-row: 2; align-self: end; position: relative; z-index: 2; width: 110px; height: 30px; border-radius: 999px; background: rgba(74, 100, 60, 0.84); }
.sol-progresso::before, .sol-progresso span { content: ''; position: absolute; left: 14px; right: 14px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.sol-progresso::before { background: rgba(255, 255, 255, 0.3); }
.sol-progresso span { background: #fff; transform-origin: 0 50%; transform: scaleX(0.04); }
.js .sol-corpo { grid-template-rows: 0fr; }
/* 14/10, 09:18: o cartão aberto no mesmo verde das pílulas e mais largo que a coluna, entrando por cima da borda da
 * arte, como na Legora: é ali que a transparência aparece (o papel da arte e o fio dela vistos através do verde).
 * Entra só na margem vazia do papel (até 60 pixels além da coluna), para não cobrir o que a arte mostra; o texto
 * ocupa o cartão inteiro, sem o vazio à direita. 09:43: «ficou muito colado» (o print dele: o cartão parando quase
 * na borda do papel, porque a arte encolhe com a altura da janela e a borda dela anda); o cartão fica dentro da
 * coluna, a pelo menos 40 pixels do papel em qualquer tela. */
.js .sol-item.ativo { width: min(500px, calc(100% - 8px)); max-width: none; }
/* 14/10, 09:30: a troca sem o texto se espremer (o defeito que ele gravou: ao fechar, a caixa voltava na hora para
 * a largura do título e o texto, ainda sumindo, se reorganizava nela). O texto tem sempre a largura do cartão
 * aberto, medida pela coluna, e nunca se reorganiza: ao fechar, some antes de a caixa encolher; ao abrir, aparece
 * depois que ela cresceu. A largura da caixa anda junto com a altura onde o navegador sabe animar até o tamanho do
 * título (o Chrome e o Edge); nos outros, ela troca na hora, já sem o texto à vista. */
.js .sol-lista { container-type: inline-size; interpolate-size: allow-keywords; }
.js .sol-corpo p { width: min(500px, calc(100cqw - 8px)); max-width: none; opacity: 0; transition: opacity 140ms var(--ease); }
.js .sol-item.ativo .sol-corpo p { opacity: 1; transition: opacity 300ms var(--ease) 220ms; }
.js .sol-item.ativo .sol-corpo { grid-template-rows: 1fr; }
.js .sol-item.ativo .sol-pilula { height: 34px; padding-top: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.78); cursor: default; }
.js .sol-item.ativo .sol-pilula .mais { opacity: 0; transform: scale(0.6); }

/* O palco da arte: 640 por 560, centrado e escalado pelo motor (--escala) */
.sol-palco { position: absolute; left: 50%; top: 50%; width: 640px; height: 560px; margin: -280px 0 0 -320px; transform: scale(var(--escala, 1)); transform-origin: 50% 50%; }

@media (max-width: 900px) {
  .js .sol-grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; row-gap: 14px; padding-top: 8px; padding-bottom: 20px; }
  .js .sol-arte { grid-column: 1; grid-row: 1; }
  .js .sol-lista { grid-column: 1; grid-row: 2; }
  .js .sol-progresso { grid-column: 1; grid-row: 3; align-self: start; }
  .js .sol-item:not(.ativo) { display: none; }
  .js .sol-item.ativo { width: 100%; max-width: 100%; }
  .js .sol-corpo p { width: 100cqw; }
  .sol-corpo p { font-size: 15px; padding: 0 16px 15px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-item, .sol-corpo, .sol-pilula .mais, .js .sol-corpo p, .js .sol-item.ativo .sol-corpo p { transition: none; }
}