/* Cartões dos sistemas que a gente já entregou (fontes/sistemas.py): a vitrine do fim da avaliação,
   na página inicial, e a seção da página Sobre. As figuras são SVG; as animações são as classes v-*. */

.sistemas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sistema {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 18px 20px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: 16px;
  box-shadow: var(--sombra);
  transition: border-color .25s, box-shadow .3s, transform .5s var(--mola);
}
.sistema:hover { border-color: var(--linha-2); box-shadow: var(--sombra-alta); transform: translateY(-4px); }
.sistema__figura { height: 118px; margin: 0 0 8px; border-radius: 10px; background: var(--fundo); display: grid; place-items: center; overflow: hidden; }
.sistema__figura svg { height: 100px; width: auto; overflow: visible; }
.sistema__tag { align-self: flex-start; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--laranja); }
.sistema__titulo { margin: 0; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.sistema__texto { margin: 0; font-size: 14.5px; color: var(--tinta-2); line-height: 1.45; }
.sistema--mais {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 28px; padding: 26px 28px;
  background: var(--tinta); border-color: var(--tinta); color: #fff;
}
.sistema--mais .sistema__mais-numero { margin: 0; flex: none; }
@media (max-width: 640px) { .sistema--mais { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; } }
.sistema--mais:hover { border-color: var(--tinta); }
.sistema__mais-numero { margin: 4px 0 12px; font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; text-transform: uppercase; }
.sistema__mais-numero em { font-style: normal; color: var(--laranja-2); }
.sistema__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.sistema__lista li { padding: 5px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: 13px; color: #DDE3E0; }
.sistema .sistema__titulo { margin: 0; }
.sistema .sistema__texto { margin: 0; }
.fig-traco { stroke: #121A18; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-traco:not([fill]) { fill: none; }
.fig-fino { fill: none; stroke: #6B7873; stroke-width: 1.2; }
.v-fatia { stroke-dasharray: 100; stroke-dashoffset: 35; }

/* Página Sobre: a grade sai da coluna de texto e usa a largura da tela. */
@media (min-width: 900px) {
  .sistemas--pagina { width: min(1200px, 100vw - 2 * var(--gutter) - 20px); margin-left: 50%; transform: translateX(-50%); }
}
.sistemas--pagina { margin-top: 20px; margin-bottom: 8px; }
/* Página Como funciona: as peças do ecossistema, dentro da coluna de texto. */
.sistemas--eco { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 18px 0 14px; }
.sistemas--eco .sistema__titulo { font-size: 21px; }

@media (prefers-reduced-motion: no-preference) {
  /* Na vitrine o site.js marca .visivel quando o cartão entra na tela; na página Sobre (sem JS)
     o navegador faz isso sozinho com a animação ligada à rolagem, onde houver suporte. */
  .vitrine .sistema { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .6s var(--saida), transform .8s var(--mola), border-color .25s, box-shadow .3s; transition-delay: calc(var(--i) * 90ms); }
  .vitrine .sistema.visivel { opacity: 1; transform: none; }
  .vitrine .sistema.visivel:hover { transform: translateY(-4px); transition-delay: 0s; }

  .v-barra { transform-box: fill-box; transform-origin: bottom; animation: barra 3.2s var(--mola) infinite; animation-delay: calc(var(--i) * 120ms); }
  .v-linha { stroke-dasharray: 130; animation: rota 3.2s ease-in-out infinite; }
  .v-caminhao { animation: caminhao 4.4s cubic-bezier(.5,0,.2,1) infinite; }
  .v-peso { animation: peso 4.4s steps(1) infinite; }
  .v-nota { transform-box: fill-box; animation: nota 3.6s var(--mola) infinite; animation-delay: calc(var(--i) * 220ms); }
  .v-cartao { animation: cartao 4s cubic-bezier(.6,0,.2,1) infinite; }
  .v-ok { stroke-dasharray: 20; animation: ok 4s ease infinite; }
  .v-scan { animation: scan 1.8s ease-in-out infinite; }
  .v-feixe { animation: piscar 1.8s steps(1) infinite; }
  .v-tela { animation: tela 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * 400ms); }
  .v-rota { stroke-dasharray: 200; animation: rota 3.6s ease-in-out infinite; }
  .v-pino { transform-box: fill-box; transform-origin: bottom; animation: pino 3.6s var(--mola) infinite; }
  .v-balao { transform-box: fill-box; transform-origin: left bottom; animation: balao 4.2s var(--mola) infinite; animation-delay: calc(var(--i) * 450ms); }
  .v-sino { transform-box: fill-box; transform-origin: top; animation: sino 4.2s ease-in-out infinite; }
  .v-papel { animation: papel 3.6s var(--mola) infinite; }
  .v-led { animation: piscar 1.2s steps(1) infinite; }
  .v-ida { animation: ida 2.4s ease-in-out infinite; }
  .v-volta { animation: volta 2.4s ease-in-out infinite; animation-delay: 1.2s; }
  .v-capacete { animation: capacete 4s var(--mola) infinite; }
  .v-traco { stroke-dasharray: 100; animation: traco 4s ease-in-out infinite; }
  .v-selo { transform-box: fill-box; transform-origin: center; animation: balao 4s var(--mola) infinite; animation-delay: .6s; }
  .v-balanca { transform-box: view-box; transform-origin: 80px 22px; animation: balanca 3.6s ease-in-out infinite; }
  .v-no { transform-box: fill-box; transform-origin: center; animation: balao 4.2s var(--mola) infinite; animation-delay: calc(var(--i) * 220ms); }
  .v-barx { transform-box: fill-box; transform-origin: left; animation: barx 4s var(--mola) infinite; animation-delay: calc(var(--i) * 150ms); }
  .v-fatia { animation: fatia 4s var(--saida) infinite; }
  .v-lupa { animation: lupa 4s ease-in-out infinite; }
  .v-realce { animation: tela 4s ease-in-out infinite; }
  .v-dado { animation: ida 1.8s linear infinite; animation-delay: calc(var(--i) * 600ms); }
  .v-vivo { animation: piscar 1.6s steps(1) infinite; animation-delay: calc(var(--i) * 400ms); }
  .v-alerta { animation: piscar .6s steps(1) infinite; }
  .v-digita { transform-box: fill-box; transform-origin: left; animation: digita 4s steps(8, end) infinite; }
  .v-gira { transform-box: fill-box; transform-origin: center; animation: gira 7s linear infinite; }
  .v-corre { animation: corre 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 400ms); }
  .v-onda { transform-box: fill-box; transform-origin: center; animation: onda 2s ease-out infinite; }
  .v-achado { animation: surge 4s var(--saida) infinite; animation-delay: calc(var(--i) * 160ms); }
}
.v-num-a { opacity: 0; }
.v-ponteiro { transform-box: view-box; transform: rotate(38deg); }
@media (prefers-reduced-motion: no-preference) {
  .v-num-a { animation: num-a 2.4s steps(1) infinite; }
  .v-num-b { animation: num-b 2.4s steps(1) infinite; }
  .v-toque { animation: toque 2.4s ease-in-out infinite; }
  .v-ponteiro { animation: ponteiro 3.2s ease-in-out infinite alternate; }
  .v-agora { animation: agora 5s linear infinite; }
  .v-chave { transform-box: fill-box; transform-origin: 10% 90%; animation: chave 1.6s ease-in-out infinite; }
  .v-cai { transform-box: fill-box; animation: cai 3.6s var(--mola) infinite; animation-delay: calc(var(--i) * 350ms); }
  .v-erro { animation: erro 4s steps(1) infinite; }
}
@keyframes num-a { 0%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes num-b { 0%, 44% { opacity: 0; } 45%, 100% { opacity: 1; } }
@keyframes toque { 0%, 100% { transform: translateY(-7px); } 38%, 48% { transform: translateY(2px); } }
@keyframes ponteiro { from { transform: rotate(-65deg); } to { transform: rotate(52deg); } }
@keyframes agora { from { transform: translateX(0); } to { transform: translateX(96px); } }
@keyframes chave { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(16deg); } }
@keyframes cai { 0% { transform: translateY(-34px); opacity: 0; } 22%, 86% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes erro { 0%, 45% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sistemas--pagina .sistema, .sistemas--eco .sistema { animation: revelar linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes barra { 0% { transform: scaleY(.15); } 25%, 80% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }
@keyframes rota { 0% { stroke-dashoffset: 200; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -200; } }
@keyframes caminhao { 0% { transform: translateX(-140px); } 30%, 80% { transform: none; } 100% { transform: translateX(170px); } }
@keyframes peso { 0%, 30% { opacity: .15; } 34%, 80% { opacity: 1; } 84%, 100% { opacity: .15; } }
@keyframes nota { 0% { transform: translateY(-40px); opacity: 0; } 25%, 75% { transform: none; opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
@keyframes cartao { 0%, 15% { transform: none; } 45%, 85% { transform: translateX(100px); } 100% { transform: none; opacity: 0; } }
@keyframes ok { 0%, 45% { stroke-dashoffset: 20; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 20; } }
@keyframes scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(22px); } }
@keyframes tela { 0%, 100% { opacity: .25; } 30%, 70% { opacity: 1; } }
@keyframes pino { 0%, 50% { transform: translateY(-16px); opacity: 0; } 62% { transform: none; opacity: 1; } 70% { transform: scale(1.1, .9); } 78%, 95% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes balao { 0% { transform: scale(0); opacity: 0; } 12%, 85% { transform: none; opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
@keyframes sino { 0%, 60%, 100% { transform: none; } 64% { transform: rotate(14deg); } 68% { transform: rotate(-12deg); } 72% { transform: rotate(8deg); } 76% { transform: none; } }
@keyframes piscar { 50% { opacity: 0; } }
@keyframes papel { 0% { transform: translateY(-30px); } 35%, 85% { transform: none; opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
@keyframes ida { 0% { transform: none; opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(42px); opacity: 0; } }
@keyframes volta { 0% { transform: none; opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(-42px); opacity: 0; } }
@keyframes capacete { 0% { transform: translateY(-26px); opacity: 0; } 25%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes traco { 0%, 10% { stroke-dashoffset: 100; } 50%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes balanca { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes barx { 0% { transform: scaleX(.1); } 25%, 80% { transform: scaleX(1); } 100% { transform: scaleX(.1); } }
@keyframes fatia { 0% { stroke-dashoffset: 100; } 40%, 85% { stroke-dashoffset: 35; } 100% { stroke-dashoffset: 100; } }
@keyframes lupa { 0%, 100% { transform: none; } 50% { transform: translate(-44px, 16px); } }
@keyframes digita { 0% { transform: scaleX(0); } 35%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes surge { 0%, 30% { opacity: 0; transform: translateY(-6px); } 45%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes corre { 0% { transform: none; opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } }
@keyframes onda { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes revelar { from { opacity: 0; translate: 0 26px; scale: .98; } to { opacity: 1; translate: none; scale: none; } }