/* Quisquilia · «Sotto il cofano». Componente condiviso da home e Metodo, sempre di notte.
   Il registro in diretta (.cofano-log) scorre riga per riga e accende il nodo della catena (.catena).
   La pipeline di analisi (.analisi) si accende passo per passo allo scroll. Il gergo è vero, i dati sono di fantasia.
   Accenti caldi: corallo per ciò che è vivo (nodo attivo, voce in uscita, il fermo umano), pesca per la regia e i dati. */

.cofano { --corallo: var(--fucsia); --corallo-testo: #ff7c8b; } /* corallo schiarito per testo piccolo su notte: 6:1 */
.cofano-isola {
  --notte: #071c27; --mint: #f9fffb; --sky-chiaro: #d6e5ee; --nebbia: #a9bfcc; --sky: #8eb7ce;
  --linea: rgba(214, 229, 238, .14); --linea-forte: rgba(214, 229, 238, .4); --titolo: #f9fffb;
  color: var(--mint);
}

/* capo. 2/11 · allineati in cima come .capo in interne.css: in fondo lasciava un vuoto sopra al
   paragrafo quando il titolo era corto. */
.cofano-capo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px clamp(24px, 4vw, 80px); align-items: start; }
.cofano-capo p { font-size: var(--t-lead); line-height: 1.55; color: var(--sky-chiaro); }
.cofano-capo p b { color: var(--pesca); font-weight: 600; }

/* la catena in diretta */
.cofano-banco { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(40px, 7vh, 72px); }
.catena { display: grid; align-content: start; gap: 0; padding: clamp(18px, 2vw, 28px); counter-reset: nodo; }
.catena-testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--nebbia); font-size: var(--t-piccolo); }
.catena-testa .mono { color: var(--pesca); }
.catena li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; }
.catena li::before { content: ""; width: 10px; height: 10px; margin-left: 6px; border-radius: 50%; border: 1.5px solid var(--linea-forte); background: var(--notte); transition: background .25s, border-color .25s, transform .4s var(--esce), box-shadow .4s; z-index: 1; }
.catena li::after { content: ""; position: absolute; left: 10.25px; top: 50%; height: 100%; width: 1.5px; background: var(--linea); }
.catena li:last-child::after { display: none; }
.catena b { font-weight: 500; font-size: var(--t-testo); color: var(--sky-chiaro); transition: color .25s; }
.catena .mono { color: var(--nebbia); font-size: var(--t-micro); transition: color .25s; }
.catena li.fatto::before { border-color: var(--sky); background: var(--sky); }
.catena li.fatto::after { background: linear-gradient(var(--sky), var(--linea)); }
.catena li.ora::before { border-color: var(--corallo); background: var(--corallo); transform: scale(1.5); box-shadow: 0 0 0 5px rgba(244, 54, 76, .18); }
.catena li.ora b { color: var(--mint); }
.catena li.ora .mono { color: var(--pesca); }
.catena-ms { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--nebbia); font-size: var(--t-piccolo); }
.catena-ms .mono { font-size: var(--t-t4); color: var(--pesca); font-weight: 400; letter-spacing: -.015em; }

/* il registro */
.cofano-log { display: flex; flex-direction: column; padding: clamp(18px, 2vw, 26px); min-width: 0; }
.log-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--linea); color: var(--nebbia); font-size: var(--t-piccolo); }
.log-testa .console-rec, .log-rec { width: 8px; height: 8px; border-radius: 50%; background: var(--corallo); animation: log-rec 1.6s ease-in-out infinite; }
@keyframes log-rec { 50% { opacity: .35; } }
.log-testa .mono { color: var(--sky-chiaro); }
.log-testa .etichetta-finta { margin-left: auto; }
.log-righe { position: relative; height: 22.5rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px; font: 400 var(--t-dato)/1.5 var(--mono); font-variant-numeric: tabular-nums; -webkit-mask-image: linear-gradient(transparent, #000 26%); mask-image: linear-gradient(transparent, #000 26%); }
.log-righe li { display: grid; grid-template-columns: 6.6em 4.6em 11.5em minmax(0, 1fr); gap: 0 12px; padding: 3px 0; align-items: baseline; }
.log-righe li.nuova { animation: log-entra .35s var(--esce); }
@keyframes log-entra { from { opacity: 0; transform: translateY(8px); } }
.log-righe .t { color: rgba(169, 191, 204, .7); }
.log-righe .s { color: var(--sky); }
.log-righe .e { color: var(--mint); }
.log-righe .d { color: var(--sky-chiaro); opacity: .85; overflow-wrap: anywhere; }
.log-righe .regia .s, .log-righe .guard .s, .log-righe .ctx .s { color: var(--pesca); }
.log-righe .out .s { color: var(--corallo-testo); }
.log-righe .out .e, .log-righe .out .d { color: var(--mint); font-family: var(--display); font-size: var(--t-testo); opacity: 1; }
.log-righe .out .e { color: var(--corallo-testo); font-family: var(--mono); font-size: var(--t-dato); }
.log-righe .hook .s, .log-righe .rec .s { color: var(--pesca); }
.oscurato { display: inline-block; vertical-align: -.15em; height: 1.05em; width: var(--l, 6em); border-radius: 2px; background: repeating-linear-gradient(-45deg, rgba(247, 205, 182, .55) 0 3px, rgba(247, 205, 182, .3) 3px 6px); }
.log-cursore { display: inline-block; width: .55em; height: 1.1em; vertical-align: -.2em; background: var(--corallo); animation: log-rec 1s steps(2) infinite; }

.cofano-tradotto { margin-top: clamp(20px, 3vh, 32px); font-size: var(--t-testo); line-height: 1.55; color: var(--sky-chiaro); }
.cofano-tradotto b { color: var(--mint); font-weight: 600; }

/* dopo la sessione: la pipeline di analisi */
.analisi-capo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(24px, 4vw, 80px); align-items: start; margin-top: clamp(72px, 12vh, 140px); }
.analisi-capo h3 { font: 500 var(--t-t2)/1.02 var(--voce); letter-spacing: -.02em; text-wrap: balance; }
.analisi-capo p { font-size: var(--t-testo); line-height: 1.55; color: var(--sky-chiaro); }
.analisi { margin-top: clamp(32px, 5vh, 56px); border-bottom: 1px solid var(--linea); }
.analisi li { position: relative; display: grid; grid-template-columns: 3.2em minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: 8px clamp(16px, 2vw, 32px); align-items: baseline; padding: clamp(16px, 2.4vh, 24px) 0; border-top: 1px solid var(--linea); transition: opacity .5s; }
.analisi li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--pesca), transparent 70%); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--esce); }
.analisi li.acceso::before { transform: scaleX(1); }
.analisi .n { font: 400 var(--t-dato)/1 var(--mono); color: var(--nebbia); transition: color .4s; }
.analisi li.acceso .n { color: var(--pesca); }
.analisi h4 { font: 600 var(--t-t4)/1.2 var(--display); letter-spacing: -.015em; }
.analisi code { font: 400 var(--t-dato)/1.6 var(--mono); color: var(--sky); overflow-wrap: anywhere; }
.analisi code i { font-style: normal; color: var(--pesca); }
.analisi p { color: var(--sky-chiaro); line-height: 1.5; font-size: var(--t-testo); }
.analisi .fermo h4 { color: var(--corallo-testo); }
.analisi .fermo code { color: var(--corallo-testo); }
.analisi .fermo .n { color: var(--corallo-testo); }
.analisi li.fermo::before { background: linear-gradient(90deg, var(--corallo), transparent 70%); }
.analisi-nota { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--nebbia); font-size: var(--t-piccolo); }
.analisi-nota .oscurato { width: 2.4em; margin-right: 6px; }

/* versione breve in home: la pipeline in una riga */
.filiera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: clamp(28px, 4vh, 44px); }
.filiera-nome { margin-right: 8px; color: var(--nebbia); font-size: var(--t-piccolo); }
.filiera li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea); font: 400 var(--t-dato)/1 var(--mono); color: var(--sky-chiaro); }
.filiera li::after { content: "→"; margin-left: 4px; color: var(--nebbia); }
.filiera li:last-child::after { display: none; }
.filiera .caldo { color: var(--pesca); border-color: rgba(247, 205, 182, .35); }
.filiera .fermo { color: #fff; background: var(--corallo); border-color: var(--corallo); font-weight: 500; }

/* pannello scuro dentro la pagina chiara (Metodo) */
.cofano-isola.cofano-pannello { padding: clamp(28px, 4.4vw, 72px); border-radius: clamp(24px, 3vw, 40px); background: radial-gradient(120% 80% at 100% 0%, rgba(247, 205, 182, .16), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(244, 54, 76, .12), transparent 60%), linear-gradient(160deg, #1b2c6c, #0b2433 62%); box-shadow: 0 30px 60px -34px rgba(7, 28, 39, .55); }
.cofano-isola .titolo-sezione { color: var(--mint); }
.cofano-isola .vetro { background: linear-gradient(160deg, rgba(29, 47, 122, .45), rgba(7, 28, 39, .7)); border: 1px solid var(--linea); backdrop-filter: none; box-shadow: none; }
.cofano-isola .etichetta-finta { color: var(--sky-chiaro); border-color: var(--linea); }
.cofano-isola ::selection { background: var(--fucsia); color: #fff; }

@media (max-width: 1080px) {
  .cofano-capo, .cofano-banco, .analisi-capo { grid-template-columns: 1fr; }
  .catena ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); column-gap: 20px; }
  .catena li::after { display: none; }
  .analisi li { grid-template-columns: 3.2em minmax(0, 1fr); }
  .analisi code, .analisi p { grid-column: 2; }
}
@media (max-width: 640px) {
  .catena ol { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .catena li { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 8px 0; }
  .catena li .mono { display: none; }
  .catena b { font-size: var(--t-testo); }
  .log-righe { height: 24rem; font-size: var(--t-micro); }
  .log-righe li { grid-template-columns: 4.6em minmax(0, 1fr); }
  .log-righe .t { grid-row: 1 / 3; }
  .log-righe .s { display: none; }
  .log-righe .d { grid-column: 2; }
  .log-testa .etichetta-finta { margin-left: 0; }
  .analisi li { grid-template-columns: 1fr; }
  .analisi code, .analisi p { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .log-righe li.nuova { animation: none; }
  .log-rec, .log-cursore { animation: none; }
}

/* spazi in home */
.capitolo.cofano { padding: clamp(100px, 16vh, 200px) 0 clamp(60px, 10vh, 120px); }
.cofano .rimando { margin-top: clamp(24px, 4vh, 40px); }
/* spazi in Metodo */
.sezione.cofano .analisi-capo { margin-top: clamp(64px, 10vh, 120px); }

/* ===================================================================== workflow di agenti */
.agenti { padding: clamp(18px, 2vw, 28px); margin-top: clamp(40px, 7vh, 72px); }
.agenti-tela { position: relative; margin-top: 18px; padding-bottom: 40px; }
.agenti-fili { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.agenti-fili path { fill: none; stroke: rgba(142, 183, 206, .32); stroke-width: 1.4; }
.agenti-fili path.ritorno { stroke: rgba(255, 124, 139, .55); stroke-dasharray: 4 5; }
.agenti-fili path.a-capo { stroke: rgba(247, 205, 182, .45); stroke-dasharray: 2 4; }
.pk { filter: drop-shadow(0 0 4px currentColor); }
.pk--sky { fill: var(--sky); color: var(--sky); }
.pk--pesca { fill: var(--pesca); color: var(--pesca); }
.pk--corallo { fill: var(--corallo); color: var(--corallo); }

.corsia { position: relative; }
.corsia + .corsia { margin-top: 64px; }
.corsia-nome { margin-bottom: 12px; font-size: var(--t-piccolo); color: var(--nebbia); }
.corsia + .corsia .corsia-nome { color: var(--pesca); }
.agenti-griglia { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px clamp(14px, 2vw, 34px); align-items: center; }
.agenti .col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.ag { position: relative; display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linea-forte); background: rgba(7, 28, 39, .86); transition: border-color .3s, box-shadow .4s, background .3s; }
.ag-tipo { display: flex; align-items: center; gap: 6px; font-size: var(--t-micro); color: var(--nebbia); }
.ag-tipo img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.ag b { font-weight: 600; font-size: var(--t-piccolo); line-height: 1.2; color: var(--mint); overflow-wrap: anywhere; }
.ag-id { font-size: var(--t-micro); color: var(--sky); }
.ag-st { font-size: var(--t-micro); color: var(--nebbia); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-st .oscurato { width: 2em; }
.ag--persona { border-color: rgba(255, 124, 139, .45); border-style: solid; }
.ag--persona .ag-tipo { color: var(--corallo-testo); }
.ag--dati { border-style: dashed; border-color: rgba(247, 205, 182, .5); }
.ag--dati .ag-tipo { color: var(--pesca); }

.ag.lavora { border-color: var(--pesca); box-shadow: 0 0 0 3px rgba(247, 205, 182, .14); }
.ag.lavora .ag-st { color: var(--pesca); }
.ag.lavora::after { content: ""; position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--pesca); animation: log-rec 1s ease-in-out infinite; }
.ag.fatto { border-color: rgba(142, 183, 206, .55); }
.ag.fatto::after { content: "✓"; position: absolute; top: 7px; right: 10px; font: 500 var(--t-micro)/1 var(--mono); color: var(--sky); }
.ag.fermo { border-color: var(--corallo); background: rgba(244, 54, 76, .12); box-shadow: 0 0 0 4px rgba(244, 54, 76, .14); animation: ag-fermo 1.4s ease-in-out infinite; }
.ag.fermo .ag-st { color: var(--corallo-testo); }
@keyframes ag-fermo { 50% { box-shadow: 0 0 0 8px rgba(244, 54, 76, .06); } }
.ag.rifiuta { border-color: var(--corallo); background: rgba(244, 54, 76, .16); }
.ag.rifiuta .ag-st { color: var(--corallo-testo); }

.agenti-basso { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(20px, 3vw, 48px); align-items: end; padding-top: 16px; border-top: 1px solid var(--linea); }
.agenti-log { height: 11.5rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font: 400 var(--t-micro)/1.5 var(--mono); font-variant-numeric: tabular-nums; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.agenti-log li { display: grid; grid-template-columns: 6.2em 6.4em minmax(0, 1fr); gap: 0 12px; padding: 2px 0; }
.agenti-log li.nuova { animation: log-entra .35s var(--esce); }
.agenti-log .t { color: rgba(169, 191, 204, .7); }
.agenti-log .s { color: var(--sky); }
.agenti-log .d { color: var(--sky-chiaro); overflow-wrap: anywhere; }
.agenti-log .umano .s, .agenti-log .no .s, .agenti-log .no .d { color: var(--corallo-testo); }
.agenti-log .si .d { color: var(--mint); }
.agenti-tradotto { font-size: var(--t-testo); line-height: 1.5; color: var(--sky-chiaro); min-height: 4.5em; }
.agenti-tradotto b { color: var(--mint); font-weight: 600; }

/* verticale (classe messa dallo script sotto i 760px di tela) */
.agenti-tela.verticale { padding: 0 0 0 26px; }
.verticale .agenti-griglia { grid-template-columns: 1fr; gap: 26px; }
.verticale .col { flex-direction: row; }
.verticale .col > .ag { flex: 1; }
.verticale .corsia + .corsia { margin-top: 48px; }
@media (max-width: 760px) {
  .agenti-basso { grid-template-columns: 1fr; }
  .agenti-log { height: 13rem; font-size: var(--t-micro); }
  .agenti-log li { grid-template-columns: 4.8em minmax(0, 1fr); }
  .agenti-log .t { display: none; }
  .agenti-log li { grid-template-columns: 5.4em minmax(0, 1fr); }
  .agenti .log-testa .etichetta-finta { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ag.lavora::after, .ag.fermo { animation: none; } }

/* compatto: il tipo si legge dal colore del bordo. Agenti senza etichetta, persona e dati sì. */
.ag { padding: 8px 11px 9px; gap: 2px; }
.ag-tipo { font-size: var(--t-micro); }
.ag:not(.ag--persona):not(.ag--dati):not(.ag--voce) .ag-tipo { display: none; }
.ag.ag--voce { padding-left: 40px; }
.ag.ag--voce .ag-tipo { display: block; position: absolute; left: 10px; top: 10px; font-size: 0; }
.ag--voce .ag-tipo img { width: 22px; height: 22px; }
.agenti .col { gap: 8px; }
.corsia + .corsia { margin-top: 44px; }
.corsia-nome { margin-bottom: 4px; }
.agenti-tela { padding-top: 26px; padding-bottom: 8px; }
.agenti-log { height: 9.5rem; }

/* 15/10: niente box. Il cofano è una fascia di notte a tutta larghezza, senza angoli né ombra.
   30/10: la fascia non è più un riquadro dipinto sulla sola section.cofano, ma un velo (::before, dietro a tutto
   il contenuto di main grazie allo z-index negativo) che risale ben oltre il bordo alto della sezione: arriva
   dietro al blocco esempio del flusso (.flusso-palco) così non si vede più la riga netta dove la sezione iniziava.
   Si dissolve ai due bordi (mask-image) invece di tagliare di netto, e usa gli stessi colori di .strato-lettura
   (metodo.css) così è la stessa identica fascia di notte vista altrove nel sito, non una ricetta a parte.
   2/11 · .flusso ha uno z-index esplicito (vedi metodo-flusso.css) per restare sopra a questo velo dove
   si sovrappongono, e il punto in cui la maschera diventa scura del tutto è ancorato a "100svh" (l'altezza
   del velo sopra al vero bordo del cofano): il buio pieno arriva un po' dopo quel bordo, dentro alla sezione
   vera, così si vede una transizione graduale invece di un salto netto appena finisce il blocco chiaro.
   2/11 bis · il buio pieno arriva PRIMA del titolo "Sotto il cofano." (circa 193px dopo il bordo), non dopo:
   altrimenti titolo e testo cadevano ancora nella parte chiara della dissolvenza, slavati. Anche i colori del
   velo sono ancorati a "100svh" come la maschera, non più a una percentuale della sua altezza intera (che
   include il tratto nascosto dietro al blocco esempio): prima il titolo cadeva nel primo tratto del gradiente,
   quasi tutto blu imperiale; ora cade già nel blu petrolio più scuro, coerente con il resto del sito.
   2/11 ter · anche in fondo la dissolvenza era troppo larga (200px) e slavava la nota "riservato..." che sta a
   soli 117-139px dal bordo basso: ridotta a 100px così la nota resta piena e la dissolvenza avviene solo nel
   padding vuoto dopo di lei.
   2/11 quater · la maschera era due rampe lineari (un salto netto a metà), mentre quella dell'apertura scura
   della pagina degli output (.infinito in esempi.css) usa una curva a più tappe, lenta-veloce-lenta, che si vede
   molto più morbida. Stessa identica curva qui, sia in cima che in fondo, solo specchiata per la direzione. */
section.cofano:has(.cofano-pannello) {
  position: relative;
  padding: clamp(80px, 13vh, 160px) 0;
}
section.cofano:has(.cofano-pannello)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: calc(-100svh - 240px);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(247, 205, 182, .16), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(244, 54, 76, .10), transparent 60%),
    linear-gradient(180deg, #0e2e3e calc(100svh + 140px), #0b2433 calc(100svh + 640px));
  mask-image: linear-gradient(180deg,
    transparent calc(100svh + 140px),
    rgba(0, 0, 0, .01) calc(100svh + 168px),
    rgba(0, 0, 0, .04) calc(100svh + 188px),
    rgba(0, 0, 0, .12) calc(100svh + 209px),
    rgba(0, 0, 0, .28) calc(100svh + 230px),
    rgba(0, 0, 0, .5) calc(100svh + 257px),
    rgba(0, 0, 0, .72) calc(100svh + 285px),
    rgba(0, 0, 0, .88) calc(100svh + 306px),
    rgba(0, 0, 0, .97) calc(100svh + 326px),
    #000 calc(100svh + 340px),
    #000 calc(100% - 100px),
    rgba(0, 0, 0, .99) calc(100% - 86px),
    rgba(0, 0, 0, .96) calc(100% - 76px),
    rgba(0, 0, 0, .88) calc(100% - 65px),
    rgba(0, 0, 0, .72) calc(100% - 55px),
    rgba(0, 0, 0, .5) calc(100% - 41px),
    rgba(0, 0, 0, .28) calc(100% - 28px),
    rgba(0, 0, 0, .12) calc(100% - 17px),
    rgba(0, 0, 0, .03) calc(100% - 7px),
    transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,
    transparent calc(100svh + 140px),
    rgba(0, 0, 0, .01) calc(100svh + 168px),
    rgba(0, 0, 0, .04) calc(100svh + 188px),
    rgba(0, 0, 0, .12) calc(100svh + 209px),
    rgba(0, 0, 0, .28) calc(100svh + 230px),
    rgba(0, 0, 0, .5) calc(100svh + 257px),
    rgba(0, 0, 0, .72) calc(100svh + 285px),
    rgba(0, 0, 0, .88) calc(100svh + 306px),
    rgba(0, 0, 0, .97) calc(100svh + 326px),
    #000 calc(100svh + 340px),
    #000 calc(100% - 100px),
    rgba(0, 0, 0, .99) calc(100% - 86px),
    rgba(0, 0, 0, .96) calc(100% - 76px),
    rgba(0, 0, 0, .88) calc(100% - 65px),
    rgba(0, 0, 0, .72) calc(100% - 55px),
    rgba(0, 0, 0, .5) calc(100% - 41px),
    rgba(0, 0, 0, .28) calc(100% - 28px),
    rgba(0, 0, 0, .12) calc(100% - 17px),
    rgba(0, 0, 0, .03) calc(100% - 7px),
    transparent 100%);
}
section.cofano .cofano-isola.cofano-pannello { padding: 0; border-radius: 0; background: none; box-shadow: none; }
section.cofano + .sezione { padding-top: clamp(96px, 15vh, 190px); }
section.cofano .cofano-pannello .vetro.agenti { background: none; border: 0; border-radius: 0; padding-left: 0; padding-right: 0; }