:root{
  --bianco:#FFFFFF;
  --ghiaccio:#EDF6F6;
  --inchiostro:#0B2830;
  --grigio:#54737B;
  --tinta:#0F7C8A;
  --tinta-cupa:#08535E;
  --vivo:#12D6A6;
  --bordo:#D3E6E6;

  --fd:"Archivo",system-ui,sans-serif;
  --fb:"Inter",system-ui,sans-serif;
  --fm:"JetBrains Mono",ui-monospace,monospace;
  --fl:"Source Serif 4",Georgia,"Times New Roman",serif;   /* lettura lunga */

  --gap:clamp(.85rem,2.2vw,1.35rem);   /* distanza fra le celle */
  --pad:clamp(1.15rem,4vw,2.5rem);
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bianco);color:var(--inchiostro);
  font:400 clamp(1rem,.97rem + .18vw,1.06rem)/1.65 var(--fb);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--vivo);outline-offset:3px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* --------------------------------------------------------- tipografia */
h1,h2,h3{font-family:var(--fd);font-weight:800;line-height:1;letter-spacing:-.025em;text-transform:uppercase;margin:0}
h2{font-size:clamp(1.85rem,1.1rem + 3.2vw,3.15rem)}
h2 span{color:var(--tinta);display:block}
h3{font-size:1.02rem;letter-spacing:-.005em;line-height:1.25}
.kick{font-family:var(--fm);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta);margin:0 0 1rem}
.sub{color:var(--grigio);max-width:52ch;margin:1rem 0 0}

.sez{padding-block:clamp(3.5rem,8vw,6rem)}
.sez--ghiaccio{background:var(--ghiaccio)}
.sez__top{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:end;justify-content:space-between;margin-bottom:clamp(2rem,4vw,3rem)}

/* -------------------------------------------------------------- bottoni */
.btn{display:inline-block;text-decoration:none;font-family:var(--fm);font-size:.75rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.95rem 1.6rem;border-radius:2px;border:2px solid var(--tinta);
  background:var(--tinta);color:#fff;transition:background .16s,color .16s,transform .16s}
.btn:hover{background:var(--tinta-cupa);border-color:var(--tinta-cupa);transform:translateY(-2px)}
.btn--vuoto{background:transparent;color:var(--tinta)}
.btn--vuoto:hover{background:var(--tinta);color:#fff}
.btn--vivo{background:var(--vivo);border-color:var(--vivo);color:#04343B}
.btn--vivo:hover{background:#0CBE92;border-color:#0CBE92}

/* --------------------------------------------------------------- header */
.testata{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--bordo)}
.testata__in{display:flex;align-items:center;gap:1rem;min-height:62px}
.marchio{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--fd);font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:-.01em}
.marchio i{display:grid;place-items:center;width:30px;height:30px;background:var(--tinta);color:#fff;font-family:var(--fm);font-size:.7rem;font-style:normal;border-radius:2px}
.testata nav{margin-left:auto}
.testata ul{display:none;list-style:none;margin:0;padding:0;gap:1.6rem;align-items:center}
.testata nav a{text-decoration:none;font-family:var(--fm);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);padding-block:.4rem;border-bottom:2px solid transparent}
.testata nav a:hover{color:var(--tinta);border-bottom-color:var(--vivo)}
.tasto{margin-left:auto;background:none;border:2px solid var(--tinta);color:var(--tinta);font-family:var(--fm);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;padding:.5rem .8rem;border-radius:2px;cursor:pointer}
@media(min-width:56rem){.tasto{display:none}.testata ul{display:flex}}
@media(max-width:55.99rem){
  .testata ul[data-aperto]{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--bordo);padding:.4rem var(--pad) 1rem}
  .testata ul[data-aperto] a{display:block;padding:.75rem 0;border-bottom:1px solid var(--bordo)}
}

/* ----------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;background:var(--ghiaccio)}
.hero::after{content:"";position:absolute;inset:auto -10% -30% 55%;height:70%;background:
  repeating-linear-gradient(90deg,var(--bordo) 0 1px,transparent 1px 26px),
  repeating-linear-gradient(0deg,var(--bordo) 0 1px,transparent 1px 26px);opacity:.9;pointer-events:none}
.hero__in{position:relative;z-index:1;display:grid;gap:2.5rem;padding-block:clamp(3rem,7vw,5rem) clamp(3rem,7vw,5rem)}
@media(min-width:60rem){.hero__in{grid-template-columns:1.15fr .85fr;align-items:center;gap:3.5rem}}
.hero h1{font-size:clamp(2.6rem,1rem + 9.5vw,5.4rem);line-height:.92}
.hero h1 em{font-style:normal;color:var(--tinta)}
.hero__frase{font-size:clamp(1.08rem,1rem + .5vw,1.3rem);color:var(--grigio);max-width:40ch;margin:1.5rem 0 0}
.hero__frase b{color:var(--inchiostro);font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.hero__nota{font-family:var(--fm);font-size:.68rem;letter-spacing:.1em;color:var(--grigio);margin:1.4rem 0 0;text-transform:uppercase}
.hero__foto{position:relative}
.hero__foto img{width:100%;border-radius:3px;position:relative;z-index:1}
.hero__foto::before{content:"";position:absolute;inset:1.1rem -1.1rem -1.1rem 1.1rem;background:var(--tinta);border-radius:3px}

/* ------------------------------------------------------------- chi sono */
.bio{display:grid;gap:2.5rem}
@media(min-width:60rem){.bio{grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start}}
.bio p{margin:0 0 1.1rem}
.bio p:first-of-type{font-size:1.14rem;color:var(--inchiostro);font-weight:500}
.bio strong{color:var(--tinta);font-weight:600}
.bio__foto{border-radius:3px;overflow:hidden;border:1px solid var(--bordo)}
.numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid var(--bordo)}
.numeri b{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(1.7rem,1rem + 2.4vw,2.6rem);color:var(--tinta);line-height:1}
.numeri span{font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}

/* ----------------------------------------------------- fascia iscrizione */
.fascia{background:var(--tinta);color:#fff;text-align:center;padding-block:clamp(3rem,6vw,4.5rem)}
.fascia .kick{color:var(--vivo)}
.fascia h2{color:#fff}
.fascia h2 span{color:var(--vivo)}
.fascia p{color:#CDEBED;max-width:56ch;margin:1rem auto 0}
.iscriz{display:flex;flex-wrap:wrap;gap:.6rem;max-width:34rem;margin:2rem auto 0}
.iscriz input{flex:1 1 15rem;font:400 1rem var(--fb);padding:.95rem 1rem;border:2px solid transparent;border-radius:2px;background:#fff;color:var(--inchiostro)}
.iscriz input::placeholder{color:#9BB4B8}
.fascia small{display:block;font-family:var(--fm);font-size:.64rem;letter-spacing:.08em;color:#A8D6DA;margin-top:1rem;text-transform:uppercase}

/* -------------------------------------------------------------- griglie */
.griglia{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:44rem){.griglia{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.griglia{grid-template-columns:repeat(3,1fr)}}

.scheda{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--bordo);
  border-radius:3px;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.scheda:hover{transform:translateY(-4px);border-color:var(--tinta);box-shadow:0 14px 30px -18px rgba(11,40,48,.45)}
.scheda__img{aspect-ratio:16/9;background:var(--ghiaccio);position:relative;overflow:hidden}
.scheda__img img{width:100%;height:100%;object-fit:cover}
.scheda__corpo{padding:1.15rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.scheda__meta{font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta)}
.scheda p{margin:0;font-size:.93rem;color:var(--grigio)}
.scheda__piede{margin-top:auto;padding-top:.9rem;font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta)}

/* riproduci */
.play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,40,48,.22);transition:background .18s}
.scheda:hover .play{background:rgba(11,40,48,.05)}
.play i{display:grid;place-items:center;width:54px;height:38px;background:var(--tinta);border-radius:8px;transition:transform .18s,background .18s}
.scheda:hover .play i{transform:scale(1.08);background:var(--vivo)}
.play i::after{content:"";border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.scheda:hover .play i::after{border-left-color:#04343B}

/* software */
.mini{font-family:var(--fm);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  padding:.5rem .85rem;border:1px solid var(--bordo);border-radius:2px;color:var(--tinta);background:#fff}
.mini:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}

/* --------------------------------------------------------------- footer */
.piede{background:var(--inchiostro);color:#B9D3D8;padding-block:3rem 2rem}
.piede a{color:#fff;text-decoration:none}
.piede__in{display:grid;gap:2rem}
@media(min-width:52rem){.piede__in{grid-template-columns:1.4fr 1fr 1fr}}
.piede h4{font-family:var(--fm);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vivo);margin:0 0 .9rem}
.piede ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.9rem}
.logotipo{display:inline-block;border:2px solid var(--vivo);border-radius:3px;padding:.6rem 1rem;
  font-family:var(--fd);font-weight:800;font-size:clamp(1.05rem,.9rem + .75vw,1.5rem);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;color:#fff;text-decoration:none;margin-bottom:1.1rem;
  transition:background .18s,color .18s}
.logotipo b{color:var(--vivo);font-weight:800;transition:color .18s}
.logotipo:hover{background:var(--vivo);color:#04343B}
.logotipo:hover b{color:#04343B}
.piede__basso{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.13);display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#7FA3AB}

/* ------------------------------------------------------------- comparsa */
[data-app]{opacity:0;transform:translateY(16px)}
[data-app].vis{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){[data-app]{opacity:1;transform:none;transition:none}}
.salta{position:absolute;left:-999px}.salta:focus{left:.5rem;top:.5rem;z-index:99;background:var(--inchiostro);color:#fff;padding:.7rem 1rem}

/* =======================================================================
   PAGINE INTERNE — testo lungo, indice, schede dati, pannello
   ======================================================================= */

.briciole{font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio);padding-block:1.4rem 0}
.briciole a{color:var(--tinta);text-decoration:none}
.briciole span{margin-inline:.45rem;color:#A9C4C8}

.intesta{background:var(--ghiaccio);padding-block:clamp(2rem,5vw,3.5rem) clamp(2.5rem,6vw,4rem)}
.intesta h1{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;line-height:1;
  font-size:clamp(1.95rem,1.1rem + 3.6vw,3.5rem);margin:.5rem 0 0;max-width:20ch}
.intesta__dati{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:1.4rem;font-family:var(--fm);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}

/* la risposta secca in apertura: è il blocco che i motori citano */
.risposta{border-left:4px solid var(--vivo);background:#fff;padding:1.2rem 1.4rem;margin:0 0 2.5rem;
  max-width:66ch;font-family:var(--fl);font-size:1.22rem;line-height:1.62;color:var(--inchiostro)}
.risposta strong{color:var(--tinta)}

.colonne{display:grid;gap:2.5rem}
@media(min-width:64rem){.colonne{grid-template-columns:1fr 16rem;gap:3.5rem;align-items:start}}

.prosa{max-width:66ch;font-family:var(--fl);font-size:1.16rem;line-height:1.72;
  letter-spacing:.003em;color:#152A31;hyphens:auto;-webkit-hyphens:auto}
.prosa>*:first-child{margin-top:0}
.prosa h2{font-family:var(--fd);font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin:3rem 0 1rem;
  color:var(--inchiostro);text-transform:none;letter-spacing:-.02em;line-height:1.15;hyphens:none}
.prosa h2:first-child{margin-top:0}
.prosa h3{font-family:var(--fd);font-size:1.2rem;margin:2.2rem 0 .7rem;text-transform:none;letter-spacing:-.01em;hyphens:none}
.prosa h4{font-family:var(--fd);font-size:1rem;margin:1.6rem 0 .5rem}
.prosa p{margin:0 0 1.3rem}
.prosa a{color:var(--tinta);text-underline-offset:3px}
.prosa ul,.prosa ol{margin:0 0 1.3rem;padding-left:1.3rem}
.prosa li{margin-bottom:.55rem}
.prosa blockquote{margin:2rem 0;padding:.3rem 0 .3rem 1.4rem;border-left:3px solid var(--tinta);color:var(--grigio);font-style:italic;text-align:left;hyphens:none}
.prosa hr{border:0;border-top:1px solid var(--bordo);margin:2.4rem 0}
.prosa img{border-radius:3px;border:1px solid var(--bordo);margin:1.6rem 0}
.prosa code{font-family:var(--fm);font-size:.82em;background:var(--ghiaccio);padding:.14em .4em;border-radius:2px;color:var(--tinta-cupa)}
.prosa pre{background:var(--inchiostro);color:#D6ECEE;border-radius:3px;padding:1.2rem 1.3rem;overflow-x:auto;margin:2rem 0;font-size:.86rem;line-height:1.65;text-align:left;hyphens:none}
.prosa pre code{background:none;color:inherit;padding:0;font-size:inherit}
.prosa table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.96rem;text-align:left;hyphens:none}
.prosa th,.prosa td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--bordo)}
.prosa th{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta)}

.laterale{position:sticky;top:78px;font-size:.9rem}
.laterale h4{font-family:var(--fm);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta);margin:0 0 .8rem}
.laterale ul{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.5rem;border-left:2px solid var(--bordo);padding-left:.9rem}
.laterale a{color:var(--grigio);text-decoration:none}
.laterale a:hover{color:var(--tinta)}

/* scheda dei fatti: struttura leggibile a macchina e a occhio */
.fatti{margin:0;border-top:1px solid var(--bordo)}
.fatti>div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--bordo)}
.fatti dt{font-family:var(--fm);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grigio);padding-top:.15rem}
.fatti dd{margin:0}
@media(max-width:40rem){.fatti>div{grid-template-columns:1fr;gap:.2rem}}

.domande{display:grid;gap:1rem;margin-top:1.5rem}
.domanda{border:1px solid var(--bordo);border-radius:3px;padding:1.15rem 1.25rem;background:#fff}
.domanda h3{font-family:var(--fd);font-size:1.02rem;text-transform:none;letter-spacing:-.005em;margin:0 0 .5rem}
.domanda p{margin:0;color:var(--grigio);font-size:.96rem}

.impaginazione{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:2.5rem}
.impaginazione a,.impaginazione span{font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;padding:.6rem .95rem;
  border:1px solid var(--bordo);border-radius:2px;text-decoration:none;color:var(--tinta)}
.impaginazione .qui{background:var(--tinta);color:#fff;border-color:var(--tinta)}

/* ------------------------------------------------------------- PANNELLO */
.pan{max-width:60rem;margin:0 auto;padding:2rem var(--pad) 4rem}
.pan__top{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1.8rem;padding-bottom:1.2rem;border-bottom:1px solid var(--bordo)}
.pan h1{font-family:var(--fd);font-size:1.5rem;text-transform:uppercase;margin:0}
.pan table{width:100%;border-collapse:collapse;font-size:.93rem}
.pan th{font-family:var(--fm);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grigio);text-align:left;padding:.6rem .5rem;border-bottom:2px solid var(--bordo)}
.pan td{padding:.75rem .5rem;border-bottom:1px solid var(--bordo);vertical-align:top}
.pan td a{color:var(--inchiostro);text-decoration:none;font-weight:500}
.pan td a:hover{color:var(--tinta)}
.stato{font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .45rem;border-radius:2px}
.stato--pub{background:#DCF6EE;color:#046B52}
.stato--boz{background:#FBEEDC;color:#8A5A08}

.campo{margin-bottom:1.1rem}
.campo label{display:block;font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio);margin-bottom:.35rem}
.campo input,.campo select,.campo textarea{width:100%;font:400 1rem/1.55 var(--fb);color:var(--inchiostro);
  background:#fff;border:1px solid var(--bordo);border-radius:2px;padding:.7rem .8rem}
.campo textarea{resize:vertical}
.campo textarea.codice{font:500 .92rem/1.65 var(--fm);min-height:32rem}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:2px solid var(--tinta);outline-offset:0;border-color:var(--tinta)}
.aiuto{font-family:var(--fm);font-size:.62rem;letter-spacing:.06em;color:var(--grigio);margin:.35rem 0 0}
.due{display:grid;gap:1.1rem}
@media(min-width:46rem){.due{grid-template-columns:1fr 1fr}}
.barra{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--bordo);
  padding:.9rem 0;margin-top:1.5rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.avviso{border-radius:2px;padding:.75rem 1rem;font-family:var(--fm);font-size:.7rem;letter-spacing:.06em;margin-bottom:1.2rem}
.avviso--ok{background:#DCF6EE;color:#046B52}
.avviso--ko{background:#FBE3E0;color:#8A2314}
.entra{max-width:22rem;margin:14vh auto;padding-inline:var(--pad)}

.importa{border:1px dashed var(--tinta);border-radius:3px;padding:1rem 1.2rem;margin-bottom:1.6rem;background:var(--ghiaccio)}
.importa summary{font-family:var(--fm);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta);cursor:pointer}
.importa[open] summary{margin-bottom:.4rem}

/* --------------------------------------------------- galleria e video */
.video16{position:relative;padding-bottom:56.25%;height:0;margin-bottom:2rem;border-radius:3px;overflow:hidden;background:var(--ghiaccio)}
.video16 iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.galleria{display:grid;gap:1.1rem;margin-top:2.5rem}
@media(min-width:44rem){.galleria{grid-template-columns:repeat(2,1fr)}}
.galleria figure{margin:0}
.galleria img{width:100%;border:1px solid var(--bordo);border-radius:3px}
.galleria figcaption{font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;color:var(--grigio);margin-top:.5rem;line-height:1.5}

/* ------------------------------------------------- importazione da JSON */
.importa{border:1px dashed var(--tinta);border-radius:3px;padding:1rem 1.2rem;margin-bottom:1.8rem;background:var(--ghiaccio)}
.importa summary{font-family:var(--fm);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta);cursor:pointer}
.importa[open] summary{margin-bottom:.8rem}
.importa textarea{width:100%;font:500 .86rem/1.6 var(--fm);border:1px solid var(--bordo);border-radius:2px;padding:.7rem .8rem;background:#fff;resize:vertical}

/* ------------------------------------------------ allineamento del testo */
/* Giustificato per scelta predefinita, con sillabazione attiva: senza
   quella, su colonna stretta si aprono i tipici "fiumi" di spazio bianco. */
.prosa--giustificato p,
.prosa--giustificato li{text-align:justify;text-justify:inter-word}
.prosa--destra p,
.prosa--destra li{text-align:right}
.prosa--nulla p,
.prosa--nulla li{text-align:left;hyphens:none}
/* Sotto i 34rem il giustificato peggiora sempre: si torna a bandiera. */
@media (max-width:34rem){
  .prosa--giustificato p,
  .prosa--giustificato li{text-align:left}
}

/* -------------------------------------------------------- video incorporato */
/* Largo quanto la colonna di lettura e centrato, non piu' la miniatura
   che veniva fuori quando l'iframe non trovava regole proprie. */
.video16{position:relative;width:100%;max-width:66ch;margin:2.5rem auto;padding-bottom:0;height:auto;
  aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:var(--inchiostro);
  border:1px solid var(--bordo)}
.video16 iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0;display:block}
.galleria{max-width:66ch}

/* --------------------------------------------------------------- fonti */
.fonti{max-width:66ch;margin-top:3rem;padding-top:1.6rem;border-top:2px solid var(--bordo)}
.fonti h2{font-family:var(--fd);font-size:1.1rem;text-transform:uppercase;letter-spacing:.02em;margin:0 0 1rem;color:var(--tinta)}
.fonti ol{margin:0;padding-left:1.3rem;display:grid;gap:.7rem}
.fonti li{font-size:.97rem;line-height:1.5}
.fonti a{color:var(--tinta);text-underline-offset:3px}
.fonti span{display:block;font-family:var(--fm);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grigio);margin-top:.15rem}

/* ==================================================== NOVITÀ (badge) ===== */
.scheda{position:relative}
.novita{position:absolute;top:.7rem;left:.7rem;z-index:2;display:inline-flex;align-items:center;gap:.3rem;
  background:var(--vivo);color:#04343B;font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.3rem .55rem .3rem .45rem;border-radius:2px;
  box-shadow:0 2px 8px -2px rgba(11,40,48,.45)}
.novita svg{width:11px;height:11px;fill:currentColor;flex:none;animation:scintilla 2.6s ease-in-out infinite}
@keyframes scintilla{0%,72%,100%{opacity:1;transform:none}80%{opacity:.55;transform:scale(.86) rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.novita svg{animation:none}}
/* senza immagine il segnino andrebbe sopra il testo */
.scheda__corpo:first-child .novita,
.scheda > .novita:first-child{position:static;margin:.9rem .9rem -.3rem}

/* ==================================================== CAROSELLO ========== */
.carosello{position:relative}
.carosello__pista{
  display:flex;gap:1.2rem;gap:var(--gap,1.2rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:.4rem;
  cursor:grab;
  will-change:transform;
}
.carosello__pista::-webkit-scrollbar{display:none}
.carosello__pista[data-trascino]{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carosello__pista[data-trascino] a{pointer-events:none}
.carosello__cella{flex:0 0 100%;min-width:0;max-width:100%;scroll-snap-align:start;user-select:none;-webkit-user-drag:none}
.carosello__cella img{pointer-events:none}
@media(min-width:44rem){
  .carosello__cella{flex-basis:calc((100% - var(--gap,1.2rem)) / 2)}
}
@media(min-width:64rem){
  .carosello__cella{flex-basis:calc((100% - (var(--visibili,3) - 1) * var(--gap,1.2rem)) / var(--visibili,3))}
}
/* la molla di fine corsa */
.carosello__pista[data-elastico]{transition:transform .42s cubic-bezier(.22,1.2,.36,1)}

.carosello__comandi{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem}
.frecc{width:42px;height:42px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:#fff;border:2px solid var(--tinta);color:var(--tinta);border-radius:2px;
  font-size:1rem;line-height:1;transition:background .15s,color .15s,opacity .15s}
.frecc:hover:not(:disabled){background:var(--tinta);color:#fff}
.frecc:disabled{opacity:.3;cursor:default;border-color:var(--bordo);color:var(--grigio)}
.carosello__stato{font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}

/* ==================================================== FILTRI ============= */
.filtri{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;justify-content:space-between;align-items:center;
  padding-bottom:1.4rem;margin-bottom:2rem;border-bottom:1px solid var(--bordo)}
.filtri__cerca{display:flex;gap:.5rem;flex:1 1 20rem;align-items:center}
.filtri__cerca input{flex:1;min-width:0;font:400 1rem var(--fb);color:var(--inchiostro);
  background:#fff;border:1px solid var(--bordo);border-radius:2px;padding:.65rem .8rem}
.filtri__cerca input:focus{outline:2px solid var(--tinta);border-color:var(--tinta)}
.filtri__cerca .mini{cursor:pointer;white-space:nowrap;background:#fff}
.filtri__ordine{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.filtri__eti{font-family:var(--fm);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grigio);margin-right:.2rem}
.ordina{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:.5rem .8rem;border:1px solid var(--bordo);border-radius:2px;color:var(--grigio);
  display:inline-flex;gap:.35rem;align-items:center;white-space:nowrap}
.ordina:hover{border-color:var(--tinta);color:var(--tinta)}
.ordina--attivo{background:var(--tinta);border-color:var(--tinta);color:#fff}
.ordina span{font-size:.85rem;line-height:1}

/* Rete di sicurezza: qualunque cosa accada alle variabili, un'immagine non
   deve poter allargare la pista oltre il contenitore. */
.carosello__pista{max-width:100%}
.carosello__cella .scheda__img{width:100%;aspect-ratio:16/9;overflow:hidden}
.carosello__cella .scheda__img img{width:100%;height:100%;object-fit:cover;max-width:100%}

/* ================================================== SCHEDE TUTORIAL ====== */
.tut{display:flex;flex-direction:column}
.tut__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--bordo);background:var(--ghiaccio)}
.tut__media img{width:100%;height:100%;object-fit:cover;display:block}
.tut__media .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,40,48,.24);transition:background .18s}
.tut:hover .tut__media .play{background:rgba(11,40,48,.06)}
.tut__dur{position:absolute;right:.5rem;bottom:.5rem;background:rgba(11,40,48,.86);color:#fff;
  font-family:var(--fm);font-size:.62rem;letter-spacing:.06em;padding:.18rem .4rem;border-radius:2px}
.tut h3{margin:0}
.tut h3 a{text-decoration:none}
.tut h3 a:hover{color:var(--tinta)}
.tut__sub{margin:0!important;font-size:.9rem;color:var(--tinta);font-weight:500}

/* La descrizione mostra K_TUTORIAL_DESC_ROWS righe e poi si scorre:
   così tutte le schede della riga restano della stessa altezza. */
.tut__desc{
  --righe:4;
  max-height:calc(var(--righe) * 1.55em);
  overflow-y:auto;overscroll-behavior:contain;
  padding-right:.4rem;margin-top:.1rem;
  font-size:.92rem;line-height:1.55;color:var(--grigio);
  scrollbar-width:thin;scrollbar-color:var(--bordo) transparent;
}
.tut__desc::-webkit-scrollbar{width:5px}
.tut__desc::-webkit-scrollbar-thumb{background:var(--bordo);border-radius:3px}
.tut__desc::-webkit-scrollbar-thumb:hover{background:var(--tinta)}
.tut__desc p{margin:0}
.tut__desc:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
/* dentro il carosello il testo non deve trascinare la pista */
.carosello__pista .tut__desc{touch-action:pan-y}
.tut .scheda__piede{margin-top:auto}

/* etichetta di categoria */
.cat{display:inline-block;font-family:var(--fm);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  background:var(--ghiaccio);color:var(--tinta);border:1px solid var(--bordo);
  padding:.2rem .45rem;border-radius:2px}

/* ================================================== BARRA DEL PANNELLO === */
.pan__nav{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-bottom:1.6rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--bordo)}
.pan__nav span{flex:1}
.pan__nav a{font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--grigio);padding:.5rem .8rem;border:1px solid transparent;border-radius:2px}
.pan__nav a:hover{color:var(--tinta);border-color:var(--bordo)}
.pan__nav a[aria-current]{background:var(--tinta);color:#fff}

/* ================================================== SCHEDE SOFTWARE ===== */
.sw{display:flex;flex-direction:column;border-top:4px solid var(--tinta)}
.sw .scheda__corpo{padding-top:1.1rem}
.sw .scheda__meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.sw__ver,.sw__lic{font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grigio)}
.sw__lic{border-left:1px solid var(--bordo);padding-left:.5rem}
.sw h3{margin:0}

/* stessa logica dei tutorial: righe fisse e poi si scorre, così le schede
   della riga restano tutte della stessa altezza */
.sw__desc{
  --righe:4;
  max-height:calc(var(--righe) * 1.55em);
  overflow-y:auto;overscroll-behavior:contain;
  padding-right:.4rem;
  font-size:.92rem;line-height:1.55;color:var(--grigio);
  scrollbar-width:thin;scrollbar-color:var(--bordo) transparent;
}
.sw__desc::-webkit-scrollbar{width:5px}
.sw__desc::-webkit-scrollbar-thumb{background:var(--bordo);border-radius:3px}
.sw__desc::-webkit-scrollbar-thumb:hover{background:var(--tinta)}
.sw__desc p{margin:0}
.sw__desc:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.carosello__pista .sw__desc{touch-action:pan-y}
.sw__az{margin-top:auto;padding-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}

/* ------------------------------------------- file caricato nel pannello */
.fileattuale{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;margin:0 0 .5rem;
  padding:.6rem .8rem;background:var(--ghiaccio);border:1px solid var(--bordo);border-radius:2px}
.fileattuale strong{font-family:var(--fm);font-size:.8rem;font-weight:500;word-break:break-all}
.fileattuale span{font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;color:var(--grigio)}
.scelta{display:flex;gap:.5rem;align-items:center;font-family:var(--fm);font-size:.66rem;
  letter-spacing:.08em;color:var(--grigio);margin-bottom:.7rem;cursor:pointer;text-transform:none}
.scelta input{width:auto;margin:0}

/* ================================================ LENTE E LIGHTBOX ====== */
.lente{width:32px;height:32px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid var(--bordo);border-radius:2px;color:var(--tinta);padding:0;
  transition:background .15s,color .15s,border-color .15s}
.lente:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.lente svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.lb{width:min(96vw,1000px);max-width:none;max-height:88vh;padding:0;border:none;border-radius:4px;
  background:var(--bianco);color:var(--inchiostro);overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(11,40,48,.55)}
.lb::backdrop{background:rgba(11,40,48,.62);backdrop-filter:blur(3px)}
.lb[open]{display:flex;flex-direction:column}
.lb__testa{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;
  padding:1rem 1.2rem;border-bottom:1px solid var(--bordo);background:var(--ghiaccio);flex:none}
.lb__testa h2{font-family:var(--fd);font-size:1.05rem;text-transform:none;letter-spacing:-.01em;margin:0;line-height:1.25}
.lb__meta{font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grigio);margin:.4rem 0 0}
.lb__az{display:flex;gap:.4rem;flex:none;align-items:center}
.lb__az .mini{cursor:pointer}
.lb__x{font-size:1.2rem;line-height:1;padding:.35rem .6rem}

.lb__corpo{overflow:auto;background:var(--inchiostro);flex:1;min-height:0}
.lb__corpo pre{margin:0;padding:1.1rem 1.2rem 1.4rem;color:#D6ECEE;
  font:500 .84rem/1.65 var(--fm);tab-size:4}
.lb__corpo code{
  display:block;white-space:pre;
  /* numerazione delle righe fatta col contatore CSS: nessun markup in più,
     e il testo resta selezionabile senza portarsi dietro i numeri */
  counter-reset:riga;
}
.lb__corpo code::before{content:''}
@media(min-width:40rem){
  .lb__corpo pre{padding-left:0}
  .lb__corpo code{padding-left:3.6rem;position:relative}
}
.lb__corpo::-webkit-scrollbar{width:10px;height:10px}
.lb__corpo::-webkit-scrollbar-track{background:#0A2027}
.lb__corpo::-webkit-scrollbar-thumb{background:#2C4C55;border-radius:5px}
.lb__corpo::-webkit-scrollbar-thumb:hover{background:var(--tinta)}
@media(max-width:40rem){
  .lb{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  .lb__corpo pre{font-size:.78rem}
}

/* -------------------------------------------- sezioni dentro il pannello */
.pan__sez{font-family:var(--fd);font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;
  margin:3rem 0 1.2rem;padding-top:1.4rem;border-top:2px solid var(--bordo);color:var(--tinta)}
.pan__sub{font-family:var(--fd);font-size:.92rem;text-transform:uppercase;letter-spacing:.03em;
  margin:2rem 0 1rem;color:var(--grigio)}
.faqriga{border:1px solid var(--bordo);border-radius:2px;padding:1rem 1.1rem .6rem;margin-bottom:.5rem;background:#fff}
.faqriga--nuova{border-style:dashed;border-color:var(--tinta);background:var(--ghiaccio);margin-top:1.5rem}
.faqriga .campo{margin-bottom:.7rem}
.faqriga__az{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.faqdel{margin:-.3rem 0 1.4rem;text-align:right}

/* ------------------------------------ immagini nella schermata Testi */
.immriga{display:grid;gap:1.2rem;padding:1.3rem 0;border-bottom:1px solid var(--bordo)}
@media(min-width:46rem){.immriga{grid-template-columns:11rem 1fr;gap:1.8rem}}
.immriga__ant{border:1px solid var(--bordo);border-radius:2px;background:var(--ghiaccio);
  aspect-ratio:5/6;overflow:hidden;display:grid;place-items:center}
.immriga__ant img{width:100%;height:100%;object-fit:cover}
.immriga__vuota{font-family:var(--fm);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}
.immriga__tit{font-family:var(--fd);font-size:.95rem;text-transform:uppercase;letter-spacing:.02em;margin:0 0 .3rem}
.immriga__campi .campo{margin-top:.9rem;margin-bottom:0}

/* con una sola colonna il testo della bio occupa tutta la larghezza */
.bio:has(> div:only-child){grid-template-columns:1fr}

/* =========================================================================
   PAGINA DEL SINGOLO VIDEO  (/video/{slug})
   Aggiunto il 21/8/2026 — da appendere in fondo a style.css
   ========================================================================= */

/* ---------------------------------------------- facciata del player
   La miniatura e' un <button>, non un iframe: l'embed di YouTube entra
   solo al clic. Caricarlo subito porterebbe qualche centinaio di kB di
   codice di terze parti su una pagina che ne pesa quaranta. */
.video16--facciata{background:var(--inchiostro)}
.facciata{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;margin:0;border:0;background:var(--inchiostro);
  cursor:pointer;display:block;overflow:hidden;
}
.facciata img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.facciata:hover img{transform:scale(1.03)}
.facciata .play{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(11,40,48,.28);transition:background .18s}
.facciata:hover .play{background:rgba(11,40,48,.08)}
.facciata .play i{width:74px;height:52px;border-radius:10px}
.facciata .play i::after{border-left-width:18px;border-top-width:11px;border-bottom-width:11px}
.facciata:hover .play i{transform:scale(1.08);background:var(--vivo)}
.facciata:hover .play i::after{border-left-color:#04343B}
.facciata:focus-visible{outline:3px solid var(--vivo);outline-offset:-3px}
.video16--facciata .tut__dur{right:.7rem;bottom:.7rem;font-size:.68rem;padding:.25rem .5rem}

/* riga dei collegamenti sotto il player */
.videoazioni{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  max-width:66ch;margin:-1.4rem auto 2.6rem}

/* ------------------------------------------------------- trascrizione
   Chiusa per scelta: il testo e' comunque nell'HTML, quindi i motori lo
   leggono, ma la pagina non diventa un muro di parlato non punteggiato. */
.trascriz{max-width:66ch;margin:3rem 0 0;border:1px solid var(--bordo);
  border-left:4px solid var(--tinta);border-radius:3px;background:var(--ghiaccio)}
.trascriz summary{font-family:var(--fm);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta);cursor:pointer;padding:1rem 1.2rem;
  list-style-position:inside}
.trascriz[open] summary{border-bottom:1px solid var(--bordo)}
.trascriz summary:focus-visible{outline:3px solid var(--vivo);outline-offset:-3px}
.trascriz__testo{padding:1.2rem;font-family:var(--fl);font-size:1.02rem;
  line-height:1.75;color:#152A31;max-height:34rem;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:var(--bordo) transparent;hyphens:auto;-webkit-hyphens:auto}
.trascriz__testo p{margin:0;text-align:justify;text-justify:inter-word}
@media (max-width:34rem){.trascriz__testo p{text-align:left}}
.trascriz__testo::-webkit-scrollbar{width:6px}
.trascriz__testo::-webkit-scrollbar-thumb{background:var(--bordo);border-radius:3px}
.trascriz__testo::-webkit-scrollbar-thumb:hover{background:var(--tinta)}

/* le schede video correlate sono <a>, quindi il media e' uno <span> */
.tut span.tut__media{display:block}

/* --------------------------------------------- avviso non bloccante
   Giallo e non rosso: segnala qualcosa da sistemare, non un errore che
   ha impedito il salvataggio. */
.avviso--nota{background:#FBEEDC;color:#8A5A08}

/* etichetta per i soli lettori di schermo (era usata senza definizione) */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* =========================================================================
   BADGE DI GRADIMENTO — pollici e contatore visite
   Aggiunto il 21/8/2026 — da appendere in fondo a style.css
   ========================================================================= */

/* Le schede degli appunti erano un <a> che avvolgeva tutto. Un <button>
   dentro un collegamento e' HTML non valido e il clic navigherebbe
   comunque, quindi ora la scheda e' un <article> con dentro un
   <a class="scheda__vai"> e il badge fuori dal link. */
.scheda__vai{display:flex;flex-direction:column;flex:1;min-width:0;
  text-decoration:none;color:inherit}

.badge{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  padding:.6rem .9rem;border-top:1px solid var(--bordo);
  background:var(--ghiaccio);font-family:var(--fm);font-size:.66rem;
  letter-spacing:.06em;color:var(--grigio)}

.badge__b{display:inline-flex;align-items:center;gap:.32rem;cursor:pointer;
  padding:.32rem .55rem;border:1px solid var(--bordo);border-radius:2px;
  background:#fff;color:var(--grigio);font:inherit;line-height:1;
  transition:color .15s,border-color .15s,background .15s}
.badge__b svg{width:14px;height:14px;fill:currentColor;flex:none;
  transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.badge__b--giu svg{transform:rotate(180deg)}
.badge__b:hover:not(:disabled){color:var(--tinta);border-color:var(--tinta)}
.badge__b--su:hover:not(:disabled) svg{transform:translateY(-2px)}
.badge__b--giu:hover:not(:disabled) svg{transform:rotate(180deg) translateY(-2px)}
.badge__b:focus-visible{outline:3px solid var(--vivo);outline-offset:2px}

/* il pollice gia' dato: resta acceso, non e' un errore che sia spento */
.badge__b--mio{background:var(--tinta);border-color:var(--tinta);color:#fff}
.badge__b--su.badge__b--mio{background:var(--vivo);border-color:var(--vivo);color:#04343B}
.badge__b:disabled{cursor:default}
.badge__b:disabled:not(.badge__b--mio){opacity:.5}

/* il salto del pollice: dice «preso» senza scrivere niente */
@keyframes salto-pollice{
  0%{transform:none}
  30%{transform:translateY(-7px) rotate(-12deg) scale(1.25)}
  55%{transform:translateY(1px) rotate(4deg) scale(.96)}
  75%{transform:translateY(-2px) rotate(-2deg) scale(1.06)}
  100%{transform:none}
}
@keyframes salto-pollice-giu{
  0%{transform:rotate(180deg)}
  30%{transform:rotate(168deg) translateY(-7px) scale(1.2)}
  55%{transform:rotate(184deg) translateY(1px) scale(.96)}
  100%{transform:rotate(180deg)}
}
.badge__b--su.e-scatta svg{animation:salto-pollice .62s cubic-bezier(.2,.8,.3,1)}
.badge__b--giu.e-scatta svg{animation:salto-pollice-giu .62s cubic-bezier(.2,.8,.3,1)}

/* scintilla verde che si allarga dal pollice su */
.badge__b--su.e-scatta{position:relative}
.badge__b--su.e-scatta::after{content:"";position:absolute;inset:-2px;
  border:2px solid var(--vivo);border-radius:3px;
  animation:onda-pollice .62s ease-out forwards;pointer-events:none}
@keyframes onda-pollice{
  0%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(1.55)}
}
@media (prefers-reduced-motion:reduce){
  .badge__b svg,.badge__b--su.e-scatta svg,.badge__b--giu.e-scatta svg{animation:none;transition:none}
  .badge__b--su.e-scatta::after{display:none}
}

.badge__vis{display:inline-flex;align-items:center;gap:.32rem;margin-left:auto;
  padding:.32rem .2rem;white-space:nowrap}
.badge__vis svg{width:14px;height:14px;fill:currentColor;flex:none;opacity:.7}
.badge__esito{flex-basis:100%;font-size:.62rem;color:var(--grigio);min-height:0}
.badge__esito:empty{display:none}

/* versione grande, sulle pagine di dettaglio */
.badge--grande{max-width:66ch;margin:2.6rem 0 0;border:1px solid var(--bordo);
  border-left:4px solid var(--vivo);border-radius:3px;padding:.9rem 1.1rem;
  font-size:.72rem;gap:.55rem}
.badge--grande .badge__b{padding:.55rem .9rem;font-size:.72rem}
.badge--grande .badge__b svg{width:17px;height:17px}
.badge--grande .badge__vis svg{width:17px;height:17px}

/* dentro il carosello, un trascinamento non deve far scattare un pollice:
   la pista disattiva gia' i link, ora anche i pulsanti */
.carosello__pista[data-trascino] button{pointer-events:none}

/* ------------------------------------------------ colonne del pannello */
.pan td.num,.pan th.num{text-align:right;white-space:nowrap}
.pan td.pollice{font-family:var(--fm);font-size:.8rem}
.pan td.pollice--su{color:#046B52}
.pan td.pollice--giu{color:#8A5A08}


/* =========================================================================
   IN EVIDENZA — vetrina mista e riordino nel pannello
   Aggiunto il 21/8/2026 — da appendere in fondo a style.css
   ========================================================================= */

/* ------------------------------------------- cartellino del tipo
   Serve solo in vetrina, dove le tre raccolte stanno mescolate: senza,
   non si capisce se una scheda porta a un articolo, a un video o a uno
   zip da scaricare. Sta in alto a destra per non scontrarsi con «Novità»,
   che sta a sinistra. */
.tipo{position:absolute;top:.7rem;right:.7rem;z-index:2;
  font-family:var(--fm);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.28rem .5rem;border-radius:2px;background:var(--inchiostro);color:#fff;
  box-shadow:0 2px 8px -2px rgba(11,40,48,.45)}
.tipo--video{background:var(--tinta)}
.tipo--software{background:var(--tinta-cupa)}

/* la vetrina mescola schede alte diverse: si allineano in cima */
.carosello--misto .carosello__cella{align-self:stretch}

/* ------------------------------------------- elenco riordinabile (pannello) */
.ordinabile{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.4rem}
.ordinabile__riga{display:flex;align-items:center;gap:.7rem;
  padding:.65rem .8rem;background:#fff;border:1px solid var(--bordo);border-radius:2px;
  touch-action:pan-x}
.ordinabile__riga--fuori{background:#FBEEDC;border-color:#E7CFA6}
.ordinabile__riga--presa{border-color:var(--tinta);box-shadow:0 10px 24px -14px rgba(11,40,48,.6);
  opacity:.94}
.ordinabile__n{font-family:var(--fm);font-size:.68rem;color:var(--grigio);
  min-width:1.8rem;text-align:right;flex:none}
.ordinabile__tit{flex:1;min-width:0;font-size:.95rem;line-height:1.35}
.ordinabile__tit em{display:block;font-family:var(--fm);font-size:.6rem;font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;color:#8A5A08;margin-top:.15rem}
.ordinabile__az{display:flex;gap:.3rem;flex:none}
.ordinabile__az .mini{cursor:pointer;padding:.35rem .55rem;line-height:1}
.ordinabile__togli{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 1rem}

/* la maniglia: tre righine, il segnale universale del «si trascina» */
.maniglia{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;
  width:22px;height:26px;padding:0 4px;flex:none;cursor:grab;touch-action:none}
.maniglia span{display:block;height:2px;background:var(--bordo);border-radius:1px}
.maniglia:hover span{background:var(--tinta)}
.ordinabile__riga--presa .maniglia{cursor:grabbing}
.maniglia--esempio{vertical-align:-.4rem;cursor:default}
.maniglia--esempio span{background:var(--grigio)}

/* nel pannello il cartellino del tipo non e' sovrapposto ma in riga */
.tipo--fisso{position:static;flex:none;font-size:.56rem}

/* Schede senza media — tutte quelle del software, e gli appunti senza
   copertina. I cartellini sovrapposti finirebbero sopra il testo, quindi
   tornano nel flusso: «Novità» a sinistra, il tipo a destra. */
.scheda:not(:has(.scheda__img)):not(:has(.tut__media)) > .novita,
.scheda:not(:has(.scheda__img)):not(:has(.tut__media)) > .tipo{
  position:static;margin:.9rem .9rem -.3rem}
.scheda:not(:has(.scheda__img)):not(:has(.tut__media)) > .tipo{
  align-self:flex-end;margin-top:.9rem}
.scheda:not(:has(.scheda__img)):not(:has(.tut__media)) > .novita ~ .tipo{margin-top:-1.7rem}


/* =========================================================================
   PAGINA DEL SINGOLO STRUMENTO  (/software/{slug})
   Aggiunto il 21/8/2026 — da appendere in fondo a style.css
   ========================================================================= */

.strum__az{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  max-width:66ch;margin:0 0 2.6rem}

/* ---------------------------------------------------- il codice in pagina
   Non solo dentro la lightbox: li' arriva da una chiamata JSON e i motori
   non lo vedono. E' l'unico contenuto di questo sito che nessun altro
   possiede, quindi sta nell'HTML. */
.sorg{max-width:66ch;margin:3rem 0 0;border:1px solid var(--bordo);border-radius:3px;
  overflow:hidden}
.sorg__testa{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  padding:.9rem 1.1rem;background:var(--ghiaccio);border-bottom:1px solid var(--bordo)}
.sorg__testa h2{font-family:var(--fd);font-size:1.05rem;text-transform:uppercase;
  letter-spacing:.02em;margin:0;color:var(--tinta)}
.sorg__meta{flex:1;min-width:0;margin:0;font-family:var(--fm);font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grigio);word-break:break-all}
.sorg__testa .mini{cursor:pointer;flex:none}
.sorg__corpo{background:var(--inchiostro);max-height:44rem;overflow:auto;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2C4C55 transparent}
.sorg__corpo pre{margin:0;padding:1.1rem 1.2rem 1.4rem;color:#D6ECEE;
  font:500 .82rem/1.65 var(--fm);tab-size:4}
.sorg__corpo code{display:block;white-space:pre}
.sorg__corpo::-webkit-scrollbar{width:10px;height:10px}
.sorg__corpo::-webkit-scrollbar-track{background:#0A2027}
.sorg__corpo::-webkit-scrollbar-thumb{background:#2C4C55;border-radius:5px}
.sorg__corpo::-webkit-scrollbar-thumb:hover{background:var(--tinta)}
@media(max-width:40rem){.sorg__corpo pre{font-size:.74rem}}

/* scheda dei fatti nella colonna laterale: piu' stretta della versione
   che sta nella pagina identitaria */
.fatti--stretta{margin-bottom:2rem;font-size:.9rem}
.fatti--stretta>div{grid-template-columns:6.5rem 1fr;gap:.6rem;padding:.55rem 0}
.fatti--stretta dt{font-size:.6rem}

/* il pulsante che porta alla pagina, dentro la scheda dell'archivio */
/*.mini--forte{background:var(--tinta);color:#fff;border-color:var(--tinta)} */
/*.mini--forte:hover{background:var(--tinta-cupa);border-color:var(--tinta-cupa);color:#fff} */

/* ═══════════════════════════════════════════════════════════════════════
   ANTEPRIMA WEBAPP NELLE SCHEDE SOFTWARE
   Da aggiungere in coda ad assets/css/style.css
   ═══════════════════════════════════════════════════════════════════════ */

/* --------------------------------------------- il corpo a due viste ---- */
/* Le due viste stanno nella STESSA cella di griglia, sovrapposte. Cosi' la
   scheda e' sempre alta quanto la piu' alta delle due e non cambia altezza
   quando si alternano: in una riga di carosello un salto di altezza
   trascinerebbe su e giu' anche le schede vicine.                          */
.swcar{display:flex;flex-direction:column;gap:.7rem}
.swcar__viste{display:grid;flex:1}
.swcar__vista{
  grid-area:1 / 1;
  display:flex;flex-direction:column;gap:.55rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease;
}
.swcar__vista.is-qui{opacity:1;visibility:visible;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.swcar__vista{transition:none}}

/* pallini di avvicendamento */
.swcar__pager{display:flex;gap:.45rem;justify-content:center;padding-top:.2rem}
.swcar__pager button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--bordo);transition:background .2s,transform .2s,width .2s;
}
.swcar__pager button:hover{background:var(--grigio)}
.swcar__pager button[aria-selected="true"]{background:var(--tinta);width:20px;border-radius:4px}
.swcar__pager button:focus-visible{outline:2px solid var(--vivo);outline-offset:2px}

/* --------------------------------------------------- il riquadro app --- */
.swapp{
  position:relative;width:100%;
  aspect-ratio:var(--rap, 9 / 16);
  max-height:min(60vh, 30rem);          /* un 9:16 in colonna stretta diventerebbe altissimo */
  margin-inline:auto;
  border:1px solid var(--bordo);border-radius:3px;overflow:hidden;
  background:var(--ghiaccio);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
/* con rapporto verticale la larghezza si accorcia per rispettare il tetto
   di altezza, invece di sfondare la scheda */
.swapp{max-width:calc(min(60vh, 30rem) * var(--rap, 0.5625))}

.swapp__tela{width:100%;height:100%;border:0;display:block;background:#fff}

/* pulsante «a tutto schermo» */
.swapp__pieno{
  position:absolute;top:.45rem;right:.45rem;z-index:2;
  width:30px;height:30px;display:grid;place-items:center;cursor:pointer;padding:0;
  background:rgba(255,255,255,.9);backdrop-filter:blur(4px);
  border:1px solid var(--bordo);border-radius:3px;color:var(--tinta);
  transition:background .15s,color .15s;
}
.swapp__pieno:hover{background:var(--tinta);color:#fff}
.swapp__pieno svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.swapp__pieno .chiudi{display:none}

/* stato a tutto schermo: il riquadro riempie lo schermo e perde i vincoli */
.swapp:fullscreen{
  max-width:none;max-height:none;width:100vw;height:100vh;
  aspect-ratio:auto;border:0;border-radius:0;background:#fff;
}
.swapp:fullscreen .swapp__pieno{top:1rem;right:1rem;width:38px;height:38px}
.swapp:fullscreen .swapp__pieno .apri{display:none}
.swapp:fullscreen .swapp__pieno .chiudi{display:inline}
/* Safari vecchi: prefisso separato, non si puo' unire al selettore sopra */
.swapp:-webkit-full-screen{max-width:none;max-height:none;width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0}

/* mentre si trascina il carosello, l'iframe non deve rubare il puntatore */
.carosello__pista[data-trascino] .swapp__tela{pointer-events:none}

/* su schermo stretto il riquadro puo' essere piu' alto: c'e' spazio */
@media (max-width:44rem){
  .swapp{max-height:min(70vh, 34rem);max-width:calc(min(70vh, 34rem) * var(--rap, 0.5625))}
}

/* -------------------------------------- riquadro raggruppato nel pannello */
.riquadro{border:1px solid var(--bordo);border-radius:3px;padding:1.1rem 1.2rem .6rem;margin-bottom:1.4rem}
.riquadro legend{font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta);padding:0 .4rem}
.riquadro .scelta{margin-bottom:1rem}

/* --------------------------------------------- vetrina in cima a /software */
.sez--vetrina{padding-block:clamp(2.2rem,5vw,3.4rem)}

/* ------------------------------------- anteprima nella pagina strumento */
/* Qui non c'e' il vincolo della riga di carosello: il riquadro puo'
   respirare, quindi il tetto di altezza si alza parecchio.               */
.strum__app{margin:0 0 2rem;padding:1.2rem;border:1px solid var(--bordo);
  border-radius:4px;background:var(--ghiaccio)}
.strum__app .kick{margin-bottom:.9rem}
.strum__app .aiuto{margin:.8rem 0 0;text-align:center}
.strum__app .swapp{
  max-height:min(78vh, 44rem);
  max-width:calc(min(78vh, 44rem) * var(--rap, 0.5625));
  box-shadow:0 10px 30px -14px rgba(11,40,48,.4);
}

/* ═══════════════════════════════════════════════════════════════════
   CONTENIMENTO ORIZZONTALE
   Una griglia o un flex non restringono i figli sotto la loro larghezza
   minima di contenuto: il valore iniziale di min-width e' «auto», non
   zero. Una tabella larga, una riga di codice lunga o un indirizzo senza
   spazi allargano la colonna e sfondano lo schermo. Va detto a mano.
   ═══════════════════════════════════════════════════════════════════ */

.colonne, .colonne > *, .wrap > *{min-width:0}
.prosa, .prosa > *{min-width:0;max-width:100%}

/* parole senza spazi: indirizzi, percorsi, nomi di funzione */
.prosa{overflow-wrap:break-word;word-break:normal}
.prosa a, .prosa code{overflow-wrap:anywhere}

/* blocchi che devono scorrere per conto proprio, non trascinare la pagina */
.prosa pre, .sorg__corpo{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.prosa table{display:block;max-width:100%;overflow-x:auto}

/* rete di sicurezza: se qualcosa sfugge, non deve poter creare una barra
   di scorrimento orizzontale su tutto il documento. «clip» invece di
   «hidden» perche' non trasforma il contenitore in un contesto di
   scorrimento, e quindi non rompe position:sticky nell'indice laterale. */
main{overflow-x:clip}

/* ═══════════════════════════════════════════════════════════════════
   ANTEPRIMA — larghezza sempre entro il contenitore
   ═══════════════════════════════════════════════════════════════════ */

/* Il tetto calcolato dall'altezza andava bene per il 9:16, ma con il
   16:9 la moltiplicazione produce un valore piu' largo dello schermo:
   78vh * 1,78 su un telefono fa oltre mille pixel. Il min() con 100%
   chiude il problema per entrambi i formati. */
.swapp{width:100%}
.strum__app .swapp{
  max-height:min(78vh, 44rem);
  max-width:min(100%, calc(min(78vh, 44rem) * var(--rap, 0.5625)));
  box-shadow:0 10px 30px -14px rgba(11,40,48,.4);
}
.scheda .swapp{
  max-width:min(100%, calc(min(60vh, 30rem) * var(--rap, 0.5625)));
}

/* ═══════════════════════════════════════════════════════════════════
   SU TELEFONO: solo la webapp
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:44rem){
  /* Niente cornice, niente occhiello, niente didascalia: su uno schermo
     stretto ogni elemento attorno ruba spazio alla cosa che conta. Il
     riquadro prende tutta la larghezza utile e si allunga. */
  .strum__app{padding:0;border:0;background:none;margin-bottom:1.6rem}
  .strum__app .kick,
  .strum__app .aiuto{display:none}
  .strum__app .swapp{
    max-height:min(82vh, 46rem);
    max-width:100%;
    border-radius:3px;
  }
  /* il pulsante a tutto schermo resta, ed e' l'unico comando visibile */
  .strum__app .swapp__pieno{width:34px;height:34px}

  /* i pulsanti vanno a capo invece di stringersi */
  .strum__az{flex-wrap:wrap}
  .strum__az .btn{flex:1 1 auto;text-align:center}
}

/* ------------------------------------- intestazione del codice sorgente */
/* Su schermo largo titolo, dati e pulsante stanno sulla stessa riga.
   Su telefono i dati non ci stanno: spremuti in una colonna da centoventi
   pixel il nome del file va a capo lettera per lettera. Vanno su una riga
   propria, sotto agli altri due e subito sopra al codice. */
@media (max-width:44rem){
  .sorg__testa{
    display:flex;flex-wrap:wrap;align-items:center;
    gap:.7rem .9rem;
  }
  .sorg__testa h2{flex:1 1 auto;margin:0;min-width:0}
  .sorg__testa .mini{flex:0 0 auto;order:2;white-space:nowrap}
  .sorg__meta{
    order:3;                 /* dopo titolo e pulsante */
    flex:1 0 100%;           /* riga intera, sempre */
    margin:0;
    white-space:normal;
    overflow-wrap:anywhere;  /* «index-98e7f.txt» non ha spazi dove andare a capo */
    line-height:1.7;
  }
}

/* il codice scorre per conto suo, non trascina la pagina */
.sorg__corpo{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.sorg__corpo pre{margin:0;white-space:pre}

/* SEZIONE STILE DEI COMMENTI */
/* ------------------------------------------------------------- accesso */
.accedi{max-width:34rem}
.accedi__scelte{display:grid;gap:.7rem;margin-bottom:1.6rem}
.accedi__uno{display:block;padding:.95rem 1.2rem;border:2px solid var(--bordo);border-radius:3px;
  text-decoration:none;color:var(--inchiostro);font-family:var(--fm);font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;transition:border-color .15s,background .15s}
.accedi__uno b{font-weight:500;letter-spacing:.02em}
.accedi__uno:hover{border-color:var(--tinta);background:var(--ghiaccio)}
.accedi__nota{max-width:46ch}

/* ------------------------------------------------------------- profilo */
.profilo{max-width:52rem}
.profilo__nick{max-width:24rem;margin-bottom:2rem}
.profilo__addio{max-width:24rem;margin-top:1rem}
.profilo__esci{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--bordo)}

/* ------------------------------------------------------------ commenti */
.commenti{max-width:66ch;margin-top:3rem;padding-top:1.8rem;border-top:2px solid var(--bordo)}
.commenti h2{font-family:var(--fd);font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em;
  margin:0 0 1.4rem;color:var(--tinta);display:flex;align-items:center;gap:.6rem}
.commenti__n{font-family:var(--fm);font-size:.68rem;letter-spacing:.06em;background:var(--ghiaccio);
  border:1px solid var(--bordo);border-radius:2px;padding:.15rem .45rem;color:var(--grigio)}
.commenti__vuoto{color:var(--grigio);margin:0 0 1.6rem}
.commenti__elenco{display:grid;gap:.9rem;margin-bottom:2rem}

.comm{border:1px solid var(--bordo);border-left:3px solid var(--tinta);border-radius:3px;
  padding:.9rem 1.1rem;background:#fff}
.comm--risposta{margin-left:clamp(1rem,5vw,2.4rem);border-left-color:var(--vivo);background:var(--ghiaccio)}
.comm--attesa{border-style:dashed;opacity:.85}
.comm__testa{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:baseline;margin-bottom:.5rem}
.comm__chi{font-family:var(--fd);font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.01em}
.comm__testa time{font-family:var(--fm);font-size:.62rem;letter-spacing:.08em;color:var(--grigio)}
.comm__eti{font-family:var(--fm);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  padding:.16rem .4rem;border-radius:2px}
.comm__eti--priv{background:var(--tinta);color:#fff}
.comm__eti--att{background:#FBEEDC;color:#8A5A08}
.comm__eti--no{background:#FBE3E0;color:#8A2314}
.comm__testo{font-size:.98rem;line-height:1.62;overflow-wrap:break-word}
.comm__az{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.comm__az .mini{cursor:pointer;background:#fff}
.comm__az form{display:inline}

/* ------------------------------------------------------- modulo scrittura */
.commscrivi{border:1px solid var(--bordo);border-radius:3px;padding:1.1rem 1.2rem;background:var(--ghiaccio)}
.commscrivi textarea{width:100%;font:400 1rem/1.6 var(--fb);color:var(--inchiostro);background:#fff;
  border:1px solid var(--bordo);border-radius:2px;padding:.75rem .85rem;resize:vertical}
.commscrivi textarea:focus{outline:2px solid var(--tinta);border-color:var(--tinta)}
.commscrivi__a{display:flex;gap:.6rem;align-items:center;margin:0 0 .7rem;font-family:var(--fm);
  font-size:.68rem;letter-spacing:.06em;color:var(--tinta)}
.commscrivi__a .mini{cursor:pointer;background:#fff}
.commscrivi__piede{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center;margin-top:.8rem}
.commscrivi__vis{display:flex;gap:.9rem;border:0;margin:0;padding:0}
.commscrivi__vis label{display:flex;gap:.35rem;align-items:center;font-family:var(--fm);
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grigio);cursor:pointer}
.commscrivi__vis input{width:auto;margin:0}
.commscrivi__piede .btn{margin-left:auto}
.commscrivi__reg{margin:.9rem 0 0;max-width:52ch}
.commscrivi__reg a{color:var(--tinta)}

.commenti__entra{border:1px dashed var(--tinta);border-radius:3px;padding:1.3rem;background:var(--ghiaccio);text-align:center}
.commenti__entra p{margin:0 0 1rem;color:var(--grigio)}

/* --------------------------------------------------- coda di moderazione */
.modriga{border:1px solid var(--bordo);border-left:3px solid #C8A430;border-radius:3px;
  padding:1rem 1.1rem;margin-bottom:.7rem;background:#fff}
.modriga__testa{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:baseline;margin-bottom:.6rem}
.modriga__testo{font-size:.96rem;line-height:1.6;overflow-wrap:break-word;
  padding:.6rem .8rem;background:var(--ghiaccio);border-radius:2px}
.modriga__az{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.8rem}
.modriga__az form{display:inline}
.modriga__az .mini{cursor:pointer;background:#fff}
.mini--forte{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.mini--forte:hover{background:var(--tinta-cupa)}

.pan__conta{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;
  margin-left:.35rem;background:#C8A430;color:#fff;border-radius:9px;
  font-family:var(--fm);font-size:.58rem;font-weight:500}

@media (max-width:44rem){
  .commscrivi__piede .btn{margin-left:0;width:100%;text-align:center}
  .comm--risposta{margin-left:.8rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGINE LEGALI  —  in coda ad assets/css/style.css
   ═══════════════════════════════════════════════════════════════════════ */

.legale__testa{display:flex;gap:clamp(1rem,3vw,2rem);align-items:center}
.legale__logo{flex:none;width:clamp(56px,10vw,88px);height:auto;border-radius:14px}
@media (max-width:34rem){
  .legale__testa{flex-direction:column;align-items:flex-start;gap:1rem}
  .legale__logo{width:56px}
}

/* Testo legale: leggibile, non giustificato. Il giustificato su elenchi
   fitti e periodi brevi apre buchi di spazio che rendono la lettura
   faticosa proprio dove serve chiarezza. */
.legale{max-width:70ch}
.legale p,.legale li{text-align:left;hyphens:none}
.legale h2{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);margin-top:2.8rem;
  padding-top:1.2rem;border-top:1px solid var(--bordo)}
.legale h3{font-size:1.06rem;margin-top:1.8rem;color:var(--tinta)}
.legale ul{margin-bottom:1.4rem}
.legale li{margin-bottom:.6rem}
.legale .risposta{margin-bottom:2.4rem}
.legale__data{font-family:var(--fm);font-size:.7rem;letter-spacing:.06em;
  line-height:2;color:var(--grigio);margin-top:2rem}
.legale__data a{color:var(--tinta)}

/* ------------------------------------------------- icone nel menu ------ */
/* Le icone stanno DOPO il testo, come chiesto. Sono disegnate solo con
   contorni: a 14 px un'icona piena diventa una macchia, un contorno resta
   riconoscibile. Ereditano il colore del testo, quindi si accendono con
   il collegamento senza dover scrivere regole doppie. */
.testata nav a{display:inline-flex;align-items:center;gap:.42rem;white-space:nowrap}
.mi{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;opacity:.72;transition:opacity .15s}
.testata nav a:hover .mi,
.testata nav a[aria-current] .mi{opacity:1}

/* ------------------------------------------------- la voce «Accedi» ---- */
/* Riquadrata e nel colore di accento: e' l'unica voce che chiede un'azione
   invece di portare a una pagina, e deve distinguersi al primo colpo
   d'occhio. Il verde acqua compare di rado sul sito, quindi qui pesa. */
.testata nav a.voce--entra{
  color:var(--tinta);
  border:1.5px solid var(--vivo);
  border-radius:3px;
  padding:.34rem .7rem;
  background:rgba(18,214,166,.10);
  transition:background .16s,color .16s,border-color .16s;
}
.testata nav a.voce--entra .mi{opacity:1}
.testata nav a.voce--entra:hover{
  background:var(--vivo);
  color:#04343B;
  border-color:var(--vivo);
}

/* chi e' gia' entrato: presente ma discreto, non deve gridare */
.testata nav a.voce--io{color:var(--tinta);font-weight:600}
.testata nav a.voce--io .mi{opacity:1}

/* --- menu aperto su telefono ------------------------------------------- */
/* Nel pannello a scomparsa le voci sono a piena larghezza: l'icona va
   spinta a destra, allineata in colonna con le altre. */
@media (max-width:55.99rem){
  .testata ul[data-aperto] a{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .testata ul[data-aperto] a.voce--entra{
    margin:.6rem 0 .2rem;
    justify-content:space-between;
    border-width:2px;
  }
  .mi{width:16px;height:16px}
}

/* ═══════════════════════════════════════════════════════════════════
   PULSANTI DI ACCESSO CON I SOCIAL

   Ogni pulsante porta il colore del proprio fornitore in una variabile,
   cosi' la struttura e' scritta una volta sola e cambia solo la tinta.
   A riposo il colore sta nel marchio e in una riga verticale a sinistra;
   al passaggio riempie il pulsante. Sono i due stati che servono: uno
   che si legge in blocco, uno che risponde.
   ═══════════════════════════════════════════════════════════════════ */

.accedi__scelte{display:grid;gap:.65rem;margin-bottom:1.8rem}

.soc{
  --tinta-soc:var(--inchiostro);
  --su-soc:#fff;
  position:relative;
  display:flex;align-items:center;gap:.9rem;
  padding:.85rem 1rem .85rem 1.15rem;
  background:#fff;
  border:1.5px solid var(--bordo);
  border-radius:4px;
  text-decoration:none;
  color:var(--inchiostro);
  overflow:hidden;
  transition:border-color .18s, box-shadow .18s, transform .12s;
}

/* la riga verticale colorata: dice di chi e' il pulsante prima ancora
   che l'occhio arrivi al marchio */
.soc::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--tinta-soc);
  transition:width .22s cubic-bezier(.4,0,.2,1);
}

.soc:hover{
  border-color:var(--tinta-soc);
  box-shadow:0 6px 18px -10px var(--tinta-soc);
  transform:translateY(-1px);
}
/* al passaggio la riga si allarga fino a riempire tutto */
.soc:hover::before{width:100%}
.soc:active{transform:translateY(0)}

.soc__marchio,
.soc__testo,
.soc__vai{position:relative;z-index:1;transition:color .18s}

.soc__marchio{
  flex:none;width:26px;height:26px;display:grid;place-items:center;
  color:var(--tinta-soc);
}
.soc__marchio svg{width:100%;height:100%;display:block}

.soc__testo{
  flex:1;
  font-family:var(--fm);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grigio);
}
.soc__testo b{
  display:block;margin-top:.12rem;
  font-family:var(--fd);font-weight:800;font-size:1rem;letter-spacing:-.01em;
  text-transform:none;color:var(--inchiostro);
}

.soc__vai{
  flex:none;width:18px;height:18px;
  fill:none;stroke:var(--bordo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .18s, transform .22s;
}
.soc:hover .soc__vai{stroke:var(--su-soc);transform:translateX(3px)}

/* --- testo e marchio invertiti quando il colore riempie il pulsante --- */
.soc:hover .soc__testo,
.soc:hover .soc__testo b{color:var(--su-soc)}
.soc:hover .soc__marchio{color:var(--su-soc)}

/* La G di Google non si inverte: e' un marchio a quattro colori e vive
   su fondo chiaro. Le si mette dietro una pastiglia bianca. */
.soc--google:hover .soc__marchio{
  background:#fff;border-radius:50%;padding:3px;
  width:30px;height:30px;
}

/* --------------------------------------------------- i quattro colori */
.soc--google  {--tinta-soc:#4285F4}
.soc--github  {--tinta-soc:#1B1F24}
.soc--linkedin{--tinta-soc:#0A66C2}
.soc--facebook{--tinta-soc:#1877F2}

.soc:focus-visible{outline:3px solid var(--vivo);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .soc,.soc::before,.soc__vai{transition:none}
  .soc:hover{transform:none}
  .soc:hover::before{width:4px}
  .soc:hover .soc__testo,
  .soc:hover .soc__testo b{color:var(--inchiostro)}
  .soc:hover .soc__marchio{color:var(--tinta-soc)}
  .soc:hover .soc__vai{stroke:var(--tinta-soc);transform:none}
}

@media (max-width:34rem){
  .soc{padding:.75rem .8rem .75rem 1rem;gap:.7rem}
  .soc__testo{font-size:.7rem}
  .soc__testo b{font-size:.94rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   PANNELLO COMMENTI NELLE SCHEDE  —  in coda ad assets/css/style.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------- il fumetto nel badge */
/* Verde acqua: sul sito compare di rado — il segnino «Novità», i pulsanti
   della fascia — quindi qui si nota senza dover gridare. Gli altri due
   pulsanti del badge restano grigi: fra tre elementi uguali nessuno invita. */
.badge__b--comm{
  color:#0A8F72;
  border-color:rgba(18,214,166,.45);
  background:rgba(18,214,166,.10);
  font-weight:600;
}
.badge__b--comm:hover{
  background:var(--vivo);
  border-color:var(--vivo);
  color:#04343B;
}
.badge__b--comm[aria-expanded="true"]{
  background:var(--vivo);
  border-color:var(--vivo);
  color:#04343B;
}
/* nessun commento ancora: l'etichetta diventa parola, non numero */
.badge__b--primo span{
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
}
/* il fumetto pulsa una volta all'ingresso, poi sta fermo: un invito che
   si ripete diventa rumore */
@media (prefers-reduced-motion:no-preference){
  .badge__b--comm{animation:respiro 2.4s ease-out 1.2s 2}
}
@keyframes respiro{
  0%,100%{box-shadow:0 0 0 0 rgba(18,214,166,0)}
  40%{box-shadow:0 0 0 5px rgba(18,214,166,.22)}
}

/* --------------------------------------------------------- il pannello */
.commpan{
  border-top:1px solid var(--bordo);
  background:var(--ghiaccio);
  padding:.7rem .8rem .8rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.commpan[hidden]{display:none}

/* Altezza fissa e scorrimento interno. overscroll-behavior: contain
   impedisce che arrivati in fondo si metta in moto la pagina sotto — su
   telefono e' la differenza fra leggere e perdere il segno. */
.commpan__lista{
  max-height:15rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:.5rem;
  padding-right:.3rem;
  scrollbar-width:thin;scrollbar-color:var(--bordo) transparent;
}
.commpan__lista::-webkit-scrollbar{width:5px}
.commpan__lista::-webkit-scrollbar-thumb{background:var(--bordo);border-radius:3px}
.commpan__lista::-webkit-scrollbar-thumb:hover{background:var(--tinta)}
.commpan__lista:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

.commpan__attesa,
.commpan__vuoto{
  font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;
  color:var(--grigio);margin:.4rem 0;text-align:center;
}

/* un commento nell'elenco */
.cmt{background:#fff;border:1px solid var(--bordo);border-radius:3px;padding:.5rem .65rem}
.cmt--risposta{margin-left:1.1rem;border-left:2px solid var(--vivo)}
.cmt__testa{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:baseline;margin-bottom:.25rem}
.cmt__chi{font-family:var(--fd);font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.01em}
.cmt__quando{font-family:var(--fm);font-size:.58rem;letter-spacing:.06em;color:var(--grigio)}
.cmt__testo{font-size:.88rem;line-height:1.5;overflow-wrap:break-word;white-space:pre-line}

/* ------------------------------------------------------- campo scrittura */
.commpan__scrivi{display:flex;gap:.45rem;align-items:flex-end}
.commpan__scrivi textarea{
  flex:1;min-width:0;resize:none;
  font:400 .9rem/1.45 var(--fb);color:var(--inchiostro);
  background:#fff;border:1px solid var(--bordo);border-radius:3px;
  padding:.5rem .6rem;
}
.commpan__scrivi textarea:focus{outline:2px solid var(--tinta);border-color:var(--tinta)}
.commpan__invia{
  flex:none;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;padding:0;
  background:var(--tinta);border:1px solid var(--tinta);border-radius:3px;color:#fff;
  transition:background .15s,transform .12s;
}
.commpan__invia:hover{background:var(--tinta-cupa);transform:translateY(-1px)}
.commpan__invia svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.commpan__nota{
  font-family:var(--fm);font-size:.58rem;letter-spacing:.06em;color:var(--grigio);margin:0;
}

/* --------------------------------------------------------------- invito */
.commpan__invito{
  background:#fff;border:1px dashed var(--vivo);border-radius:3px;
  padding:.75rem .85rem;text-align:center;
}
.commpan__invito p{margin:0 0 .6rem;font-size:.86rem;line-height:1.5;color:var(--grigio)}
.commpan__invito b{color:var(--inchiostro)}
.commpan__invito .mini{cursor:pointer}

.commpan__tutti{
  font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta);text-decoration:none;text-align:right;
}
.commpan__tutti:hover{text-decoration:underline;text-underline-offset:3px}

/* Su telefono l'elenco puo' respirare: c'e' meno larghezza ma piu' altezza. */
@media (max-width:44rem){
  .commpan__lista{max-height:min(58vh,20rem)}
}

/* Dentro un carosello l'apertura fa crescere la riga: e' voluto, ma il
   trascinamento non deve partire mentre si scorre l'elenco o si scrive. */
.carosello__pista .commpan{touch-action:pan-y}