/* ============================================================================
   stile.css — il sito agentica.work.

   I token sono quelli di _design/agentica.css (stessi nomi, stessi valori),
   portati da millimetri a pixel: quel foglio è tarato per la carta, questo per
   lo schermo. Regole di marca che valgono anche qui (IDENTITA.md § 4):
   - un accento solo, il vermiglio, e mai come colore di un testo;
   - una sola fascia scura per pagina (il Metodo);
   - ogni stato ha la sua parola, il colore non porta informazione da solo.
============================================================================ */
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/SpaceGrotesk-500.woff") format("woff"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/SpaceGrotesk-700.woff") format("woff"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexSans-400.woff") format("woff"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/IBMPlexSans-400i.woff") format("woff"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexSans-500.woff") format("woff"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexSans-600.woff") format("woff"); }

:root {
  --ink: #0E1A2B;
  --soft: #55637A;
  --campo: #0D3162;
  --campo-fondo: #081C38;
  --campo-chiaro: #3C6FB8;
  --campo-velo: #E7EEF8;
  --segnale: #E4501C;
  --segnale-chiaro: #EA5A22;
  --segnale-ink: #9E3608;
  --segnale-velo: #FCEDE6;
  --rule: #D3DCE6;
  --rule-forte: #B9C5D4;
  --wash: #F1F5FA;
  --white: #FFFFFF;
  --su-campo: #FFFFFF;
  --su-campo-soft: #A9BAD1;
  --display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --testo: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --passo: 24px;
  --largo: 1200px;
  --margine: clamp(16px, 4vw, 48px);
  --punto: radial-gradient(circle at center, #C3CEDC 1.1px, transparent 1.5px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/1.62 var(--testo);
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--display); font-weight: 500; color: var(--campo); margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: var(--campo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--segnale); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--segnale); outline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.salta { position: absolute; left: -999px; top: 8px; background: var(--campo); color: var(--white); padding: 8px 14px; z-index: 20; }
.salta:focus { left: 8px; }

/* ────────────────────────────────────────────────────────── testata ── */
.testata {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 32px;
  padding: 14px var(--margine);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.casa { display: block; line-height: 0; }
.logo { width: 132px; height: auto; }
.testata nav { margin-left: auto; }
.testata nav ul { display: flex; gap: 26px; }
.testata nav a, .scrivi {
  font: 500 14px/1 var(--display); letter-spacing: 0.02em; text-decoration: none; color: var(--campo);
}
.testata nav a:hover { text-decoration: underline; text-decoration-color: var(--segnale); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lingua { font: 500 13px/1 var(--display); letter-spacing: 0.1em; color: var(--soft); text-decoration: none; padding: 10px 4px; }
.lingua:hover { color: var(--campo); }
.scrivi { padding: 10px 16px; border: 1.5px solid var(--campo); }
.scrivi:hover { background: var(--campo); color: var(--white); }

/* ────────────────────────────────────────────────────────── apertura ── */
.apertura {
  position: relative;
  padding: clamp(56px, 9vw, 112px) var(--margine) 32px;
  max-width: calc(var(--largo) + 2 * var(--margine));
  margin: 0 auto;
}
.apertura-testo { max-width: 1060px; }
.occhiello {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft);
  margin-bottom: 28px;
}
.nodo { width: 9px; height: 9px; background: var(--segnale); display: inline-block; }
h1 {
  font-size: clamp(36px, 5.4vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.032em;
}
h1 .r2 {
  background-image: linear-gradient(var(--segnale), var(--segnale));
  background-size: 100% 5px; background-position: 0 96%; padding-bottom: 4px; background-repeat: no-repeat;
}
.sotto { margin-top: 28px; max-width: 620px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--soft); }
.azioni { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
.bottone {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 22px; font: 500 15px/1 var(--display); letter-spacing: 0.01em;
  background: var(--campo); color: var(--white); text-decoration: none; border: 1.5px solid var(--campo);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bottone:hover { color: var(--white); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--segnale); }
.bottone.secondo { background: transparent; color: var(--campo); }
.bottone.secondo:hover { color: var(--campo); background: var(--campo-velo); }
.apertura-figura { margin: clamp(40px, 6vw, 72px) 0 0; }
.figura-apertura { display: block; width: 100%; height: auto; overflow: visible; }
.apertura-figura figcaption { display: none; }

/* Ingresso della pagina: le righe salgono una dopo l'altra, poi la traccia si disegna. */
@keyframes sale { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.occhiello, h1 .riga, .sotto, .azioni { animation: sale .8s cubic-bezier(.2, .7, .2, 1) both; }
h1 .riga { display: block; width: fit-content; }
h1 .r0 { animation-delay: .08s; } h1 .r1 { animation-delay: .16s; } h1 .r2 { animation-delay: .24s; }
.sotto { animation-delay: .36s; } .azioni { animation-delay: .46s; }

/* ─────────────────────────────────────────────────────────── figure ── */
.punti { stroke: #C3CEDC; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.ramo, .portante { fill: none; stroke: var(--campo); stroke-linejoin: miter; stroke-linecap: butt; }
.ramo { stroke-width: 2; }
.portante { stroke-width: 3.4; }
.perno { fill: var(--campo); }
.impulso {
  fill: none; stroke: var(--segnale); stroke-width: 4; stroke-linecap: butt; stroke-linejoin: miter;
  stroke-dasharray: 5 195; stroke-dashoffset: 100;
  animation: impulso 6.4s linear infinite;
}
@keyframes impulso { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.i0 { animation-delay: 1.9s; animation-duration: 7.2s; }
.i1 { animation-delay: 2.6s; animation-duration: 6.1s; }
.i2 { animation-delay: 1.6s; animation-duration: 5.4s; }
.i3 { animation-delay: 3.3s; animation-duration: 6.7s; }
.i4 { animation-delay: 2.2s; animation-duration: 7.8s; }
.et-ramo { font: 500 15px var(--display); fill: var(--campo); letter-spacing: -0.005em; }
.et-capo { font: italic 400 13px var(--testo); fill: var(--soft); }
.fermata circle { fill: var(--white); stroke: var(--segnale); stroke-width: 2.6; }
.fermata text { font: 600 10.5px var(--testo); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--soft); }

@keyframes disegna { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.figura-apertura .ramo, .figura-apertura .portante { stroke-dasharray: 100; animation: disegna 1.3s cubic-bezier(.65, 0, .25, 1) both; }
.figura-apertura .portante { animation-delay: .5s; animation-duration: .5s; }
.figura-apertura .portante.uscita { animation-delay: 1.65s; }
.figura-apertura .r0 { animation-delay: .9s; } .figura-apertura .r1 { animation-delay: .98s; }
.figura-apertura .r2 { animation-delay: .86s; } .figura-apertura .r3 { animation-delay: 1.04s; }
.figura-apertura .r4 { animation-delay: .94s; }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }
.figura-apertura .etichette, .figura-apertura .fermata { animation: appare .8s ease 1.7s both; }

/* ───────────────────────────────────────────────────────── sezioni ── */
.sezione {
  max-width: calc(var(--largo) + 2 * var(--margine));
  margin: 0 auto;
  padding: clamp(72px, 10vw, 128px) var(--margine) 0;
}
.capo { display: grid; grid-template-columns: 72px 1fr; column-gap: 24px; align-items: baseline; margin-bottom: 48px; }
.num {
  font: 500 14px/1 var(--display); letter-spacing: 0.08em; color: var(--soft);
  display: flex; align-items: center; gap: 10px;
}
.num::before { content: ""; width: 7px; height: 7px; background: var(--segnale); }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; }
.capo-sotto { grid-column: 2; margin-top: 14px; max-width: 640px; color: var(--soft); font-size: 18px; }
.capo-frase { grid-column: 2; margin-top: 18px; font: 500 clamp(24px, 3vw, 34px)/1.2 var(--display); letter-spacing: -0.02em; color: var(--campo); }
h3 { font-size: 21px; line-height: 1.25; }

/* Missione */
.manifesto {
  margin-left: 96px; max-width: 900px;
  font: 500 clamp(24px, 3vw, 36px)/1.25 var(--display); letter-spacing: -0.02em; color: var(--campo);
  padding-left: 28px; border-left: 3px solid var(--segnale);
}
.tesi { margin-top: 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule-forte); }
.tesi li { padding: 28px 28px 8px 0; position: relative; }
.tesi li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.tesi-n {
  display: block; font: 500 56px/1 var(--display); letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.3px var(--campo-chiaro); margin-bottom: 22px;
}
.tesi h3 { margin-bottom: 10px; }
.tesi p { color: var(--soft); font-size: 16px; }

/* Live */
.prodotti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prodotto {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule-forte); background: var(--white);
  padding: 26px 26px 22px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.prodotto:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(13, 49, 98, .45); border-color: var(--campo); }
.prodotto header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.prodotto h3 { font-size: 26px; letter-spacing: -0.025em; }
.stato { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--campo); white-space: nowrap; }
.stato i { width: 9px; height: 9px; border-radius: 50%; background: var(--campo); }
.stato.s-lancio { color: var(--segnale-ink); }
.stato.s-lancio i { background: transparent; border: 2px solid var(--segnale); }
.dominio { margin-top: 6px; font-size: 14px; color: var(--soft); }
.figura-prodotto { display: block; width: 100%; height: auto; margin: 22px 0 20px; background: var(--wash); padding: 10px 8px 4px; }
.figura-prodotto .et-ramo { font-size: 13px; }
.figura-prodotto .et-capo { font-size: 12.5px; }
.figura-prodotto .portante { stroke-width: 3; }
.cosa { font-size: 16px; flex: 1; }
.vai { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); font: 500 15px/1 var(--display); }
.vai a { text-decoration: none; }
.vai a:hover { text-decoration: underline; text-decoration-color: var(--segnale); }
.vai span { color: var(--soft); }
.in-lancio { border-style: dashed; }

.laboratorio { margin-top: 56px; display: grid; grid-template-columns: 260px 1fr; column-gap: 40px; }
.laboratorio h3 { font-size: 18px; }
.laboratorio > div p { color: var(--soft); font-size: 15px; margin-top: 6px; }

.laboratorio li {
  display: grid; grid-template-columns: 200px 1fr auto; gap: 20px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px dashed var(--rule-forte);
}
.laboratorio li:first-child { border-top: 1px dashed var(--rule-forte); }
.laboratorio strong { font: 500 16px var(--display); color: var(--campo); }
.laboratorio li span { color: var(--soft); font-size: 15px; }
.laboratorio em { font: normal 500 11.5px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--rule-forte); padding: 5px 8px; }

/* Metodo — la sola fascia scura della pagina */
.metodo {
  max-width: none;
  margin-top: clamp(72px, 10vw, 128px);
  padding: clamp(72px, 9vw, 112px) max(var(--margine), calc((100% - var(--largo)) / 2)) clamp(64px, 8vw, 96px);
  background-color: var(--campo-fondo);
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, .09) 1.1px, transparent 1.5px);
  background-size: var(--passo) var(--passo);
  color: var(--su-campo);
}
.metodo h2, .metodo h3 { color: var(--su-campo); }
.metodo .num, .metodo .capo-sotto { color: var(--su-campo-soft); }
.metodo .capo-sotto { font: 500 22px/1.35 var(--display); color: var(--su-campo); max-width: 720px; letter-spacing: -0.01em; }
.figura-metodo { display: block; width: 100%; height: auto; margin: 8px 0 0; }
.metodo .punti { stroke: rgba(255, 255, 255, .16); }
.metodo .ramo { stroke: var(--campo-chiaro); stroke-width: 2.2; }
.metodo .portante { stroke: var(--su-campo); }
.metodo .perno { fill: var(--su-campo); }
.metodo .impulso { stroke: var(--segnale-chiaro); }
.fasi { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 40px; margin-top: 28px; }
.fasi li:nth-child(2) { text-align: center; }
.fasi li:nth-child(3) { text-align: right; }
.fase-n { display: block; font: 500 13px/1 var(--display); letter-spacing: 0.14em; color: var(--su-campo-soft); margin-bottom: 12px; }
.fasi h3 { font-size: 28px; margin-bottom: 12px; }
.fasi p { color: var(--su-campo-soft); font-size: 16px; }
.principi { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 28px; }
.principi li { font-size: 16px; padding-left: 22px; position: relative; color: var(--su-campo); }
.principi li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--segnale-chiaro); }

/* Servizi */
.famiglie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule-forte); }
.famiglia { padding: 28px 26px 30px; }
.famiglia + .famiglia { border-left: 1px solid var(--rule-forte); }
.lettera { font: 700 64px/0.9 var(--display); color: var(--campo-velo); -webkit-text-stroke: 1.3px var(--campo); margin-bottom: 18px; letter-spacing: -0.04em; }
.famiglia h3 { font-size: 20px; }
.famiglia .nota { font-size: 13.5px; color: var(--soft); margin-top: 4px; font-style: italic; }
.famiglia ul { margin-top: 20px; }
.famiglia li { padding: 10px 0 10px 18px; border-top: 1px solid var(--rule); position: relative; font-size: 15.5px; line-height: 1.4; }
.famiglia li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 2px; background: var(--campo); }
.famiglia.non { background: var(--segnale-velo); }
.famiglia.non h3 { color: var(--segnale-ink); margin-top: 6px; }
.famiglia.non li { border-top-color: rgba(158, 54, 8, .2); }
.famiglia.non li::before { content: "×"; background: none; width: auto; height: auto; top: .55em; font: 600 15px/1 var(--display); color: var(--segnale-ink); }
.domini { margin-top: 56px; display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.domini h3 { font-size: 18px; }
.domini ul { display: flex; flex-wrap: wrap; gap: 10px; }
.domini li { font: 500 14px/1 var(--display); color: var(--campo); padding: 10px 14px; border: 1px solid var(--rule-forte); background: var(--white); }
.domini li:nth-child(5n + 1) { background: var(--campo-velo); border-color: var(--campo-velo); }

/* Chi siamo */
.persona { display: grid; grid-template-columns: 160px 1fr; gap: 40px; max-width: 900px; margin-left: 96px; }
.persona h3 { font-size: 28px; }
.ruolo { color: var(--soft); font-size: 15px; margin: 4px 0 18px; text-transform: lowercase; letter-spacing: 0.02em; }
.persona p + p { margin-top: 12px; }
.societa { margin: 40px 0 0 96px; max-width: 900px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--soft); font-size: 15px; }


/* Struttura: il fondatore e la squadra di agenti */
.organigramma { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 0; margin-top: 8px; }
.fondatore {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 22px 16px 20px; background: var(--white); border: 1.5px solid var(--campo);
  text-decoration: none; color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fondatore:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--segnale); }
.fondatore img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); margin-bottom: 10px; outline: 3px solid var(--campo-velo); }
.f-nome { font: 500 16px/1.2 var(--display); color: var(--campo); }
.f-ruolo { font: 500 11.5px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--segnale-ink); margin-top: 4px; }
.f-compito { font-size: 13px; color: var(--soft); font-style: italic; }
.figura-struttura { display: block; width: 100%; height: auto; overflow: visible; margin-left: -2px; }
.et-agente { font: 500 15px var(--display); fill: var(--campo); }
.et-cosa { font: italic 400 12.5px var(--testo); fill: var(--soft); }
.perno.agente { fill: var(--white); stroke: var(--campo); stroke-width: 2; }
.j5 { animation-delay: 3.9s; } .j6 { animation-delay: 1.2s; } .j7 { animation-delay: 4.4s; }
.agenti-lista { display: none; }
.regole { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.regole li { padding: 20px 22px; background: var(--wash); border-left: 3px solid var(--campo); }
.regole h3 { font-size: 17px; margin-bottom: 6px; }
.regole p { font-size: 15px; color: var(--soft); }

/* Chi siamo: ritratto, numeri, binari paralleli */
.persona { grid-template-columns: 280px 1fr; gap: 56px; max-width: 1000px; align-items: start; }
.ritratto { position: relative; margin: 0; width: 280px; aspect-ratio: 1; background: var(--campo); }
.ritratto::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1;
  background-image: var(--punto); background-size: 12px 12px; background-color: var(--campo-velo);
}
.ritratto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); mix-blend-mode: luminosity; opacity: .96; }
.bio h3 { font-size: 30px; }
.bio p + p { margin-top: 12px; }
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 28px 0 0; border-top: 1px solid var(--rule-forte); }
.numeri div { padding: 16px 16px 4px 0; }
.numeri div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.numeri dt { font: 500 40px/1 var(--display); letter-spacing: -0.03em; color: var(--campo); }
.numeri dd { margin: 8px 0 0; font-size: 14px; color: var(--soft); line-height: 1.4; }
.fonte { margin-top: 12px; font-size: 12.5px; color: var(--soft); font-style: italic; }
.percorso { margin: 72px 0 0 96px; }
.percorso h3 { font-size: 24px; }
.percorso-sotto { color: var(--soft); margin-top: 6px; }
.figura-binari { display: block; width: 100%; height: auto; margin-top: 24px; overflow: visible; }
.binario { fill: none; stroke: var(--campo-chiaro); stroke-width: 3; }
.binario.aperto { stroke: var(--campo); stroke-width: 3.6; }
.tappa { fill: var(--white); stroke: var(--segnale); stroke-width: 2.6; }
.et-binario { font: 500 14px var(--display); fill: var(--campo); }
.et-anno { font: 500 12px var(--display); fill: var(--soft); letter-spacing: 0.04em; }
.tacca { stroke: var(--rule-forte); stroke-width: 1.5; }
.oggi { stroke: var(--segnale); stroke-width: 1.5; stroke-dasharray: 3 4; }
.binari { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; }
.binari > li { border-top: 2px solid var(--campo); padding-top: 12px; }
.binari strong { font: 500 16px var(--display); color: var(--campo); }
.binari .anni { margin-left: 8px; font-size: 13px; color: var(--soft); }
.binari ul { margin-top: 8px; }
.binari ul li { font-size: 14.5px; padding: 3px 0; display: grid; grid-template-columns: 44px 1fr; }
.binari .a { font: 500 13px/1.6 var(--display); color: var(--segnale-ink); }

/* Contatti */
.contatti {
  margin: clamp(80px, 11vw, 140px) var(--margine) 0;
  padding: clamp(48px, 7vw, 88px) clamp(24px, 6vw, 80px);
  background-color: var(--campo-velo);
  background-image: var(--punto);
  background-size: var(--passo) var(--passo);
  text-align: center;
}
.marchio-grande { width: 84px; height: auto; margin-bottom: 28px; }
.contatti h2 { font-size: clamp(30px, 4.6vw, 56px); max-width: 900px; margin: 0 auto; letter-spacing: -0.03em; }
.contatti > p { margin-top: 18px; color: var(--soft); font-size: 18px; max-width: 600px; margin-left: auto; margin-right: auto; }
.contatti .mail { margin-top: 34px; }
.contatti .mail a {
  font: 500 clamp(22px, 3vw, 34px)/1.2 var(--display); color: var(--campo); text-decoration: none;
  background-image: linear-gradient(var(--segnale), var(--segnale)); background-size: 100% 3px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 4px; transition: background-size .25s ease;
}
.contatti .mail a:hover { background-size: 100% 6px; }
.contatti .dove { margin-top: 18px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Piede */
.legale p + p { margin-top: 4px; }
.dati { font-size: 12.5px; }
.piede {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  max-width: calc(var(--largo) + 2 * var(--margine));
  margin: 0 auto; padding: 40px var(--margine) 48px;
  font-size: 14px; color: var(--soft);
}
.logo-piede { width: 104px; height: auto; margin-right: 8px; }
.costituzione { font-style: italic; }
.voci-legali { margin-left: auto; }
.voci-legali a { color: var(--soft); }
.voci-legali a:hover { color: var(--campo); }

/* Pagine legali: privacy, termini, eliminazione dei dati. Il testo segue la colonna dei titoli. */
.documento { padding-bottom: clamp(56px, 8vw, 104px); }
.documento .capo { margin-bottom: 56px; }
.documento h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.025em; }
.vigore { grid-column: 2; margin-top: 14px; font: 500 13px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.testo-legale { margin-left: 96px; max-width: 720px; }
.testo-legale section + section { margin-top: 44px; }
.testo-legale h2 { font-size: 23px; line-height: 1.25; padding-top: 20px; border-top: 1px solid var(--rule); margin-bottom: 14px; }
.testo-legale section > * + * { margin-top: 14px; }
.testo-legale strong { font-weight: 600; color: var(--campo); }
.testo-legale ul li, .testo-legale ol li { position: relative; padding-left: 26px; }
.testo-legale li + li { margin-top: 6px; }
.testo-legale ul li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 6px; height: 6px; background: var(--segnale); }
.testo-legale ol { counter-reset: passo; }
.testo-legale ol li { counter-increment: passo; }
.testo-legale ol li::before { content: counter(passo); position: absolute; left: 0; top: 0.1em; font: 500 14px/1.5 var(--display); color: var(--soft); }
.scheda { margin: 0; border: 1px solid var(--rule-forte); }
.scheda div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 18px; }
.scheda div + div { border-top: 1px solid var(--rule); }
.scheda dt { font: 500 13px/1.75 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.scheda dd { margin: 0; }

/* Anteprima: le affermazioni da confermare. Non compare nel sito pubblicato. */
.verifiche { margin: 0 var(--margine) 48px; padding: 24px 28px; border: 2px dashed var(--segnale); background: var(--segnale-velo); }
.verifiche h2 { font-size: 18px; color: var(--segnale-ink); margin-bottom: 12px; }
.verifiche ol { list-style: decimal; padding-left: 22px; }
.verifiche li { font-size: 15px; margin: 6px 0; }

/* ───────────────────────────────────────────────────────── schermi ── */
@media (max-width: 1080px) {
  .persona { grid-template-columns: 220px 1fr; gap: 40px; margin-left: 0; }
  .ritratto { width: 220px; }
  .percorso { margin-left: 0; }
  .binari { grid-template-columns: 1fr 1fr; }
  .testata nav { display: none; }
  .scrivi { margin-left: auto; }
  .prodotti { grid-template-columns: 1fr 1fr; }
  .famiglie { grid-template-columns: 1fr 1fr; }
  .famiglia:nth-child(3) { border-left: none; }
  .famiglia:nth-child(n + 3) { border-top: 1px solid var(--rule-forte); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .testata { gap: 14px; }
  .logo { width: 112px; }
  /* Sul telefono le righe del titolo vanno a capo da sole: forzarle lascia parole orfane. */
  h1 .riga { display: inline; }
  h1 .r2 { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .capo { grid-template-columns: 1fr; }
  .capo-sotto, .capo-frase { grid-column: 1; }
  .num { margin-bottom: 12px; }
  .manifesto, .persona, .societa { margin-left: 0; }
  .tesi, .prodotti, .fasi, .principi, .famiglie { grid-template-columns: 1fr; }
  .tesi li + li { padding-left: 0; border-left: none; border-top: 1px solid var(--rule); }
  .famiglia + .famiglia { border-left: none; border-top: 1px solid var(--rule-forte); }
  .fasi li:nth-child(n) { text-align: left; }
  .laboratorio, .domini { grid-template-columns: 1fr; gap: 16px; }
  .laboratorio ul { margin-top: 12px; }
  .laboratorio li { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .laboratorio li span { grid-column: 1 / -1; grid-row: 2; }
  .persona { grid-template-columns: 1fr; gap: 40px; }
  .ritratto { width: min(240px, 70vw); }
  .numeri { grid-template-columns: 1fr; }
  .numeri div + div { padding-left: 0; border-left: none; border-top: 1px solid var(--rule); }
  .percorso { margin-left: 0; }
  .binari { grid-template-columns: 1fr; }
  .figura-binari .et-binario { font-size: 22px; }
  .organigramma { grid-template-columns: 1fr; }
  .fondatore { flex-direction: row; text-align: left; gap: 14px; flex-wrap: wrap; }
  .fondatore img { width: 64px; height: 64px; margin: 0; }
  .figura-struttura { margin: 0; }
  .figura-struttura .etichette { display: none; }
  .agenti-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 16px; }
  .agenti-lista li { border-top: 1px solid var(--rule); padding-top: 8px; }
  .agenti-lista strong { display: block; font: 500 15px var(--display); color: var(--campo); }
  .agenti-lista span { font-size: 13px; color: var(--soft); }
  .regole { grid-template-columns: 1fr; }
  /* A questa larghezza le etichette della figura sarebbero illeggibili: la didascalia le ripete in chiaro. */
  .figura-apertura .etichette, .figura-apertura .fermata text { display: none; }
  .apertura-figura figcaption { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--soft); }
  .apertura-figura figcaption span { width: 100%; font: 500 15px var(--display); color: var(--campo); }
  .apertura-figura figcaption em { font: normal 500 13px/1 var(--display); color: var(--campo); border: 1px solid var(--rule-forte); padding: 8px 10px; }
  .voci-legali { margin-left: 0; }
  .vigore { grid-column: 1; }
  .testo-legale { margin-left: 0; }
  .scheda div { grid-template-columns: 1fr; gap: 2px; padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .figura-apertura .ramo, .figura-apertura .portante { stroke-dasharray: none; }
  /* Fermi, gli impulsi restano visibili a metà del loro ramo. */
  .impulso { stroke-dashoffset: 152; }
  .i1 { stroke-dashoffset: 140; } .i2 { stroke-dashoffset: 160; } .i3 { stroke-dashoffset: 146; }
}