:root{
  --fondo:#f6f5f1; --testo:#2e4034; --tenue:#556058; --debole:#5c645d;
  --accento:#8e4a5c; --accento-testo:#8e4a5c; --accento-forte:#7c4151;
  --su-accento:#FFFFFF; --accento-velo:#e7dddc;
  --secondario:#a8bba2; --chiaro:#ffffff; --su-chiaro:#2e4034;
  --bordo:#dfdcd2; --bordo-forte:#95938c;
  --ombra:rgba(18,24,20,.10); --ombra-lieve:rgba(18,24,20,.055);
  --raggio:14px; --raggio-p:9px;
  --largh:1240px; --largh-max:1463px;
  --margine:clamp(20px,5vw,52px);
  --stacco:clamp(56px,8vw,104px);
  --tocco:48px;
  --lato:max(var(--margine),env(safe-area-inset-left));
  /* v2.18: misure comuni a tutte le schede e griglie del sito */
  --spazio-griglia:clamp(14px,1.8vw,24px);
  --dopo-titolo:clamp(24px,3vw,36px);
  --pad-scheda:clamp(20px,2.2vw,28px);
  --pad-voce:clamp(14px,1.5vw,18px) clamp(16px,1.7vw,22px);
  --titolo-scheda:clamp(1.06rem,1rem + .25vw,1.2rem);
  --ombra-scheda:0 2px 10px var(--ombra-lieve);
  --f-titoli:'Bricolage Grotesque', system-ui, sans-serif; --f-testo:'Karla', system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--testo);font-family:var(--f-testo);
  font-size:clamp(16px,.5vw + 16px,17px);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  overflow-wrap:break-word;word-break:normal}
img{max-width:100%;height:auto;display:block}
a{color:var(--accento-testo);text-underline-offset:3px}
a:hover{color:var(--accento-forte)}
h1,h2,h3,h4{font-family:var(--f-titoli);font-weight:600;line-height:1.16;margin:0 0 .5em;
  letter-spacing:-.012em;text-wrap:balance;color:var(--testo)}
h1{font-size:clamp(2.05rem,1.25rem + 3.2vw,3.55rem);line-height:1.1}
h2{font-size:clamp(1.62rem,1.15rem + 1.8vw,2.45rem)}
h3{font-size:clamp(1.12rem,1.02rem + .4vw,1.3rem)}
p{margin:0 0 1.05em;text-wrap:pretty}
strong,b{font-weight:600}
small{font-size:.9em}
::selection{background:var(--accento);color:var(--su-accento)}

/* larghezza: non supera mai lo schermo, non tocca mai i bordi */
.contenitore{width:min(var(--largh-max),100% - var(--lato)*2);margin-inline:auto}
.sezione{padding:var(--stacco) 0;border-top:1px solid var(--bordo);scroll-margin-top:84px}
.sezione:first-of-type{border-top:0}
.occhiello{font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accento-testo);font-weight:700;margin:0 0 14px}
.testo-guida{max-width:64ch;color:var(--tenue);font-size:1.02em}

/* barra superiore */
.barra{position:sticky;top:0;z-index:60;background:var(--fondo);
  border-bottom:1px solid var(--bordo);padding-top:env(safe-area-inset-top)}
@supports (backdrop-filter:blur(8px)){
  .barra{background:color-mix(in srgb,var(--fondo) 88%,transparent);backdrop-filter:blur(12px)}
}
.barra-int{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 0;width:min(var(--largh-max),100% - var(--lato)*2);margin-inline:auto}
.marchio{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--testo);
  min-width:0;padding:6px 0;position:relative;z-index:70}
.marchio img{height:clamp(34px,4vw,42px);width:auto}
.marchio-nome{font-family:var(--f-titoli);font-size:clamp(1.02rem,.92rem + .4vw,1.18rem);
  font-weight:600;line-height:1.2;display:block}
.marchio-sotto{font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tenue);display:block;margin-top:2px}
.menu{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.menu a{text-decoration:none;color:var(--testo);font-size:.98rem;font-weight:500;
  white-space:nowrap;padding:8px 2px;border-radius:6px}
.menu a:hover{color:var(--accento-testo)}
/* il bottone nel menu tiene i suoi colori: senza questa riga eredita
   quello dei link e sparisce sullo sfondo dell'accento */
.menu a.bottone,.menu a.bottone:hover{color:var(--su-accento)}
/* v2.18: le regole dei link del menu gli toglievano la forma a pillola */
.menu a.bottone{padding:10px 22px;min-height:44px;border-radius:999px}
.apri-menu{display:none;background:var(--chiaro);border:1px solid var(--bordo-forte);
  border-radius:12px;width:var(--tocco);height:var(--tocco);cursor:pointer;color:var(--testo);
  font-size:1.35rem;line-height:1;flex:none;align-items:center;justify-content:center;
  /* sopra il menu aperto, altrimenti non si riesce piu' a chiuderlo */
  position:relative;z-index:70}
@media(max-width:1060px){
  .apri-menu{display:flex}
  .menu{position:fixed;inset:0 0 auto;top:0;transform:translateY(-102%);
    /* visibility: senza questa il menu chiuso resta visibile quando la barra
       sfocata fa da riferimento, e i suoi link restano raggiungibili col tab */
    visibility:hidden;transition:transform .28s ease,visibility .28s ease;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--fondo);border-bottom:1px solid var(--bordo);
    /* l'altezza della barra la misura il JS: con il logo e il nome su due righe
       la barra cresce, e un valore fisso farebbe finire il primo link sotto */
    padding:calc(var(--altezza-barra,76px) + 14px + env(safe-area-inset-top)) var(--lato) 30px;z-index:55;
    max-height:100dvh;overflow-y:auto;box-shadow:0 18px 40px var(--ombra)}
  .menu.aperto{transform:translateY(0);visibility:visible}
  .menu a{padding:16px 2px;font-size:1.1rem;border-bottom:1px solid var(--bordo);
    min-height:var(--tocco);display:flex;align-items:center}
  .menu a.bottone{margin-top:20px;justify-content:center;border-bottom:0}
}

/* bottoni */
.bottone{display:inline-flex;align-items:center;justify-content:center;
  background:var(--accento);color:var(--su-accento);text-decoration:none;
  padding:14px 26px;min-height:var(--tocco);border-radius:999px;font-weight:600;
  font-size:1rem;border:0;cursor:pointer;font-family:var(--f-testo);line-height:1.2;
  box-shadow:0 2px 8px var(--ombra-lieve);
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.bottone:hover{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 6px 16px var(--ombra);color:var(--su-accento)}
.bottone:active{transform:translateY(0)}
.bottone:focus-visible{outline:3px solid var(--accento-forte);outline-offset:3px}
.bottone.vuoto{background:transparent;color:var(--testo);border:1.5px solid var(--bordo-forte);
  box-shadow:none}
.bottone.vuoto:hover{border-color:var(--accento);color:var(--accento-testo)}
.bottone[disabled]{opacity:.5;cursor:not-allowed;transform:none;filter:none}

/* apertura */
.apertura{padding:clamp(40px,6vw,84px) 0 clamp(40px,5vw,64px)}
.apertura-griglia{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,4.5vw,64px);align-items:center}
@media(max-width:940px){.apertura-griglia{grid-template-columns:1fr;gap:28px}}
.apertura .guida{font-size:clamp(1.06rem,1rem + .3vw,1.2rem);color:var(--tenue);
  max-width:50ch;line-height:1.6}
.apertura-figura img{border-radius:var(--raggio);width:100%;object-fit:cover;aspect-ratio:4/5;
  box-shadow:0 12px 34px var(--ombra-lieve)}
@media(max-width:940px){
  .apertura-figura{order:-1}
  .apertura-figura img,.apertura-figura .segnaposto{aspect-ratio:16/10;max-height:46vh}
}
.segnaposto{border-radius:var(--raggio);aspect-ratio:4/5;width:100%;
  background:linear-gradient(150deg,var(--secondario),var(--fondo));border:1px solid var(--bordo)}

/* prossime disponibilita' */
.prossime{margin-top:30px;padding:22px;border:1px solid var(--bordo);border-radius:var(--raggio);
  background:var(--chiaro);max-width:54ch;box-shadow:0 2px 12px var(--ombra-lieve)}
.prossime-titolo{font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);font-weight:600;margin-bottom:12px}
.pastiglie{display:flex;flex-wrap:wrap;gap:9px}
.pastiglia{border:1.5px solid var(--bordo-forte);border-radius:999px;padding:0 18px;
  min-height:44px;font-size:.95rem;background:var(--fondo);cursor:pointer;
  font-family:var(--f-testo);color:var(--testo);font-weight:500}
.pastiglia:hover{border-color:var(--accento);color:var(--accento-testo)}
/* v2.41: al passaggio e col Tab la pastiglia si riempie: si capisce subito che si tocca */
.pastiglia:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
@media(hover:hover){.prossime .pastiglia:hover{background:var(--accento);border-color:var(--accento);color:var(--su-accento)}
  .prossime .pastiglia:hover .pastiglia-sede,.prossime .pastiglia:hover .pastiglia-online{color:inherit}}

/* schede */
.schede{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:var(--spazio-griglia);margin-top:var(--dopo-titolo)}
.scheda{background:var(--chiaro);color:var(--su-chiaro);border:1px solid var(--bordo);
  border-radius:var(--raggio);padding:var(--pad-scheda);
  box-shadow:var(--ombra-scheda)}
.scheda h3{margin-bottom:.35em;font-size:var(--titolo-scheda)}
.scheda p{color:var(--tenue);margin-bottom:0}
.scheda .durata{font-size:.95rem;color:var(--tenue);font-weight:500;margin-bottom:10px}
.scheda .prezzo{font-family:var(--f-titoli);font-size:1.4rem;margin-top:16px;
  color:var(--accento-testo);font-weight:600}

/* specializzazioni (v2.14, v2.18): righe piene (8 = 4+4), le parole non si spezzano mai */
.specialita{list-style:none;padding:0;margin:var(--dopo-titolo) 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:var(--spazio-griglia)}
.specialita-voce{display:flex;align-items:center;gap:14px;background:var(--chiaro);color:var(--su-chiaro);
  border:1px solid var(--bordo);border-radius:var(--raggio);padding:var(--pad-voce);min-height:84px;
  box-shadow:var(--ombra-scheda);min-width:0}
.specialita-voce > div{min-width:0}
.specialita-icona{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--accento-velo);color:var(--accento-testo)}
.specialita h3{font-size:var(--titolo-scheda);line-height:1.3;margin:0;
  hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;word-break:normal;text-wrap:balance}
.specialita p{margin:.35em 0 0;color:var(--tenue);font-size:.94rem}

/* domande frequenti (v2.15): titolo a sinistra, domande a destra; una colonna sul telefono */
.faq-griglia{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:900px){.faq-griglia{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--bordo)}
.faq-voce{border-bottom:1px solid var(--bordo)}
.faq-voce summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:18px;min-height:var(--tocco);padding:18px 2px;font-weight:600;font-size:1.04rem;color:var(--testo)}
.faq-voce summary::-webkit-details-marker{display:none}
.faq-voce summary::after{content:'';flex:none;width:10px;height:10px;margin-right:6px;
  border-right:2px solid var(--accento-testo);border-bottom:2px solid var(--accento-testo);
  transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq-voce[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq-voce summary:hover{color:var(--accento-testo)}
.faq-voce summary:focus-visible{outline:2px solid var(--accento);outline-offset:2px;border-radius:4px}
.faq-risposta{padding:0 2px 18px;color:var(--tenue);max-width:68ch}
.faq-risposta p:last-child{margin-bottom:0}
.faq-altro{margin-top:28px}
.faq-rimando{margin-top:28px;font-size:.96rem}
@media(prefers-reduced-motion:reduce){.faq-voce summary::after{transition:none}}

/* passi */
.passi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(22px,2.6vw,34px);margin-top:var(--dopo-titolo);counter-reset:passo}
.passo h3{font-size:var(--titolo-scheda)}
.passo{counter-increment:passo;padding-top:20px;border-top:3px solid var(--accento)}
.passo::before{content:counter(passo,decimal-leading-zero);font-family:var(--f-titoli);
  font-size:1rem;color:var(--accento-testo);font-weight:700;display:block;margin-bottom:8px}
.passo p{color:var(--tenue);margin-bottom:0}

/* chi sono */
.chi-griglia{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,56px);align-items:start}
@media(max-width:900px){.chi-griglia{grid-template-columns:1fr}}
.chi-griglia img{border-radius:var(--raggio);aspect-ratio:1/1;object-fit:cover;width:100%;
  box-shadow:0 10px 28px var(--ombra-lieve)}
@media(max-width:900px){.chi-griglia img{max-width:320px}}

/* dicono di me */
.recensioni{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:var(--spazio-griglia);margin-top:var(--dopo-titolo)}
.recensione{background:var(--chiaro);color:var(--su-chiaro);border:1px solid var(--bordo);
  border-radius:var(--raggio);padding:var(--pad-scheda);display:flex;flex-direction:column;
  box-shadow:var(--ombra-scheda)}
.recensione.evidenza{border-color:var(--accento);border-width:2px}
.stelle{color:var(--accento-testo);letter-spacing:.12em;font-size:1.05rem;margin-bottom:12px}
.recensione blockquote{margin:0 0 18px;font-family:var(--f-titoli);
  font-size:clamp(1.06rem,1rem + .3vw,1.2rem);line-height:1.5}
.recensione .firma{margin-top:auto;font-size:.92rem;color:var(--tenue)}
.recensione .firma strong{font-weight:600;color:var(--su-chiaro)}
.invito-recensione{margin-top:32px;padding:clamp(20px,2.6vw,30px);
  border:1.5px dashed var(--bordo-forte);border-radius:var(--raggio)}
.invito-recensione summary{cursor:pointer;font-weight:600;list-style:none;
  min-height:var(--tocco);display:flex;align-items:center;font-size:1.02rem}
.invito-recensione summary::-webkit-details-marker{display:none}
.invito-recensione summary::after{content:' +';color:var(--accento-testo);font-size:1.3rem;
  margin-left:auto;padding-left:14px}
.invito-recensione[open] summary::after{content:' \2212'}
.voto-stelle{display:flex;gap:8px;flex-wrap:wrap}
.voto-stelle button{background:var(--fondo);border:1.5px solid var(--bordo-forte);
  border-radius:10px;width:var(--tocco);height:var(--tocco);font-size:1.3rem;cursor:pointer;
  color:var(--debole);line-height:1}
.voto-stelle button.acceso{color:var(--accento-testo);border-color:var(--accento);
  background:var(--accento-velo)}

/* prenotazione */
.prenota-guscio{background:var(--chiaro);color:var(--su-chiaro);border:1px solid var(--bordo);
  border-radius:var(--raggio);padding:clamp(18px,2.6vw,34px);margin-top:var(--dopo-titolo);
  box-shadow:0 3px 16px var(--ombra-lieve)}
.tappa{margin-bottom:32px}
.tappa:last-child{margin-bottom:0}
.tappa-etichetta{font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);font-weight:600;margin-bottom:12px}
.scelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:11px}
.scelta{border:1.5px solid var(--bordo-forte);background:var(--fondo);border-radius:var(--raggio);
  padding:15px 19px;min-height:var(--tocco);cursor:pointer;font-family:var(--f-testo);
  font-size:1rem;font-weight:500;color:var(--testo);text-align:left}
.scelta:hover{border-color:var(--accento)}
.scelta.attiva{border-color:var(--accento);background:var(--accento);color:var(--su-accento)}
.scelta small{display:block;font-size:.88rem;margin-top:4px;color:var(--tenue)}
.scelta.attiva small{color:var(--su-accento);opacity:.92}

.calendario{max-width:540px}
.calendario-testa{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;gap:10px}
.calendario-mese{font-family:var(--f-titoli);font-size:1.22rem;font-weight:600}
.freccia{border:1.5px solid var(--bordo-forte);background:var(--fondo);color:var(--testo);
  width:var(--tocco);height:var(--tocco);border-radius:50%;cursor:pointer;font-size:1.1rem;
  line-height:1;flex:none}
.freccia:hover{border-color:var(--accento);color:var(--accento-testo)}
.freccia[disabled]{opacity:.35;cursor:not-allowed}
.griglia-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(5px,1vw,8px)}
.intestazione-cal{font-size:.86rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tenue);font-weight:600;text-align:center;padding-bottom:8px}
.cella{aspect-ratio:1/1;min-height:46px;border:1.5px solid var(--bordo);border-radius:11px;
  background:var(--fondo);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;cursor:pointer;font-family:var(--f-testo);font-size:1rem;
  font-weight:500;color:var(--testo);padding:0}
.cella:hover:not(:disabled){border-color:var(--accento)}
.cella .indicatore{width:20px;height:3px;border-radius:2px;background:var(--secondario)}
.cella.piena .indicatore{background:var(--accento)}
.cella:disabled{color:var(--debole);border-color:var(--bordo);background:transparent;
  cursor:not-allowed}
.cella:disabled .indicatore{background:transparent}
.cella.attiva{background:var(--accento);color:var(--su-accento);border-color:var(--accento)}
.cella.attiva .indicatore{background:var(--su-accento);opacity:.75}
.cella.vuota{border:0;background:transparent;cursor:default}

.orari-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:9px;max-width:580px}

/* --- v2.20: calendario sul computer ---
   Sotto i 1000 px non cambia niente: gli elementi nuovi restano nascosti e il
   contenitore .giorno-orario si comporta come un blocco qualsiasi. */
.legenda-cal,.orari-giorno,.orari-gruppo,.orari-segnaposto,.cella .liberi{display:none}
@media(min-width:1000px){
  .giorno-orario{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
    gap:clamp(28px,3.4vw,52px);align-items:stretch;margin-bottom:32px}
  .giorno-orario .tappa{margin-bottom:0}
  .giorno-orario .calendario{max-width:none}
  .calendario-testa{margin-bottom:18px}
  .calendario-mese{font-size:1.4rem}
  .intestazione-cal{font-size:.8rem;letter-spacing:.08em}

  /* giorni: chi si puo' prenotare ha il bordo e il numero pieno, gli altri si ritirano */
  .griglia-cal{gap:8px}
  .cella{aspect-ratio:auto;min-height:clamp(58px,4.6vw,70px);border-radius:12px;gap:3px;font-size:1.06rem;
    transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease,background-color .15s ease}
  .cella:not(:disabled):not(.vuota){border-color:var(--bordo-forte);font-weight:600;background:var(--fondo)}
  .cella:hover:not(:disabled):not(.vuota):not(.attiva){border-color:var(--accento);transform:translateY(-2px);
    box-shadow:0 6px 16px var(--ombra-lieve)}
  .cella:disabled{border-color:transparent;font-weight:400}
  .cella .indicatore{display:none}
  .cella .liberi{display:block;font-size:.72rem;font-weight:500;line-height:1.1;color:var(--tenue);letter-spacing:.01em}
  .cella.piena .liberi{color:var(--accento-testo);font-weight:600}
  .cella:disabled .liberi{color:var(--debole)}
  .cella.oggi:disabled{border:1.5px dashed var(--bordo-forte)}
  .cella.attiva,.cella.attiva:not(:disabled):not(.vuota){background:var(--accento);border-color:var(--accento);
    color:var(--su-accento);box-shadow:0 8px 20px var(--ombra)}
  .cella.attiva .liberi{color:var(--su-accento);opacity:.9}

  .legenda-cal{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:.88rem;color:var(--tenue)}
  .legenda-cal span{display:inline-flex;align-items:center;gap:8px}
  .legenda-cal i{width:16px;height:16px;border-radius:5px;display:inline-block}
  .legenda-cal .leg-libero{border:1.5px solid var(--bordo-forte);background:var(--fondo)}
  .legenda-cal .leg-chiuso{border:1.5px solid var(--bordo);background:transparent}

  /* colonna degli orari: prima del giorno un invito, dopo il riquadro con gli orari */
  .colonna-orari{display:flex;flex-direction:column;min-width:0}
  #tappa-orari:not([hidden]){display:flex;flex-direction:column;flex:1}
  .orari-riquadro{flex:1;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--fondo);
    padding:clamp(18px,2vw,26px)}
  .orari-giorno{display:block;font-family:var(--f-titoli);font-size:1.3rem;font-weight:600;line-height:1.25;
    margin:0 0 16px;color:var(--testo)}
  .orari-riquadro .orari-lista{max-width:none;grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .orari-gruppo{display:block;grid-column:1/-1;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--tenue);font-weight:600;margin-top:10px}
  .orari-gruppo:first-child{margin-top:0}
  .orario{background:var(--chiaro);transition:border-color .15s ease,transform .15s ease,background-color .15s ease}
  .orario:hover:not(.attiva){transform:translateY(-1px)}
  #tappa-orari[hidden] + .orari-segnaposto{display:flex;flex-direction:column;flex:1}
  .orari-segnaposto-box{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;text-align:center;padding:28px;border:1.5px dashed var(--bordo-forte);border-radius:var(--raggio);
    color:var(--tenue);min-height:260px}
  .orari-segnaposto-box .icona{color:var(--accento-testo);opacity:.8}
  .orari-segnaposto-box p{margin:0;max-width:30ch}
}
.orario{border:1.5px solid var(--bordo-forte);background:var(--fondo);border-radius:var(--raggio-p);
  padding:13px 8px;min-height:var(--tocco);cursor:pointer;font-family:var(--f-testo);
  font-size:1rem;font-weight:500;color:var(--testo);text-align:center}
.orario:hover{border-color:var(--accento)}
.orario.attiva{background:var(--accento);color:var(--su-accento);border-color:var(--accento)}

.modulo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}
.campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.campo.largo{grid-column:1/-1}
.campo label{font-size:.94rem;color:var(--tenue);font-weight:600}
.campo input,.campo textarea,.campo select{font-family:var(--f-testo);font-size:16px;
  padding:14px 14px;min-height:var(--tocco);border:1.5px solid var(--bordo-forte);
  border-radius:var(--raggio-p);background:var(--fondo);color:var(--testo);
  width:100%;max-width:100%}
.campo textarea{min-height:auto;line-height:1.6}
.campo input::placeholder,.campo textarea::placeholder{color:var(--debole)}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:3px solid var(--accento);
  outline-offset:1px;border-color:var(--accento)}
.nota-privacy{font-size:.92rem;color:var(--tenue);margin-top:16px;max-width:64ch}
.spunta-privacy{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;
  margin:16px 0 4px;max-width:64ch;cursor:pointer;color:var(--tenue);
  padding:6px 0;line-height:1.55}
.spunta-privacy input{width:24px;height:24px;margin:1px 0 0;flex:none;accent-color:var(--accento)}
.spunta-privacy a{color:var(--accento-testo)}

.esito{padding:clamp(22px,2.6vw,32px);border:2px solid var(--accento);border-radius:var(--raggio);
  background:var(--chiaro);color:var(--su-chiaro)}
.esito .codice{font-family:var(--f-titoli);font-size:1.6rem;letter-spacing:.08em;
  color:var(--accento-testo);font-weight:700}
.avviso{padding:14px 17px;border-radius:var(--raggio-p);background:var(--accento-velo);
  border:1.5px solid var(--accento);color:var(--testo);font-size:.98rem;margin-bottom:18px}

/* contatti e chiusura */
.contatti-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:clamp(22px,2.4vw,32px);margin-top:var(--dopo-titolo)}
.contatto-voce{font-size:1.02rem;word-break:break-word;line-height:1.55}
.contatto-voce span{display:block;font-size:.86rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tenue);font-weight:600;margin-bottom:6px;letter-spacing:.1em}
.contatto-voce a{display:inline-block;padding:3px 0;min-height:32px}
.piede{padding:34px 0 calc(34px + env(safe-area-inset-bottom));border-top:1px solid var(--bordo);
  font-size:.97rem;color:var(--tenue);display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between}
.piede a{color:var(--tenue);text-decoration:underline}
.piede a:hover{color:var(--accento-testo)}
.caricamento{color:var(--tenue);font-size:.95rem}
:focus-visible{outline:3px solid var(--accento-forte);outline-offset:2px;border-radius:4px}

/* --- pagine separate (v2.5) --- */
/* 'continua a leggere': in home chiude ogni assaggio e porta alla pagina vera */
.nome-professionista{font-size:1.06rem;font-weight:600;color:var(--accento-testo);
  margin:-.2em 0 1.1em}

/* --- cartellino dell'anteprima (v2.9) --- */
.cartello-anteprima{position:fixed;left:50%;transform:translateX(-50%);
  bottom:max(12px,env(safe-area-inset-bottom));z-index:200;
  width:min(680px,calc(100% - 24px));box-sizing:border-box;
  background:#2E2A22;color:#FFF6E4;border-radius:12px;
  padding:12px 18px;font-size:.93rem;line-height:1.45;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.28)}
.cartello-anteprima strong{color:#FFD79A}
.cartello-anteprima a{color:#FFD79A;font-weight:600;white-space:nowrap}
@media print{.cartello-anteprima{display:none}}

/* --- messaggi sulle chiusure (v2.8) --- */
.avvisi-chiusure{display:grid;gap:10px;margin:0 0 26px}
.avviso-chiusura{display:flex;gap:12px;padding:16px 18px;border-radius:var(--raggio);
  background:var(--accento-velo);border:1px solid var(--bordo-forte)}
.avviso-chiusura .icona{color:var(--accento-testo);margin-top:2px}
.avviso-chiusura strong{display:block;margin-bottom:2px}
.avviso-chiusura p{margin:0;color:var(--tenue)}

/* --- icone, social e recapiti (v2.7) --- */
.icona{display:block;flex:0 0 auto}
.icona-social{display:block;border-radius:5px;object-fit:contain}

/* i social nella barra: bollini tondi, dimensione da dito */
.social-menu{display:flex;align-items:center;gap:4px}
.social-menu a,.social-piede a{display:inline-flex;align-items:center;justify-content:center;
  width:var(--tocco);height:var(--tocco);border-radius:50%;color:var(--testo);
  text-decoration:none;transition:background .16s ease,color .16s ease}
.social-menu a:hover,.social-piede a:hover{background:var(--accento-velo);color:var(--accento-testo)}
.social-piede{display:flex;gap:2px;margin:-10px 0 -10px -13px}   /* icona in colonna con il testo */

/* recapiti: icona sempre nella stessa colonna, valore, etichetta sotto */
.recapiti{display:grid;gap:var(--spazio-griglia);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  margin:var(--dopo-titolo) 0 0}
.recapito{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 14px;
  min-height:var(--tocco);padding:var(--pad-voce);border:1px solid var(--bordo);border-radius:var(--raggio);
  background:var(--chiaro);color:var(--testo);text-decoration:none;box-shadow:var(--ombra-scheda);min-width:0;
  transition:border-color .16s ease,transform .16s ease}
.recapito:hover{border-color:var(--accento-forte);color:var(--testo);transform:translateY(-1px)}
.recapito .icona,.recapito .icona-social{grid-row:span 2;color:var(--accento-testo)}
.recapito span{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.recapito small{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);
  font-weight:600}
.recapito-social{grid-template-columns:auto 1fr}

/* sedi: una scheda per luogo, affiancate quando ce n'e' piu' d'una */
.sedi{display:grid;gap:var(--spazio-griglia);margin-top:var(--spazio-griglia)}
.sedi-piu{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.sede{padding:var(--pad-scheda);border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--chiaro);
  box-shadow:var(--ombra-scheda)}
.sede-testa{display:flex;align-items:center;gap:9px;margin-bottom:10px;color:var(--accento-testo)}
.sede-testa strong{font-family:var(--f-titoli);font-size:var(--titolo-scheda);color:var(--testo)}
.sede-indirizzo{margin:0 0 12px;line-height:1.55}
.sede-riga{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:.97rem}
.sede-riga .icona{color:var(--tenue)}
.sede-riga a{min-height:32px;display:inline-flex;align-items:center}
.sede-note{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--bordo);
  font-size:.95rem;color:var(--tenue)}

@media(max-width:1060px){
  /* nel menu a comparsa i social vanno su una riga loro, centrati */
  .social-menu{justify-content:center;padding:6px 0;border-top:1px solid var(--bordo);
    border-bottom:1px solid var(--bordo);margin:4px 0}
}
.continua{margin-top:22px}
.continua a{display:inline-flex;align-items:center;gap:8px;min-height:var(--tocco);
  font-weight:600;color:var(--accento-testo);text-decoration:none;
  border-bottom:2px solid var(--accento-velo);padding-bottom:2px}
.continua a::after{content:'→';transition:transform .18s ease}
.continua a:hover{border-bottom-color:var(--accento-forte)}
.continua a:hover::after{transform:translateX(4px)}

/* v2.35: niente briciole di pane; le pagine interne partono piu' in alto */
.e-interna main > .sezione:first-child{padding-top:clamp(32px,5vw,64px)}

/* il menu ripetuto nel piede: e' anche un segnale di struttura per i motori */
.piede-menu{display:flex;flex-wrap:wrap;gap:6px 18px}
.piede-menu a{text-decoration:none}
.piede-menu a:hover{text-decoration:underline}

/* invito alla prenotazione in fondo alle pagine */
.invito-prenota{background:var(--chiaro);border-top:1px solid var(--bordo)}

/* salto al contenuto: si vede solo arrivandoci col tasto Tab */
.salta{position:absolute;left:-9999px;top:0;background:var(--accento);color:var(--su-accento);
  padding:12px 18px;border-radius:0 0 10px 0;z-index:200;font-weight:600}
.salta:focus{left:0}

.menu a[aria-current=page]{color:var(--accento-testo);font-weight:600}
.menu a.bottone[aria-current=page]{color:var(--su-accento)}

/* telefoni piccoli: ancora piu' aria e niente elementi stretti */
@media(max-width:400px){
  .orari-lista{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  .scelte{grid-template-columns:1fr}
  /* v2.23: quadrate da 42px non ci stavano sotto i 375px (la pagina scorreva di lato):
     restano alte 44px per il dito e si stringono in larghezza */
  .griglia-cal{gap:4px}
  .cella{min-height:44px;aspect-ratio:auto;min-width:0;border-radius:9px}
  .prenota-guscio{padding:16px}
}
/* vetrina degli ebook (v2.10): in pagina una riga per libro, in home tre
   copertine affiancate. La copertina tiene le proporzioni di un libro. */
.ebook-elenco{display:grid;gap:var(--spazio-griglia);margin-top:var(--dopo-titolo)}
.ebook-scheda{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:24px;
  align-items:start;background:var(--chiaro);color:var(--su-chiaro);
  border:1px solid var(--bordo);border-radius:var(--raggio);padding:var(--pad-scheda);box-shadow:var(--ombra-scheda)}
.ebook-copertina img{width:100%;height:auto;display:block;border-radius:8px;
  box-shadow:0 6px 18px var(--ombra)}
.ebook-copertina .segnaposto{border-radius:8px}
.ebook-testo{max-width:68ch}
.ebook-sottotitolo{color:var(--tenue);margin:0 0 .6em;font-size:1.02rem}
.ebook-dettagli{font-size:.92rem;color:var(--tenue);margin:0 0 .8em;
  text-transform:uppercase;letter-spacing:.04em}
.ebook-testo .prezzo{font-family:var(--f-titoli);font-size:1.4rem;margin:14px 0 0;color:var(--accento-testo)}
.ebook-bottoni{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0 0}
.bottone-leggero{display:inline-flex;align-items:center;min-height:var(--tocco);
  color:var(--accento-testo);text-decoration:none;font-weight:600;
  border-bottom:2px solid var(--accento-velo);padding-bottom:2px}
.bottone-leggero:hover{border-bottom-color:var(--accento-forte)}
.ebook-nota{margin-top:26px;padding:16px 18px;border-left:3px solid var(--accento-velo);
  background:var(--chiaro);color:var(--tenue);font-size:.95rem;border-radius:0 10px 10px 0}

/* in home: schede basse, sulla stessa griglia a tre colonne delle visite;
   se i libri sono due restano larghe un terzo, non mezza pagina */
.ebook-assaggio{display:grid;gap:var(--spazio-griglia);margin-top:var(--dopo-titolo);grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:940px){.ebook-assaggio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ebook-assaggio{grid-template-columns:1fr}}
.ebook-mini{display:flex;gap:18px;align-items:center;text-decoration:none;
  background:var(--chiaro);color:var(--su-chiaro);border:1px solid var(--bordo);
  border-radius:var(--raggio);padding:16px;box-shadow:var(--ombra-scheda);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.ebook-mini:hover{border-color:var(--accento);transform:translateY(-2px);
  box-shadow:0 6px 16px var(--ombra-lieve);color:var(--su-chiaro)}
.ebook-mini:focus-visible{outline:3px solid var(--accento-forte);outline-offset:3px}
.ebook-mini-copertina{flex:0 0 84px;width:84px;aspect-ratio:3/4;border-radius:6px;
  overflow:hidden;background:var(--bordo);box-shadow:0 3px 10px var(--ombra-lieve)}
.ebook-mini-copertina img{width:100%;height:100%;object-fit:cover;display:block}
.ebook-mini-testo{display:flex;flex-direction:column;gap:4px;min-width:0}
.ebook-mini-testo strong{font-family:var(--f-titoli);font-size:var(--titolo-scheda);line-height:1.25}
.ebook-mini-riga{color:var(--tenue);font-size:.93rem;line-height:1.4}
.ebook-mini .prezzo{font-family:var(--f-titoli);font-size:1.1rem;margin-top:4px;
  color:var(--accento-testo)}

/* nella pagina degli ebook il titolo e' un h2 sotto l'h1: misura da scheda */
.ebook-titolo{font-size:clamp(1.3rem,2.2vw,1.6rem);margin:0 0 .25em}

@media(max-width:620px){
  .ebook-scheda{grid-template-columns:1fr;gap:16px}
  /* v2.18: anche il riquadro senza copertina resta della misura di un libro */
  .ebook-copertina{max-width:200px}
}

/* --- v2.18: griglie con il numero di colonne deciso dal numero di elementi ---
   (vedi grigliaColonne() in inc/sezioni.php). Stanno qui in fondo apposta:
   devono valere piu' delle regole generiche scritte sopra. */
.griglia-n{grid-template-columns:repeat(var(--c,3),minmax(0,1fr))}
.griglia-n > *{min-width:0}
@media(min-width:901px) and (max-width:1100px){
  .griglia-n{grid-template-columns:repeat(var(--c-t,2),minmax(0,1fr))}
  .griglia-dispari-t > :last-child{grid-column:1/-1}
}
@media(min-width:621px) and (max-width:900px){
  .griglia-n{grid-template-columns:repeat(var(--c-m,2),minmax(0,1fr))}
  .griglia-dispari > :last-child{grid-column:1/-1}
}
/* le specializzazioni hanno icona e testo affiancati: a 4 colonne servono piu' di 1180px */
@media(min-width:1101px) and (max-width:1180px){
  .specialita.griglia-n{grid-template-columns:repeat(var(--c-m,2),minmax(0,1fr))}
  .specialita.griglia-dispari > :last-child{grid-column:1/-1}
}
@media(max-width:620px){
  .griglia-n{grid-template-columns:minmax(0,1fr)}
  /* sul telefono le specializzazioni restano due per riga, con l'icona sopra
     (come nelle versioni prima): cambia solo che si va a capo a parola intera */
  .specialita.griglia-n{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .specialita.griglia-dispari > :last-child{grid-column:1/-1}
  .specialita-voce{flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:14px;padding:18px 16px;min-height:0}
  .specialita-icona{width:46px;height:46px}
  .specialita h3{font-size:1.05rem;line-height:1.28}
}
/* telefoni stretti: un filo piu' piccolo, cosi' anche gastrointestinali sta intera */
@media(max-width:380px){
  .specialita-voce{padding:16px 13px}
  .specialita h3{font-size:.98rem}
}

/* domande frequenti sul telefono: prima le domande, poi il link a tutte le domande */
@media(max-width:900px){
  .faq-griglia{row-gap:0}
  .faq-griglia > div:first-child{display:contents}
  .faq-griglia .faq{order:1;margin-top:var(--dopo-titolo)}
  .faq-griglia .continua{order:2}
}

.nota-albo{font-size:.85rem;color:var(--tenue);margin-top:18px}

/* --- v2.19: tendina «Altro» nel menu in alto ---
   Sul computer si apre al passaggio del mouse o al clic; sul telefono, dentro
   il menu a comparsa, e' un gruppo che si apre e si chiude al tocco. */
.menu-altro{position:relative;display:flex;align-items:center}
.menu-altro-bottone{display:inline-flex;align-items:center;gap:8px;background:none;border:0;
  cursor:pointer;font-family:var(--f-testo);font-size:.98rem;font-weight:500;color:var(--testo);
  padding:8px 2px;border-radius:6px;white-space:nowrap;line-height:inherit}
.menu-altro-bottone:hover,.menu-altro.aperto .menu-altro-bottone{color:var(--accento-testo)}
.menu-altro.contiene-attiva .menu-altro-bottone{color:var(--accento-testo);font-weight:600}
.freccina{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .22s ease}
.menu-altro.aperto .freccina{transform:translateY(1px) rotate(-135deg)}
.menu-altro-lista{position:absolute;top:calc(100% + 12px);right:-14px;min-width:230px;z-index:65;
  background:var(--chiaro);border:1px solid var(--bordo);border-radius:var(--raggio);
  box-shadow:0 18px 44px var(--ombra);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .2s ease,transform .22s ease,visibility .22s ease}
/* ponte invisibile: il mouse passa dalla voce alla tendina senza che si chiuda */
.menu-altro-lista::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.menu-altro.aperto .menu-altro-lista{opacity:1;visibility:visible;transform:none}
@media(hover:hover) and (min-width:1061px){
  .menu-altro:hover .menu-altro-lista{opacity:1;visibility:visible;transform:none}
  .menu-altro:hover .freccina{transform:translateY(1px) rotate(-135deg)}
}
.menu-altro-int{display:flex;flex-direction:column}
.menu .menu-altro-lista a{display:flex;align-items:center;min-height:44px;padding:10px 14px;
  border-radius:calc(var(--raggio) - 4px);color:var(--su-chiaro)}
.menu .menu-altro-lista a:hover{background:var(--accento-velo);color:var(--accento-testo)}
.menu .menu-altro-lista a[aria-current=page]{background:var(--accento-velo);color:var(--accento-testo)}
@media(max-width:1060px){
  .menu-altro{display:block}
  .menu-altro-bottone{width:100%;justify-content:space-between;padding:16px 2px;font-size:1.1rem;
    min-height:var(--tocco);border-bottom:1px solid var(--bordo);border-radius:0}
  .freccina{margin-right:6px}
  /* il gruppo si apre spingendo giu' le voci sotto: grid 0fr -> 1fr */
  .menu-altro-lista{position:static;min-width:0;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;background:transparent;padding:0;
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
  .menu-altro-lista::before{display:none}
  .menu-altro-int{overflow:hidden;min-height:0;visibility:hidden;transition:visibility .3s}
  .menu-altro.aperto .menu-altro-lista{grid-template-rows:1fr}
  .menu-altro.aperto .menu-altro-int{visibility:visible}
  .menu .menu-altro-lista a{padding:14px 2px 14px 18px;border-radius:0;font-size:1.02rem;
    border-bottom:1px solid var(--bordo);color:var(--testo)}
  .menu .menu-altro-lista a[aria-current=page]{background:transparent}
}

/* --- v2.19: animazioni (spente dal pannello = sito come nella 2.18) ---
   Tutto vale solo con la classe .animato su <html>. Le sezioni che si fanno
   avanti scorrendo le segna il JavaScript (.rivela), e solo quelle ancora
   fuori dallo schermo: senza JavaScript non si nasconde niente. */
.barra-avanzamento{position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--accento);transform:scaleX(var(--avanzamento,0));transform-origin:left;
  pointer-events:none;opacity:.85}
.animato .barra{transition:box-shadow .25s ease,background-color .25s ease}
.animato .barra.staccata{box-shadow:0 8px 28px var(--ombra-lieve)}

/* v2.25: la riga sotto le voci del menu e' diventata la pillola (vedi in fondo) */

/* menu a comparsa del telefono: le voci scendono una dopo l'altra */
@keyframes voceScende{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(max-width:1060px){
  .animato .menu.aperto > *{animation:voceScende .38s ease both}
  .animato .menu.aperto > :nth-child(2){animation-delay:.04s}
  .animato .menu.aperto > :nth-child(3){animation-delay:.08s}
  .animato .menu.aperto > :nth-child(4){animation-delay:.12s}
  .animato .menu.aperto > :nth-child(5){animation-delay:.16s}
  .animato .menu.aperto > :nth-child(6){animation-delay:.2s}
  .animato .menu.aperto > :nth-child(7){animation-delay:.24s}
  .animato .menu.aperto > :nth-child(n+8){animation-delay:.28s}
}

/* apertura: il testo sale piano, la foto si posa */
@keyframes sale{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes siPosa{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
.animato .apertura-griglia > div:first-child > *{animation:sale .8s cubic-bezier(.2,.7,.2,1) both}
.animato .apertura-griglia > div:first-child > :nth-child(2){animation-delay:.08s}
.animato .apertura-griglia > div:first-child > :nth-child(3){animation-delay:.16s}
.animato .apertura-griglia > div:first-child > :nth-child(n+4){animation-delay:.24s}
.animato .apertura-figura{animation:siPosa 1.1s cubic-bezier(.2,.7,.2,1) .1s both}
.animato .prossime:not([hidden]):not(.in-attesa){animation:sale .6s ease both}

/* sezioni: si fanno avanti quando entrano nello schermo
   (finita la comparsa il JavaScript toglie la classe, e le schede tornano
   alle loro transizioni normali: niente ritardi al passaggio del mouse) */
.animato .rivela{opacity:0;transform:translateY(26px)}
.animato .rivela.visto{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--ritardo,0s)}

/* schede: al passaggio del mouse si sollevano appena */
@media(hover:hover){
  .animato .scheda,.animato .specialita-voce,.animato .recensione,.animato .sede{
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
  .animato .scheda:hover,.animato .specialita-voce:hover,.animato .recensione:hover,.animato .sede:hover{
    transform:translateY(-3px);box-shadow:0 12px 28px var(--ombra-lieve);border-color:var(--bordo-forte)}
  .animato .specialita-icona{transition:transform .3s cubic-bezier(.3,1.6,.5,1),background-color .25s ease}
  .animato .specialita-voce:hover .specialita-icona{transform:scale(1.1) rotate(-6deg)}
}

/* =====================================================================
   v2.23 — ritocchi di gerarchia e componenti nuovi
   (apertura con garanzie, schede delle visite con bottone, passi numerati,
   fascia di invito, piede a colonne). Stanno in fondo: valgono sulle regole sopra.
   ===================================================================== */

/* home: sezioni a fondo alterno, cosi' l'occhio capisce dove finisce un argomento */
.e-home main > .sezione:nth-of-type(odd):not(.invito-prenota){
  background:color-mix(in srgb,var(--chiaro) 55%,var(--fondo))}

/* apertura: un alone di colore dietro al testo, due bottoni, le garanzie */
.apertura{position:relative;isolation:isolate;overflow:hidden}
.apertura::before{content:'';position:absolute;z-index:-1;inset:-20% auto auto -10%;
  width:min(720px,90vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--accento-velo),transparent);opacity:.7}
.apertura-azioni{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 0}
.bottone .icona{transition:transform .2s ease}
.bottone:hover .icona{transform:translateX(3px)}
.bottone{gap:10px}
.garanzie{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;
  font-size:.94rem;color:var(--tenue)}
.garanzie li{display:flex;align-items:center;gap:8px}
.garanzie .icona{color:var(--accento-testo)}
.apertura-figura{position:relative}
.apertura-cartellino{position:absolute;left:clamp(-28px,-2vw,-12px);bottom:clamp(20px,3vw,36px);
  display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;max-width:min(300px,80%);
  background:var(--chiaro);color:var(--su-chiaro);border:1px solid var(--bordo);border-radius:16px;
  box-shadow:0 14px 34px var(--ombra)}
.apertura-cartellino-icona{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--accento-velo);color:var(--accento-testo)}
.apertura-cartellino strong{display:block;font-size:.98rem;line-height:1.25}
.apertura-cartellino small{display:block;color:var(--tenue);font-size:.86rem}
@media(max-width:940px){
  /* sul telefono senza una foto vera il riquadro vuoto spingeva il titolo sotto lo schermo */
  .apertura-figura.senza-foto{display:none}
  .apertura-cartellino{left:12px;bottom:12px}
}

/* schede delle visite: prezzo e bottone sempre in fondo, allineati fra le schede */
.scheda-visita{display:flex;flex-direction:column}
.scheda-visita .durata{display:inline-flex;align-items:center;gap:6px}
.scheda-visita .durata .icona{color:var(--accento-testo)}
.scheda-piede{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.scheda-visita .prezzo{margin-top:0}
.scheda-prenota{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;margin-left:auto;
  border-radius:999px;border:1.5px solid var(--bordo-forte);color:var(--testo);text-decoration:none;
  font-weight:600;font-size:.95rem;transition:border-color .18s ease,background-color .18s ease,color .18s ease}
.scheda-prenota:hover{border-color:var(--accento);background:var(--accento);color:var(--su-accento)}
.scheda-prenota .icona{transition:transform .2s ease}
.scheda-prenota:hover .icona{transform:translateX(3px)}

/* prenotazione: i passi con il numero in un cerchio */
.tappa-etichetta{display:flex;align-items:center;gap:10px}
.tappa-numero{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--accento);color:var(--su-accento);font-size:.85rem;letter-spacing:0;font-weight:700}
.campo .etichetta{font-size:.94rem;color:var(--tenue);font-weight:600}
.facoltativo{font-weight:400;color:var(--tenue)}
.avviso-errore{border-color:var(--accento-forte);font-weight:500}
/* v2.32: l'orario scelto si e' appena occupato: il messaggio sta sopra gli altri orari */
.orari-avviso{grid-column:1/-1;flex-basis:100%;width:100%;margin:0 0 12px;border-left:3px solid var(--accento-forte);font-weight:500}
.errore-rete{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:18px 0}
.riprova{min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--accento);background:var(--fondo);
  color:var(--accento-testo);font:inherit;font-weight:600;cursor:pointer}
.esito-spunta{display:block;color:var(--accento-testo);margin-bottom:12px}
#esito-titolo:focus{outline:none}

/* fascia di invito: l'unico blocco con il colore pieno dell'accento */
.invito-prenota{background:transparent;border-top:0}
.invito-fascia{position:relative;overflow:hidden;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;
  padding:clamp(28px,5vw,60px);border-radius:calc(var(--raggio) + 8px);
  background:var(--accento);color:var(--su-accento);box-shadow:0 20px 50px var(--ombra)}
.invito-fascia::before,.invito-fascia::after{content:'';position:absolute;z-index:-1;border-radius:50%;
  border:1.5px solid currentColor;opacity:.14;pointer-events:none}
.invito-fascia::before{width:340px;height:340px;right:-90px;top:-150px}
.invito-fascia::after{width:220px;height:220px;right:60px;bottom:-140px}
.invito-fascia .occhiello,.invito-fascia h2,.invito-fascia .testo-guida{color:var(--su-accento)}
.invito-fascia .testo-guida{margin-bottom:0}
.invito-azioni{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bottone-chiaro,.bottone-chiaro:hover{background:var(--su-accento);color:var(--accento-testo)}
.invito-telefono{margin:0;font-size:.96rem}
.invito-telefono a,.invito-telefono a:hover{color:var(--su-accento);font-weight:600}
@media(max-width:800px){.invito-fascia{grid-template-columns:1fr}}

/* piede a colonne */
.piede-sito{border-top:1px solid var(--bordo);
  background:color-mix(in srgb,var(--chiaro) 55%,var(--fondo))}
.piede-sito .piede{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,56px);padding:clamp(36px,5vw,56px) 0 28px;border-top:0}
.piede-sito p{margin:0}
.piede-nome{font-family:var(--f-titoli);font-size:1.25rem;font-weight:600;color:var(--testo)}
.piede-riga{margin-top:4px!important}
.piede-piccolo{font-size:.86rem}
.piede-titolo{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--testo);margin-bottom:12px!important}
.piede-colonna{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.piede-sito .piede-colonna a{text-decoration:none;min-height:36px;display:inline-flex;align-items:center;
  overflow-wrap:anywhere}
.piede-sito .piede-colonna a:hover{text-decoration:underline}
.piede-sito .social-piede{margin:14px 0 0 -13px}
.piede-fondo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  padding:18px 0 calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--bordo);
  font-size:.9rem;color:var(--tenue)}
.piede-legale{display:flex;flex-wrap:wrap;gap:4px 18px}
.piede-fondo a{color:var(--tenue)}
/* v2.41: link del fondo alti abbastanza per il dito (erano 17 px) */
.piede-legale a{display:inline-flex;align-items:center;min-height:44px}
.piede-fondo a:hover{color:var(--accento-testo)}
@media(max-width:800px){.piede-sito .piede{grid-template-columns:1fr 1fr}
  .piede-marchio{grid-column:1/-1}}
@media(max-width:420px){.piede-sito .piede{grid-template-columns:1fr}}

/* =====================================================================
   v2.23 — movimento (tutto sotto .animato: spento dal pannello non c'e')
   Curva a molla calcolata come quella di Framer Motion (rigidita' 170,
   smorzamento 20): arriva, supera del 2% e si posa. Dove il browser non
   conosce linear() resta la curva morbida di prima.
   ===================================================================== */
:root{--molla:cubic-bezier(.2,.7,.2,1);--molla-durata:.63s;--esce:cubic-bezier(.4,0,1,1)}
@supports (transition-timing-function:linear(0,1)){
  :root{--molla:linear(0, 0.019, 0.068, 0.137, 0.218, 0.305, 0.394, 0.48, 0.562, 0.638, 0.706, 0.766, 0.818,
    0.863, 0.901, 0.932, 0.957, 0.977, 0.992, 1.004, 1.012, 1.018, 1.021, 1.023, 1.023, 1.023, 1.022, 1.02,
    1.018, 1.016, 1.014, 1.012, 1.01, 1.008, 1.007, 1.005, 1.004, 1.003, 1.002, 1.002, 1)}
}

/* comparsa allo scorrimento: l'opacita' sale piana, il movimento con la molla */
.animato .rivela.visto{transition:opacity .55s ease-out,transform var(--molla-durata) var(--molla);
  transition-delay:var(--ritardo,0s)}

/* pressione: tutto quello che si tocca risponde abbassandosi appena */
.animato .bottone,.animato .scelta,.animato .cella,.animato .orario,.animato .pastiglia,
.animato .scheda-prenota,.animato .freccia,.animato .riprova,.animato .voto-stelle button{
  transition:transform .18s var(--molla),filter .15s ease,box-shadow .15s ease,border-color .15s ease,
    background-color .15s ease,color .15s ease}
.animato .bottone:active,.animato .scelta:active,.animato .cella:not(:disabled):active,.animato .orario:active,
.animato .pastiglia:active,.animato .scheda-prenota:active,.animato .freccia:not([disabled]):active,
.animato .riprova:active,.animato .voto-stelle button:active,.animato .recapito:active,.animato .ebook-mini:active{
  transform:scale(.96);transition-duration:.08s}
.animato .voto-stelle button.acceso{animation:stellina .35s var(--molla) backwards}
@keyframes stellina{from{transform:scale(.7)}}

/* scheda della visita: al passaggio del mouse il bottone si accende */
@media(hover:hover){
  .animato .scheda-visita:hover .scheda-prenota{border-color:var(--accento)}
}

/* calendario: il mese nuovo scorre dal lato giusto, quello vecchio sbiadisce */
.animato .griglia-cal{transition:opacity .2s ease}
.animato .griglia-cal.in-arrivo{opacity:.35;pointer-events:none}
@keyframes daDestra{from{opacity:0;transform:translateX(28px)}}
@keyframes daSinistra{from{opacity:0;transform:translateX(-28px)}}
.animato .griglia-cal.da-destra{animation:daDestra .45s var(--molla) backwards}
.animato .griglia-cal.da-sinistra{animation:daSinistra .45s var(--molla) backwards}

/* passi che compaiono: orari e dati entrano dal basso */
@keyframes entra{from{opacity:0;transform:translateY(14px)}}
.animato #tappa-orari:not([hidden]),.animato #tappa-dati:not([hidden]){animation:entra .5s var(--molla) backwards}
.animato .orario{animation:entra .4s var(--molla) backwards;animation-delay:calc(var(--i,0) * 28ms)}
.animato .pastiglia{animation:entra .4s var(--molla) backwards}
.animato .pastiglia:nth-child(2){animation-delay:.06s}
.animato .pastiglia:nth-child(3){animation-delay:.12s}

/* esito della prenotazione: la scheda si posa e la spunta si disegna */
@keyframes posa{from{opacity:0;transform:scale(.94)}}
@keyframes disegna{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.animato #passo-esito:not([hidden]) .esito{animation:posa .55s var(--molla) backwards}
.animato .esito-spunta circle,.animato .esito-spunta path{stroke-dasharray:1;stroke-dashoffset:0}
.animato #passo-esito:not([hidden]) .esito-spunta circle{animation:disegna .6s ease-out .15s backwards}
.animato #passo-esito:not([hidden]) .esito-spunta path{animation:disegna .35s ease-out .6s backwards}

/* domande frequenti: la risposta si apre scorrendo invece di comparire di colpo
   (browser recenti; gli altri la aprono come prima) */
@supports (interpolate-size:allow-keywords){
  .animato .faq-voce,.animato .invito-recensione{interpolate-size:allow-keywords}
  .animato .faq-voce::details-content,.animato .invito-recensione::details-content{height:0;overflow:clip;
    transition:height .35s var(--molla),content-visibility .35s allow-discrete}
  .animato .faq-voce[open]::details-content,.animato .invito-recensione[open]::details-content{height:auto}
}

/* apertura: il cartellino arriva per ultimo */
.animato .apertura-cartellino{animation:sale .7s var(--molla) .55s backwards}

/* fascia di invito: i cerchi decorativi respirano piano */
@keyframes respira{50%{transform:scale(1.08)}}
.animato .invito-fascia::before{animation:respira 9s ease-in-out infinite}
.animato .invito-fascia::after{animation:respira 11s ease-in-out -3s infinite}

/* =====================================================================
   v2.25 — menu a pillole, specializzazioni che si rivelano, percorso a carte
   in fila, piede basso. Colori e caratteri solo dalle variabili del tema;
   il movimento solo sotto .animato (e mai con «riduci movimento», vedi sotto).
   ===================================================================== */

/* menu in alto: ogni voce e' una pillola; la pagina attuale ha la sua pillola piena */
@media(min-width:1061px){
  .menu{position:relative;gap:clamp(2px,.4vw,6px)}
  .menu > a:not(.bottone),.menu-altro-bottone{position:relative;z-index:1;display:inline-flex;align-items:center;
    min-height:44px;padding:8px clamp(10px,1.05vw,16px);border-radius:999px}
  .menu > a:not(.bottone):hover,.menu-altro-bottone:hover,.menu-altro.aperto .menu-altro-bottone{
    background:color-mix(in srgb,var(--accento-velo) 70%,transparent);color:var(--accento-testo)}
  .menu > a[aria-current=page]:not(.bottone),.menu-altro.contiene-attiva .menu-altro-bottone{
    background:var(--accento-velo);color:var(--accento-testo);font-weight:600;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accento) 32%,transparent)}
  .menu > a.bottone{margin-left:6px}
  .animato .menu > a:not(.bottone),.animato .menu-altro-bottone{
    transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
  /* la pillola che scivola da una voce all'altra al passaggio del mouse, come il
     layoutId di Framer Motion: la aggiunge il JavaScript, solo con le animazioni */
  .menu-pillola{position:absolute;left:0;top:0;z-index:0;border-radius:999px;pointer-events:none;
    background:color-mix(in srgb,var(--accento-velo) 70%,transparent);opacity:0;transition:opacity .18s ease}
  .menu-pillola.scivola{transition:opacity .18s ease,transform .42s var(--molla),width .42s var(--molla)}
  .menu.con-pillola > a:not(.bottone):not([aria-current=page]):hover,
  .menu.con-pillola .menu-altro:not(.contiene-attiva):not(.aperto) .menu-altro-bottone:hover{background:transparent}
}
/* menu del telefono: righe arrotondate, con lo stesso segno per la pagina attuale */
@media(max-width:1060px){
  .menu-pillola{display:none}
  .menu{gap:4px}
  .menu > a:not(.bottone),.menu-altro-bottone{border-bottom:0;border-radius:var(--raggio-p);padding:14px 16px}
  .menu > a:not(.bottone):hover,.menu-altro-bottone:hover{background:color-mix(in srgb,var(--accento-velo) 70%,transparent)}
  .menu > a[aria-current=page]:not(.bottone),.menu-altro.contiene-attiva .menu-altro-bottone{
    background:var(--accento-velo);color:var(--accento-testo)}
  .menu .menu-altro-lista a{border-bottom:0;border-radius:var(--raggio-p);padding:12px 16px 12px 30px;margin-top:2px}
  .menu .menu-altro-lista a[aria-current=page]{background:var(--accento-velo);color:var(--accento-testo)}
  .animato .menu > a:not(.bottone),.animato .menu-altro-bottone,.animato .menu .menu-altro-lista a{
    transition:background-color .2s ease,color .2s ease}
}

/* specializzazioni (v2.27): schede sottili (icona e titolo). La frase sta nel pannello
   .specialita-pop, sopra la scheda: si apre col mouse, col Tab (focus) o al tocco
   (.aperta, dal JS) e si allunga verso il basso sopra le schede sotto. La griglia non
   si muove mai. Esc la richiude (.chiusa). I lettori di schermo leggono sempre la frase. */
.specialita-voce{display:block;position:relative;min-height:0}
.specialita-fronte{display:flex;align-items:center;gap:14px;min-height:46px}
.specialita-fronte strong{font-family:var(--f-titoli);font-size:var(--titolo-scheda);font-weight:600;line-height:1.3;
  color:var(--testo);text-wrap:balance}
.specialita-voce.con-frase{cursor:pointer}
.specialita-voce.con-frase::after{content:'+';position:absolute;top:8px;right:8px;display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;background:var(--accento-velo);color:var(--accento-testo);
  font-weight:700;font-size:.9rem;line-height:1;z-index:1}
.specialita-voce.con-frase .specialita-fronte{padding-right:14px}
.specialita-pop{position:absolute;left:-1px;right:-1px;top:-1px;z-index:6;padding:var(--pad-voce);
  background:var(--chiaro);color:var(--su-chiaro);border:1px solid var(--accento);border-radius:var(--raggio);
  box-shadow:0 18px 40px var(--ombra);opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none}
.specialita-pop .specialita-fronte{padding-right:14px}
.specialita .specialita-pop p{margin:10px 0 0;color:var(--su-chiaro);font-size:.94rem;line-height:1.5}
.specialita-voce.aperta,.specialita-voce.con-frase:focus-visible:not(.chiusa){z-index:7}
.specialita-voce.aperta .specialita-pop,
.specialita-voce.con-frase:focus-visible:not(.chiusa) .specialita-pop{opacity:1;visibility:visible;transform:none}
.specialita-voce.con-frase:focus-visible{outline:3px solid var(--accento-forte);outline-offset:3px}
@media(hover:hover){
  .specialita-voce.con-frase:hover:not(.chiusa){z-index:7}
  .specialita-voce.con-frase:hover:not(.chiusa) .specialita-pop{opacity:1;visibility:visible;transform:none}
}
/* movimento (v2.29): solo transform e opacity, che il browser muove senza ridisegnare
   la pagina. Prima si animava clip-path (ridisegnato a ogni fotogramma) e visibility
   andava a 0 s: ne venivano gli scatti. Il pannello scende da poco sopra, un filo piu'
   piccolo, e si posa con la molla; si chiude in fretta. La scheda resta sopra le altre
   finche' il pannello non e' sparito (z-index ritardato). */
.animato .specialita-pop{transform-origin:50% 0;transform:translateY(-8px) scale(.97);
  transition:opacity .15s ease,transform .15s var(--esce),visibility 0s linear .15s}
.animato .specialita-voce.aperta .specialita-pop,
.animato .specialita-voce.con-frase:focus-visible:not(.chiusa) .specialita-pop{
  transition:opacity .2s ease,transform var(--molla-durata) var(--molla),visibility 0s}
@media(hover:hover){
  .animato .specialita-voce.con-frase:hover:not(.chiusa) .specialita-pop{
    transition:opacity .2s ease,transform var(--molla-durata) var(--molla),visibility 0s}
}
/* telefono: due per riga, basse, icona piccola a sinistra del titolo */
@media(max-width:620px){
  .specialita.griglia-n{gap:10px}
  .specialita-voce,.specialita-pop{padding:12px 12px}
  .specialita-fronte{flex-direction:row;align-items:center;gap:10px;min-height:38px}
  .specialita-icona{width:34px;height:34px}
  .specialita-icona .icona{width:18px;height:18px}
  .specialita h3,.specialita-fronte strong{font-size:.93rem;line-height:1.25}
  .specialita-voce.con-frase .specialita-fronte{padding-right:12px}
  .specialita-voce.con-frase::after{top:6px;right:6px;width:18px;height:18px;font-size:.82rem}
  .specialita .specialita-pop p{font-size:.9rem;margin-top:8px}
  /* il pannello della colonna di destra si apre verso sinistra, a tutta riga */
  .specialita-voce:nth-child(2n) .specialita-pop{left:calc(-100% - 13px)}
  .specialita-voce:nth-child(2n+1) .specialita-pop{right:calc(-100% - 13px)}
  .specialita.griglia-dispari > :last-child .specialita-pop{left:-1px;right:-1px}
}
@media(max-width:380px){.specialita h3,.specialita-fronte strong{font-size:.88rem}}

/* percorso (v2.27): griglia ferma di carte arrotondate, senza numeri */
.passi.percorso-carte{list-style:none;padding:0;margin:var(--dopo-titolo) 0 0;gap:var(--spazio-griglia);counter-reset:none}
.percorso-carte .passo{counter-increment:none;border-top:1px solid var(--bordo);background:var(--chiaro);color:var(--su-chiaro);
  border:1px solid var(--bordo);border-radius:var(--raggio);padding:var(--pad-scheda);box-shadow:var(--ombra-scheda)}
.percorso-carte .passo::before{content:none}
.percorso-carte .passo h3{margin-bottom:.35em}
@media(hover:hover){
  .animato .percorso-carte .passo{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
  .animato .percorso-carte .passo:hover{transform:translateY(-3px);box-shadow:0 12px 28px var(--ombra-lieve);border-color:var(--bordo-forte)}
}

/* piede: le pagine in piu' colonne affiancate, il piede resta basso */
.piede-sito .piede{grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) minmax(0,1fr)}
.piede-link{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));column-gap:24px;width:100%}
@media(max-width:800px){
  .piede-sito .piede{grid-template-columns:minmax(0,1fr);gap:26px}
  .piede-link{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  /* i recapiti in fila, vanno a capo da soli */
  .piede-sito .piede-colonna:not(.piede-menu){flex-direction:row;flex-wrap:wrap;column-gap:22px}
  .piede-sito .piede-colonna:not(.piede-menu) .piede-titolo{flex-basis:100%}
}

.nota-preavviso{margin:14px 0 0;font-size:.9rem;color:var(--tenue);line-height:1.5}
.link-attesa{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lista-attesa{margin-top:22px}

/* v2.27: orari consigliati (vicini agli altri appuntamenti) e proposta gentile */
.orari-legenda{grid-column:1/-1;font-size:.86rem;color:var(--tenue);line-height:1.45;margin:0 0 4px}
.orari-legenda::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accento);
  margin-right:7px;vertical-align:1px}
.orario.consigliato{position:relative;border-color:var(--accento)}
.orario.consigliato::after{content:'';position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
  background:var(--accento)}
.orario.consigliato.attiva::after{background:var(--su-accento)}
.suggerimento{margin:0 0 18px;padding:16px 18px;border-radius:var(--raggio-p);border:1.5px dashed var(--accento);
  background:var(--fondo)}
.suggerimento[hidden]{display:none}
.suggerimento p{margin:0 0 12px}
.suggerimento .suggerimento-bottoni{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.suggerimento .bottone{min-height:44px;padding:10px 18px;font-size:.95rem}
.animato .suggerimento:not([hidden]){animation:entra .45s var(--molla) backwards}
.recensione-google{margin-top:22px}

/* v2.26: prenotazione una cosa alla volta; visite che si fissano solo con lo studio */
.giorno-orario[hidden]{display:none}
.tappa-guida{margin:-4px 0 12px;font-size:.95rem;color:var(--tenue)}
.tappa-guida[hidden]{display:none}
.tappa-per{text-transform:none;letter-spacing:0;font-weight:600;color:var(--accento-testo)}
.scelta{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.scelta small{margin-top:2px}
.scelta-nome{font-weight:600}
.scelta-descr{display:block;margin-top:6px;font-size:.88rem;line-height:1.45;color:var(--tenue);font-weight:400}
.scelta.attiva .scelta-descr{color:var(--su-accento);opacity:.92}
.animato #tappa-calendario:not([hidden]){animation:entra .5s var(--molla) backwards}
.scheda-solo-studio{font-size:.9rem;color:var(--tenue);margin-left:auto}
a.scheda-solo-studio{color:var(--testo)}
.prenota-chiusa p:last-child{margin-bottom:0}

/* =====================================================================
   v2.29 — formazione, linea del percorso, apertura allineata, specializzazioni
   ===================================================================== */

/* --- 1. Chi sono: la formazione sotto la foto (computer), dopo il testo (telefono) --- */
/* v2.34: la formazione non resta chiusa sotto la foto, prende tutta la larghezza sotto
   foto e testo: le schede si allargano in orizzontale invece di allungarsi in verticale */
.chi-griglia.con-formazione{grid-template-areas:'foto testo' 'form form';grid-template-rows:auto auto}
.chi-griglia.con-formazione > :first-child{grid-area:foto}
.chi-griglia.con-formazione > :nth-child(2){grid-area:testo}
.chi-formazione{grid-area:form;min-width:0}
@media(max-width:900px){
  .chi-griglia.con-formazione{grid-template-areas:'foto' 'testo' 'form';grid-template-rows:auto}
}
.formazione-titolo{font-family:var(--f-testo);font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);font-weight:600;margin:0}
/* v2.31: una riga sola, schede alte uguali con icona e titolo breve. Il dettaglio sta nel
   pannello .specialita-pop delle specializzazioni (stesse regole, stessa animazione), che qui
   e' figlio di .formazione-riga e non della scheda: la riga che scorre lo taglierebbe. Per
   questo la scheda resta senza posizione (static) e senza transform (anche il sollevamento
   al passaggio del mouse, che diventa solo ombra e bordo). */
.chi-formazione{position:relative;z-index:2}
.formazione-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;margin:0 0 8px}
.formazione-frecce{display:flex;gap:8px}
.formazione-frecce[hidden]{display:none}
@media(hover:none){.formazione-frecce{display:none}}
.formazione-freccia{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--bordo-forte);background:var(--chiaro);color:var(--testo)}
.formazione-freccia.indietro .icona{transform:scaleX(-1)}
.formazione-freccia:hover:not(:disabled){border-color:var(--accento);color:var(--accento-testo)}
.formazione-freccia:disabled{opacity:.35;cursor:default}
.formazione-freccia:focus-visible{outline:3px solid var(--accento-forte);outline-offset:3px}
.formazione-riga{position:relative}
.formazione{list-style:none;margin:0;display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:4px;scrollbar-width:none;
  padding:6px 4px 10px;margin-inline:-4px}
.formazione::-webkit-scrollbar{display:none}
.formazione > .titolo-studio{position:static;flex:1 0 220px;min-width:0;scroll-snap-align:start;padding:12px 14px;
  border-radius:var(--raggio-p)}
.formazione > .titolo-studio.con-frase > .specialita-fronte{position:relative;flex-direction:row;align-items:center;gap:10px;min-height:38px;padding-right:18px}
.formazione .specialita-icona{width:36px;height:36px}
.titolo-studio-breve{flex:1;min-width:0;font-family:var(--f-titoli);font-weight:600;font-size:.98rem;line-height:1.3;
  color:var(--testo);overflow-wrap:break-word;hyphens:auto}
/* il «+» delle specializzazioni, appeso al fronte invece che alla scheda */
.formazione > .titolo-studio.con-frase::after{content:none}
.formazione > .titolo-studio > .specialita-fronte::after{content:'+';position:absolute;top:-4px;right:-6px;display:grid;
  place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accento-velo);color:var(--accento-testo);
  font-weight:700;font-size:.9rem;line-height:1}
/* (tre classi: sotto i 620 px vincono su «il pannello della colonna di destra si apre verso sinistra») */
.formazione-riga .titolo-studio .specialita-pop{left:var(--pop-x,0px);right:auto;top:5px;width:var(--pop-larga,100%);max-width:100%;
  padding:12px 14px;border-radius:var(--raggio-p)}
.formazione-riga .specialita-pop .specialita-fronte{flex-direction:row;align-items:center;gap:10px;padding-right:0}
.formazione-riga .specialita-pop strong{font-size:1rem;line-height:1.3;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.formazione-riga .specialita-pop p{margin:8px 0 0;line-height:1.4;overflow-wrap:anywhere}
.formazione-riga .specialita-pop .titolo-studio-tipo{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--accento-testo)}
.formazione-riga .specialita-pop .titolo-studio-ente{margin-top:4px;font-size:.9rem;color:var(--tenue)}
.formazione > .titolo-studio.con-frase:focus-visible{outline-offset:-3px}
@media(hover:hover){
  .animato .formazione > .titolo-studio:hover{transform:none}
  .animato .formazione > .titolo-studio::before{content:none}
}
@media(max-width:620px){
  /* telefono: si vede una scheda e mezza, cosi' si capisce che la riga continua */
  .formazione > .titolo-studio{flex-basis:calc((100% - 18px) / 1.6)}
}
.solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}
/* anche il testo per i lettori di schermo si appoggia a .formazione-riga e non alla scheda:
   lasciato al suo posto, oltre la riga che scorre, allargherebbe la pagina sul telefono */
.formazione .solo-lettori{left:0;top:0}

/* --- 2. Percorso: la linea da «Inizio» a «Obiettivo» ---
   Il binario va dal centro del primo punto al centro dell'ultimo; ogni punto sta a
   --pos (0..1). Si riempie con transform (scaleX), mai con la larghezza. La zona da
   toccare e' 44 px, o il tratto fra due punti se i punti sono tanti. */
.percorso-linea{position:relative;margin:var(--dopo-titolo) 0 0;padding:0 7px 32px;container-type:inline-size}
.percorso-binario{display:block;position:relative;height:4px;margin-top:20px;border-radius:4px;background:var(--bordo)}
.percorso-riempito{position:absolute;inset:0;border-radius:inherit;background:var(--accento);
  transform:scaleX(var(--pieno,1));transform-origin:0 50%}
.percorso-punti{list-style:none;margin:0;padding:0;position:absolute;top:0;left:7px;right:7px;height:44px}
.percorso-punti li{position:absolute;top:0;left:calc(var(--pos) * 100%);width:0;height:44px}
.percorso-punto{position:absolute;top:0;left:0;transform:translateX(-50%);display:grid;place-items:center;
  width:min(44px,calc(100cqw / var(--tratti,1)));height:44px;border-radius:999px;color:inherit}
.percorso-pallino{width:14px;height:14px;border-radius:50%;background:var(--chiaro);border:2px solid var(--bordo-forte)}
.percorso-punto.raggiunto .percorso-pallino{background:var(--accento);border-color:var(--accento)}
.percorso-punto[aria-current] .percorso-pallino{transform:scale(1.3);box-shadow:0 0 0 4px var(--accento-velo)}
.percorso-punto:focus-visible{outline:3px solid var(--accento-forte);outline-offset:-4px}
.percorso-etichetta{position:absolute;top:36px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--tenue);white-space:nowrap}
.percorso-punti li:first-child .percorso-etichetta{left:-7px}
.percorso-punti li:last-child .percorso-etichetta{right:-7px;color:var(--accento-testo)}
.animato .percorso-riempito{transition:transform .5s var(--molla)}
.animato .percorso-pallino{transition:transform .35s var(--molla),background-color .2s ease,border-color .2s ease}
@media(hover:hover){.animato .percorso-punto:hover .percorso-pallino{transform:scale(1.3)}}
/* la carta raggiunta da un punto si fa notare un attimo (anello che si accende e si spegne) */
.percorso-carte .passo{position:relative}
.percorso-carte .passo:focus{outline:none}
.percorso-carte .passo:focus-visible{outline:3px solid var(--accento-forte);outline-offset:3px}
.percorso-carte .passo.evidenziata::after{content:'';position:absolute;inset:-1px;border:2px solid var(--accento);
  border-radius:inherit;pointer-events:none}
@keyframes ricorda{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
.animato .percorso-carte .passo.evidenziata::after{animation:ricorda 1.6s ease both}
/* telefono e tablet: le carte scorrono sotto, quindi la linea resta ferma sotto la barra
   finche' si e' nella sezione (sfondo della sezione, allungato ai lati senza scorrimento) */
.e-home main > .sezione:nth-of-type(odd):not(.invito-prenota){--fondo-sezione:color-mix(in srgb,var(--chiaro) 55%,var(--fondo))}
@media(max-width:900px){
  /* lo sfondo allungato ai lati non deve allargare la pagina (clip: la linea resta sticky) */
  #metodo{overflow-x:clip}
  .percorso-linea{position:sticky;top:var(--altezza-barra,64px);z-index:5;padding-top:8px;padding-bottom:34px;
    background:var(--fondo-sezione,var(--fondo));box-shadow:0 0 0 100vmax var(--fondo-sezione,var(--fondo));
    clip-path:inset(0 -100vmax -16px)}
  /* sotto la linea le carte sfumano, invece di sparire contro un bordo netto */
  .percorso-linea::after{content:'';position:absolute;left:-100vmax;right:-100vmax;top:100%;height:16px;pointer-events:none;
    background:linear-gradient(var(--fondo-sezione,var(--fondo)),transparent)}
  .percorso-punti{top:8px}
}

/* --- 3. Apertura: testo al centro della foto, bordi allineati ---
   La foto riempie la riga: e' alta come il testo quando il testo e' piu' alto, e al
   massimo quanto lo schermo sotto la barra quando la foto lo sarebbe (prima usciva di
   110 px a 1366x768). Il testo sta al centro; «Prime disponibilita'» tiene il suo posto
   mentre arriva (.in-attesa), cosi' il blocco non salta. */
.apertura-griglia > div:first-child{align-self:center;min-width:0}
.apertura-griglia > div:first-child > :first-child{margin-top:0}
.apertura-griglia > div:first-child > :last-child{margin-bottom:0}
.apertura .guida,.apertura .prossime{max-width:36rem}
.apertura-figura{align-self:stretch}
.apertura-figura::before{content:'';display:block;aspect-ratio:4/5;
  max-height:max(420px,calc(100svh - var(--altezza-barra,80px) - clamp(80px,11vw,148px)))}
.apertura-figura img,.apertura-figura .segnaposto{position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;max-height:none;object-fit:cover;object-position:50% 30%}
.prossime.in-attesa{visibility:hidden}
@media(max-width:940px){
  .apertura-figura::before{aspect-ratio:16/10;max-height:46vh}
}

/* --- 4. Specializzazioni --- */
/* la comparsa allo scorrimento usa translate e il sollevamento transform: sono due
   proprieta' diverse, quindi non si rubano piu' la transizione a meta' strada. Tutte le
   regole sotto ripetono la stessa lista (--spec-moto, sul <li> perche' legga il suo --ritardo):
   cambia solo quando sale z-index, subito all'apertura e dopo 0,15 s alla chiusura
   (il pannello resta sopra le altre schede finche' non e' sparito) */
.specialita > li{--spec-moto:transform .25s ease,border-color .25s ease,opacity .55s ease-out var(--ritardo,0s),
  translate var(--molla-durata) var(--molla) var(--ritardo,0s)}
.animato .specialita > .rivela{transform:none;translate:0 26px}
.animato .specialita > .rivela.visto{translate:none}
.animato .specialita > .specialita-voce,.animato .specialita > .rivela.visto{transition:var(--spec-moto),z-index 0s linear .15s}
.animato .specialita > .specialita-voce.aperta,
.animato .specialita > .specialita-voce.con-frase:focus-visible{transition:var(--spec-moto),z-index 0s}
@media(hover:hover){
  /* l'ombra grande e' gia' disegnata in ::before: si accende solo l'opacita'. Il suo livello
     resta sempre pronto (will-change): senza, il browser lo rifaceva a ogni passaggio del
     mouse (misurato: 43 ricalcoli di layout contro 27 passando su 8 schede) */
  .animato .specialita-voce::before{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
    box-shadow:0 12px 28px var(--ombra-lieve);opacity:0;transition:opacity .25s ease;will-change:opacity}
  .animato .specialita > .specialita-voce:hover{transform:translateY(-3px);box-shadow:var(--ombra-scheda);
    transition:var(--spec-moto),z-index 0s}
  .animato .specialita-voce:hover::before{opacity:1}
}
/* telefono (fino a 430 px): icona sopra il titolo, cosi' il titolo ha tutta la larghezza.
   Il carattere e' lo stesso per tutte le schede e scende con lo schermo: la parola piu'
   lunga («gastrointestinali», 7,99 volte il carattere) lascia almeno 14 px liberi da 360
   a 414 px. Le schede sono tutte alte uguali. Ultima riserva: una parola di 18 lettere o
   piu' va a capo sulle sillabe (lingua italiana), mai a caso. */
@media(max-width:430px){
  .specialita.griglia-n{grid-auto-rows:1fr}
  .specialita-fronte{flex-direction:column;align-items:flex-start;gap:8px;min-height:0}
  .specialita-voce.con-frase .specialita-fronte{padding-right:0}
  .specialita-icona{width:32px;height:32px}
  .specialita h3,.specialita-fronte strong{font-size:clamp(.8rem,6.2vw - 8.2px,.95rem);line-height:1.25;
    hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:18 9 9;
    -webkit-hyphenate-limit-before:9;-webkit-hyphenate-limit-after:9}
}

/* ------------------------------------------------------------------
   v2.30 — le sedi: il passo «Dove», «Si svolge a», le pastiglie, «Anche online»
   ------------------------------------------------------------------ */
.scelta[hidden],.tappa[hidden],.si-svolge[hidden]{display:none!important}
.scelte-sedi .scelta-sede{flex-direction:row;align-items:center;gap:14px;text-align:left}
.scelta-icona{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:color-mix(in srgb,var(--accento) 12%,var(--fondo));color:var(--accento-testo)}
.scelta-sede.attiva .scelta-icona{background:color-mix(in srgb,var(--su-accento) 20%,transparent);color:var(--su-accento)}
.scelta-testo{display:flex;flex-direction:column;gap:2px;min-width:0}
.scelta-testo small{overflow-wrap:anywhere}
.si-svolge{display:flex;align-items:center;gap:8px;margin:-4px 0 12px;font-size:.95rem;color:var(--tenue)}
.si-svolge .icona{flex:none;color:var(--accento-testo)}
.si-svolge strong{color:var(--testo)}
/* v2.34 — studi in cui si prenota tramite la segreteria */
.scelte-sedi .scelta-segreteria{flex-direction:row;align-items:center;gap:14px;text-align:left}
.scelta-segreteria.attiva .scelta-icona{background:color-mix(in srgb,var(--su-accento) 20%,transparent);color:var(--su-accento)}
.scelta-segreteria-nota{font-style:italic}
.segreteria-riquadro{margin-top:16px;padding:18px 20px;border:1.5px solid var(--accento);border-radius:var(--raggio);
  background:var(--chiaro)}
.segreteria-riquadro[hidden]{display:none}
.animato .segreteria-riquadro:not([hidden]){animation:entra .45s var(--molla) backwards}
.segreteria-riquadro p{margin:0 0 12px}
.segreteria-titolo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.segreteria-titolo .icona{flex:none;color:var(--accento-testo)}
.segreteria-titolo strong{font-size:1.08rem}
.segreteria-titolo span{flex-basis:100%;color:var(--tenue);font-size:.93rem}
.segreteria-bottoni{display:flex;flex-wrap:wrap;gap:10px}
.segreteria-bottoni .bottone{display:inline-flex;align-items:center;gap:8px;min-height:46px}
.segreteria-nota{font-size:.93rem;color:var(--tenue)}
.segreteria-sotto{font-weight:600;margin-top:16px!important}
.segreteria-giorni{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:8px}
.segreteria-giorni li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--bordo);
  border-radius:var(--raggio-p);background:var(--fondo)}
.segreteria-giorni span{color:var(--tenue);font-size:.93rem;font-variant-numeric:tabular-nums}
.prenota-chiusa .segreteria-riquadro{margin-top:18px}
.scheda-visita .durata{flex-wrap:wrap;row-gap:4px}
.anche-online{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 10px;border-radius:999px;
  font-size:.82rem;font-weight:600;color:var(--accento-testo);background:color-mix(in srgb,var(--accento) 10%,var(--fondo))}
.anche-online .icona{color:inherit}
.contatti-online{display:flex;align-items:center;gap:10px;margin:18px 0 0;color:var(--tenue)}
.contatti-online .icona{flex:none;color:var(--accento-testo)}

/* v2.35 — «Non riesci a prenotare?»: una riga discreta sotto la prenotazione, con
   chiamata e WhatsApp. Sparisce quando la prenotazione e' andata a buon fine. */
.aiuto-prenota{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:22px;padding:14px 18px;
  border:1px dashed color-mix(in srgb,var(--accento) 45%,var(--bordo));border-radius:var(--raggio);
  background:color-mix(in srgb,var(--accento) 4%,var(--fondo))}
.prenota-guscio:has(#passo-esito:not([hidden])) + .aiuto-prenota{display:none}
.aiuto-prenota-icona{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--accento-velo);color:var(--accento-testo)}
.aiuto-prenota-testo{flex:1 1 260px;margin:0;line-height:1.45}
.aiuto-prenota-testo strong{display:block;color:var(--testo)}
.aiuto-prenota-testo span{color:var(--tenue);font-size:.95rem}
.aiuto-prenota-bottoni{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.aiuto-prenota-bottoni .bottone{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-block:8px}
@media(max-width:620px){
  .aiuto-prenota{padding:14px}
  .aiuto-prenota-testo{flex-basis:calc(100% - 56px)}
  .aiuto-prenota-icona{align-self:flex-start}
  .aiuto-prenota-bottoni{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .aiuto-prenota-bottoni .bottone{justify-content:center;padding-inline:12px;min-width:0}
  .segreteria-bottoni .bottone{flex:1 1 100%;justify-content:center}
}

/* =====================================================================
   v2.37 — formazione in colonna sul telefono, «Prime disponibilita'» ordinate,
   foto di apertura e di «Chi sono» inquadrate a piacere sul telefono.
   (Le specializzazioni sul telefono tornano come prima della 2.35: due per riga,
   piccole, col «+» che apre la frase.)
   ===================================================================== */

/* formazione: sul telefono una scheda sotto l'altra, niente riga che scorre di lato.
   Il pannello col dettaglio si apre sopra la sua scheda, come nelle specializzazioni. */
@media(max-width:620px){
  .formazione{flex-direction:column;overflow:visible;scroll-snap-type:none;gap:10px;padding:0;margin:0}
  .formazione > .titolo-studio{position:relative;flex:none;width:100%}
  .formazione-riga .titolo-studio .specialita-pop{left:-1px;right:-1px;top:-1px;width:auto;max-width:none}
}

/* «Prime disponibilita'»: con la sede la pastiglia diventa un riquadro arrotondato,
   quando sopra e dove sotto; un nome di sede lungo si accorcia coi puntini (il nome
   intero resta nel title). Senza sede resta la pastiglia di sempre. */
.pastiglia{max-width:100%}
/* il riquadro bianco segue le caselle: largo quanto la piu' larga (tutte uguali fra loro),
   non piu' largo con uno spazio vuoto a destra */
.apertura .prossime{width:fit-content;max-width:min(100%,36rem)}
.apertura .pastiglie{display:grid;grid-template-columns:minmax(0,1fr)}
.apertura .pastiglia{width:100%}
.pastiglia:has(.pastiglia-dove){display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:2px;min-width:0;padding:8px 18px;border-radius:var(--raggio-p);text-align:left;line-height:1.3}
.pastiglia-quando{white-space:nowrap}
.pastiglia-dove{display:flex;align-items:center;gap:4px 12px;min-width:0;max-width:100%;flex-wrap:wrap}
.pastiglia-sede{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;
  font-size:.84rem;color:var(--tenue);font-weight:500}
.pastiglia-sede .icona{flex:none}
.pastiglia-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pastiglia-online{color:var(--accento-testo)}
@media(max-width:620px){
  .prossime,.apertura .prossime{width:auto;max-width:none;padding:18px 16px}
  .pastiglie{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .pastiglia{padding:0 16px}
  .pastiglia:has(.pastiglia-dove){display:flex;width:100%;padding:9px 16px}
}

/* foto sul telefono: forma del riquadro, punto al centro (--tel-x/--tel-y) e
   ingrandimento (--tel-zoom) scelti in Aspetto. Sul computer niente cambia. */
.tel-panoramica{--tel-forma:16/10;--tel-alta:46vh}
.tel-classica{--tel-forma:4/3;--tel-alta:56vh}
.tel-quadrata{--tel-forma:1/1;--tel-alta:62vh}
.tel-verticale{--tel-forma:4/5;--tel-alta:70vh}
.tel-intera{--tel-alta:70vh}
@media(max-width:940px){
  .apertura-figura:not(.senza-foto){overflow:hidden;border-radius:var(--raggio);box-shadow:0 12px 34px var(--ombra-lieve)}
  .apertura-figura::before{aspect-ratio:var(--tel-forma,16/10);max-height:var(--tel-alta,46vh)}
  /* se la foto a tutta larghezza supererebbe l'altezza massima, si stringe (al centro) invece
     di essere tagliata: prima sul tablet in verticale se ne perdeva il 17% */
  .apertura-figura{justify-self:center;width:min(100%,calc(var(--tel-alta,46vh) * var(--tel-r,1.6)))}
  .apertura-figura img{box-shadow:none;object-position:var(--tel-x,50%) var(--tel-y,30%);
    transform:scale(var(--tel-zoom,1));transform-origin:var(--tel-x,50%) var(--tel-y,30%)}
  .apertura-figura.tel-intera::before{content:none}
  .apertura-figura.tel-intera img{position:static;height:auto;aspect-ratio:auto;max-height:none}
}
@media(max-width:900px){
  .chi-foto:has(img){max-width:320px;overflow:hidden;border-radius:var(--raggio);box-shadow:0 10px 28px var(--ombra-lieve)}
  .chi-foto img{display:block;max-width:none;box-shadow:none;aspect-ratio:var(--tel-forma,1/1);
    object-position:var(--tel-x,50%) var(--tel-y,50%);
    transform:scale(var(--tel-zoom,1));transform-origin:var(--tel-x,50%) var(--tel-y,50%)}
  .chi-foto.tel-intera img{aspect-ratio:auto;height:auto}
}
/* tablet in orizzontale e computer (sopra 940 px, schermo alto piu' di 500 px): la foto
   di apertura non si allunga piu' quanto il testo. Prima a 1024x768 diventava 416x787,
   piu' alta dello schermo, e ne tagliava i lati. Ora resta 4:5 e non supera mai lo schermo
   sotto la barra: se lo spazio in altezza e' poco si stringe. Sta in alto, all'altezza del
   titolo, cosi' si vede intera appena si apre la pagina anche se il testo e' piu' alto. */
@media(min-width:941px) and (min-height:501px){
  .apertura-figura{align-self:start;justify-self:end;
    width:min(100%,calc((100svh - var(--altezza-barra,80px) - clamp(48px,6vw,96px)) * .8))}
  .apertura-figura::before{max-height:none}
}

/* telefono in orizzontale (schermo basso, al massimo 500 px): la foto a tutta riga
   diventava una striscia larga e bassa e se ne vedeva un terzo. Qui testo e foto stanno
   affiancati come sul computer e la foto e' alta quanto lo schermo sotto la barra (mai
   piu' larga del 46% dello schermo), con la forma e l'inquadratura scelte in Aspetto.
   --tel-r e' la forma in numero (larghezza / altezza), --foto-r quella vera della foto. */
.tel-panoramica{--tel-r:1.6}.tel-classica{--tel-r:1.3333}.tel-quadrata{--tel-r:1}.tel-verticale{--tel-r:.8}
.tel-intera{--tel-r:var(--foto-r,.8)}
@media(orientation:landscape) and (max-height:500px){
  .apertura-griglia{grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,44px);align-items:center}
  .apertura-griglia:has(.senza-foto){grid-template-columns:minmax(0,1fr)}
  .apertura-figura{order:0;align-self:center;width:auto}
  .apertura-figura.senza-foto{display:none}
  .apertura-figura::before{content:none}
  .apertura-figura:not(.senza-foto),.chi-foto:has(img){overflow:hidden;border-radius:var(--raggio);
    box-shadow:0 12px 34px var(--ombra-lieve)}
  .apertura-figura img,.chi-foto img{position:static;display:block;max-width:none;max-height:none;box-shadow:none;
    height:min(calc(100svh - var(--altezza-barra,64px) - 32px),calc(46vw / var(--tel-r)));
    width:auto;aspect-ratio:var(--tel-r);object-fit:cover;
    object-position:var(--tel-x,50%) var(--tel-y,50%);
    transform:scale(var(--tel-zoom,1));transform-origin:var(--tel-x,50%) var(--tel-y,50%)}
  /* (due classi, come le regole di «Foto intera» per il telefono in verticale, che qui non valgono) */
  .apertura-figura.tel-intera img,.chi-foto.tel-intera img{transform:none;aspect-ratio:var(--tel-r);
    height:min(calc(100svh - var(--altezza-barra,64px) - 32px),calc(46vw / var(--tel-r)))}
  /* «Chi sono»: foto a sinistra e testo a destra, la formazione sotto a tutta riga */
  .chi-griglia,.chi-griglia.con-formazione{grid-template-columns:auto minmax(0,1fr)}
  .chi-griglia.con-formazione{grid-template-areas:'foto testo' 'form form'}
  .chi-foto:has(img){max-width:none;width:fit-content}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}}
@media print{.barra,.prenota-guscio,.invito-recensione,.piede,.piede-sito,.invito-prenota{display:none}
  .animato .rivela{opacity:1!important;transform:none!important}}

@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .barra{view-transition-name:barra}
  @keyframes vtEsce{to{opacity:0;transform:translateY(-8px)}}
  @keyframes vtEntra{from{opacity:0;transform:translateY(14px)}}
  ::view-transition-old(root){animation:vtEsce .18s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vtEntra .45s var(--molla) .05s both}
}

:root{
  --curva:cubic-bezier(.32,.72,0,1);
  --ombra-tinta:color-mix(in srgb,var(--testo) 16%,transparent);
  --ombra-tinta-lieve:color-mix(in srgb,var(--testo) 8%,transparent);
  --filo:color-mix(in srgb,var(--bordo-forte) 70%,transparent);
  --luce:inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent);
}

/* carta: grana fissa, sopra a tutto ma senza intercettare niente */
body::after{content:'';position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.022;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
@media print{body::after{display:none}}

/* separatori: la linea fra le sezioni sfuma verso i bordi */
.sezione{border-image:linear-gradient(90deg,transparent,var(--bordo) 18%,var(--bordo) 82%,transparent) 1;
  padding-bottom:calc(var(--stacco) * 1.08)}
.sezione:first-of-type{border-image:none}

/* occhielli: piu' piccoli e ariosi, con un trattino davanti */
.occhiello{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.18em}
.occhiello::before{content:'';width:22px;height:1px;background:currentColor;opacity:.55;flex:none}
/* nell'apertura l'occhiello e' un cartellino */
.apertura .occhiello{padding:7px 14px 7px 12px;border-radius:999px;background:var(--accento-velo);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accento) 18%,transparent)}
.apertura .occhiello::before{width:6px;height:6px;border-radius:50%;opacity:.9}

/* titoli: un filo piu' stretti quando sono grandi */
h1{letter-spacing:-.022em}
h2{letter-spacing:-.016em}

/* numeri che si leggono in colonna */
.orario,.cella,.prezzo,.pastiglia,.pastiglia-quando,.calendario-mese,.scheda .durata,.stelle{font-variant-numeric:tabular-nums lining-nums}

/* bottoni: freccia nel suo cerchietto, molla al passaggio, pressione al clic */
.bottone{transition:transform .35s var(--curva),box-shadow .35s var(--curva),filter .25s ease,background-color .25s ease;
  box-shadow:var(--luce),0 1px 2px var(--ombra-tinta-lieve),0 10px 22px -12px color-mix(in srgb,var(--accento) 70%,transparent)}
.bottone:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:var(--luce),0 2px 4px var(--ombra-tinta-lieve),0 16px 30px -14px color-mix(in srgb,var(--accento) 75%,transparent)}
.bottone:active{transform:translateY(0) scale(.98);transition-duration:.1s}
.bottone > .icona:last-child{box-sizing:content-box;padding:6px;margin:-4px -12px -4px 2px;border-radius:50%;
  background:color-mix(in srgb,currentColor 15%,transparent);
  transition:transform .45s var(--curva),background-color .25s ease}
.bottone:hover > .icona:last-child{transform:translate(3px,-1px) scale(1.06);background:color-mix(in srgb,currentColor 22%,transparent)}
.bottone.vuoto{box-shadow:none;background:color-mix(in srgb,var(--chiaro) 55%,transparent)}
.bottone.vuoto:hover{box-shadow:0 10px 24px -16px var(--ombra-tinta);background:var(--chiaro)}
.menu a.bottone{box-shadow:var(--luce),0 8px 18px -10px color-mix(in srgb,var(--accento) 70%,transparent)}

/* focus: sempre visibile, ma morbido */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accento);outline-offset:3px;border-radius:6px}
.bottone:focus-visible{outline:2px solid var(--accento-forte);outline-offset:4px;border-radius:999px}
.campo input,.campo textarea,.campo select{transition:border-color .2s ease,box-shadow .25s var(--curva),background-color .2s ease}
.campo input:hover,.campo textarea:hover,.campo select:hover{border-color:var(--bordo-forte)}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:0;border-color:var(--accento);
  box-shadow:0 0 0 4px var(--accento-velo),0 1px 2px var(--ombra-tinta-lieve)}

/* foto: doppia cornice (un filo staccato dalla foto) e ombra del colore del testo */
.apertura-figura img,.apertura-figura .segnaposto,.chi-foto img{
  outline:1px solid var(--filo);outline-offset:7px;
  box-shadow:0 30px 60px -32px var(--ombra-tinta),0 8px 18px -12px var(--ombra-tinta-lieve)}
@media(max-width:620px){
  .apertura-figura img,.apertura-figura .segnaposto,.chi-foto img{outline-offset:5px}
}

/* schede: luce dall'alto, ombra tinta, bordo piu' leggero; si sollevano piano */
.scheda,.percorso-carte .passo,.prossime,.recensione,.sede,.ebook-scheda,.contatto-voce{
  border-color:color-mix(in srgb,var(--bordo) 85%,transparent);
  box-shadow:var(--luce),0 1px 2px var(--ombra-tinta-lieve),0 14px 34px -22px var(--ombra-tinta)}
@media(hover:hover){
  .scheda,.percorso-carte .passo,.recensione,.sede{transition:transform .5s var(--curva),box-shadow .5s var(--curva),border-color .3s ease}
  .scheda:hover,.animato .percorso-carte .passo:hover,.recensione:hover,.sede:hover{transform:translateY(-3px);
    border-color:var(--bordo-forte);
    box-shadow:var(--luce),0 2px 4px var(--ombra-tinta-lieve),0 24px 44px -24px var(--ombra-tinta)}
}

/* prenotazione: orari e giorni con la stessa molla, la scelta in rilievo */
.orario,.cella,.scelta,.pastiglia{transition:border-color .2s ease,background-color .2s ease,color .2s ease,
  transform .35s var(--curva),box-shadow .35s var(--curva)}
@media(hover:hover){.orario:hover,.cella:hover:not(:disabled),.pastiglia:hover{transform:translateY(-1px)}}
.orario:active,.cella:active:not(:disabled),.pastiglia:active{transform:scale(.97)}
.orario.attiva,.cella.attiva,.scelta.attiva{box-shadow:var(--luce),0 8px 18px -10px color-mix(in srgb,var(--accento) 75%,transparent)}

/* barra in alto: scorrendo diventa un'isola sospesa (sul computer) */
@media(min-width:1061px){
  .barra-int{position:relative;isolation:isolate;width:min(calc(var(--largh-max) + 36px),100% - var(--lato)*2 + 36px);padding-inline:18px}
  .barra-int::before{content:'';position:absolute;inset:6px 0;z-index:-1;border-radius:999px;pointer-events:none;
    background:color-mix(in srgb,var(--fondo) 82%,transparent);
    box-shadow:inset 0 0 0 1px var(--filo),0 18px 40px -22px var(--ombra-tinta);
    opacity:0;transform:scale(.985);transition:opacity .45s var(--curva),transform .45s var(--curva)}
  .animato .barra{transition:background-color .35s ease,border-color .35s ease}
  .animato .barra.staccata{background:transparent;border-bottom-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .animato .barra.staccata .barra-int::before{opacity:1;transform:none}
  @supports (backdrop-filter:blur(8px)){
    .animato .barra.staccata .barra-int::before{backdrop-filter:blur(14px) saturate(1.15)}
  }
  .animato .barra.staccata .barra-avanzamento{opacity:0}
}

/* menu del telefono: le righe diventano una X */
.apri-menu{transition:background-color .2s ease,border-color .2s ease,transform .2s var(--curva)}
.apri-menu:active{transform:scale(.94)}
.apri-menu .righe{position:relative;width:18px;height:12px;display:block}
.apri-menu .righe span{position:absolute;left:0;width:100%;height:1.6px;border-radius:2px;background:currentColor;
  transition:transform .45s var(--curva),top .45s var(--curva),opacity .2s ease}
.apri-menu .righe span:nth-child(1){top:0}
.apri-menu .righe span:nth-child(2){top:5.2px}
.apri-menu .righe span:nth-child(3){top:10.4px}
.apri-menu[aria-expanded=true] .righe span:nth-child(1){top:5.2px;transform:rotate(45deg)}
.apri-menu[aria-expanded=true] .righe span:nth-child(2){opacity:0;transform:scaleX(.2)}
.apri-menu[aria-expanded=true] .righe span:nth-child(3){top:5.2px;transform:rotate(-45deg)}
@media(max-width:1060px){
  .animato .menu.aperto > *{animation-duration:.55s;animation-timing-function:var(--curva)}
}

/* piede: un fondo appena piu' caldo che chiude la pagina */
.piede-sito{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--chiaro) 45%,transparent) 40%)}

@media(prefers-reduced-motion:reduce){
  .bottone,.bottone > .icona:last-child,.scheda,.orario,.cella,.pastiglia,.apri-menu .righe span,.barra-int::before{transition:none}
}
html.nuovo-stile{
  --nv-r:28px; --nv-r-p:14px;
  --nv-curva:cubic-bezier(.16,1,.3,1);
  --nv-inchiostro:color-mix(in srgb,var(--testo) 88%,#000);
  --nv-crema:var(--fondo);
  --nv-salvia:var(--secondario);
  --nv-salvia-velo:color-mix(in srgb,var(--secondario) 28%,var(--fondo));
  --nv-filo:color-mix(in srgb,var(--testo) 12%,transparent);
  --nv-ombra:0 1px 2px color-mix(in srgb,var(--testo) 6%,transparent),0 24px 48px -28px color-mix(in srgb,var(--testo) 30%,transparent);
  --stacco:clamp(88px,11vw,168px);
  --dopo-titolo:clamp(32px,4vw,56px);
}
html.nuovo-stile h1,html.nuovo-stile h2,html.nuovo-stile h3{font-weight:700;letter-spacing:-.018em}
html.nuovo-stile h1{font-size:clamp(2.5rem,1.3rem + 4.2vw,5rem);line-height:1.04;letter-spacing:-.026em}
html.nuovo-stile h2{font-size:clamp(2rem,1.2rem + 2.8vw,3.6rem);line-height:1.06;letter-spacing:-.022em;max-width:18ch}
html.nuovo-stile h3{letter-spacing:-.02em}
html.nuovo-stile .testo-guida{max-width:58ch}

/* sezioni: niente linee, tanto spazio; gli occhielli solo nell'apertura */
html.nuovo-stile .sezione{border:0;border-image:none;padding:var(--stacco) 0}
html.nuovo-stile .sezione .occhiello{display:none}
html.nuovo-stile .continua a{border:0;padding:0 2px;font-weight:600;color:var(--testo);
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;
  transition:background-size .5s var(--nv-curva),color .2s ease}
html.nuovo-stile .continua a:hover{background-size:0 1.5px;background-position:100% 100%;color:var(--accento-testo)}

/* ---------- barra: un'isola sospesa, sempre ---------- */
html.nuovo-stile .barra{background:transparent;border:0;padding-top:calc(12px + env(safe-area-inset-top));
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;pointer-events:none}
html.nuovo-stile .barra-int{pointer-events:auto;position:relative;width:min(calc(var(--largh-max) + 40px),100% - var(--lato)*2 + 40px,100% - 16px);padding:8px 8px 8px 20px;
  border-radius:999px;background:color-mix(in srgb,var(--fondo) 78%,transparent);
  box-shadow:inset 0 0 0 1px var(--nv-filo),inset 0 1px 0 color-mix(in srgb,#fff 60%,transparent),0 18px 40px -24px color-mix(in srgb,var(--testo) 45%,transparent);
  transition:transform .6s var(--nv-curva),box-shadow .4s ease}
@supports (backdrop-filter:blur(8px)){
  html.nuovo-stile .barra-int{backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
}
html.nuovo-stile .barra-int::before{display:none}
html.nuovo-stile .barra-avanzamento{left:28px;right:28px;width:auto;bottom:2px;height:2px;border-radius:2px;opacity:.7}
html.nuovo-stile.animato .barra.staccata{background:transparent;box-shadow:none}
html.nuovo-stile .marchio-sotto{font-size:.72rem;letter-spacing:.16em}
html.nuovo-stile .menu a:not(.bottone){font-weight:500}
html.nuovo-stile .menu a.bottone{padding:10px 20px}
@media(max-width:1060px){
  html.nuovo-stile .barra-int{padding:6px 6px 6px 16px}
  html.nuovo-stile .apri-menu{border-radius:999px;background:var(--accento);color:var(--su-accento);border:0}
  /* menu a tutto schermo, nel bordeaux della fascia delle prenotazioni: sfumato, piu' chiaro in alto
     a destra (dove si apre) e piu' profondo in basso, con le voci grandi */
  html.nuovo-stile .menu{inset:0;height:100dvh;max-height:none;border:0;box-shadow:none;color:var(--su-accento);
    background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--accento) 78%,#fff),transparent 60%),
               linear-gradient(165deg,var(--accento) 0%,color-mix(in srgb,var(--accento) 72%,#000) 100%);
    padding:calc(var(--altezza-barra,76px) + 40px + env(safe-area-inset-top)) clamp(24px,7vw,56px) 40px;justify-content:flex-start;
    clip-path:circle(0 at calc(100% - 44px) 40px);transform:none;transition:clip-path .7s var(--nv-curva),visibility .7s}
  html.nuovo-stile .menu.aperto{clip-path:circle(150% at calc(100% - 44px) 40px)}
  html.nuovo-stile .menu a{color:var(--su-accento);font-family:var(--f-titoli);font-weight:600;letter-spacing:-.02em;
    font-size:clamp(1.9rem,8vw,2.8rem);min-height:auto;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--su-accento) 16%,transparent)}
  html.nuovo-stile .menu a:hover,html.nuovo-stile .menu a[aria-current=page]{color:color-mix(in srgb,var(--su-accento) 72%,var(--accento));background:none}
  html.nuovo-stile .menu a.bottone{font-family:var(--f-testo);font-size:1.05rem;color:var(--accento-testo);background:var(--su-accento);margin-top:28px;border-bottom:0}
  html.nuovo-stile .menu .icona-social,html.nuovo-stile .menu .social-menu a{color:var(--su-accento)}
  html.nuovo-stile .barra:has(.menu.aperto) .barra-int{background:transparent;box-shadow:none;backdrop-filter:none}
  html.nuovo-stile .barra:has(.menu.aperto) .marchio{color:var(--su-accento)}
  html.nuovo-stile .barra:has(.menu.aperto) .marchio-sotto{color:color-mix(in srgb,var(--su-accento) 72%,transparent)}
  html.nuovo-stile .barra:has(.menu.aperto) .apri-menu{background:var(--su-accento);color:var(--accento-testo)}
}

/* ---------- apertura: a tutta altezza, foto ad arco ---------- */
html.nuovo-stile .apertura{min-height:calc(100dvh - 96px);display:grid;align-items:center;padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,88px)}
html.nuovo-stile .apertura::before{inset:-30% -10% auto auto;width:min(900px,110vw);opacity:1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--secondario) 45%,transparent),transparent 70%),
             radial-gradient(closest-side at 30% 70%,var(--accento-velo),transparent 75%)}
html.nuovo-stile .apertura::after{content:'';position:absolute;z-index:-1;left:-12%;bottom:-30%;width:min(640px,90vw);aspect-ratio:1;border-radius:50%;
  pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--secondario) 30%,transparent),transparent 70%)}
@media(min-width:941px){
  html.nuovo-stile .apertura-griglia{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,6vw,104px);align-items:center}
}
html.nuovo-stile .apertura h1{margin-bottom:.4em}
html.nuovo-stile .apertura .guida{max-width:46ch;color:var(--tenue)}
html.nuovo-stile .apertura .occhiello{background:color-mix(in srgb,var(--fondo) 70%,transparent);
  box-shadow:inset 0 0 0 1px var(--nv-filo);color:var(--testo);margin-bottom:22px}
html.nuovo-stile .apertura .occhiello::before{background:var(--accento)}
html.nuovo-stile .apertura-azioni{gap:14px;margin-top:10px}
html.nuovo-stile .garanzie{gap:8px;margin-top:30px}
html.nuovo-stile .garanzie li{padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--fondo) 70%,transparent);
  box-shadow:inset 0 0 0 1px var(--nv-filo);font-size:.88rem}
html.nuovo-stile .prossime{border:0;border-radius:var(--nv-r);background:color-mix(in srgb,var(--chiaro) 82%,transparent);
  box-shadow:inset 0 0 0 1px var(--nv-filo),var(--nv-ombra);padding:20px 22px;margin-top:32px}
html.nuovo-stile .prossime-titolo{letter-spacing:.14em;font-size:.74rem}
@media(min-width:941px){
  html.nuovo-stile .apertura-figura{border-radius:999px 999px var(--nv-r) var(--nv-r);overflow:hidden;
    box-shadow:var(--nv-ombra);isolation:isolate}
  html.nuovo-stile .apertura-figura img,html.nuovo-stile .apertura-figura .segnaposto{border-radius:0;outline:0;box-shadow:none;
    aspect-ratio:4/5.2;max-height:min(78dvh,760px);width:100%;object-fit:cover}
  html.nuovo-stile .apertura-cartellino{left:16px;bottom:16px}
}

/* ---------- la striscia che scorre ---------- */
html.nuovo-stile .nv-striscia{overflow:hidden;padding:26px 0;border-block:1px solid var(--nv-filo);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
html.nuovo-stile .nv-striscia-nastro{display:flex;width:max-content;gap:clamp(36px,5vw,72px)}
html.nuovo-stile .nv-striscia-voce{display:inline-flex;align-items:center;gap:14px;white-space:nowrap;
  font-family:var(--f-titoli);font-weight:600;font-size:clamp(1.25rem,1rem + 1vw,1.9rem);letter-spacing:-.02em;color:var(--testo)}
html.nuovo-stile .nv-striscia-voce .icona{color:var(--accento-testo);width:1.1em;height:1.1em}
html.nuovo-stile .nv-striscia-voce::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--secondario);margin-left:clamp(22px,3vw,58px)}
@media(prefers-reduced-motion:no-preference){
  html.nuovo-stile.animato .nv-striscia-nastro{animation:nv-scorre 48s linear infinite}
  html.nuovo-stile.animato .nv-striscia:hover .nv-striscia-nastro{animation-play-state:paused}
}
@keyframes nv-scorre{to{transform:translateX(-50%)}}

/* ---------- bottoni ---------- */
html.nuovo-stile .bottone{padding:16px 28px}
html.nuovo-stile .bottone.vuoto{border:0;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--testo) 22%,transparent);background:transparent}
html.nuovo-stile .bottone.vuoto:hover{box-shadow:inset 0 0 0 1.5px var(--testo);background:color-mix(in srgb,var(--chiaro) 60%,transparent)}
html.nuovo-stile .bottone{will-change:auto}

/* ---------- specializzazioni: indice + vetrina ----------
   Sul computer: a sinistra l'elenco degli ambiti, in grande, come l'indice di una
   rivista; a destra una vetrina ferma (sticky) che mostra l'ambito scelto col mouse,
   col Tab o col dito: icona grande, titolo, frase e «Prenota una visita». La vetrina
   la crea script-nuovo-stile.php; senza JavaScript resta l'elenco con le frasi.
   Le frasi brevi stanno benissimo in vetrina: nessuna scheda vuota.
   Sul telefono: un elenco con la frase sotto ogni titolo. */
html.nuovo-stile #specializzazioni .nv-spec{margin-top:var(--dopo-titolo)}
html.nuovo-stile #specializzazioni .specialita{display:block;margin:0;padding:0;list-style:none;counter-reset:none;
  border-top:1px solid var(--nv-filo)}
html.nuovo-stile #specializzazioni .specialita-voce{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:'icona titolo' 'icona frase';column-gap:18px;row-gap:2px;align-items:center;
  padding:18px 6px;margin:0;border:0;border-bottom:1px solid var(--nv-filo);border-radius:0;background:none;box-shadow:none;
  min-height:0;text-align:left;cursor:default;transform:none;outline-offset:-2px}
html.nuovo-stile #specializzazioni .specialita-voce::before,html.nuovo-stile #specializzazioni .specialita-voce::after{display:none}
html.nuovo-stile #specializzazioni .specialita-voce > .specialita-fronte{display:contents}
html.nuovo-stile #specializzazioni .specialita-icona{grid-area:icona;align-self:start;width:44px;height:44px;border-radius:14px;
  background:var(--nv-salvia-velo);color:var(--accento-testo);box-shadow:none;transition:background-color .35s ease,color .35s ease,transform .5s var(--nv-curva)}
html.nuovo-stile #specializzazioni .specialita-icona .icona{width:21px;height:21px}
html.nuovo-stile #specializzazioni h3{grid-area:titolo;margin:0;font-size:clamp(1.15rem,1rem + .5vw,1.45rem);line-height:1.2;letter-spacing:-.015em;
  transition:color .3s ease,transform .5s var(--nv-curva)}
html.nuovo-stile #specializzazioni .specialita-pop{grid-area:frase;position:static;inset:auto;opacity:1;visibility:visible;transform:none;
  padding:0;margin:0;background:none;border:0;box-shadow:none;z-index:auto;pointer-events:auto;min-height:0}
html.nuovo-stile #specializzazioni .specialita-pop .specialita-fronte{display:none}
html.nuovo-stile #specializzazioni .specialita-pop p{margin:2px 0 0;color:var(--tenue);text-wrap:pretty}

@media(min-width:941px){
  html.nuovo-stile #specializzazioni .nv-spec{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,104px);align-items:start}
  /* l'elenco: righe tipografiche; la frase la mostra la vetrina (resta per i lettori di schermo) */
  html.nuovo-stile #specializzazioni .specialita-voce{grid-template-areas:'icona titolo';padding:14px 6px;cursor:pointer;
    transition:padding-left .5s var(--nv-curva)}
  html.nuovo-stile #specializzazioni .specialita-pop{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html.nuovo-stile #specializzazioni h3{font-size:clamp(1.3rem,.9rem + 1vw,1.9rem);color:color-mix(in srgb,var(--testo) 52%,transparent)}
  html.nuovo-stile #specializzazioni .specialita-icona{width:40px;height:40px;background:transparent;box-shadow:inset 0 0 0 1px var(--nv-filo);color:var(--tenue)}
  html.nuovo-stile #specializzazioni .specialita-voce.nv-attiva{padding-left:18px}
  html.nuovo-stile #specializzazioni .specialita-voce.nv-attiva h3{color:var(--testo)}
  html.nuovo-stile #specializzazioni .specialita-voce.nv-attiva .specialita-icona{background:var(--accento);color:var(--su-accento);box-shadow:none;transform:rotate(-6deg)}

  /* la vetrina */
  html.nuovo-stile .nv-vetrina{position:sticky;top:110px;perspective:1200px}
  html.nuovo-stile .nv-vetrina-dentro{--tinta:var(--secondario);position:relative;isolation:isolate;overflow:hidden;
    display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(32px,3.6vw,52px);border-radius:var(--nv-r);
    min-height:clamp(320px,30vw,420px);
    background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--tinta) 55%,transparent),transparent 60%),
               linear-gradient(160deg,var(--chiaro),color-mix(in srgb,var(--tinta) 22%,var(--fondo)));
    box-shadow:inset 0 0 0 1px var(--nv-filo),var(--nv-ombra);
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--nv-curva)}
  html.nuovo-stile .nv-vetrina[style*="--nv-tono: 1"] .nv-vetrina-dentro{--tinta:var(--accento)}
  html.nuovo-stile .nv-vetrina[style*="--nv-tono: 2"] .nv-vetrina-dentro{--tinta:color-mix(in srgb,var(--secondario) 60%,var(--testo))}
  html.nuovo-stile .nv-vetrina-dentro::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
    background:radial-gradient(380px circle at var(--mx,70%) var(--my,20%),color-mix(in srgb,#fff 50%,transparent),transparent 60%)}
  html.nuovo-stile .nv-vetrina-icona{display:grid;place-items:center;width:84px;height:84px;border-radius:26px;background:var(--fondo);
    color:var(--accento-testo);box-shadow:0 18px 36px -20px color-mix(in srgb,var(--testo) 50%,transparent)}
  html.nuovo-stile .nv-vetrina-icona .icona{width:40px;height:40px}
  html.nuovo-stile .nv-vetrina-titolo{margin:auto 0 0;font-family:var(--f-titoli);font-weight:700;letter-spacing:-.022em;line-height:1.08;
    font-size:clamp(1.9rem,1.2rem + 1.6vw,2.9rem);color:var(--testo);text-wrap:balance}
  html.nuovo-stile .nv-vetrina-frase{margin:0;font-size:clamp(1.05rem,.95rem + .3vw,1.22rem);line-height:1.55;color:var(--testo);opacity:.8;max-width:34ch}
  html.nuovo-stile .nv-vetrina-link{margin-top:8px;font-weight:600;color:var(--testo);text-decoration:none;
    background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:2px}
  html.nuovo-stile .nv-vetrina-link::after{content:' \2192'}
  @media(prefers-reduced-motion:no-preference){
    html.nuovo-stile .nv-vetrina-dentro.nv-cambia > *{animation:nv-vetrina .6s var(--nv-curva) both}
    html.nuovo-stile .nv-vetrina-dentro.nv-cambia > :nth-child(2){animation-delay:.05s}
    html.nuovo-stile .nv-vetrina-dentro.nv-cambia > :nth-child(3){animation-delay:.1s}
    html.nuovo-stile .nv-vetrina-dentro.nv-cambia > :nth-child(4){animation-delay:.15s}
    @keyframes nv-vetrina{from{opacity:0;transform:translateY(14px)}}
  }
}

/* ---------- visite: un elenco, una riga per visita ---------- */
html.nuovo-stile #servizi .schede{display:block;margin-top:var(--dopo-titolo);border-top:1px solid var(--nv-filo)}
html.nuovo-stile #servizi .scheda{position:relative;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;grid-template-areas:'titolo testo piede' 'durata testo piede';
  column-gap:clamp(20px,4vw,64px);row-gap:6px;align-items:center;padding:clamp(26px,3vw,40px) clamp(4px,1.5vw,24px);
  border:0;border-bottom:1px solid var(--nv-filo);border-radius:0;background:transparent;box-shadow:none;transform:none}
html.nuovo-stile #servizi .scheda::before{content:'';position:absolute;inset:6px 0;z-index:-1;border-radius:var(--nv-r);
  background:var(--chiaro);box-shadow:inset 0 0 0 1px var(--nv-filo);opacity:0;transform:scaleY(.86);
  transition:opacity .35s ease,transform .6s var(--nv-curva)}
html.nuovo-stile #servizi .scheda:hover{transform:none;box-shadow:none}
html.nuovo-stile #servizi .scheda:hover::before{opacity:1;transform:none}
html.nuovo-stile #servizi .scheda h3{grid-area:titolo;margin:0;font-size:clamp(1.45rem,1.1rem + 1.2vw,2.2rem);align-self:end}
html.nuovo-stile #servizi .scheda .durata{grid-area:durata;margin:0;align-self:start}
html.nuovo-stile #servizi .scheda > p{grid-area:testo;margin:0;max-width:52ch}
html.nuovo-stile #servizi .scheda-piede{grid-area:piede;margin:0;padding:0;border:0;gap:22px;flex-wrap:nowrap}
html.nuovo-stile #servizi .prezzo{margin:0;font-size:clamp(1.5rem,1.2rem + .8vw,2rem);font-weight:700;color:var(--testo)}
html.nuovo-stile #servizi .scheda-prenota{background:var(--testo);color:var(--fondo);border:0;padding:0 20px;min-height:48px;
  border-radius:999px;transition:background-color .25s ease,transform .5s var(--nv-curva)}
html.nuovo-stile #servizi .scheda-prenota:hover{background:var(--accento);color:var(--su-accento)}
@media(max-width:860px){
  html.nuovo-stile #servizi .scheda{grid-template-columns:minmax(0,1fr);grid-template-areas:'durata' 'titolo' 'testo' 'piede';row-gap:10px}
  html.nuovo-stile #servizi .scheda-piede{justify-content:space-between;margin-top:8px}
}

/* ---------- chi sono ---------- */
@media(min-width:941px){
  html.nuovo-stile #chi-sono .chi-griglia{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
  html.nuovo-stile .chi-foto img{border-radius:999px 999px var(--nv-r) var(--nv-r);outline:0;aspect-ratio:4/5;object-fit:cover;box-shadow:var(--nv-ombra)}
}
/* ---------- percorso: il titolo resta fermo, le tappe si accendono ----------
   Sul computer il titolo sta fermo a sinistra mentre a destra scorrono le tappe, righe
   grandi; ognuna si accende (da tenue a piena, con una barra colorata che cresce)
   quando arriva al centro dello schermo. Ogni tappa e' alta quanto il suo testo. */
html.nuovo-stile #metodo .percorso-linea{display:none}
html.nuovo-stile #metodo .percorso-carte{display:block;list-style:none;padding:0;margin:var(--dopo-titolo) 0 0;counter-reset:none;border-top:1px solid var(--nv-filo)}
html.nuovo-stile #metodo .percorso-carte .passo{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
  padding:clamp(22px,2.6vw,34px) 0 clamp(22px,2.6vw,34px) 26px;margin:0;border:0;border-bottom:1px solid var(--nv-filo);border-radius:0;
  background:none;box-shadow:none;min-height:0;transform:none}
html.nuovo-stile #metodo .percorso-carte .passo::before{content:'';position:absolute;left:0;top:clamp(22px,2.6vw,34px);bottom:clamp(22px,2.6vw,34px);
  width:3px;border-radius:3px;background:var(--accento);transform-origin:top}
html.nuovo-stile #metodo .percorso-carte .passo h3{margin:0;font-size:clamp(1.35rem,1rem + 1.2vw,2.1rem);line-height:1.12;letter-spacing:-.02em}
html.nuovo-stile #metodo .percorso-carte .passo p{margin:0;color:var(--tenue);max-width:56ch;text-wrap:pretty}
html.nuovo-stile.animato #metodo .percorso-carte .passo:hover{transform:none;box-shadow:none}
@media(min-width:941px){
  /* Come funziona: a destra le fasi salgono e si impilano, tutte alte uguali, ognuna
     18px sotto la precedente; a sinistra titolo e link stanno fermi, centrati accanto
     alla pila. Quando l'ultima fase arriva al suo posto, pila e testo se ne vanno
     insieme, in un solo blocco. --nv-pila (altezza della pila) la misura
     script-nuovo-stile.php; la pila sta al centro dello spazio sotto la barra. */
  html.nuovo-stile #metodo > .contenitore{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(40px,6vw,104px);
    align-items:start;--nv-passo:18px;--nv-cima:max(104px,calc(84px + (100svh - 84px - var(--nv-pila,0px)) / 2))}
  html.nuovo-stile #metodo .nv-percorso-testa{position:sticky;top:var(--nv-cima);min-height:var(--nv-pila,0px);
    display:flex;flex-direction:column;justify-content:center}
  html.nuovo-stile #metodo .nv-percorso-testa > :last-child{margin-bottom:0}
  html.nuovo-stile #metodo > .contenitore > .percorso-carte{margin-top:0}
  /* --nv-h: l'altezza della fase piu' lunga (tutte uguali); il margine sotto ogni fase
     la fa restare ferma finche' non arriva l'ultima, cosi' la pila se ne va intera */
  html.nuovo-stile #metodo .percorso-carte{border-top:0;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;row-gap:clamp(60px,13vh,140px)}
  html.nuovo-stile #metodo .percorso-carte .passo{position:sticky;top:calc(var(--nv-cima) + var(--nv-n,0) * var(--nv-passo));
    grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;padding:clamp(26px,2.6vw,38px) clamp(26px,2.8vw,40px);
    box-sizing:border-box;height:var(--nv-h,auto);margin:0 0 calc((var(--nv-ultimo,0) - var(--nv-n,0)) * var(--nv-passo));
    border:0;border-radius:var(--nv-r);background:var(--chiaro);
    box-shadow:inset 0 0 0 1px var(--nv-filo),0 -14px 34px -26px color-mix(in srgb,var(--testo) 45%,transparent),0 22px 44px -34px color-mix(in srgb,var(--testo) 40%,transparent)}
  html.nuovo-stile #metodo .percorso-carte .passo::before{display:none}
  html.nuovo-stile #metodo .percorso-carte .passo:nth-child(2){--nv-n:1;background:var(--nv-salvia-velo)}
  html.nuovo-stile #metodo .percorso-carte .passo:nth-child(3){--nv-n:2;background:color-mix(in srgb,var(--accento) 10%,var(--fondo))}
  html.nuovo-stile #metodo .percorso-carte .passo:nth-child(4){--nv-n:3}
  html.nuovo-stile #metodo .percorso-carte .passo:nth-child(5){--nv-n:4;background:var(--nv-salvia-velo)}
  html.nuovo-stile #metodo .percorso-carte .passo:nth-child(6){--nv-n:5;background:color-mix(in srgb,var(--accento) 10%,var(--fondo))}
  html.nuovo-stile #metodo .percorso-carte .passo:nth-child(n+7){--nv-n:6}
  html.nuovo-stile #metodo .percorso-carte .passo:last-child{background:var(--nv-inchiostro)}
  html.nuovo-stile #metodo .percorso-carte .passo:last-child h3{color:var(--fondo)}
  html.nuovo-stile #metodo .percorso-carte .passo:last-child p{color:color-mix(in srgb,var(--fondo) 75%,transparent)}
  html.nuovo-stile #metodo .percorso-carte .passo h3{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.3rem)}
  /* qui la fase non si «accende» (lo fa gia' salendo): resta piena */
  html.nuovo-stile.animato #metodo .percorso-carte .passo{animation:none;opacity:1}
  /* niente comparsa sfumata: le carte si sovrappongono e devono essere sempre piene */
  html.nuovo-stile.animato #metodo .percorso-carte .passo.rivela{opacity:1;transform:none;filter:none;transition:none}
}
/* sul telefono le tappe si accendono arrivando al centro (dove il browser lo sa fare; altrimenti sono gia' accese);
   sul computer invece salgono e si impilano (vedi sopra) */
@media(prefers-reduced-motion:no-preference) and (max-width:940px){
  @supports (animation-timeline:view()){
    html.nuovo-stile.animato #metodo .percorso-carte .passo{animation:nv-tappa linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
    html.nuovo-stile.animato #metodo .percorso-carte .passo::before{animation:nv-barra linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
    @keyframes nv-tappa{from{opacity:.28;transform:translateX(18px)}to{opacity:1;transform:none}}
    @keyframes nv-barra{from{transform:scaleY(0)}to{transform:none}}
  }
}

/* ---------- formazione: gli anni in grande ----------
   Accanto a ogni titolo di studio l'anno, grande e colorato (o l'icona, se l'anno manca);
   titolo intero, tipo ed ente sempre leggibili. Due colonne sul computer. */
html.nuovo-stile .chi-formazione{margin-top:clamp(28px,4vw,56px)}
html.nuovo-stile .formazione-testa{margin-bottom:10px}
html.nuovo-stile .formazione-titolo{font-size:1.25rem;letter-spacing:-.01em;text-transform:none}
html.nuovo-stile .formazione-frecce{display:none!important}
html.nuovo-stile .formazione-riga{overflow:visible;margin:0;padding:0;mask-image:none;-webkit-mask-image:none}
html.nuovo-stile ul.formazione{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:0 clamp(28px,4vw,64px);
  width:auto;overflow:visible;padding:0;margin:0;scroll-snap-type:none;transform:none}
html.nuovo-stile ul.formazione > .titolo-studio{position:relative;display:grid;grid-template-columns:5.6rem minmax(0,1fr);column-gap:18px;align-items:start;
  width:auto;min-width:0;flex:none;height:auto;min-height:0;padding:18px 0;margin:0;border:0;border-top:1px solid var(--nv-filo);border-radius:0;
  background:none;box-shadow:none;cursor:default;transform:none;scroll-snap-align:none}
html.nuovo-stile ul.formazione > .titolo-studio::after{display:none}
html.nuovo-stile ul.formazione > .titolo-studio > .specialita-fronte{display:none}
html.nuovo-stile .nv-anno{font-family:var(--f-titoli);font-weight:700;font-size:clamp(1.7rem,1.3rem + 1vw,2.3rem);line-height:1;letter-spacing:-.03em;
  color:var(--accento-testo);font-variant-numeric:tabular-nums lining-nums;padding-top:2px;transition:transform .5s var(--nv-curva)}
html.nuovo-stile .nv-anno.senza{color:var(--accento-testo)}
html.nuovo-stile .nv-anno.senza .icona{width:30px;height:30px}
@media(hover:hover){html.nuovo-stile ul.formazione > .titolo-studio:hover .nv-anno{transform:translateX(4px)}}
html.nuovo-stile ul.formazione .specialita-pop{position:static;inset:auto;opacity:1;visibility:visible;transform:none;display:block;
  padding:0;margin:0;background:none;border:0;box-shadow:none;width:auto;min-width:0;max-width:none;z-index:auto;pointer-events:auto;translate:none}
html.nuovo-stile ul.formazione .specialita-pop .specialita-fronte{display:block;padding:0;min-height:0}
html.nuovo-stile ul.formazione .specialita-pop .specialita-icona{display:none}
html.nuovo-stile ul.formazione .specialita-pop strong{display:block;font-family:var(--f-titoli);font-weight:600;font-size:1.08rem;line-height:1.3;letter-spacing:-.01em;color:var(--testo);text-wrap:balance}
html.nuovo-stile ul.formazione .titolo-studio-tipo,html.nuovo-stile ul.formazione .titolo-studio-ente{margin:3px 0 0;font-size:.9rem;line-height:1.45;color:var(--tenue)}
html.nuovo-stile ul.formazione .titolo-studio-tipo{font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--testo) 60%,transparent)}
html.nuovo-stile ul.formazione > .titolo-studio:focus-visible{outline:2px solid var(--accento);outline-offset:4px}
@media(max-width:620px){
  html.nuovo-stile ul.formazione > .titolo-studio{grid-template-columns:4.4rem minmax(0,1fr);column-gap:12px}
}

/* ---------- recensioni: a mosaico ---------- */
html.nuovo-stile .recensioni{display:block;columns:3 300px;column-gap:16px}
html.nuovo-stile .recensione{break-inside:avoid;margin:0 0 16px;border:0;border-radius:var(--nv-r);padding:30px;
  background:var(--chiaro);box-shadow:inset 0 0 0 1px var(--nv-filo);position:relative}
html.nuovo-stile .recensione::before{content:'\201C';display:block;font-family:var(--f-titoli);font-size:4.2rem;line-height:.6;
  color:var(--secondario);margin-bottom:10px;height:30px}
html.nuovo-stile .recensione.evidenza{background:var(--testo);color:var(--fondo)}
html.nuovo-stile .recensione.evidenza p,html.nuovo-stile .recensione.evidenza .firma{color:var(--fondo)}
html.nuovo-stile .recensione.evidenza::before{color:var(--accento-velo)}

/* ---------- domande: il titolo resta fermo a sinistra ---------- */
@media(min-width:861px){
  html.nuovo-stile .faq-griglia{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px)}
  html.nuovo-stile .faq-griglia > div:first-child{position:sticky;top:120px}
}
html.nuovo-stile .faq{display:grid;gap:10px}
html.nuovo-stile .faq-voce{border:0;border-radius:var(--nv-r-p);background:var(--chiaro);box-shadow:inset 0 0 0 1px var(--nv-filo);
  transition:background-color .3s ease,box-shadow .3s ease}
html.nuovo-stile .faq-voce[open]{background:color-mix(in srgb,var(--chiaro) 60%,var(--nv-salvia-velo))}
html.nuovo-stile .faq-voce summary{padding:20px 22px;font-family:var(--f-titoli);font-weight:600;font-size:1.12rem;letter-spacing:-.01em}
html.nuovo-stile .faq-voce summary::after{width:30px;height:30px;border:0;border-radius:50%;transform:none;margin:0 0 0 16px;
  background:var(--fondo) no-repeat center/12px 12px;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:12px 1.6px,1.6px 12px;box-shadow:inset 0 0 0 1px var(--nv-filo);transition:transform .45s var(--nv-curva)}
html.nuovo-stile .faq-voce[open] summary::after{transform:rotate(135deg)}
html.nuovo-stile .faq-risposta{padding:0 22px 6px}

/* ---------- contatti e sedi ---------- */
html.nuovo-stile .recapito,html.nuovo-stile .sede,html.nuovo-stile .ebook-scheda{border:0;border-radius:var(--nv-r);
  background:var(--chiaro);box-shadow:inset 0 0 0 1px var(--nv-filo)}
html.nuovo-stile .recapito{padding:22px 24px;transition:transform .5s var(--nv-curva),box-shadow .3s ease}
html.nuovo-stile .recapito:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--nv-filo),var(--nv-ombra)}

/* ---------- prenotazione ---------- */
html.nuovo-stile .prenota-guscio,html.nuovo-stile .calendario{border-radius:var(--nv-r)}
html.nuovo-stile .cella{border-radius:var(--nv-r-p)}
html.nuovo-stile .orario{border-radius:999px}
html.nuovo-stile .scelta{border-radius:var(--nv-r-p)}
html.nuovo-stile .campo input,html.nuovo-stile .campo textarea,html.nuovo-stile .campo select{border-radius:var(--nv-r-p)}

/* ---------- invito a prenotare e piede ----------
   L'invito a prenotare e' quello della versione di prima: fascia bordeaux (il colore
   dell'accento), stesse misure, titolo alla misura di prima. Il piede e' salvia chiaro:
   dopo la fascia bordeaux chiude la pagina con calma, e il nome in grande si legge
   come una filigrana. */
html.nuovo-stile .invito-fascia h2{font-size:clamp(1.62rem,1.15rem + 1.8vw,2.45rem);max-width:none;letter-spacing:-.015em}
html.nuovo-stile .invito-fascia > *{min-width:0}
/* la fascia e' gia' un riquadro: intorno basta poco spazio (prima aveva quello delle sezioni grandi) */
html.nuovo-stile .sezione.invito-prenota{padding:clamp(20px,3vw,44px) 0}
html.nuovo-stile .piede-sito{background:color-mix(in srgb,var(--secondario) 30%,var(--fondo));color:var(--testo);border:0;overflow:hidden}
html.nuovo-stile .piede-sito .piede,html.nuovo-stile .piede-sito .piede-fondo{border-color:color-mix(in srgb,var(--testo) 12%,transparent)}
html.nuovo-stile .piede-sito a,html.nuovo-stile .piede-sito .piede-fondo a{color:var(--testo)}
html.nuovo-stile .piede-sito a:hover{color:var(--accento-testo)}
html.nuovo-stile .piede-sito .piede-nome{color:var(--testo);font-family:var(--f-titoli);font-weight:700;font-size:1.35rem}
html.nuovo-stile .piede-sito .piede-titolo{color:var(--accento-testo)}
html.nuovo-stile .piede-sito .piede-riga,html.nuovo-stile .piede-sito .piede-piccolo,html.nuovo-stile .piede-sito .piede-fondo,
html.nuovo-stile .piede-sito .piede-fondo span{color:var(--tenue)}
html.nuovo-stile .nv-firma{margin:0;padding:clamp(40px,6vw,88px) 0 0;text-align:center;white-space:nowrap;
  font-family:var(--f-titoli);font-weight:700;letter-spacing:-.05em;line-height:.85;
  font-size:clamp(3rem,13.5vw,15rem);color:color-mix(in srgb,var(--secondario) 62%,var(--fondo));user-select:none}

/* ---------- movimento ---------- */
@media(prefers-reduced-motion:no-preference){
  /* comparse: salgono e si mettono a fuoco */
  html.nuovo-stile.animato .rivela{opacity:0;transform:translateY(36px);filter:blur(8px)}
  html.nuovo-stile.animato .rivela.visto{opacity:1;transform:none;filter:none;
    transition:opacity .9s var(--nv-curva),transform 1.1s var(--nv-curva),filter .9s var(--nv-curva);transition-delay:var(--ritardo,0s)}
  /* il titolo dell'apertura entra parola per parola (il JS le separa) */
  html.nuovo-stile.animato .nv-parola{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(6px);
    animation:nv-parola 1s var(--nv-curva) forwards;animation-delay:calc(.15s + var(--i,0) * .07s)}
  @keyframes nv-parola{to{opacity:1;transform:none;filter:none}}
  html.nuovo-stile.animato .apertura-griglia > div:first-child > h1{animation:none}
  /* lo sfondo dell'apertura respira piano */
  html.nuovo-stile.animato .apertura::before{animation:nv-respira 18s ease-in-out infinite alternate}
  html.nuovo-stile.animato .apertura::after{animation:nv-respira 22s ease-in-out infinite alternate-reverse}
  @keyframes nv-respira{to{transform:translate(-6%,8%) scale(1.12)}}
  /* la foto dell'apertura scorre un po' piu' piano della pagina */
  @supports (animation-timeline:view()){
    @media(min-width:941px){
      html.nuovo-stile.animato .apertura-figura img{animation:nv-parallasse linear both;animation-timeline:view();animation-range:exit-crossing 0% exit 100%}
      @keyframes nv-parallasse{from{transform:scale(1.04)}to{transform:translateY(12%) scale(1.14)}}
      /* il nome nel piede sale mentre arriva */
      html.nuovo-stile.animato .nv-firma{animation:nv-firma linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
      @keyframes nv-firma{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
    }
  }
  /* bottoni magnetici: il JS sposta --mx/--my */
  html.nuovo-stile.animato .bottone{translate:var(--bx,0) var(--by,0);transition:transform .35s var(--curva),translate .5s var(--nv-curva),box-shadow .35s var(--curva),filter .25s ease}
}
@media(prefers-reduced-motion:reduce){
  html.nuovo-stile .nv-striscia{overflow-x:auto}
}
/* ---------- telefono: tutto piu' asciutto ----------
   Provato anche con i caratteri ingranditi del telefono (Android e iPhone): il nome
   nella barra resta su una riga, il riquadro per prenotare non esce dallo schermo,
   i titoli non vanno a capo a ogni parola. */
@media(max-width:1060px){
  /* l'isola in alto: bassa e sottile */
  html.nuovo-stile .barra{padding-top:calc(8px + env(safe-area-inset-top))}
  html.nuovo-stile .barra-int{width:calc(100% - 16px);padding:5px 5px 5px 14px;gap:10px;min-height:0}
  html.nuovo-stile .marchio{min-width:0;flex:1 1 auto;gap:10px;padding:0}
  html.nuovo-stile .marchio img{height:30px;width:auto;flex:none}
  html.nuovo-stile .marchio > span,html.nuovo-stile .marchio > div{min-width:0}
  html.nuovo-stile .marchio-nome,html.nuovo-stile .marchio-sotto{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* il nome si legge intero: sugli schermi stretti (o col testo ingrandito) si rimpicciolisce un poco */
  html.nuovo-stile .marchio-nome{font-size:clamp(.82rem,.5rem + 1.75vw,.98rem);line-height:1.2;letter-spacing:-.01em}
  html.nuovo-stile .marchio-sotto{font-size:.6rem;letter-spacing:.14em;margin-top:1px}
  html.nuovo-stile .apri-menu{width:40px;height:40px;flex:none}
}
@media(max-width:360px){
  html.nuovo-stile .marchio-sotto{display:none}
}
@media(max-width:620px){
  /* titoli proporzionati allo schermo stretto (e mai una parola piu' larga della colonna) */
  html.nuovo-stile h1{font-size:clamp(1.95rem,1.1rem + 5.2vw,2.6rem);line-height:1.08}
  html.nuovo-stile h2{font-size:clamp(1.6rem,1rem + 3.6vw,2.1rem);line-height:1.12}
  html.nuovo-stile h1,html.nuovo-stile h2,html.nuovo-stile h3{overflow-wrap:break-word;hyphens:manual}
  html.nuovo-stile .apertura{min-height:0;padding-top:16px}
  html.nuovo-stile .sezione{padding:clamp(56px,14vw,80px) 0}
  /* il riquadro per prenotare: una colonna che non si allarga oltre lo schermo */
  html.nuovo-stile .invito-fascia{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 22px}
  html.nuovo-stile .sezione.invito-prenota{padding:16px 0}
  html.nuovo-stile .invito-fascia h2{margin-bottom:8px}
  html.nuovo-stile .invito-azioni{gap:10px}
  html.nuovo-stile .bottone{padding:14px 22px}
  /* le comparse scorrendo: brevi e leggere (sul telefono niente sfocatura, che pesa) */
  html.nuovo-stile.animato .rivela{transform:translateY(16px);filter:none}
  html.nuovo-stile.animato .rivela.visto{transition:opacity .6s var(--nv-curva),transform .7s var(--nv-curva)}
  html.nuovo-stile.animato .nv-parola{filter:none;transform:translateY(.35em)}
  /* la striscia: piu' piccola e piu' lenta */
  html.nuovo-stile .nv-striscia{padding:16px 0}
  html.nuovo-stile .nv-striscia-voce{font-size:1.05rem;gap:10px}
  html.nuovo-stile.animato .nv-striscia-nastro{animation-duration:70s}
  /* il nome nel piede entra nello schermo (anche se e' lungo) */
  html.nuovo-stile .nv-firma{font-size:clamp(1.9rem,10.5vw,4rem);padding-inline:var(--lato);letter-spacing:-.04em}
}

/* ---------- telefono e tablet: caroselli da scorrere col dito ----------
   Le sezioni con tante voci (specializzazioni, visite, percorso, formazione, recensioni)
   non si allungano piu' una sotto l'altra: diventano una fila di schede che si sfoglia
   col dito, con la scheda successiva che si intravede e i puntini sotto che dicono dove
   si e'. La pagina e' molto piu' corta e ogni sezione sta in uno schermo. */
@media(max-width:940px){
  html.nuovo-stile{--stacco:clamp(44px,11vw,64px);--dopo-titolo:22px}
  html.nuovo-stile .sezione{padding:var(--stacco) 0}
  /* apertura: la foto piu' bassa, cosi' titolo e bottone si vedono subito */
  html.nuovo-stile .apertura{padding:10px 0 28px}
  /* la foto e il suo riquadro hanno la stessa altezza: niente spazio vuoto sotto */
  html.nuovo-stile .apertura-figura::before{aspect-ratio:auto;height:42svh;max-height:none}
  html.nuovo-stile .apertura-figura img,html.nuovo-stile .apertura-figura .segnaposto{height:100%;max-height:none;width:100%;object-fit:cover}
  html.nuovo-stile .chi-foto img{max-height:40svh;width:100%;object-fit:cover}
  html.nuovo-stile .garanzie{margin-top:18px}
  html.nuovo-stile .prossime{margin-top:20px;padding:16px 0 14px 16px}
  /* le prime disponibilita': una fila da scorrere invece di tre righe */
  html.nuovo-stile .prossime .pastiglie,html.nuovo-stile .apertura .prossime .pastiglie{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;padding-right:16px;grid-template-columns:none}
  html.nuovo-stile .prossime .pastiglie::-webkit-scrollbar{display:none}
  html.nuovo-stile .prossime .pastiglia,html.nuovo-stile .apertura .prossime .pastiglia{flex:0 0 auto;width:auto;white-space:nowrap}

  /* il carosello delle visite (specializzazioni, percorso, formazione e recensioni hanno il loro modo, piu' sotto) */
  html.nuovo-stile #servizi .schede{
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:12px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:var(--dopo-titolo) calc(-1 * var(--lato)) 0;padding:4px var(--lato) 6px;scroll-padding-inline:var(--lato);
    border:0;columns:auto;grid-template-columns:none}
  html.nuovo-stile #servizi .schede::-webkit-scrollbar{display:none}
  html.nuovo-stile #servizi .schede > *{flex:0 0 min(84%,360px);scroll-snap-align:start;margin:0}
  /* niente comparsa sfumata dentro i caroselli: le schede a destra sono gia' li' */
  html.nuovo-stile.animato #specializzazioni .specialita > .rivela,html.nuovo-stile.animato #servizi .schede > .rivela,
  html.nuovo-stile.animato #metodo .percorso-carte > .rivela,html.nuovo-stile.animato ul.formazione > .rivela,
  html.nuovo-stile.animato .recensioni > .rivela{opacity:1;transform:none;filter:none;transition:none}

  /* specializzazioni: tutte visibili come «pillole» che vanno a capo (niente da scorrere di lato,
     niente testo tagliato); sotto, la vetrina mostra per intero quella toccata (la prima all'inizio) */
  html.nuovo-stile #specializzazioni .nv-spec{margin-top:var(--dopo-titolo)}
  html.nuovo-stile #specializzazioni .specialita{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
  html.nuovo-stile #specializzazioni .specialita-voce{display:flex;align-items:center;gap:9px;min-height:54px;
    padding:9px 14px;border:0;border-radius:16px;background:var(--chiaro);box-shadow:inset 0 0 0 1px var(--nv-filo);
    cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .3s ease,box-shadow .3s ease}
  html.nuovo-stile #specializzazioni .specialita > .specialita-voce{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:auto;height:auto;text-align:left}
  html.nuovo-stile #specializzazioni .specialita-voce.nv-attiva{padding-left:14px;background:var(--accento);box-shadow:0 10px 22px -12px color-mix(in srgb,var(--accento) 85%,transparent)}
  /* nella pillola solo il nome: l'icona si vede in grande nella vetrina */
  html.nuovo-stile #specializzazioni .specialita-voce .specialita-icona{display:none}
  html.nuovo-stile #specializzazioni .specialita-icona .icona{width:17px;height:17px}
  html.nuovo-stile #specializzazioni .specialita-voce.nv-attiva .specialita-icona{background:color-mix(in srgb,var(--su-accento) 20%,transparent);color:var(--su-accento);transform:none}
  html.nuovo-stile #specializzazioni h3{margin:0;font-size:.9rem;font-weight:600;line-height:1.22;letter-spacing:-.005em;color:var(--testo);
    text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
  html.nuovo-stile #specializzazioni .specialita-voce.nv-attiva h3{color:var(--su-accento)}
  /* la frase resta per chi legge con la voce, ma si vede nella vetrina */
  html.nuovo-stile #specializzazioni .specialita-pop{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html.nuovo-stile .nv-vetrina{display:block;margin-top:14px}
  html.nuovo-stile .nv-vetrina-dentro{--tinta:var(--secondario);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    padding:22px;border-radius:24px;min-height:var(--nv-vetrina-alta,0px);
    background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--tinta) 45%,transparent),transparent 62%),
               linear-gradient(160deg,var(--chiaro),color-mix(in srgb,var(--tinta) 18%,var(--fondo)));
    box-shadow:inset 0 0 0 1px var(--nv-filo)}
  html.nuovo-stile .nv-vetrina[style*="--nv-tono: 1"] .nv-vetrina-dentro{--tinta:var(--accento)}
  html.nuovo-stile .nv-vetrina[style*="--nv-tono: 2"] .nv-vetrina-dentro{--tinta:color-mix(in srgb,var(--secondario) 60%,var(--testo))}
  html.nuovo-stile .nv-vetrina-icona{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--fondo);color:var(--accento-testo)}
  html.nuovo-stile .nv-vetrina-icona .icona{width:23px;height:23px}
  html.nuovo-stile .nv-vetrina-titolo{margin:4px 0 0;font-family:var(--f-titoli);font-weight:700;letter-spacing:-.02em;line-height:1.12;font-size:1.3rem;color:var(--testo);text-wrap:balance}
  html.nuovo-stile .nv-vetrina-frase{margin:0;line-height:1.6;color:var(--testo);opacity:.8}
  html.nuovo-stile .nv-vetrina-link{margin-top:auto;padding-top:6px;font-weight:600;color:var(--testo);text-decoration:none;
    background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:2px}
  html.nuovo-stile .nv-vetrina-link::after{content:' \2192'}
  @media(prefers-reduced-motion:no-preference){
    html.nuovo-stile .nv-vetrina-dentro.nv-cambia > *{animation:nv-vetrina-tel .45s var(--nv-curva) both}
    @keyframes nv-vetrina-tel{from{opacity:0;transform:translateY(8px)}}
  }

  /* visite: una scheda per visita, prezzo e «Prenota» in fondo */
  html.nuovo-stile #servizi .scheda{display:flex;flex-direction:column;gap:8px;padding:22px;border:0;border-radius:24px;
    background:var(--chiaro);box-shadow:inset 0 0 0 1px var(--nv-filo)}
  html.nuovo-stile #servizi .scheda::before{display:none}
  html.nuovo-stile #servizi .scheda h3{font-size:1.35rem;order:-1;align-self:stretch;text-align:left}
  html.nuovo-stile #servizi .scheda .durata,html.nuovo-stile #servizi .scheda > p{align-self:stretch}
  html.nuovo-stile #servizi .scheda-piede{margin-top:auto;padding-top:12px;justify-content:space-between}

  /* percorso: fasi colorate a turno, l'ultima verde scuro */
  /* sul telefono il link «Come funziona nel dettaglio» torna sotto le schede */
  html.nuovo-stile #metodo > .contenitore{display:flex;flex-direction:column}
  html.nuovo-stile #metodo .nv-percorso-testa{display:contents}
  html.nuovo-stile #metodo .continua{order:3}
  html.nuovo-stile #metodo .percorso-carte .passo{position:relative;top:auto;display:flex;flex-direction:column;gap:8px;padding:22px;
    border:0;border-radius:24px;background:var(--chiaro);box-shadow:inset 0 0 0 1px var(--nv-filo)}
  html.nuovo-stile.animato #metodo .percorso-carte .passo{animation:none;opacity:1;transform:none}
  html.nuovo-stile #metodo .percorso-carte .passo::before{display:none}
  html.nuovo-stile #metodo .percorso-carte .passo:nth-child(3n+2){background:var(--nv-salvia-velo);box-shadow:none}
  html.nuovo-stile #metodo .percorso-carte .passo:nth-child(3n){background:color-mix(in srgb,var(--accento) 10%,var(--fondo));box-shadow:none}
  html.nuovo-stile #metodo .percorso-carte .passo:last-child{background:var(--nv-inchiostro);box-shadow:none}
  html.nuovo-stile #metodo .percorso-carte .passo:last-child h3{color:var(--fondo)}
  html.nuovo-stile #metodo .percorso-carte .passo:last-child p{color:color-mix(in srgb,var(--fondo) 78%,transparent)}
  html.nuovo-stile #metodo .percorso-carte .passo h3{font-size:1.3rem}
  /* percorso a tappe (lo prepara script-nuovo-stile.php): i numeri delle fasi in fila, uniti da
     una linea che si riempie, e sotto una fase per volta, intera. Senza script: le fasi in colonna */
  html.nuovo-stile #metodo .percorso-carte{display:grid;gap:12px;margin:var(--dopo-titolo) 0 0;padding:0;border:0}
  html.nuovo-stile #metodo .percorso-carte.nv-tappe{display:block;margin-top:14px}
  html.nuovo-stile #metodo .percorso-carte.nv-tappe > .passo{display:none}
  html.nuovo-stile #metodo .percorso-carte.nv-tappe > .passo.nv-qui{display:flex;min-height:var(--nv-tappa-alta,0px)}
  html.nuovo-stile .nv-fasi{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:var(--dopo-titolo);
    --nv-fatto:0}
  html.nuovo-stile .nv-fasi::before,html.nuovo-stile .nv-fasi::after{content:'';position:absolute;left:20px;right:20px;top:50%;height:2px;
    margin-top:-1px;border-radius:2px;background:var(--nv-filo)}
  html.nuovo-stile .nv-fasi::after{right:auto;width:calc((100% - 40px) * var(--nv-fatto));background:var(--accento);transition:width .5s var(--nv-curva)}
  html.nuovo-stile .nv-fase{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;
    background:var(--fondo);box-shadow:inset 0 0 0 1.5px var(--nv-filo);color:var(--tenue);cursor:pointer;
    font-family:var(--f-titoli);font-weight:600;font-size:.95rem;line-height:1;-webkit-tap-highlight-color:transparent;
    transition:background-color .3s ease,color .3s ease,box-shadow .3s ease,transform .4s var(--nv-curva)}
  html.nuovo-stile .nv-fase.fatta{background:color-mix(in srgb,var(--accento) 14%,var(--fondo));box-shadow:none;color:var(--accento-testo)}
  html.nuovo-stile .nv-fase[aria-current="step"]{background:var(--accento);color:var(--su-accento);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accento) 85%,transparent);transform:scale(1.1)}
  html.nuovo-stile .nv-fase:focus-visible{outline:3px solid var(--accento);outline-offset:3px}
  html.nuovo-stile .nv-fasi-piede{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
  html.nuovo-stile .nv-fasi-conto{color:var(--tenue);font-size:.9rem}
  html.nuovo-stile .nv-fasi-avanti{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;border:0;background:none;
    color:var(--testo);font-family:inherit;font-weight:600;font-size:1rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
  html.nuovo-stile .nv-fasi-avanti::after{content:'\2192';display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
    background:var(--nv-salvia-velo);transition:transform .3s var(--nv-curva)}
  html.nuovo-stile .nv-fasi-avanti:active::after{transform:translateX(3px)}
  @media(prefers-reduced-motion:no-preference){
    html.nuovo-stile .percorso-carte.nv-tappe > .passo.nv-qui > *{animation:nv-tappa-entra .45s var(--nv-curva) both}
    html.nuovo-stile .percorso-carte.nv-tappe > .passo.nv-qui > :nth-child(2){animation-delay:.05s}
    @keyframes nv-tappa-entra{from{opacity:0;transform:translateX(var(--nv-verso,14px))}}
  }

  /* chi sono: prima titolo e presentazione; sotto, la foto a sinistra, piu' stretta (resta accanto
     mentre si scorre), e accanto la formazione in piccolo (anno colorato e titolo sulla stessa riga,
     tutta in vista, niente da scorrere di lato).
     Tipo ed ente restano per chi legge con la voce (.solo-lettori) */
  html.nuovo-stile #chi-sono .chi-griglia.con-formazione{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-areas:'testo testo' 'foto form';grid-template-rows:auto auto;gap:22px 16px;align-items:start}
  html.nuovo-stile #chi-sono .chi-griglia.con-formazione .chi-foto{width:100%;max-width:none;position:sticky;top:84px}
  html.nuovo-stile #chi-sono .chi-griglia.con-formazione .chi-foto img{width:100%!important;height:auto!important;max-height:none!important;
    aspect-ratio:3/4!important;object-fit:cover;border-radius:999px 999px 18px 18px}
  html.nuovo-stile #chi-sono .chi-formazione{margin:0}
  html.nuovo-stile #chi-sono .formazione-testa{margin:0 0 4px}
  html.nuovo-stile #chi-sono .formazione-titolo{margin:0;font-size:1rem}
  html.nuovo-stile #chi-sono ul.formazione{display:block;margin:0;padding:0;overflow:visible}
  html.nuovo-stile #chi-sono ul.formazione > .titolo-studio{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:6px;align-items:baseline;padding:7px 0;
    border:0;border-top:1px solid var(--nv-filo);border-radius:0;background:none;box-shadow:none}
  html.nuovo-stile #chi-sono ul.formazione > .titolo-studio:first-child{border-top:0}
  html.nuovo-stile #chi-sono .nv-anno{font-size:.8rem;letter-spacing:.01em;padding:0}
  html.nuovo-stile #chi-sono .nv-anno.senza .icona{width:16px;height:16px}
  html.nuovo-stile #chi-sono ul.formazione .specialita-pop strong{font-size:.82rem;line-height:1.28;font-weight:600;letter-spacing:0}
  html.nuovo-stile #chi-sono ul.formazione .titolo-studio-tipo,html.nuovo-stile #chi-sono ul.formazione .titolo-studio-ente{display:none}
  /* telefoni piccoli: la foto un po' piu' stretta e l'anno sopra il titolo, cosi' le parole lunghe non si spezzano */
  @media(max-width:374px){
    html.nuovo-stile #chi-sono .chi-griglia.con-formazione{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);column-gap:14px}
    html.nuovo-stile #chi-sono ul.formazione > .titolo-studio{grid-template-columns:minmax(0,1fr);row-gap:1px}
  }

  /* recensioni: nella loro pagina una sotto l'altra; in home un messaggio per volta, intero, con
     le frecce e «1 di 3» (lo prepara script-nuovo-stile.php: si cambia anche col dito, e da solo
     piano piano finche' non lo si tocca). Alto quanto il messaggio piu' lungo: la pagina non salta */
  html.nuovo-stile .recensioni{display:block;columns:auto;margin-top:var(--dopo-titolo)}
  html.nuovo-stile .recensione{padding:22px 22px 20px;margin:0 0 12px}
  html.nuovo-stile .recensione::before{font-size:3.4rem;height:24px;margin-bottom:6px}
  html.nuovo-stile .recensioni.nv-giro{margin-bottom:0}
  html.nuovo-stile .recensioni.nv-giro > .recensione{display:none;margin:0}
  html.nuovo-stile .recensioni.nv-giro > .recensione.nv-qui{display:flex;flex-direction:column;min-height:var(--nv-giro-alta,0px)}
  html.nuovo-stile .recensioni.nv-giro > .recensione.nv-qui .firma{margin-top:auto;padding-top:12px}
  html.nuovo-stile .nv-giro-piede{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
  html.nuovo-stile .nv-giro-conto{color:var(--tenue);font-size:.9rem}
  html.nuovo-stile .nv-giro-frecce{display:flex;gap:8px}
  html.nuovo-stile .nv-giro-freccia{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
    background:var(--nv-salvia-velo);color:var(--testo);font-size:1.15rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:transform .3s var(--nv-curva),background-color .2s ease}
  html.nuovo-stile .nv-giro-freccia:active{transform:scale(.94)}
  html.nuovo-stile .nv-giro-freccia:focus-visible{outline:3px solid var(--accento);outline-offset:3px}
  @media(prefers-reduced-motion:no-preference){
    html.nuovo-stile .recensioni.nv-giro > .recensione.nv-qui > *{animation:nv-tappa-entra .45s var(--nv-curva) both}
  }

  /* i puntini sotto ogni carosello (li crea script-nuovo-stile.php) */
  html.nuovo-stile .nv-punti{display:flex;justify-content:center;gap:7px;margin-top:14px}
  html.nuovo-stile .nv-punti span{width:7px;height:7px;border-radius:999px;background:color-mix(in srgb,var(--testo) 22%,transparent);
    transition:width .35s var(--nv-curva),background-color .25s ease}
  html.nuovo-stile .nv-punti span.qui{width:22px;background:var(--accento)}

  /* «Prenota una visita» sempre a portata di pollice, dopo l'apertura */
  html.nuovo-stile .nv-prenota-fissa{position:fixed;z-index:58;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));
    display:inline-flex;align-items:center;gap:10px;padding:13px 14px 13px 22px;border-radius:999px;text-decoration:none;font-weight:600;
    background:var(--accento);color:var(--su-accento);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--accento) 80%,transparent),var(--luce);
    transform:translate(-50%,160%);transition:transform .5s var(--nv-curva);white-space:nowrap}
  html.nuovo-stile .nv-prenota-fissa.visibile{transform:translate(-50%,0)}
  html.nuovo-stile .nv-prenota-fissa .icona{box-sizing:content-box;padding:5px;border-radius:50%;background:color-mix(in srgb,currentColor 18%,transparent)}
  html.nuovo-stile body:has(.menu.aperto) .nv-prenota-fissa{transform:translate(-50%,160%)}
}
@media(min-width:941px){
  html.nuovo-stile .nv-punti,html.nuovo-stile .nv-prenota-fissa{display:none}
}

@media print{
  html.nuovo-stile .barra,html.nuovo-stile .nv-striscia,html.nuovo-stile .nv-firma{display:none}
  html.nuovo-stile .piede-sito,html.nuovo-stile .invito-prenota{background:none;color:#000}
}