/* =========================================================
   SolarTrack — foglio di stile (ga-soft.it/solar)
   Palette: [data-palette] su <html>   Forme: [data-stile]
   ========================================================= */

/* ---------- Palette (tutte sul verde, chiare) ---------- */
:root, [data-palette="prato"] {
  --bg:#F6FBF3; --bg-2:#EAF5E4; --surface:#FFFFFF;
  --ink:#10241A; --ink-2:#38513F; --muted:#6A806F; --line:#DCEBD5;
  --p:#2E7A3F; --s:#5FB36A; --a:#E7B23A; --deep:#1F5C33; --on-deep:#F2FBEF; --deep-muted:#C3DEC4;
  --glow:rgba(95,179,106,.28); --sh:22,60,34;
  --cielo1:#DDF0FB; --cielo2:#F7FBEF; --prato1:#BFE0B0; --prato2:#D6ECCB; --pannello:#24456E;
}
[data-palette="salvia"] {
  --bg:#F7FAF5; --bg-2:#ECF2E8; --surface:#FFFFFF;
  --ink:#1A2A20; --ink-2:#435648; --muted:#728476; --line:#DFE9DA;
  --p:#4F7D5C; --s:#8DB596; --a:#D9A441; --deep:#3E6449; --on-deep:#F4FAF2; --deep-muted:#CFE0D2;
  --glow:rgba(141,181,150,.3); --sh:40,70,50;
  --cielo1:#E4F0F5; --cielo2:#F8FAF2; --prato1:#C9DEC4; --prato2:#DDEAD7; --pannello:#2F4A66;
}
[data-palette="menta"] {
  --bg:#F3FBF8; --bg-2:#E3F5EE; --surface:#FFFFFF;
  --ink:#0E2620; --ink-2:#355349; --muted:#64827A; --line:#D3ECE3;
  --p:#0F8A6A; --s:#43C59E; --a:#F2B134; --deep:#0E6B53; --on-deep:#F0FCF8; --deep-muted:#BFE6D9;
  --glow:rgba(67,197,158,.28); --sh:14,80,62;
  --cielo1:#D8F1F7; --cielo2:#F4FCF6; --prato1:#B6E3CF; --prato2:#D2EFE2; --pannello:#1E4A6B;
}
[data-palette="smeraldo"] {
  --bg:#F2FBF6; --bg-2:#E1F5EA; --surface:#FFFFFF;
  --ink:#0B241A; --ink-2:#2F5141; --muted:#5F8070; --line:#D1EBDD;
  --p:#047857; --s:#10B981; --a:#F59E0B; --deep:#065F46; --on-deep:#EEFCF5; --deep-muted:#B5E4CF;
  --glow:rgba(16,185,129,.26); --sh:6,70,50;
  --cielo1:#D6EEFA; --cielo2:#F2FBF3; --prato1:#AEDFC4; --prato2:#CBEBD9; --pannello:#1C3F66;
}
[data-palette="lime"] {
  --bg:#F8FCF1; --bg-2:#EEF7DF; --surface:#FFFFFF;
  --ink:#1A2610; --ink-2:#435532; --muted:#728361; --line:#E2EED0;
  --p:#3F7D20; --s:#84CC16; --a:#FACC15; --deep:#36691C; --on-deep:#F7FCEE; --deep-muted:#D2E8B8;
  --glow:rgba(132,204,22,.28); --sh:50,80,20;
  --cielo1:#E0F2FB; --cielo2:#F9FCEE; --prato1:#CBE6A6; --prato2:#DEEFC4; --pannello:#28456A;
}
[data-palette="oliva"] {
  --bg:#FAFBF4; --bg-2:#F0F2E2; --surface:#FFFFFF;
  --ink:#22261A; --ink-2:#4B5238; --muted:#7A8065; --line:#E5E8D3;
  --p:#5B7B2A; --s:#A3B86C; --a:#E9A23B; --deep:#4D6824; --on-deep:#F8FAF0; --deep-muted:#DCE5C2;
  --glow:rgba(163,184,108,.3); --sh:70,80,30;
  --cielo1:#E7F1F4; --cielo2:#FAFAF0; --prato1:#D3DDB2; --prato2:#E3E9CB; --pannello:#2E4663;
}
[data-palette="acqua"] {
  --bg:#F3FAFA; --bg-2:#E2F3F2; --surface:#FFFFFF;
  --ink:#0E2427; --ink-2:#34514F; --muted:#638180; --line:#D3EAE9;
  --p:#14806E; --s:#3DBAA3; --a:#FFB547; --deep:#12675A; --on-deep:#EFFBFA; --deep-muted:#BDE4DF;
  --glow:rgba(61,186,163,.28); --sh:16,80,72;
  --cielo1:#D5EFF8; --cielo2:#F2FBF8; --prato1:#B3E0D3; --prato2:#CFEDE4; --pannello:#1D4568;
}

/* ---------- Forme ---------- */
:root, [data-stile="morbido"] { --r:16px; --r-lg:26px; --pill:999px; }
[data-stile="netto"] { --r:8px; --r-lg:14px; --pill:10px; }

:root {
  --f-head:"Space Grotesk","Manrope",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --grad:linear-gradient(120deg,var(--p),var(--s) 60%,var(--a));
  --sh-s:0 1px 2px rgba(var(--sh),.06),0 2px 8px rgba(var(--sh),.05);
  --sh-m:0 14px 34px -12px rgba(var(--sh),.22),0 4px 10px rgba(var(--sh),.06);
  --sh-l:0 40px 80px -28px rgba(var(--sh),.36),0 12px 28px -10px rgba(var(--sh),.12);
  --collina:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22C200 6 400 6 600 22S1000 38 1200 22V40H0Z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--f-body); background:var(--bg); color:var(--ink); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color .4s ease; }
img,svg { display:block; max-width:100%; }
a { color:inherit; }
button,input,textarea { font:inherit; color:inherit; }
h1,h2,h3,h4 { font-family:var(--f-head); font-weight:700; letter-spacing:-.025em; line-height:1.1; color:var(--ink); }
h1 { font-size:clamp(2.3rem,5vw,4rem); }
h2 { font-size:clamp(1.85rem,3.4vw,2.7rem); }
h3 { font-size:1.2rem; }
p { color:var(--ink-2); }
::selection { background:var(--s); color:#fff; }
:focus-visible { outline:3px solid var(--s); outline-offset:3px; }
.wrap { width:min(1200px, 100% - 40px); margin-inline:auto; }
.skip { position:absolute; left:-999px; top:8px; z-index:100; padding:8px 14px; border-radius:var(--r); background:var(--p); color:#fff; }
.skip:focus { left:12px; }
.grad-text { background:linear-gradient(120deg,var(--p),var(--s) 70%,color-mix(in srgb,var(--a) 80%,var(--s))); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kicker { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--pill); background:color-mix(in srgb, var(--s) 15%, var(--surface)); color:var(--p); font-size:.82rem; font-weight:700; letter-spacing:.02em; }
.kicker i { width:9px; height:9px; border-radius:50%; background:var(--a); box-shadow:0 0 0 4px color-mix(in srgb, var(--a) 26%, transparent); animation:pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow:0 0 0 7px color-mix(in srgb, var(--a) 10%, transparent); } }
.lead { font-size:1.14rem; max-width:58ch; }
.muted { color:var(--muted); }
.section { position:relative; padding-block:clamp(72px,9vw,118px); }
.section--alt { background:var(--bg-2); }
.section--alt::before, .section--alt::after, .foot::before {
  content:""; position:absolute; left:0; right:0; height:40px; background:var(--bg-2); pointer-events:none;
  -webkit-mask:var(--collina) repeat-x 0 0 / 1200px 40px; mask:var(--collina) repeat-x 0 0 / 1200px 40px; }
.section--alt::before { top:-39px; }
.section--alt::after { bottom:-39px; transform:scaleY(-1); }
.head { max-width:740px; margin-bottom:48px; }
.head.center { text-align:center; margin-inline:auto; }
.head.center .lead { margin-inline:auto; }
.head h2 { margin:16px 0 14px; }
.center-link { text-align:center; margin-top:32px; }
.nota { margin-top:18px; font-size:.8rem; color:var(--muted); }

/* ---------- Pulsanti ---------- */
.btn { display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:var(--pill); border:0; cursor:pointer; text-decoration:none; font-weight:700; font-size:1rem; color:#fff; background:linear-gradient(120deg,var(--p),var(--s)); box-shadow:0 14px 30px -12px color-mix(in srgb, var(--p) 70%, transparent); transition:transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:0 20px 40px -14px color-mix(in srgb, var(--p) 80%, transparent); }
.btn svg { width:18px; height:18px; transition:transform .2s ease; }
.btn:hover svg { transform:translateX(4px); }
.btn--ghost { background:var(--surface); color:var(--ink); box-shadow:var(--sh-s); border:1px solid var(--line); }
.btn--bianco { background:#fff; color:var(--deep); }
.btn--trasp { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); box-shadow:none; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.link { display:inline-flex; align-items:center; gap:8px; color:var(--p); font-weight:700; text-decoration:none; }
.link svg { width:16px; height:16px; transition:transform .2s ease; }
.link:hover svg { transform:translateX(4px); }

/* ---------- Header ---------- */
.top { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:saturate(170%) blur(16px); -webkit-backdrop-filter:saturate(170%) blur(16px); transition:box-shadow .3s ease; }
.top.is-scrolled { box-shadow:0 1px 0 var(--line), 0 10px 30px -20px rgba(var(--sh),.4); }
.top__in { display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px; }
.logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.logo svg { width:40px; height:40px; }
.logo b { font-family:var(--f-head); font-weight:700; font-size:1.45rem; letter-spacing:-.03em; color:var(--deep); line-height:1; }
.logo b span { color:var(--s); }
.logo-sole { transform-box:fill-box; transform-origin:center; animation:sole-logo 6s ease-in-out infinite; }
@keyframes sole-logo { 50% { transform:scale(1.12); } }
.logo--chiaro b { color:#fff; } .logo--chiaro b span { color:var(--a); }
.nav { display:flex; align-items:center; gap:6px; }
.nav ul { display:flex; gap:2px; list-style:none; padding:0; }
.nav ul a { display:grid; line-height:1.15; padding:8px 14px; border-radius:var(--r); text-decoration:none; font-weight:700; font-size:.95rem; color:var(--ink-2); transition:background .2s ease, color .2s ease; }
.nav ul a small { font-size:.7rem; font-weight:500; color:var(--muted); }
.nav ul a:hover { background:var(--bg-2); color:var(--ink); }
.nav ul a[aria-current="page"] { background:var(--surface); color:var(--p); box-shadow:var(--sh-s); }
.nav .btn { padding:11px 22px; font-size:.92rem; margin-left:10px; }
.burger { display:none; width:46px; height:46px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); cursor:pointer; position:relative; }
.burger span, .burger span::before, .burger span::after { position:absolute; left:12px; right:12px; height:2px; background:var(--ink); content:""; transition:transform .25s ease; }
.burger span { top:22px; } .burger span::before { top:-6px; left:0; right:0; } .burger span::after { top:6px; left:0; right:0; }
.burger[aria-expanded="true"] span { background:transparent; }
.burger[aria-expanded="true"] span::before { transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform:translateY(-6px) rotate(-45deg); }
@media (max-width:900px) {
  .burger { display:block; }
  .nav { position:absolute; top:76px; left:12px; right:12px; display:none; flex-direction:column; align-items:stretch; padding:14px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); }
  .nav.is-open { display:flex; }
  .nav ul { flex-direction:column; }
  .nav ul a { padding:12px 14px; }
  .nav ul a small { font-size:.8rem; margin-top:2px; }
  .nav .btn { margin:8px 0 0; justify-content:center; }
}

/* ---------- Campo animato (SVG) ---------- */
.campo { width:100%; height:auto; }
.campo--testata .c-cielo1 { stop-opacity:0; } .campo--testata .c-cielo2 { stop-opacity:.7; }
.campo .c-cielo1 { stop-color:var(--cielo1); transition:stop-color .8s ease; }
.campo .c-cielo2 { stop-color:var(--cielo2); transition:stop-color .8s ease; }
.campo .arco { stroke:color-mix(in srgb, var(--a) 55%, transparent); stroke-width:1.5; stroke-dasharray:4 7; }
.campo .sole__c { fill:var(--a); }
.campo .sole { transition:opacity .6s ease; }
.campo .collina1 { fill:var(--prato1); } .campo .collina2 { fill:var(--prato2); }
.campo .palo { stroke:color-mix(in srgb, var(--deep) 60%, #8a9a8e); stroke-width:5; stroke-linecap:round; }
.campo .fila rect { fill:var(--pannello); stroke:#fff; stroke-width:1.2; }
.campo .fila .cella { stroke:rgba(255,255,255,.35); stroke-width:1; }
.campo .motore { fill:var(--a); stroke:#fff; stroke-width:1.5; }
.campo .stelle circle { fill:#fff; }
.campo .stelle { opacity:0; transition:opacity .8s ease; }
.campo .m-vento, .campo .m-pioggia, .campo .m-neve { opacity:0; transition:opacity .5s ease; pointer-events:none; }
.campo .m-vento path { stroke:#fff; stroke-width:3; stroke-linecap:round; opacity:.9; animation:soffio 1.4s linear infinite; animation-delay:var(--d); }
@keyframes soffio { from { transform:translateX(-80px); opacity:0; } 30% { opacity:.9; } to { transform:translateX(700px); opacity:0; } }
.campo .m-pioggia path { stroke:#6FA8DC; stroke-width:2; stroke-linecap:round; animation:goccia .8s linear infinite; animation-delay:var(--d); }
@keyframes goccia { from { transform:translateY(-60px); } to { transform:translateY(400px); } }
.campo .m-neve circle { fill:#fff; stroke:#C9D8E6; animation:fiocco 4s linear infinite; animation-delay:var(--d); }
@keyframes fiocco { from { transform:translate(0,-60px); } 50% { transform:translate(10px,180px); } to { transform:translate(-6px,420px); } }
.campo.is-notte .c-cielo1 { stop-color:#2C4A63; } .campo.is-notte .c-cielo2 { stop-color:#5E7F8F; }
.campo.is-notte .stelle { opacity:.9; }
.campo.is-notte .collina1 { fill:color-mix(in srgb, var(--prato1) 55%, #2c4a63); } .campo.is-notte .collina2 { fill:color-mix(in srgb, var(--prato2) 55%, #2c4a63); }
.campo.is-alba .c-cielo1 { stop-color:#FCE3C4; }
.campo.is-grigio .c-cielo1 { stop-color:#C9D3DB; } .campo.is-grigio .c-cielo2 { stop-color:#E8ECEC; }
.campo.has-vento .m-vento, .campo.has-pioggia .m-pioggia, .campo.has-neve .m-neve { opacity:1; }
.campo.has-neve .collina1, .campo.has-neve .collina2 { fill:#F4F8FB; }

/* ---------- HERO ---------- */
.aura { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aura i { position:absolute; border-radius:50%; filter:blur(70px); opacity:.7; }
.aura i:nth-child(1) { width:560px; height:560px; right:-120px; top:-200px; background:color-mix(in srgb, var(--a) 32%, transparent); animation:drift 18s ease-in-out infinite alternate; }
.aura i:nth-child(2) { width:440px; height:440px; left:-160px; top:30%; background:color-mix(in srgb, var(--s) 26%, transparent); animation:drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform:translate(-60px,50px) scale(1.15); } }
.hero { position:relative; padding:clamp(36px,6vw,86px) 0 clamp(70px,8vw,110px); overflow:hidden; }
.hero__in { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,5vw,60px); align-items:center; }
.hero__in > * { min-width:0; }
.hero h1 { margin:20px 0; }
.hero__vis { position:relative; border-radius:calc(var(--r-lg) + 6px); overflow:hidden; box-shadow:var(--sh-l); background:var(--surface); }
.hero__letture { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px; background:var(--surface); }
.hero__letture span { padding:8px 12px; border-radius:var(--r); background:var(--bg-2); }
.hero__letture small { display:block; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.hero__letture b { font-family:var(--f-head); font-size:1.15rem; font-variant-numeric:tabular-nums; color:var(--ink); }
@media (max-width:960px) { .hero__in { grid-template-columns:1fr; } }

/* ---------- Numeri ---------- */
.numeri-s { padding:10px 0 20px; }
.numeri { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.numero { padding:22px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); }
.numero b { display:block; font:700 clamp(1.8rem,5vw,2.4rem)/1 var(--f-head); color:var(--p); margin-bottom:8px; font-variant-numeric:tabular-nums; }
.numero span { font-size:.92rem; color:var(--ink-2); }
@media (max-width:860px) { .numeri { grid-template-columns:1fr 1fr; } }

/* ---------- Tre pezzi ---------- */
.pezzi { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pezzo { display:flex; flex-direction:column; gap:8px; padding:0 0 26px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.pezzo:hover { transform:translateY(-6px); box-shadow:var(--sh-l); }
.pezzo > :not(figure) { margin-inline:24px; }
.pezzo__img { aspect-ratio:16/11; margin:0 0 12px; overflow:hidden; background:linear-gradient(160deg,var(--bg-2),#fff); }
.pezzo__img img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.pezzo:hover .pezzo__img img { transform:scale(1.06); }
.pezzo__n { font:700 .82rem var(--f-head); color:var(--s); letter-spacing:.1em; }
.pezzo p { font-size:.96rem; }
.pezzo__img--ncu { display:grid; place-items:center; background:radial-gradient(circle at 70% 20%, color-mix(in srgb,var(--a) 22%,transparent), transparent 60%), linear-gradient(160deg,var(--bg-2),#fff); }
.mini-ncu { width:62%; padding:12px 12px 8px; border-radius:16px; background:linear-gradient(160deg,#E9EEEA,#C9D2CC); box-shadow:var(--sh-l), inset 0 0 0 2px #fff; }
.mini-ncu__s { display:grid; gap:8px; padding:12px; border-radius:10px; background:#0F2A1E; color:#fff; }
.mini-ncu__s b { font:700 .8rem var(--f-head); color:#fff; }
.mini-ncu__s span { display:flex; justify-content:space-around; padding:8px 0; }
.mini-ncu__s span i { width:30%; height:5px; border-radius:2px; background:var(--a); transform:rotate(var(--x)); animation:mini-fila 6s ease-in-out infinite; }
@keyframes mini-fila { 0%,100% { transform:rotate(-30deg); } 50% { transform:rotate(30deg); } }
.mini-ncu__s em { justify-self:start; padding:3px 9px; border-radius:99px; background:var(--s); font-style:normal; font-size:.66rem; font-weight:800; }
.mini-ncu small { display:block; margin-top:6px; text-align:center; font-weight:800; font-size:.66rem; letter-spacing:.14em; color:#5d6b62; }
@media (max-width:900px) { .pezzi { grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

/* ---------- Demo: una giornata ---------- */
.giornata { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; padding:18px; border-radius:calc(var(--r-lg) + 6px); background:var(--surface); box-shadow:var(--sh-l); }
.giornata > * { min-width:0; }
.giornata__scena { position:relative; border-radius:var(--r-lg); overflow:hidden; }
.giornata__ora { position:absolute; left:14px; top:14px; padding:8px 14px; border-radius:var(--r); background:rgba(255,255,255,.9); box-shadow:var(--sh-s); }
.giornata__ora b { display:block; font:700 1.5rem/1 var(--f-head); font-variant-numeric:tabular-nums; }
.giornata__ora span { font-size:.78rem; font-weight:700; color:var(--muted); }
.giornata__evento { position:absolute; right:14px; top:14px; max-width:60%; padding:9px 14px; border-radius:var(--r); background:var(--a); color:#3b2a00; font-weight:800; font-size:.86rem; box-shadow:var(--sh-m); animation:entra .4s ease; }
.giornata__evento.is-allerta { background:#FDE8E4; color:#9A2A14; }
@keyframes entra { from { opacity:0; transform:translateY(-8px); } }
.giornata__ctrl { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; padding:6px 4px 2px; }
.giornata__play { width:46px; height:46px; flex:none; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-s); }
.giornata__play svg { width:18px; height:18px; }
.giornata__play .i-play, .giornata.is-pausa .giornata__play .i-pausa { display:none; }
.giornata.is-pausa .giornata__play .i-play { display:block; }
.giornata__slider { flex:1; min-width:200px; display:grid; gap:4px; font-size:.78rem; font-weight:700; color:var(--muted); }
.giornata__slider input { width:100%; accent-color:var(--p); }
.giornata__meteo { display:flex; flex-wrap:wrap; gap:8px; }
.giornata__meteo button { display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:var(--pill); border:1px solid var(--line); background:var(--bg); font-weight:700; font-size:.88rem; cursor:pointer; transition:all .2s ease; }
.giornata__meteo button svg { width:18px; height:18px; }
.giornata__meteo button:hover { border-color:var(--s); }
.giornata__meteo button[aria-pressed="true"] { background:var(--p); border-color:var(--p); color:#fff; }
.ncu { display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:var(--r-lg); background:#0F2A1E; color:#E8F5EA; font-size:.86rem; }
.ncu__top { display:flex; justify-content:space-between; gap:10px; font-size:.76rem; font-weight:700; color:#A9C9B1; }
.ncu__top span:first-child { display:inline-flex; align-items:center; gap:7px; }
.led { width:8px; height:8px; border-radius:50%; display:inline-block; background:#64748B; }
.led--ok { background:#4ADE80; box-shadow:0 0 8px #4ADE80; animation:led 2s ease-in-out infinite; }
.led--bus { background:var(--a); box-shadow:0 0 8px var(--a); animation:led .7s steps(2) infinite; }
@keyframes led { 50% { opacity:.45; } }
.ncu__modo { padding:12px 14px; border-radius:12px; background:var(--s); color:#fff; font:700 1.02rem var(--f-head); transition:background .4s ease; }
.ncu__modo.is-vento { background:#E0763B; } .ncu__modo.is-pioggia { background:#3B82C4; } .ncu__modo.is-neve { background:#7C93A8; } .ncu__modo.is-notte { background:#3E5568; }
.ncu__dati { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ncu__dati div { padding:9px 11px; border-radius:10px; background:rgba(255,255,255,.07); }
.ncu__dati dt { font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#A9C9B1; }
.ncu__dati dd { margin:0; font:700 1.1rem var(--f-head); color:#fff; font-variant-numeric:tabular-nums; }
.ncu__log { list-style:none; padding:0; display:grid; gap:6px; max-height:132px; overflow:hidden; }
.ncu__log li { display:flex; gap:8px; padding:6px 9px; border-radius:8px; background:rgba(255,255,255,.05); font-size:.78rem; color:#CFE6D4; animation:entra .4s ease; }
.ncu__log time { font-weight:800; color:var(--a); font-variant-numeric:tabular-nums; }
@media (max-width:900px) { .giornata { grid-template-columns:1fr; padding:12px; } }

/* ---------- Resa ---------- */
.resa { padding:24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); }
.resa svg { width:100%; height:auto; }
.resa__griglia path { stroke:var(--line); stroke-width:1; }
.resa__assi text { font:600 12px var(--f-body); fill:var(--muted); }
.resa__inseg, .resa__fisso { fill:none; stroke-width:4; stroke-linecap:round; stroke-dasharray:900; stroke-dashoffset:900; }
.resa__inseg { stroke:var(--p); } .resa__fisso { stroke:#A7B3AA; stroke-dasharray:900; }
.resa__area { fill:color-mix(in srgb, var(--s) 22%, transparent); opacity:0; }
.resa__fisso-a { fill:color-mix(in srgb,#A7B3AA 22%,var(--surface)); opacity:0; }
.resa.is-in .resa__inseg, .resa.is-in .resa__fisso { animation:traccia 2.4s ease forwards; }
.resa.is-in .resa__fisso { animation-delay:.3s; }
.resa.is-in .resa__area, .resa.is-in .resa__fisso-a { animation:compare 1s ease 1.8s forwards; }
@keyframes traccia { to { stroke-dashoffset:0; } }
@keyframes compare { to { opacity:1; } }
.resa__leg { display:flex; flex-wrap:wrap; gap:18px; margin-top:12px; font-size:.88rem; font-weight:700; }
.resa__leg i { display:inline-block; width:22px; height:4px; border-radius:2px; margin-right:8px; vertical-align:middle; }
.l-inseg i { background:var(--p); } .l-fisso i { background:#A7B3AA; }

/* ---------- Spunte ---------- */
.spunte { list-style:none; padding:0; display:grid; gap:10px; margin-top:20px; }
.spunte li { position:relative; padding-left:32px; color:var(--ink-2); }
.spunte li b { color:var(--ink); }
.spunte li::before { content:""; position:absolute; left:0; top:3px; width:21px; height:21px; border-radius:50%; background:linear-gradient(135deg,var(--p),var(--s)); }
.spunte li::after { content:""; position:absolute; left:8px; top:7px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }

/* ---------- Layout a due colonne ---------- */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:center; }
.duo > * { min-width:0; }
@media (max-width:900px) { .duo { grid-template-columns:1fr; } .duo--inv > :first-child { order:2; } }

/* ---------- Comando (schermo NCU) ---------- */
.comando { display:flex; justify-content:center; }
.ncu-dev { width:min(480px,100%); padding:16px 16px 12px; border-radius:26px; background:linear-gradient(160deg,#EEF2EF,#C6CFC9); box-shadow:var(--sh-l), inset 0 0 0 2px #fff, inset 0 -6px 12px rgba(0,0,0,.08); }
.ncu-dev__schermo { display:grid; gap:12px; padding:14px; border-radius:14px; background:#0F2A1E; color:#E8F5EA; }
.ncu-dev__kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.ncu-dev__kpi span { padding:8px; border-radius:9px; background:rgba(255,255,255,.07); }
.ncu-dev__kpi small { display:block; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#A9C9B1; }
.ncu-dev__kpi b { font:700 1rem var(--f-head); color:#fff; font-variant-numeric:tabular-nums; }
.ncu-dev__campo { border-radius:10px; overflow:hidden; }
.ncu-dev__tasti { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.ncu-dev__tasti button { padding:11px 4px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; font-weight:800; font-size:.8rem; cursor:pointer; transition:all .2s ease; }
.ncu-dev__tasti button:hover { background:rgba(255,255,255,.14); }
.ncu-dev__tasti button[aria-pressed="true"] { background:var(--s); border-color:var(--s); }
.ncu-dev__tasti button.is-press { transform:scale(.94); }
.ncu-dev__msg { margin:0; text-align:center; font-size:.8rem; font-weight:700; color:#A9C9B1; }
.ncu-dev__led { display:flex; align-items:center; gap:8px; padding:10px 6px 0; font-size:.7rem; font-weight:800; letter-spacing:.12em; color:#5d6b62; }
.ncu-dev__led span { margin-left:auto; }

/* ---------- Testata delle pagine interne ---------- */
.testata { position:relative; overflow:hidden; padding:clamp(54px,7vw,96px) 0 clamp(70px,8vw,110px); background:linear-gradient(180deg, var(--bg), var(--bg-2)); }
.testata .wrap { position:relative; z-index:1; padding-right:min(46%, 540px); }
.testata h1 { margin:16px 0 14px; }
.testata__vis { position:absolute; right:0; bottom:0; width:min(50%, 640px); border-radius:var(--r-lg) 0 0 0; overflow:hidden; opacity:.98; -webkit-mask:linear-gradient(90deg,transparent,#000 18%); mask:linear-gradient(90deg,transparent,#000 18%); }
.testata--centro { text-align:center; }
.testata--centro .wrap { padding-right:0; }
.testata--centro .lead { margin-inline:auto; }
.testata--centro .btn-row { justify-content:center; }
.testata--centro .testata__vis { opacity:.3; width:100%; }
@media (max-width:860px) {
  .testata .wrap { padding-right:0; }
  .testata__vis { position:relative; width:100%; margin-top:28px; -webkit-mask:none; mask:none; border-radius:var(--r-lg); width:calc(100% - 40px); margin-inline:auto; }
  .testata--centro .testata__vis { display:none; }
}

/* ---------- Come funziona ---------- */
.frasi { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.frase { padding:24px 22px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); border-top:4px solid var(--s); }
.frase span { display:inline-grid; place-items:center; width:38px; height:38px; margin-bottom:14px; border-radius:12px; background:linear-gradient(135deg,var(--p),var(--s)); color:#fff; font:700 1rem var(--f-head); }
.frase h3 { margin-bottom:8px; font-size:1.08rem; }
.frase p { font-size:.93rem; }
@media (max-width:1000px) { .frasi { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .frasi { grid-template-columns:1fr; } }
.schema { margin:40px 0 0; padding:16px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); }
.schema img { width:100%; height:auto; border-radius:var(--r); }
.schema figcaption { margin-top:12px; text-align:center; font-size:.9rem; color:var(--muted); }
.schema--piccolo { margin:0; }

.viaggio { padding:28px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); }
.viaggio__nodi { position:relative; list-style:none; padding:0; display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.viaggio__nodi::before { content:""; position:absolute; left:6%; right:6%; top:30px; height:4px; border-radius:4px; background:repeating-linear-gradient(90deg, color-mix(in srgb,var(--s) 45%,transparent) 0 8px, transparent 8px 16px); background-size:32px 4px; animation:flusso 1.2s linear infinite; }
@keyframes flusso { to { background-position:32px 0; } }
.viaggio__nodi li { position:relative; display:grid; justify-items:center; gap:4px; text-align:center; }
.vn { width:62px; height:62px; display:grid; place-items:center; border-radius:18px; background:var(--bg); border:2px solid var(--line); color:var(--p); transition:all .35s ease; }
.vn svg { width:26px; height:26px; }
.viaggio__nodi b { font:700 .92rem var(--f-head); }
.viaggio__nodi small { font-size:.74rem; color:var(--muted); line-height:1.3; }
.viaggio__nodi li.is-on .vn { background:linear-gradient(135deg,var(--p),var(--s)); border-color:transparent; color:#fff; transform:translateY(-6px) scale(1.06); box-shadow:0 14px 26px -10px var(--glow); }
.viaggio__nodi li.is-fatto .vn { border-color:var(--s); }
.viaggio__msg { display:flex; align-items:center; gap:14px; margin-top:24px; padding:14px 18px; border-radius:var(--r); background:var(--bg-2); }
.viaggio__pacco { flex:none; padding:6px 12px; border-radius:var(--pill); background:var(--a); color:#3b2a00; font:700 .9rem var(--f-head); font-variant-numeric:tabular-nums; }
.viaggio__msg p { margin:0; font-weight:600; }
@media (max-width:860px) {
  .viaggio__nodi { grid-template-columns:1fr; gap:12px; }
  .viaggio__nodi::before { left:30px; right:auto; top:10px; bottom:10px; width:4px; height:auto; background:repeating-linear-gradient(180deg, color-mix(in srgb,var(--s) 45%,transparent) 0 8px, transparent 8px 16px); }
  .viaggio__nodi li { grid-template-columns:62px 1fr; justify-items:start; text-align:left; column-gap:14px; }
  .viaggio__nodi li .vn { grid-row:span 2; }
  .viaggio__nodi li.is-on .vn { transform:scale(1.06); }
}

.scenari { padding:18px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); }
.scenari__tab { display:flex; flex-wrap:wrap; gap:6px; padding:5px; border-radius:calc(var(--r) + 4px); background:var(--bg-2); margin-bottom:18px; }
.scenari__tab button { flex:1; min-width:130px; padding:11px 12px; border:0; border-radius:var(--r); background:none; font-weight:700; font-size:.9rem; color:var(--ink-2); cursor:pointer; }
.scenari__tab button[aria-selected="true"] { background:var(--surface); color:var(--p); box-shadow:var(--sh-s); }
.scenari__corpo { display:grid; grid-template-columns:1.1fr 1fr; gap:26px; align-items:center; }
.scenari__corpo > * { min-width:0; }
.scenari__vista { border-radius:var(--r-lg); overflow:hidden; }
.scenari__txt h3 { font-size:1.5rem; margin-bottom:10px; }
.scenari__txt > div { animation:entra .4s ease; }
@media (max-width:820px) { .scenari__corpo { grid-template-columns:1fr; } }

/* ---------- Sistema ---------- */
.foto-card { position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-l); }
.foto-card img { width:100%; height:auto; transition:transform 1.4s ease; }
.foto-card:hover img { transform:scale(1.04); }
.foto-card--disegno { padding:20px; display:grid; place-items:center; }
.foto-card--disegno img { max-height:380px; width:auto; }
.foto-card__tag { position:absolute; left:var(--x); top:var(--y); display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 7px; border-radius:var(--pill); background:rgba(255,255,255,.94); box-shadow:var(--sh-m); font:700 .78rem var(--f-head); color:var(--ink); transform:translate(-50%,-50%); }
.foto-card__tag::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--a); box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 60%,transparent); animation:punto 2s ease-out infinite; }
@keyframes punto { to { box-shadow:0 0 0 10px transparent; } }
.vento-fx { position:absolute; inset:0; pointer-events:none; }
.vento-fx i { position:absolute; left:-30%; height:2px; width:30%; border-radius:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent); animation:soffio2 2.6s linear infinite; }
.vento-fx i:nth-child(1) { top:22%; } .vento-fx i:nth-child(2) { top:34%; animation-delay:.9s; } .vento-fx i:nth-child(3) { top:28%; animation-delay:1.7s; }
@keyframes soffio2 { to { left:110%; } }

.web { position:relative; max-width:1080px; margin:0 auto 34px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-l); overflow:hidden; }
.web__bar { display:flex; gap:6px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line); background:var(--bg-2); }
.web__bar i { width:10px; height:10px; border-radius:50%; background:#FF5F57; } .web__bar i:nth-child(2) { background:#FEBC2E; } .web__bar i:nth-child(3) { background:#28C840; }
.web__bar span { margin-left:10px; padding:3px 12px; border-radius:7px; background:var(--surface); font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.web__body { display:grid; grid-template-columns:170px 1fr; min-height:420px; }
.web__side { display:grid; align-content:start; gap:4px; padding:16px 10px; background:linear-gradient(180deg,var(--deep),color-mix(in srgb,var(--deep) 75%,var(--s))); }
.web__side span { padding:9px 12px; border-radius:9px; font-size:.84rem; font-weight:700; color:var(--deep-muted); }
.web__side span.on { background:rgba(255,255,255,.16); color:#fff; }
.web__main { min-width:0; padding:20px; background:var(--bg); }
.web__kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.web__kpi span { padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.web__kpi small { display:block; font-size:.72rem; font-weight:700; color:var(--muted); }
.web__kpi b { font:700 1.3rem var(--f-head); font-variant-numeric:tabular-nums; }
.web__cols { display:grid; grid-template-columns:1.1fr 1fr; gap:12px; }
.web__box { display:grid; align-content:start; gap:8px; padding:14px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.web__box > b { font:700 .9rem var(--f-head); }
.web__file { list-style:none; padding:0; display:grid; gap:7px; }
.web__file li { display:grid; grid-template-columns:62px 1fr 74px; align-items:center; gap:10px; font-size:.82rem; }
.web__file li span { font-weight:700; }
.web__file li i { position:relative; height:8px; border-radius:4px; background:var(--bg-2); }
.web__file li em { position:absolute; left:50%; top:-3px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--s); box-shadow:0 0 0 3px color-mix(in srgb,var(--s) 25%,transparent); transition:left .8s ease; }
.web__file li b { text-align:right; font-variant-numeric:tabular-nums; }
.web__file li.manut em { background:#F59E0B; } .web__file li.manut b { color:#B45309; font-size:.74rem; }
.web__vento { width:100%; height:70px; }
.web__vento .soglia { stroke:#F59E0B; stroke-dasharray:4 4; stroke-width:1.5; }
.web__vento polyline { fill:none; stroke:var(--p); stroke-width:2.5; stroke-linejoin:round; }
.web__log { list-style:none; padding:0; display:grid; gap:6px; font-size:.78rem; }
.web__log li { display:flex; gap:8px; padding:6px 9px; border-radius:8px; background:var(--bg); animation:entra .4s ease; }
.web__log time { font-weight:800; color:var(--p); }
.toast { position:absolute; right:16px; bottom:16px; display:flex; gap:10px; align-items:center; max-width:320px; padding:12px 14px; border-radius:14px; background:#fff; box-shadow:var(--sh-l); font-size:.8rem; opacity:0; transform:translateY(16px); transition:opacity .4s ease, transform .4s ease; }
.toast.is-on { opacity:1; transform:none; }
.toast i { width:30px; height:30px; flex:none; border-radius:9px; background:linear-gradient(135deg,var(--p),var(--s)); }
.toast b { display:block; }
@media (max-width:860px) { .web__body { grid-template-columns:1fr; } .web__side { display:none; } .web__kpi { grid-template-columns:1fr 1fr; } .web__cols { grid-template-columns:1fr; } .toast { left:16px; right:16px; max-width:none; } }

.tre { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { padding:26px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); transition:transform .3s ease, box-shadow .3s ease; }
.card:hover { transform:translateY(-5px); box-shadow:var(--sh-l); }
.card .ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--p),var(--s)); color:#fff; margin-bottom:16px; }
.card .ic svg { width:24px; height:24px; }
.card h3 { margin-bottom:6px; }
.card p { font-size:.95rem; }
@media (max-width:900px) { .tre { grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }

.passi { position:relative; list-style:none; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; counter-reset:p; }
.passi::before { content:""; position:absolute; left:5%; right:5%; top:20px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--p),var(--s),var(--a)); }
.passi li { position:relative; counter-increment:p; padding:56px 18px 22px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); margin-top:20px; }
.passi li::before { content:counter(p); position:absolute; left:18px; top:-20px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--surface); border:4px solid var(--s); font:700 1rem var(--f-head); color:var(--p); }
.passi b { display:block; font-family:var(--f-head); font-size:1.04rem; margin-bottom:6px; }
.passi span { font-size:.9rem; color:var(--ink-2); }
@media (max-width:1000px) { .passi { grid-template-columns:1fr; max-width:620px; margin-inline:auto; } .passi::before { display:none; } }

/* ---------- Impianto: righe con foto ---------- */
.frow { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,5vw,64px); align-items:center; padding:30px 0; }
.frow > * { min-width:0; }
.frow + .frow { border-top:1px dashed color-mix(in srgb,var(--s) 30%,transparent); }
.frow--rev > :first-child { order:2; }
.frow__n { font:700 3rem/1 var(--f-head); color:transparent; -webkit-text-stroke:1.5px var(--s); }
.frow h3 { margin:10px 0 12px; font-size:clamp(1.45rem,2.4vw,1.9rem); }
.frow p { font-size:1.03rem; }
@media (max-width:860px) { .frow { grid-template-columns:1fr; } .frow--rev > :first-child { order:0; } }

/* ---------- CTA ---------- */
.cta { position:relative; overflow:hidden; display:grid; grid-template-columns:1.3fr .7fr; align-items:center; gap:24px; margin-top:clamp(70px,8vw,100px); padding:clamp(34px,5vw,64px); border-radius:calc(var(--r-lg) + 6px); background:linear-gradient(130deg,var(--deep),color-mix(in srgb,var(--deep) 55%,var(--s))); box-shadow:var(--sh-l); }
.cta > * { position:relative; z-index:1; }
.cta h2 { color:#fff; max-width:18ch; }
.cta p { color:var(--deep-muted); margin-top:14px; max-width:46ch; }
.cta__raggi { position:absolute !important; z-index:0 !important; right:-140px; top:-140px; width:520px; height:520px; border-radius:50%; background:repeating-conic-gradient(color-mix(in srgb,var(--a) 22%,transparent) 0 8deg, transparent 8deg 22deg); animation:ruota 60s linear infinite; -webkit-mask:radial-gradient(circle, #000 20%, transparent 70%); mask:radial-gradient(circle, #000 20%, transparent 70%); }
@keyframes ruota { to { transform:rotate(360deg); } }
.cta__sole { display:grid; place-items:center; height:200px; }
.cta__sole span { width:110px; height:110px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #FFE7A0, var(--a)); box-shadow:0 0 0 18px color-mix(in srgb,var(--a) 18%,transparent), 0 0 0 40px color-mix(in srgb,var(--a) 8%,transparent), 0 0 80px var(--a); animation:respira 5s ease-in-out infinite; }
@keyframes respira { 50% { transform:scale(1.08); } }
@media (max-width:820px) { .cta { grid-template-columns:1fr; } .cta__sole { display:none; } }

/* ---------- Contatti ---------- */
.contatto { display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(24px,4vw,56px); align-items:start; }
.contatto > * { min-width:0; }
.form { display:grid; gap:16px; padding:clamp(22px,4vw,38px); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); border-top:5px solid var(--s); }
.form .riga { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:grid; gap:6px; }
.field label { font-weight:700; font-size:.88rem; }
.field input, .field textarea { width:100%; padding:13px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg); transition:border-color .2s ease, box-shadow .2s ease; }
.field textarea { min-height:150px; resize:vertical; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--s); box-shadow:0 0 0 4px var(--glow); }
.req { color:#C2410C; }
.err { display:none; font-size:.83rem; font-weight:600; color:#DC2626; }
.has-error .err { display:block; }
.has-error input, .has-error textarea { border-color:#DC2626; }
.consenso { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:var(--r); border:1px solid transparent; font-size:.9rem; color:var(--ink-2); }
.consenso input { width:20px; height:20px; margin-top:2px; accent-color:var(--p); flex:none; }
.consenso a { color:var(--p); }
.consenso.has-error { border-color:#DC2626; background:#FEF2F2; animation:scuoti .4s ease; }
@keyframes scuoti { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.esito { display:none; padding:13px 16px; border-radius:var(--r); font-weight:600; font-size:.94rem; }
.esito.is-on { display:block; }
.esito--errore { background:#FEF2F2; color:#B91C1C; border-left:4px solid #DC2626; }
.esito--attesa { background:var(--bg-2); color:var(--ink-2); border-left:4px solid var(--s); }
.form input, .form textarea, .consenso { scroll-margin-top:110px; }
.contatto__vis { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-l); margin-bottom:16px; }
.side-card { padding:24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); }
.side-card h3 { margin-bottom:10px; }
@media (max-width:900px) { .contatto { grid-template-columns:1fr; } }
@media (max-width:560px) { .form .riga { grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.foot { position:relative; margin-top:clamp(80px,9vw,120px); background:var(--deep); color:var(--deep-muted); padding:60px 0 28px; font-size:.94rem; }
.foot::before { top:-39px; background:var(--deep); }
.foot__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px; }
.foot p { color:var(--deep-muted); margin-top:14px; max-width:42ch; }
.foot h4 { font:700 .78rem var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.foot ul { list-style:none; padding:0; display:grid; gap:8px; }
.foot a { color:var(--deep-muted); text-decoration:none; }
.foot a:hover { color:#fff; }
.foot__bottom { margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:.84rem; }
@media (max-width:760px) { .foot__grid { grid-template-columns:1fr; } }

/* ---------- Comparsa, torna su ---------- */
.rv { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.is-in { opacity:1; transform:none; }
.su { position:fixed; right:18px; bottom:18px; z-index:70; width:48px; height:48px; border-radius:50%; border:0; background:var(--surface); color:var(--ink); box-shadow:var(--sh-m); display:grid; place-items:center; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.su.is-on { opacity:1; pointer-events:auto; }
.su:hover { transform:translateY(-3px); }
.su svg { width:18px; height:18px; }


@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv { opacity:1; transform:none; }
  .resa__inseg, .resa__fisso { stroke-dashoffset:0; } .resa__area, .resa__fisso-a { opacity:1; }
}

@media (max-width:480px) { .hero__letture small { font-size:.6rem; } .hero__letture b { font-size:1rem; } .numero { padding:16px; } .numero span { font-size:.84rem; } }
.campo.is-grigio .sole__c { fill:#EEF1F2; } .campo.is-grigio .sole circle:first-child { opacity:.25; }
.contatto__lato .spunte { margin-top:6px; } .contatto__lato .spunte li { font-size:.94rem; }

/* =========================================================
   Il sistema: animazione TCU → NCU → internet
   ========================================================= */
.arch { padding:clamp(12px,2vw,22px); border-radius:calc(var(--r-lg) + 6px); background:var(--surface); box-shadow:var(--sh-l); }
.arch__scena { border-radius:var(--r-lg); overflow:hidden; }
.arch__svg { width:100%; height:auto; }
.arch__zona text { font:800 12px var(--f-body); letter-spacing:.14em; fill:var(--muted); }
.arch__sep { stroke:var(--line); stroke-width:1.5; stroke-dasharray:3 6; }
.arch__lbl { font:700 16px var(--f-head); fill:var(--ink-2); }
.arch__web { fill:none; stroke:#7AA7D6; stroke-width:3; stroke-dasharray:7 7; animation:scorre 1.4s linear infinite; }
.arch__bus { fill:none; stroke:var(--p); stroke-width:4; stroke-linecap:round; }
.arch__sens-l { stroke:var(--s); stroke-width:3; stroke-dasharray:3 5; }
@keyframes scorre { to { stroke-dashoffset:-28; } }
.arch__cloud path { fill:#fff; stroke:#B9D2EC; stroke-width:2; }
.arch__cloud text { font:700 14px var(--f-head); fill:#4F7FB0; }
.arch .dev { fill:#E7ECE9; stroke:#B9C4BE; stroke-width:2; }
.arch .schermo { fill:#0F2A1E; }
.arch__pc-t { font:700 12px var(--f-body); fill:#CFE6D4; }
.arch .mini-fila { fill:var(--a); }
.arch .tel-r { fill:rgba(255,255,255,.14); }
.arch .tel-btn { fill:rgba(255,255,255,.14); transition:fill .3s ease; }
.arch .tel-btn.is-on { fill:var(--a); }
.arch .tel-btn-t { font:800 9px var(--f-body); fill:#fff; }
.arch .palo, .arch .palo2 { stroke:color-mix(in srgb,var(--deep) 60%,#8a9a8e); stroke-width:6; stroke-linecap:round; }
.arch .palo2 { stroke-width:4; }
.arch .anemo path { stroke:#556; stroke-width:3; } .arch .anemo circle { fill:#fff; stroke:#556; stroke-width:2; }
.arch .pioggia { fill:#DCEBF7; stroke:#6FA8DC; stroke-width:2; }
.arch .nodo { fill:var(--s); }
.arch .ncu-box { fill:url(#arch-cielo); fill:#E3E9E5; stroke:#B9C4BE; stroke-width:2; }
.arch__ncu .ncu-box { transition:stroke .3s ease; }
.arch__ncu.is-on .ncu-box { stroke:var(--a); stroke-width:3; }
.arch .ncu-sch { fill:#0F2A1E; }
.arch .ncu-t { font:800 12px var(--f-body); fill:#fff; }
.arch .ncu-n { font:800 13px var(--f-head); fill:#5d6b62; letter-spacing:.1em; }
.arch .led-ok { fill:#4ADE80; } .arch .led-bus { fill:var(--a); animation:led .7s steps(2) infinite; }
.arch .pannello { fill:var(--pannello); stroke:#fff; stroke-width:1.5; }
.arch .cella { stroke:rgba(255,255,255,.35); }
.arch .motore { fill:var(--a); stroke:#fff; stroke-width:2; }
.arch .tcu-box { fill:#1E2B24; }
.arch .tcu-t { font:800 7.5px var(--f-body); fill:#CFE6D4; }
.arch .pacco { stroke:#fff; stroke-width:2.5; }
.arch .pacco.dato { fill:var(--s); } .arch .pacco.cmd { fill:var(--a); } .arch .pacco.web { fill:#5B9BD5; }
.arch__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 26px; margin-top:18px; padding:4px 6px 0; }
.arch__cap { display:flex; gap:16px; align-items:flex-start; flex:1; min-width:260px; min-height:78px; }
.arch__num { font:700 2.4rem/1 var(--f-head); color:var(--s); flex:none; }
.arch__cap b { display:block; font:700 1.2rem var(--f-head); }
.arch__cap p { margin-top:4px; max-width:64ch; }
.arch__ctrl { display:flex; align-items:center; gap:12px; }
.arch__play { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-s); }
.arch__play svg { width:18px; height:18px; }
.arch__play .i-play, .arch.is-pausa .arch__play .i-pausa { display:none; }
.arch.is-pausa .arch__play .i-play { display:block; }
.arch__passi { display:flex; gap:5px; }
.arch__passi button { position:relative; width:30px; height:26px; padding:0; border:0; background:none; cursor:pointer; }
.arch__passi button::before, .arch__passi button::after { content:""; position:absolute; left:0; right:0; top:9px; height:8px; border-radius:99px; background:var(--line); }
.arch__passi button::after { background:linear-gradient(90deg,var(--p),var(--s)); transform:scaleX(0); transform-origin:left; }
.arch__passi button.is-done::after { transform:none; }
.arch__passi button[aria-selected="true"]::after { animation:avanza var(--dur,5s) linear forwards; }
.arch.is-pausa .arch__passi button[aria-selected="true"]::after { animation:none; transform:none; }
@keyframes avanza { to { transform:none; } }
.arch__legenda { display:flex; flex-wrap:wrap; gap:16px; list-style:none; padding:12px 6px 0; margin:0; font-size:.84rem; font-weight:700; color:var(--ink-2); }
.arch__legenda i { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:7px; vertical-align:-1px; }
.lg-dato { background:var(--s); } .lg-cmd { background:var(--a); } .lg-web { background:#5B9BD5; }
@media (max-width:640px) { .arch__zona, .arch__lbl { display:none; } .arch__cap { min-height:120px; } }

/* =========================================================
   Illustrazioni animate (al posto delle foto)
   ========================================================= */
.ill { width:100%; height:auto; display:block; }
.ill text { font-family:var(--f-body); }
.ill-card { margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--sh-l); }
/* fila che segue il sole */
.ill-fila__sole { animation:fila-sole 8s ease-in-out infinite; }
@keyframes fila-sole { 0% { transform:translate(40px,140px); } 50% { transform:translate(160px,46px); } 100% { transform:translate(280px,140px); } }
.ill-fila__fila { animation:fila-gira 8s ease-in-out infinite; }
@keyframes fila-gira { 0% { transform:rotate(-50deg); } 50% { transform:rotate(0deg); } 100% { transform:rotate(50deg); } }
/* TCU */
.ill-tcu__giro { animation:ruota 3s linear infinite; transform-box:fill-box; transform-origin:center; }
.ill-tcu__bus { animation:led .6s steps(2) infinite; } .ill-tcu__moto { animation:led 1s steps(2) infinite; }
.blink-bus { animation:led .7s steps(2) infinite; }
/* centralina di fila in dettaglio */
.tcud { border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--sh-l); }
.tcud__svg { width:100%; height:auto; }
.tcud__dati { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px; }
.tcud__dati span { padding:9px 12px; border-radius:var(--r); background:var(--bg-2); }
.tcud__dati small { display:block; font-size:.68rem; font-weight:700; letter-spacing:.04em; color:var(--muted); }
.tcud__dati b { font:700 1.05rem var(--f-head); font-variant-numeric:tabular-nums; }
@media (max-width:640px) { .tcud__dati { grid-template-columns:1fr 1fr; } }
/* posizioni */
.posizioni { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pos { margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--sh-m); }
.pos svg { width:100%; height:auto; }
.pos__cielo { fill:var(--cielo1); } .pos__cielo--alba { fill:#FBE6CC; } .pos__cielo--grigio { fill:#D9E1E6; }
.pos__sole { fill:var(--a); }
.pos__terra { fill:var(--prato1); } .pos__terra--neve { fill:#F2F6F9; }
.pos__palo { stroke:#8a9a8e; stroke-width:6; stroke-linecap:round; }
.pos__fila { fill:var(--pannello); stroke:#fff; stroke-width:1.5; transform-box:view-box; transform-origin:0 0; animation:pos-va 5s ease-in-out infinite; }
@keyframes pos-va { 0%,12% { transform:rotate(0deg); } 40%,88% { transform:rotate(var(--ang)); } 100% { transform:rotate(0deg); } }
.pos__vento path { stroke:#fff; stroke-width:3; stroke-linecap:round; animation:soffio3 1.6s linear infinite; }
.pos__vento path:nth-child(2) { animation-delay:.5s; } .pos__vento path:nth-child(3) { animation-delay:1s; }
@keyframes soffio3 { to { transform:translateX(260px); } }
.pos__pioggia path { stroke:#4F8FCB; stroke-width:2; stroke-linecap:round; animation:goccia2 .9s linear infinite; }
.pos__pioggia path:nth-child(even) { animation-delay:.45s; }
@keyframes goccia2 { from { transform:translateY(-10px); } to { transform:translateY(110px); } }
.pos__neve circle { fill:#fff; stroke:#b9c9d6; animation:fiocco2 3s linear infinite; }
.pos__neve circle:nth-child(even) { animation-delay:1.5s; }
@keyframes fiocco2 { from { transform:translate(0,-10px); } to { transform:translate(8px,110px); } }
.pos figcaption { padding:12px 16px 16px; }
.pos figcaption b { display:block; font-family:var(--f-head); }
.pos figcaption span { font-size:.88rem; color:var(--muted); }
@media (max-width:860px) { .posizioni { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .posizioni { grid-template-columns:1fr; } }
/* vite senza fine */
.ill-vite__corona { animation:corona 8s ease-in-out infinite; }
@keyframes corona { 0% { transform:rotate(0); } 45%,100% { transform:rotate(40deg); } }
.ill-vite__filetto { animation:filetto 8s linear infinite; }
@keyframes filetto { 0% { transform:translateX(0); } 45% { transform:translateX(-104px); } 45.01%,100% { transform:translateX(-104px); } }
.ill-vite__vento { stroke:#5B9BD5; stroke-width:5; fill:none; stroke-linecap:round; opacity:0; animation:vite-vento 8s ease infinite; }
.ill-vite__vento text { stroke:none; fill:#4F7FB0; font-weight:700; font-size:14px; }
@keyframes vite-vento { 0%,50% { opacity:0; transform:translateX(-30px); } 58%,92% { opacity:1; transform:translateX(30px); } 100% { opacity:0; } }
.ill-vite__lucchetto { opacity:0; animation:vite-lock 8s ease infinite; }
.ill-vite__lucchetto text { fill:var(--p); font-weight:800; font-size:13px; }
@keyframes vite-lock { 0%,55% { opacity:0; transform:translate(470px,80px) scale(.6); } 62%,92% { opacity:1; transform:translate(470px,80px) scale(1); } 100% { opacity:0; transform:translate(470px,80px); } }
.ill-vite__stato { font-weight:700; font-size:15px; fill:var(--ink-2); opacity:0; }
.ill-vite__stato--1 { animation:stato1 8s ease infinite; } .ill-vite__stato--2 { animation:stato2 8s ease infinite; }
@keyframes stato1 { 0%,45% { opacity:1; } 50%,100% { opacity:0; } }
@keyframes stato2 { 0%,52% { opacity:0; } 58%,95% { opacity:1; } 100% { opacity:0; } }
/* struttura: montaggio */
.ill-str__palo { animation:str-palo 9s ease infinite; animation-delay:calc(var(--i) * .15s); }
@keyframes str-palo { 0% { transform:translateY(200px); opacity:0; } 10%,90% { transform:none; opacity:1; } 100% { opacity:0; } }
.ill-str__motore { animation:str-palo 9s ease .45s infinite; }
.ill-str__tubo { animation:str-tubo 9s ease infinite; }
@keyframes str-tubo { 0%,15% { transform:translateX(-620px); } 28%,90% { transform:none; opacity:1; } 100% { opacity:0; } }
.ill-str__trav { animation:str-cade 9s ease infinite; animation-delay:calc(1.4s + var(--i) * .15s); opacity:0; }
.ill-str__mod { animation:str-cade 9s ease infinite; animation-delay:calc(2.6s + var(--i) * .3s); opacity:0; }
@keyframes str-cade { 0% { transform:translateY(-120px); opacity:0; } 10%,60% { transform:none; opacity:1; } 72%,100% { opacity:0; } }
.ill-str__label text { font:700 15px var(--f-head); fill:var(--muted); opacity:.35; }
.ill-str__label .l1 { animation:lab 9s infinite; } .ill-str__label .l2 { animation:lab 9s 1.3s infinite; } .ill-str__label .l3 { animation:lab 9s 1.6s infinite; } .ill-str__label .l4 { animation:lab 9s 2.8s infinite; }
@keyframes lab { 0%,14% { opacity:1; fill:var(--p); } 18%,100% { opacity:.4; fill:var(--muted); } }
/* fila vista lungo */
.ill-lunga__piano { transform-box:fill-box; transform-origin:center; animation:lunga 7s ease-in-out infinite; }
@keyframes lunga { 0%,100% { transform:scaleY(.45); } 50% { transform:scaleY(1); } }
.ill-lunga__note text { font:700 14px var(--f-body); fill:var(--ink-2); }
/* vento */
.ill-vento__flusso { fill:none; stroke:rgba(255,255,255,.55); stroke-width:2; stroke-dasharray:40 30; animation:flusso2 1.6s linear infinite; animation-delay:var(--d); }
@keyframes flusso2 { to { stroke-dashoffset:-140; } }
.ill-vento__freccia text, .ill-vento__t { fill:#e9f2ec; font:700 15px var(--f-body); }
.ill-vento__freccia { animation:respira 2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
/* tre pezzi: illustrazione al posto della foto */
.pezzo__img--ill { aspect-ratio:auto; display:block; }
.pezzo__img--ill .ill { aspect-ratio:320/220; }

/* ---------- Centraline: NCU assente ---------- */
.isola { max-width:760px; margin-inline:auto; padding:22px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); }
.isola__switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:calc(var(--r) + 4px); background:var(--bg-2); margin-bottom:16px; }
.isola__switch button { padding:12px; border:0; border-radius:var(--r); background:none; font-weight:800; cursor:pointer; color:var(--ink-2); }
.isola__switch button[aria-pressed="true"] { background:var(--surface); color:var(--p); box-shadow:var(--sh-s); }
.isola.is-off .isola__switch button[aria-pressed="true"] { color:#B45309; }
.isola__lista { list-style:none; padding:0; display:grid; gap:8px; }
.isola__lista li { position:relative; display:grid; padding:12px 14px 12px 50px; border-radius:var(--r); background:var(--bg); transition:opacity .4s ease, background .4s ease; }
.isola__lista li::before { content:"✓"; position:absolute; left:14px; top:50%; width:24px; height:24px; margin-top:-12px; border-radius:50%; display:grid; place-items:center; background:var(--s); color:#fff; font-weight:800; font-size:.8rem; transition:background .4s ease; }
.isola__lista li span { font-size:.88rem; color:var(--muted); }
.isola.is-off .isola__lista li:not([data-sempre]) { opacity:.55; background:#FBF4EC; }
.isola.is-off .isola__lista li:not([data-sempre])::before { content:"–"; background:#D6A86A; }
.isola.is-off .isola__lista li[data-sempre] { box-shadow:0 0 0 2px var(--s); }

/* ---------- Specifiche ---------- */
.spec { max-width:960px; margin-inline:auto; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--sh-m); }
.spec__r { display:grid; grid-template-columns:1fr 1.4fr 1.4fr; gap:12px; padding:14px 20px; border-top:1px solid var(--line); font-size:.95rem; }
.spec__r span { font-weight:700; color:var(--muted); }
.spec__r b { font-weight:600; color:var(--ink); }
.spec__h { border-top:0; background:var(--bg-2); } .spec__h b { font:700 1rem var(--f-head); color:var(--p); }
@media (max-width:640px) { .spec__r { grid-template-columns:1fr 1fr; } .spec__r span { grid-column:1 / -1; } .spec__h span { display:none; } }

/* ---------- Software: ruoli ---------- */
.ruoli { padding:18px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); }
.ruoli__tab { display:flex; gap:4px; padding:4px; border-radius:calc(var(--r) + 4px); background:var(--bg-2); margin-bottom:20px; }
.ruoli__tab button { flex:1; padding:11px; border:0; border-radius:var(--r); background:none; font-weight:800; cursor:pointer; color:var(--ink-2); }
.ruoli__tab button[aria-selected="true"] { background:var(--surface); color:var(--p); box-shadow:var(--sh-s); }
.ruoli__corpo { display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center; }
.ruoli__txt h3 { font-size:1.5rem; margin-bottom:10px; }
.ruoli__txt > div { animation:entra .4s ease; }
.tel-mock { width:250px; padding:10px; border-radius:36px; background:#1D2420; box-shadow:var(--sh-l); }
.tel-mock__s { display:grid; gap:9px; min-height:430px; padding:30px 12px 14px; border-radius:28px; background:#F4F8F2; align-content:start; }
.tm-top { display:flex; justify-content:space-between; align-items:center; }
.tm-top b { font:700 .95rem var(--f-head); }
.tm-badge { padding:3px 8px; border-radius:99px; background:var(--bg-2); color:var(--p); font-size:.62rem; font-weight:800; }
.tm-kpi { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.tm-kpi span { padding:8px; border-radius:10px; background:#fff; }
.tm-kpi small { display:block; font-size:.6rem; font-weight:700; color:var(--muted); }
.tm-kpi b { font:700 .95rem var(--f-head); }
.tm-file { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; padding:16px 8px; border-radius:12px; background:linear-gradient(180deg,var(--cielo1),#fff); }
.tm-file i { height:5px; border-radius:2px; background:var(--pannello); transform:rotate(var(--a)); animation:tm-segue 8s ease-in-out infinite; }
.tm-file i.m { background:#F59E0B; animation:none; }
@keyframes tm-segue { 0%,100% { transform:rotate(-25deg); } 50% { transform:rotate(25deg); } }
.tm-azioni { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; transition:opacity .4s ease, filter .4s ease; }
.tm-azioni span { padding:8px 2px; border-radius:9px; background:#fff; font-size:.66rem; font-weight:800; text-align:center; }
.tm-azioni span.on { background:var(--s); color:#fff; }
.tm-fila { display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; padding:9px 10px; border-radius:10px; background:#FFF6E6; border:1px solid #F5D49A; font-size:.66rem; transition:opacity .4s ease; }
.tm-fila b { font-size:.74rem; } .tm-fila span { grid-row:2; color:#B45309; font-weight:700; }
.tm-fila em { grid-row:span 2; padding:6px 9px; border-radius:99px; background:#F59E0B; color:#fff; font-style:normal; font-weight:800; }
.tm-log { list-style:none; padding:0; display:grid; gap:4px; font-size:.62rem; }
.tm-log li { padding:6px 8px; border-radius:8px; background:#fff; } .tm-log time { font-weight:800; color:var(--p); margin-right:5px; }
[data-attivo="prop"] .tm-azioni { opacity:.35; filter:grayscale(1); }
[data-attivo="prop"] .tm-fila, [data-attivo="gest"] .tm-fila { opacity:.35; }
[data-attivo="tec"] .tm-azioni { opacity:.35; }
[data-attivo="gest"] .tm-azioni span { animation:tocco 2.4s ease-in-out infinite; }
[data-attivo="gest"] .tm-azioni span:nth-child(2) { animation-delay:.6s; } [data-attivo="gest"] .tm-azioni span:nth-child(3) { animation-delay:1.2s; }
@keyframes tocco { 0%,20%,100% { transform:none; } 10% { transform:scale(.9); } }
[data-attivo="tec"] .tm-fila { box-shadow:0 0 0 2px #F59E0B; animation:respira 2s ease-in-out infinite; }
@media (max-width:760px) { .ruoli__corpo { grid-template-columns:1fr; justify-items:center; } }

/* ---------- Software: notifiche ---------- */
.notif { display:flex; justify-content:center; }
.notif__tel { width:290px; min-height:440px; padding:40px 14px 18px; border-radius:40px; border:10px solid #1D2420; background:linear-gradient(170deg,var(--deep),color-mix(in srgb,var(--deep) 45%,var(--s))); box-shadow:var(--sh-l); }
.notif__ora { display:block; text-align:center; font:700 2.6rem var(--f-head); color:#fff; margin-bottom:18px; }
.notif__lista { list-style:none; padding:0; display:grid; gap:8px; }
.notif__lista li { display:flex; gap:10px; align-items:center; padding:10px; border-radius:16px; background:rgba(255,255,255,.94); animation:notif-in .5s cubic-bezier(.2,.9,.3,1.2); }
.notif__lista li i { width:30px; height:30px; flex:none; border-radius:9px; background:var(--s); }
.notif__lista li.n-v i { background:#E0763B; } .notif__lista li.n-m i { background:#F59E0B; } .notif__lista li.n-p i { background:#3B82C4; }
.notif__lista b { display:block; font-size:.8rem; } .notif__lista small { font-size:.72rem; color:var(--muted); }
@keyframes notif-in { from { opacity:0; transform:translateY(-20px) scale(.95); } }

/* ---------- Software: produzione ---------- */
.prod { padding:24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); }
.prod__head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-bottom:16px; }
.prod__head b { font-family:var(--f-head); }
.prod__leg { font-size:.8rem; font-weight:700; color:var(--muted); }
.prod__leg i { display:inline-block; width:10px; height:10px; border-radius:3px; margin:0 5px 0 10px; } .prod__leg i.a { background:var(--p); } .prod__leg i.b { background:#C3CCC6; }
.prod__barre { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; height:220px; align-items:end; }
.prod__barre > div { position:relative; display:flex; gap:3px; align-items:flex-end; height:100%; padding-bottom:22px; }
.prod__barre i { flex:1; border-radius:5px 5px 0 0; height:0; transition:height 1.2s cubic-bezier(.2,.7,.2,1); }
.prod__barre i:first-child { background:linear-gradient(180deg,var(--s),var(--p)); } .prod__barre i:nth-child(2) { background:#C3CCC6; transition-delay:.2s; }
.prod.is-in .prod__barre i:first-child { height:calc(var(--a) * 100% - 22px); } .prod.is-in .prod__barre i:nth-child(2) { height:calc(var(--b) * 100% - 22px); }
.prod__barre small { position:absolute; bottom:0; left:0; right:0; text-align:center; font-weight:700; color:var(--muted); font-size:.8rem; }
.prod__tot { margin-top:14px; } .prod__tot b { font:700 1.3rem var(--f-head); color:var(--p); } .prod__tot small { color:var(--muted); }
@media (prefers-reduced-motion:reduce) { .prod__barre i:first-child { height:calc(var(--a) * 100% - 22px); } .prod__barre i:nth-child(2) { height:calc(var(--b) * 100% - 22px); } }
.ill-lunga__mot { animation:respira 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }