/* sol-a: a pilha (V6, 13/10/2026). A Legora ao pé da letra, na pele do Plexus: uma pilha isométrica de placas de
 * vidro, uma por parte, com o nome escrito no plano da placa; na parte 1 os sete aplicativos caem como ladrilhos sobre
 * a placa das integrações e acendem uma linha verde até o Plexus, no centro; no fim, uma caixa de vidro fecha a pilha
 * com o laço em cima. O desenho é feito em CSS 3D (sem perspectiva, como a Legora), num palco de 640 por 560 que o
 * motor escala. O estado de tudo sai do rolar (sol-a.js); aqui só a forma e a cor. */

/* O fundo da seção: o cinza claro em degradê da Legora, puxado para o papel */
.sol[data-op="a"] .sol-fixo {
  background:
    radial-gradient(60% 55% at 66% 62%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #e4e3dd 0%, #eae9e4 34%, #f3f2ee 68%, #fafaf9 100%);
}

.sol[data-op="a"] .pa { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-ui); font-weight: 400; color: var(--ink); }
.sol[data-op="a"] .pa-zoom { position: absolute; inset: 0; transform-origin: 320px 300px; }
.sol[data-op="a"] .pa-cam { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.sol[data-op="a"] .pa-mundo { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(60deg) rotateZ(45deg); }
.sol[data-op="a"] .pa-placa,
.sol[data-op="a"] .pa-grupo,
.sol[data-op="a"] .pa-bloco { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.sol[data-op="a"] .pa-grupo { width: 0; height: 0; }
.sol[data-op="a"] .pa-bloco > * { position: absolute; opacity: var(--o, 1); }

/* O vidro de uma placa: a face de cima, o fundo visto através dela e as laterais da frente */
.sol[data-op="a"] .pa-face,
.sol[data-op="a"] .pa-fundo { left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--r); box-sizing: border-box; }
.sol[data-op="a"] .pa-face {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 41%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(250, 250, 248, 0.42) 50%, rgba(226, 225, 219, 0.5) 100%);
  border: 1px solid rgba(27, 27, 25, 0.34);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), inset 0 0 0 4px rgba(255, 255, 255, 0.28), inset 0 0 34px rgba(255, 255, 255, 0.55), inset -10px -10px 26px rgba(27, 27, 25, 0.05);
}
.sol[data-op="a"] .pa-fundo { background: rgba(27, 27, 25, 0.06); border: 1px solid rgba(27, 27, 25, 0.5); }
.sol[data-op="a"] .pa-parede {
  left: 0; top: 0; transform-origin: 0 0;
  --a: calc(0.66 - 0.26 * var(--l, 0));
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.55) 14%,
    rgba(27, 27, 25, var(--a)) 34%, rgba(27, 27, 25, calc(var(--a) + 0.24)) 62%,
    rgba(120, 119, 114, calc(var(--a) * 0.7)) 82%, rgba(27, 27, 25, calc(var(--a) + 0.1)) 100%);
}
/* o nome da placa, no plano dela, como «Large Language Models» na Legora */
.sol[data-op="a"] .pa-nome {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: -17px; height: 34px;
  font-size: 28px; line-height: 34px; letter-spacing: -0.012em; text-align: center; white-space: nowrap;
  color: rgba(27, 27, 25, 0.88);
}
/* o nome das placas de baixo, visto através do vidro de cima */
.sol[data-op="a"] .pa-placa.sob .pa-nome { filter: blur(1.5px); }

/* A sombra macia embaixo da pilha */
.sol[data-op="a"] .pa-chao { position: absolute; left: -195px; top: -195px; width: 390px; height: 390px; border-radius: 40px; background: rgba(27, 27, 25, 0.16); filter: blur(22px); }

/* Os ladrilhos (a parte 1: os aplicativos; o Plexus no centro) */
.sol[data-op="a"] .pa-lad .pa-face {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.78) 55%, rgba(240, 239, 235, 0.8) 100%);
  border: 1px solid rgba(27, 27, 25, 0.24);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.95), inset 0 0 16px rgba(255, 255, 255, 0.8);
}
.sol[data-op="a"] .pa-lad .pa-fundo { background: rgba(255, 255, 255, 0.35); border-color: rgba(27, 27, 25, 0.28); }
.sol[data-op="a"] .pa-lad .pa-parede {
  --a: calc(0.3 - 0.14 * var(--l, 0));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.7) 22%,
    rgba(27, 27, 25, var(--a)) 55%, rgba(27, 27, 25, calc(var(--a) + 0.16)) 100%);
}
/* o ladrilho aceso: a borda verde por dentro */
.sol[data-op="a"] .pa-aceso {
  left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--r); box-sizing: border-box;
  border: 1.5px solid rgba(74, 100, 60, 0.85); background: rgba(74, 100, 60, 0.07);
  box-shadow: 0 0 10px rgba(74, 100, 60, 0.35), inset 0 0 10px rgba(74, 100, 60, 0.18);
  opacity: calc(var(--o, 1) * var(--g, 0));
}
/* o logo de pé, de frente para quem olha */
.sol[data-op="a"] .pa-logo { width: 34px; height: 34px; transform-origin: 50% 50%; }
.sol[data-op="a"] .pa-logo img, .sol[data-op="a"] .pa-logo svg { display: block; width: 100%; height: 100%; }
.sol[data-op="a"] .pa-no .pa-logo { width: 34px; height: 35.7px; color: rgba(27, 27, 25, 0.42); }
.sol[data-op="a"] .pa-no .pa-logo.verde { color: var(--accent); opacity: calc(var(--o, 1) * var(--g, 0)); }
/* a sombra de cada ladrilho na placa: firma quando ele assenta */
.sol[data-op="a"] .pa-sombra-l { position: absolute; border-radius: 14px; background: rgba(27, 27, 25, 0.22); filter: blur(5px); }

/* a luz verde na placa quando o Plexus acende */
.sol[data-op="a"] .pa-halo { position: absolute; left: 0; top: 0; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(74, 100, 60, 0.2), rgba(74, 100, 60, 0.07) 55%, rgba(74, 100, 60, 0) 100%); opacity: 0; }

/* As linhas verdes, dos ladrilhos até o centro */
.sol[data-op="a"] .pa-fio {
  position: absolute; left: 0; top: 0; height: 2.5px; margin-top: -1.25px; border-radius: 1px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(74, 100, 60, 0.35), #4a643c);
  box-shadow: 0 0 5px rgba(74, 100, 60, 0.45);
}
.sol[data-op="a"] .pa-faisca { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #6f8f5c; box-shadow: 0 0 8px 2px rgba(74, 100, 60, 0.55); }

/* Os ladrilhos de texto das partes 2 a 7, com a letra no plano deles (como «Word Add-in» na Legora) */
.sol[data-op="a"] .pa-txt .pa-face {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 13px;
  font-size: 15px; line-height: 1.22; color: var(--ink); text-align: left;
}
.sol[data-op="a"] .pa-txt .t1 { display: flex; align-items: center; gap: 8px; white-space: nowrap; letter-spacing: -0.005em; }
.sol[data-op="a"] .pa-txt .t2 { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.sol[data-op="a"] .pa-txt img { width: 17px; height: 17px; flex: none; }
.sol[data-op="a"] .pa-txt img.mini { width: 14px; height: 14px; }
.sol[data-op="a"] .pa-txt .ic { width: 16px; height: 16px; flex: none; display: block; }
.sol[data-op="a"] .pa-txt.cartao .pa-face { justify-content: flex-start; padding: 11px 14px; gap: 5px; }
.sol[data-op="a"] .pa-txt.cartao .t1 { white-space: normal; }
.sol[data-op="a"] .pa-txt .ops { display: flex; gap: 6px; margin-top: 3px; }
.sol[data-op="a"] .pa-txt .op { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(27, 27, 25, 0.16); background: rgba(255, 255, 255, 0.9); font-size: 13px; color: var(--ink-soft); }
.sol[data-op="a"] .pa-txt .op.sim { background: var(--accent); border-color: var(--accent); color: #fff; }
.sol[data-op="a"] .pa-txt .troca { display: inline-grid; }
.sol[data-op="a"] .pa-txt .troca > span { grid-area: 1 / 1; display: flex; align-items: center; }
.sol[data-op="a"] .pa-txt .troca .antes { opacity: calc(1 - var(--g, 0)); }
.sol[data-op="a"] .pa-txt .troca .depois { opacity: var(--g, 0); }
.sol[data-op="a"] .pa-txt .t2.troca .depois { color: var(--accent); }
.sol[data-op="a"] .pa-txt .onda { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; }
.sol[data-op="a"] .pa-txt .onda i { width: 3px; border-radius: 2px; background: rgba(27, 27, 25, 0.55); }
.sol[data-op="a"] .pa-txt .dur { font-size: 13px; color: var(--ink-soft); }
.sol[data-op="a"] .pa-txt.selo .pa-face { align-items: center; padding: 0; font-size: 17px; }

/* A caixa de vidro do fim: fosca, maior que as placas, com o laço em verde em cima */
.sol[data-op="a"] .pa-caixa .pa-face {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.45) 40%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.93) 0%, rgba(252, 252, 250, 0.74) 55%, rgba(238, 237, 232, 0.78) 100%);
  border: 1px solid rgba(27, 27, 25, 0.24);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), inset 0 0 0 6px rgba(255, 255, 255, 0.3), inset 0 0 44px rgba(255, 255, 255, 0.7);
}
.sol[data-op="a"] .pa-caixa .pa-fundo { background: none; border-color: rgba(27, 27, 25, 0.16); }
.sol[data-op="a"] .pa-caixa .pa-parede {
  --a: calc(0.5 - 0.1 * var(--l, 0));
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.96) 0px, rgba(255, 255, 255, 0.7) 6px,
    rgba(250, 250, 248, var(--a)) 40%, rgba(242, 241, 237, calc(var(--a) + 0.08)) 100%);
  box-shadow: inset 0 -2px 0 rgba(27, 27, 25, 0.22);
}
.sol[data-op="a"] .pa-laco { width: 150px; height: 157.6px; color: #2f4127; transform-origin: 50% 50%; opacity: calc(var(--o, 1) * var(--g, 0)); }
.sol[data-op="a"] .pa-laco.topo { color: var(--accent); }
.sol[data-op="a"] .pa-laco.sombra { color: rgba(46, 63, 37, 0.32); filter: blur(5px); }

/* Os selos de vidro do primeiro dia, flutuando ao lado da pilha */
.sol[data-op="a"] .pa-selos { position: absolute; left: 0; top: 0; width: 640px; height: 560px; }
.sol[data-op="a"] .pa-selo {
  position: absolute; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 11px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.56));
  border: 1px solid rgba(27, 27, 25, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(27, 27, 25, 0.06), 0 16px 34px rgba(27, 27, 25, 0.11);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 15px; line-height: 1.25; color: var(--ink); white-space: nowrap; opacity: 0;
}
.sol[data-op="a"] .pa-selo .l { display: flex; align-items: center; gap: 9px; }
.sol[data-op="a"] .pa-selo .l i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(74, 100, 60, 0.14); flex: none; }
.sol[data-op="a"] .pa-selo .n { color: var(--accent); }
.sol[data-op="a"] .pa-selo .papeis { display: flex; gap: 5px; padding-left: 17px; }
.sol[data-op="a"] .pa-selo .papeis span { display: inline-flex; align-items: center; height: 23px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.sol[data-op="a"] .pa-selo.s1 { left: 368px; top: 130px; }
.sol[data-op="a"] .pa-selo.s2 { left: 398px; top: 420px; }

/* O celular: a pilha maior dentro do palco, e os selos em cima e embaixo dela */
@media (max-width: 900px) {
  .sol[data-op="a"] .pa-zoom { transform: scale(1.22); }
  .sol[data-op="a"] .pa-nome { font-size: 32px; }
  .sol[data-op="a"] .pa-selo { font-size: 22px; gap: 10px; padding: 13px 18px 14px; border-radius: 20px; }
  .sol[data-op="a"] .pa-selo .l i { width: 11px; height: 11px; }
  .sol[data-op="a"] .pa-selo .papeis { padding-left: 20px; gap: 7px; }
  .sol[data-op="a"] .pa-selo .papeis span { font-size: 18px; height: 32px; padding: 0 12px; }
  .sol[data-op="a"] .pa-selo.s1 { left: 6px; top: -40px; }
  .sol[data-op="a"] .pa-selo.s2 { left: auto; right: 6px; top: 506px; }
}