/* ============================================================
   Fabio Mencio, Energy & AI Specialist
   Direzione: il foglio provini. Come la parete di monitor del Centro
   Operativo dove ogni schermo e' un pezzo di rete, la pagina apre con
   i lavori veri messi in fila, e ognuno porta alla sua scheda.

   Regole che tengono insieme tutto:
   - un solo carattere (General Sans, ospitato in /fonts) e cinque misure;
   - fondo antracite, testo chiaro, ambra solo per le azioni e la corrente;
   - le superfici si distinguono per tono, mai per linee sottili o ombre;
   - niente gradienti, niente emoji, niente etichette minuscole spaziate.
   ============================================================ */

@font-face {
  font-family: 'General Sans';
  src: url('/fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/fonts/GeneralSans-VariableItalic.woff2') format('woff2');
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* colore */
  --bg:         #080b12;   /* il fondo: quasi tutta la pagina */
  --surface:    #0f141e;   /* un gradino sopra: sezioni alterne */
  --surface-2:  #171e2b;   /* il gradino dopo: riquadri dentro una sezione chiara */
  --ink:        #e8ecf3;
  --muted:      #a8b2c4;   /* testo secondario, 4.5:1 anche su --surface-2 */
  --accent:     #ffb020;   /* ambra: la corrente, le azioni */
  --accent-ink: #120c00;
  --ai:         #3ddcff;   /* ciano: l'intelligenza, solo nelle etichette e nei nodi */
  --verde:      #7ee3a8;   /* online, conseguito */

  /* dalla prima versione del sito, per la barra e la prima schermata */
  --line:       #232c3f;
  --line-hi:    #33405c;
  --card:       #131824;
  --grad: linear-gradient(100deg, #ffb020 0%, #ff8a3d 42%, #3ddcff 100%);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* tipografia: cinque misure e basta */
  --font: 'General Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --step-small:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body:    clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead:    clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head:    clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(4rem, 1rem + 7.4vw, 9.25rem);

  /* spazio */
  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.5rem);
  --sezione: clamp(5rem, 3rem + 7vw, 11rem);
  --max: 1760px;

  /* movimento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
html.con-movimento { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
strong, b { font-weight: 600; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.salta {
  position: absolute; left: var(--margin); top: -4rem; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: .7em 1.2em; font-weight: 600;
  text-decoration: none;
}
.salta:focus { top: .5rem; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }

/* ---------- Pulsanti: rettangoli pieni, angoli vivi, decisi una volta ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.4em;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: var(--step-body); text-decoration: none; line-height: 1.1;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.bottone:hover { background: #ffc24d; }
.bottone:active { transform: scale(.98); }
.bottone-piccolo { min-height: 44px; padding: .5em 1.1em; font-size: var(--step-small); }
.bottone-scuro { background: var(--bg); color: var(--accent); }
.bottone-scuro:hover { background: #1b2230; }

/* Le azioni dentro le schede: testo chiaro, sottolineatura ambra spessa, freccia disegnata */
.azione, .vedi {
  display: inline-block; padding: .55em 0; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: color var(--t-hover) ease;
}
.azione::after, .vedi::after {
  content: ''; display: inline-block; margin-left: .4em; vertical-align: baseline;
  width: .7em; height: .7em; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1h8v8M11 1 1 11' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1h8v8M11 1 1 11' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-hover) var(--ease-out);
}
.vedi::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10M6 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10M6 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}
.azione:hover, .vedi:hover { color: var(--accent); }
.azione:hover::after { transform: translate(2px, -2px); }
.vedi:hover::after { transform: translateX(3px); }

/* ---------- Barra in alto: la stessa della prima versione, semitrasparente sopra la rete ---------- */
.barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .55rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(8, 11, 18, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.marchio { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; font-size: 1.02rem; white-space: nowrap; }
.fulmine { color: var(--accent); }
.menu-largo { display: flex; gap: clamp(.6rem, 2vw, 1.6rem); align-items: center; }
.menu-largo a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muted); font-size: .93rem; font-weight: 500; transition: color .18s; }
.menu-largo a:hover { color: var(--ink); }
.menu-largo a[aria-current] { color: var(--accent); }
.menu-largo .nav-cta { min-height: 38px; padding: 0 1.1em; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); transition: border-color .18s, box-shadow .18s; }
.menu-largo .nav-cta:hover { border-color: var(--ai); box-shadow: 0 0 18px -6px var(--ai); }
.menu-telefono { display: none; }
.menu-telefono:not([open]) nav { display: none; }

/* ============================================================
   APERTURA: la prima schermata della prima versione (ripristinata il 17/10/2026)
   ============================================================ */
.hero { position: relative; padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); isolation: isolate; overflow: hidden; }
.hero-grid {
  position: relative; width: min(1140px, calc(100% - 3rem)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.1rem; padding: .35em .9em .35em .8em;
  border: 1px solid rgba(255, 176, 32, .28); border-radius: 99px; background: rgba(255, 176, 32, .07);
}
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: respiro 3s ease-in-out infinite; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.3rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.022em; margin-bottom: 1.2rem; text-wrap: initial; }
/* La corrente resta ambra, l'intelligenza vira al ciano: due colori netti */
.hero h1 .accent { color: var(--accent); }
.hero h1 .ia { color: var(--ai); text-shadow: 0 0 32px rgba(61, 220, 255, .35); }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.65; color: var(--muted); max-width: 60ch; }
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin: 1.8rem 0 2.2rem; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .97rem;
  padding: .78em 1.5em; border-radius: 99px; border: 1px solid transparent;
  transition: transform .16s, background .16s, border-color .16s, box-shadow .16s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--grad); color: #12100c; box-shadow: 0 10px 30px -12px var(--accent); }
.btn-primary:hover { box-shadow: 0 14px 34px -10px var(--accent); }
.btn-ghost { border-color: var(--line-hi); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ai); box-shadow: 0 0 22px -8px var(--ai); }
/* Tre fatti in evidenza */
.hero-facts { list-style: none; padding: 1.5rem 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; border-top: 1px solid var(--line); }
.hero-facts li {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .9rem; font-weight: 500; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); padding: .5em 1em; border-radius: 99px;
}
.hero-facts .ico { font-size: 1rem; line-height: 1; }
/* Ritratto: cerchio con l'anello energia-AI che gira piano */
.portrait-ring {
  position: relative; width: min(100%, 360px); aspect-ratio: 1;
  justify-self: center; border-radius: 50%; padding: 6px;
  background: var(--line); box-shadow: 0 22px 55px rgba(0, 0, 0, .55);
}
.portrait-ring::before {
  content: ''; position: absolute; inset: -18%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 176, 32, .18), transparent 62%);
}
.portrait-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), #ff7a18 30%, var(--ai) 62%, var(--accent) 100%);
  animation: giro 16s linear infinite;
}
.portrait { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--card); }
@keyframes giro { to { transform: rotate(360deg); } }

/* ---------- La rete scintillante: lo sfondo di tutta la pagina ----------
   Una rete elettrica e una rete neurale sono lo stesso disegno: nodi, fili e corrente che scorre.
   I tracciati hanno pathLength="1000": un impulso lungo 55 su 1000 corre sempre alla stessa
   velocita' apparente, che il filo sia corto o lungo. Niente filtri SVG ne' will-change: su alcune
   schede video uno sfondo fisso con i filtri smette di essere ridisegnato. */
.rete {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; opacity: .62;
  pointer-events: none;
}
.rete .linee { opacity: .26; }
.rete .nodi circle { opacity: .5; }
.rete .alone { opacity: .3; }
.rete .scintille { opacity: .9; }

/* Gli impulsi: due lampi per filo, distanziati fra loro */
.rete .scorre { stroke-dasharray: 55 445; opacity: .95; animation: corrente 6s linear infinite; }
.rete .v1  { animation-duration: 6.5s;  animation-delay: -0.4s; }
.rete .v2  { animation-duration: 8s;    animation-delay: -2.1s; }
.rete .v3  { animation-duration: 9.5s;  animation-delay: -4.3s; }
.rete .v4  { animation-duration: 5s;    animation-delay: -1.2s; stroke-dasharray: 70 930; }
.rete .v5  { animation-duration: 7.2s;  animation-delay: -3.6s; }
.rete .v6  { animation-duration: 6.8s;  animation-delay: -5.1s; }
.rete .v7  { animation-duration: 8.6s;  animation-delay: -0.9s; }
.rete .v8  { animation-duration: 7.8s;  animation-delay: -6.2s; }
.rete .v9  { animation-duration: 10s;   animation-delay: -2.8s; stroke-dasharray: 45 455; }
.rete .v10 { animation-duration: 4.6s;  animation-delay: -1.7s; stroke-dasharray: 60 940; }
@keyframes corrente { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

/* I nodi respirano a ritmi diversi, come se la corrente li raggiungesse a turno */
.rete .pulsa { animation: respiro 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.rete .p2 { animation-delay: -1.1s; animation-duration: 5.2s; }
.rete .p3 { animation-delay: -2.4s; animation-duration: 3.4s; }
.rete .p4 { animation-delay: -3.3s; animation-duration: 6s; }
@keyframes respiro { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Rete ferma: solo se il visitatore l'ha spenta con l'interruttore */
.rete-ferma .rete, .rete-ferma .rete * { animation: none !important; }

/* L'interruttore, in basso a destra */
.interruttore {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70;
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 40px; padding: 0 .95rem; border: 0; cursor: pointer;
  font: 500 var(--step-small)/1 var(--font); color: var(--muted);
  background: var(--surface-2);
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.interruttore:hover { color: var(--ink); background: #222b3b; }
.interruttore:active { transform: scale(.97); }
.interruttore .spia { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.interruttore[aria-pressed="true"] { color: var(--ink); }
.interruttore[aria-pressed="true"] .spia { background: var(--accent); }

/* ============================================================
   SEZIONI
   ============================================================ */
.sezione { padding-block: var(--sezione); }
.sezione h2 { font-size: var(--step-head); }
/* semitrasparenti: la rete deve vedersi anche sotto le sezioni chiare */
.chi-sono, .competenze, .formazione { background: rgba(15, 20, 30, .74); }

/* ---------- Chi sono: la colonna di testo della prima versione, piu' «Cosa porto in un team» ---------- */
.chi-colonna { max-width: 46rem; margin-inline: auto; }
.chi-colonna h2 { margin-bottom: 1.5rem; }
.chi-apertura { font-size: var(--step-lead); line-height: 1.4; color: var(--ink); margin-bottom: 2rem; }
.prosa p { color: var(--muted); max-width: 66ch; }
.prosa strong { color: var(--ink); font-weight: 600; }
.chi-porto-titolo { font-size: var(--step-lead); margin: 3rem 0 1.25rem; }
.chi-porto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.chi-porto li { background: var(--surface-2); padding: 1.1rem 1.2rem; border-left: 4px solid var(--accent); color: var(--muted); font-size: var(--step-small); line-height: 1.5; }
.chi-porto li:nth-child(even) { border-left-color: var(--ai); }
.chi-porto strong { display: block; color: var(--ink); font-size: var(--step-body); margin-bottom: .3rem; }
.chi-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin: 2rem 0 0; }

.interessi { margin-top: clamp(4rem, 8vw, 7.5rem); align-items: baseline; }
.parola { font-size: var(--step-small); font-weight: 600; color: var(--muted); letter-spacing: 0; line-height: 1.4; }
.interessi .parola { grid-column: 1 / 4; color: var(--ink); }
.interessi-corpo { grid-column: 4 / 12; }
.interessi-elenco { display: flex; flex-wrap: wrap; gap: .2em 1.6em; font-size: var(--step-lead); font-weight: 500; }
.interessi-nota { color: var(--muted); margin-top: 1rem; max-width: 60ch; }
.chi-sono .interessi { display: block; max-width: 46rem; margin-inline: auto; }
.chi-sono .interessi .parola { font-size: var(--step-lead); margin-bottom: .75rem; }

/* ---------- Percorso: lo schema unifilare ---------- */
.percorso-griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.percorso-testa { grid-column: 1 / 5; align-self: start; }
.percorso-testa h2 { margin-bottom: 1.5rem; }
.percorso-testa > p { color: var(--muted); max-width: 34ch; }
.legenda { display: grid; gap: .5rem; margin-top: 1.5rem; font-size: var(--step-small); }
.legenda li { display: flex; align-items: center; gap: .6rem; }
.legenda li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }

.linea { grid-column: 6 / 12; }
.linea .parola { margin: 3rem 0 1rem 2.75rem; }
.linea .parola:first-child { margin-top: .4rem; }
.righe { position: relative; }
/* la sbarra: 4px, come il conduttore di uno schema unifilare */
.righe::before { content: ''; position: absolute; left: 6px; top: .55rem; bottom: .55rem; width: 4px; background: var(--surface-2); }
.righe li { position: relative; padding: 0 0 2rem 2.75rem; }
.righe li:last-child { padding-bottom: 0; }
.righe li::before {
  /* il nodo: 16px di colore con 4px di fondo attorno, che lo stacca dal conduttore */
  content: ''; position: absolute; left: -4px; top: calc(.4em - 4px); width: 24px; height: 24px; border-radius: 50%;
  background: var(--c, var(--accent)); background-clip: padding-box; border: 4px solid var(--bg);
}
.nodo-operativo   { --c: var(--accent); }
.nodo-trasversale { --c: var(--verde); }
.nodo-tecnologico { --c: var(--ai); }
.riga-capi { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 .2rem; }
.riga-nome { font-weight: 600; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.01em; }
.riga-valore { font-size: var(--step-small); color: var(--muted); white-space: nowrap; }
.riga-dove { font-size: var(--step-small); color: var(--muted); margin-bottom: .5rem; }
.righe li > p:last-child { margin: 0; max-width: 62ch; }

/* ---------- Competenze: colonne di nomi a una sola misura ---------- */
.competenze-testa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.competenze-testa h2 { grid-column: 1 / 7; }
.competenze-testa p { grid-column: 9 / 13; color: var(--muted); margin: 0; max-width: 36ch; }
.aree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 4.5rem) var(--gutter); }
.area { display: flex; flex-direction: column; align-items: flex-start; padding-right: clamp(0rem, 3vw, 3rem); }
.area h3 { font-size: var(--step-lead); letter-spacing: -0.01em; margin-bottom: .75rem; }
.area-problema { margin-bottom: 1.25rem; max-width: 40ch; }
.area ul { color: var(--muted); line-height: 1.45; margin-bottom: 1rem; }
.area .vedi { margin-top: auto; font-size: var(--step-small); }

/* ============================================================
   PROGETTI
   ============================================================ */
.progetti-testa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.progetti-testa h2 { grid-column: 1 / 6; }
.progetti-testa p { grid-column: 7 / 13; color: var(--muted); margin: 0; max-width: 60ch; }

.progetti-corpo { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 4rem); }
.binario { position: sticky; top: 5.5rem; align-self: start; font-size: var(--step-small); }

/* Il filtro: pulsanti radio veri, nascosti alla vista ma raggiungibili da tastiera */
.filtro { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; }
.filtro legend { font-weight: 600; padding: 0; margin-bottom: .5rem; }
.filtro input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.filtro label {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  min-height: 40px; padding: 0 .75rem; cursor: pointer; color: var(--muted);
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.filtro label:hover { color: var(--ink); background: var(--surface); }
.filtro input:checked + label { color: var(--accent-ink); background: var(--accent); font-weight: 600; }
.filtro input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.conta { font-variant-numeric: tabular-nums; }
.filtro-esito { min-height: 1.5em; margin: .75rem 0 0; color: var(--muted); }
.famiglie { display: grid; margin-top: 1.5rem; }
.famiglie a { color: var(--ink); text-decoration: none; min-height: 36px; display: flex; align-items: center; transition: color var(--t-hover) ease; }
.famiglie a:hover { color: var(--accent); }

.gruppo + .gruppo { margin-top: clamp(5rem, 9vw, 9rem); }
.gruppo-testa { max-width: 58rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.gruppo-testa h3 { font-size: var(--step-head); margin-bottom: 1rem; }
.gruppo-testa p { color: var(--muted); max-width: 64ch; margin: 0; }

/* La scheda: testo a sinistra, materiali a destra */
.caso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start; }
.caso + .caso { margin-top: clamp(4rem, 7vw, 7rem); }
.caso.solo-testo { grid-template-columns: minmax(0, 1fr); }
.caso.solo-testo .caso-testo { max-width: 46rem; }
.caso-media-stretta { max-width: 26rem; }

.caso-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; font-size: var(--step-small); color: var(--muted); margin-bottom: .75rem; }
.stato { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: .45em; }
.stato::before { content: ''; width: 9px; height: 9px; background: var(--muted); flex: none; }
.stato-live::before { background: var(--verde); }
.stato-corso::before { background: var(--ai); }
.stato-fatto::before { background: var(--accent); }

.caso h4 { font-size: var(--step-lead); letter-spacing: -0.015em; line-height: 1.15; margin-bottom: .75rem; }
.claim { font-weight: 500; margin-bottom: 1.5rem; max-width: 60ch; }

.psr { display: grid; gap: 1rem; margin-bottom: 1.75rem; }
.psr > div { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: 1rem; }
.psr dt { font-size: var(--step-small); font-weight: 600; color: var(--muted); padding-top: .2em; }
.psr dd { max-width: 58ch; }

.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.25rem var(--gutter); margin-bottom: 1.75rem; }
.numeri b { display: block; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.numeri span { display: block; font-size: var(--step-small); color: var(--muted); line-height: 1.4; margin-top: .3rem; }

.avviso {
  background: var(--surface-2); padding: 1rem 1.15rem; margin-bottom: 1.5rem;
  font-size: var(--step-small); color: var(--ink); max-width: 64ch;
  border-left: 4px solid var(--accent); /* la barra spessa: un segno grafico, non una riga sottile */
}
.avviso b { color: var(--accent); }
.stack { font-size: var(--step-small); color: var(--muted); margin-bottom: 1rem; }
.stack span { color: var(--ink); font-weight: 600; margin-right: .5em; }
.nota { font-size: var(--step-small); color: var(--muted); margin: 1.25rem 0 0; max-width: 64ch; }
.caso-testo .nota { margin: 0 0 1rem; }
.azioni { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; }

.caso-media { display: grid; gap: 12px; }
.anteprima { display: block; position: relative; background: var(--surface-2); overflow: hidden; text-decoration: none; }
.anteprima img { width: 100%; height: auto; transition: transform 600ms var(--ease-soft); }
.anteprima:hover img { transform: scale(1.025); }
.anteprima .apri {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .8rem; background: var(--surface-2); font-size: var(--step-small); font-weight: 500;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.anteprima .apri::after {
  content: ''; width: .7em; height: .7em; background: var(--accent); flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1h8v8M11 1 1 11' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1h8v8M11 1 1 11' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.anteprima:hover .apri { background: var(--accent); color: var(--accent-ink); }
.anteprima:hover .apri::after { background: var(--accent-ink); }

/* Video: una facciata leggera (immagine caricata solo quando serve); al clic entra il lettore vero.
   Senza JavaScript il link apre direttamente il file MP4. */
.video-facciata { display: block; position: relative; background: #05070c; text-decoration: none; overflow: hidden; }
.video-facciata img, .caso-media video { width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: #05070c; display: block; }
.video-facciata img { transition: transform 600ms var(--ease-soft), opacity var(--t-hover) ease; }
.video-facciata:hover img { transform: scale(1.02); opacity: .85; }
.video-facciata .play {
  position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .6rem 1rem; background: var(--accent); color: var(--accent-ink);
  font-size: var(--step-small); font-weight: 600;
  transition: transform var(--t-press) var(--ease-out);
}
.video-facciata .play::before {
  content: ''; width: 0; height: 0; border-style: solid; border-width: .45em 0 .45em .75em;
  border-color: transparent transparent transparent currentColor;
}
.video-facciata .peso { font-weight: 400; }
.video-facciata:active .play { transform: scale(.98); }

.racconto { background: var(--surface); }
.chi-sono .racconto, .formazione .racconto { background: var(--surface-2); }
.racconto summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 0 .9rem; font-size: var(--step-small); font-weight: 600;
  transition: color var(--t-hover) ease;
}
.racconto summary::-webkit-details-marker { display: none; }
.racconto summary::after { content: '+'; font-size: 1.4em; font-weight: 400; color: var(--accent); line-height: 1; transition: transform var(--t-hover) var(--ease-out); }
.racconto[open] summary::after { transform: rotate(45deg); }
.racconto summary:hover { color: var(--accent); }
.racconto p { padding: 0 .9rem; max-width: 66ch; }
.racconto p:last-child { padding-bottom: 1rem; margin-bottom: 0; }
.caso-testo .racconto { margin-top: 1.25rem; }

.prova { font-size: var(--step-small); color: var(--muted); margin: .75rem 0 0; }
.prova b { color: var(--ink); }
.pagine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pagine a { display: block; overflow: hidden; background: var(--surface-2); }
.pagine img { width: 100%; height: auto; transition: transform 400ms var(--ease-soft), opacity var(--t-hover) ease; }
.pagine a:hover img { transform: scale(1.06); }

/* I progetti brevi del master: tre per riga, una sola misura di immagine */
.casi-brevi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(3rem, 5vw, 4rem) var(--gutter); margin-top: clamp(4rem, 7vw, 7rem); }
.caso.breve { display: flex; flex-direction: column; gap: 0; }
.caso.breve + .caso.breve { margin-top: 0; }
.caso.breve .anteprima { margin-bottom: 1.25rem; }
.caso.breve .anteprima img { aspect-ratio: 16 / 9; object-fit: cover; }
.caso.breve .psr > div { grid-template-columns: minmax(0, 1fr); }
.caso.breve .psr dt { padding: 0; }

.anteprima-file { display: grid; place-items: center; align-content: center; gap: 1rem; aspect-ratio: 16 / 9; background: #10261a; }
.anteprima-file .apri { position: absolute; left: 0; right: 0; bottom: 0; }
.estensione { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; color: var(--verde); margin-bottom: 2rem; }
.anteprima-codice { background: #0d2430; }
.anteprima-codice .logo-linguaggio { width: clamp(64px, 22%, 104px); height: auto; margin-bottom: 2rem; transition: transform 400ms var(--ease-soft); }
.anteprima-codice:hover .logo-linguaggio { transform: scale(1.06); }

/* Il filtro vero e proprio: funziona anche senza JavaScript */
#progetti:has(#f-energia:checked)  .caso:not([data-aree~="energia"]),
#progetti:has(#f-ai:checked)       .caso:not([data-aree~="ai"]),
#progetti:has(#f-dati:checked)     .caso:not([data-aree~="dati"]),
#progetti:has(#f-software:checked) .caso:not([data-aree~="software"]),
#progetti:has(#f-infra:checked)    .caso:not([data-aree~="infra"]),
#progetti:has(#f-processi:checked) .caso:not([data-aree~="processi"]) { display: none; }

#progetti:has(#f-energia:checked)  .gruppo:not(:has([data-aree~="energia"])),
#progetti:has(#f-ai:checked)       .gruppo:not(:has([data-aree~="ai"])),
#progetti:has(#f-dati:checked)     .gruppo:not(:has([data-aree~="dati"])),
#progetti:has(#f-software:checked) .gruppo:not(:has([data-aree~="software"])),
#progetti:has(#f-infra:checked)    .gruppo:not(:has([data-aree~="infra"])),
#progetti:has(#f-processi:checked) .gruppo:not(:has([data-aree~="processi"])) { display: none; }

/* Con il filtro attivo la prima scheda visibile del gruppo non deve portarsi dietro lo spazio di quella nascosta */
#progetti:has(.filtro input:not(#f-tutti):checked) .caso + .caso { margin-top: 0; }
#progetti:has(.filtro input:not(#f-tutti):checked) .gruppo-testa ~ .caso,
#progetti:has(.filtro input:not(#f-tutti):checked) .casi-brevi { margin-top: clamp(3rem, 5vw, 4.5rem); }
#progetti:has(.filtro input:not(#f-tutti):checked) .gruppo-testa + .caso { margin-top: 0; }

/* ============================================================
   FORMAZIONE
   ============================================================ */
.formazione-griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.formazione-titoli { grid-column: 1 / 7; }
.formazione-titoli h2 { margin-bottom: clamp(2rem, 4vw, 3rem); }
.titoli { display: grid; gap: 1.75rem; }
.titolo-nome { font-size: var(--step-lead); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .35rem; max-width: 30ch; }
.titolo-dove { font-size: var(--step-small); color: var(--muted); margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.formazione-master { grid-column: 8 / 13; align-self: end; }
.master-frase { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; }
.formazione-master > p:not(.master-frase) { color: var(--muted); }
.superati { margin: 1.5rem 0 0; }
.superati strong { color: var(--ink); }

.certificati { columns: 6 9rem; column-gap: 6px; }
.certificati li { break-inside: avoid; margin-bottom: 6px; }
.certificati a { display: block; text-decoration: none; background: var(--surface-2); }
.certificati img { width: 100%; height: auto; transition: opacity var(--t-hover) ease; }
.certificati a:hover img { opacity: .85; }
.certificati span { display: block; padding: .5rem .6rem .65rem; font-size: var(--step-small); line-height: 1.3; transition: color var(--t-hover) ease; }
.certificati a:hover span { color: var(--accent); }

/* ============================================================
   CONTATTI E CHIUSURA
   ============================================================ */
.contatti-riga { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.contatti-frase { grid-column: 1 / 6; }
.contatti-frase h2 { margin-bottom: 1.5rem; }
.contatti-frase p { font-size: var(--step-lead); line-height: 1.3; max-width: 28ch; margin: 0; }
.contatti-ritratto { grid-column: 7 / 9; width: 100%; max-width: 12rem; aspect-ratio: 1; object-fit: cover; margin-top: .5rem; }
.contatti-azioni { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-top: .5rem; }
.contatti-domanda { font-size: var(--step-lead); font-weight: 600; margin: 0 0 .25rem; }
.contatti-mail { font-size: var(--step-body); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; min-height: 44px; display: inline-flex; align-items: center; }
.contatti-mail:hover { color: var(--accent); }
.contatti-nota { font-size: var(--step-small); color: var(--muted); margin: 0; max-width: 34ch; }

.piede {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem 2rem; align-items: baseline;
  max-width: var(--max); margin: 0 auto; padding: clamp(6rem, 20svh, 12rem) var(--margin) 2rem;
  font-size: var(--step-small); color: var(--muted);
}
.piede p { margin: 0; }
.piede nav { display: flex; gap: 1.5rem; }
.piede nav a { color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.piede nav a:hover { color: var(--accent); }
.piede-destra { text-align: right; }

/* ============================================================
   MOVIMENTO
   Tutto il movimento vive sotto html.con-movimento, che lo script nel <head>
   mette solo se il sistema non chiede di ridurlo (o se il visitatore lo ha
   riacceso con l'interruttore). Senza JavaScript la pagina resta ferma e leggibile.
   ============================================================ */

/* Apertura: titolo, testo e pulsanti entrano in cascata, la foto si allarga */
@keyframes entra     { from { opacity: 0; transform: translateY(18px); } }
@keyframes entraFoto { from { opacity: 0; transform: scale(.92); } }
.con-movimento .hero-text > * { animation: entra .75s cubic-bezier(.2, .7, .3, 1) backwards; }
.con-movimento .hero-text > *:nth-child(1) { animation-delay: .05s; }
.con-movimento .hero-text > *:nth-child(2) { animation-delay: .16s; }
.con-movimento .hero-text > *:nth-child(3) { animation-delay: .27s; }
.con-movimento .hero-text > *:nth-child(4) { animation-delay: .38s; }
.con-movimento .hero-text > *:nth-child(5) { animation-delay: .49s; }
.con-movimento .portrait-ring { animation: entraFoto .9s cubic-bezier(.2, .7, .3, 1) .2s backwards; }

/* Entrata delle sezioni, una volta sola, in ordine di lettura */
.con-movimento.rivela-ok [data-rivela] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.con-movimento.rivela-ok [data-rivela].dentro { opacity: 1; transform: none; }
/* I nodi del percorso si accendono quando la riga entra */
.con-movimento.rivela-ok .righe li[data-rivela]::before { transform: scale(.2); transition: transform 600ms var(--ease-out) 200ms; }
.con-movimento.rivela-ok .righe li[data-rivela].dentro::before { transform: none; }

/* Movimento spento: niente animazioni ne' transizioni di entrata, la rete si ferma */
.senza-movimento main *, .senza-movimento main *::before, .senza-movimento main *::after,
.senza-movimento .barra *, .senza-movimento .piede * { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0s !important; }
/* l'anello della foto e la spia dell'etichetta vanno con la rete: si fermano solo con l'interruttore */
.senza-movimento .portrait-ring::after { animation-duration: 16s !important; }
.senza-movimento .eyebrow::before { animation-duration: 3s !important; }
.rete-ferma .portrait-ring::after, .rete-ferma .eyebrow::before { animation: none !important; }

/* Senza JavaScript: la rete scorre comunque; lo scorrimento morbido segue il sistema */
@media (prefers-reduced-motion: reduce) {
  html:not(.con-movimento) { scroll-behavior: auto; }
}

/* Su schermi larghi i materiali restano accanto al testo mentre si legge */
@media (min-width: 1100px) {
  .caso:not(.breve) .caso-media { position: sticky; top: 5.5rem; }
}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 1099px) {

  .percorso-testa { grid-column: 1 / -1; position: static; margin-bottom: 3rem; }
  .linea { grid-column: 1 / -1; }

  .competenze-testa h2, .competenze-testa p { grid-column: 1 / -1; }
  .competenze-testa p { margin-top: 1.25rem; }
  .aree { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .progetti-testa h2, .progetti-testa p { grid-column: 1 / -1; }
  .progetti-testa p { margin-top: 1.25rem; }
  .progetti-corpo { grid-template-columns: minmax(0, 1fr); }
  .binario { position: static; margin-bottom: 3rem; }
  .filtro { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 4px; }
  .filtro legend { grid-column: 1 / -1; }
  .filtro label { background: var(--surface); }
  .famiglie { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .caso { grid-template-columns: minmax(0, 1fr); }
  .caso-media-stretta { max-width: 26rem; }

  .formazione-titoli, .formazione-master { grid-column: 1 / -1; }
  .formazione-master { margin-top: 3rem; }
  .certificati { columns: 4 8rem; }

  .contatti-frase { grid-column: 1 / -1; margin-bottom: 2.5rem; }
  .contatti-ritratto { grid-column: 1 / 4; }
  .contatti-azioni { grid-column: 5 / 13; margin-top: 0; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .portrait-ring { order: -1; width: 138px; padding: 4px; justify-self: start; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
}

/* ============================================================
   TELEFONO: una composizione sua, non la pagina rimpicciolita
   ============================================================ */
@media (max-width: 699px) {
  .menu-largo { display: none; }
  .menu-telefono { display: block; position: relative; }
  .menu-telefono summary {
    list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
    padding: 0 1.1rem; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); font-weight: 500;
  }
  .menu-telefono summary::-webkit-details-marker { display: none; }
  .menu-telefono[open] summary { border-color: var(--accent); color: var(--accent); }
  .menu-telefono nav {
    position: fixed; left: 0; right: 0; top: 3.75rem; bottom: 0; z-index: 60;
    background: var(--bg); padding: 1.5rem var(--margin); display: grid; align-content: start;
  }
  .menu-telefono nav a { font-size: var(--step-head); font-weight: 600; text-decoration: none; min-height: 64px; display: flex; align-items: center; letter-spacing: -0.02em; }

  .hero { padding-top: 2.4rem; }
  .hero-facts li { font-size: .85rem; }
  .rete { opacity: .35; }
  .interruttore { right: .7rem; bottom: .7rem; padding: 0 .8rem; }

  .chi-porto { grid-template-columns: minmax(0, 1fr); }
  .prosa { columns: 1; }

  .linea .parola { margin-left: 2.25rem; }
  .righe li { padding-left: 2.25rem; }
  .riga-capi { flex-direction: column; gap: .2rem; }

  .aree { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .area { padding-right: 0; }

  .filtro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtro label { min-height: 44px; }
  .psr > div { grid-template-columns: minmax(0, 1fr); }
  .psr dt { padding: 0; }
  .pagine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .casi-brevi { grid-template-columns: minmax(0, 1fr); }

  .certificati { columns: 3 6rem; }
  .certificati span { font-size: var(--step-small); }

  .contatti-ritratto { grid-column: 1 / 5; max-width: 6.5rem; }
  .contatti-azioni { grid-column: 5 / 13; }

  .piede { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding-top: 20svh; }
  .piede nav { flex-wrap: wrap; gap: 0 1.25rem; }
  .piede-destra { text-align: left; }
}

/* ---------- Pagina 404 ---------- */
.pagina-404 { min-height: 60svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.pagina-404 h1 { font-size: var(--step-head); margin-bottom: 1.5rem; max-width: 16ch; }
.pagina-404 > p:not(.azioni) { font-size: var(--step-lead); max-width: 36ch; }
.pagina-404 .azioni { align-items: center; gap: .5rem 1.5rem; margin-top: 1rem; }

/* ---------- Stampa ---------- */
@media print {
  .barra, .salta, .binario, video, .video-facciata, .menu-telefono, .rete, .interruttore { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .chi-sono, .competenze, .formazione { background: #fff; }
  .sezione { padding-block: 1.5rem; }
  .muted, .caso-meta, .nota, .stack, .area ul, .riga-dove { color: #333; }
  .racconto { background: #fff; }
  .racconto:not([open]) > *:not(summary) { display: block; }
  [data-rivela] { opacity: 1 !important; transform: none !important; }
}