/* Paghe Sicilia — proposta di rifacimento. Foglio di stile unico. */

@font-face {
  font-family: 'Sora';
  src: url('/font/sora-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('/font/sora-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/font/inter-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/font/inter-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}

:root {
  --notte: #060F26;
  --notte-2: #0A1733;
  --superficie: #0F1F42;
  --superficie-2: #13264F;
  --bordo: #1E3566;
  --acqua: #2AE0C0;
  --acqua-cupa: #12B59A;
  --ambra: #FFB547;
  --chiaro: #E8EEFC;
  --tenue: #9BAACB;
  --tenue-2: #6F82A8;

  --titolo: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --testo: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --largo: 1180px;
  --raggio: 18px;
  --raggio-p: 11px;
  --molla: cubic-bezier(.22, 1, .36, 1);
  --ombra: 0 24px 60px -24px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }

/* passaggio morbido da una pagina all'altra, dove il browser lo sa fare */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sfuma-via .22s ease both; }
::view-transition-new(root) { animation: sfuma-dentro .34s var(--molla) both; }
@keyframes sfuma-via { to { opacity: 0; transform: translateY(-6px); } }
@keyframes sfuma-dentro { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--notte);
  color: var(--chiaro);
  font-family: var(--testo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--titolo); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--acqua); text-decoration: none; }
a:hover { color: var(--ambra); }
img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--acqua);
  outline-offset: 3px;
  border-radius: 6px;
}

.contenitore { width: min(var(--largo), calc(100% - 2.6rem)); margin-inline: auto; }

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--acqua); color: var(--notte); padding: .7rem 1.1rem; font-weight: 600; border-radius: 0 0 10px 0;
}
.salta:focus { left: 0; }

/* ───────────────────────────── testata */
.testata {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--notte) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.testata.staccata { border-bottom-color: var(--bordo); background: color-mix(in srgb, var(--notte) 92%, transparent); }
.testata-dentro { display: flex; align-items: center; gap: 1.4rem; height: 74px; }

.marchio { display: inline-flex; align-items: center; gap: .62rem; color: var(--chiaro); font-family: var(--titolo); font-size: 1.1rem; letter-spacing: -.02em; }
.marchio:hover { color: var(--chiaro); }
.marchio-segno { width: 34px; height: 34px; display: grid; place-items: center; }
.marchio-segno svg { width: 100%; height: 100%; }
.segno-p { stroke-dasharray: 90; stroke-dashoffset: 0; }
.marchio:hover .segno-p { animation: traccia .9s var(--molla); }
.marchio:hover .segno-punto { animation: pulsa-punto .9s var(--molla); }
@keyframes traccia { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }
@keyframes pulsa-punto { 0%, 40% { transform: scale(0); transform-origin: 34px 34px; } 100% { transform: scale(1); transform-origin: 34px 34px; } }
.marchio-testo strong { font-weight: 700; }
.marchio-testo { font-weight: 400; color: var(--tenue); }
.marchio-testo strong { color: var(--chiaro); }

.nav-grande { margin-left: auto; display: flex; gap: .3rem; }
.nav-grande a {
  position: relative; color: var(--tenue); font-size: .94rem; font-weight: 500;
  padding: .5rem .8rem; border-radius: 9px; transition: color .2s, background .2s;
}
.nav-grande a:hover { color: var(--chiaro); background: rgba(255, 255, 255, .05); }
.nav-grande a.qui { color: var(--chiaro); }
.nav-grande a.qui::after {
  content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .18rem; height: 2px;
  background: linear-gradient(90deg, var(--acqua), var(--ambra)); border-radius: 2px;
}
.nav-azione { flex: none; }
.apri-menu { display: none; }

.menu-piccolo {
  position: fixed; inset: 74px 0 auto 0; z-index: 55;
  background: var(--notte-2); border-bottom: 1px solid var(--bordo);
  padding: 1rem 1.3rem 1.6rem; flex-direction: column; gap: .3rem;
}
.menu-piccolo[hidden] { display: none; }
.menu-piccolo nav { display: flex; flex-direction: column; }
.menu-piccolo a { color: var(--chiaro); padding: .78rem .2rem; border-bottom: 1px solid var(--bordo); font-size: 1.04rem; }
.menu-piccolo .bottone { margin-top: 1rem; justify-content: center; }

/* ───────────────────────────── bottoni */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(135deg, var(--acqua), var(--acqua-cupa));
  color: #04231E; font-weight: 600; font-size: .95rem;
  padding: .72rem 1.3rem; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--testo); position: relative; overflow: hidden;
  transition: transform .25s var(--molla), box-shadow .25s;
  box-shadow: 0 8px 24px -10px rgba(42, 224, 192, .7);
}
.bottone:hover { color: #04231E; transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(42, 224, 192, .85); }
.bottone:active { transform: translateY(0); }
.bottone::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .45), transparent 70%);
  transform: translateX(-120%); transition: transform .6s;
}
.bottone:hover::after { transform: translateX(120%); }
.bottone-grande { padding: .9rem 1.7rem; font-size: 1rem; }
.bottone-piccolo { padding: .55rem 1.05rem; font-size: .88rem; }
.bottone-vuoto {
  background: transparent; color: var(--chiaro); border: 1px solid var(--bordo); box-shadow: none;
}
.bottone-vuoto:hover { color: var(--chiaro); border-color: var(--acqua); box-shadow: 0 10px 28px -16px rgba(42, 224, 192, .6); }
.come-link { background: none; border: 0; color: var(--acqua); cursor: pointer; font: inherit; padding: 0; }
.come-link:hover { color: var(--ambra); }

/* ───────────────────────────── apertura */
.apertura { position: relative; padding: clamp(3rem, 7vw, 5.4rem) 0 clamp(3.4rem, 8vw, 6rem); overflow: hidden; }
.apertura-fondo { position: absolute; inset: 0; width: 100%; height: 100%; }
.apertura-velo {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 440px at 12% 18%, rgba(42, 224, 192, .16), transparent 70%),
    radial-gradient(700px 380px at 88% 8%, rgba(255, 181, 71, .12), transparent 70%),
    linear-gradient(180deg, transparent 55%, var(--notte) 100%);
  pointer-events: none;
}
.apertura-dentro { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }

.occhiello {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--acqua); margin: 0 0 1.1rem;
}
.occhiello-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--acqua); box-shadow: 0 0 0 0 rgba(42, 224, 192, .55); animation: alone 2.4s infinite; }
@keyframes alone { 70% { box-shadow: 0 0 0 10px rgba(42, 224, 192, 0); } 100% { box-shadow: 0 0 0 0 rgba(42, 224, 192, 0); } }

.titolo-animato .parola { display: inline-block; overflow: hidden; vertical-align: top; }
.titolo-animato .parola-dentro { display: inline-block; transform: translateY(110%); }
.titolo-animato.vista .parola-dentro { transform: translateY(0); }
.titolo-animato .parola-dentro { transition: transform .9s var(--molla); transition-delay: calc(var(--p, 0) * 45ms); }

h1.titolo-animato { max-width: 16ch; }
.apertura-sotto { color: var(--tenue); font-size: 1.1rem; max-width: 52ch; margin-top: 1.3rem; }
.apertura-azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
.apertura-linee { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.2rem; color: var(--tenue-2); font-size: .9rem; }
.apertura-linee span { display: inline-flex; align-items: center; gap: .45rem; }
.icona { width: 24px; height: 24px; }
.icona-piccola { width: 17px; height: 17px; color: var(--acqua); }

/* quadro animato */
.quadro {
  background: linear-gradient(160deg, var(--superficie), var(--notte-2));
  border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.3rem;
  box-shadow: var(--ombra); transform: perspective(1200px) rotateY(-9deg) rotateX(4deg);
  transition: transform .8s var(--molla);
}
.apertura:hover .quadro { transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.quadro-barra { display: flex; gap: .4rem; margin-bottom: 1.2rem; }
.quadro-barra span { width: 10px; height: 10px; border-radius: 50%; background: var(--bordo); }
.quadro-barra span:first-child { background: var(--ambra); }
.quadro-righe { display: grid; gap: .95rem; }
.quadro-riga { display: grid; gap: .4rem; }
.quadro-etichetta { font-size: .8rem; color: var(--tenue-2); }
.quadro-barretta { display: block; height: 8px; background: rgba(255, 255, 255, .06); border-radius: 99px; overflow: hidden; }
.quadro-barretta i {
  display: block; height: 100%; width: var(--larg); border-radius: 99px;
  background: linear-gradient(90deg, var(--acqua), var(--ambra));
  transform-origin: left; animation: cresci 1.4s var(--molla) backwards;
  animation-delay: calc(.4s + var(--i) * .14s);
}
@keyframes cresci { from { transform: scaleX(0); } }
.quadro-pie { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--bordo); font-size: .84rem; color: var(--tenue); display: flex; align-items: center; gap: .5rem; }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--acqua); animation: alone 2s infinite; }

.scorri { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); width: 24px; height: 38px; border: 1px solid var(--bordo); border-radius: 99px; display: grid; place-items: start center; padding-top: 7px; }
.scorri span { width: 4px; height: 7px; border-radius: 99px; background: var(--acqua); animation: scende 1.8s infinite; }
@keyframes scende { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(13px); } }

/* ───────────────────────────── numeri */
.numeri { padding: 2.2rem 0; border-block: 1px solid var(--bordo); background: var(--notte-2); }
.numeri-griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.numero { display: grid; gap: .18rem; }
.numero-valore { font-family: var(--titolo); font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; color: var(--chiaro); letter-spacing: -.03em; line-height: 1; }
.numero-etichetta { font-size: .95rem; font-weight: 600; color: var(--acqua); }
.numero-nota { font-size: .84rem; color: var(--tenue-2); }

/* ───────────────────────────── sezioni */
.sezione { padding: clamp(3.4rem, 7vw, 5.6rem) 0; }
.sezione-scura { background: var(--notte-2); border-block: 1px solid var(--bordo); }
.sezione-testa { max-width: 46rem; margin-bottom: 2.8rem; }
.sezione-testa-larga { max-width: 54rem; }
.sezione-sotto { color: var(--tenue); margin-top: 1rem; font-size: 1.04rem; }
.cima { padding: clamp(3rem, 6vw, 4.6rem) 0 clamp(1.6rem, 3vw, 2.4rem); position: relative; }
.cima::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(760px 300px at 18% 0%, rgba(42, 224, 192, .13), transparent 70%);
  pointer-events: none;
}
.cima-dentro { position: relative; max-width: 48rem; }
.cima-centrata .cima-dentro { max-width: 40rem; margin-inline: auto; text-align: center; }
.cima-centrata .apertura-azioni { justify-content: center; }
.cima-sotto { color: var(--tenue); font-size: 1.1rem; margin-top: 1.2rem; }

/* animazione d'ingresso generica */
[data-anima] { opacity: 0; transform: translateY(22px); }
[data-anima].vista { opacity: 1; transform: none; transition: opacity .75s var(--molla) var(--ritardo, 0s), transform .75s var(--molla) var(--ritardo, 0s); }
@media (prefers-reduced-motion: reduce) {
  [data-anima], [data-anima].vista { opacity: 1; transform: none; transition: none; }
  .titolo-animato .parola-dentro { transform: none; }
  .quadro-barretta i { animation: none; }
}

/* ───────────────────────────── destinatari */
.griglia-dest { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.carta-dest {
  position: relative; display: block; padding: 1.5rem 1.3rem 3rem;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  color: var(--chiaro); overflow: hidden; transition: transform .35s var(--molla), border-color .35s, background .35s;
}
.carta-dest::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), rgba(42, 224, 192, .18), transparent 70%);
  transition: opacity .35s;
}
.carta-dest:hover { transform: translateY(-5px); border-color: var(--acqua); color: var(--chiaro); }
.carta-dest:hover::before { opacity: 1; }
.carta-dest-numero { position: relative; font-family: var(--titolo); font-size: .82rem; color: var(--ambra); letter-spacing: .1em; }
.carta-dest h3 { position: relative; margin: .5rem 0 .55rem; }
.carta-dest p { position: relative; color: var(--tenue); font-size: .94rem; margin: 0; }
.carta-dest-freccia { position: absolute; left: 1.3rem; bottom: 1.2rem; color: var(--acqua); transition: transform .35s var(--molla); }
.carta-dest:hover .carta-dest-freccia { transform: translateX(6px); }

/* ───────────────────────────── schede software */
.griglia-sw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.griglia-sw-home { grid-template-columns: repeat(3, 1fr); }
.scheda-sw {
  position: relative; display: flex; flex-direction: column; gap: .55rem;
  padding: 1.4rem 1.3rem 1.2rem; border-radius: var(--raggio);
  background: linear-gradient(165deg, var(--superficie), var(--notte-2));
  border: 1px solid var(--bordo);
  transition: transform .35s var(--molla), border-color .35s, box-shadow .35s;
}
.scheda-sw:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--acqua) 55%, var(--bordo)); box-shadow: var(--ombra); }
.scheda-sw-alto { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.sigla {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  font-family: var(--titolo); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  color: var(--notte); background: linear-gradient(135deg, var(--acqua), var(--ambra));
}
.bollino { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ambra); border: 1px solid color-mix(in srgb, var(--ambra) 40%, transparent); padding: .2rem .55rem; border-radius: 99px; }
.scheda-sw h3 { margin-top: .25rem; }
.scheda-sw .sommario { color: var(--acqua); font-size: .92rem; margin: 0; }
.scheda-sw .testo { color: var(--tenue); font-size: .9rem; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.scheda-sw-basso { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.etichetta { font-size: .74rem; color: var(--tenue-2); border: 1px solid var(--bordo); padding: .16rem .5rem; border-radius: 99px; text-transform: capitalize; }
.etichetta-piu { color: var(--acqua); border-color: color-mix(in srgb, var(--acqua) 35%, transparent); }
.scheda-sw-link { margin-top: .7rem; font-size: .9rem; font-weight: 600; display: inline-flex; gap: .4rem; }
.scheda-sw-link span { transition: transform .3s var(--molla); display: inline-block; }
.scheda-sw-link:hover span { transform: translateX(5px); }
.scheda-sw.esce { opacity: 0; transform: scale(.94); pointer-events: none; }
.scheda-sw.nascosta { display: none; }

/* ───────────────────────────── filtri */
.sezione-filtri { padding-top: 1.4rem; }
.filtri { display: grid; gap: 1.2rem; padding: 1.3rem; background: var(--notte-2); border: 1px solid var(--bordo); border-radius: var(--raggio); margin-bottom: 1.4rem; }
.filtro-gruppo { display: grid; gap: .6rem; }
.filtro-titolo { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue-2); font-weight: 600; }
.filtro-bottoni { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font: inherit; font-size: .88rem; cursor: pointer;
  background: transparent; color: var(--tenue); border: 1px solid var(--bordo);
  padding: .42rem .92rem; border-radius: 99px; transition: all .25s var(--molla);
}
.chip:hover { color: var(--chiaro); border-color: var(--acqua); }
.chip.attivo { background: var(--acqua); border-color: var(--acqua); color: #04231E; font-weight: 600; }
.campo-cerca { display: flex; align-items: center; gap: .55rem; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 99px; padding: .15rem .95rem; max-width: 24rem; }
.campo-cerca:focus-within { border-color: var(--acqua); }
.campo-cerca input { background: none; border: 0; color: var(--chiaro); font: inherit; font-size: .94rem; padding: .5rem 0; width: 100%; }
.campo-cerca input:focus { outline: none; }
.conteggio { color: var(--tenue-2); font-size: .9rem; margin-bottom: 1.1rem; }
.vuoto { text-align: center; color: var(--tenue); padding: 2.6rem 0; }

/* ───────────────────────────── servizi */
.griglia-serv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.scheda-serv {
  padding: 1.6rem 1.4rem; border-radius: var(--raggio); background: var(--superficie);
  border: 1px solid var(--bordo); transition: transform .35s var(--molla), border-color .35s;
}
.scheda-serv:hover { transform: translateY(-5px); border-color: var(--acqua); }
.serv-icona {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; margin-bottom: 1rem;
  background: color-mix(in srgb, var(--acqua) 14%, transparent); color: var(--acqua);
  border: 1px solid color-mix(in srgb, var(--acqua) 28%, transparent);
}
.scheda-serv h3 { margin-bottom: .45rem; }
.scheda-serv .sommario { color: var(--acqua); font-size: .93rem; margin: 0 0 .6rem; }
.scheda-serv .testo { color: var(--tenue); font-size: .93rem; margin: 0; }

.due-colonne { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: start; }
.due-colonne-testo { grid-template-columns: .55fr 1.45fr; }
.colonna-fissa { position: sticky; top: 100px; }
.elenco-serv { display: grid; gap: .6rem; }
.riga-serv {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: 1.05rem 1.2rem; border-radius: var(--raggio-p); background: var(--superficie);
  border: 1px solid var(--bordo); color: var(--chiaro);
  transition: transform .3s var(--molla), border-color .3s, background .3s;
}
.riga-serv:hover { transform: translateX(6px); border-color: var(--acqua); color: var(--chiaro); }
.riga-serv-statica:hover { transform: none; border-color: var(--bordo); }
.riga-serv-icona { color: var(--acqua); display: grid; place-items: center; }
.riga-serv-testo { display: grid; gap: .12rem; }
.riga-serv-testo strong { font-family: var(--titolo); font-weight: 600; font-size: 1rem; }
.riga-serv-testo em { font-style: normal; color: var(--tenue); font-size: .9rem; }
.riga-serv-freccia { color: var(--acqua); transition: transform .3s var(--molla); }
.riga-serv:hover .riga-serv-freccia { transform: translateX(5px); }

.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: p; }
.passi li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; padding: 1.2rem 1.3rem; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-p); }
.passo-numero { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-family: var(--titolo); font-weight: 700; background: color-mix(in srgb, var(--ambra) 16%, transparent); color: var(--ambra); border: 1px solid color-mix(in srgb, var(--ambra) 32%, transparent); }
.passi h3 { margin-bottom: .3rem; }
.passi p { margin: 0; color: var(--tenue); font-size: .94rem; }

/* ───────────────────────────── chi siamo */
.dal-blocco { display: grid; gap: .3rem; padding: 1.6rem; background: linear-gradient(150deg, var(--superficie), var(--notte-2)); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.dal-anno { font-family: var(--titolo); font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 700; line-height: 1; background: linear-gradient(120deg, var(--acqua), var(--ambra)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dal-nota { color: var(--tenue-2); font-size: .9rem; }
.testo-lungo p { font-size: 1.06rem; color: var(--tenue); }
.testo-lungo p:first-child { color: var(--chiaro); }

.linea-tempo { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; padding-top: 2.4rem; }
.linea-tempo-filo { position: absolute; top: 2.65rem; left: 0; right: 0; height: 2px; background: var(--bordo); }
.linea-tempo-filo i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acqua), var(--ambra)); transition: width 1.6s var(--molla); }
.linea-tempo.vista .linea-tempo-filo i { width: 100%; }
.tappa { position: relative; padding-top: 1.6rem; }
.tappa-anno { position: absolute; top: -2.4rem; font-family: var(--titolo); font-weight: 700; color: var(--ambra); font-size: .95rem; }
.tappa-punto { position: absolute; top: -.22rem; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--acqua); box-shadow: 0 0 0 4px var(--notte-2); }
.tappa h3 { margin-bottom: .4rem; }
.tappa p { color: var(--tenue); font-size: .93rem; margin: 0; }

.partner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.partner-targa {
  display: grid; place-items: center; min-height: 92px; padding: 1rem; text-align: center;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-p);
  font-family: var(--titolo); font-weight: 600; color: var(--tenue); letter-spacing: .02em;
  transition: color .3s, border-color .3s, transform .3s var(--molla);
}
.partner-targa:hover { color: var(--chiaro); border-color: var(--acqua); transform: translateY(-4px); }

/* ───────────────────────────── assistenza */
.griglia-ass { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1.1rem; align-items: start; }
.carta-ass { padding: 1.7rem 1.5rem; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.carta-ass h2 { font-size: 1.4rem; margin-bottom: .6rem; }
.carta-ass p { color: var(--tenue); font-size: .95rem; }
.carta-ass-grande { background: linear-gradient(160deg, var(--superficie-2), var(--notte-2)); border-color: color-mix(in srgb, var(--acqua) 35%, var(--bordo)); }
.ass-passi { color: var(--tenue); padding-left: 1.2rem; margin: 0 0 1.3rem; display: grid; gap: .4rem; font-size: .95rem; }
.ass-passi::marker { color: var(--acqua); }
.nota-demo { font-size: .84rem; color: var(--tenue-2); margin-top: .9rem; }
.elenco-tel { display: grid; gap: .5rem; }
.riga-tel { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.riga-tel a { color: var(--chiaro); font-weight: 600; }
.riga-tel a:hover { color: var(--acqua); }

/* ───────────────────────────── contatti */
.griglia-contatti { display: grid; grid-template-columns: 1.3fr .7fr; gap: 2.4rem; align-items: start; }
.modulo { display: grid; gap: 1.1rem; padding: 1.8rem; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.campo { display: grid; gap: .4rem; }
.campo-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.campo label, .campo-spunta span { font-size: .9rem; color: var(--tenue); font-weight: 500; }
.obbl { color: var(--ambra); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: .97rem; color: var(--chiaro);
  background: var(--notte-2); border: 1px solid var(--bordo); border-radius: var(--raggio-p);
  padding: .72rem .9rem; transition: border-color .25s, box-shadow .25s;
}
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--acqua); box-shadow: 0 0 0 3px rgba(42, 224, 192, .16);
}
.campo.sbagliato input, .campo.sbagliato textarea, .campo.sbagliato select { border-color: #FF7A7A; }
.errore { font-size: .84rem; color: #FF9A9A; min-height: 1.1em; }
.errore:empty { min-height: 0; }
.conta-caratteri { font-size: .8rem; color: var(--tenue-2); justify-self: end; }
.campo-spunta { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.campo-spunta input { width: 18px; height: 18px; margin-top: .22rem; accent-color: var(--acqua); }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.modulo-fondo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.esito { font-size: .92rem; }
.esito.ok { color: var(--acqua); }
.esito.ko { color: #FF9A9A; }
.bottone[disabled] { opacity: .6; cursor: wait; }

.colonna-dati { display: grid; gap: 1rem; }
.carta-dati { padding: 1.3rem 1.4rem; background: var(--notte-2); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.carta-dati h2 { font-size: 1.05rem; margin-bottom: .6rem; color: var(--acqua); }
.carta-dati p { color: var(--tenue); font-size: .95rem; margin: 0 0 .4rem; }
.indirizzo { color: var(--chiaro) !important; }
.carta-dati-viva { border-color: color-mix(in srgb, var(--acqua) 35%, var(--bordo)); }
.orario-stato { font-family: var(--titolo); font-weight: 600; font-size: 1.05rem; color: var(--chiaro) !important; display: flex; align-items: center; gap: .5rem; }
.orario-nota { font-size: .86rem !important; }
.piva { font-size: .86rem; color: var(--tenue-2); }

.spunta-grande { width: 84px; height: 84px; margin: 0 auto 1.6rem; }
.spunta-grande svg { width: 100%; height: 100%; fill: none; stroke: var(--acqua); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.spunta-grande circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: disegna 1s var(--molla) forwards; opacity: .45; }
.spunta-grande path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: disegna .5s var(--molla) .5s forwards; }
@keyframes disegna { to { stroke-dashoffset: 0; } }

.quattroquattro { font-family: var(--titolo); font-size: clamp(5rem, 18vw, 10rem); font-weight: 700; line-height: 1; margin: 0 0 .4rem; background: linear-gradient(120deg, var(--acqua), var(--ambra)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .85; }

/* ───────────────────────────── richiamo finale */
.richiamo { padding: clamp(2.8rem, 6vw, 4.4rem) 0; background: linear-gradient(135deg, var(--superficie-2), var(--notte-2)); border-block: 1px solid var(--bordo); position: relative; overflow: hidden; }
.richiamo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(700px 300px at 85% 50%, rgba(255, 181, 71, .13), transparent 70%); }
.richiamo-dentro { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 2.4rem; flex-wrap: wrap; }
.titolo-richiamo { max-width: 18ch; }
.richiamo-dentro p { color: var(--tenue); margin: .9rem 0 0; max-width: 46ch; }
.richiamo-azioni { display: grid; gap: .9rem; justify-items: start; }
.richiamo-tel { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .92rem; color: var(--tenue-2); }
.richiamo-tel a { color: var(--tenue); }
.richiamo-tel a:hover { color: var(--acqua); }

/* ───────────────────────────── piè di pagina */
.pie { background: var(--notte); border-top: 1px solid var(--bordo); padding: 3rem 0 1.6rem; }
.pie-dentro { display: grid; grid-template-columns: 1.4fr .7fr .9fr 1fr; gap: 2rem; }
.pie-marchio p { color: var(--tenue-2); font-size: .92rem; margin-top: .9rem; }
.pie-colonna { display: grid; gap: .42rem; align-content: start; }
.pie-colonna h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue-2); margin-bottom: .5rem; }
.pie-colonna a { color: var(--tenue); font-size: .94rem; }
.pie-colonna a:hover { color: var(--acqua); }
.pie-colonna p { color: var(--tenue); font-size: .94rem; margin: 0; }
.pie-riga { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid var(--bordo); }
.pie-riga p { color: var(--tenue-2); font-size: .85rem; margin: 0; }
.pie-nota { font-style: italic; }

/* ───────────────────────────── schermi stretti */
@media (max-width: 980px) {
  .apertura-dentro { grid-template-columns: 1fr; }
  .apertura-quadro { display: none; }
  .numeri-griglia { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; }
  .griglia-dest, .griglia-sw, .griglia-sw-home, .griglia-serv, .partner { grid-template-columns: repeat(2, 1fr); }
  .due-colonne, .due-colonne-testo, .griglia-contatti { grid-template-columns: 1fr; gap: 2rem; }
  .colonna-fissa { position: static; }
  .griglia-ass { grid-template-columns: 1fr; }
  .linea-tempo { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1.2rem; }
  .linea-tempo-filo { display: none; }
  .pie-dentro { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.4rem; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-grande, .nav-azione { display: none; }
  .apri-menu {
    display: grid; gap: 4px; margin-left: auto; background: none; border: 0; cursor: pointer; padding: .5rem;
  }
  .apri-menu span { display: block; width: 23px; height: 2px; background: var(--chiaro); border-radius: 2px; transition: transform .3s var(--molla), opacity .2s; }
  .apri-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .apri-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .apri-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .menu-piccolo:not([hidden]) { display: flex; }
  .griglia-dest, .griglia-sw, .griglia-sw-home, .griglia-serv, .partner, .campo-coppia { grid-template-columns: 1fr; }
  .numeri-griglia { grid-template-columns: repeat(2, 1fr); }
  .linea-tempo { grid-template-columns: 1fr; }
  .pie-dentro { grid-template-columns: 1fr; }
  .modulo { padding: 1.3rem; }
  .richiamo-dentro { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   Secondo giro (28/10/2026): colore, loghi veri, grafica.
   Aggiunte al foglio esistente — vedi docs/siti-ct113.md
   ═══════════════════════════════════════════════════════════════ */

:root{
  --blu:#3E7BFA;
  --lime:#9ED04A;
  --viola:#8B6CF5;
  --rosa:#FF6B9D;
  --cielo:#6FD3F5;
  --menta:#5FE0B4;
  --panna:#F7F5EF;
  --inchiostro:#0C1630;
  --grigio:#5C6B8A;
}

/* ——— cursore ——— */
.punta{position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(42,224,192,.55);border-radius:50%;pointer-events:none;z-index:900;
  mix-blend-mode:screen;transition:width .25s,height .25s,margin .25s,border-color .25s,background .25s}
.punta span{position:absolute;inset:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--acqua)}
.punta.viva{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(42,224,192,.08);border-color:var(--acqua)}
@media (pointer:coarse){.punta{display:none}}

/* ——— bolle di colore dietro le aperture ——— */
.bolle{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bolle i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42;display:block}
.bolle .b1{width:46vw;height:46vw;left:-12vw;top:-16vw;background:radial-gradient(circle,var(--blu),transparent 68%);animation:vaga 19s ease-in-out infinite}
.bolle .b2{width:36vw;height:36vw;right:-8vw;top:22vh;background:radial-gradient(circle,var(--acqua),transparent 68%);animation:vaga 23s ease-in-out infinite reverse}
.bolle .b3{width:28vw;height:28vw;left:36vw;bottom:-12vw;background:radial-gradient(circle,var(--viola),transparent 70%);animation:vaga 27s ease-in-out infinite}
@keyframes vaga{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(5vw,-3vh) scale(1.12)}66%{transform:translate(-4vw,4vh) scale(.94)}}
.apertura-dentro,.cima-dentro{position:relative;z-index:2}

/* ——— giostra: due anelli di loghi ——— */
.giostra-zona{position:relative;height:clamp(340px,40vw,440px);display:grid;place-items:center;
  perspective:1250px;touch-action:pan-y}
.giostra-alone{position:absolute;width:66%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(62,123,250,.34),transparent 66%);filter:blur(44px)}
.giostra{position:relative;transform-style:preserve-3d;display:grid;gap:30px}
.anello{position:relative;width:142px;height:98px;transform-style:preserve-3d;will-change:transform}
.lastra{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(170deg,#fff,#E6EAF4);border-radius:14px;
  box-shadow:0 16px 36px rgba(0,0,0,.45);backface-visibility:hidden;
  transition:box-shadow .3s;text-decoration:none}
.lastra img{max-width:76%;max-height:50%;width:auto;height:auto;object-fit:contain}
.lastra b{position:absolute;bottom:7px;font:600 9.5px var(--testo);letter-spacing:.06em;
  text-transform:uppercase;color:#59678A;white-space:nowrap}
.lastra:hover{box-shadow:0 0 0 2px var(--acqua),0 20px 44px rgba(42,224,192,.32)}
.giostra-nota{position:absolute;bottom:-2px;margin:0;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue-2);opacity:.8;transition:opacity .4s}
.giostra-nota.via{opacity:0}
@media (max-width:900px){.giostra-zona{height:300px}}

/* ——— nastro dei marchi ——— */
.nastro{background:linear-gradient(180deg,var(--notte),var(--notte-2));
  border-block:1px solid var(--bordo);overflow:hidden;padding:18px 0;position:relative}
.nastro::before,.nastro::after{content:'';position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.nastro::before{left:0;background:linear-gradient(90deg,var(--notte),transparent)}
.nastro::after{right:0;background:linear-gradient(270deg,var(--notte-2),transparent)}
.nastro-fila{display:flex;align-items:center;gap:20px;width:max-content;animation:scorre 46s linear infinite}
.nastro-fila .bollo{display:grid;place-items:center;height:56px;min-width:128px;padding:0 20px;
  background:#fff;border-radius:12px;opacity:.72;transition:opacity .3s,transform .3s}
.nastro-fila .bollo:hover{opacity:1;transform:translateY(-3px)}
.nastro-fila img{height:28px;width:auto;max-width:108px;object-fit:contain}
@keyframes scorre{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.nastro-fila{animation:none}}

/* ——— sezione chiara ——— */
.sezione-chiara{position:relative;background:var(--panna);color:var(--inchiostro);
  padding:clamp(3.4rem,7vw,5.4rem) 0 clamp(4rem,8vw,6rem)}
.sezione-chiara::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(12,22,48,.09) 1px,transparent 1px);background-size:22px 22px}
.sezione-chiara .contenitore{position:relative;z-index:1}
.sezione-chiara .occhiello{color:#0E8F78}
.sezione-chiara .titolo-animato,.sezione-chiara h2,.sezione-chiara h3{color:var(--inchiostro)}
.sezione-chiara .sezione-sotto,.sezione-chiara p{color:var(--grigio)}
.onda{position:absolute;left:0;right:0;bottom:-1px;height:84px;background:var(--notte);
  clip-path:ellipse(70% 100% at 50% 100%)}
.onda-sopra{position:absolute;left:0;right:0;top:-1px;height:70px;background:var(--notte);
  clip-path:ellipse(70% 100% at 50% 0%)}

/* passi numerati */
.passi-grandi{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1.3rem;margin-top:3rem}
.passo-grande{position:relative;padding:2.1rem 1.7rem 1.9rem;border-radius:20px;background:#fff;
  border:1px solid rgba(12,22,48,.12);box-shadow:0 12px 30px rgba(12,22,48,.06);overflow:hidden}
.passo-grande .cifra{font:700 66px var(--titolo);line-height:.85;letter-spacing:-.05em;
  -webkit-text-stroke:2.5px var(--tinta);color:transparent;opacity:.9;margin-bottom:.7rem}
.passo-grande h3{margin:0 0 .4rem;font-size:1.26rem}
.passo-grande p{margin:0;font-size:.97rem}
.passo-grande::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--tinta)}

/* ——— sagoma della Sicilia in filigrana ——— */
.isola{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:min(480px,42vw);
  aspect-ratio:1.43;opacity:.16;pointer-events:none;z-index:0;
  background:conic-gradient(from 210deg,var(--acqua),var(--blu),var(--viola),var(--acqua));
  -webkit-mask:url(/img/sicilia.svg) center/contain no-repeat;
  mask:url(/img/sicilia.svg) center/contain no-repeat}

/* ——— schede software a tinta piena, con il logo vero ——— */
.scheda-sw{background:var(--tinta,var(--superficie));border-color:rgba(255,255,255,.22);
  color:#06101f}
.scheda-sw:hover{border-color:rgba(255,255,255,.4);
  box-shadow:0 22px 48px rgba(0,0,0,.42);transform:translateY(-6px)}
.scheda-sw-logo{height:92px;display:grid;place-items:center;border-radius:13px;margin-bottom:.1rem;
  background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.scheda-sw-logo img{max-width:74%;max-height:58px;width:auto;object-fit:contain}
.scheda-sw h3{color:#06101f}
.scheda-sw .sommario{color:rgba(6,16,31,.86);font-weight:600}
.scheda-sw .testo{color:rgba(6,16,31,.72)}
.scheda-sw .etichetta{background:rgba(6,16,31,.14);color:rgba(6,16,31,.82);border-color:transparent}
.scheda-sw-link{color:#06101f}
.scheda-sw .bollino{background:rgba(6,16,31,.82);color:#fff}

/* ——— finestra del gestionale ——— */
.finestra{position:relative;border-radius:16px;overflow:hidden;background:#F2F4F9;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 34px 80px rgba(0,0,0,.55)}
.finestra-barra{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#E2E6F0;border-bottom:1px solid #D0D6E4}
.finestra-barra i{width:10px;height:10px;border-radius:50%;background:#C3CAD9}
.finestra-barra i:first-child{background:#FF6058}
.finestra-barra i:nth-child(2){background:#FFBD2E}
.finestra-barra i:nth-child(3){background:#28CA42}
.finestra-barra b{margin-left:12px;font:600 12.5px var(--testo);color:#54607A}
.finestra-corpo{display:grid;grid-template-columns:56px 1fr;min-height:280px}
.finestra-lato{background:linear-gradient(180deg,#223463,#152445)}
.finestra-tavola{padding:13px 15px;display:grid;gap:6px;align-content:start}
.riga-finta{display:grid;grid-template-columns:1.6fr 1fr .8fr .6fr;gap:10px;align-items:center;
  padding:8px 10px;border-radius:7px;background:#fff;border:1px solid #E4E8F1}
.riga-finta.intestazione{background:#DDE3F0;border-color:#CBD3E4}
.riga-finta i{display:block;height:8px;border-radius:4px;background:#C9D1E2}
.riga-finta.intestazione i{background:#9AA6C0}
.riga-finta i.verde{background:#4FCB9B}
.riga-finta i.ambra{background:#F0B04C}
.finestra-nota{margin:0;padding:9px 16px;background:#E2E6F0;border-top:1px solid #D0D6E4;
  font:600 11px var(--testo);letter-spacing:.1em;text-transform:uppercase;color:#7D879C;text-align:center}
.spunte{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.75rem}
.spunte li{position:relative;padding-left:30px;color:var(--tenue);font-size:.97rem}
.spunte li::before{content:'';position:absolute;left:0;top:7px;width:16px;height:9px;
  border-left:2px solid var(--acqua);border-bottom:2px solid var(--acqua);transform:rotate(-45deg)}

/* ——— domande frequenti ——— */
.elenco-domande{margin-top:2.6rem;display:grid;gap:.7rem;max-width:54rem}
.domanda{border:1px solid rgba(12,22,48,.12);border-radius:16px;background:#fff;overflow:hidden}
.domanda summary{cursor:pointer;list-style:none;padding:1.25rem 3.4rem 1.25rem 1.5rem;position:relative;
  font:600 1.1rem var(--titolo);letter-spacing:-.012em;color:var(--inchiostro)}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary::after{content:'';position:absolute;right:1.5rem;top:50%;width:11px;height:11px;
  border-right:2px solid #0E8F78;border-bottom:2px solid #0E8F78;
  transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.domanda[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.domanda .risposta{padding:0 1.5rem 1.4rem;margin:0;font-size:.98rem;color:var(--grigio)}

/* ——— richiamo finale a tinta piena ——— */
.richiamo-pieno{background:linear-gradient(135deg,var(--acqua) 0%,var(--lime) 55%,var(--ambra) 100%);
  color:var(--inchiostro);border:0;position:relative;overflow:hidden}
.richiamo-pieno::before{content:'';position:absolute;inset:0;opacity:.2;background-image:radial-gradient(rgba(12,22,48,.5) 1px,transparent 1px);background-size:26px 26px}
.richiamo-pieno .titolo-animato,.richiamo-pieno h2{color:var(--inchiostro)}
.richiamo-pieno p{color:rgba(12,22,48,.74)}
.richiamo-pieno .richiamo-tel a{color:rgba(12,22,48,.82)}
.richiamo-pieno .richiamo-tel a:hover{color:var(--inchiostro)}
.richiamo-pieno .bottone{background:var(--inchiostro);color:#fff;border-color:transparent}
.richiamo-pieno .bottone-vuoto{background:transparent;color:var(--inchiostro);border:1px solid rgba(12,22,48,.3)}

/* ——— marchio con il monogramma vero ——— */
.marchio-segno img{width:40px;height:40px;border-radius:10px;display:block;
  box-shadow:0 6px 20px rgba(62,123,250,.35)}
.marchio-pie .marchio-segno img{width:34px;height:34px}

/* ——— targhe dei partner ——— */
.partner-marchi{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:1.6rem;
  padding-top:1.3rem;border-top:1px solid var(--bordo)}
.partner-marchi span{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tenue-2)}
.partner-marchi img{height:26px;width:auto;background:#fff;padding:5px 9px;border-radius:7px;
  opacity:.85;transition:opacity .3s,transform .3s}
.partner-marchi img:hover{opacity:1;transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .bolle i{animation:none}
  .punta{display:none}
}

@media (max-width:860px){
  .finestra-corpo{grid-template-columns:40px 1fr}
  .passo-grande .cifra{font-size:54px}
}

/* Le intestazioni di pagina erano larghe 48rem e, essendo anche .contenitore,
   finivano centrate: il titolo stava al centro e il contenuto sotto a sinistra.
   Ora il blocco segue la larghezza del sito e sono i testi a restare stretti. */
.cima:not(.cima-centrata) .cima-dentro{max-width:var(--largo)}
.cima:not(.cima-centrata) .cima-dentro .titolo-animato{max-width:18ch}
.cima:not(.cima-centrata) .cima-dentro .cima-sotto{max-width:56ch}

/* ——— fascia panoramica: una scena illustrata per pagina ——— */
.fascia{position:relative;overflow:hidden;background:var(--notte);
  height:clamp(190px,23vw,330px)}
.fascia-img{position:absolute;inset:-6% 0;width:100%;height:112%;
  object-fit:cover;object-position:center;display:block;will-change:transform}
.fascia::before,.fascia::after{content:'';position:absolute;left:0;right:0;z-index:2;pointer-events:none}
.fascia::before{top:0;height:34%;background:linear-gradient(180deg,var(--notte),transparent)}
.fascia::after{bottom:0;height:46%;background:linear-gradient(0deg,var(--notte),transparent)}
.fascia-didascalia{position:absolute;right:clamp(14px,3vw,30px);bottom:12px;z-index:3;margin:0;
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue-2);opacity:.75}
/* sopra una sezione chiara la sfumatura in basso deve essere chiara */
.fascia-chiara::after{background:linear-gradient(0deg,var(--panna),transparent)}
@media (max-width:700px){.fascia{height:160px}}

/* la fascia era troppo bassa e tagliava le scene */
.fascia{height:clamp(210px,26vw,400px)}