/* Tema Severi, variante notte: una famiglia tipografica, campi di colore pieni, nessun ornamento.
   Riproduce la tavola "A · Notte, la traccia" del canvas di progetto. */

/* Libre Franklin, ospitata sul sito (SIL Open Font License, vedi fonts/LICENSE-OFL.txt) */
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/libre-franklin-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/libre-franklin-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/libre-franklin-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/libre-franklin-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/libre-franklin-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/libre-franklin-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#070E1F;        /* blu notte, sfondo */
  --surface:#111B33;   /* superficie appena più chiara */
  --ink:#F3F6FC;       /* testo */
  --muted:#AEB9CF;     /* testo secondario */
  --dark:#0E1B33;      /* inchiostro scuro sui campi colorati e sui pulsanti bianchi */
  --accent:#0F3C8C;    /* blu della scuola: fasce delle date */
  --deep:#0B2F70;      /* blu più scuro, sotto il modulo */
  --link-hover:#8FC2F2;
  --c-informatica:#1B9BE0;
  --c-meccanica:#E8650F;
  --c-elettronica:#22A05A;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Libre Franklin",Franklin Gothic,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;font-size:18px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:700;letter-spacing:-0.03em;line-height:0.95;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--ink)}
a:hover{color:var(--link-hover)}
img{display:block;max-width:100%;height:auto}
ul{margin:0;padding:0}
::selection{background:var(--c-informatica);color:var(--dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--c-meccanica);outline-offset:3px}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salta{position:absolute;left:16px;top:-100px;z-index:10;background:#FFFFFF;color:var(--dark);padding:12px 16px;font-weight:700;text-decoration:none}
.salta:focus{top:16px}

.wrap{padding-inline:clamp(16px,2.2vw,32px)}

/* Pulsanti: bianchi con testo scuro; sui campi colorati sono scuri con testo bianco */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;text-decoration:none;color:var(--dark);background:#FFFFFF;padding:18px 28px;min-height:56px;border:0;cursor:pointer;font-family:inherit;line-height:1.2}
.btn:hover{background:var(--c-informatica);color:var(--dark)}
.btn-chiaro{background:#FFFFFF;color:var(--dark)}
.btn-scuro{background:var(--dark);color:#FFFFFF}
.btn-scuro:hover{background:#FFFFFF;color:var(--dark)}
.btn-piccolo{min-height:48px;padding:12px 20px}

/* Testata */
.testata{background:var(--bg)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding-top:18px;padding-bottom:18px}
.nav a{text-decoration:none;font-weight:500;font-size:17px;padding:10px 0;color:var(--ink)}
.marchio{display:flex;align-items:center;gap:14px;line-height:1.1;padding:0 !important}
.marchio img{width:52px;height:52px}
.marchio > span{display:flex;flex-direction:column}
.marchio .nome{font-weight:700;font-size:19px;letter-spacing:-0.02em}
.marchio .motto{font-size:15px;color:var(--muted)}
.nav .voci{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-left:auto}

/* Apertura della home: la scritta Severi si disegna come una fresa */
.hero{background:var(--bg);color:var(--ink)}
.hero .wrap{padding-top:56px;padding-bottom:72px;display:flex;flex-direction:column;gap:44px}
.trace{width:100%;height:auto;display:block}
.l{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 520ms cubic-bezier(.4,0,.2,1) forwards}
.l1{animation-delay:150ms}.l2{animation-delay:480ms}.l3{animation-delay:810ms}.l4{animation-delay:1140ms}.l5{animation-delay:1470ms}.l6{animation-delay:1800ms}
@keyframes draw{to{stroke-dashoffset:0}}
.herotxt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.herofoto{flex:0 1 400px;max-width:400px}
.herofoto img{display:block;width:100%;height:auto}
.herotxt .testo{display:flex;flex-direction:column;gap:18px;max-width:34ch}
.herotxt h1{font-size:clamp(36px,4vw,60px)}
.herotxt p{font-size:clamp(19px,1.6vw,24px);line-height:1.4;max-width:42ch}

/* Introduzioni di sezione */
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.4vw,24px);row-gap:20px;align-items:end}
.intro h2{grid-column:1/7;font-size:clamp(36px,4vw,60px)}
.intro p{grid-column:7/13;font-size:20px;line-height:1.45}
.sez-indirizzi .intro{padding-top:96px;padding-bottom:56px}
.sez-visite .intro{padding-top:136px;padding-bottom:48px}

/* Tre indirizzi: campi pieni di colore con testo scuro */
.tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.col{display:flex;flex-direction:column;color:var(--dark)}
.colpic{position:relative;overflow:hidden;height:380px;background:var(--surface)}
.colpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms ease-out}
.col:hover .colpic img{transform:scale(1.04)}
.coltxt{flex:1;padding:36px 32px 40px;display:flex;flex-direction:column;gap:18px}
.coltxt h3{font-size:clamp(40px,3.8vw,60px)}
.coltxt .frase{font-size:21px;line-height:1.35;font-weight:500}
.coltxt ul{padding-left:1.1em;font-size:17px;line-height:1.5;flex:1}
.coltxt li{padding:3px 0}
.coltxt .btn{align-self:flex-start}

.tinta-elettronica{background:var(--c-elettronica)}
.tinta-informatica{background:var(--c-informatica)}
.tinta-meccanica{background:var(--c-meccanica)}
.fuoco-alto{object-position:50% 0%}
.fuoco-basso{object-position:50% 100%}
.fuoco-sinistra{object-position:0% 50%}
.fuoco-destra{object-position:100% 50%}
.fuoco-destra-centro{object-position:70% 50%}
.fuoco-basso-sinistra{object-position:30% 100%}

/* Fasce degli appuntamenti */
.vband{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.4vw,24px);row-gap:20px;align-items:start;background:var(--accent);color:#FFFFFF;padding:40px clamp(24px,3vw,48px) 44px}
.vband h3{grid-column:1/4;font-size:clamp(32px,3vw,46px)}
.vband .mid{grid-column:4/10;display:flex;flex-direction:column;gap:10px;font-size:20px;line-height:1.4;font-variant-numeric:tabular-nums}
.vband .mid a{color:#FFFFFF}
.vband .mid ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.vband .act{grid-column:10/13;display:flex;justify-content:flex-end}
.vband + .vband{margin-top:16px}
.sw{display:inline-block;width:0.7em;height:0.7em;margin-right:12px;vertical-align:baseline}

/* Modulo di prenotazione */
.prenota{background:var(--deep);color:#FFFFFF}
.prenota .wrap{padding-top:72px;padding-bottom:88px}
.prenota a{color:#FFFFFF}
.form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.4vw,24px);row-gap:32px;align-items:start}
.fl{grid-column:1/6;display:flex;flex-direction:column;gap:20px}
.fl h2{font-size:clamp(36px,4vw,60px)}
.fl p{font-size:20px;line-height:1.45;max-width:36ch}
.fr{grid-column:7/13;display:flex;flex-direction:column;gap:14px}
.form-wrapper{display:flex;flex-direction:column;gap:14px}
.form-wrapper form{display:flex;flex-direction:column;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label,.campo .etichetta{font-size:15px;font-weight:500;color:#FFFFFF}
.campo .required{margin-left:4px}
.inp,.form-wrapper input:not([type=checkbox]),.form-wrapper select,.form-wrapper textarea{width:100%;height:54px;border:0;background:#FFFFFF;color:var(--dark);font-family:inherit;font-size:17px;padding:0 16px;border-radius:0;color-scheme:light}
.form-wrapper textarea{height:auto;min-height:120px;padding:14px 16px}
.form-wrapper input[type=checkbox]{width:24px;height:24px;margin:0;accent-color:#FFFFFF;flex:none}
.campo .form-input-wrapper:has(input[type=checkbox]){display:flex;gap:12px;align-items:flex-start}
.campo .form-input-wrapper:has(input[type=checkbox]) label{font-size:17px;font-weight:400;line-height:1.45}
.campo .form-input-wrapper:has(input[type=checkbox]) a{text-decoration:underline}
.campo-pulsante{margin-top:10px;align-items:flex-start}
.form-honeybear{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.errori,.form-errors{background:#FFFFFF;color:var(--dark);padding:16px 20px;font-size:17px}
.errori ul,.form-errors ul{padding-left:1.1em}
.has-errors .form-errors{padding:0;background:transparent;color:#FFFFFF}
.messaggio{background:#FFFFFF;color:var(--dark);padding:20px 24px;font-size:20px;font-weight:500}
.messaggio.errore{background:var(--c-meccanica);color:var(--dark)}

/* Il pomeriggio */
.sez-pomeriggio{padding-top:136px}
.wide{position:relative;overflow:hidden;background:var(--dark);color:#FFFFFF;min-height:clamp(340px,44vh,480px);display:flex;align-items:flex-end}
.wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,14,31,0.9) 0%,rgba(7,14,31,0) 60%)} /* velatura neutra sotto il testo, sulla foto */
.wide .cap{position:relative;padding-top:120px;padding-bottom:40px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;width:100%}
.wide .cap h1,.wide .cap h2{font-size:clamp(36px,4vw,60px);max-width:14ch}
.wide .cap p{font-size:20px;line-height:1.45;max-width:40ch}
.sfondo{background:var(--surface)}
.pomeriggio-lista{padding-top:72px;padding-bottom:96px;display:flex;flex-direction:column;gap:44px}
.acts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(24px,4vw,64px)}
.acts a{text-decoration:none;display:flex;flex-direction:column;gap:6px}
.acts strong{font-size:clamp(26px,2.4vw,34px);font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:var(--ink)}
.acts span{font-size:18px;color:var(--muted)}
.acts a:hover strong{color:var(--link-hover)}
.link-forte{font-weight:700;font-size:18px;align-self:flex-start}

/* Piè di pagina */
.piede{padding-top:48px;padding-bottom:56px;display:flex;flex-direction:column;gap:32px}
.piede .righe{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;font-size:17px}
.piede .chi,.piede .contatti{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.piede .chi strong{font-size:20px}
.piede .contatti a.tel{text-decoration:none}
.credits{font-size:15px;color:var(--muted);line-height:1.5;max-width:90ch}
.credits a{color:var(--muted)}
.credits p{margin:0}

/* Pagine interne */
.pagina-testa{padding-top:56px;padding-bottom:40px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.4vw,24px);row-gap:20px;align-items:end}
.pagina-testa h1{grid-column:1/8;font-size:clamp(40px,5.5vw,84px)}
.pagina-testa .riga{grid-column:8/13;font-size:22px;line-height:1.4;font-weight:500}
.corpo{max-width:72ch;font-size:19px;line-height:1.55;display:flex;flex-direction:column;gap:18px;padding-top:16px;padding-bottom:56px}
.corpo h2{font-size:clamp(28px,3vw,40px);padding-top:28px}
.corpo h3{font-size:24px;padding-top:12px}
.corpo ul,.corpo ol{padding-left:1.2em}
.corpo li{padding:3px 0}
.corpo p{margin:0}
.corpo a{text-decoration:underline}
.sez{padding-top:56px;padding-bottom:16px}
.sez h2{font-size:clamp(32px,3.6vw,52px);padding-bottom:24px}
.sez .testo{font-size:19px;line-height:1.55;max-width:72ch;display:flex;flex-direction:column;gap:16px}
.sez .testo ul{padding-left:1.2em}

/* Pagina di un indirizzo */
.ind-banda{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.4vw,24px);row-gap:24px;padding:48px clamp(24px,3vw,48px) 52px;color:var(--dark)}
.ind-banda ul{grid-column:1/10;padding-left:1.1em;font-size:20px;line-height:1.5;display:flex;flex-wrap:wrap;gap:4px 48px}
.ind-banda li{flex:1 1 20ch;max-width:34ch;padding:3px 0}
.ind-banda .act{grid-column:10/13;display:flex;justify-content:flex-end;align-items:flex-start}
.ind-foto{position:relative;overflow:hidden;height:clamp(300px,44vh,520px);background:var(--surface)}
.ind-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.orario{width:100%;border-collapse:collapse;font-size:18px;font-variant-numeric:tabular-nums}
.orario caption{text-align:left;font-size:17px;color:var(--muted);padding:0 0 16px}
.orario th,.orario td{text-align:left;padding:12px 16px 12px 0;vertical-align:top;border-bottom:4px solid var(--surface)}
.orario th{font-weight:700}
.orario thead th{font-size:15px;font-weight:500;color:var(--muted);padding-top:0}
.orario .ore{text-align:right;width:5em;padding-right:0;white-space:nowrap}
.orario tfoot th,.orario tfoot td{border-bottom:0;border-top:4px solid var(--ink);font-weight:700}
.nota{font-size:16px;color:var(--muted);line-height:1.5;max-width:72ch}
.date-lista{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:20px;font-variant-numeric:tabular-nums}
.ind-cta{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;padding-top:40px;padding-bottom:96px}
.ind-cta p{font-size:20px;max-width:40ch}
.presto{font-size:20px;font-weight:700;line-height:1.3;margin:0}
.avviso{display:flex;flex-direction:column;gap:14px;padding:36px clamp(24px,3vw,44px) 40px;background:rgba(255,255,255,.08);border-left:6px solid #FFFFFF}
.avviso strong{font-size:clamp(26px,2.6vw,36px);letter-spacing:-0.02em;line-height:1.1}
.avviso p{font-size:20px;line-height:1.45}

/* Pagina di un appuntamento */
.app-scheda{display:flex;flex-direction:column;gap:12px;font-size:22px;background:var(--accent);color:#FFFFFF;padding:40px clamp(24px,3vw,48px) 44px;max-width:60ch}
.app-scheda strong{font-size:clamp(28px,3vw,40px);letter-spacing:-0.02em;line-height:1.1}
.app-scheda a{color:#FFFFFF}

/* Pagina generica: elenco di sottopagine */
.sotto{list-style:none;display:flex;flex-direction:column;gap:14px;font-size:20px;padding-bottom:72px}
.sotto a{font-weight:700;text-decoration:none}
.sotto span{display:block;color:var(--muted);font-size:18px;font-weight:400}

/* Errore */
.errore-pagina{padding-top:96px;padding-bottom:120px;display:flex;flex-direction:column;gap:24px;max-width:60ch}
.errore-pagina h1{font-size:clamp(40px,5vw,72px)}
.errore-pagina p{font-size:20px}

@media (prefers-reduced-motion:reduce){.l{animation:none;stroke-dashoffset:0}.colpic img{transition:none}.col:hover .colpic img{transform:none}}

@media (max-width:1023px){
  .tre{grid-template-columns:minmax(0,1fr)}
  .colpic{height:56vw;max-height:420px}
  .acts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ind-banda ul{grid-column:1/13}
  .ind-banda .act{grid-column:1/13;justify-content:flex-start}
}
@media (max-width:767px){
  .nav .voci{width:100%;justify-content:space-between}
  .hero .wrap{padding-top:32px;padding-bottom:56px;gap:32px}
  .intro,.pagina-testa{display:flex;flex-direction:column;align-items:stretch}
  .sez-indirizzi .intro{padding-top:72px;padding-bottom:40px}
  .sez-visite .intro{padding-top:88px;padding-bottom:36px}
  .coltxt{padding:28px 20px 36px}
  .vband{display:flex;flex-direction:column;align-items:stretch;padding:28px 20px 32px}
  .vband .act{justify-content:flex-start}
  .form{display:flex;flex-direction:column}
  .prenota .wrap{padding-top:56px;padding-bottom:64px}
  .sez-pomeriggio{padding-top:88px}
  /* Sul telefono il testo non sta sulla foto: foto sopra, titolo e riga sotto, su fondo scuro */
  .wide{display:block;min-height:0}
  .wide img{position:static;display:block;height:min(62vw,300px);object-position:center 30%}
  .scrim{display:none}
  .wide .cap{padding-top:28px;padding-bottom:36px;gap:12px}
  .wide .cap h1,.wide .cap h2{max-width:none}
  .pomeriggio-lista{padding-top:48px;padding-bottom:64px;gap:32px}
  .acts{grid-template-columns:minmax(0,1fr);gap:24px}
  .ind-banda{display:flex;flex-direction:column;padding:28px 20px 32px}
  .orario th,.orario td{padding:10px 10px 10px 0;font-size:16px}
  .orario .ore{width:3.6em}
  .ind-cta{padding-bottom:64px}
}