/* Clivo — foglio di stile unico (quarta passata, 12/10/2026).
   Palette F «antracite e giallo segnaletica», due temi: scuro predefinito, chiaro «parete».
   Gerarchia: un titolo breve per sezione con UNA parola accesa (<em>), testo d'apertura corto, schede con
   titoletto e una frase. Il giallo pieno è raro: parola accesa, azione primaria, fascia della consulenza.
   Sul chiaro il giallo non è mai testo: diventa un evidenziatore sotto la parola. */

@font-face { font-family: "Archivo"; src: url(/fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --antracite: #15171C;
  --giallo: #FFD23F;
  --giallo-premuto: #F2C200;
  --fondo: #15171C;
  --fondo-2: #1A1C22;
  --superficie: #1F2228;
  --linea: #2E323A;
  --testo: #F2F0EA;
  --testo-2: #A9ACB3;
  --link: #FFD23F;
  --palco: #0F1014;
  --em-colore: var(--giallo);
  --em-sotto: transparent;
  --contenitore: 1280px;
  --margine: clamp(16px, 4vw, 48px);
  --sezione: clamp(80px, 10vw, 144px);
  --sans: "Archivo", system-ui, sans-serif;
  --uscita: cubic-bezier(.16, 1, .3, 1);
  --testata-luce: #1A1D24; --testata-fondo: #101217; --testata-raggio: rgba(255, 210, 63, .10);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="scuro"]) {
    --fondo: #EDEEF0; --fondo-2: #E3E5E9; --superficie: #F7F7F8; --linea: #CDD0D6;
    --testo: #15171C; --testo-2: #4A4E57; --link: #15171C; --em-colore: currentColor; --em-sotto: var(--giallo); color-scheme: light;
    --testata-luce: #FFFFFF; --testata-fondo: #E6E8EC; --testata-raggio: rgba(255, 210, 63, .28);
  }
}
:root[data-tema="chiaro"] {
  --fondo: #EDEEF0; --fondo-2: #E3E5E9; --superficie: #F7F7F8; --linea: #CDD0D6;
  --testo: #15171C; --testo-2: #4A4E57; --link: #15171C; --em-colore: currentColor; --em-sotto: var(--giallo); color-scheme: light;
    --testata-luce: #FFFFFF; --testata-fondo: #E6E8EC; --testata-raggio: rgba(255, 210, 63, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; scrollbar-color: var(--linea) var(--fondo); }
body { overflow-x: clip;
  margin: 0; background: var(--fondo); color: var(--testo);
  font: 400 1.0625rem/1.65 var(--sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; font-stretch: 110%; line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:root[data-tema="chiaro"] a:not(.btn), :root:not([data-tema="scuro"]) a:not(.btn) { text-decoration-color: var(--giallo-premuto); }
::selection { background: var(--giallo); color: var(--antracite); }
:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; border-radius: 2px; }
input, textarea { caret-color: var(--giallo); }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* la parola accesa: gialla sullo scuro, evidenziata sul chiaro */
h1 em, h2 em {
  font-style: normal; color: var(--em-colore);
  background: linear-gradient(transparent 64%, var(--em-sotto) 64% 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.salta { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--giallo); color: var(--antracite); padding: 10px 16px; font-weight: 600; }
.salta:focus { top: 12px; }
.avanzamento { position: fixed; left: 0; top: 0; z-index: 40; height: 3px; width: 100%; background: var(--giallo); transform-origin: 0 50%; transform: scaleX(var(--letto, 0)); pointer-events: none; }

/* ---------- barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px;
  padding: 0 var(--margine); height: 72px; background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea);
}
.barra-logo { color: var(--testo); display: flex; flex: none; }
.logo { height: 22px; width: auto; }
.logo-q { fill: var(--giallo); }
.binari { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.binari ul { display: flex; gap: 22px; }
.binari ul a { color: var(--testo-2); text-decoration: none; font-size: .95rem; font-weight: 500; position: relative; padding: 6px 0; white-space: nowrap; }
.binari ul a:hover, .binari ul a[aria-current] { color: var(--testo); }
.binari ul a[aria-current]::before {
  content: ""; position: absolute; left: -13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  background: var(--giallo); view-transition-name: adesso;
}
.tema, .menu {
  flex: none; display: grid; place-items: center; height: 40px; min-width: 40px; padding: 0 12px;
  background: transparent; color: var(--testo); border: 1px solid var(--linea); border-radius: 999px; cursor: pointer; font: 500 .9rem var(--sans);
}
.tema svg { width: 18px; height: 18px; }
.tema:hover, .menu:hover { border-color: var(--testo-2); }
.menu { display: none; }
.menu-mobile { position: fixed; inset: 72px 0 0; z-index: 29; background: var(--fondo); padding: 16px var(--margine) 32px; overflow: auto; }
.menu-mobile a:not(.btn) { display: block; padding: 14px 0; font-size: 1.7rem; font-weight: 700; font-stretch: 110%; letter-spacing: -.02em; color: var(--testo); text-decoration: none; border-bottom: 1px solid var(--linea); }
.menu-mobile a[aria-current] { color: var(--em-colore); text-decoration: underline; text-decoration-color: var(--giallo); text-decoration-thickness: 3px; }
.menu-mobile .btn { margin-top: 28px; }
@media (max-width: 1180px) {
  .binari { display: none; }
  .menu { display: grid; }
  .tema { margin-left: auto; }
}

/* ---------- pulsanti e link ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; background: var(--giallo); color: var(--antracite);
  padding: 15px 24px; border-radius: 999px; font-weight: 650; text-decoration: none; line-height: 1.2;
  transition: background-color .2s, transform .25s var(--uscita), box-shadow .25s;
}
.btn:hover { background: var(--giallo-premuto); transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(255, 210, 63, .55); }
.btn:active { transform: translateY(0); }
.btn .ico { transition: transform .3s var(--uscita); }
.btn:hover .ico { transform: translateX(4px); }
.btn-piccolo { padding: 10px 18px; font-size: .92rem; }
.btn-sec { background: transparent; color: var(--testo); box-shadow: inset 0 0 0 1px var(--linea); }
.btn-sec:hover { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--testo-2); }
.btn-scuro { background: var(--antracite); color: var(--giallo); }
.btn-scuro:hover { background: #000; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.ico { width: 1.1em; height: 1.1em; flex: none; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.link-freccia { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--testo); text-decoration: none; }
.link-freccia:hover { text-decoration: underline; text-decoration-color: var(--giallo); }
.link-freccia .ico { transition: transform .3s var(--uscita); }
.link-freccia:hover .ico { transform: translateX(5px); }

/* ---------- impaginato ---------- */
.contenitore { max-width: var(--contenitore); margin: 0 auto; padding: 0 var(--margine); }
.sezione { padding: var(--sezione) 0; }
.sezione + .sezione { border-top: 1px solid var(--linea); }
.sezione h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); max-width: 18ch; }
.intro { margin-top: 18px; max-width: 56ch; color: var(--testo-2); font-size: clamp(1.08rem, 1.4vw, 1.22rem); }
.fonte, .nota-fonte { margin-top: 18px; font-size: .86rem; line-height: 1.5; color: var(--testo-2); max-width: 60ch; }
.prosa { max-width: 64ch; }
.prosa > * + * { margin-top: 1.1em; }
.prosa-grande { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.35; font-weight: 500; letter-spacing: -.01em; }
.prosa p:not(.prosa-grande) { color: var(--testo-2); }
.due-colonne { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .due-colonne { grid-template-columns: 1fr; } }

/* ---------- fondo delle testate: luce che segue il puntatore, linea d'orizzonte gialla ---------- */
/* Segue il tema: chiaro nel tema chiaro, scuro nello scuro. Il fondo esce a tutta larghezza dal contenitore. */
.buio { position: relative; isolation: isolate; }
.buio::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; pointer-events: none;
  background:
    radial-gradient(520px circle at var(--mx, 70%) var(--my, 40%), var(--testata-raggio), transparent 70%),
    linear-gradient(transparent calc(100% - 1px), rgba(255, 210, 63, .55) 0),
    radial-gradient(80% 90% at 75% 40%, var(--testata-luce), var(--testata-fondo) 70%); }

/* ---------- fondo vivo (src/js/fondo.js): dietro a tutto, le sezioni lo lasciano intravedere ---------- */
.fondo-tela { position: fixed; inset: 0; z-index: -2; width: 100vw; height: 100vh; pointer-events: none; }
@media print { .fondo-tela { display: none; } }

/* ---------- apertura della home con la scena 3D ---------- */
.apertura { position: relative; overflow: hidden; min-height: min(calc(100svh - 72px), 940px); display: flex; align-items: center; isolation: isolate;
  background: var(--fondo); }
.apertura::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--fondo) 0%, color-mix(in srgb, var(--fondo) 82%, transparent) 34%, transparent 58%); }
.scena-tela { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
/* finché la scena non è pronta la tela non si vede; poi entra in 0,45 s (fill backwards: dopo resta l'opacità che le dà
   scena.js, la «luce» del telefono) */
.scena-tela:not(.pronta) { visibility: hidden; }
.scena-tela.pronta { animation: tela-entra .45s ease-out backwards; }
@keyframes tela-entra { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scena-tela.pronta { animation: none; } }
/* schermo largo: la scena è il fondo fisso della home, l'apertura è trasparente e la lascia vedere */
.scena-tela.fissa { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.apertura.scena-fissa { background: transparent; }
/* home su schermo largo: le sezioni lasciano vedere il fondo a curve di livello (fondo.js) */
.rilievo :is(.carta) { background: color-mix(in srgb, var(--fondo) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--testo) 20%, transparent); }

/* entrate dei capitoli (clivo.js): lo stato iniziale lo mette lo script (.entrate); tutto entra in meno di un secondo */
.entrate [data-capitolo]:not(.entrata) :is(.intro, .carta, .lab-testo > :not(h2), .cs-testo p, .cs-passi li, .fonte, .azioni, .progetto, .negozio) { opacity: 0; translate: 0 22px; }
.entrata :is(.intro, .carta, .lab-testo > :not(h2), .cs-testo p, .cs-passi li, .fonte, .azioni, .progetto, .negozio) {
  transition: opacity .5s var(--uscita), translate .7s var(--uscita); transition-delay: calc(var(--i, 0) * 55ms + 150ms); }

/* indice dei capitoli e cornice (clivo.js): solo dove c'è spazio accanto al contenuto */
.indice-capitoli, .cornice { display: none; }
@media (min-width: 1360px) {
  .indice-capitoli { display: block; position: fixed; z-index: 30; left: 28px; top: 50%; translate: 0 -50%; opacity: 0; transition: opacity .6s var(--uscita); pointer-events: none; }
  .indice-capitoli.visibile { opacity: 1; pointer-events: auto; }
  .indice-capitoli ol { position: relative; display: grid; gap: 14px; padding-left: 16px; list-style: none; }
  .indice-capitoli ol::before, .indice-capitoli ol::after { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--linea); }
  .indice-capitoli ol::after { background: var(--giallo); width: 2px; transform-origin: 50% 0; transform: scaleY(var(--fatto, 0)); transition: transform .6s var(--uscita); }
  .indice-capitoli a { display: flex; gap: 10px; font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--testo-2); opacity: .55; text-decoration: none; transition: opacity .4s, color .4s; }
  .indice-capitoli a span { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
  .indice-capitoli a:hover, .indice-capitoli a.attivo { opacity: 1; color: var(--testo); }
  .indice-capitoli a.attivo span { color: var(--testo); box-shadow: inset 0 -2px 0 var(--giallo); }
  .cornice { display: block; position: fixed; inset: 84px 14px 14px; z-index: 30; pointer-events: none; }
  .cornice i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--giallo); }
  .cornice i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
  .cornice i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
  .cornice i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
  .cornice i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
}
@media print { .indice-capitoli, .cornice { display: none !important; } }

/* la scheda che il fondo vivo sta mostrando (forme.js, regia) */
.carta, .modulo, .progetto, [data-forma] { outline: 2px solid transparent; outline-offset: 6px; transition: outline-color .8s var(--uscita); }
.apertura-testo { position: relative; z-index: 3; width: 100%; padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(48px, 8vh, 96px); pointer-events: none; }
.apertura-testo a, .apertura-testo button { pointer-events: auto; }
.apertura h1 { max-width: 12.5ch; font-size: clamp(2.5rem, 4.6vw, 4.4rem); font-weight: 760; font-stretch: 114%; line-height: .98; letter-spacing: -.035em; }
.apertura .lead { margin-top: 24px; max-width: 40ch; font-size: clamp(1.08rem, 1.4vw, 1.22rem); color: var(--testo-2); }
.su-modulo { cursor: pointer; }
.scena-etichetta { position: absolute; z-index: 4; transform: translate(18px, -50%); pointer-events: none; max-width: 280px;
  background: color-mix(in srgb, #0F1014 90%, transparent); color: #F2F0EA; border: 1px solid rgba(255, 210, 63, .45); border-radius: 14px; padding: 10px 14px;
  box-shadow: 0 0 30px -6px rgba(255, 210, 63, .35); backdrop-filter: blur(6px); }
.scena-etichetta b { display: block; font-weight: 650; font-size: .95rem; }
.scena-etichetta span { display: block; font-size: .86rem; color: #A9ACB3; margin-top: 2px; }
.scena-ripiego { position: absolute; z-index: 1; right: 6%; top: 50%; width: min(34vw, 420px); transform: translateY(-50%); }
.scena-viva .scena-ripiego { display: none; }
/* La pila di riserva è per chi non ha WebGL: con JavaScript resta nascosta mentre la scena si carica, invece di comparire
   per un attimo prima della C (Alessio, 4/11/2026). Se la scena non parte (niente WebGL, script non scaricato) ricompare
   dopo 4 s. */
.js .scena:not(.scena-viva) .scena-ripiego { visibility: hidden; animation: ripiego-mostra 0s 4s forwards; }
.js .scena.scena-ko .scena-ripiego { visibility: visible; animation: none; }
@keyframes ripiego-mostra { to { visibility: visible; } }
@media (max-width: 860px) {
  .apertura { display: block; min-height: 0; }
  .apertura::after { display: none; }
  .scena-tela { position: relative; inset: auto; height: 380px; }
  .apertura-testo { padding-bottom: 0; }
  .scena-ripiego { position: relative; right: auto; top: auto; transform: none; width: 70%; margin: 24px auto 0; }
}

/* ---------- testata delle pagine interne ---------- */
.testata-pagina { padding: clamp(56px, 9vh, 112px) 0 clamp(48px, 6vw, 88px); }
.testata-pagina.con-oggetto { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.tp-oggetto { min-width: 0; }
.tp-oggetto .coppia { max-width: 520px; margin-left: auto; }
@media (max-width: 860px) { .testata-pagina.con-oggetto { grid-template-columns: 1fr; } .tp-oggetto { max-width: 440px; } }
.testata-pagina h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); font-weight: 750; font-stretch: 112%; max-width: 16ch; letter-spacing: -.032em; line-height: 1; }
.testata-pagina .lead { margin-top: 24px; max-width: 54ch; font-size: clamp(1.1rem, 1.5vw, 1.28rem); color: var(--testo-2); }
.canale-attesa { margin-top: 32px; max-width: 54ch; padding: 16px 20px 16px 44px; position: relative; background: var(--superficie); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linea); }
.canale-telefono { margin-top: 32px; }
.canale-telefono span { display: block; font-size: .95rem; font-weight: 600; color: var(--testo-2); }
.canale-telefono b { display: block; margin-top: 4px; font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 780; font-stretch: 116%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.canale-attesa::before { content: ""; position: absolute; left: 20px; top: 1.45em; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--giallo-premuto); }

/* ---------- stato di un lavoro: parole intere, un punto colorato ---------- */
.stato { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: .84rem; font-weight: 600; line-height: 1.3;
  color: var(--testo); box-shadow: inset 0 0 0 1px var(--linea); background: var(--fondo); }
.stato::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: #45B97C; }
.stato-corso::before { background: var(--giallo); box-shadow: 0 0 0 0 rgba(255, 210, 63, .6); animation: vivo 2.2s ease-out infinite; }
.stato-attesa::before { background: transparent; box-shadow: inset 0 0 0 2px var(--giallo-premuto); }
.stato-lab::before { background: transparent; box-shadow: inset 0 0 0 2px var(--testo-2); }
@keyframes vivo { 70% { box-shadow: 0 0 0 7px rgba(255, 210, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0); } }

/* ---------- immagini: schermi, telefoni, foto ---------- */
.schermo { position: relative; border-radius: 12px; overflow: hidden; background: var(--palco); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 80px -40px rgba(0, 0, 0, .75); }
.finestra { display: flex; gap: 6px; padding: 9px 12px; background: #1B1D22; }
.finestra i { width: 8px; height: 8px; border-radius: 50%; background: #3A3E47; }
.schermo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.telefono { position: relative; border-radius: 30px; padding: 7px; background: #0F1014; box-shadow: 0 0 0 1px #2C3039, 0 40px 70px -30px rgba(0, 0, 0, .8); }
.telefono img { border-radius: 23px; width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.lavoro-vista { position: relative; border-radius: 12px; overflow: hidden; background: var(--palco); box-shadow: 0 0 0 1px var(--linea), 0 30px 60px -36px rgba(0, 0, 0, .7); }
.disegno { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 8%; background: var(--palco); }
.disegno svg { width: 100%; height: 100%; }

/* oggetti in 3D (CSS) che seguono il puntatore via --rx/--ry. Le composizioni restano DENTRO il loro riquadro:
   niente immagini che escono sopra il testo. */
[data-inclina] { --rx: 0deg; --ry: 0deg; transform-style: preserve-3d; }
.coppia { position: relative; perspective: 1400px; padding: 0 0 15% 9%; }
.coppia .cp-schermo { transform: rotateX(calc(7deg + var(--rx))) rotateY(calc(-14deg + var(--ry))) rotateZ(1.5deg); transform-origin: 60% 50%; transition: transform .6s var(--uscita); }
.coppia .cp-tel { position: absolute; width: 25%; left: 0; bottom: 0; transform: translateZ(50px) rotateX(calc(5deg + var(--rx))) rotateY(calc(12deg + var(--ry))) rotateZ(-3deg); transition: transform .6s var(--uscita); }
.pila-icone { position: relative; aspect-ratio: 1; width: min(100%, 380px); margin: auto; perspective: 1000px; }
.pila-icone img { position: absolute; width: 40%; border-radius: 22%; left: calc(4% + var(--k) * 12%); top: calc(8% + var(--k) * 8%);
  transform: rotateY(calc(-24deg + var(--ry))) rotateX(calc(18deg + var(--rx))) translateZ(calc(var(--k) * 30px));
  box-shadow: 0 30px 40px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 210, 63, .25); transition: transform .6s var(--uscita);
  animation: galleggia 6s ease-in-out infinite; animation-delay: calc(var(--k) * -1.1s); }
@keyframes galleggia { 50% { translate: 0 -10px; } }

/* ---------- carte: bordo che si accende dove passa il puntatore ---------- */
.carta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(280px circle at var(--mx) var(--my), var(--giallo), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.carta:hover::before, .carta:focus-within::before { opacity: 1; }
.carta-prova { display: flex; gap: 8px; align-items: baseline; font-weight: 650; }
.carta-prova::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--giallo); translate: 0 -1px; }

/* ---------- carte dei lavori: l'immagine si inclina, il bordo si accende dove passa il puntatore ---------- */
.carta { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; padding: 14px 14px 24px; border-radius: 22px;
  background: color-mix(in srgb, var(--superficie) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--linea); isolation: isolate; }
.carta-vista { display: block; border-radius: 14px; overflow: hidden; background: var(--palco); perspective: 1200px; padding: 8% 7% 7%; }
.carta-vista > [data-inclina] { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--uscita); }
.carta-vista .coppia { padding: 0 0 12% 8%; }
.carta h3 { margin: 22px 10px 0; font-size: 1.32rem; font-weight: 720; font-stretch: 112%; }
.carta h3 a { color: var(--testo); text-decoration: none; }
.carta h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carta:hover h3 a { text-decoration: underline; text-decoration-color: var(--giallo); }
.carta-meta { margin: 6px 10px 0; font-size: .86rem; font-weight: 600; color: var(--testo-2); }
.carta > p:not([class]) { margin: 12px 10px 0; color: var(--testo-2); font-size: .98rem; }
.carta-prova { margin: auto 10px 0; padding-top: 16px; font-size: .9rem; }

/* ---------- gestione: i due negozi, ciascuno con i suoi risultati sotto ---------- */
.negozi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(36px, 4vw, 56px); align-items: start; }
.negozio .prove { margin-top: 28px; gap: 12px 40px; }
.negozio .prove span { font-weight: 600; color: var(--testo-2); max-width: 18ch; }
.negozio .fonte { margin-top: 14px; }
@media (max-width: 760px) { .negozi { grid-template-columns: 1fr; } }

/* ---------- moduli in primo piano ---------- */
.progetto h3 small { display: block; margin-top: 4px; font-size: .9rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--testo-2); }
.pr-fa { margin-top: 18px; display: grid; gap: 8px; }
.pr-fa li { position: relative; padding-left: 22px; color: var(--testo-2); }
.pr-fa li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--giallo); }
.progetto .carta-prova { margin: 18px 0 0; padding: 0; }
.flusso { counter-reset: f; display: grid; gap: 14px; padding: 4% 2%; position: relative; }
.flusso::before { content: ""; position: absolute; left: calc(2% + 22px); top: 12%; bottom: 12%; width: 2px; background: linear-gradient(var(--giallo), rgba(255, 210, 63, .15)); }
.flusso li { counter-increment: f; position: relative; display: grid; gap: 2px; padding: 14px 18px 14px 64px; border-radius: 14px; color: #F2F0EA;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.flusso li::before { content: counter(f); position: absolute; left: 10px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #FFD23F; color: #15171C; font-weight: 700; font-size: .85rem; }
.flusso b { font-weight: 700; font-stretch: 108%; }
.flusso span { font-size: .9rem; color: #A9ACB3; }

/* ---------- portfolio dei siti ---------- */
.progetti { display: grid; gap: clamp(48px, 6vw, 88px); margin-top: clamp(36px, 4vw, 56px); }
.progetto { --mx: 50%; --my: 50%; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; scroll-margin-top: 100px; }
.progetto:nth-child(even) .pr-vista { order: 2; }
.pr-vista { border-radius: 24px; padding: clamp(24px, 4vw, 48px); perspective: 1400px;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 210, 63, .10), transparent 70%), var(--palco); }
.pr-vista > [data-inclina] { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--uscita); }
.pr-anno { font-size: .9rem; font-weight: 650; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.progetto h3 { margin-top: 6px; font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 740; font-stretch: 114%; }
.pr-cosa { margin-top: 12px; font-size: 1.08rem; max-width: 40ch; }
.pr-scheda { margin: 22px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; font-size: .95rem; }
.pr-scheda dt { color: var(--testo-2); font-weight: 600; }
.pr-scheda dd { margin: 0; }
.progetto .link-freccia { margin-top: 22px; }
@media (max-width: 860px) { .progetto { grid-template-columns: 1fr; } .progetto:nth-child(even) .pr-vista { order: 0; } .pr-scheda { grid-template-columns: 1fr; gap: 2px; } .pr-scheda dd + dt { margin-top: 10px; } }

/* ---------- simbolo in 3D: lastra bianca, C antracite a strati, quadrato giallo (stesso riquadro per tutti i livelli) ---------- */
.simbolo-3d { position: relative; width: min(100%, 320px); aspect-ratio: 445 / 420; margin: 0 auto; perspective: 1000px; }
.simbolo-3d svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%;
  transform: rotateX(calc(12deg + var(--rx))) rotateY(calc(-24deg + var(--ry))) translateZ(calc(var(--z, 0) * 3px)); transition: transform .6s var(--uscita); }
.s3-lastra { fill: #F7F7F8; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .28)); }
.simbolo-3d .s3-lastra { transform: rotateX(calc(12deg + var(--rx))) rotateY(calc(-24deg + var(--ry))) translateZ(-4px); }
.s3-c { fill: color-mix(in srgb, #15171C calc(55% + var(--z) * 6.5%), #8A8F99); }
.s3-q { fill: color-mix(in srgb, #FFD23F calc(55% + var(--z) * 9%), #B38900); }
.simbolo-3d .s3-q { transform: rotateX(calc(12deg + var(--rx))) rotateY(calc(-24deg + var(--ry))) translateZ(calc(24px + var(--z) * 4px)); }
.disegno-solo { perspective: 1200px; max-width: 460px; margin-left: auto; }
.disegno-solo .disegno { border-radius: 14px; box-shadow: 0 0 0 1px #2A2E36, 0 30px 50px -24px rgba(0, 0, 0, .7); transform: rotateY(calc(-14deg + var(--ry))) rotateX(calc(6deg + var(--rx))); transition: transform .6s var(--uscita); }

/* ---------- home: il caso in scena ---------- */
.prove { display: flex; flex-wrap: wrap; gap: 12px 48px; margin-top: 26px; }
.prove b { display: block; font-size: clamp(2.6rem, 4.6vw, 3.6rem); font-weight: 800; font-stretch: 118%; line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--em-colore);
  background: linear-gradient(transparent 66%, var(--em-sotto) 66% 90%, transparent 90%); }
.prove span { display: block; margin-top: 6px; font-weight: 600; }

/* ---------- laboratorio di Oryma ---------- */
.lab-griglia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lab-altro { margin-top: 18px; max-width: 46ch; font-size: .98rem; color: var(--testo-2); padding-left: 16px; border-left: 2px solid #8878FF; }
@media (max-width: 860px) { .lab-griglia { grid-template-columns: 1fr; } }

/* ---------- la fascia della consulenza (chiusura di ogni pagina) ---------- */
.consulenza { background: var(--giallo); color: var(--antracite); padding: clamp(72px, 9vw, 136px) 0; }
.consulenza .contenitore { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px clamp(32px, 6vw, 96px); align-items: end; }
.cs-testo h2 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); font-weight: 780; font-stretch: 116%; line-height: .96; letter-spacing: -.04em; max-width: 13ch; }
.cs-testo p { margin-top: 22px; font-size: clamp(1.08rem, 1.4vw, 1.22rem); max-width: 44ch; color: #2B2D33; }
.consulenza .btn-scuro { grid-column: 1; justify-self: start; }
.consulenza :focus-visible { outline-color: var(--antracite); }
.cs-passi { counter-reset: cs; display: grid; gap: 18px; grid-row: span 2; align-self: center; }
.cs-passi li { counter-increment: cs; position: relative; padding-left: 54px; min-height: 34px; font-size: 1.15rem; line-height: 1.45; padding-top: 4px; }
.cs-passi li::before { content: counter(cs); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--antracite); color: var(--giallo); font-weight: 700; font-size: .95rem; }
.cs-passi b { font-weight: 700; }
@media (max-width: 860px) { .consulenza .contenitore { grid-template-columns: 1fr; } .cs-passi { grid-row: auto; } }
/* la stessa sequenza in pagina consulenza, sul fondo della pagina */
.cs-passi-grandi { margin-top: clamp(32px, 4vw, 56px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cs-passi-grandi li { padding: 0; font-size: 1.1rem; color: var(--testo-2); }
.cs-passi-grandi li::before { position: static; margin-bottom: 18px; width: 52px; height: 52px; font-size: 1.3rem; background: var(--giallo); color: var(--antracite); }
.cs-passi-grandi b { display: block; color: var(--testo); font-size: 1.45rem; font-stretch: 110%; letter-spacing: -.02em; margin-bottom: 4px; }
@media (max-width: 860px) { .cs-passi-grandi { grid-template-columns: 1fr; } }

/* ---------- numeri con la fonte ---------- */
.gigante { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.gigante-num span { display: block; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 650; color: var(--testo-2); }
.gigante-num b { display: block; font-size: clamp(4.8rem, 13vw, 10rem); font-weight: 820; font-stretch: 122%; line-height: .86; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  color: var(--em-colore); background: linear-gradient(transparent 70%, var(--em-sotto) 70% 92%, transparent 92%); width: max-content; max-width: 100%; }
.gigante-testo h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.gigante-testo p { margin-top: 14px; color: var(--testo-2); }
@media (max-width: 860px) { .gigante { grid-template-columns: 1fr; } }

/* vetrina dei lavori nei casi */
.vetrina { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(16px, 2.4vw, 32px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.vv { margin: 0; }
.vv figcaption { margin-top: 14px; color: var(--testo-2); font-size: .97rem; max-width: 44ch; }
.vv figcaption b { display: block; color: var(--testo); font-weight: 700; margin-bottom: 2px; }
.vv-8 { grid-column: span 8; } .vv-7 { grid-column: span 7; } .vv-5 { grid-column: span 5; } .vv-4 { grid-column: span 4; }
.vv-tel .telefono { max-width: 250px; }
.vv-giu { margin-top: clamp(40px, 8vw, 120px); }
@media (max-width: 860px) { .vetrina { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vv { grid-column: span 2; } .vv.vv-tel { grid-column: span 1; } .vv-giu { margin-top: 0; } }

/* ---------- prodotti software ---------- */
.prodotto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid var(--linea); align-items: start; }
.testata-pagina + .prodotto { border-top: 0; padding-top: 0; }
.prodotto h2 { margin-top: 18px; font-size: clamp(2.2rem, 4vw, 3.4rem); }
.prodotto h2 small, .modulo h3 small { display: block; margin-top: 6px; font-size: .9rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--testo-2); }
.prodotto-motto { margin-top: 16px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 500; max-width: 30ch; }
.prodotto .scheda { margin-top: 26px; display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; font-size: .97rem; }
.prodotto .scheda dt { color: var(--testo-2); }
.prodotto .scheda dd { margin: 0; font-weight: 600; }
@media (max-width: 860px) { .prodotto { grid-template-columns: 1fr; } }

/* ---------- galleria dei moduli ---------- */
.striscia { overflow: hidden; margin: 0 calc(var(--margine) * -1) clamp(32px, 4vw, 56px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.striscia-traccia { display: flex; gap: 20px; width: max-content; animation: striscia 90s linear infinite; }
.striscia:hover .striscia-traccia { animation-play-state: paused; }
.striscia img { width: 440px; max-width: none; border-radius: 10px; }
@keyframes striscia { to { transform: translateX(-50%); } }
.filtri { display: flex; flex-wrap: wrap; gap: 8px; }
.filtri button { font: 600 .9rem/1 var(--sans); padding: 12px 16px; border-radius: 999px; cursor: pointer; background: transparent; color: var(--testo-2); border: 1px solid var(--linea); }
.filtri button:hover { color: var(--testo); border-color: var(--testo-2); }
.filtri button[aria-pressed="true"] { background: var(--giallo); color: var(--antracite); border-color: var(--giallo); }
.filtri .conteggio { font-variant-numeric: tabular-nums; font-size: .8rem; opacity: .7; margin-left: 6px; }
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 28px; }
.modulo { background: var(--superficie); border-radius: 20px; padding: 24px 22px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: inset 0 0 0 1px var(--linea); transition: box-shadow .3s, transform .4s var(--uscita); }
.modulo:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--giallo) 50%, var(--linea)); transform: translateY(-3px); }
.modulo[hidden] { display: none; }
.modulo .meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--testo-2); text-align: right; }
.modulo-icona { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .6); }
.modulo h3 { font-size: 1.3rem; letter-spacing: -.015em; }
.modulo .motto { color: var(--testo); font-weight: 600; }
.modulo p { font-size: .95rem; color: var(--testo-2); line-height: 1.55; }
.modulo .stato { margin-top: auto; align-self: flex-start; }
.modulo:target { box-shadow: inset 0 0 0 2px var(--giallo); }
.galleria-nota { margin-top: 24px; color: var(--testo-2); font-size: .92rem; max-width: 62ch; }
.galleria-nota strong { color: var(--testo); }

/* ---------- metodo ---------- */
.passi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 64px); counter-reset: passo; }
.passi li { background: var(--superficie); border-radius: 18px; padding: 22px 18px 26px; counter-increment: passo; position: relative; overflow: hidden; }
.passi li::before { content: counter(passo); display: block; font-size: 2.6rem; font-weight: 800; font-stretch: 120%; line-height: 1; color: var(--em-colore); margin-bottom: 22px; }
.passi h3 { font-size: 1.15rem; }
.passi p { margin-top: 8px; font-size: .94rem; color: var(--testo-2); line-height: 1.55; }
@media (max-width: 1080px) { .passi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .passi { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.vie { padding-bottom: var(--sezione); border-top: 1px solid var(--linea); }
.vie a { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linea); color: var(--testo); text-decoration: none; font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 700; font-stretch: 110%; letter-spacing: -.02em; }
.vie a:hover { color: var(--em-colore); }

/* ---------- piede ---------- */
.piede { border-top: 1px solid var(--linea); padding: clamp(48px, 6vw, 80px) var(--margine) 28px; }
.piede-alto { max-width: var(--contenitore); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.piede .logo-piede { height: 34px; color: var(--testo); }
.piede-marchio p { margin-top: 16px; color: var(--testo-2); }
.piede nav { display: flex; gap: clamp(32px, 6vw, 88px); }
.piede nav li + li { margin-top: 10px; }
.piede nav a { color: var(--testo-2); text-decoration: none; }
.piede nav a:hover { color: var(--testo); text-decoration: underline; }
.piede-basso { max-width: var(--contenitore); margin: clamp(40px, 5vw, 64px) auto 0; padding-top: 22px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--testo-2); }

/* ---------- transizioni fra pagine: brevi, non trattengono la lettura ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .26s var(--uscita) both vt-arretra; }
::view-transition-new(root) { animation: .36s var(--uscita) both vt-entra; }
@keyframes vt-arretra { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(12px); } }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--uscita); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
  .striscia-traccia, .pila-icone img { animation: none !important; }
}
@media print {
  .barra, .menu-mobile, .piede nav, .azioni, .tema, .consulenza .btn { display: none !important; }
  body { background: #fff; color: #000; }
}
@media (max-width: 860px) { .simbolo-3d { width: min(70%, 260px); } }

/* ==== Home «Sopralluogo» (direzione ufficiale dal 18/10/2026; dati in src/home.mjs, comportamento in src/js/home.js) ==== */
.sl { --tratto: #5A606C; --barra-h: 72px; }
@media (prefers-color-scheme: light) { :root:not([data-tema="scuro"]) .sl { --tratto: #8A8F99; } }
:root[data-tema="chiaro"] .sl { --tratto: #8A8F99; }
.sl .cornice, .sl .indice-capitoli, .sl .fondo-tela { display: none !important; }

/* --- Fogli (Alessio, 19/10/2026: «sembra tutto un enorme blocco… mi servono tagli»). Ogni sezione della home è un
   foglio con gli angoli alti arrotondati che sale sopra il precedente; i fogli alternano il tema (.inverti prende
   quello opposto alla pagina). La tela fissa della scena sta sopra i fogli (trasparente, senza clic), così le
   tessere in volo restano visibili anche sui fondi pieni. --- */
.sl { --piega: clamp(22px, 3vw, 40px); --respiro: clamp(56px, 7vw, 104px); }
.sl .scena-tela.fissa { z-index: 25; }
.sl .foglio { position: relative; margin-top: calc(-1 * var(--piega)); border-radius: var(--piega) var(--piega) 0 0;
  background: var(--fondo); color: var(--testo); padding-block: var(--respiro) calc(var(--respiro) + var(--piega)); }
.sl .foglio:last-of-type { padding-bottom: var(--respiro); }
.inverti { --fondo: #EDEEF0; --fondo-2: #E3E5E9; --superficie: #F7F7F8; --linea: #CDD0D6; --testo: #15171C; --testo-2: #4A4E57;
  --link: #15171C; --em-colore: currentColor; --em-sotto: var(--giallo); --tratto: #8A8F99; color-scheme: light; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="scuro"]) .inverti { --fondo: #15171C; --fondo-2: #1A1C22; --superficie: #1F2228; --linea: #2E323A; --testo: #F2F0EA;
    --testo-2: #A9ACB3; --link: #FFD23F; --em-colore: var(--giallo); --em-sotto: transparent; --tratto: #5A606C; color-scheme: dark; }
}
:root[data-tema="chiaro"] .inverti { --fondo: #15171C; --fondo-2: #1A1C22; --superficie: #1F2228; --linea: #2E323A; --testo: #F2F0EA;
  --testo-2: #A9ACB3; --link: #FFD23F; --em-colore: var(--giallo); --em-sotto: transparent; --tratto: #5A606C; color-scheme: dark; }
/* l'apertura lascia spuntare il foglio successivo nel primo schermo */
.sl .apertura { min-height: min(calc(100svh - var(--barra-h) - 104px + var(--piega)), 820px); }
/* telefono con la scena fissa (scena.js, .hero-tel): il testo sta sopra la tela, la C dietro in trasparenza */
@media (max-width: 860px) {
  .hero-tel .sl .apertura { isolation: auto; min-height: 0; }
  .hero-tel .sl .apertura-testo { z-index: 26; padding-top: clamp(28px, 6svh, 56px); padding-bottom: calc(var(--piega) + clamp(48px, 9svh, 88px)); }
  .hero-tel .sl .apertura .lead { color: var(--testo); }
}
.sl h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); font-weight: 760; font-stretch: 116%; letter-spacing: -.035em; line-height: 1.02; }
.sl h2 em { font-style: normal; color: var(--em-colore); background: linear-gradient(transparent 62%, var(--em-sotto) 62% 92%, transparent 92%); }
.sl-lead { font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--testo-2); max-width: 52ch; margin-top: 14px; }
.sl-stato { padding: 3px 9px; border-radius: 999px; background: var(--giallo); color: var(--antracite); letter-spacing: .06em; font-size: .7rem; font-weight: 700; text-transform: uppercase; }

/* --- Apertura: il testo scorre con la pagina (19/10/2026: la dissolvenza lasciava un vuoto nero prima del foglio);
   la C e le tessere le gestisce scena.js --- */

/* --- 1b. Costruiamo: la produzione, informativa (quattro schede, nessuna cattura) --- */
.co-testa { display: grid; gap: 14px; }
.co-testa .sl-lead { margin: 0; }
.co-carte { list-style: none; padding: 0; margin: clamp(28px, 4vw, 48px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.co-carta { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 22px; border-radius: 20px; background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--linea); transition: transform .45s var(--uscita), box-shadow .3s; }
.co-carta:hover, .co-carta:focus-within { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--giallo) 70%, var(--linea)); }
.co-tessera { width: 64px; height: 64px; margin: -4px 0 4px -4px; }
.sl-volo .co-tessera { opacity: var(--co, 0); }
.co-carta h3 { font-size: 1.38rem; font-weight: 740; font-stretch: 112%; letter-spacing: -.02em; }
.co-carta h3 a { color: var(--testo); text-decoration: none; }
.co-carta h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.co-carta h3 a:focus-visible { outline: none; }
.co-carta:has(h3 a:focus-visible) { outline: 3px solid var(--giallo); outline-offset: 3px; }
.co-voce { font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
.co-fa { color: var(--testo-2); font-size: .95rem; line-height: 1.55; }
.co-comprende { list-style: none; padding: 14px 0 0; margin: 2px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 7px; }
.co-comprende li { position: relative; padding-left: 20px; font-size: .92rem; line-height: 1.4; }
.co-comprende li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--giallo); }
.co-esempi { margin-top: auto; padding-top: 8px; font-size: .84rem; color: var(--testo-2); }
.co-esempi span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; }
.co-vai { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: .95rem; }
.co-vai .ico { transition: transform .35s var(--uscita); }
.co-carta:hover .co-vai .ico { transform: translateX(6px); }
@media (max-width: 1080px) { .co-carte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 620px) {
  /* su telefono le quattro schede scorrono di lato: la sezione resta corta */
  .co-carte { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--margine)); padding: 4px var(--margine) 12px; scroll-padding-inline: var(--margine); scrollbar-width: none; }
  .co-carte > li { flex: 0 0 84%; scroll-snap-align: start; }
}

/* --- 2. Dove si inceppa --- */
.pt { padding-block: clamp(40px, 6vh, 80px) clamp(64px, 9vw, 120px); }
.pt-testa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 56px; align-items: end; }
.pt-testa .sl-lead { margin: 0 0 6px; }
.pt-tessere { list-style: none; padding: 0; margin: clamp(28px, 4vh, 44px) 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 20px); }
.pt-tile { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; justify-items: center; gap: 6px; padding: 10px 4px 12px; border-radius: 16px; text-align: center; transition: background .3s; }
.pt-tile img { width: min(100%, 104px); aspect-ratio: 1; transition: transform .5s var(--uscita), filter .4s; filter: saturate(.7) brightness(.85); }
.sl-volo .pt-tile img { opacity: var(--arrivo, 0); }
.pt-num { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--testo-2); }
.pt-nome { font-size: .9rem; font-weight: 650; line-height: 1.2; }
.pt-tile:hover img { transform: translateY(-4px); filter: none; }
.pt-tile:focus-visible { outline: 2px solid var(--giallo); outline-offset: 2px; }
.pt-tile[aria-selected="true"] { background: color-mix(in srgb, var(--giallo) 9%, transparent); }
.pt-tile[aria-selected="true"] img { transform: translateY(-8px) scale(1.06); filter: drop-shadow(0 14px 24px color-mix(in srgb, var(--giallo) 35%, transparent)); }
.pt-tile[aria-selected="true"] .pt-num { color: var(--em-colore); }
.pt-scheda { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(24px, 4vh, 40px); }
.pt-pannelli { display: grid; }
.pt-pannello { display: grid; gap: 16px; align-content: start; }
.js .sl .pt-pannello { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: perspective(1000px) rotateX(-16deg) translateY(30px); transform-origin: 50% 0; transition: opacity .35s, transform .6s var(--uscita), visibility 0s .35s; }
.js .sl .pt-pannelli { position: relative; }
.js .sl .pt-pannello:not(.attivo) { position: absolute; inset: 0 0 auto; }
.js .sl .pt-pannello.attivo { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .12s, transform .8s .12s var(--uscita); }
.js .sl .pt-pannello.esce { transform: perspective(1000px) rotateX(14deg) translateY(-24px); }
.pt-dove { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-2); }
.pt-titolo { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 720; font-stretch: 112%; letter-spacing: -.03em; line-height: 1.1; max-width: 24ch; }
.pt-sintomo { font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 600; line-height: 1.35; max-width: 34ch; }
.sl-due { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sl-due h4, .pt-problema h4 { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-2); margin-bottom: 6px; font-stretch: 100%; }
.sl-due p { font-size: .96rem; line-height: 1.55; }
.sl-prova { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: center; padding-top: 14px; border-top: 1px solid var(--linea); }
.sl-prova b { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 780; font-stretch: 122%; letter-spacing: -.04em; line-height: 1; color: var(--em-colore); white-space: nowrap; }
.sl-prova b { background: linear-gradient(transparent 60%, var(--em-sotto) 60% 90%, transparent 90%); }
.sl-prova img { width: 56px; height: 56px; }
.sl-prova p { font-size: .92rem; }
.sl-prova small { display: block; margin-top: 2px; font-size: .74rem; color: var(--testo-2); }

/* la pila */
/* un solo invito per tutta la sezione, al posto dei due link in ogni scheda (Alessio, 19/10/2026) */
.pt-chiusa { margin-top: clamp(20px, 3vh, 32px); }
.pt-chiusa > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: clamp(20px, 3vw, 32px); border-radius: 22px;
  background: color-mix(in srgb, var(--giallo) 10%, var(--fondo)); border: 1px solid color-mix(in srgb, var(--giallo) 45%, transparent); }
.pt-chiusa p { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 720; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.25; max-width: 30ch; }
.pt-palco { position: relative; }
.sl-pila { pointer-events: none; position: relative; width: 100%; aspect-ratio: 1 / .92; perspective: 2800px; }
.sl-pila-in { position: absolute; inset: 30% 12% 26% 8%; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-40deg); }
.sl-piano { --passo: 26px; position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--i) * var(--passo) + var(--su, 0px) + var(--vola, 0px))); transition: transform 1s var(--uscita), opacity .6s; }
.sl-piano svg, .sl-piano img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-piano svg { overflow: visible; }
.sl-piano img { object-fit: cover; object-position: top; border-radius: 3% / 5%; opacity: 0; transition: opacity .6s .15s; }
.sl-piano .bordo { fill: color-mix(in srgb, var(--fondo) 78%, transparent); stroke: var(--tratto); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .5s, stroke .5s; }
.sl-piano .tr { fill: color-mix(in srgb, var(--tratto) 10%, transparent); stroke: var(--tratto); stroke-width: 1.1; vector-effect: non-scaling-stroke; transition: stroke .5s; }
.sl-piano .pi { fill: color-mix(in srgb, var(--tratto) 50%, transparent); transition: fill .5s; }
.sl-piano .gi { fill: var(--tratto); }
.sl-targa { position: absolute; left: 0; top: 100%; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--testo-2); opacity: .55; transition: opacity .5s, color .5s; }
.sl-ombra { position: absolute; inset: 8% -6% -12% 8%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent); filter: blur(26px); }
.js .sl .sl-pila:not(.montata) .sl-piano { --vola: calc(300px + var(--i) * 80px); opacity: 0; }
.js .sl .sl-pila.montata:not(.mossa) .sl-piano { transition-delay: calc((6 - var(--i)) * 70ms); }
.sl-piano.attivo { --su: 50px; }
.sl-piano.attivo .bordo { stroke: var(--giallo); stroke-width: 2; fill: color-mix(in srgb, var(--giallo) 12%, var(--fondo)); }
.sl-piano.attivo .tr { stroke: var(--giallo); }
.sl-piano.attivo .pi, .sl-piano.attivo .gi { fill: var(--giallo); }
.sl-piano.attivo img { opacity: 1; box-shadow: 0 0 0 2px var(--giallo), 0 40px 60px -30px rgba(0, 0, 0, .6); }
.sl-piano.attivo .sl-targa { opacity: 1; color: var(--testo); }
.sl-piano.sopra { --su: 170px; opacity: .08; }
.sl-piano.sopra .sl-targa { opacity: 0; }

/* niente riquadro blu al tocco sui comandi della home (il fuoco da tastiera resta) */
.sl button, .sl a { -webkit-tap-highlight-color: transparent; }

/* --- 3. Cantieri aperti: due negozi in grande, gli altri lavori in fila --- */
.cn { background: var(--fondo-2); padding-block: clamp(72px, 10vw, 130px); }
.cn-testa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 56px; align-items: end; }
.cn-testa .sl-lead { margin: 0 0 6px; }
.cn-grande { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(48px, 7vw, 96px); }
.cn-specchio .cn-vista { order: 2; margin: 0 8% 0 0; }
.cn-vista { position: sticky; top: calc(var(--barra-h) + 40px); aspect-ratio: 16 / 10.5; margin-right: 8%; }
.cn-schermo { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: var(--superficie); box-shadow: 0 0 0 1px var(--linea), 0 50px 80px -40px rgba(0, 0, 0, .55); }
.cn-schermo::before { content: ''; display: block; height: 22px; background: color-mix(in srgb, var(--testo) 8%, var(--superficie)); }
.cn-schermo img { display: block; width: 100%; height: calc(100% - 22px); object-fit: cover; object-position: top; }
.cn-tel { position: absolute; right: -9%; bottom: -14%; width: 22%; border-radius: 18px; overflow: hidden; border: 5px solid #0D0E12; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .6); transform: rotate(3deg); }
.cn-tel img { display: block; width: 100%; aspect-ratio: 390 / 800; object-fit: cover; object-position: top; }
.cn-tipo { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cn-corpo h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-stretch: 114%; letter-spacing: -.03em; margin: 6px 0 14px; }
.cn-corpo h3 a { color: inherit; text-decoration: none; }
.cn-corpo h3 a:hover { text-decoration: underline; text-decoration-color: var(--giallo); text-underline-offset: 6px; }
.cn-partenza { color: var(--testo-2); max-width: 46ch; }
.cn-partenza span, .cn-corpo h4, .cn-altri h3 { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-2); margin-bottom: 6px; font-stretch: 100%; }
.cn-cifre { list-style: none; padding: 18px 0; margin: 22px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-block: 1px solid var(--linea); font-size: .86rem; line-height: 1.35; }
.cn-cifre b { display: block; font-size: clamp(1.5rem, 2.3vw, 2.05rem); font-weight: 780; font-stretch: 120%; letter-spacing: -.04em; line-height: 1; margin-bottom: 6px; white-space: nowrap; color: var(--em-colore); }
.cn-cifre small { display: block; margin-top: 4px; font-size: .72rem; color: var(--testo-2); }
.cn-corpo h4 { color: var(--testo); display: flex; gap: 8px; align-items: center; }
.cn-corpo h4::before { content: ""; width: 8px; height: 8px; background: var(--giallo); flex: none; }
.cn-fatto { list-style: none; padding: 0; margin: 4px 0 24px; display: grid; gap: 9px; }
.cn-fatto li { position: relative; padding-left: 20px; font-size: .96rem; line-height: 1.45; }
.cn-fatto li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--giallo); }
.cn-altri { margin-top: clamp(56px, 8vw, 104px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--linea); }
.cn-altri ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.cn-piccolo a { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.cn-piccolo .cn-schermo { position: relative; aspect-ratio: 16 / 10; margin-bottom: 8px; box-shadow: 0 0 0 1px var(--linea), 0 30px 50px -36px rgba(0, 0, 0, .5); transition: transform .5s var(--uscita); }
.cn-piccolo a:hover .cn-schermo { transform: translateY(-4px); }
.cn-piccolo h4 { font-size: 1.25rem; font-stretch: 112%; letter-spacing: -.02em; }
.cn-piccolo a:hover h4 { text-decoration: underline; text-decoration-color: var(--giallo); text-underline-offset: 4px; }
.cn-piccolo p:last-child { font-size: .9rem; color: var(--testo-2); }

/* --- 4. Gli attrezzi: l'orbita --- */
.at { padding-block: clamp(80px, 11vw, 140px) clamp(40px, 6vw, 80px); overflow: hidden; }
.at-testa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 56px; align-items: end; }
.at-testa .sl-lead { margin: 0 0 6px; }
.at-filtri { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.at-filtri button { all: unset; cursor: pointer; padding: 7px 13px; border-radius: 999px; font-size: .86rem; box-shadow: inset 0 0 0 1px var(--linea); color: var(--testo-2); transition: background .25s, color .25s; }
.at-filtri button small { font-size: .72rem; opacity: .78; margin-left: 2px; }
.at-filtri button:hover { color: var(--testo); }
.at-filtri button:focus-visible { outline: 2px solid var(--giallo); outline-offset: 2px; }
.at-filtri button[aria-pressed="true"] { background: var(--giallo); color: var(--antracite); box-shadow: none; }
.at-scena { --r: min(36vw, 470px); --lato: 64px; --incl: 70deg; position: relative; height: clamp(460px, 68vh, 660px); perspective: 2400px; display: grid; place-items: center; touch-action: pan-y; cursor: grab; user-select: none; }
.at-scena:active { cursor: grabbing; }
.at-anello { position: absolute; left: 50%; top: 47%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--incl)) rotateZ(var(--th, 0deg)); }
.at-t { all: unset; position: absolute; left: calc(var(--lato) / -2); top: calc(var(--lato) / -2); width: var(--lato); height: var(--lato); cursor: pointer; transform-style: preserve-3d; transform: rotateZ(var(--a)) translateY(calc(var(--r) * -1)) rotateZ(calc(-1 * (var(--a) + var(--th, 0deg)))) rotateX(calc(-1 * var(--incl))); transition: opacity .5s, filter .5s; }
.at-t .at-3d { display: none; }
.at-t img { width: 100%; height: 100%; display: block; transition: transform .4s var(--uscita), filter .4s; filter: saturate(.75) brightness(.85); }
.at-t:hover img, .at-t:focus-visible img { transform: scale(1.35); filter: none; }
.at-t:focus-visible { outline: none; }
.at-t.scelto img { transform: scale(1.4); filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--giallo) 50%, transparent)); }
.at-t.spento { opacity: .14; filter: grayscale(1); }
.at-lettore { position: relative; z-index: 2; text-align: center; display: grid; gap: 8px; justify-items: center; max-width: 34ch; transform: translateY(-4%); pointer-events: none; }
.at-lettore a { pointer-events: auto; }
.at-piano { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--testo-2); }
.at-lettore h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-stretch: 114%; letter-spacing: -.03em; line-height: 1.05; }
.at-lettore h3 small { display: block; font-size: .85rem; font-weight: 500; color: var(--testo-2); letter-spacing: 0; margin-top: 4px; }
.at-motto { color: var(--testo-2); }
.at-lettore.cambia { animation: at-cambia .5s var(--uscita); }
@keyframes at-cambia { from { opacity: 0; transform: translateY(calc(-4% + 10px)); } }

/* --- 5. In sviluppo: Oryma (markup del laboratorio della home) --- */
.sl #sviluppo { background: var(--fondo-2); }
/* al posto della goccia, lo schema vivo del sistema (Alessio, 19/10/2026: «togli l'iconcina dell'avatar che sembra un
   giochino… qualcosa di più professionale»); resta l'identità di Oryma, viola e ciano */
.lab-motto { margin-top: 18px; max-width: 52ch; font-size: 1.02rem; font-weight: 600; }
.lab-palco { margin: 0; border-radius: 28px; overflow: hidden; padding: clamp(8px, 2vw, 22px);
  background: radial-gradient(60% 55% at 50% 48%, #2C2390 0%, #17134A 55%, #0D0C1C 100%);
  box-shadow: inset 0 0 0 1px rgba(136, 120, 255, .35), 0 40px 80px -44px rgba(106, 92, 255, .6); }
.lab-schema { display: block; width: 100%; height: auto; font-family: inherit; }
.lab-schema text { text-anchor: middle; fill: #C9CBEA; }
.lab-schema .ls-nome { font-size: 10.5px; font-weight: 760; font-stretch: 118%; letter-spacing: .14em; fill: #ECEBFF; }
.lab-schema .ls-nota { font-size: 9.5px; fill: #9C9FD0; }
.lab-schema .ls-chiaro { fill: #fff; }
.lab-schema .ls-registro { font-size: 10px; font-weight: 600; fill: #19E6D2; font-variant-numeric: tabular-nums; transition: opacity .25s; }
.lab-schema .ls-registro.cambia { opacity: 0; }
.ls-filo { fill: none; stroke: rgba(136, 120, 255, .55); stroke-width: 1.4; }
.ls-orbita { fill: none; stroke: rgba(230, 232, 255, .1); }
.ls-tratteggio { stroke-dasharray: 4 4; }
.ls-orbita.ls-tratteggio { stroke: rgba(25, 230, 210, .25); animation: ls-gira 60s linear infinite; transform-origin: 200px 180px; }
.ls-blocco { fill: rgba(18, 16, 52, .85); stroke: rgba(136, 120, 255, .6); stroke-width: 1.2; }
.ls-blocco.ls-tratteggio { stroke: rgba(25, 230, 210, .6); }
.ls-dietro { opacity: .45; }
.ls-nucleo { filter: drop-shadow(0 0 14px rgba(136, 120, 255, .7)); }
.ls-cancello { fill: rgba(18, 16, 52, .9); stroke: #8878FF; stroke-width: 1.4; transition: stroke .2s, fill .2s; }
.ls-cancello[data-esito] { stroke: var(--esito); fill: color-mix(in srgb, var(--esito) 22%, #12102F); }
.ls-onda { fill: #19E6D2; transform-box: fill-box; transform-origin: center; animation: ls-onda 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.17s); }
@keyframes ls-onda { from { transform: scaleY(.35); } }
@keyframes ls-gira { to { rotate: 360deg; } }
.lab-punti { list-style: none; padding: 0; margin: clamp(40px, 6vw, 72px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.lab-punti li { padding-top: 16px; border-top: 2px solid #8878FF; }
.lab-punti h3 { font-size: 1.08rem; font-weight: 760; font-stretch: 112%; margin: 0 0 8px; }
.lab-punti p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--testo-2); }
.lab-cifre { margin-top: clamp(32px, 4vw, 48px); }
.lab-stack { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.lab-stack span { padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--testo-2); box-shadow: inset 0 0 0 1px var(--linea); }
.laboratorio .nota-fonte { margin-top: 14px; }
@media (max-width: 1000px) { .lab-punti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lab-fonte-tel { display: none; }
/* telefono (Alessio, 19/10/2026: «da mobile è molto lunga dobbiamo riorganizzarla, su desktop molto bella»): i punti in
   una fila che scorre di lato con la scheda dopo tagliata, le cifre su una riga con la fonte detta una volta, le
   tecnologie su una riga che scorre; Owner Agent resta nel DOM ma non si mostra */
@media (max-width: 620px) {
  .lab-altro { display: none; }
  .lab-motto { font-size: .95rem; }
  .lab-punti { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 28px calc(-1 * var(--margine)) 0;
    padding: 0 var(--margine) 6px; scroll-padding-inline: var(--margine); scrollbar-width: none; }
  .lab-punti::-webkit-scrollbar, .lab-stack::-webkit-scrollbar { display: none; }
  .lab-punti li { flex: 0 0 82%; scroll-snap-align: start; padding: 14px 16px 16px; border-top: 0; border-radius: 16px;
    background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
  .lab-punti h3 { font-size: 1rem; margin-bottom: 6px; }
  .lab-punti p { font-size: .9rem; line-height: 1.5; }
  .sl .lab-cifre { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 0; margin: 22px 0 16px; }
  .sl .lab-cifre li { display: block; font-size: .74rem; line-height: 1.3; }
  .sl .lab-cifre b { font-size: 1.3rem; margin-bottom: 4px; }
  .lab-cifre small { display: none; }
  .lab-fonte-tel { display: inline; }
  .lab-stack { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--margine)); padding: 1px var(--margine) 4px; scrollbar-width: none; }
  .lab-stack span { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .ls-onda, .ls-orbita { animation: none !important; } }
.sl .consulenza.foglio { background: var(--giallo); color: var(--antracite); }
/* spazi della fascia in home (Alessio, 19/10/2026: «lavoriamo sugli spazi ed il copy della cta»): meno vuoto sopra e
   sotto, i passi chiudono in basso allineati al bottone invece di galleggiare a metà */
.sl .consulenza { padding-block: clamp(56px, 7vw, 104px); }
.sl .consulenza .contenitore { align-items: start; row-gap: 32px; }
.sl .cs-passi { align-self: end; gap: 14px; }
/* computer (Alessio: «è ancora troppo ampio e troppi spazi vuoti»): fascia su due righe; sopra titolo e testo affiancati,
   sotto i tre passi in fila e il bottone in fondo alla riga */
@media (min-width: 861px) {
  .sl .consulenza { padding-block: clamp(48px, 5vw, 72px); }
  .sl .consulenza .contenitore { grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 36px; }
  .sl .cs-testo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
  .sl .cs-testo h2 { max-width: none; font-size: clamp(2.3rem, 3.6vw, 3.2rem); }
  .sl .cs-testo p { margin: 0; }
  .sl .cs-passi { grid-row: auto; align-self: center; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 28px; border-top: 1px solid rgba(21, 23, 28, .2); }
  .sl .cs-passi li { font-size: 1.02rem; }
  .sl .consulenza .btn-scuro { grid-column: 2; align-self: end; }
}
@media (max-width: 860px) {
  .sl .consulenza .contenitore { row-gap: 28px; }
  .sl .cs-passi { order: 1; }
  .sl .consulenza .btn-scuro { order: 2; }
}

@media (max-width: 1000px) {
  .pt-testa, .at-testa { grid-template-columns: 1fr; }
  .pt-tessere { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--margine)); padding: 6px var(--margine) 10px; scroll-padding-inline: var(--margine); gap: 8px; scrollbar-width: none; }
  .pt-tessere li { flex: 0 0 96px; scroll-snap-align: start; }
  .pt-scheda { grid-template-columns: 1fr; }
  /* su telefono e tablet (Alessio, 19/10/2026: «vedo le icone ci clicco su una ma è lunghissimo sotto e se clicco sulle
     altre senza scorrere sembra non accada nulla»): niente pila, le icone restano agganciate sotto la barra mentre si
     legge e la scheda scelta comincia subito sotto di loro (src/js/home.js) */
  .pt-palco { display: none; }
  .pt-tessere { position: sticky; top: calc(var(--barra-h) + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--fondo); box-shadow: 0 1px 0 var(--linea); padding-top: 12px; }
  /* 72 px: a 360-430 px se ne vedono quattro e mezza, l'ultima tagliata dice che la fila continua */
  .pt-tessere li { flex-basis: 72px; }
  .pt-tile { padding: 6px 2px 8px; gap: 3px; }
  .pt-tile img { width: 52px; }
  .pt-tile[aria-selected="true"] img { transform: translateY(-3px) scale(1.04); }
  .pt-nome { font-size: .74rem; }
  .sl-due { grid-template-columns: 1fr; }
  .cn-testa { grid-template-columns: 1fr; }
  .cn-grande { grid-template-columns: 1fr; }
  .cn-vista, .cn-specchio .cn-vista { position: relative; top: auto; order: 0; margin: 0 9% 12% 0; }
  .cn-altri ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--margine)); padding: 0 var(--margine) 8px; scroll-padding-inline: var(--margine); scrollbar-width: none; }
  .cn-piccolo { flex: 0 0 min(78%, 340px); scroll-snap-align: start; }
  .at-scena { --r: min(40vw, 300px); height: 440px; }
  .at-t { width: 54px; height: 54px; left: -27px; top: -27px; }
}
@media (max-width: 620px) {
  /* attrezzi su telefono (Alessio, 19/10/2026: «il cerchio copre le scritte… due anelli verticali uno a destra e uno
     a sinistra che ruotano e al centro le scritte»; la griglia provata dopo occupava troppo: «meglio prima… dovremmo
     solo dare più profondità visiva»): due tamburi ai lati con prospettiva forte, luce che cala
     verso l'alto e il basso e una fascia di luce dove si legge; il lettore in mezzo. --b è il posto
     della tessera sul suo tamburo, data-c il tamburo (src/home.mjs); --t0 e --t1 li fanno girare (src/js/home.js) */
  .at-scena { height: calc(2 * var(--rr) + 64px); perspective: none; }
  /* il fuoco: una fascia di luce all'altezza delle tessere davanti, dove si legge */
  .at-scena::before { content: ""; position: absolute; inset: 50% -16px auto; height: 120px; translate: 0 -50%; pointer-events: none;
    background: radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--giallo) 13%, transparent), transparent 70%); }
  .at-anello { inset: 0; left: 0; top: 0; width: auto; height: auto; transform: none;
    mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
  /* ogni tessera è un oggetto solido, reso in 3D una volta sola (brand/genera-tessere-3d.mjs, <picture> in src/home.mjs):
     lastra lucida con fianco e smusso dorati (Alessio, 19/10/2026, con un'icona 3D lucida come riferimento). Niente
     ombre né riflessi in CSS: la luce è già nell'immagine */
  .at-t { width: 44px; height: 44px; top: calc(50% - 22px); left: 10px; backface-visibility: hidden;
    transform: perspective(1200px) rotateX(calc(var(--b) + var(--fi, 0deg))) translateZ(var(--rr));
    opacity: clamp(.1, cos(calc(var(--b) + var(--fi, 0deg))), 1); }
  /* due versioni speculari, girate verso il centro: la sinistra sul tamburo di sinistra, la destra sull'altro */
  .at-t img { display: none; }
  .at-t[data-c="0"] .at-3d-sx, .at-t[data-c="1"] .at-3d-dx { display: block; }
  .at-t[data-c="0"] { --fi: var(--t0, 0deg); }
  .at-t[data-c="1"] { --fi: calc(-1 * var(--t1, 0deg)); left: auto; right: 10px; }
  .at-t img { filter: brightness(calc(.55 + .45 * cos(calc(var(--b) + var(--fi, 0deg))))); }
  .at-t.spento { display: none; }
  /* misure uguali per tutte: niente ingrandimento al tocco né per la scelta (sul telefono il :hover resta appiccicato) */
  .at-t:hover img, .at-t:focus-visible img, .at-t.scelto img { transform: none; }
  .at-t.scelto img { filter: none; }
  .at-lettore { max-width: none; margin-inline: 68px; transform: none; }
  /* i filtri in una riga sola che scorre di lato, come le icone di «Dove si inceppa?» */
  .at-filtri { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--margine)); padding: 2px var(--margine) 6px; scrollbar-width: none; }
  .at-filtri button { flex: none; }
  .at-lettore h3 { font-size: 1.45rem; overflow-wrap: anywhere; }
  .at-motto { font-size: .92rem; }
  /* tre numeri affiancati non stanno: uno per riga, numero e didascalia accanto */
  .cn-cifre { grid-template-columns: 1fr; gap: 14px; }
  .cn-cifre li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
  .cn-cifre b { margin: 0; }
  .cn-cifre small { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-piano, .sl-piano img { transition: none; }
}

/* ---------- Pagine interne nello stile della home (Alessio, 19/10/2026: «prepara le altre pagine nello stile e nel tono
   della home»). Classe «sl interna» sul body: fogli, titoli e fascia finale vengono dalla home; il fondo a curve resta
   visibile dietro la testata, che fa da apertura, e i fogli pieni lo coprono. ---------- */
.sl.interna .testata-pagina { padding-bottom: calc(clamp(48px, 6vw, 88px) + var(--piega)); }
.sl.interna main > .foglio:first-of-type, .sl.interna main > .contenitore + .foglio { margin-top: calc(-1 * var(--piega)); }
.fg-testa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 56px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.fg-testa .sl-lead { margin: 0 0 6px; }
.fg-testa h2 { max-width: 15ch; }
.fg-carte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.fg-carta { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 20px; border-radius: 20px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.fg-voce { font-weight: 650; font-size: 1.08rem; line-height: 1.35; }
.fg-fa { color: var(--testo-2); font-size: .95rem; line-height: 1.55; }
.fg-prova { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linea); font-size: .84rem; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.fg-prova::before { content: ""; width: 8px; height: 8px; background: var(--giallo); flex: none; transform: translateY(-1px); }
.fg-cifre { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; margin: 0; }
.fg-punti { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.fg-punti li { padding: 22px 22px 20px; border-radius: 18px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.fg-punti h3 { display: flex; gap: 10px; align-items: center; font-size: 1.1rem; font-weight: 740; font-stretch: 112%; margin: 0 0 8px; }
.fg-punti h3::before { content: ""; width: 14px; height: 3px; background: var(--giallo); flex: none; }
.fg-punti p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--testo-2); }
.fg-punti a { color: var(--testo); font-weight: 600; }
.fg-fatto { columns: 2; column-gap: 48px; display: block; margin: 0; }
.fg-fatto li { break-inside: avoid; margin-bottom: 10px; }
.fg-nota { margin-top: 22px; font-size: .86rem; color: var(--testo-2); max-width: 70ch; }
.fg-nota a { color: var(--testo); }
@media (max-width: 1000px) {
  .fg-testa { grid-template-columns: 1fr; }
  .fg-cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  /* schede in fila che scorre di lato, la successiva tagliata (come «Costruiamo» e il laboratorio in home) */
  .fg-carte, .fg-punti { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--margine));
    padding: 2px var(--margine) 8px; scroll-padding-inline: var(--margine); scrollbar-width: none; }
  .fg-carte::-webkit-scrollbar, .fg-punti::-webkit-scrollbar { display: none; }
  .fg-carta, .fg-punti li { flex: 0 0 82%; scroll-snap-align: start; }
  .fg-fatto { columns: 1; }
  .sl .fg-cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fg-cifre-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* testata delle pagine interne come l'apertura della home: pulita, senza curve di livello (Alessio, 19/10/2026: «lo voglio pulito»)
   resta solo la luce che segue il puntatore */
.sl.interna .testata-pagina.buio::before { background:
  radial-gradient(520px circle at var(--mx, 70%) var(--my, 40%), var(--testata-raggio), transparent 70%); }
/* un prodotto per foglio: il foglio dà già respiro e taglio */
.fg-prodotto .prodotto { padding: 0; border-top: 0; }
.fg-prodotto .prodotto h2 small { display: block; margin-top: 6px; font-size: .9rem; font-weight: 600; letter-spacing: .02em; color: var(--testo-2); }
.fg-prodotto .fg-cifre { margin-top: 24px; }
.fg-galleria .striscia { margin-top: calc(-1 * var(--respiro) * .4); }
.fg-galleria .filtri { margin-top: 0; }
@media (max-width: 1000px) { .fg-cifre-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.testata-pagina .cn-tipo { margin-top: 22px; }

/* --- Più compatto (Alessio, 4/11/2026: «le pagine hanno tantissimo spazio vuoto testi enormi quindi va ridimensionata e
   ravvicinata, meno scroll»). Strato unico in fondo: titoli più piccoli, spazi fra sezioni e dentro le sezioni ridotti di
   circa un terzo. Per tornare indietro basta togliere questo blocco. --- */
.sl { --respiro: clamp(40px, 4.6vw, 68px); --piega: clamp(18px, 2.4vw, 32px); }
.sl h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); }
.sl-lead, .testata-pagina .lead, .apertura .lead, .intro, .cs-testo p { font-size: clamp(1rem, 1.2vw, 1.1rem); margin-top: 12px; }
.apertura h1 { font-size: clamp(2.2rem, 4vw, 3.7rem); }
.testata-pagina { padding: clamp(28px, 5vh, 60px) 0 clamp(28px, 3.5vw, 48px); }
.sl.interna .testata-pagina { padding-bottom: calc(clamp(28px, 3.5vw, 48px) + var(--piega)); }
.testata-pagina h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
.testata-pagina .azioni, .testata-pagina .cn-tipo { margin-top: 20px; }
.fg-testa { margin-bottom: clamp(20px, 2.6vw, 32px); gap: 10px 40px; }
.fg-carta { padding: 20px 20px 18px; }
.fg-punti li { padding: 18px 20px 16px; }
.prodotto h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: 14px; }
.prodotto-motto { margin-top: 10px; font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.prodotto .scheda { margin-top: 18px; }
.progetti { gap: clamp(32px, 4vw, 56px); margin-top: clamp(24px, 3vw, 36px); }
.progetto h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.pr-vista { padding: clamp(18px, 2.6vw, 32px); }
.pr-scheda { margin-top: 16px; }
.prove b { font-size: clamp(2.2rem, 3.6vw, 2.9rem); }
.gigante-num b { font-size: clamp(4rem, 9vw, 7rem); }
.vetrina { margin-top: clamp(28px, 3vw, 40px); }
.vv-giu { margin-top: clamp(28px, 5vw, 72px); }
.negozi { margin-top: clamp(24px, 3vw, 36px); }
.consulenza, .sl .consulenza.foglio { padding-block: clamp(44px, 5.5vw, 80px); }
.cs-testo h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.cs-passi li { font-size: 1.05rem; }
.cs-passi-grandi { margin-top: clamp(24px, 3vw, 36px); }
.cs-passi-grandi b { font-size: 1.25rem; }
.cs-passi-grandi li::before { width: 44px; height: 44px; margin-bottom: 12px; }
.passi { margin-top: clamp(28px, 3vw, 40px); }
.passi li::before { font-size: 2.1rem; margin-bottom: 14px; }
.canale-telefono b { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.piede { padding-top: clamp(36px, 4vw, 56px); }
.piede-basso { margin-top: clamp(28px, 3vw, 40px); }
.canale-email { margin-top: 14px; }
.canale-email a { display: block; margin-top: 4px; font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 700; color: var(--testo); text-decoration-color: var(--giallo); text-underline-offset: 4px; overflow-wrap: anywhere; }

/* ======================================================================================================
   V2 «precisione» (proposta del 4/11/2026, panel dei senior con GPT). Rientro: togliere da qui in fondo.
   Premium = precisione e prova: fonti leggibili, giallo raro, chiusura scura, apertura che porta i numeri.
   ====================================================================================================== */
:root { --fonte: .85rem; }
/* --filo si calcola dove si ridefinisce il testo: dichiarato solo su :root restava scuro anche nelle sezioni scure */
:root, .inverti { --filo: color-mix(in srgb, var(--testo) 12%, transparent); }

/* fonti: mai microscopiche (prima .72-.74rem) */
.sl-prova small, .cn-cifre small, .fg-cifre small { font-size: var(--fonte); line-height: 1.45; color: var(--testo-2); }
.nota-fonte { font-size: var(--fonte); }

/* apertura: nota sotto l'azione, firma di Alessio, tre prove con la loro fonte */
.apertura { flex-wrap: wrap; align-content: center; }
.apertura-testo { padding-bottom: clamp(24px, 4vh, 48px); }
.apertura .azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.ap-nota { font-size: .95rem; color: var(--testo-2); max-width: 30ch; }
.ap-firma { margin-top: clamp(28px, 4vh, 44px); font-size: .95rem; color: var(--testo-2); max-width: 46ch; }
.ap-firma::before { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 2px; margin-right: 12px; background: var(--giallo); }
.ap-firma a { color: var(--testo); font-weight: 600; }
.ap-prove { position: relative; z-index: 3; width: 100%; padding-bottom: calc(var(--piega, 32px) + clamp(28px, 5vh, 56px)); pointer-events: none; }
.ap-prove ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 880px; border-top: 1px solid var(--filo); }
.ap-prove li { padding: 18px 24px 0 0; display: grid; gap: 2px; align-content: start; }
.ap-prove li + li { padding-left: 24px; border-left: 1px solid var(--filo); }
.ap-prove b { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 760; font-stretch: 112%; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ap-prove span { font-size: .95rem; line-height: 1.35; }
.ap-prove small { font-size: var(--fonte); color: var(--testo-2); line-height: 1.4; margin-top: 4px; }
@media (max-width: 860px) {
  .ap-prove ul { grid-template-columns: 1fr; border-top: 0; }
  .ap-prove li, .ap-prove li + li { padding: 14px 0; border-left: 0; border-top: 1px solid var(--filo); }
  .ap-prove li { grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; }
  .ap-prove b { grid-row: span 2; min-width: 4.6ch; }
  .ap-prove span, .ap-prove small { grid-column: 2; }
  .hero-tel .sl .apertura-testo { padding-bottom: 8px; }
  .ap-prove { z-index: 26; background: linear-gradient(transparent, var(--fondo) 30%); padding-top: 12px; }
}

/* «Da cosa parti?»: la frase di chi ha il bisogno è il titolo della scheda, il servizio è l'etichetta */
.co-nome { font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); margin-top: 18px; }
.co-carta h3.co-voce { font-size: clamp(1.25rem, 1.6vw, 1.45rem); font-weight: 720; line-height: 1.2; letter-spacing: -.02em; margin-top: 6px; }

/* il metodo in una fascia */
.mt { padding-block: clamp(56px, 7vw, 104px); }
.mt-testa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 48px; }
.mt-testa h2 { max-width: 20ch; font-size: clamp(1.75rem, 3vw, 2.6rem); }
.mt-passi { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--filo); }
.mt-passi li { padding: 22px 24px 0 0; }
.mt-passi li + li { padding-left: 24px; border-left: 1px solid var(--filo); }
.mt-passi span { font-size: var(--fonte); font-weight: 650; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.mt-passi h3 { margin-top: 10px; font-size: 1.2rem; letter-spacing: -.015em; }
.mt-passi p { margin-top: 6px; color: var(--testo-2); font-size: .98rem; line-height: 1.5; }
@media (max-width: 960px) { .mt-passi { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; } .mt-passi li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .mt-passi { grid-template-columns: 1fr; border-top: 0; } .mt-passi li, .mt-passi li + li { padding: 16px 0; border-left: 0; border-top: 1px solid var(--filo); } }

/* chiusura: non più una fascia gialla uguale in fondo a ogni pagina ma un pannello antracite; il giallo resta
   all'azione (una sola per vista). In tema scuro il pannello si stacca con un filo giallo e una superficie più chiara. */
.sl .consulenza.foglio { background: #1C1F26; color: #F2F0EA; box-shadow: inset 0 1px 0 rgba(255, 210, 63, .55); }
@media (prefers-color-scheme: light) { :root:not([data-tema="scuro"]) .sl .consulenza.foglio { background: var(--antracite); box-shadow: none; } }
:root[data-tema="chiaro"] .sl .consulenza.foglio { background: var(--antracite); box-shadow: none; }
.sl .consulenza h2 { color: #F2F0EA; }
.sl .consulenza p { color: #C9CBD1; }
.sl .consulenza .btn-scuro { background: var(--giallo); color: var(--antracite); }
.sl .consulenza .btn-scuro:hover { background: var(--giallo-premuto); }
.sl .consulenza :focus-visible { outline-color: var(--giallo); }
.sl .consulenza .cs-passi { border-top-color: rgba(242, 240, 234, .14) !important; }
.sl .consulenza .cs-passi li { color: #C9CBD1; }
.sl .consulenza .cs-passi b { color: #F2F0EA; }
.sl .consulenza .cs-passi li::before { background: transparent !important; color: var(--giallo) !important; border: 1.5px solid var(--giallo) !important; }

/* Field Order: il percorso dell'ordine in una riga, sotto le catture */
.flusso-riga { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; counter-reset: fr; }
.flusso-riga li { counter-increment: fr; font-size: .92rem; color: var(--testo-2); padding: 6px 12px 6px 8px; border: 1px solid var(--filo); border-radius: 999px; display: inline-flex; gap: 8px; align-items: center; }
.flusso-riga li::before { content: counter(fr); width: 20px; height: 20px; border-radius: 50%; background: var(--giallo); color: var(--antracite); font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.flusso-riga b { color: var(--testo); font-weight: 650; }

/* galleria: si entra dal problema */
.percorsi { margin: clamp(20px, 3vw, 32px) 0 clamp(24px, 3vw, 36px); }
.percorsi-titolo { font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); }
.percorsi ul { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.percorsi li { padding: 16px 18px; border: 1px solid var(--filo); border-radius: 14px; background: color-mix(in srgb, var(--superficie) 60%, transparent); }
.percorsi h3 { font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.25; }
.percorsi p { margin-top: 8px; font-size: .92rem; line-height: 1.6; }
.percorsi a { color: var(--testo); }
@media (max-width: 1000px) { .percorsi ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .percorsi ul { grid-template-columns: 1fr; } }

/* contatti: il numero si tocca */
.canale-telefono a.tel { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--giallo); }

/* schede che scorrono di lato su telefono: posizione «1 di 4» e frecce (script in clivo.js, v2) */
.scorri-guida { display: none; }
@media (max-width: 860px) {
  .scorri-guida { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: var(--fonte); color: var(--testo-2); font-variant-numeric: tabular-nums; }
  .scorri-guida b { color: var(--testo); }
  .scorri-guida div { display: flex; gap: 8px; }
  .scorri-guida button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--testo); font-size: 1.1rem; cursor: pointer; }
  .scorri-guida button:disabled { opacity: .35; cursor: default; }
}

/* pagina /privacy/ (4/11/2026 sera): voci a due colonne con un filo fra l'una e l'altra */
.lg-voce + .lg-voce { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--filo); }
.lg-voce h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.lg-elenco { display: grid; gap: .8em; padding-left: 1.1em; list-style: disc; color: var(--testo-2); }
.lg-elenco b { color: var(--testo); }
.lg-voce code { font-size: .92em; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--testo) 8%, transparent); }
.lg-voce .prosa a, .piede-basso a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Contatti, domande frequenti (4/11/2026): tre colonne su PC, una sotto l'altra su telefono (niente scorrimento di lato) */
.fg-punti.fg-domande { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .fg-punti.fg-domande { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .fg-punti.fg-domande { display: grid; grid-template-columns: 1fr; overflow: visible; margin-inline: 0; padding: 0; }
  .fg-punti.fg-domande li { flex: none; }
}
/* telefono: il testo dell'apertura resta leggibile sopra la scena (alone del colore di fondo dietro le lettere) */
@media (max-width: 860px) {
  .hero-tel .sl .apertura-testo h1, .hero-tel .sl .apertura-testo .lead, .hero-tel .sl .apertura-testo .ap-nota {
    text-shadow: 0 0 2px var(--fondo), 0 0 10px var(--fondo), 0 0 22px var(--fondo); }
}
/* telefono: in home i casi mostrano partenza, numeri e link; l'elenco del lavoro fatto resta nella pagina del caso */
@media (max-width: 620px) { .home .cn-fatto-titolo, .home .cn-fatto { display: none; } }
/* home: le due strade sotto il sottotitolo (gestione continua o progetto preciso), parere GPT del 4/11/2026 */
.ap-strade { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0 0; font-weight: 600; }
.hero-tel .sl .apertura-testo .ap-strade a { text-shadow: 0 0 2px var(--fondo), 0 0 10px var(--fondo); }
/* telefono: velo del colore di fondo dietro il blocco di testo dell'apertura, la scena resta visibile ai lati e sotto */
@media (max-width: 860px) {
  .hero-tel .sl .apertura-testo { position: relative; }
  .hero-tel .sl .apertura-testo::before { content: ""; position: absolute; inset: 0 -8px 40% -8px; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 90% at 30% 40%, color-mix(in srgb, var(--fondo) 82%, transparent) 55%, transparent 100%); }
}
/* parole col trattino che non vanno spezzate a capo («e-commerce» nel titolo della home) */
.intero { white-space: nowrap; }