/* Pagine dei software (Registro 31/10/2026 «Pagine dei software»): sezioni «scheda», «correlati», «catalogo» e la
   variante «emblema» dell'eroe. Caricato da contenuti/modelli/sezioni.html.twig solo se la pagina le usa.
   Il tono segue l'area del software (classi tono-*, nessuno stile in linea: CSP). */

.tono-entrate { --tono: var(--rosso); }
.tono-territorio { --tono: #0f8a7e; }
.tono-servizi { --tono: #7a4fd6; }
.tono-piattaforma { --tono: var(--blu); }
.tono-oesis { --tono: var(--rosso); }

/* ---------- Eroe «emblema» ---------- */
.sx-eroe--emblema { overflow: hidden; }
.sw-emblema { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }
.sw-emblema__orbita { position: absolute; inset: 6%; border: 1.5px dashed color-mix(in srgb, var(--tono) 30%, transparent); border-radius: 50%; animation: sw-gira 60s linear infinite; }
.sw-emblema__orbita--2 { inset: 20%; border-style: solid; border-color: color-mix(in srgb, var(--tono) 12%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--tono) 12%, transparent), transparent 70%); animation-direction: reverse; animation-duration: 90s; }
.sw-emblema__tessera { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; gap: .35rem;
  width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 30%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tono) 82%, #fff), var(--tono) 55%, color-mix(in srgb, var(--tono) 70%, #000));
  box-shadow: 0 30px 60px -22px color-mix(in srgb, var(--tono) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
  color: #fff; text-align: center; animation: az-arriva 1.1s var(--molla) backwards, sw-respira 7s 1.2s ease-in-out infinite; }
.sw-emblema__tessera .ic { width: 38%; height: auto; aspect-ratio: 1; stroke-width: 1.4; }
.sw-emblema__tessera b { padding: 0 .6rem; font-family: var(--f-titoli); font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.sw-emblema__tessera small { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.sw-emblema__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem .5rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); box-shadow: var(--ombra-m); font-size: .84rem; font-weight: 600; white-space: nowrap; color: var(--inchiostro);
  animation: az-arriva 1s var(--molla) backwards, az-galleggia 7s ease-in-out infinite; }
.sw-emblema__chip .ic { color: var(--tono); }
.sw-emblema__chip--1 { left: -2%; top: 14%; animation-delay: .5s, 1.5s; }
.sw-emblema__chip--2 { right: -4%; top: 22%; animation-delay: .65s, 2.6s; }
.sw-emblema__chip--3 { left: -6%; top: 62%; animation-delay: .8s, 3.4s; }
.sw-emblema__chip--4 { right: -2%; top: 70%; animation-delay: .95s, 1.9s; }
.sw-emblema__chip--5 { left: 30%; top: 2%; animation-delay: 1.1s, 4.1s; }
.sw-emblema__chip--6 { left: 26%; bottom: 1%; animation-delay: 1.25s, 2.2s; }
.sw-emblema__punto { left: auto; right: 22%; top: 16%; }
@keyframes sw-gira { to { transform: rotate(360deg); } }
@keyframes sw-respira { 0%, 100% { scale: 1; } 50% { scale: 1.03; } }

/* ---------- Scheda ---------- */
.sezione.sw-sez-scheda { position: relative; z-index: 2; padding-top: 0; padding-bottom: clamp(1rem, 3vw, 2rem); }
.pagina-sezioni > .sx-eroe + .sw-sez-scheda { padding-top: 0; }
.sx-eroe + .sw-sez-scheda .sw-scheda { margin-top: clamp(-3.5rem, -4vw, -2rem); }
.sw-scheda { display: grid; grid-template-columns: minmax(180px, .7fr) repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--linea); border-radius: var(--r-l);
  background: var(--linea); box-shadow: var(--ombra-l); overflow: hidden; }
.sw-scheda::before { content: ""; grid-column: 1 / -1; height: 4px; background: linear-gradient(90deg, var(--tono), color-mix(in srgb, var(--tono) 30%, transparent)); }
.sw-scheda__voce { display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem 1.6rem 1.6rem; background: var(--bianco); }
.sw-scheda dt { display: flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); }
.sw-scheda dt .ic { color: var(--tono); }
.sw-scheda dd { margin: 0; }
.sw-scheda__voce--area { background: color-mix(in srgb, var(--tono) 6%, var(--bianco)); }
.sw-scheda__area { display: block; font-family: var(--f-titoli); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--tono); }
.sw-scheda__nome { display: block; margin-top: .15rem; font-size: .9rem; color: var(--grigio); }
.sw-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.sw-chips li { padding: .32rem .7rem; border-radius: 999px; background: var(--nebbia); font-size: .86rem; font-weight: 500; line-height: 1.3; color: var(--inchiostro-2); }
.sw-scheda__voce--integrazioni .sw-chips li { background: color-mix(in srgb, var(--tono) 9%, var(--bianco)); color: color-mix(in srgb, var(--tono) 75%, #000); font-weight: 600; }
.sw-scheda__voce--normativa .sw-chips li { background: transparent; border: 1px solid var(--linea-forte); font-size: .82rem; }

/* ---------- Correlati ---------- */
.sw-correlati__griglia { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.sw-correlati__griglia--1 { --n: 1; max-width: 560px; }
.sw-correlati__griglia--2 { --n: 2; }
.sw-correlati__griglia--4 { --n: 4; }
/* il binario che li lega */
.sw-correlati__griglia::before { content: ""; position: absolute; left: 4%; right: 4%; top: 64px; height: 2px; background: repeating-linear-gradient(90deg, var(--linea-forte) 0 10px, transparent 10px 18px); }
.sw-correlati__griglia > li { position: relative; }
.sw-correlati__griglia > li:nth-child(2) { --ritardo: .1s; } .sw-correlati__griglia > li:nth-child(3) { --ritardo: .2s; } .sw-correlati__griglia > li:nth-child(4) { --ritardo: .3s; }
.sw-collegato { position: relative; display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: 1.8rem 1.6rem 1.6rem; border: 1px solid var(--linea); border-radius: var(--r-l);
  background: var(--bianco); color: inherit; text-decoration: none; overflow: hidden; transition: transform .4s var(--molla), box-shadow .4s, border-color .3s; }
.sw-collegato:hover, .sw-collegato:focus-visible { transform: translateY(-6px); box-shadow: var(--ombra-l); border-color: transparent; }
.sw-collegato__numero { position: absolute; right: 1.3rem; top: 1rem; font-family: var(--f-titoli); font-size: 2.6rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--linea-forte); }
.sw-collegato__icona { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: .5rem; border-radius: 18px; background: var(--rosso-tenue); color: var(--rosso);
  box-shadow: 0 0 0 8px var(--bianco); transition: transform .5s var(--molla), background .3s, color .3s; }
.sw-collegato:hover .sw-collegato__icona { transform: rotate(-8deg) scale(1.08); background: var(--rosso); color: #fff; }
.sw-collegato__nome { font-family: var(--f-titoli); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.sw-collegato__sommario { font-size: .93rem; line-height: 1.5; color: var(--grigio); }
.sw-collegato__nota { margin-top: .2rem; padding-left: .8rem; border-left: 2px solid var(--rosso); font-size: .92rem; line-height: 1.5; color: var(--inchiostro-2); }
.sw-collegato .link-freccia { margin-top: auto; padding-top: .7rem; }
.sezione--scura .sw-collegato { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); }
.sezione--scura .sw-collegato__icona { box-shadow: none; }
.sezione--scura .sw-collegato__sommario, .sezione--scura .sw-collegato__nota { color: rgba(255, 255, 255, .72); }

/* ---------- Catalogo ---------- */
.sw-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); padding: 0; border: 0; }
.sw-filtri__titolo { float: left; margin-right: .6rem; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); }
.sw-filtro { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sw-filtro + label { --tono: var(--inchiostro); display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border: 1px solid var(--linea-forte); border-radius: 999px;
  background: var(--bianco); font-weight: 600; font-size: .93rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .25s var(--molla); }
.sw-filtro + label[class*="tono-"] { --tono: inherit; }
.sw-filtro + label.tono-entrate { --tono: var(--rosso); } .sw-filtro + label.tono-territorio { --tono: #0f8a7e; }
.sw-filtro + label.tono-servizi { --tono: #7a4fd6; } .sw-filtro + label.tono-piattaforma { --tono: var(--blu); }
.sw-filtro + label span { min-width: 1.6em; padding: .05rem .4rem; border-radius: 999px; background: var(--nebbia); font-size: .78rem; text-align: center; color: var(--grigio); }
.sw-filtro + label:hover { transform: translateY(-2px); border-color: var(--tono); }
.sw-filtro:checked + label { border-color: var(--tono); background: var(--tono); color: #fff; }
.sw-filtro:checked + label span { background: rgba(255, 255, 255, .22); color: #fff; }
.sw-filtro:focus-visible + label { outline: 2px solid var(--tono); outline-offset: 3px; }
.sw-catalogo:has(.sw-filtro--1:checked) .sw-tessera:not(.sw-a1),
.sw-catalogo:has(.sw-filtro--2:checked) .sw-tessera:not(.sw-a2),
.sw-catalogo:has(.sw-filtro--3:checked) .sw-tessera:not(.sw-a3),
.sw-catalogo:has(.sw-filtro--4:checked) .sw-tessera:not(.sw-a4),
.sw-catalogo:has(.sw-filtro--5:checked) .sw-tessera:not(.sw-a5),
.sw-catalogo:has(.sw-filtro--6:checked) .sw-tessera:not(.sw-a6),
.sw-catalogo:has(.sw-filtro--7:checked) .sw-tessera:not(.sw-a7),
.sw-catalogo:has(.sw-filtro--8:checked) .sw-tessera:not(.sw-a8) { display: none; }
.sw-catalogo:has(.sw-filtro:not(.sw-filtro--0):checked) .sw-tessera { animation: sw-compare .5s var(--molla) both; }
@keyframes sw-compare { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.sw-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
/* scaglioni: le colonne pari scendono un po' (solo con «Tutte», sulla griglia piena) */
@media (min-width: 1081px) {
  .sw-catalogo:has(.sw-filtro--0:checked) .sw-tessera:nth-child(4n + 2),
  .sw-catalogo:not(:has(.sw-filtro)) .sw-tessera:nth-child(4n + 2) { translate: 0 1.6rem; }
  .sw-catalogo:has(.sw-filtro--0:checked) .sw-tessera:nth-child(4n + 4),
  .sw-catalogo:not(:has(.sw-filtro)) .sw-tessera:nth-child(4n + 4) { translate: 0 1.6rem; }
  .sw-catalogo:has(.sw-filtro--0:checked) .sw-griglia, .sw-catalogo:not(:has(.sw-filtro)) .sw-griglia { padding-bottom: 1.6rem; }
}
.sw-tessera:nth-child(4n + 2) { --ritardo: .08s; } .sw-tessera:nth-child(4n + 3) { --ritardo: .16s; } .sw-tessera:nth-child(4n + 4) { --ritardo: .24s; }
.sw-tessera__link { position: relative; display: flex; flex-direction: column; gap: .45rem; height: 100%; padding: 1.6rem 1.4rem 1.4rem; border: 1px solid var(--linea); border-radius: var(--r-l);
  background: var(--bianco); color: inherit; text-decoration: none; overflow: hidden; transition: transform .4s var(--molla), box-shadow .4s, border-color .3s; }
.sw-tessera__link::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tono); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--morbido); }
.sw-tessera__link::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tono) 14%, transparent), transparent 70%); opacity: 0; transition: opacity .4s; }
.sw-tessera__link:hover, .sw-tessera__link:focus-visible { transform: translateY(-6px); box-shadow: var(--ombra-l); border-color: transparent; }
.sw-tessera__link:hover::before, .sw-tessera__link:focus-visible::before { transform: none; }
.sw-tessera__link:hover::after { opacity: 1; }
.sw-tessera__numero { position: absolute; right: 1.1rem; top: .9rem; font-family: var(--f-titoli); font-size: 2.3rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--linea-forte); }
.sw-tessera__icona { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: .6rem; border-radius: 17px; background: color-mix(in srgb, var(--tono) 10%, #fff); color: var(--tono);
  transition: transform .5s var(--molla), background .3s, color .3s; }
.sw-tessera__link:hover .sw-tessera__icona { transform: rotate(-8deg) scale(1.08); background: var(--tono); color: #fff; }
.sw-tessera__materia { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tono); }
.sw-tessera__nome { margin: 0; font-family: var(--f-titoli); font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; }
.sw-tessera__testo { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--grigio); }
.sw-tessera__vai { margin-top: auto; padding-top: .6rem; color: var(--tono); }

/* ---------- Telefono e tablet ---------- */
@media (max-width: 1080px) {
  .sw-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-correlati__griglia--4 { --n: 2; }
  .sw-correlati__griglia::before { display: none; }
  .sw-scheda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-scheda__voce--area { grid-column: 1 / -1; }
  .sw-scheda__voce:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .sx-eroe--emblema .az-eroe__griglia { gap: 1rem; }
  .sw-emblema { width: min(100%, 360px); }
}
@media (max-width: 640px) {
  .sw-griglia, .sw-correlati__griglia { grid-template-columns: minmax(0, 1fr); }
  .sw-scheda { grid-template-columns: minmax(0, 1fr); }
  .sw-emblema { width: min(86%, 300px); }
  .sw-emblema__chip { font-size: .74rem; padding: .38rem .65rem .38rem .45rem; }
  .sw-emblema__chip--5, .sw-emblema__chip--6 { display: none; }
  .sw-filtri__titolo { float: none; width: 100%; margin-bottom: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-emblema__orbita, .sw-emblema__tessera, .sw-emblema__chip { animation: none; }
  .sw-catalogo .sw-tessera { animation: none !important; }
}