/* =====================================================================
   SITO DI ROCCO PULIZZI — foglio di stile
   Versione del codice: v1.0.1 (2026-10-10)

   Identità visiva "A · Crepuscolo" (decisione D53).
   Impostazione "prima il telefono": le regole di base valgono per
   lo schermo piccolo; più in basso ci sono le aggiunte per schermi grandi.
   ===================================================================== */


/* ---------- 1. CARATTERI (ospitati dentro il sito, decisione D12) ---------- */

@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ---------- 2. COLORI E MISURE (cambiandoli qui, cambiano in tutto il sito) ---------- */

:root {
  --blu-notte: #0D1A30;        /* fondo */
  --calcare: #ECE9E3;          /* testo principale */
  --foschia: #AEB8C8;          /* testo secondario, solo su fondo pieno */
  --tramonto: #E9A86E;         /* solo per le azioni (pulsanti) */

  --font-titoli: "Spectral", Georgia, "Times New Roman", serif;
  --font-testo: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  --margine: 24px;             /* margine laterale su telefono */
}


/* ---------- 3. BASE ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blu-notte);
  color: var(--calcare);
  font-family: var(--font-testo);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--calcare); }

/* Contorno ben visibile per chi naviga con la tastiera */
:focus-visible {
  outline: 2px solid var(--tramonto);
  outline-offset: 3px;
}

/* Testo letto solo dai lettori di schermo */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Collegamento "Vai al contenuto": appare solo con la tastiera */
.salta {
  position: absolute;
  left: var(--margine);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--calcare);
  color: var(--blu-notte);
}
.salta:focus { top: 12px; }


/* ---------- 4. TESTATA E MENU (telefono) ---------- */

.testata {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--margine);
}

.testata__nome {
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: 1.2rem;
  text-decoration: none;
}

/* Pulsante del menu (due linee) */
.testata__menu-pulsante {
  display: none;               /* compare solo se lo script è attivo */
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--calcare);
  cursor: pointer;
}
.testata__menu-icona::before,
.testata__menu-icona::after {
  content: "";
  position: absolute;
  right: 11px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
}
.testata__menu-icona::before { top: 18px; }
.testata__menu-icona::after { top: 25px; }

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
}
.menu a {
  display: inline-block;
  padding: 10px 0;
  font-size: 0.95rem;
  text-decoration: none;
}
.menu__evidenza {
  border-bottom: 1px solid var(--tramonto);
}

/* Con lo script attivo il menu si apre e chiude con il pulsante */
.js .testata__menu-pulsante { display: block; }
.js .menu { display: none; width: 100%; }
.js .menu.is-aperto { display: block; }
.js .menu ul { flex-direction: column; gap: 0; padding: 12px 0 8px; }
.js .menu a { font-size: 1.05rem; padding: 12px 0; }


/* ---------- 5. APERTURA (telefono) ---------- */

.apertura {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 76px);  /* riempie lo schermo sotto la testata */
}

.apertura__testo {
  padding: 16px var(--margine) 0;
  max-width: 40rem;
}

.apertura h1 {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 300;
  font-size: clamp(2rem, 8.6vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
}

.apertura__sottotitolo {
  margin: 18px 0 0;
  color: var(--foschia);
  font-size: 1rem;
}

.apertura__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 26px;
}

/* Pulsante principale "Parliamone" */
.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 2px;
  background: var(--tramonto);
  color: var(--blu-notte);
  font-weight: 500;
  font-size: 1.05rem;
  text-decoration: none;
}
.pulsante:hover { background: #F0B784; }

/* Link secondario "Scopri i servizi" */
.link {
  padding: 12px 0;
  text-underline-offset: 5px;
}
.link:hover { color: var(--tramonto); }

.apertura__nota {
  margin: 12px 0 0;
  color: var(--foschia);
  font-size: 0.85rem;
}

/* Firma su due righe */
.firma {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 28px var(--margine) 0;
}
.firma__nome {
  font-family: var(--font-titoli);
  font-size: 1.05rem;
}
.firma__ruoli {
  color: var(--foschia);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* Foto: su telefono è una fascia in fondo all'apertura */
.apertura__foto {
  margin-top: auto;
  padding-top: 32px;
}
.apertura__foto img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: 18% 66%;    /* inquadra il monte e l'orizzonte */
}

.apertura__velatura { display: none; }


/* ---------- 5b. SEZIONI DI CONTENUTO (telefono) ---------- */

/* Impostazione comune a tutte le sezioni dopo l'apertura */
.sezione {
  padding: 64px 0;
  border-top: 1px solid rgba(174, 184, 200, 0.18);   /* filo sottile di separazione */
}
/* Il contenuto parte dallo stesso margine sinistro dell'apertura,
   così tutta la pagina resta allineata; oltre una certa larghezza
   non si allarga più, per non avere righe troppo lunghe. */
.sezione__interno {
  max-width: calc(72rem + 2 * var(--margine));
  padding: 0 var(--margine);
}

/* Titolo della sezione: piccolo, serve da orientamento */
.sezione__etichetta {
  margin: 0;
  font-family: var(--font-testo);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--foschia);
}

/* Frase di introduzione: è il vero titolo visivo della sezione */
.sezione__intro {
  margin: 14px 0 0;
  max-width: 30ch;
  font-family: var(--font-titoli);
  font-weight: 300;
  font-size: clamp(1.75rem, 6.4vw, 2.1rem);
  line-height: 1.18;
}

/* Elenco dei servizi */
.servizi__elenco {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
.servizi__voce {
  padding-top: 20px;
  border-top: 1px solid rgba(174, 184, 200, 0.35);
}
.servizi__voce h3 {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.25;
}
.servizi__voce p {
  margin: 12px 0 0;
  max-width: 38rem;
  color: var(--foschia);
}


/* Come lavoro: le quattro fasi */
.fasi {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: fase;
}
.fase {
  position: relative;
  padding: 20px 0 0 56px;
  border-top: 1px solid rgba(174, 184, 200, 0.35);
}
/* Il numero della fase, nel carattere dei titoli */
.fase__numero {
  position: absolute;
  left: 0;
  top: 16px;
  font-family: var(--font-titoli);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1;
  color: var(--foschia);
}
.fase h3 {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.25;
}
.fase p {
  margin: 10px 0 0;
  max-width: 34rem;
  color: var(--foschia);
}

/* Blocchi trasversali ("In ogni fase", "Una rete di persone") */
.trasversali {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 56px;
}
.trasversale {
  padding-top: 20px;
  border-top: 1px solid rgba(174, 184, 200, 0.35);
}
.trasversale h3 {
  margin: 0;
  font-family: var(--font-testo);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--foschia);
}
.trasversale p {
  margin: 10px 0 0;
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Chiusura della sezione con l'invito */
.chiusura {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(174, 184, 200, 0.35);
}
.chiusura__frase {
  margin: 0 0 8px;
  max-width: 30ch;
  font-family: var(--font-titoli);
  font-weight: 300;
  font-size: clamp(1.5rem, 5.6vw, 1.9rem);
  line-height: 1.22;
}


/* Il metodo, messo alla prova: il mantra in grande */
.mantra {
  margin: 28px 0 0;
  padding: 0;
}
.mantra p {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-titoli);
  font-weight: 300;
  font-size: clamp(1.9rem, 7.2vw, 2.4rem);
  line-height: 1.18;
  text-indent: -0.45em;          /* la virgoletta sporge: la prima lettera resta allineata */
}

.metodo__colonne {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 48px;
}
.metodo__blocco {
  padding-top: 20px;
  border-top: 1px solid rgba(174, 184, 200, 0.35);
}
.metodo__blocco h3 {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.25;
}
.metodo__blocco p {
  margin: 12px 0 0;
  max-width: 36rem;
  color: var(--foschia);
}


/* Chi sono (anteprima): foto e testo */
.chi-sono__interno {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.chi-sono__foto img {
  width: 100%;
  max-width: 420px;
  height: auto;                  /* foto intera, senza ritagli: si vede anche il taccuino */
}
.chi-sono__paragrafo {
  margin: 14px 0 0;
  max-width: 34rem;
  font-family: var(--font-titoli);
  font-weight: 300;
  font-size: clamp(1.35rem, 5vw, 1.6rem);
  line-height: 1.35;
}
.chi-sono__link {
  display: inline-block;
  margin-top: 18px;
}


/* Contatti */
.contatti__testo {
  margin: 20px 0 0;
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.6;
}
.recapiti {
  display: flex;
  flex-direction: column;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(174, 184, 200, 0.35);
}
.recapito {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(174, 184, 200, 0.35);
}
.recapito__etichetta {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--foschia);
}
.recapito__link {
  display: inline-block;
  padding: 4px 0;                /* area di tocco comoda */
  font-family: var(--font-titoli);
  font-size: 1.45rem;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;       /* l'indirizzo email va a capo se serve */
}
.recapito__link:hover { color: var(--tramonto); text-decoration: underline; text-underline-offset: 5px; }
.contatti__riga {
  margin: 28px 0 0;
  font-size: 0.95rem;
  color: var(--foschia);
}

/* Footer */
.footer {
  padding: 40px 0 48px;
  border-top: 1px solid rgba(174, 184, 200, 0.18);
  font-size: 0.9rem;
  color: var(--foschia);
}
.footer__interno {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer__menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__menu a {
  display: inline-block;
  padding: 8px 0;
  color: var(--calcare);
  text-decoration: none;
}
.footer__menu a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer__dati {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.footer__dati a { color: var(--foschia); text-underline-offset: 4px; }
.footer__dati a:hover { color: var(--calcare); }


/* ---------- 5c. PAGINE SECONDARIE (Chi sono, Percorso scientifico, Privacy) ---------- */

.sezione--prima { border-top: 0; padding-top: 24px; }

.pagina__titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 300;
  font-size: clamp(2.4rem, 9vw, 3rem);
  line-height: 1.08;
}
.pagina__intro {
  margin: 24px 0 0;
  max-width: 36rem;
  font-family: var(--font-titoli);
  font-weight: 300;
  font-size: clamp(1.25rem, 4.6vw, 1.45rem);
  line-height: 1.4;
}
.pagina__paragrafo {
  margin: 18px 0 0;
  max-width: 36rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Linea del tempo */
.tappe {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(174, 184, 200, 0.35);
}
.tappa {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(174, 184, 200, 0.35);
}
.tappa__anno {
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  line-height: 1.2;
}
.tappa__testo { max-width: 36rem; color: var(--foschia); }
.tappa__link { display: inline-block; margin-top: 6px; padding: 6px 0; color: var(--calcare); font-size: 0.95rem; }

/* Il mio modo di lavorare (elenco titolo + descrizione) */
.qualita {
  margin: 28px 0 0;
  border-top: 1px solid rgba(174, 184, 200, 0.35);
}
.qualita__voce {
  padding: 18px 0;
  border-bottom: 1px solid rgba(174, 184, 200, 0.35);
}
.qualita dt {
  font-family: var(--font-titoli);
  font-size: 1.3rem;
  line-height: 1.25;
}
.qualita dd {
  margin: 8px 0 0;
  max-width: 36rem;
  color: var(--foschia);
}

/* Chi sono: introduzione con la foto agli specchi */
.intro-foto { display: flex; flex-direction: column; gap: 28px; }
.intro-foto__foto { order: -1; }                 /* su telefono la foto sta sopra il titolo */
.intro-foto__foto img { width: 100%; max-width: 520px; height: auto; }

/* Oltre il lavoro: foto */
.oltre__interno { display: flex; flex-direction: column; gap: 28px; }
.oltre__foto img { width: 100%; max-width: 520px; height: auto; }

.chiusura--pagina { margin-top: 0; padding-top: 0; border-top: 0; }

/* Percorso scientifico: illustrazione del neurone accanto all'introduzione */
.intro-neurone { display: flex; flex-direction: column; gap: 8px; }
.intro-neurone__figura {
  width: auto;
  height: 420px;                  /* su telefono: sotto il testo, più piccola */
  margin: 8px 0 0;
  opacity: 0.95;
}

/* Percorso scientifico: pubblicazioni */
.pubblicazioni__gruppo {
  margin: 28px 0 0;
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.25;
}
.pubblicazioni {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(174, 184, 200, 0.35);
}
.pubblicazioni li {
  padding: 14px 0;
  max-width: 44rem;
  border-bottom: 1px solid rgba(174, 184, 200, 0.35);
  color: var(--foschia);
  font-size: 0.95rem;
  line-height: 1.55;
  overflow-wrap: anywhere;       /* i DOI lunghi vanno a capo senza sbordare */
}
.pubblicazioni em { color: var(--calcare); font-style: italic; }
.pubblicazioni strong { font-weight: 500; color: var(--calcare); }
.pubblicazioni a { color: var(--calcare); text-underline-offset: 4px; }
.pubblicazioni a:hover { color: var(--tramonto); }

/* Chiusura con due link (Percorso scientifico) */
.chiusura-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

/* Privacy */
.privacy__data { margin: 16px 0 0; color: var(--foschia); font-size: 0.95rem; }
.privacy h2 {
  margin: 32px 0 0;
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.25;
}
.privacy h2:first-child { margin-top: 0; }
.privacy p { margin: 10px 0 0; max-width: 40rem; line-height: 1.6; color: var(--foschia); }
.privacy a { color: var(--calcare); text-underline-offset: 4px; overflow-wrap: anywhere; }
.privacy a:hover { color: var(--tramonto); }


/* ---------- 6. SCHERMI GRANDI (da 1100 px di larghezza) ---------- */

@media (min-width: 1100px) {

  :root { --margine: 96px; }

  /* La testata si appoggia sopra la foto */
  .testata {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 36px var(--margine);
    flex-wrap: nowrap;
  }
  .testata__nome { font-size: 1.4rem; }
  .js .testata__menu-pulsante { display: none; }
  .js .menu, .menu { display: block; width: auto; }
  .js .menu ul, .menu ul { flex-direction: row; gap: 40px; padding: 0; }
  .js .menu a, .menu a { font-size: 0.95rem; padding: 6px 0; }

  /* L'apertura occupa tutto lo schermo; la foto fa da sfondo */
  .apertura {
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
  }

  .apertura__foto {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
  }
  .apertura__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;  /* orizzonte a circa il 70% dell’altezza dello schermo */
  }

  /* Velatura: scura in alto a sinistra (dietro il testo), sfuma verso
     destra e verso il basso; leggera ombra sul bordo inferiore (firma). */
  .apertura__velatura {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(ellipse 72% 78% at 0% 0%,
        rgba(13, 26, 48, 0.94) 0%,
        rgba(13, 26, 48, 0.90) 62%,
        rgba(13, 26, 48, 0) 100%),
      linear-gradient(to top,
        rgba(13, 26, 48, 0.90) 0%,
        rgba(13, 26, 48, 0) 20%);
  }

  .apertura__testo,
  .firma {
    position: relative;
    z-index: 2;
  }

  /* Seconda velatura, "attaccata" al blocco di testo: lo segue su ogni
     schermo, così il testo resta leggibile anche dove il cielo è chiaro,
     e sfuma prima di raggiungere il monte e l'orizzonte. */
  .apertura__testo::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -60px;
    right: -160px;
    bottom: -150px;
    left: 0;
    background: radial-gradient(ellipse 66% 50% at 34% 50%,
      rgba(13, 26, 48, 0.88) 0%,
      rgba(13, 26, 48, 0.80) 55%,
      rgba(13, 26, 48, 0) 100%);
    pointer-events: none;
  }
  .apertura__testo > * { position: relative; }

  .apertura__testo {
    max-width: none;
    padding: clamp(112px, 15vh, 136px) var(--margine) 0;
  }
  /* Il titolo si adatta sia alla larghezza sia all'altezza dello schermo,
     così il testo resta sempre nella parte scura del cielo */
  .apertura h1 {
    max-width: 50rem;
    font-size: clamp(2.5rem, min(3.75vw, 6.2vh), 3.4rem);
    line-height: 1.08;
  }
  .apertura__sottotitolo { max-width: 40rem; margin-top: 18px; font-size: 1.125rem; line-height: 1.6; }
  .apertura__azioni { margin-top: 24px; gap: 32px; }
  .link { font-size: 1rem; }

  /* Sopra la foto i testi secondari sono color calcare (leggibilità, E6) */
  .apertura__sottotitolo,
  .apertura__nota,
  .firma__ruoli { color: var(--calcare); }
  .apertura__nota { margin-top: 14px; font-size: 0.875rem; }

  .firma {
    position: absolute;
    left: var(--margine);
    bottom: 52px;
    margin: 0;
    gap: 6px;
  }
  .firma__nome { font-size: 1.125rem; }
  .firma__ruoli { font-size: 0.875rem; }
}


/* ---------- 6b. SEZIONI DI CONTENUTO (schermi grandi) ---------- */

@media (min-width: 1100px) {
  .sezione { padding: 112px 0; }
  .sezione__intro { font-size: 2.4rem; }
}

/* Le tre colonne solo da 1280 px: sotto, le righe sarebbero troppo corte */
@media (min-width: 1280px) {
  /* I tre servizi affiancati, in colonne uguali */
  .servizi__elenco {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
    margin-top: 64px;
  }
  .servizi__voce { padding-top: 24px; }
  .servizi__voce h3 { font-size: 1.5rem; min-height: 2.5em; }  /* titoli allineati anche se su due righe */
  .servizi__voce p { margin-top: 16px; }
}

/* Schermi medi (tablet, portatili piccoli): i tre servizi restano
   uno sotto l'altro, con righe di lunghezza comoda */
@media (min-width: 700px) and (max-width: 1279px) {
  .sezione { padding: 88px 0; }
  .servizi__voce p { max-width: 40rem; }
}


/* Come lavoro su schermi grandi: fasi in due colonne, blocchi affiancati */
@media (min-width: 1100px) {
  .fasi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 64px;
    margin-top: 64px;
  }
  .fase { padding: 24px 0 0 64px; }
  .fase__numero { top: 20px; font-size: 2.4rem; }
  .fase h3 { font-size: 1.4rem; }
  .fase p { margin-top: 12px; }

  .trasversali {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    margin-top: 72px;
  }
  .trasversale { padding-top: 24px; }

  .chiusura {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "frase azioni" "frase nota";
    align-items: start;
    gap: 8px 64px;
    margin-top: 72px;
    padding-top: 32px;
  }
  .chiusura__frase { grid-area: frase; margin: 0; font-size: 2rem; }
  .chiusura .apertura__azioni { grid-area: azioni; margin-top: 6px; }
  .chiusura .apertura__nota { grid-area: nota; margin-top: 0; }
}


/* Il metodo su schermi grandi */
@media (min-width: 1100px) {
  .mantra { margin-top: 36px; }
  .mantra p { font-size: 3rem; max-width: 20ch; }
  .metodo__colonne {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    margin-top: 72px;
  }
  .metodo__blocco { padding-top: 24px; }
  .metodo__blocco h3 { font-size: 1.4rem; }
  .metodo__blocco p { margin-top: 14px; }
}


/* Chi sono su schermi grandi: testo a sinistra, foto a destra */
@media (min-width: 1100px) {
  .chi-sono__interno {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 96px;
    align-items: center;
  }
  .chi-sono__foto { order: 2; }
  .chi-sono__foto img { max-width: 480px; }
  .chi-sono__testo { order: 1; }
  .chi-sono__paragrafo { font-size: 1.9rem; line-height: 1.32; max-width: 30ch; }
  .chi-sono__link { margin-top: 24px; font-size: 1.05rem; }
}


/* Contatti e footer su schermi grandi */
@media (min-width: 1100px) {
  .contatti .sezione__interno {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "etichetta etichetta" "testo recapiti";
    column-gap: 96px;
    align-items: start;
  }
  .contatti .sezione__etichetta { grid-area: etichetta; }
  .contatti__testo-blocco { grid-area: testo; }
  .contatti__testo { margin-top: 24px; font-size: 1.125rem; }
  .contatti__riga { margin-top: 40px; }
  .recapiti { grid-area: recapiti; margin-top: 14px; }
  .recapito { padding: 22px 0; }
  .recapito__link { font-size: 1.7rem; }

  .footer { padding: 48px 0 56px; }
  .footer__interno {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .footer__dati { flex-direction: row; gap: 32px; }
}


/* Pagine secondarie su schermi grandi */
@media (min-width: 1100px) {
  /* Nelle pagine secondarie la testata non si sovrappone a nulla */
  .pagina .testata { position: static; padding-bottom: 24px; }
  .sezione--prima { padding-top: 64px; }
  .pagina__titolo { font-size: 3.4rem; }
  .pagina__intro { margin-top: 28px; max-width: 40rem; font-size: 1.6rem; }
  .pagina__paragrafo { font-size: 1.125rem; max-width: 40rem; }

  .tappa {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 24px;
    padding: 20px 0;
  }
  .tappa__anno { font-size: 1.4rem; }
  .tappa__testo { max-width: 40rem; font-size: 1.05rem; }

  .qualita__voce {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 24px;
    padding: 22px 0;
  }
  .qualita dt { font-size: 1.4rem; }
  .qualita dd { margin: 0; max-width: 40rem; font-size: 1.05rem; }

  .intro-foto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 96px;
    align-items: center;
  }
  .intro-foto__foto { order: 2; }               /* su computer la foto sta a destra del testo */
  .intro-foto__testo { order: 1; }

  .oltre__interno {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 96px;
    align-items: center;
  }
  .oltre__foto img { max-width: 520px; }

  .chiusura--pagina { margin-top: 0; padding-top: 0; }

  .intro-neurone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 96px;
    align-items: center;
  }
  .intro-neurone__figura { height: 760px; margin: 0; justify-self: center; }

  .pubblicazioni__gruppo { margin-top: 36px; font-size: 1.4rem; }
  .pubblicazioni li { padding: 18px 0; font-size: 1rem; }
  .privacy h2 { margin-top: 40px; font-size: 1.5rem; }
  .privacy p { font-size: 1.05rem; }
}


/* ---------- 7. "RIDUCI MOVIMENTO" ---------- */
/* Per ora il sito non ha animazioni; questa regola le spegne comunque
   se in futuro ne verranno aggiunte e la persona preferisce evitarle. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}