/* Sezione "I dati che hai già, senza ricominciare da zero": due card affiancate (importazione da BuonaStrada, esportazione verso Bilancio AGESCI). */

.agesci { padding-top: 24px; }
.agesci__grid { margin-top: 36px; gap: 16px; }

.agesci__card {
  background: var(--color-purple-50);
  border-color: var(--color-purple-100);
}

/* Percorso del dato: origine → destinazione */
.agesci__flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.agesci__node {
  padding: 8px 14px;
  border: 1px solid var(--color-purple-100);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}
.agesci__node--brand { border-color: var(--color-purple); background: var(--color-purple); color: #fff; }
.agesci__arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-yellow-100);
  border: 1px solid var(--color-yellow-border);
  color: var(--color-yellow-800);
}
.agesci__arrow svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .agesci__arrow svg { animation: agesci-nudge 2.8s var(--ease) infinite; }
}
@keyframes agesci-nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(3px); } }

.agesci__card .card__text { margin-top: 10px; }

/* Estensione Chrome: parte importante del funzionamento, quindi ben visibile */
.agesci__ext {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 20px 0 0;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-line);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-purple);
}
.agesci__ext svg { width: 18px; height: 18px; }

@media (min-width: 768px) {
  .agesci { padding-top: 40px; }
  .agesci__grid { margin-top: 48px; gap: 24px; }
  .agesci__card { padding: 32px; }
  .agesci__ext { margin-top: auto; }
  .agesci__card .card__text { margin-bottom: 20px; }
}