/* home-personalita.css — overrides specifici della home page
   Caricato dopo personalita.css. */

/* ===== palette home ===== */
:root {
  --page: #fcfcfc; --surface: #ffffff; --deep-2: #0e1c32;
  --ink: #0e2035; --muted: #5e6d7e; --on-dark: #ffffff; --on-dark-muted: #bdb9b3;
  --line: #e4e7e5; --line-warm: #e2dcd2; --track: #dee3e8;
  --sans: "Instrument Sans", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
}

/* campo -> card -> pozzo */
.campo { padding: 12px 16px 16px }
.card { background: var(--page); border-radius: 32px; box-shadow: 0 2px 12px rgba(0,0,0,.05) }
.pozzo { background: var(--surface); border-radius: 32px 32px 0 0; padding: 16px 16px 0 }
.max { max-width: 1312px; margin: 0 auto }

/* arrivi */
.sale { animation: sale .7s cubic-bezier(0.2, 0, 0, 1) both }
.lato-in { animation: lato .8s cubic-bezier(0.2, 0, 0, 1) both }
@keyframes sale { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }
@keyframes lato { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }
.d1 { animation-delay: .1s } .d2 { animation-delay: .25s } .d3 { animation-delay: .38s } .d4 { animation-delay: .5s } .d5 { animation-delay: .62s }
.rivela { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(0.2, 0, 0, 1), transform .7s cubic-bezier(0.2, 0, 0, 1) }
.rivela.vista { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .sale, .lato-in { animation: none } .rivela { opacity: 1; transform: none; transition: none } #ordine { transition: none } }

/* 1 apertura: pannello blu notte con la rete di nodi */
.apertura { position: relative; border-radius: 24px; overflow: hidden; background: var(--deep); color: #fff; min-height: min(760px, calc(100svh - 150px)); display: grid; align-content: end }
#ordine { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease }
#ordine.pronto { opacity: 1 }
.velo { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(19,49,83,.97) 0%, rgba(19,49,83,.9) 38%, rgba(19,49,83,.25) 60%, rgba(19,49,83,0) 75%),
  linear-gradient(0deg, rgba(14,28,50,.6) 0%, rgba(14,28,50,0) 35%) }
.apertura .dentro { position: relative; padding: clamp(28px, 4vw, 56px); display: grid; gap: 26px; max-width: 780px }
.apertura .ciglio { color: rgba(255,255,255,.65) }
.apertura h1 { color: #fff; font-size: clamp(2.3rem, 4.5vw, 4.1rem); line-height: 1.05; letter-spacing: -0.035em }
.apertura h1 .spenta { color: rgba(255,255,255,.6); display: block }
.apertura .frase { font-size: clamp(18px, 1.5vw, 20px); color: rgba(255,255,255,.82); max-width: 48ch }
.azioni { display: flex; flex-wrap: wrap; gap: 12px }
.azioni .pill.vuota { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35) }
.azioni .pill.vuota:hover { box-shadow: inset 0 0 0 1px #fff }
.vetri { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start }
.vetri button.vetro { border-radius: 18px; padding: 9px 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: background .2s cubic-bezier(0.2, 0, 0, 1), color .2s cubic-bezier(0.2, 0, 0, 1) }
.vetri button.vetro:hover, .vetri button.vetro[aria-pressed="true"] { background: #fff; color: var(--deep) }
.registro { position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); display: grid; gap: 10px; width: 270px }
.registro div { border-radius: 16px; padding: 14px 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) }
.registro b { display: block; font: 700 28px/1.1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.registro span { display: block; color: rgba(255,255,255,.7); font-size: 14.5px; line-height: 1.4 }
.registro .vivo-riga { display: flex; align-items: center; gap: 8px }

/* etichette rete */
.etichette { position: absolute; inset: 0; pointer-events: none; overflow: hidden }
.et { position: absolute; left: 0; top: 0; font-size: 12px; letter-spacing: .05rem; color: rgba(255,255,255,.86); padding: 5px 9px; border-radius: 8px;
  background: rgba(14,28,50,.62); white-space: nowrap; opacity: 0; transition: opacity .35s cubic-bezier(0.2, 0, 0, 1), background .25s cubic-bezier(0.2, 0, 0, 1), color .25s cubic-bezier(0.2, 0, 0, 1); display: inline-flex; align-items: center; gap: 7px }
.et.acceso { background: #fff; color: var(--deep) }
.et.esercizio { color: #fff }

/* sezioni */
.sez { padding: clamp(56px, 6.5vw, 92px) clamp(8px, 2vw, 32px); scroll-margin-top: 100px }
.testa { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); max-width: 820px }
.testa .ciglio { color: var(--deep) }
.testa h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em }
.testa h2 .spenta { color: var(--muted) }
.testa p { font-size: 19px; color: var(--muted); max-width: 60ch }

/* 2 problema -> disciplina: pannello grigio */
.pannello-grigio { background: var(--soft); border-radius: 32px; padding: clamp(20px, 3vw, 40px) }
.servizi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
@media (max-width: 1240px) { .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.binario { display: none; align-items: center; gap: 12px; padding: 16px 16px 2px 0; color: var(--muted) }
.binario i { flex: 1; height: 2px; background: var(--track); border-radius: 2px; position: relative }
.binario b { position: absolute; left: 0; top: 0; bottom: 0; width: 12.5%; background: var(--deep); border-radius: 2px; transition: left 250ms cubic-bezier(0.2, 0, 0, 1) }
.servizio { background: #fff; border-radius: 20px; padding: 26px; display: grid; gap: 14px; align-content: start; box-shadow: 0 2px 12px rgba(0,0,0,.05); min-width: 0; transition: box-shadow .25s cubic-bezier(0.2, 0, 0, 1), transform .25s cubic-bezier(0.2, 0, 0, 1) }
.servizio .prob { color: var(--muted); display: flex; gap: 10px }
.servizio .prob em { font-style: normal; color: var(--deep) }
.servizio h3 { font-size: 26px; line-height: 1.18; letter-spacing: -0.025em; font-weight: 600; color: var(--ink) }
.servizio .disc { justify-self: start; background: #e9eef4; color: var(--deep); border-radius: 16px; padding: 7px 12px; font-size: 12.5px; letter-spacing: .03em; transition: background .25s var(--ease), color .25s var(--ease) }
.servizio:hover .disc, .servizio:focus-visible .disc { background: var(--deep); color: #fff }
.servizio p { color: var(--muted); font-size: 16.5px }
.servizio ul { margin: 4px 0 0; padding: 14px 0 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--line) }
.servizio li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 15.5px; line-height: 1.45 }
.servizio li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--deep); margin-top: 7px }
.servizio:hover, .servizio:focus-visible { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px); outline: none }
.servizio:focus-visible { box-shadow: 0 0 0 2px var(--deep), 0 8px 24px rgba(0,0,0,.12) }

/* mini rete */
.testa-due { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-bottom: clamp(36px, 5vw, 56px) }
.testa-due .testa { margin-bottom: 0 }
.mini-rete { position: relative; height: 300px; border-radius: 24px; overflow: hidden; background: var(--deep) }
.mini-rete canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.mini-rete .didascalia { position: absolute; left: 16px; bottom: 14px; right: 16px; color: rgba(255,255,255,.75); font-size: 12px }

/* 3 prove */
.dichiara { font-size: clamp(1.6rem, 3.1vw, 2.5rem); line-height: 1.25; letter-spacing: -0.025em; color: var(--muted); max-width: 30ch; font-weight: 500 }
.dichiara b { color: var(--ink); font-weight: 600 }
#manifesto .l { color: #b9c2cc; transition: color .25s linear }
#manifesto .l.piena { color: var(--ink) }
#manifesto .w { white-space: nowrap }
.numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line) }
.numeri div { padding: 28px 24px 0 0; display: grid; gap: 10px; align-content: start; min-width: 0 }
.numeri div + div { padding-left: 24px; border-left: 1px solid var(--line) }
.numeri b { font: 700 clamp(44px, 5vw, 72px)/1 var(--sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--ink) }
.numeri .cifra { display: flex; align-items: baseline; gap: 10px }
.numeri small { font: 500 14px/1 var(--mono); letter-spacing: .0625rem; text-transform: uppercase; color: var(--muted) }
.numeri span { color: var(--muted); font-size: 15.5px; line-height: 1.5 }
.cert { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px }
.chip { display: inline-flex; align-items: center; gap: 10px; border-radius: 18px; padding: 10px 16px; background: var(--soft); border: 1px solid var(--line); color: var(--ink) }
.chip .spunta { width: 18px; height: 18px; border-radius: 50%; background: var(--deep); display: grid; place-items: center }
.chip .spunta::after { content: ""; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px) }
.chip span.desc { font: 400 15px/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted) }

/* 4 console di esercizio */
.console { position: relative; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.12); overflow: hidden; font-size: 13px; line-height: 1.4; color: var(--ink) }
.console .mono, .console .m { font: 500 11.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: none }
.cn-barra { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; height: 38px; padding: 0 14px; background: var(--soft); border-bottom: 1px solid var(--line) }
.cn-barra .pallini { display: flex; gap: 7px } .cn-barra .pallini i { width: 10px; height: 10px; border-radius: 50%; background: #d3d9df }
.cn-barra .titolo { text-align: center; color: var(--muted) }
.cn-app { display: grid; grid-template-columns: 196px minmax(0, 1fr) }
.cn-lato { background: var(--deep-2); color: rgba(255,255,255,.78); padding: 16px 12px; display: grid; align-content: start; gap: 4px }
.cn-lato .logo { color: #fff; font: 700 17px/1 var(--sans); letter-spacing: -.03em; padding: 4px 10px 14px; display: flex; align-items: baseline; gap: 8px }
.cn-lato .logo span { font: 500 11px/1 var(--mono); color: rgba(255,255,255,.55); letter-spacing: .05em }
.cn-lato a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; text-decoration: none; font-size: 13.5px }
.cn-lato a i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid currentColor; opacity: .7 }
.cn-lato a.att { background: rgba(255,255,255,.1); color: #fff }
.cn-lato .amb { margin-top: 18px; padding: 12px 10px 0; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 6px; color: rgba(255,255,255,.6) }
.cn-lato .amb b { color: #fff; font: 600 13px/1.3 var(--sans) }
.cn-main { padding: 18px 20px 20px; background: #fbfcfc; display: grid; gap: 14px; min-width: 0 }
.cn-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px }
.cn-testa .briciole { color: var(--muted) }
.cn-testa h4 { margin: 4px 0 0; font: 600 19px/1.2 var(--sans); letter-spacing: -.02em }
.cn-stato { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.pill-stato { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 20px; background: rgba(66,158,92,.1); color: #23633a; font-weight: 600; font-size: 12.5px }
.cn-stato .agg { color: var(--muted) }
.cn-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0 }
.cn-panel h5 { margin: 0 0 10px; font: 600 13px/1.2 var(--sans); display: flex; justify-content: space-between; align-items: center; gap: 8px }
.cn-panel h5 .m { color: var(--muted); font-weight: 500 }
.cn-sorgenti { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px }
.sorg { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; display: grid; gap: 4px; background: #fff; min-width: 0 }
.sorg b { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sorg .m { color: var(--muted) }
.sorg .ok { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--deep); margin-right: 6px; vertical-align: 1px }
.sorg .corso { display: inline-block; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--deep); margin-right: 6px; vertical-align: 0 }
.sorg svg { width: 100%; height: 18px; display: block }
.cn-riga { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px }
.cn-schede { display: flex; gap: 6px; flex-wrap: wrap }
.cn-schede span { font: 500 11.5px/1 var(--mono); padding: 5px 9px; border-radius: 14px; border: 1px solid var(--line); color: var(--muted) }
.cn-schede span.att { background: var(--deep); border-color: var(--deep); color: #fff }
.cn-grafico svg { width: 100%; height: auto; display: block; margin-top: 6px }
.cn-grafico h5 { flex-wrap: wrap; row-gap: 6px }
.cn-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); margin-top: 6px }
.cn-legenda i { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--deep); vertical-align: 3px; margin-right: 6px }
.cn-legenda i.prev { border-top-style: dashed } .cn-legenda i.banda { height: 8px; border: 0; background: rgba(19,49,83,.12); vertical-align: 0 } .cn-legenda i.sog { border-top: 1.5px dashed var(--muted) }
.fase { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line) }
.fase:first-of-type { border-top: 0 }
.fase b { font-weight: 500; font-size: 12.5px }
.fase .m { color: var(--muted); text-align: right }
.fase .bar { grid-column: 1 / -1; height: 4px; border-radius: 3px; background: var(--track); overflow: hidden }
.fase .bar i { display: block; height: 100%; background: var(--deep); border-radius: 3px }
.cn-tab { width: 100%; border-collapse: collapse; font-size: 12.5px }
.cn-tab th { text-align: left; font: 500 11px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 0 8px 8px 0; border-bottom: 1px solid var(--line) }
.cn-tab td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); vertical-align: middle }
.cn-tab tr:last-child td { border-bottom: 0 }
.cn-tab .m { color: var(--muted) }
.tag { display: inline-block; font: 500 11px/1 var(--mono); padding: 4px 7px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line); margin: 1px 4px 1px 0; color: var(--ink) }
.sku { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--line) }
.sku:first-of-type { border-top: 0 }
.sku .m { color: var(--muted) }
.sku .st { font: 500 11px/1 var(--mono); padding: 4px 7px; border-radius: 6px; align-self: center }
.sku .st.sotto { background: var(--deep); color: #fff; border: 1px solid var(--deep) }
.sku .st.in { background: var(--soft); color: var(--muted); border: 1px solid var(--line) }
.nota-verde { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 15px }
.davicino { position: relative; border-radius: 24px; background: var(--soft); border: 1px solid var(--line); padding: clamp(14px, 2vw, 24px) }
.punto-nota { position: absolute; z-index: 4; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: transparent; display: grid; place-items: center }
.punto-nota::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #d42d2d; box-shadow: 0 0 0 5px rgba(212,45,45,.2) }
.punto-nota::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(212,45,45,.6); animation: battito 2.4s ease-out infinite }
.punto-nota.vivo::before { background: var(--live); box-shadow: 0 0 0 5px rgba(66,158,92,.2) }
.punto-nota.vivo::after { border-color: rgba(66,158,92,.6) }
.punto-rosso { display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: 0.05em; border-radius: 50%; background: #d42d2d; box-shadow: 0 0 0 4px rgba(212,45,45,.2) }
.punto-nota .tocca { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 11.5px/1 var(--mono); color: #b42323; background: #fff; border: 1px solid rgba(212,45,45,.35); border-radius: 999px; padding: 4px 8px; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.06) }
.punto-nota.vivo .tocca { color: #2f7a45; border-color: rgba(66,158,92,.45) }
.punto-nota.dx .tocca { left: auto; right: 30px }
.punto-nota[aria-expanded="true"] .tocca { opacity: 0 }
.punto-nota[aria-expanded="true"] .clicca { opacity: 0 }
@keyframes battito { 0% { transform: scale(.6); opacity: 1 } 100% { transform: scale(1.5); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .punto-nota::after { animation: none; opacity: 0 } }
.punto-nota:focus-visible { outline: 2px solid #b42323; outline-offset: 2px }
.nota { position: absolute; z-index: 5; max-width: 250px; background: var(--deep); color: #fff; border-radius: 12px; padding: 10px 13px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.12); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .2s cubic-bezier(0.2, 0, 0, 1), transform .2s cubic-bezier(0.2, 0, 0, 1) }
.nota.aperta { opacity: 1; transform: none }
.nota .cursore { display: inline-block; width: 7px; height: 13px; background: #fff; vertical-align: -2px; margin-left: 2px; animation: lampo 1s steps(1) infinite }
@keyframes lampo { 50% { opacity: 0 } }

/* 5 mappa */
.segno { position: absolute; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center }
.segno::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(19,49,83,.25); transition: transform .2s cubic-bezier(0.2, 0, 0, 1) }
.segno:hover::before, .segno[aria-expanded="true"]::before { transform: scale(1.35) }
.segno.sede { width: 40px; height: 40px; margin: -20px 0 0 -20px }
.segno.sede::before { width: 16px; height: 16px; box-shadow: 0 0 0 4px #fff, 0 0 0 9px rgba(19,49,83,.22) }
.segno.sede::after { content: "Sede"; position: absolute; left: 34px; top: 9px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--deep); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; pointer-events: none }
.segno:focus-visible { outline: 2px solid var(--deep); outline-offset: 1px; border-radius: 50% }
.luogo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px; align-items: center; padding: 48px clamp(8px, 2vw, 32px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.luogo h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; margin: 12px 0 18px }
.mappa { position: relative; border-radius: 24px; background: var(--soft); border: 1px solid var(--line); aspect-ratio: 1 / 1.02; max-width: 520px; width: 100%; justify-self: end }
.mappa svg { position: absolute; inset: 6%; width: 88%; height: 88%; display: block }
.pop { position: absolute; z-index: 4; width: 250px; background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 14px 16px; display: grid; gap: 6px; font-size: 15px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s cubic-bezier(0.2, 0, 0, 1), transform .25s cubic-bezier(0.2, 0, 0, 1) }
.pop.aperta { opacity: 1; transform: none }
.pop b { font-size: 17px }
.pop .mono { font-size: 12px; color: var(--muted) }

/* 6 chiusura */
.chiusura { padding: clamp(56px, 6.5vw, 92px) clamp(8px, 2vw, 32px) }
.chiusura .riquadro { border-radius: 24px; background: var(--soft); border: 1px solid var(--line); padding: clamp(28px, 4.5vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end }
.chiusura h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em }
.chiusura h2 .spenta { color: var(--muted) }
.chiusura .lato { display: grid; gap: 20px; justify-items: start }
.chiusura .lato p { color: var(--muted); font-size: 18px }
.garanzie { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px }
.garanzie div { background: #fff; border-radius: 14px; padding: 18px 20px; display: grid; gap: 6px; border: 1px solid var(--line) }
.garanzie b { font-weight: 600; font-size: 17px }
.garanzie span { color: var(--muted); font-size: 15px }

/* metodi (accordion) */
.fisa { display: grid; gap: 12px }
.passo { border-radius: 20px; background: var(--soft); border: 1px solid var(--line); transition: background 250ms cubic-bezier(0.2, 0, 0, 1) }
.passo[data-aperto="true"] { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.05) }
.passo > button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 40px; gap: 16px; align-items: center; padding: 22px 26px }
.passo > button:focus-visible { outline: 2px solid var(--deep); outline-offset: -2px; border-radius: 20px }
.passo .n { color: var(--deep) }
.passo h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em }
.passo .meta { color: var(--muted) }
.passo .giro { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-soft); display: grid; place-items: center; transition: transform 300ms cubic-bezier(0.2, 0, 0, 1), background 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1) }
.passo[data-aperto="true"] .giro { transform: rotate(90deg); background: var(--deep); color: #fff; border-color: var(--deep) }
.passo .corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms cubic-bezier(0.2, 0, 0, 1) }
.passo[data-aperto="true"] .corpo { grid-template-rows: 1fr }
.passo .corpo > div { overflow: hidden }
.passo .corpo .in { padding: 0 26px 26px 106px; display: grid; gap: 18px; max-width: 900px }
.passo .corpo p { font-size: 18px; color: var(--ink) }
@media (prefers-reduced-motion: reduce) { .passo .corpo, .passo .giro { transition: none } }
.nota-met { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; color: var(--muted) }

/* settori */
.settori { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px; align-items: start; padding: 48px clamp(8px, 2vw, 32px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.settori h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; margin-top: 12px }
.settori .chips { display: flex; flex-wrap: wrap; gap: 10px }
.settori .chip, .settori-chips .chip { font: 400 16px/1.3 var(--sans); background: #fff }
.settori-chips { display: flex; flex-wrap: wrap; gap: 10px }
.link { color: var(--deep); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px }
.settori .link { display: inline-block; margin-top: 18px }

/* responsive home */
@media (max-width: 1024px) {
  .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .registro { display: none }
}
@media (max-width: 860px) {
  .apertura { min-height: 0; align-content: start }
  .apertura .dentro { padding: 260px 22px 26px }
  .velo { background: linear-gradient(180deg, rgba(19,49,83,0) 0, rgba(19,49,83,0) 200px, rgba(19,49,83,.92) 290px, rgba(19,49,83,.96) 100%) }
  .pannello-grigio { padding: 16px 0 16px 16px }
  .servizi { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-right: 16px; scrollbar-width: none }
  .servizi::-webkit-scrollbar { display: none }
  .servizio { flex: 0 0 84%; scroll-snap-align: start }
  .binario { display: flex !important }
  .cert { display: grid }
  .cert .chip { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 10px }
  .cert .chip .desc { grid-column: 2 }
  .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .numeri div:nth-child(3) { padding-left: 0; border-left: 0 }
  .numeri div { padding-bottom: 24px }
  .passo > button { grid-template-columns: 44px minmax(0, 1fr) 40px; padding: 18px }
  .passo .meta { display: none }
  .passo .corpo .in { padding: 0 18px 22px 18px }
  .settori, .chiusura .riquadro, footer .alto, .testa-due, .luogo { grid-template-columns: 1fr }
  .mini-rete { height: 240px }
  .mappa { justify-self: stretch; max-width: none }
  .cn-app { grid-template-columns: 1fr } .cn-lato { display: none }
  .cn-barra { grid-template-columns: 50px 1fr 10px } .cn-main { padding: 14px 12px }
  .cn-sorgenti { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cn-riga { grid-template-columns: 1fr }
  .cn-schede span:not(.att) { display: none }
  .cn-riordino, .cn-tab .col-mod, .sorg svg, .cn-tab tbody tr:nth-child(n+3) { display: none }
  .sez, .chiusura { padding-top: 48px; padding-bottom: 48px }
  .luogo { padding-top: 36px; padding-bottom: 36px }
  .garanzie { grid-template-columns: 1fr }
}
@media (max-width: 520px) {
  .campo { padding: 8px }
  .pozzo { padding: 10px 10px 0 }
  .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px }
  .numeri div, .numeri div + div { padding: 18px 0; border-left: 0 }
  .numeri b { font-size: 40px }
  .numeri span { font-size: 14.5px }
  .dichiara { font-size: 1.45rem }
  .mini-rete { height: 200px }
  .sez, .settori, .chiusura { padding-left: 6px; padding-right: 6px }
}

/* (00) il fulcro: AI Deployment Management */
.fulcro { background: var(--deep); color: #fff; border-radius: 32px; padding: clamp(24px, 4vw, 56px); display: grid; gap: clamp(24px, 3.4vw, 40px) }
.fl-ingressi { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center }
.fl-ingressi span { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); border-radius: 18px; padding: 7px 12px; font-size: 12.5px; color: rgba(255,255,255,.86) }
.fl-giu { width: 2px; height: 34px; margin: -8px auto; background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.12)) }
.fl-catena { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative }
.fl-catena::before { content: ""; position: absolute; left: 10%; right: 10%; top: 19px; height: 2px; background: rgba(255,255,255,.22) }
.fl-catena li { display: grid; justify-items: center; gap: 10px; text-align: center; position: relative; font-size: 13px; color: rgba(255,255,255,.74) }
.fl-catena li b { width: 40px; height: 40px; border-radius: 50%; background: var(--deep-2); border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; font-weight: 500; font-size: 13px; color: #fff }
.fl-catena li.vivo b { background: #fff; color: var(--deep); border-color: #fff; box-shadow: 0 0 0 6px rgba(66,158,92,.28) }
.fl-catena li.vivo span { color: #fff; display: inline-flex; align-items: center; gap: 8px }
.fl-catena .pacchetto { position: absolute; top: 16px; left: 10%; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.8); animation: corre 5s linear infinite }
@keyframes corre { 0% { left: 10%; opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { left: 90%; opacity: 0 } }
.fl-ritorno { text-align: center; font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: -10px }
.fl-voci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.fl-voci > div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 22px; display: grid; gap: 10px; align-content: start }
.fl-voci h3 { font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: #fff }
.fl-voci p { color: rgba(255,255,255,.74); font-size: 15.5px; line-height: 1.5 }
.vetri button.vetro.perno { border-color: #fff; background: rgba(255,255,255,.24); font-weight: 600 }
@media (max-width: 1024px) { .fl-voci { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) {
  .fl-voci { grid-template-columns: 1fr }
  .fl-ingressi { justify-content: flex-start }
  .fl-giu { margin: -8px 0 -8px 19px }
  .fl-catena { grid-template-columns: 1fr; gap: 14px }
  .fl-catena::before { left: 19px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto }
  .fl-catena li { grid-template-columns: 40px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; gap: 14px }
  .fl-catena .pacchetto { display: none }
  .fl-ritorno { text-align: left; margin-top: -6px }
}
@media (prefers-reduced-motion: reduce) { .fl-catena .pacchetto { display: none } }
.servizio.invito { background: var(--deep); color: #fff; align-content: start }
.servizio.invito .prob, .servizio.invito .prob em { color: rgba(255,255,255,.7) }
.servizio.invito h3 { color: #fff }
.servizio.invito p { color: rgba(255,255,255,.76) }
.servizio.invito .pill { justify-self: start; margin-top: 6px }