/* Sezione "Funzionalità attive": 6 card con illustrazioni CSS provvisorie.
   Ogni illustrazione è una tela di 100×56 cqw dentro .card__media: per usare un PNG
   basta sostituire il blocco .art con <img class="card__img">. */

.features { padding-top: 24px; }
.features .carousel { margin-top: 36px; }
@media (min-width: 768px) { .features { padding-top: 24px; } .features .carousel { margin-top: 48px; } }

.features .card__title { font-size: 1.375rem; }
@media (min-width: 1024px) { .features .card__title { font-size: 1.5rem; } }
.features .card__text { margin-bottom: 24px; }
.features .card .art { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; }

/* Elementi condivisi */
.f-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 2.6cqw;
  box-shadow: 0 1.6cqw 3.6cqw -1.6cqw rgba(85, 37, 131, 0.22);
}
.f-bar { display: block; height: 1.9cqw; border-radius: 1cqw; background: var(--color-purple-100); }
.f-text { font-family: var(--font-heading); font-weight: 600; font-size: max(10px, 3.6cqw); color: var(--color-ink); white-space: nowrap; }

/* 1 · Percorso dei ragazzi */
.fa-kid { left: 6cqw; top: 5cqw; width: 60cqw; padding: 4cqw; z-index: 2; }
.fa-kid__head { display: flex; align-items: center; gap: 3cqw; }
.fa-avatar {
  flex: none; display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%;
  background: var(--color-purple-100); color: var(--color-purple); font-family: var(--font-heading); font-weight: 600; font-size: max(9px, 3.4cqw);
}
.fa-kid__name { display: grid; gap: 1.6cqw; }
.fa-kid__name .f-bar:first-child { width: 22cqw; background: #CFC4DC; height: 2.2cqw; }
.fa-kid__name .f-bar:last-child { width: 15cqw; }
.fa-steps { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 5cqw; }
.fa-steps::before { content: ""; position: absolute; left: 2cqw; right: 2cqw; top: 50%; height: 0.8cqw; margin-top: -0.4cqw; background: var(--color-purple-100); }
.fa-step { position: relative; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #fff; border: 0.7cqw solid var(--color-purple-100); box-sizing: border-box; }
.fa-step--on { background: var(--color-purple); border-color: var(--color-purple); }
.fa-step--now { background: var(--color-yellow); border-color: var(--color-yellow); }
.fa-step--now::after { content: ""; position: absolute; inset: -0.7cqw; border-radius: 50%; border: 1px solid var(--color-yellow); animation: f-ring 2.8s ease-out infinite; }
@keyframes f-ring { 0% { transform: scale(1); opacity: 0.8; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
.fa-hist { display: grid; gap: 2.4cqw; margin-top: 4.5cqw; }
.fa-hist span { display: flex; align-items: center; gap: 2cqw; }
.fa-hist span::before { content: ""; flex: none; width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--color-teal); }
.fa-hist .f-bar { width: 70%; }
.fa-hist span:last-child .f-bar { width: 48%; }
.fa-log { left: 56cqw; top: 15cqw; width: 38cqw; padding: 4cqw 3.6cqw; --r: 3deg; transform: rotate(var(--r)); z-index: 1; display: grid; gap: 3cqw; }
.fa-log span { display: flex; align-items: center; gap: 2cqw; }
.fa-log span::before { content: ""; flex: none; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--c); }
.fa-log span:nth-child(1) { --c: var(--color-yellow); }
.fa-log span:nth-child(2) { --c: var(--color-teal); }
.fa-log span:nth-child(3) { --c: var(--color-purple); }
.fa-log .f-bar { flex: 1; }
.fa-medal {
  right: 5cqw; top: 3cqw; z-index: 3; display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%;
  background: var(--color-yellow); color: #fff; box-shadow: 0 1.2cqw 2.4cqw -0.8cqw rgba(122, 84, 0, 0.6); --r: 8deg;
}
.fa-medal svg { width: 6cqw; height: 6cqw; }

/* 2 · Quaderno di Caccia */
.fb-book { left: 9cqw; top: 7cqw; width: 82cqw; height: 43cqw; display: flex; border-radius: 2.4cqw; box-shadow: 0 1.6cqw 3.6cqw -1.6cqw rgba(85, 37, 131, 0.28); }
.fb-page { position: relative; flex: 1; padding: 5cqw 4.4cqw; background: #fff; border: 1px solid var(--color-line); }
.fb-page:first-child { border-radius: 2.4cqw 0 0 2.4cqw; border-right: 0; }
.fb-page:last-child { border-radius: 0 2.4cqw 2.4cqw 0; border-left: 0; }
.fb-book::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 6cqw; margin-left: -3cqw; background: linear-gradient(90deg, transparent, rgba(85, 37, 131, 0.1), transparent); pointer-events: none; }
.fb-title { width: 55%; height: 2.6cqw; border-radius: 1cqw; background: #CFC4DC; }
.fb-lines { display: grid; gap: 2.6cqw; margin-top: 4cqw; }
.fb-lines .f-bar:nth-child(2) { width: 88%; }
.fb-lines .f-bar:nth-child(3) { width: 70%; }
.fb-lines .f-bar:nth-child(4) { width: 80%; }
.fb-tent { position: absolute; left: 4.4cqw; top: 4.4cqw; width: 8cqw; height: 6.4cqw; background: var(--color-yellow-100); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fb-tent::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2.2cqw; height: 3.2cqw; margin-left: -1.1cqw; background: var(--color-yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fb-ribbon { right: 12cqw; top: 6cqw; width: 4.4cqw; height: 9cqw; background: var(--color-yellow); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); z-index: 2; }
.fb-mention {
  left: 52cqw; top: 36cqw; z-index: 3; display: flex; align-items: center; gap: 2cqw; padding: 1.8cqw 3.2cqw 1.8cqw 2cqw;
  border-radius: 999px; background: #fff; border: 1px solid var(--color-line); --r: -3deg;
  box-shadow: 0 1.4cqw 3cqw -1cqw rgba(85, 37, 131, 0.4);
}
.fb-mention i { display: block; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: var(--color-teal); }
.fb-mention b { font-family: var(--font-heading); font-size: max(10px, 3.6cqw); color: var(--color-purple); }
.fb-mention .f-bar { width: 12cqw; }

/* 3 · Calendario */
.fc-cal { left: 8cqw; top: 4cqw; width: 84cqw; height: 48cqw; overflow: hidden; }
.fc-head { position: absolute; inset: 0 0 auto 0; height: 7.5cqw; background: var(--color-purple); display: flex; align-items: center; gap: 2cqw; padding: 0 4cqw; }
.fc-head i { display: block; height: 2.2cqw; width: 20cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.85); }
.fc-head b { margin-left: auto; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.fc-head b + b { margin-left: 0; }
.fc-body {
  position: absolute; inset: 7.5cqw 0 0 0;
  background:
    radial-gradient(circle at 2cqw 2.2cqw, #D3C7E2 0.6cqw, transparent 0.7cqw) 0 0 / calc(100% / 7) 10.1cqw,
    linear-gradient(var(--color-line) 1px, transparent 1px) 0 0 / 100% 10.1cqw,
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px) 0 0 / calc(100% / 7) 100%;
}
.fc-ev { position: absolute; height: 3.8cqw; border-radius: 1.2cqw; background: var(--c); }
.fc-ev--a { --c: var(--color-purple); left: 12.8cqw; top: 4.8cqw; width: 22.4cqw; }
.fc-ev--b { --c: var(--color-teal); left: 36.8cqw; top: 14.9cqw; width: 34.4cqw; }
.fc-ev--c { --c: var(--color-teal); left: 0.8cqw; top: 25cqw; width: 22.4cqw; }
.fc-ev--d { --c: var(--color-coral); left: 48.8cqw; top: 25cqw; width: 22.4cqw; }
.fc-ev--e { --c: var(--color-purple); left: 24.8cqw; top: 35.1cqw; width: 22.4cqw; }
.fc-ev--f { --c: var(--color-yellow); left: 72.8cqw; top: 4.8cqw; width: 10.4cqw; }
.fc-today { position: absolute; left: 60cqw; top: 11.3cqw; width: 4.4cqw; height: 4.4cqw; margin: 0; }

/* 4 · Cassa */
.fd-ledger { left: 6cqw; top: 6cqw; width: 62cqw; padding: 2cqw 3.6cqw; z-index: 1; }
.fd-row { display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 0; }
.fd-row + .fd-row { border-top: 1px solid var(--color-line); }
.fd-ico { flex: none; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--bg); color: var(--fg); font-family: var(--font-heading); font-weight: 600; font-size: max(10px, 3.8cqw); }
.fd-row--in { --bg: #C4ECE2; --fg: #12806B; }
.fd-row--out { --bg: #FBD8D1; --fg: #C9402C; }
.fd-main { flex: 1; display: grid; gap: 1.6cqw; }
.fd-main .f-bar:first-child { width: 80%; background: #CFC4DC; }
.fd-main .f-bar:last-child { width: 52%; }
.fd-amt { flex: none; width: 11cqw; height: 2.4cqw; border-radius: 1cqw; background: var(--fg); opacity: 0.75; }
.fd-receipt {
  right: 4cqw; top: 11cqw; width: 31cqw; height: 40cqw; z-index: 2; --r: 5deg; transform: rotate(var(--r));
  filter: drop-shadow(0 1.4cqw 2.2cqw rgba(85, 37, 131, 0.28));
}
.fd-paper {
  position: absolute; inset: 0; padding: 4.4cqw 3.6cqw; background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 91% 100%, 82% 95%, 73% 100%, 64% 95%, 55% 100%, 46% 95%, 37% 100%, 28% 95%, 19% 100%, 10% 95%, 0 100%);
}
.fd-paper .f-bar:first-child { width: 60%; background: #CFC4DC; }
.fd-paper .f-lines { display: grid; gap: 2.4cqw; margin-top: 4cqw; }
.fd-paper .f-lines .f-bar:nth-child(2) { width: 85%; }
.fd-paper .f-lines .f-bar:nth-child(3) { width: 65%; }
.fd-total { margin-top: 5cqw; padding-top: 3cqw; border-top: 1.5px dashed #D3C7E2; display: flex; justify-content: space-between; align-items: center; }
.fd-total i { display: block; width: 10cqw; height: 2.4cqw; border-radius: 1cqw; background: var(--color-purple); }
.fd-total .f-bar { width: 8cqw; }
.fd-clip { right: 28cqw; top: 8cqw; z-index: 3; display: grid; place-items: center; width: 7.6cqw; height: 7.6cqw; border-radius: 50%; background: var(--color-yellow); color: #fff; box-shadow: 0 1cqw 2cqw -0.6cqw rgba(122, 84, 0, 0.6); }
.fd-clip svg { width: 4.2cqw; height: 4.2cqw; }

/* 5 · Passaggio d'anno */
.fe-year { top: 9cqw; width: 34cqw; height: 38cqw; padding: 4cqw 3.6cqw; }
.fe-year--old { left: 5cqw; opacity: 0.88; }
.fe-year--new { right: 5cqw; }
.fe-pill { display: inline-block; padding: 0.8cqw 2.6cqw; border-radius: 999px; font-family: var(--font-heading); font-weight: 600; font-size: max(9px, 3cqw); background: var(--color-purple-100); color: var(--color-purple); }
.fe-year--new .fe-pill { background: var(--color-yellow-100); color: var(--color-yellow-800); }
.fe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw; margin-top: 5cqw; justify-items: center; }
.fe-av { width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: var(--c, var(--color-purple-100)); }
.fe-av--k1 { --c: #CDB9E4; } .fe-av--k2 { --c: #E1D3EF; } .fe-av--k3 { --c: #B79CD6; }
.fe-av--c { --c: var(--color-yellow); }
.fe-av--new { background: transparent; border: 1.5px dashed #C9BCD8; box-sizing: border-box; }
.fe-trail { left: 41cqw; top: 27.6cqw; width: 18cqw; height: 0; border-top: 1.5px dashed #C9BCD8; }
.fe-trail::after { content: ""; position: absolute; right: -0.4cqw; top: -1.7cqw; width: 2.6cqw; height: 2.6cqw; border-top: 1.5px solid #B79CD6; border-right: 1.5px solid #B79CD6; transform: rotate(45deg); }
.fe-fly { left: 38cqw; width: 5.2cqw; height: 5.2cqw; border-radius: 50%; background: var(--c); box-shadow: 0 0.8cqw 1.6cqw -0.6cqw rgba(85, 37, 131, 0.45); opacity: 0; animation: f-fly 6s ease-in-out infinite; animation-delay: var(--d); z-index: 2; }
.fe-fly--1 { top: 20cqw; --c: #B79CD6; --d: 0s; }
.fe-fly--2 { top: 25cqw; --c: var(--color-yellow); --d: 2s; }
.fe-fly--3 { top: 30cqw; --c: #CDB9E4; --d: 4s; }
@keyframes f-fly {
  0% { transform: translateX(-3cqw); opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(20cqw); opacity: 0; }
}

/* 6 · Gestione del gruppo */
.fg-lines { inset: 0; width: 100%; height: 100%; overflow: visible; }
.fg-lines path { fill: none; stroke: #C9BCD8; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; animation: f-dash 8s linear infinite; }
@keyframes f-dash { to { stroke-dashoffset: -28; } }
.fg-node { translate: -50% 0; padding: 1.6cqw 4cqw; border-radius: 2.2cqw; text-align: center; border: 1px solid var(--color-line); background: #fff; box-shadow: 0 1.2cqw 2.8cqw -1.2cqw rgba(85, 37, 131, 0.3); }
.fg-node .f-text { font-size: max(10px, 3.8cqw); }
.fg-node--top { left: 50cqw; top: 3cqw; background: var(--color-purple); border-color: var(--color-purple); }
.fg-node--top .f-text { color: #fff; }
.fg-node--a { left: 24.5cqw; top: 21cqw; background: var(--color-yellow-100); border-color: var(--color-yellow-border); }
.fg-node--b { left: 75.5cqw; top: 21cqw; background: var(--color-purple-50); border-color: var(--color-purple-100); }
.fg-chip { translate: -50% 0; top: 40cqw; padding: 1.4cqw 2.6cqw; border-radius: 999px; background: #fff; border: 1px solid var(--color-line); font-family: var(--font-body); font-weight: 600; font-size: max(9px, 2.9cqw); color: var(--color-muted); white-space: nowrap; }
.fg-chip::before { content: ""; display: inline-block; width: 1.8cqw; height: 1.8cqw; margin-right: 1.4cqw; border-radius: 50%; background: var(--c); vertical-align: 0.1cqw; }
.fg-chip--1 { left: 13cqw; --c: var(--color-yellow); } .fg-chip--2 { left: 36cqw; --c: var(--color-yellow); }
.fg-chip--3 { left: 64cqw; --c: var(--color-purple); } .fg-chip--4 { left: 87cqw; --c: var(--color-purple); }

/* Floating coerente con la sezione "problema" */
.fa-log.art__float, .fb-mention.art__float, .fd-receipt.art__float { animation-name: art-float; }

@media (prefers-reduced-motion: reduce) {
  .fa-step--now::after, .fg-lines path { animation: none; }
  .fe-fly { animation: none; opacity: 0.9; transform: translateX(8cqw); }
}

/* 7 · Lista d'attesa */
.fw-list { left: 7cqw; top: 6cqw; width: 86cqw; padding: 2cqw 4cqw; }
.fw-row { display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 0; }
.fw-row + .fw-row { border-top: 1px solid var(--color-line); }
.fw-av { flex: none; width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: var(--color-purple-100); }
.fw-name { flex: 1; max-width: 30cqw; background: #CFC4DC; height: 2.2cqw; }
.fw-chip { margin-left: auto; width: 14cqw; height: 4.2cqw; border-radius: 999px; border: 1px solid transparent; }
.fw-chip--y { background: var(--color-yellow-100); border-color: var(--color-yellow-border); }
.fw-chip--t { background: #C4ECE2; }
.fw-chip--p { background: var(--color-purple-100); }
.fw-badge { right: 4cqw; top: 1cqw; z-index: 3; display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--color-yellow); color: #fff; box-shadow: 0 1.2cqw 2.4cqw -0.8cqw rgba(122, 84, 0, 0.6); --r: 8deg; }
.fw-badge svg { width: 5cqw; height: 5cqw; }

/* Card cliccabili (link esteso all'intera card, senza cambiare l'aspetto) */
.features .card { position: relative; }
.card__stretch { color: inherit; text-decoration: none; }
.card__stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__stretch:focus-visible { outline: none; }
.card__stretch:focus-visible::after { outline: 3px solid var(--color-purple); outline-offset: -4px; }
@media (hover: hover) {
  .features .card:hover { border-color: #D7C8E6; }
}

/* Pulsante "Guarda la demo" sotto l'illustrazione: sopra il link esteso, così resta cliccabile da solo */
.card__cta { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 20px; }
/* L'illustrazione è decorativa: i clic la attraversano e arrivano al link esteso della card */
.features .card__media { pointer-events: none; }