:root{
  color-scheme:light;
  --fondo:#F7F6F4;
  --foglio:#FFFFFF;
  --ink:#15161A;
  --ink-2:#5C5F68;
  --ink-3:#95989F;
  --filo:#EAE8E4;
  --filo-2:#DEDBD5;
  --tinta:#8A2BE2;
  --tinta-scura:#5F00A3;
  --tinta-velo:#F4E9FD;
  --azzurro:#2BB8E2;
  --azzurro-scuro:#1B93B6;
  --azzurro-velo:#E6F6FC;
  --pesca:#F4E9FD;
  --menta:#E6F6FC;
  --cielo:#EDE3FB;
  --lilla:#DCF0F8;
  --disp:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --testo:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{background:var(--fondo);color:var(--ink-2);font-family:var(--testo);font-size:16px;
  line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--disp);color:var(--ink);font-weight:700;
  letter-spacing:-.035em;line-height:1.1}

/* ---------- il foglio centrale e le corsie ---------- */
.shell{display:grid;grid-template-columns:minmax(0,1fr);justify-content:center;gap:1rem;
  padding:0 1rem 1rem;max-width:120rem;margin:0 auto}
.sheet{background:var(--foglio);border-radius:0 0 24px 24px;overflow:hidden;width:100%;
  border-top:0;
  max-width:1180px;margin:0 auto;border:1px solid var(--filo)}
.ad{display:none}
.ad .slot{position:sticky;top:1rem;width:160px;height:300px;border-radius:12px;
  border:1px dashed var(--filo-2);background:var(--foglio);display:grid;place-items:center;
  text-align:center;color:var(--ink-3);font-size:.64rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;line-height:2}
.ad .slot b{display:block;font-family:var(--disp);font-size:.86rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink-2);text-transform:none}
@media (min-width:1560px){
  .shell{grid-template-columns:160px minmax(0,1180px) 160px;justify-content:center;align-items:start}
  .ad{display:block}
  .sheet{max-width:1180px}
}
.pad{padding:0 2.5rem}
@media (max-width:720px){.pad{padding:0 1.35rem}.shell{padding:0 .6rem .6rem}.sheet{border-radius:0 0 16px 16px}}

/* ---------- testata ---------- */
.head{display:flex;align-items:center;gap:1.5rem;padding:.95rem 2.5rem;flex-wrap:wrap;
  border-bottom:1px solid var(--filo)}
.segno{font-family:var(--disp);font-weight:800;font-size:1.3rem;letter-spacing:-.05em;
  color:var(--ink);display:inline-flex;align-items:center;gap:.5rem;flex:none}
.segno .bollo{width:1.75rem;height:1.75rem;border-radius:9px;display:block;flex:none}
.segno .nome{white-space:nowrap;
  background:linear-gradient(90deg,#4604A6 0%,#000000 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.segno .nome i,.segno .nome .tld{color:inherit;font-style:normal}


.voci{display:flex;gap:1.5rem;margin-left:.5rem;flex-wrap:wrap}
.voci a{font-size:.92rem;font-weight:600;color:var(--ink-2)}
.voci a:hover,.voci a.qui{color:var(--tinta)}
.head .fine{margin-left:auto;display:flex;gap:.5rem}
.tondo{width:2.35rem;height:2.35rem;border-radius:50%;border:1px solid var(--filo-2);
  background:transparent;color:var(--ink);display:grid;place-items:center;font-size:.95rem}
.tondo:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}
@media (max-width:720px){.head{padding:1.2rem 1.35rem}}

/* ---------- apertura, foto grande ---------- */
.apre{padding:2.75rem 0 2.5rem}
.apre .foto{aspect-ratio:21/9;border-radius:18px;overflow:hidden;margin-bottom:1.5rem;
  background:var(--filo)}
.tacca{display:inline-block;font-size:.74rem;font-weight:700;padding:.3rem .75rem;
  border-radius:999px;background:var(--tinta-velo);color:var(--tinta);margin-bottom:.9rem}
.apre h1{font-size:clamp(1.85rem,4.2vw,2.85rem);margin-bottom:.85rem;max-width:19ch;
  text-wrap:balance}
.apre h1 a:hover{color:var(--tinta)}
.apre .occhiello{margin:0 0 1.15rem;font-size:1.06rem;max-width:56ch;color:var(--ink-2)}
.firma{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--ink-3);
  font-weight:500}
.firma .tondino{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--azzurro-velo);
  color:var(--azzurro-scuro);display:grid;place-items:center;font-weight:700;font-size:.78rem;
  font-family:var(--disp)}
.firma .punto{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}

/* ---------- righe di sezione ---------- */
.riga{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.15rem;padding-top:1.75rem;border-top:1px solid var(--filo)}
.riga h2{font-size:1.45rem}
.riga a{font-size:.88rem;font-weight:700;color:var(--azzurro-scuro)}
.riga a:hover{color:var(--tinta)}

/* ---------- schede grandi, due per riga ---------- */
/* auto-fill e non auto-fit: auto-fit collassa le colonne vuote, quindi
   una guida sola si prendeva tutta la larghezza e la foto diventava enorme.
   Con auto-fill le tracce restano e la scheda tiene la sua misura. */
.paia{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1.75rem 1.4rem}
.pezzo .foto{aspect-ratio:3/2;border-radius:14px;overflow:hidden;margin-bottom:.75rem;
  background:var(--filo)}
.pezzo .tacca{margin-bottom:.5rem}
.pezzo h3{font-size:1.16rem;margin-bottom:.35rem;text-wrap:balance}
.pezzo h3 a:hover{color:var(--tinta)}
.pezzo p{margin:0 0 .5rem;font-size:.89rem}
.pezzo .quando{font-size:.82rem;color:var(--ink-3);font-weight:500}

/* le tacche prendono un colore diverso per famiglia: e l unico tocco di colore */
.t-pesca{background:var(--pesca);color:#6B1FB0}
.t-menta{background:var(--menta);color:#12708C}
.t-cielo{background:var(--cielo);color:#5B18A0}
.t-lilla{background:var(--lilla);color:#0E6480}

/* ---------- lista piccola in fondo ---------- */
.minute{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  gap:.9rem 1.75rem}
.minuto{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:center}
.minuto .foto{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--filo)}
.minuto h4{font-size:.98rem;line-height:1.28;margin-bottom:.2rem}
.minuto h4 a:hover{color:var(--tinta)}
.minuto span{font-size:.79rem;color:var(--ink-3);font-weight:500}

/* ---------- iscrizione ---------- */
.avviso{background:var(--tinta-velo);border-radius:18px;padding:1.75rem;text-align:center;
  margin:2.25rem 0 0}
.avviso h2{font-size:1.5rem;margin-bottom:.5rem}
.avviso p{margin:0 auto 1.4rem;max-width:44ch;font-size:.95rem}
.avviso form{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.avviso input{font:inherit;font-size:.92rem;padding:.72rem 1rem;border-radius:999px;
  border:1px solid var(--filo-2);background:var(--foglio);color:var(--ink);min-width:15rem}
.avviso input::placeholder{color:var(--ink-3)}
.avviso button{background:var(--tinta);color:#fff;border:0;border-radius:999px;
  padding:.72rem 1.6rem;font-weight:700;font-size:.92rem}
.avviso button:hover{background:var(--tinta-scura)}

/* ---------- piede ---------- */
.piede{margin-top:2.5rem;border-top:1px solid var(--filo)}




a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--tinta);
  outline-offset:3px;border-radius:6px}

/* ---------- i cinque in cima: uno grande e quattro di lato ---------- */
.cinque{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:.7rem;margin:1.1rem 0 2rem;
  aspect-ratio:16/7.2;
  max-height:calc(100svh - 13.5rem);min-height:21rem}
.p{position:relative;border-radius:16px;overflow:hidden;display:block;isolation:isolate;
  background:var(--filo)}
.p .ph{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.p:hover .ph{transform:scale(1.045)}
.p::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,8,16,.94) 0%,rgba(10,8,16,.66) 40%,rgba(10,8,16,.12) 78%,rgba(10,8,16,0) 100%)}
.p .su{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.95rem}
.p .segna{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:.24rem .6rem;border-radius:999px;color:#fff;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);margin-bottom:.55rem}
.p .titolo{font-family:var(--disp);color:#fff;font-weight:700;letter-spacing:-.03em;
  line-height:1.14;font-size:1.02rem;margin:0;text-wrap:balance;
  text-shadow:0 1px 14px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4)}
.p .sotto{margin:.5rem 0 0;font-size:.78rem;color:rgba(255,255,255,.82);font-weight:500;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.p.grande{grid-column:span 2;grid-row:span 2}
.p.grande .su{padding:1.4rem}
.p.grande .segna{background:var(--tinta);font-size:.68rem}
.p.grande .titolo{font-size:clamp(1.3rem,2.5vw,1.9rem)}
.p.grande .sotto{font-size:.85rem;margin-top:.7rem}
.p:nth-child(3) .segna{background:var(--azzurro);color:#0B2731}
@media (max-width:900px){
  .cinque{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:11rem;
    aspect-ratio:auto;max-height:none;min-height:0}
  .p.grande{grid-column:span 2;grid-row:span 1;min-height:16rem}
}
@media (max-width:560px){
  .cinque{grid-template-columns:1fr;grid-auto-rows:12rem}
  .p.grande{grid-column:span 1}
}


/* ---------- intestazione della pagina ---------- */
.intesta{padding:1.35rem 0 .3rem}
.intesta h1{font-size:clamp(1.4rem,2.6vw,1.8rem);letter-spacing:-.04em;max-width:26ch;
  margin-bottom:.45rem;text-wrap:balance}
.intesta p{margin:0;font-size:.92rem;color:var(--ink-2);max-width:70ch}
.intesta p b{color:var(--ink);font-weight:700}


/* ---------- telefono ---------- */
@media (max-width:900px){
  .tondo{width:2.75rem;height:2.75rem}
}
@media (max-width:760px){
  /* il menu scorre invece di andare a capo su tre righe */
  .voci{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-left:0;gap:1.15rem;width:100%;order:3;padding-bottom:.15rem}
  .voci::-webkit-scrollbar{display:none}
  .head{gap:.75rem;row-gap:.85rem}
  .head .fine{margin-left:auto;order:2}
  .segno{order:1}
  /* il dito vuole almeno 44px, non 37 */
  .tondo{width:2.75rem;height:2.75rem}
  /* titolo sopra la foto: piu piccolo, se no copre meta immagine */
  .p .titolo{font-size:.94rem}
  .p .su{padding:.8rem}
  .p .sotto{font-size:.72rem;margin-top:.35rem}
  .p.grande .titolo{font-size:1.25rem}
  .p.grande .su{padding:1.1rem}
  .intesta{padding:1.1rem 0 .25rem}
  .intesta p{font-size:.9rem}
  .riga{padding-top:1.4rem;margin-bottom:.9rem}
  .riga h2{font-size:1.25rem}
  .paia{gap:1.5rem 1.1rem}
  .pezzo h3{font-size:1.08rem}
  .avviso{padding:1.4rem 1.1rem;border-radius:14px}
  .avviso h2{font-size:1.22rem}
  .avviso input{min-width:0;width:100%}
  .avviso form{flex-direction:column}
  .avviso button{width:100%}
  .minuto{grid-template-columns:4.6rem 1fr;gap:.8rem}
  .piede{gap:1.5rem}
}
@media (max-width:430px){
  /* sotto i 430 due tessere per riga diventano illeggibili */
  .cinque{grid-template-columns:1fr;grid-auto-rows:11.5rem;gap:.6rem}
  .p.grande{grid-column:span 1;min-height:14rem}
  .p .titolo{font-size:1.02rem}
  .minute{gap:.8rem}
}


/* ---------- le categorie piu cliccate ---------- */
.griglia-cat{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));
  gap:.9rem}
.cat-box{display:flex;align-items:center;gap:.9rem;padding:1rem 1.05rem;border-radius:14px;
  background:var(--foglio);border:1px solid var(--filo);position:relative;overflow:hidden;
  transition:border-color .18s ease,transform .18s ease}
.cat-box:hover{transform:translateY(-2px);border-color:var(--filo-2)}
.cat-box .segno-i{width:2.75rem;height:2.75rem;border-radius:12px;flex:none;display:grid;
  place-items:center;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.cat-box:hover .segno-i{transform:scale(1.08) rotate(-4deg)}
.cat-box .segno-i svg{width:1.4rem;height:1.4rem;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.cat-box .testo{min-width:0}
.cat-box .testo b{display:block;font-family:var(--disp);font-weight:700;font-size:.98rem;
  letter-spacing:-.025em;color:var(--ink);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-box .testo span{font-size:.8rem;color:var(--ink-3);font-weight:500}
.cat-box .freccia{margin-left:auto;color:var(--ink-3);font-size:.95rem;flex:none;
  transition:transform .18s ease}
.cat-box:hover .freccia{transform:translateX(3px);color:var(--tinta)}
/* i due colori del sito si alternano, cosi la griglia non e monotona */
.v1 .segno-i{background:#F1E6FE;color:#7A28C9}
.v2 .segno-i{background:#E4F5FB;color:#1683A5}
.v3 .segno-i{background:#EDE7FC;color:#5F2FB8}
.v4 .segno-i{background:#DEF1F8;color:#12708C}
@media (max-width:760px){
  .griglia-cat{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.7rem}
  .cat-box{padding:.85rem .9rem;gap:.7rem}
  .cat-box .segno-i{width:2.4rem;height:2.4rem;border-radius:10px}
}


/* ---------- chi firma il pezzo ---------- */
:root{--faccia:url("data:image/jpeg;base64,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")}
.autore{display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:var(--ink-3);
  font-weight:500}
.autore .faccia{width:1.7rem;height:1.7rem;border-radius:50%;flex:none;
  background-image:var(--faccia);background-size:cover;background-position:center;
  box-shadow:0 0 0 1px var(--filo)}
.autore b{color:var(--ink);font-weight:600}
.autore .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3);flex:none}
/* sopra la foto del mosaico va in chiaro */
.p .autore{color:rgba(255,255,255,.8);text-shadow:0 1px 8px rgba(0,0,0,.5);margin-top:.5rem}
.p .autore b{color:#fff}
.p .autore .faccia{width:1.5rem;height:1.5rem;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.p .autore .sep{background:rgba(255,255,255,.55)}


/* ---------- il richiamo al canale ---------- */
.avviso .marchio{width:3.4rem;height:3.4rem;border-radius:16px;margin:0 auto .85rem;
  display:grid;place-items:center;background:#25D366;box-shadow:0 6px 18px rgba(37,211,102,.28)}
.avviso .marchio svg{width:1.9rem;height:1.9rem;fill:#fff}
.avviso .vai{display:inline-flex;align-items:center;gap:.55rem;background:#25D366;
  color:#08331A;border:0;border-radius:999px;padding:.8rem 1.6rem;font-weight:700;
  font-size:.95rem;text-decoration:none}
.avviso .vai:hover{background:#1EBE5A;color:#062A15}
.avviso .vai svg{width:1.15rem;height:1.15rem;fill:currentColor}




/* nelle quattro piccole: chi scrive a sinistra, quando a destra */
.firma-due{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:.6rem}
.firma-due .chi{display:flex;align-items:center;gap:.5rem;min-width:0}
.firma-due .faccia{width:1.7rem;height:1.7rem;border-radius:50%;flex:none;
  background-image:var(--faccia);background-size:cover;background-position:center;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.firma-due .chi b{color:#fff;font-weight:600;font-size:.79rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.firma-due .quando{text-align:right;flex:none;line-height:1.25;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.firma-due .quando span{display:block;font-size:.75rem;color:rgba(255,255,255,.88);
  font-weight:500}
.firma-due .quando em{display:block;font-style:normal;font-size:.67rem;
  color:rgba(255,255,255,.66);font-weight:500;margin-top:.05rem}
@media (max-width:520px){
  .firma-due .chi b{font-size:.75rem}
  .firma-due .quando span{font-size:.72rem}
}


/* le foto qui sono immagini vere, non sfondi */
.p img,.pezzo .foto img,.minuto .foto img{width:100%;height:100%;object-fit:cover;display:block}
.p > img{position:absolute;inset:0}
.autore .faccia,.firma-due .faccia{background-image:none;overflow:hidden}
.autore .faccia img,.firma-due .faccia img{position:static;width:100%;height:100%;
  object-fit:cover;border-radius:50%;inset:auto}

/* la pagina di un articolo */
.pezzo-testa{padding:1.75rem 0 .5rem;max-width:46rem}
.pezzo-testa h1{font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.04em;line-height:1.08;
  margin-bottom:.7rem;text-wrap:balance}
.pezzo-testa .sommario{font-size:1.05rem;color:var(--ink-2);margin:0 0 1.1rem}
.copertona{aspect-ratio:16/9;border-radius:18px;overflow:hidden;margin:1.25rem 0 1.75rem;
  background:var(--filo)}
.corpo{max-width:44rem;font-size:1.05rem;line-height:1.72;color:var(--ink-2)}
.corpo h2{font-size:1.55rem;margin:2.25rem 0 .8rem;letter-spacing:-.032em}
.corpo h3{font-size:1.2rem;margin:1.75rem 0 .6rem;letter-spacing:-.028em}
.corpo p{margin:0 0 1.1rem}
.corpo ul,.corpo ol{margin:0 0 1.2rem;padding-left:1.3rem}
.corpo li{margin-bottom:.45rem}
.corpo a{color:var(--tinta);font-weight:700;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.corpo a:hover{color:var(--tinta-scura)}
.corpo img{max-width:100%;height:auto;border-radius:12px;margin:1.25rem 0}
.corpo figure{margin:1.5rem 0}
.corpo figcaption{font-size:.85rem;color:var(--ink-3);margin-top:.5rem}
.corpo table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}
.corpo th{text-align:left;font-weight:700;color:var(--ink);padding:.7rem .6rem;
  border-bottom:2px solid var(--filo-2)}
.corpo td{padding:.7rem .6rem;border-bottom:1px solid var(--filo)}
.corpo blockquote{margin:1.5rem 0;padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--tinta);color:var(--ink);font-style:italic}
.tabellone{overflow-x:auto}
.briciole{font-size:.82rem;color:var(--ink-3);padding-top:1.25rem}
.briciole a:hover{color:var(--tinta)}
.briciole span{margin:0 .4rem}
@media (max-width:720px){.corpo{font-size:1rem}.corpo h2{font-size:1.35rem}}
/* ---------- la pagina di un articolo: testo e colonna di fianco ---------- */
.due-colonne{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:2.75rem;
  align-items:start;padding-top:1.5rem}
.due-colonne .corpo{max-width:none}
.fianco{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:1.25rem}

/* la copertina non deve mangiarsi lo schermo: il lettore vuole il testo */
.copertona{aspect-ratio:auto;max-height:22rem;height:22rem}
.copertona img{width:100%;height:100%;object-fit:cover}

.indice{background:var(--foglio);border:1px solid var(--filo);border-radius:14px;
  padding:1.15rem 1.25rem}
.indice h2{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.7rem}
.indice ol{list-style:none;margin:0;padding:0;counter-reset:v}
.indice li{counter-increment:v;padding:.4rem 0;border-bottom:1px solid var(--filo)}
.indice li:last-child{border-bottom:0;padding-bottom:0}
.indice a{font-size:.88rem;font-weight:600;line-height:1.3;color:var(--ink-2);
  display:flex;gap:.6rem}
.indice a::before{content:counter(v);color:var(--tinta);font-weight:700;flex:none;
  font-variant-numeric:tabular-nums}
.indice a:hover{color:var(--tinta)}

.riquadro-ads{border:1px dashed var(--filo-2);border-radius:14px;height:250px;
  display:grid;place-items:center;text-align:center;color:var(--ink-3);font-size:.72rem;
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:2;
  background:var(--foglio)}
.riquadro-ads b{display:block;font-family:var(--disp);font-size:.95rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink-2);text-transform:none}

.panel{background:var(--foglio);border:1px solid var(--filo);border-radius:14px;
  padding:1.15rem 1.25rem}
.panel h2{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.7rem}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:1.2rem 1fr;gap:.6rem;padding:.6rem 0;
  border-bottom:1px solid var(--filo);align-items:baseline}
.rows li:last-child{border-bottom:0;padding-bottom:0}
.rows .n{font-weight:700;font-size:.85rem;color:var(--tinta);
  font-variant-numeric:tabular-nums}
.rows a{font-size:.87rem;font-weight:600;line-height:1.3}
.rows a span{display:block;font-size:.75rem;color:var(--ink-3);font-weight:500;
  margin-top:.1rem}
.rows a:hover{color:var(--tinta)}

@media (max-width:1000px){
  .due-colonne{grid-template-columns:1fr;gap:2rem}
  .fianco{position:static;flex-direction:row;flex-wrap:wrap}
  .fianco > *{flex:1 1 15rem}
  .copertona{height:auto;max-height:16rem;aspect-ratio:16/9}
}
@media (max-width:640px){
  .fianco{flex-direction:column}
  .copertona{max-height:13rem}
}
/* ---------- il piede ---------- */
.piede{margin-top:2.5rem;border-top:1px solid var(--filo);background:var(--fondo)}
.piede-alto{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:2.5rem;padding:2.5rem 3.5rem 2rem}
.piede-alto > div{display:flex;flex-direction:column;align-items:flex-start}
.piede-alto b{font-family:var(--disp);font-size:.74rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.85rem}
.piede-alto a{color:var(--ink-2);font-size:.89rem;font-weight:500;line-height:2}
.piede-alto a:hover{color:var(--tinta)}
.piede-chi .segno{margin-bottom:.85rem}
.piede-chi p{margin:0 0 .6rem;font-size:.87rem;color:var(--ink-2);max-width:38ch;
  line-height:1.6}
.piede-conta{font-size:.82rem;color:var(--ink-3)}
.piede-conta b{display:inline;font-family:var(--testo);font-size:.95rem;letter-spacing:0;
  text-transform:none;color:var(--tinta);margin:0}

/* la riga legale: centrata, staccata, come su un sito che ha una partita IVA */
.piede-fondo{border-top:1px solid var(--filo);padding:1.25rem 1.5rem 1.5rem;
  text-align:center}
.piede-fondo p{margin:0;font-size:.82rem;color:var(--ink-3);line-height:1.7}
.piede-fondo p:first-child{color:var(--ink-2);font-weight:500}

@media (max-width:900px){
  .piede-alto{grid-template-columns:1fr 1fr;gap:2rem 1.5rem;padding:2rem 1.75rem 1.5rem}
  .piede-chi{grid-column:span 2}
}
@media (max-width:560px){
  .piede-alto{grid-template-columns:1fr;padding:1.75rem 1.35rem 1.25rem}
  .piede-chi{grid-column:span 1}
}

/* ---------- le tabelle dentro gli articoli ----------
   364 articoli su 708 ne hanno una, e alcune arrivano a nove colonne.
   Il contenitore scorre da solo: senza, su telefono sfondano la pagina. */
.tabellone{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.75rem 0;
  border:1px solid var(--filo);border-radius:14px;background:var(--foglio);
  /* l'ombra a destra dice che c'e' altro da vedere, e sparisce a fine corsa */
  background-image:linear-gradient(to right,var(--foglio),var(--foglio)),
    linear-gradient(to right,var(--foglio),var(--foglio)),
    linear-gradient(to right,rgba(138,43,226,.10),rgba(138,43,226,0)),
    linear-gradient(to left,rgba(138,43,226,.10),rgba(138,43,226,0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:22px 100%,22px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.corpo .tabellone table{width:100%;border-collapse:collapse;margin:0;
  font-size:.94rem;min-width:32rem}
.corpo .tabellone thead th{background:var(--tinta-velo);color:var(--ink);
  font-weight:700;text-align:left;padding:.85rem 1rem;white-space:nowrap;
  border-bottom:2px solid var(--tinta);font-size:.86rem;letter-spacing:-.01em}
.corpo .tabellone thead th strong{font-weight:700}
.corpo .tabellone td{padding:.8rem 1rem;border-bottom:1px solid var(--filo);
  vertical-align:top;color:var(--ink-2);line-height:1.55}
/* la prima colonna e' l'etichetta della riga: si stacca dal resto */
.corpo .tabellone tbody td:first-child{color:var(--ink);font-weight:600}
.corpo .tabellone tbody tr:nth-child(even) td{background:var(--fondo)}
.corpo .tabellone tbody tr:last-child td{border-bottom:0}
.corpo .tabellone tbody tr:hover td{background:var(--azzurro-velo)}
.corpo .tabellone a{color:var(--tinta)}
.corpo .tabellone caption{caption-side:top;text-align:left;padding:.85rem 1rem .3rem;
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
@media (max-width:640px){
  .corpo .tabellone table{font-size:.88rem;min-width:26rem}
  .corpo .tabellone thead th,.corpo .tabellone td{padding:.65rem .75rem}
}

/* ---------- il banner prezzi ----------
   Il blocco che porta il lettore al negozio: viola per l'azione,
   azzurro per il contorno, il prezzo grande perche' e' il dato che cerca. */
.prezzo-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:1.25rem;align-items:center;margin:1.75rem 0;padding:1.15rem 1.25rem;
  border:1px solid var(--filo);border-radius:16px;background:var(--foglio);
  position:relative;overflow:hidden}

.prezzo-banner .pb-foto{width:5.5rem;height:5.5rem;border-radius:12px;overflow:hidden;
  background:var(--fondo);flex:none}
.prezzo-banner .pb-foto img{width:100%;height:100%;object-fit:contain;padding:.35rem}
.prezzo-banner .pb-chi{font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--azzurro-scuro);margin:0 0 .2rem}
.prezzo-banner h3,.prezzo-banner .pb-nome{font-family:var(--disp);font-weight:700;
  font-size:1.05rem;line-height:1.25;letter-spacing:-.025em;margin:0 0 .35rem;
  color:var(--ink)}
.prezzo-banner .pb-nota{margin:0;font-size:.83rem;color:var(--ink-3)}
.prezzo-banner .pb-destra{text-align:right;display:flex;flex-direction:column;
  align-items:flex-end;gap:.55rem;flex:none}
.prezzo-banner .pb-prezzo{font-family:var(--disp);font-weight:800;font-size:1.75rem;
  letter-spacing:-.04em;color:var(--tinta);line-height:1;
  font-variant-numeric:tabular-nums}
.prezzo-banner .pb-prezzo small{font-size:.95rem;font-weight:700}
.prezzo-banner .pb-prima{font-size:.8rem;color:var(--ink-3);text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.prezzo-banner .pb-sconto{background:var(--azzurro-velo);color:var(--azzurro-scuro);
  font-size:.72rem;font-weight:800;padding:.16rem .45rem;border-radius:999px}
.prezzo-banner .pb-vai{display:inline-flex;align-items:center;gap:.4rem;
  background:var(--tinta);color:#fff;font-weight:700;font-size:.88rem;
  padding:.6rem 1.15rem;border-radius:10px;white-space:nowrap;text-decoration:none}
.prezzo-banner .pb-vai:hover{background:var(--tinta-scura);color:#fff}
@media (max-width:640px){
  .prezzo-banner{grid-template-columns:auto minmax(0,1fr);gap:.9rem;padding:1rem}
  .prezzo-banner .pb-destra{grid-column:1 / -1;flex-direction:row;
    align-items:center;justify-content:space-between;width:100%;
    border-top:1px solid var(--filo);padding-top:.85rem}
  .prezzo-banner .pb-vai{flex:1;justify-content:center}
  .prezzo-banner .pb-foto{width:4rem;height:4rem}
}


/* ---------- i blocchi dentro gli articoli (prodotti e coupon) ---------- */
.corpo .wab-prodotti,.corpo .wab-coupon-lista{display:grid;gap:.8rem;margin:1.75rem 0;
  clear:both}

.corpo .wab-prodotto{display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:.35rem 1.1rem;align-items:center;
  padding:.95rem 1.1rem;background:var(--foglio);border:1px solid var(--filo);
  border-radius:14px;position:relative;overflow:hidden;
  transition:border-color .16s ease}
.corpo .wab-prodotto:hover{border-color:var(--filo-2)}

.corpo .wab-prodotto--senza-img{grid-template-columns:minmax(0,1fr) auto}

/* la foto: era questa a sfondare, senza una misura sua */
.corpo .wab-prodotto__img{width:4.5rem;height:4.5rem;flex:none;border-radius:10px;
  overflow:hidden;background:var(--fondo);display:grid;place-items:center}
.corpo .wab-prodotto__img img{width:100%;height:100%;object-fit:contain;padding:.3rem;
  margin:0;border-radius:0}

.corpo .wab-prodotto__corpo{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.corpo .wab-prodotto__negozio{font-size:.67rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--azzurro-scuro)}
.corpo .wab-prodotto__corpo strong{font-weight:700}
.corpo .wab-prodotto__titolo{font-family:var(--disp);font-weight:700;font-size:1rem;
  line-height:1.25;letter-spacing:-.022em;color:var(--ink);text-decoration:none}
.corpo .wab-prodotto__titolo:hover{color:var(--tinta);text-decoration:underline;
  text-underline-offset:2px}
.corpo .wab-prodotto__nota,.corpo .wab-prodotto__desc{font-size:.82rem;color:var(--ink-3);
  margin:0}

.corpo .wab-prodotto__azioni{display:flex;flex-direction:column;align-items:flex-end;
  gap:.3rem;flex:none;text-align:right}
.corpo .wab-prodotto__prezzo{font-family:var(--disp);font-weight:800;font-size:1.3rem;
  letter-spacing:-.035em;color:var(--tinta);line-height:1;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.corpo .wab-prodotto__prezzo-nota{font-size:.74rem;color:var(--ink-3);font-weight:500}
.corpo .wab-prodotto__sconto{background:var(--azzurro-velo);color:var(--azzurro-scuro);
  font-size:.7rem;font-weight:800;padding:.14rem .42rem;border-radius:999px}

/* ---------- i coupon ---------- */
.corpo .wab-coupon{display:grid;gap:.55rem;padding:1rem 1.1rem;background:var(--foglio);
  border:1px solid var(--filo);border-radius:14px;position:relative;overflow:hidden}

.corpo .wab-coupon__testa{display:flex;align-items:baseline;justify-content:space-between;
  gap:.75rem;flex-wrap:wrap}
.corpo .wab-coupon__negozio{font-family:var(--disp);font-weight:700;font-size:1rem;
  letter-spacing:-.025em;color:var(--ink)}
.corpo .wab-coupon__scadenza{font-size:.74rem;color:var(--ink-3);font-weight:500}
.corpo .wab-coupon__offerta{font-size:.94rem;color:var(--ink-2);margin:0}
.corpo .wab-coupon__note{font-size:.8rem;color:var(--ink-3);margin:0}
.corpo .wab-coupon__azioni{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-top:.15rem}
/* il codice: l'unico elemento colorato, perche' e' l'unico da copiare */
.corpo .wab-coupon__codice{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;font-size:.95rem;letter-spacing:.06em;background:var(--tinta-velo);
  color:var(--tinta);border:1px dashed var(--tinta);border-radius:8px;
  padding:.45rem .85rem;cursor:pointer}
.corpo .wab-coupon__vai{background:var(--tinta);color:#fff;font-weight:700;font-size:.86rem;
  padding:.5rem 1rem;border-radius:9px;text-decoration:none;white-space:nowrap}
.corpo .wab-coupon__vai:hover{background:var(--tinta-scura);color:#fff}

/* ---------- i banner degli operatori telefonici ---------- */
/* Sette blocchi da quattro celle, uno per operatore, con nomi di classe
   tutti diversi: si prendono per il pezzo comune del nome. */
.corpo [class*="-phone-banner-slim"]{display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;gap:.5rem 1rem;align-items:center;
  padding:1rem 1.1rem;background:var(--foglio);border:1px solid var(--filo);
  border-radius:14px;margin:1.5rem 0;position:relative;overflow:hidden}

.corpo [class*="-cell-brand"]{font-family:var(--disp);font-weight:800;font-size:.95rem;
  letter-spacing:-.02em;color:var(--ink)}
.corpo [class*="-offer-icon"]{display:none}
.corpo [class*="-cell-details"]{min-width:0}
.corpo [class*="-offer-title"]{font-weight:600;font-size:.94rem;color:var(--ink-2);
  display:block}
.corpo [class*="-badge-limited"]{display:inline-block;background:var(--azzurro-velo);
  color:var(--azzurro-scuro);font-size:.68rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:.16rem .45rem;border-radius:999px;margin-bottom:.25rem}
.corpo [class*="-activation-fee"]{font-size:.76rem;color:var(--ink-3);display:block}
.corpo [class*="-price-tag"]{font-family:var(--disp);font-weight:800;font-size:1.3rem;
  letter-spacing:-.035em;color:var(--tinta);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.corpo [class*="-cta-button"]{background:var(--tinta);color:#fff;font-weight:700;
  font-size:.86rem;padding:.55rem 1.05rem;border-radius:9px;text-decoration:none;
  white-space:nowrap;display:inline-block}
.corpo [class*="-cta-button"]:hover{background:var(--tinta-scura);color:#fff}

@media (max-width:640px){
  .corpo .wab-prodotto{grid-template-columns:auto minmax(0,1fr);gap:.5rem .85rem;
    padding:.85rem .9rem}
  .corpo .wab-prodotto__azioni{grid-column:1 / -1;flex-direction:row;align-items:center;
    justify-content:space-between;width:100%;border-top:1px solid var(--filo);
    padding-top:.7rem;text-align:left}
  .corpo .wab-prodotto--senza-img{grid-template-columns:minmax(0,1fr)}
  .corpo .wab-prodotto__img{width:3.5rem;height:3.5rem}
  .corpo [class*="-phone-banner-slim"]{grid-template-columns:minmax(0,1fr) auto}
  .corpo [class*="-cell-cta"]{grid-column:1 / -1}
  .corpo [class*="-cta-button"]{display:block;text-align:center}
}


/* ---------- il testo delle guide: più grande e più scuro (02/09) ----------
   18px su schermo grande, 17,5 su telefono, in grigio scuro invece che medio.
   Il grigio chiaro va bene per una data o una didascalia; il corpo di una
   guida lunga si legge meglio con più contrasto. */
.corpo{--testo-scuro:#33363D;font-size:1.12rem;line-height:1.75;color:var(--testo-scuro)}
.corpo p,.corpo li,.corpo td{color:var(--testo-scuro)}
.corpo li{margin-bottom:.5rem}
.corpo h2{font-size:1.62rem;margin:2.4rem 0 .85rem}
.corpo h3{font-size:1.26rem;margin:1.9rem 0 .65rem}
.corpo blockquote{color:var(--ink)}

/* la riga di sommario sotto il titolo segue il corpo */
.sommario{color:#4A4D55;font-size:1.1rem}

@media (max-width:720px){
  .corpo{font-size:1.09rem;line-height:1.78}
  .corpo h2{font-size:1.4rem;margin:2rem 0 .7rem}
  .corpo h3{font-size:1.16rem}
  .sommario{font-size:1.04rem}
}


/* ---------- i blocchi prodotto: il primo template (02/09) ----------
   Un riquadro per prodotto, bordo sottile, angoli, prezzo in viola.
   Senza la barretta colorata sul lato: quella si riconosce da lontano
   come design fatto a macchina. */
.corpo .wab-prodotti,.corpo .wab-coupon-lista{display:grid;gap:.8rem;margin:2.25rem 0;
  padding:0;border:0;background:none;clear:both}

.corpo .wab-prodotto{display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:.35rem 1.1rem;align-items:center;
  padding:1rem 1.15rem;background:var(--foglio);border:1px solid var(--filo-2);
  border-radius:14px;box-shadow:0 1px 3px rgba(20,16,40,.04);
  transition:border-color .16s ease,box-shadow .16s ease}
.corpo .wab-prodotto::before{content:none}
.corpo .wab-prodotto:hover{border-color:var(--tinta);
  box-shadow:0 4px 14px rgba(138,43,226,.10)}
.corpo .wab-prodotto--senza-img{grid-template-columns:minmax(0,1fr) auto}

/* la foto del prodotto E' questo elemento, non un contenitore */
img.wab-prodotto__img,.corpo .wab-prodotto__img{
  width:4.4rem;height:4.4rem;flex:none;border-radius:10px;
  object-fit:contain;background:transparent;padding:.3rem;margin:0;
  border:1px solid var(--filo);display:block}
/* e se un giorno arrivasse avvolta in un div, funziona lo stesso */
.corpo .wab-prodotto__img > img{width:100%;height:100%;object-fit:contain;
  margin:0;padding:0;border:0;border-radius:0}

.corpo .wab-prodotto__corpo{min-width:0;display:flex;flex-direction:column;gap:.12rem}
.corpo .wab-prodotto__negozio{font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--azzurro-scuro)}
.corpo .wab-prodotto__titolo{font-weight:700;font-size:1rem;line-height:1.28;
  color:var(--ink);text-decoration:none}
.corpo .wab-prodotto__titolo:hover{color:var(--tinta);text-decoration:underline;
  text-underline-offset:2px}
.corpo .wab-prodotto__nota,.corpo .wab-prodotto__desc{font-size:.82rem;
  color:var(--ink-3);margin:0}

.corpo .wab-prodotto__azioni{display:flex;flex-direction:column;align-items:flex-end;
  gap:.2rem;flex:none;text-align:right}
.corpo .wab-prodotto__prezzo{font-family:var(--disp);font-weight:800;font-size:1.38rem;
  letter-spacing:-.035em;color:var(--tinta);line-height:1.1;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.corpo .wab-prodotto__prezzo-nota{font-size:.74rem;color:var(--ink-3);font-weight:500}
.corpo .wab-prodotto__sconto{background:var(--azzurro-velo);color:var(--azzurro-scuro);
  font-size:.7rem;font-weight:800;padding:.13rem .42rem;border-radius:6px}

.corpo .wab-coupon{background:var(--foglio);border:1px solid var(--filo-2);
  border-radius:14px;padding:1rem 1.15rem;box-shadow:0 1px 3px rgba(20,16,40,.04)}
.corpo .wab-coupon::before{content:none}
.corpo .wab-coupon:hover{border-color:var(--tinta)}

.corpo [class*="-phone-banner-slim"]{background:var(--foglio);
  border:1px solid var(--filo-2);box-shadow:0 1px 3px rgba(20,16,40,.04)}
.corpo [class*="-phone-banner-slim"]::before{content:none}
.corpo [class*="-phone-banner-slim"]:hover{border-color:var(--tinta)}
.corpo [class*="-price-tag"]{color:var(--tinta);font-size:1.38rem}

.prezzo-banner{background:var(--foglio);border:1px solid var(--filo-2);
  box-shadow:0 1px 3px rgba(20,16,40,.04)}
.prezzo-banner::before{content:none}
.prezzo-banner:hover{border-color:var(--tinta)}

@media (max-width:560px){
  .corpo .wab-prodotto{grid-template-columns:auto minmax(0,1fr);gap:.45rem .85rem;
    padding:.9rem .95rem}
  .corpo .wab-prodotto__azioni{grid-column:1 / -1;flex-direction:row;align-items:center;
    justify-content:space-between;width:100%;border-top:1px solid var(--filo);
    padding-top:.65rem;text-align:left}
  .corpo .wab-prodotto--senza-img{grid-template-columns:minmax(0,1fr)}
  .corpo .wab-prodotto__img{width:3.4rem;height:3.4rem}
}


/* ---------- il menu a panino, solo su telefono (02/09) ----------
   E' un <details>: si apre senza JavaScript, quindi non puo' non partire. */
.panino{display:none;position:relative;margin-left:auto}
.panino > summary{list-style:none;cursor:pointer;width:2.75rem;height:2.75rem;
  border-radius:10px;border:1px solid var(--filo-2);background:var(--foglio);
  display:grid;align-content:center;justify-items:center;gap:.28rem}
.panino > summary::-webkit-details-marker{display:none}
.panino > summary span{display:block;width:1.15rem;height:2px;background:var(--ink);
  border-radius:2px;transition:transform .18s ease,opacity .18s ease}
/* aperto, le tre righe diventano una croce */
.panino[open] > summary span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.panino[open] > summary span:nth-child(2){opacity:0}
.panino[open] > summary span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.panino-voci{position:absolute;right:0;top:calc(100% + .5rem);z-index:60;
  min-width:15rem;background:var(--foglio);border:1px solid var(--filo-2);
  border-radius:14px;padding:.4rem;box-shadow:0 12px 30px rgba(20,16,40,.14);
  display:flex;flex-direction:column}
.panino-voci a{padding:.75rem .9rem;border-radius:9px;font-size:.98rem;font-weight:600;
  color:var(--ink);text-decoration:none}
.panino-voci a:hover{background:var(--tinta-velo);color:var(--tinta)}
.panino-cerca{border-top:1px solid var(--filo);margin-top:.3rem;padding-top:.85rem;
  color:var(--tinta)}

@media (max-width:760px){
  /* le voci in fila spariscono, entra il panino */
  .voci{display:none}
  .panino{display:block}
  .head{gap:.75rem}
}


/* ---------- il campo di ricerca nella testata (02/09) ---------- */
.cerca-testa{position:relative}
.cerca-testa > summary{list-style:none;cursor:pointer}
.cerca-testa > summary::-webkit-details-marker{display:none}
.cerca-testa[open] > summary{background:var(--tinta);border-color:var(--tinta);color:#fff}
.cerca-pannello{position:absolute;right:0;top:calc(100% + .5rem);z-index:60;
  display:flex;gap:.4rem;padding:.45rem;background:var(--foglio);
  border:1px solid var(--filo-2);border-radius:12px;
  box-shadow:0 12px 30px rgba(20,16,40,.14)}
.cerca-pannello input{font:inherit;font-size:.95rem;padding:.6rem .8rem;
  border:1px solid var(--filo-2);border-radius:9px;background:var(--fondo);
  color:var(--ink);width:15rem}
.cerca-pannello input::placeholder{color:var(--ink-3)}
.cerca-pannello button{font:inherit;font-weight:700;font-size:.9rem;border:0;
  border-radius:9px;padding:.6rem 1rem;background:var(--tinta);color:#fff;cursor:pointer}
.cerca-pannello button:hover{background:var(--tinta-scura)}
@media (max-width:560px){
  .cerca-pannello{right:-.5rem}
  .cerca-pannello input{width:11rem}
}


/* ---------- la firma sotto il titolo (02/09) ----------
   Prima era una riga sola con i puntini: su telefono si spezzava a meta'
   delle parole. Ora la foto sta a sinistra e i dati vanno a capo interi. */
.firma{display:flex;align-items:center;gap:.75rem;margin-top:1.1rem}
.firma .faccia{width:2.6rem;height:2.6rem;border-radius:50%;overflow:hidden;flex:none;
  box-shadow:0 0 0 2px var(--foglio),0 0 0 3px var(--filo-2)}
.firma .faccia img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:50%}
.firma-testo{min-width:0}
.firma-testo b{display:block;font-size:.95rem;font-weight:700;color:var(--ink);
  line-height:1.3}
.firma-dati{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .85rem;
  font-size:.83rem;color:var(--ink-3);font-weight:500;margin-top:.1rem}
/* il punto che separa e' disegnato, non un carattere: cosi' non resta
   appeso da solo quando una voce va a capo */
.firma-dati span{display:inline-flex;align-items:center;white-space:nowrap}
.firma-dati span + span::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--ink-3);margin-right:.85rem;flex:none}
.firma-viste{color:var(--tinta);font-weight:600}

/* ---------- la colonna di fianco resta agganciata ----------
   Si ferma sotto la testata e scorre con la pagina fino in fondo. */
.due-colonne{align-items:start}
.fianco{position:sticky;top:1rem;align-self:start;
  max-height:none;overflow:visible}
@media (max-width:1000px){
  .fianco{position:static;max-height:none;overflow:visible}
}

/* ---------- il pannello del menu veniva tagliato (02/09) ----------
   .sheet aveva overflow:hidden per arrotondare gli angoli in basso, e
   tagliava tutto cio che esce dal foglio: il menu a panino si apriva
   ma restava invisibile. Gli angoli ora li arrotonda il piede, che e
   lultimo elemento dentro. */
.sheet{overflow:visible}
.piede{border-radius:0 0 24px 24px;overflow:hidden}
.head{position:relative;z-index:50}
.panino-voci,.cerca-pannello{z-index:80}
@media (max-width:720px){.piede{border-radius:0 0 16px 16px}}

/* ---------- il modulo di ricerca nella pagina /cerca/ ---------- */
.finder{display:flex;gap:.5rem;align-items:center;max-width:34rem;margin:1.1rem 0 .35rem;
  background:var(--foglio);border:1px solid var(--filo-2);border-radius:999px;
  padding:.35rem .35rem .35rem 1.1rem;
  box-shadow:0 2px 12px rgba(20,16,40,.05)}
.finder:focus-within{border-color:var(--tinta);
  box-shadow:0 2px 16px rgba(138,43,226,.14)}
.finder input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1rem;
  color:var(--ink);padding:.62rem 0;outline:0}
.finder input::placeholder{color:var(--ink-3)}
.finder button{flex:none;border:0;border-radius:999px;background:var(--tinta);color:#fff;
  font:inherit;font-weight:700;font-size:.94rem;padding:.68rem 1.5rem;cursor:pointer}
.finder button:hover{background:var(--tinta-scura)}

/* ---------- le pastiglie: sottocategorie, suggerimenti, paginazione ---------- */
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.quick .lab{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-right:.3rem}
.quick a{display:inline-block;background:var(--foglio);border:1px solid var(--filo-2);
  border-radius:999px;padding:.44rem .95rem;font-size:.89rem;font-weight:600;
  color:var(--ink);text-decoration:none;line-height:1.3}
.quick a:hover{border-color:var(--tinta);color:var(--tinta);background:var(--tinta-velo)}

/* ---------- la riga di descrizione sotto un titolo di sezione ---------- */
.say{margin:0 0 1.5rem;color:var(--ink-2);font-size:.98rem;max-width:62ch;line-height:1.6}
.say a{color:var(--tinta);font-weight:700}

/* la riga "2 guide trovate" sta dentro l'intestazione: si stacca un po' */
.intesta p b{color:var(--ink);font-weight:700}

@media (max-width:560px){
  .finder{padding-left:.9rem}
  .finder button{padding:.65rem 1.1rem;font-size:.9rem}
}


/* ---------- testata viola (prova 02/09) ---------- */
.head{background:var(--tinta);border-bottom:0}
/* il marchio: la scritta sfumata non si legge sul viola, va in bianco */
.head .segno .nome{background:none;-webkit-background-clip:border-box;
  background-clip:border-box;color:#fff}
.head .segno .nome i{color:#fff}
.head .segno .nome .tld{color:rgba(255,255,255,.62)}
.head .segno .bollo{box-shadow:0 0 0 2px rgba(255,255,255,.22)}

.head .voci a{color:rgba(255,255,255,.82)}
.head .voci a:hover,.head .voci a.qui{color:#fff}
/* la voce attiva si segna con una riga sotto, che sul pieno si vede meglio */
.head .voci a.qui{box-shadow:inset 0 -2px 0 #fff}

.head .tondo{border-color:rgba(255,255,255,.3);color:#fff;background:transparent}
.head .tondo:hover{background:#fff;color:var(--tinta);border-color:#fff}
.cerca-testa[open] > summary{background:#fff;color:var(--tinta);border-color:#fff}

.panino > summary{background:transparent;border-color:rgba(255,255,255,.3)}
.panino > summary span{background:#fff}

/* il foglio comincia col viola: l'angolo in alto torna arrotondato */
.sheet{border-radius:24px}
.head{border-radius:24px 24px 0 0}
@media (max-width:720px){
  .sheet{border-radius:16px}
  .head{border-radius:16px 16px 0 0}
}


/* il marchio sulla testata viola: tutto bianco, nessuna parte in ombra */
.head .segno .nome,.head .segno .nome i,.head .segno .nome .tld{color:#fff}
.head .segno svg.bollo{width:1.75rem;height:1.75rem;display:block;flex:none;
  box-shadow:none;border-radius:9px}

/* ---------- testata viola: tutto piu marcato (02/09) ----------
   Sul pieno le cose sottili si perdono: marchio, voci e lente vanno
   piu pesanti di quanto servirebbe su fondo bianco. */
.head .segno{font-size:1.42rem;letter-spacing:-.05em;gap:.55rem}
.head .segno .nome,.head .segno .nome i,.head .segno .nome .tld{color:#fff;font-weight:800}
.head .segno svg.bollo{width:2rem;height:2rem}

/* le voci: piu corpose e tutte bianche, non solo quella attiva */
.head .voci a{color:#fff;font-weight:700;font-size:.95rem;opacity:.88;
  padding:.35rem .2rem}
.head .voci a:hover{opacity:1}
.head .voci a.qui{opacity:1;box-shadow:inset 0 -2px 0 #fff}

/* la lente: cerchio pieno, non un contorno sottile */
.head .tondo{width:2.5rem;height:2.5rem;font-size:1.15rem;font-weight:700;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);color:#fff}
.head .tondo:hover{background:#fff;color:var(--tinta);border-color:#fff}
.head .cerca-testa[open] > summary{background:#fff;color:var(--tinta);border-color:#fff}

/* e le tre righe del panino, piu spesse */
.head .panino > summary{background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.42);width:2.5rem;height:2.5rem}
.head .panino > summary span{height:2.5px;width:1.25rem;background:#fff}

/* ---------- testata viola, rifiniture (02/09) ----------
   La sfumatura scende verso destra, dove sta la lente: da' un verso
   alla barra invece di lasciarla piatta. */
.head{background:linear-gradient(100deg,var(--tinta) 0%,#7B23CC 55%,#5F00A3 100%)}

/* le icone accanto alle voci */
.head .voci a{display:inline-flex;align-items:center;gap:.42rem}
.head .voci a svg{width:1.05rem;height:1.05rem;flex:none;opacity:.9;
  stroke-width:1.9}
.head .voci a:hover svg,.head .voci a.qui svg{opacity:1}

/* il marchio piu' presente */
.head .segno svg.bollo{width:2.1rem;height:2.1rem;border-radius:10px}
@media (max-width:900px){
  .head .voci a svg{display:none}
}


/* ---------- giro 02/09 notte ---------- */

/* --- 1. la testata: il menu sta sulla riga del logo, non piu' sotto --- */
.head{flex-wrap:nowrap;gap:1.15rem;padding:.85rem 1.6rem}
.head .voci{flex-wrap:nowrap;gap:1.05rem;margin-left:.35rem;min-width:0}
.head .voci a{font-size:.875rem;white-space:nowrap}
.head .voci a svg{width:1rem;height:1rem}
.head .segno{flex:none}
.head .segno .nome{font-size:1.32rem}
.head .segno svg.bollo{width:2rem;height:2rem;border-radius:9px}
.head .fine{flex:none}

/* fra i 900 e i 1150 le voci si stringono ancora invece di andare a capo */
@media (max-width:1150px){
  .head{padding:.85rem 1.2rem;gap:.8rem}
  .head .voci{gap:.8rem}
  .head .voci a{font-size:.83rem}
  .head .voci a svg{display:none}
}

/* --- telefono: il panino a sinistra, staccato dal marchio --- */
@media (max-width:720px){
  .head{gap:.5rem;padding:.7rem .9rem;flex-wrap:nowrap}
  .panino{order:0;margin-left:0;margin-right:.35rem}
  .segno{order:1;min-width:0}
  .head .fine{order:2;margin-left:auto}
  .head .segno .nome{font-size:1.18rem}
  .head .segno svg.bollo{width:1.8rem;height:1.8rem}
  /* il pannello si apre da sinistra, dove ora sta il tasto */
  .panino-voci{right:auto;left:0}
}

/* --- 2. tabelle: meno colore, piu' lettura --- */
.corpo .tabellone thead th{background:var(--fondo);color:var(--ink);
  border-bottom:2px solid var(--filo-2)}
.corpo .tabellone tbody tr:nth-child(even) td{background:transparent}
.corpo .tabellone tbody tr:hover td{background:var(--fondo)}
.corpo .tabellone td{border-bottom:1px solid var(--filo)}
.corpo .tabellone tbody td:first-child{color:var(--ink);font-weight:600}

/* --- 3. il banner: tutta la scheda e' il link --- */
.corpo .wab-prodotto{position:relative;cursor:pointer}
/* il titolo e' gia' un <a>: gli si allarga l'area sensibile fino ai bordi
   della scheda, invece di annidare un secondo link (che l'HTML vieta). */
.corpo .wab-prodotto__titolo::after{content:"";position:absolute;inset:0;z-index:1}
.corpo .wab-prodotto:hover{border-color:var(--tinta);
  box-shadow:0 6px 20px rgba(138,43,226,.10)}
.corpo .wab-prodotto:hover .wab-prodotto__titolo{color:var(--tinta)}
/* prezzo e sconto restano sopra, cosi' si possono ancora selezionare */
.corpo .wab-prodotto__azioni{position:relative;z-index:2}

/* --- 4. il tasto in fondo alla categoria --- */
.ancora{display:flex;justify-content:center;align-items:center;margin:2.4rem 0 .5rem;
  min-height:3rem}
.ancora-tasto{display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.6rem;border:1px solid var(--filo-2);border-radius:999px;
  font-weight:700;font-size:.94rem;color:var(--ink);background:#fff;
  transition:border-color .16s,color .16s}
.ancora-tasto:hover{border-color:var(--tinta);color:var(--tinta)}
.ancora-gira{display:inline-flex;gap:.35rem}
.ancora-gira i{width:.45rem;height:.45rem;border-radius:50%;background:var(--tinta);
  opacity:.35;animation:respiro 1.1s infinite}
.ancora-gira i:nth-child(2){animation-delay:.16s}
.ancora-gira i:nth-child(3){animation-delay:.32s}
@keyframes respiro{0%,100%{opacity:.28;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-.25rem)}}
@media (prefers-reduced-motion:reduce){.ancora-gira i{animation:none}}


/* ---------- telefono: schermo intero e niente sfondamenti (02/09) ---------- */
/* --- 1. niente esce piu' dallo schermo ---
   min-width:0 e' la riga che conta: senza, un contenitore si allarga fino
   alla larghezza del suo figlio piu' rigido invece di restringersi, e a
   quel punto sfonda il genitore portandosi dietro tutto il testo. */
.corpo,.lettura,.due-colonne,.due-colonne > *{min-width:0}
.corpo{overflow-wrap:break-word;word-wrap:break-word}

/* Tutto cio' che si incolla dentro un articolo e ha una misura sua:
   le pubblicita', gli embed, i video, le immagini larghe. Si adattano
   invece di decidere loro quanto e' largo il sito. */
.corpo img,.corpo video,.corpo iframe,.corpo embed,.corpo object,
.corpo ins,.corpo canvas,.corpo svg{max-width:100%;height:auto}
.corpo iframe,.corpo ins.adsbygoogle{width:100% !important;max-width:100% !important}
.corpo ins.adsbygoogle{display:block !important;overflow:hidden}

/* un indirizzo lungo incollato in un paragrafo non deve allargare la pagina */
.corpo a{overflow-wrap:anywhere}
/* il codice e le tabelle scorrono nel proprio riquadro, non nella pagina */
.corpo pre{overflow-x:auto;max-width:100%}

@media (max-width:720px){
  /* --- 2. schermo intero: solo su telefono --- */
  .shell{padding:0}
  .sheet{border-radius:0;border-left:0;border-right:0;border-top:0}
  .head{border-radius:0}
  .pad{padding:0 1.15rem}

  /* il corpo dell'articolo respira un po' di piu' e resta leggibile */
  .corpo{font-size:1.03rem;line-height:1.72}
  .corpo h2{font-size:1.42rem;line-height:1.25}
  .corpo h3{font-size:1.16rem}

  /* le figure a tutta larghezza, che su un telefono e' il modo giusto */
  .corpo figure.immagine,.corpo .wp-block-image{margin-left:-1.15rem;
    margin-right:-1.15rem;width:calc(100% + 2.3rem);max-width:none}
  .corpo figure.immagine img,.corpo .wp-block-image img{border-radius:0;width:100%}
}

/* ---------- telefono: il marchio al centro (02/09) ---------- */
@media (max-width:720px){
  /* Il marchio al centro vero, non "al centro di quello che avanza".
     Con un flex normale finirebbe spostato dal panino a sinistra e dalla
     lente a destra, che hanno larghezze diverse: sembra centrato e non lo
     e'. Con la griglia le due colonne laterali si dichiarano uguali (1fr
     ciascuna) e la colonna di mezzo si prende quello che resta, quindi il
     marchio sta al centro dello SCHERMO. */
  .head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    gap:.5rem;padding:.7rem .8rem}
  .panino{order:0;justify-self:start;margin:0}
  .segno{order:1;justify-self:center;margin:0}
  .head .fine{order:2;justify-self:end;margin:0}
  .head .voci{display:none}
  /* il pannello del menu si apre da sinistra, dove sta il tasto */
  .panino-voci{right:auto;left:0}
}

/* ---------- lettura: corpo piu grande, righe piu vicine (02/09) ---------- */
/* Il testo cresce e l interlinea si stringe. Sotto 1.6 non si scende: le
   righe comincerebbero a toccarsi e su un paragrafo lungo l occhio perde il
   segno tornando a capo. 1.62-1.65 e il punto in cui il blocco appare denso
   senza diventare faticoso. */
.corpo{font-size:1.19rem;line-height:1.65}
.corpo p{margin:0 0 1.15rem}
.corpo li{margin-bottom:.42rem}
.corpo h2{font-size:1.62rem;line-height:1.22}
.corpo h3{font-size:1.26rem;line-height:1.3}

@media (max-width:720px){
  .corpo{font-size:1.12rem;line-height:1.62}
  .corpo h2{font-size:1.46rem}
  .corpo h3{font-size:1.2rem}
}

/* ---------- telefono: recuperare larghezza per la riga (02/09) ---------- */
/* A 17.9px su uno schermo da 375 la riga porta 37 caratteri, e la fascia
   comoda per leggere sta fra 45 e 75: sotto i 40 l occhio torna a capo
   troppo spesso e la lettura va a singhiozzo. Il font non si tocca — e
   quello che era stato chiesto — ma i margini laterali si stringono, che e
   l unico modo di guadagnare caratteri senza rimpicciolire niente. */
@media (max-width:720px){
  .pad{padding:0 .92rem}
  .corpo figure.immagine,.corpo .wp-block-image{margin-left:-.92rem;
    margin-right:-.92rem;width:calc(100% + 1.84rem)}
}

/* ---------- il sommario sotto il titolo (02/09) ---------- */
/* E la frase che dice al lettore se ha trovato quello che cercava: e la
   seconda cosa che legge dopo il titolo, e finora era un paragrafo come gli
   altri, appena piu grigio. Ora e piu grande del corpo, di un altro peso e
   staccato da un filo sottile: si vede che e un altro registro senza bisogno
   di riquadri ne di barrette laterali. */
.pezzo-testa .sommario,.lettura .sommario{
  font-family:var(--testo);
  font-size:1.34rem;
  line-height:1.48;
  font-weight:400;
  color:#4A4E58;
  max-width:52ch;
  margin:.15rem 0 1.5rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--filo);
  letter-spacing:-.011em;
}

@media (max-width:720px){
  .pezzo-testa .sommario,.lettura .sommario{
    font-size:1.2rem;line-height:1.45;
    margin:.1rem 0 1.25rem;padding-bottom:1.15rem;
  }
}

/* ---------- il banner a codice libero (02/09) ----------
   Quello che sta dentro non lo decidiamo noi: puo' essere una creativita' di
   una rete di affiliazione, larga a modo suo. Il contenitore fa una cosa
   sola: impedirle di sfondare la colonna, come per tutto il resto che si
   incolla dentro un articolo. */
.corpo .banner-libero{margin:1.75rem 0;max-width:100%;overflow:hidden}
.corpo .banner-libero img,.corpo .banner-libero iframe,
.corpo .banner-libero ins,.corpo .banner-libero embed{max-width:100%;height:auto}
.corpo .banner-libero > *:first-child{margin-top:0}
.corpo .banner-libero > *:last-child{margin-bottom:0}

/* ---------- gli spazi pubblicitari (02/09) ----------
   Devono vedersi come pubblicita' e non confondersi col contenuto: e' una
   richiesta di legge prima ancora che di garbo. L'etichetta piccola sopra
   costa nulla e toglie ogni ambiguita'. */
.reclame{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:.35rem;margin:1.5rem 0}
.reclame img{max-width:100%;height:auto;display:block;border-radius:10px}
.reclame-eti{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);opacity:.75;order:-1;align-self:flex-start}
.reclame--colonna{margin:0 0 1.5rem}
.reclame--dentro,.reclame--sotto{margin:2.25rem 0;padding:1rem 0;
  border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)}
.reclame--corsia img{border-radius:12px}

/* ---------- la colonna deve contenere il 300x250 (03/09) ---------- */
/* Misurata: la colonna era larga 288px e l annuncio AdSense e 300x250 fisso,
   quindi sbordava di sei pixel e stava stretto. 18rem sono 288px: servono
   almeno 300, piu il respiro ai lati. 20rem = 320px, che tiene il 300x250
   con due pixel di margine e lascia il testo largo uguale. */
/* SOLO sopra i 1000px: sotto, la regola che impila le colonne sta piu in
   alto nel foglio e questa la sovrascriverebbe, lasciando su telefono una
   griglia a due colonne con la barra laterale schiacciata accanto al testo.
   E successo: il sito e uscito sballato per dieci minuti. */
@media (min-width:1001px){
  .due-colonne{grid-template-columns:minmax(0,1fr) 20rem;gap:2.5rem}
}
.reclame--colonna{width:100%;overflow:hidden}
.reclame--colonna ins.adsbygoogle{max-width:100%}

/* ---------- il panino gia dal tablet (03/09) ---------- */
/* Misurato a 820px: le sette voci del menu non ci stanno piu, e l ultima
   (Assistenza Clienti) usciva dallo schermo facendo scorrere tutta la
   pagina di lato. Il panino pero partiva solo sotto i 720, quindi fra 721
   e 900 non c era ne l uno ne l altro. Adesso il panino comincia prima. */
@media (max-width:900px){
  .head .voci{display:none}
  .panino{display:block}
  .head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    gap:.5rem;padding:.7rem 1rem}
  .panino{order:0;justify-self:start;margin:0}
  .segno{order:1;justify-self:center;margin:0}
  .head .fine{order:2;justify-self:end;margin:0}
  .panino-voci{right:auto;left:0}
}


/* ---------- box autore e tabelle sul telefono (03/09) ---------- */

/* ============ chi ha scritto la guida ============
   Niente barretta colorata di lato: e' il segno con cui si riconoscono le
   pagine fatte in serie, e questo riquadro deve dire il contrario. */
.chi-scrive{display:flex;gap:1.15rem;align-items:flex-start;
  margin:2.5rem 0 0;padding:1.4rem 1.5rem;
  background:var(--foglio);border:1px solid var(--filo);border-radius:16px}
.chi-faccia{width:5rem;height:5rem;border-radius:50%;flex:none;object-fit:cover;
  border:3px solid #fff;box-shadow:0 2px 10px rgba(21,22,26,.12)}
.chi-testo{min-width:0;flex:1}
.chi-eti{display:block;font-size:.68rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.2rem}
.chi-nome{display:block;font-family:var(--disp);font-size:1.18rem;font-weight:700;
  letter-spacing:-.03em;margin-bottom:.4rem}
.chi-bio{margin:0 0 .7rem;font-size:.95rem;line-height:1.55;color:var(--ink-2);
  max-width:52ch}
.chi-sotto{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  font-size:.84rem}
.chi-sotto a{font-weight:600;color:var(--tinta);text-decoration:none;
  border-bottom:1px solid transparent}
.chi-sotto a:hover{border-bottom-color:var(--tinta)}
.chi-data{color:var(--ink-3)}

@media (max-width:560px){
  .chi-scrive{flex-direction:column;gap:.85rem;padding:1.2rem 1.15rem;text-align:left}
  .chi-faccia{width:3.6rem;height:3.6rem}
  .chi-bio{font-size:.92rem}
}

/* ============ le tabelle su telefono ============ */

/* 1. Si vede che si scorre.
   L'ombra a destra sta finche' c'e' altro da vedere e sparisce alla fine,
   perche' e' attaccata allo sfondo del contenitore e si sposta con lui. */
.corpo .tabellone{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--foglio) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--foglio) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(21,22,26,.14), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(21,22,26,.14), rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:38px 100%, 38px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll}

/* 2. La prima colonna resta ferma: senza, si scorre fino al prezzo e non si
      sa piu' di quale prodotto sia. */
@media (max-width:900px){
  .corpo .tabellone thead th:first-child,
  .corpo .tabellone tbody td:first-child{
    position:sticky;left:0;z-index:2;
    background:var(--foglio);
    box-shadow:1px 0 0 var(--filo)}
  .corpo .tabellone thead th:first-child{background:var(--fondo)}
}

/* 3. Sotto i 560px le tabelle fino a tre colonne diventano schede.
      L'intestazione di ogni cella viene da data-eti, che ci mette il PHP
      leggendo la riga delle intestazioni: senza, una scheda mostrerebbe
      valori senza dire di cosa sono. */
@media (max-width:560px){
  .corpo .tabellone.a-schede{overflow:visible;background:none}
  .corpo .tabellone.a-schede table{min-width:0;width:100%;display:block}
  .corpo .tabellone.a-schede thead{position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .corpo .tabellone.a-schede tbody{display:block}
  .corpo .tabellone.a-schede tbody tr{display:block;margin:0 0 .85rem;
    border:1px solid var(--filo);border-radius:12px;overflow:hidden;
    background:var(--foglio)}
  .corpo .tabellone.a-schede tbody td{display:flex;gap:1rem;align-items:baseline;
    justify-content:space-between;padding:.62rem .9rem;border:0;
    border-bottom:1px solid var(--filo);text-align:right}
  .corpo .tabellone.a-schede tbody td:last-child{border-bottom:0}
  .corpo .tabellone.a-schede tbody td::before{
    content:attr(data-eti);
    flex:none;max-width:45%;text-align:left;
    font-size:.78rem;font-weight:700;letter-spacing:.02em;
    color:var(--ink-3);text-transform:uppercase}
  /* la prima cella fa da titolo della scheda */
  .corpo .tabellone.a-schede tbody td:first-child{
    display:block;text-align:left;background:var(--fondo);
    font-family:var(--disp);font-weight:700;font-size:1rem;
    color:var(--ink);position:static}
  .corpo .tabellone.a-schede tbody td:first-child::before{
    display:block;margin-bottom:.15rem;max-width:none}
}