/* ============================================================================
   LA SCHEDA PRODOTTO — Telaio · SartorAI · HelixOS · INVEX.
   ⭐⭐ ESISTE PERCHÉ LE STESSE QUATTRO SCHEDE STANNO IN DUE PAGINE: la home e
   servizi/software.html. Prima erano due impaginazioni diverse che si somigliavano
   — `.work` di là, `.pr` di qua — e infatti divergevano: nella home il riquadro di
   INVEX cresceva di 82px in altezza, l'ordine era un altro e SartorAI risultava
   «in arrivo» mentre era già online. Non erano tre difetti: era lo stesso difetto,
   cioè la copia.
   ⛔ SE SERVE CAMBIARE UNA SCHEDA, SI CAMBIA QUI. Chi rimette regole `.pr` dentro
   una pagina rimette anche il problema. Le due pagine differiscono solo per il
   percorso delle immagini, che sta nell'HTML, non qui.
   ============================================================================ */

/* ---- LE SCHEDE PRODOTTO, con posto per la schermata ---- */
.prodotti{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px;text-align:left}
@media(max-width:860px){.prodotti{grid-template-columns:1fr}}
.pr{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;position:relative}
.pr::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--c);z-index:2}
.pr img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.pr .txt{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.pr .hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pr .hd b{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:var(--ink-bright)}
.pr .hd .st{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--c);padding:4px 9px;border-radius:6px;
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);
  background:color-mix(in srgb,var(--c) 13%,transparent)}
.pr p{font-size:.94rem;color:var(--ink-soft);line-height:1.58;flex:1}
/* ⭐ ogni azione porta il colore del SUO prodotto, «Vai a» e «Maggiori info» allo stesso
   modo: due schede accanto non devono avere la riga finale di due colori diversi. */
.pr .vai{font-size:13.4px;font-weight:600;color:var(--c);text-decoration:none;margin-top:14px}
.pr .vai:hover{color:var(--ink-bright)}

/* ---- i marchi dentro le schede prodotto ----
   ⚠️ SartorAI: si usa `wordmark-dark.svg`, che è l'inchiostro CHIARO (#F0EBE0) — «dark»
   nel nome vuol dire «per la modalità scura», non «marchio scuro». Preso quello sbagliato,
   sparisce sul nero e nessun errore lo dice. Verificato leggendo i colori nel file. */
.pr .hd .marchio{width:22px;height:22px;flex:none;display:block;object-fit:contain}
/* il riquadro che ospita il marchio quando non c'è ancora una schermata vera */
.pr .ph{aspect-ratio:16/10;display:grid;place-items:center;padding:26px;
  background:linear-gradient(160deg,var(--panel-solid),var(--bg2));
  border-bottom:1px solid var(--line)}
/* ⛔ non `width` + `height:auto`: un SVG col solo viewBox non ha dimensioni proprie, quindi
   `auto` non ha da cosa calcolare e il marchio esce dal riquadro tagliato. Con due MASSIMI e
   `object-fit:contain` ogni marchio ci sta dentro qualunque proporzione abbia — e i tre ne
   hanno tre diverse: 4,2:1 il wordmark, 2,4:1 HelixOS, 1:1 l'icona INVEX. */
.pr .ph .grande{max-width:78%;max-height:58%;width:auto;height:auto;
  /* ⛔⛔ `aspect-ratio:auto` NON è ridondante. La regola più larga `.pr img` impone
     16/10 alle schermate vere, e senza annullarlo qui il marchio veniva schiacciato in
     quel rapporto: il wordmark è 4,2:1 e usciva reso a 1,6:1. Una proprietà messa da una
     regola larga e non tolta da quella stretta è il difetto che non si vede leggendo. */
  aspect-ratio:auto;object-fit:contain;display:block;opacity:.92}
.pr .ph .app{width:84px;height:84px;border-radius:18px;display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
/* il payoff del prodotto: sussurrato sotto il nome, non una seconda firma */
.pr .pay{font-size:.9rem;color:var(--c);font-weight:600;margin:-4px 0 10px;flex:none}