/* ============================================================================
   newsletter.css — il foglio del disegno approvato, INTATTO.

   Questo file e' il <style> del template, copiato com'era. Non si riscrive e
   non si «migliora»: le misure, le distanze e i colori sono quelli approvati.
   Se qualcosa va cambiato, si cambia prima il disegno.

   La Newsletter NON carica base.css: il disegno e' autosufficiente, e
   mescolarci le regole del sito e' esattamente il modo di farlo diventare
   un'altra cosa.
   ============================================================================ */

/* ============================================================================
   DISEGNO — Newsletter, un numero
   Stessa famiglia del sito: stesso carattere, stessa struttura, stesse
   distanze, stesso blu. A distinguerla e' l'ARANCIO, che sul sito non
   compare da nessuna parte: si riconosce a colpo d'occhio che si sta
   leggendo la newsletter, senza costruire un mondo a parte.
   ============================================================================ */
:root{
  --ink:#12143A;            /* lo stesso blu del sito */
  --carta:#F7F8FB;          /* grigio chiarissimo */
  --carta-2:#EDF0F5;
  --ambra:#E8830A;          /* l'arancio: l'unica cosa che cambia */
  --ambra-scura:#C46E00;
  --verde:#00A44E;          /* resta, ma solo dove si rimanda al sito */
  --grigio:#5B6180;
  --filo:#DFE4EE;
  --display:'Space Grotesk',system-ui,sans-serif;
  --testo:'Inter',system-ui,sans-serif;
  --r:16px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--carta);color:var(--ink);font:400 17px/1.7 var(--testo)}
/* height:auto e' obbligatorio insieme a max-width. Le immagini portano scritte
   larghezza e altezza vere — servono a non far saltare la pagina mentre
   caricano — ma se il foglio riduce solo la larghezza, l'altezza resta quella
   dell'originale e l'immagine si stira in verticale. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.dentro{max-width:920px;margin:0 auto;padding:0 26px}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;margin:0;line-height:1.2}

/* ---------------------------------------------------- 1. testata ------- */
.testata{background:var(--ink);color:var(--carta);position:sticky;top:0;z-index:30}
.testata .dentro{display:flex;align-items:center;gap:1.2rem;height:66px}
.testata .marchio{display:flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:600}
.testata .marchio span{font-size:.95rem}
/* Il marchio dell'Associazione e' scuro e la barra e' scura: dentro un
   dischetto bianco, come nella testata della redazione, che ha lo stesso
   problema e lo risolve cosi'. Il cerchio arancio del disegno resta, come
   bordo del dischetto. */
.testata .marchio img{width:40px;height:40px;flex:none;object-fit:contain;
  background:#fff;border:2px solid var(--ambra);border-radius:50%;padding:4px}
/* Senza align-items le voci si allungano per tutta l'altezza e il testo
   dentro la pastiglia, che ha il suo riempimento, resta piu' in basso degli
   altri. Si allineano al centro, tutte sulla stessa riga. */
.testata nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem;
  font-size:.9rem;line-height:1;color:#A9AECD}
.testata nav a{display:inline-flex;align-items:center}
.testata nav a:hover{color:#fff}
.testata .torna{border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:.45rem .9rem}

/* --- la fascia della bozza ------------------------------------------------
   Non fa parte della rivista: e' un avviso di servizio, e lo vede solo chi ha
   la chiave. Stessi colori dell'avviso delle schede in bozza sul resto del
   sito — quello sta in base.css, che qui non si carica, quindi la regola
   vive anche qui. Senza, il testo restava attaccato al bordo. */
.fascia-bozza{background:#FFF4D6;border-bottom:1px solid #E8D9A8;color:#6B4E00;
  font-size:.92rem;line-height:1.5;padding:.7rem 26px;text-align:center}
.fascia-bozza b{font-weight:600}

/* ------------------------------------------- 2. copertina e numero ----- */
.copertina{position:relative;background:var(--ink);color:var(--carta);overflow:hidden}
.copertina .sfondo{position:absolute;inset:0;opacity:.34}
.copertina .sfondo img{width:100%;height:100%;object-fit:cover}
.copertina .dentro{position:relative;padding-top:3.4rem;padding-bottom:3.4rem}
.riga-numero{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.riga-numero .filetto{width:34px;height:2px;background:var(--ambra)}
.riga-numero b{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ambra);font-weight:600}
.copertina h1{font-size:3.2rem;font-weight:700}
.copertina h1 em{font-style:normal;color:var(--ambra)}
.copertina .quando{margin-top:.7rem;font-size:1.05rem;color:#C3C9E0}
.copertina .tessera{display:inline-block;margin-top:1.6rem;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:.4rem 1rem;font-size:.85rem}

/* ------------------------------------------------- 3. sommario --------- */
.sommario{background:var(--carta-2);border-bottom:1px solid var(--filo)}
.sommario .dentro{padding:2rem 26px}
.sommario h2{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);
  font-weight:600;margin-bottom:1rem}
.sommario ol{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:.1rem}
.sommario li{counter-increment:s;border-top:1px solid var(--filo)}
.sommario li:first-child{border-top:none}
.sommario a{display:flex;align-items:baseline;gap:.9rem;padding:.7rem 0}
.sommario a::before{content:counter(s,decimal-leading-zero);font-family:var(--display);
  font-weight:600;color:var(--ambra);font-size:.85rem;flex:none;width:1.6rem}
.sommario a b{font-family:var(--display);font-weight:600;font-size:1.05rem}
.sommario a small{margin-left:auto;color:var(--grigio);font-size:.82rem;flex:none}
.sommario a:hover b{color:var(--ambra-scura)}

/* -------------------------------------------------- 4-5. i pezzi ------- */
.foglio{padding:3rem 0 4rem}
.pezzo{background:#fff;border:1px solid var(--filo);border-radius:var(--r);
  padding:2.4rem 2.6rem;margin-bottom:1.6rem}
.pezzo .occhiello{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ambra-scura);font-weight:600;display:block;margin-bottom:.6rem}
.pezzo h2{font-size:1.9rem;font-weight:700}
.pezzo .sottotitolo{font-family:var(--display);font-weight:500;font-size:1.15rem;
  color:var(--grigio);margin-top:.5rem;line-height:1.35}
.pezzo .firma{display:flex;align-items:center;gap:.6rem;margin-top:1.2rem;
  padding-top:1rem;border-top:1px solid var(--filo);font-size:.88rem;color:var(--grigio)}
.pezzo .firma .pallino{width:26px;height:26px;border-radius:100px;background:var(--carta-2);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;color:var(--ambra-scura)}
/* una parola piu' larga del foglio — un indirizzo web incollato, di solito —
   va a capo invece di allargare la pagina */
.pezzo{overflow-wrap:break-word}
.pezzo p{margin:1.1rem 0}
.pezzo h3{font-size:1.15rem;margin:1.8rem 0 .6rem}
/* Gli elenchi rientrano rispetto al testo: 1,5 cm sul computer, molto meno
   sul telefono (deciso da Simone il 5 ottobre). La misura sta qui sola,
   in --rientro, e vale per l'elenco con i pallini e per quello numerato:
   il pallino e il numero cominciano a quella distanza dal margine del testo.
   L'elenco numerato prima non aveva una regola sua, e prendeva il rientro
   che gli dava il browser. */
.pezzo{--rientro:1.5cm}
.pezzo ul{margin:0 0 1.2rem;padding-left:var(--rientro);list-style:none}
.pezzo ul li{position:relative;padding-left:1.3rem;margin-bottom:.55rem}
.pezzo ol{margin:0 0 1.2rem;padding-left:calc(var(--rientro) + 2.1rem)}
.pezzo ol li{margin-bottom:.55rem}
.pezzo ul li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;
  border-radius:100px;background:var(--ambra)}
/* I collegamenti dentro il testo di un pezzo si devono riconoscere da soli:
   arancione — quello dei pallini — e sottolineati (deciso da Simone il
   5 ottobre 2026). Prima erano identici al testo intorno. Vale solo dentro i
   testi: menu, sommario, inserzioni e piede restano come sono. */
.testo-pezzo a{color:var(--ambra);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.16em}
.testo-pezzo a:hover,.testo-pezzo a:focus-visible{color:var(--ambra-scura)}

/* --- «Leggi tutto» -------------------------------------------------------
   Un testo lungo si mostra per le prime righe, poi sfuma. L'altezza del
   taglio la calcola leggi-tutto.js contando le righe di TESTO (le immagini
   non contano) e la scrive sul riquadro; qui c'e' solo l'aspetto. La
   sfumatura e' una maschera sul testo, non un velo bianco sopra: cosi' va
   bene su qualunque fondo, anche su quello dell'editoriale. Sfumano solo le
   righe in piu' dopo le quindici in chiaro: quanto sono alte lo dice --sfuma. */
/* «clip» e non «hidden»: «hidden» cambierebbe il modo in cui il riquadro
   tiene i margini del primo paragrafo, il testo scenderebbe di una riga
   scarsa e il taglio cadrebbe nel punto sbagliato. Dove «clip» non c'e'
   (browser vecchi) vale «hidden», e si vede mezza riga in meno. */
.testo-pezzo.chiuso{overflow:hidden;overflow:clip;
  -webkit-mask-image:linear-gradient(#000 calc(100% - var(--sfuma,5em)),transparent);
          mask-image:linear-gradient(#000 calc(100% - var(--sfuma,5em)),transparent)}
.leggi-tutto{display:inline-flex;align-items:center;gap:.45rem;margin:.9rem 0 .2rem;
  font:600 .92rem/1 var(--display);color:var(--ambra-scura);background:#fff;
  border:1.5px solid var(--ambra);border-radius:100px;padding:.7rem 1.15rem;cursor:pointer}
.leggi-tutto:hover,.leggi-tutto:focus-visible{background:var(--ambra);color:#fff}
.leggi-tutto:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.leggi-tutto::after{content:"↓";font-weight:400}
.leggi-tutto[aria-expanded="true"]::after{content:"↑"}
@media print{
  .testo-pezzo.chiuso{max-height:none!important;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .leggi-tutto{display:none}
}
.pezzo .chiusa{background:var(--carta);border-left:3px solid var(--ambra);
  padding:1rem 1.2rem;border-radius:0 10px 10px 0;margin-top:1.6rem;font-size:.97rem}
.editoriale{background:linear-gradient(180deg,#fff,var(--carta))}
.editoriale h2{font-size:2.1rem}

/* ----------------------------------------- 6. inserzione sponsor ------- */
.inserzione{border:1px dashed var(--filo);border-radius:var(--r);overflow:hidden;
  margin-bottom:1.6rem;background:#fff}
.inserzione .segno{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);padding:.5rem 1.2rem;border-bottom:1px solid var(--filo);background:var(--carta)}
/* L'immagine dell'inserzione prende tutta la larghezza del blocco e tiene le
   sue proporzioni: un banner e' fatto per essere guardato, e stretto in una
   colonnina da 190 pixel non lo guarda nessuno. Il testo, quando c'e', va
   sotto. */
.inserzione .dentro-ins{display:block;padding:0}
.inserzione img{display:block;width:100%;height:auto;border-radius:0}
.inserzione p{margin:0;padding:1.1rem 1.4rem;font-size:.95rem;color:var(--grigio)}
/* senza immagine il testo non deve restare appiccicato al bordo di sopra */
.inserzione .dentro-ins > p:first-child{padding-top:1.3rem}
/* Due immagini nella stessa inserzione: affiancate, mezza e mezza. Sul
   telefono una sotto l'altra, che a meta' larghezza non si vedrebbe niente. */
.inserzione .figure{display:block}
.inserzione .figure.due{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.inserzione .figure.due img{height:100%;object-fit:cover}

/* il marchio prestato dalla scheda dello sponsor: piccolo e in mezzo, non
   un banner gonfiato */
.inserzione.solo-marchio img{width:auto;max-width:230px;max-height:104px;
  margin:1.5rem auto .2rem;object-fit:contain}
.inserzione.solo-marchio p{text-align:center;padding-top:.4rem}
/* niente immagine: resta il nome, e sta in mezzo con la sua aria */
.inserzione.senza-immagine p{text-align:center;padding:1.8rem 1.4rem}
.inserzione.senza-immagine p b{font-size:1.15rem;margin-bottom:.3rem}
.inserzione p b{color:var(--ink);font-family:var(--display);display:block;margin-bottom:.2rem}

/* --- il separatore: il marchio dell'Associazione come stacco fra due pezzi.
   Non e' un riquadro: il marchio in mezzo e un filo per parte, che lo fanno
   leggere come una pausa e non come un'immagine dimenticata. */
.separatore{display:flex;align-items:center;gap:1.4rem;margin:.6rem 0 2.2rem}
.separatore::before,.separatore::after{content:"";flex:1;height:1px;background:var(--filo)}
.separatore img{flex:none;width:170px;height:auto}

/* ------------------------------------------------- 7. auguri ----------- */
.auguri{background:var(--ambra);color:#fff;border-radius:var(--r);padding:2.4rem 2.6rem;
  margin-bottom:1.6rem;text-align:center}
.auguri h2{font-size:2rem}
.auguri p{margin:.8rem auto 0;max-width:34rem;opacity:.95}
/* l'immagine degli auguri: dentro il riquadro arancio, con un po' d'aria */
.auguri img{width:100%;max-width:30rem;height:auto;margin:1.6rem auto 0;border-radius:12px}

/* --------------------------------------- 8. sponsor sostenitori -------- */
.sostenitori{background:var(--ink);color:var(--carta);padding:3rem 0}
.sostenitori h2{font-size:1.7rem;text-align:center}
.sostenitori .spiega{text-align:center;color:#A9AECD;max-width:40rem;margin:.8rem auto 2rem}
/* Una fila per livello, centrata. Il livello non si scrive: si legge dalla
   misura del riquadro, che e' la regola approvata. La fila di mezzo —
   argento — tiene le misure del disegno, 150 per 92; le altre si ricavano
   attorno a quella.
   La griglia a colonne fisse non va bene qui: gli sponsor di un livello
   sono due o tre, e allineati a sinistra sembravano una tabella rotta. */
.loghi{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.loghi + .loghi{margin-top:1rem}
.liv-platino{--largo:200px;--alto:116px;--nome:1rem}
.liv-oro    {--largo:172px;--alto:102px;--nome:.95rem}
.liv-argento{--largo:150px;--alto:92px; --nome:.9rem}
.liv-bronzo {--largo:128px;--alto:78px; --nome:.82rem}

/* Il riquadro sta sulla pastiglia, non sul collegamento: chi non ha un sito
   e' uno <span>, e vestendo solo la <a> restava un nome nudo sul fondo scuro. */
.pastiglia{flex:none;width:var(--largo);height:var(--alto);
  background:#fff;border-radius:12px;
  display:flex;align-items:center;justify-content:center;padding:.45rem;
  transition:transform .15s}
a.pastiglia:hover{transform:translateY(-2px)}
/* Il marchio riempie il riquadro tenendo le sue proporzioni: «contain» lo
   ingrandisce fino a toccare i bordi senza deformarlo e senza tagliarlo.
   Prima stava piccolo in mezzo, perche' non gli si diceva quanto crescere. */
.loghi img{width:100%;height:100%;object-fit:contain}

/* Quando il marchio manca, dentro il riquadro ci va il nome — scuro, perche'
   il riquadro e' bianco. Senza questa riga ereditava il colore della sezione,
   che e' quasi bianco: spariva. */
.senza-logo{font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:var(--nome,.9rem);line-height:1.25;text-align:center;
  overflow-wrap:break-word;hyphens:auto}

/* ------------------------------------------------ 9. il modulo --------- */
/* Il blocco «Scrivi all'Associazione» — contorno compreso — sta in
   modulo.css: è lo stesso in tutte le pagine che lo usano. */

/* Le regole del modulo stanno in modulo.css: le usano anche le altre
   pagine che hanno il modulo di contatto, e una regola sta in un posto solo. */

/* ------------------------------------------------- 10. il piede -------- */
/* Dal 5 ottobre 2026 il piede della rivista e' quello di tutto il sito: stesso
   contenuto (parte-piede-dentro.php) e stessa forma — tutto al centro, le voci
   del menu separate da un filo, le pagine legali, i social, la riga
   dell'Associazione. Le regole della forma sono quelle di base.css, riscritte
   qui perche' la rivista base.css non lo carica.
   Di suo tiene il FONDO CHIARO; e su un fondo chiaro le scritte chiare del
   sito non si leggerebbero, quindi qui sono scure: blu per le voci, grigio per
   il resto, arancio al passaggio. */
.piede{background:var(--carta-2);border-top:1px solid var(--filo);color:var(--grigio);
  padding:2.8rem 0 2.4rem;font-size:.9rem;text-align:center}
.piede nav{display:flex;flex-wrap:wrap;justify-content:center;row-gap:.5rem}
.piede nav a{padding:0 .95rem;line-height:1.15;border-left:1px solid #BFC6D6}
.piede nav a:first-child{border-left:none}
.piede-menu a{color:var(--ink);font:400 .95rem var(--testo)}
.piede nav a:hover,.piede nav a:focus-visible{color:var(--ambra-scura);text-decoration:underline;text-underline-offset:.25em}
.piede nav.legali{margin-top:1.1rem;font-size:.84rem}
.piede-social{display:flex;justify-content:center;gap:.8rem;margin-top:1.3rem}
.piede-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  border:1px solid #BFC6D6;color:var(--ink)}
.piede-social a:hover,.piede-social a:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}
.piede-riga{margin:1.6rem 0 0;font-size:.84rem;line-height:1.7}
/* i pezzi della riga non si spezzano a meta': vanno a capo interi */
.piede-riga span{display:inline-block}
.piede-riga span + span::before{content:"–";opacity:.55;padding:0 .55rem}

/* ------------------------------ il pulsante che riporta al sommario ---- */
/* Fisso in basso a destra, sopra tutto tranne la testata. Arancio pieno: e'
   l'unico pulsante che resta sempre sullo schermo e si deve trovare a colpo
   d'occhio. Sul telefono resta solo la freccia, in un tondo, per non coprire
   il testo. Chi arriva al sommario lo trova sotto la testata fissa, non
   dietro (scroll-margin-top). */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sommario{scroll-margin-top:66px}
.torna-sommario{position:fixed;right:1.2rem;bottom:1.2rem;z-index:25;display:inline-flex;align-items:center;gap:.45rem;
  background:var(--ambra);color:#fff;font:600 .9rem/1 var(--display);padding:.75rem 1.1rem .75rem .9rem;
  border-radius:100px;box-shadow:0 6px 20px rgba(18,20,58,.22);
  transition:opacity .2s,transform .2s,background .15s}
.torna-sommario:hover,.torna-sommario:focus-visible{background:var(--ambra-scura)}
.torna-sommario:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.torna-sommario.nascosto{opacity:0;transform:translateY(.6rem);pointer-events:none}
@media print{.torna-sommario{display:none}}

/* --------------------------------------------- gli altri numeri -------- */
.altri{padding:0 0 3rem}
.altri h2{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);
  font-weight:600;margin-bottom:1rem}
.altri .fila{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.altri a{background:#fff;border:1px solid var(--filo);border-radius:12px;padding:1rem 1.2rem;
  display:block;transition:border-color .15s}
.altri a:hover{border-color:var(--ambra)}
.altri a b{font-family:var(--display);font-weight:600;display:block}
.altri a small{color:var(--grigio)}
.altri .archivio{border-style:dashed}

@media(max-width:760px){
  body{font-size:16px}
  .copertina h1{font-size:2.1rem}
  .pezzo{padding:1.5rem 1.4rem;--rientro:.4cm}
  .pezzo h2{font-size:1.45rem}
  .torna-sommario{right:.9rem;bottom:.9rem;padding:0;width:46px;height:46px;justify-content:center}
  .torna-sommario span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .separatore{gap:.9rem;margin:.4rem 0 1.8rem}
  .separatore img{width:132px}
  /* Il sommario sul telefono: titolo e firma stavano sulla stessa riga e la
     firma non si stringeva (flex:none), cosi' una firma lunga spingeva la
     pagina oltre lo schermo e tutto il numero scorreva di lato. Qui la firma
     va a capo sotto il titolo, allineata al titolo e non al numero. */
  .sommario a{flex-wrap:wrap;row-gap:.1rem}
  .sommario a b{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
  .sommario a small{flex:0 0 100%;margin-left:0;padding-left:2.5rem;overflow-wrap:anywhere}
  .editoriale h2{font-size:1.6rem}
  .inserzione .dentro-ins{flex-direction:column;align-items:flex-start}
  .inserzione img{width:100%;max-height:none}
  .inserzione .figure.due{grid-template-columns:1fr}
  .auguri img{margin-top:1.2rem}
  .liv-platino{--largo:156px;--alto:94px}
  .liv-oro    {--largo:140px;--alto:86px}
  .liv-argento{--largo:126px;--alto:78px}
  .liv-bronzo {--largo:112px;--alto:70px}
  .testata nav{display:none}
  /* il piede sul telefono: niente fili che restano a inizio riga, bastano
     gli spazi; e i pezzi della riga dell'Associazione uno sotto l'altro.
     (Le voci vanno a capo da sole: e' quello che mancava al piede di prima,
     dove l'ultima usciva dallo schermo e faceva scorrere di lato il numero.) */
  .piede nav{gap:.55rem 1.3rem}
  .piede nav a{border-left:none;padding:0}
  .piede-riga span{display:block}
  .piede-riga span + span::before{content:none}
  .piede-riga br{display:none}
}
/* --- immagini e allineamento dentro i testi (22 ottobre 2026) ---
   I segni li scrive la redazione (app/funzioni/testo.php): un'immagine al
   centro prende tutta la larghezza; a sinistra o a destra si restringe e il
   testo le scorre accanto. Sul telefono sempre a tutta larghezza. Paragrafi,
   titoli e citazioni possono essere centrati o allineati a destra. */
.testo-pezzo{display:flow-root}
.testo-pezzo figure{margin:1.6rem 0}
.testo-pezzo figure img{border-radius:10px}
.testo-pezzo figcaption{font-size:.86rem;line-height:1.45;color:var(--grigio,#5B6180);text-align:center;margin-top:.5rem}
.testo-pezzo figure.foto-sinistra{float:left;width:46%;margin:.35rem 1.5rem 1rem 0}
.testo-pezzo figure.foto-destra{float:right;width:46%;margin:.35rem 0 1rem 1.5rem}
.testo-pezzo figure.foto-sinistra figcaption,.testo-pezzo figure.foto-destra figcaption{text-align:left}
.testo-pezzo h2,.testo-pezzo h3,.testo-pezzo hr,.testo-pezzo blockquote{clear:both}
.testo-pezzo .testo-centro{text-align:center}
.testo-pezzo .testo-destra{text-align:right}
@media(max-width:600px){
  .testo-pezzo figure.foto-sinistra,.testo-pezzo figure.foto-destra{float:none;width:auto;margin:1.4rem 0}
  .testo-pezzo figure.foto-sinistra figcaption,.testo-pezzo figure.foto-destra figcaption{text-align:center}
}