/* ============================================================
   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 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%; }
}
.hero__video {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  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: url(../img/video-home-poster.jpg) 50% 50% / cover;   /* immagine di riserva del video */
}
.hero__video::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: .35;
}
.hero__video-box {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  direction: ltr;
}
.hero__video-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #000;
  opacity: .35;
}
.hero__video-el {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
@media (min-width: 2400px) {
  .hero__video { width: 675px; min-height: 413px; }
}
@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__video { z-index: 0; width: 100%; min-height: 229px; margin: 0; }
}

/* 7.2 Claim */
.claim {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 80vh;
  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. */