/* composicao.css — as peças que montam a página em vez de pintá-la.
 *
 * Três ideias, e as três vieram de ler o Granola rodando:
 *
 *   janela   o print não flutua solto, ele mora numa moldura de aplicativo,
 *            com os três pontos no topo. Sem a moldura o print parece
 *            captura de tela; com ela parece programa.
 *   colagem  cartões que se sobrepõem em vez de se enfileirar. É o que dá
 *            profundidade sem sombra pesada e sem ilustração inventada.
 *   grudado  uma coluna fica parada enquanto a outra rola. É a animação que
 *            o Granola usa, e ela não precisa de biblioteca nenhuma: é
 *            `position: sticky` e mais nada.
 *
 * Nenhuma delas roda em quem pediu menos movimento: o bloco de
 * prefers-reduced-motion no fim desfaz o gruda e o flutua.
 */

/* ---------- janela ---------- */

.janela {
  margin: 0;
  border-radius: 16px;
  border: 1px solid var(--linha);
  background: var(--papel-fundo);
  overflow: hidden;
  box-shadow: var(--sombra-tela);
}

.janela-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linha);
  background: var(--papel-fundo);
}

.janela-topo span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tinta-fraca);
  opacity: 0.45;
}

/* Os três pontos coloridos são do macOS, e a página é sobre um programa de
   Mac. Cinza neles seria fingir que a moldura é genérica. */
.janela-topo span:nth-child(1) { background: #E5674E; opacity: 1; }
.janela-topo span:nth-child(2) { background: #E3B341; opacity: 1; }
.janela-topo span:nth-child(3) { background: #7BA352; opacity: 1; }

.janela img { width: 100%; height: auto; display: block; }

/* ---------- colagem ---------- */

.colagem { position: relative; }

/* O cartão que sai por cima da janela. Ele é o detalhe que faz a imagem
   parecer montada e não colada, e some no celular, onde não há margem para
   ele existir sem tapar o print. */
.papelzinho {
  position: absolute;
  z-index: 2;
  max-width: 290px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--linha);
  background: var(--papel);
  box-shadow: 0 22px 44px -22px rgba(26, 24, 20, 0.34);
}

.papelzinho-rotulo {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-bottom: 8px;
}

.papelzinho p {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.papelzinho-pe { font-size: 13px; color: var(--tinta-media); margin-top: 10px; }

/* Os dois ficam DENTRO da largura da página. Deslocamento negativo para fora
   da coluna dava rolagem lateral no desktop, e rolagem lateral numa landing é
   o defeito que a pessoa sente sem saber nomear. O cartão continua por cima
   da janela, que é o efeito que interessa. */
.papelzinho-alto { top: -22px; right: 18px; }
.papelzinho-baixo { bottom: -26px; left: 18px; }

/* A pílula de gravando. O ponto pisca porque é o único movimento da página
   que significa alguma coisa: ele diz que a coisa está acontecendo agora. */
.pilula {
  position: absolute;
  z-index: 3;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--papel);
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(26, 24, 20, 0.4);
}

.pilula-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C8553D;
  animation: pulsa 1.8s ease-in-out infinite;
}

@keyframes pulsa {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ---------- coluna grudada ---------- */

.grudado {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(48px, 5vw, 80px);
  max-width: 1180px;
  align-items: start;
}

.grudado-texto { position: sticky; top: 108px; }
.grudado-texto h2 { max-width: 16ch; }
.grudado-texto > p { color: var(--tinta-media); margin-top: 24px; max-width: 46ch; }

.grudado-pilha { display: grid; gap: clamp(56px, 8vw, 104px); }

/* ---------- linhas com ícone ---------- */

.linhas { display: grid; margin-top: 38px; }

.linha-icone {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--linha);
}
.linha-icone:last-child { border-bottom: 1px solid var(--linha); }

.linha-icone svg {
  width: 26px;
  height: 26px;
  stroke: var(--verde);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.linha-icone strong { font-weight: 600; }
.linha-icone p { font-size: 15px; color: var(--tinta-media); margin-top: 3px; }

/* ---------- passos com marcador grudado ---------- */

.passo { display: grid; gap: 22px; }
.passo h3 { max-width: 26ch; }
.passo > p { color: var(--tinta-media); max-width: 58ch; }

/* ---------- celular ---------- */

@media (max-width: 880px) {
  .grudado { grid-template-columns: 1fr; gap: 44px; }
  .grudado-texto { position: static; }
  .papelzinho { display: none; }
  .pilula { bottom: 12px; font-size: 13px; padding: 7px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .grudado-texto { position: static; }
  .pilula-ponto { animation: none; }
}