/* OOT Company. Notte strutturata: nero pieno come il video del marchio, inchiostro bianco, Jost. */

:root {
  --nero: #000000;      /* fondo, lo stesso nero del video */
  --bianco: #FFFFFF;    /* titoli, pennello, bottoni, tavole */
  --quasi: #E6E6E6;     /* sottotitolo dell'apertura (16.8:1) */
  --chiaro: #C9C9C9;    /* testo di lettura (12.7:1) */
  --medio: #8E8E8E;     /* secondario, il "prima", didascalie (6.4:1) */
  --bordo: #6B6B6B;     /* bordi dei campi e linee che uniscono (3.9:1) */
  --filo: #262626;      /* filetti decorativi */
  --filo-chiaro: #D4D4D4; /* filetti sulle tavole bianche */
  --ombra: #4A4A4A;     /* la parte dell'ensō ancora da chiudere */
  --grafite: #595959;   /* testo secondario sulle tavole bianche (7:1) */

  /* scala tipografica: pochi gradini, ognuno con un ruolo */
  --t-titolo: clamp(2.5rem, 1.2rem + 4.6vw, 5rem);       /* titoli di sezione, 40-80 */
  --t-nome: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);      /* nomi grandi: lavori, attrezzi, 36-56 */
  --t-frase: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem);    /* frasi che chiudono un blocco, 26-40 */
  --t-voce: clamp(1.375rem, 1.1rem + .8vw, 1.75rem);     /* titoletti di una voce, 22-28 */
  --t-lead: clamp(1.1875rem, 1rem + .6vw, 1.5rem);       /* testo d'apertura, 19-24 */
  --t-riga: clamp(1.1875rem, 1rem + .5vw, 1.375rem);     /* righe in evidenza, 19-22 */

  --gutter: clamp(16px, 4.5vw, 72px);
  --max: 1280px;
  --respiro: clamp(112px, 14vw, 216px);
  --colonne: repeat(12, minmax(0, 1fr));
  --spazio-colonne: clamp(16px, 2vw, 28px);
  --testata: 72px;
  --uscita: cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 759px) {
  :root { --testata: 64px; }
}

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

html {
  scroll-padding-top: calc(var(--testata) + 16px);
  background: var(--nero);
  color-scheme: dark;
}
/* lo scorrimento morbido verso le sezioni vale dal primo gesto di chi legge (classe messa dallo script):
   quando il browser riporta la pagina dov'eri, ricaricando o tornando indietro, non la fa scorrere dall'alto */
html.scorre { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .005em;
  color: var(--chiaro);
  background: var(--nero);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--bianco);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -.018em;
  text-wrap: balance;
}
p, ul, ol, dl, dd, figure { margin: 0; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; }
b, strong { font-weight: 500; }

::selection { background: var(--bianco); color: var(--nero); }

:focus-visible {
  outline: 2px solid var(--bianco);
  outline-offset: 4px;
}

.salta-al-contenuto {
  position: fixed; left: var(--gutter); top: 12px; z-index: 60;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 18px; border-radius: 999px;
  background: var(--bianco); color: var(--nero); text-decoration: none; font-weight: 500;
  transform: translateY(-200%);
}
.salta-al-contenuto:focus-visible { transform: none; outline-color: var(--bianco); }
/* il contenuto riceve il fuoco solo dallo script, a presentazione chiusa: nessun anello attorno a tutta la pagina */
#contenuto:focus { outline: none; }

/* testo per chi usa un lettore di schermo, invisibile sulla pagina */
.solo-lettori {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.contenitore {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Sezioni: titolo a sinistra, testo d'apertura dalla colonna 6 ---------- */
.sezione {
  margin-top: var(--respiro);
  scroll-margin-top: 24px;
}
.testa h2 {
  font-size: var(--t-titolo);
  max-width: 15ch;
}
.lead {
  margin-top: clamp(28px, 4vw, 48px);
  max-width: 34em;
  font-size: var(--t-lead);
  font-weight: 350;
  line-height: 1.5;
  color: var(--chiaro);
}
@media (min-width: 900px) {
  .testa { display: grid; grid-template-columns: var(--colonne); column-gap: var(--spazio-colonne); }
  .testa h2 { grid-column: 1 / span 9; }
  .testa .lead, .testa-destra { grid-column: 6 / -1; }
  .testa-destra .lead { margin-top: 0; }
  .testa-destra { margin-top: clamp(28px, 4vw, 48px); }
}

/* ---------- Bottoni e collegamenti ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 12px 30px;
  font: inherit; font-size: 1.0625rem; font-weight: 500; letter-spacing: .01em; line-height: 1.3;
  text-align: center;
  color: var(--nero); background: var(--bianco);
  border: 1px solid var(--bianco); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .15s ease;
}
@media (max-width: 379px) {
  .bottone { padding: 12px 16px; font-size: 1rem; letter-spacing: 0; }   /* su schermi stretti il testo sta su una riga */
}
.bottone:active { transform: scale(.98); }
.bottone[disabled] { opacity: .6; cursor: progress; }
@media (hover: hover) {
  .bottone:hover { background: var(--nero); color: var(--bianco); }
}

.collegamento {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--bianco);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
  text-decoration-color: var(--bordo);
  transition: text-decoration-color .18s ease;
}
@media (hover: hover) {
  .collegamento:hover { text-decoration-color: var(--bianco); }
}

/* ---------- Presentazione del logo ---------- */
.presentazione {
  display: none;
  position: fixed; inset: 0; z-index: 50;
  background: var(--nero);
  overflow: hidden;
}
html.con-intro { overflow: hidden; }
html.con-intro .presentazione { display: block; }
/* Il video è 16:9 con l'emblema al centro: su schermo verticale lo ingrandiamo
   finché l'emblema occupa circa il 70% della larghezza. */
.presentazione-video {
  position: absolute; left: 50%; top: 50%;
  width: min(250vw, 177.78vh); height: auto; aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}
.presentazione-anello,
.presentazione-emblema,
.presentazione-lettere {
  position: absolute; left: 0; top: 0;
  max-width: none;
  opacity: 0; transform-origin: 0 0;
  pointer-events: none;
}
/* in volo "OOT" passa sotto il pennello dell'anello che resta al centro */
.presentazione-emblema,
.presentazione-lettere { z-index: 1; }
.presentazione-anello { z-index: 2; }
.presentazione-comandi {
  position: absolute; right: var(--gutter); bottom: 24px;
  display: flex; gap: 10px;
}
.presentazione-comandi button {
  min-height: 44px; padding: 0 18px;
  font: inherit; font-size: .9375rem; letter-spacing: .02em;
  color: var(--bianco); background: transparent;
  border: 1px solid var(--bordo); border-radius: 999px;
  cursor: pointer; transition: border-color .18s ease;
}
@media (hover: hover) {
  .presentazione-comandi button:hover { border-color: var(--bianco); }
}
/* prima della presentazione: alza il volume, poi "Entra" (il tocco che lascia partire l'audio) */
.presentazione-volume {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 24px;
  padding: var(--gutter); text-align: center;
}
.presentazione-volume[hidden] { display: none; }
.presentazione-altoparlante { width: 56px; height: 56px; color: var(--bianco); }
.presentazione-volume p {
  max-width: 16em;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 300; line-height: 1.25; letter-spacing: -.01em;
  color: var(--bianco); text-wrap: balance;
}
.presentazione-volume .bottone { min-width: 200px; margin-top: 8px; }
.presentazione.attesa .presentazione-comandi { display: none; }

/* sul telefono, finita la presentazione: il sito va guardato in verticale */
.verticale {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-content: center; justify-items: center; gap: 28px;
  padding: var(--gutter); text-align: center;
  background: var(--nero);
  opacity: 0; transition: opacity .4s ease;
}
.verticale[hidden] { display: none; }
.verticale.su { opacity: 1; }
.verticale-telefono { width: 48px; height: 80px; color: var(--bianco); }
.verticale p {
  max-width: 15em;
  font-size: 1.375rem; font-weight: 300; line-height: 1.3;
  color: var(--bianco); text-wrap: balance;
}

.nascosto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Testata: fissa, fondo nero pieno, si fa da parte scendendo ---------- */
.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--testata);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px);
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2));
  background: var(--nero);
  border-bottom: 1px solid var(--filo);
  transition: transform .3s var(--uscita);
}
.testata.nascosta { transform: translateY(-101%); }
.testata:focus-within { transform: none; }
.marchio { display: block; margin-right: auto; border-radius: 50%; }
.marchio img { width: 48px; height: auto; }
html.con-intro #logo-testata { visibility: hidden; }
.menu { display: none; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.menu-voce {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .9375rem; color: var(--chiaro); text-decoration: none;
  text-underline-offset: 6px; text-decoration-thickness: 1px;
  transition: color .18s ease;
}
@media (hover: hover) {
  .menu-voce:hover { color: var(--bianco); text-decoration-line: underline; }
}
.testata-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  font-size: .9375rem; color: var(--bianco); text-decoration: none;
  border: 1px solid var(--bordo); border-radius: 999px;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
/* il passaggio del mouse solo dove c'è un mouse: su telefono la pillola non resta accesa dopo il tocco */
@media (hover: hover) {
  .testata-cta:hover { border-color: var(--bianco); background: var(--bianco); color: var(--nero); }
}
@media (min-width: 760px) {
  .menu { display: flex; }
}
@media (max-width: 759px) {
  .marchio img { width: 44px; }
}

/* ---------- Apertura ---------- */
/* Lo slogan sta dentro l'ensō come "OOT" nel marchio; sotto, cosa facciamo e come iniziare. */
.apertura {
  --resto: 300px;  /* testata, sottotitolo, azioni e margini: quello che deve stare sopra la piega */
  --minimo: 280px;   /* l'anello non scende sotto questa misura */
  --anello: min(560px, calc(100vw - 32px), max(var(--minimo), calc(100vh - var(--resto))));
  --anello: min(560px, calc(100vw - 32px), max(var(--minimo), calc(100svh - var(--resto))));
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--testata) + 16px) var(--gutter) 24px;
  text-align: center;
}
.apertura-anello {
  position: relative;
  width: var(--anello);
  aspect-ratio: 1096 / 1111;
  display: grid; place-items: center;
  flex: none;
}
.enso {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  user-select: none;
}
html.con-intro .enso { visibility: hidden; }
/* Le frasi stanno tutte nello stesso punto del foro; senza script (o con "riduci movimento") resta lo slogan */
.apertura-frasi {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.apertura-frase {
  grid-area: 1 / 1;
  position: relative;
  left: calc(var(--anello) * .016);   /* il foro dell'ensō è un poco a destra del centro del disegno */
}
.apertura h1 {
  font-size: calc(var(--anello) * .116);
  line-height: 1.06;
  letter-spacing: -.012em;
}
.apertura h1 span { display: block; }
.apertura-domanda {
  max-width: calc(var(--anello) * .62);
  font-size: calc(var(--anello) * .084);
  font-weight: 200; line-height: 1.1; letter-spacing: -.012em;
  color: var(--bianco);
  text-wrap: balance;
}
.apertura-domanda.lunga { max-width: calc(var(--anello) * .6); font-size: calc(var(--anello) * .07); font-weight: 300; }  /* più piccole: un filo più piene */
/* OOT come nel marchio: le lettere sono ritagliate dallo stesso fotogramma dell'ensō, qui rimesse al loro posto */
.apertura-oot { position: absolute; inset: 0; }
.apertura-oot img {
  position: absolute;
  left: -3.1%; top: -3.06%; width: 106.3%; height: auto; max-width: none;
}
/* "you're Out Of Time" sta sotto il cerchio, come "YOU’RE OUT OF TIME" nel marchio */
.apertura-oot > span {
  position: absolute; left: calc(50% + var(--anello) * .016); top: calc(100% + var(--anello) * .04);
  width: max-content; transform: translateX(-50%);
  /* come nel marchio: maiuscole spaziate, larghe poco più dell'anello, mai oltre lo schermo */
  font-size: min(calc(var(--anello) * .06), calc((100vw - 56px) / 16.6));
  font-weight: 400; line-height: 1; letter-spacing: .4em; text-transform: uppercase;
  padding-left: .4em;   /* l'ultima lettera si porta dietro .4em: così la scritta resta in centro */
  white-space: nowrap;
  color: var(--bianco);
}
/* l'apostrofo di YOU'RE resta attaccato alle lettere, non isolato dalla spaziatura */
.apertura-oot .stretto { letter-spacing: .06em; }
.apertura-domanda, .apertura-oot { display: none; }
.con-frasi .apertura-domanda, .con-frasi .apertura-oot { display: block; }
/* il posto della scritta sotto il cerchio è tenuto fin dal caricamento: niente salti */
.con-frasi .apertura-anello { margin-bottom: calc(var(--anello) * .14); }
.con-frasi .apertura-frasi > :not(h1):not(.attiva) { opacity: 0; visibility: hidden; }
.con-frasi .apertura-frasi.a-turno > h1:not(.attiva) { opacity: 0; }
/* fermare le frasi: nell'angolo vuoto in basso a destra del quadrato dell'anello */
.apertura-pausa {
  position: absolute;
  /* con l'anello piccolo il pennello arriva fino all'angolo: il bottone si sposta un poco in fuori */
  right: min(0px, calc((var(--anello) - 400px) / 10));
  bottom: min(0px, calc((var(--anello) - 400px) / 20));
  min-width: 44px; min-height: 44px; padding: 0 4px;
  font: inherit; font-size: .9375rem; color: var(--medio);
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--bordo); text-underline-offset: 4px;
  transition: color .2s ease;
}
.apertura-pausa[hidden] { display: none; }
.apertura-pausa:focus-visible { outline: 2px solid var(--bianco); outline-offset: 0; }
@media (hover: hover) {
  .apertura-pausa:hover { color: var(--bianco); }
}
.apertura-sotto {
  max-width: 34em;
  text-wrap: balance;
  margin-top: 20px;
  font-size: clamp(1.1875rem, 1.05rem + .35vw, 1.3125rem);
  font-weight: 350;
  line-height: 1.5;
  color: var(--quasi);
}
.apertura-azioni {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 32px;
  margin-top: 24px;
}
/* dopo la presentazione lo slogan si accende, poi il resto */
.apertura-frasi, .apertura-sotto, .apertura-azioni { transition: opacity .5s ease; }
.apertura-sotto { transition-delay: .12s; }
.apertura-azioni { transition-delay: .2s; }
html.con-intro .apertura-frasi,
html.con-intro .apertura-pausa,
html.con-intro .apertura-sotto,
html.con-intro .apertura-azioni { opacity: 0; }

html.con-frasi .apertura { --resto: 384px; }
@media (max-width: 699px) {
  .apertura {
    --resto: 404px;
    padding-top: calc(var(--testata) + 12px);
    padding-bottom: 16px;
  }
  /* con la scritta sotto il cerchio serve un po' di posto in più: sui telefoni bassi l'anello si stringe */
  html.con-frasi .apertura { --resto: 440px; --minimo: 256px; }
  .apertura-sotto { font-size: 1.1875rem; line-height: 1.45; }
  /* sul telefono il posto della scritta è solo quello che serve: il collegamento resta sopra la piega */
  .con-frasi .apertura-anello { margin-bottom: calc(var(--anello) * .1 + 2px); }
  .apertura-azioni { width: 100%; flex-direction: column; gap: 4px; }
  .apertura-azioni .bottone { width: 100%; }
}

/* ---------- La vetrina dei casi, accanto al marchio ----------
   Dopo la presentazione il marchio sta nel terzo di sinistra e a destra entra un caso alla volta, con il suo video.
   Senza JavaScript la vetrina non c'è e l'apertura resta com'era. */
.apertura-marchio { display: flex; flex-direction: column; align-items: center; }
.vetrina { display: none; }
.con-vetrina .vetrina {
  display: grid; gap: 20px;
  width: 100%; max-width: 760px; margin-top: 72px;
  text-align: left;
  transition: opacity .6s ease .45s, transform .9s var(--uscita) .45s;
}
html.con-intro .vetrina { opacity: 0; transform: translateX(32px); }
.vetrina-schermo { position: relative; aspect-ratio: 16 / 9; background: var(--nero); border: 1px solid var(--filo); overflow: hidden; }
.vetrina-video { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.vetrina-video[hidden] { display: none; }
.vetrina-cartello { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; transition: opacity .25s ease; }
.vetrina-cartello[hidden] { display: none; }
.vetrina-cartello p {
  max-width: 22em;
  font-size: clamp(1.375rem, 1rem + 1.4vw, 2.375rem); font-weight: 200; line-height: 1.2; letter-spacing: -.01em;
  color: var(--bianco); text-align: center; text-wrap: balance;
}
.con-vetrina .vetrina { position: relative; }
/* i tasti del video: sul telefono sotto il video, da 760 px sopra, in alto a destra (in basso ci sono i sottotitoli) */
.vetrina-tasti { display: flex; justify-content: flex-end; gap: 8px; margin-top: -8px; }
@media (min-width: 760px) {
  .vetrina-tasti { position: absolute; right: 12px; top: 12px; margin-top: 0; }
}
.vetrina-tasti[hidden] { display: none; }
.vetrina-tasti button[hidden] { display: none; }
.vetrina-tasti button {
  min-height: 44px; padding: 0 18px;
  font: inherit; font-size: .875rem; color: var(--bianco);
  background: rgba(0, 0, 0, .66); border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; cursor: pointer;
}
.vetrina-testo { display: grid; gap: 6px; transition: opacity .25s ease; }
.vetrina-settore { font-size: .9375rem; color: var(--medio); }
.vetrina-titolo { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.25rem); font-weight: 300; line-height: 1.15; letter-spacing: -.01em; color: var(--bianco); }
.vetrina-sintesi { max-width: 36em; color: var(--chiaro); }
.vetrina-testo .collegamento { justify-self: start; margin-top: 4px; }
.vetrina.cambia .vetrina-testo, .vetrina.cambia .vetrina-video, .vetrina.cambia .vetrina-cartello { opacity: 0; }
.vetrina-comandi { display: flex; align-items: center; gap: 4px; }
.vetrina-freccia {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  color: var(--bianco); background: none; border: 1px solid var(--bordo); border-radius: 50%; cursor: pointer;
}
.vetrina-freccia svg { width: 20px; height: 20px; }
.vetrina-segni { display: flex; margin: 0 4px; }
@media (max-width: 419px) {
  /* sei pallini e due frecce stanno in 288 px: sui telefoni stretti i pallini si stringono (bersaglio 30 px) */
  .vetrina-segni .invito-segno { width: 30px; }
}
.vetrina-tasti button:focus-visible, .vetrina-freccia:focus-visible { outline: 2px solid var(--bianco); outline-offset: 2px; }
@media (hover: hover) {
  .vetrina-freccia:hover { border-color: var(--bianco); }
  .vetrina-tasti button:hover { border-color: var(--bianco); }
}
@media (min-width: 1000px) {
  /* il marchio nel terzo di sinistra, la vetrina negli altri due */
  html.con-vetrina .apertura {
    --stacco: clamp(48px, 5vw, 96px);
    --colonna: calc((min(100vw, 1600px) - 2 * var(--gutter) - var(--stacco)) / 3);
    --resto: 460px;
    --anello: min(var(--colonna), 470px, max(260px, calc(100vh - var(--resto))));
    --anello: min(var(--colonna), 470px, max(260px, calc(100svh - var(--resto))));
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--stacco);
    align-items: center;
    max-width: 1600px; margin-inline: auto;
  }
  html.con-vetrina .apertura-sotto { font-size: 1.0625rem; max-width: 24em; margin-top: 16px; }
  html.con-vetrina .apertura-azioni { flex-direction: column; gap: 10px; margin-top: 20px; }
  /* sugli schermi bassi il video si stringe, così sotto restano in vista testo e comandi */
  html.con-vetrina .vetrina { margin-top: 0; max-width: min(100%, calc((100vh - var(--testata) - 330px) * 16 / 9)); }
}

/* ---------- Sul telefono: prima i casi, poi il marchio con le frasi ----------
   La prima schermata dopo la presentazione è il caso con il suo video (il logo resta in testata);
   scorrendo arrivano l'ensō con le frasi e il resto. I contatti compaiono solo scorrendo (barra in basso). */
@media (max-width: 999px) {
  html.con-vetrina .apertura { min-height: 0; justify-content: flex-start; padding-bottom: 0; }
  html.con-vetrina .vetrina {
    order: -1; margin-top: 0; max-width: 640px;
    min-height: calc(100svh - var(--testata) - 24px);
    display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 12px 8px;
  }
  html.con-vetrina .vetrina-schermo, html.con-vetrina .vetrina-testo { flex: 1 1 100%; }
  html.con-vetrina .vetrina-comandi { order: 1; }
  html.con-vetrina .vetrina-tasti { order: 2; position: static; margin: 0 0 0 auto; }
  html.con-vetrina .vetrina-testo { order: 3; margin-top: 8px; }
  html.con-vetrina .apertura-marchio { padding-block: 64px 72px; }
  html.con-vetrina .apertura-azioni { display: none; }
  html.con-intro .vetrina { transform: translateY(24px); }
}
.barra-contatti { display: none; }
@media (max-width: 999px) {
  html.con-barra .barra-contatti {
    display: block;
    position: fixed; inset: auto 0 0 0; z-index: 15;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--nero); border-top: 1px solid var(--filo);
    transform: translateY(100%); visibility: hidden;
    transition: transform .3s var(--uscita), visibility 0s linear .3s;
  }
  html.con-barra.barra-su .barra-contatti { transform: none; visibility: visible; transition: transform .3s var(--uscita); }
  .barra-contatti .bottone { width: 100%; }
  html.con-barra:not(.oltre-casi) .testata-cta { visibility: hidden; }
}

/* ---------- Il pavimento: titolo e lista affiancati, la lista si vede appena arriva la sezione ---------- */
.pavimento-griglia > h2 {
  font-size: var(--t-titolo);
  max-width: 15ch;
}
.agenda {
  max-width: 38rem;
  margin-top: clamp(40px, 6vw, 64px);
}
@media (min-width: 900px) {
  .pavimento-griglia { display: grid; grid-template-columns: var(--colonne); grid-template-rows: auto 1fr auto; column-gap: var(--spazio-colonne); align-items: start; }
  .pavimento-griglia > h2 { grid-column: 1 / span 6; grid-row: 1; }
  .pavimento-griglia > .lead { grid-column: 1 / span 5; grid-row: 2; }
  .agenda { grid-column: 7 / -1; grid-row: 1 / span 2; max-width: none; margin-top: 0; padding-top: .9rem; }
}
.agenda-titolo {
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--filo);
  font-size: .9375rem; color: var(--medio);
}
.agenda-voci { list-style: none; padding: 0; }
.agenda-voci li {
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.005em;
  padding-block: .24em;
  color: var(--bianco);
}
.voce {
  position: relative; display: inline-block;
  text-decoration: none;
  white-space: nowrap;   /* il tratto attraversa una riga sola */
}
s.voce .voce-testo { opacity: .56; }   /* bianco al 56% sul nero = #8F8F8F, 6.5:1 */
strong.voce { font-weight: 400; }

/* Tratti d'inchiostro: altezza legata al testo, proporzioni del disegno sempre conservate.
   Il pennello preme sulla testa (.26em) e si alza verso la punta (.18em), sempre a metà delle minuscole. */
.sbarra {
  --h: .26em;
  position: absolute; left: -.14em; top: .69em;
  height: var(--h); width: calc(var(--h) * var(--a));
  background: var(--img) 0 50% / auto 100% no-repeat;
  transform: translateY(-50%) rotate(var(--r, 0deg));
  pointer-events: none;
}
.sbarra.s1 { --img: url("img/tratto-1.png"); --a: 42; --r: -.4deg; }
.sbarra.s2 { --img: url("img/tratto-2.png"); --a: 53.98; --r: .2deg; }
.sbarra.s3 { --img: url("img/tratto-3.png"); --a: 42.57; --r: -.15deg; }
.sbarra.s4 { --img: url("img/tratto-4.png"); --a: 51.44; --r: .3deg; }
.sbarra.s5 { --img: url("img/tratto-5.png"); --a: 52.55; --r: -.25deg; }
.sbarra.s6 { --img: url("img/tratto-6.png"); --a: 43.58; --r: .15deg; }
.sottolinea {
  --h: .15em; --a: 64.54;
  position: absolute; left: -.04em; top: 1.12em;
  height: var(--h); width: calc(var(--h) * var(--a));
  background: url("img/tratto-sotto.png") 0 50% / auto 100% no-repeat;
  transform: rotate(-.5deg);
  pointer-events: none;
}
@media (max-width: 599px) {
  /* su telefono i tratti non entrano nel margine laterale */
  .sbarra { left: 0; top: .725em; }
  .sottolinea { left: 0; }
}
@media (min-width: 900px) {
  /* accanto al titolo la colonna è stretta: la voce più lunga, con la sua coda, resta dentro */
  .agenda-voci li { font-size: min(clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem), 2.9vw); }
}
@media (max-width: 374px) {
  .agenda-voci li { font-size: 1.125rem; }
}
.agenda-nota {
  margin-top: 18px;
  color: var(--chiaro);
}
/* Stato iniziale solo se lo script disegnerà i tratti */
html.con-tratti s.voce .voce-testo { opacity: 1; }
html.con-tratti .sbarra,
html.con-tratti .sottolinea { clip-path: inset(0 100% 0 0); }
html.con-tratti .agenda-nota { opacity: 0; }

/* ---------- Casi di successo ---------- */
/* un indice in testa: settore e caso, come in un dossier */
.casi-indice { margin-top: 36px; border-top: 1px solid var(--filo); }
.casi-indice a {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; align-items: baseline;
  min-height: 44px; padding: 14px 0;
  border-bottom: 1px solid var(--filo);
  font-size: var(--t-riga); font-weight: 300; line-height: 1.3;
  color: var(--bianco); text-decoration: none;
}
.indice-settore { font-size: .9375rem; font-weight: 400; color: var(--medio); }
.indice-nome { text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* il caso di punta: lo stesso filo bianco del suo articolo, e il nome più pieno */
.casi-indice a.indice-punta { box-shadow: 0 -1px 0 var(--bianco); }
.indice-punta .indice-nome { font-weight: 400; }
@media (hover: hover) {
  .casi-indice a:hover .indice-nome { text-decoration-line: underline; }
}
/* sui telefoni stretti il settore sta sopra il nome; da 480 px gli sta accanto */
@media (min-width: 480px) {
  .casi-indice a { grid-template-columns: 8.5em minmax(0, 1fr); }
}
@media (min-width: 900px) {
  /* il settore occupa due delle sette colonne, il nome parte dalla terza */
  .casi-indice a {
    grid-template-columns: calc(2 * (100% - 6 * var(--spazio-colonne)) / 7 + var(--spazio-colonne)) minmax(0, 1fr);
    column-gap: var(--spazio-colonne);
  }
}

.caso-studio {
  display: grid; gap: clamp(32px, 4vw, 48px);
  margin-top: clamp(64px, 8vw, 120px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--filo);
  scroll-margin-top: 24px;
}
.caso-settore { font-size: .9375rem; color: var(--medio); }
/* i nomi dei casi restano sotto il titolo di sezione */
.caso-studio h3 {
  margin-top: 12px;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);   /* 28-52 */
  line-height: 1; letter-spacing: -.02em;
}
.caso-punta h3 { font-size: var(--t-nome); }
.caso-sintesi {
  margin-top: clamp(14px, 1.6vw, 20px);
  max-width: 20em;
  font-size: var(--t-voce);
  font-weight: 300; line-height: 1.25; color: var(--bianco);
}
.caso-scheda > div {
  display: grid; gap: 8px;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--filo);
}
.caso-scheda > div:first-child { padding-top: 0; }
.caso-scheda > div:last-child { border-bottom: 0; padding-bottom: 0; }
.caso-scheda dt { font-size: .9375rem; color: var(--medio); }
.caso-scheda dd { max-width: 36em; }
.caso-scheda .elenco li:first-child { padding-top: 4px; }
.caso-scheda .elenco li:first-child::before { top: calc(4px + .58em); }
.caso-adesso {
  font-size: var(--t-riga); font-weight: 300; line-height: 1.45;
  color: var(--bianco);
}
/* il caso di punta, l'integrazione: filo bianco e più spesso */
.caso-punta { border-top: 2px solid var(--bianco); }
.caso-corpo { display: grid; gap: clamp(32px, 4vw, 48px); }
@media (min-width: 1000px) {
  .caso-studio {
    grid-template-columns: var(--colonne); column-gap: var(--spazio-colonne);
    row-gap: clamp(48px, 5vw, 72px); align-items: start;
  }
  /* settore, nome e sintesi restano in vista mentre si legge la scheda */
  .caso-testa { grid-column: 1 / span 5; position: sticky; top: calc(var(--testata) + 32px); }
  .caso-scheda, .caso-tavola { grid-column: 7 / -1; }
  /* il caso di punta mostra il passaggio documento → gestionale su tutta la larghezza.
     Testa e scheda stanno in un blocco loro: la testa ferma esce prima che arrivi la tavola */
  .caso-corpo {
    grid-column: 1 / -1;
    grid-template-columns: var(--colonne); column-gap: var(--spazio-colonne); align-items: start;
  }
  .caso-punta .caso-tavola { grid-column: 1 / -1; }
}

.elenco { list-style: none; padding: 0; }
.elenco li {
  position: relative;
  padding: 14px 0 0 28px;
  max-width: 36em;
}
/* un piccolo anello come segno d'elenco, la O del marchio */
.elenco li::before {
  content: ""; position: absolute; left: 2px; top: calc(14px + .58em);
  width: 9px; height: 9px; border: 1px solid var(--medio); border-radius: 50%;
}

/* Le tavole del circolo: i soli momenti bianchi della pagina, come figure stampate */
.tavola-foglio {
  padding: clamp(24px, 3vw, 44px);
  background: var(--bianco);
  color: var(--nero);
}
.tavola-foglio :focus-visible { outline-color: var(--nero); }
.tavola figcaption { margin-top: 14px; font-size: .875rem; color: var(--medio); }

.chat .tavola-foglio { display: flex; flex-direction: column; gap: 18px; }
.messaggio { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 86%; }
.messaggio.michele { align-self: flex-end; align-items: flex-end; }
.mittente { font-size: .875rem; letter-spacing: .02em; color: var(--grafite); }
.mittente time { margin-left: 8px; font-variant-numeric: tabular-nums; }
.bolla { padding: 12px 18px; border-radius: 20px; font-size: 1.0625rem; line-height: 1.45; }
.cliente .bolla { border: 1px solid var(--nero); color: var(--nero); border-bottom-left-radius: 4px; }
.michele .bolla { background: var(--nero); color: var(--bianco); border: 1px solid transparent; border-bottom-right-radius: 4px; }

.quote-titolo { font-size: var(--t-voce); font-weight: 300; line-height: 1.2; font-variant-numeric: tabular-nums; }
.quote-tasti { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 18px; }
.quote-tasti button {
  width: 64px; height: 64px; border-radius: 50%;
  font: inherit; font-size: 1.375rem; font-weight: 300; font-variant-numeric: tabular-nums;
  color: var(--nero); background: transparent;
  border: 1px solid var(--nero); cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .15s ease;
}
.quote-tasti button:active { transform: scale(.95); }
.quote-tasti button[aria-pressed="true"] { background: var(--nero); color: var(--bianco); }
.quote-conto { font-size: 1.0625rem; font-weight: 500; }
.quote-nota {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--filo-chiaro);
  max-width: 30em; color: var(--grafite);
}

/* La tavola del controllo qualità: sul nero, con un filo, così il bianco resta al circolo */
.qualita-foglio {
  display: flex; flex-direction: column; gap: 18px;
  background: transparent; color: var(--chiaro);
  border: 1px solid var(--bordo);
}
.qualita .mittente { color: var(--medio); }
.qualita .cliente .bolla { border-color: var(--bordo); color: var(--bianco); }
.qualita .michele .bolla { background: var(--filo); color: var(--bianco); }
.qualita-passi { list-style: none; padding: 0 0 0 4px; display: grid; gap: 8px; }
.qualita-passi li {
  position: relative; padding-left: 22px;
  font-size: .9375rem; line-height: 1.4; color: var(--chiaro);
}
.qualita-passi li::before {
  content: ""; position: absolute; left: 0; top: .4em;
  width: 9px; height: 9px; border: 1px solid var(--medio); border-radius: 50%;
}
/* i file pronti: rettangoli a spigoli vivi, non bottoni */
.qualita-file { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-end; }
.qualita-file span {
  padding: 8px 14px; border: 1px solid var(--bordo);
  font-size: .875rem; color: var(--bianco);
}

/* La tavola del documento: cosa arriva in chat e cosa finisce nel gestionale */
.documento-foglio { display: grid; gap: 24px; }
.documento-etichetta { font-size: .875rem; letter-spacing: .02em; color: var(--grafite); }
.documento-foto {
  position: relative;
  margin-top: 12px; padding: 7px 22px 24px;   /* il testo poggia sulle righe del foglio */
  border: 1px solid var(--filo-chiaro);
  background: repeating-linear-gradient(to bottom, transparent 0 31px, var(--filo-chiaro) 31px 32px);
  transform: rotate(-1.2deg);
}
.documento-mano {
  font-style: italic; font-weight: 300; font-size: 1.125rem; line-height: 32px;
  color: var(--nero);
}
.documento-data { margin-top: 0; text-align: right; }
.documento-firma {
  display: block; width: 46%; height: 18px; margin: 4px 0 0 auto;
  border-bottom: 1.5px solid var(--nero); border-radius: 0 0 60% 40%;
}
.documento-nota { margin-top: 12px; font-size: .875rem; color: var(--grafite); }
/* il passaggio dall'uno all'altro: un filo tra due piccoli anelli */
.documento-ponte { display: grid; place-items: center; }
.documento-ponte i { position: relative; display: block; width: 1px; height: 40px; background: var(--nero); }
.documento-ponte i::before, .documento-ponte i::after {
  content: ""; position: absolute; left: -4px;
  width: 9px; height: 9px; border: 1px solid var(--nero); border-radius: 50%; background: var(--bianco);
}
.documento-ponte i::before { top: -4px; }
.documento-ponte i::after { bottom: -4px; }
.documento-scheda { margin-top: 12px; border-top: 1px solid var(--filo-chiaro); }
.documento-scheda div {
  display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--filo-chiaro);
}
.documento-scheda dt { font-size: .875rem; color: var(--grafite); padding-top: .15em; }
.documento-scheda dd { color: var(--nero); font-weight: 500; }
.documento-scheda dd span { display: block; font-size: .875rem; font-weight: 400; color: var(--grafite); }
@media (max-width: 374px) {
  .documento-scheda div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (min-width: 760px) {
  .documento-foglio { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; gap: 0; }
  .documento-ponte i { width: 56px; height: 1px; }
  .documento-ponte i::before, .documento-ponte i::after { top: -4px; bottom: auto; left: auto; }
  .documento-ponte i::before { left: -4px; }
  .documento-ponte i::after { right: -4px; }
}


/* L'invito a metà pagina: tre frasi che si danno il cambio */
.invito {
  display: grid; gap: 36px;
  margin-top: clamp(80px, 10vw, 144px);
  padding: clamp(40px, 5vw, 72px) 0;
  border-top: 1px solid var(--filo);
  border-bottom: 1px solid var(--filo);
}
.invito-blocco { display: grid; gap: 20px; }
.invito-frasi { display: grid; gap: 28px; }
.invito-testo {
  max-width: 30ch;
  font-size: var(--t-frase);
  font-weight: 200; line-height: 1.28; letter-spacing: -.008em;
  color: var(--bianco);
  text-wrap: pretty;
}
@media (max-width: 599px) {
  .invito-testo { font-weight: 300; }
}
/* Se le frasi possono girare stanno una sopra l'altra fin dal caricamento: il blocco prende l'altezza
   della più lunga e non salta. Allineate in basso, l'ultima riga cade sempre nello stesso punto. */
.con-frasi .invito-frasi { gap: 0; }
.con-frasi .invito-testo { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; }
.con-frasi .invito-frasi:not(.a-turno) .invito-testo:first-child,
.con-frasi .invito-testo.attiva { opacity: 1; visibility: visible; }
.con-frasi .invito-comandi[hidden] { display: flex; visibility: hidden; }  /* il posto dei comandi è già tenuto */

.invito-comandi { display: flex; align-items: center; gap: 12px; }
.invito-comandi[hidden] { display: none; }
/* il bordo del primo cerchio cade sull'asse del testo */
.invito-segni { display: flex; margin-inline-start: -16px; }
.invito-segno {
  position: relative;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.invito-segno::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border: 1px solid var(--bordo); border-radius: 50%;
  transition: background-color .2s ease, border-color .2s ease;
}
.invito-segno[aria-pressed="true"]::before { background: var(--bianco); border-color: var(--bianco); }
.invito-pausa {
  min-width: 6em; min-height: 44px; padding: 0 12px;
  font: inherit; font-size: .9375rem; color: var(--medio); text-align: center;
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--bordo); text-underline-offset: 4px;
  transition: color .2s ease;
}
.invito-segno:focus-visible, .invito-pausa:focus-visible { outline: 2px solid var(--bianco); outline-offset: 0; }
@media (hover: hover) {
  .invito-segno:hover::before { border-color: var(--bianco); }
  .invito-pausa:hover { color: var(--bianco); }
}
.invito-bottone { justify-self: start; }
@media (min-width: 600px) {
  .invito-bottone { white-space: nowrap; }
}
@media (min-width: 1000px) {
  .invito { grid-template-columns: var(--colonne); column-gap: var(--spazio-colonne); align-items: end; }
  .invito-blocco { grid-column: 1 / span 7; }
  .invito-bottone { grid-column: 8 / -1; justify-self: end; margin-bottom: 64px; }  /* in linea con l'ultima riga, sopra i comandi */
  html:not(.con-frasi) .invito { align-items: last baseline; }
  html:not(.con-frasi) .invito-bottone { margin-bottom: 0; }
}
@media (min-width: 1200px) {
  .invito-blocco { grid-column: 1 / span 8; }
  .invito-bottone { grid-column: 9 / -1; }
}
@media (max-width: 599px) {
  .invito-bottone { width: 100%; justify-self: stretch; }
}

/* ---------- Attrezzi ---------- */
.attrezzi h2 span { display: block; }
.attrezzi .testa h2 { max-width: 18ch; }
.attrezzi-lista {
  display: grid; gap: clamp(44px, 6vw, 80px);
  margin-top: clamp(72px, 10vw, 144px);
}
.attrezzi-lista > div { display: grid; gap: 14px; }
.attrezzi-lista dt {
  font-size: var(--t-nome);
  font-weight: 200; line-height: 1; letter-spacing: -.02em;
  color: var(--bianco);
}
.attrezzi-lista dd { max-width: 25em; }
@media (min-width: 900px) {
  .attrezzi-lista > div { grid-template-columns: var(--colonne); column-gap: var(--spazio-colonne); align-items: baseline; }
  .attrezzi-lista dt { grid-column: 1 / span 6; }
  .attrezzi-lista dd { grid-column: 7 / -1; }   /* lo stesso asse delle tavole, delle liste e del modulo */
}

/* ---------- Metodo: l'ensō si chiude un quarto per passo ---------- */
.passi {
  --d: 72px;
  --tra: 48px;
  list-style: none; padding: 0;
  margin-top: clamp(56px, 8vw, 112px);
  display: grid; gap: var(--tra);
}
.passo {
  position: relative;
  display: grid; grid-template-columns: var(--d) minmax(0, 1fr);
  column-gap: 24px; row-gap: 10px; align-content: start;
}
/* la linea che unisce i passi passa dal centro di ogni anello al successivo */
.passo:not(:last-child)::after {
  content: ""; position: absolute;
  left: calc(var(--d) / 2); top: calc(var(--d) / 2);
  width: 1px; height: calc(100% + var(--tra));
  background: var(--bordo);
}
.passo-segno {
  position: relative; z-index: 1;
  grid-row: span 2;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  background: var(--nero);
}
.passo-anello {
  position: absolute; inset: 0;
  background: var(--ombra);
  -webkit-mask: url("img/enso.png") center / contain no-repeat;
  mask: url("img/enso.png") center / contain no-repeat;
}
/* la parte già chiusa, a partire dalla testa del pennello, in senso antiorario.
   --p è la quota d'inchiostro del tratto, non dell'angolo: ogni passo aggiunge un quarto della pennellata.
   Il taglio è sfumato di qualche grado (--f), come un pennello che si alza. */
.passo-anello i {
  --f: 1.5deg;
  position: absolute; inset: 0;
  background: var(--bianco);
  -webkit-mask-image: conic-gradient(from 20deg, transparent calc((1 - var(--p)) * 360deg - var(--f)), #000 calc((1 - var(--p)) * 360deg + var(--f)));
  mask-image: conic-gradient(from 20deg, transparent calc((1 - var(--p)) * 360deg - var(--f)), #000 calc((1 - var(--p)) * 360deg + var(--f)));
}
.passo-segno.chiuso .passo-anello i { -webkit-mask-image: none; mask-image: none; }
.passo-numero {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: calc(var(--d) * .36); font-weight: 200; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--bianco);
}
.passi h3 {
  align-self: center;
  font-size: var(--t-voce);
  font-weight: 300; line-height: 1.15; letter-spacing: -.01em;
}
.passi p { max-width: 26em; }
@media (min-width: 1000px) {
  .passi { --d: 96px; --tra: var(--spazio-colonne); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .passo { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-right: 12px; }
  .passo-segno { grid-row: auto; margin-bottom: 36px; }
  .passo:not(:last-child)::after { width: calc(100% + var(--tra)); height: 1px; }
  .passi h3 { margin-bottom: 14px; min-height: 2.3em; align-self: start; }
}

/* ---------- Contatti ---------- */
.contatti { padding-bottom: var(--respiro); }
.contatti-griglia { display: grid; gap: clamp(48px, 6vw, 72px); }
.contatti h2 { font-size: var(--t-titolo); max-width: 12ch; }
.dopo-invio { margin-top: clamp(40px, 5vw, 64px); max-width: 30em; }
.dopo-invio h3 {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--filo);
  font-size: 1.0625rem; font-weight: 500; letter-spacing: .01em; line-height: 1.3;
}
@media (min-width: 1000px) {
  .contatti-griglia { grid-template-columns: var(--colonne); column-gap: var(--spazio-colonne); align-items: start; }
  .contatti-testo { grid-column: 1 / span 5; }
  .modulo { grid-column: 7 / -1; }
}

.modulo { display: grid; gap: 28px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .modulo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .campo-largo { grid-column: 1 / -1; }
}
.campo { display: grid; gap: 8px; align-content: start; }
.campo label { font-size: .9375rem; color: var(--chiaro); }
.facoltativo { margin-left: 4px; color: var(--medio); }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo textarea {
  width: 100%; min-height: 54px;
  padding: 13px 18px;
  font: inherit; font-size: 1.0625rem; color: var(--bianco);
  background: transparent;
  border: 1px solid var(--bordo); border-radius: 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.campo textarea { min-height: 168px; resize: vertical; line-height: 1.5; }
.campo ::placeholder { color: var(--medio); opacity: 1; }
@media (hover: hover) {
  .campo input:hover, .campo textarea:hover { border-color: var(--chiaro); }
}
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: none; border-color: var(--bianco); box-shadow: 0 0 0 1px var(--bianco);
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: var(--bianco); border-style: dashed; }
.campo-errore {
  position: relative; padding-left: 20px;
  font-size: .9375rem; line-height: 1.45; color: var(--bianco);
}
.campo-errore::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--bianco);
}
.campo-errore:empty { display: none; }

.campo-check { grid-template-columns: 24px minmax(0, 1fr); align-items: start; column-gap: 14px; }
.campo-check input {
  position: relative;
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; margin: 12px 0 0;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--chiaro); border-radius: 7px;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
/* l'area da toccare è di 44 px anche se la casella ne misura 24 */
.campo-check input::before {
  content: ""; position: absolute; inset: -11px;
}
.campo-check input::after {
  content: ""; width: 11px; height: 6px;
  border-left: 2px solid var(--nero); border-bottom: 2px solid var(--nero);
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0; transition: opacity .15s ease;
}
.campo-check input:checked { background: var(--bianco); border-color: var(--bianco); }
.campo-check input:checked::after { opacity: 1; }
.campo-check input[aria-invalid="true"] { border-style: dashed; border-color: var(--bianco); }
.campo-check label { color: var(--chiaro); padding-block: 10px; }
/* il fuoco da tastiera è l'anello di tutta la pagina, staccato dalla casella anche quando è spuntata */
.campo-check input:focus-visible {
  outline: 2px solid var(--bianco); outline-offset: 3px;
  box-shadow: none;
}
.campo-check a { color: var(--bianco); text-underline-offset: 4px; }
.campo-check .campo-errore { grid-column: 2; }

.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.invio { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 4px; }
.esito { max-width: 30em; color: var(--bianco); }
.esito:empty { display: none; }
.senza-script { max-width: 30em; color: var(--chiaro); }
.esito.ok { padding: 14px 20px; border: 1px solid var(--bianco); border-radius: 16px; }
.esito.errore { position: relative; padding-left: 20px; }
.esito.errore::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--bianco);
}
@media (max-width: 639px) {
  .invio .bottone { width: 100%; }
}

/* ---------- Piede ---------- */
.piede {
  padding: clamp(80px, 10vw, 144px) 0 clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--filo);
}
.piede-griglia { display: grid; row-gap: 36px; }
.piede-logo { width: clamp(145px, 13.2vw, 193px); height: auto; }  /* l'anello resta della misura di prima: la scritta sotto è più larga */
.piede-motto {
  max-width: 24em;
  font-size: var(--t-frase);
  font-weight: 200; line-height: 1.15; letter-spacing: -.012em;
  color: var(--bianco);
}
.piede-nav { display: flex; flex-wrap: wrap; gap: 0 32px; }
.piede-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--chiaro); text-decoration: none;
  text-underline-offset: 6px; text-decoration-thickness: 1px;
  transition: color .18s ease;
}
@media (hover: hover) {
  .piede-nav a:hover { color: var(--bianco); text-decoration-line: underline; }
}
.piede-dati {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px;
  padding-top: 16px;
  border-top: 1px solid var(--filo);
  font-size: .9375rem; color: var(--medio);
}
.piede-dati a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--chiaro); text-underline-offset: 5px;
}
@media (min-width: 900px) {
  .piede-griglia { grid-template-columns: var(--colonne); column-gap: var(--spazio-colonne); }
  .piede-logo { grid-column: 1 / span 3; grid-row: 1 / span 3; }
  .piede-motto, .piede-nav, .piede-dati { grid-column: 6 / -1; }
  .piede-dati { margin-top: clamp(24px, 4vw, 56px); }
}

/* ---------- Informativa privacy ---------- */
.legale {
  padding-top: calc(var(--testata) + clamp(56px, 8vw, 112px));
  padding-bottom: var(--respiro);
}
.legale h1 { font-size: var(--t-titolo); max-width: 10ch; }
.legale-testo { max-width: 36em; margin-top: 40px; }
.legale-testo > p:first-child {
  font-size: var(--t-lead); font-weight: 350; line-height: 1.5;
}
.legale h2 {
  margin: 44px 0 12px; padding-top: 18px;
  border-top: 1px solid var(--filo);
  font-size: 1.0625rem; font-weight: 500; letter-spacing: .01em; line-height: 1.35;
}
.legale p + p { margin-top: 12px; }
.da-completare {
  display: inline-block;
  padding: 8px 14px 10px;
  border: 1px dashed var(--bianco);
  color: var(--bianco);
}
.da-completare::before {
  content: "Da completare";
  display: block;
  font-size: .875rem; color: var(--medio);
}
@media (min-width: 900px) {
  .legale { display: grid; grid-template-columns: var(--colonne); column-gap: var(--spazio-colonne); align-items: start; }
  .legale h1 { grid-column: 1 / span 5; }
  .legale-testo { grid-column: 6 / -1; margin-top: .35em; }
}

/* ---------- Colori forzati (contrasto elevato): i segni a pennello non si vedono, li dice il testo ---------- */
@media (forced-colors: active) {
  s.voce .voce-testo { text-decoration: line-through; opacity: 1; }
  strong.voce .voce-testo { text-decoration: underline; }
  .campo-check input:checked::after { border-color: CanvasText; }
  .quote-tasti button[aria-pressed="true"] { border-width: 4px; text-decoration: underline; }
  /* gli ensō del metodo e la linea che li unisce restano disegnati con i colori di sistema */
  .passo-anello { forced-color-adjust: none; background: GrayText; }
  .passo-anello i { background: CanvasText; }
  .passo:not(:last-child)::after { forced-color-adjust: none; background: CanvasText; }
  .invito-segno::before { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .invito-segno[aria-pressed="true"]::before { background: CanvasText; }
  .con-frasi .apertura-anello { margin-bottom: 0; }
}

/* ---------- Stampa: lo stato finale, senza presentazione né testata fissa ---------- */
@media print {
  .con-frasi .invito-frasi { gap: 20px; }
  .con-frasi .invito-testo { grid-area: auto; opacity: 1 !important; visibility: visible; }
  .invito-comandi, .con-frasi .invito-comandi[hidden] { display: none; }
  html { scroll-padding-top: 0; }
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .presentazione, .salta-al-contenuto { display: none !important; }
  .testata { position: static; transform: none; }
  html.con-intro { overflow: visible; }
  html.con-intro .enso, html.con-intro #logo-testata { visibility: visible; }
  html.con-intro .apertura-frasi,
  html.con-intro .apertura-sotto,
  html.con-intro .apertura-azioni { opacity: 1; }
  .apertura-domanda, .apertura-oot, .apertura-pausa { display: none !important; }
  .con-frasi .apertura-anello { margin-bottom: 0; }
  .apertura h1 { opacity: 1 !important; }
  html.con-tratti s.voce .voce-testo { opacity: .56; }
  html.con-tratti .sbarra,
  html.con-tratti .sottolinea { clip-path: none; }
  html.con-tratti .agenda-nota { opacity: 1; }
  .apertura { min-height: 0; }
}

/* ---------- Meno movimento: tutto fermo e visibile ---------- */
@media (prefers-reduced-motion: reduce) {
  html, html.scorre { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}