/* Smart Audio Plugins — foglio di stile condiviso */

:root{
  /* --- COLORE ---------------------------------------------------------
     Fondo caldo, non nero. L'ocra è l'unico accento: se compare due volte
     nella stessa schermata, una delle due è di troppo. */
  --bg:#191715;
  --surface:#211e1b;
  --raised:#2a2622;
  --cream:#f2ebdf;
  --dim:#a89d8d;
  --dimmer:#736a5f;
  --ochre:#d9a05b;
  --terra:#c8664a;
  --line:rgba(242,235,223,.09);
  --line-2:rgba(242,235,223,.14);
  --shadow:0 24px 64px rgba(0,0,0,.45);
  --shadow-sm:0 10px 30px rgba(0,0,0,.3);

  /* --- SCALA TIPOGRAFICA ----------------------------------------------
     Rapporto 1.25 (quarta maggiore) a partire da 17px. Ogni titolo del
     sito pesca da qui: niente più font-size scritti a mano nelle pagine. */
  /* Tarata a META' STRADA fra i due siti indicati, misurati il 1/8/2026:
     Audiopunks h2 40px/600 - corpo 18px su 32 di interlinea
     Soundtoys  h1 44px/700 - corpo 18px su 25,7
     Qui: titolo interno 44px, corpo 18px su 1,6. Il claim della home sale a
     56px, che e' la MEDIA dei titoli dei dieci siti misurati. */
  --t-xs:12px;      /* etichette mono */
  --t-s:14px;       /* meta, chip, footer */
  --t-base:18px;    /* corpo */
  --t-m:1.22rem;    /* sottotitoli di riquadro */
  --t-l:1.72rem;    /* titolo scheda prodotto */
  --t-xl:clamp(2rem,4.4vw,2.75rem);   /* h1 pagina interna - max 44px */
  --t-2xl:clamp(2.3rem,5.4vw,3.5rem); /* claim di apertura - max 56px */

  /* --- RITMO VERTICALE -------------------------------------------------
     Passo di 4px. Le spaziature del sito usano solo questi valori. */
  --s-1:6px;  --s-2:12px; --s-3:20px; --s-4:32px;
  --s-5:52px; --s-6:80px; --s-7:120px;

  --r-s:8px; --r-m:14px; --r-l:20px;
  --maxw:1140px;

  /* --- IMMAGINI --------------------------------------------------------
     Due formati soli, per tutto il sito:
       16/10  scheda prodotto (GUI del plugin)
       16/9   thumbnail video
     Qualsiasi immagine fuori da questi due va ritagliata prima di entrare. */
  --ar-product:16/10;
  --ar-video:16/9;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--cream);
  font-family:'Overpass',system-ui,sans-serif;
  font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:inherit;text-decoration:none}
main{flex:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}

h1,h2,h3{
  font-family:'Overpass',system-ui,sans-serif;font-weight:700;
  line-height:1.06;letter-spacing:-.018em;text-transform:none;
}
.lbl{
  font-family:'Overpass Mono',monospace;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;
}

/* ---------- NAV ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(25,23,21,.9);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:96px;gap:24px}
.logo{font-family:'Overpass',sans-serif;font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.02em;flex:0 0 auto;display:flex;align-items:center}
/* Il lockup del lancio e' 3000x749 (4:1). Si fissa l'ALTEZZA e la larghezza
   segue: resta nitido su retina e non si deforma mai. Piu' alto del lockup
   lineare perche' la scritta a mano "plugins" occupa la fascia superiore:
   sotto i 34px quella parola diventa illeggibile. */
.logo img{height:56px;width:auto;display:block}
.logo.foot img{height:40px}
@media(max-width:1000px){.logo img{height:48px}}
@media(max-width:860px){.logo img{height:44px}}
@media(max-width:560px){.logo img{height:38px}}
.logo em{font-style:normal;color:var(--ochre)}

.menu{display:flex;align-items:center;gap:32px;margin:0 auto}
.menu a{font-size:14.5px;font-weight:500;color:var(--dim);position:relative;padding:6px 0;transition:color .18s}
.menu a:hover,.menu a.on{color:var(--cream)}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ochre);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .22s;
}
.menu a:hover::after,.menu a.on::after{transform:scaleX(1)}
.menu a .soon,.mobile a .soon{
  font-family:'Overpass Mono',monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ochre);background:rgba(217,160,91,.14);
  border-radius:999px;padding:2px 7px;margin-left:7px;vertical-align:middle;
}

.util{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.icon-btn{
  background:transparent;border:0;cursor:pointer;color:var(--dim);
  width:38px;height:38px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,color .18s;position:relative;
}
.icon-btn:hover{background:var(--raised);color:var(--cream)}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.count{
  position:absolute;top:2px;right:2px;min-width:17px;height:17px;
  background:var(--ochre);color:#1a1613;border-radius:999px;
  font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.login{font-size:14.5px;color:var(--dim);transition:color .18s}
.login:hover{color:var(--cream)}
.burger{display:none}
@media(max-width:860px){.menu{display:none} .burger{display:flex}}
@media(max-width:560px){.login{display:none}}

/* --- solo in home: header trasparente sopra la foto --- */
body.home header{
  position:fixed;left:0;right:0;top:0;
  background:transparent;backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .28s,border-color .28s,backdrop-filter .28s;
}
body.home header.scrolled{
  background:rgba(25,23,21,.92);backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
body.home header .menu a{color:rgba(242,235,223,.82)}
body.home header .menu a:hover{color:var(--cream)}
/* l'altezza del banner la decide index.html sul rapporto della foto */

.searchbar{max-height:0;overflow:hidden;border-top:1px solid transparent;
  transition:max-height .28s ease,border-color .28s;background:var(--surface)}
.searchbar.open{max-height:96px;border-top-color:var(--line)}
.searchbar .inner{display:flex;gap:12px;padding:22px 0}
.searchbar input{
  flex:1;background:var(--bg);border:1px solid var(--line-2);border-radius:999px;
  padding:13px 22px;color:var(--cream);font-family:inherit;font-size:15px;outline:none;
}
.searchbar input:focus{border-color:var(--ochre)}
.searchbar input::placeholder{color:var(--dimmer)}

.mobile{display:none;border-top:1px solid var(--line);background:var(--surface);padding:16px 0 26px}
.mobile.open{display:block}
.mobile a{display:block;padding:13px 0;font-size:16px;color:var(--dim);border-bottom:1px solid var(--line)}
.mobile a:last-of-type{border-bottom:0}
.mobile a:hover{color:var(--cream)}

/* ---------- BOTTONI ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;border-radius:999px;padding:14px 30px;
  font-family:'Overpass',sans-serif;font-weight:600;font-size:15px;
  transition:filter .18s,transform .18s,background .18s;
}
.btn-solid{background:var(--ochre);color:#1a1613}
.btn-solid:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--raised)}

/* ---------- INTESTAZIONE PAGINA INTERNA ---------- */
.phead{padding:var(--s-6) 0 var(--s-5);border-bottom:1px solid var(--line);margin-bottom:var(--s-6)}
.phead .lbl{color:var(--ochre);display:block;margin-bottom:var(--s-3)}
.phead h1{font-size:var(--t-xl);margin-bottom:var(--s-3)}
.phead p{color:var(--dim);max-width:60ch}

/* ---------- SCHEDE PRODOTTO ---------- */
.cards{display:grid;gap:20px;padding-bottom:90px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-sm);overflow:hidden;
  display:grid;grid-template-columns:1.25fr 1fr;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow)}
@media(max-width:860px){.card{grid-template-columns:1fr}}
/* Riquadro immagine: rapporto fisso 16/10, così le schede restano
   allineate anche quando i testi hanno lunghezze diverse. L'immagine
   vera entra come <img> e riempie il riquadro senza deformarsi. */
.card .shot{
  position:relative;aspect-ratio:var(--ar-product);
  background:linear-gradient(150deg,#332c25,#221e1b);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:var(--s-4);border-right:1px solid var(--line);
  overflow:hidden;
}
.card .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){.card .shot{border-right:0;border-bottom:1px solid var(--line)}}
.card .shot p{font-family:'Overpass Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);line-height:2.1}
/* mirino d'angolo: rende il vuoto una scelta, non una dimenticanza */
.card .shot::before,.card .shot::after{
  content:"";position:absolute;width:18px;height:18px;border:1px solid var(--line-2);
}
.card .shot::before{top:14px;left:14px;border-right:0;border-bottom:0}
.card .shot::after{bottom:14px;right:14px;border-left:0;border-top:0}
.card .shot:has(img)::before,.card .shot:has(img)::after{display:none}

.card .body{padding:var(--s-5) var(--s-4)}
.card h3{font-size:var(--t-l);margin-bottom:var(--s-1)}
.card .kind{color:var(--ochre);font-size:var(--t-s);margin-bottom:var(--s-3)}
.card p.txt{color:var(--dim);font-size:.97rem;margin-bottom:var(--s-3)}
.card.soon{opacity:.85}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.chip{
  font-family:'Overpass Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);background:var(--raised);border-radius:999px;padding:6px 13px;
}
.priceline{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.priceline .p{font-family:'Overpass',sans-serif;font-weight:700;font-size:1.95rem;letter-spacing:-.02em}
.priceline s{color:var(--dimmer);font-size:1rem}
.priceline .meta{color:var(--dimmer);font-size:13px;margin-left:auto}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.acts .btn{padding:11px 24px;font-size:14.5px}

/* ---------- STATO VUOTO ---------- */
.empty{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow);padding:70px 44px;text-align:center;margin-bottom:90px;
}
.empty .ic{
  width:64px;height:64px;border-radius:999px;background:var(--raised);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px;
}
.empty .ic svg{width:26px;height:26px;stroke:var(--ochre);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.empty h2{font-size:1.9rem;margin-bottom:14px}
.empty p{color:var(--dim);max-width:52ch;margin:0 auto 26px}

/* ---------- GRIGLIE GENERICHE ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding-bottom:90px}
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,border-color .2s,box-shadow .2s;
}
.tile:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow)}
.tile .thumb{
  aspect-ratio:16/9;background:linear-gradient(150deg,#332c25,#221e1b);
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);
  position:relative;
}
.tile .thumb p{font-family:'Overpass Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);text-align:center;line-height:2}
.tile .play{
  position:absolute;width:52px;height:52px;border-radius:999px;
  background:rgba(217,160,91,.9);display:flex;align-items:center;justify-content:center;
}
.tile .play svg{width:20px;height:20px;fill:#1a1613;stroke:none;margin-left:3px}
.tile .cap{padding:22px}
.tile h3{font-size:1.15rem;margin-bottom:6px}
.tile p.sub{color:var(--dim);font-size:.9rem}

/* ---------- SUPPORT ---------- */
.support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:56px}
.box{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:30px;box-shadow:var(--shadow-sm);
}
.box h3{font-size:1.25rem;margin-bottom:10px}
.box p{color:var(--dim);font-size:.95rem;margin-bottom:18px}
.dl-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.dl-row:last-child{border-bottom:0}
.dl-row .name{font-weight:500}
.dl-row .os{font-family:'Overpass Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dimmer)}

/* FAQ a due colonne, come Audiopunks */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-bottom:80px}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr;gap:0}}
.faq-grid details{border-top:1px solid var(--line);border-bottom:0}
.faq-grid details:last-child{border-bottom:1px solid var(--line)}
@media(min-width:861px){
  .faq-grid details:nth-child(6){border-bottom:1px solid var(--line)}
}

/* modulo contatto */
.ask{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
  padding:52px 44px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--shadow);margin-bottom:90px;
}
@media(max-width:860px){.ask{grid-template-columns:1fr;gap:28px;padding:34px 26px}}
.ask h2{font-size:clamp(1.9rem,4.4vw,2.8rem);margin-bottom:14px}
.ask p{color:var(--dim);font-size:.97rem}
.ask form{display:flex;flex-direction:column;gap:12px}
.ask input,.ask textarea{
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:14px 20px;color:var(--cream);font-family:inherit;font-size:15px;
  outline:none;transition:border-color .18s;width:100%;
}
.ask textarea{min-height:130px;resize:vertical}
.ask input:focus,.ask textarea:focus{border-color:var(--ochre)}
.ask input::placeholder,.ask textarea::placeholder{color:var(--dimmer)}
.ask .btn{align-self:flex-start;margin-top:4px}
.ask .formnote{font-family:'Overpass Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--ochre);min-height:16px}

details{border-bottom:1px solid var(--line);padding:20px 0}
details summary{
  cursor:pointer;font-weight:500;font-size:1.03rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--ochre);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--dim);font-size:.95rem;margin-top:12px;max-width:70ch}

/* ---------- ACCESSIBILITÀ ----------
   Prima c'era outline:none sui campi con il solo bordo a cambiare colore:
   chi naviga da tastiera non vedeva dove si trovava. Anello visibile su
   tutto ciò che prende fuoco, ma solo da tastiera. */
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ochre);
  outline-offset:3px;
  border-radius:var(--r-s);
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 44px;background:var(--surface)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid h5{font-family:'Overpass Mono',monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dimmer);margin-bottom:15px}
.fgrid a{display:block;font-size:14.5px;color:var(--dim);margin-bottom:10px;transition:color .18s}
.fgrid a:hover{color:var(--cream)}
.fgrid p{font-size:14px;color:var(--dim)}
.social{display:flex;gap:10px;margin-top:20px}
.social a{
  width:38px;height:38px;border-radius:999px;background:var(--raised);
  display:flex;align-items:center;justify-content:center;color:var(--dim);
  margin:0;transition:background .18s,color .18s;
}
.social a:hover{background:var(--ochre);color:#1a1613}
.social svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.foot-form input{
  width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:999px;
  padding:12px 20px;color:var(--cream);font-family:inherit;font-size:14px;outline:none;transition:border-color .18s;
}
.foot-form input:focus{border-color:var(--ochre)}
.foot-form input::placeholder{color:var(--dimmer)}
.foot-bot{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:13px;color:var(--dimmer);
}


/* ==========================================================================
   GRIGLIA PRODOTTI  —  via di mezzo fra Audiopunks e Soundtoys
   Audiopunks: schede meta' immagine, elenco.  Soundtoys: le GUI in evidenza,
   otto immagini in home.  Qui: quadrati popolati dalla GUI, il testo sotto,
   tutta la piastrella e' un link alla sottopagina del prodotto.
   ========================================================================== */
.pgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:22px;padding-bottom:var(--s-6);
}
.ptile{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.ptile:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}
.ptile .shot{
  position:relative;aspect-ratio:var(--ar-product);overflow:hidden;
  background:linear-gradient(150deg,#332c25,#221e1b);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.ptile .shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(1.08);transition:transform .5s ease,filter .3s}
.ptile:hover .shot img{transform:scale(1.035)}
.ptile .shot .vuoto{
  font-family:'Overpass Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);text-align:center;line-height:2;padding:20px;
}
.ptile .shot::after{
  content:"";position:absolute;inset:0;
  background:none;
  pointer-events:none;
}
.ptile .flag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:'Overpass Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:rgba(25,23,21,.82);backdrop-filter:blur(6px);color:var(--cream);
}
.ptile .flag.sale{background:var(--ochre);color:#1a1613}
.ptile .flag.free{background:rgba(158,201,122,.92);color:#12210a}
.ptile .cap{padding:24px 24px 26px}
.ptile h3{font-size:var(--t-l);margin-bottom:4px}
.ptile .kind{color:var(--ochre);font-size:var(--t-s);margin-bottom:12px}
.ptile .txt{color:var(--dim);font-size:15px;line-height:1.55;margin-bottom:18px}
.ptile .foot{display:flex;align-items:baseline;gap:10px;
  border-top:1px solid var(--line);padding-top:16px}
.ptile .p{font-weight:700;font-size:1.4rem;letter-spacing:-.02em}
.ptile .was{color:var(--dimmer);font-size:14px;text-decoration:line-through}
.ptile .more{margin-left:auto;color:var(--ochre);font-size:14px;font-weight:600}
.ptile:hover .more{text-decoration:underline}
.ptile.soon{opacity:.86}
.ptile.soon .p{color:var(--dim)}

/* ==========================================================================
   SOTTOPAGINA PRODOTTO
   ========================================================================== */
.hero{padding:var(--s-6) 0 var(--s-5)}
.hero .back{font-family:'Overpass Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);display:inline-block;margin-bottom:var(--s-4)}
.hero .back:hover{color:var(--ochre)}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s-5);align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--s-4)}}
.hero .big{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:linear-gradient(150deg,#332c25,#221e1b)}
.hero .big img{width:100%;display:block}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.gal img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-s);
  border:1px solid var(--line);cursor:pointer;transition:border-color .2s,opacity .2s}
.gal img:hover{border-color:var(--ochre)}
.hero h1{font-size:var(--t-xl);margin-bottom:var(--s-2)}
.hero .kicker{color:var(--ochre);display:block;margin-bottom:var(--s-3)}
.hero .sub{color:var(--dim);margin-bottom:var(--s-4)}
.buybox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:var(--s-4);box-shadow:var(--shadow-sm)}
.buybox .row{display:flex;align-items:baseline;gap:12px;margin-bottom:var(--s-3)}
.buybox .p{font-weight:700;font-size:2.4rem;letter-spacing:-.03em;line-height:1}
.buybox .was{color:var(--dimmer);text-decoration:line-through;font-size:1.05rem}
.buybox .tagoff{font-family:'Overpass Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ochre);color:#1a1613;padding:4px 10px;border-radius:999px}
.buybox .acts{display:flex;flex-direction:column;gap:10px}
.buybox .btn{width:100%}
.buybox .note{color:var(--dimmer);font-size:13px;margin-top:var(--s-3);text-align:center}

.sec{padding:var(--s-6) 0;border-top:1px solid var(--line)}
.sec > .lbl{color:var(--ochre);display:block;margin-bottom:var(--s-3)}
.sec h2{font-size:var(--t-xl);margin-bottom:var(--s-3);max-width:20ch}
.sec .intro{color:var(--dim);max-width:68ch;margin-bottom:var(--s-5)}
.sec p + p{margin-top:var(--s-3)}
.prose{color:var(--dim);max-width:68ch}
.prose p + p{margin-top:var(--s-3)}

/* i moduli, uno sotto l'altro con la loro immagine */
.mods{display:grid;gap:var(--s-4)}
.mod{display:grid;grid-template-columns:300px 1fr;gap:var(--s-4);align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s-4);}
@media(max-width:820px){.mod{grid-template-columns:1fr}}
.mod img{width:100%;border-radius:var(--r-s);display:block;background:var(--raised)}
.mod .n{font-family:'Overpass Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ochre);display:block;margin-bottom:6px}
.mod h3{font-size:1.3rem;margin-bottom:6px}
.mod .claim2{color:var(--cream);font-size:15px;margin-bottom:10px;font-style:italic;opacity:.9}
.mod p{color:var(--dim);font-size:15px;line-height:1.6}

/* liste tecniche a due colonne */
.speclist{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-5)}
@media(max-width:760px){.speclist{grid-template-columns:1fr}}
.speclist li{list-style:none;color:var(--dim);font-size:15px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.speclist li b{color:var(--cream);font-weight:600}
.legal{color:var(--dimmer);font-size:13px;margin-top:var(--s-3);max-width:80ch}


/* ==========================================================================
   SHORTS VERTICALI  —  9:16
   La miniatura vera dello Short e' oardefault.jpg (1080x1920, misurata):
   hqdefault sarebbe un ritaglio 16:9 e taglierebbe meta' inquadratura.
   L'iframe di YouTube non si carica finche' non si clicca: la pagina resta
   leggera e non parte nessun cookie di YouTube prima del consenso.
   ========================================================================== */
.shorts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:22px;padding-bottom:var(--s-6)}
.short{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .22s,border-color .22s,box-shadow .22s}
.short:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}
.short .frame{position:relative;aspect-ratio:9/16;background:#100e0d;cursor:pointer;overflow:hidden}
.short .frame img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(1.1) saturate(1.05);transition:transform .5s,filter .3s}
.short:hover .frame img{transform:scale(1.03);filter:brightness(1.22) saturate(1.08)}
.short .frame iframe,.short .frame .yt{position:absolute;inset:0;width:100%;height:100%;border:0}
/* il player e' gia' li' sotto, pronto: sopra c'e' la copertina.
   Al clic la copertina sparisce e si vede il video che sta gia' partendo. */
.short .frame img,.short .frame .tag,.short .frame .play{z-index:2}
.short .frame img{transition:opacity .25s,transform .5s,filter .3s}
.short .frame.acceso img,
.short .frame.acceso .play,
.short .frame.acceso .tag{opacity:0;pointer-events:none;transition:opacity .2s}
.short .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:999px;background:rgba(217,160,91,.94);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  transition:transform .22s;box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.short:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.short .play svg{width:22px;height:22px;fill:#1a1613;margin-left:3px}
.short .tag{position:absolute;top:12px;left:12px;font-family:'Overpass Mono',monospace;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;
  border-radius:999px;background:rgba(25,23,21,.82);backdrop-filter:blur(6px);color:var(--cream)}
.short .cap{padding:18px 20px 20px}
.short h3{font-size:1.05rem;margin-bottom:5px;line-height:1.25}
.short .sub{color:var(--dim);font-size:13.5px}
.short .sub a{color:var(--ochre)}


/* ==========================================================================
   SOUND EXAMPLES  —  confronto A/B
   Un solo <audio> per tutta la pagina: e' l'unico modo per essere certi che
   due esempi non suonino insieme. Cambiando versione la posizione resta.
   ========================================================================== */
.snds{display:grid;gap:0;border-top:1px solid var(--line)}
.snd{
  display:grid;grid-template-columns:1fr auto auto 200px 48px;
  align-items:center;gap:var(--s-3);
  padding:var(--s-3) 0;border-bottom:1px solid var(--line);
}
@media(max-width:900px){
  .snd{grid-template-columns:1fr auto;grid-template-areas:"nome ab" "play barra";gap:12px var(--s-3)}
  .snd-name{grid-area:nome}.snd-ab{grid-area:ab}.snd-play{grid-area:play}
  .snd-bar{grid-area:barra}.snd-t{display:none}
}
.snd-name{font-weight:600;font-size:15.5px}
.snd-name .cred{display:block;color:var(--dimmer);font-size:12.5px;font-weight:400;margin-top:2px}
.snd-ab{display:inline-flex;background:var(--raised);border-radius:999px;padding:3px}
.ab{
  border:0;background:transparent;cursor:pointer;color:var(--dim);
  font-family:'Overpass Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 15px;border-radius:999px;transition:background .18s,color .18s;
}
.ab:hover{color:var(--cream)}
.ab.on{background:var(--ochre);color:#1a1613}
.snd-play{
  width:44px;height:44px;border-radius:999px;border:1px solid var(--line-2);
  background:transparent;color:var(--cream);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s;
}
.snd-play:hover{background:var(--raised);border-color:var(--ochre)}
.snd-play svg{width:17px;height:17px;fill:currentColor}
.snd-play .i-pause{display:none}
.snd.playing .snd-play{background:var(--ochre);border-color:var(--ochre);color:#1a1613}
.snd.playing .snd-play .i-play{display:none}
.snd.playing .snd-play .i-pause{display:block}
.snd-bar{height:4px;background:var(--raised);border-radius:999px;cursor:pointer;position:relative}
.snd-bar span{display:block;height:100%;width:0;background:var(--ochre);border-radius:999px;transition:width .12s linear}
.snd-t{font-family:'Overpass Mono',monospace;font-size:12px;color:var(--dimmer);text-align:right}

.snd.ko{opacity:.45}
.snd.ko .snd-play{border-color:var(--terra);color:var(--terra);cursor:not-allowed}


/* Bundles e live: pillola soon spenta ovunque */
.menu .soon,.mobile .soon{display:none}


/* ===== LINEARE ===== */
.ptile, .card, .tile { background:none; border:0; border-radius:0; box-shadow:none; }
.ptile:hover, .card:hover, .tile:hover { transform:none; border-color:transparent; box-shadow:none; }
.ptile .shot, .card .shot, .tile .thumb { background:none; border:0; border-radius:0; }
.card .shot::before, .card .shot::after, .ptile .shot::after { content:none; }
.ptile .shot img, .card .shot img { filter:none; }
.ptile:hover .shot img { transform:none; }
.ptile .cap, .card .cap, .tile .cap { padding:16px 0 0; }
.ptile .foot, .card .foot { border-top:0; padding-top:0; margin-top:14px; }
.ptile .flag { border-radius:0; backdrop-filter:none; }
.ptile:hover h3, .card:hover h3 { color:var(--ochre); }
.hero .big { background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
.gal img { border:0; border-radius:0; opacity:.72; transition:opacity .2s; }
.gal img:hover { border-color:transparent; opacity:1; }
.buybox { background:none; border:0; border-radius:0; box-shadow:none; padding:0; }
.buybox .tagoff { border-radius:0; }
.box { background:none; border:0; border-left:2px solid var(--ochre); border-radius:0; box-shadow:none; padding:4px 0 4px 22px; }

/* fondo dietro le miniature */
.ptile .shot img, .card .shot img { background:none !important; padding:0 !important; }

/* blocchi .mod senza riquadro */
.mod { background:none; border:0; border-radius:0; padding:0; gap:var(--s-4); }
.mods { gap:var(--s-5); }
.mod img { border-radius:0; background:none; }
.gal img { background:none !important; padding:0 !important; border-radius:0 !important; }

/* proporzioni immagini moduli */
.mod img { width:auto; max-width:100%; max-height:230px; }
.mod { align-items:start; }

/* zona voci dei clienti */
.voices{padding:var(--s-6) 30px var(--s-7);border-top:1px solid var(--line)}
.voices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-4)}
.voices figure{margin:0}
.voices blockquote{margin:0 0 20px;color:var(--cream);font-size:16.5px;line-height:1.62}
.voices blockquote:before{content:'\201C';display:block;color:var(--ochre);font-size:54px;line-height:.7;margin-bottom:10px;font-weight:700}
.voices figcaption{border-top:1px solid var(--line);padding-top:14px}
.voices figcaption b{display:block;color:var(--ochre);font-size:15px;font-weight:600;margin-bottom:2px}
.voices figcaption span{color:var(--dim);font-size:13.5px}
@media(max-width:820px){.voices-grid{grid-template-columns:1fr;gap:var(--s-4)}}