@charset "UTF-8";
/* ==========================================================================
   3VOLVENDO — formatore.com
   Palette derivata dal logo. Contrasti WCAG verificati per calcolo:
   bianco/navy 17.0:1 · lime chiaro/navy 9.3:1 · magenta chiaro/navy 5.1:1
   navy/verde lime 5.0:1 · bianco/magenta logo 6.6:1
   ========================================================================== */

/* ---------- Montserrat self-hosted (niente CDN Google: nessun IP dei
     visitatori trasmesso a terzi, e una richiesta di rete in meno) ---------- */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/montserrat-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/montserrat-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/montserrat-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/montserrat-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/montserrat-800-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/montserrat-800-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Montserrat;font-style:normal;font-weight:900;font-display:swap;
  src:url(../fonts/montserrat-900-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:900;font-display:swap;
  src:url(../fonts/montserrat-900-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122}

/* corsivo vero, non sintetizzato dal browser */
@font-face{font-family:Montserrat;font-style:italic;font-weight:500;font-display:swap;
  src:url(../fonts/montserrat-500-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:italic;font-weight:500;font-display:swap;
  src:url(../fonts/montserrat-500-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Montserrat;font-style:italic;font-weight:800;font-display:swap;
  src:url(../fonts/montserrat-800-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:italic;font-weight:800;font-display:swap;
  src:url(../fonts/montserrat-800-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122}

/* ---------- Token ---------- */
:root{
  --navy:#0B1B3A;
  --navy-deep:#060F22;
  --navy-soft:#132549;
  --verde-bosco:#08421B;
  --verde-lime:#479E36;
  --lime:#8FD14F;
  --magenta:#A82C5E;
  --magenta-chiaro:#F04E98;
  --bianco:#FFFFFF;
  --testo:#C9D2E3;          /* corpo su navy — 11.4:1 */
  --testo-tenue:#8B99B5;    /* metadati su navy — 5.6:1 */
  --linea:rgba(201,210,227,.16);

  --max:1240px;
  --gutter:clamp(1.25rem,5vw,4rem);
  --banda:clamp(4.5rem,9vw,8rem);   /* ritmo verticale fra le sezioni */
  --radius:2px;
}

/* ---------- Reset misurato ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--navy);
  color:var(--testo);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  font-size:clamp(1rem,.95rem + .25vw,1.1rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}

/* ---------- Tipografia display ---------- */
.display{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.03em;
  line-height:.92;
  color:var(--bianco);
  text-wrap:balance;
}
.t-xxl{font-size:clamp(2.05rem,8.4vw,6.5rem)}
.t-xl {font-size:clamp(1.75rem,6vw,4.25rem)}
.t-lg {font-size:clamp(1.45rem,3.6vw,2.6rem)}
/* parole lunghe in display non devono mai allargare la pagina */
.display{overflow-wrap:break-word}

/* Due sistemi distinti, mai sovrapposti:

   .leet  — firma del brand: il 3 al posto della E, lo 0 al posto della O.
            Resta bianco: a distinguerlo basta la forma del glifo. Colorarlo
            farebbe concorrenza all'acrostico.
   .acro  — una lettera per sezione, in magenta. Lette dall'alto in basso
            compongono una parola. Il magenta è riservato a questo.
   Il verde resta ai sottotitoli e agli occhielli. */
.leet{color:inherit;font-style:normal}
.acro{color:var(--magenta-chiaro);font-style:normal}

.eyebrow{
  font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.22em;color:var(--lime);
}
/* .eyebrow--m rimosso: il magenta è riservato alle lettere dell'acrostico */

.lead{font-size:clamp(1.05rem,.98rem + .5vw,1.35rem);color:var(--testo);max-width:46ch}
.misura{max-width:62ch}

/* ---------- Impianto ---------- */
/* i link interni puntano alle sezioni: l'ancora non deve finire sotto la testata fissa */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:88px}
@media (max-width:760px){section[id]{scroll-margin-top:120px}}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sezione{padding-block:var(--banda)}
.sezione--fondo{background:var(--navy-deep)}

/* ---------- Accessibilità ---------- */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--lime);outline-offset:3px;border-radius:var(--radius);
}
.salta{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--lime);color:var(--navy);padding:.75rem 1.25rem;font-weight:800;
}
.salta:focus{left:0}

/* ---------- Header ---------- */
.testata{
  position:sticky;top:0;z-index:50;
  background:rgba(11,27,58,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--linea);
}
.testata__row{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:72px;
}
.marchio{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.marchio img{width:38px;height:38px}
.marchio__nome{
  font-weight:900;letter-spacing:.02em;color:var(--bianco);
  font-size:1.05rem;text-transform:uppercase;line-height:1;
}
.marchio__nome .leet{color:var(--magenta-chiaro)}
.marchio__paga{
  display:block;font-weight:500;font-size:.6rem;letter-spacing:.18em;
  color:var(--testo-tenue);text-transform:uppercase;margin-top:.28rem;
}
.nav{display:flex;gap:clamp(.9rem,2.2vw,2rem);flex-wrap:wrap}
.nav a{
  text-decoration:none;font-size:.82rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--testo);padding-block:.4rem;
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--bianco);border-bottom-color:var(--lime)}
.nav a[aria-current="page"]{color:var(--bianco);border-bottom-color:var(--lime)}

/* Sotto i 760px logo e menu su una riga sola sforano la viewport:
   si impilano, e il menu scala. */
@media (max-width:760px){
  .testata__row{flex-direction:column;align-items:flex-start;gap:.7rem;
    min-height:0;padding-block:.85rem}
  .nav{gap:.55rem 1.05rem}
  .nav a{font-size:.72rem;letter-spacing:.03em;padding-block:.2rem}
  .eyebrow{letter-spacing:.14em}
}

/* ---------- Bottoni ---------- */
.bottone{
  display:inline-block;text-decoration:none;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;
  padding:1.05rem 2rem;border-radius:var(--radius);border:2px solid transparent;
  background:var(--lime);color:var(--navy);      /* 9.3:1 */
  transition:transform .18s ease,background-color .18s ease;
}
.bottone:hover{background:var(--bianco);transform:translateY(-2px)}
.bottone--linea{background:transparent;color:var(--bianco);border-color:var(--linea)}
.bottone--linea:hover{background:transparent;border-color:var(--lime);color:var(--lime)}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--navy);
  min-height:clamp(480px,72vh,700px);display:flex;align-items:center}
/* L'immagine copre tutta la copertina e sfuma nel navy verso sinistra,
   dove sta la citazione. */
/* La fotografia dell'aula copre tutta la copertina e sfuma nel navy verso
   sinistra, dove appoggia la citazione. Il file e' largo 2.58: la copertina
   resta piu bassa, altrimenti il ritaglio verticale mangerebbe la scena. */
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:66% 38%}
.hero__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,var(--navy) 0%,rgba(11,27,58,.96) 30%,rgba(11,27,58,.70) 46%,
                    rgba(11,27,58,.26) 66%,rgba(11,27,58,.04) 88%,rgba(11,27,58,0) 100%),
    linear-gradient(180deg,rgba(11,27,58,.40) 0%,rgba(11,27,58,.06) 34%,rgba(6,15,34,.55) 100%);
}
/* .wrap dentro un flex container si restringe al contenuto: va forzato a piena larghezza */
.hero > .wrap{width:100%}
/* .wrap ha margin-inline:auto — limitarne la larghezza lo centra.
   Il contenitore resta pieno e la colonna interna porta la misura. */
.hero__testo{padding-block:clamp(3rem,8vw,6rem)}
.hero__col{max-width:30rem}
@media (min-width:1200px){.hero__col{max-width:34rem}}
/* In verticale la sovrapposizione testo/volto è fragile a ogni larghezza:
   la foto va sopra, il testo sotto su fondo pieno. Il volto resta sempre libero. */
@media (max-width:760px){
  .hero{display:block;min-height:0}
  /* in verticale il file largo 2.58 diventerebbe una striscia: si ritaglia
     piu quadrato, centrato sulla scena */
  .hero__media{position:relative;inset:auto;width:100%;aspect-ratio:5/4}
  .hero__media img{object-position:62% 40%}
  .hero__velo{display:none}
  .hero__testo{padding-block:clamp(2rem,7vw,3rem) clamp(2.5rem,8vw,3.5rem);background:var(--navy)}
}
.hero .lead{margin-top:1.35rem;max-width:42ch}

/* Citazione d'apertura */
.citazione{margin:0}
.citazione__testo{
  font-style:italic;font-weight:800;
  font-size:clamp(1.35rem,2.6vw,2.05rem);
  line-height:1.18;letter-spacing:-.015em;
  color:var(--bianco);text-wrap:pretty;margin:0;
}
.citazione__testo .virgoletta{color:var(--lime);font-style:normal}
.citazione__autore{
  display:block;margin-top:1.15rem;font-style:normal;font-weight:800;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);
}
.hero__claim{margin-top:clamp(1.75rem,3.5vw,2.5rem);max-width:20ch}
.hero__azioni{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.25rem}
.hero__eyebrow{margin-bottom:1.4rem;display:block}

/* ---------- Manifesto ---------- */
.manifesto{border-block:1px solid var(--linea)}
.manifesto__griglia{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr}
@media (min-width:900px){.manifesto__griglia{grid-template-columns:1.15fr .85fr;align-items:end}}
.manifesto p{margin-top:1.25rem}

/* ---------- Aree ---------- */
.aree{display:grid;gap:2px;grid-template-columns:1fr;background:var(--linea)}
@media (min-width:760px){.aree{grid-template-columns:1fr 1fr}}
.area{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(340px,42vw,460px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.5rem,3vw,2.5rem);
  background:var(--navy);text-decoration:none;
}
.area__media{position:absolute;inset:0;z-index:-2}
.area__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.area::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* velo leggero in alto, scuro solo nella fascia bassa dove appoggia il testo:
     la fotografia resta leggibile invece di essere coperta */
  background:linear-gradient(180deg,rgba(6,15,34,.06) 0%,rgba(6,15,34,.20) 40%,
                             rgba(6,15,34,.78) 76%,rgba(6,15,34,.94) 100%);
}
.area:hover .area__media img{transform:scale(1.05)}
.area__nome{margin-top:.75rem;max-width:18ch}
/* le foto ora sono piu chiare: senza ombra l'occhiello sparisce sui fondi luminosi */
.area .eyebrow,.area p,.area__freccia{text-shadow:0 1px 10px rgba(6,15,34,.95),0 0 3px rgba(6,15,34,.8)}
.area__nome{text-shadow:0 2px 16px rgba(6,15,34,.85)}
.area p{margin-top:.85rem;font-size:.95rem;max-width:38ch}
.area__freccia{
  margin-top:1.35rem;font-weight:800;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lime);
}

/* ---------- Prova sociale ---------- */
.numeri{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.numeri{grid-template-columns:repeat(4,1fr)}}
.numero__cifra{
  font-weight:900;font-size:clamp(2.4rem,5.5vw,3.75rem);line-height:1;
  color:var(--bianco);letter-spacing:-.03em;
}
/* il 3 e lo 0 nelle cifre restano bianchi: il magenta è solo dell'acrostico */
/* voci discorsive, non etichette: maiuscoletto e spaziatura le renderebbero illeggibili */
.numero__voce{
  display:block;margin-top:.75rem;font-size:.92rem;line-height:1.5;
  color:var(--testo-tenue);max-width:30ch;
}
.clienti{
  display:flex;flex-wrap:wrap;gap:.6rem 2.25rem;margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.5rem);border-top:1px solid var(--linea);
}
.clienti li{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--testo-tenue)}

/* ---------- Gianni ---------- */
.persona{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:860px){.persona{grid-template-columns:.85fr 1.15fr}}
.persona__foto{position:relative}
.persona__foto img{width:100%;border-radius:var(--radius)}
.persona__foto::before{
  content:"";position:absolute;inset:auto auto -14px -14px;width:64%;height:58%;
  border-left:3px solid var(--lime);border-bottom:3px solid var(--lime);
  z-index:-1;
}
.persona__ruolo{margin-top:.9rem;color:var(--lime);font-weight:800;font-size:.85rem;
  letter-spacing:.12em;text-transform:uppercase}
.persona p{margin-top:1.25rem}
.persona .bottone{margin-top:2rem}

/* ---------- Chiusura ---------- */
.chiusura{text-align:center}
.chiusura .lead{margin:1.5rem auto 0}
.chiusura .bottone{margin-top:2.5rem}

/* ---------- Footer ---------- */
.pieno{background:var(--navy-deep);border-top:1px solid var(--linea);padding-block:3.5rem 2.5rem}
.pieno__row{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.pieno a{color:var(--testo);text-decoration:none}
.pieno a:hover{color:var(--lime)}
.pieno__meta{font-size:.78rem;color:var(--testo-tenue);margin-top:2.5rem;
  padding-top:1.5rem;border-top:1px solid var(--linea)}
.pieno__link{display:flex;flex-direction:column;gap:.6rem;font-size:.9rem}

/* ---------- Rispetto delle preferenze di sistema ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .area:hover .area__media img{transform:none}
}