/* node04.com — sito di supporto prodotti
   Struttura stile OSA: colonne 60/40, righe 20/80, tutti gli id iniziano con R_
   Tema: grigio siderale (space gray)
   - Testi scalati sulla dimensione della finestra (clamp + vw)
   - Immagini colonna sinistra: a tutta larghezza (showcase + galleria dettaglio)
   - Rigo: immagine a sinistra (40% della larghezza, riquadro a tutta altezza, immagine intera senza ritagli);
     a destra badge, nome, descrizione e in fondo i pulsanti
   - Selettore lingua (globo) in alto a destra; default EN, IT per il progetto Abruzzo
   - Data di ultimo aggiornamento nell'angolo superiore destro di ogni rigo
   - Pulsanti di ogni rigo, a destra dell'immagine e tutti alti uguale: «Supporto» (apre a sinistra il modulo
     di richiesta assistenza) + info + link esterni; su una riga o su due a seconda della larghezza (@container card)
   - Telefono (sotto 760px): il riquadro di sinistra diventa la testata fissa, l'elenco di destra è il corpo
     che scorre; un tocco su un rigo mostra i suoi contenuti nella testata (blocco «Versione telefono», in fondo) */

:root{
  --bg:#0b0d12;
  --panel:#141720;
  --panel-2:#10131b;
  --border:#2a2f3a;
  --border-soft:#20242e;
  --text:#e9ecf2;
  --muted:#9aa1ad;
  --muted-2:#727986;
  --accent:#8d9199;         /* grigio siderale chiaro */
  --accent-2:#54585f;       /* grafite */
  --accent-grad:linear-gradient(135deg,#767a82,#474b51);
  --glow:141,145,153;       /* rgba base del grigio siderale */
  --row:#11141c;
  --row-hover:#171b25;
  --row-active:#191d28;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --badge-fs:clamp(11px,.85vw,15px);   /* testo dei badge categoria/piattaforma nei righi */
  --btn-h:clamp(34px,2.4vw,42px);   /* altezza comune di tutti i pulsanti del rigo (Supporto, info, link) */
}

@font-face{font-family:"Aero";src:url("../assets/fonts/Aero.ttf?v=20261031") format("truetype");font-weight:normal;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}

/* ===== Griglia principale ===== */
#R_ROOT{display:flex;width:100vw;height:100vh;overflow:hidden}

#R_LC{flex:0 0 60%;width:60%;height:100%;display:flex;flex-direction:column;border-right:1px solid var(--border)}
#R_RC{flex:0 0 40%;width:40%;height:100%;display:flex;flex-direction:column;background:var(--panel-2)}

/* righe 20% / 80% in ciascuna colonna */
#R_LT{flex:0 0 auto;height:min(20%,190px);max-height:190px;min-height:120px;display:flex;align-items:center;gap:18px;padding:0 34px;
      background:radial-gradient(1200px 300px at 0% 0%,rgba(var(--glow),.12),transparent 60%),var(--panel);
      border-bottom:1px solid var(--border)}
#R_LB{flex:1 1 auto;min-height:0;overflow:auto;padding:28px 34px;position:relative}

#R_RT{flex:0 0 auto;height:min(20%,190px);max-height:190px;min-height:120px;display:flex;align-items:center;justify-content:space-between;
      padding:0 22px;border-bottom:1px solid var(--border);background:var(--panel)}
#R_RB{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px}

/* ===== Intestazione sinistra (R_LT) ===== */
#R_LT_LOGO{width:auto;height:90%;aspect-ratio:1;filter:drop-shadow(0 4px 10px rgba(var(--glow),.35));flex:0 0 auto;cursor:pointer}
#R_LT_TITLES{cursor:pointer}
#R_LT_TITLE{margin:0;font-family:"Aero","Segoe UI",system-ui,sans-serif;font-size:clamp(30px,2.8vw,56px);font-weight:400;letter-spacing:.5px;
  background:linear-gradient(135deg,#d7dbe2,#8b9099);-webkit-background-clip:text;background-clip:text;color:transparent}
#R_LT_SUB{margin:5px 0 0;color:var(--muted);font-size:clamp(14px,1.15vw,20px)}

/* ===== Testata elenco (R_RT) ===== */
#R_RT_TL{display:flex;flex-direction:column;gap:2px}
#R_RT_KICKER{font-size:clamp(11px,.85vw,14px);letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
#R_RT_TITLE{font-size:clamp(18px,1.5vw,28px);font-weight:800}
#R_RT_TR{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#R_RT_COUNT{font-size:clamp(12px,.9vw,15px);color:var(--muted-2);background:var(--panel-2);border:1px solid var(--border);
  padding:5px 10px;border-radius:999px}

/* selettore lingua (globo) — in alto a destra del sito */
.lang-switch{display:inline-flex;align-items:center;gap:3px;background:var(--panel-2);
  border:1px solid var(--border);border-radius:999px;padding:3px 4px 3px 9px}
.lang-globe{display:inline-flex;align-items:center;color:var(--accent)}
.lang-globe svg{width:clamp(16px,1.2vw,20px);height:clamp(16px,1.2vw,20px);display:block}
.lang-switch select{font:inherit;font-size:clamp(12px,.9vw,15px);font-weight:700;color:var(--text);background:transparent;border:none;cursor:pointer;
  padding:4px 4px 4px 2px;max-width:150px;text-overflow:ellipsis;border-radius:999px}
.lang-switch select:focus-visible{outline:2px solid var(--accent)}
.lang-switch select option{background:var(--panel);color:var(--text)}

/* ===== Righe elenco (R_ROW_*) ===== */
/* rigo = immagine a sinistra + riquadro a destra con badge, nome, descrizione e, in fondo, la barra dei pulsanti
   (Supporto + info + link esterni, tutti alti uguale, a destra dell'immagine) */
.row{position:relative;display:flex;flex-direction:column;
  background:var(--row);border:1px solid var(--border-soft);border-radius:14px;
  margin-bottom:12px;padding:10px;cursor:pointer;overflow:hidden;
  transition:transform .12s ease,border-color .12s ease,background .12s ease}
.row-main{display:flex;gap:14px;align-items:stretch}
.row:hover{background:var(--row-hover);border-color:#363c48;transform:translateY(-1px)}
.row.active{background:var(--row-active);border-color:transparent;
  box-shadow:0 0 0 1.5px var(--accent),0 8px 22px rgba(var(--glow),.2)}

/* data di ultimo aggiornamento — angolo superiore destro del rigo */
.row-date{position:absolute;top:9px;right:9px;z-index:4;font-size:clamp(10.5px,.8vw,14px);font-weight:700;letter-spacing:.2px;
  color:#eef1f6;background:rgba(9,11,16,.74);border:1px solid rgba(255,255,255,.14);
  padding:3px 9px;border-radius:999px;pointer-events:none;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.row-date.soon{color:#0b0d12;background:linear-gradient(135deg,#d7dbe2,#aeb4bf);border-color:transparent}

/* immagine a sinistra di ogni rigo: il 40% della larghezza del rigo, a tutta altezza; l'immagine dentro resta in rapporto 628:360.
   L'allineamento (object-position) cambia per prodotto, impostato da js/app.js. */
.thumb{flex:0 0 40%;width:40%;aspect-ratio:628/360;border-radius:10px;overflow:hidden;background:#0a0d14;
  display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}

/* riquadro a destra dell'immagine: badge, nome + descrizione, barra pulsanti.
   È un «container»: la barra pulsanti e i badge si adattano alla larghezza che hanno a disposizione (vedi @container più sotto) */
.card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;container-name:card;container-type:inline-size}

/* riga alta: badge categoria + piattaforma (padding-right per non finire sotto la data).
   Alta quanto un badge: quello che non ci sta va a capo e resta nascosto, così nessun badge appare troncato */
.card-top{flex:0 0 auto;height:calc(var(--badge-fs) * 1.3 + 8px);min-height:23px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;
  padding-right:118px;overflow:hidden}

.card-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.card-mid .name{font-size:clamp(18px,1.6vw,32px);font-weight:700;line-height:1.2;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-mid .desc{font-size:clamp(13px,1.05vw,20px);color:var(--muted);line-height:1.4;min-height:4.2em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* badge categoria / piattaforma */
.badge{flex:0 0 auto;font-size:var(--badge-fs);line-height:1.3;font-weight:700;letter-spacing:.3px;padding:3px 10px;border-radius:999px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.badge.cat{color:#dfe3ea;background:rgba(var(--glow),.16);border:1px solid rgba(var(--glow),.38)}
.badge.plat{color:var(--muted);background:var(--panel-2);border:1px solid var(--border)}

/* pulsante icona info */
.iconbtn{flex:0 0 auto;height:var(--btn-h);min-width:var(--btn-h);border-radius:10px;border:1px solid var(--border);background:var(--panel);
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:all .12s ease}
.iconbtn:hover{color:#fff;border-color:var(--accent);background:rgba(var(--glow),.18)}
.iconbtn.active{color:#fff;background:var(--accent-grad);border-color:transparent}
.iconbtn svg{width:clamp(16px,1.25vw,20px);height:clamp(16px,1.25vw,20px);display:block}

/* link esterno (store/sito) nel rigo: solo icona (l'etichetta resta nel tooltip) finché il riquadro è stretto */
.extbtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:var(--btn-h);min-width:var(--btn-h);padding:0;
  font-size:clamp(12px,.95vw,16px);font-weight:700;color:#fff;text-decoration:none;border-radius:999px;
  background:var(--accent-grad);white-space:nowrap}
.extbtn:hover{filter:brightness(1.1)}
.extbtn svg{width:14px;height:14px;flex:0 0 auto}
.extbtn span{display:none}

/* barra pulsanti: Supporto + info + link esterni, TUTTI alti --btn-h.
   Riquadro stretto (telefono): Supporto a tutta larghezza e sotto gli altri pulsanti; riquadro largo: tutto su una riga */
.row-actions{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.supportbtn{flex:1 1 100%;min-width:0;height:var(--btn-h);display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:clamp(13.5px,1vw,17px);font-weight:800;letter-spacing:.2px;color:#10131b;cursor:pointer;
  padding:0 8px;border:1px solid rgba(255,255,255,.6);border-radius:10px;
  background:linear-gradient(180deg,#f3f5fa,#b4bbc8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 14px rgba(0,0,0,.38);
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
.supportbtn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.supportbtn:active{transform:translateY(0);filter:brightness(.97)}
.supportbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.supportbtn.active{box-shadow:0 0 0 2px var(--row-active),0 0 0 4px #e9ecf2,0 4px 14px rgba(0,0,0,.38)}
.supportbtn svg{width:clamp(16px,1.3vw,21px);height:clamp(16px,1.3vw,21px);flex:0 0 auto;display:block}
.supportbtn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-side{flex:1 1 100%;display:flex;align-items:center;gap:7px;min-width:0}
.act-side > *{flex:0 0 auto}
/* link al sito del prodotto (es. vDesk.node04.com): sempre con l'indirizzo scritto sopra, prende lo spazio che resta */
.extbtn.main{flex:1 1 0;min-width:var(--btn-h);padding:0 10px}
.extbtn.main span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;direction:ltr}
/* Pulsanti del rigo in base alla larghezza del riquadro a destra dell'immagine:
   sotto 250px due righe (Supporto a tutta larghezza, sotto link e info); da 250px tutto su una riga:
   Supporto stretto (38% della barra), a destra il link col suo indirizzo e infine l'info;
   etichetta breve («Assistenza») fino a 619px, intera da 620px; icona del Supporto solo da 500px; etichetta del link «sito ufficiale» da 500px */
.supportbtn .lbl-s{display:none}
@container card (min-width:250px){
  .supportbtn{flex:0 0 38%;padding:0 8px}
  .act-side{flex:1 1 0}
}
@container card (min-width:250px) and (max-width:619px){
  .supportbtn .lbl{display:none}
  .supportbtn .lbl-s{display:inline}
}
@container card (min-width:250px) and (max-width:339px){
  .supportbtn{flex-basis:36%;padding:0 6px;font-size:12.5px}
  .extbtn.main{padding:0 4px;font-size:11px}
  .extbtn.main svg{display:none}
}
@container card (min-width:500px){
  .supportbtn{padding:0 14px}
  .extbtn{padding:0 12px}
  .extbtn span{display:inline}
  .extbtn.main span{display:block}
}
@container card (min-width:250px) and (max-width:499px){ .supportbtn svg{display:none} }
@container card (max-width:204px){ .supportbtn svg{display:none} }
/* riquadro stretto a due righe (telefono): il link occupa la riga sotto il Supporto, senza freccia perché l'indirizzo stia tutto */
@container card (max-width:249px){ .extbtn.main{padding:0 6px;font-size:12.5px} .extbtn.main svg{display:none} }
@container card (max-width:170px){ .extbtn.main{font-size:11.5px} }
@container card (max-width:170px){ .supportbtn{font-size:12.5px;padding:0 4px} .card-mid .name{font-size:16px} }
/* riquadro stretto: i badge non ci stanno (categoria e piattaforma restano nella scheda Info) */
@container card (max-width:249px){ .card-top .badge{display:none} }

/* ===== Area contenuti sinistra (R_LB) — vista dettaglio ===== */
.lb-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.lb-head .lb-thumb{width:94px;height:62px;border-radius:8px;object-fit:contain;background:#0a0d14;border:1px solid var(--border)}
.lb-head h2{margin:0;font-size:clamp(22px,2vw,36px);font-weight:800}
.lb-head .sub{margin:3px 0 0;color:var(--muted);font-size:clamp(13px,1.05vw,17px)}

.tabs{display:flex;gap:8px;margin:2px 0 20px;flex-wrap:wrap}
.tab{font-size:clamp(12px,.95vw,16px);font-weight:700;color:var(--muted);background:var(--panel);border:1px solid var(--border);
  padding:7px 13px;border-radius:999px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;text-decoration:none}
.tab:hover{color:#fff;border-color:var(--accent)}
.tab.active{color:#fff;background:var(--accent-grad);border-color:transparent}
.tab svg{width:14px;height:14px}

/* sito ufficiale incorporato (iframe): riempie l'altezza residua della colonna sinistra */
#R_LB.mode-site{display:flex;flex-direction:column;overflow:hidden}
#R_LB.mode-site .lb-head,#R_LB.mode-site .tabs{flex:0 0 auto}
#R_LB.mode-site #R_LB_BODY{flex:1 1 auto;min-height:0;display:flex}
.site-frame{flex:1 1 auto;width:100%;height:100%;min-height:0;border:1px solid var(--border);border-radius:14px;background:#fff}

/* galleria screenshot — a tutta larghezza della colonna sinistra */
.gallery-main{width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--border);
  background:var(--panel-2);box-shadow:var(--shadow)}
.gallery-main{display:flex;justify-content:center;background:#0a0d14}
.gallery-main img{display:block;width:auto;height:auto;max-width:100%;max-height:56vh;object-fit:contain}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gallery-thumbs img{width:clamp(148px,12vw,210px);height:clamp(92px,7.5vw,132px);object-fit:contain;background:#0a0d14;border-radius:8px;border:1px solid var(--border);
  cursor:pointer;opacity:.6;transition:opacity .12s ease,border-color .12s ease}
.gallery-thumbs img:hover{opacity:1}
.gallery-thumbs img.sel{opacity:1;border-color:var(--accent)}

/* blocchi testo info/assistenza */
.prose{max-width:960px;line-height:1.6;color:#d6dae4;font-size:clamp(15px,1.15vw,20px)}
.prose h3{color:#fff;font-size:clamp(18px,1.4vw,24px);margin:22px 0 8px}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{margin:4px 0}
.prose a{color:var(--accent)}
.prose figure.shot{margin:4px 0 16px;max-width:760px}
.prose figure.shot img{display:block;width:100%;height:auto;max-height:min(520px,60vh);object-fit:contain;border-radius:10px;border:1px solid var(--border);background:var(--panel)}
.prose code{background:var(--panel);border:1px solid var(--border);padding:1px 6px;border-radius:5px;font-size:.82em}
.kv{display:grid;grid-template-columns:170px 1fr;gap:6px 14px;margin:10px 0 16px;font-size:clamp(14px,1.05vw,18px)}
.kv dt{color:var(--muted-2)}
.kv dd{margin:0;color:#dfe4ee}
.note{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent);
  padding:12px 14px;border-radius:8px;color:var(--muted);font-size:clamp(13px,1vw,16px);margin:14px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.chip{font-size:clamp(12px,.9vw,15px);color:#dfe3ea;background:rgba(var(--glow),.14);border:1px solid rgba(var(--glow),.32);
  padding:4px 10px;border-radius:999px}

/* form */
.form{max-width:620px}
.form .field{margin-bottom:14px}
.form label{display:block;font-size:clamp(12px,.95vw,15px);color:var(--muted);margin-bottom:6px;font-weight:600}
.form input,.form select,.form textarea{width:100%;background:var(--panel);border:1px solid var(--border);
  color:var(--text);border-radius:9px;padding:10px 12px;font-size:clamp(14px,1.05vw,17px);font-family:inherit}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--glow),.22)}
.form textarea{min-height:120px;resize:vertical}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:clamp(14px,1.05vw,17px);font-weight:700;color:#fff;cursor:pointer;
  border:none;background:var(--accent-grad);padding:11px 18px;border-radius:10px}
.btn:hover{filter:brightness(1.1)}
.btn svg{width:16px;height:16px}
.btn.ghost{background:var(--panel);border:1px solid var(--border);color:var(--text)}
.btn.primary{color:#10131b;font-weight:800;background:linear-gradient(180deg,#f3f5fa,#b4bbc8);border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 14px rgba(0,0,0,.38)}
.btn:disabled{opacity:.65;cursor:progress;filter:none}

/* ===== Modulo «Richiesta assistenza» (vista support) ===== */
.sform{max-width:clamp(560px,46vw,860px)}
.sform-title{margin:0 0 6px;font-size:clamp(20px,1.7vw,30px);font-weight:800;color:#fff}
.sform-intro{margin:0 0 22px;color:var(--muted);font-size:clamp(14px,1.1vw,18px);line-height:1.55}
.sform-intro strong{color:#e9ecf2}
.form .req{color:#ffb454;margin-left:2px}
.form .fopt{font-weight:400;color:var(--muted-2);margin-left:6px}
.form input.invalid,.form textarea.invalid{border-color:#e5645a;box-shadow:0 0 0 3px rgba(229,100,90,.18)}
.ferr{margin-top:6px;font-size:clamp(12.5px,.95vw,15px);color:#ff9d94}
.ferr:empty{display:none}
.sform textarea{min-height:clamp(140px,16vh,220px)}
.filepick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.form .file-input{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;overflow:hidden;pointer-events:none}
.fname{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dfe4ee;font-size:clamp(13px,1vw,16px)}
.fclear{width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fclear:hover{color:#fff;border-color:var(--accent)}
.fclear svg{width:14px;height:14px}
.fclear[hidden]{display:none}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.sform-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.sform-note{color:var(--muted-2);font-size:clamp(12.5px,.95vw,15px)}
.sform-status{margin-top:14px;font-size:clamp(13.5px,1.05vw,17px);line-height:1.5}
.sform-status:empty{display:none}
.sform-status.busy{color:var(--muted)}
.sform-status.err{color:#ffb3ab;background:rgba(229,100,90,.09);border:1px solid rgba(229,100,90,.4);border-radius:9px;padding:10px 12px}
.sdone{padding-top:6px}
.sdone-ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  color:#10131b;background:linear-gradient(180deg,#f3f5fa,#b4bbc8)}
.sdone-ic svg{width:30px;height:30px}

/* ===== Showcase a tutto riquadro (stato iniziale, rotazione 5s) ===== */
#R_LB.mode-showcase{padding:0;overflow:hidden}
.showcase{position:absolute;inset:0;overflow:hidden;background:#07090d;cursor:pointer}
.sc-stage{position:absolute;inset:0;z-index:1}
.sc-layer{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.sc-layer.show{opacity:1}
.sc-layer img,.sc-layer video{width:100%;height:100%;object-fit:contain;display:block}
.sc-layer img.portrait{object-fit:contain}
.sc-glow{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 40%,rgba(var(--glow),.20),transparent 70%)}
.sc-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(5,7,11,.88) 0%,rgba(5,7,11,.30) 40%,transparent 64%)}
.sc-date{position:absolute;top:18px;left:18px;z-index:3;font-size:clamp(12px,1vw,16px);font-weight:700;
  color:#eef1f6;background:rgba(9,11,16,.62);border:1px solid rgba(255,255,255,.14);
  padding:7px 13px;border-radius:999px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.sc-date.soon{color:#0b0d12;background:linear-gradient(135deg,#d7dbe2,#aeb4bf);border-color:transparent}
.sc-hint{position:absolute;top:18px;right:18px;z-index:3;font-size:clamp(11px,.9vw,15px);color:#aeb4bf;
  background:rgba(9,11,16,.5);padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.10)}
.sc-info{position:absolute;left:28px;right:28px;bottom:30px;z-index:3}
.sc-name{font-size:clamp(32px,3.4vw,60px);font-weight:800;letter-spacing:1px;color:#fff;line-height:1.05;
  text-shadow:0 2px 24px rgba(0,0,0,.55)}
.sc-tag{font-size:clamp(15px,1.4vw,24px);color:#d2d7e0;margin-top:6px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.sc-dots{position:absolute;right:22px;bottom:26px;z-index:4;display:flex;gap:8px}
.sc-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.32);border:none;cursor:pointer;padding:0;
  transition:all .2s ease}
.sc-dot.on{background:#eef1f6;width:24px;border-radius:5px}

/* scrollbar discreta */
#R_LB::-webkit-scrollbar,#R_RB::-webkit-scrollbar{width:10px}
#R_LB::-webkit-scrollbar-thumb,#R_RB::-webkit-scrollbar-thumb{background:#3a3f49;border-radius:6px}
#R_LB::-webkit-scrollbar-track,#R_RB::-webkit-scrollbar-track{background:transparent}

/* telefono (sotto 760px): vedi in fondo al file, «Versione telefono» */

/* ===== slide di testo nella showcase (sicurezza, rete, prestazioni, sistemi compatibili con le distro Linux) ===== */
.sc-layer.is-text{background:radial-gradient(900px 500px at 15% 0%,rgba(var(--glow),.18),transparent 65%),#0b0d12}
.sc-text{position:absolute;inset:0;padding:clamp(60px,9%,96px) clamp(28px,6%,72px) clamp(56px,9%,90px);display:flex;flex-direction:column;justify-content:center;gap:14px;overflow:hidden}
.sc-cat{font-size:clamp(12px,1vw,16px);letter-spacing:2.5px;text-transform:uppercase;color:#aeb4bf;font-weight:700}
.sc-text h3{margin:0;font-size:clamp(26px,3vw,54px);font-weight:800;line-height:1.1;color:#fff;letter-spacing:-.3px}
.sc-text ul{margin:6px 0 0;padding-left:1.1em;color:#d2d7e0;font-size:clamp(15px,1.45vw,25px);line-height:1.5;max-width:52ch}
.sc-text li{margin:.45em 0}
.sc-text li strong{color:#fff}
.sc-logos{display:flex;gap:16px;align-items:center}
.sc-logos img{height:clamp(40px,5vw,76px);width:auto;display:block}
.sc-text ul.sc-distros{list-style:none;padding:0;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 32px;font-size:clamp(13px,1.25vw,21px);line-height:1.3}
.sc-distros li{margin:0;display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.sc-distros span{color:#9aa1ad;white-space:nowrap}
/* slide "dense": più elenchi nella stessa slide (due blocchi affiancati, griglia delle distribuzioni) */
.sc-text.dense{padding-top:clamp(48px,6.5%,70px);padding-bottom:clamp(44px,6%,64px);gap:10px}
.sc-text.dense h3{font-size:clamp(24px,2.5vw,44px)}
.sc-text.dense ul{font-size:clamp(13px,1.15vw,20px);line-height:1.4;max-width:none}
.sc-text.dense li{margin:.3em 0}
.sc-text.dense .sc-logos img{height:clamp(30px,3.2vw,54px)}
.sc-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 36px}
.sc-groups h4{margin:0;font-size:clamp(12px,1vw,16px);letter-spacing:1.5px;text-transform:uppercase;color:#aeb4bf}
.sc-text.dense ul.sc-distros{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px;font-size:clamp(12px,1vw,17px);line-height:1.3}
.sc-text.dense .sc-distros li{padding:4px 0}
/* schermi stretti: slide dense più compatte, distribuzioni come elenco di nomi (le versioni restano nella pagina di vDesk) */
@media (max-width:1100px){
  .sc-text.dense ul.sc-distros{display:flex;flex-wrap:wrap;gap:2px 14px}
  .sc-text.dense .sc-distros li{padding:0;border:0}
  .sc-distros span{display:none}
}
/* nelle slide di testo il nome del prodotto in basso non serve: il titolo è già nella slide */
.showcase.text-slide .sc-info{display:none}

/* ===== Versione telefono (sotto 760px) =====
   Testata fissa = riquadro di sinistra: titolo col selettore lingua + contenuti (showcase, dettaglio, modulo assistenza).
   Corpo = colonna di destra: elenco dei prodotti, che scorre da solo sotto la testata.
   Un tocco su un rigo mostra i suoi contenuti nella testata: la pagina non si sposta mai. */
@media (max-width:760px){
  #R_ROOT{flex-direction:column;width:100%;height:100%;height:100dvh}

  /* testata fissa: circa metà schermo (mai meno di 380px, mai più del 64%) */
  #R_LC{flex:0 0 auto;width:100%;height:54vh;height:min(64dvh,max(380px,54dvh));border-right:0;border-bottom:1px solid var(--border);
        position:relative;z-index:5;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:height .22s ease}
  /* modulo assistenza aperto: la testata si allarga per mostrarlo quasi per intero (resta visibile l'inizio del rigo scelto) */
  #R_LC.tall{height:min(78vh,600px);height:min(78dvh,calc(100dvh - 170px),600px)}
  #R_LT{height:auto;min-height:0;max-height:none;gap:10px;padding:9px 150px 9px 14px;align-items:flex-start}
  #R_LT_LOGO{width:38px;height:38px;filter:drop-shadow(0 2px 6px rgba(var(--glow),.35))}
  #R_LT_TITLES{min-width:0}
  #R_LT_TITLE{font-size:25px;line-height:1.1}
  #R_LT_SUB{margin:2px 0 0;font-size:11px;line-height:1.25}
  #R_LB{padding:12px 16px 18px;overscroll-behavior:contain;overflow-x:hidden}

  /* selettore lingua: sempre in alto a destra, dentro la testata */
  #R_LANG{position:fixed;top:9px;right:12px;z-index:30}
  .lang-switch{padding:5px 6px 5px 10px}
  .lang-switch select{font-size:14px;max-width:96px;text-overflow:ellipsis}

  /* corpo: elenco scorrevole (barra sottile con il conteggio + righe) */
  #R_RC{flex:1 1 auto;width:100%;height:auto;min-height:0}
  #R_RT{height:auto;min-height:0;max-height:none;padding:6px 14px;justify-content:flex-start}
  #R_RT_TR{margin-left:0;flex-direction:row;align-items:center}
  #R_RT_COUNT{font-size:12px;padding:3px 10px}
  #R_RB{padding:10px 10px 18px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  :root{--btn-h:42px}            /* pulsanti del rigo: stessa altezza, comoda al tocco */
  .row{padding:9px;margin-bottom:10px}
  .row-main{gap:11px}
  .thumb{flex:0 0 42%;width:42%}   /* l'immagine resta 2:1; il resto del rigo è per testi e pulsanti */
  .card{gap:6px}
  .card-top{padding-right:96px}
  .card-mid{gap:3px}
  .card-mid .name{font-size:18px}
  .card-mid .desc{font-size:13px;line-height:1.35;min-height:2.7em;-webkit-line-clamp:2}

  /* showcase nella testata */
  .sc-date{top:9px;left:10px;font-size:11.5px;padding:4px 10px}
  .sc-hint{top:9px;right:10px;font-size:11px;padding:4px 9px}
  .sc-info{left:16px;right:16px;bottom:34px}
  .sc-name{font-size:26px}
  .sc-tag{font-size:14px;margin-top:3px}
  .sc-dots{left:0;right:0;bottom:13px;justify-content:center}
  .showcase.text-slide .sc-scrim{display:none}     /* la sfumatura serve al nome sulle immagini: sui testi scurirebbe le ultime righe */
  /* slide di testo: misure in em sulla base --k (app.js la riduce se la slide non sta nel riquadro, p.es. telefoni bassi) */
  .sc-text{font-size:calc(14px * var(--k,1));padding:42px 18px 34px;gap:.72em}
  .sc-cat{font-size:.79em;letter-spacing:.18em}
  .sc-text h3{font-size:1.57em}
  .sc-text ul{font-size:1em;line-height:1.4}
  .sc-logos img{height:2.43em}
  .sc-text.dense{padding:40px 16px 30px;gap:.57em}
  .sc-text.dense h3{font-size:1.43em}
  .sc-text.dense ul{font-size:.86em;line-height:1.3}
  .sc-text.dense li{margin:.25em 0}
  .sc-text.dense .sc-logos img{height:2em}
  .sc-groups{gap:.72em 1.14em}
  .sc-groups h4{font-size:.79em;letter-spacing:.09em}
  .sc-text.dense ul.sc-distros{font-size:.86em;line-height:1.3;gap:0 1em}
  .sc-text.compact .sc-distros{display:none}       /* schermo molto basso: restano loghi e punti principali */

  /* contenuti di dettaglio nella testata: compatti, tab su una sola riga scorrevole */
  .lb-head{gap:10px;margin-bottom:8px}
  .lb-head > div{min-width:0}
  .lb-head .lb-thumb{width:48px;height:32px;flex:0 0 auto}
  .lb-head h2{font-size:19px}
  .lb-head .sub{font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #R_LB.view-support .lb-head{display:none}      /* il titolo del modulo nomina già il prodotto */
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 12px;padding:0 16px 2px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;font-size:13px;padding:6px 12px}
  .gallery-main img{max-height:min(34dvh,260px)}
  .gallery-thumbs{flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:none}
  .gallery-thumbs::-webkit-scrollbar{display:none}
  .gallery-thumbs img{flex:0 0 auto;width:104px;height:64px}
  .prose{font-size:14.5px;line-height:1.55}
  .prose h3{font-size:17px;margin:16px 0 6px}
  .kv{grid-template-columns:92px 1fr;font-size:13.5px}
  .kv dd{min-width:0;overflow-wrap:anywhere}
  .prose code{white-space:normal;overflow-wrap:anywhere}

  /* modulo assistenza: 16px nei campi, altrimenti iOS ingrandisce la pagina al tocco */
  .sform{max-width:none}
  .sform-title{font-size:18px}
  .sform-intro{font-size:13.5px;margin-bottom:14px}
  .form input,.form select,.form textarea{font-size:16px}
  .sform textarea{min-height:92px}
}
/* schermi bassi: senza il sottotitolo del sito la testata guadagna una riga per i contenuti */
@media (max-width:760px) and (max-height:700px){
  #R_LT_SUB{display:none}
}
/* schermi molto stretti (320px): titolo un po' più piccolo e selettore lingua senza globo, così stanno sulla stessa riga */
@media (max-width:340px){
  .thumb{flex-basis:36%;width:36%}
  #R_LT{padding-right:116px}
  #R_LT_TITLE{font-size:21px}
  .lang-globe{display:none}
  .lang-switch{padding-left:4px}
  .lang-switch select{max-width:84px}
}

/* ===== Lingue da destra a sinistra (persiano) =====
   la griglia della pagina resta com'è (immagine a sinistra, colonne 60/40): cambia solo la direzione dei testi */
html[dir=rtl] #R_ROOT{direction:ltr}
html[dir=rtl] .card,html[dir=rtl] .prose,html[dir=rtl] .sform,html[dir=rtl] .sc-text,html[dir=rtl] .sc-info,
html[dir=rtl] .lb-head > div,html[dir=rtl] #R_LT_TITLES,html[dir=rtl] .kv,html[dir=rtl] .lang-switch select{direction:rtl}
html[dir=rtl] .prose ul,html[dir=rtl] .sc-text ul{padding-left:0;padding-right:1.1em}
html[dir=rtl] .prose ul{padding-right:20px}
html[dir=rtl] .sc-text ul.sc-distros{padding-right:0}