/* Portico · studio di yoga, pilates e danza. Template Super Easy Web (docs/TEMPLATE.md).
   Hero H8: la foto resta ferma a destra e cambia mentre il testo scorre.
   Forme: foto rettangolari ad angolo vivo con un filo di cornice, pulsanti a pillola. */
@font-face{font-family:'Jost';src:url('../_font/jost/jost-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Manrope';src:url('../_font/manrope/manrope-var.woff2') format('woff2');font-weight:200 800;font-display:swap}

:root{
  --p:#3d5a73;
  --s:#eff1f0;
  --t:#1c2630;
  --a:#d9a184;
  --f-titoli:'Jost', 'Futura', system-ui, sans-serif;
  --f-testo:'Manrope', system-ui, sans-serif;

  --t2:color-mix(in oklab, var(--t) 72%, var(--s));
  --t3:color-mix(in oklab, var(--t) 50%, var(--s));
  --s2:color-mix(in oklab, var(--p) 7%, var(--s));
  --s3:color-mix(in oklab, var(--p) 14%, var(--s));
  --linea:color-mix(in oklab, var(--t) 15%, var(--s));
  --su-p:var(--s);
  --gutter:clamp(16px, 4vw, 64px);
  --max:1320px;
  --testata:76px;
  --ease:cubic-bezier(.19,1,.22,1);
}
@supports (color: oklch(from red l c h)){
  :root{--su-p:oklch(from var(--p) clamp(.18, (.64 - l) * 999, .985) 0 0)}
}

*,*::before,*::after{box-sizing:border-box}
.ancora-spenta{display:none !important}
h1,h2{text-wrap:balance}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--s);color:var(--t);font:400 17px/1.65 var(--f-testo);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-titoli);font-weight:400;line-height:1.02;letter-spacing:-.02em}
p{margin:0}
figure{margin:0}
button{font:inherit;color:inherit}
svg{width:1em;height:1em;flex:none}
:focus-visible{outline:2px solid var(--p);outline-offset:3px}
.salta{position:absolute;left:-999px;top:8px;z-index:100;background:var(--p);color:var(--su-p);padding:10px 16px;border-radius:999px}
.salta:focus{left:16px}
.contenitore{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.titolo{font-size:clamp(42px, 5.2vw, 84px);font-weight:300;line-height:1}
.etichetta{font:600 13px/1 var(--f-testo);letter-spacing:.16em;text-transform:uppercase;color:var(--p)}

/* ---------- barra di avanzamento sopra la testata ---------- */
.avanzamento{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.avanzamento i{display:block;height:100%;background:var(--p);transform-origin:left;transform:scaleX(0)}

/* ---------- pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 28px;border-radius:999px;border:1px solid transparent;font:600 15px/1 var(--f-testo);letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .4s, color .4s, border-color .4s, transform .6s var(--ease)}
.btn svg{width:18px;height:18px;transition:transform .6s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn:active{transform:scale(.98)}
.btn--p{background:var(--p);color:var(--su-p)}
.btn--p:hover{background:color-mix(in oklab, var(--p) 84%, var(--t))}
.btn--chiaro{background:#f6f7f6;color:#1c2630}
.btn--chiaro:hover{background:var(--a)}
.btn--linea{border-color:var(--t3);background:transparent}
.btn--linea:hover{border-color:var(--p);color:var(--p)}
.btn--piccolo{min-height:44px;padding:0 20px;font-size:14px}
.collegamento{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;text-decoration:none;background:linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;transition:background-size .6s var(--ease)}
.collegamento:hover{background-size:0 1px;background-position:100% calc(100% - 10px)}

/* ---------- testata ---------- */
.testata{position:fixed;inset:3px 0 auto;z-index:40;height:var(--testata);display:flex;align-items:center;gap:32px;padding:0 var(--gutter);background:color-mix(in oklab, var(--s) 90%, transparent);backdrop-filter:blur(12px);transition:box-shadow .5s}
.testata.solida{box-shadow:0 1px 0 var(--linea)}
.logo{font:500 24px/1 var(--f-titoli);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;min-width:0;max-width:30vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 0}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{text-decoration:none;font-size:15px;font-weight:500;color:var(--t2);transition:color .3s}
.nav a:hover{color:var(--p)}
.testata__destra{display:flex;align-items:center;gap:18px}
.lingue{display:flex;gap:6px;font-size:14px;color:var(--t3)}
.lingue a{text-decoration:none;padding:6px 2px}
.lingue a[aria-current]{color:var(--t);font-weight:600}
.carrello{position:relative;display:grid;place-items:center;width:44px;height:44px;text-decoration:none}
.carrello[hidden]{display:none}
.carrello svg{width:22px;height:22px}
.carrello span{position:absolute;top:2px;right:0;min-width:20px;height:20px;border-radius:999px;background:var(--p);color:var(--su-p);font:700 12px/20px var(--f-testo);text-align:center}
.burger{display:none;align-items:center;gap:12px;height:48px;padding:0 4px 0 14px;border:1px solid var(--linea);border-radius:999px;background:transparent;cursor:pointer;position:relative;z-index:2}
.burger__testo{font:600 14px/1 var(--f-testo);min-width:44px;text-align:right}
.burger__righe{position:relative;width:38px;height:38px;border-radius:999px;background:var(--t)}
.burger__righe i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--s);transition:transform .5s var(--ease), top .5s var(--ease)}
.burger__righe i:first-child{top:15px}.burger__righe i:last-child{top:22px}
.burger[aria-expanded="true"] .burger__righe i:first-child{top:18px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__righe i:last-child{top:18px;transform:rotate(-45deg)}
/* menu a pannelli sfalsati */
.pannello{position:fixed;inset:0;z-index:35;overflow:hidden}
.pannello[hidden]{display:none}
.pannello__strati i{position:absolute;inset:0;display:block}
.pannello__strati i:first-child{background:var(--a)}
.pannello__strati i:last-child{background:var(--p)}
.pannello__dentro{position:absolute;inset:0;background:var(--s);padding:120px var(--gutter) 40px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow:auto}
.pannello nav{display:flex;flex-direction:column}
.pannello nav a{display:flex;align-items:baseline;gap:16px;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--linea);overflow:hidden}
.pannello nav small{font:600 13px/1 var(--f-testo);color:var(--p)}
.pannello nav span{display:block;font:300 clamp(40px, 11vw, 60px)/1.1 var(--f-titoli);letter-spacing:-.02em}
.pannello__dentro .btn{align-self:flex-start}
body.menu-aperto .testata{background:transparent;backdrop-filter:none;box-shadow:none}

/* ---------- scena: hero + discipline con foto ferma ---------- */
.scena{position:relative;display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);max-width:1600px;margin:0 auto}
.scena__testo{padding:0 clamp(24px, 4vw, 72px) 0 var(--gutter)}
.blocco{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:60px 0}
.blocco--hero{min-height:min(100svh, 980px);padding:calc(var(--testata) + 40px) 0 48px}
.hero__luogo{font:600 13px/1 var(--f-testo);letter-spacing:.16em;text-transform:uppercase;color:var(--p)}
.hero__titolo{font-size:clamp(50px, 5.4vw, 96px);font-weight:300;line-height:.98;letter-spacing:-.03em;max-width:12ch}
.hero__sotto{max-width:40ch;font-size:18px;color:var(--t2);margin-top:6px}
.hero__azioni{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:12px}
.discipline{border-top:1px solid var(--linea)}
.blocco + .blocco{border-top:1px solid var(--linea)}
.blocco__n{font:600 13px/1 var(--f-testo);letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.blocco h2{font-size:clamp(40px, 4.4vw, 72px);font-weight:300}
.blocco > p:not(.blocco__n){max-width:40ch;font-size:18px;color:var(--t2)}
.blocco__foto{display:none}
.scena__cornice{position:relative}
.cornice{position:sticky;top:calc(var(--testata) + 3px);height:calc(100svh - var(--testata) - 3px);max-height:900px;padding:0 var(--gutter) var(--gutter) 0;overflow:hidden}
.cornice img{position:absolute;top:0;left:0;right:var(--gutter);bottom:var(--gutter);width:calc(100% - var(--gutter));height:calc(100% - var(--gutter));object-fit:cover;opacity:0;transition:opacity .9s ease, transform 1.4s var(--ease);transform:scale(1.04)}
.cornice img.attiva{opacity:1;transform:scale(1)}
.cornice::after{content:"";position:absolute;top:14px;left:14px;right:calc(var(--gutter) + 14px);bottom:calc(var(--gutter) + 14px);border:1px solid rgba(255,255,255,.55);pointer-events:none}
.cornice__indice{position:absolute;right:calc(var(--gutter) + 30px);bottom:calc(var(--gutter) + 26px);list-style:none;margin:0;padding:10px 16px;display:flex;gap:14px;background:rgba(20,26,32,.45);backdrop-filter:blur(8px);color:rgba(255,255,255,.62);font:600 13px/1.4 var(--f-testo);letter-spacing:.06em;text-transform:uppercase;border-radius:999px}
.cornice__indice li{transition:color .4s}
.cornice__indice li.attiva{color:#fff}

/* ---------- studio: frase che prende peso ---------- */
.studio{padding:clamp(90px, 12vw, 180px) 0;background:var(--s2)}
.studio .etichetta{margin-bottom:28px}
.studio__frase{font:300 clamp(34px, 4vw, 64px)/1.1 var(--f-titoli);letter-spacing:-.02em;max-width:22ch}
.studio__griglia{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);gap:clamp(24px, 4vw, 64px);margin-top:clamp(48px, 6vw, 88px);align-items:end}
.studio__foto{aspect-ratio:4/5;overflow:hidden;background:var(--s3)}
.studio__foto img{width:100%;height:112%;object-fit:cover}
.studio__testo{color:var(--t2);max-width:38ch}
.studio__fatti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.studio__fatti li{display:flex;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--linea)}
.studio__fatti b{font:300 clamp(44px, 4vw, 64px)/1 var(--f-titoli);color:var(--p);min-width:3.2ch}
.studio__fatti span{font-size:15px;color:var(--t2)}

/* ---------- orario ---------- */
.orario{padding:clamp(80px, 10vw, 150px) 0}
.orario__testa{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.legenda{list-style:none;margin:0;padding:0;display:flex;gap:20px;font-size:14px;font-weight:600;color:var(--t2)}
.legenda li{display:flex;align-items:center;gap:8px}
.legenda li::before{content:"";width:14px;height:4px;background:var(--c)}
.c-yoga{--c:var(--p)}
.c-pilates{--c:var(--a)}
.c-danza{--c:color-mix(in oklab, var(--t) 70%, var(--a))}
.settimana{display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:12px}
.giorno{display:flex;flex-direction:column;gap:10px;min-width:0}
.giorno h3{font:600 13px/1 var(--f-testo);letter-spacing:.14em;text-transform:uppercase;color:var(--t2);padding:0 0 14px;border-bottom:1px solid var(--linea);margin-bottom:6px}
.lezione{display:flex;flex-direction:column;gap:2px;padding:14px 14px 14px 16px;background:var(--s2);text-decoration:none;border-top:3px solid var(--c);transition:transform .5s var(--ease), background-color .4s}
.lezione:hover{transform:translateY(-3px);background:var(--s3)}
.lezione time{font-size:14px;font-weight:700;color:var(--t2)}
.lezione b{font:400 21px/1.15 var(--f-titoli)}
.lezione span{font-size:14px;color:var(--t2)}
.lezione.pieno{opacity:.55}

/* ---------- banda ---------- */
.banda{position:relative;display:grid;min-height:min(86vh, 760px);overflow:hidden;color:#f7f6f2;isolation:isolate}
.banda__foto{position:absolute;inset:0;z-index:-1}
.banda__foto img{width:100%;height:118%;object-fit:cover;object-position:50% 40%}
.banda__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(18,24,30,.74), rgba(18,24,30,.1) 70%)}
.banda__testo{align-self:end;max-width:680px;padding:0 var(--gutter) clamp(48px, 8vw, 110px);display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-left:max(0px, calc((100vw - var(--max)) / 2))}
.banda h2{font-size:clamp(50px, 6vw, 100px);font-weight:300;line-height:.98}
.banda p{font-size:18px;max-width:40ch;opacity:.92}

/* ---------- prezzi ---------- */
.prezzi{padding:clamp(90px, 12vw, 180px) 0}
.prezzi__griglia{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:clamp(40px, 7vw, 120px)}
.prezzi__testa p{color:var(--t2);max-width:34ch;margin-top:24px}
.listino h3{font:600 13px/1 var(--f-testo);letter-spacing:.16em;text-transform:uppercase;color:var(--p);margin:0 0 10px}
.listino dl{margin:0 0 44px}
.listino dl div{display:flex;align-items:baseline;gap:14px;padding:16px 0}
.listino dt{font:400 clamp(22px, 2vw, 30px)/1.15 var(--f-titoli);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.listino dt small{font:500 14px/1 var(--f-testo);color:var(--t3)}
.listino dl div::after{content:"";order:1;flex:1;border-bottom:1px dotted var(--t3);transform:translateY(-6px);min-width:24px}
.listino dd{order:2;margin:0;font:500 clamp(22px, 2vw, 30px)/1 var(--f-titoli);color:var(--p)}

/* ---------- negozio ---------- */
.negozio{padding:0 0 clamp(90px, 12vw, 180px)}
.negozio[hidden]{display:none}
.negozio .titolo{margin-bottom:40px}
.negozio__griglia{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px}
.articolo{display:flex;flex-direction:column;gap:14px}
.articolo img{aspect-ratio:4/5;object-fit:cover;width:100%}
.articolo h3{font-size:24px}
.articolo p{color:var(--p);font-weight:700;margin:4px 0 12px}
.avviso{position:fixed;left:50%;bottom:24px;transform:translate(-50%, 16px);z-index:50;background:var(--t);color:var(--s);padding:12px 22px;border-radius:999px;font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:opacity .3s, transform .5s var(--ease)}
.avviso.visibile{opacity:1;transform:translate(-50%, 0)}

/* ---------- insegnanti ---------- */
.insegnanti{padding:0 0 clamp(90px, 12vw, 180px)}
.insegnanti .titolo{margin-bottom:56px}
.insegnanti__griglia{display:grid;grid-template-columns:repeat(3, 1fr);gap:clamp(24px, 3vw, 48px)}
.insegnante__foto{aspect-ratio:4/5;overflow:hidden;margin-bottom:22px;background:var(--s3);position:relative}
.insegnante__foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform 1.2s var(--ease), filter .6s}
.insegnante:hover .insegnante__foto img{transform:scale(1.04);filter:saturate(1)}
.insegnante h3{font-size:30px;margin-bottom:8px;font-weight:400}
.insegnante p{color:var(--t2);max-width:32ch;font-size:16px}

/* ---------- eventi ---------- */
.eventi{padding:clamp(80px, 10vw, 150px) 0;background:var(--s2)}
.eventi__griglia{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:clamp(40px, 6vw, 100px);align-items:center}
.eventi__foto{aspect-ratio:4/5;overflow:hidden}
.eventi__foto img{width:100%;height:100%;object-fit:cover}
.date{list-style:none;margin:40px 0 0;padding:0}
.date li{display:grid;grid-template-columns:96px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--linea)}
.date time{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--t2)}
.date time b{display:block;font:300 56px/1 var(--f-titoli);color:var(--p)}
.date h3{font-size:28px;margin-bottom:8px}
.date p{color:var(--t2);font-size:16px}

/* ---------- recensioni ---------- */
.voci{padding:clamp(90px, 12vw, 180px) 0}
.voci__dentro{max-width:1040px;text-align:center}
.voci__lista{display:grid}
.voce{grid-area:1 / 1;margin:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease), visibility .9s}
.voce.attiva{opacity:1;visibility:visible}
.voce p{font:300 clamp(30px, 3.6vw, 54px)/1.14 var(--f-titoli);letter-spacing:-.01em}
.voce footer{margin-top:28px;font-size:15px;font-weight:600;color:var(--t2)}
.voci__piede{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:40px;color:var(--t2);font-size:15px}
.voci__punti{display:flex;gap:4px}
.voci__punti button{width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
.voci__punti button::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:3px;margin:-1.5px -9px;background:var(--t3);transition:transform .4s, background-color .4s}
.voci__punti button[aria-selected="true"]::after{background:var(--p);transform:scaleX(1.6)}

/* ---------- prova + contatti ---------- */
.prova{padding:clamp(80px, 10vw, 150px) 0 clamp(90px, 12vw, 160px);border-top:1px solid var(--linea)}
.prova__griglia{display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr);gap:clamp(40px, 7vw, 120px)}
.prova .titolo{margin-bottom:40px}
.modulo{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.campo{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0;min-width:0}
.campo label,.campo legend{font-size:14px;font-weight:600;color:var(--t2);padding:0}
.campo input:not([type="radio"]){height:54px;border:0;border-bottom:1px solid var(--t3);background:transparent;font:400 19px/1 var(--f-testo);color:var(--t);padding:0 2px;border-radius:0}
.campo input:not([type="radio"]):focus{outline:none;border-bottom:2px solid var(--p)}
.campo--scelte{grid-column:1 / -1;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}
.campo--scelte legend{margin-bottom:12px;width:100%}
.campo--scelte label{position:relative;cursor:pointer}
.campo--scelte input{position:absolute;opacity:0;inset:0;cursor:pointer}
.campo--scelte span{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--t3);font-size:15px;font-weight:500;color:var(--t);transition:background-color .3s, color .3s, border-color .3s}
.campo--scelte input:checked + span{background:var(--t);color:var(--s);border-color:var(--t)}
.campo--scelte input:focus-visible + span{outline:2px solid var(--p);outline-offset:2px}
.modulo .btn{justify-self:start;grid-column:1 / -1;margin-top:6px}
.modulo__nota{grid-column:1 / -1;font-size:14px;color:var(--t2)}
.contatti{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding-top:12px}
.contatti__titolo{font-size:40px;font-weight:300}
.contatti p{color:var(--t2)}
.contatti a[href^="tel"]{font:400 30px/1.3 var(--f-titoli);color:var(--t);text-decoration:none}
.ore{padding:20px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);width:100%}
.ore h3{font:600 13px/1 var(--f-testo);letter-spacing:.16em;text-transform:uppercase;color:var(--p);margin-bottom:12px}

/* ---------- piede ---------- */
.piede{background:var(--t);color:var(--s);padding:64px 0 100px}
.piede__griglia{display:grid;grid-template-columns:1fr;gap:18px}
.piede__nome{font:200 clamp(52px, 9vw, 150px)/.95 var(--f-titoli);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere;margin-bottom:20px}
.piede p:not(.piede__nome){color:color-mix(in oklab, var(--s) 72%, var(--t));font-size:15px}
.piede a{color:var(--s)}

/* ---------- whatsapp ---------- */
.wa{position:fixed;right:22px;bottom:22px;z-index:30;display:grid;place-items:center;width:58px;height:58px;border-radius:999px;background:var(--p);color:var(--su-p);box-shadow:0 14px 34px -12px color-mix(in oklab, var(--p) 70%, transparent);transition:transform .6s var(--ease), opacity .5s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:26px;height:26px}
.wa[hidden]{display:none}
html.js .wa.in-attesa{opacity:0;transform:translateY(20px);pointer-events:none}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .settimana{grid-template-columns:repeat(3, minmax(0, 1fr));row-gap:32px}
  .negozio__griglia{grid-template-columns:repeat(2, 1fr)}
  .studio__griglia{grid-template-columns:1fr 1fr}
  .studio__foto{grid-row:span 2}
}
@media (max-width:1024px){
  .lingue{display:none}
  .nav{gap:22px}
  .hero__titolo{font-size:clamp(46px, 6vw, 70px)}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:inline-flex}
  .testata__destra{margin-left:auto}
  .testata__destra > .btn{display:none}
  .logo{max-width:50vw;font-size:20px}
  .scena{grid-template-columns:1fr}
  .scena__cornice{display:none}
  .scena__testo{padding:0 var(--gutter)}
  .blocco{min-height:0;padding:48px 0}
  .blocco--hero{min-height:0;padding:calc(var(--testata) + 16px) 0 40px}
  .blocco__foto{display:block;overflow:hidden;aspect-ratio:4/3;margin-top:8px;order:10}
  .blocco__foto img{width:100%;height:100%;object-fit:cover}
  .blocco__foto--hero{order:-1;margin:0 calc(-1 * var(--gutter)) 8px;aspect-ratio:auto;height:min(42svh, 380px)}
  .blocco__foto--hero img{object-position:50% 55%}
  .studio__griglia{grid-template-columns:1fr}
  .studio__foto{grid-row:auto;max-width:520px}
  .settimana{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:12px;scrollbar-width:thin}
  .giorno{flex:0 0 68vw;scroll-snap-align:start}
  .prezzi__griglia{grid-template-columns:1fr}
  .insegnanti__griglia{grid-template-columns:1fr 1fr}
  .eventi__griglia{grid-template-columns:1fr}
  .eventi__foto{aspect-ratio:16/10}
  .prova__griglia{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .titolo{font-size:clamp(38px, 11vw, 56px)}
  .hero__titolo{font-size:clamp(40px, 11.6vw, 58px)}
  .hero__sotto{font-size:17px}
  .hero__azioni{flex-direction:column;align-items:stretch;gap:6px}
  .hero__azioni .btn{white-space:normal;text-align:center}
  .hero__azioni .collegamento{align-self:center}
  .blocco h2{font-size:40px}
  .blocco > p:not(.blocco__n){font-size:16px}
  .studio__frase{font-size:32px}
  .banda{min-height:620px}
  .banda__foto::after{background:linear-gradient(0deg, rgba(18,24,30,.84) 10%, rgba(18,24,30,.05) 75%)}
  .banda__testo .btn{white-space:normal;text-align:center}
  .listino dl div{flex-wrap:wrap}
  .negozio__griglia{gap:24px 12px}
  .articolo h3{font-size:20px}
  .articolo .btn{width:100%}
  .insegnanti__griglia{grid-template-columns:1fr}
  .date li{grid-template-columns:64px 1fr;gap:16px}
  .date time b{font-size:44px}
  .date h3{font-size:24px}
  .voce p{font-size:28px}
  .modulo{grid-template-columns:1fr}
  .modulo .btn{justify-self:stretch}
  .wa{width:54px;height:54px;right:16px;bottom:16px}
}
@media (max-width:380px){
  .burger__testo{display:none}
  .burger{padding:0 4px}
}
@media (min-width:1800px){
  :root{--max:1520px}
  body{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- apertura ---------- */
/* Portico: un respiro. Il cerchio si gonfia e si sgonfia, poi diventa un varco che si allarga sul sito. */
.apertura{background:var(--p);--buco:0px;-webkit-mask-image:radial-gradient(circle at 50% 50%, transparent var(--buco), #000 calc(var(--buco) + 1px));mask-image:radial-gradient(circle at 50% 50%, transparent var(--buco), #000 calc(var(--buco) + 1px))}
.ap-respiro{position:absolute;left:50%;top:50%;width:min(26vmin, 220px);height:min(26vmin, 220px);margin:calc(min(26vmin, 220px) / -2) 0 0 calc(min(26vmin, 220px) / -2)}
.ap-cerchio{position:absolute;inset:0;border-radius:50%;background:var(--s)}
.ap-alone{position:absolute;inset:-18%;border-radius:50%;border:1px solid color-mix(in oklab, var(--s) 55%, var(--p))}
.ap-parola{position:absolute;left:0;right:0;top:calc(50% + min(26vmin, 220px) / 2 + clamp(28px, 6vh, 56px));margin:0;text-align:center;font:300 clamp(18px, 2vw, 24px)/1 var(--f-titoli);letter-spacing:.42em;text-transform:uppercase;color:var(--su-p);padding-left:.42em}
/* ---------- /apertura ---------- */