/* servizi-sistema.css — isola sistema-visivo: il sistema di questo sito dal vivo (agente servizi). */

/* ---------------------------------------------------------------- sistema visivo ---------- */
.si { display: grid; overflow: hidden; }
.si__barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--linea); }
.si__comandi { display: flex; flex-wrap: wrap; gap: 6px; }
.si__palco {
  position: relative; min-height: clamp(300px, 46vh, 460px); padding: clamp(22px, 3vw, 44px);
  display: grid; align-content: center; overflow: hidden; border-bottom: 1px solid var(--linea);
}
.si__colonne { position: absolute; inset: 0 clamp(22px, 3vw, 44px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); opacity: 0; transition: opacity .5s; pointer-events: none; }
.si__colonne i { background: rgba(121, 64, 224, .09); box-shadow: inset 1px 0 rgba(169, 139, 255, .3), inset -1px 0 rgba(169, 139, 255, .3); }
.si.con-griglia .si__colonne { opacity: 1; }
.si__titolo {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: .04em;
  font-family: var(--font-display); font-size: clamp(44px, 8.4vw, 136px); line-height: .86; letter-spacing: -.045em; text-transform: uppercase;
}
.si__parola { display: block; white-space: nowrap; will-change: transform; transition: color .6s, font-weight .2s; }
.si__parola--serif { font-family: var(--font-serif); font-style: italic; font-weight: 400 !important; text-transform: none; letter-spacing: -.01em; font-size: 1.15em; line-height: .8; }
.si__quota { position: absolute; left: clamp(22px, 3vw, 44px); bottom: 14px; color: var(--carta-3); }
.si__pannelli { display: grid; }
.si__pannello { display: grid; align-content: start; gap: 14px; padding: clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--linea); min-width: 0; }
.si__palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.si__colore { display: grid; gap: 6px; text-align: left; padding: 0; color: var(--carta-2); }
.si__colore span:first-child { display: block; aspect-ratio: 1.3; box-shadow: inset 0 0 0 1px var(--linea-forte); transition: transform .4s var(--curva-expo); }
.si__colore:hover span:first-child, .si__colore[aria-pressed="true"] span:first-child { transform: translateY(-4px); }
.si__colore[aria-pressed="true"] span:first-child { box-shadow: inset 0 0 0 1px var(--carta), 0 0 0 2px var(--viola-luce); }
.si__colore small { font: 500 11px/1.25 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; }
.si__righe { display: grid; gap: 0; }
.si__riga { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linea); font: 500 12px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .03em; color: var(--carta-3); }
.si__riga b { color: var(--carta); font-weight: 500; text-align: right; }
.si__font { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--linea); }
.si__font-campione { font-size: clamp(30px, 3vw, 44px); line-height: 1.05; letter-spacing: -.02em; color: var(--carta); }
.si__peso { width: 100%; accent-color: var(--viola); }
@media (min-width: 900px) { .si__pannelli { grid-template-columns: repeat(3, minmax(0, 1fr)); } .si__pannello + .si__pannello { border-left: 1px solid var(--linea); } .si__pannello { border-bottom: 0; } }
@media (max-width: 599px) { .si__palette { grid-template-columns: repeat(4, minmax(0, 1fr)); } }