:root {
  --bg-color: var(--grigio-chiaro);
  --text-color: var(--grigio-scuro);
  --color-transition: all 0.3s linear;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  height: 100%;
}
body.page-template-page-home-new {
  min-height: 100svh;
}
@media (min-width: 992px) {
  body.page-template-page-home-new {
    overflow: hidden;
  }
}

body[data-bg="black"] {
  --bg-color: var(--grigio-scuro);
  --text-color: var(--grigio-chiaro);
}
body[data-bg="colors"] {
  --bg-color: #76ffcd;
  --text-color: var(--grigio-scuro);
}

/* sfondo del sito (in header-new.php): un livello fisso grande come la viewport,
sotto a tutto il contenuto. Eredita dal body --bg-color e le variabili --rainbow-*
impostate da new.js. Dove c'e', il body resta trasparente (le pagine con il vecchio
header, senza .site-bg, mantengono lo sfondo sul body) */
body:has(> .site-bg) {
  background: transparent;
}
.site-bg {
  position: fixed;
  width: 200%;
  height: 200svh;
  inset: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg-color);
  transition: background-color 0.3s linear;
}
@media (min-width: 992px) {
  .site-bg {
    width: 100%;
    height: 100%;
  }
}

body[data-bg="colors"] .site-bg {
  /* durante la rivelazione il fondo resta il colore precedente (--rainbow-base),
  mentre --bg-color e' gia' quello nuovo */
  background-color: var(--rainbow-base, var(--bg-color));
  /* cerchio sfumato del colore successivo che si espande (animato in new.js) */
  background-image: radial-gradient(
    circle at var(--rainbow-x, 50%) var(--rainbow-y, 50%),
    var(--rainbow-next, transparent) var(--rainbow-r, 0px),
    transparent calc(var(--rainbow-r, 0px) + var(--rainbow-f, 0px))
  );
}
/* transizione dei colori durante il ciclo a tempo del rainbow (data-rainbow-attivo
viene aggiunto da new.js alla prima rivelazione): il passaggio light / dark /
rainbow resta con la --color-transition di default */
body[data-bg="colors"][data-rainbow-attivo] {
  --color-transition:
    color 0.6s 1s linear, border-color 0.6s 1s linear, stroke 0.6s 1s linear,
    background-color 0.6s 1s linear;
}

body.page-template-page-home[data-header-color="bianco"],
body.single[data-header-color="bianco"],
body.page-template-page-about[data-header-color="bianco"],
body.page-template-page-home-new[data-header-color="bianco"] {
  --text-color: var(--grigio-chiaro) !important;
}
body.single[data-header-color="nero"] {
  --text-color: var(--grigio-scuro) !important;
}

body.page-template-page-servizi footer {
  color: var(--bg-color);
  transition: var(--color-transition);
  background: var(--text-color);
}

/* COLOR PICKER */
.color-selector {
  position: relative;
  width: fit-content;
  background: var(--grigio-scuro);
  border: 1px solid var(--bg-color);
  border-radius: 40px;
  /* filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); */
  margin-left: auto;
  transition: var(--color-transition);
  pointer-events: all;
}
body[data-bg="black"] .color-selector {
  background: var(--grigio-chiaro);
}
body[data-bg="colors"] .color-selector {
  background: var(--grigio-scuro);
}
@media (min-width: 992px) {
  .color-selector {
    border: none;
  }
}
.single .color-selector {
  opacity: 0;
}
.active-color-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 5px 15px 5px 5px;
  outline: none;
  box-shadow: none;
  border: none;
  background: transparent;
}
@media (min-width: 992px) {
  .active-color-item {
    gap: 4px;
    padding: 3px 8px 3px 3px;
  }
}
.active-color-circle {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  border-radius: 50%;
  background: var(--grigio-chiaro);
  pointer-events: none;
}
@media (min-width: 992px) {
  .active-color-circle {
    width: 14px;
    min-width: 14px;
    height: 14px;
    min-height: 14px;
  }
}
body[data-bg="black"] .active-color-circle {
  background: var(--grigio-scuro);
}
body[data-bg="colors"] .active-color-circle {
  background-color: transparent;
  background-image: url("../media/color-picker.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.active-color-name {
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--grigio-chiaro);
  transition: var(--color-transition);
  margin: 0 5px 0 0;
  pointer-events: none;
}
body[data-bg="black"] .active-color-name {
  color: var(--grigio-scuro);
}
body[data-bg="colors"] .active-color-name {
  color: var(--bg-color);
}
.active-color-name [data-color-name="white"],
body[data-bg="black"] .active-color-name [data-color-name="black"],
body[data-bg="colors"] .active-color-name [data-color-name="colors"] {
  display: block;
}
.active-color-name [data-color-name="black"],
.active-color-name [data-color-name="colors"] {
  display: none;
}
body[data-bg="black"] .active-color-name [data-color-name="white"],
body[data-bg="black"] .active-color-name [data-color-name="colors"] {
  display: none;
}
body[data-bg="colors"] .active-color-name [data-color-name="white"],
body[data-bg="colors"] .active-color-name [data-color-name="black"] {
  display: none;
}

.color-selector-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 15px);
  right: 0;
  background: var(--bg-color);
  border: 1px solid var(--text-color);
  border-radius: 20px;
  padding: 5px;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.001));
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.4s ease-in,
    var(--color-transition);
  overflow: hidden;
}
@media (min-width: 992px) {
  .color-selector-list {
    border-radius: 12px;
    padding: 3px;
    gap: 3px;
  }
}
.color-selector.open .color-selector-list {
  opacity: 1;
  pointer-events: all;
}
.active-color-item svg {
  transition: transform 0.2s ease-in;
}
.active-color-item svg path {
  transition: var(--color-transition);
}
.color-selector.open .active-color-item svg {
  transform: rotate(180deg);
}

.color-selector-list button,
.color-selector-list button:focus,
.color-selector-list button:hover {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 5px 15px 5px 5px;
  outline: none;
  box-shadow: none;
  border: none;
  border-radius: 20px;
  width: 100%;
  background: var(--bg-color);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--text-color);
  transition: all 0.3s linear;
}
@media (min-width: 992px) {
  .color-selector-list button,
  .color-selector-list button:focus,
  .color-selector-list button:hover {
    font-size: 1.2rem;
    padding: 3px 8px 3px 3px;
    gap: 4px;
  }
}
.color-selector-list button[data-color="white"],
body[data-bg="black"] .color-selector-list button[data-color="black"],
body[data-bg="colors"] .color-selector-list button[data-color="colors"] {
  background: var(--text-color);
  color: var(--bg-color);
  transition: var(--color-transition);
}
body[data-bg="black"] .color-selector-list button[data-color="white"],
body[data-bg="black"] .color-selector-list button[data-color="rainbow"],
body[data-bg="colors"] .color-selector-list button[data-color="white"],
body[data-bg="colors"] .color-selector-list button[data-color="black"] {
  background: transparent;
  color: var(--text-color);
}

.color-selector-list button .color-circle {
  display: block;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  border-radius: 50%;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.25));
}
@media (min-width: 992px) {
  .color-selector-list button .color-circle {
    width: 14px;
    min-width: 14px;
    height: 14px;
    min-height: 14px;
  }
}
.color-selector-list button[data-color="white"] .color-circle {
  background: var(--grigio-chiaro);
}
.color-selector-list button[data-color="black"] .color-circle {
  background: var(--grigio-scuro);
}
.color-selector-list button[data-color="colors"] .color-circle {
  background-image: url("../media/color-picker.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fixed-color-selector {
  position: fixed;
  left: calc(var(--wrapper-padding) / 2);
  bottom: calc(var(--wrapper-padding) / 2);
  z-index: 10;
}
.fixed-color-selector .active-color-item {
  padding: 5px 10px 5px 5px;
}
.fixed-color-selector .active-color-circle {
  width: 21px;
  min-width: 21px;
  height: 21px;
  min-height: 21px;
}
.fixed-color-selector .color-selector-list {
  top: auto;
  bottom: calc(100% + 10px);
  right: auto;
  left: 0;
}
/* END COLOR PICKER */

.logo,
.logo:visited,
.logo:focus,
.logo:hover {
  color: var(--text-color);
}
header .logo svg path,
header .logo:visited svg path,
header .logo:focus svg path,
header .logo:hover svg path {
  fill: currentColor;
}
.menu li a,
.menu li a:visited,
.menu li a:focus,
.menu li a:hover,
header .lang-selector li a,
header .lang-selector li a:visited,
header .lang-selector li a:focus,
header .lang-selector li a:hover {
  color: var(--text-color);
}

.page-template-page-home-new footer,
.page-template-page-progetti-new footer {
  display: none;
}

body header.header-new p.roobert5 {
  color: var(--text-color) !important;
}

.cerchio svg a,
.cerchio svg text {
  fill: var(--text-color);
}
.cerchio svg .bordi {
  stroke: var(--text-color);
}

/* pagina "Progetti New": elenco progetti con titoli scrollabili e immagine fissa.
Struttura: un "motore" invisibile (scroll nativo, loop infinito) determina la posizione;
"titoli-sopra" e "titoli-sotto" sono due finestre sulla stessa identica striscia di
titoli, con lo stesso scorrimento e lo stesso ordine, cosi' i titoli passano dietro
all'immagine ed escono dall'altra parte senza mai saltare. Il titolo attivo e'
semplicemente l'ultimo della lista "sopra", quello a ridosso dell'immagine */
.elenco-progetti .cont-elenco-progetti {
  position: relative;
  width: 100%;
  height: 100%;
  --gap-sopra: 15px;
  --gap-sotto: 24px;
  --mezza-immagine: 0px;
}

.elenco-progetti .cont-titoli-sopra,
.elenco-progetti .cont-titoli-sotto {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
}

.elenco-progetti .cont-titoli-sopra {
  top: 0;
  bottom: calc(50% + var(--mezza-immagine) + var(--gap-sopra));
}

.elenco-progetti .cont-titoli-sotto {
  top: calc(50% + var(--mezza-immagine) + var(--gap-sotto));
  bottom: 0;
}

.elenco-progetti .titoli-sopra,
.elenco-progetti .titoli-sotto {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.elenco-progetti .motore-scroll {
  position: absolute;
  inset: 0;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  opacity: 0;
  z-index: 5;
}

.elenco-progetti .motore-scroll::-webkit-scrollbar {
  display: none;
}

.elenco-progetti .titolo-progetto {
  line-height: 0.9;
  text-align: center;
  padding: 0;
  opacity: 0.25;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
  color: var(--text-color);
}

.elenco-progetti .titolo-progetto.active {
  opacity: 1;
}

.elenco-progetti .img-fissa-progetto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  /* transition: background-color 0.3s linear; */
  /* sopra al motore-scroll (z-index 5): il link deve ricevere click reali (Barba
  intercetta i click sugli <a>), non simulati via JS */
  z-index: 6;
}

.elenco-progetti .img-fissa-progetto .cont-img {
  display: block;
  width: calc(100% - 20px);
  aspect-ratio: 1 / 0.665;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
@media (min-width: 992px) {
  .elenco-progetti .img-fissa-progetto .cont-img {
    width: min(40vw, 600px);
  }
}
.elenco-progetti .img-fissa-progetto .cont-img::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: var(--grigio-scuro);
  pointer-events: none;
  z-index: 1;
}
.elenco-progetti .img-fissa-progetto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* secondo livello (creato via JS): il progetto adiacente, che entra dal basso o
dall'alto con un translateY aggiornato ad ogni frame di scroll, spingendo fuori
l'immagine base (vedi aggiornaRivelazioneImmagine in js/new.js; .cont-img ha
overflow: hidden). Senza z-index esplicito (resta "auto"): dipinge sopra l'img di base
(che e' in flusso, non posizionata) ma sotto a ::before/.cont-occhielli, che hanno
z-index positivo (1/2) - esattamente l'ordine che serve */
.elenco-progetti .img-fissa-progetto .img-rivelazione {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.elenco-progetti .cont-occhielli {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.anno-progetto-attivo {
  letter-spacing: 2px;
  text-transform: uppercase;
}
@media (min-width: 992px) {
  .elenco-progetti .cont-occhielli {
    padding: 20px;
  }
}
.elenco-progetti .cont-occhielli p {
  color: var(--grigio-chiaro);
}

.categoria-servizio + .categoria-servizio {
  padding-top: 0;
}
.categoria-servizio ul {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--text-color);
}
.categoria-servizio ul li h3 {
  line-height: 1;
  text-box: trim-both cap alphabetic;
}
.categoria-servizio ul li img,
.categoria-servizio ul li .img-placeholder {
  height: clamp(75px, 4vh, 100px);
  width: auto;
  aspect-ratio: 1 / 0.67;
  pointer-events: none;
}

/* hover a "prisma 3D": stesso meccanismo di sadumedia.com/works/ (vista list) -
tre copie identiche della riga, impilate con transform-style:preserve-3d a
rotateX(90/0/-90) + translateZ(meta' altezza riga). Muovendo l'intero blocco a
rotateX(±90) la faccia alternata (colori invertiti) ruota in primo piano dalla
stessa direzione da cui e' entrato il cursore (calcolato in js/new.js,
init_servizi_hover) */
.categoria-servizio ul li.servizio-item {
  overflow: hidden;
  user-select: none;
  margin: 0 0 1px 0;
  border-bottom: 1px solid var(--text-color);
}
.categoria-servizio ul li.servizio-item .container-fluid > .row {
  padding: var(--distance-half) 0;
}
.servizio-item__inner {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.servizio-item__faccia {
  backface-visibility: hidden;
  background: transparent;
  color: var(--text-color);
  transition: background-color 0.3s linear;
}
.servizio-item__faccia--alt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--text-color);
  color: var(--bg-color);
  pointer-events: none;
  transition: var(--color-transition);
}
.servizio-item__faccia--base h3 {
  opacity: 0.5;
}
.categoria-servizio ul li.servizio-item a {
  display: block;
  cursor: pointer;
  pointer-events: all;
}

.page-template-page-landing .scrollto {
  display: inline-block;
  margin: var(--distance) 0 0;
  color: var(--text-color);
}
.page-template-page-landing .sticky {
  top: calc(var(--distance-big) * 2);
}
.page-template-page-landing .cont-form {
  background: var(--text-color);
}
.page-template-page-landing .cont-form .roobert4,
.page-template-page-landing .cont-form .grotesk2 {
  color: var(--bg-color);
  transition: var(--color-transition);
}
.page-template-page-landing .cont-testo > * {
  width: 100%;
}

.reel .video-js {
  width: 100vw;
  height: 100vh;
}