/* =========================================================================
   Font del sito.

   Stavano in un font.css a parte. Erano due fogli bloccanti in fila: il
   browser doveva scaricare il primo per scoprire il secondo, e PageSpeed
   contava quel giro dentro i 1020 ms di blocco del rendering. Uniti, il
   giro e' uno solo. I percorsi ../font/ valgono ancora perche' il file
   sta nella stessa cartella di prima.

   Nella versione precedente erano incorporati in base64 dentro il CSS: mezzo
   megabyte che il browser doveva scaricare *prima* di disegnare qualsiasi cosa.
   Qui sono file veri, e `font-display:swap` fa comparire subito il testo con un
   carattere di sistema, sostituendolo appena il font e' pronto. La pagina si
   vede in un attimo anche con la connessione lenta.
   ========================================================================= */

/* --- Nunito Sans: il testo corrente --- */
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(../font/NunitoSans-400.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url(../font/NunitoSans-400i.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(../font/NunitoSans-600.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(../font/NunitoSans-700.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:900;font-display:swap;
  src:url(../font/NunitoSans-900.woff2) format('woff2')}

/* --- Fraunces: i titoli --- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;
  src:url(../font/Fraunces-400.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;
  src:url(../font/Fraunces-400i.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url(../font/Fraunces-600.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;
  src:url(../font/Fraunces-700.woff2) format('woff2')}

/* --- Italianno: solo la firma in apertura ---
   E' un TTF da 218 KB, piu' pesante degli altri perche' non ne esiste una
   versione woff2 nel pacchetto di partenza. Con `swap` non blocca niente: la
   firma compare quando il file e' arrivato, e nel frattempo la pagina e' gia'
   leggibile. */
@font-face{font-family:'Italianno';font-style:normal;font-weight:400;font-display:swap;
  src:url(../font/Italianno-400.ttf) format('truetype')}

/* =========================================================================
   Rossella Zuccaro — sito ufficiale
   Sistema visivo: maiolica siciliana. Gli stessi colori del portfolio 2026,
   ricavati dalla cornice con i limoni della copertina.
   Tipografia: Italianno (nome), Fraunces (titoli), Nunito Sans (testo).
   ========================================================================= */

:root{
  /* --- colori, identici a quelli del portfolio --- */
  --blu:        #0270AA;   /* accento principale */
  --blu-scuro:  #14456B;   /* fasce piene, nome in copertina */
  --blu-chiaro: #4B93C4;
  --limone:     #EFC33F;   /* accento caldo, bottoni */
  --limone-sc:  #D9A81F;
  --foglia:     #2E7D46;   /* la web serie */

  --panna:  #F9F9ED;
  --panna2: #F2F1DE;
  --bianco: #FFFFFF;
  --ink:    #1D2A33;
  --ink2:   #4A555E;
  --grigio: #8A8B7C;
  --linea:  #DCDBC4;

  /* --- misure --- */
  --wrap: 1180px;
  --r: 4px;
  --ombra:      0 6px 22px rgba(29,42,51,.10);
  --ombra-alta: 0 18px 46px rgba(20,69,107,.18);
  /* Una riga sola su desktop: logo, contatti e menu ci stanno tutti insieme.
     Sotto i 900px il menu si chiude nel panino e i contatti vanno a capo su
     una riga loro — li' --nav-h cresce di conseguenza (vedi il media query). */
  --nav-h: 76px;

  /* scala di spaziatura: un valore solo, usato ovunque */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;
  --s4: 2.25rem; --s5: 3.5rem; --s6: 5rem;
}

/* ---------- reset leggero ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background-color:var(--panna);
  background-image:url("../img/maiolica.svg");
  background-size:320px;
  background-attachment:fixed;
  color:var(--ink2);
  font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(16px,.95rem + .2vw,17.5px);
  line-height:1.75;
  overflow-x:hidden;
}
/* velo sul pattern: ne resta solo un accenno */
body::before{
  content:"";position:fixed;inset:0;
  background:rgba(249,249,237,.955);
  z-index:-1;pointer-events:none;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--blu);text-decoration:none}
a:hover{color:var(--blu-scuro)}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}
:focus-visible{outline:3px solid var(--limone);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  color:var(--ink);line-height:1.14;margin:0 0 .5em;font-weight:700;
}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}

.salta{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blu-scuro);color:#fff;padding:.7rem 1.2rem;
}
.salta:focus{left:0}

/* =========================================================================
   NAVIGAZIONE
   ========================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--nav-h);
  background:rgba(249,249,237,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s,box-shadow .25s;
}
.nav.attaccata{background:rgba(249,249,237,.97);border-bottom-color:var(--linea);box-shadow:0 2px 14px rgba(29,42,51,.06)}
.nav__inner{
  width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;height:100%;
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
}
.nav__logo{display:flex;align-items:center;gap:.6rem;color:var(--ink);flex:0 0 auto}
.nav__logo img{width:34px;height:34px}
.nav__logo span{
  font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.02rem;
  line-height:1.1;display:flex;flex-direction:column;
}
.nav__logo small{font-family:"Nunito Sans",sans-serif;font-weight:400;font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grigio)}

.nav__menu{
  list-style:none;display:flex;gap:var(--s3);margin:0 0 0 auto;padding:0;
  align-items:center;order:3;
}

/* =========================================================================
   BARRA DEI CONTATTI — sempre in vista, ma discreta

   Portfolio, Amazon, Instagram ed email stanno fuori dal menu a panino, non
   dentro. Dentro, su telefono, sarebbero nascosti dietro un tocco: chi arriva
   da una storia di Instagram guarda lo schermo per pochi secondi, e un
   editore che cerca il PDF non deve andarlo a scovare.

   Quattro cerchi identici, non un pulsante pieno di colore accanto a icone
   nude: e' un gruppo di contatti, non un secondo invito all'azione che fa
   concorrenza a "Scrivimi" nel menu.

   Su desktop sta in linea accanto al logo, nella stessa riga del menu: prima
   andava sempre a capo su una riga sua, che restava per meta' vuota — quattro
   cerchi da 32px non riempiono una riga intera larga quanto il sito. Va a capo
   davvero solo sotto i 900px, dove il menu si chiude nel panino e la riga in
   alto ha spazio solo per logo e contatti.
   ========================================================================= */
.barra{
  display:flex;align-items:center;gap:.4rem;
  order:2;flex:0 0 auto;
}
.barra svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}

.barra__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;color:var(--ink2);
  border:1px solid var(--linea);transition:color .2s,border-color .2s,background .2s;
}
.barra__ico:hover,.barra__ico:focus-visible{color:var(--blu);border-color:var(--blu);background:#fff}
.nav__menu a{
  color:var(--ink2);font-weight:600;font-size:.92rem;
  padding:.35rem 0;border-bottom:2px solid transparent;
}
.nav__menu a:hover{color:var(--blu);border-bottom-color:var(--limone)}
.nav__menu .menu-cta{
  background:var(--blu);color:#fff;border-radius:999px;
  padding:.42rem 1.05rem;border-bottom:0;
}
.nav__menu .menu-cta:hover{background:var(--blu-scuro);color:#fff}

.nav__burger{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;
}
.nav__burger span{display:block;height:2px;background:var(--ink);margin:5px 0;transition:.25s}
.nav.aperta .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.aperta .nav__burger span:nth-child(2){opacity:0}
.nav.aperta .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- telefono e tablet: il menu si chiude nel panino, i contatti vanno a
   capo su una riga loro ---
   Sotto i 900px non c'e' piu' il menu a contendersi lo spazio nella riga in
   alto (diventa un pannello fisso, fuori dal flusso), ma logo + quattro
   icone insieme non ci stanno comunque su schermi stretti: la barra torna a
   capo su una riga sua, com'era prima che passasse in linea col logo.
   --nav-h cresce di conseguenza, perche' da li' dipendono lo stacco del
   contenuto sotto la barra fissa e il punto in cui si apre il menu. */
@media (max-width:900px){
  :root{--nav-h:104px}
  .nav__burger{display:block}
  .barra{flex:1 0 100%;order:3;padding-bottom:.35rem}

  .nav__menu{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--panna);border-bottom:1px solid var(--linea);
    padding:var(--s2) 1.25rem var(--s3);
    /* Chiuso si nasconde con la visibilita', non solo spostandolo in su.
       Il solo translateY(-130%) e' una percentuale della PROPRIA altezza: su
       una pagina interna il menu ha due voci, il 130% vale poco piu' di cento
       pixel e la coda restava in vista sopra il logo. Con visibility il menu
       sparisce comunque, qualunque sia la sua altezza. */
    transform:translateY(-130%);visibility:hidden;
    transition:transform .3s,visibility .3s;
    box-shadow:0 14px 30px rgba(29,42,51,.12);
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  }
  .nav.aperta .nav__menu{transform:none;visibility:visible}
  .nav__menu a{display:block;padding:.8rem 0;border-bottom:1px solid var(--linea)}
  .nav__menu .menu-cta{text-align:center;margin-top:var(--s2);border:0}
  body.admin-bar .nav__menu{top:calc(var(--nav-h) + 46px)}
}

/* --- schermi molto stretti ---
   Quattro icone da 32px restano leggere anche qui: basta stringere lo spazio
   fra loro e rimpicciolire un po' il nome nel logo. */
@media (max-width:360px){
  .barra{gap:.3rem}
  .nav__logo span{font-size:.94rem}
}

/* =========================================================================
   BOTTONI
   ========================================================================= */
/* --- pulsanti ---
   Al passaggio si sollevano di 2px e l'ombra si allarga un po': il movimento
   e' appena percettibile, ma basta a far capire che sono cliccabili.
   `will-change` evita lo sfarfallio del testo durante la transizione. */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.78rem 1.4rem;border-radius:999px;
  font-weight:700;font-size:.95rem;line-height:1;
  border:2px solid transparent;cursor:pointer;
  will-change:transform;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),
             box-shadow .28s ease, background .2s ease, color .2s ease;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.06s}
.btn--oro{background:var(--limone);color:var(--ink);box-shadow:0 4px 12px rgba(217,168,31,.30)}
.btn--oro:hover,.btn--oro:focus-visible{background:var(--limone-sc);color:var(--ink);
  box-shadow:0 8px 22px rgba(217,168,31,.42)}
.btn--linea{border-color:var(--blu);color:var(--blu);background:transparent}
.btn--linea:hover,.btn--linea:focus-visible{background:var(--blu);color:#fff;
  box-shadow:0 8px 22px rgba(2,112,170,.28)}
.btn--verde{background:var(--foglia);color:#fff;box-shadow:0 4px 12px rgba(46,125,70,.28)}
.btn--verde:hover,.btn--verde:focus-visible{background:#25683a;color:#fff;
  box-shadow:0 8px 22px rgba(46,125,70,.38)}
.azioni{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:var(--s3)}

/* =========================================================================
   APERTURA
   ========================================================================= */
.hero{padding:calc(var(--nav-h) + var(--s5)) 0 var(--s5)}
.piastrella{
  position:relative;background:var(--bianco);
  border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--ombra);
  /* il padding deve stare largo quanto gli angoli di maiolica, o il testo ci
     finisce sotto: 8px di scarto + la larghezza di .ang */
  padding:clamp(2.8rem,8.5vw,9rem);
}
/* cornice interna a doppio filetto, come nel portfolio */
.piastrella::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(2,112,170,.35);
  border-radius:2px;pointer-events:none;
}
.ang{position:absolute;width:clamp(58px,8.5vw,130px);opacity:.95;pointer-events:none}
.ang--tl{top:8px;left:8px}
.ang--tr{top:8px;right:8px;transform:scaleX(-1)}
.ang--bl{bottom:8px;left:8px;transform:scaleY(-1)}
.ang--br{bottom:8px;right:8px;transform:scale(-1)}
.hero__dentro{max-width:70ch;margin-inline:auto;text-align:center}

/* --- la firma che si scrive ---
   Il nome visibile è testo dentro un <svg>, coperto da una maschera.
   La maschera è una linea molto spessa che segue una curva morbida: mentre si
   allunga scopre le lettere, e il bordo che avanza non è un taglio verticale ma
   segue l'inclinazione della curva. È questo che la fa sembrare una penna. */
.hero__nome{margin:0 0 .6rem}
.firma{display:block;width:min(100%,760px);margin:0 auto;height:auto;overflow:visible}
.firma__testo{
  font-family:"Italianno","Fraunces",cursive,serif;
  font-size:200px;
  fill:var(--blu-scuro);
}
.firma__tratto{
  stroke-dasharray:1;      /* con pathLength="1" la lunghezza è normalizzata */
  stroke-dashoffset:1;     /* tutto nascosto */
  animation:rox-scrivi 2.6s .2s cubic-bezier(.3,.02,.3,1) forwards;
}
@keyframes rox-scrivi{to{stroke-dashoffset:0}}

/* il resto dell'apertura entra dopo che la firma è finita */
.hero__ruolo,.hero__claim,.hero__testo,.hero .azioni{
  animation:rox-entra .8s ease-out backwards;
}
.hero__ruolo{animation-delay:2.15s}
.hero__claim {animation-delay:2.3s}
.hero__testo {animation-delay:2.45s}
.hero .azioni{animation-delay:2.6s}
@keyframes rox-entra{from{opacity:0;transform:translateY(10px)}}

.hero__ruolo{
  font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  font-size:.76rem;color:var(--blu);margin:0 0 1.1rem;
}
.hero__claim{
  font-family:"Fraunces",Georgia,serif;font-style:italic;
  font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--ink);margin-bottom:.9rem;
}
.hero__testo{max-width:52ch;margin-inline:auto}
.hero .azioni{justify-content:center}

/* chi non vuole animazioni vede tutto subito, senza salti */
@media (prefers-reduced-motion:reduce){
  .firma__tratto{animation:none;stroke-dashoffset:0}
  .hero__ruolo,.hero__claim,.hero__testo,.hero .azioni{animation:none}
}

/* testo che serve a Google e ai lettori di schermo, non agli occhi */
.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;
}

/* Sotto i 560 px il padding della piastrella faceva traboccare la pagina in
   orizzontale, e il traboccamento spingeva fuori schermo il pulsante del menu. */
@media (max-width:560px){
  .piastrella{padding:4.5rem 1.3rem}
  .ang{width:56px}
  .hero__ruolo{letter-spacing:.1em;font-size:.7rem}
  .azioni{gap:.6rem}
  .azioni .btn{flex:1 1 100%;justify-content:center}
}

/* =========================================================================
/* =========================================================================
   SEZIONI
   ========================================================================= */
.sez{padding:var(--s6) 0;position:relative}
.sez--panna{background:var(--panna2)}
.sez--serie{background:linear-gradient(180deg,rgba(46,125,70,.06),rgba(46,125,70,0))}
.sez--blu{background:var(--blu-scuro);color:rgba(255,255,255,.9)}

.kicker{
  display:block;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  font-size:.72rem;color:var(--blu);margin-bottom:.55rem;
}
.kicker--verde{color:var(--foglia)}
.kicker--chiaro{color:var(--limone)}

.titolo{font-size:clamp(1.75rem,3.4vw,2.6rem);margin-bottom:.45em}
.titolo--piccolo{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.titolo--chiaro{color:#fff}
.occhiello{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--ink);max-width:62ch}
.sez--blu .occhiello{color:rgba(255,255,255,.92)}

.testata{max-width:62ch;margin-bottom:var(--s4)}
.testata--sotto{margin-top:var(--s5)}

.due{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.due--rovescia{grid-template-columns:1.15fr .85fr}
@media (max-width:880px){
  .due,.due--rovescia{grid-template-columns:1fr;gap:var(--s4)}
}

/* ---------- cornici e galleria ---------- */
.frame{margin:0;background:var(--bianco);padding:10px;border-radius:2px;box-shadow:var(--ombra)}
.frame--libro{max-width:340px;margin-inline:auto}

/* align-items:start è importante: senza, le celle si stirano all'altezza
   della riga e sotto le immagini più basse resta una fascia bianca */
.galleria{display:grid;gap:clamp(.9rem,2vw,1.6rem);margin-top:var(--s4);align-items:start}
.galleria--due{grid-template-columns:repeat(2,1fr)}
.galleria--tre{grid-template-columns:repeat(3,1fr)}
.galleria--mosaico{grid-template-columns:repeat(3,1fr)}
.galleria--mosaico .larga{grid-column:span 2}
@media (max-width:820px){
  .galleria--tre,.galleria--mosaico{grid-template-columns:repeat(2,1fr)}
  .galleria--mosaico .larga{grid-column:span 2}
}
@media (max-width:520px){
  .galleria--tre,.galleria--mosaico,.galleria--due{grid-template-columns:1fr}
  .galleria--mosaico .larga{grid-column:span 1}
}

/* --- comparsa al passaggio del mouse ---
   Serve a far capire che l'immagine si puo' aprire, non a farsi notare.
   L'ingrandimento e' del 2%: di piu' diventa un effetto, e in un portfolio
   l'occhio deve andare al disegno, non all'animazione.
   L'immagine cresce dentro la cornice, che la ritaglia: cosi' la cornice
   resta ferma e si muove solo il contenuto. */
.scatto{
  margin:0;background:var(--bianco);padding:10px;border-radius:2px;
  box-shadow:var(--ombra);cursor:zoom-in;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
}
.scatto img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.scatto:hover,
.scatto:focus-visible{transform:translateY(-4px);box-shadow:var(--ombra-alta)}
.scatto:hover img,
.scatto:focus-visible img{transform:scale(1.02)}
.scatto figcaption{
  font-size:.78rem;color:var(--grigio);text-align:center;
  padding-top:.55rem;font-weight:600;letter-spacing:.02em;
}
.fasi .scatto{cursor:zoom-in}
.didascalia{text-align:center;font-size:.9rem;color:var(--grigio);margin-top:var(--s3)}

/* ---------- scheda dati del libro ---------- */
.scheda{display:grid;grid-template-columns:repeat(4,auto);gap:var(--s2) var(--s4);
  margin:var(--s3) 0;justify-content:start}
.scheda dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.scheda dd{margin:.15rem 0 0;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:1.05rem;color:var(--ink)}
@media (max-width:560px){.scheda{grid-template-columns:repeat(2,auto)}}

.dove{background:var(--panna2);border-left:3px solid var(--limone);padding:.9rem 1.1rem;
  border-radius:0 var(--r) var(--r) 0;font-size:.95rem}
.sez--panna .dove{background:var(--bianco)}

.pallini{list-style:none;padding:0;margin:var(--s2) 0}
.pallini li{position:relative;padding-left:1.5rem;margin-bottom:.5rem}
.pallini li::before{
  content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--limone);
}

/* ---------- recensioni ---------- */
.recensioni{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem)}
@media (max-width:880px){.recensioni{grid-template-columns:1fr}}
.rec{
  margin:0;background:var(--bianco);border:1px solid var(--linea);
  border-radius:var(--r);padding:var(--s3);box-shadow:var(--ombra);
  display:flex;flex-direction:column;
}
.rec p{font-family:"Fraunces",Georgia,serif;font-style:italic;color:var(--ink);
  font-size:1rem;line-height:1.6}
.rec footer{margin-top:auto;font-size:.82rem;color:var(--grigio);font-weight:700}
.rec footer span{font-weight:400}

/* ---------- strumenti ---------- */
.strumenti{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s3)}
.strumenti h3{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blu);font-family:"Nunito Sans",sans-serif;font-weight:900;margin-bottom:.3rem}
.strumenti p{margin:0;font-size:.95rem}
@media (max-width:560px){.strumenti{grid-template-columns:1fr}}

/* ---------- servizi ---------- */
.servizi{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem)}
@media (max-width:880px){.servizi{grid-template-columns:1fr}}
.serv{
  background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r);
  padding:var(--s3);box-shadow:var(--ombra);border-top:3px solid var(--blu);
}
.serv h3{font-size:1.22rem;color:var(--blu-scuro)}
.serv__fasi{font-size:.82rem;color:var(--grigio);border-top:1px solid var(--linea);
  padding-top:.8rem;margin:0}

/* =========================================================================
   LISTINO
   ========================================================================= */
.listino{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,2rem)}
@media (max-width:760px){.listino{grid-template-columns:1fr}}
.listino__gruppo{
  background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r);
  padding:var(--s3);box-shadow:var(--ombra);
}
.listino__gruppo h3{
  font-size:1.18rem;color:var(--blu-scuro);margin-bottom:.9rem;
  padding-bottom:.6rem;border-bottom:2px solid var(--limone);
}
.listino__gruppo h3 small{
  display:block;font-family:"Nunito Sans",sans-serif;font-weight:400;
  font-size:.78rem;color:var(--grigio);letter-spacing:.01em;margin-top:.15rem;
}
.listino__gruppo ul{list-style:none;margin:0;padding:0}
.listino__gruppo li{
  display:flex;align-items:baseline;gap:1rem;
  padding:.6rem 0;border-bottom:1px dotted var(--linea);
}
.listino__gruppo li:last-child{border-bottom:0;padding-bottom:0}
.listino__voce{flex:1}
.listino__voce b{display:block;color:var(--ink);font-weight:700;font-size:.98rem}
.listino__voce small{display:block;color:var(--grigio);font-size:.8rem;line-height:1.45}
.listino__prezzo{
  font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.32rem;
  color:var(--blu);white-space:nowrap;
}
.listino__note{
  margin-top:var(--s3);font-size:.92rem;color:var(--grigio);
  text-align:center;max-width:70ch;margin-inline:auto;
}

/* Il libro sta su una riga sua: e' una voce sola, e messo in colonna
   accanto a una tabella di sei righe sembrerebbe un errore di impaginazione. */
.listino__gruppo--largo{grid-column:1 / -1}

/* Le due tabelle delle commissioni. */
.listino__tab{width:100%;border-collapse:collapse;font-size:.94rem}
.listino__tab th,.listino__tab td{padding:.55rem .35rem;text-align:right;vertical-align:baseline}
.listino__tab thead th{
  font-family:"Nunito Sans",sans-serif;font-weight:700;font-size:.74rem;
  color:var(--grigio);text-transform:uppercase;letter-spacing:.08em;
  padding-bottom:.5rem;border-bottom:1px solid var(--linea);
}
.listino__vuota{border:0;padding:0}
.listino__tab tbody th[scope=row]{
  text-align:left;font-weight:400;color:var(--ink);
  padding-right:.6rem;border-bottom:1px dotted var(--linea);
}
.listino__tab tbody td{border-bottom:1px dotted var(--linea)}
.listino__tab tbody:last-of-type tr:last-child th,
.listino__tab tbody:last-of-type tr:last-child td{border-bottom:0}
.listino__fascia th{
  text-align:left;padding:1.2rem 0 .45rem;
  font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:.94rem;
  color:var(--blu-scuro);
}
.listino__tab tbody:first-of-type .listino__fascia th{padding-top:.7rem}
.listino__tab .listino__prezzo{font-size:1.14rem}

/* La nota in fondo alla singola tabella: vale per quel listino, non per
   tutta la sezione, quindi sta dentro la scheda e non sotto la griglia. */
.listino__piede{
  margin-top:1.1rem;padding-top:.75rem;border-top:1px solid var(--linea);
  font-size:.8rem;line-height:1.5;color:var(--grigio);
}

/* Sul telefono la tabella deve restare su tre colonne: se «figura intera»
   va a capo, i due prezzi si scollano dalla riga a cui appartengono. */
@media (max-width:480px){
  .listino__tab{font-size:.88rem}
  .listino__tab th,.listino__tab td{padding:.5rem .2rem}
  .listino__tab tbody th[scope=row]{padding-right:.35rem}
  .listino__tab .listino__prezzo{font-size:1rem}
}

/* =========================================================================
   CONTATTI
   ========================================================================= */
.contatti{position:relative;text-align:center}
.contatti__testo{max-width:62ch;margin-inline:auto}
.sez--blu p{color:rgba(255,255,255,.88)}
.contatti .occhiello,.contatti p{margin-inline:auto}

/* due limoni della maiolica in filigrana, a incorniciare il blocco contatti */
.contatti__orn{
  position:absolute;bottom:-14px;width:clamp(78px,11vw,138px);
  opacity:.5;pointer-events:none;
}
.contatti__orn--sx{left:-8px;transform:scaleY(-1)}
.contatti__orn--dx{right:-8px;transform:scale(-1)}
@media (max-width:700px){.contatti__orn{display:none}}

.contatti__diretti{
  display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin:var(--s4) 0 var(--s3);
}
.cont{
  display:flex;align-items:center;gap:.85rem;text-align:left;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:.85rem 1.5rem;color:#fff;
  transition:background .2s,border-color .2s,transform .18s;
}
.cont:hover{background:rgba(255,255,255,.17);border-color:var(--limone);color:#fff;transform:translateY(-2px)}
.cont svg{width:22px;height:22px;fill:var(--limone);flex:0 0 auto}
.cont small{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--limone)}
.cont b{font-size:.98rem;word-break:break-word}

.contatti__pdf{margin-top:var(--s3)}

@media (max-width:560px){
  .cont{width:100%;justify-content:flex-start}
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{background:var(--ink);color:rgba(255,255,255,.7);padding:var(--s4) 0;font-size:.88rem}
.footer__inner{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:center}
.footer p{margin:0}
.footer a{color:var(--limone)}
.footer__social{display:flex;gap:.6rem}
.footer__social a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.09);transition:background .2s;
}
.footer__social a:hover{background:var(--blu)}
.footer__social svg{width:19px;height:19px;fill:#fff}

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lb{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(15,22,28,.94);padding:3.5rem 1rem 4.5rem;
  place-items:center;
}
.lb.aperta{display:grid}
.lb img{max-width:min(96vw,1100px);max-height:82vh;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb__cap{
  position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.85);font-size:.88rem;text-align:center;
  max-width:min(90vw,60ch);margin:0;
}
.lb__btn{
  position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;
  width:46px;height:46px;border-radius:50%;font-size:1.5rem;line-height:1;
  cursor:pointer;transition:background .2s;
}
.lb__btn:hover{background:rgba(255,255,255,.26)}
.lb__chiudi{top:1rem;right:1rem}
.lb__prec{left:1rem;top:50%;transform:translateY(-50%)}
.lb__succ{right:1rem;top:50%;transform:translateY(-50%)}

/* =========================================================================
   COMPARSE IN SCROLL
   ========================================================================= */
.rivela{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rivela.vista{opacity:1;transform:none}
.rivela[data-ritardo="1"]{transition-delay:.09s}
.rivela[data-ritardo="2"]{transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rivela{opacity:1;transform:none;transition:none}
  .btn:hover,.btn:focus-visible,
  .scatto:hover,.scatto:focus-visible{transform:none}
  .scatto:hover img,.scatto:focus-visible img{transform:none}
}

/* =========================================================================
   STAMPA
   ========================================================================= */
@media print{
  .nav,.footer__social,.lb,.azioni{display:none}
  body{background:#fff}
  .sez{padding:1rem 0}
}

/* =========================================================================
   PAGINE LEGALI
   Privacy, cookie, note sul copyright. Stessa identita' del sito, ma
   impaginate per essere lette: una colonna sola e riga corta.
   ========================================================================= */
.legale{padding:calc(var(--nav-h) + var(--s5)) 0 var(--s6)}
.legale__dentro{max-width:74ch;margin-inline:auto}
.legale .titolo{margin-bottom:var(--s4)}
.legale__testo{font-size:1.02rem}
.legale__testo h2{
  font-size:clamp(1.2rem,2.4vw,1.5rem);margin:var(--s4) 0 .6rem;
  padding-top:var(--s2);border-top:1px solid var(--linea);
}
.legale__testo h3{font-size:1.02rem;margin:var(--s3) 0 .3rem;color:var(--blu-scuro)}
.legale__testo ul{padding-left:1.3rem}
.legale__testo li{margin-bottom:.5rem}
.legale__testo a{text-decoration:underline;text-underline-offset:2px}
.legale__testo em{color:var(--grigio);font-size:.95em}
.legale__torna{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--linea)}
/* Su una pagina di solo testo la filigrana della maiolica disturba la lettura:
   qui il velo e' quasi pieno e la piastrella resta appena accennata. */
body.roxl-legale::before{background:rgba(249,249,237,.985)}

/* =========================================================================
   Selettore di lingua — un pulsante solo, con tendina

   Prima erano tre sigle sempre affiancate. Un pulsante con la sola lingua
   attiva, che apre le altre due su richiesta, occupa un quarto dello spazio
   nella barra in alto — dove lo spazio conteso con il menu era il problema.
   ========================================================================= */
.nav__lingue{margin-left:.35rem;position:relative}
.lingue-menu{position:relative}
.lingue-menu__attuale{
  display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;
  list-style:none;user-select:none;
  padding:.3rem .7rem;border-radius:999px;
  border:1px solid var(--linea);background:var(--bianco);
  font-size:.76rem;font-weight:800;letter-spacing:.06em;color:var(--ink2);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.lingue-menu__attuale::-webkit-details-marker{display:none}
.lingue-menu__attuale::after{
  content:"";width:6px;height:6px;flex:0 0 auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s ease;
}
.lingue-menu[open] .lingue-menu__attuale::after{transform:rotate(-135deg) translateY(1px)}
.lingue-menu__attuale:hover,
.lingue-menu[open] .lingue-menu__attuale{background:var(--panna2);color:var(--blu);border-color:var(--blu)}

.lingue-menu__lista{
  position:absolute;top:calc(100% + .4rem);right:0;z-index:20;
  display:flex;flex-direction:column;min-width:7.5rem;
  background:var(--bianco);border:1px solid var(--linea);border-radius:10px;
  box-shadow:0 10px 26px rgba(29,42,51,.14);padding:.3rem;
}
.lingue__voce{
  display:block;padding:.5rem .7rem;border-radius:7px;
  font-size:.84rem;font-weight:700;color:var(--ink2);
  text-decoration:none;border-bottom:0 !important;
  transition:background .15s ease,color .15s ease;
}
.lingue__voce:hover,.lingue__voce:focus-visible{background:var(--panna2);color:var(--blu)}

@media (max-width:900px){
  .nav__lingue{margin:var(--s2) 0 0}
  .nav__menu .nav__lingue{border-bottom:0}
  .lingue-menu{width:100%}
  .lingue-menu__attuale{width:100%;justify-content:center;padding:.6rem 1.1rem;font-size:.85rem}
  .lingue-menu__lista{position:static;box-shadow:none;margin-top:.4rem;width:100%}
}

/* =========================================================================
   "PROSSIMI EVENTI", IN APERTURA

   Ha preso il posto dei due pulsanti che stavano qui. Niente nome, data o
   luogo: e' un rimando alla pagina eventi, non un annuncio gia' completo —
   chi vuole sapere quando e dove ci clicca sopra.
   ========================================================================= */
.hero__evento{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:var(--s3);padding:.65rem 1.3rem;
  background:#fff;color:var(--ink);border:1px solid var(--linea);border-left:4px solid var(--limone);
  border-radius:999px;
  font-family:"Nunito Sans",sans-serif;font-weight:700;font-size:.92rem;
  box-shadow:0 3px 14px rgba(29,42,51,.07);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.hero__evento:hover,.hero__evento:focus-visible{
  color:var(--blu);transform:translateY(-2px);box-shadow:0 8px 22px rgba(29,42,51,.12);
  border-left-color:var(--limone-sc);
}

/* =========================================================================
   PAGINA EVENTI

   Usa l'impaginazione delle pagine legali — una colonna, riga corta — perche'
   e' fatta per essere letta, non sfogliata. Ogni evento e' una scheda con la
   data in evidenza: e' il dato che si cerca per primo.
   ========================================================================= */
.eventi__fascia{
  font-family:"Nunito Sans",sans-serif;font-size:.7rem;font-weight:900;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blu);
  margin:var(--s4) 0 var(--s2);
}
.eventi__fascia--passati{color:var(--grigio)}

/* "Al banco": vale per ogni evento allo stesso modo, sfondo neutro che non
   compete con le schede — quelle hanno una data da far notare, questa no. */
.eventi__stand{
  background:var(--panna2);border-radius:12px;
  padding:var(--s3);margin:var(--s3) 0;
}
.eventi__stand-titolo{
  font-family:"Nunito Sans",sans-serif;font-size:.7rem;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blu-scuro);
  margin:0 0 .6rem;
}
.eventi__stand p{margin:0 0 .5rem;font-size:.92rem}
.eventi__stand p:last-child{margin-bottom:0}

.evento{
  border:1px solid var(--linea);border-radius:12px;
  padding:var(--s3);margin-bottom:var(--s2);background:#fff;
}
.evento--prossimo{border-left:4px solid var(--limone);box-shadow:0 3px 14px rgba(29,42,51,.06)}
.evento--passato{opacity:.72;background:transparent}

.evento__data{
  font-family:"Nunito Sans",sans-serif;font-weight:900;font-size:.82rem;
  letter-spacing:.04em;color:var(--blu);margin:0 0 .3rem;
}
.evento__nome{
  font-family:"Fraunces",Georgia,serif;font-size:1.35rem;
  margin:0 0 .2rem;color:var(--ink);line-height:1.2;
}
.evento__luogo{margin:0 0 .6rem;color:var(--grigio);font-size:.92rem}
.evento__testo{margin:0}

/* Logo dell'evento + link ufficiali: stessa fila, il logo a sinistra perche'
   e' quello che si riconosce a colpo d'occhio, i link accanto. */
.evento__collega{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  margin-top:.9rem;
}
.evento__logo{width:52px;height:auto;flex:0 0 auto;border-radius:8px}
.evento__collega-link{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.evento__link{font-weight:700;font-size:.9rem}

.eventi__vuoto{
  border:1px dashed var(--linea);border-radius:12px;
  padding:var(--s3);color:var(--grigio);
}

@media (max-width:560px){
  .evento{padding:var(--s2)}
  .evento__nome{font-size:1.15rem}
  .eventi__stand{padding:var(--s2)}
}