/* ============================================================
   LQUADRO — foglio di stile unico del sito (riscritto a mano,
   stessi valori dell'originale Elementor).
   Sezioni: 1 Caratteri · 2 Base · 3 Utilità · 4 Header · 5 Menu a
   comparsa · 6 Pulsanti · 7 Home (hero, claim, chi siamo, marquee,
   cosa facciamo, servizi, realizzazioni, scelti da) · 8 Flip box ·
   9 Footer · 10 Animazioni d'ingresso
   Breakpoint Elementor: tablet ≤1024 px, telefono ≤767 px.
   ============================================================ */

/* ---------- 1. Caratteri (self-hosted, come nell'originale) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/opensans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/opensans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap; src: url(../fonts/opensans-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap; src: url(../fonts/opensans-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/roboto-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/roboto-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/roboto-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/roboto-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/robotoslab-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/robotoslab-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 2. Base (reset del tema Hello Elementor + kit) ---------- */
:root {
  --teal: #38B7BF;          /* colore globale "b3c97cf" */
  --teal-scuro: #097B81;    /* colore globale "6e527f3" */
  --grigio: #8D8D8E;        /* colore globale "d71aba9" */
  --contenuto: 1140px;      /* larghezza massima del contenitore */
}
@media (max-width: 1024px) { :root { --contenuto: 1024px; } }
@media (max-width: 767px)  { :root { --contenuto: 767px; } }

html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
*, ::before, ::after { box-sizing: border-box; }
body {
  margin: 0;
  background-color: #fff;
  color: #333;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { color: inherit; font-family: inherit; font-weight: 500; line-height: 1.2; margin: .5rem 0 1rem; }
p { margin: 0 0 .9rem; }
a { background-color: transparent; color: #c36; text-decoration: none; }
a:active, a:hover { color: #336; }
img { border-style: none; height: auto; max-width: 100%; }
button { font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; overflow: visible; text-transform: none; }
ul { margin: 0; padding: 0; }

/* ---------- 3. Utilità ---------- */
.screen-reader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Titolo di sezione (widget "heading" di Elementor) */
.titolo, .hero__title, .claim__title, .about__heading h2, .cosa__head h2, .servizi__head h2, .realizzazioni__head h2, .scelti__head h2 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  line-height: 1;
  text-transform: capitalize;
}
.cosa__head h2, .servizi__head h2, .realizzazioni__head h2, .scelti__head h2 { font-size: 85px; color: var(--teal); }
@media (max-width: 767px) {
  .cosa__head h2, .servizi__head h2, .realizzazioni__head h2, .scelti__head h2 { font-size: 48px; }
}
/* Contenitore centrato "boxed" di Elementor: riempie in altezza il genitore (flex-grow 1) */
.header__inner, .hero__inner, .claim__inner, .about__inner, .about__box-inner, .cosa__head-inner, .servizi__head-inner, .servizi__wrap-inner, .realizzazioni__head-inner, .scelti__head-inner {
  flex: 1 1 auto;
}

/* ---------- 4. Header ---------- */
.header {
  position: sticky;               /* 25/10/2026: resta in cima mentre si scorre; main.js § 9 la nasconde scendendo e la fa ricomparire risalendo */
  top: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  min-height: 130px;
  margin-bottom: -130px;          /* si sovrappone alla prima sezione */
  padding: 0 10px;
  background-color: var(--teal);
  transition: min-height .35s ease, margin-bottom .35s ease, transform .35s ease, box-shadow .35s ease;
}
.header__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  height: 100%;
  margin: 0 auto;
  padding: 10px 0;
}
.header__brand, .header__menu {
  position: relative;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 1 auto;
  padding: 10px;
}
.header__brand { width: 100%; }
.header__menu { width: 100%; }
@media (min-width: 768px) { .header__menu { width: 66%; } }
.header__logo { text-align: start; }
.header__logo img { width: 26%; vertical-align: middle; transition: width .35s ease; }
.header__menu-wrap { text-align: end; }
.header__menu-btn {
  display: inline-block;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
  transition: all .3s;
}
.header__menu-btn svg { display: block; width: 1em; height: 38px; fill: #fff; }
@media (max-width: 1024px) {
  .header { margin-bottom: -10%; }
}
@media (max-width: 767px) {
  .header { margin-bottom: -35%; }
  .header__brand { width: 49%; justify-content: center; align-items: center; }
  .header__logo img { width: 80%; }
  .header__menu { width: 38%; }
}
/* Barra compatta e barra nascosta (25/10/2026, main.js § 9). Compatta = pagina non in cima: 90 px invece di 130, logo
   largo 98 px, ombra leggera per staccarla dal contenuto; il margine negativo cresce di 40 px insieme all'altezza, così
   il contenuto sotto non si muove. Nascosta = si sta scendendo: scivola via verso l'alto. Solo movimenti, niente dissolvenze. */
.header.is-compatta { min-height: 90px; margin-bottom: -90px; box-shadow: 0 2px 14px rgba(0, 0, 0, .18); }
.header.is-compatta .header__logo img { width: 98px; }
.header.is-nascosta { transform: translateY(calc(-100% - 20px)); }
@media (max-width: 1024px) { .header.is-compatta { margin-bottom: calc(-10% + 40px); } }
@media (max-width: 767px) { .header.is-compatta { margin-bottom: calc(-35% + 40px); } }

/* ---------- 5. Menu a comparsa (popup a schermo intero) ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: rgba(0, 0, 0, .8);
}
.menu[hidden] { display: none; }
.menu__content {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  background-color: #fff;
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
}
.menu__close {
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  z-index: 9999;
  display: flex;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.menu__close svg { width: 1em; height: 1em; fill: #1f2124; }
.menu__scroll {
  display: flex;
  align-items: flex-start;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: auto;
}
.menu__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 100vh;
  padding: 0 60px;
  background-color: var(--teal);
}
.menu__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/monogramma-bianco.png) 50% 50% repeat;
  opacity: .22;
}
.menu__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 10px;
}
@media (min-width: 768px) { .menu__col { width: 70%; } }
.menu__nav ul { position: relative; z-index: 2; list-style: none; }
.menu__nav li { position: relative; display: block; }
.menu__nav li:not(:last-child) { margin-bottom: 11px; }
.menu__nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 13px 0;
  font-family: Arial, sans-serif;
  font-size: 70px;
  font-weight: 700;
  line-height: 60px;
  text-transform: uppercase;
  color: #fff;   /* 25/10/2026: gioco di colori dei pulsanti (bianco a riposo, teal scuro al passaggio e sulla voce attiva); era l'inverso */
  fill: #fff;
  transition: .4s;
}
.menu__nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 2px;
  background-color: var(--teal-scuro);
  transition: .3s;
}
.menu__nav a:not(:hover):not(:focus):not(.is-active)::after { opacity: 0; inset-inline-start: 100%; width: 10px; }
.menu__nav a:hover, .menu__nav a:focus, .menu__nav a.is-active { color: var(--teal-scuro); fill: var(--teal-scuro); }
.menu__lang img { display: block; width: 18px; height: 12px; }
@media (max-width: 1024px) {
  .menu__panel { padding: 0 40px; }
}
@media (max-width: 767px) {
  .menu__panel { min-height: 100vh; padding: 0 20px; }
  .menu__nav a { font-size: 31px; line-height: 1.4em; }
  .menu__nav li:not(:last-child) { margin-bottom: 3px; }
}

/* ---------- 6. Pulsanti (widget "button" di Elementor, misura sm) ---------- */
/* Dal 25/10/2026 un solo stile di pulsante in tutto il sito (decisione di Lorenzo): pieno bianco, scritta teal scuro,
   Inter 600 15 px, bordo bianco 2 px che resta anche al passaggio, quando lo sfondo diventa teal scuro e la scritta
   bianca (sulle card "Servizi", che hanno lo sfondo teal scuro, il bordo bianco tiene visibile il pulsante). */
.btn {
  display: inline-block;
  padding: 13px 22px;
  border: 2px solid #fff;
  border-radius: 3px;
  background-color: #fff;
  color: var(--teal-scuro);
  fill: currentColor;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.btn:visited, .btn:focus { color: var(--teal-scuro); }
.btn:hover, .btn:focus-visible { background-color: var(--teal-scuro); border-color: #fff; color: #fff; }

/* ---------- 7. Home ---------- */

/* 7.1 Hero con illustrazione animata (fino al 27/10/2026 un video, archiviato in materiale/video/) */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 10px;
  background-color: var(--teal);
}
.hero__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: var(--contenuto);
  height: 100%;
  margin: 0 auto;
  padding: 10px 0;
}
.hero__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 1 auto;
  width: 100%;
  padding: 0;
}
.hero__heading { position: relative; z-index: 3; max-width: 100%; text-align: start; }
.hero__title {
  font-size: min(125px, calc((100vw - 40px) * .154));   /* 25/10/2026: a 125 px "development" finisce a 821 px dal bordo sinistro; tra 768 e 851 px di finestra il titolo si riduce in proporzione (minimo 112 px a 768) e non esce più dallo schermo (prima la pagina scorreva in orizzontale fino a 53 px). Da 852 px in su resta 125 px; sotto 768 vale la regola da 52 px. */
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
/* In Inter Bold la f e la t di "Software" si toccano: un filo di spazio solo tra quelle due lettere (24/10/2026) */
.hero__title .ft { margin-left: .03em; }
.hero__media {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  gap: 20px;
  flex: 0 1 auto;
  width: 100%;
  padding: 10px;
}
@media (min-width: 768px) {
  .hero__text, .hero__media { width: 50%; }
}
/* Illustrazione animata (27/10/2026, al posto del video): SVG di Lorenzo con animazioni proprie, 1500×1000, fondo #0B7C80,
   disegno spostato a destra per lasciare a sinistra e in basso lo spazio del titolo. Il riquadro ha lo stesso colore di
   fondo, così l'illustrazione intera (contain) non lascia bordi visibili. Da 1160 px in su sta dov'era il vecchio video e il
   titolo grande passa nello spazio libero senza coprire il disegno; tra 768 e 1159 px (fascia centrale più stretta, il
   titolo coprirebbe il monitor) titolo sopra e illustrazione sotto, come sul telefono. */
.hero__illustrazione {
  position: relative;
  z-index: 2;
  flex: 0 1 auto;
  width: 1170px;
  min-width: 0;
  min-height: 490px;
  margin-left: -178px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
  background-color: #0B7C80;
}
.hero__illustrazione img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 2400px) {
  .hero__illustrazione { width: 675px; min-height: 413px; }
}
@media (max-width: 1159px) and (min-width: 768px) {
  .hero__inner { flex-direction: column; align-items: flex-start; justify-content: center; gap: 40px; padding: 160px 0 60px; }
  .hero__text, .hero__media { width: 100%; }
  .hero__media { flex-direction: row; padding: 0; }
  .hero__illustrazione { width: 100%; max-width: 680px; min-height: 0; aspect-ratio: 3 / 2; margin: 0; }
}
@media (max-width: 767px) {
  .hero { min-height: 90vh; margin-top: 65px; }
  .hero__inner { flex-direction: column; justify-content: space-evenly; align-items: center; }
  .hero__heading { z-index: 0; }
  .hero__title { font-size: 52px; }
  .hero__media { padding: 0; }
  .hero__illustrazione { z-index: 0; width: 100%; min-height: 229px; margin: 0; }
}

/* 7.2 Claim */
.claim {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 40vh;               /* 27/10/2026: era 80vh (dall'originale), una schermata quasi vuota per una sola frase */
  padding: 0 10px;
  background-color: var(--teal);
}
.claim__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  height: 100%;
  margin: 0 auto;
  padding: 10px 0;
}
.claim__heading { position: relative; max-width: 100%; text-align: center; }
.claim__title {
  font-size: 74px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  transform-origin: center center;
}
@media (max-width: 767px) {
  .claim__title { font-size: 37px; }
}

/* 7.3 Chi siamo */
.about {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 10px;
  border: 3px solid var(--teal);
  background-color: var(--teal);
}
.about__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  height: 100%;
  margin: 0 auto;
  padding: 10px 0;
}
.about__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 439px;
  padding: 0 10px;
}
.about__box-inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  max-width: var(--contenuto);
  height: 100%;
  margin: 0 auto;
  padding: 10px 0;
}
.about__heading { position: relative; display: flex; flex-direction: column; gap: 20px; }
.about__heading h2 { font-size: 85px; color: #fff; }
.about__lead { position: relative; max-width: 100%; font-size: 38px; font-weight: 700; line-height: 47px; color: #fff; }
.about__more { position: relative; display: flex; flex-direction: column; gap: 20px; }
.about__text { position: relative; max-width: 100%; font-size: 22px; color: #fff; }
.about__cta { position: relative; max-width: 100%; }
@media (min-width: 2400px) {
  .about__inner { align-items: center; }
  .about__box { max-width: 1264px; }
}
@media (max-width: 767px) {
  .about__heading h2 { font-size: 48px; }
  .about__lead { font-size: 22px; line-height: 1.4em; }
}

/* 7.4 Testo scorrevole (widget "text marquee" di Qi Addons) */
.marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 5% 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
}
.marquee__box { position: relative; display: inline-block; width: 100%; vertical-align: top; overflow: hidden; }
.marquee__content { display: flex; white-space: nowrap; font-size: 0; overflow: hidden; }
.marquee__text { display: flex; align-items: baseline; }
.marquee__text--original { animation: marquee-avanti 20s linear infinite; }
.marquee__text--copy {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateX(100%) translateZ(0);
  animation: marquee-copia 20s linear infinite;
}
.marquee__item {
  padding: 0 .5em;
  font-family: "Open Sans", sans-serif;
  font-size: 100px;
  font-weight: 700;
  line-height: 1.1em;
  text-transform: uppercase;
  color: var(--grigio);
}
.marquee--2 .marquee__box { margin-top: 5%; }
@keyframes marquee-avanti { 0% { transform: translateX(0) translateZ(0); } 100% { transform: translateX(-100%) translateZ(0); } }
@keyframes marquee-copia  { 0% { transform: translateX(100%) translateZ(0); } 100% { transform: translateX(0) translateZ(0); } }

/* 7.5 Cosa Facciamo */
.cosa {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 40px;
  column-gap: 0;
  min-height: 80vh;
  padding: 0 15px 15px;
  background-color: #fff;
}
.cosa__head, .servizi__head { position: relative; display: flex; flex-direction: column; width: 100%; }
.cosa__head-inner, .servizi__head-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  margin: 0 auto;
}
.cosa__row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
}
.cosa__row .flip { flex: 1 1 0; min-width: 0; align-self: stretch; }
@media (min-width: 1921px) { .cosa__row { width: 94%; } }
@media (min-width: 2400px) { .cosa__row { width: 1600px; } .cosa { align-items: center; } }
@media (max-width: 1024px) {
  .cosa__row { flex-direction: column; }
  .cosa__row .flip { flex: 0 0 auto; width: 100%; }
}

/* 7.6 Servizi (widget "expanding content cards" di Unlimited Elements) */
.servizi {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 40px;
  column-gap: 0;
  min-height: 76vh;
  padding: 0 15px 15px;
  background-color: #fff;
}
.servizi__wrap { position: relative; display: flex; flex-direction: column; width: 100%; padding: 0 10px; }
.servizi__wrap-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  margin: 0 auto;
  padding: 10px 0;
}
.cards { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; max-width: 100%; }
.cards__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
  min-width: 200px;
}
.card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 110px;
  height: 522px;
  padding: 10px;
  overflow: hidden;
  border-radius: 30px;
  background-color: var(--teal-scuro);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: normal;
  cursor: pointer;
  transition: 800ms cubic-bezier(.05, .61, .41, .95);
}
.card--software { background-image: url(../img/card-software.png); }
.card--schemi   { background-image: url(../img/card-schemi.png); }
.card--quadri   { background-image: url(../img/card-quadri.png); }
.card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all .3s; }
.card.is-active { flex-grow: 10000; padding: 20px; }
.card__shadow { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 100%; opacity: 0; transition: 800ms; }
.card__label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 852px;
  transition: .5s cubic-bezier(.05, .61, .41, .95);
}
.card.is-active .card__label { animation: card-dissolvenza 800ms; }
.card:not(.is-active) .card__label { flex-direction: column-reverse; }
.card__link { position: absolute; width: 100%; height: 100%; }
.card:not(.is-active) .card__link { pointer-events: none; }
.card__info { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.card__info > div { position: relative; left: 0; width: 100%; transition: .5s cubic-bezier(.05, .61, .41, .95), opacity .5s ease-out; }
.card__main { margin-top: 0; font-family: "Inter", sans-serif; font-size: 25px; font-weight: 600; text-align: left; color: #fff; }
.card__sub { margin-top: 0; color: #fff; text-align: left; }
.card:not(.is-active) .card__info > div { left: 0; opacity: 0; width: 0; height: 0; transition: width 0ms; }
.card:not(.is-active) .card__info .card__main { opacity: 1; width: auto; height: auto; writing-mode: vertical-rl; text-orientation: mixed; text-decoration: none; transform: rotate(180deg); }
.card:not(.is-active) .card__sub { height: 0; margin-top: 0; }
.card__btn {   /* era una pillola scura con passaggio viola (Elementor): dal 25/10/2026 stile .btn comune */
  z-index: 2;
  flex-shrink: 0;
  width: auto;
  margin-top: 0;
  opacity: 1;
}
.card:not(.is-active) .card__btn { display: none; opacity: 0; }
@keyframes card-dissolvenza { 0% { opacity: 0; } 80% { opacity: 0; } 100% { opacity: 1; } }
@media screen and (max-width: 520px) {
  .cards__list { display: grid; }
  .card { width: 100%; }
  .card:not(.is-active) .card__info .card__main { writing-mode: horizontal-tb; transform: rotate(0deg); }
  .card:not(.is-active) .card__link { pointer-events: auto; }
  .card:not(.is-active) .card__btn { display: inline-block; opacity: 1; }
  .card:not(.is-active) .card__info > div { opacity: 1; width: 100%; height: auto; }
  .card:not(.is-active) .card__sub { height: auto; }
}

/* 7.7 Realizzazioni */
.realizzazioni {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 5%;
  padding: 10px;
  overflow: hidden;
}
.realizzazioni__head, .scelti__head { position: relative; display: flex; flex-direction: column; width: 100%; padding: 0 10px; }
.realizzazioni__head-inner, .scelti__head-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  margin: 0 auto;
  padding: 10px 0;
}
.realizzazioni__wrap { position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 10px; }
.realizzazioni__grid {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;                      /* spazio tra le illustrazioni e "e molto altro…" */
  align-self: center;
  width: 100%;
  padding: 10px;
}
@media (min-width: 768px) { .realizzazioni__grid { width: 86vw; } }
/* Le 13 illustrazioni di Lorenzo (27/10/2026, al posto delle 8 foto). Griglia a colonne doppie: ogni illustrazione
   occupa 2 colonne e le file più corte partono da metà illustrazione, così restano centrate e non avanza mai
   un'illustrazione da sola a un lato. Da 1200 px: 10 colonne, file da 4-5-4. Tra 768 e 1199: 6 colonne, file da
   3-2-3-2-3. Sotto 768: 4 colonne, due per riga, l'ultima centrata. */
.realizzazioni__lista { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; width: 100%; }
/* Riquadro: illustrazione intera (proporzione 816:660, niente tagli) e nome sotto, bianco su teal scuro (quasi lo
   sfondo delle illustrazioni), angoli arrotondati come card e riquadri della Home. Al passaggio del mouse
   l'illustrazione si ingrandisce appena (movimento, niente dissolvenze); il nome (position: relative) resta sopra.
   isolation: il ritaglio arrotondato resta anche durante l'ingrandimento in Safari. */
.realizzazioni__foto {
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  margin: 0;
  overflow: hidden;
  border-radius: 30px;
  background-color: var(--teal-scuro);
  isolation: isolate;
}
.realizzazioni__foto:nth-child(1), .realizzazioni__foto:nth-child(10) { grid-column: 2 / span 2; }
.realizzazioni__img { display: block; width: 100%; height: auto; aspect-ratio: 816 / 660; object-fit: cover; transition: transform .6s ease; }
@media (hover: hover) { .realizzazioni__foto:hover .realizzazioni__img { transform: scale(1.06); } }
.realizzazioni__nome {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;        /* 27/10/2026: nome centrato sotto l'illustrazione (richiesta di Lorenzo) */
  padding: 12px 18px 14px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}
@media (max-width: 1199px) and (min-width: 768px) {
  .realizzazioni__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .realizzazioni__foto:nth-child(n) { grid-column: span 2; }
  .realizzazioni__foto:nth-child(4), .realizzazioni__foto:nth-child(9) { grid-column: 2 / span 2; }
  .realizzazioni__nome { padding: 10px 14px 12px; font-size: 17px; }
}
.realizzazioni__more {
  position: relative;
  width: auto;
  max-width: 100%;
  align-self: center;
  font-size: 38px;
  font-weight: 700;
  line-height: 47px;
  text-align: end;
  color: var(--grigio);
}
@media (min-width: 2400px) { .realizzazioni__grid { width: 1600px; } }
@media (max-width: 767px) {
  .realizzazioni__grid { gap: 10px; }
  .realizzazioni__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .realizzazioni__foto { border-radius: 20px; }
  .realizzazioni__foto:nth-child(n) { grid-column: span 2; }
  .realizzazioni__foto:nth-child(13) { grid-column: 2 / span 2; }
  .realizzazioni__nome { padding: 8px 10px 10px; font-size: 14px; }
  .realizzazioni__more { font-size: 22px; line-height: 1.4em; }
}

/* 7.8 Scelti da (widget "logo marquee" di Unlimited Elements) */
.scelti {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-height: 595px;
  padding: 10px;
  overflow: hidden;
}
.scelti__wrap { position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%; }
.logos { position: relative; min-height: 1px; text-align: center; opacity: 0; }   /* main.js lo rende visibile */
.logos * { box-sizing: border-box; }
.logos__track { position: relative; display: flex; align-items: center; overflow: hidden; }
.logos__wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  overflow: hidden;
  will-change: transform;   /* lo spostamento lo fa main.js con requestAnimationFrame (25/10/2026) */
  backface-visibility: hidden;
}
.logos__item {
  position: relative;
  height: 120px;   /* era 200: riquadri più piccoli dal 25/10/2026 (altezza e larghezza le imposta main.js dai data-*) */
  padding: 14px;
  overflow: hidden;
  text-align: center;
  border: 1px solid #d7d7d7;
  border-radius: 0;
  background-color: #fff;
}
.logos__item img { display: inline-block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 767px) {
  .scelti { min-height: 351px; }
}

/* 7.9 Pagina Chi siamo */
.chi-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-top: 2%;
  padding: 0 10px;
  background-color: var(--teal);
}
.chi-hero__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  margin: 0 auto;
  padding: 10px 0;
}
.chi-hero__col { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; width: 100%; padding: 10px; }
.chi-hero__sopra { position: relative; max-width: 100%; font-size: 30px; color: #fff; }
.chi-hero__titolo { margin: 0; font-family: "Inter", sans-serif; font-size: 90px; font-weight: 700; line-height: 1; color: #fff; }
@media (max-width: 1920px) {
  .chi-hero { min-height: 75vh; }
  .chi-hero__col { gap: 30px; }
}
@media (min-width: 2400px) { .chi-hero { min-height: 75vh; } }
@media (max-width: 767px) { .chi-hero__titolo { font-size: 56px; } }

.chi-sec2 { position: relative; display: flex; flex-direction: column; padding: 0 10px; }
.chi-sec2__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  margin: 0 auto;
  padding: 10px 0;
}
.chi-testo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; width: 100%; padding: 10px; }
@media (min-width: 768px) { .chi-testo { width: 75%; } }
.chi-intro { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 20px; width: 100%; padding: 10px; }
.chi-intro__testo { position: relative; width: 100%; max-width: 100%; font-size: 24px; color: var(--grigio); }
.chi-mv { position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 10px; }
.chi-riga {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 278px;
  width: 100%;
  padding: 10px;
  border-top: 1px solid #000;
}
.chi-riga--vision { gap: 240px; }
.chi-riga__titolo, .chi-riga__testo { position: relative; flex: 1 1 auto; min-width: 0; max-width: 100%; }
.chi-riga__titolo h2 { margin: 0; font-family: "Inter", sans-serif; font-size: 32px; font-weight: 700; line-height: 1; }
.chi-riga__testo { font-size: 24px; color: var(--grigio); }
@media (max-width: 767px) {
  .chi-intro { padding: 0; }
  .chi-riga { flex-wrap: wrap; gap: 0; padding: 0; }
  .chi-riga__titolo, .chi-riga__testo { flex-grow: 0; }
}

/* Chi siamo, chiusura: il logo a colori che si disegna (25/10/2026). Le 11 forme hanno fill e stroke del proprio colore;
   finché la sezione non entra nello schermo (classe "firma" messa da main.js, come le altre animazioni d'ingresso)
   sono invisibili; poi contorno che si traccia, riempimento che compare, contorno che sparisce, a cascata. */
.chi-firma { position: relative; display: flex; flex-direction: column; padding: 70px 10px 90px; background: #fff; }
.chi-firma__inner { flex: 1 1 auto; display: flex; justify-content: center; width: 100%; max-width: var(--contenuto); margin: 0 auto; }
.chi-firma__logo { display: block; width: 440px; max-width: 80%; height: auto; overflow: visible; }
.chi-firma__forma { fill-opacity: 0; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.chi-firma.firma .chi-firma__forma {
  animation: firma-tratto .7s ease-out forwards, firma-riempimento .5s ease-out forwards, firma-contorno-via .25s ease-out forwards;
  animation-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms + .42s), calc(var(--i) * 90ms + .92s);
}
@keyframes firma-tratto { to { stroke-dashoffset: 0; } }
@keyframes firma-riempimento { to { fill-opacity: 1; } }
@keyframes firma-contorno-via { to { stroke-opacity: 0; } }
@media (max-width: 767px) { .chi-firma { padding: 50px 10px 60px; } }

/* 7.10 Pagina Cosa facciamo */
html.senza-scorrimento-x, html.senza-scorrimento-x body { max-width: 100%; overflow-x: clip; }   /* CSS personalizzato della pagina originale; dal 25/10/2026 clip invece di hidden: con hidden il body diventava un contenitore di scorrimento e la barra in alto (sticky) non restava in cima */
.cosa-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 90vh;
  margin-top: 6%;
  padding: 0 10px;
  overflow: hidden;
  background-color: var(--teal);
}
.cosa-hero__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  margin: 0 auto;
  padding: 10px 0;
}
.cosa-hero__col { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; width: 100%; padding: 10px; }   /* era overflow: hidden (Elementor): tagliava il titolo che entra da sinistra al bordo della colonna */
.cosa-hero__sopra, .cosa-hero__intro { position: relative; max-width: 100%; font-size: 30px; color: #fff; }
.cosa-hero__titolo { margin: 0; font-family: "Inter", sans-serif; font-size: 90px; font-weight: 700; line-height: 1; color: #fff; }
@media (max-width: 1920px) {
  .cosa-hero { min-height: 100vh; margin-top: 4%; }
  .cosa-hero__col { gap: 45px; }
}
@media (min-width: 2400px) {
  .cosa-hero { min-height: 90vh; margin-top: 0; }
  .cosa-hero__col { gap: 40px; }
}
@media (max-width: 767px) {
  .cosa-hero { min-height: 88vh; margin-top: 30%; }
  .cosa-hero__col { justify-content: center; }
  .cosa-hero__titolo { font-size: 48px; }
  .cosa-hero__intro { font-size: 20px; }
}
/* le cinque sezioni numerate */
.cosa-sez {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 3%;
  overflow: hidden;
  background-color: #fff;
}
.cosa-sez--scura { background-color: var(--teal); } /* dal 24/10/2026 lo stesso teal della fascia in cima (era --teal-scuro, #097B81) */
.cosa-sez__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  margin: 0 auto;
  padding-top: 3%;
}
.cosa-sez--2 .cosa-sez__inner, .cosa-sez--3 .cosa-sez__inner, .cosa-sez--4 .cosa-sez__inner, .cosa-sez--5 .cosa-sez__inner { padding-top: 15%; }
.cosa-sez--2, .cosa-sez--4 { margin-top: -10%; }
.cosa-sez--3, .cosa-sez--5 { margin-top: -116px; }
.cosa-testa { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; width: 100%; min-height: 238px; padding: 10px; }
.cosa-testa--5 { margin-bottom: -50px; padding: 0; }
.cosa-titolo { margin: 0; font-family: "Inter", sans-serif; font-size: 110px; font-weight: 700; line-height: 1; color: var(--teal); }
.cosa-sez--scura .cosa-titolo { color: #fff; }
.cosa-riga { position: relative; display: flex; flex-direction: row; gap: 20px; width: 100%; padding: 10px; }
.cosa-riga__numero, .cosa-riga__testo { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; flex: 0 1 auto; width: 100%; padding: 10px; }
.cosa-riga__testo { overflow: hidden; }
@media (min-width: 768px) {
  .cosa-riga__numero { width: 35%; }
  .cosa-sez--1 .cosa-riga__numero { width: 25%; }
}
/* Dal 24/10/2026 il paragrafo parte sulla stessa linea sinistra del disegno (che è centrato: 800 px nelle sezioni 1 e 4,
   768 nelle altre). La colonna del numero è larga quanto lo spazio a sinistra del disegno meno i 40 px di spazi interni
   e distanza, e non si restringe; solo da 1200 px in su, dove la colonna è larga almeno 120 px e il numero ci sta. Va dopo le regole 25 %/35 %. */
@media (min-width: 1200px) {
  .cosa-riga__numero, .cosa-sez--1 .cosa-riga__numero { flex: 0 0 auto; width: calc(50% - 414px); }
  .cosa-sez--1 .cosa-riga__numero, .cosa-sez--4 .cosa-riga__numero { width: calc(50% - 430px); }
}
.cosa-numero { margin: 0; font-family: "Inter", sans-serif; font-size: 140px; font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--teal); }
.cosa-sez--scura .cosa-numero { color: #fff; }
.cosa-descrizione { position: relative; max-width: 100%; font-size: 30px; color: var(--grigio); }
.cosa-sez--scura .cosa-descrizione { color: #fff; }
.cosa-blocco { position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 10px; }
.cosa-blocco--z { z-index: 1; }
.cosa-foto { position: relative; max-width: 100%; text-align: center; }
.cosa-foto img { display: inline-block; vertical-align: middle; }
@media (max-width: 767px) {
  .cosa-sez--3, .cosa-sez--5 { margin-top: -10%; }
  .cosa-testa--solo { min-height: 0; }
  .cosa-titolo { font-size: 36px; }
  .cosa-testa--5 .cosa-titolo { font-size: 48px; }
  .cosa-riga { flex-wrap: wrap; }
  .cosa-numero { font-size: 48px; }
  .cosa-descrizione { font-size: 25px; }
}
/* chiusura */
.cosa-fine {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 10px;
  overflow: hidden;
  background-color: var(--teal);
  transform-origin: center center;
}
.cosa-fine__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  margin: 0 auto;
  padding: 10px 0;
}
@media (max-width: 1920px) and (min-width: 768px) { .cosa-fine__inner { max-width: 855px; } }
.cosa-fine__col { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 20px; width: 100%; padding: 10px; overflow: hidden; }
.cosa-fine__box { position: relative; max-width: 100%; padding: 30px; }
.cosa-fine__titolo { margin: 0; font-family: "Inter", sans-serif; font-size: 60px; font-weight: 700; line-height: 1; color: #fff; }
@media (max-width: 1920px) { .cosa-fine__titolo { font-size: 50px; } }
@media (max-width: 767px) {
  .cosa-fine { min-height: 80vh; margin-top: -10%; }
  .cosa-fine__box { text-align: start; }
  .cosa-fine__titolo { font-size: 26px; }
}

/* 7.11 Pagina Servizi */
.serv-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-top: 5%;
  padding: 0 10px;
  background-color: var(--teal);
}
.serv-hero__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  margin: 0 auto;
  padding: 10px 0;
}
.serv-hero__col { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 20px; width: 100%; padding: 10px; }
.serv-hero__titolo { margin: 0; font-family: "Inter", sans-serif; font-size: 100px; font-weight: 700; line-height: 1; color: #fff; }
.serv-hero__row { position: relative; display: flex; flex-direction: row; gap: 20px; width: 100%; padding: 10px; }
.serv-hero__testocol { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 20px; flex: 0 1 auto; width: 100%; padding: 10px; }
.serv-hero__testo { position: relative; max-width: 100%; font-size: 30px; color: #fff; }
@media (min-width: 2400px) { .serv-hero { margin-top: 3%; } }
@media (max-width: 767px) {
  .serv-hero { margin-top: 30%; }
  .serv-hero__titolo { font-size: 48px; }
  .serv-hero__row { flex-wrap: wrap; }
}
.serv-sez, .serv-fine {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 3%;
  background-color: #fff;
}
.serv-sez--scura { background-color: var(--teal-scuro); }
.serv-fine { background-color: var(--teal); }
.serv-sez__inner, .serv-fine__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: var(--contenuto);
  margin: 0 auto;
}
.serv-fine__inner { gap: 20px; }
.serv-testa { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; width: 100%; min-height: 0; padding: 10px; }
.serv-titolo { margin: 0; font-family: "Inter", sans-serif; font-size: 91px; font-weight: 700; line-height: 1; color: var(--teal); }
.serv-sez--scura .serv-titolo { color: #fff; }
.serv-riga { position: relative; display: flex; flex-direction: row; gap: 25px; width: 100%; padding: 10px; }
.serv-riga--2 { padding: 0; }
.serv-riga--3 { gap: 20px; }
.serv-foto { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; flex: 0 1 auto; width: 100%; padding: 10px; background-repeat: no-repeat; background-size: cover; background-position: center; } /* "center" dal 24/10/2026: le illustrazioni sono centrate (le foto erano in alto a sinistra, la terza a destra) */
.serv-foto--1 { gap: 36px; min-height: 408px; padding: 0; background-image: url(../img/servizi-sfondo-1.png); }
.serv-foto--2 { min-height: 62px; background-image: url(../img/servizi-sfondo-2.png); }
.serv-foto--3 { min-height: 334px; padding: 0; background-image: url(../img/servizi-sfondo-3.png); }
.serv-testocol { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; flex: 0 1 auto; width: 100%; padding: 10px; }
.serv-testocol--1 { justify-content: center; padding: 0; }
.serv-testo { position: relative; max-width: 100%; font-size: 30px; color: var(--grigio); }
.serv-sez--scura .serv-testo { color: #fff; }
@media (min-width: 768px) {
  .serv-foto--1, .serv-foto--2 { width: 56%; }
  .serv-foto--3 { width: 51%; }
  .serv-testocol { width: 64%; }
}
.serv-fine__col { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; width: 100%; min-height: 238px; padding: 10px; }
.serv-fine__box { position: relative; max-width: 100%; padding: 15px; }
.serv-fine__titolo { margin: 0; font-family: "Inter", sans-serif; font-size: 59px; font-weight: 700; line-height: 1; color: #fff; }
@media (max-width: 767px) {
  .serv-titolo { font-size: 40px; }
  .serv-riga { flex-wrap: wrap; }
  .serv-riga--2 { gap: 0; }
  .serv-foto--2 { min-height: 261px; padding: 0; }
  .serv-testo { font-size: 25px; }
  .serv-fine__titolo { font-size: 30px; }
}

/* 7.12 Pagina Contatti (il form dell'originale è stato eliminato il 24/10/2026: al suo posto i recapiti) */
.cont-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 100vh;
  padding: 10px;
  background-color: var(--teal);
}
.cont-hero__col { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 20px; width: 100%; padding: 10px; }
.cont-hero__titolo { margin: 0; font-family: "Inter", sans-serif; font-size: 100px; font-weight: 700; line-height: 1; color: #fff; }
.cont-box { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; width: 100%; padding: 10px; }
.cont-testocol, .cont-recapiti { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 100%; padding: 10px; }
.cont-testo { position: relative; max-width: 100%; font-size: 30px; color: #fff; }
@media (min-width: 768px) { .cont-hero__col, .cont-box { width: 90%; } }
@media (max-width: 1024px) { .cont-hero { margin-top: 9%; } }
@media (max-width: 767px) {
  .cont-hero { margin-top: 35%; }
  .cont-hero__titolo { font-size: 48px; }
  .cont-box { padding: 0; }
}
.cont-recapito { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: #fff; }
.cont-recapito__etichetta { font-size: 15px; line-height: 1; }
.cont-recapito__link { font-size: 30px; font-weight: 700; line-height: 1.2; color: #fff; text-decoration: none; border-bottom: 1px solid #fff; overflow-wrap: anywhere; transition: color .3s, border-color .3s; }
.cont-recapito__link:hover { color: var(--teal-scuro); border-color: var(--teal-scuro); }
@media (max-width: 767px) { .cont-recapito__link { font-size: 24px; } }
.cont-mappa { position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 0; }
/* Mappa nello stile del sito (25/10/2026): immagine centrata sulla sede, ritagliata a 420 px di altezza, punto che "respira" */
.mappa { position: relative; width: 100%; height: 420px; overflow: hidden; background: #0B7C80; }
.mappa__immagine { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mappa__pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
.mappa__pin::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: mappa-respiro 2.4s ease-in-out infinite; }
@keyframes mappa-respiro { 0%, 100% { transform: scale(.8); } 50% { transform: scale(1.25); } }
.mappa__link { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); padding: 15px 30px; font-size: 16px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
.mappa__credito { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: rgba(255, 255, 255, .8); }
.mappa__credito a { color: inherit; }
@media (max-width: 767px) { .mappa { height: 300px; } }
/* Email battuta lettera per lettera (main.js § 7), pulsante Copia e scelte rapide con oggetto precompilato */
.cont-recapito__riga { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* l'indirizzo resta nascosto finché la battitura non parte (altrimenti si vedrebbe già scritto, poi cancellato e riscritto); senza JavaScript il <noscript> in pagina lo mostra */
.cont-recapito__link[data-scrivi] { visibility: hidden; }
.cont-recapito__link.is-scrivendo, .cont-recapito__link.is-scritto { visibility: visible; }
.cont-recapito__link.is-scrivendo::after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 4px; vertical-align: -.1em; background: #fff; animation: cont-cursore 1s steps(2, start) infinite; }
@keyframes cont-cursore { to { visibility: hidden; } }
.cont-copia { padding: 8px 14px; border: 2px solid #fff; border-radius: 3px; background: #fff; color: var(--teal-scuro); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .3s, color .3s; }   /* come .btn, una taglia più piccolo */
.cont-copia:hover, .cont-copia:focus-visible { background: var(--teal-scuro); color: #fff; }
.cont-scelte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.cont-scelte__etichetta { margin-right: 4px; font-size: 15px; color: #fff; }

/* 7.13 Pagina Privacy e Cookie Policy (dal 25/10/2026 il testo è nella pagina, iubenda eliminato; /cookie-policy/ reindirizza qui con un 301 in _redirects) */
.titolo-pagina-wrap { padding-top: 160px; }   /* l'header (130 px) si sovrappone alla prima sezione: senza questo spazio il titolo restava coperto, come nell'originale */
.titolo-pagina { max-width: var(--contenuto); margin: 0 auto 10px; padding: 0 10px; font-family: "Inter", sans-serif; font-size: 52px; font-weight: 700; line-height: 1.2; color: var(--teal); }
.policy { position: relative; display: flex; flex-direction: column; padding: 0 10px; }
.policy__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: var(--contenuto);
  margin: 0 auto;
  padding: 10px 0;
}
.policy__widget { position: relative; max-width: 860px; padding-bottom: 40px; font-family: "Inter", sans-serif; font-size: 17px; line-height: 1.65; color: #333; }   /* righe non troppo lunghe per la lettura */
.policy__widget h2 { margin: 2.2em 0 .6em; font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--teal-scuro); scroll-margin-top: 20px; }
.policy__widget h3 { margin: 1.4em 0 .4em; font-size: 18px; font-weight: 600; color: #333; }
.policy__widget p, .policy__widget ul { margin: 0 0 1em; }
.policy__widget ul { padding-left: 1.3em; }
.policy__widget a { color: var(--teal-scuro); }
.policy__aggiornato { color: #6b7280; font-size: 15px; }
.policy__tabella { width: 100%; margin: 1em 0; border-collapse: collapse; font-size: 16px; }
.policy__tabella th, .policy__tabella td { padding: 10px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.policy__tabella th { background: #f3f8f8; }
@media (max-width: 767px) {
  .titolo-pagina-wrap { padding-top: 150px; }
  .titolo-pagina { font-size: 34px; }
  .policy__widget { font-size: 16px; }
  .policy__tabella { font-size: 15px; }
  .policy__tabella th, .policy__tabella td { padding: 8px 6px; }
}

/* 7.14 Pagine inglesi: le poche differenze di stile rispetto alle italiane (dall'originale) */
@media (min-width: 2400px) {
  .en .flip--cosa .flip__title { font-size: 50px; }
  .en .flip--cosa .flip__desc { font-size: 38px; }
}
@media (max-width: 1920px) { .en .chi-hero__col { gap: 20px; } }
.en .cosa-hero__col { gap: 20px; }
@media (max-width: 1920px) { .en .cosa-hero__col { gap: 20px; } }
@media (min-width: 2400px) { .en .cosa-hero__col { gap: 20px; } }
.en .cosa-riga, .en .cosa-sez--3 .cosa-blocco, .en .cosa-sez--5 .cosa-blocco { overflow: hidden; }
.en .cosa-riga__testo, .en .cosa-sez--5, .en .cosa-fine, .en .cosa-fine__col { overflow: visible; }

/* 7.15 Ancore delle sezioni (24/10/2026): gli id 01-05 di Cosa facciamo e 01-03 di Servizi stanno sul blocco del
   titolo, non sulla <section> (che inizia molto più in alto, con lo spazio e la foto che sconfina dalla sezione prima):
   arrivando da un link con #0N il titolo si ferma 40 px sotto il bordo della finestra. */
.cosa-testa, .serv-testa { scroll-margin-top: 40px; }

/* 7.16 Pagina 404 (27/10/2026): la pagina d'errore di Cloudflare Pages, in italiano e in inglese. Fondo teal scuro
   (bianco leggibile: contrasto 5:1), pulsanti .btn verso le due home. */
.errore { display: flex; min-height: 100vh; padding: 170px 10px 60px; background-color: var(--teal-scuro); color: #fff; }
.errore__inner { width: 100%; max-width: var(--contenuto); margin: auto; text-align: center; }
.errore__codice { margin: 0 0 30px; font-family: "Inter", sans-serif; font-size: 160px; font-weight: 700; line-height: 1; }
.errore__colonne { display: flex; justify-content: center; gap: 60px; }
.errore__lingua { flex: 0 1 420px; }
.errore__lingua + .errore__lingua { padding-left: 60px; border-left: 1px solid rgba(255, 255, 255, .35); }
.errore__lingua h1, .errore__lingua h2 { margin: 0 0 12px; font-family: "Inter", sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: #fff; }
.errore__lingua p { margin: 0 0 24px; font-family: "Inter", sans-serif; font-size: 18px; line-height: 1.5; }
@media (max-width: 767px) {
  .errore { padding-top: 150px; }
  .errore__codice { font-size: 110px; }
  .errore__colonne { flex-direction: column; align-items: center; gap: 36px; }
  .errore__lingua { flex-basis: auto; }
  .errore__lingua + .errore__lingua { padding: 36px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .35); }
  .errore__lingua h1, .errore__lingua h2 { font-size: 26px; }
}

/* 7.17 Pagine italiane: niente maiuscole all'inglese (27/10/2026, richiesta di Lorenzo). I titoli di sezione della Home
   hanno text-transform: capitalize (dall'originale), che trasforma "Chi siamo" in "Chi Siamo" e "Scelti da" in "Scelti Da";
   in italiano resta il testo com'è scritto. Nelle pagine inglesi le maiuscole dei titoli restano ("What We Do"). */
html:lang(it) .about__heading h2, html:lang(it) .cosa__head h2, html:lang(it) .servizi__head h2,
html:lang(it) .realizzazioni__head h2, html:lang(it) .scelti__head h2 { text-transform: none; }

/* ---------- 8. Flip box (widget "flip box" di Elementor Pro) ---------- */
.flip { position: relative; max-width: 100%; }
.flip__box { position: relative; height: 280px; perspective: 1000px; transform-style: flat; }   /* 25/10/2026: era preserve-3d, vedi .flip--up .flip__box */
@media (max-width: 1024px) { .flip__box { cursor: pointer; } }
.flip__layer { position: absolute; width: 100%; height: 100%; transition: all .6s ease-in-out; }
.flip__front { background-color: #1abc9c; }
.flip__back { display: block; background-color: #4054b2; }
.flip__overlay {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 35px;
  color: #fff;
  text-align: center;
}
.flip__title { font-size: 21px; font-weight: 600; line-height: 1; }
.flip__desc { font-size: 14px; }
.flip__title:not(:last-child), .flip__desc:not(:last-child) { margin: 0 0 20px; padding: 0; }
.flip__btn { align-self: center; margin-inline: auto; }   /* stile .btn comune */
/* effetto "flip" verso l'alto */
.flip--up .flip__box { perspective: 1000px; transform-style: flat; }   /* 25/10/2026: niente contesto 3D "conservato". In Firefox (WebRender) un elemento che si ridisegna dentro un contesto preserve-3d (il pulsante Read more al passaggio del mouse) produceva una riga chiara sui riquadri vicini. Il ribaltamento non ne ha bisogno: i due livelli ruotano con la prospettiva del contenitore e il retro nascosto (backface-visibility) basta, perché fronte e retro non sono mai visibili insieme. */
.flip--up .flip__layer { backface-visibility: hidden; transform-style: flat; }   /* 25/10/2026: era preserve-3d (Elementor). Con preserve-3d i figli del fronte (banda, numero, etichetta) restavano nello spazio 3D, complanari al retro a ribaltamento finito: in Firefox ne usciva una riga chiara sui riquadri vicini. Con flat il fronte e i suoi figli sono un solo piano, nascosto insieme al fronte. */
.flip--up .flip__front { z-index: 1; transform: none; }
.flip--up .flip__back { transform: rotateX(-180deg) rotateY(0); }
.flip--up .flip__box:hover .flip__front, .flip--up .flip__box:focus-visible .flip__front { transform: rotateX(180deg) rotateY(0); }
.flip--up .flip__box:hover .flip__back, .flip--up .flip__box:focus-visible .flip__back { transform: none; }
/* flip box "Cosa facciamo" */
.flip--cosa .flip__front { background-color: rgba(2, 1, 1, 0); border: 3px solid var(--teal); }
.flip--cosa .flip__back { background-color: var(--teal); }
.flip--cosa .flip__front, .flip--cosa .flip__back { border-radius: 30px; }   /* 25/10/2026: angoli stondati come le card Servizi (30 px) */
.flip--cosa .flip__banda { border-radius: 27px 27px 0 0; }   /* la banda segue l'interno del bordo (30 - 3 px). Niente overflow hidden sui livelli del flip: in Firefox disegnava una riga chiara sui riquadri vicini durante il ribaltamento */
.flip--cosa .flip__front .flip__overlay { padding: 0 0 25px 10px; text-align: start; justify-content: flex-end; }
.flip--cosa .flip__title { font-family: "Inter", sans-serif; font-size: 50px; color: var(--teal); }
.flip--cosa .flip__desc { font-family: "Inter", sans-serif; font-size: 30px; font-weight: 600; line-height: 28px; color: var(--teal); }
.flip--cosa .flip__back .flip__overlay { text-align: center; padding-inline: 20px; }   /* 26/10/2026: con 35 px "SCOPRI DI PIÙ" (153 px) andava a capo nei riquadri da 220 px */
@media (max-width: 1920px) { .flip--cosa .flip__desc { font-size: 17px; } }
@media (min-width: 2400px) {
  .flip--cosa .flip__box { height: 373px; }
  .flip--cosa .flip__title { font-size: 45px; }
  .flip--cosa .flip__desc { font-size: 30px; line-height: 48px; }
}
@media (max-width: 1024px) { .flip--cosa .flip__desc { font-size: 30px; line-height: 1.5em; } }
@media (max-width: 767px) { .flip--cosa .flip__title { font-size: 50px; } .flip--cosa .flip__desc { font-size: 30px; } }
/* Fascia illustrata in cima al fronte dei flip box (illustrazioni di Lorenzo, 24/10/2026): alta quanto lo spazio
   libero sopra il numero (45 % del riquadro; 31 % sotto 1025 px, dove il titolo è più grande), illustrazione centrata
   e scalata all'altezza della fascia, sfondo dello stesso colore delle immagini. */
.flip--cosa .flip__banda { position: absolute; top: 0; left: 0; right: 0; height: 45%; background: #0B7C80 center / auto 100% no-repeat; }
@media (max-width: 1024px) { .flip--cosa .flip__banda { height: 31%; } }
[id="01"] .flip__banda { background-image: url(../img/cosa-banda-1.png); }
[id="02"] .flip__banda { background-image: url(../img/cosa-banda-2.png); }
[id="03"] .flip__banda { background-image: url(../img/cosa-banda-3.png); }
[id="04"] .flip__banda { background-image: url(../img/cosa-banda-4.png); }
[id="05"] .flip__banda { background-image: url(../img/cosa-banda-5.png); }
/* Dal 24/10/2026 (richiesta di Lorenzo): i riquadri "Cosa facciamo" non superano mai 370 px di larghezza; da 1200 px in su
   cinque in fila come prima; tra 900 e 1199 px tre per riga più due sotto, centrati; tra 768 e 899 px due per riga;
   sotto 768 px uno per riga, alto 220 px invece di 280. Il titolo resta a 17 px anche sugli schermi medi (l'originale
   lo portava a 30 px sotto 1025 px, gonfiando i riquadri). Queste regole vengono dopo quelle precedenti e le sovrascrivono. */
.cosa__row { flex-wrap: wrap; justify-content: center; }
.cosa__row .flip--cosa { max-width: 370px; }
@media (max-width: 1199px) and (min-width: 768px) {
  .cosa__row { flex-direction: row; }
  .cosa__row .flip--cosa { flex: 0 0 calc((100% - 20px) / 3); width: auto; }
}
@media (max-width: 899px) and (min-width: 768px) {
  .cosa__row .flip--cosa { flex-basis: calc((100% - 10px) / 2); }
}
@media (max-width: 1024px) {
  .flip--cosa .flip__desc { font-size: 17px; line-height: 28px; }
  .flip--cosa .flip__banda { height: 45%; }
}
@media (max-width: 767px) {
  .cosa__row .flip--cosa { width: 100%; }
  .flip--cosa .flip__box { height: 220px; }
  .flip--cosa .flip__desc { font-size: 17px; line-height: 28px; }
  .flip--cosa .flip__banda { height: 31%; }
}
/* Dal 25/10/2026 (richiesta di Lorenzo): la fila dei riquadri sta nella fascia centrale (1140 px) come il titolo e le altre
   sezioni, quindi da 1200 px in su i riquadri sono 220 px larghi (erano fino a 370); da 768 px in su sono alti 230 px (erano 280),
   numero 40 px (era 50), etichetta 20 px (era 30 o 17), banda illustrata al 44 %. Sotto 768 px niente cambia. */
.cosa__row { max-width: calc(var(--contenuto) + 20px); margin: 0 auto; }
@media (min-width: 768px) {
  .flip--cosa .flip__box { height: 230px; }
  .flip--cosa .flip__title { font-size: 40px; }
  .flip--cosa .flip__desc { font-size: 20px; line-height: 22px; }
  .flip--cosa .flip__front .flip__overlay { padding: 0 0 20px 10px; }
  .flip--cosa .flip__banda { height: 44%; }   /* 45 % toccava la riga del numero di 1 px */
}

/* ---------- 9. Footer ---------- */
.footer__main {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 44px max(10px, calc((100% - 1160px) / 2)) 34px;   /* 25/10/2026: le colonne stanno nella fascia centrale di 1140 px (+ 10 px di padding per lato) come le altre sezioni; sopra e sotto spazio fisso (era 5 % della larghezza sopra e 0 sotto: fascia sbilanciata e sempre più alta sugli schermi larghi) */
  border-top: 1px solid rgba(255, 255, 255, .28);
  background-color: var(--teal);
}
.footer__col { position: relative; display: flex; flex-direction: column; gap: 20px; flex: 0 1 auto; width: 100%; padding: 10px; }
.footer__col--cta { gap: 0; }
@media (min-width: 768px) {
  .footer__col--brand { justify-content: center; }   /* 25/10/2026: testo centrato in verticale rispetto alle altre colonne */
}
@media (min-width: 1025px) {
  /* 25/10/2026: via la colonna "Link Utili" (doppione del menu); tre colonne 46 / 27 / 27 % */
  .footer__col--brand { width: 46%; }
  .footer__col--contact { width: 27%; }
  .footer__col--cta { width: 27%; }
}
/* 25/10/2026: il logo bianco grande della prima colonna è stato tolto; il marchio sta nella fascia del copyright, a colori */
.footer__about { padding-right: 60px; color: #fff; }
/* Decodifica (25/10/2026): main.js § 8 spezza il testo in lettere a larghezza fissa; finché una lettera non è "risolta"
   mostra uno 0 o un 1 in teal scuro. Le frasi chiave restano in grassetto. */
.footer__about .chiave { font-weight: 600; }
.footer__about .parola { display: inline-block; white-space: nowrap; }   /* una parola non si spezza a metà riga */
.footer__about .lett { display: inline-block; text-align: center; }
.footer__about .lett.is-bit { color: var(--teal-scuro); }
.footer__title { font-size: 22px; text-align: start; color: #fff; }
.footer__address { color: #fff; }
/* Colonna Contatti dal 25/10/2026: email cliccabile e LinkedIn come link con tessera piccola (stesso gioco di colori dei pulsanti) */
.footer__email a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .55); transition: color .3s, border-color .3s; }
.footer__email a:hover, .footer__email a:focus-visible { color: var(--teal-scuro); border-color: var(--teal-scuro); }   /* 25/10/2026: gioco di colori dei pulsanti */
.footer__social { line-height: 1; }
.footer__linkedin { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; transition: color .3s; }
.footer__linkedin-tessera { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 10%; background-color: #fff; color: var(--teal-scuro); transition: background-color .3s, color .3s; }
.footer__linkedin-tessera svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.footer__linkedin:hover .footer__linkedin-tessera, .footer__linkedin:focus-visible .footer__linkedin-tessera { background-color: var(--teal-scuro); color: #fff; }
.footer__linkedin:hover, .footer__linkedin:focus-visible { color: var(--teal-scuro); }   /* la scritta segue la tessera */
.footer__linkedin:hover .footer__linkedin-tessera, .footer__linkedin:focus-visible .footer__linkedin-tessera { color: #fff; }

.footer__cta-title { padding-bottom: 14px; }   /* 25/10/2026: spazi regolari tra titolo, testo e pulsante */
.footer__cta-title h4 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 24px;   /* era 28: a 1440 px andava a capo in due righe nella colonna da 218 px */
  font-weight: 600;
  font-style: normal;
  line-height: 1.3em;
  letter-spacing: -.5px;
  text-decoration: none;          /* 27/10/2026: tolto text-transform: capitalize ("Vuoi Migliorare?"): i testi sono già scritti con le maiuscole giuste */
  color: #fff;
}
.footer__cta-text {
  display: flow-root;
  column-gap: 0;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  letter-spacing: -.8px;
  word-spacing: 0;
  color: #fff;
}
.footer__cta-text p { margin: 0; }
.footer__cta-btn { padding-top: 22px; text-align: left; }
.footer__cta-freccia { display: inline-block; margin-left: 4px; transition: transform .3s; }
.footer__cta-link:hover .footer__cta-freccia { transform: translateX(4px); }
.footer__copy {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-self: center;
  padding: 0 5%;
  background-color: #fff;   /* 25/10/2026: fascia bianca con il logo a colori, il testo legale e il distintivo */
}
.footer__copy-inner { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 48px; width: 100%; min-height: 64px; padding: 10px; }   /* 25/10/2026: logo, testo e distintivo in un gruppo centrato, 48 px tra loro (prima logo e distintivo stavano ai bordi) */
.footer__copy-text { position: relative; max-width: 100%; text-align: center; color: #5f6466; }
.footer__copy-text p { margin: 0; }   /* il margine del paragrafo spostava il testo sopra il centro della fascia */
.footer__copy-text a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }   /* 25/10/2026: link alla privacy dopo la partita IVA, gioco di colori grigio -> teal scuro */
.footer__copy-text a:hover, .footer__copy-text a:focus-visible, .footer__copy-text a.is-active { color: var(--teal-scuro); border-color: var(--teal-scuro); }
.footer__copy-logo { display: block; flex: 0 0 auto; width: 92px; line-height: 0; }
.footer__copy-logo svg { display: block; width: 100%; height: auto; }
.footer__copy-badge { flex: 0 0 auto; }   /* distintivo Ignition, dal 25/10/2026 qui invece che tra i contatti */
.footer__copy-badge img { display: block; width: auto; height: 44px; }
@media (max-width: 767px) {
  .footer__copy-inner { flex-direction: column; padding: 14px 10px; gap: 14px; }
  .footer__copy-logo, .footer__copy-badge { margin: 0 auto; }
}
@media (max-width: 1024px) {
  .footer__main { flex-direction: column; }
  .footer__title, .footer__address, .footer__email, .footer__social, .footer__cta-title { text-align: center; }
  .footer__col--cta { margin-top: 6%; }
  .footer__cta-title h4 { font-size: 22px; }
  .footer__cta-text { font-size: 14px; text-align: center; }
}
@media (max-width: 1024px) and (min-width: 768px) {
  /* 25/10/2026: testo a tutta larghezza in alto, sotto Contatti e Vuoi migliorare affiancate e allineate a sinistra
     (prima: blocchi impilati con titoli centrati e pulsante a sinistra, come nell'originale) */
  .footer__main { flex-direction: row; flex-wrap: wrap; padding: 5% 5% 0; }   /* tra 768 e 1024 px proporzioni di prima */
  .footer__col--brand { width: 100%; }
  .footer__about { padding-right: 0; }
  .footer__col--contact, .footer__col--cta { width: calc((100% - 20px) / 2); flex: 1 1 0; margin-top: 0; }
  .footer__title, .footer__address, .footer__email, .footer__social, .footer__cta-title, .footer__cta-text { text-align: start; }
}
@media (max-width: 767px) {
  .footer__main { gap: 0; margin: 0; padding: 2% 4% 5%; }
  .footer__col--brand { width: 100%; }
  .footer__about { font-size: 20px; text-align: start; }
  .footer__col--contact { gap: 0; }
  .footer__col--contact .footer__title { font-size: 25px; }
  .footer__address, .footer__email, .footer__linkedin { font-size: 22px; }
  .footer__col--cta { align-items: flex-start; }
  .footer__cta-title h4 { font-size: 25px; }
  .footer__cta-text { margin: 0; font-size: 22px; text-align: start; }
  .footer__cta-btn { align-self: flex-start; }
}

/* ---------- 10. Effetti di scorrimento (valori calcolati da main.js) ---------- */
[data-fx] { transition: transform .1s; }                                  /* elementi "widget" di Elementor */
.fx-contenitore[data-fx] { transition: transform 1s cubic-bezier(0, .33, .07, 1.03), opacity 1s cubic-bezier(0, .33, .07, 1.03); }   /* contenitori */
@media (prefers-reduced-motion: reduce) { .fx-contenitore[data-fx] { transition-duration: 0s !important; } }

/* ---------- 11. Animazioni d'ingresso (classi animate.css usate da Elementor) ---------- */
/* I titoli che entrano da destra partono una larghezza di schermo fuori: il taglio dello sbordo sta sulle sezioni, larghe
   quanto lo schermo, così il titolo emerge dal bordo dello schermo e non dal bordo del suo contenitore. */
.about, .cosa, .servizi, .realizzazioni, .scelti { overflow-x: clip; }
.anim { visibility: hidden; }                       /* main.js la toglie quando l'elemento entra nello schermo */
.animated { animation-duration: .7s; animation-timing-function: ease-out; animation-fill-mode: both; }   /* era 1,25 s; 0,7 s dal 25/10/2026, uguale per tutti i titoli */
.animated.animated-slow { animation-duration: 1.2s; }
.animated.animated-fast { animation-duration: .75s; }
.fadeInUp { animation-name: fadeInUp; }
.slideInRight { animation-name: slideInRight; }
.slideInLeft { animation-name: slideInLeft; }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }   /* usata solo dalle voci del menu a comparsa */
@keyframes slideInRight { from { transform: translate3d(100vw, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }   /* dal 25/10/2026 al posto di fadeInRight: arriva da destra senza sfumare */
@keyframes slideInLeft { from { transform: translate3d(-100vw, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }   /* -100vw (era -100%, cioè la larghezza del titolo: ne restava visibile la coda) */
/* Tolta il 25/10/2026 la regola che con "riduci movimento" attivo nel sistema spegneva tutte le animazioni d'ingresso
   e le transizioni dei flip box: sul PC di Lorenzo (effetti di animazione di Windows disattivati) nessuna animazione
   partiva. Come per il preloader, il sito non segue quell'impostazione. */