/* quattro pagine, quattro impaginazioni diverse:
   val   - testo lungo con scheda laterale fissa
   patto - pagina interamente scura, due colonne contrapposte
   corso - linea verticale degli incontri
   conti - cifre grandi e tabella */

/*======== 1. VALUTAZIONE ========*/
.val-fronte { background: var(--carta); border-bottom: 1px solid var(--filo); }
.val-fronte__in {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 24px;
  max-width: var(--largo);
  margin: 0 auto;
  padding: 56px var(--lato) 50px;
}
.val-fronte h1{font-size:40px;line-height:1.08}
.val-fronte__lead { align-self: end; max-width: 460px; font-size: 16px; color: var(--grigio); }

.val-corpo {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 44px;
  max-width: var(--largo);
  margin: 0 auto;
  padding: 54px var(--lato) 88px;
}
.val-testo h2 { margin: 42px 0 14px; font-size: 27px; }
.val-testo h2:first-child{margin-top:0}
.val-testo p { font-size: 15.5px; line-height: 1.8; color: #3b3a39; }
.val-nota{padding-left:16px;border-left:2px solid var(--oliva);font-size:14px !important;color:var(--grigio) !important}

.val-tab { margin: 22px 0 18px; border-top: 2px solid var(--inchiostro); }
.val-tab__riga{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:15px 0;border-bottom:1px solid var(--filo);font-size:14.5px}
.val-tab__riga--cap { display: none; }
.val-tab__riga b{font-family:var(--serif);font-size:19px;font-weight:600}
.val-tab__riga span:last-child { color: var(--grigio); }

.val-scheda { align-self: start; padding: 28px 24px 30px; background: var(--carta); border-top: 3px solid var(--inchiostro); }
.val-scheda__h{margin-bottom:16px;font-size:10.5px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase}
.val-scheda dl { margin: 0 0 22px; }
.val-scheda dt{margin-top:14px;font-size:10.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--oliva)}
.val-scheda dd { margin: 4px 0 0; font-size: 14px; line-height: 1.65; color: var(--grigio); }

/*======== 2. PATTO (pagina scura) ========*/
.pag-patto { background: #0b0b0a; color: #e4e1dd; }
.pag-patto .testata{background:#0b0b0a}
.pag-patto .testata--staccata { background: rgba(11,11,10,.96); box-shadow: 0 1px 0 #262523; }
.pag-patto .marchio img{filter:brightness(0) invert(1)}
.pag-patto .menu a { color: #9d9a95; }
.pag-patto .menu a:hover,.pag-patto .menu a.attivo{color:#fff}
.pag-patto .menu--aperto { border-top-color: #262523; }
.pag-patto .apri-menu span{background:#e4e1dd}
.pag-patto .bottone--scuro { border-color: #6a6763; color: #e4e1dd; }
.pag-patto .bottone--scuro:hover{background:#e4e1dd;color:#0b0b0a}

.patto-testa__in { max-width: var(--largo); margin: 0 auto; padding: 66px var(--lato) 58px; }
.patto-testa h1{font-size:38px;line-height:1.14;color:#fff}
.patto-testa p { max-width: 620px; margin-top: 24px; font-size: 16px; line-height: 1.75; color: #b3afaa; }

.patto-chi { max-width: var(--largo); margin: 0 auto; padding: 0 var(--lato) 20px; }
.patto-chi h2{font-size:28px;color:#fff}
.patto-chi > p { max-width: 640px; margin-top: 14px; font-size: 15.5px; color: #b3afaa; }
.patto-lista{margin-top:28px;border-top:1px solid #242321}
.patto-lista li { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; padding: 18px 0; border-bottom: 1px solid #242321; }
.patto-lista b{font-family:var(--serif);font-size:20px;font-weight:600;color:#fff}
.patto-lista span { font-size: 14.5px; line-height: 1.7; color: #a7a39e; }

.patto-due { display: grid; grid-template-columns: minmax(0,1fr); gap: 1px; max-width: var(--largo); margin: 46px auto 0; padding: 0 var(--lato); }
.patto-col{padding:32px 28px;background:#121211}
.patto-col h2 { margin-bottom: 18px; font-size: 24px; color: #fff; }
.patto-col li{position:relative;padding:11px 0 11px 24px;font-size:14.5px;line-height:1.7;color:#b3afaa;border-bottom:1px solid #1e1d1c}
.patto-col li:last-child { border-bottom: 0; }
.patto-col li::before{content:"";position:absolute;left:0;top:21px;width:13px;height:1px}
.patto-col--si li::before { background: var(--oliva); }
.patto-col--no{background:#0e0e0d;border:1px solid #242321}
.patto-col--no li::before { background: #8a4436; }

.patto-fisco { margin-top: 54px; background: #15170f; }
.patto-fisco__in{max-width:820px;margin:0 auto;padding:56px var(--lato)}
.patto-fisco h2 { font-size: 30px; color: #fff; }
.patto-fisco p{margin-top:16px;font-size:15.5px;line-height:1.8;color:#bcbaae}
.patto-fisco__nota { padding-left: 18px; border-left: 2px solid var(--oliva); font-size: 14.5px !important; }

.patto-coda { max-width: 720px; margin: 0 auto; padding: 60px var(--lato) 84px; text-align: center; }
.patto-coda p{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.45;color:#fff}
.patto-coda .bottone { margin-top: 18px; border-color: #6a6763; color: #e4e1dd; }
.patto-coda .bottone:hover{background:#e4e1dd;color:#0b0b0a}

/*======== 3. PERCORSO ========*/
.corso-testa { background: var(--carta); border-bottom: 1px solid var(--filo); }
.corso-testa__in{max-width:var(--largo);margin:0 auto;padding:58px var(--lato) 46px}
.corso-testa h1 { font-size: 40px; }
.corso-testa > div > p{max-width:600px;margin-top:18px;font-size:16px;color:var(--grigio)}
.corso-dati { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; margin-top: 34px; background: var(--filo); border: 1px solid var(--filo); }
.corso-dati div{padding:14px 16px;background:var(--carta);font-size:14.5px}
.corso-dati span { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--oliva); }

.corso-linea { position: relative; max-width: 860px; margin: 0 auto; padding: 56px var(--lato) 40px; }
.corso-linea::before{content:"";position:absolute;left:calc(var(--lato) + 17px);top:56px;bottom:66px;width:1px;background:var(--filo)}
.incontro { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 0 22px; padding-bottom: 34px; }
.incontro__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--inchiostro);
  border-radius: 50%;
  background: var(--crema);
  font-family: var(--serif);
  font-size: 17px;
}
.incontro h2 { margin: 5px 0 10px; font-size: 24px; }
.incontro p{font-size:15px;line-height:1.78;color:#3b3a39}
.incontro__casa { margin-top: 10px; padding: 9px 13px; background: var(--carta); font-size: 13.5px !important; color: var(--grigio) !important; }

.corso-fondo { display: grid; grid-template-columns: minmax(0,1fr); gap: 26px; max-width: var(--largo); margin: 0 auto; padding: 20px var(--lato) 86px; }
.corso-fondo__col h2{margin-bottom:14px;font-size:26px}
.corso-fondo__col p { font-size: 15px; line-height: 1.78; color: var(--grigio); }
.corso-fondo__col--no{padding:30px 28px;background:var(--inchiostro);color:var(--crema)}
.corso-fondo__col--no h2 { color: #fff; }
.corso-fondo__col--no p{color:#a8a5a0}
.corso-fondo__col--no .bottone { margin-top: 12px; border-color: var(--crema); color: var(--crema); }
.corso-fondo__col--no .bottone:hover{background:var(--crema);color:var(--inchiostro)}

/*======== 4. CASI E ONORARI ========*/
.conti-testa { max-width: var(--largo); margin: 0 auto; padding: 56px var(--lato) 40px; }
.conti-testa h1{font-size:38px;line-height:1.12}
.conti-testa p { max-width: 560px; margin-top: 18px; font-size: 15.5px; color: var(--grigio); }

.caso {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
  max-width: var(--largo);
  margin: 0 auto 2px;
  padding: 34px var(--lato);
  background: var(--carta);
}
.caso__cifra b{display:block;font-family:var(--serif);font-size:54px;line-height:1;letter-spacing:-1px}
.caso__cifra span { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--grigio); }
.caso__testo h2{margin-bottom:12px;font-size:25px}
.caso__testo p { font-size: 15px; line-height: 1.78; color: #3b3a39; }
.caso--scuro{background:var(--inchiostro);color:var(--crema)}
.caso--scuro .caso__cifra b { color: var(--oliva); }
.caso--scuro .caso__cifra span,.caso--scuro .caso__testo p { color: #a8a5a0; }
.caso--scuro h2 { color: #fff; }

.tariffe { max-width: var(--largo); margin: 44px auto 0; padding: 0 var(--lato); }
.tariffe h2{margin-bottom:18px;font-size:28px}
.tariffe__riga { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 16px; padding: 15px 0; border-bottom: 1px solid var(--filo); font-size: 14.5px; }
.tariffe__riga:first-of-type + .tariffe__riga{border-top:2px solid var(--inchiostro)}
.tariffe__riga--cap { display: none; }
.tariffe__riga b{font-family:var(--serif);font-size:21px;font-weight:600;white-space:nowrap}
.tariffe__riga span:last-child { grid-column: 1 / -1; font-size: 13.5px; color: var(--grigio); }

.fuori { display: grid; grid-template-columns: minmax(0,1fr); gap: 30px; max-width: var(--largo); margin: 0 auto; padding: 50px var(--lato) 88px; }
.fuori__col h2{margin-bottom:14px;font-size:24px}
.fuori__col li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--filo); font-size: 14.5px; }
.fuori__col li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--oliva)}
.fuori__col p { font-size: 15px; line-height: 1.78; color: var(--grigio); }

@media (min-width: 760px) {
  .val-fronte__in{grid-template-columns:1.1fr 1fr;align-items:end}
  .val-fronte h1 { font-size: 54px; }
  .val-tab__riga{grid-template-columns:200px 1.3fr 1.4fr;gap:18px}
  .val-tab__riga--cap { display: grid; font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--grigio); }
  .patto-testa h1{font-size:54px}
  .patto-lista li { grid-template-columns: 260px minmax(0,1fr); gap: 24px; }
  .patto-due{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .corso-testa h1 { font-size: 54px; }
  .corso-dati{grid-template-columns:repeat(4,minmax(0,1fr))}
  .corso-fondo { grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: start; }
  .caso{grid-template-columns:230px minmax(0,1fr);gap:34px;padding:44px var(--lato)}
  .caso__cifra b { font-size: 64px; }
  .conti-testa h1{font-size:50px}
  .tariffe__riga { grid-template-columns: 1.1fr 180px 1.4fr; align-items: baseline; }
  .tariffe__riga--cap{display:grid;font-size:10.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--grigio)}
  .tariffe__riga span:last-child{grid-column:auto}
  .fuori { grid-template-columns: 1.1fr 1fr; gap: 50px; }
}

@media (min-width: 1040px) {
  .val-corpo{grid-template-columns:minmax(0,1fr) 340px;gap:70px}
  .val-scheda { position: sticky; top: 104px; }
}

/* le tre cifre grandi vanno bene fino a sei caratteri, oltre va rivisto il breakpoint 760 */