/* quattro pagine, quattro impaginazioni:
   piano   - tabellone dei dodici mesi + due pannelli contrapposti
   conto   - fascia scura, bilancia a due colonne, numero di pareggio
   corso   - serate su una colonna numerata, foto in coda
   metodo  - tappe alternate testo/foto + riepilogo prezzi */

.occhio{
  margin:0 0 10px;
  font-size:12px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--colors-purple-8);
}
.occhio--chiaro{color:#b4c7f8}

/*==== 1. IL PIANO ====*/
.intro-piano{padding:32px 0 40px}
.intro-piano h1{font-size:34px;line-height:40px;letter-spacing:-1.2px}
.intro-piano__lead{max-width:620px;margin:18px 0 0;font-size:18px;line-height:28px;color:var(--colors-gray-9a)}

.tabellone{border-radius:24px;background-color:var(--colors-base-white);padding:8px 20px;overflow:hidden}
.tabellone__testa,
.tabellone__riga{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--colors-gray-1);font-size:15px}
.tabellone__testa{
  border-bottom:1px solid var(--colors-gray-2);
  font-size:12px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--colors-gray-9a);
}
.tabellone__riga:last-child{border-bottom:0}
.tabellone__riga span:first-child{font-weight:600}
.tabellone__riga span:nth-child(2),
.tabellone__riga span:nth-child(3){color:var(--colors-gray-9a);text-align:right}
.tabellone__riga b{text-align:right;font-weight:800;letter-spacing:-.3px}
.tabellone__riga--rosso b{color:#c0392b}
.tabellone__riga--fondo{background-color:#fce5e4;border-radius:10px;padding-left:10px;padding-right:10px;margin:0 -10px}
.tabellone__nota{max-width:720px;margin:18px auto 0;font-size:14px;line-height:22px;text-align:center;color:var(--colors-gray-9a)}

.due-colonne{display:grid;grid-template-columns:1fr;gap:var(--gap-gap10);margin-top:56px}
.pannello{padding:32px 28px;border-radius:24px;background-color:var(--colors-base-white)}
.pannello h2{font-size:24px;font-weight:600;letter-spacing:-.3px;margin-bottom:16px}
.spunte li{position:relative;padding:10px 0 10px 26px;font-size:15px;line-height:23px;border-bottom:1px solid var(--colors-gray-1)}
.spunte li:last-child{border-bottom:0}
.spunte li::before{content:"";position:absolute;left:0;top:19px;width:12px;height:2px;border-radius:2px;background:var(--colors-purple-8)}
.pannello__nota{margin:16px 0 0;font-size:14px;line-height:21px;color:var(--colors-gray-9a)}
.pannello--scuro{background-color:var(--colors-gray-13);color:#fff}
.pannello--scuro h2{color:#fff}
.spunte--chiare li{border-bottom-color:#2d2d3a}
.spunte--chiare li::before{background:var(--colors-blue-4)}
.pannello__nota--chiara{color:#ffffffa1}

.offerta-finale{padding:56px 0 100px}
.offerta-finale__scatola{
  max-width:820px;
  margin:0 auto;
  padding:36px 32px;
  border-radius:24px;
  background-image:linear-gradient(var(--colors-blue-6),var(--colors-blue-1));
  text-align:center;
}
.offerta-finale__cifra{display:block;font-size:52px;font-weight:800;letter-spacing:-2px;line-height:1}
.offerta-finale__voce{display:block;margin-top:8px;font-size:15px;font-weight:600;color:var(--colors-gray-9a)}
.offerta-finale__scatola p{max-width:520px;margin:20px auto 24px;font-size:16px;line-height:26px}
.offerta-finale__tasti{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/*==== 2. IL CONTO ====*/
.conto-testa{margin-bottom:40px;padding:48px 0;background-color:var(--colors-gray-13);color:#fff}
.conto-testa h1{font-size:34px;line-height:40px;letter-spacing:-1.2px;color:#fff}
.conto-testa p{max-width:620px;margin:16px 0 0;font-size:17px;line-height:27px;color:#ffffffa1}

.bilancia{display:grid;grid-template-columns:1fr;gap:var(--gap-gap10)}
.bilancia__lato{padding:28px 26px;border-radius:24px;background-color:var(--colors-base-white)}
.bilancia__lato--alt{background-color:var(--colors-purple-1)}
.bilancia__eti{display:block;margin-bottom:18px;font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--colors-gray-9a)}
.bilancia__voci > div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--colors-gray-1);font-size:15px}
.bilancia__voci b{white-space:nowrap;font-weight:600}
.bilancia__somma{border-bottom:0 !important;margin-top:6px;padding-top:16px !important;border-top:2px solid var(--colors-gray-13)}
.bilancia__somma b{font-size:20px;font-weight:800;letter-spacing:-.4px}

.pareggio{max-width:820px;margin:40px auto 0;padding:32px 28px;border-radius:24px;background-color:var(--colors-gray-13);color:#fff}
.pareggio h2{font-size:24px;font-weight:600;margin-bottom:14px;color:#fff}
.pareggio p{margin:0 0 14px;font-size:16px;line-height:27px;color:#ffffffa1}
.pareggio b{color:#9af4c3;font-weight:800}
.pareggio__domanda{padding-left:18px;border-left:3px solid var(--colors-purple-8);color:#fff !important}

.sfumature{margin-top:56px}
.sfumature h2{font-size:26px;font-weight:600;letter-spacing:-.3px;margin-bottom:20px;text-align:center}
.sfumature__griglia{display:grid;grid-template-columns:1fr;gap:var(--gap-gap10)}
.sfumature__griglia > div{padding:24px 22px;border-radius:20px;background-color:var(--colors-base-white)}
.sfumature__griglia b{display:block;margin-bottom:8px;font-size:17px;font-weight:600}
.sfumature__griglia span{display:block;font-size:15px;line-height:23px;color:var(--colors-gray-9a)}

.foto-larga{margin-top:56px}
.foto-larga img{width:100%;height:320px;object-fit:cover;border-radius:24px}

.chiusura-servizio{display:grid;grid-template-columns:1fr;gap:24px;margin:40px 0 100px;padding:32px 28px;border-radius:24px;background-color:var(--colors-base-white)}
.chiusura-servizio h2{font-size:24px;font-weight:600;margin-bottom:12px}
.chiusura-servizio p{margin:0;font-size:16px;line-height:26px;color:var(--colors-gray-9a)}
.chiusura-servizio__prezzo{padding-top:20px;border-top:1px solid var(--colors-gray-2)}
.chiusura-servizio__prezzo span{display:block;font-size:40px;font-weight:800;letter-spacing:-1.4px}
.chiusura-servizio__prezzo p{margin:4px 0 16px;font-size:14px}

/*==== 3. IL CORSO ====*/
.corso-testa{padding:32px 0 44px}
.corso-testa__griglia{display:grid;grid-template-columns:1fr;gap:28px}
.corso-testa h1{font-size:34px;line-height:40px;letter-spacing:-1.2px}
.corso-testa p{max-width:520px;margin:16px 0 0;font-size:17px;line-height:27px;color:var(--colors-gray-9a)}
.corso-fatti{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background-color:var(--colors-gray-2);border:1px solid var(--colors-gray-2);border-radius:20px;overflow:hidden}
.corso-fatti div{padding:16px 18px;background-color:var(--colors-base-white);font-size:15px}
.corso-fatti span{display:block;margin-bottom:4px;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--colors-gray-9a)}

.serate{border-top:2px solid var(--colors-gray-13)}
.serata{display:grid;grid-template-columns:1fr;gap:8px 28px;padding:26px 0;border-bottom:1px solid var(--colors-gray-2)}
.serata__n{font-size:13px;font-weight:800;letter-spacing:.8px;color:var(--colors-purple-8)}
.serata h2{font-size:22px;font-weight:600;letter-spacing:-.3px;margin-bottom:10px}
.serata p{margin:0;font-size:16px;line-height:27px;color:var(--colors-gray-9a)}
.serata__compito{margin-top:12px !important;padding:10px 14px;border-radius:12px;background-color:var(--colors-base-white);font-size:14px !important;color:var(--colors-gray-13) !important}

.corso-coda{display:grid;grid-template-columns:1fr;gap:28px;margin:56px 0 100px}
.corso-coda__foto img{width:100%;height:280px;object-fit:cover;border-radius:24px}
.corso-coda__testo h2{font-size:26px;font-weight:600;letter-spacing:-.3px;margin-bottom:14px}
.corso-coda__testo p{margin:0 0 14px;font-size:16px;line-height:26px;color:var(--colors-gray-9a)}
.corso-coda__prezzo{margin-top:22px;padding:24px;border-radius:20px;background-image:linear-gradient(var(--colors-purple-3),var(--colors-purple-1))}
.corso-coda__prezzo span{display:block;font-size:40px;font-weight:800;letter-spacing:-1.4px}
.corso-coda__prezzo p{margin:6px 0 16px;font-size:14px;color:var(--colors-gray-13) !important}

/*==== 4. IL METODO ====*/
.metodo-testa{padding:32px 0 40px}
.metodo-testa h1{font-size:34px;line-height:42px;letter-spacing:-1.2px}

.tappa{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--colors-gray-2)}
.tappa:last-of-type{border-bottom:0}
.tappa__testo{min-width:0}
.tappa__n{display:block;margin-bottom:10px;font-size:14px;font-weight:800;letter-spacing:1px;color:var(--colors-blue-4)}
.tappa h2{font-size:26px;font-weight:600;letter-spacing:-.4px;margin-bottom:14px}
.tappa p{margin:0;font-size:16px;line-height:27px;color:var(--colors-gray-9a)}
.tappa__foto{width:100%;height:260px;object-fit:cover;border-radius:24px}

.confini{display:grid;grid-template-columns:1fr;gap:var(--gap-gap10);margin-top:16px}
.confini__col{padding:28px 26px;border-radius:24px;background-color:var(--colors-base-white)}
.confini__col h2{font-size:22px;font-weight:600;margin-bottom:14px}
.confini__col li{position:relative;padding:10px 0 10px 24px;font-size:15px;line-height:23px;border-bottom:1px solid var(--colors-gray-1)}
.confini__col li:last-child{border-bottom:0}
.confini__col li::before{content:"";position:absolute;left:0;top:19px;width:12px;height:2px;border-radius:2px;background:#9af4c3}
.confini__col--no{background-color:var(--colors-gray-13);color:#fff}
.confini__col--no h2{color:#fff}
.confini__col--no li{color:#ffffffa1;border-bottom-color:#2d2d3a}
.confini__col--no li::before{background:#fce5e4}

.riepilogo{max-width:720px;margin:56px auto 100px;padding:32px 28px;border-radius:24px;background-color:var(--colors-base-white);text-align:center}
.riepilogo__riga{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--colors-gray-1);font-size:16px;text-align:left}
.riepilogo__riga b{white-space:nowrap;font-weight:800;letter-spacing:-.3px}
.riepilogo__nota{margin:18px 0 22px;font-size:14px;line-height:22px;color:var(--colors-gray-9a)}

@media(min-width:680px){
  .intro-piano h1,.conto-testa h1,.corso-testa h1,.metodo-testa h1{font-size:46px;line-height:52px;letter-spacing:-1.8px}
  .tabellone{padding:8px 32px}
  .due-colonne{grid-template-columns:1fr 1fr;gap:20px}
  .bilancia{grid-template-columns:1fr 1fr;gap:20px}
  .sfumature__griglia{grid-template-columns:repeat(3,1fr)}
  .chiusura-servizio{grid-template-columns:1.3fr 1fr;align-items:center}
  .chiusura-servizio__prezzo{padding-top:0;border-top:0;border-left:1px solid var(--colors-gray-2);padding-left:28px}
  .corso-fatti{grid-template-columns:repeat(4,1fr)}
  .serata{grid-template-columns:130px minmax(0,1fr)}
  .corso-coda{grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
  .corso-coda__foto img{height:420px}
  .tappa{grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
  .tappa:nth-child(even) .tappa__foto{order:-1}
  .tappa__foto{height:300px}
  .confini{grid-template-columns:1fr 1fr;gap:20px}
  .foto-larga img{height:420px}
}

@media(min-width:1024px){
  .corso-testa__griglia{grid-template-columns:1.2fr 1fr;gap:50px;align-items:end}
}

/* il rosso della riga di aprile e lo stesso del riferimento (#fce5e4), non quello di sistema */