/* ==========================================================================
   Aton Research — foglio di stile principale
   Ricostruzione statica del sito atonresearch.com
   Nessuna dipendenza esterna: font, immagini e script sono tutti locali.
   ========================================================================== */

@import url('../fonts/fonts.css');

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colori istituzionali (estratti dal tema originale) */
  --blu:          #0071bd;
  --blu-scuro:    #004e83;
  --navy:         #0b1b2e;
  --bianco:       #ffffff;
  --campo-bg:     #f8f8f8;
  --bordo:        #e3e3e3;
  --bordo-forte:  #c5c5c5;
  --testo:        #1a1a1a;
  --testo-tenue:  #6b6b6b;

  /* Colori dei quattro servizi.
     L'azzurro apparteneva a Direct Marketing, servizio dismesso: resta come
     colore d'accento (imbuto, organigramma). */
  --azzurro:      #7acdf9;
  --serv-qualitativa:  #c8d62b;
  --serv-pharma:       #ffd145;
  --serv-quantitativa: #ffa13d;
  --serv-mistery:      #f68685;

  /* Layout */
  --contenuto:    1340px;   /* 1240px di contenuto + 2 × 50px di respiro laterale */
  --gutter:       clamp(1rem, 4vw, 3.125rem);
  --raggio:       10px;

  /* Tipografia fluida.
     Poppins è più largo di Inter a parità di corpo: le misure sono state
     abbassate di un soffio e l'interlinea allargata, per non allungare
     troppo le righe nei testi lunghi. */
  --fs-titolo:    clamp(1.65rem, 1.1rem + 2.4vw, 2.375rem);
  --fs-sezione:   clamp(1.3rem, 1rem + 1.4vw, 1.75rem);
  --fs-corpo:     clamp(0.9375rem, 0.9rem + 0.2vw, 1.03125rem);
  --fs-piccolo:   0.8125rem;
}

/* --------------------------------------------------------------------------
   2. Reset essenziale
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-corpo);
  line-height: 1.62;
  color: var(--testo);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Accessibilità: link di salto e focus visibile */
.salta-contenuto {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--bianco); color: var(--blu);
  padding: 0.75rem 1.25rem; font-weight: 600;
}
.salta-contenuto:focus { left: 0; }

/* Visibile agli screen reader, non a schermo */
.visivamente-nascosto {
  position: absolute !important;
  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;
}

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   3. Impalcatura
   -------------------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: var(--contenuto);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pagina { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; padding-block: clamp(2rem, 5vw, 3.75rem) clamp(2.5rem, 6vw, 5rem); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.intestazione { background: var(--blu); color: var(--bianco); }

.intestazione__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: clamp(4.5rem, 9.7vw, 8.75rem);
  padding-block: 1rem;
}

.logo { display: block; flex: 0 0 auto; }
.logo img {
  width: clamp(9.5rem, 22vw, 20rem);
  height: auto;
}

/* Navigazione principale */
.nav-principale ul {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
}

.nav-principale a {
  display: inline-block;
  text-transform: uppercase;
  font-size: clamp(0.875rem, 0.78rem + 0.35vw, 1.1875rem);
  letter-spacing: 0.02em;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease, opacity 0.18s ease;
}
.nav-principale a:hover { border-bottom-color: rgba(255, 255, 255, 0.75); }
/* La pagina corrente resta segnalata ad aria-current per gli screen reader:
   l'originale non la evidenzia visivamente e non lo facciamo neanche noi. */

.nav-principale .bandiera img { width: 1.5rem; height: auto; }
.nav-principale .bandiera a { border-bottom: 0; }

/* Pulsante hamburger — visibile solo sotto i 1000px */
.hamburger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  padding: 0; border: 0; background: none;
  cursor: pointer; color: var(--bianco);
  align-items: center; justify-content: center;
}
.hamburger span {
  display: block; position: relative;
  width: 1.6rem; height: 2px; background: currentColor;
  transition: background 0.15s ease;
}
.hamburger span::before,
.hamburger span::after {
  content: ''; position: absolute; left: 0;
  width: 100%; height: 2px; background: currentColor;
  transition: transform 0.22s ease, top 0.22s ease;
}
.hamburger span::before { top: -0.5rem; }
.hamburger span::after  { top:  0.5rem; }

.hamburger[aria-expanded="true"] span { background: transparent; }
.hamburger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Titoli
   -------------------------------------------------------------------------- */
.titolo-pagina {
  font-size: var(--fs-titolo);
  font-weight: 700;
  color: var(--blu);
  text-align: center;
  line-height: 1.2;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  text-wrap: balance;
}

/* Variante allineata a sinistra con filetto (Azienda, Contatti) */
.titolo-sezione {
  font-size: var(--fs-sezione);
  font-weight: 700;
  line-height: 1.25;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--bordo-forte);
  margin-bottom: 1.5rem;
}
.titolo-sezione--blu { color: var(--blu); border-bottom: 0; padding-bottom: 0; }
.titolo-sezione--staccato { margin-top: clamp(2.5rem, 6vw, 3.5rem); }

/* --------------------------------------------------------------------------
   6. I quattro cerchi dei servizi
   Geometria dell'originale: diametro D, passo fra i centri 0,8165·D
   (sovrapposizione del 18,35 %). Ricostruiti in CSS: testo reale, nitidi
   a ogni ingrandimento, niente immagini di testo.
   -------------------------------------------------------------------------- */
.servizi-cerchi {
  --d: clamp(8.75rem, 15.14vw, 16.375rem);
  --passo: calc(var(--d) * 0.81651);
  display: flex;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  position: relative;
  z-index: 0;           /* contesto di impilamento per i dischi colorati */
}

.servizi-cerchi__voce {
  position: relative;   /* volutamente senza z-index: vedi nota sotto */
  flex: 0 0 auto;
  width: var(--d);
  height: var(--d);
  display: flex;
  align-items: center;
  color: var(--bianco);
  font-weight: 700;
  font-size: calc(var(--d) * 0.10);
  line-height: 1.24;
  transition: filter 0.18s ease, transform 0.18s ease;
}

/* Il disco colorato è un pseudo-elemento in z-index negativo. Poiché le voci
   non creano un proprio contesto di impilamento, tutti e quattro i dischi
   finiscono nello stesso livello (sotto .servizi-cerchi) e si sovrappongono in
   ordine di documento, mentre le etichette restano sopra a tutti i dischi.
   È il comportamento dell'originale, dove i cerchi erano un'unica immagine e i
   testi vi galleggiavano sopra: le parole lunghe possono sconfinare nel cerchio
   successivo senza essere tagliate. */
.servizi-cerchi__voce::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--colore-cerchio);
  z-index: -1;
}

.servizi-cerchi__voce + .servizi-cerchi__voce { margin-left: calc(var(--passo) - var(--d)); }

/* Il colore segue il servizio, non la posizione: cambiare l'ordine dei
   cerchi in comuni.py non scombina la tavolozza. */
.cerchio--qualitativa  { --colore-cerchio: var(--serv-qualitativa); }
.cerchio--pharma       { --colore-cerchio: var(--serv-pharma); }
.cerchio--quantitativa { --colore-cerchio: var(--serv-quantitativa); }
.cerchio--mistery      { --colore-cerchio: var(--serv-mistery); }

/* Il testo siede nella porzione visibile del cerchio, non al suo centro
   geometrico: replica l'impaginazione dell'originale. */
.servizi-cerchi__voce > * {
  display: block;
  padding-left: calc(var(--d) * 0.275);
  padding-right: calc(var(--d) * 0.04);
}

.servizi-cerchi a:hover { filter: brightness(1.06); }
.servizi-cerchi a:focus-visible { outline-offset: 4px; }

/* Il cerchio della pagina corrente resta in evidenza */
.servizi-cerchi__voce[aria-current="page"] { filter: brightness(1.04); }

/* --------------------------------------------------------------------------
   7. Diagramma a imbuto della pagina Servizi
   Prima era un'immagine che conteneva anche Direct Marketing: nessun
   collegamento, testo non selezionabile, sgranata sugli schermi densi. Ora la
   sagoma è un SVG e i quattro servizi sono link veri.
   Il riquadro ha proporzioni 900 × 620: da lì nascono tutte le percentuali.
   -------------------------------------------------------------------------- */
.imbuto {
  position: relative;
  width: 100%;
  max-width: 56.25rem;          /* 900 px */
  margin-inline: auto;
  aspect-ratio: 900 / 620;
  container-type: inline-size;
}

.imbuto__forma { position: absolute; inset: 0; width: 100%; height: 100%; }
.imbuto__forma path {
  fill: rgba(0, 113, 189, 0.055);
  stroke: var(--blu);
  stroke-width: 2;
  stroke-linejoin: round;
}
.imbuto__forma .imbuto__freccia { fill: rgba(0, 113, 189, 0.22); stroke: none; }

.imbuto__voci { position: absolute; inset: 0; }

.imbuto__voce {
  position: absolute;
  width: 20%;                   /* 180 px su 900 */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--colore-cerchio);
}
.imbuto__voce a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  padding: 0.35rem;
  border-radius: 50%;
  text-align: center;
  color: var(--bianco);
  font-weight: 700;
  line-height: 1.25;
  transition: filter 0.18s ease;
  font-size: clamp(0.7rem, 2.1vw, 1.3rem);    /* ripiego per browser datati */
  font-size: 2.3cqw;
}
.imbuto__voce a:hover { filter: brightness(1.07); }
.imbuto__voce a:focus-visible { outline-offset: 4px; }

/* Le pareti si stringono scendendo: la fila inferiore sta più in alto e più
   verso il centro, altrimenti i cerchi sborderebbero dalla sagoma.
   Centri nel viewBox: 352 e 548 a quota 158, 358 e 542 a quota 312. */
.imbuto__voce--1 { left: 29.11%; top: 10.97%; }
.imbuto__voce--2 { left: 50.89%; top: 10.97%; }
.imbuto__voce--3 { left: 29.78%; top: 35.81%; }
.imbuto__voce--4 { left: 50.22%; top: 35.81%; }

.imbuto__esito { margin-top: clamp(0.75rem, 2vw, 1.5rem); }
.imbuto__esito img { width: clamp(10rem, 28vw, 18rem); margin-inline: auto; }

/* --------------------------------------------------------------------------
   8. Citazione della home
   -------------------------------------------------------------------------- */
.citazione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.citazione__testo {
  font-size: clamp(1.15rem, 0.85rem + 1.35vw, 1.875rem);
  font-weight: 700;
  color: var(--blu);
  text-align: center;
  line-height: 1.3;
  text-wrap: balance;
}
.citazione img { width: clamp(3.25rem, 9.6vw, 9.4rem); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   9. Griglia a due colonne (home e contatti)
   -------------------------------------------------------------------------- */
.due-colonne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.75rem);
  align-items: start;
}

/* --------------------------------------------------------------------------
   10. Lavori recenti
   -------------------------------------------------------------------------- */
.lavori li + li { margin-top: 1.25rem; }
.lavori h3 { font-size: var(--fs-corpo); font-weight: 700; margin-bottom: 0.15rem; }
.lavori p  { color: var(--testo); }

/* --------------------------------------------------------------------------
   11. News della home
   Il contenuto fra i segni NEWS:INIZIO e NEWS:FINE viene riscritto dal
   pannello di amministrazione: non va modificato a mano.
   -------------------------------------------------------------------------- */
.sezione-news { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
.news__voce {
  border-left: 3px solid var(--blu);
  padding-left: clamp(0.9rem, 2vw, 1.25rem);
}
.news__data {
  font-size: var(--fs-piccolo);
  color: var(--testo-tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.news__titolo {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  color: var(--blu);
  margin-bottom: 0.6rem;
}
.news__immagine {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}
.news__voce p + p { margin-top: 0.6rem; }
.news__vuoto { color: var(--testo-tenue); }

/* --------------------------------------------------------------------------
   12. Modulo di contatto
   -------------------------------------------------------------------------- */
.modulo { display: grid; gap: 0.9rem; }

.modulo input[type="text"],
.modulo input[type="email"],
.modulo textarea {
  width: 100%;
  background: var(--campo-bg);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1.05rem 1.15rem;
  color: var(--testo);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.modulo textarea { min-height: 10.5rem; resize: vertical; }

.modulo input::placeholder,
.modulo textarea::placeholder { color: #9a9a93; opacity: 1; }

.modulo input:focus, .modulo textarea:focus {
  border-color: var(--blu);
  background: var(--bianco);
  outline: none;
}
.modulo input:focus-visible, .modulo textarea:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }

/* Consenso GDPR */
.consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: var(--fs-piccolo);
  line-height: 1.45;
  margin-block: 0.35rem;
}
.consenso input { margin: 0.2rem 0 0; width: 1rem; height: 1rem; accent-color: var(--blu); }

/* Pulsanti */
.bottone {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 700;
  padding: 1.05rem 1.5rem;
  border-radius: var(--raggio);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.bottone--pieno {
  background: var(--blu);
  color: var(--bianco);
  border-color: var(--blu);
}
.bottone--pieno:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); }

.bottone--vuoto {
  background: var(--bianco);
  color: var(--blu);
  border-color: var(--blu);
}
.bottone--vuoto:hover { background: rgba(0, 113, 189, 0.07); }

.bottone:disabled { opacity: 0.6; cursor: not-allowed; }

/* Messaggio di esito del modulo */
.modulo__esito {
  border-radius: var(--raggio);
  padding: 0.9rem 1.1rem;
  font-size: var(--fs-piccolo);
  line-height: 1.5;
}
.modulo__esito[data-stato="ok"]      { background: #e8f4ea; color: #17692e; border: 1px solid #b6ddc0; }
.modulo__esito[data-stato="errore"]  { background: #fdeceb; color: #96231d; border: 1px solid #f2bcb8; }
.modulo__esito[hidden] { display: none; }

/* --------------------------------------------------------------------------
   13. Pagina Azienda — schede del team
   -------------------------------------------------------------------------- */
.testo-lungo p + p { margin-top: 1rem; }
.testo-lungo { margin-bottom: clamp(2rem, 5vw, 3rem); }

.team { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }

.team__scheda {
  display: grid;
  grid-template-columns: minmax(0, 10.125rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
.team__scheda img {
  width: 100%;
  aspect-ratio: 162 / 176;
  object-fit: cover;
  border-radius: 4px;
}
.team__nome {
  font-size: clamp(1.15rem, 0.95rem + 0.85vw, 1.5rem);
  font-weight: 700;
  color: var(--blu);
  margin-bottom: 0.5rem;
}
.team__ruolo { margin-bottom: 0.75rem; }
.team__email { font-weight: 700; }
.team__email a:hover { color: var(--blu); text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. Organigramma (pagina Azienda)
   Ricostruito in HTML invece che ripreso come immagine dalla presentazione:
   leggibile dai motori di ricerca, nitido a ogni zoom, adatto al telefono.
   -------------------------------------------------------------------------- */
.organigramma { display: grid; justify-items: center; }

.organigramma__vertice,
.organigramma__divisione,
.organigramma__base {
  background: var(--blu);
  color: var(--bianco);
  border-radius: 6px;
  padding: 0.85rem 1.15rem;
  text-align: center;
}

.organigramma__vertice { position: relative; max-width: 22rem; }
.organigramma__ruolo {
  font-size: var(--fs-piccolo);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.organigramma__nome { font-weight: 700; font-size: 1.0625rem; }

/* Lo stelo che scende dal vertice verso le divisioni */
.organigramma__vertice::after,
.organigramma__base::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px; height: 1.75rem;
  background: var(--bordo-forte);
  transform: translateX(-50%);
}
.organigramma__vertice::after { top: 100%; }
.organigramma__base::before  { bottom: 100%; }

.organigramma__rami {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  width: 100%;
  margin-top: 1.75rem;
}
.organigramma__ramo { display: grid; gap: 0.6rem; align-content: start; }

.organigramma__foglie { display: grid; gap: 0.4rem; font-size: var(--fs-piccolo); }
.organigramma__foglie li {
  background: var(--campo-bg);
  border: 1px solid var(--bordo);
  border-radius: 5px;
  padding: 0.5rem 0.7rem;
  text-align: center;
}

.organigramma__base {
  position: relative;
  margin-top: 1.75rem;
  max-width: 34rem;
  background: var(--blu-scuro);
}

/* La barra che unisce le quattro divisioni ha senso solo quando stanno
   davvero su una riga sola: sotto i 1000 px restano i soli steli. */
@media (min-width: 1000px) {
  .organigramma__rami { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 1.5rem; }
  .organigramma__rami::before {
    content: '';
    position: absolute;
    top: 0; left: 12.5%; right: 12.5%;
    height: 2px;
    background: var(--bordo-forte);
  }
  .organigramma__ramo { position: relative; }
  .organigramma__ramo::before {
    content: '';
    position: absolute;
    left: 50%; top: -1.5rem;
    width: 2px; height: 1.5rem;
    background: var(--bordo-forte);
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   15. Pagine di servizio — contenuto editoriale
   -------------------------------------------------------------------------- */
.copertina {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.copertina img {
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  border-radius: 4px;
}

.contenuto { max-width: 72rem; margin-inline: auto; }
.contenuto > * + * { margin-top: 1.15rem; }
.contenuto h2 {
  font-size: var(--fs-sezione);
  font-weight: 700;
  color: var(--blu);
  margin-top: 2.25rem;
}
.contenuto h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  margin-top: 1.75rem;
}
.contenuto strong { font-weight: 700; }

/* Elenchi puntati */
.elenco { display: grid; gap: 0.45rem; }
.elenco li { position: relative; padding-left: 1.35rem; }
.elenco li::before {
  content: '';
  position: absolute;
  left: 0.15rem; top: 0.62em;
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--blu);
}

/* Elenco semplice senza punti, come nell'originale */
.elenco-piano li + li { margin-top: 0.15rem; }
.elenco-piano--404 { margin-top: 1.25rem; }

/* Il 404 centra il testo; niente attributi style, vietati dalla CSP */
.contenuto--centrato { text-align: center; }

/* Immagini affiancate al testo nelle pagine di servizio */
.figure-affiancate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  margin-block: clamp(1.5rem, 4vw, 2.25rem);
}
.figure-affiancate img { width: 100%; border-radius: 4px; }

.figura-centrata {
  margin-block: clamp(1.5rem, 4vw, 2.25rem);
}
.figura-centrata img { margin-inline: auto; }

/* --------------------------------------------------------------------------
   16. Pagina Contatti — blocco sede
   -------------------------------------------------------------------------- */
.sede img { width: 100%; max-width: 21.5rem; border-radius: 4px; margin-bottom: 1.25rem; }
.sede__ragione { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.6rem; }
.sede__indirizzo { display: grid; gap: 0.1rem; font-style: normal; }
.sede__email { margin-top: 1rem; }
.sede a:hover { color: var(--blu); text-decoration: underline; }

/* Titolo al corpo del testo, senza filetto: com'è nell'originale */
.titolo-semplice {
  font-size: var(--fs-corpo);
  font-weight: 400;
  margin-bottom: 0.9rem;
}

.riquadro-contatti { margin-top: 1.75rem; }
.riquadro-contatti li + li { margin-top: 0.9rem; }
.riquadro-contatti strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--bordo);
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  margin-top: auto;
}
.pie__interno {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
.pie__titolo {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.pie__titolo--filetto {
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pie p + p { margin-top: 0.55rem; }
.pie li + li { margin-top: 0.75rem; }
.pie a:hover { color: var(--blu); text-decoration: underline; }

.pie__social a { display: flex; align-items: center; gap: 0.7rem; }
.pie__social img { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; }
.pie__testo-social { text-transform: uppercase; }

/* --------------------------------------------------------------------------
   18. Adattamento sotto i 1000 px
   Sopra questa soglia l'originale usa il layout desktop, sotto quello mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .hamburger { display: flex; }

  .nav-principale {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--blu);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    display: none;
    z-index: 50;
  }
  .intestazione__interno { position: relative; }
  .nav-principale[data-aperto="true"] { display: block; }

  .nav-principale ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .nav-principale li + li { border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .nav-principale a {
    display: block;
    padding-block: 0.95rem;
    border-bottom: 0;
    font-size: 1rem;
  }
  .nav-principale a[aria-current="page"] { font-weight: 700; }
  .nav-principale .bandiera { padding-block: 0.95rem; }

  /* I cerchi si impilano in verticale, mantenendo la sovrapposizione */
  .servizi-cerchi {
    --d: min(65vw, 17.5rem);
    flex-direction: column;
    align-items: center;
  }
  .servizi-cerchi__voce + .servizi-cerchi__voce {
    margin-left: 0;
    margin-top: calc(var(--passo) - var(--d));
  }
  .servizi-cerchi__voce {
    justify-content: center;
    text-align: center;
    font-size: calc(var(--d) * 0.105);
  }
  .servizi-cerchi__voce > * {
    padding-left: calc(var(--d) * 0.1);
    padding-right: calc(var(--d) * 0.1);
  }

  /* La citazione impila virgolette e testo */
  .citazione { flex-direction: column; gap: 0.5rem; }
  .citazione img { width: clamp(4rem, 22vw, 7rem); }

  .due-colonne { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  /* Sotto questa larghezza la sagoma dell'imbuto comprime troppo i cerchi:
     meglio una griglia 2 × 2 leggibile. */
  .imbuto { aspect-ratio: auto; container-type: normal; }
  .imbuto__forma { display: none; }
  .imbuto__voci {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .imbuto__voce { position: static; width: 100%; }
  .imbuto__voce a { font-size: clamp(0.8rem, 3.4vw, 1rem); }
}

@media (max-width: 599px) {
  .team__scheda {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .team__scheda img { max-width: 12rem; }
}

/* --------------------------------------------------------------------------
   19. Stampa e preferenze utente
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .intestazione, .pie, .modulo, .hamburger { display: none !important; }
  body { color: #000; }
  .titolo-pagina, .team__nome, .contenuto h2 { color: #000; }
}