/* ===========================================================================
   Open Day Tutor Up — stile comune (hub, pagine citta', modulo).
   Mobile first. Montserrat per i titoli, Lora per il testo.
   =========================================================================== */
:root{
  --blu:#004062; --azzurro:#00A0E1; --blu2:#1C75BC; --testo:#233C78;
  --giallo:#FCD400; --verde:#65B32E; --rosa:#E8326E;
  --chiaro:#F2F7FB; --grigio:#F8F9FA; --bordo:#DCE6EE;
  --ombra:0 2px 12px rgba(0,64,98,.08);
  --ombra-alta:0 10px 30px rgba(0,64,98,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--chiaro); color:var(--testo);
  font-family:Lora,Georgia,serif; font-size:16px; line-height:1.65;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,.mono{font-family:Montserrat,Arial,sans-serif}
h1{font-size:26px; color:var(--blu); margin:0 0 8px; line-height:1.25}
h2{font-size:21px; color:var(--blu); margin:0 0 8px}
h3{font-size:16px; color:var(--blu); margin:0 0 6px}
p{margin:0 0 14px}
a{color:var(--blu2)}
img{max-width:100%; height:auto; display:block}

.guscio{max-width:680px; margin:0 auto; padding:0 16px 48px}
.scheda{background:#fff; border-radius:16px; padding:24px 20px; margin:18px 0; box-shadow:var(--ombra)}
.centro{text-align:center}
.nascosto{display:none !important}
.aiuto{font-size:14px; color:#6b7a90; margin:6px 0 0}
.errore{color:var(--rosa); font-size:14px; margin:8px 0 0; font-weight:600}
.esito-ok{color:var(--verde); font-weight:600; margin-top:10px}

/* ---------------------------- barra in alto ------------------------------ */
.testata{background:var(--blu); padding:14px 16px; text-align:center}
.testata .marchio{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.testata img{height:34px}
.marchio-testo{font-family:Montserrat,Arial,sans-serif; font-weight:800; font-size:22px;
  letter-spacing:.5px; color:#fff}
.marchio-testo b{color:var(--azzurro); font-weight:800}

/* -------------------------------- eroe ----------------------------------- */
.eroe{position:relative; color:#fff; text-align:center; padding:56px 16px 48px; overflow:hidden}
.eroe .sfondo{position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.06); animation:respiro 18s ease-in-out infinite alternate}
.eroe .velo{position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,64,98,.92) 0%, rgba(28,117,188,.82) 100%)}
.eroe .contenuto{position:relative; max-width:620px; margin:0 auto}
.eroe h1{color:var(--giallo); font-size:30px; margin:0 0 12px; text-shadow:0 2px 12px rgba(0,0,0,.25)}
.eroe p{color:rgba(255,255,255,.93); font-size:17px}
.occhiello{display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-family:Montserrat,Arial,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase; padding:6px 16px; border-radius:50px; margin-bottom:16px}
@keyframes respiro{from{transform:scale(1.04)} to{transform:scale(1.14)}}
.striscia{height:12px; background:linear-gradient(90deg,var(--azzurro) 0%,var(--giallo) 100%)}

/* ------------------------------ bottoni ---------------------------------- */
a.bottone-link,button.bottone-link,button.principale,button.avanti{
  display:inline-block; background:var(--azzurro); color:#fff; border:0; cursor:pointer;
  font-family:Montserrat,Arial,sans-serif; font-weight:bold; font-size:15px;
  padding:14px 28px; border-radius:50px; text-decoration:none; margin:6px 4px 0 0;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
a.bottone-link:hover,button.bottone-link:hover,button.principale:hover,button.avanti:hover{
  background:var(--blu2); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,64,98,.22)}
a.bottone-link.chiaro,button.bottone-link.chiaro{background:#fff; color:var(--blu); border:2px solid var(--bordo)}
a.bottone-link.chiaro:hover,button.bottone-link.chiaro:hover{background:#fff; border-color:var(--azzurro); color:var(--blu)}
button.bottone-link{flex:none}
button.avanti,button.principale{flex:1}
button.indietro{background:none; border:0; color:#6b7a90; font-family:Montserrat,Arial,sans-serif;
  font-size:14px; padding:14px 8px; cursor:pointer}
button[disabled]{opacity:.5; cursor:default; transform:none !important; box-shadow:none !important}
button.minore{background:none;border:0;color:var(--blu2);font-size:13px;
  text-decoration:underline;cursor:pointer;padding:0}
.bottoni{display:flex; gap:10px; margin-top:24px}

/* ------------------------------- le date --------------------------------- */
.scheda.data{border-left:5px solid var(--azzurro); transition:transform .2s ease, box-shadow .2s ease}
.scheda.data:hover{transform:translateY(-3px); box-shadow:var(--ombra-alta)}
.data .quando{font-family:Montserrat,Arial,sans-serif; font-weight:800; color:var(--azzurro);
  font-size:13px; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:4px}
.data .dove{font-size:15px; color:#5c6b82; margin:6px 0 10px}
.posti{font-family:Montserrat,Arial,sans-serif; font-size:13px; font-weight:600; color:var(--verde)}
.posti.pieni{color:var(--rosa)}

/* ------------------------------ le schede -------------------------------- */
.griglia{display:grid; grid-template-columns:1fr; gap:16px; margin-top:8px}
@media(min-width:560px){.griglia{grid-template-columns:1fr 1fr}}
.carta{background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--ombra);
  transition:transform .2s ease, box-shadow .2s ease}
.carta:hover{transform:translateY(-4px); box-shadow:var(--ombra-alta)}
.carta img{width:100%; aspect-ratio:1/1; object-fit:cover}
.carta .dentro{padding:16px 18px 20px}
.carta p{font-size:14.5px; color:#5c6b82; margin:0}

/* ----------------------------- la galleria ------------------------------- */
.galleria{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px}
@media(min-width:560px){.galleria{grid-template-columns:repeat(4,1fr)}}
.galleria img{border-radius:12px; aspect-ratio:4/3; object-fit:cover;
  transition:transform .25s ease, filter .25s ease; filter:saturate(.95)}
.galleria img:hover{transform:scale(1.04); filter:saturate(1.1)}

/* -------------------------------- sedi ----------------------------------- */
.sedi{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px}
.sedi a{background:#E3F2FD; color:var(--blu); font-family:Montserrat,Arial,sans-serif;
  font-size:14px; font-weight:600; padding:10px 20px; border-radius:50px; text-decoration:none;
  transition:background .18s ease, color .18s ease, transform .18s ease}
.sedi a:hover{background:var(--azzurro); color:#fff; transform:translateY(-2px)}

/* ------------------------- pannelli a scomparsa -------------------------- */
.apri{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:0; cursor:pointer; padding:0; text-align:left;
  font-family:Montserrat,Arial,sans-serif; font-size:16px; font-weight:700; color:var(--blu)}
.apri .segno{flex:0 0 28px; height:28px; border-radius:50%; background:var(--azzurro); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1;
  transition:transform .25s ease}
.apri[aria-expanded="true"] .segno{transform:rotate(45deg)}
.pannello{overflow:hidden; max-height:0; transition:max-height .35s ease, opacity .25s ease; opacity:0}
.pannello.aperto{max-height:2200px; opacity:1}
.pannello .dentro{padding-top:14px}

/* -------------------------------- FAQ ------------------------------------ */
.faq .voce{border-bottom:1px solid var(--bordo); padding:4px 0}
.faq .voce:last-child{border-bottom:0}
.faq .voce .apri{padding:14px 0; font-size:15.5px}
.faq .voce p{margin:0 0 14px; font-size:15px; color:#5c6b82}

/* ------------------------------- campi ----------------------------------- */
label{display:block; font-family:Montserrat,Arial,sans-serif; font-size:13px;
      font-weight:600; color:var(--blu); margin:16px 0 6px}
input,select,textarea{
  width:100%; padding:12px 14px; font-family:Lora,Georgia,serif; font-size:16px;
  color:var(--testo); background:#fff; border:1px solid var(--bordo); border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--azzurro);
  box-shadow:0 0 0 3px rgba(0,160,225,.15)}
input[readonly]{background:var(--grigio); color:#5c6b82}
.avviso{background:#FFF8D9; border-left:4px solid var(--giallo); padding:12px 14px;
        border-radius:0 8px 8px 0; font-size:14px; margin:10px 0 0}
.riga2{display:flex; gap:12px} .riga2>*{flex:1}
.consenso{display:flex; gap:10px; align-items:flex-start; margin:14px 0; font-size:14px}
.consenso input{width:20px; height:20px; flex:0 0 20px; margin-top:2px}

/* --------------------------- modulo a passi ------------------------------ */
.avanzamento{display:flex; gap:6px; margin:18px 0 4px}
.avanzamento i{flex:1; height:5px; border-radius:3px; background:var(--bordo);
  transition:background .3s ease}
.avanzamento i.fatto{background:var(--azzurro)}
.passo-nome{font-family:Montserrat,Arial,sans-serif; font-size:12px;
  letter-spacing:.6px; text-transform:uppercase; color:#7b8ba6; margin-bottom:14px}
.passo{animation:entra .32s ease both}
@keyframes entra{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.scelte{display:grid; gap:12px; margin-top:8px}
.scelta{display:block; width:100%; text-align:left; cursor:pointer; background:#fff;
  border:2px solid var(--bordo); border-radius:14px; padding:16px 18px;
  transition:border-color .18s ease, background .18s ease, transform .18s ease}
.scelta:hover{border-color:var(--azzurro); transform:translateY(-2px)}
.scelta.attiva{border-color:var(--azzurro); background:#F0F9FE}
.scelta b{display:block; font-family:Montserrat,Arial,sans-serif; font-size:16px; color:var(--blu)}
.scelta span{font-size:14px; color:#6b7a90}
.evento{background:var(--grigio); border-radius:12px; padding:14px 16px; margin-bottom:6px}
.evento b{font-family:Montserrat,Arial,sans-serif; color:var(--blu); display:block}
.evento span{font-size:14px; color:#5c6b82}
.invitato{background:#F0F9FE; border:1px solid #BEE6F8; border-radius:10px;
  padding:12px 14px; font-size:14px; margin-bottom:6px}
.grande{font-size:22px; letter-spacing:8px; text-align:center; font-family:Montserrat,Arial,sans-serif}

/* ------------------------ comparsa allo scorrimento ---------------------- */
.rivela{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease}
.rivela.visibile{opacity:1; transform:none}

/* -------------------------------- piede ---------------------------------- */
footer.piede{background:var(--blu); color:rgba(255,255,255,.85); padding:28px 16px;
  text-align:center; font-size:14px}
footer.piede a{color:var(--giallo)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .rivela{opacity:1; transform:none}
  .eroe .sfondo{animation:none}
}

/* ===========================================================================
   Impaginazione delle pagine pubbliche: larghezze, sezioni, mosaico.
   =========================================================================== */
.largo{max-width:1120px; margin:0 auto; padding:0 20px}
.sezione{padding:56px 0}
.sezione.chiara{background:#fff}
.sezione.scura{background:var(--blu); color:#fff}
.sezione.scura h2{color:var(--giallo)}
.sezione.scura p{color:rgba(255,255,255,.88)}
.titolo-sez{text-align:center; margin-bottom:8px; font-size:30px}
.sotto-sez{text-align:center; color:#6b7a90; max-width:640px; margin:0 auto 34px}
.sezione.scura .sotto-sez{color:rgba(255,255,255,.75)}

/* ------------------------------ eroe a due colonne ----------------------- */
.eroe2{position:relative; overflow:hidden; background:var(--blu); color:#fff}
.eroe2 .sfondo{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.20}
.eroe2 .dentro{position:relative; display:grid; grid-template-columns:1fr; gap:28px;
  align-items:center; padding:48px 20px 52px; max-width:1120px; margin:0 auto}
@media(min-width:880px){
  .eroe2 .dentro{grid-template-columns:1fr 1fr; gap:48px; padding:64px 20px 68px}
  .titolo-sez{font-size:34px}
}
.eroe2 h1{color:#fff; font-size:34px; line-height:1.15; margin:0 0 14px}
.eroe2 h1 em{font-style:normal; color:var(--giallo); display:block}
.eroe2 p{color:rgba(255,255,255,.9); font-size:17px}
.eroe2 .cornice{border-radius:18px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.34);
  transform:rotate(-1deg); transition:transform .4s ease}
.eroe2 .cornice:hover{transform:rotate(0deg) scale(1.01)}
.eroe2 .cornice img{width:100%; display:block}

/* ------------------------------- mosaico --------------------------------- */
.duecol{display:grid; grid-template-columns:1fr; gap:34px; align-items:center}
@media(min-width:880px){.duecol{grid-template-columns:1fr 1fr; gap:52px}}
.mosaico{display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:118px; gap:12px}
@media(min-width:560px){.mosaico{grid-auto-rows:150px}}
.mosaico img{width:100%; height:100%; object-fit:cover; border-radius:14px;
  box-shadow:var(--ombra); transition:transform .3s ease, box-shadow .3s ease}
.mosaico img:hover{transform:translateY(-4px) scale(1.02); box-shadow:var(--ombra-alta)}
.mosaico img:nth-child(1){grid-row:span 2}
.mosaico img:nth-child(4){grid-row:span 2}

/* ------------------------------ elenco punti ----------------------------- */
.punti{list-style:none; margin:0; padding:0}
.punti li{display:flex; gap:14px; align-items:flex-start; padding:12px 0;
  border-bottom:1px solid var(--bordo)}
.sezione.scura .punti li{border-color:rgba(255,255,255,.16)}
.punti li:last-child{border-bottom:0}
.punti .segnalino{flex:0 0 32px; height:32px; border-radius:9px; background:var(--azzurro);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700;
  font-family:Montserrat,Arial,sans-serif}
.punti b{font-family:Montserrat,Arial,sans-serif; color:var(--blu); display:block; font-size:15.5px}
.sezione.scura .punti b{color:#fff}
.punti span{font-size:14.5px; color:#6b7a90}
.sezione.scura .punti span{color:rgba(255,255,255,.75)}

/* --------------------------- griglia di carte ---------------------------- */
.carte{display:grid; grid-template-columns:1fr; gap:20px}
@media(min-width:560px){.carte{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.carte{grid-template-columns:repeat(4,1fr)}}
.carte .carta{display:flex; flex-direction:column; height:100%}
.carte .carta img{width:100%; aspect-ratio:4/5; object-fit:cover}
.carte .carta .dentro{padding:18px 18px 22px; flex:1}
.carte .carta h3{font-size:16px; line-height:1.3; margin-bottom:8px}
.carte .carta p{font-size:14.5px; color:#5c6b82; margin:0}

/* ------------------------------ vantaggi --------------------------------- */
.vantaggi{display:grid; grid-template-columns:1fr; gap:22px}
@media(min-width:560px){.vantaggi{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.vantaggi{grid-template-columns:repeat(4,1fr)}}
.vantaggio{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:22px 20px; transition:background .22s ease, transform .22s ease}
.vantaggio:hover{background:rgba(255,255,255,.14); transform:translateY(-3px)}
.vantaggio .numero{font-family:Montserrat,Arial,sans-serif; font-size:13px; font-weight:800;
  color:var(--giallo); letter-spacing:1.6px; display:block; margin-bottom:8px}
.vantaggio h3{color:#fff; font-size:16px; margin-bottom:8px; line-height:1.3}
.vantaggio p{font-size:14.5px; color:rgba(255,255,255,.78); margin:0}

/* --------------------------- richiamo giallo ----------------------------- */
.richiamo{background:var(--giallo); padding:30px 20px; text-align:center}
.richiamo .dentro{max-width:900px; margin:0 auto; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:18px}
.richiamo p{font-family:Montserrat,Arial,sans-serif; font-size:19px; font-weight:bold;
  color:var(--blu); margin:0; flex:1 1 320px; line-height:1.35}
.richiamo a.bottone-link{background:var(--blu); margin:0}
.richiamo a.bottone-link:hover{background:#00304a}

/* ------------------------- elenco date, in evidenza ---------------------- */
.date-griglia{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:760px){.date-griglia{grid-template-columns:1fr 1fr}}
.scheda.data{margin:0}

/* ---- come si segue online: i tre passaggi su fad.tutorup.it ---- */
.passaggi{display:grid; grid-template-columns:1fr; gap:14px; margin:16px 0 4px}
@media(min-width:680px){.passaggi{grid-template-columns:repeat(3,1fr)}}
.passaggio{background:var(--grigio); border:1px solid var(--bordo); border-radius:14px;
  padding:18px 16px; position:relative; transition:transform .2s ease, box-shadow .2s ease}
.passaggio:hover{transform:translateY(-3px); box-shadow:var(--ombra)}
.passaggio .num{width:30px; height:30px; border-radius:50%; background:var(--azzurro); color:#fff;
  font-family:Montserrat,Arial,sans-serif; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; margin-bottom:10px}
.passaggio h4{font-family:Montserrat,Arial,sans-serif; font-size:14.5px; color:var(--blu); margin:0 0 6px}
.passaggio p{font-size:14px; color:#5c6b82; margin:0}
.percorso{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px;
  background:var(--blu); border-radius:12px; padding:14px 16px}
.percorso .tappa{font-family:Montserrat,Arial,sans-serif; font-size:13px; font-weight:600;
  color:#fff; background:rgba(255,255,255,.14); border-radius:8px; padding:7px 12px; white-space:nowrap}
.percorso .tappa.finale{background:var(--giallo); color:var(--blu)}
.percorso .freccia{color:var(--azzurro); font-weight:700}


/* ===========================================================================
   Le date: la prossima in evidenza, le altre piu' piccole a due per riga.
   =========================================================================== */
.date-griglia{display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px}
@media(min-width:720px){.date-griglia{grid-template-columns:1fr 1fr}}

.scheda.data{margin:0 0 16px; border-left:5px solid var(--azzurro)}
.scheda.data.principale{padding:26px 24px}
.scheda.data.principale h2{font-size:24px}
.scheda.data.principale .quando{font-size:14px}

.scheda.data.compatta{padding:18px 18px; margin:0}
.scheda.data.compatta h2{font-size:18px}
.scheda.data.compatta .quando{font-size:12px}
.scheda.data.compatta .dove{font-size:14px; margin:4px 0 8px}
.scheda.data.compatta .posti{font-size:12.5px}
.scheda.data.compatta a.bottone-link{font-size:13.5px; padding:11px 20px}

.data .azioni{margin:14px 0 0}

/* il "+" dei parcheggi */
.apri-par{background:none; border:0; padding:8px 0 0; cursor:pointer; text-align:left;
  font-family:Montserrat,Arial,sans-serif; font-size:13.5px; font-weight:600; color:var(--blu2);
  display:flex; align-items:center; gap:8px}
.apri-par:hover{color:var(--azzurro)}
.apri-par .segno-par{width:22px; height:22px; border-radius:50%; background:var(--azzurro); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; flex:0 0 22px}

ul.parcheggi{list-style:none; margin:10px 0 0; padding:0}
ul.parcheggi li{background:var(--grigio); border-radius:10px; padding:12px 14px; margin-bottom:8px;
  font-size:14px; line-height:1.5}
ul.parcheggi b{font-family:Montserrat,Arial,sans-serif; font-size:14px; color:var(--blu); display:block}
ul.parcheggi span{display:block; color:#5c6b82}
ul.parcheggi .dettagli em{font-style:normal; display:inline-block; background:#fff; color:#5c6b82;
  border:1px solid var(--bordo); border-radius:20px; padding:2px 10px; font-size:12.5px;
  margin:6px 6px 0 0}
ul.parcheggi a{font-family:Montserrat,Arial,sans-serif; font-size:13px; font-weight:600}

/* ---- riepilogo delle scelte, sempre visibile durante la compilazione ---- */
.riepilogo-scelte{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.riepilogo-scelte span{background:#fff; border:1px solid var(--bordo); border-radius:20px;
  padding:6px 14px; font-family:Montserrat,Arial,sans-serif; font-size:12.5px; color:#5c6b82}
.riepilogo-scelte span b{color:var(--blu)}
.detto{background:#F0F9FE; border:1px solid #BEE6F8; border-radius:10px; padding:10px 14px;
  font-size:14px; color:var(--blu); margin:12px 0 0}