@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-700.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-800.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:900;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-900.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/montserrat-400.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/montserrat-700.woff2) format("woff2")}

/* Notte in alto e in fondo, carta azzurrina in mezzo: come un reel che si apre e si chiude sul buio */
:root{
  --notte:#0F1B33; --notte-2:#16264A; --blu:#2A4D94; --rosso:#D43A28; --arancio:#F5A623;
  --carta:#F4F6FA; --bianco:#FFFFFF; --inchiostro:#16181D; --grigio:#4A5468; --filo:#E1E6F0;
  --su-notte:#D5DCEB; --su-notte-2:#C9D3EA; --su-notte-3:#A9B6D3; --bordo-notte:#3A4F7E;
  --sans:Inter,"Segoe UI",Helvetica,Arial,sans-serif; --marchio:Montserrat,Inter,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);color:var(--inchiostro);background:var(--carta);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blu)}
a:hover{color:#1C3670}
:focus-visible{outline:3px solid var(--arancio);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,4vw,env(safe-area-inset-left,0px));padding-right:max(20px,4vw,env(safe-area-inset-right,0px))}
.eyebrow{margin:0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso)}
h1,h2,h3{text-wrap:balance}
h2{margin:0;font-weight:800;font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.02em}
.lead{margin:0;font-size:18px;line-height:1.6;color:var(--grigio);max-width:42em}
.link-freccia{font-weight:700;font-size:15px;text-decoration:none}
.salta{position:absolute;left:-9999px;top:8px;background:var(--bianco);color:var(--notte);padding:10px 14px;border-radius:8px;z-index:5}
.salta:focus{left:12px}

/* Apertura */
.apertura{background:var(--notte);color:var(--bianco)}
.apertura .wrap{padding-block:28px 96px;display:flex;flex-direction:column;gap:72px}
.testata{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.marchio{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bianco)}
.marchio img{width:54px;height:auto;background:var(--bianco);border-radius:8px;padding:6px 7px}
.marchio span{font-family:var(--marchio);font-size:20px;letter-spacing:.01em}
.marchio b{font-weight:700}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:15px;font-weight:500}
.menu a{color:var(--su-notte-2);text-decoration:none;padding:6px 0}
.menu a:hover{color:var(--bianco)}
.menu .bottone-menu{color:var(--notte);background:var(--arancio);padding:11px 18px;border-radius:999px;font-weight:700}
.menu .bottone-menu:hover{color:var(--notte);background:#FFB83F}
.eroe{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.eroe-testo{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:28px}
.eroe-testo .eyebrow{color:#8FA6D9}
.eroe h1{margin:0;font-weight:900;font-size:clamp(48px,7vw,92px);line-height:.98;letter-spacing:-.03em;text-transform:uppercase}
.eroe h1 span{color:var(--arancio)}
.eroe-sub{margin:0;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--su-notte);max-width:34em}
.azioni{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.bottone{background:var(--bianco);color:var(--notte);text-decoration:none;font-weight:700;font-size:16px;padding:15px 24px;border-radius:999px}
.bottone:hover{background:#E6ECF8;color:var(--notte)}
.link-sottolineato{color:var(--bianco);text-decoration:none;font-weight:600;font-size:16px;padding:15px 4px 13px;border-bottom:2px solid var(--bordo-notte)}
.link-sottolineato:hover{color:var(--bianco);border-color:var(--arancio)}
.reel-fila{flex:1.2 1 420px;min-width:0;display:flex;gap:14px;align-items:flex-start;margin:0;padding:0;list-style:none}
.reel{flex:1 1 0;min-width:0;position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--notte-2);margin:0}
.reel:nth-child(2){margin-top:44px}
.reel img{width:100%;height:100%;object-fit:cover}
.reel .etichetta-ia{position:absolute;top:10px;left:10px;font-size:10px;font-weight:600;color:rgba(235,238,245,.85)}
.reel figcaption{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-weight:900;font-size:clamp(12px,1.25vw,17px);line-height:1.15;text-transform:uppercase;color:var(--bianco);text-shadow:0 2px 6px rgba(0,0,0,.75);padding:0 8px}
.reel figcaption span{color:var(--arancio)}

/* Personaggi */
.sezione{padding-block:104px 96px}
.intro{display:flex;flex-direction:column;gap:14px;max-width:46em;margin-bottom:48px}
.schede{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.scheda{background:var(--bianco);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(15,27,51,.06),0 8px 24px rgba(15,27,51,.06)}
.scheda img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.scheda-corpo{padding:26px 28px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.ambito{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blu)}
.scheda h3{margin:0;font-size:26px;font-weight:800;letter-spacing:-.01em}
.scheda p{margin:0}
.scheda .descrizione{font-size:16px;line-height:1.55;color:var(--grigio)}
.scheda blockquote{margin:6px 0 0;font-size:19px;line-height:1.4;font-weight:600;color:var(--inchiostro)}
.scheda .link-freccia{margin-top:auto;padding-top:14px}

/* Metodo */
.metodo{background:var(--bianco);border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)}
.metodo .wrap{padding-block:96px;display:flex;flex-wrap:wrap;gap:56px}
.metodo-testo{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:18px}
.fonti{display:flex;flex-direction:column;gap:10px;padding:22px 24px;background:var(--carta);border-radius:14px;margin-top:8px}
.fonti .titoletto{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.fonti p{margin:0;font-size:15px;line-height:1.6}
.segnali{flex:1 1 440px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;align-content:start}
.segnale{border-radius:18px;padding:32px 28px;display:flex;flex-direction:column;gap:16px;min-height:300px;color:var(--bianco)}
.segnale h3{margin:0;font-size:28px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.segnale p{margin:0;font-size:16px;line-height:1.55}
.espansione{background:var(--blu)}
.espansione p{color:#E3E9F7}
.contrazione{background:var(--notte)}
.contrazione h3{color:#FF8A73}
.contrazione p{color:var(--su-notte)}

/* Regalo */
.regalo-box{background:var(--notte);color:var(--bianco);border-radius:24px;padding:clamp(32px,5vw,64px);display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.regalo-testo{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px}
.regalo-testo .eyebrow{color:var(--arancio)}
.regalo-testo h2{font-size:clamp(30px,3.2vw,44px)}
.regalo-testo p.lead{color:var(--su-notte)}
.regalo-attesa{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px;padding:28px;border:1px solid var(--bordo-notte);border-radius:18px;background:var(--notte-2)}
.regalo-attesa .stato{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--arancio)}
.regalo-attesa p{margin:0;font-size:16px;line-height:1.55;color:var(--su-notte)}
.regalo-attesa .bottone{align-self:flex-start}

/* Articoli */
.articoli{padding-block:8px 96px}
.articoli-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:36px}
.articoli-testa div{display:flex;flex-direction:column;gap:12px}
.articoli-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.articolo{text-decoration:none;color:var(--inchiostro);background:var(--bianco);border:1px solid var(--filo);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;transition:border-color .15s,transform .15s}
.articolo:hover{color:var(--inchiostro);border-color:#B9C4DA;transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.articolo{transition:none}.articolo:hover{transform:none}}
.tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:6px}
.tag-lavoro{color:var(--blu);background:#E6ECF8}
.tag-tutti{color:#8A2418;background:#FBE7E3}
.articolo-titolo{font-size:21px;font-weight:700;line-height:1.3;text-wrap:balance}
.articolo-sommario{font-size:15px;line-height:1.55;color:var(--grigio)}

/* Chi c'e dietro */
.chi{background:#E9EDF5}
.chi .wrap{padding-block:96px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.chi-segno{flex:0 1 300px;min-width:0;display:flex;flex-direction:column;gap:18px}
.chi-segno img{width:100%;height:auto;max-width:220px;background:var(--bianco);border-radius:18px;padding:28px 22px}
.chi-segno ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--grigio)}
.chi-segno li{padding-left:16px;position:relative}
.chi-segno li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--rosso)}
.chi-testo{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:18px;max-width:40em}
.chi-testo h2{font-size:clamp(30px,3.2vw,44px)}
.chi-testo p{margin:0;font-size:18px;line-height:1.65;color:#2E3648}
.chi-testo .citazione{font-size:22px;font-weight:700;line-height:1.35;color:var(--inchiostro);border-top:1px solid #C7CFDF;padding-top:18px}
.chi-testo .nota-ia{font-size:16px;color:var(--grigio)}

/* Piede */
.piede{background:var(--notte);color:var(--su-notte-2)}
.piede .wrap{padding-block:56px 40px;display:flex;flex-direction:column;gap:32px}
.piede-alto{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.piede-marchio{display:flex;flex-direction:column;gap:14px;max-width:30em}
.piede-marchio .nome{font-family:var(--marchio);font-size:20px;color:var(--bianco)}
.piede-marchio .nome b{font-weight:700}
.piede-marchio .firma{margin:0;font-size:22px;font-weight:900;text-transform:uppercase;color:var(--bianco);letter-spacing:-.01em}
.piede-marchio .firma span{color:var(--arancio)}
.piede nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px;align-content:flex-start}
.piede nav a{color:var(--su-notte-2);text-decoration:none}
.piede nav a:hover{color:var(--bianco)}
.piede-basso{border-top:1px solid #253457;padding-top:24px;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.6;color:var(--su-notte-3)}
.piede-basso p{margin:0}

@media (max-width:560px){
  .apertura .wrap{gap:48px}
  .menu{gap:4px 18px;font-size:14px}
  .reel-fila{gap:8px}
  .reel:nth-child(2){margin-top:24px}
  .reel .etichetta-ia{font-size:8px;top:7px;left:7px}
  .sezione{padding-block:72px 64px}
  .metodo .wrap,.chi .wrap{padding-block:72px}
}

/* Pagine interne */
.barra{background:var(--notte);color:var(--bianco)}
.barra .wrap{padding-block:22px}
.menu a[aria-current]{color:var(--bianco);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--arancio)}
.testa-articolo{background:var(--notte);color:var(--bianco);border-top:1px solid #1C2B4D}
.testa-articolo .wrap{padding-block:28px 60px;display:flex;flex-direction:column;gap:16px}
.testa-articolo .eyebrow{color:#8FA6D9}
.testa-articolo h1{margin:0;font-weight:800;font-size:clamp(34px,5vw,56px);line-height:1.06;letter-spacing:-.02em}
.testa-sotto{margin:0;font-size:19px;line-height:1.6;color:var(--su-notte);max-width:40em}
.testa-sotto a,.firma-autore a{color:var(--bianco)}
.firma-autore{margin:0;font-size:14px;color:var(--su-notte-2)}
.briciole ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--su-notte-3)}
.briciole li+li::before{content:"›";margin-right:6px;color:#5D6E94}
.briciole a{color:var(--su-notte-2);text-decoration:none}
.briciole a:hover{color:var(--bianco)}
.stretto{max-width:800px}
.articolo-corpo{padding-block:48px 72px}
.articolo-corpo>*{max-width:68ch}
.articolo-corpo p,.articolo-corpo li{font-size:18px;line-height:1.7;color:#2E3648}
.articolo-corpo p{margin:0 0 20px}
.articolo-corpo h2{margin:44px 0 14px;font-size:clamp(24px,2.6vw,30px);font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--inchiostro)}
.articolo-corpo h3{margin:28px 0 10px;font-size:21px;font-weight:700;color:var(--inchiostro)}
.articolo-corpo ul,.articolo-corpo ol{margin:0 0 22px;padding-left:24px}
.articolo-corpo li{margin-bottom:8px}
.articolo-corpo b{color:var(--inchiostro)}
.articolo-corpo a{text-underline-offset:3px}
.articolo-corpo .risposta{font-size:20px;line-height:1.6;font-weight:500;color:var(--inchiostro);background:var(--bianco);border:1px solid var(--filo);border-radius:16px;padding:24px 26px;margin-bottom:28px}
.articolo-corpo .lingua{font-size:14px}
.articolo-corpo .citazione{font-size:24px;font-weight:700;line-height:1.35;color:var(--inchiostro);margin:28px 0}
.esercizio{background:var(--bianco);border:1px solid var(--filo);border-radius:16px;padding:26px 28px;margin:28px 0}
.esercizio>*:last-child{margin-bottom:0}
.esercizio .esercizio-etichetta{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso)}
.esercizio .esercizio-titolo{margin:0 0 6px;font-size:21px;font-weight:800;color:var(--inchiostro)}
.regalo-mini{background:var(--notte);border-radius:18px;padding:28px;margin:36px 0;display:flex;flex-direction:column;gap:12px}
.regalo-mini p{margin:0;color:var(--su-notte);font-size:16px;line-height:1.55}
.regalo-mini .stato{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--arancio)}
.regalo-mini .regalo-mini-titolo{font-size:22px;font-weight:800;color:var(--bianco)}
.regalo-mini .bottone{align-self:flex-start;margin-top:6px}
.articolo-corpo .nota-divulgativa{font-size:14px;line-height:1.55;color:var(--grigio);border-top:1px solid var(--filo);padding-top:18px;margin-top:36px}
.successivo{display:flex;flex-direction:column;gap:6px;margin-top:28px;padding:22px 24px;border-radius:16px;background:var(--bianco);border:1px solid var(--filo);text-decoration:none;font-size:19px;font-weight:700;color:var(--inchiostro)}
.successivo span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blu)}
.successivo:hover{border-color:#B9C4DA;color:var(--inchiostro)}
.fondo-percorsi{padding-block:8px 96px;display:flex;flex-direction:column;gap:24px}
.fondo-percorsi h2{font-size:clamp(26px,2.8vw,34px)}
.percorsi{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.percorso{background:var(--bianco);border:1px solid var(--filo);border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:6px}
.percorso p{margin:0}
.percorso-num{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso)}
.percorso-nome{font-size:20px;font-weight:800}
.percorso-sotto{font-size:15px;line-height:1.5;color:var(--grigio)}
.percorso ol{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45}
.percorso a{text-decoration:none}
.percorso a:hover{text-decoration:underline}
.percorso a[aria-current]{color:var(--inchiostro);font-weight:700}
.gruppi{padding-block:64px 96px;display:flex;flex-direction:column;gap:64px}
.gruppo-articoli{display:flex;flex-direction:column;gap:12px}
.gruppo-articoli .articoli-griglia{margin-top:12px}
.sezione-corta{padding-block:64px 96px}
.scheda h2{margin:0;font-size:26px;font-weight:800;letter-spacing:-.01em}
.nota-ia-box{margin-top:40px;background:var(--bianco);border:1px solid var(--filo);border-radius:18px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:14px;max-width:820px}
.nota-ia-box h2{font-size:clamp(24px,2.6vw,32px)}
.nota-ia-box p{margin:0;font-size:17px;line-height:1.65;color:#2E3648}
.bottone-scuro{align-self:flex-start;background:var(--notte);color:var(--bianco)}
.bottone-scuro:hover{background:#1C2B4D;color:var(--bianco)}
@media (max-width:560px){
  .testa-articolo .wrap{padding-block:20px 44px}
  .articolo-corpo{padding-block:36px 56px}
  .articolo-corpo p,.articolo-corpo li{font-size:17px}
  .articolo-corpo .risposta{font-size:18px;padding:20px}
}
