/* UAIprimora · página IA aplicada (2026-10-07): o mini painel dentro dos cartões de exemplo e a segunda grade espelhada.
   Só esta página carrega este arquivo, depois de estilo.css. Cores só de variáveis de :root, em pares já conferidos
   em estilo.css (tinta e --v2-texto sobre --papel, REQ-20). */

/* ---------- topo: o desenho numa faixa própria, acima do título (ajustes visuais, pedido de Lucas, 2026-10-07) ----------
   Antes o desenho ocupava o topo inteiro e o título passava por cima do prisma e do anel. Agora a arte entra no fluxo,
   com a proporção do recorte do index.html (viewBox 0 140 1440 420), e o texto vem logo abaixo, sem sobreposição.
   A faixa começa em 120 px: a trilha fica à esquerda e o alto do desenho (anel e cruz) no centro, sem se tocarem;
   assim, em 1366 × 768, título e botão cabem na primeira tela com folga. */
.pagina-topo[data-pagina="ia-aplicada"] { justify-content: flex-start; padding-top: 120px; }
.pagina-topo[data-pagina="ia-aplicada"] .pagina-arte { position: relative; inset: auto; flex: none; aspect-ratio: 1440 / 420; }
.pagina-topo[data-pagina="ia-aplicada"] .pagina-topo-texto { margin-top: 20px; }

/* ---------- exemplos: o painel dentro do cartão usa o papel da seção, como a conversa (.exemplo .conversa) ---------- */
.exemplo .painel { margin-top: 22px; background: var(--papel); border: 0; padding: 20px 22px; gap: 12px; }
.exemplo .painel-linha:first-child { border-top: 0; padding-top: 0; }

/* ---------- segunda grade: o cartão grande à direita, para as duas grades não repetirem o mesmo desenho ---------- */
.exemplos + .exemplos { margin-top: 28px; }
.exemplos.exemplos-inverso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.exemplos-inverso > :first-child { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- movimento (2026-10-07): peças criadas por js/pagina-ia-aplicada.js, todas decorativas (aria-hidden) ----------
   Só a faixa de leitura nasce fora do movimento reduzido; traço e marca de enviado aparecem inteiros e parados nele. */
/* gancho: faixa de leitura que varre o painel uma vez (tinta de 8% sobre o branco: #C21F28 segue acima de 5:1) */
.painel.ia-lendo { position: relative; overflow: hidden; }
.ia-varredura { position: absolute; left: 0; right: 0; top: 0; height: 72px; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(232, 71, 79, 0), rgba(232, 71, 79, .08)); border-bottom: 1px solid rgba(215, 38, 47, .45); }

/* o que a IA faz: traço vermelho na borda de cima do cartão, desenhado da esquerda para a direita */
.ia-traco { position: absolute; top: -1px; left: 26px; right: 26px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--cor, var(--v1)), rgba(232, 71, 79, 0)); }

/* follow-up: marca de enviado no fim de cada linha */
.ia-seguimento .painel-linha { grid-template-columns: auto 1fr auto; }
.ia-envio { position: relative; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--v2-texto); display: grid; place-items: center; }
.ia-envio svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ia-envio-anel { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--v2-texto); pointer-events: none; }

@media (max-width: 1100px) {
  .exemplos.exemplos-inverso { grid-template-columns: 1fr; }
  .exemplos-inverso > :first-child { grid-column: auto; grid-row: auto; }
}
@media (max-width: 760px) {
  .exemplo .painel { padding: 18px; }
  /* celular: faixa baixa, centrada nas regras e no prisma (o recorte corta só as pontas do desenho) */
  .pagina-topo[data-pagina="ia-aplicada"] { padding-top: 128px; }
  .pagina-topo[data-pagina="ia-aplicada"] .pagina-arte { aspect-ratio: auto; height: 190px; }
  .pagina-topo[data-pagina="ia-aplicada"] .pagina-topo-texto { margin-top: 20px; }
}