@charset "UTF-8";
/* ==========================================================================
   nice2026.css — impianto del design "Variante 5 · editoriale" (brand kit 2026)
   Il design vive negli stili inline del markup: qui stanno solo
   font, azzeramenti, stati (hover/focus) e gli adattamenti a tablet e telefono.
   ========================================================================== */

/* ---------------------------------------------------------------- font */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-500.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-600.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-700.woff2) format('woff2')}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/notosanssc-400.woff2) format('woff2')}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/notosanssc-500.woff2) format('woff2')}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/notosanssc-700.woff2) format('woff2')}

/* ------------------------------------------------------------ azzeramenti */
html{scroll-behavior:smooth}
body.n26{margin:0;background:#F8FAFC;color:#062B63;font-family:Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.n26 *{box-sizing:border-box}
body.n26 a{color:#0077C8;text-decoration:none}
body.n26 a:hover{color:#062B63}
body.n26 h1,body.n26 h2,body.n26 h3,body.n26 h4,body.n26 p,body.n26 ul,body.n26 ol,body.n26 figure{margin:0}
/* solo il rientro predefinito del browser: azzerare tutto il padding vincerebbe
   sulle classi del design (specificità più alta) e mangerebbe le spaziature */
body.n26 ul{padding-left:0;list-style:none}
body.n26 button{font:inherit;border:none;background:none;cursor:pointer}
body.n26 ::selection{background:#FF7A00;color:#062B63}
body.n26 img{max-width:100%}
/* width/height sui tag servono al browser per riservare lo spazio (niente salti):
   il CSS mantiene comunque l'immagine fluida */
body.n26 img[width][height]:not([class]){height:auto}
body.n26 h1,body.n26 h2{text-wrap:balance}
body.n26 p{text-wrap:pretty}
/* l'header è alto 84px (+52 col sotto-menu): le ancore non devono finirci sotto */
body.n26 [id]{scroll-margin-top:140px}
body.n26 #candidati{scroll-margin-top:140px}

/* --------------------------------------------- stati presi dal prototipo */
.scp0:hover{color:#062B63 !important}
.scp1:hover{background:#062B63 !important;color:#fff !important}
.scp2:hover{background:#F1F5F9 !important}
.scp3:hover{background:#062B63 !important}
.scp4:hover{transform:scale(1.04) !important}
.scp5:hover{border-color:#FF7A00 !important}
.scp6:hover{filter:grayscale(0) !important}
.scp7:hover{border-color:#0077C8 !important}
.scp8:hover{transform:scale(1.03) !important}
.scp9:focus{border-color:#0077C8 !important;box-shadow:0 0 0 3px rgba(0,119,200,.12) !important}
.scpa:hover{background:#062B63 !important;color:#fff !important;transform:translateY(-1px) !important}
.scpb:hover{color:#FF7A00 !important}
/* i link generati dai bottoni del prototipo restano identici ai bottoni */
body.n26 header a,body.n26 main a[class^="scp"]{text-decoration:none}
body.n26 a:focus-visible,body.n26 button:focus-visible,body.n26 input:focus-visible,
body.n26 select:focus-visible,body.n26 textarea:focus-visible{outline:2px solid #0077C8;outline-offset:2px}


/* ---------- area cliccabile a 44px ----------
   I controlli di accessibilità misurano la scatola dell'elemento, non le aree
   estese via pseudo-elemento: quindi si usa padding vero. Sui link senza sfondo
   (navbar, lingua, footer) il testo resta dov'era e l'aspetto non cambia; le
   pillole del sotto-menu crescono di 9px, che nella barra da 52px ci stanno. */
body.n26 .n26-nav a{display:inline-flex;align-items:center;min-height:44px}
body.n26 .n26-destra a,body.n26 .n26-destra span{display:inline-flex;align-items:center;
  justify-content:center;min-height:44px;min-width:44px}
body.n26 .n26-sottomenu a{display:inline-flex;align-items:center;min-height:44px}
/* nel footer i link stanno vicini per disegno: l'area a 44px serve solo dove
   si tocca con il dito, quindi si applica dai tablet in giù */
@media(max-width:1024px){
  }
body.n26 details summary{min-height:44px;display:flex;align-items:center}


/* ---------- pulsanti arancioni: testo bianco ----------
   Scelta del committente, applicata a ogni pulsante del sito. Il brand kit
   prescrive testo navy sull'arancio perché il bianco su #FF7A00 sta sotto la
   soglia di contrasto: l'arancio dei pulsanti è scurito quel tanto che basta
   perché il bianco resti leggibile. Le etichette piccole (kicker, badge)
   restano navy: lì il testo è minuto e il contrasto conta di più. */
body.n26 .y1f,body.n26 .yaa,body.n26 .yf0,body.n26 .yfb,body.n26 .y10b,body.n26 .y160,body.n26 .y188,body.n26 .y18f{background:#E56D00 !important;color:#fff !important}
body.n26 a.y1f:hover,body.n26 button.y1f:hover,body.n26 a.yaa:hover,body.n26 button.yaa:hover,body.n26 a.yf0:hover,body.n26 button.yf0:hover,body.n26 a.yfb:hover,body.n26 button.yfb:hover,body.n26 a.y10b:hover,body.n26 button.y10b:hover,body.n26 a.y160:hover,body.n26 button.y160:hover,body.n26 a.y188:hover,body.n26 button.y188:hover,body.n26 a.y18f:hover,body.n26 button.y18f:hover{background:#062B63 !important;color:#fff !important}
body.n26 .n26-cta-mobile{background:#E56D00;color:#fff !important}


/* la riga con data e tempo di lettura non deve toccare il filetto sotto */
body.n26 .n26-meta{padding-bottom:34px !important}
@media(max-width:768px){body.n26 .n26-meta{padding-bottom:26px !important}}

/* ---------- l'articolo del Journal ----------
   Il contenuto arriva come HTML semplice da WordPress o dal bot: la struttura
   da rivista (indice laterale, attacco, sezioni scandite) la costruisce il
   template, così chi scrive non deve impaginare nulla. */
body.n26 .n26-corpo{background:#fff;border-top:1px solid #E5E7EB}
body.n26 .n26-corpo-griglia{max-width:1180px;margin:0 auto;padding:56px 40px 100px;
  display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;align-items:start}

/* indice: resta agganciato mentre si scorre */
/* l'indice può essere piu' alto della finestra: si alza e, se serve, scorre
   al proprio interno, cosi' l'ultima voce e il pulsante non toccano mai il bordo */
body.n26 .n26-indice{position:sticky;top:118px;font-family:Manrope,sans-serif;
  max-height:calc(100vh - 160px);overflow-y:auto;padding-bottom:4px;
  scrollbar-width:thin;scrollbar-color:#D6DBE3 transparent}
body.n26 .n26-indice::-webkit-scrollbar{width:4px}
body.n26 .n26-indice::-webkit-scrollbar-thumb{background:#D6DBE3;border-radius:2px}
body.n26 .n26-indice-titolo{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#9CA3AF;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid #E5E7EB}
body.n26 .n26-indice ol{counter-reset:i;margin:0;padding:0;list-style:none}
body.n26 .n26-indice li{counter-increment:i;margin:0 0 4px}
body.n26 .n26-indice a{display:flex;gap:10px;padding:8px 0;font-size:13.5px;line-height:1.45;
  color:#4B5563;text-decoration:none;border-left:2px solid transparent;padding-left:12px;
  margin-left:-14px;transition:color .15s,border-color .15s}
body.n26 .n26-indice a::before{content:counter(i,decimal-leading-zero);color:#C3CFDE;
  font-size:11px;flex:0 0 auto;padding-top:2px}
body.n26 .n26-indice a:hover{color:#062B63;border-left-color:#FF7A00}
/* la voce in lettura: si vede a colpo d'occhio dove si è nell'articolo */
body.n26 .n26-indice a.attiva{color:#062B63;font-weight:600;border-left-color:#FF7A00}
body.n26 .n26-indice a.attiva::before{color:#FF7A00}
/* sfumature: dicono che l'elenco continua oltre il bordo */
body.n26 .n26-indice{position:sticky;--sfu:transparent}
body.n26 .n26-indice.scorre-su{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22px);
  mask-image:linear-gradient(to bottom,transparent,#000 22px)}
body.n26 .n26-indice.scorre-giu{
  -webkit-mask-image:linear-gradient(to top,transparent,#000 22px);
  mask-image:linear-gradient(to top,transparent,#000 22px)}
body.n26 .n26-indice.scorre-su.scorre-giu{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 22px,#000 calc(100% - 22px),transparent)}

/* il testo */
body.n26 .n26-articolo{font-size:18.5px;line-height:1.78;color:#374151;max-width:68ch}
body.n26 .n26-articolo p{margin:0 0 26px;text-wrap:pretty}
body.n26 .n26-articolo p:last-child{margin-bottom:0}
body.n26 .n26-articolo strong{color:#062B63;font-weight:600}
/* attacco: si stacca dal resto, come nelle riviste */
body.n26 .n26-articolo p.n26-attacco{font-size:22px;line-height:1.6;color:#062B63;
  font-weight:400;margin-bottom:38px;padding-bottom:34px;border-bottom:1px solid #E5E7EB}
body.n26 .n26-articolo p.n26-attacco strong{font-weight:600}

/* le sezioni: numerate, con aria intorno */
body.n26 .n26-articolo h2{counter-increment:sez;font-size:30px;line-height:1.2;
  letter-spacing:-.015em;color:#062B63;font-weight:700;margin:62px 0 20px;
  text-wrap:balance;scroll-margin-top:150px;position:relative;padding-top:26px}
body.n26 .n26-articolo h2::before{content:counter(sez,decimal-leading-zero);
  position:absolute;top:0;left:0;font-family:Manrope,sans-serif;font-size:12px;
  letter-spacing:.16em;color:#FF7A00;font-weight:700}
/* La strada di ritorno, in fondo: chi ha finito di leggere e' lontanissimo
   dal menu in cima, e il tasto del browser non e' un pulsante del sito. */
body.n26 .n26-ritorno{margin:52px 0 0 !important}
body.n26 .n26-articolo a.n26-ritorno-tasto,
body.n26 .n26-ritorno-tasto{display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:13px 26px;border:1.5px solid #062B63;border-radius:999px;
  background:#fff;color:#062B63;text-decoration:none;
  font-family:Poppins,sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;
  transition:background .18s ease,color .18s ease}
body.n26 .n26-articolo a.n26-ritorno-tasto{text-decoration:none;color:#062B63}
body.n26 .n26-articolo a.n26-ritorno-tasto:hover,
body.n26 .n26-articolo a.n26-ritorno-tasto:focus-visible,
body.n26 .n26-ritorno-tasto:hover,body.n26 .n26-ritorno-tasto:focus-visible{
  background:#062B63;color:#fff;text-decoration:none}

body.n26 .n26-articolo{counter-reset:sez}
body.n26 .n26-articolo h2:first-child{margin-top:0}
body.n26 .n26-articolo h3{font-size:21px;line-height:1.35;color:#062B63;font-weight:600;
  margin:40px 0 14px;scroll-margin-top:150px}
body.n26 .n26-articolo h4{font-size:18px;color:#062B63;font-weight:600;margin:32px 0 10px}

body.n26 .n26-articolo ul,body.n26 .n26-articolo ol{margin:0 0 26px;padding-left:0}
body.n26 .n26-articolo li{margin:0 0 12px;padding-left:30px;position:relative;list-style:none;
  line-height:1.7}
body.n26 .n26-articolo ul > li::before{content:"\2726";position:absolute;left:4px;top:1px;
  color:#FF7A00;font-size:12px}
body.n26 .n26-articolo ol{counter-reset:n}
body.n26 .n26-articolo ol > li{counter-increment:n}
body.n26 .n26-articolo ol > li::before{content:counter(n);position:absolute;left:0;top:1px;
  color:#0077C8;font-weight:700;font-size:14px;font-family:Manrope,sans-serif}

body.n26 .n26-articolo a{color:#0077C8;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(0,119,200,.35)}
body.n26 .n26-articolo a:hover{color:#062B63;text-decoration-color:#062B63}

body.n26 .n26-articolo blockquote{margin:40px 0;padding:26px 30px;background:#F8FAFC;
  border-left:3px solid #FF7A00;border-radius:0 8px 8px 0}
body.n26 .n26-articolo blockquote p{font-size:20px;line-height:1.6;color:#062B63;
  font-weight:500;margin:0}
body.n26 .n26-articolo img{border-radius:8px;display:block;height:auto;max-width:100%;margin:0}
body.n26 .n26-articolo figure{margin:40px 0}
body.n26 .n26-articolo figcaption{margin-top:10px;font-family:Manrope,sans-serif;
  font-size:12.5px;color:#9CA3AF}
body.n26 .n26-articolo hr{border:0;border-top:1px solid #E5E7EB;margin:48px 0}
body.n26 .n26-articolo table{width:100%;border-collapse:collapse;margin:30px 0;font-size:16px;display:table}
body.n26 .n26-articolo th,body.n26 .n26-articolo td{padding:12px;border-bottom:1px solid #E5E7EB;text-align:left}
body.n26 .n26-articolo th{color:#062B63;font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}

/* articoli correlati */
body.n26 .n26-correlati{background:#F8FAFC;border-top:1px solid #E5E7EB}
body.n26 .n26-correlati-wrap{max-width:1360px;margin:0 auto;padding:96px 40px}
body.n26 .n26-correlati-occhiello{font-family:Manrope,sans-serif;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:#0077C8;margin:0}
body.n26 .n26-correlati-titolo{margin:16px 0 44px;font-size:34px;line-height:1.1;
  letter-spacing:-.015em;color:#062B63;font-weight:700}
body.n26 .n26-correlati-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px;
  margin:0;padding:0;list-style:none}

@media(max-width:1024px){
  body.n26 .n26-corpo-griglia{grid-template-columns:1fr;gap:0;padding:56px 32px 80px}
  body.n26 .n26-indice{position:static;margin-bottom:44px;padding:22px 24px;
    background:#F8FAFC;border-radius:10px}
  body.n26 .n26-indice ol{columns:2;column-gap:26px}
    body.n26 .n26-correlati-griglia{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  body.n26 .n26-corpo-griglia{padding:40px 20px 64px}
  body.n26 .n26-articolo{font-size:17.5px;line-height:1.75}
  body.n26 .n26-articolo p.n26-attacco{font-size:19.5px}
  body.n26 .n26-articolo h2{font-size:25px;margin-top:48px}
  body.n26 .n26-articolo h3{font-size:19.5px}
  body.n26 .n26-indice ol{columns:1}
  body.n26 .n26-correlati-wrap{padding:56px 20px}
  body.n26 .n26-correlati-titolo{font-size:26px}
  body.n26 .n26-correlati-griglia{grid-template-columns:1fr}
}

/* le pagine legali sono testo lungo: stesso ritmo, senza indice */
body.n26 .n26-legale p{margin:0 0 20px;line-height:1.7}
body.n26 .n26-legale h2{font-size:26px;color:#062B63;font-weight:700;margin:44px 0 14px}
body.n26 .n26-legale h3{font-size:19px;color:#062B63;font-weight:600;margin:30px 0 10px}
body.n26 .n26-legale ul,body.n26 .n26-legale ol{margin:0 0 20px;padding-left:22px}
body.n26 .n26-legale li{margin-bottom:8px;list-style:disc}
body.n26 .n26-legale a{color:#0077C8;text-decoration:underline}

/* il logo cresce dentro la barra, che resta alta 84px */
body.n26 .n26-barra > a img{height:62px !important;width:auto !important;max-width:none}
@media(max-width:834px){body.n26 .n26-barra > a img{height:40px !important}}


/* ---------- aria fra il titolo di sezione e le card ----------
   Nel prototipo le griglie partono a 44-56px dal titolo: con titoli da 42px
   il risultato si legge come "attaccato". Qui si porta la distanza a ~72px,
   uguale ovunque, senza toccare il resto dell'impaginazione. */
body.n26 main ul[class*="y"],
body.n26 main ol[class*="y"],
body.n26 main div[class*="y"]{--x:0}
body.n26 main section > div > ul[class],
body.n26 main section > div > ol[class]{margin-top:72px}
@media(max-width:1180px){
  body.n26 main section > div > ul[class],
  body.n26 main section > div > ol[class]{margin-top:56px}
}
@media(max-width:768px){
  body.n26 main section > div > ul[class],
  body.n26 main section > div > ol[class]{margin-top:40px}
}


/* ============================ FOOTER ============================
   Struttura riscritta da zero: un solo contenitore, quattro fasce
   (marchio + link, valori 耐思优, partner, note legali). */
body.n26 .n26-footer{background:#062B63;color:#fff}
body.n26 .n26-footer-dentro{max-width:1360px;margin:0 auto;padding:72px 40px 40px}

/* --- marchio e colonne --- */
body.n26 .n26-footer-alto{display:grid;grid-template-columns:minmax(240px,1fr) auto;
  gap:40px 64px;align-items:stretch;padding-bottom:48px}
/* la regola generica img[width][height]{height:auto} ha specificità più alta:
   qui serve forzare, altrimenti il logo resta alla sua dimensione naturale */
body.n26 .n26-footer-marchio img{height:140px !important;width:auto;display:block;margin-left:-8px}
body.n26 .n26-footer-marchio p{margin:20px 0 0;max-width:24em;font-size:14.5px;
  line-height:1.65;color:rgba(255,255,255,.66)}
/* le quattro colonne sono un blocco unico: le intestazioni si allineano fra
   loro e il gruppo si appoggia in basso, a filo del margine destro */
body.n26 .n26-footer-colonne{display:grid;grid-template-columns:repeat(4,1fr);
  gap:40px;align-items:start;align-self:end;justify-self:end;min-width:min(920px,100%)}


body.n26 .n26-footer-titolo{font-family:Manrope,sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#FF7A00;margin:0 0 16px}
body.n26 .n26-footer-alto ul{margin:0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:9px}
body.n26 .n26-footer-alto li a,body.n26 .n26-footer-alto li span{
  font-size:14.5px;color:rgba(255,255,255,.82);text-decoration:none;line-height:1.4}
body.n26 .n26-footer-alto li a:hover{color:#FF7A00}
body.n26 .n26-footer-alto li span{color:rgba(255,255,255,.45)}

/* --- valori 耐 思 优 --- */
body.n26 .n26-footer-valori{display:flex;justify-content:space-between;gap:24px;
  margin:0;padding:38px 0 40px;list-style:none;border-top:1px solid rgba(255,255,255,.16)}
body.n26 .n26-footer-valori li{display:flex;gap:18px;align-items:flex-start}

body.n26 .n26-valore-hanzi{font-family:'Noto Sans SC',sans-serif;font-size:40px;line-height:1;
  color:#FF7A00;flex:0 0 auto}
body.n26 .n26-valore-testi{display:flex;flex-direction:column;gap:2px}
body.n26 .n26-valore-pinyin{font-family:Manrope,sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
body.n26 .n26-valore-testo{font-size:16px;font-weight:600;color:#fff;line-height:1.35}

/* --- partner: loghi nati per fondo chiaro, quindi su piastrelle bianche --- */
body.n26 .n26-footer-partner{padding:32px 0 34px;border-top:1px solid rgba(255,255,255,.16)}
body.n26 .n26-footer-partner ul{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin:0;padding:0;list-style:none}
body.n26 .n26-footer-partner li{background:#fff;border-radius:8px;height:64px;
  display:flex;align-items:center;justify-content:center;padding:10px 16px}
body.n26 .n26-footer-partner li a{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%}
body.n26 .n26-footer-partner img{height:100%;width:auto;max-width:190px;
  object-fit:contain;display:block}


/* --- note legali --- */
body.n26 .n26-footer-legale{display:flex;flex-wrap:wrap;gap:16px 32px;
  justify-content:space-between;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.16)}
body.n26 .n26-footer-legale p{margin:0;font-family:Manrope,sans-serif;font-size:12px;
  color:rgba(255,255,255,.5)}
body.n26 .n26-footer-legale a{color:rgba(255,255,255,.72);text-decoration:none}
body.n26 .n26-footer-legale a:hover{color:#FF7A00}
body.n26 .n26-footer-recaptcha{margin:14px 0 0;font-family:Manrope,sans-serif;font-size:12px;
  line-height:1.6;color:rgba(255,255,255,.42)}
body.n26 .n26-footer-recaptcha a{color:rgba(255,255,255,.62);text-decoration:underline}
body.n26 .n26-footer-recaptcha a:hover{color:#FF7A00}

@media(max-width:1024px){
  body.n26 .n26-footer-dentro{padding:52px 32px 32px}
  body.n26 .n26-footer-alto{grid-template-columns:1fr;gap:36px}
  body.n26 .n26-footer-marchio{grid-column:1/-1}
  body.n26 .n26-footer-colonne{grid-template-columns:repeat(2,1fr);gap:32px;
    justify-self:start;align-self:start}

  body.n26 .n26-footer-valori{flex-direction:column}
  body.n26 .n26-footer-valori li:last-child{text-align:left}
  body.n26 .n26-footer-valori li:last-child .n26-valore-testi{align-items:flex-start}
  body.n26 .n26-footer-valori{grid-template-columns:1fr;gap:18px}

  body.n26 .n26-footer-alto li a,body.n26 .n26-footer-alto li span{
    display:inline-flex;align-items:center;min-height:44px}
  body.n26 .n26-footer-alto ul{gap:0}
  body.n26 .n26-footer-legale a{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:560px){
  body.n26 .n26-footer-dentro{padding:44px 20px 28px}
  body.n26 .n26-footer-alto{grid-template-columns:1fr}
  body.n26 .n26-footer-marchio img{height:110px !important}
  body.n26 .n26-footer-partner li{width:calc(50% - 5px);height:54px}
}

/* ---------- stacco dopo la striscia dei requisiti (home)
   La striscia finisce con un filetto; la sezione dopo apre con 128px di
   padding e il vuoto diventa una voragine. Solo qui, non ovunque. */
body.n26 .y4b + section{padding-top:64px}
@media(max-width:768px){body.n26 .y4b + section{padding-top:44px}}

/* chiusura di sezione: paragrafo di coda staccato dalle card */
body.n26 .n26-chiusa{margin-top:40px;max-width:64ch}

/* ---------- immagini: altezza libera
   Le img portano width/height per evitare lo sfarfallio in caricamento, ma
   l'attributo height fissa l'altezza in pixel e manda in soffitta
   l'aspect-ratio della classe: la foto esce alta quanto l'originale.
   Qui l'altezza torna automatica, cosi' la proporzione del design vince. */
body.n26 img.y55,body.n26 img.yb6,body.n26 img.y128{height:auto}

/* ------------------------------------------------------------ menu mobile */
.n26-hamburger{display:none}
.n26-menu-mobile{position:fixed;inset:0;z-index:90;background:#062B63;padding:88px 20px 32px;overflow-y:auto}
.n26-menu-mobile[hidden]{display:none}
.n26-menu-mobile nav{display:flex;flex-direction:column;gap:4px}
.n26-menu-mobile .n26-voce{display:block;color:#fff;font-size:22px;font-weight:600;padding:12px 0;min-height:44px}
.n26-menu-mobile .n26-sottovoci{display:flex;flex-direction:column;gap:2px;padding:0 0 10px 14px;
  border-left:1px solid rgba(255,255,255,.18);margin-left:2px}
.n26-menu-mobile .n26-sottovoci a{color:rgba(255,255,255,.7);font-size:16px;padding:11px 0;min-height:44px;display:block}
.n26-menu-basso{display:flex;align-items:center;gap:16px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.n26-menu-basso a{font-family:Manrope,sans-serif;font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.6);
  min-width:44px;min-height:44px;display:flex;align-items:center}
.n26-menu-basso a.attiva{color:#fff;font-weight:600}
.n26-cta-mobile{flex:1;justify-content:center;background:#FF7A00;color:#062B63 !important;font-family:Poppins,sans-serif !important;
  font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:0 20px}


/* La barra non va mai a capo: prima si stringe, e sotto i 1180 diventa il
   menu a scomparsa. Le misure dei link stanno nell'attributo style del
   markup, quindi qui serve !important per superarle. */
body.n26 .n26-nav{flex-wrap:nowrap}
body.n26 .n26-nav a{white-space:nowrap}
body.n26 .n26-sottomenu a,body.n26 .n26-sottomenu span{white-space:nowrap}
@media (min-width:1181px) and (max-width:1360px){
  body.n26 .n26-barra{grid-template-columns:150px 1fr auto !important;gap:22px !important;
    padding-left:24px !important;padding-right:24px !important}
  body.n26 .n26-nav{gap:17px}
  body.n26 .n26-nav a{font-size:14px !important}
  body.n26 .n26-destra{gap:14px}
  body.n26 .n26-destra .scp1{padding-left:18px !important;padding-right:18px !important}
}

/* ========== adattamenti che restano generici (i per-classe stanno in nice2026-classi.css) ========== */
@media (max-width:1180px){
  body.n26 .n26-nav{display:none !important}
  body.n26 .n26-barra{display:flex !important;align-items:center !important;justify-content:space-between !important;
    height:68px !important;padding-left:24px !important;padding-right:24px !important;gap:12px !important}
  body.n26 .n26-hamburger{display:flex !important;flex:0 0 44px}
  body.n26 h1{font-size:clamp(38px,5.4vw,54px) !important}
  body.n26 [id]{scroll-margin-top:120px}
}
@media (max-width:834px){
  body.n26 .n26-destra{display:none !important}
  body.n26 .n26-sottomenu{display:none !important}
  body.n26 .n26-barra{height:64px !important;padding-left:20px !important;padding-right:20px !important}
  body.n26 .n26-barra > a img{height:32px !important;width:32px !important}
  body.n26 [id]{scroll-margin-top:84px}
}
@media (max-width:768px){
  body.n26 h1{font-size:clamp(30px,8vw,38px) !important}
  body.n26 form{padding:28px 20px 26px !important;gap:20px !important}
  body.n26 form button[type="submit"]{width:100% !important;justify-content:center !important}
  /* aree toccabili: mai sotto 44px, compresi i link ravvicinati */
  body.n26 a,body.n26 button,body.n26 summary{min-height:44px}
  body.n26 nav a,  body.n26 li{margin-bottom:6px}
  /* ogni elemento toccabile: almeno 44x44 e distanziato dai vicini */
    body.n26 footer li{margin-bottom:8px}
  body.n26 details summary{min-height:44px;display:flex;align-items:center}
  body.n26 a[class*="y"]{padding-top:2px;padding-bottom:2px}
  /* il logo e ogni altro link-immagine devono restare toccabili */
  body.n26 a:has(> img),body.n26 .n26-barra > a{min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}
  body.n26{overflow-x:hidden}
}
body.n26 table{display:block;overflow-x:auto;max-width:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.n26 *{transition:none !important;animation:none !important}
}


/* ---------- footer su telefono
   A 390px quattro colonne di link diventano due strettissime: qui si mettono
   in colonna unica, e la striscia dei valori segue. */
@media (max-width:560px){
  body.n26 .n26-footer-colonne{grid-template-columns:1fr;gap:28px}
  body.n26 .n26-footer-marchio img{height:96px !important}
  body.n26 .n26-footer-partner ul{justify-content:flex-start;gap:20px}
  body.n26 .n26-footer-legale{gap:8px}
}


/* ---------- form breve + dettagli facoltativi
   Il form chiedeva undici campi in una volta e faceva due lavori diversi:
   prendere un contatto e raccogliere una candidatura. Ora si vedono i quattro
   dati che servono per richiamare qualcuno; il resto sta in un blocco chiuso,
   che si apre solo se la persona ha voglia. */
body.n26 .n26-campi-base{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media (max-width:640px){body.n26 .n26-campi-base{grid-template-columns:1fr;gap:18px}}

body.n26 .n26-extra{margin-top:26px;border-top:1px solid #E5E7EB;padding-top:20px}
body.n26 .n26-extra > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;
  font-family:Manrope,sans-serif;font-weight:600;font-size:15px;color:#0077C8;
  padding:6px 0;min-height:44px}
body.n26 .n26-extra > summary::-webkit-details-marker{display:none}
body.n26 .n26-extra > summary::before{
  content:"+";display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border:1px solid currentColor;border-radius:50%;
  font-size:15px;line-height:1;flex:0 0 auto}
body.n26 .n26-extra[open] > summary::before{content:"\2212"}
body.n26 .n26-extra > summary span{color:#6B7280;font-weight:500}
body.n26 .n26-extra > summary:hover{color:#062B63}
body.n26 .n26-extra > *:not(summary){margin-top:20px}

/* ---------- contatto diretto sempre a portata
   Al posto del popup a tempo, che si chiude per riflesso senza leggerlo:
   un bottone fermo in un angolo, che non interrompe mai. */
body.n26 .n26-whatsapp{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;color:#062B63;text-decoration:none;
  font-family:Manrope,sans-serif;font-weight:600;font-size:15px;
  padding:12px 18px 12px 14px;border-radius:999px;
  box-shadow:0 6px 24px rgba(6,43,99,.18);border:1px solid #E5E7EB;
  transition:transform .18s ease,box-shadow .18s ease}
body.n26 .n26-whatsapp:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(6,43,99,.24)}
body.n26 .n26-whatsapp svg{width:24px;height:24px;flex:0 0 auto}
@media (max-width:640px){
  body.n26 .n26-whatsapp{right:14px;bottom:14px;padding:14px;gap:0}
  body.n26 .n26-whatsapp span{display:none}   /* solo il simbolo, non copre il testo */
}
@media print{body.n26 .n26-whatsapp{display:none}}


/* ================= correzioni telefono (27 luglio) =================
   Il giro automatico controllava solo che niente sforasse: necessario, ma non
   sufficiente. Queste sono le cose che si vedono solo guardando lo schermo. */
@media (max-width:820px){

  /* 1. Hero a tutto schermo. Il contenitore dell'immagine si prendeva 20px di
        margine per lato: da li' il bordo bianco attorno alla foto. Fuori i
        margini e gli angoli tondi; il testo tiene il suo respiro. */
  body.n26 .y9{padding-left:0 !important;padding-right:0 !important}
  body.n26 .ya{padding-left:0 !important;padding-right:0 !important;
    border-radius:0;max-width:100%}
  body.n26 .yc{padding:28px 20px 32px !important}
  body.n26 .y10{padding-left:20px;padding-right:20px}

  /* 2. Bottoni: il testo lungo non deve restare su una riga sola a costo di
        sfondare, e quando va a capo va centrato. */
  body.n26 .y188,
  body.n26 .scpa,
  body.n26 button[type=submit]{
    white-space:normal !important;text-align:center;
    display:inline-flex;align-items:center;justify-content:center;
    padding:16px 24px;line-height:1.25;max-width:100%}
  body.n26 a.scp0,body.n26 a.scp1,body.n26 a.scp2,body.n26 a.scp3,
  body.n26 a.scp5,body.n26 a.scp6,body.n26 a.scp7,body.n26 a.scp8,body.n26 a.scpb{
    text-align:center}

  /* 3. Indice dell'articolo: era un riquadro con scorrimento proprio dentro un
        elemento appiccicato. Col dito sopra, la pagina non scorreva piu' e
        bisognava spostarsi di lato per uscirne. Su telefono torna un blocco
        normale, senza scorrimento interno. */
  body.n26 .n26-indice{position:static !important;max-height:none !important;
    overflow:visible !important;-webkit-mask-image:none !important;mask-image:none !important;
    margin-bottom:28px}

  /* 4. Loghi dei partner: erano una colonna unica lunghissima. */
  body.n26 .n26-footer-partner ul{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px 14px;
    align-items:center;justify-items:center}
  body.n26 .n26-footer-partner img{max-width:100%;height:auto}
}

@media (max-width:560px){
  /* 5. Il margine della pagina si somma a quello dentro le card e strozza il
        testo: due parole per riga e prezzi spezzati a meta'. Si stringe quello
        esterno, che e' decorativo, e si lascia quello interno, che serve. */
  body.n26 main > section > div[class]{padding-left:16px;padding-right:16px}
  body.n26 .n26-footer-partner ul{grid-template-columns:repeat(2,1fr)}
}


/* ================= secondo blocco telefono =================

   1. Il menu non si capiva perche' il pannello (z-index 90) copriva
      l'intestazione: aperto il menu, il pulsante per chiuderlo spariva sotto e
      non restava nessuna via d'uscita visibile. L'intestazione torna sopra. */
body.n26 header,
body.n26 .n26-testata{position:relative;z-index:100}
body.n26 .n26-menu-mobile{z-index:90}
@media (max-width:820px){
  /* il pulsante diventa una X quando il menu e' aperto: si vede cosa fa */
  body.n26 .n26-hamburger[aria-expanded="true"]{color:#062B63}
  body.n26 .n26-menu-mobile{padding-top:96px}
  body.n26 .n26-menu-mobile nav{gap:2px}
  body.n26 .n26-menu-mobile .n26-voce{font-size:20px;padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.10)}
  body.n26 .n26-menu-mobile .n26-sottovoci{padding-bottom:14px}

  /* 2. Blocchi alternati testo/immagine: a una colonna l'ordine del prototipo
        metteva due foto di fila e poi due testi di fila. L'immagine va sempre
        per prima, cosi' il ritmo resta foto-testo, foto-testo. */
  body.n26 .y1b > *:has(img),      body.n26 .y77 > *:has(img),
  body.n26 .y1b > *:has(figure),   body.n26 .y77 > *:has(figure),
  body.n26 .y1b > figure,          body.n26 .y77 > figure,
  body.n26 .y1b > img,             body.n26 .y77 > img,
  body.n26 .y1b > *[class*="y16d"],body.n26 .y77 > *[class*="y16d"]{order:-1}

  /* 3. Le griglie a filetto (un pixel di sfondo che fa da bordo) a una colonna
        accostavano due bordi e ne veniva fuori uno spesso il doppio. */
  body.n26 .y12d, body.n26 .y170, body.n26 .y175, body.n26 .y19e{
    gap:0;background:transparent;border-radius:4px;overflow:hidden}
  body.n26 .y12d > *, body.n26 .y170 > *, body.n26 .y175 > *, body.n26 .y19e > *{
    border-bottom:1px solid #E5E7EB}
  body.n26 .y12d > *:last-child, body.n26 .y170 > *:last-child,
  body.n26 .y175 > *:last-child, body.n26 .y19e > *:last-child{border-bottom:none}

  /* 4. Le card non devono stringere il testo contro il bordo. */
  body.n26 .y2a, body.n26 .y8a, body.n26 .y9f, body.n26 .ybf,
  body.n26 .y6c, body.n26 .ya3, body.n26 .y5f{padding:22px 20px}

  /* 5. Prezzi e nomi di programma non si spezzano a meta'. */
  body.n26 .y47 + *, body.n26 [class] > strong{overflow-wrap:normal}
  body.n26 h2, body.n26 h3{overflow-wrap:break-word;hyphens:none}
}

/* 6. Importi e durate restano su una riga sola ovunque: "700€" spezzato fra
      due righe non si legge come un prezzo. */
body.n26 .n26-intero{white-space:nowrap}


/* link con freccia in fila: al posto delle due pillole, che erano segnaposto
   e non portavano da nessuna parte */
body.n26 .y177{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center}
body.n26 .y177 .y16f{margin-top:0}


/* pagamento a rate: sotto l'importo grande, non fra le note in piccolo */
body.n26 .n26-rate{display:inline-flex;align-items:center;gap:8px;
  margin:12px 0 0;padding:8px 16px;border-radius:999px;
  background:#FFF1E3;color:#B85200;
  font-family:Manrope,sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.01em}
body.n26 .n26-rate::before{content:"\2726";color:#FF7A00;font-size:13px}
body.n26 .n26-rate strong{font-weight:700}


/* ---------- mappa delle città
   I punti sono link veri, posizionati in percentuale sulle coordinate reali:
   la scheda compare al passaggio del mouse e anche quando il punto riceve il
   fuoco da tastiera, altrimenti sarebbe raggiungibile solo col mouse. */
body.n26 .n26-mappa{margin-top:44px}
body.n26 .n26-mappa-aiuto{font-family:Manrope,sans-serif;font-size:13px;
  letter-spacing:.02em;color:#6B7280;margin:0 0 18px}
body.n26 .n26-mappa-tela{position:relative;margin:0 auto;aspect-ratio:1000/850;width:min(100%,820px,82vh)}
body.n26 .n26-mappa-base{width:100%;height:100%;display:block}

body.n26 .n26-mappa-punto{position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  text-decoration:none;color:#062B63;z-index:1}
body.n26 .n26-mappa-punto:hover,
body.n26 .n26-mappa-punto:focus-visible{z-index:5;outline:none}

body.n26 .n26-mappa-segno{width:11px;height:11px;border-radius:50%;
  background:#FF7A00;box-shadow:0 0 0 4px rgba(255,122,0,.22);
  transition:transform .16s ease,box-shadow .16s ease}
body.n26 .n26-mappa-punto:hover .n26-mappa-segno,
body.n26 .n26-mappa-punto:focus-visible .n26-mappa-segno{
  transform:scale(1.35);box-shadow:0 0 0 7px rgba(255,122,0,.28)}

body.n26 .n26-mappa-nome{font-family:Manrope,sans-serif;font-weight:600;
  font-size:12.5px;letter-spacing:.01em;white-space:nowrap;
  background:rgba(255,255,255,.86);padding:1px 6px;border-radius:3px}

body.n26 .n26-mappa-scheda{position:absolute;bottom:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(4px);width:230px;
  background:#062B63;color:#fff;border-radius:6px;padding:13px 15px;
  font-family:Manrope,sans-serif;font-size:13.5px;line-height:1.45;
  box-shadow:0 12px 30px rgba(6,43,99,.28);
  opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;
  pointer-events:none}
body.n26 .n26-mappa-scheda strong{display:block;font-family:Poppins,sans-serif;
  font-size:15.5px;margin-bottom:5px}
body.n26 .n26-mappa-scheda i{font-style:normal;color:#FF9F45;margin-left:6px}
body.n26 .n26-mappa-punto:hover .n26-mappa-scheda,
body.n26 .n26-mappa-punto:focus-visible .n26-mappa-scheda{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* su telefono il riquadro al passaggio non esiste: i punti restano link,
   e sotto la mappa la pagina continua con l'elenco delle città */
@media (max-width:820px){
  body.n26 .n26-mappa-nome{font-size:11px;padding:1px 4px}
  body.n26 .n26-mappa-scheda{display:none}
}


/* etichette della mappa: nei grappoli (Pechino-Tianjin, Suzhou-Shanghai-Hangzhou,
   Guangzhou-Shenzhen) i nomi si accavallavano. Ognuno prende un suo lato. */
body.n26 .n26-mappa-punto{flex-direction:column}
body.n26 .n26-lato-sopra{flex-direction:column-reverse}
body.n26 .n26-lato-destra,body.n26 .n26-lato-sinistra{flex-direction:row;gap:5px}
body.n26 .n26-lato-sinistra{flex-direction:row-reverse}
body.n26 .n26-lato-destra .n26-mappa-nome,
body.n26 .n26-lato-sinistra .n26-mappa-nome{margin-top:0}


/* stacco fra punto ed etichetta: con 4px il nome finiva sopra il pallino */
body.n26 .n26-mappa-punto{gap:7px}
body.n26 .n26-lato-sopra,body.n26 .n26-lato-sotto{gap:8px}


/* Sulla mappa larga i nomi hanno spazio: si possono leggere meglio e non
   servono piu' accostati al pallino. */
body.n26 .n26-mappa-nome{font-size:13.5px;padding:2px 7px;border-radius:4px;
  box-shadow:0 1px 3px rgba(6,43,99,.10)}
body.n26 .n26-mappa-punto{gap:8px}
body.n26 .n26-lato-destra,body.n26 .n26-lato-sinistra{gap:7px}


/* ---------- popup delle tre guide ---------- */
body.n26 .n26-popup{position:fixed;inset:0;z-index:300;display:flex;
  align-items:center;justify-content:center;padding:20px}
body.n26 .n26-popup[hidden]{display:none}
body.n26 .n26-popup-velo{position:absolute;inset:0;background:rgba(6,43,99,.62);
  opacity:0;transition:opacity .22s ease}
body.n26 .n26-popup.n26-aperto .n26-popup-velo{opacity:1}
body.n26 .n26-popup-scatola{position:relative;width:100%;max-width:470px;
  background:#fff;border-radius:10px;padding:38px 34px 30px;
  box-shadow:0 30px 70px rgba(6,43,99,.34);
  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .22s ease,transform .22s ease}
body.n26 .n26-popup.n26-aperto .n26-popup-scatola{opacity:1;transform:none}
body.n26 .n26-popup-x{position:absolute;top:10px;right:12px;width:44px;height:44px;
  border:0;background:none;font-size:28px;line-height:1;color:#9CA3AF;cursor:pointer}
body.n26 .n26-popup-x:hover{color:#062B63}
body.n26 .n26-popup-occhiello{font-family:Manrope,sans-serif;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:#FF7A00}
body.n26 .n26-popup-scatola h2{font-family:Poppins,sans-serif;font-weight:700;
  font-size:27px;line-height:1.12;letter-spacing:-.015em;color:#062B63;margin:12px 0 0}
body.n26 .n26-popup-scatola p{font-size:16px;line-height:1.6;color:#374151;margin:14px 0 0}
body.n26 .n26-popup-modulo{margin-top:22px;display:flex;flex-direction:column;gap:10px}
body.n26 .n26-popup-modulo input[type=email]{width:100%;padding:15px 16px;font-size:16px;
  border:1px solid #D6DBE3;border-radius:6px;font-family:Manrope,sans-serif}
body.n26 .n26-popup-modulo input[type=email]:focus{outline:2px solid #0077C8;outline-offset:1px}
body.n26 .n26-popup-modulo button{background:#FF7A00;color:#062B63;border:0;border-radius:999px;
  padding:15px 22px;font-family:Poppins,sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;min-height:48px}
body.n26 .n26-popup-modulo button:disabled{opacity:.6;cursor:wait}
body.n26 .n26-popup-errore{color:#B42318;font-size:14px;margin:2px 0 0 !important}
body.n26 .n26-popup-nota{font-size:13px !important;color:#6B7280 !important;margin-top:14px !important}
body.n26 .n26-popup-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

body.n26 .n26-popup-guide{list-style:none;padding:0;margin:20px 0 0;display:flex;
  flex-direction:column;gap:9px}
body.n26 .n26-popup-guide a{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 16px;border:1px solid #E5E7EB;border-radius:7px;
  text-decoration:none;color:#062B63;font-weight:600;font-size:15px;min-height:48px;
  transition:border-color .16s ease,background .16s ease}
body.n26 .n26-popup-guide a:hover{border-color:#FF7A00;background:#FFF7F0}
body.n26 .n26-popup-guide em{font-style:normal;font-family:Manrope,sans-serif;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#FF7A00;flex:0 0 auto}

@media (max-width:560px){
  body.n26 .n26-popup{padding:14px;align-items:flex-end}
  body.n26 .n26-popup-scatola{padding:30px 22px 24px;border-radius:12px 12px 0 0;max-width:none}
  body.n26 .n26-popup-scatola h2{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  body.n26 .n26-popup-velo,body.n26 .n26-popup-scatola{transition:none}
}


/* Mappa: i pallini e le targhette erano tarati su una mappa larga il doppio.
   Rimpicciolita la base, si accavallavano tutti sulla costa est, dove stanno
   sette citta' su dieci. */
body.n26 .n26-mappa-segno{width:8px;height:8px;
  box-shadow:0 0 0 3px rgba(255,122,0,.20)}
body.n26 .n26-mappa-punto:hover .n26-mappa-segno,
body.n26 .n26-mappa-punto:focus-visible .n26-mappa-segno{
  transform:scale(1.3);box-shadow:0 0 0 5px rgba(255,122,0,.26)}

body.n26 .n26-mappa-nome{font-size:11.5px;padding:1px 5px;border-radius:3px;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 2px rgba(6,43,99,.12)}

body.n26 .n26-mappa-punto{gap:4px}
body.n26 .n26-lato-sopra,body.n26 .n26-lato-sotto{gap:5px}
body.n26 .n26-lato-destra,body.n26 .n26-lato-sinistra{gap:4px}

/* la scheda al passaggio: piu' stretta, sulla mappa piccola quella da 230px
   usciva dal bordo */
body.n26 .n26-mappa-scheda{width:195px;font-size:12.5px;padding:11px 13px}
body.n26 .n26-mappa-scheda strong{font-size:14px}

@media (max-width:820px){
  body.n26 .n26-mappa-nome{font-size:10px;padding:1px 4px}
  body.n26 .n26-mappa-segno{width:7px;height:7px;box-shadow:0 0 0 2px rgba(255,122,0,.20)}
}


/* Destinazioni: testo a sinistra e mappa a destra, invece che in colonna.
   Il selettore si aggancia alla sezione che CONTIENE la mappa, cosi' le altre
   sezioni che usano la stessa classe atomica non vengono toccate.
   display:contents scioglie il contenitore della mappa: la riga di aiuto puo'
   cosi' stare nella colonna del testo e la tela occupare tutta l'altra. */
body.n26 section.y2:has(.n26-mappa){
  display:grid;grid-template-columns:minmax(250px,350px) 1fr;
  column-gap:54px;align-items:center}
body.n26 section.y2:has(.n26-mappa) > .n26-mappa{display:contents}
body.n26 section.y2:has(.n26-mappa) > .y37{grid-column:1;grid-row:1;align-self:end}
body.n26 section.y2:has(.n26-mappa) .n26-mappa-aiuto{
  grid-column:1;grid-row:2;align-self:start;margin:16px 0 0}
body.n26 section.y2:has(.n26-mappa) .n26-mappa-tela{
  grid-column:2;grid-row:1/span 2;width:min(100%,78vh);justify-self:center}

@media (max-width:900px){
  body.n26 section.y2:has(.n26-mappa){grid-template-columns:1fr;row-gap:8px}
  body.n26 section.y2:has(.n26-mappa) > .y37,
  body.n26 section.y2:has(.n26-mappa) .n26-mappa-aiuto{grid-column:1}
  body.n26 section.y2:has(.n26-mappa) .n26-mappa-aiuto{grid-row:2;margin:12px 0 0}
  body.n26 section.y2:has(.n26-mappa) .n26-mappa-tela{
    grid-column:1;grid-row:3;width:min(100%,72vh);margin-top:10px}
}

/* ---------------------------------------------------------------
   Testimonianze delle partecipanti.
   Le foto che abbiamo sono ritratti quadrati, non immagini larghe:
   quindi la scheda non usa la foto a tutta larghezza come le altre
   del sito, ma un tondo accanto al nome. Le schede stanno su una
   riga flessibile e non su una griglia a tre colonne fisse, cosi'
   l'ultima riga resta centrata anche quando le persone non sono
   un multiplo di tre (oggi sono sette).
   --------------------------------------------------------------- */
body.n26 .n26-testimonianze{margin-top:44px;display:flex;flex-wrap:wrap;gap:24px;
  justify-content:center;list-style:none;padding:0}
body.n26 .n26-testimonianza{flex:1 1 300px;max-width:calc((100% - 48px)/3);
  background:#fff;border:1px solid #E5E7EB;border-radius:4px;padding:28px;
  display:flex;flex-direction:column;gap:16px}
body.n26 .n26-testimonianza-testa{display:flex;align-items:center;gap:12px}
body.n26 .n26-testimonianza-foto{width:56px;height:56px;border-radius:50%;
  object-fit:cover;flex:none;background:#E8F2FA}
body.n26 .n26-testimonianza-nome{font-family:Poppins,sans-serif;font-weight:600;
  font-size:16px;line-height:1.2;color:#062B63;margin:0}
body.n26 .n26-testimonianza-dove{font-family:Manrope,sans-serif;font-size:12px;
  color:#6B7280;margin:4px 0 0}
body.n26 .n26-testimonianza-testo{font-family:Poppins,sans-serif;font-weight:500;
  font-size:17px;line-height:1.5;color:#062B63;margin:0;flex:1}

@media (max-width:1180px){
  body.n26 .n26-testimonianza{max-width:calc((100% - 24px)/2)}
}
@media (max-width:768px){
  body.n26 .n26-testimonianze{margin-top:32px;gap:16px}
  body.n26 .n26-testimonianza{max-width:100%;padding:24px}
  body.n26 .n26-testimonianza-testo{font-size:16px;line-height:1.6}
}

/* ---------------------------------------------------------------
   Articoli delle esperienze: voti a stelle, domande veloci,
   galleria e riquadro Ambassador. Vivono dentro .n26-corpo,
   quindi ereditano la larghezza della colonna di lettura.
   --------------------------------------------------------------- */
body.n26 .n26-voto{background:#fff;border:1px solid #E5E7EB;border-radius:4px;
  padding:20px 24px;margin:28px 0;display:flex;flex-direction:column;gap:14px}
body.n26 .n26-voto-riga{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
body.n26 .n26-voto-etichetta{font-family:Manrope,sans-serif;font-size:14px;color:#374151}
body.n26 .n26-stelle{font-size:20px;line-height:1;letter-spacing:3px;color:#FF7A00;white-space:nowrap}
body.n26 .n26-stelle i{color:#E5E7EB;font-style:normal}
body.n26 .n26-voto-si{font-family:Poppins,sans-serif;font-weight:700;font-size:15px;color:#0077C8}

body.n26 .n26-veloci{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:12px;margin:28px 0;padding:0;list-style:none}
body.n26 .n26-veloce{background:#F1F6FB;border-radius:4px;padding:16px 18px}
body.n26 .n26-veloce-dom{font-family:Manrope,sans-serif;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#0077C8;margin:0 0 6px}
body.n26 .n26-veloce-ris{font-family:Poppins,sans-serif;font-weight:600;font-size:17px;
  line-height:1.35;color:#062B63;margin:0}

body.n26 .n26-galleria{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin:28px 0;padding:0;list-style:none}
body.n26 .n26-galleria li{margin:0}
body.n26 .n26-galleria img{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:4px;display:block}

body.n26 .n26-amb{background:#062B63;border-radius:4px;padding:26px 28px;margin:30px 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
body.n26 .n26-amb p{margin:0;color:#fff;font-family:Manrope,sans-serif;font-size:15px;line-height:1.55}
body.n26 .n26-amb-testo{flex:1 1 260px}
body.n26 .n26-amb-riga{display:flex;align-items:center;gap:10px}
body.n26 .n26-amb-eti{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
body.n26 .n26-amb-codice{font-family:Poppins,sans-serif;font-weight:700;font-size:19px;
  letter-spacing:.04em;background:#FF7A00;color:#062B63;padding:7px 14px;border-radius:4px}
body.n26 .n26-amb a{color:#fff;text-decoration:underline;text-underline-offset:3px}

@media (max-width:768px){
  body.n26 .n26-voto{padding:18px 20px}
  body.n26 .n26-voto-riga{justify-content:flex-start}
  body.n26 .n26-amb{padding:22px 20px}
}

/* Le liste degli articoli hanno il ✦ come segnalibro e il rientro: le griglie
   di riquadri e la galleria non sono elenchi da leggere, quindi lo tolgono.
   E dentro il riquadro navy il grassetto navy sparirebbe: si fa arancione. */
body.n26 .n26-articolo ul.n26-veloci > li::before,
body.n26 .n26-articolo ul.n26-galleria > li::before{content:none}
body.n26 .n26-articolo ul.n26-veloci > li,
body.n26 .n26-articolo ul.n26-galleria > li{padding-left:0;position:static}
body.n26 .n26-amb strong{color:#FF7A00}

/* Le schede di chi ha un articolo dedicato diventano cliccabili per intero.
   Le altre restano schede mute: meglio niente link che un link a vuoto. */
body.n26 .n26-testimonianza-link{display:flex;flex-direction:column;gap:16px;
  height:100%;text-decoration:none;color:inherit}
body.n26 .n26-testimonianza-leggi{margin-top:auto;font-family:Manrope,sans-serif;
  font-size:13px;font-weight:600;color:#0077C8}
body.n26 .n26-testimonianza:has(.n26-testimonianza-link):hover{border-color:#0077C8}
body.n26 .n26-testimonianza-link:hover .n26-testimonianza-leggi{text-decoration:underline;
  text-underline-offset:3px}

/* Slot Nice Ambassador nella pagina dei costi. */
body.n26 ul.n26-amb-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
body.n26 .n26-amb-card{border:1px solid #E5E7EB;border-radius:4px;background:#fff;padding:0;
  transition:border-color .2s}
body.n26 .n26-amb-card:hover{border-color:#0077C8}
body.n26 .n26-amb-link{display:flex;flex-direction:column;gap:12px;padding:22px;
  height:100%;text-decoration:none;color:inherit}
body.n26 .n26-amb-foto{width:62px;height:62px;border-radius:50%;object-fit:cover;
  background:#E8F2FA;display:block}
body.n26 .n26-amb-leggi{margin-top:auto;font-family:Manrope,sans-serif;font-size:13px;
  font-weight:600;color:#0077C8}
body.n26 .n26-amb-link:hover .n26-amb-leggi{text-decoration:underline;text-underline-offset:3px}
@media (max-width:768px){
  body.n26 ul.n26-amb-lista{grid-template-columns:1fr}
}

/* Le schede sono un unico link, quindi dentro ci sono span: senza display:block
   i margini verticali non varrebbero niente. Il tondo con l'iniziale sostituisce
   il ritratto di chi non ha ancora mandato una foto. */
body.n26 .n26-testimonianza-nome,
body.n26 .n26-testimonianza-dove,
body.n26 .n26-testimonianza-testo,
body.n26 .n26-testimonianza-leggi{display:block}
body.n26 .n26-testimonianza-iniziale{display:flex;align-items:center;justify-content:center;
  font-family:Poppins,sans-serif;font-weight:600;font-size:22px;line-height:1;
  color:#0077C8;background:#E8F2FA}

/* Con un numero dispari di schede l'ultima restava sola in mezzo alla riga.
   Ora le schede hanno la base pari alla colonna e nessun tetto: quella che
   avanza si allarga da sola fino a riempire la riga, a qualunque larghezza.
   Quando diventa larga si dispone in orizzontale (ritratto a sinistra, parole
   a destra) grazie a una container query: dipende dalla scheda, non dalla
   finestra, quindi vale anche se un domani le persone diventano dieci. */
body.n26 .n26-testimonianza{flex:1 1 calc((100% - 48px)/3);max-width:none;
  container-type:inline-size}
@media (max-width:1180px){
  body.n26 .n26-testimonianza{flex-basis:calc((100% - 24px)/2);max-width:none}
}
@media (max-width:768px){
  body.n26 .n26-testimonianza{flex-basis:100%;max-width:none}
}
@container (min-width:760px){
  body.n26 .n26-testimonianza-link{flex-direction:row;align-items:center;gap:32px}
  body.n26 .n26-testimonianza-testa{flex:0 0 240px}
  body.n26 .n26-testimonianza-testo{flex:1 1 auto}
  body.n26 .n26-testimonianza-leggi{flex:0 0 auto;margin:0;white-space:nowrap}
}

/* La riga sotto la griglia delle città: le dieci non sono tutte. */
body.n26 .n26-altre-citta{margin:26px 0 0;max-width:760px;font-family:Manrope,sans-serif;
  font-size:14px;line-height:1.6;color:#6B7280}

/* Verifica anti-robot nel modulo di candidatura.
   la casella "Non sono un robot": il riquadro di Google e' 304x78 e non si
   ridimensiona da solo, quindi sotto i 340px lo si rimpicciolisce a mano */
body.n26 .n26-captcha{margin:18px 0 4px}
/* lo spazio si tiene fin da subito: la casella arriva da Google un attimo dopo
   il resto della pagina, e senza questo il pulsante ballerebbe */
body.n26 .n26-captcha-slot{display:inline-block;line-height:0;min-height:78px}
body.n26 .n26-captcha-avviso{margin:8px 0 0;font-family:Manrope,sans-serif;
  font-size:13.5px;line-height:1.5;color:#C2410C}
body.n26 .n26-captcha-avviso[hidden]{display:none}
body.n26 .n26-captcha-guasto{font-family:Manrope,sans-serif;font-size:13.5px;
  line-height:1.6;color:#6B7280;max-width:300px}
body.n26 .n26-captcha-guasto a{color:#0077C8}
@media (max-width:340px){
  body.n26 .n26-captcha-slot{transform:scale(.86);transform-origin:0 0;min-height:68px}
}

/* la stessa casella dentro il popup delle guide: la scatola sul telefono e'
   piu' stretta dei 304px del riquadro di Google, quindi li' si rimpicciolisce */
body.n26 .n26-popup-captcha{min-height:78px;line-height:0}
body.n26 .n26-popup-captcha .n26-captcha-guasto{font-family:Manrope,sans-serif;
  font-size:13.5px;line-height:1.6;color:#6B7280;max-width:100%}
@media (max-width:360px){
  body.n26 .n26-popup-captcha{min-height:66px;transform:scale(.85);transform-origin:0 0}
}


/* Convenzione Airalo, in fondo alla pagina dell'arrivo. Sta in un riquadro suo:
   e' un'informazione pratica e non deve sembrare parte del racconto. */
body.n26 .n26-convenzione-sez{background:#fff}
body.n26 .n26-convenzione{max-width:1360px;margin:0 auto;padding:72px 40px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
body.n26 .n26-convenzione-occhiello{font-family:Manrope,sans-serif;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:#FF7A00}
body.n26 .n26-convenzione-titolo{font-family:Poppins,sans-serif;font-weight:700;
  font-size:30px;line-height:1.15;letter-spacing:-.015em;color:#062B63;margin:12px 0 0}
body.n26 .n26-convenzione-riga{font-family:Manrope,sans-serif;font-size:16.5px;
  line-height:1.65;color:#374151;margin:14px 0 0;max-width:56ch}
body.n26 .n26-convenzione-azione{display:flex;flex-direction:column;align-items:flex-start;
  gap:8px;padding:26px 30px;background:#F5F8FC;border:1px solid #E5E7EB;border-radius:12px}
/* il marchio del partner: 236x68 mostrato a meta', cosi' resta nitido sui
   schermi densi senza servire un file piu' grande */
body.n26 .n26-convenzione-logo{display:block;width:118px;height:auto;margin:0 0 16px}
body.n26 .n26-convenzione-eti{font-family:Manrope,sans-serif;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:#6B7280}
body.n26 .n26-convenzione-codice{font-family:Poppins,sans-serif;font-weight:700;
  font-size:30px;letter-spacing:.08em;color:#062B63;line-height:1.1}
body.n26 .n26-convenzione-tasto{margin-top:10px;display:inline-flex;align-items:center;
  justify-content:center;min-height:48px;padding:13px 26px;border-radius:999px;
  background:#FF7A00;color:#062B63;text-decoration:none;
  font-family:Poppins,sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;transition:filter .18s ease}
body.n26 .n26-convenzione-tasto:hover,body.n26 .n26-convenzione-tasto:focus-visible{
  filter:brightness(.94)}
@media (max-width:1180px){
  body.n26 .n26-convenzione{padding:56px 32px;grid-template-columns:1fr;gap:28px}
  body.n26 .n26-convenzione-azione{align-self:start}
}
@media (max-width:768px){
  body.n26 .n26-convenzione{padding:48px 20px}
  body.n26 .n26-convenzione-titolo{font-size:25px}
  body.n26 .n26-convenzione-azione{width:100%;padding:22px 24px}
  body.n26 .n26-convenzione-tasto{width:100%}
}

/* ═══ Matteo Ricci Exchange — blocchi del brief 31/8/2026 ═══════════════════ */
body.n26 .n26-mr-sez{background:#fff}
body.n26 .n26-mr{max-width:1360px;margin:0 auto;padding:96px 40px}
body.n26 .n26-mr-occhiello{font-family:Manrope,sans-serif;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#FF7A00}
body.n26 .n26-mr-titolo{font-family:Poppins,sans-serif;font-weight:700;font-size:40px;
  line-height:1.1;letter-spacing:-.02em;color:#062B63;margin:14px 0 0;max-width:20ch}
body.n26 .n26-mr-riga{font-family:Manrope,sans-serif;font-size:17px;line-height:1.65;
  color:#374151;margin:18px 0 0;max-width:62ch}
body.n26 .n26-mr-largo{max-width:70ch}
body.n26 .n26-mr-nota{font-family:Manrope,sans-serif;font-size:14px;line-height:1.6;
  color:#6B7280;margin:28px 0 0;max-width:70ch}

/* le quattro stagioni */
body.n26 .n26-stagioni{list-style:none;padding:0;margin:44px 0 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:20px}
body.n26 .n26-stagione{background:#F5F8FC;border:1px solid #E5E7EB;border-radius:14px;
  padding:26px 24px 28px;display:flex;flex-direction:column}
body.n26 .n26-stagione-icona{font-size:28px;line-height:1}
body.n26 .n26-stagione-nome{font-family:Poppins,sans-serif;font-weight:700;font-size:21px;
  color:#062B63;margin:14px 0 0}
body.n26 .n26-stagione-mesi{font-family:Manrope,sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#0077C8;margin:6px 0 0}
body.n26 .n26-stagione-eti{font-family:Manrope,sans-serif;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#6B7280;margin:22px 0 0}
body.n26 .n26-stagione-scadenza{font-family:Poppins,sans-serif;font-weight:700;font-size:19px;
  color:#062B63;margin:3px 0 0}
body.n26 .n26-stagione-feste{font-family:Manrope,sans-serif;font-size:13.5px;line-height:1.55;
  color:#374151;margin:18px 0 0;padding-top:16px;border-top:1px solid #E5E7EB}
body.n26 .n26-stagione-feste em{color:#6B7280;font-style:normal;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase}

/* il percorso */
body.n26 .n26-percorso{list-style:none;padding:0;margin:44px 0 0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:26px 56px}
body.n26 .n26-passo{display:flex;gap:18px;align-items:flex-start}
body.n26 .n26-passo-numero{font-family:Poppins,sans-serif;font-weight:700;font-size:15px;
  color:#FF7A00;flex:0 0 auto;padding-top:2px;min-width:26px}
body.n26 .n26-passo-titolo{font-family:Poppins,sans-serif;font-weight:600;font-size:19px;
  color:#062B63;margin:0}
body.n26 .n26-passo-testo{font-family:Manrope,sans-serif;font-size:15.5px;line-height:1.6;
  color:#374151;margin:7px 0 0}

/* le due squadre */
body.n26 .n26-squadre{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:44px 0 0}
body.n26 .n26-squadra{background:#F5F8FC;border:1px solid #E5E7EB;border-radius:14px;padding:30px 28px}
body.n26 .n26-squadra-bandiera{font-size:26px;line-height:1}
body.n26 .n26-squadra-nome{font-family:Poppins,sans-serif;font-weight:700;font-size:22px;
  color:#062B63;margin:12px 0 0;line-height:1.2}
body.n26 .n26-squadra-quando{font-family:Manrope,sans-serif;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:#FF7A00;margin:8px 0 0}
body.n26 .n26-squadra-passi{list-style:none;padding:0;margin:22px 0 0;counter-reset:sq}
body.n26 .n26-squadra-passi li{font-family:Manrope,sans-serif;font-size:15.5px;color:#374151;
  padding:9px 0 9px 26px;position:relative;border-top:1px solid #E5E7EB}
body.n26 .n26-squadra-passi li:first-child{border-top:0}
body.n26 .n26-squadra-passi li::before{content:"\2193";position:absolute;left:0;color:#0077C8;font-size:13px}
body.n26 .n26-squadra-passi li:first-child::before{content:"\2022"}

/* perché Matteo Ricci — chiaro: sta subito sotto la copertina, e due fondi
   scuri di fila appesantivano la pagina */
body.n26 .n26-mr-perche{background:#F5F8FC;border-bottom:1px solid #E5E7EB}
body.n26 .n26-mr-frase{font-family:Poppins,sans-serif;font-weight:700;font-size:32px;
  line-height:1.2;letter-spacing:-.015em;color:#062B63;margin:30px 0 0;max-width:24ch;
  padding-left:20px;border-left:3px solid #FF7A00}

@media (max-width:1180px){
  body.n26 .n26-mr{padding:72px 32px}
  body.n26 .n26-mr-titolo{font-size:34px}
  body.n26 .n26-stagioni{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  body.n26 .n26-mr{padding:56px 20px}
  body.n26 .n26-mr-titolo{font-size:28px;max-width:none}
  body.n26 .n26-stagioni,body.n26 .n26-percorso,body.n26 .n26-squadre{grid-template-columns:1fr;gap:16px}
  body.n26 .n26-percorso{gap:22px}
  body.n26 .n26-mr-frase{font-size:25px}
}

/* ═══ Riquadro della quota — due formule, due prezzi ═══════════════════════
   Prima riusavo le classi del prototipo: y135 è un numero gigante pensato per
   un prezzo solo (con due si spezzava su tre righe) e y67 è una classe da
   titolo, che rendeva enormi le righe del pagamento. Qui elementi propri. */
body.n26 .n26-quota-eti{display:block;font-family:Manrope,sans-serif;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:#6B7280}
body.n26 .n26-quota-formule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin:18px 0 0;max-width:460px}
body.n26 .n26-quota-f{position:relative;background:#fff;border:1px solid #E5E7EB;
  border-radius:12px;padding:22px 20px;display:flex;flex-direction:column}
body.n26 .n26-quota-f-top{border:2px solid #FF7A00}
body.n26 .n26-quota-nastro{position:absolute;top:-10px;left:16px;background:#FF7A00;color:#062B63;
  font-family:Poppins,sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 10px;border-radius:999px;white-space:nowrap}
body.n26 .n26-quota-ic{font-size:22px;line-height:1}
body.n26 .n26-quota-nome{font-family:Poppins,sans-serif;font-weight:700;font-size:19px;
  color:#062B63;margin-top:8px}
body.n26 .n26-quota-dur{font-family:Manrope,sans-serif;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#0077C8;margin-top:2px}
body.n26 .n26-quota-cifra{font-family:Poppins,sans-serif;font-weight:700;font-size:34px;
  line-height:1.05;color:#062B63;margin-top:12px;white-space:nowrap}
body.n26 .n26-quota-rate-eti{font-family:Manrope,sans-serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:#FF7A00;margin:30px 0 0}
body.n26 .n26-quota-rate{list-style:none;padding:0;margin:10px 0 0;max-width:460px}
body.n26 .n26-quota-rate li{font-family:Manrope,sans-serif;font-size:15.5px;line-height:1.5;
  color:#374151;padding:10px 0;border-top:1px solid #E5E7EB}
body.n26 .n26-quota-rate li:first-child{border-top:0;padding-top:4px}
body.n26 .n26-quota-rate b{font-family:Poppins,sans-serif;font-weight:700;color:#062B63}
body.n26 .n26-quota-nota{font-family:Manrope,sans-serif;font-size:13.5px;line-height:1.6;
  color:#6B7280;margin:14px 0 0;max-width:52ch}
@media (max-width:600px){
  body.n26 .n26-quota-formule{grid-template-columns:1fr;gap:12px;max-width:none}
  body.n26 .n26-quota-cifra{font-size:30px}
}

/* ═══ Landing Matteo Ricci — stessa lingua visiva del sito ═════════════════
   Poppins per i titoli, Manrope per il testo, navy #062B63, arancio #FF7A00,
   fondi chiari #F5F8FC, bordi #E5E7EB, pillole a raggio pieno. Cambia solo la
   misura: qui si legge dal telefono, quindi una colonna e testo più grande. */
body.n26-landing{background:#fff}
body.n26 .n26-lp{max-width:680px;margin:0 auto}

/* copertina: niente barra bianca sopra, la pagina comincia dalla foto. La
   foto pero' non fa da fondo alle parole — ha una fascia sua e il testo scende
   sotto, su blu pieno: e' una foto notturna con otto persone proprio dove
   cadrebbero le parole, e sopra non si leggeva niente */
body.n26 .n26-lp-hero{position:relative;background:#062B63}
/* flex non per l'allineamento ma per fermare il margine del marchio: senza,
   i suoi 18px scavalcavano tutti i contenitori e lasciavano una riga bianca
   in cima alla pagina */
body.n26 .n26-lp-hero-foto{position:relative;height:clamp(300px,46svh,430px);
  background-size:cover;background-position:center 62%;background-repeat:no-repeat;
  display:flex;align-items:flex-start}
/* il velo scurisce solo in cima, per il marchio, e in fondo, per saldarsi al
   blu della sezione: in mezzo la foto resta la foto */
body.n26 .n26-lp-hero-velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,43,99,.62) 0%,rgba(6,43,99,.16) 30%,
    rgba(6,43,99,.10) 58%,rgba(6,43,99,.62) 88%,#062B63 100%)}
body.n26 .n26-lp-hero-testo{position:relative;padding:4px 22px 40px;width:100%;background:#062B63}
/* il marchio: versione per fondi scuri. Il margine negativo compensa il bordo
   trasparente del file, se no il logo sembra rientrato rispetto al titolo */
body.n26 .n26-lp-logo{position:relative;width:150px;height:auto;display:block;margin:18px 0 0 9px;
  filter:drop-shadow(0 4px 20px rgba(3,17,42,.75))}
body.n26 .n26-lp-pillola{display:inline-block;background:#FF7A00;color:#062B63;
  font-family:Poppins,sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 14px;border-radius:6px}
body.n26 .n26-lp-hero-testo h1{font-family:Poppins,sans-serif;font-weight:700;font-size:40px;
  line-height:1.04;letter-spacing:-.025em;color:#fff;margin:14px 0 0}
body.n26 .n26-lp-hero-testo>p{font-family:Manrope,sans-serif;font-size:16.5px;line-height:1.55;
  color:rgba(255,255,255,.9);margin:14px 0 0}
body.n26 .n26-lp-chip{display:flex;flex-direction:column;gap:8px;margin:22px 0 0}
body.n26 .n26-lp-chip span{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.26);
  border-radius:999px;padding:12px 18px;font-family:Manrope,sans-serif;font-size:15px;color:#fff}
body.n26 .n26-lp-chip b{font-family:Poppins,sans-serif;font-size:17px}
body.n26 .n26-lp-chip-top{border-color:#FF7A00 !important;background:rgba(255,122,0,.20) !important}

/* sezioni */
body.n26 .n26-lp-sez{padding:76px 22px;border-top:1px solid #E5E7EB}
body.n26 .n26-lp-chiaro{background:#F5F8FC}
body.n26 .n26-lp-occhiello{display:block;font-family:Manrope,sans-serif;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#FF7A00}
body.n26 .n26-lp-sez h2{font-family:Poppins,sans-serif;font-weight:700;font-size:30px;line-height:1.12;
  letter-spacing:-.02em;color:#062B63;margin:14px 0 40px}
body.n26 .n26-lp-p{font-family:Manrope,sans-serif;font-size:16.5px;line-height:1.65;color:#374151;margin:16px 0 0}
body.n26 .n26-lp-h3{font-family:Poppins,sans-serif;font-weight:700;font-size:21px;color:#062B63;margin:38px 0 0}
body.n26 .n26-lp-nota{font-family:Manrope,sans-serif;font-size:13.5px;line-height:1.6;color:#6B7280;margin:16px 0 0}
body.n26 .n26-lp-link{font-family:Poppins,sans-serif;font-weight:600;font-size:15px;color:#0077C8;text-decoration:none}

/* card generiche */
body.n26 .n26-lp-griglia{list-style:none;padding:0;margin:50px 0 0;display:flex;flex-direction:column;gap:12px}
body.n26 .n26-lp-card{background:#fff;border:1px solid #E5E7EB;
  border-radius:12px;padding:22px 20px}
body.n26 .n26-lp-chiaro .n26-lp-card{background:#fff}
body.n26 .n26-lp-ic{font-size:23px;line-height:1}
body.n26 .n26-lp-card h3{font-family:Poppins,sans-serif;font-weight:700;font-size:19px;color:#062B63;margin:10px 0 0}
body.n26 .n26-lp-card p{font-family:Manrope,sans-serif;font-size:15.5px;line-height:1.6;color:#374151;margin:8px 0 0}
body.n26 .n26-lp-dur{font-family:Manrope,sans-serif;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#0077C8 !important;margin:4px 0 0 !important}
body.n26 .n26-lp-scad em{font-style:normal;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#6B7280}
body.n26 .n26-lp-scad b{font-family:Poppins,sans-serif;font-size:18px;color:#062B63}
body.n26 .n26-lp-feste{font-size:14px !important;color:#6B7280 !important;padding-top:12px;border-top:1px solid #E5E7EB;margin-top:14px !important}

/* le due formule */
body.n26 .n26-lp-formule{display:flex;flex-direction:column;gap:18px;margin:52px 0 0}
body.n26 .n26-lp-formula{position:relative;background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:26px 22px}
body.n26 .n26-lp-formula-top{border:2px solid #FF7A00}
body.n26 .n26-lp-nastro{position:absolute;top:-11px;left:20px;background:#FF7A00;color:#062B63;
  font-family:Poppins,sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 12px;border-radius:999px}
body.n26 .n26-lp-formula h3{font-family:Poppins,sans-serif;font-weight:700;font-size:25px;color:#062B63;margin:8px 0 0}
body.n26 .n26-lp-prezzo{font-family:Poppins,sans-serif;font-weight:700;font-size:40px;line-height:1;
  color:#062B63;margin:12px 0 0}
body.n26 .n26-lp-terr{font-family:Manrope,sans-serif;font-weight:700;font-size:16px;color:#062B63;margin:12px 0 0}
body.n26 .n26-lp-testo{font-family:Manrope,sans-serif;font-size:15.5px;line-height:1.6;color:#374151;margin:8px 0 0}
body.n26 .n26-lp-leva{font-family:Poppins,sans-serif;font-weight:700;font-size:20px;line-height:1.25;
  color:#FF7A00;margin:18px 0 0}
body.n26 .n26-lp-extra{font-family:Manrope,sans-serif;font-size:14.5px;line-height:1.7;color:#062B63;margin:10px 0 0}

/* cosa è incluso */
body.n26 .n26-lp-incluso{margin:16px 0 0}
body.n26 .n26-lp-incluso>div{margin:16px 0 0}
body.n26 .n26-lp-inc-t{font-family:Manrope,sans-serif;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#FF7A00;margin:0}
body.n26 .n26-lp-incluso ul{list-style:none;padding:0;margin:8px 0 0}
body.n26 .n26-lp-incluso li{font-family:Manrope,sans-serif;font-size:15.5px;color:#374151;
  padding:5px 0 5px 24px;position:relative}
body.n26 .n26-lp-incluso li::before{content:"\2713";position:absolute;left:0;color:#2E7D4F;font-weight:700}

/* pagamento */
body.n26 .n26-lp-rate{list-style:none;padding:0;margin:14px 0 0}
body.n26 .n26-lp-rate li{font-family:Manrope,sans-serif;font-size:15.5px;line-height:1.5;color:#374151;
  padding:11px 0;border-top:1px solid #E5E7EB}
body.n26 .n26-lp-rate li:first-child{border-top:0}
body.n26 .n26-lp-rate b{font-family:Poppins,sans-serif;color:#062B63}

/* i passi */
body.n26 .n26-lp-passi{list-style:none;padding:0;margin:52px 0 0}
body.n26 .n26-lp-passi li{display:flex;gap:16px;padding:16px 0;border-top:1px solid #E5E7EB}
body.n26 .n26-lp-passi li:first-child{border-top:0}
body.n26 .n26-lp-num{font-family:Poppins,sans-serif;font-weight:700;font-size:14px;color:#FF7A00;
  min-width:24px;padding-top:3px}
body.n26 .n26-lp-passi h3{font-family:Poppins,sans-serif;font-weight:600;font-size:18px;color:#062B63;margin:0}
body.n26 .n26-lp-passi p{font-family:Manrope,sans-serif;font-size:15.5px;line-height:1.6;color:#374151;margin:6px 0 0}
body.n26 .n26-lp-focus{background:#062B63;border-radius:14px;padding:26px 22px;margin:26px 0 0}
body.n26 .n26-lp-focus h3{font-family:Poppins,sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:#fff;margin:0}
body.n26 .n26-lp-focus p{font-family:Manrope,sans-serif;font-size:15.5px;line-height:1.6;
  color:rgba(255,255,255,.86);margin:12px 0 0}

/* due team + città */
body.n26 .n26-lp-team{display:flex;flex-direction:column;gap:14px;margin:52px 0 0}
/* Le città: fasce basse a tutta larghezza, la foto sotto e il nome sopra.
   Il margine negativo le porta oltre il rientro della sezione; il velo scuro
   non è decorativo, è quello che rende leggibile il nome su qualunque foto. */
body.n26 .n26-lp-fasce{list-style:none;margin:46px -22px 0;padding:0;display:flex;
  flex-direction:column;gap:2px}
body.n26 .n26-lp-fasce li{position:relative;height:172px;display:flex;align-items:center;
  background-size:cover;background-position:center 58%;background-repeat:no-repeat}
body.n26 .n26-lp-fasce li::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,43,99,.88) 0%,rgba(6,43,99,.66) 46%,rgba(6,43,99,.34) 100%)}
body.n26 .n26-lp-fasce span{position:relative;padding:0 22px;font-family:Poppins,sans-serif;
  font-weight:700;font-size:23px;letter-spacing:-.015em;color:#fff}
/* L'ultima fascia non è un posto, è un invito: mezza altezza, velo più scuro,
   e tutta la striscia cliccabile. I selettori sono annidati dentro «li» perché
   se no la regola generale delle fasce, che pesa di più, se li mangia. */
body.n26 .n26-lp-fasce li.n26-lp-fascia-tutte{height:86px}
body.n26 .n26-lp-fasce li.n26-lp-fascia-tutte::before{
  background:linear-gradient(90deg,rgba(6,43,99,.92) 0%,rgba(6,43,99,.80) 46%,rgba(6,43,99,.56) 100%)}
body.n26 .n26-lp-fasce li.n26-lp-fascia-tutte a{position:relative;display:flex;
  align-items:center;width:100%;height:100%;text-decoration:none}
body.n26 .n26-lp-fasce li.n26-lp-fascia-tutte span{font-size:19px}
  color:#062B63;margin:14px 0 0}

/* le storie */
body.n26 .n26-lp-storie{list-style:none;padding:0;margin:60px 0 0;display:flex;flex-direction:column;gap:14px}
body.n26 .n26-lp-storie a{display:block;background:#fff;border:1px solid #E5E7EB;border-radius:12px;
  overflow:hidden;text-decoration:none}
body.n26 .n26-lp-storie img{width:100%;height:190px;object-fit:cover;display:block}
body.n26 .n26-lp-storie div{padding:18px 20px}
body.n26 .n26-lp-storia-chi{font-family:Manrope,sans-serif;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#FF7A00}
body.n26 .n26-lp-storie p{font-family:Manrope,sans-serif;font-size:15.5px;line-height:1.6;color:#062B63;margin:8px 0 0}

/* il nome */
body.n26 .n26-lp-nome{background:#F5F8FC}
body.n26 .n26-lp-frase{font-family:Poppins,sans-serif;font-weight:700;font-size:26px;line-height:1.2;
  letter-spacing:-.015em;color:#062B63;margin:22px 0 0;padding-left:18px;border-left:3px solid #FF7A00}

/* requisiti e domande */
body.n26 .n26-lp-req{list-style:none;padding:0;margin:50px 0 0}
body.n26 .n26-lp-req li{font-family:Manrope,sans-serif;font-weight:700;font-size:16px;color:#062B63;
  padding:11px 0 11px 26px;border-top:1px solid #E5E7EB;position:relative}
body.n26 .n26-lp-req li:first-child{border-top:0}
body.n26 .n26-lp-req li::before{content:"\2726";position:absolute;left:0;color:#FF7A00;font-weight:400}
body.n26 .n26-lp-faq{margin:28px 0 0}
body.n26 .n26-lp-faq details{border-top:1px solid #E5E7EB}
body.n26 .n26-lp-faq summary{font-family:Poppins,sans-serif;font-weight:600;font-size:16.5px;color:#062B63;
  padding:15px 26px 15px 0;cursor:pointer;list-style:none;position:relative}
body.n26 .n26-lp-faq summary::-webkit-details-marker{display:none}
body.n26 .n26-lp-faq summary::after{content:"+";position:absolute;right:2px;top:13px;color:#FF7A00;font-size:21px}
body.n26 .n26-lp-faq details[open] summary::after{content:"\2013"}
body.n26 .n26-lp-faq p{font-family:Manrope,sans-serif;font-size:15.5px;line-height:1.65;color:#374151;
  margin:0 0 16px;padding-right:20px}

/* chiusura */
body.n26 .n26-lp-finale{background:#062B63;border-top:0}
body.n26 .n26-lp-finale h2{color:#fff}
body.n26 .n26-lp-finale .n26-lp-p{color:rgba(255,255,255,.86)}
body.n26 .n26-lp-finale .n26-lp-frase{color:#FF7A00;border-left-color:#FF7A00}

/* I numeri, subito sotto la copertina: si leggono senza leggere. I bordi
   sono le fessure della griglia, cosi' il blocco sembra una scheda tecnica e
   non sei riquadri sparsi. */
body.n26 .n26-lp-fatti{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E5E7EB}
body.n26 .n26-lp-fatti>div{background:#fff;padding:20px 16px}
body.n26 .n26-lp-fatti b{display:block;font-family:Poppins,sans-serif;font-weight:700;
  font-size:19px;line-height:1.15;letter-spacing:-.015em;color:#062B63}
body.n26 .n26-lp-fatti span{display:block;font-family:Manrope,sans-serif;font-size:12.5px;
  line-height:1.4;color:#6B7280;margin-top:5px}

/* Il ritratto del 1610: piccolo, con la sua cornice sottile e la didascalia,
   perché si veda che è un quadro e non una nostra illustrazione */
body.n26 .n26-ritratto{margin:0;flex:0 0 auto}
body.n26 .n26-ritratto img{width:116px;height:auto;display:block;border-radius:10px;
  border:1px solid #E5E7EB}
body.n26 .n26-ritratto figcaption b{font-weight:600}
body.n26 .n26-ritratto figcaption{font-family:Manrope,sans-serif;font-size:11px;
  line-height:1.35;color:#6B7280;margin:8px 0 0;max-width:116px}
/* il ritratto e il primo paragrafo stanno affiancati, come in una pagina di
   rivista: il testo spiega, il quadro dice chi era */
body.n26 .n26-lp-ricci{display:flex;gap:20px;align-items:flex-start;margin:40px 0 0}
body.n26 .n26-lp-ricci .n26-lp-p{margin:0}
/* sul sito la colonna è più larga: il ritratto sta a fianco e il testo gli
   scorre accanto, senza andargli sotto */
body.n26 .n26-mr-ricci{display:flex;gap:40px;align-items:flex-start;margin:22px 0 0}
body.n26 .n26-mr-ricci-testo{order:1;flex:1 1 auto;min-width:0}
body.n26 .n26-mr-ricci-testo > *:first-child{margin-top:0}
body.n26 .n26-mr-ricci .n26-ritratto{order:2;flex:0 0 300px;max-width:300px}
body.n26 .n26-mr-ricci .n26-ritratto img{width:100%}
body.n26 .n26-mr-ricci .n26-ritratto figcaption{max-width:100%}
@media (max-width:1000px){
  body.n26 .n26-mr-ricci{gap:30px}
  body.n26 .n26-mr-ricci .n26-ritratto{flex-basis:210px;max-width:210px}
}
@media (max-width:640px){
  /* Da telefono una colonna sola. Col ritratto a fianco il testo restava in una
     striscia di 200px per tutta la sezione (Claudio, 28/9). Ora: titolo, poi il
     ritratto con accanto la sua etichetta, come in un museo, poi il
     testo a tutta larghezza. display:contents lascia al titolo e ai paragrafi
     il loro ordine senza cambiare l'HTML, che sul sito largo resta com'era. */
  body.n26 .n26-mr-ricci{flex-direction:column;align-items:stretch;gap:0}
  body.n26 .n26-mr-ricci-testo{display:contents}
  body.n26 .n26-mr-ricci-testo > .n26-mr-occhiello{order:1}
  body.n26 .n26-mr-ricci-testo > .n26-mr-titolo{order:2}
  body.n26 .n26-mr-ricci .n26-ritratto{order:3;flex:none;max-width:none;display:flex;align-items:center;
    gap:18px;margin:26px 0 8px}
  body.n26 .n26-mr-ricci .n26-ritratto img{width:116px;flex:0 0 116px}
  body.n26 .n26-mr-ricci .n26-ritratto figcaption{margin:0;font-size:13px;line-height:1.5;max-width:none}
  body.n26 .n26-mr-ricci .n26-ritratto figcaption b{display:block;font-family:Poppins,sans-serif;
    font-size:16px;font-weight:700;color:#062B63;margin-bottom:2px}
  body.n26 .n26-mr-ricci-testo > p{order:4}
  body.n26 .n26-mr-ricci .n26-mr-frase{font-size:24px;max-width:none}
}

/* la prova: quello che le persone scrivono davvero. Il riquadro e la didascalia
   servono a dire «questa e' una schermata», non una grafica fatta da noi */
body.n26 .n26-lp-prove{display:flex;flex-direction:column;gap:28px;margin:52px 0 0}
body.n26 .n26-lp-prove figure{margin:0}
body.n26 .n26-lp-prove img{width:100%;height:auto;display:block;border:1px solid #E5E7EB;
  border-radius:12px;background:#fff}
body.n26 .n26-lp-prove figcaption{font-family:Manrope,sans-serif;font-size:13px;color:#6B7280;
  margin:9px 0 0}
body.n26 .n26-lp-prova-stretta{text-align:center}
body.n26 .n26-lp-prova-stretta img{max-width:320px;margin-inline:auto}

/* il reel: verticale, quindi si tiene stretto — a piena colonna diventerebbe
   una torre alta più dello schermo */
body.n26 .n26-giornata-video{display:block;width:100%;max-width:320px;height:auto;
  margin:26px auto 0;border-radius:14px;background:#062B63}

/* una foto in fondo a un blocco del sito: si tiene stretta, il testo attorno
   e' una colonna e una foto a piena larghezza la spezzerebbe */
body.n26 .n26-mr-scatto{margin:30px 0 0}
body.n26 .n26-mr-scatto img{width:100%;max-width:420px;height:auto;display:block;
  border-radius:14px}
body.n26 .n26-mr-scatto figcaption{font-family:Manrope,sans-serif;font-size:13px;
  color:#6B7280;margin:10px 0 0}

/* uno scatto dentro un riquadro di approfondimento */
body.n26 .n26-lp-scatto{width:100%;height:auto;display:block;border-radius:12px;margin:16px 0 0}

/* quattro foto vere invece di quattro paragrafi */
body.n26 .n26-lp-foto{list-style:none;padding:0;margin:46px 0 0;display:grid;
  grid-template-columns:1fr 1fr;gap:8px}
body.n26 .n26-lp-foto img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border-radius:12px}

/* «Guarda le interviste»: si riconosce dal quadrato rosso, ma il resto resta
   la scheda del sito — bordo sottile, testo blu, niente pulsantone rosso. */
/* «width:fit-content» perché un flex largo quanto la colonna non si centra
   con margin:auto — si allargherebbe e basta */
body.n26 .n26-yt{display:flex;width:fit-content;align-items:center;gap:12px;margin:44px auto 0;
  padding:13px 22px 13px 16px;background:#fff;border:1px solid #E5E7EB;border-radius:999px;
  text-decoration:none;font-family:Poppins,sans-serif;font-weight:600;font-size:14.5px;
  color:#062B63;box-shadow:0 1px 2px rgba(6,43,99,.05)}
body.n26 .n26-yt:hover{border-color:#062B63}
body.n26 .n26-yt-play{position:relative;flex:0 0 auto;width:30px;height:21px;
  background:#FF0033;border-radius:6px}
body.n26 .n26-yt-play::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-40%,-50%);border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent #fff}
body.n26 .n26-lp-chiaro .n26-yt{background:#fff}

/* La firma del programma. Ricalca la costruzione del logo — un segno arancione
   e sotto chi c'e' dietro — perche' il Matteo Ricci Exchange non e' un altro
   marchio: e' il programma Cina di Nice Exchange 耐思优. */
body.n26 .n26-firma{display:flex;flex-direction:column;gap:4px;margin:0 0 20px;line-height:1.25}
body.n26 .n26-firma::before{content:"";display:block;width:26px;height:2px;background:#FF7A00;
  border-radius:2px;margin-bottom:9px}
body.n26 .n26-firma-nome{font-family:Poppins,sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:#062B63}
body.n26 .n26-firma-by{font-family:Manrope,sans-serif;font-size:12.5px;color:#6B7280}
body.n26 .n26-firma-by b{font-weight:600;color:#062B63}
body.n26 .n26-firma-scura .n26-firma-nome{color:#fff}
body.n26 .n26-firma-scura .n26-firma-by{color:rgba(255,255,255,.7)}
body.n26 .n26-firma-scura .n26-firma-by b{color:#fff}
body.n26 .n26-firma-centro{align-items:center;text-align:center;margin:34px 0 0}
body.n26 .n26-footer .n26-firma{margin:18px 0 0}

/* l'amo: la riga che deve fermare chi arriva da un'inserzione */
body.n26 .n26-lp-strillo{font-family:Poppins,sans-serif;font-weight:600;font-size:19px;
  line-height:1.34;color:#fff;margin:18px 0 0;padding:2px 0 2px 14px;border-left:3px solid #FF7A00}
body.n26 .n26-lp-strillo b{color:#FFA24D}
/* la firma della copertina: qui basta dire di chi e' il programma */
body.n26 .n26-lp-firma{font-family:Manrope,sans-serif;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.58);margin:20px 0 0}

/* la riga forte su fondo chiaro */
body.n26 .n26-lp-frase-chiara{font-family:Poppins,sans-serif;font-weight:600;font-size:20px;
  line-height:1.4;color:#062B63;margin:18px 0 0;padding-left:14px;border-left:3px solid #FF7A00}

/* il pagamento, una colonna per formula come lo scrive il brief */
body.n26 .n26-lp-pagam{display:flex;flex-direction:column;gap:14px;margin:16px 0 0}
body.n26 .n26-lp-pagam>div{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:18px 20px}
body.n26 .n26-lp-pagam-t{font-family:Poppins,sans-serif;font-weight:700;font-size:15.5px;
  color:#062B63;margin:0 0 10px}
body.n26 .n26-lp-pagam .n26-lp-rate{margin:0}

/* elenco dentro un riquadro di approfondimento */
body.n26 .n26-lp-elenco{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:7px}
body.n26 .n26-lp-elenco li{position:relative;padding-left:20px;font-family:Manrope,sans-serif;
  font-size:15px;line-height:1.5;color:#374151}
body.n26 .n26-lp-elenco li::before{content:"\2726";position:absolute;left:0;color:#FF7A00;font-size:11px;top:3px}
/* dentro il riquadro blu il grigio sparisce */
body.n26 .n26-lp-focus .n26-lp-elenco li{color:rgba(255,255,255,.9)}

/* il pulsante, sempre uguale */
body.n26 .n26-lp-cta{display:flex;align-items:center;justify-content:center;gap:9px;margin:26px 0 0;
  min-height:56px;padding:16px 24px;border-radius:999px;background:#FF7A00;color:#062B63;
  text-decoration:none;font-family:Poppins,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.04em;text-transform:uppercase;text-align:center}
body.n26 .n26-lp-micro{font-family:Manrope,sans-serif;font-size:13.5px;line-height:1.55;
  color:rgba(255,255,255,.75);margin:14px 0 0}
body.n26 .n26-lp-micro-scuro{font-family:Manrope,sans-serif;font-size:13.5px;line-height:1.55;
  color:#6B7280;margin:14px 0 0}
body.n26 .n26-lp-finale .n26-lp-micro-scuro{color:rgba(255,255,255,.7)}

/* barra fissa: il pulsante non deve mai essere lontano */
body.n26 .n26-lp-barra{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px
  calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-top:1px solid #E5E7EB}
body.n26 .n26-lp-barra .n26-lp-cta{margin:0;min-height:52px;max-width:680px;margin-inline:auto}
/* finche' si vede il pulsante della copertina la barra sta giu': due bottoni
   arancioni uno sull'altro sembrano un errore. Se il JavaScript non gira la
   classe non arriva e la barra resta dov'e', cioe' visibile */
body.n26 .n26-lp-barra{transition:transform .28s ease,opacity .28s ease}
body.n26 .n26-lp-barra-giu{transform:translateY(115%);opacity:0;pointer-events:none}

@media (min-width:700px){
  body.n26 .n26-lp{box-shadow:0 0 70px rgba(6,43,99,.10)}
  body.n26 .n26-lp-hero-testo h1{font-size:46px}
}

/* ---- Richieste di Sara del 28/9/2026 ----------------------------------- */
/* Il dipinto sotto "Perche' Matteo Ricci?" (home) e quello degli studiosi:
   largo quanto la colonna, angoli appena arrotondati, didascalia discreta. */
body.n26 .n26-mr-dipinto{margin:52px 0 0}
body.n26 .n26-mr-dipinto img{width:100%;height:auto;display:block;border-radius:10px}
body.n26 .n26-mr-dipinto figcaption{font-family:Manrope,sans-serif;font-size:15px;font-style:italic;
  line-height:1.6;color:#6B7280;margin:14px 0 0;max-width:72ch}
/* "Un ponte tra due mondi": sezione editoriale su fondo crema. */
body.n26 .n26-mr-ponte{background:#F8F3EA;border-bottom:1px solid #EDE3D2}
body.n26 .n26-mr-ponte .n26-mr-sotto{font-family:Poppins,sans-serif;font-weight:600;font-size:22px;
  line-height:1.4;color:#062B63;margin:18px 0 0;max-width:40ch}
body.n26 .n26-mr-ponte .n26-mr-dipinto{margin:40px 0 0}
body.n26 .n26-mr-ponte .n26-mr-riga{margin-top:30px}
/* Le stagioni con la foto di una citta' tipica: la foto occupa la testa
   della scheda, a filo dei bordi. Senza il nome della citta' (Sara, 29/9). */
body.n26 .n26-stagione{overflow:hidden}
body.n26 .n26-stagione-foto{position:relative;margin:-26px -24px 20px;aspect-ratio:3/2;background:#E5E7EB}
body.n26 .n26-lp-card{overflow:hidden}
body.n26 .n26-lp-citta{position:relative;margin:-22px -20px 18px;aspect-ratio:3/2;background:#E5E7EB}
body.n26 .n26-stagione-foto img,
body.n26 .n26-lp-citta img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px){
  body.n26 .n26-mr-dipinto{margin-top:36px}
  body.n26 .n26-mr-dipinto figcaption{font-size:14px}
  body.n26 .n26-mr-ponte .n26-mr-sotto{font-size:19px}
}

/* ---- Modulo: «Hai tra i 22 e i 30 anni?» (Sara, 16/9/2026) ------------- */
/* Due scelte grandi, stesso bordo e stesso blu dei campi: si tocca bene col
   pollice e si vede subito quale e' scelta. */
body.n26 .n26-eta{display:flex;flex-direction:column;gap:12px}
body.n26 .n26-eta-scelte{display:flex;gap:12px;flex-wrap:wrap}
body.n26 .n26-eta-scelta{position:relative;display:block;cursor:pointer}
body.n26 .n26-eta-scelta input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
body.n26 .n26-eta-scelta span{display:flex;align-items:center;justify-content:center;min-width:120px;
  padding:14px 26px;border:1px solid #E3E8EF;border-radius:10px;background:#fff;
  font-family:Poppins,sans-serif;font-size:15.5px;color:#062B63;
  transition:border-color .18s,box-shadow .18s,background-color .18s}
body.n26 .n26-eta-scelta:hover span{border-color:#B8C4D3}
body.n26 .n26-eta-scelta input:checked + span{border-color:#0077C8;background:#EEF6FC;
  box-shadow:0 0 0 3px rgba(0,119,200,.12);font-weight:600}
body.n26 .n26-eta-scelta input:focus-visible + span{outline:2px solid #0077C8;outline-offset:2px}
body.n26 .n26-eta-avviso{display:none;margin:0;font-family:Manrope,sans-serif;font-size:13.5px;color:#C2410C}
body.n26 .n26-eta-manca .n26-eta-scelta span{border-color:#FF7A00}
body.n26 .n26-eta-manca .n26-eta-avviso{display:block}
@media (max-width:640px){
  body.n26 .n26-eta-scelta{flex:1 1 0}
  body.n26 .n26-eta-scelta span{min-width:0}
}

/* ---- Proroga straordinaria della stagione inverno (Sara, 7/10/2026) ---- */
/* Fascia rossa sopra la foto e bordo rosso: deve saltare all'occhio che e'
   un'occasione fuori dal normale. Sta sopra la foto, non prima, cosi' le
   quattro schede restano allineate. La data vecchia resta, barrata. */
body.n26 .n26-stagione-proroga,
body.n26 .n26-lp-card-proroga{position:relative;border-color:#D92D20;box-shadow:0 0 0 1px #D92D20}
body.n26 .n26-stagione-proroga p.n26-proroga,
body.n26 .n26-lp-card-proroga p.n26-proroga{position:absolute;top:0;left:0;right:0;z-index:1;margin:0;
  background:#D92D20;color:#fff;font-family:Poppins,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.3;text-align:center;padding:9px 12px}
body.n26 .n26-stagione-proroga s,
body.n26 .n26-lp-card-proroga s{color:#9CA3AF;font-weight:500;font-size:.8em;text-decoration-thickness:2px}
body.n26 .n26-proroga-data{color:#D92D20}