/* CSS condiviso delle pagine corso: base copiata dalla home (cba078a+) + componenti pagina corso. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-latin-ext.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: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-latin.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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-latin.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;
}
html,body{margin:0} img{max-width:100%} [hidden]{display:none!important}
/* Layout: una "porta" per principio. A sinistra la frase, al centro l'anello con la tenda di parole, a destra la vita di tutti i giorni. */
:root{
  --paper:#F6FAFD;      /* fondo: bianco con un velo d'azzurro */
  --paper-2:#EAF4FB;    /* superfici secondarie */
  --ink:#0B0F14;        /* nero ZenCircle */
  --ink-2:#344150;
  --ink-3:#5A6876;
  --line:#D3E3EE;
  --dot:#CFE1EC;
  --azzurro:#19B5FE;    /* azzurro ZenCircle: solo grafica, mai testo su chiaro */
  --velo:#DDF4FF;       /* alone dietro l'anello */
  --giallo:#FFD60A;     /* solo per la prova */
  --on-giallo:#0B0F14;
  --logo-filter:none;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter:clamp(16px, 4vw, 48px);
  --maxw:1240px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B0F14; --paper-2:#111A23; --ink:#EEF5FA; --ink-2:#B9C6D1; --ink-3:#8E9CA9;
    --line:#1F2C38; --dot:#18232E; --velo:#0F2A3C; --logo-filter:invert(1); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0B0F14; --paper-2:#111A23; --ink:#EEF5FA; --ink-2:#B9C6D1; --ink-3:#8E9CA9;
  --line:#1F2C38; --dot:#18232E; --velo:#0F2A3C; --logo-filter:invert(1); color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--azzurro); outline-offset:3px; border-radius:4px}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- testata ---------- */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; display:flex; align-items:center; gap:clamp(12px,2.4vw,32px);
  padding-block:12px; padding-inline:var(--gutter);
  background:var(--paper); background:color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.brand img{width:40px; height:40px; filter:var(--logo-filter)}
.brand-name{font-family:var(--f-display); font-size:1.15rem; font-weight:500; line-height:1.1; display:flex; flex-direction:column}
.brand-name small{font-family:var(--f-body); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.nav{display:flex; gap:clamp(12px,1.8vw,26px); font-size:.92rem; white-space:nowrap}
@media (max-width: 1100px){ .nav{font-size:.86rem} .brand-name small{display:none} }
.nav a{text-decoration:none; color:var(--ink-2)}
.nav a:hover{color:var(--ink); text-decoration:underline; text-decoration-color:var(--azzurro); text-decoration-thickness:2px; text-underline-offset:6px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; font:600 1rem/1 var(--f-body);
  padding:15px 24px; text-decoration:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease}
.btn-giallo{background:var(--giallo); color:var(--on-giallo); box-shadow:0 1px 0 rgba(11,15,20,.25)}
.btn-giallo:hover{transform:translateY(-1px); box-shadow:0 6px 18px -6px rgba(255,214,10,.8)}
.btn-s{padding:10px 16px; font-size:.88rem}
.btn-line{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.tema{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px; flex:none}
.tema button{width:32px; height:32px; border-radius:50%; border:0; background:transparent; color:var(--ink-3); display:grid; place-items:center; cursor:pointer; transition:background .15s, color .15s}
.tema button svg{width:16px; height:16px}
.tema button:hover{color:var(--ink)}
.tema button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
/* 11/10/2026: sul telefono il selettore tema sta nel Menu (in testata copriva il marchio) */
.tema-menu{display:none}
@media (max-width: 760px){
  .top > .tema{display:none}
  .menu nav .tema-menu{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; padding:10px 6px 2px 12px; border:0; border-top:1px solid var(--line); border-radius:0}
  .tema-menu .tema-et{font-size:.9rem; color:var(--ink-2)}
  .tema-menu .tema-scelte{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px}
}
.menu{display:none; position:relative}
.menu summary{list-style:none; cursor:pointer; font-weight:600; font-size:.9rem; padding:8px 4px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute; right:0; top:calc(100% + 10px); display:flex; flex-direction:column; gap:4px; min-width:200px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:0 18px 40px -20px rgba(11,15,20,.35)}
.menu nav a{padding:10px 12px; border-radius:8px; text-decoration:none}
.menu nav a:hover{background:var(--paper-2)}
@media (max-width: 1023px){ .nav{display:none} .menu{display:block} }
.btn{white-space:nowrap}
@media (max-width: 420px){ .top .btn-s{display:none} }

/* ---------- le porte ---------- */
.porte{background-image:radial-gradient(var(--dot) 1px, transparent 1.3px); background-size:22px 22px;
  padding-inline:var(--gutter); padding-block:clamp(16px,3vw,32px) clamp(24px,4vw,48px); border-bottom:1px solid var(--line)}
.porte-grid{max-width:var(--maxw); margin:0 auto; display:grid; gap:clamp(16px,3vw,48px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.78fr);
  grid-template-areas:"copy stage aside" "nav nav nav"; align-items:center}
.door-copy{grid-area:copy; min-width:0; view-transition-name:door-copy}
.stage{grid-area:stage; position:relative; height:min(680px, 76vh); height:min(680px, 76svh); min-height:420px; min-width:0}
.aside{grid-area:aside; align-self:end; min-width:0; display:grid; gap:22px; padding-bottom:12px; view-transition-name:door-aside}
.doors-nav{grid-area:nav; min-width:0}

.label{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px; margin:0 0 18px}
.label .nome{font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:underline; text-decoration-color:var(--azzurro); text-decoration-thickness:3px; text-underline-offset:7px}
.label .conta{font-size:.76rem; color:var(--ink-3); letter-spacing:.04em; font-variant-numeric:tabular-nums}
.frase{font-family:var(--f-display); font-weight:400; font-optical-sizing:auto; font-size:clamp(2.3rem, 1.3rem + 3.1vw, 4.4rem);
  line-height:1.02; letter-spacing:-.02em; margin:0 0 20px; text-wrap:balance}
.riga{font-size:clamp(1rem, .95rem + .25vw, 1.15rem); color:var(--ink-2); margin:0; max-width:34ch; text-wrap:pretty}
.cta-row{margin:28px 0 0; display:flex; flex-wrap:wrap; gap:12px}

canvas#tenda{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; touch-action:pan-y}
.porte{position:relative}
.porte-grid{position:relative; z-index:1; pointer-events:none}
.porte-grid > .door-copy, .porte-grid > .aside, .porte-grid > .doors-nav{pointer-events:auto}

.vita h2{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px}
.vita p{font-family:var(--f-display); font-size:1.2rem; line-height:1.35; margin:0; text-wrap:pretty}
.suono{justify-self:start; display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; font:500 .82rem/1 var(--f-body); cursor:pointer}
.suono svg{width:16px; height:16px}
.suono[aria-pressed="true"]{border-color:var(--azzurro); color:var(--ink)}

.doors-nav{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding-top:8px}
.freccia{display:inline-flex; align-items:center; gap:10px; background:transparent; border:0; color:var(--ink); cursor:pointer;
  font:500 .95rem/1.2 var(--f-body); padding:10px 4px; min-width:0}
.freccia .tondo{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--ink); flex:none; transition:background .15s, color .15s}
.freccia:hover .tondo{background:var(--ink); color:var(--paper)}
.freccia svg{width:18px; height:18px}
.freccia .dove{display:flex; flex-direction:column; text-align:left}
.freccia.avanti .dove{text-align:right}
.freccia .dove small{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.tacche{list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:clamp(6px,1.6vw,22px); flex-wrap:wrap}
.tacche button{background:none; border:0; cursor:pointer; color:var(--ink-3); font:500 .82rem/1 var(--f-body); padding:10px 4px; display:flex; align-items:center; gap:8px}
.tacche button::before{content:""; width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor}
.tacche button[aria-current="step"]{color:var(--ink)}
.tacche button[aria-current="step"]::before{background:var(--azzurro); border-color:var(--azzurro)}
.tacche .ultima button[aria-current="step"]::before{background:var(--giallo); border-color:var(--giallo)}

@media (max-width: 899px){
  /* telefono: tutto il testo del principio insieme, poi la cascata, poi le frecce: una sola schermata */
  .porte-grid{grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "aside" "stage" "nav"; gap:10px}
  .stage{height:clamp(310px, 46vh, 440px); height:clamp(310px, 46svh, 440px); min-height:0}
  .label{margin-bottom:10px}
  .frase{margin-bottom:10px; font-size:clamp(1.9rem, 1.3rem + 2.6vw, 2.6rem)}
  .riga{font-size:1rem}
  .aside{padding-bottom:0; gap:10px; grid-template-columns:minmax(0,1fr) auto; align-items:end}
  .vita h2{margin-bottom:4px}
  .vita p{font-size:1.05rem}
  .suono{padding:7px 10px}
  .suono #suonoTesto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .tacche button span{display:none}
  .tacche button{padding:12px 6px}
  .freccia .dove{display:none}
}

/* view transitions: solo il testo della porta scorre nella direzione scelta */
@keyframes esce-sx{to{opacity:0; transform:translateX(-28px)}}
@keyframes entra-dx{from{opacity:0; transform:translateX(28px)}}
@keyframes esce-dx{to{opacity:0; transform:translateX(28px)}}
@keyframes entra-sx{from{opacity:0; transform:translateX(-28px)}}
::view-transition-group(door-copy), ::view-transition-group(door-aside){animation-duration:.42s; animation-timing-function:cubic-bezier(.2,.7,.2,1)}
html:active-view-transition-type(forward)::view-transition-old(door-copy),
html:active-view-transition-type(forward)::view-transition-old(door-aside){animation:.32s ease-in both esce-sx}
html:active-view-transition-type(forward)::view-transition-new(door-copy),
html:active-view-transition-type(forward)::view-transition-new(door-aside){animation:.42s cubic-bezier(.2,.7,.2,1) .06s both entra-dx}
html:active-view-transition-type(backward)::view-transition-old(door-copy),
html:active-view-transition-type(backward)::view-transition-old(door-aside){animation:.32s ease-in both esce-dx}
html:active-view-transition-type(backward)::view-transition-new(door-copy),
html:active-view-transition-type(backward)::view-transition-new(door-aside){animation:.42s cubic-bezier(.2,.7,.2,1) .06s both entra-sx}
:root{view-transition-name:none}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none!important}
}

/* ---------- sezioni ---------- */
.sez{padding-inline:var(--gutter); padding-block:clamp(56px,8vw,112px)}
.sez + .sez{border-top:1px solid var(--line)}
.wrap{max-width:var(--maxw); margin:0 auto}
.occhiello{font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px}
.sez h2{font-family:var(--f-display); font-weight:400; font-size:clamp(2rem, 1.4rem + 2.2vw, 3.3rem); line-height:1.05; letter-spacing:-.015em; margin:0 0 18px; text-wrap:balance; max-width:20ch}
.intro{font-size:1.1rem; color:var(--ink-2); max-width:58ch; margin:0}

.passi{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,3vw,40px); counter-reset:passo}
.passi li{counter-increment:passo; border-top:2px solid var(--ink); padding-top:18px; min-width:0}
.passi li::before{content:counter(passo); font-family:var(--f-display); font-size:3rem; line-height:1; display:block; margin-bottom:14px; color:var(--ink)}
.passi h3{font-size:1.08rem; margin:0 0 6px}
.passi p{margin:0; color:var(--ink-2)}
@media (max-width: 760px){ .passi{grid-template-columns:minmax(0,1fr)} }

.corsi{list-style:none; margin:44px 0 0; padding:0; border-bottom:1px solid var(--line)}
.corso{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr) auto; grid-template-areas:"nome riga freccia" "per riga freccia";
  column-gap:clamp(16px,4vw,56px); row-gap:2px; align-items:center; padding-block:26px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink)}
.c-nome{grid-area:nome; font-family:var(--f-display); font-size:clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height:1.05; letter-spacing:-.01em; transition:transform .25s ease}
.c-per{grid-area:per; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.c-riga{grid-area:riga; color:var(--ink-2); max-width:46ch}
.c-freccia{grid-area:freccia; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); font-size:1.1rem; transition:background .2s, border-color .2s, color .2s}
.corso:hover .c-nome{transform:translateX(6px)}
.corso:hover .c-freccia{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.corso:hover .c-nome{text-decoration:underline; text-decoration-color:var(--azzurro); text-decoration-thickness:3px; text-underline-offset:8px}
@media (max-width: 760px){
  .corso{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"per freccia" "nome freccia" "riga riga"; row-gap:6px}
}
.aziende{margin:22px 0 0; color:var(--ink-2)}
.nota-bozza{margin:18px 0 0; font-size:.88rem; color:var(--ink-3)}
.nota-bozza .etichetta-bozza{margin:0 8px 0 0}

.prova-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,5vw,72px); align-items:start}
@media (max-width: 860px){ .prova-grid{grid-template-columns:minmax(0,1fr)} }
form.modulo{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:clamp(18px,3vw,32px)}
.campo{display:grid; gap:6px; min-width:0}
.campo.lungo{grid-column:1 / -1}
.campo label{font-size:.85rem; font-weight:600}
.campo input, .campo select, .campo textarea{font:inherit; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; width:100%}
.campo input:focus, .campo select:focus, .campo textarea:focus{outline:none; border-color:var(--azzurro); box-shadow:0 0 0 3px color-mix(in srgb, var(--azzurro) 25%, transparent)}
.consenso{grid-column:1 / -1; display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--ink-2)}
.consenso input{margin-top:4px; accent-color:var(--azzurro)}
.invio{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.esito{font-size:.9rem; color:var(--ink-2); margin:0}
@media (max-width: 560px){ form.modulo{grid-template-columns:minmax(0,1fr)} }
.alt{margin-top:22px; font-size:.95rem; color:var(--ink-2)}

.chi-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,72px); align-items:center}
@media (max-width: 860px){ .chi-grid{grid-template-columns:minmax(0,1fr)} .foto-vuota{max-width:300px; aspect-ratio:1/1} }
.foto-vuota{aspect-ratio:4/5; width:100%; max-width:420px; border:1.5px dashed var(--ink-3); border-radius:20px; display:grid; place-items:center; text-align:center;
  padding:24px; color:var(--ink-3); font-size:.9rem; background:var(--paper-2)}
blockquote{margin:26px 0; padding-left:20px; border-left:3px solid var(--azzurro); font-family:var(--f-display); font-size:1.25rem; line-height:1.4}
blockquote footer{font-family:var(--f-body); font-size:.85rem; color:var(--ink-3); margin-top:8px}
.lignaggio{font-size:.88rem; color:var(--ink-3); margin:0}

.sede-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px,3vw,32px); margin-top:40px}
@media (max-width: 760px){ .sede-grid{grid-template-columns:minmax(0,1fr)} }
.da-fare{border:1.5px dashed var(--ink-3); border-radius:18px; padding:24px; background:var(--paper-2); min-width:0}
.da-fare h3{margin:0 0 8px; font-size:1.05rem}
.da-fare p{margin:0; color:var(--ink-2); font-size:.95rem}
.sede{border-top:2px solid var(--ink); padding-top:18px; min-width:0}
.sede h3{margin:0 0 10px; font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.sede .indirizzo{font-family:var(--f-display); font-size:1.8rem; line-height:1.15; margin:0 0 12px}
.etichetta-bozza{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:var(--ink); color:var(--paper); border-radius:999px; padding:4px 10px; margin-bottom:12px}

.piede{padding-inline:var(--gutter); padding-block:40px; background:var(--ink); color:var(--paper)}
.piede .wrap{display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; justify-content:space-between; font-size:.9rem}
.piede a{color:var(--paper)}
/* 11/10/2026 controllo sito: tocco comodo sui link del piè di pagina (telefono) */
@media (max-width: 760px){ .piede a{display:inline-block; padding-block:8px} }

/* parola chiave colorata nei titoli (come nei post): azzurro scuro sul chiaro per il contrasto, azzurro ZenCircle sullo scuro */
.kw{color:#0A6FA3}
:root[data-theme="dark"] .kw{color:var(--azzurro)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .kw{color:var(--azzurro)} }

.testo{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,5vw,72px); align-items:start}
.testo p{color:var(--ink-2); font-size:1.05rem; margin:0 0 16px; max-width:60ch}
.testo .intro{color:var(--ink-2)}
@media (max-width: 860px){ .testo{grid-template-columns:minmax(0,1fr)} }
.orari-tab{width:100%; border-collapse:collapse; margin-top:32px; font-variant-numeric:tabular-nums}
.orari-tab th, .orari-tab td{text-align:left; padding:16px 16px 16px 0; border-bottom:1px solid var(--line); vertical-align:baseline}
.orari-tab th{font-family:var(--f-display); font-weight:400; font-size:1.35rem; line-height:1.2}
.orari-tab th a{text-decoration:none} .orari-tab th a:hover{text-decoration:underline; text-decoration-color:var(--azzurro); text-decoration-thickness:2px; text-underline-offset:6px}
.orari-tab td{color:var(--ink-2)}
.orari-tab td.su-richiesta{color:var(--ink-3)}
@media (max-width: 600px){
  .orari-tab, .orari-tab tbody, .orari-tab tr{display:block}
  .orari-tab tr{padding:14px 0; border-bottom:1px solid var(--line)}
  .orari-tab th, .orari-tab td{display:block; border:0; padding:2px 0}
}
.contatti{margin:28px 0 0; font-size:1.05rem; color:var(--ink-2)}
.contatti a{font-weight:600; color:var(--ink)}

/* ---------- pagine corso ---------- */
.c-hero{padding-inline:var(--gutter); padding-block:clamp(28px,5vw,72px) clamp(40px,6vw,88px);
  background-image:radial-gradient(var(--dot) 1px, transparent 1.3px); background-size:22px 22px; border-bottom:1px solid var(--line)}
.c-hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:center}
.c-hero.senza-foto .wrap{grid-template-columns:minmax(0,1fr)}
.indietro{display:inline-block; font-size:.88rem; color:var(--ink-3); text-decoration:none; margin:0 0 22px}
.indietro:hover{color:var(--ink)}
.c-hero h1{font-family:var(--f-display); font-weight:400; font-size:clamp(2.4rem, 1.4rem + 3.2vw, 4.4rem); line-height:1.02; letter-spacing:-.02em; margin:0 0 20px; text-wrap:balance; max-width:15ch}
.c-hero.senza-foto h1{max-width:18ch}
.c-hero .intro{font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width:52ch}
@media (max-width: 860px){ .c-hero .wrap{grid-template-columns:minmax(0,1fr)} }
.foto{margin:0; min-width:0}
.foto img{display:block; width:100%; height:auto; aspect-ratio:var(--ar, 4/3); object-fit:cover; border-radius:20px; background:var(--paper-2)}
.foto figcaption{font-size:.8rem; color:var(--ink-3); margin-top:8px}
.carte{list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap:clamp(16px,3vw,32px)}
.carte li{border-top:2px solid var(--ink); padding-top:16px; min-width:0}
.carte h3{font-size:1.08rem; margin:0 0 6px}
.carte p{margin:0; color:var(--ink-2)}
.passi.q4{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width: 1000px){ .passi.q4{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 760px){ .passi.q4{grid-template-columns:minmax(0,1fr)} }
.galleria{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:16px; margin-top:40px}
.chiusa{margin:28px 0 0; font-family:var(--f-display); font-size:1.35rem; line-height:1.35; max-width:40ch}
.fascia{background:var(--ink); color:var(--paper); padding-inline:var(--gutter); padding-block:clamp(48px,7vw,96px)}
.fascia .occhiello{color:color-mix(in srgb, var(--paper) 65%, transparent)}
.fascia h2{font-family:var(--f-display); font-weight:400; font-size:clamp(2rem, 1.4rem + 2.2vw, 3.3rem); line-height:1.05; margin:0 0 18px; max-width:20ch}
.fascia .intro{color:color-mix(in srgb, var(--paper) 82%, transparent)}
.fascia .kw{color:var(--azzurro)}
.fascia .btn-line{color:var(--paper); border-color:var(--paper)}
.fascia .cta-row{margin-top:28px}

.piede-link{display:flex; flex-wrap:wrap; gap:8px 22px}
.legale{max-width:70ch}
.legale h2{font-family:var(--f-display); font-weight:400; font-size:1.6rem; line-height:1.2; margin:40px 0 10px}
.legale p, .legale li{color:var(--ink-2)}
.legale ul{padding-left:20px}

/* tendina dei corsi nel menu in alto */
.nav-corsi{position:relative}
.nav-corsi .tendina{position:absolute; left:-14px; top:100%; padding-top:14px; display:none; z-index:30}
.nav-corsi .tendina > div{display:flex; flex-direction:column; gap:2px; min-width:230px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:0 18px 40px -20px rgba(11,15,20,.35)}
.nav-corsi:hover .tendina, .nav-corsi:focus-within .tendina{display:block}
.nav .tendina a{padding:9px 12px; border-radius:8px}
.nav .tendina a:hover{background:var(--paper-2); text-decoration:none}
.menu nav a.sub{padding:7px 12px 7px 26px; font-size:.88rem; color:var(--ink-2)}
.piede .titolare{flex-basis:100%; margin:0; font-size:.8rem; opacity:.75}
.galleria{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(10px,2.4vw,28px); margin-top:40px}
.foto-larga{margin-top:clamp(10px,2.4vw,28px)}