/* CIBA Academy — restyling 2026. Sistema di base.
   Colori del marchio presi dagli stili globali del sito attuale: blu #073462, rosso #C00123.
   Caratteri: Fraunces (titoli, richiama il certificato) + IBM Plex Sans (testo, già in uso sul sito).
   Nel sito definitivo i caratteri vanno serviti dal server, non da Google (regola privacy). */

:root{
  --blu:#073462;
  --blu-scuro:#04223F;
  --blu-chiaro:#0E4F90;
  --rosso:#C00123;
  --rosso-scuro:#9A0019;
  --oro:#B8822B;
  --carta:#FBFAF7;
  --bianco:#FFFFFF;
  --testo:#14181C;
  --testo-tenue:#5B6572;
  --linea:#E4E2DC;
  --verde-ok:#0F7A54;
  --r:14px;
  --max:1180px;
  --sp:clamp(56px,7vw,104px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--carta);color:var(--testo);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blu);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.2vw,4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.25}
p{margin:0 0 1.1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sezione{padding:var(--sp) 0}
.sezione--blu{background:var(--blu);color:#E8EEF6}
.sezione--blu h2,.sezione--blu h3{color:#fff}
.sezione--bianca{background:var(--bianco)}
.occhiello{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--rosso);margin:0 0 14px}
.sezione--blu .occhiello{color:#8FB6E8}
.guida{max-width:62ch}
.tenue{color:var(--testo-tenue)}
.sezione--blu .tenue{color:#B8C8DD}

/* bottoni */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;
  font-weight:600;font-size:1rem;text-decoration:none;border:1.5px solid transparent;transition:.18s ease}
.btn--rosso{background:var(--rosso);color:#fff}
.btn--rosso:hover{background:var(--rosso-scuro)}
.btn--blu{background:var(--blu);color:#fff}
.btn--blu:hover{background:var(--blu-scuro)}
.btn--fantasma{border-color:currentColor;color:var(--blu);background:transparent}
.sezione--blu .btn--fantasma{color:#fff}
.btn--fantasma:hover{background:rgba(7,52,98,.07)}
.azioni{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* intestazione */
.testata{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.testata .wrap{display:flex;align-items:center;gap:28px;min-height:76px}
.marchio{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--blu);font-weight:700;font-size:1.22rem;letter-spacing:-.02em}
.marchio img{height:38px;width:auto}
.menu{display:flex;gap:26px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.menu a{color:var(--testo);text-decoration:none;font-size:.97rem;font-weight:500}
.menu a:hover{color:var(--rosso)}
.testata .btn{padding:11px 22px;font-size:.93rem}

/* eroe */
.eroe{padding:clamp(56px,8vw,96px) 0 var(--sp);background:
  radial-gradient(1100px 420px at 88% -8%,rgba(7,52,98,.10),transparent 62%),
  radial-gradient(760px 340px at 2% 8%,rgba(192,1,35,.07),transparent 60%)}
.eroe h1{margin-bottom:.35em}
.eroe .nascita{font-size:1rem;color:var(--testo-tenue);margin:0 0 18px;max-width:52ch}
.eroe .promessa{font-size:clamp(1.08rem,1.7vw,1.3rem);max-width:56ch;color:#2A3440}
.eroe-griglia{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.eroe-figura{position:relative}
.eroe-figura img{border-radius:var(--r);box-shadow:0 24px 60px -28px rgba(7,52,98,.45)}
.bollino{position:absolute;left:-18px;bottom:-18px;background:var(--bianco);border:1px solid var(--linea);
  border-radius:var(--r);padding:16px 20px;max-width:230px;box-shadow:0 18px 40px -22px rgba(0,0,0,.3)}
.bollino strong{display:block;font-family:Fraunces,serif;font-size:1.5rem;color:var(--blu);line-height:1}
.bollino span{font-size:.84rem;color:var(--testo-tenue)}

/* fascia numeri */
.numeri{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--bianco)}
.numeri ul{list-style:none;margin:0;padding:28px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.numeri strong{display:block;font-family:Fraunces,serif;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--blu);line-height:1}
.numeri span{font-size:.88rem;color:var(--testo-tenue)}

/* griglie */
.griglia{display:grid;gap:26px}
.griglia--3{grid-template-columns:repeat(3,1fr)}
.griglia--2{grid-template-columns:repeat(2,1fr)}
.scheda{background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r);padding:30px;transition:.18s ease}
.scheda:hover{transform:translateY(-3px);box-shadow:0 20px 44px -30px rgba(7,52,98,.45)}
.scheda h3{margin-bottom:.4em}
.scheda p:last-child{margin-bottom:0}
.scheda .num{font-family:Fraunces,serif;font-size:1.1rem;color:var(--rosso);display:block;margin-bottom:10px}

/* schede corso */
.corso{background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.corso img{aspect-ratio:16/10;object-fit:cover;width:100%}
.corso .dentro{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.corso .docente{font-size:.83rem;letter-spacing:.06em;text-transform:uppercase;color:var(--rosso);font-weight:600;margin-bottom:8px}
.corso h3{font-size:1.18rem;margin-bottom:.45em}
.corso .sotto{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--linea)}
.prezzo{font-family:Fraunces,serif;font-size:1.3rem;color:var(--blu)}
.prezzo small{font-size:.72rem;color:var(--testo-tenue);font-family:"IBM Plex Sans",sans-serif;display:block;line-height:1.2}

/* certificato */
.certificato{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.certificato img{border-radius:10px;border:1px solid var(--linea);box-shadow:0 26px 60px -32px rgba(0,0,0,.5)}
.elenco-spunte{list-style:none;padding:0;margin:0 0 26px}
.elenco-spunte li{position:relative;padding-left:32px;margin-bottom:12px}
.elenco-spunte li::before{content:"";position:absolute;left:0;top:.45em;width:17px;height:17px;border-radius:50%;
  background:var(--verde-ok);box-shadow:inset 0 0 0 3px var(--bianco)}

/* citazioni */
.citazione{background:var(--bianco);border:1px solid var(--linea);border-left:3px solid var(--rosso);border-radius:var(--r);padding:28px 30px}
.citazione p{font-size:1.05rem;font-style:italic;color:#223}
.citazione footer{font-size:.9rem;color:var(--testo-tenue);font-style:normal}
.segnaposto{border-style:dashed;background:#FFFDF5}

/* domande */
.domanda{border-bottom:1px solid var(--linea);padding:22px 0}
.domanda h3{font-family:"IBM Plex Sans",sans-serif;font-size:1.06rem;font-weight:600;margin-bottom:.35em}
.domanda p{margin:0;color:var(--testo-tenue)}

/* richiamo finale */
.richiamo{background:linear-gradient(135deg,var(--blu) 0%,var(--blu-scuro) 100%);color:#fff;border-radius:var(--r);
  padding:clamp(40px,6vw,72px);text-align:center}
.richiamo h2{color:#fff;margin-bottom:.3em}
.richiamo p{color:#C7D6E8;max-width:54ch;margin-inline:auto}

/* piè di pagina */
.piede{background:var(--blu-scuro);color:#AEC0D6;padding:64px 0 28px;font-size:.93rem}
.piede a{color:#E4EDF8;text-decoration:none}
.piede a:hover{text-decoration:underline}
.piede h4{font-family:"IBM Plex Sans",sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#7F9AB9;margin:0 0 14px}
.piede ul{list-style:none;padding:0;margin:0}
.piede li{margin-bottom:9px}
.piede-griglia{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.piede-base{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.85rem;color:#8FA6C0}

/* nota demo */
.nota-demo{background:#FFF4D6;border-bottom:1px solid #E8D9A8;color:#6B5318;font-size:.86rem;text-align:center;padding:9px 16px}

@media (max-width:980px){
  .eroe-griglia,.certificato,.griglia--3,.griglia--2{grid-template-columns:1fr}
  .numeri ul{grid-template-columns:repeat(2,1fr)}
  .piede-griglia{grid-template-columns:1fr 1fr}
  .menu{display:none}
}
@media (max-width:560px){
  .piede-griglia{grid-template-columns:1fr}
  .bollino{position:static;margin-top:16px;max-width:none}
}