/* ── FONT LOCALI ── */
@font-face {
  font-family: 'Bauhaus93';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/BAUHS93.woff2') format('woff2');
}
@font-face {
  font-family: 'BauhausRegular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/BauhausRegular.woff2') format('woff2');
}

/* ── DESIGN TOKENS ── */
:root {
  /* Brand */
  --night:          #2A1B35;
  --violet:         #A25EBA;
  --violet-dark:    #844F9C;
  --violet-deep:    #6C3E82;
  --fuchsia:        #E888D1;
  /* Sfondi sezioni */
  --bg-white:       #FFFFFF;
  --bg-malva:       #F8F3FC;
  --bg-lavanda:     #F3E8F7;
  /* Testo */
  --text:           #1A1A2E;
  --text-secondary: #4A4560;
  --text-muted:     #6F687F;
  /* Bordi */
  --border:         rgba(0, 0, 0, 0.06);
  /* Radii */
  --radius-card: 16px;
  --radius-btn:  100px;
}

/* ── RESET ── */
*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,body{overflow-x:clip}
body{
  font-family:'BauhausRegular', system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--text);
  background:#F3E8F7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img, video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color 350ms ease-out, border-color 350ms ease-out;}

/* ── CONTAINER ── */
.container{max-width:1200px;margin:0 auto;padding:0 32px}

/* ── ACCESSIBILITÀ ── */
:focus-visible{outline:3px solid var(--violet);outline-offset:4px;border-radius:4px;}

/* ── HEADER & NAV ── */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px clamp(32px, 5vw, 96px);
  padding-top: max(8px, calc(8px + env(safe-area-inset-top)));
  min-height:58px;
  max-width:none;
}
.nav-logo img{
  display:block;
  width:auto;
  height:62px;
  object-fit:contain;
  transition:transform 300ms ease;
}
@media (hover:hover){.nav-logo:hover img{transform:scale(1.02);}}
.nav-links{
  display:flex;gap:32px;
  font-family:'BauhausRegular', sans-serif;
  font-weight:400;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.nav-links a{color:var(--text-secondary);transition:color 350ms ease-out;}
.nav-links a:focus-visible{color:var(--violet-dark);}
@media (hover:hover){.nav-links a:hover{color:var(--violet-dark);}}

/* ── HERO ── */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  height:min(100vh, 900px);
  height:min(100svh, 900px);
  min-height:560px;
  display:flex;align-items:flex-start;
  background:
    radial-gradient(circle at 74% 50%, rgba(228,203,238,0.36), transparent 30%),
    linear-gradient(108deg, #faf7fc 0%, #f7f0fa 50%, #eee2f2 100%);
}

.hero::after{
  content:'';
  position:absolute;inset:0;
  /* Fondale unico, come nella versione precedente: nessun rettangolo
     separato e nessuna maschera con resa variabile fra browser. */
  /* Mantiene sempre visibile il logo sul lato destro quando la hero diventa
     più alta e il ritaglio orizzontale è inevitabile. */
  background:url('hero2ph.webp?v=20260714-2') right center / cover no-repeat;
  z-index:0;
}
.hero::before{
  content:'';
  position:absolute;inset:0;
  /* Strati di raccordo indipendenti dall'immagine: resa identica su Chrome
     e Safari, con contrasto costante per il testo. */
  background:
    linear-gradient(180deg, rgba(250,247,252,0.54) 0%, transparent 26%, transparent 70%, #f3e8f7 100%),
    /* Protegge il testo a sinistra, ma lascia leggibili nastro e logo
       già dalla zona centrale della hero. */
    linear-gradient(90deg, #faf7fc 0%, #faf7fc 25%, rgba(250,247,252,0.70) 34%, rgba(250,247,252,0.18) 45%, transparent 56%);
  z-index:1;
}
.hero .container{max-width:none;padding:0 clamp(48px, 5vw, 96px);}
.hero-inner{
  display:flex;align-items:flex-start;justify-content:flex-start;
  text-align:left;position:relative;z-index:10;
  width:100%;height:100%;
  padding-top:clamp(94px, 12vh, 144px);padding-bottom:0;
}
.hero-text{
  max-width:590px;
  width:100%;
  margin-right:auto;
  padding-left:0;
}

/* Composizione dedicata alla fascia intermedia, non un desktop ristretto. */
@media (min-width:900px) and (max-width:1399px){
  .hero{height:clamp(620px, 68vw, 780px);min-height:620px;}
  .hero::after{background-position:right bottom;background-size:cover;}
  .hero .container{padding-inline:clamp(36px, 4vw, 64px);}
  .hero-inner{padding-top:clamp(100px, 11vh, 130px);}
  .hero::before{
    background:
      linear-gradient(180deg, rgba(250,247,252,0.62) 0%, transparent 24%, transparent 66%, #f3e8f7 100%),
      linear-gradient(90deg, #faf7fc 0%, #faf7fc 29%, rgba(250,247,252,0.70) 39%, rgba(250,247,252,0.18) 51%, transparent 63%);
  }
}

/* Oltre 1600px l'immagine smette di crescere con la finestra: dimensione
   fissa (mai interpolata oltre ~1.25x su schermi 2x) ancorata a destra.
   A 1599px `cover` la rende già ~1599px larga, quindi il passaggio è
   impercettibile. Il bordo sinistro sfuma nel gradiente della hero e la
   fascia scoperta lascia trasparire il fondale della hero stessa. */
@media (min-width:1600px){
  .hero::after{
    background:
      linear-gradient(90deg, #f8f2fa calc(100% - 1600px), rgba(248,242,250,0) calc(100% - 1300px)) 0 0 / 100% 100% no-repeat,
      url('hero2ph.webp?v=20260714-2') right center / 1600px auto no-repeat;
  }
}
.hero-title{
  font-size:clamp(34px, 4.1vw, 58px);
  font-family:'BauhausRegular', sans-serif;
  font-weight:bold;
  color:var(--night);
  line-height:1.04;
  margin-bottom:22px;
  text-wrap:balance;
}
.hero-title em{font-style:normal;color:var(--violet);}
.hero-subtitle{
  max-width:430px;
  font-size:20px;
  color:var(--text-secondary);
  line-height:1.55;
  margin-bottom:30px;
}
/* ── HERO FADE-IN ── */
@keyframes heroFadeIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
.hero-text{
  animation:heroFadeIn 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay:150ms;
}

/* ── HERO ANNOUNCEMENT ── */
.hero-announcement{
  position:relative;
  max-width:320px;
  isolation:isolate;
  overflow:hidden;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(162,94,186,0.20);
  border-radius:20px;
  padding:16px 20px;
  display:flex;align-items:center;gap:16px;
  cursor:pointer;
  text-decoration:none;
  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 300ms ease, border-color 300ms ease;
  box-shadow:
    0 4px 24px rgba(42,27,53,0.10),
    0 1px 4px rgba(42,27,53,0.06);
}
@media (hover:hover){.hero-announcement:hover{
  transform:translateY(-3px);
  border-color:rgba(162,94,186,0.4);
  box-shadow:
    0 8px 32px rgba(42,27,53,0.13),
    0 0 0 3px rgba(162,94,186,0.12);
}}
.hero-announcement-body{flex:1;text-align:left;}
.hero-announcement-label{
  display:inline-block;
  font-family:'BauhausRegular', sans-serif;
  font-size:11px;
  font-weight:bold;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--violet-dark);
  margin-bottom:9px;
}
.hero-announcement p{
  font-size:15.5px;
  font-weight:400;
  color:var(--text);
  line-height:1.6;
  margin:0;
}
.announcement-emphasis{color:var(--violet-dark);font-weight:700;}
/* ── BOTTONI ── */
.btn{
  padding:16px 36px;
  border-radius:var(--radius-btn);
  font-family:'BauhausRegular', sans-serif;
  font-weight:400;
  font-size:16px;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:background 140ms ease-out, transform 140ms ease-out, box-shadow 220ms ease-out;
  display:inline-block;
}
.btn.primary{
  background:var(--violet-dark);color:#fff;border:none;
  box-shadow:0 6px 16px rgba(162,94,186,0.25);
}
@media (hover:hover){.btn.primary:hover{
  background:var(--violet-deep);
  box-shadow:0 10px 24px rgba(162,94,186,0.35);
}}
.btn.primary:active{
  transform:scale(0.98);
}

/* ── SEZIONI ── */
section{padding:120px 0;}

/* ── CORSI HEADER ── */
#corsi{
  padding-top:56px;
  /* Tinta strettamente più scura, canale per canale, del fondale impresso nel
     video decodificato (~rgb(243,231,246)): con mix-blend-mode:darken il
     rettangolo del video sparisce matematicamente. */
  background:linear-gradient(180deg, #F1E5F4 0%, #F1E5F4 78%, var(--bg-malva) 100%);
}
.corsi-header{
  display:flex;justify-content:flex-start;align-items:center;gap:50px;margin-bottom:72px;
}
.corsi-header .head{margin-bottom:0;text-align:left;}
.corsi-header h2{
  font-size:42px;
  font-family:'Bauhaus93', sans-serif;
  color:var(--night);
  font-weight:400;
  line-height:1.15;
}
/* ── CORSI VIDEO ── */
.hero-video-wrap{
  flex-shrink:0;
  width:clamp(260px, 30vw, 480px);
  /* Backdrop del blend, identico al fondo piatto di #corsi: rende il blend
     indipendente dagli stacking context creati dalla transition d'ingresso. */
  background:#F1E5F4;
}
.hero-video-wrap video{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
  /* min(video, fondo): il fondale chiaro del video coincide col backdrop,
     il tratto scuro dell'animazione resta. Composito su GPU, fluido ovunque. */
  mix-blend-mode:darken;
}

/* ── CARDS CORSI ── */
.grid-4{
  display:flex;flex-wrap:nowrap;gap:32px;
}

.card{
  --course-color:var(--violet);
  --course-soft:rgba(210,148,247,0.14);
  --course-shadow:rgba(162,94,186,0.12);
  background:rgba(255,255,255,0.62);
  border:1px solid rgba(210,148,247,0.22);
  border-radius:var(--radius-card);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  flex-shrink:0;
  height:490px;
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  transition:transform 350ms ease-out, box-shadow 350ms ease-out, border-color 350ms ease-out, background 350ms ease-out;
  cursor:default;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86),
    0 14px 34px rgba(42,27,53,0.07),
    0 6px 18px var(--course-shadow);
}
.card:nth-child(1){
  --course-color:#2B6CB0;
  --course-soft:rgba(111,168,247,0.14);
  --course-shadow:rgba(111,168,247,0.12);
}
.card:nth-child(2){
  --course-color:#A63D58;
  --course-soft:rgba(240,111,143,0.14);
  --course-shadow:rgba(240,111,143,0.12);
}
.card:nth-child(3){
  --course-color:#8B6914;
  --course-soft:rgba(244,190,69,0.16);
  --course-shadow:rgba(244,190,69,0.13);
}
.card:nth-child(4){
  --course-color:#844F9C;
  --course-soft:rgba(162,94,186,0.14);
  --course-shadow:rgba(162,94,186,0.12);
}
@media (hover:hover){.card:hover{
  transform:translateY(-8px) scale(1.05);
  background:rgba(255,255,255,0.72);
  border-color:color-mix(in srgb, var(--course-color) 46%, rgba(255,255,255,0.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 18px 42px rgba(42,27,53,0.09),
    0 8px 22px var(--course-shadow);
  z-index:2;
}}
.card.expanded{
  transform:none;
  cursor:pointer;
  background:rgba(255,255,255,0.68);
  border-color:color-mix(in srgb, var(--course-color) 30%, rgba(255,255,255,0.82));
  border-top:3px solid color-mix(in srgb, var(--course-color) 62%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 16px 40px rgba(42,27,53,0.09),
    0 8px 22px var(--course-shadow);
}
@media (min-width:900px){
  .card.expanded{flex-direction:row;align-items:stretch;height:490px;min-height:unset;}
  .card.expanded .card-img-wrap{width:40%;flex-shrink:0;min-height:unset;border-right:1px solid rgba(42,27,53,0.08);}
  .card.expanded .card-content{flex:1;padding:36px 44px 34px;}
}

/* Contenuto card */
.card-content{padding:32px;flex:1;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;}
.card h3{
  position:relative;
  font-size:26px;
  font-family:'Bauhaus93', sans-serif;
  font-weight:400;
  color:var(--night);
  margin-bottom:18px;
  text-align:center;
  white-space:normal;overflow-wrap:break-word;
}
.card:not(.expanded) h3::after{
  content:'';
  display:block;
  width:150px;
  max-width:72%;
  height:1px;
  margin:22px auto 0;
  background:color-mix(in srgb, var(--course-color) 54%, transparent);
  opacity:0.32;
  transition:opacity 350ms ease-out, background 350ms ease-out;
}
@media (hover:hover){.card:not(.expanded):hover h3::after{
  background:var(--course-color);
  opacity:0.7;
}}
.card.expanded h3{font-size:clamp(34px, 3.3vw, 50px);line-height:1.02;margin-bottom:14px;text-align:left;}
.card.expanded h3::after{display:none;}
.course-meta{
  display:none;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:18px;
}
.course-meta span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:7px 13px;
  border-radius:999px;
  background:var(--course-soft);
  color:var(--course-color);
  font-size:13px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.course-meta span:first-child{
  background:color-mix(in srgb, var(--course-color) 12%, #fff);
  color:color-mix(in srgb, var(--course-color) 78%, var(--night));
}
.card p.intro{font-size:16px;color:var(--text);line-height:1.6;margin-bottom:0;}
.card.expanded p.intro{font-size:15px;line-height:1.55;color:var(--text-secondary);max-width:660px;}
.card:not(.expanded) p.intro{
  text-align:center;color:var(--text-secondary);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Fade-in contenuto espanso */
.card .card-content{opacity:1;transition:opacity 0.25s ease-out;}
.card-details{display:none;}
.card.expanded .course-meta{display:flex;}
.card.expanded .card-details{display:block;}

.card-content h3,
.card-content p.intro,
.card-content .course-meta,
.card-content .card-details,
.card-content .card-toggle {
  opacity: 1;
  transform: none;
}

.card.expanded .card-content h3 { animation: staggerFade 300ms 220ms both cubic-bezier(0.25, 1, 0.5, 1); }
.card.expanded .card-content .course-meta { animation: staggerFade 300ms 270ms both cubic-bezier(0.25, 1, 0.5, 1); }
.card.expanded .card-content p.intro { animation: staggerFade 300ms 320ms both cubic-bezier(0.25, 1, 0.5, 1); }
.card.expanded .card-content .card-details { animation: staggerFade 300ms 380ms both cubic-bezier(0.25, 1, 0.5, 1); }
.card.expanded .card-content .card-toggle { animation: staggerFade 300ms 430ms both cubic-bezier(0.25, 1, 0.5, 1); }

@keyframes staggerFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.card-details ul{list-style:none;padding:0;margin-top:16px;}
.card-details li{position:relative;padding-left:20px;margin-bottom:8px;font-size:14px;color:var(--text-secondary);line-height:1.4;}
.card-details li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.65em;
  width:9px;
  height:3px;
  border-radius:999px;
  background:var(--course-color);
}
.card-toggle{
  border:0;
  background:transparent;
  padding:10px 0;
  margin-top:auto;
  font-family:'BauhausRegular', sans-serif;
  font-size:16px;
  font-weight:400;
  color:var(--violet-dark);
  color:color-mix(in srgb, var(--course-color) 78%, var(--night));
  cursor:pointer;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--course-color) 38%, #fff);
  text-underline-offset:8px;
  text-align:center;
  letter-spacing:0.01em;
}
.card:not(.expanded) .card-toggle::after{
  content:"";
  position:absolute;
  inset:0;
}
.card-toggle .toggle-close{display:none;}
.card.expanded .card-toggle .toggle-open{display:none;}
.card.expanded .card-toggle .toggle-close{display:inline;}
@media (hover:hover){.card-toggle:hover{
  color:color-mix(in srgb, var(--course-color) 68%, var(--night));
}}
.card.expanded .card-toggle{text-align:left;}

.card-img-wrap{
  padding:26px 20px 10px;
  display:flex;justify-content:center;align-items:center;position:relative;min-height:200px;
  isolation:isolate;
  background:transparent;
  overflow:hidden;
}
.card-img-wrap img{height:200px;width:auto;object-fit:contain;}
.card.expanded .card-img-wrap img{height:clamp(250px, 27vw, 330px);}

/* ── SEDE — SPLIT ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.split h2, #contatti > .container > h2{
  font-size:42px;
  font-family:'Bauhaus93', sans-serif;
  color:var(--night);
  font-weight:400;
  line-height:1.15;
  margin-bottom:48px;
}
.location-heading{text-align:left;margin-bottom:24px;}
.info-list{margin-top:30px;display:grid;gap:24px;}
.info-item{display:flex;gap:16px;}

.info-icon{
  width:48px;height:48px;
  background:rgba(210,148,247,0.15);
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  color:var(--violet);
  flex-shrink:0;
}
.info-item b{font-weight:700;font-size:16px;color:var(--text);display:block;margin-bottom:4px;}
.info-item p{font-size:15px;color:var(--text-secondary);}
.transport-list{margin-top:15px;}
.transport-item{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.transport-item:last-child{margin-bottom:0;}
.transport-text{font-weight:600;font-size:15px;color:var(--text);}

.map-card{
  position:relative;border-radius:var(--radius-card);overflow:hidden;
  aspect-ratio:1/1;
  border:1px solid rgba(210,148,247,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86),
    0 14px 34px rgba(42,27,53,0.07),
    0 6px 18px rgba(162,94,186,0.12);
}
.map-bg-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0.38;
  pointer-events:none;
}
.map-placeholder{
  position:absolute;inset:0;
  background: linear-gradient(135deg, rgba(243,232,247,0.72) 0%, rgba(248,243,252,0.65) 40%, rgba(210,148,247,0.18) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;
}
.map-title{margin-top:16px;font-family:'Bauhaus93',sans-serif;font-size:24px;color:var(--violet);}
.map-button{margin-top:20px;}

/* ── CONTATTI ── */
.contact-section-title{
  font-size:28px;
  font-family:'Bauhaus93', sans-serif;
  font-weight:400;
  color:var(--night);
  margin-bottom:24px;
}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px,1fr));gap:32px;}
.contact-sub-block {margin-bottom:48px;}
.contact-sub-block:last-child {margin-bottom:0;}

.contact-card{
  background:#fff;
  border:1px solid rgba(162,94,186,0.10);
  border-radius:var(--radius-card);
  padding:32px 24px;text-align:center;
  transition:transform 350ms ease-out, border-color 350ms ease-out, box-shadow 350ms ease-out;
  box-shadow:0 2px 12px rgba(42,27,53,0.05);
}
@media (hover:hover){.contact-card:hover{
  border-color:rgba(162,94,186,0.28);
  transform:translateY(-5px);
  box-shadow:0 10px 28px rgba(42,27,53,0.08), 0 4px 12px rgba(162,94,186,0.10);
}}

.contact-card svg{
  color:var(--violet);
  margin-bottom:16px;
  background:rgba(210, 148, 247, 0.15);
  padding:12px;
  width:56px;
  height:56px;
  border-radius:16px;
  display:inline-block;
  transition:background 350ms ease-out, transform 350ms ease-out;
}
@media (hover:hover){.contact-card:hover svg{
  background:rgba(162,94,186,0.22);
  transform:scale(1.08);
}}
.contact-card b{display:block;margin-bottom:4px;font-size:15px;font-weight:700;color:var(--text);}
.contact-card a, .contact-card span{color:var(--violet-dark);font-weight:700;font-size:15px;transition:color 350ms ease-out;}

/* ── INSEGNANTI / STAFF ── */
.staff-header{margin-bottom:56px;contain:paint;}
#insegnanti h2{
  font-size:42px;
  font-family:'Bauhaus93', sans-serif;
  color:var(--night);
  font-weight:400;
  line-height:1.15;
  margin-bottom:20px;
}
.staff-intro{
  max-width:660px;
  font-size:18px;
  color:var(--text-secondary);
  line-height:1.6;
}
.staff-panel{
  overflow:hidden;
  border-radius:var(--radius-card);
  background:rgba(255,255,255,0.62);
  border:1px solid rgba(210,148,247,0.22);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86),
    0 14px 34px rgba(42,27,53,0.07),
    0 6px 18px rgba(162,94,186,0.12);
}
.staff-cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}
.staff-col{
  padding:42px 40px;
  border-right:1px solid rgba(162,94,186,0.13);
  transition:background 350ms ease-out;
}
.staff-col:last-child{border-right:none;}
@media (hover:hover){.staff-col:hover{
  background:rgba(210,148,247,0.08);
}}
.staff-col h3{
  position:relative;
  font-family:'BauhausRegular', system-ui, sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:0.005em;
  color:var(--night);
  margin-bottom:24px;
  padding-bottom:16px;
  transition:color 350ms ease-out;
}
@media (hover:hover){.staff-col:hover h3{
  color:var(--violet-dark);
}}
.staff-col h3::after{
  content:'';
  position:absolute;left:0;bottom:0;
  width:74px;height:2px;border-radius:2px;
  background:var(--violet);
  transform:scaleX(0.54);
  transform-origin:left center;
  transition:transform 350ms cubic-bezier(0.25, 1, 0.5, 1), background 350ms ease-out;
}
@media (hover:hover){.staff-col:hover h3::after{
  transform:scaleX(1);
  background:var(--fuchsia);
}}
.staff-col p{
  font-size:15px;
  color:var(--text-secondary);
  line-height:1.62;
  transition:color 350ms ease-out;
}
@media (hover:hover){.staff-col:hover p{
  color:var(--text);
}}
.staff-director{
  position:relative;
  overflow:hidden;
  contain:paint;
  padding:34px 40px 34px 44px;
  border-top:1px solid rgba(162,94,186,0.16);
  background:rgba(210,148,247,0.07);
  transition:background 350ms ease-out;
}
.staff-director::before{
  content:'';
  position:absolute;left:44px;top:0;width:72px;height:3px;
  background:var(--violet);
  transform:scaleX(0.58);
  transform-origin:left center;
  transition:transform 350ms cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover:hover){.staff-director:hover{
  background:rgba(210,148,247,0.12);
}}
@media (hover:hover){.staff-director:hover::before{
  transform:scaleX(1);
}}

.staff-director h3{
  font-family:'Bauhaus93', sans-serif;
  font-weight:400;
  font-size:25px;
  color:var(--night);
  margin-bottom:10px;
  transition:color 350ms ease-out;
}
@media (hover:hover){.staff-director:hover h3{
  color:var(--violet-dark);
}}
.staff-director p{
  max-width:780px;
  font-size:15.5px;
  color:var(--text-secondary);
  line-height:1.62;
}

/* ── FOOTER ── */
footer{
  background:var(--bg-malva);
  color:var(--text-secondary);
  padding:96px 0 48px;
  padding-bottom: max(48px, calc(48px + env(safe-area-inset-bottom)));
  border-top:1px solid var(--border);
}
.foot-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:48px;
  border-bottom:1px solid var(--border);
  padding-bottom:48px;
}
.foot-logo{flex:0 1 180px;}
.foot-logo img{width:180px;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.05));}
.foot-links{display:flex;gap:40px;}
.foot-col h4{
  color:var(--violet-dark);
  margin-bottom:16px;
  text-transform:uppercase;
  font-family:'BauhausRegular', sans-serif;
  font-size:11px;
  letter-spacing:0.22em;
  font-weight:700;
}
.foot-col a{
  display:block;margin-bottom:8px;
  color:var(--text-secondary);
  font-size:14px;
  transition:color 350ms ease-out;
}
@media (hover:hover){.foot-col a:hover{color:var(--violet-dark);}}

.foot-copyright {
  text-align:center;
  color:var(--text-muted);
  font-size:14px;
  margin-top:20px;
}

/* ── SFONDI SEZIONI ── */
#corsi {
  /* Fascia piatta strettamente più scura del fondale decodificato del video
     (~rgb(243,231,246)): con mix-blend-mode:darken il rettangolo sparisce. */
  background: linear-gradient(180deg, #F1E5F4 0%, #F1E5F4 78%, var(--bg-malva) 100%);
}
#insegnanti {
  background: linear-gradient(180deg, var(--bg-malva) 0%, var(--bg-white) 32%, var(--bg-white) 68%, rgb(94.9% 91.7% 96.9%) 100%);
}
#sede {
  background: linear-gradient(180deg, rgb(94.9% 91.7% 96.9%) 0%, var(--bg-malva) 34%, var(--bg-white) 100%);
}
#contatti {
  background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-lavanda) 100%);
}

/* ── ANIMAZIONI SCROLL ── */
[data-animate] {
  transition:
    opacity 800ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 800ms cubic-bezier(0.25, 1, 0.5, 1);
}
[data-animate].animate-ready {
  opacity: 0;
  transform: translateY(24px);
}
[data-animate].is-visible {
  opacity: 1;
  /* `none` e non translateY(0): a transizione finita non resta uno stacking
     context che confinerebbe il mix-blend-mode del video corsi. */
  transform: none;
}
[data-animate][data-delay="1"] { transition-delay: 120ms; }
[data-animate][data-delay="2"] { transition-delay: 220ms; }
[data-animate][data-delay="3"] { transition-delay: 320ms; }
[data-animate][data-delay="4"] { transition-delay: 420ms; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto;}
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    transition-delay:0ms !important;
  }
  .hero-text { animation: none; }
  [data-animate] { transition: none; }
  [data-animate].animate-ready { opacity: 1; transform: none; }
}

/* ── TOUCH FEEDBACK ── */
@media (hover: none) {
  .card:active{
    transform: scale(0.985);
    transition: transform 120ms ease-out;
  }
  .contact-card:active{
    transform: scale(0.985);
    transition: transform 120ms ease-out;
  }
  .hero-announcement:active{
    transform: scale(0.985);
    transition: transform 120ms ease-out;
  }
  .staff-col:active{
    background: rgba(210,148,247,0.10);
    transition: background 120ms ease-out;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: none) {
  .card:active,
  .contact-card:active,
  .hero-announcement:active{
    transform:none;
  }
}

/* ── RESPONSIVE ── */
@media (max-width:1199px){
  .grid-4{flex-wrap:wrap;height:auto;min-height:unset;}
  /* Due card restano affiancate finché hanno una larghezza leggibile.
     Solo la card aperta usa l'intera riga per i dettagli. */
  .card:not(.expanded){width:calc((100% - 32px) / 2);min-height:unset;}
  /* La card mantiene il proprio posto nell'ordine dei corsi anche quando
     si allarga per mostrare i dettagli. */
  .card.expanded{width:100%;}
}
/* Nella fascia a due colonne la card aperta riempie la PROPRIA riga: la
   compagna di riga (coppie 1-2 e 3-4) si nasconde, come su desktop dove le
   altre card lasciano il posto a quella aperta. Senza questa regola la card
   di destra, diventando larga 100%, andrebbe a capo sotto una riga monca. */
@media (min-width:720px) and (max-width:1199px){
  .card.expanded:nth-child(odd) + .card{display:none;}
  .card:nth-child(odd):has(+ .card.expanded){display:none;}
}
@media (max-width:719px){
  .card:not(.expanded){width:100%;}
}
@media (max-width:899px){
  section{padding:80px 0;}
  .container{padding:0 20px;}

  .nav{
    justify-content:space-between;
    padding:8px 20px;
    min-height:56px;
    flex-wrap:nowrap;
    gap:14px;
  }
  .nav-logo img{width:auto;height:40px;}
  .nav-links{
    gap:14px;
    font-size:12px;
    letter-spacing:0.05em;
  }

  .hero{
    /* Altezza data dal contenuto + spazio immagine: niente vuoto morto
       tra l'avviso e l'immagine sugli schermi alti */
    height:auto;
    min-height:0;
    max-height:none;
  }
  /* Fondale mobile dedicato, continuo con la hero e senza un riquadro. */
  .hero::after{
    /* Ripristina la composizione mobile approvata: mostra l'illustrazione
       intera sotto al contenuto, senza ritagliarla per riempire la hero. */
    background:url('hero2-mobile.webp?v=20260713-2') center bottom / min(100%, 520px) auto no-repeat;
  }
  .hero::before{
    background:
      linear-gradient(180deg, rgba(250,247,252,0.78) 0%, rgba(250,247,252,0.12) 46%, transparent 62%, rgba(243,232,247,0.34) 80%, #f3e8f7 100%),
      linear-gradient(90deg, rgba(250,247,252,0.30), transparent 28%, transparent 72%, rgba(238,226,242,0.32));
  }
  /* Specificità (0,3,0): deve battere ".hero .container" che azzera i padding verticali */
  .hero .container.hero-inner{
    /* Spazio appena sufficiente sotto la barra fissa: la hero parte subito
       con il messaggio, senza la fascia vuota che si vedeva su smartphone. */
    padding-top:max(72px, calc(54px + env(safe-area-inset-top)));
    /* riserva lo spazio verticale dell'immagine (h ≈ 82% della larghezza,
       meno la fascia sfumata in alto) così il testo non la copre mai */
    padding-bottom:clamp(220px, 60vw, 300px);
  }
  .hero-text{width:100%;max-width:480px;padding-left:0;}
  .hero .container{padding:0 20px;}
  .hero-title{font-size:36px;line-height:1.08;}
  .hero-subtitle{font-size:16px;margin-bottom:24px;}
  .hero-announcement{max-width:100%;padding:15px 18px;gap:13px;border-radius:18px;}
  .hero-announcement p{font-size:15px;font-weight:500;line-height:1.55;}
  .hero-announcement-label{font-size:13px;}

  .corsi-header h2,
  .split h2,
  #insegnanti h2,
  #contatti > .container > h2{font-size:32px;}
  .contact-section-title{font-size:22px;}
  .staff-intro{font-size:16px;}
  .staff-cols{grid-template-columns:1fr;}
  .staff-col{padding:30px 26px;border-right:none;border-bottom:1px solid rgba(162,94,186,0.13);}
  .staff-col:last-child{border-bottom:none;}
  .staff-col h3{font-size:18px;margin-bottom:20px;}
  .staff-director{padding:30px 24px 30px 28px;}

  #corsi{padding-top:48px;}
  .corsi-header{flex-direction:column;text-align:center;gap:20px;margin-bottom:40px;}
  .corsi-header .head{text-align:center;margin-bottom:0;}
  .card{height:auto;min-height:unset;width:100%;}
  .card,
  .staff-panel{
    background:rgba(255,255,255,0.92);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .grid-4{height:auto;min-height:unset;}
  .card.expanded p.intro{max-width:none;}
  .card.expanded .card-content{min-width:0;padding:32px;}
  .card.expanded h3{font-size:36px;text-align:left;}
  .card.expanded p.intro{font-size:16px;line-height:1.65;}
  .card.expanded .card-img-wrap{min-height:260px;padding:28px 16px 10px;}
  .card.expanded .card-img-wrap img{height:clamp(230px, 58vw, 320px);}
  .course-meta{gap:10px;margin-bottom:22px;}
  .course-meta span{min-height:32px;padding:8px 14px;font-size:14px;}
  .card-details ul{margin-top:22px;}
  .card-details li{font-size:15px;margin-bottom:11px;}
  .card-img-wrap{min-height:190px;padding:24px 16px 10px;}
  .card-img-wrap img{height:150px;}
  .card h3{font-size:22px;}
  .card-content{padding:24px;}

  .split{grid-template-columns:1fr;gap:40px;}
  .map-card{width:100%;aspect-ratio:4/3;min-height:320px;}

  .contact-grid{grid-template-columns:1fr;gap:16px;}
  .contact-card{padding:24px 20px;}
  .contact-grid + .contact-grid{margin-top:0;}

  .foot-top{flex-direction:column;gap:32px;padding-bottom:32px;margin-bottom:32px;}
  .foot-logo{flex-basis:140px;}
  .foot-logo img{width:140px;}
  .foot-links{flex-wrap:wrap;gap:28px 36px;}
  .foot-col{min-width:140px;}
  .foot-col a{overflow-wrap:anywhere;}
  .foot-copyright{font-size:13px;line-height:1.5;}
}

/* Una finestra desktop stretta non è uno smartphone: qui l'artwork resta
   un fondale a tutta larghezza. La composizione con l'illustrazione intera
   sotto al testo rimane riservata ai telefoni. */
@media (min-width:600px) and (max-width:899px){
  .hero{
    height:clamp(620px, 86vw, 780px);
    min-height:620px;
    max-height:none;
  }
  .hero::after{
    background:url('hero2ph.webp?v=20260714-2') right bottom / cover no-repeat;
  }
  .hero::before{
    background:
      linear-gradient(180deg, rgba(250,247,252,0.62) 0%, transparent 24%, transparent 66%, #f3e8f7 100%),
      linear-gradient(90deg, #faf7fc 0%, #faf7fc 29%, rgba(250,247,252,0.70) 39%, rgba(250,247,252,0.18) 51%, transparent 63%);
  }
  .hero .container.hero-inner{
    padding-top:clamp(96px, 12vh, 122px);
    padding-bottom:0;
  }
  .hero .container{padding-inline:clamp(32px, 4vw, 52px);}
  .hero-text{max-width:530px;}
  .hero-title{font-size:clamp(38px, 5vw, 52px);}
  .hero-subtitle{font-size:18px;}
  .hero-announcement{max-width:500px;}
}

@media (max-width:430px){
  .nav-links{gap:10px;font-size:11px;letter-spacing:0.03em;}
  .hero-title{font-size:32px;}
  .hero-announcement{padding:14px 16px;align-items:flex-start;}
  .hero-announcement p{font-size:14px;font-weight:500;line-height:1.55;}
  section{padding:64px 0;}
  #corsi{padding-top:40px;}
  .corsi-header h2,
  .split h2,
  #insegnanti h2,
  #contatti > .container > h2{font-size:28px;}
}

/* ── MOBILE NAV SAFE AREA ── */
@media (max-width:899px){
  .nav{
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}