/* ==========================================================================
   Corradetti S.r.l. – sito v2 ("Ora per Ora"), foglio di stile unico
   --------------------------------------------------------------------------
   Racconto a scorrimento: titoli grandi centrati, scene che restano ferme mentre
   il contenuto cambia, alternanza di campi chiari e notte.
   Indice: 1 font · 2 token · 3 base · 4 barra · 5 eroe · 6 scena "la giornata"
   7 frase che si accende · 8 tutto compreso · 9 galleria · 10 servizi · 11 percorso
   12 domande · 13 richiesta e modulo · 14 piede · 15 banner cookie · 16 movimento ridotto
   ========================================================================== */

/* 1. FONT (in locale, nessuna chiamata a Google) */
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-wght.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }

/* 2. TOKEN */
:root {
  --carta: #FFFFFF;
  --ghiaccio: #F3F7F9;
  --inchiostro: #202B34;
  --grigio: #565555;        /* testo secondario su chiaro (7:1) */
  --navy: #102C42;
  --notte: #0A1B29;
  --blu: #3895D1;
  --blu-profondo: #1778B4;
  --nebbia: #C9D6DE;        /* testo secondario su scuro */
  --linea: #DCE5E9;
  --display: "Manrope", "Segoe UI", Arial, sans-serif;
  --testo: "DM Sans", "Segoe UI", Arial, sans-serif;
  /* alias usati dal banner dei cookie (stesso codice del sito attuale) */
  --bianco: var(--carta); --font-titoli: var(--display); --font-testi: var(--testo);
  color-scheme: light;
}

/* 3. BASE */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 400 17px/1.6 var(--testo); }
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blu-profondo); }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -0.03em; }
.gutter { padding-inline: clamp(16px, 4vw, 48px); }
.centro { max-width: 1100px; margin: 0 auto; }
.salta { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; background: var(--navy); color: var(--carta); font-weight: 600; }
.salta:focus { top: 16px; }
.solo-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn-tondo { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--blu-profondo); color: var(--carta); text-decoration: none; font: 600 1rem var(--testo); cursor: pointer; transition: transform 160ms ease-out, background-color 160ms ease-out; }
.btn-tondo:hover { background: var(--navy); color: var(--carta); }
.btn-tondo:active { transform: scale(0.97); }
.link-freccia { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; text-decoration: none; }
.link-freccia::after { content: "›"; margin-left: 6px; transition: transform 160ms ease-out; }
.link-freccia:hover::after { transform: translateX(4px); }
.link-coppia, .cta-riga { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: center; align-items: center; }
.cta-riga { margin-top: 36px; }

/* 4. BARRA */
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--carta); }
.barra .centro { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; }
.barra__logo img { width: 150px; }
.barra nav { display: flex; gap: 22px; font-size: 15px; }
.barra nav a { color: var(--inchiostro); text-decoration: none; padding: 8px 0; }
.barra nav a:hover, .barra nav a[aria-current="page"] { color: var(--blu-profondo); }
.barra nav a[aria-current="page"] { font-weight: 600; }
.barra__destra { display: flex; align-items: center; gap: 8px; }
.barra .azione { font-size: 15px; font-weight: 600; text-decoration: none; background: var(--blu-profondo); color: var(--carta); padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
.menu-apri { display: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ghiaccio); color: var(--navy); font: 600 15px var(--testo); cursor: pointer; }
/* Sotto i 1080 px il menu diventa un pannello che si apre dal pulsante "Menu" */
@media (max-width: 1079px) {
  .menu-apri { display: inline-flex; align-items: center; }
  .barra nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 4px clamp(16px, 4vw, 48px) 20px; background: var(--carta); border-top: 1px solid var(--linea); box-shadow: 0 18px 32px rgba(16, 44, 66, 0.14); max-height: calc(100svh - 60px); overflow-y: auto; }
  .barra nav.aperto { display: flex; }
  .barra nav a { padding: 14px 0; font: 700 1.25rem var(--display); letter-spacing: -0.01em; border-bottom: 1px solid var(--linea); }
}
@media (max-width: 760px) { .barra .azione { display: none; } }

/* 5. EROE */
.eroe { text-align: center; padding-block: clamp(56px, 9vw, 112px) 44px; }
.eroe h1 { font-size: clamp(2.4rem, 1rem + 6vw, 6.5rem); font-weight: 800; line-height: 0.98; max-width: 14ch; margin: 0 auto; }
.eroe__luogo { display: block; margin-top: 0.35em; font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.9rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--blu-profondo); }
.eroe .sotto { font-size: clamp(1.1rem, 1rem + 0.7vw, 1.6rem); color: var(--grigio); max-width: 38ch; margin: 22px auto 30px; line-height: 1.4; font-weight: 500; }
.fiducia { list-style: none; margin: 32px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; font-size: 15px; color: var(--grigio); }
.fiducia b { color: var(--inchiostro); font-family: var(--display); }
.allarga { padding-inline: clamp(16px, 4vw, 48px); }
.allarga figure { margin: 0 auto; max-width: 1400px; overflow: hidden; transform-origin: 50% 0; }
.allarga img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.allarga figcaption { text-align: center; font-size: 14px; color: var(--grigio); margin-top: 12px; }

/* 6. SCENA "LA GIORNATA": casa isometrica con le letture, resta ferma mentre si scorre */
.scena { position: relative; height: 220vh; background: var(--notte); color: var(--carta); }
.scena__palco { position: sticky; top: 60px; height: calc(100svh - 60px); display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 24px clamp(16px, 4vw, 48px) 20px; overflow: hidden; }
.scena h2 { text-align: center; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.04; }
.scena__disegno { position: relative; min-height: 0; display: grid; place-items: center; }
.scena__cielo { position: absolute; inset: 0; background: #163A57; opacity: 0; transition: opacity 120ms linear; }
.scena__palco > *:not(.scena__cielo) { position: relative; }
.casa { position: relative; width: min(100%, 980px, calc((100svh - 400px) * 1.45)); aspect-ratio: 900 / 620; }
.casa svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lettura { position: absolute; display: grid; gap: 0; min-width: 120px; padding-left: 12px; border-left: 2px solid var(--nebbia); }
.lettura__nome { font-size: clamp(13px, 1.2vw, 16px); color: var(--nebbia); }
.lettura__valore { font: 700 clamp(1.3rem, 0.9rem + 1.6vw, 2.3rem)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.lettura__valore small { font: 500 0.55em var(--testo); color: var(--nebbia); margin-left: 4px; }
.lettura__stato { justify-self: start; margin-top: 6px; padding: 2px 10px; border: 1px solid var(--blu); border-radius: 999px; font-size: 13px; color: var(--carta); }
.lettura__stato:empty { display: none; }
.scena__testo { text-align: center; display: grid; gap: 4px; justify-items: center; }
.scena__ora { font: 800 clamp(2rem, 1.4rem + 2.4vw, 3.4rem)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--blu); }
.scena__frase { margin: 0; font-size: clamp(1rem, 0.95rem + 0.4vw, 1.3rem); max-width: 46ch; min-height: 2.8em; }
.scena__nota { margin: 0; font-size: 13px; color: var(--nebbia); }
.scena .link-freccia { color: var(--carta); }
/* disegno */
.g-cielo-giorno { transition: opacity 120ms linear; }
.g-finestra { transition: fill 200ms ease-out; }
.g-cavo { fill: none; stroke: #2A4A62; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-flusso { fill: none; stroke: var(--blu); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 12; opacity: 0; transition: opacity 200ms ease-out; animation: scorri 0.9s linear infinite; }
.g-flusso.attivo { opacity: 1; }
.g-flusso.inverso { animation-direction: reverse; }
@keyframes scorri { to { stroke-dashoffset: -16; } }
.g-guida { fill: none; stroke: var(--nebbia); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0.7; }
/* telefono: letture sotto il disegno, in griglia 2x2 */
@media (max-width: 760px) {
  .scena { height: 200vh; }
  .scena__disegno { display: block; }
  .casa { width: 100%; margin: 0 auto; aspect-ratio: auto; }
  .casa svg { position: relative; inset: auto; display: block; height: auto; }
  .letture { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 8px; }
  .lettura { position: static; min-width: 0; }
  .g-guida { display: none; }
}

/* 7. FRASE CHE SI ACCENDE */
.accende { padding-block: clamp(100px, 16vw, 200px); }
.accende p { font: 700 clamp(1.9rem, 1.1rem + 3.2vw, 4rem)/1.12 var(--display); letter-spacing: -0.03em; max-width: 22ch; margin: 0 auto; }
.accende .parola { opacity: 0.18; transition: opacity 180ms linear; }
.accende .parola.accesa { opacity: 1; }

/* 8. TUTTO COMPRESO: i componenti in isometria si separano */
.pezzi { position: relative; height: 190vh; background: var(--ghiaccio); }
.pezzi__palco { position: sticky; top: 60px; height: calc(100svh - 60px); display: grid; gap: 24px; align-content: center; padding: 24px clamp(16px, 4vw, 48px); overflow: hidden; }
@media (min-width: 980px) { .pezzi__palco { grid-template-columns: 6fr 5fr; align-items: center; } }
.pezzi h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1.02; }
.pezzi__disegno svg { width: 100%; max-height: 62vh; overflow: visible; }
.pezzo { transition: transform 120ms linear; }
.pezzi__elenco { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.pezzi__elenco li { padding: 10px 16px; background: var(--carta); opacity: 0.35; transform: translateX(-8px); transition: opacity 220ms ease-out, transform 220ms ease-out; }
.pezzi__elenco li.attivo { opacity: 1; transform: none; }
.pezzi__elenco b { display: block; font: 700 1.1rem var(--display); color: var(--navy); }
.pezzi__elenco span { font-size: 16px; }
.pezzi .btn-tondo { margin-top: 22px; }
/* Telefono e tablet: titoli di tutte le voci, descrizione solo di quella corrente (resta tutto nello schermo) */
@media (max-width: 979px) {
  .pezzi { height: 180vh; }
  .pezzi__palco { gap: 12px; }
  .pezzi__disegno svg { max-height: 30vh; }
  .pezzi h2 { font-size: 1.7rem; }
  .pezzi__elenco { gap: 6px; margin-top: 12px; }
  .pezzi__elenco li { padding: 8px 12px; }
  .pezzi__elenco b { font-size: 1rem; }
  .pezzi__elenco span { display: none; font-size: 14px; line-height: 1.4; }
  .pezzi__elenco li.corrente span, .pezzi--fermi .pezzi__elenco span { display: block; }
  .pezzi .btn-tondo { margin-top: 12px; }
}

/* 9. GALLERIA ORIZZONTALE */
.galleria { position: relative; background: var(--carta); }
.galleria__palco { position: sticky; top: 60px; height: calc(100svh - 60px); display: grid; align-content: center; gap: 24px; overflow: hidden; }
.galleria h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1.02; padding-inline: clamp(16px, 4vw, 48px); }
.galleria__sotto { padding-inline: clamp(16px, 4vw, 48px); color: var(--grigio); font-size: 1.15rem; margin: -8px 0 0; max-width: 60ch; }
.galleria__pista { display: flex; gap: 20px; padding-inline: clamp(16px, 4vw, 48px); width: max-content; will-change: transform; }
.galleria__pista figure { margin: 0; width: clamp(260px, 34vw, 480px); }
.galleria__pista img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galleria__pista figcaption { margin-top: 10px; font-size: 15px; color: var(--grigio); }
.galleria__pista figcaption b { display: block; font: 700 1.15rem var(--display); color: var(--inchiostro); }
@media (max-width: 799px) {
  .galleria { height: auto !important; padding-block: 72px; }
  .galleria__palco { position: static; height: auto; }
  .galleria__pista { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; padding-bottom: 8px; }
  .galleria__pista figure { flex: 0 0 78vw; scroll-snap-align: start; }
}

/* 10. SERVIZI (schede) */
.perchi { background: var(--notte); color: var(--carta); padding-block: clamp(90px, 13vw, 160px); }
.perchi h2 { text-align: center; font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.schede { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 32px 0 40px; }
.schede button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--navy); color: var(--carta); font: 600 16px var(--testo); cursor: pointer; transition: background-color 160ms ease-out; }
.schede button[aria-selected="true"] { background: var(--carta); color: var(--notte); }
.pannello { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .pannello { grid-template-columns: 1fr 1fr; } }
.pannello[hidden] { display: none; }
.pannello.entra { animation: entra 280ms ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pannello img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pannello h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.08; }
.pannello p { color: var(--nebbia); max-width: 50ch; }
.pannello ul { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.pannello .btn-tondo { margin-top: 22px; }
.perchi .btn-tondo:hover { background: var(--blu); color: var(--notte); }
.perchi .link-freccia { color: var(--carta); }

/* 11. PERCORSO */
.percorso { padding-block: clamp(90px, 13vw, 160px); }
.percorso h2 { text-align: center; font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.percorso .sotto { text-align: center; color: var(--grigio); font-size: 1.2rem; margin: 14px auto 0; max-width: 46ch; }
.tappe { list-style: none; margin: 56px auto 0; padding: 0; max-width: 760px; position: relative; display: grid; gap: 34px; }
.tappe::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 3px; background: var(--linea); }
.tappe li { position: relative; padding-left: 56px; }
.tappe li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 21px; height: 21px; border-radius: 50%; background: var(--carta); border: 3px solid var(--blu-profondo); }
.tappe li.tappe__riempi { position: absolute; left: 15px; top: 8px; bottom: 8px; width: 3px; padding: 0; background: var(--blu-profondo); transform-origin: top; transform: scaleY(var(--p, 1)); }
.tappe li.tappe__riempi::before { display: none; }
.tappe b { display: block; font: 700 1.25rem var(--display); }
.tappe span { color: var(--grigio); }

/* 12. DOMANDE */
.domande { background: var(--ghiaccio); padding-block: clamp(90px, 13vw, 160px); }
.domande h2 { text-align: center; font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.domande .sotto { text-align: center; color: var(--grigio); font-size: 1.2rem; margin: 14px auto 48px; max-width: 46ch; }
.dom { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.dom__voce { background: var(--carta); border-radius: 18px; }
.dom__voce h3 { font-size: inherit; letter-spacing: 0; }
.dom__voce button { width: 100%; text-align: left; border: 0; background: none; padding: 22px 24px; display: flex; justify-content: space-between; gap: 16px; font: 700 1.15rem var(--display); color: var(--inchiostro); cursor: pointer; }
.dom__voce button::after { content: "+"; color: var(--blu-profondo); font-size: 1.5rem; line-height: 1; transition: transform 220ms ease-out; }
.dom__voce button[aria-expanded="true"]::after { transform: rotate(45deg); }
/* Senza JavaScript le risposte restano aperte; js/sito.js aggiunge "dom-attivo" e le chiude.
   Il pulsante sta dentro l'h3: l'apertura passa dalla classe "aperta" sulla voce. */
.dom__corpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 260ms ease-out; }
.dom-attivo .dom__corpo { grid-template-rows: 0fr; }
.dom-attivo .dom__voce.aperta .dom__corpo { grid-template-rows: 1fr; }
.dom__corpo > div { overflow: hidden; }
.dom__corpo p { margin: 0; padding: 0 24px 16px; max-width: 68ch; }
.dom__corpo > div > :last-child { padding-bottom: 24px; }
.dom__corpo ul { margin: 0; padding: 0 24px 16px 44px; max-width: 68ch; display: grid; gap: 6px; }
.fonte { font-size: 14px; color: var(--grigio); }

/* 13. RICHIESTA E MODULO */
.richiesta { padding-block: clamp(90px, 13vw, 160px); }
.richiesta__griglia { display: grid; gap: 40px; }
@media (min-width: 960px) { .richiesta__griglia { grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; } }
.richiesta h2 { font-size: clamp(2.4rem, 1.4rem + 3.5vw, 4.4rem); line-height: 0.98; font-weight: 800; }
.richiesta .sotto { color: var(--grigio); font-size: 1.2rem; margin: 18px 0 0; max-width: 40ch; }
.numeri { margin-top: 28px; display: grid; gap: 6px; font-size: 1.1rem; }
.numeri b { font-family: var(--display); }
.modulo { display: grid; gap: 18px; background: var(--ghiaccio); padding: clamp(20px, 3vw, 36px); border-radius: 24px; }
@media (min-width: 640px) { .modulo { grid-template-columns: 1fr 1fr; } .modulo .intero { grid-column: 1 / -1; } }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label { font-weight: 600; font-size: 0.9375rem; }
.campo .facoltativo { font-weight: 400; color: var(--grigio); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #68747C; border-radius: 12px; background: var(--carta); color: var(--inchiostro); font: 400 1rem var(--testo); }
.campo textarea { min-height: 110px; resize: vertical; }
.consenso { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; }
.consenso input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--blu-profondo); }
.modulo .nota { margin: 8px 0 0; font-size: 0.9375rem; color: var(--grigio); }

/* 14. PIEDE */
.piede { background: var(--notte); color: var(--nebbia); padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 15px; }
.piede .centro { display: grid; gap: 28px; }
.piede__alto { display: grid; gap: 28px; }
@media (min-width: 860px) { .piede__alto { grid-template-columns: 1fr auto; } }
.piede a, .piede .link-cookie { color: var(--carta); }
.piede nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 4px 32px; }
.piede nav a { text-decoration: none; font-weight: 600; display: inline-block; padding: 4px 0; }
.piede__logo img { width: 230px; }
.piede__legale { display: flex; flex-wrap: wrap; gap: 6px 24px; padding-top: 16px; border-top: 1px solid #2A4A62; font-size: 14px; }
.piede__legale p { margin: 0; }
.link-cookie { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }

/* Barra fissa su telefono: chiamata e sopralluogo a portata di pollice */
.barra-mobile { display: none; }
@media (max-width: 760px) {
  .barra-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--carta); }
  .barra-mobile a { min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 600; text-decoration: none; }
  .barra-mobile .chiama { background: var(--ghiaccio); color: var(--navy); }
  .barra-mobile .richiedi { background: var(--blu-profondo); color: var(--carta); }
  .piede { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .cookie { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Entrata morbida: parte da visibile, non da invisibile */
.js .sale { opacity: 0.25; transform: translateY(28px); transition: opacity 600ms ease-out, transform 600ms cubic-bezier(.2,.7,.2,1); }
.js .sale.dentro { opacity: 1; transform: none; }

/* 15. BANNER DEI COOKIE (js/consenso.js): "Rifiuta" e "Accetta" identici */
.cookie { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; max-width: 1100px; margin: 0 auto; display: grid; gap: 16px; padding: 24px 24px 20px; background: var(--bianco); color: var(--inchiostro); border-radius: 20px; box-shadow: 0 8px 32px rgba(16, 44, 66, 0.25); }
@media (min-width: 900px) { .cookie { grid-template-columns: 1fr auto; align-items: end; gap: 32px; } }
.cookie p { margin: 0 0 6px; font-size: 0.9375rem; max-width: 72ch; }
.cookie__titolo { font-family: var(--font-titoli); font-weight: 700; font-size: 1.0625rem !important; color: var(--navy); }
.cookie__chiudi { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--navy); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.cookie__testo { padding-right: 36px; }
.cookie__azioni { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.cookie__btn { min-height: 48px; min-width: 132px; padding: 10px 20px; border: 2px solid var(--navy); border-radius: 999px; background: var(--navy); color: var(--bianco); font: 600 1rem var(--font-testi); cursor: pointer; }
.cookie__btn:hover { background: var(--blu-profondo); border-color: var(--blu-profondo); }
.cookie__link { min-height: 48px; padding: 10px 4px; border: 0; background: none; color: var(--blu-profondo); font: 600 1rem var(--font-testi); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie-sfondo { position: fixed; inset: 0; z-index: 95; background: rgba(10, 27, 41, 0.6); display: grid; place-items: center; padding: 16px; }
.cookie-pannello { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--bianco); color: var(--inchiostro); padding: clamp(20px, 4vw, 36px); border-radius: 20px; display: grid; gap: 16px; }
.cookie-pannello h2 { font-size: 1.5rem; }
.cookie-pannello p { margin: 0; }
.cookie__voce { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--linea); }
.cookie__voce input { width: 22px; height: 22px; margin: 3px 0 0; flex: none; accent-color: var(--blu-profondo); }
.cookie__voce label { display: grid; gap: 4px; cursor: pointer; }
.cookie__voce label span { font-size: 0.9375rem; color: var(--grigio); }
.cookie__nota { font-size: 0.9375rem; }

/* 16. MOVIMENTO RIDOTTO */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .sale { opacity: 1; transform: none; transition: none; }
  .accende .parola { opacity: 1; }
  .pezzi__elenco li { opacity: 1; transform: none; }
  .pannello.entra, .g-flusso { animation: none; }
  .g-flusso { stroke-dasharray: none; }
}

/* ==========================================================================
   17. PAGINE INTERNE (stesso sistema della home: titoli grandi centrati,
   sezioni alternate bianco / ghiaccio / notte, entrate morbide)
   ========================================================================== */
/* apertura della pagina: come l'eroe della home, titolo un po' più piccolo */
.eroe--interna h1 { font-size: clamp(2.3rem, 1rem + 4.6vw, 5.2rem); max-width: 16ch; line-height: 1; }
.eroe--interna .sotto { max-width: 44ch; }
.eroe--corta { padding-bottom: clamp(56px, 8vw, 96px); }

/* sezioni generiche */
.sez { padding-block: clamp(80px, 11vw, 140px); }
.sez--ghiaccio { background: var(--ghiaccio); }
.sez--notte { background: var(--notte); color: var(--carta); }
.sez__titolo { text-align: center; font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1.04; }
.sez__sotto { text-align: center; color: var(--grigio); font-size: 1.2rem; margin: 14px auto 0; max-width: 52ch; }
.sez--notte .sez__sotto, .sez--notte .fonte { color: var(--nebbia); }
.sez--notte a:not(.btn-tondo) { color: var(--blu); }
.sez--notte .link-freccia { color: var(--carta); }
.sez--notte .btn-tondo:hover { background: var(--blu); color: var(--notte); }
.sez .fonte { text-align: center; max-width: 80ch; margin: 28px auto 0; }

/* voci in schede: cosa comprende, requisiti, cosa manuteniamo */
.voci { list-style: none; margin: 48px auto 0; padding: 0; max-width: 1100px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.voci li { background: var(--ghiaccio); border-radius: 20px; padding: 26px 26px 28px; }
.sez--ghiaccio .voci li { background: var(--carta); }
.sez--notte .voci li { background: var(--navy); }
.voci h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.02em; }
.voci p { margin: 8px 0 0; color: var(--grigio); }
.sez--notte .voci p { color: var(--nebbia); }
.voci--numerate { counter-reset: voce; }
.voci--numerate li { counter-increment: voce; }
.voci--numerate h3::before { content: counter(voce, decimal-leading-zero); display: block; margin-bottom: 10px; font: 800 1rem var(--display); color: var(--blu-profondo); }
.sez--notte .voci--numerate h3::before { color: var(--blu); }

/* cifre grandi (detrazioni, chi siamo) */
.cifre { list-style: none; margin: 56px auto 0; padding: 0; max-width: 1100px; display: grid; gap: 32px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); text-align: center; }
.cifre b { display: block; font: 800 clamp(2.6rem, 1.6rem + 3vw, 4.4rem)/1 var(--display); letter-spacing: -0.04em; color: var(--blu-profondo); }
.sez--notte .cifre b { color: var(--blu); }
.cifre span { display: block; margin-top: 10px; color: var(--grigio); max-width: 26ch; margin-inline: auto; }
.sez--notte .cifre span { color: var(--nebbia); }

/* grafico della giornata + spiegazione accanto */
.analisi { display: grid; gap: 40px; max-width: 1100px; margin: 56px auto 0; align-items: center; }
@media (min-width: 960px) { .analisi { grid-template-columns: 7fr 5fr; gap: 56px; } }
.analisi figure { margin: 0; }
.grafico svg { display: block; width: 100%; height: 100%; overflow: visible; }
.legenda { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--nebbia); }
.legenda li { display: flex; align-items: center; gap: 8px; }
.campione { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.campione--consumo { background: #1B4260; box-shadow: inset 0 0 0 2px var(--nebbia); }
.campione--subito { background: var(--blu); }
.campione--piu { background: repeating-linear-gradient(45deg, var(--blu) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1px var(--blu); }
.campione--batteria { background: var(--ghiaccio); }
.campione--prevista { border: 2px dashed var(--ghiaccio); }
.analisi__nota { margin: 10px 0 0; font-size: 13px; color: var(--nebbia); }
.analisi dl { margin: 0; }
.analisi dt { font: 700 1.25rem var(--display); letter-spacing: -0.02em; }
.analisi dd { margin: 6px 0 26px; color: var(--nebbia); }
.analisi dd:last-child { margin-bottom: 0; }
.analisi p { color: var(--nebbia); }
/* disegno del grafico (js/sito.js) */
.gr-consumo { fill: #1B4260; }
.gr-linea { fill: none; stroke: var(--nebbia); stroke-width: 2; }
.gr-subito { fill: var(--blu); }
.gr-batteria { fill: var(--ghiaccio); }
.gr-prevista { fill: none; stroke: var(--ghiaccio); stroke-width: 2; stroke-dasharray: 6 5; }
.gr-fascia { fill: rgba(255, 255, 255, 0.06); }
.gr-asse { stroke: #2A4A62; stroke-width: 2; }
.gr-testo { fill: var(--nebbia); font: 500 13px var(--testo); }
.gr-testo--fascia { fill: var(--carta); font-weight: 600; }
.gr-f1 { fill: var(--blu); } .gr-f2 { fill: #1B4260; } .gr-f3 { fill: #14324A; }
.gr-testo-f1 { fill: var(--notte); font: 700 13px var(--testo); } .gr-testo-f2, .gr-testo-f3 { fill: var(--carta); font: 700 13px var(--testo); }
.gr-cursore line { stroke: var(--carta); stroke-width: 2; }
.gr-cursore text { fill: var(--carta); font: 700 14px var(--display); }

/* schema interattivo di una comunità energetica (js/sito.js) */
.cer { max-width: 1000px; margin: 48px auto 0; }
.cer__comandi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cer__comandi button, .filtri button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--navy); color: var(--carta); font: 600 16px var(--testo); cursor: pointer; transition: background-color 160ms ease-out; }
.cer__comandi button[aria-pressed="true"] { background: var(--carta); color: var(--notte); }
.cer__disegno { position: relative; margin-top: 24px; }
.cer__disegno svg { display: block; width: 100%; height: auto; overflow: visible; }
.cer__etichette { position: absolute; inset: 0; pointer-events: none; }
.cer__etichetta { position: absolute; transform: translate(-50%, -100%); padding: 6px 12px; border-radius: 12px; background: rgba(16, 44, 66, 0.92); border: 1px solid #2A4A62; text-align: center; white-space: nowrap; font-size: 13px; line-height: 1.3; color: var(--nebbia); }
.cer__etichetta--destra { transform: translate(12px, -50%); }
.cer__etichetta b { display: block; color: var(--carta); font: 700 1rem var(--display); }
@media (max-width: 759px) {
  .cer__etichette { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .cer__etichetta { position: static; transform: none; white-space: normal; }
  .cer__etichetta:nth-child(2) { grid-column: 1 / -1; }
}
.cer__numeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0 0; text-align: center; }
@media (min-width: 720px) { .cer__numeri { grid-template-columns: repeat(4, 1fr); } }
.cer__numeri dt { font-size: 14px; color: var(--nebbia); }
.cer__numeri dd { margin: 4px 0 0; font: 700 clamp(1.4rem, 1rem + 1.2vw, 2rem) var(--display); font-variant-numeric: tabular-nums; }
.cer__numeri .condivisa dd { color: var(--blu); }
.cer__frase { text-align: center; max-width: 60ch; margin: 20px auto 0; min-height: 4.8em; }
.cer__nota { text-align: center; font-size: 13px; color: var(--nebbia); margin: 6px 0 0; }
.cer-sole { fill: var(--blu); transition: cy 500ms ease-out, opacity 500ms ease-out; }

/* scene isometriche sopra i grafici (Aziende, Casa) e pezzi della manutenzione (js/sito.js) */
.scenetta { max-width: 620px; margin: 40px auto 0; }
.scenetta svg { display: block; width: 100%; height: auto; overflow: visible; }
.sc-testo { fill: var(--carta); font: 700 22px var(--display); }
.pz-alette { fill: none; stroke: #2A5577; stroke-width: 3; stroke-linecap: round; }
.pezzi__sotto { color: var(--grigio); margin: 10px 0 0; max-width: 46ch; }
@media (max-width: 979px) { .pezzi__sotto { display: none; } }
/* sette voci: anche su computer si legge la descrizione solo della voce corrente */
.pezzi--compatti .pezzi__elenco span { display: none; }
.pezzi--compatti .pezzi__elenco li.corrente span, .pezzi--compatti.pezzi--fermi .pezzi__elenco span { display: block; }
@media (min-width: 980px) { .pezzi--compatti .pezzi__disegno svg { max-height: 80vh; } }

/* realizzazioni: filtri e griglia */
.filtri { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
.filtri button { background: var(--ghiaccio); color: var(--navy); }
.filtri button[aria-pressed="true"] { background: var(--navy); color: var(--carta); }
.impianti { list-style: none; margin: 48px auto 0; padding: 0; max-width: 1200px; display: grid; gap: 40px 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.filtri + .impianti, .solo-sr + .impianti { margin-top: 0; }
.impianti li[hidden] { display: none; }
.impianti figure { margin: 0; }
.impianti img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.impianti h3 { margin-top: 14px; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.02em; }
.impianti p { margin: 4px 0 0; color: var(--grigio); }
.cta-sotto { text-align: center; margin-top: 40px; }

/* chiusura in notte: invito finale */
.chiusura { text-align: center; }
.chiusura h2 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem); line-height: 1.02; font-weight: 800; max-width: 18ch; margin: 0 auto; }
.chiusura .sez__sotto { margin-bottom: 30px; }

/* chi siamo: i due marchi */
.marchi { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 64px; margin-top: 48px; }
.marchi img { width: min(260px, 70vw); }

/* verifica solare di autarc (iframe) e modulo come alternativa */
.verifica { margin: 40px auto 0; max-width: 64rem; }
.verifica iframe { display: block; background: var(--carta); border-radius: 20px; box-shadow: 0 0 0 1px var(--linea); }
.richiesta__intro { text-align: center; }
.richiesta__intro .sotto { margin-left: auto; margin-right: auto; max-width: 52ch; }
.riserva { margin-top: clamp(64px, 8vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--linea); }
.riserva h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.1; }

/* contatti */
.recapiti { margin: 28px 0 0; display: grid; gap: 4px 24px; }
@media (min-width: 520px) { .recapiti { grid-template-columns: auto 1fr; } }
.recapiti dt { font: 700 1rem var(--display); color: var(--grigio); padding-top: 12px; }
.recapiti dd { margin: 0; padding-top: 10px; font-size: 1.1rem; }
@media (min-width: 520px) { .recapiti dd { border-top: 1px solid var(--linea); } .recapiti dt { border-top: 1px solid var(--linea); } }

/* domande frequenti: indice degli argomenti */
.indice { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.indice a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 999px; background: var(--ghiaccio); color: var(--navy); font-weight: 600; text-decoration: none; }
.indice a:hover { background: var(--navy); color: var(--carta); }
.domande--bianca { background: var(--carta); }
.domande--bianca .dom__voce { background: var(--ghiaccio); }
.domande h2 + .dom { margin-top: 40px; }

/* testi lunghi (privacy) */
.testo-lungo { max-width: 72ch; margin: 0 auto; }
.testo-lungo h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); line-height: 1.2; margin: 48px 0 12px; letter-spacing: -0.02em; }
.testo-lungo h2:first-child { margin-top: 0; }
.testo-lungo ul { padding-left: 22px; display: grid; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  .cer-sole { transition: none; }
}