/* Sezione Design di cineticapro.it: stessi caratteri e colori della pagina principale.
   Il tema scuro lo accende la lampadina in alto, come nel programma (UX_MANUAL § 28.5bis). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-800.woff2) format("woff2")}

:root{
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --blue:#2563EB; --blue-dark:#1D4ED8; --violet:#6D28D9;
  --ink:#0F172A; --text:#334155; --muted:#64748B; --line:#E2E8F0; --line-2:#CBD5E1;
  --bg:#FFFFFF; --surface:#F8FAFC; --card:#FFFFFF; --head:rgba(255,255,255,.9);
  /* il punto, area per area: gli stessi valori della barra laterale del programma (areaAccents.ts, PUNTO_AREA) */
  --a-produzione:#2563eb; --a-finanza:#16a34a; --a-persone:#ea580c; --a-documenti:#9333ea;
  --p-produzione:#EFF6FF; --p-finanza:#F0FDF4; --p-persone:#FFF7ED; --p-documenti:#FAF5FF;
  --t-produzione:#1D4ED8; --t-finanza:#15803D; --t-persone:#C2410C; --t-documenti:#7E22CE;
  --ic:#334155;
  --wrap:1160px; --read:680px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --blue:#60A5FA; --blue-dark:#93C5FD; --violet:#A78BFA;
  --ink:#F1F5F9; --text:#CBD5E1; --muted:#94A3B8; --line:#1E293B; --line-2:#334155;
  --bg:#0B1120; --surface:#0F172A; --card:#111A2E; --head:rgba(11,17,32,.88);
  --a-produzione:#60a5fa; --a-finanza:#4ade80; --a-persone:#fb923c; --a-documenti:#c084fc;
  --p-produzione:rgba(59,130,246,.12); --p-finanza:rgba(34,197,94,.12); --p-persone:rgba(249,115,22,.12); --p-documenti:rgba(168,85,247,.12);
  --t-produzione:#93C5FD; --t-finanza:#86EFAC; --t-persone:#FDBA74; --t-documenti:#D8B4FE;
  --ic:#CBD5E1;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:19px;line-height:1.65;
     -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";transition:background-color .5s ease,color .5s ease}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--blue-dark)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
h1,h2,h3{color:var(--ink);margin:0;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
p{margin:0 0 1em}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.read{max-width:var(--read);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

/* ---------- icone di CineticaPro ---------- */
.cp-icona{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.cp-icona-punto{fill:var(--cp-punto,currentColor);stroke:none}

/* ---------- testata ---------- */
header.site{position:sticky;top:0;z-index:40;background:var(--head);backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);transition:background-color .5s ease,border-color .5s ease}
header.site .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo img{height:28px;width:auto}
:root[data-theme="dark"] .logo img{filter:brightness(0) invert(1) opacity(.92)}
header.site nav{display:flex;align-items:center;gap:24px;margin-left:auto}
header.site nav a{color:var(--text);text-decoration:none;font-size:15px;font-weight:500}
header.site nav a:hover,header.site nav a[aria-current]{color:var(--ink)}
header.site nav a[aria-current]{font-weight:600}
.lampada{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;padding:0;transition:border-color .15s,background-color .5s}
.lampada:hover{border-color:var(--line-2)}
.lampada svg{width:20px;height:20px;stroke-width:1.7367}
.lampada .spenta{display:block}.lampada .accesa{display:none}
:root[data-theme="dark"] .lampada .spenta{display:none}
:root[data-theme="dark"] .lampada .accesa{display:block;--cp-punto:#FBBF24}

/* «Design» nel menu: la sfumatura del titolo della pagina principale */
.grad{background:linear-gradient(90deg,#6D28D9 0%,#2563EB 12.5%,#0284C7 25%,#2563EB 37.5%,#6D28D9 50%,#2563EB 62.5%,#0284C7 75%,#2563EB 87.5%,#6D28D9 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:grad-flow 10s linear infinite}
:root[data-theme="dark"] .grad{background-image:linear-gradient(90deg,#A78BFA 0%,#60A5FA 12.5%,#38BDF8 25%,#60A5FA 37.5%,#A78BFA 50%,#60A5FA 62.5%,#38BDF8 75%,#60A5FA 87.5%,#A78BFA 100%)}
header.site nav a.grad{font-weight:600}
@keyframes grad-flow{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ---------- apertura dell'articolo ---------- */
.apertura{padding:96px 0 56px}
.occhiello{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin:0 0 20px}
.titolo{font-size:clamp(64px,11vw,148px);font-weight:800;letter-spacing:-.045em;line-height:.95}
.titolo .pt{color:var(--blue)}
.sommario{font-size:clamp(21px,2.4vw,27px);line-height:1.45;color:var(--text);margin:28px 0 0;max-width:30ch;text-wrap:pretty}
.meta{font-size:15px;color:var(--muted);margin-top:28px}

/* ---------- corpo ---------- */
.corpo{padding-bottom:40px}
.corpo h2{font-size:clamp(28px,3.4vw,38px);font-weight:800;margin:88px 0 22px}
.corpo p{text-wrap:pretty}
.corpo strong{color:var(--ink);font-weight:600}
.corpo .nota{font-size:16px;color:var(--muted)}

figure{margin:48px 0}
figcaption{font-size:15px;color:var(--muted);margin-top:16px;line-height:1.5}
.largo{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding:0 24px}
.fascia{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0;
  transition:background-color .5s ease,border-color .5s ease}

/* il muro: tutte le icone, come immagine; sopra, i soli punti. Sfuma in diagonale verso il basso. */
.muro{position:relative;cursor:default;
  -webkit-mask-image:linear-gradient(160deg,#000 12%,rgba(0,0,0,.5) 45%,transparent 84%);
          mask-image:linear-gradient(160deg,#000 12%,rgba(0,0,0,.5) 45%,transparent 84%)}
.muro img{width:100%;height:auto}
.muro-punti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.muro-punti circle{fill:var(--ic);transition:fill .9s ease}
/* quattro immagini (largo/stretto × chiaro/scuro): se ne vede una */
.muro img,.muro .muro-punti{display:none}
.muro img.muro-d.tema-chiaro,.muro svg.muro-d{display:block}
:root[data-theme="dark"] .muro img.muro-d.tema-chiaro{display:none}
:root[data-theme="dark"] .muro img.muro-d.tema-scuro{display:block}
.muro-conta{display:flex;align-items:baseline;gap:14px;margin-bottom:28px}
.muro-conta b{font-size:clamp(44px,6vw,72px);font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1}
.muro-conta span{font-size:18px;color:var(--muted)}
.nome-icona{min-height:24px;margin-top:16px;font-size:15px;color:var(--muted)}
.nome-icona b{color:var(--ink);font-weight:600}

/* tre strade */
.strade{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.strade table{border-collapse:collapse;width:100%;min-width:760px;table-layout:fixed}
.strade thead th:first-child{width:118px}
.strade th{font-size:12px;font-weight:600;text-align:center;color:var(--muted);padding:14px 4px;line-height:1.3;vertical-align:bottom}
.strade th[scope=row]{text-align:left;padding-left:16px;white-space:nowrap}
.strade td{padding:14px 6px;color:var(--ic)}
.strade tr+tr{border-top:1px solid var(--line)}
.strade tr.scelta{background:var(--p-produzione)}
.strade tr.scelta th{color:var(--t-produzione)}
.strade .ic{display:block;margin:0 auto;width:24px;height:24px;overflow:visible}
.strade .ic-lu{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.strade .ic-pu{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.strade .ic-pu .a{fill:var(--a-produzione);stroke:none}
.strade .ic-ga{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:8}
.strade .ic-ga .a{fill:currentColor;stroke:none}
.strade .ic-ga .at{stroke:currentColor;stroke-width:3}
.strade .ic-ga .h{stroke-width:2.8}
.strade .ic-st{fill:currentColor;stroke:none}
.strade .ic-st .s{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:butt;stroke-linejoin:miter}

/* il marchio */
.marchio{border:1px solid var(--line);border-radius:22px;background:var(--card);padding:56px 32px;display:flex;justify-content:center}
.marchio svg{width:min(560px,100%);height:auto;overflow:visible}
:root[data-theme="dark"] .marchio .viola{fill:#C4B5FD}
.marchio .punto-marchio{transform-box:fill-box;transform-origin:center;animation:battito 2.6s ease-in-out infinite}
@keyframes battito{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.9)}}

/* anatomia */
.anatomia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.tavola{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:22px;background:var(--card);overflow:hidden}
.tavola svg{position:absolute;inset:0;width:100%;height:100%}
.tavola .griglia line{stroke:var(--line);stroke-width:.03}
.tavola .utile{fill:none;stroke:var(--blue);stroke-width:.05;stroke-dasharray:.25 .2;opacity:.7}
.tavola .disegno{fill:none;stroke:var(--ink);stroke-width:1.7367;stroke-linecap:round;stroke-linejoin:round}
.tavola .disegno .cp-icona-punto{fill:var(--a-produzione)}
.misure{list-style:none;margin:0;padding:0}
.misure li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line);font-size:17px;line-height:1.5}
.misure li:last-child{border-bottom:1px solid var(--line)}
.misure b{font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.1}

/* dove sta il senso */
.sensi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.senso{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:28px 12px 18px;text-align:center;color:var(--ic);
  cursor:default;transition:border-color .2s,transform .2s}
.senso svg{width:56px;height:56px;margin:0 auto 16px;stroke-width:1.7367}
.senso .cp-icona-punto{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.3,1.6,.4,1),fill .35s}
.senso:hover,.senso:focus-visible{border-color:var(--line-2)}
.senso:hover .cp-icona-punto,.senso:focus-visible .cp-icona-punto,.senso.vivo .cp-icona-punto{transform:scale(var(--s,1.6));fill:var(--a-produzione)}
.senso b{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.senso small{display:block;font-size:13px;color:var(--muted);margin-top:4px;line-height:1.35}
.servizio{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:22px;padding:18px 22px;border-radius:16px;
  background:var(--surface);color:var(--ic);font-size:15px}
.servizio svg{width:24px;height:24px;stroke-width:1.7367}
.servizio span{color:var(--muted);margin-right:6px}

/* la lampadina grande */
.interruttore{display:flex;align-items:center;gap:32px;border:1px solid var(--line);border-radius:22px;background:var(--card);padding:32px}
.interruttore button{flex:none;width:132px;height:132px;border-radius:28px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .5s,border-color .2s}
.interruttore button:hover{border-color:var(--line-2)}
.interruttore svg{width:72px;height:72px;stroke-width:1.7367}
.interruttore .accesa{display:none;--cp-punto:#FBBF24}
:root[data-theme="dark"] .interruttore .accesa{display:block}
:root[data-theme="dark"] .interruttore .spenta{display:none}
.interruttore p{margin:0;font-size:17px}
.interruttore p b{display:block;color:var(--ink);font-size:20px;margin-bottom:4px}

/* barra laterale */
.barra{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gruppo{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:12px}
.gruppo h3{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 10px 10px}
.voce{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;border:1px solid transparent;background:none;
  font:inherit;font-size:14px;font-weight:500;color:var(--text);text-align:left;cursor:pointer;line-height:1.25}
.voce svg{flex:none;width:18px;height:18px;color:var(--muted);stroke-width:1.7367}
.voce:hover{background:var(--surface)}
.voce[aria-pressed="true"]{background:var(--p);color:var(--t);border-color:var(--p);font-weight:600}
.voce[aria-pressed="true"] svg{color:var(--c)}
.g-produzione{--cp-punto:var(--a-produzione);--c:var(--a-produzione);--p:var(--p-produzione);--t:var(--t-produzione)}
.g-finanza{--cp-punto:var(--a-finanza);--c:var(--a-finanza);--p:var(--p-finanza);--t:var(--t-finanza)}
.g-persone{--cp-punto:var(--a-persone);--c:var(--a-persone);--p:var(--p-persone);--t:var(--t-persone)}
.g-documenti{--cp-punto:var(--a-documenti);--c:var(--a-documenti);--p:var(--p-documenti);--t:var(--t-documenti)}

/* chiusura */
.chiusa{font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--ink);margin:88px 0 24px;text-wrap:balance}
.grazie{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:16px;color:var(--muted)}

/* ---------- indice della sezione ---------- */
.indice{padding:96px 0 40px}
.indice .titolo{font-size:clamp(56px,9vw,120px)}
.articoli{list-style:none;margin:64px 0 0;padding:0;display:grid;gap:20px}
.articolo a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;padding:36px;border:1px solid var(--line);
  border-radius:24px;background:var(--card);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.articolo a:hover{border-color:var(--line-2);transform:translateY(-2px)}
.articolo .n{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
.articolo h2{font-size:clamp(40px,5vw,64px);font-weight:800;letter-spacing:-.04em;margin:10px 0 14px}
.articolo h2 .pt{color:var(--blue)}
.articolo p{margin:0;color:var(--text);font-size:18px}
.articolo .leggi{display:inline-block;margin-top:18px;font-weight:600;color:var(--blue);font-size:16px}
.mini{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;color:var(--ic)}
.mini span{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:14px;background:var(--surface)}
.mini svg{width:30px;height:30px;stroke-width:1.7367}

/* ---------- piede ---------- */
footer.site{border-top:1px solid var(--line);margin-top:72px;padding:32px 0 40px;font-size:14px;color:var(--muted)}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
footer.site a{color:var(--text)}
footer.site .copy{margin:0 0 0 auto}

/* ---------- telefono ---------- */
@media (max-width:760px){
  body{font-size:17px}
  .wrap,.read,.largo{padding:0 16px}
  header.site .wrap{gap:14px}
  header.site nav{gap:14px}
  header.site nav .sito{display:none}
  .apertura{padding:56px 0 32px}
  .indice{padding:56px 0 24px}
  .corpo h2{margin-top:64px}
  .anatomia{grid-template-columns:1fr;gap:24px}
  .sensi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sensi .senso:last-child{grid-column:1 / -1}
  .barra{grid-template-columns:1fr 1fr}
  .interruttore{flex-direction:column;align-items:flex-start;padding:24px}
  .muro img.muro-d.tema-chiaro,.muro svg.muro-d,:root[data-theme="dark"] .muro img.muro-d.tema-scuro{display:none}
  .muro img.muro-m.tema-chiaro,.muro svg.muro-m{display:block}
  :root[data-theme="dark"] .muro img.muro-m.tema-chiaro{display:none}
  :root[data-theme="dark"] .muro img.muro-m.tema-scuro{display:block}
  .strade table{min-width:1000px}
  .strade th{font-size:11px}
  .articolo a{grid-template-columns:1fr;padding:24px;gap:24px}
  .marchio{padding:36px 16px}
  footer.site .copy{margin:0}
}
@media (max-width:400px){ .barra{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .marchio .punto-marchio{animation:none}
  .grad{animation:none}
}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}