/* Consulenza del lavoro — «editoriale a indice» (03/10/2026).
   Solo questa pagina: stesse classi della home, forme nuove con data-layout e con gli id.
   Stessa linea (token di :root, Lato, grana e trama sulle superfici scure, archi, piastrelle, segni),
   struttura diversa sezione per sezione:
   1 hero a tutta larghezza · 2 indice 01-05 · 3 righe a zig-zag · 4 banda pietra · 5 nota col filetto ·
   6 linea coi cerchi · 7 domande in due colonne · 8 barra dei contatti · 9 movimento (solo JS e senza
   «riduci movimento»: con JS spento tutto è visibile). */

/* ═══════════ 1 · HERO A TUTTA LARGHEZZA: foto piena, testo in basso a sinistra sul velo ═══════════ */
#contenuto .hero[data-layout="piena"]{padding:0}
#contenuto [data-layout="piena"] .hero__scheda{display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(640px,calc(100svh - 66px),820px);border-radius:0}
#contenuto [data-layout="piena"] .hero__foto{position:absolute;inset:0;z-index:0}
#contenuto [data-layout="piena"] .hero__foto img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
#contenuto [data-layout="piena"] .hero__scheda::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(41,47,52,.96) 0,rgba(41,47,52,.9) 34%,rgba(41,47,52,.55) 55%,rgba(41,47,52,.12) 74%,rgba(41,47,52,0) 86%)}
#contenuto [data-layout="piena"] .hero__testo{background:none;padding:0 16px 30px}
#contenuto [data-layout="piena"] .hero__testo::after{-webkit-mask-image:linear-gradient(0deg,#000 40%,transparent);mask-image:linear-gradient(0deg,#000 40%,transparent)}
#contenuto [data-layout="piena"] .hero__titolo{margin-top:12px}
#contenuto [data-layout="piena"] .hero__scheda>svg[data-segno]{z-index:1;right:-24px;bottom:auto;top:24px;width:120px}

@media (min-width:768px){
  #contenuto .hero[data-layout="piena"]{max-width:none;margin:0}
  #contenuto [data-layout="piena"] .hero__scheda{align-items:stretch;min-height:clamp(calc(560 * var(--k)),calc(100vh - 88 * var(--k)),calc(820 * var(--k)));border-radius:0}
  #contenuto [data-layout="piena"] .hero__scheda::before{inset:0;
    background:linear-gradient(0deg,rgba(41,47,52,.95) 0,rgba(41,47,52,.86) 26%,rgba(41,47,52,.5) 50%,rgba(41,47,52,.1) 72%,rgba(41,47,52,0) 84%),
               linear-gradient(90deg,rgba(41,47,52,.45) 0,rgba(41,47,52,0) 55%)}
  #contenuto [data-layout="piena"] .hero__scheda::after{
    -webkit-mask-image:linear-gradient(0deg,#000 0 22%,transparent 52%),radial-gradient(circle 280px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.62));
    mask-image:linear-gradient(0deg,#000 0 22%,transparent 52%),radial-gradient(circle 280px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.62))}
  /* il testo sta nella colonna del sito: titolo largo, poi una riga con il sottotitolo e i pulsanti */
  #contenuto [data-layout="piena"] .hero__testo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;width:100%;max-width:none;
    padding:0 max(var(--margine),calc((100% - 752 * var(--c)) / 2 + 21.5 * var(--c))) calc(64 * var(--k))}
  #contenuto [data-layout="piena"] .hero__testo>:is(.occhiello,.hero__titolo){grid-column:1 / -1}
  #contenuto [data-layout="piena"] .hero__titolo{max-width:calc(1040 * var(--k));margin-top:calc(18 * var(--k));font-size:max(40px,calc(70 * var(--k)));line-height:1}
  #contenuto [data-layout="piena"] :is(.hero__sotto,.hero__azioni){margin-top:calc(34 * var(--k));padding-top:calc(26 * var(--k));border-top:1px solid rgba(255,255,255,.22)}
  #contenuto [data-layout="piena"] .hero__sotto{max-width:none;padding-right:calc(48 * var(--k))}
  #contenuto [data-layout="piena"] .hero__sotto{font-size:max(17px,calc(21 * var(--k)))}
  #contenuto [data-layout="piena"] .hero__azioni{flex-wrap:nowrap;justify-content:flex-end}
  #contenuto [data-layout="piena"] .hero__scheda>svg[data-segno]{z-index:1;left:auto;top:auto;right:calc(-30 * var(--k));bottom:calc(-90 * var(--k));width:calc(340 * var(--k))}
}
@media (min-width:768px) and (max-width:1099px){
  #contenuto [data-layout="piena"] .hero__testo{grid-template-columns:1fr}
  #contenuto [data-layout="piena"] .hero__azioni{justify-content:flex-start;margin-top:calc(20 * var(--k));padding-top:0;border-top:0}
}

/* ═══════════ 2 · INDICE NUMERATO 01-05: titolo fermo a sinistra, voci a destra ═══════════ */
#contenuto #cosa-comprende .ambiti{margin:22px 0 0;padding:0;background:none;border-radius:0;box-shadow:none;border-top:1px solid var(--filetto);counter-reset:voce}
#contenuto #cosa-comprende .ambiti li{counter-increment:voce;border-top:0;border-bottom:1px solid var(--filetto)}
#contenuto #cosa-comprende .ambiti li::before{display:none}
#contenuto #cosa-comprende .ambiti__voce{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:64px;padding:14px 2px}
#contenuto #cosa-comprende .ambiti__voce::before{content:counter(voce,decimal-leading-zero);font-weight:300;font-size:24px;line-height:1;color:#43484D;font-variant-numeric:lining-nums tabular-nums;transition:color .3s var(--e-morbida)}
#contenuto #cosa-comprende .ambiti__voce>span{font-size:16.5px;line-height:1.35;color:var(--inchiostro)}
#contenuto #cosa-comprende .ambiti__voce svg{order:2;width:36px;height:36px;padding:7px}
@media (hover:hover){ #contenuto #cosa-comprende a.ambiti__voce:hover::before{color:var(--inchiostro)} }

@media (min-width:768px){
  #contenuto #cosa-comprende{padding:calc(96 * var(--k)) calc(19 * var(--c)) 0 calc(18 * var(--c))}
  #contenuto #cosa-comprende .servizi__testa{display:block;padding:0}
  #contenuto #cosa-comprende .servizi__titolo{max-width:calc(560 * var(--k));font-size:max(34px,calc(52 * var(--k)))}
  #contenuto #cosa-comprende .ambiti{display:block;width:auto;height:auto;margin:calc(32 * var(--k)) 0 0;padding:0;border-radius:0}
  #contenuto #cosa-comprende .ambiti li{height:auto}
  #contenuto #cosa-comprende .ambiti__voce{grid-template-columns:calc(92 * var(--k)) minmax(0,1fr) auto;gap:calc(24 * var(--k));height:auto;min-height:0;padding:calc(26 * var(--k)) calc(4 * var(--k));justify-content:stretch}
  #contenuto #cosa-comprende .ambiti__voce::before{font-size:max(30px,calc(44 * var(--k)))}
  #contenuto #cosa-comprende .ambiti__voce>span{font-size:max(17px,calc(23 * var(--k)));line-height:1.3}
  #contenuto #cosa-comprende .ambiti__voce svg{width:calc(56 * var(--k));height:calc(56 * var(--k));padding:calc(13 * var(--k))}
}
@media (min-width:1024px){
  #contenuto #cosa-comprende{display:grid;grid-template-columns:5fr 7fr;column-gap:calc(56 * var(--k));align-items:start}
  #contenuto #cosa-comprende .servizi__testa{position:sticky;top:calc(128 * var(--k))}
  #contenuto #cosa-comprende .ambiti{margin:0}
}

/* ═══════════ 3 · RIGHE A ZIG-ZAG: foto grande una volta a sinistra e una volta a destra ═══════════ */
#contenuto [data-righe]{display:grid;gap:44px;margin-top:0}
#contenuto [data-righe]>.scheda{--s:0ms;background:none;border-radius:0;box-shadow:none;overflow:visible}
#contenuto [data-righe] .scheda__foto{border-radius:14px}
#contenuto [data-righe] .scheda__foto img{aspect-ratio:4/3}
#contenuto [data-righe] .scheda__testo{padding:22px 4px 0}
#contenuto [data-righe] .scheda__titolo{font-size:26px}
/* la riga senza foto: il pannello grigio, il numero grande al posto della foto */
#contenuto #cessazioni{overflow:hidden;overflow:clip;border-radius:16px;background:var(--pannello);box-shadow:inset 0 0 0 1px rgba(41,47,52,.05)}
#contenuto #cessazioni .scheda__testo{padding:26px 20px 30px}
@media (hover:hover) and (pointer:fine){
  #contenuto [data-righe]>.scheda:hover{transform:none;box-shadow:none}
  #contenuto [data-righe]>.scheda::after{display:none}
  #contenuto #cessazioni:hover{box-shadow:inset 0 0 0 1px rgba(41,47,52,.05)}
}

@media (min-width:768px){
  #contenuto [data-layout="zigzag"]{padding-top:calc(104 * var(--k))}
  #contenuto [data-righe]{grid-template-columns:1fr;gap:calc(96 * var(--k));margin:0;padding:0 calc(19 * var(--c)) 0 calc(18 * var(--c))}
  #contenuto [data-righe]>.scheda{display:grid;grid-template-columns:1fr;gap:calc(28 * var(--k));border-radius:0}
  #contenuto [data-righe] .scheda__foto{order:-1;position:relative;aspect-ratio:16/9;border-radius:calc(16 * var(--k))}
  #contenuto [data-righe] .scheda__testo{padding:0 calc(4 * var(--k))}
  #contenuto [data-righe] .scheda__titolo{margin-top:calc(14 * var(--k));font-size:max(26px,calc(40 * var(--k)));line-height:1.1}
  #contenuto [data-righe] .studio__par{max-width:calc(520 * var(--k));font-size:max(16px,calc(18.5 * var(--k)))}
  #contenuto #cessazioni{border-radius:calc(16 * var(--k))}
  #contenuto #cessazioni .scheda__testo{padding:calc(48 * var(--k)) calc(52 * var(--k)) calc(56 * var(--k))}
}
@media (min-width:1024px){
  #contenuto [data-righe]>.scheda{grid-template-columns:7fr 5fr;align-items:center;column-gap:calc(72 * var(--k))}
  #contenuto [data-righe]>.scheda:has(>.scheda__testo:first-child){grid-template-columns:5fr 7fr}
  #contenuto [data-righe] .scheda__foto{order:0;aspect-ratio:7/5}
  /* senza foto: il numero grande nella colonna dove le altre righe hanno la foto */
  #contenuto #cessazioni{grid-template-columns:1fr}
  #contenuto #cessazioni .scheda__testo{display:grid;grid-template-columns:5fr 7fr;column-gap:calc(72 * var(--k));align-items:start;padding:calc(64 * var(--k)) calc(64 * var(--k)) calc(72 * var(--k))}
  #contenuto #cessazioni .scheda__testo>*{grid-column:2}
  #contenuto #cessazioni .numero{grid-column:1;grid-row:1 / span 4;align-self:center;font-size:max(72px,calc(168 * var(--k)))}
  #contenuto #cessazioni .numero__linea{width:calc(72 * var(--k));margin-left:calc(24 * var(--k))}
  #contenuto #cessazioni .scheda__titolo{margin-top:0}
}

/* ═══════════ 4 · BANDA PIETRA: il titolo grande come una citazione ═══════════ */
#contenuto #buste-paga-contabilita{position:relative;isolation:isolate;overflow:hidden;overflow:clip;margin-top:56px;padding:52px 16px 56px;
  background:var(--grana) 0 0/160px,var(--pietra-calda)}
/* archi del kit: due curve sottili che escono dal bordo destro */
#contenuto #buste-paga-contabilita::before,#contenuto #buste-paga-contabilita::after{content:"";position:absolute;z-index:-1;pointer-events:none;border:1px solid rgba(41,47,52,.13);border-radius:50%;aspect-ratio:1}
#contenuto #buste-paga-contabilita::before{width:120%;right:-78%;top:-18%}
#contenuto #buste-paga-contabilita::after{width:84%;right:-60%;top:4%}
#contenuto #buste-paga-contabilita .servizi__testa{position:relative;padding:0 4px}
#contenuto #buste-paga-contabilita .servizi__testa::before{content:"";display:block;width:48px;height:2px;margin-bottom:22px;background:var(--grafite-medio)}
#contenuto #buste-paga-contabilita .servizi__titolo{margin-top:0;font-weight:300;font-size:40px;line-height:1.04;letter-spacing:-.025em}
#contenuto #buste-paga-contabilita .servizi__intro{margin-top:22px;color:#4A4F55}

@media (min-width:768px){
  #contenuto #buste-paga-contabilita{max-width:none;margin:calc(112 * var(--k)) 0 0;padding:calc(112 * var(--k)) 0 calc(120 * var(--k))}
  #contenuto #buste-paga-contabilita::before{width:calc(820 * var(--k));right:calc(-260 * var(--k));top:calc(-300 * var(--k))}
  #contenuto #buste-paga-contabilita::after{width:calc(560 * var(--k));right:calc(-200 * var(--k));top:calc(-80 * var(--k))}
  #contenuto #buste-paga-contabilita .servizi__testa{display:grid;grid-template-columns:5fr 7fr;column-gap:calc(56 * var(--k));align-items:start;
    max-width:calc(752 * var(--c));margin:0 auto;padding:0 calc(19 * var(--c)) 0 calc(18 * var(--c))}
  #contenuto #buste-paga-contabilita .servizi__testa::before{grid-column:1 / -1;width:calc(64 * var(--k));margin-bottom:calc(30 * var(--k))}
  #contenuto #buste-paga-contabilita .servizi__titolo{grid-column:1 / -1;max-width:calc(1100 * var(--k));font-size:max(46px,calc(96 * var(--k)));line-height:1}
  #contenuto #buste-paga-contabilita .servizi__intro{grid-column:2;width:auto;margin:calc(40 * var(--k)) 0 0;font-size:max(16px,calc(19 * var(--k)))}
}

/* ═══════════ 5 · NOTA CON IL FILETTO VERTICALE ═══════════ */
#contenuto #chi-firma{display:block;margin:56px 16px 0;padding:0;background:none;border-radius:0;overflow:visible}
#contenuto #chi-firma .domande__testa{padding:0 64px 0 0}
#contenuto #chi-firma .domande__titolo{margin-top:0;font-size:24px;line-height:1.2;font-weight:700}
#contenuto #chi-firma .domande__lista{position:relative;gap:12px;margin-top:16px;padding:2px 0 2px 20px}
#contenuto #chi-firma .domande__lista::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grafite-medio);transform-origin:50% 0}
#contenuto #chi-firma .domande__lista>p{font-size:17px;line-height:1.55;color:var(--inchiostro)}
#contenuto #chi-firma>svg[data-segno="firma"]{top:-6px;right:4px;bottom:auto;left:auto;width:48px}

@media (min-width:768px){
  #contenuto #chi-firma{display:grid;grid-template-columns:5fr 7fr;column-gap:calc(56 * var(--k));max-width:calc(752 * var(--c));margin:calc(112 * var(--k)) auto 0;padding:0 calc(19 * var(--c)) 0 calc(18 * var(--c))}
  #contenuto #chi-firma .domande__testa{padding:calc(6 * var(--k)) 0 0;text-align:right}
  #contenuto #chi-firma .domande__titolo{font-size:max(24px,calc(32 * var(--k)))}
  #contenuto #chi-firma .domande__lista{gap:calc(16 * var(--k));margin:0;padding:calc(4 * var(--k)) 0 calc(4 * var(--k)) calc(40 * var(--k))}
  #contenuto #chi-firma .domande__lista>p{max-width:calc(640 * var(--k));font-size:max(18px,calc(24 * var(--k)));line-height:1.5}
  /* la firma sotto il titolo, allineata al filetto */
  #contenuto #chi-firma>svg[data-segno="firma"]{top:calc(64 * var(--k));right:auto;bottom:auto;
    left:calc(18 * var(--c) + (100% - 37 * var(--c) - 56 * var(--k)) * 5 / 12 - 72 * var(--k));width:calc(72 * var(--k))}
}

/* ═══════════ 6 · COME SI COMINCIA: linea orizzontale coi cerchi numerati (da telefono verticale) ═══════════ */
#contenuto [data-layout="linea"]{margin-top:56px}
#contenuto [data-layout="linea"] .passi__lista{gap:26px;margin-top:28px;padding-top:0;border-top:0}
#contenuto [data-layout="linea"] .passi__lista::before{content:"";position:absolute;left:26px;top:26px;bottom:26px;width:1px;background:rgba(220,215,207,.28)}
#contenuto [data-layout="linea"] .passi__lista::after{top:26px;bottom:26px;left:26px;right:auto;width:1px;height:auto;transform-origin:50% 0}
#contenuto [data-layout="linea"] .passo{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;align-items:start;padding:0}
#contenuto [data-layout="linea"] .passo .numero{position:relative;z-index:1;justify-content:center;width:52px;height:52px;border:1px solid var(--pietra);border-radius:50%;background:var(--grafite);font-size:19px}
#contenuto [data-layout="linea"] .passo .numero__linea{display:none}
#contenuto [data-layout="linea"] .passo__titolo{margin-top:12px;font-size:18px}
/* i link nel testo dei passi: zona da toccare di 44 px, senza cambiare la riga */
#contenuto [data-layout="linea"] .passo__titolo a{display:inline-block;padding:11px 0;margin:-11px 0}

@media (min-width:768px){
  #contenuto [data-layout="linea"]{margin-top:calc(112 * var(--k))}
  #contenuto [data-layout="linea"] .passi__in{padding-top:calc(88 * var(--k));padding-bottom:calc(96 * var(--k));text-align:center}
  #contenuto [data-layout="linea"] .passi__titolo{margin-top:0}
  #contenuto [data-layout="linea"] .passi__lista{grid-template-columns:repeat(3,1fr);gap:0 calc(48 * var(--k));margin-top:calc(56 * var(--k));padding:0}
  /* la linea va dal centro del primo cerchio al centro dell'ultimo */
  #contenuto [data-layout="linea"] .passi__lista::before,
  #contenuto [data-layout="linea"] .passi__lista::after{top:calc(38 * var(--k));bottom:auto;left:calc((100% - 96 * var(--k)) / 6);right:calc((100% - 96 * var(--k)) / 6);width:auto;height:1px;transform-origin:0 50%}
  #contenuto [data-layout="linea"] .passo{display:flex;flex-direction:column;align-items:center;padding:0 calc(12 * var(--k))}
  #contenuto [data-layout="linea"] .passo .numero{width:calc(76 * var(--k));height:calc(76 * var(--k));font-size:max(22px,calc(28 * var(--k)))}
  #contenuto [data-layout="linea"] .passo__titolo{max-width:calc(340 * var(--k));margin-top:calc(28 * var(--k));font-size:max(17px,calc(21 * var(--k)))}
}

/* ═══════════ 7 · DOMANDE IN DUE COLONNE: titolo fermo a sinistra, domande a destra, a filetti ═══════════ */
#contenuto #domande{gap:16px;margin:56px 16px 0;padding:0;background:none;border-radius:0;overflow:visible}
#contenuto #domande::before{display:none}
#contenuto #domande .domande__testa{padding:0}
#contenuto #domande .domande__titolo{margin-top:0}
#contenuto #domande .domande__lista{gap:0;border-bottom:1px solid var(--filetto)}
#contenuto #domande .domanda{border-radius:0;background:none;box-shadow:none;border-top:1px solid var(--filetto)}
#contenuto #domande .domanda.aperta{background:none;box-shadow:none}
#contenuto #domande .domanda::before{inset:-1px auto auto 0;width:64px;height:2px;border-radius:0;background:var(--grafite-medio);scale:0 1;transform-origin:0 50%}
#contenuto #domande .domanda.aperta::before{scale:1 1}
#contenuto #domande .domanda__btn{min-height:64px;padding:16px 0;font-size:17px;line-height:1.3}
#contenuto #domande .domanda__piu{width:38px;height:38px;padding:8px;border:1px solid var(--filetto);border-radius:50%;transition:background-color .3s var(--e-morbida),border-color .3s var(--e-morbida),color .3s var(--e-morbida)}
#contenuto #domande .domanda.aperta .domanda__piu{background:var(--grafite-medio);border-color:var(--grafite-medio);color:var(--bianco)}
#contenuto #domande .domanda__risposta{padding:0 0 20px;font-size:15.5px;line-height:1.5}
@media (hover:hover){ #contenuto #domande .domanda:not(.aperta):hover{background:none} }

@media (min-width:768px){
  #contenuto #domande{max-width:calc(752 * var(--c));grid-template-columns:5fr 7fr;gap:0 calc(56 * var(--k));margin:calc(112 * var(--k)) auto 0;padding:0 calc(19 * var(--c)) 0 calc(18 * var(--c));border-radius:0}
  #contenuto #domande .domande__testa{position:sticky;top:calc(128 * var(--k));align-self:start;padding:0}
  #contenuto #domande .domande__titolo{font-size:max(34px,calc(52 * var(--k)))}
  #contenuto #domande .domanda::before{width:calc(88 * var(--k))}
  #contenuto #domande .domanda__btn{height:auto;min-height:calc(88 * var(--k));gap:calc(24 * var(--k));padding:calc(24 * var(--k)) 0;font-size:max(17px,calc(21 * var(--k)))}
  #contenuto #domande .domanda__piu{width:calc(44 * var(--k));height:calc(44 * var(--k));padding:calc(11 * var(--k))}
  #contenuto #domande .domanda__risposta{margin-top:calc(-6 * var(--k));padding:0 calc(68 * var(--k)) calc(28 * var(--k)) 0;font-size:max(15.5px,calc(18 * var(--k)))}
}

/* ═══════════ 8 · CONTATTI: una barra orizzontale compatta, da bordo a bordo ═══════════ */
#contenuto [data-layout="barra"]{margin:56px 0 0;border-radius:0;padding:34px 16px 36px}
#contenuto [data-layout="barra"] .contatto__titolo{font-size:30px}

@media (min-width:768px){
  #contenuto [data-layout="barra"]{max-width:none;grid-template-columns:1fr;align-items:center;margin:calc(112 * var(--k)) 0 0;border-radius:0;
    padding:calc(40 * var(--k)) max(var(--margine),calc((100% - 752 * var(--c)) / 2 + 18 * var(--c)))}
  #contenuto [data-layout="barra"] .contatto__sx{padding:0;border:0}
  #contenuto [data-layout="barra"] .contatto__sx::after{display:none}
  #contenuto [data-layout="barra"] .contatto__titolo{font-size:max(28px,calc(36 * var(--k)))}
  #contenuto [data-layout="barra"] .contatto__sotto{margin-top:calc(8 * var(--k));font-size:max(15.5px,calc(17 * var(--k)));line-height:1.45}
  #contenuto [data-layout="barra"] .contatto__dx{flex-direction:row;flex-wrap:wrap;align-items:center;gap:calc(14 * var(--k)) calc(32 * var(--k));margin:calc(22 * var(--k)) 0 0;padding:0}
  #contenuto [data-layout="barra"] .contatto__azioni{width:auto}
  #contenuto [data-layout="barra"] .contatto__tel{margin:0;font-size:max(18px,calc(22 * var(--k)))}
  #contenuto [data-layout="barra"] .contatto__sede{margin:calc(8 * var(--k)) 0 0;align-items:center;white-space:nowrap}
}
@media (min-width:1200px){
  #contenuto [data-layout="barra"]{grid-template-columns:minmax(0,calc(430 * var(--k))) minmax(0,1fr);column-gap:calc(48 * var(--k))}
  #contenuto [data-layout="barra"] .contatto__sx{padding-right:calc(48 * var(--k))}
  #contenuto [data-layout="barra"] .contatto__sx::after{display:block}
  #contenuto [data-layout="barra"] .contatto__dx{flex-wrap:nowrap;justify-content:space-between;margin:0}
  #contenuto [data-layout="barra"] .contatto__azioni{flex-wrap:nowrap}
}

/* ═══════════ 9 · MOVIMENTO (solo con JS e senza «riduci movimento») ═══════════ */
@media (prefers-reduced-motion:no-preference){
  /* hero: il velo sale dal basso invece di scivolare di lato */
  html.js:not(.is-arrivo) #contenuto [data-layout="piena"] .hero__scheda::before{animation:velo-sale 1.4s var(--e-sipario) backwards}
  @keyframes velo-sale{from{translate:0 14%}}
  /* indice: i numeri si accendono, la voce scivola */
  #contenuto #cosa-comprende a.ambiti__voce>span{transition:background-size .3s var(--e-morbida),translate .3s var(--e-morbida)}
  @media (hover:hover){ #contenuto #cosa-comprende a.ambiti__voce:hover>span{translate:6px 0} }
  .js #contenuto #cosa-comprende .ambiti[data-reveal].in .ambiti__voce::before{animation:velo .6s var(--e-posa) backwards;animation-delay:calc(var(--dopo,0ms) + 120ms)}
  /* nota: il filetto si disegna dall'alto */
  .js #contenuto #chi-firma .domande__lista[data-reveal]:not(.in)::before{scale:1 0}
  .js #contenuto #chi-firma .domande__lista[data-reveal].in::before{animation:linea-y .9s var(--e-tratto) backwards}
  /* linea: da telefono è verticale e cresce dall'alto */
  @media (max-width:767px){
    .js #contenuto [data-layout="linea"] .passi__lista[data-reveal]:not(.in)::after{scale:1 0}
    .js #contenuto [data-layout="linea"] .passi__lista::after{animation-name:linea-y}
  }
  .js #contenuto [data-layout="linea"] .passo.reveal:not(.in) .numero{border-color:rgba(220,215,207,.3)}
  .js #contenuto [data-layout="linea"] .passo .numero{transition:border-color .8s var(--e-morbida) calc(var(--i,0) * 150ms + 300ms)}
  /* domande: il cerchio del «più» */
  #contenuto #domande .domanda__piu{transition:background-color .3s var(--e-morbida),border-color .3s var(--e-morbida),color .3s var(--e-morbida),rotate .42s var(--e-posa)}
  @media (hover:hover){ #contenuto #domande .domanda:not(.aperta) .domanda__btn:hover .domanda__piu{border-color:var(--grafite-medio)} }
}

/* collaudo 03/10 sera: correzioni */
/* 1 · i due archi della banda pietra non passano più sopra il testo: da computer salgono in alto a destra, da telefono non ci sono */
@media (max-width:767px){ #contenuto #buste-paga-contabilita::before,#contenuto #buste-paga-contabilita::after{display:none} }
@media (min-width:768px){
  #contenuto #buste-paga-contabilita::before{top:calc(-520 * var(--k))}
  #contenuto #buste-paga-contabilita::after{top:calc(-360 * var(--k));right:calc(-300 * var(--k))}
}
/* 2 · il calendario della scheda 03 sta intero dentro la scheda */
#contenuto #cessazioni .scheda__testo>svg[data-segno]{right:20px;bottom:20px;width:64px}
@media (min-width:768px){ #contenuto #cessazioni .scheda__testo>svg[data-segno]{right:calc(40 * var(--k));bottom:calc(36 * var(--k));width:calc(96 * var(--k))} }
/* 4 · i filetti sopra il sottotitolo e sopra i pulsanti dell'hero stanno alla stessa altezza */
@media (min-width:1100px){ #contenuto [data-layout="piena"] :is(.hero__sotto,.hero__azioni){align-self:start} }
@media (max-width:767px){ #contenuto #cessazioni .scheda__testo>svg[data-segno]{top:22px;bottom:auto;right:22px;width:56px} }