/* ==========================================================================
   SQUADRA  (sezioni/sq.css)
   ==========================================================================
   Tre strati che diventano un piano. All'ingresso le tre schede sono una
   pila isometrica (CSS 3D sui riquadri <article>, mai sul loro interno):
   lo studio in cima, i due colleghi sotto. Mentre il capitolo sale la pila
   si stende nella griglia piana; quando atterra un solo riquadro di
   selezione abbraccia le tre schede: tre specialisti, un solo interlocutore.

   Le citazioni dei colleghi (.collega-vetrina e tutto il loro interno) sono
   le regole di stile.css, spostate identiche (righe 599-606, 614-625 e
   632-749): la rotazione e' del riquadro, mai del contenuto.

   Senza JS, con movimento ridotto, in modalita' leggera: griglia piana.
   ========================================================================== */
/* impeccable-disable overused-font -- Plus Jakarta Sans e' il carattere del sito citato (genesyslabs.online), nelle regole spostate identiche */

.sq { --strato: var(--bm-bordo); }

/* ---------- Testata ---------- */
.sq .sq-testa { display: flex; flex-direction: column; gap: var(--s-5); margin-block-end: var(--s-8); }
.sq .sq-lead { max-inline-size: 48ch; }
.sq .sq-lead strong { color: var(--c-ink); }

/* ---------- Il piano: le tre schede in piano ---------- */
.sq .sq-piano {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  --sel-scarto: 14px;
}
@media (min-width: 641px) {
  .sq .sq-piano { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sq .sq-piano .collega-studio { grid-column: 1 / -1; }
}

/* La scheda: uno strato chiaro sul foglio. La citazione scura sta a filo
   dei bordi, come una schermata posata sopra. Specificita' una classe sola
   e prima delle regole spostate: la media query a 900 px le deve battere. */
.collega {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: var(--r-3);
  background: var(--c-superficie);
  box-shadow: var(--o-strato);
  overflow: hidden;
  transition: box-shadow var(--d-500) var(--e-uscita);
}
.collega-studio { grid-column: 1 / -1; flex-direction: row; }

/* ---------- Le citazioni: da stile.css, identiche ---------- */
.collega-studio .collega-vetrina {
  flex: 1.15 1 0;
  height: auto;
  min-height: 340px;
  padding: var(--u6) var(--u4);
  border-bottom: 0;
  border-right: 1px solid var(--filo);
}

@media (max-width: 900px) {
  .collega-studio { flex-direction: column; }
  .collega-studio .collega-vetrina {
    /* in colonna la proporzione della riga le toglierebbe l'altezza */
    flex: none;
    min-height: 0;
    padding: var(--u4) var(--u3);
    border-right: 0;
    border-bottom: 1px solid var(--filo);
  }
  .collega-studio .collega-corpo { flex: none; padding: var(--u3); }
}

.collega-vetrina {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  height: 176px;
  padding: var(--u3);
  border-bottom: 1px solid var(--filo);
  overflow: hidden;
}

/* kevincorbetto.it — fondo caldo, grazie, arancio bruciato */
.vetrina-kevin { background: #1E1B18; font-family: Georgia, 'Times New Roman', serif; }
.kv-nome { font-size: 27px; line-height: 1.08; color: #ECE6DC; }
.kv-riga { font-size: 13.5px; line-height: 1.5; color: #C3B9AA; }
.kv-link { font-size: 12.5px; color: #E8976A; }

/* genesyslabs.online — la prima schermata: cielo stellato verde notte,
   marchio, titolo con il tratto di smeraldo e la scheda tecnica. Colori,
   pesi e spaziature sono i loro (style.css: #060b08, #10b981, #34d399). */
.vetrina-studio {
  position: relative;
  justify-content: center;
  gap: 18px;
  background:
    linear-gradient(100deg, rgba(6, 11, 8, 0.92) 0%, rgba(6, 11, 8, 0.55) 60%, rgba(6, 11, 8, 0.8) 100%),
    url("genesys-cielo.webp") center / cover no-repeat,
    #060B08;
  font-family: 'Plus Jakarta Sans', var(--font-sans, sans-serif);
  color: #F2F7F4;
}
.gl-marchio { display: flex; align-items: center; gap: 11px; }
.gl-simbolo {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  background: #000;
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 8px;
}
.gl-simbolo img { width: 21px; height: 24px; object-fit: contain; }
.gl-nome b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; color: #FFFFFF; }
.gl-nome small {
  display: block;
  margin-top: 4px;
  font-family: 'Space Mono', var(--font-mono), monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #10B981;
}
.gl-titolo {
  font-size: clamp(28px, 3.1vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #FFFFFF;
}
.gl-titolo span {
  display: inline-block;
  padding-bottom: 4px;
  background: linear-gradient(#10B981, #10B981) left bottom / 100% 4px no-repeat;
}
.gl-scheda {
  display: grid;
  max-width: 460px;
  border: 1px solid rgba(74, 222, 128, 0.14);
  border-radius: 10px;
  background: rgba(12, 20, 16, 0.72);
}
.gl-scheda > div {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 12px;
  padding: 8px 13px;
  border-top: 1px solid rgba(74, 222, 128, 0.09);
  font-size: 12px;
  line-height: 1.4;
}
.gl-scheda > div:first-child { border-top: 0; }
.gl-scheda dt {
  font-family: 'Space Mono', var(--font-mono), monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8FA89B;
  padding-top: 2px;
}
.gl-scheda dd { color: #C4D7CD; }
.gl-scheda dd b { font-weight: 700; color: #FFFFFF; }
/* Sul telefono l'etichetta va sopra il valore: affiancati, il valore
   restava in una colonna di pochi centimetri. */
@media (max-width: 640px) {
  .gl-scheda > div { grid-template-columns: 1fr; gap: 2px; }
}

/* salvatoredelmoro.it — il terminale interattivo, viola su carbone */
.vetrina-salvatore { background: #121212; }
.sd-barra {
  margin-bottom: 3px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(250, 250, 250, 0.1);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9A9AA3;
}
.sd-riga { display: flex; align-items: center; font-family: var(--font-mono); font-size: 12.5px; color: #FAFAFA; }
/* Il viola del loro sito e' #7C3AED: sul carbone sta a 3,29:1, sotto la
   soglia per un testo di questa misura. Qui e' schiarito fino a 6,88:1. */
.sd-utente { color: #A78BFA; }
/* Fermo di proposito: un cursore che lampeggia all'infinito dentro una
   figurina larga tre centimetri e' solo movimento che chiede attenzione. */
.sd-cursore { width: 7px; height: 15px; margin-left: 7px; background: #A78BFA; }
.sd-comandi { font-family: var(--font-mono); font-size: 11.5px; color: #9E9EA8; }

/* ---------- Il corpo ---------- */


/* Unico adattamento alle regole spostate: l'immagine del cielo e' scritta
   relativa a stile.css (radice del sito); da sezioni/ il percorso sale di
   una cartella. Stessa dichiarazione, stesso file, stesso risultato. */
.vetrina-studio {
  background:
    linear-gradient(100deg, rgba(6, 11, 8, 0.92) 0%, rgba(6, 11, 8, 0.55) 60%, rgba(6, 11, 8, 0.8) 100%),
    url("../genesys-cielo.webp") center / cover no-repeat,
    #060B08;
}

/* ---------- Il corpo della scheda ---------- */
#squadra .collega-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1;
  padding: var(--s-5);
}
#squadra .collega-studio .collega-corpo { flex: 1 1 0; justify-content: center; padding: var(--s-7) var(--s-6); }
#squadra .collega-nome { display: flex; flex-direction: column; gap: var(--s-1); }
#squadra .collega-nome h3 { color: var(--c-ink); font-size: var(--t-4); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
#squadra .collega-studio .collega-nome h3 { font-size: var(--t-5); line-height: var(--lh-display); letter-spacing: -0.035em; }
#squadra .collega-ruolo {
  --mono: 1;
  font-size: var(--t-etichetta);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-transform: none;
  color: var(--c-ink-3);
}
#squadra .collega-corpo > p { font-size: var(--t-1); line-height: 1.6; color: var(--c-ink-2); }
#squadra .collega-corpo > p strong { color: var(--c-ink); }
#squadra .collega-link { align-self: flex-start; margin-top: auto; border: 0; letter-spacing: 0; font-size: var(--t-1); }
#squadra .collega-studio .collega-link { margin-top: var(--s-2); }
@media (max-width: 900px) {
  #squadra .collega-studio .collega-corpo { flex: none; padding: var(--s-5); }
}
@media (hover: hover) {
  .sq .sq-piano:not(.sq-vivo) .collega:hover { box-shadow: var(--o-strato-alto); }
}

/* ---------- La pila isometrica ---------- */
/* Le schede stanno ferme nel loro posto: sq.js scrive per ognuna lo
   spostamento verso il centro della pila (--sq-dx, --sq-dy) e per il piano
   il progresso --sq-s (1 = pila, 0 = piano). La classe sq-vivo c'e' solo
   mentre qualcosa si muove: a piano finito il CSS 3D si spegne. */
.sq .sq-piano { --sq-k: 0.45; --sq-rx: 58deg; --sq-rz: -36deg; }
@media (min-width: 720px)  { .sq .sq-piano { --sq-k: 0.62; } }
@media (min-width: 1080px) { .sq .sq-piano { --sq-k: 0.7; } }

.sq .sq-piano.sq-vivo {
  transform-style: preserve-3d;
  perspective: 1800px;
  perspective-origin: 50% var(--sq-oy, 40%);
}
.sq .sq-vivo .sq-piastra {
  --sq-z: 0px;
  will-change: transform;
  transform:
    translate3d(calc(var(--sq-dx, 0px) * var(--sq-s, 0)), calc(var(--sq-dy, 0px) * var(--sq-s, 0)), 0)
    rotateX(calc(var(--sq-rx) * var(--sq-s, 0)))
    rotateZ(calc(var(--sq-rz) * var(--sq-s, 0)))
    scale(calc(1 - (1 - var(--sq-k)) * var(--sq-s, 0)))
    translateZ(calc(var(--sq-z) * var(--sq-s, 0)));
  box-shadow: var(--o-strato-alto);
}
.sq .sq-vivo .sq-piastra:nth-child(1) { --sq-z: 120px; --sq-tinta: var(--bm-bordo); }
.sq .sq-vivo .sq-piastra:nth-child(2) { --sq-z: 0px;   --sq-tinta: var(--bm-padding); }
.sq .sq-vivo .sq-piastra:nth-child(3) { --sq-z: -120px; --sq-tinta: var(--bm-contenuto); }

/* La struttura prima della pelle: finche' la pila e' chiusa ogni strato e'
   velato nel suo colore dell'ispettore, e si dipinge mentre si stende */
.sq .sq-vivo .sq-piastra::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--sq-tinta);
  box-shadow: inset 0 0 0 4px var(--sq-tinta);
  opacity: calc(var(--sq-s, 0) * 0.74);
}

/* Il riquadro di selezione comune, a piano finito */
.sq .sq-piano.t-selezione { --sel-scarto: 14px; }